:root {
    color-scheme: light dark;

    --background-color: light-dark(#f0f0f0, #2d2d34);
    --forground-color: light-dark(#333, #f9f9f9);
    --forground-color-light: light-dark(#666, #c9c9c9);

    --theme-color: light-dark(#3f9fd9, #2685c0);
    --theme-color-hover: light-dark(#48b4f2, #1aa1ef);
    --theme-color-text: light-dark(#fff, #eee);
    --theme-color-diabled: light-dark(#acd9f3, #527184);
    --theme-color-text-diabled: light-dark(#e4f2fa, #688ba1);

    --success-color: light-dark(#468847, #468847);

    --placeholder-background: light-dark(#fff, #333);
    --placeholder-foreground: light-dark(#000, #f9f9f9);
    --placeholder-2fa: light-dark(#b1a9a9, #b1a9a9);

    --focus-color: light-dark(#7facdb, #7facdb);
    --focus-back: light-dark(#fff, #333);

    --scrollbar-top: light-dark(#aaa, #aaa);
    --scrollbar-bottom: light-dark(#ddd, #666);
    --scrollbar-track: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    --scrollbar-thumb-hover: light-dark(
        rgba(0, 0, 0, 0.4),
        rgba(255, 255, 255, 0.4)
    );

    --link-color: light-dark(#1967d2, #2685c0);
    --link-color-hover: light-dark(#3680e7, #3f9ed9);

    --overlay-color-light: light-dark(#f7f7f7, #22222a);
    --overlay-color-dark: light-dark(#ddd, #353541);

    --content-background-color: light-dark(#fafafa, #141419);
    --content-forground-color: light-dark(#000, #f0f0f0);
    --content-shadow: light-dark(0 1px 30px 10px #ccc, 0 1px 33px 3px #000);

    --banner-background: light-dark(#f8f8f8, #141419);

    --page-title-color: light-dark(#5e6e65, #c7d1cb);
    --page-title-black-color: light-dark(#000, #000);
    --page-title-grey-color: light-dark(#444, #eee);

    --input-background: light-dark(#fff, #0e0e11);
    --input-foreground: light-dark(#000, #f0f0f0);
    --input-border: light-dark(#ccc, #3d3d4d);
    --input-border-dark: light-dark(#bbb, #bbb);

    --login-background: light-dark(#d0d0d0, #d0d0d0);
    --login-border: light-dark(#f5f5f5, hsl(240, 10%, 10%));

    --tile-background: light-dark(#fff, #202027);
    --tile-foreground: light-dark(#000, #f0f0f0);
    --tile-background-hover: light-dark(#d4eaf7, #272734);

    --input-checkbox-forground: light-dark(#666, #ccc);
    --input-checkbox-forground-hover: light-dark(#333, #aaa);
    --input-checkbox-background: light-dark(#fff, #555);
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --banner-title: url("../graphics/banner-title.svg");

        --tile-shadow: 0 1px 5px -3px #aaa;
        --tile-shadow-hover: 0 1px 5px -3px #00394d;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --banner-title: url("../graphics/banner-title-dark.svg");

        --tile-shadow: 0 1px 5px -3px #111;
        --tile-shadow-hover: 0 1px 4px 0px #1f66ad;
    }
}

* {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-top) var(--scrollbar-bottom);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

body {
    margin: 0px;
    min-width: 720px;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: var(--background-color);
    display: flex;
    flex-direction: row;
    overscroll-behavior: none;
}

body.unselectable * {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

body .background {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

body .background > div {
    position: absolute;
    inset: 0;
    width: 100%;
}

body .background > div:nth-child(1),
body .background > div:nth-child(2) {
    background-blend-mode: screen;
    top: 5%;
    height: 600px;
}

body .background > div:nth-child(1) {
    left: 30%;
    background-image: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        var(--overlay-color-dark),
        transparent 100%
    );
}
body .background > div:nth-child(2) {
    left: -30%;
    background-image: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        var(--overlay-color-dark),
        transparent 100%
    );
}

body .background > div:nth-child(3) {
    top: 55%;
    left: 0;
    height: 300px;
    background-image: radial-gradient(
        ellipse 80% 50% at 50% 50%,
        var(--overlay-color-light),
        var(--overlay-color-light) 20%,
        transparent 80%,
        transparent 100%
    );
}

body * {
    font-size: 10pt;
    font-family: "Open Sans", Arial, Sans-Serif;
}

h1 {
    font-size: 20pt;
    color: var(--forground-color);
    font-weight: 700;
    white-space: nowrap;
}

h2 {
    font-size: 12pt;
    color: var(--forground-color);
    font-weight: 700;
    white-space: nowrap;
}

h3 {
    font-size: 11pt;
    color: var(--forground-color);
    font-weight: 700;
    padding: 0px;
    margin: 2px 0px;
    white-space: nowrap;
}

h4 {
    font-size: 10pt;
    color: var(--forground-color-light);
    font-weight: 700;
    padding: 0px;
    margin: 2px 0px;
    white-space: nowrap;
}

a,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

a[target="_blank"]:after {
    background-image: url(../graphics/_blank.svg);
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 0.8125rem;
    margin: 0 0.1875rem 0 0.25rem;
    position: relative;
    top: 0.125rem;
    width: 0.8125rem;
}

.small-buffer {
    clear: both;
    padding: 5px;
    box-sizing: border-box;
}

.buffer {
    clear: both;
    padding: 10px;
    box-sizing: border-box;
}

.doubleBuffer,
.double-buffer {
    clear: both;
    padding: 20px;
    box-sizing: border-box;
}

.halfBuffer,
.half-buffer {
    clear: both;
    padding: 5px;
    box-sizing: border-box;
}

.horizontal-buffer {
    clear: both;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.horizontal-double-buffer {
    clear: both;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.vertical-buffer {
    clear: both;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.vertical-double-buffer {
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.left-buffer {
    padding-left: 10px;
    box-sizing: border-box;
}

.left-half-buffer {
    padding-left: 10px;
    box-sizing: border-box;
}

.left-double-buffer {
    padding-left: 20px;
    box-sizing: border-box;
}

.left-triple-buffer {
    padding-left: 30px;
    box-sizing: border-box;
}

.left-half-buffer {
    padding-left: 5px;
    box-sizing: border-box;
}

.right-buffer {
    padding-right: 10px;
    box-sizing: border-box;
}

.right-double-buffer {
    padding-right: 20px;
    box-sizing: border-box;
}

.right-half-buffer {
    padding-right: 5px;
    box-sizing: border-box;
}

.top-buffer {
    padding-top: 10px;
    box-sizing: border-box;
}

.top-double-buffer {
    padding-top: 20px;
    box-sizing: border-box;
}

.top-half-buffer {
    padding-top: 5px;
    box-sizing: border-box;
}

.bottom-buffer {
    padding-bottom: 10px;
    box-sizing: border-box;
}

.bottom-double-buffer {
    padding-bottom: 20px;
    box-sizing: border-box;
}

.bottom-half-buffer {
    padding-bottom: 5px;
    box-sizing: border-box;
}

.top-clearance {
    margin-top: 20px !important;
}

.top-clearance-small {
    margin-top: 10px !important;
}

.bottom-clearance {
    margin-bottom: 20px;
}

.bottom-clearance-small {
    margin-bottom: 10px;
}

.left-clearance {
    margin-left: 20px !important;
}

.left-clearance-small {
    margin-left: 10px !important;
}

.right-clearance {
    margin-right: 20px !important;
}
.right-clearance-small {
    margin-right: 10px !important;
}

.buffer-bottom {
    clear: both;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.text-left,
.text-left * {
    text-align: left;
}

.pane {
    background: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 1px 5px #ccc;

    & .pane {
        background: #fff;
        box-shadow: 0 1px 5px #ccc;

        & .pane {
            background: #f0f0f0;
            box-shadow: none;

            & .pane {
                background: #fff;
                box-shadow: none;

                & .pane {
                    background: #f0f0f0;
                    box-shadow: none;
                }
            }
        }
    }
}

.page,
.page-frame {
    padding: 0;
}

.page,
.page-content {
    width: 100%;
}

.page-frame {
    position: relative;
    min-width: 720px;
    width: 100%;
    padding: 0;
    -webkit-transition: padding-right 0.5s;
    transition: padding-right 0.5s;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.page-frame.visible {
    opacity: 1;
}
.page-frame.instant {
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
}

.page-content {
    position: relative;
    margin: 0 0 0 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tab-frame {
    height: initial;
    border: none;
    z-index: 1;
    color: var(--forground-color);
    padding: 0px;
    box-sizing: border-box;
    flex: unset;
}

.tab-content {
    padding: 30px 0;
}

.error-message {
    color: #ff0000 !important;
}

.content-frame {
    position: relative;
    width: 500px;
    background: var(--content-background-color);
    color: var(--content-forground-color);
    padding: 0px;
    margin: 0px auto 20px auto;
    text-align: center;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: var(--content-shadow);
    overflow: hidden;
}

.banner {
    position: relative;
    width: 100%;
    height: 120px;
    background: var(--banner-background);
}
.banner:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 10px;
    background-image: var(--banner-title);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.login-frame {
    position: relative;
    padding: 20px 20px 0;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.login-frame h4 {
    word-break: break-word;
}

.login-frame.loading .page-title,
.login-frame.loading .maintenance-messages,
.login-frame.loading .login-controls,
.login-frame.loading .login-buttons,
.login-frame.loading .login-additional {
    display: none;
}

.copyright {
    width: 470px;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
    color: var(--forground-color);
    padding-bottom: 20px;
}

.page-title {
    font-family: "Titillium Web", sans-serif;
    font-size: 24pt;
    color: var(--page-title-color);
    vertical-align: middle;
    white-space: normal;
    height: 45px;
    line-height: 45px;
    padding: 0px !important;
}

.page-title.black {
    font-size: 24pt;
    color: var(--page-title-black-color);
    border: none;
}

.page-title.grey {
    font-size: 24pt;
    font-weight: bold;
    color: var(--page-title-grey-color);
    border: none;
}

.subtitle,
.subtitle * {
    display: inline-block;
    font-size: 12pt;
    color: var(--forground-color);
    line-height: 24pt;
    letter-spacing: 0.8px;
}

a.subtitle,
.subtitle a {
    display: inline-block;
    color: var(--link-color);
    text-decoration: none;
}

.section-title {
    display: inline-block;
    font-size: 11pt;
    color: var(--forground-color);
    line-height: 20pt;
    letter-spacing: 0.5px;
}

/*Login Styles*/
a.login,
button.login,
input[type="button"].submit {
    box-sizing: border-box;
    display: block;
    font-size: 11pt;
    font-weight: 600;
    text-decoration: none;
    width: 80%;
    height: 45px;
    line-height: 45px;
    margin: 10px auto 0 auto;
    padding: 0 10px;
    border: 0;
    background: var(--theme-color) !important;
    color: var(--theme-color-text) !important;
    text-shadow: none;
    border-radius: 10px;
    cursor: pointer;
}

a.login:hover,
a.login:focus,
button.login:hover,
button.login:focus {
    box-shadow: none !important;
    background: var(--theme-color-hover) !important;
    color: var(--theme-color-text) !important;
}

a.login:disabled,
button.login:disabled,
a.login:disabled:hover,
button.login:disabled:hover,
a.login:disabled:focus,
button.login:disabled:focus {
    background: var(--theme-color-diabled) !important;
    color: var(--theme-color-text-diabled) !important;
    cursor: default;
}

button.login:first-child,
input[type="button"].submit:first-child {
    margin-top: 0 !important;
}

.login-controls {
    width: 100%;
    margin-top: 20px;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition:
        background-color 600000s 0s,
        color 600000s 0s;
}

input.username,
span.username,
input.password,
span.password {
    background: var(--input-background) !important;
    box-sizing: border-box;
    display: block;
    font-size: 12pt !important;
    text-align: left;
    width: 80%;
    height: 55px;
    line-height: 55px;
    padding: 0 10px !important;
    margin: 0 auto !important;
    border: 1px solid var(--login-border) !important;
    border-radius: 10px !important;
    color: var(--input-foreground) !important;
    outline: none;
    position: relative;
    z-index: 2;
}

input.username *,
span.username *,
input.password *,
span.password * {
    font-size: 12pt;
}

input.username,
span.username {
    z-index: 2;
}

input.password,
span.password {
    margin: 0 auto;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
}

input.password.stand-alone,
span.password.stand-alone {
    margin: 0 auto;
    border-radius: 10px !important;
    z-index: 1;
    opacity: 1;
}

input.password:focus {
    z-index: 3 !important;
}

input.username:-webkit-autofill,
input.username:-webkit-autofill:hover,
input.username:-webkit-autofill:focus,
input.username:-webkit-autofill:active,
input.password:-webkit-autofill,
input.password:-webkit-autofill:hover,
input.password:-webkit-autofill:focus,
input.password:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--placeholder-background) inset !important;
    -webkit-text-fill-color: var(--placeholder-foreground) !important;
}

input.username:-webkit-autofill,
input.username:-webkit-autofill:hover,
input.username:-webkit-autofill:focus,
input.username:-webkit-autofill:active,
input.username:-webkit-autofill::first-line,
input.password:-webkit-autofill,
input.password:-webkit-autofill:hover,
input.password:-webkit-autofill:focus,
input.password:-webkit-autofill:active,
input.password:-webkit-autofill::first-line {
    font-size: 12pt !important;
}

input.username:-webkit-autofill:focus,
input.username:-webkit-autofill:active,
input.password:-webkit-autofill:focus,
input.password:-webkit-autofill:active {
    -webkit-box-shadow:
        0 0 0 3px var(--focus-color),
        0 0 0 30px var(--focus-back) inset !important;
}

span.password-container {
    margin: -56px auto 0;
    position: relative;
    display: block;
    width: 100%;
    transition: margin 0.2s;
}

span.caps-lock-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 15px;
    right: 80px;
    z-index: 10000;
}

.needs-password input.username,
.needs-password span.username {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.needs-password span.password-container {
    margin-top: 0;
    z-index: 3;
}

.needs-password input.password,
.needs-password input.password,
span.password {
    margin-top: 1px;
    opacity: 1;
}

span.password {
    margin-top: 0;
}

input.username.locked,
input.password.locked {
    opacity: 0 !important;
    border: 0 !important;
    height: 0 !important;
}

span.username,
span.password {
    background: var(--login-background);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

input.username:focus,
input.password:focus {
    z-index: 9999;
}

.recover input.password,
.update-password input.password {
    margin-bottom: 10px;
}

input.username:disabled,
input.password:disabled {
    background: var(--login-background);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.two-factor-code {
    text-align: left !important;
    letter-spacing: 10px !important;
    font-size: 24pt !important;
    height: 50px !important;
    line-height: 50px !important;
    width: 190px !important;
    padding: 0 0 0 15px !important;
}

.two-factor-code:-ms-input-placeholder,
:-ms-input-placeholder {
    color: var(--placeholder-2fa) !important;
}

.two-factor-code-title {
    text-align: center;
    font-size: 16pt;
    line-height: 20px;
    margin-bottom: 20px;
}

.controls .error-message.subtitle,
.controls .text-success.subtitle {
    font-size: 10pt;
}

.controls .subtitle.text-success {
    color: var(--success-color);
}

div.user-frame {
    background: var(--input-border);
    border-radius: 3px;
    text-align: left;
    overflow: auto;
    margin: 20px 10px 10px 10px;
}

.user {
    float: left;
    background: var(--input-border-dark);
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
}

.systems {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.systems .system-title {
    float: left;
    width: 100%;
    font-weight: 700;
}

.systems .system {
    background: var(--input-border-dark);
    float: right;
    width: 100%;
    padding: 5px 5px;
    margin: 0px 0px 3px 0px;
    border-radius: 3px;
    color: var(--input-foreground);
    box-sizing: border-box;
}

.systems .system:hover {
    background: var(--overlay-color-dark);
    text-decoration: none;
}

.systems .system:nth-child(2) {
    margin-top: 10px;
}

.systems .system:last-child {
    margin-bottom: 0px;
}

.systems .system span:nth-child(2) {
    float: right;
}

.link-btn {
    color: var(--link-color);
    background-color: transparent !important;
    border: none;
    position: relative;
    top: -0.35em;
    cursor: pointer;
}

.link-btn:hover {
    color: var(--link-color-hover);
    text-decoration: underline;
}

.link-btn:disabled {
    color: var(--theme-color-diabled);
    border: none;
    background: none !important;
}

.link-buttons {
    width: 100%;
    display: inline-block;
    text-align: left;
    letter-spacing: 2px;
    padding: 15px 0 0;
    box-sizing: border-box;
}

.link-buttons .link-button {
    display: block;
    background: var(--tile-background);
    height: 200px;
    width: calc(50% - 10px);
    margin: 0 0 20px 20px;
    color: var(--tile-foreground);
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    transition: all 100ms linear;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: var(--tile-shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}

.link-buttons .link-button.double {
    width: 100%;
}

.link-buttons .link-button:nth-child(2n + 1) {
    margin-left: 0;
}

.link-buttons .link-button:hover,
.link-buttons .link-button:focus {
    background: var(--tile-background-hover);
    box-shadow: var(--tile-shadow-hover);
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    transition: all 100ms linear;
}

.link-buttons .link-button:focus {
    box-shadow: 0 0 0 3px var(--focus-color) !important;
}

.link-buttons .link-button .icon-cont {
    width: 65px;
    height: 65px;
    border-radius: 15px;
    overflow: hidden;
    display: block;
    float: left;
}

label.checkbox {
    position: relative;
    height: 20px;
    margin: 5px 0 0;
    display: inline-flex;
    box-sizing: border-box;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

label.checkbox input[type="checkbox"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    display: inline-block;
}

label.checkbox span.checkmark {
    display: inline-block;
    position: relative !important;
    top: 2px !important;
    left: 0 !important;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    vertical-align: top;
}

label.checkbox.subtitle span.checkmark {
    top: 0px !important;
}

label.checkbox span.text {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    height: 22px;
    line-height: 23px;
    vertical-align: top;
}

label.checkbox.subtitle span.text {
    margin-left: 5px;
}

label.checkbox.button span.text {
    line-height: 30px;
}

label.checkbox span.checkmark::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    content: "";
    background: var(--input-checkbox-background);
    border-radius: 4px;
}

label.checkbox span.checkmark::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "check_box_outline_blank";
    font-family: "Material Icons";
    font-size: 1.5em;
    color: var(--input-checkbox-forground);
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
}

.windows label.checkbox span.checkmark::after {
    direction: ltr;
    -webkit-text-stroke: 0.45px;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
}

label.checkbox span.checkmark:hover::after {
    color: var(--input-checkbox-forground-hover);
}

label.checkbox input[type="checkbox"]:focus ~ span.checkmark::after {
    color: var(--input-checkbox-forground-hover);
    text-shadow: none;
}

label.checkbox input[type="checkbox"]:checked ~ span.checkmark::after {
    content: "check_box";
}

.item-text {
    display: block;
    clear: both;
    margin: 70px 0 0;
    padding: 5px 10px 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-title-2014 {
    font-size: 16pt;
    line-height: 16pt;
    font-weight: bold;
    display: block;
    width: 170px;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    padding-bottom: 5px;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.page-subtitle-2014 {
    font-size: 12pt;
    letter-spacing: normal;
}

@media only screen and (max-width: 800px) {
    body,
    .page-frame {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-width: 400px !important;
    }

    div.page,
    div.page-content,
    div.tab-frame,
    div.tab-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
    }

    div.tab-content {
        padding: 0 !important;
        overflow: auto;
    }

    div.content-frame {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        padding: 0 0 120px;
        margin: 0;
    }

    div.copyright {
        position: relative !important;
        top: -115px !important;
        left: 0 !important;
        width: calc(100% - 30px) !important;
        height: 115px;
        padding: 0 15px;
        margin: 0;
        color: var(--forground-color) !important;
        font-size: 7pt !important;
        text-align: center !important;
        contain: content;
    }

    div.link-buttons a.link-button {
        width: 100%;
        margin: 10px 0 0 0;
    }

    .profile-details-wrapper *,
    .profile-photo-wrapper {
        display: none;
    }

    .profile-details-wrapper {
        padding: 20px;
    }

    .profile-details-wrapper:after {
        content: "The user profile is not available on this device, please log in with a desktop browser.";
        font-size: 12pt;
    }

    .page-title-2014 {
        font-size: 12pt;
        width: 140px;
    }

    .item-text,
    .item-text > .page-subtitle-2014 {
        font-size: 10pt;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
}

.lds-ellipsis div {
    position: absolute;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-color-text);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 16px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 24px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(8px, 0);
    }
}

.info-footer {
    font-size: 10pt;
    font-style: italic;
    font-weight: 700;
}

ul.icon-check-list-large li {
    display: flex !important;
}

ul.icon-check-list-large li i {
    position: relative;
    top: 5px;
    flex: 0;
    width: initial !important;
    margin-right: 5px;
}

ul.icon-check-list-large li span {
    flex: 1;
    text-align: left;
}

.login-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    animation-name: waitPulse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -webkit-animation: waitPulse 3s infinite;
    animation: waitPulse 3s infinite;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    z-index: 9;
}

.loading .login-loader {
    display: initial;
}

.login-loader .wait-container {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 98;
}

.loader {
    position: absolute;
    left: calc(50% - 5em);
    top: calc(50% - 5em);
    z-index: 98;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {
    font-size: 10px;
    text-indent: -9999em;
    border-top: 0.3em solid rgba(0, 0, 0, 0.1);
    border-right: 0.3em solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
    border-left: 0.3em solid #006ebf;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OX-hpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OVuhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OXuhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OUehpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OXehpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOX-hpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOVuhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOXuhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOUehpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOXehpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGIVzY5abuWIGxA.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGItzY5abuWI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NaPecZTIAOhVxoMyOr9n_E7fdM3mDaZRbryhsA.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NaPecZTIAOhVxoMyOr9n_E7fdMPmDaZRbrw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/NaPDcZTIAOhVxoMyOr9n_E7ffBzCGIVzY5abuWIGxA.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/NaPDcZTIAOhVxoMyOr9n_E7ffBzCGItzY5abuWI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NaPDcZTIAOhVxoMyOr9n_E7ffHjDGIVzY5abuWIGxA.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NaPDcZTIAOhVxoMyOr9n_E7ffHjDGItzY5abuWI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.woff2) format("woff2");
}

.material-icons {
    font: normal normal normal 1.25em "Material Icons" !important;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
    font-variation-settings: normal !important;
    color: var(--icon-default);
    border-radius: 5px;
}

.material-icons.fill,
body.dark .material-icons.fill {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24 !important;
}

.material-icons.blue,
body.dark .material-icons.blue {
    color: #006ebf;
}

.material-icons.grey,
body.dark .material-icons.grey {
    color: #666;
}

.material-icons.red,
body.dark .material-icons.red {
    color: #ed4f4f;
}

.material-icons.green,
body.dark .material-icons.green {
    color: #67c267;
}

.material-icons.upsidedown {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}