/**
 *    SERVIS THEME
 *  
 *      v. 1.0
 *  
 *  https://css.edgering.org
 *  
 */

.loading {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; display: block; shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Ccircle cx='50' cy='50' r='32' stroke-width='8' stroke='%23b5b5b5' stroke-dasharray='50.26548245743669 50.26548245743669' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' keyTimes='0;1' values='0 50 50;360 50 50'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-size: auto 100% !important;
    background-position: center center !important;
}

input.ok {
    background-repeat: no-repeat;
    background-position: right .3em center !important;
}

input.datum {
    background-image: var(--arrow-bottom);
    background-size: .6em .4em;
    background-position: left .5em center;
    background-repeat: no-repeat;
}


div#SMtxtBot {
    border-top: 2px solid #d6d6d6;
}

#SMtxtTop {
    background-color: rgba(51, 144, 206, 0.1);
    border-radius: 6px;
    padding: .4em 2em;
    font-weight: 700;
}

h1#h1Main {
    margin-bottom: 0;
}

#frmFields {
    margin-bottom: 2em;
}

/** **/


#nsInfoLayers {
    position: sticky;
    top: 3em;
    align-self: start;
}

#nsInfoLayers div.layer {
    position: relative;
    border: 2px solid grey;
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 2em 2em;
    box-shadow: 1px 1px 1px #9c9c9c;
    line-height: 180%;
}

#nsInfoLayers .ns__layout {
    display: block;
}

#nsInfoLayers div.layer h2 {
    font-family: "Exo";
    font-size: 1.9em;
}

/** **/

#nsServisMain {
    margin-top: 1.6em;
    display: grid;
    grid-template-columns: 40% auto;
    gap: 5%;
}

#nsServisMain li input[type='radio'] {
    display: none;
}

#nsServisMain li {
    background-repeat: no-repeat;
    background-position: right .5em top .5em;
}

#nsServisMain li label {
    display: block;
    padding: .6em 1em;
    cursor: pointer;
}

#nsServisMain input,
#nsServisMain input.datum {
    font-size: 1.2em;
    width: 100%;
    padding: .4em 0;
    text-align: center;
    background-color: transparent;
}

#nsInfoLayers {
    padding-bottom: 2em;
}

#nsServisMain .lblH2 {
    margin-top: 0;
    font-size: 1.8em;
    text-align: center;
}

/** **/

input.ok,
p#inp1Holder,
#nsServisMain li.selected {
    background-image: url(ico/tick-black.svg);
    background-size: auto 1em;
    background-position: right .6em top .7em;
    font-size: 1.1em;
}

#SMcolLeft h2 {
    font-family: "Exo";
    font-style: italic;
    text-align: center;
    font-size: 1.1em;
}

#SMcolLeft ul {
    margin: 0;
    padding: 0;
}

#SMcolLeft textarea,
#SMcolLeft input,
#SMcolLeft li {
    list-style: none;
    border: 2px solid #D6D6D6;
    border-radius: 4px;
    font-weight: bold;
    box-sizing: border-box;
}

#SMcolLeft textarea {
    width: 100%;
    padding: .2em;
    height: 5em;
    font-size: 1em;
}

#SMcolLeft li {
    margin-bottom: 6px;
}

#SMcolLeft li.selected input,
#SMcolLeft input#inpServis {
    border-color: #3390ce;
}

#nsServisMain input.ok,
#nsServisMain input#inpServis,
#SMcolLeft li.selected {
    border-color: #3390ce;
    background-color: rgba(51, 144, 206, 0.1);
}

.article #nsServisMain p {
    margin: 0 0 0.2em 0;
}

.article #nsServisMain #nsInfoLayers p {
    margin: 1em 0;
}


.article #nsServisMain p#inp2Holder {
    margin-top: .4em;
}

div.header {
    text-align: center;
    background-image: url(ico/bg.svg);
    background-repeat: repeat-x;
    background-position: center;
    background-size: 2px;
    margin-bottom: 1em;
}

div.header h2 {
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #fff;
    margin: 0;
}


p#nsBtnHld {
    margin: 0;
    padding: 1em 0;
}

a#btnREZERVACE {
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    padding: .8em 0;
    background-color: #3390ce;
    color: #fff;
    box-shadow: 0 8px 6px -6px black;
    border-radius: 2px;
    margin-top: 0;
    margin-bottom: 2px;
    letter-spacing: 1px;
}

a#btnREZERVACE:active {
    box-shadow: 0 6px 4px -4px rgb(0 0 0 / 60%);
    margin-bottom: 0;
    margin-top: 2px;
}

a#btnREZERVACE.dis,
a#btnREZERVACE.dis:active {
    box-shadow: none;
    color: #aaa8a8;
    background-color: #dfdddd;
    margin-top: 0;
    margin-bottom: 2px;
}

div.step {
    margin-bottom: 2em;
}

/** **/

#nsServisMain #sending {
    font-size: 1.2em;
    background-color: #f5f5f5;
    padding: 1em;
}


#nsServisMain #sending.loading {
    text-align: center;
    font-size: 1.4em;
    color: grey;
    padding: 1em 0;
    background-color: #fff;
}

#nsServisMain #sending.error {}