body {
    margin: 0;
    padding: 0;
    font: 14px
            'Circular,Segoe UI,Candara,Bitstream Vera Sans,DejaVu Sans,Trebuchet MS,Verdana,Verdana Ref',
        sans-serif;
    background-color: #f2f2f2;
}

.hide {
    display: none;
}

.d-block {
    display: block;
}

.t-center {
    text-align: center;
}

.mt-2 {
    margin-top: 10px;
}

.ml-2 {
    margin-left: 10px;
}

.box {
    border-radius: 10px;
    border: 1px solid rgb(206, 206, 206);
}

input {
    box-sizing: border-box;
    border: 1px solid #d0d0d0;
}

input:focus {
    outline: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

.mb-1 {
    margin-bottom: 5px;
}

.mb-2 {
    margin-bottom: 10px;
}

.secondary-text {
    color: #aaa;
}

.flex-input {
    width: 100%;
}

#sidenavi {
    height: 35px;
    width: 100%;
    background-color: #4a4a4a;
}

.sidenavi-items {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 100%;
    align-items: center;
}

.sidenavi-items a {
    margin-right: 25px;
    color: #fff;
    text-decoration: none;
}

.sidenavi-items a.active {
    font-weight: bolder;
}

.sidenavi-item {
    display: block;
}

#global-message-container {
    position: absolute;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
}

.global-message-error {
    background-color: red;
}

.global-message-success {
    background-color: green;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 10px;
}

/* Search Input Style START */

#head-left {
    padding: 10px;
    background-color: #fff;
    box-sizing: border-box;
}

input#isbn-input {
    width: 100%;
    border-width: 1px 1px 1px 0px;
    border-color: rgb(177, 177, 177);
    border-style: solid;
    border-radius: 0px 10px 10px 0px;
}

.icon {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg width="30px" height="30px" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"><path d="M604.43 461.39 500.57 357.65l-9.828-9.836c-11.086-11.199-29.25-11.199-40.336 0l-4.297 4.297-25.602-25.602c61.688-73.973 57.848-184.48-11.566-253.89-73.492-73.492-193.08-73.492-266.56 0-73.492 73.492-73.492 193.07 0 266.56a189.067 189.067 0 0 0 17.195 15.215c.36.281.707.559 1.066.84 69.406 53.53 167.86 52.035 235.64-4.488l25.594 25.594-2.187 2.195-1.617 1.61c-11.2 11.085-11.2 29.25 0 40.335l9.836 9.828 103.75 103.88a28.649 28.649 0 0 0 8.18 5.688c.847.394 1.714.726 2.59 1.031.429.156.874.29 1.312.422a28.911 28.911 0 0 0 8.128 1.172 28.689 28.689 0 0 0 20.223-8.313l32.34-32.34c11.086-11.199 11.086-29.25 0-40.453zM174.92 306.63c-55.547-55.547-55.547-145.92 0-201.47s145.92-55.547 201.47 0c52.691 52.691 55.387 136.73 8.11 192.64l-16.942 16.941c-55.91 47.281-139.95 44.578-192.64-8.113z"/></svg>');
    background-color: #fff;
    border-width: 1px 0px 1px 1px;
    border-color: rgb(177, 177, 177);
    border-style: solid;
    background-position-y: 3px;
    border-radius: 10px 0px 0px 10px;
}

