/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
:root {
    --white: #fff;
    --gray-100: #f8f9fb;
    --gray-200: #f2f3f7;
    --gray-300: #edeef3;
    --gray-400: #dee0ea;
    --gray-500: #c5c8da;
    --gray-600: #969cbb;
    --gray-700: #697097;
    --gray-800: #464c6d;
    --gray-900: #343852;
    --black: #343852;
    --primary: #1d71b8;
    --primary-dark: #155891;
    --primary-darker: #0f3f68;
    --brand-2: #d20050;
    --body-color: #697097;
    --body-bg: #f8f9fb;
    --succes-icon-bg: #9ab938;
    --error-icon-bg: #d20024;
    --info-icon-bg: #369aee;
    --warning-icon-bg: #e69215;
    --border-radius: 1.4rem;
    --border-radius-sm: 2.4rem;
    --border-radius-md: 5rem;
    --border-radius-lg: 10rem;
    --input-border-color: var(--gray-500,$gray-500);
}

/**************** DISPLAY NONE ****************/

.register-jumbotron .form-change-lang,
#limesurvey .form-change-lang {
    display: none;
}

#error-card .card-body h2.card-title,
#error-card .card-body hr {
    display: none;
}

#outerframeContainer .form-change-lang {
    display: none;
}

.modal-header {
    display: none;
}


/**************** GLOBAL ****************/
body {
    background-color: var(--gray-100)!important;
    font-family: futura-pt, Arial,sans-serif;
    font-size: 1.125rem;
}

/**************** HEADER NAV ****************/
#survey-nav {
    background-color: var(--white)!important;
    border-bottom: none!important;
}

.logo-container>LOGO_ANS_2020_Principal.png {
  max-height: 120px;
  height: 100%;
  padding: 15px;
  width: auto;
}

#navbar ul li.nav-item {
    border-bottom: 3px solid var(--white);
    padding: 10px 0 10px 0;
    color: white;
}

#navbar ul li.nav-item:hover {
    border-bottom: 3px solid var(--primary);
    padding: 10px 0 10px 0;
}

#navbar ul li a.nav-link {
    font-family: inherit!important;
    font-size: inherit!important;
    font-weight: 700!important;
    color: var(--black)!important;
}

#navbar ul li a.nav-link:hover {
    color: var(--primary)!important;
    text-decoration: none!important;
}

.dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
    margin-top: 1.9rem;
    background-color: #fff;
    border: .1rem solid var(--gray-400, #dee0ea);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: var(--box-shadow);
    min-width: 31rem;
    padding: 1rem 3rem;
    position: absolute;
    top: 100%;
}

