.filedrag-light {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.filedrag-dark {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.filedrag {
    border: 2px dashed #808080;
    border-radius: 4px;
    cursor: default;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f3f3f3;
}

    .filedrag .drag-label {
        font-weight: bold;
        text-align: center;
        display: block;
        color: #fff;
        margin-top: 10px;
        margin-bottom: -10px;
    }

    .filedrag.hover {
        border-color: #F00;
        border-style: solid;
        box-shadow: inset 0 3px 4px #888;
    }

        .filedrag.hover .drag-label {
            color: #F00;
        }

    .filedrag > .filedrag-zone {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #808080;
        border-radius: 4px;
        cursor: default;
        padding: 15px;
    }

        .filedrag > .filedrag-zone img {
            height: 220px;
            width: auto;
        }

        .filedrag > .filedrag-zone .drag-label {
            font-weight: bold;
            text-align: center;
            vertical-align: middle;
            display: block;
            color: #808080;
            margin: auto;
        }

    .filedrag.hover > .filedrag-zone {
        border-color: #F00;
        border-style: solid;
        box-shadow: inset 0 3px 4px #888;
    }

        .filedrag.hover > .filedrag-zone .drag-label {
            color: #F00;
        }

.custom-file-input-wrapper {
    position: relative;
    width: 100% !important;
}

    .custom-file-input-wrapper .custom-file-input-button {
        position: relative;
        overflow: hidden;
    }

        .custom-file-input-wrapper .custom-file-input-button * {
            cursor: pointer;
            line-height: 22px;
        }

        .custom-file-input-wrapper .custom-file-input-button input[type="file"] {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            cursor: pointer;
            opacity: 0;
        }

.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.col-form-label-lg {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    font-size: 1rem;
    line-height: 1.5;
}

.col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
    padding-bottom: calc(0.25rem + 1px);
    font-size: 0.75rem;
    line-height: 1.5;
}