@font-face {
    font-family: 'Nueva Std';
    src: url('../fonts/NuevaStd-BoldCond.otf') format('truetype');  
    font-weight: 700; 
    font-style: normal;

}
@font-face {
    font-family: 'Nueva Std';
    src: url('../fonts/NuevaStd-Cond.otf') format('truetype');  
    font-weight: 400;
    font-style: normal;

}
.alert-danger{
	padding: 6px 10px!important;
	margin-bottom: 0!important;
	margin-top: 10px!important;
}
.alert-danger ul{margin: 0 !important;}
#login .text-red-600,
.login-form .text-red-600{
	color:red;
	list-style-type: none;
    padding-left: 0;
	grid-column: span 12;
}
.login-form .text-green-600{   
    border: 1px solid #56c356;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #fbfbfb;
    color: #56c356;
    text-align: center;
    margin-top: 10px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
}
/*=======Global CSS==========*/

*{margin:0;padding:0;box-sizing:border-box}
h1{
	font-size:56px;
	font-family: "Nueva Std";
	font-weight: 400;
	color:#2A2A2A;

}

h2{
	color: #2A2A2A;	
	font-family: "Nueva Std";
	font-size: 40px; 
	font-weight: 400; 
	margin-bottom:0;

}

h3{
	color: #2A2A2A;	 
	font-family: "Nueva Std";
	font-size: 32px; 
	font-weight: 400; 
}
p{
	color: #373737;	
	font-family: Inter;
	font-size: 16px;
	font-weight: 400;
}
.small-body{
	color: rgba(55, 55, 55, 0.6);
	font-family: Inter;
	font-size: 13px;
	font-weight: 400;

}

.small-title{
	color: #2A2A2A;
	font-family: Inter;
	font-size: 13px; 
	font-weight: 500; 
	letter-spacing: 0.26px;
	text-transform: uppercase;

}

.cstmBtn{
	border-radius: 10px;
	background: #D6E541;
	height: 60px;
	padding: 20px;
	color: #2A2A2A;
	font-family: "Nueva Std";
	font-size: 18px;
	font-weight: 700;
	outline: none;
    border: 0;
	display: inline-flex;
    justify-content: center;
    grid-gap: 10px;
    cursor: pointer;

}

.caption{
	color:#373737;
	font-family: Inter;
	font-size: 12px;
	font-weight: 400;
	text-align: left;
	margin-top: 8px;
}

input{
	width:100%;
	height: 55px;
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #E3E3E3;
}
input[type="checkbox"]{
    width: 24px;
    height: 24px!important;
}
select{
	border-radius: 10px;
    border: 1px solid #E3E3E3;
    width: 100%;
    height: 55px;
    padding: 17px;

}

form label{
	text-align: left;
    margin-bottom: 8px;
    width: 100%;
    display: block;

}

 
body{
	background:#f7f7f7 url(../images/gd-bg.jpg)!important;
	background-repeat:no-repeat;
	background-size:contain;

 

}
body.book-page {
  background-image: url(../images/book-bg.jpg);}
.section-inner{
	 width:100%;
	 max-width:1340px;	 
	 margin: 0 auto;

	 

 }

.col-parent{
	display:flex;
	justify-content: space-between;
    align-items: center;

}

.column{

	padding:10px;

}

.small-link{
	color:#2A2A2A;
	text-align: center;
	font-family: Inter;
	font-size: 13px;
	font-weight: 700;
	text-decoration-line: underline;

}

.middleCol ul{
	list-style-type: none;
    display: flex;
    grid-gap: 24px;
    margin-bottom: 0;
    padding-left: 0;

}

.middleCol ul li a{
	color: #373737;
	font-family: Inter;
	font-size: 16px;
	font-weight: 400;
	text-decoration:none;

}

.middleCol ul li a.active{
	font-weight:700;

}

.header-section .userProfile{
	display: flex;
    align-items: center;
    gap: 8px;
	cursor:pointer;

}

.header-section .userProfile span{
	width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 55px;
    background: #D6E541;
    color: #2A2A2A;
    font-family: "Nueva Std";
    font-size: 28.333px;
    font-weight: 700;	

}

.mt20{

	margin-top:20px;

}

.fooNavigation a{
	text-decoration: none;

}

.fooSection .small-body .small-link{
	color:#4E8D98

}

table tr td:last-child,table tr th:last-child{
	text-align:right

}
@keyframes criss-cross-right{
0% {
    right: -20px;
}

50% {
    right: 50%;
    width: 20px;
    height: 20px;
}
100% {
    right: 50%;
    width: 150%;
    height: 150%;
}
}
@keyframes criss-cross-left{
0% {
    left: -20px;
}

50% {
    left: 50%;
    width: 20px;
    height: 20px;
}
100% {
    left: 50%;
    width: 150%;
    height: 150%;
}
}
.rolFilterdrp:after{
       content:"";
       background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"><path d="M8.5 12.5L3 6.5L14 6.5L8.5 12.5Z" fill="white"/></svg>');
        width: 15px;
        height: 14px;
        display: inline-block;
       
}
.dropdown-content a:hover {
    background-color: #d6e541;
    
}
#userDropdown{
	margin-top:130px;
	z-index:3;
	}
