:root {
    /* ==================================================== */

    /* ALL CSS CLASSES ARE WRITTEN BASED ON DESKTOP VIEW */
    /* CHANGES ON OTHER SCREENS ARE WRITTEN IN MEDIA QUERIES SECTION */

    /* ==================================================== */
    /* ==================================================== */
    /* ========== <><><><> COLORS <><><><> ================  */
    /* ==================================================== */
    /* in Bootstrap CSS file */
    /* --primary, --success, --warning, --danger, --dark, --secondary, --light */

    --light-primary: #9B99F0;
    --light-blue: #ECECFF;
    --filled-option-card-hover-color: #FFEBD9;
    --filled-option-card-button-hover-color: #FF8D23;
    --page-instruction-color: #FFFDD0;
    /* ==================================================== */
    /* ==================================================== */
    /* ===== <><><><> CANDIDATE THEME COLORS <><><><> =====  */
    /* ==================================================== */
    --theme-red: #FF4343;
    --theme-green: #60CF83;
    --theme-blue: #1296F5;
    --theme-orange: #FF9635;
    --theme-purple: #4A47B9;

    --selected-theme-color: var(--theme-green);

    /* ==================================================== */
    /* ========== <><><><> FONTS <><><><> =================  */
    /* ==================================================== */
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Open Sans', sans-serif;
    --regular: normal;
    --medium: 500;
    --semi-bold: 600;
    /* ==================================================== */
    /* ========== <><><><> FONT SIZES <><><><> ============  */
    /* ==================================================== */
    --heading-size: 30px;
    --subheading-1-size: 24px;
    --subheading-2-size: 20px;
    --subheading-3-size: 18px;
    --subheading-4-size: 16px;
    --field-text-size: 18px;
    --body-text-1-size: 16px;
    --body-text-2-size: 14px;
    --body-text-3-size: 12px;
    --body-line-height-1: 1.75;
    --body-line-height-2: 1.56;
    /* ==================================================== */
    /* ========== <><><><> BUTTONS <><><><> ===============  */
    /* ==================================================== */
    --border-radius: 7px;
    --border-radius-lg: 12px;
    --button-width: 150px;
    --button-padding-x: 10px;
    --button-padding-y: 9px;
    /* ==================================================== */
    /* ========== <><><><> IMAGES <><><><> ===============  */
    /* ==================================================== */
    --upload-image-width: 170px;
    --upload-image-height: 170px;
    --vinterview-logo-height: 27px;
    --candidate-side-icon-size: 20px;
    /* ==================================================== */
    /* ======== <><><><> INPUT ELEMENTS <><><><> ==========  */
    /* ==================================================== */
    --input-width: 100%;
    --input-padding-x: 16px;
    --input-padding-y: 11px;
    --input-placeholder-color: var(--secondary);
    --webkit-autofill-color: transparent;
    --input-line-height: 1.56;
    --input-filled-line-height: 1.56;
    --input-filled-letter-spacing: 0.44px;
    --input-filled-padding-x: 13px;
    --input-filled-padding-top: 11px;
    --input-filled-padding-bottom: 11px;
    /* ==================================================== */
    /* ======= <><><><> FLOATING LABELS <><><><> ==========  */
    /* ==================================================== */
    /* --floating-element-margin-top: 28px; */
    --floating-element-margin-top: 0px;

    --floating-element-margin-bottom: 0;
    --floating-label-opacity: 0;
    --floating-label-top: -16px;
    --floating-label-left: 9px;
    --floating-label-padding-x: 5px;
    --floating-label-line-height: 2.33;
    /* ==================================================== */
    /* ========== <><><><> EDITOR <><><><> ===============  */
    /* ==================================================== */
    --rich-text-editor-height: 220px;
    /* ==================================================== */
    /* ========== <><><><> OPACITY <><><><> ===============  */
    /* ==================================================== */
    --opacity-half: 0.5;
    --opacity-mid: 0.87;
    --opacity-high: 1;
    /* ==================================================== */
    /* == <><><> SPACER (for margin and padding) <><><> ===  */
    /* ==================================================== */
    --spacer: 12px;
    /* ==================================================== */
    /* ================== <><><> DIV <><><> ===============  */
    /* ==================================================== */

    /* ==================================================== */
    /* ============= <><><> SIDEBAR <><><> ==================  */
    /* ==================================================== */
    --sidebar-width: 240px;
    --sidebar-sm-width: 92px;

    /* ==================================================== */
    /* ============= <><><> MODAL <><><> ==================  */
    /* ==================================================== */
    --modal-dialog-size: 40vw !important;
    /* ==================================================== */
    /* ============= <><><> LOGIN <><><> ==================  */
    /* ==================================================== */
    --login-sidebar-width: 400px;
    --login-form-width: 35vw;
    --otp-form-input-width: 60px;
    --otp-form-input-height: 68px;
    /* ==================================================== */
    /* ===== <><> CANDIDATE SIDE EXCLUSIVE VARIABLES <><> ===  */
    /* ==================================================== */
    --otp-text-size: 34px;
    --upload-anything-width: 200px;
    --upload-anything-height: 50px;
    --card-shadow: 0 14px 14px 3px rgba(55, 55, 55, 0.34);
}

/* font weight classes */
.fw-normal,
.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

/* trying animations  */

@keyframes animateUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js-animate-up {
    opacity: 0;
}

.animate-up {
    animation: 1.5s animateUp;
    animation-fill-mode: forwards;
}


/* @keyframes slide-down-animation {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
} */

