body {
    /*background-color:yellow;*/
}

#ac,#outer,#card,#botto{
    margin-left: 30%;
    margin-top: 2%;
}

#outer
{
    position:absolute ;
    width:340px;
    height:240px;
    background-color:silver;
    top:110px;
    left:7px;
    border-style:double ;
    border-top-left-radius:10px;
    
    border-top-right-radius:10px;
    
    border-color:black;
    border-width:5px;
    border-style:outset;
    text-shadow:0.5px 0.5px black;
}

#acname
{
    text-transform:uppercase ;
    font-weight:bold;
    color:black;
    position:absolute ;
    
    
    top:40px;
    left:146px;
    font-size:12.5px;
    text-shadow:1px -1px 1px black;
    
    
    
}



#de
{    position:absolute ;
    font-weight:bold;
    text-transform:uppercase ;
    font-size:15px;
    top:30px;
    left:5px;
    border-color:white;
    border-radius:3px;
    text-shadow:0.5px 0.5px black;
}

#b1
{
    height:14px;
    position:absolute ;
    width:4.5px;
    background-color:white;
    border-color:black;
    border-width:2px;
    top:60px;
    left:5px;
    
    border-style:solid;
    
    
}
#b2
{height:14px;
    position:absolute ;
    width:4.5px;
    background-color:white;
    border-color:black;
    border-width:2px;
    top:120px;
    left:5px;
    border-style:solid;
}
#b3
{
    height:14px;
    position:absolute ;
    width:4.5px;
    background-color:white;
    border-color:black;
    border-width:2px;
    top:180px;
    left:5px;
    border-style:solid;
}
#user23
{
    font-weight:bold;
    color:white;
    position:absolute ;
    left:78px;
    top:50px;
    font-size:13px;
    text-shadow:0.5px -1px 1px black;
    text-shadow:0.5px 0.5px black;
    
}
#b4
{
    height:14px;
    position:absolute ;
    width:4.5px;
    background-color:white;
    border-color:black;
    border-width:2px;
    top:180px;
    right:5px;
    border-style:solid;
}
#b5
{
    height:14px;
    position:absolute ;
    width:4.5px;
    background-color:white;
    border-color:black;
    border-width:2px;
    top:120px;
    right:5px;
    border-style:solid;
}
#b6
{
    height:14px;
    position:absolute ;
    width:4.5px;
    background-color:white;
    border-color:black;
    border-width:2px;
    top:60px;
    right:5px;
    border-style:solid;
}
#camera
{
    width:15px;
    position:absolute ;
    height:15px;
    background-color:lightgrey;
    border-radius:50%;
    left:150px;
    top:8px;
    border-style:double ;
}


.screen{
    
    width: 260px;
    height: 160px;
    position:absolute ;
    background-color:lightblue;
    left:25px;
    top:30px;
    bottom:30px;
    right:30px;
    border-width:15px; 
border-top-style:inset;
border-top-color:black;
border-bottom-style:outset;
border-bottom-color:black;
border-left-style:inset;
border-left-color:black;
border-right-style:outset;
border-right-color:black;
    }
.well1
{
    font-weight:bold;
    color:Black;
    position:absolute ;
    font-family:'playfair display',serif;
    left:15px;
    text-transform:uppercase ;
    top:8px;
    text-shadow:0.5px -1px 1px black;
}

