/* CSS Document */

/* ===================================
   User Avatar - Initials Based
   =================================== */
.user-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid #e4e6ef;
    background-color: var(--bs-primary, #3f4254);
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
}

.user-avatar-initials:hover {
    background-color: var(--bs-primary-active, #2c2e3e);
    transform: scale(1.05);
}

/* Mobile responsive - smaller avatar */
@media (max-width: 991px) {
    .user-avatar-initials {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}

/* Fallback when no initials available */
.user-avatar-initials.no-initials::before {
    content: "?";
    font-size: 18px;
}

@media (max-width: 991px) {
    .user-avatar-initials.no-initials::before {
        font-size: 14px;
    }
}

/* ===================================
   User Role Badge (flexible width)
   =================================== */
.user-role-badge {
    display: inline-block;
    text-align: left;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: auto !important;
}

/*Colors*/
.cl-red {
	color: red !important;
}

.cl-green {
	color: green !important;
}

.cl-blue {
	color: blue !important;
}

.cl-lightblue {
	color: #22b9ff !important;
}

.cl-white {
	color: white !important;
}

.cl-black {
	color: black !important;
}

.cl-orange {
	color: orange !important;
}

.pdf-embed {
	background: #EEF0F8 !important;
}

/*Text Align*/
.txt-align-right {
	text-align: right;
}

.txt-align-justify {
	text-align: justify;
}

.txt-align-left {
	text-align: left;
}

.txt-align-center {
	text-align: center;
}

.v-align-center {
	vertical-align: center;
}

.flex-center {
	display: flex;
	align-items: center;
	/* Vertically centers content */
	justify-content: center;
	/* Optional: horizontally centers content */
	/*height: 50px;*/
	/* Set a height */
}

.flex-center-100 {
	display: flex;
	align-items: center;
	/* Vertically centers content */
	justify-content: center;
	/* Optional: horizontally centers content */
	height: 100px;
	/* Set a height */
}

.v-align-top {
	vertical-align: top;
}

.v-align-text-top {
	vertical-align: text-top;
}

.card-body .form-group,
.panel-body .form-group,
.modal-body .form-group,
.menu-sub .form-group,
.verge_login .form-group {
	margin-top: 5px;
	margin-bottom: 5px;
}

/*Inner Buttons*/
.inner-button-text>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 60px;
}

.inner-button-text>input[type=button] {
	margin-left: -75px;
	border: 0;

}

.inner-button-text-45>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 45px;
}

.inner-button-text-45>input[type=button] {
	margin-left: -45px;
	border: 0;

}

.inner-button-text-50>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 50px;
}

.inner-button-text-50>input[type=button] {
	margin-left: -50px;
	border: 0;

}

.inner-button-text-80>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 80px;
}

.inner-button-text-80>input[type=button] {
	margin-left: -80px;
	border: 0;

}

.inner-button-text-90>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 90px;
}

.inner-button-text-90>input[type=button] {
	margin-left: -90px;
	border: 0;

}

.inner-button-text-110>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 110px;
}

.inner-button-text-110>input[type=button] {
	margin-left: -110px;
	border: 0;

}

.inner-button-text-120>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 120px;
}

.inner-button-text-120>input[type=button] {
	margin-left: -120px;
	border: 0;

}

.inner-button-group>input[type=text] {
	width: 75%;
	display: inline;
	padding-right: 100px;
}

.inner-button-group .button-only-in-group {
	margin-left: -50px;
	border: 0;

}

.inner-button-group .button-group-1 {
	margin-left: -90px;
	border: 0;

}

.inner-button-group .button-group-2 {
	margin-left: 10px;
	border: 0;

}

.inner-button-group-90>input[type=text] {
	width: 90%;
	display: inline;
	padding-right: 100px;
}

.inner-button-group-90 .button-only-in-group {
	margin-left: -60px;
	border: 0;

}

.inner-button-group-90 .button-group-1 {
	margin-left: -110px;
	border: 0;

}

.inner-button-group-90 .button-group-2 {
	margin-left: 8px;
	border: 0;

}

.inner-button-text>button {
	margin-left: -30px;
	border: 0;

}

.form-group.inner-button-text>button,
.form-group.inner-button-text-45>button,
.form-group.inner-button-text-50>button,
.form-group.inner-button-text-55>button,
.form-group.inner-button-text-60>button,
.form-group.inner-button-text-80>button,
.form-group.inner-button-text-90>button,
.form-group.inner-button-text-110>button {
	margin-top: 0px !important;
}

.form-group.inner-button-text>input[type=button],
.form-group.inner-button-text-45>input[type=button],
.form-group.inner-button-text-50>input[type=button],
.form-group.inner-button-text-55>input[type=button],
.form-group.inner-button-text-60>input[type=button],
.form-group.inner-button-text-80>input[type=button],
.form-group.inner-button-text-90>input[type=button],
.form-group.inner-button-text-110>input[type=button] {
	margin-top: 0px !important;
}

.form-group.inner-button-group>button,
.form-group.inner-button-text-90>button {
	margin-top: 5px !important;
}

.form-group.inner-button-group>input[type=button],
.form-group.inner-button-group-90>input[type=button] {
	margin-top: 5px !important;
}

.inner-text-input>input[type=text] {
	width: 97%;
	display: inline;
}

.inner-text-input>span {
	border: 0;

	color: gray;
	text-align: right;
}

.label-input-inline .control-label {
	display: inline !important;
}

.label-input-inline>input[type=text] {
	display: inline !important;
	width: 60%;
}

.form-group>input.btn[type=button],
.form-group>button.btn {
	margin-top: 15px;
}

.form-group>input.btn[type=submit],
.form-group>button.btn {
	margin-top: 15px;
}

.form-group>input.btn-sm[type=button],
.form-group>button.btn-sm {
	margin-top: 25px;
}

.form-group>input.btn-sm[type=submit],
.form-group>button.btn-sm {
	margin-top: 25px;
}

.form-group>input.btn-xs[type=button],
.form-group>button.btn-xs {
	margin-top: 30px;
}

.form-group>input.btn-xs[type=submit],
.form-group>button.btn-xs {
	margin-top: 30px;
}

/*display*/
.dp-inline {
	display: inline !important;
}

.dp-block {
	display: block !important;
}

.dp-none {
	display: none !important;
}

.dp-inline-table {
	display: inline-table !important;
}

/* Visibility*/
.v-hide {
	visibility: hidden;
}

/*margin*/

.m-all-0 {
	margin: 0px !important;
}

.m-all-1 {
	margin: 1px !important;
}

.m-all-5 {
	margin: 5px !important;
}

.m-all-10 {
	margin: 10px !important;
}

.m-all-15 {
	margin: 15px !important;
}

.m-all-20 {
	margin: 20px !important;
}

.m-all-25 {
	margin: 25px !important;
}

.m-all-30 {
	margin: 30px !important;
}

.m-all-35 {
	margin: 35px !important;
}

.m-all-40 {
	margin: 40px !important;
}

.m-all-45 {
	margin: 45px !important;
}

.m-all-50 {
	margin: 50px !important;
}

.m-top-0 {
	margin-top: 0px !important;
}

.m-top-5 {
	margin-top: 5px !important;
}

.m-top-8 {
	margin-top: 8px !important;
}


.m-top-10 {
	margin-top: 10px !important;
}

.m-top-15 {
	margin-top: 15px !important;
}

.m-top-20 {
	margin-top: 20px !important;
}

.m-top-25 {
	margin-top: 25px !important;
}

.m-top-26 {
	margin-top: 26px !important;
}


.m-top-30 {
	margin-top: 30px !important;
}

.m-top-35 {
	margin-top: 35px !important;
}

.m-top-40 {
	margin-top: 40px !important;
}

.m-top-45 {
	margin-top: 45px !important;
}

.m-top-50 {
	margin-top: 50px !important;
}

.m-left-0 {
	margin-left: 0px !important;
}

.m-left-5 {
	margin-left: 5px !important;
}

.m-left-10 {
	margin-left: 10px !important;
}

.m-left-15 {
	margin-left: 15px !important;
}

.m-left-20 {
	margin-left: 20px !important;
}

.m-left-25 {
	margin-left: 25px !important;
}

.m-left-30 {
	margin-left: 30px !important;
}

.m-left-35 {
	margin-left: 35px !important;
}

.m-left-40 {
	margin-left: 40px !important;
}

.m-left-45 {
	margin-left: 45px !important;
}

.m-left-50 {
	margin-left: 50px !important;
}

.m-left-60 {
	margin-left: 60px !important;
}

.m-left-65 {
	margin-left: 65px !important;
}

.m-left-70 {
	margin-left: 70px !important;
}

.m-left-80 {
	margin-left: 80px !important;
}

.m-left-90 {
	margin-left: 90px !important;
}

.m-left-100 {
	margin-left: 100px !important;
}

.m-right-0 {
	margin-right: 0px !important;
}

.m-right-5 {
	margin-right: 5px !important;
}

.m-right-10 {
	margin-right: 10px !important;
}

.m-right-15 {
	margin-right: 15px !important;
}

.m-right-20 {
	margin-right: 20px !important;
}

.m-right-25 {
	margin-right: 25px !important;
}

.m-right-30 {
	margin-right: 30px !important;
}

.m-right-35 {
	margin-right: 35px !important;
}

.m-right-40 {
	margin-right: 40px !important;
}

.m-right-45 {
	margin-right: 45px !important;
}

.m-right-50 {
	margin-right: 50px !important;
}

.m-right-60 {
	margin-right: 60px !important;
}

.m-right-70 {
	margin-right: 70px !important;
}

.m-right-80 {
	margin-right: 80px !important;
}

.m-right-90 {
	margin-right: 90px !important;
}

.m-right-100 {
	margin-right: 100px !important;
}

.m-bottom-0 {
	margin-bottom: 0px !important;
}

.m-bottom-5 {
	margin-bottom: 5px !important;
}

.m-bottom-10 {
	margin-bottom: 10px !important;
}

.m-bottom-15 {
	margin-bottom: 15px !important;
}

.m-bottom-20 {
	margin-bottom: 20px !important;
}

.m-bottom-25 {
	margin-bottom: 25px !important;
}

.m-bottom-30 {
	margin-bottom: 30px !important;
}

.m-bottom-35 {
	margin-bottom: 35px !important;
}

.m-bottom-40 {
	margin-bottom: 40px !important;
}

.m-bottom-45 {
	margin-bottom: 45px !important;
}

.m-bottom-50 {
	margin-bottom: 50px !important;
}

/*padding*/

.p-all-0 {
	padding: 0px !important;
}

.p-all-5 {
	padding: 5px !important;
}

.p-all-10 {
	padding: 10px !important;
}

.p-all-15 {
	padding: 15px !important;
}

.p-all-20 {
	padding: 20px !important;
}

.p-all-25 {
	padding: 25px !important;
}

.p-all-30 {
	padding: 30px !important;
}

.p-all-35 {
	padding: 35px !important;
}

.p-all-40 {
	padding: 40px !important;
}

.p-all-45 {
	padding: 45px !important;
}

.p-all-50 {
	padding: 50px !important;
}

.p-top-0 {
	padding-top: 0px !important;
}

.p-top-5 {
	padding-top: 5px !important;

}

.p-top-10 {
	padding-top: 10px !important;
}

.p-top-15 {
	padding-top: 15px !important;
}

.p-top-20 {
	padding-top: 20px !important;
}

.p-top-25 {
	padding-top: 25px !important;
}

.p-top-30 {
	padding-top: 30px !important;
}

.p-top-35 {
	padding-top: 35px !important;
}

.p-top-40 {
	padding-top: 40px !important;
}

.p-top-45 {
	padding-top: 45px !important;
}

.p-top-50 {
	padding-top: 50px !important;
}

.p-left-0 {
	padding-left: 0px !important;
}

.p-left-5 {
	padding-left: 5px !important;
}

.p-left-10 {
	padding-left: 10px !important;
}

.p-left-15 {
	padding-left: 15px !important;
}

.p-left-20 {
	padding-left: 20px !important;
}

.p-left-25 {
	padding-left: 25px !important;
}

.p-left-30 {
	padding-left: 30px !important;
}

.p-left-35 {
	padding-left: 35px !important;
}