@keyframes slide-up-input-animation {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down-input-animation {
    0% {
        opacity: 1;
        transform: translateY(0);
        background-color: transparent;
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* the landing navbar */
/* .sticky-top.bg-white.landing-navbar {
    animation: 0.5s ease-out 0s 1 slide-down-animation;
} */

/* trying animations ends */

body {
    font-style: var(--body-font);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Put grid for auto arrangement on different screens  */

.d-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: calc(3*var(--spacer));
    margin-top: calc(3*var(--spacer));
    margin-bottom: calc(3*var(--spacer));
}

@media (min-width: 768px) {
    .d-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(2*var(--spacer));
    }
}

@media (min-width: 1200px) {
    .d-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(2*var(--spacer));
    }
}


/* disabling selection of HTML elements */
.disable-selection {
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer */
    user-select: none;
}

/* input,
textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
} */

.modal-content {
    border-radius: var(--border-radius-lg) !important;
}

.modal-dialog {
    width: var(--modal-dialog-size);
}

#while-form-is-submitted,
#upload-modal {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ========== <><><><> FLASH CLASSES <><><><> ==========  */
.tooltip-inner {
    background-color: var(--warning);
    max-width: 100% !important;
    flex-grow: 0;
    font-family: var(--body-font);
    font-size: var(--body-text-1-size);
    font-weight: var(--semi-bold);
    text-align: left;
    color: var(--white);
    padding: var(--spacer) !important;
}

.manual-tooltip .tooltip-inner {
    background-color: var(--danger);
    max-width: 250px !important;
    flex-grow: 0;
    font-family: var(--body-font);
    font-size: var(--body-text-1-size);
    font-weight: var(--semi-bold);
    color: var(--white);
    padding: calc(1.75 * var(--spacer)) !important;
    text-align: center;
    border-radius: 17px;
}

.manual-tooltip.tooltip.show {
    opacity: 1;
}

.manual-tooltip.tooltip .arrow::before {
    border-color: transparent transparent var(--danger) transparent;
}

.flash-danger,
.flash-success,
.flash-warning {
    border-radius: var(--border-radius);
    font-family: var(--body-font);
    font-size: var(--body-text-2-size) !important;
    padding: var(--spacer);
}

/* Assumed colors (except for flash-danger) */
.flash-danger {
    /* border: solid 1px #f00000; */
    background-color: #fff4f4 !important;
}

.flash-danger p {
    color: var(--danger) !important;
}

.flash-success {
    /* border: solid 1px #00ff00; */
    background-color: #F4FFF4 !important;
    color: var(--success) !important;
}

.flash-success p {
    color: var(--success) !important;
}

.flash-warning {
    border: solid 1px #ffff00;
    background-color: #FFFFE0 !important;
}

.flash-warning p {
    color: var(--warning) !important;
}

/* errors: 404 and 500 */
.error-message-size {
    font-size: 60px !important;
    line-height: 1.2;
}



/* ========== <><><><> BORDER CLASSES <><><><> ==========  */

div.border-red {
    border: 1px solid var(--theme-red);
    border-radius: var(--border-radius);
}

div.border-green {
    border: 1px solid var(--theme-green);
    border-radius: var(--border-radius);
}

div.border-blue {
    border: 1px solid var(--theme-blue);
    border-radius: var(--border-radius);
}

div.border-orange {
    border: 1px solid var(--theme-orange);
    border-radius: var(--border-radius);
}

div.border-purple {
    border: 1px solid var(--theme-purple);
    border-radius: var(--border-radius);
}


/* ========== <><><><> OPACITY CLASSES <><><><> ==========  */

.opacity-half {
    opacity: var(--opacity-half);
}

.opacity-mid {
    opacity: var(--opacity-mid);
}

.opacity-high {
    opacity: var(--opacity-high);
}

/* ========== <><><><> COLOR CLASSES <><><><> ==========  */

div.blue {
    background-color: var(--theme-blue);
}

div.green {
    background-color: var(--theme-green);
}

div.red {
    background-color: var(--theme-red);
}

div.orange {
    background-color: var(--theme-orange);
}

div.purple {
    background-color: var(--theme-purple);
}

/* .floating-element-sibling{
    margin-top: var(--floating-element-margin-top);
    line-height: var(--input-filled-line-height) !important;
    padding: var(--input-filled-padding-top) 0;
} */

/* ========== <><><><> PADDING CLASSES <><><><> ==========  */

.padding-d4 {
    padding: calc(var(--spacer)/4);
}

.padding-d3 {
    padding: calc(var(--spacer)/3);
}

.padding-d2 {
    padding: calc(var(--spacer)/2);
}

.padding-d1,
.padding,
.padding-m1 {
    padding: calc(var(--spacer));
}

.padding-m2 {
    padding: calc(var(--spacer)*2);
}

.padding-m3 {
    padding: calc(var(--spacer)*3);
}

.padding-m4 {
    padding: calc(var(--spacer)*4);
}

/* paddingx */

.paddingx-d4 {
    padding-left: calc(var(--spacer)/4);
    padding-right: calc(var(--spacer)/4);
}

.paddingx-d3 {
    padding-left: calc(var(--spacer)/3);
    padding-right: calc(var(--spacer)/3);
}

.paddingx-d2 {
    padding-left: calc(var(--spacer)/2);
    padding-right: calc(var(--spacer)/2);
}

.paddingx-d1,
.paddingx,
.paddingx-m1 {
    padding-left: calc(var(--spacer));
    padding-right: calc(var(--spacer));
}

.paddingx-m2 {
    padding-left: calc(var(--spacer)*2);
    padding-right: calc(var(--spacer)*2);
}

.paddingx-m3 {
    padding-left: calc(var(--spacer)*3);
    padding-right: calc(var(--spacer)*3);
}

.paddingx-m4 {
    padding-left: calc(var(--spacer)*4);
    padding-right: calc(var(--spacer)*4);
}

/* paddingy */

.paddingy-d4 {
    padding-top: calc(var(--spacer)/4);
    padding-bottom: calc(var(--spacer)/4);
}

.paddingy-d3 {
    padding-top: calc(var(--spacer)/3);
    padding-bottom: calc(var(--spacer)/3);
}

.paddingy-d2 {
    padding-top: calc(var(--spacer)/2);
    padding-bottom: calc(var(--spacer)/2);
}

.paddingy-d1,
.paddingy,
.paddingy-m1 {
    padding-top: calc(var(--spacer));
    padding-bottom: calc(var(--spacer));
}

.paddingy-m2 {
    padding-top: calc(var(--spacer)*2);
    padding-bottom: calc(var(--spacer)*2);
}

.paddingy-m3 {
    padding-top: calc(var(--spacer)*3);
    padding-bottom: calc(var(--spacer)*3);
}

.paddingy-m4 {
    padding-top: calc(var(--spacer)*4);
    padding-bottom: calc(var(--spacer)*4);
}

/* paddingl */

.paddingl-d4 {
    padding-left: calc(var(--spacer)/4);
}

.paddingl-d3 {
    padding-left: calc(var(--spacer)/3);
}

.paddingl-d2 {
    padding-left: calc(var(--spacer)/2);
}

.paddingl-d1,
.paddingl,
.paddingl-m1 {
    padding-left: calc(var(--spacer));
}

.paddingl-m2 {
    padding-left: calc(var(--spacer)*2);
}

.paddingl-m3 {
    padding-left: calc(var(--spacer)*3);
}

.paddingl-m4 {
    padding-left: calc(var(--spacer)*4);
}

/* paddingr */

.paddingr-d4 {
    padding-right: calc(var(--spacer)/4);
}

.paddingr-d3 {
    padding-right: calc(var(--spacer)/3);
}

.paddingr-d2 {
    padding-right: calc(var(--spacer)/2);
}

.paddingr-d1,
.paddingr,
.paddingr-m1 {
    padding-right: calc(var(--spacer));
}

.paddingr-m2 {
    padding-right: calc(var(--spacer)*2);
}

.paddingr-m3 {
    padding-right: calc(var(--spacer)*3);
}

.paddingr-m4 {
    padding-right: calc(var(--spacer)*4);
}

/* paddingt */

.paddingt-d4 {
    padding-top: calc(var(--spacer)/4);
}

.paddingt-d3 {
    padding-top: calc(var(--spacer)/3);
}

.paddingt-d2 {
    padding-top: calc(var(--spacer)/2);
}

.paddingt-d1,
.paddingt,
.paddingt-m1 {
    padding-top: calc(var(--spacer));
}

.paddingt-m2 {
    padding-top: calc(var(--spacer)*2);
}

.paddingt-m3 {
    padding-top: calc(var(--spacer)*3);
}

.paddingt-m4 {
    padding-top: calc(var(--spacer)*4);
}

/* paddingb */

.paddingb-d4 {
    padding-bottom: calc(var(--spacer)/4);
}

.paddingb-d3 {
    padding-bottom: calc(var(--spacer)/3);
}

.paddingb-d2 {
    padding-bottom: calc(var(--spacer)/2);
}

.paddingb-d1,
.paddingb,
.paddingb-m1 {
    padding-bottom: calc(var(--spacer));
}

.paddingb-m2 {
    padding-bottom: calc(var(--spacer)*2);
}

.paddingb-m3 {
    padding-bottom: calc(var(--spacer)*3);
}

.paddingb-m4 {
    padding-bottom: calc(var(--spacer)*4);
}

/* ========== <><><><> MARGIN CLASSES <><><><> ==========  */

.margin-d4 {
    margin: calc(var(--spacer)/4);
}

.margin-d3 {
    margin: calc(var(--spacer)/3);
}

.margin-d2 {
    margin: calc(var(--spacer)/2);
}

.margin-d1,
.margin,
.margin-m1 {
    margin: calc(var(--spacer));
}

.margin-m2 {
    margin: calc(var(--spacer)*2);
}

.margin-m3 {
    margin: calc(var(--spacer)*3);
}

.margin-m4 {
    margin: calc(var(--spacer)*4);
}

/* marginx */

.marginx-d4 {
    margin-left: calc(var(--spacer)/4);
    margin-right: calc(var(--spacer)/4);
}

.marginx-d3 {
    margin-left: calc(var(--spacer)/3);
    margin-right: calc(var(--spacer)/3);
}

.marginx-d2 {
    margin-left: calc(var(--spacer)/2);
    margin-right: calc(var(--spacer)/2);
}

.marginx-d1,
.marginx,
.marginx-m1 {
    margin-left: calc(var(--spacer));
    margin-right: calc(var(--spacer));
}

.marginx-m2 {
    margin-left: calc(var(--spacer)*2);
    margin-right: calc(var(--spacer)*2);
}

.marginx-m3 {
    margin-left: calc(var(--spacer)*3);
    margin-right: calc(var(--spacer)*3);
}

.marginx-m4 {
    margin-left: calc(var(--spacer)*4);
    margin-right: calc(var(--spacer)*4);
}

/* marginy */

.marginy-d4 {
    margin-top: calc(var(--spacer)/4);
    margin-bottom: calc(var(--spacer)/4);
}

.marginy-d3 {
    margin-top: calc(var(--spacer)/3);
    margin-bottom: calc(var(--spacer)/3);
}

.marginy-d2 {
    margin-top: calc(var(--spacer)/2);
    margin-bottom: calc(var(--spacer)/2);
}

.marginy-d1,
.marginy,
.marginy-m1 {
    margin-top: calc(var(--spacer));
    margin-bottom: calc(var(--spacer));
}

.marginy-m2 {
    margin-top: calc(var(--spacer)*2);
    margin-bottom: calc(var(--spacer)*2);
}

.marginy-m3 {
    margin-top: calc(var(--spacer)*3);
    margin-bottom: calc(var(--spacer)*3);
}

.marginy-m4 {
    margin-top: calc(var(--spacer)*4);
    margin-bottom: calc(var(--spacer)*4);
}

/* marginl */

.marginl-d4 {
    margin-left: calc(var(--spacer)/4);
}

.marginl-d3 {
    margin-left: calc(var(--spacer)/3);
}

.marginl-d2 {
    margin-left: calc(var(--spacer)/2);
}

.marginl-d1,
.marginl,
.marginl-m1 {
    margin-left: calc(var(--spacer));
}

.marginl-m2 {
    margin-left: calc(var(--spacer)*2);
}

.marginl-m3 {
    margin-left: calc(var(--spacer)*3);
}

.marginl-m4 {
    margin-left: calc(var(--spacer)*4);
}

/* marginr */

.marginr-d4 {
    margin-right: calc(var(--spacer)/4);
}

.marginr-d3 {
    margin-right: calc(var(--spacer)/3);
}

.marginr-d2 {
    margin-right: calc(var(--spacer)/2);
}

.marginr-d1,
.marginr,
.marginr-m1 {
    margin-right: calc(var(--spacer));
}

.marginr-m2 {
    margin-right: calc(var(--spacer)*2);
}

.marginr-m3 {
    margin-right: calc(var(--spacer)*3);
}

.marginr-m4 {
    margin-right: calc(var(--spacer)*4);
}

/* margint */

.margint-d4 {
    margin-top: calc(var(--spacer)/4);
}

.margint-d3 {
    margin-top: calc(var(--spacer)/3);
}

.margint-d2 {
    margin-top: calc(var(--spacer)/2);
}

.margint-d1,
.margint,
.margint-m1 {
    margin-top: calc(var(--spacer));
}

.margint-m2 {
    margin-top: calc(var(--spacer)*2);
}

.margint-m3 {
    margin-top: calc(var(--spacer)*3);
}

.margint-m4 {
    margin-top: calc(var(--spacer)*4);
}

/* marginb */

.marginb-d4 {
    margin-bottom: calc(var(--spacer)/4);
}

.marginb-d3 {
    margin-bottom: calc(var(--spacer)/3);
}

.marginb-d2 {
    margin-bottom: calc(var(--spacer)/2);
}

.marginb-d1,
.marginb,
.marginb-m1 {
    margin-bottom: calc(var(--spacer));
}

.marginb-m2 {
    margin-bottom: calc(var(--spacer)*2);
}

.marginb-m3 {
    margin-bottom: calc(var(--spacer)*3);
}

.marginb-m4 {
    margin-bottom: calc(var(--spacer)*4);
}

/* ========== <><><><> HEADING CLASSES <><><><> ==========  */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
    color: var(--dark);
    object-fit: contain;
}

