:root {
    --primary-color: #2A292E;
    --secondary-color: #F6F6F6;
    --tritery-color: #676570;
    --quadery-color: #ffffff;
    --fifth-color: #BBAABB;
    --sixth-color: #000000;
    --confirm-color: rgb(93, 255, 93);
    --confirm-color-light: rgb(151, 255, 151);
    --cancel-color: rgb(255, 79, 79);
    --cancel-color-light: rgb(255, 131, 131);
    /* --wait-color: rgb(255, 237, 71); */
    --wait-color: rgb(255, 215, 71);
    /* --wait-color-light: rgb(254, 242, 140); */
    --wait-color-light: rgb(255, 227, 124);
    /* --shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
    --shadow-medium: 0 3px 7px rgba(0,0,0,0.15), 0 0 7px rgba(0,0,0,0.15), 3px 0 7px rgba(0,0,0,0.15);
    --shadow-strong: 0 4px 10px rgba(0,0,0,0.2), 0 0 10px rgba(0,0,0,0.2), 4px 0 10px rgba(0,0,0,0.2); Old versions, new versions are softer and have no offset */
    --shadow: 0 0 10px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 0 14px rgba(0,0,0,0.15), 0 0 14px rgba(0,0,0,0.15), 0 0 14px rgba(0,0,0,0.15);
    --shadow-strong: 0 0 20px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.2);
    /* --shadow: 0 0 20px rgba(0,0,0,0.05), 0 0 20px rgba(0,0,0,0.05), 0 0 20px rgba(0,0,0,0.05);
    --shadow-medium: 0 0 28px rgba(0,0,0,0.1), 0 0 28px rgba(0,0,0,0.1), 0 0 28px rgba(0,0,0,0.1);
    --shadow-strong: 0 0 40px rgba(0,0,0,0.15), 0 0 40px rgba(0,0,0,0.15), 0 0 40px rgba(0,0,0,0.15); Even softer, but in my opinion too soft */

    --width-sidebar: 250px;
}

body {
    background-color: var(--secondary-color);
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-attachment: fixed; /* Fix the background image */
    background-size: contain; /* Resize the background image to cover the entire container */
    height: 100%; /* Set a specific height */
    margin: 0; /* Remove default margin */

    font-family: Arial, Helvetica, sans-serif;
    color: var(--primary-color);
    font-weight: lighter;
    font-size: 16px;
}

*::selection {
    background-color: var(--primary-color);
    color: var(--quadery-color);
}

/* Login / Register -------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------*/

.welcome-message {
    width: auto;
    max-width: calc(100% - ((100vh / 4) * 2.5) - 115px); /* Not a perfect solution, the max hight and width of the login-box, can still brick it */
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--primary-color);
    font-weight: light;
    font-size: 30px;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--quadery-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 30px;
    left: 30px;
}

.login-box {
    aspect-ratio: 2.5 / 4;
    height: calc(100% - 60px);
    max-height: 700px;
    min-height: 400px;
    top: 30px;
    right: 30px;
    position: fixed;
    background-color: var(--quadery-color);
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 15px;
}

.content-holder {
    height: calc(100% - (45px + 10px));
    width: 100%;
    overflow-y: auto;
    margin-bottom: 10px;
}

.login-main-header {
    width: 100%;
    height: auto;
    color: var(--primary-color);
    font-size: 60px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
}

.login-header {
    width: 100%;
    height: auto;
    color: var(--primary-color);
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: light;
    margin-bottom: 10px;
    cursor: default;
}

.login-header-mid {
    width: 100%;
    height: auto;
    color: var(--primary-color);
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: light;
    margin-bottom: 10px;
    cursor: default;
}

.login-header-sub {
    width: 100%;
    height: auto;
    color: var(--tritery-color);
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: light;
    margin-bottom: 10px;
    cursor: default;
}

.inputV2 {
    width: 100%;
    height: 45px;
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    outline: none;
    border-radius: 15px;
    margin-bottom: 10px;
    position: relative;
    padding: 15px; /* Adjust the padding as needed */
    box-sizing: border-box;
}

.inputV2:hover {
    /*background-color: var(--tritery-color);*/
    background-color: var(--secondary-color);
}

/* For most modern browsers */
.inputV2::placeholder {
    color: var(--fifth-color); /* Replace with your desired color */
    opacity: 1; /* Ensures full opacity across different browsers */
}

/* For Firefox */
.inputV2:-moz-placeholder {
    color: var(--fifth-color);
    opacity: 1;
}

/* For Internet Explorer */
.inputV2:-ms-input-placeholder {
    color: var(--fifth-color);
}

.dropdown-decent {
    height: 45px;
    width: 100%;
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 15px;
    margin-top: auto;
    cursor: pointer;
    transition-duration: 200ms;
}
/*
.dropdown-decent:hover {
    color: var(--quadery-color);
    background-color: var(--tritery-color);
}
*/
/* Custom styling for the dropdown arrow */
.dropdown-container {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.dropdown-container::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-top-color: var(--primary-color);
}

.dropdown-decent {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 15px;
}

.dropdown-decent:focus {
    outline: none;
}

.form-fields input {
    width: 100%;
    height: 45px;
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    outline: none;
    border-radius: 15px;
    margin-bottom: 10px;
    position: relative;
    padding: 15px; /* Adjust the padding as needed */
    box-sizing: border-box;
    transition-duration: 200ms;
}

.form-fields .errorlist {
    list-style-type: none;
    color: red;
    padding-inline-start: 10px;
}


.form-fields input[type="color"] {
    padding: 5px;
}
/*
.form-fields input:hover, input:focus {
    border: solid 3px;
    border-color: var(--primary-color);
} /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.form-fields .helptext {
    padding-left: 20px;
    color: #6F6F6F;
}

.form-fields label {
    width: 100%;
    height: auto;
    color: var(--primary-color);
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: light;
    display: block;
    margin-top: 40px;
    margin-bottom: 10px;
    margin-left: 10px;
}


.workbench {
    position:fixed;
    display: inline-block;
    right: 40px;
    margin-top: 20px;
    transition-duration: 200ms;
    z-index:100;
}

.workbench a, .special-button {
    cursor: pointer;
    padding: 8px 15px;
    background-color: var(--secondary-color);
    border-radius: 5px;
    margin-right: 5px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    transition-duration: 200ms;
    font-size: 16px;
}

.workbench a:hover, .special-button:hover {
    background-color: var(--fifth-color);
}

.addshadow {
    box-shadow: var(--shadow);
}

.addshadow:focus {
    box-shadow: var(--shadow-strong);
}

.error-box {
    width: 100%;
    height: auto;
    color: red;
    text-align: center;
}

.switch-container {
    display: grid;
    overflow-y: hidden;
    overflow-x: auto;
    gap: 5px;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    /* max-height: 60px; */
    /* min-height: 60px; */
    margin-bottom: 10px;
    grid-auto-flow: column; /* Was original: not there */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.switch-container::-webkit-scrollbar {
    display: none;
}

.switch-button {
    flex: 0 0 auto; /* This ensures each button only takes up its own space */
    height: 45px;
    min-width: 60px; /* You can set a minimum width for each button */
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    /* Add more styling as needed */
}


.switch-button.active {
    background-color: var(--primary-color);
    color: white;
}

.switch-button:hover {
    background-color: var(--tritery-color);
    color: white;
}


