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

.badge-registered {
   background-color: #4682B4 !important;
   font-size: small !important;
   color: #fff !important;
}

.badge-approved {
   background-color: #28A745;
   color: #fff !important;
   font-size: small !important;
}

.badge-approved-condition {
   background-color: #FFC107;
   font-size: small !important;
}

.badge-rejected {
   background-color: #DC3545;
   color: #fff !important;
   font-size: small !important;
}

.badge-payment-entered {
   background-color: #6610F2;
   color: #fff !important;
   font-size: small !important;
}

.badge-payment-entered-part {
   background-color: #e3f210;
   color: #000000 !important;
   font-size: small !important;
}

/* .badge-payment-entered {
   background-color: #6610F2;
   color: #fff !important;
   font-size: small !important;
} */

.badge-payment-approved {
   background-color: #17A2B8;
   color: #fff !important;
   font-size: small !important;
}

.badge-payment-approved-condition {
   background-color: #FFB400;
   font-size: small !important;
}

.badge-payment-rejected {
   background-color: #E83E8C;
   font-size: small !important;
}

.badge-cleared {
   background-color: #20C997;
   font-size: small !important;
}
.text-bg-pink {
   color: #fff !important;
   background-color: #d63384 !important;
}

.text-bg-orange {
   color: #fff !important;
   background-color: #fd7e14 !important;
}

.text-bg-cyan {
   color: #fff !important;
   background-color: #0dcaf0 !important;
}

.text-bg-indigo {
   color: #fff !important;
   background-color: #6610f2 !important;
}

.text-bg-purple {
   color: #fff !important;
   background-color: #6f42c1 !important;
}

.text-bg-maroon {
   color: #fff !important;
   background-color: #58151c !important;
}

.width-5 {
   width: 5%;
}

.width-10 {
   width: 10%;
}

.width-15 {
   width: 15%;
}

.width-20 {
   width: 20%;
}

.width-25 {
   width: 25%;
}

.width-30 {
   width: 30%;
}

.width-35 {
   width: 35%;
}

.width-40 {
   width: 40%;
}

.width-45 {
   width: 45%;
}

.width-50 {
   width: 50%;
}

.extra-note {
   color: #45a049;
}

/* Custom checked color */
.custom-switch-green:checked {
   background-color: #4CAF50;
   /* Green when checked */
   border-color: #4CAF50;
}

/* Custom unchecked color */
.custom-switch-green {
   background-color: #e2dada;
   /* Red when unchecked */
}

/* Optional: Custom hover color */
.custom-switch-green:hover {
   background-color: #45a049;
   /* Darker green on hover */
}

.bi-three-dots-vertical {
   color: rgb(224, 85, 123);
   font-size: 18px;
}

.vertical-m {
   vertical-align: middle;
}

.fs-35 {
   font-size: 35px;
}



.error {
   margin-top: 2px;
   color: rgb(224, 85, 123);
}

.color-red {
   color: rgb(224, 85, 123);
}

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



iframe {
   border: 1px solid #ccc;
   border-radius: 5px;
}

/* Gallery Image Preview */
.preview-image {
   display: flex;
   /* Flexbox for alignment */
   flex-wrap: wrap;
   /* Wrap images to the next row if necessary */
   gap: 10px;
   /* Spacing between images */
   max-width: 100%;
   /* Prevent container from overflowing */
   max-height: 250px;
   /* Limit the height of the preview box */
   overflow-y: auto;
   /* Enable vertical scrolling if necessary */
   border: 1px solid #ddd;
   /* Border for the preview box */
   padding: 10px;
   /* Padding inside the preview box */
   border-radius: 8px;
   /* Rounded corners */
   /* background-color: #f9f9f9; */
   /* Light background color */
}

.image-wrapper {
   position: relative;
   /* Ensure the image stays in its box */
   width: 120px;
   /* Thumbnail width */
   height: auto;
   /* Thumbnail height */
   overflow: hidden;
   /* Hide overflow content */
   border-radius: 8px;
   /* Rounded corners */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* Subtle shadow */
}

.image-wrapper:hover {
   transform: scale(1.05);
   /* Slight zoom effect on hover */
}

.landscape-image-preview {
   max-width: 450px;
   max-height: auto;
   width: 450px;
   height: auto;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   object-fit: cover;
}

.landscape-multiple-image-preview {
   max-width: 250px;
   max-height: auto;
   width: 250px;
   height: auto;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   object-fit: cover;
}

.landscape-image-table-preview {
   width: 120px;
   height: auto;
   object-fit: cover;
}

.portrait-image-preview {
   max-width: auto;
   max-height: 250px;
   width: auto;
   height: 250px;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   object-fit: cover;
}

.portrait-image-table-preview {
   width: auto;
   height: 120px;
   object-fit: cover;
}

.image-preview {
   max-width: auto;
   max-height: 450px;
   width: auto;
   height: 450px;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   object-fit: cover;
}

.image-table-preview {
   width: auto;
   height: 120px;
   object-fit: cover;
}

.preview-image {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   /* 👈 Center images horizontally */
   align-items: center;
   /* 👈 Center images vertically */
   gap: 10px;
   max-width: 100%;
   max-height: 350px;
   overflow-y: auto;
   border: 1px solid #ddd;
   padding: 10px;
   border-radius: 8px;
}

.preview-image img {
   max-width: 100%;
   /* Ensures it doesn't overflow */
   height: auto;
   object-fit: contain;
   display: block;
   margin: 0 auto;
   /* Optional: helps inside non-flex parents */
}

/* Partner Logo Image */
.partner-image-preview {
   width: 100%;
   max-width: 200px;
   max-height: 200px;
   object-fit: contain;
   background-color: #fff;
   padding: 10px;
   border-radius: 10px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Partner Logo Image */
.partner-image-table-preview {
   max-width: 80px;
   max-height: 80px;
   object-fit: contain;
   /* border-radius: 8px;
   border: 1px solid #ddd;
   padding: 5px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease-in-out; */
}


/***************************************************************/
/* Automatically apply dark theme based on [data-bs-theme="dark"] */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
   background-color: #343a40;
   color: #fff;
   border-color: #6c757d;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
   color: #fff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
   color: #adb5bd;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
   background-color: #343a40;
   color: #fff;
   border: 1px solid #495057;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
   background-color: #495057;
   color: #fff;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected {
   background-color: #212529;
   color: #fff;
}





/******************************/

/* Remove the default thumb and style switch */
.form-check-input.custom-toggle {
   width: 170px;
   height: 35px;
   border: none;
   border-radius: 6px;
   background-color: #dc3545;
   /* Default: Completed - Red */
   position: relative;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
   box-shadow: none;
}

/* Green when checked (Ongoing) */
.form-check-input.custom-toggle:checked {
   background-color: #28a745;
}

/* Add text instead of circle */
.form-check-input.custom-toggle::after {
   content: "COMPLETED";
   color: #fff;
   font-weight: bold;
   font-size: 12px;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   line-height: 40px;
   text-align: center;
   transition: content 0.3s ease;
}

.form-check-input.custom-toggle:checked::after {
   content: "ONGOING";
}