/* ==========================================================================
 Fonts
 ========================================================================== */
@font-face {
 font-family: "4Text-ExtraLight";
 src: url("../Fonts/4Text/4Text-ExtraLight.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-ExtraLight.woff") format("woff");
 font-weight: 200;
 font-style: normal;
}

@font-face {
 font-family: "4Text-Light";
 src: url("../Fonts/4Text/4Text-Light.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Light.woff") format("woff");
 font-weight: 300;
 font-style: normal;
}

@font-face {
 font-family: "4Text-Italic";
 src: url("../Fonts/4Text/4Text-Italic.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Italic.woff") format("woff");
 font-weight: 400;
 font-style: italic;
}

@font-face {
 font-family: "4Text-Regular";
 src: url("../Fonts/4Text/4Text-Regular.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Regular.woff") format("woff");
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: "4Text-Medium";
 src: url("../Fonts/4Text/4Text-Medium.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Medium.woff") format("woff");
 font-weight: 500;
 font-style: normal;
}

@font-face {
 font-family: "4Text-MediumItalic";
 src: url("../Fonts/4Text/4Text-MediumItalic.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-MediumItalic.woff") format("woff");
 font-weight: 500;
 font-style: italic;
}

@font-face {
 font-family: "4Text-Bold";
 src: url("../Fonts/4Text/4Text-Bold.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-Bold.woff") format("woff");
 font-weight: 700;
 font-style: normal;
}

@font-face {
 font-family: "4Text-BoldItalic";
 src: url("../Fonts/4Text/4Text-BoldItalic.ttf") format("truetype"),
 url("../Fonts/4Text/4Text-BoldItalic.woff") format("woff");
 font-weight: 700;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-Regular";
 src: url("../Fonts/4Headline/4Headline-Regular.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Regular.woff") format("woff");
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: "4Headline-Italic";
 src: url("../Fonts/4Headline/4Headline-Italic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Italic.woff") format("woff");
 font-weight: 400;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-Medium";
 src: url("../Fonts/4Headline/4Headline-Medium.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Medium.woff") format("woff");
 font-weight: 500;
 font-style: normal;
}

@font-face {
 font-family: "4Headline-MediumItalic";
 src: url("../Fonts/4Headline/4Headline-MediumItalic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-MediumItalic.woff") format("woff");
 font-weight: 500;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-Bold";
 src: url("../Fonts/4Headline/4Headline-Bold.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-Bold.woff") format("woff");
 font-weight: 700;
 font-style: normal;
}

@font-face {
 font-family: "4Headline-BoldItalic";
 src: url("../Fonts/4Headline/4Headline-BoldItalic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-BoldItalic.woff") format("woff");
 font-weight: 700;
 font-style: italic;
}

@font-face {
 font-family: "4Headline-ExtraBoldItalic";
 src: url("../Fonts/4Headline/4Headline-ExtraBoldItalic.ttf") format("truetype"),
 url("../Fonts/4Headline/4Headline-ExtraBoldItalic.woff") format("woff");
 font-weight: 800;
 font-style: italic;
}

/* ==========================================================================
CSS Variables (Font-Related)
========================================================================== */
:root {
 /* Font Families */
 --fnt-light: "4Text-Light";
 --fnt-x-light: "4Text-ExtraLight";
 --fnt-regular: "4Text-Regular";
 --fnt-italic: "4Text-Italic";
 --fnt-medium: "4Text-Medium";
 --fnt-medium-italic: "4Text-MediumItalic";
 --fnt-bold: "4Text-Bold";
 --fnt-bold-italic: "4Text-BoldItalic";
 --fnt-hln-regular: "4Headline-Regular";
 --fnt-hln-italic: "4Headline-Italic";
 --fnt-hln-medium: "4Headline-Medium";
 --fnt-hln-medium-italic: "4Headline-MediumItalic";
 --fnt-hln-bold: "4Headline-Bold";
 --fnt-hln-bold-italic: "4Headline-BoldItalic";
 --fnt-hln-x-bold-italic: "4Headline-ExtraBoldItalic";
}



