@charset "utf-8";

@font-face {
    font-family: MOpenSans;
    src: url(../../../ddm_content/fonts/opensans/OpenSans-Regular.ttf) format("truetype");
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes scale {
    10% {
        transform: scale(1.2) rotate(25deg);
    }
    20% {
        transform: scale(1.2) rotate(-25deg);
    }
    30% {
        transform: scale(1.2) rotate(-25deg);
    }
    40% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.time_colon:before {
    content: ":";
}

* {
    box-sizing: border-box;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

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

:root {
    --border-width: 1px;
    --border-radius: 4px;
    --border-color: #002e6d;
    --border: 1px solid #002e6d;
    --border-light: 1px solid #ececec;

    --box-background: white;
    --box-background-faded: rgba(255, 255, 255, 0.75);
    --box-color: #333;

    --container-back: white;
    --container-color: #333;
    --container-back-faded: rgba(0, 0, 0, 0.08);
    --container-title-back: #f7f7f7;
    --container-title-color: #333333;
    --container-controls-back: #f7f7f7;
    --continer-controls-color: #333333;

    --button-border: 1px solid #333;
    --button-color: white;
    --button-back: #051d39;
    --button-text: #ffffff;

    --info-back: rgba(255, 255, 255, 0.75);

    --input-good: #aaffaa;
    --input-warning: #ffaaaa;
    --input-caution: #ffffaa;
    --input-highlight: #aaffff;
    --input-color: #333333;
    --input-height: 24px;
    --input-fontsize: 12px;
    --label-fontsize: 13px;

    --font-size: 12px;
    --font-size-plus2: 14px;
    --font-size-plus4: 16px;
    --font-size-plus6: 18px;
    --font-size-plus8: 20px;
    --font-size-minus2: 10px;
    --font-size-minus4: 8px;

    --color-good: #aaffaa;
    --color-warning: #ffaaaa;
    --color-caution: #ffffaa;
    --color-highlight: #aaffff;
    --color-color: #333333;

    --scroll-behavior:smooth;

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

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body,
html {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    text-transform: none;
    background-color: #fff;
    color: #000;
    overflow: hidden;
    font-family: MOpenSans, "Proxima Nova Soft", "Helvetica Neue", sans-serif;
    font-size: 12px;
    transform-origin: top left;
}

body:-moz-full-screen,
body:-webkit-full-screen,
body:fullscreen,
div:-moz-full-screen,
div:-webkit-full-screen,
div:fullscreen,
span:-moz-full-screen,
span:-webkit-full-screen,
span:fullscreen {
    background-color: rgba(255, 255, 255, 0);
}

body.popup {
    min-height: 900px;
    overflow-y: auto;
}
body.login {
    min-width: 320px;
    width: auto;
}
body.query {
    min-width: 1020px;
}
body.inbox {
    min-width: 100%;
    max-width: 100%;
}
body.support {
    min-width: 100%;
    max-width: 100%;
    overflow: auto;
}
body.document {
    overflow: auto;
}
body.mobile {
    font-size: 12px;
}
body.mobile.login {
    width: auto;
    max-width: 100%;
}
button,
div {
    box-sizing: border-box;
    vertical-align: top;
    border-collapse: collapse;
    border-style: solid;
    border-color: #000;
    border-width: 0;
    background-color: transparent;
    font-size: inherit;
    padding: 0;
    margin: 0;
    outline: 0;
    box-shadow: none;
}
.lookatme {
    animation-name: scale;
    animation-fill-mode: both;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
option {
    min-height: 20px;
}
div,
div span,
span {
    font-size: inherit;
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div,
div span {
    overflow: hidden;
    vertical-align: top;
    text-align: left;
    word-wrap: break-word;
    text-shadow: none;
    letter-spacing: normal;
    word-spacing: normal;
    resize: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translateZ(0);
}
div:after,
div:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}
p {
    margin: 0;
}

input,
input:active,
input:focus,
select,
select:active,
select:focus,
textarea,
textarea:active,
textarea:focus {
    font-family: Helvetica, Arial, Lucida Grande, sans-serif;
    display: inline-block;
    border-radius: 4px;
    background-color: #fefefe;
    color: #333;
    padding: 0 4px;
    font-size: var(--input-fontsize);
    border-collapse: collapse;
    border: 1px solid #bababa;
    line-height: var(--input-height);
    box-shadow: none;
    border-image: none;
    overflow: hidden;
    box-sizing: border-box;
    -ms-user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    outline: 0;
}
input,
input:active,
input:focus,
select,
select:active,
select:focus {
    min-height: var(--input-height);
}
input,
select {
    height: var(--input-height);
    line-height: var(--input-height);
}
textarea {
    height: auto;
    line-height: 20px;
    min-height: 40px;
    padding: 2px;
    vertical-align: bottom;
    overflow: auto;
}
textarea:active,
textarea:focus {
    line-height: 20px;
    outline: 0;
    padding: 2px;
    min-height: none;
}
input:focus,
select:focus:not(.calendar_selector),
textarea:focus {
    border-color: #333;
    background-color: #f7f7f7;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
    outline: 0;
}
input:disabled:not(.document_input):not(.nostyle):not(.rolo_input_label),
select:disabled:not(.calendar_selector):not(.document_input):not(.nostyle),
textarea:disabled:not(.document_input):not(.nostyle) {
    background-color: #f0f0f0;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
input:disabled:not(.document_input):not(.nostyle)::placeholder {
    -webkit-text-fill-color: transparent;
    color: transparent;
}
input[type="date"],
input[type="time"] {
    appearance: none;
    -webkit-appearance: none;
}
input[type="color"] {
    padding: 0;
    background: 0 0;
    border: 1px solid #333;
    border-radius: 5px;
    width: var(--input-height);
    height: var(--input-height);
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: top;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}
input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
}
input.checkbox[type="checkbox"] {
    display: none;
}
input.checkbox[type="checkbox"] + label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 2px;
    margin-top: 0;
    background-image: url(../images/checkbox_unchecked_black.png);
}
input.checkbox.large[type="checkbox"] + label span {
    width: 20px;
    height: 20px;
    margin-left: 0;
}
input.checkbox[type="checkbox"]:checked + label span {
    background-image: url(../images/checkbox_checked_black.png);
}
input.radiobutton[type="radio"] {
    display: none;
}
input.radiobutton[type="radio"] + label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 2px;
    margin-top: 0;
    background-image: url(../images/boolean_unchecked_black.png);
}
input.radiobutton[type="radio"]:checked + label span {
    background-image: url(../images/boolean_checked_black.png);
}
[list]::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
}
select {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ellipsis;
}
select::-ms-expand {
    display: none;
}
select:not([multiple]):not(.calendar_selector):not(:disabled) {
    background-image: url(../images/select_arrb.png);
    background-repeat: no-repeat;
    background-position: center right;
    position: relative;
    display: inline-block;
}
select[size] {
    height: auto;
}
select.nodrop {
    overflow-y: auto;
    background-image: none;
}
select.nodrop:focus {
    background-color: #efefef;
    background-image: none;
}

select.noimage,
select:disabled {
    background-image: none;
    opacity: 1;
}
input.disguised,
input:disabled.disquised,
select.disguised,
select:disabled.disguised,
textarea.disguised,
textarea:disabled.disguised {
    background: 0 0;
    color: inherit;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    text-align: right;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1;
}

a {
    text-decoration: none;
}

:-moz-placeholder,
:-ms-input-placeholder,
::-moz-placeholder,
::-webkit-input-placeholder,
::placeholder {
    color: #a5a5a5;
    font-size: 11px;
    overflow: visible;
}
input::placeholder {
    color: #7c7c7c;
    font-size: 11px;
    overflow: visible;
}
div.logininput {
    margin-bottom: 2px;
}
input.logininput,
select.logininput {
    height: 35px;
    line-height: 35px;
    text-align: left;
    padding: 0 5px;
    font-size: 14px;
}
input.logininput[value=""],
select.logininput[value=""] {
    box-shadow: inset 0 0 1px 1px rgba(255, 0, 0, 0.25);
}
select.logininput {
    box-sizing: border-box;
}
input.nostyle,
input.nostyle:disabled,
select.nostyle,
select.nostyle:disabled,
textarea.nostyle,
textarea.nostyle:disabled {
    background: 0 0;
    color: inherit;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    font-style: inherit;
    color: inherit;
    display: inline-block;
}

input.nostyle,
input.nostyle:disabled,
select.nostyle,
select.nostyle:disabled,
select.nostyle:disabled option {
    text-align: right;
}

input.midstyle,
input.midstyle:disabled,
select.midstyle,
select.midstyle:disabled,
textarea.midstyle,
textarea.midstyle:disabled {
    background: 0 0;
    color: inherit;
    border-width: 1px;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    font-style: inherit;
    color: inherit;
    display: inline-block;
}

input.midstyle,
input.midstyle:disabled,
select.midstyle,
select.midstyle:disabled,
select.midstyle:disabled option {
    text-align: right;
}

input.input-good,
select.input-good {
    background-color: var(--input-good);
    color: var(--input-color);
}
input.input-warning,
select.input-warning {
    background-color: var(--input-warning);
    color: var(--input-color);
}
input.input-caution,
select.input-caution {
    background-color: var(--input-caution);
    color: var(--input-color);
}
input.input-highlight,
select.input-highlight {
    background-color: var(--input-highlight);
    color: var(--input-color);
}

input.required:invalid,
input.required:placeholder-shown {
    border-width: 2px;
    border-color: red;
}

select.required:invalid,
select.required[value=""],
select:required:invalid {
    border-width: 2px;
    border-color: red;
}

textarea.required[value=""],
textarea:required:invalid {
    border-width: 2px;
    border-color: red;
}
input.highlightorange,
select.highlightorange,
textarea.highlightorange {
    border-width: 2px;
    border-color: #ff8c00;
}
input.highlightred,
select.highlightred,
textarea.highlightred {
    border-width: 2px;
    border-color: red;
}
input.generated:required:invalid:not(.srGrid-filter-input):not(.srGrid-fieldFilter),
select.generated:required:invalid,
textarea.generated:required:invalid {
    border-color: #ff8c00;
}

input.recommended:required:invalid:not(.srGrid-filter-input):not(.srGrid-fieldFilter),
select.recommended:required:invalid,
textarea.recommended:required:invalid {
    border-color: #ff8c00;
}

input.lookup-input {
    background-color: #ffa;
    color: #000;
}

input.lookup-input[value=""] {
    background-color: inherit;
}
.replacement_label {
    padding-right: 20px;
    width: 100%;
    min-width: 100%;
}
.replacement_label.disguised,
.replacement_label.nostyle {
    padding-right: 0;
}
.replacement_clear {
    position: absolute;
    right: 5px;
    top: 0;
    width: 30px;
    height: 100%;
    cursor: pointer;
    background-position: right center;
    background-size: 60%;
    background-repeat: no-repeat;
    background-image: url(../images/eraser_dark.png);
}
.filled {
    background-color: rgba(255, 255, 255, 1);
    color: #333;
}
.filled-full {
    background-color: rgb(255, 255, 255, 1);
    color: #333;
}
.onoff_check,
.yesno_check {
    width: 55px;
    height: 18px;
    line-height: 18px;
    background: #efefef;
    margin: 1px auto;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    border: 1px solid #bababa;
}
.yesno_check:before {
    content: "Yes";
    font-size: 12px;
    color: #27c819;
    position: absolute;
    left: 4px;
    z-index: 0;
    font-weight: 700;
}
.yesno_check:after {
    content: "No";
    font-size: 12px;
    color: #000;
    position: absolute;
    right: 4px;
    z-index: 0;
    font-weight: 700;
}
.onoff_check:before {
    content: "On";
    font-size: 12px;
    color: #27c819;
    position: absolute;
    left: 4px;
    z-index: 0;
    font-weight: 700;
}
.onoff_check:after {
    content: "Off";
    font-size: 12px;
    color: #000;
    position: absolute;
    right: 4px;
    z-index: 0;
    font-weight: 700;
}
.onoff_check input,
.yesno_check input {
    visibility: hidden;
    display: none;
}
.onoff_check input[type="checkbox"]:checked + label,
.yesno_check input[type="checkbox"]:checked + label {
    left: 28px;
}
.onoff_check label,
.yesno_check label {
    display: block;
    width: 24px;
    height: 14px;
    border-radius: 5px;
    transition: all 0.4s ease;
    cursor: pointer;
    top: 1px;
    left: 2px;
    z-index: 1;
    background-color: #bababa;
    background-image: linear-gradient(to top, #bababa 0%, grey 100%);
}

#site-wrapper:not(.login):not(.training):not(.outside) {
    position: relative;
    text-align: center;
    min-width: 825px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: auto;
    display: block;
    font-size: 12px;
    font: inherit;
}

#site-wrapper.training {
    width: 100%;
    height: 100%;
}
#site-wrapper.query {
    height: 100%;
    width: 100%;
    background: 0 0;
}
#site-wrapper.login,
#site-wrapper.outside {
    min-width: 320px;
    width: 100%;
    height: 100%;
    padding: 0 0 10px 0;
}
#site-wrapper.outside {
    min-width: 320px;
    width: 100%;
    height: 100%;
    padding: 0;
    max-width: 100%;
}
#site-wrapper.mobile:not(.login):not(.training):not(.query):not(.outside) {
    width: auto;
    height: auto;
    overflow: hidden;
    min-width: auto;
    min-height: auto;
    width: 100%;
    height: 100%;
}
#site-wrapper.training {
    min-width: none;
    min-height: none;
}
#header_spacer {
    position: relative;
    width: 100%;
    text-align: center;
    font-weight: 700;
    overflow: visible;
    display: inline-block;
    line-height: 30px;
    height: 30px;
}
#site-header {
    background-color: #fff;
    width: 100%;
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    line-height: 30px;
    height: 30px;
}
#header_back.header_small,
#header_spacer.header_small,
#site-header.header_small {
    line-height: 30px;
}
#header_info {
    height: 30px;
    width: 250px;
    position: absolute;
    top: 10px;
    right: 5px;
    line-height: 30px;
}
#header_alert {
    float: left;
    background: #fff;
    color: red;
    border-radius: 5px;
    text-align: center;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
    padding: 0 10px;
}
#header-submenu {
    height: 30px;
    width: auto;
    float: right;
    padding: 0 20px 0 5px;
    line-height: 30px;
    text-align: right;
}
#header_options {
    height: auto;
    width: 100px;
    position: absolute;
    top: 39px;
    right: 5px;
    line-height: 30px;
    z-index: 2;
    text-align: center;
}
#header-image {
    float: left;
    height: 28px;
    margin-top: 1px;
    width: 200px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}
.submenu_icon {
    width: 20px;
    height: 20px;
    text-align: left;
    vertical-align: middle;
    position: relative;
    display: inline-block;
    margin-right: 5px;
    background-position: left;
}
.submenu_break {
    display: inline-block;
    background-color: transparent;
    width: 1px;
    margin: 0 5px;
    height: 20px;
    vertical-align: middle;
}
.submenu_spacer {
    width: 10px;
    display: inline-block;
}
.submenu_box {
    display: inline-block;
    width: 25px;
    font-size: 12px;
    cursor: pointer;
    background: 0 0;
    border-radius: 5px;
    height: 26px;
    line-height: 26px;
    margin: 2px 5px;
    white-space: nowrap;
    word-break: keep-all;
    word-wrap: normal;
    padding: 0;
    padding-left: 5px;
    overflow: hidden;
    -webkit-transition: width 0.3s linear;
    transition: width 0.3s linear;
}

#header-container:not(.touch) .submenu_box:hover:not(.touch) {
    background: rgba(0, 0, 0, 0.1);
    padding: 0 5px 0 0;
}
.submenu_box:last-child {
    margin-right: 0;
}

#application_switch.open {
    background-color: #fff;
}
.appswitch {
    width: 100%;
    display: inline-block;
    position: relative;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    padding: 0 5px;
}
.appswitch:nth-child(odd) {
    background: #efefef;
}
.appswitch.selected {
    background: #afafaf;
}

#app_capture {
    z-index: 9;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.75);
}

#app_capture_box {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    margin: 0 auto;
    position: fixed;
    text-align: center;
    background: #fff;
    color: #333;
    border-radius: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

#capture_container {
    width: 100%;
    height: 450px;
    background: #000;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px;
}

#capture_canvas,
#capture_video {
    position: absolute;
    left: 5px;
    top: 5px;
}

#capture_canvas {
    display: none;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#footer.partial {
    right: 0;
    left: auto;
    width: 150px;
    overflow: visible;
    z-index: 101;
}

#footercontainer,
#header-container {
    font-size: 14px;
    line-height: 30px;
    min-height: 30px;
    vertical-align: middle;
    font-weight: 700;
    text-align: center;
    position: relative;
    margin: 0 auto;
    overflow: visible;
}

#footercontainer {
    padding: 0 5px;
}

#header-container.mobile {
    padding: 0 10px;
}

#footercontainer {
    min-height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    padding: 0 10px;
    color: #fff;
    font-weight: 400;
}

#footercontainer a {
    color: #fff;
}
.center_container {
    position: relative;
    text-align: center;
}

#app_btn_google {
    background-image: url(../images/google_playstore.png);
    background-size: contain;
}

#app_btn_apple {
    background-image: url(../images/apple_appstore.png);
    background-size: contain;
}

#app_btn_appleb2b {
    background-image: url(../images/apple_appb2b.png);
    background-size: contain;
}

#loader_gif {
    display: inline-block;
    width: 21px;
    height: 21px;
    text-align: center;
    margin-right: 5px;
    margin-top: 6px;
}
.loading_gif {
    background-color: transparent;
}
.loading_gif:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    background: 0 0;
    content: "";
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid transparent;
    animation: spinner 0.7s linear infinite;
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

#profile_pic {
    width: 100px;
    height: 120px;
    border: 1px solid #666;
    background-size: cover;
    display: inline-block;
}

#customer_pic {
    width: 200px;
    height: 120px;
    background-size: contain;
    background-position: top left;
    display: inline-block;
}
.app_btn {
    height: 40px;
    width: 135px;
    display: inline-block;
    vertical-align: top;
}
.hiddenBox {
    z-index: 9;
}
#headertime {
    height: 15px;
    width: 110px;
    position: absolute;
    top: 50px;
    right: 5px;
    text-align: right;
}
#application-name {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    margin: 0 10px;
}
#application-name.customer {
    left: 210px;
    width: 600px;
    right: auto;
}
#foot_label {
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}
#foot_home {
    float: left;
    margin-left: 5px;
}
#foot_link,
#footname {
    font-size: 13px;
    position: relative;
    float: right;
    height: 25px;
    line-height: 25px;
    text-align: right;
    width: auto;
    margin-right: 5px;
    margin-top: 2px;
}

#site-container {
    position: relative;
    text-align: left;
    margin: 0 auto;
    display: block;
    width: 100%;
    min-width: 825px;
    min-height: 100%;
    height: 100%;
}
#site-container.login {
    width: 100%;
    height: 100%;
    min-width: 320px;
    max-width: 1000px;
    overflow-y: auto;
}
#site-container.outside {
    width: 100%;
    height: 100%;
    min-width: 320px;
    max-width: 1000px;
    overflow-y: auto;
}
#site-container.login.mobile {
    text-align: center;
    min-width: auto;
    padding-bottom: 60px;
}
#site-container.mobile {
    min-width: auto;
    max-width: auto;
    width: 100%;
    height: 100%;
}
#site-container.query {
    display: block;
    background-color: #fff;
    color: #333;
    min-width: 1020px;
    height: auto;
    width: auto;
    overflow: auto;
    padding: 0 0 20px 0;
    margin: 0 20px;
}
#site-container.inbox {
    background-color: #fff;
    color: #333;
    min-height: auto;
    height: 100%;
    width: 100%;
}
#site-content {
    display: flex;
    flex-direction: row;
    height: calc(100% - 30px);
    min-height: calc(100% - 30px);
    max-height: calc(100% - 30px);
}
#page-title {
    display: block;
    width: 100%;
    font-size: 13px;
    text-align: left;
    font-weight: 700;
    padding: 2px 0;
    height: 30px;
    max-height: 30px;
    min-height: 30px;
    line-height: 30px;
    overflow: hidden;
    z-index: 1;
    transition: padding 0.3s linear;
}
#page-title-text {
    height: 25px;
    line-height: 25px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page_back {
    float: right;
    margin-right: 10px;
    cursor: pointer;
}
#page_back:hover {
    text-decoration: underline;
    transform: scale(0.98);
}
#page-title.inbox {
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    position: relative;
}
#page-title.mobile {
    padding: 0 5px;
    margin: 5px 5px 0 5px;
    width: calc(100% - 10px);
    height: 25px;
    line-height: 25px;
    text-align: left;
    border-radius: 2px;
    height: 25px;
    max-height: 25px;
    min-height: 25px;
    line-height: 25px;
    background-color: rgba(0, 0, 0, 0.1);
}
#element_root {
    color: inherit;
}
#element_root:hover {
    text-decoration: underline;
}
#menu-wrapper {
    flex: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    min-height: 100%;
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 20px 0;
    transition: all 0.3s linear;
    z-index: 3;
}
#menu-wrapper.independent.active {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}
#menu-wrapper .menu_content {
    z-index: 2;
    overflow: visible auto;
}
#menu-title {
    width: 200px;
    min-width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    display: block;
    color: inherit;
}

