/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#form-quiz {
    max-width: 1860px;
    margin: 0 auto;
    position: relative;
}

#form-quiz .header {
    text-align: center;
    margin: 20px auto;
}

#form-quiz .col-l{
    margin-bottom:80px;
}

#form-quiz div.baseline p{
    color:#FFF !important;
    font-size:20px;
}

#form-quiz .content, #form-quiz .contentform {
    background: #0a1128;
    padding: 80px;
    border-radius: 10px;
    width: 80%;
    margin: 5% auto;
}

#form-quiz #content_form {
    padding: 40px 80px !important;
}

#form-quiz .hidden {
    display: none;
    height: 0 !important;
}

#form-quiz .show {
    display: block;
}

#form-quiz .empty-span {
    width: 105px;
    float: left;
    height: 1px;
}

#form-quiz .center-div {
    height: 100%;
}

#form-quiz .center-div div {

}

#form-quiz .center-div2 div {
    margin: 0 auto;
}

#form-quiz .center-div2 div h1,
#form-quiz .center-div2 div p {
    text-align: center;
}

#form-quiz h1 {
    font-size: 3.5em;
    padding: 0;
    color: var(--awb-color3);
    text-transform:uppercase;
    text-align:center;
    letter-spacing: 6px;
}

#form-quiz .final-h1 {
    margin-bottom: 40px;
}

#form-quiz h2 {
    font-size: 50px !important;
    line-height: 1.4em !important;
    color: #FF0066;
}

#form-quiz h2.final-title {
    margin-bottom: 20px;
    text-align: center;
    color:var(--awb-color3);
}

#form-quiz .center-div label,
#form-quiz .center-div p{
    font-size: 20px;
    display: inline-grid;
    width: 99%;
    margin-bottom: 10px;
    color: #FFF;
}

#form-quiz .center-div p.quiz-category {
    line-height: 25px !important;
    padding: 0;
    font-size: 2em;
    margin-bottom: 40px;
    color:var(--awb-color3);
    text-transform:uppercase;
    border-bottom:1px solid var(--awb-color3);
    padding-bottom:20px;
}

#form-quiz .center-div label.simple {
    width: 90%;
    font-weight: normal !important;
    color: #FFF;
}

#form-quiz #content_begin .col-r{
    text-align:justify;
    font-size:20px;
    line-height: 36px;
}

#form-quiz .nomargin {
    margin-left: 0 !important;
}

#form-quiz .last-column {

}

/* button */
#form-quiz span.begin,
#form-quiz span.submit,
#form-quiz .submit-news,
#form-quiz .submit-news2 {
    border: 1px solid #FF0066;
    background: #FF0066;
    color: #FFF;
    padding: 10px 20px;
    display: block;
    width: fit-content;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
#form-quiz .submit-news {
    float: left;
    margin-right: 20%;
    margin-top: 40px;
}
#form-quiz .submit-news2{
    float: left;
    margin-top: 20px;
}

#form-quiz span.begin {
    margin: 80px auto 40px auto;
}

#form-quiz span.begin:hover,
#form-quiz span.submit:hover,
#form-quiz .submit-news:hover,
#form-quiz .submit-news2:hover{
    border: 1px solid #FFF;
}

#form-quiz .submit-news {
    margin-top: 20px;
    margin-bottom: 20px;
}

#form-quiz #notification {
    color: #fff;
    font-size:20px;
    margin-bottom:30px;
}

#form-quiz #loader {
    margin-right: 20px;
}

/** Styling radio */
/* The container */
#form-quiz .container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
#form-quiz .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
#form-quiz .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
#form-quiz .container:hover input ~ .checkmark {
    background-color: #FF0066;
}

/* When the radio button is checked, add a blue background */
#form-quiz .container input:checked ~ .checkmark {
    background-color: #FF0066;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
#form-quiz .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
#form-quiz .container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
#form-quiz .container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/** navigation */
#form-quiz .navigation{
    margin-top:80px;
}

#form-quiz .navigation a {
    display: block;
    float: left;
    border-radius: 10px;
    padding: 10px 20px;
    color: #FFF;
    background: #FF0066;
    border: 1px solid #FF0066;
}

