:root {
    --primary-color: #3f3f41;
    --secondary-color: #2f2f31;
    --darker-color: #1f1f21;

    --text-color: #e1e1e9;
    --text-color-light: hsla(240, 40%, 96%, 0.37);

    --button-color: #3f3f41;
    --button-hover-color: #56565a;

    --tooltip-color: #d63f3f;

    --traffic-light-green: #2d742d;
    --traffic-light-orange: #b49518;
    --traffic-light-red: #d63f3f;

    --button-border: 2px solid #474747;
    --input-border: 2px solid #474747;
    --main-container-border: 2px solid #292929;
    --element-border: 2px solid #474747;
    --input-background: #3f3f41;
    --cd-red: #a72540;
}

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

/* scrollbar - OLD DESIGN (commented out)
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--darker-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--button-hover-color);
}
*/

/* Modern Scrollbar Design - High Contrast (No Gradients) */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--darker-color);
    border-radius: 8px;
    border: 1px solid rgba(225, 225, 233, 0.1);
    margin: 2px;
}

::-webkit-scrollbar-thumb {
    background: var(--button-hover-color);
    border-radius: 8px;
    border: 2px solid var(--darker-color);
    min-height: 40px;
    transition: all 1s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
    border-color: var(--text-color-light);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(225, 225, 233, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.2);
    cursor: grab;
}

::-webkit-scrollbar-thumb:active {
    background: var(--text-color);
    border-color: var(--text-color);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
    cursor: grabbing;
}

::-webkit-scrollbar-corner {
    background: var(--darker-color);
    border: 1px solid rgba(225, 225, 233, 0.1);
}

/* Scrollbar for specific elements with thinner design */
::-webkit-scrollbar:horizontal {
    height: 10px;
}

::-webkit-scrollbar:vertical {
    width: 10px;
}
/*------------------------------------------------*/

body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
}

.loadingSpinner{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(31, 31, 33, 0.92);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s ease-out;
}

.loadingSpinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    background: url("../media/icons/ajax-loader.svg") center no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 10px rgba(86, 86, 90, 0.3));
}

.loadingSpinner::after {
    content: 'Laden...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 80px);
    color: var(--text-color);
    font-family: "Oswald", Arial, sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
    animation: textPulse 2s ease-in-out infinite;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1; 
        backdrop-filter: blur(6px);
    }
}

@keyframes textPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* Hour Types Subtype Management */
.wrapperHourTypesSubtypeList {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 200px;
}

.filterHourTypesSubtypeList {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    border: var(--element-border);
}

.filterHourTypesSubtypeListTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.filterHourTypesSubtypeListContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filterHourTypesSubtypeListContentItem {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: calc(50% - 5px);
}

.filterHourTypesSubtypeList select {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.filterHourTypesSubtypeList input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.filterHourTypesSubtypeList button {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.hourTypesSubtypeList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 10px;
}

/* Gruppierte Darstellung */
.hourTypeMainGroup {
    width: 100%;
    background-color: var(--primary-color);
    border: var(--element-border);
    border-radius: 5px;
    padding: 10px;
}

.hourTypeMainGroupHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
}

.hourTypeMainGroupHeader h3 {
    color: var(--text-color);
    font-family: "Oswald", Arial, sans-serif;
    font-size: 20px;
    margin: 0;
    font-weight: bold;
}

.hourTypeSubtypeCount {
    color: var(--text-color-light);
    font-size: 14px;
    font-style: italic;
}

.hourTypeSubtypeGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}

.hourTypeSubtypeItem {
    background-color: var(--secondary-color);
    border: var(--element-border);
    border-radius: 5px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}

.hourTypeSubtypeItem:hover {
    background-color: var(--darker-color);
}

.hourTypeSubtypeItemTitle {
    color: var(--text-color);
    font-size: 15px;
    flex: 1;
    word-break: break-word;
}

.hourTypeSubtypeItemActions {
    display: flex;
    gap: 5px;
    margin-left: 10px;
}

.hourTypeSubtypeEditBtn,
.hourTypeSubtypeDeleteBtn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 3px;
}

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

.hourTypeSubtypeDeleteBtn:hover {
    background-color: var(--traffic-light-red);
}

.hourTypeSubtypeEditBtn img,
.hourTypeSubtypeDeleteBtn img {
    width: 20px;
    height: auto;
}

.hourTypeNoSubtypes {
    color: var(--text-color-light);
    font-style: italic;
    text-align: center;
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 5px;
}

/* Modal Template Styles */
.wrapperCreateHourTypeSubtype {
    width: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    border: var(--element-border);
    border-radius: 5px;
    background-color: var(--primary-color);
}

.createHourTypeSubtypeContentItem {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.createHourTypeSubtypeContentItem label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: bold;
}

.createHourTypeSubtypeContentItem select,
.createHourTypeSubtypeContentItem input {
    width: 100%;
    padding: 10px;
    border: var(--input-border);
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
    box-sizing: border-box;
}

.createHourTypeSubtypeContentItem button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

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

body.loading{
    overflow: hidden;   
}

body.loading .loadingSpinner{
    display: block;
}

.wrapper {
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-color);
    font-family: "Oswald", Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--text-color);
}

button, select, input {
    font-family: "Oswald", Arial, sans-serif;
    letter-spacing: 1px;
}

input[type="text"], input[type="date"], input[type="password"], input[type="number"], textarea, select {
    border: var(--input-border) !important;
}

.wrapperLogin {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    padding: 60px;
    background-color: var(--secondary-color);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 35vw;
    min-width: 30vw;
    border: var(--main-container-border);
}

.wrapperImprint {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imprint {
    padding: 60px;
    background-color: var(--secondary-color);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 80vw;
    max-height: 80vh;
    overflow: auto;
    overflow-x: hidden;
}

.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    padding: 20px;
    border: var(--button-border);
    border-radius: 5px;
    background-color: var(--input-background);
    color: var(--text-color);
    font-size: 16px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    outline: none;
    box-shadow: 0px 0px 15px var(--cd-red);
}

.login #loginButton {
    width: 100%;
    padding: 20px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--button-color);
    color: var(--text-color);
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.login #loginButton:hover {
    background-color: var(--button-hover-color);
}

.imprintButton {
    font-size: 14px;
    font-weight: bold;
    background-color: transparent;
    color: var(--text-color-light);
    border: none;
    margin: 5px 0px 0px 0px;
    cursor: pointer;
    transition: 0.1s;
    padding: 5px;
    letter-spacing: 1px;
    border-radius: 5px;
}

.imprintButton:hover {
    background-color: var(--primary-color);
}

.login img {
    width: 65%;
    height: auto;
    margin-bottom: 30px;
}

.tooltip {
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    background-color: var(--tooltip-color);
    color: var(--text-color);
    font-size: 18px;
    display: none;
}

.wrapperHome {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20vw 80vw;
    justify-content: space-evenly;
}

.wrapperMenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100vh;
}

.menu {
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 80%;
    height: 90%;
    border: var(--main-container-border);
}

.wrapperContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100vh;
}

.content {
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 95%;
    height: 90%;
    overflow: auto;
    overflow-x: hidden;
    border: var(--main-container-border);
}