#userDropdown a:hover{background-color:#4E8D98;color:#fff}
#userDropdown a:after{
	content: "";
    width: 0;
    height: 0;
    right: 20px;
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
	}
.pagination .page-item.active .page-link{
    padding: 4px 13px;
    color: #3D6E77!important;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    background-color: #EFF5F6!important;
    border: 0;

}
.pagination .page-item .page-link{
    color: #3D6E77!important;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    border: 0!important;
    padding: 4px 11px!important;
        background-color: transparent;
}
.table-view.userlist{
    background-color: #fff;
    padding-bottom: 44px;
    margin-bottom: 30px;
    
}
a:hover {
    background-size: 100% 1px;
}
a{
    background: linear-gradient(currentcolor, currentcolor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    transition: background .6s;
	
	}
.LogoCol a {background:none}
.alert.alert-danger{
    max-width: 1320px;
    margin: 0 auto;
    padding: 15px 10px !important;
}
/*=======End Global CSS==========*/



/*=======Menu CSS==========*/

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.navbar .logo a {
    color: white;
    text-decoration: none;
    font-size: 1.5em;

}

.nav-links {
    list-style: none;
    display: flex;

}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;

}

/* Hamburger menu */

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
}
.bar {
    width: 30px;
    height: 2px;
    background-color: #2A2A2A;
    margin: 3px 0;
    transition: 0.3s;
}

/*=======End Menu CSS==========*/

/*=======Homepage CSS==========*/

.outerWrapper{	
	height:100vh;
	padding-top: 44px;
	padding-bottom: 32px;
}
.logo-row{text-align:center;}
.grid-row{
	display: grid;
	grid-template-columns: 1fr 30px 1fr;
	grid-gap:40px;
	align-items: center;
}
.gridBox{
	border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    padding: 40px 24px;
    text-align: center;
}
.gridBox .cstmBtn{
	margin-top: 32px;
}

.gridBox p{
	margin-top: 10px;
}

.cstm-heading h1{
    text-align:center;
}

.cstm-heading{
    margin-top: 66px;
    margin-bottom: 32px;
}

.gridBox-middle h6{
	color: #2A2A2A;
	font-family: "DM Sans";
	font-size: 20px; 
	font-weight: 700; 
}

.mycstm-sec .section-inner{
	 max-width:1108px;
	 }

.footerText{
	color: #2A2A2A;
	text-align: center;
	font-family: "DM Sans";
	font-size: 14px;
	font-weight: 400;
}
.footerText a{
	color: #4E8D98;
	font-weight: 700;
	text-decoration-line: underline;
}
.fooSection{  
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;
    margin-top: 60px;
}

.transbtn{
    background-color: transparent;
    color: #4E8D98;
    border: 1px solid #4E8D98;

}

.transbtn path{
    fill: #4E8D98;

}

/*=======End Homepage CSS==========*/



/*=======signup CSS==========*/

.head-btn{
	height: 45px;
	padding: 10px 20px;
	border-radius: 10px;
	border: 1px solid #4E8D98;
	background:#FFF;
	color:#4E8D98;
	width: auto;

}

.cstmCol{
	display:flex;
	justify-content:end;
	align-items:center;
	grid-gap: 16px;
	position:relative;

}

.LogoCol img{
	max-width:118px;
}

.header-section{
	padding:5px 0;
	border-bottom: 1px solid #E3E3E3;
}

.header-section .column{
	padding:0 10px;
}

.form-box{
	width:100%;
	max-width:604px;
	padding: 40px 24px;
	border-radius: 16px;
	background: #FFF;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
	margin:0 auto;

}

.field-wrapper{
	display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px;
	margin-top: 32px;
}

.field-wrapper .field{
	grid-column: span 6;
}

.form-box h2{
	margin-bottom: 20px;
	text-align:center;
}

.form-box p{text-align:center;}
.field-wrapper .checkbox-field{
	grid-column: span 12;
	display: flex;
    align-items: start;
    grid-gap: 12px;
	margin-top: 16px;
    margin-bottom: 16px;
}
.field-wrapper .checkbox-field .checkbox-label{
	margin-bottom: 0;
    color: #2A2A2A;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
}
.field-wrapper .checkbox-field input{
	border-radius: 4px;
    border: 1px solid #2A2A2A;
    background: #FFF;
    width: 24px;
    height: 24px;
}

.field-wrapper .submit-btnfield{
	grid-column: span 12;

}

.field-wrapper .submit-btnfield	.submitBtn{
	border-radius: 10px;
    background: #D6E541;
    height: 60px;
    padding: 20px;
    border: 0;
    width: 100%;
    color: #2A2A2A;
    font-family: "Nueva Std";
    font-size: 18px;
    font-weight: 700;
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
	cursor: pointer;

}

