/* index */
.headerContainer{
  position:relative;
    height:100px;
    width:90%;
    background-image: url("../img/library1.jpg");
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index:100;
    margin:0px 10px 20px 30px;
}
.ribbon{
position:absolute;
}


.ribbon-3{
width:60%;
min-width:440px;
height:100%;
background: #044e21cf;
top:10%;
left: -0.8%;
}
.ribbon-3:before{
content: "";
position: absolute;
top:-10px;
left:0;
border-left: 5px solid transparent;
border-right: 5px solid #044e21cf;
border-top: 5px solid transparent;
border-bottom: 5px solid #044e21cf;

}
.ribbon-3:after{
content: "";
position: absolute;
top:0;
right:-114px;
border-left:56px solid #044e21cf;
border-right:58px solid transparent;
border-top: 50px solid transparent;
border-bottom:50px solid transparent;
}
.headerTitle{
display:flex;
padding-top:10px;
}
.headerTitle img{
  width:5%;
  height:5%;
  z-index:100;
}
.headerTitle h1{
color:white;
z-index:100;
text-wrap: wrap;
color:white;
font-size: 200%;
font-weight:normal;
padding-top:10px;
font-family: 'Verdena';

} 
.msg{
background:white;
width:fit-content;
height:fit-content;
position:absolute;
z-index:120;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
transition: top 0.8s ease;  
display:block;
}

.msg-show{
top:10%;
left:50%;
transform: translateX(-50%);
}
.msg-hidden{

top:-100%;
left:50%;
transform: translateX(-50%);
}

.msgText{
padding:10px 30px 50px 30px;
background:var(--primary-color-light);
position:relative;
height:fit-content;

}
.msgTop{
background: var(--primary-color);
width: 100%;
height: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-right: 5px;
}
.buttonStyle{
position:absolute;
bottom:10px;right:20px;
  padding:5px 10px;
  border-radius:10px;
  border:none;
}
.buttonStyle button {
        margin-left: 5px;  /* Space between buttons */
        padding: 5px 10px;
        background:var(--primary-color);
        color: var(--text-color);
        border: none;
        border-radius:10px;
        cursor: pointer;
    }
    .buttonStyle {
      position: absolute;
      bottom: 20px;
      right: 20px;
      background-color: var(--primary-color);
      color: var(--text-color);
      padding: 3px 5px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
      font-size: 16px;

    }
    
.buttonStyle:hover {
background-color: var(--primary-color-dark);
color: var(--text-color-dark);

}
.tableContainer{
width:100%;
height: 75vh;
overflow-y: auto; 
border: 1px solid #ddd; 

border-radius:5px 5px 0 0;
box-shadow:0 0 20px rgba(0, 0, 0, 0.15);
color:var(--text-color);

}

.tableContainer table {
width: 100%;
border-collapse: collapse;
}

.tableContainer th, .tableContainer td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
font-size:15px;
}

.tableContainer th {
font-weight:bold;
background:var(--primary-color);
position: sticky; /* Keep the header fixed */
top: 0; /* Position it at the top */
z-index: 1; 
cursor: pointer;

}


.tableContainer tbody tr{
  cursor:pointer;
}

input[type='checkbox']{
  cursor:pointer;
}
.tableContainer  tbody tr:nth-of-type(even){
background:var(--toogle-color);
color:var( --opposite-back-color)
}
.tableContainer  tbody tr:last-of-type{
border-bottom:2px solid var(--primary-color);
} 
.tableContainer tbody tr:hover{
background:var(--primary-color-dark);
transition: var(--trans-02);
color:var(--text-color--dark);
}
.mainPannel{
  width:75%;
  min-width:500px;
    padding:0 20px 0px 0px;
}
.sidePanel{
    background:var(--toogle-color);
    margin:0px 20px;
    padding:10px 20px 10px 20px;
    border-radius:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:18%;
    height:75vh;
    border:1px solid black;
  }

  .formLine label input{ width:170px;padding:1px 3px;font-size:10px;}
  .formLine label{font-size:60%;font-weight:bold;width:100%}
  .userImg img{width:30%;}
  .userImg{display:flex;justify-content:center;align-items:center;}
  #imgLabel{display:flex;justify-content:center;align-items:center;}
  .formLine select {
    width:95%;
  }
  .reset-container {
    position: relative; /* Allow positioning of the text */
    display: inline-block; /* So it wraps tightly around the icon */
}

.reset-text {
    margin-left: 10px; /* Space between icon and text */
    font-size: 15px; 
    opacity: 0; /* Start hidden */
    transform: translateX(-10px); /* Start slightly to the left */
    transition: opacity 0.3s, transform 0.3s; /* Smooth transitions */
}

.resetpass {
    margin-left: 20px;
    font-size:18px;
    transition: transform 0.3s; /* Smooth rotation */
}

.resetpass:hover {
    transform: rotate(225deg); /* Rotate the icon on hover */
    color:red;
}

.reset-container:hover .reset-text {
    opacity: 1; /* Fade in */
    transform: translateX(0); /* Move to original position */

}
.paperContainer{
  display:none;
   width:100%;height:100vh;position:fixed;top:0;left:0;background:rgb(0 0 0 / 41%);z-index:101; 
}

.paper{
  background:white;
    width:fit-content;
    min-width:85%;
    min-height:60%;
    height:fit-content;
    position:absolute;
    z-index:120;
    transition: all 1s ease;  
    display:relative;
    box-shadow:6px 8px 10px 1px black;
}
.paper-show{
      top:20px;
    left:50%;
    transform: translateX(-50%);
  }
  .paper-hidden{
    top:-200%;
    left:50%;
    transform: translateX(-50%);
   
    }
    #paperMsg{  
        padding:20px;
  
    }
    #paperClose{
      display: flex;
    justify-content: flex-end;
    width: 100%;
    }
    
