@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

*{ outline:none !important; box-sizing:border-box;}
body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; font-weight: normal;}
img{ border:none; display:block}
body{ font-family: 'Raleway', sans-serif; font-weight: normal; font-size: 16px; line-height: 30px; background-color: #F5FAFD; color: #003250;}
h1, h2, h3 { font-family: 'Lato', sans-serif; color: #003250; }
h1 { padding: 10px 0;; line-height: 40px;}
.text-primary { color: #003250;}
p { line-height: 1.5;}
a {color: #0090c8; display: inline-block;}
a:hover {color: #0090c8;}
:root {
    --blue: #16364F;
    --blueL: #82ebff;
    --red: #f64668;
    --light-grey: #f9f9f9;
    --success : rgb(45 245 73 / 90%);
    --gray-border : #ebebeb;
    --grey: #b7b7b7;
    --shadow : 0 30px 50px 0 rgba(0,0,0,0.07);
    --ease350 : all ease-in-out 350ms
}
/*.app { overflow: hidden;}*/
hr { margin: 20px 0; border-color: rgb(22 54 79 / .2); }
.sm-wrapper { max-width: 920px; margin: 0 auto; padding: 0 60px}
.text-center {text-align: center;}
.d-block { display: block;}
.d-flex {display: flex;}
.justify-space-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.cst-button { background: var(--blue); display: inline-block; text-decoration: none; padding: 10px 20px; min-width: 180px; border-radius: 5px; color: white; }
.cst-button.success { background: var(--success);}
.cst-button.disabled { cursor: none ;background-color: var(--grey);}
.cst-button.disabled:hover {background-color: var(--grey);}

.form { padding: 30px 10px;text-align: left;}
.form.sm-wrapper { max-width: 500px;}
.cst-form p { margin-bottom: 10px; color: rgba(61, 117, 160, 0.8); }
.cst-form input:not([type="submit"]),
.cst-form input:not([type="radio"]),
.cst-form input:not([type="checkbox"]) { border: 1px solid #efefef; border-radius: 5px; display: block; height: 50px; margin: 0 0 30px; padding: 0 22px; width: 100%; font-size: 16px; font-family: 'Raleway', sans-serif; }
.cst-form input:focus { border-color: var(--blueL); box-shadow: 0 0 2px 1px var(--blueL);}
.cst-form label {font-weight: 600;margin-bottom: 5px;display: block;}

#app-container { display: flex; align-items: center; justify-content: center; padding: 40px; min-height: calc(100vh - 60px); flex-direction: column;}

#app-container > form { width: 100% }
#app-header .topbar { padding: 10px 40px; background: white; box-shadow: var(--shadow); position: relative;z-index: 50;}
#app-header .topbar .logo { display: block;}
#app-header .topbar .logo img { display: block; width: 100px;}
#app-header .topbar .d-flex {align-items: center;justify-content: space-between;}
/* Grid */
.cst-grid { display: flex; flex-wrap: wrap; width: 100%;}
.cst-grid [class^="col-"] { padding: 10px}
.col-50 { flex: 0 0 50%; min-width: 50%;}
.col-30 { flex: 0 0 33.33%; min-width: 33.33%;}
.col-25 { flex: 0 0 25%; min-width: 25%;}

.backButton{position: absolute;left: 0;}
.backbutton { font-weight: 600; text-decoration: none; color: var(--blue);}
.backbutton span { display: inline-block; vertical-align: middle; margin-right: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--blue) url(../img/chevron-down.svg) no-repeat center; background-size: 15px;transform: rotate(90deg);}

.enquete { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-height: calc(100vh - 140px); width: 100%; -ms-flex-pack: justify; justify-content: space-between; margin: 0; position: relative;align-items: center; text-align: center; }

.enquete-contents { width: 100%; flex: 2; display: flex; flex-direction: column; align-items: center; max-width: 720px;}
.enquete-contents .textes { margin-top: 10px; display: block; width: 100%; }
.enquete-contents .textes p { color: rgba(61, 117, 160, 0.8); }

/* Widget style */
#widget-list {padding: 0 0 20px;width: 100%;/*max-width: 720px;*/margin-top: 20px;}
.widget-item { position: relative; min-height: 180px; background: white; border-radius: 8px; border: 1px solid white; padding: 25px; width: 100%; cursor: pointer;}
.widget-item.type-prix { text-align: left;}
.widget-item.type-prix .widget-name { font-size: 18px; color: rgba(61, 117, 160, 0.8); font-size: 16px;}
.widget-item.type-prix .widget-name strong { font-weight: 800; font-size: 24px; color: var(--blue);}
.widget-item.not-selected  { background: transparent; border-color: transparent;}

.widget-item.not-selected .widget-icon svg,
.widget-item.not-selected .widget-icon img {filter: grayscale(1);}

.widget-item.selected .widget-icon img,
.widget-item.selected .widget-icon svg { filter: grayscale(0);}

.widget-item.selected { box-shadow: var(--shadow); transform: translateY(-10px);}

.widget-icon { padding-top: 45px; }
.widget-icon svg,
.widget-icon img { height: 80px; width: auto;}
.widget-icon.sm-icons svg,
.widget-icon.sm-icons img { height: 40px;}
.widget-name { display: block; padding: 15px 0 0; font-size: 14px;}

#widget-list.offres .widget-icon svg, #widget-list.offres .widget-icon img {height: 60px;}
#widget-list.offres .widget-name { font-weight: 600;}

.active_sidebar #app-container {  padding-left: 340px; }
.active_sidebar .sidebar-navigation { transform: translateX(0); }

@media (min-width: 1025px) {
    a,
    .widget-item,
    .cst-button,
    .widget-icon.sm-icons svg,
    .widget-icon.sm-icons img,
    .backbutton span,
    #app-container,
    .sidebar-navigation,
    .cst-number-input .less, .cst-number-input .more { transition: var(--ease350); -webkit-transition: var(--ease350); -ms-transition: var(--ease350); -moz-transition: var(--ease350); }

    .widget-item:hover { border-color: var(--blueL); box-shadow: var(--shadow); }
    .widget-item:hover .widget-icon img,
    .widget-item:hover .widget-icon svg { filter: grayscale(0);}

    .cst-button:hover { background-color: var(--blueL); color: white; box-shadow: var(--shadow);}

    .backbutton:hover { color: var(--blueL);}
    .backbutton:hover span { background-color: var(--blueL);}

    .cst-number-input .less:hover , .cst-number-input .more:hover { background-color: var(--blue)}

}

/* Checked tile */
.tile-radio { border: 1px solid #f0f0f0; border-radius: 50%; line-height: 26px; height: 26px; width: 26px; position: absolute; }
.icon-checked { display: inline-block; transform: rotate(45deg); height: 26px; width: 26px; text-align: center; transition: transform .3s ease-out; }
.icon-checked .in,
.icon-checked .out { display: inline-block; height: 3px; background: rgb(18, 151, 69); float: left; border-radius: 2px; }
.tile-radio .icon-checked .out { position: relative; width: 7px; top: 15px; left: 8px; }
.icon-checked .in { transform: rotate(90deg); position: relative; width: 13px; right: -1px; bottom: 5px; }

/* Checked style */
.tile-radio.checked { border: 0; background-color:rgb(45 245 73 / 50%); }
.tile-radio.checked .icon-checked { opacity: 1;}
.tile-radio .icon-checked { opacity: 0; transition: opacity .3s ease-in; }

/* Progressbar */
.progress-area { width: 100%; padding: 20px 0; max-width: 620px;}
.progressbar { background-color: #fff; display: -ms-flexbox; display: flex; height: 4px; border-radius: 4px; max-width: 800px; width: 100%; margin: 0 auto;}
.progress-line-completed { border-radius: 4px; }
.progressbar .primary { background: linear-gradient(82deg,#0090c8 27%,#82ebff 83%); }

.app-footer-actions { display: block; position: static;right: 25px; bottom: 25px; padding-top: 25px}

.notice {font-size: 14px;text-align: left;padding: 40px;background: #eaf9ff; max-width: 480px;border-radius: 5px;}

.sidebar-navigation {border-radius: 5px;background: #fff;box-shadow: 16px 16px 32px #e9eef0, -16px -16px 32px #ffffff;max-width: 300px;height: 100px;padding: 40px; position: fixed; left: 0; top:0; height: 100%; padding-top: 134px; transform: translateX(-300px);}
.sidebar-navigation li {position: relative;margin: 0;padding-bottom: 15px;padding-left: 30px;list-style: none;}
.sidebar-navigation li a { color: #003250; text-decoration: none}
.sidebar-navigation li.current a {font-weight: 600; }
.sidebar-navigation li:before {content: '';background-color: var(--blue);position: absolute;bottom: 0px;top: 31px;left: 7px;width: 1px;}
.sidebar-navigation li:last-of-type:before { display: none}
.sidebar-navigation li:after {content: '';position: absolute;left: 0;top: 10px;height: 12px;width: 12px;border-radius: 50%;border: 1px solid var(--blue);background: white; }
.sidebar-navigation li.current:after { background: var(--blueL); border-color: var(--blueL) }

.sectionBloc { width: 100%; opacity: 0; display: none; visibility: hidden; transition: var(--ease350); -webkit-transition: var(--ease350); -ms-transition: var(--ease350); -moz-transition: var(--ease350);}
.sectionBloc.active { opacity: 1; visibility: visible; display: block}

.menu_mobile { width:50px; height:50px; display:inline-block; vertical-align:middle; cursor:pointer; position:relative; z-index:90; margin-right:-10px; transition: all 400ms ease-in-out;}
.menu_mobile div { width:30px; height:2px; background: var(--blue); position:absolute; right:50%; top:50%; margin:-1px -15px 0 0;}
.menu_mobile div:before { width:100%; height:2px; background: var(--blue); position:absolute; right:0; top:8px; content:"";}
.menu_mobile div:after { width:100%; height:2px; background: var(--blue); position:absolute; right:0; top:-8px; content:"";}
.menu_mobile.active div { height:0;}
.menu_mobile.active div:before { top:0; transform:rotate(45deg);}
.menu_mobile.active div:after { top:0; transform:rotate(-45deg);}

.cst-number-input { position: relative; padding: 0 60px; }
.cst-number-input .less, .cst-number-input .more {position: absolute;width: 50px;height: 50px;background: var(--blueL) url(../img/chevron-down.svg) no-repeat center;border-radius: 5px;top: 0;background-size: 20px; cursor: pointer}
.cst-number-input .more { right: 0; transform: rotate(-90deg);}
.cst-number-input .less { left: 0; transform: rotate(90deg); }

.civility label { margin: 0 15px; }

.chill-success { max-width: 250px; margin: -5% auto 0;}

/* Responsive */
@media (max-width: 1024px) {
    .app-footer-actions { position: static; margin-top: 30px;}
    .widget-icon {padding-top: 20px;}
    .backButton {text-align: left;margin-bottom: 20px;position: static;align-self: baseline;margin-left: 10px;}

    .active_sidebar .sidebar-navigation { transform: translateX(-300px); }
    .active_sidebar #app-container { padding-left: 40px; transform: translateX(300px); }
}
@media (max-width: 768px) {
    .col-25 { flex: 0 0 50%; width: 50% }
}
@media (max-width: 640px) {
    .enquete { display: block;}  
    #app-header .topbar { padding: 10px 25px;}  
}
@media (max-width: 500px) {
    #app-container { padding: 20px;}
    .cst-grid { display: block }
    .cst-grid [class^="col-"] { width: 100%; margin: 0 0 20px;}
    .cst-grid [class^="col-"]:last-of-type { margin-bottom: 0 }
    .widget-item { min-height: inherit;}
}

button:disabled {
    cursor: none;
    background-color: var(--grey) !important;
    color: white !important;
}

div#loaderSubmit {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 15px;
}

div#loaderSubmit img {
    width: 25px;
}

.d-none{
    display: none !important;
}