/*=======End signup CSS==========*/

/*=======login CSS==========*/

.field-wrapper .login-links{
	display: flex;
    justify-content: space-between;
	margin-bottom: 20px;
}

.login-form{
	max-width: 482px;
}

.login-form .field{
	grid-column: span 12;

}

/*=======End login CSS==========*/

/*=======Password reset CSS==========*/

.field-wrapper .back-btnfield .backBtn{
	border-radius: 10px;
    background: #F7F7F7;
    height: 60px;
    padding: 20px;
    border: 0;
    width: 100%;
    color: #2A2A2A;
    font-family: "Nueva Std";
    font-size: 18px;
    font-weight: 700;
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
	cursor: pointer;

}
.confirmation-elements{text-align:center;display:none}

/*=======End Password reset CSS==========*/



/*=======Admin dashboard CSS==========*/

.widthAuto{width:auto;}

.table-view table {
    width: 100%;
    border-collapse: collapse;
    border:0;
    margin: 20px 0;

}
.table-view thead tr {
    background-color: #5ca6a6;
    color: white;
    text-align: left;

}
.table-view thead th, .table-view tbody td {

    padding: 20px;

}
.table-view thead th{
	color:#FFF;
	font-family: Nunito;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.28px;
	padding: 17px 20px;
	border: 0;
}

.table-view tbody tr:nth-child(even) {
    background-color: #F9FBFB;

}

.table-view tbody tr:nth-child(odd) {
    background-color: #fff;

}

.table-view tbody td {
    color: #2A2A2A;
	font-family: Inter;
	font-size: 16px;
	font-weight: 600;
	vertical-align: middle;
	border: none;

}
.table-view tbody img {
    width: auto;
    max-height: 123px;
    max-width: 94px;
    border-radius: 3px;

}
.table-view span {
    color: #FFF;
	font-family: Inter;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 4px;

}
.table-view tbody tr td:nth-child(3),

.table-view tbody tr td:nth-child(5){
	font-weight:400;
	color:#373737;

}

