/* -----------------------------------------------------------------------------
   Tooltip
----------------------------------------------------------------------------- */

.tooltip {
    float:left;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
    margin: 0 10px 5px 10px;
    clear:right;
    position: relative;
    top: 5px;
}

.tooltip img {
    float: none;
    margin: 0;
    display: block;
}

.tooltip-content {
    background:#d2dc71;
    color:#7d4460;
    text-align:left;
    padding:4px 8px;
    clear:both;
    font-size:1.1em;
    width:190px;
}

.tooltip-content {width:100%; float: none;}
.tooltip-inline p, #tooltip-content p {color:#7D4460;}

.js .tooltip-content,
.js #tooltip,
.js .tooltip-inline,
.js .tooltip-inline div {
    width:190px; float:none;
}

.tooltip-content, #tooltip, .tooltip-inline, .tooltip-inline div {background:#d2dc71; color:#7d4460; text-align:left; padding:4px 8px; clear:both; font-size:1.1em; width:190px;}
.tooltip-content {width:100%; float:left;}
.tooltip-inline p, #tooltip-content p {color:#7D4460;}

.tooltip-close {border:none; background:none; cursor:pointer; padding:0; margin:0; float:right;}
.tooltip-close img { margin: 0; float: none; }
.tooltip-pointe {
    width:15px;
    height:8px;
    position: absolute;
    bottom:-8px;
    left:9px;
    display: block;
    background:url('../Images/tooltip-pointe.png');
}
#tooltip {
    display: none;
    position:absolute;
    left:-9999px;
}


/* -----------------------------------------------------------------------------
   Formulaire
----------------------------------------------------------------------------- */

.satisfaction-form {
    background : #EEEEEE;
    border-radius: 0.7249em;
    padding: 12px;
    width: 510px;
    margin: 0 auto;
    margin-top: 15px;
}

.satisfaction-form .frame-h2 {
    display: inline;
    margin-right: 15px;
}

.satisfaction-form .frame-h3 {
    font-family: arial, Verdana, sans-serif;
    color: #000000;
    font-size: 1em;
    margin-top: 0px;
}

.satisfaction-form-more {
    display: none;
    margin-top: 20px;
}

#satisfaction-form-valid {
    display: none;
}

.satisfaction-form-row {
    margin-top: 10px;
}

.satisfaction-form-row label,
.satisfaction-form-row .label {
    width:200px;
    text-align:right;
    vertical-align:middle;
    float:left;
    padding-top:2px;
    margin-right: 15px;
    font-size: 0.917em;
}

.satisfaction-form-row img {
    margin: 0;
    float: none;
}

.satisfaction-form-row textarea {
    resize: vertical;
}

.satisfaction-form-row input[type="text"],
.satisfaction-form-row textarea {
    width: 100%;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    background: #FFFFFF;
    border:1px solid #d6d8d8;
    padding:0.2em 0.3em;
    color:#000;
    vertical-align:middle;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 0.917em;
    margin:0;
}

em img {
    vertical-align: middle;
}

em.ko {
    display: block;
    margin-left: 215px;
    margin-top: 2px;
    clear: both;
    color: #c50808;
    font-style: normal;
    font-size: 0.917em;
}


.satisfaction-form-options {
    border: none;
    padding: 0;
    margin: 0;
}

.satisfaction-form-options label {
    float: none;
    display: inline;
    vertical-align: middle;
}

.satisfaction-options-row {
    height: 15px;
}

.satisfaction-form-options-radio {
    margin-left: 10px;
    height: 15px;
}
.satisfaction-form-row-question-radio {
    display: inline-flex;
    height: 15px;
}
.satisfaction-options-row-radio {
    float: left;
    margin-left: 10px;
    height: 15px;
}


.satisfaction-form-options input {
    vertical-align: middle;
}


.btn-wrapper {
    box-sizing: border-box;
    text-align: right;
    padding: 10px 0;
}


.btn-valid,
.btn-valid:link,
.btn-valid:visited {
    text-decoration: none;
    display: inline-block;
    *display: inline; zoom: 1;
    padding: 1px 12px !important;
    width: auto !important;
    border: 1px solid #b7b7b7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

    background: url('../Images/btn-valide.png') no-repeat bottom right #fff;
    text-transform: uppercase !important;
    font-size: 1.091em;
    line-height: 1.3;
    height: 20px;
    text-shadow: #fff 0px 2px 0px;
    color: #5c5c5c;

    -webkit-box-shadow: 0px 1px 2px #bbb;
    -moz-box-shadow: 0px 1px 2px #bbb;
    box-shadow: 0px 1px 2px #bbb;

    overflow: visible;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
}

