motion-file-list .component {
    position: relative;
    display: block;
}

motion-file-list .component input[type=file] {
    font-family: 'ABBvoice', sans-serif;
    font-weight: 400;
    font-size: 14px;
    box-shadow: none;
    color: #262626;
    padding: 3px 10px;
    margin: 5px 0 0 0 !important;
    line-height: 32px;
    height: 46px;
    background-color: #ffffff;
    border: 1px solid #a9a9a9;
    border-radius: 2px;
    outline: none;
    width: 100%;
}

    motion-file-list .component.showList input[type=file],
    motion-file-list .component.showError input[type=file] {
        border-top-left-radius: 2px !important;
        border-top-right-radius: 2px !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    motion-file-list .component > a.action {
        position: absolute;
        top: 7px;
        right: 2px;
        line-height: 33px;
        color: #9f9f9f;
        width: 30px;
        line-height: 42px;
        text-align: center;
        background-color: #fff;
        display: none;
    }

        motion-file-list .component > a.action:hover {
            color: #262626;
            cursor: pointer;
        }

    motion-file-list .component.showError > a.action {
        display: block;
    }

motion-file-list .component input[type=file]:focus {
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
}

motion-file-list .component input[type=file]:hover {
    border-color: #6e6e6e;
}

motion-file-list .component input[type=file]:disabled {
    background-color: #fafafa;
}

motion-file-list .component input[type=file]:required {
    border-right-color: #ec1b24;
    border-right-width: 2px;
}

motion-file-list .component input[type=file].valid + .spacer {
    display: block;
    height: 23px;
}

    motion-file-list .component .upload-container {
        background-color: #ffffff;
        border-top: 1px solid transparent;
        border-right: 1px solid #a9a9a9;
        border-left: 1px solid #a9a9a9;
        border-bottom: 1px solid #a9a9a9;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        outline: none;
        width: 100%;
        cursor: default;
    }

        motion-file-list .component .upload-container .validation-message {
            font-family: 'ABBvoice', sans-serif;
            font-weight: 200;
            font-size: 16px;
            line-height: 20px !important;
            padding: 5px 5px 8px 12px !important;
            margin-bottom: 0 !important;
            background-color: #f5f5f5;
            display: none;
            color: red;
        }

        motion-file-list .component.showError .upload-container .validation-message {
            display: block;
        }

    motion-file-list .component.showList.showError .upload-container .validation-message {
        border-bottom: 1px solid #d2d2d2;
    }

    motion-file-list .component .upload-container .upload-items .upload-item {
        position: relative;
        height: 43px;
        border-top: 1px solid #d2d2d2;
    }

        motion-file-list .component .upload-container .upload-items .upload-item:first-child,
        motion-file-list .component .upload-container .upload-preview-items .upload-item:first-child {
            border-top: 1px solid transparent;
        }

            motion-file-list .component .upload-container .upload-items .upload-item .filename {
                position: absolute;
                left: 0;
                line-height: 33px;
                white-space: nowrap;
                width: calc(100% - 30px);
                overflow: hidden;
                padding: 5px 0 5px 12px;
            }

        motion-file-list .component .upload-container .upload-items .upload-item a.action {
            position: absolute;
            right: 0;
            line-height: 33px;
            color: #9f9f9f;
            width: 30px;
            line-height: 42px;
            text-align: center;
            background-color: #fff;
        }

            motion-file-list .component .upload-container .upload-items .upload-item a.action:hover,
            motion-file-list .component .upload-container .upload-preview-items .upload-item a.action:hover {
                color: #262626;
                cursor: pointer;
            }

    motion-file-list .component .upload-container .upload-preview-items .upload-item img {
        max-height: 180px;
        max-width: 270px;
    }

    motion-file-list .component .upload-container .upload-preview-items .upload-item a.action {
        position: absolute;
        top: 0;
        right: 0;
        line-height: 33px;
        color: #9f9f9f;
        width: 30px;
        line-height: 42px;
        text-align: center;
        background-color: #fff;
    }

    motion-file-list .component .upload-container .upload-preview-items .upload-item {
        position: relative;
        border-top: 1px solid #d2d2d2;
        padding: 10px 12px;
    }

        motion-file-list .component .upload-container .upload-preview-items .upload-item .info {
            background-color: #e9e9e9;
            padding: 7px 12px;
            margin-top: 10px;
            line-height: 19px;
        }