:root {
	--background-color: #f2f2f2;
	--background-color-dark:#0b0b17;
	--black: #1f1f1f;
	--grey: #5c5c5c;
	--grey-dark: #333;
	--grey-light: #cdcdcd;
	--grey-x-light: #ebebeb;
	--white: #fefefe;

	--orange: #ff713e;
	--orange-dark: #e3501b;
	--orange-light: #ff9563;
	--orange-x-light: #ffc5ab;
	--orange-xx-light: #fff2ec;

	--red: #991212;
	--red-light: #ffdbdb;
	--red-x-light: #ffeded;

	--green: #0b732a;
	--green-light: #bdffd1;
	--green-x-light: #e7ffee;

	--border-radius: 9px;
	--transition: all 0.2s ease-in-out;
}
/*
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #1f1f1f;
		--background-color-dark:#0b0b17;
		--black: #d7d7d7;
		--grey: #a1a1a1;
		--grey-dark: #e1e1e1;
		--grey-light:#717171;
		--grey-x-light: #363636;
		--white: #292929;
		
		--orange: #fd7b4c;
		--orange-dark: #e84a11;
		--orange-light: #ff8046;
		--orange-x-light: #ff8a50;
		--orange-xx-light: #230e04;
		
		--red: #de2f2f;
		--red-light: #350707;
		--red-x-light: #260404;

		--green: #1eb930;
		--green-light: #052e11;
		--green-x-light: #03220c;
		
		--border-radius: 9px;
		--transition: all 0.2s ease-in-out
	}
}
*/

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

body {
	background-color: var(--background-color);
	font-family: "Space Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color:var(--black)
}

a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

/*Text Sizes*/
.text-3xl{
	font-size:3.438rem;
}
.text-2xl{
	font-size:2.5rem;
}
.text-xl{
	font-size:1.875rem;
}
.text-lg{
	font-size:1.5rem;
}
.text-md{
	font-size:1.25rem;
}
.text-sm{
	font-size:1rem;
}
.text-xs{
	font-size:0.875rem;
}
.text-2xs{
	font-size:0.75rem;
}
.text-bold-lg{
	font-weight:700;
}
.text-bold-md{
	font-weight:500;
}
@media(max-width:768px) {
	.text-3xl{
		font-size:2.5rem;
	}
	.text-2xl{
		font-size:1.875rem;
	}
	.text-xl{
		font-size:1.5rem;
	}
	.text-lg{
		font-size:1.25rem;
	}
	.text-md{
		font-size:1rem;
	}
	.text-sm{
		font-size:0.875rem;
	}
	.text-xs{
		font-size:0.875rem;
	}
}

/*Text Colors*/
.text-orange{
	color:var(--orange);
}
.text-orange-dark{
	color:var(--orange-dark);
}
.text-orange-light{
	color:var(--orange-light);
}
.text-orange-x-light{
	color:var(--orange-x-light);
}
.text-grey{
	color:var(--grey);
}
.text-grey-dark{
	color:var(--grey-dark);
}
.text-grey-light{
	color:var(--grey-light);
}
.text-white{
	color:var(--white);
}
.text-black{
	color:var(--black);
}
.text-green{
	color:var(--green);
}
.text-green-light{
	color:var(--green-light);
}
.text-red{
	color:var(--red);
}


/*Paddings*/
.pc-3{
	padding:15px;
}
.pc-4{
	padding:25px;
}
.pc-5{
	padding:35px;
}
.pct-1{
	padding-top:5px;
}
.pcl-1{
	padding-left:5px;
}
.pcb-1{
	padding-bottom:5px;
}
.pcr-1{
	padding-right:5px;
}
.pct-2{
	padding-top:10px;
}
.pcl-2{
	padding-left:10px;
}
.pcb-2{
	padding-bottom:10px;
}
.pcr-2{
	padding-right:10px;
}
.pct-3{
	padding-top:15px;
}
.pcl-3{
	padding-left:15px;
}
.pcb-3{
	padding-bottom:15px;
}
.pcr-3{
	padding-right:15px;
}
.pct-4{
	padding-top:25px;
}
.pcl-4{
	padding-left:25px;
}
.pcb-4{
	padding-bottom:25px;
}
.pcr-4{
	padding-right:25px;
}
.pct-5{
	padding-top:35px;
}
.pcl-5{
	padding-left:35px;
}
.pcb-5{
	padding-bottom:35px;
}
.pcr-5{
	padding-right:35px;
}
@media(max-width:768px) {
	.pc-3{
		padding:10px;
	}
	.pc-4{
		padding:15px;
	}
	.pc-5{
		padding:20px;
	}
	.pct-2{
		padding-top:7px;
	}
	.pcl-2{
		padding-left:7px;
	}
	.pcb-2{
		padding-bottom:7px;
	}
	.pcr-2{
		padding-right:7px;
	}
	.pct-3{
		padding-top:10px;
	}
	.pcl-3{
		padding-left:10px;
	}
	.pcb-3{
		padding-bottom:10px;
	}
	.pcr-3{
		padding-right:10px;
	}
	.pct-4{
		padding-top:15px;
	}
	.pcl-4{
		padding-left:15px;
	}
	.pcb-4{
		padding-bottom:15px;
	}
	.pcr-4{
		padding-right:15px;
	}
	.pct-5{
		padding-top:25px;
	}
	.pcl-5{
		padding-left:25px;
	}
	.pcb-5{
		padding-bottom:25px;
	}
	.pcr-5{
		padding-right:25px;
	}
}

