@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.sidebar-shadow-right {
    background: #FFFFFF;
    box-shadow: 8px 4px 32px rgba(32,45,74,0.24), 8px 0px 16px rgba(32,45,74,0.24);
}

.bright-button-shadow {
    background: #FFFFFF;
    box-shadow: 4px 4px 8px rgba(0,22,255,0.12), -4px -4px 8px rgba(0,22,255,0.12);
}

.shorter-drop {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(32,45,74,0.2);
}

.medium-drop {
    background: #FFFFFF;
    box-shadow: 0px 4px 16px rgba(32,45,74,0.2);
}

.higher-drop {
    background: #FFFFFF;
    box-shadow: 0px 8px 32px rgba(32,45,74,0.2);
}

.negative-shorter-drop {
    background: #FFFFFF;
    box-shadow: 0px -2px 8px rgba(32,45,74,0.2);
}

.negative-medium-drop {
    background: #FFFFFF;
    box-shadow: 0px -4px 16px rgba(32,45,74,0.2);
}

.negative-higher-drop {
    background: #FFFFFF;
    box-shadow: 0px -8px 32px rgba(32,45,74,0.24);
}

.tabular_data_divider {
    box-shadow: inset 0px -1px 0px #E9E9E9;
}

.neumorphism {
    background: #FFFFFF;
    box-shadow: -15px -15px 20px rgba(255,255,255,0.48), -20px -20px 40px rgba(255,255,255,0.24), 15px 15px 30px rgba(32,45,74,0.12), 20px 20px 40px rgba(32,45,74,0.18);
}

@font-face {
    font-family: 'Graphik Web';
    font-stretch: normal;
    font-style: normal;
    font-weight: 800;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Black-Web.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Black-Web.woff) format("woff");
}

@font-face {
    font-family: 'Graphik Web';
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Bold-Web.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Bold-Web.woff) format("woff");
}

@font-face {
    font-family: 'Graphik Web';
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Semibold-Web.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Semibold-Web.woff) format("woff");
}

@font-face {
    font-family: 'Graphik Web';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Regular-Web.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/Graphik-Regular-Web.woff) format("woff");
}

@font-face {
    font-family: 'Source Code Pro';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/SourceCodePro-Regular.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/SourceCodePro-Regular.woff) format("woff");
}

@font-face {
    font-family: 'Source Code Pro';
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/SourceCodePro-Semibold.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/SourceCodePro-Semibold.woff) format("woff");
}

@font-face {
    font-family: 'Source Code Pro';
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/SourceCodePro-Bold.woff2) format("woff2"), url(https://tpengagestagingstaticfiles-ebchg7brahg4fkdg.a01.azurefd.net/staticstaging/fonts/SourceCodePro-Bold.woff) format("woff");
}

.white_color {
    color: #FFFFFF;
}

.ebony_color {
    color: #020307;
}

.royal_color {
    color: #4C5AEA;
}

.royal_light_color {
    color: rgba(76,90,234,0.2);
}

.hover_color {
    color: #707BEE;
}

.glacier_color {
    color: #F8FBFD;
}

.astronaut_color {
    color: #272E78;
}

.bunting_color {
    color: #1A1E4F;
}

.cloud_burst_color {
    color: #202561;
}

.whisper_color {
    color: #EFEFF7;
}

.dusk_color {
    color: #B9BBD2;
}

.sapphire_color {
    color: #343DA0;
}

