/* Primary Styles */
*, *::before, *::after {
  // box-sizing: border-box;
}

body {
   font-family: sans-serif;
   font-size: 1em;
   color: #333;
}

h1 {
  font-size: 1.4em;
}

em {
   font-style: normal;
}

a {
   text-decoration: none;
   color: inherit;
} 


@keyframes slideInTop {
  0% {
    opacity:0;
    transform: translateY(-100%);
  }
  100% {
    opacity:1;
    transform: translateY(0);
  }
}

@keyframes fade {
  0% {
    opacity:1;
    //transform: translateY(-100%);
  }
  50% {
    opacity:0;
    //transform: translateY(0);
  }
  100% {
    opacity:1;
    //transform: translateY(0);
  }
}

/* Layout */
.s-layout {
   display: flex;
   width: 100%;
   min-height: 100vh;
}

.s-layout__content {
   //display: flex;
   //justify-content: center;
   //align-items: center;
   //flex: 1;
   //z-index:-1000;
   margin-top: 100px;
   margin-left:15em;
   width:100%;
   margin-bottom:4rem;
   //animation: 1.5s ease-in 0s 1 slideInLeft;

}

/* Sidebar */
.s-sidebar__trigger {
   z-index: 900;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 4em;
   background: #192b3c;
}

.s-sidebar__trigger > i {
   display: inline-block;
   margin: 1em 0 0 1em;
   color: #fff;
   font-size: 3em;
}

.s-sidebar__nav {
   position: fixed;
   top: 0;
   left: 0;
   overflow: hidden;
   transition: all .3s ease-in;
   width: 15em;
   height: 100%;
   background: #243e56;
   color: rgba(255, 255, 255, 0.7);
   z-index:1000;
}

.s-sidebar__nav:hover,
.s-sidebar__nav:focus,
.s-sidebar__trigger:focus + .s-sidebar__nav,
.s-sidebar__trigger:hover + .s-sidebar__nav {
   left: 0;
}

.s-sidebar__nav ul {
   position: absolute;
   font-size:1em;
   top: 4em;
   left: 0;
   margin: 0;
   padding: 0;
   width: 15em;
   height:10em;
}

.s-sidebar__nav ul li {
   width: 100%;
}

.s-sidebar__nav-link {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 4em;
}

.s-sidebar__nav-link em {
   position: absolute;
   top: 50%;
   left: 4em;
   transform: translateY(-50%);
}

.s-sidebar__nav-link:hover {
   background: #4d6276;
}

.s-sidebar__nav-link > i {
   position: absolute;
   top: 0;
   left: 0;
   display: inline-block;
   width: 4em;
   height: 4em;
}

.s-sidebar__nav-link > i::before {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


.selected{
//background-color: #72FF6A;
opacity:0.5;
transform: scale(0.8);
transition: 0.3s ease-out;
-moz-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
transition: opacity 0.2s;
} 

.ok{
position:absolute;
width:100%;
height:auto;
text-align:center;
font-weight:900;
color:green !important;
font-size:7em;
opacity:0;
transition: .3s ease;
}
.selected .ok{
opacity:1;
}  
.hidden{
  position:relative;
  display:none;
  opacity:0;
}
.header {
  z-index:900;
  color:white;
  position:fixed;
  top:0;
  right:0;
  padding-top:0.4em;
  padding-right:0.4em;
  font-size:2em;
}
.rows{
  position:relative;
  width:100%;
  text-align:center;
  font-size:1.2em;
  font-weight:bold;
  color:#243e56;
}
.item {
  min-width:150px;  
  width:17.5em;
  position: relative;
  float:left;
  border: dashed;
  border-width: 2px 3px;
  border-radius: 40px;
  border-color: #0094A6;
  margin-left:1%;
  margin-top:1%;
  padding:5px;
  transition: 0.3s ease-out;
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 0.7s ease-in 0s 1 slideInTop;
}

.name{
  max-width:100%;
  text-align:center;
  font-size: 1.2em;
  color:#0094A6;
  white-space: nowrap;
  overflow: hidden;
  width: 15em;
  text-overflow: ellipsis;
}
.ean{
  margin-top:5px;
  text-align:center;
  font-size: 90%;
  color: #8F8F8F;
}
.item img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 60%;
  height: auto;
  opacity:1;
}
.calc{
  z-index:900;
  //display:block;
  position: fixed;
  bottom:0;
  left:15em;
  width:100%;
  height:3em;
  background: #192b3c;
  //font-size:2em;
}
#calcOK {
  //display:block;
  position:relative;
  float:left;
  color:white;
  font-size:2em;
  //padding-right:0.7em;
  width:26%;  
  height:100%;
  text-align:center;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