.index-item {
    border-bottom: .1rem solid var(--gray-400, #dee0ea);
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.dropdown-item {
    padding-left: 1.8rem;
    position: relative;
    font-weight: 700;
    padding: .6rem 1.6rem !important;
    color: var(--gray-900);
    text-decoration: none!important;
}

.dropdown-item:before {
    background-image: url("../files/chevron.png");
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: .6rem;
    left: 0;
    position: absolute;
    top: 1rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: .6rem;
}

.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item:focus {
    color: var(--primary);
    background-color: transparent!important;
}

/**************** TYPOGRAPHIE ****************/
/* Head */
h1, h2, h3, h4, h5, h6 {
    color: var(--body-color-darker)!important;
    font-weight: 600;
}
h1 {
    font-size: 4.2rem;
}
h2 {
    font-size: 3rem;
}
h3 {
    font-size: 2.4rem;
}
h4 {
    font-size: 2.2rem;
}
h5 {
    font-size: 2rem;
}
h6 {
    font-size: 1.8rem;
}

/* Paragraphe */
p {
    font-size: 1.125rem;
    line-height: 1.688rem;
    color: var(--black);
    padding: 0 !important;
    margin: 0 !important;
}

.text-danger {
    color: var(--error-icon-bg)!important;
}

/**************** BOUTONS ****************/
.btn {
    border-radius: 2.5rem;
    border-top-left-radius: 0;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
    border: .1rem solid var(--primary);
    display: inline-block;
    font-family: futura-pt, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 1.1rem 2.5rem;
    text-align: center;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-secondary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white)!important;
    text-decoration: none;
}

.btn-link {
    background-color: transparent;
    border-color: var(--gray-900);
    color: var(--gray-900);
    outline-color: var(--gray-900);
}

.btn-link:hover {
    background-color: var(--black);
    border-color: var(--black);
    color: var(--white);
}

/* btn-xs */
.ls-language-changer-item {
    border-radius: 0 1.7rem 1.7rem 1.7rem;
    font-size: 0.875rem;
    line-height: 1.3;
    padding: .7rem 2rem;
}

/**************** LIENS ****************/
a {
    color: var(--primary,#1d71b8);
    display: inline-block;
    line-height: normal;
    padding-left: 1.5rem;
    position: relative;
    text-align: left;
    text-decoration: none;
}

a:hover {
    color: var(--primary)!important;
    text-decoration: underline;
}

.completed-wrapper div a:before,
.container a.card-link:before,
.url-wrapper-survey-return a:before {
    background-image: url("../files/chevron.png");
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: .6rem;
    left: 0;
    top: 5px;
    position: absolute;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: .6rem;
}

.completed-wrapper div a:hover, a:focus,
.container a.card-link:hover, 
.container a.card-link:focus {
    text-decoration: underline;
    color: var(--primary,#1d71b8);
}

/**************** FORMULAIRES ****************/
.save-form {
    display: flex;
    flex-direction: column;
}

.col-form-label {
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

.me-2 {
    cursor: pointer;
    height: 1rem;
    color: var(--gray-700);
    width: 1rem;
}

#form-load .save-survey-form label {
    color: var(--body-color-darker);
    font-weight: 600;
    margin: 1rem;
}

.form-control {
    background-clip: padding-box;
    background-color: var(--white)!important;
    border: .1rem solid var(--input-border-color);
    border-radius: 1.4rem;
    color: var(--body-color,#697097)!important;
    display: block;
    font-weight: 400;
    height: calc(1.5em + 2.4rem);
    line-height: 1.5;
    padding: 1.1rem 2rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    width: auto;
}

textarea.form-control {
    width: 100%!important;
    background-clip: padding-box;
    background-color: #fff;
    border: .1rem solid var(--input-border-color);
    border-radius: 1.4rem;
    color: var(--body-color, #697097);
    display: block;
    height: calc(1.5em + 2.4rem);
    line-height: 1.5;
    padding: 1.1rem 2rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
    background-color: var(--white)!important;
    border-color: var(--primary,#1d71b8);
    box-shadow: inherit;
    color: var(--body-color),
}

.captcha-image {
    background-clip: padding-box;
    border: .1rem solid var(--input-border-color);
    border-radius: 1.4rem;
    color: var(--body-color,#697097)!important;
    display: block;
    font-weight: 400;
    height: calc(1.5em + 2.4rem);
    line-height: 1.5;
    padding: 1.1rem 2rem;
}

/**************** QUESTION ****************/
.question-container {
    padding: 4.5rem 3rem 1.5rem;
    background-color: #fff;
    border: .1rem solid var(--gray-400, #dee0ea);
    border-radius: 0 10rem 10rem 10rem;
    position: relative;
}

.question-container:before {
    background-image: url(../files/drops-resize.png);
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    width: 7.5rem;
    height: 7.5rem;
    position: absolute;
    top: 34px;
    left: -21px;
}

.question-title-container, .bg-primary {
    background-color: var(--white)!important;
    color: var(--gray-700)!important;
}

.ls-label-question {
    color: var(--body-color-darker);
    float: left;
    font-family: futura-pt-bold,Arial,sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    margin-left: 1rem;
}

.fa-asterisk {
    color: var(--body-color-darker)!important;
}

.save-survey-form .fa-asterisk {
    float: none!important;
    position: absolute;
    top: auto;
    font-size: x-small;
}

.question-valid-container {
    text-align: left!important;
}

.answer-container, .question-help-container {
    border: none;
}

.answer-container {
    min-height: 12rem;
}

/**************** MESSAGES ****************/
/* Global */
.completed-wrapper,
#error-card,
.return-to-survey,
.save-message,
.register-jumbotron,
.modal-dialog {
    background-color: var(--white)!important;
    border: .1rem solid var(--gray-400, #dee0ea);
    border-radius: var(--border-radius-md);
    border-top-left-radius: 0;
    margin-bottom: 6rem;
    margin-top: 4rem;
    padding: 2.4rem 6.6rem;
    position: relative;
}

.completed-text p:first-child,
#error-card p:first-child,
.return-to-survey p:first-child,
.save-message .card-title,
.register-jumbotron .card-body h4:first-of-type {
    font-weight: 600!important;
    color: var(--black)!important;
}

.save-message .card-title,
.save-message .card-body .h2 {
    font-size: 1.125rem!important;
    font-weight: 600;
    color: var(--black)!important;
}

.register-jumbotron h4 {
    font-size: 1.125rem!important;
}

/* Succes */
.completed-wrapper:before {
    content: url('../files/circle-check-resize.png');
    background-color: var(--succes-icon-bg);
    color: var(--white);
    display: flex;
    align-items: center;
    height: 6.6rem;
    justify-content: center;
    left: -1.3rem;
    position: absolute;
    top: -.6rem;
    width: 6.1rem;
    -webkit-clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
    clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
}

/* Error */
#error-card:before {
    content: url('../files/circle-cross-resize.png');
    background-color: var(--error-icon-bg);
    color: var(--white);
    display: flex;
    align-items: center;
    height: 6.6rem;
    justify-content: center;
    left: -1.3rem;
    position: absolute;
    top: -.6rem;
    width: 6.1rem;
    -webkit-clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
    clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
}

/* Info */
.return-to-survey:before,
.save-message:before {
    content: url('../files/circle-info-resize.png');
    background-color: var(--info-icon-bg);
    color: var(--white);
    display: flex;
    align-items: center;
    height: 6.6rem;
    justify-content: center;
    left: -1.3rem;
    position: absolute;
    top: -.6rem;
    width: 6.1rem;
    -webkit-clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
    clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
}

/* Warning */
.register-jumbotron:before,
.modal-dialog:before {
    content: url('../files/circle-warning-resize.png');
    background-color: var(--warning-icon-bg);
    color: var(--white);
    display: flex;
    align-items: center;
    height: 6.6rem;
    justify-content: center;
    left: -1.3rem;
    position: absolute;
    top: -.6rem;
    width: 6.1rem;
    -webkit-clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
    clip-path: path("M30.376 66h-.002C13.6 66 0 52.36 0 35.532V0c2.375 2.652 7.143 4.91 16.823 5.064h13.553c16.775 0 30.374 13.64 30.374 30.468C60.75 52.36 47.151 66 30.376 66");
}

/**************** AUTRES COMPOSANTS ****************/

/*Modal*/
.modal-content,
.modal-footer {
    border: none!important;
    padding: 0!important;
}

/* Progress Bar */
.progress {
    border-radius: var(--border-radius);
    background-color: var(--border-color);
    display: block;
    height: 1rem;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.progress-bar {    
    border-radius: var(--border-radius);
    background-color: var(--primary);
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

/* Tableaux */
.array-flexible-row {
    padding: 5rem!important;
}