/***********************************************************\
\                                                           /
\   BKapp stylesheet 'style.css'                            /
\                                                           /
\   (c) 2024 Apexion B.V. All rights reserved.              /
\                                                           /
\   This software is not intended for redestribution.       /
\                                                           /
\***********************************************************/

/* Contents */

/*
  01. cleanup
  02. fonts
  03. colors
  04. atoms
    A. base.html elements
    B. dialogue.html elements
    C. form elements
    D. table elements
    E. icons
    F. buttons
    G. overview content
    H. detail content
  05. tablet
  06. mobile
  07. animations
*/

/* 01. cleanup */

    *, *:before, *:after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: helvetica;
        height: 100%;
    }

    .center {
        margin-left: auto;
        margin-right: auto;
    }

    input {
        outline: none;
    }

    form {
        padding: 0;
        margin: 0;
    }

/* 02. fonts */

    a {
        text-decoration: none;
        color: #313131;
    }

    a:hover {
        color: #1093FB;
    }

    p {
        font-size: 14px;
        padding: 0;
        margin: 0;
        line-height: 22px;
    }

    b {
        font-size: 14px;
        font-weight: 600;
        padding: 0;
        margin: 0;
        line-height: 16px;
    }

    h1 {
        font-size: 32px;
        padding: 0;
        margin: 0;
        line-height: 38px;
    }

    h2 {
        font-size: 22px;
        line-height: 20px;
        padding: 0;
        margin: 0;
    }

    h3 {
        font-size: 20px;
        padding: 0;
        margin: 0;
    }

    h4 {
        font-size: 16px;
        padding: 0;
        margin: 0;
    }

    h5 {
        font-size: 14px;
        padding: 0;
        margin: 0;
    }

    h6 {
        font-size: 14px;
        padding: 0;
        margin: 0;
    }

/* 03. colors */

    .red {
        background-color: #F04923;
        border-color: #F04923;
    }

    .red:hover {
        background-color: #D13A1A;
    }

    .green {
        background-color: #48B973;
        border-color: #48B973;
    }

    .grey {
        background-color: #bbbbbb;
        border-color: #bbbbbb;
    }

    .grey:hover {
        background-color: #999;
    }

    .grey-text {
        color: #888;
    }

    .dark-grey {
        background-color: #444;
        color: #111;
    }

    .disabled {
        color: #555;
    }

    .transparent {
        background-color: rgba(0,0,0,0);
        border: 1px solid rgb(36,132,198);
        color: rgb(36,132,198);
    }

/* 04. atoms */

