:root {
    --color-fg: #0a0d1c;
    --color-fg-light: #3274d9;
    --color-main: var(--color-fg);
    --color-main-light: #303030;
    --color-fg2: #3b3d49;
    --color-bg: #e4e4e4;
    --color-bg2: #cfd0d1;
    --color-bg3: #b7b7b9;
    --color-hublink: #f4f5f5;
    --color-accent: #9eff00;
    --color-grey-background: #dcdddd;
    --color-grey: #727282;
    --color-grey2: var(--color-greyed-out);
    --color-due: #ebc012;
    --color-notdue: #00823B;
    --color-overdue: #BD1515;
    --color-completed: #b2b9c4;
    --color-approve: var(--color-fg-light);
    --color-red: #D14848;
    --color-green: #38A138;
    --color-blue: #1169c6;
    --color-breadcrumb: var(--color-fg);
    --color-taskbar-blue: #009eff;
    --value-taskbar-height: 12vh;
}

#layout {
    height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
}

#breadcrumb {
    padding: var(--value-gap-tiny) 0 var(--value-gap-tiny) var(--value-gap-normal);
    box-sizing: border-box;
}

#body {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: auto;
    font-family: "Albert Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

    #body:has(.measurement-assets),
    #body:has(.maintenance-assets),
    #body:has(.organisation),
    #body:has(#assets-wrapper),
    #body:has(#mnm) {
        overflow: visible;
    }

    #body:not(:has(#landing, #contact)) {
        padding: 0 var(--value-gap-normal) var(--value-gap-normal) var(--value-gap-normal);
    }

.authorizing {
    width: 100dvw;
    height: 100dvh;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--color-bg-less);
}

.has-task-table td:nth-of-type(1),
.has-task-table th:nth-of-type(1),
.has-report-table td:nth-of-type(1),
.has-report-table th:nth-of-type(1),
.has-report-table td:last-of-type,
.has-report-table th:last-of-type {
    flex: .5;
}

.has-report-table td:nth-of-type(2),
.has-report-table th:nth-of-type(2) {
    flex: .75;
}

.has-task-table td:nth-of-type(3), .has-task-table th:nth-of-type(3) {
    flex: 1.5;
}

.has-task-table td:nth-of-type(4),
.has-task-table th:nth-of-type(4),
.has-report-table td:nth-of-type(4),
.has-report-table th:nth-of-type(4) {
    flex: 1.5;
}

tbody tr {
    cursor: pointer;
}

td svg {
    width: 1.1vw;
}

td:not(:has(svg)) {
    height: fit-content;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

h1:focus {
    outline: none;
}

tbody tr {
    padding: var(--value-gap-tiny) 0 var(--value-gap-tiny) 0 !important;
}

    tbody tr:first-of-type {
        padding-top: var(--value-gap-tiny) !important;
    }

thead th {
    padding: var(--value-gap-tiny) 0;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: var(--value-gap-normal);
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#dotnet-compile-error {
    display: none;
}

.select-class {
    height: 4vh;
    padding: var(--value-gap-tiny);
}

input, select, textarea {
    padding-left: var(--value-gap-tiny);
    background-color: var(--color-bg-less);
}

.picker > button {
    background-color: var(--color-bg-less) !important;
    border: .1vw solid var(--color-grey3);
    border-radius: var(--value-border-radius);
    color: var(--color-fg);
}

.picker > button:hover, .file-input > label {
    background-color: var(--color-bg-less) !important;
    filter: brightness(100%) !important;
}

.file-input > label {
    border: .1vw solid var(--color-grey3);
}

.favorite {
    fill: var(--color-yellow);
    stroke: var(--color-yellow);
}

.no-items {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
}

.red {
    fill: var(--color-red) !important;
    background-color: inherit;
}

.red > svg {
    fill: var(--color-red) !important;
}

.green {
    fill: var(--color-green) !important;
    background-color: inherit;
}

.green > svg {
    fill: var(--color-green) !important;
}

.blue {
    fill: var(--color-blue) !important;
    background-color: inherit;
}

.blue > svg {
    fill: var(--color-blue) !important;
}

.form-button {
    height: 5vh;
    width: 10vw;
    border-radius: var(--value-border-radius);
    font-weight: bolder;
    background-color: var(--color-main);
    border: 0;
    cursor: pointer;
    overflow: hidden;
    color: white;
    transition: color .15s;
    transition: background-color .15s;
}

svg {
    overflow: visible;
}

.greyed-out {
    background-color: var(--color-grey3);
    color: var(--color-main-light);
}