#menu_toggle {
    float: left;
    width: 20px;
    height: 25px;
    margin-right: 5px;
    cursor: pointer;
    text-align: left;
}
#menu_toggle div,
#menu_toggle:after,
#menu_toggle:before {
    background-color: #051d39;
    border-radius: 3px;
    content: "";
    display: block;
    height: 3px;
    margin: 4px 0;
    transition: all 0.3s ease-in-out;
}
#menu_toggle.active:after,
#menu_toggle.active:before {
    width: calc(100% - 5px);
    transform: translateX(5px);
}
#menu_group {
    box-sizing: border-box;
    width: 0;
    left: 200px;
    height: 0;
    position: absolute;
    top: -1000px;
    height: auto;
    z-index: 2;
    border-radius: 2px;
    border-width: 1px;
    transition: width 0.25s linear;
}
#menu_group .menu_content {
    height: auto;
    width: 200px;
    display: block;
    padding: 0;
}
#menu_group.active {
    width: 200px;
}
#page_cover {
    width: 100%;
    height: 100%;
    position: fixed;
    left: -5000px;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s linear;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.7);
}
#page_cover.active {
    left: 0;
    opacity: 1;
}
#page-container {
    flex: 1;
    display: inline-block;
    position: relative;
    text-align: left;
    vertical-align: top;
    height: auto;
    min-height: 100%;
    max-height: 100%;
    overflow: auto;
    z-index: 1;
    transition: all 0.3s linear;
    padding: 0 4px 20px 4px;
    flex: 1;
}
#page-content {
    display: inline-block;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: calc(100% - 32px);
}
#page_container_cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
#page-content.inbox {
    margin: 0;
    position: relative;
    top: 0;
    overflow: auto;
    max-height: 500px;
    padding: 0;
    background: #fff;
}
#page_messages {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: auto;
    height: auto;
    overflow: visible;
}
.page_message {
    padding: 10px;
    width: 100%;
    margin: 5px;
    font-size: 12px;
    font-weight: 700;
    height: auto;
    line-height: 20px;
    width: auto;
    max-width: 300px;
    border: 1px solid #333;
    background-color: #fff;
    color: #333;
    border-radius: 3px;
}
.support_video {
    width: 138px;
    height: 78px;
    border: 1px solid #fff;
}
.discussion_content {
    background-color: #fff;
    display: block;
    text-align: left;
}
.discussion_top {
    width: 100%;
    display: block;
    padding: 0;
}
.discussion_topic {
    display: block;
    width: 100%;
    padding: 5px 80px 5px 5px;
    line-height: 30px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
}
.discussion_label {
    font-size: 14px;
    float: left;
    width: auto;
    padding: 0 5px;
    font-weight: 700;
    height: 25px;
    line-height: 25px;
}
.discussion_creator {
    font-size: 14px;
    float: right;
    width: auto;
    padding: 0 5px;
}
.discussion_desc {
    display: block;
    width: 100%;
    padding: 5px;
    line-height: 20px;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    max-height: 50px;
    transition: max-height 1s ease-in;
}
.discussion_desc.active,
.discussion_desc:hover:not(.discussion_root) {
    max-height: 2000px;
}
.discussion_indicator {
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: auto;
    height: 15px;
    line-height: 15px;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 700;
}
.discussion_desc:hover .discussion_indicator {
    display: none;
}
.discussion_line {
    background-color: #fff;
    width: 100%;
    line-height: 20px;
    text-align: left;
    display: block;
    padding: 5px 0 0 5px;
    border-color: #e7e7e7;
    border-top-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
}
.discussion_root.discussion_top {
    background-color: transparent;
}
.discussion_root.discussion_topic {
    background-color: transparent;
    padding: 0 5px;
}
.discussion_root.discussion_desc {
    background-color: transparent;
    padding: 0 10px;
}
.discussion_content .discussion_line:nth-child(even) {
    background-color: #efefef;
}
.discussion_profile {
    height: 50px;
    width: 50px;
    border-radius: 3px;
}
.discussion_author {
    font-size: 14px;
    font-weight: 700;
    float: left;
    width: auto;
    min-width: 200px;
    max-width: calc(100% - 250px);
    padding: 0 5px;
}
.discussion_date {
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
    margin-left: 5px;
    float: right;
    text-align: left;
    width: auto;
    min-width: 200px;
}
.discussion_likes {
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
    float: right;
    text-align: right;
    width: auto;
    min-width: 100px;
}
.discussion_controls {
    padding: 0 5px;
    float: right;
    width: 100px;
}
.discussion_view {
    font-size: 12px;
}
.discussion_view:hover {
    font-weight: 700;
    text-decoration: underline;
}
.discussion_message {
    padding: 0;
    width: 100%;
    display: block;
    text-align: left;
}
.discussion_message .discussion_content {
    padding: 2px 2px 2px 15px;
    margin-top: 5px;
    background-color: rgba(0, 0, 0, 0.1);
}
.discussion_text {
    padding: 0 5px 5px 5px;
    font-size: 12px;
    width: 100%;
}
.discussion_filter {
    height: 25px;
    line-height: 25px;
    margin-top: 2px;
    margin-left: 20px;
    float: right;
}
.discussion_category:hover {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.quill_editor,
.quill_subeditor {
    min-height: 100px;
    z-index: 0;
    display: block;
    width: 100%;
}

#popup_selectBox_back {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    bottom: 0;
    z-index: 8;
    height: calc(100% - 30px);
}

#loader_back,
#loader_front {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    left: 0;
    top: 30px;
    bottom: 0;
    right: 0;
    width: 100%;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
}

#loader_back.mobile,
#loader_back.query,
#loader_back.training {
    top: 0;
    bottom: 0;
}

#loader_back.document {
    bottom: 0;
    top: 0;
}

#loader_front {
    top: 0;
}

#loader_message {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
}

#loadertext {
    width: 100%;
    text-align: center;
}

#loaderimg {
    height: 200px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.map_wrap {
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0 auto;
}
.map_canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
}
.system_logo {
    background-position: center;
    background-size: contain;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: none;
}
.system_logo.posleft {
    background-position: left center;
}

#application_box {
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 450px;
    text-align: left;
    display: inline-block;
    left: 200px;
    top: 0;
}

#app_mapback,
#app_popupback {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 11;
    text-align: center;
    overflow: auto;
}

#app_popupcover {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 12;
    text-align: center;
}

#app_map {
    position: relative;
    margin: 0 auto;
    height: 500px;
    width: 600px;
    top: 100px;
    max-width: none;
    min-width: 600px;
    min-height: 500px;
    max-height: none;
}
.background_cover {
    background-color: rgba(0, 0, 0, 0.5);
}

#popup_cover {
    width: 100%;
    height: 100%;
    background: #fff;
    color: #333;
    text-align: center;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
#popup_cover_text {
    width: 100%;
    height: auto;
    position: relative;
    top: 30%;
    font-size: 30px;
    text-align: center;
    line-height: 40px;
    color: #333;
}
#app_popup {
    line-height: 20px;
    padding: 0;
    position: fixed;
    width: auto;
    min-width: 320px;
    top: 100px;
    height: auto;
    left: 50%;
    transform: translate(-50%);
    margin: 0 auto;
    font-size: 12px;
    z-index: 12;
    text-align: center;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    max-height: calc(100% - 100px);
    overflow: auto;
    border-radius: 5px;
}
#app_popup.viewer {
    padding: 0;
    bottom: 20px;
    max-height: 1000px;
    top: 20px;
    overflow: hidden;
    border-radius: 5px;
}
#app_popup.alert {
    width: auto;
    min-width: 300px;
    max-width: 1000px;
    padding: 15px;
    border: 0;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    line-height: 30px;
}
#app_popup.delete {
    width: auto;
    min-width: 300px;
    max-width: 500px;
    padding: 0 15px 15px 15px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}
.alert_icon {
    background-image: url(../images/alerticon.png);
    background-size: 100%;
}
#app_popup .alert_icon,
#app_popup .info_icon {
    width: 50px;
    height: 50px;
    background-image: url(../images/alerticon.png);
    background-size: 50px 50px;
    display: table-cell;
    vertical-align: middle;
    background-position: center top;
}
#app_popup .info_icon {
    background-image: url(../images/infoicon.png);
}
#app_popup .alert_text,
#app_popup .info_text {
    width: calc(100% - 100px);
    padding-left: 15px;
    padding-right: 15px;
    height: auto;
    vertical-align: middle;
    display: table-cell;
    font-size: 16px;
    line-height: 30px;
}
.popup_text {
    padding: 10px;
    line-height: 25px;
    font-size: 14px;
    width: 100%;
    display: block;
    text-align: left;
}
#loadertext .alert_icon {
    position: relative;
    width: 75px;
    height: 75px;
    background-image: url(../images/alerticon.png);
    margin-bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
#popup_title {
    border-bottom: 1px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    line-height: 25px;
    width: 100%;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
}
#popup_title_left {
    width: 600px;
    float: left;
    height: 25px;
    line-height: 25px;
    margin-left: 5px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
}
#popup_title_right {
    width: 185px;
    float: right;
    height: 25px;
    line-height: 25px;
    margin-right: 5px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
}
#popup_body {
    width: 100%;
    height: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#popup_info {
    width: 100;
    height: auto;
    line-height: 20px;
    min-height: 20px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.popup_popout {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-top: 2px;
}
.popup_close {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 0;
}
.popup_text_button {
    color: #00f;
    text-decoration: underline;
    width: 75px;
    text-align: center;
    cursor: pointer;
    background: 0 0;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    font-weight: 700;
}

/* Signature */
.signature-wrapper {
    width: 250px;
    max-width: 250px;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.signature-content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.signature-image {
    border: var(--border-light);
    border-radius: var(--border-radius);
    margin: 4px;
}
.signature-box {
    width: 480px;
    max-width: 480px;
    overflow: hidden;
}
.signature-canvas {
    width: 480px;
    height: 200px;
}
.signature-back {
    z-index: 10;
}

/* Container */
.container-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.container-back {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--info-back);
    padding: 20px;
}
.container-box {
    width: auto;
    height: auto;
    min-width: 300px;
    overflow: hidden;
    max-height: calc(100% - 40px);
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: var(--container-back);
    color: var(--container-color);
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.container-title {
    font-size: var(--font-size-plus4);
    font-weight: bold;
    text-align: left;
    padding: 0 12px;
    min-height: 50px;
    height: 50px;
    flex: 0;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: var(--container-title-back);
    color: var(--container-title-color);
    border-bottom: var(--border);
}
.container-close {
    display: block;
    width: 30px;
    height: 48px;
    float: right;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    background-image: url("../images/close_black.png");
    cursor: pointer;
}
.container-content {
    width: 100%;
    padding: 8px;
    max-height: calc(100% - 88px);
    overflow-y: auto;
    overflow-x: hidden;
}
.container-content.spaced {
    padding: 16px;
    line-height: 24px;
}
.container-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 8px;
    background: var(--container-controls-back);
    color: var(--container-controls-color);
    border-top: var(--border);
}
.container-button {
    min-width: 80px;
    padding: 0 4px;
    text-align: center;
    cursor: pointer;
}

/* Info Box*/
#info-box-back {
    background: var(--info-back);
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10;
}
#info-box {
    display: block;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--container-back);
    color: var(--container-color);
    border: var(--border);
    border-radius: var(--border-radius);
    min-width: 300px;
    width: auto;
    height: auto;
    min-height: 100px;
    padding: 10px;
    text-align: center;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.info-box-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    text-align: left;
    height: 30px;
    line-height: 30px;
}
.info-box-title-text {
    padding: 0 4px;
    text-align: left;
    flex: 1;
    border-radius: var(--border-radius);
    display: inline-block;
}
.info-box-icon {
    float: left;
    height: 30px;
    width: 30px;
    background-image: url("../images/infoicon.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}
.info-box-close {
    float: right;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    width: 30px;
    flex: 0;
    background-image: url("../images/close_black.png");
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.info-box-label {
    margin-top: 4px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
}
.info-box-text {
    margin: 4px;
    font-size: 14px;
    display: block;
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    line-height: 20px;
    text-align: left;
    padding: 4px;
}
.info-box-content {
    margin: 4px 0 8px 0;
    width: 100%;
    line-height: 30px;
    text-align: left;
    height: auto;
    max-height: 400px;
    overflow: hidden auto;
    border: 1px solid #dcdcdc;
    border-radius: var(--border-radius);
    padding: 4px;
    font-size: 14px;
}
.info-box-rows {
    width: 100%;
    border: var(--border-light);
    text-align: left;
    border-radius: var(--border-radius);
}

.info-box-row {
    width: 100%;
    border-top: var(--border-light);
    text-align: left;
    height: 30px;
    line-height: 30px;
    padding: 0 4px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.info-box-row:first-child {
    border-top: 0;
}
.info-box-row:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.info-box-column {
    border-right: var(--border-light);
    margin-right: 4px;
}

.info-box-controls {
    background-color: var(--container-controls-back);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4px;
}

.info-progress-back {
    width: 80%;
    display: block;
    text-align: center;
    border: var(--border-light);
    background-color: transparent;
    border-radius: 10px;
    height: 24px;
    line-height: 24px;
    text-align: left;
    display: inline-block;
    margin: 2px 10%;
}
.info-progress-bar {
    width: 0;
    float: left;
    background-color: #4caf50;
    height: 24px;
    line-height: 24px;
}
.info-progress-text {
    width: 100%;
    position: absolute;
    z-index: 1;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* Viewer */
#viewer-wrapper {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}
#viewer-header {
    flex: 0;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}
#viewer-footer {
    flex: 0;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}
#viewer-content {
    flex-grow: 1;
    display: flex;
    padding: 0px 40px;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    border-radius: var(--border-radius);
}
#viewer-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.viewer-button {
    margin: 4px 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    cursor: pointer;
    border-radius: 4px;
}
.viewer-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
#viewer-download {
    background-image: url(../images/viewer/download_white.png);
}
#viewer-close {
    background-image: url(../images/viewer/close_white.png);
}
#viewer-layers {
    background-image: url(../images/viewer/layers_white.png);
}
#viewer-shapes {
    background-image: url(../images/viewer/shapes_white.png);
}
#viewer-info {
    background-image: url(../images/viewer/info-white.png);
}

#viewer-magnify {
    background-image: url(../images/viewer/magnify_white.png);
}
#viewer-close {
    background-image: url(../images/viewer/close_white.png);
}
#viewer-magnify-move {
    background-image: url(../images/viewer/move_white.png);
    position: absolute;
    right: -4px;
    top: -4px;
}
#viewer-layers-text {
    background-image: url(../images/viewer/text_white.png);
}
#viewer-layers-circle {
    background-image: url(../images/viewer/circle_white.png);
}
#viewer-layers-square {
    background-image: url(../images/viewer/square_white.png);
}
#viewer-layers-eraser {
    width: 30px;
    height: 30px;
    background-image: url(../images/viewer/eraser-white.png);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
}
#viewer-layers-eraser.active {
    border: 1px solid white;
}
#viewer-layers-line {
    background-image: url(../images/viewer/line_white.png);
}
#viewer-layers-arrow {
    background-image: url(../images/viewer/arrow_white.png);
}
#viewer-canvas-layer.draw {
    cursor: url("../images/viewer/pen-shadowed-32.png") 2 30, auto;
}
#viewer-canvas-layer.eraser {
    cursor: url("../images/viewer/eraser-shadowed-32.png") 2 30, auto;
}
.viewer-color,
.viewer-shape {
    border-radius: 100px;
    border: 1px solid white;
}
.viewer-color.selected,
.viewer-shape.selected {
    background-color: rgba(0, 0, 0, 1);
}
.viewer-button.selected {
    background-color: rgba(255, 255, 255, 0.5);
}
#viewer-title {
    font-size: 18px;
    text-align: left;
    color: white;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.viewer-box {
    border-radius: 4px;
}
#viewer-image {
    border-radius: 4px;
    max-width: 100%;
    width: auto;
    height: auto;
}
.viewer-canvas.active {
    border-radius: 4px;
    border: 1px solid white;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
#viewer-magnify-box {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 200px;
    height: 200px;
    border-radius: 4px;
    overflow: visible;
}
#viewer-magnify-box::before {
    content: "";
    position: absolute;
    left: calc(50% - 10px);
    top: calc(50% - 1px);
    width: 20px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}
#viewer-magnify-box::after {
    content: "";
    position: absolute;
    left: calc(50% - 1px);
    top: calc(50% - 10px);
    width: 2px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}
#viewer-magnify-canvas {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}
#viewer-magnify-zoom {
    position: absolute;
    left: -2px;
    top: -1px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    width: 40px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    letter-spacing: 3px;
}

#viewer-layer-canvas.active {
    cursor: pointer;
}
#viewer-layers-box {
    min-width: 40px;
    flex-direction: row;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    height: 40px;
    width: 100%;
    text-align: center;
    padding: 0;
    z-index: 1;
    overflow: visible;
}
.viewer-layers-subbox {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 8px 0 0;
    align-items: center;
    overflow: visible;
}
.viewer-layers-subbox:last-child {
    margin-right: 0;
}
.viewer-layers-button {
    height: 30px;
    width: 100px;
    margin: 0 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 4px;
    background-position: 98% center;
    cursor: pointer;
}
.viewer-layers-button::before {
    content: "";
    height: 30px;
    line-height: 30px;
    padding-left: 6px;
}
.viewer-layers-button:hover {
    background-color: rgba(0, 0, 0, 1);
}
.viewer-layers-control {
    background-color: black;
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    padding: 0 4px;
    height: 30px;
    line-height: 30px;
    width: 70px;
    margin-left: 8px;
    cursor: pointer;
}
.viewer-layers-control:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
.viewer-selections {
    width: 107px;
    height: auto;
    max-height: 0px;
    position: absolute;
    right: -4px;
    top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 4px;
}
.viewer-selections.active {
    max-height: 300px;
}
.viewer-selected {
    width: 150px;
    height: 30px;
    font-size: 14px;
    border: 1px solid white;
    color: white;
    text-align: left;
    border-radius: 4px;
    background-position: 98% center;
    cursor: pointer;
}
.viewer-selected::before {
    content: "";
    height: 30px;
    line-height: 30px;
    padding-left: 6px;
}

/* Shape Selection */
.viewer-selected[selected="square"] {
    background-image: url(../images/viewer/square_white.png);
}
.viewer-selected[selected="square"]::before {
    content: "Shape: Square";
}
.viewer-selected[selected="circle"] {
    background-image: url(../images/viewer/circle_white.png);
}
.viewer-selected[selected="circle"]::before {
    content: "Shape: Circle";
}
.viewer-selected[selected="line"] {
    background-image: url(../images/viewer/line_white.png);
}
.viewer-selected[selected="line"]::before {
    content: "Shape: Line";
}
.viewer-selected[selected="arrow"] {
    background-image: url(../images/viewer/arrow_white.png);
}
.viewer-selected[selected="arrow"]::before {
    content: "Shape: Arrow";
}
.viewer-selected[selected="text"] {
    background-image: url(../images/viewer/text_white.png);
}
.viewer-selected[selected="text"]::before {
    content: "Shape: Text";
}

#viewer-layers-square::before {
    content: "Square";
}
#viewer-layers-circle::before {
    content: "Circle";
}
#viewer-layers-line::before {
    content: "Line";
}
#viewer-layers-arrow::before {
    content: "Arrow";
}
#viewer-layers-text::before {
    content: "Text";
}

#viewer-fileinfo {
    padding: 20px;
    width: auto;
    min-width: 300px;
    height: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 2px;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    line-height: 24px;
    font-size: 14px;
}
#viewer-popup-title {
    font-size: 14px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    grid-column: span 2;
}
.viewer-popup-row {
    grid-column: span 2;
    text-align: left;
}
.viewer-popup-label {
    font-weight: bold;
    white-space: nowrap;
    width: auto;
    min-width: 100px;
    text-align: right;
    padding: 0 4px;
}
.viewer-popup-label::after {
    content: ":";
    margin: 0 4px;
}
.viewer-popup-value {
    text-align: right;
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 2px;
    overflow-wrap: break-word;
    word-break: break-all;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 50%, transparent 50%, transparent 100%);
    background-size: 6px 1px;
    min-width: min-content;
}
#viewer-popup-button {
    grid-column: span 2;
    margin: auto;
    margin-top: 20px;
    background-color: black;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    border: 1px solid white;
    border-radius: 4px;
    width: 100px;
    cursor: pointer;
}

/* Color Selection */
#viewer-fillcolors-none,
#viewer-linecolors-none {
    background-image: url(../images/viewer/square_none.png);
}
#viewer-fillcolors-white,
#viewer-linecolors-white {
    background-image: url(../images/viewer/square_white.png);
}
#viewer-fillcolors-black,
#viewer-linecolors-black {
    background-image: url(../images/viewer/square_black.png);
}
#viewer-fillcolors-green,
#viewer-linecolors-green {
    background-image: url(../images/viewer/square_green.png);
}
#viewer-fillcolors-blue,
#viewer-linecolors-blue {
    background-image: url(../images/viewer/square_blue.png);
}
#viewer-fillcolors-red,
#viewer-linecolors-red {
    background-image: url(../images/viewer/square_red.png);
}
#viewer-fillcolors-yellow,
#viewer-linecolors-yellow {
    background-image: url(../images/viewer/square_yellow.png);
}
#viewer-fillcolors-cyan,
#viewer-linecolors-cyan {
    background-image: url(../images/viewer/square_cyan.png);
}
#viewer-fillcolors-magenta,
#viewer-linecolors-magenta {
    background-image: url(../images/viewer/square_magenta.png);
}

#viewer-fillcolors-none::before,
#viewer-linecolors-none::before {
    content: "None";
}
#viewer-fillcolors-white::before,
#viewer-linecolors-white::before {
    content: "White";
}
#viewer-fillcolors-black::before,
#viewer-linecolors-black::before {
    content: "Black";
}
#viewer-fillcolors-green::before,
#viewer-linecolors-green::before {
    content: "Green";
}
#viewer-fillcolors-blue::before,
#viewer-linecolors-blue::before {
    content: "Blue";
}
#viewer-fillcolors-red::before,
#viewer-linecolors-red::before {
    content: "Red";
}
#viewer-fillcolors-yellow::before,
#viewer-linecolors-yellow::before {
    content: "Yellow";
}
#viewer-fillcolors-cyan::before,
#viewer-linecolors-cyan::before {
    content: "Cyan";
}
#viewer-fillcolors-magenta::before,
#viewer-linecolors-magenta::before {
    content: "Magenta";
}

#viewer-fillcolors-selected[selected="none"],
#viewer-linecolors-selected[selected="none"] {
    background-image: url(../images/viewer/square_none.png);
}
#viewer-fillcolors-selected[selected="none"]::before {
    content: "Fill: None";
}
#viewer-linecolors-selected[selected="none"]::before {
    content: "Line: None";
}
#viewer-fillcolors-selected[selected="white"],
#viewer-linecolors-selected[selected="white"] {
    background-image: url(../images/viewer/square_white.png);
}
#viewer-fillcolors-selected[selected="white"]::before {
    content: "Fill: White";
}
#viewer-linecolors-selected[selected="white"]::before {
    content: "Line: White";
}
#viewer-fillcolors-selected[selected="black"],
#viewer-linecolors-selected[selected="black"] {
    background-image: url(../images/viewer/square_black.png);
}
#viewer-fillcolors-selected[selected="black"]::before {
    content: "Fill: Black";
}
#viewer-linecolors-selected[selected="black"]::before {
    content: "Line: Black";
}
#viewer-fillcolors-selected[selected="red"],
#viewer-linecolors-selected[selected="red"] {
    background-image: url(../images/viewer/square_red.png);
}
#viewer-fillcolors-selected[selected="red"]::before {
    content: "Fill: Red";
}
#viewer-linecolors-selected[selected="red"]::before {
    content: "Line: Red";
}
#viewer-fillcolors-selected[selected="blue"],
#viewer-linecolors-selected[selected="blue"] {
    background-image: url(../images/viewer/square_blue.png);
}
#viewer-fillcolors-selected[selected="blue"]::before {
    content: "Fill: Blue";
}
#viewer-linecolors-selected[selected="blue"]::before {
    content: "Line: Blue";
}
#viewer-fillcolors-selected[selected="cyan"],
#viewer-linecolors-selected[selected="cyan"] {
    background-image: url(../images/viewer/square_cyan.png);
}
#viewer-fillcolors-selected[selected="cyan"]::before {
    content: "Fill: Cyan";
}
#viewer-linecolors-selected[selected="cyan"]::before {
    content: "Line: Cyan";
}
#viewer-fillcolors-selected[selected="yellow"],
#viewer-linecolors-selected[selected="yellow"] {
    background-image: url(../images/viewer/square_yellow.png);
}
#viewer-fillcolors-selected[selected="yellow"]::before {
    content: "Fill: Yellow";
}
#viewer-linecolors-selected[selected="yellow"]::before {
    content: "Line: Yellow";
}
#viewer-fillcolors-selected[selected="magenta"],
#viewer-linecolors-selected[selected="magenta"] {
    background-image: url(../images/viewer/square_magenta.png);
}
#viewer-fillcolors-selected[selected="magenta"]::before {
    content: "Fill: Magenta";
}
#viewer-linecolors-selected[selected="magenta"]::before {
    content: "Line: Magenta";
}
#viewer-fillcolors-selected[selected="green"],
#viewer-linecolors-selected[selected="green"] {
    background-image: url(../images/viewer/square_green.png);
}
#viewer-fillcolors-selected[selected="green"]::before {
    content: "Fill: Green";
}
#viewer-linecolors-selected[selected="green"]::before {
    content: "Line: Green";
}
.lookup_box {
    position: relative;
    text-align: left;
    display: inline-block;
    height: 25px;
    width: 150px;
    box-sizing: border-box;
    overflow: visible;
    white-space: nowrap;
}
.lookup_box input:not(.timepicker):not(.datepicker),
.lookup_box select {
    height: 100%;
    line-height: 100%;
    width: 100%;
    padding: 0 2px;
    box-sizing: border-box;
}
.lookup_box input.datepicker {
    width: 80px;
}
.lookup_box .lookup_wrap {
    height: 100%;
    width: calc(100% - 30px);
    text-align: left;
    display: inline-block;
    line-height: 100%;
}
.lookup_box .lookup_button,
.lookup_box .replacement_lookup {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: 25px;
    margin-left: 3px;
    box-sizing: border-box;
}