.p-left-40 {
	padding-left: 40px !important;
}

.p-left-45 {
	padding-left: 45px !important;
}

.p-left-50 {
	padding-left: 50px !important;
}

.p-right-0 {
	padding-right: 0px !important;
}

.p-right-5 {
	padding-right: 5px !important;
}

.p-right-10 {
	padding-right: 10px !important;
}

.p-right-15 {
	padding-right: 15px !important;
}

.p-right-20 {
	padding-right: 20px !important;
}

.p-right-25 {
	padding-right: 25px !important;
}

.p-right-35 {
	padding-right: 35px !important;
}

.p-right-40 {
	padding-right: 40px !important;
}

.p-right-45 {
	padding-right: 45px !important;
}

.p-right-50 {
	padding-right: 50px !important;
}

.p-bottom-0 {
	padding-bottom: 0px !important;
}

.p-bottom-5 {
	padding-bottom: 5px !important;
}

.p-bottom-10 {
	padding-bottom: 10px !important;
}

.p-bottom-15 {
	padding-bottom: 15px !important;
}

.p-bottom-20 {
	padding-bottom: 20px !important;
}

.p-bottom-25 {
	padding-bottom: 25px !important;
}

.p-bottom-35 {
	padding-bottom: 35px !important;
}

.p-bottom-40 {
	padding-bottom: 40px !important;
}

.p-bottom-45 {
	padding-bottom: 45px !important;
}

.p-bottom-50 {
	padding-bottom: 50px !important;
}

/*width percent*/
.wz-5,
.wz-5 .select2-container {
	width: 5% !important;
}

.wz-10,
.wz-10 .select2-container {
	width: 10% !important;
}

.wz-15,
.wz-15 .select2-container {
	width: 15% !important;
}

.wz-20,
.wz-20 .select2-container {
	width: 20% !important;
}

.wz-25,
.wz-25 .select2-container {
	width: 25% !important;
}

.wz-30,
.wz-30 .select2-container {
	width: 30% !important;
}

.wz-35,
.wz-35 .select2-container {
	width: 35% !important;
}

.wz-40,
.wz-40 .select2-container {
	width: 40% !important;
}

.wz-45,
.wz-45 .select2-container {
	width: 45% !important;
}

.wz-50,
.wz-50 .select2-container {
	width: 50% !important;
}

.wz-55,
.wz-55 .select2-container {
	width: 55% !important;
}

.wz-60,
.wz-60 .select2-container {
	width: 60% !important;
}

.wz-65,
.wz-65 .select2-container {
	width: 65% !important;
}

.wz-70,
.wz-70 .select2-container {
	width: 70% !important;
}

.wz-75,
.wz-75 .select2-container {
	width: 75% !important;
}

.wz-80,
.wz-80 .select2-container {
	width: 80% !important;
}

.wz-85,
.wz-85 .select2-container {
	width: 85% !important;
}

.wz-90,
.wz-90 .select2-container {
	width: 90% !important;
}

.wz-95,
.wz-95 .select2-container {
	width: 95% !important;
}

.wz-100,
.wz-100 .select2-container {
	width: 100% !important;
}

/*width pixel*/
.wz-5-px,
.wz-5-px .select2-container {
	width: 5px !important;
}

.wz-10-px,
.wz-10-px .select2-container {
	width: 10px !important;
}

.wz-15-px,
.wz-15-px .select2-container {
	width: 15px !important;
}

.wz-20-px,
.wz-20-px .select2-container {
	width: 20px !important;
}

.wz-25-px,
.wz-25-px .select2-container {
	width: 25px !important;
}

.wz-30-px,
.wz-30-px .select2-container {
	width: 30px !important;
}

.wz-35-px,
.wz-35-px .select2-container {
	width: 35px !important;
}

.wz-40-px,
.wz-40-px .select2-container {
	width: 40px !important;
}

.wz-45-px,
.wz-45-px .select2-container {
	width: 45px !important;
}

.wz-50-px,
.wz-50-px .select2-container {
	width: 50px !important;
}

.wz-55-px,
.wz-55-px .select2-container {
	width: 55px !important;
}

.wz-60-px,
.wz-60-px .select2-container {
	width: 60px !important;
}

.wz-65-px,
.wz-65-px .select2-container {
	width: 65px !important;
}

.wz-70-px,
.wz-70-px .select2-container {
	width: 70px !important;
}

.wz-75-px,
.wz-75-px .select2-container {
	width: 75px !important;
}

.wz-80-px,
.wz-80-px .select2-container {
	width: 80px !important;
}

.wz-85-px,
.wz-85-px .select2-container {
	width: 85px !important;
}

.wz-90-px,
.wz-90-px .select2-container {
	width: 90px !important;
}

.wz-95-px,
.wz-95-px .select2-container {
	width: 95px !important;
}

.wz-100-px,
.wz-100-px .select2-container {
	width: 100px !important;
}

.wz-125-px,
.wz-125-px .select2-container {
	width: 125px !important;
}

.wz-150-px,
.wz-150-px .select2-container {
	width: 150px !important;
}

.wz-175-px,
.wz-175-px .select2-container {
	width: 175px !important;
}

/*height percent*/
.hz-5 {
	height: 5% !important;
}

.hz-10 {
	height: 10% !important;
}

.hz-15 {
	height: 15% !important;
}

.hz-20 {
	height: 20% !important;
}

.hz-25 {
	height: 25% !important;
}

.hz-30 {
	height: 30% !important;
}

.hz-35 {
	height: 35% !important;
}

.hz-40 {
	height: 40% !important;
}

.hz-45 {
	height: 45% !important;
}

.hz-50 {
	height: 50% !important;
}

.hz-55 {
	height: 55% !important;
}

.hz-60 {
	height: 60% !important;
}

.hz-65 {
	height: 65% !important;
}

.hz-70 {
	height: 70% !important;
}

.hz-75 {
	height: 75% !important;
}

.hz-80 {
	height: 80% !important;
}

.hz-85 {
	height: 85% !important;
}

.hz-90 {
	height: 90% !important;
}

.hz-95 {
	height: 95% !important;
}

.hz-100 {
	height: 100% !important;
}

/*height pixel*/
.hz-5-px {
	height: 5px !important;
}

.hz-10-px {
	height: 10px !important;
}

.hz-15-px {
	height: 15px !important;
}

.hz-20-px {
	height: 20px !important;
}

.hz-25-px {
	height: 25px !important;
}

.hz-30-px {
	height: 30px !important;
}

.hz-35-px {
	height: 35px !important;
}

.hz-40-px {
	height: 40px !important;
}

.hz-45-px {
	height: 45px !important;
}

.hz-50-px {
	height: 50px !important;
}

.hz-55-px {
	height: 55px !important;
}

.hz-60-px {
	height: 60px !important;
}

.hz-65-px {
	height: 65px !important;
}

.hz-70-px {
	height: 70px !important;
}

.hz-75-px {
	height: 75px !important;
}

.hz-80-px {
	height: 80px !important;
}

.hz-85-px {
	height: 85px !important;
}

.hz-90-px {
	height: 90px !important;
}

.hz-95-px {
	height: 95px !important;
}

.hz-100-px {
	height: 100px !important;
}

.hz-145-px {
	height: 145px !important;
}

.hz-150-px {
	height: 150px !important;
}

.hz-160-px {
	height: 160px !important;
}

.hz-175-px {
	height: 175px !important;
}

.hz-200-px {
	height: 200px !important;
}

.hz-225-px {
	height: 225px !important;
}

.hz-250-px {
	height: 250px !important;
}

.hz-300-px {
	height: 300px !important;
}

.hz-325-px {
	height: 325px !important;
}

.hz-350-px {
	height: 350px !important;
}

.hz-375-px {
	height: 375px !important;
}

.hz-400-px {
	height: 400px !important;
}

.hz-450-px {
	height: 450px !important;
}

.hz-500-px {
	height: 500px !important;
}

.hz-550-px {
	height: 550px !important;
}

/*view port*/

.vw-1 {
	width: 1vw !important;
}

.vw-2 {
	width: 2vw !important;
}

.vw-3 {
	width: 3vw !important;
}

.vw-4 {
	width: 4vw !important;
}

.vw-5 {
	width: 5vw !important;
}

.vw-6 {
	width: 6vw !important;
}

.vw-7 {
	width: 7vw !important;
}

.vw-8 {
	width: 8vw !important;
}

.vw-9 {
	width: 9vw !important;
}

.vw-10 {
	width: 10vw !important;
}

.vw-11 {
	width: 11vw !important;
}

.vw-12 {
	width: 12vw !important;
}

.vw-13 {
	width: 13vw !important;
}

.vw-14 {
	width: 14vw !important;
}

.vw-15 {
	width: 15vw !important;
}

.vw-16 {
	width: 16vw !important;
}

.vw-17 {
	width: 17vw !important;
}

.vw-18 {
	width: 18vw !important;
}

.vw-19 {
	width: 19vw !important;
}

.vw-20 {
	width: 20vw !important;
}

/*Float*/
.fl-right {
	float: right;
}

.fl-left {
	float: left;
}

/*Colors*/
.cl-red {
	color: red;
}

.cl-green {
	color: green;
}

.cl-blue {
	color: blue;
}

.cl-white {
	color: white;
}

.cl-black {
	color: black;
}

.cl-orange {
	color: orange;
}


/*Font*/
/*Font Weight*/
.ft-weight-100 {
	font-weight: 100;
}

.ft-weight-bold {
	font-weight: bold;
}

.ft-weight-normal {
	font-weight: normal;
}

/*Font Size*/
.ft-size-8 {
	font-size: 8px;
}

.ft-size-9 {
	font-size: 9px;
}

.ft-size-10 {
	font-size: 10px;
}

.ft-size-11 {
	font-size: 11px;
}

.ft-size-12 {
	font-size: 12px;
}

.ft-size-13 {
	font-size: 13px;
}

.ft-size-14 {
	font-size: 14px;
}

.ft-size-15 {
	font-size: 15px;
}

.ft-size-16 {
	font-size: 16px;
}

.ft-size-17 {
	font-size: 17px;
}

.ft-size-18 {
	font-size: 18px;
}

.ft-size-19 {
	font-size: 19px;
}

.ft-size-20 {
	font-size: 20px;
}

/* Text Decoration*/
.txt-decoration-none {
	text-decoration: none;
}

.txt-decoration-underline {
	text-decoration: underline;
}

.txt-decoration-line {
	text-decoration: line-through;
}

.txt-decoration-cl-red {
	text-decoration-color: red;
}

.resize-none {
	resize: none;
}

.txt-dark-success {
	color: #2b794f !important;
}

/*Background Color*/
.bg-color-success {
	background-color: #50CD89 !important;
	color: black !important;
}

.bg-color-primary {
	background-color: #478DBE !important;
	color: white !important;
}

.bg-color-info {
	background-color: #7BC5D3 !important;
	color: black !important;
}

.bg-color-danger {
	background-color: #D15E5E !important;
	color: white !important;
}

.bg-color-green {
	background-color: green !important;
	color: black !important;
}

.bg-color-blue {
	background-color: blue !important;
	color: white !important;
}

.bg-color-black {
	background-color: black !important;
	color: white !important;
}

.bg-color-lightblue {
	background-color: lightblue !important;
	color: black !important;
}

.bg-color-red {
	background-color: red !important;
	color: black !important;
}

.bg-color-white {
	background-color: white !important;
	color: black !important;
}

.bg-color-rose {
	background-color: #de5656 !important;
	color: black !important;
}

.bg-color-lightgray {
	background-color: lightgray !important;
	color: black !important;
}

.bg-blockoverlay {
	background-color: rgb(0, 0, 0);
}

/*Accordion Body*/

.accordion-body-border-1 {
	border: 1px solid;
}

/*Border box*/
.border-cube-dashed {
	border-left: 1px dashed;
	border-bottom: 1px dashed;
	border-right: 1px dashed;
}

.border-cube-solid {
	border-left: 1px solid;
	border-bottom: 1px solid;
	border-right: 1px solid;
}

.border-rect-dashed {
	border: 1px dashed;
}

.border-rect-solid {
	border: 1px solid;
}

/*Inner Buttons*/
.inner-button-text>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 60px;
}

.inner-button-text>input[type=button] {
	margin-left: -75px;
	border: 0;

}