.linear_blue_color {
    color: linear-gradient(141.99deg,#4C5AEA 0.85%,#202561 96.65%);
}

.moonlight_color {
    color: #FFFBF0;
}

.sunshine_color {
    color: #FEE770;
}

.mochi_color {
    color: #EAF6ED;
}

.mantis_color {
    color: #76C673;
}

.green_color {
    color: #008000;
}

.yellow_color {
    color: #FEE770;
}

.aqua_haze_color {
    color: #F8FBFD;
}

.mercury_color {
    color: #E9E9E9;
}

.santas_color {
    color: #A2A3AB;
}

.modal_color {
    color: rgba(0,2,25,0.56);
}

.midgray_color {
    color: #5E5F68;
}

.mistletoe_color {
    color: #008450;
}

.mistletoe_light_color {
    color: rgba(0,132,80,0.1);
}

.mustard_color {
    color: #A38900;
}

.mustard_light_color {
    color: rgba(163,137,0,0.1);
}

.midgray_color {
    color: #5E5F68;
}

.midgray_light_color {
    color: rgba(94,95,104,0.1);
}

.crimson_color {
    color: #B62929;
}

.crimson_light_color {
    color: rgba(182,41,41,0.1);
}

.rose_color {
    color: #F4DFDF;
}

.red_color {
    color: #dc3545;
}

.white_bgcolor {
    background: #FFFFFF;
}

.ebony_bgcolor {
    background: #020307;
}

.royal_bgcolor {
    background: #4C5AEA;
}

.royal_light_bgcolor {
    background: rgba(76,90,234,0.2);
}

.hover_bgcolor {
    background: #707BEE;
}

.glacier_bgcolor {
    background: #F8FBFD;
}

.astronaut_bgcolor {
    background: #272E78;
}

.bunting_bgcolor {
    background: #1A1E4F;
}

.cloud_burst_bgcolor {
    background: #202561;
}

.whisper_bgcolor {
    background: #EFEFF7;
}

.dusk_bgcolor {
    background: #B9BBD2;
}

.sapphire_bgcolor {
    background: #343DA0;
}

.linear_blue_bgcolor {
    background: linear-gradient(141.99deg,#4C5AEA 0.85%,#202561 96.65%);
}

.moonlight_bgcolor {
    background: #FFFBF0;
}

.sunshine_bgcolor {
    background: #FEE770;
}

.mochi_bgcolor {
    background: #EAF6ED;
}

.mantis_bgcolor {
    background: #76C673;
}

.green_bgcolor {
    background: #008000;
}

.yellow_bgcolor {
    background: #FEE770;
}

.aqua_haze_bgcolor {
    background: #F8FBFD;
}

.mercury_bgcolor {
    background: #E9E9E9;
}

.santas_bgcolor {
    background: #A2A3AB;
}

.modal_bgcolor {
    background: rgba(0,2,25,0.56);
}

.midgray_bgcolor {
    background: #5E5F68;
}

.mistletoe_bgcolor {
    background: #008450;
}

.mistletoe_light_bgcolor {
    background: rgba(0,132,80,0.1);
}

.mustard_bgcolor {
    background: #A38900;
}

.mustard_light_bgcolor {
    background: rgba(163,137,0,0.1);
}

.midgray_bgcolor {
    background: #5E5F68;
}

.midgray_light_bgcolor {
    background: rgba(94,95,104,0.1);
}

.crimson_bgcolor {
    background: #B62929;
}

.crimson_light_bgcolor {
    background: rgba(182,41,41,0.1);
}

.rose_bgcolor {
    background: #F4DFDF;
}

.red_bgcolor {
    background: #dc3545;
}

:root {
    font-size: 16px;
}

h1 {
    font-size: 2.5rem;
    line-height: 3.25rem;
}

h2 {
    font-size: 2.25rem;
    line-height: 2.75rem;
}

h3, h4 {
    font-size: 1.5rem;
    line-height: 2rem;
}

.larger, h5, .large {
    font-size: 1.25rem;
    line-height: 1.5rem;
}

p, h6 {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.small, .smaller {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
}

.semi_bold {
    font-weight: 500;
}

h1, h2, h3, h4, .bold {
    font-weight: 600;
}

.bolder {
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6, p, .small, .smaller, .caption, .larger {
    letter-spacing: 0rem;
}

.overline {
    font-weight: 600;
    letter-spacing: 0.5px;
}

button.primary_button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    background-color: #4C5AEA;
    box-shadow: 0px 2px 8px rgba(32,45,74,0.2) !important;
    border-radius: 8px;
    color: #FFFFFF;
    border: none;
    min-height: 52px;
}

    button.primary_button .mat-button-wrapper {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    button.primary_button:hover {
        background-color: #707BEE !important;
        box-shadow: 4px 4px 8px rgba(0,22,255,0.12), -4px -4px 8px rgba(0,22,255,0.12) !important;
    }

button.secondary_button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    background-color: #FFFFFF;
    border: 0.8px solid #4C5AEA;
    box-sizing: border-box;
    border-radius: 8px;
    color: #4C5AEA;
    min-height: 52px;
}

    button.secondary_button .mat-button-wrapper {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    button.secondary_button:hover {
        background-color: rgba(76,90,234,0.2) !important;
    }

button.tertiary_button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    background-color: #FFFFFF;
    border: unset;
    box-sizing: border-box;
    border-radius: 8px;
    color: #4C5AEA;
    min-height: 52px;
}

    button.tertiary_button .mat-button-wrapper {
        font-size: 1rem;
        line-height: 1.25rem;
        align-items: center;
        display: flex;
    }

    button.tertiary_button:hover {
        background-color: rgba(76,90,234,0.2) !important;
    }

    button.primary_button:disabled, button.primary_button[disabled], button.secondary_button:disabled, button.secondary_button[disabled], button.tertiary_button:disabled, button.tertiary_button[disabled] {
        background-color: #E9E9E9 !important;
        color: #A2A3AB !important;
        box-shadow: none !important;
        border: none !important;
    }

button.secondary_button:disabled, button.secondary_button[disabled] {
    background-color: #E9E9E9 !important;
    color: #A2A3AB !important;
    box-shadow: none !important;
    border: 0.5px solid #A2A3AB !important;
}

button.primary_button_smaller, button.secondary_button_smaller, button.tertiary_button_smaller {
    padding: 12px 16px;
}

    button.primary_button_smaller .mat-button-wrapper, button.secondary_button_smaller .mat-button-wrapper, button.tertiary_button_smaller .mat-button-wrapper {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

button.primary_button_caption, button.secondary_button_caption, button.tertiary_button_caption {
    padding: 8px 12px;
}

    button.primary_button_caption .mat-button-wrapper, button.secondary_button_caption .mat-button-wrapper, button.tertiary_button_caption .mat-button-wrapper {
        font-size: 0.75rem;
        line-height: 1rem;
    }

button {
    cursor: pointer;
    min-width: 240px;
}

div.text_button {
    display: flex;
    justify-items: center;
    align-items: center;
    cursor: pointer;
}

    div.text_button .text_button_icon {
        margin-right: 4px;
        height: 24px;
        width: 24px;
    }

        div.text_button .text_button_icon svg path {
            fill: #4C5AEA;
        }

    div.text_button .text_button_value {
        color: #4C5AEA;
    }

    div.text_button:hover .text_button_icon svg path {
        fill: #707BEE;
    }

    div.text_button:hover .text_button_value {
        color: #707BEE;
    }

div.text_button_disabled .text_button_icon svg path {
    fill: #A2A3AB !important;
}

div.text_button_disabled .text_button_value {
    color: #A2A3AB !important;
}

input, mat-select, textarea {
    font-size: 1rem;
    line-height: 2.25rem;
    font-weight: 400;
    margin: 0px;
    width: 100%;
    padding: 0 12px;
}

    input:hover, mat-select:hover, textarea:hover {
        background-color: rgba(76,90,234,0.2);
        border-radius: 4px;
        color: #4C5AEA;
        border: 2px solid #4C5AEA;
    }

        input:hover ::-webkit-input-placeholder, mat-select:hover ::-webkit-input-placeholder, textarea:hover ::-webkit-input-placeholder {
            color: #4C5AEA;
        }

        input:hover :-moz-placeholder, mat-select:hover :-moz-placeholder, textarea:hover :-moz-placeholder {
            color: #4C5AEA;
            opacity: 1;
        }

        input:hover ::-moz-placeholder, mat-select:hover ::-moz-placeholder, textarea:hover ::-moz-placeholder {
            color: #4C5AEA;
            opacity: 1;
        }

        input:hover :-ms-input-placeholder, mat-select:hover :-ms-input-placeholder, textarea:hover :-ms-input-placeholder {
            color: #4C5AEA;
        }

        input:hover ::-ms-input-placeholder, mat-select:hover ::-ms-input-placeholder, textarea:hover ::-ms-input-placeholder {
            color: #4C5AEA;
        }

        input:hover ::placeholder, mat-select:hover ::placeholder, textarea:hover ::placeholder {
            color: #4C5AEA;
        }

    input:active, mat-select:active, textarea:active {
        background-color: unset;
        border-radius: 4px;
        color: #020307;
        border: 2px solid #4C5AEA;
    }

    input:focus, mat-select:focus, textarea:focus {
        background-color: unset;
        border-radius: 4px;
        color: #020307;
        border: 2px solid #4C5AEA;
    }

    input:focus, mat-select:focus, textarea:focus {
        background-color: unset;
        border-radius: 4px;
        color: #020307;
        border: 2px solid #4C5AEA;
    }

.error_hidden {
    display: none !important;
}

.input_field, .input_field_main {
    position: relative;
    margin-top: 8px;
}

    .input_field .input_field_icon, .input_field_main .input_field_icon {
        position: absolute;
        right: 1%;
        bottom: 5%;
        cursor: pointer;
    }

.input-field-error {
    background-color: unset;
    border-radius: 4px;
    color: linear-gradient(141.99deg,#4C5AEA 0.85%,#202561 96.65%);
    border: 2px solid #B62929;
}

.is-validateEnabled:invalid {
    background-color: unset;
    border-radius: 4px;
    color: linear-gradient(141.99deg,#4C5AEA 0.85%,#202561 96.65%);
    border: 2px solid #B62929;
}

.errorMessage {
    overflow: hidden;
    line-height: 1.2rem;
    transition: line-height 0.4s;
    font-size: 0.75rem;
    font-weight: 400;
    color: #B62929 !important;
}

    .errorMessage ul {
        list-style: none;
        padding-left: 0;
    }

        .errorMessage ul li {
            font-size: 0.75rem !important;
        }

.engage_radio_field {
    font-weight: 500;
    font-size: 1rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    min-height: 20px;
    cursor: pointer;
    padding: 8px 12px 8px 20px;
    margin: 8px 0 16px;
    border-radius: 4px;
    border: 1px solid #E9E9E9;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

    .engage_radio_field input[type="radio"] {
        display: none;
    }

        .engage_radio_field input[type="radio"]:checked ~ .engage_custom_radio::before {
            background: #FFFFFF;
            content: "✓";
            color: #4C5AEA;
            font-size: 11px;
            line-height: normal;
            font-weight: 700;
            text-align: center;
            padding-top: 0px;
        }

            .engage_radio_field input[type="radio"]:checked ~ .engage_custom_radio::before engage_radio_field ~ engage_custom_radio {
                background: #4C5AEA;
            }

        .engage_radio_field input[type="radio"]:checked ~ .engage_custom_radio {
            border: none !important;
        }

    .engage_radio_field:hover {
        background: rgba(76,90,234,0.2);
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        color: #4C5AEA !important;
    }

    .engage_radio_field .engage_custom_radio {
        border: 1.5px solid #A2A3AB;
        border-radius: 100%;
        height: 14px;
        width: 14px;
        margin-right: 16px;
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        cursor: pointer;
        min-width: 14px;
    }

        .engage_radio_field .engage_custom_radio::before {
            display: -ms-grid;
            display: grid;
            content: "";
            border-radius: 100%;
            height: 14px;
            width: 14px;
            -webkit-transition: background 0.25s ease-in-out;
            transition: background 0.25s ease-in-out;
        }

.engage_single_radio_checkbox_field {
    margin: 8px 0px 0px;
}

.radio_button_checked {
    background: #4C5AEA;
    color: #FFFFFF;
}

.engage_checkbox_field {
    font-weight: 500;
    font-size: 1rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    min-height: 20px;
    cursor: pointer;
    padding: 8px 12px 8px 0;
    margin: 8px 0 16px;
    border-radius: 4px;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

    .engage_checkbox_field input[type="checkbox"] {
        display: none;
    }

        .engage_checkbox_field input[type="checkbox"]:checked ~ .engage_custom_checkbox::before {
            background: transparent;
            content: "✓";
            color: #4C5AEA;
            font-size: 20px;
            line-height: normal;
            font-weight: 700;
            text-align: center;
            padding-top: 0px;
            position: absolute;
            top: -10px;
            right: -2px;
        }

        .engage_checkbox_field input[type="checkbox"]:checked ~ .engage_custom_checkbox {
            border: 1.5px solid #4C5AEA;
        }

    .engage_checkbox_field:hover {
        background: rgba(76,90,234,0.2);
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        color: #4C5AEA !important;
    }

        .engage_checkbox_field:hover .engage_custom_checkbox {
            border: 1.5px solid #4C5AEA;
        }

    .engage_checkbox_field .engage_custom_checkbox {
        border: 1.5px solid #A2A3AB;
        border-radius: 4px;
        height: 14px;
        width: 14px;
        margin-right: 16px;
        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        cursor: pointer;
        position: relative;
        min-width: 14px;
    }

        .engage_checkbox_field .engage_custom_checkbox::before {
            -webkit-transition: background 0.25s ease-in-out;
            transition: background 0.25s ease-in-out;
        }

mat-checkbox .mat-checkbox-layout {
    white-space: normal;
    align-items: center !important;
}

mat-checkbox .mat-checkbox-inner-container {
    margin-top: 2px;
}

button {
    outline: none !important;
}

    button :focus {
        outline: none !important;
    }

div {
    outline: none !important;
}

    div :focus {
        outline: none !important;
    }

.hidden {
    display: none !important;
}

.border-bottom {
    border-bottom: 1px solid #E9E9E9;
}

.text_left {
    text-align: left;
}

.text_right {
    text-align: right;
}

.text_center {
    text-align: center;
}

.margin_0 {
    margin: 0px;
}

.margin_4_top {
    margin-top: 4px;
}

.margin_4_bottom {
    margin-bottom: 4px;
}

.margin_4_right {
    margin-right: 4px;
}

.margin_4_left {
    margin-left: 4px;
}

.margin_8 {
    margin: 8px;
}

.margin_8_top {
    margin-top: 8px;
}

.margin_8_bottom {
    margin-bottom: 8px;
}

.margin_8_left {
    margin-left: 8px;
}

.margin_8_right {
    margin-right: 8px;
}

.padding_0 {
    padding: 0px;
}

.padding_0_left {
    padding-left: 0px !important;
}

.padding_8 {
    padding: 8px;
}

.padding_8_top {
    padding-top: 8px;
}

.padding_8_bottom {
    padding-bottom: 8px;
}

.padding_8_left {
    padding-left: 8px;
}

.padding_8_right {
    padding-right: 8px;
}

.margin_16 {
    padding: 16px;
}

.margin_16_top {
    margin-top: 16px;
}

.margin_16_bottom {
    margin-bottom: 16px;
}

.margin_16_left {
    margin-left: 16px;
}

.margin_16_right {
    margin-right: 16px;
}

.padding_16 {
    padding: 16px;
}

.padding_16_top {
    padding-top: 16px;
}

.padding_16_bottom {
    padding-bottom: 16px;
}

.padding_16_left {
    padding-left: 16px;
}

.padding_16_right {
    padding-right: 16px;
}

.margin_24_top {
    margin-top: 24px;
}

.margin_24_bottom {
    margin-bottom: 24px;
}

.margin_24_right {
    margin-right: 24px;
}

.margin_24_left {
    margin-left: 24px;
}

.padding_32 {
    padding: 32px;
}

.padding_32_top {
    padding-top: 32px;
}

.padding_32_bottom {
    padding-bottom: 32px;
}

.padding_32_left {
    padding-left: 32px;
}

.padding_32_right {
    padding-right: 32px;
}

.margin_32_top {
    margin-top: 32px;
}

.margin_32_bottom {
    margin-bottom: 32px;
}

.margin_32_right {
    margin-right: 32px;
}

.margin_32_left {
    margin-left: 32px;
}

.width_100 {
    width: 100%;
}

.cursor_pointer {
    cursor: pointer;
}

.pre_wrap {
    white-space: pre-wrap;
}

.break_word {
    white-space: pre-wrap;
}

.isDisabled {
    pointer-events: none;
    cursor: default !important;
    opacity: 0.56 !important;
}

.api-loader-smallest {
    zoom: 0.4;
    -moz-transform: scale(0.4);
}

div.api-loader-smaller {
    zoom: 0.6;
    -ms-transform: scale(0.6);
}

.navbar_icon_dark_mode svg path {
    fill: #FFFFFF !important;
}

.engage_page_spacing {
    padding: 0.4rem 4.5rem;
}

.border_1_bottom {
    border-bottom: 1px solid #E9E9E9;
    height: 1px;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    h3, h4 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .larger, h5 {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    p, h6 {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .small, .smaller {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

@media only screen and (max-width: 475px) {
    h1 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    h3, h4 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .larger, h5 {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    p, h6 {
        font-size: 0.875rem;
        line-height: 1rem;
    }

    .small, .smaller {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

* {
    font-family: 'Graphik Web', 'Source Code Pro', sans-serif, Helvetica, Arial !important;
    font-size: 16px;
    line-height: normal;
    margin: 0px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#login-main-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    line-height: normal;
    background-color: #FFFFFF;
    max-width: 1440px;
    margin: 0 auto;
}

    #login-main-div .login-buttons-section {
        display: grid;
        align-items: center;
    }

        #login-main-div .login-buttons-section .login-main-section {
            display: grid;
            align-items: center;
            justify-content: center;
        }

            #login-main-div .login-buttons-section .login-main-section .login-page-items {
                display: grid;
                grid-template-columns: minmax(100%,608px);
                grid-row-gap: 32px;
                align-items: center;
                justify-content: center;
                position: relative;
            }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .login-small-screen-image-section {
                    display: none;
                }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .login-small-screen-home-section {
                    display: none;
                    cursor: pointer;
                }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .tp-logo {
                    height: 40px;
                    width: 40px;
                }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .button-separator {
                    display: grid;
                    grid-template-columns: 1fr auto 1fr;
                }

                    #login-main-div .login-buttons-section .login-main-section .login-page-items .button-separator .horizontal-separator-center {
                        display: grid;
                        align-items: center;
                    }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .terms-and-condition {
                    display: flex;
                }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .timer {
                    display: flex;
                    margin-top: 16px;
                }

                    #login-main-div .login-buttons-section .login-main-section .login-page-items .timer .minutes {
                        display: flex;
                        flex-direction: column;
                        width: 90px;
                        align-items: center;
                    }

                    #login-main-div .login-buttons-section .login-main-section .login-page-items .timer .seconds {
                        display: flex;
                        flex-direction: column;
                        width: 90px;
                        align-items: center;
                    }

                #login-main-div .login-buttons-section .login-main-section .login-page-items .tp-button {
                    display: flex;
                    justify-content: space-between;
                }

    #login-main-div .login-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-image: url('../../Client/src/assets/icons/illustration_background.svg');
    }

        #login-main-div .login-image-section .login-main-image-section {
            display: flex;
            justify-content: center;
        }

            #login-main-div .login-image-section .login-main-image-section .login-main-image {
                height: 440px;
            }

        #login-main-div .login-image-section .login-logo-section {
            position: absolute;
            right: 32px;
            bottom: 32px;
        }

            #login-main-div .login-image-section .login-logo-section .login-logo-image {
                height: 32px;
                width: 32px;
            }

        #login-main-div .login-image-section .login-home-section {
            position: absolute;
            right: 32px;
            top: 32px;
            cursor: pointer;
        }

            #login-main-div .login-image-section .login-home-section .login-home-image {
                height: 32px;
                width: 32px;
            }

@media only screen and (max-width: 1100px) {
    #login-main-div {
        grid-template-columns: 2fr 1fr;
    }

        #login-main-div .login-image-section .login-main-image-section .login-main-image {
            height: 300px;
        }
}