.card-box-lg{
	background:var(--white);
	border-radius: var(--border-radius);
	padding:45px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	transition: transform 1s ease;
}
.card-box-lg:hover{
	transform: scale(1.03);
}
.card-box-md{
	background:var(--white);
	border-radius: var(--border-radius);
	padding:30px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	transition: transform 0.5s ease;
}
.card-box-md:hover{
	transform: scale(1.01);
}
.text-center-desk{
	text-align: center;
}
@media(max-width:768px) {
	.card-box-lg{
		padding:25px;
	}
	.card-box-md{
		padding:25px;
	}
	.text-center-desk{
		text-align: start;
	}
}

.min-height-90{
	min-height:90vh;
}

/* Buttons*/
.btns {
	padding: 9px 21px;
	font-size: 1rem;
	border-radius: var(--border-radius);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transition: var(--transition);
}

.btns:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

/* Loader Circle */
.btns.loading{
    pointer-events: none;
    opacity: 0.8;
}

.btns.loading::after{
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.4);
    border-top: 3px solid #fff;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    animation: spin 0.8s linear infinite;
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.btns-imp {
	color: var(--white);
	font-weight:500;
	background: #ff4000;
	background: linear-gradient(90deg, var(--orange-dark) 0%, var(--orange) 50%, var(--orange-light) 100%);
	border: none;

}
.btns-imp:hover {
	border: none;
}

.btns-nrm {
	font-weight: 500;
	color: var(--black);
	background-color: var(--orange-xx-light);
	border: none;
}

.btns-nrm:hover {
	background-color: var(--orange-x-light);
}

.btns-igr {
	font-weight: 500;
	color: var(--grey);
	background-color: var(--white);
	border: none;
}

.btns-igr:hover {
	background-color: var(--orange-xx-light);
}

/*Action buttons for table*/
.btns-action {
	padding: 5px 15px;
	font-size: 0.875rem;
	border-radius: var(--border-radius);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	transition: var(--transition);
}
.btns-action:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}
.btns-action-imp {
	color: var(--black);
	font-weight:500;
	background: var(--green-x-light);
	border: none;
}
.btns-action-imp:hover {
	background-color: var(--green-light);
	border: none;
}
.btns-action-nrm {
	color: var(--black);
	font-weight:500;
	background: var(--orange-xx-light);
	border: none;
}
.btns-action-nrm:hover {
	background-color: var(--orange-x-light);
	border: none;
}

@media(max-width:768px) {
	.btns {
		padding: 9px 25px;
		font-size: 0.875rem;
	}
}

/* Input fields */
.form-label{
	font-size:0.875rem;
	color:var(--grey)
}
.form-control, .form-select{
	color:var(--black);
	font-size:0.875rem;
	font-weight:500;
	border:1px solid var(--grey-light);
	outline:none;
	border-radius: var(--border-radius);
	padding:9px 11px;
	transition: var(--transition);
	background: var(--white);
}
.form-control:focus, .form-select:focus, .form-check-input:focus{
	outline:1px solid var(--orange);
	border-color:var(--orange);
    box-shadow:0 0 0 4px var(--orange-xx-light);
	background: var(--white);
}
.form-check-input:checked{
    background-color:var(--orange);
    border-color:var(--orange);
}

@media (max-width:768px){
	.form-control, .form-select{
		padding:7px 11px;
	}
}
/* Notify error & success */
.notify{
	display:none;
	font-size:0.875rem;
}
.nt-error{
	color: var(--red);
	background:var(--red-x-light);
	border:2px solid var(--red-light);
	padding:10px;
	border-radius:var(--border-radius);
	margin:15px 0px;
}
.nt-success{
	color: var(--green);
	background:var(--green-x-light);
	border:2px solid var(--green-light);
	padding:10px;
	border-radius:var(--border-radius);
	margin:15px 0px;
}
.page-heading{
	font-size:2rem;
	font-weight:700;
	color: var(--black);
	padding:15px 10px;
}
@media (max-width:768px){
	.page-heading{
		font-size:1.25rem;
		padding:10px 7px;
	}
}

/*Table*/
.table-wrapper{
    width:100%;
    overflow-x:auto;
    background:var(--white);
    border-radius: var(--border-radius);
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
}
/* Table */
.cust-table{
    width:100%;
    min-width:700px;
    border-collapse:collapse;
}
/* Header */
.cust-table thead{
    background:var(--orange-xx-light);
    color:var(--black);
}
.cust-table th{
    padding:10px;
    text-align:left;
    font-size:0.875rem;
    font-weight:600;
	border-bottom:1px solid var(--orange-x-light);
}
/* Body */
.cust-table td{
    padding:7px 10px;
    border-bottom:1px solid #e5e7eb;
    color:var(--black);
    font-size:0.8rem;
}
/* Row Hover */
.cust-table tbody tr{
    transition:0.3s ease;
}
.cust-table tbody tr:hover{
    background:rgba(0,0,0,0.07);
}
/* Mobile Optimization */
@media(max-width:768px){
    .cust-table th,
    .cust-table td{
        padding:10px;
        font-size:0.75rem;
    }
}