.top-bar-heading {
    font-family: var(--heading-font);
    font-size: var(--subheading-1-size);
    font-weight: var(--regular);
}

h1,
.heading {
    font-family: var(--heading-font);
    font-size: var(--heading-size);
    font-weight: var(--semi-bold);
}

h2,
.subheading-1 {
    font-family: var(--heading-font);
    font-size: var(--subheading-1-size);
    font-weight: var(--semi-bold);
}

h3,
.subheading-2 {
    font-family: var(--heading-font);
    font-size: var(--subheading-2-size);
    font-weight: var(--semi-bold);
}

h4,
.subheading-3 {
    font-family: var(--heading-font);
    font-size: var(--subheading-3-size);
    font-weight: var(--medium);
}

h5,
.subheading-4 {
    font-family: var(--heading-font);
    font-size: var(--subheading-4-size);
    font-weight: var(--medium);
}

/* ========== <><><><> SIDE MENU CLASSES <><><><> ==========  */

/* UNUSED TILL NOW  */

.side-menu-selected {
    font-family: var(--heading-font);
    font-size: var(--body-text-1-size);
    font-weight: var(--semi-bold);
}

/* UNUSED TILL NOW  */

.side-menu-not-selected {
    font-family: var(--heading-font);
    font-size: var(--body-text-1-size);
    font-weight: var(--medium);
}

/* ========== <><><><> BODY TEXT CLASSES <><><><> ==========  */

.otp-text {
    font-family: var(--body-font);
    font-size: var(--otp-text-size);
}

.field-text {
    font-family: var(--body-font);
    font-size: var(--field-text-size);
    line-height: var(--body-line-height-2);
    font-weight: var(--semi-bold);
}

.body-text-1 {
    font-family: var(--body-font);
    font-size: var(--body-text-1-size);
    line-height: var(--body-line-height-2);
}

.body-text-2 {
    font-family: var(--body-font);
    font-size: var(--body-text-2-size);
    line-height: var(--body-line-height-1);
}

.body-text-3 {
    font-family: var(--body-font);
    font-size: var(--body-text-3-size);
    line-height: var(--body-line-height-1);
}

.text-red {
    color: var(--theme-red);
}

.text-green {
    color: var(--theme-green);
}

.text-blue {
    color: var(--theme-blue);
}

.text-orange {
    color: var(--theme-orange);
}

.text-purple {
    color: var(--theme-purple);
}

/* ========== <><><><> BUTTON CLASSES <><><><> ==========  */

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

a:focus-visible,
button:focus-visible {
    outline: 0;
}

/* Try For Free */
a.try-for-free {
    padding: calc(var(--button-padding-y) + 2px) calc((3 * var(--button-padding-y)) + 5px);
    border-radius: var(--border-radius);
    background-color: white;
    opacity: var(--opacity-high);
    font-family: var(--heading-font);
    font-size: var(--body-text-1-size);
    font-weight: var(--semi-bold);
    letter-spacing: 1.54px;
    text-align: center;
    color: var(--primary);
}

/* Back Button */

a.back {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: var(--semi-bold);
    color: var(--dark);
}

a.back img {
    width: 1rem;
    height: 0.875rem;
}

a.back:hover {
    text-decoration: none;
}

/* Default Button : primary */

button:hover {
    background-color: var(--primary);
    color: white;
    cursor: pointer;
}

/* other primary buttons */

button.blue {
    border-color: var(--theme-blue);
    color: var(--theme-blue);
}

button.blue:hover {
    background-color: var(--theme-blue);
    color: white;
}

button.purple {
    border-color: var(--theme-purple);
    color: var(--theme-purple);
}

button.purple:hover {
    background-color: var(--theme-purple);
    color: white;
}

/* colorful buttons */

button.success {
    border-color: var(--success);
    color: var(--success);
}

button.success:hover {
    background-color: var(--success);
    color: white;
}

button.green {
    border-color: var(--theme-green);
    color: var(--theme-green);
}

button.green:hover {
    background-color: var(--theme-green);
    color: white;
}

button.warning {
    border-color: var(--warning);
    color: var(--warning);
}

button.warning:hover {
    background-color: var(--warning);
    color: white;
}

button.orange {
    border-color: var(--theme-orange);
    color: var(--theme-orange);
}

button.orange:hover {
    background-color: var(--theme-orange);
    color: white;
}

button.danger {
    border-color: var(--danger);
    color: var(--danger);
}

button.danger:hover {
    background-color: var(--danger);
    color: white;
}

button.red {
    border-color: var(--theme-red);
    color: var(--theme-red);
}

button.red:hover {
    background-color: var(--theme-red);
    color: white;
}

button.secondary-1 {
    border-color: var(--dark);
    color: var(--dark);
}

button.secondary-1:hover {
    background-color: var(--dark);
    color: white;
}

button.secondary-2 {
    border-color: var(--dark);
    color: var(--dark);
}

button.secondary-2:hover {
    background-color: var(--dark);
    color: white;
}

button.secondary-3 {
    border-color: var(--secondary);
    color: var(--secondary);
}

button.secondary-3:hover {
    background-color: var(--secondary);
    color: white;
}


/* filled buttons */
button.filled {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

button.filled:hover {
    background-color: var(--primary);
}

button.filled.primary,
button.filled.primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

button.filled.primary,
button.filled.primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

button.filled.primary,
button.filled.primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

button.filled.primary,
button.filled.primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

button.filled.success,
button.filled.success:hover {
    background-color: var(--success);
    border-color: var(--success);
}

button.filled.danger,
button.filled.danger:hover {
    background-color: var(--danger);
    border-color: var(--danger);
}

button.filled.warning,
button.filled.warning:hover {
    background-color: var(--warning);
    border-color: var(--warning);
}

button.filled.secondary-1,
button.filled.secondary-1:hover {
    background-color: var(--dark);
    border-color: var(--dark);
}

button.filled.secondary-2,
button.filled.secondary-2:hover {
    background-color: var(--dark);
    border-color: var(--dark);
}

button.filled.secondary-3,
button.filled.secondary-3:hover {
    background-color: var(--secondary);
    border-color: var(--dark);
}

/* Disabled, Inactive and Active buttons */

button.inactive,
button.inactive:hover {
    background-color: var(--primary);
    color: white;
    opacity: var(--opacity-half);
}

button.active,
button.active:hover {
    background-color: var(--primary);
    color: white;
    opacity: 1;
}

button.disabled,
button.disabled:hover {
    opacity: var(--opacity-half) !important;
    background-color: white !important;
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    cursor: default !important;
}

button.sm {
    /* font-size: var(--body-text-1-size); */
    width: auto;
    /* padding: var(--spacer) calc(1.5*var(--spacer)); */
}


/* filled candidate side buttons  */
button.blue.filled {
    background-color: var(--theme-blue);
    color: white;
}

button.purple.filled {
    background-color: var(--theme-purple);
    color: white;
}

button.orange.filled {
    background-color: var(--theme-orange);
    color: white;
}

button.green.filled {
    background-color: var(--theme-green);
    color: white;
}

button.red.filled {
    background-color: var(--theme-red);
    color: white;
}

button.blue.filled:hover {
    background-color: var(--theme-blue);
    color: white;
}

button.purple.filled:hover {
    background-color: var(--theme-purple);
    color: white;
}

button.orange.filled:hover {
    background-color: var(--theme-orange);
    color: white;
}

button.green.filled:hover {
    background-color: var(--theme-green);
    color: white;
}

button.red.filled:hover {
    background-color: var(--theme-red);
    color: white;
}


/* slot selection color: admin and user */
.time-slot-box {
    min-width: 200px;
    max-width: 220px;
    text-align: center;
    position: relative;
    border-width: 1px !important;
}

.time-slot-box.slot-taken {
    background-color: #D7D7D7;
    border: 0;
}

.time-slot-box.slot-taken p {
    color: #9A9A9A;
}

.removes-this-time-slot {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5px;
    right: -10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: var(--primary);
}


input.slot-selector:checked~.slot-selector-div.selected-green {
    background-color: #DEFFE9;
    border: 1px solid var(--theme-green) !important;
}

input.slot-selector:checked~.slot-selector-div.selected-red {
    background-color: #DEFFE9;
    border: 3px solid var(--theme-red) !important;
}

input.slot-selector:checked~.slot-selector-div.selected-blue {
    background-color: #DEFFE9;
    border: 3px solid var(--theme-blue) !important;
}

input.slot-selector:checked~.slot-selector-div.selected-purple {
    background-color: #DEFFE9;
    border: 3px solid var(--theme-purple) !important;
}

input.slot-selector:checked~.slot-selector-div.selected-orange {
    background-color: #DEFFE9;
    border: 3px solid var(--theme-orange) !important;
}

input.slot-selector:checked~.slot-selector-div.selected-green>p {
    color: var(--theme-green);
}

input.slot-selector:checked~.slot-selector-div.selected-red>p {
    color: var(--theme-red);
}

input.slot-selector:checked~.slot-selector-div.selected-blue>p {
    color: var(--theme-blue);
}

input.slot-selector:checked~.slot-selector-div.selected-purple>p {
    color: var(--theme-purple);
}

input.slot-selector:checked~.slot-selector-div.selected-orange>p {
    color: var(--theme-orange);
}


/* add-new-question-button add-new-question-set-button add-option-button  */
.add-new-question-button,
.add-new-question-set-button,
.add-new-question-group-button,
.add-option-button,
.delete-this-option,
.add-more-slots {
    font-family: var(--body-font);
    font-size: var(--field-text-size);
    font-weight: 700;
    border: 0;
    padding: 0;
    width: auto;
}

.add-new-question-button:hover,
.add-new-question-set-button:hover,
.add-new-question-group-button:hover,
.add-option-button:hover,
.delete-this-option:hover,
button.add-new-note:hover,
.add-more-slots:hover {
    /* background-color: var(--white); */
    color: var(--primary);
}



/* ========== <><><><> INPUT CLASSES <><><><> ==========  */
.new-question-wrapper {
    border: 1px solid var(--primary);
    border-radius: var(--border-radius);
    padding: calc(3*var(--spacer));
    padding-top: 0;
}

.available-options {
    list-style: none;
    margin: 0;
    padding: 0;
}

input,
textarea {
    width: var(--input-width);
    font-family: var(--body-font);
    border-radius: var(--border-radius);
    background-color: transparent;
    /* padding: calc(var(--input-padding-y) - 2.25px) var(--input-padding-x); */
    padding: var(--input-filled-padding-top) var(--input-filled-padding-x) var(--input-filled-padding-bottom) var(--input-filled-padding-x);
    /* intentionally overriding padding */
    font-size: var(--body-text-1-size);
    font-size: var(--field-text-size);
    /* intentionally overriding font size */
    line-height: var(--input-line-height);
    /* line-height: var(--input-filled-line-height); */
    /* intentionally overriding line height */
    color: var(--dark);
    border: 1px solid var(--light-primary);
    opacity: var(--opacity-mid);
    max-width: 100vw;
}

textarea:focus-within {
    outline: 0;
}

/* input placeholder colors */
::placeholder {
    font-size: var(--field-text-size);
    color: var(--input-placeholder-color);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--input-placeholder-color);
}

