.zapBox-header{
	font-family:Inter Merriweather sans-serif;
	font-size:14px; 
	background-color: #F47F57; 
	color:#ffffff; 
	padding:5px;
	border-radius: 6px 6px 0px 0px;
}

.zapBox-content{
	padding: 0.5rem;
    	vertical-align: top;
	background-color: #FFFFFF;
	font-family:Inter Merriweather sans-serif;
	font-size:11px; 
	color:#555555; 
	padding:5px;
	border-top:none;
	height:350px;
	border-radius: 0px 0px 6px 6px;
	border: 1px solid #f47f57;

}

.zapForm-Container{
	display:flex;
	width:100%;
        flex-direction: column;
	gap: 2em;
}

.zapForm-Group{
	display:flex; 
	flex-direction: row; 
	justify-content: flex-start;
        margin: 3px;
	position: relative; /* To give the absolute positioning of the divider line be positioned relative to it */
}

/* Apply divider lines between form elements with the class specifying a divider is required */
.zapForm-Group.with-divider:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px; /* Adjust to your preference */
  left: 0;
  width: 100%;
  border-bottom: 1px solid #ccc; /* Divider line */
}

.zapForm-input-container{
	display:flex;
	flex-flow: column;
	flex: 1;
}

.zapForm-input{
	font-family: "Nunito Sans", sans-serif;
	color: #101828;
	box-sizing: border-box;
    	height: 2.75rem;
   	border: 1px solid #909090;
    	border-radius: 6px;
    	background-color: #FFFFFF;
    	margin-bottom: 5px;
    	margin-right: 10px; 
    	line-height: 24px;
    	font-size: 16px;
    	padding: 10px 14px;
	flex: 0 0 auto;
}

.zapForm-input::placeholder{
	color:var(--tertiary-text-color);
}

select.zapForm-input:not(.table-cell-drop-list){
	color:var(--tertiary-text-color);
}

.zapForm-input-container .fa-eye,
.zapForm-input-container .fa-eye-slash{
  position: absolute;
  right: 10px;
  cursor: pointer;
  z-index: 1;
  margin-top: 1rem;
  padding-right: 0.25rem;
}

/* Adjust margin-right for .zapForm-input inside .table-cell */
.table-cell .zapForm-input {
    margin-right: 0; /* Override margin-right to 0 for this specific case */
}

.zapForm-label{
    font-family:"Nunito Sans", sans-serif;
    font-size: 14px;
    /* height:50px;*/
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0px;
    box-sizing: border-box;
    flex: 1; /* Grow and shrink equally */
    min-width: 200px; /* Minimum width */
    max-width: 280px; /* Maximum width */
    border-right: 5px solid #FFFFFF;
}


.zapForm-buttonContainer{
	flex: 0;
}

.zapForm-button {
    font-family: "Nunito Sans", sans-serif;
    background-color: var(--button-secondary-bg-on-light);
    border: 0;
    color: var(--button-secondary-text-on-light);
    font-size: 14px;
    width: 10.571rem;
    height: 3.142rem;
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    padding: 0.714em;
    border-radius: 8px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center; /* Aligns text vertically */
    justify-content: center; /* Aligns text horizontally */
    float: right; /* Positions button to the right */
    transition: all 0.3s ease-in-out;
}

.error-message{

   color: var(--primary-color);

}

/* Floating Label Styles (Scoped to .floating-label-form) */
.floating-label-form .zapForm-input-container {
  position: relative; /* This makes sure the label is positioned relative to the container */
  display: flex;
  flex-direction: column; /* Stack the label and input */
  width: 100%;
}

/* Label styling */
.floating-label-form .zapForm-label {
  position: absolute;
  top: 1rem;
  left: 14px;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  color: var(--tertiary-text-color);
  pointer-events: none; /* Allow interaction with the input */
  transform: translateY(-50%); /* Center label vertically */
  transition: all 0.2s ease-in-out; /* Smooth transition */
  width: 100%; /* Ensure the label stretches across the input */
}

/* When input is focused or filled, move label above input */
.floating-label-form .zapForm-input:focus + .zapForm-label,
.floating-label-form .zapForm-input:not(:placeholder-shown) + .zapForm-label {
  top: -10px;
  font-size: 0.75rem;
}

.floating-label-form textarea{
	height:10rem;
}


/* Button style when hovered */
.zapForm-button:hover {
    background-color: var(--button-secondary-hover-bg-on-light); /* Change background color */
}

/* Styling for checkboxes */

.zapForm-check-label{
  max-width: max-content;
}
.zapForm-Group .checkbox-label {
  display: flex;
  align-items: center;
}

.zapForm-Group.zapForm-Checkbox-Group {
    display: inline-flex;
    gap: 0.5rem;
    flex-flow: column;
    margin-left: 0;
    margin-right: 1rem;
}

.zapForm-Group .checkbox-input {
  margin-left: 0; /* Reset any default margin */
  margin-right: 1rem; /* Space between checkbox and text */
}

/* Hide the default checkbox */
input[type="checkbox"] {
    appearance: none; /* Hide the default appearance */
    -webkit-appearance: none; /* For older versions of Safari */
    -moz-appearance: none; /* For older versions of Firefox */
    background-color: var(--secondary-color); /* Set the background color */
    width: 20px; /* Set the width */
    height: 20px; /* Set the height */
    border-radius: 4px; /* Add some border radius for rounded corners */
    outline: none; /* Remove the default focus outline */
    cursor: pointer; /* Change the cursor on hover */
}

/* Custom check mark */
input[type="checkbox"]::before {
    width: 10px; 
    height: 10px; 
    position: relative;
    bottom: 4px; 
    left: 5px; 
}

/* Style the check mark when the checkbox is checked */
input[type="checkbox"]:checked::before {
    display: inline-block;
    content: '\2713'; /* Unicode check mark character */
    font-size: 14px; /* Adjust the size of the check mark */
    color: #FFFFFF; /* Color of the check mark */
}

/* Style the check mark when the checkbox is checked */
input[type="checkbox"]:hover:not(.no-hover)::before {
    display: inline-block;
    content: '\2713'; /* Unicode check mark character */
    font-size: 14px; /* Adjust the size of the check mark */
    color: #FFFFFF; /* Color of the check mark */
}

/* Style the checkbox when it's disabled */
input[type="checkbox"]:disabled {
    cursor: not-allowed; /* Change the cursor for disabled checkboxes */
}

/* Style the checkbox when it's auto checked in password validation */
.checkbox-input.no-hover.checked::before {
    display: inline-block;
    content: '\2713'; /* Unicode check mark character */
    font-size: 14px; /* Adjust the size of the check mark */
    color: #FFFFFF; /* Color of the check mark */
}

.zappopup{
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.zappopup .zappopuptext {
  visibility: visible;
  /*width: 160px;*/
  /*background-color: #F47F57;*/
  color: #FFFF;
  text-align: left;
  border-radius: 6px;
  padding: 8px 0;
  /*position: absolute;*/
  /*z-index: 1;*/
  /* top: 60%;*/
  /*margin-left: -835px;*/
  /*padding-left:5px;*/
}

.zappopup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}