.table-view .Tealbg{background: #3D6E77;}
.table-view .Tanbg{ background:#A8B05F;} 
.table-view .edit{
	background: #EFF5F6 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.5834 2.41656C17.3508 2.18098 17.0738 1.99393 16.7684 1.86626C16.463 1.73859 16.1352 1.67285 15.8042 1.67285C15.4732 1.67285 15.1455 1.73859 14.84 1.86626C14.5346 1.99393 14.2576 2.18098 14.025 2.41656L12.425 4.04156L15.9584 7.57489L17.5584 5.97489C17.7956 5.744 17.9846 5.46829 18.1144 5.16377C18.2442 4.85925 18.3123 4.53198 18.3146 4.20095C18.3169 3.86992 18.2535 3.54173 18.128 3.23541C18.0024 2.9291 17.8173 2.65076 17.5834 2.41656Z" fill="%234E8D98"/><path d="M11.2417 5.2251L4.25006 12.2168C4.18738 12.2812 4.13408 12.3541 4.09173 12.4334L1.77506 17.1084C1.70785 17.2346 1.67424 17.376 1.67746 17.5189C1.68067 17.6619 1.72061 17.8016 1.79343 17.9246C1.86625 18.0476 1.9695 18.1499 2.09325 18.2215C2.21701 18.2931 2.3571 18.3316 2.50006 18.3334C2.62703 18.334 2.75245 18.3054 2.86673 18.2501L7.54173 15.9334C7.62102 15.8911 7.69395 15.8378 7.75839 15.7751L14.7501 8.78343L11.2417 5.2251Z" fill="%234E8D98"/></svg>');	

}

.table-view .download{
	background: #EFF5F6 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M18.4001 4.40012V14.0001C18.4001 14.663 17.863 15.2001 17.2001 15.2001H12.4481V15.1521C12.1216 14.8247 11.6353 14.7154 11.2001 14.872V10.4001C11.2001 9.73723 10.663 9.20012 10.0001 9.20012C9.33721 9.20012 8.8001 9.73723 8.8001 10.4001V14.872C8.35361 14.6982 7.84619 14.8083 7.51221 15.1521V15.2001H2.8001C2.13721 15.2001 1.6001 14.663 1.6001 14.0001V2.80012C1.6001 2.13723 2.13721 1.60012 2.8001 1.60012H5.64814C5.94033 1.59153 6.2251 1.69114 6.44814 1.8802L8.04814 3.20012H17.2001C17.863 3.20012 18.4001 3.73723 18.4001 4.40012Z" fill="%234E8D98"/><path d="M11.8973 15.7371C12.0422 15.8918 12.0348 16.1348 11.8801 16.2801L10.2801 17.8801C10.2461 17.9203 10.202 17.9508 10.152 17.968C10.0551 18.0109 9.94492 18.0109 9.84805 17.968C9.79805 17.9508 9.75391 17.9203 9.71992 17.8801L8.11992 16.2801C7.96523 16.1254 7.96523 15.8746 8.11992 15.7199C8.27461 15.5652 8.52539 15.5652 8.68008 15.7199L9.6 16.632V15.2V10.4C9.6 10.1789 9.77891 10 10 10C10.2211 10 10.4 10.1789 10.4 10.4V15.2V16.632L11.3199 15.7199C11.3254 15.7141 11.3313 15.7082 11.3371 15.7027C11.4918 15.5578 11.7348 15.5652 11.8801 15.7199C11.8859 15.7254 11.8918 15.7312 11.8973 15.7371Z" fill="%234E8D98"/></svg>');

}

.table-view .delete{
	background: #FCF2F2 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g clip-path="url(%23clip0_2260_742)"><path d="M17.5001 3.33333H14.9167C14.7233 2.39284 14.2116 1.54779 13.4678 0.940598C12.724 0.333408 11.7936 0.0012121 10.8334 0L9.16675 0C8.20658 0.0012121 7.27618 0.333408 6.53237 0.940598C5.78857 1.54779 5.27683 2.39284 5.08341 3.33333H2.50008C2.27907 3.33333 2.06711 3.42113 1.91083 3.57741C1.75455 3.73369 1.66675 3.94565 1.66675 4.16667C1.66675 4.38768 1.75455 4.59964 1.91083 4.75592C2.06711 4.9122 2.27907 5 2.50008 5H3.33341V15.8333C3.33474 16.938 3.77415 17.997 4.55526 18.7782C5.33638 19.5593 6.39542 19.9987 7.50008 20H12.5001C13.6047 19.9987 14.6638 19.5593 15.4449 18.7782C16.226 17.997 16.6654 16.938 16.6667 15.8333V5H17.5001C17.7211 5 17.9331 4.9122 18.0893 4.75592C18.2456 4.59964 18.3334 4.38768 18.3334 4.16667C18.3334 3.94565 18.2456 3.73369 18.0893 3.57741C17.9331 3.42113 17.7211 3.33333 17.5001 3.33333ZM9.16675 1.66667H10.8334C11.3503 1.6673 11.8544 1.82781 12.2764 2.1262C12.6985 2.42459 13.0179 2.84624 13.1909 3.33333H6.80925C6.98223 2.84624 7.30167 2.42459 7.72374 2.1262C8.14581 1.82781 8.64985 1.6673 9.16675 1.66667ZM15.0001 15.8333C15.0001 16.4964 14.7367 17.1323 14.2678 17.6011C13.799 18.0699 13.1631 18.3333 12.5001 18.3333H7.50008C6.83704 18.3333 6.20116 18.0699 5.73231 17.6011C5.26347 17.1323 5.00008 16.4964 5.00008 15.8333V5H15.0001V15.8333Z" fill="%23D05353"/><path d="M8.33333 15.0007C8.55435 15.0007 8.76631 14.9129 8.92259 14.7566C9.07887 14.6003 9.16667 14.3883 9.16667 14.1673V9.16732C9.16667 8.9463 9.07887 8.73434 8.92259 8.57806C8.76631 8.42178 8.55435 8.33398 8.33333 8.33398C8.11232 8.33398 7.90036 8.42178 7.74408 8.57806C7.5878 8.73434 7.5 8.9463 7.5 9.16732V14.1673C7.5 14.3883 7.5878 14.6003 7.74408 14.7566C7.90036 14.9129 8.11232 15.0007 8.33333 15.0007Z" fill="%23D05353"/><path d="M11.6666 15.0007C11.8876 15.0007 12.0996 14.9129 12.2558 14.7566C12.4121 14.6003 12.4999 14.3883 12.4999 14.1673V9.16732C12.4999 8.9463 12.4121 8.73434 12.2558 8.57806C12.0996 8.42178 11.8876 8.33398 11.6666 8.33398C11.4456 8.33398 11.2336 8.42178 11.0773 8.57806C10.921 8.73434 10.8333 8.9463 10.8333 9.16732V14.1673C10.8333 14.3883 10.921 14.6003 11.0773 14.7566C11.2336 14.9129 11.4456 15.0007 11.6666 15.0007Z" fill="%23D05353"/></g><defs><clipPath id="clip0_2260_742"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');

}

.table-view .edit,.table-view .download,.table-view .delete{
	background-position: center center;
    width: 36px;
    height: 36px;
	padding:8px;
    background-size: 20px;
    background-repeat: no-repeat;
	border-radius: 4px;
	border: 0;
	cursor: pointer;

}

.fooSection .fooNavigation{ 
    display: flex;
    list-style-type: none;
    grid-gap: 10px 29px;

}

.booklist tbody td{
	vertical-align: top;

}

/*=======End Admin dashboard CSS==========*/


/*=======user list CSS==========*/

.userSearch{
    display: flex;
    align-items: center;
    grid-gap: 10px 12px;
	justify-content: end;
    flex-grow: 1;

}

.userSearch div{
	width: 100%;
    position: relative;
    max-width: 353px;

}

.userSearch input{
	height: 60px;
    padding: 20px 50px 20px 20px;

}

.userSearch div button{
	position: absolute;
    right: 20px;
    top: 16px;
    border: 0;
    background-color: transparent;

}

.userlist tbody img{  
    width: 48px;  
    height: 48px;
	object-fit: cover;
}

.userlist tbody .userImg{
	padding: 0;
    border-radius: 50%;
    background-color: #D6E541;
    border: 1px solid #E3E3E3;
    overflow: hidden;
	color: #171717; 
	font-family: "Nueva Std";
	font-size: 22px; 
	font-weight: 700;
	width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.userlist tbody tr td:first-child{
	display:flex;
	align-items:center;
	grid-gap:20px

}

.userlist tbody tr td:nth-child(2){
	font-weight: 400;
	color:#373737;

}

/*=======End user list CSS==========*/



/*=======Modify user CSS==========*/

.retour a{   
    display: inline-flex;
    align-items: center;
    grid-gap: 10px;
    color: #4E8D98;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    text-decoration: none;

}

.modifyUser{
	max-width: 100%;

}

.save-btnfield{
	display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    grid-gap: 20px;

}

.save-btnfield .submitBtn{  
    border-radius: 10px;
    background: #D6E541;
    height: 60px;
    padding: 20px;
    border: 0;
    width: 100%;
    color: #2A2A2A;
    font-family: "Nueva Std";
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;

}

.save-btnfield a{ 
    display: flex;
    align-items: center;
    gap: 4px;

}

.tableHeader{
	padding: 32px 24px 0 24px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
	grid-gap: 12px;

}

.modiuser{

	background-color:#fff;

}

.modify-access{
	border-radius: 4px;
    background: #EFF5F6;
    padding: 8px;
    color: #4E8D98;
    font-family: Inter;
    font-size: 13px;
    font-weight: 400;
    border: 0;
    display: inline-flex;
    align-items: center;
    grid-gap: 10px;
    cursor: pointer;

}

.modify-access img{
	width:17px!important;

}

.table-view.modiuser tbody tr td{
	font-weight:400

}

.table-view.modiuser tbody tr td:nth-child(2){
	font-weight:600

}

.modiuser td a{
	color: #D05353;
    text-decoration: none;

}

.tableHeader .filterIcon{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #4E8D98;
    background: #FFF;
    cursor: pointer;
	position:relative;

}

/*=======End Modify user CSS==========*/



/*=======add user CSS==========*/

.addUser h2{   

    text-align: center;

    padding: 50px 0;}

.addUser{   
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}

/*=======End add user CSS==========*/




/*=======Customer dashboard CSS==========*/

.custoDash{ 
    max-width: max-content!important;

}

.custoDash .filterIcon{ 
    padding: 20px 20px;
    border-radius: 10px;
    border: 1px solid #4E8D98;
    background: #FFF;
    color: #4E8D98;
    font-family: "Nueva Std";
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 60px;
    width: 190px;
	cursor:pointer;

}

.grid-view {
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 25px;
	margin-top: 12px;
}
.grid-viewBox{
	border-radius: 10px;
    background: #FFF;
    display: grid;
    /*grid-template-rows: 340px 1fr;*/
    align-items: start;	
    grid-gap: 2px;	
}
.grid-ImgBox{  
    padding: 10px 10px 0px 10px;
    display: flex;
    align-items: start;
    justify-content: center;
    height:100%;
}
.grid-ImgBox a{background:none;}
.boxContent{
	padding: 12px 16px 20px 16px;

}
.boxContent ul{ 
    padding-left: 0;
    margin-bottom: 0;
    
}
.boxContent ul li{
	list-style-type: none;
    display: flex;
    justify-content: space-between;
    color: #535353;
    font-family: Inter;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);

}

.boxContent ul li:last-child{
	border-bottom: none;

}

.boxContent h4{
	color: #171717;
    font-family: "Nueva Std";
    font-size: 28px;
    font-weight: 400;
	line-height:1;

}

.grid-viewBox .boxBtn{
	border-radius: 4px;
    background: #3D6E77;
    padding: 7px 12px;
    color: #FFF;
    font-family: Inter;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22px;
    text-transform: uppercase;
    border: 0;
    margin-bottom: 12px;

}
.grid-viewBox a{text-align:center;}
.grid-viewBox img{
	border-radius: 8px;
	width: auto;
	max-height: 320px;
    object-fit: contain;
    max-width: 100%;
	

}

.ctacntnt{
	padding: 80px 10px;
    text-align: center;
    border-top: 1px dashed #E3E3E3;
    margin-top: 70px;

}

.ctacntnt .cstmBtn{
	margin-top:32px;

}


/*popup CSS*/

.addBook-popup{
	position: fixed;
    background-color: rgba(0, 0, 0, 0.22);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
	display:none;

}

.Overlay-popup{
	display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
	padding: 0 10px;

}

.book-popup{
	border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    padding: 40px 24px;
    width: 100%;
    max-width: 482px;
	position:relative;

}

.book-popup .cstmBtn{
	margin-top:16px;
	width: 100%;
    background-color: #F7F7F7;
    color: #2a2a2a4d;
	pointer-events: none;

}

.closePopup{
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 20px;
	cursor: pointer;

}

.book-popup p{
	margin-top:10px;
	margin-bottom:32px;

}

.book-popup .cstmBtn.active{  
    pointer-events: auto;
	background: #D6E541;
	color: #2A2A2A;

}

.book-popup .cstmBtn.active svg g{

	opacity:1;

}

/*.error{display:none} */
.error:not(input.error){
	color: red;
}
.error p{  
    color: #D05353;
    font-family: Inter;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.13px;
    margin-bottom: 0px!important;
	display: grid;
    grid-template-columns: 20px 1fr;
    text-align: left;

}

/*End popup CSS*/

.ctacntnt> h2{
	max-width:45%;
	margin: 0 auto;

	}

.sucess{
	display:none;
	color: #373737;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-weight: 400;

}

div.filterDRP{
	border-radius: 8px;
    background: #FFF;
    box-shadow: 4px 10px 50px 0px rgba(0, 0, 0, 0.12);
    padding: 16px 0px;
    position: absolute;
    width: 241px;
    right: 0;
    display:none;
	top: 68px;

}
.filterDRP ul {padding-left:0;    margin-bottom: 0;}
.filterDRP ul li{
	border-bottom: 1px solid #E3E3E3;
    list-style-type: none;
    padding: 15px 20px;
    color: #2A2A2A;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    grid-gap: 10px;
    align-items: center;
}	
.filterDRP ul li label{margin-bottom:0}
.filterDRP ul li input[type="radio"]{
	accent-color: #4E8D98;
	width:20px;
	height:20px
	}
.applyclose-links{
	display: flex;
    padding: 20px 20px 0px 20px;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;

}

.applyclose-links a{
	color: rgba(23, 23, 23, 0.55); 
	font-family: Inter;
	font-size: 16px; 
	font-weight: 400;
	text-decoration:none;
	text-transform: capitalize;
}

.applyclose-links a.apply{
	color:#4E8D98;
	font-weight:600;
}

/*=======End Customer dashboard CSS==========*/



/*=======Add book dashboard CSS==========*/
#book_cover ~ label{  
    height: calc(100% - 35px);
    border-radius: 10px;
    border: 1px dashed #E3E3E3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	cursor:pointer;
}
#book_cover ~ label p:last-child{font-size:13px}
.form-box.addbook{padding: 32px 24px 64px 24px;}
.addbook form{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;

}
#pdf-select{
	border-radius: 10px;
    border: 1px dashed #E3E3E3;
    padding: 20px;
	cursor:pointer;
}
#pdf-select p{    text-align: left;
    width: calc(100% - 73px);
    padding-left: 55px;}
