:root 
{
    --main-bg-color                 : rgba(255, 255, 255, 1);
    --main-text-color               : rgba(0, 0, 0, 0.87);
    --main-label-color              : rgba(0,0,0,.6);
    --main-border-color             : rgba(224, 224, 224, 1);
    --main-accent-color             : rgba(109, 89, 122, 1);
    --main-accent-not-color         : rgba(255, 255, 255, 1);
    --main-semi-accent-color        : rgba(34, 134, 169, 0.5);
    --main-selection-bg-color       : rgba(0, 176, 229, 0.04);
    --primary-workspace-color       : rgba(244, 244, 244, 1);
    --main-danger-color             : rgba(244, 67, 54, 1);
    --main-success-color            : rgba(139, 195, 74, 1);
    --main-warning-color            : rgba(255, 193, 7, 1);
    --main-accent-not-color         : rgba(255, 255, 255, 1);
    --main-text-shadow-color        : rgba(224, 224, 224, 1);
    --main-disabled-color           : rgba(0,0,0,.1);
    --main-tool-selected-bg-color   : rgba(0,0,0,.18);
    --main-tool-hover-bg-color      : #ebebeb;
}   
@media (prefers-color-scheme: dark) {
    :root
    {
        --main-bg-color             : rgba(54, 54, 64, 1);
        --main-text-color           : rgba(255, 255, 255, 1);
        --main-label-color          : rgba(81, 81, 89, 0.6);
        --main-border-color         : rgba(81, 81, 89, 1);
        --main-accent-color         : rgba(0, 176, 229, 1);
        --main-accent-not-color     : rgba(255, 255, 255, 1);
        --main-semi-accent-color    : rgba(0, 176, 229, 0.4);
        --main-selection-bg-color   : rgba(0, 176, 229, 0.07);
        --primary-workspace-color   : rgba(36, 36, 38, 1);
        --main-danger-color         : rgba(244, 67, 54, 1);
        --main-success-color        : rgba(139, 195, 74, 1);
        --main-warning-color        : rgba(255, 193, 7, 1);
        --main-accent-not-color     : rgba(255, 255, 255, 1);
        --main-text-shadow-color    : rgba(81, 81, 89, 0.25);
    }
}
@font-face {
    font-family             : "Orbitron";
    src                     : url("font/orbitron/Orbitron-Regular.ttf") format("truetype");
    font-weight             : 400;
}
@font-face {
    font-family             : "Orbitron";
    src                     : url("font/orbitron/Orbitron-Medium.ttf") format("truetype");
    font-weight             : 500;
}
@font-face {
    font-family             : "Orbitron";
    src                     : url("font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
    font-weight             : 600;
}
@font-face {
    font-family             : "Orbitron";
    src                     : url("font/orbitron/Orbitron-Bold.ttf") format("truetype");
    font-weight             : 700;
}

@font-face {
    font-family             : "Jura";
    src                     : url("font/jura/Jura-Regular.ttf") format("truetype");
    font-weight             : 400;
}
@font-face {
    font-family             : "Jura";
    src                     : url("font/jura/Jura-Medium.ttf") format("truetype");
    font-weight             : 500;
}
@font-face {
    font-family             : "Jura";
    src                     : url("font/jura/Jura-SemiBold.ttf") format("truetype");
    font-weight             : 600;
}
@font-face {
    font-family             : "Jura";
    src                     : url("font/jura/Jura-Bold.ttf") format("truetype");
    font-weight             : 700;
}

@font-face {
    font-family             : "Roboto";
    src                     : local(Roboto Thin), url("font/roboto/Roboto-Thin.eot");
    src                     : url("font/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("font/roboto/Roboto-Thin.woff2") format("woff2"), url("font/roboto/Roboto-Thin.woff") format("woff"), url("font/roboto/Roboto-Thin.ttf") format("truetype");
    font-weight             : 200;
}
@font-face {
    font-family             : "Roboto";
    src                     : local(Roboto Light), url("font/roboto/Roboto-Light.eot");
    src                     : url("font/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("font/roboto/Roboto-Light.woff2") format("woff2"), url("font/roboto/Roboto-Light.woff") format("woff"), url("font/roboto/Roboto-Light.ttf") format("truetype");
    font-weight             : 300;
}
@font-face {
    font-family             : "Roboto";
    src                     : local(Roboto Regular), url("font/roboto/Roboto-Regular.eot");
    src                     : url("font/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("font/roboto/Roboto-Regular.woff2") format("woff2"), url("font/roboto/Roboto-Regular.woff") format("woff"), url("font/roboto/Roboto-Regular.ttf") format("truetype");
    font-weight             : 400;
}
@font-face {
    font-family             : "Roboto";
    src                     : url("font/roboto/Roboto-Medium.eot");
    src                     : url("font/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("font/roboto/Roboto-Medium.woff2") format("woff2"), url("font/roboto/Roboto-Medium.woff") format("woff"), url("font/roboto/Roboto-Medium.ttf") format("truetype");
    font-weight             : 500;
}
@font-face {
    font-family             : "Roboto";
    src                     : url("font/roboto/Roboto-Bold.eot");
    src                     : url("font/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("font/roboto/Roboto-Bold.woff2") format("woff2"), url("font/roboto/Roboto-Bold.woff") format("woff"), url("font/roboto/Roboto-Bold.ttf") format("truetype");
    font-weight             : 700;
}

@font-face {
    font-family             : "Comfortaa";
    src                     : url("font/comfortaa/Comfortaa-Regular.ttf") format("truetype"), url("font/comfortaa/Comfortaa-Regular.woff2") format("woff2"), url("font/comfortaa/Comfortaa-Regular.woff") format("woff");
    font-weight             : normal;
    font-style              : normal;
    font-display            : swap;
}

@font-face {
    font-family             : "Comfortaa";
    src                     : url("font/comfortaa/Comfortaa-Light.ttf") format("truetype"), url("font/comfortaa/Comfortaa-Light.woff2") format("woff2"), url("font/comfortaa/Comfortaa-Light.woff") format("woff");
    font-weight             : 300;
    font-style              : normal;
    font-display            : swap;
}

@font-face {
    font-family             : "Comfortaa";
    src                     : url("font/comfortaa/Comfortaa-Medium.ttf") format("truetype"), url("font/comfortaa/Comfortaa-Medium.woff2") format("woff2"), url("font/comfortaa/Comfortaa-Medium.woff") format("woff");
    font-weight             : 500;
    font-style              : normal;
    font-display            : swap;
}

@font-face {
    font-family             : "Comfortaa";
    src                     : url("font/comfortaa/Comfortaa-SemiBold.ttf") format("truetype"), url("font/comfortaa/Comfortaa-SemiBold.woff2") format("woff2"), url("font/comfortaa/Comfortaa-SemiBold.woff") format("woff");
    font-weight             : 600;
    font-style              : normal;
    font-display            : swap;
}

@font-face {
    font-family             : "Comfortaa";
    src                     : url("font/comfortaa/Comfortaa-Bold.ttf") format("truetype"), url("font/comfortaa/Comfortaa-Bold.woff2") format("woff2"), url("font/comfortaa/Comfortaa-Bold.woff") format("woff");
    font-weight             : bold;
    font-style              : normal;
    font-display            : swap;
}

@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-Thin.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 200;
    font-display            : swap;
}
@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-Light.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 300;
    font-display            : swap;
}
@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-Regular.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 400;
    font-display            : swap;
}
@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-Medium.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 500;
    font-display            : swap;
}
@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-Bold.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 700;
    font-display            : swap;
}
@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-ExtraBold.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 800;
    font-display            : swap;
}
@font-face {
    font-family             : "Poppins";
    src                     : url("font/poppins/Poppins-Black.ttf") format("truetype");
    font-style              : normal;
    font-weight             : 900;
    font-display            : swap;
}

