@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap");

*,
body {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    color: var(--secondary-color);
    scroll-behavior: smooth;
}

body {
    visibility: hidden;
}

.modal {
    --bs-modal-width: 614px;
}

@media screen and (min-width: 768px) {
    .modal {
        width: 100%;
    }
}

.modal-body {
    max-height: 550px;
}

@media screen and (min-width: 500px) {
    .modal-body {
        max-height: 485px !important;
    }
}


.my-20 {
    margin-block: 20px;
}

@media screen and (min-width: 992px) {
    .navbar-expand-lg .offcanvas {
        visibility: unset !important;
    }
}

.main-heading {
    font-size: var(--main-heading);
}

:focus-visible {
    outline: 0;
}

.cursor {
    cursor: pointer;
}

.top-80 {
    top: 80px;
}

/* IOS device alignment */
input[type='date'],
input[type='date']::-webkit-date-and-time-value {
    text-align: left;
}

/* input[type='date'],
input[type='date']::-webkit-date-and-time-value {
  -moz-line-height: 24px;
} */

/* IOS device alignment */

/* Scrollbar */
/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--white-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scroll-indicator);
    border-radius: 20px;
}

/* Scrollbar */

/* Selection */
::selection {
    color: var(--white-color);
    background: var(--primary-color);
}
/* Selection */

.navbar-toggler-icon {
    background-image: url('../../images/icons/ic-burger-menu.svg');
    background-size: contain;
}

.z-9 {
    z-index: 9;
}

.modal-footer {
    border-top: 1px solid var(--borderTop);
}

.accordion-button:focus {
    border: 0;
    box-shadow: none;
}

/* Edit button  */

.icon-btn {
    width: 40px;
    height: 40px;
}

    .icon-btn:hover {
        background-color: var(--light-bg-color);
    }

.lh-30 {
    line-height: 30px;
}

/* Modal dialog widths */
.max-w-430 {
    max-width: 430px;
}

.w-13 {
    width: 13%;
}

.dropdown-item:active {
    color: var(--secondary-color);
}

/* Header css */
header {
    height: 80px;
}

    /* Logo height and width */
    header a.navbar-brand img {
        height: 40px;
        max-width: 281px;
    }
    /* Logo height and width */

    header .user-profile {
        width: 40px;
        height: 40px;
        background-color: var(--lighter-primary-color);
        cursor: pointer;
    }

    header form .search-bar {
        height: 40px;
        width: 176px;
        /* background-color: var(--lighter-primary-color); */
        /* background: rgba(255,255,255,.95); */
        background-color: var(--light-bg-color);
        border: 1px solid var(--lighter-primary-color);
        padding-left: 34px;
    }

    header .search-bar:hover,
    header .search-bar:focus {
        border: 1px solid var(--search-bar-border-hover);
    }

    header .search-bar:focus {
        caret-color: var(--primary-color);
    }

    header .search-bar-img {
        stroke: var(--secondary-color);
    }

    header form:hover .search-bar-img {
        stroke: var(--primary-color);
    }

.search-dropdown-text {
    color: var(--search-dropdown-color);
}

.search-dropdown .dropdown-menu {
    width: 400px !important;
}

.search-dropdown .dropdown-item {
    width: 100% !important;
}

.search-dropdown .dropdown-heading:hover {
    background-color: transparent;
    border-top: 1px solid transparent;
    color: var(--search-dropdown-color);
}

header .search-dropdown .dropdown-menu[data-bs-popper] {
    right: 15px !important;
}

.search-dropdown-img {
    stroke: var(--search-dropdown-img);
}

.search-dropdown .dropdown-item:hover .search-dropdown-img {
    stroke: var(--secondary-color);
}

/* Menu active, non-active menu icon classes */
header .navbar-nav li a {
    display: flex;
    align-items: center;
    padding: 8px 15px !important;
    color: var(--paragraph-text);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: var(--letter-spacing2);
}