@media only screen and (max-width: 834px) {
    #login-main-div {
        grid-template-columns: 1fr;
    }

        #login-main-div .login-buttons-section .login-main-section .login-page-items .login-small-screen-image-section {
            display: unset;
        }

            #login-main-div .login-buttons-section .login-main-section .login-page-items .login-small-screen-image-section .login-main-image {
                height: 200px;
            }

        #login-main-div .login-buttons-section .login-main-section .login-page-items .login-small-screen-home-section {
            display: unset;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }

            #login-main-div .login-buttons-section .login-main-section .login-page-items .login-small-screen-home-section .login-home-image {
                height: 32px;
                width: 32px;
            }

        #login-main-div .login-buttons-section .login-main-section .login-page-items .terms-and-condition {
            display: unset;
        }

        #login-main-div .login-image-section {
            display: none;
        }
}

#file-main-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 100vw;
    background: #F8FBFD;
    min-height: 100vh;
    height: 100%;
    padding: 0px;
    position: relative;
    margin: 0px auto;
    max-width: 1536px;
}

    #file-main-div .file-main-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 36px;
        align-items: center;
    }

        #file-main-div .file-main-header .file-main-header-text {
            display: flex;
            align-items: center;
        }

            #file-main-div .file-main-header .file-main-header-text .thrive {
                font-size: 40px;
                color: #272E78;
                font-weight: 900;
                margin-left: 16px;
            }

            #file-main-div .file-main-header .file-main-header-text .pass {
                font-size: 40px;
                color: #272E78;
                font-weight: 500;
            }

        #file-main-div .file-main-header .file-close-icon {
            cursor: pointer;
        }

            #file-main-div .file-main-header .file-close-icon img {
                width: 40px;
                height: 40px;
            }

    #file-main-div div.file-main-section {
        background: #FFFFFF;
        box-shadow: 0px 8px 32px rgba(32,45,74,0.2);
        border-radius: 8px;
        top: 44%;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
    }

        #file-main-div div.file-main-section div.file-first-attempt {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 60px;
        }

            #file-main-div div.file-main-section div.file-first-attempt .first-attempt-icon {
                width: 50px;
                height: 50px;
            }

            #file-main-div div.file-main-section div.file-first-attempt .first-attempt-text {
                margin: 16px 0px 4px;
                text-align: center;
            }

                #file-main-div div.file-main-section div.file-first-attempt .first-attempt-text .first-attempt-dot {
                    color: #020307;
                }

        #file-main-div div.file-main-section div.file-retry {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 124px;
        }

            #file-main-div div.file-main-section div.file-retry .file-retry-icon {
                width: 50px;
                height: 50px;
            }

            #file-main-div div.file-main-section div.file-retry .file-retry-text {
                margin: 12px 0px;
                text-align: center;
            }

            #file-main-div div.file-main-section div.file-retry .file-retry-link {
                margin-bottom: 4px;
                text-align: center;
                color: #5E5F68;
                font-size: 18px;
                margin-bottom: 0px;
            }

                #file-main-div div.file-main-section div.file-retry .file-retry-link span {
                    color: #343DA0;
                    cursor: pointer;
                }

