/*Barvy:    červená:    DA291C - Pantone 485
            šedá:       53565A - Pantone Cool Gray 11 C
*/

:root {
    --sqlColor: black;
    --ptrnPercent20: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHElEQVQYV2NkQAOMDAwM/xkYGOA0iIECYAJwVQBg4QQE/VczVgAAAABJRU5ErkJggg==);
    --ptrnPercent25: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQYV2NkYGD4z8DAwMgABTAGTPA/XAamEkMFAK66BgOe5O9SAAAAAElFTkSuQmCC);
    --ptrnPercent40: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHElEQVQYV2NkYGD4z8DAwAijQQwQgAvCZXCqAAAEwQgDLHxvPQAAAABJRU5ErkJggg==);
    --ptrnSmallgrid: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkgID/DAwMjCAGmEAXAMnCAYYKAI7EBARuCBE6AAAAAElFTkSuQmCC);
    --ptrnColor: black;
    --mainColor: #1e1e1e;
    --secondaryColor: #444444;
    --accentsColor: #aa0000;
    --RGB_accentsColor: 170, 0, 0;
    --fontColor: #FFFFFF;
    --secondaryFontColor: #AFAFAF;
}

* {
    font-family: Calibri;
    /*color: var(--fontColor); */
}

.rotateCursor {
    cursor: url("../Pict/Rotate.svg"), auto;
}

.crosshairCursor {
    cursor: crosshair;
}

.text-black
{
    color: black;
}

@keyframes fading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@font-face {
    font-family: 'Calibri';
}

@keyframes reverseFading {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.00001;
    }
}

.fontWeight-800 {
    font-weight: 800;
    -webkit-text-stroke: medium;
}

#attr {
    width: 100%;
}

.min-width3em {
    min-width: 2.6em;
}

.loginImage {
    background-image: url("../pict/igis_map.png");
    width: 250px;
    background-size: 100% 100%;
    height: 97px;
    position: relative;
    margin: auto;
    overflow: auto;
}

.LoginLeft {
    background-color: #D81E04; /* BION left */
}

.LoginRight {
    background-color: #1E1E1E; /* BION right */
}

.animButtonSmall {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: none;
    color: white;
    font-size: 14px;
    border: 2px solid var(--accentsColor);
    padding: 0.1rem 0.4rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}


.animButtonSmallOnWhite {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: red;
    color: white;
    font-size: 14px;
    border: 2px solid var(--accentsColor);
    padding: 0.1rem 0.4rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}

#knD {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: none;
    color: white;
    font-size: 14px;
    border: 2px solid var(--accentsColor);
    padding: 0.1rem 0.4rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}

#knD:hover {
    background: var(--accentsColor);
}

#knD input[type=checkbox] {
    display: none;
}

#knTest:checked + #knD{
    background: var(--accentsColor);
    color: white;
    font-weight: 600;
}
    .animButtonSmall:hover, animButtonSmall:active, animButtonSmall:focus {
        background: var(--accentsColor);
        color: #fff;
    }

.animButton {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: none;
    color: white;
    font-size: 14px;
    border: 2px solid var(--accentsColor);
    padding: 0.7rem 1.5rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}

    .animButton:hover, animButton:active, animButton:focus {
        background: var(--accentsColor);
        color: #fff;
    }

.animButtonLogin {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: none;
    color: white;
    font-size: 16px;
    border: 2px solid var(--accentsColor);
    padding: 1rem 3rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}

    .animButtonLogin:hover, animButtonLogin:active, animButtonLogin:focus {
        background: var(--accentsColor);
        color: #fff;
    }


.loginUsername {
    /*  background: transparent url(../pict/icn_user_login.png) no-repeat scroll center left;*/
}


.formLogin {
    background: #2b3043;
    padding: 1.6rem 0 1.6rem 4rem;
    border-top: 2px solid #3B3F4F;
    border-bottom: 2px solid #3B3F4F;
    width: 300%;
    margin: 0 0 0 -10px;
    font-family: 'HelveticaNeueLTCom-Lt', "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 50%;
    border: none;
    color: #ffffff;
    padding: 0 0 0 2.3rem;
    font-size: 18px;
}

/*#attr tr:nth-child(2n) > td:nth-child(1) {
    background-color: #414780;
    background: #353535;
}*/

.export-table-menu {
    width: 100%;
}

    .export-table-menu td:nth-child(2) {
        float: right;
    }

.ol-scale-bar {
    left: 5em;
}

#scaleBox {
    background: transparent;
    border: 0.5px solid white;
    color: #FFF;
    /*width: -webkit-fill-available;*/
}

.export-panel-legend {
    padding-left: 10px;
    padding-right: 10px;
}

.border-text {
    /*border: 1px solid #F46036;*/
    border: 1px solid var(--accentsColor);
    padding: 1em;
}

.gridExport {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 7% 3% 90%;
    width: 64.646vh;
    height: 95vh;
    color: black;
    margin: auto;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
}

.grEr1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    text-align: center;
}


.grEr2c1 {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
}

.grEr2c2 {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
}

.grEr3 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 3;
}

.gridContainerHS {
    display: grid;
    grid-template-columns: 7fr 3fr;
    /*grid-template-rows: 2fr 8fr 2fr; - radky branily zmenseni WMS okna bez obrazku*/
    margin: 0em 0.4em 0em 0.4em;
    /*border-bottom: 1px solid #F46036;*/
    border: 1px solid gray;
    align-items: center;
    color: white;
    font: 16pt/1 Calibri;
    font-weight: 600;
}

.gridContainer {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-template-rows: 2fr 8fr 2fr;
    margin: 1em;
    /*border-bottom: 1px solid #F46036;*/
    border-bottom: 1px solid silver;
    align-items: center;
    color: white;
    font: 14pt/1 Calibri;
    font-weight: 600;
}

.overflow-hidden {
    overflow: hidden;
}

.c1r1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
}

.c2r1 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    justify-self: right;
}

.c1c2r2 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
    margin-top: 0.5em;
    /*border-top: 1px solid white;*/
}

.c1c2r3 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
}

body {
    overflow: hidden;
}

.simple-button {
    border: none;
    height: 3em;
    width: 10em;
    background: transparent;
    color: white;
    margin: 10px;
    outline: 2px solid #5B85AA;
}

    .simple-button:hover {
        /*background: #F46036;*/
        /*outline: 1px solid #F46036;*/
        background: var(--accentsColor);
        outline: 1px solid var(--accentsColor);
    }

.p-top20 {
    padding-top: 20px;
}

.p-bottom20 {
    padding-bottom: 20px;
}

#pnlLeft {
    min-width: 10px;
    height: 96vh;
    position: absolute;
    left: 0px;
    top: 4vh;
    display: block;
    z-index: 100;
    /*border-top: 2px solid #F46036;*/
    border-top: 2px solid var(--accentsColor);
}

.menuColor {
    background: var(--mainColor);
}

.submenuColor {
    /*background: #414770;*/
    background: var(--secondaryColor);
}

.login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
    margin: auto;
    font-family: Calibri;
    padding: 0;
    border: 0;
    outline: 0;
    display: inline-block;
}

    .login-form input[type=text],
    .login-form input[type=password] {
        /* display: block;*/
        line-height: 14px;
        margin: 10px 0;
        padding: 6px 5px;
        border: 0;
        outline: none;
        font-family: Calibri;
        font-size: 12px;
        font-weight: bold;
        text-shadow: 0px 1px 1px rgba(255,255,255, .2);
        -webkit-box-shadow: -1px -1px 1px 1px rgba(0,0,0,0.36);
        -moz-box-shadow: -1px -1px 1px 1px rgba(0,0,0,0.36);
        box-shadow: -1px -1px 1px 1px rgba(0,0,0,0.36);
    }

    .login-form input[type=submit] {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        border: 0;
        line-height: 14px;
        padding: 6px 15px;
        outline: none;
        font-family: Calibri;
        font-size: 12px;
        font-weight: bold;
        text-shadow: 0px 1px 1px rgba(255,255,255, .2);
    }

    .login-form input[type=text],
    .login-form input[type=password],
    .js .login-form span {
        /*display: block;*/
        color: #000;
        width: 170px;
        background: #FFF;
    }

        .login-form input[type=text]:focus,
        .login-form input[type=password]:focus {
            background: #F1F1F1;
        }

    .login-form input[type=checkbox] {
        width: 13px;
        height: 13px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
        position: relative;
        top: -1px;
        *overflow: hidden;
    }

.blocklogin a {
    font-family: Calibri;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #FFF;
    padding-top: -15px;
}

.login-form h1 {
    line-height: 40px;
    font-family: Calibri;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    display: block;
    color: #FFF;
}

.lostAccount-form {
    position: relative;
    margin: auto;
 
    cursor: default;
}


.login-form {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    padding: 15px 25px 0 25px;
    cursor: default;
}

.fullscreen {
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

#exportPanel {
    display: none;
    font-family: Calibri;
}

.exportButton {
    color: white;
    background: none;
    /*outline: 2px dashed #F46036;*/
    outline: 2px dashed var(--accentsColor);
    border: none;
    margin-top: 15px;
}

    .exportButton:active, .activo {
        /*outline: 2px solid #F46036;
        background-color: #F46036;*/
        outline: 2px solid var(--accentsColor);
        background-color: var(--accentsColor);
    }

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.w-99 {
    width: 99%;
}

.h-90 {
    height: 90%;
}

.h-95 {
    height: 95%;
}

.h-99 {
    height: 99%;
}

.h-100 {
    height: 100%;
}

.flex-display {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.black-block {
    /*background-color: #414770;*/
    background-color: var(--secondaryColor);
    box-shadow: rgba(0,0,0,0.36) 5px 5px 10px;
    overflow: hidden;
}

.left-handler-exp {
    width: 80vw;
    height: 100%;
    display: flex;
}

.bottom-buttons {
    position: relative;
    text-align: center;
    height: 5vh;
}

#coloring:hover svg path {
    /*fill: #F46036;*/
    fill: var(--accentsColor);
}

.hidden {
    visibility: hidden;
}

.content-exp {
    text-align: left;
    margin-left: 30px;
    margin-right: 30px;
    overflow: hidden;
    margin-top: 30px;
    height: 88%;
    color: #FFF;
}

.right-handler-exp {
    width: 20vw;
    height: 100%;
    display: block;
    margin: auto;
    /*border-left: 0.5px solid #F46036;*/
    border-left: 0.5px solid var(--accentsColor);
}

.paper {
    width: 56vh;
    height: 80vh;
    margin: auto;
    background-color: #FFF;
    box-sizing: border-box;
    overflow: auto;
}

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

.centerVertHor {
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be obdel when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
}

#exp {
    height: 100vh;
    width: 90vw;
}

.attrInp {
    /*background-color: #414780;*/
    background: #414750;
    font: 14px/1.5 Calibri;
    padding: 0px;
    padding-left: 3px;
    border: none;
    /*border-radius: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(169, 169, 169);
    border-image: initial;*/
    width: 100%;
    color: white;
}