header .navbar-nav li.nav-item {
    margin: 0 3px;
}

header .navbar-nav li:hover a {
    background-color: var(--nav-btn-bg) !important;
}

header .navbar-nav li a .filled-icon,
header .navbar-nav .nav-item.active .outlined-icon {
    display: none;
}

header .navbar-nav li.nav-item.active a .filled-icon {
    display: inline-block;
}

header .navbar-nav li.nav-item.active a p {
    color: var(--primary-color);
}

header .navbar-nav .nav-item a:active,
header .navbar-nav .nav-item.active {
    background-color: var(--light-bg-color);
    border-radius: 4px;
}

@media screen and (max-width: 992px) {
    header .navbar-nav li:hover a {
        background-color: var(--lighter-primary-color) !important;
    }

        header .navbar-nav li:hover a .filled-icon {
            display: inline-block;
        }

        header .navbar-nav li:hover a .outlined-icon {
            display: none;
        }
}

header .navbar-nav li a img {
    width: 24px;
    height: 24px;
}

header .navbar-nav li:hover a {
    background-color: var(--nav-btn-bg);
}

header form .ic-search {
    top: 8px;
    left: 10px;
}

.notifiaction {
    width: 8px;
    height: 8px;
    right: 12px;
    top: 9px;
    background-color: var(--notification-color);
}

.notification-visualisation {
    background: var(--lighter-primary-color);
    width: 44px;
    height: 40px;
    border-radius: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-dropdown:hover .primary-down-arrow-after {
    display: block !important;
}

.notification-dropdown:hover .primary-down-arrow-before {
    display: none !important;
}

.order-2 {
    order: 2;
}

header .dropdown-menu[data-bs-popper] {
    right: 0;
    left: unset;
}

#applications header nav.navbar .dropdown .dropdown-menu.show {
    left: -122px !important;
}

#applications header nav.navbar .search-dropdown .dropdown-menu.show {
    left: -225px !important;
}

/* Profile Dropdown */
.box-shadow {
    box-shadow: 0px 4px 32px 0px #2929290d;
}

header .dropdown-menu {
    border: 1px solid var(--borderTop);
}

    header .dropdown-menu img.w-20 {
        width: 20px;
    }

/* Navbar in Tablet & mobile screens */

header .offcanvas.offcanvas-end {
    width: 280px;
}

header .navbar-toggler-icon {
    width: 20px;
    height: 20px;
}

header .dropdown-item {
    padding: 6px 16px;
    border-top: 1px solid var(--white-color);
    width: 160px !important;
}

    header .dropdown-item:hover,
    .dropdown-item:hover {
        background-color: var(--light-bg-color);
        border-top: 1px solid var(--lighter-primary-color);
    }

.dropdown-item {
    border-top: 1px solid var(--white-color);
    padding: 9px 16px;
}

/* Media queries */
@media screen and (max-width: 992px) {
    #mobile-menus ul li a.dropdown-item {
        padding: 8px 15px;
    }

    .offcanvas-body .user-profile {
        background-color: var(--avatar-bg);
    }

    #mobile-menus ul li .dropdown-item:hover {
        border-radius: 4px;
    }

        #mobile-menus ul li .dropdown-item:hover svg path {
            stroke: var(--primary-color);
        }
}

/* Header css ends */

.primary-text,
.transparent-primary-btn {
    color: var(--primary-color) !important;
}

.primary-btn,
.primary-outline-btn,
/* .light-white-btn, */
/* .success-btn, */
/* .error-btn, */
.error-outline-btn,
.dropdown-btn {
    height: 40px;
}

.primary-btn {
    opacity: 0.5;
}

    .primary-btn:hover {
        opacity: 1 !important;
    }

.error-outline-btn:hover {
    opacity: 1 !important;
}

.primary-outline-btn {
}