.well2
{
    font-weight:bold;
    color:white;
    position:absolute ;
    font-family:'playfair display',serif;
    left:29px;
    top:30px;
    text-shadow:0.5px 0.5px white;
}
.pass,.pass2
{
    height:10px;
    position:absolute ;
    width:80px;
    top:80px;
    left:80px;
    border-radius:5px;
    text-shadow:0.5px 0.5px black;
    border-style:solid;
    border-color:black;
}
#btne1,#btne2
{
     height:20px;
    position:absolute ;
    width:40px;
    top:110px;
    left:100px;
    font-size:8px;
    text-align:center;
    font-weight:bold;
    text-shadow:0.5px 0.5px black;
    maxlength:8;
}
#com1
{
    text-transform:uppercase ;
    font-weight:bold;
    color:black;
    position:absolute ;
    
    
    top:216px;
    left:149px;
    font-size:10px;
    text-shadow:1px -1px 1px black;
    
    
}
#botto
{
    position:absolute ;
    width:340px;
    left:7px;
    background-color:darkgrey;
    height:170px;
    top:410px;
    border-style:inset;
    border-width:5px;
    
    
    border-color:black;
}
#cash
{
    position:absolute ;
    width:130px;
    height:15px;
    background-color:grey;
    top:25px;
    left:101px;
    border-color:black;
    border-width:5px;
    border-style:outset;
    
}
#wdr
{
    position:absolute ;
    width:60px;
    height:17px;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    left:10px;
    top:15px;
    text-shadow:0.5px 0.5px black;
}
#dep
{
    position:absolute ;
    width:60px;
    height:17px;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    left:10px;
    top:75px;
    text-shadow:0.5px 0.5px black;
}
#mst
{
    position:absolute ;
    width:60px;
    height:24px;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    left:10px;
    top:130px;
    text-shadow:0.5px 0.5px black;
}
#det

{
    position:absolute ;
    width:60px;
    height:17px;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    right:10px;
    top:15px;
    text-shadow:0.5px 0.5px black;
}
#otr
{
    position:absolute ;
    width:60px;
    height:17px;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    right:10px;
    top:75px;
    text-shadow:0.5px 0.5px black;
}
#cpin
{
    position:absolute ;
    width:60px;
    height:24px;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    right:10px;
    top:130px;
    text-shadow:0.5px 0.5px black;
}
#back,#back2,#back3

{
    bottom:5px;
    position:absolute ;
    left:100px;
    height:20px;
    width:40px;
    text-align:center;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    text-shadow:0.5px 0.5px black;
}
#back4,#back9

{
    bottom:5px;
    position:absolute ;
    left:100px;
    height:20px;
    width:40px;
    text-align:center;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    text-shadow:0.5px 0.5px black;
}
#back6,#back7,#back5

{
    bottom:5px;
    position:absolute ;
    left:100px;
    height:20px;
    width:40px;
    text-align:center;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    text-shadow:0.5px 0.5px black;
}

#witdrw,#depst
{
    position:absolute ;
    top:42px;
    font-size:14px;
    left:30px;
    text-shadow:0.5px 0.5px black;
    
}
#witdrwno,#depstno
{
    position:absolute ;
    top:3px;
    width:65px;
    height:8px;
    left:119px;
    text-shadow:0.5px 0.5px black;
}
#dep10
{
    position:absolute;
    top:40px;
    font-weight:bold;
    font-size:15px;
    text-shadow:0.5px 0.5px black;
    left:5px;
    
}

#wdt7
{
     position:absolute;
    top:10px;
    font-weight:bold;
    font-size:15px;
    left:150px;
    text-shadow:0.5px 0.5px black;
}
#wdt5
{
    position:absolute;
    top:70px;
    font-weight:bold;
    font-size:15px;
    left:150px;
    text-shadow:0.5px 0.5px black;
}
#wdt3
{
      position:absolute;
    top:40px;
    font-weight:bold;
    font-size:15px;
    left:150px;
    text-shadow:0.5px 0.5px black;
}
#wdt4,#dep12
{
    position:absolute;
    top:70px;
    font-weight:bold;
    font-size:15px;
    text-shadow:0.5px 0.5px black;
    left:13px;
    
}


#dep8
{
     position:absolute;
    top:10px;
    font-weight:bold;
    font-size:15px;
    text-shadow:0.5px 0.5px black;
    left:42px;
}