.result-item-upper-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.result-item-more-icon {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"><path d="M197.79 229.6a50.402 50.402 0 0 0-50.403 50.399 50.402 50.402 0 0 0 100.802 0 50.386 50.386 0 0 0-14.762-35.637A50.394 50.394 0 0 0 197.79 229.6zm0 84a33.597 33.597 0 0 1-23.758-9.844 33.588 33.588 0 0 1 0-47.516 33.597 33.597 0 0 1 23.758-9.844 33.604 33.604 0 0 1 33.598 33.602A33.6 33.6 0 0 1 197.79 313.6zM350 229.6a50.386 50.386 0 0 0-35.637 14.762c-9.453 9.45-14.762 22.27-14.762 35.637s5.309 26.188 14.762 35.637c9.45 9.453 22.27 14.762 35.637 14.762s26.188-5.309 35.637-14.762c9.453-9.45 14.762-22.27 14.762-35.637s-5.309-26.188-14.762-35.637A50.387 50.387 0 0 0 350 229.6zm0 84a33.604 33.604 0 0 1-23.758-9.844c-6.3-6.3-9.844-14.848-9.844-23.758s3.543-17.457 9.844-23.758c6.3-6.3 14.848-9.844 23.758-9.844s17.457 3.543 23.758 9.844c6.3 6.301 9.844 14.848 9.844 23.758s-3.543 17.457-9.844 23.758A33.604 33.604 0 0 1 350 313.6zM502.21 229.6a50.393 50.393 0 0 0-35.637 14.762c-9.453 9.45-14.762 22.27-14.762 35.637s5.309 26.188 14.762 35.637a50.402 50.402 0 0 0 86.04-35.637A50.402 50.402 0 0 0 502.21 229.6zm0 84a33.604 33.604 0 0 1-33.598-33.602 33.6 33.6 0 0 1 33.598-33.602 33.597 33.597 0 0 1 23.758 9.844 33.588 33.588 0 0 1 0 47.516 33.597 33.597 0 0 1-23.758 9.844z"/></svg>');
    background-repeat: no-repeat;
    width: 30px;
    height: 100%;
}

/* Search Input Style ENDE */

/* Grid Styles START*/

.head-grid-item {
    display: flex;
}

.head-grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    margin-bottom: 20px;
}

#result-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 25px;
    grid-column-gap: 10px;
}

/* Grid Styles ENDE*/

/* Summary Styles START */

#article-summary-container {
    width: 100%;
    height: 100%;
}

#article-summary {
    background-color: #fff;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.article-summary-details-wrapper {
    display: flex;
    margin-top: 10px;
}

.article-summary-details-infohead {
    margin-right: 10px;
    font-weight: bold;
}

.article-summary-title {
    font-size: 2em;
}

.article-summary-details-text-info {
    flex-grow: 1;
}

.article-summary-details-text-info div {
    margin-bottom: 7px;
}

.article-summary-details-cover {
    display: flex;
}

.article-summary-details-cover div {
    align-self: center;
}

#article-summary-details-cover-img {
    max-height: 160px;
}

.no-cover {
    padding: 15px;
    border: 1px solid #8a8a8a;
    background-color: #c1c1c1;
    font-weight: bold;
}

/* Summary Styles ENDE */

/* Result Styles START */
.result-grid-item {
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
}

.result-grid-item > div {
}

/* Result Styles ENDE */

a {
    color: #00b7ff;
}

.status {
    border-width: 1px 1px 1px 7px;
    border-style: solid;
}

.status-complete {
    border-color: green;
}

.status-pending {
    border-color: orange;
}

.status-open {
    border-color: #d5d5d5;
}

.status-default {
    border: 2px solid black;
}

.storage-unit-set {
    border: 2px solid green;
}

.storage-unit-pending {
    border: 2px solid orange;
}

/* Autocomplete Styles START*/
.autocomplete {
    position: relative;
    display: inline-block;
    flex-basis: 80%;
}

/* Autocomplete Styles ENDE */

/* Modal Styles START */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-header {
    font-size: 1.7em;
    font-weight: bold;
    margin-bottom: 10px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5vh auto 5vh auto;
    padding: 20px;
    width: 50%;
    max-height: 80vh;
    overflow: hidden;
    border-radius: 10px;
}

.modal-content-storageUnits {
    max-width: 400px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Styles ENDE */

#isbn-input-error-text {
    display: none;
    font-size: 0.8em;
}

.ordercard-error-text {
    position: relative;
    top: -5px;
}

.error-text {
    color: red;
    font-size: 0.9em;
}

#isbn-not-found-text {
    display: block;
    text-align: center;
}

/* Order Card Styles START */

