/* Registration shared theme */
.reg-theme .ud-shell {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.reg-theme .ud-card {
    width: 100%;
    max-width: 960px;
}

.reg-theme .ud-card-body {
	background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 10px;
}
.reg-theme .ud-card::before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: #4bd285;
}

.reg-theme .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 16px;
    color: #4b5563;
}

.reg-theme .loading-spinner p {
    margin: 8px 0 0 0;
    font-weight: 500;
}

.reg-theme .error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: #fff1f2;
    border: 1px solid #fecdd3;
    color: #b91c1c;
    border-radius: 8px;
}

.reg-theme .public_center { display: flex; justify-content: center; }
.reg-theme .notice-panel { margin-top: 12px; }
.reg-theme .actions-panel { margin-top: 16px; }

/* Step1 form refinements */
.reg-theme .publicreglist { margin-top: 8px; }
.reg-theme label { font-weight: 600; color: #374151; }
.reg-theme .form-group { margin-bottom: 14px; }

/* Material-style filled inputs */
.reg-theme .form-group { position: relative; }
.reg-theme .form-control {
    border: 1px solid #e5e7eb;
    border-bottom: 2px solid #d9d6ff;
    transition: border-color .22s ease, border-bottom-color .22s ease, background .22s ease;
    font-size: 14px;
    min-height: 40px;
}

.reg-theme .form-group > label {
    display: inline-block;
    margin-bottom: 6px;
    color: #6b7280;
    transition: color .2s ease;
}
.reg-theme .form-control:focus + .validation-message,
.reg-theme .form-control:focus ~ .validation-message { color: #b91c1c; }

/* Select styling with custom arrow (Material-ish) */
.reg-theme select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.516 7.548a.625.625 0 0 1 .884 0L10 11.148l3.6-3.6a.625.625 0 1 1 .884.884l-4.042 4.041a.625.625 0 0 1-.884 0L5.516 8.432a.625.625 0 0 1 0-.884Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    padding-right: 38px;
}
.reg-theme select.form-control:focus { background-color: #fff; outline: none; box-shadow: none !important; }

/* Input focus + validation */
.reg-theme .form-control:focus {
	border-bottom: 2px solid #4CAF50;
    background: #ffffff;
}

.reg-theme .validation-message,
.reg-theme .field-validation-error,
.reg-theme .text-danger {
	color: #8c1717 !important;
    font-size: 12px;
    background: #ffd8d8;
    border-radius: 5px;
    padding: 1px 6px;
}

.reg-theme .btn-danger.float-right {
	background: linear-gradient(135deg, #28a745, #20c997);
    border: 2px solid #80808000 !important;
    padding: 10px 18px !important;
    border-radius: 10px;
}

.reg-theme .btn-danger.float-right:hover {
    filter: brightness(1.02);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.4);
}

.reg-theme .btn-outline-secondary {
	border-radius: 10px;
    border: 2px solid #868686 !important;
    background: #ffffff;
    color: #374151;
    padding: 10px 18px !important;
}

.reg-theme .btn-outline-secondary:hover { background: #363636;
    color: white; }
	
@media (max-width: 768px) {
    .reg-theme .ud-card-body { padding: 16px; border-radius: 10px; }
    .reg-theme .ud-shell { padding: 12px; }
}
.regschool-center { 
	display: flex;
    justify-content: center;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 25px;
}
.custom-overlay-fee {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
	background-color: rgb(0 0 0 / 80%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
}

.fee-popup-container {
    position: fixed;
    z-index: 3456;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 520px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    border: 1px solid rgba(16,24,40,.08);
    overflow: hidden;
    animation: fee-pop-in .22s ease-out;
}
.fee-popup-container .close-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #323232;
    color: #ffffff;
    line-height: 0;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    padding: 3px 0;
}

.fee-popup-container .close-btn:hover {     background: #545454; }

.fee-popup-container .newdsn.designform { padding: 18px 18px 16px; }

.feefooterleftsingle { margin-bottom: 10px; }
.feefooterleftsingle .rz-label { font-weight: 700; color: #111827; font-size: 16px; }
.feefooterleftsingle .paygatesec { margin-top: 10px; }

/* Radzen SelectBar theming */
.fee-popup-container .rz-selectbar,
.fee-popup-container .rz-selectbutton { width: 100%; }
.fee-popup-container .rz-selectbar .rz-button,
.fee-popup-container .rz-selectbutton .rz-button {
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #374151 !important;
    padding: 8px 10px !important;
    margin: 4px !important;
}
.fee-popup-container .rz-selectbar .rz-state-active,
.fee-popup-container .rz-selectbutton .rz-state-active {
    background: linear-gradient(90deg, #7c3aed 0%, #9333ea 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(124,58,237,0.25) !important;
	padding: 6px !important;
}
.fee-popup-container .rz-selectbar .rz-button img,
.fee-popup-container .rz-selectbutton .rz-button img {
	height: 36px;
    border-radius: 3px;
    object-fit: contain;
    margin-right: 0;
    width: 100%;
}

/* Inputs inside popup (material-like) */
.fee-popup-container .form-group { margin-bottom: 12px; }
.fee-popup-container .form-group label { font-weight: 600; color: #374151; display: flex;}
.fee-popup-container .form-control {
    background: #f6f7fb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border-bottom: 2px solid #d9d6ff;
	min-height: 40px;
}
.fee-popup-container .form-control:focus {
    background: #fff;
    border-color: #c7b5f8;
    border-bottom-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
/* Amount highlight - prominent pill with gradient */
.fee-popup-container .totlamnt {
    text-align: center;
}
.fee-popup-container .totlamnt h5 {
	display: inline-flex
	;
		align-items: center;
		gap: 8px;
		margin: 14px 0 6px;
		padding: 8px 16px;
		border-radius: 999px;
		background: linear-gradient(135deg, #7c3aed, #9333ea);
		color: #ffffff;
		box-shadow: 0 12px 28px rgba(124, 58, 237, .28);
		letter-spacing: .3px;
		font-weight: 600;
	
}
.fee-popup-container .totlamnt h5::before {
    content: "₹";
    display: inline-block;
    font-weight: 900;
    font-size: 18px;
    opacity: .95;
}

/* Subtext under amount if any, keep spacing tight */
.fee-popup-container .totlamnt p { margin: 4px 0 0; color: #6b7280; font-size: 12px; }

/* Footer buttons */
.fee-popup-container .btn.btn-success {
	background: linear-gradient(135deg, #28a745, #20c997) !important;
    border: 1px solid green !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    box-shadow: 0 10px 24px rgba(40, 167, 69, 0.35) !important;
}
.fee-popup-container .btn.btn-success:hover { transform: translateY(-1px); }

.fee-popup-container .btn.btn-danger {
	background: #ffffff !important;
    color: #374151 !important;
    border: 2px solid #b2b2b2 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
}
.fee-popup-container .btn.btn-danger:hover { background: #e5e7eb !important; }

@keyframes fee-pop-in { from { transform: translate(-50%, -46%) scale(.98); opacity: .0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

@media (max-width: 600px) {
    .fee-popup-container { max-width: 92vw; }
}
/* ===== UserDashboard, SchoolHeaderComponent, NoticeDisplayComponent (moved from inline) ===== */

/* UserDashboard layout */
.public_center {
    max-width: 980px;
    margin: 0 auto;
    padding: 10px 16px;
    box-sizing: border-box;
}
.public_center > * + * { margin-top: 16px; }

.ud-shell { padding: 8px; }
.ud-card {
    background: #ffffff;
    border: 1px solid rgba(16,24,40,.08);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(16,24,40,.08);
}

/* Scrollbar styling for notice panel */
.notice-panel::-webkit-scrollbar { width: 10px; }
.notice-panel::-webkit-scrollbar-thumb { background: rgba(16,24,40,.18); border-radius: 8px; }
.notice-panel::-webkit-scrollbar-track { background: transparent; }

/* Loading and error */
.publicnotice .loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 2rem;
    min-height: 60vh;
    width: 100%;
}
.publicnotice .error-message {
    color: #dc3545;
    text-align: center;
    padding: 1rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin: 1rem 0;
}
.publicnotice .btn { margin-bottom: 0.5rem; }

/* Legacy overrides scoped to the dashboard area to avoid global conflicts */
.publicnotice article { padding: 0 !important; }
.publicnotice .regseatheader::before { display: none; }

/* ===== RegSeatAvail.razor Modern Styling ===== */
.regseat-modern {
    height: 100vh;
    overflow: hidden;
    padding: 10px 0;
}

.regseat-container {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 10px;
    height: calc(100vh - 20px);
}

.regseat-row {
    display: flex;
    gap: 15px;
    align-items: stretch;
    height: 100%;
}

.regseat-info-panel {
    flex: 1;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.regseat-info-content {
    padding: 15px;
    flex: 1;
    overflow-y: auto;
}

.regseat-info-title {
	font-size: 20px;
    font-weight: 600;
    color: #0d1881;
    margin-bottom: 14px;
}

.regseat-steps-container {
	background: #ceeaf9;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.regseat-steps-title {
    color: #2d2d2d;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.regseat-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.regseat-step-item {
		display: flex;
		align-items: flex-start;
		padding: 5px 8px;
		margin-bottom: 6px;
		border: 1px solid #e4e4e4;
		border-radius: 6px;
		border-left: 3px solid #667eea;
		transition: all 0.3s ease;
		position: relative;
		font-size: 0.9rem;
		flex-direction: column;
		background: #fff9f1;
		color: black;
		font-weight: 600;
		gap: 0px;
}

.regseat-step-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.regseat-step-desc {
	color: #666;
    font-size: 12px;
    display: block;
    margin-top: 0;
    font-style: italic;
    font-weight: 400;
}

.regseat-info-text {
    color: #666;
    line-height: 1.4;
    font-size: 0.85rem;
	margin-bottom: 10px;
}

.regseat-support-panel {
	background: #ffe7e7;
    padding: 6px 0;
    border-radius: 8px;
    text-align: center;
    border: 2px dotted red;
    color: #c10b0b;
}

.regseat-support-title {
	font-size: 20px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #c10b0b;
}

.regseat-support-contact {
	font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 0;
    color: #c10b0b;
}

.regseat-support-hours {
	font-size: 12px;
    font-weight: 600;
    display: block;
    margin-top: 0;
    color: #c10b0b;
    letter-spacing: 0.05em;
}

.regseat-classes-panel {
    flex: 1;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: center;
}

.regseat-classes-content {
	padding: 10px;
    flex: 1;
    overflow-y: auto;
}

.regseat-classes-title {
	font-size: 18px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 4px;
}

/* Desktop Table Styling */
.regseat-table-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    flex: 1;
    overflow-y: auto;
	max-height: 390px;
	margin-top: 10px;
}

.regseat-datagrid {
    border: none !important;
}

.regseat-datagrid-header {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}

.regseat-datagrid-header th {
    border: none !important;
    padding: 10px !important;
    font-weight: 600 !important;
    color: white !important;
    font-size: 0.9rem !important;
}

.regseat-datagrid-tbody td {
    padding: 10px !important;
    border-bottom: 1px solid #e9ecef !important;
    vertical-align: middle !important;
    font-size: 0.9rem !important;
}

.regseat-datagrid-tbody tr:hover {
    background: #f8f9fa !important;
}

.regseat-status-open {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
	padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
	display: inline-block;
	min-width: 125px;
    text-align: center;
}

.regseat-status-closed {
    color: #E91E63;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    min-width: 125px;
    text-align: center;
    border: 2px solid #cf6262;
}

.regseat-btn-proceed {
	padding: 3px 14px !important;
    border: 2px solid #e74c81 !important;
    background: linear-gradient(135deg, #e15555, #f95858);
    border-radius: 20px !important;
    font-size: 12px !important;
    transition: all 0.3s ease;
    min-height: auto !important;
    color: #ffffff !important;
}
/* Mobile Cards Styling */
.regseat-mobile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 15px;
    flex: 1;
    overflow-y: auto;
}

.regseat-mobile-card {
    background: white;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    border-top: 3px solid #8ac98c;
    transition: all 0.3s ease;
}

.regseat-mobile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.regseat-card-header {
    text-align: center;
    margin-bottom: 12px;
}

.regseat-card-class {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.regseat-card-class span {
    color: #667eea;
    font-weight: 700;
}

.regseat-card-year {
    color: #666;
    font-size: 0.8rem;
}

.regseat-card-year span {
	font-weight: 600;
    color: #667eea;
}

.regseat-card-footer {
    text-align: center;
}

.regseat-mobile-status {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.regseat-mobile-status.open {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.regseat-mobile-status.closed {
	color: #e64d4d;
    border: 2px solid #e64d4d;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
	.mobile_fix_btn_regseat{
		position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #c7e6ff;
        padding: 12px;
        border-top: 1px solid #03A9F4;
	}
	.mobile_fix_btn_regseat .regseat-checkbox-section{
		border: 0;
        background: white;
        margin-bottom: 6px;
	}
	.mobile_fix_btn_regseat .regseat-login-section{
		border: 1px solid #3d973d !important;
	}
	

	.regseat-mobile-card{
		position: relative;
	}
	.regseat-card-header{    text-align: left;}
	.regseat-mobile-status{
		position: absolute;
		top: 3px;
        right: 3px;
		padding: 3px 13px;
		font-weight: 400;
		margin: 0;
		line-height: normal;
		border-radius: 5px;
		}
	.regseat-card-footer .button{padding: 2px 0 !important;	}
	.regseat-info-panel,.regseat-classes-panel{
		width: 100% !important;
        flex: auto !important;
	}
    .regseat-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .regseat-modern {
        padding: 5px 0;
    }
    
    .regseat-container {
        padding: 0 8px;
    }
    
    .regseat-info-content,
    .regseat-classes-content {
        padding: 12px;
    }
    
    .regseat-info-title,
    .regseat-classes-title {
        font-size: 1.2rem;
    }
    
    .regseat-mobile-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}

@media (max-width: 576px) {
    .regseat-info-content,
    .regseat-classes-content {
        padding: 10px;
    }
    
    .regseat-steps-container {
        padding: 10px;
    }
    
    .regseat-step-item {
		padding: 6px 8px !important;
        font-size: 0.8rem;
		gap: 0px !important;
    }
    
    .regseat-info-title,
    .regseat-classes-title {
        font-size: 1.1rem;
    }
    
    .regseat-classes-panel {
        max-height: 100vh;
        align-self: stretch;
    }
}

/* UserLogin Page Specific Styles */
.regseat-school-header {
	display: flex	;
		align-items: center;
		margin-bottom: 15px;
}

.regseat-school-logo { 
	width: 64px;
    height: 64px;
    object-fit: contain;
    margin-right: 14px;
}
	

.regseat-school-details {
    flex: 1;
}

.regseat-school-name {
	font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 5px 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.regseat-school-address { 
	font-size: 14px;
    color: #6b7280;
    display: block;
    line-height: 1.3;
}

/* Professional polish for the form card */
.reg-theme .ud-card { transition: box-shadow .2s ease, transform .2s ease; }
.reg-theme .ud-card-body { position: relative; }
.reg-theme .ud-card-body .row { row-gap: 10px; }

/* Inputs hover + subtle transitions */
.reg-theme .form-control { transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }

/* Labels and messages */
.reg-theme label { letter-spacing: .2px; }
.reg-theme .validation-message { margin-top: 2px; display: block; }

/* Buttons group spacing */
.reg-theme .text-right .btn + .btn { margin-left: 8px; }

/* ===== Admission Detail View (cards grid) ===== */
.adm-form-view { margin-top: 6px; }
.adm-title { font-size: 18px; font-weight: 800; color: #111827; margin: 0 0 10px; text-align: center; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-card { background: #ffffff; border: 1px solid rgba(16,24,40,.08); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.06); }
.adm-card-title { margin: 0; padding: 10px 12px; font-size: 14px; font-weight: 800; color: #0f172a; border-bottom: 1px solid #eef2f7; background: linear-gradient(180deg, #f9fafb, #ffffff); border-top-left-radius: 10px; border-top-right-radius: 10px; }
.adm-card-body { padding: 12px; }
.adm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.adm-row > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px dashed #e5e7eb; border-radius: 8px; }
.adm-row > div strong { color: #374151; font-size: 12px; font-weight: 700; }
.adm-row > div span { color: #111827; font-weight: 700; font-size: 13px; }

@media (max-width: 992px) { .adm-grid { grid-template-columns: 1fr; } .adm-row { grid-template-columns: 1fr; } }

.regseat-requirements-section {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 4px solid #ffc107;
	margin-top: 10px;
}

.regseat-requirements-title {
    font-size: 1rem;
    font-weight: 600;
    color: #856404;
    margin: 0 0 8px 0;
}

.regseat-requirements-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.regseat-requirement-item {
    font-size: 0.85rem;
    color: #856404;
    line-height: 1.4;
    margin-bottom: 6px;
    padding-left: 15px;
    position: relative;
}

.regseat-requirement-item::before {
    content: "•";
    color: #ffc107;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.regseat-academic-year {
	font-size: 13px;
    color: #545454;
    margin: 2px 0 10px 0;
    font-weight: 500;
}

.regseat-notice-section {
	background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    border: 3px solid #2196f333;
    max-height: 340px;
    overflow-y: auto;
}
.regseat-input-container .regseat-btn-proceed{
	border-radius: 5px !important;
    padding: 6px 33px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.regseat-input-container .btn-outline-secondary{
	padding: 6px 33px !important;
    border: 2px solid #818181 !important;
    transition: .5s;
	display: flex;
    align-items: center;
    gap: 5px;
}

.regseat-notice-content {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #495057;
}

.regseat-checkbox-section {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    border-radius: 8px;
    border-left: 4px solid #17a2b8;
}

.regseat-checkbox-section .rz-checkbox {
    margin-right: 8px;
}

.regseat-checkbox-section .rz-label {
    font-size: 0.85rem;
    color: #0c5460;
    line-height: 1.3;
}

.regseat-login-section {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid #28a745;
}

.regseat-login-form {
    width: 100%;
}

.regseat-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.regseat-input-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #155724;
    margin: 0;
}

.regseat-input-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.regseat-input-field {
	flex: 1;
    padding: 8px 12px;
    border: 2px solid #28a745;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    max-width: 35%;
}

.regseat-input-field:focus {
    outline: none;
    border-color: #20c997;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.regseat-input-field::placeholder {
    color: #6c757d;
    font-size: 0.8rem;
}

/* Mobile Responsive for UserLogin */
@media (max-width: 768px) {
    .regseat-school-header {
        flex-direction: column;
        text-align: center;
        padding: 8px;
    }
    
    .regseat-school-logo {
        width: 50px;
        height: 50px;
        margin-right: 0;
        margin-bottom: 8px;
    }
    
    .regseat-school-name {
        font-size: 1.1rem;
    }
    
    .regseat-school-address {
        font-size: 0.8rem;
    }
    
    .regseat-requirements-section,
    .regseat-checkbox-section,
    .regseat-login-section {
        padding: 10px;
    }
    
    .regseat-notice-section {
        max-height: 150px;
    }
    
    .regseat-input-container {
        gap: 6px;
    }
    
    .regseat-input-field {
		max-width: 65% !important;
    }
    
    .regseat-btn-proceed {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .regseat-school-header {
        padding: 6px;
    }
    
    .regseat-school-logo {
        width: 45px;
        height: 45px;
    }
    
    .regseat-requirements-section,
    .regseat-checkbox-section,
    .regseat-login-section {
        padding: 8px;
		border: 0 !important;
    }
    
    .regseat-notice-section {
		max-height: none;
        padding: 8px;
        margin-bottom: 50%;
    }
}
.publicnotice .public_left { width: 32%; }
.publicnotice .public_right { text-align: center; width: 68%; }
.publicnotice #app { overflow: hidden; }
.publicnotice .publicreghead { display: none; }
.publicnotice .content { padding: 0; }

@media (max-width: 768px) {
    .public_center { max-width: 100%; padding-left: 12px; padding-right: 12px; }
    .publicnotice .public_left { width: 100%; margin-bottom: 20px; }
    .publicnotice .public_right { width: 100%; }
    .publicnotice .btn { width: 100%; }
}

@media (min-width: 992px) {
    .public_center { padding-left: 24px; padding-right: 24px; }
}

/* SchoolHeaderComponent */
.ud-header { display: block; padding-bottom: 6px; }
.ud-header-bar { 
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 5px;
}
.ud-header-row { display: flex; align-items: center; gap: 14px; }
.ud-logo { width: 64px; height: 64px; object-fit: contain; }
.ud-title h1 { font-size: 20px; line-height: 1.2; margin: 0; font-weight: 700; color: #101828; }
.ud-title .ud-address { margin: 2px 0 0 0; color: #475467; font-size: 13px; }
.ud-meta { 
	background: #ffefef;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 8px;
    padding: 6px 8px;
    max-width: 400px;
	}

.ud-user { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; line-height: 1.1; }
.ud-user-name { font-weight: 700; color: #0f172a; font-size: 16px; }
.ud-badge { background: #eef4ff; color: #3538cd; border: 1px solid #c7d2fe; border-radius: 999px; padding: 1px 6px; font-size: 11px; }
.ud-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 12px; table-layout: fixed; white-space: nowrap; }
.ud-table td { padding: 2px 6px; color: #344054; vertical-align: middle; }
.ud-emph { display: inline-block; background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; border-radius: 6px; padding: 2px 8px; font-weight: 700; letter-spacing: .3px; }

@media (max-width: 768px) {
    .ud-logo { width: 48px; height: 48px; }
    .ud-title h1 { font-size: 18px; }
    .ud-table td { padding: 2px 4px; font-size: 11px; }
    .ud-header-bar { flex-direction: column; align-items: stretch; }
    .ud-meta { width: 100%; }
}

/* NoticeDisplayComponent */
.ndc-heading {
    padding: 5px 12px;
    background: #e7ffe8;
    border: 2px solid rgb(41 161 46);
    border-radius: 4px;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 500;
    color: #0f6713;
    margin: 0;
    text-align: center;
}
.ndc-heading span { font-weight: 700; }
.public_right_header {
	margin-top: 12px;
    border: 3px solid #b0e7b2;
    border-radius: 10px;
    background: #fafbff;
    padding: 12px;
    max-height: 300px;
    min-height: 300px;
    overflow: auto;
    scroll-behavior: smooth;
}
@media (max-width: 768px) { 
	.ndc-heading { 
		font-size: 15px;
        padding: 8px 10px;
        margin: 0 5px;
	 } 

}

/* ===== End moved styles ===== */
html {
	height: 100%;
	font-family: system-ui;
}

@font-face {
	font-family: 'k010';
	src: url('../fonts/k010.eot');
	src: local('k010'), url('../fonts/k010.woff') format('woff'), url('../fonts/k010.ttf') format('truetype');
}


@font-face {
	font-family: 'Kruti Dev 010';
	src: url('../fonts/Kruti Dev 010.eot');
	src: local('Kruti Dev 010'), url('../fonts/Kruti Dev 010.woff') format('woff'), url('../fonts/Kruti Dev 010.ttf') format('truetype');
}

@font-face {
	font-family: "Script MT Bold";
	src: url("../fonts/ScriptMTBold.eot");
	src: url("../fonts/ScriptMTBold.eot?#iefix")format("embedded-opentype"), url("../fonts/ScriptMTBold.woff2")format("woff2"), url("../fonts/ScriptMTBold.woff")format("woff"), url("../fonts/ScriptMTBold.ttf")format("truetype");
}

.language_hindi span,
.language_hindi p,
.language_hindi ul li,
.language_hindi ol li,
.language_hindi h4 {
	font-family: 'k010';
	line-height: 23px;
	color: #282828;
	font-size: 18px;
}

.language_English span,
.language_English p,
.language_English ul li,
.language_English ol li,
.language_English h4 {
	font-family: system-ui;
	color: #282828;
	font-size: 14px;
}

body {
	font-size: 0.875rem;
	color: #000;
	background-color: #ededed;
	height: 100%;
	font-family: system-ui;
}

h1:focus {
	outline: none;
}

a,
.btn-link {
	color: #0071c1;
	text-decoration: none!important;
}

.proceedbtn {
	position: absolute;
	right: 18%;
	top: 67%;
}

.proceedbtn button {
	background: #f37a1d !important;
	border-radius: 50px;
	padding: 3px 35px;
	height: auto;
	font-size: 16px;
	border: 9px double white;
	transition: .3s;
}

.proceedbtn button:hover {
	background: #073f7a !important;
	transition: .3s;
	border-color: white !important;
}

.login-box {
	background: white;
	border-radius: 10px !important;
	box-shadow: 1px 1px 21px #80808057 !important;
}

.login-box h4 {
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	/* text-transform: uppercase; */
	margin-bottom: 17px !important;
}

.bdr-yellow {
	border: 2px dotted #ffa301;
}

.bdr-purple {
	border: 2px dotted #815db0;
}

.bdr-green {
	border: 2px dotted #58b613;
}

.bdr-red {
	border: 2px dotted #f6636f;
}

/*
.bg-yellow {
    background: #ffa301;
}

.bg-purple {
    background: #815db0;
}

.bg-green {
    background: #58b613;
}

.bg-red {
    background: #f6636f;
}*/
.bg {
	height: 3px;
	width: 123px;
	margin: 0px auto;
}

.lgareabx {
	border-radius: 10px !important;
	display: block;
	padding: 0px !important;
	transition: .6s;
	background: white;
	text-align: center;
	/* border-radius: 12px; */
	box-shadow: 2px 14px 24px -11px #504f4f;
}

.lgareabx:hover {
	background-color: #f360b8 !important;
	border: 2px dotted white;
	box-shadow: 2px 14px 15px -8px #020202;
	margin-top: -2px;
	transition: .3s;
}

.lgareabx:hover h3,
.lgareabx:hover h3 span {
	color: white;
}

.lgareabx img {
	width: 60px;
}

.lgareabx h3 {
	margin-bottom: 6px !important;
	padding: 0;
	color: #4e4e4e;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-top: 3px;
}

.lgareabx h3 span {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #000000;
}

.studentmenu {
	margin: 4px 0 13px;
}

.studentmenu ul {
	margin: 0;
}

.studentmenu ul li {
	display: inline-block;
}

.studentmenu li a {
	color: #000;
	font-weight: 500;
	background: #e3e3e3;
	padding: 10px 16px;
	display: inline-block;
	font-size: 14px;
}

.studentmenu li a.active {
	background: #ca1f8f;
	color: #fff;
}

.login-box img {
	width: 60px;
	margin-top: 6px;
}

.table> :not(:last-child)> :last-child>* {
	border-bottom: 1px solid #d1d1d1;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
	padding: 8px 5px 8px 17px !important;
	font-size: 13px;
	padding-left: 48px !important;
}

.rz-panel-menu .rz-navigation-item-text {
	color: #d9d7d7;
}

.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
	box-shadow: none !important;
	border: 1px solid #6a6a6a !important;
}

.rz-body {
	margin-bottom: 0 !important;
	background: #ededed;
}

.table-heading {
	margin-bottom: 9px;
	font-weight: 500;
	font-size: 16px;
	position: relative;
	padding-bottom: 11px;
}

.table-heading:after {
	content: '';
	position: absolute;
	background: #F44336;
	height: 2px;
	width: 39px;
	left: 0;
	top: 89%;
}


.photobox {
	position: relative;
}

.photobox .rz-fileupload-choose {
	width: 100%;
	text-align: center;
	margin-top: 8px;
}

.photobox .rz-fileupload-buttonbar {
	padding: 0 !important;
}

.colappsmenu {
	padding-left: 35px;
}

.inputbtn {
	position: relative;
	z-index: 9;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0;
	opacity: 0;
}

.photobtn {
	position: absolute;
	left: 0;
	right: 0;
}

.menufttrfix {
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	text-align: center;
	padding: 7px 0;
	width: 100%;
	transform: translateX(0px);
	position: absolute;
	z-index: 9;
}

.menufttrfix img {
	width: 133px;
}

.menufttrfix h5 {
	font-size: 12px;
	font-weight: 500;
	margin: 0;
}

.clsubheader ul {
	margin: 0 0 5px;
}

.clsubheader li {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 600;
}

.clsubheader li span {
	display: inline-block;
	width: 13px;
}

.clsubheader li strong {
	width: 60px;
	display: inline-block;
	font-weight: 700;
}

.clsubheader li .auto-width {
	width: auto;
}


.rz-grid-table thead tr:nth-of-type(2) th {
	padding-top: 0 !important;
	background: #f6f8f9 !important;
}

.rz-sidebar {
	bottom: 0 !important;
}

/* width */
.rz-panel-menu::-webkit-scrollbar,
.regseatmiddle::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.rz-panel-menu::-webkit-scrollbar-track,
.regseatmiddle::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
.rz-panel-menu::-webkit-scrollbar-thumb,
.regseatmiddle::-webkit-scrollbar-thumb {
	background: #888;
}

/* Handle on hover */
.rz-panel-menu::-webkit-scrollbar-thumb:hover,
.regseatmiddle::-webkit-scrollbar-thumb:hover {
	background: #555;
	width: 5px;
}


.schooldetail {
	/* margin-bottom: 20px; */
	max-width: 423px;
	margin: -121px auto 32px;
	/* background: linear-gradient(0deg, #eeaec400, #edaec3); */
	border-radius: 13px;
	/* margin-bottom: 10px; */
	padding: 10px 17px;
	/* box-shadow: 1px 2px 8px #000000; */
	/* border-top: 2px solid #fffa9c; */
	/* border-bottom: 1px solid #455872; */
	margin-bottom: 33px;
}

.schdtl-right {
	padding-left: 28%;
}

.schooldetail img {
	width: 98px;
	float: left;
	margin-bottom: 7px;
}

.schooldetail h3 {
	font-weight: 500;
	font-size: 17px;
	color: black;
	margin-bottom: 3px !important;
}

.schooldetail h3 span {
	display: block;
	font-weight: 700;
	font-size: 26px;
}

.schooldetail p {
	margin-bottom: 10px;
	font-weight: 300;
	color: #818181;
	font-size: 16px;
}

.schooldet .schdtl-right {
	margin-left: 111px;
	text-align: left;
}

.btn-primary {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac;
}

.invalid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N3MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

.blazor-error-boundary::after {
	content: "An error has occurred."
}


/** Login 4 start **/
.login-4 {
	padding: 5px 0;
	background: linear-gradient(#ffffffbf, #ffffff9c), url(/_content/SkoolMAUI.Shared/css/assets/images.png) top left repeat;
	z-index: 999;
	background-position: center center;
	position: relative;
	min-height: 100vh;
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-row {
	height: 55px !important;
	background: #193252;
	position: fixed;
	top: 0;
	left: 250px;
	right: 0;
	color: #000;
	align-items: center;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-dark {
	background: linear-gradient(135deg, #0a1929 0%, #1e3a5f 100%);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	border-right: 3px solid #3b82f6;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar.navbar-dark{
	padding: 3px 6px 5px;
}

.menu_left_head {
	    display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 0px 0;
}

.menu_left_head .oi-monitor {
	font-size: 22px;
	color: #60a5fa !important;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.menu_left_head .navbar-brand {
	color: white;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu_left_head .navbar-brand span {
	color: #60a5fa;
	font-weight: 700;
}

.menu_left_head h3 {
	font-size: 13px;
	color: #d1d5db;
	margin: 0;
	padding: 4px 12px;
	background: rgba(59, 130, 246, 0.15);
	border-radius: 4px;
	border: 1px solid rgba(59, 130, 246, 0.3);
	font-weight: 500;
}

.icon-menu-arrow {
	cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all .3s ease;
    background: #ffffff26;
}

.icon-menu-arrow:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.1);
}

.icon-menu-arrow .fa {
	font-size: 16px;
	transition: transform .3s ease;
}


.nav-item a.active {
	color: white;
	font-weight: 600;
	background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
	border-left: 4px solid #60a5fa;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
	position: relative;
}

.nav-item a.active::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: #60a5fa;
	border-radius: 50%;
	box-shadow: 0 0 8px #60a5fa;
}

.mainnavheading {
	text-transform: uppercase;
	color: #747474;
	font-size: 15px;
	margin: 0;
	padding: 10px 21px;
	font-weight: 400;
	background: #171b20;
}

.colappsmenu i {
	margin-right: 7px;
	font-size: 9px !important;
}

.rightarrow {
	position: absolute;
	right: 12px;
}

.nav-item a {
	padding: 12px 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	color: #d1d5db;
	height: auto !important;
	line-height: normal !important;
	font-family: system-ui;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: all .3s ease;
	margin: 2px 4px;
	position: relative;
}

.nav-item a:hover {
	background: rgba(59, 130, 246, 0.15);
	color: white;
	padding-left: 16px;
	border-left: 3px solid #3b82f6;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav-item i {
	margin-right: 10px;
	font-size: 16px;
	color: #93c5fd;
	transition: all .3s ease;
}

.nav-item a:hover i {
	color: #60a5fa;
	transform: scale(1.15);
}

.navbar-brand {
	padding: 0;
	font-weight: 500;
	margin: 0;
	text-align: center;
	display: block;
}

.rz-grid-table thead,
.rz-grid-table thead th {
	position: unset !important;
	top: 0;
	z-index: auto;
	background-color:#008376 !important;
    padding: 2px 3px !important;
}
.rz-sortable-column .rzi-sort {
    color: #cacaca !important;
}
.sidebar .fas {
	padding: 0 6px 0 0 !important;
}

.nav-item {
	padding: 0 !important;
}

.top-row h5 {
	color: #bfdd19;
	font-weight: 500 !important;
}

.top-row h5 span i {
	color: #fff !important;
}


main {
	flex: 1;
    background: #ededed;
    overflow: hidden;
}

article {
	padding-top: 70px;
    background: linear-gradient(180deg, #bfe8ff, #ffffff5e);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    height: 100%;
	padding-right: 10px;
	padding-bottom: 20px;
}

/** Login 20 start **/
.login-20 {
	background: rgba(0, 0, 0, 0.04) url(/_content/SkoolMAUI.Shared/css/assets/loginbg3.jpg) top left no-repeat;
	background-size: cover;
	top: 0;
	width: 100%;
	bottom: 0;
	opacity: 1;
	min-height: 100vh;
	text-align: center;
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	/* padding: 30px 0; */
	background-size: 100% 180%;
	background-position: 0px -10px;
}

.login-20 a {
	text-decoration: none;
}

.login-20 .login-inner-form {
	max-width: 500px;
	margin: 0 auto;
	color: #717171;
	text-align: center;
	box-shadow: 0 0 58px rgb(0 0 0 / 23%);
	position: relative;
}

.login-20 .login-inner-form:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/ligin-top.png);
	top: -79px;
	left: 10%;
	right: 0;
	height: 151px;
	background-repeat: no-repeat;
}
.login-inner-form button{
	height: auto;
    min-height: auto;
    padding: 7px 0;
    margin-bottom: 10px;
}
.login-20 .login-inner-form .details {
	padding: 50px 50px 20px;
	background: #fff;
	border-radius: 5px 5px 0 0;
}

.login-20 .login-inner-form img {
	margin-bottom: 15px;
	height: 30px;
}

.login-20 .login-inner-form h3 {
	margin: 0 0 30px;
	font-size: 17px;
	font-weight: 400;
	/* font-family: 'Jost', sans-serif; */
	color: #9d9d9d;
}

.login-20 .form-box .form-check-input:checked {
	display: none;
}

.login-20 .login-inner-form .form-group {
	margin-bottom: 25px;
}

.login-20 .login-inner-form .form-box {
	float: left;
	width: 100%;
	text-align: left;
	position: relative;
}

.login-20 .login-inner-form .form-box i {
	position: absolute;
	top: 12px;
	right: 20px;
	font-size: 20px;
	color: #616161;
}

.login-20 .login-inner-form .form-box .form-control {
	width: 100%;
	padding: 5px 20px;
	font-size: 14px;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	box-shadow: none !important;
	outline: none;
	color: #404040;
	border-radius: 3px;
	height: 45px;
	font-weight: 300;
}

.login-20 .login-inner-form input[type=checkbox]:checked+label:before {
	font-weight: 600;
	color: #fff;
	line-height: 15px;
	font-size: 14px;
	content: "\2713";
	padding-left: 2px;
}

.login-20 .login-inner-form .btn-md {
	cursor: pointer;
	padding: 7px 30px 7px 30px;
	font-size: 17px;
	font-weight: 500;
	height: auto;
	text-transform: uppercase;
	letter-spacing: 0.035em;
}

.login-20 .login-inner-form .social-list {
	margin-bottom: 0;
	padding: 0;
}

.login-20 .login-inner-form .checkbox a {
	font-size: 16px;
	color: #717171;
	float: right;
}

.login-20 .login-inner-form .terms {
	margin-left: 3px;
}

.login-20 .login-inner-form .checkbox {
	margin-bottom: 25px;
	font-size: 14px;
}

.login-20 .login-inner-form .form-check {
	float: left;
	margin-bottom: 0;
	padding-left: 0;
}

.login-20 .login-inner-form .form-check a {
	color: #717171;
	float: right;
}

.login-20 .login-inner-form .form-check-input {
	position: absolute;
	margin-left: 0;
}

.login-20 .login-inner-form .form-check-label {
	padding-left: 25px;
	margin-bottom: 0;
	font-size: 16px;
}

.login-20 .login-inner-form .checkbox-theme input[type="checkbox"]:checked+label::before {
	background-color: #f0151f;
	border-color: #f0151f;
}

.login-20 .form-section input[type=checkbox]:checked+label:before {
	font-weight: 300;
	color: #e6e6e6;
	line-height: 15px;
	font-size: 14px;
	content: "\2713";
}

.login-20 .login-inner-form input[type=checkbox],
input[type=radio] {
	margin-top: 4px;
}

.login-20 .login-inner-form .social-list li {
	display: inline-block;
	font-size: 16px;
	margin-top: 30px;
}

.login-20 .login-inner-form .social-list li a {
	margin: 0 2px 2px;
	font-size: 18px;
	width: 45px;
	height: 45px;
	border-radius: 3px;
	display: inline-block;
	text-align: center;
	line-height: 45px;
}

.login-20 h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-weight: 300;
	color: black;
	font-size: 36px;
}

.login-20 .login-inner-form .footer {
	font-size: 14px;
	padding: 20px 20px;
	/* background-color: antiquewhite; */
	border-radius: 0 0 5px 5px;
	border-top: solid 1px #d9d9d9;
}

.login-20 .login-inner-form .footer span a {
	color: #717171;
}

.login-20 .login-inner-form button:focus {
	outline: none;
	outline: 0 auto -webkit-focus-ring-color;
}

.login-20 .login-inner-form .btn-theme:not([disabled]):not(.disabled).active,
.btn-theme:not([disabled]):not(.disabled):active,
.show>.btn-theme.dropdown-toggle {
	box-shadow: none;
}

.login-20 .login-inner-form .btn-theme.focus,
.btn-theme:focus {
	box-shadow: none;
}

.login-20 .login-inner-form .btn-theme {
	background: #f0151f;
	border: none;
	color: #fff;
}

.login-20 .login-inner-form .btn-theme:hover {
	background: #dc141d;
}

/** Social media **/
.login-20 .facebook-bg {
	background: #4867aa;
	color: #fff;
}

.login-20 .facebook-bg:hover {
	background: #3b589e;
	color: #fff;
}

.login-20 .twitter-bg {
	background: #33CCFF;
	color: #fff;
}

.login-20 .twitter-bg:hover {
	background: #56d7fe;
	color: #fff;
}

.login-20 .google-bg {
	background: #db4437;
	color: #fff;
}

.login-20 .google-bg:hover {
	background: #dc4e41;
	color: #fff;
}

.login-20 .linkedin-bg {
	background: #0177b5;
	color: #fff;
}

.login-20 .linkedin-bg:hover {
	background: #1c82ca;
	color: #fff;
}

.parentpic {
	width: 170px;
}

.parentpic img {
	width: 152px !important;
	object-fit: cover;
	height: 157px !important;
}

.parentpic .picdet {
	position: relative;
}

.parentpic input {
	width: 152px;
	position: relative;
	z-index: 9;
	opacity: 0;
}

.parentpic .upbtn {
	position: absolute;
	top: 0;
	background: #00a1ff;
	left: 0;
	right: 0;
	text-align: center;
	padding: 5px 5px;
	color: white;
}

.wardphoto {
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 9px 0;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	margin-bottom: 10px;
}

.wardphoto img {
	height: 146px !important;
	width: 120px !important;
	object-fit: cover;
	border: 4px solid #fbbaba !important;
	position: relative;
	border-radius: 10px;
}

.wardphoto input {
	position: absolute;
	z-index: 9; 
	left: 0;
	right: 0;
	bottom: -8px;
	/* height: 24px; */
	opacity: 0;
}

.uploadpic {
	background: #00a1ff;
	color: white;
	padding: 4px 0;
}
@media (max-width: 768px) {
	.login-45 .logo h2 {
		margin-bottom: 10px!important;
		line-height: 24px!important;
	}
	.staffnoti_child{
		height: 205px!important;
	}
	.stutimetable{margin-top: 15px;}
	.public_right_footer .justify-content-center {
		flex-direction: column;
		text-align: left;
	}
	.panel-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 25px;
        background: #f8f9fa;
    }

	.panel-content::-webkit-scrollbar {
        width: 8px;
    }

    .panel-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .panel-content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .panel-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
	.slide-out-panel {
		width: 100% !important;
	}
	.stuform {
		padding: 0px !important;
		margin-top: 20px !important;
	}
	.public_right_pad {
		padding: 0 6px;
	}
.menuleftfix {
	position: fixed !important;
    left: 0;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 50%, #0f1629 100%);
    margin-top: 55px !important;
    width: 200px;
    z-index: 23456;
    height: 100% !important;
    top: -55px;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #3b82f6 #1a1f3a;
}

.menuleftfix::-webkit-scrollbar {
	width: 6px;
}

.menuleftfix::-webkit-scrollbar-track {
	background: #1a1f3a;
}

.menuleftfix::-webkit-scrollbar-thumb {
	background: #3b82f6;
	border-radius: 3px;
}

.menuleftfix::-webkit-scrollbar-thumb:hover {
	background: #2563eb;
}
	.rz-tabview-nav li {
		background-color: transparent!important;
		background: transparent !important;
	}

	.mobile-acm {
		position: absolute;
		top: 55px;
		left: 0;
		right: 0;
		padding: 0px 0;
	}
		.mobile-acm h3 {
			font-weight: 500;
			font-size: 11px;
			text-align: center;
			background: antiquewhite;
			margin: 0;
			padding: 3px 0;
		}
		.menu-icon .line {
			background-color: #ffffff;
			height: 2px;
			display: block;
			width: 20px;
		}
		
		.menu-icon {
			padding: 4px 0;
		}
		.menu-icon .line + .line {
			margin-top: 4px;
		}
	.navbar-toggler {
		position: fixed;
		left: 3px;
		top: 13px;
		z-index: 9876;
	}
		.top-row.navbar-dark {
			display: none;
		}
	.stfbtns {
		margin-top: 15px !important;
	}

	.rz-tabview-nav {
		display: block !important;
	}

	.shrtprobg {
		height: 70px !important;
	}

	.rz-tabview-nav .rz-tabview-selected a {
		width: 100%;
		text-align: left;
	}

	.rz-tabview-nav li a {
		text-align: left !important;
	}

	.login-20 .login-inner-form .details {
		padding: 50px 30px 50px;
	}
}
@font-face {
	font-family: "flaticon";
	src: url("../flaticon.eot");
	src: url("../flaticon.eot?#iefix") format("embedded-opentype"), url("../flaticon.woff") format("woff"), url("../flaticon.ttf") format("truetype"), url("../flaticon.svg#Flaticon") format("svg");
	font-weight: normal;
	font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: "flaticon";
		src: url("./flaticon.svg#Flaticon") format("svg");
	}
}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
	font-family: flaticon;
	font-size: auto;
	font-style: normal;
	margin-left: 0;
}

.flaticon-user:before {
	content: "\f100";
}

.flaticon-user-1:before {
	content: "\f101";
}

.flaticon-key:before {
	content: "\f102";
}

.flaticon-password:before {
	content: "\f103";
}

.flaticon-key-1:before {
	content: "\f104";
}

.flaticon-password-1:before {
	content: "\f105";
}

.flaticon-mail:before {
	content: "\f106";
}

.flaticon-mail-1:before {
	content: "\f107";
}

.flaticon-mail-2:before {
	content: "\f108";
}

.flaticon-google-plus:before {
	content: "\f109";
}

.flaticon-search:before {
	content: "\f10a";
}

.flaticon-facebook:before {
	content: "\f10b";
}

.flaticon-facebook-1:before {
	content: "\f10c";
}

.flaticon-twitter:before {
	content: "\f10d";
}

.flaticon-twitter-1:before {
	content: "\f10e";
}

.flaticon-linkedin:before {
	content: "\f10f";
}

.flaticon-linkedin-1:before {
	content: "\f110";
}

.flaticon-linkedin-2:before {
	content: "\f111";
}


@media (min-width: 641px) {
	.navbar-toggler {
		display: none;
	}

	.collapse {
		/* Never collapse the sidebar for wide screens */
		display: block !important;
	}
}


.sidebar {
	background-color: #1c437f;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
	bottom: 0;
	margin-top: 0px;
	left: 0;
	top: 0;
	transition: all 0.2s ease-in-out;
	z-index: 1;
	width: 250px;
	position: fixed;
	height: auto;
}

.top-row {
	justify-content: flex-end;
	height: 3.5rem;
}

@media (max-width: 640.98px) {
	.top-row.auth {
		justify-content: space-between;
	}

	.top-row ::deep a,
	.top-row ::deep .btn-link {
		margin-left: 0;
	}
}

@media (min-width: 641px) {
	.page {
		flex-direction: row;
		display: flex;
		min-height: 100vh;
		overflow: auto;
	}
	.top-row.auth ::deep a:first-child {
		flex: 1;
		text-align: right;
		width: 0;
	}

}

.rz-legend-item-text {
	padding: 2px 4px !important;
	font-size: 11px;
	display: inline-block;
	line-height: 14px;
}

.rz-legend-right {
	align-items: flex-start !important;
}

.search-widget {
	background-color: #fff;
	background-color: #fffc;
	border-radius: 4px;
	margin-bottom: 30px;
	padding: 10px;
	position: relative;
	box-shadow: 0 1px 2px 0 #717171;
}

.dash-widget {
	background-color: #fff;
	background-color: #fffc;
	border-radius: 4px;
	margin-bottom: 30px;
	padding: 10px;
	position: relative;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
}

.dash-widget-bg1 {
	width: 55px;
	float: left;
	color: #fff;
	display: block;
	text-align: center;
	line-height: 55px;
	background: #cc208e;
	border-radius: 50%;
	font-size: 30px;
	height: 55px;
}

.dash-widget-info>h3 {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.dash-widget-info>span.widget-title1 {
	background: #cc208e;
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 13px;
}

.dash-widget-info span i {
	width: 16px;
	background: #fff;
	border-radius: 50%;
	color: #666;
	font-size: 9px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	margin-left: 5px;
}

.dash-widget-info>span.widget-title2 {
	background: #7014cc;
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 11px;
}

.dash-widget-info>span.widget-title3 {
	background: #ffbc35;
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 11px;
}

.dash-widget-bg2 {
	width: 55px;
	float: left;
	color: #fff;
	display: block;
	text-align: center;
	line-height: 55px;
	background: #7014cc;
	border-radius: 50%;
	font-size: 30px;
	height: 55px;
}

.dash-widget-bg3 {
	width: 55px;
	float: left;
	color: #fff;
	display: block;
	text-align: center;
	line-height: 55px;
	background: #ffbc35;
	border-radius: 50%;
	font-size: 30px;
	height: 55px;
}

.dash-widget i {
	color: white;
	font-size: 25px;
	padding: 6px 0;
	text-align: center;
	margin-left: 0;
	padding-left: 0;
}

.rz-dialog {
	width: 60%;
	margin: 0 auto;
	border-radius: 10px !important;
}
.rz-dialog-wrapper{
	background: #0000009c;
    left: 0;
    right: 0;
}
.stunotbox {
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px dotted #bbbbbb;
	position: relative;
}
.card h4,
.rz-card h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 7px;
}

.saldetailstaff .rz-card {
	position: relative;
}

.saldetailstaff .row {
	margin-top: 15px;
}

.saldetailstaff h4 {
	position: absolute;
	top: -11px;
	background: #ff7272;
	color: white;
	padding: 7px 21px!important;
	font-weight: 600 !important;
	left: 6px;
}

.rz-dialog-title {
	font-size: 16px;
	font-weight: 600 !important;
	color: white;
}

.text-right {
	text-align: right;
}

.changebtn {
	padding: 17px 0px;
	font-weight: 500;
}

.hideelement {
	opacity: 0;
	position: absolute;
	background: red;
	width: 123px;
	padding: 9px 10px;
	top: 0;
	right: 0;
}

.changebtn:hover .hideelement {
	opacity: 1;
}

@keyframes blinking {

	from,
	49.9% {
		background: red;
	}

	50%,
	to {
		background: green;
	}
}

.sprofiletabs ul {
	margin: 0;
}

.sprofiletabs ul li {
	display: inline-block;
}

.sprofiletabs li a {
	/*padding: 7px 17px;
    display: inline-block;
      background: #ebebeb;
 
    font-weight: 600;
    font-size: 15px;*/
	color: #7e7d7d;
}

.sprofiletabs li a.active {
	padding: 7px 17px;
	display: inline-block;
	background: #cc208f;
	color: white;
	font-weight: 600;
	font-size: 15px;
}

.designform .form-group input:after {
	content: '';
}

.designform .form-group {
	margin-bottom: 10px;
}

label {
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 500;
}

.rz-spinner-button {
	padding: 0 !important;
}

.rz-dialog-content .rz-card.designform {
	padding: 0;
	border: 0;
	box-shadow: none;
}

.rz-cell-filter .rz-cell-filter-label {
	margin-bottom: 0;
}

.designform h6 {
	font-size: 13px;
	font-weight: 700;
	/* border-bottom: 1px dotted #dfdfdf; */
	margin: 0;
	padding-bottom: 6px;
	background: #d7d7d7;
	padding: 7px 9px;
	text-transform: uppercase;
	/* color: white; */
	color: #303030;
}

.designform img {
	height: 200px;
	width: 100%;
	border: 1px solid #e1e1e1;
}

.rz-dropdown-filter-container {
	padding: 5px 0 !important;
	border-bottom: 1px solid #9797971a;
}

.designform table td {
	padding: 5px 5px !important;
}

.rz-dialog-content {
	padding: 10px !important;
}

.rz-label {
	margin-bottom: 4px !important;
	font-weight: 600;
	font-size: 13px;
	display: block;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: auto !important;
}

.fixnotice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 22px 0;
}

.pageheader {
	border-bottom: 1px solid #8080803b;
    margin-bottom: 0px;
    background: #fff6db;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
}
	.pageheader h5 {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
	}
	.rz-calendar.rz-calendar-w-btn input {
		height: 35px;
		border: 1px solid #8080800d;
		background: #f6f7fa;
	}
.selected-count{
	padding: 1px 12px;
    font-weight: 600;
}
.rz-clear .rz-multiselect-label-container,
.rz-clear .rz-dropdown-label {
	margin-bottom: 0;
	line-height: 18px;
	font-size: 12px;
}

.rz-datatable-data td .rz-cell-data,
.rz-grid-table td .rz-cell-data {
	font-size: 12px !important;
}

.rz-panel-menu .rz-navigation-item-icon {
	margin: 0 0.1rem 0 0 !important;
	font-size: 1.3em !important;
	color: #d9d7d7 !important;
}

.nstuview .rz-card {
	position: relative;
}

.btn-primary {
	background-color: #00a1ff !important;
	color: #ffffff;
}

.rz-button.btn-success,
.btn-success.rz-paginator-element {
	background-color: #3dab40 !important;
	color: #ffffff;
}

.rz-button.btn-danger,
.btn-danger.rz-paginator-element {
	background-color: #fd5b65 !important;
	color: #ffffff;
}

.rz-button.btn-danger:focus-visible {
	background-color: cornflowerblue !important;
	color: #000;
}

.rz-button.btn-warning,
.btn-warning.rz-paginator-element {
	background-color: #e6c54f !important;
	color: #ffffff;
}

.rz-button.btn-info,
.btn-info.rz-paginator-element {
	background-color: #9240c3 !important;
	color: #ffffff;
}

.content h4 {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 0px !important;
	padding: 8px 0;
}

.rz-paginator-last,
.rz-paginator-next {
	background-color: #2b313a !important;
}

.rz-paginator-page {
	border-radius: 0 !important;
}

.studentpic img {
	border: 1px solid #d3d3d33b;
	height: 234px;
	width: 100%;
	border-radius: 5px;
	object-fit: contain;
	padding: 0px;
}

.rz-sortable-column .rzi-sort {
	color: #9da1a3 !important;
}

.rz-sortable-column .rzi-sort:hover,
.rz-sortable-column .rzi-sort:active {
	color: #ffffff !important;
}

.parentstabs {
	width: 240px;
	margin: 0 auto;
}

.parentstabs a.nav-link {
	border-color: #0000 !important;
	background: #d9d9d9;
	border-radius: 0;
	padding: 6px 11px;
	font-size: 13px;
	font-weight: 700;
}

.parentstabs a.nav-link.active {
	background-color: #423f41 !important;
	border-color: #3a3839 !important;
	color: #fff !important;
}

.stushortprofile {
	text-align: center;
}

.stushortprofile img {
	height: 140px;
	width: 140px;
	border: 1px solid #8080802e;
	border-radius: 50%;
	margin: 0 auto;
	text-align: center;
}

.stuprofilebtns li {
	width: 100%;
	margin-bottom: 5px !important;
}

.stuprofilebtns li a {
	display: block;
}

.stushortprofile th,
.stushortprofile td {
	padding: 0 0;
	border: 0;
	text-align: left;
	font-size: 12px;
	font-weight: 700 !important;
	color: #4a4a4a;
}

.stuprofiledtl th,
.stuprofiledtl td {
	padding: 0 0;
	border: 0;
	text-align: left;
	font-size: 12px;
	font-weight: 600 !important;
	color: #4c4c4c;
	line-height: 27px;
}

.stuprofiledtl h6 {
	font-size: 18px;
	color: #000;
	font-weight: 700;
}

.stushortprofile h2 {
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	margin: 10px 10px;
	border-bottom: 1px solid #8080805e;
	padding-bottom: 7px;
	margin-bottom: 10px;
}

.stushortprofile .table,
.stuprofiledtl table {
	border: 0;
	margin-bottom: 12px;
}

.btn-dark {
	color: #fff;
	background-color: #212529 !important;
	border-color: #212529 !important;
}
.tabletd  .rz-numeric {
	height: 25px !important;
}
.newdsn{
	padding: 0px !important;
}
.rz-datatable-thead th .rz-column-title-content,
.rz-grid-table thead th .rz-column-title-content {
	display: inline-block;
	font-size: 13px !important;
	line-height: inherit;
	text-transform: capitalize !important;
	color: #ffffff;
	padding: 4px 8px;
	font-weight: 500 !important;
	vertical-align: unset;
	justify-content: start !important;
}

.rz-paginator-first,
.rz-paginator-prev {
	border: 1px solid grey;
}

tbody td {
	font-size: 12px;
	font-weight: 400;
	padding: 4px 8px !important;
	vertical-align: middle;
}

.rz-datatable-data td .rz-cell-data,
.rz-grid-table td .rz-cell-data {
	overflow: hidden;
	text-overflow: unset !important;
	white-space: inherit !important;
}

.table th {
	background: #f3f3f3;
	padding: 7px 9px;
}

thead th {
	font-size: 12px;
	font-weight: 700;
}

.studenttemsec {
	background: #cb208f;
	color: #fff;
	padding: 15px 12px;
	margin-top: 16px;
	margin-bottom: 5px;
	text-align: center;
}

.studenttemsec h5 {
	margin-bottom: 0 !important;
	line-height: 19px;
	color: white;
	font-size: 13px;
}

.studenttemsec h5 strong {
	font-weight: 600;

}

.shadow {
	box-shadow: 0px 0px 38px 5px #7a7a7a29;
}

.rz-tabview {
	display: block !important;
}
.btn-block {
    width: max-content!important;
}
.btn-block + .btn-block {
    margin-top: 0!important;
}
.rz-tabview-nav li a {
	display: block !important;
	color: #2c2c2c !important;
	padding: 8px 11px !important;
	min-width: 127px;
	text-align: center;
	font-weight: 600 !important;
}

.rz-tabview-nav li {
	margin-right: 5px;
	border-radius: 0px !important;
}

.rz-tabview-bottom>.rz-tabview-nav .rz-tabview-selected {
	border-bottom-color: #7f17c3 !important;
}

.rz-grid-table {
	padding: 0 !important;
	border: 0 !important;
}


.dashbox img {
	width: 47px;
	/* border: 1px solid grey; */
	padding: 4px;
	/* background: #f7f7f7; */
	/* border-radius: 50%;*/
}

#maindash .dashbox {
	background: white;
	padding: 8px;
	min-height: 104px;
	margin-bottom: 20px;
	/* border-radius: 5px; */
	box-shadow: 3px 3px 4px #80808014;
	text-align: center;
	border-top: 2px solid red;
}

#maindash2 .dashbox2 {
	background: white;
	padding: 8px;
	min-height: 82px;
	margin-bottom: 20px;
	border-radius: 5px;
	box-shadow: 3px 3px 4px #0c0c0c45;
	border-top: 2px solid #f360b8;
}

.dashbox2:hover h3,
.dashbox2:hover h3 span {
	color: white !important;
}

#maindash3 .dashbox3 {
	padding: 8px;
	min-height: 82px;
	margin-bottom: 20px;
	border-radius: 5px;
	box-shadow: 3px 3px 4px #80808014;
}

#maindash2 .dashbox2 i {
	color: white;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	text-align: center;
	font-size: 24px;
	line-height: 59px;
	float: left;
}

#maindash3 .dashbox3 i {
	height: 60px;
	width: 60px;
	border-radius: 50%;
	text-align: center;
	font-size: 18px;
	line-height: 59px;
	float: left;
	background: white;
}

#maindash2 .dashbox2 h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 17px;
	margin-top: 7px;
	margin-bottom: 0;
	margin-left: 69px;
}

#maindash3 .dashbox3 h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 17px;
	margin-top: 7px;
	margin-bottom: 0;
	margin-left: 69px;
	color: white;
}

#maindash2 .dashbox2 h3 span {
	display: block;
	color: #939393;
	font-size: 12px;
	font-weight: 400;
}

#maindash3 .dashbox3 h3 span {
	display: block;
	font-size: 12px;
	font-weight: 400;
}

#maindash .dashbox h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 17px;
	margin-top: 7px;
	margin-bottom: 0;
}

#maindash .dashbox h3 span {
	display: block;
	color: #939393;
	font-size: 12px;
	font-weight: 400;
}

.dashbluebg {
	background: #00a1ff;
}

.dashyellowbg {
	background: #e9c92c;
}

.dashgreenbg {
	background: #7ec162;
}

.dashredbg {
	background: #f17a7a;
}

.dashpurplebg {
	background: #f360b8;
}

.col-5-fix {
	flex: 0 0 auto;
	width: 20%;
}

.hover1:hover h3,
.hover2:hover h3,
.hover3:hover h3,
.hover4:hover h3,
.hover5:hover h3 {
	color: white !important;
	transition: .5s;
}

.hover1:hover h3 span,
.hover2:hover h3 span,
.hover3:hover h3 span,
.hover4:hover h3 span,
.hover5:hover h3 span {
	color: white !important;
	transition: .5s;
}

.hover1 {
	transition: .5s;
}

.hover1:hover {
	background: linear-gradient(237deg, #6fa534 -13%, #8897ff 67%) !important;
	transition: .5s;
	/* border-top: 8px double #00a1ff; */
	/* padding: 0px!important; */
	margin-top: -8px;
}

.hover1:hover i {
	background: #fdfdfd;
	color: #00a1ff !important;
	transition: .5s;
}

.hover2:hover {
	background: #e9c92c !important;
	transition: .5s;
	border-top: 2px solid #e9c92c;
}

.hover2:hover i {
	color: white !important;
	background: #e9c92c !important;
	transition: .5s;
}

.hover3:hover {
	background: #7ec162 !important;
	transition: .5s;
	border-top: 2px solid #7ec162;
}

.hover3:hover i {
	color: white !important;
	background: #7ec162 !important;
	transition: .5s;
}

.hover4:hover {
	background: #f17a7a !important;
	transition: .5s;
	border-top: 2px solid #f17a7a;
}

.hover4:hover i {
	color: white !important;
	background: #f17a7a !important;
	transition: .5s;
}

.hover5:hover {
	background: #f360b8 !important;
	transition: .5s;
	border-top: 2px solid #f360b8;
}

.hover5:hover i {
	color: white !important;
	background: #f360b8 !important;
	transition: .5s;
}

.dash-widget h4 {
	font-weight: 500;
	font-size: 16px;
}

.innerdashbox {
	/* border-top: 2px solid transparent;*/
	/* padding: 8px;*/
	margin-bottom: 20px;
	/* border-radius: 0!important; */
	/* box-shadow: 3px 3px 2px #00000014; */
	/* text-align: center; */
	/* border: 8px solid #ffffff00;*/
}

.rz-chart {
	height: 165px !important;
	width: 100%;
	border: 1px solid #8080800d;
}

.ntabsnew .tab.tab-active:after .innerdashbox:hover {
	background: #3a474d !important;
}

.changebtn img {
	width: 58px;
}

.innerdashbox i {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background: white;
	font-size: 19px;
	padding: 16px 0;
	display: block;
	margin: 0 auto 4px;
	text-align: center;
}

.innerdashbox h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 17px;
	margin-top: 7px;
	margin-bottom: 0;
	color: white;
}

.innerdashbox h3 span {
	display: block;
	font-weight: 300;
	color: grey;
	font-size: 14px;
}

.mainheader h4 {
	font-weight: 500;
	font-size: 21px;
	margin: 8px 0;
}

.mainheader {
	margin-bottom: 14px;
}

.transition-visible,
.transition-visible2,
.transition-visible3 {
	overflow: hidden;
	transition: transform 0.3s ease-out;
	height: auto;
	transform: scaleY(1);
	transform-origin: top;
	position: absolute;
	left: 0;
	right: 0;
}

.fix-layout {
	position: relative;
	min-height: 124px;
}

.transition-visible.transition-collapsed,
.transition-visible2.transition-collapsed,
.transition-visible3.transition-collapsed {
	transform: scaleY(0);
}

.hover11:hover {
	background: #00a1ff !important;
	transition: .5s;
	border-top: 2px solid #00a1ff;
}

.hover11:hover i {
	color: #00a1ff;
	background: white !important;
	transition: .5s;
}

.hover22:hover {
	background: #e9c92c !important;
	transition: .5s;
	border-top: 2px solid #e9c92c;
}

.hover22:hover i {
	background: white !important;
	color: #e9c92c !important;
	transition: .5s;
}

.hover33:hover {
	background: #7ec162 !important;
	transition: .5s;
	border-top: 2px solid #7ec162;
}

.hover33:hover i {
	background: white !important;
	color: #7ec162 !important;
	transition: .5s;
}

.hover44:hover {
	background: #f17a7a !important;
	transition: .5s;
	border-top: 2px solid #f17a7a;
}

.hover44:hover i {
	background: white !important;
	color: #f17a7a !important;
	transition: .5s;
}

.hover55:hover {
	background: #f360b8 !important;
	transition: .5s;
	border-top: 2px solid #f360b8;
}

.hover55:hover i {
	background: white !important;
	color: #f360b8 !important;
	transition: .5s;
}


.rz-dialog-titlebar-close .rzi-times {
	color: white !important;
	cursor: pointer;
}

.rz-dialog-titlebar {
	background-color: #11537a !important;
	color: white !important;
	padding: 6px 19px !important;
}

.rz-checkbox-list-horizontal .rz-checkbox {
	width: 100px !important;
	margin-bottom: 8px !important;
}

.ntabsnew .tab-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.rz-legend-item {
	background: transparent !important;
}


.tb-tabs li:nth-child(2) {
	background: linear-gradient(45deg, #118cd5, #5cc3ff);
}


.tb-tabs li:nth-child(4) {
	background: linear-gradient(45deg, #e9832c, #ffe049);
}


.tb-tabs li:nth-child(6) {
	background: linear-gradient(45deg, #35a54d, #9ee580);
}


.tb-tabs li:nth-child(8) {
	background: linear-gradient(45deg, #df4f4f, #ed8e8e);
}


.tb-tabs li:nth-child(10) {
	background: linear-gradient(45deg, #b32b7c, #fb8cce);
}

.tc-tabs {
	overflow-x: auto;
	overflow-y: hidden;
	display: -webkit-box;
}

.tc-tab {
	width: 200px;
	position: relative;
	padding: 5px;
	float: none;
}

.tc-tab-active {
	background-color: darkgray;
	color: white;
}

.tc-tab-title {
	width: 85%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
}

.tc-tab-close {
	width: 10%;
}

.ntabsnew .tab {
	color: white;
	font-size: 16px;
	font-weight: 500;
	padding: 10px 0;
	border-radius: 8px;
	cursor: pointer;
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	text-align: center;
	box-shadow: 1px 30px 10px -23px #00000091;
}

.fxt-form input {
	border: 1px solid #d9d9d9;
	border-radius: 0px;
	min-height: 44px;
	box-shadow: none;
}

.fxt-form i {
	position: absolute;
	right: 10px;
	top: 13px;
}

.form-group {
	position: relative;
	margin-bottom: 12px;
}

.rz-cell-filter {
	padding: 3px 10px !important;
}


.rz-lookup-search input,
.rz-multiselect,
.rz-dropdown,
.rz-textbox {
	border: 1px solid #c0bfbf !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    height: 35px !important;
    padding: 7px 8px !important;
    font-size: 13px !important;
    background: #f1f1f1 !important;
}

.rz-lookup-search input,
.rz-multiselect,
.rz-dropdown,
.rz-textbox:focus-visible {
    font-size: 13px !important;
}

.rz-calendar .rz-inputtext,
textarea {
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0px 6px !important;
	font-size: 14px !important;
}

.table input,
.table .rz-dropdown,
.table .rz-textbox {
	border: 1px solid #d9d9d9 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 28px !important;
	padding: 0px 8px !important;
}

.table input,
.table .rz-dropdown,
.table .rz-textbox:focus-visible {
	border: 1px solid #d9d9d9 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 28px !important;
	padding: 0px 8px !important;
}

.ntabsnew .tab.tab-active {
	background: linear-gradient(237deg, #6fa534 -13%, #8897ff 67%) !important;
	transition: .5s;
	/* border-top: 8px double #00a1ff; */
	/* padding: 0px!important; */
	margin-top: -8px;
	/* border: 8px double white; */
	position: relative;
}

.ntabsnew .tab.tab-active:after {
	content: "\f0d7";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #8798f5;
	font-size: 86px;
	/* padding-right: 0.5em; */
	position: absolute;
	top: 40%;
	left: 38%
}

.ntabsnew .tab-filling {
	margin-right: 10px;
}

.ntabsnew .tab-content {
	padding: 0 10px;
	width: 100%;
	overflow: hidden;
	transition: transform 0.3s ease-out;
	height: auto;
	transform: scaleY(1);
	transform-origin: top;
}


/** Login 12 start **/
.login-12 .login-inner-form {
	color: #cccccc;
	position: relative;
}

.login-12 .bg-color-13 {
	min-height: 100vh;
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	background: #243143;
	justify-content: center;
	align-items: center;
	padding: 30px 15px;
}

.login-12 .form-box {
	width: 100%;
	text-align: center;
}

.login-12 .login-inner-form .form-box {
	float: left;
	width: 100%;
	position: relative;
}


.login-12 .login-inner-form img {
	margin-bottom: 5px;
}


.login-12 .bg-img {
	top: 0;
	bottom: 0;
	min-height: 100vh;
	z-index: 999;
	background: linear-gradient(-90deg, white, #ffffff61), url(/_content/SkoolMAUI.Shared/css/assets/schbg3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 15px;
}

.login-12 .info h1 {
	font-size: 22px;
	color: #fff;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.login-12 .info h1 span {
	display: block;
	font-size: 43px;
	color: #0dcaf0;
	font-weight: 700;
}

.login-12 .info p {
	margin-bottom: 0;
	color: #fff;
	line-height: 28px;
}

.login-12 .info {
	max-width: 350px;
	margin: 0 auto;
	padding: 30px 20px;
	border: double 10px #fff;
	text-align: center;
	background: #243143;
	border-radius: 8px;
}

.login-12 .login-inner-form i {
	position: absolute;
	top: 12px;
	right: 12px;
	color: #f9777f;
}

.login-12 .login-inner-form .form-group.mb-35 {
	margin-bottom: 35px;
}

.login-12 .login-inner-form .form-group.mb-30 {
	margin-bottom: 30px;
}


.login-12 .form-section {
	text-align: center;
	padding: 30px;
	background: white;
	border-radius: 5px;
	box-shadow: 1px 2px 8px #00000000;
}

.form-section h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 7px;
	color: white;
	text-align: left;
	margin-bottom: 14px;
}

/** MEDIA **/
@media (max-width: 992px) {
	.login-12 .none-992 {
		display: none;
	}
}

@media (max-width: 768px) {
	.login-12 .social-list a {
		width: 35px;
		height: 35px;
		line-height: 35px;
		font-size: 15px;
	}
}

/** Login 12 end **/
.fxt-content-between {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}


.mobilehide {
	display: block;
}


@media only screen and (max-width: 991px) {
	.fxt-none-991 {
		display: none !important;
	}
}

/*Preloader Styles Start*/
.preloader {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	z-index: 999999;
}

.preloader .inner {
	width: 99px;
	height: 99px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.preloader .inner>div {
	border-radius: 50%;
	position: absolute;
	-webkit-animation-name: circle_rotate;
	animation-name: circle_rotate;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
	animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

.preloader .inner .line1 {
	width: 100%;
	height: 100%;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 6px solid #740eaf;
	border-left: 6px solid rgba(116, 14, 175, 0);
	border-right: 6px solid rgba(116, 14, 175, 0);
	border-bottom: 6px solid rgba(116, 14, 175, 0);
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.preloader .inner .line2 {
	width: 70%;
	height: 70%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 6px solid #9726d8;
	border-left: 6px solid rgba(151, 38, 216, 0);
	border-right: 6px solid rgba(151, 38, 216, 0);
	border-bottom: 6px solid rgba(151, 38, 216, 0);
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

.preloader .inner .line3 {
	width: 40%;
	height: 40%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 6px solid #be70eb;
	border-left: 6px solid rgba(190, 112, 235, 0);
	border-right: 6px solid rgba(190, 112, 235, 0);
	border-bottom: 6px solid rgba(190, 112, 235, 0);
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

@-webkit-keyframes circle_rotate {

	50%,
	100% {
		-webkit-transform: rotate(405deg);
		transform: rotate(405deg);
	}
}

@keyframes circle_rotate {

	50%,
	100% {
		-webkit-transform: rotate(405deg);
		transform: rotate(405deg);
	}
}

/*Preloader Styles End*/
/*========================================================================
3. Template Animation
=========================================================================*/
.fxt-template-animation {
	position: relative;
	z-index: 1;
	width: 100%;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.fxt-template-animation .fxt-opacity {
	opacity: 0;
}

.fxt-template-animation .fxt-transformY-50 {
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
}

.fxt-template-animation .fxt-transformX-L-50 {
	opacity: 0;
	-webkit-transform: translateX(-50px);
	-ms-transform: translateX(-50px);
	transform: translateX(-50px);
}

.fxt-template-animation .fxt-transformX-R-50 {
	opacity: 0;
	-webkit-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
}

.loaded.fxt-template-animation {
	opacity: 1;
	background-color: white;
}

.fxt-template-layout34 {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
}

.fxt-logo img {
	width: 236px;
}

.loaded.fxt-template-animation .fxt-opacity {
	opacity: 1;
	-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.loaded.fxt-template-animation .fxt-transformY-50 {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.loaded.fxt-template-animation .fxt-transformX-L-50 {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.loaded.fxt-template-animation .fxt-transformX-R-50 {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	-webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	-o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.loaded.fxt-template-animation .fxt-transition-delay-1 {
	-webkit-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.loaded.fxt-template-animation .fxt-transition-delay-2 {
	-webkit-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.loaded.fxt-template-animation .fxt-transition-delay-3 {
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.loaded.fxt-template-animation .fxt-transition-delay-4 {
	-webkit-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.loaded.fxt-template-animation .fxt-transition-delay-5 {
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.loaded.fxt-template-animation .fxt-transition-delay-6 {
	-webkit-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

.loaded.fxt-template-animation .fxt-transition-delay-7 {
	-webkit-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	transition-delay: 0.7s;
}

.loaded.fxt-template-animation .fxt-transition-delay-8 {
	-webkit-transition-delay: 0.8s;
	-o-transition-delay: 0.8s;
	transition-delay: 0.8s;
}

.loaded.fxt-template-animation .fxt-transition-delay-9 {
	-webkit-transition-delay: 0.9s;
	-o-transition-delay: 0.9s;
	transition-delay: 0.9s;
}

.loaded.fxt-template-animation .fxt-transition-delay-10 {
	-webkit-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s;
}

.loaded.fxt-template-animation .fxt-transition-delay-11 {
	-webkit-transition-delay: 1.1s;
	-o-transition-delay: 1.1s;
	transition-delay: 1.1s;
}

.loaded.fxt-template-animation .fxt-transition-delay-12 {
	-webkit-transition-delay: 1.2s;
	-o-transition-delay: 1.2s;
	transition-delay: 1.2s;
}

.loaded.fxt-template-animation .fxt-transition-delay-13 {
	-webkit-transition-delay: 1.3s;
	-o-transition-delay: 1.3s;
	transition-delay: 1.3s;
}

.loaded.fxt-template-animation .fxt-transition-delay-14 {
	-webkit-transition-delay: 1.4s;
	-o-transition-delay: 1.4s;
	transition-delay: 1.4s;
}

.loaded.fxt-template-animation .fxt-transition-delay-15 {
	-webkit-transition-delay: 1.5s;
	-o-transition-delay: 1.5s;
	transition-delay: 1.5s;
}

.loaded.fxt-template-animation .fxt-transition-delay-16 {
	-webkit-transition-delay: 1.6s;
	-o-transition-delay: 1.6s;
	transition-delay: 1.6s;
}

.loaded.fxt-template-animation .fxt-transition-delay-17 {
	-webkit-transition-delay: 1.7s;
	-o-transition-delay: 1.7s;
	transition-delay: 1.7s;
}

.fxt-template-layout34 .fxt-shape {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

.fxt-template-layout34 .fxt-main-title {
	max-width: 280px;
	width: 100%;
	font-size: 40px;
	font-weight: 700;
	color: #000;
	margin-bottom: 20px;
}

.fxt-template-layout34 .fxt-switcher-description1 {
	color: #363636;
	font-size: 20px;
	max-width: 260px;
	width: 100%;
	margin-bottom: 40px;
}

.fxt-template-layout34 .fxt-column-wrap {
	position: relative;
	min-height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-top: 15vh;
	padding-bottom: 15vh;
	background: red;
}

.fxt-template-layout34 .fxt-animated-img {
	position: absolute;
	z-index: -1;
	top: 60%;
	right: 143px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.fxt-transition-delay-3 h2 {
	margin-left: 15px;
	font-weight: 600;
	font-size: 21px;
}

.loaded.fxt-template-animation:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/wave-1-2PNG.PNG);
	height: 96px;
	width: 244px;
	right: 0;
	top: 0;
	background-size: cover;
	opacity: .5;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.loaded.fxt-template-animation:after {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/wave-1-1.PNG);
	height: 228px;
	width: 433px;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .5;
}

.fxt-transition-delay-3 {
	border-left: 9px double #fe89bf;
	padding-right: 15px;
	display: block;
}

.fxt-transformX-L-50 h2 {
	margin-left: 15px;
}

.fxt-transformX-L-50 .fxt-logo {
	margin-left: 15px;
}

.fxt-animated-img img {
	width: 445px;
	opacity: 0.7;
}

.fxt-template-layout34 .fxt-switcher-description1 .fxt-switcher-text {
	display: inline-block;
	color: #4460f1;
	font-size: 18px;
	font-weight: 600;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.loaded.fxt-template-animation .fxt-transition-delay-18 {
	-webkit-transition-delay: 1.8s;
	-o-transition-delay: 1.8s;
	transition-delay: 1.8s;
}

.loaded.fxt-template-animation .fxt-transition-delay-19 {
	-webkit-transition-delay: 1.9s;
	-o-transition-delay: 1.9s;
	transition-delay: 1.9s;
}

.loaded.fxt-template-animation .fxt-transition-delay-20 {
	-webkit-transition-delay: 2s;
	-o-transition-delay: 2s;
	transition-delay: 2s;
}

.catsectionbox {
	background: white;
	padding: 50px;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 10px 22px 40px -23px #80808087;
	border-radius: 10px;
	position: relative;
	z-index: 2;
}

.catsectionbox h1 {
	font-size: 21px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 25px;
	position: relative;
}

.catsectionbox h1 span {
	display: block;
	text-transform: capitalize;
	font-size: 13px;
	color: grey;
	font-weight: 300;
	letter-spacing: 0.2em;
	margin-top: 4px;
}

.nbg1 {
	background: linear-gradient(45deg, #37b9ff, #15d1ff);
}

.nbg2 {
	background: linear-gradient(45deg, #ff599b, #ffa764);
}

.nbg3 {
	background: linear-gradient(45deg, #2dcfbb, #74efbb);
}

.nbg4 {
	background: linear-gradient(45deg, #ffa637, #ff6095);
}

.nbg5 {
	background: linear-gradient(45deg, #6e22ff, #c067ff);
}

.nbg6 {
	background: linear-gradient(124deg, #4bd96a, #ff817e);
}

.nbg7 {
	background: linear-gradient(-33deg, #4bd9b2, #aa7eff);
}

.schooldet {
	background: white;
	width: 480px;
	padding: 15px 15px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0 auto;
	min-height: 153px;
	z-index: 9;
	position: relative;
}

.schooldet img {
	height: 110px;
	float: left;
}

.schooldet h5 {
	font-size: 26px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 32px 0;
	margin-left: 30%;
}

.schooldet h5 span {
	display: block;
	text-transform: capitalize;
	font-size: 15px;
	color: grey;
	font-weight: 300;
}

#catsec {
	position: relative;
}

#catsec:before {
	content: '';
	background: linear-gradient(to right, #ffffff00, #ffffff00), url(/_content/SkoolMAUI.Shared/css/assets/maindashbg2.jpg);
	position: absolute;
	left: -33px;
	right: 0;
	top: -18px;
	bottom: 0;
	height: 100vh;
	/* width: 100%; */
	background-repeat: space;
	background-size: cover;
	z-index: 1;
}

.catsectionbox .dashboxnw {
	text-align: center;
	/* border: 1px solid grey; */
	min-height: 187px;
	box-shadow: 0px 26px 7px -16px grey;
	transition: .3s;
	border-radius: 8px;
	padding: 14px;
}

.catsectionbox .dashboxnw:hover {
	margin-top: -3px;
	transition: .3s;
}

.catsectionbox i {
	background: white;
	height: 75px;
	width: 75px;
	font-size: 22px;
	border-radius: 50%;
	text-align: center;
	line-height: 76px;
	box-shadow: 0px 10px 11px -11px grey;
}

.catsectionbox h3 {
	font-size: 16px;
	font-weight: 500;
	margin-top: 26px;
	margin-bottom: 0;
	color: white;
}

.catsectionbox a {
	background: #00000047;
	padding: 2px 10px;
	display: inline-block;
	border-radius: 5px;
	margin-top: 8px;
	color: white;
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 300;
}

.rz-messages-error {
	position: relative !important;
	color: #ff212f;
	font-size: 0.75rem;
	padding: 0;
	font-weight: 600;
}

.topbarmenu ul {
	list-style: none;
	padding: 7px 0;
	margin: 0;
}

.mbtnres span {
	font-weight: 500;
	display: inline-block;
	position: relative;
	top: -6px;
}

.topbarmenu li {
	display: inline-block;
	text-align: center;
}

.topbarmenu li:last-child {
	margin-right: 0px;
}

.topbarmenu li button span {
	font-weight: 600 !important;
	color: #242424;
}

.feedtlstu {
	text-align: center;
}

.feedtlstu .stuadmno {
	background: #ff6363;
	color: white;
	display: inline-block;
	padding: 0 7px;
	border-radius: 5px;
	margin-bottom: 4px;
	text-transform: uppercase;
	font-weight: 600;
}

.feedtlstu img {
	height: 137px;
	border-radius: 5px;
	border: 2px solid #ff8585;
}

.stugenderwise {
	margin-top: 4px;
}

.feedtlstu h3 {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	margin-top: 4px;
}

.studash .table-responsive h4 {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 15px;
	background: #ff5d5d;
	color: white;
	padding: 4px 8px;
	position: absolute;
	top: -19px;
	left: 13px;
	border-radius: 5px;
}

.feedtlstu h3 span {
	display: block;
}

.totlamnt h5 {
	color: red;
	font-weight: 500;
	font-size: 16px;
}

.topbarmenu li a {
	color: black;
	font-weight: 400;
	font-size: 14px;
	margin-right: 11%;
}

.regseatheader {
	text-align: center;
}

.regseatheader img {
	height: 108px;
	width: 108px;
	/* float: left; */
	/* padding: 11px; */
	border-radius: 8px;
	border: 0;
}

.regseatheader h5 {
	font-weight: 800;
	font-size: 26px;
	text-transform: uppercase;
	margin-bottom: 0 !important;
}

.regseatheader h5 span {
	display: block;
	font-size: 15px;
	font-weight: 400;
}

#publicsection {
	position: relative;
}

#publicsection:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/admissionbg-new.png);
	height: 570px;
	width: 372px;
	left: -147px;
	top: 110px;
	background-repeat: no-repeat;
	filter: opacity(0.1);
}

#publicsection:after {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/admissionbg-new.png);
	height: 557px;
	width: 322px;
	right: -16px;
	top: 110px;
	background-repeat: no-repeat;
	filter: opacity(0.1);
}

.regseatheader {
	position: relative;
}

.regseatheader::before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/adm-open.png);
	height: 170px;
	width: 220px;
	left: -75px;
	background-size: cover;
	top: 40px;
}

/*new css*/
/*new css*/


.studash .card-body {
	padding: 0;
}

.studash .card-body h1 {
	font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    background: #2bb984;
    color: white;
    padding: 5px 14px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
	.studash .card-body h1:after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		border-top: 28px solid #2bb984;
		border-right: 25px solid transparent;
		right: -24px;
		top: 0px;
	}

.stubox {
	display: flex;
}

.stubox span {
	font-weight: 500;
	font-size: 14px;
	display: block;
}

.stubox span h6 {
	font-size: 15px;
	font-weight: 500;
}

.stubox h6 {
	font-size: 14px;
	font-weight: 600;
}

.stubox img {
	height: 105px;
	width: 89px;
	object-fit: cover;
	/* border: 6px solid #80808040; */
	border-radius: 3px;
	padding: 0;
	display: block;
	/* margin: 0 auto 6px; */
	margin-right: 8px;
}

.stu__bx__ad {
	position: absolute;
	left: -11px;
	top: -13px;
	background: #cd2443;
	padding: 1px 6px;
	font-size: 13px;
	font-weight: 600;
	color: white;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.stu__bx__cls {
	position: absolute;
	right: -11px;
	top: -13px;
	background: #cd2443;
	padding: 1px 6px;
	font-size: 13px;
	font-weight: 600;
	color: white;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.stubox .stuname {
	/*background: #c736c7; */
	display: inline-block;
	/* padding: 2px 11px; */
	/* border-radius: 5px; */
	/* text-transform: uppercase; */
	text-align: left;
}

	.stubox .stuname h4 {
		background: #f17878;
		color: white;
		font-size: 13px;
		display: inline-block;
		padding: 2px 6px !important;
		border-radius: 5px;
	}

.stubox .stuname h5 {
	color: black;
	font-size: 15px;
	font-weight: 700;
	line-height: 19px;
	margin: 0;
}

.stubox .stuname h5 span {
	display: block;
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
}

.stuprofile {
	border-top: 1px solid #8080805c;
	margin-top: 5px;
}

	.stuprofile .mystuprofile,
	.stuprofile_mob .mystuprofile {
		display: block;
		text-align: center;
		background: #162785;
		color: #fff;
		padding: 5px 20px;
		margin-top: 5px;
		font-size: 13px;
		transition: .4s;
		min-height: auto;
		text-decoration: none;
		border-radius: 3px;
	}
a{
	text-decoration: none!important;
}

.stuprofile button {
	display: block;
	text-align: center;
	padding: 5px 10px;
	margin-top: 5px;
	font-size: 13px;
	transition: .4s;
	border-radius: 0px;
	width: 100%;
}

.stuprofile .mysibling,
.stuprofile_mob .mysibling {
	display: block;
	text-align: center;
	background: #4aa739;
	color: #fff;
	padding: 5px 10px;
	margin-top: 5px;
	font-size: 13px;
	transition: .4s;
}

.stuprofile a:hover {
	background: #c736c7;
	color: #fff;
	transition: .4s;
}

.paddingfixstu h5 {
	font-weight: 600;
	font-size: 14px;
	margin-top: 6px;
}

.stunotboxbtns {
	padding: 0 10px;
}

.stunotboxbtns a,
.stunotboxbtns button {
	padding: 4px 7px;
}

.bg-new {
	background-color: #673ab7 !important;
}

.mobiletable .rz-cell-data input {
	height: auto !important;
}
.stunotbox .stunotidate {
	display: inline-block;
    height: 60px;
    width: 60px;
    border-radius: 5px;
    margin-right: 10px;
    text-align: center;
    padding: 7px 5px;
    min-width: 60px;
    min-height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
}
	.stunotbox .stunotidate h6 {
	margin: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.stunotbox .stunotidate h6 span {
	font-weight: 300;
	font-size: 11px;
	display: block;
	line-height: 1.1;
}

.stunotbox .stunotiddetail {
	margin-left: 3px;
	height: 60px;
	overflow: hidden;
	padding-right: 25px;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.stunotbox .stunotiddetail h4{
	font-size: 16px;
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 2px;
}
.stunotbox .stunotiddetail h5 {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 4px;
}

.stunotbox .stunotiddetail h6 {
	font-size: 14px;
	font-weight: 400;
	color: #444444;
	height: 36px;
	overflow: hidden;
	margin-bottom: 5px;
}

.notstatus {
	position: absolute;
	right: 7px;
	font-style: italic;
	color: #565656;
	bottom: -27px;
}

.stuadmno {
	background: #d77807;
	color: white;
	position: absolute;
	top: -2px;
	left: 0;
	padding: 0 13px;
	border-top-left-radius: 5px;
	font-weight: 600;
}

.stunotbox a,
.stunotbox button {
	      padding: 3px 18px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
    min-height: 23px;
    margin-top: 5px !important;
}

.stunotbox .stunotiddetail h6 span {
	display: block;
	font-style: italic;
	font-weight: 500;
	color: black;
}

.stunotifixheight {
	height: 294px;
    overflow: hidden;
    position: relative;
}

.stumostlinks {
	background-position: 10px 2px;
}

html {
	height: 100%;
}

html,
body {
	font-family: system-ui;
}

body {
	font-size: 0.875rem;
	color: #000;
	background-color: #ddd;
	height: 100%;
}

/** Login 5 start **/
.login-5 .form-section {
	min-height: 100vh;
	position: relative;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 15px;
	background: #ddf0fbf0;
}

.login-5 .form-section:after {
	content: '';
	/* background: url(assets/photobg-1.PNG); */
	position: absolute;
	height: 380px;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	bottom: 0;
	z-index: 1;
}

.login-5 .form-inner:before {
	content: '';
	background: url(/_content/SkoolMAUI.Shared/css/assets/loginbg1.png);
	position: absolute;
	height: 187px;
	width: 83px;
	background-size: contain;
	background-repeat: no-repeat;
	top: 0;
	z-index: 1;
	right: 0;
}

.schooldetailnw {
	text-align: center;
    border-bottom: 1px solid #80808061;
    margin-bottom: 0;
    padding-bottom: 0;
}

.schooldetailnw img {
	width: 125px;
	margin-bottom: 8px;
}

.schooldetailnw h2 {
	margin-top: 0 !important;
	margin-bottom: 0;
	font-size: 21px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 24px;
}

.schooldetailnw h2 span {
	display: block;
	font-weight: 400;
	font-size: 14px;
	text-transform: capitalize;
	color: grey;
}

.login-5 .form-inner .designform {
	padding: 20px;
	background: #ccdcff59;
}

.login-5 .form-inner .usrtype {
	margin-bottom: 10px;
	margin-top: -8px;
}

.login-5 .form-inner .usrtype h3 {
	background: #0f476e;
	display: inline-block;
	font-size: 16px;
	padding: 5px 8px;
	margin-bottom: 6px;
	color: white;
	font-weight: 400;
}

.login-5 .form-section .form-box i {
	font-size: 14px;
	position: absolute;
	right: 23px;
	top: 37px;
}

.login-5 .form-inner .usrtype input {
	    height: 100%;
    width: 100%;
    margin-top: 0;
    min-height: auto;
}

.login-5 .form-inner {
	max-width: 500px;
	width: 100%;
	background: white;
	padding: 10px 0 7px;
	box-shadow: 8px 12px 19px #808080a6;
	border-radius: 5px;
	position: relative;
	z-index: 2;
}

.login-5 .form-inner h6 {
	color: white;
	background: #0f476e;
	display: inline-block;
	position: absolute;
	left: -8px;
	margin: 0;
	padding: 9px 20px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 17px;
	top: 7px;
}

.login-5 .bg-img {
	background-size: cover;
	min-height: 100vh;
	z-index: 999;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	background: #0f476e;
}

.login-5 .bg-img:before {
	content: "";
	background: #000;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	opacity: 0.3;
}

.login-5 .form-section .extra-login {
	margin-bottom: 25px;
	position: relative;
}

.login-5 .form-section .extra-login::before {
	position: absolute;
	left: 0;
	top: 10px;
	width: 100%;
	height: 1px;
	background: #d8dcdc;
	content: "";
}

.login-5 .form-section .extra-login>span {
	padding: 1px 20px;
	position: relative;
	font-size: 15px;
	color: #535353;
	background: #fff2f2;
}

.login-5 .form-section .form-check-input {
	width: 20px;
	height: 20px;
	margin-top: 0px;
	position: absolute;
	border-radius: 2px;
	border: none;
	background-color: #fff;
	margin-left: -22px;
}

.login-5 .form-check-input:focus {
	border-color: snow;
	outline: 0;
	box-shadow: none;
}

.login-5 .form-check-input:checked {
	background-color: #f5c025 !important;
}

.login-5 .form-section p {
	margin-bottom: 0;
	font-size: 13px;
}

.login-5 .form-section ul {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.login-5 .form-section .social-list li {
	display: inline-block;
	margin-bottom: 5px;
}

.login-5 .form-section .thembo {
	margin-left: 4px;
}

.login-5 .form-section h3 {
	margin: 0 0 25px;
	font-size: 25px;
	font-weight: 400;
}

.login-5 .form-section .form-group {
	margin-bottom: 15px;
	position: relative;
}

.login-5 .form-section .form-control {
	padding: 6px 6px 6px;
	font-size: 13px;
	outline: none;
	height: 40px !important;
	color: #535353;
	border-radius: 3px;
	font-weight: 500;
	/* border: 1px solid #0000001c !important; */
	background: #ccdcff;
}

.login-5 .fxt-footer {
	margin-top: 15px;
	border-top: 1px solid #80808061;
	padding-top: 4px;
}

.login-5 .fxt-footer img {
	width: 165px;
}
.login-5 .btn-primary {
	letter-spacing: 0.04em;
	padding: 5px 0;
}
.login-5 .fxt-btn-primary {
	background-color: #49cd49 !important;
	letter-spacing: 0.04em;
	padding: 8px 0;
	min-height: auto;
	line-height: normal;
	font-weight: 300;
}

.login-5 .fxt-btn-danger {
	background-color: #f97e7e !important;
	letter-spacing: 0.04em;
	padding: 8px 0;
	min-height: auto;
	line-height: normal;
	font-weight: 300;
}


.login-5 .form-section .form-box button {
	position: absolute;
	right: 14px;
	top: 27px;
	color: #3a3a3a;
}

.formhidediv {
	text-align: left;
	padding: 0 40px;
	position: relative;
}

.login-5 .form-section .form-check {
	margin-bottom: 0;
}

.login-5 .form-section a.forgot-password {
	font-size: 16px;
}

.login-5 .form-section a.forgot-password:hover {
	color: #535353;
}

.login-5 .logo img {
	margin-bottom: 15px;
	height: 25px;
}

.login-5 .btn-theme {
	position: relative;
	display: inline-block;
	border: none;
	outline: none !important;
	color: #ffffff;
	text-transform: capitalize;
	transition: all 0.3s linear;
	z-index: 1;
	overflow: hidden;
	cursor: pointer;
	font-size: 17px;
	font-weight: 400;
	font-family: 'Jost', sans-serif;
	border-radius: 3px;
	width: 100%;
}
.btn-group-login{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-group-login .btn-simple-log{
	background-color: transparent !important;
    color: black !important;
    padding: 0;
    min-height: auto;
    line-height: normal;
    text-decoration: underline;
}
.form-box{
	position: relative;
}
.login-5 .btn-theme:after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	content: "";
	border-radius: 3px;
	transform: perspective(200px) scaleX(0.1) rotateX(90deg) translateZ(-10px);
	transform-origin: bottom center;
	transition: transform 0.4s linear, transform 0.4s linear;
	z-index: -1;
}

.login-5 .btn-theme:hover:after {
	transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
	transition: transform 0.4s linear, transform 0.4s linear;
}

.login-5 .btn-lg {
	padding: 0 50px;
	line-height: 55px;
}

.login-5 .btn {
	box-shadow: none !important;
}

.login-5 .btn-primary {
	background: #f5c025;
}

.login-5 .btn-primary:after {
	background: #e3af18;
}

.login-5 .lines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: -1;
}

.login-5 .line {
	position: absolute;
	width: 5px;
	height: 100%;
	top: 0;
	left: 50%;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.login-5 .line::after {
	content: '';
	display: block;
	position: absolute;
	height: 15vh;
	width: 100%;
	top: -50%;
	left: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
	animation: drop 7s 0s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
	z-index: -888;
}

.login-5 .line:nth-child(1) {
	margin-left: -40%;
}

.login-5 .line:nth-child(1)::after {
	animation-delay: 1s;
}

.login-5 .line:nth-child(3) {
	margin-left: 40%;
}

.login-5 .line:nth-child(3)::after {
	animation-delay: 2s;
}

.login-5 .line:nth-child(4) {
	margin-left: -20%;
}

.login-5 .line:nth-child(4)::after {
	animation-delay: 3s;
}

.login-5 .line:nth-child(5) {
	margin-left: 20%;
}

.login-5 .line:nth-child(5)::after {
	animation-delay: 4s;
}

@keyframes drop {
	0% {
		top: -50%;
	}

	100% {
		top: 110%;
	}
}

.login-5 .info {
	max-width: 650px;
}

.login-5 .info .name_wrap {
	border-bottom: 1px solid grey;
	margin-bottom: 3%;
}

.login-5 .info img {
	width: 400px;
}


.login-5 .social-list li a {
	font-size: 13px;
	font-weight: 600;
	width: 130px;
	margin: 2px 0 3px 0;
	height: 40px;
	line-height: 40px;
	border-radius: 3px;
	display: inline-block;
	text-align: center;
	color: #fff;
}

.login-5 .social-list li a i {
	height: 40px;
	width: 40px;
	line-height: 40px;
	float: left;
	border-radius: 3px;
}

.login-5 .social-list li a span {
	margin-right: 7px;
}

.login-5 .name_wrap h1 {
	position: relative;
	font-size: 47px;
	font-family: "Poppins", sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 20px;
	display: inline-block;
	overflow: hidden;
}

.login-5 h1 span {
	padding-left: 2px;
	font-size: 19px;
	display: list-item;
}

/** Social media **/
.login-5 .facebook-bg {
	background: #4867aa;
}

.login-5 .twitter-bg {
	background: #33CCFF;
}

.login-5 .google-bg {
	background: #db4437;
}

.login-5 .google-i {
	background: #c3291c;
}

.login-5 .facebook-i {
	background: #3b589e;
}

.login-5 .twitter-i {
	background: #0cace0;
}

@media (max-width: 1200px) {
	.login-5 .name_wrap h1 {
		font-size: 40px;
	}
}

@media (max-width: 992px) {
	.login-5 .bg-img {
		display: none;
	}

	.login-5 .social-list li a {
		width: 120px;
	}
}

.usrtype ul {
	margin-bottom: -1px;
    list-style: none;
    padding: 0;
    display: flex;
    width: 100%;
    justify-content: center;
}

.usrtype li {
	width: 26%;
    border: 1px solid #80808052;
    border-radius: 3px;
    margin: 0px 4px;
    padding: 0px 0;
    position: relative;
    text-align: center;
    display: inline-block;
}

.usrtype li img {
	width: 52px;
	height: 35px;
	margin-bottom: 3px;
	object-fit: contain;
}

.usrtype input[type="radio"]:checked+label{
	    font-weight: bold;
    background: #46c0f1;
    color: white;
   
} 

.usrtype li .radiocheck {
	  display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    width: 100%;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

.usrtype li label {
	font-size: 12px;
    color: #4c4b4b;
    font-weight: 500;
    margin-bottom: 0;
    display: block;
    text-transform: uppercase;
    padding: 2px 0;
}

.usrtype li label span {
	font-weight: 500;
    display: block;
    color: black;
    font-size: 14px;
}

.mychidrns h2 {
	   text-align: center;
    font-size: 23px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.mychidrns .childbox {
	   background: #fffdfc;
    padding: 10px;
    border-radius: 5px;
    border-top: 2px solid #858513;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}
.mychidrns .childbox .adno {
	       text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: #8b8b0a;
    padding: 4px 0;
    color: white;
}
.mychidrns .childbox img {
	    height: 130px;
    width: 130px;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid #e9e9e9;
    margin-top: 33px;
    margin-bottom: 10px;
}
.mychidrns .childbox h2 {
	      text-align: center;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}
.mychidrns .childbox h2 span {
	    display: block;
    font-size: 13px;
    text-transform: capitalize;
    margin-top: 5px;
}
.mychidrns .childbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mychidrns .childbox li {
	font-size: 13px;
	color: #3a3939;
	line-height: 18px;
}

.mychidrns .childbox li span {
	font-weight: 700;
	color: black;
}

.mychidrns .stufootrbtn {
	border-top: 1px solid #80808061;
    margin-top: 11px;
    padding-top: 14px;
}
.mychidrns .stufootrbtn .rz-button-text{
	  font-size: 13px !important;
    padding: 4px 12px;
}
.mychidrns .stufootrbtn button {
	padding: 6px 12px !important;
}

.mychidrns .stufootrbtn .btn-primary {
	background-color: #49cd49 !important;
}

.mychidrns .stufootrbtn .btn-danger {
	background-color: #f97e7e !important;
}


.shrtprobg {
	width: 100%;
	border-radius: 5px;
}

.nstafdash .staffimgn {
	position:relative;
	margin-top: 0;
    border-radius: 10px;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background: white;
    padding: 10px;
}

.staffdesg {
	display: inline-block;
    border-radius: 3px;
    color: #cf2a2a;
    font-style: italic;
    font-weight: 700;
}

.nstafdash .staffimgn img {
	    height: 100px;
    width: 85px;
    border-radius: 5%;
    margin-right: 4px;
    border: 2px solid #ff8e8e;
    object-fit: cover;
}

.nstafdash .staffdetnw {
	margin-left: 5px;
}

.nstafdash .staffname {
	font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    margin-bottom: -4px;
    color: #0e0e0e;
}

.bg-info th {
	background: #17657c;
	padding: 8px 4px !important;
	color: white !important;
	border: 1px solid #7e7e7ec2 !important;
}

.tbltd td {
	border: 1px solid #7e7e7e45 !important;
}

.nstafdash .staffname span {
	    font-size: 11px;
    text-transform: capitalize;
    font-weight: 400;
    background: #0c0a68b5;
    display: table;
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
}
.bok_issu_dtl ul {
	list-style: none;
	padding-left: 20px;
}
.bok_issu_dtl li {
	font-weight: 500;
	font-size: 14px;
}
/******/
.space1 {
	background: linear-gradient(45deg, #ff7676, #4584b1);
	height: 13px;
	border-radius: 10px;
}
.bg1 {
	background: #41b981;
}

.bg2 {
	background: #2b74e2;
}

.bg3 {
	background: #d5538e;
}

.bg4 {
	background: #e22b2b;
}

.bg5 {
	background: #c7950a;
}

.bg6 {
	background: #d75151;
}

.bg7 {
	background: #8c0695;
}

.bg8 {
	background: #089783;
}
.stuprocontact{
	    margin-top: 9px;
    margin-bottom: 0;
    border-top: 1px solid #cfcfcf;
    padding-top: 5px;
}
.card {
	padding: 10px;
	background: white;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 10px;
}

.nstafdash .staffimgn ul {
	margin: 0;
    padding: 0;
    list-style: none;
}
.student_edit_form h6{
	background: #0f218c;
    color: white;
    padding: 8px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 17px;
    font-weight: 400;
    margin: 0;
}

.staff_salary_pay .stuformbox {
	background: #ffffff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}
.staff_salary_pay .stuformbox h6 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: -25px -25px 20px -25px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.staff_salary_pay .card {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
}

.staff_salary_pay .card h6 {
	background: #0f7b8c;
    color: white;
    padding: 8px 20px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.staff_salary_pay .card-body {
    padding: 10px;
}

.staff_salary_pay .card-body .row {
    margin: 0;
}

.staff_salary_pay .card-body .col-md-4 {
    padding: 0 10px;
}

.staff_salary_pay .emp_dtl {
	background: #ffffff;
    border: 2px solid #e8f0fe;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.staff_salary_pay .emp_dtl:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.staff_salary_pay .emp_dtl h5 {
	background: linear-gradient(135deg, #256395 0%, #4d7da4 100%);
    color: white;
    padding: 6px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
    margin: -11px -11px 0px -11px;
}

.staff_salary_pay .emp_dtl ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.staff_salary_pay .emp_dtl li {
	padding: 2px 0;
    border-bottom: 1px solid #f1f3f4;
    font-size: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.2s ease;
}

.staff_salary_pay .emp_dtl li:last-child {
    border-bottom: none;
}
.staff_salary_pay .emp_dtl strong {
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.staff_salary_pay .emp_dtl table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.staff_salary_pay .emp_dtl table tr {
    border-bottom: 1px solid #f1f3f4;
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.staff_salary_pay .emp_dtl table tr:hover {
    background-color: #f8f9fa;
}

.staff_salary_pay .emp_dtl table td {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
}

.staff_salary_pay .emp_dtl table td:first-child {
    font-weight: 500;
    color: #495057;
    width: 60%;
}

.staff_salary_pay .emp_dtl table td:last-child {
    font-weight: 600;
    color: #28a745;
    text-align: right;
    width: 40%;
}

.staff_salary_pay .s_total {
	background: linear-gradient(135deg, #bababa 0%, #dfdfdf 100%);
    color: #1a1a1a;
    margin: 5px 0;
}

.staff_salary_pay .s_total th {
	padding: 6px 15px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    color: #2b2b2b;
    background: transparent;
}

.staff_salary_pay .s_total th:first-child {
	text-align: left;
    border-radius: 8px 0 0 8px;
}

.staff_salary_pay .s_total th:last-child {
	text-align: right;
    color: #121212;
    border-radius: 0 8px 8px 0;
    font-weight: 600;
    font-size: 20px;
}
.staff_salary_pay .table.m-0 {
    margin: 0 !important;
    background: transparent;
}
.staff_salary_pay .form-control {
    border: 2px solid #e8f0fe;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.staff_salary_pay .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.staff_salary_pay .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.staff_salary_pay .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
}

.staff_salary_pay label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.nstafdash .staffimgn li {
	font-size: 11px;
	text-transform: uppercase;
}

.nstafdash .shrtprobg {
	background: linear-gradient(-90deg, #ff7d7dc9, #4d578af0), url(/_content/SkoolMAUI.Shared/css/assets/shotprofbg.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 1;
}
.text-container h6 {
	color: white;
	font-size: 16px;
	font-weight: 500;
}
.text-container img {
	width: 75px;
	animation: spin 5s linear infinite;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
.rz-datepicker > .rz-inputtext, .rz-numeric-input {
	background-color: #f6f7fa !important;
}
.rz-datepicker {
	padding: 0 !important;
	width: 100%;
}
.staffbtns .row {
	margin-right: -3px!important;
    margin-left: -3px!important;
}
.nstafdash .staffbtns button {
	display: block;
	margin-bottom: 15px;
	border-radius: 10px;
	transition: .3s;
	width: 100%;
	background: white;
	text-align: center;
	box-shadow: 4px 8px 35px -23px grey;
	border-top: 2px solid #00a1ff;
	min-height: 90px !important;
}
.nstafdash .staffbtns a {
    margin-bottom: 8px!important;
}

.nstafdash .staffbtns a {
	display: block;
	padding: 12px 3px;
	margin-bottom: 15px;
	border-radius: 10px;
	transition: .3s;
	width: 100%;
	background: white;
	text-align: center;
	box-shadow: 4px 8px 35px -23px grey;
	/*border-top: 2px solid #00a1ff;*/
}
.nstafdash .staffbtns a:hover {
	background: #fffee0;
    transition: .3s;
}

.nstafdash .staffbtns button:hover{
	background: #fffde0;
    transition: .3s;
}
.nstafdash .staffbtns img {
	    height: 49px;
    padding: 3px;
    border-radius: 5px;
}
.stf_info{
	background: #fff5f5;
    border: 1px solid #e15f5f;
    border-radius: 5px;
}
.stf_info table{
	padding: 0;
    margin: 0;
}
.stf_info th{
	      background: transparent;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 0;
    width: 130px;
}
.stf_info td{
	text-align: left;
    font-size: 13px;
}
.nstafdash .staffbtns h3 {
        font-weight: 500;
    font-size: 13px;
    margin-bottom: 0;
    color: #1c1c1c;
    text-decoration: none;
}

.stfbtns {
       margin-top: 1px;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #80808052;
    padding-top: 5px;
}

.stfbtns button {
	       height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 3px;
    font-size: 12px !important;
    margin-right: 6px !important;
    min-height: 22px !important;
}

.stafprobtm {
	position: relative;
}

.nstafdash .card h3, .nstafdash .card h1 {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
	background: #2bb984;
	color: white;
	padding: 5px 14px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.nstafdash .card h3:after, .nstafdash .card h1:after{
	content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-top: 28px solid #2bb984;
    border-right: 29px solid transparent;
    right: -28px;
    top: 0px;
}
.admin_noti_bx {
	height: 285px !important;
}
.staffnoti {
	overflow: hidden;
	margin-top: 10px;
}
.staffnoti .marquee-container1{
	height: 393px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #9395de #f1f1f1;
}

.staffnoti_birthday {
	height: 310px;
    overflow-y: scroll;
    margin-top: 10px;
}
.staff_cmn_img{position:relative;}
.staff_cmn_img:before {
	    content: '';
    position: absolute;
    background: url(/_content/SkoolMAUI.Shared/css/assets/teach_dash_j-f.png);
    left: -30px;
    height: 350px;
    width: 350px;
    bottom: 0;
    top: 0;
    background-size: contain;
}
.staffnoti_child {
	   height: 285px;
    margin-top: 10px;
}
.staffnoti_child_both{
	height: 187px;
    overflow-y: scroll;
    margin-top: 10px;
}
.nonstagbothday button{
        background-color: #e86d6d !important;
    padding: 0 !important;
    font-size: 9px;
    min-height: 20px;
    min-width: 20px;
}
.nonstagbothday .rz-button-box i{
	    font-size: 10px;
    height: auto;
    width: auto;
}
.pres_bx {
	padding: 7px;
	border-radius: 3px;
	margin-bottom: 10px;
	position: relative;
	min-height: 90px;
}
	.pres_bx.bg-success .empid {
		position: absolute;
    right: -7px;
    background: #ab8800;
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-radius: 3px;
    top: 3px;
	}
	.pres_bx .empdeg {
		font-weight: 400;
		font-style: italic;
		margin-top: -4px;
		color: #545454;
		font-size: 12px;
	}
	.pres_bx .entrytime {
		border-top: 1px solid #0080007d;
		font-weight: 500;
		font-size: 12px;
		padding-top: 2px;
	}
	.pres_bx h1 {
		color: black;
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 4px;
		width: 126px;
	}
	.pres_bx.bg-success {
		background-color: #fff7d9 !important;
		border: 1px solid #ffdd57;
	}
	.pres_bx.bg-danger {
		background-color: #fde6e8 !important;
		border: 1px solid #d96772;
	}
		.pres_bx.bg-danger .empid {
			position: absolute;
			right: -7px;
			background: #dd525f;
			color: white;
			padding: 2px 6px;
			font-size: 12px;
			letter-spacing: 0.04em;
			border-radius: 3px;
			top: 3px;
		}
		.swiper-button-prev, .swiper-button-next {
	height: 13px !important;
	margin-top: 0 !important;
}
.event_bx_ac {
	background: white;
	padding: 20px;
	position: relative;
}

	.event_bx_ac h1 {
		font-size: 19px;
		font-weight: 500;
	}
		.event_bx_ac h1 span {
			display: block;
			font-weight: 400;
			font-size: 16px;
			margin-top: 5px;
		}
	.event_bx_ac .act_dtl {
		border-top: 1px solid #80808061;
		margin-top: 5px;
		margin-bottom: 4px;
	}
		.event_bx_ac .act_dtl h4 {
			font-size: 17px;
			font-weight: 500;
			line-height: 20px;
		}
	.event_bx_ac .reg_dtl {
		position: absolute;
		top: 20px;
		right: 20px;
	}
		.event_bx_ac .reg_dtl h2 {
			font-size: 16px;
			border: 1px solid #d55252;
			padding: 5px 16px;
			border-radius: 5px;
			font-weight: 400;
			background: #ffecec;
		}

	.event_bx_ac .evntdtl-long {
		margin-top: 10px;
	}
.even_stu {
	background: white;
	padding: 10px;
	margin-top: 10px;
	text-align: center;
	position: relative;
}
	.even_stu.e_bg1 {
		background: #ffffe8;
		border: 1px solid #d9d90a;
	}
	.even_stu.e_bg2 {
		background: #ecffe8;
		border: 1px solid #3dc504;
	}
	.even_stu.e_bg3 {
		background: #ffe7e7;
		border: 1px solid #b74545;
	}
	.even_stu .ad_n {
		position: absolute;
	}
	.even_stu img {
		height: 73px;
		padding: 4px;
		background: #fbd7d7;
		border-radius: 5px;
	}
.evn_stuftr {
	margin-top: 8px;
}
.even_stu .evn_pos {
	position: absolute;
	top: -16px;
	right: -16px;
	background: #ffcccc;
	height: 50px;
	width: 50px;
	display: block;
	border-radius: 50%;
	line-height: 36px;
	font-size: 19px;
	font-weight: 600;
	border: 3px solid #e17d87;
}
.evn_stuftr h2 {
	font-size: 18px;
	font-weight: 600;
}
	.evn_stuftr h2 span {
		display: block;
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: 0.05em;
		color: #404040;
		margin-top: 0px;
	}
.stunotidbtns {
	margin-top: 4px;
}

.staffnoti .stunotbox {
	overflow: hidden;
	width: 100%;
}

.staffnoti .stunotidate {
	height: 60px;
	width: 65px;
	background: #673ab7;
	text-align: center;
	float: left;
	border-radius: 5px;
	padding: 3px 8px;
	border: 1px solid #673ab7;
	margin-right: 8px;
	min-width: 65px;
	min-height: 60px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.staffnoti .stunotidate h6 {
margin: 0;
    color: #fff;
    font-size: 25px;
    line-height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.staffnoti .stunotidate h6 span {
	display: block;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.1;
}
.staffnoti .stunotbox .stunotiddetail h5 {
	color: black;
	text-transform: capitalize;
	font-weight: 600;
	margin-bottom: 3px;
	font-size: 16px;
}

.staffbrthdy .item {
	position: relative;
	z-index: 2;
}

.staffnoti .stunotbox .stunotiddetail p {
	margin: 0;
	color: #565656;
	font-weight: 400;
	font-size: 12px;
}

.staffnoti li {
	padding-bottom: 7px;
	border-bottom: 1px solid #8080806e;
	margin-bottom: 7px;
}

.staffnoti .stunotidbtns a,
.staffnoti .stunotidbtns button {
	padding: 4px 10px !important;
	font-size: 11px;
	height: auto;
	line-height: normal;
	min-height: auto;
}

/* width */
.staffnoti::-webkit-scrollbar,
.staffchild_list::-webkit-scrollbar, .timatbelstaff::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.staffnoti::-webkit-scrollbar-track,
.staffchild_list::-webkit-scrollbar-track, .timatbelstaff::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 5px;
}

/* Handle */
.staffnoti::-webkit-scrollbar-thumb,
.staffchild_list::-webkit-scrollbar-thumb, .timatbelstaff::-webkit-scrollbar-thumb {
	background: #8f6c0e;
	border-radius: 5px;
}

/* Handle on hover */
	.staffnoti::-webkit-scrollbar-thumb:hover,
	.staffchild_list::-webkit-scrollbar-thumb:hover, .timatbelstaff::-webkit-scrollbar-thumb:hover {
		background: #b30000;
	}

.stafthdtl {
	    background: #ecfff9;
    border: 1px solid #539942;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
}

	.stafthdtl ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.stafthdtl ul li{
		font-size: 13px;
    display: flex;
    justify-content: space-between;
	line-height: 23px;
	}
.staffbrthdy img {
	    height: 45px;
}

.staffbrthdy h5 {
	color: black;
	margin-left: 87px;
	display: block;
	font-size: 18px;
	padding: 13px 0;
	line-height: 19px;
}

.staffbrthdy h5 span {
	display: block;
	text-transform: capitalize;
	font-size: 12px;
	color: #404040;
}
.pass_show_icon {
	position:absolute;
	right:0;
	top:0;
}
.timatbelstaff th {
	background: #416bb7;
	color: white;
	font-size: 12px;
	padding: 5px 7px !important;
}

.timatbelstaff td {
	border: 1px solid #80808069;
	padding: 4px 7px !important;
	font-size: 11px;
	font-weight: 700;
	color: #6c0202;
}

.timatbelstaff td span {
	display: block;
	background: #fbb7e9;
	padding: 1px 2px;
	border-radius: 1px;
	font-size: 10px;
	font-weight: 500;
}

.nstaf_lv_stats .st_lv_st {
	background: white;
	padding: 10px;
	border-radius: 5px;
	position: relative;
	margin-bottom: 20px;
}
	.nstaf_lv_stats .st_lv_st h5 {
		position: absolute;
		left: 0;
		top: 0;
		background: #630099;
		font-size: 14px;
		padding: 5px 8px;
		font-weight: 600;
		color: white;
		border-radius: 3px;
	}
.nstaf_lv_stats .st_lv_st h6 {
	position: absolute;
	top: -10px;
	background: #2285eb;
	color: white;
	font-size: 13px;
	text-transform: uppercase;
	padding: 5px 9px;
	left: 4px;
	border-radius: 5px;
	font-weight: 500;
}

.nstaf_lv_stats .st_lv_st table {
	margin-bottom: 0;
	margin-top: 6px;
}

.nstaf_lv_stats .st_lv_st th,
.nstaf_lv_stats .st_lv_st td {
	padding: 2px 0;
	font-size: 12px;
	border: 0;
	background: none;
}

	.nstaf_lv_stats .st_lv_st .date {
		margin-top: 6px;
		border-bottom: 1px solid #c4c4c4;
		padding-bottom: 5px;
		color: #222121;
		font-weight: 700;
		font-size: 14px;
		font-style: italic;
	}
	.nstaf_lv_stats .st_lv_st .l_v_st {
		position: absolute;
		right: -7px;
		top: -5px;
		background: purple;
		color: white;
		padding: 3px 8px;
		font-size: 12px;
		font-weight: 600;
		font-style: italic;
		border-radius: 3px;
	}

	.nstaf_lv_stats .st_lv_st th {
		width: 67px;
	}
	
	.nstaf_lv_stats .st_lv_st p {
		font-size: 12px;
		color: #808080;
		font-weight: 500;
		border-top: 1px solid #80808059;
		padding-top: 1px;
		margin-top: 7px;
		margin-bottom: 0;
	}
		.nstaf_lv_stats .st_lv_st p span {
			display: block;
			font-weight: 600;
			font-size: 14px;
			color: black;
		}

.nstaf_lv_stats .st_lv_st td {
	color: grey;
	font-weight: 500;
}

	.nstaf_lv_stats .st_lv_st td span {
		margin-right: 8px;
		margin-left: 8px;
		display: inline-block;
		padding: 0;
	}

	.nstaf_lv_stats .st_lv_st .st_lv_st_btns {
		border-top: 1px solid #80808047;
		padding-top: 7px;
		margin-top: 7px;
		display: flex;
		justify-content: flex-start;
	}

.nstaf_lv_stats .st_lv_st .st_lv_st_btns button {
	padding: 5px 14px !important;
	font-size: 12px;
	font-weight: 500;
	border-radius: 5px;
}

.rz-panel-menu {
	background-color: #284572 !important;
	height: 100%;
	padding-bottom: 64px;
}

	.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
		background-color: transparent !important;
	}

	.rz-panel-menu .rz-navigation-menu {
		margin-left: -15px !important;
		margin-top: 10px !important;
		padding-left: 0;
		margin-right: 0 !important;
	}

.header h3 {
	background: #09394a;
	padding: 17px 15px;
	min-width: 259px;
	text-align: center;
	font-size: 16px;
	color: white;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	display: inline-block;
}

.rz-card.designform, .designform {
	margin: 0 !important;
}

.designform .rz-dropdown,
.designform select,
.designform .rz-spinner, input{
	border-radius: 5px !important;
    background: #f6f7fa !important;
    font-size: 13px !important;
    color: #606060 !important;
    padding: 6px 9px !important;
    appearance: auto;
    min-height: 25px;
    border: 1px solid #80808036 !important;
}

.exprtbtn {
	background: #a314fd;
	border: 0;
	margin-bottom: 4px;
	top: -36px;
	right: 0px;
	/* position: absolute;*/
}

.nor-pad .rz-dropdown {
	padding: 5px 7px !important;
	min-height: auto;
	height: auto !important;
}

.qr_gen_btn h2 {
	font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}
.qr_gen_btn{
	border: 1px solid #c7c7c7;
    box-shadow: 2px 3px 47px -36px #454545;
    border-radius: 10px;
    margin-top: -3px;
    background: aliceblue;
    position: relative;
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.qr_gen_btn img{
	width: 80px;
}
.qr_gen_btn button{
	color: white;
    padding: 11px 19px !important;
    text-transform: capitalize;
    font-size: 14px !important;
    border-radius: 3px;
    background: #45ba4a !important;
}

.pagetitle {
	background: #1b82a7;
	font-size: 14px;
	font-weight: 500;
	margin: 7px 4px 7px 9px;
	text-align: center;
	padding: 1px 12px;
	display: inline-block;
}

.pagetitle h5 {
	font-size: 14px;
	font-weight: 500;
	margin: 7px 4px 7px 9px;
	color: white;
}

.rz-card {
	padding: 10px;
	border-radius: 10px !important;
	border: 0px !important;
}

.leavdtl {
	min-height: 103px !important;
	background: #f6f7fa;
	padding: 6px 8px !important;
}
.next-tab{
	width: 21px!important;
    top: -27px;
}
.form-control:focus {
	box-shadow: none;
}

.classubstff .clsubheader h3:last-child {
	margin-right: 0px !important;
}

.classubstff .clsubheader h3 span {
	text-transform: uppercase;
	font-weight: 700;
	display: block;
	background: white;
	color: black;
}

.classubstff .clsubfooter {
	border-top: 1px solid #80808057;
	clear: both;
	/* text-align: center; */
	padding-top: 4px
}

.classubstff .clsubheader {
	margin-top: 15px;
}

.classubstff .clsubfooter .btn {
	border-radius: 5px !important;
	padding: 2px 6px !important;
	margin: 0 0px !important;
}

.classubstff .clsubfooter .btn-success {
	background-color: #059379 !important;
}

.classubstff .clsubfooter .btn-info {
	background-color: #938105 !important;
}

.p_bc_btn {
	background: white;
	padding: 5px 15px;
	border-radius: 0;
	margin-bottom: 0;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1;
	top: 73px;
	min-height: 40px;
}

.sklnmlogo {
	display: flex;
}

.stumostlinksbox {
	padding: 5px 7px;
    border-radius: 5px;
    margin-bottom: 0px;
    transition: .4s;
}

.sklnmlogo img {
	width: 45px;
	height: 38px;
	margin: 3px 0;
	object-fit: contain;
}

.sklnmlogo h6 {
	font-size: 14px;
	font-weight: 500;
	margin: 7px 4px 7px 9px;
	display: flex;
	align-items: center;
}

.staffshtinfon:before {
	content: '';
	position: absolute;
	background: linear-gradient(-180deg, #ffffffc7, #ffff0000), url(/_content/SkoolMAUI.Shared/css/assets/staffproshort.png);
	height: 192px;
	right: -10px;
	left: -10px;
	background-size: contain;
	top: -10px;
	background-repeat: no-repeat;
}

.staffprofile .staffshtinfon .empnonew {
	background: #c46c6c;
	color: white;
	font-style: italic;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 3px;
	max-width: 164px;
	margin: 0 auto;
	margin-bottom: 10px;
	text-align: center;
	position: relative;
	top: -20px;
}

.staffprofile .staffshtinfon .staffproheadr {
	text-align: center;
	border-bottom: 1px solid #cfcfcf;
	padding-bottom: 7px;
	margin-bottom: 11px;
	position: relative;
	margin-top: -13px;
}

.staffprofile .staffshtinfon .staffproheadr img {
	height: 110px;
	width: 110px;
	border-radius: 50%;
	border: 3px solid #ff5656;
	margin-bottom: 7px;
}

.staffprofile .staffshtinfon .staffproheadr h5 {
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	margin: 0;
}

.staffprofile .staffshtinfon .staffproheadr h5 span {
	display: block;
	background: #5bb14c;
	width: 131px;
	padding: 3px 0;
	font-size: 13px;
	color: white;
	text-transform: uppercase;
	border-radius: 27px;
	margin: 6px auto 0;
	font-weight: 600;
}

.staffprofile .staffshtinfon .staffprofootr {
	margin-top: 2px;
	position: relative;
}

.staffprofile .staffshtinfon .staffprofootr ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	text-align: center;
}
.staffprofile .staffshtinfon .staffprofootr ul li {
	    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    position: relative;
    color: black;
    line-height: 15px;
    border-bottom: 1px solid #cdcdcd;
    padding-bottom: 3px;
}

.staffprofile .staffshtinfon .staffprofootr li:last-child {
	margin-bottom: 0px !important;
	border-Bottom:none;
}

.staffprofile .staffshtinfon .staffprofootr ul li span {
	display: block;
    color: #505050;
    font-weight: 400;
    margin-top: 5px;
    font-size: 13px;
}

ul.rz-profile-menu {
	padding: 0 0 !important;
	padding-left: 5px !important;
	margin-left: 5px;
	background: #f0f8ff00 !important;
}

ul.rz-profile-menu .rz-navigation-item-icon-children {
	color: #ffffff !important;
}

.rz-navigation-menu button:hover {
	background: #1c437f !important;
	transition: .4s;
}

.rz-navigation-menu button:hover .rz-button-text {
	color: white !important;
}

.rz-button:not(.rz-state-disabled),
.rz-paginator-element:not(.rz-state-disabled) {
	cursor: pointer;
}

.rz-navigation-menu button {
	width: 100% !important;
	text-align: left;
	display: block;
	background-color: white !important;
	padding: 3px 10px !important;
	min-height: 30px;
	border-radius: 0px !important;
	transition: .4s;
}

.rz-datepicker-trigger {
	padding: 0;
}

.mobileback {
	display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.slide-out-panel {
    width: 100% !important;
	
	}.use_steps {
		width: 100% !important;
	}

	.public_sec_link {
		padding: 8% 65px;
		margin-top: 40px;
	}

	.school_dt_inner {
		width: 100%;
	}

}

@media only screen and (max-width: 767px) {
	.staffprofile .staffproinfo {
		margin-bottom: 28px;
	}

	.staff_d_n_board {
		margin-top: 10px;
	}
	.sidebar {
		width: auto !important;
		position: unset;
	}
	.sidebar .navbar.navbar-dark {
	display:none;}
	.top-row {
		left: 0 !important;
	}
		.usrtype li {
		width: 34% !important;
	}
	.publicnotice_bx{
		height: auto!important;
	}
	.ass_bx p, .ass_desc {
		height: auto !important;
        overflow: visible !important;
	}
	.stucirculars .stucirbox p{
		height: auto !important;
	}
	.mobileexamentry {
		margin-bottom: 85%;
	}

	.use_steps {
		width: 100% !important;
	}

	.speechicon button {
		min-height: 30px !important;
		min-width: 35px !important;
	}

	.publicnoticedetl:before {
		display: none;
	}

	.publicreglist .studash-fee-popup {
		top: 40% !important;
	}

	.mobileback {
		display: block;
		margin: 0px 0 3px;
		padding: 3px 7px;
		position: relative;
		z-index: 1;
	}

	.mobilehide span {
		color: white !important;
	}

	.feetabs .rz-tabview-panels,
	.feetabsdetail .rz-tabview-panels {
		clear: both;
	}

	.feetabs li a,
	.feetabsdetail .rz-tabview-nav li a {
		width: 30% !important;
		float: left;
	}

	.publicreghead.pub {
		top: -10% !important;
	}

	.mychidrns .stufootrbtn button {
		padding: 4px 4px !important;
	}
	.mychidrns .stufootrbtn {
           margin-top: 5px !important;
        padding-top: 5px !important;
        border: 0;
}
.mychidrns{
	padding: 28px 0;
}
	.mychidrns .childbox .adno{
		      position: relative;
        display: inline-block;
        padding: 1px 10px;
        text-transform: capitalize;
        margin-bottom: 3px;
        font-size: 12px;
	}
	.mychidrns .childbox img {
		        height: 110px;
        width: 85px;
        float: left;
        border-radius: 3px;
        border: 3px solid #d9d9d9;
        margin: 3px;
	}
	.mychidrns .childbox h2, .childbox{    text-align: left!important;}
	.fxt-template-layout13 .fxt-bg-wrap {
		display: none;
	}

	.menufttrfix {
		width: 100% !important;
	}

	.pagetitle {
		top: 83px;
		left: 0;
		background: none !important;
		margin: 0px 0;
		margin-left: 12px;
		padding: 0;
		z-index: 1;
		transform: none;
		display: inline-block;
	}

	.pagetitle h5 {
		color: black;
		margin: 0;
		text-align: left;
	}

	.rz-body {
		margin-top: 0px !important;
		margin-left: 0 !important;
		padding-top: 20%;
	}

	.userregisterd input {
		height: 30px !important;
	}

	.newblok h5 {
		font-size: 17px !important;
		line-height: 23px !important;
	}

	.rz-sidebar {
		width: 0 !important;
	}

	.publicreghead .media img {
		width: 64px !important;
		margin-right: 4px !important;
	}

	.rz-sidebar-expanded {
		opacity: 0;
		z-index: 9;
		width: 0 !important;
	}

	.rz-sidebar.rz-sidebar-collapsed {
		width: 250px !important;
		opacity: 1 !important;
		transform: none !important;
		z-index: 999;
	}

	.rz-sidebar-collapsed .rz-sidebar {
		width: 250px !important;
		top: 50px !important;
	}

	.sklnmlogo img {
		padding: 0 6px !important;
	}

	.sklnmlogo {
		margin-left: 40px !important;
	}

	.sklnmlogo h6 {
		margin: 0 !important;
	}

	.acdyear {
		position: absolute;
		right: 0;
		top: 50px;
		left: 0;
		text-align: center;
		background: bisque;
		padding: 2px 0;
	}

	#stuportalcontent {
		padding-top: 65px;
		padding-left: 0% !important;
		padding-right: 0% !important;
	}

	.rz-grid-table thead,
	.rz-grid-table thead th {
		width: 169px !important;
	}

	.fxt-none-767 {
		display: none !important; 
	}

	.mbtnres span {
		display: none !important;
	}

	.mbtnres {
		position: relative !important;
		margin-left: 7px !important;
		max-width: 50px;
	}

	.header h3 {
		background: none !important;
		padding: 0 !important;
		min-width: auto !important;
		margin: 3px 0;
		color: black !important;
		font-size: 11px;
	}

	.mobilehide {
		display: none !important;
	}

	.rz-navigation-menu h6 {
		font-size: 13px;
		font-weight: 600;
		padding: 9px 0;
		margin: 0;
		text-align: center;
		border-bottom: 1px solid #dbdbdb;
	}

	.topbarmenu li {
		margin-right: 0 !important;
	}
}

.table td,
.table th {
	vertical-align: middle;
}

.pageheader h4 {
	font-weight: 600;
	font-size: 17px;
}
.pageheader .row{
	    align-items: center;
}
.stumostlinksbox:hover {
	background: #c736c7 !important;
	transition: .4s;
}

.stumostlinksbox img {
	float: left;
	width: 42px;
	height: 42px;
	filter: invert(1);
	margin-right: 2px;
	padding: 4px;
	position: relative;
	top: -4px;
	left: -2px;
}
.public_right_footer .text-center button{
	width: 100%;
}
.publicnotice .row {
	align-items: center;
    justify-content: center;
}

.stu_nw_dash h1 {
	font-weight: 500;
	border-bottom: 1px solid #c7c3c3;
	padding-bottom: 7px;
	margin-bottom: 6px;
	font-size: 14px;
}
 
.stu_nw_dash .card {
	padding: 7px !important;
}

.stumostlinksbox h5 {
	line-height: 18px;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
	font-size: 11px;
	color: #fff;
}

.stumostlinksbox h5 span {
	display: block;
	font-weight: 600;
	font-size: 12px;
}

.sbg1 {
	background: #dd9b44;
}

.sbg2 {
	background: #3cad41;
}

.sbg3 {
	background: #d14d54;
}

.sbg4 {
	background: #4d6dab;
}

.sbg5 {
	background: #449f90;
}

.sbg6 {
	background: #1394b1;
}

.sbg7 {
	background: #9d2093;
}

.sbg8 {
	background: #7a532a;
}

.sbg9 {
	background: #7a532a;
}

.sbg10 {
	background: #7a532a;
}

.stuholiday {
	list-style: none;
	padding: 0;
	margin: 0;
}

.stuholiday span {
	background: #41834100;
	color: #d14d54;
	padding: 2px 5px;
	font-size: 10px;
	border-radius: 4px;
	width: 78px;
	display: inline-block;
	border: 1px solid #d14d54;
	font-weight: 600;
}

.stuholiday li {
	font-weight: 400;
	font-size: 12px;
	color: #464646;
	margin-bottom: 33px;
}

.stuholiday li:first-child {
	margin-top: 20px;
}

.stuholiday li:last-child {
	margin-bottom: 20px;
}

.stumesgbox {
	border-left: 4px solid #3cad41;
	padding-left: 8px;
	border-bottom: 1px dotted #80808061;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.stumesgbox .date {
	color: #3cad41;
	font-weight: 400;
	font-style: italic;
	border: 1px solid #3cad41;
	display: inline-block;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	padding: 0 6px;
	margin-bottom: 6px;
}

.stumessheightfix {
	height: 250px;
	overflow-y: scroll;
}

.stumesgbox h6 {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

.stumesgbox h6 span {
	color: #808080;
	font-weight: 400;
	font-style: italic;
}

.stumesgbox p {
	margin-bottom: 5px;
}

.stumainslider img {
	height: 210px;
	object-fit: cover;
	width: 100%;
}

.stup-rofile-header {
	margin-bottom: 10px;
}

.stup-rofile-header .stupro-banner {
	position: relative;
}

.stup-rofile-header .stupro-banner img {
	height: 200px;
	width: 100%;
	object-fit: cover;
	background-position: bottom;
}

.stup-rofile-header .stupro-detail {
	background: #fff;
	position: relative;
	padding: 2% 0 2% 19%;
}

.stup-rofile-header .stupro-detail img {
	height: 169px;
	width: 149px;
	object-fit: cover;
	padding: 6px;
	position: absolute;
	top: -83px;
	left: 37px;
	background: #d9d9d9;
	border-radius: 8px;
}

.stup-rofile-header .stupro-detail ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stup-rofile-header .stupro-detail ul li {
	font-size: 19px;
	font-weight: 500;
	display: inline-block;
	width: 33%;
}

.stup-rofile-header .stupro-detail ul li span {
	display: block;
	font-size: 13px;
	font-weight: 400;
}

.stu-middle-profile th {
	font-size: 13px;
	background: none;
	font-weight: 500;
	border-bottom: 0 !important;
	padding: 5px 5px !important;
}

.stu-middle-profile td {
	vertical-align: middle;
	font-size: 13px;
	border-bottom: 0 !important;
	padding: 5px 5px !important;
}

.stucondtl {
	/* display: inline-block; */
	margin-bottom: 22px;
}

.stucondtl i {
	height: 37px;
	width: 37px;
	border: 1px solid #80808082;
	text-align: center;
	line-height: 35px;
	font-size: 18px !important;
	border-radius: 5px;
	background: #dc63f1;
	color: #fff;
	float: left;
}

.stu-middle-profile table {
	margin-top: 5%;
}

.headname {
	background: #dc63f1;
	color: #fff;
	padding: 4px 7px;
	display: inline-block;
	position: absolute;
	left: 0;
}

.stucondtl h5 {
	font-size: 13px;
	font-weight: 500;
	margin-left: 47px;
}

.stucondtl h5 span {
	display: block;
	font-weight: 400;
	font-size: 12px;
	color: #808080;
}


/*08-06-2022 new css*/

.nstufooter {
	border-bottom: 4px solid #d5d5d5;
}

.nstufooter h4 {
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
}

.nstufooter h4 span {
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

.nstulastdet {
	margin-top: 5px;
}

.nstulastdet table {
	margin: 0;
	padding: 0;
}

.nstulastdet th {
	background: none;
	font-size: 13px;
	padding: 7px 0px;
	border: 0 !important;
	color: #fff;
	text-align: left;
}


.nstulastdet i {
	height: 28px;
	width: 23px;
	float: left;
	text-align: center;
	line-height: 27px;
	font-size: 10px !important;
	color: #5e5e5e;
	/* background: #d9d9d9; */
	margin-right: 5px;
	border-radius: 3px;
	border: 1px solid #80808061;
}

.nstulastdet td {
	padding: 7px 5px !important;
	border: 0 !important;
	font-size: 14px;
	color: #fff;
	text-align: right;
}

.stuprntbx {
	background-image: linear-gradient(-64deg, #ffffff91, #ffffff), url(/_content/SkoolMAUI.Shared/css/assets/stuinnerbg.png);
	background-size: cover;
}

	.stuprntbx h3 {
		text-transform: uppercase;
		font-size: 15px;
		font-weight: 500;
		color: #fff;
		background: #802d8f;
		display: inline-block;
		padding: 4px 8px;
		position: absolute;
		right: 0;
		top: -32px;
		margin: 0;
		width: 206px;
		text-align: center;
	}
.stuprntbx img {
	height: 125px;
    width: 115px;
    border: 2px solid #ebebeb;
    object-fit: cover;
    margin-top: 15px;
    border-radius: 5px;
}

.stuprntbx th {
	background: none;
    font-size: 13px;
    padding: 3px 0px;
    border: 0 !important;
    min-height: auto;
    color: #161616;
    font-weight: 700;
	width: 115px;
}

.stuprntbx td {
	 padding: 3px 0px;
	border: 0 !important;
	font-size: 14px;
	color: #343434;
	font-weight: 500;
}


.stuprocontact li {
	font-size: 14px;
    font-weight: 500;
    line-height: 25px;
}

.stuprocontact li strong {
	width: 106px;
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
}

.stuprocontact li span {
		display: inline-block;
		margin-left: 0;
}

.table.designtable {
	margin: 0;
}

.table.designtable th {
	background: #892f86;
	padding: 7px 9px;
	color: white;
	font-weight: 500;
}

.login-inner-form {
	text-align: left;
}

.login-45 {
	top: 0;
	width: 100%;
	bottom: 0;
	opacity: 1;
	z-index: 999;
	min-height: 100vh;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 0;
	background: #fff;
}

.login-45:before {
	content: "";
	position: absolute;
	background: url('../_content/SkoolMAUI.Shared/css/assets/loginbg1.PNG');
	background-repeat: no-repeat;
	background-size: contain;
	top: 0;
	right: 0;
	z-index: -1;
	width: 293px;
	min-height: 100vh;
}

	.login-45:after {
		content: "";
		position: absolute;
		background: url(/_content/SkoolMAUI.Shared/css/assets/loginbg2.PNG);
		background-repeat: no-repeat;
		background-size: contain;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 322px;
		height: 50%;
	}

.login-45 .container {
	max-width: 1120px;
	margin: 0 auto;
}

.login-45 a {
	text-decoration: none;
}

.login-45 label {
	display: none;
}

.login-45 .logo h2 {
	font-weight: 500;
	margin-bottom: 2px;
	text-transform: uppercase;
	font-size: 22px;
}

.login-45 .logo h2 span {
	text-transform: capitalize;
	font-weight: 400;
	font-size: 14px;
	color: #808080;
}

.login-45 .info {
	top: 35%;
	max-width: 400px;
	margin: 0 auto;
}

.login-45 .waviy .color-yellow {
	color: #ff0000;
}

.loginmainsec {
	padding: 23px 0;
}

.loginmainsec h5 {
	color: #fff;
	text-align: center;
	font-weight: 400;
	font-size: 22px;
	line-height: 34px;
}

.loginmainsec h5 span {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 25px;
}

.stulognsec {
	position: absolute;
	/* left: -1px; */
	/* top: -26px; */
	background: #ff2d55;
	padding: 7px 19px;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.stulognsec h5 {
	font-size: 21px;
	text-transform: uppercase;
	font-weight: 400;
	color: #fff;
	margin: 0;
}

.loginstu {
	position: relative;
}

.studentleftmenu {
	top: 54px !important;
}

.loginstu:after {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/logintop-bottom.PNG);
	height: 10px;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 9999;
	background-repeat: repeat-x;
	background-size: contain;
	transform: scaleY(-1);
}

.loginstu:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/logintop-bottom.PNG);
	height: 10px;
	top: -1px;
	left: 0;
	right: 0;
	z-index: 9999;
	background-repeat: repeat-x;
	background-size: contain;
}

.info-text {
	display: flex;
	justify-content: center;
}

.login-45 .waviy {
	position: relative;
	background: #fff;
	text-align: center;
	border-radius: 46px;
	display: inline-block;
	padding: 0 28px;
}

.login-45 .waviy span {
	position: relative;
	display: inline-block;
	font-size: 23px;
	color: #1f9ecb;
	letter-spacing: -0.1em;
	animation: flip 2s infinite;
	font-weight: 600;
	padding: 0px 0;
	animation-delay: calc(.2s * var(--i));
	padding: 2px 0;
}

@keyframes flip {

	0%,
	80% {
		transform: rotateY(360deg)
	}
}

.login-45 p {
	margin-bottom: 25px;
	font-size: 13px;
	text-align: center;
}

.login-45 .form-check-input:checked {
	display: none;
}

.login-45 .form-info {
	justify-content: center;
	align-items: center;
	padding: 5% 40px;
}

.login-45 .login-inner-form .form-group {
	margin-bottom: 16px;
}

.mainlogo {
	margin: 0 auto;
	text-align: center;
}

.login-45 .login-inner-form .form-box {
	/* float: left; */
	/* width: 100%; */
	position: relative;
	font-size: 13px;
}

.login-45 .login-inner-form .form-control {
	padding: 7px 8px 7px !important;
	font-size: 13px !important;
	min-height: 35px;
	outline: none;
	background: #0000 !important;
	color: #626262 !important;
	font-weight: 300;
	border-radius: 0 !important;
	border: none !important;
	border-bottom: solid 2px #e9e8e8 !important;
	margin-bottom: 12px;
}

.login-45 .login-inner-form input::placeholder {
	color: #b3adad;
}


.login-45 .login-inner-form img {
	margin-bottom: 5px;
	height: 40px;
}

.login-45 .login-inner-form .form-box i {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 15px;
	color: #878585;
}

.loginsection h5 {
	color: #fff;
	text-transform: uppercase;
	font-size: 27px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-align: center;
}

.login-45 .login-inner-form .forgot {
	margin: 0;
	line-height: 45px;
}

.form-section .logo {
	margin-bottom: 10px;
}

.brandlogo {
	position: absolute;
	top: -33px;
	left: -42px;
	background: #fff;
	padding: 32px 35px 7px;
	border-radius: 65px;
}

.brandlogo img {
	width: 180px;
}

.contactpaymentfix {
	/* position: fixed; */
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 19px 0 0;
}

.contactpaymentfix h6 {
	font-size: 13px;
	font-weight: 400;
	color: #6a6a6a;
}

.studash {
	position: relative;
}

.loginNotice {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: 9px 22px 0;
}

.loginNotice p {
	margin: 0;
}

.login-45 .bg-img {
	top: 0;
	bottom: 0;
	opacity: 1;
	position: relative;
	justify-content: center;
	align-items: center;
	padding: 10% 4% 0;
	border-right: solid 1px #e7e7e7;
	background: linear-gradient(45deg, #41bde9, #0e8ebb);
}

.login-45 .stulogin-box {
	background: #fff;
	margin: 0 auto !important;
	position: relative;
	z-index: 0;
	max-width: 910px;
}

.login-45 .login-inner-form .checkbox-theme input[type="checkbox"]:checked+label::before {
	color: #fff;
	background: #ff0000;
	border: solid 1px #ff0000;
}

.login-45 .login-inner-form .btn-md {
	cursor: pointer;
	letter-spacing: 0.06em;
	color: #fff;
	padding: 13px 50px 12px 50px;
	font-size: 16px;
	font-weight: 600;
	/* font-family: 'Jost', sans-serif; */
	border-radius: 0;
	text-transform: uppercase;
}

.login-45 .login-inner-form input[type=checkbox],
input[type=radio] {
	margin-right: 3px;
}

.login-45 .login-inner-form p {
	margin: 0;
	color: #8b8b8b;
}

.login-45 .login-inner-form p a {
	color: #e9e8e8;
}

.login-45 .login-inner-form button:focus {
	outline: none;
	outline: 0 auto -webkit-focus-ring-color;
}

.login-45 .login-inner-form .btn-theme.focus,
.btn-theme:focus {
	box-shadow: none;
}

.login-45 .login-inner-form .btn-theme {
	background: #ff2d55;
	border: none;
	color: #fff;
}

.login-45 .login-inner-form .btn-theme:hover {
	background: #eb0707;
}

.login-45 .logo img {
	margin-bottom: 8px;
	width: 126px;
}

.login-45 .nav-pills li {
	display: inline-block;
}

.login-45 .login-inner-form .form-check {
	float: left;
	margin-bottom: 0;
	padding-left: 0;
}

.login-45 .login-inner-form .form-check a {
	color: #e9e8e8;
	float: right;
}

.login-45 .login-inner-form .form-check-input {
	position: absolute;
	margin-left: 0;
}

.login-45 .login-inner-form .form-check label::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 1px;
	margin-left: -22px;
	border-radius: 0;
	background: #fff;
	border: 1px solid #d9d9d9;
}

.login-45 .login-inner-form .form-check-label {
	padding-left: 20px;
	margin-bottom: 0;
	font-size: 16px;
	color: #e9e8e8;
}

.login-45 .form-section input[type=checkbox]:checked+label:before {
	font-weight: 600;
	color: #e6e6e6;
	line-height: 18px;
	font-size: 12px;
	content: "\2713";
}

.login-45 .login-inner-form input[type=checkbox],
input[type=radio] {
	margin-top: 4px;
}

.login-45 .login-inner-form .checkbox a {
	font-size: 12px;
	color: #2a2a2a;
	float: right;
	margin-left: 3px;
	font-weight: 500;
}

.login-45 .form-section {
	text-align: center;
}

.login-45 .form-section h3 {
	font-size: 12px;
	margin-bottom: 31px;
	font-weight: 300;
	color: #919191;
	line-height: 17px;
	letter-spacing: 0.03em;
}

.login-45 .form-section .text {
	font-size: 16px;
	margin-top: 25px;
	margin-bottom: 0;
	color: #e9e8e8;
}

.login-45 .form-section .text a {
	color: #e9e8e8;
}

/** Social buttons start **/
.login-45 .social-list .buttons {
	display: flex;
}

.login-45 .social-list a {
	text-decoration: none !important;
	color: #fff;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	margin: 0 2px 5px;
	font-size: 20px;
	overflow: hidden;
	position: relative;
}

.login-45 .social-list a {
	transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
}

.login-45 .social-list a:hover {
	border-radius: 50%;
}

.login-45 .social-list a i {
	position: relative;
	z-index: 3;
}

.login-45 .social-list a.facebook-bg {
	background: #4867aa;
}

.login-45 .social-list a.twitter-bg {
	background: #33CCFF;
}

.login-45 .social-list a.google-bg {
	background: #db4437;
}

.login-45 .social-list a.dribbble-bg {
	background: #2392e0;
}

.stulogin-box {
	background: #fff;
	border-radius: 10px !important;
	box-shadow: 1px 1px 34px #f35c5152 !important;
}

/** MEDIA **/
@media (max-width: 992px) {
	.login-45 .bg-img {
		display: none;
	}

	.login-45 .form-info {
		padding: 50px 30px;
	}

	.login-45 .stulogin-box {
		max-width: 600px;
		margin: 0 auto;
	}


	.login-45:before {
		background: #efefef;
	}
}

/** Login 45 end **/


.stulogin-box .stuplusdet {
	border: 9px double #ff8787;
	background: #fff;
	margin: 25px 0;
	padding: 10px;
	border-radius: 5px;
}

.stulogin-box .stuplusdet img {
	height: 154px;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
	margin-right: 15px;
	object-fit: cover;
}

.stulogin-box .stuplusdet ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 14px;
}

.stufootrbtn {
	margin-top: 13px;
	border-top: 1px solid #bdbdbd;
	padding-top: 10px;
}

.stulogin-box .stuplusdet li {
	font-size: 14px;
	line-height: 22px;
}

.stulogin-box .stuplusdet li span {
	font-weight: 500;
}

.stulogin-box h6 {
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 500;
}

.stulogin-box h6 span {
	display: block;
	text-transform: capitalize;
	font-weight: 300;
	font-size: 13px;
	color: #989898;
}


.yearchangebtn {
	background: none !important;
	color: black !important;
	padding: 6px 19px !important;
	text-align: left;
	width: 100%;
}

.yearchangebtn:hover {
	background: #0d6efd;
}

.yearchangebtn span {
	font-family: system-ui !important;
	color: #5c5c5c;
	font-size: 15px;
}

/*new css latest*/
.stufull {
	text-align: center;
}

.stufull img {
	height: 125px;
	width: 99px;
	object-fit: cover;
	border: 5px solid #dbdbdb;
	border-radius: 5px;
	margin-bottom: 12px;
}

.stufull h3 {
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.stufull h3 span {
	display: block;
	text-transform: capitalize;
	font-weight: 400;
	color: #666666;
	font-size: 14px;
}

.stufull ul {
	margin: 0;
	padding: 0;
	text-align: left;
}

.stufull th {
	font-size: 13px;
	background: none;
	border: 0;
}

.stufull td {
	font-size: 13px;
	border: 0;
}

.stusibling {
	min-height: 84px;
	border-bottom: 1px solid #dfdfdf;
	padding-top: 4px;
}

.stufull table {
	width: 100%;
	border-top: 1px solid #e3e3e3;
	margin-top: 9px;
	padding-top: 9px;
	text-align: left;
}

.stusibling img {
	height: 74px;
	width: 66px;
	object-fit: cover;
	border: 3px solid #dbdbdb;
	border-radius: 5px;
	margin-bottom: 0;
	float: left;
	margin-right: 8px;
}

.stusibling h3 {
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	margin-bottom: 0;
	line-height: 21px;
}

.stusibling h3 span {
	display: block;
	text-transform: capitalize;
	color: grey;
	font-weight: 400;
	font-size: 14px;
}

.bg-blue {
	background: #3c8dbc !important;
}

.bg-bluelight {
	background: #00c1f2 !important;
}

.bg-purple {
	background: #605ca8 !important;
}

.bg-green {
	background: #01a859 !important;
	color: white;
}

.bg-yellow {
	background: #f49c0d !important;
}

.bg-red {
	background: #e14b39 !important;
}

.bg-orange {
	background: #0c22c1 !important;
}

.backmain {
	position: fixed;
	bottom: 0px;
	right: 24px;
	z-index: 9999;
}

.backmain img {
	width: 150px;
}

.rz-datepicker-calendar td {
	padding: 0px 4px !important;
}

.rz-datepicker-calendar td .rz-state-default {
	padding: 2px 2px !important;
}

ul.rz-profile-menu .rz-navigation-menu {
	z-index: 99999999 !important;
	min-width: 200px !important;
	top: 48px !important;
    margin-right: 10px;
}

.mainamountbox {
	margin-top: 10%;
	background: antiquewhite;
	text-align: center;
	padding: 4px 0;
	border: 3px solid #ddbb8f;
	border-radius: 5px;
	margin-bottom: 14px;
}

.feebtns .btn {
	border-radius: 0px !important;
	border: 0 !important;
}

.impbox {
	background: linear-gradient(45deg, #a3c2e3, #f5f6f7);
	text-align: center;
	padding: 1px;
	border: 1px solid #0000ff;
	border-radius: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.imganimated {
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}

.stufullprofiletbs .rz-tabview-nav li a {
	color: white !important;
	padding: 9px 15px !important;
	min-width: auto;
}

.addstudntbtnnew {
	position: absolute;
	top: 72%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 999;
}

@-moz-keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-moz-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-moz-transform: translateY(-30px);
		transform: translateY(-30px);
	}

	60% {
		-moz-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

@-webkit-keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}

	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-moz-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}

	60% {
		-moz-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}

@keyframes jumpInfinite {
	0% {
		margin-top: 0;
	}

	50% {
		margin-top: 20px;
	}

	100% {
		margin-top: 0;
	}
}

.rz-fieldset-content {
	padding: 10px 10px !important;
}

.stufullprofiletbs .card-header {
	background: #b7358f;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding: 2px 14px;
	color: white;
}

.newgrpopup td {
	padding: 0 5px !important;
}

.stufullprofiletbs .card-header h4 {
	color: white;
}

.stufullprofiletbs .table {
	margin-top: 35px;
	margin-bottom: 0px;
}

.stufullprofiletbs .rz-tabview-nav .rz-tabview-selected a {
	background: #424344;
}

.stufullprofiletbs .rz-tabview-nav .rz-tabview-selected a:after {
	content: "\f0d7";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #424344;
	font-size: 44px;
	padding-right: 0.5em;
	position: absolute;
	top: 9px;
	left: 38px;
}

.stufullprofiletbs table {
	border: 1px solid #d5d5d5;
}

.stufullprofiletbs th {
	font-weight: 500;
	font-size: 13px;
	padding: 5px 8px;
}


.bgtgray {
	background: rgba(66, 66, 66, 0.10);
	overflow: hidden;
	margin-bottom: 10px;
	display: flex;
}

.description-block {
	display: block;
	margin: 10px 0px;
	text-align: left;
}

.description-block>.description-header {
	margin: 0;
	padding: 0 4px;
	font-weight: 600;
	font-size: 14px;
}

.caltable th {
	border: 1px solid grey;
	padding: 7px 10px;
	font-size: 13px;
	background: #4e38c9;
	color: white;
}

.fixfeetabkle__transport {
	height: 120px;
	overflow-y: scroll;
}

.stu_tm_table .table {
	table-layout: fixed;
}

.h__t_grd {
	position: relative;
}

.fixfeetabkle__transport th {
	background-color: #d950c8 !important;
    color: white !important;
    padding: 3px 9px !important;
    text-align: left !important;
    font-weight: 400;
}

.caltable {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: 30px;
}

.stupaymthisbox {
	position: relative;
}
.status_fee {
	font-size: 13px;
}
.stupaymthisbox .status_fee {
	color: white;
	padding: 3px 8px;
	margin-bottom: 5px;
	font-weight: 600;
	position: unset;
	left: 0;
	top: 0;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
}

.stupaymthisbox .status_fee.danger {
	background: #e53939;
}

.stupaymthisbox .status_fee.danger:after {
	content: '';
	/* border-bottom: 2px solid red; */
	left: 0;
	right: 0;
	position: absolute;
	top: 0;
	background: #e53939;
	height: 2px;
	min-width: 100%;
}

.stupaymthisbox .status_fee.success {
	background: #2bab57;
}

.stupaymthisbox .status_fee.success:after {
	content: '';
	/* border-bottom: 2px solid red; */
	left: 0;
	right: 0;
	position: absolute;
	top: 0;
	background: #2bab57;
	height: 2px;
	min-width: 100%;
}

.stupaymthisbox .status_fee.warning {
	background: #d7b50e;
}

.stupaymthisbox .status_fee.warning:after {
	content: '';
    /* border-bottom: 2px solid red; */
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
    /* background: #d7b50e; */
    height: 2px;
    min-width: 100%;
}
.rz-pager a{
       padding: 2px !important;
    min-height: auto;
    min-width: 26px !important;
    height: 25px;
}
.caltable2 {
	padding: 0px;
	margin: 1% 0%;
}

.login-note {
	color: #f51212;
	font-size: 11px;
	font-weight: 600;
	display: block;
}
.stu_pass_view h6{
	font-size: 21px;
	font-weight: 600;
}
.stu_pass_view button {
	max-width: 120px;
}
.caltable2 li {
	padding: 0px;
	margin: 0% 1%;
	display: inline-flex;
	font-size: 14px;
}

.caltable td {
	padding: 3px 7px !important;
	border: 1px solid #c3c3c3;
	text-align: center;
	font-weight: 500;
	font-size: 12px;
	height: 33px;
}
.payment_status {
	text-align: center;
	border: 1px solid #de5454;
	border-radius: 5px;
	padding: 20px;
}
	.payment_status img {
		width: 86px;
	}
	.payment_status h3 {
		font-weight: 500;
		color: #b31919;
		font-size: 21px;
	}
	.payment_status .p_bx {
		background: antiquewhite;
		padding: 8px;
		margin-bottom: 12px;
	}
	.payment_status h6 {
		font-size: 15px;
		font-weight: 600;
	}
		.payment_status h6 span {
			display: block;
			font-size: 21px;
			margin-top: 5px;
		}
.stu_att_st {
	margin-top: 10px;
}
.leave {
	background: #b6d630;
	color: white;
}

.absent {
	background: #e78992;
	color: white;
}

.holiday {
	background: #d66464;
	color: white;
}
.late {
	background: #ffc801;
	color: white;
}
.niwd { 
	background: #70b6d7;
	color: white;
}
.calbgcolor {
	display: block;
	height: 13px;
	width: 13px;
	float: left;
	margin-right: 7px;
	margin-top: 4px;
}
.h_header{
	background: white;
    border: 1px solid #959595;
    padding: 5px;
    border-bottom: 0;
}
.h_header img{
	height: 73px;
    width: 75px;
    border-radius: 3px;
    float: left;
    margin-right: 15px;
    object-fit: contain;
}
.h_header h1{
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}
.h_header h1 span{
	display: block;
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    margin-top: 4px;
}
.h_header h6{
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    border-top: 1px solid grey;
    margin-left: 94px;
    margin-top: 4px;
}
.s_dtl{
	background: white;
    height: 100%;
    border: 1px solid #bfbfbf;
}
.s_dtl h5{
	text-transform: uppercase;
    font-weight: 600;
    font-size: 17px;
	border-bottom: 1px solid grey;
    padding: 3px 0;
    text-align: center;
    background: beige;
}
.s_dtl table{
	background: white;
}

.s_dtl table td{
	color: black;
    font-weight: 500;
    font-size: 13px;
    padding: 2px 6px;
}
.emp_dtl li{
	font-size: 14px;
    line-height: 21px;
}
.emp_dtl li strong{
	display: inline-block;
    width: 127px;
    color: black;
    font-weight: 500;
    font-size: 13px;
}
.formwrap {
	display: block;
	margin: 0 0 0 -10%;
	padding: 25px 35px;
	background-color: #fff;
	border-radius: 10px;
	min-height: 86vh;
	width: 105%;
	-webkit-box-shadow: 0px 2px 15px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow: 0px 2px 15px 0px rgba(50, 50, 50, 0.25);
	box-shadow: 0px 2px 15px 0px rgba(50, 50, 50, 0.25);
}

/** Login 11 start **/
.login-11 {
	background: url(/_content/SkoolMAUI.Shared/css/assets/img-11.png) top left repeat;
	background-size: cover;
	min-height: 100vh;
	border: 65px solid #ffc4c4;
}

.login-11 .bg-color-11 {
	top: 0;
	bottom: 0;
	/* min-height: 100vh; */
	padding: 10% 5%;
	z-index: 999;
	opacity: 1;
	position: relative;
	justify-content: center;
	align-items: center;
	display: flex;
	background: #ed5050d6;
}

.login-11 .container {
	max-width: 1400px;
	margin: 0 auto;
}

.login-11 .form-section {
	max-width: 500px;
	margin-right: auto;
	width: 100%;
	background: #654a91fa;
	padding: 50px;
	border-radius: 0;
	box-shadow: 2px 2px 68px -21px #80808082;
	border-radius: 5px;
	border: 10px solid white;
}

.login-11 .form-box {
	width: 100%;
}


.login-11 .form-check-input:focus {
	box-shadow: none;
}

.login-11 .login-inner-form .form-group {
	margin-bottom: 0px;
	text-align: center;
}

.login-11 .login-inner-form .form-box {
	float: left;
	width: 100%;
	position: relative;
}

.login-11 .login-inner-form .form-control {
	font-size: 15px;
	outline: none;
	color: #535353;
	border-radius: 3px;
	border: 1px solid #dbdbdb;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .06);
}

.login-11 .login-inner-form img {
	margin-bottom: 5px;
	height: 40px;
}

.login-11 .login-inner-form .form-box .form-control {
	float: left;
	width: 100%;
	padding: 13px 15px 13px 65px;
	height: 55px;
}

.login-11 .login-inner-form .form-box i {
	position: absolute;
	left: 0;
	width: 55px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	background: #5d8dfa;
	border-radius: 3px 0 0 3px;
	font-size: 20px;
	color: #fff;
}

.login-11 .info {
	color: #fff;
	text-align: left;
	padding: 7% 0;
}

.lgnrlogo {
	padding: 8px 0;
	text-align: right;
}

.lgnrlogo img {
	width: 206px;
}

.login-11 .bg-img {
	top: 0;
	bottom: 0;
	z-index: 999;
	/* min-height: 100vh; */
	position: relative;
	/* border: 20px solid red; */
	/* text-align: center; */
	/* display: -webkit-box; */
	display: -moz-box;
	display: -ms-flexbox;
	/* display: -webkit-flex; */
	/* display: flex; */
	justify-content: center;
	align-items: center;
	padding: 30px;
	background-color: #feffce;
	background-size: cover;
	background-repeat: no-repeat;
}

.login-11 .bg-img:after {
	content: '';
	position: absolute;
	background: transparent;
	right: 0;
	bottom: 0;
	background-image: url(/_content/SkoolMAUI.Shared/css/assets/mainlogin2.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 361px;
	height: 321px;
}

.lgnrlogo2 img {
	width: 430px;
}

.login-11 .animate-charcter {
	background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
	background-size: auto auto;
	background-clip: border-box;
	background-size: 200% auto;
	color: #383838;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* animation: textclip 2s linear infinite; */
	display: inline-block;
	font-size: 25px;
	font-weight: 700;
	margin-bottom: 7px;
}

.login-11 .animate-charcter span {
	display: block;
	font-size: 48px;
	text-transform: uppercase;
}

@keyframes textclip {
	to {
		background-position: 200% center;
	}
}

.login-11 .login-inner-form .form-label {
	text-align: center;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 10px;
	color: white;
}

.loginimg {
	margin: 0 auto;
	text-align: center;
}

.loginimg img {
	width: 282px;
}

.initheader {
	background: white;
	padding: 8px 10px;
	border-bottom: 6px double red;
}

.initheader img {
	width: 174px;
}

.login-11 .info P {
	color: #323232;
	font-size: 20px;
	line-height: 25px;
	margin-bottom: 0;
}

.login-11 .login-inner-form .forgot {
	margin: 0;
	line-height: 40px;
	color: #fff;
	font-size: 14px;
	float: right;
}

.login-11 .btn-theme {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	-webkit-appearance: none;
	border: none;
	outline: none !important;
	color: #ffffff;
	text-transform: capitalize;
	transition: all 0.3s linear;
	z-index: 1;
	overflow: hidden;
	cursor: pointer;
	font-size: 17px;
	font-weight: 400;
	width: 100%;
	font-family: 'Jost', sans-serif;
	border-radius: 3px;
}

.login-46 .login-inner-form .btn-theme.focus,
.btn-theme:focus {
	box-shadow: none;
}

.login-11 .logo {
	text-align: center;
	margin-bottom: 15px;
}

.login-11 .logo img {
	height: 25px;
}


.login-11 .form-check-input:checked {
	background-color: #5d8dfa !important;
	border-color: #5d8dfa !important;
}


.login-11 .form-section .form-check-input {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	position: absolute;
	border: 1px solid #dbdbdb;
	border-radius: 0;
	background-color: #fff;
	margin-left: -22px;
}


.login-11 .form-section p {
	margin: 28px 0 0;
	font-size: 16px;
	color: #535353;
}

.login-11 .form-section p a {
	color: #535353;
}


/** MEDIA **/
@media (max-width: 1200px) {
	.login-11 .info {
		margin: 0;
	}

	.login-11 .waviy {
		font-size: 33px;
	}
}

@media (max-width: 992px) {
	.login-11 .bg-img {
		display: none;
	}

	.login-11 .login-inner-form .social-list li a {
		width: 100px;
		height: 35px;
		line-height: 35px;
		font-size: 14px;
	}

	.login-11 .bg-color-11 {
		padding: 30px 15px;
	}

	.login-11 .form-section {
		padding: 50px 30px;
		margin: 0 auto;
	}
}


.maininput {
	position: relative;
}

.login-11 .login-inner-form .form-group .maininput input {
	min-height: 40px;
	padding: 0px 0px 0px 45px !important;
	margin-bottom: 10px;
}

.login-11 .login-inner-form .form-group .maininput button {
	padding: 9px 26px !important;
	height: auto !important;
	font-size: 15px !important;
	text-transform: uppercase;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
}

.login-11 .login-inner-form .form-group .maininput button span {
	font-weight: 500 !important;
}

.login-11 .login-inner-form .form-group .maininput i {
	position: absolute;
	left: 0;
	background: #f9777f;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 37px;
	color: white;
	z-index: 9999;
	top: 0;
}

/** Login 11 end **/
.uplod_img_size {
	margin: 0 auto;
	margin-top: 13px;
}

.uploadphotonew {
	padding: 5% 0;
}

.uploadphotonew h2 {
	font-weight: 600;
	font-size: 25px;
	margin-bottom: 26px;
	text-transform: uppercase;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	padding: 10px 0;
}

.cropimage canvas {
	width: 157px !important;
	height: 185px !important;
	border: 1px solid grey;
	object-fit: contain;
}

.photouploadbox {
	text-align: center;
}

.photouploadbox input {
	text-align: center;
	border: 0;
	background: none !important;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 17px;
}

.uploadphotonew .photouploadbox img {
	height: 165px;
	width: 167px;
	object-fit: cover;
	border: 1px solid grey;
	margin-bottom: 15px;
}

.nuploadbox {
	position: relative;
}

.nuploadbox .newupload {
	background: #0d6efd;
	padding: 5px 5px;
	text-align: center;
	color: white;
	font-size: 14px;
}

.nuploadbox input {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 35px;
	opacity: 0;
}

.cropandupdate h1 {
	font-size: 19px;
	border-bottom: 1px solid grey;
	padding-bottom: 12px;
}

.classboxbtn {
	background: linear-gradient(45deg, #f9777f, #e9535d);
	text-align: center;
	min-height: 90px;
	border-radius: 5px;
	margin-bottom: 19px;
	vertical-align: middle;
	display: inline-block;
	width: 100%;
	padding: 31px 0;
}

.classboxbtn h3 {
	font-size: 15px;
	color: white;
	text-transform: uppercase;
	font-weight: 500;
}

.classtabs .rz-tabs-vertical {
	display: flex;
	flex-direction: row;
}

.classtabs .rz-tabs-vertical .rz-tabview-nav {
	flex-direction: column;
	width: 200px;
	float: left;
}

.classtabs .rz-tabs-vertical li {
	border-top-width: 1px;
	border-left-width: 2px;
	margin-right: -1px;
	margin-bottom: 0;
}

.classtabs .rz-tabs-vertical li a {
	text-align: left;
}

.classtabs .rz-tabs-vertical .rz-tabview-selected,
.classtabs .rz-tabs-vertical li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
	border: 1px solid #e9eaed;
	border-left: 2px solid #1151F3;
}

/** Login 12 start **/
.login-12 .login-inner-form .col-pad-0 {
	padding: 0;
}

.login-12 .bg-img {
	background: url(/_content/SkoolMAUI.Shared/css/assets/img-12.jpg) top left repeat;
	background-size: cover;
	top: 0;
	bottom: 0;
	min-height: 100vh;
	text-align: right;
	z-index: 999;
	opacity: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 50px 30px 40px;
}

.login-12 .bg-img:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(249 119 127);
}

.login-12 .bg-img:after {
	position: absolute;
	content: '';
	/* top: 0; */
	/* left: 0; */
	right: 0;
	bottom: 0;
	background-color: rgb(249 119 127);
	background-image: linear-gradient(to bottom right, #f9777f, #f9777f38), url(/_content/SkoolMAUI.Shared/css/assets/mainlogbg2.png);
	background-size: contain;
	width: 334px;
	height: 323px;
	background-repeat: no-repeat;
}

.login-12 .form-section {
	min-height: 100vh;
	position: relative;
	justify-content: center;
	align-items: center;
	padding: 30px;
}

.login-12 .login-inner-form {
	max-width: 500px;
	width: 100%;
}

.login-12 .logo {
	top: 40px;
	position: absolute;
	right: 0;
	background: #ffffff;
	padding: 9px 31px;
	/* border-radius: 5px; */
	left: 0;
	text-align: left;
	border-bottom: 9px double #f9777f;
	border-top: 9px double #f9777f;
}

.login-12 .logo img {
	width: 191px;
}

.login-12 .login-inner-form p {
	color: #535353;
	margin-bottom: 0;
	font-size: 16px;
}

.login-12 .login-inner-form p a {
	color: #535353;
	font-weight: 500;
	margin-left: 4px;
}

.schooldetaillogin {
	text-align: center;
	margin-bottom: 40px;
	padding-bottom: 6px !important;
	padding: 0;
	border-bottom: 1px dotted #dbdbdb;
}

.schooldetaillogin img {
	width: 101px;
	margin-bottom: 4px !important;
}


.schooldetaillogin_detail h3 {
	font-size: 20px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	margin-bottom: 0 !important;
}

.login-12 .login-inner-form img {
	margin-bottom: 15px;
}

.login-12 .login-inner-form h1 {
	font-size: 30px;
	color: #f9777f;
}

.login-12 .login-inner-form h3 {
	margin: 0 0 33px;
	font-size: 18px;
	font-weight: 400;
	color: #3c3c3c;
}

.login-12 label {
	color: #535353;
	font-size: 16px;
	margin-bottom: 5px;
	display: none;
}

.login-12 .login-inner-form .form-group {
	margin-bottom: 25px;
}

.login-12 .login-inner-form .form-control {
	width: 100%;
	padding: 8px 12px !important;
	font-size: 15px;
	/* border: 1px solid #d6d6d6; */
	background: #fff;
	outline: none;
	color: #535353;
	border-radius: 0 !important;
	height: 42px !important;
}

.login-12 .login-inner-form .input-text label {
	color: #535353;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}

.login-12 .login-inner-form .form-check {
	float: left;
	margin-bottom: 0;
}

.login-12 .login-inner-form .form-check a {
	color: #535353;
	float: right;
}

.login-12 .login-inner-form .checkbox {
	margin-bottom: 25px;
	font-size: 16px;
}

.login-12 .login-inner-form .form-check-input {
	position: absolute;
	margin-left: -24px;
}

.login-12 .login-inner-form .checkbox a {
	font-size: 16px;
	color: #535353;
	float: right;
}

.login-12 a {
	text-decoration: none;
}

.login-12 .form-section .form-check-label {
	padding-left: 5px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 500;
	color: #535353;
}

.login-12 .form-check-input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	vertical-align: top;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
	border: 1px solid #afabab;
}

.login-12 .login-inner-form .terms {
	margin-left: 4px;
}

.login-12 .form-check-input:focus {
	border-color: #ffc801 !important;
	outline: 0;
	box-shadow: none;
}

.login-12 .form-check-input:checked {
	background-color: #ffc801 !important;
}

.login-12 .login-inner-form button:focus {
	outline: none;
	outline: 0 auto -webkit-focus-ring-color;
}

.login-12 .btn-theme {
	position: relative;
	display: inline-block;
	width: 100%;
	color: #ffffff;
	overflow: hidden;
	overflow: hidden;
	text-transform: capitalize;
	display: inline-block;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	cursor: pointer;
	font-size: 17px;
	font-weight: 400;
	font-family: 'Jost', sans-serif;
	border-radius: 0;
	border: none;
}

.login-12 .btn-theme:hover {
	color: #fff;
}

.login-12 .btn-theme:hover::before {
	left: 0%;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.login-12 .btn-theme:before {
	position: absolute;
	content: '';
	left: 97%;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 1;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	transform: skewX(336deg);
}

.login-12 .btn-theme span {
	position: relative;
	z-index: 1;
}

.login-12 .informeson {
	color: #fff;
	max-width: 600px;
	margin: 0 auto 0 0;
	z-index: 20;
}

.login-12 .animated-text2 {
	text-align: left;
}

.login-12 .informeson h2 {
	margin: 0 0 11px 0;
	font-size: 22px;
	color: #ffffff;
	text-transform: capitalize;
	font-weight: 400;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 14px;
}

.login-12 .informeson h2 span {
	display: block;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 40px;
}

.login-12 .informeson h3 {
	color: white;
	font-size: 22px;
	font-weight: 600;
}


.login-12 .animated-text h2 {
	display: block;
	text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
	background: url(/_content/SkoolMAUI.Shared/css/assets/animated-text.png) repeat-y;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: aitf 80s linear infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
}

@-webkit-keyframes aitf {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

.login-12 .btn-section {
	margin-bottom: 30px;
}

.login-12 .informeson p {
	color: #fff;
	opacity: 0.9;
	line-height: 25px;
	font-size: 15px;
	margin-bottom: 40px;
}


.login-12 .btn-theme-2 {
	padding: 0 35px;
	display: inline-block;
	position: relative;
	z-index: 5;
	transition: .7s ease;
	background: transparent;
	line-height: 41px;
	font-size: 16px;
	font-weight: 400;
	font-family: 'Jost', sans-serif;
	border-radius: 0;
}

.login-12 .btn-theme-2:hover {
	color: #fff;
}

.btn-theme-2:before,
.btn-theme-2:after {
	color: #fff;
}

.login-12 .btn-theme-2:before,
.btn-theme-2:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	z-index: -1;
	transition: all .7s ease;
	border-radius: 0;
}

.login-12 .btn-theme-2:after,
.btn-theme-2:after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	z-index: -1;
	transition: all .7s ease;
	border-radius: 0;
}

.login-12 .btn-theme-2:hover:before,
.btn-theme-2:hover:after {
	width: 50%;
}

.login-12 .btn-theme-2 {
	border: 2px solid #ffc801;
	border-radius: 0;
	color: #ffc801;
}

.login-12 .btn-theme-2:before,
.btn-theme-2:after {
	background: #ffc801;
}

.login-12 .btn-theme-3 {
	color: #fff;
	text-align: center;
	border: 2px solid transparent;
	display: inline-block;
	padding: 0 35px;
	position: relative;
	z-index: 1;
	transition: all .7s ease;
	border-radius: 50px;
	line-height: 41px;
	font-size: 16px;
	font-weight: 400;
	font-family: 'Jost', sans-serif;
	border-radius: 0;
}

.login-12 .btn-theme-3:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all .7s ease;
	z-index: -1;
	border-radius: 50px 0 0 50px;
}

.login-12 .btn-theme-3:after {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all .7s ease;
	z-index: -1;
	border-radius: 0 50px 50px 0;
}

.login-12 .btn-theme-3:hover {
	background: transparent;
}

.login-12 .btn-theme-3:hover:before {
	width: 0;
	opacity: 1;
	visibility: visible;
}

.login-12 .btn-theme-3:hover:after {
	width: 0;
	opacity: 1;
	visibility: visible;
}

.login-12 .btn-theme-3 {
	background: #ffc801;
}

.login-12 .btn-theme-3:before {
	background: #ffc801;
}

.login-12 .btn-theme-3:after {
	background: #ffc801;
}

.login-12 .btn-theme-3:hover {
	color: #ffc801;
	border: 2px solid #ffc801;
}

.login-12 .btn-lg {
	padding: 0 50px;
	line-height: 55px;
}

.login-12 .btn {
	box-shadow: none !important;
}

.login-12 .btn-md {
	padding: 10px 45px !important;
}

.login-12 .btn-primary {
	background: #ffc801;
}

.login-12 .btn-primary:before {
	background: #eab802;
}

.login-4 .form-section ul {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

/** social box **/
.login-12 .social-box {
	bottom: 30px;
	position: absolute;
	right: 55px;
	left: 55px;
}

.login-12 .social-box ul {
	padding: 0;
	margin-bottom: 0;
}

.login-12 .social-list li {
	display: inline-block;
	margin-bottom: 5px;
}

.login-12 .social-list li a {
	font-size: 14px;
	font-weight: 500;
	width: 135px;
	margin: 2px 0 3px 0;
	height: 45px;
	line-height: 45px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	background: #fff;
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	font-family: 'Jost', sans-serif;
}

.login-12 .social-list li a i {
	height: 45px;
	width: 45px;
	line-height: 45px;
	float: left;
	color: #fff;
	font-size: 14px;
}

.login-12 .social-list li a span {
	margin-right: 10px;
}

.login-12 .social-list .facebook-color {
	color: #4867aa;
}

.login-12 .social-list .facebook-i {
	background: #4867aa;
}

.login-12 .twitter-color {
	color: #33CCFF;
}

.login-12 .twitter-i {
	background: #33CCFF;
}

.login-12 .google-color {
	color: #db4437;
}

.login-12 .google-i {
	background: #db4437;
}

/** MEDIA **/
@media (max-width: 992px) {
	.login-12 .logo-2 {
		display: inherit;
	}

	.login-12 .bg-img {
		display: none;
	}

	.login-12 .form-section {
		padding: 30px 15px;
	}
}


@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(359deg);
	}
}

.classtabs.rz-tabs-vertical {
	display: flex;
	flex-direction: row;
}

.classtabs.rz-tabs-vertical .rz-tabview-nav {
	flex-direction: column;
}

.classtabs.rz-tabs-vertical li {
	border-top-width: 1px;
	border-left-width: 2px;
	margin-right: -1px;
	margin-bottom: 4px;
}

.classtabs.rz-tabs-vertical .rz-tabview-selected,
.classtabs.rz-tabs-vertical li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
	border: 1px solid #e9eaed;
	border-left: 2px solid #1151F3;
}

/** Login 12 end **/
.classtabs h4 {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 19px;
}

.classbox {
	background: aquamarine;
	padding: 20px 24px;
	border-radius: 5px;
	margin: 0 auto 22px;
	cursor: pointer;
	min-height: 80px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
}

.classbox img {
	width: 42px!important;
	height: auto !important;
	float: left;
	margin-right: 10px;
}

.classbox h2 {
	color: white;
	font-size: 18px;
	margin: 0;
}

.classbox h2 span {
	display: block;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.classbox h6 {
	font-size: 21px;
	font-weight: 500;
}

.classtabs li {
	border-top-right-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
}

.classtabs li a {
	font-size: 13px;
	text-align: left;
	font-weight: 700;
	padding: 10px 21px !important;
	text-transform: uppercase;
}

.classtabs .rz-tabview-selected a {
	color: #fff !important;
	background: #d94c81 !important;
	border-top-right-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
}

.classbox.color1 {
	background: #763fce;
}

.classbox.color2 {
	background: #d94c81;
}

.classbox.color3 {
	background: #cea53c;
}

.classbox.color4 {
	background: #33a833;
}

.classbox.color5 {
	background: #15b49e;
}

.classbox.color6 {
	background: #d08367;
}

.classbox.color7 {
	background: #29b2c4;
}

.classbox.color8 {
	background: #964ece;
}

.classbox.color8 {
	background: #7aab1a;
}

.classtabs ul {
	display: block;
	min-width: 180px;
	margin-right: 25px;
}

.classtabs {
	display: inline-flex !important;
	flex-direction: revert !important;
}

.studentbox {
	border: 1px solid #dddddd;
	padding: 8px;
	border-radius: 8px;
	position: relative;
	margin-bottom: 20px;
	height: 130px;
	display: flex;
	border-top: 2px solid #f9777f;
	overflow: hidden;
}

.studentbox .admno {
	position: absolute;
	top: -2px;
	background: #363636;
	color: white;
	padding: 0 8px;
	font-size: 11px;
	font-weight: 600;
	z-index: 9;
	left: 0;
	border-top-left-radius: 5px;
}

.nwstudnbx .admno {
	position: absolute;
	right: 0;
	top: -2px;
	background: #383838;
	color: white;
	border-top-right-radius: 7px;
	padding: 2px 7px;
	font-size: 12px;
}

.studentbox .stuimage {
	padding: 10px 0;
}

.studentbox .stuimage img {
	height: 90px;
	width: 68px;
	border-radius: 6%;
	border: 5px solid #c5c5c5;
	/* float: left; */
	margin-right: 7px;
	object-fit: cover;
	/* filter: opacity(0.7);*/
}

.studentbox .stumiddle {
	padding: 5px 0;
	width: 255px;
}

.studentbox .stumiddle h3 {
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 700;
}

.studentbox .stumiddle ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.studentbox .stumiddle ul li {
	font-size: 12px;
	color: #686868;
	line-height: 16px;
	text-transform: lowercase;
}

.studentbox .stumiddle ul li span {
	text-transform: initial;
	font-weight: 500;
	color: #1c1c1c;
}

.studentbox .stubtns {
	position: absolute;
	right: 0;
	top: -3px;
	width: 105px;
}

.studentbox .stubtns button {
	width: 100%;
	margin-bottom: 4px;
}

.nwstudnbx {
	border: 1px solid #dddddd;
	padding: 5px 8px;
	border-radius: 8px;
	position: relative;
	margin-bottom: 20px;
	min-height: 132px;
	display: flex;
	border-top: 2px solid #f9777f;
}

.nwstudnbx img {
	width: 85px;
	height: 85px;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid #dbdbdb;
}

.nwstudnbx .studetail {
	margin-left: 10px;
}

.nwstudnbx .studetail h3 {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 6px;
}

.nwstudnbx .studetail ul {
	margin: 0;
	padding: 0;
	line-height: 15px;
}

.nwstudnbx .studetail ul li {
	font-size: 13px;
	color: grey;
}

.nwstudnbx .stufooter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	text-align: center;
	border-top: 1px solid #d9d9d9;
	padding-top: 4px;
}

.studentbox2 {
	border: 1px solid #dddddd;
	padding: 8px;
	border-radius: 8px;
	position: relative;
	margin-bottom: 20px;
	border-top: 2px solid #f9777f;
	overflow: hidden;
}
.studentbox2 .stumiddle {
	padding: 5px 0;
	width: 100%;
}
.studentbox2 .stubtns {
	margin-top: 6px;
}
.studentbox2 .stubtns button {
	margin-bottom: 4px;
	padding: 0 5px !important;
}
.studentbox2 .stumiddle h3 {
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 700;
}
.studentbox2 .stumiddle ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.studentbox2 .stumiddle ul li {
	font-size: 12px;
	color: #686868;
	line-height: 16px;
	text-transform: lowercase;
}
.studentbox2 .stumiddle ul li span {
	text-transform: initial;
	font-weight: 500;
	color: #1c1c1c;
}
.classboxnew {
	overflow: hidden;
    background: white;
    padding: 7px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.classboxnew .classheader {
	position: relative;
	min-height: 60px;
}
.classboxnew .classheader .classteacher {
	float: left;
	margin-right: 8px;
	margin-top: 0px;
}
.classboxnew .classheader .classteacher img {
	height: 61px;
	width: 61px;
	object-fit: cover;
	border-radius: 5px;
	border: 3px solid #d5d5d5;
}
.classboxnew .classheader .classdetail {
	margin: 0px 0;
}

.classboxnew .classheader .classdetail h5 {
	font-size: 11px;
    font-weight: 700;
    border: 1px solid #bf3131;
    margin-bottom: 4px;
    padding: 4px 6px;
    display: inline-block;
    color: #ee4444;
    border-radius: 5px;
}

.classboxnew .classheader .classdetail h4 {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 500;
}

.classboxnew .classheader .classstudents {
	background: #e1edff;
	border: 3px solid #65b6dd;
	text-align: center;
	/* padding: 2px 4px; */
	border-radius: 5px;
	position: absolute;
	right: 0;
	height: 61px;
	width: 61px;
	padding: 5px 0px;
	top: 0;
}

.classboxnew .classheader .classstudents h3 {
	font-size: 23px;
	font-weight: 600;
}

.classboxnew .classheader .classstudents h3 span {
	display: block;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
}

.classboxnew .classfooter {
	border-top: 1px solid #d9d9d9;
	padding-top: 6px;
	margin-top: 9px;
}
.classboxnew .classfooter .stubtns {
	display: flex;
    gap: 5px;
}
.btn-purple {
	background: #d70dd1;
}

.classboxnew .classfooter button {
	margin: 2px 0px !important;
	border-radius: 3px !important;
	display: inline-block;
}

.regtable .rz-column-title {
	padding: 2px 8px !important;
}

.classfooter .stubtns .btn-darkgrey {
	background: #c57e36 !important;
}

.classfooter .stubtns .btn-darkgrey:hover {
	color: white !important;
}

.classfooter .stubtns .btn-info {
	background: #17a2b8 !important;
}

.classfooter .stubtns .btn-success {
	background: #40bd5d !important;
}

.classfooter .stubtns .btn-danger {
	background: #d94949 !important;
}


/*general fee payment*/
.finalbtns {
	text-align: right;
	vertical-align: middle;
}

.feefooterfoo {
	padding: 12px 22px 12px;
	border-top: 1px solid #644802;
}

.feefooterfoo label {
	margin: 2px 0px;
    padding: 2px 2px;
}

.feefooter {
	background: #f3f5c8;
	border: 1px solid #644802;
}

.feefooter .feefooterleft {
	padding: 11% 0px 0px 9px;
}

.feefooter .feefooterleft .media {
	border: 1px solid #644802;
	border-radius: 6px;
	position: relative;
	background: #f1d692;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
}

.feefooter .feefooterleft .media .stuadmno {
	position: absolute;
	right: 15px;
	background: #dc3545;
	color: white;
	font-weight: 600;
	padding: 6px 13px;
	font-size: 17px;
	text-transform: uppercase;
	border-radius: 14px;
	top: -25px;
}

.topfilters {
	margin-bottom: 15px;
}

.topfilters label {
	margin: 4px 0;
}

.finalbtns button {
	border-radius: 2px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	margin-right: 1px;
    margin-left: 6px;
}

.finalbtns button:hover {
	opacity: .9;
}

.finalbtns .btn-success {
	background: #88a905 !important;
	border-color: #88a905 !important;
}

.finalbtns .btn-primary {
	background: #3a7286 !important;
	border-color: #3a7286 !important;
}

.finalbtns .btn-danger {
	background: #dc3545 !important;
	border-color: #dc3545 !important;
}

.rz-datatable-thead th>div:not(.rz-cell-filter),
.rz-grid-table thead th>div:not(.rz-cell-filter) {
	padding: inherit !important;
}

.feetablenew th {
	background: black !important;
	color: white;
	font-weight: 500;
	font-size: 14px;
}

.feetablenew td {
	padding: 3px 9px !important;
	font-size: 12px;
	background: transparent;
	border-right: 0 !important;
	border-bottom: 1px solid #0000004d !important;
}

.feetablenew td span {
	color: #242424 !important;
	font-weight: 500;
}

.feefooter .feefooterleft .media img {
	height: 97px;
	width: 77px;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid #644802;
}

.feefooter .feefooterleft .media .media-body {
	padding: 19px 8px;
}

.feetablenew .btn-success {
	background: #60bf2d !important;
	font-size: 11px !important;
	border-color: #60bf2d !important;
}

.feetablenew .btn-success span {
	color: white !important;
}


.feefooter .feefooterleft .media .media-body h3 {
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 3px;
}

.feefooter .feefooterleft .media .media-body h3 span {
	display: block;
	font-weight: 500;
	font-size: 15px;
}

.feefooter .feefooterleft .media .media-body h4 {
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}

.sibligbtnfix {
	position: absolute;
	right: 11px;
	top: -18px;
}

.pichange_stu_pulic button {
	width: 100%;
    border: 0;
    background-color: #33a133 !important;
    color: white !important;
    padding: 5px 0;
    min-height: auto;
}

.feefooter .feefooterleft .media .media-body h4 span {
	position: absolute;
	top: -16px;
	right: 28px;
	background: white;
	padding: 2px 6px;
	border-radius: 8px;
}
.headingfeeheaddet{
	    color: red;
    font-weight: 500;
    font-size: 13px;
    border-top: 1px solid #e3e3e3;
    padding-top: 5px;
    margin-top: 10px;
    text-align: center;
}
.headingfeehead{
	    color: white;
    background: #493db5;
    display: inline-block;
    text-align: center;
    padding: 3px 0;
}
.stufeildbox {
	    background: #e5e2ff;
    padding: 4px;
    margin-bottom: 6px;
}
.stufeildbox label {
	color: black !important;
    text-transform: capitalize;
}
.stufeildbox table{
	    margin: 0;
    padding: 0;
}
.stufeildbox tr td{
	    font-weight: 500;
    font-size: 13px;
    text-align: right;
}
.stufeildbox tr td span{
	padding: 0;
    line-height: normal;
    height: auto;
    background: white;
    margin-left: 3px;
}
.middlebtn button {
	color: white;
	background: #8c5b05;
	padding: 5px 3px;
	font-size: 13px;
	font-weight: 500;
	display: inline-block;
	border-radius: 2px;
	border: 0;
	width: 100%;
	margin-bottom: 5px;
}

.middlebtn {
	padding: 3px 0;
	text-align: center;
	display: inline-block;
	vertical-align: baseline;
}

.middlebtn button:hover {
	opacity: .8;
}

.feetablenew .rz-paginator-page.rz-state-active {
	background-color: #3a7286 !important;
	color: white;
}

.feetablenew .rz-paginator-page.rz-paginator-element {
	background: transparent;
	border: 1px solid grey;
	font-weight: 500;
	padding: 4px 0;
}

.rz-paginator-next,
.rz-paginator-last,
.rz-paginator-first,
.rz-paginator-prev {
	background-color: #3a7286 !important;
	color: white;
	border-radius: 0px;
}

.stufeildbox .rz-dropdown-label {
	text-align: left !important;
}

.feefooteright .feefooheader .headingfeehead {
	position: relative;
}

.feefooteright .feefooheader .headingfeehead:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 36px solid #8c5b05;
	border-right: 39px solid transparent;
	top: 0;
	right: -39px;
}

.stufeildbox .form-group {
	margin-bottom: 9px;
}

.feetablenew input {
	font-size: 12px;
	height: 26px !important;
}
.stufeildbox h5 {
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	border: 1px dotted #ed3838;
	height: 49px;
	width: 100%;
	padding: 5px 0;
	margin: 6px 0;
	background: #ffdde0;
}

.stufeildbox h5 span {
	display: block;
	font-size: 17px;
}

.feefooteright {
	border-left: 1px solid #644802;
}

.feefooteright .feefooheader {
	background: #d4b669;
}

.topfilters .rz-dropdown,
.feefooterfoo .rz-dropdown,
.stufeildbox .rz-dropdown {
	padding: 3px 6px !important;
	height: auto !important;
	line-height: normal;
	font-size: 14px;
}

.topfilters input,
.feefooterfoo input,
.stufeildbox input {
	font-size: 12px !important;
}

.topfilters input,
.feefooterfoo input,
.stufeildbox input {
	border-radius: 0;
	height: 27px !important;
	padding: 3px 10px !important;
	font-size: 13px;
	font-weight: 500;
	line-height: normal !important;
}

.topfilters select,
.feefooterfoo select,
.stufeildbox select {
	border-radius: 0;
	height: 31px;
	padding: 3px 10px;
	font-size: 13px;
	font-weight: 500;
}

.feefooteright .feefooheader .headingfeehead {
	background: #8c5b05;
	color: white;
	padding: 7px 10px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.08em;
	font-size: 15px;
	margin-left: -2px;
}

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    z-index: 9999;
}

.loading-spinner {
    text-align: center;
}

.loading-spinner p {
    margin-top: 20px;
    font-size: 16px;
    color: #666;
    font-weight: 500;
}
.feefooteright .headingfeeheaddet {
	padding: 7px 18px;
	text-align: right;
	font-weight: 500;
}
.fee_r {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 6px;
}
.fee_r label{
	min-width: 150px;
	text-align: right;
	margin-right: 15px;
}
	.fee_r label {
		min-width: 150px;
		text-align: right;
		margin-right: 15px;
	}
.amontfinal label {
	font-weight: 600 !important;
	/* text-transform: uppercase; */
	font-size: 13px !important;
}
.amontfinal span {
	height: auto;
}
/* student list*/
.studentlistbox {
	background: white;
	padding: 10px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	position: relative;
	margin-bottom: 15px;
	border-radius: 15px;
}

.studentlistbox .stulistheader {
	padding-top: 20px;
}

.studentlistbox .stulistheader img {
	height: 90px;
	width: 90px;
	object-fit: cover;
	border-radius: 50%;
	border: 5px solid #fa6476;
	margin-bottom: 0px;
}

.studentlistbox .stulistheader h3 {
	font-weight: 700;
	font-size: 16px;
	margin: 3px 0;
}

.studentlistbox .stulistheader .pichange {
	position: absolute;
	right: 69px;
	top: 32%;
}

.studentlistbox .stulistheader .pichange button {
	background: #fa6476 !important;
	color: white;
	height: 25px !important;
	width: 25px;
	display: inline-block;
	border-radius: 50% !important;
	text-align: center;
	padding: 2px 0 !important;
	font-weight: 600 !important;
	border: 2px solid white;
	position: absolute;
	left: -17px;
	top: 12px;
	font-size: 8px;
}

.studentlistbox .stulistheader {
	position: relative;
}

.stafflistbox .stafflistheader .staffrightdetail {
	position: relative;
}

.stafflistheader .pichange {
	position: relative;
}

.stafflistheader .pichange button {
	background: #fa6476 !important;
	color: white;
	height: 24px !important;
	width: 24px;
	display: inline-block;
	border-radius: 50% !important;
	text-align: center;
	padding: 2px 0 !important;
	font-weight: 600 !important;
	border: 2px solid white;
	position: absolute;
	left: 58px;
	top: 60px;
	font-size: 9px;
}

.studentlistbox .stulistheader ul {
	margin: 0px 0;
	display: inline-flex;
}

.studentlistbox .stulistheader ul li {
	font-weight: 500;
	color: grey;
	font-size: 12px;
	margin: 3px 9px;
}

.studentlistbox .stulistheader .stuportalbtn .userpassshowbtn {
	background: white !important;
	padding: 0px !important;
	color: #262626 !important;
	font-size: 17px !important;
	margin-top: 0px;
}

	.studentlistbox .stulistheader .stuportalbtn .userportalbtn {
		background: #d78013 !important;
		color: white !important;
		border-radius: 50px !important;
		font-size: 13px !important;
		padding: 5px 14px !important;
		height: auto !important;
		line-height: 17px !important;
		transition: .4s;
	}
.studentlistbox .stulistmiddle {
	border-bottom: 1px solid #d1d1d1;
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-bottom: 10px;
}

.stutop {
	display: flex;
	position: absolute;
	left: 6px;
	right: 6px;
	top: 4px;
	border-radius: 15px;
	justify-content: space-between;
}

	.stutop .stutopadmn {
		background: #28a745;
		color: white;
		font-weight: 500;
		padding: 1px 0;
		padding: 1px 34px;
		font-size: 13px;
		border-radius: 15px;
	}
/*
.stutop .stutopadmn:after {
	content: '';
	width: 0;
	height: 0;
	border-bottom: 22px solid #28a745;
	border-right: 25px solid transparent;
	top: 0;
	position: absolute;
	right: -25px;
	z-index: 1;
}
*/
.staffrightdetail .userpassshowbtn {
	color: black !important;
	background: none !important;
	font-size: 15px !important;
	position: relative;
	z-index: 2;
	float: right;
}

.stutop .stutopclass {
	background: #bf32b4;
	color: white;
	font-weight: 500;
	position: relative;
	padding: 1px 35px;
	font-size: 13px;
	border-radius: 15px;
}


.width-fix {
	display: inline-block;
	margin-left: 0px;
	margin-right: 2px;
}

.studentlistbox .stulistmiddle ul {
	margin: 0;
	padding: 0;
	text-align: left;
}

.studentlistbox .stulistmiddle ul li {
	font-size: 12px;
	color: #222222;
	line-height: 18px;
	font-weight: 500;
}

.studentlistbox .stulistmiddle ul li strong {
	color: #323232;
	width: 49px;
	display: inline-block;
}


.studentlistbox .stulistfooter button {
	padding: 4px 8px !important;
}

.studentlistbox .stulistfooter .btn-primary {
	background: #17a2b8 !important;
	border-color: #17a2b8;
}

.studentlistbox .stulistfooter .btn-success {
	background-color: #28a745 !important;
	border-color: #28a745;
}


/*staff list*/
.stafflistbox {
	background: white;
    padding: 7px;
    text-align: center;
    box-shadow: 0px 14px 23px -14px grey;
    position: relative;
    margin-bottom: 16px;
    border-radius: 10px;
}

.stafflistbox .stafflistheader {
	min-height: 74px
}

	.stafflistbox .stafflistheader img {
		height: 100px;
		width: 82px;
		border-radius: 15px;
		border: 2px solid #dcdcdc;
		object-fit: cover;
		float: left;
		margin-right: 1px;
	}

.stafflistbox .stafflistheader .staffrightdetail {
	text-align: left;
	margin-left: 90px;
	min-height: 90px;
}

.stafflistbox .stafflistheader .staffrightdetail h2 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 5px;
	min-height: 37px;
}

.stafflistbox .stafflistheader .staffrightdetail h2 span {
	font-weight: 500;
	color: #2d2d2d;
	font-size: 15px;
	display: block;
	margin-top: 3px;
}

.student-dashboard {
	font-family: 'Roboto', sans-serif;
}

.student-dashboard .card {
	border: none;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
}

	.student-dashboard .card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}

	.student-dashboard .card-header {
		padding: 5px 5px;
		font-weight: 600;
		border-bottom: none;
	}
		.student-dashboard .card-header h6 {
			font-size: 17px;
			color: white;
		}
	.student-dashboard .student-img {
		width: 100px;
		height: 100px;
		object-fit: cover;
		border: 3px solid #e0e0e0;
	}
	.student-dashboard .card-body {
		padding: 10px;
	}
	.student-dashboard h5 {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 10px;
	}
		.student-dashboard .parent-img, .student-dashboard .guardian-img {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border: 3px solid #e0e0e0;
		}

	.student-dashboard .detail-row {
		display: flex;
		margin-bottom: 4px;
		padding-bottom: 4px;
		border-bottom: 1px solid #f0f0f0;
	}

		.student-dashboard .detail-row:last-child {
			border-bottom: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}

	.student-dashboard .detail-label {
		font-weight: 500;
		color: #616161;
		min-width: 120px;
		display: inline-block;
	}

	.student-dashboard .detail-value {
		color: #212121;
		flex-grow: 1;
	}

	.student-dashboard .meta-item {
		display: inline-block;
		margin-right: 15px;
		margin-bottom: 5px;
	}

	.student-dashboard .meta-label {
		font-weight: 500;
		color: #616161;
	}

	.student-dashboard .meta-value {
		color: #212121;
		margin-left: 5px;
	}

	.student-dashboard .table {
		margin-top: 15px;
	}

		.student-dashboard .table th {
			border-top: none;
			color: #616161;
			font-weight: 500;
		}

	.student-dashboard .table-hover tbody tr:hover {
		background-color: rgba(0,0,0,0.02);
	}
.blank_page_center{
	height: 100%;
    display: flex;
    align-items: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
	.qr_gen_btn {
		padding: 0 24px;
	}
	.student_das_notice{
		margin-top: 10px!important;
	}
	.space1 {display: none;}
	.staffbtns {
		margin-top: 10px!important;
	}
	.student-dashboard .student-img {
		width: 80px;
		height: 80px;
	}

	.student-dashboard .parent-img, .student-dashboard .guardian-img {
		width: 60px;
		height: 60px;
	}

	.student-dashboard .detail-label {
		min-width: 100px;
	}
}





.btn-template {
	padding: 0 8px !important;
	min-height: 21px !important;
	background: #b46707 !important;
	margin-left: 0px;
}

.stuname ul {
	margin: 0;
	padding: 0;
	margin-top: 5px;
	list-style: none;
	border-top: 1px solid grey;
	padding-top: 3px;
}

.stuname ul li {
	color: black;
	font-weight: 500;
	font-size: 12px;
	line-height: 15px;
}

.stafflistbox .empid {
	color: #ff3434;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	top: 0px;
	right: 0px;
}


.stafflistbox .stafflistmiddle ul {
	margin: 0;
	padding: 0;
	text-align: left;
	list-style: none;
}

.stafflistbox .stafflistmiddle ul li {
	font-weight: 400;
	font-size: 13px;
	padding: 1px 0;
	position: relative;
	color: #000000c9;
}

.stafflistbox .stafflistmiddle ul li img {
	width: 20px;
	height: auto;
	border: none;
	margin-top: 2px;
}

.stafflistbox .stafflistfooter {
	padding: 5px 0 0;
	border-top: 1px solid #80808091;
}

.stafflistbox .stafflistfooter button {
	padding: 3px 9px !important;
	border-radius: 50px !important;
}

.stafflistbox .stafflistfooter .btn-primary {
	background: #17a2b8 !important;
}

.stafflistbox .stafflistfooter .btn-success {
	background: #28a745 !important;
}

/*student view*/
.wardimageview {
	text-align: center;
}


.wardimageview img {
	height: 99px;
	width: 99px;
	border-radius: 50%;
	border: 5px solid #f6d9ad;
	margin-bottom: 0px;
}

.wardimageview h3 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 4px;
	margin-bottom: 8px;
}

.wardimageview h3 span {
	display: block;
	color: grey;
	font-size: 15px;
}

.parentphoto img {
	height: 123px;
	width: 100%;
	border-radius: 5px;
	border: 5px solid #f6d9ad;
	object-fit: cover;
}

.wardimageview ul {
	margin: 0;
	padding-top: 7px;
	list-style: none;
	border-top: 1px solid #8080802e;
	display: inline-flex;
	padding: 9px 0 0 0;
	width: 100%;
}

.wardimageview ul li {
	text-align: left;
	position: relative;
	padding-left: 19px;
}

.wardimageview ul li:before {
	content: '';
	position: absolute;
	background: #c17806;
	height: 15px;
	width: 15px;
	left: 0;
}

.wardimageview li span {
	display: block;
	font-weight: 600;
	font-size: 17px;
}

.wardeetailview table {
	margin-bottom: 0;
	margin-top: 26px;
}

.wardeetailview table th {
	background: none;
	padding: 2px 0;
	font-size: 12.4px;
	border: 0;
}

.wardeetailview table td span {
	display: inline-block;
	width: 30px;
	padding: 0 0;
	border-bottom: 0 !important;
}

.wardeetailview table td {
	background: none;
	padding: 2px 0;
	/* color: #4a4949; */
	border: 0;
	font-size: 12.4px;
	font-weight: 500;
}

.parentdetailview img {
	height: 147px;
	width: 100%;
	border-radius: 5px;
	border: 5px solid #f6d9ad;
	object-fit: cover;
}

.parentdetailview h3 {
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 2px;
	border-bottom: 1px solid #80808042;
	padding-bottom: 5px;
}

.parentdetailview table {
	margin-bottom: 0;
}

.parentdetailview th {
	background: none;
	padding: 2px 0;
	font-size: 12.4px;
	border: 0;
}

.parentdetailview td {
	background: none;
	padding: 2px 0;
	/* color: #4a4949; */
	border: 0;
	font-size: 12.4px;
	font-weight: 500;
}

.parentdetailview td span {
	display: inline-block;
	width: 30px;
	padding: 0 0;
	border-bottom: 0 !important;
}

.mainheadstuview {
	background: #c17806;
	color: white;
	padding: 3px 8px;
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	position: relative;
	display: inline-block;
	width: 150px;
	position: absolute;
	top: 0;
	left: 0;
}

.mainheadstuview:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 28px solid #c17806;
	border-right: 24px solid transparent;
	top: 0;
	right: -24px;
}

.col-md-6.col-fix-5 {
	flex: 0 0 auto;
	width: 20%;
}

.nstuview .card {
	border-top: 2px solid #c17806;
}

.nstuview input,
.nstuview .rz-dropdown {
	background: whitesmoke;
	border: 0 !important;
	height: 32px !important;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 8px;
}

.paddingfixstu {
	padding-top: 23px;
}

.wardpic {
	text-align: center;
	position: relative;
}

.parentphoto {
	position: relative;
}

.parentphoto button {
	border-radius: 50% !important;
	background: #c17806 !important;
	border: 5px solid white;
	height: 35px !important;
	width: 35px;
	position: absolute;
	bottom: -11px;
	right: -11px;
	text-align: center;
	padding: 0 !important;
}

.wardpic button {
	border-radius: 50% !important;
	background: #c17806 !important;
	border: 5px solid white;
	height: 35px !important;
	width: 35px;
	position: absolute;
	top: 52px;
	right: 60px;
	text-align: center;
	padding: 0 !important;
}

.wardpic img {
	height: 83px;
	width: 83px;
	border-radius: 50%;
	margin-bottom: 9px;
	border: 5px solid #f6d9ad;
}

.wardpic h3 {
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.wardpic .wardadmno {
	background: #d13737;
	display: inline-block;
	padding: 3px 12px;
	color: white;
	font-weight: 600;
	font-size: 15px;
	border-radius: 50px;
}

.fixfeetabkle {
	height: 192px;
	overflow-y: scroll;
}

/* width */
.fixfeetabkle::-webkit-scrollbar,
.stunotifixheight::-webkit-scrollbar,
.fixfeetabkle__transport::-webkit-scrollbar,
.stu_tm_table::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.fixfeetabkle::-webkit-scrollbar-track,
.stunotifixheight::-webkit-scrollbar-track,
.fixfeetabkle__transport::-webkit-scrollbar-track,
.stu_tm_table::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
.fixfeetabkle::-webkit-scrollbar-thumb,
.stunotifixheight::-webkit-scrollbar-thumb,
.fixfeetabkle__transport::-webkit-scrollbar-thumb,
.stu_tm_table::-webkit-scrollbar-thumb {
	background: #542701;
	border-radius: 10px;
}

/* Handle on hover */
.fixfeetabkle::-webkit-scrollbar-thumb:hover,
.stunotifixheight::-webkit-scrollbar-thumb:hover,
.fixfeetabkle__transport::-webkit-scrollbar-thumb:hover,
.stu_tm_table::-webkit-scrollbar-thumb:hover {
	background: #b30000;
}

.fixfeetabkle th {
	background: #d950c8;
	color: white !important;
	padding: 3px 9px;
	text-align: left !important;
	font-weight: 400;
}

.fixfeetabkle td {
	font-weight: 700;
	font-size: 11px;
	padding: 2px 8px;
}

.fixfeetabkle button {
	padding: 2px 10px !important;
	min-height: 22px !important;
	border-radius: 19px !important;
}

.attanbtns {
	    position: absolute;
    right: 10px;
    top: 5px;
}

.attanbtns button {
	padding: 0 14px !important;
	min-height: 26px;
}
.stufeend td{
	padding: 2px 10px !important;
}
.feedetlbtn {
	position: absolute;
	right: 0px;
	top: -4px;
	line-height: 15px !important;
	background: #084298;
	border-color: #084298;
	text-transform: uppercase;
	font-size: 11px !important;
	padding: 3px 8px !important;
	font-weight: 500;
}

#uploadphotostaff {
	padding: 3% 12%;
	height: 100vh;
	position: relative;
}

#uploadphotostaff:after {
	content: '';
	background-image: url(/_content/SkoolMAUI.Shared/css/assets/staffupload-bg.PNG);
	left: 0;
	right: 0;
	height: 730px;
	position: absolute;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
	background-color: #e6ecfc;
}

#uploadphotos {
	padding: 3% 12%;
	height: 100vh;
	position: relative;
}

#uploadphotos:after {
	content: '';
	background-image: url(/_content/SkoolMAUI.Shared/css/assets/photobg-1.PNG);
	left: 0;
	right: 0;
	height: 730px;
	position: absolute;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
	background-color: #e6ecfc;
}

.innerpadding {
	padding: 60px 13%;
	background-color: #e6ecfc;
	border-radius: 10px;
}

.mainsection {
	background: white;
	padding: 6% 11%;
	border-radius: 10px;
	box-shadow: 5px 4px 12px #dbdbdb;
	position: relative;
	border-top: 2px solid #17a2b8;
}

.photoboxupper {
	width: 168px;
	margin-top: 14px;
}

.mainsection .phoobox {
	border: 1px solid lightgrey;
	height: 215px;
	width: 168px;
	border-radius: 10px;
	text-align: center;
	padding: 0px 0px;
	margin: 0 auto;
	border-radius: 5px;
	overflow: hidden;
	/* justify-content: center; */
	/* display: flex; */
	align-items: center;
	line-height: 64px;
}

.mainsectionstaff .phoobox {
	border: 1px solid lightgrey;
	height: 215px;
	width: 168px;
	border-radius: 10px;
	text-align: center;
	padding: 0px 0px;
	margin: 0 auto 15px;
	border-radius: 5px;
	overflow: hidden;
	/* justify-content: center; */
	/* display: flex; */
	align-items: center;
	line-height: 64px;
}

.mainsection .phoobox .uploadicon,
.mainsectionstaff .phoobox .uploadicon {
	width: 46px;
	height: auto;
}

.mainsection .phoobox h2,
.mainsectionstaff .phoobox h2 {
	font-size: 18px;
	font-weight: 400;
	margin-top: 5px;
}

.phoobox img {
	width: 100%;
	height: 217px;
	object-fit: cover;
}

.mainsection .phoobox h2 span,
.mainsectionstaff .phoobox h2 span {
	display: block;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 15px;
	font-size: 18px;
}

.photouploadbtn input {
	background: #c17806;
	color: white;
	padding: 8px 20px;
	display: block;
	text-align: center;
	border-radius: 50px;
	font-size: 16px;
	text-transform: uppercase;
	border: 0;
}

.photouploadbtn {
	margin-top: 19px;
}

.photouploadname {
	background: #17a2b8;
	width: 305px;
	border-radius: 10px;
	padding: 9px 14px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.photouploadname h3 {
	color: white;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 21px;
	text-align: center;
}

.photouploadname h3 span {
	font-size: 15px;
	font-weight: 500;
	display: block;
}

.photouploadbtnstaff input {
	background: #17a2b8 !important;
	color: white;
	padding: 8px 20px;
	display: block;
	text-align: center;
	border-radius: 50px;
	font-size: 16px;
	text-transform: uppercase;
	border: 0;
}

.mainsectionstaff {
	background: white;
	padding: 6% 11%;
	border-radius: 10px;
	box-shadow: 5px 4px 12px #dbdbdb;
	position: relative;
	border-top: 2px solid #fa6476;
}

.photouploadnamestaff {
	background: #fa6476;
	width: 305px;
	border-radius: 10px;
	padding: 9px 14px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.photouploadnamestaff h3 {
	color: white;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 21px;
	text-align: center;
}

.photouploadnamestaff h3 span {
	font-size: 15px;
	font-weight: 500;
	display: block;
}


.mainheadingupload h3 {
	font-size: 25px;
	font-weight: 400;
}

.mainheadingupload h3 span {
	color: #0a8599;
}

.mainheadinguploadstaff h3 {
	font-size: 25px;
	font-weight: 400;
}

.mainheadinguploadstaff h3 span {
	color: #fa6476;
}

/* view student design*/


.stubasic {
	background: white;
	margin-bottom: 20px;
	padding-top: 10px;
	border-top: 1px solid #bf32b4;
	position: relative;
}

.stucontctinfo,
.stuparnmtinfo {
	position: relative;
}

.stubasic:after,
.stucontctinfo:after,
.stuparnmtinfo:after {
	content: '';
	background: url(/_content/SkoolMAUI.Shared/css/assets/box-bg.png);
	position: absolute;
	right: 0;
	height: 194px;
	width: 290px;
	top: 0;
	z-index: 1;
}

.mainstuheading {
	/* background: url(assets/heading-bg.png); */
	/* height: 44px; */
	/* background-repeat: no-repeat; */
	/* background-size: contain; */
	/* display: flex; */
	/* vertical-align: middle; */
	align-items: center;
	justify-content: center;
	/* background-position: center; */
	/* top: 30px; */
	position: relative;
	z-index: 1;
	/* background: purple;*/
}

.mainstuheading h6 {
	color: white;	padding: 5px 10px;
	font-size: 14px;
	font-weight: 600;
	top: -13px;
	margin-bottom: 0;
	background: purple;
	display: inline-block;
	text-transform: uppercase;
}

.stubasic .stubasicheader {
	min-height: 129px;
	padding: 2px 12px;
}

.stubasic .stubasicheader img {
	width: 100px;
	height: 120px;
	border-radius: 10px;
	border: 2px solid #ff6262;
	float: left;
	object-fit: cover;
}

.stubasic .stubasicheader .stubasicheaderdetaul {
	margin-left: 108px;
}

.stubasic .stubasicheader .stubasicheaderdetaul h3 {
	font-weight: 600;
	font-size: 20px;
	position: relative;
	margin-bottom: 26px;
}

.stubasic .stubasicheader .stubasicheaderdetaul h3:after {
	content: '';
	position: absolute;
	background: black;
	height: 2px;
	width: 50px;
	left: 0px;
	top: 62px;
}

.stubasic .stubasicheader .stubasicheaderdetaul h3 span {
	display: block;
	font-size: 14px;
	font-weight: 500;
	background: #28a745;
	max-width: 150px;
	text-align: center;
	color: white;
	padding: 3px 4px;
	border-radius: 25px;
	margin-bottom: 3px;
	text-transform: uppercase;
}

.stubasic .stubasicheader .stubasicheaderdetaul ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.stubasic .stubasicheader .stubasicheaderdetaul ul li {
	font-size: 15px;
}

.roll_no_stu {
	position: absolute;
	right: 20px;
	top: 42px;
	border: 1px dotted grey;
	height: 80px;
	width: 80px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	padding: 11px 0;
	border-radius: 3px;
}

.roll_no_stu span {
	display: block;
	font-size: 21px;
}

.stubasic .stubasicfooter {
	background: white;
	border-top: 1px solid #c5c5c5;
	padding: 27px 0;
}

.feest_fix {
	height: 244px;
	overflow-y: scroll;
}

.stubasic .stubasicfooter table {
	border-bottom: 0 !important;
	margin: 0;
	padding: 0;
}

.stubasic .stubasicfooter th {
	background: none;
	font-size: 12px;
	border-bottom: 0 !important;
	position: relative;
	padding: 3px 11px;
}

.stubasic .stubasicfooter th span,
.stubasic .stubasicfooter td span {
	display: inline-block;
	position: absolute;
	left: 56%;
	top: 0;
	padding: 3px 5px;
}

.stubasic .stubasicfooter td {
	background: none;
	font-size: 14px;
	border-bottom: 0 !important;
	position: relative;
	font-weight: 600;
	padding: 3px 11px;
}

.stucontctinfo {
	background: white;
	padding: 10px;
	border-top: 1px solid #bf32b4;
}

.stuparpad {
	margin-top: 20px;
}

.stucontctinfo table {
	border-bottom: 0 !important;
	margin: 0;
	padding: 0;
	margin-top: 0px;
}

.stucontctinfo th {
	background: none;
	font-size: 12px;
	border-bottom: 0 !important;
	position: relative;
	width: 185px;
	padding: 3px 11px;
}

.stucontctinfo td {
	background: none;
	font-size: 13px;
	border-bottom: 0 !important;
	position: relative;
	font-weight: 600;
	padding: 3px 11px;
}

.stucontctinfo th span,
.stucontctinfo td span {
	display: inline-block;
	position: absolute;
	left: 56%;
	top: 0;
}

.stucontctinfo .emgcontact {
	border-top: 1px solid red;
	margin-top: 13px;
	text-align: center;
}

.stucontctinfo .emgcontact h6 {
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	background: #28a745;
	display: inline-block;
	color: white;
	padding: 4px 13px;
	text-transform: uppercase;
	margin: 0 auto 12px;
	border-radius: 50px;
	margin: 0;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.stucontctinfo .emgcontact ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 20px;
}

.stucontctinfo .emgcontact ul li {
	display: inline-flex;
	font-weight: 700;
	margin-right: 18px;
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;
}

.stuparnmtinfo {
	background: white;
	padding: 10px;
	border-top: 1px solid #bf32b4;
}

.stuparnmtinfo img {
	width: 87px;
	height: 100px;
	border-radius: 9px;
	border: 3px solid #ff6262;
	object-fit: cover;
	float: left;
}

.stuparnmtinfo .stuparnmtinforight {
	margin-left: 23%;
}

.stuparnmtinfo .stuparnmtinforight h5 {
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
}

.stuparnmtinfo .stuparnmtcontct {
	background: #ebebeb;
	padding: 7px 11px;
}

.stuparnmtinfo .stuparnmtcontct ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stuparnmtinfo .stuparnmtcontct li {
	font-size: 14px;
	font-weight: 700;
}


.stuparnmtinfo .stuparnmtinforight table {
	border-bottom: 0 !important;
	margin: 0;
	padding: 0;
}

.stuparnmtinfo .stuparnmtinforight th {
	background: none;
	font-size: 12px;
	border-bottom: 0 !important;
	position: relative;
	padding: 2px 10px;
}

.stuparnmtinfo .stuparnmtinforight td {
	background: none;
	font-size: 13px;
	border-bottom: 0 !important;
	position: relative;
	padding: 2px 10px;
	font-weight: 600;
}

.stuparnmtinfo .stuparnmtinforight th span,
.stuparnmtinfo .stuparnmtinforight td span {
	display: inline-block;
	position: absolute;
	left: 64%;
	top: 0;
}

/*staff detail css*/
.stu_pro_bank {
	background: white;
	text-align: center;
	padding: 68px 0;
	border-top: 1px solid purple;
}

.stu_pro_bank h5 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 11px;
	text-transform: uppercase;
}

.stu_pro_bank h5 span {
	display: block;
	font-size: 13px;
	margin-top: 4px;
}

.sataffheader {
	background: white;
	padding: 10px;
	border-right: 1px solid #dddddd;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	border-top: 2px solid #f9777f;
}

.sataffheader .staffheadleft {
	text-align: center;
	width: 25%;
	border-right: 1px solid #dddddd;
	position: relative;
	padding-top: 40px;
}

.sataffheader .staffheadleft .staffempno {
	position: absolute;
	left: 0;
	background: #e16565;
	color: white;
	padding: 4px 10px;
	font-size: 15px;
	font-weight: 500;
	top: 0;
}

.sataffheader .staffheadleft img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid red;
}

.sataffheader .staffheadleft h3 {
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 5px;
	margin-top: 9px;
}

.sataffheader .staffheadleft .staffdesig {
	background: #44a351;
	color: white;
	display: inline-block;
	padding: 2px 9px;
	font-weight: 500;
	border-radius: 50px;
}

.sataffheader .staffheadleft .Userpassbox {
	background: #f3f3f3;
    border: 1px dotted #6a6a6a;
    border-radius: 6px;
    display: block;
    padding: 0px 18px;
    margin: 6px 22px 4px;
}
.sataffheader .staffheadleft h5 {
	    font-size: 15px;
    text-transform: uppercase;
}

.newdsn h6 {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 16px;
	border-bottom: 1px solid #d5d5d5;
	padding-bottom: 8px;
}

.newdsn .form-group {
	margin-bottom: 6px !important;
}

.newdsn input,
.newdsn select,
.newdsn .rz-dropdown,
.newdsn .rz-calendar .rz-inputtext,
.newdsn .rz-spinner {
	box-shadow: none !important;
	font-size: 12px;
	font-weight: 600;
	background: #f6f7fa;
	border-radius: 5px !important;
}


.newdsn .rz-spinner-input {
	border-bottom: 0 !important;
}

.newdsn img,
.staffheading img {
	width: 11px;
	margin-right: 4px;
	height: auto;
}

.form-control:focus~.focus-border {
	width: 100%;
	transition: 0.4s;
	left: 0;
}

.form-control~.focus-border {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background-color: #3399FF;
	transition: 0.4s;
}

.backbtnupload input {
	background: black;
	border-radius: 50px;
	padding: 11px 30px;
	border: 0;
	margin-top: 12px;
	font-family: system-ui;
}

.sataffheader .staffheadleft .Userpassbox h5 {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #4c4c4c;
	line-height: 19px;
}

.sataffheader .staffheadleft .staffdep {
	margin-top: 5px;
}

.sataffheader .staffheadleft .staffdep h5 {
	margin: 0;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 400;
	color: #858585;
}

.sataffheader .staffheadleft .staffdep h5 span {
	color: black;
	display: block;
	font-size: 18px;
	font-weight: 500;
}

.sataffheader .staffheadright {
	width: 75%;
}

.sataffheader .staffheadright .staffrighthead {
	border-bottom: 1px solid #dbdbdb;
	padding: 11px 7px;
}

.sataffheader .staffheadright .staffrighthead ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sataffheader .staffheadright .staffrighthead li {
	display: inline-flex;
	margin-right: 38px;
	color: grey;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 500;
}

.sataffheader .staffheadright .staffrighthead li span {
	text-transform: uppercase;
	font-weight: 500;
	color: black;
	margin-left: 4px;
}

.staffothetdet {
	background: white;
	padding: 10px;
	/* border-right: 1px solid #dddddd; */
	border-top: 2px solid #f9777f;
}

.staffothetdet h6 {
	font-size: 12px;
	color: #7c7c7c;
	font-weight: 500;
	margin-bottom: 15px;
	text-transform: uppercase;
	line-height: 21px;
}

.staffothetdet h6 span {
	font-size: 14px;
	color: black;
	font-weight: 500;
	display: block;
	text-transform: capitalize;
}

.pr-0 {
	padding-right: 0 !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.staffheading {
	font-weight: 500;
	font-size: 17px;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 6px;
	margin-bottom: 9px;
}

.studentviewnw .viewheading {
	background: #40bb5c;
    color: white;
    display: inline-block;
    width: 110px;
    padding: 2px 6px;
    font-weight: 500;
    position: relative;
    left: 0;
    top: 0;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 4px;
}

.stubasicnw {
	position: relative;
}

.btn-success {
	color: #fff;
	background-color: #3cad78 !important;
	border-color: #3cad78 !important;
}

.stugenderwise {
	padding: 10px;
}

.stugenderwise th {
	background: #216677;
	color: white;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 7px;
}

.stugenderwise td {
	padding: 0px 7px;
	border: 1px solid #ebebeb;
	font-weight: 500;
	font-size: 12px;
}

.stugenderwise {
	position: relative;
}

.stugenderwise h4 {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	background: #ff5d5d;
	color: white;
	padding: 4px 8px;
	position: absolute;
	top: -13px;
	left: 13px;
	border-radius: 5px;
}

.ftrbtnstu button {
	width: 100%;
}

.stuform {
	background: #ffffff;
    padding: 26px;
    border-radius: 10px;
}

.stuformbox {
	background: white;
	padding: 10px;
	border-radius: 5px;
	position: relative;
	margin-bottom: 25px;
	border: 1px solid #d5d2d2;
}

	.stuformbox h6 {
		background: #043a75;
		color: white;
		position: absolute;
		top: -18px;
		font-weight: 500 !important;
		text-transform: uppercase;
		font-size: 14px !important;
		padding: 3px 10px;
		padding-bottom: 5px !important;
		border-radius: 5px;
		margin: 0;
	}
.photo_update_sing {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	width: 28%;
	height: 100vh;
	align-items: center;
	justify-content: center;
}
.fa {
	font-family: 'FontAwesome' !important;
}

.stuformbox .form-group {
	margin-bottom: 8px;
}
.stuformbox td, .stuformbox th{
    font-size: 13px;
}
.stuformbox .li{
	list-style: none;
	border: 0;
}
.unSelectAble {
	height: 350px !important;
}

.stuformbox input {
	font-size: 12px;
	font-weight: 500;
}

.stuformbox .sturegphotos input {
	opacity: 0;
	position: relative;
	z-index: 2;
	margin: 6px auto 0;
	height: 32px;
	padding: 6px 0;
	display: block;
}

.stuformbox .changephoto {
	background: #34b934;
	color: white;
	padding: 5px 18px;
	display: inline-block;
	border-radius: 50px;
	position: absolute;
	left: 0;
	right: 0;
	width: 169px;
	margin: 7px auto 0;
	bottom: 0;
}

.table> :not(:last-child)> :last-child>* {
	text-align: left !important;
}

.stf__pro__edit {
	position: absolute;
    bottom: -6px;
    left: 80px;
    background: #ffffff;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    color: #f55252;
    font-size: 12px;
    border: 3px solid #ff6d6d;
}
.stuform2 .stuformbox {
	background: white;
	padding: 15px;
	border-radius: 5px;
	position: relative;
	margin-bottom: 25px;
	border: 1px solid #d5d2d2;
}

.stuform2 .stuformbox .form-group {
	margin-bottom: 8px;
}

.stuform2 .stuformbox input {
	font-size: 12px;
	font-weight: 500;
}

.rz-form .rz-spinner {
	width: 100%;
	padding: 0 10px;
}

.rz-grid-table .rz-cell-data input {
	height: 14px;
}

.rz-spinner {
	position: relative;
	padding: 0px 4px !important;
	border-radius: 0px !important;
	height: auto;
}

.pageheader h6 {
	background: #b892ff21;
	padding: 8px 10px;
	font-size: 12px;
	border-radius: 5px;
	text-transform: uppercase;
	font-weight: 700;
	color: #265bef;
	border: 2px solid #265bef;
}

.fixwidthbtns button {
	width: 100%;
}

.rz-button .rz-button-text,
.rz-paginator-element .rz-button-text {
	font-family: system-ui;
	font-size: 12px;
	font-weight: 600;
	margin-left: 5px;
}

.btn {
	height: auto !important;
	min-height: auto !important;
	line-height: unset !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	padding: 7px 10px !important;
	border: 0 !important;
	margin: 0 2px !important;
}
.pageheader span{
	font-size: 13px;
}
hr {
	background-color: #8b8b8b5e !important;
}
.my_teachers{
	    background: white;
    padding: 10px;
    border-radius: 5px;
    clear: both;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-left: 2px solid #eb9292;
    margin-bottom: 20px;
    border-right: 2px solid #eb9292;
    box-shadow: 1px 1px 38px -20px grey;
}
.my_teachers img{
	float: left;
    margin-right: 10px;
    height: 85px;
    width: 75px;
    border-radius: 5px;
}
.my_teachers h4{
	    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}
.my_teachers h4 span{
	    display: block;
    font-weight: 400;
    color: grey;
    font-size: 13px;
    margin-top: 5px;
    text-transform: capitalize;
}
.rz-button.btn.btn-sm,
.btn.btn-sm {
	padding: 4px 6px !important;
	font-size: 11px !important;
	min-height: auto !important;
	font-weight: 500 !important;
	border-radius: 5px;
	font-family: system-ui;
    border: 0;
}

.btn.btn-sm:before {
	font-family: 'FontAwesome';
}

.rz-button.btn.btn-sm i,
.btn.btn-sm i {
	font-size: 12px;
}
.rz-button.btn.btn-sm .rz-button-text {
	    font-weight: 500;
    font-size: 11px !important;
    margin-left: 2px;
    line-height: 15px;
}

.admnoticedetail .rz-html-editor {
	height: 380px;
	overflow-y: scroll;
}

.stuflex {
	margin-bottom: 10px;
}

.studentviewnw .rz-card {
	position: relative;
}

.studentviewnw .stuviewimg img {
	height: 130px;
    width: 103px;
    border-radius: 12px;
    border: 5px solid #cfcfcf;
    float: left;
    object-fit: cover;
}

.studentviewnw .stuviewdetail {
	margin-left: 120px;
}

.studentviewnw .stuviewdetail h6 {
	margin-bottom: 0px;
	padding-bottom: 0;
	font-size: 17px;
	/* color: white; */
	font-weight: 700;
	border-bottom: none;
}

.studentviewnw .stuviewdetail h6 span {
	border-radius: 5px;
    background: #3435b6;
    display: block;
    padding: 3px 10px;
    font-size: 14px;
    color: white;
    max-width: 72px;
    text-align: center;
    margin-bottom: 6px;
}

.studentviewnw .stuviewcladm {
	border: 2px solid #ef5656;
    border-radius: 10px;
    padding: 0px 8px;
    color: black;
    margin-top: 9px;
}

.viewheading:after {
	content: '';
	width: 0;
	height: 0;
	border-top: 24px solid #40bb5c;
	border-right: 22px solid transparent;
	top: 0;
	position: absolute;
	right: -21px;
}

.stufoot {
	background: #e3e0e0;
    padding: 2px 7px;
    margin-top: 18px;
}

.stufoot .table {
	margin: 0;
}

.stufoot .table td {
	font-weight: 500;
    color: black;
    padding: 4px 0;
    border-radius: 3px;
}

.studentviewnw .stuviewcladm ul {
	margin: 0;
	padding: 0;
	list-style: none;
	padding: 6px 0;
}

.studentviewnw .stuviewcladm li {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 24px;
}


.studentviewnw .stuviewcladm strong {
	text-transform: uppercase;
	font-weight: 700;
}

.studentviewnw .viewpagedet {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-top: 0;
}

.studentviewnw .viewpagedet li {
	font-weight: 400;
	font-size: 14px;
	color: #101010;
	line-height: 27px;
}

.studentviewnw .viewpagedet strong {
	font-weight: 500;
	width: 142px;
	display: inline-block;
}

.studentviewnw .viewpagedet span {
	display: inline-block;
	margin-left: 1px;
	margin-right: 6px;
}

.sturegnew .form-group {
	margin-bottom: 10px;
}

.sturegnew input,
.sturegnew .rz-dropdown,
.sturegnew .rz-calendar input {
	background: #e7e7e7;
	border: 0 !important;
	font-size: 13px;
	font-weight: 500;
	color: #686868;
}

.sturegnew h5 {
	background: #ef7272;
	display: inline-block;
	position: absolute;
	top: -23px;
	color: white;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 10px;
	left: 0;
	text-transform: uppercase;
}


.stucontactnw {
	border: 2px solid #ef7272;
	padding: 23px 15px;
	border-radius: 10px;
	position: relative;
	margin: 9px 0;
}

.sturegnew h5:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 33px solid #ef7272;
	border-right: 22px solid transparent;
	top: 0;
	right: -22px;
}

.stucontactnw h3 {
	font-size: 14px;
	font-weight: 400;
	background: #ef7272;
	color: white;
	padding: 7px 10px;
	border-radius: 50px;
	display: inline-block;
	position: absolute;
	top: -15px;
	left: 0;
}

.stuphotosbox {
	text-align: center;
	margin-top: 7px;
}

.sturegphotos {
	position: relative;
}

.sturegphotos button {
	display: block;
	margin: 5px auto 0;
	border-radius: 50px;
	padding: 6px 17px;
	height: auto;
	min-height: auto;
}

.sturegphotosbydefault,
.sturegphotosbyupload {
	height: 175px;
	width: 159px;
	border-radius: 10px;
	border: 5px solid #ef9c9c;
	object-fit: cover;
}

.admnoticedet {
	height: 429px;
	overflow-y: scroll;
}

.stuphotosbox h4 {
	text-transform: uppercase;
	/* background: cadetblue; */
	display: block;
	padding: 5px 17px;
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
}

/*public notice css*/
.container-new {
	width: 100%;
}

.publicnotice {
	background: #cbd1ff4a;
	height: 100vh;
	position: relative;
	align-items: center;
	justify-content: flex-start;
	display: inline-flex;
	width: 100%;
	overflow: hidden;
}
.public_leftpgo {
	text-align: center;
	position: relative;
	z-index: 2;
	padding: 0 30px;
}


.public_left {
	background-color: #630099;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: 100vh;
	width: 45%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.public_left:after {
	content: '';
	background-image: url(/_content/SkoolMAUI.Shared/css/assets/publicnoticebg.png);
	position: absolute;
	height: 100%;
	width: 315px;
	top: 0;
	background-size: contain;
	background-repeat: no-repeat;
	left: 20%;
}

.public_left img {
	width: 140px;
}

.public_right_header h3 {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 15px;
}

.public_left h4 {
	text-transform: uppercase;
	padding: 13px 10px;
	font-size: 23px;
	border: 2px dotted #c5b7b7;
	border-radius: 5px;
	background: #40047a00;
	color: #fdfdfd;
}

.public_left h4 span {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 14px;
	display: block;
	background: #300448;
	padding: 6px 26px;
	margin-top: 6px;
	width: fit-content;
	margin: 8px auto 0;
	color: white;
}

.public_right {
	position: relative;
	z-index: 2;
	width: 48%;
}

.notice-panel{
	padding: 0 15px;
}
.publicheading {
	position: absolute;
	/* top: -20px; */
	background: #7938b9;
	font-size: 16px;
	color: white;
	font-weight: 500;
	padding: 8px 27px;
	left: 50%;
	text-transform: uppercase;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.public_right_footer p {
	margin-bottom: 7px;
	background: #d19611;
	font-weight: 500;
}

.public_right .public_right_header {
	border: 2px solid #7938b9;
	border-radius: 2px;
	padding: 6px;
	height: 345px;
	overflow-y: scroll;
	margin: 3px;
	text-align: left;
}

.public_right .public_right_fee {
	border: 2px solid #7938b9;
	border-radius: 2px;
	padding: 20px;
	min-height: 445px;
}

.useerfeedetl {
	text-align: center;
}

.useerfeedetl h2 {
	font-size: 26px;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 16px;
}

.useerfeedetl h2 span {
	display: block;
	text-transform: capitalize;
	font-weight: 500;
	font-size: 13px;
	margin-top: 4px;
}

.useerfeedetl h5 {
	background: #cf119d;
	font-weight: 600;
	font-size: 15px;
	display: inline-block;
	padding: 6px 11px;
	color: white;
}

.public_right_fee button .rz-button-text {
	font-weight: 600;
	font-size: 14px;
}

.useerfeedetlbox {
	text-align: center;
	border-top: 1px solid #8080805c;
	border-bottom: 1px solid #8080805c;
	padding-top: 20px;
	margin-top: 12px;
	padding-bottom: 8px;
	margin-bottom: 20px;
}

.useerfeedetlbox h1 {
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
}

.useerfeedetlbox h3 {
	display: inline-block;
	padding: 6px 22px;
	margin-top: 8px;
	color: #270648;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	border: 2px dotted #084298;
}

.stufeegrid table {
	margin-top: 20px;
	margin-bottom: 0;
}

.stubasicnw .sturegphotos img {
	height: 175px;
	width: 150px;
	border-radius: 5px;
	border: 2px solid grey;
	display: block;
	margin: 0 auto;
}

.stufeegrid table th {
	background: #585858;
	color: white !important;
	text-align: left !important;
	border: 1px solid white;
	border-width: medium !important;
}

.stufeegrid table td {
	font-weight: 600;
	font-size: 12px;
}

.public_right .public_right_footer {
	background: #fae4a1;
	border-top: 2px solid #9d7d1c;
	padding: 10px 12px;
	margin-top: 6px;
}

.public_right .public_right_footer input {
	height: 36px !important;
	width: 200px;
}
	.public_right .public_right_footer .input-group-new {
		display: flex;
	}
	.public_right .public_right_footer button {
		padding: 7px 10px;
		width: 100%;
		border-radius: 5px;
	}

.public_right_header::-webkit-scrollbar, .public_leftpgo::-webkit-scrollbar {
	width: 10px;
}
.public_right_header::-webkit-scrollbar-track, .public_leftpgo::-webkit-scrollbar-track {
	background: #adadad;
}
.public_right_header::-webkit-scrollbar-thumb{
	background: #ad1821;
}
	.public_right_header::-webkit-scrollbar-thumb:hover, .public_leftpgo::-webkit-scrollbar-thumb:hover {
		background: #5e060b;
	}
.public_leftpgo::-webkit-scrollbar-thumb {
	background: #27013c;
}
.menu_left_head {
	text-align: center;
}
.menu_left_head h3 {
	color: white;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    margin-top: -3px;
}
	/* width */
.menuleftfix {
	    height: 100vh;
    position: sticky;
    margin-top: 0px;
    overflow-y: scroll;
    padding-top: 0px;
}
.menuleftfix::-webkit-scrollbar {
	width: 5px;
}

/* Track */
	.menuleftfix::-webkit-scrollbar-track {
		background: #479cc8;
	}

/* Handle */
.menuleftfix::-webkit-scrollbar-thumb {
	background: #ad1821;
}

	/* Handle on hover */
	.menuleftfix::-webkit-scrollbar-thumb:hover {
		background: #5e060b;
	}

.public_right .publicheading:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 18px solid #350862;
	border-left: 20px solid transparent;
	top: 0;
	left: -20px;
}

.public_right .publicheading:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 18px solid #350862;
	border-right: 20px solid transparent;
	right: -20px;
	top: 0;
}

/*public notice list*/
.publicnoticedetl {
	height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.regtable h2 {
	font-size: 16px;
	font-weight: 500;
}

.regtable {
	background: white;
	border: 6px solid #630099;
	height: 442px;
	padding: 10px 10px;
	overflow-y: scroll;
	border-radius: 0px;
}

/* width */
.regtable::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.regtable::-webkit-scrollbar-track {
	background: grey;
}

/* Handle */
.regtable::-webkit-scrollbar-thumb {
	background: #7938b9;
}

/* Handle on hover */
.regtable::-webkit-scrollbar-thumb:hover {
	background: #7938b9;
}

.publicreglist {
	position: relative;
	z-index: 2;
}

.regtable table th {
	background: #630099 !important;
	color: white;
	font-weight: 400;
	font-size: 15px;
	padding: 3px 2px !important;
}

.regtable table td {
	padding: 4px 8px !important;
	text-transform: uppercase;
	font-size: 12px;
}

.regtable .fa-plus:before {
	font-size: 10px;
	margin-top: 0;
	display: inline-block;
}

.regtable table td span.rz-cell-data {
	font-weight: 500;
	color: black;
}

.stugrp_pop {
	position: relative;
}

.stuqpopup {
	background: white;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 10px 10px;
	border-bottom: 1px solid #e3e3e3;
	width: 600px;
	margin: 0 auto;
	margin-top: -16px;
}

.regtable button {
	/* background-color: #fc9f03 !important; */
	color: white;
	padding: 3px 10px !important;
	font-weight: 500 !important;
	min-height: auto;
}

.publicreghead {
	background: #ffffff;
    margin: 0 auto;
    padding: 8px 0;
	position: relative;
	z-index: 2;
	border-radius: 15px;
}
.publicreghead-devider{
	border-top: 1px solid #d6d6d6;
    margin: 2px 0;
}

.publicreghead .media {
	display: flex;
	align-items: center;
}

.publicreghead .media img {
	width: 70px;
	margin-right: 13px;
	height: 85px;
	object-fit: contain;
}

.publicreghead .media .media-body {
	padding: 3px 0;
}

.publicreghead .media .media-body h4 {
	font-size: 22px;
    font-weight: 700;
    color: #0d1881;
    padding: 0 !important;
    line-height: 22px;
}

.publicreghead .media .media-body h4 span {
	font-size: 13px;
    display: block;
    font-weight: 500;
    margin-top: 3px;
}

.public_right_pad .checkbox .rz-chkbox-box {
	border: 2px solid #dc3545 !important;
}

.public_right_pad .rz-label {
	display: inline-block;
	text-align: left;
}

.public_right_pad .checkbox {
	margin-top: 6px;
	padding: 0 9px;
	display: flex;
}

.ntcyeardetl {
	background: white;
	position: absolute;
	top: 38%;
	left: 0;
	right: 0;
	padding: 18px 33px;
	box-shadow: 0px 24px 10px -20px #808080a1;
}

.ntcyeardetl .ntcdtlinner {
	text-align: center;
}

.ntcyeardetl .ntcdtlinner img {
	margin-top: -72px;
	width: 195px;
	margin-bottom: 5px;
}

.ntcyeardetl .ntcdtlinner h3 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	color: #630099;
	position: relative;
}

.ntcyeardetl .ntcdtlinner h3:before {
	content: '';
	background: #630099;
	width: 50px;
	height: 1px;
	position: absolute;
	margin-left: -61px;
	top: 15px;
}

.ntcyeardetl .ntcdtlinner h3:after {
	content: '';
	background: #630099;
	width: 50px;
	height: 1px;
	position: absolute;
	margin-left: 6px;
	top: 15px;
}

.ntcyeardetl .ntcdtlinner h4 {
	margin-bottom: 7px !important;
	font-size: 35px;
	font-weight: 500;
	color: #fb9e03;
	text-transform: uppercase;
	padding: 0 !important;
}

.ntcyeardetl .ntcdtlinner h5 {
	font-size: 16px;
	background: #630099;
	color: #ffc35f;
	font-weight: 500;
	padding: 7px 31px;
	display: inline-block;
	text-transform: uppercase;
}

.publicreghead:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 43px solid #50033a;
	border-left: 20px solid transparent;
	top: 0;
	left: -20px;
	display: none;
}

.publicreghead:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 43px solid #50033a;
	border-right: 20px solid transparent;
	right: -20px;
	top: 0;
	display: none;
}

.shortform {
	background: white;
	border: 3px solid #630099;
	border-radius: 0px;
	padding: 30px 30px 30px;
	margin-top: 0;
}

.shortform input,
.shortform .rz-dropdown,
.shortform select {
	font-size: 12px;
	border-radius: 0px;
	appearance: auto;
}

.shortform button {
	border: 0;
	color: white;
	padding: 8px 13px;
	border-radius: 0px;
}


.admsetup {
	position: relative;
}

.admsetup h4 {
	border-bottom: 1px solid #8080807a;
	padding-bottom: 9px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}

.admsetup input,
.admsetup .rz-dropdown,
.admsetup .rz-spinner,
.admsetup .rz-calendar {
	color: black;
	font-size: 14px;
}

.admsetup .form-group {
	margin-bottom: 7px;
}

.staffeditbtn button {
	display: block;
	text-align: center;
	margin: 6px auto 0;
	width: 130px;
	padding: 12px 0 !important;
	border-radius: 18px !important;
}

.rz-card.leaveforms {
	border-top: 2px solid #e56161;
}

.leavebox {
	border: 2px solid #ff9f9f;
	padding: 15px;
	border-radius: 5px;
}

.staffchild_list {
	height: 70px;
    overflow-y: scroll;
    padding: 0;
}

.staffchild_list th {
	padding: 4px 6px;
    font-size: 12px;
    font-weight: 700;
    background: #0b4daf;
    color: #fdfdfd;
}

.staffchild_list td {
	padding: 2px 5px;
	font-size: 12px;
}

.staffchild_list button {
	padding: 2px 7px !important;
	background-color: #3c3c3c !important;
	border-radius: 0px;
	font-weight: 400 !important;
}

.leaveforms input,
.leaveforms select {
	background: #f3f3f3;
	border-radius: 0px;
	height: 36px;
	font-size: 14px;
	border: 0 !important;
}

.leaveforms textarea {
	background: #f3f3f3;
	border-radius: 0px;
	font-size: 14px;
	border: 0 !important;
	min-height: 70px;
}

.leaveforms td,
.leaveforms th {
	padding: 7px 9px;
}

.leaveforms {
	position: relative;
}

.leaveheading {
	background: #e56161;
	width: 149px;
	padding: 5px 7px;
	text-transform: uppercase;
	color: white;
	font-weight: 600;
	font-size: 16px;
	position: absolute;
	top: -44px;
	left: -22px;
}

.leaveallowed {
	position: absolute;
	right: 0;
	text-transform: uppercase;
	font-weight: 700;
	color: #e56161;
	top: -33px;
	font-size: 15px;
}

.leavelegtdetail {
	position: relative;
}


.amountfinalboxsingle {
	padding: 6px 6px;
}

.feesingleright .feefooheader {
	margin: 6px 7px 0;
	border: 1px solid #403006;
	text-align: center;
}

.feesingleright .feefooheader h4 {
	background: #8d5e0a;
	color: white;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 17px;
	padding: 5px 7px;
	margin: 0;
}

.feefooter .feefooterleftsingle {
	padding: 7px 7px;
	position: relative;
}

.feefooter .feefooterleftsingle .media .stuadmno {
	position: absolute;
	right: 78px;
	background: #dc3545;
	color: white;
	font-weight: 600;
	padding: 2px 13px;
	font-size: 15px;
	text-transform: uppercase;
	border-radius: 14px;
	top: -16px;
}

.feefooter .feefooterleftsingle .media {
	border: 1px solid #644802;
	border-radius: 6px;
	position: relative;
	background: #f1d692;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
}

.feefooter .feefooterleftsingle .media img {
	height: 90px;
	width: 77px;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid #644802;
}

.feefooter .feefooterleftsingle .media img {
	height: 90px;
	width: 77px;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid #644802;
}

.feefooter .feefooterleftsingle .media .media-body {
	padding: 19px 8px;
}

.feefooter .feefooterleftsingle .media .media-body h3 {
	font-weight: 600;
	font-size: 17px;
	margin: 0;
}

.feefooter .feefooterleftsingle .media .media-body h3 span {
	display: block;
	font-weight: 500;
	font-size: 15px;
}

.feefooterfoosingle {
	padding: 12px 22px 12px;
	border-top: 1px solid #644802;
}

.feefooterfoosingle .finalbtns {
	text-align: right !important;
	vertical-align: middle;
}

.stafflvbox {
	background: antiquewhite;
	padding: 10px;
	border-radius: 5px;
}


.stafflvbox .leavestahedr h3 {
	font-size: 14px;
	font-weight: 500;
	border-bottom: 1px solid grey;
	padding-bottom: 8px;
	margin-bottom: 0;
}

.stafflvbox .leavestamiddle {
	margin: 12px 0;
}

.stafflvbox .leavestamiddle .levcredbox {
	background: #af8954;
	text-align: center;
	padding: 5px;
}

.stafflvbox .leavestamiddle .levcredbox h4 {
	color: white;
	font-size: 11px;
	font-weight: 400;
	margin: 0;
}

.stafflvbox .leavestamiddle .levcredbox h4 span {
	display: block;
	font-size: 22px;
	font-weight: 600;
}

.stafflvbox .leavstafootr {
	border-top: 1px solid grey;
	padding-top: 11px;
	margin-top: 0px;
}

.stafflvbox .leavstafootr .btn-statusview {
	background: white;
	color: black;
	font-size: 12px !important;
	/* font-weight: 700!important; */
	min-height: 29px !important;
	padding: 0 0 !important;
}

.stafflvbox .leavstafootr .statusapply {
	background: white;
	color: black;
	font-size: 12px !important;
	/* font-weight: 700!important; */
	min-height: 29px !important;
	padding: 0 0 !important;
}

.feefooter .table-responsive {
	height: 400px;
	overflow-y: scroll;
}

/*staff views css*/
.staffstabox {
	padding: 10px;
}

.staffstabox .staffsthdr {
	border-bottom: 1px solid #08080852;
	padding-bottom: 8px;
}

.staffstabox .staffsthdr h2 {
	color: white;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 0;
}

.staffstabox .staffstmiddle {
	padding: 14px 0;
}

.staffstabox .staffstmiddle ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
}

.staffstabox .staffstmiddle ul li {
	width: 32%;
	line-height: 19px;
	height: 50px;
	background: #0000007a;
	color: white;
	font-size: 12px;
	text-align: center;
	margin-right: 5px;
	padding: 5px 0;
}

.staffstabox .staffstmiddle ul li span {
	font-size: 18px;
	display: block;
	font-weight: 600;
}

.staffstabox .staffstfootr {
	border-top: 1px solid #ffffff87;
	padding-top: 10px;
}

.staffstfootr .btn {
	background: white;
	border-radius: 0px;
	font-weight: 600;
	font-size: 12px;
	padding: 5px 16px;
	width: 45%;
	margin-right: 15px;
	transition: .5s;
}

.staffstfootr .btn:hover {
	background: #0404049e;
	transition: .5s;
	color: white;
}

.staffstbg1 {
	background-color: #f34f7c;
	border-top: 2px solid #9b0f35;
}

.staffstbg2 {
	background-color: #358aa4;
	border-top: 2px solid #065972;
}

.staffstbg3 {
	background-color: #716caf;
	border-top: 2px solid #1a1378;
}

.staffstbg4 {
	background-color: #459737;
	border-top: 2px solid #0c4a01;
}

.staffmastbox {
	background: white;
	padding: 10px;
	position: relative;
	border-top: 1.9px solid #e17575;
	border-radius: 5px;
}

.staffmastbox .credit {
	background: #e01fcd;
	color: white;
	padding: 3px 19px;
	display: inline-block;
	position: absolute;
	top: 3px;
	right: 0;
	font-style: italic;
	font-size: 13px;
}

.staffmastbox .media {
	margin-top: 25px;
}


.callbox {
	border: 3px solid #ffcece;
	border-radius: 1px;
}

.staffmastbox .media img {
	border: 1px solid #cfcfcf;
	height: 45px;
	width: 45px;
	border-radius: 3px;
}

.staffmastbox .media .media-body {
	margin-left: 8px;
}

.staffmastbox .media .media-body h5 {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
}

.staffmastbox .media .media-body h5 span {
	color: #ff3e3e;
	font-style: italic;
	font-weight: 700;
	font-size: 14px;
	display: block;
}

.staffmastbox button {
	border: 0;
	background: #ff6d6d;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	position: absolute;
	right: 37px;
	top: 57px;
	font-size: 9px;
	color: white;
}

.staffmastbox .stafcheck {
	position: absolute;
	left: 10px;
	top: 0px;
}

.staffmastbox .staflevtype {
	border-top: 1px solid #80808066;
	padding-top: 5px;
}

.staffmastbox .staflevtype ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.staffmastbox .staflevtype li {
	font-weight: 500;
	font-size: 13px;
}

.staffmastbox .staflevtype li strong {
	font-weight: 500;
	width: 90px;
	display: inline-block;
}

.staffmastbox .staflevtype li span {
	width: 28px;
	display: inline-block;
}

.staffmastbox .staflevtype li .text-right {
	width: auto;
}

.leavsumbox {
	border: 2px solid #ff7171;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 16px
}

.leavsumbox h4 {
	text-transform: uppercase;
	font-weight: 700;
	border-left: 5px solid #ff6464;
	padding-left: 4px !important;
}

.media {
	display: flex;
	align-items: flex-start;
}

.media-body {
	flex: 1 1 0%;
}

.leaveforms .btn {
	border-radius: 0px;
	padding: 3px 14px;
	font-size: 15px;
}

.leaveforms .btn.btn-success {
	background-color: #469f46;
	border-color: #469f46;
}

.leaveforms .btn.btn-danger {
	background-color: #f75353;
	border-color: #f75353;
}


.leavsumbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 10px;
}

.leavsumbox li {
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

.leavsumbox li strong {
	font-size: 14px;
	font-weight: 500;
	min-width: 134px;
	display: inline-block;
}

.leavsumbox li span {
	width: 25px;
	display: inline-block;
}

.leavsumbox li .text-right {
	width: auto;
}

/*staff views css*/
/*staff dashboard*/
.staffdashnw .shrtprobg {
	min-height: 84px;
	background: linear-gradient(-90deg, #1b434cc9, #4d7f8af0), url(/_content/SkoolMAUI.Shared/css/assets/shotprofbg.jpg);
	background-size: cover;
	background-position: center;
}

.staffdashnw .stafshortpro {
	background: linear-gradient(-90deg, #ffffffd1, #ffffffde), url(/_content/SkoolMAUI.Shared/css/assets/stfprobg.png);
	background-size: cover;
	background-position: center;
	padding: 15px 0 0px;
	position: relative;
}

.staffdashnw .stafshortpro .staffhdr {
	top: -70px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
}

.staffdashnw .stafshortpro button {
	background: #f3523c;
	border-radius: 50px;
	padding: 4px 14px;
	color: white;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-top: 16px;
	border: 0;
	font-size: 12px;
}

.staffdashnw .stafshortpro .staffname {
	position: relative;
	top: -115px;
	background: #e65b48;
	color: white;
	padding: 4px 10px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	max-width: 201px;
	text-transform: uppercase;
	font-weight: 600;
}

.staffdashnw .stafshortpro .staffhdr img {
	height: 100px;
	width: 100px;
	border-radius: 50%;
	border: 6px solid #fb7171;
	margin: 0 auto;
	object-fit: cover;
}

.staffdashnw .stafshortpro .stafffttr {
	padding: 0 12px;
}

.staffdashnw .stafshortpro .stafffttr ul {
	margin: 0;
	padding: 0;
}

.staffdashnw .stafshortpro .stafffttr ul li {
	font-size: 13px;
	font-weight: 500;
}

.staffdashnw .stafshortpro .stafffttr ul li strong {
	font-weight: 500;
	width: 100px;
	display: inline-block;
}

.staffdashnw .stafshortpro .stafffttr ul li span {
	width: 30px;
	display: inline-block;
}

.staffdashnw .stafshortpro .stafffttr ul li .text-right {
	width: auto;
}

.staffdashnw .staffbtns {
	background: linear-gradient(-90deg, #ffffffc7, #ffffff9e), url(/_content/SkoolMAUI.Shared/css/assets/btnsbg.png);
	background-size: cover;
	background-position: center;
}

.staffdashnw .staffbtns a {
	padding: 9px 29px;
	text-align: left;
	color: white;
	line-height: 16px;
	margin: 12px 0;
	display: inline-block;
	position: relative;
	margin-left: 28px;
	font-size: 13px;
	width: 75%;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	white-space: nowrap;
}

.staffdashnw .staffbtns a img {
	width: 53px;
	position: absolute;
	border: 3px solid;
	border-radius: 50%;
	padding: 4px;
	top: -2px;
	left: -25px;
	background: white;
}

.staffdashnw .staffbtn1 img {
	border-color: #449f90 !important;
}

.staffdashnw .staffbtn2 img {
	border-color: #e65b48 !important;
}

.staffdashnw .staffbtns .staffbtn1 {
	background: #449f90;
}

.staffdashnw .staffbtns .staffbtn2 {
	background: #e65b48;
}

.staffdashnw .card h4 {
	font-weight: 500;
	font-size: 16px;
	position: relative;
	margin-top: 0;
	margin-bottom: 7px !important;
	z-index: 2
}

.staffdashnw .card h4:after {
	content: '';
	background: #e65b48;
	height: 2px;
	width: 20px;
	position: absolute;
	left: 0;
	top: 32px;
	display: none;
}

/* width */
.staffnoti::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.staffnoti::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
.staffnoti::-webkit-scrollbar-thumb {
	background: #449f90;
	border-radius: 10px;
}

.staffdashnw .staffnoti {
	background: linear-gradient(-90deg, #ffffffe6, #ffffffdb), url(/_content/SkoolMAUI.Shared/css/assets/notibg.png);
	background-size: cover;
	background-position: center;
}

.staffdashnw .staffnoti ul {
	margin: 0;
	padding: 0;
	position: relative;
}

.staffdashnw .staffnoti ul li {
	font-weight: 500;
	margin-bottom: 15px;
	font-size: 14px;
	padding-left: 16px;
	position: relative;
}

.staffdashnw .staffnoti ul li span {
	display: block;
	font-weight: 400;
	color: #7a7a7a;
	line-height: 18px;
	font-size: 12px;
}

.staffdashnw .staffnoti ul:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	left: 4px;
}

.staffdashnw .staffnoti ul li:before {
	content: '';
	position: absolute;
	background: #e65b48;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	left: 0px;
	top: 0;
}

.staffdashnw .staffbrthdy .stafftimtble {
	position: relative;
}

.staffdashnw .staffbrthdy:before {
	content: '';
	background: linear-gradient(-90deg, #ffffffa6, #ffffffdb), url(/_content/SkoolMAUI.Shared/css/assets/stafbrthdatleft.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 269px;
	width: 185px;
	position: absolute;
	left: 0;
	z-index: -1;
	top: 0;
}

.staffdashnw .staffbrthdy:after {
	content: '';
	background: linear-gradient(-90deg, #ffffffa6, #ffffffdb), url(/_content/SkoolMAUI.Shared/css/assets/stafbrthdatright.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 269px;
	width: 185px;
	position: absolute;
	right: 0;
	z-index: 1;
	top: 0;
}

.staffdashnw .staffbrthdy .item {
	position: relative;
	z-index: 2;
}

.staffdashnw .stafftimtble th,
.stafftimtble td {
	font-weight: 500;
	font-size: 12px;
	padding: 4px 6px;
}

.staffdashnw .stafftimtble table {
	margin: 0;
	padding: 0;
}

.staffdashnw .stafftimtble th {
	background: #449f90;
	color: white;
	font-weight: 500;
	font-size: 14px;
}

.staffdashnw .stafftimtble td {
	color: #262626;
}
.staffbrthdy:after{
content: '';
    position: absolute;
    background: url(/_content/SkoolMAUI.Shared/css/assets/sparkel2-staff-bg.png);
    background-size: contain;
    background-repeat: repeat;
    left: -14px;
    right: -19px;
    bottom: -45px;
    top: -17px;
    height: 93px;
    z-index: 1;
    background-position: center;
}
.staffbrthdy {
	position:relative;
}

.staffbrthdy h4 {
	margin: 0;
	background: #f14668;
	padding: 10px 7px;
	font-size: 14px;
	color: white;
}
.staffbrthdy h5 {
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	line-height: 21px;
	margin: 0;
}

.staffbrthdy h5 span {
	display: block;
	font-size: 12px;
	text-transform: capitalize;
}

.staffbrthdy h6 {
	    font-weight: 700;
    margin-top: 11px;
    font-size: 18px;
    line-height: 22px;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    text-transform: uppercase;
	position: relative;
    z-index: 2;
}

.stupaymthisbox button {
    width: 100%;
    border: 0;
    margin-bottom: 4px;
    padding: 3px 0;
    min-height: auto;
}

.staffbrthdy h6 span {
	display: block;
	font-size: 14px;
	font-weight: 500;
}

.staffdashnw .stafshortpro .staffname:before {
	content: '';
	width: 0;
	height: 0;
	border-bottom: 15px solid #b11010;
	border-left: 20px solid transparent;
	top: 0;
	left: -20px;
	position: absolute;
}

.staffdashnw .stafshortpro .staffname:after {
	content: '';
	width: 0;
	height: 0;
	border-bottom: 15px solid #970808;
	border-right: 20px solid transparent;
	top: 0;
	right: -20px;
	position: absolute;
}

.rz-body.body.body-expanded .dashrightpanel {
	padding-right: 0%;
}

.rz-body {
	padding: 4px !important;
}

.mbtnresstu {
	display: none;
}

.dashrightpanel {
	position: relative;
	margin-top: 8px;
}

/*staff dashboard*/
#stuportalcontent {
	margin-right: 0%;
	height: 100vh;
	position: relative;
	background: none;
}

.stubckbtn img {
	width: 116px;
}

.stubckbtn {
	position: absolute;
	right: 0;
	top: 56px;
	z-index: 1;
}

.stushotinfo {
	background: linear-gradient(-90deg, #fffffff2, #ffffffe8), url(/_content/SkoolMAUI.Shared/css/assets/vv5.png);
	background-size: revert;
	background-position: 0px -20px;
	background-repeat: no-repeat;
	position: relative;
}

.stuholilist {
	background: linear-gradient(-90deg, #ffffffbf, #ffffffe8), url(/_content/SkoolMAUI.Shared/css/assets/vv8.png);
	background-size: contain;
	background-position: -75px -109px;
}

.stumostlinks {
	padding: 0 8px;
}
.stunotibox {
	background: linear-gradient(-90deg, #ffffffbf, #ffffffe8), url(/_content/SkoolMAUI.Shared/css/assets/vv4.png);
	background-size: cover;
	background-position: 24px 4px;
	background-repeat: no-repeat;
}

.stufeend {
	background: linear-gradient(-90deg, #ffffffbf, #ffffffe8), url(/_content/SkoolMAUI.Shared/css/assets/vv9.png);
	background-size: cover;
	background-position: 168px 0px;
	background-repeat: no-repeat;
	position: relative;
}

.stuattnd {
	    background: linear-gradient(-90deg, #fffffff0, #ffffffe8), url(/_content/SkoolMAUI.Shared/css/assets/vv8.png);
    background-size: cover;
	/* background-position: -75px -109px; */
	background-repeat: no-repeat;
}

/*non staff dashboard*/
.notistaffbox {
	height: 263px;
	overflow-y: scroll;
}

.notboxsingle:last-child {
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
}

.notistaffbox .notboxsingle {
	min-height: 60px;
	border-bottom: 1px solid #80808052;
	margin-bottom: 15px;
	margin-top: 15px;
	position: relative;
	z-index: 2;
}

.notistaffbox .notboxsingle .notidate {
	background: #f14a4a;
	width: 86px;
	border-radius: 5px;
	float: left;
	padding: 2px 0;
	margin-right: 8px;
}

.notistaffbox .notboxsingle .notidate h6 {
	font-size: 15px;
	margin: 0;
	color: white;
	text-align: center;
	font-weight: 400;
	line-height: 20px;
}

.notistaffbox .notboxsingle .notidate h6 span {
	font-weight: 500;
	font-size: 18px;
}

.notistaffbox .notboxsingle .notidetail h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

.notistaffbox .notboxsingle .notidetail h5 span {
	display: block;
	font-weight: 400;
	color: #4e4e4e;
	font-size: 13px;
}

.nonstaffbox {
	text-align: center;
	position: relative;
}

.nonstaffbox:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/nonstafprobg.png);
	height: 287px;
	width: 100%;
	left: 0;
	background-size: contain;
	top: -11px;
	z-index: 1;
	background-repeat-y: repeat;
}

/* width */
.nonstaffnotsec::-webkit-scrollbar,
.notistaffbox::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.nonstaffnotsec::-webkit-scrollbar-track,
.notistaffbox::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
.nonstaffnotsec::-webkit-scrollbar-thumb,
.notistaffbox::-webkit-scrollbar-thumb {
	background: #39ba94;
	border-radius: 10px;
}

.nonstafbox {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dotted #80808069;
	align-items: center;
	margin-bottom: 10px;
	position: relative;
}

/* Handle on hover */
.nonstaffnotsec::-webkit-scrollbar-thumb:hover,
notistaffbox::-webkit-scrollbar-thumb:hover {
	background: #b30000;
}

.notistaffbox:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/nonstaffnotification.png);
	height: 195px;
	width: 547px;
	left: 0;
	background-size: contain;
	top: 0;
	z-index: 1;
	background-repeat: no-repeat;
}

.nonstaffnotsec {
	height: 144px;
	overflow-y: scroll;
}

.nonstaffbox img {
	height: 125px;
	width: 125px;
	border-radius: 50%;
	border: 8px solid #ff9191;
	margin-top: -78px;
	position: relative;
	z-index: 2;
}

.nonstaffbox ul {
	margin-bottom: 7px !important;
	padding: 10px 0 0px;
	width: 272px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.nonstaffbox li {
	text-align: left;
	font-weight: 500;
	font-size: 14px;
	line-height: 28px;
}

.nonstaffbox li strong {
	font-weight: 500;
	display: inline-block;
	width: 100px;
}

.nonstaffbox li span {
	display: inline-block;
	width: 12px;
}

.nonstaffbox li .text-right {
	width: auto;
	text-align: right;
}

.nonstaffbox .btn-nonstaffbtn {
	background: #ff3e3e;
	border-radius: 50px;
	color: white;
	font-weight: 500;
	text-transform: uppercase;
	padding: 5px 19px;
	position: relative;
	z-index: 2;
	font-size: 13px;
}

.nonsfabtn1 {
	background: #39ba94;
}

.nonsfabtn2 {
	background: #ff5299;
}

.nonsfabtn3 {
	background: #d34848;
}

.nonsfabtn4 {
	background: #3299d5;
}

.nonstafbtns {
	position: relative;
}

.nonstafbtns:before {
	content: '';
	position: absolute;
	background: url(/_content/SkoolMAUI.Shared/css/assets/nonstafbtnsbg.png);
	height: 154px;
	background-size: contain;
	width: 313px;
	top: -12px;
	left: -11px;
}

.nonstaffheader {
	background: url(/_content/SkoolMAUI.Shared/css/assets/nonstaffbg.jpg);
	height: 90px;
	background-size: cover;
	background-position: center -63px;
	position: relative;
}

.nonstaffheader h2 {
	color: white;
	font-size: 19px;
	font-weight: 500;
	display: inline-block;
	margin: 0;
	position: absolute;
	bottom: 52px;
	left: 24px;
	line-height: 24px;
}

.nonstaffheader h2 span {
	display: block;
	font-weight: 400;
	font-size: 12px;
	background: #4cab4c;
	width: 95px;
	text-align: center;
	border-radius: 50px;
	margin-top: 7px;
}

.nonstaffdashnw {
	padding: 0 20px;
	margin-top: -40px;
}

.nonstafbtns .nonstafbtn {
	border-radius: 5px;
	padding: 9px 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	position: relative;
	z-index: 2;
}

.nonstafbtns .nonstafbtn img {
	width: 36px;
	height: 36px;
	background: white;
	padding: 1px;
	border-radius: 50%;
	position: absolute;
	left: 6px;
	border: 2px solid #06033cc7;
}

.nonstafbtns .nonstafbtn h3 {
	color: white;
	font-size: 14px;
	margin: 0;
	padding-left: 42px;
}

.nonstafbtns .nonstafbtn h3 span {
	display: block;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
}

.nonstagbothday {
	    position: relative;
    overflow: hidden;
	    padding: 4px 0;
}
	.nonstagbothday img {
		width: 90px !important;
		margin-right: 60px;
	}
	.nonstagbothday h6 {
		font-size: 16px;
		font-weight: 600;
		margin: 0;
	}
	.nonstagbothday .rz-carousel-pager-overlay .rz-carousel-pager-bottom {
		display: none !important;
	}

	.nonstagbothday 
	.nonstagbothday .media {
		position: relative;
		z-index: 2;
	}

.nonstagbothday .media img {
	height: 100px;
	width: 80px;
	border-radius: 5px;
	border: 3px solid #ff6262;
}

.nonstagbothday .media-body {
	margin-left: 9px;
	margin-top: 38px;
}

.nonstagbothday .media-body h5 {
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	text-transform: uppercase;
	margin: 0;
}

.rz-gravatar {
	height: 30px !important;
	width: 30px !important;
}

.rz-navigation-item-link img {
	height: 30px !important;
	width: 30px !important;
	border-radius: 50%;
	object-fit: cover;
}


.nonstagbothday .media-body h5 span {
	display: block;
	font-size: 13px;
	font-weight: 600;
}

/*non staff dashboard*/
.classubstff {
	background: white;
	border-radius: 5px;
	border-top: 1px solid #fb4040;
	padding: 10px;
	position: relative;
	margin-bottom: 10px;
}

.classubstff .clsubheader .srno {
	background: #5c5c5c;
	color: white;
	font-size: 12px;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	padding: 1px 0;
	text-align: center;
	font-weight: 600;
	position: absolute;
	left: 0px;
	top: -1px;
}

.classubstff .clsubheader h3 {
	font-weight: 500;
	font-size: 12px;
	background: #b5420c;
	padding: 0;
	border-radius: 13px;
	display: inline-block;
	margin-bottom: 3px;
	text-transform: uppercase;
	text-align: center;
	line-height: 19px;
	width: 50%;
	/* border: 2px solid #0059df; */
	margin-top: 18px;
	margin-right: 7px;
	color: white;
}


/*non staff profile*/
.staffprofile .staffshtinfon {
	    position: relative;
    min-height: 355px;
}
.staffprofile .card {
	position: relative;
}
.staff_act{
	height: 210px;
    overflow-y: scroll;
}
.staffproinfo h5{
font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    border-top: 1px solid #a9a9a9;
    padding-top: 13px;
    margin-top: 14px;
	    margin-top: 35px;
}
.staffproinfo h5 span{
	display: block;
    text-transform: capitalize;
    font-weight: 400;
    margin-top: 3px;
    font-size: 12px;
    color: grey;
}
.staff_act ul{
	    margin-top: 23px;
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

.staff_act li{
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    border-bottom: 1px solid #dbdbdb;
    margin: 4px 0;
    display: flex;
    justify-content: space-between;
}
.staff_act li span{
	border: 1px solid #8b2c2c;
    border-radius: 3px;
    display: inline-block;
    line-height: 22px;
    padding: 0 7px;
    background: #ffebeb;
    font-size: 12px;
}
.staffprofile .card h4 {
	font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    background: #2bb984;
    color: white;
    padding: 5px 14px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.staffprofile .col-md-6 {
	 position: relative;
}

.staffprofile .staffproinfo {
	     margin-top: 23px;
}

.staffprofile .staffproinfo ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.staffprofile .staffproinfo ul li {
	font-weight: 500;
	color: black;
	line-height: 27px;
}

.staffprofile .staffproinfo li strong {
	font-size: 14px;
    font-weight: 600;
    display: inline-block;
    width: 110px;
    color: black;
}

.staffprofile .staffproinfo li span {
	display: inline-block;
	width: 20px;
}

.staffprofile .staffproinfo li .text-right {
	    width: auto;
    font-weight: 400;
    font-size: 14px;
    color: #4c4a4a;
}

.staffshtinfon:after {
	content: '';
	position: absolute;
	background: linear-gradient(-180deg, #ffffffc7, #ffff0000), url(/_content/SkoolMAUI.Shared/css/assets/staffprofooter.png);
	height: 91px;
	width: 101px;
	left: -10px;
	background-size: contain;
	bottom: 0px;
	z-index: 1;
	background-repeat: no-repeat;
}

.staffproinfo:before {
	content: '';
	position: absolute;
	/*background: url(/_content/SkoolMAUI.Shared/css/assets/staffproinfo.png);*/
	height: 90px;
	width: 337px;
	left: 0;
	background-size: contain;
	bottom: 0;
	z-index: 1;
	background-repeat: no-repeat;
}

.designform h4 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 500;
}

.staffprofile {
	position: relative;
}
.navbar-dark .navbar-brand{
	display: inline-block;
    padding: 0;
}
.staffprofile h4 {
	font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    background: #2bb984;
    color: white;
    padding: 5px 14px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
	.staffprofile h4:after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		border-top: 27px solid #2bb984;
		border-right: 32px solid transparent;
		right: -31px;
		top: 0px;
	}
/*non staff profile*/

.msgbxnw th {
	background: #98339f;
	color: white;
}

.msgbxnw td {
	font-size: 14px;
	font-weight: 400;
	color: #585656;
}

.msgbxnw td .btn {
	padding: 2px 11px !important;
	border-radius: 25px !important;
	font-size: 11px !important;
}

.stufeeview .feeviewsingle {
	position: relative;
}

.stufeeview .feeviewsingle .stuadmno {
	position: absolute;
	background: #ff5959;
	color: white;
	padding: 4px 15px;
	text-transform: uppercase;
	font-weight: 600;
	left: 0;
	right: 0;
	width: 130px;
}

.stufeeview .feeviewsingle img {
	height: 178px;
	width: 135px;
	object-fit: cover;
	border-radius: 10px;
	border: 4px solid #ff5959;
	margin-bottom: 6px;
}

.stufeeview .feeviewsingle h3 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 17px;
	margin: 0;
}

.stufeeview .feeviewsingle h3 span {
	display: block;
	font-weight: 500;
	font-size: 13px;
}


.stufeeview .topfilters label {
	text-align: center;
	font-size: 14px;
	background: #b56730;
	/* padding: 0 30px; */
	width: 100%;
	color: white;
	border: 1px solid #c7c7c7;
}

.stufeeview .topfilters label span {
	display: block;
	background: white;
	color: black;
}

.stufeeview .feefooheader {
	background: #206a87;
	padding: 2px 2px;
	color: white;
	margin-top: 26px;
	text-align: center;
}

.stufeeview .feefooheader h4 {
	color: white;
	padding: 3px 0;
	font-size: 19px;
	margin: 0;
	text-transform: uppercase;
	font-weight: 600;
}

.stutimetable th {
	background: #01a17c;
    color: white !important;
    border: 1px solid #ffffff8f !important;
    padding: 4px 2px !important;
    font-weight: 500;
    width: 80px;
}

.stutimetable td {
	  padding: 2px 2px !important;
    position: relative;
    vertical-align: top;
    font-weight: 700;
    font-size: 10px;
    color: black;
    font-family: system-ui;
}

.stutimetable td span {
	display: block;
	font-weight: 500;
	background: #64172c14;
	padding: 2px 3px;
	color: #5c0404;
	border-radius: 3px;
	font-size: 8px;
	text-transform: capitalize;
	margin-top: 0px;
}

.stu_m_f {
	border-top: 1px solid #dbdbdb;
	margin-top: 4px;
	padding-top: 2px;
}
	.stu_m_f ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
.stu_m_f ul li {
	font-weight: 600;
	font-size: 12px;
	color: black;
	text-transform: uppercase;
	line-height: 16px;
}
.pgresponse{
	text-align: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pgresponse h2 {
	font-size: 18px;
	font-weight: 500;
}

.pgresponse {
	text-align: center;
}

.pgresponse img {
	    width: 70px;
}

.pgresponse h3 {
	    font-weight: 700;
    font-size: 25px;
    margin-bottom: 0px;
}
.pgresponse .payment_status p{
	    margin: 0;
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 15px;
}
.pgresponse .payment_status h4{
	    font-size: 16px;
    padding: 18px;
}
.pgresponse .payment_status h4 span{
	display: block;
    font-size: 31px;
    font-weight: 700;
    margin-top: 5px;
}
	.pgresponse .payment_status .p_bx {
		background: #f4f4f4;
		border-radius: 5px;
		padding: 10px;
		text-align: left;
		margin-bottom: 10px;
		border: 1px solid #d4d4d4;
	}
.pgresponse .payment_status .p_bx h6{
	 margin: 0;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pgresponse .payment_status .p_bx h6 span{
	        font-size: 14px;
    display: block;
    margin-top: 4px;
    font-weight: 600;
}
.pgresponse table {
	text-align: left;
	border-top: 1px solid #80808040;
}

.pgresponse table th {
	font-weight: 700;
}

.f_password_bx {
	background: antiquewhite;
	border-radius: 3px;
	padding: 3px 0;
	font-size: 12px;
	font-weight: 600;
	color: #bc3838;
	border: 1px solid #ad3a3a7a;
	display: inline-block;
	padding: 2px 12px;
	margin-bottom: 10px;
}
.stucirculars .stucirbox {
	background: white;
	padding: 5px;
	border-radius: 5px;
	border-top: 2px solid #6bcd42;
	margin-bottom: 17px;
	box-shadow: 0px 13px 35px -27px #000000;
	position: relative;
	background-image: linear-gradient(-64deg, #ffffffd1, #ffffff), url(/_content/SkoolMAUI.Shared/css/assets/stuinnerbg.png);
	background-size: cover;
	min-height: 133px;
}


.stucirculars .stucirbox h5 {
	font-weight: 500;
	font-size: 11px;
	font-style: italic;
	background: #c82cfb;
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	color: white;
	margin: 0;
}

.stucirculars .stucirbox h4 {
	    font-weight: 600;
    text-transform: capitalize;
    font-size: 16px;
    padding-top: 3px;
    padding-bottom: 0;
    margin-bottom: 3px !important;
}

.stucirculars .stucirbox p,
.stucirculars .stucirbox span {
	margin: 0;
	font-size: 13px !important;
}

.stucirculars .stucirbox p {
	height: 40px;
	overflow: hidden;
}

.rz-notification+p,
.rz-notification+span {
	font-size: 14px !important;
}

.stucirculars .stucirbtns {
	width: 100%;
    padding-top: 0;
    margin-top: 7px;
}

	.stucirculars .stucirbtns a,
	.stucirculars .stucirbtns button {
    font-weight: 400 !important;
    padding: 3px 8px !important;
    color: white !important;
    min-height: 28px !important;
	}


.stutchrs .stutchrbox {
	background: white;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 13px 35px -27px #000000;
	border-top: 2px solid #ff6767;
	margin-bottom: 15px;
}

.stutchrs .stutchrbox img {
	height: 90px;
	width: 90px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #5f9ea0;
	padding: 6px;
}

.stutchrs .stutchrbox h4 {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
}

.stutchrs .stutchrbox h4 span {
	display: block;
	font-size: 14px;
	text-transform: capitalize;
	background: #9f8404;
	max-width: 130px;
	margin: 4px auto 0;
	border-radius: 24px;
	padding: 2px 8px;
	color: white;
	font-weight: 400;
}


.stulibrary .stulibox {
	background: white;
	padding: 10px;
	border-radius: 5px;
	border-top: 2px solid #ff6b6b;
	position: relative;
	margin-bottom: 15px;
	box-shadow: 0px 13px 35px -27px #000000;
	background-image: linear-gradient(-64deg, #ffffff91, #ffffff), url(/_content/SkoolMAUI.Shared/css/assets/stuinnerbg.png);
	background-size: cover;
}

.stulibrary .stulibox .accno {
	position: absolute;
	left: 0;
	top: -2px;
	background: #5f9ea0;
	color: white;
	padding: 0px 7px;
	border-top-left-radius: 5px;
}

.stulibrary .stulibox .bookstus {
	position: absolute;
	top: -3px;
	right: 0px;
	background: #ff5464;
	color: white;
	padding: 0px 7px;
	border-top-right-radius: 5px;
}

.stulibrary .stulibox h3 {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 3px;
	margin-top: 17px;
}

.stulibrary .stulibox .stulibfotr {
	border-top: 1px solid #d9d9d9;
	padding-top: 4px;
	margin-top: 6px;
}

.stulibrary .stulibox .stulibfotr ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-style: italic;
}

.stulibrary .stulibox .stulibfotr li {
	font-size: 13px;
	font-weight: 500;
}

.stulibrary .stulibox .stulibfotr li strong {
	font-size: 13px;
	font-weight: 500;
}

.stupaymthisbox {
	background: white;
	padding: 10px;
	border-radius: 5px;
	padding-bottom: 0;
	margin-bottom: 15px;
	box-shadow: 1px 13px 13px -14px #b8b7b7;
}

.stupaymthisbox .timeprud {
	text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    background: #1273a5;
    color: white;
    display: inline-block;
    padding: 2px 16px;
    position: absolute;
    left: 0;
    top: -8px;
}

.stupaymthisbox ul {
	    margin: 0;
    padding: 0;
    list-style: none;
    padding: 0;
    margin-top: 14px;
}

.stupaymthisbox table {
	padding: 0;
	margin-bottom: 0 !important;
}

.stupaymthisbox table td {
	font-size: 12px;
	border: 0;
	font-weight: 500;
	color: #525151;
	vertical-align: baseline;
	padding: 1px 4px;
}

.stupaymthisbox table th {
	display: inline-block;
	width: 70px;
	padding: 2px 0;
	border: 0 !important;
	font-size: 13px;
}

.stupaymthisbox table td span {
	display: inline-block;
	width: 18px;
	border: 0 !important;
	padding: 2px 0;
}

.stupaymthisbox table td .text-right {
	width: auto;
}

.stupaymthisbox ul li {
	font-weight: 400;
	text-transform: none;
	font-size: 13px;
}

.stupaymthisbox ul li span {
	color: #545050;
}

.stupaymthisbox .stutranfooter {
	padding: 6px 0;
	display: block;
	width: 100%;
	margin-top: 10px;
	border-top: 1px solid #dddddd;
}

.stupaymthisbox .stutranfooter h5 {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 3px 0;
}

.stupaymthisbox .stutranfooter a {
	text-align: right;
	float: right;
}

.stutrnsbox {
	background: white;
	padding: 0;
	border-radius: 5px;
	border-left: 2px solid #ff6262;
}

.stutrnsbox .tranmode {
	text-align: center;
	border-bottom: 1px solid #d9d9d9;
	padding: 7px 0;
	text-transform: uppercase;
	font-weight: 700;
}

.stutrnsbox table {
	padding: 0;
	margin: 0;
}

.stutrnsbox table td {
	text-align: center;
}

.stutrnsbox table span {
	display: block;
	text-align: center;
}

.stupublicform {
	margin: 20px 0 0 0;
	border: 2px solid #50033a;
	padding: 20px;
	padding-top: 43px;
}

.sturegform .stusinglebox {
	background: #ffffff;
	margin-bottom: 24px;
	border-radius: 10px;
	padding: 10px;
	position: relative;
}

.sturegform .stusinglebox h4 {
	color: white;
	background: #084298;
	position: absolute;
	top: -16px;
	padding: 5px 22px !important;
	left: 13px;
	font-size: 13px;
	text-transform: uppercase;
}

.stusinglebox .form-group {
	margin-bottom: 15px;
}

.sturegform .stusinglebox input {
	font-size: 12px;
	font-weight: 500;
}

.parentpic {
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 9px 0;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	margin-bottom: 10px;
}

.parentpic img {
	height: 146px !important;
	width: 120px !important;
	object-fit: cover;
	border: 4px solid #fbbaba !important;
	position: relative;
	border-radius: 10px;
}

.regseatheader2 {
	position: absolute;
	top: -40px;
	background: #7938b9;
	font-size: 16px;
	color: white;
	font-weight: 500;
	border-radius: 0px;
	left: 50%;
	text-transform: uppercase;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/* text-align: center; */
	width: 331px;
	padding: 13px 12px;
}

.regseatmiddle h3 {
	font-weight: 600;
	font-size: 23px;
}

.regseatheader2 img {
	width: 100px;
	border-radius: 8px;
	border: 0;
	float: left;
	margin-right: 12px;
}

.regseatheader2 h5 {
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 0 !important;
	color: white;
}

.regseatheader2 h5 span {
	display: block;
	text-transform: capitalize;
	font-weight: 400;
	font-size: 15px;
	margin-top: 4px;
}

.regseatmiddle {
	background: white;
	padding: 13px 26px;
}

.regseatfooter {
	background: #ffe1bb;
	padding: 12px 0;
	border-top: 2px solid #996524;
}

.regseatfooter button {
	border-radius: 50px !important;
	padding: 0 28px !important;
	text-transform: uppercase;
}


.feepymntstu img {
	width: 98px;
	height: 129px;
	border-radius: 5px;
	border: 4px solid #ff8181;
}

.feepymntstu .media-body {
	margin-left: 17px;
}

.feepymntstu .media-body h2 {
	margin-bottom: 3px;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 600;
}

.feepymntstu .media-body h3 {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 0px;
	margin-top: 12px;
	border-top: 1px solid #e1e1e1;
	padding-top: 6px;
}

.feepymntstu .media-body h3 span {
	display: block;
	font-weight: 600;
	font-size: 16px;
}

.feepymntstu .media-body h4 {
	color: #ed0000;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 0;
	border-top: 1px solid #ff7676;
	border-bottom: 1px solid #ff9292;
	padding: 4px 0;
	margin-top: 9px;
}

.aftrlgnstu {
	position: relative;
	z-index: 2;
}

.regboxnew {
	background: white;
	padding: 27px;
	border-radius: 5px;
	text-align: center;
}

.regboxnew h5 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 18px;
}

.regboxnew h5 span {
	display: block;
	text-transform: capitalize;
	font-weight: 400;
	color: grey;
	font-size: 15px;
}

.regboxnewdsn {
	height: 100vh;
	padding: 10% 0;
	background: url(/_content/SkoolMAUI.Shared/css/assets/form-bg-new.png);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
}

.set_file {
	border: 1px solid #dddddd;
	padding: 0 10px;
}

.rz-paginator-pages .rz-paginator-element,
.rz-paginator-element {
	padding: 4px;
	min-height: 23px;
	min-width: 27px;
}


.publicheading h6 {
	color: white;
	font-weight: 500;
	font-size: 21px;
	margin-bottom: 4px;
}

.publicheading table {
	margin: 0;
	color: white;
}

.publicheading table td {
	padding: 3px 9px;
	border: 1px solid white;
	font-size: 14px;
}

.publicheading h6 span {
	display: block;
	font-size: 14px;
	margin-top: 5px;
}

.btn-proceed {
	background-color: #1150ad !important;
}

.btn-changephoto {
	background-color: #8f5e07 !important;
}

.btn-proceed:hover,
.btn-changephoto:hover {
	color: white;
}

.stuviewdtlnw,
.stuadddtlnw,
.stuparntnw {
	background: white;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 15px;
	/* border: 1px solid #afafaf; */
	box-shadow: 1px 1px 10px #28282842;
}

.stuviewdtlnw h4,
.stuadddtlnw h4,
.stuparntnw h4 {
	padding-top: 0 !important;
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 1px solid lightgrey;
}


.stuviewdtlnw li,
.stuadddtlnw li,
.stuparntnw li {
	font-weight: 400;
    font-size: 13px;
}
.stuviewdtlnw ul,
.stuadddtlnw ul,
.stuparntnw ul {
	margin: 0;
}
.stuviewdtlnw li strong,
.stuadddtlnw li strong,
.stuparntnw li strong {
	font-weight: 600;
	display: inline-block;
	width: 110px;
}

.stuviewdtlnw li span,
.stuadddtlnw li span,
.stuparntnw li span {
	display: inline-block;
	width: 12px;
}

.stuviewdtlnw li .auto-width,
.stuadddtlnw li .auto-width,
.stuparntnw li .auto-width {
	width: auto;
}

.stuothrntnw {
	background: white;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 10px #28282842;
}

.stuothrntnw h5 {
	font-size: 14px;
	font-weight: 600;
}

.stuothrntnw h5 span {
	display: block;
	font-size: 15px;
	border-top: 1px solid #c5c5c5;
	padding-top: 6px;
	margin-top: 7px;
}

.parentpicnw img {
	height: 170px;
	border-radius: 5px;
	width: 100%;
	object-fit: cover;
	border: 4px solid #ff8585;
}

.emgcontactnw {
	border: 1px solid #ff7171;
	padding: 15px;
	border-radius: 5px;
	margin: 10px 0;
}

.emgcontactnw h5 {
	font-size: 14px;
	font-weight: 600;
}

.emgcontactnw h5 span {
	display: inline-block;
	margin-left: 44px;
	text-align: left;
}

.stupronw {
	background: white;
	text-align: center;
	padding: 11px 0;
	border-radius: 5px;
	box-shadow: 1px 1px 10px #28282842;
}

.stupronw img {
	height: 123px;
	width: 127px;
	border-radius: 5px;
	border: 3px solid #ffb9b9;
	margin-bottom: 4px;
}

.stupronw h5 {
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
}

.stupronw h5 span {
	display: block;
	font-size: 12px;
	text-transform: capitalize;
	margin-top: 3px;
}

.publicName {
	background: #200040c2;
	padding: 6px 18px;
	text-align: center;
	margin-top: 20px;
	border-radius: 5px;
}

.publicName h6 {
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	color: white;
}

.publicName h6 span {
	display: block;
	/* text-transform: capitalize; */
	font-weight: 500;
	font-size: 14px;
	margin-top: 5px;
}

.publicName table {
	margin: 0;
	background: bisque;
}

.publicName table td {
	border: 1px solid grey;
	font-weight: 700;
	font-size: 13px;
	color: #0c0c0c;
}

.secwise {
	background: white;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 15px;
}

.table-responsive {
	position: relative;
}

.secwise h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
}

.secwise .rz-tabview-nav .rz-tabview-selected a {
	color: #fff !important;
	background: #1eacb7;
    border: 0 !important;
    transition: .4s;
}

.secwise .rz-tabview-nav li {
	border: 0;
	background: transparent !important;
}

	.secwise .rz-tabview-nav li a {
		display: block !important;
		color: #1d1d1d !important;
		padding: 9px 13px !important;
		min-width: 139px;
		border-radius: 50px;
		text-align: center;
		background: #ececec;
		font-weight: 500;
		font-size: 14px;
		text-transform: uppercase;
		box-shadow: none;
		transition: .4s;
	}

.secwise .rz-tabview-top,
.secwise .rz-tabview-nav .rz-tabview-selected {
	margin-bottom: 0;
	border: none !important;
	background: #2b313a00 !important;
}

	.secwise .rz-tabview-nav .rz-tabview-selected:after {
		content: "\f0d7";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		 color: #1eacb7;
		font-size: 35px;
		padding-right: 0;
		position: absolute;
		top: 15px;
		left: 57px;
	}

.secwise .rz-tabview-panels th {
	background: #0682a7;
	color: white;
	border: 1px solid #b9b5b5;
	padding: 5px 8px;
}

.secwise .rz-tabview-panels td {
	border: 1px solid #dddddd;
	padding: 1px 8px;
	font-weight: 600;
	text-align: left;
}

.tabletd td {
	padding: 3px 1px !important;
}

.tabletd td .rz-spinner {
	line-height: 13px !important;
	height: auto !important;
	padding: 4px 0 !important;
}

.feefooterleftsingle .rz-button-text {
	text-transform: uppercase;
	font-weight: 700;
	width: 100%;
	border-top: 1px solid #8080801f;
	padding: 9px 0;
	text-align: center;
}

.feefooterleftsingle img {
	    width: 60px;
    height: auto;
    padding: 0;
    object-fit: contain;
    border: 0;
    background: white;
}

.feefooterleftsingle span {
	display: none;
}

.feefooterleftsingle .rz-selectbutton .rz-button-text-only.rz-state-active {
	background-color: #db5f5f !important;
	border-color: #ff7a87 !important;
}


.feefooterleftsingle .rz-selectbutton .rz-button-text-only {
	min-width: 75px !important;
    display: flex !important;
}

.feefooterleftsingle .rz-selectbutton {
	padding: 0px 4px 1px;
}

.feefooterleftsingle .paygatesec {
	margin-top: 0px;
	text-align: center;
}

.feefooterleftsingle h2 {
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 15px;
	text-align: center;
	background: #5892e9;
	padding: 7px 0;
	color: white;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.commonsklname {
	text-align: center;
	width: 259px;
	padding: 0 15px;
	height: 150px;
	top: 0px;
	background: linear-gradient(45deg, #031228, #021634);
	padding: 6px 0;
	border-right: 4px solid #7c7c7c;
	border-top: 0;
	border-bottom: 3px solid #b55401;
}

.commonsklname img {
	width: 100px;
}

.commonsklname h4 {
	font-weight: 600;
	font-size: 20px;
	margin: 0;
	color: white;
}

.commonsklname h4 span {
	display: block;
	font-size: 14px;
}


.rz-panel-menu .rz-navigation-menu .rz-navigation-item:before {
	float: left;
    position: relative;
    top: 9px;
    left: 38px;
    z-index: 2;
}

.rz-panel-menu .rz-navigation-item {
	width: 100%;
	position: relative;
	font-size: 13px;
}

.rz-navigation-item-text {
	font-family: sans-serif;
}


.rz-navigation-item ul li {
	border-bottom: 1px solid #80808057;
	background: #132e56;
	width: 100%;
	transition: .4s;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
	background: none;
}

.rz-navigation-item ul li:hover {
	background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color);
	color: var(--rz-panel-menu-item-2nd-level-hover-color);
}

.rz-panel-menu .rz-navigation-item-active:before,
.rz-panel-menu .rz-navigation-item-wrapper-active:before {
	display: none;
}

.rz-navigation-item ul li .rz-navigation-item-wrapper-active {
	background-color: var(--rz-panel-menu-item-2nd-level-hover-background-color) !important;
	color: var(--rz-panel-menu-item-2nd-level-hover-color) !important;
}
.rz-profile-menu .rz-navigation-item ul li {
	border-bottom: 1px solid #80808057;
	background: #ffffff;
	width: 100%;
	transition: .4s;
	font-weight: 700;
	padding: 3px 10px;
}
.attnstatus .fa-check {
	color: green;
}

.attnstatus .fa-times {
	color: #9d0404;
}

.attnstatus .fa-onduty {
	color: purple;
}

.attnstatus .fa-leave {
	color: blue;
}

.attnstatus .fa-holiday {
	color: #f71090;
}

.attnstatus .fa-times-circle {
	color: red;
}

.attnstatus .fa-dash {
	color: black;
}

.attnstatus .fa-solid.fa-dash {
	color: #8c258b;
}

.fa-onduty:before {
	content: "\f007";
}

.fa-leave:before {
	content: "\f021";
}

.fa-holiday:before {
	content: "\f148";
}

.fa-dash:before {
	color: black;
	font-size: 8px !important;
}
.fa-solid.fa-dash:before {
	content: "\f05b";
}
.statusatt {
	margin: 31px 0 0;
	padding: 0;
	display: flex;
	list-style: none;
}
.statusatt li {
	margin-right: 22px;
    font-size: 15px;
    display: flex;
}
.statusatt li i{
	    position: relative;
    top: 3px;
    margin-right: 4px;
}
.fxt-template-layout13 {
	position: relative;
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
}

.fxt-template-layout13 {
	min-height: 100vh;
}

.fxt-template-layout13 .fxt-bg-wrap {
	padding: 3vw 1vw;
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 1199px) {
	.fxt-template-layout13 .fxt-bg-wrap {
		padding: 8vh 10vw 8vh 0;
	}
}

@media only screen and (max-width: 991px) {
	.fxt-template-layout13 .fxt-bg-wrap {
		padding: 6vh 6vw 6vh 0;
	}
}


.dashrightpanel .rz-body {
	margin-left: 0 !important;
	margin-top: 0 !important;
}

#stuportalcontent .header {
	padding: 0 20px 0px 0px;
	background: cadetblue;
}

.pagetitle2 {
	display: none;
}

.shownewbx {
	background: white;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.shownewbx .rollno {
	color: black;
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	font-style: italic;
}

.newbtnsflex {
	margin-top: 5px;
	border-top: 1px solid #8080803d;
}

.newbtnsflex button {
	display: inline-block;
	width: auto;
	margin-right: 6px;
	margin-top: 6px;
}

.shownewbx h4 {
	margin-bottom: 7px;
	font-size: 18px;
	font-weight: 500;
	border-bottom: 1px solid #80808061;
	padding-bottom: 3px;
}

.reg_bx {
	background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 28px;
    margin-left: 10px;
    margin-right: 10px;
}

.reg_bx .reg_status {
	text-align: center;
	display: inline-block;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.03em;
	border: 1px solid;
}

.reg_midd {
	display: flex;
	justify-content: center;
	align-items: center;
}

.reg_bx .reg_cl {
	background: #0a1994;
    color: white;
    padding: 0px 10px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    position: absolute;
    top: -15px;
    margin: 0 auto;
    display: inline-block;
    padding: 2px 10px;
    text-align: center;
    border-radius: 5px;
}

.reg_bx .reg_year {
	font-size: 15px;
	font-weight: 700;
	font-family: system-ui;
	margin-top: 3px;
	text-align: center;
}

.reg_ftr {
	text-align: center;
	border-top: 1px solid #80808069;
	margin-top: 8px;
	padding-top: 8px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.staffbtns .col-6{
		    padding-left: 6px;
    padding-right: 6px;
	}
@media only screen and (max-width: 767px) {
	.staffbtns .col-6{
		padding-left: 3px;
		padding-right: 3px;
	}
	.tab_bck_btn{
		bottom: 0;
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0;
        margin-left: 0 !important;
	}
	.tab_bck_btn button{
		width: 100%;
        margin: 0 !important;
	}
	article {
		padding-bottom: 50px;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 85px !important;
	}
	.ward_nme {
		margin-top: 0 !important;
	}

	.regtable {
		height: 100%;
		background: #e1e1e1;
	}

	.public_right .public_right_header {
		margin: 10px 10px 10px;
		padding-bottom: 16px !important;
		height: auto !important;
		overflow: visible;
	}

	.schooldetailnw {
		padding: 0 0px !important;
	}

	.public_left,
	.public_right {
		width: 100% !important;
		height: auto;
	}

	.public_leftpgo {
		height: auto;
		padding: 2% 5% 2% 5%;
	}

	.publicName {
		position: relative;
	}

	.public_left h4 {
		margin: 0px 0 !important;
	}

	.publicnotice:after {
		display: none;
	}

	.sbg5 {
		margin-bottom: 12px !important;
	}

	.roll_no_stu {
		position: unset;
		width: 100%;
		top: 0;
		right: 0;
		padding: 0;
		height: auto;
		border: 0;
	}

	.roll_no_stu span {
		display: inline-block;
	}

	.pagetitle {
		display: none;
	}

	.pagetitle2 {
		display: block;
	}

	.pagetitle2 h5 {
		margin: 4px 0;
		font-size: 13px;
		font-weight: 600;
	}
	.caltable th {
		padding: 6px 5px;
	}

	#stuportalcontent .sklnmlogo {
		padding-left: 22% !important;
	}
	.stunotifixheight {
		height: 170px;
	}
	.staffnoti .marquee-container1, .marquee-container1 {
		height: 180px!important;
	}
	 .mbtnresstu {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 123;
	}
	.dashrightpanel {
		padding-right: 0;
	}
	#stuportalcontent {
		margin-left: 0% !important;
		margin-top: 8px !important;
	}
	.fxt-template-layout13 .fxt-bg-wrap {
		padding: 5vh 4vw;
		display: none;
	}
	.loginarea {
		margin: 3% 0% !important;
		height: 100vh !important;
		padding: 30% 0% !important;
	}
	.fxt-template-layout13 .fxt-content {
		padding: 24px !important;
	}
	.fxt-template-layout13 {
		height: auto !important;
		min-height: auto !important;
	}
}

.fxt-template-layout13 .fxt-checkbox-area {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 30px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.fxt-template-layout13 .fxt-bg-color {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 55px 0;
}

.fxt-template-layout13 .fxt-bg-color:before {
	content: '';
	background: url(/_content/SkoolMAUI.Shared/css/assets/c1-c2.png);
	background-size: contain;
	height: 144px;
	width: 111px;
	position: absolute;
	left: -22px;
	background-repeat: no-repeat;
	bottom: -22px;
}

@media only screen and (max-width: 991px) {
	.fxt-template-layout13 .fxt-bg-color {
		padding: 15px;
	}
}

@media only screen and (max-width: 767px) {
	.studash-fee-popup{
		width: 100%!important;
		min-width: 100%!important;
	}
	.fxt-template-layout13 .fxt-bg-color {
		min-height: 100%;
		padding: 20px 30px;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

@media only screen and (max-width: 991px) {
	.fxt-template-layout13 .fxt-bg-img {
		padding: 30px 20px;
	}
}

@media only screen and (max-width: 991px) {
	.fxt-template-layout13 .fxt-bg-img {
		padding: 30px;
	}
}

.fxt-template-layout13 .fxt-header {
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	justify-content: center;
	text-align: center;
}

.fxt-template-layout13 .fxt-header .fxt-logo {
	display: block;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	max-width: 40vw;
}

.fxt-template-layout13 .fxt-header h1 {
	color: #fff;
	font-size: 36px;
	font-weight: 500;
	margin-bottom: 10px;
}

@media only screen and (max-width: 991px) {
	.fxt-template-layout13 .fxt-header h1 {
		font-size: 30px;
	}
}

@media only screen and (max-width: 767px) {
	.fxt-template-layout13 .fxt-header h1 {
		font-size: 28px;
	}
}

.fxt-template-layout13 .fxt-header p {
	color: #fff;
}

.fxt-template-layout13 .fxt-content {
	padding: 20px;
	max-width: 410px;
	width: 100%;
	background: white;
	border-radius: 8px;
	box-shadow: 5px 5px 5px #505050;
	margin: 0 auto;
}

@media only screen and (max-width: 1199px) {
	.fxt-template-layout13 .fxt-content {
		padding: 0;
	}
}

.fxt-template-layout13 .fxt-form {
	margin-top: 10px;
}

.fxt-template-layout13 .fxt-form form {
	margin-bottom: 0px;
}

.fxt-template-layout13 .fxt-form .fxt-otp-logo {
	margin-bottom: 20px;
	display: block;
}

.fxt-template-layout13 .fxt-form .fxt-otp-label {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 500;
}

.fxt-template-layout13 .fxt-form p {
	font-size: 18px;
	color: #111111;
}

.fxt-template-layout13 .fxt-form p span {
	display: block;
}

.fxt-template-layout13 .fxt-form .form-group {
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
}

.fxt-template-layout13 .fxt-form .form-group .input-label {
	margin-bottom: 10px;
}

.fxt-template-layout13 .fxt-form .form-group .field-icon {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 18px;
	padding: 0 5px;
	color: #ff8c8c;
	font-size: 14px;
}

.fxt-template-layout13 .fxt-form .form-group .field-icon:before {
	padding: 17px 10px;
}

.fxt-template-layout13 input {
	min-height: 45px;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-bottom: 1px solid #e7e7e7 !important;
	padding: 12px 12px 12px 34px !important;
	color: #111 !important;
	background: #eeccff !important;
	border-radius: 7px !important;
	width: 100%;
}

.fxt-template-layout13 .fxt-form input::-webkit-input-placeholder {
	color: #a1a1a1;
	font-size: 15px;
	font-weight: 300;
}

.fxt-template-layout13 .fxt-form input::-moz-placeholder {
	color: #a1a1a1;
	font-size: 15px;
	font-weight: 300;
}

.fxt-template-layout13 .fxt-form input:-moz-placeholder {
	color: #a1a1a1;
	font-size: 15px;
	font-weight: 300;
}

.fxt-template-layout13 .fxt-form .fxt-form-row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 25px;
}

.fxt-template-layout13 .fxt-form .fxt-form-row .fxt-form-col {
	padding: 10px 5px;
	text-align: center;
	margin-right: 10px;
	flex-basis: 0;
	flex-grow: 1;
}

.fxt-template-layout13 .fxt-form .fxt-form-row .fxt-form-col:last-child {
	margin-right: 0;
}

.fxt-template-layout13 .fxt-form .fxt-form-btn {
	margin-bottom: 10px;
}

.fxt-template-layout13 .fxt-btn-fill {
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
	display: inline-block;
	font-size: 17px;
	font-weight: 500;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
	border: 0;
	color: #fff;
	background-color: #3e6be0 !important;
	margin-bottom: 0px;
	width: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.fxt-template-layout13 .rz-button {
	padding: 9px 36px !important;
	min-height: auto !important;
	line-height: normal !important;
}

.fxt-template-layout13 .fxt-btn-fill:hover {
	background-color: #153fad;
	border-color: #153fad;
}

.fxt-template-layout13 .fxt-btn-fill:focus {
	outline: none;
}


.fxt-template-layout13 .switcher-text {
	color: #63bbff;
	font-size: 15px;
	margin-bottom: 5px;
	display: block;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.fxt-template-layout13 .switcher-text:hover {
	color: #000000;
}

.fxt-template-layout13 .switcher-text2 {
	color: #63bbff;
	font-size: 15px;
	display: inline-block;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.fxt-template-layout13 .switcher-text2.inline-text {
	margin-left: 3px;
}

.fxt-template-layout13 .switcher-text2:hover {
	color: #000000;
}

.fxt-template-layout13 .checkbox {
	padding-left: 5px;
	margin-right: 30px;
	margin-bottom: 5px;
}

.fxt-template-layout13 .checkbox label {
	padding-left: 20px;
	color: #a4a4a4;
	margin-bottom: 0;
	font-size: 15px;
	position: relative;
}

.fxt-template-layout13 .checkbox label:before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 4px;
	left: 0;
	margin-left: -5px;
	border: 1px solid;
	border-color: #dcdcdc;
	border-radius: 3px;
	background-color: #fff;
	-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
	transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.fxt-template-layout13 .checkbox label:after {
	position: absolute;
	margin-left: -20px;
	padding-left: 3px;
	font-size: 10px;
	color: #555555;
}

.fxt-template-layout13 .checkbox input[type="checkbox"] {
	display: none;
}

.fxt-template-layout13 .checkbox input[type="checkbox"]:checked+label::after {
	font-family: 'Font Awesome 5 Free';
	content: "\f00c";
	font-weight: 900;
	color: #ffffff;
	left: 15px;
	top: 4px;
}

.fxt-template-layout13 .checkbox input[type="checkbox"]:checked+label::before {
	background-color: #009BB6;
	border-color: #009BB6;
}

.fxt-template-layout13 .fxt-footer {
	text-align: center;
}

.fxt-template-layout13 .fxt-footer img {
	width: 130px;
}

.fxt-template-layout13 .fxt-footer p {
	margin: 0;
	font-weight: 500;
	font-size: 12px;
	color: #2a2a2a;
}


.fxt-template-layout13 .fxt-footer .fxt-resend-wrap {
	margin-bottom: 10px;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 18px;
	width: 100%;
}

.fxt-template-layout13 .fxt-footer .fxt-btn-resend {
	margin-left: 3px;
	box-shadow: none;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	color: #63bbff;
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}

.fxt-template-layout13 .fxt-footer .fxt-btn-resend:focus {
	outline: none;
}

.fxt-template-layout13 .fxt-footer .fxt-btn-resend:hover {
	color: #000000;
}

.fxt-template-layout13 .fxt-footer .text-or {
	margin-left: 3px;
	color: #000000;
}

.fxt-template-layout13 .rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
	box-shadow: none !important;
	border: 1px solid #6a6a6a !important;
	padding: 0 0 0 33px !important;
}

.loginarea {
	background: #f5f5f5;
	margin: 50px 14%;
	position: relative;
}

.schooldetailnw {
	text-align: center;
	padding: 0 50px;
	border-bottom: 1px solid #80808061;
	margin-bottom: 15px;
	padding-bottom: 10px;
}

.nwshape1 {
	background: #f6b71e;
	height: 54px;
	width: 200px;
	position: absolute;
	right: 10px;
	bottom: 0px;
}

.schooldetailnw img {
	width: 90px;
	margin-bottom: 4px;
}

.schooldetailnw h2 {
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	color: #0a3195;
	line-height: 17px;
	margin-bottom: 5px;
}


.schooldetailnw h2 span {
	font-weight: 500;
	font-size: 13px;
	text-transform: capitalize;
	margin-top: 3px;
	display: block;
}

.admloghead {
	display: inline-block;
	background: #3d69dc;
	padding: 10px 20px;
	position: absolute;
	left: 0;
	z-index: 2;
}

.admloghead h3 {
	margin: 0;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 600;
	color: white;
	display: inline-block;
}

/*admin lgin profile*/

.stumessagebox {
	background: white;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 16px;
	min-height: 145px;
}

.stumessagebox a,
.stumessagebox button {
	padding: 4px 16px !important;
	min-height: 32px;
	border-radius: 50px !important;
	text-transform: uppercase;
	font-weight: 400 !important;
	font-size: 13px !important;
}

.stumessagebox h5 {
	font-weight: 500;
	font-size: 17px;
	margin-bottom: 3px;
}

.stumessagebox h5 span {
	margin-bottom: 2px;
	font-weight: 500;
	font-size: 13px;
	font-style: italic;
	background: #817fff;
	display: block;
	padding: 3px 10px;
	border-radius: 17px;
	color: white;
	width: 100px;
	text-align: center;
}

.stumessagebox p {
	color: #6e6e6e;
	font-size: 14px;
	font-weight: 400;
	height: 44px;
	overflow: hidden;
}

.dashleftpanel li {
	border-bottom: 1px solid #ffffff1f !important;
}

.hideContent {
	overflow: hidden;
	line-height: 1em;
	height: 2em;
}

.showContent {
	line-height: 1em;
	height: auto;
}

.circularboxinner p {
	height: 43px;
	overflow: hidden;
}

.captchnw div {
	font-family: 'Times New Roman';
	border: 1px solid #80808054;
	min-height: 45px;
	border-radius: 6px;
	width: 100%;
	margin-left: 0 !important;
}

.right-align-table-num td {
	text-align: right !important;
}

.right-align-table-num tr td:first-child {
	text-align: left !important;
}

.tableform-control input {
	min-height: 26px !important;
	padding: 2px 6px !important;
}

.groupmodal input {
	min-height: 26px !important;
	padding: 2px 6px !important;
}

.groupmodal .rz-dropdown {
	height: 26px !important;
	padding: 2px 6px !important;
}

.groupmodal td {
	padding: 2px 8px !important;
}


.libtable table,
.booktable table {
	margin: 0;
}

.libtable {
	border: 2px solid #288b94;
}

.libtable th {
	background: #288b94 !important;
	font-weight: 600;
	font-size: 12px;
	color: white;
}

.libtable .rz-grid-table thead th .rz-column-title {
	font-size: 12px !important;
	padding: 0px 4px !important;
	max-height: 20px;
}

.libtable input {
	padding: 0 0 !important;
	max-height: 24px !important;
}

.libtable .rz-cell-filter {
	padding: 0px 5px !important;
}

.libtable .rz-cell-filter-label {
	height: 33px !important;
}

.libtable .rz-spinner {
	height: 25px;
}

.libtable .rz-spinner button {
	display: none;
}

.libtable td {
	padding: 3px 5px !important;
	font-weight: 500;
	font-size: 11px;
}

.booktable {
	border: 2px solid #9f5f00;
}

.booktable th {
	background: #9f5f00 !important;
	font-weight: 600;
	font-size: 12px;
	color: white;
}

.booktable td {
	padding: 3px 5px !important;
	font-weight: 500;
	font-size: 11px;
}

.booktable .rz-grid-table thead th .rz-column-title {
	font-size: 12px !important;
	padding: 0px 4px !important;
	max-height: 20px;
}

.booktable input {
	padding: 0 0 !important;
	max-height: 24px !important;
}

.booktable .rz-spinner {
	height: 25px;
}

.booktable .rz-spinner button {
	display: none;
}

.booktable .rz-cell-filter {
	padding: 0px 5px !important;
}

.booktable .rz-cell-filter-label {
	height: 33px !important;
}

.bookdetail {
	border: 2px solid #288b94;
	background: #f5feff;
	min-height: 156px;
}

.bookdetail h5 {
	margin: 0;
	padding: 4px 8px;
	font-weight: 500;
	font-size: 14px;
	background: #288b94;
	color: white;
	text-transform: uppercase;
}

.bookdetail h6 {
	background: none;
	padding: 13px 20px;
	font-size: 22px;
	color: red;
	font-weight: 700;
	text-transform: uppercase;
}

.bookdetail .bookdtlname {
	border-left: 2px solid red;
	padding-left: 9px;
	margin: 6px 21px;
}

.bookdetail .bookdtlname h2 {
	font-size: 12px;
	font-weight: 500;
	color: #545454;
	margin: 0;
}

.bookdetail .bookdtlname h2 span {
	display: block;
	font-size: 16px;
	color: black;
}

.memdetail {
	border: 2px solid #7f9362;
    margin-bottom: 10px;
    min-height: 158px;
	position: relative;
}

.memdetail h5 {
	margin: 0;
	padding: 4px 8px;
	font-weight: 500;
	font-size: 14px;
	background: #7f9362;
	color: white;
	text-transform: uppercase;
}

.memdetail img {
	height: 114px;
    width: 95px;
    border: 1px solid grey;
    border-radius: 7px;
    float: left;
    margin: 4px 5px;
	object-fit: cover;
}

.memdetail .membxdtl {
	padding-left: 8px;
    margin: 10px 0px 10px 100px;
    overflow: hidden;
}

.memdetail .membxdtl h1 {
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
}

.memdetail .membxdtl h5 {
	background: none;
	color: black;
	padding: 0;
}

.memdetail .membxdtl h5 span {
	display: block;
}
.libfinalcheck span{
	margin-left: 5px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    top: -1px;
}
.book_cover{
	background: white;
    border: 2px solid #156dc9;
    padding: 5px;
}
.info_books{
	position: absolute;
    right: 4px;
    top: 0;
    font-weight: 400;
    color: white;
    border: 1px solid white;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 13px;
}
.info_books a{color: white;}
.pendingbooks {
	border: 1px solid #c75b8c;
	min-height: 156px;
}

.libtable .rz-data-grid,
.booktable .rz-data-grid,
.pendingbooks .rz-data-grid {
	border: 0;
}

.pendingbooks h2 {
	margin: 0;
	padding: 4px 8px;
	font-weight: 500;
	font-size: 14px;
	color: black;
}

.pendingbooks table {
	margin: 0;
}

.pendingbooks th {
	background: #c33173 !important;
	font-weight: 600;
	font-size: 12px;
	padding: 3px 6px;
	color: white;
}

.pendingbooks .rz-grid-table thead th .rz-column-title {
	font-size: 12px !important;
	padding: 0px 4px !important;
	max-height: 20px;
}

.pendingbooks input {
	padding: 0 0 !important;
	max-height: 24px !important;
}

.pendingbooks .rz-spinner {
	height: 25px;
}

.pendingbooks .rz-spinner button {
	display: none;
}

.pendingbooks .rz-cell-filter {
	padding: 0px 5px !important;
}

.pendingbooks .rz-cell-filter-label {
	height: 33px !important;
}

.pendingbooks td {
	padding: 3px 5px !important;
	font-weight: 500;
	font-size: 11px;
}

.lastbookstrans h2 {
	margin: 0;
	padding: 4px 8px;
	font-weight: 500;
	font-size: 14px;
	color: black;
}


.lastbookstrans th {
	background: #414ca0 !important;
	font-weight: 600;
	font-size: 12px;
	padding: 3px 6px;
	color: white;
}

.lastbookstrans .rz-grid-table thead th .rz-column-title {
	font-size: 12px !important;
	padding: 1px 4px !important;
}

.lastbookstrans input {
	padding: 0 0 !important;
	max-height: 24px !important;
}

.lastbookstrans .rz-spinner {
	height: 25px;
}

.lastbookstrans .rz-spinner button {
	display: none;
}

.lastbookstrans .rz-cell-filter {
	padding: 0px 5px !important;
}

.lastbookstrans .rz-cell-filter-label {
	height: 33px !important;
}

.lastbookstrans td {
	padding: 3px 5px !important;
	font-weight: 500;
	font-size: 11px;
}


.libfinalbtns button {
	padding: 4px 12px !important;
	min-height: 26px;
}

.libdate .input-group-text {
	font-size: 13px;
	border-radius: 0px;
	font-weight: 600;
	border: 0;
}

.libdate input {
	font-size: 12px;
	border-radius: 0px;
	font-weight: 600;
}

.topcdef td:nth-child(3),
.topcdef td:nth-child(4) {
	text-align: right;
}

.staffpat td:nth-child(4) {
	text-align: right;
}

.table> :not(:last-child)> :last-child>* {
	text-align: center;
}


.stufeeviewnw {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	padding: 12px;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Row with Equal Heights */
.fee-receipt-view-row {
	display: flex;
	align-items: stretch;
}

.fee-receipt-view-row > div {
	display: flex;
	flex-direction: column;
}

/* Student Card Header with Admission Number */
.student-card-header-info {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 8px 12px;
	border-radius: 8px 8px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
}

.student-card-header-info:hover {
	box-shadow: 0 5px 18px rgba(102, 126, 234, 0.4);
}

.stufeeviewnw h1 {
	color: white;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	flex: 1;
}

.stufeeviewnw h1 i {
	margin-right: 6px;
	font-size: 13px;
	animation: pulse 2s infinite;
}

.admission-number-badge {
	background: rgba(255, 255, 255, 0.25);
	color: white;
	padding: 4px 12px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
}

.admission-number-badge i {
	font-size: 11px;
}

/* Student Card Body */
.student-card-body {
	padding: 12px;
}

.student-photo-view {
	width: 80px;
	height: 90px;
	object-fit: cover;
	float: left;
	border-radius: 10px;
	border: 3px solid #667eea;
	box-shadow: 0 3px 12px rgba(102, 126, 234, 0.25);
	transition: all 0.3s ease;
	margin-right: 12px;
}

.student-photo-view:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 18px rgba(102, 126, 234, 0.35);
}

.stufeeviewnw .stufeetdlinner {
	margin-top: 8px;
	margin-bottom: 8px;
}

.stufeeviewnw .stufeetdlinner h2 {
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: #2d3748;
	line-height: 1.3;
}

.stufeeviewnw .stufeetdlinner h2 i {
	color: #667eea;
	margin-right: 6px;
	font-size: 14px;
}

.student-class-info {
	font-size: 12px;
	color: #4a5568;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-radius: 6px;
	display: inline-flex;
}

.student-class-info i {
	color: #f5576c;
	font-size: 11px;
}

/* Receipt Amount - Single Line at Bottom */
.receipt-amount-single {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 2px solid #667eea;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	padding: 10px 14px;
	border-radius: 8px;
	box-shadow: 0 3px 12px rgba(245, 87, 108, 0.3);
	animation: pulse-glow 2s infinite;
}

.amount-label {
	color: white;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 0.5px;
}

.amount-label i {
	font-size: 16px;
}

.amount-value-single {
	color: white;
	font-size: 20px;
	font-weight: 800;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Details Container with Equal Height */
.fee-receipt-details-container {
	display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-between;
}

.stufeeviewnw .stufeedtlnw {
	background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border: 2px solid #667eea;
    padding: 12px 12px;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    transition: all 0.3s ease;
    flex: 1;
}

.stufeeviewnw .stufeedtlnw:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
	border-color: #764ba2;
}

.stufeeviewnw .stufeeleft {
	border: 2px solid #667eea;
	border-radius: 12px;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	box-shadow: 0 3px 12px rgba(102, 126, 234, 0.2);
	overflow: hidden;
	transition: all 0.3s ease;
	height: 100%;
}

.stufeeviewnw .stufeeleft:hover {
	box-shadow: 0 5px 18px rgba(102, 126, 234, 0.3);
	transform: translateY(-2px);
}

.stufeeviewnw .stufeedtlnw ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stufeeviewnw .stufeedtlnw ul li {
	color: #2d3748;
	font-weight: 600;
	text-transform: capitalize;
	padding: 3px 0;
	transition: all 0.2s ease;
	line-height: 1.5;
	font-size: 11px;
}

.stufeeviewnw .stufeedtlnw ul li i {
	color: #667eea;
	margin-right: 6px;
	font-size: 11px;
}

.stufeeviewnw .stufeedtlnw ul li span {
	width: 90px;
	display: inline-block;
	font-size: 11px;
}

.stufeeviewnw .stufeedtlnw ul li .auto-width {
	margin-left: 6px;
	color: #1a202c;
	font-weight: 700;
}

.stufeeviewnw .totalamountfee h1 {
	background: linear-gradient(135deg, #e06b63 0%, #ed7067 100%);
    margin: 0;
    font-weight: 600;
    color: white;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 13px;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(245, 87, 108, 0.4);
    transition: all 0.3s ease;
    display: inline-table;
	text-align: center;
	line-height: 16px;
}

.stufeeviewnw .totalamountfee h1:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 22px rgba(245, 87, 108, 0.5);
}

.stufeeviewnw .totalamountfee h1 i {
	margin-right: 6px;
	font-size: 16px;
	animation: bounce 2s infinite;
}

.stufeeviewnw .totalamountfee h1 span {
	display: block;
	font-size: 20px;
	font-weight: 700;
	margin-top: 4px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}


.notdetail .notdate {
	font-weight: 500;
	font-size: 14px;
	font-style: italic;
}

.notdetail h1 {
	font-size: 20px;
	font-weight: 700;
}

.notdetail p {
	margin: 0;
}

.stunbwbox2 {
	background: white;
	padding: 5px;
	border-radius: 5px;
	border-top: 1px solid #ff6262;
	position: relative;
	margin-bottom: 10px;
}

.stunbwbox2 h2 {
	background: white;
	padding: 5px;
	border-radius: 5px;
	border-top: 1px solid #ff6262;
	position: relative;
	margin-bottom: 10px;
}

.stunbwbox2 ul {
	padding: 0;
	margin-bottom: 6px;
	list-style: none;
}

.stunbwbox2 ul li {
	font-size: 11px;
	font-weight: 500;
	color: #484848;
	text-transform: uppercase;
}

.stunbwbox2 ul li strong {
	font-weight: 700;
	width: 85px;
	display: inline-block;
}

.stunbwbox2 ul li span {
	display: inline-block;
	width: 6px;
}

.stunbwbox {
	background: white;
	padding: 5px;
	border-radius: 5px;
	border-top: 1px solid #ff6262;
	position: relative;
	margin-bottom: 10px;
	min-height: 145px;
}

.stunbwbox .admno {
	background: #ffece9;
	display: inline-block;
	color: #e14141;
	padding: 2px 7px;
	font-weight: 700;
	border-radius: 3px;
	font-size: 11px;
	line-height: normal;
	border: 1px solid #e75454;
	text-transform: uppercase;
	margin-bottom: 3px;
}

.stunbwbox .classnw {
	background: #505050;
	color: white;
	display: inline-block;
	position: absolute;
	right: 0;
	top: -1px;
	padding: 1px 8px;
	font-weight: 500;
	font-size: 12px;
}

.stunbwbox h2 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
	margin-top: 3px;
}

.stunbwbox ul {
	padding: 0;
	margin-bottom: 6px;
	list-style: none;
}

.stunbwbox ul li {
	font-size: 11px;
	font-weight: 500;
	color: #484848;
	text-transform: capitalize;
}

.stunbwbox ul li strong {
	font-weight: 700;
	width: 85px;
	display: inline-block;
}

.stunbwbox ul li span {
	display: inline-block;
	width: 6px;
}

.stunbwbox .stuboxstatus {
	color: #f75e5e;
	border: 3px solid #ff8080;
	padding: 3px 2px;
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
	border-radius: 5px;
	display: inline-block;
	position: absolute;
	right: 10px;
}

.stunbwbox .stunwfootr {
	border-top: 1px solid lightgrey;
	padding-top: 6px;
}


.stunbwbox .col-md-9 {
	padding-right: 4px;
}

.stunbwbox .col-md-3 {
	padding-left: 4px;
}

.stunbwbox2 .admno {
	color: #870e87;
	background: #870e871c;
	display: inline-block;
	border: 1px solid #d743e9a1;
	padding: 2px 5px;
	font-weight: 700;
	border-radius: 3px;
	font-size: 11px;
	line-height: normal;
	text-transform: uppercase;
}

.stunbwbox2 .classcheckbox {
	position: absolute;
	right: 4px;
	top: 4px;
}

.stunbwbox2 h3 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 3px;
	margin-top: 3px;
	border-bottom: 1px solid #80808073;
	padding-bottom: 5px;
}

.stunbwbox2 ul {
	padding: 0;
	margin-bottom: 6px;
	list-style: none;
}

.stunbwbox2 ul li {
	font-size: 11px;
	font-weight: 500;
	color: #484848;
	text-transform: uppercase;
}

.stunbwbox2 ul li strong {
	font-weight: 700;
	width: 50px;
	display: inline-block;
}

.stunbwbox2 ul li span {
	display: inline-block;
	width: 6px;
}

.publicreghead .media .media-body h5 {
	color: white;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0;
	line-height: 23px;
}
.publicreghead.pub {
	top: -16%;
}
.publicreghead .media .media-body h5 span {
	display: block;
	text-transform: capitalize;
	font-weight: 300;
	font-size: 14px;
}
.libtable .rz-paginator-element,
.booktable .rz-paginator-element {
	padding: 0;
	font-size: 10px;
	display: inline-block;
	min-height: 8px !important;
	min-width: 17px;
	line-height: normal;
}

.libtable .rz-paginator-icon,
.booktable .rz-paginator-icon {
	font-size: 12px;
	height: auto;
	width: auto;
	line-height: normal;
	padding: 2px 2px;
}

.libtable .rz-paginator,
.booktable .rz-paginator {
	padding: 2px 2px;
}

.leavedetailstaffnw {
	box-shadow: 0px 14px 23px -14px grey;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #ffeeff;
}

.leavedetailstaffnw h5 {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 5px 0;
	background: #7669b7;
	margin-bottom: 0;
	text-align: center;
	color: white;
}

.leavedetailstaffnw .row {
	padding: 7px 10px;
}

.leavedetailstaffnw ul {
	margin: 0;
	padding: 0;
}

.leavedetailstaffnw li {
	font-size: 13px;
}

.leavedetailstaffnw li strong {
	width: 70px;
	display: inline-block;
}

.leavedetailstaffnw li span {
	margin-left: 15px;
}


.happybirthdaybxstu img {
	width: 100%;
	margin-top: 0;
}

.happybirthdaybxstu h6 {
	text-align: center;
	font-weight: 600;
	font-size: 21px;
	margin: 0;
	margin-top: 7px;
}

.happybirthdaybxstu h6 span {
	display: block;
	font-size: 13px;
}

.stuprohdr img {
	border-radius: 5px 5px 0px 0px;
	height: 132px;
	width: 100%;
	object-fit: cover;
	object-position: center -122px;
	position: relative;
}
.studash h5{
	text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    margin: 0;
    border-top: 1px solid #d5d5d5;
    margin-top: 10px;
    padding-top: 10px;
}
.studash h5 span{
	    display: block;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 14px;
    color: #4a4a4a;
    margin-top: 4px;
}
.nstubox {
	background: white;
}
.stu_ad_pro{
	background: #eb4848;
    color: white;
    display: block;
    max-width: 168px;
    margin: 0 auto;
    position: relative;
    top: -17px;
    padding: 0px 0;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
}
.nstubox img {
    width: 108px;
    height: 127px;
    object-fit: cover;
    border: 4px solid #ff8989;
    position: relative;
}
.stuprntbx .table{
	margin: 0;
    margin-top: 20px !important;
}
.nstubox h4 {
	margin-bottom: 0 !important;
    font-weight: 700;
    font-size: 21px;
    margin-top: 0;
    padding-bottom: 0 !important;
}
.stu_f_w{
	min-width: 25px;
}
.nstubox h4 span {
	    display: block;
    font-weight: 500;
    font-size: 13px;
    color: #494949;
    margin-top: 4px;
}


.ttboxdetailR {
	border-color: red;
	font-size: 6pt !important;
	/* width:245px;*/
}

.ttboxdetail {
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: 700;
	/* background: #dc354554; */
	color: #830b0b;
	padding: 1px 1px !important;
	border-radius: 3px;
	position: relative;
}
.public_leftpgo .r_steps {
	border: 1px solid white;
	border-radius: 5px;
	margin-top: 14px;
	margin-bottom: 5px;
}
.public_leftpgo h1 {
	color: #ffa000;
	font-size: 28px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 2px;
	position: relative;
	display: block;
}
.public_leftpgo h6 {
	color: white;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 2px;
	text-transform: uppercase;
}
.public_leftpgo p {
	color: #ffffff;
	margin: 0 17px;
	margin-top: 2px;
}
.public_leftpgo .n_bx {
	background: beige;
	padding: 5px;
	border-radius: 5px;
	margin-top: 4px;
}
	.public_leftpgo .n_bx h3 {
		background: none;
		color: black;
		font-weight: 600;
		font-size: 17px;
		padding: 0;
	}
	.public_leftpgo .n_bx ul {
		color: black;
	}
		.public_leftpgo .n_bx ul li {
			list-style: auto;
		}
.public_leftpgo h5 {
	color: white;
	text-transform: capitalize;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 3px;
	padding: 4px 0;
	border-bottom: 1px solid white;
	display: block;
}
.public_leftpgo ul {
	margin-bottom: 10px;
	color: white;
	text-align: left;
	padding-left: 23px;
	width: 100%;
}
	.public_leftpgo ul li {
		font-size: 13px;
		font-weight: 500;
		margin-bottom: 8px;
	}
		.public_leftpgo ul li span {
			display: block;
			font-weight: 300;
			color: #ededed;
		}
.public_leftpgo h3 {
	margin: 0;
	background: #3f075e;
	color: #ffffff;
	display: inline-block;
	padding: 8px 18px;
	font-size: 17px;
	margin-top: 0em !important;
	text-transform: uppercase;
}

.public_leftpgo .not_inn_dt {
	padding: 8px 0;
	margin-top: 10px;
	color: white;
	width: 100%;
	background: #240038;
}

	.public_leftpgo .not_inn_dt h6 {
		color: #e7e7e7;
		font-size: 17px;
		font-weight: 500;
		margin-bottom: 0px;
	}

	.public_leftpgo .not_inn_dt h5 {
		margin: 0;
		text-transform: uppercase;
		color: #f4f736;
		font-size: 20px;
		font-weight: 700;
		border: 0;
	}

		.public_leftpgo .not_inn_dt h5 span {
			display: block;
			font-size: 13px;
			text-transform: uppercase;
			color: #ebebeb;
			font-weight: 500;
			margin-top: 3px;
			letter-spacing: 0.05em;
		}

.tbl-align-fix th {
	background: #17657c;
	color: white !important;
}

.tbl-align-fix .aaligntbl {
	text-align: left !important;
}

.newblok h5 {
	color: white;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0;
	line-height: 23px;
}

.newblok h5 span {
	display: block;
	text-transform: capitalize;
	font-weight: 300;
	font-size: 14px;
}

.newblok button {
	display: block;
	margin: 0 auto;
	border-radius: 50px;
	padding: 6px 16px;
	line-height: 21px;
}

.stupaymthisbox td {
	border-bottom: 1px solid #80808040;
}


input[type="radio"]:checked+img {
	width: 55px;
	height: 40px;
}

input[type="radio"]:checked+img+label {
	font-size: 12px;
	border-bottom: 3px solid #163f89;
}

.dropdown {
	width: 100%;
}

.appintmentbox {
	background: white;
	padding: 10px;
	margin-top: 12px;
	border-top: 2px solid #fd7e7e;
	border-radius: 5px;
}

.appintmentbox .dateapp {
	background: #00a1ff;
	display: inline-block;
	border-radius: 50px;
	color: white;
	padding: 0 18px;
	font-weight: 600;
}

.appintmentbox h3 {
	font-weight: 500;
	font-size: 17px;
	margin-top: 7px
}

.appintmentbox ul {
	margin-left: 30px;
	list-style: disc;
	margin-top: 5px;
}

.appintmentbox p {
	font-size: 13px;
	color: grey;
}

.nstafdash .shrtprobgbirthday {
	  background: linear-gradient(90deg, #ffffffde 31%, #ffffff 148%), url(/_content/SkoolMAUI.Shared/css/assets/happ-birthday-staff.jpg);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #ff6b6b69;
    position: relative;
    z-index: 1;
}

.stushotinfomobile.stubrthdy {
	background: none !important;
	position: relative;
	z-index: 2;
}

.stushotinfomobile.stubrthdy:after {
	content: '';
	position: absolute;
	background: linear-gradient(-90deg, #ffffff00, #ffffff00), url(/_content/SkoolMAUI.Shared/css/assets/stu-brth-bg2.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 100%;
	width: 255px;
	left: -10px;
	right: 0;
	top: -12px;
	z-index: -1;
}

.stushotinfomobile .stubox img {
	width: 112px !important;
}

.stushotinfomobile .stubox {
	float: left;
}

.stushotinfomobile .stubox_mob_detl {
	margin-left: 120px;
	min-height: 136px;
}

.stushotinfomobile .stubox_mob_detl h5 {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #7c0101;
}

.stushotinfomobile .stubox_mob_detl h5 span {
	display: block;
	font-weight: 700;
	font-size: 19px;
	font-style: initial;
	color: black;
}

.stushotinfomobile .stubox_mob_detl .stu__bx__cls_mob {
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid grey;
}

.stushotinfomobile .stubox_mob_detl h6 {
	font-size: 14px;
	text-transform: capitalize;
	font-weight: 600;
}

.feetabs li a {
	padding: 5px 9px !important;
    min-width: auto !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #d1dee9;
    border-radius: 19px;
    margin: 2px 2px;
    text-align: center !important;
}

.feetabs ul {
	margin-bottom: 2px;
}

.feetabs li {
	border: 0 !important;
    background: transparent !important;
}
.feetabs li:hover{
	border: 0 !important;
}
.feetabs li.rz-tabview-selected a{
		color: #fff !important;
		background: #1eacb7;
		transition: .3s;
}
.feetabs li.rz-tabview-selected a:hover{
	background: #075e65;
    transition: .3s;
}
.feetabs .rz-tabview-panel {
	padding: 0 !important;
}

.feetabsdetail .rz-tabview-nav {
	margin-bottom: 7px;
}

.feetabsdetail .rz-tabview-nav li a {
	background: #5f9ea04a;
	font-weight: 600;
}

.feetabsdetail .rz-tabview-nav .rz-tabview-selected a {
	background: #0a5368;
}

.feetabsdetail .rz-tabview-panel {
	padding: 5px;
}

.mis_stu_pro {
	background: white;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #cecece;
}

.mis_stu_pro img {
	height: 110px;
	width: 110px;
	border-radius: 50%;
	border: 1px solid #8080802e;
	margin-bottom: 3px;
}

.mis_stu_pro h2 {
	font-weight: 500;
	font-size: 18px;
}

.mis_stu_pro h2 span {
	color: white;
	background: #ed6666;
	display: inline-block;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 50px;
}

.mis_stu_pro h3 {
	font-size: 13px;
	/* text-transform: uppercase; */
	font-weight: 600;
	margin-top: 6px;
	margin-bottom: 8px;
}

.mis_stu_pro .stu_dtl_mis {
	border-top: 1px solid #80808094;
	margin-top: 10px;
	padding-top: 10px;
}

.mis_stu_pro .stu_dtl_mis ul {
	text-align: left;
	font-size: 12px;
	color: #242424;
	font-weight: 500;
}

.mis_stu_pro .stu_dtl_mis ul li {
	line-height: 23px;
}

.mis_stu_pro .stu_dtl_mis ul li strong {
	display: inline-block;
	width: 117px;
}

.mis_stu_pro .stu_dtl_mis ul li span {
	display: inline-block;
	margin-right: 6px;
}

.mis_stu_pro .stu_dtl_mis ul li span.dtl_right {
	text-align: right;
	width: auto;
	display: inline-block;
}

.fix-table-mis {
	height: 49px;
	overflow-y: scroll;
}

.mistitleheading {
	    background: #ca45b4;
    display: inline-block;
    position: absolute;
    right: 0;
    color: white;
    font-size: 14px;
    font-weight: 400;
    padding: 4px 10px;
    top: 0;
    border-top-right-radius: 5px;
	    margin: 0;
}

.mis_stu_parents .mis_stu_p_bx {
	position: relative;
	padding: 10px;
	background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #cecece;
}

.mis_stu_parents .mis_stu_p_bx img {
	    height: 90px;
    width: 84px;
    border: 1px solid #808080c7;
    float: left;
    margin-right: 7px;
    object-fit: cover;
    border-radius: 5px;
    padding: 3px;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl {
	margin-left: 98px;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl h3 {
	font-weight: 500;
	font-size: 18px;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl h3 span {
	display: block;
	color: #686868;
	font-size: 13px;
	font-weight: 400;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl ul {
	border-top: 1px solid #8080806e;
    margin: 0;
    padding-top: 3px;
    text-align: left;
    font-size: 12px;
    color: #242424;
    font-weight: 500;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl ul li {
	font-weight: 400;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl ul li strong {
	display: inline-block;
	width: 80px;
	font-weight: 500;
}

.mis_stu_parents .mis_stu_p_bx .mis_stu_p_bx_dtl ul li span {
	margin-right: 10px;
}

.mis_btn_group {
	background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #cecece;
}

.mis_stu_btns {
	padding: 6px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 5px;
    gap: 7px;
}

.mis_stu_btns img {
	height: 44px;
	width: 44px;
	background: white;
	border: 1px solid grey;
	float: left;
	display: none;
}

.mis_stu_btns h3 {
	color: white;
    font-weight: 600;
    font-size: 22px;
    text-align: left;
    margin: 0;
}

.mis_stu_btns h3 span {
	display: block;
	font-size: 13px;
	font-weight: 500;
}

.misbtnbg1 {
	background: #48a91e;
}

.misbtnbg2 {
	background: #cd8d32;
}

.misbtnbg3 {
	background: #1d7484;
}

.misbtnbg4 {
	background: #e608cf;
}

.misbtnbg5 {
	background: #00c1c8;
}

.misbtnbg6 {
	background: #ea5f13;
}

.attbg1 {
	background: #e91e63;
}

.attbg2 {
	background: #ca7f2f;
}

.mis_activities {
	    background: #d2d2d2;
    height: 187px;
    padding: 30px 10px;
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mis_stu_btns i {
	color: white;
    width: 30px;
    font-size: 23px;
    line-height: 42px;
}

.mis_activities h5 {
	    color: #4a4a4a;
    font-weight: 600;
    margin: 0;
}

.mis_activities h5 span {
	font-size: 15px;
	display: block;
}

.mistitle {
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
}

.mis_stu_count {
	background: white;
	padding: 10px;
	position: relative;
	margin-bottom: 10px;
}

.mis_stu_count select {
	position: absolute;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 0px;
	top: 6px;
	right: 12px;
	width: 80px;
	color: grey;
}

.mis_stu_count h6 {
	color: white;
	position: relative;
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	padding: 16px 8px;
}

.mis_stu_count h6.attbg1 span {
	display: inline-block;
	background: #85032f;
	padding: 5px 4px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.mis_stu_count h6.attbg2 span {
	display: inline-block;
	background: #723d04;
	padding: 5px 4px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.mis_stu_feedtl {
	background: white;
	padding: 10px;
	margin-bottom: 10px;
}

.mis_stu_feedtl table {
	margin: 0;
}

.mis_stu_feedtl th {
	background: #acefa1;
	font-size: 12px;
	padding: 1px 7px;
}

.mis_stu_feedtl td {
	font-size: 12px;
	padding: 2px 7px !important;
}

.mis_stu_feedtl td .tbl_status_danger {
	background: #e93c3c;
	color: white;
	display: inline-block;
	padding: 2px 3px;
	font-size: 9px;
	font-weight: 500;
	border-radius: 3px;
}

.mis_stu_feedtl td .tbl_status_paid {
	background: #2ba523;
	color: white;
	display: inline-block;
	padding: 2px 3px;
	font-size: 9px;
	font-weight: 500;
	border-radius: 3px;
}

.marks_mis {
	position: relative;
	background: white;
	padding: 10px;
	border-radius: 10px;
    box-shadow: 2px 2px 10px #cecece;
}
.marks_mis h5{
	    font-size: 16px;
    font-weight: 500;
}
.marks_mis .table {
	margin: 0px;
}

.marks_mis th {
	background: #acefa1;
	font-size: 12px;
	padding: 1px 7px;
}

.marks_mis td {
	font-size: 12px;
	padding: 2px 7px !important;
}

.marks_mis .mis_res {
	background: antiquewhite;
	padding: 10px;
	border-radius: 5px;
}

.marks_mis .mis_res ul {
	border-bottom: 1px solid grey;
	margin-bottom: 4px;
	padding-bottom: 7px;
}

.marks_mis .mis_res li {
	font-weight: 500;
	font-size: 13px;
}

.marks_mis .mis_res li strong {
	width: 165px;
	display: inline-block;
	font-weight: 600;
	color: black;
}

.marks_mis .mis_res li span {
	display: inline-block;
	margin-right: 17px;
}

.marks_mis .mis_res .mis_res_final {
	background: #ebcca3;
	border-radius: 5px;
	margin-top: 8px;
}

.marks_mis .mis_res .mis_res_final h2 {
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	padding: 4px 22px;
	border-radius: 5px;
	font-weight: 500;
}

.marks_mis .mis_res .mis_res_final h2 span.res_sta {
	background: #1a991a;
	color: white;
	padding: 1px 8px;
	border-radius: 3px;
	font-weight: 400;
	letter-spacing: 0.04em;
	font-size: 11px;
}

.marks_mis .mis_res .mis_res_final h2 span.div_sta {
	background: #1a2499;
	color: white;
	padding: 1px 8px;
	border-radius: 3px;
	font-weight: 400;
	letter-spacing: 0.04em;
	font-size: 11px;
}

.sub_tchr th,
.sub_tchr td {
	padding: 2px 6px;
	font-size: 13px;
	border: 1px solid #8080803b;
}

.sub_tchr td {
	text-align: center !important;
}

.sub_tchr td h6 {
	font-size: 12px;
	padding: 0;
	font-weight: 400;
}

.sub_tchr td h6 span {
	display: block;
	font-weight: 500;
	background: antiquewhite;
	margin: 3px 0;
	padding: 1px 0;
	border-radius: 3px;
	border: 1px solid #e97676;
	font-size: 11px;
}

.sub_tchr td h5 {
	font-size: 10px;
	padding: 2px 2px;
	text-align: center;
	background: #9a21b9;
	font-weight: 500;
	display: block;
	color: white;
	border-radius: 3px
}

.sub_tchr td button {
	padding: 5px 6px !important;
	font-size: 10px;
	min-height: auto;
	min-width: auto;
}

.staff_mis_pro {
	padding: 10px;
}

.staff_mis_pro img {
	float: left;
	height: 109px;
	width: 100px;
	border: 1px solid #8080806b;
}

.staff_mis_pro .staff_mis_pro_dtl {
	margin-left: 106px;
}

.staff_mis_pro .staff_mis_pro_dtl h6 {
	color: white;
	background: #ed5b5b;
	border-radius: 50px;
	padding: 2px 6px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	display: inline-block;
}

.staff_mis_pro .staff_mis_pro_dtl h1 {
	font-size: 17px;
	font-weight: 700;
}

.staff_mis_pro .staff_mis_pro_dtl ul {
	border-top: 1px solid #80808082;
	margin-top: 5px;
}

.staff_mis_pro .staff_mis_pro_dtl ul li {
	color: #565656;
	font-weight: 400;
	font-size: 13px;
}

.staff_mis_pro .staff_mis_pro_dtl h5 {
	font-size: 12px;
	text-transform: uppercase;
	border-top: 1px solid #80808078;
	margin-top: 4px;
	padding-top: 4px;
	font-weight: 700;
}

.staff_mis_child {
	background: white;
	padding: 10px;
}

.staff_mis_child table {
	margin: 0;
	margin-top: 10px;
}

.staff_mis_child table th {
	background: #0095ff;
	color: white;
}

.staff_mis_child th,
.staff_mis_child td {
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 600;

}

.staff_child_height {
	height: 105px;
	overflow-x: scroll;
}

.staff_timeline_height {
	height: 247px;
	overflow-x: hidden;
}

.staff_mis_child td a {
	background: black;
	color: white;
	padding: 1px 9px !important;
	font-weight: 400;
}

.staff_mis_btns {
	padding: 10px;
}

.staff_mis_btns .staff_mis_btn_bx {
	text-align: right;
	padding: 7px 7px;
	margin-bottom: 10px;
	position: relative;
}

.staff_mis_btns .staff_mis_btn_bx i {
	color: #ffffff47;
	position: absolute;
	left: -3px;
	bottom: -5px;
	font-size: 34px;
}

.staff_mis_btns .staff_mis_btn_bx h2 {
	color: white;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
}

.staff_mis_btns .staff_mis_btn_bx h2 span {
	display: block;
	font-size: 26px;
	font-weight: 700;
}

.staff_mis_timeline {
	background: white;
	padding: 10px;
}

.staff_mis_timeline ul {
	position: relative;
	padding-left: 28px;
	margin-top: 18px;
}

.staff_mis_timeline ul:after {
	content: '';
	position: absolute;
	/* height: 200px; */
	width: 2px;
	background: lightgrey;
	left: 9px;
	top: 0;
	bottom: 0;
}

.staff_mis_timeline ul li {
	color: #4e4e4e;
	font-size: 12px;
	position: relative;
	margin-bottom: 21px;
}

.staff_mis_timeline ul li:after {
	content: '';
	position: absolute;
	background: #2c9f44;
	left: -24px;
	top: 12px;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	z-index: 2;
}

.staff_mis_timeline ul li span {
	display: block;
	color: #323030;
	font-size: 13px;
	font-weight: 500;
}

.staff_mis_timeline h4,
.staff_mis_child h4 {
	font-size: 15px;
	font-weight: 600;
}
 
.publicnotice_bx {
	background: white;
	padding: 22px;
	position: relative;
	z-index: 2;
	border-radius: 10px;
	height: 466px;
	overflow-y: scroll;
}

.publicnotice_bx h5 {
	font-size: 21px;
}

.publicnotice_bx h5 span {
	display: block;
	font-size: 15px;
	color: red;
	font-style: italic;
	margin-bottom: 6px;
}

.publicnotice_bx p {
	font-size: 14px;
}

.pub_msg_ftr {
	border-top: 1px solid #e1e1e1;
	padding-top: 11px;
}

.stu_edit_form .stuformbox {
	padding: 10px;
	background: white;
	margin-bottom: 20px;
	border-radius: 10px;
	box-shadow: 3px 2px 6px #80808042;
}

.stu_edit_form {
	border-radius: 5px;
}

.stu_edit_form .stuformbox h6 {
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 700;
	border-bottom: 1px solid #dfdfdf;
	padding-bottom: 8px;
}

/* width */
.studentleftmenu::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.studentleftmenu::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
.studentleftmenu::-webkit-scrollbar-thumb {
	background: #021116;
	border-radius: 10px;
}

/* Handle on hover */
.studentleftmenu::-webkit-scrollbar-thumb:hover {
	background: #b30000;
}

.assignbox .rz-tree .rz-tree-container .rz-treenode {
	width: 25%;
	float: left;
	position: relative;
}

.assignbox .rz-tree .rz-tree-container .rz-treenode-children .rz-treenode {
	width: 100%;
	float: left;
}

.assignbox .rz-tree .rz-tree-container .rz-treenode-children {
	background: white;
	left: 0;
	right: 0;
	width: 200px;
	top: 33px;
	z-index: 2;
	padding-left: 11px;
}

.assignbox .rz-tree {
	overflow: inherit;
}

.ch_small .rz-chkbox {
	height: 17px;
	min-width: 17px;
	width: 17px;
}

.ch_small .rz-chkbox-box {
	font-size: 12px;
}

.ch_small th .rz-column-title {
	padding: 0px 8px !important;
}

.ch_small td {
	padding: 2px 10px !important;
}

/*staff birthday*/
.staff__sin__bdy {
	background: white;
	height: 100vh;
}

.bdy_hdr {
	text-align: center;
	margin: 0 auto;
}

.bdy_hdr img {
	width: 100%;
}

.h_bdy_top_img {
	margin: 0 auto;
	text-align: center;
}

.h_bdy_top_img img {
	width: 251px;
	margin-top: -14px;
}

.h_bdy_mid_img img {
	width: 152px;
	height: 190px;
	object-fit: cover;
	border-radius: 3px;
	margin-top: 94px;
	margin-left: 10px;
	border: 1px solid white;
}

.bdy_mid .h_bdy_mid_img {
	background: url(/_content/SkoolMAUI.Shared/css/assets/mid-bg-bdy.jpg);
	background-repeat: no-repeat;
	text-align: center;
	background-position: center center;
	background-size: contain;
	height: 344px;
}

.bdy_ftr {
	background: url(/_content/SkoolMAUI.Shared/css/assets/ftr-bg-bdy.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 80px;
	width: 100%;
	margin-top: 10px;
	background-position: center center;
}

.bdy_ftr h2 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 23px;
	text-align: center;
	padding: 27px 0;
	color: #032e44;
}

.speechicon button {
	padding: 0 0 !important;
	min-height: 30px;
	min-width: 65px;
}

.helptext {
	margin-top: 7px;
	margin-bottom: 38px;
}

.helptext a {
	font-weight: 400;
	color: white;
	font-size: 16px;
}

.helptext a span {
	font-weight: 600;
	color: burlywood;
}

.helptext2 {
	margin-top: 6px;
}

.helptext2 a {
	font-weight: 400;
	color: #5e5e5e;
}

.helptext2 a span {
	font-weight: 700;
	color: #0071c1;
}

.public_parent_link {
	margin: 0 auto;
	/* height: 100vh; */
	overflow: hidden;
}

.tab_bck_btn {
	margin-left: 8px;
}
	.tab_bck_btn button {
		    background-color: #f56e6e !important;
    padding: 7px 6px !important;
	border-radius: 0;
	}
	.tab_bck_btn img {
		width: 26px;
		filter: brightness(4.5);
	}
	.parent_link_top h2,
	.parent_link_bottom h2 {
		font-size: 20px;
		text-transform: uppercase;
		border-bottom: 1px solid #8080803b;
		padding-bottom: 9px;
		text-align: center;
	}

.school_info_parent_link {
	background: antiquewhite;
	padding: 6px 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.school_info_parent_link img {
	width: 75px;
	float: left;
	margin-right: 15px;
}

.school_info_parent_link h3 {
	font-size: 24px;
	font-weight: 600;
}

.school_info_parent_link h3 span {
	display: block;
	font-size: 16px;
	text-transform: capitalize;
	font-weight: 400;
	margin-top: 6px;
}

#components-reconnect-modal {
	text-align: center;
	margin: 8px 0;
}

#components-reconnect-modal a {
	margin-top: 9px;
}

.public_tabs_link .rz-tabview-nav {
	align-items: center;
	/* justify-content: center; */
	list-style: none;
	background: none;
	padding: 0;
	margin-bottom: 11px !important;
	margin: 0px;
}

.public_tabs_link li {
	background: none !important;
	margin-top: 0 !important;
}

.public_tabs_link li:hover {
	border: 0 !important;
}

.public_tabs_link li a {
	border-radius: 6px;
	background: #a5a5a5;
	color: white !important;
	padding: 9px 45px !important;
	text-transform: uppercase;
	font-weight: 600;
}

.public_tabs_link .rz-tabview-panel {
	border: 2px solid grey;
}

.public_tabs_link .rz-tabview-selected:after {
	content: "\f0d7";
	font-family: FontAwesome;
	color: #00a1ff;
	font-size: 33px;
	position: absolute;
	top: 18px;
	left: 46%;
}

.use_steps {
	position: absolute;
	right: 0;
	width: 450px;
	height: 100vh;
	background: antiquewhite;
	padding: 20px;
	overflow: hidden;
	padding: 7% 25px;
}

.use_steps h4 {
	font-size: 23px;
	font-weight: 600;
}

.use_steps ul li {
	font-size: 19px;
	font-weight: 600;
	font-family: sans-serif;
}

.use_steps .text-red {
	color: #ff0000;
}

.use_steps .text-blue {
	color: #002bff;
}

.public_sec_link {
	padding: 8% 65px;
}

.user_control {
	position: absolute;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 10px 10px;
}

.user_control .user_lang {
	display: flex;
	align-items: center;
}

.user_control .user_lang span {
	font-weight: 500;
	font-size: 14px;
	margin-right: 8px;
}

.user_control .user_sound {
	margin-left: 16px;
}

.user_control .user_sound button {
	background: #dbdbdb;
	padding: 0;
	text-align: center;
	border-radius: 1px;
	cursor: pointer;
}

.user_control .user_sound i {
	color: black;
}

.reportView_stps .rz-steps li {
	background: #ededed;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.reportView_stps .rz-steps li a .rz-steps-number {
	background: #969796;
	color: white;
	font-weight: 500;
}

.reportView_stps .rz-steps li a .rz-steps-title {
	text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.reportView_stps .rz-steps .rz-state-highlight .rz-steps-number {
	background: #43bf7a !important;
}

.reportView_stps .rz-steps button {
	padding: 5px;
	min-height: auto;
	width: auto;
	border: 0;
}

.reportView_stps input {
	width: 100%;
}

.reportView_stps .rz-steps ul {
	border-bottom: 1px solid #80808042;
	margin-bottom: 15px;
}

.reportView_stps .rz-steps-next,
.rz-steps-prev {
	background: black;
	color: white !important;
	padding: 5px 16px;
	border-radius: 3px;
}

.open__reg {
	background: #ccffde;
	color: #007c43;
	padding: 1px 10px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #198754;
	font-size: 11px;
	font-weight: 700;
	font-family: system-ui;
}

.closed__reg {
	background: #ffe0e0;
	color: #b71212;
	padding: 1px 10px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #bf2b2b;
	font-size: 11px;
	font-weight: 700;
	font-family: system-ui;
}

.sc_dtl_n .media {
	display: block;
	border-bottom: 1px solid #bd7bdf;
	padding-bottom: 10px;
}

.sc_dtl_n .media img {
	width: 85px;
}

.sc_dtl_n .media-body h1 {
	font-size: 17px;
	margin-top: 5px;
	margin-bottom: 0;
	color: white;
	position: relative;
}

.public_right h5 {
	margin-bottom: 2px;
	background: #5d078d;
	display: inline-block;
	padding: 6px 13px;
	text-transform: uppercase;
	color: white;
	font-size: 17px;
}

.public_right_header #contact {
	text-align: left !important;
}
.public_right_header p, .public_right_header ul, .public_right_header ul li{
font-size: 14px;
}
.sc_dtl_n .media-body h1 span {
	display: block;
	text-transform: capitalize;
	font-weight: 400;
	font-size: 15px;
	margin-top: 5px;
}

.ward_nme {
	margin-top: 52px;
	border: 1px dotted white;
	padding: 5px;
}

.ward_nme h6 {
	color: white;
	text-transform: uppercase;
	font-size: 22px;
}
.ward_nme h6 span {
	display: block;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 12px;
	margin-top: 8px;
	border: 1px solid grey;
	padding: 3px 0;
	background: white;
	color: black;
}
.ward_nme ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ward_nme ul li {
	display: flex;
	justify-content: space-between;
	color: white !important;
}
.ward_nme li strong {
	color: white;
	font-weight: 600;
	width: 101px;
	text-align: left;
}
.exam_status_bx {
	background: #fbfff0;
	padding: 10px;
	position: relative;
	margin-bottom: 10px;
	border: 1px solid #b7cf76;
	border-radius: 3px;
}
	.exam_status_bx h1 {
		font-weight: 700;
		font-size: 17px;
		text-transform: uppercase;
		border-bottom: 1px solid #dfcaae;
		padding-bottom: 6px;
		margin-bottom: 4px;
	}
	.exam_status_bx .exam_sta {
		position: absolute;
		top: 0;
		right: 0;
		background: #b035cf;
		color: white;
		padding: 3px 10px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		border-radius: 3px;
	}
	.exam_status_bx ul li{
		font-size: 12px;
		}
	.exam_status_bx .exam_type {
		background: #f7baba;
		text-align: center;
		margin: 6px 0;
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.07em;
		font-weight: 700;
		color: #b10101;
		padding: 2px 0px;
	}
	.exam_status_bx .exam_t_stu {
		position: absolute;
		right: 0px;
		top: 37px;
		text-align: center;
		font-size: 13px;
		text-transform: uppercase;
		font-weight: 600;
		border: 1px solid #8f7758;
		padding: 3px 7px;
		color: black;
		background: #fbdfba;
		border-radius: 3px;
	}
		.exam_status_bx .exam_t_stu span {
			display: block;
			font-size: 10px;
			text-transform: capitalize;
			padding: 0px 0;
		}
	.exam_status_bx .exam_ftr {
		border-top: 1px solid grey;
		padding-top: 5px;
		margin-top: 5px;
		display: flex;
		justify-content: center;
	}
		.exam_status_bx .exam_ftr button {
			padding: 3px 16px;
			height: auto !important;
			margin: 0 5px;
		}
.stu_mrk_bx {
	background: #fbfff0;
	padding: 10px;
	position: relative;
	margin-bottom: 10px;
	border: 1px solid #b7cf76;
	border-radius: 3px;
}
	.stu_mrk_bx .adno {
		position: absolute;
		right: 0;
		top: 0;
		background: #d16d76;
		padding: 1px 11px;
		font-weight: 500;
		border-radius: 4px;
		color: white;
	}
	.stu_mrk_bx h2 {
		text-transform: uppercase;
		font-size: 17px;
		font-weight: 500;
		display: inline-grid;
	}
		.stu_mrk_bx h2 span {
			font-size: 13px;
			text-transform: capitalize;
			margin-top: 4px;
			border: 1px solid #bfae71;
			padding: 2px 6px;
			border-radius: 3px;
			background: #f5eed5;
		}
	.stu_mrk_bx .mark_ftr {
		border-top: 1px solid #d1c7c7;
	}
		.stu_mrk_bx .mark_ftr input {
			background: #cce0ff;
			padding: 8px 6px;
		}
	.stu_mrk_bx .rz-spinner {
		border: 0 !important;
		padding: 0 !important;
	}
		.stu_mrk_bx .mark_ftr .rz-dropdown {
			padding: 0 0 !important;
			height: auto !important;
			margin: 0;
			border: 0 !important;
			margin-top: 6px;
			background: #cce0ff;
		}

		.stu_mrk_bx .mark_ftr .mark_grd_ftr {
			margin-bottom: 3px;
			text-align: center;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 0.04em;
			font-size: 14px;
		}
	.book_cover img{
		height: 346px;
		width: 100%;
		object-fit: cover;
	}
	.rz-grid-table .rz-cell-data input {
		height: 33px;
	}

	.ass_bx {
		background: #fff8f8ad;
		border-radius: 10px;
		padding: 9px;
		border-top: 2px solid #db9292;
		position: relative;
		margin-bottom: 10px;
		box-shadow: var(--rz-card-shadow);
	}

	.ass_bx .ass_dte {
		background: #4b4b4b;
		color: white;
		display: inline-block;
		position: absolute;
		right: 4px;
		padding: 1px 9px;
		top: 3px;
		border-radius: 10px;
		font-size: 12px;
		font-weight: 500;
	}
.ass_bx h2{
	font-size: 18px;
    font-weight: 600;
}
.ass_bx h2 span{
	display: block;
    background: #db6767;
    width: fit-content;
    padding: 2px 7px;
    margin-bottom: 7px;
    font-size: 16px;
    border-radius: 3px;
    color: white;
}
.ass_bx h6{
	font-size: 12px;
    padding: 6px 6px;
    text-transform: capitalize;
}
.ass_bx p{
	height: 46px;
    overflow: hidden;
    font-size: 14px;
}
	.ass_bx .ass_ftr {
		border-top: 1px solid #d5d5d5;
		padding-top: 4px;
		margin-top: 4px;
	}
.ass_dtl_bx{
	border: 2px solid #956666;
    padding: 10px;
    border-radius: 3px;
    background: #fff8f8;
}
.ass_dtl_bx p{
	font-size: 15px;
}
.ass_bx_photo{
	border: 2px solid #956666;
    padding: 10px;
    border-radius: 3px;
    background: #ffebeb;
}
.ass_desc{
	height: 43px;
    overflow: hidden;
}
.acdyear h3 {
	margin: 0;
	color: white;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
}
.icon-menu-arrow {
	margin-left: 0px;
}
.menuleftfix nav {
	margin-bottom: 65px;
	padding-top: 8px;
}

/* Enhanced Menu Panel Styling */
.rz-panel-menu {
	background: transparent !important;
}

.rz-panel-menu .rz-navigation-item {
	background: transparent !important;
}

.rz-panel-menu .rz-navigation-item-wrapper {
	border-radius: 4px;
	margin: 1px 4px;
	transition: all .3s ease;
}

/* Main menu item with icon spacing */
.left_menu .rz-navigation-item-wrapper > .rz-navigation-item-link {
	padding-left: 34px !important;
}

.left_menu .rz-navigation-item-wrapper > .rz-navigation-item-link .rz-navigation-item-text {
	padding-left: 0 !important;
}

.rz-panel-menu .rz-navigation-item-icon {
	color: #93c5fd;
	font-size: 15px;
	transition: all .3s ease;
	margin-right: 8px;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
	color: #60a5fa;
	transform: rotate(10deg) scale(1.1);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon {
	color: #9ca3af;
	font-size: 13px;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
	color: #60a5fa;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link-active .rz-navigation-item-icon {
	color: #ffffff;
}

/* Submenu expand/collapse icon with smooth rotation */
.rz-panel-menu .rz-navigation-item-icon-children {
	color: #6b7280;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 12px;
	display: inline-block;
}

.rz-panel-menu .rz-navigation-item-wrapper-expanded .rz-navigation-item-icon-children {
	color: #3b82f6;
	transform: rotate(180deg);
}

.rz-panel-menu .rz-navigation-item-wrapper-expanded > .rz-navigation-item-link {
	background: rgba(59, 130, 246, 0.15);
	color: #ffffff;
	font-weight: 600;
}

/* Main menu item hover with submenu */
.rz-panel-menu .rz-navigation-item-wrapper:has(.rz-navigation-item-icon-children):hover .rz-navigation-item-icon-children {
	color: #93c5fd;
	transform: scale(1.2);
}

/* Submenu background with smooth animation */
.rz-panel-menu .rz-navigation-menu {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(10, 25, 47, 0.4) 100%) !important;
	border-radius: 6px;
	margin: 6px 8px 6px 42px;
	padding: 6px 0;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
	border-left: 2px solid rgba(59, 130, 246, 0.3);
	overflow: hidden;
	max-height: 1000px;
	opacity: 1;
	transform: scaleY(1);
	transform-origin: top;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
	            opacity 0.3s ease,
	            max-height 0.4s ease,
	            margin 0.3s ease,
	            padding 0.3s ease;
	animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: scaleY(0.8) translateY(-10px);
		max-height: 0;
	}
	100% {
		opacity: 1;
		transform: scaleY(1) translateY(0);
		max-height: 1000px;
	}
}

/* Submenu items fade in */
.rz-panel-menu .rz-navigation-menu .rz-navigation-item {
	animation: fadeInItem 0.3s ease forwards;
	opacity: 0;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item:nth-child(1) {
	animation-delay: 0.05s;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item:nth-child(2) {
	animation-delay: 0.1s;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item:nth-child(3) {
	animation-delay: 0.15s;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item:nth-child(4) {
	animation-delay: 0.2s;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item:nth-child(5) {
	animation-delay: 0.25s;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item:nth-child(n+6) {
	animation-delay: 0.3s;
}

@keyframes fadeInItem {
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Active submenu item highlighting */
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link-active,
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
	background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
	position: relative;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link-active::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: #60a5fa;
	border-radius: 50%;
	box-shadow: 0 0 10px #60a5fa;
	animation: pulse 2s infinite;
}
.rz-panel-menu .nav-link {
	border-bottom: var(--rz-panel-menu-item-border);
}
.rz-panel-menu .rz-navigation-item-link {
	padding: 0 0 !important;
}
.rz-panel-menu .rz-navigation-item {
	display: block;
	padding-right: 5px;
	border-bottom: none !important;
}
.rz-panel-menu .rz-navigation-item-wrapper:hover {
	background-color: transparent !important;
}
.rz-panel-menu a.rz-navigation-item-link {
	background-color: transparent !important;
}
.rz-panel-menu .nav-item {
	display: flex;
	padding-top: 11px !important;
	padding-bottom: 11px !important;
	padding-left: 18px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: all .3s ease;
	position: relative;
	cursor: pointer;
}
	.rz-panel-menu .nav-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 0;
		background: #3b82f6;
		transition: width .3s ease;
	}
	.rz-panel-menu .nav-item:hover {
		background: linear-gradient(90deg, rgba(46, 46, 46, 0.8) 0%, rgba(30, 30, 30, 0.6) 100%);
		padding-left: 22px !important;
		transition: all .3s ease;
	}
	.rz-panel-menu .nav-item:hover::before {
		width: 3px;
	}
.rz-panel-menu .rz-navigation-item-wrapper .rz-navigation-item-text {
	padding-left: 15px;
	font-size: 14px;
	color: #e5e7eb;
	font-weight: 500;
	transition: all .3s ease;
}
.rz-panel-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text {
	color: #ffffff;
	transform: translateX(2px);
}
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-text {
	padding-left: 12px;
	font-size: 13px;
	color: #d1d5db;
}
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-text {
	color: #ffffff;
	font-weight: 600;
}
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link-active .rz-navigation-item-text {
	color: #ffffff;
	font-weight: 600;
}
.left_menu {
	transition: all .3s ease;
	position: relative;
	display: flex;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	cursor: pointer;
	align-items: flex-start;
}
	.left_menu:hover {
		background: linear-gradient(90deg, #0e2c5a 0%, #1a4080 100%);
		transition: all .3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}
	.left_menu .main-icon {
		position: absolute;
		top: 13px;
		left: 14px;
		width: 24px;
		min-width: 24px;
		font-size: 16px;
		color: #93c5fd;
		transition: all .3s ease;
		z-index: 10;
	}
	.left_menu:hover .main-icon {
		color: #60a5fa;
		transform: scale(1.1);
	}

	/* Keep icon visible when menu is expanded */
	.left_menu .rz-panel-menu-item {
		padding-left: 45px;
	}

	/* Active/expanded menu highlighting with smooth transition */
	.left_menu:has(.rz-navigation-item-wrapper-expanded) {
		background: linear-gradient(90deg, #1e3a5f 0%, #2d4a7c 100%);
		border-left: 3px solid #60a5fa;
		transition: all 0.4s ease;
	}

	.left_menu:has(.rz-navigation-item-wrapper-expanded) .main-icon {
		color: #60a5fa;
		animation: iconPulse 1.5s ease-in-out infinite;
	}

	@keyframes iconPulse {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.15);
		}
	}

	/* Smooth background transition for menu groups */
	.left_menu {
		transition: background 0.4s ease, border-left 0.3s ease, box-shadow 0.3s ease;
	}
	.rz-chkbox{
		width: fit-content !important;
		padding: 0 !important;
		float: left;
		margin-right: 4px;
		top: 0px;
		height: 22px;
	}
	.main_navbar {
		background: currentColor;
		padding: 0 0px!important;
	}
		.main_navbar .main_menu {
			width: 100%;
		}
		.main_navbar .logo {
			text-align: center;
		}
			.main_navbar .logo .navbar-brand {
				color: white;
				text-transform: uppercase;
				font-size: 18px;
				text-align: center;
				font-weight: 700;
				display: block;
				background: #1ba5c1;
				padding: 5px 16px;
			}
				.main_navbar .logo .navbar-brand span {
					display: block;
					font-size: 12px;
					font-weight: 400;
				}
		.main_navbar .rz-menu {
			background-color: #212529 !important;
		}
		.main_navbar .rz-menu .rz-navigation-item-link {
				color: #d1d1d1 !important;
				font-weight: 400;
				font-family: system-ui;
				font-size: 15px;
		}
			.main_navbar .rz-menu .rz-navigation-item-link {
				padding: 1px 3px !important;
			}
			.main_navbar .rz-menu ul.rz-navigation-menu {
				width: 200px;
				top: 57px;
				border-top: 2px solid #2abcc3;
			}
				.main_navbar .rz-menu ul.rz-navigation-menu li {
					width: 100%;
				}
					.main_navbar .rz-menu ul.rz-navigation-menu li a {
						color: #222222 !important;
						padding: 10px 0px !important;
						display: block;
						width: 100%;
						text-align: left;
						padding-left: 30px !important;
					}
	.rz-menu:not(.rz-profile-menu) .rz-navigation-menu .rz-navigation-item-wrapper:hover {
		background-color: #cce8f7!important;
	}
.rz-navigation-item ul li {
	transition: all .3s ease;
	border-radius: 4px;
	position: relative;
}
.rz-navigation-item ul li:hover {
	background: linear-gradient(90deg, #1c3f78 0%, #0c2148 100%) !important;
    transition: all .3s ease;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
    color: white;
}

/* Active submenu item border indicator */
.rz-navigation-item ul li:has(.rz-navigation-item-link-active)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #60a5fa;
	border-radius: 0 3px 3px 0;
}
	.menuicon {
		text-align: center;
		padding: 16px 20px;
		display: flex !important;
		align-items: center;
	}
		.menuicon:before {
			color: white;
   			 font-size: 14px
		}
		.menuicon2:before {
			position: absolute;
			left: 8px;
			top: 13px;
			color: #242424 !important;
		}
	.rz-menu.rz-profile-menu {
		padding: 8px 3px;
		margin: 0 0 0 auto;
		border-left: 1px solid #585656;
	}
	.rz-menu.rz-profile-menu .rz-navigation-item-link {
		padding: 6px 7px !important;
	}
	.appintment_box {
		background: white;
    padding: 15px;
    border-top: 2px solid #c000ff;
    position: relative;
    font-family: system-ui;
    margin-bottom: 20px;
    box-shadow: 1px 3px 40px -21px grey;
    border-radius: 5px;
    border-left: 1px solid #80808036;
    border-right: 1px solid #80808036;
    border-bottom: 1px solid #80808036;
	}
		.appintment_box.border_red {
			border-top: 2px solid #ff8c8c;
		}
		.appintment_box h4{
			font-size: 17px;
		}
		.appintment_box h4 span{
			display: block;
			font-size: 11px;
			background: #f6c4ff;
			width: 95px;
			border-radius: 3px;
			margin-top: 8px;
			padding: 3px 5px;
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}
		.appintment_box .ap_status_red {
			position: absolute;
			right: 4px;
			top: 4px;
			background: #eb6363;
			color: white;
			padding: 2px 11px;
			font-size: 13px;
			font-weight: 400;
			border-radius: 3px;
		}
		.appintment_box.border_green {
			border-top: 2px solid #198754;
		}
	
		.appintment_box .ap_status_green {
			position: absolute;
			right: -10px;
			top: -10px;
			background: #198754;
			color: white;
			padding: 2px 11px;
			font-size: 13px;
			font-weight: 400;
			border-radius: 3px;
		}
		.appintment_box.border_yellow {
			border-top: 2px solid #d3b869;
		}
	
		.appintment_box .ap_status_yellow {
			position: absolute;
			right: -10px;
			top: -10px;
			background: #d3b459;
			color: white;
			padding: 2px 11px;
			font-size: 13px;
			font-weight: 400;
			border-radius: 3px;
		}
		.appintment_box.border_red h5 {
			border: 1px solid #b51121;
			display: inline-block;
			padding: 4px 9px;
			font-size: 11px; 
			background: #fddee1;
			color: #b51121;
			margin: 0;
			font-weight: 700;
		}
		.appintment_box.border_green h5 {
			border: 1px solid #198754;
			display: inline-block;
			padding: 4px 9px;
			font-size: 11px;
			background: #f2fff9;
			color: #198754;
			margin: 0;
			font-weight: 700;
		}
		.appintment_box.border_yellow h5 {
			border: 1px solid #bf9310;
			display: inline-block;
			padding: 4px 9px;
			font-size: 11px;
			background: #fff9e6;
			color: #765b0a;
			margin: 0;
			font-weight: 700;
		}
		.appintment_box ul {
			list-style: none;
			margin: 0;
			padding: 0;
			margin-top: 6px;
		}
			.appintment_box ul li {
				font-size: 13px;
				color: #424242;
				line-height: 20px;
			}
				.appintment_box ul li strong {
					width: 114px;
					display: inline-block;
					font-weight: 500;
					color: black;
					text-transform: capitalize;
				}
		.appintment_box h3 {
			font-weight: 500;
			font-size: 19px;
			margin-bottom: 0;
		}
			.appintment_box h3 span {
				display: block;
				font-weight: 400;
				font-size: 13px;
				margin-top: 8px;
				color: grey;
			}
		.appintment_box h6 {
			margin: 6px 0;
			font-size: 13px;
			text-transform: uppercase;
			font-weight: 400;
		}
		.appintment_box .ap_status {
			color: white;
			position: absolute;
			right: -8px;
			top: 7px;
			font-weight: 600;
			font-size: 12px;
			background: rgb(229, 101, 101);
			padding: 3px 6px;
		}
		.appintment_box .app_ftr {
			border-top: 1px solid #80808057;
			padding-top: 10px;
			margin-top: 10px;
		}
			.appintment_box .app_ftr button {
				padding: 4px 10px !important;
				min-height: auto !important;
				font-weight: 400 !important;
				font-size: 13px !important;
			}
			.card-header{
				background: transparent;
				font-weight: 500;
				font-size: 18px;
			}
			.sec_div_box {
				background: white;
				padding: 10px;
			}
		.sec_div_box h2 {
			background: #55b4eb;
			font-size: 17px;
			text-transform: uppercase;
			padding: 4px 10px;
			color: white;
		}
		.sec_div_box .section_div {
			background: antiquewhite;
			margin-bottom: 7px;
		}
			.sec_div_box .section_div h3 {
				font-size: 16px;
				font-weight: 500;
				margin: 0;
				padding: 4px 0;
			}
		.sec_div_box h3 {
			font-size: 19px;
			text-transform: uppercase;
			margin: 0;
		}
.appintment_box .srNo {
	position: absolute;
    background: #b154c9;
    top: 0;
    right: 0;
    height: 24px;
    width: 25px;
    text-align: center;
    color: white;
}
.tchr_qulity h3{
	padding: 5px 0px;
    font-size: 17px;
    color: #b706b7;
    font-weight: 700;
    margin-bottom: 8px;
    border-bottom: 1px solid lightgrey;
    padding-bottom: 10px;
}
.staffsignbx {
	border: 1px solid #d9d9d9;
	height: 48px;
	width: 100%;
}

	.staffsignbx img {
		height: 48px;
		width: 100%;
		object-fit: contain;
	}
.login_nw{
	    display: flex;
    background: #ecf6f9;
    height: 100vh;
}
.login_nw .login_left{
	width: 55%;
}
.login_nw .login_left .left_login_detail{
	padding: 20px 45px;
    height: 160px;
}
.login_nw .login_left .left_login_detail h2{
	    margin-bottom: 0;
    font-size: 20px;
    font-weight: 500;
    color: black;
    line-height: 31px;
}
.login_nw .login_left .left_login_detail h2 span{
	 display: block;
    font-size: 40px;
    color: #3641cf;
    font-weight: 700;
}
.login_nw .login_left .left_login_detail p{
	margin: 0;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: 14px;
}
.login_nw .login_left .left_login_img{
	  display: flex;
    justify-content: center;
    align-items: center;
    margin: 9% 0 16px;
}
.login_nw .login_left .left_login_img img{
	width: 415px;
}
.login_nw .login_right{
	width: 45%;
    background: white;
    padding: 2% 0;
}
.login_nw .login_right .newdsn{
	    border-bottom: 1px solid #bfbfbf;
    position: relative;
}
.login_nw .login_right .fxt-footer{
	    text-align: center;
    padding: 8px 0;
}
.login_nw .login_right .fxt-footer img{
	    width: 160px;
    margin-bottom: 3px;
}
.login_nw .login_right .fxt-footer p{
	       font-size: 13px;
    margin: 0;
}
.login_nw .login_right .usrtype{
	    border-bottom: 1px solid #bfbfbf;
}
.login_nw .login_right .login_form{
	     margin: 5% 8% 2%;
}
.login_nw .login_right .login_form button{
	background: #46c0f1;
    border-radius: 3px;
    line-height: normal;
    min-height: auto;
    height: 40px;
    text-transform: uppercase;
	transition: .3s;
}
.login_nw .login_right .login_form button:hover{
	background: #1080ad;
    transition: .3s;
}
.login_right h2{
	text-align: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
}
.login_right h2 span{
	    display: block;
    font-weight: 400;
    font-size: 15px;
    color: grey;
}
.login_nw .login_right h3{
	background: purple;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 17px;
    padding: 3px 5px;
}
.login_area_bx{
	    display: flex;
    width: 100%;
    margin: 10% 8%;
    border-top: 3px solid #46c0f1;
    border-bottom: 3px solid #46c0f1;
    background: #d5eefa;
}
.rz-growl-message-success{
	 background-color: #28a745; /* Green background for success */
    border-color: #28a745; /* Green border */
	color:white;
}
.rz-growl-item {
	font-weight: 600;
    padding: 10px;
}

.rz-growl-message-error {
    background-color: #dc3545; /* Red background for error */
    border-color: #dc3545; /* Red border */
	color:white;
}
.rz-growl-icon-close{
    position: absolute;
    right: 0px;
    top: 6px;
	}
.rz-growl-icon-close:after{
	    content: 'x';
    position: absolute;
    font-size: 12px;
}
.rz-notification-message {
    margin-bottom: 5px;
}
.rz-growl-message 
.rz-growl-title{font-weight: 600;}
.rz-growl-message p{
	font-weight: 400;
    font-size: 13px;
    margin: 0;
}

.rz-notification-message.rz-growl {
	position: fixed;
	width: 35%;
	Bottom: 0px;
	right: 0px;
}
.rz-growl-image{display:none!important;}
.rz-notification-message.rz-growl {
    position: relative !important;
}
.rz-notification-heading {
    font-size: 18px; /* Font size for the heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 5px; /* Space below the heading */
    color: #333; /* Text color for heading */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Custom font */
}
.rz-growl-message-error .rz-growl-item {
    --rz-notification-error-color: rgb(239, 68, 68);
    --rz-notification-error-icon-color: rgb(239, 68, 68);
    --rz-notification-error-background-color: rgb(254, 202, 202);
}
.f_stu_bx{
	 display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #e9fcff;
}
	.f_stu_bx .st_rt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		position: relative;
	}
.f_stu_bx .f_stu_bs_lft{
	    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: 20%;
}
.f_stu_bx .f_stu_bs_lft img{
	     width: 85px;
    height: 102px;
    border-radius: 5px;
    border: 1px solid grey;
    margin-right: 10px;
}
.f_stu_bx .f_stu_bs_mid{ text-align: center;width: 60%;}
.f_stu_bx .f_stu_bs_mid h2{
	   color: #0043a5;
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 1px;
}
.f_stu_bx .f_stu_bs_mid h2 span{
	display: block;
    font-size: 16px;
    font-weight: 700;
    color: black;
}
.f_stu_strm{
	    background: #00879d;
    text-align: center;
    color: white;
    font-weight: 400;
    padding: 3px 0;
    margin-top: 2px;
}
.f_stu_bx .st_stu_us {
	background: #ffecec;
	text-align: right;
	font-size: 12px;
	font-weight: 500;
	position: absolute;
	bottom: -14px;
	right: 0;
	padding: 0px 11px;
	color: #db1818;
	font-style: italic;
	max-width: 216px;
}
.f_stu_bx .f_stu_bs_mid h3{
	    font-size: 16px;
    font-weight: 700;
    color: #0043a5;
    text-transform: uppercase;
}
.f_stu_bx .f_stu_bs_mid .f_stu_strm{
	       background: #0c8ca1;
    color: white;
    padding: 1px 9px;
}
.f_stu_bx .f_stu_bs_rgt{ width: 40%; }
.f_stu_bx .f_stu_bs_rgt .st_stu_us{
	color: red;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 0;
    text-align: center;
}
.f_stu_bx .f_stu_bs_rgt .f_stu_btn{
    background: white;
    height: 100%;
    display: block;
    padding: 0px 0;
}
.f_stu_bx .f_stu_bs_rgt .f_stu_btn button{
	    border: 0;
    width: 100%;
    padding: 5px 4px;
    color: white;
    text-align: center;
    margin: 2px 0;
    font-weight: 600;
    font-size: 11px;
}
.nitify_container .toggle-checkbox {
  display: none;
}
.nitify_container .not_bx {
	padding-right: 13px;
	position: relative;
}
.nitify_container {
	position: absolute;
	right: 9px;
	top: 10px;
	z-index: 23;
}
/* Default state: the content div is visible */
.nitify_container .content {
	display: block;
	padding: 10px;
	background-color: #ffe9e9;
	border-radius: 5px;
	width: 300px;
	margin-bottom: 5px;
	box-shadow: 3px 4px 11px #545454;
}
.nitify_container .content p{
    margin: 0;
    color: #9b0808;
    font-weight: 500;	
}
.nitify_container .close-btn {
position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    background: #b50e0e;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 5px;
    font-size: 13px;
}
	.nitify_container button {
		position: absolute;
		top: 0px;
		right: 0px;
		border-radius: 50%;
		width: 23px;
		height: 23px !important;
		font-size: 13px !important;
		padding: 0 !important;
	}
.toggle-checkbox:checked ~ .content {
	display: none;
}
.nitify_container .content p:empty {
  display: none;
}
.nitify_container .content p:empty ~ .close-btn {
  display: none;
}
.nitify_container .content p:empty ~ .content {
  display: none;
}
.nitify_container .content p:empty {
  display: none;
}
.nstafdash{    position: relative;}
.staffbtns{position: relative;}

.ctechnot {
    height: 310px;
    overflow-y: scroll;
    margin-top: 10px;
}
.timatbelstaff {
	height: 225px;
	margin-top: 12px;
	overflow-x: hidden;
}
.pl-1{
    padding-left: 4px;
}
.ct .caltable td {
	height: 27px!important;
}
.ptm_bx {
	    border-radius: 5px;
    background: linear-gradient(180deg, #ffffff, transparent);
    padding: 10px;
    height: 100vh;
    text-align: center;
    align-items: center;
}
	.ptm_bx h3 {
		    font-weight: 700;
    font-size: 19px;
    margin-bottom: 1px;
    margin-top: 0;
    text-transform: uppercase;
    background: #4b77cf;
    padding: 10px 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
	}
		.ptm_bx h3 span {
		    font-weight: 500;
			text-transform: uppercase;
			display: block;
			border-radius: 5px;
			font-size: 15px;
			margin-bottom: 0px;
			padding: 3px 3px;
		}
	.ptm_bx h4 {
		padding: 3px 0px;
    color: #383838;
    font-size: 17px;
    text-transform: uppercase;
    border: 1px solid #c2c2c2;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0;
    margin-top: -1px;
    background: #efefef;
	}
.ptm_bx h6{
	    margin: 7px 0;
    font-size: 15px;
    border-bottom: 1px solid grey;
    padding: 4px 10px;
    color: red;
    border: 1px dotted red;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
}
.t_name{
	font-size: 18px;
    border-top: 1px solid #dfdfdf;
    padding-top: 7px;
    margin-top: 17px;
    font-weight: 500;
    text-align: left;
}
.t_name span{    display: block;}
.ptm_bx h6 span{
	    display: block;
    font-size: 17px;
}
.ptm_bx h5{
	    margin: 0;
    font-size: 15px;
    font-weight: 500;
}
.ptm_bx h5 span{
	font-size: 15px;
    display: block;
    font-weight: 700;
    color: #e50000;
    border: 2px dotted red;
    border-radius: 5px;
    width: 94px;
    margin: 10px auto 0;
}
.s_tec_bx {
	background: white;
	padding: 10px;
	border-radius: 5px;
	position: relative;
	margin-bottom: 10px;
}
	.s_tec_bx .s_t_num {
		font-weight: 700;
		font-size: 18px;
		color: red;
		border-bottom: 1px solid grey;
		padding-bottom: 4px;
		margin-bottom: 3px;
	}
.s_tec_bx h3{
	font-size: 17px;
    font-weight: 600;
}
.s_tec_bx ul{
	    margin: 0;
    padding: 0;
    list-style: none;
}
	.s_tec_bx ul li {
		display: block;
		text-transform: capitalize;
		font-weight: 500;
		text-align: left;
	}

.s_ptm_btns label {
	margin: 0 !important;
	padding: 0;
	color: #1ba41b;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
}
.s_tec_bx .s_ptm_btns {
	border-top: 1px solid #dbdbdb;
	margin-top: 3px;
	padding-top: 3px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.m_not_bx .rz-button {
	padding: 1px !important;
	min-width: 16px;
	height: 51px;
}
	.m_not_bx .rz-button i {
		font-size: 15px;
		color: white;
	}
.m_not_bx .not_bx {
	border-radius: 3px;
	padding: 10px 30px;
	background: #ffe4c4;
}
	.m_not_bx .not_bx h6 {
		font-size: 14px;
		font-weight: 700;
		color: #262525;
	}
	.m_not_bx .not_bx button {
		background-color: #28a745 !important;
		padding: 2px 10px !important;
		font-weight: 600 !important;
		height: auto;
		margin-top: 3px;
	}
.m_not_bx .rz-carousel-prev {
	left: 0;
}
.m_not_bx .rz-carousel-next {
	right: 0;
}
.m_not_bx .rz-carousel {
	display: contents;
}
.m_not_bx .rz-carousel-pager-bottom {
	display: none !important;
}
.m_not_bx {
	position: fixed;
	bottom: 58px;
	background: #ffe4c4;
	padding: 0;
	box-shadow: 4px 10px 27px 4px #ababab;
	right: 25px;
	border-radius: 5px;
	width: 200px;
	animation: bounce 2s infinite;
	transition: animation 0.2s ease-in-out;
}
.m_not_bx:hover {
	animation: none;
}
.m_not_bx h5{
	 font-size: 14px;
    margin-bottom: 12px;
    color: white;
    font-weight: 400;
}
	.m_not_bx .rz-carousel-items {
		align-items: baseline;
		justify-content: left;
	}
.m_not_bx button {
	min-height: auto !important;
	line-height: 22px !important;
	background-color: #938206 !important;
	margin-top: 20px;
}
.m_not_bx button .rz-button-text{
	    font-weight: 400;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.marquee-content {
	display: inline-block;
	animation: scroll-up 20s linear infinite;
	position: absolute;
	top: 0;
	bottom: 0;
}
.marquee-container:hover .marquee-content {
	animation-play-state: paused;
}
.marquee-container {
	position: relative;
	height: 500px; /* Set a fixed height for the container */
	width: 100%;
	scroll-behavior: smooth; /* Smooth scrolling */
}
@keyframes scroll-up {
	0% {
		transform: translateY(0%); /* Start at the top */
	}

	100% {
		transform: translateY(-100%); /* Move content completely out of view */
	}
}

.container-move-btn {
	width: 100%;
	position: relative;
}

	.container-move-btn .moving-div {
		width: 280px;
		padding: 6px 4px;
		background-color: #ffffff;
		position: absolute;
		right: -310px;
		transition: transform 1s ease, left 0s 1s;
		box-shadow: 1px 1px 14px 3px #80808061;
		display: flex;
		justify-content: space-between;
		align-items: center;
		top: 45px;
		z-index: 22;
		border-radius: 5px;
	}
		.container-move-btn .moving-div button {
			width: 100%;
			margin: 0 2px;
		}
		.container-move-btn .move-toggle {
	display: none;
}
.move-toggle:checked + .moving-div {
	transform: translateX(-23vw);
}
.move-btn {
	margin: 0;
	cursor: pointer;
	display: inline-block;
	background-color: #0c3764;
	padding: 8px 10px;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 13px;
}
.container-move-btn .rz-button.rz-dark {
	background-color: #817d04 !important;
}
.s_pr_btn {
	display: flex;
	justify-content: space-between;
}

.rz-dialog {min-height: auto!important;}
.rz-dialog-title {color: white!important;}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 74%);
	z-index: 1049;
	backdrop-filter: blur(2px);
}
.slide-out-panel {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 375px;
	/* height: 500px; */
	background: #fff;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out;
	transform: translateX(100%);
	z-index: 1050;
	top: 0;
	margin-top: 0 !important;
	display: flex;
		flex-direction: column;
}
.compact-save-header {
	padding: 10px 15px;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.panel-header {
	display: flex	;
		justify-content: space-between;
		align-items: center;
		padding: 7px 10px;
		background-color: #11537a;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
	.panel-header h5 {
		font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
	}
.panel-content {
	padding: 1rem;
    overflow-y: scroll;
    height: 100vh;
	padding-bottom: 35px;
}

.close-btn {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: white;
}
.stu_in_box {
	border-radius: 10px;
	background: #ffffff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}
	.stu_in_box .card-body {
		padding: 0;
	}
	.stu_in_box:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1)!important;
	}

	.stu_in_box .badge-purple {
		background-color: #9b59b6;
		color: #fff;
		font-weight: 500;
	}
	.stu_in_box .card-text {
		font-size: 14px;
		height: 65px;
		overflow: hidden;
	}
	.stu_in_box .card-title {
		font-size: 17px;
	}

	.stu_in_box .btn i {
		margin-right: 5px;
	}
.teacher_card {
	border-radius: 10px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	background-color: #fff;
	min-height: 120px;
}

	.teacher_card:hover {
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
		transform: translateY(-3px);
	}

	.teacher_card .profile-img {
		width: 60px;
		height: 60px;
		border-radius: 12px;
		object-fit: cover;
		background-color: #f2f2f2;
		margin-right: 6px;
		float: left;
	}
	.teacher_card .card-body {
		padding: 0;
	}
	.teacher_card h6 {
		font-size: 1rem;
	}

	.teacher_card p {
		font-size: 12px;
		margin-top: 10px;
		border-top: 1px solid #8080804f;
	}
	/*student profile*/
.stu_profile .profile-card {
	background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-height: 527px;
}

.stu_profile .profile-header {
	background: linear-gradient(135deg, #20c997, #098360);
	padding: 20px;
	color: #fff;
	text-align: center;
}

	.stu_profile .profile-header h5 {
		margin-bottom: 0;
		font-weight: bold;
		font-size: 20px;
		color: white;
	}
	.stu_profile .profile-header p {
		font-weight: 500;
		font-size: 15px;
	}
.stu_profile .profile-image {
	width: 135px;
    height: 155px;
    object-fit: cover;
    border-radius: 10%;
    border: 4px solid #0f966f;
    margin-top: -24px;
    background: #e9ecef;
    display: inline-block;
}

.stu_profile .card-section {
	padding: 10px 15px 0px 15px;
}
.stu_profile .p_bx span, .card-section span {
	font-weight: 500;
	color: #767676;
}
.stu_profile .p_bx .n_head, .card-section .n_head {
	font-weight: 500;
	color: #292929;
}
.stu_profile .p_bx {
	width: 78%;
	position: relative;
}
	
.stu_profile .info-item {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dashed #ccc;
	padding: 6px 0;
}
.stu_profile .info-item:last-child {
	border-bottom: 0px;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.stu_profile .card-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 15px;
	border-bottom: 2px solid #c8c8c8;
	padding-bottom: 5px;
	text-align: center;
}

.stu_profile .parent-card {
	background: #fdfdfd;
	border-left: 4px solid #20c997;
	border-radius: 8px;
	padding: 15px 15px 6px 15px;
	margin-bottom: 20px;
}

.stu_profile .parent-header {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1rem;
	margin-bottom: 0;
	border-bottom: 1px solid grey;
	padding-bottom: 6px;
}

.stu_profile .parent-photo {
	width: 84px;
	height: 100px;
	object-fit: cover;
	background: #f0f0f0;
	border-radius: 8px;
	margin-top: -28px;
	border: 4px solid #949494;
}
.total_att {
	background: #ffe0e0;
	padding: 7px 12px;
	color: #880f0f;
	border-radius: 4px;
	float: left;
	border: 1px solid red;
	font-weight: 600;
}
	.total_att span {
		font-weight: 700;
		font-size: 18px;
	}
.card_syllabus .card-text {
	height: auto;
}

.visitor_card {
	background: #ffffff;
	border-radius: 10px;
	padding: 15px;
	margin: 0 0 25px 0;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	position: relative;
	max-width: 500px;
	overflow: hidden;
	transition: 0.3s ease;
}

	.visitor_card:hover, card_assignemnt:hover{
		transform: translateY(-5px);
		box-shadow: 0 15px 30px rgba(0,0,0,0.15);
	}

	.visitor_card .badge-status {
		position: absolute;
		top: 10px;
		right: 10px;
		background: linear-gradient(135deg, #1abc9c, #16a085);
		color: #fff;
		font-size: 0.85rem;
		padding: 3px 9px;
		border-radius: 50px;
		font-weight: 400;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
	}

	.visitor_card .visitor-info {
		margin-top: 25px;
	}
		.visitor_card .visitor-info h5 {
			position: absolute;
			top: 10px;
			left: 10px;
			background: purple;
			color: #fff;
			font-size: 0.85rem;
			padding: 6px 9px;
			border-radius: 50px;
			font-weight: 500;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
		}

		.visitor_card .info-item {
			display: flex			;
				justify-content: space-between;
				margin-bottom: 2px;
				font-size: 13px;
		}
		.visitor_card .visitor-highlight {
			border-bottom: 1px solid #bebebe;
		}
		.visitor_card .visitor-name-label {
			    position: absolute;
				top: 7px;
				font-size: 17px;
		}

		.visitor_card .info-item .label {
			font-weight: 600;
			color: #151515;
		}

		.visitor_card .info-item .value {
			color: #555;
			text-align: right;
		}

		.visitor_card .divider {
			height: 1px;
			background: #e0e0e0;
			margin: 10px 0;
		}

		.visitor_card .action-buttons {
			    display: flex;
    			gap: 2px;;
		}

		.visitor_card .btn-action {
			border: none;
			border-radius: 30px;
			padding: 10px 20px;
			font-size: 0.95rem;
			font-weight: 600;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.book-card {
			position: relative;
			border-radius: 10px;
			overflow: hidden;
			background: #fff;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease;
			border-top: 5px solid #17a2b8;
		}

		.book-card:hover {
			transform: translateY(-5px);
		}

		.book-card .book-badge {
			position: absolute;
			top: 0;
			left: 0;
			background: #17a2b8;
			color: white;
			padding: 4px 10px;
			font-size: 14px;
			border-bottom-right-radius: 8px;
		}

		.book-card .status-badge {
			position: absolute;
			top: 2px;
			right: 0;
			background: #d06f65;
			color: white;
			padding: 1px 12px;
			font-size: 14px;
			border-bottom-left-radius: 8px;
			border-top-left-radius: 8px;
		}

		.book-card .book-body {
			padding: 15px;
			padding-top: 30px;
		}

		.book-card .book-title {
			font-weight: 700;
			font-size: 16px;
			color: #343a40;
			border-bottom: 1px solid #c8c8c8;
			padding-bottom: 4px;
			margin-bottom: 4px;
		}

		.book-card .book-details p {
			margin-bottom: 4px;
			font-size: 13px;
			line-height: 17px;
		}
		.book-card .book-details p strong {
			color:black;
		}
	.card_assignemnt {
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		border-top: 4px solid #28a745;
		position: relative;
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.card_assignemnt:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
	}

	.card-body-custom h5 {
		font-size: 16px;
	}
	.card-body-custom .ass_detail {
		height: 105px;
		overflow: hidden;
		margin-bottom: 14px;
	}
	.card-body-custom .ass_detail p {
		color: #6c757d !important;
	}
	.card_assignemnt .card-header-badge {
		background: #a020f0;
		color: #fff;
		font-size: 12px;
		padding: 4px 10px;
		border-radius: 0 0 6px 0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.card_assignemnt .download-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		margin-bottom: 5px;
	}
.payment_card {
	max-width: 600px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	margin-bottom: 20px;
}

	.payment_card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	}

	.payment_card .card-header {
		font-size: 1.1rem;
		padding: 4px 12px;
		background-color: #c3a819 !important;
	}

.payment_card card-body {
	padding: 1.25rem;
}
.payment_card h5 {
	font-size: 15px;
	text-align: center;
	margin: 0;
}
	.payment_card h5 span {
		font-size: 21px;
		display: block;
	}
.remark_card .card-text {
	height: auto;
}

.transport-card {
	max-width: 500px;
	border-radius: 10px;
	background: #f9fbff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.transport-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	}

.transport-icon {
	color: #007bff;
	background: #e9f2ff;
	padding: 12px;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	text-align: center;
	line-height: 45px;
}

.transport-card .t_details h5 {
	font-size: 17px;
}

.fee_card_thumbnail {
	border-radius: 10px;
	background: #f8f9fa;
	transition: all 0.3s ease;
}

	.fee_card_thumbnail:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
	}

	.fee_card_thumbnail .card-title {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 11px;
		border-bottom: 1px solid #c3c3c3;
		padding-bottom: 10px;
	}
	.fee_card_thumbnail strong {
		color: #212121;
	}
	.fee_card_thumbnail p {
		line-height: 6px;
		font-size: 13px;
		color: #818181;
		display: flex;
		justify-content: space-between;
	}

.custom-note-card {
	border-radius: 10px;
	border-left: 5px solid #6f42c1;
	background: #ffffff;
	transition: all 0.3s ease;
	margin-bottom: 20px;
}
.custom-note-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-note-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
}

.custom-note-card .badge-date {
	background-color: #aa69c6;
	color: #fff;
	font-weight: 400;
	padding: 5px 10px;
	font-size: 11px;
}
.custom-note-card button {
	padding: 4px 9px !important;
	width: 100% !important;
	margin-top: 8px !important;
}

	.custom-note-card .note-text {
		font-size: 0.95rem;
		color: #555;
		line-height: 1.6;
		height: 50px;
		overflow: hidden;
		margin: 0;
	}
.custom-note-card h3 {
	font-size: 17px;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 7px;
}
.custom-note-card .col-md-3 {
	padding: 0 4px;
}

.card_subject_class {
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	background: white;
	padding: 10px;
	margin-bottom: 15px;
}

	.card_subject_class:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
	}

	.card_subject_class .badge-custom {
		font-size: 11px;
		color: #1a1a1b;
		font-weight: bold;
		padding: 4px 16px;
		border-radius: 50px;
		margin-bottom: 10px;
		border: 1px solid #edc7c7;
		background: antiquewhite;
		text-transform: capitalize !important;
	}

	.card_subject_class .card-body-custom {
		padding: 8px 0;
		border-top: 1px solid #cecece;
	}
	.card_subject_class .card-header-custom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 5px;
	}
	.card_subject_class .chat_enable {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 6px;
		font-weight: 600;
		margin-bottom: 7px;
	}
		.card-body-custom button {
			padding: 5px 6px !important;
		}

.leave-card {
	max-width: 500px;
	margin: auto;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: 0.3s;
}

	.leave-card:hover {
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	}

	.leave-card .leave-type {
		background: #23588d;
		color: white;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		padding: 4px 0;
	}

	.leave-card .leave-data {
		padding: 10px;
	}

	.leave-card .leave-row {
		display: flex;
		justify-content: space-between;
		margin: 1px 0;
		border-bottom: 1px dotted #b4b4b4;
		padding-bottom: 3px;
	}
		.leave-card .leave-row:last-child {
			border-bottom: none;
		}
	.leave-card .leave-label {
		color: #141414;
		font-weight: 500;
		font-size: 13px;
	}

	.leave-card .leave-value {
		font-weight: 600;
		color: #6d6d6d;
	}

	.leave-card .balance-highlight {
		background-color: #5b5b5b;
		color: white;
		padding: 0px 0;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.leave-card .leave-actions {
		padding: 5px;
		text-align: center;
		background-color: #f8f9fa;
	}

.leave-request {
	max-width: 600px;
	margin: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
	transition: 0.3s;
}
	.leave-request:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	}
	.leave-request .status-badge {
		position: absolute;
		top: 0;
		right: 0;
		background-color: purple;
		color: white;
		font-size: 12px;
		padding: 4px 20px;
		border-bottom-left-radius: 10px;
		font-weight: 600;
	}

	.leave-request .leave-header {
		font-weight: bold;
		font-style: italic;
		background-color: #e3dbff;
		padding: 10px;
		font-size: 16px;
		border-bottom: 1px solid #eee;
		padding-top: 26px;
	}

	.leave-request .leave-body {
		padding: 10px;
	}

	.leave-request .leave-row {
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
		border-bottom: 1px dotted #c0c0c0;
	}

	.leave-request .leave-label {
		font-weight: 600;
		color: #252525;
	}

	.leave-request .leave-value {
		color: #646464;
	}

	.leave-request .leave-reason {
		margin-top: 1rem;
		font-weight: 600;
	}

.leave-request .leave-reason-text {
	margin-top: 0.3rem;
	font-weight: normal;
	color: #444;
}

	.leave-request .leave-actions {
		padding: 10px;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: center;
		gap: 4px;
	}

.fee_card_defaulter {
	max-width: 400px;
	margin-top: 26px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 10px;
	position: relative;
	margin-bottom: 20px;
	transition: 0.3s;
	padding-top: 21px;
}
	.fee_card_defaulter:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	}
	.fee_card_defaulter .admission-badge {
		position: absolute;
		top: -15px;
		left: 20px;
		background-color: #007bff;
		color: white;
		padding: 4px 12px;
		border-radius: 10px;
		font-weight: 500;
		font-size: 13px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.fee_card_defaulter h5 {
		margin-bottom: 5px;
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;
		font-weight: 600;
		font-size: 18px;
	}

	.fee_card_defaulter .fee-item {
		margin-bottom: 5px;
		display: flex;
		justify-content: space-between;
	}

	.fee_card_defaulter .fee-label {
		font-weight: bold;
		color: #333;
	}

	.fee_card_defaulter .fee-value {
		color: #444;
	}

	.fee_card_defaulter .balance-highlight {
		background-color: #fff3cd;
		color: #856404;
		padding: 4px 15px;
		border-radius: 10px;
		font-weight: bold;
		display: inline-block;
		margin-top: 0.4rem;
		font-size: 16px;
	}
.tocken_card_sec {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
	padding: 10px;
	border-radius: 10px;
	background: white;
	margin-bottom: 10px;
}
	.tocken_card_sec h5 {
		font-size: 17px;
		font-weight: 700;
		border-bottom: 1px solid #bfbfbf;
		padding-bottom: 7px;
		text-transform: uppercase;
		margin-bottom: 15px;
	}
.tocken_card_sec:hover {
	transform: translateY(-5px) scale(1.03);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.tocken_card_sec .meta-info {
	margin-top: 6px;
	padding-top: 2px;
	border-top: 1px solid #bfbfbf;
}
.token-card .profile-img {
	max-width: 85px;
	border-radius: 10%;
	border: 1px solid #ddd;
	transition: transform 0.4s ease;
	height: 108px;
	object-fit: cover;
	transition: transform 0.4s ease;
}
	.token-card h5 {
		font-weight: 700;
		font-size: 18px;
	}
	.token-card .token-heading {
		color: #6a1b9a;
		font-weight: 600;
		font-size: 1.1rem;
	}

.token-card .your-token {
	color: #d32f2f;
	font-size: 1.2rem;
	font-weight: bold;
}
	.token-card .meta-info {
		font-size: 13px;
		color: #333;
		line-height: 15px;
		margin-bottom: 3px !important;
	}

.token-card .meta-info strong {
	color: #555;
}
	.token-card .processing-token {
		font-weight: 700;
		color: green;
	}


.student_card_ptm {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	border: none;
	border-radius: 0.5rem;
	background: white;
}

	.student_card_ptm:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	}

	.student_card_ptm .card-header {
	background-color: #1c73a2;
    color: white;
    font-weight: 600;
    font-size: 15px;
    padding: 3px 12px;
    text-transform: uppercase;
	}

	.student_card_ptm .info-label {
		    color: #1f1f1f;
    font-size: 15px;
    font-weight: 600;
	}

.student_card_ptm .info-value {
	    color: #555;
    font-size: 13px;
}

.sbling-title {
	font-size: 18px;
	font-weight: 500;
	background: #c2c2c2;
	margin: 17px 0px 0px 0px;
	padding: 8px 16px;
	border-radius: 5px 5px 0px 0;
}
.sib_bx {
	display: flex;
	gap: 6px;
	flex-direction: unset;
	flex-wrap: wrap;
	margin-top: 6px;
}
	.sib_bx .ptm_bx_new {
		background: #fef0ff;
		padding: 5px;
		border-radius: 5px;
		box-sizing: border-box;
		position: relative;
		flex: 0 0 48%;
		text-align: center;
		border: 1px solid grey;
	}
.ptm_sec {
	border: 1px solid grey;
	padding: 10px;
	margin-top: 8px;
}
.sib_bx .ptm_bx_new h3 {
	font-weight: 500;
	margin: 0;
	background: #436475;
	color: white;
	padding: 3px 6px;
	font-size: 13px;
	text-transform: uppercase;
}
.sib_bx .ptm_bx_new h6 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: -3px;
}
.sib_bx .ptm_bx_new h4 {
	margin: 0;
	padding: 0;
	margin-top: 7px;
	margin-bottom: 10px !important;
}
		.sib_bx .ptm_bx_new button {
			padding: 3px 10px !important;
			background-color: #318e31 !important;
		}
.leave-card-new {
	background: white;
	/* padding: 10px; */
	border-radius: 10px;
}
	.leave-card-new .leave-type {
		padding: 5px 7px;
		font-size: 15px;
		font-weight: 600;
		background: #09bbcb;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		color: white;
	}
	.leave-card-new .leave-data-new {
		padding: 10px;
	}
		.leave-card-new .leave-data-new h4 {
			margin: 0;
			padding: 0;
			margin-bottom: 9px !important;
			font-size: 15px;
	
			padding: 5px 7px;
			background: #e2e2e2;
		}
		.leave-card-new .leave-data-new .col_flex_hr {
			display: flex;
			padding: 0 10px;
			align-items: center;
			width: 100%;
		}
			.leave-card-new .leave-data-new .col_flex_hr input {
				padding: 4px 6px;
				background: #f1f1f1;
				border: 0;
			}
			.leave-card-new .leave-data-new .col_flex_hr span i {
				font-size: 12px;
				font-weight: 600;
			}
			.leave-card-new .leave-data-new .col_flex_hr .rz-numeric {
				width: 165px;
				margin-right: 10px;
				border: 0;
				height: auto;
			}
			.leave-card-new .leave-data-new .col_flex_hr label {
				width: 145px;
				float: left;
			}
	.leave-card-new .leave-actions {
		text-align: center;
		padding: 9px 0;
		border-top: 1px solid grey;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
.chat-panel-content {
	padding: 1rem;
	overflow-y: scroll;
	height: 300px;
	padding-bottom: 15px;
}
.chat-message {
	max-width: 75%;
	padding: 10px 14px;
	margin: 6px 0;
	border-radius: 5px;
	position: relative;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
}

.send_msg {
	background-color: #edf9e3;
	align-self: flex-end;
	margin-left: auto;
	text-align: left;
}

.recieved_msg {
	background-color: #e7f5fe;
	align-self: flex-start;
	margin-right: auto;
	text-align: left;
}
.chat-message span {
	display: block;
	font-size: 11px;
	margin-top: 5px;
}
.chat-input {
	border-top: 1px solid #ccc;
	padding: 12px 16px;
	background-color: #fff;
	gap: 10px;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
	bottom: 0;
	z-index: 1;
	position: fixed;
	left: 0;
	right: 0;
}

	.chat-input .rz-textbox {
		flex-grow: 1;
		padding: 10px 14px;
		border-radius: 20px;
		border: 1px solid #ccc;
		font-size: 14px;
		transition: border-color 0.3s;
	}

		.chat-input .rz-textbox:focus {
			border-color: #128C7E;
			outline: none;
		}
		  .rz-grid-table-striped tr.highlight-row {
        background-color: #fff3cd !important;
        font-weight: 500;
    }
	.chat-input .rz-button {
		background-color: #349d91 !important;
		color: white;
		padding: 8px 18px;
		font-size: 14px;
		border: none;
		transition: background-color 0.3s;
		min-width: 100px;
	}  

		.chat-input .rz-button:hover {
			background-color: #0d6d5a;
		}
		.formobile{padding-top: 8%;}
@media (max-width: 768px) {
	.formobile{padding-top: 3%;}
	.chat-message {
		max-width: 90%;
	}
}

.chat-launch {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #007bff;
	color: white;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	cursor: pointer;
}

.side-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 350px;
	height: 100%;
	background: #fff;
	box-shadow: -2px 0 10px rgba(0,0,0,0.1);
	padding: 20px;
	overflow-y: auto;
}

.student-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}

	.student-item img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		object-fit: cover;
	}

.student-info {
	flex-grow: 1;
}

	.student-info strong {
		display: block;
		font-size: 1rem;
		color: #000;
	}

	.student-info small {
		color: #555;
	}

.chat-box {
	margin-top: 20px;
	border-top: 1px solid #ddd;
	padding-top: 10px;
}

.chat-box h4 {
	margin-bottom: 10px;
}

.chat-messages {
	height: 200px;
	overflow-y: auto;
	background: #f1f1f1;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.chat-message {
	margin-bottom: 8px;
	padding: 8px;
	border-radius: 8px;
	max-width: 80%;
}

.sent {
	background-color: #daf1da;
	align-self: flex-end;
	text-align: right;
}

.received {
	background-color: #e4e6eb;
}

.chat-input {
	display: flex;
	gap: 10px;
}

.chat-input input {
	flex-grow: 1;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.chat-input button {
	background: #28a745;
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: 5px;
	cursor: pointer;
}
.chat_btn {
	position: fixed;
	bottom: 57px;
	right: 8px;
	z-index: 1;
}
.chat_btn .chat-toggle-btn {
	background-color: #59b66f;
	color: white;
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 24px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.chat_btn span{
	position: absolute;
	right: 0;
	background: #d26f6f;
	bottom: 36px;
	height: 22px;
	width: 22px;
	border-radius: 46%;
	color: white;
	font-weight: 600;
	text-align: center;
	line-height: 19px;
}
	.custom-panel, .chatbox-panel {
		position: fixed;
		top: 0;
		right: -400px;
		width: 350px;
		height: 100%;
		background: #fff;
		box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3);
		transition: right 0.3s ease-in-out;
		z-index: 999;
		padding: 0px;
		overflow-y: auto;
	}

		.custom-panel.open,
		.chatbox-panel.open {
			right: 0;
		}
.custom_panel_headr {
	background: #4874c3;
	color: white;
	position: relative;
	padding: 2px 0;
}
	.custom_panel_headr h3 {
		margin: 0;
		color: white;
		font-size: 17px;
		padding: 7px 10px;
		font-weight: 400;
	}
	.custom_panel_headr button {
		position: absolute;
		top: 2px;
		right: 7px;
	}

.close-btn {
	background: transparent;
	border: none;
	font-size: 20px;
	float: right;
	cursor: pointer;
}

.student-item {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	transition: background-color 0.2s;
	gap: 10px;
}

	.student-item:hover {
		background-color: #f5f5f5;
	}

	.student-item img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

.student-details {
	display: flex;
	flex-direction: column;
	width: 100%;
}
	.student-details span {
		background: #ed7b7b;
		border-radius: 8px;
		font-weight: 500;
		text-align: center;
		color: white;
		position: absolute;
		right: 27px;
		top: 8px;
		font-size: 12px;
		line-height: 20px;
	}

.chat-message {
	padding: 8px 12px;
	background-color: #f1f1f1;
	border-radius: 10px;
	margin-bottom: 10px;
	max-width: 80%;
}

.chat-input {
	display: flex;
	margin-top: 20px;
	gap: 10px;
}

	.chat-input input {
		flex: 1;
		padding: 8px;
		border-radius: 6px;
		border: 1px solid #ccc;
	}

	.chat-input button {
		padding: 8px 16px;
		border: none;
		border-radius: 6px;
		background: #007bff;
		color: white;
		cursor: pointer;
	}

.student-card-chat {
	display: flex;
	align-items: center;
	padding: 10px;
	border-radius: 12px;
	background-color: #f9f9fb;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease;
}

	.student-card-chat:hover {
		background-color: #eef1f7;
	}

	.student-card-chat img {
		width: 72px;
		height: 95px;
		object-fit: cover;
		border-radius: 10% !important;
		border: 2px solid #dee2e6;
	}
	.student-chat-detail h6 {
		margin: 0;
		background: transparent;
		padding: 0;
		margin-bottom: 5px;
		font-size: 16px;
		font-weight: 700;
	}
	.student-chat-detail p {
		margin: 0;
		font-size: 13px;
	}
.current-question {
	background: #f0dfff;
	padding: 24px 11px;
	border-radius: 5px;
	margin-top: 20px;
	text-align: center;
	border: 1px solid #a97ecf;
}
.current-question h5 {
	font-size: 25px;
	font-weight: 500;
}
.current-question p {
	margin: 0;
	font-size: 14px;
}
 .student-thumbnail-mark-entry .stu_thum_ftr {
	display: flex;
	justify-content: space-between;
	background: antiquewhite;
	padding: 3px 8px;
	border-radius: 5px;
}
.student-thumbnail-mark-entry .stu_thum_ftr p {
	margin: 0;
}

.student-thumbnail-mark-entry {
	background: #ffffff;
	border-radius: 8px;
	color: #333;
	position: relative;
}
.student-thumbnail-mark-entry h5 {
	font-size: 20px;
	font-weight: 600;
}
.student-thumbnail-mark-entry h5 span {
	display: block;
	font-size: 13px;
	margin-top: 3px;
	font-weight: 400;
	color: #737373;
}
.highlight-adm {
	color: #ffffff;
	font-weight: 500;
	position: absolute;
	top: 0;
	right: 0;
	background: #3f51b5;
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 3px;
}

.highlight-max {
	color: #4caf50;
	font-weight: bold;
}

.mark-entry-container {
	background: #ffffff;
	border-radius: 8px;
}

.btn-start {
	background-color: #2196f3;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 6px 16px;
}

.btn-start:disabled {
	background-color: #90caf9;
}

.btn-finish {
	background-color: #f44336;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 6px 16px;
}

.btn-finish:disabled {
	background-color: #ef9a9a;
}

.mark-entry-container .status {
	font-style: italic;
	font-size: 0.95rem;
	color: #757575;
}

.mark-entry-container .status.listening {
	color: #388e3c;
	font-weight: bold;
}

.marks-grid .card {
	border-radius: 10px;
	transition: box-shadow 0.2s ease;
}

.marks-grid .card:hover {
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.mark-item .question-no {
	font-size: 1.1rem;
	color: #3f51b5;
}
.marks-display {
	background: #d7edfa;
}
.marks-display h5 {
	font-size: 18px;
	font-weight: 500;
	padding: 6px 10px;
	background: #6197b7;
	color: white;
}

.mark-item .mark-value {
	font-size: 1.2rem;
	color: #212121;
}
.final_fee_popup {
	padding: 13px 11px;
}
.final_fee_popup .final_fee_popup_box {
	text-align: center;
}
.final_fee_popup .final_fee_popup_box h5 {
	font-size: 17px;
	text-transform: uppercase;
	color: black;
	font-weight: 500;
}
.final_fee_popup .final_fee_popup_box p {
	margin: 0;
	background: beige;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 12px;
}

.material-container .rz-tabview-nav a {
	padding: 12px 30px !important;
	border-radius: 50px;
	background: #e2e2e2;
}
.material-container .rz-tabview-nav .rz-tabview-selected a {
	color: #fff !important;
    background: #0d64a2;
	
}
.material-container .rz-tabview-nav a:hover {
	color: #fff !important;
    background: #0d64a2;
	
}
.material-container .rz-tabview-nav li {
	background: transparent !important;
	border: 0 !important;
}
.material-container {
	background: #ffffff;
	border-radius: 10px;
	padding: 2rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease-in-out;
}
	.material-container h2 {
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 29px;
		border-bottom: 1px solid #cecece;
		padding-bottom: 14px;
	}
	.material-tabs .rz-tabs-header {
		background: #ffffff;
		border-bottom: 2px solid #dee2e6;
		padding-bottom: 0.5rem;
	}
.material-container .rz-tabview-top > .rz-tabview-nav {
	margin-bottom: 14px;
}
.material-tabs .rz-tab {
	padding: 0.75rem 1.5rem;
	margin-right: 0.5rem;
	border: none;
	border-radius: 8px 8px 0 0;
	background-color: #dee2e6;
	color: #495057;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

	.material-tabs .rz-tab:hover {
		background-color: #ced4da;
	}

.material-tabs .rz-tab-active {
	background-color: #198754;
	color: #fff;
}

/* Input Fields */
.material-input {
	border: 1px solid #ced4da;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: #f8f9fa;
	transition: border 0.3s;
}

	.material-input:focus {
		border-color: #198754;
		outline: none;
		background-color: #fff;
	}

.material-btn {
	padding: 0.6rem 1.2rem;
	font-weight: 600;
	border-radius: 0.5rem;
	border: none;
	transition: background-color 0.3s, box-shadow 0.3s;
}

	.material-btn.btn-success {
		background-color: #198754;
		color: #fff;
	}

		.material-btn.btn-success:hover {
			background-color: #157347;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

	.material-btn.btn-info {
		background-color: #0dcaf0;
		color: #fff;
	}

		.material-btn.btn-info:hover {
			background-color: #0bb3d4;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

.material-container .rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled){
	border:0!important;
}
.student-card {
	background: #ffffff;
	border-radius: 1rem;
	text-align: center;
	transition: transform 0.3s, box-shadow 0.3s;
	border: 1px solid #dee2e6;
	margin-bottom: 15px;
}

	.student-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	}
	.student-card button {
		width: 100%;
	}
	.student-card-header {
		border-bottom: 1px solid #e9ecef;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;
	}
.student-card-header span {
	padding: 7px 11px;
	color: white;
}
.student-card-body h5 {
	margin-bottom: 0.5rem;
	color: #212529;
	font-size: 18px;
	font-weight: 500;
	text-align: left;
	margin-left: 8px;
	margin: 0;
}
.student-card-body img {
	border: 1px solid #d6d6d6;
	width: 62px !important;
	border-radius: 5px !important;
	height: 64px !important;
	margin: 0 !important;
}
.help-section {
	background: #f8d1d1;
	border-radius: 0 !important;
	line-height: 1.6;
	font-size: 0.95rem;
	height: 100vh;
}

	.help-section h4 {
		color: #198754;
		margin-bottom: 1rem;
		font-weight: bold;
	}

	.help-section ul li {
		margin-bottom: 0.75rem;
	}

	.help-section ul ul li {
		list-style: circle;
		margin-left: 1rem;
	}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.notice-panel {
		padding: 0 0;
	}
	.publicnoticedetl{height: auto;}
	.regtable h2 {
		text-align: center;
		margin-top: 5px;
		margin-bottom: -11px;
	}

	.parent_link{padding: 20px;}
	.material-container{
        margin-bottom: 10px;
    }
	.material-container .rz-tabview-nav{
		display: flex!important;
	}
	.material-container .rz-tabview-nav a{
		padding: 9px 15px !important;
	}
	.search-section button{
		margin-top: 15px !important;
	}
	.nonstagbothday h6{
		text-align: center;
	}
	.student-card {
		margin-bottom: 1rem;
	}

	.material-tabs .rz-tab {
		font-size: 0.9rem;
		padding: 0.5rem 1rem;
	}

	.material-container {
		padding: 1rem;
	}
}
/* parent link css*/
@media (max-width: 768px) {
	.student-thumbnail-mark-entry .btn {
		width: 100%;
		margin-bottom: 10px;
	}

}
.fee_ui_modify .rz-datepicker {
	width: auto !important;
}

.fee_ui_modify {
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}
	.fee_ui_modify .fee_data_table {
		height: 375px;
		overflow-x: scroll;
		padding: 10px;
		background: white;
		border-radius: 10px;
	}
		.fee_ui_modify .fee_data_table td button {
			padding: 0 !important;
		}
			.fee_ui_modify .fee_data_table td button i {
				font-size: 12px;
			}
.fee_ui_modify .pill {
	background: #68b482;
	padding: 1px 16px;
	border-radius: 10px;
	margin: 5px 14px;
	display: flex;
	font-size: 14px;
	align-items: center;
	gap: 12px;
	color: #ffffff;
}

	.fee_ui_modify .header-section {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 10px;
		background: #ffffff;
		border-radius: 10px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.fee_ui_modify .student-box {
		background: #ffffff;
		border-radius: 10px;
	}
		.fee_ui_modify .student-box .student-box-admn {
			background: #3266d2;
			color: white;
			max-width: 134px;
			text-align: center;
			padding: 3px 0;
			border-radius: 5px;
			margin-bottom: 4px;
		}
		.fee_ui_modify .student-box img {
			border: 1px solid #cfcfcf;
			height: 68px;
			width: 65px;
			border-radius: 5px;
			float: left;
			margin-left: 7px;
			margin-right: 7px;
		}

		.fee_ui_modify .student-box h2 {
			font-size: 20px;
			color: #2b2b2b;
			font-weight: 700;
			display: flex;
			flex-direction: column;
			height: 100%;
			margin: 0;
		}
			.fee_ui_modify .student-box h2 span {
				margin: 0 0 5px;
				font-size: 16px;
				color: #2b2b2b;
				display: block;
				font-weight: 400;
				margin-top: 5px;
			}

		.fee_ui_modify .student-box .recp_dtl {
			background: #d7e8d8;
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			text-align: center;
			margin-top: 25px;
			padding: 10px 0;
			border-top: 2px solid #95c795;
		}
		.fee_ui_modify .student-box h6 {
			font-weight: 600;
			font-size: 15px;
			margin-bottom: 0;
		}
		.fee_ui_modify .student-box .amount {
			margin-top: 0px;
			font-size: 22px;
			color: #28a745;
			font-weight: bold;
		}
	.fee_ui_modify .form-area {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		background: white;
		padding: 15px;
		border-radius: 10px;
		margin-top: 30px;
	}
		.fee_ui_modify .form-area .form_area_fields {
			flex: 1 1 calc(25% - 15px);
		}
		.fee_ui_modify .form-area label {
			display: block;
		}
		.fee_ui_modify .form-area .rz-dropdown {
			margin: 0;
		}

	.fee_ui_modify .footer {
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		gap: 21px;
		align-items: center;
		background: #dfc5ff;
		padding: 15px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		border-top: 2px solid #8f6fb8;
	}

		.fee_ui_modify .footer input {
			width: auto;
			flex-grow: 1;
			padding: 10px;
			border-radius: 6px;
			border: 1px solid #ccc;
		}

		.fee_ui_modify .footer button {
			color: white;
		}

	.fee_ui_modify .btn-green {
		background: #28a745;
	}

	.fee_ui_modify .btn-blue {
		background: #0d6efd;
	}

	.fee_ui_modify .btn-red {
		background: #dc3545;
	}

	.bt-1 {
		border-top: 1px solid #d9d9d9;
		padding-top: 10px;
	}
/*staff view*/
	.m_margin_bottom {
		margin-bottom: 10px;
	}
	.staff_view_detail .staff_v_dtl_htop {
		max-width: 100%;
		display: grid;
		grid-template-columns: 280px 1fr;
		gap: 20px;
	}
	.staff_view_detail .staff-box {
		background: #fff;
		padding: 0;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
		text-align: center;
	}

	.staff_view_detail .staff-box img {
		width: 85px;
		height: 85px;
		border-radius: 50%;
		border: 5px solid #d3d3d3;
		margin-bottom: 0px;
	}

	.staff_view_detail .staff-box h2 {
		font-size: 16px;
		margin-top: 3px;
		font-weight: 700;
		margin-bottom: 2px;
	}

	.staff_view_detail .staff-box .tag, .staff_view_detail .staff-box .badge {
		display: inline-block;
		padding: 3px 12px;
		border-radius: 20px;
		margin: 5px 3px;
		font-size: 11px;
		font-weight: 500;
		line-height: normal;
	}

	.staff_view_detail .tag {
		background: #1976d2;
		color: #fff;
	}

	.staff_view_detail .badge {
		background: #e53935;
		color: #fff;
	}

	.staff_view_detail .staff-box .info-item {
		font-size: 12px;
		margin: 2px 0;
	}

	.staff_view_detail .address-box {
		background: #edfdf1;
		padding: 8px;
		border-top: 2px solid #79c98b;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

		.staff_view_detail .address-box .section-header {
			font-size: 14px;
			margin-bottom: 10px;
			font-weight: 600;
			border-left: 4px solid #2196f3;
			padding-left: 8px;
			color: #333;
		}
	.staff_view_detail .staff_bx_pro {
		padding: 7px;
	}
.staff_view_detail .address-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	font-size: 13px;
}
	.staff_view_detail .address-grid div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.staff_view_detail .address-grid label {
		font-size: 10px;
		color: #777;
		text-transform: uppercase;
	}

.staff_view_detail .address-grid span {
	font-weight: 600;
	color: #333;
}

.staff_view_detail .info-panel {
	background: #fff;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.staff_view_detail .section-header {
	font-size: 16px;
	margin-bottom: 15px;
	font-weight: 600;
	border-left: 4px solid #2196f3;
	padding-left: 10px;
	color: #333;
}

.staff_view_detail .info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

.staff_view_detail .info-box {
	background: #f4f7fb;
	border: 1px solid #ededed;
	padding: 8px 8px;
	border-radius: 5px;
}

	.staff_view_detail .info-box label {
		font-size: 10px;
		color: #777;
		display: block;
		text-transform: uppercase;
		margin-bottom: 2px;
	}

	.staff_view_detail .info-box span {
		font-size: 13px;
		font-weight: 600;
		color: #333;
	}

.staff_view_detail .full-width {
	grid-column: 1 / -1;
}



.marquee-container1 {
	height: 294px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #9395de #f1f1f1;
}

.marquee-container1::-webkit-scrollbar {
	width: 6px;
}

.marquee-container1::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.marquee-container1::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 3px;
}

.marquee-container1::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.marquee-content1 {
	display: block;
	width: 100%;
	padding: 10px;
	animation: scroll-up 30s linear infinite;
}
.marquee-content1 .student_not{
	margin-bottom: 13px;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 6px;
}
.marquee-container1:hover .marquee-content1 {
	animation-play-state: paused;
}

.marquee-content1 ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Inner content styling */
.stunotbox {
	display: flex;
	justify-content: flex-start;
	gap: 3px;
	width: 100%;
}
.fee_pen_btns {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #dfdfdf;
	padding-top: 10px;
}
.stu_ass_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	margin-top: 12px;
	border-top: 1px solid #d7d7d7;
	padding-top: 7px;
}

.stu_home_dtl_btns {
	display: flex;
	gap: 11px;
	border: 1px solid #d1aeae;
	background: #f6f6f5;
	padding: 7px 13px;
	border-radius: 5px;
	margin-bottom: 9px;
	align-items: center;
}

.staff_ad_dt_tm {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 0;
}


/* Only show on mobile */
@media (max-width: 768px) {
	.left_menu {
    	padding: 8px 0;
	}
	.mobile-footer-tabs {
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		border-top: 1px solid #ddd;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		z-index: 9999;
	}

		.mobile-footer-tabs a {
			flex: 1;
			text-align: center;
			padding: 12px 0;
			font-size: 14px;
			color: #333;
			font-weight: 500;
			background: #ffffff;
			border-right: 1px solid #d4d4d4;
		}
		
		.mobile-footer-tabs a i {
			font-size: 12px;
			display: block;
			margin-bottom: 0px;
			background: #c9eeff;
			height: 26px;
			width: 26px;
			border-radius: 50%;
			text-align: center;
			line-height: 26px;
		}
		.mobile-footer-tabs a:first-child {
			margin: 0 4px;
			padding: 6px 0;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			border-right: 1px solid #d2d2d2;
		}
		
		.mobile-footer-tabs a:first-child i {
			color: #ff5722;
		}
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.student-info-box {
	display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    gap: 5px;
    position: relative;
    margin-bottom: 10px;
  }
  .student-info-box img{
	height: 58px;
    width: 50px;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
  }
  .student-info-box h6{
	position: absolute;
    top: 0;
    right: 0;
    font-size: 11px;
    background: #fe6c6c;
    padding: 3px 9px;
    color: white;
    font-weight: 500;
    display: inline-block;
    border-top-right-radius: 10px;
    margin: 0;
  }
  .student-info-box .student-photo {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 16px;
	border: 2px solid #dee2e6;
  }

  .student-info-box .student-details {
	display: flex;
	flex-direction: column;
  }

  .student-info-box .student-name {
	font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #000000;
  }

  .student-info-box .student-class {
	font-size: 11px;
    color: #555;
    margin-top: 0px;
    margin-bottom: 0;
  }
  .student-info-box a{
	color: white;
    background: #4047a7;
    display: inline-block;
    max-width: 75px;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 5px;
    text-align: center;
    margin-top: 4px;
  } 
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000de;
	z-index: 2221;
	cursor: pointer;
	opacity: 0;
	animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mobile-menu-close-btn {
	position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 2223;
    transition: background-color 0.3s ease;
}

.mobile-menu-close-btn:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.mobile-menu-close-btn i {
	color: white;
	font-size: 20px;
}
.menu-header{
	background: linear-gradient(135deg, #010115 0%, #071b51 100%);
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.menu-header .brand-section{
	    display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 5px;
}
.menu-header .brand-section img{
	max-width: 44px;
}
.menu-header .brand-section h6{
	font-size: 14px;
    text-align: left;
    margin: 0;
    color: white;
    font-weight: 500;
}
.menu-header .academic-year{
	background: #1a284a;
    border-radius: 5px;
    margin-top: 5px;
    color: white;
    border: 1px solid #5d5daf;
    font-size: 12px;
    display: inline-block;
    padding: 0px 10px;
}
	@media (max-width: 768px) {

	.nav-item a {
		padding: 8px 10px!important;
		background: #061645;
		transition: all 0.3s ease;
	}
	.nav-item a.active {
		background: #02091c;
	}
	.nav-item a:hover {
		background: #02091c;
		transition: all 0.3s ease;
	}
	.menuleftfix {
		position: fixed !important;
        left: -200px;
        background: #061645;
        margin-top: 55px !important;
        width: 200px;
        z-index: 23456;
        height: 100% !important;
        transition: left 0.3s ease;
	}
	
	.menuleftfix:not(.collapse) {
		left: 0; /* Slide to visible position */
	}
}

/* ===== Staff Detail Modern Page Styles ===== */
.staff-detail-modern {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    min-height: 100vh;
    padding: 20px;
}

.staff-detail-modern .staff-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.staff-detail-modern .staff-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.staff-detail-modern .staff-card-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 3px solid #1e40af;
    position: relative;
}

.staff-detail-modern .staff-card-header i {
    font-size: 24px;
    color: #dbeafe;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.staff-detail-modern .staff-card-header h6 {
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.staff-detail-modern .same-address-checkbox {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.staff-detail-modern .same-address-checkbox:hover {
    background: rgba(255, 255, 255, 0.25);
}

.staff-detail-modern .same-address-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.staff-detail-modern .same-address-checkbox span {
    font-weight: 500;
}

.staff-detail-modern .form-group {
    margin-bottom: 20px;
}

.staff-detail-modern .form-group label {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.staff-detail-modern .form-control,
.staff-detail-modern .rz-textbox,
.staff-detail-modern .rz-dropdown,
.staff-detail-modern .rz-datepicker,
.staff-detail-modern .rz-numeric {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: #f9fafb !important;
}

.staff-detail-modern .form-control:focus,
.staff-detail-modern .rz-textbox:focus,
.staff-detail-modern .rz-dropdown:focus,
.staff-detail-modern .rz-datepicker:focus {
    border-color: #3b82f6 !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

.staff-detail-modern .wardphoto {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 3px solid #e5e7eb;
    transition: all 0.3s ease;
}

.staff-detail-modern .wardphoto:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.staff-detail-modern .pichange_stu_pulic {
    margin-top: 12px;
}

.staff-detail-modern .pichange_stu_pulic button {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.staff-detail-modern .pichange_stu_pulic button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.staff-detail-modern .staffsignbx {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 20px;
    background: #f9fafb;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-detail-modern .staffsignbx img {
    max-height: 100px;
    border-radius: 4px;
}

.staff-detail-modern .staff-action-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding: 20px;
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
    margin: 20px -20px -20px;
}

.staff-detail-modern .staff-btn-back {
    min-width: 140px;
    height: 48px;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.staff-detail-modern .staff-btn-back:hover {
    background: #4b5563;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.staff-detail-modern .staff-btn-save {
    min-width: 160px;
    height: 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.staff-detail-modern .staff-btn-save:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.staff-detail-modern .input-group-text {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border: 2px solid #e5e7eb;
    border-right: none;
    color: #374151;
    font-weight: 600;
    border-radius: 8px 0 0 8px;
}

.staff-detail-modern .input-group .form-control {
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ===== Staff Leave Status Modern Popup Styles ===== */
.staff-leave-status-modern {
    background: #fff;
    padding: 0;
}

.staff-leave-status-modern .leave-summary-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 12px;
}

.staff-leave-status-modern .leave-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    border: 1px solid #e5e7eb;
	width: 100%;
}

.staff-leave-status-modern .leave-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.staff-leave-status-modern .leave-card-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.staff-leave-status-modern .leave-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
	width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-leave-status-modern .leave-icon-wrapper i {
    font-size: 12px;
    color: white;
}

.staff-leave-status-modern .leave-type-name {
    margin: 0;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.staff-leave-status-modern .leave-card-body {
    padding: 10px;
}

.staff-leave-status-modern .leave-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.staff-leave-status-modern .leave-stat-item {
    background: #f9fafb;
    padding: 6px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
}

.staff-leave-status-modern .leave-stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
}

.staff-leave-status-modern .leave-stat-item:hover {
    border-color: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.staff-leave-status-modern .leave-stat-item.credit::before {
    background: #10b981;
}

.staff-leave-status-modern .leave-stat-item.credit:hover {
    border-color: #10b981;
}

.staff-leave-status-modern .leave-stat-item.applied::before {
    background: #3b82f6;
}

.staff-leave-status-modern .leave-stat-item.applied:hover {
    border-color: #3b82f6;
}

.staff-leave-status-modern .leave-stat-item.approved::before {
    background: #8b5cf6;
}

.staff-leave-status-modern .leave-stat-item.approved:hover {
    border-color: #8b5cf6;
}

.staff-leave-status-modern .leave-stat-item.rejected::before {
    background: #ef4444;
}

.staff-leave-status-modern .leave-stat-item.rejected:hover {
    border-color: #ef4444;
}

.staff-leave-status-modern .leave-stat-item.consumed::before {
    background: #f59e0b;
}

.staff-leave-status-modern .leave-stat-item.consumed:hover {
    border-color: #f59e0b;
}

.staff-leave-status-modern .leave-stat-item.balance::before {
    background: #06b6d4;
}

.staff-leave-status-modern .leave-stat-item.balance:hover {
    border-color: #06b6d4;
}

.staff-leave-status-modern .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.staff-leave-status-modern .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
}

.staff-leave-status-modern .leave-stat-item.credit .stat-value {
    color: #059669;
}

.staff-leave-status-modern .leave-stat-item.applied .stat-value {
    color: #2563eb;
}

.staff-leave-status-modern .leave-stat-item.approved .stat-value {
    color: #7c3aed;
}

.staff-leave-status-modern .leave-stat-item.rejected .stat-value {
    color: #dc2626;
}

.staff-leave-status-modern .leave-stat-item.consumed .stat-value {
    color: #d97706;
}

.staff-leave-status-modern .leave-stat-item.balance .stat-value {
    color: #0891b2;
}

/* Custom scrollbar for leave status popup */
.staff-leave-status-modern::-webkit-scrollbar {
    width: 6px;
}

.staff-leave-status-modern::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.staff-leave-status-modern::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.staff-leave-status-modern::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@media (max-width: 768px) {
    .staff-leave-status-modern .leave-summary-container {
        grid-template-columns: 1fr;
    }

    .staff-leave-status-modern .leave-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Modern Reusable Card Styles (Common for All Pages) ===== */

/* Page Wrapper */
.modern-page-wrapper {
	min-height: 100vh;
    padding: 0;
}

/* Modern Filter Card */
.modern-filter-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0 !important;
}

.filter-card-header {
	background: linear-gradient(135deg, #f59e0b 0%, #f9c983 100%);
    padding: 2px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-card-header i {
	font-size: 20px;
    color: white;
}

.filter-card-header span {
    color: white;
    font-weight: 600;
    font-size: 15px;
}

.filter-card-content {
	padding: 10px;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
}

.filter-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: 20px;
    align-items: end;
}

.filter-item label.filter-label {
	display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 600;
		color: #374151;
		font-size: 13px;
		margin-bottom: 6px;
}

.filter-label i {
    color: #f59e0b;
    font-size: 16px;
}

.modern-checkbox {
	display: flex	;
		align-items: center;
		gap: 5px;
		margin: 0;
		cursor: pointer;
		padding: 9px 16px;
		background: white;
		border-radius: 8px;
		border: 2px solid #e5e7eb;
		transition: all 0.3s 
	ease;
}

.modern-checkbox:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.modern-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #6366f1;
}

.modern-checkbox .checkbox-label {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
}

.modern-dropdown,
.modern-numeric {
    background: white !important;
    transition: all 0.3s 
ease !important;
}

.modern-dropdown:focus,
.modern-numeric:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
    outline: none !important;
}
/* Modern Grid Card */
.modern-grid-card {
	background: white;
    overflow: hidden;
    padding: 0 !important;
}
.back_button_dark{
	background: #4c4c4c !important;
    color: white;
    border: 1px solid #4c4c4c !important;
}
.back_button_outline{
	background: #4c4c4c00 !important;
    color: #2d2d2d !important;
    border: 1px solid #4c4c4c !important;

}
.back_button_outline .rz-button-box, .back_button_outline i{
	color: #2d2d2d !important;
}

.grid-card-header {
	background: linear-gradient(135deg, #3b82f6 0%, #95ded7 100%);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
	justify-content: space-between;
}

.grid-card-header i {
	font-size: 16px;
    color: #dbeafe;
}
.grid-card-header .grid-card-title{
	display: flex;
		align-items: center;
		gap: 5px;
}

.grid-card-header .grid-card-title span {
	color: white;
    font-weight: 600;
    font-size: 15px;
}

.grid-card-header .selected-count {
	margin-left: auto;
    background: rgb(46 190 177);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.modern-datagrid {
    background: white;
}

.modern-datagrid .rz-datatable-even {
    background: #f9fafb;
}

.modern-datagrid .rz-datatable-odd {
    background: white;
}

.modern-datagrid tbody tr:hover {
    background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%) !important;
    transition: all 0.3s ease;
}

.modern-checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modern-checkbox-cell input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.empno-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f2937;
}

.empno-cell i {
    color: #6366f1;
    font-size: 16px;
}

.name-cell {
    font-weight: 500;
    color: #374151;
}

.modern-amount-input {
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #f0fdf4 !important;
    transition: all 0.3s ease !important;
}

.modern-amount-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    background: white !important;
}

.compact-card .rz-grid-table td {
    padding: 14px 12px;
    vertical-align: middle;
}

@media (max-width: 1200px) {
    .filter-row {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .filter-item.action-buttons {
        grid-column: span 2;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .filter-row {
        grid-template-columns: 1fr;
    }

    .filter-item.action-buttons {
        grid-column: 1;
        flex-direction: column;
    }

    .modern-btn-primary,
    .modern-btn-success {
        width: 100%;
    }
}

/* Multimage Page Styles */
.main-container-multimage {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem 0;
}

.main-container-multimage .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 4rem);
}

.main-container-multimage .two-column-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Left Column - Upload Area */
.main-container-multimage .upload-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: fit-content;
}

.main-container-multimage .upload-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 9px 28px;
    position: relative;
}

.main-container-multimage .upload-header h3 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 22px;
    color: white;
}

.main-container-multimage .security-badge {
	display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 1rem;
    backdrop-filter: blur(10px);
}

.main-container-multimage .upload-body {
    padding: 1rem;
}

.main-container-multimage .upload-area {
	border: 3px dashed #e1e5e9;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    background: linear-gradient(145deg, #f8f9fa, #ffffff);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.main-container-multimage .upload-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s ease;
}

.main-container-multimage .upload-area:hover {
    border-color: #667eea;
    background: linear-gradient(145deg, #f0f8ff, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.main-container-multimage .upload-area:hover::before {
    left: 100%;
}

.main-container-multimage .upload-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 1rem;
    display: block;
}

.main-container-multimage .upload-text {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.main-container-multimage .upload-subtext {
    font-size: 0.9rem;
    color: #adb5bd;
}

/* Form Controls */
.main-container-multimage .form-group {
    margin-bottom: 10px;
}

.main-container-multimage .form-label {
	font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

.main-container-multimage .form-select, 
.main-container-multimage .form-control {
	border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #e6e6e6;
}

.main-container-multimage .form-select:focus, 
.main-container-multimage .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    outline: none;
}

.main-container-multimage .custom-size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

/* Right Column - Instructions */
.main-container-multimage .instructions-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.main-container-multimage .instructions-header {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 3px 10px;
}

.main-container-multimage .instructions-header h4 {
	margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 16px;
    color: white;
}

.main-container-multimage .instructions-body {
	padding: 1rem;
}

.main-container-multimage .instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-container-multimage .instructions-list li {
	padding: 0;
    border-bottom: 1px solid #d0e4ee;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.main-container-multimage .instructions-list li:last-child {
    border-bottom: none;
}

.main-container-multimage .instruction-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.main-container-multimage .instruction-text {
	color: #495057;
    line-height: 1.6;
    margin: 0;
    font-size: 14px;
}

/* Security Notice */
.main-container-multimage .security-notice {
	background: linear-gradient(145deg, #fff7de, #fff8e3);
    border: 1px solid #c4a74a;
    border-radius: 12px;
    padding: 10px;
    margin-top: 1rem;
}

.main-container-multimage .security-notice h6 {
	color: #856404;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 18px;
    font-weight: 600;
}

.main-container-multimage .security-notice p {
	color: #856404;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
}
.main-container-multimage .image-requirements{
    background: #d4f0fc;
    border: 1px solid #4e98b9;
    border-radius: 10px;
    padding: 10px;
}
.main-container-multimage .image-requirements h6{
	font-size: 17px;
    font-weight: 500;
}
.main-container-multimage .image-requirements li{
	font-size: 12px;
}

@media (max-width: 1200px) {
    .main-container-multimage .two-column-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .main-container-multimage .instructions-section {
        position: static;
    }
}

@media (max-width: 768px) {
    .main-container-multimage {
        padding: 1rem 0;
    }
    
    .main-container-multimage .content-wrapper {
        min-height: auto;
    }
    
    .main-container-multimage .upload-body, 
    .main-container-multimage .instructions-body {
        padding: 1.5rem;
    }
    
    .main-container-multimage .custom-size-row {
        grid-template-columns: 1fr;
    }
}

/* Animation Classes */
.main-container-multimage .fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-container-multimage .slide-in-right {
    animation: slideInRight 0.6s ease-in-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


 .ptm_container{display:grid;grid-template-columns:300px 1fr;gap:28px}

            /* Left sidebar colors to match screenshot */
            .class_sidebar{
				background: #1ea7e1;
    border-radius: 16px;
    padding: 10px;
    color: #fff;
			}
            .role_badge{
				background: #0c83b9;
				color: #fff;
				font-weight: 600;
				text-align: center;
				padding: 4px 0;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				font-size: 16px;
				text-transform: uppercase;
			}

            /* Teacher card */
            .teacher_card{
				background: #ffffff;
				color: #0f172a;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				padding: 10px;
				margin: 0px 0;
				box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
				text-align: center;
            }
            .teacher_name{
                font-size: 22px;
    			font-weight: 700;
            }
            .teacher_meta{
                color: #6b7280;
				margin-top: 2px;
				font-size: 12px;
				font-weight: 500;
				text-transform: uppercase;
            }

            /* Big circular current token */
            .current_token_box{
                width: 155px;
    height: 64px;
    background: #f2f6fb;
    border-radius: 5px;
    margin: 7px auto 0;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 6px solid #e8eef7;
            }
            .current_token_box .label{
                    font-weight: 700;
    color: #111827;
    font-size: 14px;
            }
            .current_token_box .value{
                font-size: 27px;
    color: #e53935;
    font-weight: 800;
    line-height: 1;
    margin-top: 0px;
            }

            /* Students list (left) */
            .students_header{background:#0c83b9;border-radius:10px;padding:12px 14px;margin:18px 10px 10px;font-weight:800;text-align:center;font-size:16px}
            .student_list{display:flex;flex-direction:column;gap:12px;padding:8px}
            .student_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #ffffff;
				border-radius: 10px;
				padding: 5px 10px;
				color: #0f172a;
				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
				margin: 0 14px;
			}
            .student_info{display:flex;flex-direction:column}
            .student_name{
				font-weight: 700;
    font-size: 16px;
			}
            .student_sub{font-size:12px;color:#6b7280;margin-top:2px}
            .token_chip{
				background: #e8f7ed;
				color: #059669;
				border-radius: 10px;
				padding: 1px 14px;
				font-weight: 800;
				font-size: 18px;
				border: 1px solid #6ec26e;
			}

            /* Highlight upcoming (first) student differently */
            .student_list .student_item:first-child{
				background: #ffebb1;
				border: 6px solid #cb9039;
				box-shadow: none;
				margin: 0;
				padding: 2px 6px;
            }
            .student_list .student_item:first-child .token_chip{
                background: #fff1da;
                color: #b45309;
                border-color: #fbbf24;
            }

            /* Right container */
                .others_container{background:#ffffff;border-radius:14px;padding:14px}
            .section_title{
                font-weight: 800;
                margin: 2px 8px 10px;
                font-size: 18px;
                letter-spacing: .3px;
            }
                .teachers_grid{display:block}
                .teachers_grid.single .teacher_list{padding:0 10px}
                .auto_scroll{max-height:540px;overflow:hidden;display:block}
                .teacher_row{
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 10px 0;
					border-bottom: 1px dotted #cfd8e3;
				}
				.teacher_row:last-child{border-bottom:none}
				.row_left{max-width:60%}
				.location_badge{
					display: inline-block;
					background: #13b77b;
					color: #ffffff;
					border-radius: 10px;
					padding: 3px 12px;
					font-weight: 600;
					font-size: 12px;
				}
				.t_title{
					font-weight: 700;
					margin-top: 3px;
					font-size: 14px;
				}
				.t_sub{color:#6b7280;margin-top:2px;font-size:12px}
                .row_right{text-align:right}
                .ct_label{display:none}
                .ct_value{display:none}

                /* Inline token badge next to teacher name */
                .token_badge{
                    display:inline-flex;
                    align-items:center;
                    gap:6px;
                    margin-left:10px;
                    background:#fff1f1;
                    border:1px solid #ffc9c9;
                    padding:2px 8px;
                    border-radius:999px;
                }
                .token_badge .tb_label{
                    font-size:11px;
                    font-weight:700;
                    color:#7a1d1d;
                    text-transform:uppercase;
                }
                .token_badge .tb_value{
                    font-size:14px;
                    font-weight:900;
                    color:#e53935;
                    line-height:1;
}

/* Password Popup Styles */
.regseat-password-popup {
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 0;
    overflow: hidden;
    min-width: 400px;
    max-width: 500px;
}

.regseat-password-header {
    background: linear-gradient(135deg, #2196F3, #20c997);
    color: white;
    padding: 10px 25px;
    text-align: center;
}

.regseat-password-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.regseat-password-title i {
    font-size: 1.2rem;
}

.regseat-password-subtitle {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.9;
    line-height: 1.4;
}

.regseat-password-body {
    padding: 25px;
    background: #f8f9fa;
}

.regseat-password-input-group {
    margin-bottom: 0;
}

.regseat-password-label {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    display: block;
}

.regseat-password-field-container {
    position: relative;
    display: flex;
    align-items: center;
}

.regseat-password-field {
    width: 100% !important;
    padding: 12px 45px 12px 15px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
}

.regseat-password-field:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

.regseat-password-icon {
    position: absolute;
    right: 15px;
    color: #6c757d;
    font-size: 1rem;
    pointer-events: none;
}

.regseat-password-footer {
    padding: 20px 25px;
    background: white;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    border-top: 1px solid #e9ecef;
}

.regseat-btn-cancel {
    padding: 8px 20px;
    border: 2px solid #2d2d2d;
    background: white;
    color: #454545;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.regseat-btn-cancel:hover {
    background: #373737;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

.regseat-btn-proceed:hover:not(:disabled) {
	background: linear-gradient(135deg, #E91E63, #a22550) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    border-color: #c92222 !important;
}

.regseat-btn-proceed:disabled {
	background: #6c757d !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
	border-color: grey !important;
}

/* Dialog Overlay Enhancement */
.rz-dialog-mask {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.rz-dialog {
	border: none !important;
    border-radius: 15px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
    position: unset !important;
}

/* Mobile Responsive for Password Popup */
@media (max-width: 768px) {
    .regseat-password-popup {
        min-width: 320px;
        max-width: 90vw;
        margin: 20px;
    }
    
    .regseat-password-header {
        padding: 15px 20px;
    }
    
    .regseat-password-title {
        font-size: 1.2rem;
        flex-direction: column;
        gap: 5px;
    }
    
    .regseat-password-body {
        padding: 20px;
    }
    
    .regseat-password-footer {
        padding: 15px 20px;
        gap: 10px;
    }
    
    .regseat-btn-cancel {
        width: 100%;
        justify-content: center;
        padding: 8px 10px !important;
        min-height: auto;
        max-height: none;
    }
    .regseat-btn-proceed {
        width: 100%;
        justify-content: center;
        padding: 3px 10px !important;
        min-height: auto;
        max-height: none;
    }

}

@media (max-width: 576px) {
    .regseat-password-popup {
        min-width: 280px;
        max-width: 95vw;
    }
    
    .regseat-password-header {
        padding: 12px 15px;
    }
    
    .regseat-password-body {
        padding: 15px;
    }
    
    .regseat-password-footer {
        padding: 12px 15px;
    }
}

/* ===================================================
   Registration Detail View Styles
   =================================================== */

.regview-container {
	max-width: 1200px;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
}

.regview-header {
	background: linear-gradient(135deg, #218eca 0%, #57a2de 100%);
    color: white;
	padding: 6px 14px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.regview-header i {
    margin-right: 0px;
}


.regview-container .student-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 10px;
    color: white;
    margin-bottom: 25px;
}

.regview-container .student-photo {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 4px solid white;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.regview-container .student-info h3 {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: bold;
}

.regview-container .student-info .class-badge {
    background: white;
    color: #f5576c;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
}

.regview-container .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.regview-container .info-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.regview-container .info-item strong {
    min-width: 180px;
    color: #666;
    font-weight: 600;
}

.regview-container .info-item span.colon {
    margin: 0 10px;
    color: #999;
}

.regview-container .info-item span.value {
    color: #333;
    flex: 1;
}

.regview-container .parent-section {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    align-items: start;
}

.regview-container .parent-photo {
	width: 80px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px dotted #b2b2b2;
}

.regview-container .sibling-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.regview-container .sibling-table th {
    background: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.regview-container .sibling-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
}

.regview-container .action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.regview-container .action-buttons .rz-button {
    padding: 12px 30px;
    font-size: 16px;
}

.regview-container .emergency-contact {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px 20px;
    border-radius: 6px;
}

.regview-container .emergency-contact h5 {
    margin: 5px 0;
    color: #856404;
}

.regview-container .emergency-contact span {
    font-weight: bold;
    color: #333;
}

@media print {
    .regview-container .action-buttons {
        display: none;
    }
}

@media (max-width: 768px) {
    .regview-container .info-grid {
        grid-template-columns: 1fr;
    }

    .regview-container .student-profile {
        flex-direction: column;
        text-align: center;
    }
}
.school_detail_section {
    margin-bottom: 12px;
}

.regview-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.regview-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Same height for address cards in same row */

.regview-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}


.regview-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
}

.regview-header i {
    font-size: 15px;
    opacity: 0.9;
}

/* Equal-height groups for Address Cards */
.eqh-address {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.eqh-address > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.eqh-address-card {
    display: flex;
    flex-direction: column;
    height: 100%;
	min-height: 245px;
}

.eqh-address-card .regview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Equal-height groups for Parent Cards */
.eqh-parents {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.eqh-parents > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.eqh-parents-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 365px;
}

.eqh-parents-card .regview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Equal-height groups for Sibling and Parish Cards */
.eqh-sibparish {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.eqh-sibparish > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.eqh-sibparish-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 185px;
}

.eqh-sibparish-card .regview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Student Profile Section */
.student-photo-container {
	text-align: center;
    padding: 8px;
    border: 1px dotted grey;
    border-radius: 10px;
}

.student-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin: 0 auto;
    display: block;
}

.student-photo:hover {
    transform: scale(1.05);
}

.student-photo-placeholder {
	width: 115px;
    height: 130px;
    border-radius: 10%;
    background: #e9ecefad;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dotted #bcb9b9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    padding: 0
}

.student-photo-placeholder i {
    font-size: 38px;
    color: white;
    opacity: 0.8;
}

.student-name-badge {
    text-align: center;
    margin-top: 8px;
}

.student-name-badge h3 {
    color: #2c3e50;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
    line-height: 1.2;
}

.class-badge {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    display: inline-block;
}

/* Student Details Grid */
.student-details-grid {
    margin-top: 12px;
}

.detail-section {
    margin-bottom: 12px;
}

.section-title {
	color: #434343;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
    position: relative;
}

.section-title::after {
	content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(135deg, #2089b9 0%, #4bb1df 100%);
}

.detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-item {
    padding: 6px 0;
    border-bottom: 1px solid #f1f3f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}
.detail-item:last-child {
    border-bottom: none;
}
.school_detail_section{
	background: white;
    border-radius: 15px;
    margin-bottom: 15px;
	border-top: 3px solid #45a6f3;
}
.detail-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value {
    font-weight: 500;
    font-size: 13px;
    text-align: right;
    flex: 1;
}

/* Siblings Table */
.siblings-table-container {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.siblings-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.siblings-table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.siblings-table th {
	padding: 8px 10px;
    text-align: left;
    font-weight: 700;
    color: #373636;
    border-bottom: 2px solid #dee2e6;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #efefef;
}

.siblings-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f3f4;
    color: #2c3e50;
    font-weight: 500;
    font-size: 12px;
}

.siblings-table tbody tr:hover {
    background-color: #f8f9fa;
}

.siblings-table tbody tr:last-child td {
    border-bottom: none;
}

/* Parish Details */
.parish-details {
   
}

/* Health Details Grid */
.health-details-grid {
    padding: 8px;
}

.health-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e9ecef;
    text-align: center;
    transition: transform 0.2s ease;
}

.health-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.health-item-inline {
	background: linear-gradient(135deg, #e3effb 0%, #dde3e9 100%);
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #e9ecef;
    text-align: center;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.health-item-inline:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.health-label {
    color: #6c757d;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
}

.health-value {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
    display: block;
}

/* Action Buttons */
.action-buttons-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px 0;
}
.action-buttons-container .row{
	width: 100%;
}
.action-btn {
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    justify-content: center;
}

.back-btn {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.back-btn:hover {
	background-color: #555454 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.print-btn {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.print-btn:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* Parent Details Styling */
.parent-photo-section {
	text-align: center;
    padding: 6px;
    border: 1px dotted #a9a9a9;
    border-radius: 6px;
}

.parent-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: block;
    transition: transform 0.3s ease;
}

.parent-photo:hover {
    transform: scale(1.05);
}

.parent-photo-placeholder {
    width: 90px;
    height: 113px;
    border-radius: 10px;
    background: #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dotted #cecece;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.parent-photo-placeholder i {
    font-size: 28px;
    color: white;
    opacity: 0.8;
}

.parent-name {
    color: #495057;
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    text-align: center;
    line-height: 1.2;
}

/* Photo Upload Button */
.photo-upload-btn {
    margin-top: 8px;
    text-align: center;
}

.photo-upload-btn .rz-button {
    background: linear-gradient(135deg, #6dce71 0%, #4CAF50 100%);
    border: none;
    color: white !important;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    border-radius: 10px !important;
    width: 100%;
}

.photo-upload-btn .rz-button:hover {
	transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4) !important;
    background: #54b654;
}

.photo-upload-btn .rz-button i {
    margin-right: 4px;
    font-size: 10px;
}

.proceed-btn {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 10px 16px !important;
    min-height: auto !important;
}

.proceed-btn:hover {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%)!important;
    transform: translateY(-1px);
}

/* Document Upload Cards */
.document-upload-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.document-upload-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #dee2e6;
}

.document-header i {
    font-size: 16px;
    color: #dc3545;
}

.document-header span {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.document-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upload-section {
    padding: 8px 0;
}

.document-actions {
	display: flex;
	gap: 8px;
}

.doc-btn {
    width: 100%;
    justify-content: flex-start;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 6px;
}

.doc-btn i {
    margin-right: 6px;
}

.modern-input:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15) !important;
    background: #fff !important;
}

.modern-input:hover:not(:disabled) {
    border-color: #adb5bd !important;
}

.modern-input:disabled {
    background-color: #e9ecef !important;
    opacity: 0.7;
}

/* Radzen Dropdown Modern Styling */
.rz-dropdown.modern-input {
	height: auto !important;
    padding: 0 !important;
}

.rz-dropdown.modern-input .rz-dropdown-label {
    padding: 8px 12px !important;
}

/* Form Group Spacing */
.regview-body .form-group {
    margin-bottom: 6px;
}

/* Parish Fields Styling */
.regview-card .parish-details .form-group {
    margin-bottom: 12px;
}

.regview-card .parish-details .modern-input {
    width: 100%;
}

/* Emergency Contact Styling */
.emergency-contact-box {
	background: linear-gradient(135deg, #ffe7e7 0%, #fbcaca 100%);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #fba4a4;
}

.emergency-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.emergency-item:last-child {
    margin-bottom: 0;
}

.emergency-item i {
    font-size: 18px;
    color: #dc3545;
    min-width: 18px;
}

.emergency-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.emergency-label {
    color: #6c757d;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.emergency-value {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
}

/* Print Styles for New Design */
@media print {
    .regview-container {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }
    
    .regview-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 20px !important;
        page-break-inside: avoid !important;
    }
    
    .regview-header {
        background: #f8f9fa !important;
        color: #000 !important;
        border-bottom: 2px solid #ddd !important;
    }
    
    .regview-body {
        padding: 16px !important;
    }
    
    .student-profile-section {
        background: #f8f9fa !important;
        border: 1px solid #ddd !important;
    }
    
    .action-buttons-container {
        display: none !important;
    }
    
    .detail-item:hover {
        background-color: transparent !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .health-item:hover,
    .regview-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Responsive Design for New Layout */
@media (max-width: 768px) {
    .regview-container {
        padding: 10px !important;
    }
    
    .regview-body {
        padding: 16px !important;
    }
    
    .student-name {
        font-size: 24px !important;
    }
    
    .action-buttons-container {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .action-btn {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    .detail-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    .detail-value {
        text-align: left !important;
    }
    
    .student-info {
        padding-left: 0 !important;
        text-align: center !important;
        margin-top: 16px !important;
    }
    /* Equal height rows become stacked on mobile */
    .eqh-address,
    .eqh-parents,
    .eqh-sibparish {
        flex-direction: column;
    }
    .eqh-address-card,
    .eqh-parents-card,
    .eqh-sibparish-card {
        min-height: auto;
    }
} 
/* File Upload Styles */
.file-upload-wrapper {
	width: 100%;
    text-align: left;
}

.custom-file-upload {
    display: inline-block;
    padding: 3px 10px;
    cursor: pointer;
    color: #2d2d2d;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    border: 2px dotted #a2a1a1;
}

.custom-file-upload:hover {
	transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    background: #7d7d7d;
    color: white;
}

.custom-file-upload i {
    margin-right: 8px;
    font-size: 16px;
}

.file-input-hidden {
    display: none;
}

.selected-file-name {
    margin-top: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 6px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.selected-file-name i {
    color: #667eea;
    margin-right: 8px;
}

/* Uploaded File Display */
.uploaded-file-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-name-display {
    padding: 12px 16px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 6px;
    border-left: 4px solid #4caf50;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #2e7d32;
    word-break: break-all;
}

.file-name-display i {
    font-size: 18px;
    flex-shrink: 0;
}

.file-name-display span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-section {
    padding: 20px 10px;
}

.doc-btn {
    width: 100%;
    justify-content: flex-start;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
}

.doc-btn i {
    margin-right: 8px;
}

/* Responsive adjustments for file upload */
@media (max-width: 768px) {
    .custom-file-upload {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .file-name-display {
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* Photo Upload Page Styles */
.photo-upload-container {
        max-width: 650px;
    margin: 0 auto;
    padding: 20px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-upload-card {
        background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.photo-upload-header {
       background: linear-gradient(135deg, #218eca 0%, #57a2de 100%);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.photo-upload-header > i {
    font-size: 42px;
    opacity: 0.9;
}

.photo-upload-header .header-content h3 {
   margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: white;
}

.photo-upload-header .header-content p {
   margin: 0;
    font-size: 13px;
    opacity: 0.95;
    font-weight: 400;
    color: #ececec;
}

.photo-upload-body {
    padding: 20px;
}

.photo-display-section {
       display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
}

.current-photo-container {
       flex: 1;
    min-width: 240px;
    max-width: 240px;
}

.photo-label {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.photo-label i {
    color: #667eea;
    font-size: 18px;
}

.photo-frame {
       background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px dashed #667eea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.uploaded-photo {
   width: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-height: 250px;
}
.upload-controls {
   flex: 1;
    min-width: 280px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.browse-section {
    text-align: center;
}

.photo-input-hidden {
    display: none;
}

.browse-photo-btn {
   display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4CAF50 0%, #03A9F4 100%);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    border: none;
    width: 100%;
}

.browse-photo-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
	background: linear-gradient(135deg, #2196F3 0%, #4CAF50 100%);
}

.browse-photo-btn i {
    font-size: 48px;
}

.browse-photo-btn span {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.upload-instructions {
    margin-top: 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 8px;
    font-size: 13px;
    color: #2e7d32;
    text-align: left;
    line-height: 1.8;
    border-left: 4px solid #4caf50;
}

.upload-instructions i {
    color: #4caf50;
    margin-right: 6px;
}

.photo-upload-footer {
    padding: 20px 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    gap: 16px;
    justify-content: center;
    border-top: 1px solid #dee2e6;
}

.photo-upload-footer .action-btn {
    flex: 1;
    max-width: 140px;
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.photo-upload-footer .back-btn {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

.photo-upload-footer .back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
}

.photo-upload-footer .close-btn {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.photo-upload-footer .close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

.photo-upload-footer .action-btn i {
    font-size: 16px;
}

/* Responsive Design for Photo Upload Page */
@media (max-width: 768px) {
    .photo-upload-container {
        padding: 10px;
    }
    
    .photo-upload-header {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .photo-upload-header > i {
        font-size: 36px;
    }
    
    .photo-upload-header .header-content h3 {
        font-size: 20px;
    }
    
    .photo-upload-body {
        padding: 24px 16px;
    }
    
    .photo-display-section {
        flex-direction: column;
        gap: 24px;
    }
    
    .current-photo-container,
    .upload-controls {
        max-width: 100%;
    }
    
    .browse-photo-btn {
        padding: 32px 40px;
    }
    
    .browse-photo-btn i {
        font-size: 40px;
    }
    
    .browse-photo-btn span {
        font-size: 16px;
    }
    
    .photo-upload-footer {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    .photo-upload-footer .action-btn {
        max-width: 100%;
    }
}

.qr-modal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 20px 20px 20px;
	gap: 12px;
}
.qr-modal-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}
.qr-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}
.qr-modal-close {
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* PG Admin List - Thumbnails */
.pg-list { margin-left: -8px; margin-right: -8px; }
.pg-card {
	position: relative;
    background: #ececec;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 12px 12px 10px 12px;
    margin: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pg-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.pg-card-badge {
	position: absolute;
    top: 0px;
    right: 0;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.stupaymnthis{
	background: white;
    border-radius: 15px;
	position: relative;
}
.pg-card-badge.success { background: #28a745; }
.pg-card-badge.warning { background: #ffc107; color: #212529; }
.pg-card-badge.danger { background: #dc3545; }
.pg-card-body { margin-top: 12px; }
.pg-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #e9ecef; }
.pg-row:last-child { border-bottom: none; }
.pg-label { color: #6c757d; font-weight: 500; }
.pg-value { color: #212529; font-weight: 600; text-align: right; }
.pg-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.pg-amount { font-weight: 700; color: #0d64a2; }
.pg-card-action { float: right; }
.pg-list-actions { 
		display: flex;
		justify-content: flex-start;
		margin: 6px 0 10px;
		position: absolute;
		top: 30px;
		right: 17px;
		z-index: 2;
}
.pg-list-actions button{
	padding: 6px 30px !important;
    background: #afafaf;
    font-size: 13px !important;
}
.pg-back-btn { background: #f1f3f5; color: #0d64a2; border: 1px solid #e6e6e6; }

/* Emphasized amount badge on card */
.pg-amount-badge {
	position: absolute;
    left: 12px;
    top: -12px;
    background: #61c465;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(13, 100, 162, 0.25);
}

/* Refined detail layout */
.pg-card-body { background: #fbfcfe; border: 1px dashed #e0e7ff; border-radius: 8px; padding: 10px; }
.pg-label { min-width: 86px; }
/* PG Response Slide-out Panel */
.pg-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 500px;
	background: #ffffff;
	box-shadow: -3px 0 12px rgba(0,0,0,0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	z-index: 1040;
}
.pg-panel-header {
	background: linear-gradient(135deg, #0d64a2, #2196f3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
}
.pg-panel-title {
	margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}
.pg-panel-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.pg-panel-body {
	
	height: calc(100% - 48px);
	overflow-y: auto;
	padding: 12px;
}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 1030;
}

/* Public Fee Payment Page */
.fee-public-page { padding-top: 8px; }
.fee-public-card { background: #ffffff; border-radius: 14px; box-shadow: 0 12px 32px rgba(13,100,162,0.09); padding: 18px; border: 1px solid #e6e6e6; }
.fee-card-school { margin-bottom: 12px; }
.fee-user { margin-bottom: 12px; }
.fee-user-title { margin: 0; font-size: 24px; font-weight: 800; }
.fee-user-title span { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 500; color: #6c757d; }
.fee-user-sub { font-size: 14px; color: #6c757d; }
.reg-chip { background: #0d64a2; color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: .3px; }
.fee-summary { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.fee-summary.centered { justify-content: center; }
.fee-summary-item { background: #fbfcfe; border: 1px dashed #e0e7ff; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.fee-summary-item .label { color: #6c757d; font-weight: 600; }
.fee-summary-item .value { color: #212529; font-weight: 700; }
.fee-summary-item.total-amount { background: linear-gradient(135deg, #0d64a2, #2196f3); border: none; box-shadow: 0 8px 20px rgba(13,100,162,0.25); }
.fee-summary-item.total-amount .label, .fee-summary-item.total-amount .value { color: #fff; }
.fee-actions { margin-top: 12px; margin-bottom: 8px; }

.proceed-btn:focus { outline: 2px solid #a3c9ff; outline-offset: 2px; }
.proceed-btn:disabled { opacity: .7; cursor: not-allowed; }

/* Themed button utilities */
.btn-theme { background: linear-gradient(135deg, #0d64a2, #2196f3); color: #fff; border: none; }
.btn-theme:hover { filter: brightness(1.05); }
.btn-outline-theme { background: #fff; color: #0d64a2; border: 1px solid #0d64a2; }
.btn-outline-theme:hover { background: #0d64a2; color: #fff; }
.fee-secure-note { font-size: 12px; color: #6c757d; margin-top: 6px; }
.fee-grid { margin-top: 10px; }
.fee-table thead th { background: #f1f5ff; color: #0d64a2; font-weight: 700; border-bottom: 2px solid #d6e4ff; }
.fee-table tbody tr { transition: background .2s ease; }
.fee-table tbody tr:hover { background: #f9fbff; }
.fee-table-total td { border-top: 2px solid #d6e4ff; }
.text-right { text-align: right; }

/* PG Status card inside panel */
.pg-status-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.pg-status-card.success { border-color: #cce5d5; box-shadow: 0 2px 10px rgba(40,167,69,0.08); }
.pg-status-card.warning { border-color: #ffe7b3; box-shadow: 0 2px 10px rgba(255,193,7,0.08); }
.pg-status-card.danger { border-color: #f1c2c7; box-shadow: 0 2px 10px rgba(220,53,69,0.08); }
.pg-status-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pg-status-image { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; border: 2px solid #eee; }
.pg-status-title { margin: 0; font-size: 18px; font-weight: 700; color: #2d3748; }
.pg-status-body { display: flex; flex-direction: column; gap: 8px; }
.pg-status-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #e9ecef; }
.pg-status-row:last-child { border-bottom: none; }
.pg-status-label { color: #6c757d; font-weight: 500; }
.pg-status-value { color: #212529; font-weight: 600; text-align: right; }
.pg-status-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.qr-modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.qr-image {
	width: 220px;
	height: 220px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	background: #fff;
	padding: 8px;
}
.qr-hint {
	font-size: 12px;
	color: #6c757d;
	text-align: center;
	margin-top: 4px;
}
.qr-modal-footer {
	margin-top: 8px;
}

/* =============================================
   RegSeat Mobile Panel Styles
   ============================================= */

/* Mobile Buttons Container */
.regseat-mobile-buttons {
}

/* Mobile Button Styles - Enhanced Clickable Design */
.regseat-mobile-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    border: none;
	border-radius: 10px;
    background: linear-gradient(135deg, #03A9F4 0%, #4CAF50 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.35);
    position: relative;
    overflow: hidden;
	width: 100%;
}

.regseat-mobile-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.regseat-mobile-btn:active::before {
    width: 300px;
    height: 300px;
}

.regseat-mobile-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.45);
}

.regseat-mobile-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.regseat-requirements-btn {
    flex: 1;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.35);
    }
    50% {
        box-shadow: 0 5px 25px rgba(102, 126, 234, 0.5);
    }
}

.regseat-mobile-btn .btn-icon {
    font-size: 22px;
    animation: bounce-icon 1.5s ease-in-out infinite;
}

@keyframes bounce-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.regseat-mobile-btn .btn-text {
    flex: 1;
    text-align: left;
}

.regseat-mobile-btn .btn-arrow {
    font-size: 20px;
    font-weight: bold;
    animation: slide-arrow 1.2s ease-in-out infinite;
}

@keyframes slide-arrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* Mobile Panel Container */
.regseat-mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.regseat-mobile-panel.show {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

/* Panel Backdrop */
.regseat-panel-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* Panel Content - Fixed Height */
.regseat-panel-content {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 96vh;
    max-height: 96vh;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-100%);
    transition: transform 0.4s 
cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    display: flex
;
    flex-direction: column;
}

.regseat-mobile-panel.show .regseat-panel-content {
    transform: translateY(0);
}

/* Panel Header */
.regseat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: linear-gradient(135deg, #4CAF50 0%, #03A9F4 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.regseat-panel-title {
	margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.regseat-panel-close {
	background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s 
ease;
}

.regseat-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Panel Body */
.regseat-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Requirements Section in Panel */
.regseat-panel-body .regseat-requirements-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff9e6;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
}

.regseat-panel-body .regseat-requirements-title {
    font-size: 16px;
    font-weight: 700;
    color: #856404;
    margin-bottom: 12px;
}

.regseat-panel-body .regseat-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.regseat-panel-body .regseat-requirement-item {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-left: 4px solid #856404;
}

/* Steps Container in Panel */
.regseat-panel-body .regseat-steps-container {
    margin-bottom: 20px;
}

.regseat-panel-body .regseat-steps-title {
    font-size: 16px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 15px;
}

.regseat-panel-body .regseat-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.regseat-panel-body .regseat-step-item {
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #f8f9ff;
    border-left: 4px solid #667eea;
    border-radius: 8px;
    font-weight: 600;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
}

.regseat-panel-body .regseat-step-item:hover {
    background: #eef0ff;
    transform: translateX(5px);
}

.regseat-panel-body .regseat-step-desc {
    font-weight: 400;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.regseat-panel-body .regseat-info-text {
    font-size: 14px;
    color: #555;
    line-height: 19px;
    padding: 10px;
    background: #fff9e6;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Support Panel Styling */
.regseat-panel-body .regseat-support-panel {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    box-shadow: 0 5px 20px rgba(245, 87, 108, 0.3);
}

.regseat-panel-body .regseat-support-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.regseat-panel-body .regseat-support-contact {
    font-size: 20px;
    font-weight: 800;
    margin: 15px 0;
}

.regseat-panel-body .regseat-support-hours {
    display: block;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
}
/* Hide on Desktop */
@media (min-width: 768px) {
	
    .regseat-mobile-buttons,
    .regseat-mobile-panel,
    .regseat-phone-icon-fixed,
    .regseat-support-panel-mobile {
        display: none !important;
    }
}

/* Fixed Phone Icon Button (Footer) */
.regseat-phone-icon-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
}

.regseat-phone-btn {
	width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #4CAF50 0%, #03A9F4 100%);
    box-shadow: 0 5px 25px rgb(43 43 43 / 40%) !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: phone-bounce 2s ease-in-out infinite;
}

@keyframes phone-bounce {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 5px 25px rgba(245, 87, 108, 0.4);
    }
    50% {
        transform: translateY(-10px);
        box-shadow: 0 8px 30px rgba(245, 87, 108, 0.5);
    }
}

.regseat-phone-btn:hover {
    transform: scale(1.1) translateY(0);
    box-shadow: 0 8px 35px rgba(245, 87, 108, 0.6);
    animation: none;
}

.regseat-phone-btn:active {
    transform: scale(0.95);
}

.regseat-phone-btn .phone-icon {
    font-size: 28px;
    color: #fff;
    filter: none;
}

/* Support Panel - Opens from Bottom */
.regseat-support-panel-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.regseat-support-panel-mobile.show {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

/* Support Content - Slides from Bottom */
.regseat-support-content-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #d05780 0%, #9a322a 100%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    padding: 37px 4px 26px 4px;
    color: #fff;
}

.regseat-support-panel-mobile.show .regseat-support-content-mobile {
    transform: translateY(0);
}

.regseat-support-content-mobile .regseat-panel-close {
	background: rgb(255 255 255 / 79%);
    border: none;
    color: #232121;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    top: -12px;
    right: 9px;
}

.regseat-support-content-mobile .regseat-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.regseat-support-info {
	text-align: center;
    padding: 10px;
}

.regseat-support-info .regseat-support-contact {
	font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #fff;
}

.regseat-support-info .regseat-support-hours {
	display: block;
    font-size: 15px;
    font-weight: 400;
    opacity: 0.95;
    color: #fff;
}

/* Mobile Cards Wrapper - Scrollable Container */
.regseat-mobile-cards-wrapper {
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
}

.regseat-mobile-cards {
    padding: 0;
}

/* Prevent body scroll when panel is open */
body:has(.regseat-mobile-panel.show),
body:has(.regseat-support-panel-mobile.show) {
    overflow: hidden;
}

/* =============================================
   Fee Payment Page Styles - Material Design
   ============================================= */

.fee-payment-page {
	padding: 30px 15px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fee-payment-box {
	min-width: 690px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    height: 100%;
}

/* Header Section */
.fee-header-section {
	background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
    padding: 10px 0;
}

.fee-main-title {
	margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.fee-student-details {
	padding: 25px;
    background: #fafafa;
    border-bottom: 2px solid #e0e0e0;
    text-align: center;
}

.fee-student-details .student-name-payment {
	font-weight: 700;
    font-size: 25px;
    text-transform: uppercase;
}

.father-name {
	font-size: 17px;
    font-weight: 400;
    color: #757575;
    margin: 0 0 9px 0;
}

.registration-number {
	padding: 3px 12px;
    background: #ffecec;
    border-radius: 5px;
    margin-bottom: 0;
    display: inline-block;
    color: white;
    border: 2px dotted red;
}

.reg-label {
    font-size: 14px;
    font-weight: 700;
    color: #ce2316;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 10px;
}

.reg-value {
	font-size: 14px;
    font-weight: 700;
    color: white;
    background: #F44336;
    padding: 2px 5px;
    border-radius: 5px;
}

.pay-period {
	padding: 10px 20px;
    background: #fafafa;
    border-radius: 5px;
    margin-bottom: 0px;
    display: block;
    text-transform: uppercase;
}

.period-label {
	font-size: 14px;
    font-weight: 600;
    color: #616161;
    margin-right: 10px;
}

.period-value {
	font-size: 16px;
    font-weight: 600;
    color: #424242;
}

.total-amount-display {
	padding: 8px 40px;
    background: #e0ffe1;
    border-radius: 5px;
    margin-bottom: 0;
    display: inline-block;
    border: 2px dotted green;
}

.amount-label {
	font-size: 16px;
    font-weight: 700;
    color: #15971a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 10px;
}

.amount-value {
	font-size: 22px;
    font-weight: 700;
    color: #147f19;
    display: block;
}

/* Material Table Section */
.fee-table-section {
	padding: 25px;
}

.table-header {
	margin-bottom: 12px;
}

.table-title {
	font-size: 18px;
    font-weight: 700;
    color: #212121;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 3px solid #2196f3;
    display: inline-block;
}

.material-table-wrapper {
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.material-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.material-table thead {
	background: linear-gradient(135deg, #515151 0%, #616161 100%);
}

.material-table thead th {
    padding: 10px;
    text-align: left;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.material-table thead th:first-child {
    text-align: center;
}

.material-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s ease;
}

.material-table tbody tr:nth-child(odd) {
    background: #fafafa;
}

.material-table tbody tr:hover {
    background: #e3f2fd;
}

.material-table tbody tr:last-child {
    border-bottom: none;
}

.material-table tbody td {
    padding: 16px;
    font-size: 14px;
    color: #424242;
}

.material-table tbody td:first-child {
    text-align: center;
    font-weight: 700;
    color: #1976d2;
}

.material-table tbody .balance-amount {
    font-weight: 800;
    color: #d32f2f;
    font-size: 16px;
}

/* Payment Action Section */
.payment-action-section {
	padding: 15px 25px;
    text-align: center;
    background: #fafafa;
}

.btn-proceed-payment {
	background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 7px 28px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
    transition: all 0.3s ease !important;
}

.btn-proceed-payment:hover {
    background: linear-gradient(135deg, #45a049 0%, #5cb85c 100%) !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5) !important;
    transform: translateY(-3px) !important;
}

.pg-gateway-wrapper {
    margin-top: 20px;
}
.security-footer {
	padding: 15px 25px;
    text-align: center;
    background: #c4ffc4;
    color: #1b5e20;
    font-size: 13px;
    font-weight: 600;
    border-top: 2px solid #4caf50;
}

.security-footer i {
    margin-right: 8px;
    color: #2e7d32;
}

/* Responsive Design */
@media (max-width: 768px) {
    .fee-payment-page {
        padding: 15px 10px;
    }

    .fee-main-title {
        font-size: 24px;
    }

    .fee-student-details {
        padding: 20px 15px;
    }

    .student-name {
        font-size: 24px;
    }

    .father-name {
        font-size: 14px;
    }

    .registration-number,
    .pay-period,
    .total-amount-display {
        padding: 10px 15px;
    }

    .reg-value {
        font-size: 18px;
    }

    .period-value {
        font-size: 14px;
    }

    .amount-value {
        font-size: 20px;
    }

    .fee-table-section {
        padding: 15px;
    }

    .table-title {
        font-size: 18px;
    }

    .material-table thead th,
    .material-table tbody td {
        padding: 10px;
        font-size: 12px;
    }

    .btn-proceed-payment {
        width: 100%;
        font-size: 16px !important;
        padding: 14px 30px !important;
    }
}

/* =============================================
   Modern Login Page - Trendy Material Design
   ============================================= */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.modern-login-page {
	height: 100vh;
	background: linear-gradient(180deg, #bfe8ff, #03a9f421);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    overflow: hidden;
    position: relative;
}

.modern-login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
    animation: float 20s linear infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

.login-container {
		display: flex;
		max-width: 1100px;
		width: 100%;
		background: #ffffff;
		border-radius: 20px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		height: 90vh;
		max-height: 650px;
		animation: fadeInUp 0.6s ease-out;
		position: relative;
		z-index: 1;
}

/* Left Section - Form */
.login-left-section {
	flex: 1;
    padding: 25px;
    display: flex;
    align-items: center;
    overflow-y: auto;
    animation: slideInLeft 0.8s 
ease-out;
}

.login-form-wrapper {
	width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.login-header {
	margin-bottom: 0;
    animation: fadeInUp 0.6s ease-out 0.2s both;
    position: absolute;
    left: 0;
    top: 0;
    background: #3aa0ce;
    padding: 8px 18px 10px;
    padding-left: 15px;
    border-radius: 2px;
}

.login-title {
	font-size: 25px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.login-subtitle {
	font-size: 14px;
    color: #f9f9f9;
    margin: 0;
}

.school-info-section {
	animation: fadeInUp 0.6s 
	ease-out 0.3s both;
}

/* Login Form Card - Trendy Compact Box */
.login-form-card {
    position: relative;
    animation: fadeInUp 0.6s 
ease-out 0.4s both;
    transition: all 0.3s 
ease;
}


/* Portal Tabs */
.portal-tabs-section {
	margin-bottom: 10px;
}

.compact-tabs {
    width: 100%;
    display: flex;
    gap: 8px;
}

.compact-tabs .rz-button {
	flex: 1;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 9px 15px !important;
    font-size: 12px !important;
    transition: all 0.4s 
cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center;
}

.compact-tabs .rz-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -163px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s 
ease;
}

.compact-tabs .rz-button:hover::before {
    left: 100%;
}

.compact-tabs .rz-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* Active Tab with Down Arrow */
.compact-tabs .rz-button.rz-state-active::after {
    content: '▼';
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    animation: bounce-arrow 1.5s ease-in-out infinite;
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
legend {
    padding: 5px 15px;
    border: 2px solid #667eea;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8eaf6 100%);
    font-weight: 700;
    color: #667eea;
    margin-bottom: 15px;
}

fieldset {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Username Section */
.username-input-section {
    margin-bottom: 10px;
}

.compact-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #424242;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-with-icon {
    position: relative;
}

.input-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    font-size: 16px;
    z-index: 1;
}

/* Bootstrap Icons Styling */
.bi {
    font-size: inherit;
    vertical-align: middle;
}

.bi-person,
.bi-lock,
.bi-key,
.bi-info-circle,
.bi-question-circle,
.bi-trash,
.bi-arrow-right,
.bi-arrow-left,
.bi-box-arrow-in-right {
    font-size: 16px;
}

.compact-input {
	width: 100%;
    padding: 9px 15px 9px 40px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    transition: all 0.4s 
cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #ffffff !important;
}

.compact-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

.compact-input:hover {
    border-color: #a5b4fc !important;
}

.validation-msg {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #f44336;
    animation: fadeInUp 0.3s ease-out;
}

/* Submit Button - Trendy Design */
.submit-section {
    margin-bottom: 15px;
}

.btn-next-compact {
    width: 100% !important;
    padding: 10px 0px !important;
    background-color: #60c464 !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    color: #fff !important;
}

.btn-next-compact i,
.btn-next-compact .bi {
    margin-right: 8px;
}

.btn-next-compact::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-next-compact:active::before {
    width: 300px;
    height: 300px;
}

.btn-next-compact:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5) !important;
}

.btn-next-compact:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* Info Hint */
.info-hint {
	padding: 5px 12px;
    background: #ffeeee;
    border: 1px solid rgb(231 144 137);
    border-left: 4px solid #F44336;
    border-radius: 6px;
    font-size: 12px;
    color: #F44336;
    text-align: left;
    line-height: 1.6;
    font-weight: 600;
}

.info-hint i,
.info-hint .bi {
    margin-right: 6px;
    color: #2196f3;
}

.info-hint strong {
    font-weight: 700;
    color: #0d47a1;
}

/* Extra Actions with Animation */
.extra-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 0px;
    animation: fadeInUp 0.6s 
ease-out 0.5s both;
    border-bottom: 1px solid #aaaaaa;
}

.btn-link-style {
    background: transparent !important;
    border: none !important;
    color: #667eea !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.btn-link-style i,
.btn-link-style .bi {
    margin-right: 5px;
    font-size: 13px;
}

.btn-link-style::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

.btn-link-style:hover::after {
    width: 80%;
}

.btn-link-style:hover {
    color: #764ba2 !important;
    transform: translateY(-2px) !important;
}

.divider {
    color: #d1d5db;
    font-size: 12px;
}

.help-link-mobile {
    text-align: center;
    display: none;
}

.help-link-mobile a {
    color: #2196f3;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.help-link-mobile a:hover {
    text-decoration: underline;
}
.regstep_sc_dtl_pg .publicreghead{
	display: flex;
    justify-content: center;
    padding-top: 0;
}
/* Footer */
.login-footer {
    margin-top: auto;
    padding-top: 5px;
    text-align: center;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 8px;
}

.footer-text {
	font-size: 13px;
    color: #9e9e9e;
    margin: 0;
}

.footer-text a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

/* Right Section - Welcome with Animation */
.login-right-section {
	flex: 1;
    background: linear-gradient(135deg, #3aa0ce 0%, #17507d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
    animation: slideInRight 0.8s 
ease-out;
}

.login-right-section::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: drift 20s linear infinite;
}

@keyframes drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.welcome-content {
    text-align: center;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.welcome-title {
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.welcome-text {
	display: block;
    font-size: 18px;
    font-weight: 400;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.brand-name {
	display: block;
    font-size: 37px;
    font-weight: 600;
    margin-top: 10px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: pulse 3s 
ease-in-out infinite;
}

.help-link-desktop {
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.help-link-desktop a {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.help-link-desktop a:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.help-link-desktop a i {
    margin-right: 8px;
}

.help-link-desktop a span {
    font-weight: 700;
}

.welcome-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    animation: fadeInUp 0.8s ease-out 0.6s both, float-gentle 4s ease-in-out infinite;
    /* Optimize rendering */
    content-visibility: auto;
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

/* Responsive Design */
@media (max-width: 992px) {
    .login-container {
        flex-direction: column;
        height: auto;
        max-height: none;
    }

    .login-left-section {
        overflow-y: visible;
    }

    .login-right-section {
        order: -1;
        min-height: 250px;
        padding: 30px 20px;
    }

    .brand-name {
        font-size: 32px;
    }

    .welcome-image {
        max-width: 250px;
    }

    .help-link-desktop {
        display: none;
    }

    .help-link-mobile {
        display: block;
    }

    .modern-login-page {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }
}

@media (max-width: 576px) {
    .modern-login-page {
        padding: 10px;
    }

    .login-container {
        border-radius: 12px;
    }

    .login-left-section {
        padding: 20px 15px;
    }

    .login-title {
        font-size: 24px;
    }

    .brand-name {
        font-size: 28px;
    }

    .login-form-card {
        padding: 20px;
    }

    .compact-tabs .rz-button {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    .login-right-section {
        padding: 25px 15px;
        min-height: 220px;
    }

    .welcome-image {
        max-width: 180px;
    }

    .footer-logo {
        max-width: 100px;
    }
}

/* =============================================
   Password Page Additional Styles
   ============================================= */

/* Default Password Alert */
.default-password-alert {
    padding: 12px 15px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ff9800;
    border-left: 4px solid #ff6f00;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #e65100;
    font-weight: 600;
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

.default-password-alert i {
    margin-right: 8px;
    color: #ff6f00;
}

/* Material Input Group */
.material-input-group {
    margin-bottom: 20px;
}

.material-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #424242;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    font-size: 16px;
    z-index: 1;
}

.material-input {
    width: 100%;
    padding: 12px 15px 12px 40px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #ffffff !important;
}

.material-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

.material-input:hover {
    border-color: #a5b4fc !important;
}

/* Readonly Input Styling */
.readonly-input {
    background: #f5f5f5 !important;
    color: #757575 !important;
    cursor: not-allowed !important;
    border-color: #e0e0e0 !important;
}

.readonly-input:focus {
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.readonly-input:hover {
    border-color: #e0e0e0 !important;
}

.validation-text {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #f44336;
    animation: fadeInUp 0.3s ease-out;
}

/* Password Field with Toggle */
.password-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.password-input {
    flex: 1;
}

.toggle-password-btn {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    background: transparent !important;
    border: none !important;
    color: #757575 !important;
    transition: color 0.3s ease !important;
}

.toggle-password-btn:hover {
    color: #667eea !important;
}

/* Action Buttons Group */
.action-buttons-group {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 20px;
}

.btn-proceed-modern {
    flex: 1;
    padding: 14px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    color: #fff !important;
}

.btn-proceed-modern i {
    margin-right: 8px;
}

.btn-proceed-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-proceed-modern:active::before {
    width: 300px;
    height: 300px;
}

.btn-proceed-modern:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5) !important;
}

.btn-proceed-modern:active {
    transform: translateY(-1px) scale(0.98) !important;
}

.btn-back-modern {
    flex: 1;
	padding: 10px 10px !important;
    background: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #616161 !important;
    transition: all 0.3s ease !important;
}

.btn-back-modern i {
    margin-right: 8px;
}

.btn-back-modern:hover {
    border-color: #667eea !important;
    color: #667eea !important;
    background: #f5f7ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* Responsive for Password Page */
@media (max-width: 992px) {
    .action-buttons-group {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .btn-proceed-modern,
    .btn-back-modern {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

/* Grid Cell Styles */
.date-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-cell i {
    color: #667eea;
    font-size: 16px;
}

.date-cell span {
    color: #2d3748;
    font-weight: 500;
}

.action-buttons-grid {
    display: flex;
    gap: 0px;
}

.action-buttons-grid .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.name-cell {
    display: flex;
    align-items: center;
    gap: 3px;
}

.name-cell i {
    color: #667eea;
    font-size: 16px;
}

.name-cell span {
    color: #2d3748;
    font-weight: 500;
}

.status-cell {
    display: flex;
	align-items: center;
}

.status-cell .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.status-cell .badge-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-cell .badge-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.status-cell .badge-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.status-cell .badge-secondary {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: white;
}

.status-cell .badge-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.status-cell .badge i {
    font-size: 10px;
}

/* Leave Stats Container */
.leave-stats-container {
	display: flex;
		gap: 5px;
		margin-bottom: 15px;
}

.leave-stat-card {
	flex: 1;
    min-width: 122px;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 14%);
    transition: all 0.3s ease;
    border-left: 3px solid;
}

.leave-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.leave-stat-card.consumed {
    border-left-color: #10b981;
}

.leave-stat-card.applied {
    border-left-color: #f59e0b;
}

.leave-stat-card.approved {
    border-left-color: #3b82f6;
}

.leave-stat-card.balance {
    border-left-color: #8b5cf6;
}

.leave-stat-card.credited {
    border-left-color: #06b6d4;
}

.leave-stat-card .stat-icon {
	width: 28px;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.leave-stat-card .stat-icon i{
	font-size: 15px;
}

.leave-stat-card.consumed .stat-icon {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.leave-stat-card.applied .stat-icon {
    background: linear-gradient(135deg, #fed7aa, #fbbf24);
    color: #d97706;
}

.leave-stat-card.approved .stat-icon {
    background: linear-gradient(135deg, #bfdbfe, #93c5fd);
    color: #2563eb;
}

.leave-stat-card.balance .stat-icon {
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    color: #7c3aed;
}

.leave-stat-card.credited .stat-icon {
    background: linear-gradient(135deg, #a5f3fc, #67e8f9);
    color: #0891b2;
}

.leave-stat-card .stat-content {
	display: flex;
    flex-direction: column;
    gap: 0px;
    line-height: 11px;
}

.leave-stat-card .stat-label {
	font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.leave-stat-card .stat-value {
	font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    line-height: 23px;
}

@media (max-width: 768px) {
    .leave-stats-container {
        flex-direction: column;
    }
    
    .leave-stat-card {
        min-width: 100%;
    }
}

/* Section Title Styling */
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: #667eea;
    font-size: 22px;
}

/* Amount Cell Styling */
.amount-cell {
    display: flex;
    align-items: center;
    gap: 3px;
}

.amount-cell i {
    color: #667eea;
    font-size: 16px;
}

.amount-cell.deduction i {
    color: #ef4444;
}

.amount-cell.netpay i {
    color: #10b981;
}

.amount-cell .amount-value {
    font-weight: 600;
    font-size: 14px;
}

/* Staff Child Wizard Styling */
.staff-child-wizard {
    padding: 0px;
}

.wizard-steps {
	display: flex	;
		align-items: center;
		justify-content: center;
		padding-bottom: 12px;
		margin-bottom: 0;
		gap: 10px;
		border-bottom: 1px solid #e9e9e9;
}

.wizard-step {
	display: flex;
		align-items: center;
		gap: 6px;
}

.wizard-step .step-number {
    width: 40px;
    height: 40px;
    border-radius: 10%;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: #e5e7eb;
    color: #9ca3af;
    transition: all 0.3s 
ease;
}

.wizard-step.active .step-number {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.wizard-step.completed .step-number {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.wizard-step .step-label {
	font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.wizard-step.active .step-label {
    color: #667eea;
}

.wizard-step.completed .step-label {
    color: #10b981;
}

.wizard-connector {
	width: 100px;
    height: 3px;
    background: #e5e7eb;
    margin-bottom: 0;
    transition: all 0.3s 
ease;
}

.wizard-connector.active {
    background: linear-gradient(90deg, #10b981, #667eea);
}

.wizard-content {
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.step-header {
	display: flex
	;
		align-items: center;
		gap: 12px;
		padding: 4px 0;
		border-bottom: 1px solid #e5e7eb;
		margin-bottom: 0;
}

.step-header i {
	font-size: 20px;
    color: #667eea;
}

.step-header h5 {
	margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.step-body {
    padding: 0;
}

.selected-staff-card {
	background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 2px solid #86efac;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-info i {
    font-size: 32px;
    color: #10b981;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    text-transform: uppercase;
}

.info-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 700;
	text-align: left;
}

.existing-children-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header-small {
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    padding: 6px 10px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 2px solid #a5a5a5;
    border-radius: 10px;
}

.card-header-small i {
    font-size: 18px;
    color: #667eea;
}

.children-list {
	padding: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.child-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #dceeff7a;
    transition: all 0.2s ease;
}

.child-item:hover {
    background: #f3f4f6;
    transform: translateX(4px);
}

.child-item i {
    font-size: 24px;
    color: #ec4899;
}

.child-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.child-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.child-info {
    font-size: 12px;
    color: #6b7280;
}

/* Collapsible Search Buttons */
.btn-open-search {
	width: 100%;
    padding: 5px 0;
    background: linear-gradient(135deg, #03A9F4, #03A9F4);
    border: none;
    max-width: 200px;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    display: flow-root;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s 
ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.btn-open-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}

.btn-open-search i:first-child {
    font-size: 14px;
}

.btn-open-search i:last-child {
    font-size: 14px;
}

.search-panel-expandable {
    background: white;
    border: 2px solid #667eea;
    border-radius: 12px;
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-panel-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
}

.search-panel-header i {
    margin-right: 8px;
}

.btn-close-search {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.btn-close-search:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.search-panel-body {
    padding: 20px;
    background: #f9fafb;
    max-height: 500px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .wizard-steps {
        flex-direction: column;
        gap: 10px;
    }
    
    .wizard-connector {
        width: 3px;
        height: 40px;
        margin: 0;
    }
    
    .selected-staff-card {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .btn-open-search {
        padding: 16px;
        font-size: 14px;
    }
}

/* Next Step Button */
.next-step-container {
    padding: 0 0;
    display: flex;
    justify-content: center;
}

.btn-next-step {
    padding: 8px 20px;
    background: linear-gradient(135deg, #03A9F4 0%, #4db4e2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-next-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-next-step i {
    font-size: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Tax Slab Range Cell Styling */
.range-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.range-cell i {
    color: #667eea;
    font-size: 14px;
}

.range-from {
    color: #10b981;
    font-weight: 600;
}

.range-to {
    color: #ef4444;
    font-weight: 600;
}

/* Badge Cell Styling */
.badge-cell {
	display: flex;
		align-items: center;
		gap: 5px;
		font-weight: 500;
		padding: 0 4px;
		border-radius: 5px;
}

.badge-cell .badge {
	padding: 4px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge-cell .badge i {
    font-size: 14px;
}

.badge-success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #86efac;
}

.badge-info {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* LIC Amount Cell Styling */
.lic-amount-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lic-amount-cell i {
    font-size: 28px;
    color: #10b981;
}

.lic-amount-cell .amount-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lic-amount-cell .amount-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lic-amount-cell .amount-value {
    font-size: 16px;
    color: #059669;
    font-weight: 700;
}

.staff-name {
    font-weight: 600;
    color: #1f2937;
}

/* Tax Section Name Styling */
.tax-section-name {
    font-weight: 700;
    color: #667eea;
}

.detail-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
}

.detail-cell i {
    color: #9ca3af;
    font-size: 16px;
}

.doc-name {
    font-weight: 600;
    color: #1f2937;
}

.badge-secondary {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #374151;
    border: 1px solid #9ca3af;
}

/* Library Specific Styling */
.member-type {
    font-weight: 600;
    color: #667eea;
}

.book-name {
    font-weight: 600;
    color: #1f2937;
}

.member-name {
    font-weight: 600;
    color: #059669;
}

.badge-danger {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    color: #991b1b;
    border: 1px solid #f87171;
}

/* Action Buttons in Grid */
.action-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.action-buttons .btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.action-buttons .btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

.action-buttons .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.action-buttons .btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Member Photo & Detail Section */
.member-photo-section {
    margin-bottom: 15px;
}

.member-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #667eea;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.member-info-section {
	padding: 0px !important;
}

.member-name-display {
	color: #667eea;
    font-weight: 700;
    font-size: 16px !important;
    margin-bottom: 4px !important;
    text-align: left;
}

.member-detail-text {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 5px;
}

.member-detail-text i {
    color: #667eea;
    margin-right: 5px;
}

.action-buttons-section {
	margin-top: 10px;
    display: flex;
}
.member-detail-card .regview-body .member-info-section-new{
	display: flex;
	gap: 10px;
}
/* Field Labels */
.field-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.field-label i {
    color: #667eea;
    margin-right: 5px;
}

/* DataGrid Header Color */
.modern-datagrid .rz-datatable-thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.modern-datagrid .rz-datatable-thead th {
    color: white !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #5a67d8 !important;
}

.modern-datagrid .rz-datatable-thead th .rz-sortable-column-icon {
    color: white !important;
}

.member-detail-card {
    border: 2px solid #e0e7ff !important;
}

.compact-card {
    margin-bottom: 0 !important;
}

.compact-label {
    font-size: 12px !important;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px !important;
    display: block;
}

.compact-label i {
    color: #667eea;
    margin-right: 4px;
    font-size: 11px;
}

.compact-grid {
    font-size: 12px !important;
}

.compact-grid .rz-datatable-data td {
    padding: 6px 8px !important;
    font-size: 12px !important;
}

.compact-grid .rz-datatable-thead th {
    padding: 8px !important;
    font-size: 12px !important;
}

.member-photo-compact {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #667eea;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.book-detail-card {
    border: 2px solid #fed7aa !important;
}

.book-info-compact {
    padding: 10px 0;
}

.info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 8px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info-icon {
    flex-shrink: 0;
    width: 24px;
    color: #667eea;
    font-size: 14px;
}

.info-text {
    font-size: 11px;
    color: #374151;
    line-height: 1.4;
}

.info-text strong {
    color: #1f2937;
}

/* Badge Warning */
.badge-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fbbf24;
}

/* Book Issue Detail - Layout Classes */
.transaction-dates-card {
    margin-bottom: 8px;
}

.compact-body {
    padding: 8px 15px;
}

.summary-stack {
    display: flex;
    gap: 6px;
    font-weight: 500;
}

.summary-pill {
	display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 10px;
		font-size: 12px;
		font-weight: 700;
		border-radius: 5px;
		width: 100%;
		text-transform: uppercase;
}

.summary-pill i {
    font-size: 14px;
}

.book-pill {
	background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4338ca;
    border-left: 3px solid #4f68f1 !important;
    border: 1px solid #697de9;
}

.member-pill {
	background: linear-gradient(135deg, #ecfeff, #cffafe);
    color: #155e75;
    border-left: 3px solid #23819f !important;
    border: 1px solid #4c9fb9;
}

.summary-divider {
    height: 2px;
    background: linear-gradient(90deg, rgba(102,126,234,0.25), rgba(118,75,162,0.25));
}

.books-row {
    margin-top: 8px;
}

.members-row {
    margin-top: 8px;
}

.transactions-row {
    margin-top: 8px;
}

.full-height {
    height: 100%;
}

.book-detail-body {
    padding: 10px;
    min-height: 220px;
}

.member-detail-body {
    padding: 10px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Text Classes */
.badge-small {
    font-size: 10px;
    padding: 3px 6px;
}

.text-book-name {
    font-size: 12px;
    font-weight: 600;
}

.text-author {
    font-size: 11px;
}

.text-publisher {
    font-size: 11px;
}

.text-member-name {
    font-size: 12px;
    font-weight: 600;
}

.text-member-detail {
    font-size: 11px;
}

.text-author-small {
    font-size: 10px;
}

.text-issuer {
    font-size: 11px;
}

.text-details {
    font-size: 10px;
}

.text-date {
    font-size: 10px;
}

/* Member Detail Classes */
.member-photo-section {
    margin-bottom: 8px;
}

.member-info-section {
    padding: 8px;
    margin-bottom: 8px;
}

.member-name-display {
    font-size: 14px;
    margin-bottom: 5px;
}

.no-member {
    font-size: 12px;
}

.member-detail-text {
    font-size: 11px;
    margin-bottom: 3px;
}

.member-detail-text:last-child {
    margin-bottom: 0;
}

/* Action Buttons */
.repeat-checkbox {
	font-size: 11px;
    margin-top: 0px;
    display: flex;
    align-items: center;
}

.btn-reset {
    background-color: #343a40 !important;
    border-color: #343a40 !important;
    color: white !important;
}

.btn-submit {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

/* Empty State */
.empty-state {
    padding-top: 50px;
    font-size: 12px;
}

.empty-state-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 23px;
}

.empty-icon {
	font-size: 48px;
    color: #98d09a;
    margin-bottom: 10px;
}

/* Selected Book Detail - Enhanced */
.book-header {
    background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 55%, #ff99ac 100%) !important;
    color: white !important;
}

.book-detail-card .regview-body {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 100%) !important;
}

.book-info-display {
	padding: 15px 10px;
    position: relative;
}

.book-accession {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 1px 5px;
		background: linear-gradient(135deg, #f0f9ff, #dbeafe);
		border-radius: 6px;
		margin-bottom: 0;
		border: 2px solid #60a5fa;
		position: absolute;
		top: -38px;
		right: 0;
		height: 22px;
}

.book-accession i {
    font-size: 18px;
    color: #2563eb;
}

.acc-number {
    font-size: 16px;
    font-weight: 700;
    color: #1e40af;
}

.book-title-section {
	display: flex	;
		align-items: flex-start;
		gap: 10px;
		padding: 10px;
		background: white;
		border-radius: 8px;
		margin-bottom: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		border-left: 4px solid #8b5cf6;
}

.book-title-section i {
    font-size: 18px;
    color: #8b5cf6;
    flex-shrink: 0;
    margin-top: 2px;
}

.field-stack {
    display: flex;
    flex-direction: column;
}

.field-heading {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
    margin: 0 0 4px 0;
}

.book-title {
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
    margin: 0;
    line-height: 1.4;
}

.book-author-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 6px;
    margin-bottom: 8px;
	border-left: 4px solid #c17f1d;
}

.book-author-section i {
    font-size: 14px;
    color: #d97706;
}

.book-author {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    margin: 0;
}

.book-publisher-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-radius: 6px;
    border-left: 4px solid #25a468;
}

.book-publisher-section i {
    font-size: 14px;
    color: #059669;
}

.book-publisher {
    font-size: 12px;
    font-weight: 600;
    color: #065f46;
    margin: 0;
}

/* Selected Member Detail - Enhanced */
.member-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.member-detail-body-enhanced {
	padding: 10px;
    min-height: 225px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #c6c4ff;
    border: 2px solid #78bf78;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 0;
}

.member-info-section-enhanced {
	margin-top: 14px;
}

.member-name-display-enhanced {
	font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #4338ca;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.member-details-box {
    display: flex;
    justify-content: space-between;
}

.member-detail-row {
	display: flex;
		align-items: center;
		gap: 8px;
		padding: 3px 8px;
		background: #96d796ed;
		border-radius: 6px;
		min-width: 175px;
		border: 1px solid green;
}

.member-detail-row:last-child {
    margin-bottom: 0;
}

.member-detail-row i {
	font-size: 14px;
    flex-shrink: 0;
}

/* Pending Books Body */
.pending-books-body {
	padding: 0;
    min-height: 227px;
}

/* Reduce Grid Search Input Height */
.modern-datagrid .rz-cell-filter input {
    height: 26px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
}

.modern-datagrid .rz-cell-filter .rz-textbox {
    height: 26px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
}

.modern-datagrid .rz-datatable-filter {
    padding: 4px 6px !important;
}

.modern-datagrid .rz-datatable-thead {
    min-height: auto !important;
}

.toggle-history {
    padding: 2px 8px !important;
    font-size: 11px !important;
}

/* Modern Toast Notifications */
.toast-notification {
    min-width: 320px;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast-show {
    animation: slideInRight 0.4s ease-out;
}

.toast-hide {
    animation: slideOutRight 0.3s ease-in;
    opacity: 0;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.toast-icon {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-title {
	font-size: 14px;
    flex: 1;
    border-left: 0 !important;
}

.toast-close {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 0px 4px;
    border-radius: 6px;
    transition: all 0.2s;
    border: 1px solid grey;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}

.toast-body {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
}

.toast-progress {
    height: 4px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    animation: progressBar 3.5s linear;
}

@keyframes progressBar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Toast Success - Green Theme */
.toast-success {
    border-left: 2px solid #10b981;
}

.toast-success .toast-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-bottom-color: #a7f3d0;
}

.toast-success .toast-icon {
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-success .toast-title {
    color: #065f46;
    font-weight: 700;
}

.toast-success .toast-body {
    color: #047857;
    background: rgba(16, 185, 129, 0.02);
}

.toast-success .toast-progress {
    background: linear-gradient(90deg, #10b981, #059669);
    height: 4px;
}

/* Toast Error - Red Theme */
.toast-error {
	border-left: 2px solid #ef4444;
}

.toast-error .toast-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom-color: #fecaca;
}

.toast-error .toast-icon {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-error .toast-title {
    color: #991b1b;
    font-weight: 700;
}

.toast-error .toast-body {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.02);
}

.toast-error .toast-progress {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    height: 4px;
}

/* Toast Warning - Orange Theme */
.toast-warning {
    border-left: 2px solid #f59e0b;
}

.toast-warning .toast-header {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-bottom-color: #fde68a;
}

.toast-warning .toast-icon {
    color: #d97706;
    background: rgba(245, 158, 11, 0.1);
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-warning .toast-title {
    color: #92400e;
    font-weight: 700;
}

.toast-warning .toast-body {
    color: #a16207;
    background: rgba(245, 158, 11, 0.02);
}

.toast-warning .toast-progress {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    height: 4px;
}

/* Toast Info - Blue Theme */
.toast-info {
    border-left: 2px solid #3b82f6;
}

.toast-info .toast-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom-color: #bfdbfe;
}

.toast-info .toast-icon {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-info .toast-title {
    color: #1e40af;
    font-weight: 700;
}

.toast-info .toast-body {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.02);
}

.toast-info .toast-progress {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    height: 4px;
}

/* Query Builder Styles */
.query-builder-btn {
	padding: 10px 25px !important;
    font-size: 13px !important;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    transition: all 0.3s;
}

.query-builder-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.query-popup-container {
    padding: 15px;
}
.query-popup-container button{
	margin-top: 23px !important;
    padding: 8px 0 !important;
}
.query-action-btn {
    margin-top: 23px;
}

.field-text {
    font-weight: 600;
    color: #374151;
}

/* Transport Styles */
.group-name {
    font-weight: 600;
    color: #7c3aed;
}

.stop-name {
    font-weight: 600;
    color: #059669;
}

.student-name {
    font-weight: 600;
    color: #1f2937;
}

.route-name {
    font-weight: 700;
    color: #2563eb;
}

.driver-name {
    font-weight: 600;
    color: #059669;
}

.mobile-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-cell i {
    color: #7c3aed;
    font-size: 14px;
}

.mobile-number {
    font-weight: 600;
    color: #5b21b6;
}

.time-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-cell i {
    color: #2563eb;
    font-size: 14px;
}

.time-value {
    font-weight: 600;
    color: #1e40af;
}

/* Query Hero Section */
.query-hero-section {
	height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.query-hero-card {
	width: 95%;
}

.query-icon-wrapper {
    margin: 0 auto 20px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.query-icon-wrapper i {
    font-size: 50px;
    color: white;
}

.query-hero-title {
	font-size: 32px;
    font-weight: 700;
    color: #0f5c99;
    margin-bottom: 12px;
}

.query-hero-subtitle {
	font-size: 16px;
    color: #6b7280;
    margin-bottom: 40px;
    line-height: 1.6;
}

.query-steps {
	display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 30px;
		flex-wrap: wrap;
		width: 100%;
}

.step-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(135deg, #2196f33d, #c2ecff);
    border-radius: 12px;
    width: 22%;
    border: 3px solid #2196F3;
}

.step-number {
	width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #03A9F4, #4CAF50);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.step-content h6 {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 4px 0;
}

.step-content p {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.step-arrow {
	font-size: 28px;
    color: #2196F3;
    font-weight: 900;
}

.query-cta-section {
	margin-bottom: 30px;
    text-align: center;
}

.query-features {
	display: flex;
		justify-content: center;
		gap: 30px;
		padding-top: 12px;
		border-top: 2px solid #cacaca;
}

.feature-item {
	display: flex;
		flex-direction: column;
		align-items: center;
}

.feature-item i {
    font-size: 28px;
    color: #2196F3;
}

.feature-item span {
	font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.query-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 8px;
    margin-bottom: 10px;
}

.results-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #065f46;
}

.results-info i {
    font-size: 20px;
}

/* Timetable Styles */
.version-name {
    font-weight: 700;
    color: #7c3aed;
}

.teacher-name {
    font-weight: 600;
    color: #059669;
}

.subject-name {
    font-weight: 600;
    color: #dc2626;
}

.count-badge {
	display: flex	;
		align-items: center;
		gap: 8px;
		padding: 2px 12px;
		font-weight: 700;
		border-radius: 5px;
		border: 2px solid #3b82f6;
}

.count-badge i {
    font-size: 18px;
    color: #2563eb;
}

.count-text {
    font-size: 13px;
    color: #1e40af;
}

.count-text strong {
    font-size: 16px;
    font-weight: 700;
}

/* Substitution Table Styles */
.substitution-date-header {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 15px;
}

.date-info-badge {
	display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 15px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 5px;
    border-left: 3px solid #10b981;
}
.date-info-badge i {
    font-size: 18px;
    color: #059669;
}
.date-info-badge span {
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
}
.day-info-badge {
	display: flex;
		align-items: center;
		gap: 8px;
		padding: 0px 15px;
		background: linear-gradient(135deg, #eff6ff, #dbeafe);
		border-radius: 5px;
		border-left: 3px solid #3b82f6;
}
.day-info-badge i {
    font-size: 18px;
    color: #2563eb;
}
.day-info-badge span {
    font-size: 13px;
    font-weight: 700;
    color: #1e40af;
}
.modern-substitution-table {
    width: 100%;
    margin: 0;
    font-size: 12px;
}
.modern-substitution-table thead th {
	background: linear-gradient(135deg, #434343, #444445);
    color: white;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 8px;
    text-align: center;
    border: 1px solid #5a67d8;
    vertical-align: middle;
}
.modern-substitution-table thead th i {
    margin-right: 4px;
}
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border-right: 3px solid #667eea !important;
    box-shadow: 2px 0 8px rgba(102, 126, 234, 0.15);
}

.sticky-col-name {
    position: sticky;
    left: 100px;
    z-index: 10;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border-right: 3px solid #667eea !important;
    box-shadow: 2px 0 8px rgba(102, 126, 234, 0.15);
}

.emp-col {
    min-width: 100px;
    width: 100px;
}

.emp-name-col {
    min-width: 200px;
    width: 200px;
}

.period-col {
    min-width: 180px;
}

.emp-id-cell {
    font-weight: 600;
    text-align: center;
}

.emp-name-cell {
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
}

.period-cell {
    padding: 8px;
    vertical-align: top;
    background: #fafafa;
}

.sub-btn {
    margin-bottom: 6px;
    background-color: #fbbf24 !important;
    border-color: #f59e0b !important;
    color: white !important;
}

.sub-btn:hover {
    background-color: #f59e0b !important;
    transform: scale(1.05);
}

.period-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}

.subject-label {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
}

.class-label {
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
}

.teacher-label {
    font-size: 10px;
    color: #059669;
}

/* Count Badge Variants */
.count-badge-green {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left-color: #10b981;
}

.count-badge-green i {
    color: #059669;
}

.count-badge-green .count-text {
    color: #065f46;
}

.count-badge-blue {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left-color: #3b82f6;
}

.count-badge-blue i {
    color: #2563eb;
}

.count-badge-blue .count-text {
    color: #1e40af;
}

/* Modern Timetable Table */
.modern-timetable-table {
    width: 100%;
    margin: 0;
    font-size: 12px;
}

.modern-timetable-table thead th {
	background: linear-gradient(135deg, #434343, #444445);
    color: white;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 8px;
    min-width: 110px;
    border: 1px solid #5a67d8;
    vertical-align: middle;
}

.modern-timetable-table thead th i {
    margin-right: 4px;
}

.day-col {
    min-width: 120px;
}

.day-name-cell {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    font-weight: 700;
    color: #374151;
    vertical-align: middle;
    padding: 12px;
}

.tt-period-cell {
	padding: 5px !important;
    vertical-align: top !important;
    background: #fafafa;
    min-width: 143px;
}

.tt-schedule-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 6px;
    margin-bottom: 4px;
    background: white;
    border-radius: 5px;
    border-left: 3px solid #667eea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tt-subject {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
}

.tt-class {
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
}

.tt-teacher {
    font-size: 10px;
    font-weight: 600;
    color: #059669;
}

.free-period-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 4px;
    color: #9ca3af;
    font-style: italic;
    font-size: 12px;
    background: #f9fafb;
    border-radius: 6px;
}

.free-period-text i {
    font-size: 14px;
}

/* Panel Footer */
.panel-footer {
    padding: 15px 20px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border-top: 1px solid #e5e7eb;
    text-align: right;
}

.panel-footer .btn {
    min-width: 120px;
}

/* Card-Based Timetable View */
.timetable-card-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.day-schedule-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.day-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.day-header i {
    font-size: 22px;
}

.periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 20px;
}

.period-slot {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-radius: 10px;
    padding: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

.period-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.period-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.period-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.slot-subject {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}

.slot-class {
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

/* Period Color Variations */
.period-1 {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
}

.period-2 {
    border-left: 4px solid #f97316;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}

.period-3 {
    border-left: 4px solid #eab308;
    background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%);
}

.period-4 {
    border-left: 4px solid #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.period-5 {
    border-left: 4px solid #06b6d4;
    background: linear-gradient(135deg, #ecfeff 0%, #ffffff 100%);
}

.period-6 {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.period-7 {
    border-left: 4px solid #8b5cf6;
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
}

.period-8 {
    border-left: 4px solid #ec4899;
    background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);
}

.period-9 {
    border-left: 4px solid #14b8a6;
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
}

.period-free {
    color: #9ca3af;
    font-style: italic;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.period-slot.period-free {
    border: 2px dashed #d1d5db;
    background: #fafafa;
}

.lunch-break-slot {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lunch-break-slot i {
    font-size: 18px;
    color: #b45309;
}

/* Responsive */
@media (max-width: 768px) {
    .periods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .day-schedule-card {
        margin-bottom: 15px;
    }
}

/* Admission Dashboard */
.dashboard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.loading-card {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.loading-text {
    margin-top: 15px;
    color: #6b7280;
    font-size: 14px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 8px;
    margin-bottom: 10px;
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-title i {
    font-size: 28px;
    color: #0284c7;
}

.dashboard-title h4 {
    margin: 0;
    color: #075985;
    font-weight: 700;
}

.dashboard-actions {
    display: flex;
    gap: 10px;
}

.admission-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
}

.admission-class-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.3s;
}

.admission-class-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.class-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.class-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-icon i {
    font-size: 26px;
    color: white;
}

.class-info h5 {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.class-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
}

.class-card-body {
    padding: 20px;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.total-box {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 4px solid #3b82f6;
}

.boys-box {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left: 4px solid #10b981;
}

.girls-box {
    background: linear-gradient(135deg, #fef2f8, #fce7f3);
    border-left: 4px solid #ec4899;
}

.stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.total-box .stat-icon {
    background: #3b82f6;
    color: white;
}

.boys-box .stat-icon {
    background: #10b981;
    color: white;
}

.girls-box .stat-icon {
    background: #ec4899;
    color: white;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #1f2937;
}

.gender-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.additional-stats {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mini-stat {
    background: #f9fafb;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
}

.mini-label {
    color: #6b7280;
    font-weight: 600;
}

.mini-value {
    color: #1f2937;
    font-weight: 700;
    margin-left: 4px;
}

.class-card-footer {
    padding: 12px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.class-card-footer .btn {
    width: 100%;
}

/* Summary Section */
.summary-section {
    padding: 20px;
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.summary-title i {
    font-size: 24px;
    color: #7c3aed;
}

.summary-title h5 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.summary-card i {
	font-size: 18px;
}

.total-summary {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 4px solid #3b82f6;
}

.total-summary i {
    color: #3b82f6;
}

.boys-summary {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left: 4px solid #10b981;
}

.boys-summary i {
    color: #10b981;
}

.girls-summary {
    background: linear-gradient(135deg, #fef2f8, #fce7f3);
    border-left: 4px solid #ec4899;
}

.girls-summary i {
    color: #ec4899;
}

.classes-summary {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-left: 4px solid #7c3aed;
}

.classes-summary i {
    color: #7c3aed;
}

.summary-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}

.summary-number {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 15px;
}

.empty-state h5 {
    color: #6b7280;
    margin-bottom: 8px;
}

.empty-state p {
    color: #9ca3af;
    font-size: 14px;
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .admission-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .summary-stats {
        grid-template-columns: 1fr;
    }
}

/* Admission Class - Modern Tabs & Action Cards */
.class-selection-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 8px;
}

.class-selection-header i {
    font-size: 26px;
    color: #0284c7;
}

.class-selection-header h4 {
    margin: 0;
    color: #075985;
    font-weight: 700;
}

.modern-class-tabs {
    margin-top: 15px;
}

/* Modern Tab Styling */
.modern-class-tabs .rz-tabs-nav {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.modern-class-tabs .rz-tabs-nav .rz-tab {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    margin: 0 4px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.modern-class-tabs .rz-tabs-nav .rz-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transition: width 0.3s;
    z-index: 0;
}

.modern-class-tabs .rz-tabs-nav .rz-tab:hover::before {
    width: 100%;
}

.modern-class-tabs .rz-tabs-nav .rz-tab:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.modern-class-tabs .rz-tabs-nav .rz-tab.rz-tab-selected {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.modern-class-tabs .rz-tabs-nav .rz-tab.rz-tab-selected::before {
    width: 100%;
}

.modern-class-tabs .rz-tabs-nav .rz-tab .rz-tab-label {
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-class-tabs .rz-tabs-nav .rz-tab .rz-tab-label::before {
    content: '🎓';
    font-size: 16px;
}

.modern-class-tabs .rz-tabs-nav .rz-tab.rz-tab-selected .rz-tab-label::before {
    content: '🎓';
    filter: brightness(1.2);
}

/* Tab Content */
.modern-class-tabs .rz-tabpanel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    margin-top: 15px;
    overflow: hidden;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .modern-class-tabs .rz-tabs-nav {
        flex-direction: column;
        gap: 8px;
    }
    
    .modern-class-tabs .rz-tabs-nav .rz-tab {
        width: 100%;
        text-align: center;
        margin: 0;
    }
}

.tab-content-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.tab-content-header i {
    font-size: 22px;
    color: #7c3aed;
}

.tab-content-header h5 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
	font-size: 20px;
}

/* Action Cards Grid */
.action-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
}

/* Animation when tab changes */
.cards-animate .action-card {
    animation: cardRefresh 0.6s ease-out;
}

@keyframes cardRefresh {
    0% {
        opacity: 0.3;
        transform: scale(0.95) translateY(10px);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.98) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Stagger animation for each card */
.cards-animate .action-card:nth-child(1) { animation-delay: 0ms; }
.cards-animate .action-card:nth-child(2) { animation-delay: 50ms; }
.cards-animate .action-card:nth-child(3) { animation-delay: 100ms; }
.cards-animate .action-card:nth-child(4) { animation-delay: 150ms; }
.cards-animate .action-card:nth-child(5) { animation-delay: 200ms; }
.cards-animate .action-card:nth-child(6) { animation-delay: 250ms; }
.cards-animate .action-card:nth-child(7) { animation-delay: 300ms; }
.cards-animate .action-card:nth-child(8) { animation-delay: 350ms; }
.cards-animate .action-card:nth-child(9) { animation-delay: 400ms; }
.cards-animate .action-card:nth-child(10) { animation-delay: 450ms; }
.cards-animate .action-card:nth-child(11) { animation-delay: 500ms; }
.cards-animate .action-card:nth-child(12) { animation-delay: 550ms; }

/* Base Action Card - Common Styles */
.action-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    transition: width 0.3s;
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.action-card:hover::before {
    width: 100%;
    opacity: 0.1;
}

.ac-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.ac-content {
    flex: 1;
}

.ac-content h6 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.ac-content span {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Color Variants - Using Common Pattern */
.ac-blue {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
}

.ac-blue::before {
    background: #3b82f6;
}

.ac-blue .ac-icon {
    background: #3b82f6;
}

.ac-purple {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: #ddd6fe;
}

.ac-purple::before {
    background: #7c3aed;
}

.ac-purple .ac-icon {
    background: #7c3aed;
}

.ac-orange {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: #fed7aa;
}

.ac-orange::before {
    background: #f97316;
}

.ac-orange .ac-icon {
    background: #f97316;
}

.ac-green {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #a7f3d0;
}

.ac-green::before {
    background: #10b981;
}

.ac-green .ac-icon {
    background: #10b981;
}

.ac-teal {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-color: #99f6e4;
}

.ac-teal::before {
    background: #14b8a6;
}

.ac-teal .ac-icon {
    background: #14b8a6;
}

.ac-indigo {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-color: #c7d2fe;
}

.ac-indigo::before {
    background: #6366f1;
}

.ac-indigo .ac-icon {
    background: #6366f1;
}

.ac-pink {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border-color: #fbcfe8;
}

.ac-pink::before {
    background: #ec4899;
}

.ac-pink .ac-icon {
    background: #ec4899;
}

.ac-cyan {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    border-color: #a5f3fc;
}

.ac-cyan::before {
    background: #06b6d4;
}

.ac-cyan .ac-icon {
    background: #06b6d4;
}

.ac-red {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
}

.ac-red::before {
    background: #ef4444;
}

.ac-red .ac-icon {
    background: #ef4444;
}

.ac-success {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #bbf7d0;
}

.ac-success::before {
    background: #22c55e;
}

.ac-success .ac-icon {
    background: #22c55e;
}

.ac-yellow {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-color: #fef08a;
}

.ac-yellow::before {
    background: #eab308;
}

.ac-yellow .ac-icon {
    background: #eab308;
}

.ac-gray {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border-color: #e5e7eb;
}

.ac-gray::before {
    background: #6b7280;
}

.ac-gray .ac-icon {
    background: #6b7280;
}

.ac-violet {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border-color: #e9d5ff;
}

.ac-violet::before {
    background: #8b5cf6;
}

.ac-violet .ac-icon {
    background: #8b5cf6;
}

/* Responsive Action Cards */
@media (max-width: 768px) {
    .action-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard View Tabs */
.dashboard-view-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}

.view-tab {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-tab:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.view-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}

.view-tab i {
    font-size: 16px;
}

/* Admission Dashboard - 4 Column Grid */
.admission-class-cards-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0px 20px 20px;
}

/* Modern Admission Card */
.admission-card-modern {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.admission-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

.card-header-modern {
    background: linear-gradient(135deg, #237abf 0%, #2196F3 100%);
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.class-name-section {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    font-weight: 700;
}

.class-name-section i {
    font-size: 18px;
}

.total-badge-modern {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    display: none;
}

.card-body-modern {
    padding: 0;
}

/* Detail Table Modern */
.detail-table-wrapper {
    max-height: 300px;
    overflow-y: auto;
}

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

.detail-table-modern tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}

.detail-table-modern tbody tr:last-child {
    border-bottom: none;
}

.detail-table-modern tbody tr:hover {
    background: rgba(102, 126, 234, 0.05);
}

.detail-icon-col {
    width: 40px;
    text-align: center;
    padding: 10px 8px;
    font-size: 16px;
}

.detail-name-col {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.detail-value-col {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    color: #1f2937;
}

/* Colorful Row Variants */
.row-blue .detail-icon-col {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
}

.row-green .detail-icon-col {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}

.row-purple .detail-icon-col {
    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
    color: #9333ea;
}

.row-orange .detail-icon-col {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #ea580c;
}

.row-pink .detail-icon-col {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #db2777;
}

.row-cyan .detail-icon-col {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    color: #0891b2;
}

/* Grid View Section */
.grid-view-section {
    padding: 0px 20px 27px;
}

/* Class Details Grid - Colorful Cards */
.class-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.detail-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.detail-card-icon {
    font-size: 18px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-card-content {
    flex: 1;
    min-width: 0;
}

.detail-card-label {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-card-value {
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
}

/* Color Variants - Light & Colorful */
.detail-blue {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border: 1px solid #7dd3fc;
}

.detail-blue .detail-card-icon {
    color: #0284c7;
}

.detail-blue .detail-card-label {
    color: #0369a1;
}

.detail-blue .detail-card-value {
    color: #075985;
}

.detail-green {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #6ee7b7;
}

.detail-green .detail-card-icon {
    color: #059669;
}

.detail-green .detail-card-label {
    color: #047857;
}

.detail-green .detail-card-value {
    color: #065f46;
}

.detail-purple {
    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
    border: 1px solid #c084fc;
}

.detail-purple .detail-card-icon {
    color: #9333ea;
}

.detail-purple .detail-card-label {
    color: #7e22ce;
}

.detail-purple .detail-card-value {
    color: #6b21a8;
}

.detail-orange {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    border: 1px solid #fb923c;
}

.detail-orange .detail-card-icon {
    color: #ea580c;
}

.detail-orange .detail-card-label {
    color: #c2410c;
}

.detail-orange .detail-card-value {
    color: #9a3412;
}

.detail-red {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    border: 1px solid #f87171;
}

.detail-red .detail-card-icon {
    color: #dc2626;
}

.detail-red .detail-card-label {
    color: #b91c1c;
}

.detail-red .detail-card-value {
    color: #991b1b;
}

.detail-pink {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border: 1px solid #f9a8d4;
}

.detail-pink .detail-card-icon {
    color: #db2777;
}

.detail-pink .detail-card-label {
    color: #be185d;
}

.detail-pink .detail-card-value {
    color: #9f1239;
}

/* Responsive Dashboard */
@media (max-width: 1600px) {
    .admission-class-cards-compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .admission-class-cards-compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admission-class-cards-compact {
        grid-template-columns: 1fr;
    }
    
    .dashboard-view-tabs {
        flex-direction: column;
        gap: 5px;
    }
    
    .view-tab {
        padding: 10px 16px;
    }
}

/* ==========================================
   Exam Seating Module Styles
   ========================================== */

/* Sitting Design Page Styles */
.summary_panel_fixed_bottom {
    position: fixed;
    bottom: 0;
    left: 17%;
    right: 0;
	background-color: #fff9f9 !important;
    border-top: 3px solid #dc3528 !important;
    z-index: 1000;
    padding: 10px 0px !important;
}

.summary_panel_fixed_bottom .row {
    margin: 0;
}

.summary_panel_fixed_bottom .col-md-2 {
    padding: 0 10px;
}

.summary_panel_fixed_bottom h4 {
	font-size: 32px;
    font-weight: 700;
}

.summary_panel_fixed_bottom p {
	font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.summary_panel_fixed_bottom p i {
    font-size: 16px;
}
.seat-grid-container {
	background: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
	margin-bottom: 50px;
}

.seat-grid {
    display: grid;
    gap: 8px;
    margin: 0 auto;
    width: fit-content;
    padding: 10px;
}

.seat-item {
    width: 70px;
    height: 65px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 4px;
}

.seat-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.seat-available {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
}

.seat-blocked {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

.seat-empty {
    background: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
}

.seat-teacher {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-color: #f093fb;
    color: white;
}

.seat-aisle {
    background: transparent;
    border: 2px dashed #ced4da;
    color: #6c757d;
}

.board-area {
    background: #198754;
    color: white;
    padding: 4px 0;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
}

.legend-container {
	display: flex;
		flex-wrap: wrap;
		gap: 22px;
		padding: 11px;
		background: white;
		margin-bottom: 0;
		border-bottom: 1px solid #dcdcdc;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

.tool-panel {
	background: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    position: relative;
}

.tool-btn {
	padding: 2px 15px;
    margin-right: 10px;
    border: 2px solid #dee2e6;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}
.tool_panel_buttons{
	position: absolute;
    right: 8px;
    top: 33px;
}
.tool-btn.active {
    border-color: #667eea;
    background: #667eea;
    color: white;
}

/* Sitting Plan List Page Styles */
.room-card {
	border: 2px solid #d2d2d2;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    background: white;
}

.room-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.room-title {
    font-size: 17px;
    font-weight: bold;
    color: #2c3e50;
}

.room-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.info-badge {
	display: flex;
		align-items: center;
		gap: 8px;
		padding: 1px 7px;
		font-weight: 700;
		border-radius: 4px;
		font-size: 12px;
		border-left: 3px solid #dee2e6;
		transition: all 0.3s ease;
}

.info-badge:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Colorful Info Badge Variants */
.info-badge.badge-primary {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left-color: #2196F3;
    color: #1565C0;
}

.info-badge.badge-success {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-left-color: #4CAF50;
    color: #2E7D32;
}

.info-badge.badge-warning {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-left-color: #FFC107;
    color: #F57C00;
}

.info-badge.badge-info {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    border-left-color: #00BCD4;
    color: #00838F;
}

.info-badge.badge-purple {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-left-color: #9C27B0;
    color: #6A1B9A;
}

.student-seat-grid {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.student-seat {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    background: linear-gradient(135deg, #2b43b1 0%, #2196F3 100%);
    color: white;
    text-align: center;
    font-size: 12px;
    transition: all 0.3s;
    cursor: pointer;
}

.student-seat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.seat-number {
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}
.student-seat .student-name {
    font-size: 11px;
    opacity: 0.95;
	color: white;
}
.student-seat .student-rolllno {
	font-size: 10px;
	margin-top: 3px;
}
.exam-selector {
	background: white;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 0px;
}
.rz-variant-filled .rz-tabview-top{
	padding: 10px;
}
.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.stat-card {
	padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    border-left: 4px solid #667eea;
    text-align: left;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Colorful Stat Card Variants */
.stat-card.stat-primary {
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
    border-left-color: #2196F3;
}

.stat-card.stat-primary .stat-value {
    color: #1976D2;
}

.stat-card.stat-success {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    border-left-color: #4CAF50;
}

.stat-card.stat-success .stat-value {
    color: #388E3C;
}

.stat-card.stat-info {
    background: linear-gradient(135deg, #e0f7fa 0%, #f0fafb 100%);
    border-left-color: #00BCD4;
}

.stat-card.stat-info .stat-value {
    color: #0097A7;
}

.stat-card.stat-warning {
    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
    border-left-color: #FFC107;
}

.stat-card.stat-warning .stat-value {
    color: #F57C00;
}

.stat-card.stat-danger {
    background: linear-gradient(135deg, #ffebee 0%, #fff5f5 100%);
    border-left-color: #F44336;
}

.stat-card.stat-danger .stat-value {
    color: #D32F2F;
}

.stat-card.stat-purple {
    background: linear-gradient(135deg, #f3e5f5 0%, #faf5fb 100%);
    border-left-color: #9C27B0;
}

.stat-card.stat-purple .stat-value {
    color: #7B1FA2;
}

/* Tab Styling for Seating Plan */
.rz-tabview-nav {
    border-bottom: 2px solid #e9ecef;
}

.rz-tabview-nav .rz-tabview-nav-link {
    padding: 12px 24px;
    font-weight: 500;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.rz-tabview-nav .rz-tabview-nav-link:hover {
    background: #f8f9fa;
    border-bottom-color: #667eea;
}

.rz-tabview-nav .rz-tabview-nav-link.rz-state-active {
    border-bottom-color: #667eea;
    color: #667eea;
    font-weight: 600;
}

/* Grid Controls for Sitting Design */
.grid-controls {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-label {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-label strong {
    color: #667eea;
    font-size: 20px;
}

.grid-controls .btn-group {
    display: flex;
    gap: 10px;
}

.grid-controls .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.grid-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.grid-controls .btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Filter Panel for Seating Plan List */
.filter-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-panel .compact-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-panel .text-muted {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* Empty State Styling */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

.empty-state i.bi {
    font-size: 64px;
    color: #6c757d;
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-state h5 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 12px;
    font-weight: 600;
}

.empty-state p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 24px;
}

.empty-state .btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
}

/* Redesigned Tool Panel for Sitting Design */
.tool-panel-redesigned {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tool-panel-redesigned h6 {
    margin-bottom: 12px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-panel-redesigned .btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.grid-size-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-label-compact {
    font-weight: 600;
    color: #495057;
    min-width: 45px;
}

.control-value {
    font-weight: bold;
    color: #667eea;
    min-width: 30px;
    text-align: center;
    font-size: 16px;
}

.control-row .btn {
    padding: 4px 10px;
    font-size: 14px;
}

.control-row .btn i {
    font-size: 14px;
}

/* Tool Buttons for Design Tools */
.tool-btn {
    padding: 10px 16px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
}

.tool-btn:hover {
    background: #f8f9fa;
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tool-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.tool-btn.active:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.tool-btn i {
    font-size: 16px;
}

/* Student Assignment Panel - Uses existing slide-out-panel classes */
.student-filters {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.panel-footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

/* Student Cards */
.student-list {
    max-height: 400px;
    overflow-y: auto;
}

.student-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.student-card:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.student-card.assigned {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4CAF50;
}

.student-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.student-details {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: #6c757d;
}

.roll-number {
    font-weight: 500;
}

.class-name {
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.assigned-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #4CAF50;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* Student Seat in Grid */
.seat-student {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-color: #4facfe;
    color: white;
}

.student-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 10px;
    text-align: center;
    gap: 2px;
}

.seat-num {
    font-weight: bold;
    font-size: 11px;
    color: #2c3e50;
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
}

.student-name {
    font-size: 9px;
    color: white;
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-class {
    font-size: 8px;
    color: #2c3e50;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}

/* Student Grid in Modal */
.student-grid-container {
    max-height: 500px;
    overflow: hidden;
}

.student-datagrid {
    border: none !important;
}

.student-datagrid .rz-grid-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.student-datagrid .rz-grid-header th {
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 12px 8px !important;
}

.student-datagrid .rz-datatable-data td {
    border-bottom: 1px solid #e9ecef !important;
    vertical-align: middle !important;
    padding: 10px 8px !important;
}

.student-datagrid .rz-datatable-data tr:hover {
    background: #f8f9fa !important;
}

.student-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-name-cell i {
    color: #667eea;
    font-size: 18px;
}

.student-datagrid .badge {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    display: inline-block;
}

.student-datagrid .badge-info {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    color: white;
}

.student-datagrid .badge-success {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
}

.student-datagrid .badge-secondary {
    background: #6c757d;
    color: white;
}

/* Selected Count Badge */
.selected-count-badge {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.selected-count-badge i {
    font-size: 18px;
}

.selected-count-badge .btn {
    padding: 4px 10px;
    font-size: 12px;
}

/* No Data Display Styles */
.no-data-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 10px 20px;
}

.no-data-content {
    text-align: center;
    max-width: 500px;
}

.no-data-icon {
    font-size: 80px;
    color: #6c757d;
    margin-bottom: 0px;
    opacity: 0.5;
}

.no-data-title {
	color: #969696;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0px;
}

.no-data-description {
    color: #a3a3a3;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

 .submission-header {
	margin-bottom: 30px;
    text-align: center;
    }

    .submission-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .submission-icon i {
        font-size: 40px;
        color: white;
    }

    .submission-title {
        color: #1f2937;
        font-weight: 600;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .submission-description {
        color: #6b7280;
        font-size: 14px;
        margin: 0;
    }

    .modern-input {
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .modern-input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .info-message {
        background: #eff6ff;
        border-left: 4px solid #3b82f6;
        padding: 12px 16px;
        border-radius: 6px;
        margin: 20px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: #1e40af;
    }

    .info-message i {
        font-size: 18px;
        color: #3b82f6;
    }

    .form-actions {
        text-align: center;
        margin-top: 30px;
    }


    @media (max-width: 768px) {
        .form-submission-container {
            padding: 24px;
        }

        .submission-title {
            font-size: 20px;
        }

        .submission-icon {
            width: 60px;
            height: 60px;
        }

        .submission-icon i {
            font-size: 30px;
        }
    }

/* ========================================
   FEE COLLECTION EDIT - MODERN DESIGN
   ======================================== */

.fee-collection-edit-modern {
	max-height: 100vh;
    overflow: hidden;
}

/* Header Pills Section - Compact & Colorful */
.fee-edit-header {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fee-pill {
    flex: 1;
    min-width: 200px;
    border-radius: 10px;
    padding: 7px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.fee-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    z-index: 0;
}

.fee-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.pill-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
    flex-shrink: 0;
}

.pill-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1;
    flex: 1;
}

.fee-pill-primary {
	border-left: 4px solid #009688;
}

.fee-pill-primary .pill-icon-wrapper {
	background: #009688;
}

.fee-pill-success {
	border-left: 4px solid #4CAF50;
}

.fee-pill-success .pill-icon-wrapper {
	background: #4CAF50;
}

.fee-pill-info {
	border-left: 4px solid rgb(238 99 89);
}

.fee-pill-info .pill-icon-wrapper {
	background: rgb(238 99 89);
}
.pill-icon-wrapper i {
    font-size: 20px;
}

.pill-label {
	font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    color: grey;
}

.fee-pill strong {
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modern-date-picker-compact {
    width: 100%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 600;
    color: white;
    font-size: 13px;
}

.modern-date-picker-compact:focus {
    background: rgba(255, 255, 255, 0.35);
    outline: none;
}

/* Modern Student Card - Compact */
.modern-student-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.modern-student-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

.modern-student-card .student-card-header {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
	margin: 0;
}

.modern-student-card .student-card-header .header-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modern-student-card .student-card-header .admission-no {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.modern-student-card .student-card-header i {
    font-size: 14px;
}

.modern-student-card .student-card-body {
    padding: 10px;
}

.modern-student-card .student-photo-section {
    text-align: center;
    position: relative;
    margin-bottom: 0px;
}

.modern-student-card .student-photo {
    width: 100px;
    height: 115px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #667eea;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.modern-student-card .student-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
}

.student-photo-section .admission-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 11px;
    margin-top: 6px;
    box-shadow: 0 2px 6px rgba(245, 87, 108, 0.3);
}

.student-photo-section .absent i {
    margin-right: 4px;
    font-size: 10px;
}

.modern-student-card .student-details {
    border-bottom: 1px dashed #aab5c4;
    gap: 3px;
    display: block;
}

.modern-student-card .student-name {
    font-size: 17px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 4px;
    display: flex;
    gap: 6px;
}

.modern-student-card .student-name i {
    color: #667eea;
    font-size: 14px;
}

.modern-student-card .ac-cyan::before {
    font-size: 12px;
    color: #4a5568;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.modern-student-card .student-class {
    font-size: 14px;
    color: #ffffff;
    background: #2196F3;
    padding: 2px 5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 23px;
    justify-content: center;
    max-width: 90px;
}
.modern-student-card .student-class i {
	color: #ffffff;
    font-size: 11px;
}

.modern-student-card .receipt-info-card {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border-radius: 8px;
    padding: 10px;
    border: 2px solid #667eea;
}

.modern-student-card .receipt-number {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
}

.modern-student-card .receipt-number i {
    color: #667eea;
    font-size: 14px;
}

.modern-student-card .receipt-label {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
}

.modern-student-card .receipt-number strong {
    margin-left: auto;
    font-size: 13px;
    color: #2d3748;
}

.modern-student-card .receipt-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 8px;
    border-radius: 6px;
}

.modern-student-card .receipt-amount i {
    color: white;
    font-size: 16px;
    animation: pulse 2s infinite;
}

.modern-student-card .amount-value {
    font-size: 15px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Horizontal Student Info Layout */
.student-info-horizontal {
	display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
}

.student-photo-compact {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.student-info-content {
	flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.student-info-content .receipt-info {
	color: #007bff;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 0;
    top: 0;
    border: 1px dotted;
    padding: 6px 5px;
    border-radius: 6px;
}

.receipt-amount-large {
	background: #dc6d6d;
    color: white;
    padding: 2px 15px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receipt-amount-large .amount-label {
	font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: white;
    margin: 0;
}

/* Modern Payment Card - Compact */
.modern-payment-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.modern-payment-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

.payment-card-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-card-header i {
    font-size: 14px;
}

.payment-card-body {
    padding: 12px;
}

.modern-form-field-compact {
    margin-bottom: 10px;
}

.modern-label-compact {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
    font-size: 11px;
}

.modern-label-compact i {
    color: #667eea;
    font-size: 12px;
}

.modern-input-compact {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.modern-input-compact:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

/* Modern Fee Details Card - Compact */
.modern-fee-details-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-height: calc(100vh - 315px);
    display: flex;
    flex-direction: column;
}

.modern-fee-details-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

.fee-details-header {
	background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
	position: relative;
    gap: 8px;
}

.fee-details-header > i {
    font-size: 14px;
}

.total-badge {
	background: rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    right: 13px;
}

.fee-details-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.modern-datagrid-edit {
    border: none;
    font-size: 12px;
}

.modern-datagrid-edit .rz-datatable-data {
    font-size: 12px;
}

.modern-datagrid-edit th {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #667eea !important;
    font-size: 11px;
}
.modern-datagrid-edit .rz-column-title-content {
	color: #2d3748 !important;
}
.modern-datagrid-edit td {
    padding: 6px 8px;
    vertical-align: middle;
    font-size: 11px;
}

.modern-datagrid-edit tbody tr:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.amount-payable {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.amount-payable i {
    color: #856404;
    font-size: 10px;
}

.amount-received {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.amount-received i {
    color: #155724;
    font-size: 10px;
}

.modern-input-grid {
    width: 100%;
    border: 1px solid #667eea;
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 12px;
}

/* Grid Total - Outside & Centered */
.grid-total-outside {
	display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 5px;
		border: 1px solid #d6bcbca3;
		background: white;
		border-radius: 10px;
		box-shadow: 3px 2px 6px #80808033;
		padding: 7px 0;
}

.grid-footer-total {
	background: #df6565;
    color: white;
    padding: 5px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.grid-footer-total:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(102, 126, 234, 0.5);
}
.grid-footer-total strong{
	font-weight:600;
}
.grid-footer-total i {
    font-size: 16px;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.6);
    }
}

.action-buttons-inline {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.action-buttons-inline button {
    font-size: 11px !important;
    padding: 4px 8px !important;
}

/* Modern Footer - Compact */
.modern-fee-footer {
	background: #ffe6e6;
    border-radius: 10px;
    padding: 5px 12px;
    margin-top: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    border: 1px solid #c2a0a0;
}
.modern-fee-footer .footer-remarks {
    flex: 1;
}
.modern-fee-footer .modern-input-remarks {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.modern-fee-footer .modern-input-remarks:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.modern-fee-footer .footer-print-option {
	display: flex	;
		align-items: center;
		margin-top: 25px;
}

.modern-fee-footer .print-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #2d3748;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 11px;
	margin:0px;
}

.modern-fee-footer .print-checkbox:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateY(-1px);
}

.modern-fee-footer .print-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.modern-fee-footer .print-checkbox i {
    color: #667eea;
    font-size: 12px;
}

.modern-fee-footer .footer-actions {
    display: flex;
    gap: 8px;
	margin-top: 25px;
}

.modern-fee-footer .action-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.modern-fee-footer .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modern-fee-footer .action-btn i {
    margin-right: 4px;
    font-size: 12px;
}

.modern-fee-footer .action-btn-save {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.modern-fee-footer .action-btn-late {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.modern-fee-footer .action-btn-cancel {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

/* Responsive Design - Optimized */
@media (max-width: 992px) {
    .fee-edit-header {
        flex-direction: column;
    }

    .fee-pill {
        min-width: 100%;
    }

    .modern-fee-footer {
        grid-template-columns: 1fr;
    }

    .footer-actions {
        flex-direction: column;
        width: 100%;
    }

    .action-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .fee-collection-edit-modern {
        padding: 8px;
    }

    .student-photo {
        width: 90px;
        height: 105px;
    }

    .student-name {
        font-size: 14px;
    }

    .amount-value {
        font-size: 16px;
    }

    .modern-fee-footer {
        padding: 8px;
    }
}

/* Highlighted section box for nested content */
.highlight-section-box {
	background-color: #dfefff;
    border: 1px solid #acacac;
    border-radius: 10px;
    padding: 10px;
    margin-top: 0;
}

.highlight-section-box h5 {
    color: #4a5568;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Summary Cards for Dashboard/Overview */
.summary-card {
	background: white;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.summary-icon {
    font-size: 40px;
	width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.summary-primary .summary-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.summary-success .summary-icon {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.summary-info .summary-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.summary-danger .summary-icon {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.summary-content {
    flex: 1;
}

.summary-label {
	font-size: 13px;
    color: #6c757d;
    margin-bottom: 1px;
}

.summary-amount {
	font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
}

/* Slide down animation for expanded rows */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Delete Confirmation Dialog */
.delete-confirm-dialog {
    padding: 0;
    min-width: 400px;
}

.delete-confirm-icon-container {
    text-align: center;
    padding: 30px 20px 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
}

.delete-confirm-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    animation: confirmScaleIn 0.3s ease;
}

.delete-confirm-icon-circle i {
    font-size: 2.5rem;
    color: #dc3545;
}

.delete-confirm-content {
    padding: 25px 30px;
    text-align: center;
}

.delete-confirm-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.delete-confirm-message {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.delete-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 20px 30px 30px;
    background: #f8f9fa;
}

.delete-confirm-actions button {
    min-width: 120px;
}

@keyframes confirmScaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fee Concession Wizard Styles */
.fee-concession-wizard .regview-card {
    background: transparent;
    margin-top: 12px;
}

.fee-concession-wizard .regview-body {
    background: white;
}

.fee-concession-wizard .wizard-steps {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 20px;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fee-concession-wizard .wizard-step.completed .step-number {
    background: #28a745;
    color: white;
}

.fee-concession-wizard .step-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    text-align: center;
}

.fee-concession-wizard .wizard-line {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    margin: 0 10px;
    position: relative;
    top: 0px;
}

.fee-concession-wizard .wizard-navigation {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 20px;
}
.fee-concession-wizard .student-info-bar {
	background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    border: 1px solid #667eea;
    border-radius: 8px;
    padding: 6px 16px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.fee-concession-wizard .info-item {
    color: #333;
}
.fee-concession-wizard .info-item i {
    color: #667eea;
    margin-right: 5px;
}

.fee-concession-wizard .concession-grid-card {
    border: 2px solid #ff9800;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
}

.fee-concession-wizard .concession-grid-header {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
	padding: 5px 10px;
    font-weight: 600;
    font-size: 1rem;
}

.fee-concession-wizard .concession-grid-body {
    padding: 0;
    background: white;
}

.fee-concession-wizard .fade-in {
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fee-concession-wizard .student-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.fee-concession-wizard .student-popup-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideInDown 0.3s ease;
}

.fee-concession-wizard .student-popup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fee-concession-wizard .student-popup-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.fee-concession-wizard .close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.fee-concession-wizard .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fee-concession-wizard .student-popup-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fee-structure-wizard .regview-card{
        background: transparent;
        margin-top: 12px;
   }
   .fee-structure-wizard .regview-body{
        background: white;
   }
  .fee-structure-wizard .wizard-steps {
        max-width: 900px;
        margin: 0 auto 0;
        padding: 8px 20px;
        background: white;
        border-radius: 10px;
    }
    .fee-structure-wizard .wizard-step.completed .step-number {
        background: #28a745;
        color: white;
    }
    .fee-structure-wizard .step-label {
        font-size: 0.9rem;
        font-weight: 500;
        color: #666;
        text-align: center;
    }
    .fee-structure-wizard .wizard-line {
      flex: 1;
    height: 3px;
    background: #afafaf;
    margin: 0 10px;
    position: relative;
    top: 1px;
    }

    .fee-structure-wizard .wizard-line.completed {
        background: #28a745;
    }

    .fee-structure-wizard .group-box {
           border: 2px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 370px;
    display: flex;
    flex-direction: column;
    }

    .fee-structure-wizard .group-box-header {
       background: #009688;
    color: white;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 1rem;
    }
    .fee-structure-wizard .group-selection-box {
        padding: 15px;
        overflow-y: auto;
        background: #f9f9f9;
        flex: 1;
    }

    .fee-structure-wizard .group-selection-box.selected {
        background: #f0fff4;
    }

    .fee-structure-wizard .group-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        background: white;
        border-radius: 6px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.2s;
    }

    .fee-structure-wizard .group-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .fee-structure-wizard .group-item.selected {
        background: #e8f5e9;
        border-left: 4px solid #28a745;
    }

    .fee-structure-wizard .wizard-navigation {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-top: 10px;
    }

    .fee-structure-wizard .fade-in {
        animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .fee-structure-wizard .selected-groups-card {
        border: 2px solid #28a745;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 20px;
        background: white;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
    }

    .fee-structure-wizard .selected-groups-header {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 8px 10px;
    font-weight: 600;
    }

    .fee-structure-wizard .selected-groups-body {
        padding: 15px;
        background: #f0fff4;
        min-height: 60px;
    }

    .fee-structure-wizard .selected-groups-body .badge {
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .fee-structure-wizard .badge-info {
        background: #667eea;
        color: white;
    }

    .fee-structure-wizard .added-items-card {
       border: 2px solid #ee7474;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    }

    .fee-structure-wizard .added-items-header {
       background: #ee7474;
    color: white;
    padding: 3px 10px;
    font-weight: 600;
    font-size: 1rem;
    }

    .fee-structure-wizard .added-items-body {
        padding: 0;
        background: white;
    }


    .fee-structure-wizard .no-data-container-small {
        text-align: center;
        padding: 40px;
        color: #999;
    }

    .fee-structure-wizard .no-data-container-small i {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .fee-structure-wizard .selected-groups-bar {
        background: linear-gradient(135deg, #28a74515 0%, #20c99715 100%);
        border: 1px solid #28a745;
        border-radius: 8px;
        padding: 10px 15px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fee-structure-wizard .groups-label {
        font-weight: 600;
        color: #28a745;
        margin-right: 10px;
    }

	.fee-structure-wizard  .group-badge {
        background: #28a745;
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .fee-structure-wizard .mini-summary-card {
       border-radius: 10px;
    padding: 5px 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    transition: transform 0.2s;
    }

    .fee-structure-wizard .mini-summary-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .fee-structure-wizard .mini-summary-card.blue {
        background: #e3f2fd;
        border-left: 5px solid #1565c0;
        color: #1565c0;
    }

    .fee-structure-wizard .mini-summary-card.purple {
        background: #f3e5f5;
        border-left: 5px solid #6a1b9a;
        color: #6a1b9a;
    }

    .fee-structure-wizard .mini-summary-card.orange {
        background: #fff3e0;
        border-left: 5px solid #e65100;
        color: #e65100;
    }

    .fee-structure-wizard .mini-summary-card.green {
        background: #e8f5e9;
        border-left: 5px solid #2e7d32;
        color: #2e7d32;
    }

    .fee-structure-wizard .mini-icon {
        font-size: 25px;
        opacity: 0.9;
    }
    .fee-structure-wizard .mini-content {
          flex: 1;
    line-height: 20px;
    }

    .fee-structure-wizard .mini-value {
           font-size: 17px;
    font-weight: 700;
    margin-bottom: 2px;
    margin: 0;
    }

    .fee-structure-wizard .mini-label {
           font-size: 0.85rem;
    opacity: 0.9;
    }

    .fee-structure-wizard .fee-details-card {
        border: 2px solid #ee7474;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 20px;
        background: white;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    }

    .fee-structure-wizard .fee-details-header {
           background: #ee7474;
    font-weight: 600;
    font-size: 15px;
    }

    .fee-structure-wizard .fee-details-body {
        padding: 0;
        background: white;
    }

    .fee-structure-wizard .badge {
        display: inline-block;
        padding: 6px 12px;
        margin: 3px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .fee-structure-wizard .badge-primary {
        background: #667eea;
        color: white;
    }

/* ========================================
   Registration Seat - View Detail Button
   ======================================== */
.regseat-btn-view-detail {
	background: #6c757d !important;
    padding: 3px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    min-height: auto !important;
    color: #ffffff !important;
}

.regseat-btn-view-detail:hover {
    background: #5a6268 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}