/* --- Global ------------------------------------------------------------- */
/*#region Global*/
:root {
    /*Colors*/
    --primary: #fff;
    --primary-muted: #e6e6e6;
    --primary-hover: #76b430;
    --on-primary: #141945;
    --secondary: #86C440;
    --on-secondary: #fff;
    --secondary-muted: #b7d98f;
    --on-secondary-muted: #141945;
    --danger: #ed1f79;
    --on-danger: #fff;
    --warning: #F07026;
    --on-warning: #fff;
    --light-gray: #cccccb;
    --gray: #b3b4b4;
    --on-gray: #141945;
    --dark-gray: #7F7F7F;
    --on-dark-gray: #ffffff;
    --link-primary: #323690;
    --on-link-primary: #fff;
    --linke-primary-hover: #121670;
    --table-border: #000000;
    /*Page content*/
    --page-content-padding: 3rem;
    /*Tab size*/
    --middle-tab-width-multiplayer: 1.5;
    /*Fill page layout*/
    --fill-page-min-section-width: 210px;
}

/* Fonts - generated by https://gwfh.mranftl.com/fonts/nunito */
/* nunito-regular - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.eot'); /* IE9 Compat Modes */
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}
/* nunito-italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.eot'); /* IE9 Compat Modes */
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.svg#Nunito') format('svg'); /* Legacy iOS */
}
/* nunito-700 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.eot'); /* IE9 Compat Modes */
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.svg#Nunito') format('svg'); /* Legacy iOS */
}
/* nunito-700italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 700;
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.eot'); /* IE9 Compat Modes */
    src: url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('./fonts/nunito-v25-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.svg#Nunito') format('svg'); /* Legacy iOS */
}

html, body {
    color: var(--on-primary);
    background-color: var(--primary);
    font-family: "Nunito", Arial, Sans-Serif;
    font-size: 13px;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: fit-content;
}


p, h2, ul {
    margin-top: 0px;
}

h1 {
    font-size: 2.364rem;
}

h2 {
    font-size: 1.818rem;
}

/*inputs*/
.check-box {
    width: 18px;
}

    .check-box + .editor-label {
        padding-left: 0.5em;
    }

.check-box-centered {
    margin-left: auto;
    margin-right: auto;
}

input[type="checkbox"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--secondary);
    border-radius: 3px;
    width: 13px;
    height: 13px;
    vertical-align: text-bottom;
}

    input[type="checkbox"]::after {
        content: "";
        display: none;
        width: 3px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(35deg);
        margin-left: 3px;
    }

    input[type="checkbox"]:checked {
        background-color: var(--secondary);
    }

        input[type="checkbox"]:checked::after {
            display: block;
        }

input[type=text], input[type=password], select, textarea {
    font-family: "Nunito", Arial, Sans-Serif;
    background: var(--primary);
    border-color: var(--light-gray);
    border-style: solid;
    border-width: 1px;
    padding-left: 7px;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.923rem;
}

input[type=text], input[type=password], select {
    height: 20px;
}

    /* http://csscreator.com/node/28948 */
    input[readonly], textarea[readonly], select[disabled] {
        background-color: var(--light-gray);
        color: var(--on-gray);
    }

/*
input[type=text], input[type=password]
{
    width: 95%;
}
*/

/*containers*/
.body-container {
    padding: 0;
    margin: 0;
    min-height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .body-container .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
    }

.text-container {
    padding: 7px 10px;
}

.bg-container {
    margin-left: 45px;
    margin-right: 35px;
}

.editor-container, .editor-container-silent {
    width: 100%;
    padding: 0.5em 0;
}

.editor-container-silent {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
}

.editor-label {
    font-weight: bold;
}

.editor-field {
    padding-top: 5px;
}

    .editor-field input, .editor-field select, .editor-container textarea {
        font-weight: bold;
    }

