﻿form[action^='/formbuilder'] label.required:before {
    font-size: .75rem;
    float: right;
    padding-left: 1em;
    color: #943a38;
    content: "required";
}

    form[action^='/formbuilder'] label.required:before > input[type=checkbox] {
        margin: 0 0 2em 2em;
    }

form[action^='/formbuilder'] label.optional:before {
    font-size: .75rem;
    float: right;
    padding-left: 1em;
    color: #1D5F72;
    content: "optional";
}

    form[action^='/formbuilder'] label.optional:before > input[type=checkbox] {
        margin: 0 0 2em 2em;
    }

form[action^='/formbuilder'] input[type=checkbox], form[action^='/formbuilder'] input[type=radio] {
    margin-right: 1rem
}

form[action^='/formbuilder'] label.six.columns {
    margin-bottom: .5em;
}

form[action^='/formbuilder'] .alert.alert-info, form[action^='/formbuilder'] .optional, form[action^='/formbuilder'] .required {
    clear: both;
}

form[action^='/formbuilder'] input[readonly=readonly] {
    background: #e0dfdf;
    cursor: default;
}

    form[action^='/formbuilder'] input[readonly=readonly]:focus {
        outline: none;
    }

form[action^='/formbuilder'] .clear-both {
    clear: both;
}

form[action^='/formbuilder'] .auto-height {
    height: auto;
}

form[action^='/formbuilder'] .dob-field-container > .input-group--prepend {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

form[action^='/formbuilder'] .dob-field-container > .input-group {
    border-radius: 0;
}

form[action^='/formbuilder'] .dob-field-container > .input-group--append {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

form[action^='/formbuilder'] div.validation-summary-errors {
    background-color: #df6b57;
    background-color: rgba(223,107,87,.5);
    text-shadow: 0 1px #ffffff;
    text-shadow: 0 1px rgba(255,255,255,.5);
    border-width: 0 0 0 5px;
    border-style: none none none solid;
    border-color: #ba4a48;
    position: relative;
    z-index: 10;
}

    form[action^='/formbuilder'] div.validation-summary-errors > ul {
        list-style: none;
        margin: 0 !important;
    }

        form[action^='/formbuilder'] div.validation-summary-errors > ul > li {
            padding: 1.5em;
            margin-bottom: 1em;
        }

form[action^='/formbuilder'] ul.step-process li.complete, ul.step-process li.current {
    width: initial;
}

form[action^='/formbuilder'] ul.step-process li {
    width: initial;
    max-width: initial;
}

@media only screen and (min-width: 37em) {
    form[action^='/formbuilder'] .input-group--prepend {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    form[action^='/formbuilder'] .input-group {
        border-radius: 0;
    }

    form[action^='/formbuilder'] .input-group--append {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

form[action^='/formbuilder'] .radio-button {
    background-color: #fff;
    border-radius: .5em;
    min-height: 3em;
    border: 1px solid#000000;
    border: 1px solid rgba(0,0,0,.25);
    box-shadow: 0 -0.25rem 0 #000000 inset, 0 1px 0 0 #ffffff inset;
    box-shadow: 0 -0.25rem 0 rgba(0,0,0,.1) inset, 0 1px 0 0 rgba(255,255,255,.75) inset;
    transition: all .5s ease;
    text-align: center;
    padding: .6em;
}

form[action^='/formbuilder'] .radio-button:hover {
    box-shadow: 0 0.25rem 0 #000000 inset;
    box-shadow: 0 0.25rem 0 rgba(0,0,0,.1) inset;
}

form[action^='/formbuilder'] .radio-button > input[type="radio"] {
        right: 100vw;
        position: absolute;
    }

/*Drag and drop file upload*/
.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    padding: 25px;
    border: 1px dashed rgba(145 25 25);
    border-radius: 3px;
    transition: 0.2s;
}

    .file-drop-area.is-active {
        background-color: rgba(255, 255, 255, 0.5);
        outline: .125rem solid #d98411;
        outline-offset: .125rem;
    }

.file-input-button {
    flex-shrink: 0;
    cursor: pointer;
    margin-right: 1rem;
}

input.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}