body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}


h1 {
    color: #000;
    font-size: 61px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    margin-top: 0;
    margin-bottom: 0;
}

.side-bar-logOut {
    display: none;
}

.parrent-button-dark {
    height: 56px;
    font-size: 21px;
    background-color: #2A3647;
    border-radius: 10px;
    color: #FFFFFF;
    padding: 16px;
    border: #2A3647 solid 1px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 80ms ease-in, border-color 80ms ease-in, box-shadow 80ms ease-in;
}

.parrent-button-light {
    height: 56px;
    font-size: 21px;
    background-color: transparent;
    border-radius: 10px;
    color: #2A3647;
    padding: 16px;
    border: #2A3647 solid 1px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 80ms ease-in, border-color 80ms ease-in, box-shadow 80ms ease-in;
}

.parrent-button-dark:hover {
    background-color: #29ABE2;
    border-color: #29ABE2;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: background-color 80ms ease-out, border-color 80ms ease-out, box-shadow 80ms ease-out;
}

.parrent-button-light:hover {
    color: #29ABE2;
    border-color: #29ABE2;
    transition: color, border-color, box-shadow 8000ms ease-out;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    transition: background-color 80ms ease-out, border-color 80ms ease-out, box-shadow 80ms ease-out;
}

.parrent-button-dark:active {
    background-color: #091931;
    border-color: #091931;
}

.parrent-button-light:active {
    color: #091931;
    border-color: #091931;
}

/* allround classes here! */

.ht100 {
    height: 100%;
}

.hw30 {
    height: 30px;
    width: 30px;
}

.hw64{
    height: 64px;
    width: 64px;
}


.flex {
    display: flex;
}

.column {
    display: flex;
    flex-direction: column;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.d-none {
    display: none !important;
}

.w100{
    width: calc(100vw - 232px);
}

.w100p{
    width: 100%;
}

.w80{
    width: 80%;
}

.ml-36{
    margin-left: -36px;
}
.ml36{
    margin-left: 36px;
}

.ml68{
    margin-left: 68px;
}

.margin56{
    margin: 56px;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.column-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.paddingLR64 {
    padding: 0px 32px 0px 40px;
}

.gap16 {
    gap: 16px;
}

.gap8 {
    gap: 8px;
}

.mb50{
    margin-bottom: 50px;
}

.mb106{
    margin-bottom: 106px;
}

.mb28 {
    margin-bottom: 8px;
}

/*---------------*/

.menu {
    display: flex;
    width: 232px;
    /* width: 15vw; */
    height: 100vh;
    /* padding: 64px 0px; */
    /* max-height: 1024px; */
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    background: #2A3647;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
    color: #CDCDCD;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    z-index: 999;
    position: relative;
}
.menu a.active {
    background-color: #091931;
}
#header_handy_image{
    display: none;
    height: 39.02px;
    width: 32px;
}

header {
    display: flex;
    width: calc(100vw - 232px);
    height: 104px;
    /* padding: 20px 40px 20px 116px; */
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    position: relative;
    z-index: 1;
    background-color: #FFF;
}

.header_container {
    height: 104px;
}


.header span {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.dropdown-links {
    display: flex;
    padding: 10px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background: #2A3647;
    color: var(--font-nav-color);
    position: absolute;
    top: 107px;
    right: 45px;
    border-radius: 10px 0px 10px 10px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    width: 130px;
    gap:8px;
    /* height: 21px; */
}
.dropdown-links div {
    padding: 18px;
    cursor: pointer;
}
.dropdown {
    display: block;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #CDCDCD;
    text-decoration: none;
    justify-content: center;
    display: flex;
}
nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 229px;
    align-items: center;
    justify-content: center;
}

.menu a {
    color: rgb(205,205,205);
    text-decoration: none;
}

.menu img {
    height: 121.97px;
    width: 100.03px;
}

#menu_icon_contacts,
#menu_icon_board,
#menu_icon_addtask,
#menu_icon_summary {
    height: 25px;
    width: 25px;
}


.menu_footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
    height: 317px;
}

.menu_link_container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 48px;
    width: 184px;
    height: 46px;
    gap: 8px;
    overflow: hidden;
}

.menu_link_container a{
    display: flex;
    align-items: center;
    gap: 16px;
}

.menu_link_container:hover{
    background-color: #091931;
}

.menu_footer_link {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
}

.header_icon_container {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header_icon_container img{
    cursor: pointer;
}

#help_icon {
    height: 32px;
    width: 32px;
}

#help_icon:hover{
    scale: 1.2;
}


#header_initials:hover{
    cursor: pointer;
    filter: brightness(80%);
    background-color: rgba(0, 0, 0, 0.1);
}

.header_flex_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}

.mobile-sideMenu {
    display: none;
}

.initials {
    font-size: 12px;
    font-weight: 300;
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    text-align: center;
    line-height: 34px;
}
.dnone {
    display: none;
}

#side_back_arrow_img{
    height: 32px;
    width: 32px;
    cursor: pointer;
}

