/* Hide the file input, but without `display:none`, which is often seen as a
 * security threat by many browsers.
 */
.hidden-but-not-forgotten {
    height: 0;
    overflow: hidden;
}


.upload-form {
    margin-bottom: 0.75rem;

    .filename-wrapper {
        display: inline-block;
        height: 2.5rem;
    }

    input[type="submit"] {
        display: inline-block;
        margin-top: 1rem;
    }

    .filename-wrapper {
        position: relative;
        display: inline-block;

        .extension {
            position: absolute;
            right: 10px;
            top: 0;
            height: 2.5rem;
            line-height: 2.5rem;
            box-sizing: border-box;
            outline: #9CBA7F dotted transparent;
        }

        #filename {
            width: 200px;
            min-width: 100px;
            transition: width 0.25s;
            box-sizing: border-box;
            outline: #9CBA7F dotted transparent;
        }
    }

    .btn-choose {
        margin-right: 1rem;
    }
    .error-message{
        display: none;
        background-color: $red;
        color: $white;
        height: 1.5rem;
        padding-top: 0.25rem;
        padding-left: 0.25rem;
    }
}
