html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
    background: var(--light);
}

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

html {
    position: relative;
    min-height: 100%;
    overflow-x: hidden;
    overflow-x: hidden;
}

/* -- Header -- */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    /*background: var(--primary);
    background: var(--primary-gradient);*/
    color: white;
    font-weight: 500;
    box-shadow: 0 1px 6px 3px rgba(32, 33, 36, .28);
    z-index: 1450;
    position: fixed;
    width: 100vw;
    height: 7dvh;
    top: 0;
    background-color: #00203E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23002950' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23003362' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23003c74' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23004686' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23004F98' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%230057a8' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%230060b8' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%230068c8' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%230071d8' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%230079E8' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
}

header .headerGroup{
    display: flex;
    flex-direction: row;
}

header .siteLogo{
    font-size: 1.5em;
    font-weight: 100;
    font-style: italic;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: flex-end;
}

header .siteLogo i{
    font-size: 1em;
    margin-right: .5em;
    padding-bottom: .15em;
}

header .siteLogo b{
    font-weight: 700;
    font-style: normal;
}

header .viewingAs{
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
}

header .userName{
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 2em;
}

header a {
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--light) !important;
    text-decoration: none;
}

header .viewingAs i {
    font-size: 1.1em;
    margin-right: .3em;
}

header .userName i{
    /*font-size: 1.2em;*/
    /*margin-right: .25em;*/
}

header .maintenanceControl i {
    font-size: 1.2em;
    margin-right: .25em;
}

header i{
    font-size: 1.1em;
    margin-right: .4em;
}

header .headerGroup>div{
    cursor: pointer;
    margin-left: 2em;
    display: flex;
    align-items: center;
}

header .warnings{
    display: flex;
    flex-direction: column;
    padding: .25em 1em;
    align-items: center;
    color: white;
    font-weight: 700;
    background-color: var(--danger);
    border-radius: .25em;
}

header .warnings .warningItem{
    cursor: pointer;
}

header .warningsMobile{
    background-color: var(--danger);
    border-radius: .25em;
    padding: .5em 2em;
    display: none;
    color: white;
}

.notificationButtonNewAlerts {
    position: relative;
}

.notificationButtonNewAlerts::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: var(--danger);
    border-radius: 50%;
    left: -.35em;
    top: -.2em;
}

#NotificationsList .dx-item.dx-list-item {
    width: fit-content;
}

.notificationItem {
    width: 25em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* ------------ */
/* -- Broadcast -- */
.broadcast {
    width: 100%;
    background-color: var(--danger);
    color: white;
    font-weight: 700;
    font-size: 1.5em;
    height: 5dvh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 6px 3px rgba(32, 33, 36, .28);
    position: fixed;
    top: 7dvh;
}

.hidden{
    opacity: 0 !important;
    height: 0px;
}

.broadcast .message {
    white-space: pre;
}

.broadcast .moving{
    -moz-animation: rollingText 25s linear infinite;
    -webkit-animation: rollingText 25s linear infinite;
    animation: rollingText 25s linear infinite;
}

@-moz-keyframes rollingText {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100vw); }
}

@-webkit-keyframes rollingText {
    from {
        -webkit-transform: translateX(100%);
    }
    to { -webkit-transform: translateX(-100vw); }
}

@keyframes rollingText {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100vw);
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
}
/* --------------- */

/* -- Footer -- */
footer {
    background-color: #0c0c0c;
    color: white;
    font-size: .8rem;
    height: 5dvh;
    display: flex;
    align-items: center;
    z-index: 1470;
    position: fixed !important;
    bottom: 0;
}

.footer {
    line-height: unset !important;
}

footer .container {
    display: flex;
    justify-content: center;
}
/* ------------ */

/* -- App -- */
.app {
    margin-top: calc(7dvh + 5dvh);
    display: flex;
    flex-direction: row;
    /*min-height: 88dvh;
    max-height: 88dvh;*/
}

.app:has(#mainMenu.visible) {
    margin-left: 15rem;
}

body:has(.broadcast.hidden) .app {
    margin-top: 7dvh;
}

