html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    color: #494949;
    --es-green: #5EA06D;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

div.container.es-max-width {
    max-width: 820px;
}


.highlight {
    font-weight: 700;
    font-style: italic;
    text-decoration: underline;
}

.accept-btn {
    background-color: var(--es-green);
    color: white;
    font-weight: 500;
    padding: 11px 50px;
    border-radius: 0.8rem;
}

.accept-btn:hover {
    color: white;
    background-color: #406c4a;
}

.smaller {
    font-size: 0.95rem;
}








.custom-radio {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 500;
    max-height: 100px;
    height: calc(4.5rem + 1.5vw);
    width: calc(100vw - 1rem);
    max-width: 460px;
    --radio-container-max-w: 62px;
    --radio-container-w: calc(2.4rem + 1.5vw);
    --checkmark-container-max-size: 28px;
    --checkmark-container-size: calc(1rem + 1.5vw);
    --active-color: #48566A;
}


.custom-radio .radio-container {
    background-color: #F5F5F5;
    min-height: 100%;
    height: 100%;
    max-width: var(--radio-container-max-w);
    width: var(--radio-container-w);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-radio .label-container {
    display: inline-flex;
    padding: 0 1rem;
    align-items: center;
    background-color: #EDEDED;
    position: absolute;
    top: 0;
    height: 100%;
    width: calc(100% - min(var(--radio-container-w), var(--radio-container-max-w)));
}

/* Hide the browser's default radio button */
.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio .checkmark-container {
    max-width: var(--checkmark-container-max-size);
    max-height: var(--checkmark-container-max-size);
    height: var(--checkmark-container-size);
    width: var(--checkmark-container-size);
    background-color: white;
    border-radius: 50%;
    border: 1px solid #DADADA;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Create a custom radio button */
.custom-radio .checkmark-container .checkmark {
    border-radius: 50%;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    display: block;
}

/* On mouse-over, add a background color to display the checkmark */
.custom-radio:hover .checkmark {
    background-color: var(--active-color);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}

/* When the radio button is checked, add change background color of checkmark and its container */
.custom-radio input:checked ~ .radio-container .checkmark-container .checkmark {
    color: var(--active-color);
    background-color: transparent;
    background-image: url('../images/check-solid.svg');
    background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%2348566A" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>');
    background-repeat: no-repeat;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}
.custom-radio input:checked ~ .radio-container {
    background-color: var(--active-color);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.custom-radio:after {
    content: "";
    position: absolute;
    display: none;
}