/*Style formulate Checkgroups better */
.formulate-input-group-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    padding: 0.5em;
    position: relative;
    /* This makes the whole respond like a label to clicks */
}

    .formulate-input-group-item label::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

    .formulate-input-group-item[data-has-value] {
        background-color: #e2f4ec;
    }

.formulate-input-element--checkbox + .formulate-input-label {
    max-width: calc(100% - 20px);
    /* make checkbox not get squashed by long label */
}

/*style for readonly questions */
.formulate-inputReadonly {
    opacity: 0.7;
    background-color: #d3d3d363
}

.multiselect.formulate-input-element.formulate-input-element--multiSelect {
    max-width: calc(100% - 20px);
}

input.multiselect__input::placeholder {
    color: green;
    font-style: italic;
}

.formulate-input[data-classification='select'] select {
    /*Some site styles are cuaing issues with the default snow.css top bottom padding with the font size */
    font-size: .85em;
    padding: 0 2em 0 8px;
    background-image: none; /*remove 3rd party select image*/
}
/* styling to fix file inputs in snow theme */
.formulate-input[data-classification=file] .formulate-input-upload-area-mask:before {
    content: "";
    background-color: #a8a8a8;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><path d="M29,58A29,29,0,1,0,0,29,29,29,0,0,0,29,58ZM29,4A25,25,0,1,1,4,29,25,25,0,0,1,29,4Z"/><polygon points="27 22 27 44.4 31 44.4 31 22 41.7 31.1 44.3 28.1 29 15 13.7 28.1 16.3 31.1 27 22"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><path d="M29,58A29,29,0,1,0,0,29,29,29,0,0,0,29,58ZM29,4A25,25,0,1,1,4,29,25,25,0,0,1,29,4Z"/><polygon points="27 22 27 44.4 31 44.4 31 22 41.7 31.1 44.3 28.1 29 15 13.7 28.1 16.3 31.1 27 22"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 2em;
    height: 2em;
    position: absolute;
    pointer-events: none
}

.formulate-input[data-classification=file] .formulate-files .formulate-file-remove {
    width: 1.25em;
    height: 1.25em;
    border-radius: 1em;
    border: 1px solid #a8a8a8;
    background-color: #a8a8a8;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.1 59.2"><path d="M1.6,57.7a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5l21-21,21,21a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5,5,5,0,0,0,0-7.1l-21-21,21-21a5,5,0,0,0,0-7.1,5,5,0,0,0-7.1,0l-21,21L8.6,1.7a5,5,0,0,0-7.1,0,5,5,0,0,0,0,7.1l21,21L1.6,50.7A4.83,4.83,0,0,0,1.6,57.7Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.1 59.2"><path d="M1.6,57.7a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5l21-21,21,21a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5,5,5,0,0,0,0-7.1l-21-21,21-21a5,5,0,0,0,0-7.1,5,5,0,0,0-7.1,0l-21,21L8.6,1.7a5,5,0,0,0-7.1,0,5,5,0,0,0,0,7.1l21,21L1.6,50.7A4.83,4.83,0,0,0,1.6,57.7Z"/></svg>');
    -webkit-mask-size: .6em;
    mask-size: .6em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    cursor: pointer;
    position: absolute;
    right: .75em;
    z-index: 1;
    transition: transform .25s
}
/****/

.formulate-inputRequired > .formulate-input-wrapper > .formulate-input-label::after {
    color: red;
    content: '*';
}

.formulate-input[data-classification=file] .formulate-input-upload-area {
    width: 100%;
    position: relative;
    padding: 2em 0
}

    .formulate-input[data-classification=file] .formulate-input-upload-area input {
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 5
    }

    .formulate-input[data-classification=file] .formulate-input-upload-area[data-has-files] {
        padding: 0
    }

        .formulate-input[data-classification=file] .formulate-input-upload-area[data-has-files] input {
            display: none
        }