#pdf-select  #pdf-icon{float: left;}
#pdf-preview{border-radius: 10px;
    border: 1px dashed var(--Gainsboro, #E3E3E3);
    padding: 20px;}
    #pdf-preview p{    text-align: left;
    width: calc(100% - 73px);
    padding-left: 55px;}
#pdf-preview  img{float: left;}
#pdf-preview:empty{display:none;}
.addbook select{padding: 10px 17px;}
.addbook .field-wrapper{margin-top: 0px;}
.addbook .field-wrapper .field.fullWidth{grid-column:span 12;position:relative;}

.addbook {
    max-width: 100%;
}

.addbook #book_pdf{ 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.addBook-btn{  
    max-width: 215px;
    width: 100%;
    height: 36px;
    padding: 8px;
    display: inline-flex;
    justify-content: left;
    align-items: center;
    font-family: Inter;
    font-size: 13px;
    font-weight: 400;
    grid-gap: 10px;
	border: 0;

}

.markuse{
	color: #D05353;
	border-radius: 4px;
	background: rgba(208, 83, 83, 0.09);
	cursor: pointer;

}

.markava{
    color:#4E8D98;
    border-radius: 4px;
    background: #EFF5F6;
    cursor: pointer;

}

.table-view tbody .addBook-btn img{width: 20px;}
.table-view.addbook-table tbody tr td:nth-child(2){color: #3D6E77;}

.addbook-table .genCode{ 
    text-align: center;
    padding: 60px 0;	

}

.disableC{ 

    background: rgba(227, 227, 227, 0.54);
    color: #2a2a2a66;
    width: 275px;

}

.noCode{display:none;}
.field-wrapper-right .field{
   height: 100%;
  }
.field-wrapper-right .field input{
   height: 100%;
  }
.field-wrapper-right .field{position: relative;}
.field-wrapper-right #image-preview{  
    position: absolute;
    top: 28px;
    bottom: 0;
    height: calc(100% - 35px);
    border-radius: 10px;	
	width:100%;
}
.field-wrapper-right #image-preview:empty{display:none;}
.field-wrapper-right #image-preview img{
    border-radius: 10px;
    height: 100%!important;
    object-fit: cover;
	width:100%;
	background-color:#fff;
}
.addbook .delete-icon{
    background-color: rgba(252, 242, 242, 1);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
}
.addbook .delete-icon:before{color: rgba(208, 83, 83, 1);}