/* base.html */

    .app-background {
        position: absolute;
        background-image: url('../img/bg3.jpg');
        background-size: 10%;
        width: 100vw;
        background-blend-mode: lighten;
        height: 100%;
    }

    .app-container {
        margin: 0 auto;
        max-width: 100vw;
        width: 2000px;
        height: 100vh;
        box-shadow: 0px 30px 30px 2px rgba(27,67,122,0.2);
        display: flex;
    }

    .logo-container {
        margin-top: 20px;
        max-width: 200px;
    }

    .logo-container img {
        max-width: 200px;
    }

    /* loading screen */
    #loading {
        z-index:10000;
    }

    .loading-container {
        width: 440px;
        margin-top: 20%;
        margin-left: auto;
        margin-right: auto;
    }

    .loading {
        color: rgb(50, 90, 171);
        text-align: center;
        background-color : #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0px 30px 30px 2px rgba(27,67,122,0.2);
    }

    .loading img {
        width: 42px;
        height: 42px;
    }

    .loading h3 {
        padding: 20px;
    }

    /* side-bar */
    .side-bar {
        background-color: #F8F8F8;  /* fallback for old browsers */
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        flex-grow: 0;
        -ms-overflow-style: none;  /* IE and Edge hide scrollbar */
        scrollbar-width: none;  /* Firefox hide scrollbar */
    }

    .side-bar::-webkit-scrollbar {
        display: none;
    }

    .menu-logo {
        width: 24px;
        margin-left: 48px;
        margin-top: 49px;
        margin-bottom: 49px;
    }

    .menu-link {
        float: left;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        width: 320px;
        height: 80px;
        font-size: 20px;
        cursor: pointer;
        opacity: 0.5;
    }

    .menu-link:hover {
        opacity: 1;
    }

    .link-icon {
        height: 20px;
        width: 20px;
        float: left;
    }

    .link-label {
        width: 200px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 600;
        color: #1d1d1d;
        padding: 20px 20px;
        float: left;
        visibility: visible;
    }

    /* active menu items */
    .active .menu-link,
    .menu-link:hover {
        opacity: 1;
        background-color: #fff;
        box-shadow: 0px 3px 8px 0px rgba(122, 122, 122, 0.2);
    }

    /* collapsed side-bar state */
    .collapse {
        width: 130px;
    }

    .collapse .link-label {
        visibility: hidden;
        width: 0px;
        padding: 0px;
    }

    .collapse .menu-link {
        width: 122px;
    }

    /* expanded side-bar state */
    .expand {
        width: 340px;
    }

    /* (content) side area */
    #side-content {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
        max-width: 100%;
        flex-grow: 1;
        overflow: auto;
        background-color: #FFF;
        position: relative;
        height: 100%;
    }

    /* top-bar */
    .top-bar {
        width: 100%;
        padding: 40px 40px 20px 40px;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .top-menu {
        z-index: 0;
    }

    .top-link {
        float: right;
        margin-left: 20px;
    }

    /* breadcrum */
    .pagetitle h3 {
        font-size: 20px;
        margin: 0;
        padding: 0;
        color: #454545;
    }

    .title {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        padding-bottom: 0px;
        gap: 12px;
        height: 36px;
    }

    .title a,
    .title a:hover,
    .title a:visited {
        color: #454545;
    }

    /* heading */
    .heading-container {
        padding: 0 40px;
    }

    .heading {
        margin-top: 30px;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-between;
        position: sticky;
        gap: 20px 0;
        top: 0px;
        z-index: 20;
        -ms-overflow-style: none;  /* IE and Edge hide scrollbar */
        scrollbar-width: none;  /* Firefox hide scrollbar */
    }

    .heading-buttons {
        gap: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
    }

    .right {
        width: 100%;
        gap: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
    }

    /* content display area (target of AJAX calls) */
    .target {
        margin: 20px 40px 40px 40px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* dialogue.html */

    .dialogue-background {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: scroll;
    }

    .dialogue-container {
        padding: 4px;
        border-radius: 18px;
        border: 1px solid #D6D6D6;
        background-color: #fff;
        width: 460px;
        height: fit-content;
        box-shadow: 0px 10px 10px 2px rgba(27,67,122,0.1);
    }

    /* dialogue banner */
    .dialogue-banner {
        color: #454545;
        display: flex;
        flex-flow: row nowrap;
        gap: 8px;
        align-items: baseline;
        width: 100%;
        border-radius: 14px;
        padding: 40px;
    }

    .dialogue-image {
        width: 16px;
        height: 16px;
    }

    .dialogue-title {
        color: #111;
    }

    /* help */
    .help {
        padding: 20px;
        border: 0.5px solid #D6D6D6;
        border-radius: 8px;
        color: #888;
        text-align: left;
        display: flex;
        flex-flow: row;
    }

    .help-icon {
        margin-right: 20px;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
    }

    .dialogue-help {
        margin: 0 40px 40px 63px;
    }

    .dialogue-help p {
        flex-shrink: 1;
    }

    /* form.html */

    /* form elements */
    .form-wrapper {
        text-align: left;
        padding: 0 40px 40px 64px;
    }

    .form-wrapper p {
        font-size: 14px;
    }

    .fileinput {
        display: none;
    }

    /* labels */
    label {
        font-size: 14px;
        margin: 10px 0;
    }

    label [for^="id_impression"] a,
    label [for^="id_referentialmap"] a,
    label [for^="id_image"] a {
        margin-top: 10px;
    }

    #dialogue label::after {
        content: "\a";
        white-space: pre;
    }

    .label-checkbox {
        margin: 10px;
    }

    label[for^="upload-evidence"] {
        display: inline-block;
        cursor: pointer;
        width: 700px;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #image-clear_id,
    label[for=image-clear_id]{
        vertical-align: baseline;
    }

    .label-multiple {
        display: inline-block;
        background-color: #d5d5d5;
        margin: 10px 7px 0 0;
        padding: 6px 8px;
        border-radius: 4px;
        border: 2px solid none;
    }

    .label-multiple:hover {
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, rgba(38, 183, 249,0.8), rgba(16, 147, 251,0.8));  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, rgba(38, 183, 249, 0.8), rgba(16, 147, 251, 0.8)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        color: #fff;
        cursor: pointer;
    }

    /* form inputs */
    .search-form {
        display: flex;
        flex-flow: row nowrap;
        align-items: baseline;
        gap: 6px;
    }

    .text-area {
        display: block;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 16px;
        height: 16px;
        line-height: 20px;
    }

    input[type="radio"] {
        width: 14px;
        height: 14px;
        line-height: 20px;
    }

    input[type="text"],
    input[type="email"] {
        height: 20px;
        width: 200px;
        line-height: 20px;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 14px;
    }

    textarea {
        margin: 10px 0;
        width: 250px;
        height: 60px;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 14px;
    }

    input[type="checkbox"],
    input[type="text"],
    input[type="email"],
    input[type="file"],
    input[type="time"],
    input[type="number"],
    input[type="radio"]  {
        margin: 10px 0 ;
    }

    .form-wrapper input[type="date"] {
        font-size: 14px;
        margin: 6px 0 10px 0;
    }

    .timestamp input[type="date"] {
        font-size: 10px;
        margin: 0px;
    }

    input[type="file"],
    ::-webkit-file-upload-button,
    ::-ms-browse
    {
        color: #fff;
        border: none;
        width: fit-content;
        display: inline-block;
        font-family: helvetica;
        height: 20px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 14px;
        border-radius: 6px;
        text-transform: none;
        background-color: rgb(36,132,198);
        background: rgb(36,132,198);
    }

    input[type="submit"] {
        cursor: pointer;
    }

    .select-multiple input[type="checkbox"],
    .select-multiple input[type="checkbox"]:checked,
    .select-multiple input[type="radio"],
    .select-multiple input[type="radio"]:checked {
        opacity: 0;
        position: fixed;
        z-index: 10;
    }

    .select-multiple input[type="checkbox"] + label {
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #fff, #f5f5f5);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #fff, #f5f5f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border: 1px solid #D6D6D6;
        border-radius: 8px;
        display: flex;
        width: fit-content;
        flex-flow: row nowrap;
        align-items: center;
        gap: 6px;
        color: #5d5d5d;
        font-weight: 600;
    }

    .select-multiple input[type="checkbox"] + label::before {
        content: url('../img/icons/circle.svg');
        opacity: 0.5;
        display: inline-block;
        height: 15px;
        width: 15px;
    }

    .select-multiple input[type="checkbox"]:checked + label::before {
        content: url('../img/icons/check.svg');
        opacity: 0.5;
        display: inline-block;
        height: 15px;
        width: 15px;
    }

    .select-multiple input[type="checkbox"]:checked + label,
    .select-multiple input[type="radio"]:checked + label {
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #26B7F9, #1093FB);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #26B7F9, #1093FB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        color: #EBF2FA;
        border: 1.5px solid #4996EA;
    }

    .select-multiple input[type="checkbox"]:focus + label,
    .select-multiple input[type="radio"]:focus + label {
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #fff, #f5f5f5);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #fff, #f5f5f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border: 1px dashed #5d5d5d;
        color: #5d5d5d;
    }

    select {
        margin: 10px 0;
        max-width: 300px;
    }

    tr td input[type="checkbox"] {
        cursor: pointer;
        line-height: 10px;
        margin: 0;
        width: 24px;
        height: 24px;
        border-radius: 50% !important;
        border: 1px solid #D6D6D6;
        appearance: none;
        -webkit-appearance: none;
        transform: translateY(2px)
    }

    tr td input[type="checkbox"]:checked {
        background-color: #ff8502;
        border: 1px solid #292929;
        content: url('../img/icons/check2.svg');
        filter: invert(1);
        padding: 5px;
    }

    /* standard container */

    .container {
        position: relative;
        max-width: 100%;
        padding: 30px;
        border: 1px solid #D6D6D6;
        border-radius: 18px;
        box-shadow: 0px 2px 6px 0px rgba(170, 170, 170, 0.2);
        height: fit-content;
        margin-bottom: 30px;
        overflow-x: scroll;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .container h3 {
        color: #7B7B7B;
        margin-bottom: 10px;
        display: flex;
        flex-flow: row wrap;
        gap: 20px;
        align-items: baseline;
    }

    .container:last-child {
        margin-bottom: 0;
    }

    /* heading form fields */
    .heading-buttons input[type="text"] {
        margin: 0px;
        height: 33px;
        max-width: 160px;
        transform: translateY(-4px);
        border-radius: 6px;
        border: 1px solid #D6D6D6;
        padding: 8px;
    }

    .heading-buttons input::placeholder {
        font-size: 15px;
    }

    /* inline forms */
    .edit-inline form {
        display: flex;
        flex-flow: row nowrap;
        gap: 4px;
    }

    .edit-inline form button {
        margin-top: 12px;
    }

    .edit-inline input[type="text"],
    .regular {
        max-width: fit-content;
    }

    .edit-inline-text {
        padding: 3px 4px;
    }

    .edit-inline-text:hover {
        padding: 2px 3px;
        height: 22px;
        line-height: 16px;
        border: 1px solid #666;
        border-radius: 2px;
        cursor: text;
    }

    .inline-text input[type="text"] {
        height: 18px;
        font-size: 14px;
        margin: 0px;
    }

    .edit-inline-choices {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        padding: 3px 6px;
        height: 18px;
        font-size: 14px;
        max-width: fit-content;
    }

    .edit-inline-choices:hover {
        height: 18px;
        padding: 5px 6px;
        border: 1px solid #666;
        border-radius: 4px;
        background-color: rgb(208,208,214)
    }

    .edit-inline-choices:hover:after {
        content: "\2303";
        float: right;
        margin-left: 6px;
        font-size: 18px;
        transform: translate(0, -3px) rotate(180deg);
    }

    .inline-choices select {
        height: 18px;
        font-size: 14px;
        margin: 0;
    }

    /* thumbnails picture upload */
    .thumbnail {
        width: 100px;
        height: 130px;
        border: 0.5px dashed #999;
        border-radius: 10px;
        color: #999;
        margin: 14px 14px 0 0;
        text-align: center;
        padding: 4px;
        overflow: hidden;
        display: inline-block;
    }

    .thumbnail-plus {
        width: 40px;
        height: 40px;
        border: 2px solid #b5b5b5;
        color: #b5b5b5;
        content: '+';
        font-size: 28px;
        padding-bottom: 6px;
        padding-left: 1px;
        border-radius: 50%;
        margin: auto;
        margin-top: 25px;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .thumbnail img {
        width: 90px;
    }

    /* projectmgt schedule */
    .phase:first-child {
        border-radius: 14px;
        border-bottom: 1px solid #D6D6D6;
        margin-bottom: 30px;
    }

    .phase:nth-child(2) {
        border-top-right-radius: 14px;
        border-top-left-radius: 14px;
        width: 100%;
    }

    .phase {
        border: 1px solid #D6D6D6;
        border-bottom: none;
        width: 100%;
        padding: 30px;
    }

    .phase:last-child {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        border-bottom: 1px solid #D6D6D6;
    }

    .phase span {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 10px;
        margin: 10px 0 20px 0;
    }

    .phase p {
        white-space: nowrap;
        width: 125px;
    }

    .end {
        text-align: right;
    }

    .timeline {
        width: 100%;
        height: 14px;
        background-color: #EBEBEB;
        border: 1px solid #D6D6D6;
        border-radius: 5px;
    }

    .time {
        width: 100%;
        height: 14px;
        background-color: #1093FB;
        background: -webkit-linear-gradient(154deg, #4DFFC0, #32CBF8, #007AFD);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(154deg, #4DFFC0, #32CBF8, #007AFD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border: 1px solid #D6D6D6;
        border-radius: 5px;
    }

    /* tables */
    .table-filter-select {
        margin: 0;
        padding: 3px 11px !important;
        font-size: 14px;
        line-height: 20px;
        height: 33px;
        border-radius: 6px;
    }

    .table-container {
        position: relative;
        max-width: 100%;
        padding: 4px;
        border: 1px solid #D6D6D6;
        border-radius: 18px;
        box-shadow: 0px 2px 6px 0px rgba(170, 170, 170, 0.2);
        height: fit-content;

        overflow-x: scroll;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .table-wrapper {
        position: relative;
        overflow-x: scroll;
        border-radius: 14px;
        scrollbar-width: none;
    }

    .table-container::-webkit-scrollbar {
        display: none;
    }

    table {
        position: relative;
        overflow: clip;
        min-width: 100%;
        border-spacing: 0px;
        overflow-x: auto;
    }

    /* tables: table header */
    th {
        position: relative;
        white-space: nowrap;
        background-color: #F5F5F5;
        border-top: 1px solid #D6D6D6;
        color: #454545;
        text-align: left;
        height: 50px;
        padding: 8px 16px;
        margin: 0px;
        font-size: 14px;
    }

    th:first-child {
        border-left: 1px solid #D6D6D6;
        border-top-left-radius: 14px;
    }

    th:last-child {
        border-right: 1px solid #D6D6D6;
        border-top-right-radius: 14px;
        text-align: right;
    }

    th a:visited, th a:hover, th a {
        color: #454545;
    }

    tr, .th:not(:last-child), .td:not(:last-child), .tooltip, .has-tooltip {
        overflow-x: clip;
    }

    /* tables: table content */
    table tr td:last-child:hover {
        z-index: 40;
    }

    table tr th:last-child:hover {
        z-index: 50;
    }

    tr:last-child td {
        border-bottom: 1px solid #D6D6D6;
    }

    tr:last-child td:first-child {
        border-bottom-left-radius: 14px;
    }

    tr:last-child td:last-child {
        border-bottom-right-radius: 14px;
    }

    td {
        font-family: Helvetica;
        color: #1d1d1d;
        white-space: nowrap;
        text-align: left;
        height: 50px;
        font-size: 14px;
        margin: 0px;
        padding: 8px 16px;
        background-color: #fff;
        border-top: 1px solid #D6D6D6;
    }

    td img {
        height: 22px;
        width: 22px;
    }

    .table-actions {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        gap: 4px;
    }

    .is-link p:hover,
    .is-link:hover {
        cursor: pointer;
        color: #26B7F9;
        color: -webkit-linear-gradient(180deg, #26B7F9, #1093FB);  /* Chrome 10-25, Safari 5.1-6 */
        color: linear-gradient(180deg, #26B7F9, #1093FB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    /* tables: sticky cells */
    th:first-child,
    tr td:first-child {
        left: 0;
        position: -webkit-sticky;
        position: sticky;
        z-index: 10;
        border-left: 1px solid #D6D6D6;
    }

    th:last-child,
    tr td:last-child {
        right: 0;
        position: -webkit-sticky;
        position: sticky;
        text-align: right;
        z-index: 10;
        border-right: 1px solid #D6D6D6;
    }

    /* plancheck table*/
    .plancheck th:first-child {
        border-bottom-left-radius: 14px;
    }

    .plancheck th:last-child {
        border-bottom-right-radius: 14px;
    }

    .plancheck th:first-child,
    .plancheck td:first-child {
        min-width: 50px;
        text-align: center;
        padding-left: 14px;
    }

    .plancheck th:nth-child(2),
    .plancheck td:nth-child(2) {
        min-width: 150px;
        text-align: left;
    }

    .plancheck th:nth-child(3),
    .plancheck td:nth-child(3) {
        width: 80%;
        text-align: left;
    }

    .plancheck th:nth-child(4) {
        padding-right: 135px;
    }

    .plancheck th:nth-child(4),
    .plancheck td:nth-child(4) {
        width: 280px;
        min-width: 280px;
        text-align: left;
    }

    .plancheck th:last-child {
        width: 210px;
        min-width: 210px;
    }

    /* rismgt table and testmgt table */
    .riskmgt {
        overflow-x: scroll;
    }

    .riskmgt th:first-child,
    .testmgt th:first-child {
        border-bottom-left-radius: 14px;
    }

    .riskmgt th:last-child,
    .testmgt th:last-child {
        border-bottom-right-radius: 14px;
    }

    .riskmgt tr:first-child td:first-child,
    .testmgt tr:first-child td:first-child {
        border-top-left-radius: 14px;
    }

    .riskmgt tr:first-child td:last-child,
    .testmgt tr:first-child td:last-child {
        border-top-right-radius: 14px;
    }

    .riskmgt th:first-child,
    .riskmgt td:first-child,
    .riskmgt th:nth-child(2),
    .riskmgt td:nth-child(2) {
        width: 55px;
    }

    .riskmgt th:nth-child(3),
    .riskmgt td:nth-child(3)  {
        width: 170px;
        text-align: left;
    }

    .riskmgt th:nth-child(4),
    .riskmgt td:nth-child(4) {
        width: calc(100% - 670px)
    }

    .riskmgt th:nth-child(5),
    .riskmgt td:nth-child(5),
    .riskmgt th:nth-child(6),
    .riskmgt td:nth-child(6) {
        width: 200px;
        text-align: right;
    }

    .riskmgt th:nth-child(5) {
        padding-right: 27px;
    }

    .riskmgt th:nth-child(6) {
        padding-right: 5px;
    }


    .riskmgt th:last-child {
        width: 210px;
    }

    /* old table styling */
    .projectmgt tr td:first-child,
    .ruleset tr td:first-child,
    .plancheck tr td:first-child,
    .riskmgt tr td:first-child,
    .testmgt tr td:first-child {
        left: 0px;
        position: -webkit-sticky;
        position: sticky;
        z-index: 10;
        border-left: 0.2px solid #b1b1b1;
    }

    .projectmgt tr th:first-child,
    .ruleset tr th:first-child,
    .plancheck tr th:first-child,
    .riskmgt tr th:first-child,
    .testmgt tr th:first-child,
    .file-table tr th:first-child {
        left: 0px;
        position: -webkit-sticky;
        position: sticky;
        z-index: 20;
        border-left: 0.2px solid #b1b1b1;
        border-top-left-radius: 12px;
    }

    .projectmgt tr td:nth-child(2),
    .ruleset tr td:nth-child(2),
    .plancheck tr td:nth-child(2),
    .riskmgt tr td:nth-child(2) {
        left: 12px;
        position: -webkit-sticky;
        position: sticky;
        z-index: 10;
    }

    .file-table tr td:first-child {
        left: 0px;
        position: -webkit-sticky;
        position: sticky;
        z-index: 10;
    }

    .projectmgt tr th:nth-child(2),
    .ruleset tr th:nth-child(2),
    .plancheck tr th:nth-child(2),
    .riskmgt tr th:nth-child(2) {
        left: 12px;
        position: -webkit-sticky;
        position: sticky;
        z-index: 20;
    }

    .riskmgt tr th:nth-child(3),
    .riskmgt tr td:nth-child(3),
    .testmgt tr th:nth-child(2),
    .testmgt tr td:nth-child(2) {
        line-height: 20px;
        z-index: 20;
        min-width: 160px;
    }

    .riskmgt tr th:nth-child(4),
    .riskmgt tr td:nth-child(4)
    .testmgt tr th:nth-child(4),
    .testmgt tr td:nth-child(4) {
        padding-left: 14px;
        max-width: 200px;
        overflow : hidden;
        text-overflow: ellipsis;
    }

    .riskmgt tr:not(.department, .paragraph) td:nth-child(4):hover,
    .testmgt tr:not(.department, .paragraph) td:nth-child(4):hover {
        overflow: visible;
        white-space: normal;
        background-color: #fff;
        margin-right: 200px;
    }

    .plancheck tr td:nth-child(3) {
        max-width: 400px;
        overflow : hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .projectmgt tr td:last-child,
    .plancheck tr th:last-child,
    .plancheck tr td:last-child,
    .riskmgt tr td:last-child,
    .testmgt tr td:last-child,
    .file-table tr td:last-child {
        line-height: 8px;
        position: -webkit-sticky;
        position: sticky;
        min-width: 120px;
        right: 0;
        text-align: right;
        z-index: 10;
    }

    .testmgt tr th:nth-last-child(2) {
        text-align: right;
    }

    .testmgt tr td:nth-last-child(2) {
        position: -webkit-sticky;
        position: sticky;
        right: 120px;
        z-index: 10;
    }

    .riskmgt tr td:nth-child(5) {
        width: 120px;
    }

    .projectmgt tr th:last-child,
    .riskmgt tr th:last-child,
    .testmgt tr th:last-child,
    .file-table tr th:last-child {
        line-height: 8px;
        position: -webkit-sticky;
        position: sticky;
        right: 0;
        text-align: right;
        z-index: 20;
        border-top-right-radius: 12px;
    }

    table tr td:last-child:hover {
        z-index: 40;
    }

    table tr th:last-child:hover {
        z-index: 50;
    }

    .show-hide {
        display: flex;
        align-items: center;
    }

    .show-hide img {
        width: 14px;
        opacity: 0.5;
    }

    /* imported tables */
    table thead tr {
        background-color: #F5F5F5;
    }
    table thead tr:first-child{
        border-top-right-radius: 14px;
        border-top-left-radius: 14px;
        background-color: #D6D6D6 !important;
    }

    .xml {
        border-spacing: 0px;
        border: 0 !important;
    }

    .xml th {
        white-space:unset;
        background-color: inherit;
        border: 1px solid #D6D6D6;
        padding: 1em;
        text-align: left !important;
    }

    .xml td {
        padding: 1em;
        border: 1px solid #D6D6D6;
        text-align: left !important;
    }

    .pct8 {width: 8%}
    .pct5 {width: 5%}
    .pct57 {width: 57%}
    .pct13 {width: 13%}

    .xml .left{
        float: none !important;
        text-align: left;
    }

    .xml th {
        border-radius: 0;
    }

    .head-row-rest {
        background-color: #F5F5F5;
    }

    .head-row2 {
        background-color: #b1bfce !important
    }

    /* custom table cells */

    table .wrap {
        position: relative;
        display: flex;
        gap: 6px;
        flex-flow: row nowrap;
        align-items: center;
    }

    table .evidence {
        border-radius: 8px;
        background-color: #EBF2FA;
    }

    table .evidence:hover {
        background-color: #c8e0fc;
    }

    .evidence-building {
        padding: 6px 12px;
        border-radius: 8px;
    }

    .evidence-building-multi {
        padding: 6px 12px;
        border-radius: 8px;
    }

    .overview td:nth-child(2) {
        width: 10px;
    }

    .blue-line td {
        border-top: 2px solid rgb(36,132,198);
    }

    .light-blue-line td {
        border-top: 2px solid rgb(196, 223, 240);
    }

    .paragraph td {
        color: #7B7B7B;
        background-color: #F8F8F8;
        height: 50px !important;
        font-size: 15x;
        font-weight: bold;
    }

    .department td {
        color: #7B7B7B;
        height:50px !important;
        font-size: 15px;
        font-weight: 900;
    }

    .department td:first-child{
        border-top-left-radius: 14px;
    }

    .department td:last-child{
        border-top-right-radius: 14px;
    }

    .bottom-corner-wrapper {
        width: 200px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-content: center;
    }

    .inapplicable {
        text-decoration:line-through;
        color: #999 !important;
    }
    .inapplicable td {
        color: #999 !important;
    }

    .discontinued {
        border-radius: 5px;
        margin-top: 10px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        border: 1px solid #F04923;
        color: #F04923;
        padding: 10px;
        font-size: 14px;
    }

    .discontinued img {
        padding: 4px;
        margin-right: 5px;
    }

    .jumpto {
        visibility: hidden;
        position:relative;
        transform:translateY(-200px);
    }

    .table-indicator {
        width: 12px;
        height: 12px;
        margin: 0 14px;
        border-radius: 50%;
        border-width: 2px;
        border-style: solid;
        background-color: #fff;
    }

    .detail-table {
        margin-top: 10px;
        flex-grow: 2;
        min-width: 85%;
        overflow-x: scroll;
    }

    .capped {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* footer */

    .footer {
        background-color: #fff;
        position: sticky;
        bottom: 0px;
        padding-top: 30px;
        z-index: 15;
        text-align: right;
        height: 63px;
        display: flex;
        flex-flow: row nowrap;
        gap: 6px;
        justify-content: space-between;
    }

    .pagination-select {
        background-color: rgba(0,0,0,0);
        color: inherit;
        font-weight: inherit;
        padding: 0;
        border: 0px solid #fff;
        margin: -2px 0 0 0;
        font-size: 15px;
        font-weight: 600;
    }

    /* buttons */
    button {
        margin: 0;
        padding: 0;
        position: none;
    }

    .button {
        border: none;
        width: fit-content;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 6px;
        font-family: helvetica;
        font-weight: 600;
        height: 33px;
        padding: 7px 11px;
        font-size: 15px;
        line-height: 16px;
        border-radius: 7px;
        text-transform: none;
        box-shadow: 0px 2px 6px 0px rgba(170, 170, 170, 0.2);
    }

    .primary {
        color: #fff;
        border: 1.5px solid #4996EA;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #26B7F9, #1093FB);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #26B7F9, #1093FB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .primary:hover {
        color: #fff;
        border: 1.5px solid #4996EA;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, rgba(38, 183, 249,0.8), rgba(16, 147, 251,0.8));  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, rgba(38, 183, 249, 0.8), rgba(16, 147, 251, 0.8)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .primary-red {
        color: #fff;
        border: 1.5px solid #ea6149;
        background: #f9c9c1;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #f95026, #fb2b10);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #f95026, #fb2b10); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .primary-red:hover {
        color: #fff;
        border: 1.5px solid #ea6149;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, rgba(249, 80, 38, 0.8), rgba(249, 80, 38, 0.8));  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, rgba(249, 80, 38, 0.8), rgba(249, 80, 38, 0.8)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .primary-ai {
        color: #fff;
        border: 1.5px solid #6400e9;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #9471ff, #6400e9);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #9471ff, #6400e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .primary-ai:hover {
        color: #fff;
        content: 'Genereer risico\'s';
        border: 1.5px solid #6400e9;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #9c79ff, #6c08f1);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #9c79ff, #6c08f1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .primary-ai::before {
        content: url('../img/icons/ai.svg');
        opacity: 1;
        display: inline-block;
        height: 16px;
        width: 16px;
    }

    .primary-ai .text {
        white-space: nowrap;
        width: 0px;
        visibility: hidden;
    }

    .primary-ai:hover .text {
        white-space: nowrap;
        animation-name: GenerativeAI;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        visibility: visible;
    }

    .secondary,
    .secondary-grey {
        color: #7B7B7B;
        border: 0.5px solid #D6D6D6;
        background-color: #fff;
    }

    .secondary-grey:hover {
        color: #707070;
        fill: #707070;
        border: 1.5px solid #707070;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #fff, #f5f5f5);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #fff, #f5f5f5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .secondary:hover {
        color: #4996EA;
        fill: #4996EA;
        border: 1.5px solid #4996EA;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #fff, #F0FCFF);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #fff, #F0FCFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .square {
        width: 33px;
        height: 33px;
        padding: 7px 7px 7px 8.2px;
        border-radius: 7px;
    }

    .button:hover, button:hover,
    #btn-left:hover, #btn-right:hover {
        cursor: pointer;
        box-shadow: 0px 1px 3px 0px rgba(63, 63, 63, 0.2);
    }

    /* menu buttons */
    .link-icon {
        width: 24px;
        height: 24px;
    }

    .menu-link:hover #link-personen,
    .active #link-personen {
        background-color: #fff;
        content: url('../img/icons/group-active.svg');
    }

    #link-personen {
        content: url('../img/icons/group.svg');
    }

    .menu-link:hover #link-projecten,
    .active #link-projecten {
        background-color: #fff;
        content: url('../img/icons/building-active.svg');
    }

    #link-projecten {
        content: url('../img/icons/building.svg');
    }

    .menu-link:hover #link-plantoetsing,
    .active #link-plantoetsing {
        background-color: #fff;
        content: url('../img/icons/check-active.svg');
    }

    #link-plantoetsing {
        content: url('../img/icons/check.svg');
    }

    .menu-link:hover #link-risico,
    .active #link-risico {
        background-color: #fff;
        content: url('../img/icons/warning-active.svg');
    }

    #link-risico {
        content: url('../img/icons/warning.svg');
    }

    .menu-link:hover #link-uitvoering,
    .active #link-uitvoering {
        background-color: #fff;
        content: url('../img/icons/tools-active.svg');
    }

    #link-uitvoering {
        content: url('../img/icons/tools.svg');
    }

    .menu-link:hover #link-inspecties,
    .active #link-inspecties {
        background-color: #fff;
        content: url('../img/icons/inspection-active.svg');
    }

    #link-inspecties {
        content: url('../img/icons/inspection.svg');
    }

    .menu-link:hover #link-rapportage,
    .active #link-rapportage {
        background-color: #fff;
        content: url('../img/icons/report-active.svg');
    }

    #link-rapportage {
        content: url('../img/icons/report.svg');
    }

    .menu-link:hover #link-elearning,
    .active #link-elearning {
        background-color: #fff;
        content: url('../img/icons/academy-active.svg');
    }

    #link-elearning {
        content: url('../img/icons/academy.svg');
    }

    .menu-link:hover #link-ondersteuning,
    .active #link-ondersteuning {
        background-color: #fff;
        content: url('../img/icons/support-active.svg');
    }

    #link-ondersteuning {
        content: url('../img/icons/support.svg');
    }

    .menu-link:hover #link-settings,
    .active #link-settings {
        background-color: #fff;
        content: url('../img/icons/settings-active.svg');
    }

    #link-settings {
        content: url('../img/icons/settings.svg');
    }

    /* button images */
    .logs-button::before {
        content: url('../img/icons/logs.svg');
    }

    .add-button::before {
        content: url('../img/icons/add.svg');
    }

    .edit-button::before {
        content: url('../img/icons/edit.svg');
    }

    .trash-button::before {
        content: url('../img/icons/delete.svg');
    }

    .download-button::before {
        content: url('../img/icons/download.svg');
    }

    .stamp-button::before {
        content: url('../img/icons/stamp.svg');
    }

    .account-button::before {
        content: url('../img/icons/account.svg');
    }

    .admin-button::before {
        content: url('../img/icons/key.svg');
    }

    .add-file-button::before {
        content: url('../img/icons/add_event.svg');
    }

    .remove-file-button::before {
        content: url('../img/icons/remove_event.svg');
    }

    .document-button::before {
        content: url('../img/icons/document.svg');
    }

    .check-button::before {
        content: url('../img/icons/check.svg');
    }

    .risk-button::before {
        content: url('../img/icons/warning.svg');
    }

    .execution-button::before {
        content: url('../img/icons/tools.svg');
    }

    .report-button::before {
        content: url('../img/icons/report.svg');
    }

    .forward-button::before {
        content: url('../img/icons/arrow-right.svg');
    }

    .mail-button::before {
        content: url('../img/icons/mail.svg');
    }

    .contact-button::before {
        content: url('../img/icons/message.svg');
    }

    .star-button::before {
        content: url('../img/icons/star.svg');
    }

    .rocket-button::before {
        content: url('../img/icons/rocket.svg');
    }

    .building-button::before {
        content: url('../img/icons/building.svg');
    }

    .palette-button::before {
        content: url('../img/icons/palette.svg');
    }

    .bug-button::before {
        content: url('../img/icons/bug.svg');
    }

    .search-button::before {
        content: url('../img/icons/search.svg');
    }

    .export-button::before {
        content: url('../img/icons/export.svg');
    }

    .wrong-button::before {
        content: url('../img/icons/wrong.svg');
    }

    .na-button::before {
        content: url('../img/icons/na.svg');
    }

    .pause-button::before {
        content: url('../img/icons/pause.svg');
    }

    .filter-button::before {
        content: url('../img/icons/filter.svg');
    }

    .rewind-button::before {
        content: url('../img/icons/rewind.svg');
    }

    .import-button::before {
        content: url('../img/icons/import.svg');
    }

    .swap-button::before {
        content: url('../img/icons/swap.svg');
    }

    .key-button::before {
        content: url('../img/icons/key.svg');
    }

    .lock-button::before {
        content: url('../img/icons/lock.svg');
    }

    .notification-button::before {
        content: url('../img/icons/notification.svg');
    }

    .prev-button::before {
        content: url('../img/icons/prev.svg');
        width: 8px !important;
    }

    .next-button::before {
        content: url('../img/icons/next.svg');
        width: 8px !important;
    }

    .form-button-ok::before {
        content: url('../img/icons/check2.svg');
    }

    .form-button-nok::before {
        content: url('../img/icons/close.svg');
        width: 10px !important;
    }

    .box-button::before {
        content: url('../img/icons/inbox.svg');
    }

    .upward-button::before {
        content: url('../img/icons/upward.svg');
        width: 13px !important;
    }

    .downward-button::before {
        content: url('../img/icons/downward.svg');
        width: 13px !important;
    }

    .image-button::before {
        content: url('../img/icons/image.svg');
    }

    .note-button::before {
        content: url('../img/icons/note.svg');
    }

    .alternative-button::before {
        content: url('../img/icons/alternative.svg');
        width: 13px !important;
        padding-left: 2px;
    }

    .purchase-button::before {
        content: url('../img/icons/purchase.svg');
    }

    .zip-button::before {
        content: url('../img/icons/zip.svg');
        width: 12px !important;
    }

    .copy-button::before {
        content: url('../img/icons/copy.svg');
    }

    .settings-button::before {
        content: url('../img/icons/settings.svg');
    }

    .algo-button::before {
        content: url('../img/icons/algo.svg');
    }

    .bank-button::before {
        content: url('../img/icons/bank.svg');
    }

    .profile-button::before {
        content: url('../img/icons/profile.svg');
    }

    .logout-button::before {
        content: url('../img/icons/logout.svg');
    }

    .group-button::before {
        content: url('../img/icons/group.svg')
    }

    .info-button::before {
        content: url('../img/icons/info.svg')
    }

    .logs-button::before, .add-button::before,
    .edit-button::before, .trash-button::before,
    .download-button::before, .stamp-button::before,
    .account-button::before, .admin-button::before,
    .add-file-button::before, .remove-file-button::before,
    .document-button::before, .check-button::before,
    .risk-button::before, .execution-button::before,
    .report-button::before, .forward-button::before,
    .mail-button::before, .contact-button::before,
    .star-button::before, .rocket-button::before,
    .building-button::before, .palette-button::before,
    .bug-button::before, .search-button::before,
    .export-button::before, .wrong-button::before,
    .na-button::before, .pause-button::before,
    .filter-button::before, .rewind-button::before,
    .import-button::before, .swap-button::before,
    .key-button::before, .lock-button::before,
    .notification-button::before, .prev-button::before,
    .next-button::before, .form-button-ok::before,
    .form-button-nok::before, .box-button::before,
    .downward-button::before, .upward-button::before,
    .image-button::before, .note-button::before,
    .alternative-button::before, .zip-button::before,
    .purchase-button::before, .copy-button::before,
    .settings-button::before,  .algo-button::before,
    .bank-button::before, .profile-button::before,
    .logout-button::before, .group-button::before,
    .info-button::before {
        opacity: 0.5;
        display: inline-block;
        height: 15px;
        width: 15px;
    }

    .on-off-button {
        display: flex;
        flex-flow: row nowrap;
        align-content: center;
        border-radius: 16px;
        min-height: 33px;
        min-width: 50px;
        padding: 4px;
        border: 1px solid #D6D6D6;
        cursor: pointer;
    }

    .on {
        justify-content: flex-end;
        width: 24px;
        height: 24px;
        opacity: 0.5;
        color: #4996EA;
        fill: #4996EA;
        border: 1px solid #4996EA;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(180deg, #fff, #F0FCFF);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(180deg, #fff, #F0FCFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .off {
        justify-content: flex-start;
        width: 24px;
        height: 24px;
        opacity: 0.5;
    }

    /* other stuff */

    .form-invoicing > p:nth-child(7) > label:nth-child(1)::before {
        content: 'Product 1';
        width: 100%;
        height: 14px;
        float: left;
        margin-bottom: 8px;
        font-weight: 800;
    }

    .no-padding {
        padding: 0;
    }

    .tiny {
        height: 18px;
        padding: 2px 4px 1px 4px;
        font-size: 8px;
        border-radius: 4px;
        font-style: bold;
        text-transform: uppercase;
        transform: translate(0, -0.8px);
        margin-left: 2px;
    }

    .small {
        height: 20px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 14px;
        border-radius: 6px;
        text-transform: none;
    }

    .medium-img {
        height: 26px;
        padding: 0;
        font-size: 15px;
        line-height: 16px;
        border-radius: 7px;
        text-transform: none;
        border: none;
    }

    .large {
        height: 32px;
        padding: 7px 12px;
        font-size: 17px;
        border-radius: 9px;
        text-transform: none;
    }

    .very-large {
        width: 80px;
        max-height: 100px;
        padding: 7px 12px;
    }

    .round-tiny {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        text-align: center;
        font-size: 10px;
        margin-bottom: -8px;
    }

    .rectangle-xxsmall {
        height: 16px;
        width: fit-content;
        border-radius: 4px;
        margin-right: 8px;
        color: #fff;
        padding: 4px 4px 2px 4px;
        text-align: center;
        font-size: 10px;
        line-height: 8px;
        position: relative;
    }

    .rectangle-xsmall {
        display: flex;
        flex-flow: row nowrap;
        align-content: center;
        align-items: center;
        height: 16px;
        width: fit-content;
        border-radius: 4px;
        color: #fff;
        padding: 4px 4px 2px 4px;
        text-align: center;
        font-size: 10px;
        float: left;
    }

    .rectangle-xsmall:nth-child(2) {
        margin-right: 80px;
        margin-top: 2px;
    }

    .rectangle-small {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-content: flex-start;
        align-items: center;
        height: 30px;
        width: fit-content;
        border-radius: 6px;
        color: #111;
        gap: 7px;
        padding: 5px 12px;
        font-size: 14px;
    }

    .rectangle-small img {
        height: 16px;
        width: 16px;
        margin: 0;
    }

    .round-xsmall {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        margin-right: 8px;
        text-align: center;
        font-size: 14px;
    }

    .round-xxsmall {
        height: 14px;
        width: 14px;
        border-radius: 50%;
        text-align: center;
        font-size: 14px;
    }

    .round-small {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        text-align: center;
        font-size: 14px;
        margin-right: 8px;
        opacity: 0.8;
    }

    .onoff-button {
        width: 30px;
    }

    .translate {
        opacity: 0.8;
        transform: translateY(5.5px)
    }

    .round-medium {
        height: 26px;
        width: 26px;
        border-radius: 50%;
        text-align: center;
        font-size: 15px;
    }

    .round-large {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        text-align: center;
        font-size: 17px;
    }

    .round-xlarge {
        height: 55px;
        width: 55px;
        border-radius: 50%;
        text-align: center;
        font-size: 17px;
    }

    /* grey buttons */
    .marking-button, .marking-button-dimmed,
    .signoff-button, .delete-button,
    .demote-button, .promote-button
     {
        width: 28px;
        height: 28px;
        float: right;
        background-size: 28px 28px;
        background-position: center;
        margin: 4px;
        border-radius: 7px;
        border: 0.2px solid #a8a8a8;
    }

    .signoff-button {
        background-image: url('../img/icon_stamp.png');
    }

    .marking-button  {
        background-image: url('../img/icon_marking.png');
    }

    .marking-button-dimmed {
        background-image: url('../img/icon_marking_dimmed.png');
    }

    .delete-button {
        background-image: url('../img/icon_trash.png');
    }



    .promote-button {
        background-image: url('../img/promote.png');
    }

    .demote-button {
        background-image: url('../img/user-black.png');
        background-color: rgb(199,199,199);
        border-radius: 4px;
    }

    .bottom-corner {

        position: absolute;
        bottom: 20px;
        right: 20px;
    }

    .button .tiny .blue {
        float: right;
    }

   /* cards */
    .card-wrapper {
        display: flex;
        flex-flow: row wrap;
        gap: 30px;
        justify-content: stretch;
        align-items: stretch;
    }

    .card-wrapper h3 {
        color: #D6D6D6;
    }

    .card {
        background-color: #fff;
        width: calc(50% - 15px);
        padding: 30px;
        height: 100%;
        border-radius: 14px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-self: stretch;
        color: #1d1d1d;
        position: relative;
        min-height: 160px;
        border: 1px solid #D6D6D6;
        box-shadow: 0px 2px 6px 0px rgba(170, 170, 170, 0.2);
    }

    .card h3 {
        width: 100%;
        padding-bottom: 20px;
    }

    .info {
        max-width: 50%;
        align-self: stretch;
    }

    .card-buttons {
        position: relative;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        gap: 8px;
    }


    .card-third {
       width: 33%;
       border: 1px solid #D6D6D6;
       border-radius: 14px;
       padding: 30px;
       box-shadow: 0px 2px 6px 0px rgba(170, 170, 170, 0.2);
    }

    .card-third h3 {
        color: #7B7B7B;
    }

    .third-wrapper {
        margin: 30px 0;
        display: flex;
        flex-flow: row nowrap;
        gap: 30px;
    }

    .third-title {
        margin-bottom: 10px;
        display: flex;
        flex-flow: row wrap;
        gap: 20px;
        align-items: baseline;
    }


    /* buildings */

    .building-card {
        color: #1d1d1d;
        width: 35%;
        min-width: 320px;
        border: 1px solid #D6D6D6;
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0px 2px 6px 0px rgba(170, 170, 170, 0.2);
    }

    .building-card b {
        color: #7B7B7B;
    }

    .building-wrapper {
        overflow-x: scroll;
        display: flex;
        flex-flow: row nowrap;
        white-space: nowrap;
        gap: 30px;
        scrollbar-width: none;
    }

    .building-wrapper::-webkit-scrollbar {
        display: none;
    }
    .plancheck-wrapper {
        display: flex;
        gap: 30px;
        flex-flow: row wrap;
    }

    .building-status,
    .expertise-panel {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
    }

    .building-status p,
    .expertise-panel p {
        height: 28px;
        width: fit-content;
        font-size: 14px;
        padding: 2px 7px 0px 7px;
        margin: 10px 10px 10px 0;
        border-radius: 6px;
        color: #26B7F9;
        border: 1px solid #26B7F9;
        background-color: rgba(38, 183, 249, 0.1);
        background-color: -webkit-linear-gradient(180deg, rgba(38, 183, 249, 0.1), rgba(16, 147, 251, 0.1));  /* Chrome 10-25, Safari 5.1-6 */
        background-color: linear-gradient(180deg, rgba(38, 183, 249, 0.1), rgba(16, 147, 251, 0.1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    td .expertise-panel p {
        margin: 0;
    }

    td .expertise-panel {
        gap: 6px;
        justify-content: flex-start;
    }

    .building-nav {
        width: 100%;
        color: #7B7B7B;
        margin-top: 14px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        gap: 16px;
    }

    .building-nav a,
    .building-nav a:hover,
    .building-nav a:visited {
        color: #7B7B7B;
    }


    /* other stuff */

    .expertise {
        text-align: left;
    }

    .card-main-text {
        width: calc(100% - 85px);
        margin-left: 30px;
    }

    .card-main-text h4 {
        padding-top: 6px;
    }

    .card-text {
        flex-basis: 100%;
        margin-top: 20px;
        align-self: flex-end;
    }

    .card-text h4 {
        padding-top: 8px;
    }

    .person-card-picture {
        margin-top: 15px;
    }

    .person-card-text {
        margin: 10px 0 10px 10px;
        width: calc(100% - 70px);
    }

    /* progress counters */
    .card-indicator {
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #fff;
        background-color: rgb(36,132,198);
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    .has-indicator {
        padding-bottom: 70px;
        position: relative;
    }

    .counter {
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(100deg, rgb(36,132,198), rgb(20,93,133));  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(100deg, rgb(36,132,198), rgb(20,93,133)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        height: 40px;
        padding: 12.5px 30px;
        white-space: nowrap;
        transform: skewX(-30deg) translateX(10px);
    }

    .risk-counter {
        max-width: 26px;
        margin-right: 20px;
        text-align: center;
        display: inline-block;
    }

    .risk-counter img {
        width: 26px;
    }

    .counter p {
        transform: skewX(30deg);
    }

    /* dropdown menu */
      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        bottom: 32px;
        background-color: #fff;
        padding: 16px 16px 6px 16px;
        border-radius: 8px;
        min-width: fit-content;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }

      .dropdown-content a {
        margin-bottom: 10px;
        display: block;
      }


      .dropdown-content-2 {
        display: none;
        position: absolute;
        bottom: 32px;
        background-color: #fff;
        padding: 16px 16px 6px 16px;
        border-radius: 8px;
        min-width: fit-content;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }

      .dropdown-content-2 a {
        margin-bottom: 10px;
        display: block;
      }

      .dropdown-content a:hover {background-color: #ddd;}

      .show {display:block; visibility: visible !important;}

    /* tabs */
    .tabs {
        height: 50px;
        min-width: calc(100% + 80px);
        display: flex;
        gap: 40px;
        flex-flow: row nowrap;
        align-items: baseline;
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-bottom: 20px;
        -moz-box-shadow: inset 0 -2px 0 0 #F0F0F0;
        -webkit-box-shadow: inset 0 -2px 0 0 #F0F0F0;
        box-shadow: inset 0 -2px 0 0 #F0F0F0;
        padding-left: 40px;
        margin: 0 -40px 10px -40px;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        white-space: nowrap;
        height: 50px;
        color: #7B7B7B;
        font-weight: 400;
        display: flex;
        padding: 10px 0px;
        font-size: 14px;
    }

    .tab-container {
        max-width: 100%;
        overflow-x: hidden;
    }

    .active-tab {
        color: #1d1d1d;
        background: #fff;
        font-weight: 600;
        border-bottom: 3px solid #1093FB;
    }

    .tab:hover:not(.active-tab) {
        height: 28px;
        padding: 4px 6px 0px 6px;
        margin: 6px -6px;
        border-radius: 6px;
        color: #26B7F9;
        color: -webkit-linear-gradient(180deg, #26B7F9, #1093FB);  /* Chrome 10-25, Safari 5.1-6 */
        color: linear-gradient(180deg, #26B7F9, #1093FB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background-color: rgba(38, 183, 249, 0.1);
        background-color: -webkit-linear-gradient(180deg, rgba(38, 183, 249, 0.1), rgba(16, 147, 251, 0.1));  /* Chrome 10-25, Safari 5.1-6 */
        background-color: linear-gradient(180deg, rgba(38, 183, 249, 0.1), rgba(16, 147, 251, 0.1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    /* tooltips */
    .tooltip {
        visibility: hidden;
        font-weight:600;
        height: 0px;
        color: #fff;
        background: #1d1d1d;
        width: 0px;
        font-size: 14px;
        border-radius: 6px;
        text-align: center;
        z-index: 500000;
        line-height: 7px;
        position: absolute;
        bottom: 38px;
    }

    .tooltip::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        right: 20px;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color:  #1d1d1d transparent transparent transparent;
    }

    .has-tooltip:hover + .tooltip {
        visibility: visible;
        position: absolute;
        height: 24px;
        padding: 9px 6px 7px 6px;
        margin-right: 2px;
        width: fit-content;
        z-index: 35000;
    }

    /* modifiers */
    .align-center {
        align-items: center;
    }

    ul {
        padding-left: 14px;
        font-size: 14px;
        line-height: 26px;
    }

    .has-gap {
        gap: 0 20px;
    }

    .left {
        float: left;
    }

    .same-line {
        display: flex;
        flex-flow: row wrap;
    }

    /* detail layout */
    .process-icon {
        padding: 10px;
        border: 4px solid rgb(36,132,198);
        border-radius: 50%;
        width: fit-content;
        z-index: 10;
        background-color: #EBF2FA;
    }

    .process-icon img {
        width:40px;
    }

    .process-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: rgb(67, 74, 81);
        padding-left: 56px;
        margin-left: -34px;
        background: #C1E4F9;  /* fallback for old browsers */
        background: -webkit-linear-gradient(95deg, rgba(193,228,249,0.8), rgba(234,242,250,0.8));  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(95deg, rgba(193,228,249,0.8), rgba(234,242,250,0.8)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        width: 100%;
    }

    .process-line {
        margin: 20px 33px;
        margin-top: 20px;
        border-left: 4px solid rgb(36,132,198);
        height: auto;
        width: 4px;
    }

    .content-block {
        margin: 20px 0;
        color: #555;
        background-color: #fff;
        flex-grow: 1;
        padding: 30px;
        max-width: 35%;
        position: relative;
        border-radius: 14px;
    }

    .content-heading {
        color: #454545;
        -moz-box-shadow: inset 0 2px 0 0 #F0F0F0;
        -webkit-box-shadow: inset 0 2px 0 0 #F0F0F0;
        box-shadow: inset 0 2px 0 0 #F0F0F0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 20px;
        padding: 30px 0;
        margin-top: 40px;
    }

    .content-heading:first-child:not(.has-divider) {
        margin-top: 0;
        padding: 0 0 30px 0;
        -moz-box-shadow: inset 0 0 0 0 #fff;
        -webkit-box-shadow: inset 0 0 0 0 #fff;
        box-shadow: inset 0 0 0 0 #fff;
    }

    /* usermgt */
    .project-link,
    .project-link:hover,
    .project-link:visited {
        color: #454545;
        line-height: 26px;
    }

    /* usercfg */
    .email-settings,
    .email-settings table {
        width: fit-content;
        min-width: fit-content !important;
    }

    .email-settings table td:last-child {
        display: flex;
        justify-content: flex-end;
    }

    /* project detail impressions */
    .impression-container {
        height: 240px;
        width: fit-content;
        position:relative;
        padding: 4px;
        border-radius: 16px;
        border: 1px solid #D6D6D6;
    }

    .impression {
        width: auto;
        height: 100%;
        border-radius: 12px;
        border: 1px solid #D6D6D6;
    }

    .impression-wrapper {
        color: #454545;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
        gap: 20px;
        margin: 0 0 20px 0;
        height: 300px;
        width: 100%;
        overflow-x: scroll;
    }

    .impression-wrapper b {
        position: relative;
    }

    .impression-measures {
        height: 333px;
    }

    .impression-wrapper .card-buttons {
        margin-top: 10px;
    }

    .meta {
        border:1px solid #D6D6D6;
        background-color: rgba(255,255,255,0.8);
        display: block;
        position: absolute;
        padding: 14px;
        border-radius: 12px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        visibility: hidden;
    }

    .break:nth-child(n + 2) {
        page-break-before: always;
    }

    /* riskmgt */
    .flex-wrapper {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .risktmgt tr th {
        position: fixed;
        top: 0;
    }

    .risk-assessment {
        width: 190px;
        height: 33px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        justify-content: flex-end;
    }

    .risk-assessment .button {
        border-radius: 0;
    }

    .risk-assessment .button:nth-child(2) {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    .risk-assessment .button:nth-child(3) {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .risk-assessment p {
        padding: 0px 12px;
    }

    .description {
        width: calc(100% - 24px);
        display: block;
        margin: 10px 0 10px 10px;
        float: left;
    }

    .check-symbol {
        content: url('../img/icons/check-green.svg');
        width: 20px;
        height: 20px;
        opacity: 0.9;
    }

    .wrong-symbol {
        content: url('../img/icons/wrong-red.svg');
        width: 20px;
        height: 20px;
        opacity: 0.5;
    }

    .postpone-symbol {
        content: url('../img/icons/pause-blue.svg');
        width: 20px;
        height: 20px;
        opacity: 0.5;
    }

    .not-applicable-symbol {
        content: url('../img/icons/na.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .level1 {content: url('../img/icons/warning1.svg'); }
    .level2 {content: url('../img/icons/warning2.svg'); }
    .level3 {content: url('../img/icons/warning3.svg'); }
    .level4 {content: url('../img/icons/warning4.svg'); }
    .level5 {content: url('../img/icons/warning5.svg'); }

    .risk-symbol {
        opacity: 0.8;
        width: 20px;
        height: 20px;
    }

    /* measure detail */
    .measure-symbol {
        content: url('../img/icons/tools.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .image-symbol {
        content: url('../img/icons/image.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .document-symbol {
        content: url('../img/icons/document.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .note-symbol {
        content: url('../img/icons/note.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .pla-symbol {
        content: url('../img/icons/schedule.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .uit-symbol {
        content: url('../img/icons/tools.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .cor-symbol {
        content: url('../img/icons/rewind.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .con-symbol {
        content: url('../img/icons/search.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }

    .afr-symbol {
        content: url('../img/icons/check.svg');
        width: 20px;
        height: 20px;
        opacity: 0.3;
    }


    .image-slider img {
        width: 100%;
        margin: 10px 0;
        position: relative;
    }

    .slides1, .slides2 {
        display: none;
    }



    .left-arrow,
    .right-arrow  {
        font-family:'Courier New', Courier, monospace;
        font-size: 14px;
        height: 20px;
        padding: 3px 6px;
        transform: translate(0, -1px);
        color: #444;
        text-align: center;
    }

    .has-nav {
        padding-bottom: 60px;
    }

    .no-padding {
        padding: 0;
    }

    .content-nav {
        position: absolute;
        bottom: 30px;
        left: 30px;
    }

    /* content blocks */
    .content-block h4 {
        margin: 10px 0;
    }

    .vertical-gap {
        gap: 30px 30px;
    }


    .half-width {
        margin: 0;
        padding: 0;
        max-width: 50%;
        width: calc(50% - 30px);
    }

    .content-block textarea {
        width: 100%;
    }

    .content-block-heading {
        margin-bottom: 10px;
        display: flex;
        flex-flow: row nowrap;
    }

    .has-margin {
        margin-bottom: 30px;
    }

    .has-margin-top {
        margin-top: 20px;
    }

    .flex-split {
        display: flex;
        flex-flow: column wrap;
        gap: 30px 0;
    }

    /* notifications */
    #link-notifications {
        position: relative;
    }

    .counter-target {
        position: relative;
    }

    .notification-counter {
        width: fit-content;
        min-width: 16px;
        height: 16px;
        line-height: 12px;
        padding: 0 4px;
        font-size: 10px;
        border-radius: 8px;
        color: #fff;
        background-color:rgb(255, 60, 0);
        text-align: center;
        position: absolute;
        left: 60px;
        padding-top: 2px;
        border: rgb(180, 30, 30);
    }

    .notification {
        display: flex;
        border: 1px solid #D6D6D6;
        flex-flow: column nowrap;
        justify-content: space-between;
        color: #1d1d1d;
        border-radius: 18px;
        margin-bottom: 20px;
        padding: 24px;
        width: 100%;
    }

    .notification p {
        font-size: 14px;
    }

    .notification-header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
    }

    .notification-time {
        width: calc(20% + 60px);
        padding: 12px;
        text-align: right;
        color: rgb(36,132,198);
        text-transform: lowercase;
    }

/* Instrument */

    .instrument {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        height: 100%;
        position: relative;
        color: #454545;
    }

    .instrument p,
    .instrument li  {
        font-size: 16px;
        line-height: 22px;
    }

    .instrument ul,
    .instrument ol {
        list-style-position: outside;
        padding-left: 50px;
    }

    .instrument-side {
        width: 24%;
        float: left;
        margin-right: 20px;
        height: 100%;
    }

    .instrument-side p {
        border: 1px solid #D6D6D6;
        width: 100%;
        height: fit-content;
        padding: 24px;
        margin: 20px;
        font-style: italic;
        border-radius: 10px;
    }

    .instrument-main {
        width: calc(70% - 120px);
        float: left;
        margin: 20px 40px 20px 40px;
        padding-left: 40px;
        border-left: 1px solid #5b5b5b;
        line-height: 22px;
    }

    .instrument img {
        max-width: 100%;
    }

    .instrument h1 {
        line-height: 40px;
    }

    .instrument h2 {
        margin: 25px 0 10px 0;
    }

    .instrument h3 {
        margin: 15px 0 12px 0;
    }

    .instrument-table {
        border-spacing: 0px;
        width: 100%;
    }

    .instrument-table td {
        font-size: 16px;
        line-height: 22px;
        padding: 12px;
    }

    .vert-table tr th {
        writing-mode: vertical-rl;
        transform:rotate(180deg);
        border: 0px;
        border-bottom: 1px solid #D6D6D6;
        border-top: 1px solid #D6D6D6;
    }

    .vert-table tr th:first-child {
        border-radius: 0;
        border-bottom-right-radius: 14px;
        border: 1px solid #D6D6D6;
        border-left: 0px;
    }

    .vert-table tr th:last-child {
        border-radius: 0;
        border-bottom-left-radius: 14px;
        border: 1px solid #D6D6D6;
        border-right: 0px;
    }

    .instrument-table th {
        font-size: 14px;
        font-size: 16px;
        line-height: 22px;
        padding: 10px;
    }

    .instrument-table td {
        white-space: unset;
    }

    .instrument-table td:last-child,
    .instrument-table th:last-child {
        text-align: left;
    }

    .reference {
        display: inline-block;
        transform: translateY(-10px);
        font-size: 10px;
    }

    /* E-learning */

    video {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }

    .elearning-header {
        background: url('../img/elearning-bg.jpg') rgba(36,132,198, 0.5);
        background-size: 100% auto;
        background-position: center;
        background-blend-mode: multiply;
        border-radius: 18px;
        width: 100%;
        height: 300px;
        display: flex;
        flex-flow: row wrap;
        justify-self: center;
        padding: 0px;
        margin-bottom: 30px;
    }

    .elearning-header-left {
        width: 38%;
        height: 100%;
        background-image: url('../img/elearning-bg-left.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position-x:center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
        text-transform: uppercase;
        z-index: 10;
    }

    .elearning-header-left h1 {
        font-family: "Tilt Warp";
        font-weight: 400;
        font-size: 62px;

        line-height: 60px;
        padding-top: 4px;
        z-index: 10;
    }

    .elearning-header-right {
        width: 62%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: left;
        align-items: center;
        text-align: left;
        padding-left: 10%;
        padding-right: 10%;
        z-index: 10;
    }

    .elearning-header-right h2,
    .course-text h2 {
        position: relative;
        font-family: "Tilt Warp";
        font-weight: 400;
        font-size: 30px;
        line-height: 28px;
        z-index: 10;
    }

    .elearning-header-right p {
        position: relative;
        font-size: 20px;
        line-height: 24px;
        padding-top: 16px;
        z-index: 10;
    }

    .course-icon {
        width: 100%;
        height: 160px;
        overflow: hidden;
    }

    .course-icon img {
        width: 100%;
        height: auto;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    .course-text {
        height: 100%;
        padding: 40px;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
    }

    .course-text p,
    .course-status-text p {
        font-size: 16px;
        line-height: 26px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .course-status-text h2 {
        margin-bottom: 20px;
    }

    .course-diamond {
        width: 20px;
        height: 20px;
        transform: translateY(4px);
        display: inline-block;
    }

    .course-credits {
        margin-top: 6px;
        margin-bottom: 20px;
    }

    .course-header {
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        display: flex;
        flex-flow: row wrap;
        justify-self: center;
        padding: 0px;
        border-radius: 18px;
        background-color: rgb(36,132,198);
        margin-bottom: 30px;
    }

    .course-header-background {
        position: absolute;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0.6;
    }

    .course-card {
        padding: 0px;
    }

    .course-status-card {
        display: flex;
        flex-flow: column;
        gap: 28px;
        width: 320px;
        height: fit-content;
        padding: 40px;
    }

    .course-status-text {
        width: 100%;
        height: 100%;
        padding: 40px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-content: center;
    }

    .course-price {
        margin-top: 10px;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        gap: 0px;
    }

    .course-start {
        text-align: center;
        width: 100%;
        display: flex;
        height: 44px;
        flex-flow: row wrap;
        padding-top: 14px;
        justify-self: center;
        justify-content: center;
    }
    .course-start img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    .course-table-container {
        flex-basis: calc(100% - 350px);
    }

    .course-table-container table tr td {
        text-overflow: ellipsis;
    }

    .course-table-container a {
        float: right;
    }

    .lesson-wrapper {
        display: flex;
        gap: 30px;
        flex-flow: row nowrap;
    }

    .lesson-table {
        width: 350px;
    }

    .lesson-table tr th:last-child,
    .lesson-table tr td:last-child {
        text-align: left;
    }

    .lesson-table td {
        max-width: 320px;
        padding: 10px;
    }

    .lesson-list-item {
        max-width: 280px;
        line-height: 20px;
        word-break: break-word;
        white-space: initial;
    }

    .lesson-list-item img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        transform: translateY(4px)
    }

    .lesson-row td {
        border-top: 2px solid rgb(36,132,198);
        background-color: #EBF2FA;
    }

    .lesson-row-white td {
        border-top: 2px solid rgb(36,132,198);
        background-color: #fff;
    }

    .course-list-small {
        width: 100%;
        overflow-x: hidden;
    }

    .lesson-header {
        position: relative;
        width: 100%;
        height: 150px;
        border-radius: 18px;
        overflow: hidden;
        display: flex;
        flex-flow: row wrap;
        justify-self: center;
        padding: 0px;
        background-color: rgb(36,132,198);
        margin-bottom: 30px;
    }

    .lesson-header .elearning-header-right {
        padding-left: 50px;
        padding-right: 50px;
    }

    .quiz-row td {
        padding-left: 30px;
        border: 0px;
    }

    .lesson-material {
        display: flex;
        flex-flow: column nowrap;
        gap: 10px;
        max-width: 80%;
        flex-grow: 4;
        width: fit-content;
    }

    .question {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 16px;
        width: fit-content;
    }
    .question p,
    .lesson-material b {
        font-size: 16px;
        line-height: 20px;
        width: fit-content !important;
    }

    .answers {
        display: flex;
        flex-flow: row nowrap;
        gap: 10px;
        margin-bottom: 10px;
        width: 100%;
        font-size: 16px;
        width: fit-content;
    }

    .answers p {
        font-size: 14px;
    }

    .quiz-answer {
        margin: 20px 10px 20px 0;
        font-size: 16px;
        border: 1px solid #d4d4d4;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
    }

    .quiz-answer:hover {
        color: #005dae;
    }

    .answer-container {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100vw;
        height: 100vh;
        backdrop-filter: blur(4px) contrast(100%);
    }

    .answer-dialogue {
        width: 400px;
        height: 200px;
        border-radius: 14px;
        background-color: #fff;
        padding: 30px;
    }

    .answer-dialogue p {
        font-size: 16px;
        line-height: 20px;
    }

/* 05. tablet */

@media screen and (max-width: 1400px){
    .app-container {
        margin: 0;
        height: 100%;
        width: 100%;
        overflow-x: scroll;
    }

    #side-content {
        height: 100%;
    }

    #resize-link {
        bottom: 30px;
    }

    .process-line {
        visibility: collapse;
        width: 0px;
        height: 0px;
        position: absolute;
    }

    .flex-grow-wide {
        flex-basis: 100%;
        max-width: 100%;
    }

    .drop-margin-top {
        margin-top: 0px;
    }

    .drop-margin-bottom {
        margin-bottom: 0px;
    }

    .flex-shrink-narrow {
        flex-basis: 45%;
        max-width: 50%;
    }

    .flex-split {
        flex-flow: row nowrap;
        display: flex;
        background-color: rgba(0,0,0,0);
        padding: 0;
    }

    .inner-content {
        flex-basis: 50%;
        background-color: #fff;
        padding: 30px;
    }

    .inner-content:first-child {
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
    }

    .inner-content:nth-child(2) {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
        padding-left: 40px;
    }

    .content-block textarea {
        height: 100px;
    }

    .risk-counter {
        margin-right: 12px;
    }

    .wrap {
        flex-flow: row wrap;
    }

    .instrument-side p {
        font-size: 14px;
    }

    .elearning-header,
    .course-header {
        height: 200px;
    }

    .elearning-header-left h1 {
        font-size: 55px;
        line-height: 52px;
    }
}

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

    .third-wrapper {
        flex-flow: column nowrap;
    }

    .card-third {
        width: 100%;
    }
}

/* 06. mobile */

.mobile-menu-icon,
.mobile-menu-logo {
    visibility: hidden;
    width: 0px;
    height: 0px;
}

.mobile-header {
    display: flex;
    flex-flow: row nowrap;
    background-color: #F5F5F5;
    border: 1px solid #D6D6D6;
    padding: 5px 8px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    gap: 10px;
}

.mobile-header p {
    overflow: ellipsis;
}

.mobile-risk-card {
    border: 1px solid #D6D6D6;
    border-top: 0px;
    margin-bottom: 10px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.mobile-risk-text {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
}

.mobile-risk-text .right {
    justify-content: flex-end;
}

.mobile-evidence {
    display: flex;
    flex-flow: row nowrap;
    margin: 4px;
    width: calc(100% - 8px);
    border: 1.5px solid #4996EA;
    border-radius: 13px;
    background: #C1E4F9;  /* fallback for old browsers */
    background: -webkit-linear-gradient(180deg, #fff, #F0FCFF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(180deg, #fff, #F0FCFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.mobile-alternative::before {
    border-left: 1.5px solid #4996EA;
    height: 100%;
    width: 24px !important;
    padding-left: 7px;
    padding-top: 55px;
    content: url('../img/icons/alternative.svg');
    opacity: 0.5;
    display: inline-block;
}


.evidence-link-mobile {
    width: 90%;
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    align-content: left;
    justify-content: left;
    padding: 5px 0;
}

.evidence-link,
.evidence-link:visited {
    color: #000;
    width: 100%;
}

@media screen and (max-width: 700px){
    html {
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }

    .instrument-side {
        visibility: hidden;
        display: none;
    }

    .instrument-main {
        width: 100%;
        float: left;
        margin: 0;
        padding-left: 0;
        border-left: None;
        line-height: 22px;
    }



    .app-container {
        height: 100%;
    }

    #side-content {
        max-width: 100% !important;
        height: 100%;
        overflow: auto;
    }

    /* top menu buttons */
    .mobile-menu-icon {
        visibility: visible;
        line-height: 34px;
        font-size: 20px;
        height: 36px;
        width: 36px;
        top: 15px;
        left: 15px;
        position: absolute;
        color: #5b5b5b;
        cursor: pointer;
        z-index: 150000;
        text-align: center;
    }

    .mobile-menu-text {
        font-size: 9.4px;
        line-height: 2px;
        margin: 0;
    }

    .mobile-menu-logo {
        visibility: visible;
        height: 30px;
        width: 40px;
        top: 20px;
        right: 15px;
        position: absolute;
        text-align: center;
        z-index: 110;
    }

    .tabs {
        padding-left: 0;
        min-width: auto;
    }

    .mobile-menu-logo img {
        height: 30px;
    }

    /* hidden elements */
    #resize-link {
        width: 0px;
        visibility: hidden;
    }

    .menu-logo {
        height: 10px;
        visibility: hidden;
        margin-bottom: 0px;
    }

    /* hidden menu */
    .side-bar {
        width: 66%;
        height: 100%;
        position: fixed;
        visibility: hidden;
        z-index: 100000;
    }

    .side-bar::after{
        content: " ";
        width: 34%;
        height: 100%;
        backdrop-filter: blur(4px) contrast(100%);
        -webkit-backdrop-filter: blur(4px) contrast(100%);
        display: inline-block;
        position: fixed;
        top: 0px;
        right: 0px;
    }

    .collapse .menu-link,
    .expand .menu-link {
        width: 100%;
    }

    .menu-link {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        width: 100%;
        height: 53px;
        padding: 0;
    }

    .link-icon {
        height: 18px;
        width: 18px;
        margin-left: 24px;
    }

    .link-label,
    .collapse .link-label {
        visibility: hidden;
        font-size: 16px;
        line-height: 20px;
        padding: 20px 12px;
    }

    .menu-button {
        margin: 20px;
        padding-top: 20px;
    }

    /* top menu */
    .top-menu {
        visibility: hidden;
        width: 0px;
        z-index: 150000;
        position: absolute;
        right: 70px;
        top: 15px;
    }

    /* titles */
    .pagetitle {
        position: relative;
        top: 45px;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    .title {
        overflow: hidden;
        white-space: nowrap;
    }
    .title h3 {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pagetitle h3 {
        margin: 0;
        line-height: 24px;
        font-size: 15px;
    }

    .pagetitle h4 {
        margin: 0;
        line-height: 20px;
    }

    h3 {
        font-size: 15px;
    }

    .top-bar {
        padding: 20px;
        margin-bottom: 20px;
        height: max-content;
    }

    /* headings */
    .head-container {
        position: relative;
        margin-top: 10px;
        padding: 0 20px;
        width: 100%;
        overflow: visible;
    }

    .heading {
        padding: 0px;
    }

    .third-wrapper {
        flex-flow: column;

    }

    .card-third {
        flex-basis: 100%;
        width: 100%;
    }

    .heading-buttons {
        flex-flow: row wrap;
        width: 100%;
        justify-content: flex-start;
        gap: 5px;
        margin-bottom: 10px;
    }

    .break {
        width: 80%;
        flex-grow: 3;
    }

    /* tabs */
    .tabs {
        overflow-x: scroll;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .tab {
        font-size: 12px;
    }

    .filter {
        height: 45px;
        display: flex;
        gap: 10px;
        flex-flow: row nowrap;
        align-items: flex-start;
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        background-color: #EBF2FA;
        max-width: 100%;
    }

    .tab-scrolling {
        margin: 0 0 20px 0;
    }

    .filter {
        margin: 0px 25px;
    }

    .tab-scrolling::before,
    .tab-scrolling::after,
    .filter::before,
    .filter::after {
        content: '\25B8';
        color: #D6D6D6;
        width: 3px;
        position: absolute;
        margin-top: 35px;
        font-size: 16px;
    }

    .filter::before,
    .filter::after {
        margin-top: 2px;
    }

    .tab-scrolling::before,
    .filter::before {
        left: 10px;
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }

    .tab-scrolling::after {
        right: 10px;
    }

    .filter::before {
        left: -10px;
        top: -10px;
    }

    .filter::after {
        right: -10px;
        top: -10px;
    }

    /* content */
    .contents {
        height: calc(100% - 100px);
    }

    .content-heading {
        flex-flow: row wrap;
        gap: 10px;
    }

    .button {
        white-space: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        height: 28px;
    }

    .square {
        height: 32px;
        width: 32px;
    }

    .button::before {
        height: 12px;
        width: 12px;
    }

    .building-status p {
        font-size: 12px;
    }

    .phase span {
        flex-flow: row wrap;
        justify-content: flex-start;
    }

    .phase p {
        width: auto;
    }

    .inner {
        border-radius: 0px;
    }

    .card {
        width: 100%;
        flex-basis: 100%;
    }

    .building-card {
        min-width: 100%;
        width: 100%;
        flex-basis: 100%;
    }

    .target {
        margin: 0 20px 20px 20px;
    }

    .card-main-text {
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 65px);
    }

    .has-border {
        padding: 20px;
    }

    .company-card-text {
        margin-left: 10px;
    }

    /* other */

    .testmgt select {
        width: 100px;
        height: 28px;
        font-size: 13px;
    }

    #search {
        width: 120px;
        height: 28px;
        transform: translateY(-2px);
    }

    #search::placeholder {
        font-size: 13px;
    }

    .app-background {
        width: 100vw;
        height: 100%;
    }

    .form-instance, .disclaimer {
        width: 100%;
        margin: 0;
    }

    .login-container {
        width: 100%;
        height: 100%;
        overflow: auto;
        flex-flow: row wrap;
        background-size: cover;
        margin: 0;
        box-shadow: 0;
    }

    .login-log {
        margin: 0;
    }

    .version {
        position:static;
        margin-top: 40px;
    }

    .loading {
        margin-top: 30%;
    }

    .dialogue-background {
        align-items:flex-start;
        justify-content: center;
    }

    .disclaimer {
        padding: 40px 50px;
    }

    #id_username, #id_password {
        width: 180px;
    }

    .scroll-column {
        position: relative;
        padding-left: 40px;
    }

    .half-width {
        max-width: 100%;
        width: 100%;
    }

    .risk-counter {
        margin-right: 10px;
    }

    .company-card-text {
        width: calc(100% - 80px)
    }

    /* instrument */
    .instrument-main {
        margin: 20px 0 20px 0;
    }

    /* buttons and images */
    .very-large {
        width: 55px;
        padding: 0px;
    }

    .round-xlarge {
        width: 50px;
        height: 50px;
        margin-right: 5px;
    }

    .large {
        margin-bottom: 5px;
        height: 28px;
        font-size: 14px;
        border-radius: 7px;
        padding: 6px 10px;
    }

    .medium {
        height: 22px;
        font-size: 14px;
        border-radius: 5px;
        padding: 5px 8px;
        line-height: 13px;
    }

    .small {
        height: 24px;
        padding: 4px 9px;
        font-size: 14px;
        line-height: 16px;
    }

    .no-padding {
        padding: 0;
        margin-top: 0;
        margin-bottom: 2px;
        margin-right: 2px;
    }

    .has-margin-top {
        margin-top: 10px;
    }

    .content-block {
        flex-basis: 100%;
    }

    .flex-shrink-narrow {
        max-width: 100%;
    }

    .file-table {
        margin-left: 0;
    }

    .dialogue-banner {
        width: 100%;
        border-radius: 0px
    }

    .dialogue-icon {
        top: 0px;
        margin-left: calc(50% - 40px);
        margin-right: calc(50% - 40px);
    }

    .full-width b {
        width: 100%;
    }

    .impression {
        margin-bottom: 20px;
    }

    .card-header {
        width: 100%;
        color: #fff;
        padding: 12px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .image-text-mobile {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .flex-spread {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }

    .card-header p {
        color: #AFD5F1;
        font-size: 14px;
        margin-left: 6px;
        font-weight: 700;
    }

    .mobile-evidence-button {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
    }

    .description-mobile {
        padding: 10px 0;
        font-style: italic;
    }

    label[for^="upload-mobile-evidence"] {
        display: inline-block;
        cursor: pointer;
    }

    h2 {
        font-size: 14px;
    }

    .wrap {
        flex-flow: column wrap;
    }

    .flex-split {
        flex-flow: column wrap;
        gap: 20px
    }

    /* notifications */
    #notification-counter {
        right: 52px;
    }

    .notification {
        padding: 15px;
    }

    .notification a,
    .notification p {
        font-size: 14px;
    }

    /* elearning */
    .elearning-header {
        height: 400px;
        background-size: cover;
    }

    .course-header {
        height: 480px;
        background-size: cover;
    }

    .elearning-header-left {
        margin-top: 10px;
    }


    .elearning-header-right {
        max-height: 100%;
    }

    .elearning-header-left,
    .elearning-header-right,
    .course-header-left,
    .course-header-right {
        width: 100%;
        height: 200px;
    }

    .course-table-container,
    .course-table-container table {
        flex-basis: 100%;
    }

    .lesson-wrapper {
        flex-flow: column nowrap;
    }

    .lesson-table {
        margin-left: 0;
    }

    .lesson-material {
        max-width: 100%;
    }
}

@media screen and (max-width: 320px){
}

/* animations */
@keyframes menu-grow {
    from {width: 120px;}
    to {width: 320px;}
}

@keyframes menu-shrink {
    from {width: 320px;}
    to {width: 120px;}
}

@keyframes wait-appear {
    0%, 50% {visibility: hidden;}
    51% {visibility: visible;}
    100% {visibility: visible;}
}

@keyframes flicker {
    0% {opacity: 1;}
    10% {opacity: 0;}
    20% {opacity: 1;}
    30% {opacity: 0;}
    40% {opacity: 1;}
    50% {opacity: 0;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    80% {opacity: 1;}
    90% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes GenerativeAI {
    0% {width:0%; overflow:hidden;}
    80% {width:50%; overflow:hidden;}
    100% {width:100%; overflow:hidden;}
}