.header-desktop,
    .header-mobile{
        background: linear-gradient(to right, var(--league-primary, #003551), var(--league-secondary, #0066AE));
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .custom-logo-link{
        padding: 0!important;
    }
    .header-desktop a,
    .header-mobile a{
        color: #ffffff;
        font-size: 20px;
        text-decoration: none;
    }
    .header-desktop .desktop-athletes-container a{
        color: #fff;
    }
    .header-mobile a{
        font-size: 32px;
    }
    .header-desktop a{
        padding: 10px;
    }
    .desktop-athletes-top:hover,
    .desktop-tools-top:hover,
    .desktop-about-top:hover{
        /* text-decoration:underline; */
        background-color: #ffffff21;
        border-radius: 10px;
    }
    
    .header-mobile li{
        list-style-type: none;
        /* font-weight: bold;         */
    }
    .header-desktop li{
        display: flex;
        align-items: center;
        height: 100%;
        list-style-type: none;
        font-size: 20px;
        /* font-weight: bold; */
    }
    .header-desktop ul{
        display: flex;
        margin: 0;
        height: 100%;
        align-items: center;
    }
    .header-desktop nav{
        display: flex;
        height: 100%;
        align-items: center;
    }
    .header-desktop-saal,
    .header-mobile-saal{
        height: 60px;
    }
    .header-desktop-val,
    .header-mobile-val{
        height: 90px;
    }
    .header-mobile{
        padding-right: 16px;
    }

    @media only screen and (max-width: 1000px) {
        .header-mobile{
            display: flex;            
        }
        .header-desktop{
            display: none;            
        }
    }
    @media only screen and (min-width: 1000px) {
        .header-desktop{
            display: flex;            
        }
        .header-mobile{
            display: none;            
        }
    }
    .login-desktop-container{
        display: flex;
        align-items: center;
        margin-left: 40px;
        gap: 20px;
    }
    .header-mobile-menu{
        display: flex;
        position: absolute;
        z-index: 3;
        right: 0;
        top: 60px;
        /* background-color: #003551; */
        background: linear-gradient(to right, var(--league-primary, #003551), var(--league-secondary, #0066AE));
        width: 0;
        flex-direction: column;
        gap: 20px;
        transition: width 0.5s ease;
        overflow: hidden;
        line-height: 60px;
        border-top: 1px solid #fff;
        min-height: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }
    .header-mobile-hamburger,
    .header-mobile-cross{
        font-size: 34px;
        cursor: pointer;
    }
    .header-mobile-cross{
        display: none;
    }

    .desktop-about-top,
    .desktop-athletes-top,
    .desktop-tools-top{
        position: relative;
        cursor: pointer;
    }
    .mobile-about-top,
    .mobile-athletes-top,
    .mobile-tools-top{
        font-size: 32px;
    }
    .desktop-athletes-container,
    .desktop-about-container,
    .desktop-tools-container{
        display:none;
        position: absolute;
        flex-direction: row;
        background-color: var(--league-secondary, #0066AE);
        top: 75px;
        left: -170px;
        padding:20px;
        gap: 20px;
        width: 520px;
        z-index: 3;
        box-shadow: 3px 2px 6px 2px #00000017;
    }
    .mobile-athletes-container,
    .mobile-tools-container,
    .mobile-about-container{
        padding-left: 40px;
        display: none;
        flex-direction: column;
    }
    .mobile-athletes-container a,
    .mobile-tools-container a,
    .mobile-about-container a{
        font-size: 22px;
    }

    /* .desktop-athletes-top:hover .desktop-athletes-container,
    .desktop-about-top:hover .desktop-about-container,
    .desktop-tools-top:hover .desktop-tools-container{
        display: flex;
    } */
    .desktop-athletes-container div,
    .desktop-tools-container div{
        display: flex;
        flex-direction: column;
        gap:15px;
    }
    .desktop-about-container{
        flex-direction: column;
        gap:15px;
    }
    .desktop-athletes-container a,
    .desktop-about-container a,
    .desktop-tools-container a{
        font-size: 14px;
    }
    .desktop-athletes-container{
        width: 280px;
        left: -100px;
    }
    .desktop-about-container{
        width: 280px;
        left: -110px;
    }
    .desktop-tools-container{
        width: 500px;
        left:-224px;
    }
    .chevron{
        height: 20px;
    }
    .mobile-tools-links-container{
        display: flex;
        flex-direction: column;
        padding-left: 20px;
    }
    .desktop-dropdown-header{
        padding: 10px;
    }

    .desktop-athletes-container:before,
    .desktop-about-container:before,
    .desktop-tools-container:before {
    content: ""; /* Required for :before and :after to show */
    position: absolute;
    top: -8px; /* Adjust this value based on the size of the triangle */
    left: 50%;
    transform: translateX(-50%); /* Center the triangle horizontally */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Adjust size to change the triangle size */
    border-right: 10px solid transparent; /* Adjust size to change the triangle size */
    border-bottom: 10px solid var(--league-secondary, #0066AE); /* Adjust color and size. The color is the color of the triangle */
}
.office-tools-divider{
    flex-direction: row!important;
}