* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
    height: 100dvh;
    scrollbar-width: thin;
    scrollbar-color: #536474 #1A2128;
}

body {
    background-color: #33404D;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    margin: 0;
}

a, #submit_btn, .form-icon, #edit_btn, #cancel_btn, #thisWeek, .termin_add, #add_btn, .btn{
    transition: all 200ms;
}

.site_headline {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 36px;
    color: #ffffff;
    text-align: center;
    margin: 70px 0;
}

.form-icon {
    user-select: none;
}

/*************Cookie-consent*****************/

#cookie-consent {
    background-color: #3A4754;
    min-height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#cookie-consent p {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #ffffff;
}

#cookie-consent h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px 15px 5px 15px;
}

#cookie-consent h3:hover {
    background-color: #445564;
    border-radius: 6px;
}

/****************Login***********************/

#login_body, #register_body, #activation_body, #reset_body {
    background-color: #33404D;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    width: 100vw;
}

#login_body #remember_wrap {
    display: flex;
    justify-content: left;
    color: #ffffff;
    align-items: center;
    gap: 10px;
    transform: translateY(25px);
}

#login_body #remember_wrap label {
    margin-top: 0;
    margin-bottom: 3px;
}

#login_body #remember_wrap input {
    width: 15px;
    height: 15px;
}

/*******Checkbox*********/

.check {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: 18px;
    height: 18px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
  }
  
  .check:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(34,50,84,0.03);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #c8ccd4;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
  }
  
  .check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
  }
  
  .check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
  }
  
  .check:hover:before {
    opacity: 1;
  }
  
  .check:hover svg {
    stroke: #4285f4;
  }
  
  #cbx:checked + .check svg {
    stroke: #4285f4;
  }
  
  #cbx:checked + .check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
  }
  
  #cbx:checked + .check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
  }
  

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


.form_window {
    width: 500px;
    height: 550px;
    background-color: #3D4B59;
    border-radius: 8px;
    text-align: center;
}

.form_window h1, #reset_window h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 36px;
    color: #ffffff;
    margin: 42px 0 13px 0;
}

.form_window form {
    display: flex;
    flex-direction: column;
    padding: 0 50px;
}

.form_window form label, #reset_window form label {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    text-align: left;
    margin-top: 37px;
}

.form_window form .form_input {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #dddddd;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 6px;
    background-color: #1A2128;
    padding: 2px 5px 0 45px;
    box-sizing: border-box;
}

.form_window form #password {
    padding-right: 35px;
}

.form_window form .form_input::placeholder {
    color: #a8a8a8;
}

.form_window form .form_input:focus {
    border: none;
}

#login_window #login_form #pw_reset {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #D1D1D1;
    text-align: right;
    text-decoration: none;
}

#login_window #login_form #pw_reset:hover {
    color: #ffffff;
}

.form_window form #submit_btn, #reset_window form #submit_btn {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
    height: 45px;
    background-color: #4B5B69;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    margin-top: 70px;
    cursor: pointer;
}

.form_window form #submit_btn:hover, #reset_window form #submit_btn:hover {
    background-color: #607180;
}

.form_window form  p, #reset_window p, #register_window p {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    margin: 30px auto 0 auto;
}

.form_window form  p a, #register_window h3 a {
    text-decoration: none;
    color: #4E86F2;
}

.form_window form  p a:hover, #register_window h3 a:hover {
    color: #77a4ff;
}

.form_window form  .form-icon {
    color: #CECECE;
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px; 
}

.form_window form .input-icon {
    margin: 3px auto;
    width: 100%;
    position: relative;
    user-select: none;
}

@media only screen and (max-width: 650px) {
    .form_window {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }
    .form_window h1, #reset_window h1 {
        margin-top: 100px;
    }
    #register_body #register_window {
        height: 100dvh;
    }
    body {
        height: 100dvh;
    }
}

@media only screen and (max-width: 550px) {
    #reset_window {
        width: 100% !important;
        height: 100dvh !important;
        transform: translateY(50px);
    }
}

@media only screen and (max-width: 400px) {
    .form_window form {
        padding: 0 25px;
    }
}

/*******Register********/

#register_window {
    height: unset; 
    padding-bottom: 30px;
}

#register_window #register_form label {
    margin-top: 30px;
}

#register_window h3, #login_window h3, #reset_window h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #ff5b5b;
    margin-top: 30px;
    text-align: center;
}

#register_window #register_form #wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 27px;
}

#register_window #register_form #wrapper .input_wrapper {
    display: unset;
    text-align: left;
    width: 49%;
}

#register_window #register_form #wrapper .input_wrapper .input-icon {
    width: 100%;
    margin: 3px 0;
}

/****Account activation*****/

#acc_window {
    padding: 80px;
    background-color: #3D4B59;
    border-radius: 8px;
    text-align: center;
}

#acc_window h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 5px;
}

#acc_window img {
    width: 80px;
    height: 8%;
    margin-bottom: 60px;
    user-select: none;
}

#acc_window a, #reset_window a {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #2f8ce9;
    text-decoration: none;
}

/******Password reset*******/

#reset_window {
    padding: 90px 60px;
    background-color: #3D4B59;
    border-radius: 8px;
}

#reset_window form #submit_btn {
    margin-top: 50px;
}

#reset_window h1 {
    margin: 0 0 80px 0;
}

#reset_window p {
    max-width: 375px;
    margin-top: 20px;
}

#reset_body #arrow_back {
    color: #ffffff;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 99;
}

#reset_body #arrow_back:hover {
    color: #2f8ce9;
}

form  .visibility {
    color: #CECECE;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer; 
}

/**************************Stundenplan**************************************/

#stundenplan_body #stundenplan .stunde {
    cursor: pointer;
    width: 220px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 10px;
}

#stundenplan_body #stundenplan .empty {
    background-color: #1A2128;
}

#stundenplan_body #stundenplan .empty span {
    display: none;
}

#stundenplan_body #stundenplan .wrapper {
    border-radius: 10px;
    box-sizing: border-box; 
    margin: 10px 0;
}

#stundenplan_body #stundenplan .stunde .form-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    display: none;
}

