@import url(../blocks/modal-form.css);

.modal-form-button {
  --bg-util-color: var(--clr-ltblue-400);
}
h2 {
  text-align: center;
}

.otp-container-1 {
margin: 50px 0% 0;
display: grid;
grid-column-gap: 40px;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: 35% 12%;
font-size: 1.125rem;
}

.otp-container-2 {
margin: 50px 0% 0;
display: grid;
grid-column-gap: 10px;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: 12% 8%;
}


@media screen and (max-width: 60em) {
.otp-container {
  grid-template-rows: repeat(4, 1fr);
}
}

.grid-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row: 1;
  font-size: 20px;
}

@media screen and (max-width: 60em) {
.grid-1 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 1;
}
}

.grid-2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row: 1;
}

@media screen and (max-width: 60em) {
.grid-2 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 2;
}
}

.grid-3 {
grid-column-start: 1;
grid-column-end: 3;
grid-row: 2;
}

@media screen and (max-width: 60em) {
.grid-3 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 3;
}
}

.grid-4 {
grid-column-start: 3;
grid-column-end: 5;
grid-row: 2;
}

@media screen and (max-width: 60em) {
.grid-4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 4;
}
}

.vso-form {
  justify-self: left;
max-width: min(100%, 800px);
margin-inline: auto;
}

.vso-form form {
display: grid;
}

.vso-toggle {
justify-self: left;
height: 50px;
}

.vso-toggle label {
--btn-color: grey;
padding: 0.375rem 0.75rem !important;
border: 2px solid var(--btn-color);
background-color: transparent;
color: var(--btn-color);
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}

.vso-toggle .field {
margin: 0 !important;
}

.vso-toggle .checkbox input:checked ~ label {
background-color: var(--btn-color);
color: #fff !important;
}

.vso-toggle > div > .field:first-of-type label {
--btn-color: var(--clr-orange-400);
border-radius: 100vw 0 0 100vw;
}

.vso-toggle > div > .field:last-of-type label {
--btn-color: var(--clr-teal-400);
border-radius: 0 100vw 100vw 0;
}

.vso-toggle > div > .field:only-of-type label {
border-radius: 100vw;
}

.vso-toggle .ui.radio.checkbox label::before,
.vso-toggle .ui.radio.checkbox label::after,
.vso-toggle .ui.radio.checkbox::after {
content: none !important;
}

.vso-form .ui.popup.calendar {
display: none !important;
}

.vso-form .calendar .hour .link.disabled {
display: none;
}

.vso-form .calendar .hour tbody {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.vso-form .calendar .hour tbody tr {
display: contents;
}

.vso-form .calendar .hour tbody td {
width: auto !important;
border: 1px solid rgba(34, 36, 38, 0.1) !important;
}

.vso-video {
width: 100%;
}

.plan {
  margin: auto 0% auto;
}

.step {
  max-width: 240px;
}

.rebates-info-block {
  padding: 2rem;
  color: var(--clr-neutral-600);
  text-align: center;
}

.rebates-info-block img {
  max-height: 100px;
  margin-block-end: 2rem;
  margin-inline: auto;
}

.rebates-info-block > div {
  display: flex;
  column-gap: 2rem;
  row-gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.rebates-info-block em {
  display: inline-block;
  max-width: 55ch;
  font-size: 1.125rem;
  font-weight: 400;
}

.rebate-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 600px;
  margin-inline: auto;
}

body > .container > footer {
  overflow: visible;
}

body > .container > footer > .row {
  margin-block-start: 0;
}