.attrSel {
    background-color: #414750;
    font: 14px/1.5 Calibri;
    padding: 0px;
    width: 100%;
    height: 100%;
    color: white;
    border: 0px;
    border-bottom: 1px solid #353535;
    outline: 0px;
}

.attrSelInp {
    background-color: #414750;
    font: 14px/1.5 Calibri;
    padding: 0px;
    color: white;
    border: 0px;
    outline: 0px;
    display: block;
}

.attrSelInp:read-only
{
    display: none;
}

.text-orange {
    /*color: #F46036;*/
    color: var(--accentsColor);
}

.attrSel div {
    padding: 8px 16px;
    border: none;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}

.attrSel > option {
    background: #414750;
    border: 0px;
    outline: 0px;
}

    .attrSel > option:focus {
        border: 0px;
        outline: 0px;
    }

.attrSel:focus {
    border: none;
    outline: none;
}

.attrSel::-ms-expand {
    color: white;
}

.attrSel:hover::-ms-expand {
    background: transparent;
}


.blocklogin {
    /*background-color: rgba(158, 30, 21, 0.8); */ /*Originál*/
    background-color: rgba(159, 43, 30, 1); /*BION Barva*/
    width: 550px;
    /*height: 250px;*/ /*Originál*/
    height: 357px; /*S BIONem*/
    box-shadow: 0px 0px 400px;
    -webkit-box-shadow: 0px 0px 400px;
    -moz-box-shadow: 0px 0px 400px;
    border-radius: 15px;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be obdel when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

#pnlRight {
    min-width: 10px;
    height: 100%;
    position: absolute;
    top: 4vh;
    display: none;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
    -webkit-animation: fading 0.5s 1;
    animation: fading 0.5s 1;
    z-index: 98;
    /*border-top: 2px solid #F46036;*/
    border-top: 2px solid var(--accentsColor);
}

.test-bar {
    height: 3vh;
    /*background: #414770;*/
    background: var(--secondaryColor);
    font: 16px/1.5 Calibri;
    font-weight: 600;
}

.text-white {
    color: white;
}

.text-middle {
    /*width: 100%;*/
    top: 1vh;
    position: absolute;
    left: 49%;
    color: white;
    text-align: center;
}

.padding-r-2em {
    padding-right: 2em;
}

.padding-r-075em {
    padding-right: 0.75em;
}

.padding-r-025em {
    padding-right: 0.25em;
}

.padding-l-025em {
    padding-left: 0.25em;
}


.padding-l-2em {
    padding-left: 2em;
}

.margin-l-075em {
    margin-left: 0.75em;
}

.margin-r-075em {
    margin-right: 0.75em;
}

.coloroBlock {
    height: 35em;
    width: 50em;
    /*background: var(--secondaryColor);*/
    background: #F8F8F8;
    border: 2px solid silver;
    box-shadow: 0px 0px 400px;
    -webkit-box-shadow: 0px 0px 400px;
    -moz-box-shadow: 0px 0px 400px;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be obdel when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}


.addwmsBlock {
    height: 400px;
    width: 600px;
    /*background: var(--secondaryColor);*/
    background: #F8F8F8;
    border: 2px solid silver;
    box-shadow: 0px 0px 400px;
    -webkit-box-shadow: 0px 0px 400px;
    -moz-box-shadow: 0px 0px 400px;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be obdel when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
.padding-l-075em {
    padding-left: 0.75em;
}

.text-right {
    position: relative;
    float: right;
    top: 50%;
    transform: translateY(-50%);
}

.text-left {
    position: relative;
    float: left;
    top: 50%;
    transform: translateY(-50%);
}

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

#attrib {
    min-width: 25%;
    color: white;
    font: 12px/1.5 Calibri;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 4vh;
    right: -200px;
    /*border-top: 2px solid #F46036;*/
    border-top: 2px solid var(--accentsColor);
    display: none;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
    -webkit-animation: fading 0.5s 1;
    animation: fading 0.5s 1;
    z-index: 98;
}

.imgText {
    margin-top: 0px;
    display: block;
    font: 10px/1.5 Calibri;
    font-weight: 600;
}

.imgUsp {
    display: block;
    text-align: center;
    position: relative;
    margin: 5px auto 0px auto;
}

.textUsp {
    color: white;
    text-decoration: none;
    font: 16px/1.5 Calibri;
    font-weight: 600;
}

#map {
    /*height: 100%;
    width: 100%;
    position: fixed;
    margin-left: 0px;
    top: 0;*/
    height: 92vh;
    width: 97vw;
    position: fixed;
    margin-left: 0px;
    top: 8vh;
    left: 3vw
}

svg path,
svg circle {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
}

.svg:hover path {
    /*background-color: #F46036;*/
    background-color: var(--accentsColor);
    /*filter: invert(59%) sepia(95%) saturate(7160%) hue-rotate(350deg) brightness(86%) contrast(98%);
    -webkit-filter: invert(59%) sepia(95%) saturate(7160%) hue-rotate(350deg) brightness(86%) contrast(98%);*/
}

.menuButton {
    background: none;
    border: none;
    outline: none;
    height: auto;
    width: auto;
}

    .menuButton:active, .activated svg path {
        /*fill: #F46036;*/
        fill: var(--accentsColor);
    }

.tls {
    /*background: #F46036;*/
    background: var(--accentsColor);
}

.submenuButton {
    background: none;
    border: none;
    outline: none;
    height: auto;
    width: auto;
}

    .submenuButton:active, .activated svg path {
        /*fill: #F46036;*/
        fill: var(--accentsColor);
    }


.lower {
    margin-top: 25%;
}

    .lower:hover svg path {
        fill: #DA291C;
    }

.boxed {
    /*background-color: #414770;*/
    background-color: var(--secondaryColor);
}


.ol-zoom {
    left: 90px;
    top: 6vh;
}

.ol-control button {
    left: 90px;
    top: 50px;
    background-color: rgba(40, 40, 40, 0.7);
}

    .ol-control button:hover {
        background-color: rgba(40, 40, 40, 1);
    }


.boxButton:hover > .centerIcon {
    bottom: 2px;
    left: 2px;
    /*color: #F46036;*/
    color: var(--accentsColor);
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -o-transition: color .3s ease;
    -ms-transition: color .3s ease;
    transition: color .3s ease;
}

.boxButton:hover svg path {
    /*fill: #F46036;*/
    fill: var(--accentsColor);
}

.centerIcon {
    display: block;
    text-align: center;
    position: relative;
    margin: 0px auto 0px auto;
    width: 24px;
    height: 24px;
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
    font: 10px/1.5 Calibri;
    font-weight: 600;
}

    .centerIcon:active, .activated {
        /*color: #F46036;*/
        color: var(--accentsColor);
        text-decoration: none;
        font: 10px/1.5 Calibri;
        font-weight: 600;
    }

.bottomIcon {
    position: absolute;
    display: block;
    text-align: center;
    margin: 5px auto 0px auto;
    width: 36px;
    height: 36px;
    width: 100%;
    color: white;
    text-decoration: none;
    font: 10px/1.5 Calibri;
    font-weight: 600;
    bottom: 10px;
    left: 0;
}

.layer-switcher {
    display: block;
}

#divDB {
    display: none;
    position: absolute;
    left: 90px;
    top: 85px;
    width: 400px;
    height: 600px;
    z-index: 100;
    background-color: white;
    font: 14px/1.5 Calibri;
}

    #divDB section {
        height: 510px;
        overflow: auto;
    }

#btnCloseDB {
    position: absolute;
    right: 0;
    top: 0;
}

    #btnCloseDB:hover {
        background-color: red;
    }

#lblHeader {
    background-color: white;
    font: 14px/1.5 Calibri;
    font-weight: 800;
    color: #0af;
    padding: 10px;
    margin: 0;
}

/* ---- Tabs ---- */

/**, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100vh;
}*/

.attrMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #345;
}

    .attrMenu tr:nth-child(even) {
        background: #372248;
    }


p:not(:last-child) {
    margin: 0 0 20px;
}

main {
    max-width: 800px;
    padding: 0 20px;
    border: 1px solid rgba(0,0,0,.2);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

section {
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #abc;
}


label {
    display: inline-block;
    /*margin: 0 0 -1px;
	padding: 5px 10px;*/
    width: 100%;
    font-weight: 400;
    text-align: left;
    /*padding-left: 12px;*/
    /*color: #FFF;*/
    color: #FFF;
    border: 1px solid transparent;
}

/*label:before {
		font-family: fontawesome;
		font-weight: normal;
		margin-right: 10px;
	}*/

/*label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16c'; }
label[for*='4']:before { content: '\f171'; }*/

/*label:hover {
		color: #789;
		cursor: pointer;
	}*/

/*input:checked + label {
    color: #0af;
    border: 1px solid #abc;
    border-top: 2px solid #0af;
    border-bottom: 1px solid #fff;
    
}*/

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
    display: block;
}

@media screen and (max-width: 800px) {
    label {
        font-size: 0;
    }

        label:before {
            margin: 0;
            font-size: 18px;
        }
}

@media screen and (max-width: 500px) {
    label {
        padding: 15px;
    }
}

.leftExport {
    text-align: left;
    grid-area: left;
}

.rightExport {
    text-align: right;
    margin-bottom: 10px;
    grid-area: right;
}

.centerExport {
    margin: 0px;
    margin-top: -30px;
    text-align: center;
    grid-area: header;
    margin-bottom: -20px;
}

.outline {
    outline: 2px #000 solid;
}

.outline-white {
    border: .5px solid #FFF;
}

.no-outline {
    outline: none;
}

.pageM {
    margin: 0;
    margin-top: -5mm;
    /*border: initial;
        border-radius: initial;*/
    /*padding-left: 20mm;
    padding-right: 20mm;
    padding-bottom: 20mm;
    padding-top: 10mm;*/
    padding: 10mm 20mm 20mm 20mm;
    width: 210mm;
    min-height: 297mm;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
}

.subpageM {
    text-align: center;
    width: 100%;
    height: 100%;
}


.outlineM {
    outline: 2mm #DA291C solid;
    border: 0.5mm solid #DA291C;
}

#fakeSpaner {
    visibility: visible;
}

.page-landscape {
    /*width: 210mm;
    min-height: 297mm;*/
    width: 115vh;
    height: 81.3131313131vh;
    /*width: 80vh;
    height: 56vh;*/
    /*padding: 20mm;*/
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    /*margin: 10mm auto;*/
    /* border: 1px #D3D3D3 solid;
    border-radius: 5px;*/
    background: white;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/
}



.page-portrait {
    /*width: 210mm;
    min-height: 297mm;*/
    width: 67.171717171717vh;
    height: 94.997571428571vh;
    /*width: 80vh;
    height: 56vh;*/
    /*padding: 20mm;*/
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    /*margin: 10mm auto;*/
    /* border: 1px #D3D3D3 solid;
    border-radius: 5px;*/
    background: white;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/
}