.menuLogo {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menuLogo img {
    width: 75%;
    height: auto;
}

.selectedMenu {
    background-color: var(--primary-color) !important;
}

.menuItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menuItemSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.menuItem button {
    font-size: 16px;
    font-weight: 200;
    background-color: transparent;
    color: var(--text-color);
    border: none;
    margin: 5px 0px 5px 0px;
    cursor: pointer;
    transition: 0.1s;
    border-radius: 5px;
    min-height: 30px;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.menuItem button img {
    width: 20px;
    height: auto;
    margin-right: 10px;
}

.menuItem button:hover {
    background-color: var(--primary-color);
    transform: scale(1.05);
}

.menuItem button:active {
    transform: scale(1.02);
}

.versionInfo {
    font-size: 12px;
    font-weight: 200;
    color: var(--text-color-light);
    position: absolute;
    right: 5px;
    top: 0px;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

.versionInfo:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Version Changes Modal Content */
.versionChangesContainer {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.versionChangesHeader {
    background: var(--primary-color);
    color: var(--text-color);
    padding: 20px;
    margin: 20px 0px;
    border-radius: 8px;
    text-align: center;
}

.versionChangesHeader h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
}

.versionDate {
    font-size: 14px;
    color: var(--text-color-light);
    font-weight: 300;
}

.versionChangesBody {
    padding: 0 5px;
}

/* Individual Version Entry Styles */
.versionEntry, .versionEntryLatest {
    background: var(--secondary-color);
    border: 1px solid var(--darker-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.versionEntry:hover {
    transform: translateY(-1px);
    border-color: var(--button-hover-color);
}

.versionEntryLatest {
    background: var(--secondary-color);
    border-color: var(--traffic-light-green);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--traffic-light-green);
}

.versionEntryHeader {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.versionNumber {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-color);
    background: var(--primary-color);
    border: 2px solid var(--darker-color);
    padding: 8px 16px;
    border-radius: 25px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    letter-spacing: 0.5px;
    min-width: 80px;
    text-align: center;
}

.versionEntryLatest .versionNumber {
    background: var(--traffic-light-green);
    color: white;
    border-color: var(--traffic-light-green);
    box-shadow: 0 0 8px rgba(45, 116, 45, 0.4);
}

.versionLatestBadge {
    background: var(--traffic-light-green);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(45, 116, 45, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(45, 116, 45, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(45, 116, 45, 0); }
}

.versionEntryDate {
    color: var(--text-color-light);
    font-size: 14px;
    font-weight: 500;
    margin-left: auto;
    background: var(--darker-color);
    padding: 4px 10px;
    border-radius: 15px;
    border: 1px solid var(--primary-color);
}

.versionEntryChanges {
    margin-top: 15px;
}

.versionEntryChanges pre {
    background: var(--darker-color);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 18px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    overflow-y: auto;
}

.versionEntryLatest .versionEntryChanges pre {
    border-color: var(--traffic-light-green);
    box-shadow: inset 0 0 0 1px rgba(45, 116, 45, 0.2);
}

.versionEntryChanges pre::-webkit-scrollbar {
    width: 6px;
}

.versionEntryChanges pre::-webkit-scrollbar-track {
    background: var(--primary-color);
    border-radius: 3px;
}

.versionEntryChanges pre::-webkit-scrollbar-thumb {
    background: var(--button-hover-color);
    border-radius: 3px;
}

.versionEntryChanges pre::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-light);
}

.noChanges {
    color: var(--text-color-light);
    font-style: italic;
    margin: 0;
    text-align: center;
    padding: 30px;
    font-size: 15px;
    background: var(--darker-color);
    border-radius: 8px;
    border: 2px dashed var(--primary-color);
}

.versionSeparator {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-color) 20%, var(--primary-color) 80%, transparent 100%);
    margin: 25px 0;
    position: relative;
}

.versionSeparator::after {
    content: '•';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--secondary-color);
    color: var(--text-color-light);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid var(--primary-color);
}