.addbook .delete-icon-edit{
    background-color: rgba(252, 242, 242, 1);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
}
.addbook .delete-icon-edit:before{color: rgba(208, 83, 83, 1);}
/*=======End Add book dashboard CSS==========*/

/*=======Modal CSS==========*/
#modifyAccessCodeForm input{   
    padding: 0px;
}
#modifyAccessCodeForm .btn{
    background-color: #D6E541;
    border: 0;
    color: #2A2A2A;
    font-family: "Nueva Std";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 15px 20px;
    width: 100%;
}
.modal-dialog{  
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}
.swal2-popup button[type="button"]{

    display: inline-block;
    background-color: #D6E541;
    min-width: 100px;
    color: #2A2A2A;
    font-family: "Nueva Std";
    font-size: 18px;
    font-weight: 700;

}
.modal-header{  
    border-bottom: 0;
    padding: 0px;
    
}
.modal-body{padding: 0px;}
.modal-body form label{
    font-family: Inter;
    text-align: center;
}
.modal-body form input:not(input[type="radio"]){  
    margin-top: 32px;
    color:  #373737;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
 }
 .modal-body form input[type="radio"] ~ label{text-align:left;}
.modal-content .btn-close{
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    padding: 0;
    margin: 0;
}
.modal-title{  
    text-align: center;
    width: 100%;    line-height: 1;}