#stundenplan_body #stundenplan .stunde .form-icon:hover {
    color: rgb(243, 93, 93);
}

#stundenplan_body #stundenplan .stunde:hover .form-icon {
    display: unset;
}

#stundenplan_body #stundenplan .stunde:hover {
    filter: brightness(90%);
}

#stundenplan_body #stundenplan .empty:hover {
    filter: brightness(160%);
}

#stundenplan_body #stundenplan {
    background-color: #1A2128;
    padding: 50px 20px 20px 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    width: 100%;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 50px;
}

#stundenplan_body #stundenplan_table {
    display: flex;
    justify-content: space-evenly;
}

#stundenplan_body .tag {
    margin: 0 10px;
}

#stundenplan_body .datum {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    margin-bottom: 4px;
}

#stundenplan_body .wochentag {
    font-weight: 300;
    font-style: normal;
    font-size: 10px;
    color: #374A5C;
    text-transform: uppercase;
    margin-bottom: 15px;
}

#stundenplan_body #stundenplan hr, #stundenplan_body #kalender hr{
    border: 1px solid #2C3843;
}

#stundenplan_body #stundenplan_window {
    max-width: 1300px;
    margin: 0 auto; 
}

#stundenplan_body #stundenplan_window #edit_btn {
    font-weight: 400;
    font-style: normal;
    height: 33px;
    background-color: #1A2128;
    border-radius: 7px;
    color: #ffffff;
    border: none;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
}

#stundenplan_body #stundenplan_window #edit_btn:hover, #stundenplan_body #stundenplan_window #week_select .form-icon:hover, #stundenplan_body #stundenplan_window #thisWeek:hover {
    background-color: #27323d;
}

#stundenplan_body #stundenplan_window #edit_btn .form-icon {
    font-size: 20px;
    margin-right: 10px;
    transform: translateY(-1px);
}

#stundenplan_body #stundenplan_window #week_select a {
    text-decoration: none;
}

#stundenplan_body #stundenplan_window #week_select .form-icon {
    width: 33px;
    height: 33px;
    background-color: #1A2128;
    border-radius: 7px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

#stundenplan_body #stundenplan_window #prev {
    padding-left: 9px;
}

#stundenplan_body #stundenplan_window #thisWeek {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 120px;
    height: 33px;
    background-color: #1A2128;
    border-radius: 7px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    margin-left: 20px;
    user-select: none;
}

#stundenplan_body #stundenplan_window .thisWeek {
    background-color: #4A5766 !important;
    color: #EDEDED !important;
    cursor: default !important;
}

#stundenplan_body #stundenplan_window #week_select {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#stundenplan_body #stundenplan_window #week_select h2 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #ffffff;
    margin: 0 13px;
    white-space: nowrap;
}

#stundenplan_body #stundenplan_window #buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

#stundenplan_body #add_form {
    height: 700px;
}

#stundenplan_body #add_termin {
    height: 730px;
}

#stundenplan_body #add_termin p {
    color: #ffffff;
    font-size: 16px;
    margin-right: 15px;
}

/*********Toggle Switch ****************/

.switch {
    --button-width: 3.5em;
    --button-height: 2em;
    --toggle-diameter: 1.5em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 3em;
    --color-grey: #cccccc;
    --color-green: #4296f4;
    cursor: pointer;
   }
   
   .slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
   }
   
   .slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
   }
   
   .switch input[type="checkbox"]:checked + .slider {
    background-color: var(--color-green);
   }
   
   .switch input[type="checkbox"]:checked + .slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
   }
   
   .switch input[type="checkbox"] {
    display: none;
   }
   
   .switch input[type="checkbox"]:active + .slider::after {
    width: var(--toggle-wider);
   }
   
   .switch input[type="checkbox"]:checked:active + .slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
   }

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

#stundenplan_body .stundenplan_form {
    display: none;
    flex-direction: column;
    width: 540px;
    background-color: #33404D;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    padding: 35px 83px 0 83px;
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    border-radius: 10px;
    z-index: 15;
    overflow: auto;
    overflow-x: hidden;
}

#stundenplan_body .stundenplan_form h2,
#noten_form h1 {
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
}

#stundenplan_body .stundenplan_form #close_icon,
#noten_form  .form-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ffffff;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
}

#stundenplan_body .stundenplan_form #close_icon:hover,
#noten_form  .form-icon:hover {
    background-color: #3a4e61;
}

#stundenplan_body .stundenplan_form label,
#noten_form label {
    font-size: 16px;
    color: #ffffff;
    margin: 22px 0 4px 0;
}

#stundenplan_body .stundenplan_form .form_input,
#noten_form .input input,
#noten_form #kategorie {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #dddddd;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 6px;
    background-color: #1A2128;
    padding: 2px 0 0 20px;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}

#stundenplan_body .stundenplan_form #add_fach {
    width: 375px;
    height: 40px;
    background-color: #394756;
    border-radius: 5px;
    color: #ffffff;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-left: 20px;
    box-sizing: border-box;
    margin: 9px 0 26px 0;
    flex-shrink: 0;
}

#stundenplan_body .stundenplan_form #add_fach #add_icon {
    margin-right: 15px;
}

#stundenplan_body .stundenplan_form hr,
#noten_form hr {
    background-color: #273038;
    border: none;
    height: 1px;
    width: 100%;
    flex-shrink: 0;
}

#stundenplan_body .stundenplan_form .wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    align-items: center;
}

#stundenplan_body .stundenplan_form .button_wrap {
    margin-top: 60px;
}

#stundenplan_body .stundenplan_form .form_btn,
#noten_form #cancel_btn,
#noten_form #submit_btn {
    height: 45px;
    border-radius: 5px;
    color: #ffffff;
    text-transform: uppercase;
    border: none;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    padding-top: 3px;
}

#stundenplan_body .stundenplan_form #cancel_btn,
#noten_form #cancel_btn {
    width: 150px;
    background-color: #1A2128;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
}

#stundenplan_body .stundenplan_form #cancel_btn:hover,
#noten_form #cancel_btn:hover {
    background-color: #252f38;
}