.page-content {
    flex: 1;
    padding: var(--page-content-padding);
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

    .page-content h1, .page-content h2 {
        text-align: center;
    }

/* (inset: 0) is used as a substitute for (gap: 0) which lacks support, for more info see https://github.com/w3c/csswg-drafts/issues/3559  */
@supports not (inset: 0) {
    .page-content > * + * {
        margin-top: 3rem;
    }
}

.tab-content {
    border: 1px solid var(--secondary);
}

.content-row {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}

    .content-row > div {
        flex: 1;
    }

@supports not (inset: 0) {
    .content-row > * + * {
        margin-left: 1rem;
    }
}

.content-column {
    display: flex;
    flex-flow: column wrap;
    gap: 1rem;
}

    .content-column > * {
        flex: 1;
    }

@supports not (inset: 0) {
    .content-column > * + * {
        margin-top: 1rem;
    }
}

.text-container {
    min-width: 320px;
    padding: 2rem;
    border-radius: 20px;
    box-sizing: border-box;
}

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

    .text-container .p {
        font-size: 1.231rem;
        margin-bottom: 1rem;
    }

.video-container {
    min-width: 320px;
    min-height: 180px;
    aspect-ratio: 16/9;
}

    .video-container iframe {
        width: 100%;
        height: 100%;
        background: var(--gray);
        border-radius: 20px;
    }

.image-wrapper {
    text-align: center;
}

.badge {
    display: inline-block;
    border-radius: 25px;
    padding: 0.2em 0.495em;
    text-align: center;
    vertical-align: baseline;
    font-weight: normal;
}

* + .badge {
    margin-left: 0.4em;
}

.badge + * {
    margin-left: 0.7em;
}

.color-dot {
    display: inline-block;
    border-radius: 25px;
    min-width: 0.51em;
    min-height: 0.51em;
    vertical-align: baseline;
    margin-right: 0.1em;
}

.image-and-description {
    display: block;
    font-weight: bold;
    width: fit-content;
    height: fit-content;
    text-align: center;
}

    .image-and-description img {
        display: block;
        margin: 0 auto 0.5rem auto;
    }

.banner {
    padding: 2.5rem 2rem 2rem 2rem;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.182rem;
}

.center-form {
    margin: auto 0;
    align-self: center;
    display: flex;
    flex-flow: column nowrap;
}

.context-text {
    font-weight: normal;
    font-style: italic;
}
/* Source: http://www.teddillard.com/2010/02/dumb-stuff-waiting-gifs.html
 * http://www.teddillard.com/graphics/timergifs/bluespinner.gif
 */
.waiting-blue {
    background-image: url(waiting_blue.gif);
    background-repeat: no-repeat;
    height: 48px;
    width: 48px;
}

/* --- Hide apperaring cross in input fields IE10 when not empty ------- */
::-ms-clear {
    display: none;
}

.tooltip {
    position: relative;
}

    .tooltip .tooltip-text {
        visibility: hidden;
        width: 210px;
        background-color: var(--primary-muted);
        color: black;
        text-align: left;
        border-radius: 6px;
        border: 1px solid var(--light-gray);
        /* Position the tooltip */
        position: absolute;
        z-index: 2;
        top: calc(100% + 1rem);
        left: 0;
        font-size: 1rem;
        padding: 10px;
    }

    .tooltip:hover .tooltip-text {
        visibility: visible;
    }


.tooltip-2 {
    position: relative;
}

    .tooltip-2 .tooltip-text {
        visibility: hidden;
        width: 600px;
        background-color: var(--primary-muted);
        color: black;
        text-align: left;
        border-radius: 6px;
        border: 1px solid var(--light-gray);
        /* Position the tooltip */
        position: absolute;
        z-index: 2;
        top: calc(100% + 1rem);
        left: -250px;
        font-size: 1rem;
        padding: 10px;
    }

    .tooltip-2:hover .tooltip-text {
        visibility: visible;
    }
/*#endregion*/

/* --- Styles for validation helpers -------------------------------------- */
/*#region Styles for validation helpers*/
.field-validation-error {
    color: var(--danger);
    width: 100%;
    display: block;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid var(--danger);
    background-color: var(--primary-muted);
}

.validation-summary-errors {
    font-weight: bold;
    color: var(--danger);
}

.validation-summary-valid, .Hidden {
    display: none;
}
/*#endregion*/

/* --- Buttons ------------------------------------------------------------ */
/*#region Buttons*/
/*button tag*/
button {
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: 0;
}


    button[type=submit], input[type=submit] {
        padding-top: 0px;
        margin-left: 0px;
    }

        /*Fix FF level with other buttons.
        This is needeed because Firefox (User Agent) own CSS style uses !important and anything one tries to do to override the CSS property won't get applied*/
        button[type=submit]::-moz-focus-inner {
            border: 0;
            padding: 0
        }

/*Button container area*/
.button-container-area {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    flex-flow: column wrap;
    font-weight: bold;
}

    .button-container-area.row {
        flex-flow: row wrap;
    }

    .button-container-area .button-container-area, .button-container-area button, .button-container-area .button-container {
        margin: 0;
    }

@supports not (inset: 0) {
    .button-container-area > * + * {
        margin-top: 0.5em;
    }
}

/*Button container*/
.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    padding: 0.2em 0.5em 0.2em 0.5em;
    box-sizing: border-box;
    font-weight: bold;
}

@supports not (inset: 0) {
    .button-container > * + * {
        margin-left: 0.3em;
    }
}

.rounded .button-container {
    padding: 0.5em 1.8em;
    border-radius: 25px;
}

.button-container .text-cell {
    margin: 0.25em 0;
}

.button-container .text-cell, .button-container .icon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1em;
}

    .button-container .icon-cell .icon-container {
        background-image: url(icons.png);
        background-repeat: no-repeat;
        height: 20px;
        width: 20px;
    }

.button-container .badge {
    font-size: 0.80em;
}

/*Button Container Area big*/
.button-container-area-big {
    height: 60px;
    margin-top: 7px;
}

/*Link buttons*/
.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .link-button a {
        text-decoration: none;
    }

    .link-button .button-container {
        background: var(--link-primary);
        color: var(--on-link-primary);
        text-decoration: none;
    }

        .link-button .button-container:hover {
            background-color: var(--linke-primary-hover);
        }

a.secondary-button, a.gray-button, div.secondary-button, div.gray-button {
    text-decoration: none;
    display: inline-block;
}

/*Primary*/
.primary-button .button-container {
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--light-gray);
}

    .primary-button .button-container:hover {
        background: var(--primary-muted);
    }

