*{box-sizing: border-box;margin:0;}
*:focus{outline:none;}
html{height: 100%;}
.ac{text-align:center;}
body{display: flex; flex-direction: column; min-height: 100%;background-color: rgb(224, 224, 224); touch-action: manipulation;}

header,content-wrapper{margin:0 10px 0 10px;}
header {z-index: 100; height:7% ;background-color:#14213D;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add a drop shadow */}

.moduleheaders{background-color:white;height:auto;padding-bottom:5px;border-bottom:1px solid #f1f1f1;}
.modulelogo{float:left;height:5%;width:5%;border:solid 2px burlywood;}
footer{line-height:40px;margin-top: auto;font-size:14px;margin-left:65px;margin-right:65px;color:#dadada;border-top:1px solid #f1f1f1;}
input{ font-family: Verdana, sans-serif;}

#logo{line-height:auto;padding:5px 5px 10px 20px;}

.logo{height:3%; width:3%; float:left;}

.logo-text{margin-left:80px;height:auto;width:auto;color:#45a049;padding-top:20px;}
 .logo-text h1{font-size:18px;line-height:20px;padding-left:5px;color:white;}

 .logo-text h2{font-size:17px;line-height:20px;padding-left:5px;color:white;}
 .icon {display:inline-flex;align-self: center;margin-right:10px;}
 .icon svg,.icon img{height: 1.6em;width:1.6em;fill:currentColor;}
 .icon img{top: .270em;position:relative;} 
 #profile-desktop .icon img{top: .450em;position:relative;}
.content-wrapper{height: auto;padding-top: 15px;margin-top:0;width:100%;}
.desktop-menu{margin-left:20px;margin-right:10px;background-color: white;border: 1px solid #dadada;height: auto;width:230px;float:left;font-size: 14px;color: black;} 
.content, .outer-border{min-height: 450px;max-height: 720px;margin-left:240px;width:auto;min-width:900px;}	
.outer-border{position:relative;}
.outer-border2{position:relative;}
.content_report, .outer-border2{min-height: 466px;max-height: 466px;margin-left:240px;width:auto;min-width:900px;}	
.content{margin-left:0;}
.content_report{margin-left:0;}
.inner-border{overflow-x:hidden;overflow-y:scroll;padding-left:20px;margin-right:30px;height:750px;background-color: #eae8e4;}
.inner-border::-webkit-scrollbar{display:none;}	
#content-box{overflow:hidden;line-height:40px;min-width:900px;margin-left: 210px;background-color: white;}
ul{list-style-type:none; margin: 0;padding: 0;width:auto;}
li a{position:relative;font-family: Verdana, sans-serif;text-decoration:none; padding:8px 0 8px 16px; color: #000;display: block;	} 
li a:after{height:1px; content:"";position:absolute;bottom:.145833em;left:0;}
li{border-bottom: 1px solid #DADADA;}
li:last-child {border-bottom: none;}
.button-box{width:700px;line-height:auto;margin:auto;}
.report-box{margin:0 auto 0 auto;width:350px;height:auto;}
.report-box .input_group{width:auto;margin:auto;height:auto;}
.report-box .name_group{padding: 0 0 0 0;line-height:35px;overflow:hidden;float:left;width:170px;text-align:left;}
.report-box .value{margin-left:170px;padding:0 0 0 0;} 
.report-box .input[type=text]{width:100%;border:none;border-bottom:1px solid #ccc;}
.report-box .input[type=text]:focus{outline:none;}
.input_group{width:380px;margin:auto auto 5px auto;}
.name_group{padding-left:5px;float:left;width:150px;line-height:40px;}
.value{line-height:20px;margin-left:150px;} 
.row2:after {content: "";clear: both;display: block;}
.box-coontainer .row2:after{margin-top:7px;}
.input[type=text],select{width:100%;padding:10px;}
.input[type=password]{width:100%;padding:10px; }
.input[type=email]{width:100%;border:none;padding:10px; }
.input[type=number]{width:100%;border:none; }
.input[type=file]{width:100%;padding:12px; }
.input[type=text],select:focus{outline:none;}
.input[type=password]:focus{outline:none;}
 .form-box input:focus{outline:none;}
label{padding:12px 5px 12px 0;font-family: Arial, sans-serif;font-size:15px;font-weight:bolder;} 
 .row:after {content: "";clear: both;display: block;}
li a:hover {background:#fff9e1;color: black;font-weight:bolder;}
.button_container{margin: 20px 0 0 0;}
.button {border:none;border-radius:5px;width:100px;background-color:#4CAF50;color:white; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:30px;float:right;!important;}
.button:focus{outline:none;}
.button:hover{background-color:#45a049;}
.button2{border:none;border-radius:5px;width:100px;background-color:maroon;color:white; font-size:11px; padding:2px 6px 2px 6px;margin-top:11px;margin-right:40px; cursor:pointer; line-height:25px;float:right; !important;}
.button2:focus{outline:none;}
.button2:hover{background-color:#8B0000;}

.menu-btn{color:white;float:right;}
.active{background:#fff9e1;color: #183B11;font-weight:bolder;}
.notactive{background-color: white ;color: black;}
.small-device{font-family: Verdana, sans-serif;display:none;border-bottom:1px solid #DADADA ;padding: 10px 0 10px 0;}
.small-device2{font-family: Verdana, sans-serif;display:none;border-bottom:0px solid #DADADA ;padding: 10px 0 10px 0;}
.small-device3{display:none;}
.menu-ul {dislpay:flex;padding:0;justify-content:center;list-style-type:none;overflow:hidden;}
#profile-desktop{border-top-right-radius:2px;border-top-left-radius:2px;line-height:50px;background-color:#14213D;}
#profile-desktop a{color:white;font-weight:bolder;}
#profile-desktop a:hover{background-color:#14213D;}
#default{margin:auto;}
.show_hidden{display:block;}
.dashboard-wrapper{width:auto;height:auto;padding-left:10px;}
.dashboard-wrapper:after{display:block;content:"";clear:both;}
.buttonwraps2{float:right;width:15%;}
.dashboard{color:#4CAF50;}
.header_text-container{float:left;width:auto;}

.buttonwraps{margin-left:260px;width:15%;}
.select-container{float:right;margin-top:-40px;width:500px;}
.select-container2{float:right;margin-top:-40px;width:500px;}
.select-container3{float:right;margin-top:-40px;width:500px;}
 .select-container3 select{border:1px solid #dadada;float:right;width:100%;}
 .select-container2 select{border:1px solid #dadada;float:right;width:350px;}
.select-container select{border:1px solid #dadada;}
.select-report{height:40px;width:247px;}
.select-report2{height:40px;width:253px;float:right;margin-top:1px;}
.search-wrapper{margin-left:10px;background-color: whitesmoke;width: auto;height:40px;margin-top:2px;}
.search{border:1px solid #dadada;overflow:hidden;height:100%;float:right;width:500px;}
.icon-search_container{
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-size: 18px 18px;background-position: center;outline:none;background-color: white;background-repeat:no-repeat;
border:none;height:100%;width:40px;float:left;}
.searchBox{border:none;width:91.8%;line-height:40px;outline:none;background-color: white;}
 .search .searchBox:hover,.searchButton  .icon-search_container:focus {background-position:center;background-color:white;}

.hide_background{background:none;}		
.searchButton{border:none;color: white;padding: 0.5rem;border-top-right-radius: 50px;border-bottom-right-radius: 50px;display:none;outline:none;}
table th{color:#818181; text-align: left; padding:7px 10px; border-bottom:solid 1px #d2d1cb;font-family:Arial, Helvetica, sans-serif;}
table td{ background:#fbfcfc;padding-top:8px;padding-bottom:8px ;padding-right:8px;font-family:Arial, Helvetica, sans-serif;}
table tr.odd td{ background:#f8f8f8; }
table tr:hover td{ background:#fff9e1;}
tr{text-align:center;}
.tableclock{display: block; height: 150px; overflow-y: scroll;}
/* modals used in system */
.modal-overlay{z-index:999;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(128,128,128,0.5);display:none;} 
.modalautowidth{z-index:2;position:fixed;top:0;left:0;width:vw;height:vh;background-color:rgba(128,128,128,0.5);display:none;} 
.modal {position: fixed;z-index: 9999;left: 50%;top: 50%;transform:translate(-50%,-50%);width: 600px;height:500px;}
.modalviewmore {position: fixed;z-index: 2;left: 50%;top: 50%;transform:translate(-50%,-50%);width:1000px;height:500px;}
.modaladduser {position: fixed;z-index: 2;left: 50%;top: 50%;transform:translate(-50%,-50%);width: 400px;height:500px;}
.modaleditItem {position: fixed;z-index: 2;left: 50%;top: 50%;transform:translate(-50%,-50%);width: 1200px;;height:500px;}
.modalhistory {position: fixed;z-index: 2;left: 50%;top: 50%;transform:translate(-50%,-50%);width: 600px;height:500px;}
.imgcontainer {text-align: center;margin: 5px 0 12px 0;position: relative;}
img.avatar {height: 170px;width: 170px;border-radius: 50%;}
.container {padding: 15px;position: relative; border:1px solid #dadada;background-color:#dadada;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.container2 {overflow:hidden;padding: 15px;position: relative;border:1px solid #dadada;background-color:#dadada;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.container3 {padding: 15px;position: relative; border:1px solid #dadada;background-color:#dadada;width:50%;}
.containeradduser{padding:10px;margin:auto;position: relative;background-color:#dadada;width:100%;}
.inner-border-modules{margin:0 1% 0 1%;}
.box-coontainer{width:auto;height:auto;padding-bottom:20px;}
.modal-content {background-color: white;z-index:999;box-shadow:0px 50px 70px #1d1d1d;border: 1px solid #DADADA;width: auto;border-radius:10px;}
.modal-contents {background-color: white;box-shadow:0px 50px 70px #1d1d1d;border: 1px solid #DADADA;width: auto;border-radius:10px;}

img.picture {height: 170px;width: 170px;}
.close {position: absolute;right: 25px;top: 0;color: #000;font-size: 40px;font-weight: bolder;}
.close:hover,
.close:focus {color: red;cursor: pointer;}

/* Add Zoom Animation */ 

.animate {-webkit-animation: animatezoom 0.6s;animation: animatezoom 0.6s}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
   from {transform: scale(0)}
   to {transform: scale(1)}
}
.form-container{width:100%;height:450px;position:fixed;}
.form-box-left{float:left; width:270px; height:449px;background-color:#fafafa;overflow:hidden}
.form-box-right{margin-left:270px; height:450;}



.buttonns { margin-top:5px;width:100px;border:solid 1px #b1a874; color:#7f7f7f; font-size:13px; padding:2px 6px 2px 6px; cursor:pointer; line-height:15px !important;}
.buttonns:hover { color:#223; border-color:#857b42; }
.buttonns { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}

.buttonns1 { margin-top:5px;width:100px;border:solid 1px #b1a874; color:#7f7f7f; font-size:13px; padding:2px 6px 2px 6px; cursor:pointer; line-height:15px !important;}
.buttonns1:hover { color:#223; border-color:#857b42; }
.buttonns1 { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}
.clockspan{font-size:60px;background-color:white;padding:50px 50px 50px 50px;}

.searchwraps{width:88%;float:left;height:120px;margin-left:5px; overflow-y:hidden;}
.input_id{width:350px;height:50px;font:20px;padding-top:10px;padding-left:5px;}


.btnlogout{
  float: right;
  border: none;
  color: white;
  font-size: 18px;
  margin: 0px 30px 0px 0px;
  text-shadow: 0 4px 5px rgba(0, 0, 0, 1); /* Add text shadow */
  background-color: #14213D;
}
.btnlogout:hover {

      transform: translateY(-2px);
  }

  .btnhome{
    float: right;
    border: none;
    color: white;
    font-size: 18px;
    margin: 0px 30px 0px 0px;
    text-shadow: 0 4px 5px rgba(0, 0, 0, 1); /* Add text shadow */
    background-color: #14213D;
  }
  .btnlogout:hover {
  
        transform: translateY(-2px);
    }





.btn3{
  float: right;
  border: none;
  border-right: solid 1px #000;
  color: white;
  font-size: 18px;
  margin: 0px 30px 0px 0px;
  padding-right: 30px;
  text-shadow: 0 4px 5px rgba(0, 0, 0, 1); /* Add text shadow */
  background-color: #14213D;
}
.btnhome:hover {
     
      transform: translateY(-2px);
  }







  .btnpassed{ display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    height: 48px;
    padding: 0 32px;
    font-size: 18px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    width:130px;
  }
  .btnpassed:hover {
        box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
        transform: translateY(-2px);
    }
    .btnpassed:active{
        box-shadow: inset 0px 3px 7px #d6d6e7;
        transform: translateY(2px);
    }

  .btntest{ display: inline-block;
    outline: 0;
    border: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    background: #FCFCFD;
    box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
    height: 60px;
    padding: 0 32px;
    font-size: 18px;
    border-radius: 6px;
    color: #36395a;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    width:350px;
  }
  .btntest:hover {
        box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
        transform: translateY(-2px);
    }
  .btntest:active{
        box-shadow: inset 0px 3px 7px #d6d6e7;
        transform: translateY(2px);
    } 
  
  .table2{width:75%; margin:auto;}

/* Media queries  (for different views) */
@media only screen	and (min-device-width: 0px)and  (max-device-width: 599px){ 
.inner-border{margin-right:0px;}
.logo{padding-bottom:10px;}
.modal-overlay{width:100%;}
.modal{width:100%;}
.clockspan{font-size:45px;background-color:white;padding:3px 3px 3px 3px;}
 header,content-wrapper{margin:0;}
 header{line-height:50px;}
 footer{margin:auto 0 0 0;}
.btnhome{width:120px;font-size: 14px;}
 .btnlogout{width:120px;font-size: 14px;}
  .input_id{width:300px;}
   .profile-wrapper{display:block;}
    .content-wrapper{min-height:100%;padding-top:0;width:100%;}
    .desktop-menu{display:none;}
    .desktop-menu2{display:none;}
    .inner-border{margin:0 0 0 0;padding:0 0 0 0;} 
    .content{margin:0 0 0 0;width:100%;min-width:100%;min-height:auto;max-height:auto;}
    #content-box{display:none;}
    .small-device{display:block;}
    .small-device2{display:block;}
    body{background-color: white;}
   .menu-ul{content-align:center;width:100%;display:none;background-color:white;flex-direction:column;}
   .menu-ul li a{display:block;text-align:center;border:1px solid #EAEAEB;line-height:80px;background-color:whitesmoke;}
    .menu-btn{color:white;margin-top:10px;margin-right:15px;cursor: pointer;}
    .close-btn{float: right; width: 18px;color:black;cursor: pointer;display:none;margin-top:15px;padding-bottom:20px;margin-right:20px;}
    .search-wrapper{border:0;}
    .modulelogo{display:none;}
    .searchwraps{width:100%;margin:0;overflow:visible;}
    .searchwrapper{width:100%;margin:0;line-height:0px;}
    .moduleheaders{padding:0 0;}
     .modalviewmore{width:auto;}
    .inner-border-modules{margin:0 0;height:100%;width:100%;}
    .buttonns {margin-top:15px;width:auto;font-size:18px; padding:10px 15px 10px 15px; line-height:15px !important;}
    .buttonns1 {margin-top:15px;width:auto;font-size:18px; padding:10px 15px 10px 15px; line-height:15px !important;}
    .table2{width:40%; margin:auto;}
    .desktopviewmodule{display:none;}
       .table, .active, .tbody, .th, .td, .tr {
           display: block;
       }
       .thead tr {
           position: absolute;
           top: -9999px;
           left: -9999px;
       }
    
   .tr {
     margin: 0 0 1rem 0;
   }
    .tr:nth-child(odd) {
     background: #ba4c32;
     text-align:left;
   }
       .td {
           border: none;
           border-bottom: 1px solid #eee;
           position: relative;
           padding-left: 50%;
       }
       .td:before {
           
           position: absolute;
           top: 0;
           left: 6px;
           width: 45%;
           padding-right: 5px;
           white-space: nowrap;
           
       }
       .td:nth-of-type(1):before { content: "Date Today :";  padding-top:8px;padding-bottom:8px;}
       .td:nth-of-type(2):before { content: "Time In:";  padding-top:8px;padding-bottom:8px;}
       .td:nth-of-type(3):before { content: "Time out:"; padding-top:8px;padding-bottom:8px; }
       .td:nth-of-type(4):before { content: "Add Note:";  padding-top:8px;padding-bottom:8px;}
    
       
}

@media only screen and	(min-device-width: 600px)and	(max-device-width:	1024px){	
header,content-wrapper{margin: 0;}
body{background-color: white;}
footer{margin: auto 0 0 0 ;}
 #content-box{display:none;}
.inner-border{margin:0 0 0 0;padding:0 0 0 0;} 
.desktop-menu{display: none;}
.desktop-menu2{display: none;}
.content-wrapper{height:auto;min-height:100%;padding-top:0;width:100%;}
.content{margin:0 0 0 0;width: 100%;min-width:100%;height:100%;overflow:visible;}
.small-device{display:block;height: 100%;padding-bottom:0;}
.small-device2{display:block;height: 100%;}
.menu-ul{width: 100%;display: block;background-color: white;}
.menu-ul li a{display:block;text-align:center;border:none;background-color:white;justify-content:center;}
 li{display:inline;float:right;border-bottom: none;}
 .menu-btn{display:none;}
 .close-btn{display:none;}
 a p{display:none;}
 .modulelogo{display:none;}
 .searchwraps{ margin-top:-50px;width:100%;}
 .moduleheaders{padding:0 0 0 0;}
 .inner-border-modules{margin:0 5% 0 5%;}
 .modalviewmore{width:auto;}
 .desktopviewmodule{display:none}
}
   
@media only screen and	(min-width: 1025px){
header,content-wrapper{margin:0;}
.content-wrapper{height: auto;padding-top: 15px;margin-left:auto;margin-right: auto;}
.content{min-width:auto;width:auto;} 
.moduleheaders{padding:0 0 0 0;}
.searchwraps{margin: 0 0;}
.mobileviewmodule{display:none}
}	
   
@media only screen and	(min-width: 1280px){
header,content-wrapper{margin:0;}
 .content-wrapper{height: auto;padding-top: 15px;margin-left:auto;margin-right: auto;}
 .mobileviewmodule{display:none}
 
}
@media only screen and	(min-width: 1600px){
header,content-wrapper{margin:0;}
 .content-wrapper{height: auto;padding-top: 15px;margin-left: auto;margin-right: auto;}
 .mobileviewmodule{display:none}

}