@charset "utf-8";
/* CSS Document */

header{
    background: var(--white-color);
    min-height: 70px;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

header .inner-div{
    width: 85%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .inner-div .left-div{
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 5px 0px;
}

header .inner-div .left-div .logo-div{
    width: 160px;
}

header .inner-div .left-div .logo-div img{
    width: 100%;
}

header .inner-div .left-div ul{
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
}

header .inner-div .left-div ul li{
    list-style: none;
    height: 40px;
    display: flex;
    align-items: center;
    color: var(--sub-body-color);
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 13px;
    transition: all 0.2s ease-in 0.2s;
    background: rgba(68, 68, 68, .1);
}

header .inner-div .left-div ul li:hover, header .inner-div .left-div ul .active-li{
    background: rgba(68, 68, 68, .2);
}

header .inner-div .btn{
    color: var(--sub-body-color);
    font-family: sub-title-font;
    border: rgba(179, 176, 176, 0.5) 1px solid;
    height: 40px;
    padding: 0px 15px;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
}

header .inner-div .btn:hover{
    background: rgba(179, 176, 176, 0.2);
}

header .inner-div .mobile-logout{
	height:40px;
	min-width:40px;
	padding: 0px 12px;
	display:none;
	background: none;
    border: rgba(179, 176, 176, 0.5) 1px solid;
	border-radius: 5px;
    color: var(--text-color);
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
	cursor:pointer;
}

header .inner-div .mobile-logout i{
	font-size: 19px;
}

header .inner-div .mobile-logout:hover{
	background: rgba(255, 255, 255, .2);
}


@media all and (max-width:760px) {
	header .inner-div{
		width: 90%;
	}
}

@media all and (max-width:460px) {
	header .inner-div .left-div .logo-div{
		width: 130px;
	}
	header .inner-div .left-div ul li{
		font-size: 12px;
	}
	header .inner-div .btn{
		display: none;
	}
	header .inner-div .mobile-logout{
		display:block;
	}
}

@media all and (max-width:380px) {
	header .inner-div{
		gap: 10px;
	}
	header .inner-div .left-div{
		gap: 10px;		
	}
	header .inner-div .left-div .logo-div{
		width: 110px;
	}
	header .inner-div .left-div ul li{
		font-size: 11px;
	}
}




.body-content-div {
    position: absolute;
    width: 100%;
    height: calc(100% - 110px);
    padding-bottom: 40px;
    overflow: auto;
    bottom: 0px;
    display: flex;
    flex-direction: column;
}

.mini-profile-div{
	width: 100%;
	padding: 65px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../../images/title-bg.jpg) no-repeat right center;
    background-size: cover;
}

.mini-profile-div .profile-content{
	width: 70%;
    max-width: 1200px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.mini-profile-div .profile-content span{
	color: #FFF;
	font-size: 13px;
}

.mini-profile-div .profile-content .main-profile{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mini-profile-div .profile-content .main-profile .inner-profile{
	width: 100%;
	display: flex;
	align-items: center;
	gap: 15px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .img-div {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
	background: var(--white-color);
}

.mini-profile-div .profile-content .main-profile .inner-profile .img-div img {
    width: 100%;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div{
	width: calc(100% - 95px);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div h2{
	color: var(--white-color);
	font-size: 28px;
	font-family: sub-title-font;
	padding: 0px;
	margin: 0px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div h2 span{
	font-size: 28px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div .info{
	display: flex;
    flex-direction: column;
	color: var(--white-color);
	font-size: 14px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div .info .info-details{
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div .info .info-details p{
	padding: 0px;
	margin: 0px;
    font-size: 11px;
}

.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div .info .info-details span{
	font-size: 12px;
	color: var(--secondary-color);
}


@media all and (max-width:760px) {
	.mini-profile-div .profile-content{
		width: 90%;
	}
}

@media all and (max-width:500px) {
	.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div h2,
	.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div h2 span{
		font-size: 5vw;
	}
}

@media all and (max-width:450px) {
	.mini-profile-div .profile-content .main-profile .inner-profile .img-div {
		width: 60px;
		height: 60px;
	}
	.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div{
		width: calc(100% - 75px);
	}
	.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div .info .info-details{
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	.mini-profile-div .profile-content .main-profile .inner-profile .pro-text-div .info .info-details p span{
		font-size: 3vw;
	}
}





.content-div{
    padding-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.content-div .dashboard-content{
    width: 70%;
    max-width: 1200px;
    min-height: 100px;
    border: rgba(179, 176, 176, 0.5) 1px solid;
    border-radius: 5px;
}

.content-div .dashboard-content h2{
    background: rgba(179, 176, 176, 0.3);
    margin: 0px;
    padding: 0px;
    font-family: body-font;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
    font-size: 16px;
    border-radius: 5px 5px 0px 0px;
    color: var(--sub-body-color);
}

.content-div .dashboard-content .list{
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
}

.content-div .dashboard-content .list .student-profile{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: rgba(179, 176, 176, 0.5) 1px solid;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
}

.content-div .dashboard-content .list .student-profile:hover{
    background: rgba(179, 176, 176, 0.2);
    border-radius: 5px;
}

.content-div .dashboard-content .list .student-profile .details{
    display: flex;
    gap: 20px;
}

.content-div .dashboard-content .list .student-profile .details .pix{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    overflow: hidden;
}

.content-div .dashboard-content .list .student-profile .details .pix img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-div .dashboard-content .list .student-profile .details .text{
	width: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    color: var(--sub-body-color);
    gap: 5px;
}

.content-div .dashboard-content .list .student-profile .details .text h3{
    padding: 0px;
    margin: 0px;
    color: var(--sub-body-color);
    transition: all 0.2s ease-in 0.2s;
}

.content-div .dashboard-content .list .student-profile .details .text .info{
    display: flex;
    gap: 20px;
    align-items: center;
}

.content-div .dashboard-content .list .student-profile .details .text .info p{
    padding: 0px;
    margin: 0px;
    font-size: 14px;
}

.content-div .dashboard-content .list .student-profile .details .text .info span{
    color: var(--secondary-color);
    font-size: 12px;
}

.content-div .dashboard-content .list .student-profile .details .text .info .status-btn{
   background: #444;
   color: var(--white-color);
   border: none;
   padding: 2px 10px;
   border-radius: 15px;
   font-size: 10px;
   font-family: sub-title-font;
}

.content-div .dashboard-content .list .student-profile .details .text .info .ACTIVE{
    background: #42732c;
}

.content-div .dashboard-content .list .student-profile .details .text .info .GRADUATED{
    background:var(--primary-color);
}

.content-div .dashboard-content .list .student-profile .btn{
    border: none;
    height: 40px;
    padding: 0px 15px;
    font-family: sub-title-font;
    font-size: 12px;
    background: var(--sub-body-color);
    color: var(--white-color);
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
    border-radius: 5px;
}

.content-div .dashboard-content .list .student-profile:hover .btn{
    background: var(--secondary-color);
}

.content-div .dashboard-content .list .student-profile:hover .details .text h3{
    text-decoration: underline;
}



@media all and (max-width:880px) {
	.content-div .dashboard-content{
        width: 90%;
    }
}

@media all and (max-width:680px) {
	.content-div .dashboard-content .list .student-profile{
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    .content-div .dashboard-content .list .student-profile .btn{
        height: 30px;
        padding: 0px 10px;
        font-size: 11px;
    }
}

@media all and (max-width:500px) {
    .content-div .dashboard-content .list{
        padding: 5px;
    }
    .content-div .dashboard-content .list .student-profile .details .text{
        gap: 0px;
    }
    .content-div .dashboard-content .list .student-profile .details .text h3{
        font-size: 15px;
    }
	.content-div .dashboard-content .list .student-profile .details .text .info{
        display: flex;
        gap: 5px;
        flex-direction: column;
        align-items: flex-start;
    }
}


@media all and (max-width:380px) {
	.content-div .dashboard-content .list .student-profile .details .text .info .status-btn{
		font-size: 9px;
		padding: 2px 12px;
	}
}


/* User Form Style*/
.user-profile-div{
	position: fixed;
	height: 100%;
	width: 90%;
	right: 0px;
	background: var(--white-color);
}

.user-profile-div .top-panel-div{
	width: calc(100% - 60px);
	min-height: 50px;
    padding: 0px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--sub-body-color);
    font-family: sub-title-font;
	font-size: 14px;
}

.user-profile-div .top-panel-div .inner-top{
    width: 100%;
	min-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	border-bottom: #f5f5f5 1px solid;
}

.user-profile-div .top-panel-div .inner-top .icon-title-div{
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-profile-div .top-panel-div .inner-top .icon-title-div span {
    color: var(--sub-body-color);
    font-size: 14px;
    font-family: sub-title-font;
}

.user-profile-div .top-panel-div .inner-top .icon-title-div span i{
    color: var(--secondary-color);
    font-size: 14px;
}

.user-profile-div .top-panel-div .inner-top .close{
    display: flex;
    align-items: center;
	justify-content: center;
    color: var(--sub-body-color);
    font-family: sub-title-font;
	background: #f8f8f8;
    border: none;
	width: 35px;
	height: 35px;
	font-size: 13px;
    border-radius: 100%;
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
}

.user-profile-div .top-panel-div .inner-top .close:hover{
    background: var(--secondary-color);
	color: var(--white-color);
}


.user-profile-div .profile-content-div{
	height: calc(100% - 50px);
	width: 100%;
	overflow: auto;
}

.user-profile-div .profile-content-div .bg-img{
	position: relative;
    width: 100%;
    min-height: 50px;
	padding: 20px 0px;
	background: url(../../../all-images/images/title.png) center no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-profile-div .profile-content-div .bg-img .mini-profile{ 
    width: 90%;
	display: flex;
	align-items: center;
	gap: 10px;
}
 
.user-profile-div .profile-content-div .bg-img .mini-profile .img-div{ 
    width: 90px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden; 
}

.user-profile-div .profile-content-div .bg-img .mini-profile .img-div img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div{ 
    width: calc(100% - 100px);
	display: flex;
}
 
.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text{ 
    width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div{ 
    color: #999;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div h2{
	padding: 0px;
	margin: 0px; 
	font-size: 30px;
	color: var(--sub-body-color);
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .text{ 
	width: 100%;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
    color: #776c6c;
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .status-btn{
	display: flex;
	align-items: center;
	background: #444;
	border: none;
	color: var(--white-color);
	padding: 2px 10px;
	border-radius: 15px;
	font-size: 8px;
    margin-left: 5px;
	font-family: sub-title-font;
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .ACTIVE{
    background: #42732c;
	color: var(--white-color);
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .SUSPEND{
	background: var(--secondary-color);
	color: var(--white-color);
}

.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .name{ 
    overflow: hidden;
    color:  var(--sub-body-color);
    font-size: 28px;
    font-family: title-font;
}

 
.user-profile-div .profile-content-div .btn-div{
	width: 100%;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(124, 124, 124, 0.1);
}

.user-profile-div .profile-content-div .btn-div .div-in{
	width: 90%;
	display: flex;
	align-items: center;
}

.user-profile-div .profile-content-div .btn-div .div-in ul{
	position: relative;
	padding: 0px;
	margin: 0px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.user-profile-div .profile-content-div .btn-div .div-in ul li{
	padding: 10px 15px;
	list-style: none;
	font-size: 14px;
	color: var(--sub-body-color);
	font-family: body-font;
	cursor: pointer;
	transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}

.user-profile-div .profile-content-div .btn-div .div-in ul li i{
	color: var(--secondary-color);
	font-size: 11px;
}

.user-profile-div .profile-content-div .btn-div .div-in ul li:hover,
.user-profile-div .profile-content-div .btn-div .div-in ul .active{
	background: var(--white-color);
	color: var(--secondary-color);
}


.user-profile-div .profile-content-div .btn-div .div-in ul li ul{
    position: absolute;
    width: 200px;
    min-width: 200px;
    height: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--white-color);
    margin-left: -200px;
    margin-top: 5px;
    border-radius: 10px;
    border:  rgba(179, 176, 176, 0.5) 1px solid ;
    display: none;
    box-shadow: 0px 0px 10px 3px rgba(82, 82, 82, 0.1); 
	z-index: 800;
}

.user-profile-div .profile-content-div .btn-div .div-in ul li:hover ul{
    display: block; 
}

.user-profile-div .profile-content-div .btn-div .div-in ul li ul li{
    list-style: none;
    width: calc(100% - 30px);
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--body-color);
    transition: all 0.2s ease-in 0.2s; 
}

.user-profile-div .profile-content-div .btn-div .div-in ul li ul li:hover{
    width: calc(100% - 20px);
    padding-left: 20px;
}

.user-profile-div .profile-content-div .btn-div .div-in ul li ul li i{
    color: var(--secondary-color);
}



.user-profile-div .profile-content-div .field-back-div{ 
	position: relative;
    width: 100%;
	min-height: 350px;
	padding: 30px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
}


.user-profile-div .profile-content-div .field-back-div .field-inner-div{ 
	width: 90%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

@media all and (max-width:900px) {
	.user-profile-div{
		width: 100%;
	}
}


@media all and (max-width:830px) {
	.user-profile-div .profile-content-div .btn-div .div-in ul .hide-li{
		display: none;
	}
}

@media all and (max-width:650px) {
	.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div h2{
		font-size: 4.5vw;
	}
	.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .text{ 
		flex-wrap: wrap;
	}
}

@media all and (max-width:520px) {
	.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div{ 
		width: 100%;
	}
	.user-profile-div .profile-content-div .btn-div .div-in ul li{
		font-size: 12px;
	}
}

@media all and (max-width:400px) {
	.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div .inner-text .text-div .text{ 
		font-size: 10px;
	}
}

@media all and (max-width:320px) {
	.user-profile-div .profile-content-div .bg-img .mini-profile .img-div{ 
		width: 70px;
		height: 70px;
	}
	.user-profile-div .profile-content-div .bg-img .mini-profile .text-back-div{ 
		width: calc(100% - 80px);
	}
}




.detail-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-details {
    width: calc(100% - 40px);
    min-height: 100px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(179, 176, 176, 0.1);
    border-radius: 10px;
}

.profile-details .title {
    height: 40px;
    width: 100%;
    display: flex;
    gap: 10px;
    font-size: 14px;
    align-items: center;
    color: var(--sub-body-color);
    font-family: sub-title-font;
}

.profile-details .title i{
    color: var(--secondary-color);
}

.profile-details .details-div {
    width: 100%;
    height: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.profile-details .details {
    width: 30%;
    min-width: 160px;
    padding: 10px;
    height: auto;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    border-bottom: #ccc 1px solid;
    color: var(--text-color2);
}

.profile-details .details span {
    color: var(--sub-body-color);
    font-size: 11px;
    font-family: sub-title-font;
}

@media all and (max-width:700px) {
    .profile-details .details-div {
        width: 100%;
        gap: 0px;
        justify-content: space-between;
    }

    .profile-details .details {
        width: 45%;
    }
}

@media all and (max-width:470px) {
    .profile-details .details {
        width: calc(100% - 20px);
    }
}



.card-back-div {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
	flex-wrap: wrap;
}

.card-back-div .card-div {
    width: 23%;
    min-width: 150px;
    min-height: 150px;
    border-radius: 10px;
    border: rgba(179, 176, 176, 0.5) 1px solid;
    background: rgba(179, 176, 176, 0.2);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
}

.card-back-div .card-div .pix {
    width: 100%;
    max-height: 130px;
    min-height: 100px;
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
    background: var(--white-color);
}

.card-back-div .card-div .pix img{
    width: 100%;
    object-fit: cover;
}
.card-back-div .inactive-card-div .pix img{
	filter: grayscale(1);
}

.card-back-div .card-div .text {
    color: var(--sub-body-color);
    font-family: sub-title-font;
    height: 50px;
    width: calc(100% - 30px);
    padding: 0px 15px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in 0.2s;
}

.card-back-div .card-div:hover{
    box-shadow: 0px 0px 10px 3px rgba(82, 82, 82, 0.1);
    -moz-transform:scale(1.02) translate(1px,0px);
	-webkit-transform:scale(1.02) translate(1px,0px);
    background: var(--secondary-color);
}
.card-back-div .inactive-card-div:hover {
    box-shadow: none;
    -moz-transform: scale(1) translate(0px, 0px);
    -webkit-transform: scale(1) translate(0px, 0px);
    transform: scale(1) translate(0px, 0px);
    background: rgba(179, 176, 176, 1);
}


@media all and (max-width:520px) {
	.card-back-div {
		gap: 10px;
	}
	.card-back-div .card-div {
		width: 45%;
	}
}


.caption-success-div{
	width:30%;
	min-width:300px;
	display: flex;
	align-items: center;
	justify-content: center;
	background:var(--white-color);
	border-radius: 5px;
}

.caption-success-div .div-in{
	padding:50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size:14px;
}
.caption-success-div .div-in .img{
	width:100px;
	height:100px;
	border-radius:100%;
	margin:auto;
	border:#CCC 2px solid;
}
.caption-success-div .div-in .img img{
	width:100%;
	border-radius:100%;
}
.caption-success-div .div-in h2{
	color:#444;
	text-align:center;
	padding: 0px;
	margin: 0px;
}

.caption-success-div .div-in .btn-div{
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
}

.caption-success-div .div-in .btn-div .btn{
	border:none;
	height:45px;
	min-width: 130px;
	background: linear-gradient(to right, #008B00, #1c1d1c);
	color:var(--white-color);
	border-radius:5px;
	font-family:sub-title-font;
	font-size:15px;
	transition:all 0.2s ease-in 0.2s;
	-moz-transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
	cursor:pointer;
}

.caption-success-div .div-in .password-div .password-btn{
	background: var(--primary-color);
	color:var(--white-color);
	min-width: 150px;
}



.caption-success-div .div-in .btn-div .btn:hover{
	background: linear-gradient(to left, #008B00, #1c1d1c);
}

.caption-success-div .div-in .btn-div .no-btn:hover{
	background: linear-gradient(to left, #D90000, #1c1d1c);
}

.caption-success-div .div-in .btn-div .no-btn{
	background: linear-gradient(to right, #D90000, #1c1d1c);
}

.caption-success-div .div-in .password-div .password-btn:hover{
	background: var(--secondary-color);
	color:var(--sub-body-color);
}

.caption-success-div .div-in .btn-div .done-btn{
	background: var(--sub-body-color);
}

.caption-success-div .div-in .btn-div .done-btn:hover{
	background: var(--sub-body-color);
	opacity: .9;
}

@media all and (max-width:500px) {
	.caption-success-div{
		width:96%;
	}
}


/* Slide Form Style*/
.slide-form-div{
	position:fixed;
	height: 100%;
	width: 450px;
	right: 0px;
	top: 0px;
	background-color: var(--white-color);
	overflow: hidden;
}

.slide-form-div .title-panel-div{
	width: calc(100% - 60px);
	height: 50px;
    padding: 0px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--sub-body-color);
    font-family: sub-title-font;
	font-size: 14px;
}

.slide-form-div .title-panel-div .inner-top{
    width: 100%;
	height: 50px;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	border-bottom: #f5f5f5 1px solid;
}

.slide-form-div .title-panel-div .inner-top span i{
    font-size: 13px;
	color: var(--secondary-color);
}

.slide-form-div .title-panel-div .inner-top .close{
    display: flex;
    align-items: center;
	justify-content: center;
    color: var(--sub-body-color);
    font-family: sub-title-font;
	background: #f8f8f8;
    border: none;
	width: 35px;
	height: 35px;
	font-size: 13px;
    border-radius: 100%;
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
}

.slide-form-div .title-panel-div .inner-top .close:hover{
    background: var(--secondary-color);
	color: var(--white-color);
}

.slide-form-div .container-back-div{
	position: absolute;
    width: 100%;
	height: calc(100% - 65px);
	top: 50px;
	padding-bottom: 15px;
	overflow: auto;
}

.slide-form-div .container-back-div .inner-container{
	width: calc(100% - 60px);
    padding: 20px 30px 30px 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.slide-form-div .container-back-div .text_field_back_container{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 8px 0px;
}

.slide-form-div .container-back-div .text_field_back_container .col-back-div{
	display: flex;
	gap: 8px;
}

.slide-form-div .container-back-div .text_field_back_container .col-back-div .col-1{
	width: 49%;
}







.slide-form-div .container-back-div .inner-container .title{
	font-size:14px;
	font-family: body-font;
	color: var(--text-color);
}

.slide-form-div .container-back-div .inner-container .title span{
	color: var(--subactive-color);
}


.slide-form-div .container-back-div .inner-container .btn{
    border: none;
    height: 45px;
    min-width: 150px;
    padding: 0px 20px;
    font-family: sub-title-font;
    background: var(--primary-color);
    color: var(--white-color);
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
    border-radius: 5px;
	margin-top: 8px;
}

.slide-form-div .container-back-div .inner-container .btn:hover{
    background: var(--secondary-color);
}

.slide-form-div .container-back-div .inner-container .btn-container{
    display: flex;
	gap: 8px;
}

.slide-form-div .container-back-div .inner-container .btn-container .edit-btn{
    border: none;
    height: 45px;
    min-width: 150px;
    padding: 0px 20px;
    font-family: sub-title-font;
    background: var(--primary-color);
    color: var(--white-color);
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
    border-radius: 5px;
	margin-top: 8px;
}

.slide-form-div .container-back-div .inner-container .btn-container .delete-btn{
    background: var(--close-color);
}


.slide-form-div .top-panel-details{
	height: 60px;
	padding-bottom: 5px;
}

.slide-form-div .top-panel-details .inner-top .profile-div{
	width: 100%;
    display: flex;
    align-items: center;
	gap: 10px;
}

.slide-form-div .top-panel-details .inner-top .profile-div .image-div{
    width: 30px;
	height: 30px;
	border-radius: 3px;
	overflow: hidden;
}

.slide-form-div .top-panel-details .inner-top .profile-div .image-div img{
    width: 100%;
	object-fit: cover;
}

.slide-form-div .top-panel-details .inner-top .profile-div .text-div{
    width: calc(100% - 40px);
	display: flex;
	flex-direction: column;
}

.slide-form-div .top-panel-details .inner-top .profile-div .text-div span{
   font-family: body-font;
   color: var(--sub-body-color);
   font-size: 10px;
}

.slide-form-div .top-panel-details .inner-top .profile-div .text-div h3{
	padding: 0px;
	margin: 0px;
	font-family: sub-title-font;
	font-size: 13px;
	color: var(--sub-body-color);
}

#user_form_details{
	display: none;
}

.slide-form-div .container-back-div .inner-container .user_form_details .text_field_container{
	margin: 20px 0px;
}


.slide-form-div .container-back-div .inner-container .details-div{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-bottom: 20px;
}

.slide-form-div .container-back-div .inner-container .details-div .details-list{
	width: 100%;
	min-height: 100px;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border-radius: 10px;
    border: 1px solid rgba(215, 215, 215, .6);
	overflow: hidden;
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .title{
	display: flex;
    width:calc(100% - 40px);
	padding: 10px 20px;
	border-bottom: 1px solid rgba(215, 215, 215, .6);
	font-family: sub-title-font;
	font-size: 13px;
	color: var(--text-color);
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .each-details-back-list{
	display: flex;
	flex-direction: column;
    width:calc(100% - 40px);
	padding: 15px 20px;
	font-family: body-font;
	font-size: 14px;
	color: var(--text-color);
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .each-details-back-list .each-details-list{
	display: flex;
	align-items: center;
	justify-content: space-between;
    width: 100%;
	font-family: body-font;
	font-size: 12px;
	padding: 11px 0px;
	color: var(--text-color);
	border-bottom: 1px dashed rgba(215, 215, 215, .6);
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .each-details-back-list .each-details-list span{
	font-family: body-font;
	color: var(--text-color);
	font-size: 12px;
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .role-div, .slide-form-div .container-back-div .inner-container .details-div .details-list .status-div{
	background: #f8f8f8;
	padding: 4px 7px;
	margin-top: 5px;
	border-radius: 4px;
	font-size: 5px;
	float: left;
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .role-div span{
	font-size: 11px;
}


.slide-form-div .container-back-div .inner-container .details-div .details-list .ACTIVE{
	background:rgba(46,204,113,.1);
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .active span{
	color:rgba(9, 172, 77, 0.9);
	font-size: 11px;
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .SUSPEND{
	background:rgb(252, 164, 57,.1);
}

.slide-form-div .container-back-div .inner-container .details-div .details-list .suspended span{
	color:rgba(218, 90, 31, 0.87);
	font-size: 11px;
}


.slide-form-div .container-back-div .inner-container .fetched-permission-back-div{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px 0px;
	margin-bottom: 30px;
	border-bottom: #f0f0f0 1px solid;
}

.slide-form-div .container-back-div .inner-container #fetchedPermission{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.slide-form-div .container-back-div .inner-container .fetched-permission-back-div .title{
	font-family: body-font;
	font-size: 13px;
	color: var(--text-color);
}

.slide-form-div .container-back-div .inner-container .fetched-permission-back-div .fetched-permission-div{
	width:calc(100% - 40px);
	display: flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 25px;
	background: #f8f8f8;
}

.slide-form-div .container-back-div .inner-container .fetched-permission-back-div .fetched-permission-div span{
	font-family: body-font;
	font-size: 12px;
	color: var(--sub-body-color);
}

.slide-form-div .container-back-div .inner-container #account_settings_id{
	display: block;
}

.slide-form-div .container-back-div .inner-container .setting_detail{
	display: none;
}

.slide-form-div .container-back-div .inner-container .segmentDiv{
	display: flex;
	gap: 10px;
	flex-direction: column;
	padding: 10px 15px;
	border: rgba(213, 213, 213, 0.4) 1px solid;
	border-radius: 5px;
	background: rgba(232, 232, 232, 0.1);
}

.slide-form-div .container-back-div .inner-container .segmentDiv .segmentTitle{
	font-family: sub-title-font;
	color: var(--sub-body-color);
	font-size: 14px;
}

.slide-form-div .container-back-div .inner-container .segmentDiv .segmentList{
	display: flex;
	gap: 10px;
	flex-direction: column;
}

.slide-form-div .container-back-div .inner-container .segmentDiv .segmentBody{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.slide-form-div .container-back-div .inner-container .segmentDiv .add-btn{
	border: none;
	padding: 10px 25px;
	border-radius: 25px;
	font-family: sub-title-font;
	background: var(--sub-body-color);
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	transition: 0.3s ease-in;
	cursor: pointer;
}

.slide-form-div .container-back-div .inner-container .alert-list-back-div{
	display: flex;
	align-items: center;
	gap: 10px;
}

.slide-form-div .container-back-div .inner-container .alert-list-back-div .alert-list .total-amount{
	font-size: 20px;
    font-family: title-font;
}

.slide-form-div .container-back-div .inner-container .paid-fees-back-div .alert-value{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 150px;
} 

.slide-form-div .container-back-div .inner-container .paid-fees-back-div .paid-fees-list{
  align-items: center;
} 

.slide-form-div .container-back-div .inner-container .paid-fees-back-div .alert-value .alert-percentage{
  font-size: 11px;
} 

.slide-form-div .container-back-div .inner-container .paid-fees-back-div .alert-value .green-color{
  color: rgba(9, 172, 77, 0.9);
} 

.slide-form-div .container-back-div .inner-container .paid-fees-back-div .alert-value .orange-color{
  color: rgba(218, 90, 31, 0.87);
} 

.slide-form-div .container-back-div .inner-container .summaryHideDiv{
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.form-alert{
    margin: 0px auto;
}



@media all and (max-width:500px) {
	.slide-form-div{
		width: 100%;
	}
	.slide-form-div .container-back-div .inner-container{
		width: calc(100% - 40px);
		padding: 20px 20px 20px 20px;
	}
	.slide-form-div .title-panel-div{
		width: calc(100% - 40px);
		padding: 0px 20px;
	}
}



.permission-form-back-div{
	width: calc(100% - 22px);
	padding: 20px 10px;
	background: #f8f8f8;
	border-radius: 10px;
	border: 1px solid rgba(215, 215, 215, .6);
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.permission-form-back-div .title-div{  
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0px 10px;
}

.permission-form-back-div h4{  
	padding: 0px;
	margin: 0px;
	font-family: sub-title-font;
	font-size: 14px;
	color: var(--sub-body-color);
}

.permission-form-back-div p{
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	color: var(--text-color);
}


.permission-form-back-div .permission-toggle-div {
    width: 100%;
	min-height: 100px;
    display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: column;
    background: var(--white-color);
    border-radius: 10px;
    border: 1px solid rgba(215, 215, 215, .6);
	overflow: hidden;
}

.permission-form-back-div .permission-toggle-div .toggle-title {
	display: flex;
	align-items: center;
    width:calc(100% - 30px);
	padding: 15px 15px;
	border-bottom: 1px solid rgba(215, 215, 215, .6);
	font-family: body-font;
	font-size: 14px;
	color: var(--sub-body-color);
}

.permission-form-back-div .permission-toggle-div .fetch-toggle {
	display: flex;
	align-items: center;
    flex-direction: column;
    width: 100%;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div {
    width:calc(100% - 30px);
	padding: 15px 15px;
    display: flex;
	align-items: center;
    justify-content: space-between;
	text-align: left;
    border-bottom: 1px solid rgba(215, 215, 215, .6);
	background: #fff;
	gap: 5px;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .title-back-div{
	width: calc(100% - 75px);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .title-back-div .toggle-title-div{
	font-family: sub-title-font;
	font-size: 11px;
	color: var(--text-color);
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .title-back-div .toggle-title-div span{
	font-size: 10px;
	color: var(--sub-text-color);
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .title-back-div .sub-title{
	font-size: 10px;
	font-family: body-font;
	color: var(--sub-body-color);
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .title-back-div .green-color{
	color:rgba(9, 172, 77, 0.9);
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .title-back-div .orange-color{
	color:rgba(218, 90, 31, 0.87);	
}


.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .switch {
	width: 70px;
    display: flex;
    align-items: center;
    position: relative;
	gap: 7px;
    cursor: pointer;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .switch input {
    display: none;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .slider {
    position: relative;
    width: 35px;
    height: 17px;
    background: #e4e2e2;
    border-radius: 20px;
    transition: 0.3s;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .slider:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--white-color);
	color: var(--white-color);
    border-radius: 50%;
    top: 49%;
    left: 4px;
    transform: translateY(-50%);
    transition: 0.3s;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div input:checked + .slider {
    background: #f1c40f;
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div input:checked + .slider:before {
    transform: translate(15px, -50%);
}

.permission-form-back-div .permission-toggle-div .fetch-toggle .each-toggle-div .toggle-label {
    font-size: 14px;
	font-family: body-font;
    color: var(--text-color);
}



/*--------------------------------------------------------------------------------------------------*/
.caption-div{
	width:450px;
	min-height:200px;
	background:var(--white-color);
	border-radius:7px;
	overflow:hidden;
}
.caption-div .title-div{
    width: calc(100% - 40px);
    height: 50px;
  	background:var(--white-color);
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	border-bottom: #f5f5f5 1px solid;
}

.caption-div .title-div .title{ 
   	color: var(--sub-body-color);
    font-family: sub-title-font;
	font-size: 15px;
}

.caption-div .title-div .close-btn{
    font-family: sub-title-font;
    border: none;
    height: 35px;
    padding: 0px 13px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
	transition:all 0.2s ease-in 0.2s;
	-moz-transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}

.caption-div .title-div .close-btn i{
	font-size: 12px;
    color: var(--white-color);
}
.caption-div .title-div .close-btn:hover{
	opacity: .8;
}

.caption-div .div-in{
	padding:25px;
    display: flex;
    gap: 15px;
	flex-direction: column;
	overflow: auto;
}

.caption-div .div-in .text{
	padding: 0px;
	margin: 0px;
	font-family: sub-title-font;
	color: var(--sub-body-color);
	font-size: 14px;
}


.caption-div .div-in p{
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	color: var(--sub-body-color);
}

.caption-div .div-in .btn-div{
    width: 100%;
    display: flex;
	align-items: center;
	gap: 10px;
}


.caption-div .div-in .btn-div .btn{
	width: 85%;
    height: 45px;
	padding: 0px 25px;
    border: none;
    border-radius: 5px;
    font-family: sub-title-font;
    font-size: 14px;
    background: var(--sub-body-color);
    color: var(--white-color);
    cursor: pointer;
    transition: all 0.2s ease-in 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.caption-div .div-in .btn-div .whatsapp-btn{
    width: 15%;
	background: #29BA00;
}



.caption-div .div-in .btn-div .whatsapp-btn i{
   font-size: 22px;
}

.caption-div .div-in .btn-div .btn:hover{
    opacity: .9;
}




@media all and (max-width:450px) {
	.caption-div{
        width:96%;
    }

    .caption-div .div-in{
        padding:20px 20px 35px 20px;
    }
} 




.chart-div-notifications{
    width: calc(100% - 42px);
	padding: 5px 20px;
	min-height: 40px;
	color: var(--sub-body-color);
	font-size: 12px;
	border: #f0f0f0 1px solid;
    font-family: body-font;
    display: flex;
    align-items: center;
	gap: 10px;
	background: var(--white-color);
    border-radius: 8px;
}

.chart-div-notifications .text{
	font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.chart-div-notifications .text-right{
	height: 35px;
	min-width: 100px;
	font-size: 10px;
	padding: 0px 15px;
	border-radius: 20px;
	background-color: #f8f8f8;
	cursor: pointer;
}

.chart-div-notifications .text-right .icon-div{
	font-size: 18px;
	color: var(--body-color);
}

.chart-div-notifications .text span{
	color:#444;
	font-weight:bold;
	cursor:pointer;
}

.chart-div-notifications .text i{
	color: var(--secondary-color);
}

.chart-div-notifications .text-right .srch-select{
    position: absolute; 
	min-height:100px; 
    background:#444; 
	margin-top: 320px;
	width:150px; 
	z-index:100;
	padding-top:5px;
	border-radius:5px;
	display: none;
}

.chart-div-notifications .text-right .srch-select:after{
	content:"";
	width:0px;
	height:0px;
	position: absolute;
	border:15px solid;
	border-color:  transparent  transparent #444 transparent;
	left:98px;
	top:-25px;
}

.chart-div-notifications .text-right .srch-select div{
	padding:7px;
	height:15px;
	line-height: 15px;
	color:#ccc;
	transition: all 0.2s ease-in 0.2s;
	cursor:pointer;
	font-size:15px;
}

.chart-div-notifications .text-right .srch-select div:hover{
	padding:10px;
	color:#424242;
	background:rgba(215, 215, 215, .6);
	transition: all 0.2s ease-in 0.2s;
}

.chart-div-notifications .text .custom-srch-div{
	display: none;
}

.chart-div-notifications .text .custom-srch-div-in{
	display: flex;
	align-items: center;
	gap: 10px;
}



.dash_field_container {
	height: 35px;
}

.dash_field_container .bar_cust_placeholder {
	top: 40%;
	height: 10px;
	width: calc(80% - 10px);
	font-size: 11px;
}

.dash_field_container .bar_cust_placeholder i{
	font-size: 9px;
}

.dash_field_container .bar_cust_text_field {
	height: 35px;
	font-size: 11px;
	padding-top:5px;
}


.chart-div-notifications .text .custom-srch-div-in .btn{
	height: 35px;
	border:none;
	border-radius:3px;
	min-width:100px;
	cursor: pointer;
	font-family: body-font;
	background:var(--sub-body-color);
	color:var(--white-color);
	font-size: 11px;
	transition: all 0.2s ease-in 0.2s;
}

.chart-div-notifications .text .custom-srch-div-in .btn:hover{
    background:var(--secondary-color);
}




/* Table Style*/
.pages-table-div {
	margin-top: 10px;
}

.table-div{
	width:100%;
	border-radius: 8px;
	display: flex;
	border: #e7ecec 1px solid;
	background: var(--white-color);
	overflow: auto;
}

.table-div .table {
	width: 100%;
	font-size: 12px;
	min-width: 500px;
	border-collapse: collapse;
}

.table-div .table .tb-col{
	background: #f8f8f8;
	height: 40px;
    text-align: left;
    border-bottom: 1px solid rgba(215, 215, 215, .6);
	color: var(--sub-body-color);
}

.table-div .table th {
    padding: 10px 20px;
	font-family: body-font;
	font-size: 12px;
	font-weight: 100;
}

.table-div .table .tb-row {
    height: 60px;
	font-size: 11px;
	color: var(--text-color);
    border-bottom: 1px solid rgba(215, 215, 215, .6);
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}

.table-div .table .tb-row:hover {
	background: rgba(215, 215, 215, .3);
}

.table-div .table .other-tb-row {
	color: var(--sub-body-color);
}

.table-div .table td {
    padding: 10px 20px; 
	font-family: body-font;
}

.table-div .table .tb-row .clickable-td{
	font-family: sub-title-font;
	font-size: 11px;
	color: var(--sub-body-color);
	cursor: pointer;
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}

.table-div .table .tb-row .text-back-div{
	display: flex;
	align-items: center;
	gap: 8px;
}

.table-div .table .tb-row .text-back-div .text-div{
	width: calc(100% - 33px);
	display: flex;
	flex-direction: column;
}

.table-div .table .tb-row .text-div .bold-font{
	font-family: sub-title-font;
}

.table-div .table .tb-row .text-back-div .image-div{
	width: 25px;
	height: 25px;
	border-radius: 3px;
	overflow: hidden;
}

.table-div .table .tb-row .text-back-div .general-passport{
	width: 50px;
	height: 45px;
}

.table-div .table .tb-row .image-div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.table-div .table .tb-row .text-back-div .text-div .first-class{
	font-family: sub-title-font;
	font-size: 11px;
	color: var(--sub-body-color);
}

.table-div .table .tb-row .text-back-div .text-div .second-class{
	font-size: 10px;
	color: var(--text-color);
}

.table-div .table .tb-row .clickable-td:hover,
.table-div .table .tb-row .clickable-td:hover .text-div .first-class,
.table-div .table .tb-row .clickable-td:hover .text-div .second-class {
    color: var(--secondary-color);
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}


.table-div .table .tb-row .icon-div{
	float: left;
	width: 20px;
	margin: auto 5px;
	font-size: 15px;
	color: var(--secondary-color);
}

.table-div .table .tb-row .active-icon{
	color:rgba(9, 172, 77, 0.9);
}


.table-div .table td i{
	cursor: pointer;
}

.table-div .table .tb-row span{
	cursor: pointer;
    color: #06F;
    -moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}

.table-div .table .tb-row span.CANCELLED{
	color:rgba(255, 0, 0);
    background: none;
}

.table-div .table .tb-row span:hover{
	color: var(--secondary-color);
}

.table-div .table .tb-row .order-status{
	color: var(--sub-body-color)
}

.table-div .table .tb-row .order-status.PENDING{
	color:rgba(238, 139, 19);
    background: none;
}

.table-div .table .status-div{
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	padding: 0px 10px;
	font-size:10px;
	font-family: body-font;
	float: left;
}

.table-div .table .SUCCESSFUL,
.table-div .table .ACTIVE{
	background:rgba(46,204,113,.1);
	color:rgba(9, 172, 77, 0.9);
}

.table-div .table .PENDING,
.table-div .table .SUSPEND{
	background:rgb(252, 164, 57,.1);
	color:rgba(218, 90, 31, 0.87);
}

.table-div .table .CANCELLED{
	background:rgba(255, 0, 0,.1);
	color:rgba(255, 0, 0);
}

.table-div .table .green-color{
	color:rgba(9, 172, 77, 0.9);
}

.table-div .table .orange-color{
	color:rgba(218, 90, 31, 0.87);
}

.table-div .table .tb-row .btn{
	border: none;
	color: var(--white-color);
    background: var(--primary-color);
	font-size: 11px;
	font-family: body-font;
	min-width: 30px;
	padding: 5px 8px;
	border-radius: 4px;
	cursor: pointer;
	-moz-transition:all 0.2s ease-in 02s;
	transition:all 0.2s ease-in 0.2s;
	-webkit-transition:all 0.2s ease-in 0.2s;
	-ms-transition:all 0.2s ease-in 0.2s;
	-o-transition:all 0.2s ease-in 0.2s;
}

.table-div .table .tb-row .view-btn{
	min-width: 28px;
	padding: 5px 8px;
	font-size: 9px;
}

.table-div .table .tb-row .btn:hover{
	background: var(--secondary-color);
}

.table-div .table .tb-row .btn-div{
	display: flex;
	gap: 5px;
	background: none;
}

.table-div .table .tb-row .btn-div .view-btn{
	min-width: 80px;
	padding: 8px 8px;
	font-size: 9px;
}

.table-div .table .tb-row .btn-div .approve-btn{
	background:rgba(9, 172, 77, 0.95);
	color: var(--white-color);
}

.table-div .table .tb-row .btn-div .approve-btn:hover{
	opacity: .8
}

.table-div .table .tb-row .btn-div .decline-btn{
	background:rgba(255, 0, 0, 0.916);
}

.table-div .table .tb-row .btn-div .decline-btn:hover{
	opacity: .8
}

.table-div .table .tb-row .btn-div .print-btn{
	background: #2DAAE1;
}

.table-div .table .tb-row .btn-div .print-btn:hover{
	opacity: .8
}


.other-pages-ajax-loader {
	top: 45%;
}

.top-alert-div {
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.pages-toggle-back-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.pages-toggle-back-div .pages-toggle-div {
  width: 100%;
  border-radius: 8px 8px 5px 5px;
  background: var(--white-color);
  border: rgba(213, 213, 213, 0.4) 1px solid;
  cursor: pointer;
}

.pages-toggle-back-div .pages-toggle-div .pages-toggle-title {
  width: calc(100% - 40px);
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: body-font;
  font-size: 14px;
  padding: 0px 20px;
  background: #f8f8f8;
}

.pages-toggle-back-div .pages-toggle-div .pages-toggle-title h3 {
  font-size: 16px;
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font-weight: lighter;
  font-family: title-font;
  color: #0c2b4b;
}

.pages-toggle-back-div .pages-toggle-div .pages-toggle-title .expand-div {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 25px;
  color: #0c2b4b;
  cursor: pointer;
}

.pages-toggle-back-div .pages-toggle-div .pages-toggle-title .expand-div i {
  font-size: 20px;
}

.pages-toggle-back-div .pages-toggle-div .pages-toggle-title .btn-back-div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.pages-toggle-back-div
  .pages-toggle-div
  .pages-toggle-title
  .btn-back-div
  .btn {
  height: 35px;
  padding: 0px 15px;
  border: none;
  border-radius: 4px;
  background: #2daae1;
  color: var(--white-color);
  font-size: 11px;
  cursor: pointer;
  font-family: sub-title-font;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
}

.pages-toggle-back-div
  .pages-toggle-div
  .pages-toggle-title
  .btn-back-div
  .compute-btn {
  background: #444;
}

.pages-toggle-back-div
  .pages-toggle-div
  .pages-toggle-title
  .btn-back-div
  .btn:hover {
  background: #444;
}

.pages-toggle-back-div
  .pages-toggle-div
  .pages-toggle-title
  .btn-back-div
  .compute-btn:hover {
  background: var(--secondary-color);
}

.pages-toggle-back-div .toggle-expand-div {
  padding: 30px 15px;
  font-size: 12px;
}



@media all and (max-width: 530px) {
  
.pages-toggle-back-div .pages-toggle-div .pages-toggle-title {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  padding: 8px 20px;
}
.pages-toggle-back-div .pages-toggle-div .pages-toggle-title h3 {
  padding:0px;
}
}


.list-back-div {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.list-back-div .list-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px);
  min-height: 70px;
  padding: 0px 20px;
  border-radius: 8px 8px 5px 5px;
  background: var(--white-color);
  border-bottom: rgba(213, 213, 213, 0.4) 1px dashed;
  cursor: pointer;
  transition: all 0.2s ease-in 0.2s;
  transition: all 0.2s ease-in 0.2s;
  -moz-transition: all 0.2s ease-in 0.2s;
}

.list-back-div .list-div h4 {
  font-size: 15px;
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font-weight: lighter;
  font-family: title-font;
  color: #0c2b4b;
}

.list-back-div .list-div h4 {
  font-size: 15px;
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font-weight: lighter;
  font-family: title-font;
  color: #0c2b4b;
}

.list-back-div .list-div .btn-container {
  display: flex;
  align-items: center;
}

.list-back-div .list-div .btn-container .btn {
  height: 35px;
  padding: 0px 15px;
  border: none;
  border-radius: 4px;
  background: #2daae1;
  color: var(--white-color);
  font-size: 11px;
  cursor: pointer;
  font-family: sub-title-font;
  transition: all ease 0.2s;
  -webkit-transition: all ease 0.2s;
  -ms-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  -moz-transition: all ease 0.2s;
}

.list-back-div .list-div .btn-container .btn:hover {
  background: #444;
}