html,
body {width:100%; height:100%; margin:0px; padding:0;}
body {position: relative; display:table; table-layout:fixed; background:#e2e0cf; font-size:14px; color:#333; font-family: 'Open Sans', sans-serif; font-weight:400; line-height:1.5;}

.bodymask {position:fixed; width:100%; height:100%; left:0; top:0; z-index:99999999;}

form {padding:0; margin:0;}
input, object {outline:none;}
img {margin:0; padding:0; border:0;}
p {padding:0; margin:0;}
a {outline:none; color:inherit;}
div, header, main, footer, ul, li, form, nav {position:relative;}
.boxsizing {max-width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.fclear::after {content:''; display:block; clear:both; height:0; overflow:hidden;}
.clear {clear:both; height:0; overflow:hidden;}
.ellipsis {overflow:hidden; o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap;}
.inlblk {display:inline-block;}
div.inlblk {vertical-align: top;}
.inlblkvt {display:inline-block; vertical-align: top;}
b,strong {font-weight:700;}
ul {list-style-type:circle; margin:0 0 0 5px; padding:0 0 0 10px;}
ul li {margin:0; padding:5px 5px 0 0;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.error {margin-bottom: 20px; color: #C90003; font-size: 14px;}
.monthdot {display: none;}

/* -------------------- INPUT --------------------------*/
main input,
main textarea,
main select {font-family: 'Open Sans', sans-serif; font-weight:400; max-width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

main input[type="text"],
main input[type="password"],
main input[type="email"],
main input[type="tel"],
main input[type="number"], 
main input[type="date"],
main select {display:block; width:100%; height: 32px; padding:5px; background:#fff; font-size:16px; color:#000; border:0; border-radius:0;}
main textarea {display:block; width:100%; padding:5px; background:#fff; font-size:16px; color:#000; border:0; border-radius:0; overflow:auto; resize:vertical; text-align:left; -webkit-appearance:none; outline: none !important; box-shadow: none !important;}
main input[type="checkbox"],
main input[type="radio"] {vertical-align:middle; margin:0; padding:0;}
main input[type="number"] {appearance: textfield; -moz-appearance: textfield; -webkit-appearance: textfield;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input::-ms-reveal,
input::-ms-clear {display: none;}

main input.small {padding:2px 5px; font-size:14px;}
main input.inl {display:inline-block; vertical-align:middle;}
main input.w200 {width:200px;}
main input.w250 {width:250px;}
main input.w300 {width:300px;}
main input.code {width:120px; margin: 0 auto 20px; font-size: 20px; font-weight: 700; letter-spacing: 3px; text-align: center;}
main .finput {padding:5px; background:#eee; font-size:16px; color:#333;}

main label.chk {display:inline-block; position:relative; padding-left:23px; font-size:14px; vertical-align:middle;}
main label.chk.blk {display:block;}
main label.chk input[type="checkbox"],
main label.chk input[type="radio"] {position:absolute; left:0px; top:4px;}
main label.chk.fs16 input[type="checkbox"],
main label.chk.fs16 input[type="radio"] {top: 6px;}
main label.chk span {display:inline-block;}
main label.forchk {display: inline-block; padding: 0; vertical-align: top;}
main label.mr {margin-right: 15px;}
main .pw input {z-index:1;}
main .pw .b {position:absolute; width:27px; height:100%; right:3px; top:0; z-index:2;}
main .pw .b.v {background:url(/images/global/view-pw.png) no-repeat center;}
main .pw .b.h {background:url(/images/global/hide-pw.png) no-repeat center;}

main input[type="submit"],
main input[type="button"] {display:none;}

main input::-webkit-input-placeholder {opacity:1 !important; color:#666;}
main input:-ms-input-placeholder {opacity:1 !important; color:#666;}
main input::-moz-placeholder {opacity:1 !important; color:#666;}
main input::placeholder {opacity:1 !important; color:#666;}
main textarea::-webkit-input-placeholder {opacity:1 !important; color:#666;}
main textarea:-ms-input-placeholder {opacity:1 !important; color:#666;}
main textarea::-moz-placeholder {opacity:1 !important; color:#666;}
main textarea::placeholder {opacity:1 !important; color:#666;}

main input.red::-webkit-input-placeholder {opacity:1 !important; color:#C90003;}
main input.red:-ms-input-placeholder {opacity:1 !important; color:#C90003;}
main input.red::-moz-placeholder {opacity:1 !important; color:#C90003;}
main input.red::placeholder {opacity:1 !important; color:#C90003;}
main textarea.red::-webkit-input-placeholder {opacity:1 !important; color:#C90003;}
main textarea.red:-ms-input-placeholder {opacity:1 !important; color:#C90003;}
main textarea.red::-moz-placeholder {opacity:1 !important; color:#C90003;}
main textarea.red::placeholder {opacity:1 !important; color:#C90003;}

main .red {color: #C90003;}


/* -------------------- HEADER --------------------------*/

header {display:block; position:fixed; width:100%; left:0; top:0; background:#bed26f; z-index:1000;}
header.abs {position:absolute !important; left:auto; top:auto;}
header .center {width:800px; height:71px; margin:0 auto; z-index:2;}
header .center .logo {display:block; position:absolute; left:20px; top:5px; z-index:2;}
header .center .logo img {display:block;}
header .center .titre {position:absolute; width:100%; left:0; top:0; padding:20px 120px 0; font-size:20px; font-weight:700; line-height: 30px; text-align:center; z-index:1;}
header .center .cpt {display:block; position:absolute; width: 120px; height: 100%; right:0px; top:0px; font-size: 0; cursor: pointer; text-decoration: none; z-index:2;}
header .center .cpt .in {width: 100%; height: 100%; background: #5e5e5e; padding: 10px 0 0; text-align: center;}
header .center .cpt .in .ic {width: 18px; height: 26px; margin: 0 auto 5px; background: url("/images/global/moncpt-w.svg") no-repeat center;}
header .center .cpt.logout .in .ic {width: 33px; margin: 0 auto 7px; background: url("/images/global/logout.svg") no-repeat center;}
header .center .cpt .in .lib {font-size: 14px; color: #fff; line-height: 1; vertical-align: middle;}
header .center .cpt.logout .in .lib {font-size: 13px;}

@media screen and (max-width: 480px) {
header .center .logo {left:5px;}
header .center .titre {padding: 20px 100px 0; font-size:18px;}
header .center .cpt {width: 100px;}
header .center .cpt .in .lib {font-size: 12px;}
header .center .cpt.logout .in .lib {font-size: 11px;}
}
@media screen and (max-width: 400px) {
header,
header .center {height: 50px;}
header .center .logo img {width: auto; height: 40px;}
header .center .titre {padding: 10px 100px 0 65px; font-size:16px;}
header .center .cpt .in {padding-top: 8px;}
header .center .cpt .in .ic {height: 18px;}
header .center .cpt.logout .in .ic {margin-bottom: 5px;}
}

/* -------------------- MAIN --------------------------*/
main {display:table-row; position:relative; height:100%; z-index:1;}
main .center {width:1200px; min-height: 260px; margin:0 auto; padding:120px 20px 80px;}
main.mc {padding-top: 71px;}
main.mc .step {padding-top: 49px;}

main .t1 {font-size:18px; font-weight:700; line-height: 1.2; color:#7f7451;}
main .info {font-size:12px;}

main .inlcont {font-size:0;}

main .success {padding-left:32px; background:url(/images/global/success-g.svg) no-repeat left top; background-size: 24px;}
main .success .v {display:inline-block; padding: 2px 0; font-size:16px; line-height: 20px; color:#5ea600; font-weight:700;}
main .success .info {font-size:12px;}

main .success.c {padding: 0; background: none; text-align:center;}
main .success.c .in {display:inline-block; padding-left:32px; background:url(/images/global/success-g.svg) no-repeat left top; background-size: 24px; text-align: left;}


main .submit {font-size: 0; text-align: center;}
main .submit.s {height: auto;}
main .submit .btn {display: inline-block; width: 200px; height: 40px; padding: 9px 0; font-size: 16px; line-height: 20px; background: #d0de99; color: #333; border: 1px solid #7f7451; border-radius: 5px; text-align: center; transition: all ease-out 0.2s; cursor: pointer;}
main .submit.s .btn {width: auto; height: auto; padding: 6px 15px; font-size: 14px; line-height: 16px;}
.bureau main .submit .btn:hover {background: #bdde37;}
main .submit .btn.off {opacity: 0.5; pointer-events: none;}
main .submit .btn.load span {visibility: hidden;}

main .getsimu {font-size: 0; text-align: center;}
main .getsimu .btn {display: block; padding: 5px 10px; font-size: 14px; line-height: 20px; background: #fff; color: #000; border: 1px solid #7f7451; border-radius: 0; text-align: center; transition: all ease-out 0.2s; cursor: pointer;}
.bureau main .getsimu .btn:hover {background: #eee;}
main .getsimu .btn.off {opacity: 0.5; pointer-events: none;}
main .getsimu .btn.load span {visibility: hidden;}




@media screen and (max-width: 600px) {
main .center {padding:120px 15px 80px;}
}
@media screen and (max-width: 400px) {
main .center {padding:80px 10px 80px;}
main.mc .center {padding-top: 50px;}
main.mc .center .step {padding-top: 30px;}
}



main .txtintro {margin-bottom: 20px; font-size: 16px;}
main .txtintro span {display: inline-block; text-align: left;}
main .ctr {text-align: center;}

main .tosite {margin-bottom: 30px;}
main .tosite a {display: inline-block; margin: 0 10px 10px; padding: 8px 15px; background-color: #d0de99; color: #333; border: 1px solid #7f7451; text-decoration: none; font-size: 14px; border-radius: 5px; transition: background-color ease-out 0.2s; vertical-align: top;}
.bureau main .tosite a:hover {background-color: #bdde37;}

main .resaday {width: 650px; margin: 0 auto; font-size: 0; text-align: center;}
main .resaday .date {display: inline-block; margin-bottom: 5px; vertical-align: top; text-align: left;}
main .resaday .date .l {display: inline-block;  vertical-align: top;}
main .resaday .date span.c {display: inline-block; min-height: 34px; padding: 8px 0 8px 8px; text-align: left; vertical-align: top;}
main .resaday .date span.n {padding-left: 35px; font-size: 14px; line-height: 18px; color: #fff;}
main .resaday .date span.n.d {width: 100px; background: #5e5e5e url("/images/global/resa-date-w.png") no-repeat 8px center;}
main .resaday .date span.n.h {width: 90px; background: #5e5e5e url("/images/global/resa-heure.png") no-repeat 8px center;}
main .resaday .date span.v {background: #fff; font-size: 16px; line-height: 18px; font-weight: bold;}
main .resaday .date span.v.d {width: 260px;}
main .resaday .date span.v.h {width: 60px; padding: 8px 0; text-align: center;}


/*-------------------------------------- FOOTER -----------------------------------------------*/

footer {display:table-row; position:relative; height:1px; z-index:200;}
footer .inner {background: #5e5e5e;}
footer .inner .center {width: 1200px; margin: 0 auto; font-size: 0; text-align: center;}
footer .inner .center a {display: inline-block; margin: 0 1px 0 0; padding:9px 10px 8px; margin-right:1px; background:rgba(255,255,255,0.20); font-size:12px; color: #fff; text-decoration:none !important; vertical-align:top;}
footer .inner .center a:last-child {margin-right: 0;}
.bureau footer .inner .center a:hover {background-color:rgba(255,255,255,0.30);}



/*------------------------ STEP COMMUN ----------------------------------*/

.step .back {text-align: center;}
.step .back span {display: inline-block; position: relative; padding: 6px 0 6px 38px; font-size: 14px; line-height: 18px; cursor: pointer;}
.step .back span::before {content: ''; position: absolute; width: 30px; height: 30px; left: 0; top: 0; border-radius: 50%; background: #bab193 url("/images/global/fl-l-w.svg") no-repeat center; background-size: 8px auto;}
.bureau .step .back span:hover::before {background-color: #d1c499;}

main .stepid {margin-bottom: 40px; font-size: 0; text-align: center;}
main .stepid > div {display: inline-block; margin: 0 5px; vertical-align: top;}
main .stepid > div:first-child {margin-left: 0;}
main .stepid > div:last-child {margin-right: 0;}
main .stepid > div.stp {padding: 5px 10px;}
main .stepid > div.stp.off {opacity: 0.6;}
main .stepid > div.stp.sel {border-bottom: 5px solid #bed26f;/*background: #d0de99; border-radius: 5px;*/}
main .stepid > div.stp p:first-child {font-size: 14px; line-height: 18px;}
main .stepid > div.stp p:last-child {font-size: 14px; line-height: 18px; font-weight: 700;}
main .stepid > div.fl {width: 6px; height: 46px; background: url("/images/global/fleche-titre-right.png") no-repeat center;}

.step .fs16 {font-size: 16px;}
.step .mb5 {margin-bottom: 5px !important;}
.step .mb10 {margin-bottom: 10px !important;}
.step .mb15 {margin-bottom: 15px !important;}
.step .mb20 {margin-bottom: 20px !important;}
.step .mb30 {margin-bottom: 30px !important;}
.step .mb40 {margin-bottom: 40px !important;}
.step .mb50 {margin-bottom: 50px !important;}
.step .mb60 {margin-bottom: 60px !important;}
.step .pt5 {padding-top: 5px !important;}
.step .pt10 {padding-top: 10px !important;}
.step .pt15 {padding-top: 15px !important;}
.step .pt20 {padding-top: 20px !important;}
.step .ts {padding: 8px; background: #5e5e5e; color: #fff;}
.step .tv {padding: 8px 5px; background: #bed26f; font-size: 16px; font-weight: 700;}
.step .tg {padding: 8px 5px; background: #5e5e5e; color: #fff; font-size: 16px; font-weight: 700;}
.step .tb {padding: 8px 5px; background: #d1c499; font-size: 16px; font-weight: 700;}
.step .tr {padding: 8px 5px; background: #CD0003; color: #fff; font-size: 16px; font-weight: 700;}

.step .tbl {display: table; table-layout: fixed;}
.step .tbl.xl {width: 100%;}
.step .tbl.mctr {margin: 0 auto;}
.step .tbl .cell {display: table-cell; height: 40px; line-height: 18px; vertical-align: middle;}
.step .tbl .cell.label {padding: 8px; background: #5e5e5e; color: #fff;}
.step .tbl .cell.noinput {padding: 8px 15px; background: #d1c499;}
.step .tbl .cell.noinput.red {color: #CB0003;}
.step .tbl .cell.b {font-weight: 700;}
.step .tbl .cell.txtr {text-align: right;}
.step .tbl .cell.ctr {padding: 8px 0; text-align: center;}
.step .tbl .cell.ctr.pad {padding: 8px 8px;}
.step .tbl .cell.xxs {width: 60px;}
.step .tbl .cell.xs {width: 100px;}
.step .tbl .cell.m {width: 160px;}
.step .tbl .cell.l {width: 220px;}
.step .tbl .cell.xl {width: 280px;}
.step .tbl .cell.input {padding: 0; background: #fff;}
.step .tbl .cell.input.num {font-size: 0;}
.step .tbl .cell.input .plus {display: inline-block; width: 40px; height: 100%; background: #bab193 url("/images/global/plus-w.svg") no-repeat center; background-size: 22px; vertical-align: top;}
.step .tbl .cell.input .moins {display: inline-block; width: 40px; height: 100%; background: #bab193 url("/images/global/moins-w.svg") no-repeat center; background-size: 22px; vertical-align: top;}
.step .tbl .cell.input input[type="number"] {display: inline-block; width: calc(100% - 80px); height: 100%; padding: 5px 0; text-align: center; font-weight: 700;}
.step .tbl .cell.input input.h100 {height: 100%;}
.step .tbl .cell.finput {padding: 5px; background: #d1c499; font-size: 16px; text-align: center;}
.step .tbl .cell.ic {width: 50px; padding: 0;}
.step .tbl .cell.ic.ok {background: #eee url("/images/global/checked-g.svg") no-repeat center; background-size: auto 16px;}
.step .tbl .cell.ic.wait {background: #eee url("/images/global/wait.svg") no-repeat center; background-size: auto 16px;}
.step .tbl .cell.ic.none {background: #eee url("/images/global/none-r.svg") no-repeat center; background-size: auto 16px;}

.step .nbnuitdiff .tbl .cell.dnuit {width: 60px; border-right: 5px solid #e2e0cf; background: #5e5e5e; color: #fff; text-align: center;}
.step .nbnuitdiff .tbl .cell.dnuit .d {font-size: 16px; font-weight: 700;}
.step .nbnuitdiff .tbl .cell.totnuit {width: 40px; background: #d1c499; border-left: 5px solid #e2e0cf; text-align: center;}
.step .nbnuitdiff .tbl .cell.totnuit p:first-child {font-size: 12px;}
.step .nbnuitdiff .tbl .cell.totnuit p.tot {font-size: 16px; font-weight: 700;}
.step .nbnuitdiff .tbl .cell.totnuit p.tot.red {color: #CB0003;}

.step .chkcont {padding: 0 100px 0 50px; background: #5e5e5e; color: #fff; text-align: left; cursor: pointer;}
.step .chkcont.s {padding-right: 15px;}
.step .chkcont .lib {min-height: 40px; padding: 11px 0; line-height: 18px;}
.step .chkcont .chk {position: absolute; width: 40px; height: 100%; left: 0; top: 0; background: #fff;}
.step .chkcont.on .chk {background: #fff url("/images/global/checked-g.svg") no-repeat center; background-size: 24px auto;}
.step .chkcont .prix {position: absolute; width: 90px; height: 100%; right: 0; top: 0; padding: 11px 0; line-height: 18px; color: #333; text-align: center; background: #d1c499;}
.step .chkcont.off {cursor: default; pointer-events: none;}
.step .chkcont.off .chk {background-color: #ccc;}

.step .radiocont .chx {background: #5e5e5e;}
.step .radiocont .val {margin-left: auto; margin-right: auto; background: #5e5e5e; color: #fff; text-align: left; cursor: pointer;}
.step .radiocont .val .cell.l {width: 560px;}
.step .radiocont .val .cell.lib {min-height: 40px; padding: 11px 10px; line-height: 18px;}
.step .radiocont .val .cell.xs {width: 30px;}
.step .radiocont .val .chk {width: 24px; height: 24px; margin-left: 5px; background: #fff; border-radius: 50%;}
.step .radiocont .val.on .chk {background: #fff url("/images/global/checked-g.svg") no-repeat center; background-size: 16px auto;}
.step .radiocont .val.off {cursor: default; pointer-events: none;}
.step .radiocont .val.off .chk {background-color: #ccc;}

.step .paiementsolde * {max-width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.step .paiementsolde {width: 600px; margin: 0 auto;}
.step .paiementsolde .cvcont {padding-left: 5px; border-left: 5px solid #5e5e5e;}
.step .paiementsolde .cvcont .cell {height: auto !important;}
.step .paiementsolde .cvcont .cvtype {border-collapse: collapse;}
.step .paiementsolde .cvcont .cvtype .chx {width: 49%;}
.step .paiementsolde .cvcont .cvtype .chx.off {width: auto; border: 0 !important;}
.step .paiementsolde .cvcont .cvtype .chx:first-child {border-right: 5px solid #e2e0cf;}
.step .paiementsolde .cvcont .cvtype .chx:nth-child(2) {border-left: 5px solid #e2e0cf;}
.step .paiementsolde .cvcont .cvtype .chx > .tbl {height: 100%;}
.step .paiementsolde .cvcont .soldecvconnect {padding-left: 5px; border-left: 5px solid #5e5e5e;}
.step .paiementsolde .cvcont .soldecvconnect > .tbl .cell {width: 50%;}
.step .paiementsolde .cvcont .soldecvconnect .i {padding: 8px; background: #d1c499;}
.step .paiementsolde .btndet {text-align: center !important;}

.step .supdet {padding: 5px 0 0 20px;}
.step .supdet .sup {position: absolute; left: 0; top: 0; font-size: 12px;}

/*------------------------ CALENDAR COMMUN ----------------------------------*/

.calendrier {width:820px; margin: 0 auto;}
.calendrier .resaday {margin-bottom: 40px;}
.calendrier .error {text-align: center;}

.calendrier .leg {display: table; width: 100%; table-layout: fixed; margin-bottom: 30px; font-size: 0; text-align: center;}
.calendrier .leg .c {display: table-cell; width: 33.3333%; padding: 8px 5px; font-size: 14px; vertical-align: middle;}
.calendrier .leg .c.start {padding-left: 40px; background: #bed26f url("/images/global/dispo-de.svg") no-repeat left top; background-size: 30px 100%;}
.calendrier .leg .c.all {background: #bed26f; border: 2px solid #e2e0cf; border-width: 0 2px;}
.calendrier .leg .c.end {padding-right: 40px; background: #bed26f url("/images/global/dispo-ds.svg") no-repeat right top; background-size: 30px 100%;}

.calendrier .cal {margin-bottom: 10px;}
.calendar .head {height: 40px; margin-bottom: 5px; text-align: center; background: #bab193;}
.calendar .head .m {margin:0 40px; font-size: 16px; line-height: 40px; color: #fff; font-weight: bold; z-index: 1;}
.calendar .head .fl {position: absolute; width: 50px; height: 40px; top: 0; border-width: 0; border-style: solid; border-color: #e2e0cf; cursor: pointer; z-index: 5;}
.calendar .head .fl.l {left: 0; border-right-width: 2px; background: #bab193 url("/images/global/fl-l-w.svg") no-repeat center; background-size: 12px 24px;}
.calendar .head .fl.r {right: 0; border-left-width: 2px; background: #bab193 url("/images/global/fl-r-w.svg") no-repeat center; background-size: 12px 24px;}
.bureau .calendar .head .fl:hover {background-color: #d1c499;}
.calendar table {width: 100%; table-layout: fixed; border-collapse: collapse; border-color: transparent;}
.calendar table * {border: 2px solid transparent;}
.calendar table th {padding: 5px; font-weight: normal;}
.calendar table td {width: 14.286%; height: 50px; padding: 0; text-align: center; vertical-align: middle;  font-size: 16px; color: #999;}
.calendar table td div {height: 50px; line-height: 50px; border: 0;}
.calendar table td div.on {background: #bed26f; cursor: pointer; color: #000; font-weight: bold;}
.calendar table td div.off {background: #eee; cursor: default; pointer-events: none;}
.calendar table td div.de {color: #000; font-weight: bold; background-image: url("/images/global/dispo-de.svg"); background-position: left top; background-repeat: no-repeat; background-size: 30% 100%;}
.calendar table td div.ds {background: #bed26f; color: #000; font-weight: bold; background-image: url("/images/global/dispo-ds.svg"); background-position: right top; background-repeat: no-repeat; background-size: 30% 100%; -webkit-box-shadow: inset -1px 0px 0px 0px #eee; -moz-box-shadow: inset -1px 0px 0px 0px #eee; box-shadow: inset -1px 0px 0px 0px #eee;}
.calendar table td div.ds.on {background-image: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.calendar table td div.sel {background: #007FC7 !important; color: #fff !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; cursor: pointer;}
.calendar table td div p {display: block; position: absolute; right: 3px; bottom: 3px; font-size: 10px; line-height: 1; text-align: right;}
/*.calendar table td div.val::after {content: ''; display: block; position: absolute; width: 5px; height: 5px; right: 5px; bottom: 5px; background: #4e8dcc; border-radius: 50%;}
.calendar table td div.val.sel::after {background: #fff;}*/
.bureau .calendar table td div.on:hover {background-color: #ccc;}
.bureau .calendar table td div.on.over {background-color: #9AD3EF;}

/* -------------------- COMMUN --------------------------*/

.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs16 {font-size:16px;}


/* -------------------- OPTIONS --------------------------*/

.step.options .floatrow {width: 820px; margin: 0 auto;}
.step.options .floatrow .left {float: left; width: 380px;}
.step.options .floatrow .right {float: right; width: 380px;}


/* -------------------- RECAP --------------------------*/

.step.recap .floatrow {width: 820px; margin: 0 auto;}
.step.recap .floatrow .left {float: left; width: 380px;}
.step.recap .floatrow .right {float: right; width: 380px;}
.step.recap .libtxt {padding: 8px; background: #5e5e5e; color: #fff;}
.step.recap textarea {height: 82px;}
.step.recap .chkcont {/*display: inline-block; */padding-right: 20px;}
.step.recap a.u {display: inline-block; color: inherit; text-decoration: underline;}
.bureau .step.recap a.u:hover {text-decoration: none;}

.step.recap .impt {padding: 8px 15px 8px 45px; font-size: 16px; line-height: 22px; font-weight: 700; color: #fff; background: #5e5e5e url("/images/global/important.svg") no-repeat 8px 7px; background-size: 28px 24px;}
.step.recap .impttxt {padding: 15px 10px; background: rgba(255,255,255,0.40);}
.step.recap .impttxt ul {list-style-type:disc; margin:0 0 0 10px; padding:0 0 0 7px;}
.step.recap .impttxt ul li {margin:0; padding:0 0 10px 0;}

/* -------------------- VALID --------------------------*/

.step.valid .btncont {font-size: 0; text-align: center;}
.step.valid .btncont .btn {display: inline-block; margin:0 10px 10px; padding: 8px 15px 8px 40px;  color: #333; border: 1px solid #7f7451; border-radius: 5px; font-size: 14px; line-height: 18px;  transition: background-color ease-out 0.2s,color ease-out 0.2s; text-decoration: none; vertical-align: top; cursor: pointer;}
.step.valid .btncont .btn.mc {padding-left: 36px; background: #d0de99 url("/images/global/moncpt.svg") no-repeat 10px center; background-size: auto 18px;}
.step.valid .btncont .btn.nr {background: #d0de99 url("/images/global/resa-date.png") no-repeat 10px center;}
.bureau .step.valid .btncont .btn:hover {background-color: #bdde37;}

/* -------------------- CONNEXION --------------------------*/
.step.connexion .floatrow {width: 820px; margin: 0 auto;}
.step.connexion .floatrow .left {float: left; width: 340px;}
.step.connexion .floatrow .right {float: right; width: 340px;}
.step.connexion .ctrrow {width: 340px; margin: 0 auto;}

.step.connexion .mdpoub {text-align: center;}
.step.connexion .mdpoub span {display:inline-block; font-size:12px; cursor:pointer;}
.bureau .step.connexion .mdpoub:hover {text-decoration:underline;}


/* -------------------- NEW CPT --------------------------*/
.step.newcpt {width: 600px; margin: 0 auto;}
.step.newcpt form input.nom {display:inline-block; vertical-align:top; width: 49%; margin-right: 2%;}
.step.newcpt form input.prenom {display:inline-block; vertical-align:top; width: 49%;}
.step.newcpt form input.cp {display:inline-block; vertical-align:top; width: 25%; margin-right: 2%;}
.step.newcpt form input.ville {display:inline-block; vertical-align:top; width: 73%;}
.step.newcpt form input.connuautre {display:inline-block; vertical-align: middle; width: 400px;}

.step.newcpt form .fortel {padding-right: calc(330px + 2%);}
.step.newcpt form .datenaiss {position: absolute; width: 330px; right: 0; top: 0;}
.step.newcpt form .datenaiss label {display: inline-block; vertical-align: top;}
.step.newcpt form .datenaiss label span {display: inline-block; width: 170px; padding: 5px; font-size: 16px; line-height: 22px; background: #fff; vertical-align: top;}
.step.newcpt form .datenaiss input {display: inline-block; padding: 5px 0; border-left: 1px solid #e2e0cf; text-align: center; vertical-align: top;}
.step.newcpt form .datenaiss input.j {width: 45px;}
.step.newcpt form .datenaiss input.a {width: 60px;}

.step.verifcpt .resend span {display: inline-block; padding: 5px 0 5px 32px; font-size: 15px; line-height: 18px; color:#5ea600; background:url(/images/global/success-g.svg) no-repeat left 1px; background-size: 24px;}

/* -------------------- MON COMPTE --------------------------*/

main.mc .step > .globloading {z-index: 50;}
main.mc .step.moncompte {padding-top: 0;}
.step.moncompte nav {margin-bottom: 30px; padding-top: 20px; font-size: 0; text-align: center; z-index: 100;}
.step.moncompte nav.load * {pointer-events: none;}
.step.moncompte nav .btn {display: inline-block; margin: 0 5px 10px; padding: 9px 25px; font-size: 16px; line-height: 20px; color: #5e5e5e; border: 1px solid #5e5e5e; border-radius: 20px; transition: background-color ease-out 0.2s,color ease-out 0.2s; vertical-align: top; cursor: pointer;}
.step.moncompte nav .btn.sel,
.bureau .step.moncompte nav .btn:hover {background: #5e5e5e; color: #fff;}
.step.moncompte nav .btn br {display: none; line-height: 0;}

.step.moncompte .mcstep {z-index: 10;}


/* -------------------- MON COMPTE RESERVATIONS --------------------------*/

.step.moncompte .reservations {width: 820px; margin: 0 auto;}

.step.moncompte .reservations .empty {padding: 30px 0; font-size: 16px; text-align: center;}


.step.moncompte .reservations .btnadd {display:inline-block; position: relative; padding:9px 20px 9px 50px; font-size:16px; line-height:18px; font-weight:700; background:#d0de99; color:#7f7451; border: 1px solid #a99e7a; border-radius:18px; text-align: left; text-decoration: none; cursor:pointer;}
.step.moncompte .reservations .btnadd:before {content:''; position:absolute; width:30px; height:30px; left:3px; top:50%; margin-top: -15px; background:#e2e0cf url(/images/global/insc-plus.png) no-repeat center; border-radius:50%;}
.bureau .step.moncompte .reservations .btnadd {transition:background ease-out 0.2s;}
.bureau .step.moncompte .reservations .btnadd:hover {background: #bdde37;}

.step.moncompte .reservations .btnback {display:inline-block; position: relative; padding:9px 20px 9px 50px; font-size:16px; line-height:18px; font-weight:700; background:#d0de99; color:#7f7451; border: 1px solid #a99e7a; border-radius:18px; text-align: left; text-decoration: none; cursor:pointer;}
.step.moncompte .reservations .btnback:before {content:''; position:absolute; width:30px; height:30px; left:3px; top:50%; margin-top: -15px; background:#5e5e5e url("/images/global/fl-l-w.svg") no-repeat center; background-size: auto 16px; border-radius:50%;}
.bureau .step.moncompte .reservations .btnback {transition:background ease-out 0.2s;}
.bureau .step.moncompte .reservations .btnback:hover {background: #bdde37;}

.step.moncompte .reservations .t {padding: 8px 15px; font-size: 16px; font-weight: 700; border-radius: 5px;}
.step.moncompte .reservations .t.wait {background: #007FC7; color: #fff;}
.step.moncompte .reservations .t.valid {background: #bed26f;}
.step.moncompte .reservations .t.ended {background: #666; color: #fff;}
.step.moncompte .reservations .t.cancel {background: #CD0003; color: #fff;}
.step.moncompte .reservations .t.btn {padding-right: 34px; cursor: pointer;}
.step.moncompte .reservations .t.btn::after {content: ''; position: absolute; width: 14px; height: 8px; right: 10px; top: 50%; margin-top: -4px; background: url("/images/global/fl-b-w.svg") no-repeat; background-size: 100%;}
.step.moncompte .reservations .t.btn.open::after {background: url("/images/global/fl-t-w.svg") no-repeat;}

.step.moncompte .reservations .list .line {background: #eee; border-radius: 5px; cursor: default;}
.step.moncompte .reservations .list .line.toopen {cursor: pointer; transition: background ease-out 0.2s;}
.bureau .step.moncompte .reservations .list .line.toopen:hover {background: #9AD3EF; cursor: pointer;}
.step.moncompte .reservations .list .tab {display: table; width: 100%; table-layout: fixed;}
.step.moncompte .reservations .list .tab .cell {display: table-cell; padding: 5px; vertical-align: middle;}
.step.moncompte .reservations .list .tab .cell.vt {vertical-align: top;}
.step.moncompte .reservations .list .tab .cell.pl {padding-left: 20px;}
.step.moncompte .reservations .list .tab .cell.pr {padding-right: 20px;}
.step.moncompte .reservations .list .tab .cell.xs {width: 130px;}
.step.moncompte .reservations .list .tab .cell.s {width: 150px;}
.step.moncompte .reservations .list .tab .cell.m {width: 160px;}
.step.moncompte .reservations .list .tab .cell.l {width: 170px;}
.step.moncompte .reservations .list .tab .cell.act {width: 30px;}
.step.moncompte .reservations .list .tab .cell.date .rec {margin-bottom: 8px; font-size: 12px;}
.step.moncompte .reservations .list .tab .cell.date .d span.i {display: inline-block; width: 25px; font-size: 12px;}
.step.moncompte .reservations .list .tab .cell.date .d strong {display: inline-block; font-size: 14px;}
.step.moncompte .reservations .list .tab .cell.date .statut {font-size: 12px; color: #CD0003;}

.step.moncompte .reservations .list .tab.wait .cell.act {background: url("/images/global/insc-edit.png") no-repeat 6px 6px;}
.step.moncompte .reservations .list .tab.wait .cell.date .d {margin-bottom: 8px;}

.step.moncompte .reservations .list .tab.valid .cell.act {background: url("/images/global/info.svg") no-repeat 4px 4px; background-size: 22px auto;}
.step.moncompte .reservations .list .tab.valid .cell.date .d strong {margin-right: 8px;}
.step.moncompte .reservations .list .tab.valid .cell.ic {width: 40px; background: url("/images/global/success-g.svg") no-repeat left center; background-size: 30px auto;}
.step.moncompte .reservations .list .tab.cancel .cell.act {background: none;}
.step.moncompte .reservations .list .tab.cancel .cell.date .d strong {margin-right: 8px;}
.step.moncompte .reservations .list .tab.cancel .cell.ic {width: 40px; background: url("/images/global/canceled.svg") no-repeat left center; background-size: 30px auto;}


.step.moncompte .reservations .sta {font-size: 12px;}
.step.moncompte .reservations .sta p.bef {margin-bottom: 3px; font-weight: 700;}
.step.moncompte .reservations .sta p.ok {padding-right: 15px; background: url("/images/global/checked-g.svg") no-repeat right center; background-size: 14px 10px;}
.step.moncompte .reservations .sta p.wait {padding-right: 15px; background: url("/images/global/wait.svg") no-repeat right center; background-size: 14px 10px;}
.step.moncompte .reservations .sta p.none {padding-right: 15px; background: url("/images/global/none-r.svg") no-repeat right center; background-size: 14px 10px;}
.step.moncompte .reservations .sta.c10j p.ok,
.step.moncompte .reservations .sta.c10j p.wait,
.step.moncompte .reservations .sta.c10j p.none {max-width: 100px;}



.step.moncompte .reservations .floatrow {width: 820px; margin: 0 auto;}
.step.moncompte .reservations .floatrow .left {float: left; width: 380px;}
.step.moncompte .reservations .floatrow .right {float: right; width: 380px;}

.step.moncompte .reservations .mlr2 {margin-left: 2px; margin-right: 2px;}
.step.moncompte .reservations.detail .btndet {display: inline-block; margin: 0 2px; padding: 8px 15px; background:#d0de99; border: 1px solid #a99e7a; font-size: 14px; line-height: 22px; text-align: left; text-decoration: none; cursor: pointer;}
.bureau .step.moncompte .reservations.detail .btndet:hover {background-color: #bdde37 !important;}
.step.moncompte .reservations.detail .btndet.load span {visibility: hidden;}
.step.moncompte .reservations.detail .btndet.down {width: 130px; padding-left: 35px; padding-right: 0; background:#d0de99 url("/images/global/insc-download.png") no-repeat 10px center;}
.step.moncompte .reservations.detail .btndet.down.xl {width: 250px;}
.step.moncompte .reservations.detail .btndet.up {width: 130px; padding-left: 48px; padding-right: 0; background:#d0de99 url("/images/global/insc-upload.png") no-repeat 22px center;}

.step.moncompte .reservations.detail .btncontact {width: 510px; margin: 0 auto; padding: 0 10px; background:#d0de99; border: 1px solid #a99e7a; font-size: 14px; line-height: 16px; text-align: center; text-decoration: none; cursor: pointer;}
.step.moncompte .reservations.detail .btncontact span {display: inline-block; padding: 12px 0 12px 45px; text-align: left; background:#d0de99 url("/images/global/resa-contact.png") no-repeat left center;}
.step.moncompte .reservations.detail .contact {width: 510px; margin: 0 auto; padding:0; background:#fff; border: 1px solid #a99e7a; border-top: 0;}
.step.moncompte .reservations.detail .contact textarea {height: 200px; font-size: 14px;}
.step.moncompte .reservations.detail .contact .btnsend {padding: 0 10px; background:#d0de99; /*border: 1px solid #a99e7a;*/ font-size: 16px; line-height: 22px; text-align: center; text-decoration: none; cursor: pointer;}
.step.moncompte .reservations.detail .contact .btnsend span {display: inline-block; padding: 8px 0 8px 30px; text-align: left; background:#d0de99 url("/images/global/resa-contact-send.png") no-repeat left 7px;}
.step.moncompte .reservations.detail .contact .btnsend.load span {visibility: hidden;}
.step.moncompte .reservations.detail .contact .error {margin: 0; padding: 10px; background: #fff;}

.step.moncompte .reservations .legend .ic {display: inline-block; margin: 0 2px 4px; padding: 4px 10px; font-size: 12px; background: #eee;}
.step.moncompte .reservations .legend .ic.ok {padding-left: 34px; background: #eee url("/images/global/checked-g.svg") no-repeat 5px center; background-size: auto 16px;}
.step.moncompte .reservations .legend .ic.wait {padding-left: 26px; background: #eee url("/images/global/wait.svg") no-repeat 5px center; background-size: auto 16px;}
.step.moncompte .reservations .legend .ic.none {padding-left: 30px; background: #eee url("/images/global/none-r.svg") no-repeat 5px center; background-size: auto 16px;}

.step.moncompte .reservations .supdet {width: 646px; margin: 0 auto;}


/* -------------------- MON COMPTE INFORMATIONS --------------------------*/

.step.moncompte .informations {width: 600px; margin: 0 auto;}
.step.moncompte .informations .line {display: table; width: 100%; font-size: 16px; color: #000; table-layout: fixed; text-align: left; line-height: 1.2;}
.step.moncompte .informations .line .cell {display: table-cell; padding: 5px; vertical-align: middle;}
.step.moncompte .informations .line .cell.label {width: 150px; background: #5e5e5e; color: #fff;}
.step.moncompte .informations .line .cell.value {padding-left: 10px; background: rgba(255,255,255,0.80);}

.step.moncompte .informations .btncont {margin-bottom: 30px; text-align: left;}
.step.moncompte .informations .btncont .btn {display: inline-block; margin-bottom: 10px; padding: 7px 15px; background: #d0de99; color: #333; border: 1px solid #7f7451; border-radius: 5px; font-size: 12px; line-height: 14px;  transition: background-color ease-out 0.2s,color ease-out 0.2s; vertical-align: top; cursor: pointer;}
.bureau .step.moncompte .informations .btncont .btn:hover {background-color: #bdde37;}
.step.moncompte .informations .btncont .btn.mr {margin-right: 20px;}

.step.moncompte .informations form.mciform {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #5e5e5e;}

.step.moncompte .informations form input.nom {display:inline-block; vertical-align:top; width: 49%; margin-right: 2%;}
.step.moncompte .informations form input.prenom {display:inline-block; vertical-align:top; width: 49%;}
.step.moncompte .informations form input.cp {display:inline-block; vertical-align:top; width: 25%; margin-right: 2%;}
.step.moncompte .informations form input.ville {display:inline-block; vertical-align:top; width: 73%;}
.step.moncompte .informations form input.connuautre {display:inline-block; vertical-align: middle; width: 400px;}

.step.moncompte .informations form .fortel {padding-right: calc(330px + 2%);}
.step.moncompte .informations form .datenaiss {position: absolute; width: 330px; right: 0; top: 0;}
.step.moncompte .informations form .datenaiss label {display: inline-block; vertical-align: top;}
.step.moncompte .informations form .datenaiss label span {display: inline-block; width: 170px; padding: 5px; font-size: 16px; line-height: 22px; background: #fff; vertical-align: top;}
.step.moncompte .informations form .datenaiss input {display: inline-block; padding: 5px 0; border-left: 1px solid #e2e0cf; text-align: center; vertical-align: top;}
.step.moncompte .informations form .datenaiss input.j {width: 45px;}
.step.moncompte .informations form .datenaiss input.a {width: 60px;}

.step.moncompte .informations form.mciform .submit {text-align: left;}
.step.moncompte .informations form.mciform .submit .close {position: absolute; width: 30px; height: 30px; right: 0; bottom: 5px; background:url("/images/global/close-b.svg") no-repeat center; background-size: 14px; border: 1px solid #5e5e5e; border-radius: 50%; transition: background-size ease-out 0.2s; cursor: pointer;}
.bureau .step.moncompte .informations form.mciform .submit .close:hover {background-size: 18px;}


/*--------------------------------------------------------------- POPUP UPLOAD ------------------------------------------------------------------*/
.popupload {position:fixed; width:100%; height:100%; left:0; top:0; background: rgba(226,224,207,0.85); color: #5e5e5e; z-index:999999; transition:background ease-out 0.2s;}
.popupload.off {background:rgba(226,224,207,0);}
.popupload .in {position:absolute; width:420px; left:50%; top:50%; background:#fff; border-radius: 8px; overflow: hidden; -webkit-transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%) scale(1); transform:translate(-50%,-50%) scale(1); transform-origin: center; transition:all ease-out 0.3s; z-index:99999999;}
.popupload.off .in {opacity:0; -webkit-transform:translate(-50%,-50%) scale(0); -ms-transform:translate(-50%,-50%) scale(0); transform:translate(-50%,-50%) scale(0);}
.popupload .in .top {padding: 6px 40px 6px 15px; background: #5e5e5e; color: #fff;}
.popupload .in .top span {font-size: 15px; font-weight: 700;}
.popupload .in .top .close {position: absolute; width: 30px; height: 100%; right: 0; top: 0; background: url("/images/global/close-w.svg") no-repeat center; background-size: 16px; cursor: pointer;}
.popupload .in .inner {padding: 15px;}
.popupload .in .inner .globerror {color: #C90003;}
.popupload .in .end {padding: 10px 0; text-align: center; font-size: 16px; font-weight: 700; background:#d0de99; cursor: pointer;}
.bureau .popupload .in .end:hover {background:#bdde37;}
.popupload .in .top .close.off,
.popupload .in .end.off {pointer-events: none; cursor: default;}

.popupload .in .inner .cont {min-height: 100px; line-height: 20px;}
.popupload .in .inner .cont label {display: block; margin-bottom: 20px; padding: 8px 10px 8px 36px; background:#d0de99 url("/images/global/insc-upload.png") no-repeat 10px center; border: 1px solid #a99e7a; font-size: 14px; line-height: 22px; text-align: left; cursor: pointer;}
.bureau .popupload .in .inner .cont label:hover {background-color: #bdde37;}
.popupload .in .inner .cont input[type="file"] {position:absolute; width:0px; opacity:0; z-index:-1;}
.popupload .in .inner .cont .nbcont {font-size: 12px;}
.popupload .in .inner .cont .nbcont span {font-size: 16px; font-weight: 700;}
.popupload .in .inner .cont .error {margin-bottom: 0; margin-top: 20px; color: #C90003; font-size: 14px;}
.popupload .in .inner .cont .succ {position: absolute; width: 100%; left: 0; top: -1px; bottom: 0; padding-top: 38px; text-align: center; background: #fff; opacity: 1; transition: opacity ease-out 0.3s;}
.popupload .in .inner .cont .succ.off {opacity: 0; pointer-events: none;}
.popupload .in .inner .cont .succ span {display: inline-block; padding-left: 36px; color:#5ea600; font-size:16px; line-height: 24px; background: url("/images/global/success-g.svg") no-repeat left center; background-size: 24px;}
.popupload .in .inner .canvas {height: 100px; padding-top: 20px;}
.popupload .in .inner canvas {display: block; width: 60px; margin: 0 auto;}

/*--------------------------------------------------------------- SUCCESS ------------------------------------------------------------------*/
.globsuccess {position:fixed; width:100%; height:100%; left:0; top:0; background: rgba(226,224,207,0.85); z-index:999999; transition:background ease-out 0.2s;}
.globsuccess.off {background:rgba(226,224,207,0);}
.globsuccess .in {position:absolute; width:420px; min-height:110px; left:50%; top:50%; background:#fff; -webkit-transform:translate(-50%,-50%) scale(1); -ms-transform:translate(-50%,-50%) scale(1); transform:translate(-50%,-50%) scale(1); transform-origin: center; transition:all ease-out 0.3s; z-index:99999999;}
.globsuccess .in .b {width:420px; min-height:110px; padding:65px 10px 20px; color:#5ea600; font-size:16px; text-align:center; opacity:1; cursor:pointer;}
.globsuccess .in .b::before {content: ''; position: absolute; width: 36px; height: 36px; left: 50%; top: 20px; margin-left: -18px; border-radius: 50%; background: url("/images/global/success-g.svg") no-repeat center; background-size: 24px;}
.globsuccess.off .in {opacity:0; -webkit-transform:translate(-50%,-50%) scale(0); -ms-transform:translate(-50%,-50%) scale(0); transform:translate(-50%,-50%) scale(0);}

/* -------------------- INSCRIPTIONS --------------------------*/

.inscriptions .stepopen {display:none; padding:8px 10px 30px; margin-bottom:40px; background:#d0de99; border-radius:31px; font-size:16px; font-weight:700; text-align:center; cursor:pointer;}
.inscriptions .stepopen::after {content:''; position:absolute; width:100%; height:12px; left:0; bottom:8px; background:url(/images/global/insc-flbas.png) no-repeat center;}
.bureau .inscriptions .stepopen {transition:background ease-out 0.2s;}
.bureau .inscriptions .stepopen:hover {background:#bdde37;}
.inscriptions .step .stepclose {display:none; height:35px; background:url(/images/global/insc-flhaut.png) no-repeat center; cursor:pointer; z-index:10;}
.inscriptions .step {float:left; width:600px; margin-right:50px; padding:0 3px 3px; background:#d0de99; border-radius:18px;}
.inscriptions .step .t {padding:8px 10px; font-size:16px; font-weight:700; z-index:1;}
.inscriptions .step .close {display:none; position:absolute; width:20px; height:20px; right:10px; top:10px; background:url(/images/global/insc-close.png) no-repeat center; cursor:pointer; z-index:10;}
.inscriptions .step .info {padding:0 10px;}
.inscriptions .step .bloc {margin-bottom:3px; padding:40px 10px 60px; background:#fff;}
.inscriptions .step .bloc:last-child {margin-bottom:0; padding-bottom:40px;}
.inscriptions .step.cos .bloc:last-child {border-radius:0 0 15px 15px;}
.inscriptions .step .bloc .num {position:absolute; width:46px; height:46px; left:50%; top:-25px; margin-left:-23px; border-radius:50%; background:#7f7451; color:#fff; font-size:27px; font-weight:700; line-height:45px; text-align:center; z-index:10;}
.inscriptions .step .bloc:first-child .num {top:-23px;}
.inscriptions .step .bloc .btn {display:inline-block; margin-top:20px; padding:5px 15px; background:#d0de99; text-align:center; border-radius:5px; cursor:pointer;}
.bureau .inscriptions .step .bloc .btn {transition:background ease-out 0.2s;}
.bureau .inscriptions .step .bloc .btn:hover {background:#bdde37;}


.inscriptions .step .pay {padding:20px 10px 30px; background:#fff; border-radius:0 0 15px 15px;}

.inscriptions .form {overflow:hidden;}
.inscriptions .form .formdatas {padding:0 20px;}
.inscriptions .form .formadd .formdatas {padding:0;}
.inscriptions .form .formadd .addselected {min-height:50px;}
.inscriptions .form .formdatas .t  {font-size:16px;}
.inscriptions .form .formdatas .checked {padding:1px 0 1px 30px; font-size:16px; line-height:20px;}
.inscriptions .form .formdatas .checked::before {content:''; position:absolute; width:22px; height:22px; left:0; top:0; background:#fff url(/images/global/insc-check.png) no-repeat center; border-radius:50%;}
.inscriptions .form .formdatas .tarif {margin-top:5px;}
.inscriptions .form .formdatas .regl {display:inline-block;}

.inscriptions .form .formdocs {padding:0 0 5px; margin:0 5px 5px; background:#fff;}
.inscriptions .form .formdocs .t {padding:5px 10px; font-size:16px; font-weight:700; background:#7f7451; color:#fff;}
.inscriptions .form .formdocs .fs13 {padding:0 15px;}
.inscriptions .form .formdocs .wait {padding:5px 15px; background:#bdde37; font-weight:700;}
.inscriptions .form .formdocs .error {padding:0 15px;}
.inscriptions .form .formdocs .docs .l {display:block; padding:13px 10px 13px 60px; line-height:19px; cursor:pointer;}
.bureau .inscriptions .form .formdocs .docs .l {transition:background ease-out 0.2s;}
.bureau .inscriptions .form .formdocs .docs .l:hover {background:#bdde37;}
.inscriptions .form .formdocs .docs .l .rd {display:block; position:absolute; width:33px; height:33px; left:15px; top:4px; border-radius:50%; border:2px solid  #7f7451; background:url(/images/global/insc-upload.png) no-repeat center;}
.inscriptions .form .formdocs .docs .l .rd.end {background:url(/images/global/insc-check.png) no-repeat center;}
.inscriptions .form .formdocs .docs .l .rd.err {background:url(/images/global/insc-error.png) no-repeat center;}
.inscriptions .form .formdocs .docs .l canvas {display:none; position:absolute; width:37px; height:37px; left:15px; top:4px;}
.inscriptions .form .formdocs .docs .l span {font-size:12px;}
.inscriptions .form .formdocs .docs input[type="file"] {position:absolute; width:0px; opacity:0; z-index:-1;}

.inscriptions .docsdown {padding:0 3px 3px; background:#d0de99; border-radius:18px;}
.inscriptions .docsdown .t {padding:8px 10px; font-size:16px; font-weight:700;}
.inscriptions .docsdown .links {background:#fff; padding-top:5px; border-radius:0 0 15px 15px;}
.inscriptions .docsdown .links a {display:block; position:relative; padding:12px 10px 12px 60px; font-size:14px; line-height:22px; background:#fff; text-decoration:none;}
.inscriptions .docsdown .links a span {display:block; position:absolute; width:33px; height:33px; left:15px; top:4px; border-radius:50%; border:2px solid  #7f7451; background:url(/images/global/insc-download.png) no-repeat center;}
.bureau .inscriptions .docsdown .links a {transition:background ease-out 0.2s;}
.bureau .inscriptions .docsdown .links a:hover {background:#bdde37;}
.inscriptions .docsdown .links p {padding:15px;}


.inscriptions .formattente {padding:10px 15px; background:#DC0003; color:#fff; font-size:16px;}
.inscriptions .form .formattente {margin:0 5px 5px;}

.inscriptions .form .formstatut {padding:0 0 5px; margin:0 5px 5px; background:#fff;}
.inscriptions .form .formstatut .t {padding:5px 10px; font-size:16px; font-weight:700; background:#7f7451; color:#fff;}
.inscriptions .form .formstatut .txt {padding:0 15px;}
.inscriptions .form .formstatut .txt .ok {padding-left:25px; background:url(/images/global/insc-check.png) no-repeat left 6px;}
.inscriptions .form .formstatut .txt .miss {padding-left:25px; background:url(/images/global/insc-error.png) no-repeat left 3px;}
.inscriptions .form .formstatut .txt .docstatut {min-height:20px;}

.inscriptions form {width:800px; margin:0 auto; padding:20px; border-radius:0 18px 18px 18px; background:#d0de99;}
.inscriptions .list .line {display:table; margin-bottom:15px; table-layout:fixed; width:100%; background:#d0de99; border-radius:24px;}
.inscriptions .list .line.on {margin-bottom:0; border-radius:22px 22px 0 0;}
.bureau .inscriptions .list .line {transition:background-color ease-out 0.2s;}
.bureau .inscriptions .list .line:not(.on):hover {background:#bed26f;}
.inscriptions .list .line .cell {display:table-cell; padding:3px 20px; font-size:16px; vertical-align:middle;}
.inscriptions .list .line .cell.action {width:42px; font-size:0; padding:3px;}
.inscriptions .list .line .cell.action .btn {display:inline-block; width:42px; height:42px; border-radius:50%; border:2px solid #7f7451; cursor:pointer; vertical-align:top;}
.inscriptions .list .line .cell.action .btn.det {background:#e2e0cf url(/images/global/insc-detail.png) no-repeat center;}
.bureau .inscriptions .list .line .cell.action .btn {transition:background-color ease-out 0.2s;}
.bureau .inscriptions .list .line .cell.action .btn:hover {background-color:#bed26f;}
.inscriptions .list {width:800px; margin:0 auto;}
.inscriptions .list .formline {margin-bottom:25px; padding:20px 0 5px; border-radius:18px; background:#d0de99;}
.inscriptions .list .formline.on {border-radius:0 0 18px 18px;}



/* -------------------- MEDIA QUERIES --------------------------*/

@media screen and (max-width: 1080px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (min-width: 841px) {
}
@media screen and (max-width: 860px) {
.step.options .floatrow {width: 510px;}
.step.recap .floatrow {width: 510px;}
.step.options .floatrow .left,
.step.options .floatrow .right,
.step.recap .floatrow .left,
.step.recap .floatrow .right,
.step.moncompte .floatrow.detl .left,
.step.moncompte .floatrow.detl .right {width: auto; float: none; margin: 0 auto;}
.step.moncompte .floatrow.detl {width: 646px; margin: 0 auto;}

/*.step.options .tbl .cell.m {width: 200px;}*/
.step.options .tbl .cell.l,
.step.moncompte .floatrow.detl .tbl .cell.l {width: auto;}

.step.recap .tbl .cell.xs {width: 200px;}
.step.recap .tbl .cell.xl {width: auto;}
}
@media screen and (max-width: 820px) {
.step.moncompte .reservations .floatrow.infrmt {width: auto; font-size: 13px;}
.step.moncompte .reservations .floatrow.infrmt .left,
.step.moncompte .reservations .floatrow.infrmt .right {width: 49%;}
.step.moncompte .reservations .floatrow.infrmt .tbl .cell.l {width: 185px;}
.step.moncompte .reservations .floatrow.infrmt .tbl .cell.m {width: auto;}
.step.moncompte .reservations .floatrow.infrmt .fs16 {font-size: 14px;}
}
@media screen and (max-width: 800px) {
.step.connexion .floatrow {width: auto;}
.step.connexion .floatrow .left,
.step.connexion .floatrow .right {float: none; margin: 0 auto;}
.step.connexion .floatrow .right {padding-top: 40px; border-top: 1px solid #7f7451;}
}
@media screen and (max-width: 680px) {
.step.moncompte .reservations .list .tab .cell.dis1 {display: none;}
}
@media screen and (max-width: 660px) {
.step.moncompte .reservations .floatrow.infrmt {font-size: 14px;}
.step.moncompte .reservations .floatrow.infrmt .left,
.step.moncompte .reservations .floatrow.infrmt .right {float: none; width: auto;}
.step.moncompte .reservations .floatrow.infrmt .tbl .cell.l {width: auto;}
.step.moncompte .reservations .floatrow.infrmt .tbl .cell.m {width: 160px;}
.step.moncompte .reservations .floatrow.infrmt .fs16 {font-size: 16px;}
}
@media screen and (max-width: 600px) {
.step.newcpt form input.nom,
.step.moncompte .informations form input.nom {display:block; width: 100%; margin-right: 0;}
.step.newcpt form input.prenom,
.step.moncompte .informations form input.prenom {display:block;  width: 100%;}
.step.newcpt form input.tel,
.step.moncompte .informations form input.tel {display:block; width: 100%;}

main .stepid > div.stp p:first-child {font-size: 12px; line-height: 16px;}
main .stepid > div.stp p:last-child {font-size: 12px; line-height: 16px;}
main .stepid > div.fl {height: 42px;}
}
@media screen and (max-width: 560px) {
.calendrier .leg {display: block;}
.calendrier .leg .c {display: block; width: 360px; margin:0 auto 3px;}
.calendrier .leg .c.start,
.calendrier .leg .c.end {padding: 8px 40px;}
.calendrier .leg .c.all {border:0;}

main .tosite a {margin: 0 5px 10px;}
}
@media screen and (max-width: 539px) {
main .resaday .date span.v {font-size: 14px;}
main .resaday .date span.v.d {width: 230px;}
main .resaday .date span.v.h {width: 40px;}
}
@media screen and (max-width: 520px) {
.calendar table td div.ds,
.calendar table td div.de {background-size: 50% 100%;}

.step.recap .tbl .cell.xs {width: 100px;}

.step.moncompte .informations .line {font-size: 14px;}
.step.moncompte .informations .line .cell.label {width: 85px;}
.step.newcpt form input.cp,
.step.moncompte .informations form input.cp {width: 30%;}
.step.newcpt form input.ville,
.step.moncompte .informations form input.ville {width: 68%;}
.step.newcpt form .fortel,
.step.moncompte .informations form .fortel {padding-right: 0; margin-bottom: 10px;}
.step.newcpt form .datenaiss,
.step.moncompte .informations form .datenaiss {position: relative; width: auto; right: auto; top: auto;}

main .stepid {width: 200px; margin: 0 auto 40px;}
main .stepid > div {display: block; text-align: left; margin: 0;}
main .stepid > div.fl {display: none;}
main .stepid > div.stp.sel {border: 0; background: #d0de99; border-radius: 5px;}
main .stepid > div.stp p {display: inline-block; vertical-align: top;}
main .stepid > div.stp p:first-child {margin-right: 5px;}
main .stepid > div.stp p:first-child::after {content: ' :'; display: inline;}

/*.step.moncompte .reservations .downup.down {margin-left: 0;}*/
}
@media screen and (max-width: 500px) {
.step.moncompte .reservations .list .tab .cell.dis2 {display: none;}
}
@media screen and (max-width: 489px) {
main .resaday .date {display: block;}
main .resaday .date .l {display: block; margin-bottom: 1px; background: #fff;}
main .resaday .date span.n.h {width: 100px;}
main .resaday .date span.v {font-size: 16px;}
main .resaday .date span.v.d {width: auto;}
main .resaday .date span.v.h {width: auto; padding-left: 8px;}
}
@media screen and (max-width: 460px) {
.step.moncompte nav .btn {font-size: 14px;}
}
@media screen and (max-width: 420px) {
.popupload .in {border-radius: 0;}
.step.options .tbl .cell.m,
.step.moncompte .floatrow.detl .tbl .cell.m {width: 130px;}
/*.step .tbl .cell.l {width: 170px;}*/
.step.newcpt form input.cp,
.step.moncompte .informations form input.cp {display: block; width: 100%; margin-right: 0;}
.step.newcpt form input.ville,
.step.moncompte .informations form input.ville {display: block; width: 100%;}

.step.moncompte nav .btn {width: 50%; height: auto; margin: 0; padding: 10px 0; border-radius: 0;}

.step.moncompte .reservations .floatrow.infrmt {font-size: 13px;}
.step.moncompte .reservations .floatrow.infrmt .tbl .cell.m {width: 100px;}
.step.moncompte .reservations .floatrow.infrmt .fs16 {font-size: 14px;}
}
@media screen and (max-width: 400px) {
main label.chk.fs16 {font-size: 15px;}
main label.chk.fs16 input[type="checkbox"],
main label.chk.fs16 input[type="radio"] {top: 5px;}
.step.newcpt form input,
.step.moncompte .informations form input {font-size: 15px;}
.step.newcpt form .datenaiss label span,
.step.moncompte .informations form .datenaiss label span {width: 155px; font-size: 15px;}
.step.newcpt form .datenaiss input.j,
.step.moncompte .informations form .datenaiss input.j {width: 40px;}
.step.newcpt form .datenaiss input.a,
.step.moncompte .informations form .datenaiss input.a {width: 55px;}


.step .paiementsolde .cvcont .cvtype {display: block !important;}
.step .paiementsolde .cvcont .cvtype .chx {display: block !important; width: auto;}
.step .paiementsolde .cvcont .cvtype .chx:first-child {border-right: 0; margin-bottom: 5px;}
.step .paiementsolde .cvcont .cvtype .chx:nth-child(2) {border-left: 0;}
.step .paiementsolde .cvcont .soldecvconnect > .tbl {display: block !important;}
.step .paiementsolde .cvcont .soldecvconnect > .tbl > .cell {display: block !important; width: auto !important; height: auto !important; border: 0 !important;}
}
@media screen and (max-width: 380px) {
main .resaday .date span.v {font-size: 14px;}
}
@media screen and (max-width: 360px) {
.calendrier .leg .c span.inlblk {display: block;}
main .resaday .date span.v.d .month {display: none;}
main .resaday .date span.v.d .monthdot {display: inline;}
.step.moncompte .reservations .list .tab.valid .cell.ic {display: none;}
}
@media screen and (max-width: 340px) {
.step .nbnuitdiff .tbl .cell.label {font-size: 13px;}
/*.step .nbnuitdiff .tbl .cell.dnuit {width: 90px;}
.step .nbnuitdiff .tbl .cell.dnuit .j,
.step .nbnuitdiff .tbl .cell.dnuit .m {font-size: 13px;}*/
}

/*------------- LOADING ----------------*/
.globloading {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(226,224,207,0.85);}
.loading {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(226,224,207,0.85); z-index: 999999;}
.loader {position:absolute !important;left:50%; top:50%; -webkit-transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%);}

.loadpttoright {width:33px;height:7px;}
.loadpttoright div {position:absolute;top:0px;width:7px;height:7px;border-radius:50%;background:#666;animation-timing-function:cubic-bezier(0, 1, 1, 0);}
.loadpttoright div:nth-child(1) {left:1px;animation:loadpttoright1 0.6s infinite;}
.loadpttoright div:nth-child(2) {left:1px;animation:loadpttoright2 0.6s infinite;}
.loadpttoright div:nth-child(3) {left:13px;animation:loadpttoright2 0.6s infinite;}
.loadpttoright div:nth-child(4) {left:25px;animation:loadpttoright3 0.6s infinite;}
@keyframes loadpttoright1 {
0% {transform:scale(0);}
100% {transform:scale(1);}
}
@keyframes loadpttoright3 {
0% {transform:scale(1);}
100% {transform:scale(0);}
}
@keyframes loadpttoright2 {
0% {transform:translate(0, 0);}
100% {transform:translate(12px, 0);}
}
.loadpttoright.xl {width:64px;height:11px;}
.loadpttoright.xl div {width:11px;height:11px;}
.loadpttoright.xl div:nth-child(1) {left:6px;animation:loadpttorightxl1 0.6s infinite;}
.loadpttoright.xl div:nth-child(2) {left:6px;animation:loadpttorightxl2 0.6s infinite;}
.loadpttoright.xl div:nth-child(3) {left:26px;animation:loadpttorightxl2 0.6s infinite;}
.loadpttoright.xl div:nth-child(4) {left:46px;animation:loadpttorightxl3 0.6s infinite;}
@keyframes loadpttorightxl1 {
0% {transform:scale(0);}
100% {transform:scale(1);}
}
@keyframes loadpttorightxl3 {
0% {transform:scale(1);}
100% {transform:scale(0);}
}
@keyframes loadpttorightxl2 {
0% {transform:translate(0, 0);}
100% {transform:translate(20px, 0);}
}
/*-------------------------------------- legendetip ----------------------------------------------*/
.legendetip {position:absolute; z-index:99999999; padding:3px 10px; background:#000; color:#fff; font-family:Arial; font-size:11px; text-align:center;}
.legendetip.right {text-align:left;}
.legendetip.left {text-align:right;}
.legendetip::after {position:absolute; content:''; width:0px; height:0px; border-style:solid; }
.legendetip.bottom::after {left:50%; top:-6px; border-width:0 5px 6px 5px; border-color:transparent transparent #000 transparent; transform: translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%);}
.legendetip.top::after {left:50%; top:100%; border-width:6px 5px 0 5px; border-color:#000 transparent transparent transparent; transform: translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%);}
.legendetip.right::after {left:-6px; top:50%; border-width:5px 6px 5px 0; border-color:transparent #000 transparent transparent; transform: translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%);}
.legendetip.left::after {right:-6px; top:50%; border-width:5px 0 5px 6px; border-color:transparent transparent transparent #000; transform: translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%);}