@import url('jsonmarkup.css');
@import url('twin.css');
@import url('themes/baseTheme.css');

/*=========================================================================================================================================================================================================================*/
/* GENERAL */
/*=========================================================================================================================================================================================================================*/

* {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    color: white;
    font-family: 'Nunito Sans',sans-serif;
    font-size: 10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: overlay;
}

    body::-webkit-scrollbar-track {
        background-size: 100vw 100vh;
        background-position: right;
    }

    body::-webkit-scrollbar {
        width: 10px;
    }

    body::-webkit-scrollbar-thumb {
        border-radius: 4px;
    }

app {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/*=========================================================================================================================================================================================================================*/
/* BACKGROUND */
/*=========================================================================================================================================================================================================================*/

.app-general-background-container {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.app-general-background-gradient, .app-general-background-focus, .app-general-background-lines, .app-general-background-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.app-general-background-gradient {
}

.app-general-background-lines {
    background: url(../img/general/BackgroundLines.svg) repeat;
    background-size: 1920px;
    background-position: center;
    mix-blend-mode: multiply;
    filter: blur(1px);
}

.app-general-background-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: url(../img/general/BackgroundPatterns.svg) center center / 150px repeat;
    mix-blend-mode: soft-light;
    filter: blur(0.4px);
}

/*=========================================================================================================================================================================================================================*/
/* COMMON ELEMENTS */
/*=========================================================================================================================================================================================================================*/

.app-general-main-button-container {
    width: 100%;
    text-decoration: none;
}

.app-general-main-button-short-container {
    text-decoration: none;
    width: min-content;
    background-color: transparent;
    border: none;
    outline: 0;
    padding: 0px;
    margin: 0px;
}

.app-general-main-button-icon {
    width: 12px;
    min-width: 12px;
    margin-right: 6px;
}

.app-general-divider {
    margin-top: 50px;
}

.app-general-margin-applied {
    margin-bottom: 15px;
}

.app-general-common-displaced-icon {
    width: 14px;
    min-width: 14px;
    margin-right: 3px;
    transform: translateY(3px);
    cursor: pointer;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.app-general-search-input {
    width: 100%;
    height: 34px;
    background-color: transparent;
    border: none;
    outline: 0;
    padding: 0 15px;
    font-size: 12px;
    color: inherit;
}

.app-general-relevant-info-line:not(:last-of-type) {
    margin-bottom: 10px;
}

.app-general-relevant-info-container-short-collapsed .app-general-relevant-info-line {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px;
}

.app-general-search-input[type="search"] {
    padding: 0px 33px 0 15px;
}

.app-general-select-input-container, .app-general-select-table-input-container {
    position: relative;
    width: 100%;
    background-color: transparent;
    border: none;
    outline: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px;
    cursor: pointer;
}

.app-general-select-input-container {
    height: 34px;
}

.app-general-text-area-container {
    position: relative;
    width: 100%;
    height: 80px;
}

.app-general-select-table-input-container {
    height: 30px;
}

.app-general-file-input-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 6px 6px 6px 15px;
}

.app-general-file-input-text {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
}

.app-general-file-input-container input, .app-general-file-type-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: pointer;
}

.app-general-main-button-frame-short-content .app-general-main-button-short-icon {
    width: 14px;
    min-width: 14px;
    margin-right: 6px;
}

.app-general-select-input {
    position: relative;
    height: 34px;
    width: 100%;
    background-color: transparent;
    border: none;
    outline: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    padding: 0px 40px 0px 15px;
    margin: 0px;
    cursor: pointer;
}

    .app-general-select-input::-webkit-inner-spin-button, .app-general-select-input::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

.app-general-input, .app-general-table-input {
    position: relative;
    width: 100%;
    background-color: transparent;
    border: none;
    font-size: 12px;
    padding: 0px 40px 0px 15px;
    margin: 0px;
    outline: 0;
    min-width: 80px;
    cursor: pointer;
}

.app-general-text-area {
    background-color: transparent;
    padding: 10px 15px;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0px;
    outline: 0;
    resize: none;
}