@font-face {
    font-family             : 'Material Symbols Outlined';
    font-style              : normal;
    font-weight             : 100 700;
    src                     : url(font/google/google-material-outlined.woff2) format('woff2');
}
.material-symbols-outlined {
    font-family                     : 'Material Symbols Outlined';
    font-weight                     : normal;
    font-style                      : normal;
    font-size                       : 24px;
    line-height                     : 1;
    letter-spacing                  : normal;
    text-transform                  : none;
    display                         : inline-block;
    white-space                     : nowrap;
    word-wrap                       : normal;
    direction                       : ltr;
    -webkit-font-feature-settings   : 'liga';
    -webkit-font-smoothing          : antialiased;
    font-variation-settings         : 'FILL' 0,  'wght' 400,  'GRAD' 0,  'opsz' 24;
}
.material-symbols-filled {
    font-family                     : 'Material Symbols Outlined';
    font-weight                     : normal;
    font-style                      : normal;
    font-size                       : 24px;
    line-height                     : 1;
    letter-spacing                  : normal;
    text-transform                  : none;
    display                         : inline-block;
    white-space                     : nowrap;
    word-wrap                       : normal;
    direction                       : ltr;
    -webkit-font-feature-settings   : 'liga';
    -webkit-font-smoothing          : antialiased;
    font-variation-settings         : 'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 24;
}

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white;
}

