/* For customization of color, shadows, text-decorations, i.e. any non-spacing/non-behavior related styling */

:root {
    --color-11: #e3e3e3;
    --bg-color-1: #000000;
    --bg-color-2: #ffffff;
    --bg-color-3: #011e41;
    --bg-color-4: #012248;
    --bg-color-5: #b71807;
    --bg-color-6: #26a3a1;
    --fg-color-1: #000000;
    --fg-color-2: #ffffff;
    --fg-color-3: #b71807;
    --fg-color-4: #707070;
    --fg-color-5: #f2f2f2;
    --fg-color-6: #011e41;
    --fg-color-7: #167395;
    --fg-color-8: #2b84a2;
    --fg-color-9: #8cfffa;
    --fg-color-10: #011e41;
    --navbar-height: 60px;
    --navbar-x-padding: 26px;
    --navbar-y-padding: 10px;
    --portal-btn-width: 200px;
    --portal-btn-height: 40px;
    --portal-btn-web-height: calc((10/1152) * 100vw + 33.33px);
    --portal-btn-web-width: calc((100/1152) * 100vw + 133.33px);
    --portal-btn-border-radius: calc(0.5 * var(--portal-btn-height));
    --form-dropdown-width: calc(0.85 * var(--portal-btn-width));
    --web-navbar-height: calc((57/1152) * 100vw + 22px);
}

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

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

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

.fg-color-2 {
    color: var(--fg-color-2);
}

.fg-color-3 {
    color: var(--fg-color-3);
}

.fg-color-4 {
    color: var(--fg-color-4);
}

.fg-color-5 {
    color: var(--fg-color-5);
}

.fg-color-6 {
    color: var(--fg-color-6);
}

.fg-color-7 {
    color: var(--fg-color-7);
}

.fg-color-8 {
    color: var(--fg-color-8);
}

.fg-color-9 {
    color: var(--fg-color-9);
}

.fg-color-10 {
    color: var(--fg-color-10);
}

.text-underline {
    text-decoration: underline;
}

body {
    font-family: FuturaMedium;
    color: var(--fg-color-1);
    font-size: 14px;
}

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

a:hover, a:focus {
    color: var(--fg-color-3);
}

.portal-heading {
    color: var(--fg-color-3);
    font-family: FuturaMedium;
}

.portal-btn:hover,
.portal-btn:active,
.portal-btn:target,
.portal-btn:not(:disabled):not(.disabled):active:focus,
.no-style:hover,
.no-style:visited,
.no-style:active {
    background: var(--bg-color-3);
    box-shadow: none;
    outline: 0;
    text-decoration: none !important;
}

.navbar-nav {
    color: var(--fg-color-2);
}

#sidebar ul li a:hover,
#web-sidebar ul li a:hover {
    background: var(--bg-color-4);
    color: var(--fg-color-2);
    text-decoration: none;
}

.terms-link a,
.terms-link a:hover,
.terms-link a:focus {
    color: var(--fg-color-1);
}

#reactivate-subscription-modal .modal-body button.portal-btn {
    background-color: var(--fg-color-1);
}

.portal-btn {
    border: 0;
    border-radius: var(--portal-btn-border-radius);
    outline: 0;
    font-family: FuturaBold;
    display: block;
    width: var(--portal-btn-width);
    height: var(--portal-btn-height);
    color: var(--fg-color-2);
    background: var(--bg-color-3);
    cursor: pointer;
    margin: 15px auto;
    font-size: 11px;
    text-transform: uppercase;
}

.portal-btn:hover {
    color: var(--fg-color-2);
}

.portal-modal .modal-dialog {
    top: 30%;
}

.portal-modal .modal-content {
    border: none;
    border-radius: 0;
    background-color: var(--bg-color-3);
}

.portal-modal .modal-body {
    color: var(--fg-color-2);
    font-family: FuturaBold;
}

.portal-modal .modal-body button {
    color: var(--fg-color-1);
    background-color: var(--bg-color-5);
}

.video-modal .modal-dialog {
    top: 30%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.video-modal .modal-body,
.video-modal .modal-header {
    border: none;
}

.video-modal .modal-content {
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.video-modal .modal-header .close {
    color: var(--fg-color-2);
    opacity: 1
}

@media (min-width: 425px) {
    .video-modal .modal-content {
        width: 80vw;
    }
}

/*Desktop*/
@media (min-width: 768px) {
    :root {
        --form-dropdown-width: calc(0.85 * var(--portal-btn-web-width));
        --portal-btn-border-radius: calc(0.5 * var(--portal-btn-web-height));
    }

    body {
        font-size: calc((10/1152) * 100vw + 7.33px);
    }

    #cookie-consent-modal,
    .portal-modal .modal-body {
        font-size: calc((4/1152) * 100vw + 11.33px);
    }

    .portal-btn {
        height: var(--portal-btn-web-height);
        width: var(--portal-btn-web-width);
        border-radius: var(--portal-btn-border-radius);
    }

    .portal-btn,
    .portal-dropdown .dropdown-menu > .dropdown-item {
        font-size: calc((7/1152) * 100vw + (19px / 3)) !important;
    }

    .video-modal .modal-dialog {
        top: 0;
    }
}