#panorama_box {
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
}
.image_pan {
    position: absolute;
    background-color: #fff;
    opacity: 0.5;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.btn {
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn_0,
.btn_1,
.btn_2,
.btn_3 {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
    display: inline-block;
    word-wrap: normal;
    transition: background-color 0.5s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn_0 span,
.btn_1 span,
.btn_2 span,
.btn_3 span {
    text-align: center;
    font-weight: inherit;
    display: inline-block;
    word-wrap: normal;
    height: inherit;
    line-height: inherit;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
}
.btn_text {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}
.btn_text span {
    display: block; /*height:100%;line-height:100%;*/
}
.btn_1.btn_inverted,
.btn_1.invert,
span.invert {
    background: #efefef;
    color: #054a78;
}
.btn_1,
.btn_1:focus,
.btn_green,
.btn_orange,
.btn_red,
.btn_yellow,
.srGrid-button,
.srGrid-message-button {
    border: 1px solid #054a78;
    background: #efefef;
    color: #054a78;
    border-radius: 2px;
}
.btn-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}
.btn-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    border-right: 0;
}
.btn-center {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
    border-right: 0;
}
.btn_0.disabled,
.btn_1.disabled,
.btn_2.disabled,
.btn_3.disabled,
.btn_5.disabled,
.btn_c.disabled,
.doc_btn.disabled,
.timesheet_create.clickable {
    opacity: 0.5;
    cursor:auto;
}

.btn_2 {
    border-radius: 2px;
    background-color: var(--error);
    border: 1px solid #666;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
}
.btn_3 {
    border-radius: 2px;
    background-color: #007c15;
    border: 1px solid #666;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
}
.btn_1:hover:not(.disabled),
.btn_2:hover:not(.disabled) .btn_3:hover:not(.disabled) {
    transform: scale(0.98);
}
.btn_1:focus:not(.disabled),
.btn_2:focus:not(.disabled) .btn_3:focus:not(.disabled) {
    opacity: 0.9;
}
/* .btn_1 + .btn_1:not(.btn-right):not(.btn-center):not(.btn-flex) {
    margin-right: 4px;
} */
.login_button:hover {
    text-decoration: underline;
}
.login_line {
    cursor: pointer;
    font-size: 14px;
}
.login_line:hover {
    text-decoration: underline;
}
.home_button span {
    padding: 0;
}
.arrow_left {
    background-color: #333;
    clip-path: polygon(40% 0, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0 50%);
}
.arrow_right {
    background-color: #333;
    clip-path: polygon(40% 0, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0 50%);
    transform: rotate(180deg);
}
.arrow_down {
    background-color: #333;
    clip-path: polygon(40% 0, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0 50%);
    transform: rotate(270deg);
}
.arrow_up {
    background-color: #333;
    clip-path: polygon(40% 0, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0 50%);
    transform: rotate(360deg);
}
.icon_full {
    width: 100%;
    height: 100%;
    background-size: 80%;
    margin: 0;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
}
.icon_full.icon_close,
.icon_full.icon_open,
.icon_full.icon_toggle_close,
.icon_full.icon_toggle_open {
    background-size: cover;
}
.icon_inline,
.icon_inner {
    float: left;
    height: 100%;
    width: 25px;
    background-size: 80%;
}
.icon_inline:before,
.icon_inner:before {
    content: "";
    float: left;
    padding-top: 100%;
}
.icon_round {
    border-radius: 50px;
    background-position: center center;
    background-size: cover;
    transform: scale(0.7);
}
.icon_square {
    border-radius: 4px;
    background-position: center center;
    background-size: cover;
    transform: scale(0.7);
}
.btn_3,
.btn_green {
    background-color: #009500;
    color: #fff;
    border: 1px solid #666;
}
.btn_red {
    background-color: #950000;
    color: #fff;
    border: 1px solid #666;
}
.btn_yellow {
    background-color: #959500;
    color: #000;
    border: 1px solid #666;
}
.btn_orange {
    background-color: #956100;
    color: #fff;
    border: 1px solid #666;
}
.btn_3:hover {
    background-color: #fff;
    color: #007c15;
}
.box-title,.boxhead,.boxrow,.boxsub,.charthead {
    position: relative;
    display: block;
    width: 100%;
    line-height: 30px;
    min-height: 30px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    border-style: solid;
    border-color: #a9a9a9;
    border-radius: 0;
    border-collapse: collapse;
    border-width: 0;
    border-bottom-width: 1px;
    background-color: #054a78;
    color: #fff;
}
.boxhead {
    font-size: 14px;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    padding:0 8px;text-align:left;
    min-height:30px;line-height:30px;
    border-color: #054a78;

}
.charthead {
    background: 0 0;
    color: #333;
    border: 0;
    padding: 0 5px;
    height: 25px;
    line-height: 25px;
    min-height: 25px;
    margin-bottom: 5px;
    z-index: 1;
}
.box-title,
.boxsub {
    background-color: #a4a6a9;
    color: #333;
    line-height: 25px;
    min-height: 25px;
    font-size: 13px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    box-sizing: border-box;
    z-index: 1;
}
.boxcolumn {
    display: inline-block;
    text-align: left;
    padding: 0 4px;
    line-height: inherit;
    box-sizing: border-box;
    white-space: normal;
    border-width: 1px;
    border-style: solid;
    border-color: #666;
    border-radius: 0;
    border-collapse: collapse;
    border-left-width: 1px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    vertical-align: top;
    min-height: inherit;
}
.boxhead .boxcolumn,.boxsub .boxcolumn {
    text-align: center;
    height: 100%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-color: #fff;
}
.boxcolumn:first-child {
    border-left-width: 0;
}
.boxcontent {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    position: relative;
    border-style: solid;
    border-color: var(--border-color);
    border-radius: 0;
    border-collapse: collapse;
    border-width: var(--border-width);
}
.boxrow {
    font-weight: 400;
    background-color: transparent;
    color: #333;
    border-color: #666;
    display: flex;
}
.boxrow:nth-child(even) {
    background-color: #f0f0f0;
}
.boxrow .boxcolumn {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.boxcolumn.input-good {
    background-color: var(--input-good);
    color: var(--input-color);
}
.boxcolumn.input-caution {
    background-color: var(--input-caution);
    color: var(--input-color);
}
.boxcolumn.input-warning {
    background-color: var(--input-warning);
    color: var(--input-color);
}
.boxcolumn.input-highlight {
    background-color: var(--input-highlight);
    color: var(--input-color);
}

.box-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-grow: 1;
    gap: 0;
}
.box-group {
    display: inline-block;
    flex: 1;
    min-width: min-content;
}
.box-group:not(.hide) + .box-group {
    border-left: var(--border);
}
.box-subtitle {
    width: 100%;
    font-weight: 700;
    text-align: center;
    min-height:20px;line-height:20px;
}
.box-column-2,
.box-span-2 {
    grid-column: span 2;
}
.box-column-3 {
    grid-column: span 3;
}
.box-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}
.box-content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 2px;
    flex-grow: 1;
    height: auto;
    line-height: var(--input-height);
    padding: 4px;
}
.box-content-stacked {
    padding: 1px 8px;
}
.box-label {
    font-size: var(--label-fontsize);
    font-weight: 700;
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: var(--input-height);
    width: auto;
    min-width: 100px; /*, min-content;*/
    text-align: right;
    padding: 0 4px;
}
.box-label::after {
    content: ":";
}
.box-value {
    flex-grow: 1;
    text-align: right;
    line-height: var(--input-height);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 1px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 100%);
    background-size: 6px 1px;
    min-width: min-content;
}
.box-value input:not(.datepicker):not(.timepicker):not([type="color"]),
.box-value select,
.box-value textarea {
    vertical-align: middle;
    width: 100%;
}
.box-controls {
    width: 100%;
    padding: 4px;
}
.box-cover {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    background-color: var(--box-background-faded);
    color: var(--box-color);
}

#app_popuphead {
    text-align: center;
    width: 100%;
    font-weight: 700;
}
.panorama_button {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

#video_player_outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    right: 0;
    bottom: 0;
    height: 100%;
    font-weight: 700;
    text-align: left;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9;
}

#video_player {
    position: relative;
    width: 900px;
    height: 550px;
    padding: 5px;
    margin: 100px auto;
    font-size: 18px;
    z-index: 9;
    background: #fff;
    border: 1px solid #000;
    border-radius: var(--border-radius);
    color: #333;
}

#video_hold {
    position: relative;
    display: inline-block;
}

#video_title {
    width: 500px;
    text-align: left;
    height: 25px;
    line-height: 20px;
    position: relative;
    font-size: 14px;
    font-weight: 700;
}
.video_player {
    width: 885px;
    height: 510px;
    background: #000;
    border: 1px solid #000;
}

#video_close {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 5px;
    top: 5px;
}

#box_close {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 5px;
    top: 5px;
    z-index: 5;
}
.login_button {
    width: 70px;
    height: 25px;
    line-height: 25px;
    margin-top: 2px;
}
.popupq {
    width: auto;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

#user_applicationame {
    width: 250px;
    appearance: none;
    -webkit-appearance: none;
}

#message_login {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    margin-bottom: 5px;
}

#login_wrap {
    text-align: center;
    position: relative;
    margin: 0 auto;
    height: auto;
}

#loginbox {
    text-align: center;
    font-size: 12px;
    height: auto;
    overflow: hidden;
    min-height: 32px;
}
.login-box-wrapper,
.loginalert {
    position: relative;
    min-width: 400px;
    max-width: 500px;
    border-radius: var(--border-radius);
    border: var(--border);
    padding: 20px;
    display: inline-block;
    margin: 20px;
    font-size: var(--font-size-plus2);
    text-align: center;
    background-color: var(--container-back);
    color: var(--container-color);
    font-weight: bold;
    line-height: 24px;
}
.loginalert {
    position: relative;
    display: block;
    font-weight: bold;
    font-size: var(--font-size-plus2);
    max-width: none;
    margin: 10px 20px;
} /*color:#ff3333;*/

#site-container.mobile .login-box-wrapper,
#site-container.mobile .loginalert {
    min-width: 300px;
    width: calc(100% - 20px);
    max-width: 400px;
    margin: 15px auto;
    margin: 10px;
}
.login-box-wrapper .row_head {
    display: block;
}
.login-box-wrapper input,
.login-box-wrapper select {
    height: 35px;
    line-height: 35px;
    text-align: left;
    margin-bottom: 2px;
    padding: 0 5px;
    font-size: 14px;
}

#delete_box {
    width: 750px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 50px;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    height: auto;
}

#app_indexpage {
    text-align: center;
    margin: 0 auto;
}

#login_message {
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    margin-top: 5px;
}

#login_videos {
    width: 1014px;
    position: absolute;
    left: 2px;
    right: 4px;
    bottom: 5px;
    height: 110px;
    text-align: center;
    font-size: 12px;
}

#delete_no,
.delete_yes {
    margin-left: 10px;
    margin-right: 10px;
}

#help_title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.help_item {
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}

#help_1,
#help_2 {
    width: 100%;
    margin-left: 10px;
    text-align: left;
}
.help_box {
    width: 330px;
    text-align: left;
    margin-top: 5px;
}
#help_continue {
    height: 25px;
    line-height: 25px;
    width: 75px;
}
#tab_back {
    position: absolute;
    right: 2px;
    top: -1px;
    width: 30px;
    height: 28px;
    cursor: pointer;
}

#page_print {
    text-align: center;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    border: 0;
}
.convertion_box {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 2px;
    text-align: center;
    font-weight: 700;
    line-height: 20px;
    overflow: visible;
}
.convert_btn {
    display: inline-block;
    width: 20px;
    line-height: 20px;
    height: 20px;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}
.convert_input,
.convert_select {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    width: calc(100% - 6px);
    height: 20px;
    line-height: 20px;
}
.convert_wrapper {
    width: 125px;
    max-width: 125px;
    min-width: 125px;
    height: 25px;
    line-height: 25px;
    display: inline-block;
}
.convert_wrapper.small {
    width: 60px;
}
.convert_wrapper.medium {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}
.convert_wrapper.large {
    width: 175px;
    max-width: 175px;
    min-width: 175px;
}
.convert_wrapper.medium input {
    width: 100px;
}
.convert_wrapper.large input {
    width: 175px;
}
.select_box_body {
    display: table-row-group;
    text-align: left;
    background: 0 0;
}
.srGrid-row.disabled {
    text-align: center;
    color: #333;
}
.srGrid-row-highlight,
.srGrid-row.srGrid-selected:nth-child(even),
.srGrid-selected {
    background-color: #1892ff;
    color: #fff;
}
.optionDelete {
    width: 20px;
    height: 20px;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 2px;
}

#client_logo {
    width: 30px;
    height: 30px;
    display: inline-block;
}
.title_btn {
    font-size: inherit;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    width: auto;
    border-right-width: 0;
    overflow: hidden;
}

#main_menu {
    width: 55px;
    height: 22px;
    line-height: 20px;
    position: relative;
    display: inline-block;
    top: 4px;
    cursor: pointer;
}

#inbox_compose,
#inbox_list {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 12px;
    overflow-y: auto;
    vertical-align: top;
    background: #fff;
    color: #222;
}
#inbox_compose {
    z-index: 11;
    text-align: center;
}
#inbox_list_title {
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
    height: 20px;
    line-height: 16px;
    padding: 2px;
    z-index: 0;
    text-align: center;
    background: #eee;
    border-bottom: 1px solid #dcdcdc;
}
#inbox_list_foot {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    line-height: 30px;
    z-index: 1;
    background: #eee;
    border-top: 1px solid #dcdcdc;
    color: #00f;
}
#message_back,
#message_cancel {
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 0;
    text-decoration: underline;
    height: 20px;
    width: 20px;
}
#message_refresh {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 0;
    text-decoration: underline;
    height: 20px;
    width: 20px;
}
#message_compose,
#message_send,
#messages_reply {
    margin: 0 auto;
    width: 200px;
    text-align: center;
    text-decoration: underline;
}

#message_close {
    margin: 0 auto;
    width: 200px;
    text-align: right;
    text-decoration: underline;
    position: absolute;
    right: 5px;
    top: 0;
    height: 20px;
    line-height: 20px;
    color: #00f;
}
.message_viewed {
    width: 20px;
    height: 20px;
}

#message_image {
    width: 50px;
    display: inline-block;
    border: 1px solid #dcdcdc;
}

#popupnote {
    margin: 0 auto;
    margin-top: 50px;
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    height: auto;
    line-height: 24px;
    text-align: center;
    display: inline-block;
}
.inbox_status {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    right: 2px;
}
.message_body {
    display: inline-block;
    text-align: left;
    font-size: 12px;
    color: #333;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 60px;
    background: #efefef;
    overflow-y: auto;
}
.message_date {
    display: inline-block;
    text-align: left;
    margin-left: 10px;
    font-size: 11px;
    color: #bfbfbf;
}
.message_label {
    width: 90%;
    position: relative;
    display: inline-block;
    text-align: left;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
}
.message_value {
    width: 90%;
    position: relative;
    display: inline-block;
    text-align: left;
    font-weight: 700;
    line-height: 20px;
    margin: 0 auto;
    border: 1px solid #000;
    background: #eee;
}
.message_value input,
.message_value select,
.message_value textarea {
    border-width: 0;
    background: 0 0;
}
.message_value input:focus,
.message_value select:focus,
.message_value textarea:focus {
    border-width: 0;
    background: 0 0;
}
.message_body textarea,
.message_body textarea:focus {
    border-width: 0;
    background: 0 0;
    width: 100%;
    height: 100%;
    line-height: 20px;
    overflow-y: auto;
    max-height: 60px;
    min-height: 20px;
}
.settings_line textarea {
    float: right;
}
.message_delete {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 2px;
    right: 22px;
}
.message_delete_all {
    width: 60px;
    height: 25px;
    position: absolute;
    top: 0;
    right: 44px;
}
.message_icon {
    width: 20px;
    height: 20px;
    position: absolute;
    display: inline-block;
    top: 2px;
    right: 44px;
}
.message_send {
    width: 65px;
    height: 30px;
    margin: 0 auto;
}
.dataTitle,
.data_body {
    position: relative;
    overflow: hidden;
}
.dataBox {
    min-width: 800px;
    margin-top: 0;
    vertical-align: top;
    margin-bottom: 2px;
    position: relative;
    overflow: hidden;
    border: var(--border);
    border-collapse: collapse;
    border-radius: var(--border-radius);
    background-color: var(--box-background-faded);
    color: var(--box-color);
}
.dataBox.full_page,
.data_box.full_page {
    width: calc(100% - 5px);
    min-width: 800px;
    margin-left: 0;
}
.dataBox.mobile {
    width: auto;
    display: inline-block;
    min-width: auto;
    max-width: calc(100%);
}
.data_body,
.print_body {
    vertical-align: top;
    padding: 5px;
    position: relative;
    text-align: left;
}
.data_box {
    width: auto;
    min-width: 300px;
    display: inline-block;
    border: var(--border);
    border-collapse: collapse;
    border-radius: var(--border-radius);
    background-color: var(--box-background-faded);
    color: var(--box-color);
}
.bordered {
    border: var(--border);
    border-collapse: collapse;
}
.filled {
    background-color: var(--box-background-faded);
    color: var(--box-color);
}
.content_boxes.full_page {
    width: calc(100% - 5px);
    min-width: 800px;
    max-width: 1000px;
    margin-left: 0;
}
.editor_box {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 4px;
}

.form-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: start;
    align-items: center;
    min-width: 400px;
    width: auto;
    max-width: 600px;
    padding: 4px;
}
.form-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.form-input {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 0 4px;
    width: 100%;
    flex-grow: 1;
    min-height: var(--input-height);
    outline: 0;
}
/* .form-input.form-half {max-width:50%;width:auto;} */
.form-row-label {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
    text-align: left;
    line-height: normal;
    font-weight: bold;
    margin-top: 4px;
    font-size: 12px;
}
.form-label {
    display: inline-block;
    text-align: left;
    max-width: 50%;
    flex-grow: 1;
    padding-left: 4px;
}
.form-row-value {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.form-value {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#app_popup.filled,
.popup_box,
.popup_box.filled,
.popup_createBox,
.popup_createBox.filled,
.popup_selectBox,
.popup_selectBox.filled,
.select_box {
    background-color: var(--box-background);
    color: var(--box-color);
}
.popup_selectBox,
.popup_createBox,
.popup_box {
    border: var(--border);
    border-radius: var(--border-radius);
    min-width: 300px;
    max-height: calc(100% - 100px);
    max-width: calc(100% - 20px);
    height: auto;
    overflow-y: auto;
}
.popup_selectBox.full-width,
.popup_createBox.full-width,
.popup_box.full-width {
    min-width: 800px;
}

#menu_group.filled,
.popup_box .filled,
.popup_createBox .filled,
.popup_selectBox .filled {
    background-color: var(--box-background);
    color: var(--box-color);
    border: var(--border);
    border-radius: var(--border-radius);
}

.chart-box {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 5px 5px 0;
    white-space: nowrap;
    position: relative;
    min-width: 50px;
    min-height: 50px;
    text-align: center;
    page-break-inside: avoid;
}
.chart-wrapper {
    float: left;
    width: auto;
    height: auto;
    white-space: nowrap;
    position: relative;
    background-color: var(--box-background);
    color: var(--box-color);
    border: var(--border);
    border-radius: var(--border-radius);
}
.chart-fetching {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
}
.chart-content {
    width: auto;
}
.chart-container {
    position: relative;
}
.chart-loader {
    display: block;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    bottom: 0;
    width: 100%;
    line-height: 100px;
    background: rgba(255, 255, 255, 1);
    color: #333;
    font-size: 16px;
}
.chart-canvas {
    box-sizing: border-box;
}
.chart-title {
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    line-height: 30px;
    height: 30px;
    width: 100%;
    display: block;
    margin-bottom: 4px;
    padding:0 8px;
}
.chart-toggle {width:30px;height:30px;float:left;line-height:30px;cursor:pointer;background-position:center;background-size:70%;background-repeat:no-repeat;margin-right:8px;}
.chart-input {
    float: right;
    margin: 2px;
    height: 20px;
    line-height: 20px;
    width: 100px;
}
.chart-box .btn_1,
.chart-box .row_head {
    z-index: 3;
}
.chart-box canvas {
    z-index: 1;
}
.chart-box .chart-loader {
    z-index: 2;
}
.select_box {
    margin-left:4px;
    width: 814px;
    line-height: 20px;
}
.select_box_column {
    width: 12px;
    height: 20px;
    display: none;
    float: left;
    margin-left: 4px;
}
.select_box_column.asc:after {
    content: " ▲";
    display: inline-block;
    margin-left: 1px;
}
.select_box_column.asc,
.select_box_column.desc {
    display: inline-block;
    margin-left: 1px;
}
.select_box_column.desc:after {
    content: " ▼";
}
.box_cover {
    border: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    top: 31px;
    opacity: 0.75;
}

#query_return {
    display: inline-block;
    min-width: 1020px;
}
#map_frame_box {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
#map_frame_box_text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 30px;
    font-size: 24px;
    color: #666;
    font-weight: 700;
    text-align: center;
}
#customer_info {
    width: 300px;
    display: inline-block;
    position: relative;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