#btns2,#bt3
{
    position:absolute ;
    top:30px;
    width:50px;
    height:22px;
    font-size:10px;
    text-align:center ;
    font-weight:bold ;
    background-color:lightgrey;
    left:65px;
    text-shadow:0.5px 0.5px black;
}
#back5,#back8

{
    
    position:absolute ;
    left:70px;
    height:20px;
    width:40px;
    top:85px;
    text-align:center;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    text-shadow:0.5px 0.5px black;
}


#backs

{
    bottom:40px;
    position:absolute ;
    left:105px;
    height:20px;
    width:40px;
    text-align:center;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    text-shadow:0.5px 0.5px black;
}
#pinwrg1
{
    position:absolute ;
    font-weight:bold;
    left:80px;
    text-shadow:0.5px 0.5px black;
}
#pinwrg6
{
    position:absolute ;
    font-weight:bold;
    left:40px;
    text-shadow:0.5px 0.5px black;
}
#pinwrg2
{
    position:absolute ;
    font-weight:bold;
    left:65px;
    top:30px;
    text-shadow:0.5px 0.5px black;
}
#bac3,#bac4

{
    bottom:5px;
    position:absolute ;
    left:100px;
    height:20px;
    width:40px;
    text-align:center;
    background-color:lightgrey;
    font-weight:bold;
    font-size:8px;
    text-shadow:0.5px 0.5px black;
}

#ac
{
    height:80px;
    position:absolute ;
    width:300px;
    background-color:brown;
    
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    
    
    border-bottom-right-radius:10px;
    top:1px;
    left:30px;
    border-width:5px;
    border-top-style:inset;
border-top-color:black;
border-bottom-style:outset;
border-bottom-color:black;
border-left-style:inset;
border-left-color:black;
border-right-style:outset;
border-right-color:black;
box-shadow:10px 10px grey; 
    
}

#temp
{
    font-family: 'Orbitron';
    position:absolute ;
color:white;
 left:260px;
 font-weight:bold;
 font-size:10px;
 text-shadow:0.5px 0.5px white;
 top:10px;
}
#card
{
    position:absolute ;
    width:340px;
    height:40px;
    background-color:darkgrey;
    top:360px;
    left:7px;
    border-color:black;
    border-width:5px;
    border-style:outset;
}
#card2
{
    position:absolute ;
    width:70px;
    height:7px;
    background-color:grey;
    top:4px;
    left:5px;
    border-color:black;
    border-width:5px;
    border-style:outset;
    overflow:hidden;
}

.one
{
    height:10px;
    position:absolute ;
    width:280px;
    background-color:white;
    top:78px;
    left:6px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-style:solid;
    border-bottom-color:black;
    border-bottom-width:3px;
    
}


.one { 
  transform: rotateX(40deg);
  animation: one 2s infinite;
  animation-direction: alternate;
}
@keyframes one {
  0% {
    transform: rotateX(30deg);
  }
  50%{
      transform: rotateX(50deg);
  }
  
  100% {
    transform: rotateX(70deg);
  }
}


#lens
{
    width:8px;
    position:absolute ;
    height:8px;
    background-color:black;
    border-radius:50%;
    left:3.5px;
    top:3.5px;
    animation:two 6s infinite ;
    transform: rotateY (40deg);
  
  animation-direction: alternate;
    
    
}
@keyframes two
{
    0%
    {
        transform:rotateY (30deg);
    }
    20% {
    transform: rotateX(30deg);
  }
  
  
    40%{
      transform: rotateY(50deg);
  }
  50%{
      transform: rotateX(50deg);
  }
  
  75% {
    transform: rotateX(70deg);
  }
    100%
    {
        transform:rotateY (30deg);
    }
}