#stundenplan_body .stundenplan_form #submit_btn,
#noten_form #submit_btn {
    width: 215px;
    background-color: #1B79D8;
}

#stundenplan_body .stundenplan_form #submit_btn:hover,
#noten_form #submit_btn:hover {
    background-color: #44a0fc;
}

#stundenplan_body #add_termin hr,
#noten_form hr {
    margin-top: 32px;
    flex-shrink: 0;
}

#stundenplan_body .stundenplan_form #date {
    text-transform: uppercase;
    width: 285px;
}

#stundenplan_body .stundenplan_form .input_container {
    width: min-content;
}

#stundenplan_body .stundenplan_form #color {
    width: 75px;
    height: 42px;
    border: none;
    border-radius: 5px;
}

#stundenplan_body .stundenplan_form #from, 
#stundenplan_body .stundenplan_form #to {
    width: 180px;
}

#popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 14;
    display: none;
    opacity: 0;
    transition: all 100ms;
}

#stundenplan_body #stundenplan .stundenanzeige {
    margin-top: 15px;
}

#stundenplan_body #stundenplan .stundenanzeige p {
    height: 80px;
    margin: 10px 0;
}

/***Loader***/

.loading_screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1A2128;
    z-index: 1;
    top: 0;
    left: 0;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 100ms;
}

  
.loader {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-left-color: transparent;
    width: 36px;
    height: 36px;
    animation: spin89345 1s linear infinite;
    border-radius: 50%;
}
  
@keyframes spin89345 {
    0% {
        transform: rotate(0deg);
    }
  
    100% {
        transform: rotate(360deg);
    }
}

/***Kalender********/

#stundenplan_body #kalender {
    display: flex;
    background-color: #1A2128;
    justify-content: space-evenly;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    padding: 25px 50px 10px 50px;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
    gap: 3px;
}

#stundenplan_body #kalender .tag {
    color: #ffffff;
    text-align: center;
}

#stundenplan_body #kalender .termin {
    width: 220px;
    min-height: 25px;
    border-radius: 7px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    padding: 1px 1px 1px 22px;
    box-sizing: border-box;
    position: relative;
}

#stundenplan_body #kalender .termin a {
    color: #ffffff;
}

#stundenplan_body #kalender .termin .form-icon {
    font-size: 21px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
}

#stundenplan_body #kalender .termin .form-icon:hover {
    color:rgb(243, 93, 93);
}

#stundenplan_body #kalender .termin_add {
    cursor: pointer;
    background-color: #222A33;
    user-select: none;
    padding: 0;
}

#stundenplan_body #kalender .termin_add:hover {
    background-color: #384655;
}

@media only screen and (max-width: 1300px) {
    #stundenplan_body .tag {
        width: calc(20%);
        margin: 0 5px;
    }
    #stundenplan_body #kalender .tag {
        width: calc(20% - 10px);
        margin: 0;
        font-size: 14px;
    }
    #stundenplan_body #stundenplan .stunde {
        width: 100%;
        padding: 0 4px;
    }
    #stundenplan_body #kalender .termin {
        width: 100%;
        padding: 0 4px 0 22x;
    }
    #stundenplan_body #stundenplan .stundenanzeige {
        width: 20px;
        margin: 0;
        transform: translateY(20px);
    }
    #stundenplan_body #stundenplan_table {
        justify-content: center;
        margin: 0 5px;
    }
    #stundenplan_body #kalender {
        padding: 50px 20px 20px 40px;
    }
    #stundenplan_body {
        overflow-x: hidden;
    }
    #stundenplan_body .datum {
        font-size: unset;
    }
    #stundenplan_body #kalender .termin {
        font-size: unset;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #stundenplan_body #stundenplan_window {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 1000px) {
    #stundenplan_body #stundenplan hr,
    #stundenplan_body #kalender hr {
        display: none;
    }
    #stundenplan_body #stundenplan .stundenanzeige {
        display: none;
    }
    #stundenplan_body #kalender {
        padding: 50px 20px 20px 20px;
    }
    #stundenplan_body #stundenplan_window {
        padding: 0;
    }
}

@media only screen and (max-width: 600px) {
    #stundenplan_body .stundenplan_form {
        width: 100vw;
        height: 100dvh !important; 
        padding: 35px 10% 30px 10%;
        border-radius: 0;
    }
    #stundenplan_body .stundenplan_form #date {
        width: 100%;
    }
    #stundenplan_body .stundenplan_form .date_container {
        width: calc(100% - 100px);
    }
    #stundenplan_body .stundenplan_form #from, #stundenplan_body .stundenplan_form #to {
        width: 100%;
    }
    #stundenplan_body .stundenplan_form .time_container {
        width: 50%;
    }
    #stundenplan_body .stundenplan_form .wrap {
        gap: 20px;
    }
    #stundenplan_body .stundenplan_form #add_fach {
        width: 100%;
    }
    #stundenplan_body .stundenplan_form #submit_btn, #noten_form #submit_btn {
        width: 100%;
    }
    #stundenplan_body #kalender .termin {
        font-size: 12px;
    }
    #stundenplan_body #stundenplan .empty {
        background-color: #1c232b;
    }
    #stundenplan_body #stundenplan .empty span {
        display: block;
        font-size: 12px;
        color: #688099;
    }   
    body {
        height: 100dvh;
    }
}

@media only screen and (max-width: 500px) {
    #stundenplan_body #stundenplan_window #edit_btn,
    #stundenplan_body #stundenplan_window #thisWeek {
        width: 100%;
    }
    #stundenplan_body #stundenplan_window #buttons {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 30px;
    }
    #stundenplan_body #stundenplan_window #week_select {
        justify-content: center;
        width: 100%;
        margin-bottom: 10px;
    }
    #stundenplan_body #stundenplan_window #thisWeek {
        margin: 7px 0;
    }
    #stundenplan_body #stundenplan_window #week_select h2 {
        width: calc(100% - 92px);
        text-align: center;
    }
    #stundenplan_body #kalender .termin .form-icon {
        font-size: 17px;
        left: 0;
        top: 48%;
    }
}