@media only screen and (max-width: 991px) {
    #file-main-div div.file-main-section div.file-first-attempt {
        padding: 16px 32px;
        min-width: 320px;
    }

        #file-main-div div.file-main-section div.file-first-attempt .first-attempt-icon {
            width: 42px;
            height: 42px;
        }

        #file-main-div div.file-main-section div.file-first-attempt .first-attempt-text {
            font-size: 20px;
        }

    #file-main-div div.file-main-section div.file-retry {
        padding: 16px 64px;
        min-width: 280px;
    }

        #file-main-div div.file-main-section div.file-retry .file-retry-icon {
            width: 42px;
            height: 42px;
        }
}

@media only screen and (max-width: 475px) {
    #file-main-div .file-main-header {
        padding: 36px 16px;
    }

        #file-main-div .file-main-header .file-main-header-text img {
            width: 24px;
            height: 24px;
        }

        #file-main-div .file-main-header .file-main-header-text .thrive {
            font-size: 30px;
            margin-left: 8px;
        }

        #file-main-div .file-main-header .file-main-header-text .pass {
            font-size: 30px;
        }

        #file-main-div .file-main-header .file-close-icon img {
            width: 32px;
            height: 32px;
        }

    #file-main-div div.file-main-section div.file-first-attempt {
        padding: 8px 20px;
        min-width: 216px;
    }

    #file-main-div div.file-main-section div.file-retry {
        padding: 8px 28px;
        min-width: 200px;
    }
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    *::-webkit-scrollbar-track {
        -webkit-box-shadow: none !important;
        background-color: transparent;
    }

    *::-webkit-scrollbar {
        width: 4px !important;
        background-color: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

.admin-tooltip-container {
    cursor: pointer;
    position: relative;
    display: inline-block;
    height: 24px;
    width: 24px;
    background-image: url(/Client/src/assets/icons/information.svg);
    background-size: 24px 24px;
}

.admin-tooltip {
    opacity: 0;
    z-index: 2;
    color: lightgray;
    display: block;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    text-shadow: 1px 1px 2px #111;
    background: rgba(51,51,51,0.9);
    border: 1px solid rgba(34,34,34,0.9);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    bottom: 24px;
    font-family: inherit !important;
    width: 275px;
    right: -135px;
}

    .admin-tooltip:before, .admin-tooltip:after {
        content: '';
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(51,51,51,0.9);
        position: absolute;
        bottom: -10px;
        left: 43%;
    }

.admin-tooltip-container:hover .admin-tooltip, a:hover .admin-tooltip {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

@media only screen and (max-width: 1201px) {
    .engage_page_spacing {
        padding: 0.4rem 2.5rem;
    }
}

@media only screen and (max-width: 961px) {
    .engage_page_spacing {
        padding: 0.4rem 2rem;
    }
}

@media only screen and (max-width: 767px) {
    .engage_page_spacing {
        display: table !important;
        padding: 3.5rem 1.5rem;
    }

    h1 {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    h3, h4 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .larger, h5 {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    p, h6 {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .small, .smaller {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

@media only screen and (max-width: 475px) {
    h1 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    h3, h4 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .larger, h5 {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    p, h6 {
        font-size: 0.875rem;
        line-height: 1rem;
    }

    .small, .smaller {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}

#resentForgotUsernameModal {
    width: 100%;
    height: 100%;
}

    #resentForgotUsernameModal .parent-div {
        display: flex;
        font-family: Graphik;
        font-size: 16px;
    }

        #resentForgotUsernameModal .parent-div section {
            width: 100%;
            position: relative;
            box-shadow: 0px 2px 8px rgba(32,45,74,0.2);
            border-radius: 8px;
            padding: 32px 24px 25px;
            text-align: center;
        }

            #resentForgotUsernameModal .parent-div section .main-heading {
                font-size: 24px;
                font-weight: bold;
            }

            #resentForgotUsernameModal .parent-div section .guide-line {
                margin-top: 24px;
            }

@media only screen and (max-width: 400px) {
    #resentForgotUsernameModal .parent-div section {
        background: none;
        box-shadow: none;
        border-radius: unset;
    }
}

#simultaneousLoginModal .main_modal {
    padding: 32px 40px;
    background-color: #FFFFFF;
    max-width: 35%;
    border-radius: 8px;
    margin: 200px auto;
}

    #simultaneousLoginModal .main_modal .modal_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        #simultaneousLoginModal .main_modal .modal_header .close_icon {
            width: 24px;
            height: 24px;
        }

    #simultaneousLoginModal .main_modal .button_section {
        display: flex;
        justify-content: flex-end;
    }

@media only screen and (max-width: 961px) {
    #simultaneousLoginModal .main_modal {
        min-width: 70%;
    }

        #simultaneousLoginModal .main_modal .button_section {
            justify-content: center;
        }
}

@media only screen and (max-width: 475px) {
    #simultaneousLoginModal .main_modal .button_section .login_button {
        min-width: 100px;
    }
}