.calc #calcOK i {
  color:white;
  color:lawngreen;
}
.calc #calcOK span{
  font-size:0.5em;
  padding-left:0.7em;
}
#calcNO{
  //display:block;
  position:relative;
  float:left;
  color:white;
  font-size:2em;
  //padding-left:0.8em;
  width:26%;  
  height:100%;
  text-align:center;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
.calc #calcNO i {
  color:white;
  color:orangered;
}
.calc #calcNO span{
  font-size:0.5em;
  padding-left:0.7em;
}
#calcToggle {
  position:relative;
  float:left;
  width:40%;
  text-align:right;
  height:100%;
}

//////prepinac/////
.calc input {
  position: absolute;
  left: -9999px;
}

label {
    top: 0.3em;
    width: 100%;
    width:8em;
    display: block;
    position: relative;
    float:left;
    //margin: 20px;
    //margin-right:30%;
    padding: 8px 5px 8px 30px;
    border: 3px solid #fff;
    border-radius: 100px;
    color: #fff;
    //background-color: #192b3c;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, box-shadow .2s;
}  

label::before {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 10px;
    width: 20px;
    border: 3px solid #fff;
    border-radius: 20px;
    transition: background-color .2s;
}

label:first-of-type {
  transform: translateX(-40px);
}

label:last-of-type {
  transform: translateX(40px);
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: orangered;
}

input:checked + label::before {
  background-color: #fff;
}

@media (max-width: 600px),(orientation: portrait) {
   .s-layout__content {
      margin-left: 0em;
      margin-top: 10em;
	  margin-bottom:10rem;
   }
   
  
   .s-sidebar__trigger {
     // display: none;
     height: 8em;
     
   }
   
   
   .s-sidebar__nav {
     // width: 15em;
   }
   
   .s-sidebar__nav ul {
      top: 6em;
      width: 25em;
      font-size:1.7em;
   }
    .s-sidebar__nav {
      //width: -15em;
      left: -15em;
   }
   
   .s-sidebar__nav:hover,
   .s-sidebar__nav:focus,
   .s-sidebar__trigger:hover + .s-sidebar__nav,
   .s-sidebar__trigger:focus + .s-sidebar__nav {
      width: 25em;
    }
    .item {
  min-width:150px;
  width:95%;
  height:10em;
  position: relative;
  float:left;
  border: dashed;
  border-width: 2px 3px;
  border-radius: 40px;
  border-color: #0094A6;
  margin-left:1%;
  margin-top:1%;
  padding:5px;
}
 .name{
  max-width:100%;
  font-size: 3em;
  text-align:center;
  margin-top:0.8em;
  color:#0094A6;
  white-space: nowrap;
  overflow: hidden;
  width: 15em;
  text-overflow: ellipsis;
}
 .ean{
  margin-top:0.5em;
  font-size: 2em;
  text-align:center;
  color: #8F8F8F;
}
.item img{
  margin-left:1.5em;
  float:left;
  max-width: 10em;
  height: auto;
}

.header {
  padding-top:0.9em;
  font-size:3em;
}
.calc{
  left:0em;
  height:8em;  
}
#calcOK{
  font-size:5em;
  width:30%;
  //margin-left:1em;
}
#calcNO{
  font-size:5em;
  width:30%;
  //margin-left:1em;
}
#calcToggle {
	font-size:2rem;
}
#calcToggle label {
	top:2rem;
}
#calcToggle label::before {
	width:1.8rem;
	top:8px;
	bottom:8px;
}
.calc span{
  display:none;
}
#OnTopButton {
    margin: 30px;
  }
} 

//////



.content {
  width:70%;

  background-color: #72FF6A;
}
}