#pdfContent {
      width:  8.5in; /* Same as PDF width */
      padding:5px;
      margin: auto;

    }
    #pdfContent h1 {
      font-size: 16pt;
      margin-bottom: 10px;
    }

    #pdfContent  p {
      font-size: 12pt;
    }
     
  .sidePanel{
    background:var(--toogle-color);
    margin:0px 20px;
    padding:10px 20px 10px 20px;
    border-radius:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:18%;
    height:75vh;
    border:1px solid black;
  }

  .userImg img{width:30%;}
  .userImg{display:flex;justify-content:center;align-items:center;}
  #imgLabel{display:flex;justify-content:center;align-items:center;}
 

.mainPannel{
  width:75%;
  min-width:500px;
    padding:0 20px 0px 0px;
}

.formLine{margin-top:1px;
  display: flex;
    align-items:center;
  }
  .sidePanel input{
    width:100%;height:10%;padding:1px 3px;font-size:10px;
  }

  /* .formLine input{ width:170px;padding:1px 3px;font-size:10px;} */
  .formLine label{font-size:11px;font-weight:bold;}


.formLine{margin-top:1px;display: flex;
    align-items:center;
  }
  .sidePanel input{
    width:100%;height:10%;padding:1px 3px;font-size:10px;
  }

  /* .formLine input{ width:170px;padding:1px 3px;font-size:10px;} */
  .formLine label{font-size:11px;font-weight:bold;}
  /*  */
.right{
  display:flex;
  position:absolute;
  right:15px;
  bottom:10px;
  justify-content:center;
  align-items:center;
  box-sizing:content-box;
}
.countCon{
  width:fit-content;
  height:fit-content;
  padding:10px;
  background-color:var(--primary-color);
  font-size:15px;
  font-weight:bold;
  border-radius:20px;
}
.LogoutCon{
  width:40px;
  overflow:hidden;
  height:fit-content;
  padding:5px;
  background-color:var(--primary-color);
  font-size:15px;
  font-weight:bold;
  border-radius:20px;
  display: flex;  
  align-items:center;
flex-wrap: nowrap;  
  margin-left:10px;
  padding-right:10px;
  transition: all 2s ease;
  border:none;  
  color:black;
  text-decoration:none;
}
.LogoutCon img{
  width:25px;
  margin:0px 3px;
  height:25px;
}
.LogoutCon p{
  margin-left:10px;
}
.LogoutCon:hover{
  width:fit-content;

}
.formEm div{
margin-top:10px;
}
  
  
/* panel studnet */
.right{
  display:flex;
  position:absolute;
  right:15px;
  bottom:10px;
  justify-content:center;
  align-items:center;
  box-sizing:content-box;
}
.countCon{
  width:fit-content;
  height:fit-content;
  padding:10px;
  background-color:var(--primary-color);
  font-size:15px;
  font-weight:bold;
  border-radius:20px;
}
.LogoutCon{
  width:40px;
  overflow:hidden;
  height:fit-content;
  padding:5px;
  background-color:var(--primary-color);
  font-size:15px;
  font-weight:bold;
  border-radius:20px;
  display: flex;  
  align-items:center;
flex-wrap: nowrap;  
  margin-left:10px;
  padding-right:10px;
  transition: all 2s ease;
  border:none;  
  color:black;
  text-decoration:none;
}
.LogoutCon img{
  width:25px;
  margin:0px 3px;
  height:25px;
}
.LogoutCon p{
  margin-left:10px;
}
.LogoutCon:hover{
  width:fit-content;

}

#parent{
width: max-content;
height:max-content;
position: relative;
display:flex;
padding:16.5px 5px;
}
#child{
background:white;

}
#front_id{
padding:10px 0px 10px 20px;
border:1px solid black;
}
#img_logo{
width:40px;
height:40px;
}
#id_head{
display:float;
width:fit-content;
height:fit-content;
text-align:center;
}
#id_head p, #id_head h6 {
margin: 0;
line-height: 1.2; 
}
#id_head p{
font-size:10px;
}
#id_head h6{
font-weight:bold;
font-size:14px;
}
#idInfo{
width:50%;
line-height: 1.5; 
}
#idName{
font-weight:bold;
font-size:12px;       

}
#idAdd{
font-size:10px;
text-wrap:wrap;  
width:100%;
}
#idSigBox{
width:80%;
height:20px;
margin-top:10px;
border:1px solid black; 
}
#idSigText{
font-size:10px;
margin-left:10px;
}
#idImg{
margin:0;
line-height: 1.2;  
}
#idImg p{
font-size:10px;
margin:0px;
padding:0;
}

#idTable {
border-collapse: collapse;
width: 100%;
}
#idTable th,#idTable td {
border: 1px solid black;
text-align: center;
font-size:9px;
font-weight:bold;
height:9px;
width:90px;

}
#idTable thead td {
background-color: #f2f2f2;
}

#back_id{
height:fit-content;
margin-top:10px;
padding:20px 18px 18px 33px;
border:1px solid black; 
}
.BackIDpolicy{margin-top:10px;margin-bottom:10px;}
.BackIDpolicy p{
margin: 0;
line-height: 1.2; 
font-size:8px;
}
.BackIDSign{text-align:center;width:100%;
}
.backIDbox{width:300px;height:25px;border:1px solid green}
.backIDLibName{font-weight:bold;font-size:10px;margin-top:1px;font-family:serif; }
.backIDlib{
font-style: italic;
font-family:serif;
font-size:12px;
}
/* img side panel */
#preview{
  width:6rem;
  height:6rem;
}