html 
{
    height                  : 100%;
    width                   : 100%;
    padding                 : 0;
    margin                  : 0;
    text-rendering          : optimizeLegibility !important;
    -webkit-font-smoothing  : antialiased !important;
    overflow                : hidden;
    font-family             : Roboto, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size               : 14px;
    color                   : var(--main-text-color);
    background-color        : var(--primary-workspace-color);
}
body 
{
    width                   : 100%;
    height                  : 100%;
    overflow                : hidden;
    padding                 : 0;
    margin                  : 0;
    font-size               : 14px;
    color                   : var(--main-text-color);
    background-color        : var(--primary-workspace-color);
}

html {
    color-scheme            : dark light;
}

:root[data-theme="light"] {
    color-scheme                : light;
    --main-bg-color             : rgba(255, 255, 255, 1);
    --main-text-color           : rgba(0, 0, 0, 0.87);
    --main-label-color          : rgba(0,0,0,.6);
    --main-border-color         : rgba(224, 224, 224, 1);
    --main-accent-color         : rgba(34, 134, 169, 1);
    --main-semi-accent-color    : rgba(34, 134, 169, 0.5);
    --main-selection-bg-color   : rgba(0, 176, 229, 0.04);
    --primary-workspace-color   : rgba(244, 244, 244, 1);
    --main-danger-color         : rgba(244, 67, 54, 1);
    --main-success-color        : rgba(139, 195, 74, 1);
    --main-warning-color        : rgba(255, 193, 7, 1);
    --main-accent-not-color     : rgba(255, 255, 255, 1);
    --main-text-shadow-color    : rgba(224, 224, 224, 1);
    --main-disabled-color       : rgba(0,0,0,.1);
}
  
:root[data-theme="dark"] {    
    color-scheme                : dark;
    --main-bg-color             : rgba(54, 54, 64, 1);
    --main-text-color           : rgba(255, 255, 255, 1);
    --main-label-color          : rgba(81, 81, 89, 0.6);
    --main-border-color         : rgba(81, 81, 89, 1);
    --main-accent-color         : rgba(0, 176, 229, 1);
    --main-semi-accent-color    : rgba(0, 176, 229, 0.4);
    --main-selection-bg-color   : rgba(0, 176, 229, 0.07);
    --primary-workspace-color   : rgba(36, 36, 38, 1);
    --main-danger-color         : rgba(244, 67, 54, 1);
    --main-success-color        : rgba(139, 195, 74, 1);
    --main-warning-color        : rgba(255, 193, 7, 1);
    --main-accent-not-color     : rgba(255, 255, 255, 1);
    --main-text-shadow-color    : rgba(81, 81, 89, 0.25);
}

.application {
    width                   : 100%;
    height                  : 100%;
    background-color        : var(--primary-workspace-color);
}

.fullSize
{
    width                   : 100%;
    height                  : 100%;
}
.fullSizePadded
{
    width                   : 100%;
    height                  : 100%;
    padding                 : 1rem;
}
.fullSizeCentered
{
    width                   : 100%;
    height                  : 100%;
    display                 : grid;
    place-items             : center center;
    padding                 : 1rem;
}
.fullSizeBody {
    position                : absolute;
    left                    : 0;
    top                     : 0;
    width                   : 100%;
    height                  : 100%;
    z-index                 : 10;
    background-color        : var(--main-bg-color);
    transition              : all 0.25s linear;
}
.fullSizeBody:not([visible]),
.fullSizeBody[visible="false"] {
    transform               : scale(0);
    opacity                 : 0;
}
.fullSizeBody[visible="true"] {
    transform               : scale(1);
    opacity                 : 1;
}



.rounded 
{
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
}
.rounded-6
{
    border-radius               : 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
}
.rounded-8
{
    border-radius               : 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
}
.card
{
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
    background-color            : var(--main-bg-color);
}
.card-4
{
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
    background-color            : var(--main-bg-color);
}
.card-6
{
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
    background-color            : var(--main-bg-color);
}
.card-8
{
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
    background-color            : var(--main-bg-color);
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.right-aligned {
    text-align: right;
}

.rounded {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.card-shadow {
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}

.shadowed {
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.materialShadowed {
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.maxShadowed {
    
    -moz-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
}

.icon-pulsate {
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0% {
    font-variation-settings: 'wght' 100;
  }
  50% {
    font-variation-settings: 'wght' 700;
  }
  100% {
    font-variation-settings: 'wght' 100;
  }
}

@keyframes scaleUp {
    from {
        transform   : scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0);
        /*opacity     : 0;*/
    }
    to {
        transform   : scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1);
        /*opacity     : 1;*/
    }
}

@keyframes scaleDown {
    from {
        transform   : scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1);
        opacity     : 1;
    }
    to {
        transform   : scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0);
        opacity     : 0;
    }
}