.formulate-input[data-classification=file] .formulate-input-upload-area-mask {
    border-radius: .4em;
    position: absolute;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 2px dashed #a8a8a8;
    z-index: 2
}

    .formulate-input[data-classification=file] .formulate-input-upload-area-mask:before {
        content: "";
        background-color: #a8a8a8;
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><path d="M29,58A29,29,0,1,0,0,29,29,29,0,0,0,29,58ZM29,4A25,25,0,1,1,4,29,25,25,0,0,1,29,4Z"/><polygon points="27 22 27 44.4 31 44.4 31 22 41.7 31.1 44.3 28.1 29 15 13.7 28.1 16.3 31.1 27 22"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><path d="M29,58A29,29,0,1,0,0,29,29,29,0,0,0,29,58ZM29,4A25,25,0,1,1,4,29,25,25,0,0,1,29,4Z"/><polygon points="27 22 27 44.4 31 44.4 31 22 41.7 31.1 44.3 28.1 29 15 13.7 28.1 16.3 31.1 27 22"/></svg>');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        width: 2em;
        height: 2em;
        position: absolute;
        pointer-events: none
    }

.formulate-input[data-classification=file] .formulate-input-upload-area input:focus ~ .formulate-input-upload-area-mask, .formulate-input[data-classification=file] .formulate-input-upload-area input:hover ~ .formulate-input-upload-area-mask, .formulate-input[data-classification=file] .formulate-input-upload-area input[data-is-drag-hover] ~ .formulate-input-upload-area-mask {
    border-color: #41b883
}

    .formulate-input[data-classification=file] .formulate-input-upload-area input:focus ~ .formulate-input-upload-area-mask:before, .formulate-input[data-classification=file] .formulate-input-upload-area input:hover ~ .formulate-input-upload-area-mask:before, .formulate-input[data-classification=file] .formulate-input-upload-area input[data-is-drag-hover] ~ .formulate-input-upload-area-mask:before {
        background-color: #41b883
    }

