.desc {
   font-size:18px;   
   margin-bottom:0.2rem;
}
.p {margin-bottom:1rem;}
.pHalf {margin-bottom:0.5rem;}
.pUp {margin-top:1rem;}
.p2Up {margin-top:2rem;}
.p2 {margin-bottom:2rem !important;}
.center {text-align: center;}
.right {text-align: right;}
.top {vertical-align: top !important;}
.topTd {vertical-align: top !important; padding-top:1rem !important}
input[type=text],
input[type=email],
input[type=number],
textarea
{
   border: 1px solid #ededed;
   background-color: #f3f3f3;
   padding: 0.5rem;
   font-size: 18px;
}
textarea {
   width: 100%;
   overflow: hidden;
   resize: none;
}

a {
   text-decoration: underline;
}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.hide {display: none;}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input[type="checkbox"], 
input[type="checkbox"]:disabled, 
input[type="radio"], 
input[type="radio"]:disabled {
    accent-color: gray;
}

label {
   display: flex;
   gap: 0.5rem;
   align-items: center;
}


button {
   display: inline-block;
   background-color: #cdcdcd; /* Initial gray color */
   color: #353535; /* Text color */
   text-align: center;
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
 }
      
   button.primary:hover {
      background-color: #092c4b; /* Slightly darker blue on hover */
   }

   button.primary:focus {
      box-shadow: 0 0 0 3px rgba(12, 58, 98, 0.5); /* Focus ring */
   }

   button.primary:active {
      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3); /* Smaller shadow to simulate depth */
      background-color: #071f34; /* Darker blue for pressed effect */
   }
   
   
button.primary {
   background-color: #0c3a62;
   color: #fff;
   box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
 }
   button.primary:hover {
      background-color: #092c4b; /* Slightly darker blue on hover */
   }
   
   button.primary:focus {
      box-shadow: 0 0 0 3px rgba(12, 58, 98, 0.5); /* Focus ring */
   }
   
   button.primary:active {
      box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3); /* Smaller shadow to simulate depth */
      background-color: #071f34; /* Darker blue for pressed effect */
   }


 /* Disabled State */
 button:disabled,
 button:disabled:hover,
 button:disabled:focus,
 button:disabled:active
 {
   background-color: #e9e9e9;
   color: #aaa;
   cursor: not-allowed;
   box-shadow: none;
 }


#topLogo {
   margin:2rem;   
   text-align: center;
}
   #topLogo > img {
      height:3rem;
   }
 
 #spinnerWrapper {
   position: fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index: 999;
   background-color:#bfbfbf61;   
 }
   .spinner {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border: 5px solid rgba(0, 0, 0, 0.1);
      border-top: 5px solid #007bff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 1000;
   }
   
 .hidden {
   display: none;
 }


/* Base style for the checkbox container */
.custom-checkbox {
   display: flex;
   align-items: center;
   cursor: pointer;
   font-size: 18px;
   user-select: none;
}

/* Hide the default checkbox */
.custom-checkbox input[type="checkbox"] {
   display: none;
}

/* Style for the custom checkbox */
.custom-checkbox span {
   width: 30px; /* Increased width for larger checkmark */
   height: 30px; /* Increased height for larger checkmark */
   display: inline-block;
   border: 2px solid #cdcdcd;
   border-radius: 4px; /* Slightly rounded corners */
   background-color: white;
   position: relative;
   transition: background-color 0.3s, border-color 0.3s;
}

/* Style when the checkbox is checked */
.custom-checkbox input[type="checkbox"]:checked + span {
   background-color: var(--color-darkblue);
   border-color: var(--color-darkblue);
}

/* Add a larger checkmark for checked state */
.custom-checkbox input[type="checkbox"]:checked + span::after {
   content: '';
   width: 8px; /* Adjusted size for the checkmark */
   height: 14px;
   border: solid white;
   border-width: 3px 0 0 3px; /* Flip the lines for a mirrored effect */
   position: absolute;
   top: 45%; /* Center vertically */
   left: 50%; /* Center horizontally */
   transform: translate(-50%, -50%) rotate(220deg); /* Adjust rotation for the mirrored checkmark */
   transition: transform 0.3s;
}

/* Add hover effect for better user experience */
.custom-checkbox span:hover {
   border-color: #0056b3;
}
.wDisclaimer {
   display: flex;
   gap: 1rem;
   align-items: center;
}
label.custom-checkbox  {
   margin-bottom: 0 !important;
}


 
 @keyframes spin {
   0% {
     transform: translate(-50%, -50%) rotate(0deg);
   }
   100% {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }
 

.applyFormPrestep {
   background-color: white;
   padding: 4rem;
   box-shadow:rgba(0, 0, 0, 0.05) 4px 4px 18px;
   margin:2rem auto 0 auto;
   max-width: 50rem;
}

   .applyFormPrestep > form > div.firstGroup > div:not(:last-child) {
      margin-bottom:1rem;
   }
   .firstGroup input[type=text],
   .firstGroup input[type=email],
   .firstGroup input[type=number]
   {
      max-width: 20rem;
   }
   .applyFormPrestep input[type=text],
   .applyFormPrestep input[type=email],
   .applyFormPrestep input[type=number]
   {
      width:100%;
   }

.acceptBox {
   display:flex;
   gap: 0.2rem;
   margin-bottom:2rem;
}
   .acceptBox > div:first-child{
      padding:0.2rem;
   }

#feedback {
   color:red;
   margin-top:2rem;
   display: none;
   text-align: center;
}

#formSentValidationEmail input {
   font-size: 34px;
   max-width: 12rem;
   margin: 0 auto;
}

@media only screen and (max-width: 870px) {
   .applyFormPrestep {
      padding: 2rem;
      max-width: unset;
      width:100%;
   }
}