::-ms-input-placeholder {
    color: var(--input-placeholder-color);
}

input:focus {
    outline-offset: 0;
}

input:focus::placeholder {
    color: transparent;
}

div.form-input-and-toggle {
    position: relative;
}

div.floating-element {
    position: relative;
    margin-top: var(--floating-element-margin-top);
    margin-bottom: var(--floating-element-margin-bottom);
}

div.floating-element>.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.2s;
}

div.form-input-and-toggle>.toggle-password {
    position: absolute;
    right: 10px;
    top: 18px;
    transition: 0.2s;
}

label.floating-label {
    position: absolute;
    top: var(--floating-label-top);
    left: var(--floating-label-left);
    opacity: var(--floating-label-opacity);
    font-family: var(--body-font);
    font-size: var(--body-text-2-size);
    line-height: var(--floating-label-line-height);
    color: var(--primary);
    /* background-color: white; */
    background-color: var(--light);
    padding-left: var(--floating-label-padding-x);
    padding-right: var(--floating-label-padding-x);
}

/* input.floating-input => future code */

input.floating-input:not(:placeholder-shown),
input.filled {
    font-size: var(--field-text-size);
    font-weight: var(--semi-bold);
    line-height: var(--input-filled-line-height);
    letter-spacing: var(--input-filled-letter-spacing);
    color: var(--dark);
    padding: calc(2.7px + var(--input-filled-padding-top)) var(--input-filled-padding-x) calc(var(--input-filled-padding-bottom) - 2.6px) var(--input-filled-padding-x);
    background-color: transparent;
    outline: none;
    border: 1px solid var(--light-primary);
    border-radius: var(--border-radius);

    /* opacity: var(--opacity-mid); */
}

input.filled.error {
    color: var(--danger);
    border: 1px solid var(--danger);
}

input.floating-input:not(:placeholder-shown)~label.floating-label {
    opacity: 1;
}

input.form-input:not(:placeholder-shown),
textarea.form-textarea:not(:placeholder-shown) {
    opacity: 1;
    color: var(--dark);
}

/* div.floating-info => future code */

/* radio and check buttons */
input[type="checkbox"],
input[type="radio"] {
    width: auto !important;
}

/* accent radios */
.radio .custom-radio {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid var(--secondary);
    padding: 15px;
}

.radio label input:checked~.custom-radio {
    background-color: white;
    border: 2px solid var(--primary);
}

.radio .custom-radio:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid white;
}

.radio-red .custom-radio:after {
    background-color: var(--theme-red);
    border: 1px solid var(--theme-red);
}

.radio-green .custom-radio:after {
    background-color: var(--theme-green);
    border: 1px solid var(--theme-green);
}

.radio-blue .custom-radio:after {
    background-color: var(--theme-blue);
    border: 1px solid var(--theme-blue);
}

.radio-orange .custom-radio:after {
    background-color: var(--theme-orange);
    border: 1px solid var(--theme-orange);
}

.radio-purple .custom-radio:after {
    background-color: var(--theme-purple);
    border: 1px solid var(--theme-purple);
}

.radio input:checked~.custom-radio:after {
    display: block;
}


/* the following are sm because of the size of the circle */


/* sm custom-radio */
.radio .custom-radio-sm {
    padding: 10px;
    border: 2px solid var(--light);
    background-color: var(--white);
}

.radio .custom-radio-sm:after {
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2px solid var(--white);
}

.radio .custom-radio-sm-label {
    /* 24px because of the size of the circle on the left + gap of 12px */
    margin-left: calc(3* 12px);
}

/* colors */
.radio-success .custom-radio-sm {
    border-color: var(--success);
}

.radio-danger .custom-radio-sm {
    border-color: var(--danger);
}

.radio-primary .custom-radio-sm {
    border-color: var(--primary);
}

/* others like this */

.radio label input:checked~.custom-radio-sm {
    background-color: var(--white);
    border: 2px solid var(--primary);
}

/* colors */
.radio-success label input:checked~.custom-radio-sm {
    border-color: var(--success);
}

.radio-danger label input:checked~.custom-radio-sm {
    border-color: var(--danger);
}

.radio-primary label input:checked~.custom-radio-sm {
    border-color: var(--primary);
}

/* colors for small circle */
.radio-success label input:checked~.custom-radio-sm:after {
    background-color: var(--success);
}

.radio-danger label input:checked~.custom-radio-sm:after {
    background-color: var(--danger);
}

.radio-primary label input:checked~.custom-radio-sm:after {
    background-color: var(--primary);
}

/* candidate side theme based radios */
.radio-red .custom-radio-sm {
    border-color: var(--theme-red);
}

.radio-red label input:checked~.custom-radio-sm {
    border-color: var(--theme-red);
}

.radio-red label input:checked~.custom-radio-sm:after {
    background-color: var(--theme-red);
}

.radio-green .custom-radio-sm {
    border-color: var(--theme-green);
}

.radio-green label input:checked~.custom-radio-sm {
    border-color: var(--theme-green);
}

.radio-green label input:checked~.custom-radio-sm:after {
    background-color: var(--theme-green);
}

.radio-blue .custom-radio-sm {
    border-color: var(--theme-blue);
}

.radio-blue label input:checked~.custom-radio-sm {
    border-color: var(--theme-blue);
}

.radio-blue label input:checked~.custom-radio-sm:after {
    background-color: var(--theme-blue);
}

.radio-orange .custom-radio-sm {
    border-color: var(--theme-orange);
}

.radio-orange label input:checked~.custom-radio-sm {
    border-color: var(--theme-orange);
}

.radio-orange label input:checked~.custom-radio-sm:after {
    background-color: var(--theme-orange);
}

.radio-purple .custom-radio-sm {
    border-color: var(--theme-purple);
}

.radio-purple label input:checked~.custom-radio-sm {
    border-color: var(--theme-purple);
}

.radio-purple label input:checked~.custom-radio-sm:after {
    background-color: var(--theme-purple);
}

/* checkboxes */
.checkbox .custom-checkbox {
    position: absolute;
    top: 3px;
    left: 0;
    padding: 8px;
    border: 1px solid var(--primary);
    border-radius: calc(var(--border-radius));
    border-color: var(--primary);
    background-color: var(--light);
}

/* colors */


.checkbox-success .custom-checkbox {
    border-color: var(--success);
    background-color: var(--light);
}

.checkbox-danger .custom-checkbox {
    border-color: var(--danger);
    background-color: var(--light);
}

.checkbox-primary .custom-checkbox {
    border-color: var(--primary);
    background-color: var(--light);
}

