h1 {font-size: 2rem; font-weight: 600;}
.row > div .border  {background: #fff;}

/* ========================================================================================================== 
   								Checkbox and Radio Button Stylesheet
========================================================================================================== */

.custom-checkbox {-webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; position: relative;}
.custom-checkbox span {vertical-align: middle; transform: translate3d(0, 0, 0);}
.custom-checkbox .check_ui {position: relative; width: 1.125rem; height: 1.125rem; transform: scale(1); vertical-align: middle; border: 1.5px solid rgba(0, 0, 0, 0.54); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; border-radius: 2px;}
/*.custom-checkbox span.check_ui svg {position: absolute; z-index: 1; top: 0px; left: 0px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all 0.3s ease; transition-delay: 0.1s; transform: translate3d(0, 0, 0);}
*/.custom-checkbox .check_ui:before {content: ""; width: 100%; height: 100%; background: var(--palette-secondary-action); display: block; transform: scale(0); opacity: 1; border-radius: 50%; transition-delay: 0.2s;}

.animated_img {padding: 9px; background-color: rgba(64, 64, 64, .0); transition: none; border-radius: 50%; width: 2.625rem; height: 2.625rem; display: flex; align-items: center; justify-content: center;}
.animated_img:hover {background-color: rgba(64,64,64,.08);}

.check_icon {display: none; color: var(--palette-primary-surface); position: absolute;}

/*input checkbox is check stylesheet*/
.inp_cbx:checked + .custom-checkbox .check_ui {border-color: var(--palette-secondary-action); background: var(--palette-secondary-action); animation: check 0.6s ease;}
/*.inp_cbx:checked + .custom-checkbox .check_ui svg {stroke-dashoffset: 0;}*/
.inp_cbx:checked + .custom-checkbox .check_ui:before {transform: scale(3.2); opacity: 0; transition: all 0.6s ease;}
.inp_cbx:checked + .custom-checkbox .check_icon {display: block;}
.inp_cbx:checked + .custom-checkbox .animated_img:hover {background-color: rgba(245, 0, 87, 0.04);}

/*custom radio button stylesheet*/
.custom-radio {}
.custom-radio .check_ui {border-radius: 50%; border-color: var(--palette-primary);}
.custom-radio .check_ui::after {content: ''; position: absolute; left: 0; top: 0; border-radius: 50%; border:3.0px solid; border-color: var(--palette-primary-surface); width: calc(100% - 0px); height: calc(100% - 0px); display: none;}
.custom-radio .check_icon {display: none !important;}


/*custom radio is check stylesheet*/
.inp_cbx:checked + .custom-radio .check_icon {display: block;}
.inp_cbx:checked + .custom-radio .check_ui::after {display: block;}


/*custom disable stylesheet*/
.custom-disable {cursor: not-allowed; pointer-events: none; opacity: 0.6;}

@keyframes check {
  50% {transform: scale(1.2);}
}




/* ################################### Switch Button Stylesheet ################################### */

.switch-container {display: flex; border-radius: 6px; overflow: hidden; border: 1px solid; border-color: #E2E2E2; padding: 2px; width: min-content;}

/* Hide radio buttons */
.switch-container input[type="radio"] {display: none;}
.switch-container .yn_btn {width: 2rem; height: 1.5rem; font-size: 0.75rem;}

/* Style the selected label */
.switch-container input[type="radio"] + .switch-label {border-radius: 4px; padding: 4px; letter-spacing: 1px; text-transform: uppercase;}
.switch-container input[type="radio"]:checked + .switch-label {background-color: var(--palette-secondary-action); color: #fff; border-radius: 4px; padding: 4px;}

.switch-label {flex: 1; text-align: center; z-index: 1; cursor: pointer; margin: 0;}


/* Slider Effect */
/*.switch-slider {position: absolute; width: 50%; height: 100%; background-color: #4caf50; border-radius: 25px; transition: transform 0.3s ease;}*/

/* Position the slider based on the selected radio button */
/*#option1:checked ~ .switch-slider {transform: translateX(0);}
#option2:checked ~ .switch-slider {transform: translateX(100%);}
#option1:checked + .switch-label {color: #fff;}
#option2:checked + .switch-label {color: #fff;}
*/



/* ========================================================================================================== 
   									Form Control Input Stylesheet
========================================================================================================== */

.form-group {border: 1px solid; border-color: transparent; margin-bottom: 1rem;}
.form-group:last-child {margin-bottom: 0rem;}
form label {font-weight: 400; font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.24px;}
.form-control {font-weight: 400; font-size: 1rem; line-height: 1.4375em; color: var(--palette-text-primary); box-sizing: border-box; position: relative; cursor: text; display: inline-flex; border-radius: 4px; height: 2.75rem; padding: 0.5rem;
    -webkit-box-align: center; align-items: center;
    background: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #E2E2E2;
}

/* Style on focus */
.form-control:focus {outline: 0;
  border-color: var(--palette-dark); /* Green border */
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.0); /* Green glow */
  background-color: #fff; /* Light green background */
}

/* Style for all input placeholders */
.form-control::placeholder {color: var(--palette-tertiary); font-size: 0.875rem;}


/* ========================================================================================================== 
   									Form Text Message Stylesheet
========================================================================================================== */

.form-group .text-msg{line-height: 1.2; display: flex; align-items: center; font-size: 0.85rem; padding-top: 2px;}
.form-group .text-msg span {padding: 0 0 0 0.5rem; font-size: 0.75rem;}
/*.form-group.field-error:focus-within label{color: var(--palette-negative);}*/
.form-group.field-error label{color: var(--palette-negative);}
.form-group.field-error .form-control{border-color: var(--palette-negative);}
.form-group.field-error .text-msg{color: var(--palette-negative);}

.form-group.field-success label{color: var(--palette-positive);}
.form-group.field-success .form-control{border-color: var(--palette-positive);}
.form-group.field-success .text-msg{color: var(--palette-positive);}

.form-group.field-disabled label{color: var(--palette-disabled);}
.form-group.field-disabled .form-control{border-color: #B4B4B4;; cursor: not-allowed; pointer-events: all;}
.form-group.field-disabled .text-msg{color: var(--palette-disabled);}

.form-group.field-readonly label{}
.form-group.field-readonly .form-control{background-color: #F1F1F1; pointer-events: none; border-color: #B4B4B4;}
.form-group.field-readonly .text-msg{color: var(--palette-negative);}



/* ========================================================================================================== 
   									Dropdown Stylesheet
========================================================================================================== */

.custom-dropdown {position: relative;}
.customSelect {display: none; /* Hide the original select */}
.dropdown-container {position: relative; width: 100%;}
.dropdown-input {width: 100%; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; text-align: left; outline: none; position: relative;    }
/* Dropdown icon styling */
.dropdown-icon {position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); pointer-events: none; font-size: 1.25rem;}

.dropdown-list {list-style: none; padding: 0; margin: 0; position: absolute; width: 100%; background: #fff; display: none; z-index: 1000; max-height: 12.5rem; overflow-y: auto; border-radius: 0.5rem; box-shadow: 2px 5px 12px -5px rgba(0,0,0,0.2);}
.dropdown-list li {padding: 0.6757813rem 1rem; cursor: pointer; border-bottom: 0px solid #f0f0f0; font-size: 0.875rem; min-height: 2.75rem;}
.dropdown-list li:hover {background: rgba(241, 70, 135, 0.2);}
.dropdown-list li:last-child {border-bottom: none;}

/* Rotate arrow when dropdown opens */
.custom-dropdown.open .dropdown-icon {transform: translateY(-50%) rotate(180deg); /* Rotate 180 degrees */}



/* ========================================================================================================== 
   									Search Section Stylesheet
========================================================================================================== */

.form-control.search-input-wrapper {border-radius: 1.25rem; padding: 0.5rem 2.75rem 0.5rem 0.75rem;}
.form-control.search-input-wrapper.active {border-color: #E2E2E2; box-shadow: 2px 5px 12px -5px rgba(0,0,0,0.2); background: #fff;}
.form-control.search-input-wrapper .form-control {padding: 0 0 0 0.25rem; border: 0; height: auto; width: 0; min-height: 1.875rem; -webkit-box-flex: 1; flex-grow: 1; text-overflow: ellipsis; opacity: 1;}
.form-control.search-input-wrapper .form-control:focus{}

.search-section {position: relative;}
.search-section ul {margin: 0.25rem 0 0; padding: 0; position: absolute; width: 100%; background: #fff; border-radius: 1.5rem; box-shadow: 0px 5px 12px -5px rgba(0,0,0,0.3); overflow: hidden; z-index: 2;}
.search-section ul li{margin: 0; list-style: none; padding: 0.5rem 0.5rem; font-size: 0.875rem; letter-spacing: 0.2px; display: flex; align-items: center;}
.search-section ul li:hover{background: rgba(241, 70, 135, 0.2); cursor: pointer;}
.search-section ul li span {color: var(--palette-grey-500); padding: 0 0.5rem 0 0; font-size: 1.25rem;}

/* Hide list by default */
.hidden {display: none;}

/* Show clear button when input has value */
.search-input-wrapper.has-content .clear_btn {display: flex;}
.search-input-wrapper .search_icon, .search-input-wrapper .clear_btn, .search-input-wrapper .voice_icon {display: flex; height: 100%; justify-content: center; align-items: center; font-size: 1.25rem; color: var(--palette-grey-500);}
.search-input-wrapper .search_icon {right: 0.5rem;}
.search-input-wrapper .clear_btn, .search-input-wrapper .voice_icon {right: 0.5rem; position: absolute;}
.search-input-wrapper .clear_btn {right: 2.5rem; top: 0; cursor: pointer; display: none; color: var(--palette-dark);}
.search-input-wrapper .voice_icon {right: 1.0rem; top: 0; cursor: pointer; color: var(--palette-dark);}





/* ========================================================================================================== 
   									📂 Upload Box Styles
========================================================================================================== */

/* 🎯 Drag & Drop Area  */
.upload-box {border: 1px dashed; border-color: var(--palette-grey-700); padding: 0.5rem; border-radius: 0.5rem; font-size: 0.75rem;}

.upload-box:hover {border-color: #81C1BD;}
.upload-box-wraper .upload-box > div {text-align: center; cursor: pointer; background-color: var(--palette-secondary-surface); border-radius: 0.25rem; transition: 0.3s;}

.upload-box-wraper .upload-box.dragover {border-color: #81C1BD; background-color: #F3FBFB;}
.upload-box-wraper .upload-box.dragover > div { background-color: var(--palette-secondary-surface);}
.upload-box-wraper .dragover {border: 1px dashed #81C1BD !important; background-color: #f8f9fa;}

/* 📤 File Input & Label */
.upload-box-wraper .upload-box input[type="file"] {display: none;}
.upload-box-wraper .upload-box label {color: var(--palette-secondary-action); padding: 0.5rem; cursor: pointer; border-radius: 0.25rem; text-transform: uppercase; font-size: 0.75rem; font-weight: 600; letter-spacing: 1px; margin: 0; line-height: 0.75;}






/* ===========================
   📄 File Name & Upload Status
=========================== */


/* 📁 Uploaded File Container | 🖼️ Image Preview */
.file-container {display: flex; align-items: center; margin-top: 10px; background: #fff; padding: 1rem; border: 1px solid #E2E2E2; border-radius: 8px; justify-content: center;}
.file-container figure {background: #EBF9F8; color: #404040; width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; min-width: auto; overflow: hidden; margin: 0 0.75rem 0 0;}
.file-container img {font-size: 0.85rem; color: #ccc; line-height: 1.0; width: 1.125rem; height: auto; margin: auto;}
.file_name {font-weight: 500; text-transform: uppercase; letter-spacing: 0.24px; line-height: 1.0; display: flex; align-items: flex-start; justify-content: flex-start; height: 1rem; overflow: hidden;}
.file_size {font-size: 0.75rem; color: #9D9D9D; line-height: 0.9;}


/* 📊 File Progress Bar */
.file-progress {width: 100%; height: 10px; background-color: #ddd; border-radius: 5px; margin-top: 5px; overflow: hidden; transition: opacity 0.3s ease;}
.progress-bar {height: 100%; width: 0%; background-color: #4caf50; transition: width 0.2s ease;}

/* Action Buttons ❌ Delete & 🔍 View Buttons */
.file-container .action_btn {display: flex;}
.file-container .action_btn .icon_btn {padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;}
.file-container .action_btn .icon_btn {background-color: #F9F9F9; color: #404040; width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; padding: 0; min-width: auto; margin-right: 0.75rem; text-decoration: none;}
.file-container .action_btn .icon_btn:last-child {margin-right: 0;}
.file-container .action_btn .icon_btn:hover {background-color: var(--palette-secondary-action); color: var(--palette-primary-surface);}

/* Upload File Display Message */
.file_upload_status_msg {font-size: 0.85rem; padding: 0.75rem 0.5rem; border-radius: 5px; margin-top: 0.5rem; display: none;}
.upload-box-wraper .notes {font-size: 0.75rem; padding: 0.5rem 0.5rem; border-radius: 5px; margin-top: 1rem; background: #F9F9F9; text-align: center; letter-spacing: 0.32px;}
.upload-box-wraper .notes span{padding: 0 0.3rem;}

.upload-box-wraper.upload-disabled .upload-box{border-color: transparent; color: #B4B4B4; padding: 0;}
.upload-box-wraper.upload-disabled .upload-box label{color: #B4B4B4; cursor: not-allowed;}
.upload-box-wraper.upload-disabled .notes {display: none;}

.upload-file-container {display: grid; place-content: start; gap: 0.75rem;
	-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}
.upload-file-container .file-container {margin-bottom: 0.5rem; margin-right: 0.5rem; min-width: 20.5rem;}
.upload-file-container .file-container:last-child {margin-right: 0rem; }
.upload-file-container .file-container:hover {border-color: #81c1bd; background-color: var(--palette-secondary);}



/* 📁 Uploaded File Container | 🖼️ Image Preview 📱 Responsive Design */
@media (max-width: 767.98px) {
	
}
@media (max-width: 799.98px) {
	
}
@media (max-width: 1199.98px) {
	
}




/* ========================================================================================================== 
   									Tabs Section Stylesheet
========================================================================================================== */
.tabs {display: flex;}
.tab-item {cursor: pointer; background: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; outline: 0px; max-width: 22.5rem; min-width: 5.625rem; padding: 0.5rem; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: var(--palette-disabled); margin: 0; font-size: 0.875rem; position: relative;}
.tab-item.active {color: var(--palette-secondary-action); border-bottom-color: var(--palette-secondary-action);}
.tab-item:focus {backgound: var(--palette-secondary-action); transition: background 0.5s ease-in-out;}
.tab-content {display: block; margin: 0px; font-weight: 400; font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.24px; padding: 0.25rem; border: 0;}

.tab-item span:before {content: ""; width: 100%; height: 100%; background: var(--palette-secondary-action); display: block; transform: scale(0); opacity: 1; transition-delay: 0.2s; position: absolute; top: 0; left: 0;}
.tab-item.active span:before {transform: scale(1.0); opacity: 0; transition: all 0.6s ease;}

/* Show active tab content */
.tab-content.active {display: block;}

/*.tabs, .nav.nav-tabs {display: flex;}
.tab-item, .nav-link {cursor: pointer; background: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; outline: 0px; max-width: 22.5rem; min-width: 5.625rem; padding: 0.5rem; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: var(--palette-disabled); margin: 0; font-size: 0.875rem; position: relative; color: var(--palette-tertiary);}
.tab-item.active, .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color: var(--palette-secondary-action) !important; border-bottom-color: var(--palette-secondary-action) !important; border-color: transparent;}
.tab-item:focus, .nav-tabs .nav-item.show .nav-link {backgound: var(--palette-secondary-action); transition: background 0.5s ease-in-out;}
.tab-content {display: none; margin: 0px; font-weight: 400; font-size: 0.875rem; line-height: 1.42857; letter-spacing: 0.24px; padding: 0.25rem;}

.tab-item span:before, .nav-link span:before {content: ""; width: 100%; height: 100%; background: var(--palette-secondary-action); display: block; transform: scale(0); opacity: 1; transition-delay: 0.2s; position: absolute; top: 0; left: 0;}
.tab-item.active span:before, .nav-link:active span:before {transform: scale(2.0); opacity: 0; transition: all 0.6s ease;}*/

.nav-tabs {border: 0;}
li.nav-item {background: var(--palette-secondary-surface);}
.nav-tabs .nav-link {cursor: pointer; background: #f0f0f0; display: inline-flex; align-items: end; justify-content: center; background-color: transparent; outline: 0px; max-width: 22.5rem; min-width: 5.625rem; padding: 0.5rem; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: var(--palette-disabled); margin: 0; font-size: 0.875rem; position: relative; font-weight: 400;}
@media (min-width: 1280px) {
	.nav-tabs .nav-link {min-width: 10rem;}
}
.nav-tabs .nav-link img {width: 1.25rem; height: auto;}
.nav-tabs .nav-link.active img {color: var(--palette-secondary-action);}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color: var(--palette-secondary-action); border-bottom-color: var(--palette-secondary-action); background: none; border-width: 0px 0px 1px; border-bottom-style: solid;}

.nav-tabs .nav-item.show .nav-link span:before {content: ""; width: 100%; height: 100%; background: var(--palette-secondary-action); display: block; transform: scale(0); opacity: 1; transition-delay: 0.2s; position: absolute; top: 0; left: 0;}
.nav-tabs .nav-item.show .nav-link.active span:before {transform: scale(1.0); opacity: 0; transition: all 0.6s ease;}

.nav-tabs .nav-item .nav-link .icon {width: 1.5rem; height: 1.5rem; margin: 0 0.2rem 0 0;}
.nav-tabs .nav-item .nav-link .icon img {width: 100%; height: auto;}