:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/* Styles for the entire content container */
.content-container {
  width: 100%;
  /* Full width */
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
  align-items: center;
  /* Center the children */
}

/* Styles for the image container */
.image-container {
  width: 100%;
  /* Full width */
  display: block;
  position: relative;
  /* Set as a positioned container */
}

.background-image {
  width: 100%;
  /* Full width */
  height: auto;
  /* Maintain aspect ratio */
  display: block;
}

/* Styles for the form container */
.form-container {
  max-width: 600px; /* Reasonable maximum width for the form */
  width: 100%; /* Full width on smaller screens */
  padding: 20px; /* Add some padding */
  box-sizing: border-box; /* Include padding in width calculation */
  background-color: #EEF8E9; /* Set background color */
  border-radius: 10px; /* Beveled corners with a 10px radius */
  margin-left: auto; /* Center horizontally */
  margin-right: auto; /* Center horizontally */
}

/* Styles for larger screens - form aligned with top of image */
@media (min-width: 768px) {
  .form-container {
    position: absolute; /* Absolute positioning */
    top: 0; /* Align with top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for exact horizontal centering */
    z-index: 10; /* Ensure it's above the background image */
  }
}

/* Styles for narrow desktop screens */
@media (max-width: 767px) {
  .content-container {
    flex-direction: column; /* Stack image and form vertically */
  }

  .form-container {
    position: static; /* Reset positioning */
    margin-top: 20px; /* Add some space above the form */
    transform: none; /* Remove transform */
  }
}


.statement-box {
  border: 2px solid #000;
  /* Adjust the border color and width as needed */
  padding: 20px;
  /* Adjust the padding as needed */
  margin: 20px 0;
  /* Adjust the margin as needed */
  border-radius: 10px;
  /* Optional: for rounded corners */
  /* Add any additional styling as needed */
}

.statements-remaining {
  text-align: right;
  font-style: italic;
}

.statements-intro {
  text-align: left;
}

.statement-container .statement-text {
  text-align: left;
}

button.statementButton {
  background-color: transparent;
  /* Set to transparent or any desired color */
  /* Add any other styles you want to apply to the button */
}


.card {
  padding: 2em;
}

/*
.read-the-docs {
  color: #888;
} */
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.statement-box {
  border: 2px solid #000;
  /* Adjust the border color and width as needed */
  padding: 20px;
  /* Adjust the padding as needed */
  margin: 20px 0;
  /* Adjust the margin as needed */
  border-radius: 10px;
  /* Optional: for rounded corners */
  /* Add any additional styling as needed */
}

.statements-remaining {
  text-align: right;
  font-style: italic;
}

.statements-intro {
  text-align: left;
}

.statement-container .statement-text {
  text-align: left;
}

button.statementButton {
  background-color: transparent;
  /* Set to transparent or any desired color */
  /* Add any other styles you want to apply to the button */
}

.card {
  padding: 2em;
}

.sv_main {
    text-align: left !important;
}

.preview-item.buttons .button-wrapper {
    display: flex;
    width: 100%;
    /* Ensure the wrapper takes full width of its parent */
    justify-content: space-between;
    /* Aligns children with space between them */
}

.button {
    flex-basis: 33%;
    /* Divide the flex container into three equal parts */
    text-align: center;
    /* Center the text inside the button for aesthetics */
}

/* Optionally, you can adjust the width of the buttons if they are too wide or narrow */
.button {
    width: 90%;
    /* Adjust the width as per your design requirements */
    margin: auto;
    /* Center the button in the flex item */
}

/* for progress bar */

:root {
    --bs-danger: #245B36;
    --bs-danger-rgb: 36,91,54;
    --bs-danger-text-emphasis: #58151c;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border-subtle: #f1aeb5;
  }




.preview-item-odd td {
    font-style: italic;
}


body {
    --main-color: #338027 !important;
    --main-hover-color: #338027 !important;
}

/* Style the button with a green background and white text */
input.sv_nav_btn.sv_complete_btn {
    background-color: #338027;
    /* Green color */
    color: #FFFFFF;
    /* White color */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Style the button with a darker green on hover */
input.sv_nav_btn.sv_complete_btn:hover {
    background-color: #245B36;
    /* Darker green color */
}

/* Style the button with the same darker green when active */
input.sv_nav_btn.sv_complete_btn:active {
    background-color: #245B36;
    /* Darker green color */
}

/* Button Styles */
.sv_main.sv_default_css input[type=button],
.sv_main.sv_default_css button {
    color: white;
    background-color: #338027;
    /* Green color */
}

/* Hover State Styles */
.sv_main.sv_default_css input[type=button]:hover,
.sv_main.sv_default_css button:hover {
    background-color: #245B36 !important;
    /* Darker green color */
}