.input{
    
    padding: 8px 0px 8px 0px !important;
    width: 100%;
    border-radius: 0 !important;
    box-sizing: border-box;
    border: none !important;
    border-bottom: 1px solid #F3E5F5 !important;
    font-size: 14px !important;
    color: rgb(48, 47, 47) !important;
    font-weight: 300;
}

.input:focus, textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #D32F2F !important;
    outline-width: 0;
    font-weight: 400;
}


.input1{
    
    padding: 8px 0px 8px 0px !important;
    width: 100%;
    border-radius: 0 !important;
    box-sizing: border-box;
    border: none !important;
    border-bottom: 1px solid #F3E5F5 !important;
    font-size: 14px !important;
    color: rgb(48, 47, 47) !important;
    font-weight: 300;
}

.input1:focus, textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #3ae992 !important;
    outline-width: 0;
    font-weight: 400;
}


.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-control-placeholder {
   
    font-size:15px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:5px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    opacity: 0.8;

}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
    font-size: 100%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
    margin-top: -10px;
    
}


.form-label{
    font-size: 18px;
    color: rgb(12, 196, 209);
}





.col img{
    
    width: 100%;
    cursor: pointer;
    transition: transform 1s;
    object-fit: cover;
}
/* .col label{
    overflow: hidden;
    position: relative;
} */
.imgbgchk:checked + label>.tick_container{
    opacity: 1;
}
/*         aNIMATION */
.imgbgchk:checked + label>img{
    transform: scale(1.25);
    opacity: 0.3;
}
.tick_container {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
}
.tick {
    background-color: #4CAF50 ;
    color: white;
    font-size: 16px;
    padding: 6px 12px;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    opacity: .7;
}


.sub1{
    width: 150px;
   
    margin: auto;
}

.sub1 button{
    height: 50px;
    font-size: 18px;
    border-radius: 30px;
   
}

.textbox{

    margin-left: 15px;
}

.textbox1{

    margin-left: 10px;
}


.t1{
    font-size:15px;
 }



.access{
    margin-left: 10px;
}


.toggle {
    width: 173px;
   margin-left: 170px;
   margin-top: -30px;
 }



 
 .wrap {
    position: relative;
    
 }
 
 
