/*
************************ Global Styles & Bootstrap Overriding Styles ************************
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

:root {
    /* fonts */
    --body-text-semibold: 'Montserrat', sans-serif;
    --body-text: 'Montserrat', sans-serif;

    /* font sizes */
    --body-text-size: 14px;
    --body-text-fine-size: 12px;
    --h2-size: 18px;
    --h3-size: 24px;
    --h1-size: 50px;
    --body-text-semibold-size: 14px;
    --h4-size: 20px;

    /* page-width */
    --max-page-width: 1400px;

    /* Colors */
    --color-white: #FFFFFF;
    --color-nus-blue: #013D7C;
    --color-nus-orange: #ef7c00;
    --color-light-blue: #7F9EBD;
    --color-light-orange: #F7BD7F;

    --color-dimgray-100: #707070;
    --color-dimgray-200: rgba(112, 112, 112, 0.4);
    --color-gray-table: #E4E4E4;
    --color-darkslateblue-100: #003d7c;
    --color-darkslateblue-200: #E5EBF2;
    --color-input-bg: #F4F6FA;
    --color-darkslateblue: #003d7c;

    --color-darkorange: #ef7c00;
    --color-whitesmoke: #f7f7f7;
    --color-lightgoldenrodyellow: #e2fbd7;
    --color-rederror: #feeaed;
    --color-limegreen: #34b53a;
    --color-green: #3d7c00;
    --color-dodgerblue: #2a99fb;
    --color-blueDF: #dff0ff;
    --color-blue: #0055FF;
    --color-brown: #503C20;
    --color-lightpuple: #DAD7FE;
    --color-puple: #4339F2;
    --color-crimson: #f64669;
    --color-chocolate: #ce7100;
    --color-yellowwarning: #FDEFB0;
    --color-dimgray-400: grey;
    --color-darkslategray: #3c3c3c;
    --color-lightgray: #e6ecf2;
}

body {
    width: 100vw;
    overflow-x: hidden;
}
/*h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}*/
::placeholder {
    color: #707070 !important;
    caret-color: #707070 !important;
}
.btn-nus-white {
    background-color: #fff;
    color: var(--color-nus-blue) !important;
    border: none;
}
.btn-nus-white:hover {
    background-color: var(--color-nus-orange);
    color: #fff !important;
}
.btn-nus-blue {
    background-color: var(--color-nus-blue);
    color: #fff !important;
    border: none;
}
.btn-nus-blue:hover {
    background-color: var(--color-nus-orange);
    color: #fff !important;
}
.btn-nus-blue:disabled {
    background-color: var(--color-dimgray-100);
    color: #fff !important;
}
.btn-nus-orange {
    background-color: var(--color-nus-orange);
    color: #fff !important;
    border: none;
}
.btn-nus-orange:hover {
    background-color: var(--color-nus-blue);
    color: #fff !important;
}
.btn-brown {
    background-color: var(--color-brown);
    color: #fff !important;
    border: none;
}
.btn-brown:hover {
    background-color: var(--color-nus-blue);
    color: #fff !important;
}
.btn-outline-orange {
    border: 2px solid #FFFFFF;
    color: #fff !important;
}
.btn-outline-orange:hover {
    background-color: var(--color-nus-orange);
    color: #fff !important;
}

.btn-outline-blue {
    border: 2px solid #FFFFFF;
    color: #fff !important;
}
.btn-outline-blue:hover {
    background-color: var(--color-nus-blue);
    color: #fff !important;
}

.btn-blue-outline-blue {
    border: 1px solid var(--color-nus-blue);
    color: var(--color-nus-blue) !important;
}
.btn-blue-outline-blue:hover {
    background-color: var(--color-nus-blue);
    color: #fff !important;
}

.btn-outline-disable {
    pointer-events: none;
    border: 2px solid rgba(200, 200, 200, 0.8);
    color: #666666 !important;
    background-color: rgba(200, 200, 200, 0.8);
    cursor: not-allowed;
    opacity: 1;
}

.btn-dark-blue,
.btn-dark-blue:visited {
    background-color: var(--color-darkslateblue);
    border: 1px solid var(--color-darkslateblue);
    color: white !important;
}

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

.btn-dark-blue-outline {
    background-color: white;
    color: var(--color-darkslateblue-100) !important;
    border: 1px solid var(--color-darkslateblue-100);
}

.btn-dark-blue-outline:hover {
    color: var(--color-darkorange) !important;
    border: 1px solid var(--color-darkorange);
}

