/* episerver */
.EPiServerForms label {
        display: block;
        font-weight: var(--font-xx-bold);
        margin-bottom: .25em;
        font-size: 1rem;
    }
section.Form__Element div.Form__Element {
    width: 95%;
}
.EPiServerForms input {
        display: block;
        padding: 8px;
        width: 95%;
        max-width: 400px;
        margin-bottom: 1em;
        font-size: 1rem;
    }

.EPiServerForms input[type="text"], input[type="number"], input[type="range"], input[type="url"] {
        color: var(--text-color);
        border: 1px solid var(--brand-light);
        background: var(--lightest);
        border-radius: 5px
    }

.EPiServerForms textarea {
        display: block;
        padding: 8px;
        width: 95%;
        max-width: 400px;
        height: 10vh;
        margin-bottom: 1em;
        font-size: 1rem;
        color: var(--text-color);
        border-radius: 5px;
        border: 1px solid var(--brand-light);
        background: var(--lightest);
    }
/*
.EPiServerForms .ValidationRequired {}

.EPiServerForms input:required,
.EPiServerForms textarea:required {}
*/

.EPiServerForms button {
        text-align: center;
        border: 2px solid var(--lightest);
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; 
        background-color: var(--form-submit-button);
        color: var(--form-submit-button-text);
        border-radius: 35px;
        display: inline-block;
        padding: 1rem 2rem;
        margin: .75rem 0;
        font-weight: 500;
        font-size: 18px;
        text-transform: uppercase;
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
 }

 .EPiServerForms button light-bg {
        text-align: center;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; 
        background-color: var(--form-submit-button);
        color: var(--form-submit-button-text);
        border-radius: 35px;
        display: inline-block;
        padding: 1rem 2rem;
        margin: .75rem 0;
        font-weight: 500;
        font-size: 18px;
        text-transform: uppercase;
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
 }
        .EPiServerForms button:active,
        .EPiServerForms button:hover,
        .EPiServerForms button:focus {
            background: var(--accent1);
            color: var(--lightest);
        }
   
/* episerver */
.EPiServerForms .Form__Description {
        /* episerver */
        font-size: 1rem;
        margin-bottom: 2em;
    }
/* 
.EPiServerForms .FormImageSubmitButton {}
    */