.modal-body .cstmBtn {width:100%;}
.modal-body form input::placeholder{opacity: 0.3;}
/*=======End CSS==========*/
/*=======FAQ CSS==========*/
.accordion-button:not(.collapsed){    
    background-color: #3D6E77;
    color: #fff;
    
}

.accordion-button{font-size: 30px;}
.accordion-button:hover{ 
    background-color: #3D6E77;
    color: #fff;
    
}
.accordion-button:focus{box-shadow: none;}
 #faqAccordion{  
    max-width: 992px;
    margin: 0 auto;
}   
.accordion-body{font-family: 'Inter';}
.faq-section{height: calc(100% - 280px);margin-top: 80px;}
.accordion-button:not(.collapsed)::after,.accordion-button:hover:after{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23fff"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');}

/*=======End FAQ CSS==========*/
/*=======Button animation========*/
.cstmBtn {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    z-index: 2;
}

.cstmBtn:before, .cstmBtn:after {
    z-index: -1;
    position: absolute;
    top: 50%;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #3D6E77;
    border-radius: 50%;
    transition: 0.5s ease-in-out;
}
.cstmBtn:before {
    left: -20px;
    transform: translate(-50%, -50%);
}

.cstmBtn:after {
    right: -20px;
    transform: translate(50%, -50%);
}
.cstmBtn:hover {
    color: #fff !important;
    transition: 0.5s ease-in-out;
}

.cstmBtn:hover:before {
    -webkit-animation: criss-cross-left 0.8s both;
    animation: criss-cross-left 0.8s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.cstmBtn:hover:after {
    -webkit-animation: criss-cross-right 0.8s both;
    animation: criss-cross-right 0.8s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.cstmBtn:hover svg path{fill: #fff;}

/*=======End Button animation========*/


/*=========my css 26-12-24========*/
div.py-4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.form-box p{margin-bottom:0;}
input.shadow-sm {
    box-shadow: none !important;
}
/*=========End my css 26-12-24========*/





/*=======Mobile CSS==========*/

@media only screen and (max-width:1024px){

.ctacntnt> h2 {

    max-width: 100%;

}	

.grid-view {    

    grid-template-columns: repeat(3, 1fr);

}

}

@media only screen and (max-width:767px){
.head-btn{padding: 10px 10px;}	
.LogoCol img {
    max-width: 90px;
}	
.addbook form {    
    grid-template-columns: 1fr;
    grid-gap: 45px;
}
.fooSection {
    position: relative;}
.field-wrapper-right .field input{    height: 250px;}
.field-wrapper-right #image-preview{height: calc(100% - 28px);width: 100%;}
.field-wrapper-right #image-preview img{  width: 100%;}

.navbar{position:static;}
.navbar ul.nav-links{padding-left:0;}

h1{
	font-size: 32px;

}	

h2{
	font-size: 28px;

}

.cstmCol{
	grid-gap: 10px;

}

.grid-row{
	grid-template-columns: 1fr;
	grid-gap: 25px;

}

.gridBox-middle h6{
	text-align:center;

}

.save-btnfield{

	grid-template-columns: 1fr;

}

.save-btnfield .submitBtn{
	max-width:172px

}

.middleCol .nav-links {
	position:absolute;
	top: 98px;
	left: 0;
	flex-direction: column;
	background-color: #333;
	width: 100%;
	display:none;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	z-index: 99;

    }

.middleCol ul li a{
	width: 100%;
    color: #fff;
    display: inline-block;
    padding: 20px 10px;
    border-bottom: 1px solid #ffffff4f;
	text-align: left;

}
.middleCol ul li a:hover{
    background-color: #d6e541;
}
.dropdown-content a:hover{background-color: #d6e541!important;}
.hamburger {
	display: flex;
	border: 1px solid #2A2A2A;
	padding: 10px 5px;
	border-radius: 4px;
	        width: 40px;
}

.hamburger:hover{
	background-color: #d6e541;
    border: 1px solid #d6e541;

}

.header-section .LogoCol{
	order: 1;

}

.header-section .middleCol{
	order: 3;
	padding: 0 5px;

}

.header-section .cstmCol{
	order: 2;

}

.header-section .col-parent{
	display: grid;
    grid-template-columns: 100px 1fr 50px;

}

.grid-view { 
    grid-template-columns: repeat(2, 1fr);

}

.col-parent {

    display:block;

}

.userSearch{
    justify-content: flex-start;

}

}

@media only screen and (max-width:640px){

.userSearch{
	flex-direction: column;
    align-items: flex-start;

}

.grid-view {    

    grid-template-columns: repeat(1, 1fr);

}

.field-wrapper .field {
    grid-column: span 12;

}	 

.form-box{  
	padding: 40px 10px;

}

.field-wrapper .login-links	{
	flex-direction: column;
    align-items: flex-start;
    grid-gap: 10px;

	}

}

/*=======End Mobile CSS==========*/

.modal-content{
    border-radius: 16px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    padding: 40px 24px;
}

.rolFilter{  
    position: absolute;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 4px 10px 50px 0px rgba(0, 0, 0, 0.12);
    width: 241px;
    padding: 16px 0;
	display:none;
	z-index: 9;
}
.rolFilterdrp{cursor:pointer;}
.rolFilter ul{
    padding-left:0;
    margin-bottom: 0;
    
}
.rolFilter li{   
    border-bottom: 1px solid #E3E3E3;
    list-style-type: none;
    padding: 15px 20px;
    color: #2A2A2A;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    grid-gap: 12px;
}
.rolFilter li input[type="radio"]{
    accent-color: #3d6e77;
    width: 20px;
    height: 20px;
}
.applyclose-links .apply{
    color: #4E8D98;
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    background-color: transparent;
    position:static;
}

.form-box.modifyUser .field-wrapper-right #user_image ~ label{
    border-radius: 10px;
    border: 1px solid #E3E3E3;
    padding: 20px;
    text-align: center;
    cursor: pointer;
	margin-bottom:0;
}

.modifyUser-formFields{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
}
.modifyUser-formFields .field-wrapper-right{ margin-top: 32px;}
.modifyUser-formFields .delete-icon {
    background-color: rgba(252, 242, 242, 1);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
}
.modifyUser-formFields .delete-icon:before {
    color: rgba(208, 83, 83, 1);
}
.modifyUser-formFields .delete-icon-edit{
    background-color: rgba(252, 242, 242, 1);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
}
.modifyUser-formFields #image-preview img{
	object-position: top;
}

.modifyUser-formFields .delete-icon-edit:before {
    color: rgba(208, 83, 83, 1);
}
.profile_user{ 
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
}
.profile_user .field-wrapper-right{ margin-top: 32px;}
.profile_user .delete-icon {
    background-color: rgba(252, 242, 242, 1);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
}
.profile_user .delete-icon:before {
    color: rgba(208, 83, 83, 1);
}
.profile_user .delete-icon-edit{
    background-color: rgba(252, 242, 242, 1);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 8px;
    z-index: 1;
    cursor: pointer;
}
.profile_user #image-preview img{
	object-position: top;
}
.profile_user .delete-icon-edit:before {
    color: rgba(208, 83, 83, 1);
}
#pdf-container canvas {
    width: auto;
}
.comment-box{   
    border-radius: 8px;
    background: #FFF;
    box-shadow: 4px 10px 50px 0px rgba(0, 0, 0, 0.12);
    padding: 24px 16px;
}
.table-view.booklist th a {color: #fff;}
.table-view.booklist th a svg{   
    width: 20px;
    height: 20px;
}
.table-view.userlist tbody {
position: relative;
}
.table-view.userlist tbody tr td h2{
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 0px;
	padding: 20px;
	background-color:#fff;
}
.table-view.booklist tbody{
position: relative;
}
.table-view.booklist tbody tr td h2{
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 0px;
	padding: 20px;
	background-color:#fff;
}