/** Loading small *************************************************************/
@keyframes lds-eclipse-s {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes lds-eclipse-s {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.lds-eclipse-s {
    position: relative;
}
.lds-eclipse-s div {
    position: absolute;
    -webkit-animation: lds-eclipse 1s linear infinite;
    animation: lds-eclipse 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #bd1d1d;
    -webkit-transform-origin: 80px 82px;
    transform-origin: 80px 82px;
}
.lds-eclipse-s {
    width: 30px !important;
    height: 30px !important;
    -webkit-transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);
    transform: translate(-15px, -15px) scale(0.15) translate(15px, 15px);
}

/******************************************************************************/
.lds-eclipse-s{
    margin-top: 4px;
}


/** Loading Large**************************************************************/
@keyframes lds-eclipse {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes lds-eclipse {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.lds-eclipse {
    position: relative;
}
.lds-eclipse div {
    position: absolute;
    -webkit-animation: lds-eclipse 1s linear infinite;
    animation: lds-eclipse 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #bd1d1d;
    -webkit-transform-origin: 80px 82px;
    transform-origin: 80px 82px;
}
.lds-eclipse {
    width: 200px !important;
    height: 200px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

/******************************************************************************/
.lds-eclipse{
    position: relative;
    top: 50vh;
    transform: translateY(-50%);
    margin: 0 auto;
}

.lds-css.ng-scope.loader{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #D4D4D4;
    z-index:5;
}






@keyframes topnav {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



/* MAIN ***********************************************************************/

.main .col-left, .main .col-right {
    z-index: 15!important;
}

.topnav{
    animation: topnav 1s linear;
    position: fixed;
    top:0;
    z-index: 10;
    width: 100%;
    height: 38px;
    max-height: 38px;
    background: #F8F9FA;
    border-bottom: 1px solid #0C3F57;
    /* overflow: hidden; */
    z-index: 9999;
}
.topnav .container{
    position: relative;
}
#loginHeader{
    position: absolute;
    right: 0;
    max-height: 38px;
}

/* .off-canvas-navigation{
    top: 37px !important;
    border-bottom: 1px solid #EDF0F0;
    border-bottom: 1px solid #F8F9FA;
} */

nav.header{
    margin-top: 38px;
}
/* .off-canvas-navigation .logo img{
    max-width: 164px;
    position: fixed;
}


/* Updated for better contrast - WCAG 2.2 AA compliance */
.sso-loginbox,.sso-button a{
    color: #595959; /* Darker gray for better contrast */
    text-decoration: none;
}

/* Updated for better contrast - WCAG 2.2 AA compliance */
.topnav a, .topnav a:hover{
    color: #000000;
    font-weight: 600; /* Added for better visibility */
}

/* Specific styling for SSO button */
.topnav .sso-button {
    color: #000000; /* Black for maximum contrast */
    font-weight: 600;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    max-height: 38px;
}

/* Styles for SSO button now managed in digital.css for better consistency */

.open, a.open{
    color: #bd1a1a;
}

.icons-login{
    vertical-align: middle;
    width: 24px;
} */

.sso-loginbox{
    /*    position: absolute;
        right: 0;
        top: 40px;
        border: 1px solid black;*/
    /*    width: 200px;
        height: 25px;*/
    text-align: right;
    line-height: 2.5;
}

/* .sso-status,.sso-button{
    float:right;
    margin: 2px 0;
    font-size: 0.85em;
    line-height: 3;
} */

.sso-status{
    overflow: hidden;
    max-width: 74%;
    text-overflow: ellipsis;
    white-space: nowrap;
    float:left;
    margin-right: 0;
}

.sso-login-form-wrapper{
    width: 100%;
    height: 0;
    z-index: 30;
    /* border-bottom: 1px solid #999; */
    overflow: hidden;
    margin-top: 37px;
    background: #D4D4D4;
    /*opacity: 0;*/
}

.sso-login-form-wrapper[aria-hidden="true"]{
    margin-top: 0;
}

.sso-login-form-wrapper,.sso-loading-wrapper{
    position: static;
    /*position: absolute;*/
    top: 38px;
    left: 0;
    /*    border: 1px solid #979999;*/
}

.helper-center{
    /* max-width: 1140px; */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* .helper-center>span{
    font-size: 20px;
    color: #1F3C80;
} */


/* iframe*/

/* needed for iPhone and iPad: scrolling iframe */
.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: 100%;
    /* important:  dimensions or positioning here! */
}

 #login{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 230px;
    border: none;
    background: #D4D4D4;

}

.sso-login-form-close{
    display:block;
    text-align: right;
}

/*.sso-login-form-wrapper header{
    color: blue;
}*/

/* Skip navigation links for accessibility */
.skip-links {
    position: relative;
    z-index: 9999;
}


.skip-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: contents;
}

.ac-nav {
    position: absolute;
    top: 0;
    left: -9999px;
    padding: 10px 15px;
    background-color: #fff;
    color: #0B3A4E;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #0B3A4E;
    z-index: 9999;
    transition: left 0.1s ease-in-out, background-color 0.2s ease;
}

.ac-nav:focus-visible {
    left: 0;
}

.ac-nav:hover {
    background-color: #f0f0f0;
    text-decoration: underline;
}

/* Fix for skip link targets - ensure they're visible when targeted */
#main_nav:target,
#main_content:target,
#footer:target {
    scroll-margin-top: 80px; /* Adjust based on your top navigation height */
    outline: none;
    position: relative;
}

/* Add a pseudo-element to create visible focus indicator when targeted */
#main_nav:target::before,
#main_content:target::before,
#footer:target::before {
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background-color: #ffbf47; /*High visibility color*/
    position: absolute;
    top: 0;
    left: 0;
    animation: fadeOut 2s forwards 1s;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/** Hide easylogin*************************************************************/

#tabs{
    display: none;
}