#customer_info .faded {
    color: #676767;
}
#customer_info_2 {
    width: 975px;
    height: auto;
    display: inline-block;
}
#customer_map {
    width: 670px;
    height: auto;
    margin: 0 auto;
    position: relative;
    border: 1px solid #666;
    border-radius: 2px;
    display: inline-block;
}
#customer_map_2 {
    width: 975px;
    height: auto;
    position: relative;
    display: inline-block;
    border: 1px solid #666;
    border-radius: 2px;
}
#customer_map_key {
    width: 204px;
    display: table-cell;
    height: auto;
    background: #fff;
    color: #666;
    border-left: 1px solid #666;
}
#customer_list {
    width: 980px;
    height: auto;
    min-height: 50px;
    position: relative;
    margin: 0 auto;
}
.map_wrapper {
    width: 100%;
    display: inline-block;
    padding: 0;
    border-width: 1px;
    margin: 0;
}
.page,
.query_page_box {
    page-break-after: always;
}
.breakhere,
.query_page_box {
    page-break-before: always;
}
.query_row {
    line-height: 20px;
    min-height: 20px;
    width: 100%;
    border: 1px solid #000;
}
.query_row:nth-child(odd):not(.query_row_1, .query_row_2, .query_row_3, .query_row_4, .query_row_5) {
    background-color: #efefef;
}
.shift_row_1,
.srGrid-row:nth-child(even).shift_row_1 {
    background-color: #9affff;
    color: #000;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.shift_row_2,
.srGrid-row:nth-child(even).shift_row_2 {
    background-color: #cbffff;
    color: #000;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.query_bar {
    margin: 3px auto;
    height: 2px;
    width: calc(100% - 2px);
    background: #000;
    color: #000;
}
.query_box {
    width: 100%;
    border: 1px solid #000;
    color: #000;
    line-height: 20px;
    text-align: left;
    display: inline-block;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.query_box input,
.query_box select,
.query_box select:not([multiple]),
.query_box textarea {
    color: #000;
    background-color: #efefef;
    border: 1px solid #333;
    border-radius: 0;
}
.query_box select:not([multiple]) {
    background-image: url(../images/select_arrb.png);
}
select:not([multiple]).form_input_value {
    background: transparent url(../images/select_arrb.png) center right;
}
.query_box .bordered,
.query_box .rb,
.query_box .rbb,
.query_box .rbl,
.query_box .rbr,
.query_box .rbt {
    border-color: #000;
}
.query_box * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#query_header {
    width: 100%;
    max-width: 1020px;
    padding: 10px 0;
    text-align: center;
    height: 45px;
    line-height: 25px;
    font-weight: 300;
    font-size: 18px;
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid #000;
}
#query_params {
    width: 100%;
    max-width: 1020px;
    padding: 5px 0;
}
#query_controls {
    width: 100%;
    max-width: 1020px;
    text-align: left;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    height: 30px;
    line-height: 30px;
    padding: 2px 0;
    vertical-align: middle;
}
#query_filter {
    width: 100px;
    height: 25px;
    line-height: 25px;
    vertical-align: top;
}
#query_details {
    width: auto;
    text-align: left;
    display: block;
    line-height: 25px;
}
.query_row_bad {
    background-color: #faa;
    color: #000;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.query_row_good {
    background-color: #afa;
    color: #000;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.srSign {
    z-index: 9;
    display: inline-block;
    width: 550px;
    min-height: 152px;
    margin: 0 auto;
    background-color: #fff;
    color: #333;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.srSign canvas {
    background: 0 0;
    display: block;
    width: 550px;
    height: 200px;
    color: #000;
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 2px;
    overflow: hidden;
    touch-action: none;
}
.srSign canvas.empty:not(.noback) {
    background-image: url(../images/signback.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}
.srSign .button {
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #01406b;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.srSign .canvas_clear {
    background-color: #6b0101;
}
.srSign img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    pointer-events: all;
    z-index: 2;
}
.icon_popup_close {
    width: 15px;
    height: 15px;
    position: relative;
    top: 0;
    left: 0;
}
#feature_element_list {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 200px;
}
.alpha_filter_list {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    height: 25px;
    line-height: 25px;
}
.alpha_filter {
    width: auto;
    height: 25px;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.alpha_filter.selected {
    text-decoration: underline;
}
.select_box_parent {
    --height: 450px;
    overflow-y: auto;
    max-height: var(--height);
    min-height: var(--height);
    height: var(--height);
    width: 100%;
    display: inline-block;
    overflow-x: hidden;
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    border-color: #000;
}
.select_box_table {
    border-width: 0;
    border-style: solid;
    border-collapse: collapse;
    display: table;
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
    overflow: hidden;
    background: 0 0;
}
.select_box_title {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    display: table-cell;
    overflow: hidden;
    border-style: solid;
    border-collapse: collapse;
    height: 100%;
    vertical-align: middle;
    border-left-width: 1px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-color: #000;
}
.select_box_content {
    text-align: left;
    font-weight: 400;
}
.folder_icon {
    width: 25px;
    height: 20px;
    display: inline-block;
    margin-top: 4px;
    margin-left: 2px;
}
.file_icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-top: 4px;
    margin-left: 10px;
    margin-right: 5px;
}
.document_file_hold {
    position: relative;
    width: 525px;
    text-align: left;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
}
.document_file {
    position: relative;
    width: 813px;
    height: 30px;
    line-height: 30px;
    text-align: left;
}
.document_file_name {
    background: 0 0;
    border: 0;
    height: 20px;
    line-height: 20px;
    width: 100%;
}
.document_file_name:focus {
    border: 1px solid #000;
}

xs .document_list {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}
.document_toggle {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
}
.emptask_status_icon {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 2px;
    background-color: #fff;
    display: inline-block;
    margin: 0 2px;
}
.task_toggle {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 5px;
}
.info_details_box {
    background: #fff;
    color: #666;
}

#file_info {
    position: absolute;
    width: 400px;
    left: 50%;
    transform: translate(-50%);
    top: 175px;
    height: auto;
    padding: 5px;
    z-index: 5;
}

/* Data Style */
.data-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    line-height: 30px;
    padding: 0px 8px;
    font-size: var(--font-size-plus2);
    font-weight: bold;
}
.data-title-close {
    width: 24px;
    height: 24px;
}
.data-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    width: auto;
    overflow: hidden;
}
.data-header {
    flex: 0;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}
.data-header-text {
    flex: 1;
    font-weight: bold;
    text-align: left;
}
.data-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
    min-height:60px;
}
.data-controls {
    flex: 0;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    z-index: 1;
}

/* Orgchart Style */
.orgchart-content {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 8px;
    border-top: var(--border);
    margin-top: 4px;
}
.orgchart-controls-top,
.orgchart-controls-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.orgchart-selector {
    display: flex;
    flex-direction: row;
    padding: 4px;
    line-height: 20px;
    font-size: var(--font-size-plus2);
    transition: all 0.3 ease;
    cursor: pointer;
}
.orgchart-selector:hover {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: bold;
}
.orgchart-selector:nth-child(even) {
    background: rgba(0, 0, 0, 0.04);
}

.orgchart-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
}
/* .orgchart-row:nth-child(even) {background:rgba(0,0,0,0.04);} */

.orgchart-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: start;
    flex-grow: 1;
    padding: 4px;
}
.orgchart-spacer-vertical {
    width: 1px;
    height: 8px;
    color: black;
    background-color: black;
    min-width: 1px;
    max-width: 1px;
    min-height: 8px;
    max-height: 8px;
}
/* .orgchart-column + .orgchart-column {border-left:1px solid #000;} */
.orgchart-box {
    display: inline-block;
    padding: 4px 8px;
    min-width: 100px;
    line-height: 20px;
    font-size: var(--font-size);
    margin: 4px;
    cursor: pointer;
    border: var(--border);
    border-radius: var(--border-radius);
    background-color: #dcdcdc;
    color: #333;
}
.orgchart-box-name {
    display: block;
    width: 100%;
    line-height: 20px;
    height: 20px;
    font-size: var(--font-size-plus2);
    text-align: center;
}
.orgchart-box-level,
.orgchart-box-contact {
    display: block;
    width: 100%;
    line-height: 20px;
    height: 20px;
    font-size: var(--font-size);
    text-align: center;
}
.orgchart-box-add {
    width: 24px;
    height: 24px;
    margin: 4px;
    border: var(--button-border);
    border-radius: var(--button-border-radius);
}

.color-selection-box {
    display: inline-flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 4px;
    justify-content: start;
    align-items: start;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}
.color-selection-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 4px;
}
.color-selection-selector {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #333;
    cursor: pointer;
}

/* Data Table */
.grid-table {
    display: grid;
    gap: 0px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    border: 1px solid #000;
    border-radius: var(--border-radius);
    font-size: var(--font-size);
}
.grid-row {
    display: grid;
    gap: 0px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column: span 7;
}
.grid-cell {
    height: auto;
    min-height: 24px;
    line-height: 24px;
    padding: 0 4px;
    border: 1px solid #dcdcdc;
}
.grid-table-header {
    font-weight: bold;
    text-align: center;
    min-height: 30px;
    line-height: 30px;
    font-size: var(--font-size-plus2);
}

.table {
     display:table;border:1px solid #000;border-radius:var(--border-radius);font-size:var(--font-size);
     width: 100%;height:auto;overflow-y:auto;
}
.table-head {
     display: table-header-group; font-weight: bold; text-align: center; min-height: 30px; line-height: 30px; font-size: var(--font-size-plus2); background-color: #dcdcdc;
}
.table-row {
     display: table-row;
}
.table-cell {
     display: table-cell; height: auto; min-height: 24px; line-height: 24px; padding: 0 4px; border: 1px solid #dcdcdc; vertical-align: middle;
}
.table-body {
     display: table-row-group; width: 100%; height: auto; overflow-y: auto;
}


.info-button {
    min-width: 100px;
    width: auto;
    cursor: pointer;
    text-align: center;
    padding: 0 4px;
    height: 30px;
    line-height: 30px;
}

/* Border Style */
.bora {
    border: 1px solid #000;
    border-collapse: collapse;
}
.borb,
.borl,
.borr,
.bort {
    border: 0 solid #000;
    border-collapse: collapse;
}
.bor0 {
    border-width: 0;
}
.borl0 {
    border-left-width: 0;
}
.borr0 {
    border-right-width: 0;
}
.bort0 {
    border-top-width: 0;
}
.borb0 {
    border-bottom-width: 0;
}
.borl {
    border-left-width: 1px;
}
.borr {
    border-right-width: 1px;
}
.bort {
    border-top-width: 1px;
}
.bor-rad {
    border-radius: var(--border-radius);
}
.borb {
    border-bottom-width: 1px;
}
.rad2 {
    border-radius: 2px;
}
.rad5 {
    border-radius: 5px;
}
.rad10 {
    border-radius: 10px;
}
.doc_img {
    width: 100%;
    height: 100%;
    background: transparent url(../images/upload_document.png);
    color: #000;
}
.vid_img {
    width: 100%;
    height: 100%;
    background: transparent url(../images/upload_video.png);
    color: #000;
}
.attachment_date {
    display: inline-block;
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 65px;
    color: #000;
    text-align: left;
    font-weight: 700;
    font-size: 10px;
    text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff;
}
.doc_text {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 2px;
    cursor: pointer;
    word-wrap: break-word;
    vertical-align: bottom;
    font-size: 14px;
    font-weight: 700;
}

#magnify_glasssms {
    width: 220px;
    height: 180px;
    position: absolute;
    border-radius: 10%;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px px rgba(0, 0, 0, 0.25);
    background-image: url(../images/SMS_FlowChart.png);
    display: none;
}

#schedule_event_0,
#schedule_event_1,
#schedule_event_2,
#schedule_event_3,
#schedule_event_4 {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 2px;
    text-align: center;
    border: 1px solid #000;
}

#schedule_event_0 {
    background: #dcdcdc;
}

#schedule_event_1 {
    background: #0f0;
}

#schedule_event_2 {
    background: #ff0;
}

#schedule_event_3 {
    background: #ff7e00;
}

#schedule_event_4 {
    background: red;
}
.schedule_line {
    width: 768px;
    height: 30px;
    background-size: contain;
    background-image: url(../images/schedule_line.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    margin: 0 auto;
}
.schedule_line_top {
    background-image: url(../images/schedule_line_top.png);
    height: 40px;
}
.schedule_line_topon {
    background-image: url(../images/schedule_line_topon.png);
    height: 40px;
}
.schedule_block {
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 26px;
    min-width: 8px;
    line-height: 26px;
    opacity: 0.7;
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    font-size: 10px;
    z-index: 0;
}
.schedule_block:hover {
    z-index: 2;
    opacity: 1;
}
.schedule_link_box_left {
    background-image: url(../images/eventlinked_left.png);
    width: 5px;
    height: 33px;
}
.schedule_link_box_right {
    background-image: url(../images/eventlinked_right.png);
    width: 5px;
    height: 33px;
}
.s_event {
    text-align: center;
    font-weight: 700;
    width: 100%;
    display: inline-block;
    line-height: 16px;
}
.s_event_0,
.s_event_1,
.s_event_2,
.s_event_3,
.s_event_4 {
    width: 300px;
    height: 45px;
    margin: 0 auto;
}
.s_event_0 {
    background-image: url(../images/s_event_0.png);
}
.s_event_1 {
    background-image: url(../images/s_event_1.png);
}
.s_event_2 {
    background-image: url(../images/s_event_2.png);
}
.s_event_3 {
    background-image: url(../images/s_event_3.png);
}
.s_event_4 {
    background-image: url(../images/s_event_4.png);
}
.s_event_time,
.s_event_title {
    line-height: 15px;
    height: 15px;
    text-align: left;
    display: inline-block;
}
.s_event_title {
    position: absolute;
}
.s_event_title.bad {
    color: #fff;
}
.s_event_time {
    width: 100%;
    line-height: 16px;
}
.event_full {
    overflow: hidden;
}
.event_planned {
    overflow: visible;
}
.scheduled_time {
    position: absolute;
    text-align: left;
    font-size: 11px;
    height: 32px;
    line-height: 16px;
    font-weight: 700;
    word-break: normal;
    white-space: nowrap;
    color: #000;
}
.scheduled_actual_time,
.scheduled_job_time {
    height: 17px;
    line-height: 16px;
    border: 1px solid #000;
}
.scheduled_job_time {
    background-color: rgba(255, 255, 255, 0.7);
}
.schedule-block {
    width: 100%;
    max-width: 100%;
    padding: 2px;
    cursor: pointer;
    text-align: center;
    min-height: 20px;
    line-height: 20px;
    margin: 2px 0;
}
.schedule-block.schedule-select {
    border: 1px solid #666;
    color: #666;
    background-color: #dcdcdc;
}
.schedule-block .schedule-title {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
}
.schedule-block .schedule-date {
    float: left;
    font-size: 12px;
    text-align: left;
    width: auto;
    line-height: 18px;
}
.schedule-block .schedule-count {
    float: right;
    font-size: 12px;
    text-align: right;
    width: auto;
    line-height: 18px;
}
.schedule-block .schedule-type {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
}
.schedule-block.schedule-create {
    opacity: 0.5;
}
.schedule-entry {
    background-color: #fff;
    color: #333;
    overflow: visible;
    box-sizing: border-box;
    width: calc(100% - 4px);
    max-width: 100%;
    padding: 0 5px;
    border-width: 3px;
    cursor: pointer;
    text-align: center;
    min-height: 20px;
    line-height: 20px;
    margin: 2px;
    border-radius: 2px;
    border-style: solid;
    border-color: #a0a0a0;
    border-collapse: collapse;
    position: relative;
}
.schedule-entry-new {
    line-height: 40px;
    height: 40px;
    background-size: 20px;
    opacity: 0.5;
    border: none;
}
.schedule-entry-new:hover {
    background-image: url(../images/plus_grey_flat.png);
    background-position: center;
    background-size: 20%;
    border-color: transparent;
    opacity: 0.5;
}
.schedule-entry-new:active {
    opacity: 1;
}
.schedule-entry-new.small {
    background-image: url(../images/plus_grey_flat.png);
    background-position: center;
    background-size: contain;
    border-color: transparent;
    line-height: 25px;
    height: 25px;
    background-size: 20px;
    opacity: 0.5;
}
.schedule-entry-new.small:hover {
    opacity: 1;
}
.schedule-entry-main,
.schedule-entry-new {
    border-color: transparent;
    border-width: 0;
    background-color: transparent;
    cursor: auto;
}
.entry-title {
    display: block;
    width: 100%;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entry-subtitle {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schedule-entry.entry_emp:after {
    content: " ";
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    width: 20px;
    height: 20px;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #e7e7e7;
}
.schedule-entry.entry_emp.entry_sch:after {
    border-right-color: green;
}
.schedule-entry.entry_emp.entry_pto:after {
    border-right-color: teal;
}
.schedule-entry.entry_emp.entry_uto:after {
    border-right-color: navy;
}
.schedule-entry-indicator.entry_filled:after {
    content: " ";
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    width: 10px;
    height: 10px;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid green;
}
.schedule-entry.entry_flag_time {
    background-color: #faa;
}
.schedule-entry.entry_flag_position {
    background-color: #ffa;
}
.schedule-entry.entry_open {
    background-color: purple;
    color: #fff;
}
.entry_counter {
    background-color: purple;
    color: #fff;
    position: absolute;
    top: 1px;
    right: 1px;
    left: auto;
    bottom: auto;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-right-color: transparent;
    padding: 0 2px;
    z-index: 1;
    width: auto;
    text-align: center;
    font-size: 10px;
    height: 20px;
    line-height: 17px;
    min-width: 20px;
}
.entry_dowcheck {
    display: inline-block;
}
.entry_dowcheck input {
    display: none;
}
.entry_dowcheck span {
    display: inline-block;
    text-align: center;
    width: auto;
    min-width: 20px;
    padding: 0 2px;
    font-size: 10px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #000;
}
.entry_dowcheck:hover span {
    background-color: #afa;
}
.entry_dowcheck.dow_selected span {
    background-color: #0f0;
}
.service_progressbar {
    border: 1px solid #666;
    height: 20px;
    line-height: 20px;
    margin-top: 2px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 14px;
}
.service_progressbar_cover {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 20px;
}
.service_progressbar_text {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    line-height: 20px;
    height: 20px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.colorpicker_b,
.colorpicker_f {
    width: 30px;
    height: 20px;
    border: 1px solid #000;
    cursor: pointer;
}
.colorpicker,
.fcolorpicker {
    z-index: 9;
}
.colorselector {
    width: 100%;
    height: 100%;
}
.label_login {
    font-size: 16px;
}
.chat_icon {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 2px;
}
.menu_btn {
    font-size: 13px;
    font-weight: 700;
}
.page_btn {
    font-size: 12px;
    font-weight: 700;
}
.page_category {
    min-width: 200px;
    width: 200px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
}
.page_alert {
    float: right;
    height: 100%;
    width: 20px;
    margin: 0 5px 0 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/custom/redalerttrismall.png);
}
.page_alert_icon {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/custom/redalerttrismall.png);
}

#page_root_indicator,
.icon_goback {
    background-image: url(../images/custom/restart.png);
}
.menutitle {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    width: 188px;
}

#tab-bar {
    z-index: 2;
    height: 28px;
    position: relative;
    text-align: left;
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    border: 0;
    overflow: visible;
    border-radius: 0;
    padding: 0 0 0 4px;
}

#link_Bar {
    z-index: 2;
    padding: 5px 0;
    line-height: 30px;
    margin-top: 2px;
    height: auto;
    overflow: visible;
    position: relative;
    text-align: left;
    min-width: calc(100% - 5px);
    display: block;
}

#tab-bar.mobile {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 25px;
    line-height: 25px;
    max-height: 25px;
}
.tab_Item {
    position: relative;
    width: auto;
    min-width: 70px;
    top: 0;
    display: inline-block;
    padding: 0 5px;
    margin-right: -1px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    height: 28px;
    border-style: solid;
    border-width: 1px;
    z-index: 0;
    overflow: visible;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    border-radius: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    user-select: none;
    transition: all 0.3s linear;
}

#tab-bar.mobile .tab_Item {
    height: 25px;
    margin-top: 5px;
    line-height: 25px;
}

#tab-bar .btn_0,
#tab-bar .btn_1,
#tab-bar .btn_2 {
    margin: 2px 5px;
    height: 24px;
    line-height: 24px;
}
.btn_1.color-good {
    background-color: var(--color-good);
    color: var(--color-color);
}
.btn_1.color-warning {
    background-color: var(--color-warning);
    color: var(--color-color);
}
.btn_1.color-caution {
    background-color: var(--color-caution);
    color: var(--color-color);
}
.btn_1.color-highlight {
    background-color: var(--color-highlight);
    color: var(--color-color);
}
.tab_Item.active {
    background-color: var(--active);
    color: var(--active-text);
    border: 1px solid #333;
    border-bottom-width: 1px;
    height: 28px;
}
.tab_Item.tab_alert {
    background-color: var(--color-warning);
    color: var(--color-color);
}
.tab_Item.active {
    z-index: 5;
}
.tab_Item.noborder {
    border-style: hidden;
    text-decoration: underline;
}
.tab_Item {
    background: #efefef;
    color: #054a78;
    border-color: #054a78;
}
.tab_Item.active {
    border-color: #054a78;
    border-bottom-width: 0;
    background: #fff;
    color: #054a78;
}

table {
    border-collapse: collapse;
}

tr {
    padding: 0;
    margin: 0;
}

td.rb,
td.rbl,
td.rbr {
    padding: 0;
    margin: 0;
    height: 100%;
    vertical-align: top;
}
.rb,
.rball,
.rbb,
.rbl,
.rbl2,
.rblr,
.rbnone,
.rbr,
.rbr2,
.rbt,
.rbtb {
    height: 100%;
    display: table-cell;
    vertical-align: top;
}
.print_Box {
    background-color: #fff;
    color: #000;
    margin: 0 auto;
    overflow-y: auto;
    display: block;
    min-width: 1020px;
}
.print_body {
    vertical-align: top;
    line-height: 20px;
    font-size: 12px;
    padding: 0;
    overflow-y: auto;
    position: relative;
}
.dataTitle {
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    padding: 0 0 0 2px;
    min-height: 25px;
}
.icon_drop {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
}
.training-wrapper {
    display: block;
    max-width: 1000px;
}
.training-header {
    display: block;
    width: 100%;
    font-size: 18px;
    text-align: left;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
}
.training-box {
    display: inline-block;
    width: 485px;
    border-radius: 5px;
    margin: 0 5px 5px 0;
    padding: 5px 10px;
    text-align: left;
}
.training-box-small {
    display: inline-block;
    width: auto;
    border-radius: 5px;
    margin: 0 5px 5px 0;
    padding: 5px 10px;
    text-align: left;
}
.training-box-header {
    display: block;
    font-size: 14px;
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-weight: 700;
}
.training-box-content {
    display: block;
    font-size: 20px;
    text-align: center;
    width: 100%;
    line-height: 30px;
    font-weight: 700;
}
.training-label {
    float: left;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    width: 100%;
}
.training-label.training-label-short {
    width: calc(100% - 150px);
}
.training-category {
    height: 25px;
    line-height: 25px;
    width: 150px;
    text-align: center;
    position: absolute;
    right: 10px;
    top: -1px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.training-controls {
    float: right;
    line-height: 30px;
    height: 30px;
    width: 150px;
    text-align: right;
}
.training-status-inline {
    float: right;
    width: 100px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    text-align: center;
    margin-right: 5px;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.training-status-count {
    float: left;
    width: auto;
    margin-left: 5px;
    height: 25px;
    line-height: 25px;
    font-weight: 700;
}
.training-status-wrapper {
    float: left;
    position: relative;
    border-radius: 5px;
    width: 100%;
    height: 25px;
    line-height: 25px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.training-status-wrapper.training-status-inline {
    width: calc(100% - 160px);
}
.training-status-wrapper.training-module {
    width: 200px;
}
.trianing-status-text {
    float: right;
    font-size: 12px;
    font-weight: 400;
    width: 40px;
    height: 20px;
    text-align: center;
    font-weight: 700;
}
.training-status {
    width: calc(100% - 50px);
    float: left;
    height: 8px;
    border-radius: 5px;
    margin-top: 9px;
    margin-left: 5px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}
.training-status-icon {
    position: absolute;
    left: 0;
    height: 100%;
    right: auto;
    bottom: 0;
    top: 0;
}
.training-category,
.training-status-wrapper {
    background-color: #eee;
}

#courseware_title {
    width: 100%;
    position: relative;
    height: 30px;
    line-height: 30px;
    display: block;
    font-weight: 700;
    text-align: left;
    font-size: 16px;
}

#courseware_controls {
    width: auto;
    text-align: right;
    float: right;
    height: 30px;
    line-height: 30px;
}

#courseware_menu {
    position: relative;
    display: inline-block;
    overflow-y: auto;
    width: auto;
    text-align: left;
    overflow-y: auto;
    padding: 5px;
}