.language-switch-container {
    display: grid;
    overflow-y: hidden;
    overflow-x: auto;
    gap: 5px;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    min-height: 46px;
    grid-auto-flow: column; /* Was original: not there */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.language-switch-container::-webkit-scrollbar {
    display: none;
}

.language-switch-button {
    flex: 0 0 auto; /* This ensures each button only takes up its own space */
    height: 45px;
    min-width: 120px; /* You can set a minimum width for each button */
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding-top:15px;
    transition-duration: 200ms;
}

.language-switch-button.active {
    background-color: var(--primary-color);
    color: white;
}

.language-switch-button:hover {
    background-color: var(--tritery-color);
    color: white;
}

.language-input:checked + .language-switch-button {
    background-color: var(--primary-color);
    color: white;
}

.profilepicturepreview {
    width: 50%;
    margin-left: 25%;
    margin-top: 30px;
    margin-bottom: 10px;
    aspect-ratio: 1 / 1;
    background-color: var(--primary-color);
    box-shadow: var(--shadow);
    border: none;
    border-radius: 50%;
}

.file-upload-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.file-upload-trigger {
    padding: 15px;
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    flex-grow: 1; /* Allow the button to grow and fill the container */
}

.file-upload-name {
    font-size: 15px;
    color: var(--primary-color);
    flex-grow: 2; /* Allow the file name span to grow and fill the remaining space */
    overflow: hidden; /* Ensure the content does not overflow */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add an ellipsis when the content overflows */
}

.login-file-display {
    width: 100%;
    height: auto;
    max-height: 80px;
    overflow-y: scroll;
}

.button-normal {
    height: 45px;
    width: 100%;
    font-size: 15px;
    color: var(--secondary-color);
    background-color: var(--primary-color);
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 15px;
    margin-top: auto;
    /* margin-bottom: 10px; */
    cursor: pointer;
    align-items: flex-start;
    text-align: center;  
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    transition-duration: 200ms;
}
.anchor-container a{
    padding-top: 15px;
    display: inline-block;
    vertical-align: middle; /* Vertically align the anchor within its container */
}


.button-normal:hover {
    color: var(--quadery-color);
    background-color: var(--tritery-color);
}

.button-normal:active {
    
}

.button-normal:disabled {
    /* color: var(--primary-color); */
    color: var(--quadery-color);
    /* color: var(--tritery-color); */
    background-color: var(--secondary-color);
    cursor: auto;
}

.button-medium {
    height: 45px;
    width: 100%;
    font-size: 15px;
    color: var(--quadery-color);
    background-color: var(--tritery-color);
    border: none;
    border-radius: 15px;
    margin-top: auto;
    /* margin-bottom: 10px; */
    cursor: pointer;
    transition-duration: 200ms;
}
/* Fix the action styles*/
.button-medium:hover {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

.button-medium:active {
    
}

.button-medium:disabled {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    cursor: auto;
}

.button-decent {
    height: 45px;
    width: 100%;
    font-size: 15px;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 15px;
    margin-top: auto;
    /* margin-bottom: 10px; */
    cursor: pointer;
    transition-duration: 200ms;
}
/* Fix the action styles*/
.button-decent:hover {
    color: var(--quadery-color);
    background-color: var(--tritery-color);
}

.button-decent:active {
    
}

.button-decent:disabled {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    cursor: auto;
}

.button-delete {
    height: 45px;
    width: 100%;
    font-size: 15px;
    color: var(--cancel-color);
    background-color: var(--secondary-color);
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 15px;
    margin-top: auto;
    /* margin-bottom: 10px; */
    cursor: pointer;
}

.button-delete:hover {
    color: var(--secondary-color);
    background-color: var(--cancel-color-light);
}

.button-delete:active {
    
}

.button-delete:disabled {
    color: var(--primary-color);
    background-color: var(--secondary-color);
    cursor: auto;
}

.language-input {
    display: none; /* Hide the actual checkbox */
}

.language-grid {
    /*display: inline-grid;
    grid-template-columns: repeat(auto-fit, min-content);
    gap: 15px; */
    /* Since it's inline-grid, you may also want to center it in its container */
    justify-content: center;
}

.language {
    height: 45px;
    width: auto;
    display: inline-block;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--secondary-color);
    border: none;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--primary-color);
    cursor: pointer;
}

.language-input:checked + .language {
    background-color: var(--primary-color);
    color: white;
}

.language:hover {
    background-color: var(--tritery-color);
    color: white;
}

.credid-card {
    width: auto;
    aspect-ratio: 8 / 5;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    background-color: var(--primary-color);
    border-radius: 25px;
    overflow: auto;
}

.credid-card-logo {
    height: 50px;
    width: auto;
    top: 0;
    left: 0;
    margin: 25px;
    background-image: url('/Users/samuelskorsetz/Downloads/DALL·E 2023-12-30 17.16.47 - A background design for a Physics course on an online tutoring website. The style should resemble frosted glass with a dominant orange color, creating.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.credid-card-provider {
    height: 50px;
    width: auto;
    top: 0;
    right: 0;
    margin: 25px;
    background-image: url('/Users/samuelskorsetz/Downloads/DALL·E 2023-12-30 17.16.47 - A background design for a Physics course on an online tutoring website. The style should resemble frosted glass with a dominant orange color, creating.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.credid-card-IBAN {
    height: 30px;
    width: auto;
    margin-bottom: 10px;
    margin-left: 25px;
    bottom: 0;
    left: 0;
    color: var(--quadery-color);
}

.credid-card-BIC {
    height: 30px;
    width: auto;
    margin-bottom: 25px;
    margin-left: 25px;
    bottom: 0;
    left: 0;
    color: var(--quadery-color);
}

.logo-box {
    height: 50%;
    width: 100%;
    /*background-color: red;*/
    display: flex;
    justify-content: center;
}

.login-logo {
    height: 70%;
    margin-top: 10%;
    border-radius: 30px;
    aspect-ratio: 1 / 1;
    background-color: var(--primary-color);
    background-position: center center;
    background-size: contain;
}

.checkbox-holder * {
    box-sizing: border-box;
}
.checkbox-holder .checkboxV1-label {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: inline-block;
}
.checkbox-holder .checkboxV1-label:not(:last-child) {
    margin-right: 0px;
}
.checkbox-holder .checkboxV1-label:hover {
    background: var(--secondary-color);
}
.checkbox-holder .checkboxV1-label span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-holder .checkboxV1-label span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    transform: scale(1);
    border: 1.5px solid var(--primary-color);
    transition: all 0.2s ease;
    /*box-shadow: 0 1px 1px rgba(0,16,75,0.05);*/
}
.checkbox-holder .checkboxV1-label span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: var(--quadery-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-holder .checkboxV1-label span:last-child {
    padding-left: 5px;
    line-height: 18px;
    width: calc(100% - 23px);
}
.checkbox-holder .checkboxV1-label:hover span:first-child {
    border-color: var(--primary-color);
}
.checkbox-holder .checkboxV1 {
    position: absolute;
    visibility: hidden;
}
.checkbox-holder .checkboxV1:checked + .checkboxV1-label span:first-child {
    background: var(--primary-color);
    border-color: var(--primary-color);
    animation: checkboxV1-animation 0.4s ease;
}
.checkbox-holder .checkboxV1:checked + .checkboxV1-label span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-holder .checkboxV1-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}
@media screen and (max-width: 640px) {
    .checkbox-holder .checkboxV1-label {
    width: 100%;
    display: inline-block;
    }
}
@-moz-keyframes checkboxV1-animation {
    50% {
    transform: scale(0.9);
    }
}
@-webkit-keyframes checkboxV1-animation {
    50% {
    transform: scale(0.9);
    }
}
@-o-keyframes checkboxV1-animation {
    50% {
    transform: scale(0.9);
    }
}
@keyframes checkboxV1-animation {
    50% {
    transform: scale(0.9);
    }
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 45px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary-color);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 35px;
    width: calc(50% - 5px);
    left: 5px;
    bottom: 5px;
    background-color: var(--primary-color);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--primary-color);
  }
  
  input:checked + .slider::before {
    background-color: var(--secondary-color);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 15px;
  }
  
  .slider.round:before {
    border-radius: 10px;
  }













