h1 .bx{
    position: absolute;
    left: 10px;
}
::-webkit-scrollbar{
   width: 7px;

}
::-webkit-scrollbar-thumb{
   background: black;
}
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
}
.main{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

.page{
   min-height: 70vh;
   max-height: 70vh;
   overflow-x: hidden;
   background: rgba(255, 255, 255, 0.164);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.486);
   width: 600px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   flex-direction: column;
   position: relative;
   overflow-y: auto;
   padding-bottom: 20px;
   gap: 25px;
}
#tables{
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 25px;
   position: relative;
   width: 100%;
}
.page h1{
   height: 80px;
   min-height: 80px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   background: black;
   color: white;
   width: 100%;

}
.page section{
   display: flex;
   width: 100%;
   justify-content: space-evenly;
   height: 40px;
   align-items: center;
}
.page label{

   width: 100px;
}

.page select,
.page input,
.page .data
{
   height: 40px;
   min-height: 40px;
   border: none;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.281);
   outline: none;
   border-radius: 10px;
   padding-left: 20px;
   width: 200px;
   padding-right: 5px;
}
.page .data{
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 0;
}
.page select option:first-child{
   color: rgba(0, 0, 0, 0.253);
}
.page #submitBtn{
   width: 80%;
   height: 25px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.397);
   border: none;
   outline: none;
}
.errorMessage{
   color: red;
}

.page button{
   width: 80%;
   height: 30px;
   min-height: 30px;
   
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.397);
   border: none;
   outline: none;

}
.page table td a{
width: 80%;
padding: 5px;
color: white;
text-decoration: none;
display: block;
background: black;
margin: auto;
border-radius: 10px;
}




.page table{
width: 95%;
border-spacing: 0;
border-collapse: collapse;

}
.page table th,
.page table td{
border: 2px solid black;
padding: 10px 0;
text-align: center;
}

.page table td button{
padding: 8px;
width: 40%;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.288);
border: none;
margin: 3px;
font-size: 10px;
}
#footer{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
background: black;
color: white;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
}
@keyframes messageGo {

100%{
display: none;
}
}
.presentClr{
color: green;
}
.absentClr{
color: red;
}
.page .buttons{
width: 95%;
display: flex;
justify-content: space-evenly;
}
.page .buttons button{
width: 40%;

}
td{
empty-cells: hide;
}


#menuItems{
    display: flex;
    width: 100%;
    position: fixed;
    height: calc(100vh - 80px);
    top: 80px;
    right: -100%;
    transition: 0.4s;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);

}
#menuItems ul{
    display: flex;
    list-style-type: none;
    flex-direction: column;
    width: 100%;
    position: relative;  
}
#menuItems ul li{
    width: 100%;
    padding-left: 10px;
    height: 35px;
    border-bottom: 2px solid black;
    display: flex;
    align-items: center;
    font-weight: lighter;
}

#menuItems.open{
   right: 0;
}
#backIcon.open{
   right: calc(100% - 80px);
}
#backIcon{
   height: 80px;
   width: 80px;
   right: -80px;
   background: transparent;
   top: 0;
   z-index: 9999999;
   position: fixed;
}
@media (width < 650px) {
   .main{
      align-items: baseline;
      height: auto;

   }
.page{
width: 100vw;
border-radius: 0;
min-height: calc(100% - 80px);
max-height: calc(100% - 80px);
padding-bottom: 95px;
top: 0;
box-shadow: none;

}
/* #footer{
   position: ;
   
} */
}

#popUp{
   height: 100vh;
   position: fixed;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   right: 100%;
   z-index: 999999999999999;
   /* background: black; */
   background: white;
   transition: 0.5s ease;
}
#popUp.show{
   right: 0%;
}
#popUp .cross{
   width: 30px;
   height: 30px;
   position: absolute;
   right: 20px;
   top: 20px;
   font-size: 2em;
   rotate: 45deg;
   /* background: black; */
}
#datas{
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 25px;

}