@media only screen and (max-width: 420px) {
    #stundenplan_body #stundenplan,
    #stundenplan_body #kalender {
        padding: 20px 5px;
    }
    #stundenplan_body .datum {
        font-size: 13px;
    }
    #stundenplan_body .stundenplan_form {
        padding: 35px 15px 30px 15px;
    }
    #stundenplan_body #kalender .termin {
        font-size: 10px;
    }
}



/*******************Notenmanager**************************/

#noten_body #main_wrapper {
    display: flex;
    justify-content: space-evenly;
    font-family: "Roboto", sans-serif;
}

#noten_body #main_wrapper #notenverlauf #verlauf {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 580px;
    height: 270px;
    background-color: #3F4D5A;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 15px;
}

#noten_body #main_wrapper #notenverlauf #verlauf #durchschnitt {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170px;
}

#noten_body #main_wrapper #notenverlauf #verlauf #durchschnitt h2 {
    color: #ffffff;
    font-weight: 300;
    width: 55px;
    height: 55px;
    text-align: center;
    border-radius: 6px;
    font-size: 32px;
    padding: 9px 1px 0 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    user-select: none;
}

#noten_body #main_wrapper #notenverlauf #verlauf #durchschnitt h3 {
    font-weight: 300;
    font-size: 16px;
    color: #607080;
    text-transform: uppercase;
    margin-bottom: 20px;
}

#noten_body #main_wrapper #notenverlauf #verlauf #durchschnitt p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}

#noten_body #main_wrapper .area_headline {
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 30px;
}

#noten_body #main_wrapper #notenverlauf #neuste .note {
    display: flex;
    width: 580px;
    min-height: 60px;
    background-color: #3F4D5A;
    border-radius: 7px;
    margin-bottom: 7px;
    color: #ffffff;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    position: relative;
}

#noten_body #main_wrapper #notenverlauf #neuste .note .punkte {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
    flex-shrink: 0;
}

#noten_body #main_wrapper #notenverlauf #neuste .opion_icon {
    position: absolute;
    right: 10px;
    cursor: pointer
}

#noten_body #main_wrapper #notenverlauf #neuste .note .info {
    margin-left: 15px;
}

#noten_body #main_wrapper #notenverlauf #neuste .note .info h3 {
    font-weight: 400;
    font-size: 18px;
}

#noten_body #main_wrapper #notenverlauf #neuste .note .info h3 .fach_span {
    font-weight: 300;
    white-space: nowrap;
}

#noten_body #main_wrapper #notenverlauf #neuste .note .info p {
    font-weight: 400;
    font-size: 12px;
    color: #718EA9;
    padding-top: 3px;
}

#noten_body #main_wrapper #notenverlauf #neuste {
    height: 220px;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

#noten_body #main_wrapper #meine_faecher #faecher {
    height: 600px;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding-bottom: 30px;
    box-sizing: border-box;
}

#noten_body #main_wrapper #meine_faecher .fach {
    width: 640px;
    height: 65px;
    background-color: #3F4D5A;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 5px 20px 5px 5px;
    box-sizing: border-box;
    color: #ffffff;
    position: relative;
}

#noten_body #main_wrapper #meine_faecher .fach .fach_color {
    width: 9px;
    height: 55px;
    border-radius: 5px;
}

#noten_body #main_wrapper #meine_faecher .fach .spliter {
    display: flex;
    align-items: center;
}

#noten_body #main_wrapper #meine_faecher .fach h2 {
    font-weight: 400;
    color: #CECECE;
    font-size: 18px;
    margin-left: 20px;
}

#noten_body #main_wrapper #meine_faecher .fach a {
    text-decoration: none;
}

#noten_body #main_wrapper #meine_faecher .fach .info {
    text-align: center;
    margin-right: 20px;
    width: 71px;
}

#noten_body #main_wrapper #meine_faecher .fach .info h3 {
    font-weight: 400;
    font-size: 16px;
}

#noten_body #main_wrapper #meine_faecher .fach .info p {
    font-size: 12px;
    color: #607080;
    text-transform: uppercase;
    padding-top: 2px;
}

#noten_body #main_wrapper #meine_faecher .fach .punkte {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#noten_body #main_wrapper #meine_faecher .fach .form-icon {
    cursor: pointer;
    padding: 3px;
    border-radius: 5px;
}

#noten_body #main_wrapper #meine_faecher .fach .kontext_notenmanager {
    right: 19px;
    top: 52px;
}

#noten_body #main_wrapper #meine_faecher #add_btn {
    background-color: #485664;
    border-radius: 10px;
    width: 160px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    margin: 30px auto 0 auto;
    user-select: none;
}

#noten_body .fach_form {
    height: 500px;
}

#noten_body #main_wrapper #meine_faecher #add_btn:hover {
    background-color: #556677;
}

#noten_body .empty_placeholder {
    color: #969696;
    text-align: center;
    margin-top: 50px; 
}

#noten_body #chartContainer {
    width: 380px;
}

@media only screen and (max-width: 1370px) {
    #noten_body #main_wrapper #meine_faecher .fach {
        width: 500px;
    }
}


@media only screen and (max-width: 1150px) {
    #noten_body #main_wrapper {
        flex-direction: column;
        align-items: center;
    }
    #noten_body #main_wrapper #meine_faecher {
        width: 90%;
        margin: 50px auto 0 auto;
        max-width: 820px;
        height: max-content;
    }
    #noten_body #main_wrapper #notenverlauf #neuste .note, 
    #noten_body #main_wrapper #notenverlauf #verlauf,
    #noten_body #main_wrapper #meine_faecher .fach  {
        width: 100%;
    }
    #noten_body #main_wrapper #notenverlauf {
        width: 90%;
        max-width: 820px;
    }
    #noten_body #chartContainer {
        width: calc(100% - 200px);
    }
}

@media only screen and (max-width: 470px) {
    #noten_body #main_wrapper #notenverlauf #verlauf {
        flex-direction: column;
        height: unset;
        padding-bottom: 30px;
    }
    #noten_body #chartContainer {
        width: 90%;
        margin-bottom: 30px;
    }
    #noten_body #main_wrapper #meine_faecher .fach .lehrer,
    #noten_body #main_wrapper #meine_faecher .fach .kategorie {
        display: none;
    }
}