.dx-scrollview-scrollbottom {
    display: none !important;
}

.mini-grid-dragger {
    padding                     : 20px;
    position                    : absolute;
    display                     : grid;
    grid-template-rows          : min-content auto auto;
    grid-row-gap                : 5px;
    border                      : 1px solid var(--main-stroke-color);
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
    background-color            : var(--main-bg-color);
    z-index                     : 10001;
    min-width                   : 200px;
}
.mini-grid-header-text 
{
    font-weight                 : 400;
    font-size                   : 14px; 
    border-bottom               : 1px solid var(--main-border-color);
    margin-bottom               : 10px;
}
.mini-grid-icon-cell 
{
    display                     : grid;
    place-items                 : center center;
}
*[clickable],
.clickable {
    cursor                      : pointer;
}
.grid-inline-button {
    cursor                      : pointer;
    color                       : var(--main-accent-color);
}
*[draggable],
.draggable {
    cursor                      : move;
}

.application-card {
    width                       : 100%;
    height                      : 100%;
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
    background-color            : var(--main-bg-color);
    padding                     : 1rem;
}

.application-page 
{
    padding                     : 1rem;
    width                       : 100%;
    height                      : 100%;
    transition                  : all 0.25s linear;
}

.application-page-body {
    width                   : 100%;
    height                  : 100%;
    overflow                : hidden;
}

.application-page-body-toolbar {
    float                   : left;
    width                   : 100%;
    height                  : 60px;
}

.application-page-body-toolbar + .application-page-body {
    float                   : left;
    height                  : calc(100% - 60px - 3rem);
    margin-top              : 1rem;
}


.application-page[state="hidden"] {
    transform                  : scale(0);
    opacity                    : 0;
}

.application-page[state="visible"] {
    transform                  : scale(1);
    opacity                    : 1;
}

.blackbutton
{
    color           : var(--main-text-color) !important;
    font-weight     : 600 !important;
    cursor          : pointer !important;
}
.accentbutton
{
    color           : var(--main-accent-color) !important;
    font-weight     : 600 !important;
    cursor          : pointer !important;
}
.greenbutton
{
    color           : rgba(10, 94, 8, 1) !important;
    font-weight     : 600 !important;
    cursor          : pointer !important;
}
.redbutton
{
    color           : var(--main-danger-color) !important;
    font-weight     : 600 !important;
    cursor          : pointer !important;
}


.dx-toolbar-before .dx-toolbar-item:not(:first-of-type) {
    padding-left : 1rem !important;
}

.dx-button-text {
    text-transform: none !important;
}

.sign-in-form, .sign-in-forgot-password {
    top         : 50%;
    transform   : translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);
    position    : relative;
}
.sign-in-error {
    display     : grid;
    place-items : center start;
    color       : var(--main-danger-color);
    min-height  : 20px;
    width       : 100%;
    margin-top  : 1rem;
}
.sign-in-error-no-error {
    display     : none;
}

.TAPITooltip 
{
    background      : var(--main-accent-color) !important;
    color           : var(--main-accent-not-color) !important;
    font-size       : 0.8rem !important;
    font-weight     : 400 !important;
    font-family     : Roboto !important;
}

.dx-scrollview-top-pocket .dx-loadindicator,
.dx-scrollview-top-pocket .dx-scrollview-pull-down-indicator {
    display : none !important;
}

span.value {
      font-weight           : 500;
}
span.value-max {
    font-size   : 1.2rem;
    font-weight : 500;
    color       : var(--main-accent-color);
}

.theme-switcher, 
.theme-switcher[theme="light"] {
    width           : 58px;
    height          : 30px;
    border-radius   : 15px;
    overflow        : hidden;
    background-color: var(--main-bg-color);
    border          : 1px solid var(--main-border-color);
    transition	    : all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;
    cursor          : pointer;

    & .theme-slider {
        width           : 84px;
        height          : 28px;
        background      : transparent;
        margin-left     : 0;
        display         : flex;
        transition	    : all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;

        & div {
            width           : 28px;
            height          : 28px;
            border-radius   : 14px;
            display         : grid;
            place-items     : center;
        }

        & div:nth-child(2) {
            background-color: var(--main-accent-color);
            border          : 2px solid var(--main-bg-color);
        }
    }

}