.primary-btn,
.transparent-primary-btn:hover {
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
}

    .primary-outline-btn:hover,
    .primary-btn:hover {
        box-shadow: 0px 4px 4px 0px #6890141a;
    }

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

    /*.primary-outline-btn:hover {
    border-color: var(--primary-dark-shade);
    color: var(--primary-color);
}*/

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

.btn-white:active {
    background: var(--lighter-primary-color) !important;
    color: var(--paragraph-text) !important;
}

.primary-outline-btn,
.primary-outline-btn:active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    border: 1px solid var(--primary-color) !important;
    background: var(--light-bg-color) !important;
}

    .primary-outline-btn:hover {
        background: var(--white-color) !important;
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    .primary-outline-btn:active {
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
        background: var(--light-bg-color) !important;
    }

.primary-btn:hover {
    opacity: 1 !important;
}

.fs-20 {
    font-size: var(--fs-20);
}

.fs-14 {
    font-size: var(--fs-14);
}

.fs-16 {
    font-size: var(--fs-16);
}

.fs-12 {
    font-size: var(--fs-12);
}

.rounded-12 {
    border-radius: var(--border-radius) !important;
}

.lightgrey-border {
    border: 1px solid var(--lightgrey-color) !important;
}

.lightgrey-border-t {
    border-top: 1px solid var(--lightgrey-color);
}

.lightgrey-border-b {
    border-bottom: 1px solid var(--lightgrey-color);
}

.lighter-primary-border {
    border: 1px solid var(--lighter-primary-color) !important;
}

.ls-1 {
    letter-spacing: var(--letter-spacing1);
}

.ls-2 {
    letter-spacing: var(--letter-spacing2);
}

.w-fit {
    width: fit-content;
}

.cursor-pointer {
    cursor: pointer !important;
}

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

.error-bg {
    background: var(--error-bg);
}

.primary-border:focus-within {
    border-color: var(--primary-color) !important;
}

.custom-w-50 {
    width: 50%;
}

.screen-bg-light {
    background-color: var(--light-bg-color);
}

.w-20 {
    width: 20% !important;
}

.loading-spinner {
    width: 10px;
    height: 10px;
}

.paragraph-text {
    color: var(--paragraph-text);
}

.main-heading {
    font-size: var(--main-heading);
}

.font-sora {
    font-family: "Sora", sans-serif;
}

.blue-alert {
    background: var(--lightblue-bg-color);
    border: 2px solid var(--blue-border-color);
}

input[type="tel"]::placeholder {
    color: var(--placeholder-color);
}

.text-grey {
    color: var(--grey-color) !important;
}

.text-lightgrey::placeholder {
    color: var(--text-lightgrey) !important;
}

.seconday-text {
    color: var(var(--seconday-color));
}

.lighter-primary-color {
    background: var(--lighter-primary-color) !important;
}

.light-primary-color {
    color: var(--light-primary-color);
}

    .light-primary-color:hover {
        color: var(--light-primary-color);
    }

.date {
    border: 1px solid var(--lightgrey-color) !important;
}

    .date:hover {
        border: 1px solid var(--input-border-hover) !important;
    }

    .date:focus {
        box-shadow: none;
    }

.z-1 {
    z-index: 1 !important;
}

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

.primary-overlay-color {
    color: var(--primary-overlay-color);
}

.input-border:hover,
.input-password:hover {
    border-color: var(--input-border-hover) !important;
}

.input-border:focus,
.input-password:focus-within {
    border-color: var(--primary-color) !important;
}

.bg-grey {
    background: var(--grey-color);
}

.lighter-grey-bg {
    background: var(--lighter-grey-color);
}

.light-purple-bg {
    background: var(--light-purple-color);
}

.light-warning-bg {
    background: var(--light-warning-color);
}

.light-blue-bg {
    background: var(--light-blue-color);
}

.light-cyan-bg {
    background: var(--light-cyan-color);
}

.lighter-blue {
    background: var(--lighter-blue);
}

.semi-finalist-bg {
    background: var(--semi-finalist-bg);
}

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

@media only screen and (max-width: 1200px) {
    .custom-w-50 {
        width: 90%;
    }
}

.whats-new-notification {
    width: 9px;
    height: 9px;
    right: 2px;
    bottom: 2px;
    background-color: var(--notification-color);
    border: 1px solid var(--lighter-grey-color);
}

.bg-white-98 {
    background: #fbfcfa;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color) !important;
    border-radius: 2px !important;
    cursor: pointer;
}

.primary-bg {
    background-color: var(--primary-color) !important;
}

.light-shade-bg {
    background-color: var(--light-shade-bg);
}

@media screen and (max-width: 500px) {
    .modal .modal-content {
        bottom: -500px;
    }

    .modal.show .modal-content {
        bottom: 0px;
        /*top: 50px;*/
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .modal.fade .modal-dialog {
        transform: translate(0, 382px);
    }

    .modal.show .modal-dialog {
        transform: none;
        height: 100%;
    }

    .modal {
        overflow: hidden;
    }

    .modal-content {
        position: absolute;
        /* bottom: 0px; */
        border-radius: 12px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0;
        border: 0;
    }

    .modal-dialog {
        margin: 0;
        position: unset;
    }
}

.success-btn {
    color: var(--dark-success-color) !important;
    background: var(--success-bg-color) !important;
}

.error-btn {
    color: var(--light-error-color) !important;
    background: var(--error-bg) !important;
}

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

@media only screen and (max-width: 768px) {
    .main-heading {
        font-size: var(--fs-20);
    }

    .fs-20 {
        font-size: var(--fs-16);
    }
}

.error-outline-btn,
.error-outline-btn:active {
    color: var(--error-color) !important;
    border: 1px solid var(--error-color) !important;
}

.pt-80 {
    padding-top: 88px;
}

.p-40 {
    padding: 40px;
}

.px-56 {
    padding-inline: 56px;
}

input {
    height: 40px;
}

.mb-32 {
    margin-bottom: 32px;
}

.email-btn:active {
    border-color: var(--white-color) !important;
    color: var(--primary-color) !important;
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url(../../images/Login-registration/ic-checkbox.svg);
    background-size: 10px;
}

.form-check-input {
    border-radius: 2px !important;
    height: 16px;
    width: 16px;
    border: 1px solid var(--input-border-hover) !important;
    cursor: pointer;
}

    .form-check-input:hover {
        outline: 4px solid var(--nav-btn-bg);
    }

.py-48 {
    padding-block: 48px;
}

.py-24 {
    padding-block: 24px;
}

.lightgrey-border-lr {
    border-left: 1px solid var(--lightgrey-color) !important;
    border-right: 1px solid var(--lightgrey-color) !important;
}

@media only screen and (max-width: 992px) {
    .pt-80 {
        padding-top: 56px;
    }

    .mb-40 {
        margin-bottom: 0px !important;
    }

    .p-40 {
        padding: 32px;
    }

    .mb-32 {
        margin-bottom: 24px;
    }

    .px-56 {
        padding-inline: 24px;
    }

    .py-48 {
        padding-block: 0;
    }

    .textarea {
        padding: 16px !important;
    }

    .nav-tabs {
        height: 32px !important;
        padding: 5px 8px !important;
        border-bottom: 0;
    }
}

@media only screen and (max-width: 576px) {
    .pt-80 {
        padding-top: 8px;
    }

    .p-40 {
        padding: 20px 16px;
    }

    .px-56 {
        padding-inline: 16px;
    }

    .py-24 {
        padding-block: 32px;
    }
}

.max-w-1420 {
    max-width: 1420px;
}

.textarea {
    padding: 20px 24px !important;
}

.nav-tabs {
    height: 40px;
    padding: 9px 16px;
    border-bottom: 0;
}

.textarea-border {
    border: 1px solid var(--lightgrey-color) !important;
}

    .textarea-border:focus-within {
        border: 1px solid var(--primary-color) !important;
    }

#applications .search-bar-image {
    stroke: var(--secondary-color);
}

#applications .input-group:hover .search-bar-image {
    stroke: var(--primary-color);
}