.app-general-file-input {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0px;
    outline: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

.app-general-file-input-hidden {
    display: none;
}

.app-general-input {
    height: 34px;
}

.app-general-table-input {
    height: 30px;
}

.app-general-select-list-item {
    padding: 6px 15px;
    font-size: 12px;
    width: 100%;
    cursor: pointer;
}

    .app-general-select-list-item:first-child {
        padding: 10px 15px 6px 15px;
    }

    .app-general-select-list-item:last-child {
        padding: 6px 15px 10px 15px;
    }

.app-general-select-list-item-checkbox {
    margin: 0 8px 0 0;
    transform: translateY(2px);
}

.app-general-table-cell .app-general-table-item, .app-general-table-cell .app-general-table-item-end {
    padding: 8px;
    display: flex;
    flex-direction: row;
}

.app-general-table-item-long {
    width: 100%;
    padding: 8px;
    display: flex;
    flex-direction: row;
    min-width: 150px;
}

.app-general-table-cell-short .app-general-table-item {
    padding: 8px 2px 8px 12px;
    display: flex;
    flex-direction: row;
}

.app-general-table-item-input-container {
    display: flex;
    flex-direction: row;
    padding: 2px 6px;
    grid-gap: 10px;
}

.app-general-table-item-buttons-container, .app-general-table-item-end-buttons-container {
    display: flex;
    flex-direction: row;
    padding: 6px 12px;
    grid-gap: 10px;
}

.app-general-table-item-end-buttons-container {
    justify-content: flex-end;
}

.app-general-table-header-cell .app-general-table-item, .app-general-table-header-cell .app-general-table-item-end {
    padding: 12px;
    display: flex;
    flex-direction: row;
}

.app-general-table-cell .app-general-table-item, .app-general-table-cell .app-general-table-item-end {
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    text-decoration: none;
}

.app-general-table-item-end {
    justify-content: flex-end;
}

.app-general-table-icon, .app-general-table-item-icon, .app-general-table-item-icon-right {
    width: 14px;
    min-width: 14px;
}

.white-labelling-hoverable-object.app-general-table-icon {
    cursor: pointer;
}

.app-general-table-item-icon {
    margin-right: 8px;
}

.app-general-table-item-icon-right {
    margin-left: 8px;
    cursor: pointer;
}

.app-general-table-item-text {
}

.app-general-table-item-text-bold {
    font-weight: bold;
}

.app-general-table-item-text-no-wrap {
    white-space: nowrap;
}

.app-general-table-item-text-break-word {
    word-break: break-word;
}

.app-general-geo-buttons-menu-spacing {
    transition: 0.5s;
    transform: rotateX(-80deg) rotateY(2deg) translateY(15px);
    opacity: 0;
    margin-top: 8px;
}

.app-general-company-panel-plain-text {
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
}

/*=========================================================================================================================================================================================================================*/
/* NAVIGATION PANEL */
/*=========================================================================================================================================================================================================================*/

.app-general-navigation-panel-button {
    text-decoration: none;
}

    .app-general-navigation-panel-button:nth-of-type(3) {
        transform: translateX(-20px);
    }

    .app-general-navigation-panel-button:nth-of-type(4) {
        transform: translateX(-40px);
    }

    .app-general-navigation-panel-button:nth-of-type(5) {
        transform: translateX(-60px);
    }

    .app-general-navigation-panel-button:nth-of-type(6) {
        transform: translateX(-80px);
    }

    .app-general-navigation-panel-button:nth-of-type(7) {
        transform: translateX(-100px);
    }

    .app-general-navigation-panel-button:nth-of-type(8) {
        transform: translateX(-120px);
    }

/*=========================================================================================================================================================================================================================*/
    /* GEO SPATIAL MENU CONTEXT */
/*=========================================================================================================================================================================================================================*/

    .app-general-geo-spatial-selection-pop-up-content {
        pointer-events: all;
        transform: translateY(-52px);
    }

    .app-general-geo-spatial-selection-pop-up {
        position: relative;
        height: 180px;
        width: 180px;
        pointer-events: none;
    }

    .app-general-geo-spatial-selection-pop-up-name-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .app-general-geo-spatial-selection-pop-up-name-content {
        position: relative;
    }

    .app-general-geo-spatial-selection-pop-up-name-frame {
        position: absolute;
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .app-general-geo-spatial-selection-pop-up-name-text-container {
        position: relative;
        height: 100%;
        padding: 95px 15px 0px 15px;
        min-width: 112px;
        max-width: 200px;
        transition: 0.2s;
    }

    .app-general-geo-spatial-selection-pop-up-content:hover .app-general-geo-spatial-selection-pop-up-name-text-container {
        max-width: 112px;
    }

    .app-general-geo-spatial-selection-pop-up-name-text {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-general-geo-spatial-selection-pop-up-name-left-frame {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        line-height: 0px;
        width: calc(50% - 40px);
        overflow: hidden;
    }

    .app-general-geo-spatial-selection-pop-up-name-center-frame {
        display: flex;
        flex-direction: row;
        justify-content: center;
        line-height: 0px;
        width: 80px;
        overflow: hidden;
    }

    .app-general-geo-spatial-selection-pop-up-name-right-frame {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        line-height: 0px;
        width: calc(50% - 40px);
        overflow: hidden;
    }

    .app-general-geo-spatial-selection-pop-up-input-frame {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .app-general-geo-spatial-selection-pop-up-input-frame-graphic, .app-general-geo-spatial-selection-pop-up-name-center-frame-graphic, .app-general-geo-spatial-selection-pop-up-name-left-frame-graphic, .app-general-geo-spatial-selection-pop-up-name-right-frame-graphic {
        width: 180px;
        min-width: 180px;
        height: 180px;
        min-height: 180px;
    }

    .app-general-geo-spatial-selection-pop-up-name-center-frame-graphic-icon {
        position: absolute;
        width: 180px;
        min-width: 180px;
        height: 180px;
        min-height: 180px;
    }

    .app-general-geo-spatial-selection-pop-up-input-container {
        position: relative;
        width: 180px;
        padding: 88px 50px 0px 24px;
    }

    .app-general-geo-spatial-selection-pop-up-input {
        width: 100%;
        height: 28px;
        background-color: transparent;
        outline: 0;
        margin: 0px;
        padding: 10px;
        font-size: 11px;
        border: none;
        pointer-events: all;
    }

    .app-general-geo-spatial-selection-pop-up-input-button-icon {
        width: 14px;
        right: 28px;
        top: 94px;
    }

    .app-general-geo-spatial-selection-pop-up-input-button {
        position: absolute;
        right: 23px;
        top: 89px;
        padding: 5px;
        line-height: 0px;
        cursor: pointer;
        pointer-events: all;
    }

.app-general-geo-spatial-selection-pop-up-input-frame-graphic-icon {
    position: absolute;
    width: 180px;
    min-width: 180px;
    height: 180px;
    min-height: 180px;
    top: 0px;
    left: 0px;
}

.app-general-geo-spatial-selection-pop-up-buttons-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: none;
}

    .app-general-geo-spatial-selection-pop-up-content:hover .app-general-geo-spatial-selection-pop-up-buttons-container {
        display: block;
    }

    .app-general-geo-spatial-selection-pop-up-button-container {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(1) {
        animation: firstContextMenu;
        animation-delay: 0.05s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(2) {
        animation: secondContextMenu;
        animation-delay: 0.25s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(3) {
        animation: thirdContextMenu;
        animation-delay: 0.1s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(4) {
        animation: fourthContextMenu;
        animation-delay: 0.2s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(5) {
        animation: fithContextMenu;
        animation-delay: 0.15s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(6) {
        animation: sixthContextMenu;
        animation-delay: 0.3s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-container:nth-child(7) {
        animation: seventhContextMenu;
        animation-delay: 0.35s;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .app-general-geo-spatial-selection-pop-up-button-content {
        width: 180px;
        min-width: 180px;
        height: 180px;
        min-height: 180px;
    }

    .app-general-geo-spatial-selection-pop-up-button {
        pointer-events: all;
        cursor: pointer;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-1, .app-general-geo-spatial-selection-pop-up-button-icon-2, .app-general-geo-spatial-selection-pop-up-button-icon-3, .app-general-geo-spatial-selection-pop-up-button-icon-4, .app-general-geo-spatial-selection-pop-up-button-icon-5, .app-general-geo-spatial-selection-pop-up-button-icon-6, .app-general-geo-spatial-selection-pop-up-button-icon-7, .app-general-geo-spatial-selection-pop-up-button-icon-8 {
        position: absolute;
        width: 16px;
        min-width: 16px;
        height: 16px;
        min-height: 16px;
        pointer-events: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-1 {
        top: 62px;
        right: 26px;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-2 {
        top: 62px;
        left: 26px;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-3 {
        top: 34px;
        right: 46px;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-4 {
        top: 34px;
        left: 46px;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-5 {
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-6 {
        top: 139px;
        left: 63px;
    }

    .app-general-geo-spatial-selection-pop-up-button-icon-7 {
        top: 139px;
        right: 63px;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-1 {
        position: absolute;
        left: 160px;
        top: 28px;
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-2 {
        position: absolute;
        left: 15px;
        top: 46px;
        transform: translateX(-100%);
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-3 {
        position: absolute;
        left: 136px;
        top: -4px;
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-4 {
        position: absolute;
        left: 44px;
        top: -4px;
        transform: translateX(-100%);
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-5 {
        position: absolute;
        left: 50%;
        top: -18px;
        transform: translateX(-50%);
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-6 {
        position: absolute;
        left: 64px;
        top: 162px;
        transform: translateX(-100%);
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-container-7 {
        position: absolute;
        left: 110px;
        top: 162px;
        display: none;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-input-container {
        display: flex;
        flex-direction: row;
    }

    .app-general-geo-spatial-selection-pop-up-button-label {
        position: relative;
    }

    .app-general-geo-spatial-selection-pop-up-button-label-frame {
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: row;
    }

    .app-general-selection-pop-up-button-label-frame-left, .app-general-selection-pop-up-button-label-frame-right {
        display: flex;
        flex-direction: row;
        width: 50%;
        overflow: hidden;
    }

    .app-general-selection-pop-up-button-label-frame-left {
        justify-content: flex-start;
    }

    .app-general-selection-pop-up-button-label-frame-right {
        justify-content: flex-end;
    }

.app-general-selection-pop-up-button-label-frame-left-svg, .app-general-selection-pop-up-button-label-frame-right-svg {
    height: 30px;
    min-height: 30px;
    width: 300px;
    min-width: 300px;
}

.app-general-geo-spatial-selection-pop-up-button-label-content {
    position: relative;
    padding: 8px 15px 0px 15px;
    text-align: center;
    white-space: nowrap;
}

.app-general-geo-spatial-selection-pop-up-button-label-input-label-content {
    position: relative;
    padding: 8px 15px 0px 15px;
    text-align: center;
    white-space: nowrap;
}

.app-general-geo-spatial-selection-pop-up-button-label-input {
    position: relative;
    height: 30px;
    font-size: 10px;
    background-color: transparent;
    border: none;
    outline: 0;
    margin: 0px;
    padding: 12px;
    width: 120px;
}

.app-general-geo-spatial-selection-pop-up-button-label-input-save-content {
    position: relative;
    padding: 8px 7px 8px 5px;
}

.app-general-geo-spatial-selection-pop-up-button-label-input-save {
    width: 14px;
    min-width: 14px;
}

.app-general-geo-spatial-selection-desk-container {
    width: 74px;
    min-width: 74px;
}

.app-general-geo-spatial-selection-desk {
    width: 74px;
    min-width: 74px;
    pointer-events: all;
}

.app-general-geo-spatial-selection-desk-icon {
    position: absolute;
    width: 20px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

.app-general-geo-spatial-selection-desk-name {
    position: absolute;
    width: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
}



@keyframes firstContextMenu {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes secondContextMenu {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes thirdContextMenu {
    0% {
        transform: translateX(20px) translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) translateY(0px);
        opacity: 1;
    }
}

@keyframes fourthContextMenu {
    0% {
        transform: translateX(-20px) translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) translateY(0px);
        opacity: 1;
    }
}

@keyframes fithContextMenu {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes sixthContextMenu {
    0% {
        transform: translateX(-20px) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) translateY(0px);
        opacity: 1;
    }
}

@keyframes seventhContextMenu {
    0% {
        transform: translateX(20px) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) translateY(0px);
        opacity: 1;
    }
}

/*=========================================================================================================================================================================================================================*/
/* TO DELETE */
/*=========================================================================================================================================================================================================================*/
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.alert-3doverlay-danger {
    color: #fff;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    background-color: rgba(255,150,150,0.2)
}


#report-container {
    height: calc(0.5625 * 61vw); /* 16:9 aspect ratio */
}

iframe {
    border: none;
}

@media only screen and (max-width: 574px) {
    #report-container {
        height: calc(0.5625 * 100vw); /* 16:9 aspect ratio */
    }
}

#report-container {
    height: 90vh;
}

.reportContent {
    background-color: #000000;
}

.edit {
    background: rgba(255, 255, 255, 0.66);
    color: #fff;
}

.timeline {
    color: #fff;
    width: 10%;
    position: relative;
    left: 90%;
}

    .timeline .list-group-item.active {
        font-weight: bold;
        font-style: normal;
    }

    .timeline .list-group-item.inactive {
        font-weight: lighter;
        font-style: italic;
    }

    .timeline .list-group-item {
        background: rgba(255, 255, 255, 0.66);
    }