/************************Fach***********************/

#fach_body #fach_sidebar {
    width: 500px;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    border-left: 1px solid #435465;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding-bottom: 50px;
    background-color: #33404D;
    z-index: 13;
}

#fach_body .headline {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#fach_body .goal_headline {
    justify-content: space-between;
}

#fach_body .headline a {
    color: #ffffff;
    text-decoration: none;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #485664;
    border-radius: 10px;
}

#fach_body #fach_sidebar h1 {
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    margin: 45px 0;
}

#fach_body #fach_sidebar h1 span {
    font-weight: 300;
    font-size: 20px;
}

#fach_body #fach_sidebar #task_frame {
    max-height: 330px;
}

#fach_body #fach_sidebar #task_frame #tasks {
    max-height: 250px;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    margin-top: 15px;
}

#fach_body  .tile_heading {
    font-weight: 400;
    font-size: 20px;
}

#fach_body #fach_sidebar #task_frame #tasks .task {
    background-color: #3F4D5A;
    border-radius: 10px;
    margin-bottom: 5px;
    position: relative;
    min-height: 60px;
    padding: 12px 0;
    box-sizing: border-box;
}

#fach_body #fach_sidebar #task_frame #tasks .task .check_btn {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: none;
}  

#fach_body #fach_sidebar #task_frame #tasks .task p {
    font-weight: 300;
    font-size: 15px;
    margin: 0 0 4px 50px;
}

#fach_body #fach_sidebar #task_frame #tasks .task h3 {
    font-weight: 400;
    font-size: 12px;
    margin-left: 50px;
    color: #718EA9
}

#fach_body #fach_sidebar #task_frame #tasks .task a {
    color: #718EA9;
    text-decoration: none;
}

#fach_body #fach_sidebar #task_frame #tasks .task a:hover {
    text-decoration: underline;
}

#fach_body #fach_sidebar #info_frame, 
#fach_body #fach_sidebar #goal_frame,
#fach_body #fach_sidebar #task_frame,
#fach_body #fach_sidebar #termine_frame {
    width: 100%;
    background-color: #1A2128;
    border-radius: 10px;
    color: #ffffff;
    margin-top: 15px;
    padding: 20px;
    box-sizing: border-box;
}

#fach_body #fach_sidebar #info_frame {
    height: 140px;
}

#fach_body #fach_sidebar #info_frame #info_content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    height: 50px;
    margin-top: 22px;
}

#fach_body #fach_sidebar #info_frame #info_content hr {
    height: 100%;
    width: 1px;
    border: none;
    background-color: #2C3843;
}

#fach_body #fach_sidebar #info_frame #info_content div {
    width: 150px;
}

#fach_body #fach_sidebar #info_frame #info_content div h3 {
    font-weight: 400;
    font-size: 18px;
}

#fach_body #fach_sidebar #info_frame #info_content div p {
    color: #4E5E6D;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
}

#fach_body #fach_sidebar #goal_frame {
    height: 100px;
}

#fach_body #fach_sidebar #goal_frame div h3 {
    font-weight: 400;
    font-size: 18px;
    margin-right: 12px;
}

#fach_body #fach_sidebar #goal_frame div #edit_btn {
    width: 26px;
    height: 26px;
    background-color: #3F4D5A;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#fach_body #fach_sidebar #goal_frame div #edit_btn .form-icon {
    font-size: 20px;
}

#fach_body #fach_sidebar #goal_frame #progress_bar {
    height: 8px;
    width: 100%;
    background-color: #3F4D5A;
    border-radius: 4px;
    margin-top: 25px;
    position: relative;
}

#fach_body #fach_sidebar #goal_frame #progress_bar #bar {
    position: absolute;
    height: 8px;
    top: 0;
    left: 0;
    background-color: #1B79D8;
    border-radius: 4px;
}

#fach_body #fach_sidebar #termine {
    margin-top: 15px;
}

#fach_body #fach_sidebar #termine .termin {
    width: 100%;
    background-color: #3F4D5A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 55px;
    font-weight: 400;
    margin-bottom: 5px;
    padding: 5px 0;
    box-sizing: border-box;
}

#fach_body #fach_sidebar #termine .termin .color {
    position: absolute;
    width: 7px;
    height: 82%;
    border-radius: 4px;
    left: 5px;
}

#fach_body #fach_sidebar #termine .termin h3 {
    font-size: 18px;
    font-weight: 400;
}

#fach_body #fach_sidebar #termine .termin .left {
    margin-left: 25px;
}

#fach_body #fach_sidebar #termine .termin .left p {
    font-size: 12px;
    color: #718EA9;
    padding-top: 3px;
}

#fach_body #fach_sidebar #termine .termin .right p {
    font-size: 12px;
    color: #C8D7E4;
    text-align: right;
    margin-right: 15px;
}

/*******Goal Form*******/

#fach_body #goal_form {
    width: 400px;
    height: 160px;
    background-color: #3F4D5A;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px;
    padding: 20px;
    box-sizing: border-box;
    display: none;
    z-index: 15;
}

#fach_body #goal_form h1 {
    color: #ffffff;
    font-weight: 400;
    font-size: 24px;
}

#fach_body #goal_form .headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#fach_body #goal_form .headline .form-icon {
    background-color: #485664;
    border-radius: 10px;
    padding: 3px;
    color: #ffffff;
    cursor: pointer;
}

#fach_body #goal_form input {
    height: 40px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 300;
    box-sizing: border-box;
    margin-top: 40px;
    color: #ffffff;
}

#fach_body #goal_form #goal_input {
    background-color: #1A2128;
    width: 240px;
    padding-left: 10px;
}

#fach_body #goal_form #submit_btn {
    width: 100px;
    margin-left: 16px;
    cursor: pointer;
    background-color: #1B79D8;
}

/*******Fach hauptteil*********/

#fach_body #holder {
    width: calc(100vw - 500px);
    display: flex;
    justify-content: center;
}

#fach_body #content {
    padding: 0 20px 50px 20px;
    box-sizing: border-box;
}