/*Secondary*/
.secondary-button .button-container {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

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

.secondary-button-big .button-container {
    background-color: var(--secondary);
    color: var(--on-secondary)
}

    .secondary-button-big .button-container:hover {
        background-color: var(--primary-hover);
    }

/*Gray*/
.gray-button .button-container, .gray-button-big .button-container {
    background-color: var(--gray);
    color: var(--on-gray);
}

.gray-button.dark .button-container, .gray-button-big.dark .button-container {
    background-color: var(--dark-gray);
    color: var(--on-dark-gray);
}

.gray-button .button-container:hover, .gray-button-big .button-container:hover {
    background-color: var(--gray);
}

/*Big buttons*/
.secondary-button-big, .secondary-button-big .button-container, .gray-button-big, .gray-button-big .button-container {
    font-weight: bold;
}

/* Button Icons */
.button-icon-submit {
    background-position: -29px -757px;
}

.button-icon-cancel {
    background-position: 0px -757px;
}

.button-icon-save {
    background-position: 0px -735px;
}

.button-icon-save-big {
    background-position: 0px -735px;
}

.button-icon-download {
    background-image: url(download_icon.png) !important;
    background-position: center;
    background-size: 15px;
    margin-right: 10px;
    width: 20px !important;
    height: 20px !important;
    box-sizing: border-box;
}

.button-icon-switch {
    background-position: -26px -737px;
}

.button-icon-delete {
    background-position: -26px -777px;
}

.button-icon-add {
    background-position: -26px -695px;
}

.button-icon-pencil {
    background-position: -26px -657px;
}

.button-icon-undo {
    background-position: -26px -716px;
}

.button-container .icon-container {
    background-image: url(icons.png);
}

.button-container .icon-cell .cancel-icon {
    background-position: 0px -756px;
}

.button-container .icon-cell .login-icon {
    background-position: -26px -756px;
}

.button-container .icon-cell .save-icon {
    background-position: 0px -735px;
}

.button-container .icon-cell .icon-arrow-right {
    background-image: url(images/arrow-right.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: invert();
    height: 18px;
}

.quest-icon {
    background-image: url(quest_ico.png);
    background-repeat: no-repeat;
    padding: 5px 10px;
}
/*#endregion*/

/* --- Top header --------------------------------------------------------- */
/*#region Top header*/

#top-header {
    width: 100%;
    height: 40px;
    color: var(--dark-gray);
    background-color: var(--light-gray);
    box-sizing: border-box;
    padding: 0 30px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 1.227rem;
}

@supports not (inset: 0) {
    #top-header > * + * {
        margin-left: 20px;
    }
}

#top-header-font-size {
    float: right;
    padding-right: 10px;
}

#top-header-home {
    margin-right: auto;
}

#logon-title {
    text-align: center;
    font-size: 2.308rem;
}

/*Icons*/
#top-header-home-icon {
    background: url(images/home-icon.png) no-repeat;
    background-size: contain;
    height: 16px;
    width: 16px;
}

#log-out-icon {
    background: url(images/logout-icon.png) no-repeat center;
    background-size: contain;
    width: 16px;
    height: 16px;
}

/*Logout button*/
#log-out-button a {
    text-decoration: none;
    color: var(--on-gray);
    float: left;
}

.log-out-picker-selected-option-list {
    width: 77px;
}

#log-out-picker-selected-option-text {
    height: 100%;
}

/*Dropdowns*/
.language-picker-language, .log-out-picker-change-work-place, .top-header-dropdown-item {
    background-color: var(--on-primary);
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    color: var(--primary-muted);
    /*height: 17px;*/
    padding: 2px 5px 7px 5px;
}

.language-picker-language-list, .top-header-dropdown-list {
    position: absolute;
    top: 40px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    height: fit-content;
    white-space: nowrap;
}

.language-picker-language:hover, .log-out-picker-change-work-place:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    color: var(--primary);
    background-repeat: repeat;
}

.log-out-picker-change-work-place {
    height: 34px;
    width: 88px;
    text-align: center;
}

#language-picker-selected-language {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    color: var(--dark-gray);
    font-weight: bold;
}

#language-picker {
    height: 100%;
    text-align: left;
}
/*Change font size*/
.change-font-size-1, .change-font-size-2, .change-font-size-3 {
    padding-left: 4px;
    color: var(--primary);
}

.change-font-size-1 {
    font-size: 0.769rem;
}

.change-font-size-2 {
    font-size: 0.846rem;
}

.change-font-size-3 {
    font-size: 1rem;
}
/*#endregion*/

/* --- Page header ---------------------------------------------------------*/
/*#region Header*/
.page-header {
    width: 100%;
    box-sizing: border-box;
    font-weight: bold;
    padding: 1rem;
    text-align: left;
}

    .page-header img {
        height: 80px;
        align-self: start;
    }

#top-header-2-title {
    margin: 0;
}

    #top-header-2-title .center {
        width: 100%;
        text-align: center;
        display: block;
    }
/*#endregion*/

/* --- Main footer -------------------------------------------------------- */
/*#region Main footer*/
#main-footer {
    width: 100%;
    background: white;
    margin-top: 0.7rem;
}

    #main-footer .row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 1rem 1rem 1rem;
        box-sizing: border-box;
    }

    #main-footer #main-footer-text-container {
        background-color: var(--secondary);
        color: var(--on-secondary);
        bottom: 0;
        height: 20px;
        float: left;
        width: 100%;
    }

    #main-footer #main-footer-text {
        padding-left: 11px;
        padding-top: 3px;
        margin-left: 40px;
    }

@supports not (inset: 0) {
    #main-footer .row > * + * {
        margin-left: 0.5rem;
    }
}

/*Footer images*/
#footer-logo-knowlo {
    width: 170px;
    height: 60px;
    background: url(Logo_KNOWLO_R_horizontal_Large.png) no-repeat center;
    background-size: contain;
}

#footer-logo-erasmus {
    width: 250px;
    height: 60px;
    background: url("images/EN Co-Funded Logo.png") no-repeat center;
    background-size: contain;
}
/*#endregion*/

/* --- Captcha ------------------------------------------------------------ */
/*#region Captcha*/
.captcha-area img {
    padding: 5px;
    display: block;
    margin: 0 auto;
}
/*#endregion*/

