﻿/* //--- ---\\  file uploader is modified from the example on https://codepen.io/aaronvanston/pen/yNYOXR . The style tags change style tags  with name "image" to "file", example "image-upload-wrap" to "file-upload-wrap" */
.file-upload {
    background-color: #ffffff;
    width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #293846;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #1d2730;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

    .file-upload-btn:hover {
        background: #3d5266;
        color: #ffffff;
        transition: all .2s ease;
        cursor: pointer;
    }

    .file-upload-btn:active {
        border: 0;
        transition: all .2s ease;
    }

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.file-upload-wrap {
    margin-top: 2px;
    margin-bottom: 2px;
    border: 4px dashed #f1f1f1;
    position: relative;
}

    .file-dropping,
    .file-upload-wrap:hover {
        background-color: #f1f1f1;
        border: 4px dashed #ffffff;
    }

.file-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
}

.drag-text {
    text-align: center;
}

    .drag-text h3 {
        font-weight: 100;
        text-transform: uppercase;
        /* color: #15824B; */
        padding: 60px 0;
    }

.file-upload-image {
    max-height: 200px;
    max-width: 200px;
    margin: auto;
    padding: 20px;
}

.remove-file {
    /* width: 200px; */
    margin: 0;
    color: #fff;
    background: #cd4535;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #b02818;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

    .remove-file:hover {
        background: #c13b2a;
        color: #ffffff;
        transition: all .2s ease;
        cursor: pointer;
    }

    .remove-file:active {
        border: 0;
        transition: all .2s ease;
    }
/* \\--- ---//  */


/*   CUSTOM style for this  app,    inherits from "~/lib/GOA/goa-components.css" */
div.goa-callout.Customized-callout-Success {
    border-color: #006F4C;
    /* background: #EEF9F3; */
}
