html, body {
    margin: 0;
    padding: 0;
}




/* HEADER */
.mdc-top-app-bar {
    background: #347f3a;
    position: unset;
}

.logo {
    width: 140px;
}




/* BODY  */
#wrapper {
    width: 98vw;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: auto;
}

#uploadForm {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: baseline;
}

#template {
    display: none;
}

.upload-card {
    width: 100%;
    min-width: 250px;
    margin: 20px 0;
}

.upload-card .mdc-card__primary-action {
    flex-direction: row;
    align-items: center;
}


/* hide the upload input. Is triggered programmatically */
.upload-card input[type=file] {
    width: 0;
}
.upload-button, .upload-icon, .error-icon {
    align-self: start;
    width: 175px;
    margin: 12px 24px;
}
.upload-icon, .error-icon {
    align-self: center;
    text-align: center;
    display: none;
}
.upload-icon, .error-icon i {
    font-size: 36px;
}
.filename-wrapper {
    width: 100%;
    position: relative;
}
.filename {
    opacity: 0.6;
    font-weight: 300;
    max-width: Calc(100% - 65px);
}


/* upload progress related styles */
.started {
    pointer-events: none;
}
.started .upload-button {
    opacity: 0.5;
    pointer-events: none;
}
.started.complete .upload-button {
    display: none;
}
.started.complete.success .upload-icon {
    display: unset;
}
.started.complete.error .error-icon {
    display: unset;
}
.started.complete.error .status {
    display: unset;
}
.upload-card.started.complete.error {
    background-color: #ff5555;
}


/* the status box for reporting errors */
.status {
    background-color: white;
    padding: 0 24px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    display: none;
}
.status-text {
    margin: 10px 0;
    color: rgb(255, 68, 68);
}

.progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #b8ffb8;
    opacity: 0.2;
}
.progress:before {
    content: attr(data-label);
    font-size: 0.8em;
    font-weight: 700;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* show/hide sections depending on upload code input  */
body.have-upload-code #uploadcode h2,
body.have-upload-code #uploadcode p,
body.have-upload-code #uploadcode input[type=text],
body.have-upload-code #uploadcode button[type=submit] {
    opacity:0.3;
    pointer-events: none;
}
body:not(.have-upload-code) #uploadcode button[type=reset] {
    visibility: hidden;
    pointer-events: auto;
}
body:not(.have-upload-code) #uploadapp {
    opacity:0.3;
    pointer-events: none;
}




/* FOOTER */
#footer {
    position: fixed;
    left: 10px;
    bottom: 0;
    width: 100%;
}




/* UTILITY CLASSES */
.w-100 {
    width: 100%;;
}

.w-50 {
    width: 50%;;
}

.hidden {
    visibility: hidden;
}

.d-none {
    display: none;
}

.theme-primary {
    --mdc-theme-primary: #347f3a;
}

.theme-warn {
    --mdc-theme-primary: #d95c27;
}

.supplemental {
    opacity: 0.8;
}




/* MEDIA QUERIES */
@media screen and (min-width: 1000px) {
    #wrapper {
      width: 800px
    }
} 
@media screen and (min-width: 1600px) {
    #wrapper {
      width: 1200px;
    }
}