/* --- Tabbing ------------------------------------------------------------ */
/*#region Tabbing*/
.tabbing {
    width: 100%;
    border-bottom: 1px solid var(--secondary);
    height: 21px;
}

.expanded-tabbing {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--secondary);
    height: 27px;
    gap: 3px;
}

    .tabbing .button, .expanded-tabbing .button {
        padding: 5px 10px;
        margin-bottom: 2px;
        text-decoration: none;
        color: var(--on-secondary);
        background-color: var(--secondary-muted);
        cursor: pointer;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .tabbing .first, .expanded-tabbing .first {
        margin-left: 7px;
    }

    .tabbing .selected, .expanded-tabbing .selected {
        background-color: var(--secondary);
        z-index: 10000;
        margin-bottom: 0;
    }

@supports not (inset: 0) {
    .expanded-tabbing > * + * {
        margin-left: 3px;
    }
}
/*#endregion*/

/* --- Statistic scoring -------------------------------------------------- */
/*#region Statistic scoring*/

.statistics {
    display: table;
    width: 100%;
    height: 11px;
}

    .statistics .left, .statistics .right {
        display: table-cell;
        height: 11px;
        background: var(--gray);
        width: 8px;
    }

    .statistics .left {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    .statistics .right {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .statistics .bg {
        display: flex;
        flex-flow: row nowrap;
        height: 11px;
        background: var(--gray);
    }

    .statistics .selected {
        display: table-cell;
        height: 11px;
        background-color: var(--secondary);
    }

    .statistics .right.selected, .statistics .left.selected {
        background-color: var(--secondary);
    }

    .statistics .right-selected {
        display: table-cell;
        width: 8px;
        height: 11px;
        background-color: var(--secondary);
        border-radius: 0 40px 40px 0;
    }
/*#endregion*/

/* --- DatePicker --------------------------------------------------------- */
/*#region Date Picker*/

/* Position date picker icon inside text box on right side */
.ui-datepicker-trigger {
    position: relative;
    float: right;
    top: -19px;
    left: -4px;
}
/*#endregion*/

/* --- Dialogs ------------------------------------------------------------ */
/*#region Dialogs*/

/*Overlay*/
div.ui-widget-overlay {
    background: var(--primary);
    opacity: 0.85;
}

/*Title*/
.ui-dialog div.ui-dialog-titlebar {
    background: transparent;
    border: none;
    text-align: center;
    color: var(--primary);
    position: unset;
    overflow: hidden;
    max-height: 100%;
    box-sizing: border-box;
}

.ui-dialog-title {
    width: 100%;
    text-align: center;
    font-size: 2.462rem;
    font-weight: normal;
}

/*Close button*/
.ui-dialog .ui-dialog-titlebar-close.ui-corner-all {
    border: none;
    border-radius: 50%;
    background-color: var(--danger);
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5px;
    right: -10px;
    z-index: 1001;
}

.ui-dialog-titlebar-close.ui-corner-all .ui-icon {
    background-image: url(images/close.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: invert();
}

/* Content*/
.ui-dialog.ui-widget.ui-widget-content {
    background: var(--secondary-muted);
    color: var(--on-secondary-muted);
    border: none;
    border-radius: 13px;
    overflow: visible;
}

.ui-dialog-content.ui-widget-content > div, .ui-dialog-content.ui-widget-content > p {
    text-align: center;
    margin-bottom: .875rem;
}

.ui-dialog .ui-dialog-content.ui-widget-content {
    padding: 0 2rem;
}

.ui-dialog-content .question-text {
    font-weight: bold;
}

/* Tables*/
.ui-dialog table {
    width: 100%;
    border-spacing: 0;
    margin: 15px 0;
    padding: 0 1.5rem;
}

    .ui-dialog table td div {
        display: flex;
    }

    .ui-dialog table textarea {
        box-sizing: border-box;
        border: none;
        margin: 0.125rem;
    }

        .ui-dialog table textarea::placeholder {
            text-align: center;
            color: var(--secondary-muted);
        }

        .ui-dialog table textarea:focus-visible {
            border: 0.125rem solid var(--secondary);
            margin: 0;
            outline: none;
        }

/* Buttons*/
.popup-button-container-area {
    margin-top: 7px;
    margin: 1.5rem auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

@supports not (inset: 0) {
    .popup-button-container-area > * + * {
        margin-left: 0.5em;
    }
}

.ui-dialog .button-container {
    border-radius: 8px;
    font-weight: bold;
    padding: 0 1em;
    min-width: 6rem;
}

.ui-dialog .secondary-button .button-container {
    border: 1px solid var(--on-secondary);
}

/*Text*/
.popup-text-area {
    text-align: center;
}
/*#endregion*/

/* --- BreadCrump --------------------------------------------------------- */
/*#region BreadCrump*/

.bread-crump {
    width: 100%;
    height: 5.8rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    display: flex;
    gap: 4px;
}

    .bread-crump .node {
        flex: 1 0 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: start;
        align-items: center;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        cursor: pointer;
        margin-bottom: 3px;
        font-size: 1.818rem;
        position: relative;
    }

        /*Assumes that tab count = 3*/
        .bread-crump .node:first-child + .node {
            flex: var(--middle-tab-width-multiplayer) 0 0;
        }

    .bread-crump .node-enabled {
        background-color: var(--light-gray);
        color: var(--on-secondary);
    }

    .bread-crump .node-selected {
        background-color: var(--secondary);
        color: var(--on-secondary);
        margin-bottom: 0;
    }

    .bread-crump .node-disabled {
        background-color: var(--light-gray);
        color: var(--on-secondary);
    }

    .bread-crump .menu-label {
        margin: 0 auto;
        background: none;
        text-align: center;
    }

    .bread-crump .sequence-number {
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        font-size: 5.864rem;
        color: var(--primary);
        opacity: 0.348;
        margin: 0 auto;
        width: fit-content;
    }

@supports not (inset: 0) {
    .bread-crump > * + * {
        margin-left: 4px;
    }
}
/*#endregion*/

/* --- Tables ------------------------------------------------------------- */
/*#region Tables*/
.table-wrapper {
    display: flex;
    flex-flow: column wrap;
    max-width: fit-content;
    align-self: center;
    gap: 3rem;
}

@supports not (inset: 0) {
    .table-wrapper > * + * {
        margin-top: 3rem;
    }
}

.table-header {
    font-weight: bold;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.table-title {
    font-size: 1.909em;
    margin-bottom: 1.5rem;
}

td ul {
    padding-left: 20px;
}

table input[type=text] {
    width: 98%;
}

/* .data-table */
    .data-table {
    width: 100%;
    margin-top: 5px;
    border-spacing: 0;
}

    /* A 'hack' to distance theader from tbody */
    .data-table tbody:before {
        content: "@";
        display: block;
        line-height: 5px;
        visibility: hidden;
    }

    .data-table tr {
        height: 2.3em;
        text-align: left;
        vertical-align: middle;
    }

    .data-table th {
        font-size: 1.227rem;
        color: var(--on-secondary);
        background-color: var(--secondary);
        border: 1px var(--secondary);
        padding: 1em;
    }

    .data-table td {
        border: 1px var(--table-border);
        font-size: 0.909rem;
    }

        .data-table th + th, .data-table td + td {
            padding-left: 2rem;
        }

    /* - Rounded headings*/
    .data-table.rounded-heading th {
        padding-top: 0;
        padding-bottom: 0;
    }

    .data-table.seperated.rounded-heading th:first-child {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    .data-table.seperated.rounded-heading th:last-child {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    /* - Gray table*/
    .data-table.gray-table th {
        background-color: var(--light-gray);
        border-color: var(--light-gray);
        font-weight: normal;
    }

    .data-table.gray-table td {
        border-color: var(--light-gray);
    }

    /* - Outlined (by default) */
    .data-table td:first-child {
        border-left-style: solid;
        padding-left: 1.5rem;
    }

    .data-table td:last-child {
        border-right-style: solid;
        padding-right: 1.5rem;
    }

    .data-table tr:first-child td {
        border-top-style: solid;
    }

    .data-table tr:last-child td {
        border-bottom-style: solid;
    }

    /* - Outlined - Corner rounding */
    .data-table tr:first-child td:first-child {
        border-top-left-radius: 25px;
    }

    .data-table tr:first-child td:last-child {
        border-top-right-radius: 25px;
    }

    .data-table tr:last-child td:first-child {
        border-bottom-left-radius: 25px;
    }

    .data-table tr:last-child td:last-child {
        border-bottom-right-radius: 25px;
    }

    /* - Seperated */
    .data-table.seperated {
        border-collapse: separate;
        border-spacing: 0 5px;
    }

        /* Override hack for thead distancing from tbody, because distance is made via border-spacing */
        .data-table.seperated tbody:before {
            content: none;
        }

        .data-table.seperated th, .data-table.seperated td {
            border-style: solid none;
        }

            .data-table.seperated td:first-child {
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
            }

            .data-table.seperated td:last-child {
                border-top-right-radius: 25px;
                border-bottom-right-radius: 25px;
            }

            .data-table.seperated th:first-child, .data-table.seperated td:first-child {
                padding-left: 1.5rem;
                border-left-style: solid;
            }

            .data-table.seperated th:last-child, .data-table.seperated td:last-child {
                border-right-style: solid;
                padding-right: 1.5rem;
            }

    /* - Cell seperated */
    .data-table tr.cell-seperated td {
        border: none;
        vertical-align: top;
    }

        .data-table tr.cell-seperated td > * {
            border: 1px solid var(--table-border);
            border-radius: 25px;
            padding: 0.25em 1em;
            margin: 0 0 0.5rem 0;
        }

        .data-table tr.cell-seperated td:first-child {
            padding-left: 0;
        }

        .data-table tr.cell-seperated td:last-child {
            padding-right: 0;
        }

    .data-table tr.cell-seperated div {
        display: flex;
        justify-content: space-between;
        gap: 1em;
    }

    .data-table tr.cell-seperated span + span {
        margin-left: auto;
    }

    /* - Hover styles*/
    .data-table tr.mouse-out, table.data-table tr.mouse-over {
        cursor: pointer;
    }

    .data-table tr.mouse-over td {
        background-color: var(--light-gray) !important;
    }

    .data-table tr.mouse-over-blue {
        background-color: #d4dde9 !important;
    }

    /* - Buttons*/
    .data-table .button-row .button-container {
        margin: 0;
        font-size: 1.147rem;
    }

    .data-table .secondary-button, .data-table .gray-button {
        display: table-cell;
    }

    .data-table .download-button .button-container {
        background-color: var(--on-secondary);
        color: var(--secondary);
    }

    .data-table .download-button .icon-container {
        background-color: var(--secondary);
        border-radius: 50%;
        padding: 2px;
    }

    /* - Seperated table buttons*/
    .data-table.seperated .button-row td {
        height: 2rem;
        padding: 0;
        border: none;
    }

        .data-table.seperated .button-row td > * {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

    .data-table.seperated .button-row .button-container {
        border-radius: 25px;
        height: 100%;
    }

    /* - Editor field*/
    .data-table .editor-field {
        margin-bottom: 5px;
    }

@supports not (inset: 0) {
    .data-table tr.cell-seperated div > * + * {
        margin-left: 1em;
    }
}


.grid-table {
    width: 100%;
    margin-top: 5px;
    border-spacing: 0;
}

    /* A 'hack' to distance theader from tbody */
    .grid-table tbody:before {
        content: "@";
        display: block;
        line-height: 5px;
        visibility: hidden;
    }

    .grid-table tr {
        height: 2.3em;
        text-align: left;
        vertical-align: middle;
    }

    .grid-table th {
        font-size: 1.227rem;
        color: var(--on-secondary);
        background-color: var(--secondary);
        border: 1px var(--secondary);
        padding: 1em;
    }

    .grid-table td {
        border: 1px var(--table-border);
        font-size: 0.909rem;
    }



/*#endregion*/

/*Page styles*/

/* --- Login Page --------------------------------------------------------- */
/*#region Home Index*/
.login-page {
    align-items: center;
}

    .login-page .content-row {
        align-items: center;
        justify-content: center;
        width: 100%;
    }

        .login-page .content-row > * {
            flex: 1 1 0;
            max-width: 600px;
        }
/*#endregion*/

/* --- Home ForgotPassword ------------------------------------------------ */
/*#region Home ForgotPassword*/

#email-has-been-sent {
    font-weight: bold;
}

#forget-psw-container {
    margin-top: 1em;
}
/*#endregion*/

/* --- Assessment Details ------------------------------------------------- */
/*#region Assessment Details*/
#filling-overal-report-area, #filling-individual-report-area, #consolidation-overal-report-area {
    width: 100%;
    padding-top: 10px;
}

#question-section-area {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
/*#endregion*/

/* --- Assessment Question Edit ------------------------------------------- */
/*#region Assessment Question Edit*/
#assign-questions-form {
    padding-top: 7px;
}

a.auto-check {
    cursor: pointer;
}
/*#endregion*/

/* --- Assessor List ------------------------------------------------------ */
/*#region Assessor List*/
.clickable-assessor {
    cursor: pointer;
}

.change-leader-column {
    width: 225px;
}

.actions-with-assessors-column {
    width: 20px;
}
/*#endregion*/

/* --- Assessment Fill and Edit page -------------------------------------- */
/*#region Assessment Fill and Edit page*/

.assessment-page {
    display: flex;
    flex-flow: row nowrap;
}

    .assessment-page > * {
        /*Assumes that tab count = 3 and first and last tab flex-grow = 1*/
        min-width: var(--fill-page-min-section-width);
        width: calc((100% + var(--page-content-padding) * 2) / (2 + var(--middle-tab-width-multiplayer)) - var(--page-content-padding));
    }

/*Criteria table*/
.criteria-select-table {
    border-collapse: separate;
    border-spacing: 0px;
    height: fit-content;
    padding: 0 0.5rem 0 0;
}

    .criteria-select-table .tooltip .tooltip-text {
        width: 300px;
        top: -5px;
        left: 110%;
    }

    .criteria-select-table tr + tr td {
        border-top: 5px solid white;
    }

    .criteria-select-table td {
        height: 85px;
        width: 100%;
        padding: 0 1em;
        box-sizing: border-box;
        text-align: left;
        font-size: 1.227rem;
        font-weight: bold;
        cursor: pointer;
        background-color: var(--secondary);
        color: var(--on-secondary);
        opacity: 0.5;
    }

    .criteria-select-table .mouse-over td {
        opacity: 1;
    }

    .criteria-select-table td > div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 15px;
    }

    .criteria-select-table .assessment-criteria-selected {
        background-color: var(--secondary);
        opacity: 1;
    }

        .criteria-select-table .assessment-criteria-selected + td {
            opacity: 1;
            padding: 0;
            background: none;
            width: fit-content;
        }

    .criteria-select-table .sequence {
        align-self: start;
        color: var(--secondary);
        background-color: var(--on-secondary);
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        padding: 0.3em 0.6em;
    }

        .criteria-select-table .sequence + div {
            padding: 0.8em 0;
            font-weight: normal;
        }

    .criteria-select-table .assessment-criteria-selected + td .arrow-right {
        border-color: var(--secondary);
        border-top-width: 40px;
        border-bottom-width: 40px;
        border-left-width: 12px;
        width: 0;
        height: 0;
    }

@supports not (insert: 0) {
    .criteria-select-table td > div > * + * {
        margin-left: 15px;
    }
}

/*Questions list*/
.question-list {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    padding: 0 0.5rem;
    /*Assumes that tab count = 3 and first and last tab flex-grow = 1*/
    width: calc((100% + var(--page-content-padding) * 2) / (2 + var(--middle-tab-width-multiplayer)) * var(--middle-tab-width-multiplayer));
    min-width: calc(var(--fill-page-min-section-width) * var(--middle-tab-width-multiplayer) + var(--page-content-padding) * 2);
}

    .question-list .button-container-area {
        justify-content: start;
    }

    .question-list #btn-delete-criteria {
        margin-right: auto;
    }

@supports not (inset: 0) {
    .question-list > * + * {
        margin-top: 1rem;
    }
}

.question {
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    opacity: 0.5;
}

    .question:hover {
        opacity: 1;
    }

    .question hr {
        width: 100%;
    }

.question-content {
    padding: 0.8rem 1rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: start;
    gap: 1em;
}

@supports not (inset: 0) {
    .question-content > * + * {
        margin-top: 1em;
    }
}

.question-selected .question-content {
    border: 1px solid var(--danger);
    border-radius: 20px;
}

.question-answered {
    color: var(--dark-gray);
}

.question-deleted {
    text-decoration: line-through;
}

.question-selected {
    opacity: 1;
}

#context-field-text {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

#context-field-header {
    width: 100%;
    height: 17px;
    padding-top: 6px;
    padding-left: 6px;
    text-align: left;
    font-size: 1.231rem;
}

#context-field-text {
    padding: 6px;
}

#evidences-form #btn-save-evidences {
    float: right;
}