h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
 margin-bottom: 0.5rem;
 /*line-height: 1.2;*/
}

h1, .h1 {
 font-family: "4Headline-Bold", serif;

 font-size: clamp(36px, 1.5rem + 7vw, 80px);

 line-height: clamp(40px, 1.8rem + 7.5vw, 83px);
 letter-spacing: 0%;

}

h2, .h2 {
 font-family: "4Headline-Bold", sans-serif;
 font-size: clamp(30px, 1.2rem + 3.5vw, 50px);

 line-height: clamp(35px, 1.5rem + 3.5vw, 53px);
 letter-spacing: 0%;

}

h3, .h3 {
 font-family: var( --fnt-bold), sans-serif;
 font-size: clamp(26px, 1.1rem + 1.5vw, 36px);
 leading-trim: NONE;

 line-height: clamp(30px, 1.3rem + 1.5vw, 39px);
 letter-spacing: 0%;
}

h4, .h4 {
 font-family: var(--fnt-bold), sans-serif;
 font-size: clamp(22px, 1rem + 1vw, 30px);
 leading-trim: NONE;

 line-height: clamp(26px, 1.1rem + 1vw, 33px);
 letter-spacing: 0%;
}

h5, .h5 {
 font-family: var(--fnt-hln-regular), sans-serif;
 font-size: clamp(20px, 1.2rem + 2vw, 22px);
 leading-trim: NONE;

 line-height: clamp(32px, 1.4rem + 2vw, 43px);
 letter-spacing: 0%;
}

h6, .h6 {
 font-family: var(--fnt-bold), sans-serif;
 font-size: clamp(16px, 0.8rem + 0.5vw, 20px);
 leading-trim: NONE;

 line-height: clamp(20px, 0.9rem + 0.5vw, 23px);
 letter-spacing: 0%;

}


/* General */

input[type='range'] {
    -webkit-appearance: none;
    cursor: grab;
}

    input[type='range'].form-control {
        background-color: transparent;
        border: none;
    }

    /***** Track Styles *****/
    /***** Chrome, Safari, Opera, and Edge Chromium *****/
    input[type="range"]::-webkit-slider-runnable-track {
        background: #000;
        height: 0.2rem;
    }

    /******** Firefox ********/
    input[type="range"]::-moz-range-track {
        background: #000;
        height: 0.2rem;
    }

    /***** Thumb Styles *****/
    /***** Chrome, Safari, Opera, and Edge Chromium *****/
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -11px; /* Centers thumb on the track */
        background-color: #fec900 !important;
        height: 1.8rem;
        width: 1.8rem;
        border-radius: 50%;
    }

    /***** Thumb Styles *****/
    /***** Firefox *****/
    input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        border: none; /*Removes extra border that FF applies*/
        border-radius: 0; /*Removes default border-radius that FF applies*/
        background-color: #fec900 !important;
        height: 1.8rem;
        width: 1.8rem;
        border-radius: 50%;
    }

span.error {
    text-align: center;
}

#dnn_ctr1693_custom-quiz-renderer_output {
    background-color: #201944;
    padding: 40px 30px;
    margin: 50px auto;
    max-width: 800px;
}

div.container-fluid.quizv2 {
    padding-top: 40px;
    background-color: #db5844;
}

div.question-group-no-clip {
    background-color: #fff;
    padding: 50px 0px 50px 0px;
    min-height: 112px;
}

div.question-group {
    background-color: #fff;
    padding: 50px 0px 0px 0px;
    margin-top: 30px;
}

div.shorter input {
    width: 60%;
    margin: 0 auto;
}

@media only screen and (max-width: 600px) {
    div.shorter input {
        width: 95%;
    }
}

div.question-group img {
    width: 100%;
    min-width: 166px;
    float: left;
}

div.question-group h2 {
    font-family: '4Text-Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
}

div.question-group h4 {
    font-family: '4Text-Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 300;
    line-height: 2rem;
}

