/* Minification failed. Returning unminified contents.
(161,31): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
 */
/*
    This has become a file we will keep and store our CSS instead of in html nut changing the name might be useful - we should do that in 
    a story alone so as to have scope for testing and any other broad code changes.
*/

@font-face {
    font-display: block;
    font-family: "bootstrap-icons";
    src: url("./T5_assets/fonts/bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

@font-face {
    font-family: 'Archivo Narrow';
    src: url("../Content/T5_assets/fonts/static/ArchivoNarrow-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo Narrow';
    src: url("../Content/T5_assets/fonts/static/ArchivoNarrow-Medium.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo Narrow';
    src: url("../Content/T5_assets/fonts/static/ArchivoNarrow-SemiBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo Narrow';
    src: url("../Content/T5_assets/fonts/static/ArchivoNarrow-Bold.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Archivo Narrow';
    src: url("../Content/T5_assets/fonts/static/ArchivoNarrow-italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

@media only screen and (max-width: 641px) {
    .footer-responsive {
        padding-bottom: 150px !important;
    }
}

@media only screen and (max-width: 408px) {
    .responsiveArrowButton {
        margin-top: -30px !important;
        margin-left: -15px !important;
    }
}

@media only screen and (min-width: 409px) {
    .responsiveArrowButton {
        margin-top: -5px !important;
        margin-left: 0px !important;
    }
}

#level-600 {
    display: none;
}
/*----------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------*/


/*
    Due to the temporary need for the styles adjustments below, it was decided to put this here instead of make new files.
    This way we can see that it exists and be aware of what to delete when the time comes that we don't need this.
 */

/* There are some things that need direct tweaks due to a temporary implementation of the header and footer, etc. */

/***************************************************************************************************************************************
    todo: Due to some things learned recently, we can replace any "fix" classes with simple class overrides. We should do this
    carefully over time with any of the fix classes below. Some of those overrides can be put in this file while others may
    need to be applied in the partial file where needed. See "fixFullWideButton" for example. This style was needed on PaymentHistory
    as of the branch with this comment being added. Instead of use this temporary class, that page is implementing a specific
    styles class override within the partial html. This is because it needs to fix a btn-secondary, but we don't want that
    code here since it isn't relevant to all button-secondaries. This particular class may actually be one the DMAC team needs
    to put in place as it is a customization on top of the bootstrap styles that is likely to be used on many screens and in 
    many applications.

    Here is the example override. You can see here that it touches two properties. The result is that an override such as this will not
    change any of the other existing styles defined on this class in other css files.

    button.btn-primary, button.btn-secondary {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    This particular example has only been placed in the PaymentHistoryTable. The old class is still here because it is used on the
    Account screens. We will want to update those to the new class override technique at a future time in order to reduce scope
    creep of the branch being worked at the time of this comment/story-about-styles.

****************************************************************************************************************************************/

/*this keeps the floating square border from appearing around the transparent X buttons at the top right of modals*/
.modal-header button.btn-close {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/*The following "form" classes are copied from tricare.css because a recent bootstrap.css update put in the "important" override and reversed our custom styles from DMAC.*/
.form-check-input {
    width: 30px !important;
}

.form-switch .form-check-input {
    width: 2em !important;
    background-position: left center !important;
    border-radius: 2em !important;
    -webkit-transition: background-position 0.15s ease-in-out !important;
    transition: background-position 0.15s ease-in-out !important;
}

    .form-switch .form-check-input:checked {
        background-position: right center !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    }
/*That takes care of the "form" class issue*/

/*****************************************************************************************************************************************
    The following class is in place to prevent buttons from having shadows after clicking them. We
    can remove this at any point in the future if we don't find the need remove the shadow on buttons.
    (consider putting button.btn-close on this next line if we will be keeping this tweak after all)
******************************************************************************************************************************************/
/*no shadows - there is a bootstrap shadow-none class, but none of our buttons should have shadows at all, so we won't apply it to every single one*/
button.btn-primary, button.btn-secondary {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.fixBody {
    position: relative !important;
    /*font-size: 0.6rem !important;*/
}

.fixContainer {
    max-width: 63rem !important; /*this width lines up the bootrap screens with the old screens*/
}

.fixGrid {
    padding-left: .7rem !important;
    padding-right: .7rem !important;
}

.bannerImage {
    margin: 0.125rem 0 !important;
}

.fixTopBar {
    max-height: 3.25rem !important;
    padding: 0.2rem calc(var(--bs-gutter-x) * 0.5) !important;
}

@media only screen and (max-width: 1199px) {
    .fixH1 {
        font-size: 2.5rem !important;
    }
}

.fixHeaderButton {
    background-color: #004578 !important;
    padding: 0;
    box-shadow: none !important;
}

    .fixHeaderButton:hover {
        background-color: #14377D !important;
        cursor: pointer !important;
    }

.header-icon {
    height: 36px !important;
    width: 36px !important;
    stroke: #ffffff !important;
    stroke-width: .06em !important;
    fill: #004578 !important;
    margin: .15rem !important;
}

.fixHeaderButton:hover .header-icon, .fixHeaderButton:hover {
    fill: #14377D !important;
}

/*this isn't and svg, so needs a slight adjustment*/
.header-profile-icon {
    padding: 0.22rem !important;
}

.fixHr {
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
    height: 0 !important;
    border: solid #DDDDDD !important;
    border-width: 1px 0 0 !important;
    clear: both !important;
    margin: 1.65rem 0 1rem 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
}

.fixPageItem {
    min-width: 2.425rem !important;
    text-align: center !important;
}

.fixPageLink {
    cursor: pointer !important;
}

.fixFullWideButton {
    width: inherit !important;
    display: block !important;
}

@media (max-width: 768px) {
    .fixSmallWideButton {
        width: inherit !important;
        display: block !important;
    }
}

@media (max-width: 576px) {
    .fixSmallWideButton {
        margin-top: 1rem !important;
        width: inherit !important;
        display: block !important;
    }
}

/*generic class to disable something, but not named "disabled" so as not to interfere with antyhing*/
.customDisabled {
    pointer-events: none !important;
    opacity: 0.55 !important;
}

/*----------------------------------------------------------------------------------------------------------------------------------*/
/* Copied the following from the "old styles" since they are uniquely defined and we need this stuff to match old screens for now   */
/*----------------------------------------------------------------------------------------------------------------------------------*/
.sticky300 {
    position: fixed !important;
    top: 0px;
    z-index: 1003;
    width: 100%;
}

.humana-military-tricare-banner {
    width: 325px;
    height: 110px;
    background-image: url("../../Content/images/humana-military-new.png");
    background-repeat: no-repeat;
}

#myProfile {
    font-size: .7rem !important;
    border-radius: 0 !important;
    padding: 0;
}

.cobrowse-footer-margin {
    margin-top: 5px;
}

.cobrowse-icon {
    height: 48px;
    width: 48px;
    stroke: #ffffff;
    stroke-width: .125em;
    cursor: pointer;
    fill: transparent;
}

#cobrowse > svg {
    cursor: default;
}

.contact-us-footer-text {
    color: #000000;
    position: relative;
    top: 60%;
    transform: translateY(60%);
    -webkit-transform: translateY(60%);
    -moz-transform: translateY(60%);
    font-size: .8rem !important;
}

.centerFormFields {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

.level-500 {
    background-color: #484641;
}

    .level-500 a {
        color: #FFFFFF;
        text-decoration: none;
    }

        .level-500 a:hover {
            color: #FFFFFF;
            text-decoration: underline;
        }

    .level-500 p {
        color: #ffffff;
        font-size: .8rem !important;
    }

    .level-500 ul {
        display: block;
        position: relative;
        list-style-type: none;
        list-style-position: outside;
        text-align: center;
        font-size: .8rem !important;
        margin: 0 !important;
    }

        .level-500 ul li {
            display: inline;
            position: relative;
            padding-right: .5em;
            border-right: 1px solid #ffffff;
        }

            .level-500 ul li a {
                color: #ffffff;
                text-decoration: none;
            }

                .level-500 ul li a:hover {
                    color: #ffffff;
                    text-decoration: underline;
                }

            .level-500 ul li.last {
                border-right: none;
            }


.smallIcon /*formerly known as "new-window-footer-icon" */ {
    height: 14px;
    width: 14px;
    stroke: #ffffff;
    stroke-width: .125em;
    fill: transparent;
}

/*this is in process of being added to the style library, so it is of limited use and will eventually be removed*/
.SecureMessageAttachmentButtonWidth {
    min-width: 140px;
}

/*#################################################################################################################################################################
    Here we are starting the concept of custom styles that aren't present in the DMAC package. Put "Custom" as part of the style name to point out exactly what it
    is (not ideal to retrofit this style name to previous styles all in one go, but maybe if we work on a file with a custom style piece by piece would be fine).
#################################################################################################################################################################*/

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

.Custom-FamilyListBackGroundMinHeight {
    min-height: 8.55rem;
}

.carousel-caption {
    position: static !important;
}

.carousel-control-prev {
    justify-content: start !important;
}

.carousel-control-next {
    justify-content: end !important;
}
/*
    Use this carefully or as an example, but do not 
    change it as it is designed to fit an exact heighton the ref/auth screen
*/
.providerListMaxHeight {
    max-height: 34rem;
}