/* ---------------------------- */
/*			Stylebase			*/
/* ---------------------------- */

/*
 * @autor : dynamic creative
 * @date : 2019-02-02
 * @version : 1.0.0
  */

/* structure */
html { font-size: 100%; height:100%; }
body { height:100%; font-family: 'Helvetica Now Display', sans-serif;  color: #1D1D1B; background:#fff;margin:0; padding:0; line-height:1.3; font-size:16px;}
button { font-family: 'Helvetica Now Display', sans-serif; }

/* titre */
h1, h2, h3, h4, h5, h6 { font-weight:bold; margin:0; padding:0; vertical-align: baseline; outline: none; font-family: 'Helvetica Now Display', sans-serif; }

/* link */
a {color:#1D1D1B ; text-decoration: none;}
a:hover, a:hover img, a:focus img, a:active img, button:hover { opacity: 0.9; color:inherit;}

/* listes */ 
ul, ol { margin: 0; padding: 0; list-style:none; } 

/* paragraphes */ 
p { margin: 0; } 
.semi {font-weight:600;}

/*FORM*/



/******* BOOTSTRAP *******/
.input-group-lg > .input-group-append > select.btn:not([size]):not([multiple]), .input-group-lg > .input-group-append > select.input-group-text:not([size]):not([multiple]), .input-group-lg > .input-group-prepend > select.btn:not([size]):not([multiple]), .input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), .input-group-lg > select.form-control:not([size]):not([multiple]), select.form-control-lg:not([size]):not([multiple]) {
    height:50px;
}
.form-control-lg {height:50px; background:#fff; border:1px solid #ced1d4; font-size:16px; color:#5c6772; border-radius:3px;}
.form-control-lg:focus {background:#fff; border-color:#000; color:#5c6772;}
.form-row {margin-right: -7px; margin-left: -7px;}
.form-row > .col, .form-row > [class*="col-"] { padding-right: 7px; padding-left: 7px;}
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append:not(:last-child) > .btn {border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;}

.form-control:focus {box-shadow:none;}

form .popover { background-color: #8f2b2b; color: #fff; border: 0; font-size:12px; }
form .bs-popover-auto[x-placement^="top"] .arrow::after, form .bs-popover-top .arrow::after { border-top-color: #8f2b2b;}
form .bs-popover-bottom .arrow::before, form .bs-popover-bottom .arrow::after {  border-bottom-color: #8f2b2b;}
form .bs-popover-auto[x-placement^="top"] .arrow::before, form .bs-popover-top .arrow::before, form .bs-popover-bottom .arrow::before { border: 0; }
form .popover-body { color: #fff; text-align: center; padding: .2rem .5rem;}

.form-control::-webkit-input-placeholder { color:#fff; }
.form-control::-moz-placeholder { color:#fff; opacity:1; }
.form-control:-ms-input-placeholder { color:#fff; }
input:-moz-placeholder { color:#fff; opacity:1;}

.input-group, .btn-group {margin-bottom: 1rem;}
.input-group-text-lg {height:50px; border:0; background:#e0e0e0;}
.input-group-text-lg > span[class^="icon-"] {font-size:20px; padding: 0 .2rem;}
.input-group-input {position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 1%; margin-bottom: 0;}
.input-group-input:not(:first-child) > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-input:not(:last-child) .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-middle .input-group-input:not(:last-child) .form-control {text-align: right;}
.btn-secondary.d-inline-flex {line-height: 1;}
/*.input-group-append button {font-size:20px; cursor:pointer;}
.input-group-append button:hover {opacity:1;}*/

.input-group-prepend, .input-group-append {-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none;}

/*INPUT GROUP NB*/
.input-group-number .input-group-prepend .input-group-text, .input-group-number .input-group-append .input-group-text {width:3rem; text-align: center;}

/*RANGE*/
.range-dc {
    /*removes default webkit styles*/
    -webkit-appearance: none; padding:0;
     width: 100%; background: none; outline: none; /*opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; border-radius:20px;*/    
}
.range-dc::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
.range-dc::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #e20917;
    margin-top: -4px;
    cursor: ew-resize;
}
.range-dc:focus {
    outline: none;
}
.range-dc:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

.range-dc::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
.range-dc::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #e20917;
    cursor: ew-resize;
}

/*hide the outline behind the border*/
.range-dc:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

.range-dc::-ms-track {
    width: 100%;
    height: 5px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
}
.range-dc::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
.range-dc::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
.range-dc::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #e20917;
    cursor: ew-resize;
}
.range-dc:focus::-ms-fill-lower {
    background: #888;
}
.range-dc:focus::-ms-fill-upper {
    background: #ccc;
}


/*BOUTON*/
.btn-primary-lg {padding: 1.375rem 1rem; font-size:16px; text-transform: uppercase;}
.btn-primary span {display: block; }

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus, .btn-primary.focus, .btn-primary:focus {box-shadow: none; }

[class*="input-group-"] .btn:focus, [class*="input-group-"] .btn:not(:disabled):not(.disabled):active:focus {box-shadow: none;}

/* COMMUN */
.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb70 { margin-bottom:70px; }
.mb80 { margin-bottom:80px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mx10 { margin-left:10px; margin-top:10px;}
.my10 { margin-top:10px; margin-bottom:10px;}
.my20 { margin-top:20px; margin-bottom:20px;}
.my30 { margin-top:30px; margin-bottom:30px;}
.my40 { margin-top:40px; margin-bottom:40px;}
.my50 { margin-top:50px; margin-bottom:50px;}
.my100 { margin-top:100px; margin-bottom:100px;}

@media screen and (min-width: 575.98px) {
    .mt-sm-20 {margin-top: 20px;}
}

.py20 { padding-top:20px; padding-bottom:20px;}
.py100 { padding-top:100px; padding-bottom:100px;}
.py150 { padding-top:150px; padding-bottom:150px;}
.py60 { padding-top:60px; padding-bottom:60px;}
.py90 { padding-top:90px; padding-bottom:90px;}
.pb90 { padding-bottom:90px;}

.w320 {max-width: 320px;}
.w960 {max-width: 960px;}

.fmed {font-weight: 600;}

.t10 { font-size:10px; }
.t11 { font-size:11px; }
.t12 { font-size:12px; }
.t13 { font-size:13px; }
.t14 { font-size:14px; }
.t16 { font-size:16px; }
.t18 { font-size:18px; }
.t20 { font-size:20px; }
.t22 { font-size:22px; }
.t24 { font-size:24px; }
.t29 { font-size:29px; }
.t30 { font-size:30px; }
.t32 { font-size:32px; }
.t34 { font-size:34px; }
.t40 { font-size:40px; }
.t50 { font-size:50px; }
.t60 { font-size:60px; }

.c_rge { color:#a64148; }
.c_gri { color:#4d4d4f; }
.c_org { color:#FF8200; }
.c_blu { color:#0070C0; }

a.c_rge:visited { color:#e86743; }
a.c_rge:hover { text-decoration:underline; }

.col0 {background-color:#fff;}
.col1 {background-color:#F9F9F9;}
.col2 {background-color:#0070C0;}
.col3 {background-color:#266F8B;}
.col4 {background-color:#3494BA;}
.col5 {background-color:#F2F2F2;}
.col6 {background-color:#F6FBFC;}
.col7 {background-color:#58B6C0;}

/*iOS buttons remove rounded corners*/
input, textarea, select {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

/* ---------------------------- */
/*	    Element Formulaire  	*/
/* ---------------------------- */
/* CUSTOM RADIO */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
.cu-label [type="radio"]:not(:checked), .cu-label [type="radio"]:checked {position: absolute; left: -9999px;}
.cu-label [class*=" col-"] {/*padding:0;*/}
.cu-label label {margin:0; cursor: pointer;}

.cu-group .cu-civ:first-child label {border-top-right-radius: 0; border-bottom-right-radius: 0;}
.cu-group .cu-civ:last-child label {border-left:none; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.cu-civ {width:50%;}
.cu-civ label {display: inline-block; position: relative; width:100%; color: #666; border:1px solid #666; border-radius:3px; height:50px; width:100%; text-align: center; background-color: #fff; font-size:20px; transition: all .2s ease-in-out; padding-top:12px;}
.cu-civ input:checked + label, .cu-civ input + label:hover { color: #e20917!important; }
.cu-civ label i {height:20px; display:block;}

.ie .cu-label label {display: block;}
.ie .cu-label img {pointer-events: none;}

textarea { height:auto; } 
.ast { position:relative; margin-top:10px; font-size:11px; text-align:center; }

/* icon field */
.form-control-icon {position: relative;}
.form-control-icon input, .form-control-icon select {padding-left:50px;}
.form-control-icon > span {position: absolute; top:15px; left:15px; font-size:20px; color:#adb2b8; z-index:2; display: block; text-align: center; pointer-events: none;}
.icon-right {right:0;}
.form-label.form-control-icon input {}
.form-label.form-control-icon > span {bottom:14px; left:15px; top:auto;}
.icon-right.form-control-icon > span  {right:15px; left:auto;}
.form-row .form-control-icon > span {left:25px;}
.icon-right.form-control-icon input, .icon-right.form-control-icon select {padding-left:1rem; padding-right:50px;}
.form-row .icon-right.form-control-icon > span {left:auto; right:25px;}
.form-row .input-group-input.icon-right.form-control-icon > span {left:auto; right:15px;}

/*icon help*/
.form-group.icon-help {margin-right:30px;}
.form-group.icon-help .help {position: absolute; right:-30px; top:15px; cursor:pointer;}
.form-group.icon-help .help a {font-size:20px; color:#ea5330; text-decoration: none;}
.form-group.icon-help .help a:hover {opacity: 0.8;}

.popover.help-popover {background-color: #fbfafa; color: #fff; border: 0; font-size:12px;}
.help-popover.bs-popover-auto[x-placement^="top"] .arrow::after, .help-popover.bs-popover-top .arrow::after { border-top-color: #b51742;}
.help-popover.bs-popover-auto[x-placement^="top"] .arrow::before, .help-popover.bs-popover-top .arrow::before { border: 0; }
.help-popover.popover-body { color: #fff; text-align: center; padding:.2rem .5rem .4rem;}
.popover.help-popover .popover-body {color:#000;}
.help-popover.bs-popover-auto[x-placement^="top"] .arrow::after, .help-popover.bs-popover-top .arrow::after { border-top-color: #fbfafa;}

/* select */
select { -webkit-appearance: none; -moz-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand { display: none; }
.select select {padding-bottom:0;}
.select span {position:absolute; font-size:20px; right: 15px; top: 13px; pointer-events: none; color:#dedede;}
.form-row .select span {right:20px;}

/*cursor*/
.c-pointer {cursor: pointer;}

/*ERROR*/
.field_error [type="text"], .field_error [type="email"], .field_error [type="tel"],
.field_error textarea,
.field_error [type="radio"] + label,
.field_error [type="checkbox"] + label,
.field_error [type="radio"] + label:before,
.field_error [type="checkbox"] + label:before{border: 1px solid #f07484 !important; /*background:#f9f4f4 !important; font-style: italic; color:#8f2b2b !important;*/ }
/* checkboxes and radios with normal aspect(round and square) */
.field_error.custom-radio [type="radio"] + label,
.field_error.custom-checkbox [type="checkbox"] + label{border: 0 !important;}

.field_error .error{font-size: 12px;color: red;padding-top: 5px;}
.field_error .input-group-text {background-color:#f07484; color:#fff;} 

.field_error .form-control::-webkit-input-placeholder { color:#8f2b2b; }
.field_error .form-control::-moz-placeholder { color:#8f2b2b; opacity:1; }
.field_error .form-control:-ms-input-placeholder { color:#8f2b2b; }
.field_error input:-moz-placeholder { color:#8f2b2b; opacity:1;}

.field_error .dropdown-toggle.btn-light {border-color:#ddbfbf; background-color:#f9f4f4;}
.field_error .filter-option-inner-inner {font-style: italic; color:#8f2b2b !important;}
.field_error.custom-checkbox label {/*color:#5c6772!important;*/ background:none!important;}

/*disabled input*/
input[type]:disabled { background: #e0e0e0; cursor: no-drop;}

/*checkbox*/
.custom-checkbox a {text-decoration: underline; color:#fff;}
/* Cachons la case à cocher */
.myCheck [type="checkbox"]:not(:checked),
.myCheck [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
 
/* on prépare le label */
.myCheck [type="checkbox"]:not(:checked) + label,
.myCheck [type="checkbox"]:checked + label, .myCheck [type="checkbox"]:not(:checked) + div + label,
.myCheck [type="checkbox"]:checked + div + label {
  position: relative; 
  padding-left: 30px; 
  cursor: pointer; 
}

/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
.myCheck [type="checkbox"]:not(:checked) + label:before,
.myCheck [type="checkbox"]:checked + label:before, .myCheck [type="checkbox"]:not(:checked) + div + label:before,
.myCheck [type="checkbox"]:checked + div + label:before {
  content: '';
  position: absolute;
  left:0; top: -2px;
  width: 24px; height: 24px;
  border: 2px solid #fff;
  background: transparent;
  border-radius: 8px; 
}
 
/* Aspect général de la coche */
.myCheck [type="checkbox"]:not(:checked) + label:after,
.myCheck [type="checkbox"]:checked + label:after, .myCheck [type="checkbox"]:not(:checked) + div + label:after,
.myCheck [type="checkbox"]:checked + div + label:after {
  content: '';

display: block;
  /*Make it a small rectangle so the border will create an L-shape*/
  width: 7px;
  height: 10px;
  /*Add a white border on the bottom and left, creating that 'L' */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  /*Rotate the L 45 degrees to turn it into a checkmark*/
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
    
    
  position: absolute;
  top: 3px; left: 8px;
  font-size: 16px;
  color: #09ad7e;
  transition: all .2s;
}
/* Aspect si "pas cochée" */
.myCheck [type="checkbox"]:not(:checked) + label:after, .myCheck [type="checkbox"]:not(:checked) + div + label:after {
  opacity: 0; 
    -webkit-transform: rotate(45deg) scale(0);
  transform: rotate(45deg) scale(0); 
}
/* Aspect si "cochée" */
.myCheck [type="checkbox"]:checked + label:after, .myCheck [type="checkbox"]:checked + div + label:after {
  opacity: 1; 
    -webkit-transform: rotate(45deg) scale(1); 
  -moz-transform: rotate(45deg) scale(1);
  -o-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
}
/* aspect désactivée */
.myCheck [type="checkbox"]:disabled:not(:checked) + label:before,
.myCheck [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
/* styles de la coche (si cochée/désactivée) */
.myCheck [type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
/* on style aussi le label quand désactivé */
.myCheck [type="checkbox"]:disabled + label {
  color: #aaa;
}
 
/* aspect au focus de l'élément */
.myCheck [type="checkbox"]:checked:focus + label:before,
.myCheck [type="checkbox"]:not(:checked):focus + label:before {
  /*border: 1px dotted blue;*/
}

/* myRadio */
.myRadio{position: relative;}
.form-check-inline .myRadio + .myRadio{margin-left: 15px;}
.myRadio [type="radio"]{position: absolute;left: -9999px;}
.myRadio [type="radio"] + label{display: inline-block;padding-left: 30px;cursor: pointer;margin-bottom: 0;font-weight: 400;font-size: 16px;}
.myRadio [type="radio"]:not(:checked) + label:before,
.myRadio [type="radio"]:checked + label:before {
    content: '';
    position: absolute;
    left:0;
    top: -1px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%; 
    border: 1px solid #4f4d4b;
}
.myRadio [type="radio"]:checked + label:before{/*border: 0;*/}
.myRadio [type="radio"]:not(:checked) + label:after,
.myRadio [type="radio"]:checked + label:after{
    content: '';
    position: absolute;
    left: 5px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: all .2s;
}
.myRadio [type="radio"]:disabled + label:after{background: #A1A3A4;}
.myRadio [type="radio"]:not(:checked) + label:after {opacity: 0;transform: scale(0);}
.myRadio [type="radio"]:checked + label:after {opacity: 1;transform: scale(1);}