#applications .input-group {
    height: 40px;
}

    #applications .input-group:hover,
    #applications .input-group:focus-within {
        border: 1px solid var(--search-bar-border-hover) !important;
    }

    #applications .input-group:focus {
        caret-color: var(--primary-color);
    }

.fill-stroke-icon {
    stroke: var(--primary-color);
    fill: var(--primary-color);
}

.fill-stroke-icon:focus {
    outline: none !important;
}

.stroke-icon {
    stroke: var(--primary-color);
}

    .stroke-icon:focus {
        outline: none !important;
    }

.fill-icon {
    fill: var(--primary-color);
}

.fill-icon:focus {
    outline: none !important;
}

.password-eye-ic {
    position: absolute;
    top: 10px;
    right: 0;
}

.winner-app-img {
    width: 88px;
    height: 76px;
    padding: 8px 10px;
}

.form-container {
    max-width: 464px;
    width: 100%;
}

.mb-40 {
    margin-bottom: 40px;
}

.overflow-y-scroll {
    overflow-y: scroll !important
}

#evaluation-sidebar-content legend {
    font-size: 14px !important;
    color: var(--primary-color) !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

/*    #evaluation-sidebar-content legend::after {
        content: "";
        background: url('../../images/icons/ic-primary-right-arrow.svg');
        height: 20px;
        width: 20px;
        background-repeat: no-repeat;
        background-size: contain;
    }*/