.welcomeNotification {
    font-size: 25px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapperCommissionList {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 200px;
}

.commissionList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.commissionListOverview {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.commissionListEntry {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: nowrap;
    border: var(--element-border);
}

.commissionListEntryButton button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 5px;
    min-height: 30px;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
 
}

.commissionListEntryButton img {
    width: 35px;
    height: auto;
    margin: auto;
}

.commissionListEntryButton button:hover {
    background-color: var(--secondary-color);
}

.commissionListEntryContent {
    width: 100%;
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.commissionListEntryTitle {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    grid-column: span 2;
}

.commissionListEntryLight {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
    min-height: 30px;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.commissionListEntryMissingTask {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
    min-height: 30px;
    display: grid;
    grid-template-columns: 20px auto;
    grid-template-areas: "a b" "a c";
}

.commissionListEntryMissingTask .trafficLightMissingTask {
    grid-area: a;
}

.commissionListEntryMissingTask .missingTaskTitle {
    grid-area: b;
}

.commissionListEntryMissingTask .missingTask {
    grid-area: c;
}

.commissionListEntryCustomer {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
    grid-column: span 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.commissionListEntryResponsible {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
    grid-column: span 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.filterCommissionList {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    border: var(--element-border);
}

.filterCommissionList select {
    width: 100%;
    min-height: 30px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
}

.filterCommissionList input[type="text"] {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
}

.filterCommissionListContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filterCommissionListTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.filterCommissionListContentItem {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: calc(50% - 5px);
}

.filterCommissionList button {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
}

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

.trafficLightGreen {
    background-color: var(--traffic-light-green);
    border-radius: 10px;
    width: 5px;
    height: 100%;
}

.trafficLightOrange {
    background-color: var(--traffic-light-orange);
    border-radius: 10px;
    width: 5px;
    height: 100%;
}

.trafficLightRed {
    background-color: var(--traffic-light-red);
    border-radius: 10px;
    width: 5px;
    height: 100%;
}

.moreFunctionsContainer {
    width: 100%;
    display: flex;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    border: var(--element-border);
}

.moreFunctionsContainerSecondary {
    width: calc(100% - 24px);
    display: flex;
    gap: 10px;
    background-color: var(--secondary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    border: var(--element-border);
}

.moreFunctionsButton {
    display: grid;
    gap: 10px;
    grid-template-columns: 50px auto;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.moreFunctionsButton img {
    width: 35px;
    height: auto;
    margin: auto;
}

.moreFunctionsButtonSecondary {
    display: grid;
    gap: 10px;
    grid-template-columns: 50px auto;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.moreFunctionsButtonSecondary img {
    width: 35px;
    height: auto;
    margin: auto;
}

.calendarOverviewContainer {
    width: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    border: var(--element-border);
}

.calendarOverviewContainer h2 {
    margin: 0;
    color: var(--text-color);
    font-size: 26px;
    font-weight: 300;
}

.calendarOverviewButtons {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.calendarOverviewHint {
    width: calc(100% - 24px);
    padding: 10px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    border: var(--element-border);
}

.calendarOverviewHintTitle {
    margin: 0px 0px 8px 0px;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 400;
}

.calendarOverviewHint ol {
    margin: 0;
    padding-left: 20px;
    color: var(--text-color);
    font-size: 15px;
}

.calendarOverviewHint li {
    margin: 0px 0px 4px 0px;
}

.calendarButton {
    display: grid;
    gap: 10px;
    grid-template-columns: 50px auto;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.calendarButton img {
    width: 35px;
    height: auto;
    margin: auto;
}

.wrapperCommission {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 200px;
}

.commissionContent {
    width: 100%;
    display: flex;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    border: var(--element-border);
}


.contentSelectorContainer {
    width: 100%;
    display: flex;
    gap: 5px;
    background-color: var(--primary-color);
    padding: 0px 0px 10px 0px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.buttonContentSelector {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.buttonContentSelector:active {
    transform: scale(0.95);
}

.commissionContentAreaWrapper {
    width: 100%;
    display: flex;
    gap: 10px;
    background-color: var(--primary-color);
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionContentArea {
    width: 100%;
    display: none;
    padding: 10px;
    border-radius: 5px;
}

.commissionAreaSelected {
    display: block;
}

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

.commissionContentDivider {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.commissionDataContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionDataContainer input[type="text"] {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.commissionDataContainer select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
}

.commissionDataContainer textarea {
    width: calc(100% - 24px);
    padding: 10px;
    height: 100px;
    border: none;
    background-color: var(--secondary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
}

.commissionSpecialContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionSpecialContainer .commissionCreateSpecial {
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.commissionSpecialContainer .createSpecialTitle {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionSpecialContainer .createSpecialDate {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionSpecialContainer .createSpecialDescription {
    width: calc(100% - 24px);
    padding: 10px;
    height: 100px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
}

/*.commissionSpecialContainer .createSpecialFile {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
}*/

/* Hide the default file input */
.commissionSpecialFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}

/* Hide the default file input */
.commissionSpecialContainer .createSpecialFile {
    display: none;
}

/* Style the custom file button */
.commissionSpecialContainer .customFileButton {
    display: inline-block;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    text-align: center;
}

/* Add hover effect to the custom file button */
.commissionSpecialContainer .customFileButton:hover {
    background-color: var(--button-hover-color);
}

.fileNameDisplay {
    font-size: 14px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 5px;
}

.commissionSpecialContainer .createSpecialButton {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

.commissionSpecialContainer .createSpecialButton:hover {
    background-color: var(--button-hover-color);
}

.commissionSpecialList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /*gap: 10px;*/
    border-radius: 5px;
    /*padding: 20px 0px;*/
}

.commissionSpecialEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--primary-color);
    padding: 10px;
    border: var(--element-border);
}

.commissionSpecialEntryHead {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.commissionSpecialEntrySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.commissionSpecialEntryFileContainer {
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border-radius: 0px 5px 5px 0px;
    border-left: 6px solid var(--traffic-light-orange);
    background-color: var(--primary-color);
    margin: 5px 0px 0px 0px;
}

.commissionSpecialEntryFileTitle {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration : underline;
}

.commissionSpecialEntryFileDownload a{
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    text-decoration: underline;
    word-break: break-all;
}

.commissionSpecialEntryFileNotify{
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--traffic-light-orange);
    margin: 5px 0px 0px 0px;
}

.commissionSpecialList .commissionSpecialEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--secondary-color);
    padding: 10px;
}

.commissionSpecialList .commissionSpecialEntrySpacer {
    background-color: var(--primary-color);
}

.commissionSpecialEntryDescription{
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
    border: none;
    resize: none;
}

.commissionSpecialEntryDate {
    font-size: 16px;
    color: var(--text-color);
}

.commissionSpecialEntryDelete {
    display: none;
}

.commissionSpecialList .commissionSpecialEntryDelete {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.commissionSpecialList .commissionSpecialEntryDelete img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionSpecialList .commissionSpecialEntryDelete:hover {
    background-color: var(--primary-color);
    border-radius: 4px;
}

/* Quality Assurance Styles */

.commissionQAContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionQAContainer .commissionCreateQA {
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.commissionQAContainer .createQATitle {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionQAContainer .createQADate {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionQAContainer .createQACheckedBy {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionQAContainer .createQADescription {
    width: calc(100% - 24px);
    padding: 10px;
    height: 100px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
}

/* Hide the default file input */
.commissionQAFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}

/* Hide the default file input */
.commissionQAContainer .createQAFile {
    display: none;
}

/* Style the custom file button */
.commissionQAContainer .customFileButton {
    display: inline-block;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    text-align: center;
}

/* Add hover effect to the custom file button */
.commissionQAContainer .customFileButton:hover {
    background-color: var(--button-hover-color);
}

.commissionQAContainer .createQAButton {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

.commissionQAContainer .createQAButton:hover {
    background-color: var(--button-hover-color);
}

.commissionQAList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /*gap: 10px;*/
    border-radius: 5px;
    /*padding: 20px 0px;*/
}

.commissionQAEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--primary-color);
    padding: 10px;
    border: var(--element-border);
}

.commissionQAEntryHead {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.commissionQAEntrySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.commissionQAEntryFileContainer {
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border-radius: 0px 5px 5px 0px;
    border-left: 6px solid var(--traffic-light-orange);
    background-color: var(--primary-color);
    margin: 5px 0px 0px 0px;
}

.commissionQAEntryFileTitle {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration : underline;
}

.commissionQAEntryFileDownload a{
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    text-decoration: underline;
    word-break: break-all;
}

.commissionQAEntryFileNotify{
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--traffic-light-orange);
    margin: 5px 0px 0px 0px;
}

.commissionQAList .commissionQAEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--secondary-color);
    padding: 10px;
}

.commissionQAList .commissionQAEntrySpacer {
    background-color: var(--primary-color);
}

.commissionQAEntryDescription{
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
    border: none;
    resize: none;
}

.commissionQAEntryDate {
    font-size: 16px;
    color: var(--text-color);
}

.commissionQAEntryDelete {
    display: none;
}

.commissionQAList .commissionQAEntryDelete {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.commissionQAList .commissionQAEntryDelete img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionQAList .commissionQAEntryDelete:hover {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}

.commissionAppointmentContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionAppointmentContainer .commissionCreateAppointment {
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.commissionAppointmentContainer .createAppointmentTitle {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionAppointmentContainer .createAppointmentDateTime {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionAppointmentContainer .createAppointmentComment {
    width: calc(100% - 24px);
    padding: 10px;
    min-height: 80px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
    resize: vertical;
}

.commissionAppointmentContainer .createAppointmentButton {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

.commissionAppointmentContainer .createAppointmentButton:hover {
    background-color: var(--button-hover-color);
}

.commissionAppointmentList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
}

.commissionAppointmentEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--secondary-color);
    padding: 10px;
    border: var(--element-border);
}

.commissionAppointmentEntryHead {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.commissionAppointmentEntryDate {
    font-size: 16px;
    color: var(--text-color);
}

.commissionAppointmentEntryComment {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    border-radius: 5px;
    font-family: "Oswald", Arial, sans-serif;
    border: none;
    margin-top: 8px;
}

.commissionAppointmentEntryUser {
    font-size: 14px;
    color: var(--text-color-light);
    width: 100%;
    margin-top: 8px;
}

.commissionAppointmentEntryDelete {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.commissionAppointmentEntryDelete img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionAppointmentEntryDelete:hover {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}


/* Modal Styles */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.modalContentSwitch {
    width: calc(100% - 24px);
    display: flex;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    border: var(--element-border);
}

.modalContentSwitchButton {
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

.modalContentSwitchButton:hover {
    transform: scale(1.05);
}

.modalContentSwitchButton:active {
    transform: scale(1.02);
}

.modalContent {
    background-color: var(--secondary-color);
    margin: 2% auto;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-height: 85vh;
    overflow: hidden;
    overflow-y: auto;
    border: var(--main-container-border);
}

.modalContent .modalImageViewer {
    width: auto;
    max-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
}

.modalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 0px 20px 0px;
}

.modalTitle {
    font-size: 20px;
    color: var(--text-color);
    font-weight: bold;
    font-family: "Oswald", Arial, sans-serif;
}

.modalClose {
    display: flex;
    background-color: transparent;
    border: none;
    cursor: pointer;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--text-color);
    font-family: monospace;
    padding: 5px;
}

.modalClose:hover {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.modalSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.modalBody {
    color: var(--text-color);
    font-family: "Oswald", Arial, sans-serif;
    font-size: 16px;
}

.modalSpacerHeadbar {
    width: calc(100% - 24px);
    padding: 10px;
    margin: 30px 0px 10px 0px;
    background-color: var(--primary-color);
    border-radius: 5px;
    border: none;
    font-size: 18px;
    font-weight: bold;
    text-decoration: underline;
    border: var(--element-border);
}


.commissionFileStorageContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionFileStorageContainer .commissionFileStorageCreate{
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.commissionFileStorageContainer .createFileStorageTitle {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionFileStorageContainer select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionFileStorageContainer .customFileButton {
    display: inline-block;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    text-align: center;
}


.commissionFileStorageContainer .customFileButton:hover {
    background-color: var(--button-hover-color);
}

.commissionFileStorageCreate button {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

/* START CUSTOM FILE STORAGE CONTAINER VARIABLES*/
.commissionFileStorageMeasurementFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}


.commissionFileStorageContainer .createFileStorageMeasurementFile {
    display: none;
}

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

.commissionFileStorageDraftOrderConfirmationFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}


.commissionFileStorageContainer .createFileStorageDraftOrderConfirmationFile {
    display: none;
}

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

.commissionFileStorageDrawingPartListFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}


.commissionFileStorageContainer .createFileStorageDrawingPartListFile {
    display: none;
}

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

.commissionFileStorageCompletionFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}


.commissionFileStorageContainer .createFileStorageCompletionFile {
    display: none;
}
/* END CUSTOM FILE STORAGE CONTAINER VARIABLES*/

.commissionRestworkContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionRestworkContainer .commissionCreateRestwork {
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.commissionRestworkContainer .createRestworkTitle {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionRestworkContainer .createRestworkDate {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionRestworkContainer .createRestworkDescription {
    width: calc(100% - 24px);
    padding: 10px;
    height: 100px;
    border: none;
    background-color: var(--primary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
}

/* Hide the default file input */
.commissionRestworkFileContainer {
    display: grid;
    grid-template-columns: auto auto;
}

/* Hide the default file input */
.commissionRestworkContainer .createRestworkFile {
    display: none;
}

/* Style the custom file button */
.commissionRestworkContainer .customFileButton {
    display: inline-block;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    text-align: center;
}

/* Add hover effect to the custom file button */
.commissionRestworkContainer .customFileButton:hover {
    background-color: var(--button-hover-color);
}

.commissionRestworkContainer .createRestworkButton {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

.commissionRestworkContainer .createRestworkButton:hover {
    background-color: var(--button-hover-color);
}

.commissionRestworkList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /*gap: 10px;*/
    border-radius: 5px;
    /*padding: 20px 0px;*/
}

.commissionRestworkEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--primary-color);
    padding: 10px;
    border: var(--element-border);
}

.commissionRestworkEntryHead {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
}

.commissionRestworkEntrySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.commissionRestworkEntryFileContainer {
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border-radius: 0px 5px 5px 0px;
    border-left: 6px solid var(--traffic-light-orange);
    background-color: var(--primary-color);
    margin: 5px 0px 0px 0px;
}

.commissionRestworkEntryFileTitle {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration : underline;
}

.commissionRestworkEntryFileDownload a{
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    text-decoration: underline;
    word-break: break-all;
}

.commissionRestworkEntryFileNotify{
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--traffic-light-orange);
    margin: 5px 0px 0px 0px;
}

.commissionRestworkList .commissionRestworkEntrySpacer {
    background-color: var(--primary-color);
}

.commissionRestworkEntryDescription{
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
    border: none;
    resize: none;
}

.commissionRestworkEntryDate {
    font-size: 16px;
    color: var(--text-color);
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.commissionRestworkEntryDelete {
    display: none;
}

.commissionRestworkList .commissionRestworkEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--secondary-color);
    padding: 10px;
}

.commissionRestworkList .commissionRestworkEntryDelete {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.commissionRestworkList .commissionRestworkEntryDelete img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionRestworkList .commissionRestworkEntryDelete:hover {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}

.commissionRestworkEntryComplete {
    display: none;
}

.commissionRestworkList .commissionRestworkEntryComplete {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0px 0px 0px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--button-border);
}

.commissionRestworkList .commissionRestworkEntryComplete:hover {
    background-color: var(--button-hover-color);
}

.commissionRestworkEntryStatusRed {
    font-weight: bold;
    color: var(--traffic-light-red);
}

.commissionRestworkEntryStatusGreen {
    font-weight: bold;
    color: var(--traffic-light-green);
}

.commissionFileStorageFilesHead {
    font-size: 18px;
    color: var(--text-color);
    font-weight: bold;
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    text-decoration: underline;
    margin: 10px 0px 0px 0px;
}

.commissionFileStorageFiles {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionFileStorageImages {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 20px 0px;
    justify-items: start;
    grid-template-columns: repeat(4, 1fr);
    gap: 70px;
}

.commissionFileStorageOthers {
    width: 100%;
    display: grid;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 20px 0px;
    justify-items: start;
}

.commissionFileStorageOther {
    width: calc(100% - 24px);
    display: flex;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    align-items: center;
    justify-content: space-between;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
    transition: 0.1s;
}

.commissionFileStorageOther a {
    width: 100%;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    text-decoration: underline;
    word-break: break-all;
}

.commissionFileStorageOther:hover {
    border: 2px solid #2166b9;
}

.commissionFileStorageOther:hover a {
    padding-left: 10px;
}

.commissionFileStorageOther button {
    height: auto;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: "Oswald", Arial, sans-serif;
    grid-area: c;
    background-color: transparent;
    border: none;
    padding: 0px;
}

.commissionFileStorageOther button:hover {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.commissionFileStorageOther button img {
    width: 1.5rem;
    height: auto;
    padding: 5px;
}

.commissionFileStorageImage {
    width: 100%;
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--primary-color);
    display: grid;
    grid-template-areas: "a a a" "b b c";
}

.commissionFileStorageImageContainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    grid-area: a;
    border-radius: 5px;
    max-height: 170px;
    width: 100%;
    margin: 0px 0px 5px 0px;
}

.commissionFileStorageImage img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.commissionFileStorageImage button {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: "Oswald", Arial, sans-serif;
    grid-area: c;
    background-color: transparent;
    border: none;
    padding: 0px;
}

.commissionFileStorageImage button img {
    width: 2rem;
    height: auto;
    padding: 5px;
}

.commissionFileStorageImage button:hover img {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.commissionFileStorageImage .commissionFileStorageImageFileName {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    word-break: break-all;
    grid-area: b;
}

.modalMenuActive {
    text-decoration: underline;
}

.commissionCustomerAllData {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 5px 0px 10px 0px;
    justify-items: start;
    /*background-color: var(--secondary-color);*/
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.commissionCustomerAllDataEntry {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--secondary-color);
    border: var(--element-border);
}

.commissionCustomerAllDataEntry a {
    width: 100%;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    text-decoration: underline;
    word-break: break-all;
    text-align: center;
}

.comissionCustomerAllDataType {
    width: 100%;
    font-size: 16px;
    color: var(--text-color);
    display: grid;
    text-decoration: underline;
    font-weight: bold;
    justify-content: center;
}

.commissionContentSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.comissionCustomerAllDataContext {
    width: 100%;
    font-size: 16px;
    color: var(--text-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    justify-content: center;
}

.comissionCustomerAllDataAdress {
    width: 100%;
    font-size: 16px;
    color: var(--text-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.comissionCustomerAllDataAdress1, .comissionCustomerAllDataAdress2, .comissionCustomerAllDataAdress3 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.comissionCustomerSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
    display: none;
}

.drawingContainer {
    display: grid;
    grid-template-areas: "drawingCanvas";
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
    cursor: crosshair !important;
}

.drawingContainer img {
    grid-area: drawingCanvas;
}

#drawingCanvas {
    grid-area: drawingCanvas;
    cursor: crosshair !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: auto;
}

/* Ensure cursor stays visible even with magnifier active */
#drawingCanvas:hover {
    cursor: crosshair !important;
}

.magnifier-popup {
    cursor: crosshair !important;
}

.magnifier-popup * {
    cursor: crosshair !important;
}

.buttonSaveDrawing {
    width: 100%;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    margin: 25px 0px 0px 0px;
}

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

.buttonDownloadImage {
    width: 100%;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    margin: 25px 0px 0px 0px;
}

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

.buttonDeleteDrawing {
    width: 100%;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    margin: 25px 0px 0px 0px;
}

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

.commissionOrderOverviewContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
}

.commissionOrderOverviewInputContainer {
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.commissionOrderOverviewInputLabel {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionOrderOverviewInputContainer input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionOrderOverviewInputContainer select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionCreateOrder {
    width: calc(100% - 24px);
    gap: 10px;
    display: grid;
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    border: var(--element-border);
}

.createOrderTitle {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: 100%;
}

.commissionCreateOrder select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.createOrderButton {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.commissionOrderOverviewList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
}

.commissionOrderEntry {
    width: calc(100% - 24px);
    display: grid;
    grid-template-areas: "head" "spacer" "supplier1" "supplier2" "button" "fileWrapper";
    border-radius: 5px;
    margin: 0px 0px 10px 0px;
    background-color: var(--secondary-color);
    padding: 10px;
    transition: 0.2s;
    border: var(--element-border);
}

.commissionOrderEntryHead {
    grid-area: head;
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: grid;
    grid-template-areas: "title title files delete" "status status status status";
    grid-template-columns: 40% 40% 10% 10%;
}

.commissionOrderEntryFileContainer {
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    gap: 10px;
    border-radius: 5px;
    margin: 15px 0px 0px 0px;
    grid-area: fileWrapper;
    display: none;
}

.commissionOrderEntryFileContainerHead {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration : underline;
    margin: 0px 0px 10px 0px;
}

.commissionOrderEntryNewFile {
    display: grid;
    grid-template-columns: 100%;
    background-color: var(--primary-color);
    width: calc(100% - 24px);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    margin: 0px 0px 10px 0px;
    border: var(--element-border);
}

.commissionOrderEntryFileContainerFile {
    display: grid;
    grid-template-columns: 90% auto;
    border-radius: 5px;
    max-height: 170px;
    width: 100%;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    width: calc(100% - 24px);
    background-color: var(--primary-color);
    border: var(--element-border);
}

.commissionOrderEntryFileContainerFile a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    word-break: break-all;
    cursor: pointer;
    text-decoration: underline;
    color: var(--text-color);
    transition: 0.2s;
}

.commissionOrderEntryFileContainerFile:hover {
    border: 2px solid #2166b9;
}

.commissionOrderEntryFileContainerFile:hover a {
    padding-left: 10px;
}

.commissionOrderEntryFileContainerFile button {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: "Oswald", Arial, sans-serif;
    background-color: transparent;
    border: none;
    padding: 0px;
}

.commissionOrderEntryFileContainerFile button:hover img {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.commissionOrderEntryFileContainerFile button img {
    width: 1.5rem;
    height: auto;
    padding: 5px;
}

.createOrderFileCustomButton {
    display: inline-block;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    text-align: center;
}

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

.createOrderFileNameDisplay {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: var(--text-color);
    font-family: "Oswald", Arial, sans-serif;
}

.createOrderFileButton {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.commissionOrderEntrySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
    grid-area: spacer;
}

.commissionOrderEntrySupplier {
    font-size: 16px;
    color: var(--text-color);
    grid-area: supplier1;
    width: 100%;
}

.commissionOrderEntrySupplierTel {
    grid-area: supplier2;
}

.commissionOrderEntrySupplierTel a {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    transition: 0.2s;
    text-decoration: none;
}

.commissionOrderEntrySupplierTel a:hover {
    text-decoration: underline;
}

.commissionOrderEntryDelete {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    grid-area: delete;
}

.commissionOrderEntryShowHideFile {
    display: block;
    background-color: transparent;
    border: none;
    cursor: pointer;
    grid-area: files;
}

.commissionOrderEntryType {
    font-size: 16px;
    color: var(--text-color);
    grid-area: title;
    width: 100%;
    text-decoration: underline;
}

.commissionOrderEntryStatus {
    font-size: 16px;
    grid-area: status;
    color: var(--text-color);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.commissionOrderEntryRed {
    font-weight: bold;
    color: var(--traffic-light-red);
}

.commissionOrderEntryGreen {
    font-weight: bold;
    color: var(--traffic-light-green);
}

.commissionOrderEntryOrange {
    font-weight: bold;
    color: var(--traffic-light-orange);
}

.commissionOrderEntryDelete img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionOrderEntryDelete:hover img {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}

.commissionOrderEntryShowHideFile img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionOrderEntryShowHideFile:hover img {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.commissionOrderEntryButton {
    width: 100%;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    margin-top: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
    grid-area: button;
}

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

.noHide {
    display: none;
}

.displayNone {
    display: none !important;
}

.wrapperOrderConfirmation {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
}

.orderConfirmationHead {
    font-size: 24px;
    color: var(--text-color);
    font-weight: bold;
    width: 70%;
    text-align: center;
    margin: 0px 0px 30px 0px;
}

.orderConfirmationSupplierArea {
    width: calc(70% - 4px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    background-color: var(--primary-color);
    border-radius: 5px;
    padding: 10px;
    border: var(--element-border);
}

.orderConfirmationSupplierArea select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.orderConfirmationDateArea {
    width: calc(70% - 4px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    background-color: var(--primary-color);
    border-radius: 5px;
    padding: 10px;
    border: var(--element-border);
}

.orderConfirmationDateArea input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.orderConfirmationSubmit {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    width: calc(70% + 20px);
}

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

.wrapperOrderArrived {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
}

.orderArrivedHead {
    font-size: 24px;
    color: var(--text-color);
    font-weight: bold;
    width: 70%;
    text-align: center;
    margin: 0px 0px 30px 0px;
}

.orderArrivedSupplierArea {
    width: calc(70% - 4px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    background-color: var(--primary-color);
    border-radius: 5px;
    padding: 10px;
    border: var(--element-border);
}

.orderArrivedSupplierArea select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.orderArrivedDateArea {
    width: calc(70% - 4px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    background-color: var(--primary-color);
    border-radius: 5px;
    padding: 10px;
    border: var(--element-border);
}

.orderArrivedDateArea input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.orderArrivedSubmit {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    width: calc(70% + 20px);
}

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

.wrapperCustomerList {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 200px;
}

.filterCustomerList {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    border: var(--element-border);
}

.filterCustomerListTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.filterCustomerListContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filterCustomerListContentItem {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: calc(50% - 5px);
}

.filterCustomerList select {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.filterCustomerList input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.filterCustomerList button {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.customerList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.customerListItem {
    width: 100%;
    min-height: 20px;
    display: grid;
    grid-template-areas: "address address address address address" "spacer spacer spacer spacer spacer" "email number mobile actionA actionB" ;
    grid-template-columns: 25% 25% 25% auto;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    border: var(--element-border);
}

.customerListItem div {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--text-color);
}

.customerListItem div a {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    transition: 0.2s;
    min-height: 20px;
    word-break: break-word;
}

.customerListItem .customerListSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
    grid-area: spacer;
}

.customerListItem .customerListAddress {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: address;
}

.customerListItem .customerListEmail {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: email;
}

.customerListEdit {
    grid-area: actionA;
}

.customerListOverview {
    grid-area: actionB;
}

.customerListItem .customerListNumber {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: number;
}

.customerListItem .customerListMobile {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: mobile;
}

.customerListItem .customerListAction {
    min-height: 20px;
    justify-content: flex-start;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.2s;
}

.customerListItem .customerListAction:hover img {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.customerListItem .customerListAction img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionCount {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.wrapperCreateCustomer {
    width: calc(100% - 44px);
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    padding: 20px;
    background-color: var(--primary-color);
    border: var(--element-border);
}

.createCustomerContentItem {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
}

.createCustomerContentItem label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.createCustomerContentItem input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createCustomerContentItem button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

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

.customerSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.customerDeleteButton {
   background-color: transparent;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: "Oswald", Arial, sans-serif;
    grid-area: actionB;
}

.customerDeleteButton img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.customerDeleteButton img:hover {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}

/* Hour Creation Form Styles */
.containerMyHourContent {
    width: 100%;
    display: grid;
    grid-template-areas: "main sidebar";
    gap: 20px;
    border-radius: 5px;
    grid-template-columns: 70% 30%;
}

.containerMyHourMain {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    gap: 10px;
    grid-area: main;
    align-content: start;
}

.containerMyHourSidebar {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    gap: 10px;
    grid-area: sidebar;
}

.containerMyHourActiveRequest {
    width: calc(100% - 20px);
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: center;
    gap: 10px;
    border: var(--element-border);
    background-color: var(--primary-color);
    align-items: start;
    align-content: start;
}

.containerMyHourActiveRequestTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-align: center;
    border-bottom: var(--element-border);
    padding: 10px 0px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: baseline;
}

.containerMyHourActiveRequestTitle div {
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
}

.containerMyHourActiveRequestTitle div:hover {
    text-decoration: underline;
}

.ActiveRequestTitleActive {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
}

.ActiveRequestTitlePassive {
    opacity: 0.6;
    font-size: 12px;
}

/* Styles for the active requests list in the MyHours sidebar */
.containerMyHourActiveRequestList {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: transparent;
}

.containerMyHourCompletedRequestList {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: transparent;
    display: none;
}

.containerMyHourActiveRequestEntry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background-color: var(--secondary-color);
    border: var(--element-border);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.12s ease, background-color 0.12s ease;
}
.containerMyHourActiveRequestEntry:hover {
    transform: translateY(-2px);
    background-color: var(--darker-color);
}

.containerMyHourActiveRequestEntry.requestAccepted {
    border-left: 4px solid #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.containerMyHourActiveRequestEntry.requestRejected {
    border-left: 4px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.containerMyHourActiveRequestEntryType {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 4px;
}

.containerMyHourActiveRequestEntryInfo {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.9;
    padding: 2px 0;
}

.containerMyHourActiveRequestEntryActions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.1);
}

.containerMyHourRequestAcceptedInfo {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.1);
}

.loadMoreRequestsButton {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: var(--button-border);
    border-radius: 6px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 14px;
    font-family: "Oswald", Arial, sans-serif;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.loadMoreRequestsButton:hover {
    background-color: var(--button-hover-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.overtimeBalanceDisplay {
    background-color: #4a90e2;
    color: white;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.myHourRequestActionButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.myHourRequestActionButton img {
    width: 25px;
    height: 25px;
}

.myHourRequestActionButton.editButton {
    background-color: #4a90e2;
    color: white;
}

.myHourRequestActionButton.editButton:hover {
    background-color: #357abd;
    transform: scale(1.05);
}

.myHourRequestActionButton.deleteButton {
    background-color: #e74c3c;
    color: white;
}

.myHourRequestActionButton.deleteButton:hover {
    background-color: #c0392b;
    transform: scale(1.05);
}

.wrapperCreateMyHour {
    width: calc(100% - 44px);
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    background-color: var(--primary-color);
    border: var(--element-border);
    padding: 20px;
}

.createMyHourContentItem {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
}

.createMyHourContentItem label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.createMyHourContentItem input[type="text"],
.createMyHourContentItem input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createMyHourContentItem select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
}

.createMyHourContentItem textarea {
    width: calc(100% - 24px);
    padding: 10px;
    height: 80px;
    border: none;
    background-color: var(--secondary-color);
    border-radius: 5px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Oswald", Arial, sans-serif;
    resize: vertical;
}

.createMyHourContentItem button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

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

.createMyHourContentItem input[type="text"]:focus,
.createMyHourContentItem input[type="date"]:focus,
.createMyHourContentItem select:focus,
.createMyHourContentItem textarea:focus {
    outline: 2px solid var(--button-hover-color);
    outline-offset: 2px;
}

.createMyHourContentItem input[type="text"]::placeholder,
.createMyHourContentItem textarea::placeholder {
    color: var(--text-color);
    opacity: 0.7;
}

.wrapperOrderConfig {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% + 20px);
    min-height: 200px;
    gap: 10px;
    left: -10px;
    position: relative;
}

.wrapperOrderConfigMenu {
    width: calc( 100% - 4px);
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    background-color: var(--primary-color);
    border-radius: 5px;
    border: var(--element-border);
}

.orderConfigMenuItem {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
}

.orderConfigMenuItem Button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    display: flex;        
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
} 

.orderConfigMenuItem Button:hover {
    background-color: var(--button-hover-color);
}

.orderConfigMenuActive {
    background-color: var(--button-hover-color) !important;
}

.orderConfigMenuItem img {
    width: 35px;
    height: auto;
}

.orderConfigHiddenWrapper {
    display: none !important;
}

.wrapperOrderConfigSupplier {    
    width: 100%;
    grid-template-columns: 100%;
    display: grid;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    gap: 10px;
}

.wrapperOrderConfigArticle {
    width: 100%;
    grid-template-columns: 100%;
    display: grid;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    gap: 10px;
}

.filterSupplierList {
    width: calc(100% - 24px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    background-color: var(--primary-color);
    border: var(--element-border);
}

.moreFunctionsContainerSupplier {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--primary-color);
    border: var(--element-border);
}

.moreFunctionsButtonSupplier {
    width: auto;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

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

.moreFunctionsButtonSupplier img {
    width: 35px;
    height: auto;
}

.filterSupplierListTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.filterSupplierListContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filterSupplierListContentItem {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: calc(50% - 5px);
}

.filterSupplierList select {
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.filterSupplierList input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.filterSupplierList button {
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-items: start;
    font-family: "Oswald", Arial, sans-serif;
}

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

.supplierList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.supplierListItem {
    width: calc(100% - 24px);
    min-height: 20px;
    display: grid;
    grid-template-areas: "address address address address address" "spacer spacer spacer spacer spacer" "customerNr customerNr customerNr actionA actionB" "number number number actionA actionB";
    grid-template-columns: 25% 25% 25% auto;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    border: var(--element-border);
}

.supplierListItem div {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--text-color);
}

.supplierListItem div a {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    transition: 0.2s;
    min-height: 20px;
    word-break: break-word;
}

.supplierListItem .supplierListSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
    grid-area: spacer;
}

.supplierListItem .supplierListAddress {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: address;
}

.supplierListEdit {
    grid-area: actionA;
}

.supplierDeleteButton {
    grid-area: actionB;
}

.supplierListItem .supplierListNumber {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: number;
}

.supplierListItem .supplierListCustomerNumber {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: customerNr;
}

.supplierListItem .supplierListAction {
    min-height: 20px;
    justify-content: flex-start;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.2s;
}

.supplierListItem .supplierListAction:hover img {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.supplierListItem .supplierListAction img {
    width: 30px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.supplierDeleteButton {
    background-color: transparent;
     border: none;
     cursor: pointer;
     transition: 0.2s;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     font-family: "Oswald", Arial, sans-serif;
 }
 
 .supplierDeleteButton img {
     width: 30px;
     height: auto;
     margin: auto;
     padding: 5px;
 }
 
 .supplierDeleteButton img:hover {
     background-color: var(--traffic-light-red);
     border-radius: 4px;
 }

 .wrapperCreateSupplier {
    width: calc(100% - 44px);
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    background-color: var(--primary-color);
    border: var(--element-border);
    padding: 20px;
}

.createSupplierContentItem {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
}

.createSupplierContentItem label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.createSupplierContentItem input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createSupplierContentItem button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

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

.supplierSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

 .createNewArticle {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--primary-color);
    border: var(--element-border);
}

.createNewArticleTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.createNewArticleContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.createNewArticleContentItem {
    font-size: 16px;
    font-weight: 200;
    color: var(--text-color);
    width: calc(50% - 5px);
}

.createNewArticleContentItem input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createNewArticleContentItem select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createNewArticle button {
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

.articleList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.articleListItem {
    width: calc(100% - 24px);
    min-height: 20px;
    display: grid;
    grid-template-areas: "type standard actionB actionA" ;
    grid-template-columns: 40% 20% auto auto;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    border: var(--element-border);
}

.articleListType {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: type;
}

.articleListStandard {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: standard;
}

.articleDeleteButton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: "Oswald", Arial, sans-serif;
    grid-area: actionA;
}

.articleDeleteButton img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.articleDeleteButton img:hover {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}

.articleListEdit {
    min-height: 20px;
    justify-content: flex-start;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.2s;
    grid-area: actionB;
}

.articleListEdit img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.articleListEdit:hover img {
    background-color: var(--secondary-color);
    border-radius: 4px;
}


 .wrapperCreateArticle {
    width: calc(100% - 44px);
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    background-color: var(--primary-color);
    border: var(--element-border);
    padding: 20px;
}

.createArticleContentItem {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
}

.createArticleContentItem label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.createArticleContentItem input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createArticleContentItem select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createArticleContentItem button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

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

.wrapperMaskSettings {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: center;
    gap: 10px;
}

.settingsSection {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--primary-color);
    border: var(--element-border);
}

.maskSettingsCategory {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    border-radius: 5px;
    display: grid;
    align-items: center;
    justify-content: start;
    align-content: center;
    grid-template-areas: "title spacer";
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin: 30px 0px 10px 0px;
}

.maskSettingsCategory:first-of-type {
    margin: 0px 0px 10px 0px;
}

.maskSettingsCategoryTitle {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    grid-area: title;
}

.maskSettingsCategorySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.settingsSectionTitle {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.settingsSectionSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.settingsSectionContent {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#saveImprintButton {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

#saveImprintButton:hover {
    background-color: var(--button-hover-color);
}

.changePasswordInput {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.tooltipChangePasswort {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.tooltipBad {
    background-color: var(--tooltip-color);
    color: var(--text-color);
}

.tooltipGood {
    background-color: var(--traffic-light-green);
    color: var(--text-color);
}

.settingsSection form {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.moreFunctionsContainerUser {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--secondary-color);
    border: var(--element-border);
}

.moreFunctionsButtonUser {
    width: auto;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    display: flex;        
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

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

.moreFunctionsButtonUser img {
    width: 35px;
    height: auto;
}

.userList {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--secondary-color);
    border: var(--element-border);
}

.userListItem {
    width: calc(100% - 24px);
    min-height: 20px;
    display: grid;
    grid-template-areas: "username rights actionA actionB";
    grid-template-columns: 30% 30% auto auto;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
}

.userListName {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: username;
}

.userListRights {
    min-height: 20px;
    justify-content: flex-start;
    grid-area: rights;
}

.userDeleteButton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: "Oswald", Arial, sans-serif;
    grid-area: actionB;
}

.userDeleteButton img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.userDeleteButton img:hover {
    background-color: var(--traffic-light-red);
    border-radius: 4px;
}

.userEditButton {
    min-height: 20px;
    justify-content: flex-start;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.2s;
    grid-area: actionA;
}

.userEditButton img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.userEditButton img:hover {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.wrapperCreateUser {
    width: calc(100% - 44px);
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 20px 0px 20px 0px;
    justify-items: center;
    background-color: var(--primary-color);
    border: var(--element-border);
    padding: 20px;
}

.createUserContentItem {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
}

.createUserContentItem label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.createUserContentItem input[type="text"], .createUserContentItem input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createUserContentItem select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.createUserContentItem button {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

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

.createUserCheckboxLabel {
    display: flex !important;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: bold !important;
    color: var(--text-color) !important;
    width: 100% !important;
    padding: 5px 0;
}

.createUserCheckbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 50px;
    height: 26px;
    border: none;
    border-radius: 13px;
    background-color: #9e9e9e;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.createUserCheckbox:checked {
    background-color: #4caf50;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.createUserCheckbox::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.createUserCheckbox:checked::before {
    transform: translateX(24px);
}

.createUserCheckbox:hover {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.createUserCheckboxText {
    user-select: none;
    transition: color 0.2s ease;
}

.informationContainer {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--secondary-color);
}

.informationTitle {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    display: grid;
    border-radius: 5px;
    grid-template-columns: 100%;
}

.informationText {
    font-size: 16px;
    color: var(--text-color);
    width: 100%;
    border-radius: 5px;
}

.userSpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.wrapperMyHours {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: center;
    gap: 10px;
}

.containerMyHourStats {
    width: 100%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--primary-color);
    gap: 0.5%;
    border: var(--element-border);
}

.containerMyHourList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.containerMyHourStatEntry {
    width: calc(100% - 20px);
    min-height: 20px;
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    background-color: var(--secondary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
}

.containerMyHourStatTitle {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.containerMyHourStatValue {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
    font-size: 30px;
    color: var(--text-color);
    width: 100%;
}

.workedHoursGood {
    color: var(--traffic-light-green);
}

.workedHoursBad {
    color: var(--traffic-light-red);
}

.containerMyHourFilter {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--primary-color);
    border: var(--element-border);
}

.containerMyHourFilterEntry {
    width: calc(50% - 5px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
}

.containerMyHourFilterEntry:nth-child(odd) {
    padding: 5px 0px 5px 5px;
}

.containerMyHourFilterEntry:nth-child(even) {
    padding: 5px 5px 5px 0px;
}

.containerMyHourFilterEntry label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.containerMyHourFilter input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.containerMyHourFilter select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.containerMyHourFilterTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.containerMyHourFilter input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    font-size: 16px;
}

.containerMyHourFilterButton {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    margin: 10px 0px;
}

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

.containerMyHourEntry {
    width: 100%;
    min-height: 20px;
    display: grid;
    grid-template-areas: "date date date function" "spacer spacer spacer spacer" "commission commission commission commission" "hour hour hour hour" "description description description description" "user user user user";
    grid-template-columns: 25% 25% 25% 25%;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    border: var(--element-border);
}

.containerMyHourEntry > div {
    width: calc(100% - 10px);
}

.containerMyHourEntryDate {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: date;
}

.containerMyHourEntrySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
    grid-area: spacer;
}

.containerMyHourEntryCommissionName {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: commission;
}

.containerMyHourEntryHours {
    min-height: 20px;
    justify-content: center;
    grid-area: hour;
}

.containerMyHourEntryDescription {
    min-height: 20px;
    justify-content: center;
    grid-area: description;
}

.containerMyHourEntryUser {
    min-height: 20px;
    justify-content: center;
    grid-area: user;
}

.containerMyHourEntryFunctions {
    min-height: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    grid-area: function;
}

.containerMyHourEntryButton {
    width: 100%;
    min-height: 20px;
    border: none;
    border-radius: 5px;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.containerMyHourEntryButton img {
    padding: 5px;
    width: 25px;
    height: auto;
    margin: auto;
}

.containerMyHourEntryButton img:hover {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

.commissionHourStatsContainer {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: repeat(5, auto);
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--secondary-color);
    gap: 0.5%;
    margin: 0px 0px 10px 0px;
    border: var(--element-border);
}

.commissionHourStat {
    width: calc(100% - 20px);
    min-height: 20px;
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
}

.commissionHourStatTitle {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.commissionHourStatValue {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-items: center;
    font-size: 30px;
    color: var(--text-color);
    width: 100%;
}

.commissionHourFilter {
    width: calc(100% - 24px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    margin: 0px 0px 10px 0px;
    border: var(--element-border);
}

.commissionHourFilterEntry {
    width: calc(50% - 5px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
}

.commissionHourFilterEntry:nth-child(odd) {
    padding: 5px 0px 5px 5px;
}

.commissionHourFilterEntry:nth-child(even) {
    padding: 5px 5px 5px 0px;
}

.commissionHourFilterEntry label {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
}

.commissionHourFilter input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionHourFilter select {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionHourFilterTitle {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    width: 100%;
    text-decoration: underline;
}

.commissionHourFilter input[type="text"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 24px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
}

.commissionHourFilterButton {
    width: 100%;
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
    margin: 10px 0px;
}

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

.commissionHourEntry {
    width: calc(100% - 24px);
    min-height: 20px;
    display: grid;
    grid-template-areas: "date date date function" "spacer spacer spacer spacer" "commission commission commission commission" "hour hour hour hour" "description description description description" "user user user user";
    grid-template-columns: 25% 25% 25% 25%;
    align-items: center;
    background-color: var(--secondary-color);
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    margin: 0px 0px 10px 0px;
    border: var(--element-border);
}

.commissionHourEntry > div {
    width: calc(100% - 10px);
}

.commissionHourEntryDate {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: date;
}

.commissionHourEntrySpacer {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
    grid-area: spacer;
}

.commissionHourEntryCommissionName {
    min-height: 20px;
    justify-content: center;
    font-weight: bold;
    grid-area: commission;
}

.commissionHourEntryHours {
    min-height: 20px;
    justify-content: center;
    grid-area: hour;
}

.commissionHourEntryDescription {
    min-height: 20px;
    justify-content: center;
    grid-area: description;
}

.commissionHourEntryUser {
    min-height: 20px;
    justify-content: center;
    grid-area: user;
}

.commissionHourEntryFunctions {
    min-height: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    grid-area: function;
}

.commissionHourEntryButton {
    width: 100%;
    min-height: 20px;
    border: none;
    border-radius: 5px;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.commissionHourEntryButton img {
    width: 25px;
    height: auto;
    margin: auto;
    padding: 5px;
}

.commissionHourEntryButton img:hover {
    background-color: var(--primary-color);
    border-radius: 4px;
}

/* Restwork Overview Styles */
.restworkOverviewContainer {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.restworkMonthlyStats {
    background-color: var(--primary-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: var(--element-border);
}

.restworkMonthlyStats h3 {
    margin: 0 0 15px 0;
    color: var(--text-color);
    text-align: center;
    font-size: 18px;
}

.statsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    text-align: center;
}

.statItem {
    background-color: var(--secondary-color);
    border-radius: 6px;
    padding: 15px;
    border: var(--element-border);
}

.statNumber {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
    display: block;
    margin-bottom: 5px;
}

.statNumber.statOpen {
    color: #ff4444;
}

.statNumber.statCompleted {
    color: #44aa44;
}

.statLabel {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
}

.restworkSeparator {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.restworkCommissionList {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.noRestworkMessage {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--primary-color);
    border-radius: 8px;
    color: var(--text-color);
}

.noRestworkMessage h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.restworkCommissionContainer {
    background-color: var(--primary-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: var(--element-border);
}

.commissionHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.commissionInfo h3 {
    margin: 0 0 10px 0;
    color: var(--text-color);
    font-size: 18px;
}

.commissionDetails {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.commissionDetails span {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.9;
}

.commissionStatus {
    background-color: var(--secondary-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    width: fit-content;
}

.openCommissionBtn {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: var(--button-border);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 14px;
    transition: 0.2s;
}

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

.commissionSeparator {
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    margin: 10px 0px;
    border-radius: 4px;
    border: none;
}

.restworkStats {
    margin: 15px 0;
}

.restworkStatsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    text-align: center;
}

.restworkStatItem {
    background-color: var(--secondary-color);
    border-radius: 5px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: var(--element-border);
}

.restworkStatNumber {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 5px;
}

.restworkStatNumber.restworkStatOpen {
    color: #ff4444;
}

.restworkStatNumber.restworkStatCompleted {
    color: #44aa44;
}

.restworkStatLabel {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
}

.restworkToggleContainer {
    text-align: center;
    margin: 15px 0;
}

.restworkToggleBtn {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: var(--button-border);
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 13px;
    transition: 0.2s;
}

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

.restworkToggleBtn.expanded {
    background-color: var(--button-hover-color);
}

.restworkDetails {
    margin-top: 15px;
}

.restworkDetailItem {
    background-color: var(--secondary-color);
    border-radius: 0px 5px 5px 0px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 4px solid;
    border: var(--element-border);
}

.restworkDetailItem.restworkOpen {
    border-left-color: #ff4444;
}

.restworkDetailItem.restworkCompleted {
    border-left-color: #44aa44;
}

.restworkDetailHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.restworkDetailDate {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.8;
}

.restworkDetailStatus {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: var(--primary-color);
    color: var(--text-color);
}

.restworkDetailDescription {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
}

.formContainer {
    width: calc(100% - 44px);
    margin: 0 auto;
    background-color: var(--primary-color);
    padding: 20px;
    border-radius: 8px;
    border: var(--element-border);
}

.formContainer form {
    width: 100%;
}

.formContainer label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

.formContainer input[type="text"],
.formContainer input[type="date"],
.formContainer input[type="number"],
.formContainer textarea {
    width: calc(100% - 24px);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
}

.formContainer select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 16px;
}

.formContainer button {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: var(--button-border);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 16px;
    transition: 0.2s;
    width: 100%;
}

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

label[for="overtimeWeek"], label[for="overtimeDate"], #overtimeWeek, #overtimeDate, label[for="overtimeReductionDate"], #overtimeReductionDate {
    display: none;
}

.maskSettingsMenu {
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--primary-color);
    border: var(--element-border);
    gap: 5px;
}

.maskSettingsMenuButton {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: var(--button-border);
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Oswald", Arial, sans-serif;
    font-size: 16px;
    transition: 0.2s;
    width: 100%;
}

.maskSettingsMenu > .active {
    background-color: var(--button-hover-color) !important;
}

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

.maskSettingsMenuButton img {
    width: 20px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
}

.settingsSectionOvertimeModeContainer {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    justify-items: start;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--secondary-color);
    border: var(--element-border);
    margin-bottom: 20px;
}

.settingsOvertimeModeDescription {
    font-size: 14px;
    color: var(--text-color);
    width: 100%;
}

.settingsOvertimeModeSelect {
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    background-color: var(--primary-color);
    font-size: 16px;
    width: 100%;
}

#saveOvertimeModeButton {
    min-height: 20px;
    padding: 10px;
    border: var(--button-border);
    font-size: 16px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--text-color);
    cursor: pointer;
    transition: 0.2s;
    font-family: "Oswald", Arial, sans-serif;
}

#saveOvertimeModeButton:hover {
    background-color: var(--button-hover-color);
}

.buttonOpenMobileMenu {
    display: none;
    background-color: var(--secondary-color);
    border: var(--element-border);
    border-radius: 20px;
    cursor: pointer;
    padding: 10px;
    width: 75px;
    height: 75px;
    box-shadow: 0px 0px 5px black;
    transition: 0.2s;
    z-index: 201;
}

.buttonOpenMobileMenu img {
    width: 30px;
    height: auto;
}

.buttonOpenMobileMenu:hover {
    background-color: var(--button-hover-color);
    transform: translateY(-1px)
}

.buttonOpenMobileMenu:active {
    background-color: var(--button-hover-color);
    transform: translateY(1px);
}

@media only screen and (max-width: 1200px) {

    .wrapper {
        width: 100%;
    }

    .login {
        padding: 30px;
        max-width: 70vw;
    }

    .imprint {
        padding: 30px;
        max-width: 70vw;
    }

    .wrapperHome {
        grid-template-columns: 95vw;
        justify-content: space-evenly;
        padding: 10px 0px;
        gap: 15px;
        width: 100%;
    }

    .wrapperContent {
        max-height: none;
        justify-content: flex-start;
    }

    .menu {
        width: 90%;
        height: auto;
    }

    .content {
        width: 90%;
        height: auto;
        margin: 0px 0px 20px 0px;
    }

    .versionInfo {
        font-size: 10px;
    }

    .commissionContentArea {
        padding: 0px;
    }

    .commissionSpecialContainer .commissionCreateSpecial .createSpecialDate {
        min-height: 30px;
    }

    .commissionQAContainer .commissionCreateQA .createQADate {
        min-height: 30px;
    }

    .filterCommissionList select {
        min-height: 30px;
    }

    .commissionDataContainer select {
        min-height: 30px;
    }

    .modalContent {
        width: 80%;
    }

    .modalContent .modalImageViewer {
        width: 100%;
        height: auto;
        max-height: fit-content;
    }

    .noHide {
        display: block;
    }

    .orderConfirmationHead {
        width: 90%;
    }

    .orderConfirmationSupplierArea {
        width: 90%;
    }

    .orderConfirmationDateArea {
        width: 90%;
    }

    .orderConfirmationSubmit {
        width: calc(90% + 20px);
    }

    .orderArrivedHead {
        width: 90%;
    }

    .orderArrivedSupplierArea {
        width: 90%;
    }

    .orderArrivedDateArea {
        width: 90%;
    }

    .orderArrivedSubmit {
        width: calc(90% + 20px);
    }

    .commissionHourStatsContainer {
        grid-template-columns: repeat(2, auto);
        gap: 10px;
    }

    .menuItem button:hover {
        transform: scale(1.00);
    }

    .containerMyHourContent {
        grid-template-areas: "sidebar" "main";
        grid-template-columns: 100%;
    }

    .containerMyHourSidebar {
        width: 100%;
        margin: 0px;
    }

    .containerMyHourActiveRequest {
        width: 100%;
        padding: 10px;
    }

    .containerMyHourMain {
        width: 100%;
        margin: 0px;
    }
    
    .containerHourManagementHeader div {
        width: 100%;
    }

    .containerHourManagementUserFilter {
        justify-content: space-between;
    }

    .containerHourManagementUserFilter select{
        width: 80%;
    }

    .maskSettingsMenuButton {
        display: grid;
        align-content: start;
        justify-content: center;
        align-items: center;
        justify-items: center;
        font-size: 14px;
    }

    .maskSettingsMenuButton img {
        margin: 0px;
    }

    .wrapperOrderConfigMenu {
        grid-template-columns: 50% 50%;
    }

    .orderConfigMenuItem Button {
        flex-direction: column;
        gap: 0px;
    }

    @media only screen and (max-width: 600px) {
        .login img {
            width: 100%;
        }

        .login input[type="text"],
        .login input[type="password"] {
            width: 100%;
            font-size: 14px;
            padding: 10px;
        }

        .login #loginButton {
            width: 100%;
            font-size: 16px;
            padding: 10px;
        }

        .wrapperImprint {
            align-items: flex-start;
        }

        .imprint {
            margin: 15px 0px 0px 0px;
            max-height: 75vh;
        }

        .buttonContentSelector {
            width: calc(50% - 5px);
        }

        .filterCommissionListContentItem {
            width: 100%;
        }

        .filterCustomerListContentItem {
            width: 100%;
        }

        .commissionListEntryLight {
            grid-column: span 2;
        }

        .commissionListEntryMissingTask {
            grid-column: span 2;
        }

        .moreFunctionsButton {
            width: 100%;
        }

        /* new menu styles */
        .buttonOpenMobileMenu {
            display: block;
            position: sticky;
            bottom: 10px;
            left: 10px;
        }

        .wrapperMenu {
            display: none;
            position: fixed;
            width: 90%;
            height: 100%;
            left: 5%;
            z-index: 200;
        }
        /* new menu styles end */

        .modalContentSwitch {
            justify-content: center;
        }

        .commissionFileStorageImages {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .commissionCustomerAllData {
            grid-template-columns: 50% 50%;
            justify-content: center;
        }

        .comissionCustomerAllDataAdress {
            text-align: center;
        }

        .comissionCustomerAllDataType {
            text-align: center;
        }

        .comissionCustomerAllDataContext {
            justify-content: center;
        }

        .commissionCustomerAllDataEntry a {
            width: 100%;
            text-align: center;
        }

        .comissionCustomerSpacer {
            /*display: block;*/
        }

        .customerListItem {
            grid-template-areas: "address address address address" "spacer spacer spacer spacer" "email email actionA actionB" "number number actionA actionB" "mobile mobile actionA actionB";
        }

        .wrapperOrderConfigMenu {
            grid-template-columns: 100%;
        }
        
        .orderConfigMenuItem {
            width: calc(100% - 20px);
            padding: 5px 10px;
        }

        .moreFunctionsButtonSupplier {
            width: 100%;
        }

        .moreFunctionsButtonUser {
            width: 100%;
        }

        .filterSupplierListContentItem {
            width: 100%;
        }

        .supplierListItem {
            grid-template-areas: "address address address address" "spacer spacer spacer spacer" "number customerNr actionB actionA" ;
        }

        .createNewArticleContentItem {
            width: 100%;
        }

        .articleListItem {
            grid-template-areas: "type type actionB actionA" "standard standard actionB actionA" ;
            grid-template-columns: 30% 30% auto auto;
        }
        
        .containerMyHourStats {
            grid-template-columns: 100%;
        }

        .containerMyHourFilterEntry {
            width: 100%;
        }

        .containerMyHourFilterEntry:nth-child(odd) {
            padding: 0px;
        }

        .containerMyHourFilterEntry:nth-child(even) {
            padding: 0px;
        }

        .containerMyHourEntry {
            grid-template-areas: "date date function function" "spacer spacer spacer spacer" "commission commission commission commission" "hour hour hour hour" "description description description description" "user user user user";
        }

        .commissionHourFilterEntry {
            width: 100%;
        }

        .commissionHourFilterEntry:nth-child(odd) {
            padding: 0px;
        }

        .commissionHourFilterEntry:nth-child(even) {
            padding: 0px;
        }

        .commissionHourEntry {
            grid-template-areas: "date date function function" "spacer spacer spacer spacer" "commission commission commission commission" "hour hour hour hour" "description description description description" "user user user user";
        }

        .commissionHourStatsContainer {
            grid-template-columns: repeat(1, auto);
            gap: 10px;
        }

        .statsGrid,
        .restworkStatsGrid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        
        .commissionHeader {
            flex-direction: column;
            align-items: stretch;
        }
        
        .restworkDetailHeader {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .restworkToggleBtn {
        width: 100%;
        }

        .openCommissionBtn {
            width: 100%;
        }

        .filterHourTypesSubtypeListContentItem {
            width: 100%;
        }

        #filterHourTypesSubtypeMainType {
            width: 100%;
        }

        .moreFunctionsButtonSecondary {
            width: 100%;
        }

        .containerMyHourActiveRequestList  {
            width: 100%;
        }

        .containerMyHourCompletedRequestList  {
            width: 100%;
        }

        .calendarButton {
            width: 100%;
        }

        .maskSettingsMenu {
            grid-template-columns: 100%;
        }
    }
}

.animation {
    animation: barrelRoll 1s;
}

@keyframes barrelRoll {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/**************************************************************/
/* Stundenverwaltung (Hour Management) */
/**************************************************************/

.containerHourManagementHeader {
    width: 100%;
    display: flex;
    gap: 10px;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 5px;
    flex-wrap: wrap;
    margin: 0px 0px 10px 0px;
    justify-items: start;
    border: var(--element-border);
    justify-content: space-between;
    align-items: center;
}

.containerHourManagementTitle {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
}

.containerHourManagementUserFilter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.containerHourManagementUserFilter label {
    color: var(--text-color);
    font-weight: 500;
}

.containerHourManagementUserFilter select {
    padding: 8px 12px;
    border: var(--input-border);
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    min-width: 250px;
    cursor: pointer;
    font-size: 14px;
}

.containerHourManagementUserFilter select:hover {
    background-color: var(--button-hover-color);
}

.containerHourManagementUserFilter select:focus {
    outline: none;
    border-color: var(--text-color-light);
}

.containerMyHourActiveRequestEntryUser {
    font-size: 0.9em;
    color: var(--text-color-light);
    margin-bottom: 8px;
    font-weight: 500;
}

.acceptButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    background-color: #2d742d;
    color: white;
}

.acceptButton:hover {
    background-color: #1f5a1f;
    transform: scale(1.05);
}

.acceptButton img {
    width: 25px;
    height: 25px;
}

.rejectButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    background-color: #e74c3c;
    color: white;
}

.rejectButton:hover {
    background-color: #c0392b;
    transform: scale(1.05);
}

.rejectButton img {
    width: 25px;
    height: 25px;
}

.processHourRequestForm {
    background: var(--secondary-color);
    padding: 15px;
    border-radius: 5px; 
    margin-bottom: 20px;
}

.processRequestHeader {
    margin: 0 0 10px 0;
}

.processRequestDetails {
    background-color: var(--secondary-color);
    border-radius: 5px;
    padding: 5px;
    border: var(--element-border);
    margin-bottom: 20px;
}

/* Vacation Overlap Info Boxes */
.vacationOverlapWarning {
    margin-top: 15px;
    padding: 12px 15px;
    background-color: rgba(180, 149, 24, 0.15);
    border: 1px solid var(--traffic-light-orange);
    border-left: 4px solid var(--traffic-light-orange);
    border-radius: 5px;
}

.vacationOverlapWarning p {
    margin: 0 0 10px 0;
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

.vacationOverlapWarning ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-color);
}

.vacationOverlapWarning li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.vacationOverlapSuccess {
    margin-top: 15px;
    padding: 12px 15px;
    background-color: rgba(45, 116, 45, 0.15);
    border: 1px solid var(--traffic-light-green);
    border-left: 4px solid var(--traffic-light-green);
    border-radius: 5px;
}

.vacationOverlapSuccess p {
    margin: 0;
    color: var(--text-color);
    font-size: 14px;
}