.btn-valid::-moz-focus-inner { border: 0; padding: 0; }

.btn-valid:hover,
.btn-valid:focus,
.btn-valid:active {
    background-image: url('../Images/btn-valide-active.png');
    text-decoration: none;
}

.btn-valid--prev {
    float: left;
}

.btn-valid--next {
    float: right;
}

.btn-valid--next:after {
    content: '';
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    background: url('../Images/arrow-right.png') no-repeat top left;
    width: 10px;
    height: 14px;
}

.btn-valid--prev:before {
    content: '';
    top: -1px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    background: url('../Images/arrow-left.png') no-repeat top left;
    width: 10px;
    height: 14px;
}


@media only screen and (max-width: 767px) {

    .btn-valid {
        margin-bottom: 10px;
    }

}


/* -----------------------------------------------------------------------------
   Checkox
----------------------------------------------------------------------------- */

/* Label */
.satisfaction-options-row input[type="checkbox"]:not(:checked) + label,
.satisfaction-options-row input[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 18px;
    padding-top: 0;
}

/* Hide standard input */
.satisfaction-options-row input[type="checkbox"]:not(:checked),
.satisfaction-options-row input[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

/* Borders */
.satisfaction-options-row input[type="checkbox"]:not(:checked) + label:before,
.satisfaction-options-row input[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border: 1px solid #B4B4B5;
    background: #fff;
}

/* Focus/Hover */
.satisfaction-options-row input[type="checkbox"]:checked:focus + label:before,
.satisfaction-options-row input[type="checkbox"]:not(:checked):focus + label:before,
.satisfaction-options-row input[type="checkbox"] + label:hover:before {
    background-color: #f3f3f3;
}



/* Check */
.satisfaction-options-row input[type="checkbox"]:not(:checked) + label:after,
.satisfaction-options-row input[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    top: 2px;
    left: 2px;
    font-size: 12px;
    color: #000;
    line-height: 1.2;
    background: #6b932c;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNmI5MzJjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ZTk4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(45deg,  #6b932c 0%, #e9e98f 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#6b932c), color-stop(100%,#e9e98f));
    background: -webkit-linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    background: -o-linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    background: -ms-linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    background: linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b932c', endColorstr='#e9e98f',GradientType=1 );

}

/* Focus/Hover */
.satisfaction-options-row input[type="checkbox"]:checked:focus + label:after,
.satisfaction-options-row input[type="checkbox"]:not(:checked):focus + label:after,
.satisfaction-options-row input[type="checkbox"] + label:hover:after {
    background-color: #555;
}



/* Not checked */
.satisfaction-options-row input[type="checkbox"]:not(:checked) + label:after {
    display: none;
}

/* Checked */
.satisfaction-options-row input[type="checkbox"]:checked + label:after {
    display: block;
}


/* -----------------------------------------------------------------------------
   Radio
----------------------------------------------------------------------------- */

/* Label */
.satisfaction-options-row input[type="radio"]:not(:checked) + label,
.satisfaction-options-row input[type="radio"]:checked + label {
    position: relative;
    padding-left: 18px;
    padding-top: 0;
}

/* Hide standard input */
.satisfaction-options-row input[type="radio"]:not(:checked),
.satisfaction-options-row input[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}

/* Borders */
.satisfaction-options-row input[type="radio"]:not(:checked) + label:before,
.satisfaction-options-row input[type="radio"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border: 1px solid #B4B4B5;
    background: #fff;
    border-radius: 50%;
}

/* Focus/Hover */
.satisfaction-options-row input[type="radio"]:checked:focus + label:before,
.satisfaction-options-row input[type="radio"]:not(:checked):focus + label:before,
.satisfaction-options-row input[type="radio"] + label:hover:before {
    background-color: #f3f3f3;
}



/* Check */
.satisfaction-options-row input[type="radio"]:not(:checked) + label:after,
.satisfaction-options-row input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    top: 3px;
    left: 3px;
    font-size: 12px;
    color: #000;
    line-height: 1.2;
    border-radius: 50%;
    background: #6b932c;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNmI5MzJjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ZTk4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(45deg,  #6b932c 0%, #e9e98f 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#6b932c), color-stop(100%,#e9e98f));
    background: -webkit-linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    background: -o-linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    background: -ms-linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    background: linear-gradient(45deg,  #6b932c 0%,#e9e98f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b932c', endColorstr='#e9e98f',GradientType=1 );

}

/* Focus/Hover */
.satisfaction-options-row input[type="radio"]:checked:focus + label:after,
.satisfaction-options-row input[type="radio"]:not(:checked):focus + label:after,
.satisfaction-options-row input[type="radio"] + label:hover:after {
    background-color: #555;
}



/* Not checked */
.satisfaction-options-row input[type="radio"]:not(:checked) + label:after {
    display: none;
}

/* Checked */
.satisfaction-options-row input[type="radio"]:checked + label:after {
    display: block;
}





/* -----------------------------------------------------------------------------
   Select
----------------------------------------------------------------------------- */

.customSelect {
    /* This is the default class that is used */
    /* Put whatever custom styles you want here */
    border: 1px solid #D6D8D8;
    background:url('../Images/submit_bas.png') repeat-x 0 104%;
    height: 21px;
}

.customSelect.customSelectHover,
.customSelect.customSelectFocus {
    /* Styles for when the select box is hovered */
}

.customSelect.customSelectOpen {
    /* Styles for when the select box is open */
}


.customSelect.customSelectDisabledOption {
    /* Styles for when the selected item is a disabled one */
}

.customSelect.customSelectDisabled {
    /* Styles for when the select box itself is disabled */
}

.customSelectInner {
    /* You can style the inner box too */
    font-size: 0.917em;
    padding: 3px 20px 3px 5px;
    background: url('../Images/select-arrow.png') top right no-repeat;
}




@media only screen and (max-width: 767px) {

    .satisfaction-form-row label,
    .satisfaction-form-row .label {
        width: auto;
        float: none;
        display: block;
        text-align: left;
    }

    em.ko {
        margin-left: 0;
    }

    .satisfaction-form-row input[type="text"],
    .satisfaction-form-row textarea {
        width: 90%;
    }

}


@media only screen and (max-width: 767px) {

    .intro img {
        width: 82px;
        margin-right: 10px;
    }

    .satisfaction-form-row img,
    .tooltip img,
    #tooltip img {
        width: auto;
        margin-right: 0;
    }
}