.EPiServerForms .Form__Status {
        font-size: 1rem;
}
        .EPiServerForms .Form__Status .Form__Status__Message {
            display: block;
            padding: 1rem;
            margin: 1rem 0;
        }

        .EPiServerForms .Form__Status .Form__Success__Message {
            background-color: var(--brand-color);
            color: var(--lightest);
        }

        .EPiServerForms .Form__Status .Form__Warning__Message {
            background-color: var(--form-warning);
            color: red;
        }

        .EPiServerForms .Form__Status .Form__Readonly__Message {
            display: block;
            padding: 1rem;
            margin: 1rem 0;
            background-color: var(--form-status);
            color: red;
        }



        .EPiServerForms .Form__NavigationBar .Form__NavigationBar__Action {
            display: inline-block;
            padding: inherit;
            vertical-align: middle;
            text-align: center;
            border: 1px solid var(--brand-color);
            border-radius: 4px;
            font-size: inherit;
            height: 2em;
            width: 10em;
            max-width: 10rem;
            min-width: 10rem;
            color: initial;
            background-image: linear-gradient(to top,var(--lightest),#e6e6e6);
            background-image: -moz-linear-gradient(to top,var(--lightest),#e6e6e6);
            background: -webkit-linear-gradient(to top,var(--lightest),#e6e6e6); /* Background */
            background: -webkit-gradient(to top,var(--lightest),#e6e6e6); /* Background */
            background: -o-linear-gradient(to top,var(--lightest),#e6e6e6); /* Background */
        }
            .EPiServerForms .Form__NavigationBar .Form__NavigationBar__Action:disabled {
                color: dimgray;
            }
  

        .EPiServerForms .Form__NavigationBar__ProgressBar {
            display: inline-block;
            border: 1px solid var(--brand-color);
            vertical-align: middle;
            width: 40%;
        }
            .EPiServerForms .Form__NavigationBar__ProgressBar--Progress {
                border: 1px solid var(--brand-color);
                background: color-mix(in srgb, var(--brand-color) 50%, transparent);
                width: 0;
                height: 1rem;
            }

            .EPiServerForms .Form__NavigationBar__ProgressBar--Text {
                display: none;
            }



.EPiServerForms .FormStep .FormStep__Description {
    margin-bottom: 1rem;
}
.main-content > .EPiServerForms {
    padding: 3em 0;
    grid-column: 2 / 12;
}
.EPiServerForms .orientationHorizontal label label {
    display: inline-block;
    margin-right: 8px;
}
    /* CAPTCHA */
.EPiServerForms button[type="submit"].FormCaptcha__Refresh {
    color: #000;
    font-weight: normal;
    border: solid #999999 2px;
    background: #d0dae0;
    background-image: -webkit-linear-gradient(top, #d0dae0, #aab0b3);
    background-image: -webkit-gradient(top, #d0dae0, #aab0b3);
    background-image: -moz-linear-gradient(top, #d0dae0, #aab0b3);
    background-image: -o-linear-gradient(top, #d0dae0, #aab0b3);
    background-image: linear-gradient(to bottom, #d0dae0, #aab0b3);
}
        .EPiServerForms button[type="submit"].FormCaptcha__Refresh:hover {
            color: var(--lightest);
            background: #8a8b8c;
            background-image: -webkit-linear-gradient(top, #8a8b8c, #c7c7c7);
            background-image: -webkit-gradient(top, #8a8b8c, #c7c7c7);
            background-image: -moz-linear-gradient(top, #8a8b8c, #c7c7c7);
            background-image: -o-linear-gradient(top, #8a8b8c, #c7c7c7);
            background-image: linear-gradient(to bottom, #8a8b8c, #c7c7c7);
            text-decoration: none;
        }
    /* RESET */
.EPiServerForms input[type="reset"] {
    border: solid #999999 2px;
    background: #d0dae0;
    background-image: -webkit-linear-gradient(top, #d0dae0, #aab0b3);
    background-image: -webkit-gradient(top, #d0dae0, #aab0b3);
    background-image: -moz-linear-gradient(top, #d0dae0, #aab0b3);
    background-image: -o-linear-gradient(top, #d0dae0, #aab0b3);
    background-image: linear-gradient(to bottom, #d0dae0, #aab0b3);
}
        .EPiServerForms input[type="reset"]:hover {
            background: #8a8b8c;
            background-image: -webkit-linear-gradient(top, #8a8b8c, #c7c7c7);
            background-image: -webkit-gradient(top, #8a8b8c, #c7c7c7);
            background-image: -moz-linear-gradient(top, #8a8b8c, #c7c7c7);
            background-image: -o-linear-gradient(top, #8a8b8c, #c7c7c7);
            background-image: linear-gradient(to bottom, #8a8b8c, #c7c7c7);
            text-decoration: none;
        }

.EPiServerForms input[type="file"] {
    display: inline-block;
    width: auto;
    max-width: calc(100% - 16px);
    height: auto;
    color: var(--text-color);
    border: 1px solid var(--brand-light);
    background: var(--lightest);
    border-radius: 5px;
    text-align: center;
    padding: 4px 8px;
    text-decoration: none;
}
        .EPiServerForms input[type="file"]:hover, .EPiServerForms input[type="file"]:focus, .EPiServerForms input[type="file"]:active {
            background: #f5f6ff;
            border: 2px solid #000;
            color: #000;
            text-decoration: none;
        }


.EPiServerForms input[type="checkbox"],
.EPiServerForms input[type="radio"] {
        margin: 3px .5% 6px 0;
        transform: scale(1.5);
    }

.EPiServerForms .ValidationRequired:not(.FormChoice) > label,
.EPiServerForms .Form__Element.FormChoice.ValidationRequired > fieldset > legend,
.EPiServerForms .Form__Element.FormChoice.ValidationRequired > span:not(.Form__Element__ValidationError) {
    color: maroon;
}



.bg-color.dark .EPiServerForms .ValidationRequired:not(.FormChoice) > label,
.bg-color.dark  .EPiServerForms .Form__Element.FormChoice.ValidationRequired > fieldset > legend,
.bg-color.dark  .EPiServerForms .Form__Element.FormChoice.ValidationRequired > span:not(.Form__Element__ValidationError),   
.bg-color.darkest .EPiServerForms .ValidationRequired:not(.FormChoice) > label,
.bg-color.darkest  .EPiServerForms .Form__Element.FormChoice.ValidationRequired > fieldset > legend,
.bg-color.darkest  .EPiServerForms .Form__Element.FormChoice.ValidationRequired > span:not(.Form__Element__ValidationError) {
    color: white;
}
    


.form-horizontal .col-main .EPiServerForms .FormChoice label {
    margin-right: 1.5%;
}

.EPiServerForms input:not(.FormChoice):focus:invalid, .EPiServerForms textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: var(--lightest) url(/static/img/icon-error-20px.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535;
    padding-right: 20px;
}

.EPiServerForms input:not(.FormChoice):required, .EPiServerForms textarea:required {
    background: var(--lightest) url(/static/img/icon-asterik-10px.png) no-repeat 98% center;
}

.EPiServerForms input:not(.FormChoice):required:valid, .EPiServerForms textarea:required:valid { /* when a field is considered valid by the browser */
    background: var(--lightest) url(/static/img/icon-valid-20px.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
    padding-right: 20px;
}

.EPiServerForms .field-validation-error {
    display: block;
    margin-top: 5px;
    color: #eb0000;
}

/*
.EPiServerForms .Form__Element .Form__Element__Caption {}
*/

.EPiServerForms .Form__Element .Form__Element__ValidationError {
    color: red;
    display: inline-block;
    word-wrap: break-word;
    padding: 5px 5px 5px 30px;
    background: #fff390 url(/static/img/icon-high-warning-25px.png) no-repeat 10px 3px;
    background-size: 17px 17px;
    min-height: 17px;
    font-size: 110%;
}

.EPiServerForms .Form__Element .Form__Element__ValidationError.hidden,
.EPiServerForms .hide,
.EPiServerForms .Form__Status .Form__Status__Message.hide {
    display: none;
}

.EPiServerForms .FormCaptcha .FormTextbox__Input {
    width: 8rem;
}

.EPiServerForms .FormCaptcha .FormCaptcha__Refresh {
    font-size: 1rem;
    width: auto;
    height: auto;
}

.EPiServerForms .FormChoice label {
    margin-right: 1%;
}

.EPiServerForms .FormChoice--Image .hidden {
    visibility: hidden;
}
.Form__Element.FormHidden {
    position: absolute;
    left: 9999px;
}

.EPiServerForms .formchoice-container {
    display: inline-flex;
    gap: 2em;
    align-items: center;
}

.EPiServerForms .formchoice-container div {
    display: inline-flex;
    gap: 1em;
    align-items: center;
    flex-wrap: nowrap;
}

    .EPiServerForms .formchoice-container div input[type=radio] {
        margin: 0;
    }

.EPiServerForms .FormChoice__Input {
    border: 1px solid var(--brand-color);
    background-color: var(--brand-color)50;
}
    .EPiServerForms .FormChoice__Input + label > img {
        border: 2px solid var(--lightest);
    }

    .EPiServerForms .FormChoice__Input:checked + label > img {
        border: 2px solid var(--brand-color);
    }




.EPiServerForms .FormChoice--Image .FormChoice--Image__Item__Caption {
    font-size: .85rem;
    line-height: .95em;
}

.EPiServerForms .FormRange .FormRange__Input {
    max-width: 60%;
    display: inline;
}

.EPiServerForms .EditView__InvisibleElement.FormStep {
    display: block;
    border-radius: 4px;
    border-color: #b8c0c5;
    border-color: rgba(184,192,197,0.6);
    background-color: #b8c0c5;
    background-color: rgba(184,192,197,0.6);
    color: #000;
    padding: 0.2rem;
    font-family: Verdana;
    box-shadow: 3px 3px 5px #ccc;
}

.EPiServerForms .EditView__InvisibleElement.FormStep .FormStep__Warning {
    color: red;
    background-color: var(--form-status);
    display: block;
    word-wrap: break-word;
}

.EPiServerForms .EditView__InvisibleElement.FormHidden {
    display: inline-block;
    border-radius: 4px;
    border: 1.5px outset #b8c0c5;
    border: 1.5px outset rgba(184,192,197,0.6);
    padding: 0.2rem 1rem;
    min-width: 18rem;
}

.EPiServerForms .Warning {
    color: red;
    background-color: var(--form-warning);
    display: block;
    word-wrap: break-word;
}

.EPiServerForms .Form__Warning {
    color: red;
    background-color: var(--form-warning);
    display: block;
    word-wrap: break-word;
}

/*custom*/
.form-horizontal .col-main .EPiServerForms .Form__Element.FormParagraphText {
    width: 98%;
    display: block;
}


select.flat {
    flex: 1;
    padding: 8px;
    display: block;
    font-size: 1.2rem;
    font-family: sans-serif;
    font-weight: 700;
    color: var(--lightest);
    line-height: 1.3em;
    padding: .6em 1.4em .5em .8em;
    max-width: calc(100% - 16px);
    min-width: 20%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--lightest);
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--lightest);
    /*
       using a background image here instead of a regular background-color
        apparently prevents the select background color from being inhereted by the option
            it also is puts the dropdown arrow back in that is removed when you set appearance:none

        */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #000F9F 0%,#000F9F 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

select.flat:hover {
    border-color: var(--lightest);
}

select.flat:focus {
    border-color: var(--lightest);
    color: var(--lightest);
    outline: none;
}

select.flat option {
    font-weight: normal;
    font-size: 1rem;
    color: black;
}

select.flat.compact {
    padding: .25rem;
    padding-right: 1.4em;
    font-weight: normal;
}

select[disabled].flat {
    color: #bfbfbf;
    background-color: #bfbfbf;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23bfbfbf%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ddd 0%,#ddd 100%);
}

footer .form-col2 form section.Form__Element {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: .25em 1.5em;
  justify-items: start;
}