$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit / 2;

$color-alpha: #1772FF;
$color-form-highlight: #EEEEEE;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    padding: $base-spacing-unit;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    background: #FFEFBA;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFFFFF, #DEEDF8);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FffffF, #DEEDF8);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    height: 100vh
}

body>div:nth-child(1) {
    width: 80%;
    margin: auto;
    height: 150px;
}

.file-uploader span {
    display: block;
    margin-bottom: 5px
}

input:not([type=file]) {
    height: 22px;
    outline: 0;
    border-radius: 5px;
    border: 1px solid #bfbabf;
    margin: 5px;
    height: 25px;
padding: 5px;
}

input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #02366f;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
    padding: 10px 25px;
    font-weight: bold;
    height: 40px;
}

input[type=file]::file-selector-button:hover {
    background: #0d45a5;
}


.codeInput span.error {
    display: none;
}

span.item-name {
    font-size: 0.75em;
    font-weight: normal;
}

.invalid {
    font-size: 10px;
    color: #e70000;
    display: block !important;
    margin-left: 139px;
    margin-top: -3px;
    margin-bottom: 5px;
}

label {
    font-size: 1em;
    font-weight: bold;
    margin: auto 5px;
    font-family: inherit;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80%;
    padding: 10px;
    margin: 40px auto;
}

.scans {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 330px;
}

.container {
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
    width: 95%;
    overflow-x: hidden;
}

.table {
    width: 100%;
    border: 1px solid $color-form-highlight;
    margin: 0 20px;
}

.table-header,.added-table-header {
    display: flex;
    width: 100%;
    background: #02366f;
    padding: ($half-spacing-unit * 1.5) 0;
}

.added-table-header{
    background-color: #02a15f;
}
.table-row {
    display: flex;
    width: 100%;
    margin: 5px auto;
    padding: ($half-spacing-unit * 1.5) 0;
    font-size: 0.8em;
    padding: 5px;

    &:nth-of-type(odd) {
        background: $color-form-highlight;
    }
}

div.table-row div:nth-child(3) {
    font-weight: bold;
    font-size: 0.9em;
}

.table-data,
.header__item {
    flex: 0 1 15%;
    text-align: center;
    font-size: 0.9em;

}

.table-data:nth-child(2),
.header__item:nth-child(2) {
    text-align: left;
    flex: 1;
    padding-left: 10px;
}



.header__item {
    font-weight: bold;
    padding: 7px 5px;
}

.filter__link {
    color: white;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-left: $base-spacing-unit;
    padding-right: $base-spacing-unit;

    &::after {
        content: '';
        position: absolute;
        right: -($half-spacing-unit * 1.5);
        color: white;
        font-size: $half-spacing-unit;
        top: 50%;
        transform: translateY(-50%);
    }

    &.desc::after {
        content: '(desc)';
    }

    &.asc::after {
        content: '(asc)';
    }

}

.excess {
    background: #d1fad1;
    color: #024302;
}


footer {
    text-align: center; 
    padding: 10px; 
    background-color: #0d223b; 
    color: #fff; 
    font-size: 14px; 
    position: relative; 
    bottom: 0; 
    width: 100%; 
}