.partial-count-input {
    text-align: center;
    height: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
}

.partial-count-input:hover {
    cursor: pointer;
}

.result-item-customer-base {
}

.result-item-customer-container {
    display: flex;
    flex-direction: column;
}

.result-item-customer-name {
    font-size: 1.6em;
    font-weight: bolder;
}

.result-item-customer-city {
    background-color: #eaeaea;
    display: inline-block;
    padding: 3px 15px 3px 15px;
    border-radius: 10px;
}

.result-item-customer-amounts {
    align-self: center;
    margin-top: 10px;
    padding: 5px 25px 5px 25px;
    background-color: #202124;
    border-radius: 3px;
}

.result-item-customer-amounts:hover {
    cursor: pointer;
}

.result-item-customer-amounts > span {
    font-size: 1.6em;
    color: #81c995;
    font-weight: bold;
}

.result-item-input {
    font-size: 1.2em;
}

.result-item-inputs {
    column-gap: 10px;
}

.assign-button {
    width: 100%;
    font-weight: bold;
    font-size: 1.3em;
}

.partial-input {
    flex-basis: 20%;
}

/* Order Card Styles ENDE


/* Allgemeine Styles */

.btn {
    border: none;
    padding: 7px 0px 7px 0px;
    border-radius: 25px;
    background-color: #383e42;
    color: #fff;
    cursor: pointer;
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

#storage-units-table,
#storage-unit-details-table {
    width: 100%;
    border-spacing: 0;
}

#storage-units-table th,
#storage-unit-details-table th {
    text-align: left;
}

/* Storage Units Style START */
#storage-units-wrapper {
    background-color: #fff;
    box-shadow: 0px 0px 3px -2px;
}

#storage-units-table tr.completed,
#storage-unit-details-table tr.completed {
    background-color: #1eff00 !important;
}

#storage-units-table tr.pending,
#storage-unit-details-table tr.pending {
    background-color: orange !important;
}

#storage-units-table tr.pending,
#storage-unit-details-table tr.pending {
    background-color: orange !important;
}

#storage-units-table th:first-child,
#storage-units-table td:first-child,
#storage-unit-details-table th:first-child,
#storage-unit-details-table td:first-child {
    padding-left: 15px;
}

#storage-units-table td:last-child,
#storage-unit-details-table td:last-child {
}

#storage-units-table th,
#storage-unit-details-table th {
    top: 0;
    position: sticky;
    background-color: #4a4a4a;
    color: #fff;
}

#storage-unit-details-expand-table th {
    background-color: transparent;
    color: #000;
}

table#storage-unit-details-expand-table tbody tr:hover {
    background-color: green;
    cursor: default;
}

table#storage-units-table tr:hover,
table#search-log-table tr:hover {
    background-color: rgb(138, 138, 138);
    cursor: pointer;
}

table#storage-units-table tr.active:hover,
table#storage-units-table tr.storage-unit-detail-wrapper:hover {
    background-color: transparent;
    cursor: default;
}

table#storage-units-table tr.storage-unit-detail-wrapper > td {
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

#storage-units-table td,
#storage-units-table th {
    padding: 10px 7px 10px 7px;
    border-bottom: 1px solid #d0d0d0;
}

.new-storage-unit-button {
    margin: 0 auto;
    display: block;
    padding: 7px;
    font-weight: bold;
    background-color: #0383f9;
}

.storage-units-page-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.page-header-title {
    font-size: 1.7em;
    font-weight: bold;
}

.storage-units-table-inline-btn {
    padding: 4px 7px 4px 7px;
}

/* Storage Units Style ENDE */

#search-log-wrapper {
    margin-top: 20px;
}

.search-log-header {
    display: block;
    font-weight: bolder;
}

table#search-log-table {
    width: 100%;
    border-spacing: 0;
}

table#search-log-table tr td {
    padding: 4px 4px 4px 0px;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ts-wrapper.multi .ts-control > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

#customer-select-container {
    display: flex;
    align-items: stretch;
}