.inner-button-text-45>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 45px;
}

.inner-button-text-45>input[type=button] {
	margin-left: -45px;
	border: 0;

}

.inner-button-text-50>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 50px;
}

.inner-button-text-50>input[type=button] {
	margin-left: -50px;
	border: 0;

}

.inner-button-text-55>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 55px;
}

.inner-button-text-55>input[type=button] {
	margin-left: -55px;
	border: 0;

}

.inner-button-text-80>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 80px;
}

.inner-button-text-80>input[type=button] {
	margin-left: -80px;
	border: 0;

}

.inner-button-text-90>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 90px;
}

.inner-button-text-90>input[type=button] {
	margin-left: -90px;
	border: 0;

}

.inner-button-text-110>input[type=text] {
	width: 97%;
	display: inline;
	padding-right: 110px;
}

.inner-button-text-110>input[type=button] {
	margin-left: -110px;
	border: 0;

}

.inner-button-group>input[type=text] {
	width: 75%;
	display: inline;
	padding-right: 100px;
}

.inner-button-group .button-only-in-group {
	margin-left: -50px;
	border: 0;

}

.inner-button-group .button-group-1 {
	margin-left: -90px;
	border: 0;

}

.inner-button-group .button-group-2 {
	margin-left: 10px;
	border: 0;

}

.inner-button-group-90>input[type=text] {
	width: 90%;
	display: inline;
	padding-right: 100px;
}

.inner-button-group-90 .button-only-in-group {
	margin-left: -60px;
	border: 0;

}

.inner-button-group-90 .button-group-1 {
	margin-left: -110px;
	border: 0;

}

.inner-button-group-90 .button-group-2 {
	margin-left: 8px;
	border: 0;

}

.inner-button-text>button {
	margin-left: -30px;
	border: 0;

}

.form-group.inner-button-group>button,
.form-group.inner-button-text-90>button {
	margin-top: 5px !important;
}

.form-group.inner-button-group>input[type=button],
.form-group.inner-button-group-90>input[type=button] {
	margin-top: 5px !important;
}

.inner-text-input>input[type=text] {
	width: 97%;
	display: inline;
}

.inner-text-input>span {
	border: 0;

	color: gray;
	text-align: right;
}

.label-input-inline .control-label {
	display: inline !important;
}

.label-input-inline>input[type=text] {
	display: inline !important;
	width: 60%;
}

/*Color & Background Color*/
.bg-p0 {
	color: #777 !important;
	background-color: transparent !important;
}

.bg-p10 {
	color: #fff !important;
	background-color: #ed560c !important;
}

.bg-p20 {
	color: #fff !important;
	background-color: #f5830c !important;
}

.bg-p30 {
	color: #fff !important;
	background-color: #f5cf0c !important;
}

.bg-p40 {
	color: #fff !important;
	background-color: #c5cf03 !important;
}

.bg-p50 {
	color: #fff !important;
	background-color: #058b02 !important;
}

.bg-p60 {
	color: #fff !important;
	background-color: #2a9802 !important;
}

.bg-p70 {
	color: #fff !important;
	background-color: #00958e !important;
}

.bg-p80 {
	color: #fff !important;
	background-color: #0099ff !important;
}

.bg-p90 {
	color: #fff !important;
	background-color: #0085f2 !important;
}

.bg-p100 {
	color: #fff !important;
	background-color: #003366 !important;
}

.icon-selected {
	background-color: chartreuse !important;
}

.input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.example-copy:after {
	font-family: Ki;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	text-decoration: inherit;
	text-rendering: optimizeLegibility;
	text-transform: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	content: "\f07c";
}

.btn.btn-copy {
	color: #000000;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
	background-color: #949cc1;
	border-color: #949cc1;
}

.btn.btn-copy:hover:not(.btn-active) {
	background-color: #7c92f3;
	border-color: #7c92f3;
}

.modal .vertical-center-align {
	top: 25%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

:root {
	--bs-xs: 0;
	--bs-sm: 576px;
	--bs-md: 768px;
	--bs-lg: 992px;
	--bs-xl: 1200px;
	--bs-xxl: 1400px;
	--bs-scrollbar-size: 5px;
	--bs-scrollbar-overlay-size: 19px;
	--bs-scrollbar-overlay-space: 7px;
}

[data-bs-theme=light] {
	--bs-text-muted: #A1A5B7;
	--bs-gray-100: #F9F9F9;
	--bs-gray-100-rgb: 249, 249, 249;
	--bs-gray-200: #F4F4F4;
	--bs-gray-200-rgb: 244, 244, 244;
	--bs-gray-300: #E1E3EA;
	--bs-gray-300-rgb: 225, 227, 234;
	--bs-gray-400: #B5B5C3;
	--bs-gray-400-rgb: 181, 181, 195;
	--bs-gray-500: #A1A5B7;
	--bs-gray-500-rgb: 161, 165, 183;
	--bs-gray-600: #7E8299;
	--bs-gray-600-rgb: 126, 130, 153;
	--bs-gray-700: #5E6278;
	--bs-gray-700-rgb: 94, 98, 120;
	--bs-gray-800: #3F4254;
	--bs-gray-800-rgb: 63, 66, 84;
	--bs-gray-900: #181C32;
	--bs-gray-900-rgb: 24, 28, 50;
	--bs-white: #ffffff;
	--bs-light: #F9F9F9;
	--bs-primary: #009ef7;
	--bs-secondary: #E1E3EA;
	--bs-success: #50cd89;
	--bs-info: #7239ea;
	--bs-warning: #ffc700;
	--bs-danger: #f1416c;
	--bs-dark: #181C32;
	--bs-primary-active: #0095e8;
	--bs-secondary-active: #B5B5C3;
	--bs-light-active: #F4F4F4;
	--bs-success-active: #47be7d;
	--bs-info-active: #5014d0;
	--bs-warning-active: #f1bc00;
	--bs-danger-active: #d9214e;
	--bs-dark-active: #131628;
	--bs-primary-light: #f1faff;
	--bs-secondary-light: #F9F9F9;
	--bs-success-light: #e8fff3;
	--bs-info-light: #f8f5ff;
	--bs-warning-light: #fff8dd;
	--bs-danger-light: #fff5f8;
	--bs-dark-light: #F4F4F4;
	--bs-primary-inverse: #ffffff;
	--bs-secondary-inverse: #3F4254;
	--bs-light-inverse: #7E8299;
	--bs-success-inverse: #ffffff;
	--bs-info-inverse: #ffffff;
	--bs-warning-inverse: #ffffff;
	--bs-danger-inverse: #ffffff;
	--bs-dark-inverse: #ffffff;
	--bs-white-rgb: 255, 255, 255;
	--bs-light-rgb: 249, 249, 249;
	--bs-primary-rgb: 0, 158, 247;
	--bs-secondary-rgb: 225, 227, 234;
	--bs-success-rgb: 80, 205, 137;
	--bs-info-rgb: 114, 57, 234;
	--bs-warning-rgb: 255, 199, 0;
	--bs-danger-rgb: 241, 65, 108;
	--bs-dark-rgb: 24, 28, 50;
	--bs-text-white: #ffffff;
	--bs-text-primary: #009ef7;
	--bs-text-secondary: #E1E3EA;
	--bs-text-light: #F9F9F9;
	--bs-text-success: #50cd89;
	--bs-text-info: #7239ea;
	--bs-text-warning: #ffc700;
	--bs-text-danger: #f1416c;
	--bs-text-dark: #181C32;
	--bs-text-muted: #A1A5B7;
	--bs-text-gray-100: #F9F9F9;
	--bs-text-gray-200: #F4F4F4;
	--bs-text-gray-300: #E1E3EA;
	--bs-text-gray-400: #B5B5C3;
	--bs-text-gray-500: #A1A5B7;
	--bs-text-gray-600: #7E8299;
	--bs-text-gray-700: #5E6278;
	--bs-text-gray-800: #3F4254;
	--bs-text-gray-900: #181C32;
	--bs-border-color: #F4F4F4;
	--bs-border-dashed-color: #E1E3EA;
	--bs-component-active-color: #ffffff;
	--bs-component-active-bg: #009ef7;
	--bs-component-hover-color: #009ef7;
	--bs-component-hover-bg: #F4F6FA;
	--bs-component-checked-color: #ffffff;
	--bs-component-checked-bg: #009ef7;
	--bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
	--bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
	--bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
	--bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
	--bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
	--bs-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
	--bs-table-striped-bg: rgba(var(--bs-gray-100-rgb), 0.75);
	--bs-dropdown-bg: var(--bs-body-bg);
	--bs-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
	--bs-code-bg: #F1F3F8;
	--bs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
	--bs-code-color: #b93993;
	--bs-symbol-label-color: var(--bs-gray-800);
	--bs-symbol-label-bg: var(--bs-gray-100);
	--bs-symbol-border-color: rgba(var(--bs-body-bg), 0.5);
	--bs-bullet-bg-color: var(--bs-gray-400);
	--bs-scrolltop-opacity: 0;
	--bs-scrolltop-opacity-on: 0.3;
	--bs-scrolltop-opacity-hover: 1;
	--bs-scrolltop-box-shadow: var(--bs-box-shadow);
	--bs-scrolltop-bg-color: var(--bs-primary);
	--bs-scrolltop-bg-color-hover: var(--bs-primary);
	--bs-scrolltop-icon-color: var(--bs-primary-inverse);
	--bs-scrolltop-icon-color-hover: var(--bs-primary-inverse);
	--bs-drawer-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
	--bs-drawer-bg-color: #ffffff;
	--bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.2);
	--bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
	--bs-menu-dropdown-bg-color: var(--bs-body-bg);
	--bs-menu-heading-color: #A1A5B7;
	--bs-menu-link-color-hover: #009ef7;
	--bs-menu-link-color-show: #009ef7;
	--bs-menu-link-color-here: #009ef7;
	--bs-menu-link-color-active: #009ef7;
	--bs-menu-link-bg-color-hover: #F4F6FA;
	--bs-menu-link-bg-color-show: #F4F6FA;
	--bs-menu-link-bg-color-here: #F4F6FA;
	--bs-menu-link-bg-color-active: #F4F6FA;
	--bs-scrollbar-color: #F4F4F4;
	--bs-scrollbar-hover-color: #efefef;
	--bs-scrollbar-size: 5px;
	--bs-scrollbar-overlay-size: 19px;
	--bs-scrollbar-overlay-space: 7px;
	--bs-overlay-bg: rgba(0, 0, 0, 0.05);
	--bs-blockui-overlay-bg: rgba(0, 0, 0, 0.05);
	--bs-rating-color-default: #B5B5C3;
	--bs-rating-color-active: #FFAD0F;
	--bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(24, 28, 50, 0.1);
	--bs-ribbon-label-bg: #009ef7;
	--bs-ribbon-label-border-color: #005d91;
	--bs-ribbon-clip-bg: #181C32;
	--bs-engage-btn-bg: #ffffff;
	--bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
	--bs-engage-btn-border-color: #E8E8E8;
	--bs-engage-btn-color: #3F4254;
	--bs-engage-btn-icon-color: #7E8299;
	--bs-engage-btn-color-active: #3F4254;
	--bs-aside-bg-color: #090a0d;
}

