@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=latin-ext');

/* -- Primary style ---- */
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }

/*  -webkit-transition: all .24s ease; -moz-transition: all .24s ease; -o-transition: all .24s ease; -ms-transition: all .24s ease; transition: all .24s ease; */
html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { color: #2F353C; background-color: #edf1f5; font-family: 'Roboto', sans-serif; font-weight: 300; }
body, html { overflow-x: hidden; }
section { float: left; width: 100%; }


.nopad {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
footer { width: 100%; float: left }
a { color: #2f272a; text-decoration: none; transition: color .2s ease-out; cursor: pointer; }
a:hover { text-decoration: underline; color: #2f272a; }
p { line-height: 1.5; font-size: 14px; color: #93969A; }
strong { color: #21252b; font-weight: 600; }
hr { border-top: 1px solid #ededed; margin: 30px 0px; }
label { display: block;
    margin-bottom: .5rem;
    color: #2f353c;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700; }
    .variace label{
        color: inherit;
        font-size: inherit;
        text-transform: inherit;
        font-weight: inherit;
    }
.table tr:first-child td, .table tr:first-child th { border-top: 1px solid transparent; }

.form-control { display: block; width: 100%; padding: 12px 10px; font-size: 13px; color: #323C47; line-height: 1.5; color: #21252b; background: #FFFFFF;
border: 1px solid #E9EFF4;
border-radius: 4px; background-image: none; background-clip: padding-box;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
.form-group { margin-bottom: 15px; }
.help { font-size: 11px; font-weight: 300; margin: 0 15px; }
h1, h2, h3 { font-family: 'Roboto', sans-serif; font-weight: 700; color: #2F353C; position: relative; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { line-height: inherit; }
h1 { font-size: 24px; margin-bottom: 40px; }
h1:after { content: ''; width: 20px; height: 1px; background: #2DAFE6; position: absolute; left: 0; bottom: -8px; }
h3 { font-size: 17px; margin-bottom: 35px; }
h4{
   margin-bottom: .5rem;
    color: #2f353c;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
}
ul { list-style: none; }
.table-hover tbody tr:hover {
    background-color: #f8fcff;
}
.warning{
    font-weight: 700;
    color: red;
    margin-left: 10px;
}
.ok{
    font-weight: 700;
    color: green;
    margin-left: 10px;
}
.notification{
    position: fixed;
    top: 120px;
    right: 15px;
    z-index: 1004;
    width: 300px;
}
.alert {
    position: relative;
    padding: 15px 40px 15px 15px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.typOsoby{
    z-index: 99;
    position: relative;
    top: 0px;
}
.nav-tabs {
    border-bottom: 1px solid #E9EFF4;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #fff;
    font-weight: 700;
    opacity: 1;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #DCE0E1 #DCE0E1 transparent;
}
.checkboxArea{
    border: 1px solid #E9EFF4;
    background-color: #fbfbfb;
    border-radius: 4px;
    padding: 10px;
}

.onoffswitch {
    position: relative; width: 60px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 30px; padding: 0; line-height: 30px;
    border: 2px solid #E3E3E3; border-radius: 30px;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease-in;
    text-align: right;
    padding-right: 11px;
    margin-bottom: 0;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 30px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 30px;
    border: 2px solid #E3E3E3; border-radius: 30px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #2DAFE6;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #2DAFE6;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
}
.checkbox-area{
    padding: 10px;
    background: #f7f8f9;
    border: 1px solid #E9EFF4;
    line-height: 30px;
    font-size: 13px;
    font-weight: 700;

}
/*
h3:after{
content: "";
position: absolute;
left: 0;
bottom: -6px;
height: 1px;
width: 100%;
background-color: #2DAFE6;}
*/
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    opacity: 0.7;
}
.typOsoby img{margin-right: 15px;}
.summary{
        text-align: center;
    margin-top: 25px;
}
.summary input{margin-bottom: 15px;font-size: 16px;}
.form {
    position: relative;
    z-index: 1;
    padding: 20px;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E9EFF4;
    border-top: solid 2px #fff;
    margin-bottom: 20px;
}
.g-recaptcha > div{
        margin: 0 auto;
    margin-bottom: 20px;
}
.btn { background: #2DAFE6; border-radius: 6; border: none; padding: 13px 20px; font-size: 11px; font-weight: 700; }
.btn-primary:hover { color: #fff; background-color: #238EBB; box-shadow: none; }
#wrapper { height: 100%; }
#sidebar { float: left; width: 110px; z-index: 1001; background: #2F353C; box-shadow: 0 0 20px 0 rgba(202, 202, 202, 0.50); position: fixed; padding-top: 0px; height: 100%; transition: 0.05s ease-in; }
#sidebar .brand { width: 100%; height: 90px; text-align: center; }
#sidebar .brand img { max-width: 40px; height: auto; }
#sidebar nav { text-align: center; margin-top: 40px; }
#sidebar .logout { position: absolute; bottom: 30px; width: 100%; }
#sidebar a { font-size: 11px; font-weight: 300; color: #93969A; }
#sidebar .nav-link { display: block; padding: 17px 0px; position: relative; }
#sidebar .icon { display: block; margin-bottom: 15px; font-size: 20px; }
#sidebar a.nav-link.active:before { content: ''; width: 6px; height: 40%; background: #00B3ED; box-shadow: 2px 3px 11px 0 rgba(1, 172, 253, 0.74); position: absolute; top: 50%; left: 0; transform: translateY(-60%); border-radius: 0px 6px 6px 0px; }
#sidebar a.nav-link.active { color: #fff; font-weight: 700; }
#sidebar a.nav-link.active .icon { color: #2DAFE6; }
#sidebar a.nav-link:hover { color: #fff; }
#sidebar a.nav-link:hover .icon { color: #2DAFE6; }
#app { float: right; width: calc(100% - 110px); background: #edf1f5; min-height: 100vh; }
#app .navigace { min-height: 90px; background: #fff; box-shadow: 0 0 20px 0 rgba(202, 202, 202, 0.50); margin-left: 110px; z-index: 1000; }
#app .navigace h1 { margin-bottom: 0; }
#app .navigace h1 span { font-weight: 300; }
#app .navigace h1:after { display: none; }
#app .navigace p.clientInfo{
    margin-bottom: 0;
}
#app .navigation { font-size: 12px; color: #E3E3E3; display: block; }
#app .navigation a { margin: 0 10px; color: #2F353C; text-decoration: none; }
#app .navigation a.active { font-weight: 700; }
#app .navigation a:hover { text-decoration: none; }
#app .content { margin-top: 115px; font-size: 14px; }

.fixed{
    position: fixed;
    right: 0;
    left: 110px;
    max-width: calc(50% - 55px);
    top: 90px;
    max-height: 600px;
    overflow-y: scroll;
}

.block { background: #fff; padding: 25px; float: left; width: 100%; margin: 20px 0px;box-shadow: 0 2px 9px 0 rgba(0,0,0,0.03); }
#app footer { padding: 40px 0; }
.state { font-weight: 700; }
.state.finished { color: green !important; }
.state.rozpracovane{ color: orange !important; }
.actions a{
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 7px;
    background: #edf1f5;
    margin-right: 10px;
    text-decoration: none;
    border-radius: 6px;
}
.actions a:hover,.actions a:focus{
    background: #2DAFE6;
    color: #fff;
    text-decoration: none;
}
.file { background: #fff; min-height: 200px; border: 1px solid #E9EFF4; border-radius: 5px; text-align: center; position: relative;margin-bottom: 20px; }
.file:hover { border: 1px solid #DCE0E1; box-shadow: 0 0 20px 0 rgba(202, 202, 202, 0.50); }
.file:hover a span { text-decoration: none; color: #2F353C; }
.files .file a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.files .file img { display: block; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -80%); }
.files .file span { display: block; margin: 0 auto; position: absolute; bottom: 15%; width: 100%; font-size: 13px; }
.miniFile{
    position: relative;
    display: block;
    width: 100%;
    float: left;
    border-bottom: 1px solid #E9EFF4;
    padding: 10px 0px;
}
.miniFile:last-child{
    border-bottom: 1px solid transparent;
    padding: 10px 0px;
}
.miniFile a.linkFile{
    float: left;
}
.miniFile img{
    margin-right: 10px;
}
.miniFile .actions{
    margin-left: 10px;
    float: left;
    display: inline-block;
    line-height: 30px;
}
.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  padding:8px; 
  color:#ccc;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #2DAFE6;
}

.chooseAttribute{
    float: left;
    height: 230px;
    width: 100%;
    background: #fff;
    overflow-y: scroll;
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #E9EFF4;
    border-radius: 6px;
}

.chooseAttribute::-webkit-scrollbar-track
{
    background-color: #E9EFF4;
}

.chooseAttribute::-webkit-scrollbar
{
    width: 6px;
    background-color: #E9EFF4;
}

.chooseAttribute::-webkit-scrollbar-thumb
{
    background-color: #2DAFE6;
}

/*image gallery*/
.image-checkbox img{
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 3px solid #fff;
    margin-bottom: 0;
    outline: 0;
}

.image-checkbox input[type="checkbox"] {
    display: none;
}

.image-checkbox-checked img{
    border-color: #2DAFE6;
}

.image-checkbox-checked img:after { content: ""; width: 36px; height: 36px; background: #2DAFE6 url('../img/icons/checked.svg') no-repeat center center; position: absolute; top: 0; right: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }



.chooseAttribute > div {
    width: 100px;
    overflow: hidden;
}

.chooseAttribute label {
    font-size: 11px;
    text-transform: inherit;
}
.chooseAttribute label .description{
    margin-left: 5px;
}

.image-checkbox .picture:after { content: ""; width: 26px; height: 26px; background: #2DAFE6 url('../img/icons/checked.svg') no-repeat center center; position: absolute; top: 0; right: 0; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); opacity: 0; }
.image-checkbox.image-checkbox-checked .picture:after { content: ""; width: 26px; height: 26px; background: #2DAFE6 url('../img/icons/checked.svg') no-repeat center center; position: absolute; top: 0; right: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }

.standardItem{
    margin-bottom: 20px;
}
.standardItem img{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 3px solid #fff;
}
.standardItem span.description{
    position: relative;
    margin-top: 10px;
    font-size: 12px;
    display: block;
}

.button{float: left;}
.button input[type="radio"] { display: none; }
.button input[type="radio"] + label { position: relative; float: left; }
.button input[type="radio"] + label span.picture { border: 3px solid #fff; border-radius: 6px; overflow: hidden;position: relative; display: inline-block; }
.button input[type="radio"] + label span.description { position: relative; margin-top: 10px; font-size: 12px; display: block; }
.button input[type="radio"] + label span.picture img { max-width: 100%; height: auto; }
input[type="radio"]:checked + label span.picture { border: 3px solid #2DAFE6; }
input[type="radio"] + label span.picture:after { content: ""; width: 36px; height: 36px; background: #2DAFE6 url('../img/icons/checked.svg') no-repeat center center; position: absolute; top: 0; right: 0; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); opacity: 0; }
input[type="radio"]:checked + label span.picture:after { content: ""; width: 36px; height: 36px; background: #2DAFE6 url('../img/icons/checked.svg') no-repeat center center; position: absolute; top: 0; right: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }

.reveal-if-active {
  display:none;
margin-top: 25px;
    border-top: 1px solid #E9EFF4;
    padding-top: 20px;
}




#filterArea{
background: #FFFFFF;
border: 1px solid #E9EFF5;
border-radius: 4px;
padding: 0px 20px;
}
#filterArea input{
    border:none;
    padding: 17px 10px;
    box-shadow: none;
}

#filterArea .filterOptions{
    font-weight: 700;
    border-left:1px solid #E9EFF5;
    padding: 17px 10px;
    font-size: 12px;
}

#filterArea .filterOptions div{
    font-weight: 300;
    margin-left: 35px;
    display: inline;
    position: relative;
}
#filterArea .filterOptions .filterItem span{
    position: absolute;
    width: 14px;
    height: 14px;
    left: -20px;
    top: 50%;
    background: #FFFFFF;
    border: 1px solid #DCE0E1;
    transform: translate(0%,-50%);
}

#filterArea .filterOptions .filterItem.active span:after{
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    left: 50%;
    top: 50%;
    background: #2BAFE6;
    transform: translate(-50%,-50%);
}




aside#loading { width: 100%; height: 100%; top: 0; left: 0; position: fixed; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); z-index: 999; background-color: #fff; -webkit-animation: loading 1s ease 0.4s forwards; -moz-animation: loading 1s ease 0.4s forwards; -ms-animation: loading 1s ease 0.4s forwards; animation: loading 1s ease 0.4s forwards }
@-webkit-keyframes loading {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
@-moz-keyframes loading {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
@-ms-keyframes loading {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
@keyframes loading {
    0% { opacity: 1 }
    100% { opacity: 0 }
}

aside#no-mobile{
    display: none;
}

/* RESPONSIVE */

@media only screen and (max-width: 768px) {
    #wrapper{
        display: none !important;
    }
    aside#no-mobile{
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        background: #fff;  
        text-align: center; 
        transform: translateY(50%);
        display: block; }
        .nav-tabs .nav-link {
    zoom: 0.6;
}

}



.interaction{
    display: block;
    padding-left: 70px;
    background: url(../img/icons/interaction-ico.svg);
    background-position: 5px center;
    background-size: 45px;
    background-repeat: no-repeat;
    line-height: 30px
}
.interaction span{
    font-weight: 400;
    color: #2DAFE6;
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #E9EFF4;
}
.interaction hr{
    margin: 5px 0px;
}
.interaction.changed {
  animation: shake .82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}