/* 768 */
@media only screen and (min-width: 48em){

    /* .topnav{
        z-index: 20;
    } */

    /* .topnav .logo{
        float: left;
    }

    .topnav .logo img{
        max-width: 200px;
        width: 100%;
    } */

    .topnav .meta-navigation{
        float: right;
        line-height: 37px;
    }
    /* .topnav .meta-navigation a, .sso-button a{
        color: #333;
    } */

    /* header.header{
        margin-top: 0;
    } */

    nav.breadcrumbs{
        padding-top:50px;
    }

       .sso-login-form-wrapper,.sso-loading-wrapper{
            position: static;
        }

    /* .sso-status,.sso-button{
        font-size: 0.85em;
        line-height: 3.1;
        margin: 2px -3px  2px 20px;
    } */
    .sso-status{
        overflow: hidden;
       position: absolute;
       right: 120px;
    }

    .lds-eclipse{
        top: 50%;
    }

    /* needed for iPhone and iPad: scrolling iframe */
    .scroll-wrapper {
        /*-webkit-overflow-scrolling: touch;*/
        overflow-y: hidden;
        /*height: 100%;*/
        /* important:  dimensions or positioning here! */
    }
    .off-canvas-navigation{
        border-bottom: none;
    }

    .off-canvas-navigation .logo{
        left: 10px!important;
        top: 3px !important;
        z-index: 20;
        position: fixed;
    }
}


/* 1024 */
@media only screen and (min-width: 64em){

    nav.breadcrumbs{
        padding-top:12px;
    }
    body{
        /* margin-top: 37px!important; */
    }

    .topnav{
        height: 38px;
        max-height: 38px;
        /* overflow: hidden; */
    }
    .sso-login-form-wrapper,.sso-loading-wrapper{
        position: fixed;
        margin-left: 0;
        /*margin-top: 40px;*/
        margin-top: -1px;
        border: none;
        z-index: 19;
    }


}

/* Enhanced Login Button with accessibility improvements */
.sso-button {
    color: #0B3A4E;
    /* font-weight: bold; */
    padding: 0.5rem 1rem;
    margin: 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Focus styles for better keyboard navigation */
.sso-button:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Add space between icon and text */
.sso-button i {
    margin-right: 0.5rem;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .sso-button:focus-visible {
        outline: 3px solid CanvasText;
    }
}