@media only screen and (max-width: 600px) {
    div.question-group h4 {
        font-family: '4Text-Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.2rem;
    }
}

/* END General */

/* Buttons */

.btn {
    background-color: #583185;
    color: #fff;
}

button.yellow-tick {
    width: 100px;
    height: 100px;
    background-image: url('/img/quiz/yellow-tick.png');
    background-size: 100px 88px;
    background-repeat: no-repeat;
    background-color: transparent;
}

    button.yellow-tick.smaller {
        width: 80px;
        height: 80px;
        background-size: 67px 60px;
    }

button.yellow-tick-with-label.smaller {
    background-size: 67px 60px;
    height: 65px;
}

button.yellow-tick-with-label {
    width: 100%;
    height: 100px;
    background-image: url('/img/quiz/yellow-tick.png');
    background-size: 100px 88px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-color: transparent;
}

    button.yellow-tick-with-label h3 {
        color: #fff;
        text-align: right;
        padding-right: 100px;
    }

@media only screen and (max-width: 525px) {
    button.yellow-tick-with-label h3 {
        text-align: left;
    }
}

/* END Buttons */


/* Sliders */

.slider-left {
    float: left;
    text-align: center;
}

.slider-mid {
    margin-left: -30px;
}

.slider-right {
    float: right;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .slider-left {
        float: left;
        text-align: center;
        font-size: 0.8em;
    }

    .slider-mid {
        margin-left: -30px;
        font-size: 0.8em;
    }

    .slider-right {
        float: right;
        text-align: center;
        font-size: 0.8em;
    }
}

    /* END Sliders */



    /* Ranking question styles */
    .quiz-step-option-ranking-item {
        margin: 15px;
        background-color: #fff;
        touch-action: none !important;
        position: relative;
        overflow: hidden;
        outline-width: 0;
        outline-style: solid;
        outline-color: rgb(88,49,133);
    }

        .quiz-step-option-ranking-item div.label {
            padding: 15px 10px 10px 10px;
        }

            .quiz-step-option-ranking-item div.label h4 {
                font-family: '4Text-Medium', 'Arial Narrow', Arial, sans-serif;
                color: #000;
            }


    .quiz-step-option-ranking-container:hover {
        touch-action: none !important;
    }

    .quiz-step-option-ranking-item h4 {
        color: #fff;
    }

    .quiz-step-option-ranking-item div.ordinal {
        color: #fff;
        float: left;
        clear: none;
        display: block;
        position: absolute;
        background-color: rgb(32,25,68);
        min-width: 33px;
        width: 7%;
        padding: 10px;
        text-align: center;
        visibility: hidden;
    }

        .quiz-step-option-ranking-item div.ordinal h4 {
        }

    .quiz-step-option-ranking-item:hover {
        cursor: grab;
        background-color: var(--yellow);
    }

    .quiz-step-option-ranking-item:active {
        cursor: grabbing;
        background-color: var(--yellow);
    }

    /* END Ranking question styles */


    /*  Dragula CSS */
    .gu-mirror {
        position: fixed !important;
        margin: 0 !important;
        z-index: 9999 !important;
        opacity: 0.8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
    }

    .gu-hide {
        display: none !important;
    }

    .gu-unselectable {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }

    .gu-transit {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
        filter: alpha(opacity=20);
    }
    /*  END Dragula CSS */

    /* Panel styles checkboxes */

    .quiz-step-option-multi-container {
        /*display: inline-block;*/
        position: relative;
        width: 95%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        /* CSS amends JH/JG 23/08/22*/
        justify-content: center;
        display: flex;
        flex-wrap: wrap !important;
    }

    input.checkbox-panel {
        display: none;
    }

        input.checkbox-panel + label {
            cursor: pointer;
        }

            /*    input.checkbox-panel:checked + label {
        background-color: rgb(219,88,68);
    }
*/
            input.checkbox-panel + label h4 {
                color: #fff !important;
            }


    .bucket1 .extendedinfo {
        display: none;
    }

    label.checkbox-panel {
        display: inline-block;
        background-color: rgb(32,25,68);
        background-image: url('/portals/_default/skins/c4/images/4schools-panel-swipe.png');
        background-repeat: no-repeat;
        background-position-x: 100px;
        width: 200px;
        height: 147px;
        text-align: center;
        clear: none;
        margin: 40px 20px;
        padding-top: 30px;
    }


    .progress {
        background-color: #db5844;
        margin-bottom: 40px;
        border-radius: 60px;
        padding: 3px;
    }

    .progress-bar {
        background-color: var(--yellow);
        border-radius: 60px;
        height: 100%;
    }

    .progress-label {
        visibility: hidden;
    }



    svg.progress-icon {
        fill: #fff;
        stroke: #fff;
        position: relative;
        float: right;
        margin: 5px 10px 0 0;
    }

    button.quiz-page-submit {
    }


    /* Icon SVGs --------------------------------------------------------------------------------*/


    .quiz-step-option-multi-container svg {
        width: 40px;
        padding-bottom: 10px;
    }

    .quiz-step-option-multi-container label:hover svg {
        transform: rotate(360deg);
        transition: all 0.8s ease-in-out 0s;
        transform-origin: center;
    }

    .quiz-step-option-multi-container svg path {
        fill: #fff;
    }

    .subjectSummary svg {
        width: 160px;
        padding: 35px;
    }

    .subjectSummary div {
        display: inline-block;
    }

    /* END ICON SVGs --------------------------------------------------------------------------------*/

    div.celeb {
        height: 300px;
        line-height: 300px;
        text-align: center;
    }

        div.celeb span {
            display: inline-block;
            vertical-align: middle;
        }

    @media only screen and (max-width: 600px) {
        div.celeb {
            height: 160px;
            line-height: 300px;
            text-align: center;
        }

            div.celeb span {
                display: inline-block;
                vertical-align: unset;
            }
    }




    div.celeb-image {
        align-items: center;
        text-align: center;
    }


        div.celeb-image img {
            width: 201px;
            height: 300px;
            margin: 0 auto;
        }

        .school-select-urn {
            display: none;
        }

