/* Fonts */

@font-face {
    font-family: 'Roboto-Regular';
    src: url("../../assets/fonts/Roboto-Regular.eot");
    src: url("../../assets/fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Roboto-Regular.woff") format("woff"), url("../../assets/fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Italic';
    src: url("../../assets/fonts/Roboto-Italic.eot");
    src: url("../../assets/fonts/Roboto-Italic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Roboto-Italic.woff") format("woff"), url("../../assets/fonts/Roboto-Italic.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-BoldItalic';
    src: url("../../assets/fonts/Roboto-BoldItalic.eot");
    src: url("../../assets/fonts/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Roboto-BoldItalic.woff") format("woff"), url("../../assets/fonts/Roboto-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url("../../assets/fonts/Roboto-Bold.eot");
    src: url("../../assets/fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../../assets/fonts/Roboto-Bold.woff") format("woff"), url("../../assets/fonts/Roboto-Bold.ttf") format("truetype");
}

/* Variables */

:root {
    --highlight-teal: #63FCE3;
    --card-icon-border-color: #35322F;
}

/* Base elements */

body {
    font-family: Roboto-Regular;
    background-color: black;
    color: white;
}

/* General purpose classes */

.hidden {
    display: none !important;
}

.environment-dev {
    color: orange;
    font-weight: bold;
}

.environment-sqa {
    color: blue;
    font-weight: bold;
}

.standard-page-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mh-100 {
    min-height: 100vh;
}

.ocg-button {
    margin-top: 2.375rem;
    border-color: var(--highlight-teal);
    font-family: Roboto-Bold;
    border-width: 2px;
    border-radius: 25px;
    font-size: 16px;
    min-width: 9rem;
}

.ocg-button:hover {
    background: linear-gradient(to left, #78FEEE, #42FECB, #0AFFA7);
    border-color: transparent;
}

/* Navbar */

@media (min-width: 350px) {
    .navbar-expand-custom {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}

.navbar-menu-icon {
    color: var(--highlight-teal);
}

.navbar-menu-button:focus:not(:focus-visible) {
    box-shadow: white 0 0 0 2px;
}

.nav-item {
    display: block;
}

.nav-link {
    color: white;
}

.nav-link:focus {
    color: white;
}

.nav-link:focus-visible {
    box-shadow: none;
}

.nav-link:hover {
    color: var(--highlight-teal);
    text-decoration: underline;
}

.nav-link.active {
    text-decoration: underline;
}

.nav-link.active:hover {
    color: var(--highlight-teal);
}

/* Loader Modal */

.loader-modal {
    z-index: 1055;
}

.loader-content {
    width: 300px;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Cookie Bar */

.cookie-bar {
    display: none;
    background-color: #7bb733;
    z-index: 100000;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2rem;
    margin: 0 auto;
    padding: 1.5rem;
    color: white;
    text-align: justify;
    font-family: Roboto-Regular;
    border-radius: 15px;
}

.action-wrapper {
    padding: 1rem;
    text-align: center;
}

.action-wrapper-link {
    color: white;
    text-decoration: none;
}

/* Portal Footer */

.portal-footer {
    background-color: #3D3936;
}

.portal-footer-container {
    font-size: 0.875rem;
}

.portal-footer-text {
    color: white;
}

.portal-footer-link {
    color: white;
    text-decoration: none;
}

.portal-footer-link:hover {
    color: var(--highlight-teal);
    text-decoration: underline;
}

.portal-footer-icon {
    box-sizing: border-box;
    color: #3D3936;
    background-color: white;
    padding: 0.25rem;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0 0.25rem;
    border-radius: 50%;
}

.portal-footer-links {
    width: 20%;
    margin-right: 2.25rem;
    padding-right: 1rem;
}

@media (max-width: 1000px) {
    .portal-footer-links {
        width: 30%;
    }
}

@media (max-width: 480px) {
    .portal-footer-links {
        width: 100%;
        margin-right: 0;
        padding-right: 0;
        text-align: center;
    }
}

.portal-footer-left {
    width: 80%;
    padding: 1.75rem 0;
}

@media (max-width: 480px) {
    .portal-footer-left {
        width: 100%;
        padding-top: 0;
    }
}

.portal-footer-right {
    width: 20%;
    padding: 1.75rem 0;
}

@media (max-width: 480px) {
    .portal-footer-right {
        width: 100%;
        justify-content: center !important;
    }
}

/* No Access */

.no-access-hero-title {
    font-size: 1.75rem;
    margin-top: 4.5rem;
}

@media only screen and (max-width: 750px) {
    .no-access-hero-title {
        margin: 2rem 0 1rem 0 !important;
        font-size: 1.5rem !important;
    }
}

/* Error */

.error-hero-title {
    font-size: 1.75rem;
    margin-top: 4.5rem;
}

@media only screen and (max-width: 750px) {
    .error-hero-title {
        margin: 2rem 0 1rem 0 !important;
        font-size: 1.5rem !important;
    }
}

/* Under Maintenance */

.maintenance-hero-title {
    font-size: 1.75rem;
    margin-top: 4.5rem;
}

@media only screen and (max-width: 750px) {
    .maintenance-hero-title {
        margin: 2rem 0 1rem 0 !important;
        font-size: 1.5rem !important;
    }
}

/* Login Dropdown */
.login-dropdown-link:active {
    background-color: rgba(255, 255, 255, 0.15);
}