@import "./ROOT.css?v=2833";

* {
    box-sizing : border-box;
    transition-delay           : 0s;
    transition-timing-function : ease-in-out;
    transition-duration        : .25s;
    transition-property        : auto;
    font-size: inherit;
}

html {
    font-family : "Arimo", Arial, sans-serif;
    font-size   : var(--font-size);
    color       : var(--theme-font-1);
}

a {
    text-decoration : none;
    color           : var(--theme-link);
}
a:hover {
    cursor : pointer;
    color  : var(--theme-link-hover);
}
a:active {
    filter : var(--theme-filter-active);
}
a:visited {
    color : var(--theme-link);
}


label {
    font-weight   : bold;
    display       : inline-block;
    max-width     : 100%;
    margin-bottom : var(--std-unit-x2);
}

input[type="radio"] + label {
    font-weight : unset;
}

table {
    border-collapse : collapse;
}
.record table table {
    border-radius    : var(--theme-border-radius);
    background-color : var(--theme-translucent-0);
}

.logo {
    height              : auto;
    background-image    : var(--logo-src);
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : contain;
    grid-area           : logo;
}

.content {
    position  : relative;
    z-index   : var(--z-index-baseline);
    overflow  : auto;
    width     : 100%;
    height    : 100%;
    grid-area : content;
}
.restricted {
    box-shadow: inset 0 0 0 2px var(--theme-accent-8);
    color: var(--theme-accent-8);
    border-radius: Var(--std-unit-x1);
}

.ok {
    font-weight : 700;
    color       : var(--theme-ok-dark);
}
.ok--bg {
    background-color: var(--theme-ok-dark);
}
.error {
    color       : var(--theme-error);
}
.error--bg {
    background-color: var(--theme-error);
}
.error--bg * {
    color: var(--theme-font-on-error);
}

.warning {
    font-style : italic;
    color      : var(--theme-warning);
}
.warning.--dark {
    color      : var(--theme-warning-dark);
}

.warning-large {
    font-size : 1.2rem;
    color     : var(--theme-warning);
}

.response:not(:empty) {
    font-style  : italic;
    max-width   : 200px;
    padding     : var(--std-unit-x3);
    white-space : normal;
    color       : var(--theme-error);
}

.response > * {
    margin : var(--std-unit-x3) 0;
}



.notice {
    font-style : italic;
    color      : var(--theme-notice);
}

.--inline-block {
    display : inline-block;
}
.--flex {
    display: flex;
}

.--inline-flex {
    display : inline-flex;
}

.--grid {
    display: grid;
}

.--inline-grid {
    display : inline-grid;
}

.--min {
    width : min-content !important;
}
.--flat {
    min-height : 0 !important;
}

.--nowrap {
    white-space : nowrap
}


body {
    position              : absolute;
    display               : grid;
    /* overflow              : hidden; */
    width                 : 100%;
    height                : 100%;
    margin                : 0;
    background-image      : var(--bg-src);
    background-repeat     : var(--bg-repeat);
    background-size: cover;
    grid-template-areas   :
            "header header      header"
            "marginL printTitle marginR"
            "marginL body       marginR"
            "footer footer      footer";
    grid-template-columns: 1fr minmax(350px, 1600px) 1fr;
    grid-template-rows: min-content min-content 1fr min-content;
}
body.printing {
    background-image: unset;
    grid-template-columns: 1fr auto 1fr;
}
body.printing > .popup-body {
    max-height: unset;
}

body[data-iframe] {
    width                 : 100%;
    height                : auto;
    margin                : 0;
    padding               : 0;
    background-image      : none !important; /* leave this specification*/
    grid-template-areas   :
        "header"
        "body";
    grid-template-columns : 1fr;
    grid-template-rows    : min-content calc(100vh - 40px);
}

body[data-iframe] > .header {
    border-bottom         : none;
    grid-template-areas   :
        "search_block";
    grid-template-columns : 1fr;
}

body[data-iframe] > .header > * {
    display : none !important;
}

body[data-iframe] > .header > .search {
    display : revert !important;
    width   : min-content;
}

body[data-iframe] > .body {
    padding : 0;
}