/* -----------------------------------------------------------------------------
   Slider
----------------------------------------------------------------------------- */

.slider-wrapper {
    position: relative;
    margin: 30px 0;
    padding: 0 15px;
}

.satisfaction-slider {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;
    border-top: 1px solid #afafaf;
    cursor: pointer;
    background: #FFFFFF;
    border-radius: 0;
    border: 0;
    height: 2.9em;
}

.satisfaction-slider .ui-widget-header {
    border-radius: 0;
    background: #c098ac;
}

.satisfaction-slider .ui-slider-handle {
    cursor: pointer;
    border-radius: 0;
    background: #91446b;
    border: 0;
    top: 0;
    width: 1px;
    height: 2.9em;
    margin-left: 0;
}

.satisfaction-slider .ui-slider-handle:hover,
.satisfaction-slider .ui-slider-handle:focus {
    background: #A4577E;
}

.satisfaction-slider .ui-slider-tip {
    visibility: visible;
    opacity: 1;
    display: block;
    top: -26px !important;
    border-radius: 0;
    background: #7d4460;
    color: #fff;
    font-weight: bold;
    border: 0;
    left: 1px;
}

.satisfaction-slider .ui-slider-tip:before {
    display: none;
}

.satisfaction-slider .ui-slider-tip:after {
    border-top-color: #7d4460;
}

.slider-values {
    overflow: hidden;
    margin-bottom: 20px;
}

.slider-values div {
    display: inline-block;
    position: relative;
    padding-top: 20px;
    margin-top: 2px;
}

.slider-values div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 1px;
    background: #9a9a9a;
}

.slider-value--first {
    float: left;
    width: 33.3%;
}

.slider-value--second {
    float: left;
    width: 33.3%;
}

.slider-value--third {
    width: 17%;
}

.slider-value--last {
    float: right;
}

.slider-values .slider-value--last:before {
    left: auto;
    right: 0;
}

.slider-value {
    position: absolute;
    top: 0;
    width: 33%;
    line-height: 10px;
}

.slider-value--first--num {
    left: 0;
}
.slider-value--last--num {
    right: 0;
    width: 1%;
}

/*---------------------
    Google ReCaptcha
----------------------*/
.g-recaptcha {
    margin-top: 10px;
    margin-bottom: 10px;
}
.g-recaptcha-alert {
    display: none;
    color: #FF0000;
    margin-bottom: 10px;
}