[data-bs-theme=dark] {
	--bs-text-muted: #565674;
	--bs-gray-100: #1b1b29;
	--bs-gray-100-rgb: 27, 27, 41;
	--bs-gray-200: #2B2B40;
	--bs-gray-200-rgb: 43, 43, 64;
	--bs-gray-300: #323248;
	--bs-gray-300-rgb: 50, 50, 72;
	--bs-gray-400: #474761;
	--bs-gray-400-rgb: 71, 71, 97;
	--bs-gray-500: #565674;
	--bs-gray-500-rgb: 86, 86, 116;
	--bs-gray-600: #6D6D80;
	--bs-gray-600-rgb: 109, 109, 128;
	--bs-gray-700: #92929F;
	--bs-gray-700-rgb: 146, 146, 159;
	--bs-gray-800: #CDCDDE;
	--bs-gray-800-rgb: 205, 205, 222;
	--bs-gray-900: #FFFFFF;
	--bs-gray-900-rgb: 255, 255, 255;
	--bs-white: #ffffff;
	--bs-light: #2B2B40;
	--bs-primary: #009ef7;
	--bs-success: #50cd89;
	--bs-info: #7239ea;
	--bs-warning: #ffc700;
	--bs-danger: #f1416c;
	--bs-dark: #FFFFFF;
	--bs-secondary: #323248;
	--bs-primary-active: #0095e8;
	--bs-secondary-active: #474761;
	--bs-light-active: #323248;
	--bs-success-active: #47be7d;
	--bs-info-active: #5014d0;
	--bs-warning-active: #f1bc00;
	--bs-danger-active: #d9214e;
	--bs-dark-active: white;
	--bs-primary-light: #212e48;
	--bs-success-light: #1c3238;
	--bs-info-light: #2f264f;
	--bs-warning-light: #392f28;
	--bs-danger-light: #3a2434;
	--bs-dark-light: #2B2B40;
	--bs-secondary-light: #1b1b29;
	--bs-primary-inverse: #ffffff;
	--bs-secondary-inverse: #92929F;
	--bs-light-inverse: #7E8299;
	--bs-success-inverse: #ffffff;
	--bs-info-inverse: #ffffff;
	--bs-warning-inverse: #ffffff;
	--bs-danger-inverse: #ffffff;
	--bs-dark-inverse: #1b1b29;
	--bs-white-rgb: 255, 255, 255;
	--bs-light-rgb: 43, 43, 64;
	--bs-primary-rgb: 0, 158, 247;
	--bs-success-rgb: 80, 205, 137;
	--bs-info-rgb: 114, 57, 234;
	--bs-warning-rgb: 255, 199, 0;
	--bs-danger-rgb: 241, 65, 108;
	--bs-dark-rgb: 255, 255, 255;
	--bs-secondary-rgb: 50, 50, 72;
	--bs-text-white: #ffffff;
	--bs-text-primary: #009ef7;
	--bs-text-secondary: #323248;
	--bs-text-light: #2B2B40;
	--bs-text-success: #50cd89;
	--bs-text-info: #7239ea;
	--bs-text-warning: #ffc700;
	--bs-text-danger: #f1416c;
	--bs-text-dark: #FFFFFF;
	--bs-text-muted: #565674;
	--bs-text-gray-100: #1b1b29;
	--bs-text-gray-200: #2B2B40;
	--bs-text-gray-300: #323248;
	--bs-text-gray-400: #474761;
	--bs-text-gray-500: #565674;
	--bs-text-gray-600: #6D6D80;
	--bs-text-gray-700: #92929F;
	--bs-text-gray-800: #CDCDDE;
	--bs-text-gray-900: #FFFFFF;
	--bs-border-color: #2B2B40;
	--bs-border-dashed-color: #323248;
	--bs-component-active-color: #ffffff;
	--bs-component-active-bg: #009ef7;
	--bs-component-hover-color: #009ef7;
	--bs-component-hover-bg: #2B2B40;
	--bs-component-checked-color: #ffffff;
	--bs-component-checked-bg: #009ef7;
	--bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
	--bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
	--bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
	--bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
	--bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
	--bs-card-box-shadow: ;
	--bs-table-striped-bg: rgba(27, 27, 41, 0.75);
	--bs-dropdown-bg: #1e1e2d;
	--bs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	--bs-code-bg: #2B2B40;
	--bs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
	--bs-code-color: #b93993;
	--bs-symbol-label-color: #CDCDDE;
	--bs-symbol-label-bg: #1b1b29;
	--bs-symbol-border-color: rgba(255, 255, 255, 0.5);
	--bs-bullet-bg-color: #474761;
	--bs-scrolltop-opacity: 0;
	--bs-scrolltop-opacity-on: 0.3;
	--bs-scrolltop-opacity-hover: 1;
	--bs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
	--bs-scrolltop-bg-color: #009ef7;
	--bs-scrolltop-bg-color-hover: #009ef7;
	--bs-scrolltop-icon-color: #ffffff;
	--bs-scrolltop-icon-color-hover: #ffffff;
	--bs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	--bs-drawer-bg-color: #1e1e2d;
	--bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);
	--bs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	--bs-menu-dropdown-bg-color: #1e1e2d;
	--bs-menu-heading-color: #565674;
	--bs-menu-link-color-hover: #009ef7;
	--bs-menu-link-color-show: #009ef7;
	--bs-menu-link-color-here: #009ef7;
	--bs-menu-link-color-active: #009ef7;
	--bs-menu-link-bg-color-hover: #2B2B40;
	--bs-menu-link-bg-color-show: #2B2B40;
	--bs-menu-link-bg-color-here: #2B2B40;
	--bs-menu-link-bg-color-active: #2B2B40;
	--bs-scrollbar-color: #2B2B40;
	--bs-scrollbar-hover-color: #27273a;
	--bs-overlay-bg: rgba(255, 255, 255, 0.05);
	--bs-blockui-overlay-bg: rgba(255, 255, 255, 0.05);
	--bs-rating-color-default: #474761;
	--bs-rating-color-active: #FFAD0F;
	--bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1);
	--bs-ribbon-label-bg: #009ef7;
	--bs-ribbon-label-border-color: #005d91;
	--bs-ribbon-clip-bg: #F9F9F9;
	--bs-engage-btn-bg: #2B2B40;
	--bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	--bs-engage-btn-border-color: #2B2B40;
	--bs-engage-btn-color: #CDCDDE;
	--bs-engage-btn-icon-color: #6D6D80;
	--bs-engage-btn-color-active: #CDCDDE;
	--bs-aside-bg-color: #090a0d;
}

.blockquote-footer {
	color: var(--bs-blockquote-footer-color);
}

.list-style-none {
	list-style: none;
}

[data-kt-theme-mode-switching=true] * {
	transition: none !important;
}

[data-bs-theme=light] .theme-dark-show {
	display: none !important;
}

[data-bs-theme=light] .theme-light-bg-transparent {
	background-color: transparent !important;
}

[data-bs-theme=light] .theme-light-bg-body {
	background-color: var(--bs-body-bg) !important;
}

[data-bs-theme=dark] .theme-light-show {
	display: none !important;
}

[data-bs-theme=dark] .theme-dark-bg-transparent {
	background-color: transparent !important;
}

[data-bs-theme=dark] .theme-dark-bg-body {
	background-color: var(--bs-body-bg) !important;
}

.kt-pulse__ring {
	margin-top: -10px;
	margin-left: -25px;
}

.canvasjs-chart-credit {
	display: none;
}

body {
	color: rgb(0, 0, 0) !important;
	font-family: Verdana;
	/*"Helvetica Neue", Helvetica, Arial, sans-serif*/
}

.dataTables_filter>label {
	width: 65%;
}

#breadcrumb {
	display: none;
}

#div_thumbnail {
	text-align: center;
}

.no-padding {
	padding: 0 !important;
}

.padding-15 {
	padding: 15px !important;
}

.no-move {
	display: none;
}

.text-danger p {
	font-weight: bold;
	font-size: 16px;
}

/* Upload Art*/
.portal-upload-art {
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: auto;
}

.portal-upload-art .logo {
	padding: 0px;
}

.portal-upload-art .content {
	background-color: #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	margin: 0px auto 10px;
	padding: 10px 30px 0px;
	position: relative;
}

.portal-upload-art .heading-title {
	font-family: monospace;
	font-size: 48px;
}

/* Login */

.verge_login {
	background: linear-gradient(to right, rgb(127, 127, 213), rgb(134, 168, 231), rgb(145, 234, 228));
	/*background-image: url("https://source.unsplash.com/random/?Dolomites,Switzerland");*/
	height: 100%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: auto;
}

.verge_login .logo {
	margin: 60px auto 0;
	padding: 15px;
	text-align: center;
}

.verge_login .content {
	background-color: #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	margin: 40px auto 10px;
	padding: 10px 30px 30px;
	position: relative;
}

.chpass {
	height: 100%;
	overflow: auto;
}

.chpass .logo {
	margin: 60px auto 0;
	padding: 15px;
	text-align: center;
}

.chpass .content {
	background-color: #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	margin: 40px auto 10px;
	padding: 10px 30px 30px;
	position: relative;
}

.training-videos {
	height: 100%;
	overflow: auto;
}

.training-videos .content {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	margin: 20px 140px 0px 140px;
	padding: 10px 30px 30px;
	position: relative;
}

.bpg-tooltip:after {
	content: attr(data-title);
	position: absolute;
	z-index: 1;
	color: #fff;
	background: #000;
	padding: 5px;
	display: none;
}

.bpg-tooltip:hover:after {
	display: block;
}

.card-body .page-header,
legend,
.full-calendar .page-header {
	margin: 0 0 10px;
	border-bottom: 1px dashed #B6B6B6;
}

.progress-bar-pdf .ui-widget-header,
.bg-pdf,
.btn-pdf,
.btn-pdf.disabled,
.btn-pdf[disabled],
fieldset[disabled] .btn-pdf,
.btn-pdf.disabled:hover,
.btn-pdf[disabled]:hover,
fieldset[disabled] .btn-pdf:hover,
.btn-pdf.disabled:focus,
.btn-pdf[disabled]:focus,
fieldset[disabled] .btn-pdf:focus,
.btn-pdf.disabled:active,
.btn-pdf[disabled]:active,
fieldset[disabled] .btn-pdf:active,
.btn-pdf.disabled.active,
.btn-pdf[disabled].active,
fieldset[disabled] .btn-pdf.active,
.table>thead>tr>td.pdf,
.table>tbody>tr>td.pdf,
.table>tfoot>tr>td.pdf,
.table>thead>tr>th.pdf,
.table>tbody>tr>th.pdf,
.table>tfoot>tr>th.pdf,
.table>thead>tr.pdf>td,
.table>tbody>tr.pdf>td,
.table>tfoot>tr.pdf>td,
.table>thead>tr.pdf>th,
.table>tbody>tr.pdf>th,
.table>tfoot>tr.pdf>th {
	background-color: rgb(255, 130, 0);
	color: black;
	border-color: rgb(255, 130, 0);
}

@media (max-width: 576px) {
	.verge_login .content {
		width: 350px;
	}

	.chpass .content {
		width: 350px;
	}

	.img-logo {
		/* content: url("/assets/media/logos/verge_196px.png"); */
		content: url("/assets/media/logos/Convergent-C.png");
	}

	.img-upload-logo {
		/* content: url("/assets/media/logos/verge_196px.png"); */
		content: url("/assets/media/logos/Convergent_Logo_400px.png");
	}
}