#form-quiz .navigation a:hover {
    border: 1px solid #FFF;
}

#form-quiz .navigation a.pre {
    margin-right: 30px;
}

#form-quiz .identification-col-left,
#form-quiz .identification-col-right {
    width:45%;
    float:left;
}
#form-quiz .identification-col-left {
    margin-right:2%;
}

#form-quiz input[type="text"].identification,
#form-quiz input[type="email"].identification,
#form-quiz select.identification {
    border-radius: 10px;
    padding: 2px 10px;
    height: 50px;
    font-size: 15px;
    color: #0A1128;
    margin-bottom: 20px;
    width:100%;
}

#form-quiz label.labelform {
    color:#FFF;
    padding-left:0;
    display:block;
    margin-bottom:10px;
    font-size:20px;
}

#form-quiz .two-column {
    width: 50%;
    float: left;
}

/* score */
@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }
    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

#form-quiz div[role="progressbar"] {
    --size: 12rem;
    --fg: #FF0066;
    --bg: #FFF;
    --pgPercentage: var(--value);
    --textuel: var(--value2);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, var(--awb-color3) 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    font-weight: bold;
    color: var(--fg);
}

#form-quiz div[role="progressbar"]::before {
    counter-reset: score var(--number1) score1 var(--number2);
    content: counter(score) "." counter(score1);
}

/* Classes to give different colors to ratings, based on their score */
#form-quiz .rating.good {
    background: #0A1128;
    color: #FF0066;
}

/* end score */

#form-quiz .notation {
    text-align: center;
    margin-top: 20px!important;
    font-size:25px;
    font-weight: bold;
    color: #FF0066;
}

#form-quiz #newsletter-quiz {
    padding: 40px 0;
}

#form-quiz .scrollbar::after{
}

/** DESKTOP DESIGN */
@media screen and (min-width: 641px) {
    #form-quiz .content::after {
        content: "";
        position: absolute;
        right: 220px;
        bottom: 32px;
        height: 38px;
        width: 161px;
        background: url(/wp-content/uploads/2021/01/Artefact_logo_white150-1.png) no-repeat;
    }
}

/** MOBILE DESIGN */
@media screen and (max-width: 640px) {
    #form-quiz .col-l{
        margin-bottom:40px;
    }

    #form-quiz .final-h1 {
        margin-bottom: 40px;
    }

    #form-quiz .logo-quiz {
        text-align: center;
    }

    #form-quiz .content, #form-quiz .contentform {
        width: 95%;
        padding: 40px 16px;
        margin: 5% auto;
    }

    #form-quiz #content_begin {
        text-align: justify;
    }

    #form-quiz .center-div label {
        margin-bottom: 10px;
    }

    #form-quiz .navigation{
        margin-top:40px;
        padding-bottom: 40px;
    }

    #form-quiz .navigation a.pre {
        margin-right: 40%;
    }

    #form-quiz #content_form {
        padding: 10px !important
    }

    #form-quiz .identification-col-left,
    #form-quiz .identification-col-right {
        width:99%;
    }
    #form-quiz .identification-col-left {
        margin-right:0;
    }

    #form-quiz .center-div label.simple {
        width: 90% !important;
        margin-bottom: 10px;
    }

    #form-quiz .two-column {
        width: 100% !important;
        float: left;
    }

    #form-quiz span.submit {
        margin: 20px auto;
    }

    #form-quiz .last-column {
        padding-top: 0;
        margin-bottom:80px;
    }

    #form-quiz .empty-span {
        width: 228px;
    }

    #form-quiz .navigation a.pre {
        margin-left: 21px;
    }

    #form-quiz .quiz-justify {
        text-align: justify;
    }

    #form-quiz #newsletter-quiz {
        padding: 0;
        padding-bottom:40px;
    }
    #form-quiz .submit-news,
    #form-quiz .submit-news2 {
        width: 250px;
    }
    #form-quiz .submit-news2 {
        margin-left: 20%;
    }

    #form-quiz #content_final::after {
        content: "";
        position: absolute;
        right: calc(66% - 161px);
        bottom: 40px;
        height: 38px;
        width: 161px;
        background: url(/wp-content/uploads/2021/01/Artefact_logo_white150-1.png) no-repeat;
    }
}