/********************* FontAwesome START *********************/
@font-face {
    font-family: 'Font Awesome 5 Solid';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../lib/fortawesome/fontawesome-free/webfonts/fa-solid-900.eot");
    src: url("../lib/fortawesome/fontawesome-free/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-solid-900.woff") format("woff"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Regular';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../lib/fortawesome/fontawesome-free/webfonts/fa-regular-400.eot");
    src: url("../lib/fortawesome/fontawesome-free/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-regular-400.woff") format("woff"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../lib/fortawesome/fontawesome-free/webfonts/fa-brands-400.eot");
    src: url("../lib/fortawesome/fontawesome-free/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-brands-400.woff") format("woff"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf") format("truetype"), url("../lib/fortawesome/fontawesome-free/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

.far {
    font-family: 'Font Awesome 5 Regular';
    font-weight: 400;
}

.fas {
    font-family: 'Font Awesome 5 Solid';
    font-weight: 400;
}

.fab {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
}

.fsmdl2 {
    font-family: 'Segoe MDL2 Assets';
    font-weight: 400;
}
.flip {
    -moz-transform: scaleX(-1); /* Gecko */
    -o-transform: scaleX(-1); /* Opera */
    -webkit-transform: scaleX(-1); /* Webkit */
    transform: scaleX(-1); /* Standard */
    filter: FlipH; /* IE 6/7/8 */
}

.fa-throw:after {
    content: "\f1d8";
}
/****************/
/****************/
/* změna vzhledu tooltipu */
.k-tooltip {
    color: #000000 !important;
    background: #FFFFF0E8 !important;
    border-radius: 5px !important;
    border: #404040 1px solid !important;
    text-shadow: 0 0 0px #000000, 1px 1px 2px #C0C0C0;
}
.k-animation-container-shown, .k-animation-container > .k-popup {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3), 0 4px 5px 0 rgba(0,0,0,.04) !important;
}
.k-callout-n {
    border-bottom-color: #404040 !important;
}
/****************/
.k-window {
    box-shadow: 3px 3px 7px 0px rgb(128 128 128 / 12%), 3px 3px 7px 0 rgb(0 0 0 / 21%);
}
/****************/
.nav-item.active {
    /*font-weight: bold;*/
}

    .nav-item.active a {
        /*color: unset;*/
    }
        .nav-item.active a:hover {
            text-decoration: none;
        }


/* položka (tlačítko) v menu */
.navButtonItem {
    height:38px;
}

/****************/
.loader {
    color: #ffffff;
    font-size: 3px;
    margin: 10px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load4 {
    0%, 100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

@keyframes load4 {
    0%, 100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}

/****************/
/* progress bar - https://stackoverflow.com/questions/51960933/stepper-pure-html-css  */
/* https://m0dlx.com/images/free_icons/?C=S;O=A */
.connectionState~button {
    
}
.connectionState {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 46px;
    font-size: 30px;
    width: 45px;
    height: 10px;
    position: relative;
}
    .connectionState:after {
        background-repeat: no-repeat;
        background-size: cover;
        content: '\00a0\00a0\00a0\00a0';
        position: absolute;
        top: -17px;
        right: 1px;
    }
    .connectionState[data-state='0']:after {
        background-image: url(../img/Icons/TrafficLight_red.svg);
    }
    .connectionState[data-state='1']:after {
        background-image: url(../img/Icons/TrafficLight_yellow.svg);
    }
    .connectionState[data-state='2']:after {
        background-image: url(../img/Icons/TrafficLight_green.svg);
    }


/********************* FontAwesome END *********************/
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.animClick {
    filter: drop-shadow( 2px 2px 2px rgba(192, 192, 192, 0.7));
    margin: 0px 2px 2px 0px;
    vertical-align: top;
}
    .animClick:active:hover {
        filter: unset;
        margin: 2px 0px 0px 2px;
    }


.animClickInner {
    filter: drop-shadow( 2px 2px 2px rgba(192, 192, 192, 0.7));
    padding: 0px 4px 2px 0px;
    vertical-align: top;
    margin: 0 0 0 4px;
}

    .animClickInner:active:hover {
        filter: unset;
        padding: 2px 0px 0px 2px;
    }

/*.animClick {
    filter: drop-shadow( 3px 3px 2px rgba(192, 192, 192, 0.7));
    margin: 1px 3px 3px 1px;
}
    .animClick:active:hover {
        filter: unset;
        margin: 3px 1px 1px 3px;
        filter: unset;
    }
*/
.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/* */

.wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 200px;
}

/*********************/
#panelTest {
    margin: 30px 5px 15px 5px;
}

span.ico28 {
    content: '|\00a0\00a0\00a0\00a0';
    background-size: 28px 28px !important;
    background-repeat: no-repeat;
    height: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    display: inline-table;
}

span.fa-microphone-alt-solid {
    background-image: url('../img/FontAwesome/microphone-alt-solid.svg');
}

span.fa-video-solid {
    background-image: url('../img/FontAwesome/video-solid.svg');
}

span.logo-xiaomi {
    background-image: url('../img/Icons/Logo_Xiaomi.svg');
}
span.logo-samsungBrowser {
    background-image: url('../img/Icons/Logo_SamsungBrowser.svg');
}
span.logo-firefoxBrowser {
    background-image: url('../img/Icons/Logo_FirefoxBrowser.svg');
}

div.checkItem {
    margin: 3px 15px 3px 15px;
}

    div.checkItem div.checkHead {
        display: flex;
    }

    div.checkItem div span.ico28 {
        font-size: 24px;
        color: #808080;
    }

    div.checkItem span.checkLabel {
        font-size: 19px;
        text-align: left;
        margin: 0 0 0 8px;
        color: #808080;
        /*text-shadow: 0 0 1px #000000, 3px 3px 5px #C0C0C0;*/
        width: 400px;
    }

    div.checkItem span.checkState {
        display: block;
        font-size: 24px;
    }

    div.checkItem[data-state='0'] span.checkState:after {
        content: '\f128';
        color: #F0F0F0;
    }

    div.checkItem[data-state='1'] span.checkState:after {
        content: '\f04c';
        color: #F0F0F0;
    }

    div.checkItem[data-state='2'] span.checkState:after {
        display: block;
        content: '';
        color: #008000;
        font-size: 3px;
        margin: 18px 0 0 7px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -9999em;
        -webkit-animation: load4 1.3s infinite linear;
        animation: load4 1.3s infinite linear;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }

    div.checkItem[data-state='3'] span.checkState:after {
        color: #008000;
        content: '\f00c';
        display: block;
    }
    div.checkItem[data-state='3'] .checkHead .ico28 {
        color: #00800080;
    }

    div.checkItem[data-state='4'] .checkHead .checkLabel,
    div.checkItem[data-state='4'] .checkHead .ico28,
    div.checkItem[data-state='4'] .checkResult {
        color: red;
    }

    div.checkItem[data-state='4'] .checkHead .ico28 {
        color: #FF000080;
    }


    div.checkItem[data-state='4'] span.checkState:after {
        color: #C00000;
        content: '\f00d';
        display: block;
    }

    div.checkItem[data-state='5'] .checkHead .checkLabel,
    div.checkItem[data-state='5'] .checkHead .ico28,
    div.checkItem[data-state='5'] .checkResult {
        color: red;
    }

    div.checkItem[data-state='5'] span.checkState:after {
        color: #FFD000;
        content: '\f071';
        display: block;
    }

    div.checkItem[data-state='5'] .checkHead .ico28 {
        color: #FF000080;
    }

    div.checkItem div.checkResult {
        font-size: 13px;
        margin: -8px 1px 0 36px;
        line-height: 1em;
        color: #808080;
        width: 70%;
        text-align: left;
    }

    div.checkItem[data-state='4'] div.checkResult {
        color: #C00000;
    }

    div.checkItem div.checkResult div[data-level='0'] {
        font-size: 13px;
        margin: 0 0 0 0;
        color: #C0C0C0;
    }

    div.checkItem div.checkResult div[data-level='1'] {
        font-size: 13px;
        margin: 0 0 0 0;
        color: #FFC0C0;
    }

/*********************/
button.lngBtnGrp {
}

a.lngBtn {
    padding: 0;
}

    a.lngBtn img, button.lngBtnGrp img {
        width: 27px;
        padding: 2px;
        margin: 0px;
    }