/* Dashboard -------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------*/

.sidebar {
    width: var(--width-sidebar);
    height: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--quadery-color);
    padding: 15px;
    box-shadow: var(--shadow); /* Could be changed to medium to highlight that it is higher */
    overflow-y: auto; /* Makes sidebar scrollable if content overflows */
    max-height: 100vh; /* Sets the maximum height to 100% of the viewport height */
    z-index: 100;
}

.topbar {
    height: 65px; /* probably needs to be auto */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: none;
    position: fixed;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);

    background-color: var(--quadery-color);
}

.logo {
    height: 75px;
    aspect-ratio: 1 / 1;
    display: block;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    /* margin-top: 30px; */
    margin-bottom: 15px;
    border-radius: 7.5px;
    /* border-radius: 15px; */
}

.burger-container {
    height: 50px;
    width: 50px;
    margin: 5px;
    position: absolute;
    right: 10px;
    /*display: inline-block;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: var(--secondary-color);
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 15px;
    border: none;
}

.burger-bar1, .burger-bar2, .burger-bar3 {
    width: 30px;
    height: 4px;
    background-color: #333;
    /*margin: 6px 0;*/
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    transition: 0.4s;
    border-radius: 2px;
}

.burger-change .burger-bar1 {
    /*transform: translate(0, 11px) rotate(-45deg);*/
    transform: translate(0, 9px) rotate(-45deg);
}

.burger-change .burger-bar2 {opacity: 0;}

.burger-change .burger-bar3 {
    /*transform: translate(0, -11px) rotate(45deg);*/
    transform: translate(0, -9px) rotate(45deg);
}

.navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.navigation li {
    margin-bottom: 7.5px;
    position: relative; /* For positioning the notification badge */
    cursor: pointer;
}

.navigation a {
    text-decoration: none;
    color: var(--primary-color);
    display: block;
    padding: 11.25px 15px;
    border-radius: 7.5px;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for navigation links */
.navigation a:hover {
    background-color: #e1e1e1;
}

/* Navigation link icons */
.navigation a img {
    width: 15px; /* Icon size, adjust as needed */
    height: auto;
    margin-right: 7.5px; /* Space between icon and text */
    vertical-align: middle; /* Aligns icon with text */
}

.navigation-notification {
    background-color: var(--cancel-color);
    height: 18px;
    width: auto;
    min-width: 18px;
    position: absolute;
    top: 11.5px;
    right: 14px;
    border-radius: 4px;
    color: var(--quadery-color);
    text-align: center;
    padding: 1px;
    box-sizing: border-box;
    /* display: none; */
}

.account-prev-holder {
    position: -webkit-sticky; /* Safari */
    position: fixed;
    width: var(--width-sidebar);
    height: 115px;
    margin-left: -15px;
    bottom: 0px;
    padding: 15px;
    box-sizing: border-box;
    background-color: var(--quadery-color);
}

.account-prev {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 7.5px;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
    overflow-y: hidden;
}

.account-prev-image {
    height: 65px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--primary-color);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: var(--shadow);
    margin-right: 10px;
}

.account-prev:hover .account-prev-image {
    box-shadow: var(--shadow-medium);
    /* transition-duration: 200ms; */
}

.account-prev-text {
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;

    overflow-y: hidden;
}

