/*.wsf-form {
border: 2px solid #0c343d;
border-radius: 5px !important;
padding: 20px !important;
padding-bottom: 20px !important;
background-color: #0c343d !important;
background: linear-gradient(315deg, #0b2f37, #0b2f37);
/*box-shadow: -5px -5px 7px,
5px 5px 7px;
background-image:url()*/
/*box-shadow: 0 8px 8px -4px rgba(0,32,42,0.29);
}*/

/* From https://css.glass */
/*.wsf-form-overlay{
	background: #0c343d;
	border-radius: 5px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 20px !important;
	padding-bottom: 20px !important;
}*/


/* From https://css.glass original code*/
/*.wsf-form-overlay{
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 30px !important;
padding-bottom: 50px !important;
}*/

.wsf-form-overlay {
  position: relative;
  z-index: 0;
  background: rgba(12, 52, 61, 0.6);
  border-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 20px !important;
}

.wsf-form-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: inherit;
}



.wsf-form-section-user {
	border-radius: 5px;
	padding: 30px;
	padding-bottom: 50px;
	background-color: none !important;
	/*background: linear-gradient(315deg, #0b2f37, #0b2f37);*/
	box-shadow: -5px -5px 7px, 5px 5px 7px;
	color:#0c343d;
}


.wsf-form-section{
	border: 2px solid #10354a;
	border-radius: 5px;
	padding: 50px;
	padding-bottom: 50px;
	background-color: #10354a !important;
	background: linear-gradient(315deg, #10354a, #10354a);
	box-shadow: -5px -5px 7px,
		5px 5px 7px;
}

.wsf-form-section2{
	border: 2px solid #10354a;
	border-radius: 5px;
	padding: 30px;
	padding-bottom: 50px;
	background: linear-gradient(#fff2, transparent);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(10px);
}

.wsf-form-section-label{
	text-align:center;
	border: 2px solid #10354a;
	border-radius: 5px;
	padding: 30px;
	padding-bottom: 50px;
	background: linear-gradient(#fff2, transparent);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(10px);
}

.wsf-form-button-custom{

}


.wsf-form2 {
	border: 2px solid #0c343d;
	border-radius: 5px;

	padding-bottom: 50px;
	background-color: #0c343d !important;
	background: linear-gradient(315deg, #0b2f37, #0b2f37);
	box-shadow: -5px -5px 7px,
		5px 5px 7px;
}

.wsf-form-section-red{
	color:#FFFFFF;
	text-align: center;
	font-size: 16px;
	border-radius: 5px;
	padding: 50px;
	padding-bottom: 50px;
	z-index:10;
	border: 1px solid rgba(255,255,255,0.5);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px );
	box-shadow:2px 2px 0px 2px rgba(0,0,0,0.8);
	background:linear-gradient(#FF0000,#FFFFFF);
}

.wsf-form-section-white{
	text-align:justify;
	border: 2px solid #10354a;
	border-radius: 5px;
	padding-left: 60px!important;
	padding-right: 60px !important;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
	background-color: #10354A !important;
	background: linear-gradient(315deg, #FFF8DC, #FFF8DC);
	box-shadow: -5px -5px 7px,
		5px 5px 7px;
}

.wsf-form-section-white{
	text-align:justify;
	border: 2px solid #10354a;
	border-radius: 5px;
	padding-left: 60px!important;
	padding-right: 60px !important;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
	background-color: #10354A !important;
	background: linear-gradient(315deg, #FFFFFF, #FFFFFF);
	box-shadow: -5px -5px 7px,
		5px 5px 7px;
}

.wsf-form-section-plain{
	text-align:center;
	background-color: white !important;
}


.wsf-form-section-glass{
	color:#FFFFFF;
	text-align: center;
	font-size: 16px;
	border-radius: 5px;
	padding: 50px;
	padding-bottom: 50px;
	z-index:10;
	border: 1px solid rgba(255,255,255,0.5);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px );
	box-shadow:2px 2px 0px 2px rgba(0,0,0,0.8);
	background:linear-gradient(#0093C0,#014276);

}

.wsf-form-section-glass2{
	color:#FFFFFF;
	font-size: 16px;
	border-radius: 5px;
	padding: 50px;
	padding-bottom: 50px;
	z-index:10;
	border: 1px solid rgba(255,255,255,0.5);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px );
	box-shadow:2px 2px 0px 2px rgba(0,0,0,0.8);
	background:linear-gradient(#0093C0,#014276);

}

.wsf-form-text-align{
	text-align: left;	
}

/*Login*/
.wsf-form-section-login{

	border: 1px solid #607D8B;
	border-radius: 5px;
	padding-bottom: 50px;
	background: linear-gradient(#fff2, #607D8B);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(10px);
	align-items: center;
	justify-content: center;
	width: 60vh;
	padding:50px;
	background: #607D8B !important;
	overflow: hidden;
}


.wsf-form-glass2{
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur( 10px );
	border-radius: 5px;
	border: 0.5px solid rgba(255,255,255,0.57);
}


/*Glass Morphine*/
.wsf-form-glass{
	background: rgba( 255, 255, 255, 0.01);
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, );
	backdrop-filter: blur( 5px );
	-webkit-backdrop-filter: blur( 5px );
	border-radius: 5px;
	border: 0.5px solid rgba( 255, 255, 255, 0.18 );

	background-image: url()	
}

/* Form Titles */
.wsf-form h1, .wsf-form h2, .wsf-form h3, .wsf-form h4, .wsf-form h5, .wsf-form h6 {
	text-align: center;
	color: #ff9800 !important;
}

.wsf-form h2{
	text-align: center;
	color: #FF980000 !important;
}

.wsf-form h4, .wsf-form h5, .wsf-form h6 {
	text-align: center;
	color: #ff9800 !important;
	font-weight:bolder !important;
}


/*Tab label on sections*/

.wsf-form h3 {
	display: table;
	margin: 0px auto 0px auto;
	padding: 5px;
	font-size: 20px;
	background-color: red !important;
	color: #ffffff !important;
	border-radius: 2px !important;
}


.wsf-form h1 {
	display: table;
	margin: 0px auto 0px auto;
	padding: 5px;
	font-size: 30px;
	background-color: red !important;
	color: #ffffff !important;
	border-radius: 5px !important;
}

/*This center the radio button on the page*/
.wsf-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
}

/*Control the position of the Checkbox for copy fields*/
.wsf-checkbox-margin{   
	margin: 10px !important;
}

.wsf-checkbox-margin2{   
	margin: 30px !important;
}

/*.wsf-form .wsf-section > legend, .wsf-fieldset > legend {
font-size: 15px;
font-weight: 900;
text-transform: uppercase !important;
text-align: center;
border-bottom: 3px solid !important;
border-radius: 2px;
padding: 3px;
width:400px;
height:50px;
}*/

/*Switch on*/
.wsf-form input[type=checkbox].wsf-field.wsf-switch:checked + label.wsf-label:after, 
.wsf-form input[type=radio].wsf-field.wsf-switch:checked + label.wsf-label:after {
	content:"ON" !important;
	font-size: 9px;
	text-align: center;
	font-weight: bold !important;
	align-content: center !important;
}


/*Switch off*/
.wsf-form input[type=checkbox].wsf-field.wsf-switch + label.wsf-label:after,
.wsf-form input[type=radio].wsf-field.wsf-switch + label.wsf-label:after {
	font-size: 8px;
	content: "OFF" !important;
	text-align: center !important;
	font-weight: bold !important;
	align-content: center !important;
}

/* Mobile-first: stack radio switch labels vertically */
.wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label {
  position: static !important;
  display: block !important;
  margin-bottom: 8px !important; /* space between switches */
}

/* Desktop and larger: fix position if desired */
@media (min-width: 1024px) {
  .wsf-form input[type="radio"].wsf-field.wsf-switch + label.wsf-label {
    position: fixed !important;
    margin-bottom: 0 !important;
  }
}




/*Number field control to center number*/
.wsf-form input[type=number].wsf-field {
	height: 39px !important;
	text-align:center !important;
}

/*Icon Prefex / sufix color control*/
.wsf-form .wsf-input-group-prepend {
	width: 40px; 
}


/* Optional: Styling for the select element (if applicable) */
.wsf-form .wsf-input-group select {
	height: 41px;  /* Match the height of the input */
	width: 100%;  /* Make sure it fits in the container */
	padding: 5px;
}


/* Set required field border color to red for invalid fields */

/* Style for required and invalid input fields (text, email, number, tel, file) */
.wsf-form input[type="text"].wsf-field:required:invalid,
.wsf-form input[type="email"].wsf-field:required:invalid,
.wsf-form input[type="number"].wsf-field:required:invalid,
.wsf-form input[type="tel"].wsf-field:required:invalid,
.wsf-form input[type="file"].wsf-field:required:invalid {
	border: 1px solid red !important;
}

/* Style for required and unchecked checkboxes, radio buttons, and switches */
.wsf-form input[type="checkbox"].wsf-field:required:not(:checked),
.wsf-form input[type="radio"].wsf-field:required:not(:checked),
.wsf-form input[type="checkbox"].switch:required:not(:checked) {
	border: 1px solid red !important;
}

/* Style for required select fields (including invalid and empty/default values) */
.wsf-form select.wsf-field:required:invalid,
.wsf-form select.wsf-field:required option[value=""]:checked,
.wsf-form select.wsf-field:required option[value="Select..."]:not(:checked) {
	border: 1px solid red !important;
}

/* Style for required Select2 fields */
.wsf-form .select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid red !important;
}

.wsf-form .select2-search--dropdown .select2-search__field {
	border: 1px solid red !important;
}

/*fixes for Select2 field height*/

.select2-container {
	box-sizing: border-box;
	display: inline-block !important;
	margin: 0;
	position: relative;
	vertical-align: middle;
}


select.wsf-field ~ .select2-container .select2-search--inline .select2-search__field {
	color: #000000;
	font-family: inherit;
	font-size: 16px;
	font-weight: inherit;
	height: auto;
	line-height: 1.4;
	margin-top: 0;
}

.select2-container--default .select2-search--inline .select2-search__field {
	background: transparent;
	border: none;
	outline: 0;
	box-shadow: none;
	-webkit-appearance: textfield;
}


/*Media queries Section*/

/* Very Small Screens (max-width: 480px) - Further adjustments for smaller devices */
/* Media query for devices with screen width 320px */
@media (max-width: 320px) {
	.wsf-form {
		padding: 8px !important;
		padding-bottom: 16px !important;
		border-radius: 4px !important;
	}

	.wsf-form-overlay {
		padding: 8px !important;
		padding-bottom: 16px !important;
	}
}

/* Media query for devices with screen width 480px */
@media (max-width: 480px) {
	.wsf-form {
		padding: 12px !important;
		padding-bottom: 18px !important;
		border-radius: 6px !important;
	}

	.wsf-form-overlay {
		padding: 12px !important;
		padding-bottom: 18px !important;
	}
}

/*Switches*/
@media screen and (max-width: 768px) {
	.wsf-form input[type=radio].wsf-field + label.wsf-label {
		transform: scale(1);
		line-height:2.5;
	}
}


@media screen and (max-width: 600px) {
	.wsf-form input[type=radio].wsf-field + label.wsf-label{

		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column;
	}
}

@media screen and (max-width: 592px) {
	.wsf-form input[type=radio].wsf-field + label.wsf-label{

		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column;
	}
}


@media screen and (max-width: 992px) {
	.wsf-form input[type=radio].wsf-field + label.wsf-label{

		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: column;
	}
}

/*Extra Small screens*/
@media screen and (max-width: 768px) {
	.wsf-form {
		border: 2px solid #0c343d;
		border-radius: 5px;
		padding: 10px;	
	}
}

/*Field Legends*/

.wsf-form .wsf-section > legend,
.wsf-fieldset > legend {
	color: #ddd !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	text-align: center;
	background-color: red;
	border-bottom: 3px solid #ddd !important;
	border-radius: 2px;
	padding: 3px;
	width: 100%; /* Makes the element take up full width of its container */
	max-width: 100%; /* Prevents overflow */
	box-sizing: border-box; /* Includes padding in the width */
	line-height: 2.5;
}


/*Media Screen Control for tabs*/

@media screen and (max-width: 768px) {
	.wsf-group-tabs.wsf-steps {
		display:none !important
	}
}


/* Global styles for Sunday and Saturday background colors */
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td:nth-child(1),
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td:nth-child(7) {
	background-color: #4CAF5000 !important; /* Light background color for weekend days */
	border: 0.5px solid #D0D0D79B !important;
}

/* Sunday (first column) */
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td:nth-child(1) {
	color: #03A9F4 !important; /* Blue color for Sunday */
}

/* Saturday (seventh column) */
.wsf-datetime-picker .xdsoft_datepicker .xdsoft_calendar td:nth-child(7) {
	color: #FF0000 !important; /* Red color for Saturday */
}


/*Arrow Position Css| To be deleted if corrected by WS Form*/
/*.wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2])+span.wsf-select-arrow {
top: 16px !important;}*/


/* Apply styles to all form elements inside .wsf-invalid-feedback */

.wsf-form .wsf-invalid-feedback .p{
	display: inline-block !important;         
	background: red !important;         
	float:right !important;
	color:white !important;
	border-radius:2px !important;
	text-align:center !important;
}


/*<p style="background-color:red; color: white !important; display: inline-block !important; border-radius: 3px; text-align:center; float: right;">&nbsp This is Required &nbsp</p>*/
/*.wsf-form-card {
color: #fff;
position: absolute;
left: 95px;
bottom: 66px;
width: 627px;
padding-top: 56px;
padding-left: 48px;
padding-right: 48px;
padding-bottom: 56px;
background: rgba(255, 255, 255, .16);
border: 2px solid rgba(255, 255, 255, .08);
backdrop-filter: blur(20px);
border-radius: 24px;
}*/

.wsf-form-card {
	color: #000;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: Poppins, sans-serif;
	background: rgba(255, 255, 255, .16);
	border: 2px solid rgba(255, 255, 255, .08);
	backdrop-filter: blur(20px);
	border-radius: 10px;
}

.wsf-middle-checkbox {
	text-align-last: center;
}


.wsf-form input[type=radio].wsf-field.wsf-switch + label.wsf-label {
	position: fixed !important;
	margin-bottom: 12px !important; /* adds vertical spacing */
	display: block !important; 
}





/* 🔒 Lock WS Form button in place to prevent shifting */
/*.wsf-button,
button.wsf-button,
.wsf-field input[type="button"],
.wsf-field button {
position: relative !important; 
margin-top: 20px !important;   

}*/

/* --- Reusable WS Form Button Fix --- */
.wsf-btn-stable {
	position: relative !important;
	margin-top: 25px !important; 
	transition: background-color 0.2s ease, filter 0.2s ease !important;
	transform: none !important;
	padding:8px !important;
}

/* Optional hover/click feedback (no movement) */
.wsf-btn-stable:hover {
	filter: brightness(1.05);
	color:white !important;
	background: red !important;
	border-bottom-color: rgb(255,255,255);
}

.wsf-btn-stable:active {
	filter: brightness(0.95);
	transform: none !important;
}

/* 🔒 Gray out all readonly fields form-wide */
.wsf-form input[readonly],
.wsf-form textarea[readonly],
.wsf-form select[disabled] {
	background-color: #f5f5f5 !important;
	color: #777 !important;
	cursor: not-allowed !important;
	border-color: #ccc !important;
}

/* Optional: prevent focus outlines on readonly fields */
.wsf-form input[readonly]:focus,
.wsf-form textarea[readonly]:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Optional: reduce pointer events on readonly fields */
.wsf-form input[readonly],
.wsf-form textarea[readonly],
.wsf-form select[disabled] {
	pointer-events: none;
}

/* Tooltip container style */
.readonly-tooltip {
	position: absolute;
	background-color: #333;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 9999;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}

/* Arrow */
.readonly-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 10px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}