#fach_body #content h2 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    margin: 65px 0 24px 0;
}

#fach_body #content .wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}

#fach_body #content .card {
    background-color: #3F4D5A;
    border-radius: 10px;
    box-sizing: border-box;
}

#fach_body #content #info {
    width: 365px;
    height: 130px;
    padding: 22px;
}

#fach_body #content #info h1 {
    color: #ffffff;
    font-weight: 400;
    font-size: 24px;
}

#fach_body #content #noten {
    width: 595px;
    height: 130px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#fach_body #content .noten_wrapper .note {
    text-align: center;
    width: 100px;
}

.tool {
    position: relative;
    cursor: default;
}

.tool .tooltip {
    color: #ffffff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -49px;
    background-color: #1A2128;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 7px 23px;
    box-sizing: border-box;
    box-shadow: rgba(26, 26, 26, 0.2) 0px 7px 29px 0px;
    user-select: none;
    white-space: nowrap;
    font-size: 16px;
}

.tool:hover .tooltip {
    display: flex;
}

#fach_body #content .noten_wrapper .note h3 {
    font-weight: 300;
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 18px;
}

#fach_body #content .noten_wrapper #info h3 {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin: 0 auto 10px auto;
}

#fach_body #content .noten_wrapper .note p {
    font-weight: 300;
    color: #5B7389;
    font-size: 16px;
    text-transform: uppercase;
}

#fach_body #content #noten hr {
    height: 95px;
    border: 1px solid #425A71;
}

#fach_body #content #noten #gesammt h3,
#fach_body #content #noten #gesammt p {
    font-weight: 400;
}

#fach_body #content .chart {
    padding: 5px;
    width: 480px;
    height: 300px;
}

#fach_body #content #bar_graph {
    padding: 29px 5px 5px 5px;
    background: url(img/bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

#fach_body #content #bar_graph .bar {
    width: 100%;
    margin: 0 4px;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    padding-top: 10px;
    box-sizing: border-box;
    user-select: none;
	max-width: 65px;
}

#fach_body #content #bar_graph .hidden {
    display: none;
}

#fach_body #content #bar_graph #kategorie {
    display: flex;
    height: 100%;
    align-items: end;
    width: 95%;
	justify-content: space-evenly;
}

#fach_body #content #bar_graph #chart_container {
    height: 81%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-evenly;
}

#fach_body #content #bar_graph #beschriftung {
    display: flex;
    color: #ffffff;
    justify-content: space-evenly;
    user-select: none;
    width: 95%;
    margin: 10px auto 0 auto;
}

#fach_body #content #bar_graph #beschriftung p {
    width: 70px;
    text-align: center;
    color: #879CB1;
    font-weight: 300;
    font-size: 12px;
}
 
#fach_body #content #bar_graph #legend {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    width: 240px;
    margin: 15px auto 0 auto;
}

#fach_body #content #bar_graph #legend .dark {
    color: #98a0a7;
}

#fach_body #content #bar_graph #legend .clr {
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

#fach_body #content #bar_graph #legend .legend_item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

#fach_body #content #tool_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: #ffffff;
}

#fach_body #content #tool_wrapper #order_dropdown {
    display: none;
    width: 150px;
    background-color: #3F4D5A;
    border-radius: 5px;
    position: absolute;
    flex-direction: column;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    transform: translateY(10px);
    z-index: 20;
}

#fach_body #content #tool_wrapper .visible {
    display: flex !important;
}

#fach_body #content #tool_wrapper #order_dropdown .dd_item {
    width: 100%;
    text-align: center;
    border-radius: 5px;
}

#fach_body #content #tool_wrapper #order_dropdown .dd_item:hover {
    background-color: #495a69;
}

#fach_body #content #tool_wrapper #order_dropdown .dd_item a {
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    display: block;
    padding: 12px 0;
}

#fach_body #content #tool_wrapper #order_selected {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 7px 0;
}

#fach_body #content #tool_wrapper #add_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 130px;
    height: 33px;
    background-color: #465767;
    border-radius: 7px;
    font-size: 16px;
    cursor: pointer;
}

#fach_body #content #tool_wrapper #add_btn i {
    font-size: 18px;
}

#fach_body #content #tool_wrapper #add_btn:hover {
    background-color: #374655;
}

#fach_body #content #table_headline {
    display: flex;
    justify-content: space-between;
    padding: 0 100px 0 48px;
    background-color: #3F4D5A;
    height: 40px;
    border-radius: 6px;
    align-items: center;
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

#fach_body #content #table_headline .left,
#fach_body #content #table_headline .right {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#fach_body #content #table_headline .left {
    gap: 40px;
}

#fach_body #content #noten_table .note {
    display: flex;
    background-color: #3F4D5A;
    border-radius: 5px;
    height: 55px;
    margin-bottom: 6px;
    color: #ffffff;
    align-items: center;
    padding: 0 25px 0 47px;
    justify-content: space-between;
    position: relative;
}

#fach_body #content #noten_table .note .left {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 50%;
}

#fach_body #content #noten_table .note .right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

#fach_body #content #noten_table .note .color {
    width: 7px;
    height: 45px;
    border-radius: 4px;
}

#fach_body #content #noten_table .note .punkte {
    font-size: 24px;
    max-width: 50px;
    height: 45px;
    width: 45px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#fach_body #content #noten_table .note .bezeichnung {
    font-size: 16px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

#fach_body #content #noten_table .note .kategorie {
    width: 70px;
}

#fach_body #content #noten_table .note .gewichtung {
    width: 40px;
}

#fach_body #content #noten_table .note .date,
#fach_body #content #noten_table .note .kategorie,
#fach_body #content #noten_table .note .gewichtung {
    font-weight: 300;
    font-size: 14px;
    text-align: center;
}

#fach_body #content #table_headline .kategorie {
    width: 150px;
}

#fach_body #content #noten_table .note .kategorie_frst {
    font-size: 12px;
    text-transform: uppercase;
    color: #B9B9B9;
    font-weight: 300;
    position: absolute;
    bottom: 9px;
    left: 180px;
    display: none;
}