#upperPart {
    display: grid;
    grid-template-areas: "header header" "left right";
    margin-bottom: -25px;
}

.subpage {
    /*padding: 1cm;*/
    /*border: 5px red solid;*/
    /*text-align: center;*/
    width: 100%;
    height: 100%;
    /*outline: 2cm #FFEAEA solid;*/
}

.posRel
{
    position: relative;
}

.ol-scale-text-export {
    position: absolute;
    font-size: 84px;
    text-align: center;
    bottom: 25px;
    color: #000;
    text-shadow: -2px 0 #fff,0 2px #fff,2px 0 #fff,0 -2px #fff
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }

    @page {
        margin: 0;
    }


    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        padding: 20mm;
        width: 210mm;
        height: 297mm;
        box-shadow: initial;
        background: initial;
        page-break-after: avoid;
    }

    .subpage {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .outline {
        outline: 0.5mm #000 solid;
    }
}


.inputExport {
    position: relative;
    font-size: 1.5em;
    padding: 3px;
}

    .inputExport *:not(span) {
        background-color: transparent;
        border: none;
        padding: 0 0.325em;
        position: relative;
        /*outline: 1px solid #F46036;*/
        outline: 1px solid var(--accentsColor);
    }

        .inputExport *:not(span) > option {
            /*background-color: #414770;*/
            background-color: var(--secondaryColor);
        }

        .inputExport *:not(span):focus {
            outline-width: 2px;
        }


    .inputExport input {
        font-family: inherit;
        line-height: inherit;
        color: #fff;
        min-width: 12em;
    }

    .inputExport > #rotation {
        min-width: 1em;
    }

li {
    display: block;
}

ul {
    margin-top: 0px;
    padding-left: 0px;
}

.obdel {
    width: 28.28px;
    position: relative;
    height: 40px;
    margin-right: 70px;
    background-color: white;
    -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
    -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
    box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
    -webkit-transition: all 1s ease;
}