.formulate-input[data-classification=file] .formulate-files {
    list-style-type: none;
    margin: 0;
    padding: 0
}

    .formulate-input[data-classification=file] .formulate-files .formulate-file-add {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        min-width: 75px;
        border: 1px solid #41b883;
        color: #41b883;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
        position: relative;
        font-size: 13px;
        background-color: transparent;
        cursor: pointer;
        margin: .5em 0
    }

        .formulate-input[data-classification=file] .formulate-files .formulate-file-add input {
            position: absolute;
            display: block;
            cursor: pointer
        }

            .formulate-input[data-classification=file] .formulate-files .formulate-file-add input::-webkit-file-upload-button {
                display: none
            }

    .formulate-input[data-classification=file] .formulate-files .formulate-file-progress {
        background-color: #cecece;
        height: .3em;
        border-radius: 1.25em;
        width: 5em;
        overflow: hidden;
        position: relative;
        flex: 0 0 5em;
        right: .75em;
        transition: height .25s,width .25s,flex-basis .25s;
        z-index: 2;
    }

        .formulate-input[data-classification=file] .formulate-files .formulate-file-progress:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            opacity: 0;
            transform: scale(.08);
            background-color: #fff;
            -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M8.76,56.2c-6.38-6.34,3.26-16,9.64-9.69L38,65.88,80.56,23.29c6.38-6.38,16.07,3.32,9.69,9.69L42.84,80.37a6.83,6.83,0,0,1-9.65,0Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M8.76,56.2c-6.38-6.34,3.26-16,9.64-9.69L38,65.88,80.56,23.29c6.38-6.38,16.07,3.32,9.69,9.69L42.84,80.37a6.83,6.83,0,0,1-9.65,0Z"/></svg>');
            -webkit-mask-size: 77%;
            mask-size: 77%;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            z-index: 3
        }

        .formulate-input[data-classification=file] .formulate-files .formulate-file-progress[data-just-finished] {
            width: 1.25em;
            height: 1.25em;
            flex: 0 0 1.25em
        }

            .formulate-input[data-classification=file] .formulate-files .formulate-file-progress[data-just-finished]:before {
                transition: transform .25s .2s,opacity .25s .2s;
                transform: scale(1);
                opacity: 1
            }

        .formulate-input[data-classification=file] .formulate-files .formulate-file-progress[data-is-finished] {
            transition: height .25s,width .25s,left .25s,top,.25s,border-radius .25s;
            width: .3em;
            flex: 0 0 .3em;
            height: 100%;
            right: 0;
            border-radius: 0 .23em .23em 0;
        }

            .formulate-input[data-classification=file] .formulate-files .formulate-file-progress[data-is-finished]:before {
                transition: opacity .1s;
                opacity: 0
            }

        .formulate-input[data-classification=file] .formulate-files .formulate-file-progress .formulate-file-progress-inner {
            background-color: #41b883;
            width: 1%;
            position: absolute;
            left: 0;
            bottom: 0;
            top: 0;
            z-index: 2
        }


    .formulate-input[data-classification=file] .formulate-files .formulate-file-name:before {
        position: absolute;
        left: .7em;
        top: 50%;
        margin-top: -.7em;
        background-color: #a8a8a8;
        content: "";
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.06 83.59"><path d="M55.94,83.59a8.16,8.16,0,0,0,8.12-8.16V19.12a1.77,1.77,0,0,0-.52-1.25L46.21.59A1.69,1.69,0,0,0,45.14.08L44.69,0l-.18,0H8.13A8.18,8.18,0,0,0,0,8.16V75.41a8.16,8.16,0,0,0,8.13,8.16H55.94ZM46.68,6,58.11,17.38H46.68ZM3.52,75.43V8.16A4.64,4.64,0,0,1,8.13,3.52h35V19.16a1.75,1.75,0,0,0,1.76,1.74H60.55V75.43a4.65,4.65,0,0,1-4.61,4.65H8.13A4.65,4.65,0,0,1,3.52,75.43Z"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.06 83.59"><path d="M55.94,83.59a8.16,8.16,0,0,0,8.12-8.16V19.12a1.77,1.77,0,0,0-.52-1.25L46.21.59A1.69,1.69,0,0,0,45.14.08L44.69,0l-.18,0H8.13A8.18,8.18,0,0,0,0,8.16V75.41a8.16,8.16,0,0,0,8.13,8.16H55.94ZM46.68,6,58.11,17.38H46.68ZM3.52,75.43V8.16A4.64,4.64,0,0,1,8.13,3.52h35V19.16a1.75,1.75,0,0,0,1.76,1.74H60.55V75.43a4.65,4.65,0,0,1-4.61,4.65H8.13A4.65,4.65,0,0,1,3.52,75.43Z"/></svg>');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        width: 1.25em;
        height: 1.25em;
        display: inline-block;
        margin-right: .5em
    }

    .formulate-input[data-classification=file] .formulate-files .formulate-file-remove {
        width: 1.25em;
        height: 1.25em;
        border-radius: 1em;
        border: 1px solid #a8a8a8;
        background-color: #a8a8a8;
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.1 59.2"><path d="M1.6,57.7a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5l21-21,21,21a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5,5,5,0,0,0,0-7.1l-21-21,21-21a5,5,0,0,0,0-7.1,5,5,0,0,0-7.1,0l-21,21L8.6,1.7a5,5,0,0,0-7.1,0,5,5,0,0,0,0,7.1l21,21L1.6,50.7A4.83,4.83,0,0,0,1.6,57.7Z"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.1 59.2"><path d="M1.6,57.7a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5l21-21,21,21a5,5,0,0,0,3.5,1.5,4.85,4.85,0,0,0,3.5-1.5,5,5,0,0,0,0-7.1l-21-21,21-21a5,5,0,0,0,0-7.1,5,5,0,0,0-7.1,0l-21,21L8.6,1.7a5,5,0,0,0-7.1,0,5,5,0,0,0,0,7.1l21,21L1.6,50.7A4.83,4.83,0,0,0,1.6,57.7Z"/></svg>');
        -webkit-mask-size: .6em;
        mask-size: .6em;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        cursor: pointer;
        position: absolute;
        right: .75em;
        z-index: 1;
        transition: transform .25s
    }

    .formulate-input[data-classification=file] .formulate-files .formulate-file ::-webkit-progress-bar {
        -webkit-appearance: none;
        appearance: none;
        height: .5em;
        border-radius: .5em;
        overflow: hidden
    }

    .formulate-input[data-classification=file] .formulate-files .formulate-file-image-preview {
        width: 3em;
        height: 3em;
        flex: 0 0 3em;
        position: relative;
        z-index: 2;
        left: -1px;
        box-shadow: 0 0 0 1px #efefef;
        transition: transform .25s,box-shadow .25s,background-color .25s
    }