/* candidate side checkboxes */
.checkbox-red .custom-checkbox {
    border-color: var(--theme-red);
    background-color: var(--light);
}

.checkbox-green .custom-checkbox {
    border-color: var(--theme-green);
    background-color: var(--light);
}

.checkbox-blue .custom-checkbox {
    border-color: var(--theme-blue);
    background-color: var(--light);
}

.checkbox-orange .custom-checkbox {
    border-color: var(--theme-orange);
    background-color: var(--light);
}

.checkbox-purple .custom-checkbox {
    border-color: var(--theme-purple);
    background-color: var(--light);
}

/* checked colors */
.checkbox-success label input:checked~.custom-checkbox {
    border-color: var(--success);
    background-color: var(--success);
}

.checkbox-danger label input:checked~.custom-checkbox {
    border-color: var(--danger);
    background-color: var(--danger);
}

.checkbox-primary label input:checked~.custom-checkbox {
    border-color: var(--primary);
    background-color: var(--primary);
}

/* candidate side checkbox colors */
.checkbox-red label input:checked~.custom-checkbox {
    border-color: var(--theme-red);
    background-color: var(--theme-red);
}

.checkbox-green label input:checked~.custom-checkbox {
    border-color: var(--theme-green);
    background-color: var(--theme-green);
}

.checkbox-blue label input:checked~.custom-checkbox {
    border-color: var(--theme-blue);
    background-color: var(--theme-blue);
}

.checkbox-orange label input:checked~.custom-checkbox {
    border-color: var(--theme-orange);
    background-color: var(--theme-orange);
}

.checkbox-purple label input:checked~.custom-checkbox {
    border-color: var(--theme-purple);
    background-color: var(--theme-purple);
}

/* label */
.checkbox .custom-checkbox-label {
    /* 20px because of the size of the checkbox on the left + gap of 4px */
    margin-left: calc(2* 12px);
}

.checkbox .custom-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox input:checked~.custom-checkbox:after {
    display: block;
}

.checkbox .custom-checkbox:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.more-info-btn {
    min-width: 0;
    margin-left: 40px;
}

.modal-launch-btn {
    min-width: 0;
    width: 100px;
    padding: 8px;
    font-size: 13px;
    line-height: normal;
}

/* live interview tracker */

/* .candidate-table {
    table-layout: fixed;
}

.candidate-table th:first-child {
    width: 35px;
} */

/* candidate simple forms: input and textarea */

.form-input:focus {
    outline: none;
}

.form-textarea:focus {
    outline: none;
}

/* candidate screens and buttons */
.screen.mcq-question h2.subheading-1.question {
    font-weight: normal;
}

.loading-screen-for-all,
.screen {
    width: 100%;
}

/* ========== <><><><> SELECT2 CLASSES <><><><> ==========  */

/* select2  */
.select2 {
    width: var(--input-width) !important;
    font-family: var(--body-font) !important;
    border-radius: var(--border-radius) !important;
    /* font-size: var(--field-text-size); */
    line-height: var(--input-filled-line-height);
    /* color: var(--input-placeholder-color); */
    color: var(--primary);
    /* font-weight: 600; */
    border: 1px solid var(--light-primary);
    height: auto !important;
    max-width: 100vw;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--input-placeholder-color);
    font-weight: var(--regular);
}

.select2-results {
    background-color: transparent !important;
}

.select2-results__option {
    background-color: var(--light) !important;
    padding: calc((2/3) * var(--spacer)) !important;
}

.select2-results__option--highlighted {
    background-color: var(--primary) !important;
}

.select2-results__options {
    /* border: 1px solid var(--primary) !important; */
    /* border-top: 0 !important; */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

.select2-dropdown {
    border: 1px solid var(--light-primary) !important;
    border-top: 0 !important;
    border-bottom-left-radius: var(--spacer) !important;
    border-bottom-right-radius: var(--spacer) !important;
    background-color: transparent !important;
    margin-top: -40px;
    /* padding-left: var(--spacer); */
    /* padding-right: var(--spacer); */
}

.select2-search--dropdown {
    padding: 0 !important;
    padding-left: var(--spacer) !important;
    padding-right: var(--spacer) !important;
    /* border-left: 1px solid var(--primary) !important; */
    /* border-top-left-radius: var(--border-radius); */
    /* border-top-right-radius: var(--border-radius); */
    /* border-right: 1px solid var(--primary) !important; */
    /* margin-bottom: calc(1.5 * var(--spacer)); */
    margin-bottom: 0 !important;
    background-color: var(--light);
}

.select2-search__field {
    background-color: var(--light);
    margin: 4px 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    color: var(--dark) !important;
}

.select2-selection {
    padding: var(--input-filled-padding-top) var(--input-filled-padding-x) var(--input-filled-padding-bottom) var(--input-filled-padding-x) !important;
    height: auto !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--border-radius) !important;
    opacity: var(--opacity-mid) !important;
}

.select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: var(--input-filled-padding-x);
    line-height: var(--input-filled-line-height) !important;
    font-size: var(--field-text-size) !important;
    color: var(--dark) !important;
    font-weight: var(--semi-bold);
}

.select2-selection__arrow {
    top: 0 !important;
    height: 100% !important;
    margin-right: calc(2 * var(--spacer)) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--primary) transparent transparent transparent !important;
    border-width: 8px 8px 0 8px !important;
}

.select2-container *:focus {
    outline: none !important;
}

.floating-select-label {
    position: absolute;
    top: var(--floating-label-top);
    left: var(--floating-label-left);
    opacity: var(--floating-label-opacity);
    /* transition: 0.3s; */
    font-family: var(--body-font);
    font-size: var(--body-text-2-size);
    line-height: var(--floating-label-line-height);
    color: var(--primary);
    /* background-color: white; */
    background-color: var(--light);
    padding-left: var(--floating-label-padding-x);
    padding-right: var(--floating-label-padding-x);
}

/* mini version */
.select2-mini {
    color: var(--primary);
    font-size: var(--body-text-2-size) !important;
    font-family: var(--body-font);
    font-weight: var(--semi-bold) !important;
    background-color: white !important;
    margin-top: 0 !important;
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* select2 ends  */

.form-control:focus {
    color: var(--primary) !important;
}

/* rich text editor */
.rich-text-editor {
    /* border: 1px solid var(--primary); */
    border-radius: var(--border-radius);
    background-color: white;
}

.rich-text-editor-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--primary);
    padding: calc(var(--spacer)/2) var(--spacer);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.rich-text-editor-header button {
    width: auto;
    margin-right: 1rem;
}

.rich-text-editor-header button:hover {
    background-color: white;
}

.rich-text-editor-body {
    padding: var(--spacer) calc(var(--spacer)/3) var(--spacer) calc(1.7 * var(--spacer));
    background-color: white;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    opacity: var(--opacity-mid);
}

.rich-text-editor-textarea {
    resize: none;
    border-radius: 0;
    border: 0;
    overflow: hidden;
    outline: 0px !important;
    -webkit-appearance: none;
    box-shadow: none !important;
    padding: 0;
    padding-right: calc(2 * var(--spacer));
    height: var(--rich-text-editor-height);
}

.rich-text-editor-textarea:focus {
    border: 0;
    border-color: #fff !important;
}


/* shows RTE on candidate side */
.show-rich-textarea-content {
    font: 18px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

/* We removed .floating-element-sibling from styling */

/* .new-question-wrapper .floating-element-sibling, .new-question-wrapper .floating-element{
    margin-top: 5px !important;
} */


.new-question-wrapper .floating-element {
    margin-top: 5px !important;
}

/* upload images */
.upload-button-wrapper,
.uploaded-image-wrapper {
    min-width: var(--upload-image-width);
    width: var(--upload-image-width);
    height: var(--upload-image-height);
    border-radius: var(--border-radius);
    background-color: var(--light);
}

.uploaded-image-wrapper {
    /* background-color: white; */
    /* border: 1px solid var(--primary); */
}

.uploaded-image-wrapper>img {
    border-radius: var(--border-radius);
}

.upload-button-wrapper-lg,
.uploaded-image-wrapper-lg {
    width: calc(2*var(--upload-image-width));
    height: calc(2*var(--upload-image-height));
}

.upload-button-wrapper-full-width,
.uploaded-image-wrapper-full-width {
    width: 100%;
}


/* candidate side : upload videos / documents */
.upload-button-wrapper.candidate-side {
    height: var(--upload-anything-height);
}

.uploaded-anything-wrapper {
    min-width: var(--upload-anything-width);
    width: var(--upload-anything-width);
    height: var(--upload-anything-height);
    border-radius: var(--border-radius);
    background-color: var(--white);
    border: 1px solid var(--primary);
}

.uploaded-anything-wrapper>img {
    border-radius: var(--border-radius);
}

.upload-button-wrapper-lg,
.uploaded-anything-wrapper-lg {
    width: calc(2*var(--upload-anything-width));
    height: var(--upload-anything-height);
}

.upload-button-wrapper-full-width,
.uploaded-anything-wrapper-full-width {
    width: 100%;
}


/* TOGGLER CLASSES: NEED OF MIN VERSION */

.switch {
    position: relative;

}

.switch input {
    display: none;
}

.on {
    display: none;
}

.on,
.off {
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: var(--heading-font);
}

input:checked+.slider .on {
    display: block;
}

input:checked+.slider .off {
    display: none;
}

.slider.round:before {
    border-radius: 50%;
}

.sliderText {
    width: 3rem;
    /* height: 28px; */
    font-family: var(--heading-font);
    font-size: var(--body-text-1-size);
    font-weight: var(--medium);
    line-height: 1.56;
    text-align: left;
    color: white;
}

.OnsliderText {
    margin-left: -10px;
}

.OffsliderText {
    margin-right: -10px;
}

.slider {
    position: absolute;
    cursor: pointer;
    width: 50% !important;
    height: 25px !important;
    background-color: var(--danger);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px !important;
    width: 22px !important;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--success);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--success);
}