.btn-dark-blue-outline:hover #custom-btn-icon {
    fill: var(--color-darkorange) !important;
}
.btn-dark-blue-disabled, .btn-dark-blue:disabled {
    background-color: var(--color-darkslateblue);
    border: 1px solid var(--color-darkslateblue);
    color: white !important;
    opacity: 0.5;
}
.btn-dark-blue-disabled:hover, .btn-dark-blue:disabled {
    background-color: var(--color-darkslateblue);
    border: 1px solid var(--color-darkslateblue);
    color: white !important;
}

.btn-close {
    cursor: pointer;
}
.bg-orange {
    background-color: var(--color-nus-orange);
}
.bg-nus-blue {
    background-color: var(--color-nus-blue);
}
.bg-whitesmoke {
    background-color: var(--color-whitesmoke);
}
.bg-light-orange {
    background: #f7bd7f;
}
.bg-light-blue {
    background: #7f9ebd;
}
.bg-sky-blue {
    background: #def1ff;
}
.bg-orange-blue {
    background: linear-gradient(90deg, #f7bd7f, #7f9ebd);
}
.bg-blue-orange {
    background: linear-gradient(90deg, #7f9ebd, #f7bd7f);
}
.bg-orange-grad {
    background: linear-gradient(90deg, #e7ad6f, #f7bd7f);
}
.bg-blue-grad {
    background: linear-gradient(90deg, #7f9ebd, #6f8ead);
}
.bg-danger {
    background-color: #FCDDEF !important;
    color: #CE7BAF !important;
}
.bg-warning {
    background-color: #FDEFB0 !important;
    color: #CE7100 !important;
}
.bg-info {
    background-color: #C2E7E7 !important;
    color: #187788 !important;
}
.bg-royal {
    background-color: #DAD7FE !important;
    color: #8780F7 !important;
}
.bg-gray {
    background-color: #EEE !important;
    color: #999 !important;
}
.text-nus-blue {
    color: var(--color-nus-blue);
}
.text-nus-orange {
    color: var(--color-nus-orange);
}
.text-green {
    color: var(--color-green);
}
.alert.bg-warning {
    border-left: 5px solid #CE7100;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.loading-spinner {
    border: 3px solid transparent;
    border-top: 3px solid #f7bd7f;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
}
.loader {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #013D7C #013D7C transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent var(--color-nus-orange) var(--color-nus-orange);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}
.loader::before {
    width: 4px;
    height: 4px;
    border-color: #013D7C #013D7C transparent transparent;
    animation: rotation 1.5s linear infinite;
}
.keyword-tag {
    color: #707070;
    background: #E4E4E4;
    border-radius: 16px;
    font-size: 12px;
    text-decoration: none;
    padding: 2px 10px;
    font-weight: 400;
    line-height: 21px;
    max-width: 100%;
}
.keyword-tag-hollow {
    color: #3c3c3c;
    border-style: solid;
    border-color: #E4E4E4;
    border-width: 2px;
    border-radius: 16px;
    font-size: 14px;
    text-decoration: none;
    padding: 2px 10px;
    font-weight: 400;
    line-height: 21px;
    max-width: 100%;
}
.navy-pulsing {
    box-shadow: 0 0 0 0 rgba(16, 27, 105, 1);
    transform: scale(1);
    animation: pulse-animation-navy 2s infinite;
}
.orange-pulsing {
    box-shadow: 0 0 0 0 rgba(215, 139, 48, 1);
    transform: scale(1);
    animation: pulse-animation-orange 2s infinite;
}
.green-pulsing {
    box-shadow: 0 0 0 0 rgba(130, 202, 156, 1);
    transform: scale(1);
    animation: pulse-animation-green 2s infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes pulse-animation-navy {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 27, 105, 0);
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 0 rgba(16, 27, 105, 0.7);
    }
    35% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 2px 20px rgba(16, 27, 105, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 2px 20px rgba(16, 27, 105, 0);
    }
}
@keyframes pulse-animation-orange {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(215, 139, 48, 0);
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 0 rgba(215, 139, 48, 0.7);
    }
    35% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 2px 20px rgba(215, 139, 48, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 2px 20px rgba(215, 139, 48, 0);
    }
}
@keyframes pulse-animation-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(130, 202, 156, 0);
    }
    30% {
        transform: scale(1.1);
        box-shadow: 0 0 0 0 rgba(130, 202, 156, 0.7);
    }
    35% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 2px 20px rgba(130, 202, 156, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 2px 20px rgba(130, 202, 156, 0);
    }
}
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 26px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 42px;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #00a32a;
}
input:focus + .slider {
    box-shadow: 0 0 1px #00a32a;
}
input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}
.slider.round {
    border-radius: 50px;
}
.slider.round:before {
    border-radius: 50%;
}
.form-select:focus {
    box-shadow: none;
}
.info-tooltip {
    margin-left: 4px;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-nus-orange);
}
.info-tooltip:hover {
    color: var(--color-chocolate);
}