#courseware_menu_display {
    display: inline-block;
    margin-left: 2px;
    position: relative;
    margin-left: 2px;
}
.courseware_menu {
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 50px;
    background-color: #fff;
}

#courseware_menu_text {
    font-size: 14px;
    width: auto;
    display: inline-block;
    margin-right: 5px;
    text-decoration: underline;
}
.courseware_menu.inactive {
    background: 0 0;
}
.courseware_file {
    width: 100%;
    line-height: 20px;
    height: 20px;
    font-size: 12px;
    text-align: left;
    height: auto;
    width: 100%;
    display: table-row;
    color: #eee;
}

#courseware_menu.small {
    display: none;
    visibility: hidden;
}

#courseware_menu.small .courseware_file {
    display: none;
    visibility: hidden;
}
.courseware_file.nochoice {
    color: #c7c7c7;
    text-decoration: none;
}
.courseware_file.active {
    font-weight: 700;
    color: #fff;
}
.courseware_back {
    width: auto;
    height: auto;
    display: inline-block;
    position: relative;
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

#launch_module {
    position: relative;
    z-index: 1;
    width: 1020px;
    height: 768px;
}
.courseware_btn {
    display: inline-block;
    width: 85px;
    text-align: right;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 1px;
    font-weight: 700;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
}
.courseware_btn div {
    float: left;
    top: 2px;
    width: 20px;
    height: 20px;
    position: relative;
    left: 4px;
}
.courseware_btn.icon_only {
    width: 25px;
    text-align: center;
}
.courseware_btn.icon_only div {
    float: none;
    left: 0;
}
.courseware_status_hold {
    width: 12px;
    display: table-cell;
}
.courseware_status {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-top: 4px;
    margin-left: 2px;
    border: 1px solid #fff;
}
.courseware_status.complete {
    background-color: #0f0;
}
.courseware_status.incomplete {
    background-color: #ff0;
}
.course_certificate {
    background-position: center;
    background-size: contain;
    background-image: url(../images/cert_sai.png);
}
.box_closed,
.box_open {
    position: absolute;
    right: 15px;
    top: 2px;
    width: 15px;
    height: 20px;
}
.message {
    font-size: 25px;
    font-weight: 700;
}
.filter_remove {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 35px;
    top: 8px;
}
.filter_box_1,
.filter_box_2 {
    width: 200px;
    vertical-align: middle;
    text-align: right;
    position: relative;
}
.filter_box_1 {
    position: absolute;
    top: 5px;
    right: 7px;
    height: 50px;
    line-height: 50px;
}
.filter_box_2 {
    height: 25px;
    line-height: 25px;
    margin-top: 1px;
    float: right;
    margin-right: 2px;
}
.row_box,
.row_head {
    border-style: solid;
    border-width: 1px;
}
.pad0 .row_head.srGrid-head {
    border-width: 0;
}
.pad0 .row_box.srGrid-row {
    border-width: 0;
}
.row_head {
    text-align: left;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    font-weight: 700;
    font-size: 13px;
}
.srGrid-head.row_head.lh25 {
    line-height: 25px;
}
.srGrid-head.row_head.lh20 {
    line-height: 20px;
}

.sroc-item {
    border-radius: 4px;
}
.sroc-label {
    font-size: var(--font-size-plus2);
    line-height: 24px;
}
.sroc-label-top {
    font-size: var(--font-size);
    line-height: 20px;
}
.sroc-label-bottom {
    font-size: var(--font-size);
    line-height: 20px;
}

#sr-datalist {
    border-radius: var(--border-radius);
}
.row_head.red,
.srGrid-head.red {
    background-color: var(--error);
    color: #fff;
}
.srGrid-row .srGrid-column span {padding:0;}

.srChart-head,
.table_head {
    background-color: #054a78;
    color: #fff;
}
.table_head.td {
    border-color: #fff;
}
.table_row:nth-child(even) {
    background-color: #f5f5f5;
}
.table_row td,.table_column {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    border-left-width: 1px;
    border-right-width: 1px;
    line-height: 24px;
    padding: 0 4px;
}
table:first-child td:first-child {
    border-left: 0;
}
table:last-child tr td {
    border-bottom: 0;
}

.row_box {
    position: relative;
    display: inline-block;
    height: auto;
}
.row_box.closed {
    height: 30px;
    max-height: 30px;
}
.rows {
    font-size: 13px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 800px;
}
.profile_icon {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin: 2px 2px 0 0;
    color: #666;
    background-color: #dcdcdc;
    font-size: 12px;
    font-weight: 700;
    border-radius: 2px;
    border-style: solid;
    border-color: #666;
    border-width: 1px;
    float: left;
}
.session_icon {
    width: 10px;
    height: 10px;
    margin: 10px 5px 0 0;
    color: #666;
    background-color: #666;
    border-radius: 10px;
    border-style: solid;
    border-color: #666;
    border-width: 1px;
    float: left;
}
.session_icon.active {
    background-color: #0f0;
}
.tshadow {
    text-shadow: 1px 1px 2px #666;
}
.rb,
.rba,
.rball,
.rbb,
.rbl,
.rblr,
.rbr,
.rbt,
.rbtb {
    display: table-cell;
}
.rb,
.rba,
.rball,
.rbb,
.rbl,
.rbl2,
.rblr,
.rbr,
.rbr2,
.rbt,
.rbtb {
    border-style: solid;
    border-collapse: collapse;
    border-color: #002d6e;
    border-width: 0;
    height: 100%;
}
.rbnone {
    border-style: hidden;
}
.level_change {
    display: inline-block;
}
.level_2,
.level_3,
.level_4,
.level_line {
    width: 800px;
    min-height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: left;
    font-weight: 700;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}
.level_3,
.level_4 {
    height: auto;
}
.level_3.close,
.level_4.close {
    height: 30px;
}
.level_2,
.level_2 .row_head {
    text-align: left;
    background: #dcdcdc;
    color: #054a78;
    border-radius: 0;
}
.level_3,
.level_3 .row_head {
    text-align: left;
    background: #ededed;
    color: #054a78;
    border-radius: 0;
}
.level_text {
    line-height: 30px;
    vertical-align: top;
    display: inline-block;
    margin-left: 5px;
    min-height: 30px;
    font-weight: 700;
}
.level_2_box {
    text-align: left;
    position: relative;
    height: auto;
}
.level_closed {
    height: 30px;
}
.level_2.full_page,
.level_3.full_page,
.level_4.full_page,
.level_5.full_page {
    width: 100%;
    min-width: 815px;
    max-width: 1005px;
}
.training_message {
    width: 1020px;
    height: auto;
    line-height: 150px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    text-align: center;
    font-size: 40px;
}
.training_course {
    width: 800px;
    min-height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: left;
    font-weight: 700;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    background: #bfbfbf;
    color: #054a78;
    border-radius: 0;
}
.training_topic {
    width: 815px;
    min-height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: left;
    font-weight: 700;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    background: #dcdcdc;
    color: #054a78;
    border-radius: 0;
}
.training_box {
    width: 800px;
    position: relative;
    display: inline-block;
    text-align: left;
}
.training_line {
    width: 815px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: left;
    font-weight: 700;
    display: inline-block;
    position: relative;
}
.training_text {
    line-height: 30px;
    vertical-align: top;
    display: inline-block;
    margin-left: 5px;
    min-height: 30px;
}
.todolist_box {
    position: relative;
}
.todolist_box.level_closed {
    height: 21px;
}
.level_img_closed,
.level_img_open {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 2px;
    right: 2px;
}
.level_status,
.training_status {
    position: relative;
    top: 4px;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
}
.training_status {
    width: 100%;
    font-size: 14px;
}
.level_nostatus,
.level_status {
    width: 100px;
    font-size: 12px;
}
.level_status {
    border: 1px solid #000;
    border-radius: 3px;
}
.level_nostatus {
    height: 30px;
    line-height: 30px;
    min-height: 30px;
    position: relative;
}
.level_ind_back,
.training_ind_back {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: inline-block;
    height: 20px;
}
.level_ind_text,
.progress_text,
.training_ind_text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 20px;
    line-height: 20px;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 10px;
}
.level_action,
.level_launch {
    width: 75px;
    height: 25px;
    line-height: 25px;
    top: 1px;
}
.label_top {
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-bottom: 2px;
}
.bold_left,
.bold_right,
.label_left,
.label_right {
    font-size: var(--label-fontsize);
    font-weight: 700;
    vertical-align: top;
    display: inline-block;
}
.bold_left,
.label_left {
    text-align: right;
    margin-right: 2px;
}
.label_left {
    min-height: 27px;
    line-height: 27px;
    font-size: inherit;
}
.bold_right,
.label_right {
    text-align: left;
}
.label_value {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 400;
    display: inline-block;
}
.level_ind_icon {
    display: inline-block;
    width: 10px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: 1px solid #333;
    position: relative;
    top: 2px;
    background: #fff;
    overflow: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.bold_left,
.bold_right {
    font-size: 12px;
}
.value_center,
.value_left,
.value_right {
    display: inline-block;
    min-height: 20px;
    position: relative;
}
.value_center input,
.value_left input,
.value_right input {
    width: calc(100% - 6px);
}
.value_left {
    text-align: left;
}
.value_center {
    text-align: center;
}
.value_right {
    text-align: right;
}
.btn_assign,
.btn_assign1,
.btn_unassign,
.btn_unassign1 {
    position: absolute;
    font-size: 14px;
}
.btn_assign {
    left: 25px;
    top: 75px;
}
.btn_unassign {
    left: 25px;
    top: 150px;
}
.btn_assign1 {
    left: 25px;
    top: 25px;
}
.btn_unassign1 {
    left: 25px;
    top: 100px;
}
.hr_indexpage {
    height: 1px;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
}
.hrm {
    height: 2px;
    width: 186px;
}
.hbar {
    margin-top: 3px;
    margin-bottom: 2px;
    height: 2px;
    width: 100%;
}
.hr_calendar {
    margin-top: 1px;
    margin-bottom: 1px;
    height: 1px;
    width: 100%;
    background-color: #dcdcdc;
}
.link_bad,
.link_good {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.link_bad {
    background-image: url(../images/questionmarko.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.link_good {
    background-image: url(../images/checkmarkg.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.home_row {
    width: 100%;
    display: inline-block;
    text-align: left;
    height: 22px;
    line-height: 22px;
}
.menu-box {
    width: calc(100% - 4px);
    position: relative;
    height: 30px;
    min-height: 30px;
    border-radius: 2px;
    text-align: left;
    transition: height 0.3s linear;
}
.menu-box.single {
    border-top: 0;
}
.menu_category {
    width: 187px;
    text-align: center;
    font-weight: 700;
    margin-top: 15px;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    border-top: 0;
}
.menudn,
.menudot,
.menudoto,
.menudotw,
.menusel,
.menuup {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 20px;
}
.menu_btn,
.page_btn {
    width: 100%;
    position: relative;
    text-align: left;
    height: 25px;
    line-height: 25px;
    cursor: pointer;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.menubox_child {
    width: 100%;
}
.menubox_child:last-child,
.menubox_child:last-child.page_btn {
    border-bottom: 0;
}
.menu_text {
    position: relative;
    float: left;
    width: 135px;
    text-align: left;
    height: 100%;
    line-height: inherit;
    padding-left: 10px;
}
.menu_icon {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 3px;
}
.menu_status_icon {
    position: relative;
    float: right;
    width: 20px;
    height: 100%;
    margin: 0 5px 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.page_text {
    position: relative;
    line-height: 25px;
    height: 25px;
    line-height: inherit;
    font-size: 12px;
    float: left;
    width: 135px;
    text-align: left;
    padding-left: 10px;
}
.appswitch:last-child {
    border-bottom-width: 0;
}
.icon_inner,
.icon_inner2,
.menu_icon_o,
.menu_icon_w {
    position: absolute;
}
.menu_icon_w {
    width: 23px;
    height: 23px;
    right: 4px;
    top: 4px;
}
.select_icon {
    position: relative;
    width: 10px;
    height: 10px;
    right: 0;
    top: 5px;
    display: inline-block;
    margin-left: 5px;
}
.header_icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    margin-top: 4px;
    display: inline-block;
    margin-right: 5px;
}
.index_icon,
.page_title_icon {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 3px;
    width: 20px;
    height: 20px;
}
.page_title_icon {
    left: -2px;
    top: 2px;
}
.index_icon {
    top: 5px;
}
.index {
    min-width: 75px;
    width: auto;
    height: 25px;
    line-height: 25px;
    margin-right: 2px;
    margin-bottom: 2px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.index_buttons {
    margin-left: 10px;
    width: 580px;
    height: auto;
    position: relative;
    display: inline-block;
    text-align: left;
}
.button_icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: -20px;
    top: 2px;
}
.button_text {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    left: -15px;
    top: 2px;
}
.menu_icon_o {
    width: 20px;
    height: 20px;
    left: 4px;
    top: 3px;
}
.menu_icon_b {
    width: 20px;
    height: 20px;
    position: relative;
    top: 2px;
    margin-right: 5px;
    left: -3px;
    top: -1px;
}
.icon_inner2 {
    width: 20px;
    height: 20px;
}
.text_inline {
    line-height: inherit;
    text-align: left;
    padding: 0 5px;
}
.home_button {
    width: 35px;
    height: 35px;
    margin: 0 5px 5px 0;
    display: inline-block;
}
.file_delete,
.file_details,
.file_download,
.file_view {
    margin: 0;
    bottom: 2px;
    width: 25px;
    height: 25px;
    position: absolute;
    min-height: 20px;
    max-height: 25px;
    min-width: 25px;
    max-width: 25px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    line-height: 25px;
}
.file_delete {
    right: 1px;
}
.file_download {
    right: 28px;
}
.file_details {
    left: 2px;
}
.file_view {
    left: 1px;
}
.singleImg {
    height: 20px;
    width: 20px;
    position: relative;
    top: 3px;
    margin: 0 auto;
}
.upload_arrow {
    height: 40px;
    width: 40px;
    position: relative;
    margin: 0 auto;
    top: 45px;
}
.label_o {
    font-weight: 700;
    font-size: 14px;
    text-align: right;
}
.info {
    padding-left: 2px;
    min-height: 20px;
}
.detail_box {
    width: 740px;
    height: 75px;
    position: absolute;
    top: 70px;
    left: 20px;
    text-align: left;
    z-index: 2;
}
.btn_r {
    line-height: 20px;
    min-height: 20px;
    margin: 0;
    margin-left: 2px;
    height: 20px;
    text-align: center;
}
.menu.disabled,
.page.disabled {
    cursor: auto;
}
.settings_line {
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: right;
}
.settings_line_only,
.value_line {
    display: inline-block;
    height: auto;
    position: relative;
    text-align: right;
    min-height: 27px;
    line-height: 27px;
}
.dotted_line {
    border: none;
}
.dotted_line:after,
.settings_line:after,
.settings_line_only:after {
    content: " ";
    height: 1px;
    display: block;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 100%);
    background-size: 6px 1px;
}
.settings_line_only div:not(.btn_1):not(.btn_2):not(.btn_3),
.settings_line_only span:not(.btn_1):not(.btn_2):not(.btn_3),
.value_line div,
.value_line span {
    -webkit-user-select: text;
    user-select: text;
}
.btn_1,
.btn_2,
.btn_3 {
    -webkit-user-select: none;
    user-select: none;
}
.btn_image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/camera_gray.png);
    cursor: pointer;
}
.course_box,
.toggle_box {
    width: 800px;
    text-align: left;
    position: relative;
}
.course_box {
    border: 1px solid #054a78;
}
.toggle_box.toggle_box_open {
    height: auto;
}
.toggle_box.toggle_box_closed {
    height: 30px;
    vertical-align: top;
}
.course_box.level_closed {
    height: 32px;
}
.course_box.level_open {
    height: auto;
}
.block_full {
    background-color: #0f0;
    color: #000;
    border: 1px solid #000;
    border-radius: 2px;
    height: 32px;
    font-size: 10px;
}
.block_full.conflict {
    background-color: red;
    color: #fff;
}
.block_full.buffer {
    background-color: #dcdcdc;
    color: #000;
}
.block_break {
    background-color: #0ff;
    color: #000;
    border: 1px solid #fff;
    border-radius: 2px;
    height: 32px;
    pointer-events: none;
    vertical-align: bottom;
    font-size: 10px;
}
.block_full.block_title {
    background: 0 0;
    pointer-events: none;
}
.block_full.block_title.conflict {
    color: #fff;
}
.user_event {
    position: absolute;
    top: 0;
    height: 30px;
    line-height: 15px;
    text-align: left;
    cursor: pointer;
}
.vdivide {
    position: relative;
    display: inline-block;
    width: 1px;
    height: 100%;
    background: #fff;
    margin: auto 0 auto 0;
}
.clock_outer {
    width: 150px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    position: relative;
    height: 60px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    margin: 2px;
}
.clock_date {
    width: 50px;
    text-align: left;
    position: absolute;
    top: 1px;
    left: 3px;
}
.clock_time {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    font-size: 24px;
    line-height: 24px;
}
.clock_seconds {
    width: 35px;
    text-align: left;
    position: absolute;
    top: 22px;
    right: 3px;
}
.clock_utc {
    width: 40px;
    text-align: left;
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 10px;
}
.clock_name {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40px;
    right: 0;
    left: 0;
}
.clock_delete {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 2px;
    bottom: 2px;
}
.clock_add {
    position: absolute;
    right: 2px;
    top: 0;
}
.paper {
    background: #fff;
    color: #000;
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding: 5px;
}
.paper.vertical {
    width: 800px;
    min-width: 800px;
    max-width: 800px;
    height: 1035px;
    min-height: 1035px;
    max-height: 1035px;
}
.paper.horizontal {
    width: 1035px;
    height: 800px;
}
.todolist_list {
    width: 800px;
    position: relative;
    height: 580px;
    text-align: left;
    vertical-align: top;
    display: inline-block;
    height: auto;
    margin-right: 5px;
    position: relative;
    padding: 0;
}

#todolist_details {
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    position: relative;
    text-align: left;
    vertical-align: top;
    display: inline-block;
    height: auto;
}
.todolist_label {
    margin-left: 25px;
    width: 700px;
}
.todlist_new {
    width: 500px;
    text-align: left;
    vertical-align: middle;
    line-height: 30px;
    height: 30px;
    position: relative;
}
.todolist_header {
    width: 800px;
    height: 20px;
    line-height: 20px;
    text-align: left;
    font-weight: 700;
    overflow: hidden;
}
.todolist_subheader {
    width: 800px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
}
.todolist_status {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 3px;
    top: 3px;
    cursor: pointer;
}
.todolist_priority {
    width: 9px;
    height: 18px;
    position: absolute;
    right: 2px;
    top: 3px;
}
.todolist_task {
    position: relative;
    text-align: left;
    line-height: 25px;
    height: auto;
    width: 800px;
    word-wrap: break-word;
}
.todolist_task_delete,
.todolist_task_edit {
    width: 20px;
    height: 20px;
    text-align: center;
    cursor: pointer;
}
.todolist_task_edit {
    position: absolute;
    right: 50px;
    top: 2px;
}
.todolist_task_delete {
    position: absolute;
    right: 20px;
    top: 2px;
}

#todolist_tasks {
    height: 520px;
    overflow-y: auto;
}

#hazard_header {
    width: 100%;
    position: relative;
    height: 75px;
}

#hazard_head {
    width: 745px;
    height: 75px;
    display: inline-block;
}

#hazard_step_name,
#hazard_step_pos {
    font-weight: 700;
    display: inline-block;
}

#hazard_step_name {
    font-size: 18px;
    text-align: left;
    width: 580px;
}

#hazard_step_pos {
    font-size: 16px;
    text-align: right;
    width: 150px;
}

#hazard_content {
    width: 790px;
    height: 845px;
    position: relative;
    text-align: left;
    border: 1px solid #000;
    margin-top: 5px;
    padding-left: 2px;
    padding-right: 2px;
}

#hazard_footer {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100%;
}

#hazard_steps {
    position: relative;
    display: inline-block;
    line-height: 20px;
    height: 20px;
    margin-top: 5px;
    margin-left: 5px;
    width: 300px;
}
.report_logo_strataero {
    background-image: url(../images/report_logo.png);
    width: 44px;
    height: 75px;
    display: inline-block;
}
.hazcat_outer,
.hazcat_outer_first {
    line-height: 20px;
    height: 20px;
    margin-top: 20px;
    margin-bottom: 5px;
    text-align: left;
    display: table;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
.hazcat_outer_first {
    margin-top: 5px;
}
.hazcat_title {
    width: 200px;
    padding-left: 10px;
    margin-right: 5px;
    line-height: 20px;
    font-size: 15px;
    font-weight: 700;
    display: inline-block;
    background: #000;
    color: #fff;
}
.hazcat_bar {
    height: 2px;
    line-height: 20px;
    vertical-align: middle;
    background-color: #000;
    width: 525px;
    display: table-row;
    text-align: right;
}
.haz_hr {
    height: 2px;
    max-height: 2px;
    min-height: 2px;
    background: #000;
    color: #000;
    border: 0;
    display: inline-block;
}
.hazard_div {
    margin: 5px auto 5px auto;
    height: 2px;
    background-color: #333;
    color: #333;
    width: 90%;
}
.hazard_bar {
    margin: 5px auto 5px auto;
    height: 2px;
    background-color: #000;
    color: #000;
    width: 95%;
}

#hazard_controls {
    width: 100%;
    height: 35px;
    text-align: left;
    line-height: 35px;
}