.toggle_button {
    display: none;
 }
 
 .toggle_button + .toggle_label {
    height: 28px;
    position: relative;
    display: inline-block;
    width: 45.45454545%;
    padding: 0.3rem 1rem;
    text-align: right;
    border-radius: 20%/50%;
    box-sizing: border-box;
    box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 0 0 1px #d6d6d6, 0 2px 0 0 white;
    background: #e5e4e4;
    background: -webkit-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -moz-linear-gradient(top, #e5e4e4 1%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -ms-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: linear-gradient(to bottom, #e5e4e4 1%,#f1f1f1 100%);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
 }
 
 /* label[for="off"] {
    margin-right: 7.272727273%;
 } */
 
 .handler {
    position: absolute;
    top: -3px;
    left: -1%;
    margin-left: 1px;
    display: block;
    padding: 19.882%;
    border-radius: 50%;
    box-shadow: inset 0 5px 2px 0 rgba(255,255,255,.6), inset 0 0 0 1px #b8b8b8, 0 2px 2px 0 rgba(0,0,0,.4);
    background: #fbfbfb;
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#dddddc 100%);
    background: -moz-linear-gradient(top, #fbfbfb 0%, #dddddc 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#dddddc 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#dddddc 100%);   
    background: linear-gradient(to bottom, #fbfbfb 0%,#dddddc 100%);
    transition: all .4s;
    z-index: 3;
 }
 
 .handler-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;   
    display: block;
    width: 31.66666667%;
    height: 31.66666667%;
    border-radius: 50%;
    margin: auto;
    box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 0 0 1px #d6d6d6, 0 2px 0 0 white;
    background: #e5e4e4;
    background: -webkit-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -moz-linear-gradient(top, #e5e4e4 1%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -ms-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: linear-gradient(to bottom, #e5e4e4 1%,#f1f1f1 100%);
    z-index: 4;
 }
 
 .title1 {
    position: relative;
    left: -20%;
    color: white;
    opacity: 0;
    transition: all .6s;
    z-index: 2;
 }
 
 .bg-on {
    position: absolute;
    top: 0;
    left: -82%;
    display: inline-block;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 4px 1px rgba(0,0,0,.3);
    border-radius: 18px;
    background: #e15e0f;
    background: -webkit-linear-gradient(top, #e15e0f 1%,#fc8516 100%);
    background: -moz-linear-gradient(top, #e15e0f 1%, #fc8516 100%);
    background: -o-linear-gradient(top, #e15e0f 1%,#fc8516 100%);
    background: -ms-linear-gradient(top, #e15e0f 1%,#fc8516 100%);
    background: linear-gradient(to bottom, #e15e0f 1%,#fc8516 100%);
    transition: all .4s ease-out;
    opacity: .99;
    z-index: 1;
 }
 
 .toggle_button:checked:checked + .toggle_label > .handler {
    left: 59%;
 }
 
 .toggle_button:checked:checked + .toggle_label> .title1 {
    opacity: 1;
 }
 
 .toggle_button:checked + .toggle_label > .bg-on {
    left: 0;
 }
 



 .toggle1 {
    width: 300px;
    margin: auto;
    
   
   
  
 }



 
 .wrap1 {
    position: relative;
    
 }
 
 
.toggle_button1 {
    display: none;
 }
 
 .toggle_button1 + .toggle_label1 {
    height: 38px;
    position: relative;
    display: inline-block;
    width: 45.45454545%;
    padding: 0.3rem 1rem;
    text-align: right;
    border-radius: 15%/50%;
    box-sizing: border-box;
    box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 0 0 1px #d6d6d6, 0 2px 0 0 white;
    background: #e5e4e4;
    background: -webkit-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -moz-linear-gradient(top, #e5e4e4 1%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -ms-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: linear-gradient(to bottom, #e5e4e4 1%,#f1f1f1 100%);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
 }
 

 
 .handler1 {
    position: absolute;
    
    top: -8px;
    left: -1%;
    margin-left: 1px;
    display: block;
    padding: 20.882%;
    border-radius: 50%;
    box-shadow: inset 0 5px 2px 0 rgba(255,255,255,.6), inset 0 0 0 1px #b8b8b8, 0 2px 2px 0 rgba(0,0,0,.4);
    background: #fbfbfb;
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#dddddc 100%);
    background: -moz-linear-gradient(top, #fbfbfb 0%, #dddddc 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#dddddc 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#dddddc 100%);   
    background: linear-gradient(to bottom, #fbfbfb 0%,#dddddc 100%);
    transition: all .4s;
    z-index: 3;
 }
 
 .handler-inner1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;   
    display: block;
    width: 31.66666667%;
    height: 31.66666667%;
    border-radius: 50%;
    margin: auto;
    box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 0 0 1px #d6d6d6, 0 2px 0 0 white;
    background: #e5e4e4;
    background: -webkit-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -moz-linear-gradient(top, #e5e4e4 1%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: -ms-linear-gradient(top, #e5e4e4 1%,#f1f1f1 100%);
    background: linear-gradient(to bottom, #e5e4e4 1%,#f1f1f1 100%);
    z-index: 4;
 }
 
 .title11 {
    position: relative;
    font-size: 13px;
    left: -5%;
    color: white;
    opacity: 0;
    transition: all .6s;
    z-index: 2;
    top:10%
 }
 .title12 {
    position: relative;
    font-size: 13px;
    color: rgb(88, 88, 88);
    
    top:10%
 }

 .bg-on1 {
    position: absolute;
    top: 0;
    left: -82%;
    display: inline-block;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 4px 1px rgba(0,0,0,.3);
    border-radius: 18px;
    background: #e15e0f;
    background: -webkit-linear-gradient(top, #e15e0f 1%,#fc8516 100%);
    background: -moz-linear-gradient(top, #e15e0f 1%, #fc8516 100%);
    background: -o-linear-gradient(top, #e15e0f 1%,#fc8516 100%);
    background: -ms-linear-gradient(top, #e15e0f 1%,#fc8516 100%);
    background: linear-gradient(to bottom, #e15e0f 1%,#fc8516 100%);
    transition: all .4s ease-out;
    opacity: .99;
    z-index: 1;
 }
 
 .toggle_button1:checked:checked + .toggle_label1 > .handler1 {
    left: 59%;
 }
 
 .toggle_button1:checked:checked + .toggle_label1> .title11 {
    opacity: 1;
 }
 
 .toggle_button1:checked + .toggle_label1 > .bg-on1 {
    left: 0;
 }


 








 .textbox1{
    font-size: 15px;
 }

 .sub2{
    width: 50%;
   
    margin: auto;
    display: flex;
    
}

.sub2 .btn{
    height: 45px;
    font-size: 18px;
    border-radius: 15px;
    margin: 8px;
    

   
}
.head1{
    float: right;
    margin-top: -40px;
    width: 100px;
    font-size: 15px;
}

.select1{
    border-radius: 20px;
    font-size: 15px;
}

.sub3{
    
   width: 300px;
    margin: auto;
    display: flex;
    
}

.sub3 .btn{
    height: 45px;
    font-size: 18px;
    border-radius: 15px;
    margin: 10px;
    

   
}
.sub4{
    
    width: 210px;
     margin: auto;
     display: flex;
     
 }
.sub4 .btn{
    height: 45px;
    font-size: 17px;
    border-radius: 15px;
    
    

   
}

.scandevice{
    background-color: #945b37;
    
    height: 50px;
    border-radius: 10px;
    display: flex;
    
}

.code p{
    font-size: 12px;
    color: #fff;
    padding: 12px;
    margin-top: 2px;
  
}
.ico{
    font-size: 40px;
    color: #fff;
    margin-left: 0px;
    margin-top: -5px;
}




.boxp{
    height: 50px;
    border: 1px solid;
   
    
}

.boxp1{
    height: 50px;
    border: 1px solid;
    width: 25%; 
    float: left;
    
    font-size: 14px;
  
   
    
    
}

.boxp2{
    height: 50px;
    border: 1px solid ;
    padding: 12px;
    font-size: 14px;

   
    

  
}

.datepic{
    width: 75%;
    margin: auto;
    margin-top: -7px;
    padding-left: 12px;
    
   
}

.selbox{
     
    width: 90%;
    margin: auto;
    margin-top: 5px;
   
    text-align: center;
    
    border: none !important;
    
}
.betw{
    margin-top: 8px;
   padding-left: 5px;
   padding-right: 5px;
}
.date2{
   
    text-align: center;
    
    
}

.head2{
    
    font-size: 15px;
    margin: auto;
    float: right;
}


/* spedometer */


.speedometer {
	background:#0F0F0F;
	position: relative;
	
	border-radius:50%;
}
.speedometer .speedNobe{
	position:absolute;
	width:100%;
	z-index:10;	
	transition: all 1s;
}
.speedometer .speedPosition {
	position: absolute;
	text-align: center;
	line-height: 80PX;
	font-family:arial;
	font-size: 30px;
	font-weight:bold;
	border-radius: 50%;
	
	background: #191919;
	color: #FFF;
	box-shadow: 0 0 3px 3px black;
}
.speedometer .fonts{
	font-family:arial;
	font-weight:bold;
	width:100%;
	text-align:center;
}

.speedometer .speedNobe div{
	background: #48a3cb;
	position: absolute;
	height: 100%;
	top: 0;
}
.speedometer .numb,.nob{
	transition: opacity 1s;
	position: absolute;
	opacity: 0.5;
    
}
.speedometer .nob{
	background:#eee;
	box-shadow: 0 0 2px 1px #eee;
}
.speedometer .numb{
	
	color:#eee;
	text-align: left;
	overflow: hidden;
	opacity: 0.5;
	font-family: arial;
	font-size: 16px;
	font-weight: bold;
    
}
.speedometer .nob.bright{
	opacity: 1;
}
.speedometer .nob.danger{
	background:#FF113A;
	box-shadow: 0 0 2px 1px #FF113A;
}
.speedometer .numb.bright{
	opacity: 1;
}
.speedometer .numb.danger{
	color: #FF113A;
}





.genbutton{
    width: 100%;
    background-color: #3ae992;
    height: 60px;
    border-bottom-right-radius: 35px;
    border-top-left-radius: 35px ;
    border-bottom-left-radius: 35px ;
}

.genbtn{
    cursor: pointer;
    font-size: 18px;
    border: none;
    
    color: #ffff;
    font-weight: 600;
    
}

.genbtn:hover{
    color: #969393;
  
}

.gpbtn{
    padding: 13px;
    

    
}

.spacer { margin:0; padding:0; height:50px; }

.sub5{
    width: 150px;
   
    margin: auto;
}

.sub5 button{
    height: 50px;
    font-size: 18px;
    border-radius: 30px;
   
}

.gendetails{
margin-top: 20px;
margin-bottom:20px;
text-align: center;

}

.buttonback {
    display: flex;
    
    
   
    width:100%;
    height: 58px;
    background-image: linear-gradient(120deg,#817c7c,#817c7c);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    
   }

   .buttonback1 {
    display: flex;
    
    
   
    width:100%;
    height: 58px;
    background-image: linear-gradient(120deg,#a5a1a1,#a5a1a1);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    
   }
 .buttonbackbtn1{
    
    

    border: none;
    
   
    width:50%;
    height: 58px;
    /* background-image: linear-gradient(120deg,#38b1b9,#1b92a7); */
    background-image: linear-gradient(120deg,#49994d,#31a821);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    color: #cac6c6;
    
 }

 .buttonbackbtn2{
    
 

    border: none;
    width:50%;
    height: 58px;
    /* background-image: linear-gradient(120deg,#38b1b9,#1b92a7); */
    background-image: linear-gradient(120deg,#4aad4f,#31a821);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    box-shadow: -1px 0px 1px 0px #525252;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }


 .buttonbackbtn3{
    
   

    border: none;
    
   
    width:50%;
    height: 58px;
    background-image: linear-gradient(120deg,#4aad4f,#31a821);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }

 .buttonbackbtn4{
    


    border: none;
    width:50%;
    height: 58px;
    /* background-image: linear-gradient(120deg,#e73b3b,#ee1818); */
    background-image: linear-gradient(120deg,#4aad4f,#31a821);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    box-shadow: -1px 0px 1px 0px #525252;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }


 .buttonbackbtn5{
    


    border: none;
    
   
    width:50%;
    height: 58px;
    /* background-image: linear-gradient(120deg,#38b1b9,#1b92a7); */
    background-image: linear-gradient(120deg,#4aad4f,#31a821);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }

 .buttonbackbtn6{
    


    border: none;
    width:50%;
    height: 58px;
    background-image: linear-gradient(120deg,#38b1b9,#1b92a7);
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
    box-shadow: -1px 0px 1px 0px #525252;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }


 
 .buttonbackbtn8{

    border: none;
    background:none ;
    width:50%;
    height: 58px;
    transition: .4s;
    border-top-left-radius:50px ;
    border-bottom-left-radius:50px ;
    border-bottom-right-radius: 50px;
   
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }


 .buttonbackbtn10{
    


    border: none;
    
   
    width:50%;
    height: 58px;
    background-image: linear-gradient(120deg,#ee0e0e,#e20e07);
    transition: .4s;
    border-top-left-radius:50px ;
    border-top-right-radius:50px ;
    border-bottom-left-radius:50px ;
    
    border-bottom-right-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }

 .buttonbackbtn11{
    


    border: none;
    
   
    width:50%;
    height: 58px;
    background-image: linear-gradient(120deg,#4aad4f,#31a821);
    transition: .4s;
    border-top-left-radius:50px ;
    border-top-right-radius:50px ;
    border-bottom-left-radius:50px ;
    
    border-bottom-right-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    color: #eeecec;
    
 }

 .blurred {
    filter: blur(5px);
  }


 :root {
    --clr-border: #24bbe0;
    --AnimationLength: 0px;
  }
  
  .boxes {
    width: 100%;
    display: grid;
    grid-gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .boxs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    font-size: 2em;
    padding: 0.5em;
    line-height: 1;
    
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
    background-repeat: no-repeat;
  }
  
  .box2-h {
    background-image: repeating-linear-gradient(0deg, var(--clr-border), var(--clr-border) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(90deg, var(--clr-border), var(--clr-border) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(180deg, var(--clr-border), var(--clr-border) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(270deg, var(--clr-border), var(--clr-border) 10px, transparent 10px, transparent 20px);
    background-size: 3px calc(100% + 20px), calc(100% + 20px) 3px, 3px calc(100% + 20px), calc(100% + 20px) 3px;
    animation: boxBorderAnimation 1s infinite linear;
  }
  @keyframes boxBorderAnimation {
    from {
      background-position: 0 0, -20px 0, 100% -20px, 0 100%;
    }
    to {
      background-position: 0 -20px, 0 0, 100% 0, -20px 100%;
    }
  }