.obdelText {
    position: absolute;
    top: 25%;
    width: 28.28px;
    text-align: center;
    color: black;
    overflow: hidden;
    cursor: default;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

    .obdelText.rotatedA {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .obdelText.rotatedB {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

.obdel.rotated {
    -webkit-transform: rotate(-90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.obdel:before {
    content: "";
    position: absolute;
    top: 0%;
    right: 0%;
    width: 0px;
    height: 0px;
    border-bottom: 7px solid #eee;
    border-right: 7px solid rgba(60, 60, 60, 1);
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);
    box-shadow: -1px 1px 1px rgba(0,0,0,0.3);
}



.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cube {
    width: 40px;
    height: 40px;
    background: #DA291C;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.plus-vertical,
.plus-horizontal {
    position: absolute;
    /*top: 50%;
    left: 50%;*/
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.quadrant {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.quadrant__item {
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DA291C;
    border-radius: 6px;
    position: relative;
}

.quadrant__item__content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-down,
.arrow-left,
.arrow-right,
.arrow-up {
    opacity: 0;
}

.arrow-up {
    transform: translateY(10px);
}

.arrow-down {
    transform: translateY(-10px);
}

.arrow-left {
    transform: translateX(10px);
}

.arrow-right {
    transform: translateX(-10px);
}

.paperTools {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    justify-content: center;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8) url('../Pict/ajax-loader.gif') 50% 50% no-repeat;
}

.modalText {
    position: relative;
    text-align: center;
    z-index: 1000;
    font-size: 28px;
    top: 40%;
    height: 100%;
    width: 100%;
    color: white;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal, .modalText {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal, .modalText {
    display: block;
}

/* ---- Grid ---- */
/*.attrMenu {
	width: 100%;
	display:inline-table;
.attrMenuName {
	width: 160px;
}*/




.logo-bar {
    /*background: #171123;*/
    background: var(--mainColor);
    height: 4vh;
    width: 100%;
    z-index: 101;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font: 14px/1.5 Calibri;
}


.ruian-bar {
    /*background: #414770;*/
    background: var(--secondaryColor);
    height: 4vh;
    width: 96.9%;
    z-index: 1;
    display: block;
    position: absolute;
    top: 4vh;
    left: 3.2vw;
    font: 14px/1.5 Calibri;
}

.second-bar {
    /*background: #414770;*/
    background: var(--secondaryColor);
    height: 4vh;
    width: 96.9%;
    z-index: 1;
    display: block;
    position: absolute;
    top: 8vh;
    left: 3.2vw;
    font: 14px/1.5 Calibri;
    outline-top: 0.2em solid var(--accentsColor);
}

.second-bar-ruian {
    /*background: #414770;*/
    background: var(--secondaryColor);
    height: 4vh;
    width: 96.9%;
    z-index: 1;
    display: block;
    position: absolute;
    top: 8vh;
    left: 3.2vw;
    font: 14px/1.5 Calibri;
    outline-top: 0.2em solid var(--accentsColor);
}

.vyjadreniButtonDiv {
    display: inline;
}

.slcDropdown {
    margin-top: .5em;
    font-size: .6em;
    color: var(--fontColor);
    border: none !important
}

.select2-results {
    background-color: var(--secondaryColor)
}

.select2-container {
    height: auto;
    min-width: 10em;
}

.slc:focus {
    outline: none
}

.slc-fs {
    display: flex;
    text-align: right;
    margin-bottom: .4em;
    margin-top: .2em;
    width: 8em;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
    min-inline-size: max-content
}




.attrTextArea {
    resize: none;
    width: 100%;
}


.tabAttr {
    overflow: hidden;
    /*background-color: #171123;*/
    background-color: var(--mainColor);
    color: #FFF;
    height: 4vh;
}

    /* Style the buttons that are used to open the tab content */
    .tabAttr button {
        /*background-color: #171123;*/
        background-color: var(--mainColor);
        float: left;
        height: 4vh;
        padding: auto 4px auto 4px;
        border: none;
        outline: none;
        cursor: pointer;
        /*padding: 14px 16px;*/
        transition: 0.3s;
        color: #fff;
    }

        /* Change background color of buttons on hover */
        .tabAttr button:hover {
            background-color: #372248;
        }

        /* Create an active/current tablink class */
        .tabAttr button.active {
            /*background-color: #414770;*/
            background-color: var(--secondaryColor);
            /*background-color: #303030;*/
        }




.tablinks {
    background-color: transparent;
    color: #fff;
    border: none;
    outline: none;
    height: 100%;
    padding-right: 0;
    padding-left: 1.5em;
}

.tab {
    overflow: hidden;
    /*height: 4vh;*/
    /*background-color: #171123;*/
    background-color: var(--mainColor);
    color: #FFF;
}
l
    .tabcontent-tab button {
        background-color: transparent;
        color: #fff;
        border: none;
        outline: none;
        height: 100%;
        padding-right: 0;
        padding-left: 1.5em;
    }

    /* Style the buttons that are used to open the tab content */
    .tab div {
        /*background-color: #171123;*/
        background-color: var(--mainColor);
        float: left;
        height: 4vh;
        padding: auto 4px auto 4px;
        border: none;
        outline: none;
        cursor: pointer;
        /*padding: 14px 16px;*/
        transition: 0.3s;
        color: #fff;
    }

        /* Change background color of buttons on hover */
        .tab div:hover {
            background-color: #372248;
        }

        /* Create an active/current tablink class */
        .tab div.active {
            /*background-color: #414770;*/
            background-color: var(--secondaryColor);
            /*background-color: #303030;*/
        }

.layersMenu-tabs span {
/*background-color: #171123;*/
background-color: var(--mainColor);
height: 100%;
padding: auto 4px auto 4px;
border: none;
outline: none;
cursor: pointer;
/*padding: 14px 16px;*/
transition: 0.3s;
color: #fff;
    }

        /* Change background color of buttons on hover */
    .layersMenu-tabs span:hover {
        background-color: #372248;
    }

        /* Create an active/current tablink class */
    .layersMenu-tabs span.active {
        /*background-color: #414770;*/
        background-color: var(--secondaryColor);
        /*background-color: #303030;*/
    }

.tabcontentAttr {
    display: none;
    position: relative;
    padding: 6px 12px;
    border-top: none;
    font: 14px/1.5 Calibri;
    font-weight: 400;
    height: 89vh;
    margin: auto;
    overflow-y: auto;
    width: 94%;
    /*scrollbar-color: #F46036 #F5F5F5;*/
    scrollbar-color: var(--accentsColor) #F5F5F5;
    scrollbar-width: thin;
}

.webkitFill {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    width: 100%;
}

.webkitFill a {
    color: white;
    text-decoration: none;
    font-weight: 900;
}


.tabcontentAttr::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.tabcontentAttr::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.tabcontentAttr::-webkit-scrollbar-thumb {
    /*background-color: #F46036;*/
    background-color: var(--accentsColor);
}

#expRadio {
    display: inline-grid;
    grid-column-start: 1;
    grid-column-end: 3;
}

#expRadio label
{
    width: 50%;
}

.setButton {
    border: none;
    background-color: var(--accentsColor);
    color: var(--fontColor);
    padding: 0.2em 1.2em 0.2em 1.2em;
    margin-right: 0.6em;
}

    .setButton:hover {
        background-color: var(--mainColor);
    }

.setListDelete {
    border: none;
    background: none;
    margin-right: 0.5em;
    cursor: pointer;
}

.setListEdit {
    border: none;
    background: none;
    margin-right: 0.5em;
    cursor: pointer;
}

.setListDiv > ol > li{
    break-inside: avoid;
}

.setListDiv > ol {
    columns: 15em;
    column-gap: 2em;
    column-rule: 2px dotted var(--accentsColor);
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

.setListButtons {
    text-align: center;
    margin-bottom: 1em;
}

.setListBar {
    text-align: center;
    margin-bottom: 2em;
}

.setListBar > * {
    margin-right: 2em;
}

.setListInput {
    border: solid 0.1em var(--accentsColor);
    background: none;
}

.setListInput:disabled {
    border: none;
    outline: none;
    background: none;

}

.edit-icon::before {
    content: "\270E";
}

.check-icon::before {
    content: "\2714";
    color: limegreen;
}

.xmark-icon::before {
    content: "\2716";
    color: var(--accentsColor);
}

/* Style the tab content */
.tabcontent, .tabcontentSQL, .tabcontentSet {
    display: none;
    border-top: none;
    font: 14px/1.5 Calibri;
    font-weight: 400;
    height: 92vh;
    margin: auto;
    overflow-y: auto;
    overflow-x: hidden;
    /*scrollbar-color: #F46036 #F5F5F5;*/
    scrollbar-color: var(--accentsColor) #F5F5F5;
    scrollbar-width: thin;
}

.tabcontent-tab, .tabcontentSQL-tab, .tabcontentSet-tab {
    display: inline-block;
}

.sqlSelect::-webkit-scrollbar {
    width: 0.85em;
}

.sqlSelect::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.sqlSelect::-webkit-scrollbar-thumb {
    /*background-color: #F46036;*/
    background-color: var(--accentsColor);
}

.sqlSelect::-webkit-scrollbar-button:single-button {
    background-color: #F5F5F5;
    display: block;
    border-style: solid;
    height: 13px;
    width: 16px;
}
    /* Up */
    .sqlSelect::-webkit-scrollbar-button:single-button:vertical:decrement {
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #555555 transparent;
    }

        .sqlSelect::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
            border-color: transparent transparent #777777 transparent;
        }
    /* Down */
    .sqlSelect::-webkit-scrollbar-button:single-button:vertical:increment {
        border-width: 6px 6px 0 6px;
        border-color: #555555 transparent transparent transparent;
    }

.sqlSelect::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    border-color: #777777 transparent transparent transparent;
}

.ruianSelect {
    background: transparent;
    width: 6vw;
    color: white;
    /*border: 1px solid #F46036;*/
    border: 1px solid var(--accentsColor);
}


.sqlSelect {
    background: transparent;
    color: white;
    /*border: 1px solid #F46036;*/
    border: 1px solid var(--accentsColor);
}

input.sqlSelect::placeholder {
    color: lightgray;
}

input.sqlSelect {
    padding-left: 0.5em;
}

button.sqlSelect {
    border: none;
    background-color: #2b3052;
}

    button.sqlSelect.tls {
        border: none;
        background-color: #4b548c;
    }

    button.sqlSelect:hover {
        background-color: #4b548c;
    }

    button.sqlSelect:disabled {
        background-color: transparent;
    }

    button.sqlSelect:hover:disabled {
        background-color: transparent;
    }

input[type="color" i].sqlSelect {
    background-color: none;
    border: none;
}

.width-14em {
    width: 14em;
}

.width-4em {
    width: 4em;
}

.width-9em {
    width: 9em;
}

.justify-right {
    justify-self: right;
}

.width-28em {
    width: 28em;
}

.nonsize-list > option {
    /*background: #414770;*/
    background: var(--secondaryColor);
}

.min-height-11em {
    min-height: 11em;
}

.min-height-7em {
    min-height: 7em;
}


.sqlSelect:focus {
    outline: none;
}

.sqlSelect:disabled {
    color: dimgray;
    border: 1px solid dimgray;
}

#sqlError {
    font: 700 24px Calibri;
    text-align: center;
    color: red;
}

.nonresizeable {
    resize: none;
}

.height-6em {
    height: 6em;
}

.height-1-7em {
    height: 1.7em;
}

.width-31-5em {
    width: 31.5em;
}

.grid-2-Col {
    display: grid;
    grid-template-columns: 6em 12em;
    grid-template-rows: .4em 1em 1em 1em 1em 1em 1em 1em 1em 1em 2em 1em 1em 2em 1em;
    grid-column-gap: 1em;
    grid-row-gap: 0.5em;
}

.line-div {
    /*background-color: #F46036;*/
    background-color: var(--accentsColor);
}

.col-1-start {
    grid-column-start: 1;
}

.col-4-start {
    grid-column-start: 4;
}

.col-2-end {
    grid-column-end: 3;
}

.col-4-end {
    grid-column-end: 5;
}

.col-5-end {
    grid-column-end: 6;
}

.height-4em {
    height: 4em;
}

.height-3em {
    height: 3em;
}

.height-2em {
    height: 2em;
}

.width-12em {
    width: 12em;
}

.place-self-center {
    place-self: center;
}

.align-self-center {
    align-self: center;
}

.place-self-stretch {
    place-self: stretch;
}

.col-1 {
    grid-column: 1;
}

.col-2 {
    grid-column: 2;
}

.col-3 {
    grid-column: 3;
}

.col-4 {
    grid-column: 4;
}

.col-5 {
    grid-column: 5;
}

.col-6 {
    grid-column: 6;
}

.col-7 {
    grid-column: 7;
}

.row-1 {
    grid-row: 1;
}

.row-3-start {
    grid-row-start: 3;
}

.row-5-end {
    grid-row-end: 6;
}

.row-7-end {
    grid-row-end: 8;
}

.row-2-start {
    grid-row-start: 2;
}

.row-7-start {
    grid-row-start: 7;
}


.row-8-start {
    grid-row-start: 8;
}

.row-9-end {
    grid-row-end: 10;
}

.row-11-start {
    grid-row-start: 11;
}

.row-13-end {
    grid-row-end: 14;
}

.row-2 {
    grid-row: 2;
}

.row-3 {
    grid-row: 3;
}

.row-3 {
    grid-row: 3;
}

.row-4 {
    grid-row: 4;
}

.row-5 {
    grid-row: 5;
}

.row-6 {
    grid-row: 6;
}

.row-7 {
    grid-row: 7;
}

.row-8 {
    grid-row: 8;
}

.row-9 {
    grid-row: 9;
}

.row-10 {
    grid-row: 10;
}

.row-11 {
    grid-row: 11;
}

.row-12 {
    grid-row: 12;
}

.row-13 {
    grid-row: 13;
}

.row-14 {
    grid-row: 14;
}

.row-15 {
    grid-row: 14;
}

.gridSQL {
    display: grid;
    grid-template-columns: 14em 14em;
    grid-template-rows: 2em 2em 2em 8em 2em 2em 8em 2em 2em 8em 2em 3em auto;
    padding: .5em;
    grid-gap: 0.5em;
}

.switchCoords {
    border-right: solid 1px black;
    padding-left: 0.5em;
    padding-right: 0.5em;
    cursor: pointer;
}

.spanCoords {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.searchCoords {
    border-left: solid 1px black;
    padding-left: 0.5em;
    padding-right: 0.5em;
}


.statusBarDiv {
    display: inline-flex;
    font: 400 14px Calibri;
    padding: .2em;
    position: absolute;
    left: 10em;
    align-items: center;
    justify-content: center;
    bottom: 1em;
    background: #FFFFFF;
    /*outline: 1px solid black;*/
    text-align: center;
    z-index: 5;
    text-decoration: underline;
}

.coordsDiv {
    display: inline-flex;
    font: 400 14px Calibri;
    padding: .2em;
    position: absolute;
    right: 5em;
    align-items: center;
    justify-content: center;
    bottom: 1em;
    background: #FFFFFF;
    outline: 1px solid black;
    text-align: center;
    z-index: 5;
}

.sqlObjects {
    display: none;
    font: 400 16px Calibri;
    padding: .2em;
    position: absolute;
    max-width: 15em;
    max-height: 2em;
    left: 5em;
    align-items: center;
    justify-content: center;
    bottom: 4em;
    /*background: #F46036;*/
    background: var(--accentsColor);
    outline: 2px solid black;
    text-align: center;
    z-index: 5;
}

.sqlC1R1 {
    grid-column: 1;
    grid-row: 1;
    place-self: stretch;
}

.sqlC2R1 {
    grid-column: 2;
    grid-row: 1;
    place-self: stretch;
}

.sqlC1R2 {
    grid-column: 1;
    grid-row: 2;
    place-self: stretch;
}

.sqlC2R2 {
    grid-column: 2;
    grid-row: 2;
}

.sqlC2R3 {
    grid-column: 2;
    grid-row: 3;
    place-self: stretch;
}

.sqlC1R3-4 {
    grid-column: 1;
    grid-row-start: 3;
    grid-row-end: 5;
    place-self: stretch;
}

.sqlC1R2-8 {
    grid-column: 1;
    grid-row-start: 2;
    grid-row-end: 9;
    place-self: stretch;
}

.sqlC1R5 {
    grid-column: 1;
    grid-row: 5;
    place-self: stretch;
}

.sqlC2R5 {
    grid-column: 2;
    grid-row: 5;
    place-self: stretch;
}

.sqlC1-2R6 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 6;
    place-self: stretch;
}

.sqlC1-2R7 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 7;
    place-self: stretch;
}

.sqlC2R8 {
    grid-column: 2;
    grid-row: 8;
    place-self: stretch;
}

.sqlC1-2R9 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 10;
    place-self: stretch;
}

.sqlC1R10 {
    grid-column: 1;
    grid-row: 11;
    place-self: stretch;
}

.sqlC2R10 {
    grid-column: 2;
    grid-row: 11;
    place-self: stretch;
}

.sqlC1-2R11 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 12;
    place-self: stretch;
}

.sqlC1-2R12 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 13;
}


.visible {
    border: none;
}

fieldset {
    border: none;
    padding: 0px;
    margin: 0px;
}

#notes {
    display: grid;
    height: 90%;
    grid-template-columns: 3em 7em 3em 7em 3em;
    grid-template-rows: 3em 3em 3em auto 2em;
    grid-column-gap: 1em;
    grid-row-gap: 0.5em;
    overflow: hidden;
    padding-left: 10px;
    padding-top: 2em;
    padding-right: 10px;
    grid-auto-flow: row;
}

#imports {
    display: grid;
    height: 90%;
    grid-template-columns: 3em 7em 3em 7em 3em;
    grid-template-rows: 3em 2em 1em auto 1.5em 1em auto;
    grid-column-gap: 1em;
    grid-row-gap: 0.5em;
    overflow: hidden;
    padding-left: 10px;
    padding-top: 2em;
    padding-right: 10px;
    grid-auto-flow: row;
}


#measurement {
    display: grid;
    height: 90%;
    grid-template-columns: 3em 7em 3em 7em 3em;
    grid-template-rows: 3em 3em 3em 3em 3em auto 2em;
    grid-column-gap: 1em;
    grid-row-gap: 0.5em;
    overflow: hidden;
    padding-left: 10px;
    padding-top: 2em;
    padding-right: 10px;
}

.margin-top-5px {
    margin-top: 5px;
}

.pipe {
    width: 60px;
    height: 15px;
    padding: 20px 20px 0px 20px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 15px;
}

#redPipe {
    background-color: red;
}

#bluePipe {
    background-color: blue;
}

#greenPipe {
    background-color: green;
}



.menuIcons label {
    display: inline !important;
    color: #FFFFFF !important;
}

.layerTitle {
    /*color: white;*/
    font-weight: normal;
    white-space: nowrap;
}

.companyDGNTitle {
    /*color: white;*/
    font-weight: normal;
    white-space: nowrap;
}

.layerCheck {
    /*color: #F46036;*/
    color: var(--accentsColor);
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #372248;
}

    .layerCheck input[type=checkbox] {
        display: none;
    }

    .layerCheck input:checked + label {
        color: white;
        font-weight: 600;
    }

    .layerCheck label {
        display: inline-block;
        /*margin: 0 0 -1px;
	padding: 5px 10px;*/
        width: 100%;
        font-weight: 400;
        text-align: left;
        /*padding-left: 12px;*/
        /*color: #FFF;*/
        color: #777;
        border: 1px solid transparent;
    }