#hazard_signature {
    width: 100%;
    height: 30px;
    font-weight: 700;
    text-align: right;
    vertical-align: bottom;
}
.step {
    width: 20px;
    height: 20px;
    display: inline-block;
    z-index: 0;
    text-align: center;
    font-weight: 700;
    margin-right: 2px;
    cursor: pointer;
}
.risk_table {
    margin: 0 auto;
    width: 525px;
    font-weight: 700;
    line-height: 20px;
    border: 1px solid #000;
    border-collapse: collapse;
}
.response_table {
    margin: 0 auto;
    width: 700px;
    font-weight: 700;
    line-height: 20px;
    border: 1px solid #000;
    border-collapse: collapse;
}
.risk_title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #000;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    height: 20px;
    line-height: 20px;
}
.risk_cell,
.risk_cell_1,
.risk_cell_2,
.risk_cell_3,
.risk_cell_4 {
    display: table-cell;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
    border-color: #000;
    border-collapse: collapse;
    border-style: solid;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 0;
    border-right-width: 0;
}
.risk_cell_1 {
    width: 125px;
    text-align: right;
    border-left-width: 0;
    padding-right: 2px;
    min-width: 125px;
    max-width: 125px;
}
.risk_cell_2 {
    width: 125px;
    text-align: right;
    border-left-width: 0;
    padding-right: 2px;
    min-width: 125px;
    max-width: 125px;
}
.risk_cell_3 {
    width: 575px;
    text-align: left;
    padding-left: 2px;
    padding-right: 2px;
    min-width: 575px;
    max-width: 575px;
}
.risk_1 {
    background: red;
}
.risk_2 {
    background: #ffa200;
}
.risk_3 {
    background: #ff0;
}
.risk_4 {
    background: #0ff;
}
.risk_5 {
    background: #0f0;
}
.courseware_diagram {
    background-image: url(../images/courseware_diagram.png);
    width: 295px;
    height: 202px;
}
.timesheet_button {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    position: relative;
}
.timesheet_button_icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    margin-left: 2px;
}
.timesheet_flag_icon,
.timesheet_flag_icon_1,
.timesheet_flag_icon_2,
.timesheet_flag_icon_3,
.timesheet_notes_icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    top: 0;
    margin-right: 2px;
}
.timesheet_cell {
    position: relative;
    border-bottom: 1px;
    vertical-align: top;
    text-align: center;
}
.timesheet_delete_icon {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 2px;
    top: 0;
}
.timesheet_flags {
    width: 100%;
    height: 15px;
    line-height: 15px;
    position: relative;
    text-align: right;
}
.timesheet {
    background: 0 0;
}
.timesheet.userflagged {
    background: #aff;
    color: #000;
}
.timesheet.adminflagged {
    background: #ffa;
    color: #000;
}
.timesheet_shift {
    margin-bottom: 5px;
}
.back_eee {
    background-color: #eee;
}
.back_fff {
    background-color: #fff;
}
.timesheet_create.clickable.btn {
    opacity: 1;
}
.print_row1 {
    background-color: #999;
}
.print_row2 {
    background-color: #bbb;
}
.print_row3 {
    background-color: #ddd;
}
.print_row4 {
    background-color: #eee;
}
.print_row5 {
    background-color: #fff;
}
.row_control {
    height: 25px;
    line-height: 25px;
    width: 30px;
    position: absolute;
    right: 2px;
    top: 0;
    text-align: center;
    min-width: 30px;
    max-width: 30px;
}
.menubtn_small {
    width: 20px;
    height: 20px;
    line-height: 25px;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-left: 5px;
    box-shadow: none;
    text-shadow: none;
}
.menubtn_icon {
    width: 15px;
    height: 15px;
    position: relative;
    left: 2px;
    top: 2px;
}
.icon_arrd,
.icon_arrr {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 15px;
    height: 15px;
}
.delete_right {
    position: relative;
    float: right;
}

#query_top_wrapper {
    width: 100%;
    position: fixed;
    height: 32px;
    text-align: center;
    bottom: -3px;
    left: 0;
    right: 0;
}

#query_top {
    height: 30px;
    line-height: 30px;
    width: auto;
    padding: 0 5px;
    position: absolute;
    right: 25px;
    bottom: 10px;
    top: auto;
    left: auto;
}

#query_loader {
    width: 100%;
    height: auto;
    line-height: 30px;
    min-height: 60px;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#location_get {
    position: absolute;
    right: 2px;
    top: 2px;
    text-align: center;
    display: inline-block;
}
.progress_meter {
    text-shadow: none;
}
.opacBack {
    background: rgba(0, 46, 109, 0.5);
}
.alpha_filter {
    color: #333;
}
.alpha_filter.selected {
    color: #054a78;
    font-weight: 700;
}
.alpha_filter.disabled {
    color: #dcdcdc;
    cursor: auto;
}
.month_selector {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    position: relative;
    margin-right: 1px;
    margin-left: 1px;
}
.calendar_selector {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    position: relative;
    margin-right: 1px;
    margin-left: 1px;
    margin-top: 2px;
    padding-left: 5px;
    padding-top: 0;
    padding-right: 5px;
    font-size: 18px;
    font-weight: 700;
    background: 0 0;
    color: #000;
    border: 0;
    box-shadow: none;
    text-shadow: none;
}
.calendar_selector:active,
.calendar_selector:focus,
.calendar_selector:hover {
    background: 0 0;
}
.calendar_selector option {
    text-align: center;
}
.calendar_row {
    display: inline-block;
    width: 815px;
    height: 120px;
    border-width: 0;
    position: relative;
    overflow: hidden;
}
.calendar_row.small {
    width: 154px;
    height: 25px;
    border-bottom-width: 1px;
}
.calendar_row.last {
    border-bottom: 0;
}
.calendar_row.schedule,
.calendar_row.week {
    border-top: 0;
    height: 700px;
    overflow: auto;
}
.calendar_row.schedule.selected {
    border-top: 0;
    height: 350px;
    overflow: auto;
}
.calendar_cell {
    display: table-cell;
    width: 116px;
    height: 119px;
    border: 1px solid #aaa;
    border-top: 0;
    border-right: 0;
    position: relative;
    overflow: hidden;
    background-size: auto;
}
.calendar_cell.small {
    width: 22px;
    height: 25px;
}
.calendar_cell.week {
    height: 700px;
}
.calendar_cell.first {
    border-left: 0;
}
.calendar_cell.last {
    border-right: 0;
}
.calendar_cell.bottom {
    border-bottom: 0;
}
.calendar_cell.disabled {
    background: #eee;
}
.calendar_cell.after {
    background-image: url(../images/date_after.png);
    background-repeat: no-repeat;
    background-position: center;
}
.calendar_cell.birth {
    background-image: url(../images/date_birth.png);
    background-repeat: no-repeat;
    background-position: center;
}
.calendar_cell.current_date {
    background-color: #fcffdc;
}
.calendar_cell.selected_date {
    background-color: #beffa8;
    color: #666;
}
.calendar_doy_number,
.calendar_noe_number {
    position: absolute;
    left: 0;
    top: -1px;
    width: 21px;
    text-align: center;
    color: #aaa;
    font-size: 14px;
    font-weight: 400;
}
.calendar_noe_number {
    left: auto;
    right: 2px;
    font-size: 12px;
}
.calendar_doy_number.small {
    font-size: 12px;
    text-align: center;
    width: 100%;
    left: 0;
    top: 0;
    height: 25px;
    line-height: 25px;
}
.course_box {
    background: #fff;
    border-radius: 2px;
}
.popup_box,
.popup_createBox,
.popup_selectBox {
    position: fixed;
    width: auto;
    left: 50%;
    top: 40px;
    transform: translate(-50%, 0);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}
.popup_box {
    z-index: 10;
}
.popup_createBox {
    z-index: 9;
}
.popup_selectBox {
    z-index: 11;
}
.shadowed {
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.75);
}

#courselevel_controls {
    float: right;
    width: auto;
    height: 30px;
    line-height: 30px;
    text-align: right;
}
.appswitch {
    background-color: #fff;
    color: #054a78;
    border-bottom: 1px solid #054a78;
}

#certificate_id {
    color: #efefef;
}
.box_open {
    background-image: url(../images/box_down.png);
}
.box_closed {
    background-image: url(../images/box_up.png);
}
.clock_outer {
    background: #dbedfa;
    color: #000;
    border: 1px solid #012e6f;
    border-radius: 3px;
}
.bordern {
    border: 0;
}
.bordera {
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #000;
}
.borderl {
    border-left-width: 1px;
    border-style: solid;
    border-color: #000;
}
.borderr {
    border-right-width: 1px;
    border-style: solid;
    border-color: #000;
}
.bordert {
    border-top-width: 1px;
    border-style: solid;
    border-color: #000;
}
.borderb {
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #000;
}
.btndisabled {
    opacity: 0.5;
}

#calendar_events {
    border: 1px solid #002d6e;
}
.calendar_event {
    text-shadow: none;
}
.calendar_events {
    border-radius: 2px;
}
.event_color_20 {
    background-color: #002d6e;
    color: #fff;
    border: 1px solid #000;
}

#schedule_event_1,
#schedule_event_2,
#schedule_event_3 {
    border: 1px solid #000;
}
.level_2.topic:hover {
    background-color: #bbc8f7;
}
.content_box {
    font-size: 13px;
    line-height: 20px;
    background-color: #fff;
    text-align: left;
    color: #000;
    width: 100%;
    height: 102px;
    display: block;
    position: relative;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-top: 1px solid #dcdcdc;
    -webkit-transition: background-color 1s, border 1s, height 1s;
    transition: background-color 1s, border 1s, height 1s;
    padding: 5px;
}
.content_box.simple {
    height: 35px;
}
.content_box.expanded {
    height: auto;
    border-top: 1px solid #dcdcdc;
}
.content_box:hover {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    background-color: #f5f5f5;
}
.content_box.expanded:first,
.content_box:first {
    border-top: 0;
}
.content_boxes {
    padding: 5px;
    height: auto;
    overflow: hidden;
}
.content_box:first-child {
    border-top: 0;
}
.content_box:last-child {
    border-bottom: 0;
}
.box_image {
    float: left;
    width: 95px;
    height: 95px;
    vertical-align: middle;
    background-color: #efefef;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.box_header {
    display: inline-block;
}
.box_header.sitelink {
    min-height: 25px;
}
.box_title {
    font-size: 20px;
    font-weight: 700;
    color: #232176;
    line-height: 25px;
    min-height: 25px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box_content {
    font-size: 14px;
    padding: 0 5px;
    text-align: left;
    height: auto;
    word-wrap: normal;
    word-break: normal;
    white-space: normal;
}
.box_source {
    font-size: 12px;
    color: #999;
    height: auto;
    overflow: hidden;
    line-height: 20px;
    display: block;
}
.box_body {
    color: #000;
    height: auto;
    display: block;
    font-size: 13px;
    line-height: 20px;
    margin-top: 5px;
}
.box_toggle {
    width: 30px;
    height: 30px;
    right: 5px;
    top: 5px;
    position: absolute;
}
.box_toggle.simple {
    top: 2px;
}
.formatted_link,
.formatted_link:active,
.formatted_link:visited {
    color: #00f;
}
.formatted_link:hover {
    text-decoration: underline;
}
.module_time {
    color: #333;
}
.fade {
    opacity: 0.5;
}
.attach_download {
    position: absolute;
    right: 1px;
    top: 50px;
}
.attach_delete {
    position: absolute;
    right: 1px;
    top: 10px;
}
.attach_delete_placholder {
    position: absolute;
    right: 2px;
    top: 2px;
}
.attach_placeholder {
    width: 190px;
    margin: 1px;
    text-align: center;
    height: 190px;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.attach_name {
    width: 160px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 1px;
    bottom: 1px;
}
.attach_btn {
    width: 20px;
    height: 20xp;
    line-height: 20px;
    position: absolute;
    right: 2px;
    bottom: 1px;
}
.attach_btn.delete {
    top: 2px;
    right: 2px;
}
.attach_btn.view {
    top: 2px;
    left: 2px;
}
.attach_progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 0;
    padding: 0;
    background-color: #0f0;
    color: #fff;
}
.ddm_helpback {
    height: 100%;
    min-width: 1000px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0;
    display: block;
    background-color: #fff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
    background: #d7d7d7;
    color: #505050;
}
.ddm_helptitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    height: 25px;
    width: 1000px;
    display: inline-block;
}
.ddm_helpmenu {
    width: 195px;
    display: inline-block;
    overflow: hidden;
    height: 100%;
}
.ddm_helpmenu_inner {
    width: 190px;
    display: inline-block;
    overflow-y: auto;
    height: 100%;
    margin-left: 2px;
    background-color: #fff;
    color: #222;
}
.ddm_helpmenubox {
    line-height: 15px;
    font-size: 12px;
    text-align: left;
    min-height: 15px;
    margin-bottom: 2px;
}
.ddm_helpicon {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin-left: 2px;
    margin-right: 2px;
}
.ddm_helpmenu_icon {
    background-image: url(../images/custom/open.png);
    width: 12px;
    height: 12px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 1px;
    display: inline-block;
}
.ddm_helpmenu_icon.active {
    background-image: url(../images/custom/close.png);
}
.ddm_helpfolder {
    background-image: url(../images/folder_yellow.png);
    width: 15px;
    height: 15px;
}
.ddm_helpmenu_text {
    line-height: 15px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}
.ddm_helpmenubox_child {
    width: 100%;
}
.ddm_helpmenubox_child.menu_open {
    margin-top: 2px;
}
.ddm_helpfile {
    background-image: url(../images/file_grey.png);
    width: 15px;
    height: 15px;
}
.ddm_helpcategory {
    font-size: 12px;
    text-align: center;
    width: 100%;
    margin-bottom: 2px;
    font-weight: 700;
}
.ddm_helppage {
    font-size: 12px;
    text-align: left;
    width: 100%;
    margin-bottom: 2px;
}
.ddm_helppage.active {
    background: #efefef;
    font-weight: 700;
}
.ddm_helpcontent {
    display: inline-block;
    height: auto;
    width: 805px;
    background-color: #fff;
    min-height: 500px;
}
.ddm_helpcontent_inner {
    width: 100%;
    height: auto;
    background-color: #fff;
    font-weight: 400;
    overflow: hidden;
    background: #fff;
    color: #666;
}
.ddm_helpcontent_title {
    font-size: 17px;
    width: 100%;
    height: 31px;
    line-height: 31px;
    text-align: left;
    display: inline-block;
    font-weight: 700;
    background: #dcdcdc;
    color: #666;
}
.ddm_helpcontent_body {
    font-size: 14px;
    width: 800px;
    height: auto;
    line-height: 20px;
    text-align: left;
    display: inline-block;
    padding-left: 2px;
    padding-right: 2px;
    color: #222;
}
.content_header {
    display: inline-block;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    height: 20px;
    margin-bottom: 5px;
}
.content_subheader {
    display: inline-block;
    text-align: left;
    font-weight: 700;
    font-size: 15px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 2px;
}
.content_label {
    display: inline-block;
    font-weight: 700;
    text-align: right;
    margin-right: 2px;
}
.content_indent {
    margin-left: 50px;
    display: inline-block;
    font-size: 14px;
}
.content_tab {
    width: auto;
    min-width: 70px;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -1px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 0;
    height: 20px;
    border-width: 1px;
    border-style: solid;
}
.content_icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
}
.content_text {
    font-size: 14px;
    display: inline-block;
}

#ddm_helpcontent_footer,
#ddm_helpcontent_header {
    font-size: 16p;
}

#ddm_helpcontent_body {
    padding-left: 10px;
}

.attachment-wrapper {
    display: inline-flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 2px;
}
.attachment-name {
    width: 160px;
    max-width: 160px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    border: 1px solid #dcdcdc;
    border-radius: var(--border-radius);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}
.attachment-buttons {
    width: auto;
    display: inline-flex;
    margin:0 4px;
    gap:2px;
    flex-direction:row;
    align-items:center;
    justify-content:start;
}

.filepreview_box {
    position: absolute;
    height: 300px;
    width: 300px;
    left: 100px;
    top: 100px;
    border: 1px solid #333;
    z-index: 500;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.5);
}
.filesystem_root {
    width: 100%;
    display: inline-block;
    font-weight: 700;
    text-align: left;
    font-size: 13px;
    color: #666;
    background: #ccc;
    position: relative;
    height: 25px;
    line-height: 25px;
}
.filesystem_box {
    border: 1px solid #666;
}
.filesystem_folder {
    width: 100%;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    position: relative;
    font-weight: 700;
    background: #ddd;
    border-style: solid;
    border-color: #333;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 1px;
}
.filesystem_folder.sub {
    background: #eee;
    border: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.filesystem_folder.owner {
    border: 0;
    background: 0 0;
}
.filesystem_preview_box {
    position: relative;
    display: inline-block;
    height: auto;
    min-height: 120px;
    width: 800px;
    text-align: left;
}
.filesystem_preview {
    position: relative;
    display: inline-block;
    height: 118px;
    width: 100px;
    line-height: 118px;
    top: 1px;
    border: 1px solid #000;
    overflow: hidden;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.filesystem_params {
    position: relative;
    display: inline-block;
    height: auto;
    min-height: 120px;
    line-height: 20px;
    width: 690px;
    text-align: left;
    margin-left: 5px;
}
.file_controls,
.folder_controls {
    width: 160px;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    text-align: right;
}
.file_status,
.folder_status {
    width: 150px;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    text-align: center;
}
.folder_id {
    display: none;
    visibility: hidden;
}
.folder_box {
    -webkit-transition: height 0.3s linear;
    transition: height 0.3s linear;
}

.folder_title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.folder_info {
    width: auto;
    min-width: 140px;
}
.folder_loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    align-items: center;
    background-color: var(--box-background-faded);
    color: var(--box-color);
}
.folder_date {
    min-width: 140px;
    text-align: right;
}
.folder_text {
    min-width: 200px;
    text-align: left;
}
/* .folder_text {display:inline-block;} */
/* .folder_button {} */

.filesystem_file {
    width: 100%;
    text-align: left;
    height: auto;
    min-height: 25px;
    vertical-align: top;
    line-height: 25px;
    position: relative;
}
.filesystem_file:hover {
    background-color: #e5f3ff;
}
.filesystem_file_name {
    width: 500px;
    max-width: 500px;
    height: auto;
    vertical-align: top;
    min-height: 25px;
    text-align: left;
    position: relative;
    display: inline-block;
}
.filesystem_file_name.selected,
.print_row4.selected,
.print_row5.selected {
    background-color: #e9f9ff;
}
.filesystem_box,
.filesystem_folder_box {
    width: 100%;
    display: inline-block;
    height: 30px;
    min-height: 30px;
    position: relative;
    font-size: 13px;
    color: #000;
    background: #fff;
    border-radius: 2px;
}
.filesystem_folder_box.print_row4 {
    background: #efefef;
}
.filesystem_folder_box.h20 {
    height: 20px;
    min-height: 20px;
}
.filesystem_folder_box.bordered.h20 {
    height: 21px;
    min-height: 21px;
}
.filesystem_folder_box.h25 {
    height: 25px;
    min-height: 25px;
}
.filesystem_folder_box.bordered.h25 {
    height: 26px;
    min-height: 26px;
}
.filesystem_folder_box.h30 {
    height: 30px;
    min-height: 30px;
}
.filesystem_folder_box.bordered.h30 {
    height: 31px;
    min-height: 31px;
}
.filesystem_box.open,
.filesystem_folder_box.open {
    height: auto;
}
.filesystem_box.noborder {
    border-width: 0;
}
.filesystem_folder_box.pilled {
    border-radius: 7px;
}
.efolder_box {
    width: 100%;
    display: inline-block;
    height: 30px;
    min-height: 30px;
    position: relative;
    font-size: 13px;
}
.efolder_box.open {
    height: auto;
    min-height: 30px;
}
.folder_toggle {
    background-size: 100%;
    background-repeat: no-repeat;
}
.directory_box {
    width: 100%;
    display: inline-block;
    height: auto;
    min-height: 25px;
    position: relative;
    font-size: 13px;
    border: 1px solid 000;
}
.directory_box.sub {
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom: #dcdcdc;
}
.directory_box.closed {
    height: 25px;
    max-height: 25px;
    min-height: 25px;
}
.directory_header {
    color: #000;
}
.directory_header.disabled {
    color: #888;
}

#form_edit_back {
    display: inline-block;
    width: auto;
    min-width: 812px;
    height: auto;
    min-height: 1085px;
    line-height: 20px;
    font-size: 12px;
    position: relative;
    background-color: #efefef;
}

#form_back_wrapper {
    width: auto;
    min-width: 810px;
    height: auto;
    min-height: 1052px;
    text-align: center;
    position: relative;
    display: block;
    padding: 5px 2px;
}

#form_back {
    width: auto;
    min-width: 810px;
    height: auto;
    min-height: 1052px;
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

#form_body {
    width: 800px;
}
.form_control_controls {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: right;
    border-bottom: 1px solid #333;
}

#form_builder_overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 3;
    text-align: center;
}