main {
    /*width: calc(100vw - 10em);*/
}
.app:has(#mainMenu.visible) main {
    width: unset;
}
/* --------- */

/* -- Main Container -- */
.container:has(main) {
    max-width: unset;
    margin-left: 0 !important;
    padding: 1em 5em;
    transition: width .5s;
    width: calc(100vw - 15rem);
    height: 88dvh;
    position: fixed;
    background: var(--light);
    overflow: auto;
    right: 0;
}

body:has(.broadcast:not(.hidden)) .container:has(main){
    height: 83dvh;
}

.app:not(:has(#mainMenu.visible)) .container:has(main){
    width: 100vw;
}

.pb-3{
    padding-bottom: 0 !important;
}

.container.maintenance{
    margin-top: 7dvh !important;
    width: 100vw;
}

.container.login main {
    width: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
/* -------------------- */

/* -- Loading Screen -- */
#loadingScreen {
    pointer-events: none;
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    background: var(--primary);
    background: var(--primary-gradient);
    color: white;
    font-size: 2em;
    opacity: 0;
    transition: opacity .2s;
    z-index: 1460;
}

#loadingScreen.visible{
    opacity: 100;
    z-index: 1460;
    transition: opacity .2s;
    pointer-events: auto;
}

#loadingScreen>div {
    width: 48px;
    height: 48px;
    border: 5px solid white;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
} 
/* -------------------- */

/* -- Main Menu -- */
#mainMenu {
    box-shadow: 0 1px 6px 3px rgba(32, 33, 36, .28);
    height: 88dvh;
    position: fixed;
    width: 15rem;
    left: -16rem;
    transition: left .5s;
    background-color: white;
    z-index: 99;
    background: var(--alt-light);
}

#mainMenuElement {
    /*padding-top: .5em;*/
    width: unset !important;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(88dvh - 5dvh);
}

#mainMenu ul {
    width: 15rem;
}

#mainMenu.visible {
    left: 0;
    transition: left .5s;
}

#mainMenu.visible .menuItem {
    flex-wrap: wrap;
    word-break: break-word;
    text-wrap: pretty;
}

.menuItem {
    margin: .5em 1em;
    font-size: 1.1em;
    overflow: hidden;
    display: flex;
    min-width: 1%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.menuItem .icon:first-child{
    margin-right: .5em;
}

.menuItem .icon:nth-child(2){
    margin-left: .5em;
}

.menuItem.hasAreaName {
    margin-top: 0;
    flex-direction: column;
    align-items: start;
}

.menuItem .areaName {
    display: none;
    text-align: right;
    margin-bottom: .25em;
    font-size: .8em;
    font-weight: 600;
    background-color: var(--disabled);
    padding: .25em .5em;
    border-radius: .5em;
    color: var(--dark);
    width: fit-content;
}

.menuItem.hasAreaName .areaName {
    display: flex;
}

.dx-menu-item:has(.activeRoute){
    background-color: var(--primary-light);
    color: var(--dark) !important;
}

.dx-menu-item:has(.greyedOut){
    color: var(--disabled);
}

#mainMenuSearchWrapper {
    display: flex;
    justify-content: center;
}

#mainMenuSearchContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: .5em 1em;
    border-bottom: 1px solid var(--disabled);
    transition: all .25s;
    width: fit-content;
}

#mainMenuSearchContainer i {
    transition: all .25s;
}

#mainMenuSearchContainer:focus-within {
    border-color: var(--primary-light) !important;
    transition: all .25s;
}

#mainMenuSearchContainer:focus-within>i {
    color: var(--primary-light) !important;
    transition: all .25s;
}

#mainMenuSearchContainer #clearBtn {
    transition: all .25s;
    cursor: pointer;
}

#mainMenuSearchContainer #clearBtn:hover {
    color: var(--primary-light) !important;
    transition: all .25s;
}

#mainMenuSearchBox {
    background-color: inherit;
    background: inherit;
    border: none;
}

/* --------------- */

/* -- Login -- */
.container.login {
    margin-top: 7dvh !important;
    width: unset;
    position: static;
    min-height: 83dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: .25em;
    /*border: .15em solid var(--primary-light);*/
    box-shadow: 0 1px 6px 3px rgba(32, 33, 36, .10);
    align-items: stretch;
    background-color: white;
    overflow: auto;
}

