/*
Author: Alberto Lussana - BSCI
Creation Date: 2/oct/2024
Last Update Date: 17/oct/2024
Version: 1.3
Description: Custom CSS for form styling, including custom input fields, button styles, and responsive design adjustments.
*/
/* 
Set base font and styling for the body. 
- Arial as the font-family, 
- 1.125rem font size for readability, 
- Font weight set to 400 (normal), 
- Full width of the body set to 100% 
*/
body {
  font-family: Arial, sans-serif; /* Set font to Arial */
  font-size: 1.125rem; /* Base font size */
  font-weight: 400; /* Normal font weight */
  width: 100%; /* Full width for body */
}
/* 
Style for h2 elements. 
- Bold, 
- Larger font size for section headings 
*/
h2 {
  font-size: 2.181rem; /* Larger font size for headings */
  font-weight: bold; /* Bold heading */
}
/* 
Styling for text elements with the .cmp-text class. 
- Small font size for less prominent text 
*/
.cmp-text {
  font-size: 0.75rem; /* Small text */
}
/* 
Custom styling for input fields with the .custom-input class.
- 100% width for the input, 
- 40px height, 
- Gray border (#666), 
- Padding inside the input for spacing, 
- No rounded corners, 
- No shadow, 
- Base font size 1.125rem, 
- Black text color 
*/
.custom-input {
  width: 100%; /* Full width input */
  height: 40px; /* Input height */
  border: 1px solid #666; /* Gray border */
  padding: 8px; /* Padding inside the input */
  font-size: 16px; /* Font size */
  border-radius: 0; /* Remove rounded corners */
  box-shadow: none; /* No shadow */
  color: #000000; /* Black text color */
  font-size: 1.125rem; /* Set consistent font size */
}
/* 
Styling for the input when it's focused (active). 
- Change border and outline color to blue (#0153cc), 
- Outline with offset to separate from the input box 
*/
.custom-input:focus {
  border-color: #0153cc; /* Blue border on focus */
  outline: 2px solid #0153cc; /* Blue outline on focus */
  box-shadow: none; /* Remove any shadow */
  outline-offset: 2px; /* Offset the outline to separate it from the input box */
}
/* 
Styling for the input when it's invalid (e.g., form validation failed). 
- Red border and outline (#b31921), 
- Outline with offset to separate from the input box 
*/
.custom-input.is-invalid {
  border-color: #b31921; /* Red border for invalid input */
  outline: 2px solid #b31921; /* Red outline for invalid input */
  box-shadow: none; /* No shadow */
  outline-offset: 2px; /* Offset the outline */
}
/* 
Styling for form groups. 
- Adds spacing between form elements by using margin-bottom 
*/
.form-group {
  margin-bottom: 20px; /* Space between form elements */
}
/* 
Styling for buttons with the .btn-assertive class. 
- White bold text, 
- Blue background (#0153cc), 
- No border radius (square corners), 
- Font size set to 1.125rem for consistency 
*/
.btn-assertive {
  color: #ffffff; /* White text */
  font-weight: bold; /* Bold text */
  font-size: 1.125rem; /* Consistent font size */
  background-color: #0153cc; /* Blue background */
  border-radius: 0px; /* No rounded corners */
  padding: 10px; /* Padding */
}
/* 
Hover effect for .btn-assertive buttons. 
- Darker blue background (#012965), 
- Ensure text remains white on hover 
*/
.btn-assertive:hover {
  background-color: #012965; /* Darker blue on hover */
  color: #ffffff; /* White text */
}
#successMessage, #errorMessage, #alreadySubmittedMessage {
  display: none; /* Hide messages by default */
}
.btn-assertive[disabled] {
  color: #666; /* White text */
  font-weight: 400; /* Bold text */
  font-size: 1.125rem; /* Consistent font size */
  background-color: #f2f2f2; /* Blue background */
  border-radius: 0px; /* No rounded corners */
  padding: 10px; /* Padding */
  cursor: not-allowed;
  border-color: #ccc;
  border: solid;
  border-width: 2px;
}
/* Initially hide the section */
#conditional-section {
  display: none;
}
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  height: 40px; /* Input height */
  padding: 8px; /* Padding inside the input */
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 16px; /* Font size */
  font-weight: 400;
  line-height: 1.5;
  color: #000000; /* Black text color */
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: 1px solid #666; /* Gray border */
  border-radius: 0;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none; /* No shadow */
}
.form-select:focus {
  border-color: #0153cc; /* Blue border on focus */
  outline: 2px solid #0153cc; /* Blue outline on focus */
  box-shadow: none; /* Remove any shadow */
  outline-offset: 2px; /* Offset the outline to separate it from the input box */
}
.select-items {
  appearance: none;
  padding: 8px;
  font-size: 16px; /* Font size */
  font-weight: 400;
  line-height: 1.5;
  color: #000000; /* Black text color */
  border: 1px solid #666;
  border-radius: 0;
  box-shadow: none; /* No shadow */
  cursor: pointer;
}

.cmp-container {
    width: 100%;
    padding: 0;
    margin: 0;
}

.teaser.cmp-teaser--hero.cmp-teaser--hero-center {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(36deg, #000000, #012965);
}

.cmp-teaser {
    position: relative;
    z-index: 1;
}

.cmp-teaser__content {
    padding: 2rem 0;
    color: #ffffff;
}

.cmp-teaser__description p {
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
}

h3 {
  font-size: 1.5rem; /* Larger font size for headings */
  font-weight: bold; /* Bold heading */
}
 
 .divided {
  border-top: solid;
  border-top-color: #cccccc;
  border-top-width: 1px;
 }