@import url('https://fonts.googleapis.com/css?family=Tajawal&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+128&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap');

body
{
   /*font-family: 'Noto Nastaliq Urdu', sans-serif; */
         font-family: 'Tajawal' , sans-serif;
    }
    html, body {
  height: 100%;
  margin: 0;
  font-size:120%;
}
.barcode
{
 
 
 
 
    display: none;
    padding-top: -20px;
       overflow: hidden;
       
}
.s{display:block}
.h{display:none}

h5{text-align:center;font-weight:bold;}
 .blink-2
{
    padding: 15px;
    background-color: #F5F5F5;
    border: 1px solid #ffffff;
    margin: 0px;
    font-size: small;
    cursor:pointer;
    font-weight:bold;
}
.blink-2:hover {-webkit-animation:blink-2 .9s both;animation:blink-2 .9s both
                -webkit-animation:shadow-drop-2-tb .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-2-tb .3s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes blink-2{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}@keyframes blink-2{0%{opacity:1}50%{opacity:.2}100%{opacity:1}


}

@-webkit-keyframes shadow-drop-2-tb{0%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-box-shadow:0 0 0 0 transparent,0 0 0 0 transparent;box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}100%{-webkit-transform:translateZ(50px);transform:translateZ(50px);-webkit-box-shadow:0 -12px 20px -12px rgba(0,0,0,.35),0 12px 20px -12px rgba(0,0,0,.35);box-shadow:0 -12px 20px -12px rgba(0,0,0,.35),0 12px 20px -12px rgba(0,0,0,.35)}}@keyframes shadow-drop-2-tb{0%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-box-shadow:0 0 0 0 transparent,0 0 0 0 transparent;box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}100%{-webkit-transform:translateZ(50px);transform:translateZ(50px);-webkit-box-shadow:0 -12px 20px -12px rgba(0,0,0,.35),0 12px 20px -12px rgba(0,0,0,.35);box-shadow:0 -12px 20px -12px rgba(0,0,0,.35),0 12px 20px -12px rgba(0,0,0,.35)}}

.Touch-Page
{
    background-image: url("images/bg.jpg");
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
}
    .Touch-Login-Page
    {
        background-color:transparent;
        }
        
        .footer
{
    width: 100%;
    position: fixed;
    bottom: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
    color: #C0C0C0;
      font-family: 'Tajawal' , sans-serif;
}
        .QR-Div
        {
 position:fixed;
  right:70px;
  bottom:20px;
            }
          .QR-Div img
          {
box-shadow: 8px 8px 10px #000000;
              
              }  
            
.Touch-Container
{
    width:50%;
    margin-top:50px;
  height:70%;
  position:fixed;
  left:0px;
  top:0px;
    }
    
    .TouchInput
{
    background-color: #b2b3ab;
    border-width: 1px;
    border-color: #363636;
    color: #001500;
    padding: 10px;
    border-radius: 2px;
    font-family: 'Tajawal' , sans-serif;
    font-weight: bold;
    font-size: 110%;
      text-align: center;
      margin:10px;
      box-shadow: 2px 2px 10px #000000;
}
        
          .TouchInput option
{
    font-size: 110%;
    vertical-align: middle;
    text-align: center;
    line-height: 200%;
    
}

         .TouchButton
    {
       background-color:#4CAF50;
    border-width: 1px;
    border-color: #363636;
    color: #ffffff;
    padding: 10px;
    border-radius: 2px;
    font-family: 'Tajawal' , sans-serif;
    font-weight: bold;
    font-size: 110%;
      text-align: center;
         box-shadow: 2px 2px 10px #000000;
        
        }
        
    
         .TouchNavigator
{
    margin: 20px;
    background-color: #1c1d00;
    border: 2px solid #eab833;
 
    color: #eab833;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Tajawal' , sans-serif;
  
    height: 300px;
    display: block;
    text-decoration: none;
    line-height: 40px;
    font-weight: bold;
    font-size: large;
}