/* global colors */
:root {
    --primary: #343434;
    --primary-lighten-1: #6A6A6A;
    --primary-lighten-2: #CBCBCB;
    --primary-lighten-3: #E5E5E5;
    --primary-lighten-4: #F5F5F5;
    --primary-lighten-hover: #EDEDED;
    --accent: #004B88;
    --accent-hover: #26669A;
    --accent-lighten-1: #308BD5;
    --secondary: #29235C;
    --secondary-hover: #494474;
    --background: #ffffff;
    --error: #DC210C;
    --error-hover: #E66355;
    --error-faded: #FDEFEE;
    --success: #5BAF4C;
    --success-hover: #84C379;
    --warning: #FECB14;
    --light-overlay: #ffffff94;
}

html, body {
    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--background) !important;
    color: var(--primary-lighten-1);
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
}

a {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

    a:hover {
        color: var(--accent-hover) !important;
    }

.content {
    padding-top: 1.1rem;
}

/* Layout */
.main-content {
    flex: 1 0 auto;
    width: 100%;    
}

.mud-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
}

.mud-drawer.mud-drawer-persistent {
    height: fit-content !important;
}
/* Buttons' styles */
.btn {
    font-weight: 550 !important;
    font-size: 1em !important;
    text-transform: none !important;
    min-width: 120px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    padding: 4px 16px !important;
}

.btn-text {
    border: none !important;
    font-size: 1em !important;
    text-transform: none !important;
    color: var(--accent) !important;
}

    .btn-text:hover {
        background-color: transparent !important;
        cursor: pointer;
        color: var(--accent-hover) !important;
    }

.icon-btn:hover {
    cursor: pointer;
}

.btn-primary-outlined {
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

.btn-accent-outlined {
    color: var(--accent) !important;
    border: 2px solid var(--accent) !important;
}

    .btn-accent-outlined:hover {
        background-color: var(--accent-faded) !important;
    }

.btn-primary-lighten {
    color: var(--primary) !important;
    border: 2px solid var(--primary-lighten-3) !important;
    background-color: var(--primary-lighten-3) !important;
}

    .btn-primary-lighten:hover {
        background-color: var(--primary-lighten-hover) !important;
        border-color: var(--primary-lighten-hover) !important;
    }

.btn-accent {
    color: var(--background) !important;
    border: 2px solid var(--accent) !important;
    background-color: var(--accent) !important;
}

    .btn-accent:hover {
        border: 2px solid var(--accent-hover) !important;
        background-color: var(--accent-hover) !important;
    }
    
.btn-secondary {
    color: var(--background) !important;
    border: 2px solid var(--secondary) !important;
    background-color: var(--secondary) !important;
}
    .btn-secondary.mud-button-root:disabled {
        color: var(--primary-lighten-3) !important;
    }

    .btn-secondary:hover {
        border: 2px solid var(--secondary-hover) !important;
        background-color: var(--secondary-hover) !important;
    }


/* Input field customization */
.input-label {
    font-size: 1rem !important;
    margin-bottom: 2px;
    color: var(--secondary-lighten-1);
}

.input-field .mud-input {
    font-size: 1em !important;
}

.input-field .mud-input-outlined-border {
    border-radius: 4px !important;
    border-width: 1.5px !important;
}


.input-field .mud-input-label-inputcontrol {
    font-size: 1em !important;
    line-height: 1em !important;
}

/* General */
.content-title {
    font-size: 1.3rem !important;
    font-weight: 550;
    color: var(--accent) !important;
}

.content-subtitle {
    font-weight: 500;
    font-size: 1.1rem !important;
    color: var(--primary) !important;
}

.text-subtitle {
    color: var(--primary-lighten-1);
    font-size: 0.9rem;
    line-height: 24px;
}

.content-bottom-actions {
    margin-top: 40px;
    display: flex;
    justify-content: end;
    gap: 10px;
}

.divider {
    width: 100%;
    background-color: var(--primary-lighten-2);
    height: 0.085rem;
}
.required-star {
    color: var(--error);
}
.custom-error-message {
    color: var(--error);
    font-size: 0.8rem;
}

/* File drag area */
.file-drag-area {
    border: 2px dashed var(--primary-lighten-2) !important;
    display: flex;
}
    .file-drag-area.dragging {
        border-color: var(--primary) !important;
    }

.file-drag-area-input:hover {
    cursor: pointer;
}

/* MudBlazor customization */
.mud-main-content {
    background-color: var(--background) !important;
}

.mud-dialog {
    border-radius: 0px !important;
    margin: 10px !important;
    background-color: var(--background) !important;
}

.mud-dialog-actions {
    padding: 10px 20px 20px 20px !important;
}

.mud-dialog-title {
    padding-bottom: 10px !important;
}

    .mud-dialog-title .mud-typography {
        font-weight: 550 !important;
        color: var(--primary) !important;
        font-size: 1.5em !important;
        font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    }

.mud-checkbox .mud-typography {
    align-self: center !important;
}   

.mud-checkbox {
    display: flex !important;
    align-items: flex-start !important;
}

.mud-alert {
    border-radius: 0px !important;
}


.mud-input {
    font-size: 14px !important;
}

.mud-list-item .mud-typography {
    font-size: 14px !important;
}

.mud-input-slot .mud-typography {
    font-size: 14px !important;
}

.mud-tooltip {
    word-wrap: break-word;
    max-width: 200px;
}

.mud-scroll-to-top.visible {
    bottom: 40px !important;
    right: 40px !important;
    opacity: 1;
    transition: transform .5s;

}
.mud-overlay.mud-overlay-absolute {
    background-color: var(--light-overlay) !important;
}

.group-items-wrapper .mud-drop-item {
    display: flex !important;
}
.group-items-wrapper {
    display: flex !important;
    border-radius: 6px;
    border: 2px dashed var(--primary-lighten-2) !important;
    padding: 16px 14px;
    flex-wrap: wrap !important;
}