/*  Petrinex Drag and Drop File Upload control (CSS)
    Author: Noah Tong
    Revision:   Name        Date        Description
    1.0         Noah Tong	2018-11-16	Initial creation
    Purpose:
        CSS styles for Petrinex Drag and Drop File Upload
*/

/* CONTAINER */
.ui-dragdrop-fileupload-container {
    position: relative;
    text-align: left;
}

.ui-dragdrop-container {
    position: relative;
    border: 3px dashed rgb(205,206,208);
}

    .ui-dragdrop-container:hover {
        background-color: rgb(216, 241, 243);
    }

    .ui-dragdrop-container.drag-over {
        background-color: rgb(216, 241, 243);
    }

    .ui-dragdrop-container input[type=file] {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        outline: none;
        opacity: 0;
        cursor: pointer;
    }

    .ui-dragdrop-container p {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 60px;
    }

    .ui-dragdrop-container hr {
        width: 100%;
        height: 1px;
        border-width: 1px 0px 0px;
        border-style: solid none none;
        border-color: rgb(204, 204, 204);
        margin: 0px;
        padding: 0px;
        border-image: none;
    }

    .ui-dragdrop-container output {
        text-align: left;
    }

/* TABLE OUTPUT */
.ui-dragdrop-output-table {
    text-align: left;
    table-layout: auto;
    width: 100%;
}

    .ui-dragdrop-output-table th {
        padding: 5px;
    }

    .ui-dragdrop-output-table td {
        padding: 5px;
    }

/* PROGRESS BAR */
.ui-progress-bar-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    padding: 15px;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(204, 204, 204, 0.7);
    outline: none;
}

progress:not(value) {
    /* Empty value style. */
}

progress[value] {
    /* Value style. */
    /* Get rid of the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;
    /* Add dimensions */
    width: 100%;
    height: 20px;
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
    color: rgb(0, 141, 168);
    position: relative;
    margin: 0 0 1.5em;
}

    progress[value]::-webkit-progress-value {
        position: relative;
        background-size: 35px 20px, 100% 100%, 100% 100%;
        background: rgb(0, 141, 168);
        border-radius: 3px;
        /* Let's animate this */
        animation: animate-stripes 5s linear infinite;
    }

    progress[value]::-moz-progress-bar {
        background-color: whiteSmoke;
        background: rgb(0, 141, 168);
        border-radius: 3px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
    }

@keyframes animate-stripes {
    100% {
        background-position: -100px 0;
    }
}

progress[value]::-webkit-progress-value:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    top: 7px;
    right: 7px;
    background-color: white;
    border-radius: 100%;
}

progress[value]::-moz-progress-bar {
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius: 3px;
}

.ui-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
    /* Dimensions should be similar to the parent progress element. */
    width: 100%;
    height: 20px;
}

    .ui-progress-bar span {
        background-color: rgb(0, 141, 168);
        border-radius: 3px;
        display: block;
        text-indent: -9999px;
    }

p[data-value] {
    position: relative;
}

    p[data-value]:after {
        /* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
        content: attr(data-value) '%';
        position: absolute;
        right: 0;
    }

/* THE END */