#form_builder_overlay_text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 40px;
    height: auto;
    line-height: 65px;
    color: #666;
}
.form_edit_input {
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 0;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid #333;
    background: #fff;
}
.form_edit_input:active,
.form_edit_input:focus {
    border: 1px solid #333;
    background: #fff;
}
.form_edit_input:disabled {
    background: #eee;
}
.form_page {
    position: relative;
    width: 800px;
    min-width: 800px;
    max-width: 800px;
    height: 1035px;
    min-height: 1035px;
    max-height: 1035px;
    background: #fff;
    color: #000;
    font-size: 12px;
    text-align: left;
    line-height: 16px;
    margin-top: 5px;
    border: 1px solid #000;
    display: inline-block;
    box-sizing: border-box;
    max-width: 800px;
    font-family: inherit;
}
.form_page.form_item {
    margin: 5px;
    overflow: hidden;
}
.form_page.form_page_one:not(.form_item) {
    margin: 0 auto;
}
.form_page.edit {
    border: 1px solid #000;
}
.form_page.landscape {
    width: 1035px;
    min-width: 1035px;
    max-width: 1035px;
    min-height: 800px;
    max-height: 800px;
    height: 800px;
}
.form_page_number {
    position: absolute;
    width: 50px;
    height: 20xp;
    line-height: 20px;
    color: inherit;
    font-size: inherit;
    text-align: right;
    right: 2px;
    bottom: 2px;
}
.form_field,
.form_image,
.form_input,
.form_label,
.form_section,
.form_shape {
    position: absolute;
    background: 0 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: nherit;
    max-width: 800px;
    border-color: #000;
}
.form_section {
    width: 100%;
    height: auto;
    min-height: 2px;
    min-width: 10px;
}
.form_field {
    width: auto;
    height: auto;
    min-height: 18px;
    min-width: 10px;
}
.form_label {
    height: 20px;
    min-height: 14px;
    min-width: 10px;
}
.form_input {
    border-bottom-width: 1px;
    height: 20px;
    min-height: 12px;
    min-width: 10px;
}
.form_image {
    border-width: 0;
    border-style: hidden;
    height: 100px;
    width: 100px;
    min-width: 10px;
    min-height: 20px;
}
.form_field,
.form_input,
.form_label,
.form_section {
    display: inline-block;
    box-sizing: border-box;
    border-width: 0;
    max-width: 800px;
    border-style: hidden;
    border-color: #000;
    font-family: nherit;
}
.form_input_value,
input.form_input_value:disabled,
textarea.form_input_value:disabled {
    height: inherit;
    margin: 0;
    padding: 0;
    display: inline-block;
    min-height: 18px;
    width: 99%;
    background: ransparent;
    color: inherit;
    border: 0;
    font-family: inherit;
    box-shadow: none;
    outline: 0;
    line-height: inherit;
    text-align: inherit;
    border-radius: 0;
    border-image: none;
    font-size: inherit;
    font: nherit;
    text-indent: 2px;
}
input[type="checkbox"].form_input_value,
input[type="radio"].form_input_value {
    display: none;
}
input.alert,
input.alert:disabled,
select.alert,
textarea.alert {
    border: 1px solid red;
    background-color: #faa;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
input.caution,
input.caution:disabled,
select.caution,
textarea.caution {
    border: 1px solid #333;
    background-color: #ffa;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
input.red,
input.red:disabled,
select.red,
textarea.red {
    background-color: #faa;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
input.yellow,
input.yellow:disabled,
select.yellow,
textarea.yellow {
    background-color: #ffa;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
input.magenta,
input.magenta:disabled,
select.magenta,
textarea.magenta {
    background-color: #faf;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
input.green,
input.green:disabled,
select.green,
textarea.green {
    background-color: #afa;
    color: #333;
    -webkit-text-fill-color: #333;
    opacity: 1;
}
.form_input_label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    font-size: inherit;
    color: inherit;
    background: 0 0;
    height: 100%;
    width: 100%;
    line-height: inherit;
}
.form_input_value:focus {
    background-color: #dde4ff;
    color: #666;
}
.form_input_box {
    min-width: 10px;
    min-height: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    background-color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin-top: -1px;
}
.form_input_box_inner {
    display: inline-block;
    width: 70%;
    height: 70%;
    vertical-align: middle;
    position: relative;
    border-width: 0;
    top: 15%;
}
.form_input_label_text {
    display: inline-block;
    height: 100%;
    width: auto;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    color: inherit;
    margin-left: 5px;
}
.form_input_box.radio,
.form_input_box_inner.radio {
    border-radius: 10px;
}
.form_image_value {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.form_drag_item,
.form_edit_item {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -20px;
    border: 1px solid #000;
}
.form_drag_item {
    left: 0;
    background: #fff url(../images/form/form_move.png) center center;
    cursor: move;
}
.form_drag_edit {
    left: 5px;
    top: 5px;
    background: #fff url(../images/form/form_move.png) center center;
    cursor: move;
}
.form_edit_item {
    left: 25px;
    background: #fff url(../images/form/form_edit.png) center center;
    cursor: pointer;
}
.form_section .form_label {
    width: 100%;
}
.form_field .form_label {
    width: 100%;
}
.form_button {
    width: 100px;
    text-align: center;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    border: 1px solid #333;
    border-radius: 5px;
    font-size: 16px;
    background-color: #dcdcdc;
    color: #fff;
}
.form_indication {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
}
.form_indication.selected {
    background: rgba(140, 239, 140, 0.5);
    border: 1px solid #8cef8c;
}
.form_indication.parent {
    background: rgba(140, 239, 239, 0.5);
    border: 1px solid #8cefef;
}
.form_indication.sibling {
    background: rgba(239, 140, 239, 0.5);
    border: 1px solid #ef8cef;
}
.form_indication.children {
    background: rgba(239, 239, 140, 0.5);
    border: 1px solid #efef8c;
}
.form_indication.label {
    font-weight: 700;
    display: inline-block;
    text-align: right;
    height: 20px;
    line-height: 20px;
    width: 60px;
    margin-right: 2px;
}
.resize_help {
    border: 1px dashed #dcdcdc;
}
.form_editor_select {
    width: 75px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
}
.form_editor_select.selected {
    background: #ededed;
}
.form_edit_title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
    margin-bottom: 2px;
    text-align: center;
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
}
.form_edit_label {
    width: 100px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    position: relative;
    margin-right: 50px;
}
.form_edit_header {
    width: 100%;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    position: relative;
}
.form_edit_info {
    width: auto;
    min-width: 30px;
    height: 20xp;
    line-height: 20px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    float: left;
}
.form_button_icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    left: 2px;
    top: 2px;
    margin-right: 5px;
}
.form_move_button {
    right: 2px;
    top: 2px;
}
.form_edit_button {
    right: 24px;
    top: 2px;
}
.form_control_button {
    width: 25px;
    height: 25px;
    margin: 0 auto;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}
.form_selector_button {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    display: inline-block;
    border: 1px solid #1d2887;
    background-color: #fff;
    color: #000;
}
.form_button,
.form_control_button,
.form_selector_button {
    background-color: #fff;
    color: #000;
}
.form_button:hover,
.form_control_button:hover,
.form_selector_button:hover {
    background-color: #efefef;
    color: #000;
}
.form_selector_button.selected {
    background-color: #aff;
}
.form_item {
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
}
.form_item .form_input_value {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
.form_item.form_page {
    position: relative;
    display: inline-block;
}
.form_item.child,
.form_item.parent,
.form_item.sibling {
    z-index: 1;
    overflow: visible;
}
.form_item.parent {
    background: rgba(140, 239, 239, 0.5);
}
.form_item.child {
    background-color: rgba(239, 239, 140, 0.5);
}
.form_item.sibling {
    background: rgba(239, 140, 239, 0.5);
}
.form_item.selected {
    background-color: rgba(140, 239, 140, 0.7);
    border: 1px solid rgba(140, 239, 140, 1);
    overflow: visible;
    z-index: 2;
}
.form_image.form_item {
    padding: 5px;
}
.form_item.form_grid {
    background-image: url(../images/form/form_grid_10_10.png);
    background-repeat: repeat;
}
.form_body {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 30px;
    border-width: 0;
    background-color: transparent;
}
.form_button_label,
.form_label_value {
    width: 100%;
    text-align: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    color: inherit;
    background-color: transparent;
    height: 100%;
    line-height: inherit;
    margin: 0;
    padding: 0;
}
.form_button_label {
    text-align: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.section_controller {
    display: inline-block;
    height: auto;
}
.form_divider_h {
    width: 2px;
    height: 21px;
    display: inline-block;
    margin-top: 2px;
    margin-right: 4px;
    margin-left: 4px;
    background-color: #0000;
}
.form_context,
.form_editor {
    width: 400px;
    height: auto;
    position: fixed;
    top: 110px;
    left: 210px;
    padding: 2px;
    text-align: center;
    display: block;
    line-height: 0;
    z-index: 50;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}
.form_context {
    width: 150px;
    height: auto;
    text-align: center;
}
.form_editor_box {
    width: 100%;
    height: auto;
    position: relative;
    text-align: left;
}
.form_editor_title {
    width: 100%;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    margin-bottom: 5px;
    line-height: 20px;
}
.inital_page_functions {
    display: none;
    visibility: hidden;
}
#form_context_close,
#form_editor_close,
.form_drag_edit,
.form_editor_parent {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border: 1px solid #000;
    margin-left: 2px;
    margin-right: 2px;
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
}

#form_context_close {
    border: 0;
}
.form_background_controls,
.form_border_controls,
.form_font_controls,
.form_parent_controls,
.form_position_controls,
.form_section_controls {
    width: auto;
    text-align: center;
    margin-right: 5px;
    display: inline-block;
}
.form_background_controls,
.form_font_controls {
    background: #efefef;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}

#form_edit_list,
#form_item_controls {
    width: 100%;
    height: auto;
}
.form_button_left {
    width: 100%;
    text-align: left;
    display: inline-block;
}
.form_button_center {
    width: 100%;
    text-align: left;
    display: inline-block;
    margin-top: 10px;
}
.form_button_right {
    width: 100%;
    text-align: left;
    display: inline-block;
    margin-top: 10px;
}

#form_font_family {
    width: 146px;
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
}

#form_button_DEF,
#form_button_DEP,
#form_button_DES {
    background: #faa;
}

#form_item_printed:disabled {
    background-color: #efefef;
    color: #aaa;
    background-image: none;
}
.form_move {
    z-index: 3;
    position: absolute;
    left: 2px;
    top: 0;
    opacity: 0;
}
.form_field_wrapper.draggable .form_move {
    opacity: 1;
    cursor: move;
}
.form_placeholder {
    background-image: url(../images/form_placeholder.png);
    margin: 0 auto;
    position: relative;
}
.form_print {
    background-image: url(../images/print_25.png);
    width: 25px;
    height: 25px;
    position: absolute;
    right: 9px;
    top: 9px;
    z-index: 1;
}
.form_wrapper {
    border: 1px solid #000;
    width: 155px;
    height: 125px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin-left: 4px;
    margin-bottom: 0;
    margin-top: 0;
    border-radius: 5px;
    position: relative;
    background: #fff;
    color: #666;
    padding: 5px;
}
.form_wrapper_image {
    width: 65px;
    height: 78px;
    display: inline-block;
    text-align: center;
    margin-top: 2px;
}
.form_form {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    position: relative;
}
.form_title {
    width: 100%;
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    margin-top: 2px;
    line-height: 16px;
}
.inputHigh {
    background-color: #ffa;
    color: #666;
}
.highlight_yellow {
    background-color: #ffa;
}
.highlight_red {
    background-color: #faa;
}
.highlight-caution,
.highlight-change {
    background-color: #ffa;
    color: #000;
}
.highlight-error {
    background-color: #faa;
    color: #000;
}
.jobindicator,
.statusindicator,
.taskindicator {
    width: 30px;
    height: 30px;
    line-height: 26px;
    text-align: center;
    border-radius: 30px;
    border-width: 2px;
    border-style: solid;
    background: #fff;
    border-color: #000;
    color: #000;
    font-weight: 700;
    vertical-align: top;
    margin-top: 2px;
    display: inline-block;
}
.statusindicator,
.taskindicator {
    border-radius: 3px;
}
.statusindicator {
    border-width: 1px;
    font-size: 10px;
}
.customer_info_box {
    width: 100%;
    height: auto;
    border: 1px solid #dcdcdc;
    background: #efefef;
    padding: 5px;
    border-radius: 3px;
    overflow: hidden;
}

#mapit_frame,
.map_icon_text {
    font-weight: 700;
    text-align: left;
    height: 25px;
    line-height: 25px;
    width: auto;
    display: inline-block;
    margin-left: 2px;
}
.map_icon_standard {
    background-image: url(../images/map/standard_SAI.png) center;
    width: 25px;
    height: 25px;
    display: inline-block;
}
.overlay {
    position: absolute;
    top: 5px;
    font-size: 12px;
    font-weight: 700;
    vertical-align: top;
    z-index: 100;
    padding: 5px;
    display: inline-block;
    text-align: center;
    background-color: #535353;
    color: #fff;
    border: 1px solid #282828;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

/* Scanner */
#scanner-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--box-background-faded);
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding-top: 70px;
}
#scanner-container,
#scanner-message {
    min-width: 320px;
    width: 320px;
    max-width: 320px;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    background-color: var(--container-back);
    color: var(--container-color);
    border: var(--border);
    border-radius: var(--border-radius);
}
#scanner-message {
    width: 100%;
    text-align: center;
    padding: 4px;
}
#scanner-message-feedback {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    background-color: #efefef;
    color: #333;
    font-weight: bold;
    font-size: var(--font-size-plus2);
}
#qr-shaded-region {
    overflow: visible;
}

#hiddenBox_Back {
    z-index: 10;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
}

.rolo_wrapper {
    display:flex;
    flex-direction:row;
    gap:4px;padding:4px;
    justify-content:start;
    align-items:start;
}
.rolo_row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    line-height: 30px;
}
.rolo_column {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    line-height: 30px;
    width: 100%;
}
.rolo_favorite {
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    background-position: center;
    background-size: 60%;
    background-image: url(../images/star_grey.png);
}
.rolo_controls {
    display: inline-flex;
    flex-direction: row;
    gap: 4px;
    justify-content: end;
    align-items: center;
    flex-grow: 1;
    padding: 0 4px;
}