/* Assessment scoring form*/
.question-form {
    padding: 0 0 0 0.5rem;
}

    .question-form .button-container-area {
        margin: 1.5rem 0;
    }

    .question-form .button-container {
        min-width: 15rem;
    }

    .question-form textarea {
        border-radius: 15px;
        padding: 7px;
    }

    .question-form .border-color-danger .button-container {
        border-radius: 5px;
    }

/* - Progress bar*/
.assessment-scoring-title {
    margin: 0 0 0.5em 0;
    font-weight: bold;
}

.assessment-statistics-title {
    font-weight: bold;
    font-size: 1.231rem;
}

.progress-bar-container {
    font-weight: bold;
    font-size: 1.231rem;
    float: right;
    width: 400px;
}

/* - slider input*/
.assessment-scoring, .urgency-scoring {
    width: 100%;
    border: none;
    border-spacing: 0;
}

    .assessment-scoring table, .urgency-scoring table {
        width: 100%;
        text-align: center;
        border: none;
        padding: 0;
        margin: 0;
        border-collapse: collapse;
        border-width: 0px;
    }

.assessment-scoring-row td {
    padding: 0;
}

/* - left & right slider buttons*/
.assessment-scoring-array, .urgency-scoring-array {
    width: 20px;
    padding: 0;
    vertical-align: top;
    position: relative;
}

    .assessment-scoring-array div, .urgency-scoring-array div {
        cursor: pointer;
        background-color: var(--secondary);
        height: 11px !important;
        position: absolute;
        width: 100%;
        bottom: 13px;
    }