input:checked+.slider:before {
    -webkit-transform: translateX(80px);
    -ms-transform: translateX(80px);
    transform: translateX(80px);
}

.slider.round {
    border-radius: 34px;
    width: 110px !important;
    height: 28px !important;
}

/* slider2: mini toggler */

.slider2 {
    position: relative;
    display: block;
    cursor: pointer;
    background-color: var(--secondary);
    transition: 0.4s;
    width: 10px !important;
    height: 17px !important;
}

.slider2:before {
    content: "";
    position: absolute;
    height: 22px !important;
    width: 22px !important;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    transition: 0.2s;
    top: 50%;
    left: 0 !important;
    transform: translate(0, -50%);
}

input:checked+.slider2 {
    background-color: var(--success);
}

input:checked+.slider2:before {
    transform: translate(110%, -50%);
}

.slider2.round {
    border-radius: 34px;
    width: 46px !important;
    height: 16px !important;
}

.slider2.round::before {
    border-radius: 50%;
}

/* ========== <><><><> CLASSES END <><><><> ==========  */
/* ==================================================== */
/* ==================================================== */
/* ==================================================== */

/* ========== <><><><> PAGES START <><><><> ==========  */
/* ==================================================== */
/* ==================================================== */
/* ==================================================== */


/* ========== <><><><> PAGE WRAPPERS <><><><> ==========  */


/* Header Wrapper */
.page-header-wrapper {
    display: flex;
    justify-content: space-between;
    color: var(--primary);
    padding: 2rem calc(4*var(--spacer));
}

@media (max-width: 767.99px) {
    .page-header-wrapper {
        margin-top: 68px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}


.page-header-wrapper .dropdown-toggle::after {
    border-top-width: 12px !important;
    border-bottom-width: 0px !important;
    border-right-width: 6px !important;
    border-left-width: 6px !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.dropdown-menu,
.select2-results__options {
    /* border-radius: var(--border-radius); */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.dropleft .dropdown-toggle::before {
    border: 0;
}

.dropleft .dropdown-menu {
    width: 550px;
    left: 50px !important;
    top: 50px !important;
    border-radius: var(--border-radius);
}

.dropleft .dropdown-item {
    padding-left: 0;
    padding-right: 36px;
}

.dropleft .dropdown-item svg {
    stroke: var(--dark);
    fill: var(--dark);
    color: var(--dark);
}


.dropleft .unread-notification {
    display: block;
    text-align: center;
    padding: 0 14px 0 16px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--primary);
    cursor: pointer;
    color: white;
}

.dropdown-item:hover p {
    color: white;
}

.dropdown-item:hover svg {
    stroke: white;
    fill: white;
    color: white;
}


.page-header-image-wrapper svg {
    width: 30px;
    height: 30px;
    color: var(--primary);
    fill: var(--primary);
}

.logout-topbar:hover {
    background-color: var(--primary);
    color: white;
}

/* Body Wrapper */
.body-wrapper {
    /* margin-top: 0.5rem; */
    /* padding: 0.625rem calc(3*var(--spacer)); */
}

/* wrappers media queries: mobile */
@media screen and (max-width: 767.98px) {

    .body-wrapper {
        margin-top: 0.5rem;
    }
}

/* wrappers media queries: iPad */


/* wrappers media queries: desktop */

/* special case for the pages with tabs: 992 to 1200 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .page-tabs-wrapper .paddingx-m4 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* help center page */

.help-category {
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    font-family: var(--body-font);
    font-size: var(--body-text-2-size);
    /* font-weight: var(--regular) !important; */
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    padding: 8px 18px;
}

/* 
.selected-help-category {
    font-size: var(--subheading-3-size);
    font-weight: var(--semi-bold) !important;
    background-color: var(--primary);
}

.selected-help-category p {
    color: var(--white);
} */

.support-queries {
    display: none;
}

@media (min-width: 768px) {
    .help-category {
        background-color: var(--light);
        font-family: var(--body-font);
        font-size: var(--body-text-2-size);
        /* font-weight: var(--regular) !important; */
        border-radius: var(--border-radius);
        padding: calc(var(--spacer)/2) calc(var(--spacer));
        margin-bottom: 0.5rem;
    }

    .help-category p {
        color: var(--secondary);
    }

    .selected-help-category {
        font-size: var(--subheading-3-size);
        font-weight: var(--semi-bold) !important;
        background-color: var(--white);
    }

    .selected-help-category p {
        color: var(--dark);
    }

    .support-queries {
        display: block;
    }

}

/* .js-job-description  */
.js-job-description {
    max-height: 5rem;
    overflow: hidden;
    text-align: justify;
}

.read-more,
.read-less {
    cursor: pointer;
    color: var(--primary);
}

button#assign_to::after,
button#promote_to::after {
    color: #4A47B9;
}


/* ========== <><><><> TABS <><><><> ==========  */
/* standard tab, completed tab */
.nav-tabs.page-tabs .nav-link {
    border: 0 !important;
    border-bottom: 5px solid var(--primary) !important;
    /* padding: calc(1.7*var(--spacer)) calc(3*var(--spacer)) !important; */
    padding: calc(1.7*var(--spacer)) 0 !important;
    object-fit: contain !important;
    font-family: var(--body-font) !important;
    font-size: var(--field-text-size) !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
}

.nav-tabs.page-tabs .nav-link img {
    width: 20px !important;
    height: 20px !important;
}

/* active tab */

.nav-tabs.page-tabs .nav-item.active a.nav-link,
.nav-tabs.page-tabs .nav-link.active {
    border: 0 !important;
    border-bottom: 5px solid var(--primary) !important;
    color: var(--primary) !important;
    font-weight: var(--semi-bold);
}

/* inactive tab */

.nav-tabs.page-tabs .nav-item.inactive a.nav-link {
    border-bottom: 5px solid var(--light) !important;
    color: var(--secondary) !important;
}

/* mini tabs */
#page_mini_tabs_dropdown {
    width: 100%;
    max-width: 275px;
    position: absolute;
    top: 150px;
    right: 65px;
    background-color: white;
    z-index: 1000;
    border: 1px solid var(--primary);
    border-radius: var(--border-radius);
}

/* new tabs  */

ul.tabs {
    font-family: var(--heading-font);
    border-bottom: 1px solid #4A47B9;
    list-style: none;
    margin-bottom: 36px;
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0;
}

ul.tabs li {
    margin: auto;
    border-bottom: 4px solid transparent;
    padding: 0 16px;
}

ul.tabs li a {
    color: var(--dark);
    display: block;
    padding: 16px 0;
}

ul.tabs li.active {
    border-bottom: 4px solid #4A47B9;
}

ul.tabs li.active a {
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

/* ========== <><><><> LOGIN PAGE <><><><> ==========  */

.sidebar-logo img,
.sidebar-logo-sm img {
    height: var(--vinterview-logo-height);
}

.notable-companies img {
    max-width: 33%;
}

.login-sidebar-width {
    width: var(--login-sidebar-width);
}

.login-form-width {
    width: var(--login-form-width);
    /* margin-top: calc(9 * var(--spacer)); */
}

.custom-select2-dropdown .select2-results__options,
.custom-select2-dropdown .select2-results__option:not(:hover):not(.select2-results__option--highlighted),
.custom-select2-dropdown .select2-search--dropdown {
    background-color: var(--white) !important;
}

/* input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 50px var(--webkit-autofill-color) inset !important;
    -webkit-text-fill-color: var(--dark) !important;
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px var(--webkit-autofill-color) inset !important;
    -webkit-text-fill-color: var(--dark) !important;
}

/* candidate side autofill */
.form-element input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px var(--light) inset !important;
    box-shadow: 0 0 0 50px var(--light) inset !important;
    -webkit-text-fill-color: var(--dark) !important;
}

.form-element input:-webkit-autofill:focus {
    /* -webkit-box-shadow: your box-shadow,0 0 0 50px white inset; */
    -webkit-box-shadow: 0 0 0 50px var(--light) inset !important;
    -webkit-text-fill-color: var(--dark) !important;
}

/* option cards  */

.option-card:hover {
    background-color: var(--filled-option-card-hover-color);
    border-color: var(--filled-option-card-button-hover-color);
}

/* .option-card:hover button {
    background-color: var(--filled-option-card-button-hover-color);
    border-color: var(--filled-option-card-button-hover-color);
} */

.option-card:hover p.select {
    color: var(--filled-option-card-button-hover-color);
}

/* page-instruction-in-yellow */
.page-instruction-in-yellow {
    display: flex;
    align-items: center;
    background-color: var(--page-instruction-color);
    margin: 0 calc(-4*var(--spacer));
    padding: calc(2*var(--spacer)) calc(4*var(--spacer));
}

/* drag and drop  */
.chooseFrom,
.selectedThings {
    width: 100%;
    min-height: 70px;
    list-style-type: none;
}