#author
{
    position:absolute ;
    font-weight:bold;
    left:100px;
    bottom:10px;
    text-shadow:0.5px 0.5px black;
}
#credit
{
    position:absolute ;
    width:60px;
    height:16px;
    top:7px;
    left:11.3px;
    border-color:black;
    background-color:blue;
    border-width:85px;
    border-style:solid;
    border-width:3px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    
}
#indictr
{
    height:25px;
    width:90px;
    background-color:green;
    left:120px;
    position:absolute;
    top:6px;
    border-style:solid;
    border-width:2.5px;
    animation: clr 0.5s infinite;

}
@keyframes clr {
  0% {background-color:#7CFC00 ;}
  
  100% {background-color: grey;}
}


#inf
{
    position:absolute;
    left:49px;
    text-shadow:0.5px 0.5px black;
    font-weight:bold;
    color:white;
}
#l4
{
    position:absolute;
    left:70px;
    bottom:9px;
    text-shadow:0.5px 0.5px black;
    font-weight:bold
    color:white;
}

#round1
{  width:10px;
  height:10px;
  border-radius:50%;
  background:blue;
  animation: ball 0.7s infinite ;
  
  position:absolute;
  
  left:3.1cm;
  margin-top:75px;
}
#round3
{  width:10px;
  height:10px;
  border-radius:50%;
  background:red;
  animation: ball 0.6s infinite ;
  
  position:absolute;
  
  left:2.7cm;
 margin-top:75px;
}

#round2
{  width:10px;
  height:10px;
  border-radius:50%;
  background:green;
  animation: ball 0.9s infinite ;
  
  position:absolute;
  
  left:3.9cm;
  margin-top:75px;
}
#round4
{  width:10px;
  height:10px;
  border-radius:50%;
  background:yellow;
  animation: ball 0.8s infinite ;
  
  position:absolute;
  
  left:3.5cm;
  margin-top:75px;
}
@keyframes ball 
{
    0% 
{
top: 0;
}
10
{
    top:0.10cm;
}
20
{
    top:0.16cm;
}
30
{
    top:0.22cm;
}
    40% 
{
    top:0.28cm;
}
    50% 
{
top: 0.34cm;
    }
    60% 
{
top: 0.28cm;  
        }
    70%
 {
 top:0.22cm; 
        }
    80% 
{
        top:0.16cm;        
        
    }
90%
{
    top:0.10cm;
}
    100% 
{
top: 0;
        
    }
}
#loading
{
    width: 260px;
    height: 160px;
    position:absolute ;
    background-color:black;
    left:0.01px;
    top:0.01px;
    bottom:0.01px;
    right:0.01px;
    overflow:hidden;
}
#help1
{
    top:60px;
    position:absolute ;
    left:159px;
    border-radius:50%;
    font-size:8px;
    font-weight:bold;
    background-color:grey;
    text-shadow:0.5px 0.5px black;
    border-style:solid;
    border-width:3px;
    border-color:black;
}

#err1
{
    position:absolute ;
    font-weight:bold;
    font-size:15px;
    top:20px;
    left:79px;
    border-color:white;
    border-radius:3px;
    text-shadow:0.5px 0.5px black;
    overflow:hidden;
}
#erp2,#err4
{
    position:absolute ;
    font-weight:bold;
    font-size:15px;
    top:50px;
    left:5px;
    border-color:white;
    border-radius:3px;
    text-shadow:0.5px 0.5px black;
    overflow:hidden;
}
#err5
{
    position:absolute ;
    font-weight:bold;
    font-size:15px;
    top:20px;
    left:20px;
    border-color:white;
    border-radius:3px;
    text-shadow:0.5px 0.5px black;
    overflow:hidden;
    
}
#err6
{
    position:absolute ;
    font-weight:bold;
    font-size:15px;
    top:70px;
    left:20px;
    border-color:white;
    border-radius:3px;
    text-shadow:0.5px 0.5px black;
    overflow:hidden;
    
}
#final1
{
    position:absolute ;
    text-transform:uppercase;
    font-weight:bold;
    font-size:25px;
    top:5px;
    left:60px;
    text-shadow:1px -1px 1px black;
    color:gold;
}
#final3
{
    position:absolute ;
    font-weight:bold;
    font-size:25px;
    top:45px;
    left:20px;
    color:gold;
}
#final2
{
    position:absolute ;
    font-weight:bold;
    font-size:25px;
    font-family: 'Calligraffitti',cursive;
    top:80px;
    left:60px;
    text-shadow:0.5px 0.5px black;
    color:pink;
}
#final
{
    width: 260px;
    height: 160px;
    position:absolute ;
    background-color:black;
    left:0.01px;
    top:0.01px;
    bottom:0.01px;
    right:0.01px;
    overflow:hidden;
}

#wdt6
{
     position:absolute;
    top:10px;
    font-weight:bold;
    font-size:15px;
    text-shadow:0.5px 0.5px black;
    left:53px;
}
#wdt2
{
    position:absolute;
    top:40px;
    font-weight:bold;
    font-size:15px;
    text-shadow:0.5px 0.5px black;
    left:12px;
    
}
#dep9
{
     position:absolute;
    top:10px;
    font-weight:bold;
    font-size:15px;
    left:135px;
    text-shadow:0.5px 0.5px black;
}
#dep13
{
    position:absolute;
    top:70px;
    font-weight:bold;
    font-size:15px;
    left:135px;
    text-shadow:0.5px 0.5px black;
}
#dep11
{
      position:absolute;
    top:40px;
    font-weight:bold;
    font-size:15px;
    left:135px;
    text-shadow:0.5px 0.5px black;
}
#err8
{
    position:absolute ;
    font-weight:bold;
    font-size:15px;
    top:20px;
    left:40px;
    border-color:white;
    border-radius:3px;
    text-shadow:0.5px 0.5px black;
    overflow:hidden;
    text-transform:uppercase ;
    
}
#atmmac
{
    margin:auto;
    height:auto;
    width:auto;
}
.well8
{
    font-weight:bold;
    color:Black;
    position:absolute ;
    font-family:'playfair display',serif;
    left:25px;
    text-transform:uppercase ;
    top:4px;
    text-shadow:0.5px -1px 1px black;
}
.box1,.pass
{
    border-style:solid;
    border-color:black;
}
#cash1
{
    position:absolute;
    height:20px;
    width:120px;
    background-color:#FAFAD2;
    border-color:black;
    border-style:solid;
    border-width:3px;
    left:2.23px;
    
}
#bill
{
    width: 260px;
    height: 160px;
    position:absolute ;
    background-color:black;
    position:absolute ;
    font-weight:bold;
    font-size:15px;
    
    
    
    text-shadow:0.5px 0.5px black;
    overflow:hidden;
    
}
#succ
{
    position:absolute ;
    font-weight:bold;
    font-size:25px;
    left:65px;
    color:white;
    
    text-shadow:0.5px 0.5px white;
    overflow:hidden;
    text-transform:uppercase ;
}
#succ2
{
     position:absolute ;
    font-weight:bold;
    font-size:15px;
    
    top:70px;
    left:10px;
    color:white;
    text-shadow:0.5px 0.5px white;
    overflow:hidden;
    right:10px;
    
}
#indicator2
{
    
    height:38px;
    width:153px;
    background-color:grey;
    left:92px;
    position:absolute;
    top:16px;
    border-style:solid;
    border-width:2.5px;
    animation: dlr 0.5s infinite;

}
@keyframes dlr {
  0% {background-color:red ;}
  
  100% {background-color: grey;}
}
#light
{
    height:3px;
    width:3px;
    border-radius:50%;
    border-style:solid;
    border-color:black;
    border-width:2px;
    position:absolute ;
    top:3.5px;
    left:22px;
    animation: blr 0.5s infinite;
}
@keyframes blr {
  0% {background-color: #FF0000;}
  
  100% {background-color: green;}
}