.c4-year-picker {
    max-width: 200px;
    margin: 0 auto;
}


    /* END IMAGES --------------------------------------------------------------------------------------- */


    /* Bucket Matches --------------------------------------------------------------------------------*/

    div.persona-icon {
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
    }

    div.question-group .persona-icon img {
        min-width: 80px;
        width: 80px;
    }

    .white-box {
        background-color: #fff;
        padding-top: 20px;
    }

    /* END Bucket Matches --------------------------------------------------------------------------------*/


/*  4Schools V3 Styling */



.quiz-4s-v3 .question-header {
    color: #fff;
    background-color: #1b2a96;
    padding: 30px 45px;
}

.quiz-4s-v3 .quiz-4s-blue {
    color: #fff;
    background-color: #1f2041;
    
}

    .quiz-4s-v3 .quiz-4s-blue.darker {
        background-color: #15162a;
    }

    .quiz-4s-v3 .white-box.persona {
        background-color: transparent;
        color: #fff !important;
        text-align: left;
    }

.quiz-4s-v3 .white-box.persona h2 {
    color: #fff !important;
    text-align: left;
}

.quiz-4s-v3-next {
    background-color: transparent;
    color: #ffe589;
}

    .quiz-4s-v3-next:hover {
        color: #72dde8;
    }

.quiz-4s-v3 .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 3rem;
}

@media only screen and (max-width: 600px) {
    .quiz-4s-v3 .intro-grid {
        grid-template-columns: 1fr;
        grid-gap: 3rem;
    }

}

    .quiz-4s-v3 .intro-grid h3 {
        color: #1b2a96;
    }

.quiz-4s-v3 .intro-grid .bl p {
    padding-left: 30px;
    font-size: 1.6rem;
}

.quiz-4s-v3 input[name='bf939ddf-daeb-4491-a3e7-86ae80bb0881'] {
    display: none;
}