#layersMenu {
    width: 30vw;
    display: grid;
    grid-template-columns: 0.1fr 1.5fr 0.1fr;
    grid-template-rows: 0.2fr 0.3fr 3fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: ". . layer-close" "layer-tab-left layer-tabs layer-tab-right" "layer-content layer-content layer-content";
}

.layersMenu-close
{
    grid-area: layer-close;
}

.layersMenu-tabs
{
    grid-area: layer-tabs;
    display: inline-block;
    white-space: nowrap;
}

.layersMenu-content
{
    grid-area: layer-content;
    width: 100%;
    margin-top: 1em;
}


.nonselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.invisible {
    display: none;
}

.visible-ready {
    display: inline;
}

    .visible-ready:active {
        outline: none;
    }

    .visible-ready:focus {
        outline: none;
    }

.vertical-bottom {
    vertical-align: bottom;
}

.vertical-middle {
    vertical-align: middle;
}

.float-right {
    float: right;
}

.color-span {
    font: 12px/2.5 Calibri;
    vertical-align: top;
    color: white;
    float: right;
    padding-right: 10px;
}

.testDiv {
    display: inline-block;
}

#chckEl {
    visibility: hidden;
}

/*.menuIcons {
    display:none;
    transition: 0s;
    opacity: 0;
}*/

#tmIc {
    display: none;
    font-size: 14px;
    position: absolute;
    min-width: 15em;
    margin-left: 27px;
    /*background: #414770;*/
    background: var(--secondaryColor);
}

.zvzB, .nzB, .zvmB {
    outline: none;
}

 

    .visTabContent  {
        display: table;
        font-size: 14px;
        position: absolute;
        width: 150px;
        margin-left: 31px;
        /*background: #F46036;*/
        background: var(--accentsColor);
        opacity: 1;
        transition-delay: 1s;
    }

.vis {
    color: greenyellow;
    outline: none;
}

    .vis:hover + .menuIcons, .menuIcons:hover {
        display: table;
        font-size: 14px;
        position: absolute;
        width: auto;
        margin-left: 31px;
        /*background: #F46036;*/
        background: var(--accentsColor);
        opacity: 1;
        transition-delay: 1s;
    }

.sideMenu {
    display: inline;
    vertical-align: super;
}

.svgTest {
    fill: #666666;
}

.errorText {
    font-size: 19px;
    color: white;
}

.error {
    background-color: #1E1E1E; /* rgba(159, 43, 30, 1);*/ /*BION Barva*/
    width: 350px;
    /*height: 250px;*/ /*Originál*/
    height: 280px; /*S BIONem*/
    box-shadow: 0px 0px 400px;
    -webkit-box-shadow: 0px 0px 400px;
    -moz-box-shadow: 0px 0px 400px;
    border-radius: 15px;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be obdel when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

#attrError {
    display: none;
}

.text-center {
    text-align: center;
}

.padding-b-1em {
    padding-bottom: 1em;
}

.no-border {
    border: none;
}






/** KARTA VRSTEV "MAPA" ZAPÍNACÍ SWITCH! ZAČÁTEK **/
.toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    .toggle:before {
        content: "";
        position: relative;
        top: 1px;
        left: 1px;
        width: 40px;
        height: 22px;
        display: block;
        background: #c8ccd4;
        border-radius: 12px;
        transition: background 0.2s ease;
    }

    .toggle span {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        display: block;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(154,153,153,0.75);
        transition: all 0.2s ease;
    }

        .toggle span svg {
            margin: 7px;
            fill: none;
        }

            .toggle span svg path {
                stroke: #c8ccd4;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 24;
                stroke-dashoffset: 0;
                transition: all 0.5s linear;
            }

.cbx:checked + .toggle:before {
    /*background: #52d66b;*/
    /*background: #F46036;*/
    background: var(--accentsColor);
}

.cbx:checked + .toggle span {
    transform: translateX(18px);
}

    .cbx:checked + .toggle span path {
        /*stroke: #52d66b;*/
        /*stroke: #F46036;*/
        stroke: var(--accentsColor);
        stroke-dasharray: 25;
        stroke-dashoffset: 25;
    }

.center {
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 21px);
}


/** KARTA VRSTEV "MAPA" ZAPÍNACÍ SWITCH! KONEC **/

/** KARTA VRSTEV "MAPA" SLIDER! ZAČÁTEK **/
.slidecontainer {
    width: 100%; /* Width of the outside container */
    text-align: center;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;
    width: 70%;
    height: 10px;
    border-radius: 5px;
    background: #c8ccd4;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        /*background: #F46036;*/
        background: var(--accentsColor);
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        /*background: #F46036;*/
        background: var(--accentsColor);
        cursor: pointer;
    }

.slider-disabled {
    -webkit-appearance: none;
    width: 70%;
    height: 10px;
    border-radius: 5px;
    background: #c8ccd4;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider-disabled::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #4a4a4a;
    }

    .slider-disabled::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #4a4a4a;
    }
/** KARTA VRSTEV "MAPA" SLIDER! KONEC **/


/** CSS OF LABEL FOR SCALE BOX! ZAČÁTEK **/
.dropdown {
    list-style: none;
    position: relative;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    height: 40px;
    padding: 0;
}

.dropdown__label {
    position: absolute;
    bottom: -.5em;
    color: #FFF;
    font-size: 0.95em;
    font-family: Calibri;
}

.dropdown__arrow {
    position: absolute;
    right: 3px;
    top: 25%;
    transition: transform 0.2s linear;
    /*fill: #F46036;*/
    fill: var(--accentsColor);
    cursor: pointer;
}

    .dropdown__arrow.expanded {
        transform: rotate(-180deg);
    }

.dropdown__list {
    width: 100%;
    position: absolute;
    left: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    /*box-shadow: 0px 3px 2px 0 #a2a4b2;*/
    transition: opacity 0.1s cubic-bezier(0, 0, 0.38, 0.9), max-height 0.5s cubic-bezier(0, 0, 0.38, 0.9);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.dropdown__list-container {
    position: relative;
}

.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown__list-item {
    font-family: Calibri;
    /*padding: 10px 0px;*/
    /*padding-left: 15px;*/
    transition: background-color 0.1s linear, color 0.1s linear;
    color: #FFF;
    list-style-position: inside;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dropdown__list-item:hover, .dropdown__list-item:focus {
        /*background-color: #00c2ff;*/
        color: white;
    }

#dropdown__selected {
    font-family: Calibri;
    color: #FFF;
    /*padding: 10px 0px;*/
    list-style-position: inside;
    white-space: nowrap;
    height: 2em;
    line-height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #dropdown__selected:focus {
        outline: 1px solid #00c2ff;
    }

.dropdown__selected {
    font-family: Calibri;
    color: #FFF;
    /*padding: 10px 0px;*/
    list-style-position: inside;
    white-space: nowrap;
    height: 2em;
    line-height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dropdown__selected:focus {
        outline: 1px solid #00c2ff;
    }



.open {
    border: .5px solid;
    opacity: 1;
    /*background-color: #414770;*/
    background-color: var(--secondaryColor);
    overflow: auto;
    max-height: max-content;
}

/** CSS OF LABEL FOR SCALE BOX! KONEC **/

/** SCALE DIV! ZAČÁTEK **/

.scale-div {
    display: none;
    position: absolute;
    width: auto;
    height: auto;
    left: 3.80em;
    bottom: 2em;
    /*background: #414770;*/
    background: var(--secondaryColor);
    color: white;
}

.scale-button {
    padding-left: 1em;
    padding-right: 1em;
    text-align: left;
    border: none;
    background: transparent;
    width: 100%;
    height: auto;
    color: white;
    outline: none;
    margin-top: .2em;
    margin-bottom: .2em;
}

    .scale-button:hover {
        /*background: #F46036;*/
        background: var(--accentsColor);
    }

.scale-input {
    background: transparent;
    border: 0.5px solid white;
    color: #FFF;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: .2em;
    margin-bottom: .2em;
}

/** SCALE DIV! KONEC **/


/******************************************************************************************************** CSS CLOSE BUTTON ********************************************************************************************************/

.close {
    position: absolute;
    right: .5em;
    top: .5em;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

    .close:hover {
        opacity: 1;
    }

    .close:before, .close:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: white;
    }

    .close:before {
        transform: rotate(45deg);
    }

    .close:after {
        transform: rotate(-45deg);
    }

.closeRelative {
    position: relative;
    right: .5em;
    top: .5em;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

    .closeRelative:hover {
        opacity: 1;
    }

    .closeRelative:before, .closeRelative:after {
        position: absolute;
        right: 15px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: white;
    }

    .closeRelative:before {
        transform: rotate(45deg);
    }

    .closeRelative:after {
        transform: rotate(-45deg);
    }



.closeB {
    position: absolute;
    right: .5em;
    top: .5em;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

    .closeB:hover {
        opacity: 1;
    }

    .closeB:before, .closeB:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: black;
    }

    .closeB:before {
        transform: rotate(45deg);
    }

    .closeB:after {
        transform: rotate(-45deg);
    }


    .dgnEdit
    {
        margin-left: 0.5em;
        margin-right: 0.5em;
        color: white;
        opacity: 0.6;
    }

    .dgnEdit:hover
    {
        opacity: 1;
        color: var(--accentsColor);
    }

.dgnDel {
    width: 16px;
    height: 16px;
    position:absolute;
    left: 0;
    opacity: 0.6;
    padding-left: 10px;
}

    .dgnDel:hover {
        opacity: 1;

    }

    .dgnDel:before, .dgnDel:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: white;
    }

    .dgnDel:hover::before, .dgnDel:hover::after {
        background-color: var(--accentsColor);
    }

    .dgnDel:before {
        transform: rotate(45deg);
    }

    .dgnDel:after {
        transform: rotate(-45deg);
    }


/***********************************************************************************************************************************************************************************************************************************/

.width-6em {
    width: 6em;
}

.background-sql-line {
    background: var(--sqlColor);
}

.line-8px {
    height: 8px;
}

.line-10px {
    height: 10px;
}

.line-12px {
    height: 12px;
}

.line-14px {
    height: 14px;
}

.line-16px {
    height: 16px;
}

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

/******************************************************************************************************** ANIMATION OF LOGO ********************************************************************************************************/
#animContainer {
    background: rgba(0,0,0,1);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1200;
}

#animate {
    position: absolute;
    background-image: url("../pict/igis_map.png");
    background-size: 100% 100%;
    margin: auto;
    width: 1055px;
    height: 407px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1201;
}

/*#sikmaKota {
    background: url("../pict/sikma.svg") no-repeat;
}
#kolmaKota {
    background: url("../pict/kolma.svg") no-repeat;
}

#sikmaKota:hover {
    background: #F46036;
    outline: 1px solid #F46036;
}
#kolmaKota:hover {
    background: #F46036;
    outline: 1px solid #F46036;
}*/