body[data-iframe] > .body > .nav {
    display : none;
}

body[data-iframe] > .footer {
    display : none;
}

iframe {
    border  : none;
    outline : none;
}

body > .body {
    display               : grid;
    overflow              : auto;
    overflow-x            : hidden;
    width                 : 100%;
    height                : 100%;
    padding               : 10px;
    grid-area             : body;
    grid-template-areas   : "nav" "content";
    grid-gap              : 0;
    grid-template-columns : 1fr;
    grid-template-rows    : min-content 1fr;
}

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

.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}
.justify-end {
    justify-content: flex-end;
}

.flex.--separator-fslash > *:not(:only-child):not(:last-child):after {
    content: '/';
    padding-left: var(--std-unit-x3);
}
.flex.--separator-bslash > *:not(:only-child):not(:last-child):after {
    content: '\005C';
    padding-left: var(--std-unit-x3);
}
.flex > * {
    margin : 0 var(--std-unit-x1);
}

.grid { display: grid;}
.grid.--2col { grid-template-columns: repeat(2, 1fr); }
.grid.--3col { grid-template-columns: repeat(3, 1fr); }
.grid.--4col { grid-template-columns: repeat(4, 1fr); }
.grid.--5col { grid-template-columns: repeat(5, 1fr); }
.grid.--6col { grid-template-columns: repeat(6, 1fr); }
.grid.--7col { grid-template-columns: repeat(7, 1fr); }
.grid.--8col { grid-template-columns: repeat(8, 1fr); }
.grid.--9col { grid-template-columns: repeat(9, 1fr); }

.gap-x1 { gap: var(--std-unit-x1); }
.gap-x2 { gap: var(--std-unit-x2); }
.gap-x3 { gap: var(--std-unit-x3); }
.gap-x4 { gap: var(--std-unit-x4); }
.gap-x5 { gap: var(--std-unit-x5); }

.flex-column { flex-flow: column; }
.flex-grow-full { flex-grow: 1; }
.flex-grow-half { flex-grow: .5; }

.align-top,
.--align-top {
    align-items: flex-start;
    vertical-align: top;
}
.align-center,
.--align-center {
    align-items: center;
    vertical-align: middle;
}
.align-bottom,
.--align-bottom {
    align-items: flex-end;
    vertical-align: bottom;
}


.justify-center,
.--justify-center {
    justify-content : center;
    text-align      : center !important;
}

.justify-left,
.--justify-left {
    justify-content : flex-start;
    text-align      : left;
}

.justify-right,
.--justify-right {
    justify-content : flex-end;
    text-align      : right;
}

.justify-justify {
    justify-content : space-between;
    text-align      : justify;
}

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

.bold {
    font-weight : bold;
}

.italic {
    font-style : italic;
}

td.fill-table,
th.fill-table {
    width : 100%;
}

.traxxus_disabled {
    pointer-events: none;
}
.traxxus_disabled:hover {
    cursor: not-allowed;
}

.traxxus_hidden,
.hidden {
    display : none !important /* leave this specification */;
}

.shown {
    opacity : 1;
}

.hidden {
    opacity : 0;
}

.traxxus_invisible {
    pointer-events : none;
    opacity        : 0;
}

.traxxus_noheight {
    overflow   : hidden;
    max-height : 0px !important;
}
.no-padding:not(.--left):not(.--right):not(.--top):not(.-bottom),
.no-padding:not(.--left):not(.--right):not(.--top):not(.-bottom) * {
    padding : unset !important;
}
.no-padding.--left,
.no-padding.--left *{
    padding-left: unset !important;
}

.nowrap {
    white-space : nowrap;
    flex-wrap: nowrap !important;
}

.dot-spacer {
    display : flex;
    height  : 100%;
    padding : 0 var(--std-unit-x3);
}

.dot-spacer:before {
    font-family : var(--FontAwesome);
    font-size   : .4rem;
    font-weight : bold;
    content     : var(--FA-icon-circle);
    color       : var(--theme-font-2);
}

/** simulated table style **/
div.table {
    display : table;
}

div.table > .row {
    display : table-row;
}