.loginContainer .logo{
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.loginContainer .logo img{
    width: 15em;
}

.loginContainer .formRow>div {
    width: 100%
}

.loginContainer .formRow:last-of-type {
    display: flex;
    justify-content: center;
}

.loginContainer .formRow:last-of-type>div{
    padding: .25em 3em !important;
}

.loginContainer .formRow:not(:last-of-type){
    padding-bottom: 1em;
}

.logoPanel {
    padding: 5em 2em;
    flex: 3;
    height: inherit;
    background-color: white;
}

.formPanel {
    padding: 5em 3em;
    flex: 2;
    color: white !important;
    height: inherit;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00203E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23002950' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23003362' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23003c74' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23004686' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23004F98' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%230057a8' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%230060b8' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%230068c8' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%230071d8' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%230079E8' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 800%;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: center;

}

.formPanel .dx-texteditor-label span {
    color: white;
}

.container.login main {
    overflow: auto;
}
/* ----------- */

/* -- Maintenance Dashboard -- */
.msgBtn {
    margin-left: 1em;
}
/* --------------------------- */

tr:not(.dx-header-row) .dataGrid-metaData {
    color: var(--disabled);
}

.formReadOnlyInfoSection {
    background-color: var(--alt-light);
    padding: .5em 1em !important;
    border-radius: .5em;
}

.formStyledGroup {
    padding: 1em 2em;
    border-radius: .5em;
}

.timeRegBtnGroup {
    padding: 1em 0;
}

.timeRegBtnGroup:not(:last-of-type){
    /*border-bottom: .15em solid var(--neutral);*/
}

.timeRegBtnGroup h2 {
    font-size: 1em;
    color: var(--disabled);
}

.timeRegBtnGroup div[role="button"] {
    width: 50%;
    position: relative;
}

#timeRegBtnBTRD {
    width: 100%;
}

.timeRegBtnGroup div[role="button"]:before {
    background: none;
    border: 2px solid rgba(0,0,0,0);
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: .3em;
}

.timeRegBtnGroup div[role="button"].start:before {
    border-color: #d8fdc5;
}

.timeRegBtnGroup div[role="button"].end:before {
    border-color: #fdc5c5;
}

.timeRegBtnGroup div[role="button"].other:before {
    border-color: #c5defd;
}

.errorTextBox {
    border: solid rgba(0, 0, 0, 0) 2px !important;
    color: var(--danger) !important;
    display: flex;
    align-items: center;
}

#lastVisitedWidgetWrapper {
    display: flex;
}

.lastVisitedItem {
    border-radius: .3em;
    padding: .4em 1.5em;
    cursor: pointer;
    background-color: var(--alt-light);
    color: var(--dark);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.lastVisitedItem:not(:last-of-type){
    margin-right: 1em;
}

.lastVisitedItem:hover {
    background-color: var(--disabled);
}

.lastVisitedItem:hover .lastVisitedItemArea {
    background-color: var(--light);
}

.lastVisitedItemGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lastVisitedItemArea {
    color: var(--alt-dark);
    text-align: right;
    margin-bottom: .25em;
    padding-bottom: .25em;
    font-size: .8em;
    font-weight: 600;
    background-color: var(--disabled);
    padding: .25em .5em;
    border-radius: .5em;
    color: var(--dark);
    width: fit-content;
}

.lastVisitedItem i{
    padding-right: .5em;
    font-size: 1.5em;
}

.titleAndDescIcon {
    padding-right: .5em;
}

.displayNone {
    display: none !important;
}

.width0 {
    width: 0 !important;
    overflow: hidden !important;
    transition: width .5s;
}

.width100 {
    width: 100% !important;
    transition: width .5s;
}

.presenceVisualisation {
    background-color: var(--primary-super-light);
    padding: 10px 20px;
}

/* center align checkboxes in grid */
.grid .dx-datagrid tbody tr td.dx-editor-cell:has(div.dx-widget.dx-checkbox) {
    text-align: center !important;
}