.quiz-4s-v3 .intro-grid.lowered {
    margin-top: 5rem;
}


.quiz-4s-v3 label[for='36fef642-a591-43e9-8239-0e8e785cc436'] {
    
}

.quiz-4s-v3 #btnSelectSchool {
    margin: 0 0;
    text-align: left;
}

    .quiz-4s-v3 .c4-year-picker {
        max-width: 200px;
        margin: 0 0;
    }

    .quiz-4s-v3-footer {
        display: flex;
        justify-content: space-between;
        background-color: #15162a;
        align-items: center;
        margin-top: 10px;
    }

    .quiz-4s-v3-footer-progress {
        width: 75%;
        height: 35px;
        padding-left: 30px;
        align-content: center;
    }

        .quiz-4s-v3-footer-progress div.progress {
            margin: 0;
        }

    .quiz-4s-v3 .quiz-4s-grid {
        display: grid;
        grid-template-columns: 1fr 3fr;
        justify-items: center;
        align-items: center;
        padding-right: 40px;
        /* Moving these two here from .quiz-4s-blue above */
        height: 350px;
        margin-top: 8px;
    }

    /* Ranking styles */
    .quiz-step-option-ranking-container {
        background-color: #1a1a33;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: 10px;
        display: grid;
        justify-items: center;
    }

    .quiz-step-option-ranking-item {
        width: 85%;
        background-color: #353773;
    }

        .quiz-step-option-ranking-item:active, .quiz-step-option-ranking-item:hover {
            background-color: #72dde8;
        }

        .quiz-step-option-ranking-item div.label h4 {
            color: #fff;
            font-size: 1.2rem;
            font-weight: 200;
        }

    /* Progress bar */
    .quiz-4s-v3 .progress {
        background-color: #353773;
        margin-bottom: 40px;
        border-radius: 60px;
        padding: 3px;
    }

    .quiz-4s-v3 .progress-bar {
        background-color: #72dde8;
        border-radius: 60px;
        height: 100%;
    }

    /* Slider V3 styles */

    .flex-slider {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

        .flex-slider input[type='range'].form-control {
            width: 68%;
        }

    .slider-left-v3 {
        display: inline-block;
        line-height: 1rem;
        font-size: 0.9rem;
    }

    .slider-right-v3 {
        display: inline-block;
        line-height: 1rem;
        font-size: 0.9rem;
    }

    /***** Track Styles *****/
    /***** Chrome, Safari, Opera, and Edge Chromium *****/
    .quiz-4s-v3 input[type="range"]::-webkit-slider-runnable-track {
        background: #89ffa0;
        height: 0.4rem;
    }

    /******** Firefox ********/
    .quiz-4s-v3 input[type="range"]::-moz-range-track {
        background: #89ffa0;
        height: 0.4rem;
    }

    /***** Thumb Styles *****/
    /***** Chrome, Safari, Opera, and Edge Chromium *****/
    .quiz-4s-v3 input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -7px; /* Centers thumb on the track */
        background-color: #fff !important;
        height: 1.2rem;
        width: 1.8rem;
        border-radius: 1rem;
    }

    /***** Thumb Styles *****/
    /***** Firefox *****/
    .quiz-4s-v3 input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        border: none; /*Removes extra border that FF applies*/
        border-radius: 0; /*Removes default border-radius that FF applies*/
        background-color: #fff !important;
        height: 1.2rem;
        width: 1.8rem;
        border-radius: 30%;
    }

    @media only screen and (max-width: 600px) {
        h3 {
            font-size: 1.4em;
        }

        h4 {
            font-size: 1em;
        }

        .quiz-4s-v3 .quiz-4s-grid {
            display: grid;
            grid-template-columns: 1fr;
            height: 265px;
            padding-left: 20px;
            padding-right: 20px;
        }

            .quiz-4s-v3 .quiz-4s-grid .celeb-image {
                display: none;
            }

        .flex-slider {
            margin-top: 5px;
        }
    }