@media (min-width: 577px) and (max-width: 768px) {
	.verge_login .content {
		width: 500px;
	}

	.chpass .content {
		width: 500px;
	}

	.img-logo {
		/* content: url("/assets/media/logos/verge_196px.png"); */
		content: url("/assets/media/logos/Convergent-C.png");
	}

	.img-upload-logo {
		/* content: url("/assets/media/logos/verge_196px.png"); */
		content: url("/assets/media/logos/Convergent_Logo_600px.png");
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.verge_login .content {
		width: 500px;
	}

	.chpass .content {
		width: 500px;
	}

	.img-logo {
		/* content: url("/assets/media/logos/verge_300px.png"); */
		content: url("/assets/media/logos/Convergent-C.png");
	}

	.img-upload-logo {
		/* content: url("/assets/media/logos/verge_196px.png"); */
		content: url("/assets/media/logos/Convergent_Logo_600px.png");
	}
}

@media (min-width: 1025px) {
	.verge_login .content {
		width: 500px;
		opacity: 80%;
	}

	.chpass .content {
		width: 500px;
		opacity: 80%;
	}

	.img-logo {
		/* content: url("/assets/media/logos/verge_400px.png"); */
		content: url("/assets/media/logos/Convergent-C.png");
	}

	.img-upload-logo {
		/* content: url("/assets/media/logos/verge_196px.png"); */
		content: url("/assets/media/logos/Convergent_Logo_600px.png");
	}
}

.verge_login,
.chpass .content .form-title {
	font-weight: 300;
	margin-bottom: 25px;
}

.verge_login,
.chpass .content h3 {
	color: #4db3a5;
	text-align: center;
	font-size: 22px;
	font-weight: 400 !important;
}

.verge_login,
.chpass .content .form-actions {
	clear: both;
	border: 0;
	border-bottom: 1px solid #eee;
	padding: 10px 10px;
	margin-left: -30px;
	margin-right: -30px;
}

.verge_login,
.chpass .content .rememberme {
	text-align: center;
}

.verge_login,
.chpass .content .check {
	color: #8290a3;
}

.bpg-checkbox,
.bpg-radio {
	display: inline-block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 15px;
	cursor: pointer;
	font-size: 14px;
	webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.login-options {
	margin-top: 30px;
	margin-bottom: 30px;
	overflow: hidden;
}

.login-options .external-sites {
	text-align: center;
}

.help-block {
	display: block;
	margin-top: 0.25rem;
}

.form-group .help-block {
	font-size: 0.9rem;
}

.txt-danger,
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox {
	color: #D15E5E;
}

.accordion-header {
	margin: 0;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #084685;
	/*#478DBE*/
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}

.accordion-header-alert {
	margin: 1px;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #D90404;
	/*#FF0000*/
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}


.accordion-header-salesorder {
	margin: 1px;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #084685;
	/*#57058D*/
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}


.accordion-header-estimate {
	margin: 1px;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #00AF65;
	/*rgb(0,128,0)*/
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}

.accordion-header-estimate-master {
	margin: 1px;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #00AF65;
	/*rgb(40,147,134)*/
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}

.accordion-header-green {
	margin: 1px;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #00AF65;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
}

.accordion-body {
	/* background-color:#eeeeee; Old Value */
	background-color: #fcfcfc;
	border-left: 1px solid #d2d3d4;
	border-right: 1px solid #d2d3d4;
	border-bottom: 1px solid #d2d3d4;
	border-radius: 0.25rem;
	padding: 10px;
}

/* Borderless accordion overrides — removes legacy header background and button borders */
.accordion-borderless .accordion-header {
	background-color: transparent;
	margin: 0;
	padding: 0;
}
.accordion-borderless .accordion-button {
	border: 0;
	box-shadow: none;
}
.accordion-borderless .accordion-button:focus {
	box-shadow: none;
}
.accordion-borderless .accordion-body {
	border: 0;
	background-color: transparent;
}

:not(.not-apply-select2-container-style)>.select2-container--default {
	width: 97% !important;
	/**/
	display: block;
}

.select-inline-block>.select2-container--default {
	display: inline-block;
	width: 50% !important;
}

.select-inline-block-20>.select2-container--default {
	display: inline-block;
	width: 20% !important;
}

.select-inline-block-25>.select2-container--default {
	display: inline-block;
	width: 25% !important;
}

.input-inline-block>input {
	display: inline-block;
	width: 80% !important;
}

.select2-container .select2-choice {
	height: 30px;
}

.label-right .control-label {
	padding-top: 7px;
	margin-bottom: 0;
	float: right;
}

/*Margin*/
.top-btn-15 {
	margin-top: 15px !important;
}

.top-btn-20 {
	margin-top: 20px !important;
}

.top-btn-25 {
	margin-top: 25px !important;
}

.top-btn-30 {
	margin-top: 30px !important;
}

.form-group>input.btn-sm[type=button],
.form-group>button.btn-sm {
	margin-top: 35px;
}

.form-group>input.btn-sm[type=submit],
.form-group>button.btn-sm {
	margin-top: 35px;
}

.form-group>input.btn[type=button],
.form-group>button.btn {
	margin-top: 25px;
}

.form-group>input.btn[type=submit],
.form-group>button.btn {
	margin-top: 35px;
}

.form-group>input.btn-xs[type=button],
.form-group>button.btn-xs {
	margin-top: 25px;
}

.form-group>input.btn-xs[type=submit],
.form-group>button.btn-xs {
	margin-top: 35px;
}

span.select2-selection__rendered:not([title])>span.select2-selection__clear {
	display: none !important;
}

.balloon_tips {
	font-weight: bold;
	font-size: 18px;
	color: blue;
}

div.dataTables_length>label {
	margin-top: 0px
		/*15px;*/
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
	display: inline;
	margin-left: 10px;
	width: 80%;
}

.form-row .form-group {
	margin-bottom: 0.3rem;
}

.card-name {
	font-weight: bold;
}

.card {
	/* width:100%;*/
	margin-bottom: 15px;
}

.kt-menu-link-red {
	color: red !important;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
	padding: 4px;
	font-size: 11px;
}

.error-card {
	margin: 5px;
	background-image: linear-gradient(to right, #eb3349, #f45c43);
	color: white;
	border-radius: 10px;
}

.success-card {
	margin: 5px;
	background-image: linear-gradient(to right, #02aab0, #00cdac);
	color: white;
	border-radius: 10px;
}

.warning-card {
	margin: 5px;
	background-image: linear-gradient(to right, #e4d62e, #e4d62e);
	color: white;
	border-radius: 10px;
}

.info-card {
	margin: 5px;
	background-image: linear-gradient(to right, #4ca1af, #c4e0e5);
	color: white;
	border-radius: 10px;
}

.error-card p {
	margin: 10px 0px 10px 0px;
	font-size: 14px !important;
}

.success-card p {
	margin: 10px 0px 10px 0px;
	font-size: 14px !important;
}

.warning-card p {
	margin: 10px 0px 10px 0px;
	font-size: 15px !important;
	color: red;
	font-weight: bold;
}

.info-card p {
	margin: 10px 0px 10px 0px;
	font-size: 14px !important;
	color: black;
}

.switch {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 34px;
}

.switch input,
.switch-sm input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider,
.slider-sm {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider,
input:checked+.slider-sm {
	background-color: #2196F3;
}

input:focus+.slider,
input:focus+.slider-sm {
	box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
	-webkit-transform: translateX(65px);
	-ms-transform: translateX(65px);
	transform: translateX(65px);
}

.table-datatable input[type=checkbox],
input[type=checkbox]:disabled {
	/**/
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

/*.table-datatable input[type = checkbox]:checked, input[type = checkbox]:disabled {
	  background-color: #135b8b;
	  border: 1px solid #adb8c0;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	  color: #99a1a7;
  }
  */

@media (max-width: 600px) {

	.dropdown-menu,
	body {
		font-size: 12px;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 14px;
		/*12px;*/
	}

	.btn {
		padding: 1px 5px 1px 5px;
		font-size: 13px;
		line-height: 18px;
	}

	.input-file {
		height: 21px !important;
	}

	.form-control {
		font-size: 10px !important;
	}

	.control-label {
		font-size: 10px !important;
	}
}

@media (min-width: 601px) and (max-width: 700px) {

	.dropdown-menu,
	body {

		font-size: 10px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 11px;
		/*14px;*/
	}

	.btn {
		padding: 2px 2px;
		font-size: 9px;
		line-height: 16px;
	}

	.input-file {
		height: 24px !important;
	}

	.form-control {
		font-size: 9px !important;
	}
}

@media (min-width: 701px) and (max-width: 800px) {

	.dropdown-menu,
	body {

		font-size: 10px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 9px;
		/*15px;   */
	}

	.btn {
		padding: 2px 4px;
		font-size: 10px;
		line-height: 16px;
	}

	.input-file {
		height: 24px !important;
	}

	.form-control {
		font-size: 9px !important;
	}
}

@media (min-width: 801px) and (max-width: 900px) {

	.dropdown-menu,
	body {

		font-size: 10px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 13px;
		/*16px;   */
	}

	.btn {
		padding: 3px 5px;
		font-size: 10px;
		line-height: 18px;
	}

	.input-file {
		height: 28px !important;
	}

	.form-control {
		font-size: 10px !important;
	}
}

@media (min-width: 901px) and (max-width: 1000px) {

	.dropdown-menu,
	body {

		font-size: 10px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 14px;
		/*17px;   */
	}

	.btn {
		padding: 3px 6px;
		font-size: 10px;
		line-height: 20px;
	}

	.input-file {
		height: 30px !important;
	}

	.form-control {
		font-size: 10px !important;
	}
}

@media (min-width: 1001px) and (max-width: 1199px) {

	.dropdown-menu,
	body {

		font-size: 10px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 15px;
		/*18px;   */
	}

	.btn {
		padding: 4px 5px;
		font-size: 10px;
		line-height: 18px;
	}

	.input-file {
		height: 32px !important;
	}

	.form-control {
		font-size: 10px !important;
	}
}

@media (min-width: 1200px) and (max-width: 1400px) {

	.dropdown-menu,
	body {

		font-size: 11px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 15px;
		/*18px;   */
	}

	.btn {
		padding: 5px 5px;
		font-size: 10px;
		line-height: 18px;
	}

	.input-file {
		height: 40px !important;
	}

	.form-control {
		font-size: 11px !important;
	}
}

@media (min-width: 1401px) {

	.dropdown-menu,
	body {

		font-size: 11px !important;
	}

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 15px;
		/*18px;   */
	}

	.btn {
		padding: 6px 12px;
		font-size: 12px;
		line-height: 15px;
	}

	.input-file {
		height: 40px !important;
	}

	.form-control {
		font-size: 12px !important;
	}
}

.tableFixHead {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	height: 300px;
	/* gives an initial height of 200px to the table */
}

.tableFixHead thead th {
	position: sticky;
	/* make the table heads sticky */
	top: 0px;
	/* table head will be placed from the top of the table and sticks to it */
}

.table-responsive.tableScrolled-300 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 300px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-350 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 350px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-400 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 400px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-450 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 450px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-500 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 500px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-550 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 550px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-600 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 600px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-650 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 650px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.tableScrolled-700 {
	overflow-y: auto;
	/* make the table scrollable if height is more than 200 px  */
	max-height: 700px;
	/* gives an initial height of 200px to the table */
}

.table-responsive.hideScroolBar {
	overflow-y: hidden !important;
}

.overflowY-500 {
	overflow-y: auto;
	max-height: 500px;
}

.overflowY-500 {
	overflow-y: auto;
	max-height: 500px;
}

.overflowY-700 {
	overflow-y: auto;
	max-height: 700px;
}

@media (min-width: 1401px) {

	.checkbox i,
	.checkbox-inline i,
	.radio i,
	.radio-inline i {
		font-size: 15px;
	}
}

.fa-square-o {
	font-size: 14px !important;
}

.fa-circle-o {
	font-size: 15px !important;
}

.pa {
	color: #FFF;
	text-align: left;
	padding: 10px 12px;
	font-weight: bold;
	background-color: rgba(102, 102, 102, 1);

}

.pa A:link {
	text-decoration: none;
	color: #FFF;
}

.pa A:visited {
	text-decoration: none;
	color: #FFF;
}

.pa A:hover {
	text-decoration: underline;
	color: #FFF;
}

.pa A:active {
	text-decoration: none;
}

.address-box {
	display: inline-block;
	float: left;
	background: #707070;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.address-boxheading {
	position: relative;
	z-index: 5;
	color: #333;
	font-size: 18px;
	text-align: left;
	padding: 10px 12px;
}

.address-box p {
	font-size: 14px;
	margin: 0;
}

.address-gray {
	border-bottom: 1px solid #bababa;
	background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 69%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(69%, #e8e8e8));
	background: -webkit-linear-gradient(top, #ffffff 0%, #e8e8e8 69%);
	background: -o-linear-gradient(top, #ffffff 0%, #e8e8e8 69%);
	background: -ms-linear-gradient(top, #ffffff 0%, #e8e8e8 69%);
	background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 69%);
}

.address-default {
	background: rgb(102, 0, 153);

}

.address-make-default {
	background: rgb(0, 104, 144);

}

.bootstrap-filestyle.input-group label {
	line-height: 16px !important;
}

.separator.separator-dashed {
	border-bottom-style: dashed;
	border-bottom-color: var(--bs-border-dashed-color);
}

.separator {
	display: block;
	height: 0;
	border-bottom: 1px solid var(--bs-border-color);
}

.three-dots:after {
	content: '\2807';
	font-size: 25px;
}

.ki-dots-square-vertical .path1:before {
	content: "\eb80";
	opacity: .3;
}

.ki-dots-square-vertical .path2:before {
	content: "\eb81";
	position: absolute;
	left: 0;
}

.ki-dots-square-vertical .path3:before {
	content: "\eb82";
	position: absolute;
	left: 0;
}

.ki-dots-square-vertical .path4:before {
	content: "\eb83";
	position: absolute;
	left: 0;
}

.ki-duotone {
	font-family: keenicons-duotone !important;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	display: inline-flex;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ki-duotone,
.ki-outline,
.ki-solid {
	line-height: 1;
	font-size: 1rem;
	color: var(--bs-text-muted);
}

.user-account-row {
	white-space: nowrap;
}

.ki-shield-tick .path1:before {
	content: "\ee59";
	opacity: .3;
}

.ki-shield-tick .path2:before {
	content: "\ee5a";
	position: absolute;
	left: 0;
}

.hover-scale {
	transition: transform .3s ease;
}

.hover-scale:hover {
	transform: scale(1.1);
	transition: transform .3s ease;
	will-change: transform;
}

.hover-elevate-up {
	transition: transform .3s ease;
}

.hover-elevate-up:hover {
	transform: translateY(-2.5%);
	transition: transform .3s ease;
	will-change: transform;
	background-color: lightgreen;
}

.blink {
	-webkit-animation: blink 1s step-end infinite;
	-moz-animation: blink 1s step-end infinite;
	-o-animation: blink 1s step-end infinite;
	animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
	67% {
		opacity: 0
	}
}

@-moz-keyframes blink {
	67% {
		opacity: 0
	}
}

@-o-keyframes blink {
	67% {
		opacity: 0
	}
}

@keyframes blink {
	67% {
		opacity: 0
	}
}

.uppy-Dashboard-AddFiles-info {
	display: none !important;
}

.menu-bullet {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	margin-right: .5rem;
}

/* Password Strength Meter Styles for AdTrack Center */
/* AdTrack Center custom styles */

.password-strength-meter {
	height: 4px;
	background-color: #e4e6ef;
	border-radius: 2px;
	margin-top: 8px;
	overflow: hidden;
}

.password-strength-bar {
	height: 100%;
	width: 0%;
	border-radius: 2px;
	transition: width 0.3s ease, background-color 0.3s ease;
}

/* Override Bootstrap invalid feedback for better positioning */
.fv-plugins-message-container.invalid-feedback {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: #f1416c;
}

/* Force password change form specific styles */
.app-blank {
	background: linear-gradient(135deg, #1e1e2e 0%, #3f4771 100%);
}

.app-blank .card {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced focus states for password fields */
.form-control:focus {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

/* Required field indicator */
.required:after {
	content: "*";
	color: #f1416c;
	font-weight: bold;
	margin-left: 4px;
}

/* Button loading state enhancements */
[data-kt-indicator="on"] .indicator-label {
	display: none;
}

[data-kt-indicator="on"] .indicator-progress {
	display: inline-block;
}

.indicator-progress {
	display: none;
}

/* Alert enhancements for auth forms */
.alert .ki-outline {
	flex-shrink: 0;
}

.alert h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.alert span {
	font-size: 0.9rem;
	line-height: 1.4;
}

/* Mobile responsiveness for auth forms */
@media (max-width: 768px) {
	.w-lg-500px {
		width: 100% !important;
		max-width: 400px;
		margin: 0 auto;
	}

	.h-60px {
		max-height: 50px !important;
	}

	.p-10 {
		padding: 1.5rem !important;
	}
}

/* Enhanced form validation feedback */
.is-invalid {
	border-color: #f1416c !important;
	background-image: none;
}

.is-invalid:focus {
	border-color: #f1416c !important;
	box-shadow: 0 0 0 0.25rem rgba(241, 65, 108, 0.15) !important;
}

/* Loading overlay for form submissions */
.auth-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.auth-loading-content {
	background: white;
	padding: 2rem;
	border-radius: 0.5rem;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Password visibility toggle styles */
.password-toggle {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6c757d;
	z-index: 10;
	border: none;
	background: none;
	padding: 0;
	font-size: 1rem;
}

.password-toggle:hover {
	color: var(--primary-color, #007bff);
}

.password-field-wrapper {
	position: relative;
}

.password-field-wrapper .form-control {
	padding-right: 45px;
}

/* Phone Verification Modal Improvements */

/* Horizontal Stepper - Responsive */
@media (min-width: 768px) {
	.stepper-pills.stepper-horizontal {
		flex-direction: row !important;
		justify-content: center;
		align-items: flex-start;
		gap: 2rem;
	}

	.stepper-pills.stepper-horizontal .stepper-item {
		flex: 0 0 auto;
		text-align: center;
	}

	.stepper-pills.stepper-horizontal .stepper-wrapper {
		flex-direction: column;
		align-items: center;
	}

	.stepper-pills.stepper-horizontal .stepper-label {
		margin-top: 0.5rem;
		margin-left: 0;
		text-align: center;
	}
}

/* Keep vertical on mobile */
@media (max-width: 767px) {
	.stepper-pills.stepper-horizontal {
		flex-direction: column !important;
	}
}

/* Individual Verification Code Input Boxes */
.verification-code-container {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin: 1rem 0;
}

.verification-code-input {
	width: 50px !important;
	height: 50px !important;
	text-align: center !important;
	font-size: 1.5rem !important;
	font-weight: bold !important;
	border: 2px solid #e1e5e9 !important;
	border-radius: 8px !important;
	padding: 0 !important;
	background-color: #f8f9fa !important;
	transition: all 0.2s ease-in-out;
}

.verification-code-input:focus {
	border-color: #3699ff !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 0.25rem rgba(54, 153, 255, 0.15) !important;
	outline: none !important;
}

.verification-code-input.filled {
	border-color: #1bc5bd !important;
	background-color: #f0f9ff !important;
	color: #1bc5bd !important;
}

.verification-code-input.error {
	border-color: #f64e60 !important;
	background-color: #fff5f5 !important;
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
	.verification-code-container {
		gap: 0.5rem;
	}

	.verification-code-input {
		width: 40px !important;
		height: 40px !important;
		font-size: 1.25rem !important;
	}
}

/* Modal height optimization */
.modal-dialog.modal-lg.phone-verification-modal {
	max-height: 90vh;
}

.modal-dialog.modal-lg.phone-verification-modal .modal-content {
	max-height: 90vh;
	overflow-y: auto;
}

/* Compact form styling */
.phone-verification-form .form-control {
	max-width: 300px;
	margin: 0 auto;
}

.phone-verification-form .notice {
	margin: 1rem 0;
}

.phone-verification-form .d-flex.justify-content-center {
	margin-top: 1.5rem;
}

/* Center form elements */
.phone-form-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.phone-form-centered .form-control {
	max-width: 280px;
}

.phone-form-centered .notice {
	max-width: 450px;
}

/* Verification step styling */
.verification-step-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.verification-step-content .notice {
	max-width: 500px;
}

/* Button spacing improvements */
.btn-group-spaced {
	gap: 0.75rem;
}

/* Success step styling */
.success-step-content {
	text-align: center;
}

.success-step-content .notice {
	max-width: 500px;
	margin: 0 auto 1.5rem auto;
}

/* Countdown timer styling */
.countdown-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
	padding: 0.75rem;
	background-color: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e1e5e9;
}

.countdown-timer {
	font-weight: bold;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.countdown-timer.warning {
	color: #ffa800 !important;
}

.countdown-timer.danger {
	color: #f64e60 !important;
}

/* Resend button styling */
.resend-btn {
	font-size: 0.875rem;
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
}

.resend-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Phone requirements styling */
.phone-requirements {
	max-width: 400px;
	margin: 0 auto;
}

/* Error alert positioning */
.error-alert-container {
	margin: 1rem 0;
}

/* Modal padding adjustments */
.phone-verification-modal .modal-body {
	padding: 1.5rem 2rem 2rem 2rem;
}

@media (max-width: 767px) {
	.phone-verification-modal .modal-body {
		padding: 1rem 1.5rem 1.5rem 1.5rem;
	}
}

/* Global Loading Overlay Styles */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	backdrop-filter: blur(2px);
}

.loading-spinner {
	background-color: white;
	padding: 20px 30px;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	font-size: 16px;
	font-weight: 500;
	color: #333;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 150px;
	justify-content: center;
}

.loading-spinner i {
	font-size: 18px;
	color: #007bff;
}

/* Loading dots animation */
.loading-dots {
	display: inline-flex;
	gap: 4px;
}

.loading-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #007bff;
	animation: loading-dots 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
	animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes loading-dots {

	0%,
	80%,
	100% {
		transform: scale(0);
		opacity: 0.5;
	}

	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Loading pulse animation */
.loading-pulse {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #007bff;
	animation: loading-pulse 1.5s infinite ease-in-out;
}

@keyframes loading-pulse {
	0% {
		transform: scale(0);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/* Prevent body scrolling when loading */
body.loading {
	overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 576px) {
	.loading-spinner {
		padding: 15px 20px;
		font-size: 14px;
		min-width: 120px;
	}
}

/* ============================================================================
   UI/UX STANDARDS - November 2025
   AdTrack Center Design System Implementation

   Reference Documentation: /documents/AdTrack Center UI-UX Standards Guide.md
   ============================================================================ */

/* ----- CSS CUSTOM PROPERTIES (ROOT VARIABLES) ----- */
:root {
    /* Primary Colors */
    --ips-primary: #2563EB;
    --ips-primary-hover: #1D4ED8;
    --ips-primary-active: #1E40AF;

    /* Status Colors */
    --ips-success: #10B981;
    --ips-success-hover: #059669;
    --ips-danger: #DC2626;
    --ips-danger-hover: #B91C1C;
    --ips-warning: #D97706;
    --ips-warning-hover: #B45309;
    --ips-info: #0EA5E9;
    --ips-info-hover: #0284C7;
    --ips-download: #7C3AED;
    --ips-download-hover: #6D28D9;

    /* Text Colors */
    --ips-text-primary: #181C32;
    --ips-text-secondary: #1F2937;
    --ips-text-tertiary: #4B5563;
    --ips-text-muted: #6B7280;
    --ips-text-light: #9CA3AF;

    /* Background Colors */
    --ips-bg-input: #F9FAFB;
    --ips-bg-input-focus: #FFFFFF;
    --ips-bg-readonly: #F3F4F6;
    --ips-bg-card: #FFFFFF;
    --ips-bg-page: #F5F8FA;
    --ips-bg-table-header: #F9FAFB;

    /* Border Colors */
    --ips-border-input: #D1D5DB;
    --ips-border-focus: #3B82F6;
    --ips-border-card: #E5E7EB;
    --ips-border-separator: #E5E7EB;

    /* Focus Ring */
    --ips-focus-ring: rgba(59, 130, 246, 0.15);

    /* Required Indicator */
    --ips-required: #DC2626;
}

/* ----- BASE TYPOGRAPHY ----- */
/* Using Inter font for consistent, clean appearance */
/* Using !important to override Metronic base styles */

body,
.card,
.card-body,
.table,
.modal-content {
    font-family: Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Page titles */
h3.fw-bold {
    font-size: 18px !important;
    color: #181C32 !important;
    font-weight: 700 !important;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 14px !important;
}

/* Large display numbers (project numbers, etc.) */
.fs-2 {
    font-size: 24px !important;
    font-weight: 700 !important;
}

/* Ensure fs-2 keeps its weight when combined with other classes */
.dt-text-primary.fs-2,
.fs-2.dt-text-primary {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--ips-text-primary) !important;
}

/* Medium display text */
.fs-4 {
    font-size: 20px !important;
}

.fs-5 {
    font-size: 17px !important;
}

.fs-6 {
    font-size: 15px !important;
}

.fs-7 {
    font-size: 14px !important;
}

.fs-8 {
    font-size: 13px !important;
}

/* Card section labels - uppercase style */
.text-muted.fw-semibold.fs-7 {
    font-size: 13px !important;
    color: #6B7280 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

/* Card values */
.text-dark.fw-semibold.fs-6,
.text-dark.fw-bold.fs-6 {
    font-size: 15px !important;
    color: #181C32 !important;
}

/* Large project number specific */
.text-dark.fw-bold.fs-2 {
    font-size: 24px !important;
    color: #181C32 !important;
    font-weight: 700 !important;
}

/* Total amounts */
.text-dark.fw-bold.fs-5 {
    font-size: 17px !important;
    color: #181C32 !important;
}

.text-primary.fw-bold.fs-4 {
    font-size: 20px !important;
    color: #2563EB !important;
    font-weight: 700 !important;
}

/* ----- BUTTON STANDARDS ----- */
/* Standard button height 44px, small 38px */
/* Using !important to override Metronic base styles */

.btn {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-sm {
    min-height: 38px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}

/* Stacked button: icon above text, compact sizing for DataTable action columns */
.btn-stacked {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 0 !important;
    padding: 6px 8px 5px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 4px !important;
}
.btn-stacked > i,
.btn-stacked > span {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Primary Button - Blue */
/* Using high specificity selectors to override Metronic style.bundle.css */
.btn.btn-primary,
.btn-primary {
    background-color: var(--ips-primary) !important;
    border-color: var(--ips-primary) !important;
    color: #FFFFFF !important;
}

.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ips-primary-hover) !important;
    border-color: var(--ips-primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    color: #FFFFFF !important;
}

.btn.btn-primary:active:not(.btn-active),
.btn-primary:active {
    background-color: var(--ips-primary-active) !important;
    border-color: var(--ips-primary-active) !important;
}

/* Success Button - Green */
.btn.btn-success,
.btn-success {
    background-color: var(--ips-success) !important;
    border-color: var(--ips-success) !important;
    color: #FFFFFF !important;
}

.btn.btn-success:hover:not(.btn-active),
.btn.btn-success:focus:not(.btn-active),
.btn-success:hover,
.btn-success:focus {
    background-color: var(--ips-success-hover) !important;
    border-color: var(--ips-success-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    color: #FFFFFF !important;
}

/* Danger Button - Red */
.btn.btn-danger,
.btn-danger {
    background-color: var(--ips-danger) !important;
    border-color: var(--ips-danger) !important;
    color: #FFFFFF !important;
}

.btn.btn-danger:hover:not(.btn-active),
.btn.btn-danger:focus:not(.btn-active),
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--ips-danger-hover) !important;
    border-color: var(--ips-danger-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
    color: #FFFFFF !important;
}

/* Warning Button - Orange */
.btn.btn-warning,
.btn-warning {
    background-color: var(--ips-warning) !important;
    border-color: var(--ips-warning) !important;
    color: #FFFFFF !important;
}

.btn.btn-warning:hover:not(.btn-active),
.btn.btn-warning:focus:not(.btn-active),
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--ips-warning-hover) !important;
    border-color: var(--ips-warning-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
    color: #FFFFFF !important;
}

/* Info Button - Cyan */
.btn.btn-info,
.btn-info {
    background-color: var(--ips-info) !important;
    border-color: var(--ips-info) !important;
    color: #FFFFFF !important;
}

.btn.btn-info:hover:not(.btn-active),
.btn.btn-info:focus:not(.btn-active),
.btn-info:hover,
.btn-info:focus {
    background-color: var(--ips-info-hover) !important;
    border-color: var(--ips-info-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
    color: #FFFFFF !important;
}

/* Download Button - Purple */
.btn.btn-download,
.btn-download {
    background-color: var(--ips-download) !important;
    border-color: var(--ips-download) !important;
    color: #FFFFFF !important;
}

.btn.btn-download:hover:not(.btn-active),
.btn.btn-download:focus:not(.btn-active),
.btn-download:hover,
.btn-download:focus {
    background-color: var(--ips-download-hover) !important;
    border-color: var(--ips-download-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4) !important;
    color: #FFFFFF !important;
}

.btn-download i {
    color: #FFFFFF !important;
}

/* Light/Cancel Button - White with gray border */
.btn.btn-light,
.btn-light {
    background-color: #FFFFFF !important;
    border: 1px solid var(--ips-border-input) !important;
    color: #374151 !important;
}

.btn.btn-light:hover:not(.btn-active),
.btn.btn-light:focus:not(.btn-active),
.btn-light:hover,
.btn-light:focus {
    background-color: #6B7280 !important;
    border-color: #6B7280 !important;
    color: #FFFFFF !important;
}

/* Ensure icons inside btn-light also change color on hover */
.btn.btn-light:hover:not(.btn-active) i,
.btn.btn-light:focus:not(.btn-active) i,
.btn-light:hover i,
.btn-light:focus i {
    color: #FFFFFF !important;
}

/* Navigation Button - White with blue border */
.btn.btn-light-primary,
.btn-light-primary {
    background-color: #FFFFFF !important;
    border: 1px solid var(--ips-primary) !important;
    color: var(--ips-primary) !important;
}

.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn-light-primary:hover,
.btn-light-primary:focus {
    background-color: var(--ips-primary) !important;
    border-color: var(--ips-primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* ----- BADGE STANDARDS ----- */
/* All badges have visible borders for definition */
/* Using !important to override Metronic base styles */

.badge {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
}

/* Success badges (Active, Complete, Approved) */
.badge-light-success {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
    border-color: var(--ips-success) !important;
}

/* Primary badges (In Progress, Processing) */
.badge-light-primary {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
    border-color: #3B82F6 !important;
}

/* Warning badges (Pending, Awaiting) */
.badge-light-warning {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #F59E0B !important;
}

/* Danger badges (Failed, Rejected, Cancelled) */
.badge-light-danger {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border-color: #EF4444 !important;
}

/* Info badges (Info, Notice) */
.badge-light-info {
    background-color: #E0F2FE !important;
    color: #075985 !important;
    border-color: var(--ips-info) !important;
}

/* Light/neutral badges (quantity, counts) */
.badge-light {
    background-color: #F3F4F6 !important;
    color: #374151 !important;
    border-color: var(--ips-text-light) !important;
}

/* Purple/Download badges (Photos, Downloads) */
.badge-light-purple {
    background-color: #EDE9FE !important;
    color: #5B21B6 !important;
    border-color: var(--ips-download) !important;
}

/* Button variants with borders for consistency */
.btn-light-purple {
    background-color: #EDE9FE !important;
    color: #5B21B6 !important;
    border: 1px solid var(--ips-download) !important;
}

.btn-light-purple:hover {
    background-color: var(--ips-download) !important;
    color: #FFFFFF !important;
    border-color: var(--ips-download) !important;
}

/* ===================================================================
   DATATABLE ACTION BUTTON VARIANTS (UI/UX Standards Guide Section 11)
   =================================================================== */

/* Button: Light Success (Manage/Assign) */
.btn.btn-light-success {
    background-color: #D1FAE5 !important;
    color: #059669 !important;
    border: 1px solid #10B981 !important;
}
.btn.btn-light-success:hover,
.btn.btn-light-success:focus {
    background-color: #A7F3D0 !important;
    color: #047857 !important;
    border-color: #059669 !important;
}

/* Button: Light Danger (Delete/Remove) */
.btn.btn-light-danger {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
    border: 1px solid #EF4444 !important;
}
.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus {
    background-color: #FECACA !important;
    color: #B91C1C !important;
    border-color: #DC2626 !important;
}

/* Button: Light Info (View/Details) */
.btn.btn-light-info {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border: 1px solid #0EA5E9 !important;
}
.btn.btn-light-info:hover,
.btn.btn-light-info:focus {
    background-color: #BAE6FD !important;
    color: #075985 !important;
    border-color: #0284C7 !important;
}

/* Button: Light Warning (Send Link/Share) */
.btn.btn-light-warning {
    background-color: #FEF3C7 !important;
    color: #D97706 !important;
    border: 1px solid #F59E0B !important;
}
.btn.btn-light-warning:hover,
.btn.btn-light-warning:focus {
    background-color: #FDE68A !important;
    color: #B45309 !important;
    border-color: #D97706 !important;
}

/* Button: Light Teal (Email/Notify) */
.btn.btn-light-teal {
    background-color: #CCFBF1 !important;
    color: #0F766E !important;
    border: 1px solid #14B8A6 !important;
}
.btn.btn-light-teal:hover,
.btn.btn-light-teal:focus {
    background-color: #99F6E4 !important;
    color: #0D5F57 !important;
    border-color: #0D9488 !important;
}

/* Button: Light Slate (Toggle OFF/Inactive) */
.btn.btn-light-slate {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #94A3B8 !important;
}
.btn.btn-light-slate:hover,
.btn.btn-light-slate:focus {
    background-color: #E2E8F0 !important;
    color: #334155 !important;
    border-color: #64748B !important;
}

/* Button: Light Dark (Schematic/Neutral) */
.btn.btn-light-dark {
    background-color: #F1F1F4 !important;
    color: #181C32 !important;
    border: 1px solid #B5B5C3 !important;
}
.btn.btn-light-dark:hover,
.btn.btn-light-dark:focus {
    background-color: #E4E4E9 !important;
    color: #181C32 !important;
    border-color: #7E8299 !important;
}

/* ----- FORM INPUT STANDARDS ----- */
/* Solid style inputs with visible borders */
/* Using !important to override Metronic base styles */

.form-control-solid,
.form-select-solid {
    background-color: var(--ips-bg-input) !important;
    border: 1px solid var(--ips-border-input) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important; /* Override Metronic's bold to match dropdowns */
    padding: 10px 14px !important;
    min-height: 44px !important;
    height: auto !important;
    color: var(--ips-text-primary) !important;
    transition: all 0.15s ease-in-out !important;
}

.form-control-solid:focus,
.form-select-solid:focus {
    background-color: var(--ips-bg-input-focus) !important;
    border-color: var(--ips-border-focus) !important;
    box-shadow: 0 0 0 3px var(--ips-focus-ring) !important;
    outline: none !important;
}

.form-control-solid[readonly],
.form-select-solid[readonly] {
    background-color: var(--ips-bg-readonly) !important;
    color: var(--ips-text-muted) !important;
    cursor: default !important;
}

textarea.form-control-solid {
    min-height: 80px !important;
}

/* Form labels */
.form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ips-text-secondary) !important;
    margin-bottom: 0.5rem !important;
}

/* Required field indicator */
.form-label.required::after {
    content: '*' !important;
    color: var(--ips-required) !important;
    font-weight: 500 !important;
    padding-left: 3px !important;
}

/* Help text */
.form-text {
    font-size: 14px !important;
    color: var(--ips-text-tertiary) !important;
    margin-top: 0.25rem !important;
}

/* Toggle switches */
.form-switch .form-check-input {
    width: 3rem !important;
    height: 1.5rem !important;
    border-radius: 1.5rem !important;
    background-color: var(--ips-border-input) !important;
    border: none !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--ips-primary) !important;
    border-color: var(--ips-primary) !important;
}

/* ----- FORM FIELD WIDTH UTILITIES ----- */
/* Use these classes to constrain form field widths for better UX */
/* Apply to .form-control, .form-select, or their parent container */

.field-width-xs {
    max-width: 80px !important;
}

.field-width-sm {
    max-width: 120px !important;
}

.field-width-md {
    max-width: 200px !important;
}

.field-width-lg {
    max-width: 280px !important;
}

.field-width-xl {
    max-width: 350px !important;
}

.field-width-2xl {
    max-width: 450px !important;
}

.field-width-full {
    max-width: 100% !important;
    width: 100% !important;
}

/* Common field-specific patterns */
/* State codes (2 letters) - use .field-width-xs */
/* Postal/Zip codes - use .field-width-sm */
/* Phone numbers, IDs - use .field-width-md */
/* City names, dropdowns - use .field-width-lg */
/* Parent account, longer dropdowns - use .field-width-xl */
/* Account names, descriptions - use .field-width-2xl */

/* ----- DATATABLE STANDARDS ----- */
/* Header styling with uppercase, text hierarchy classes */
/* Using !important to override Metronic base styles */

.table thead tr {
    background-color: var(--ips-bg-table-header) !important;
    border-bottom: 2px solid var(--ips-border-separator) !important;
}

.table thead th {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ips-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 12px !important;
    border-top: 1px solid var(--ips-border-separator) !important;
}

.table tbody td {
    font-size: 15px !important;
    color: #374151 !important;
    padding: 12px !important;
    vertical-align: middle !important;
}

/* Table text classes for secondary/muted text */
.table tbody .text-muted.fs-8,
.table tbody .fs-8:not(.btn) {
    font-size: 13px !important;
    color: #6B7280 !important;
}

.table tbody tr:hover {
    background-color: var(--ips-bg-input) !important;
}

/* DataTable text hierarchy classes */
.dt-text-primary {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ips-text-primary) !important;
}

.dt-text-secondary {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ips-text-secondary) !important;
}

.dt-text-tertiary {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ips-text-tertiary) !important;
}

/* ----- ACTION ICON BUTTON STANDARDS ----- */
/* Icon buttons with visible backgrounds */
/* Using !important to override Metronic base styles */

.btn-icon {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 8px !important;
    background-color: #E5E7EB !important;
    border: none !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
}

.btn-icon i {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* Primary/Edit hover state */
.btn-active-color-primary:hover {
    background-color: #DBEAFE !important;
}

.btn-active-color-primary:hover i {
    color: var(--ips-primary) !important;
}

/* Info/View hover state */
.btn-active-color-info:hover {
    background-color: #E0F2FE !important;
}

.btn-active-color-info:hover i {
    color: var(--ips-info) !important;
}

/* Danger/Delete hover state */
.btn-active-color-danger:hover {
    background-color: #FEE2E2 !important;
}

.btn-active-color-danger:hover i {
    color: var(--ips-danger) !important;
}

/* Success hover state */
.btn-active-color-success:hover {
    background-color: #D1FAE5 !important;
}

.btn-active-color-success:hover i {
    color: var(--ips-success) !important;
}

/* ----- CARD STANDARDS ----- */
/* Using !important to override Metronic base styles */

.card {
    background: var(--ips-bg-card) !important;
    border: 1px solid var(--ips-border-card) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.card-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--ips-border-card) !important;
    background-color: #F9FAFB !important;
}

.card-header h3,
.card-header h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--ips-text-primary) !important;
    margin: 0 !important;
}

/* Card title class (used in Order Items header) */
.card-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #181C32 !important;
    margin: 0 !important;
}

.card-body {
    padding: 1.5rem !important;
}

.card-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--ips-border-card) !important;
    background: var(--ips-bg-input) !important;
}

/* Side-by-side section cards */
.section-cards-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.section-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--ips-bg-card);
    border: 1px solid var(--ips-border-card);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.section-card-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ips-border-card);
}

.section-card-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ips-text-primary);
    margin: 0 0 4px 0;
}

.section-card-header .section-desc {
    font-size: 13px;
    color: var(--ips-text-muted);
    margin: 0;
}

@media (max-width: 992px) {
    .section-cards-row {
        flex-direction: column;
    }
}

/* ----- SECTION TITLE STANDARDS ----- */

.section-title {
    padding: 12px 16px !important;
    margin: 24px 0 16px 0 !important;
    border-left: 4px solid var(--ips-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    background: #F3F4F6 !important;
    color: var(--ips-text-primary) !important;
}

/* Component label (uppercase) - for field labels in detail views */
.component-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    color: var(--ips-text-muted) !important;
}

/* Inline label (uppercase) - for horizontal label:value pairs like billing details */
.inline-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--ips-text-muted) !important;
}

/* Card value - for values displayed below component-label in cards (15px) */
.card-value {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ips-text-primary) !important;
}

/* ----- SEPARATOR STANDARDS ----- */
/* Thicker, more visible separators */

.separator {
    border-color: var(--ips-border-separator) !important;
    border-bottom-width: 2px !important;
    border-style: solid !important;
    opacity: 1 !important;
}

.separator-dashed {
    border-style: solid !important;
    border-bottom-width: 2px !important;
}

.separator-solid {
    border-style: solid !important;
    border-bottom-width: 2px !important;
}

/* ============================================================================
   END UI/UX STANDARDS
   ============================================================================ */

/* ============================================================================
   SITE PROFILE MAP THUMBNAIL
   ============================================================================ */

/* Site Map Thumbnail Container */
.site-map-container {
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f8fa;
    border: 1px solid #e4e6ef;
    position: relative;
    flex-shrink: 0;
}

.site-map-thumbnail {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.site-map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.site-map-actions {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 3px;
}

/* Show actions on hover (optional - can remove for always visible) */
.site-map-container .site-map-actions {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.site-map-container:hover .site-map-actions {
    opacity: 1;
}

/* ============================================================
   UI/UX Standards v2.0 - Global Overrides (Feb 2026)
   See /documents/adtrackcenter-ui-ux-standards-guide.md
   ============================================================ */

/* MODAL SCROLLABLE FIX - CRITICAL
   Without this, modal-dialog-scrollable does not work correctly
   with Metronic theme overrides. Modals grow unbounded past viewport. */
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eff2f5;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 2;
}

/* Slim scrollbar for modal body */
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* BADGE BORDER ENFORCEMENT - All badges must have visible borders */
.badge.badge-light-success { border: 1px solid #10B981; }
.badge.badge-light-primary { border: 1px solid #3B82F6; }
.badge.badge-light-warning { border: 1px solid #F59E0B; }
.badge.badge-light-danger  { border: 1px solid #EF4444; }
.badge.badge-light-info    { border: 1px solid #0EA5E9; }
.badge.badge-light         { border: 1px solid #9CA3AF; }

/* TOGGLE SWITCH - ON = Blue, OFF = Light Slate */
.form-check-input:checked {
    background-color: #2563EB;
    border-color: #2563EB;
}
.form-check-input:not(:checked) {
    background-color: #CBD5E1;
    border-color: #CBD5E1;
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
    border-color: #2563EB;
}

/* COMPACT DATATABLE ROWS */
table.dataTable tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    font-size: 0.8125rem;
}
table.dataTable thead th {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

/* ============================================================
   ACCORDION MODAL STYLES
   Styles for accordion-based modal forms per UI/UX Standards v2.0
   Uses !important where needed to override Metronic defaults.
   ============================================================ */

/* Accordion base - reset all Metronic borders and radius */
.modal .accordion,
.accordion {
    --bs-accordion-border-color: transparent !important;
    --bs-accordion-border-width: 0 !important;
    --bs-accordion-border-radius: 0 !important;
    --bs-accordion-inner-border-radius: 0 !important;
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.7rem;
    --bs-accordion-body-padding-x: 1rem;
    --bs-accordion-body-padding-y: 0.75rem;
    --bs-accordion-active-bg: transparent !important;
    --bs-accordion-active-color: #1e293b;
    --bs-accordion-btn-focus-box-shadow: none !important;
}

/* Accordion item - flat rows, NO card-like borders */
.modal .accordion-item,
.accordion-item {
    border: none !important;
    border-bottom: 1px solid #f1f3f5 !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    background: #fff !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.modal .accordion-item:last-child,
.accordion-item:last-child {
    border-bottom: none !important;
}

/* Active section - auto-detected via :has() when accordion is expanded */
.modal .accordion-item:has(.accordion-collapse.show),
.accordion-item:has(.accordion-collapse.show) {
    border-left-color: #2563eb !important;
    background: #bfdbfe !important;
}

/* Accordion header - reset legacy dark blue background completely */
.modal .accordion-header,
.modal .accordion .accordion-header,
.modal .accordion-item .accordion-header {
    background-color: transparent !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    border: none !important;
    box-shadow: none !important;
}
/* Also target h2.accordion-header specifically (Bootstrap 5 uses h2) */
.modal h2.accordion-header,
.modal .accordion h2.accordion-header {
    background-color: transparent !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Accordion button - clean white/light background */
.modal .accordion-button,
.accordion-button {
    background: #fff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    padding: 0.75rem 1rem !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease;
}
.modal .accordion-button:not(.collapsed),
.accordion-button:not(.collapsed) {
    background: #bfdbfe !important;
    color: #1e40af !important;
    box-shadow: none !important;
}
.modal .accordion-button:hover,
.accordion-button:hover {
    background: #eff6ff !important;
}
.modal .accordion-button:focus,
.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Accordion button chevron - prominent, larger, with circular background */
.modal .accordion-button::after,
.accordion-button::after {
    background-size: 0.75rem !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #cbd5e1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}
/* Expanded state chevron - rotated, blue background */
.modal .accordion-button:not(.collapsed)::after,
.accordion-button:not(.collapsed)::after {
    background-color: #93c5fd !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e40af'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* Hover state for chevron */
.modal .accordion-button:hover::after,
.accordion-button:hover::after {
    background-color: #b0bec5 !important;
}
.modal .accordion-button:not(.collapsed):hover::after,
.accordion-button:not(.collapsed):hover::after {
    background-color: #7db8f5 !important;
}

/* Accordion body compact padding, no borders */
.modal .accordion-body,
.accordion-body {
    padding: 0.75rem 1rem 0.85rem 1rem !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}
/* Active section body inherits the light blue tint */
.modal .accordion-item:has(.accordion-collapse.show) .accordion-body,
.accordion-item:has(.accordion-collapse.show) .accordion-body {
    background: #eff6ff !important;
}

/* Accordion collapse - no border */
.modal .accordion-collapse,
.accordion-collapse {
    border: none !important;
}

/* Protect icons inside accordion buttons from inheriting active-state color */
.accordion-button:not(.collapsed) .section-icon,
.accordion-button:not(.collapsed) .section-icon i,
.accordion-button:not(.collapsed) .section-icon .ki-outline,
.accordion-button:not(.collapsed) .section-icon .fa,
.accordion-button:not(.collapsed) .section-icon .fas,
.accordion-button:not(.collapsed) .section-icon .far {
    color: inherit !important;
}

/* Section icons in accordion headers */
.accordion-button .section-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    border-radius: 6px;
    margin-right: 10px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Icon color variants */
.section-icon.icon-order    { background: #eff6ff !important; color: #2563eb !important; }
.section-icon.icon-schedule  { background: #f0fdf4 !important; color: #16a34a !important; }
.section-icon.icon-site      { background: #fef3c7 !important; color: #d97706 !important; }
.section-icon.icon-scope     { background: #fce7f3 !important; color: #db2777 !important; }
.section-icon.icon-notes     { background: #f3e8ff !important; color: #7c3aed !important; }

/* Active state - icons keep their original colors (no inversion) */
/* Section icons must remain readable in both collapsed and expanded states */
.accordion-button:not(.collapsed) .section-icon.icon-order    { background: #eff6ff !important; color: #2563eb !important; }
.accordion-button:not(.collapsed) .section-icon.icon-schedule  { background: #f0fdf4 !important; color: #16a34a !important; }
.accordion-button:not(.collapsed) .section-icon.icon-site      { background: #fef3c7 !important; color: #d97706 !important; }
.accordion-button:not(.collapsed) .section-icon.icon-scope     { background: #fce7f3 !important; color: #db2777 !important; }
.accordion-button:not(.collapsed) .section-icon.icon-notes     { background: #f3e8ff !important; color: #7c3aed !important; }

/* Summary badge aligned right on accordion header */
.section-summary {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-left: auto !important;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}
.accordion-button:not(.collapsed) .section-summary {
    color: #93a8d9 !important;
}

/* Subsection label inside accordion body */
.subsection-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.subsection-label:not(:first-child) {
    margin-top: 0.65rem;
}

/* Dashed divider inside accordion body */
.section-divider {
    border-top: 1px dashed #e5e7eb;
    margin: 0.6rem 0;
}

/* ===== Photo Gallery Buttons (Surfaces, Graphics Locations, etc.) ===== */
.photo-gallery-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border: 1px solid !important;
    border-radius: 4px !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.photo-gallery-btn:hover {
    opacity: 0.8;
}
.photo-gallery-btn i {
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Color variants */
.photo-gallery-btn.btn-gallery-view {
    background: #DBEAFE !important;
    color: #1D4ED8 !important;
    border-color: #93C5FD !important;
}
.photo-gallery-btn.btn-gallery-view:hover {
    background: #BFDBFE !important;
}

.photo-gallery-btn.btn-gallery-rotate {
    background: #FEF3C7 !important;
    color: #B45309 !important;
    border-color: #FCD34D !important;
}
.photo-gallery-btn.btn-gallery-rotate:hover {
    background: #FDE68A !important;
}

.photo-gallery-btn.btn-gallery-annotate {
    background: #FCE7F3 !important;
    color: #BE185D !important;
    border-color: #F9A8D4 !important;
}
.photo-gallery-btn.btn-gallery-annotate:hover {
    background: #FBCFE8 !important;
}

.photo-gallery-btn.btn-gallery-delete {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border-color: #FCA5A5 !important;
}
.photo-gallery-btn.btn-gallery-delete:hover {
    background: #FECACA !important;
}