.pattern-solid {
    background: var(--ptrnColor);
}

.percent20 {
    background: var(--ptrnPercent20), repeat;
}

.percent25 {
    background: var(--ptrnPercent25), repeat;
}

.percent40 {
    background: var(--ptrnPercent40), repeat;
}

.smallgrid {
    background: var(--ptrnSmallgrid), repeat;
}

/* polozky v editaci uzivatelu */
.itemTitleS {
    color: black;
    background-color: lightgray; /* Black background color */
    font-family: Calibri;
    font-size: 17px;
    font-weight: bold;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    padding: 0.1rem 0.3rem;
}

.itemTitleSzal {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: none;
    color: var(--accentsColor);
    font-size: 17px;
    border: 2px solid var(--accentsColor);
    padding: 1rem 3rem;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}

.itemTitle {
    color: black;
    font-family: Calibri;
    font-size: 17px;
}

/* obarveni prav ANO, NE*/
.optionANO {
    background-color: green;
}

.optionNE {
    background-color: red;
}

.bg-green
{
    background-color: green;
}

.bg-accent
{
    background-color: var(--accentsColor);
}
 
 
.setupLink {
    color: black;
    background-color: white; /* Black background color */
    font-family: Calibri;
    font-size: 17px;
    line-height: 12px;
    padding: 3px 10px 3px 10px; /* Padding */
}

.errorLogin {
    color: white;
    background-color: #da291c; /* Black background color */
    font-family: Calibri;
    font-size: 17px;
    line-height: 12px;
    padding: 3px 10px 3px 10px; /* Padding */
}


.loadingBar {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

.loadingBarBlock {
    font-family: Calibri;
    font-size: 24px;
    color: white;
    text-align: center; 
}

a.toastlink {
    color: white;
    text-decoration: underline;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#toast {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1001; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #toast.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}


#piemenu > svg {
    width: 100%;
    height: 100%;
    z-index: 1;
}

#piemenu {
    height: 10vw;
    width: 10vw;
    margin: auto;
    position: absolute;
}

@media (max-width: 400px) {
    #piemenu {
        height: 8vw;
        width: 8vw;
    }
}

[class|=wheelnav-piemenu-slice-basic] {
    fill: #666666;
    stroke: #FFFFFF;
    fill-opacity: 0.77;
}

[class|=wheelnav-piemenu-slice-selected] {
    fill: #0F0FF0;
    stroke: none;
}

[class|=wheelnav-piemenu-slice-hover] {
    fill: #666666;
    stroke: none;
    fill-opacity: 0.47;
    cursor: pointer;
}

[class|=wheelnav-piemenu-title-basic] {
    fill: #FFFFFF;
    stroke: none;
    pointer-events: none;
}

[class|=wheelnav-piemenu-title-selected] {
    fill: #fff;
    stroke: none;
    pointer-events: none;
}

[class|=wheelnav-piemenu-title-hover] {
    fill: #222;
    stroke: none;
    cursor: pointer;
    pointer-events: none;
}

[class|=wheelnav-piemenu-title > tspan] {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 24px;
}


/******* loading bar **********/


.calcButton {
    font-family: 'HelveticaNeueLTCom-Roman', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    background: none;
    color: var(--accentsColor);
    font-size: 14px;
    border: 2px solid var(--accentsColor);
    padding: 0.2rem 2rem;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin-right: 1em;
    margin-left: 1em;
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
}

    .calcButton:hover, calcButton:active, calcButton:focus {
        background: var(--accentsColor);
        color: #fff;
        outline: none;
    }
    .calcButton:focus {

        outline: none;
    }


.arsysButton {
    display: flex;
    background-color: var(--accentsColor); /*#2b3052;*/
    color: white;
    font-family: sans-serif;
    cursor: pointer;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    outline: 6px solid var(--accentsColor); /*#2B3052;*/
    outline-offset: 0px;
    border: none;
    font-size: medium;
}

    .arsysButton:hover {
        background-color: rgba(var(--RGB_accentsColor), 0.8); /*#4b548c;*/
    }



    /**********************************************************************************************************************************************
        Formulář pro vkládání a nahrávání souborů DGN na server
    ***********************************************************************************************************************************************/
.dgnLabel {
    display: flex;
    background-color: var(--accentsColor); /*#2b3052;*/
    color: white;
    font-family: sans-serif;
    cursor: pointer;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    outline: 3px solid var(--accentsColor); /*#2B3052;*/
    outline-offset: -2px;
    border: none;
    font-size: small;
}

    .dgnLabel:hover {
        background-color: rgba(var(--RGB_accentsColor), 0.8);/*#4b548c;*/

    }

.dgnLabelDisabled {
    display: flex;
    background-color: gray;
    color: white;
    font-family: sans-serif;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    outline: 3px solid gray;
    outline-offset: -2px;
    border: none;
    font-size: small;
}

.formGrid {
    display: grid;
    height: 100%;
    grid-template-columns: 8em 17em;
    grid-template-rows: 2em 2em auto 2em;
    grid-row-gap: 0.5em;
    padding-left: 10px;
    padding-top: 2em;
    padding-right: 10px;
    grid-auto-flow: row;
}

/*#file-chosen {
    display: flex;
    font-family: sans-serif;
    color: white;
    outline: 3px solid #2B3052;
    outline-offset: -2px;
    height: 100%;
    width: 100%;
    align-items: center;
    font-size: small;
    padding-left: 1em;
    overflow: hidden;
}*/

.dgnFileChosen {
    display: flex;
    font-family: sans-serif;
    color: white;
    outline: 3px solid var(--accentsColor); /*#2b3052;*/
    outline-offset: -2px;
    height: 100%;
    width: 100%;
    align-items: center;
    font-size: small;
    padding-left: 1em;
    overflow: hidden;
    white-space: nowrap;
}

.dgnFileChosenDisabled {
    display: flex;
    font-family: sans-serif;
    color: white;
    outline: 3px solid gray;
    outline-offset: -2px;
    height: 100%;
    width: 100%;
    align-items: center;
    font-size: small;
    padding-left: 1em;
    overflow: hidden;
}



#dgnDivider
{
    width: 100%;
    height: 3px;
    background-color: white;
    grid-row: 4;
    grid-column-start: 1;
    grid-column-end: 6;
}

.dgnCompanyDivider {
    width: 100%;
    height: 3px;
    background-color: white;
    grid-row: 6;
    grid-column-start: 1;
    grid-column-end: 6;
}

.dgnCompany {
    color: var(--fontColor);
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 5;
}

.dgnOrderEdit {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row: 5;
    border: none;
    color: var(--fontColor);
}

#dgnCompanyLayers {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row: 7;
}

#dgnLayers {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row: 4;
}

#btnSubmit {
    font-family: 'Arial';
    background: #2B3052;
    color: white;
    font-size: 14px;
    border: 4px solid #2B3052; /*var(--accentsColor);*/
    -webkit-animation: background 0.3s 0s ease-in-out;
    -moz-animation: background 0.3s 0s ease-in-out;
    -ms-animation: background 0.3s 0s ease-in-out;
    -o-transition: background 0.3s 0s ease-in-out;
    transition: background 0.3s 0s ease-in-out;
    grid-column-start: 1;
    grid-column-end: 3;
    justify-self: center;
    padding-right: 3em;
    padding-left: 3em;
}

    #btnSubmit:hover {
        background: #4b548c; /*var(--accentsColor);*/
    }

#btnSubmit:disabled
{
    background: none;
    border: 4px solid grey;
}

#btnSubmit:disabled:hover
{
    background: none;
}

.dgnField
{
    display: inline-grid;
    grid-template-columns: 1em 22em 2em;
    justify-content: center;
    align-content: center;
    padding-top: 0.5em;
}

.dgnSwitch {
    grid-column-start: 3;
    grid-column-end: 3;
    justify-self: center;

    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    -o-user-select: none;

    user-select: none;
}

.dgnToggle
{
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

    .dgnToggle:before {
        content: "";
        position: relative;
        top: 1px;
        left: 1px;
        width: 24px;
        height: 10px;
        display: block;
        background: #c8ccd4;
        border-radius: 12px;
        transition: background 0.2s ease;
    }

    .dgnToggle span {
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        display: block;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgb(154 153 153 / 75%);
        transition: all 0.2s ease;
    }

        .dgnToggle span svg {
            margin: 4px;
            fill: none;
            padding-bottom: 4px;
        }

.dgnToggle span svg path {
    stroke: #c8ccd4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    transition: all 0.5s linear;
}

.cbx:checked + .dgnToggle:before {
    /*background: #52d66b;*/
    /*background: #F46036;*/
    background: var(--accentsColor);
}

.cbx:checked + .dgnToggle span {
    transform: translateX(18px);
}

    .cbx:checked + .dgnToggle span path {
        /*stroke: #52d66b;*/
        /*stroke: #F46036;*/
        stroke: var(--accentsColor);
        stroke-dasharray: 25;
        stroke-dashoffset: 25;
    }
    

/**********************************************************************************************************************************************
        Konec formuláře pro vkládání a nahrávání souborů DGN na server
    ***********************************************************************************************************************************************/

.gdfSubtitle
{
    font-weight: 600;
    margin-bottom: 4em;
}

.gdfRadio
{
    margin-top: 0.5em;
}

.gdfRadio input[type="radio"] {
    display: none;
}

    .gdfRadio input[type="radio"] + label {
        border: 5px solid var(--accentsColor);
        background-color: transparent;
        cursor: pointer;
        display: inline-block;
        height: 20px;
        width: 60px;
        text-align: center;
        line-height: 20px;
    }

    .gdfRadio input[type="radio"]:checked + label {
        background-color: var(--accentsColor);
    }

    .gdfRadio > button {
        right: 5px;
        border: 5px solid transparent;
        display: inline-block;
        background-color: transparent;
        font-size: 1.5rem;
        width: 60px;
        text-align: center;
        line-height: 20px;
        position: absolute;
        padding: 5px;
    }

.fsIco {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    color: white;
}

    .fsIco:before {
        content: '\26F6';
    }

#GDFTools
{
    background: center no-repeat var(--secondaryColor);
    width:100%;
    height:100%;
}

.gdfFSToolbar{
    width:  100%;
    height: 4vh;
}

    .gdfFSToolbar > button {
        right: 3em;
        border: 5px solid transparent;
        display: inline-block;
        background-color: transparent;
        background-image: url(../Pict/save.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 3em;
        height: 3em;
        position: absolute;
        padding: 5px;
    }

.gdfFSChartContainer
{
    margin: 1vh;
    height: 94vh;
    display: flex;
    justify-content: center;
}

.font1-2em
{
    font-size: 1.2em;
}

.font1em
{
    font-size: 1em;
}

.font0-8em
{
    font-size: 0.8em;
}

.font0-6em
{
    font-size: 0.6em;
}

.font0-4em
{
    font-size: 0.4em;
}

.font0-2em
{
    font-size: 0.2em;
}









ul, #arsysTree {
    list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#arsysTree {
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
.treeBranch {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

    /* Create the caret/arrow with a unicode, and style it */
    .treeBranch::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 6px;
    }

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.treeBranch-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

.nested > li {
    cursor: pointer;
    margin-left: 2em;
}

.nested > li:hover {
    color: var(--accentsColor);
}
    .nested > li::before {
        content: "\25CF";
        display: inline-block;
        margin-right: 0.5em;
    }

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: inline-block;
}

.arsysDivContent {
    margin-left: 2em;
    overflow-y: auto;
    height: 90%;
    padding-top: 2%;
    padding-bottom: 2%;
    scrollbar-color: var(--accentsColor) #F5F5F5;
    scrollbar-width: thin;
}

    .arsysDivContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    .arsysDivContent::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }

    .arsysDivContent::-webkit-scrollbar-thumb {
        /*background-color: #F46036;*/
        background-color: var(--accentsColor);
    }