#fach_body #content #noten_table .note .form-icon {
    cursor: pointer;
    transition: all 100ms;
    padding: 3px;
    border-radius: 5px;
    box-sizing: border-box;
}

#fach_body #content #noten_table .note .form-icon:hover {
    background-color: #485969 !important;
}

.open {
    display: flex !important;
}

.kontext_menue {
    display: none;
    width: 170px;
    height: 90px;
    background-color: #404F5C;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px;
    border: 1px solid #455563;
    position: absolute;
    right: 25px;
    top: 46px;
    z-index: 5;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    user-select: none;
    font-weight: 300;
}

.kontext_menue hr {
    border: 1px solid #455563;
    margin: 0 9px;
}

.kontext_menue .item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    height: 100%;
    padding-left: 9px;
    border-radius: 5px;
}

.kontext_menue .item:hover {
    background-color: #495a69;
}

.kontext_menue #delete {
    color: #E85656;
    font-weight: 400;
}

.kontext_menue .item .form-icon {
    font-size: 20px;
}

#fach_body .ausgefahren {
    right: 0px !important;
}

#fach_body #toggle_icon {
    transform: rotate(180deg);
    margin: 10px;
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 1;
    color: #ffffff;
    display: none;
    transition: all 300ms;
    border-radius: 6px;
    padding: 8px;
}

#fach_body #fach_bar_toggle {
    color: #ffffff;
    padding: 30px 20px 10px 10px;
    display: none;
}

#fach_body #toggle_icon:hover,
#noten_body #main_wrapper #meine_faecher .fach .form-icon:hover {
    background-color: #445564;
}

#fach_body .ausgefahren_icon {
    transform: rotate(0deg) !important;
    right: 510px !important;
}

#noten_form {
    position: fixed;
    z-index: 15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #33404D;
    width: 540px;
    height: 580px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    color: #ffffff;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 35px 83px 0 83px;
    box-sizing: border-box;
    overflow: auto;
}

#noten_form .input {
    display: flex;
    flex-direction: column;
}

#noten_form .input_wrapper label {
    margin-top: 30px;
}

#noten_form .input_wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

#noten_form #kategorie_input,
#noten_form #date_input,
#noten_form #bezeichnung_input {
    width: 100%;
}

#noten_form .button_wrap {
    margin-top: 60px;
}

#noten_form .input input::-webkit-outer-spin-button,
#noten_form .input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#noten_form .input input {
    -moz-appearance: textfield;
}

#delete_form {
    width: 460px;
    height: 325px;
    background-color: #33404D;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 60px 30px 60px;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    transition: all 100ms;
}

#delete_form .form-icon {
    color: #E85656;
    font-size: 72px;
}

#delete_form h2 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    margin: 45px 0 30px 0;
}

#delete_form #button_wrap {
    display: flex;
    gap: 20px;
}

#delete_form #button_wrap #cancel_btn,
#delete_form #button_wrap #submit_btn {
    width: 160px;
    height: 45px;
    background-color: #404F5C;
    border-radius: 5px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    color: #ffffff;
    text-transform: uppercase;
}

#delete_form #button_wrap #cancel_btn:hover,
#delete_form #button_wrap #submit_btn:hover {
    background-color: #465868;
}

#delete_form #button_wrap #submit_btn { 
    color: #E85656;
}

.btn_line_padding {
    padding-top: 3px;
}

@-moz-document url-prefix() {
    .btn_line_padding {
        padding-top: 0px !important;
    }
}

#delete_form p {
    font-size: 12px;
    font-weight: 300;
    color: #54687B;
    margin-top: 30px;
}

/****************Einstellungen*******************/

#settings_body #content_wrapper {
    display: flex;
    justify-content: center;
    gap: 120px;
}

#settings_body #content_wrapper hr {
    border: 1px solid #3C4B59;
}

#settings_body #user_settings .input input {
    color: #959595;
}

#settings_body .sub_heading {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 50px;
    transform: translateX(-15px);
}

#settings_body .section {
    padding: 20px 20px 20px 40px;
    margin-bottom: 30px;
}

#settings_body #wraper {
    display: flex;
    gap: 30px;
}

#settings_body .input {
    display: flex;
    flex-direction: column;
    justify-content: left;
}

#settings_body .input label {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 4px;
    text-align: left;
}

#settings_body .input input {
    background-color: #1A2128;
    border-radius: 5px;
    height: 45px;
    border: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    padding-left: 10px;
    box-sizing: border-box;
    margin-bottom: 40px;
    width: 415px;
    font-family: 'Roboto', sans-serif;
}

#settings_body #wraper .input input {
    width: 193px;
}


#settings_body .btn {
    height: 40px;
    min-width: 193px;
    border-radius: 5px;
    padding: 0 40px;
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    cursor: pointer;
    background-color: #1B79D8;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

#settings_body .btn:hover {
    background-color: #3591ec;
}

#settings_body .delete_btn:hover {
    background-color: #ff6e6e; 
}

#settings_body .delete_btn {
    width: 210px;
    background-color: #EE5252;
    display: flex;
    align-items: center;
    justify-content: center;
}

#settings_body #delete_form {
    height: 438px;
}

#settings_body #delete_form input {
    width: 340px;
}

#settings_body h3 {
    color: #EE5252;
    font-size: 16px;
    font-weight: 400;
    margin-top: 30px;
}
 
#settings_body #change_pw .input {
    position: relative;
}

#settings_body #change_pw .input input {
    padding-right: 35px;
    box-sizing: border-box;
}

#settings_body #change_pw .input .visibility {
    transform: translateY(-17px);
}

#settings_body #mail_info {
    background-color: #394756;
    padding: 7px 14px;
    width: 415px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 50px;
}

#settings_body #mail_info a {
    color: #ffffff;
}

#settings_body #mail_info a span {
    color: #4E86F2;
}

#settings_body #mail_info a span:hover {
    color: #77a4ff;
}

/******Responsive*********/

@media only screen and (max-width: 1530px) {
    #fach_body #fach_sidebar {
        position: fixed;
        right: -100%;
        transition: all 300ms;
    }
    #fach_body #holder {
        width: 100%;
        padding: 0;
    }    
    #fach_body #toggle_icon {
        display: block;
    }
}