.account-prev-text-top {
    height: calc(100% - 20px);
    width: 100%;
    font-size: 20px;
    padding-top: calc(25px / 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.account-prev-text-bot {
    height: 20px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding-left: 25px;
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.menu-button {
    height: 60px;
    width: 60px;
    display: block;
    position: absolute;
    right: 10px;
    background-color: var(--secondary-color);
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 7.5px;
    border: none;
    cursor: pointer;
}

.menu-button:hover {
    background-color: var(--tritery-color);
}

.menu-button:active {
    background-color: green;
}

.dashboard-content {
    padding: 30px;
    position: fixed;
    left: 250px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto; /* Adds vertical scrollbar when needed */
    overflow-x: hidden;
}

.coockie-overlay {
    position: fixed;
    width: calc(100% - var(--width-sidebar));
    padding: 30px;
    box-sizing: border-box;
    bottom: 0px;
    right: 0px;
    z-index: 50;
    background-color: var(--quadery-color);
    box-shadow: var(--shadow);
}

/*
.daybox {
    height: 250px;
    background-color: var(--quadery-color);
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    box-sizing: border-box;
}
*/
.daybox-row-flex {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    gap: 5px;
    box-sizing: border-box;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.daybox-row-flex::-webkit-scrollbar {
    display: none;
}

.upcoming-dashboard {
    height: 100%;
    width: 100%;
    min-width: 150px;
    /*background-color: blue;*/
    border-radius: 15px;
    box-sizing: border-box; /* Include padding and border in the element's total dimensions */
    padding: 10px;
    background-color: var(--tritery-color);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow-x: scroll;
}

.upcoming-dashboard:hover {
    opacity: 80%;
}

.upcoming-dashboard-text1 {
    height: calc(20% - 5px);
    margin-top: 5px;
    width: 100%;
    color: var(--quadery-color);
    font-size: large;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
/*    box-sizing: border-box; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-dashboard-text2 {
    height: calc(30% - 5px);
    margin-top: 5px;
    width: 100%;
    color: var(--quadery-color);
    display: flex;
    justify-content: center;
    align-items: top;
/*    box-sizing: border-box; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-dashboard-text3 {
    height: calc(30% - 5px);
    margin-top: 5px;
    width: 100%;
    color: var(--quadery-color);
    display: flex;
    justify-content: center;
    align-items: top;
/*    box-sizing: border-box; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: small;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjust '300px' to your desired width */
    gap: 15px;
}
  
.course {
    aspect-ratio: 3 / 4;
    background-color: var(--quadery-color);
    border-radius: 30px;
    box-shadow: var(--shadow);
    cursor: pointer;
    position: relative;
    transition-duration: 200ms;
}

.course:hover {
    box-shadow: var(--shadow-medium);
}

.course-no-hover.course:hover {
    box-shadow: var(--shadow);
    cursor: not-allowed;
}

.course:hover .course-tutor-profilepicture {
    box-shadow: var(--shadow-medium);
}

.course-backround {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

.course-foreground {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.course-backround-image{
    height: 50%;
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-size: cover;
    background-position: center center;
    position: absolute;
    margin-top: 0%;
    z-index: 3;
}

.course-backround-transition {
    height: 30%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
    position: absolute;
    margin-top: 30%;
    z-index: 4;
}

.course-tutor-profilepicture {
    height: 30%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center center;
    box-shadow: var(--shadow);
    margin-top: 15%;
    margin-bottom: 10%;
    border-radius: 50%;
    transition-duration: 200ms;
}

.course-subject-name{
    max-height: 8%;
    height: auto;
    margin-bottom: 1%;
    font-size: 180%;
    font-weight: bold;
    text-align: center;
}

.course-marker{
    height: 4%;
    color: var(--tritery-color);
    font-size: 80%;
    font-weight: light;
    margin-bottom: 1%;
}

.course-tutor-name {
    max-height: 6%;
    height: auto;
    margin-bottom: 1%;
    font-size: 100%;
    font-weight: bolder;
    text-align: center;
}

.course-next-period {
    max-height: 6%;
    height: auto;
    margin-bottom: 1%;
    font-size: 100%;
    text-align: center;
}

.addnew-course {
    aspect-ratio: 3 / 4;
    background-color: var(--quadery-color);
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
    cursor: pointer;
}

.addnew-course:hover {
    background-color: #e1e1e1;
}

.addnew-course-inner {
    display: flex;
    justify-content: center; /* Centers horizontally in a flex row */
    align-items: center; /* Centers vertically in a flex column */
    flex-direction: column; /* Stacks children vertically */
    height: 100%; /* Full height of the viewport */
}

.addnew-course-inner img {
    width: 40%;
    aspect-ratio: 1 / 1;
}

.dashboard-overlay {
    z-index: 101;
    position: absolute;
    width: 80%;
    background-color: white;
    margin: 10%;
    top: 0;
    left: 0;
    border-radius: 5px;
    border: 2px solid black;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
}

.dashboard-overlay td {
    padding-left: 20px;
}

.dashboard-overlay th {
    text-align: left;
}

.additional_information td {
    padding-left: 20px;
}


.additional_information th {
    text-align: left;
}

.content-block {
    width: 100%;
    height: auto;
    background-color: var(--quadery-color);
    box-shadow: var(--shadow);
    padding: 15px;
    margin-bottom: 30px;
    border: none;
    border-radius: 30px;
    box-sizing: border-box;
    position: relative;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.content-block::-webkit-scrollbar {
    display: none;
}

.content-block h1 {
    padding-bottom: 20px;
}

.toggle-container {
    width: 100%;
    border-bottom: 2px solid var(--fifth-color);
}

.toggle-container:last-of-type {
    border-bottom: none;
}

.toggle-content-block h2 {
    padding-left: 40px;
    display: inline-block;
    user-select: none;
    -webkit-user-select: none;
    cursor:default;
}

.toggle-hint {
    display: inline-block;
    right: 0px;
}

.toggle-content {
    display: none;
}

.toggle-content th {
    padding-left: 20px;
}

.toggle-arrow::after {
content: '\25B6'; /* Unicode character for a right-pointing triangle (▶) */
font-size: 18px;
display: inline-block;
margin-right: 5px;
transition: transform 0.3s ease-in-out;
margin-left: 30px;
}

.expanded .toggle-arrow::after {
transform: rotate(90deg);
}

.toggle-container {
text-align: left;
}

.subject-selector-backround {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    z-index: 2;
    /* position: relative; /* If anything realted to this is fucked, it is this line, just delete it */
}

.subject-selector-backround-image {
    height: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    /* position: absolute; /* If anything realted to this is fucked, it is this line, just delete it */
}

.subject-selector-backround-transition {
    height: 100%;
    width: 80px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
    position: relative;
    margin-left: -80px;
    z-index: 3;
}

.subject-selector-backround-transition-vertically {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
    position: relative;
    margin-left: -100%;
    z-index: 3;
}

.subject-selector-foreground {
    height: 100%;
    width: 70%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
    display: grid;
    gap: 5px;
    flex-direction: column;
    align-content: baseline;
    overflow-y: scroll;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.subject-selector-foreground::-webkit-scrollbar {
    display: none;
}

.tutor-selection {
    width: 100%;
    display: flex;
    gap: 5px;
    flex-direction: row;
    overflow-y: scroll;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tutor-selection::-webkit-scrollbar {
    display: none;
  }

.tutor-selection-display {
    height: 195px;
    /*aspect-ratio: 3 / 4;*/
    width: 145px;
    border-radius: 15px;
    border: none;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
    cursor: pointer;
}

.tutor-selection-display.active {
    height: 195px;
    /*aspect-ratio: 3 / 4;*/
    width: 145px;
    border-radius: 15px;
    border: none;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--primary-color);
    cursor: pointer;
    color: var(--quadery-color);
}
/*
.tutor-selection-display:hover {
    background-color: var(--tritery-color);
    color: var(--quadery-color);
}
*/

.tutor-selection-display-transition {
    width: 100%;
    height: calc(145px);
    margin-top: calc(-145px);
    background-image: linear-gradient(to bottom, transparent 0%, var(--secondary-color) 100%);
}

.tutor-selection-display-text {
    height: 195px;
    margin-top: -195px;
    padding: 10px;
    /*padding-top: 45px;*/
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Horizontal centering, optional */
    align-items: flex-end;   /* Align text to the bottom */
    overflow-y: scroll;
}

.tutor-selection-display-text-2 {
    visibility: hidden;
}
.tutor-selection-display:hover .tutor-selection-display-text-1 {
    visibility: hidden;
}
.tutor-selection-display:hover .tutor-selection-display-text-2 {
    visibility: visible;
}

.tutor-selection-display-text-header {
    font-size: larger;
    font-weight: bold;
}

.tutor-selection-display-image {
    height: 125px;
    aspect-ratio: 1 / 1;
    border-radius: 67.5px;
    margin-bottom: 5px;
    background-position: center center;
    background-size: contain;
    box-shadow: var(--shadow);
}

.tutor-selection-display:hover .tutor-selection-display-image {
    box-shadow: var(--shadow-strong);
    transition-duration: 200ms;
}

.tutor-selection-display-name {
    height: 22px;
    width: 100%;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tutor-selection-display-ws {
    height: 18px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-y: hidden;
    text-overflow: ellipsis;
}

.tutor-selection-display-special {
    height: 195px;
    /*aspect-ratio: 3 / 4;*/
    width: 145px;
    border-radius: 15px;
    border: none;
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
    cursor: pointer;
}

.tutor-selection-manual-input-section {
    height: 100%;
    width: 250px;
    min-width: 250px;
}

.course-detail-top {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.course-detail-bottom {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
}

.course-detail-left {
    width: calc(60% - 15px);
}

.course-detail-right {
    width: calc(40% - 15px);
    margin-left: 30px;
}

.course-detail-bottom-left {
    width: calc(50% - 15px);
    aspect-ratio: 4 / 5;
    box-sizing: border-box;    
}

.course-detail-bottom-right {
    width: calc(50% - 15px);
    aspect-ratio: 4 / 5;
    margin-left: 30px;
}

.course-main-information-foreground {
    z-index: 4;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.course-main-information-foreground-image {
    height: 70%;
    aspect-ratio: 1 / 1;
    margin-left: 10%;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    box-shadow: var(--shadow);
}

.course-main-information-foreground-text {
    width: calc(60% - 15px);
    height: 100%;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
}

.notification-style {
    height: 30px;
    width: 30px;
    z-index: 6;
    display: none;
    border-radius: 15px;
    border: none;
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--quadery-color);
    /* background-color: var(--primary-color); */
    background: radial-gradient(circle at 50% 50%, var(--cancel-color) 0%, var(--primary-color) 80%);
    background-position: center center;
    /* background-size: 60%; */
    background-repeat: no-repeat;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.notification-style:hover {
    background-color: var(--tritery-color);
}

.message-holder {
    height: calc(100% - 55px);
    margin-bottom: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: block;
    overflow-y: auto;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: flex-end;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.message-holder::-webkit-scrollbar {
    display: none;
}

.messages-out {
    box-sizing: border-box;
    width: 70%;
    height: auto;
    margin-left: 30%;
    margin-top: 5px;
    padding: 5px;
    padding-right: 21px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    text-align: left;
    background-position: calc(100% - 5px) center;
    background-size: 11px;
    background-repeat: no-repeat;
    word-wrap: break-word;
    hyphens: auto;
}

.messages-read {
    box-sizing: border-box;
    width: 70%;
    height: auto;
    margin-left: 30%;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    text-align: left;
    word-wrap: break-word;
    hyphens: auto;
}

/* Alternative design
.messages-out {
    box-sizing: border-box;
    width: 70%;
    height: auto;
    margin-left: 30%;
    margin-top: 5px;
    color: var(--primary-color);
    text-align: left;
    background: radial-gradient(circle at 100% 100%, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 0% 0%/5px 5px no-repeat,
                radial-gradient(circle at 0 100%, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 100% 0%/5px 5px no-repeat,
                radial-gradient(circle at 100% 0, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 0% 100%/5px 5px no-repeat,
                radial-gradient(circle at 0 0, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 100% 100%/5px 5px no-repeat,
                linear-gradient(var(--secondary-color), var(--secondary-color)) 50% 50%/calc(100% - 4px) calc(100% - 10px) no-repeat,
                linear-gradient(var(--secondary-color), var(--secondary-color)) 50% 50%/calc(100% - 10px) calc(100% - 4px) no-repeat,
                linear-gradient(90deg, var(--secondary-color) 69%, var(--primary-color) 100%);
    border-radius: 5px;
    padding: 7px;
}
/* falls die designs geswitched werden sollen dass der border anzeigen soll dass bereits gelesen wurde, einfach namen der klassen ändern *//*
.messages-read {
    box-sizing: border-box;
    width: 70%;
    height: auto;
    margin-left: 30%;
    margin-top: 5px;
    color: var(--primary-color);
    text-align: left;
    background: radial-gradient(circle at 100% 100%, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 0% 0%/5px 5px no-repeat,
                radial-gradient(circle at 0 100%, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 100% 0%/5px 5px no-repeat,
                radial-gradient(circle at 100% 0, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 0% 100%/5px 5px no-repeat,
                radial-gradient(circle at 0 0, var(--secondary-color) 0, var(--secondary-color) 3px, transparent 3px) 100% 100%/5px 5px no-repeat,
                linear-gradient(var(--secondary-color), var(--secondary-color)) 50% 50%/calc(100% - 4px) calc(100% - 10px) no-repeat,
                linear-gradient(var(--secondary-color), var(--secondary-color)) 50% 50%/calc(100% - 10px) calc(100% - 4px) no-repeat,
                linear-gradient(90deg, var(--secondary-color) 69%, var(--secondary-color) 100%);
    border-radius: 5px;
    padding: 7px;
}
*/
.messages-in {
    box-sizing: border-box;
    width: 70%;
    height: auto;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--quadery-color);
    text-align: left;
    word-wrap: break-word;
    hyphens: auto;
}

.file-messages {
    min-height: 80px;
    padding-left: 85px;
    background-size: 55px;
    background-position: center left 15px;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-messages-link {
    width: 100%;
    text-decoration: underline;
    color: var(--primary-color);
    font-weight: bold;
    text-align: center;
}

.file-messages-link-dark {
    color: var(--quadery-color);
}

.messages-header {
    width: 100%;
    padding-top: 5px;
    color: var(--tritery-color);
    font-size: small;
    font-weight: lighter;
    text-align: center;
}

.course-detail-buttonholder {
    height: 100%;
    width: auto;
    background-color: var(--secondary-color);
    padding: 5px;
    padding-left: 0px;
    top: 0;
    right: 0px;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.course-detail-incomedisplay {
    height: 100%;
    width: auto;
    color: var(--confirm-color);
    background-color: var(--secondary-color);
    padding: 15px;
    padding-left: 0px;
    top: 0;
    right: 0px;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    padding-top: calc((45px - 16px) / 2);
    padding-bottom: calc((45px - 16px) / 2);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.course-detail-expensedisplay {
    height: 100%;
    width: auto;
    color: var(--cancel-color);
    background-color: var(--secondary-color);
    padding: 15px;
    padding-left: 0px;
    top: 0;
    right: 0px;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    padding-top: calc((45px - 16px) / 2);
    padding-bottom: calc((45px - 16px) / 2);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.course-detail-button-primary {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--primary-color);
    border: none;
    cursor: pointer;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    transition-duration: 200ms;
}

.course-detail-button-primary:hover {
    background-color: var(--tritery-color);
}

.course-detail-button-cancel {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--cancel-color);
    border: none;
    cursor: pointer;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    transition-duration: 200ms;
}

.course-detail-button-cancel:hover {
    background-color: var(--cancel-color-light);
}

.course-detail-button-confirm {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--confirm-color);
    border: none;
    cursor: pointer;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    transition-duration: 200ms;
}

.course-detail-button-confirm:hover {
    background-color: var(--confirm-color-light);
}

.course-detail-button-wait {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--wait-color);
    border: none;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
}

.course-detail-button-reclaim {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--secondary-color);
    border: none;
    cursor: pointer;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    transition-duration: 200ms;
}

.course-detail-button-reclaim:hover {
    background-color: var(--cancel-color);
    opacity: 80%;
}

.course-detail-button-push {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-left: 5px;
    border-radius: 10px;
    background-color: var(--tritery-color);
    color: var(--quadery-color);
    border: none;
    cursor: pointer;
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    transition-duration: 200ms;
}

.course-detail-button-push:hover {
    background-color: var(--fifth-color);
}

.push-button-holder {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: row;
    align-items: end;
}

.clear-display {
    height: 45px;
    width: auto;
    text-align: right;
    position: absolute;
    bottom: 15px;
    right: 115px;
    border: none;
    color: var(--tritery-color);
    font-size: large;
    background-color: rgba(255, 255, 255, 0);
}

.file-holder {
    width: 100%;
    height: calc(100% - 88px);
    margin-bottom: 55px;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.file-holder::-webkit-scrollbar {
    display: none;
}

.course-detail-calendar-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.course-detail-calendar-header-text {
    width: calc(100% / 7);
    text-align: center;
    font-weight: bold;
}

.course-detail-calendar {
    width: 100%;
    aspect-ratio: 4 / 2;
    margin-bottom: 10px;
    /*border-radius: 15px;*/
    display: flex;
    flex-direction: row;
    overflow-y: scroll;
    position: relative;
    /*background-color: grey;*/
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.course-detail-calendar::-webkit-scrollbar {
    display: none;
}

.course-detail-calendar-day {
    width: calc((100% - (6 * 5px)) / 7);
    height: 100%;
    display: flex;
    flex-direction: column;
    /*border-radius: 15px;*/
    margin-right: 5px;
    /*background-color: var(--tritery-color);*/
}

.daycalendar-hour {
    width: 100%;
    height: 60px;
    min-height: 60px;
    z-index: 5;
    box-sizing: border-box;
}

.daycalendar-hour-border {
    width: 100%;
    height: 3px;
    border-radius: 1.5px;
    background-color: var(--primary-color);
}

.daycalendar-hour-text {
    width: 100%;
    height: 40px;
    font-size: 12px;
    text-align: left;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    color: var(--primary-color);
}

.area-free {
    width: calc((100% - (6 * 5px)) / 7);
    background-color: var(--confirm-color);
    position: absolute;
    padding: 5px;
    border-radius: 1.5px;
    box-sizing: border-box;
}

.area-busy {
    width: calc((100% - (6 * 5px)) / 7);
    background-color: var(--cancel-color);
    position: absolute;
    padding: 5px;
    border-radius: 1.5px;
    box-sizing: border-box;
}

.area-free {
    width: calc((100% - (6 * 5px)) / 7);
    position: absolute;
    padding: 5px;
    border: solid 3px var(--primary-color);
    border-radius: 5px;
    box-sizing: border-box;
} /* just for testing */

.event-small-booked {
    width: 15px;
    margin-left: calc(((100% - (6 * 5px)) / 7) - 20px);
    position: absolute;
    border-radius: 5px;
    z-index: 6;
    box-shadow: var(--shadow);
    border: solid 3px var(--primary-color);
    background-color: var(--confirm-color);
    box-sizing: border-box;
}

.event-small-requested {
    width: 15px;
    margin-left: calc(((100% - (6 * 5px)) / 7) - 20px);
    position: absolute;
    border-radius: 5px;
    z-index: 6;
    box-shadow: var(--shadow);
    border: solid 3px var(--primary-color);
    background-color: var(--wait-color);
    box-sizing: border-box;
}

.event-small-past {
    width: 15px;
    margin-left: calc(((100% - (6 * 5px)) / 7) - 20px);
    position: absolute;
    border-radius: 5px;
    z-index: 6;
    box-shadow: var(--shadow);
    border: solid 3px var(--primary-color);
    background-color: var(--tritery-color);
    box-sizing: border-box;
}
/*
.now-line-detail-course {
    width: 100%;
    height: 2px;
    background-color: var(--cancel-color);
    position: absolute;
    z-index: 7;
}
*/
.pre-test-subject-selector-background {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
}

.pre-test-subject-selector-background-image {
    width: 100%;
    height: 80%;
    top: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.pre-test-subject-selector-background-transition {
    height: 20vh;
    width: 100%;
    margin-top: -20vh;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
    position: relative;
    z-index: 3;
}

.pre-test-subject-selector-foreground {
    width: 80%;
    height: 100%;
    margin-left: 10%;
    position: absolute;
    z-index: 6;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.test-answer-holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 200px;
    gap: 5px;
}

.test-answer {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: solid 2px;
    border-color: var(--secondary-color);
    cursor: pointer;
}

.test-answer-selected {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: solid 2px;
    border-color: var(--primary-color);
    cursor: pointer;
}





.contacts-outside {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: row;
}

.contacts-left {
    width: calc(100% - 380px);
    height: 100%;
    margin-right: 30px;
}

.contacts-right {
    width: 350px;
    height: calc(100%);
}

.contacts-tile-holder {
    overflow-y: scroll;

    flex-grow: 1; /* Takes up all available space */
    overflow-y: auto; /* Enables vertical scrolling if content overflows */
    display: flex;
    flex-direction: column;

    height: calc(100% - 99px);
    /* border-radius: 15px; */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.contacts-tile-holder::-webkit-scrollbar {
    display: none;
}

.contact-tile {
    width: 100%;
    height: auto;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    /* cursor: pointer; */
}

.contact-tile-selected {
    width: 100%;
    height: auto;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    color: var(--quadery-color);
    /* cursor: pointer; */
}

.contact-tile:hover .tutor-selection-display-image {
    box-shadow: var(--shadow-medium);
}

.contact-tile-selected:hover .tutor-selection-display-image {
    box-shadow: var(--shadow-medium);
}

.contact-tile:hover .contact-tile-button-holder {
    display: flex;
}

.contact-tile-text-block {
    width: calc(100% - (125px + 10px + 10px + 40px));
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.contact-tile-text {
    width: 100%;
    height: calc(125px / 3);
    font-size: 15px;
    border: none;
    outline: none;
    border-radius: 15px;
    position: relative;
    padding: calc(((125px / 3) - 16px) / 2);
    box-sizing: border-box;
    overflow-y: hidden;
    text-overflow: ellipsis;
}

.contact-tile-button-holder {
    width: 40px;
    height: 125px;
    margin-left: 10px;
    /* display: none; /* To make a hover effext, where the buttons are only visible when hovered, but this doesnt work on mobile */
    display: flex;
    flex-direction: column;
}

.contact-tile-button {
    height: calc(120px / 2);
    background-position: center center;
    background-size: 60%;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 5px;
}

.contact-tile-button:hover {
    background-color: var(--quadery-color);
}

.admissions-WS-holder {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    overflow-x: hidden;
}

.admissions-WS-holder-half {
    /*width: calc(50% - (55px / 2));*/
    width: calc(50% - 2.5px);
    height: auto;
}
/*
.admissions-grid {
    width: 100%;
    margin-left: 0%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.admissions-grid-subject {
    aspect-ratio: 1 / 1.25;
    position: relative;
    background-color: var(--quadery-color);
    box-shadow: var(--shadow);
    border-radius: 30px;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    transition-duration: 200ms;
}

.admissions-grid-subject:hover {
    box-shadow: var(--shadow-medium);
    
}

.admissions-grid-subject-image {
    aspect-ratio: 1 / 1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.admissions-unqualified {
    filter: grayscale(100%);
}

.admissions-grid-subject-transition {
    height: 100px;
    width: 100%;
    margin-top: -100px;
    background-image: linear-gradient(to bottom, transparent, var(--quadery-color));
    z-index: 1;
}

.admissions-grid-subject-title {
    width: 100%;
    position: absolute;
    text-align: center;
    font-size: 30px;
    bottom: 48px;
    z-index: 2;
}

.admissions-grid-subject-text {
    width: 100%;
    position: absolute;
    color: var(--tritery-color);
    text-align: center;
    font-size: 14px;
    bottom: 0px;
    margin-bottom: 30px;
    z-index: 2;
}
Previous static version, should still be found in Zulassungen */
.admissions-grid {
    width: 100%;
    margin-left: 0%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.admissions-subject {
    aspect-ratio: 1 / 1.25;
    perspective: 500px;
    cursor: pointer;
}
  
.admissions-subject-content {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
  
/* Updated: Trigger on .flipped instead of :hover */
.admissions-subject.flipped .admissions-subject-content {
    transform: rotateY(180deg);
    transition: transform 0.5s;
}
  
.admissions-subject.flipped .admissions-subject-content-front {
    opacity: 0;
    visibility: hidden;
}
  
.admissions-subject-content-front,
.admissions-subject-content-back {
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--quadery-color);
    box-shadow: var(--shadow);
    border-radius: 30px;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.admissions-subject-content-front {
    transition: opacity 0.1s ease 0.1s, visibility 0s linear 0.1s;
    opacity: 1;
    visibility: visible;
}

.admissions-subject-content-back {
    padding: 15px;
    background: var(--quadery-color);
    transform: rotateY(180deg);
}

.admissions-grid-subject-image {
    aspect-ratio: 1 / 1;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.admissions-unqualified {
    filter: grayscale(100%);
}

.admissions-grid-subject-transition {
    height: 100%;
    width: 100%;
    /*margin-top: -100px;*/
    background-image: linear-gradient(to bottom, transparent 0%, transparent calc(100% - 100px), var(--quadery-color) 100%);
    z-index: 5;
}

.admissions-grid-subject-title {
    width: 100%;
    position: absolute;
    text-align: center;
    font-size: 30px;
    bottom: 48px;
    z-index: 2;
}

.admissions-grid-subject-text {
    width: 100%;
    position: absolute;
    color: var(--tritery-color);
    text-align: center;
    font-size: 14px;
    bottom: 0px;
    margin-bottom: 30px;
    z-index: 2;
}

.admissions-grid-subject-back-holder {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--quadery-color);
    padding: 15px;
    box-sizing: border-box;
    border-radius: 30px;
}

.admissions-grid-subject-back-text {
    width: 100%;
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    font-size: 12px;
    margin-bottom: 10px;
    cursor: pointer;
}

/* Notifications */

.notification-base {
    width: 100%;
    height: auto;
    min-height: 60px;
    border: solid 3px var(--primary-color);
    border-bottom: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--quadery-color);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.notification-base-header {
    height: 24px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--primary-color);
    padding-top: 3px;
    padding-left: 15px;
    font-size: 9px;
    color: var(--tritery-color);
    margin-bottom: -15px;
}

.notification-base-positive {
    width: 100%;
    height: auto;
    min-height: 60px;
    border: solid 3px var(--confirm-color);
    border-bottom: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--quadery-color);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.notification-base-positive-header {
    height: 24px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--confirm-color);
    padding-top: 3px;
    padding-left: 15px;
    font-size: 9px;
    color: var(--confirm-color-light);
    margin-bottom: -15px;
}

.notification-base-negative {
    width: 100%;
    height: auto;
    min-height: 60px;
    border: solid 3px var(--cancel-color);
    border-bottom: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--quadery-color);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.notification-base-negative-header {
    height: 24px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: var(--cancel-color);
    padding-top: 3px;
    padding-left: 15px;
    font-size: 9px;
    color: var(--cancel-color-light);
    margin-bottom: -15px;
}

.notification-text {
    width: calc(100% - 55px);
    height: 100%;
    text-align: left;
}

.notification-button-holder {
    width: 45px;
    height: auto;
    margin-left: 10px;
}

.notification-button {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    border-radius: 5px;
    background-color: var(--quadery-color);
    transition-duration: 200ms;
}

.notification-button:hover {
    background-color: var(--tritery-color);
}

.notification-button-accept {
    width: 100%;
    height: calc((100% / 2) - 2.5px);
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    border-radius: 5px;
    background-color: var(--confirm-color);
    border: none;
    transition-duration: 200ms;
}

.notification-button-accept:hover {
    background-color: var(--confirm-color-light);
}

.notification-button-cancel {
    width: 100%;
    height: calc((100% / 2) - 2.5px);
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    cursor: pointer;
    border-radius: 5px;
    background-color: var(--cancel-color);
    border: none;
    transition-duration: 200ms;
}

.notification-button-cancel:hover {
    background-color: var(--cancel-color-light);
}

.notification-button-image {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}





















/* Loader ----------------------------*/

.socket {
    width: 200px;
    height: 200px;
    position: relative;
}

.hex-brick {
background: var(--primary-color);
width: 30px;
height: 17px;
position: absolute;
top: 5px;
animation-name: fade00;
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: fade00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

.h2 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}

.h3 {
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}

.gel {
height: 30px;
width: 30px;
transition: all .3s;
-webkit-transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
}

.center-gel {
margin-left: -15px;
margin-top: -15px;
animation-name: pulse00;
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: pulse00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

.c1 {
margin-left: -47px;
margin-top: -15px;
}

.c2 {
margin-left: -31px;
margin-top: -43px;
}

.c3 {
margin-left: 1px;
margin-top: -43px;
}

.c4 {
margin-left: 17px;
margin-top: -15px;
}

.c5 {
margin-left: -31px;
margin-top: 13px;
}

.c6 {
margin-left: 1px;
margin-top: 13px;
}

.c7 {
margin-left: -63px;
margin-top: -43px;
}

.c8 {
margin-left: 33px;
margin-top: -43px;
}

.c9 {
margin-left: -15px;
margin-top: 41px;
}

.c10 {
margin-left: -63px;
margin-top: 13px;
}

.c11 {
margin-left: 33px;
margin-top: 13px;
}

.c12 {
margin-left: -15px;
margin-top: -71px;
}

.c13 {
margin-left: -47px;
margin-top: -71px;
}

.c14 {
margin-left: 17px;
margin-top: -71px;
}

.c15 {
margin-left: -47px;
margin-top: 41px;
}

.c16 {
margin-left: 17px;
margin-top: 41px;
}

.c17 {
margin-left: -79px;
margin-top: -15px;
}

.c18 {
margin-left: 49px;
margin-top: -15px;
}

.c19 {
margin-left: -63px;
margin-top: -99px;
}

.c20 {
margin-left: 33px;
margin-top: -99px;
}

.c21 {
margin-left: 1px;
margin-top: -99px;
}

.c22 {
margin-left: -31px;
margin-top: -99px;
}

.c23 {
margin-left: -63px;
margin-top: 69px;
}

.c24 {
margin-left: 33px;
margin-top: 69px;
}

.c25 {
margin-left: 1px;
margin-top: 69px;
}

.c26 {
margin-left: -31px;
margin-top: 69px;
}

.c27 {
margin-left: -79px;
margin-top: -15px;
}

.c28 {
margin-left: -95px;
margin-top: -43px;
}

.c29 {
margin-left: -95px;
margin-top: 13px;
}

.c30 {
margin-left: 49px;
margin-top: 41px;
}

.c31 {
margin-left: -79px;
margin-top: -71px;
}

.c32 {
margin-left: -111px;
margin-top: -15px;
}

.c33 {
margin-left: 65px;
margin-top: -43px;
}

.c34 {
margin-left: 65px;
margin-top: 13px;
}

.c35 {
margin-left: -79px;
margin-top: 41px;
}

.c36 {
margin-left: 49px;
margin-top: -71px;
}

.c37 {
margin-left: 81px;
margin-top: -15px;
}

.r1 {
animation-name: pulse00;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: .2s;
-webkit-animation-name: pulse00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .2s;
}

.r2 {
animation-name: pulse00;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: .4s;
-webkit-animation-name: pulse00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .4s;
}

.r3 {
animation-name: pulse00;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: .6s;
-webkit-animation-name: pulse00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .6s;
}

.r1 > .hex-brick {
animation-name: fade00;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: .2s;
-webkit-animation-name: fade00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .2s;
}

.r2 > .hex-brick {
animation-name: fade00;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: .4s;
-webkit-animation-name: fade00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .4s;
}

.r3 > .hex-brick {
animation-name: fade00;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: .6s;
-webkit-animation-name: fade00;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .6s;
}

@keyframes pulse00 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.01);
        transform: scale(0.01);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fade00 {
    0% {
        background: var(--tritery-color);
    }

    50% {
        background: var(--secondary-color);
    }

    100% {
        background: var(--primary-color);
    }
}

/* Loader -!--------------------------*/

.construction-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}









.Apple-Pay-Button {
    width: 140px;
    height: 30px;

    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: plain;
    -apple-pay-button-style: black;
}

/* Admin Stuff ----------------------------------------------------------------------------*/

.ticket-display-completed {
    display: inline-block;
    width: 100%;
    height: 71px;
    border-radius: 15px;
    border: none;
    text-align: left;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 5px;
    cursor: pointer;
    color: var(--quadery-color);
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 85%, var(--confirm-color) 100%);
}

.ticket-display-completed:hover {
    background: linear-gradient(to right, var(--tritery-color) 0%, var(--tritery-color) 75%, var(--confirm-color) 100%);
    color: var(--quadery-color);
}

.ticket-display-workedon {
    display: inline-block;
    width: 100%;
    height: 71px;
    border-radius: 15px;
    border: none;
    text-align: left;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 5px;
    cursor: pointer;
    color: var(--quadery-color);
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 85%, var(--wait-color) 100%);
}

.ticket-display-workedon:hover {
    background: linear-gradient(to right, var(--tritery-color) 0%, var(--tritery-color) 75%, var(--wait-color) 100%);
    color: var(--quadery-color);
}

.ticket-display-unstarted {
    display: inline-block;
    width: 100%;
    height: 71px;
    border-radius: 15px;
    border: none;
    text-align: left;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 5px;
    cursor: pointer;
    color: var(--quadery-color);
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 85%, var(--cancel-color) 100%);
}

.ticket-display-unstarted:hover {
    background: linear-gradient(to right, var(--tritery-color) 0%, var(--tritery-color) 75%, var(--cancel-color) 100%);
    color: var(--quadery-color);
}

.ticket-header {
    width: 85%;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden; /* Ensure the content does not overflow */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add an ellipsis when the content overflows */
}

.ticket-header-sub {
    width: 85%;
    text-decoration: none;
    overflow: hidden; /* Ensure the content does not overflow */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add an ellipsis when the content overflows */
}

.ticket-detail-status-display-completed {
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background: linear-gradient(to right, var(--quadery-color) 0%, var(--confirm-color) 100%);
}

.ticket-detail-status-display-workedon {
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background: linear-gradient(to right, var(--quadery-color) 0%, var(--wait-color) 100%);
}

.ticket-detail-status-display-unstarted {
    width: 20%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background: linear-gradient(to right, var(--quadery-color) 0%, var(--cancel-color) 100%);
}

.ticket-detail-main-text {
    width: 100%;
    height: auto;
}

.scroll-wrapper {
    width: calc(100% + 30px);
    height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    
    margin-left: -15px;
    margin-bottom: -15px;
}

.scroll-content {
    display: flex;
    width: max-content;
    background: repeat-x;
    /* animation: scrollLoop 5s ease infinite; */
    animation: scrollLoop 180s linear infinite;
    animation-delay: 400ms;
    animation-play-state: running; /* Ensures the animation is running */
}

.scroll-transition-horizontal {
    width: calc(100% + 30px);
    height: 80px;
    margin-left: -15px;
    margin-bottom: -80px;
    z-index: 2;
    position: relative;
    background: linear-gradient(to bottom, var(--quadery-color), transparent);
}

.scroll-wrapper:hover .scroll-content, 
.scroll-transition-horizontal:hover ~ .scroll-wrapper .scroll-content {
    animation-play-state: paused;
}

.scroll-item {
    width: 200px;
    height: 200px;
    display: flex;
    
}

.scroll-overlay-left,
.scroll-overlay-right {
    width: 80px;
    height: 200px;
    z-index: 2;
}

.scroll-overlay-left {
    left: 0;
    background: linear-gradient(to right, var(--quadery-color), transparent);
}

.scroll-overlay-right {
    right: 0;
    background: linear-gradient(to left, var(--quadery-color), transparent);
}

.scroll-image {
    width: 200px;
    height: 200px;
    margin-left: -80px;
    margin-right: -80px;
    background-size: cover;
    background-position: center center;
}

@keyframes scrollLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33333%);
    }
}

/* Size Variations ------------------------------------------------------------------------*/

@media (max-width: 1100px) {
    .contacts-outside {
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    
    .contacts-left {
        width: 100%;
        margin-right: 0px;
    }
    
    .contacts-right {
        width: 100%;
        aspect-ratio: 1 / 1.5;
    }

    .contacts-tile-holder {
        height: calc(100vh - (60px + 43px + 10px + 45px + 10px + 30px));
        
        margin-bottom: 55px;
    }

    .contact-tile-button-holder {
        display: flex;
    }

    .daycalendar-hour-text {
        padding-left: 0px;
    }
}

@media (max-width: 950px) {
    .course-detail-top {
        flex-direction: column;
    }
    
    .course-detail-left, .course-detail-right {
        width: 100%; /* Make each take full width */
        margin-left: 0; /* Remove any left margin */
    }
}

@media (max-width: 800px) {
    .course-detail-bottom {
        flex-direction: column;
    }

    .course-detail-bottom-left {
        width: 100%;
        margin-bottom: 30px;
        box-sizing: border-box;
    }
    
    .course-detail-bottom-right {
        width: 100%;
        margin-left: 0px;
    }

    .admissions-WS-holder {
        flex-direction: column;
    }

    .admissions-WS-holder-half {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .login-box {
        width: 100%;
        height: 100%;
        margin: 0px;
        top: 0px;
        right: 0px;
        border-radius: 0px;
    }

    .sidebar {
        display: none;
    }

    .topbar {
        display: flex;
        height: auto;
    }

    .logo {
        height: 60px;
        margin-bottom: 0px;
    }

    .navigation {
        width: calc(100% - (60px + 60px + 10px));
        margin-left: 5px;
    }

    .dashboard-content {
        padding-top: calc(60px + 20px + 30px);
        width: 100%;
        left: 0;
        box-sizing: border-box;
    }

    .contacts-tile-holder {
        height: calc(100vh - (60px + 43px + 10px + 45px + 10px + 30px + (60px + 20px + 30px)));
    }

    .admissions-grid {
        width: 80%;
        margin-left: 10%;
    }

    .scroll-content {
        animation: scrollLoop 60s linear infinite;
    }
}



/* Centered Links e.g. in overview_templates.html */
.centered_links {
    text-align: center; /* Center align the content */
}

.centered_links a {
    display: inline-block; /* Make links display in a row */
    padding: 10px 20px; /* Add padding to links */
    background-color: #f0f0f0; /* Background color for links */
    border-radius: 5px; /* Rounded corners for links */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Text color for links */
}

.centered_links a:hover {
    background-color: #ccc; /* Background color for links on hover */
}

.content-qualification-template {
    /*max-width: 800px;*/
    /*margin: 0 auto;*/
    padding: 20px;
}


.content-qualification-template table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.content-qualification-template th, .content-qualification-template td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.content-qualification-template th {
    background-color: #f2f2f2;
}

.content-qualification-template .correct-answer {
    background-color: #2bf840;
    font-weight: bold;
}

.content-qualification-template .wrong-answer {
    background-color: #ff8282;
    font-weight: bold;
}