#evaluation-sidebar-content fieldset {
    background: var(--white-color);
    border: 1px solid var(--lightgrey-color) !important;
    border-radius: var(--border-radius) !important;
    padding: 1rem !important;
    margin: 1.5rem 0;
}

    #evaluation-sidebar-content fieldset ul {
        padding-left: 0;
        margin: 0.5rem 0;
        font-size: 14px !important;
    }

    #evaluation-sidebar-content fieldset .form-group .col-lg-6,
    #evaluation-sidebar-content fieldset .form-group .col-sm-3 {
        width: 100% !important;
    }

        #evaluation-sidebar-content fieldset .form-group .col-lg-6 select {
            height: 40px;
        }

    #evaluation-sidebar-content fieldset .radio label {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        #evaluation-sidebar-content fieldset .radio label input {
            height: auto !important;
        }


#evaluation-main-content .summary h2 {
    font-size: var(--fs-20) !important;
    font-weight: 600;
    margin-bottom: 4px;
}

#evaluation-main-content .summary h3 {
    font-size: 16px !important;
    margin-bottom: 4px;
    font-weight: 500;
}

#evaluation-main-content table tr td {
    padding-inline: 1rem;
}

#evaluation-main-content .summary h4 {
    font-size: 14px !important;
}

#evaluation-main-content .summary .pull-right a,
#evaluation-main-content table tr td a {
    color: var(--primary-color) !important;
}

.rounded-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#evaluation-sidebar-content input[type="button"],
.sidebar-offcanvas .offcanvas-body input[type="button"] {
    display: none !important;
}


@media only screen and (max-width:576px) {
    #evaluation-sidebar-content fieldset {
        margin: 1rem 0 !important;
    }
}

#applications .dt-buttons > button {
    background: var(--primary-color) !important;
    border-radius: 4px !important;
    padding-inline: 16px !important;
    height: 40px;
    margin: 8px 0;
}

    #applications .dt-buttons > button span {
        color: var(--white-color) !important;
        font-weight: 600 !important;
    }

    #applications .dt-buttons > button:nth-child(2) {
        margin-left: 8px !important;
    }

button,
.btn {
    text-transform: capitalize !important;
}

form#maineditform0 {
    width: 100%;
    overflow-x: scroll;
}