div.table > .row > .col {
    display : table-cell;
    padding : 5px;
}

.hr {
    border-bottom : 1px solid black;
}

.hr.--light {
    border-bottom : 1px solid #AAA;
}

.hr-blank {
    border-bottom : 1px solid hsla(0, 0%, 0%, 0);
}

.hr-blank:before {
    display : block;
    height  : 25px;
    content : " ";
}

/* misc */
.faded {
    white-space : nowrap;
    opacity     : 0.3;
}

[data-strikethrough],
.strikethrough {
    font-style      : italic;
    text-decoration : line-through;
}

/** jquery UI modifications **/

body > .ui-widget-overlay {
    opacity    : .8;
    background : #000;
    filter     : Alpha(Opacity=.3);
}

.image-container {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
}

.image-container > .missing {
    position : absolute;
    z-index  : var(--z-index-baseline);
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : min-content;
    margin   : 0;
    padding  : 0;
}

.image-container > .real {
    position        : absolute;
    z-index         : var(--z-index-popup);
    top             : 0;
    left            : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : auto;
    height          : 100%;
    margin          : 0;
    padding         : 0;
}

.inset-box {
    width            : fit-content;
    margin           : 5px;
    padding          : 10px;
    border-radius    : var(--theme-border-radius);
    background-color : var(--color-translucent-black-lvl-0);
    box-shadow       : var(--standard-box-shadow);
}

*.--fade-in:not(.--fade-out) {
    transform-origin : center;
    animation        : var(--context-animation-in);
}
*.--fade-out:not(.--fade-in) {
    transform-origin : center;
    animation        : var(--context-animation-out);
    opacity          : 0;
}

.grid-separator:before {
    content: '';
    display: block;
    background-color: var(--theme-gradient-generic-7);
    width: 1px;
    height: 100%;
}


.drag-handle {

}
.drag-handle:hover {
    cursor: grab;
}
.drag-handle:hover:active {
    cursor: grabbing;
}
.drag-handle:before {
    content: var(--FA-icon-bars);
    font-family: var(--FontAwesome);
    font-size: var(--font-larger);
    font-weight: bold;

}


/** scroll bar **/
/* width */
::-webkit-scrollbar {
    width  : 10px;
    height : 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background : hsla(0, 0%, 0%, 0);
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius    : 5px;
    background       : var(--theme-primary-dark);
    background-image : -webkit-gradient(linear,
    left bottom,
    left top,
    color-stop(0.12, var(--theme-primary-light)),
    color-stop(0.33, var(--theme-primary)),
    color-stop(0.66, var(--theme-primary-dark)));
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin             : 0;
    -webkit-appearance : none;
}

/* Firefox */
input[type=number] {
    -moz-appearance : textfield;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background : var(--theme-generic-2);
}

/*noinspection ALL*/
@media print {
    video::-webkit-media-controls {
        display : none;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* Styles */
    html {
        display : block;
        height  : 100vh;
    }

    body {
        overflow              : scroll;
        grid-template-columns : 0 100vw 0;
        /* grid-template-rows    : 5vh 76vh 1fr; */
    }

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-width : 768px) {
    /* Styles */
    body {
        display               : grid;
        overflow              : auto;
        grid-template-areas   : "header" "body" "footer";
        grid-template-columns : 100%;
        grid-template-rows    : min-content 1fr min-content;
    }

    body > div.body {
        padding-top         : 55px;
        padding-bottom      : 41px;


        grid-template-areas : "content";
        grid-template-rows  : 1fr;
    }

    .body > .nav {
        display : none;
    }

}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    /* Styles */
    .body {
        grid-template-rows : 55px 1fr
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1280px)
and (orientation : landscape) {
    /* Styles */
    .body {
        grid-template-rows : 55px 1fr
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
    /* Styles */
}

@media print {
    body {
        display : block;
        background-image: unset !important;
    }
    body.printing * {
        page-break-inside: unset !important;
    }
    [data-segment='activities']:not([data-expanded]) {
        display: none;
    }
    .office-use-only {
        position: unset !important;
    }

    body > .popup-body {
        overflow : unset !important;
    }
}