.assessment-scoring-array-left, .urgency-scoring-array-left {
    border-radius: 40px 0px 0px 40px;
}

.assessment-scoring-array-right, .urgency-scoring-array-right {
    border-radius: 0 40px 40px 0;
}

/* - slider scale*/
.assessment-scoring .scoring-row, .urgency-scoring .scoring-row {
    height: 11px;
}

    .assessment-scoring .scoring-row td, .urgency-scoring .scoring-row td {
        position: relative;
        padding: 0 0 1rem 0;
    }

.scoring-scale {
    margin-top: 7px;
    height: 11px !important;
    width: 100%;
    background-color: var(--secondary);
}

.assessment-scoring td, .urgency-scoring td {
    height: 16px;
    padding: 0px;
}

/* - slider button*/
.slider-bound {
    margin: 0 2px 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
}

.assessment-scoring .scoring-button-container, .urgency-scoring .scoring-button-container {
    border: 0px;
    height: 18px;
    width: 0px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.assessment-scoring .scoring-button, .urgency-scoring .scoring-button {
    position: absolute;
    left: -11px;
    height: 10px;
    width: 10px;
    background-color: var(--secondary);
    border: 7px solid var(--on-primary);
    border-radius: 40px 40px 40px 40px;
    z-index: 1;
}

.scoring-button-movable {
    cursor: pointer;
}

/* - value label row*/
.scoring-label-value-row, .scoring-label-value-row td, .scoring-label-value-row td div {
    height: 16px;
}

.assessment-scoring .scoring-label-value-row td {
    text-align: center;
    width: 16.66%;
}

.urgency-scoring .scoring-label-value-row td, .assessment-scoring .scoring-label-value-row.q2e td {
    width: 20%;
}

.assessment-scoring .scoring-label-value-row td:first-child {
    width: 8.33%;
    text-align: left;
}

.urgency-scoring .scoring-label-value-row td:first-child, .assessment-scoring .scoring-label-value-row.q2e td:first-child {
    width: 10%;
    text-align: left;
}

.scoring-label-value-row td:first-child > * {
    margin-left: -0.077em;
}

.assessment-scoring .scoring-label-value-row td:last-child {
    width: 8.33%;
    text-align: right;
}

.urgency-scoring .scoring-label-value-row td:last-child, .assessment-scoring .scoring-label-value-row.q2e td:last-child {
    width: 10%;
    text-align: right;
}

.scoring-label-value-row td:last-child > * {
    margin-right: -0.6em;
}

.scoring-label-value-row.q2e td:last-child > * {
    margin-right: -0.077em;
}

.scoring-label-value-selected, .scoring-label-value-selected-constant {
    font-size: 1.154rem;
    font-weight: bold;
}

/* - line label row*/
.scoring-label-line-row {
    font-size: 0.769rem;
    height: 13px;
}

    .scoring-label-line-row td {
        height: 9px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-weight: bold;
        text-align: center;
    }

        .scoring-label-line-row td:first-child {
            text-align: left;
        }

        .scoring-label-line-row td:last-child {
            text-align: right;
        }

/* - selected value description*/
.assessment-scoring .description-of-value, .urgency-scoring .description-of-value {
    background-color: var(--secondary-muted);
    font-size: 0.864rem;
    font-weight: bold;
    padding: 10px;
    margin-left: 2px;
    border: 1px solid var(--secondary-muted);
    border-radius: 5px;
    text-align: center;
    min-height: 1.5em;
}

.description-of-value.Error {
    color: var(--danger);
    font-weight: bold;
}

.assessment-scoring .description-of-value-array, .urgency-scoring .description-of-value-array {
    padding: 0px;
    height: 6px;
}

.description-of-value-array .arrow-up {
    position: relative;
    left: 14px;
    bottom: -1px;
    border: 8px solid var(--secondary-muted);
}

.scoring-value-list {
    font-size: 0.85rem;
    margin: 1rem 0 1rem 0;
}

    .scoring-value-list p {
        font-size: 0.773rem;
        margin-bottom: 0;
    }
/*#endregion*/

/* --- Conslidation ------------------------------------------------------- */
/*#region Conslidation*/

.line-separator {
    border-bottom: 1px solid var(--secondary);
    height: 10px;
    width: 100%;
}
/*#endregion*/

/* --- Reports page ------------------------------------------------------- */
/*#region Reports page*/

/*Text*/
.reports-page .text-container {
    margin: 0 0 1rem 0;
}

    .reports-page .text-container * {
        margin: 0 0 1em 3em;
        font-weight: bold;
    }

        .reports-page .text-container *:first-child {
            font-size: 2rem;
            margin: 0 0 1em 0;
        }

.reports-page .content-row {
    justify-content: center;
}

/*Tables*/
.reports-page .data-table {
    min-width: 800px;
}

    .reports-page .data-table th + th {
        text-align: center;
        font-size: 1rem;
        font-weight: normal;
    }

    .reports-page .data-table tr td:last-child {
        text-align: right;
        vertical-align: bottom;
    }

    .reports-page .data-table.seperated tr td:last-child {
        text-align: right;
        vertical-align: middle;
    }

    .reports-page .data-table tr:first-child td {
        padding-top: 0.5rem;
    }

    .reports-page .data-table tr:last-child td {
        padding-bottom: 1rem;
    }

    .reports-page .data-table.p-4 tr:first-child td {
        padding-top: 1.6rem;
    }

    .reports-page .data-table.p-4 tr:last-child td {
        padding-bottom: 1.6rem;
    }

    .reports-page .data-table.seperated tr:first-child td {
        padding-top: 0;
    }

    .reports-page .data-table.seperated tr:last-child td {
        padding-bottom: 0;
    }

    .reports-page .data-table td {
        vertical-align: bottom;
    }

    .reports-page .data-table.seperated td {
        vertical-align: middle;
    }

    /*Table buttons*/
    .reports-page .data-table .download-button, .reports-page .data-table .link-button {
        margin: 0 auto;
        display: block;
        font-size: 0.909rem;
    }

/*Table columns*/
.reports-page col {
    width: 28%;
}

    .reports-page col:last-child {
        width: 16%;
    }
/*#endregion*/

/* --- Start page --------------------------------------------------------- */
/*#region Start page*/

.start-page .content-row {
    justify-content: center;
    font-weight: bold;
}

    .start-page .content-row div {
        max-width: 600px;
    }

/*Image & description elements*/
.start-page .image-crop {
    width: 140px;
    height: 85px;
    object-fit: cover;
}

.start-page .image-and-description {
    width: 200px;
    flex: 0 0 auto;
}

/*Banner*/
.start-page .banner {
    background: url(images/banner-bg.png) no-repeat right bottom;
    background-size: 165px 155px;
}

    .start-page .banner p {
        margin-bottom: 1.1em;
        width: 50%;
    }

/*Table*/
.start-page .table-wrapper {
    width: 75%;
    max-width: 1700px;
    min-width: 800px;
}
/*#endregion*/

/* --- Register page ------------------------------------------------------ */
/*#region REgister page*/
.register-page .content-row {
    gap: 0.5em;
}

@supports not (inset: 0) {
    .register-page .content-row > * + * {
        margin-left: 0.5em;
    }
}
/*#endregion*/

/* --- Utility classes ---------------------------------------------------- */
/*#region Utility classes*/

/*Arrows*/
.arrow-right {
    width: 0;
    height: 0;
    border: 1em solid;
    border-right-style: none !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

.arrow-up {
    width: 0;
    height: 0;
    border: 1em solid;
    border-top-style: none !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/*display*/
.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-flex {
    display: flex !important;
}

/*flex*/
.justify-spaced-evenly {
    justify-content: space-evenly !important;
}

.justify-space-between {
    justify-content: space-between !important;
}

.align-items-center {
    align-items: center !important;
}

/*Foreground color*/
.gray-color {
    color: var(--dark-gray);
}

/*Background & foreground color*/
.light-secondary-bg {
    color: var(--on-secondary-muted);
    background-color: var(--secondary-muted);
}

.secondary-bg {
    color: var(--on-secondary);
    background-color: var(--secondary);
}

.warning-bg {
    color: var(--on-warning);
    background-color: var(--warning);
}

.dark-bg {
    color: var(--primary);
    background-color: var(--on-primary);
}

.primary-bg {
    color: var(--on-primary);
    background-color: var(--primary);
}

    .primary-bg .accent {
        color: var(--secondary);
    }

.primary-muted-bg {
    color: var(--on-primary);
    background-color: var(--primary-muted) !important;
}

/*Border color*/
.border-color-danger {
    border-color: var(--danger) !important;
}

    .border-color-danger > .button-container {
        border-color: var(--danger) !important;
    }

/*Width*/
.narrow-area {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

/*Font weight*/
.font-weight-normal {
    font-weight: normal;
}

.font-weight-bold {
    font-weight: bold;
}
/*#endregion*/


* { box-sizing: border-box}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.slides {
    /* display: none;*/
    text-align: center;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
   /* color: white;*/
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    color: white;
}


/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}