#side_back_arrow_img:hover{
    border-radius: 32px;
    background-color: rgba(0, 0, 0, 0.1);
    scale: 1.1;
}

#header_initials{
    height: 56px;
    width: 56px;
    border: 2px solid black;
    border-radius: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:  #29ABE2;
    font-size: 20px;
    font-weight: 600;
}

@media(min-width:1440px) {
    header {
        width: 1208px;
    }
}

@media(max-width: 1000px) {
    header{
        width: 100vw;
    }
    .dnone{
        display: block;
    }
    .menu {
        display: none;
    }

    .mobile-sideMenu {
        display: flex;
    } 

    .mobile-navbar {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 12px;
        gap: 10px;
        /* max-width: 89%; */
        position: fixed;
        height: 80px;
        bottom: 0;
        left: 0;
        right: 0;
        background: #2A3647;
        z-index: 999;
    }
    
    .mobile-menu_link_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: white;
    }
    .mobile-menu_link_container.active {
        background-color: #091931;
    }
    .mobile-menu_link_container img {
        height: 32px;
        width: 32px;
        object-fit: fill;
    }
    .d-none {
        display: flex;
    }

}

@media(max-width:1439px) {
    body {
        display: block
    };
}

@media(max-width:650px){
    header span{
        display: none;
    }

    #header_handy_image{ 
        display: unset;
    }

    #help_icon {
        display: none;
    }

    #sm_icon {
        height: 40px;
        width: 40px;
    }

}

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
::-webkit-scrollbar {
    background-color: #fff;
    width: 14x;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: #c3c3c3;
    border-radius: 16px;
    border: 4px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b0b0b0;
}

::-webkit-scrollbar-thumb:active {
    background-color: #a0a0a0;
}

::-webkit-scrollbar-button:single-button {
    border-style: solid;
    height: 10px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0px 8px 6px 8px;
    border-color: white white #c3c3c3 white;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    border-color: white white #b0b0b0 white;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    border-color: white white #a0a0a0 white;
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 6px 8px 0 8px;
    border-color: #c3c3c3 white white white;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    border-color: #b0b0b0 white white white;
}

::-webkit-scrollbar-button:vertical:single-button:increment:active {
    border-color: #a0a0a0 white white white;
}



/* Bunte Farben, abgestimmt auf das Maintheme-Blau */
.letter-a {
    background-color: #FF6F61 !important; /* Leuchtendes Korallenrot */
}

.letter-b {
    background-color: #FFD700 !important; /* Sonniges Gelb */
}

.letter-c {
    background-color: #32CD32 !important; /* Helles Limettengrün */
}

.letter-d {
    background-color: #00BFFF !important; /* Knalliges Himmelblau */
}

.letter-e {
    background-color: #BA55D3 !important; /* Lebhaftes Lila */
}

.letter-f {
    background-color: #FF6347 !important; /* Helles Tomatenrot */
}

.letter-g {
    background-color: #FF4500 !important; /* Orangerot */
}

.letter-h {
    background-color: #FF69B4 !important; /* Leuchtendes Pink */
}

.letter-i {
    background-color: #FFA500 !important; /* Knalliges Orange */
}

.letter-j {
    background-color: #40E0D0 !important; /* Türkis */
}

.letter-k {
    background-color: #9400D3 !important; /* Intensives Violett */
}

.letter-l {
    background-color: #6A5ACD !important; /* Leuchtendes Blau */
}

.letter-m {
    background-color: #FF7F50 !important; /* Helles Koralle */
}

.letter-n {
    background-color: #4682B4 !important; /* Stahlblau */
}

.letter-o {
    background-color: #00FA9A !important; /* Knalliges Frühlingsgrün */
}

.letter-p {
    background-color: #FF00FF !important; /* Magenta */
}

.letter-q {
    background-color: #9370DB !important; /* Mittleres Lila */
}

.letter-r {
    background-color: #DC143C !important; /* Knalliges Karminrot */
}

.letter-s {
    background-color: #20B2AA !important; /* Helles Türkisgrün */
}

.letter-t {
    background-color: #9932CC !important; /* Helles Dunkelviolett */
}

.letter-u {
    background-color: #FF69B4 !important; /* Leuchtendes Pink */
}

.letter-v {
    background-color: #1E90FF !important; /* Himmelblau */
}

.letter-w {
    background-color: #FF1493 !important; /* Kräftiges Pink */
}

.letter-x {
    background-color: #B22222 !important; /* Feuerrot */
}

.letter-y {
    background-color: #FFD700 !important; /* Goldgelb */
}

.letter-z {
    background-color: #FF8C00 !important; /* Dunkles Orange */
}

/* Umlaute */
.letter-ä {
    background-color: #FF1493 !important; /* Kräftiges Pink */
}

.letter-ö {
    background-color: #00CED1 !important; /* Dunkles Türkis */
}

.letter-ü {
    background-color: #FF69B4 !important; /* Leuchtendes Pink */
}

/* Eszett */
.letter-ß {
    background-color: #FF4500 !important; /* Orangerot */
}