* {
   margin: 0;
   padding: 0;

}

@font-face {
   font-family: "Orbitron";
   src: url("../webfonts/Orbitron-Regular.ttf");
}
html{
   height: 100%;
}
body {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: darkcyan ;
   /*overscroll-behavior: contain; Disabling Pull-to-Refresh*/
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -khtml-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
   -webkit-tap-highlight-color:rgba(0,0,0,0);
}




.container {
   display: flex;
   justify-content: center;
   color: white;
   width:100%;
   height: 100%;
}

.scan-container {
   display: flex;
   width:100%;
   height: 100%;
}
div.scan-output {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: white;
  width:100%;
  height: 100%;
}



.scan-option {
   display: flex;
   flex-direction: column;
   background-color: white;
   width: 30%;
   height: 100%;

}

div.events {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: white;
   width:70%;
   height: 100%;
}
.scan-container > div.scan-output > p {
   font-size: 36px;
   text-align: center;
}
.time {
   font-family: 'Orbitron', sans-serif;
   font-size: 60px;
 }

 .scan-output > i {
   font-size: 76px;
   
}

.scan-output > img {
   width: 450px;
   margin-top: 60px;
}


.scan-option .option{
   background: #fff;
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 0 10px;
   box-sizing: border-box;
   transition: all 0.3s ease;
   position: relative;
 }
 .scan-option .option > i {
  font-size: 36px;
  color: #808080;
  position: absolute;
  top: 10px;
}

 .scan-option .option .dot{
   height: 50px;
   width: 50px;
   background: #d9d9d9;
   border-radius: 50%;
   position: relative;
   margin-right: 10px;
 }
 .scan-option .option .dot::before{
   position: absolute;
   content: "";
   top: 8px;
   left: 8px;
   width: 34px;
   height: 34px;
   background: #28a745 ;
   border-radius: 50%;
   opacity: 0;
   transform: scale(1.5);
   transition: all 0.3s ease;
 }
 input[type="radio"]{
   display: none;
 }
 .scan-option #nfc:checked:checked ~ .option-1,
 .scan-option #pin:checked:checked ~ .option-2{
   border-color: #28a745 ;
   background: #28a745 ;
 }
 .scan-option #nfc:checked:checked ~ .option-1 .dot,
 .scan-option #pin:checked:checked ~ .option-2 .dot{
   background: #fff;
 }
 .scan-option #nfc:checked:checked ~ .option-1 .dot::before,
 .scan-option #pin:checked:checked ~ .option-2 .dot::before{
   opacity: 1;
   transform: scale(1);
 }
 .scan-option .option span{
   font-size: 36px;
   color: #808080;
 }
 .scan-option #nfc:checked:checked ~ .option-1 span,
 .scan-option #pin:checked:checked ~ .option-2 span,
 .scan-option #nfc:checked:checked ~ .option-1 i,
 .scan-option #pin:checked:checked ~ .option-2 i{
   color: #fff;
 }

.btn {
  border: none;
  background: transparent;
  box-sizing: border-box;
  font-size: 36px;
  width:100%;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 20px;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  color: #fff;
  
}
.btn > i{
   margin-right: 15px;
}

.btn-in {
  background-color: #009efb;
  color: #fff;
  height: 100%;
  width: 100%;
}

.btn-out {
  background-color: #dc3545;
  color: #fff;
  height: 100%;
  width: 100%;
}

.btn-back {
   background-color: #009efb;
   color: #fff;
   position: absolute;
   height: 60px;
   padding: 0;
   top: 0;
   margin: 0;
 }
.qr-reader {
  display: flex;
  flex-direction: column;
  height: 0;
  width: 0;
  
}
 #reader {
   transform: scaleX(-100%);
   width:50vw; 
  margin-top: 125px;
   
 }

.keyboard {
  display: flex;
  flex-direction: column;
  width: 50%;

}

.pin-output {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.pin-output > input#pin {
  width: 100%;
  height: calc(100% - 60px);
  background-color: darkcyan; /*#14C38E;*/
  color: white;
  font-size: 128px;
  text-align: center;
  border: none;
  pointer-events: none;
}
.key-row {
  display: flex;
  height: 100%;
}
.key-row > button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 48px;
  font-family: 'Titillium Web', sans-serif;
  /*font-weight: 600;*/
}
.key-row > button#send {
  color: green;
}
.key-row > button#del_char {
  color: #dc3545;
}

.swal2-actions > button {  
  font-size: 1.5em !important;
}


 @media only screen and (orientation: Portrait) { /*orientation: Portrait*/
  .container {
    flex-direction: column;
  }
  .scan-container {
    flex-direction: column;
  }
  .keyboard {
    width: 100%;
    height: 100%;
  }
  .pin-output {
    width: 100%;
    height: 100%;
  }
  .scan-option {
    width: 100%;
    height: 30%;
  }
  .scan-option .option > i {
    left: 10px;
    top: auto;
  }
  div.events {
    width: 100%;
    height: 70%;
  }


  
}