.arsysToolbar {
    display: table;
    height: 6%;
    width: 100%;
    background: var(--mainColor);
    color: white;
    font-size: larger;
    text-align: center;
    position: relative;
}

.arsysToolbarTitle
{
    display: table-cell;
    vertical-align: middle;
}

.arsysDiv {
    height: 55em;
    width: 55em;
    /*background: var(--secondaryColor);*/
    background: #F8F8F8;
    border: 2px solid silver;
    box-shadow: 0px 0px 400px;
    -webkit-box-shadow: 0px 0px 400px;
    -moz-box-shadow: 0px 0px 400px;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be obdel when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
}

.arsysBack {
    color: #FFFFFF;
    position: absolute;
    top: 15%;
    left: 3%;
    font-size: 1.5em;
    opacity: 0.3;
    transform: rotate(-180deg);
}

    .arsysBack::before {
        content: '\279C';
    }
        .arsysBack:hover {
            opacity: 1;
        }

.loaderText
{
    position: relative;
    top: 54%;
    left: 43%;
    font-size: 2em;
}

.loader {
    font-size: 1em;
    display:block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    top: 46%;
    left: 48%;
    text-indent: -9999em;
    animation: mulShdSpin 1.3s infinite ease;
    transform: translateZ(0);
}

@keyframes mulShdSpin {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em var(--accentsColor), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2), 2.5em 0em 0 0em rgba(170, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.2), 0em 2.5em 0 0em rgba(170, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.2), -2.6em 0em 0 0em rgba(170, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.7), 1.8em -1.8em 0 0em var(--accentsColor), 2.5em 0em 0 0em rgba(170, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.2), 0em 2.5em 0 0em rgba(170, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.2), -2.6em 0em 0 0em rgba(170, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.7), 2.5em 0em 0 0em var(--accentsColor), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.2), 0em 2.5em 0 0em rgba(170, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.2), -2.6em 0em 0 0em rgba(170, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.5), 2.5em 0em 0 0em rgba(170, 0, 0, 0.7), 1.75em 1.75em 0 0em var(--accentsColor), 0em 2.5em 0 0em rgba(170, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.2), -2.6em 0em 0 0em rgba(170, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2), 2.5em 0em 0 0em rgba(170, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.7), 0em 2.5em 0 0em var(--accentsColor), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.2), -2.6em 0em 0 0em rgba(170, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2), 2.5em 0em 0 0em rgba(170, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.5), 0em 2.5em 0 0em rgba(170, 0, 0, 0.7), -1.8em 1.8em 0 0em var(--accentsColor), -2.6em 0em 0 0em rgba(170, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2), 2.5em 0em 0 0em rgba(170, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.2), 0em 2.5em 0 0em rgba(170, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.7), -2.6em 0em 0 0em var(--accentsColor), -1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(170, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(170, 0, 0, 0.2), 2.5em 0em 0 0em rgba(170, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(170, 0, 0, 0.2), 0em 2.5em 0 0em rgba(170, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(170, 0, 0, 0.5), -2.6em 0em 0 0em rgba(170, 0, 0, 0.7), -1.8em -1.8em 0 0em var(--accentsColor);
    }
}

.arsysFormGrid {
    display: grid;
    height: 100%;
    grid-template-columns: 20% 80%;
    grid-template-rows: 2em 2em;
    grid-row-gap: 0.5em;
    padding-left: 10px;
    padding-top: 2em;
    padding-right: 10px;
    grid-auto-flow: row;
}

#arsysFormTable {
    padding-right: 10%;
}

.arsysInp {
    background: none;
    font: 14px/1.5 Calibri;
    padding: 0px;
    padding-left: 0.5em;
    border: solid 0.1em var(--accentsColor);
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.arsysSel {
    background: none;
    font: 14px/1.5 Calibri;
    padding: 0px;
    padding-left: 0.3em;
    width: 100%;
    height: 100%;
    border: 0px;
    border-bottom: 1px solid #353535;
    outline: solid 0.1em var(--accentsColor);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.arsysFormButton {
    display: flex;
    background-color: var(--accentsColor); /*#2b3052;*/
    color: white;
    font-family: sans-serif;
    cursor: pointer;
    height: 100%;
    width: 20%;
    justify-content: center;
    align-items: center;
    outline: 3px solid var(--accentsColor); /*#2B3052;*/
    outline-offset: -2px;
    border: none;
    font-size: small;
    padding: 2%;
    float:right;
}

    .arsysFormButton:hover {
        background-color: rgba(var(--RGB_accentsColor), 0.8); /*#4b548c;*/
    }
.arsysFormButton:disabled,
.arsysFormButton[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
    outline: none;
}

.spacer {
    display:block;
    padding-top: 2em;
}

.spacer-1em {
    display: block;
    padding-top: 2em;
}

.arsysFileChosen {
    display: flex;
    font-family: sans-serif;
    outline: 3px solid var(--accentsColor); /*#2b3052;*/
    outline-offset: -2px;
    height: 100%;
    width: 100%;
    align-items: center;
    font-size: small;
    padding-left: 1em;
    overflow: hidden;
    white-space: nowrap;
}

.arsysFile
{
    font-size: smaller;
}

    .arsysFile > td {
        display: block;
        margin-top: -0.8em;
        /*margin-bottom: 1em;*/
    }

    .arsysDelete {
        width:100%;
        margin-bottom: 1em;
    }

.cursor-pointer:hover {
    color: var(--accentsColor);
}

    .arsysDelete > td {
        margin-top: -0.8em;
        margin-bottom: 1em;
        border-bottom: solid var(--accentsColor) 0.1em;
    }

    .cursor-pointer{
        cursor: pointer;
    }
.arsysErr {
    color: red;
    font-size: medium;
    animation: horizontal-shaking 0.4s 0.2s ease;
    transform: translateX(0);
    text-align: center;
    font-weight: 600;
}


@keyframes horizontal-shaking {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(5px)
    }

    50% {
        transform: translateX(-5px)
    }

    75% {
        transform: translateX(5px)
    }

    100% {
        transform: translateX(0)
    }
}

.arsysTitle > td{
    text-align: center;
    font-size: larger;
    font-weight: 600;
}

.arsysTitle2 > td {
    text-align: left;
    font-size: larger;
    font-weight: 600;
}

.arsysSubtitle > td {
    text-align:left;
    font-size: medium;
}


#stButton:disabled {
    background: none;
    border: 4px solid grey;
}

    #stButton:disabled:hover {
        background: none;
    }

/************************************************************** SELECT2 CUSTOM THEME ***************************************************************/


.select2-container .select2-selection--single {
    height: auto !important;
}
    .select2-container--custom .select2-selection--single {
    background-color: transparent;
    border: 1px solid var(--accentsColor);
}

    .select2-container--custom > .select2-dropdown--below {
        background: var(--secondaryColor);
        color: var(--fontColor);
    }

    .select2-container--custom .select2-selection--single .select2-selection__rendered {
        color: var(--fontColor);
    }

    .select2-container--custom .select2-selection--single .select2-selection__clear {
        cursor: pointer;
        float: right;
        font-weight: bold;
    }

    .select2-container--custom .select2-selection--single .select2-selection__placeholder {
        color: #999;
    }

    .select2-container--custom .select2-selection--single .select2-selection__arrow {
        height: 26px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }

        .select2-container--custom .select2-selection--single .select2-selection__arrow b {
            border-color: #888 transparent transparent transparent;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            height: 0;
            left: 50%;
            margin-left: -4px;
            margin-top: -2px;
            position: absolute;
            top: 50%;
            width: 0;
        }

.select2-container--custom[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left;
}

.select2-container--custom[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}

.select2-container--custom.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default;
}

    .select2-container--custom.select2-container--disabled .select2-selection--single .select2-selection__clear {
        display: none;
    }

.select2-container--custom.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--custom .select2-selection--multiple {
    background-color: var(--mainColor);
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
}

    .select2-container--custom .select2-selection--multiple .select2-selection__rendered {
        box-sizing: border-box;
        list-style: none;
        margin: 0;
        padding: 0 5px;
        width: 100%;
    }

        .select2-container--custom .select2-selection--multiple .select2-selection__rendered li {
            list-style: none;
        }

    .select2-container--custom .select2-selection--multiple .select2-selection__clear {
        cursor: pointer;
        float: right;
        font-weight: bold;
        margin-top: 5px;
        margin-right: 10px;
        padding: 1px;
    }

    .select2-container--custom .select2-selection--multiple .select2-selection__choice {
        background-color: var(--accentsColor);
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: default;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
        padding: 0 5px;
    }

    .select2-container--custom .select2-selection--multiple .select2-selection__choice__remove {
        color: #999;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        margin-right: 2px;
    }

        .select2-container--custom .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #333;
        }

.select2-container--custom[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--custom[dir="rtl"] .select2-selection--multiple .select2-search--inline {
    float: right;
}

.select2-container--custom[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto;
}

.select2-container--custom[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto;
}

.select2-container--custom.select2-container--focus .select2-selection--multiple {
    border: solid black 1px;
    outline: 0;
}

.select2-container--custom.select2-container--disabled .select2-selection--multiple {
    background-color: green;
    cursor: default;
}

.select2-container--custom.select2-container--disabled .select2-selection__choice__remove {
    display: none;
}

.select2-container--custom.select2-container--open.select2-container--above .select2-selection--single, .select2-container--custom.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-container--custom.select2-container--open.select2-container--below .select2-selection--single, .select2-container--custom.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-container--custom .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
}

.select2-container--custom .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield;
}


.select2-container--custom .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 0.5em;
}

.select2-container--custom .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.select2-container--custom .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--accentsColor);
}


.select2-container--custom .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}

.select2-container--custom .select2-results__option[role=group] {
    padding: 0;
}

.select2-container--custom .select2-results__option[aria-disabled=true] {
    color: #999;
}