@media only screen and (max-width: 1200px) {
    #settings_body #content_wrapper {
        gap: 0;
        justify-content: space-evenly;
    }
}

@media only screen and (max-width: 1032px) {
    #fach_body #content {
        width: 100%;
    } 
    #fach_body #content #noten_table .note .left {
        width: 40%;
    }
    #fach_body #content .card {
        width: 100%;
    }
    #fach_body #content .wrapper:not(#fach_body .noten_wrapper) {
        flex-direction: column;
    }  
}

@media only screen and (max-width: 960px) {
    #settings_body #content_wrapper {
        flex-direction: column;
        align-items: center;
    }
    #settings_body #content_wrapper hr {
        width: 90%;
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 850px) {
    #fach_body #content #noten_table .note .left {
        width: 30%;
    }
}

@media only screen and (max-width: 780px) {
    #fach_body #content #table_headline,
    #fach_body #content #noten_table .note {
        padding-left: 6px;
    }
    #fach_body #content #table_headline {
        padding-right: 70px;
    }
    #fach_body #content #noten_table .note .left {
        gap: 10px;
        width: 40%;
    }
    #fach_body #content #noten_table .note .right {
        gap: 30px;
    }
    #fach_body #content #table_headline .kategorie {
        width: 92px;
    }
    #fach_body #content #table_headline .left {
        gap: 20px;
    }
}

@media only screen and (max-width: 680px) {
    #fach_body #content #noten_table .note .left {
        width: 30%;
    }
    #fach_body .noten_wrapper {
        flex-direction: column;
    }
    #fach_body #content #info,
    #fach_body #content #noten {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    #fach_body #content #noten_table .note {
        position: relative;
        padding-right: 15px;
    }
    #fach_body #content #noten_table .note .date {
        position: absolute;
        bottom: 9px;
        left: 65px;
        color: #B9B9B9;
        font-size: 12px;
    }
    #fach_body #content #noten_table .note .bezeichnung {
        position: absolute;
        top: 12px;
        left: 65px;
        width: calc(100% - 250px);
    }
    #fach_body #content #table_headline {
        display: none;
    }
    #fach_body #content #noten_table .note .right {
        gap: 10px;
    }
    #fach_body #fach_sidebar {
        width: 100%;
    }
    #fach_body #fach_bar_toggle {
        display: block;
    }
    #noten_form {
        width: 100%;
        height: 100dvh !important;
        padding: 35px 60px 30px 60px;
        border-radius: 0;
    }
    #noten_form #submit_btn {
        width: 100%;
    }
    #noten_form #time {
        width: 95px !important;
    }
    #noten_form .input input {
        padding-left: 10px;
    }
    #fach_body #content #noten_table .note .kontext_menue {
        right: 15px;
    }
    body {
        height: 100dvh;
    }
}

@media only screen and (max-width: 480px) {
    #delete_form {
        width: 90%;
        padding: 20px 30px 30px 30px;
    }
    #fach_body #fach_sidebar {
        padding: 0 10px 30px 10px;
    }
    #settings_body #mail_info {
        width: 95%;
    }
    #settings_body .section {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    #settings_body .sub_heading {
        transform: none;
    }
    #settings_body .section form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #settings_body .input input {
       width: 100%;
    }
    #settings_body .input {
        width: 95%;
    }
    #settings_body #password {
        width: 100%;
    }
    #settings_body #wraper {
        gap: 0;
        width: 95%;
        justify-content: space-between;
    }
    #settings_body #wraper .input input {
        width: 100%;
    }
    #settings_body #wraper .input {
        width: calc(50% - 15px);
    }
    #settings_body .btn {
        width: 95%;
    }
    #settings_body #pw_error {
        line-height: 30px;
    }
}

@media only screen and (max-width: 420px) {
    #fach_body #content #noten_table .note .kategorie_frst {
        display: block;
    }
    #fach_body #content #noten_table .note .kategorie {
        display: none;
    }
    #fach_body #content #noten_table .note .gewichtung {
        font-size: 12px;
        color: #B9B9B9;
        position: absolute;
        bottom: 9px;
        left: 190px;
    }
    #fach_body #content #noten_table .note .bezeichnung {
        width: calc(100% - 120px);
    }
    #delete_form #button_wrap {
        flex-direction: column;
        width: 90%;
    }
    #delete_form #button_wrap #cancel_btn, #delete_form #button_wrap #submit_btn {
        width: 100%;
    }
    #delete_form {
        height: 410px;
    }
    #noten_form {
        width: 100%;
        height: 100dvh !important;
        padding: 35px 20px 30px 20px;
    }
    body {
        height: 100dvh;
    }
    #fach_body #goal_form {
        width: 100%;
    }
    #fach_body #goal_form #goal_input {
        width: calc(100% - 120px);
    }
    #fach_body #content #noten {
        flex-direction: column;
        height: 400px;
    }
    #fach_body #content #noten hr {
        display: none;
    }
}


#info {
	text-align: left;
	padding: 80px;
}
	
#info h1:not(#fach_body #content #info h1) {
	margin: 50px 0 30px 0;
}
	
#info h2 {
	margin: 40px 0 20px 10px;
}

#info h3 {
	margin: 30px 0 10px 10px;
}
	
#info ul {
	padding-left: 40px;
}
	
#info li {
	margin: 10px 0;
}

#info p:not(#fach_body #content .noten_wrapper .note p) {
	margin-left: 20px;	
}
	
#info a {
	color: #1B79D8;	
	word-wrap: break-word;
	overflow-wrap: break-word;
}
	
	
#impressum-text {
			color: #5E7184;
			text-decoration: none;
			position: fixed;
			z-index: 9999;
			bottom: 20px;
			right: 20px;
			font-size: 14px;
		}
	


@media only screen and (max-width: 1000px) {
	#info {
		padding: 5%;
	}
}

	
@media only screen and (max-width: 500px) {
	#info {
		padding: 20px;
	}
	#info h1 {
		font-size: 28px;
	}
}