.chooseFrom li,
.selectedThings li {
    width: 100%;
    border: 1px solid #DDDDDD;
    border-radius: var(--border-radius);
    background-color: var(--white);
}

/* custom calendar */

.ui-widget.ui-widget-content {
    border: 0;
}

.ui-datepicker {
    padding-left: 0;
    padding-right: 0;
}


.custom-calendar .ui-widget {
    font-size: 18px;
    width: 100%;
}

.custom-calendar .ui-widget.custom-calendar .ui-widget-content {
    border: 0;
}

.custom-calendar .ui-widget-header {
    background-color: transparent;
    border: 0;
    margin: 0 auto;
    font-size: var(--heading-size);
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .custom-calendar .ui-widget-header {
        width: 50%;
    }



}

.custom-calendar .ui-state-default {
    width: 250px;
    height: 45px;
    font-size: 18px;
    font-weight: 500 !important;
    color: black !important;
    text-align: center !important;
    margin-bottom: 0;
    display: table-cell !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-radius: 4px;
    background-color: white !important;
}

.custom-calendar .ui-state-default.ui-state-active {
    background-color: var(--filled-option-card-hover-color) !important;
    border: 3px solid var(--filled-option-card-button-hover-color) !important;
    font-weight: 600 !important;
    color: var(--filled-option-card-button-hover-color) !important;
}

.custom-calendar .ui-datepicker-unselectable.ui-state-disabled {
    opacity: 1;
}

.custom-calendar .ui-datepicker-unselectable.ui-state-disabled span {
    background: rgba(130, 130, 130, 0.2) !important;
    color: rgba(0, 0, 0, 0.4) !important;
}

.custom-calendar .ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled {
    background-color: white;
}

.custom-calendar table.ui-datepicker-calendar {
    border-collapse: separate;
}

.custom-calendar .ui-datepicker-calendar td {
    padding: 3px 5px;
}

/* custom calendar ends */

/* custom calendar multiselect */
.custom-calendar-multiselect .ui-widget {
    font-size: 18px;
    width: 100%;
}

.custom-calendar-multiselect .ui-widget.custom-calendar-multiselect .ui-widget-content {
    border: 0;
}

.custom-calendar-multiselect .ui-widget-header {
    background-color: transparent;
    border: 0;
    margin: 0 auto;
    font-size: var(--heading-size);
    font-weight: 700;
    color: var(--dark);
}

@media screen and (min-width: 768px) {
    .custom-calendar-multiselect .ui-widget-header {
        width: 50%;
    }
}

.custom-calendar-multiselect .ui-state-default {
    width: 250px;
    height: 45px;
    font-size: 18px;
    font-weight: 500 !important;
    color: black !important;
    text-align: center !important;
    margin-bottom: 0;
    display: table-cell !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-radius: 4px;
    background-color: white !important;
}

.custom-calendar-multiselect .ui-state-busy>.ui-state-default {
    background-color: var(--filled-option-card-hover-color) !important;
    border: 3px solid var(--filled-option-card-button-hover-color) !important;
    font-weight: 600 !important;
    color: var(--filled-option-card-button-hover-color) !important;
}

.custom-calendar-multiselect .ui-datepicker-unselectable.ui-state-disabled {
    opacity: 1;
}

.custom-calendar-multiselect .ui-datepicker-unselectable.ui-state-disabled span {
    background: rgba(130, 130, 130, 0.2) !important;
    color: rgba(0, 0, 0, 0.4) !important;
}

.custom-calendar-multiselect .ui-datepicker-other-month.ui-datepicker-unselectable.ui-state-disabled {
    background-color: transparent;
}

.custom-calendar-multiselect table.ui-datepicker-calendar {
    border-collapse: separate;
}

.custom-calendar-multiselect .ui-datepicker-calendar td {
    padding: 3px 5px;
}

.custom-calendar-multiselect-table td,
.custom-calendar-multiselect-table>thead>tr>th {
    border: 0;
}

.custom-calendar-multiselect-table input[type="time"] {
    width: auto;
    padding: 0;
}



.ui-datepicker-calendar td.ui-datepicker-week-end:first-child {
    padding-left: 0;
}

.ui-datepicker-calendar td.ui-datepicker-week-end:last-child {
    padding-right: 0;
}

/* custom calendar multiselect ends  */

/* =======  MEDIA QUERIES: Mobile View  ===============  */

@media screen and (max-width: 767.98px) {
    body {
        font-size: 18px;
    }

    :root {
        /* ==================================================== */
        /* ========== <><><><> FONT SIZES <><><><> ============  */
        /* ==================================================== */
        --heading-size: 20px;
        --subheading-1-size: 18px;
        --subheading-2-size: 16px;
        --subheading-3-size: 14px;
        --field-text-size: 16px;
        --body-text-1-size: 16px;
        --body-text-2-size: 14px;
        --body-text-3-size: 12px;
        --spacer: 5px;
        --login-form-width: 100%;
        --otp-form-input-width: 43px;
        --otp-form-input-height: 50px;
        --otp-text-size: 24px;
        --modal-dialog-size: 95vw !important;
    }

    .page-tabs-wrapper .paddingx-m4,
    .page-tabs-wrapper .paddingx-m2,
    .page-tabs-wrapper .paddingx-m3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* .select2-search__field {
        border: 1px solid var(--primary) !important;
    } */

    .error-message-size {
        font-size: 30px !important;
    }
}

/* ===========  MEDIA QUERIES: iPad View  =============  */

@media (min-width: 768px) and (max-width: 1199.98px) {

    /* future code */
    :root {
        /* ==================================================== */
        /* ========== <><><><> FONT SIZES <><><><> ============  */
        /* ==================================================== */
        --heading-size: 24px;
        --subheading-1-size: 20px;
        --subheading-2-size: 18px;
        --subheading-3-size: 16px;
        --field-text-size: 16px;
        --body-text-1-size: 16px;
        --body-text-2-size: 14px;
        --body-text-3-size: 12px;
        --otp-text-size: 34px;
        --spacer: 8px;
        --login-form-width: 70%;
        --otp-form-input-width: 56px;
        --otp-form-input-height: 65px;
    }

    .page-tabs-wrapper .paddingx-m4,
    .page-tabs-wrapper .paddingx-m2,
    .page-tabs-wrapper .paddingx-m3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* .select2-search__field {
        border: 1px solid var(--primary) !important;
    } */


}

@media (min-width: 992px) {
    .position-lg-absolute {
        position: absolute;
    }
}

/* data tables */
table.dataTable.no-footer {
    border-bottom: 0;
}

.dataTables_info {
    display: none;
}

/* ===========  Scrollbars Start  =============  */

/* scrollbar  */
/* universal scrollbar styling */
::-webkit-scrollbar {
    width: 12px !important;
    height: 100% !important;
}

::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
    border-radius: 20px !important;
}

::-webkit-scrollbar-track {
    /* background: rgba(155, 153, 240, 0.5) !important; */
    background-color: var(--white) !important;
}

/* overriding the universal styling for different elements */


/* scrollbar for RTE */
.rich-text-editor-textarea::-webkit-scrollbar {
    width: 4px !important;
}

.rich-text-editor-textarea::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.rich-text-editor-textarea::-webkit-scrollbar-track {
    background: rgba(155, 153, 240, 0.5) !important;
    border-radius: 20px;
}

/* scrollbar for drag and drop cards */
.drag-and-drop-cards::-webkit-scrollbar {
    width: 4px !important;
}

.drag-and-drop-cards::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.drag-and-drop-cards::-webkit-scrollbar-track {
    background: rgba(155, 153, 240, 0.5) !important;
    border-radius: 20px;
}

/* scrollbar for choose from question set modal table */
.question-set-modal-table::-webkit-scrollbar {
    width: 4px !important;
}

.question-set-modal-table::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.question-set-modal-table::-webkit-scrollbar-track {
    background: rgba(155, 153, 240, 0.5) !important;
    border-radius: 20px;
}

/* scrollbar for choose pipeline for job */
.interview-pipelines::-webkit-scrollbar {
    width: 4px !important;
}

.interview-pipelines::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.interview-pipelines::-webkit-scrollbar-track {
    background: rgba(155, 153, 240, 0.5) !important;
    border-radius: 20px;
}

/* scrollbar for questions boxes on interview page */
.questions-list::-webkit-scrollbar {
    width: 4px !important;
}

.questions-list::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.questions-list::-webkit-scrollbar-track {
    background: rgba(155, 153, 240, 0.5) !important;
    border-radius: 20px;
}

/* scrollbar for recent activities and team-notes on candidate profile page */
.activities::-webkit-scrollbar,
.team-notes::-webkit-scrollbar,
.emailLogs::-webkit-scrollbar {
    width: 9px !important;
}

.activities::-webkit-scrollbar-thumb,
.team-notes::-webkit-scrollbar-thumb,
.emailLogs::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

.activities::-webkit-scrollbar-track,
.team-notes::-webkit-scrollbar-track,
.emailLogs::-webkit-scrollbar-track {
    background: rgba(155, 153, 240, 0.5) !important;
    border-radius: 20px;
}


/* ============  Scrollbars End  ===================  */

.shadow-cards {
    transition: 0.25s;
}

.shadow-cards:hover {
    cursor: pointer;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 0 10px 1px rgba(0, 0, 0, 0.19);
}

/* .selected-option-border {
    border-bottom: 2px solid var(--primary);
    opacity: 1;
} */