.select2-container--custom .select2-results__option[aria-selected=true] {
    background-color: var(--accentsColor);
}

.select2-container--custom .select2-results__option .select2-results__option {
    padding-left: 1em;
}

    .select2-container--custom .select2-results__option .select2-results__option .select2-results__group {
        padding-left: 0;
    }

    .select2-container--custom .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -1em;
        padding-left: 2em;
    }

        .select2-container--custom .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
            margin-left: -2em;
            padding-left: 3em;
        }

            .select2-container--custom .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
                margin-left: -3em;
                padding-left: 4em;
            }

                .select2-container--custom .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
                    margin-left: -4em;
                    padding-left: 5em;
                }

                    .select2-container--custom .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
                        margin-left: -5em;
                        padding-left: 6em;
                    }

.select2-container--custom .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accentsColor);
    color: white;
}

.select2-container--custom .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
}

/**************************************************************************************************** SELECT2 CUSTOM THEME END ***********************************************************************************************************/

.arsysExternal
{
    text-align: right;
    color: var(--fontColor);
}

.arsysExternal > a 
{
    color: currentColor;
    text-decoration: solid;
    font-size: larger;
}

    .arsysExternal > a[href^="http"]::after,
    .arsysExternal > a[href^="https://"]::after {
        content: "";
        color: var(--fontColor);
        width: 11px;
        height: 11px;
        margin-left: 4px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
    }

.copyIcon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.attrGeomBtn {
    width: 2em;
    height: 2em;
    border: 0.5em solid transparent;
    outline: 0.2em solid var(--accentsColor);
    background-color: transparent;
    margin-right: 1em;
}

    .attrGeomBtn:hover {
        background-color: var(--accentsColor);
    }

    .attrGeomBtn:disabled {
        outline: 0.2em solid var(--mainColor);
    }
        .attrGeomBtn:disabled:hover {
            outline: 0.2em solid var(--mainColor);
            background-color: transparent;
        }


.geomNodesLoader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    box-sizing: border-box;
    animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
    33% {
        background: #FFF;
        box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
    }

    66% {
        background: #FF3D00;
        box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    }

    100% {
        background: #FFF;
        box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
    }
}

.dividerDBlock {
    border-top: 0.2em solid var(--accentsColor);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    display:block;
}

.posToDR {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
}

.attrSeparatorLabel
{
    font: 18px/1.5 Calibri;
    font-weight: 800;
}

  /***************************************************************************************/
 /*                               MESSAGES                                              */
/***************************************************************************************/

.containerMs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 0.6fr 2.2fr 0.2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "message-top-controls" "message-top" "message-middle" "message-bottom";
    width: 95%;
    height: 95%;
    border: solid 2px var(--accentsColor);
    background-color: var(--mainColor);
    color: var(--fontColor);
}

.message-top-controls {
    display: grid;
    grid-area: message-top-controls;
    grid-template-columns: 2.5fr 0.5fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "ms-top-cntrl-text ms-top-cntrl-close";
}

.ms-drec-ul li:nth-of-type(odd) span {
    color: var(--secondaryFontColor);
}
{

}

.ms-top-cntrl-text {
    grid-area: ms-top-cntrl-text;
    align-self: center;
    padding-left: 2em;
}

.ms-top-cntrl-close {
    grid-area: ms-top-cntrl-close;
    text-align: right;
}

.message-top {
    display: grid;
    grid-template-columns: 0.5fr 1.2fr 0.7fr 0.5fr 1fr 0.8fr 2.8fr 0.5fr;
    grid-template-rows: 0.2fr 0.2fr 0.2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "ms-top-message ms-top-message-sel ms-top-message-sel ms-top-message-sel ms-top-message-sel ms-top-message-sel ms-top-message-sel ms-top-message-sel" "ms-top-from ms-top-from-date ms-top-from-time ms-top-to ms-top-to-date ms-top-to-time . ." "ms-top-city ms-top-city-sel ms-top-city-sel ms-top-area ms-top-area-sel ms-top-street ms-top-street-sel ms-top-button";
    grid-area: message-top;
    align-content: center;
}

.ms-top-message {
    grid-area: ms-top-message;
}

.ms-top-from {
    grid-area: ms-top-from;
}

.ms-top-city {
    grid-area: ms-top-city;
}

.ms-top-message-sel {
    grid-area: ms-top-message-sel;
}

.ms-top-from-date {
    grid-area: ms-top-from-date;
}

.ms-top-from-time {
    grid-area: ms-top-from-time;
}

.ms-top-city-sel {
    grid-area: ms-top-city-sel;
}

.ms-top-to {
    grid-area: ms-top-to;
}

.ms-top-area {
    grid-area: ms-top-area;
}

.ms-top-area-sel {
    grid-area: ms-top-area-sel;
}

.ms-top-to-date {
    grid-area: ms-top-to-date;
}

.ms-top-to-time {
    grid-area: ms-top-to-time;
}

.ms-top-street {
    grid-area: ms-top-street;
}

.ms-top-street-sel {
    grid-area: ms-top-street-sel;
}

.ms-top-button {
    grid-area: ms-top-button;
}

.message-middle {
    display: grid;
    grid-template-columns: 0.5fr 1.2fr 0.7fr 0.5fr 0.5fr 1fr 0.8fr 2.8fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "ms-middle-rec ms-middle-rec-sel ms-middle-rec-sel ms-middle-rec-sel ms-middle-rec-sel ms-middle-message ms-middle-message ms-middle-message" "ms-middle-drec ms-middle-drec-sel ms-middle-drec-sel ms-middle-drec-sel ms-middle-drec-sel ms-middle-message ms-middle-message ms-middle-message";
    grid-area: message-middle;
    overflow: hidden;
}

.ms-middle-rec {
    grid-area: ms-middle-rec;
}

.ms-middle-drec-sel {
    grid-area: ms-middle-drec-sel;
    overflow: auto;
}

.ms-rec-ul > li {
    display: flex;
}

.ms-rec-ul > li > label {
    margin-left: 1em;
    width: auto;
}

.ms-middle-drec {
    grid-area: ms-middle-drec;
}

.ms-middle-rec-sel {
    grid-area: ms-middle-rec-sel;
}

.ms-middle-message {
    grid-area: ms-middle-message;
}

.message-bottom {
    grid-area: message-bottom;
    text-align: right;
    align-self: center;
    margin-right: 2em;
}

.containerReducer {
    justify-items: center;
    align-content: center;
}

.ms-align-c-center
{
    align-content: center;
}

.dark-scheme
{
    color-scheme: dark;
}

/***************************************************************************************/
/*                               MESSAGES-END                                          */
/***************************************************************************************/


/***************************************************************************************/
/*                               DGNPANEL                                              */
/***************************************************************************************/

.containerImport {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1.5fr 3fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    background-color: var(--mainColor);
    color: var(--fontColor);
    border: solid 2px var(--accentsColor);
    padding: 0.5em 2em 2em 2em;
}

.dgnTop {
    grid-area: 1 / 1 / 2 / 5;
}

.dgnInfo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "dgnId dgnFile dgnAlias dgnDate";
    grid-area: 2 / 1 / 3 / 5;
}

.dgnId {
    grid-area: dgnId;
}

.dgnFile {
    grid-area: dgnFile;
}

.dgnAlias {
    grid-area: dgnAlias;
}

.dgnDate {
    grid-area: dgnDate;
}

.dgnStyle {
    display: grid;
    grid-template-columns: 1fr 2.2fr 0.6fr 0.6fr 0.6fr;
    grid-template-rows: 0.3fr 2.3fr 0.4fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "dgnStyleMap dgnStyleMap dgnStyleLineColor dgnStyleLineWidth dgnStyleLine" "dgnStyleMap dgnStyleMap dgnStyleLineColorSel dgnStyleLineWidthSel dgnStyleLineSel" "dgnStyleMapChanger dgnStyleMapChanger . . .";
    grid-area: 3 / 1 / 4 / 5;
}

.dgnStyleMap {
    grid-area: dgnStyleMap;
    margin-right: 1em;
    width: 100%;
    height: 100%;
    justify-self: center;
}

.dgnStyleLineColor {
    grid-area: dgnStyleLineColor;
    align-content: center;
    justify-self: anchor-center;
}

.dgnStyleLineWidth {
    grid-area: dgnStyleLineWidth;
    align-content: center;
    justify-self: anchor-center;

}

.dgnStyleLineColorSel {
    grid-area: dgnStyleLineColorSel;
    align-content: center;
    justify-self: anchor-center;
    width: 100%;
    height: 100%;
}

.dgnStyleColorPicker
{
    width: 100%;
    height: 100%;
    border: none;
    padding: 0em;
    background: none;
}

.dgnStyleLineWidthSel {
    grid-area: dgnStyleLineWidthSel;
    justify-self: anchor-center;
    padding-top: 0.3em;
    width: 90%;
}

    .dgnStyleLineWidthSel > select {
        width: 100%;
    }

.dgnStyleMapChanger {
    grid-area: dgnStyleMapChanger;
}

.dgnStyleLine {
    grid-area: dgnStyleLine;
    align-content: center;
    justify-self: anchor-center;
}
.dgnStyleLineSel {
    grid-area: dgnStyleLineSel;
    justify-self: anchor-center;
    width: 90%;
    padding-top: 0.3em;
}

.dgnStyleLineSel > select {
    width: 100%;
}

.dgnUsersave {
    grid-area: 4 / 1 / 5 / 2;
    justify-self: center;
}

.dgnSavebutton {
    grid-area: 4 / 2 / 5 / 4;
    justify-self: center;
}

.dgnCompanysave {
    grid-area: 4 / 4 / 5 / 5;
    justify-self: center;
}

.dgnClose {
    grid-area: 1 / 4 / 2 / 5;
    text-align: right;
}

.sorter {
    content: '....';
    width: 10px;
    height: 20px;
    display: inline-block;
    overflow: hidden;
    line-height: 5px;
    padding: 3px 4px;
    vertical-align: middle;
    margin-top: -.7em;
    margin-right: .3em;
    cursor: move;
    font-size: 12px;
    font-family: sans-serif;
    letter-spacing: 2px;
    color: #cccccc;
    text-shadow: 1px 0 1px black;
}

.sorter::after {
    content: '.. .. .. ..';
}


.arrow-tab-left {
    float: left;
    grid-area: layer-tab-left;
    border: none;
    border-right: 3px var(--accentsColor) solid;
}

.arrow-tab-right {
    float: right;
    grid-area: layer-tab-right;
    border: none;
    border-left: 3px var(--accentsColor) solid;
}

.tab-control {
    background-color: var(--mainColor);
    display: inline-block;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

.thin-button {
    border: 2px solid var(--accentsColor);
    background: transparent;
    padding: 0.2em 2em;
    color: var(--fontColor);
    margin-top: 1em;

}

.thin-button:hover {
    background: var(--accentsColor);
}

.ta-end
{
    text-align: end;
}