.theme-switcher[theme="dark"] {

    background-color    : var(--main-bg-color);

    & .theme-slider {
        margin-left     : -28px;

        & div:nth-child(2) {
        }
    }

}

.icon-button {
    display         : grid;
    place-items     : center;
    cursor          : pointer;
    color           : var(--main-accent-color);
}

.icon-button[medium] span { font-size: 2rem; }
.icon-button[large] span { font-size: 2.5rem; }

.icon-button span:first-of-type             { display: block    }
.icon-button span:not(:first-of-type)       { display: none     }

.icon-button:hover span:first-of-type        { display: none    }
.icon-button:hover span:not(:first-of-type)  { display: block   }

.common-menu-item {
    display                 : grid;
    grid-template-columns   : min-content 1fr;
    grid-column-gap         : 10px;
    cursor                  : pointer;

    & .common-menu-item-icon {
        display             : grid;
        place-items         : center;
        width               : 24px;
        height              : 24px;
    }

    & .common-menu-item-text {
        display             : grid;
        place-items         : center start;
        height              : 24px;
    }
}

.common-tolbar-button {
    display                 : grid;
    cursor                  : pointer;
    padding                 : 8px;
    border-radius           : 4px;

    & .common-tolbar-button-icon {
        display           : grid;
        place-items       : center;

        span {
            font-size : 2rem;
        }

        span:first-of-type          { display: block; }
        span:not(:first-of-type)    { display: none; }
    }

    & .common-tolbar-button-text {
        display             : grid;
    }
}

.common-tolbar-button:hover {
    background-color    : rgba(0,0,0, 0.04);
    

    & .common-tolbar-button-icon {
        span:first-of-type          { display: none; }
        span:not(:first-of-type)    { display: block; }
    }
}

.common-tolbar-button[type="horizontal"] {
    grid-template-columns      : min-content 1fr;
    gap                         : 4px;

    & .common-tolbar-button-text {
        place-items         : center start;
        margin-top          : 4px;
    }

}

.common-tolbar-button[type="vertical"] {
    grid-template-rows      : 1fr min-content;

    & .common-tolbar-button-text {
        place-items         : center;
    }
}

.tapi-expand-collapse-button {
    transition  : all 0.4s linear;
    cursor      : pointer;
}
.tapi-expand-collapse-button[expanded] {
    transform : rotate(90deg);
}

.sign-in-wrapper {
    position            : relative;
    width               : 100%;
    height              : 100%;
}
.sign-in-element {
    position            : absolute;
    width               : 100%;
    height              : 100%;
    z-index             : 2;
}
.sign-in-element[image] {
    background-image    : url("images/eTapiFinance.jpg");
    background-size     : cover;
    z-index             : 0;
}
.sign-in-element[shade] {
    background-color    : rgba(255, 255, 255, 0.9);
    z-index             : 1;
}
.eTapiPlusLogo {
    width               : 290px;
    height              : 150px;
    background-image    : url("images/eTapiPlus-Logo.png");
    background-repeat   : no-repeat;
    background-size     : cover;
}
.eTapiPlusLogoSmall {
    width               : 125px;
    height              : 55px;
    background-image    : url("images/eTapiPlus-Logo-Small.png");
    background-repeat   : no-repeat;
    background-size     : cover;
}
.eTapiTextLogo {
    display                 : flex;
    flex-direction          : row; -webkit-flex-direction: row; -ms-flex-direction: row;
    font-family             : NewRepublic;
    font-size               : 4rem;
    font-weight             : 700;
    color                   : var(--main-accent-color);
    align-items             : center; -webkit-align-items: center; 
    text-shadow             : 0 2px 5px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.12);
    text-shadow             : 2px 2px 4px var(--main-text-shadow-color);
    cursor                  : default;
    margin-top              : -5px;

    & span:nth-child(2) { margin-left: -10px; }
    & span:nth-child(3) { margin-left: -10px; }
    & span:nth-child(4) { margin-left: -3px; }
    & span:nth-child(5) { margin-left: -3px; }
    & span:nth-child(6) {
        font-size           : 3rem;
        color               : rgba(227, 10, 23, 1);
        -webkit-text-stroke : 1px rgba(227, 10, 23, 0.5); text-stroke: 1px rgba(227, 10, 23, 0.5);
        margin-top          : -30px;
        margin-left         : -4px;
    }
}