.formulate-input .formulate-input-errors {
    list-style-type: none;
    padding: 1px 5px;
    margin: 0;
    border: red solid 2px;
    display: inline-block;
    background-color: #ff010147;
    font-weight: bold;
    font-size: 14px;
}



.gnosisDynForm_Button {
    background-color: white;
    border: 1px solid #cccccc;
    color: #696969;
    padding: 0.5rem;
}

.gnosisDynForm_Button_block {
    display: block;
    width: 100%;
}

.gnosisDynForm_Button_Previous {

}
.gnosisDynForm_Button_Cancel {

}
.gnosisDynForm_Button_Next{}
.gnosisDynForm_Button_SaveDraft {}
.gnosisDynForm_Button_Complete {}
.gnosisGrant_GrantTitle {}



/*form management styles*/
.gnosis_dynform_EditFormDetails button, .gnosis_dynform_PreviewForm button, .gnosis_dynform_EditForm button, .gnosis_dynform_DeleteForm button {
    width: 96px;
}

.gnosis_dynform_EditFormDetails, .gnosis_dynform_PreviewForm, .gnosis_dynform_EditForm, .gnosis_dynform_DeleteForm {
    margin-bottom: 5px
}

    .gnosis_dynform_EditFormDetails button {
        background-color: #bdbdff
    }

    .gnosis_dynform_PreviewForm button {
        background-color: #cdf7cd
    }

    .gnosis_dynform_EditForm button {
        background-color: #f3f3a4
    }

    .gnosis_dynform_DeleteForm button {
        background-color: #f5baba
    }

    /* textAreaProgress styles*/

progress.textAreaProgress--progressArea--progress {
    width: 100%;
    padding: 3px 0 0 0;
    height: 13px;
    margin-top: 0px;
    border-radius: 0
}

.textAreaProgress--progressArea {
    display: flex;
    gap: 5px;
}

.textAreaProgress--progressArea--text {
    font-size: 10px;
    color: grey;
}

progress[value].textAreaProgress--progressArea--progress::-webkit-progress-bar {
    background-color: lightgrey;
    border-radius: 2px;
}

progress[value].textAreaProgress--progressArea--progress::-webkit-progress-value {
    background-color: green;
    border-radius: 2px;
}

progress[value].textAreaProgress--progressArea--progress-warn::-webkit-progress-value {
    background-color: orange;
    border-radius: 2px;
}

progress[value].textAreaProgress--progressArea--progress-full::-webkit-progress-value {
    background-color: red;
    border-radius: 2px;
}
textarea.textAreaProgress {
    min-height: 100px;
}


.multiselect-option--selectAll {
    padding: 12px 15px;
    min-height: 20px;
    line-height: 16px;
    border-bottom: 1px solid #e8e8e8;
    color: #35495e;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

    .multiselect-option--selectAll:hover {
        background-color: #f8f8f8;
    }

    .multiselect-option--selectAll:active {
        background-color: #f1f1f1;
    }