.rolo_box_title {
    font-weight: 700;
    display: inline-block;
    text-align: left;
    font-size: 12px;
    width: 100%;
    height: 25px;
    line-height: 25px;
    background: #ddd;
    color: #000;
}
.rolo_box,
.rolo_element_box {
    background: #fff;
    border: 1px solid #000;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
.rolo_item_box {
    height: auto;
    line-height: 20px;
    width: 100%;
    text-align: left;
}
.rolo_entry {
    width: 300px;
    text-align: left;
    padding: 0;
    border:var(--border);
    border-radius:var(--border-radius);
}
.rolo_entry_content {
    width: 100%;
    line-height: 30px;
}
.rolo_entry_title {
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: #054a78;
}
.rolo_info_box {
    width: 250px;
    text-align: left;
    height: auto;
    padding: 2px;
    display: inline-block;
    margin-top: 2px;
}
.rolo_info_label_box {
    display: inline-block;
    width: 245px;
    line-height: 20px;
    margin-left: 5px;
    margin-top: 5px;
}
.rolo_info_value_box {
    display: inline-block;
    width: 240px;
    line-height: 20px;
    margin-left: 8px;
    padding-bottom: 2px;
}
.rolo_input_label,
.rolo_input_value {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: 240px;
    font-weight: 700;
    border: 0;
    background: 0 0;
    text-align: left;
    box-shadow: none;
    text-shadow: none;
    border-radius: 0;
}
.rolo_input_label {
    width: 140px;
}
.rolo_input_label.prim {
    width: 140px;
}
.rolo_input_value {
    width: 100%;
    font-weight: 400;
}

input.rolo_input_label:disabled {
    background-color: transparent;
}
.rolo_input_label:active,
.rolo_input_label:focus,
.rolo_input_value:active,
.rolo_input_value:focus {
    background: #dcdcdc;
    color: #000;
}
.rolo_input_label:disabled,
.rolo_input_value:disabled {
    border: 0;
    background: 0 0;
    text-align: left;
    box-shadow: none;
    text-shadow: none;
}
.rolo_input_label.edit,
.rolo_input_value.edit {
    border-bottom: 1px solid #dcdcdc;
}

textarea.rolo_input_value {
    resize: vertical;
}
.rolo_input_btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    margin-left: 2px;
    margin-right: 2px;
}
.weather-box {
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    color: #fff;
    position: relative;
    padding: 0 5px;
    background: #1e5799;
    background: -moz-linear-gradient(-45deg, #1e5799 44%, #7db9e8 100%);
    background: -webkit-linear-gradient(-45deg, #1e5799 44%, #7db9e8 100%);
    background: linear-gradient(135deg, #1e5799 44%, #7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
}
.weather-clouds-25 {
    background: #d0e4f7;
    background: -moz-linear-gradient(-45deg, #d0e4f7 0, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    background: -webkit-linear-gradient(-45deg, #d0e4f7 0, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    background: linear-gradient(135deg, #d0e4f7 0, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e4f7', endColorstr='#87bcea', GradientType=1);
}
.weather-clouds-50 {
    background: #cedbe9;
    background: -moz-linear-gradient(-45deg, #cedbe9 0, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    background: -webkit-linear-gradient(-45deg, #cedbe9 0, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    background: linear-gradient(135deg, #cedbe9 0, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cedbe9', endColorstr='#26558b', GradientType=1);
}
.weather-clouds-100,
.weather-clouds-75 {
    background: #b5bdc8;
    background: -moz-linear-gradient(-45deg, #b5bdc8 0, #828c95 36%, #28343b 100%);
    background: -webkit-linear-gradient(-45deg, #b5bdc8 0, #828c95 36%, #28343b 100%);
    background: linear-gradient(135deg, #b5bdc8 0, #828c95 36%, #28343b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5bdc8', endColorstr='#28343b', GradientType=1);
}
.weather-box-square {
    padding: 5px;
    text-align: center;
}
.weather-box-small {
    background: 0 0;
    color: inherit;
    padding: 0 5px;
    border: 0;
}
.weather-box-compact {
    padding: 0 5px;
}
.weather-box-full {
    padding: 5px 5px;
}
.weather-left {
    text-align: center;
    width: 50%;
    display: inline-block;
}
.weather-right {
    text-align: right;
    width: 50%;
    display: inline-block;
}
.weather-flex {
    display: flex;
    justify-content: space-between;
}
.weather-flex-vert {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.weather-icon {
    background-repeat: no-repeat;
    background-size: contain;
}
.weather-box-square .weather-icon {
    margin: auto;
    width: 100%;
    height: calc(100% - 20px);
}
.weather-temp-bottom {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
}
.weather-box-full .weather-icon {
    float: left;
    margin-right: 10px;
    height: 100%;
    width: calc(100% / 5);
    flex: 0 0 auto;
}
.weather-box-full .weather-temp {
    height: 100%;
    vertical-align: middle;
    float: left;
    font-size: 32px;
    font-weight: 700;
    flex: 1 0 auto;
}
.weather-temp.font-small {
    font-size: 14px;
}
.weather-info {
    text-align: right;
    height: 100%;
    float: right;
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;
}
.weather-text {
    text-align: left;
    width: 50%;
    display: inline-block;
}
.weather-box-full .weather-location,
.weather-box-full .weather-text {
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
}
.weather-rain {
    text-align: right;
    width: 50%;
    display: inline-block;
}
.weather-wind {
    text-align: right;
    width: 100%;
}
.weather-box-small .weather-icon {
    display: inline-flex;
    height: 100%;
    width: 30px;
    background-position: left;
}
.weather-box-small .weather-temp {
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    width: auto;
    text-align: left;
}
.weather-box-compact .weather-icon {
    display: inline-flex;
    height: 100%;
    width: 70px;
    background-position: left;
}
.weather-box-compact .weather-temp {
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    width: 85px;
    text-align: left;
}
.weather-box-compact .weather-info {
    text-align: right;
    height: 100%;
    width: calc(100% - 160px);
    display: inline-block;
    padding-left: 10px;
    white-space: nowrap;
    font-size: 16px;
}
.weather-box-compact .weather-text {
    text-align: left;
    width: 100%;
    display: block;
}
.weather-box-compact .weather-rain {
    text-align: left;
    width: auto;
    float: left;
    padding-right: 20px;
}
.weather-box-compact .weather-wind {
    text-align: right;
    float: right;
    width: auto;
    display: table-cell;
    padding-right: 4px;
}
.weather-line,
.weather-line-right {
    text-align: left;
    width: 100%;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}
.weather-line-right {
    text-align: right;
}
.weather-wind-label {
    font-size: 12px;
}
.decimal2,
.decimal3,
.integer {
    text-align: right;
}
.datepicker {
    width: 80px;
}
.rb input:not(.timepicker, .hourpicker, .timepicker1, .datepicker, .hourpicker1, .replacement_label),
.rb textarea,
.rbl input:not(.timepicker, .hourpicker, .hourpicker1, .timepicker1, .datepicker, .hourpicker1, .replacement_label),
.rbl textarea {
    width: 100%;
}
.attached-image {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
.animateOpacity {
    transition: opacity 0.35s linear;
}
.hourpicker,
.hourpicker1,
.timepicker,
.timepicker1 {
    width: 40px;
}
.map_icon_standard.white {
    background-image: url(../images/map/standard_White.png);
}
.map_icon_standard.black {
    background-image: url(../images/map/standard_Black.png);
}
.map_icon_standard.red {
    background-image: url(../images/map/standard_Red.png);
}
.map_icon_standard.green {
    background-image: url(../images/map/standard_Green.png);
}
.map_icon_standard.grey {
    background-image: url(../images/map/standard_Grey.png);
}
.map_icon_standard.blue {
    background-image: url(../images/map/standard_Blue.png);
}
.map_icon_standard.cyan {
    background-image: url(../images/map/standard_Cyan.png);
}
.upload_placeholder {
    background: rgba(0, 0, 0, 0.03) url(../images/image_upload.png) center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: inline-block;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 18px;
    color: #000;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}
.browser_chrome {
    background-image: url(../images/browser/browser_chrome.png);
    width: 30px;
    height: 30px;
}
.browser_firefox {
    background-image: url(../images/browser/browser_firefox.png);
    width: 30px;
    height: 30px;
}
.browser_safari {
    background-image: url(../images/browser/browser_safari.png);
    width: 30px;
    height: 30px;
}
.browser_ie {
    background-image: url(../images/browser/browser_ie.png);
    width: 30px;
    height: 30px;
}
.browser_edge {
    background-image: url(../images/browser/browser_edge.png);
    width: 30px;
    height: 30px;
}
.os_windows {
    background-image: url(../images/os/os_windows.png);
    width: 30px;
    height: 30px;
}
.os_mac {
    background-image: url(../images/os/os_mac.png);
    width: 30px;
    height: 30px;
}
.os_linux {
    background-image: url(../images/os/os_linux.png);
    width: 30px;
    height: 30px;
}
.os_ipad {
    background-image: url(../images/os/os_ipad.png);
    width: 30px;
    height: 30px;
}
.os_android {
    background-image: url(../images/os/os_android.png);
    width: 30px;
    height: 30px;
}
.os_windows10 {
    background-image: url(../images/os/os_windows10.png);
    width: 30px;
    height: 30px;
}
.icon_appswitch {
    background-image: url(../images/custom/appswitch.png);
}
.icon_menu {
    background-image: url(../images/menu_w.png);
}
.icon_menu_open {
    background-image: url(../images/menu_open.png);
}
.icon_menu_close {
    background-image: url(../images/menu_close.png);
}
.icon_menu_white {
    background-image: url(../images/menu_w.png);
}
.icon_close_box {
    background-image: url(../images/close_black.png);
}
.icon_plus {
    background-image: url(../images/plus_w.png);
}
.icon_root {
    background-image: url(../images/root_w.png);
}
.icon_month_day {
    background-image: url(../images/month_d_w.png);
}
.icon_month_week {
    background-image: url(../images/month_w_w.png);
}
.icon_month_month {
    background-image: url(../images/month_m_w.png);
}
.icon_month_all {
    background-image: url(../images/month_a_w.png);
}
.icon_month_list {
    background-image: url(../images/month_l_w.png);
}
.icon_alert {
    background-image: url(../images/alert_w.png);
}
.icon_emergency {
    background-image: url(../images/emergency_w.png);
}
.icon_lock {
    background-image: url(../images/custom/locked.png);
}
.icon_lock_black {
    background-image: url(../images/lock_black.png);
}
.icon_unlock {
    background-image: url(../images/unlock_w.png);
}
.icon_linked {
    background-image: url(../images/linked_w_flat.png);
}
.icon_unlinked {
    background-image: url(../images/unlinked_w_flat.png);
}
.icon_restricted {
    height: 23px;
    width: 23px;
    background-image: url(../images/restricted_w.png);
}
.icon_play {
    height: 23px;
    width: 23px;
    background-image: url(../images/play_w.png);
}
.icon_key {
    background-image: url(../images/key_w_flat.png);
}
.icon_delete {
    background-image: url(../images/trash_w.png);
}
.icon_cancel {
    background-image: url(../images/custom/cancel.png);
}
.icon_add,
.icon_create {
    background-image: url(../images/plus_w_flat.png);
}
.icon_minus,
.icon_remove {
    background-image: url(../images/minus_w_flat.png);
}
.icon_save,
.icon_update {
    background-image: url(../images/update_w.png);
}
.icon_approve {
    background-image: url(../images/approve_w_flat.png);
}
.icon_refresh {
    background-image: url(../images/refresh_b_flat.png);
}
.icon_rateincrease {
    background-image: url(../images/rateincrease.png);
}
.icon_ratedecrease {
    background-image: url(../images/ratedecrease.png);
}
.icon_ratestandard {
    background-image: url(../images/ratestandard.png);
}
.icon_history {
    background-image: url(../images/custom/history.png);
}
.icon_quicklink {
    background-image: url(../images/custom/quicklink.png);
}
.icon_itemlink {
    background-image: url(../images/custom/attach_file.png);
}
.icon_portal_refresh {
    background-image: url(../images/custom/portal_refresh.png);
}
.icon_reset {
    background-image: url(../images/reset_w_flat.png);
}
.icon_left {
    background-image: url(../images/left_w_flat.png);
}
.icon_right {
    background-image: url(../images/right_w_flat.png);
}
.icon_move_up,
.icon_up {
    background-image: url(../images/custom/moveup.png);
}
.icon_dn,
.icon_down,
.icon_move_dn,
.icon_move_down {
    background-image: url(../images/custom/movedn.png);
}
.icon_top {
    background-image: url(../images/custom/moveto_top.png);
}
.icon_bottom {
    background-image: url(../images/custom/moveto_bottom.png);
}
.icon_drop {
    background-image: url(../images/drop_b.png);
}
.icon_today {
    background-image: url(../images/today_w.png);
}
.icon_calme {
    background-image: url(../images/calendar_1_w.png);
}
.icon_calall {
    background-image: url(../images/calendar_a_w.png);
}
.icon_close {
    background-image: url(../images/close_w.png);
}
.icon_clear {
    background-image: url(../images/eraser.png);
}
.icon_previous {
    background-image: url(../images/left_w_flat.png);
}
.icon_next {
    background-image: url(../images/right_w_flat.png);
}
.icon_course_open {
    background-image: url(../images/box_open.png);
}
.icon_course_close {
    background-image: url(../images/box_closed.png);
}
.icon_star_grey {
    background-image: url(../images/star_grey.png);
}
.icon_arrr {
    background-image: url(../images/arr_right.png);
}
.icon_arrd {
    background-image: url(../images/arr_down.png);
}
.icon_popout {
    background-image: url(../images/custom/popout_w_flat.png);
}
.icon_popout_grey {
    background-image: url(../images/custom/popout_grey.png);
}
.icon_index {
    background-image: url(../images/index_w.png);
}
.icon_home {
    background-image: url(../images/home_w.png);
}
.icon_mobile {
    background-image: url(../images/custom/mobile.png);
}
.icon_home.submenu_icon {
    background-image: url(../images/home_b.png);
}
.icon_split.submenu_icon {
    background-image: url(../images/split_b.png);
}
.icon_resethome {
    background-image: url(../images/resethome_w_flat.png);
}
.icon_resethome.submenu_icon {
    background-image: url(../images/resethome_b_flat.png);
}
.icon_message,
.icon_messages {
    background-image: url(../images/messages_w.png);
}
.icon_messages.submenu_icon {
    background-image: url(../images/messages_b.png);
}
.icon_help {
    background-image: url(../images/query_w_flat.png);
}
.icon_help.submenu_icon {
    background-image: url(../images/query_b_flat.png);
}
.icon_profile {
    background-image: url(../images/profile_w.png);
}
.icon_profile.submenu_icon {
    background-image: url(../images/profile_b.png);
}
.icon_settings {
    background-image: url(../images/settings_w.png);
}
.icon_settings.submenu_icon {
    background-image: url(../images/settings_b.png);
}
.icon_logout,
.icon_portal_logout {
    background-image: url(../images/custom/logout.png);
}
.icon_logout.submenu_icon {
    background-image: url(../images/custom/logout.png);
}
.icon_navigation {
    background-image: url(../images/users_w_flat.png);
}
.icon_administration {
    background-image: url(../images/assign_w.png);
}
.icon_aviation {
    background-image: url(../images/airline_w.png);
}
.icon_custom {
    background-image: url(../images/custom_w.png);
}
.icon_details {
    background-image: url(../images/details_w_flat.png);
}
.icon_dataimport {
    background-image: url(../images/import_w.png);
}
.icon_gallery {
    background-image: url(../images/image_w.png);
}
.icon_calendar {
    background-image: url(../images/calendar_w_flat.png);
}
.icon_library {
    background-image: url(../images/library_w_flat.png);
}
.icon_property {
    background-image: url(../images/manage_w.png);
}
.icon_schedule {
    background-image: url(../images/schedule_w.png);
}
.icon_training {
    background-image: url(../images/train_w.png);
}
.icon_news {
    background-image: url(../images/news_w.png);
}
.icon_store {
    background-image: url(../images/store_w.png);
}
.icon_communicate {
    background-image: url(../images/comm_w.png);
}
.icon_query {
    background-image: url(../images/query_w.png);
}
.icon_project {
    background-image: url(../images/clock_w.png);
}
.icon_todolist {
    background-image: url(../images/todolist_w_flat.png);
}
.icon_uav {
    background-image: url(../images/uav_w_flat.png);
}
.icon_user {
    background-image: url(../images/user_w.png);
}
.icon_assignment {
    background-image: url(../images/assign_w.png);
}
.icon_comment {
    background-image: url(../images/comment_w.png);
}
.icon_notification {
    background-image: url(../images/comm_w.png);
}
.icon_document {
    background-image: url(../images/document_w.png);
}
.icon_filesystem {
    background-image: url(../images/filesystem_w_flat.png);
}
.icon_form {
    background-image: url(../images/file_blue.png);
}
.icon_sms {
    background-image: url(../images/hazard_w.png);
}
.icon_aim {
    background-image: url(../images/aim_w.png);
}
.icon_report {
    background-image: url(../images/report_w.png);
}
.icon_location {
    background-image: url(../images/location_w.png);
}
.icon_glocation {
    background-image: url(../images/glocation_w.png);
}
.icon_timesheet {
    background-image: url(../images/timesheet_w.png);
}
.icon_exam {
    background-image: url(../images/exam_w.png);
}
.icon_courseware {
    background-image: url(../images/course_w.png);
}
.icon_liked {
    background-image: url(../images/custom/liked.png);
}
.icon_unliked {
    background-image: url(../images/custom/unliked.png);
}
.icon_email {
    background-image: url(../images/custom/email.png);
}
.icon_chat {
    background-image: url(../images/custom/chat.png);
}
.icon_chat.disabled,
.icon_chat.inactive {
    background-image: url(../images/chat_grey.png);
}
.icon_chatadmin {
    background-image: url(../images/chatadmin_w_flat.png);
}
.icon_info {
    background-image: url(../images/info_w_flat.png);
}
.icon_client {
    background-image: url(../images/client_w.png);
}
.icon_application {
    background-image: url(../images/application_w.png);
}
.icon_capture {
    background-image: url(../images/capture_w.png);
}
.icon_inventory {
    background-image: url(../images/inventory_w.png);
}
.icon_print {
    background-image: url(../images/print_w.png);
}
.icon_import {
    background-image: url(../images/custom/import.png);
}
.icon_download {
    background-image: url(../images/custom/download.png);
}
.icon_attach {
    background-image: url(../images/custom/import.png);
}
.icon_export {
    background-image: url(../images/custom/export.png);
}
.icon_edit {
    background-image: url(../images/custom/edit.png);
}
.icon_sign {
    background-image: url(../images/custom/signature.png);
}
.icon_web {
    background-image: url(../images/web_b_flat.png);
}
.icon_eye_open {
    background-image: url(../images/eye_open_grey.png);
}
.icon_eye_closed {
    background-image: url(../images/eye_closed_grey.png);
}
.icon-eye-open {
    background-image: url(../images/eye-open.png);
}
.icon-eye-closed {
    background-image: url(../images/eye-closed.png);
}
.icon_message_delete {
    background-image: url(../images/delete_grey.png);
}
.icon_message_root {
    background-image: url(../images/root_grey.png);
}
.icon_message_reload {
    background-image: url(../images/reload_grey.png);
}
.icon_message_to {
    background-image: url(../images/arr_right_grey.png);
}
.icon_message_from {
    background-image: url(../images/arr_left_grey.png);
}
.icon_message_send {
    background-image: url(../images/message_send_colored.png);
}
.icon_folder {
    background-image: url(../images/folder_icon/folder_closed.png);
}
.icon_folder.empty {
    background-image: url(../images/folder_icon/folder_closed_empty.png);
}
.icon_folder.open {
    background-image: url(../images/folder_icon/folder_open.png);
}
.icon_folder.open.empty {
    background-image: url(../images/folder_icon/folder_open_empty.png);
}
.icon_folder_drop {
    background-image: url(../images/folder_icon/folder_drop.png);
}
.icon_folder_inline {
    background-image: url(../images/folder_icon/folder_inline.png);
}
.icon_folder_loading {
    background-image: url(../images/folder_icon/loading.gif);
}
.icon_document_folder {
    background-image: url(../images/custom/folder.png);
}
.icon_document_file {
    background-image: url(../images/file_grey.png);
}
.efolder_box .folder_toggle,
.icon_toggle_open {
    background-image: url(../images/custom/open.png);
}
.efolder_box.open .folder_toggle,
.icon_toggle_close {
    background-image: url(../images/custom/close.png);
}
.icon_document_view {
    background-image: url(../images/view_grey_flat.png);
}
.icon_document_zip {
    background-image: url(../images/zip_grey.png);
}
.icon_document_folder_create {
    background-image: url(../images/custom/folder_create.png);
}
.icon_document_file_create {
    background-image: url(../images/custom/file_create.png);
}
.icon_word {
    background-image: url(../images/doctype_word.jpg);
}
.icon_excel {
    background-image: url(../images/doctype_excel.jpg);
}
.icon_powerpoint {
    background-image: url(../images/doctype_powerpoint.jpg);
}
.icon_pdf {
    background-image: url(../images/doctype_pdf.jpg);
}
.icon_3dobject {
    background-image: url(../images/doctype_3dobject.jpg);
}
.icon_pointcloud {
    background-image: url(../images/doctype_pointcloud.jpg);
}
.icon_3dmaterial {
    background-image: url(../images/doctype_material.jpg);
}
.icon_media {
    background-image: url(../images/doctype_media.jpg);
}
.icon_text {
    background-image: url(../images/doctype_text.jpg);
}
.icon_image {
    background-image: url(../images/doctype_image.jpg);
}
.icon_link {
    background-image: url(../images/doctype_link.jpg);
}
.icon_kml {
    background-image: url(../images/doctype_kml.jpg);
}
.icon_webpage {
    background-image: url(../images/doctype_web.png);
}
.icon_clock_delete {
    background-image: url(../images/delete_b_flat.png);
}
.icon_clock {
    background-image: url(../images/clock_w.png);
}
.icon_profile_menu {
    background-image: url(../images/profile_b.png);
}
.icon_settings_menu {
    background-image: url(../images/settings_b.png);
}
.icon_messages_menu {
    background-image: url(../images/messages_b.png);
}
.icon_messages_menu.new {
    background-image: url(../images/messages_new_b.png);
}
.icon_chat_menu {
    background-image: url(../images/chat_b.png);
}
.icon_chat_menu.disabled {
    background-image: url(../images/chat_grey.png);
}
.icon_logout_menu {
    background-image: url(../images/exit_b.png);
}
.icon_home_menu {
    background-image: url(../images/home_b.png);
}
.icon_query_refresh {
    background-image: url(../images/refresh_black_flat.png);
}
.icon_query_print {
    background-image: url(../images/print_black.png);
}
.icon_query_export {
    background-image: url(../images/export_black.png);
}
.icon_query_close {
    background-image: url(../images/close_black.png);
}
.icon_filter {
    background-image: url(../images/filter_w_flat.png);
}
.icon_search {
    background-image: url(../images/search_w_flat.png);
}
.icon_filter_remove {
    background-image: url(../images/close_grey.png);
}
.icon_view {
    background-image: url(../images/view_w_flat.png);
}
.icon_camera {
    background-image: url(../images/camera_w_flat.png);
}
.icon_finger,
.icon_scan {
    background-image: url(../images/fscan.png);
}
.icon_code {
    background-image: url(../images/custom/qrcode.png);
}
.icon_copy {
    background-image: url(../images/custom/copy.png);
}
.icon_lookup {
    background-image: url(../images/lookup_w_flat.png);
}
.icon_box_close,
.icon_popup_close,
.icon_video_close {
    background-image: url(../images/close_grey.png);
}
.icon_box_close.icon_row_head {
    background-image: url(../images/close_w.png);
}
.icon_key {
    background-image: url(../images/key_w_flat.png);
}
.icon_flag_black {
    background-image: url(../images/flag_black_flat.png);
}
.icon_timesheet_flag_1 {
    background-image: url(../images/flag_c_flat.png);
}
.icon_timesheet_flag_2 {
    background-image: url(../images/flag_y_flat.png);
}
.icon_timesheet_flag_3 {
    background-image: url(../images/flag_r_flat.png);
}
.icon_paperclip_black {
    background-image: url(../images/paperclip_black_flat.png);
}
.icon_edit_black {
    background-image: url(../images/edit_black_flat.png);
}
.icon_delete_black {
    background-image: url(../images/delete_black_flat.png);
}
.icon_delete_white {
    background-image: url(../images/delete_w_flat.png);
}
.todolist_started {
    background-image: url(../images/todolist_started.png);
}
.todolist_completed {
    background-image: url(../images/todolist_complete.png);
}
.todolist_created {
    background-image: url(../images/todolist_created.png);
}
.todolist_priority_low {
    background-image: url(../images/todolist_priority_low.png);
}
.todolist_priority_medium {
    background-image: url(../images/todolist_priority_medium.png);
}
.todolist_priority_high {
    background-image: url(../images/todolist_priority_high.png);
}
.icon_alignc {
    background-image: url(../images/form/form_alignc.png);
}
.icon_alignl {
    background-image: url(../images/form/form_alignl.png);
}
.icon_alignr {
    background-image: url(../images/form/form_alignr.png);
}
.icon_alignj {
    background-image: url(../images/form/form_alignj.png);
}
.icon_noedit {
    background-image: url(../images/form/form_noedit.png);
}
.icon_finherit {
    background-image: url(../images/form/form_inherit.png);
}
.icon_fontp {
    background-image: url(../images/form/form_fontp.png);
}
.icon_fontm {
    background-image: url(../images/form/form_fontm.png);
}
.icon_linep {
    background-image: url(../images/form/form_linep.png);
}
.icon_linem {
    background-image: url(../images/form/form_linem.png);
}
.icon_widthp {
    background-image: url(../images/form/form_widthp.png);
}
.icon_widthm {
    background-image: url(../images/form/form_widthm.png);
}
.icon_widthr {
    background-image: url(../images/form/form_widthr.png);
}
.icon_fcreate {
    background-image: url(../images/form/form_create.png);
}
.icon_fsave {
    background-image: url(../images/form/form_save.png);
}
.icon_fundo {
    background-image: url(../images/form/form_undo.png);
}
.icon_fredo {
    background-image: url(../images/form/form_redo.png);
}
.icon_fgrid {
    background-image: url(../images/form/form_grid.png);
}
.icon_fedit {
    background-image: url(../images/form/form_edit.png);
}
.icon_fview {
    background-image: url(../images/form/form_view.png);
}
.icon_fdelete {
    background-image: url(../images/form/form_delete.png);
}
.icon_heightm {
    background-image: url(../images/form/form_heightm.png);
}
.icon_heightp {
    background-image: url(../images/form/form_heightp.png);
}
.icon_heightr {
    background-image: url(../images/form/form_heightr.png);
}
.icon_ftopm {
    background-image: url(../images/form/form_ftopm.png);
}
.icon_ftopp {
    background-image: url(../images/form/form_ftopp.png);
}
.icon_fleftm {
    background-image: url(../images/form/form_fleftm.png);
}
.icon_fleftp {
    background-image: url(../images/form/form_fleftp.png);
}
.icon_faspect {
    background-image: url(../images/form/form_link.png);
}
.icon_pleft {
    background-image: url(../images/form/form_pleft.png);
}
.icon_pright {
    background-image: url(../images/form/form_pright.png);
}
.icon_pcenter {
    background-image: url(../images/form/form_pcenter.png);
}
.icon_ptop {
    background-image: url(../images/form/form_ptop.png);
}
.icon_pbottom {
    background-image: url(../images/form/form_pbottom.png);
}
.icon_pvcenter {
    background-image: url(../images/form/form_pvcenter.png);
}
.icon_fduplicate {
    background-image: url(../images/form/form_duplicate.png);
}
.icon_border_none {
    background-image: url(../images/form/form_border_none.png);
}
.icon_border_full {
    background-image: url(../images/form/form_border_all.png);
}
.icon_border_top {
    background-image: url(../images/form/form_border_top.png);
}
.icon_border_bottom {
    background-image: url(../images/form/form_border_bottom.png);
}
.icon_border_left {
    background-image: url(../images/form/form_border_left.png);
}
.icon_border_right {
    background-image: url(../images/form/form_border_right.png);
}
.icon_border_dash {
    background-image: url(../images/form/form_border_dash.png);
}
.icon_border_dot {
    background-image: url(../images/form/form_border_dot.png);
}
.icon_border_solid {
    background-image: url(../images/form/form_border_solid.png);
}
.icon_border_double {
    background-image: url(../images/form/form_border_double.png);
}
.icon_borderri {
    background-image: url(../images/form/form_borderri.png);
}
.icon_borderrd {
    background-image: url(../images/form/form_borderrd.png);
}
.icon_borderwi {
    background-image: url(../images/form/form_borderwi.png);
}
.icon_borderwd {
    background-image: url(../images/form/form_borderwd.png);
}
.icon_colorfo {
    background-image: url(../images/form/form_colorfo.png);
}
.icon_colorba {
    background-image: url(../images/form/form_colorba.png);
}
.icon_colorbo {
    background-image: url(../images/form/form_colorbo.png);
}
.icon_fparent {
    background-image: url(../images/form/form_selparent.png);
}
.icon_fontb {
    background-image: url(../images/form/form_fontb.png);
}
.icon_fonti {
    background-image: url(../images/form/form_fonti.png);
}
.icon_fontu {
    background-image: url(../images/form/form_fontu.png);
}
.icon_fontl {
    background-image: url(../images/form/form_fontl.png);
}
.icon_check {
    background-image: url(../images/custom/approve.png);
}
.icon_check0 {
    background-image: url(../images/form/form_check0.png);
}
.icon_check1 {
    background-image: url(../images/form/form_check1.png);
}
.icon_fmove {
    background-image: url(../images/form/form_move.png);
}
.icon_fmoveup {
    background-image: url(../images/form/form_moveup.png);
}
.icon_fmovedn {
    background-image: url(../images/form/form_movedn.png);
}
.icon_expand {
    background-image: url(../images/custom/open.png);
}
.icon_collapse {
    background-image: url(../images/custom/close.png);
}
.icon_borderwno {
    background-image: url(../images/form/form_borderwno.png);
}
.icon_borderwto {
    background-image: url(../images/form/form_borderwto.png);
}
.icon_borderwbo {
    background-image: url(../images/form/form_borderwbo.png);
}
.icon_borderwtb {
    background-image: url(../images/form/form_borderwtb.png);
}
.icon_frequired {
    background-image: url(../images/form/form_required.png);
}
.icon_fcolon {
    background-image: url(../images/form/form_colon.png);
}
.icon_fdollar {
    background-image: url(../images/form/form_dollar.png);
}
.icon_dropdown,
.icon_select {
    background-image: url(../images/dnarrow_black.png);
}
.icon_down_right {
    background-image: url(../images/custom/arr_down_right_black.png);
}
.icon_execute {
    background-image: url(../images/riarrow_black.png);
}
.icon_query_gif {
    background-image: url(../images/query_load_gif.gif);
}
.icon_assignments_incomplete {
    background-image: url(../images/incomplete_training.gif);
}
.icon_pan_left {
    background-image: url(../images/arrow_simple_left_black_flat.png);
}
.icon_pan_right {
    background-image: url(../images/arrow_simple_right_black_flat.png);
}
.icon_pan_up {
    background-image: url(../images/arrow_simple_up_black_flat.png);
}
.icon_pan_down {
    background-image: url(../images/arrow_simple_down_black_flat.png);
}
.icon_fltdepp {
    background-image: url(../images/dispatch/takeoff_white.png);
}
.icon_fltarr {
    background-image: url(../images/dispatch/landing_white.png);
}
.icon_fltong {
    background-image: url(../images/dispatch/onground_white.png);
}
.icon_qrcode {
    background-image: url(../images/custom/qrcode_white.png);
}
.weather-refresh {
    background-image: url(../images/weather_refresh.png);
}
.weather-local {
    background-image: url(../images/weather_point.png);
}
.timesheet_restriction_icon {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    background-image: url(../images/app/restriction_good.png);
    background-size: 95% 95%;
    margin-top: 2px;
}
.timesheet_restriction_icon.bad {
    background-image: url(../images/app/restriction_bad.png);
}
.cursor_crosshair {
    background-image: url(../images/custom/cursor_crosshair.png);
}
.gradient_back {
    background: #eee;
    background: -moz-radial-gradient(center, ellipse cover, #eee 0, #ccc 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #eee 0, #ccc 100%);
    background: radial-gradient(ellipse at center, #eee 0, #ccc 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=1);
}
.dropzone .dz-default.dz-message {
    background-image: url(../images/image_upload.png);
}
.birthday_image {
    background-image: url(../images/date_birth.png);
}
.ellipse {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noellipse {
    text-overflow: unset;
}
.nowrap {
    white-space: nowrap;
    overflow: hidden;
}
.debug_box {
    padding: 1px;
    width: 100%;
    min-width: 815px;
    max-width: 1005px;
    position: relative;
    height: auto;
    line-height: 14px;
    font-size: 12px;
    word-break: break-all;
    background-color: #000;
    color: #0f0;
}
.outside-content {
    position: relative;
    height: calc(100vh - 30px);
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
}

.color-good {
    background-color: var(--color-good);
    color: var(--color-color);
}
.color-warning {
    background-color: var(--color-warning);
    color: var(--color-color);
}
.color-caution {
    background-color: var(--color-caution);
    color: var(--color-color);
}
.color-highlight {
    background-color: var(--color-highlight);
    color: var(--color-color);
}

.text-good {
    color: var(--color-good);
}
.text-warning {
    color: var(--color-warning);
}
.text-caution {
    color: var(--color-caution);
}
.text-highlight {
    color: var(--color-highlight);
}
.text-alert {
    color: red;
}

/* Editor */
.ql-toolbar.ql-snow {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 4px;
}
.ql-container.ql-snow {
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.ql-editor {
    line-height: 20px;
    padding: 0 8px;
}
.ql-editor.ql-blank {
    width: 100%;
}
.quill_subeditor,
.ql-container {
    min-height: 60px;
    height: 60px;
}
.shadow-top {
    box-shadow: 0 -2px 4px 0 #333;
}
.shadow-bottom {
    box-shadow: 0 2px 4px 0 #333;
}
.shadow-both {
    box-shadow: inset 0 -4px 4px -2px #333, inset 0 4px 4px -2px #333;
}

@media screen and (max-device-width: 850px) {
    body.mobile.document:not(.login):not(.training) {
        min-width: auto;
    }
}

@media (max-width: 800px) {
    .popup_createBox,
    .popup_selectBox,
    .popup_box {
        min-width: 0;
    }
    .popup_createBox.full-width,
    .popup_selectBox.full-width,
    .popup_box.full-width {
        min-width: calc(100% - 20px);
    }
}
@media (max-width: 500px) {
    .box-group {
        min-width: 300px;
    }
    .box-group:not(.hide) + .box-group {
        border-left: 0;
    }
    .popup_createBox,
    .popup_selectBox {
        transform: translateX(-50%);
        top: 50px;
    }
    /* .box-content {display:flex;flex-direction:column;gap:2px;} */
    .box-label,
    .box-value {
        display: block;
        text-align: left;
    }
    .box-label::after {
        content: "";
    }
    .box-value {
        display: block;
        margin-bottom: 4px;
    }
    .box-content {
        flex-direction: column;
        grid-template-columns: auto;
    }
    .attachment-wrapper {
        display: flex;
    }
    .document_flex_column {
        display: flex;
    }
    .popup_createBox.full-width,
    .popup_selectBox.full-width,
    .popup_box.full-width {
        min-width: calc(100% - 20px);
    }
}
@media print {
    ::-webkit-input-placeholder {
        color: transparent;
    }
    :-moz-placeholder {
        color: transparent;
    }
    ::-moz-placeholder {
        color: transparent;
    }
    :-ms-input-placeholder {
        color: transparent;
    }
    .data_box {
        page-break-after: always;
    }
    .outside-content {
        width: auto;
    }
    #site-container.outside,
    #site-wrapper.outside {
        width: auto;
    }
    #site-wrapper:not(.login):not(.training):not(.outside).query {
        height: auto;
    }
}