:root {
    --bg-color: #cadbe5;
    --bg-secondary-color: #f3f3f6;
    --color-primary: #34566f;
    --color-accent: #c8874d;
    --color-lightGrey: #d2d6dd;
    --color-grey: #747681;
    --color-darkGrey: #3f4144;
    --color-error: #ab6e53;
    --color-success: #55a491;
    --font-color: #42433e;
}

select {
    width:inherit;
}

body {
    background: linear-gradient(to right, var(--bg-color), var(--bg-color), var(--bg-color), #709db4);
    min-height: 100%;
}

.row {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.col {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.indeterminant-spinner {
    height:40px;
    width:40px;
    position:relative;
}

.indeterminant-spinner .spinner-icon {
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
    position: absolute;
    z-index: 19 !important;
    animation: indeterminant-spinner 1200ms linear infinite;
    width: 40px;
    height: 40px;
    border:  solid 4px transparent;
    border-top-color:  #c8874d !important;
    border-left-color: #c8874d !important;
    border-radius: 50%;
}

@keyframes indeterminant-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

.full-height-container {
    display:flex;
    flex-direction:column;
    height:100vh;
}

.full-height-container > .container {
    flex: 1 0 auto;
}

.global-header {
    border-bottom:3px solid var(--color-lightGrey);
    padding:8px 2% 0 2%;
    flex-shrink:0;
}

.global-footer {
    border-top:3px solid var(--color-lightGrey);
    padding:0 2% 4px 2%;
    flex-shrink:0;
}

.global-footer .col-12 {
    margin:0;
}

label {
    font-weight:bolder;
    color: var(--color-grey);
}

.btn-large {
    font-size:130%;
    font-weight:bold;
    padding:0.5em 2em;
}

.home {
    max-width:60rem;
    align-content:stretch;
    height:100%;
}

.file-upload-box {
    justify-content:flex-start;
    margin:20px 0;
    width:100%;
    border:2px solid grey;
    background-color:rgba(0,0,0,0.15);
    flex:1 1 auto;
}

.file-upload-box.dragover {
    border:4px solid pink;
}

.file-upload-box label {
    row-gap:0.5em;
    margin:1em;
}

#files-form {
    justify-content:flex-end;
    align-items:end;
    width:100%;
    flex:1 1 auto;
}

.filelist {
    width:100%;
    list-style:none;
    padding:0;
}

.filelist li {
    margin:4px 0.5em;
}

div.error {
    background-color:orange;
    border:2px solid red;
    padding:1em 2em;
    margin:4px;
    border-radius:10px;
}

div.info {
    padding:1em 0;
}

.home {
    width:80%;
}