#customer-orders-wrapper {
    background-color: #ffffff;
}

.customer-select-wrapper {
    width: 100%;
}

.customer-metrics-card-wrapper {
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    margin-bottom: 10px;
}

.customer-metrics-card {
    background-color: #fff;
    min-width: 150px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.customer-metrics-card-header {
    font-weight: bolder;
    display: block;
}

.customer-metrics-card-content {
    align-self: center;
}

.storage-unit-name-input,
.edit-storage-unit-name-input {
    padding: 7px;
    border-radius: 5px;
    flex-grow: 1;
}

.storage-unit-name-label {
    font-weight: bold;
    margin-right: 15px;
    align-self: center;
}

.update-storage-unit-btn-wrapper,
.delete-storage-unit-btn-wrapper,
.create-storage-unit-btn-wrapper {
    text-align: right;
}

.update-storage-unit-btn,
.delete-storage-unit-btn,
.create-storage-unit-btn {
    padding: 7px 10px 7px 10px;
    font-weight: bold;
}

.delete-storage-unit-btn {
    background-color: red;
}

.new-storage-unit-form {
    margin-bottom: 10px;
    display: flex;
}

.expand-arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.down {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.up {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.pallet-icon {
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" width="150px" height="150px" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="m603.75 446.25h-17.5v-420c0-2.3203-0.92188-4.5469-2.5625-6.1875s-3.8672-2.5625-6.1875-2.5625h-455c-4.832 0-8.75 3.918-8.75 8.75v420h-17.5c-4.832 0-8.75 3.918-8.75 8.75v78.75c0 2.3203 0.92188 4.5469 2.5625 6.1875s3.8672 2.5625 6.1875 2.5625h52.5c2.3203 0 4.5469-0.92188 6.1875-2.5625s2.5625-3.8672 2.5625-6.1875v-35h157.5v35c0 2.3203 0.92188 4.5469 2.5625 6.1875s3.8672 2.5625 6.1875 2.5625h52.5c2.3203 0 4.5469-0.92188 6.1875-2.5625s2.5625-3.8672 2.5625-6.1875v-35h157.5v35c0 2.3203 0.92188 4.5469 2.5625 6.1875s3.8672 2.5625 6.1875 2.5625h52.5c2.3203 0 4.5469-0.92188 6.1875-2.5625s2.5625-3.8672 2.5625-6.1875v-78.75c0-2.3203-0.92188-4.5469-2.5625-6.1875s-3.8672-2.5625-6.1875-2.5625zm-245 0v-201.25h70v67.34c0 3.2891 1.8438 6.3008 4.7734 7.793 2.9297 1.4961 6.4492 1.2227 9.1133-0.70703l21.113-15.305 21.113 15.301c2.6641 1.9297 6.1836 2.2031 9.1133 0.71094 2.9297-1.4961 4.7734-4.5078 4.7734-7.793v-67.34h70v201.25zm87.5-201.25h35v50.191l-12.363-8.9609v0.003906c-3.0664-2.2227-7.207-2.2227-10.273 0l-12.363 8.957zm122.5-17.5h-210v-192.5h70v64.293c0 3.2578 1.8086 6.2461 4.6992 7.7539 2.8867 1.5117 6.375 1.2891 9.0508-0.57422l21.25-14.781 21.25 14.789c2.6758 1.8594 6.1641 2.082 9.0547 0.57031 2.8867-1.5078 4.6953-4.5 4.6953-7.7578v-64.293h70zm-122.5-192.5h35v47.547l-12.5-8.6953c-3.0039-2.0938-6.9961-2.0938-10 0l-12.5 8.6953zm-227.5 0h35v47.547l-12.5-8.6953c-3.0039-2.0938-6.9961-2.0938-10 0l-12.5 8.6953zm-87.5 0h70v64.293c0 3.2578 1.8086 6.2461 4.6992 7.7539 2.8867 1.5117 6.375 1.2891 9.0508-0.57422l21.25-14.781 21.25 14.789c2.6758 1.8594 6.1641 2.082 9.0547 0.57031 2.8867-1.5078 4.6953-4.5 4.6953-7.7578v-64.293h70v192.5h-210zm87.5 210h35v50.191l-12.363-8.9609v0.003906c-3.0664-2.2227-7.207-2.2227-10.273 0l-12.363 8.957zm-87.5 0h70v67.34c0 3.2891 1.8438 6.3008 4.7734 7.793 2.9297 1.4961 6.4492 1.2227 9.1133-0.70703l21.113-15.305 21.113 15.301c2.6641 1.9297 6.1836 2.2031 9.1133 0.71094 2.9297-1.4961 4.7734-4.5078 4.7734-7.793v-67.34h70v201.25h-210zm463.75 280h-35v-35c0-2.3203-0.92188-4.5469-2.5625-6.1875s-3.8672-2.5625-6.1875-2.5625h-175c-4.832 0-8.75 3.918-8.75 8.75v35h-35v-35c0-2.3203-0.92188-4.5469-2.5625-6.1875s-3.8672-2.5625-6.1875-2.5625h-175c-4.832 0-8.75 3.918-8.75 8.75v35h-35v-61.25h490z"/></svg>');
}

.arrow-icon {
    display: inline-block;
    width: 30px;
    height: 17px;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" width="30px" height="30px" viewBox="0 0 750 750" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="m518 280c0-2.5898-1.5664-6.0312-3.1562-7.7031l-89.598-95.203c-4.1836-4.3242-10.961-4.8242-15.836-0.4375-4.3594 3.9258-4.4688 11.578-0.4375 15.84l71.922 76.301h-287.69c-6.1875 0-11.199 5.0156-11.199 11.199 0 6.1875 5.0156 11.199 11.199 11.199h287.69l-71.922 76.301c-4.0312 4.2617-3.7461 11.727 0.4375 15.836 4.4141 4.3398 11.719 3.9531 15.836-0.4375l89.598-95.199c2.6328-2.582 3.1133-5.0703 3.1562-7.6992z"/></svg>');
}

#isbn-redirect-wrapper {
    font-size: 1.2em;
    margin-top: 15px;
    text-align: center;
}

.isbn-redirect-input {
    padding: 8px 5px 8px 5px;
    border-radius: 3px;
}

.isbn-redirect-btn {
    font-size: 0.8em;
    padding: 7px 10px 7px 10px;
    font-weight: bolder;
}

.collapse-controller {
    display: none;
}

.collapse-button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.5em;
    padding: 0.5em;
}

@media only screen and (max-width: 600px) {
    .collapse-controller {
        display: block;
    }

    .article-summary-details-wrapper {
        display: none;
    }

    #article-summary-container {
        width: 100vw;
        position: relative;
        margin-left: -50vw;
        left: 50%;
    }

    #article-summary {
        padding: 2vw;
    }

    .article-summary-title {
        font-size: 1.33em;
        text-wrap: pretty;
    }

    .result-item-customer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .result-item-customer-amounts {
        margin-top: 0;
        white-space: nowrap;
        padding: 4px 12px 4px 12px;
    }

    .result-item-customer-amounts > span {
        font-size: 1.2em;
    }

    .result-item-customer-name {
        font-size: 1.2em;
    }

    .result-item-customer-base {
        flex-grow: 1;
    }

    .head-grid-container {
        grid-template-columns: 1fr;
    }

    #result-grid-container {
        grid-template-columns: 1fr;
    }

    .page-header-title {
        margin-left: 0.5em;
    }

    .sidenavi-items {
        padding-left: 0.5em;
    }

    .container {
        padding-inline: 0.25em;
    }

    table#search-log-table tr {
        font-size: 1.125em;
        padding-block: 0.5em;
    }

    .result-grid-item.collapsed {
        & .result-item-upper-header {
            display: none;
        }

        & .result-item-inputs {
            display: none;
        }

        & .assign-button {
            display: none;
        }

        & .result-item-customer-container {
            margin: 0;
        }
    }
}