/* .unselected {
    color: #BEBEBE;
    font-family: var(--body-font);
} */

/* .selected {
    color: var(--primary);
    font-family: var(--body-font);
} */

.eligible-interviews .selected,
.eligible-interviews .unselected {
    padding: 0 10px 10px 10px;
    color: var(--dark);
    border-bottom: 4px solid var(--selected-theme-color);
}

.eligible-interviews .unselected {
    border-color: transparent;
}

/* :root.theme-based => for admin light mode */
/* :root.theme-based.dark => for admin dark mode */
:root.theme-based.dark {
    --white: #252639;
    --dark: #fff;
    --light: #252639;
    --input-placeholder-color: #fff;
    --light-blue: #1c1d28;
    --page-instruction-color: var(--light-primary);
}

:root.theme-based.dark .page-instruction-in-yellow.bg-no-change {
    --page-instruction-color: #FFFDD0;
    --dark: #333333;
}

:root.theme-based.dark .footer {
    --dark: #252639;
}

:root.theme-based.dark body,
:root.theme-based.dark .text-dark {
    --dark: #fff;
}

:root.theme-based.dark input:autofill,
:root.theme-based.dark input:autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #333 inset !important;
}

:root.theme-based.dark .sidebar {
    --white: #313347;
}

:root.theme-based.dark .sidebar-toggler-icon {
    --primary: #fff;
}

:root.theme-based.dark .sidebar svg {
    --dark: #fff;
}

:root.theme-based.dark .vinterview-logo,
:root.theme-based.dark .vinterview-logo-sm {
    --primary: #fff;
}

/* .page-header-wrapper h2 {
    --primary: #fff;
} */

:root.theme-based.dark .page-header-image-wrapper svg {
    --primary: #fff;
}

:root.theme-based.dark .bg-white,
:root.theme-based.dark .input-bg-white {
    --white: #313347;
}

:root.theme-based.dark .login-body button:not(:hover):not(:focus),
:root.theme-based.dark .select-organization button:not(:hover):not(:focus),
:root.theme-based.dark .body-wrapper button:not(:hover):not(:focus),
:root.theme-based.dark .admin-select-organization button:not(:hover):not(:focus) {
    --primary: #fff !important;
    border-color: var(--light-primary);
}

:root.theme-based.dark .dropdown-item,
:root.theme-based.dark .dropdown-item:hover {
    color: white;
}

:root.theme-based.dark .floating-label,
:root.theme-based.dark .floating-select-label {
    color: white !important;
}

:root.theme-based.dark .select2-results {
    background-color: #313347 !important;
}

:root.theme-based.dark #assign_to,
:root.theme-based.dark #promote_to {
    /* border-color: #9B99F0 !important; */
}

:root.theme-based.dark .checkbox-primary .custom-checkbox {
    --primary: #9B99F0;
}

:root.theme-based.dark .interviews {
    --dark: #333333;
}

:root.theme-based.dark .rich-text-editor-textarea {
    color: #333333;
}

:root.theme-based.dark .modal-header {
    background-color: #313347;
}

:root.theme-based.dark a {
    color: white;
}

:root.theme-based.dark .landing-navbar {
    --white: #252639;
}

:root.theme-based.dark .login-sidebar-width {
    --primary: #252639;
}

:root.theme-based.dark #while-form-is-submitted .modal-header {
    background-color: transparent;
}

:root.theme-based.dark .card {
    --white: #313347;
    border-radius: 12px;
}

:root.theme-based.dark .text-primary {
    --primary: #fff;
}

:root.theme-based.dark .select2-selection__choice {
    --white: #313347;
}

:root.theme-based.dark .custom-select2-dropdown .select2-results__options,
:root.theme-based.dark .custom-select2-dropdown .select2-results__option:not(:hover):not(.select2-results__option--highlighted),
:root.theme-based.dark .custom-select2-dropdown .select2-search--dropdown {
    --white: #313347;
}

:root.theme-based.dark .uploadButton:hover {
    --white: #313347;
}

:root.theme-based.dark table {
    --light: #9B99F0;
}

:root.theme-based.dark footer{
    width: 86vw; 
    margin-left: 14vw !important;
    padding-left: 20px; 
    /* background-image: linear-gradient(to left,rgba(10, 11, 14, 0) 5%, rgb(10, 11, 14,1)); */
    background-image: linear-gradient(to right, #1c1d27, #21222f, #262837, #2c2d3f, #313347);
}

:root.theme-based.dark .dataTables_info {
    display: none;
}

:root.theme-based.dark .dropdown-menu {
    --white: #313347;
    --card-shadow: none;
}

:root.theme-based.dark #sort-old-button,
:root.theme-based.dark #sort-new-button {
    --primary: #4A47B9 !important;
}

:root.theme-based.dark .uploaded-anything-wrapper {
    --white: #252639;
}

:root.theme-based.dark .meeting-confirmed-card {
    --primary: #fff;
}

:root.theme-based.dark .language-card input:checked+.radio-btn {
    --dark: #333333;
}

:root.theme-based.dark .help-category {
    --white: #313347;
}

/* checkbox for dark mode */
:root.theme-based.dark .checkbox-primary .custom-checkbox {
    background-color: transparent;
}

:root.theme-based.dark .checkbox input:checked~.custom-checkbox {
    background-color: var(--primary);
}

:root.theme-based.dark .option-card:hover {
    --filled-option-card-hover-color: #313347;
}

/* dark mode settings */
/* :root:not(.theme-based) means either the candidate side or the landing pages  */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-based) {
        --white: #252639;
        --dark: #fff;
        --light: #252639;
        --input-placeholder-color: #fff;
        /* --page-instruction-color: #313347; */
    }

    :root:not(.theme-based) .page-instruction-in-yellow {
        --dark: #333333;
    }

    :root:not(.theme-based) .footer {
        --dark: #252639;
    }

    :root:not(.theme-based) body,
    :root:not(.theme-based) .text-dark {
        --dark: #fff;
    }

    /* :root:not(.theme-based) input:autofill,
    :root:not(.theme-based) input:autofill:focus {
        -webkit-box-shadow: 0 0 0 50px #333 inset !important;
    } */

    :root:not(.theme-based) .sidebar {
        --white: #313347;
    }

    :root:not(.theme-based) .sidebar-toggler-icon {
        --primary: #fff;
    }

    :root:not(.theme-based) .sidebar svg {
        --dark: #fff;
    }

    :root:not(.theme-based) .vinterview-logo,
    :root:not(.theme-based) .vinterview-logo-sm {
        --primary: #fff;
    }

    :root:not(.theme-based) .page-header-image-wrapper svg {
        --primary: #fff;
    }

    :root:not(.theme-based) .bg-white,
    :root:not(.theme-based) .input-bg-white {
        --white: #313347;
    }

    :root:not(.theme-based) .login-body button:not(:hover):not(:focus),
    :root:not(.theme-based) .select-organization button:not(:hover):not(:focus),
    :root:not(.theme-based) .body-wrapper button:not(:hover):not(:focus),
    :root:not(.theme-based) .admin-select-organization button:not(:hover):not(:focus) {
        --primary: #fff !important;
        border-color: var(--light-primary);
    }

    :root:not(.theme-based) .dropdown-item,
    :root:not(.theme-based) .dropdown-item:hover {
        color: white;
    }

    :root:not(.theme-based) .floating-label,
    :root:not(.theme-based) .floating-select-label {
        color: white !important;
    }

    :root:not(.theme-based) .select2-results {
        background-color: #313347 !important;
    }

    :root:not(.theme-based) #assign_to,
    :root:not(.theme-based) #promote_to {
        border-color: #9B99F0 !important;
    }

    :root:not(.theme-based) .checkbox-primary .custom-checkbox {
        --primary: #9B99F0;
    }

    :root:not(.theme-based) .interviews {
        --dark: #333333;
    }

    :root:not(.theme-based) .rich-text-editor-textarea {
        color: #333333;
    }

    :root:not(.theme-based) .modal-header {
        background-color: #313347;
    }

    :root:not(.theme-based) a {
        color: white;
    }

    :root:not(.theme-based) .landing-navbar {
        --white: #252639;
    }

    :root:not(.theme-based) .login-sidebar-width {
        --primary: #252639;
    }

    :root:not(.theme-based) #while-form-is-submitted .modal-header {
        background-color: transparent;
    }

    :root:not(.theme-based) .card {
        --white: #313347;
        border-radius: 12px;
    }

    :root:not(.theme-based) .text-primary {
        --primary: #fff;
    }

    :root:not(.theme-based) .select2-selection__choice {
        --white: #313347;
    }

    :root:not(.theme-based) .uploadButton:hover {
        --white: #313347;
    }

    :root:not(.theme-based) table {
        --light: #9B99F0;
    }

    :root:not(.theme-based) .dataTables_info {
        display: none;
    }


    :root:not(.theme-based) .dropdown-menu {
        --white: #313347;
        --card-shadow: none;
    }

    :root:not(.theme-based) #sort-old-button,
    :root:not(.theme-based) #sort-new-button {
        --primary: #4A47B9 !important;
    }

    :root:not(.theme-based) .uploaded-anything-wrapper {
        --white: #252639;
    }

    :root:not(.theme-based) .meeting-confirmed-card {
        --primary: #fff;
    }

    :root:not(.theme-based) .language-card input:checked+.radio-btn {
        --dark: #333333;
    }

    :root:not(.theme-based) .help-category {
        --white: #313347;
    }
}