html {
    height: 100vh;
    overflow-y: scroll;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    font-size: 100%;
    --background: white;
    --border-radius: 7px;
    --box-background-color: red;
    --box-background-error-color: #B00020;
    --box-color: #4785C5;
    --box2-background-color: red;
    --title-color: white;
    --text0-color: white;
    --text1-color: #4785C5;
    --text2-color: #25CA67; 
    --text3-color: #6928F4;
    --text4-color: #385F96;
    --text5-color: orange;
    --text0-error-color: red;
    --text0-disabled-color: gray;
    --button1-background-color: #385F96;
    --button1-color: white;
    --button1-border-radius: 14px;
    --button2-background-color: #385F96;
    --button2-color: white;
    --button2-border-radius: 14px;
    --button3-background-color: red;
    --button3-color: white;
    --button3-border-radius: 14px;

    --check-box-size: 32px;
    --check-box-color: white;
    --check-box-background-color: #385F96;

    --input-price-color: #333;
    --input-price-border-color: #25CA67;

    --spinner-color: #25CA67;

    background: var(--background);

    --header-height: 80px;
    --footer-height: 70px;
    --left-sidebar-width: 102px; /* 88px */
    --right-sidebar-width: 540px;
    --grid-gap: 0.2rem;
    --grid-border-color: rgba(0, 0, 0, 0.3);

    --index-header-height: 90px;
    --index-footer-height: 120px;

    --comic-left-sidebar-width: 102px;
    --comic-right-sidebar-width: 540px;
    --comic-footer-height: 300px;

    --background-cover-height: 60%;
    --comic-cover-width: 400px;
    --comic-cover-height: 616px;
    --comic-cover-normal-width: 175px;
    --comic-cover-normal-height: 266px;
    --comic-cover-small-width: calc(175px * 0.7);
    --comic-cover-small-height: calc(266px * 0.7);
    --comic-cover-very-small-width: calc(175px * 0.5);
    --comic-cover-very-small-height: calc(266px * 0.5);
    --comic-cover-normal-banner-height: 30px;
    --comic-cover-normal-banner-width: 50px;
    --comic-cover-main-index-width: calc(400px * 0.8);
    --comic-cover-main-index-height: calc(616px * 0.8);

    --comic-user-info-height: 60px;

    --calendar-header-height: 76px;
    --calendar-left-sidebar-width: 102px;
    --calendar-right-sidebar-width: 420px;
    --calendar-header-foc-date-border-radius: 24px;

    --filter-menu-publishers-container-height: 240px;
    --filter-menu-format-container-height: 240px;

    --admin-main-menu-border-radius: 24px;
    --admin-main-results-height: 180px;
    --admin-comic-type-width: 70px;

    --background-cover-opacity: 0.48; /* 0.12 */
    --text-opacity: 0.8;

    --textarea-disabled-color: rgba(255, 255, 255, 0.48);
    --textarea-border-radius: 12px;

    --scroll-bar-width-normal: 16px;
    --scroll-bar-width-thin: 8px;

    --store-orders-display-method-1-width-publisher: 220px;
    --store-orders-display-method-1-width-sku: 120px;
    --store-orders-display-method-1-width-release-date: 120px;
    --store-orders-display-method-1-width-date-created: 260px;
    --store-orders-display-method-1-width-srp: 80px;
    --store-orders-display-method-1-width-discount: 80px;
    --store-orders-display-method-1-width-quantity: 80px;
    --store-orders-display-method-1-width-arrived: 60px;
    --store-orders-display-method-1-width-title: 580px;
    --store-orders-display-method-1-width-customer-name: 260px;
    --store-orders-display-method-1-width-edit-button: 100px;
    --store-filter-item-width: 380px;

    --store-arrivals-arrived-width: 300px;
    --store-packing-slips-name-customer-width: 360px;

    --dashboard-ready-to-order-total-items-width: 140px;
    --dashboard-ready-to-order-total-price-width: 230px;
    --dashboard-ready-to-order-button-width: 160px;

    --search-customer-width: 180px;
    --search-title-width: 300px;

    --input-quantity: 68px;
    --input-sku: 120px;
    --input-sku-barcode: 170px;

    --dashboard-header-height: 76px;
    --dashboard-left-sidebar-width: 102px;
    --dashboard-right-sidebar-width: 360px;

    --info-dashboard-notifications-date-width: 270px;

    --stores-logo-width: 150px;
    --stores-logo-heigh: 150px;
}

@font-face {
    font-family: 'AvenirLTStd-Light'; /*a name to be used later*/
    src: url('/fonts/AvenirLTStd-Light.otf') format('opentype'); /*URL to font*/
}

@font-face {
    font-family: 'AvenirLTStd-Medium'; /*a name to be used later*/
    src: url('/fonts/AvenirLTStd-Medium.otf') format('opentype'); /*URL to font*/
}

@font-face {
    font-family: 'AvenirLTStd-Heavy'; /*a name to be used later*/
    src: url('/fonts/AvenirLTStd-Heavy.otf') format('opentype'); /*URL to font*/
}

::-webkit-scrollbar {
    width: var(--scroll-bar-width-normal);
}

::-webkit-scrollbar-track {
    background-color: var(--background);
}

::-webkit-scrollbar-thumb {
    background-color: var(--text2-color);
}

.dark-mode {
  --background: #fff;
  --sidebar-background: #eee;
  --box-background-color: #fff;
  --box-background-error-color: #B00020;
  --box-color: #4785C5;
  --box2-background-color: #eee;
  --title-color: #333;
  --text0-color: #555;
  --text1-color: #4785C5;
  --text2-color: #E2001A;
  --button1-background-color: #4785C5;
  --button1-color: #666;
  --button2-background-color: #E2001A;
  --button2-color: #fff;
  --button3-background-color: #E2001A;
  --button3-color: #666;
  --check-box-background-color: #758FAA;
  --check-box-color: #fff;
  --button-textcolor: #fff;
  

  background: var(--background);
}

/* .dark-mode {
    --background: #121212;
    --box-background-color: black;
    --box-background-error-color: #B00020;
    --box-color: #4785C5;
    --box2-background-color: #121212;
    --title-color: white;
    --text0-color: white;
    --text1-color: #4785C5;
    --text2-color: #25CA67;
    --button1-background-color: #385F96;
    --button1-color: white;
    --button2-background-color: #25CA67;
    --button2-color: white;
    --button3-background-color: red;
    --button3-color: white;
    --check-box-background-color: #385F96;
    --check-box-color: white;

    background: var(--background);
}
*/

.index-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--left-sidebar-width) calc(100% - var(--left-sidebar-width));
    grid-template-rows: var(--index-header-height) auto auto;
    grid-template-areas: 
        "index-left-sidebar index-header"
        "index-left-sidebar index-main"
        "index-left-sidebar index-footer"
}

.comic-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--comic-left-sidebar-width) calc(100% - var(--comic-left-sidebar-width) - var(--comic-right-sidebar-width)) var(--comic-right-sidebar-width);
    grid-template-rows: auto auto;
    grid-template-areas:
        "comic-left-sidebar comic-main comic-right-sidebar"
        "comic-left-sidebar comic-footer comic-footer"
}

.calendar-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--calendar-left-sidebar-width) calc(100% - var(--calendar-left-sidebar-width) - var(--calendar-right-sidebar-width)) var(--calendar-right-sidebar-width);
    grid-template-rows: var(--calendar-header-height) auto;
    grid-template-areas: 
        "calendar-left-sidebar calendar-header calendar-header"
        "calendar-left-sidebar calendar-main calendar-right-sidebar"
}

.store-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--left-sidebar-width) calc(100% - var(--left-sidebar-width));
    grid-template-rows: auto;
    grid-template-areas: 
        "store-left-sidebar store-main"
}

.dashboard-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--dashboard-left-sidebar-width) calc(100% - var(--dashboard-left-sidebar-width));
    grid-template-rows: auto;
    grid-template-areas: 
        "dashboard-left-sidebar dashboard-main"
}

.info-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--left-sidebar-width) calc(100% - var(--left-sidebar-width));
    grid-template-rows: var(--header-height) auto;
    grid-template-areas: 
        "info-left-sidebar info-header"
        "info-left-sidebar info-main"
}

.tracked-series-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--left-sidebar-width) calc(100% - var(--left-sidebar-width));
    grid-template-rows: auto;
    grid-template-areas: 
        "tracked-series-left-sidebar tracked-series-main"
}

.orders-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--left-sidebar-width) calc(100% - var(--left-sidebar-width));
    grid-template-rows: auto;
    grid-template-areas: 
        "orders-left-sidebar orders-main"
}

.stores-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: var(--left-sidebar-width) calc(100% - var(--left-sidebar-width));
    grid-template-rows: auto;
    grid-template-areas: 
        "stores-left-sidebar stores-main"
}

.help-container {
    display: grid;
    height: 100vh;
    max-width: 100%;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "help-main"
}

.index-header {
    grid-area: index-header;
}

.index-footer {
    grid-area: index-footer;
}

.index-main {
    grid-area: index-main;
}

.index-left-sidebar {
    grid-area: index-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.comic-left-sidebar {
    grid-area: comic-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.comic-right-sidebar {
    grid-area: comic-right-sidebar;
}

.comic-main {
    grid-area: comic-main;
}

.comic-footer {
    grid-area: comic-footer;
    overflow-wrap: break-word;
}

.calendar-header {
    grid-area: calendar-header;
    border-bottom: 0px solid var(--grid-border-color);
}

.calendar-left-sidebar {
    grid-area: calendar-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.calendar-main {
    grid-area: calendar-main;
}

.calendar-right-sidebar {
    grid-area: calendar-right-sidebar;
}

.store-main {
    grid-area: store-main;
}

.store-left-sidebar {
    grid-area: store-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.dashboard-left-sidebar {
    grid-area: dashboard-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.dashboard-main {
    grid-area: dashboard-main;
    /*background: yellow;*/
}

.info-header {
    grid-area: info-header;
    border-bottom: 0px solid var(--grid-border-color);
}

.info-main {
    grid-area: info-main;
}

.info-left-sidebar {
    grid-area: info-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.tracked-series-main {
    grid-area: tracked-series-main;
}

.tracked-series-left-sidebar {
    grid-area: tracked-series-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.orders-main {
    grid-area: orders-main;
}

.orders-left-sidebar {
    grid-area: orders-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.stores-main {
    grid-area: stores-main;
}

.help-main {
    grid-area: help-main;
}

.stores-left-sidebar {
    grid-area: stores-left-sidebar;
    background: var(--sidebar-background);
    border-right: .5px solid var(--grid-border-color);
    min-height: 100vh;
}

.flex-box-empty-space {
    width: auto;
    flex-grow: 1;
}

#comic-background-container {
    z-index: -1;
}

.comic-background-cover {
    opacity: var(--background-cover-opacity);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: var(--background-cover-height);
}

.comic-background-container-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--background-cover-height);
    background: linear-gradient(to bottom, rgba(255, 255, 255, var(--background-cover-opacity)) 0%, var(--background) 100%);
}

.comic-background-image {
    width: auto;
    height: 100%;
    /*transform-origin: top left;*/
    transform: scale(3.5);
    margin-top: 20%;
}

@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: calc(var(--check-box-size) - 24px);
  }
  50% {
    height: calc(var(--check-box-size) - 14px);
    width: calc(var(--check-box-size) - 24px);
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: calc(var(--check-box-size) - 24px);
  }
  50% {
    height: calc(var(--check-box-size) - 14px);
    width: calc(var(--check-box-size) - 24px);
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: calc(var(--check-box-size) - 24px);
  }
  50% {
    height: calc(var(--check-box-size) - 14px);
    width: calc(var(--check-box-size) - 24px);
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: calc(var(--check-box-size) - 24px);
  }
  50% {
    height: calc(var(--check-box-size) - 14px);
    width: calc(var(--check-box-size) - 24px);
  }
}

/* http://freefrontend.com/css-checkboxes/ */

.checkbox {
    background-color: var(--check-box-background-color);
    border: 0px solid white;
    border-radius: var(--border-radius);
    display: inline-block;
    height: var(--check-box-size);
    width: var(--check-box-size);
}

.checkbox label {
    display: block;
    height: var(--check-box-size);
    position: relative;
    width: var(--check-box-size);
    cursor: pointer;
}

.checkbox label:after {
    /*
    This element has a border on the right, and top. By rotating it looks like a check symbol, but the wrong way. That's why I'm flipping it with scaleX(-1)
    */
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    /*
    I want to position the symbol using the left top, because when increasing the width and height of an object, it expands from the top left corner as well. That is what makes it looks like it's being drawn.
    */
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 4px solid transparent;
    border-top: 4px solid transparent;
    content: '';
    display: block;
    height: calc(var(--check-box-size) - 14px);
    left: calc(var(--check-box-size) - 28px);
    position: absolute;
    top: calc(var(--check-box-size) - 15px);
    width: calc(var(--check-box-size) - 24px);
}

.checkbox label:hover:after {
    border-color: rgba(255,255,255,.2);
}

.checkbox input {
    display: none;
}

.checkbox input:checked + label:after {
    -webkit-animation: check 0.8s;
    -moz-animation: check 0.8s;
    -o-animation: check 0.8s;
    animation: check 0.8s;
    border-color: var(--check-box-color);
}

.checkbox.checkbox-alt label:hover:after {
    -webkit-animation: check 0.8s ease infinite;
    -moz-animation: check 0.8s ease infinite;
    -o-animation: check 0.8s ease infinite;
    animation: check 0.8s ease infinite;
}

.checkbox.checkbox-alt input:checked + label:after {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}

.checkbox-small {
    transform: scale(0.7);
}

.vertical-align {
    display: flex;
    justify-content: left;
    align-items: center;
}

.hide-cell, .hide-row, .hide-button, .hide-cell-filtertype, .hide-cell-filterpublisher, .hide-cell-filterordered, .hide-cell-filterpulllist, .hide-cell-filterwishlist {
    display: none !important;
}

.disable-button {
    pointer-events: none !important;
}

.disable-button text {
    color: grey !important;
}

.textarea {
    width: calc(100% - 4px - 4px);
    width: 100%;
    color: #555;
    background-color: transparent;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
    line-height: 1.2;
    resize: none;
    border: 1px solid var(--button1-background-color);
    box-shadow: 0px 0px lightgrey, 0px 0px lightgrey, 0px 0px lightgrey;
    border-color: lightgrey;
    border-radius: 0;
    -webkit-appearance: none;
    align-content: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    border-radius: var(--textarea-border-radius);
    overflow: hidden;
}
.textarea.margin-20 {
    width: calc(100% - 20px);
}
.textarea.body { 
    line-height: normal;
    align-content: normal;
}

.textarea:focus {
    outline: none !important;
    border: 1px solid var(--button1-background-color);
}

.textarea:disabled {
    border: 1px solid var(--textarea-disabled-color);
}

.input-price {
    color: var(--input-price-color);
    background-color: transparent;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    width: 70px;
    height: 24px;
    line-height: 24px;
    margin-right: 4px;
    text-indent: 4px;
    border: 1px solid var(--input-price-border-color);
    box-shadow: 0px 0px lightgrey, 0px 0px lightgrey, 0px 0px lightgrey;
    border-radius: 0;
    -webkit-appearance: none;
    padding-top: 3px;
}

.input-text {
    color: var(--input-price-color);
    background-color: transparent;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    width: auto;
    height: 24px;
    line-height: 24px;
    margin-right: 4px;
    text-indent: 4px;
    border: 1px solid var(--input-price-border-color);
    box-shadow: 0px 0px lightgrey, 0px 0px lightgrey, 0px 0px lightgrey;
    border-radius: 0;
    -webkit-appearance: none;
    padding-top: 3px;
}

.input-price:focus, .input-text:focus {
    outline: none !important;
    border: 1px solid var(--input-price-border-color);
}

.input-text-width-600 {
    width: 600px !important;
}

.print-container-99012 {
    width: 88mm;
    height: 35mm;
    border: 1px solid black;
    background: white;
}

.print-container-99010 {
    width: 74mm;
    height: 26mm;
    border: 1px solid black;
    background: white;
}

.print-99012 {
    width: 82mm;
    height: 35mm;
}

.print-99010 {
    width: 74mm;
    height: 26mm;
}

.print-99012-header {
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: black;
    padding-top: 4mm;
}

.print-99012-price {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    margin-top: 5px;
    font-size: 1.6em;
    color: black;
}

.print-99010-header {
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: black;
}

.print-99010-price {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: black;
}

.message {
    display: none;
    position: fixed;
    z-index: 1003;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.6);
}

.message-content {
    position: absolute;
    background-color: var(--button1-background-color);
    border-radius: var(--button1-border-radius);
    width: auto;
    height: auto;
    display: table;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

message-text {
    display: inline-block;
    background-color: transparent;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.3em;
    text-align: center;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    color: #fff;
}

#spinner-placeholder {
    height: 100%;
    width: 100%;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.spinner {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid var(--spinner-color);
    width: 22px;
    height: 22px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.spinner-small {
    width: 18px;
    height: 18px;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ajax-file-upload-statusbar {
    border: 1px solid var(--button1-background-color);
    margin-top: 10px;
    padding-bottom: 10px;
    width: 250px;
}

.ajax-file-upload-filename {
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    padding-top: 4px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: var(--text0-color);
}

.ajax-file-upload-filesize {
    width: 50px;
    height: auto;
    margin: 0px 5px 5px 0px;
    display: inline-block;
    vertical-align: middle;
}

.ajax-file-upload-progress {
    position: relative;
    width: 250px;
    background-color: transparent; 
    border: 1px solid transparent;
    border-radius: var(--button1-border-radius);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: white;
    margin-left: 10px;
}

.ajax-file-upload-bar {
    /* progess bar */
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    background-color: var(--button1-background-color); 
    border: 1px solid var(--button1-background-color);
    border-radius: var(--button1-border-radius);
    width: 250ox;
    height: 30px;
    line-height: 30px;
    color: white;
}

.ajax-file-upload-percent {
    position: absolute;
    display: inline-block;
    /*top: 16px;*/
    left: 48%
}

.ajax-file-upload-red {
    background-color: red;
    display: inline-block;
    color: white;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 1px;
    /*padding-bottom: 2px;
    padding-top: 2px;*/
    cursor: pointer;
    vertical-align: top;
    text-align: center;
    margin-left: 10px;
    border: 1px solid red;
    border-radius: var(--button1-border-radius);
}

.ajax-file-upload-green {
    background-color: #77b55a;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    display: inline-block;
    color: #fff;
    font-family: arial;
    font-size: 13px;
    font-weight: normal;
    padding: 4px 15px;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 0 1px 0 #5b8a3c;
    vertical-align: top;
    margin: 5px 10px 5px 0px;
}

.ajax-file-upload {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    border-radius: var(--button1-border-radius);
    padding-top: 2px;
    margin-top: 4px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    cursor:pointer;
    line-height: 30px;
    height: 30px;    
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    background: var(--button1-background-color);
    border: 1px solid var(--button1-background-color);
    vertical-align: middle;
}

.ajax-file-upload:hover {
    border: 1px solid white;
}

.ajax-upload-dragdrop {
    border: 2px dotted var(--button1-background-color);
    width: calc(100% - 4px) !important;
    text-align: left;
    vertical-align: middle;
    padding-top: 4px;
    padding-bottom: 4px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: white;
    background-color: var(--box-background-color);
}

.ajax-file-upload-preview {
    max-width: 100%;
    padding-top: 10px;
    padding-left: 10px;
}

.ajax-file-upload-error {
    margin-top: 2px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: red;
}

.state-hover {
    border: 2px solid var(--button1-background-color);
}

.ajax-file-upload-container {
    background-color: var(--box-background-color);
    width: calc(100% - 2px);
}

#message-ok-button-placeholder {
    display: block;
    margin-bottom: 20px;
}

#message-ok-button {
    display: inline-block;
    color: white;
    background-color: transparent;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    cursor: pointer;
    border: 1px solid white;
    border-radius: var(--button1-border-radius);
    padding-top: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    -o-transition:color .2s ease-out, background .4s ease-in;
    -ms-transition:color .2s ease-out, background .4s ease-in;
    -moz-transition:color .2s ease-out, background .4s ease-in;
    -webkit-transition:color .2s ease-out, background .4s ease-in;
    transition:color .2s ease-out, background .4s ease-in;
    margin-bottom: 10px;
    text-align: center;
    display: table;
    margin: 0 auto;
}

#message-ok-button:focus {
    outline: none !important;
    border: 0;
}

.text0-color {
    color: var(--text0-color) !important;
}

.text1-color {
    color: var(--text1-color) !important;
}

.text5-color {
    color: var(--text5-color) !important;
}

.text0-error-color {
    color: var(--text0-error-color) !important;
}

.text0-disabled-color {
    color: var(--text0-disabled-color) !important;
}

.hilight-icon {
    filter: invert(52%) sepia(33%) saturate(898%) hue-rotate(91deg) brightness(113%) contrast(97%);
}

.no-opacity {
    opacity: 1.0 !important;
}

.opacity-high {
    opacity: 0.87;
}

.opacity-medium {
    opacity: 0.6;
}

.opacity-low {
    opacity: 0.38;
}

.margin-top-5 {
    margin-top: 5px;
}

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

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

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

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

.margin-bottom-20 {
    margin-bottom: 20px;
}

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

.margin-left-5 {
    margin-left: 5px;
}

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

.margin-left-20 {
    margin-left: 20px;
}

.margin-left-25 {
    margin-left: 25px;
}

.margin-left-30 {
    margin-left: 30px;
}

.margin-right-5 {
    margin-right: 5px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px;
}

.no-border {
    border: none !important;
}

.no-hover {
    pointer-events: none !important;
}

.no-margin-top {
    margin-top: 0px !important;
}

.no-margin-bottom {
    margin-bottom: 0px !important;
}

.no-margin-left {
    margin-left: 0px !important;
}

.no-margin-right {
    margin-right: 0px !important;
}

.no-padding-left {
    padding-left: 0px !important;
}

.no-padding-right {
    padding-right: 0px !important;
}

.blur {
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
}

.no-transform {
    transform: scale(1.0) !important;
}

.no-scrolling {
    position: fixed;
    pointer-events: none;
}

.shine {
    background: linear-gradient(90deg, #000, #fff, #000);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 80%;
    animation: shine 3s linear infinite;
    position: relative;
}

@keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
  }
}

.fadeIn {
    animation: fadeIn 2s infinite alternate;
}

@keyframes fadeIn { 
  from { opacity: 0; } 
}

.search-customer {
    display: inline-block;
    margin-top: 14px;
    margin-left: 14px;
    width: var(--search-customer-width);
}

.search-title {
    display: inline-block;
    margin-top: 14px;
    margin-left: 14px;
    width: var(--search-title-width);
}

.input-quantity {
    display: inline-block;
    margin-top: 14px;
    margin-left: 14px;
    width: var(--input-quantity);
}

.input-sku {
    display: inline-block;
    margin-top: 14px;
    margin-left: 14px;
    width: var(--input-sku);
}

.input-sku-barcode {
    display: inline-block;
    margin-top: 14px;
    margin-left: 14px;
    width: var(--input-sku-barcode);
}

.menu-button {
    display: inline-block;
    background-color: transparent;
    color: var(--text0-color);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    width: auto;
    position: relative;
}

.menu-button:hover {
    color: var(--text0-color);
}

.menu-button-selected {
   color: var(--text2-color) !important;
}

.menu-button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--text2-color);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
  color: white !important;
}

.menu-button:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.menu-button2 {
    display: inline-block;
    background-color: transparent;
    color: var(--text0-color);
    font-family: 'AvenirLTStd-Heavy';
    font-size: 1.5em;
    cursor: pointer;
    border: none;
    width: auto;
    position: relative;
}

.menu-button2:hover {
    color: var(--text0-color);
}

.menu-button2-selected {
   color: var(--text2-color) !important;
}

.menu-button2:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--text2-color);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
  color: white !important;
}

.menu-button2:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.normal-button {
    display: inline-block;
    background-color: var(--button1-background-color);
    color: var(--button-textcolor);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    cursor: pointer;
    border: 1px solid var(--button1-background-color);
    border-radius: var(--button1-border-radius);
    padding-top: 8px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    width: auto;
}

.normal-button:hover {
    border: 1px solid var(--button1-color);
}

.delete-button {
    display: inline-block;
    background-color: var(--button3-background-color);
    color: var(--button3-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    cursor: pointer;
    border: 1px solid var(--button3-background-color);
    border-radius: var(--button3-border-radius);
    padding-top: 8px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    width: auto;
}

.delete-button:hover {
    border: 1px solid var(--button3-color);
}

.box-title {
    display: block;
    font-family: 'AvenirLTStd-Medium';
    color: var(--title-color);
    font-size: 1.6em;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.header {
    display: block;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
    color: white;
    margin-left: 15px;
    margin-right: 15px;
}

.header2 {
    display: block;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: white;
}

.input-block {
    position: relative;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    padding-right: 24px;
}

.input-block input {
  font-family: inherit;
  font-size: inherit;
  color: var(--text0-color);
  width: 100%;
  padding: 8px 8px;
  border-radius: var(--border-radius);
  border: 1px solid #888;
  outline: none;
  background: none;
}

.input-block span.placeholder {
    position: absolute;
    margin: 10px 0px; /* 12px 0px*/
    padding: 0px 0px;
    font-family: inherit;
    font-size: inherit;
    color: var(--text0-color);
    display: flex;
    align-items: center;
    top: 0;
    left: 12px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
}

.input-block input:valid + span.placeholder,
.input-block input:focus + span.placeholder {
    transform: scale(0.8) translateY(-21px); /* -23px */
    background: var(--box-background-color);
    padding-left: 6px;
    padding-right: 6px;
}

.input-block input:focus {
    color: var(--text0-color);
    border-color: var(--text1-color);
}

.input-block input:focus + span.placeholder {
    color: var(--text0-color);
}

.link {
    color: var(--text0-color);
    text-decoration: none;
    cursor: pointer;
}

.link:visited {
    color: var(--text0-color);
    text-decoration: none;
}

.link:hover {
    color: var(--text1-color);
    text-decoration: none;
    cursor: pointer;
}

.link:active {
    color: var(--text0-color);
    text-decoration: none;
}

.shaker {
    -webkit-animation:shakeIt 0.1s linear 4;
    -moz-animation:shakeIt 0.1s linear 4;
    -ms-animation:shakeIt 0.1s linear 4;
    -o-animation:shakeIt 0.1s linear 4;
    animation:shakeIt 0.1s linear 4;
    border-color:#C00;
}

@keyframes shakeIt {
    0% {transform:translateX(-6px);}
    25% {transform:translateX(6px);}
    50% {transform:translateX(-6px);}
    100% {transform:translateX(0px);}
}

.login-body {
	background: #eee;
}

#login-background {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.login-background-image {
    display: inline-block;
    width: var(--comic-cover-very-small-width);
    min-width: var(--comic-cover-very-small-width);
    height: var(--comic-cover-very-small-height);
    min-height: var(--comic-cover-very-small-height);
    opacity: 0.05;
    flex: 1;
}

#login-container {
    position: absolute;
    top:  0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#login-box {
    position: relative;
    width: 450px;
    height: 280px;
    background: var(--box-background-color);
    border-radius: var(--border-radius);
}

.login-username {
    display: inline-block;
    margin-top: 14px;
    margin-left: 14px;
    width: 180px;
}

.login-password {
    display: inline-block;
    margin-top: 14px;
    margin-left: 15px;
    width: 180px;
}

#login-information {
    display: flex;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-bottom: 20px;
}

#login-links {
    justify-content: left;
    margin-left: 15px;
    margin-right: 15px;
}

#login-continue-button {
    justify-content: right;
    margin-left: auto;
    margin-right: 15px;
}

#login-error-message {
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
}

#upload-logo {
    margin-left: 20px;
    width: 530px;
}

#comic-navigation-bar {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0px;
    /*padding-top: 20px;*/
    background: transparent;
}

#cookie-window {
    position: fixed;
    width: 100%;
    height: auto;
    bottom: 0px;
    background: black;
    z-index: 10000;
}

#cookie-window-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#cookie-window-text-container {
    margin-left: 20px;
    margin-right: 20px;
}

.cookie-window-text {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    background: transparent;
    color: var(--text0-color);
}

#cookie-window-accept-button-container {
    margin-right: 20px;
}

#cookie-window-accept-button-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#cookie-window-accept-button-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
}

#cookie-window-accept-button-button:hover {
    cursor: pointer;
}

.menu-item {
    width: calc(100% - 2px - 2px);
    height: auto;
    text-align: center;
    background: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    /*opacity: var(--text-opacity);*/
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}

.menu-item-icon {
    width: 32px;
    height: 32px;
    opacity: var(--text-opacity);
}

.menu-item-icon-notification {
    width: 18px;
    height: 18px;
}

.menu-item-text {
    width: 100%;
    height: auto;
    margin-top: 4px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 0.8em;
    background: transparent;
    color: var(--text2-color);
    text-align: center;
}

.menu-item:hover {
    background: var(--box-background-color);
    cursor: pointer;
    /*opacity: 1.0;*/
    color: var(--text2-color);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}

.menu-item:hover .menu-item-icon {
    opacity: 1.0;
}

#menu-item-my-info, #menu-item-new-pre-orders, #menu-item-my-pull-list {
    position: relative;
}

#menu-item-my-info-icon-exclamation, #menu-item-new-pre-orders-icon-exclamation, #menu-item-my-pull-list-icon-exclamation {
    position: absolute;
    top: 4px;
    right:  4px;
    color: white;
    /* filter: invert(52%) sepia(33%) saturate(898%) hue-rotate(91deg) brightness(113%) contrast(97%); green */
}

#index-menu-container {
    display: flex;
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 0px solid var(--grid-border-color);
}

#index-menu {
    display: flex;
    flex-direction: row;
    /*width: calc(100% - 15px - 15px);*/
    width: auto;
    height: auto;
    margin-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
    align-items: flex-end;
}

.index-main-store-logo {
    width: auto;
    height: 60px;
    max-height: 60px;
}

#index-main-slider {
    width: calc(100% - 20px - 20px);
    margin-left: 20px;
    margin-right: 10px;
}

#index-main-latest-news-container {
    width: calc(100% - 10px - 10px);
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 40px;
}

#index-main-latest-news-items-container {
    width: calc(100% - 10px - 10px);
    margin-top: 20px;
    margin-bottom: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.index-main-latest-news-date {
    display: inline;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text2-color);
}

.index-main-latest-news-header {
    display: inline;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text0-color);
}

#index-main-most-pulled-container {
    width: calc(100% - 10px - 10px);
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

#index-main-most-pulled-issues-container {
    /* width: calc(100% - 10px - 10px); */
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
    /* margin-left: 10px;
    margin-right: 10px; */
}

#index-main-new-and-noteworthy-container {
    width: calc(100% - 10px - 10px);
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

#index-main-new-and-noteworthy {
    display: flex;
    width: calc(100% - 20px - 20px);
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#index-main-new-and-noteworthy-info-container {
    width: calc(100% - 20px - 10px);
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 10px;
}

.index-main-noteworthy-cover {
    width: var(--comic-cover-main-index-width);
    min-width: var(--comic-cover-main-index-width);
    height: var(--comic-cover-main-index-height);
    min-height: var(--comic-cover-main-index-height);
    background-image: url("/comics/medium/47d90e6833e044e07723d7a50770b25ca36ed2777222f02e4e80cfdb08103664.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
}

.index-main-noteworthy-cover:hover {
    cursor: pointer;
}

.index-main-noteworthy-title {
    display: block;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 2.2em;
    color: var(--text0-color);
}

.index-main-noteworthy-description {
    display: block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

#index-main-noteworthy-info {
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    padding-top: 30px;
    padding-bottom: 20px;
}

.index-main-noteworthy-item {
    flex: 1;
    width: auto;
    height: auto;
    text-align: left;
}

.index-main-noteworthy-header {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text2-color);
}

.index-main-noteworthy-publisher-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text2-color);
}

.index-main-noteworthy-value {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
}

.index-main-noteworthy-publisher-value {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
}

#index-main-noteworthy-creators {
    width: auto;
    height: auto;
    background: transparent;
}

#index-main-proudly-used-by-container {
    width: calc(100% - 10px - 10px);
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

#index-main-proudly-used-by-title {
    display: flex;
    justify-content: center;
}

.index-main-proudly-used-by-header {
    display: inline-block;
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.5em;
    color: var(--text2-color);
    background: transparent;
}

.index-main-proudly-used-by-value {
    display: inline-block;
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.5em;
    color: var(--text0-color);
    background: transparent;
}

#index-main-proudly-used-by-stores-container {
    width: calc(100% - 30px - 30px);
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
}

.index-main-proudly-used-by-stores-store-cell {
    display: inline-block;
    vertical-align: top;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    transition: transform .2s;
    width: auto;
    height: 200px;
    min-height: 200px;
}

.index-main-proudly-used-by-stores-store-cell:hover {
    cursor: pointer;
}

.index-main-proudly-used-by-stores-store-logo  {
    width: auto;
    height: 200px;
}

.index-main-proudly-used-by-stores-store-name {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    margin-top: 10px;
}

#index-footer-menu-container {
    display: flex;
    flex-wrap: wrap;
    border-top: 0.5px solid var(--grid-border-color);
}

#index-footer-menu-container > div {
    flex: 1 0 26%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.index-footer-menu-item {
    padding-top: 10px;
    margin-bottom: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.index-footer-menu-item:hover {
    cursor: pointer;
}

#index-footer-copyright {
    display: inline;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

#index-footer-development {
    display: inline;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

#comic-cover-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0px;
}

#comic-cover-upload-container {
    margin-top: 10px;
    /*align-self: stretch;*/
}

#comic-cover-upload-buttons-container {
    display: block;
}

#fileuploader-cover {
    margin-top: 10px;
    width: 100%;
}

#comic-cover-upload-done-buttons-container {
    margin-top: 10px;
}

#comic-main-container {
    width: auto;
    height: auto;
    margin-left: 60px;
    margin-right: 0px;
}

#comic-main-publisher-information {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 100px;
    padding-bottom: 10px;
}

.comic-main-publisher {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.comic-main-in-shops {
    display: inline-block;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.comic-main-release-date {
    display: inline-block;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.comic-main-title {
    display: block;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 3.5em;
    color: var(--text0-color);
}

.comic-main-cover {
    width: var(--comic-cover-width);
    min-width: var(--comic-cover-width);
    height: var(--comic-cover-height);
    min-height: var(--comic-cover-height);
    margin-top: calc(var(--background-cover-height) / 1.25);
    background-image: url("/comics/medium/47d90e6833e044e07723d7a50770b25ca36ed2777222f02e4e80cfdb08103664.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
}

#comic-user-info-container {
    margin-top: 40px;
    position: absolute;
    z-index: -1;
    width: calc(100% - var(--comic-left-sidebar-width));
    height: var(--comic-user-info-height);
    background-color: transparent;
    border-top: 1px solid var(--grid-border-color);
    border-bottom: 1px solid var(--grid-border-color);
}

#comic-user-info {
    display: flex;
    align-items: center;
    width: auto;
    margin-top: 40px;
    margin-left: 60px;
    height: var(--comic-user-info-height);
    background: transparent;
    grid-gap: 10px;
}

#comic-user-info-ordered-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#comic-user-info-ordered-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
}

#comic-user-info-ordered-button:hover {
    cursor: default;
}

#comic-user-info-add-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#comic-user-info-add-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
}

#comic-user-info-add-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#comic-user-info-remove-button {
    display: inline-block;
    background-color: var(--button3-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button3-background-color);
    border-radius: var(--button3-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#comic-user-info-remove-button text {
    position: relative;
    top: 1px;
    color: var(--button3-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
}

#comic-user-info-remove-button:hover {
    border: 1px solid;
    border-color: var(--button3-color);
}

#comic-user-info-my-lists-button {
    padding-left: 10px;
    padding-top: 2px;
    opacity: var(--text-opacity);
}

#comic-user-info-my-lists-button:hover {
    cursor: pointer;
    opacity: 1.0;
}

.comic-user-info-menu-item-icon {
    padding-top: 6px;
    width: 28px;
    height: 28px;
    filter: invert(80%);
}

.comic-user-info-menu-item-text {
    width: 100%;
    height: auto;
    /*margin-top: 4px;*/
    padding-bottom: 2px;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 0.8em;
    background: transparent;
    color: var(--text0-color);
    text-align: center;
}

.comic-user-info-button-container {
    /*padding-top: 6px;*/
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    align-content: flex-end;
    text-align: center;
}

.comic-user-info-button-container:hover {
    cursor: pointer;
    background: none;
}

.comic-user-info-button-container:hover .comic-user-info-menu-item-icon {
  filter: invert(60%) sepia(50%) saturate(950%) hue-rotate(320deg) brightness(80%) contrast(120%) !important;
}

#comic-main-description {
    position: relative;
    width: auto;
    height: auto;
    /*margin-top: calc(40px + var(--comic-user-info-height) + 60px);*/
    margin-top: 40px;
    margin-left: 60px;
    margin-right: 0px;
    background-color: transparent;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.3em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

#comic-main-info {
    width: auto;
    height: auto;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    padding-top: 30px;
    padding-bottom: 20px;
    margin-left: 60px;
}

.comic-main-info-item {
    flex: 1;
    width: auto;
    height: auto;
    text-align: left;
}

.comic-main-info-header {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.comic-main-info-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

#comic-main-creators {
    width: auto;
    height: auto;
    margin-top: 30px;
    margin-left: 60px;
    margin-right: 0px;
    background: transparent;
}

.comic-main-creators-header {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
}

.comic-main-creators-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

#comic-main-variants-container {
    width: auto;
    height: auto;
    margin-top: 40px;
    margin-left: 60px;
    background: transparent;
}

#comic-main-other-variants-container {
    width: auto;
    height: auto;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
    margin-left: 60px;
    margin-right: 30px;
    margin-bottom: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 5px;
}

.comic-main-other-variants-info-header-icons {
    display: flex;
    justify-content: center;
    align-items: center;   
    width: auto;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-right: 10px;
    background: transparent;
}

.comic-main-other-variants-info-header-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: var(--text-opacity);
    filter: invert(60%);
}

.comic-main-other-variants-info-header-icon:hover {
    cursor: pointer;
    opacity: 1.0;
}

.comic-main-other-variants-info-title {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
    padding-top: 6px;
    /*opacity: var(--text-opacity);*/
}

.comic-main-other-variants-info-release-date {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text0-color);
    padding-top: 4px;
    padding-bottom: 4px;
    opacity: var(--text-opacity);
}

#comic-main-series-container {
    width: auto;
    height: auto;
    margin-top: 40px;
    margin-left: 60px;
    background: transparent;
}

.comic-main-series-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text0-color);
}

.comic-main-series-value {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
    padding-left: 2px;
}

/* https://ishadeed.com/article/css-scroll-snap/ */

#comic-main-other-issues-container {
    width: auto;
    height: auto;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
    margin-left: 60px;
    margin-right: 30px;
    margin-bottom: 140px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 5px;
}

.comic-main-other-issue-cell {
    display: inline-block;
    vertical-align: top;
    scroll-snap-align: start;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    /* padding-right: 15px; */
    transition: transform .2s;
    max-width: var(--comic-cover-normal-width);
}

.comic-main-other-issue-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    transform: scale(1.05);
}

.comic-main-other-issue-cell:hover .comic-main-other-issue-release-date {
    opacity: 1.0;
}

.comic-main-other-issue-cell:hover .comic-main-other-issue-title {
    opacity: 1.0;
}

.comic-main-other-issue-cell:hover .comic-main-other-variants-info-title {
    opacity: 1.0;
}

.comic-main-other-issue-cell:hover .comic-main-other-variants-info-release-date {
    opacity: 1.0;
}

.comic-main-other-issue-cover {
    width: var(--comic-cover-normal-width);
    min-width: var(--comic-cover-normal-width);
    height: var(--comic-cover-normal-height);
    min-height: var(--comic-cover-normal-height);
	background-image: url("/images/noimage_red_lowres.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
}

.comic-main-other-issue-release-date {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text0-color);
    padding-top: 4px;
    padding-bottom: 4px;
    opacity: var(--text-opacity);
}

.comic-main-other-issue-title {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
    padding-top: 4px;
    /*opacity: var(--text-opacity);*/
}

#calendar-header-menu-items {
    display: flex;
    align-items: flex-start;
    width: auto;
    height: 100%;
    margin-left: 20px;
    background: transparent;
    align-items: center;
}

#calendar-header-new-comics {
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 1.5em;
    color: var(--title-color);
    background: transparent;
    margin-right: 20px;
}

.calendar-header-foc-date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 36px;
	background: rgba(255,255,255,.7);
    border: 2px solid var(--text2-color);
    border-radius: var(--calendar-header-foc-date-border-radius);
    overflow: hidden;
}

.calendar-menu-item-left {
    width: auto;
    height: 100%;
    background: transparent;
    border-right: 2px solid var(--text2-color);
    margin-left: 4px;
}

.calendar-menu-item-right {
    width: auto;
    height: 100%;
    background: transparent;
    border-left: 2px solid var(--text2-color);
    margin-right: 4px;
}

.calendar-menu-item-icon {
    width: 22px;
    height: 22px;
    margin-top: 7px;
    margin-left: 14px;
    margin-right: 14px;
    opacity: var(--text-opacity);
    cursor: pointer;
    filter: invert(90%);
}

.calendar-menu-item-icon:hover {
    opacity: 1.0;
}

.calendar-menu-item-disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.calendar-menu-item-date {
    min-width: 180px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    margin-top: 2px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
}

#calendar-header-list-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 36px;
    background: transparent;
    border: 2px solid var(--text2-color);
    border-radius: var(--calendar-header-foc-date-border-radius);
    overflow: hidden;
}

#calendar-list-view-1 {
    width: auto;
    height: 100%;
    background: transparent;
    border-right: 2px solid var(--text2-color);
    margin-left: 4px;
}

#calendar-list-view-2 {
    width: auto;
    height: 100%;
    background: transparent;
    margin-left: 4px;
    margin-right: 4px;
}

#calendar-list-view-3 {
    width: auto;
    height: 100%;
    background: transparent;
    border-left: 2px solid var(--text2-color);
    margin-right: 4px;
}

#calendar-list-view-1-icon:hover, #calendar-list-view-2-icon:hover, #calendar-list-view-3-icon:hover {
    opacity: 1.0 !important;
}

#calendar-header-spinner {
    margin-left: 20px;
    min-width: 40px;
}

#calendar-menu-item-filter {
    width: auto;
    height: 36px;
    border: 2px solid var(--text2-color);
    border-radius: var(--calendar-header-foc-date-border-radius);
    margin-right: 20px;
}

.calendar-menu-item-filter-icon {
    width: 20px;
    height: 20px;
    margin-top: 8px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: var(--text-opacity);
    cursor: pointer;
    filter: invert(80%);
}

.calendar-menu-item-filter-icon:hover {
    opacity: 1.0 !important;
}

#calendar-search-container {
    margin-left: 8px;
    margin-bottom: 10px;
}

#calendar-store-deadlines {
    display: inline-block;
    margin-left: 10px;
}

.calendar-store-deadlines-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.calendar-store-deadlines-value {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
}

#calendar-main-display-method-1 {
    width: calc(100% - 20px - 10px);
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 20px;
    margin-bottom: 40px;
    margin-left: 20px;
    padding-left: 10px;
}

.calendar-main-display-method-1-cell {
    display: inline-block;
    vertical-align: top;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    transition: transform .2s;
    max-width: var(--comic-cover-normal-width);
}

.calendar-main-display-method-1-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    transform: scale(1.05);
}

.calendar-main-display-method-1-cell:hover .calendar-main-display-method-1-publisher  {
    opacity: 1.0;
}

.calendar-main-display-method-1-cell:hover .calendar-main-display-method-1-title {
    opacity: 1.0;
}

.calendar-main-display-method-1-cell:hover .calendar-main-display-method-1-release-date {
    opacity: 1.0;
}

.calendar-main-display-method-1-cover  {
    position: relative;
    width: var(--comic-cover-normal-width);
    min-width: var(--comic-cover-normal-width);
    height: var(--comic-cover-normal-height);
    min-height: var(--comic-cover-normal-height);
    background-image: url("/images/noimage_red_lowres.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
}

.calendar-main-display-method-1-cover-ordered-banner-container {
    width: 100%;
    height: auto;
}

.calendar-main-display-method-1-cover-ordered-banner-text {
    width: 100%;
    height: var(--comic-cover-normal-banner-height);
    line-height: var(--comic-cover-normal-banner-height); 
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    text-align: center;
}

.calendar-main-display-method-1-cover-no-pre-order-banner-text {
    width: 100%;
    height: var(--comic-cover-normal-banner-height);
    line-height: var(--comic-cover-normal-banner-height); 
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-error-color);
    text-align: center;
}

.calendar-main-display-method-1-publisher {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text0-color);
    padding-top: 4px;
    padding-bottom: 4px;
    opacity: var(--text-opacity);
}

.calendar-main-display-method-1-title {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
    /*opacity: var(--text-opacity);*/
}

.calendar-main-display-method-1-release-date {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text0-color);
    padding-top: 4px;
    padding-bottom: 4px;
    opacity: var(--text-opacity);
}

#calendar-main-display-method-2 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    /*padding-top: 2px;*/
    margin-bottom: 40px;
}

.calendar-main-display-method-2-cell {
    display: flex;
    flex-direction: row;
    width: calc(100% - 20px - 20px);
    min-height: var(--comic-cover-small-height);
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.calendar-main-display-method-2-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    transform: scale(1.005);
}

.calendar-main-display-method-2-cover-ordered-banner-container {
    position: relative;
    width: var(--comic-cover-normal-banner-width);
    height: 100%;
}

.calendar-main-display-method-2-cover-ordered-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

.calendar-main-display-method-2-cover-no-pre-order-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-error-color);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    white-space: nowrap;
}

.calendar-main-display-method-2-cover {
    display: inline-block;
    /*margin-left: 10px;*/
    width: var(--comic-cover-small-width);
    min-width: var(--comic-cover-small-width);
    height: var(--comic-cover-small-height);
    min-height: var(--comic-cover-small-height);
    background-image: url("/images/noimage_red_lowres.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
    }

.calendar-main-display-method-2-info {
    position: relative;
    display: inline-block;
    width: inherit;
    height: auto;
    background: transparent;
    margin-left: 10px;
    margin-right: 35px;
}

.calendar-main-display-method-2-info-header {
    display: flex;
    flex-direction: row;
    /*width: inherit;*/
    height: auto;
    background: transparent;
}

.calendar-main-display-method-2-title {
    width: auto;
    margin-top: 2px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.calendar-main-display-method-2-other-info-container {
    display: flex;
}

.calendar-main-display-method-2-publisher {
    width: auto;
    margin-top: 2px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 0.8em;
    color: var(--text2-color);
}

.calendar-main-display-method-2-other-info {
    width: auto;
    margin-top: 2px;
    margin-left: 4px;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text2-color);
}

.calendar-main-display-method-2-description {
    width: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

.calendar-main-display-method-2-sku {
    position: absolute;
    bottom: 0px;
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 0.8em;
    color: var(--text0-color);
}

.calendar-main-display-method-1-info-header-icons {
    display: flex;
    justify-content: center;
    align-items: center;   
    width: auto;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-right: 10px;
    background: transparent;
}

.calendar-main-display-method-1-info-header-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: var(--text-opacity);
    filter: invert(60%);
}

.calendar-main-display-method-1-info-header-icon:hover {
    cursor: pointer;
    opacity: 1.0;
}

.calendar-main-display-method-2-info-header-icons {
    display: flex;
    justify-content: center;
    align-items: center;   
    width: auto;
    height: auto;
    margin-left: 10px;
    margin-right: 10px;
    background: transparent;
}

.calendar-main-display-method-2-info-header-icon {
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: var(--text-opacity);
    filter: invert(60%);
}

.calendar-main-display-method-2-info-header-icon:hover {
    cursor: pointer;
    opacity: 1.0;
}

#calendar-main-display-method-3 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    padding-top: 6px;
    margin-bottom: 40px;
}

.calendar-main-display-method-3-cell {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.calendar-main-display-method-3-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    transform: scale(1.005);
}

.calendar-main-display-method-3-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: inherit;
    height: auto;
    background: transparent;
}

.calendar-main-display-method-3-title {
    padding-top: 2px;
    margin-left: 5px;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.calendar-main-display-method-3-other-info {
    padding-top: 2px;
    margin-right: 20px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

.calendar-main-display-method-3-icons {
    display: flex;
    justify-content: center;
    align-items: center;   
    width: auto;
    height: auto;
    margin-left: 10px;
    margin-right: 10px;
    background: transparent;
}

.calendar-main-display-method-3-icon {
    width: 26px;
    height: 26px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: var(--text-opacity);
    filter: invert(60%);
}

.calendar-main-display-method-3-icon:hover {
    cursor: pointer;
    opacity: 1.0;
}

.calendar-main-display-method-3-ordered-icon {
    width: 26px;
    height: 26px;
    margin-left: 20px;
    margin-right: 10px;
    opacity: var(--text-opacity);
}

#filter-menu-publishers-container {
    width: auto;
    height: var(--filter-menu-publishers-container-height);
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

#filter-menu-publishers-container::-webkit-scrollbar {
    width: var(--scroll-bar-width-thin);
}

#filter-menu-format-container {
    width: auto;
    height: var(--filter-menu-format-container-height);
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

#filter-menu-format-container::-webkit-scrollbar {
    width: var(--scroll-bar-width-thin);
}

#filter-menu-status-container {
    width: auto;
    height: var(--filter-menu-format-container-height);
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

#filter-menu-status-container::-webkit-scrollbar {
    width: var(--scroll-bar-width-thin);
}

.filter-menu-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text0-color);
    padding-bottom: 8px;
}

.filter-menu-header-value {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
    padding-bottom: 8px;
}

.filter-menu-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

.filter-menu-value {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    margin-left: 20px;
}

.filter-menu-total-value {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
    margin-left: 10px;
    margin-right: 4px;
}

#store-menu-container {
    width: 100%;
    height: auto;
    margin-top: 10px;
    padding-bottom: 10px;
    /*border-top: 2px solid var(--grid-border-color);*/
    border-bottom: 2px solid var(--grid-border-color);
}

#store-menu {
    width: calc(100% - 15px - 15px);
    height: auto;
    padding-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 10px;
}

#store-information {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.store-header {
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
    margin-right: 10px;
}

#store-logo {
    display: grid;
    /*justify-content: center;*/
    align-content: left;
    width: auto;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;

}

.store-logo-image {
    width: 200px;
    max-width: 200px;
    height: auto;
    /*border-radius: 50%;*/
}

#store-upload-store-logo {
    margin-top: 20px;
}

#store-upload-store-logo-container {
    margin-top: 20px;
}

#fileuploader-store-logo {
    margin-top: 10px;
}

#store-upload-store-logo-buttons-container {
    margin-top: 20px;
}

#store-description-buttons-container {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--grid-border-color);
}

#store-information-deadline-container {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--grid-border-color);
}

#store-price-adjustment-container {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--grid-border-color);
}

#store-label-container {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--grid-border-color);
}

#store-description {
    margin-top: 20px;
    width: 50%;
}

#store-description-save-button {
    margin-left: 40px;
}

#store-deadlines-filter-container {
    margin-top: 20px;
}

#store-comic-types-container {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--grid-border-color);
}

#store-publishers-container {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 2px solid var(--grid-border-color);
}

#store-publishers-filter-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.store-filter-menu-item {
    width: var(--store-filter-item-width);
    min-width: var(--store-filter-item-width);
    padding-top: 4px;
    padding-bottom: 4px;
}

#store-orders {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-orders-container {
    margin-top: 20px;
}

#store-orders-display-method-1-search-container {
    display: flex;
    align-items: center;
    margin-top: 34px;
}

#store-orders-display-method-1-search-customer-container {
    display: inline-block;
}

#store-orders-display-method-1-search-title-container {
    display: inline-block;
}

#store-orders-display-method-1 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    padding-top: 20px;
    margin-bottom: 40px;
}

.store-orders-display-method-1-cell-container {
    width: 100%;
}

.store-orders-display-method-1-cell {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    /*margin-right: 20px;*/
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.store-orders-display-method-1-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    /*transform: scale(1.005);*/
}

.store-orders-display-method-1-cell-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: auto;
    padding-right: 20px;
    background: transparent;
}

.store-orders-display-method-1-title, .store-orders-display-method-1-header-title {
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-orders-display-method-1-publisher {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-publisher);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: left;
}

.store-orders-display-method-1-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

.store-orders-display-method-1-release-date {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-release-date);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

.store-orders-display-method-1-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

.store-orders-display-method-1-quantity {
    padding-top: 2px;
    width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

.store-orders-display-method-2-cell-container {
    width: 100%;
}

.store-orders-display-method-2-cell {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 20px;
    /*margin-right: 20px;*/
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 20px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.store-orders-display-method-2-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    /*transform: scale(1.005);*/
}

.store-orders-display-method-2-cell-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: inherit;
    height: auto;
    background: transparent;
}

.store-orders-display-method-2-customer-name {
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-orders-display-method-2-orderdate {
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

.store-orders-display-method-2-quantity {
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

#store-packing-slips {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-packing-slips-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-packing-slips-all-container {
    height: auto;
    margin-top: 20px;
}

.store-packing-slips-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-packing-slips-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
}

#store-packing-slips-create-new-container {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-packing-slips-display-method-1 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    margin-bottom: 40px;
}

.store-packing-slips-display-method-1-cell-container {
    width: calc(100% - 0px);
    margin-left: 0px;
}

.store-packing-slips-display-method-1-cell-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-packing-slips-display-method-1-cell {
    display: flex;
    margin-top: 4px;
    margin-bottom: 4px;
    /*margin-right: 20px;*/
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.store-packing-slips-display-method-1-cell-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: auto;
    /*padding-right: 20px;*/
    background: transparent;
}

.store-packing-slips-display-method-1-cell-info-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-packing-slips-display-method-1-cell-additional-info-container {
    margin-top: 10px;
    height: 100px;
}

.store-packing-slips-display-method-1-cell-additional-info-quantity-header {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-left: 10px;
    margin-right: 2px;
}

.store-packing-slips-display-method-1-cell-additional-info-quantity-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-cell-additional-info-discount-header {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-left: 30px;
    margin-right: 2px;
}

.store-packing-slips-display-method-1-cell-additional-info-discount-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-cell-additional-info-quantity-decrease-button, .store-packing-slips-display-method-1-cell-additional-info-discount-decrease-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;
    text-align: center;   
}

.store-packing-slips-display-method-1-cell-additional-info-quantity-increase-button, .store-packing-slips-display-method-1-cell-additional-info-discount-increase-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;    
    text-align: center; 
}

.store-packing-slips-display-method-1-cell-additional-info-quantity-decrease-button text, .store-packing-slips-display-method-1-cell-additional-info-quantity-increase-button text, .store-packing-slips-display-method-1-cell-additional-info-discount-decrease-button text, .store-packing-slips-display-method-1-cell-additional-info-discount-increase-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
}

.store-packing-slips-display-method-1-cell-additional-info-quantity-decrease-button:hover, .store-packing-slips-display-method-1-cell-additional-info-quantity-increase-button:hover, .store-packing-slips-display-method-1-cell-additional-info-discount-decrease-button:hover, .store-packing-slips-display-method-1-cell-additional-info-discount-increase-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-container {
    margin-top: 10px;
    height: auto;
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-container {
    display: flex;
    flex-direction: row;
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-image-container {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-image {
    width: var(--comic-cover-small-width);
    min-width: var(--comic-cover-small-width);
    height: var(--comic-cover-small-height);
    min-height: var(--comic-cover-small-height);
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.store-packing-slips-display-method-1-item-print-label-button-container {
    margin-bottom: 10px;
    margin-left: 10px;
}

.store-packing-slips-display-method-1-item-code-container {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
	margin-left: 20px;
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell {
    width: 100%;
    height: auto;
    padding-top: 10px;
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-header {
    margin-top: 10px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-available-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-available-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-ordered-by-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 10px);
    height: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-ordered-by-name {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-ordered-by-quantity-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-ordered-by-quantity-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-ordered-by-mark-as-arrived {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-cell-additional-info-customers-info-cell-ordered-by-mark-as-arrived-date {
    display: inline-block;
    width: var(--store-arrivals-arrived-width);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
    text-align: right;
}

.store-packing-slips-display-method-1-header-arrived {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-arrived);
    min-width: var(--store-orders-display-method-1-width-arrived);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-header-quantity {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-quantity);
    min-width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-header-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-title);
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-header-customer-name {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-customer-name);
    min-width: var(--store-orders-display-method-1-width-customer-name);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-header-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    min-width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-header-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-header-discount {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-discount);
    min-width: var(--store-orders-display-method-1-width-discount);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-1-delete-button-container {
    width: 100px;
    text-align: right;
}

.store-packing-slips-display-method-1-orders-button-container {
    width: 140px;
    text-align: right;
}

.store-packing-slips-display-method-1-arrived {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-arrived);
    min-width: var(--store-orders-display-method-1-width-arrived);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-quantity {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-quantity);
    min-width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-title);
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-new-title {
    padding-top: 2px;
    margin-right: 20px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    min-width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-discount {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-discount);
    min-width: var(--store-orders-display-method-1-width-discount);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-1-datecreated {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-date-created);
    min-width: var(--store-orders-display-method-1-width-date-created);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

#store-packing-slip-import-csv-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

.store-packing-slips-display-method-2-cell-container {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.store-packing-slips-display-method-2-cell-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-packing-slips-display-method-2-cell {
    display: flex;
}

.store-packing-slips-display-method-2-cell-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: auto;
    /*padding-right: 20px;*/
    background: transparent;
}

.store-packing-slips-display-method-2-cell-info-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-packing-slips-display-method-2-cell-additional-info-container {
    margin-top: 10px;
    height: 100px;
}

.store-packing-slips-display-method-2-cell-additional-info-quantity-header {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-left: 10px;
    margin-right: 2px;
}

.store-packing-slips-display-method-2-cell-additional-info-discount-header {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-left: 10px;
    margin-right: 2px;
}

.store-packing-slips-display-method-2-cell-additional-info-quantity-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-cell-additional-info-discount-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-cell-additional-info-quantity-decrease-button, .store-packing-slips-display-method-2-cell-additional-info-discount-decrease-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;
    text-align: center;   
}

.store-packing-slips-display-method-2-cell-additional-info-quantity-increase-button, .store-packing-slips-display-method-2-cell-additional-info-discount-increase-button  {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;    
    text-align: center; 
}

.store-packing-slips-display-method-2-cell-additional-info-quantity-decrease-button text, .store-packing-slips-display-method-2-cell-additional-info-quantity-increase-button text, .store-packing-slips-display-method-2-cell-additional-info-discount-decrease-button text, .store-packing-slips-display-method-2-cell-additional-info-discount-increase-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
}

.store-packing-slips-display-method-2-cell-additional-info-quantity-decrease-button:hover, .store-packing-slips-display-method-2-cell-additional-info-quantity-increase-button:hover, .store-packing-slips-display-method-2-cell-additional-info-discount-decrease-button:hover, .store-packing-slips-display-method-2-cell-additional-info-discount-increase-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

.store-packing-slips-display-method-2-header-quantity {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-quantity);
    min-width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-header-title {
    padding-top: 2px;
    margin-right: 20px;
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-header-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    min-width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-header-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-header-discount {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-discount);
    min-width: var(--store-orders-display-method-1-width-discount);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-packing-slips-display-method-2-edit-button-container {
    width: 80px;
    text-align: right;
}

.store-packing-slips-display-method-2-quantity {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-quantity);
    min-width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-2-title {
    padding-top: 2px;
    margin-right: 20px;
    /*width: var(--store-orders-display-method-1-width-title);*/
    /*min-width: var(--store-orders-display-method-1-width-title);*/
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-2-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    min-width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-2-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-2-discount {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-discount);
    min-width: var(--store-orders-display-method-1-width-discount);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-packing-slips-display-method-2-datecreated {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-date-created);
    min-width: var(--store-orders-display-method-1-width-date-created);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    text-align: right;
}

#store-packing-slips-import-csv-save-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-packing-slips-edit-container {
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-packing-slips-all-items-shopify-container {
    margin-top: 20px;
}

#store-packing-slips-edit-add-item-container {
    display: flex;
    align-items: center;
    height: auto;
    margin-top: 26px;
    margin-bottom: 10px;
    padding-bottom: 14px;
}

#store-packing-slips-create-new-name-container {
    margin-top: 0px;
}

#store-packing-slips-edit-add-item-title {
    margin-left: 20px;
}

#store-packing-slips-customer-lists-container {
    display: flex;
    align-content: top;
    width: 100%;
    margin-top: 20px;
}

#store-packing-slips-customer-lists-names-container {
    display: inline-block;
    height: auto;
    width: var(--store-packing-slips-name-customer-width);
}

.store-packing-slips-customer-lists-names-cell {
    display: flex;
    flex-direction: row;
    width: var(--store-packing-slips-name-customer-width);
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.store-packing-slips-customer-lists-names-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

#store-packing-slips-customer-lists-names-packing-slip-container {
    display: block;
    width: calc(100% - var(--store-packing-slips-name-customer-width) - 20px);
    height: auto;
    margin-left: 20px;
    margin-top: 10px;
}

.store-packing-slips-customer-lists-names-packing-slip-container {
    background: var(--box-background-color);
    /*zoom: 0.6;*/
}

.store-packing-slips-customer-lists-names-packing-slip-items-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text0-color);
    margin-bottom: 20px;
    padding-top: 10px;
}

.store-packing-slips-customer-lists-names-packing-slip-items-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text2-color);
    margin-bottom: 20px;
    padding-top: 10px;
}

.store-packing-slips-customer-lists-names-packing-slip-items-name {
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    padding-top: 20px;
    margin-bottom: 40px;
}

#store-draft-orders {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-draft-orders-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-draft-orders-all-container {
    height: auto;
    margin-top: 20px;
}

.store-draft-orders-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-draft-orders-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
}

#store-draft-orders-create-new-container {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-draft-orders-create-new-name-container {
    margin-top: 0px;
}

#store-draft-orders-display-method-1 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    margin-bottom: 40px;
}

.store-draft-orders-display-method-1-cell-container {
    width: calc(100% - 0px);
    margin-left: 0px;
}

.store-draft-orders-display-method-1-cell-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-draft-orders-display-method-1-cell {
    display: flex;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    transition: transform .2s;
    background: transparent;
}

.store-draft-orders-display-method-1-cell-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: auto;
    /*padding-right: 20px;*/
    background: transparent;
}

.store-draft-orders-display-method-1-cell-info-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-draft-orders-display-method-1-header-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-title);
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-draft-orders-display-method-1-datecreated {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-date-created);
    min-width: var(--store-orders-display-method-1-width-date-created);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

.store-draft-orders-display-method-1-delete-button-container {
    width: 100px;
    text-align: right;
}

.store-draft-orders-display-method-1-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-title);
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-draft-orders-display-method-1-publisher {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-publisher);
    min-width: var(--store-orders-display-method-1-width-publisher);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-draft-orders-display-method-1-quantity {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-quantity);
    min-width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-draft-orders-display-method-1-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    min-width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-draft-orders-display-method-1-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-draft-orders-display-method-1-cell-additional-info-container {
    margin-top: 10px;
    height: 100px;
}

.store-draft-orders-display-method-1-cell-additional-info-quantity-header {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-left: 10px;
    margin-right: 2px;
}

.store-draft-orders-display-method-1-cell-additional-info-quantity-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-draft-orders-display-method-1-cell-additional-info-quantity-decrease-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;
    text-align: center;   
}

.store-draft-orders-display-method-1-cell-additional-info-quantity-increase-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;    
    text-align: center; 
}

.store-draft-orders-display-method-1-cell-additional-info-quantity-decrease-button text, .store-draft-orders-display-method-1-cell-additional-info-quantity-increase-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
}

.store-draft-orders-display-method-1-cell-additional-info-quantity-decrease-button:hover, .store-draft-orders-display-method-1-cell-additional-info-quantity-increase-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#store-draft-orders-edit-container {
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-draft-orders-edit-add-item-container {
    display: flex;
    align-items: center;
    height: auto;
    margin-top: 26px;
    margin-bottom: 10px;
    padding-bottom: 14px;
}

#store-draft-orders-edit-add-item-title {
    margin-left: 20px;
}

.store-draft-orders-display-method-1-header-quantity {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-quantity);
    min-width: var(--store-orders-display-method-1-width-quantity);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-draft-orders-display-method-1-header-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-title);
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-draft-orders-display-method-1-header-sku {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-sku);
    min-width: var(--store-orders-display-method-1-width-sku);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-draft-orders-display-method-1-header-srp {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

#store-draft-orders-all-items-shopify-container {
    margin-top: 20px;
}

#store-products {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.store-products-header {
    display: inline;
    width: auto;
    min-width: 300px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-products-value {
    display: inline;
    width: auto;
    min-width: 300px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
}

#store-products-available-fields-items-container {
    margin-top: 20px;
}

#store-products-values-container {
    margin-top: 20px;
}

#store-products-values-title-buttons-container,  #store-products-values-description-buttons-container, #store-products-values-type-buttons-container, #store-products-values-active-container {
    margin-top: 20px;
}

#store-products-values-title {
    width: calc(100% - 20px);
    margin-top: 20px;
    margin-right: 20px;
}

#store-products-values-description {
    width: calc(100% - 20px);
    margin-top: 20px;
    margin-right: 20px;
}

#store-products-values-type {
    width: 50%;
    margin-top: 20px;
    margin-right: 20px;
}

#store-arrivals {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-arrivals-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

#store-arrivals-display-method-1-search-container {
    display: block;
    margin-bottom: 20px;
}

#store-arrivals-display-method-1-search-title-container {
    display: inline-block;
}

#store-arrivals-display-method-1-search-sku-container {
    display: inline-block;
}

.store-arrivals-comic-info-container {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.store-arrivals-comic-info-cell-image {
    width: var(--comic-cover-normal-width);
    min-width: var(--comic-cover-normal-width);
    height: var(--comic-cover-normal-height);
    min-height: var(--comic-cover-normal-height);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.store-arrivals-comic-info-cell {
    width: 100%;
    height: auto;
    padding-top: 10px;
}

.store-arrivals-comic-info-title {
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-arrivals-comic-info-other-container {
    /*margin-top: 6px;*/
    margin-left: 10px;
    width: auto;
}

.store-arrivals-comic-info-other-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-arrivals-ordered-by-header {
    margin-top: 30px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-arrivals-ordered-by-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 10px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    /*margin-right: 10px;*/
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.store-arrivals-ordered-by-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-arrivals-ordered-by-name {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-arrivals-mark-as-arrived {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-arrivals-mark-as-arrived-date {
    display: inline-block;
    width: var(--store-arrivals-arrived-width);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
    text-align: right;
}

#store-customers {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-customers-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-customers-accepted-container {
    height: auto;
    margin-top: 20px;
}

#store-customers-pending-container {
    height: auto;
    margin-top: 20px;
}

#store-customers-blocked-container {
    height: auto;
    margin-top: 20px;
}

.store-customers-all-container {

}

.store-customers-name-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 10px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.store-customers-name-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-customers-name {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-customers-email {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

#store-statistics {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.store-statistics-header {
    display: inline;
    width: auto;
    min-width: 300px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-statistics-value {
    display: inline;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
}

#store-invoices {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-invoices-all-container {
    margin-top: 10px;
    margin-bottom: 20px;
}

.store-invoices-month-cell-container {
    width: 100%;
}

.store-invoices-month-cell-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-invoices-month-cell {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    background: transparent;
}

.store-invoices-month-cell-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: auto;
    padding-right: 10px;
    background: transparent;
}

.store-invoices-month-title {
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-invoices-month-cell-additional-invoice-container {
    width: calc(100% - 20px);
    height: auto;
    margin-left: 20px;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.store-invoices-month-invoice-header {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    min-width: 300px;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-invoices-month-invoice-value {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
}

.store-invoices-month-cell-additional-info-container {
    width: calc(100% - 10px);
    height: auto;
    margin-left: 10px;
}

.store-invoices-month-comic-container {
    margin-top: 8px;
    margin-bottom: 8px;
}

.store-invoices-month-comic-info-container {
    display: flex;
    margin-right: 10px;
}

.store-invoices-month-comic-title {
    display: inline-block;
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
}

.store-invoices-month-comic-info {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

.store-invoices-month-comic-quantity-text {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-invoices-month-comic-quantity {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
}

.store-invoices-month-name-container {
    display: flex;
    margin-top: 4px;
    margin-bottom: 6px;
    margin-left: 20px;
    margin-right: 10px;
}

.store-invoices-month-name {
    display: inline-block;
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-invoices-month-orderdate {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

.store-invoices-month-quantity-text {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
}

.store-invoices-month-quantity {
    display: inline-block;
    padding-top: 2px;
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--text2-color);
    opacity: var(--text-opacity);
}

#store-live-sales {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#store-live-sales-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

.store-live-sales-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.store-live-sales-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
}

#store-live-sales-all-container {
    height: auto;
    margin-top: 20px;
}

#store-live-sales-create-new-container {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-live-sales-create-new-name-container {
    margin-top: 0px;
}

#store-live-sales-import-all-items-live-sale {
    margin-top: 20px;
}

#store-live-sales-display-method-1 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    margin-bottom: 40px;
}

#store-live-sales-edit-container {
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-live-sale-import-csv-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-live-sales-display-method-1-search-container {
    margin-top: 20px;
}

.store-live-sales-display-method-1-buttons-container {
    width: 100px;
    text-align: right;
}

#store-live-sales-customers-container {
    height: auto;
    margin-top: 20px;
}

#store-live-sales-create-new-customer-container {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--grid-border-color);
}

#store-live-sales-create-new-customer-name-container {
    margin-top: 0px;
}

.store-live-sales-display-method-1-cell-container {
    width: 100%;
}

.store-live-sales-display-method-1-cell-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-live-sales-display-method-1-cell-customer-container {
    width: calc(100% - 10px);
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    color: var(--text2-color);
    opacity: var(--text-opacity);
}

.store-live-sales-display-method-1-cell-customer-container:hover {
    cursor: pointer;
    color: var(--text0-color);
    opacity: 1.0;
    background: var(--box-background-color);
}

.store-live-sales-display-method-1-cell {
    display: flex;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
    background: transparent;
}

.store-live-sales-display-method-1-cell-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;  
    width: 100%;
    height: auto;
    /*padding-right: 20px;*/
    background: transparent;
}

.store-live-sales-display-method-1-cell-info-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.store-live-sales-display-method-1-header-customer-name {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-customer-name);
    min-width: var(--store-orders-display-method-1-width-customer-name);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-live-sales-display-method-1-header-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-customer-name);
    min-width: var(--store-orders-display-method-1-width-customer-name);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-live-sales-display-method-1-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-customer-name);
    min-width: var(--store-orders-display-method-1-width-customer-name);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-live-sales-display-method-1-extended-title {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-title);
    min-width: var(--store-orders-display-method-1-width-title);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-live-sales-display-method-1-selling-price-header {
    padding-top: 2px;
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-live-sales-display-method-1-selling-price {
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
}

.store-live-sales-display-method-1-selling-price-value {
    width: var(--store-orders-display-method-1-width-srp);
    min-width: var(--store-orders-display-method-1-width-srp);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text2-color);
}

.store-live-sales-display-method-1-comic-info-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color);
}

.store-live-sales-display-method-1-comic-info-value {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-live-sales-display-method-1-customer-name {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-customer-name);
    min-width: var(--store-orders-display-method-1-width-customer-name);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.store-live-sales-display-method-1-datecreated {
    padding-top: 2px;
    margin-right: 20px;
    width: var(--store-orders-display-method-1-width-date-created);
    min-width: var(--store-orders-display-method-1-width-date-created);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    opacity: var(--text-opacity);
    text-align: right;
}

.store-live-sales-display-method-1-delete-button-container {
    width: 100px;
    text-align: right;
}

.store-live-sales-display-method-1-cell-additional-info-container {
    width: calc(100% - 10px - 10px);
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 10px;
}

.store-live-sales-display-method-1-cell-additional-info-container2 {
    width: calc(100% - 10px - 10px);
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
}

.store-live-sales-display-method-1-cell-additional-info-customers-container {
    width: calc(var(--store-orders-display-method-1-width-customer-name) + 260px);
    margin-top: 10px;
    margin-bottom: 10px;
    max-height: 184px;
    overflow: auto;
}

.store-live-sales-display-method-1-cell-additional-info-customers-container::-webkit-scrollbar {
    width: var(--scroll-bar-width-thin);
}

.store-live-sales-display-method-1-cell-additional-info-customer-container {
    width: calc(100% - 5px - 5px);
    margin-left: 5px;
    margin-right: 5px;
}

.store-live-sales-display-method-1-cell-additional-info-comic-info-container {
    margin-left: 20px;
}

.store-live-sales-display-method-1-item-code-container {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
    margin-left: 20px;
}

#store-live-sales-import-all-customer-items-live-sale, #store-live-sales-import-all-customer-unsold-items-live-sale {
    margin-top: 20px;
}

#store-live-sales-overview-items-container {
    display: flex;
}

#store-live-sales-overview-items-search-customer-container {
    margin-top: 20px;
}

#store-live-sales-overview-unsold-items-shopify-button-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-live-sales-overview-sold-items-email-button-container {
    margin-top: 20px;
    margin-bottom: 20px;
}

#store-live-sales-email-template-container {
    height: auto;
    margin-top: 20px;
}

#store-live-sales-email-template-available-fields-items-container {
    margin-top: 20px;
}

#store-live-sales-email-template-values-container {
    margin-top: 20px;
}

#store-live-sales-values-email-buttons-container {
    margin-top: 20px;
}

#store-live-sales-email-template {
    width: calc(100% - 20px);
    margin-top: 20px;
    margin-right: 20px;
}

#admin-main-menu-container {
    width: calc(100% - 10px - 10px);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 0px solid var(--grid-border-color);
}

#admin-upload-csv-container {
    width: 50%;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#fileuploader-csv {
    margin-top: 10px;
}

#admin-upload-csv-buttons-container {
    margin-top: 20px;
    margin-left: 20px;
}

#admin-main-additional-info-container {
    margin-top: 20px;
    margin-left: 20px;
}

#admin-main-search-container {
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 6px;
}

.admin-main-search-comic-cell {
    width: 100%;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.admin-main-search-comic-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.admin-main-search-comic-title {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

#admin-main-search-results-container {
    width: calc(100% - 20px - 20px);
    height: var(--admin-main-results-height);
    margin-left: 20px;
    margin-right: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
}

#admin-main-search-comic-container {
    width: calc(100% - 20px - 20px);
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#admin-main-comic-container {
    width: auto;
    margin-top: 10px;
    padding-bottom: 40px;
}

#admin-main-comic-info-container {
    display: inline-block;
    max-width: 65%;
    min-width: 65%;
}

#admin-main-comic-info-cover-container {
    display: inline-block;
    width: auto;
    vertical-align: top;
    margin-left: 10px;
}

#admin-main-comic-info-cover-upload-container {
    margin-top: 20px;
}

#admin-main-comic-info-cover-buttons-container {
    margin-top: 20px;
}

#admin-main-comic-info-additional-info-container {
    display: block;
    width: calc(100% - 10px);
    margin-right: 10px;
    padding-top: 20px;
}

#admin-main-search-comic-menu-container {
    display: flex;
    align-items: center;
}

#admin-main-search-comic-menu {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    align-self: flex-start;
    width: auto;
    height: 36px;
    background: transparent;
    border: 2px solid var(--text2-color);
    border-radius: var(--admin-main-menu-border-radius);
    margin-left: 10px;
}

#admin-main-search-comic-menu-left {
    width: auto;
    height: 100%;
    background: transparent;
    border-right: 2px solid var(--text2-color);
    margin-left: 4px;
}

#admin-main-search-comic-menu-right {
    width: auto;
    height: 100%;
    background: transparent;
    border-left: 2px solid var(--text2-color);
    margin-right: 4px;
}

.admin-main-menu-item-icon {
    width: 26px;
    height: 26px;
    margin-top: 5px;
    margin-left: 6px;
    margin-right: 6px;
    opacity: var(--text-opacity);
    cursor: pointer;
}

.admin-main-menu-item-icon:hover {
    opacity: 1.0;
}

#admin-main-menu-index-container {
    display: flex;
    justify-content: center;
    align-items: center;   
}

#admin-main-search-comic-input-index {
    margin-left: 8px;
}

#admin-main-search-comic-max-index {
    width: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
    color: var(--input-price-color);
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 8px;
}

#admin-main-search-comic-menu-go-button {
    display: inline-block;
    background-color: transparent;
    color: var(--input-price-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    cursor: pointer;
    border: 1px solid var(--input-price-border-color);
    border-radius: var(--button1-border-radius);
    padding-top: 8px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: 20px;
    width: auto;
}

#admin-main-menu-go-button:hover {
    border: 1px solid var(--input-price-border-color);
    color: var(--input-price-border-color);
}

#admin-comic-title {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    padding-top: 10px;
    margin-left: 10px;
}

#admin-comic-publisher {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
    padding-top: 10px;
    margin-left: 10px;
}

#admin-comic-types-container {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    background: transparent;
    grid-gap: 14px;
    margin-top: 10px;
    margin-left: 10px;
}

.admin-comic-type {
    width: auto;
    min-width: var(--admin-comic-type-width);
    height: auto;
    background: transparent;
    text-align: center;
}

.admin-comic-type-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-top: 4px;
}

#admin-comic-description-container {
    width: calc(100% - 10px - 10px);
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.admin-comic-description {
    width: calc(100% - 10px - 10px - 2px);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
}

#admin-comic-description-buttons {
    width: auto;
    display: flex;
    background: transparent;
    margin-top: 10px;
}

.admin-main-comic-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text2-color);
}

.admin-main-comic-info-additional-info-header {
    display: inline-block;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.4em;
    color: var(--text0-color);
}

.admin-main-comic-info-additional-info-value {
    display: inline-block;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.4em;
    color: var(--text2-color);
    margin-left: 4px;
}

#admin-comic-collection-container, #admin-comic-collection-fallback-container {
    width: auto;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
}

.admin-comic-collection-item-container {
    margin-top: 10px;
    margin-bottom: 10px;
}

.admin-comic-collection-item-title {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
    color: var(--text0-color);
    margin-left: 10px;
}

#admin-main-comic-info-additional-info-publishers-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-top: 20px;
}

#dashboard-menu-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    /*border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);*/
}

#dashboard-menu {
    width: calc(100% - 15px - 15px);
    height: auto;
    padding-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 10px;
}

.menu {
    display: flex;
    align-items: flex-start;
    width: calc(100% - 20px - 20px);
    height: 100%;
    margin-left: 20px;
    background: transparent;
    align-items: center;
    min-height: 40px;
}

.menu-title {
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 1.5em;
    color: var(--title-color);
    background: transparent;
    /*margin-right: 20px;*/
}

.menu-title2 {
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--title-color);
    background: transparent;
}

.menu-title3 {
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Heavy';
    font-size: 2.0em;
    color: var(--title-color);
    background: transparent;
}

#dashboard-subscriptions-container {
    margin-top: 30px;
    width: 100%;
    height: auto;
}

.dashboard-subscriptions-cell-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.dashboard-subscriptions-cell-info-container {
    display: flex;
    align-items: center;
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 10px;
    border-top: 2px solid var(--grid-border-color);
    /*border-bottom: 2px solid var(--grid-border-color);*/
}

.dashboard-subscriptions-subscribe-button-icon {
    width: 28px;
    height: 28px;
}

.dashboard-subscriptions-subscribe-button-container {
    /*padding-top: 6px;*/
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    align-content: flex-end;
    text-align: center;
}

.dashboard-subscriptions-subscribe-button-container:hover {
    cursor: pointer;
}

.dashboard-subscriptions-subscribe-button-container:hover .dashboard-subscriptions-subscribe-button-icon {
  filter: invert(60%) sepia(50%) saturate(950%) hue-rotate(320deg) brightness(80%) contrast(120%) !important;
}

.dashboard-subscriptions-title {
    width: auto;
    /*height: 28px;*/
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
    /*margin-bottom: 20px;
    margin-top: 3px;*/
    /*line-height: 28px;*/
    vertical-align: middle;
}

.dashboard-subscriptions-title-container {
    width: auto;
    height: auto;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /*margin-top: 10px;*/
    margin-left: 60px;
    margin-right: 30px;
    margin-bottom: 30px;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 5px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 0px solid var(--grid-border-color);
}

.dashboard-subscriptions-title-issue-cell {
    display: inline-block;
    vertical-align: top;
    scroll-snap-align: start;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    transition: transform .2s;
    max-width: var(--comic-cover-small-width);
}

.dashboard-subscriptions-title-issue-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.dashboard-subscriptions-title-issue-cell:hover .dashboard-subscriptions-title-issue-release-date {
    opacity: 1.0;
}

.dashboard-subscriptions-title-issue-cover {
    width: var(--comic-cover-small-width);
    min-width: var(--comic-cover-small-width);
    height: var(--comic-cover-small-height);
    min-height: var(--comic-cover-small-height);
    background-image: url("/images/noimage_red_lowres.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
}

.dashboard-subscriptions-title-issue-icons {
    display: flex;
    justify-content: center;
    align-items: center;   
    width: auto;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-right: 10px;
    background: transparent;
}

.dashboard-subscriptions-title-issue-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: var(--text-opacity);
    filter: invert(60%);

}

.dashboard-subscriptions-title-issue-icon:hover {
    cursor: pointer;
    opacity: 1.0;
}

.dashboard-subscriptions-title-issue-title {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Medium';
    font-size: 0.8em;
    color: var(--text2-color);
    padding-top: 6px;
}

.dashboard-subscriptions-title-issue-release-date {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text0-color);
    padding-top: 4px;
    padding-bottom: 4px;
    opacity: var(--text-opacity);
}

#dashboard-pre-orders-menu-container {
    margin-top: 17px;
    width: 100%;
    border-bottom: 0px solid var(--grid-border-color);
    padding-bottom: 18px;
}

#dashboard-pre-orders-items-container {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

#dashboard-pre-orders-stores-menu-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 0px solid var(--grid-border-color);
}

#dashboard-pre-orders-stores-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

#dashboard-pre-orders-items-store-info-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#dashboard-pre-orders-items-store-info-total-container {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    margin-top: 10px;
    width: auto;
    height: auto;
}

#dashboard-pre-orders-items-store-info-total-items-container {
    display: inline-block;
    width: auto;
    height: auto;
}

.dashboard-pre-orders-items-store-info-header {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text2-color)
}

.dashboard-pre-orders-items-store-info-value {
    display: inline-block;
    width: auto;
    margin-left: 4px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color)
}

.dashboard-pre-orders-item-cell {
    width: 100%;
    height: auto;
}

.dashboard-pre-orders-item-cell-container {
    display: inline-flex;
    flex-direction: row;
    width: calc(100% - 10px);
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    /*padding-left: 10px;*/
    padding-right: 10px;
    margin-bottom: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.dashboard-pre-orders-item-cell-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
    /*transform: scale(1.005);*/
}

.dashboard-pre-orders-item-remove-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-pre-orders-item-cell-image {
    width: var(--comic-cover-small-width);
    min-width: var(--comic-cover-small-width);
    height: var(--comic-cover-small-height);
    min-height: var(--comic-cover-small-height);
    background-image: url("/images/noimage_red_lowres.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;
}

.dashboard-pre-orders-item-cell-info-container {
    display: flex;
    flex-direction: row;
    /*justify-content: left;*/
    /*align-items: center; */
    width: 100%;
    height: auto;
    background: transparent;
}

.dashboard-pre-orders-item-other-info-container {
    margin-left: 10px;
    margin-bottom: 10px;
}

.dashboard-pre-orders-item-title {
    padding-top: 2px;
    margin-left: 10px;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
    color: var(--text0-color);
}

.dashboard-pre-orders-item-other-info-container {
    display: flex;
}

.dashboard-pre-orders-item-publisher {
    width: auto;
    margin-top: 2px;
    font-family: 'AvenirLTStd-Medium';
    font-size: 0.8em;
    color: var(--text2-color);
}

.dashboard-pre-orders-item-other-info {
    width: auto;
    margin-top: 2px;
    margin-left: 4px;
    font-family: 'AvenirLTStd-Light';
    font-size: 0.8em;
    color: var(--text2-color);
}

.dashboard-pre-orders-item-quantity-header {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text0-color);
    margin-right: 2px;
}

.dashboard-pre-orders-item-quantity-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    color: var(--text2-color);
}

.dashboard-pre-orders-edit-button, .dashboard-pre-orders-save-button, .dashboard-pre-orders-cancel-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 18px;
    padding-right: 19px;
    width: auto;
}

.dashboard-pre-orders-decrease-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;
    text-align: center;   
}

.dashboard-pre-orders-increase-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    width: auto;
    min-width: 26px;    
    text-align: center; 
}

.dashboard-pre-orders-edit-button text, .dashboard-pre-orders-save-button text, .dashboard-pre-orders-cancel-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
}

.dashboard-pre-orders-decrease-button text, .dashboard-pre-orders-increase-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.0em;
}

.dashboard-pre-orders-edit-button:hover, .dashboard-pre-orders-save-button:hover, .dashboard-pre-orders-cancel-button:hover, .dashboard-pre-orders-decrease-button:hover, .dashboard-pre-orders-increase-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

.dashboard-pre-orders-remove-button {
    display: inline-block;
    background-color: var(--button3-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button3-background-color);
    border-radius: var(--button3-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 18px;
    padding-right: 19px;
    width: auto;
}

.dashboard-pre-orders-remove-button text {
    position: relative;
    top: 1px;
    color: #fff;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
}

.dashboard-pre-orders-remove-button:hover {
    border: 1px solid;
    border-color: var(--button3-color);
}

.dashboard-pre-orders-item-assignment-container {
    display: flex;
    flex-direction: row;
    /*justify-content: left;*/
    /*align-items: center;*/
    width: calc(100% - 10px);
    height: auto;
    background: transparent;
    margin-left: 8px;
    /*margin-right: 10px;*/
}

.dashboard-pre-orders-item-assignment-store-container {
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
}

.dashboard-pre-orders-item-assignment-value {
    font-family: 'AvenirLTStd-Light';
    font-size: 0.95em;
    margin-left: 4px;
    margin-right: 6px;
    padding-top: 2px;
    color: var(--text0-color);
}

.dashboard-pre-orders-item-assign-store-checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*width: auto;
    height: auto;*/
    background: transparent;
}

.dashboard-pre-orders-item-assignment-title {
    display: inline-block;
    width: auto;
    height: auto;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
    padding-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    color: var(--text0-color);
}

#dashboard-ready-to-order-container {
    width: 100%;
    height: auto;
    /*border-top: 2px solid var(--grid-border-color);*/
    margin-top: 30px;
}

#dashboard-ready-to-order-info-container {
    width: 100%;
    height: auto;
    /*padding-top: 20px;*/
    /*border-top: 2px solid var(--grid-border-color);*/
}

#dashboard-ready-to-order-cell-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
    /*padding-top: 20px;*/
}

.dashboard-ready-to-order-cell-info-container {
    display: flex;
    flex-direction: row;
    align-items: center; 
    width: calc(100% - 10px - 10px);
    height: auto;
    background: transparent;
    margin-left: 10px;
    margin-right: 10px;
    /*margin-bottom: 10px;*/
    padding-top: 20px;
    padding-bottom: 8px;
    border-top: 2px solid var(--grid-border-color);
    /*border-bottom: 2px solid var(--grid-border-color);*/
}

.dashboard-ready-to-order-item-total-items-container {
    display: inline-block;
    width: var(--dashboard-ready-to-order-total-items-width);
    text-align: right;
}

.dashboard-ready-to-order-item-total-price-container {
    display: inline-block;
    width: var(--dashboard-ready-to-order-total-price-width);
    text-align: right;
}

.dashboard-ready-to-order-item-title {
    display: inline-block;
    width: auto;
    /*margin-left: 10px;*/
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text0-color);
}

.dashboard-ready-to-order-item-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
}

.dashboard-ready-to-order-button-container {
    width: var(--dashboard-ready-to-order-button-width);
    text-align: right;
}

.dashboard-ready-to-order-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 18px;
    padding-right: 19px;
    width: auto;
}

.dashboard-ready-to-order-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.0em;
}

.dashboard-ready-to-order-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

.dashboard-ready-to-order-items-container {
    width: calc(100% - 20px - 20px);
    margin-left: 20px;
    margin-right: 20px;
}

#dashboard-orders-container {
    margin-top: 30px;
}

#dashboard-orders-info-container {
    width: 100%;
    height: auto;
}

#dashboard-orders-cell-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.dashboard-order-cell-info-container {
    width: calc(100% - 20px - 20px);
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-top: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.dashboard-order-store-name {
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
    margin-bottom: 20px;
    margin-top: 3px;
}

.dashboard-order-store-item-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text0-color);
    margin-bottom: 20px;
    margin-top: 3px;
}

.dashboard-order-store-item-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text2-color);
    margin-bottom: 20px;
    margin-top: 3px;
}

.dashboard-order-item-title {
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.3em;
    color: var(--text0-color);
    margin-bottom: 20px;
}

.dashboard-order-store-items-ordered-container {
    display: flex;
    flex-direction: row;
    /*align-items: center; */
    width: calc(100% - 20px);
    height: auto;
    background: transparent;
    margin-left: 20px;
    margin-top: 4px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.dashboard-order-store-items-ordered-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.dashboard-order-store-items-ordered-cell {
    display: flex;
    flex-direction: row;
    width: calc(100% - 10px);
    height: auto;
    margin-right: 10px;
}

.dashboard-order-store-items-ordered-other-info-container {
    text-align: top;
}

.dashboard-order-cancel-button {
    display: inline-block;
    background-color: var(--button3-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button3-background-color);
    border-radius: var(--button3-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

.dashboard-order-cancel-button text {
    position: relative;
    top: 1px;
    color: #fff;
    font-family: 'AvenirLTStd-Light';
    font-size: 1.2em;
}

.dashboard-order-cancel-button:hover {
    border: 1px solid;
    border-color: var(--button3-color);
}

#dashboard-release-calendar-input {
    width: 100%;
    height: auto;
}

#activate-account-header-container {
    margin-top: 20px;
    margin-left: 20px;
}

#change-password-header-container {
    margin-top: 20px;
    margin-left: 20px;
}

#change-password-current-password-container {
    display: block;
    margin-left: 20px;
}

#change-password-new-password-container {
    display: block;
    margin-left: 20px;
}

#change-password-confirm-new-password-container {
    display: block;
    margin-left: 20px;
}

#change-password-change-button-container {
    margin-left: 20px;
}

#change-password-change-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#change-password-change-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
}

#change-password-change-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#change-password-error-message-container {
    width: auto;
    margin-top: 10px;
    margin-left: 20px;
    min-height: 30px;
}

#resend-activation-header-container {
    margin-top: 20px;
    margin-left: 20px;
}

#resend-activation-information-container {
    margin-left: 20px;
}

#resend-activation-email-container {
    margin-top: 20px;
    margin-left: 20px;
}

#resend-activation-error-message-container {
    width: auto;
    margin-top: 10px;
    margin-left: 20px;
    min-height: 30px;
}

#resend-activation-resend-button-container {
    display: flex;
    margin-left: 20px;
    align-items: center;
}

#resend-activation-resend-button, #resend-activation-please-wait-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#resend-activation-resend-button text, #resend-activation-please-wait-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
}

#resend-activation-resend-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#resend-activation-spinner-container {
    display: inline-block;
    margin-top: 1px;
    margin-left: 10px;
}

#reset-password-header-container {
    margin-top: 20px;
    margin-left: 20px;
}

#reset-password-information-container {
    margin-left: 20px;
}

#reset-password-email-container {
    margin-top: 20px;
    margin-left: 20px;
}

#reset-password-error-message-container {
    width: auto;
    margin-top: 10px;
    margin-left: 20px;
    min-height: 30px;
}

#reset-password-reset-button-container {
    display: flex;
    margin-left: 20px;
    align-items: center;
}

#reset-password-reset-button, #reset-password-please-wait-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#reset-password-reset-button text, #reset-password-please-wait-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
}

#reset-password-reset-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#reset-password-spinner-container {
    display: inline-block;
    margin-top: 1px;
    margin-left: 10px;
}

#set-password-header-container {
    margin-top: 20px;
    margin-left: 20px;
}

#set-password-new-password-container {
    display: block;
    margin-left: 20px;
}

#set-password-confirm-new-password-container {
    display: block;
    margin-left: 20px;
}

#set-password-error-message-container {
    width: auto;
    margin-top: 10px;
    margin-left: 20px;
    min-height: 30px;
}

#set-password-set-button-container {
    margin-left: 20px;
}

#set-password-set-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#set-password-set-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
}

#set-password-set-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#signup-store-logo {
    display: grid;
    align-content: left;
    width: auto;
    height: auto;
    margin-bottom: 20px;
    margin-left: 20px;
}

#signup-header-container {
    margin-top: 20px;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-username-container {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-firstname-container {
    display: block;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-lastname-container {
    display: block;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-password-container {
    display: block;
    margin-top: 30px;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-confirm-password-container {
    display: block;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-email-container {
    display: block;
    margin-top: 30px;
    margin-left: 20px;
    max-width: -moz-available;
}

#signup-error-message-container {
    width: auto;
    margin-top: 10px;
    margin-left: 20px;
    min-height: 30px;
}

#signup-button-container {
    display: flex;
    margin-left: 20px;
    align-items: center;
}

#signup-button, #signup-please-wait-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#signup-button text, #signup-please-wait-button text {
    position: relative;
    top: 1px;
    color: var(--button-textcolor);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
}

#signup-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

#signup-spinner-container {
    display: inline-block;
    margin-top: 1px;
    margin-left: 10px;
}

#info-account-menu-container {
    width: calc(100% - 20px);
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    border-bottom: 0px solid var(--grid-border-color);
}

#info-account-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.info-account-header {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
    margin-left: 25px;
}

.info-account-value {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
}

#info-dashboard-menu-container {
    width: calc(100% - 20px);
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    /*border-top: 2px solid var(--grid-border-color);*/
    border-bottom: 2px solid var(--grid-border-color);
}

#info-dashboard-menu {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

#info-dashboard-just-arrived-container {
    width: calc(100% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}

#info-dashboard-just-arrived-items-container, #info-dashboard-open-orders-items-container, #info-dashboard-wish-list-items-container {
    width: calc(100% - 25px);
    height: auto;
    margin-top: 20px;
    margin-left: 25px;
}

.info-dashboard-just-arrived-store-name, .info-dashboard-open-orders-store-name {
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text2-color);
    margin-bottom: 20px;
    margin-top: 20px;
}

#info-dashboard-expecting-container, #info-dashboard-expecting-next-week-container {
    width: calc(100% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}

#info-dashboard-expecting-this-week-items-container, #info-dashboard-expecting-next-week-items-container {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

#info-dashboard-subscriptions-container {
    margin-bottom: 20px;
}

.info-dashboard-subscriptions-cell-info-container {
    display: flex;
    align-items: center;
    width: calc(100% - 25px - 25px);
    height: auto;
    margin-left: 25px;
    margin-right: 25px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.info-dashboard-subscriptions-cell-info-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.info-dashboard-subscriptions-title {
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text2-color);
    vertical-align: middle;
    margin-left: 10px;
}

.info-dashboard-subscriptions-subscribe-button-icon {
    width: 28px;
    height: 28px;
}

.info-dashboard-subscriptions-subscribe-button-container {
    /*padding-top: 6px;*/
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    align-content: flex-end;
    text-align: center;
}

.info-dashboard-subscriptions-subscribe-button-container:hover {
    cursor: pointer;
}

.info-dashboard-subscriptions-subscribe-button-container:hover .info-dashboard-subscriptions-subscribe-button-icon {
  filter: invert(60%) sepia(50%) saturate(950%) hue-rotate(320deg) brightness(80%) contrast(120%) !important;
}

#info-dashboard-wish-list-container {
    margin-bottom: 20px;
}

#info-dashboard-notifications-container {
    width: calc(100% - 25px - 20px);
    margin-left: 25px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#info-dashboard-notifications-buttons-container {
    display: flex;
}

#info-dashboard-notifications-mark-all-as-read-button {
    display: inline-block;
    background-color: var(--button2-background-color);
    cursor: pointer;
    border: 1px solid;
    border-color: var(--button2-background-color);
    border-radius: var(--button2-border-radius);
    margin-top: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 21px;
    width: auto;
}

#info-dashboard-notifications-mark-all-as-read-button text {
    position: relative;
    top: 1px;
    color: var(--button2-color);
    font-family: 'AvenirLTStd-Light';
    font-size: 1.1em;
}

#info-dashboard-notifications-mark-all-as-read-button:hover {
    border: 1px solid;
    border-color: var(--button2-color);
}

.info-dashboard-notifications-cell-info-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 10px;
    border-top: 2px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-color);
}

.info-dashboard-notifications-cell-info-container:hover {
    cursor: pointer;
    background: var(--box-background-color);
}

.info-dashboard-notifications-date {
    display: inline-block;
    width: var(--info-dashboard-notifications-date-width);
    min-width: var(--info-dashboard-notifications-date-width);;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
    vertical-align: middle;
    margin-left: 10px;
}

.info-dashboard-notifications-type-cell {
    display: inline-block;
}

.info-dashboard-notifications-type {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
    vertical-align: middle;
    margin-left: 10px;
}

.info-dashboard-notifications-store {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text2-color);
    vertical-align: middle;
}

.info-dashboard-notifications-title {
    display: inline-block;
    width: auto;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
    vertical-align: middle;
    margin-left: 10px;
}

#info-account-notifications-container {
    margin-top: 20px;
}

#info-account-notifications-settings-container {
    margin-top: 10px;
    margin-left: 5px;
}

#stores-main-title-container {
    width: calc(100% - 20px - 20px);
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#stores-main-stores-container {
    width: calc(100% - 30px - 30px);
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
    column-gap: 5px;
    background: transparent;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
}

.stores-main-stores-cell {
    display: inline-block;
    vertical-align: top;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    transition: transform .2s;
    max-width: var(--comic-cover-normal-width);
}

.stores-main-stores-cell:hover {
    cursor: pointer;
    background: var(--box-background-color);
    transform: scale(1.05);
}

.stores-main-stores-logo  {
    width: var(--stores-logo-width);
    min-width: var(--stores-logo-width);
    height: var(--stores-logo-height);
    min-height: var(--stores-logo-height);
    border-radius: 50%;
}

.stores-main-stores-name {
    width: auto;
    text-align: center;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.1em;
    color: var(--text0-color);
}

#tracked-series-menu-container {
    margin-top: 17px;
    width: 100%;
    border-bottom: 0px solid var(--grid-border-color);
    padding-bottom: 18px;
}

#orders-menu-container {
    margin-top: 17px;
    width: 100%;
    border-bottom: 0px solid var(--grid-border-color);
    padding-bottom: 18px;
}

#help-container {
    width: calc(100% - 40px - 40px);
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
}

.help-image {
    width: 50%;
    height: 50%;
}

.help-image2 {
    width: 75%;
    height: 75%;
}

.help-image3 {
    width: 25%;
    height: 25%;
}

.help-image-icon {
    width: 24px;
    height: 24px;
}

.help-image-cover {
    width: 140px;
    height: auto;
}

.help-header1 {
    display: inline;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text0-color);
}

.help-header2 {
    display: inline;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.4em;
    color: var(--text2-color);
}

.help-text1 {
    display: inline;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text0-color);
}

.help-text2 {
    display: inline;
    font-family: 'AvenirLTStd-Medium';
    font-size: 1.2em;
    color: var(--text2-color);
}

#comic-cover-container-responsive {
	display: none;
}

@media only screen and (max-width: 600px) {

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    font-size: 100%;
    --background: white;
    --border-radius: 7px;
    --box-background-color: red;
    --box-background-error-color: #B00020;
    --box-color: #4785C5;
    --box2-background-color: red;
    --title-color: white;
    --text0-color: white;
    --text1-color: #4785C5;
    --text2-color: #25CA67; 
    --text3-color: #6928F4;
    --text4-color: #385F96;
    --text5-color: orange;
    --text0-error-color: red;
    --text0-disabled-color: gray;
    --button1-background-color: #385F96;
    --button1-color: white;
    --button1-border-radius: 14px;
    --button2-background-color: #385F96;
    --button2-color: white;
    --button2-border-radius: 14px;
    --button3-background-color: red;
    --button3-color: white;
    --button3-border-radius: 14px;

    --check-box-size: 28px;
    --check-box-color: white;
    --check-box-background-color: #385F96;

    --input-price-color: white;
    --input-price-border-color: #25CA67;

    --spinner-color: #25CA67;

    background: var(--background);

    --header-height: 80px;
    --footer-height: 70px;
    --left-sidebar-width: 85px; /* 88px */
    --right-sidebar-width: 540px;
    --grid-gap: 0.2rem;
    --grid-border-color: rgba(0, 0, 0, 0.3);

    --index-header-height: 90px;
    --index-footer-height: 120px;

    --comic-left-sidebar-width: 85px;
    --comic-right-sidebar-width: 540px;
    --comic-footer-height: 300px;

    --background-cover-height: 60%;
    --comic-cover-width: 400px;
    --comic-cover-height: 616px;
    --comic-cover-normal-width: 175px;
    --comic-cover-normal-height: 266px;
    --comic-cover-small-width: calc(175px * 0.65);
    --comic-cover-small-height: calc(266px * 0.65);
    --comic-cover-very-small-width: calc(175px * 0.5);
    --comic-cover-very-small-height: calc(266px * 0.5);
    --comic-cover-normal-banner-height: 30px;
    --comic-cover-normal-banner-width: 50px;
    --comic-cover-main-index-width: calc(400px * 0.8);
    --comic-cover-main-index-height: calc(616px * 0.8);

    --comic-user-info-height: 60px;

    --calendar-header-height: 160px;
    --calendar-left-sidebar-width: 85px;
    --calendar-right-sidebar-width: calc(100% - 85px);
    --calendar-header-foc-date-border-radius: 24px;

    --filter-menu-publishers-container-height: 240px;
    --filter-menu-format-container-height: 240px;

    --admin-main-menu-border-radius: 24px;
    --admin-main-results-height: 180px;
    --admin-comic-type-width: 70px;

    --background-cover-opacity: 0.48; /* 0.12 */
    --text-opacity: 0.8;

    --textarea-disabled-color: rgba(255, 255, 255, 0.48);
    --textarea-border-radius: 12px;

    --scroll-bar-width-normal: 16px;
    --scroll-bar-width-thin: 8px;

    --store-orders-display-method-1-width-publisher: 220px;
    --store-orders-display-method-1-width-sku: 120px;
    --store-orders-display-method-1-width-release-date: 120px;
    --store-orders-display-method-1-width-date-created: 260px;
    --store-orders-display-method-1-width-srp: 80px;
    --store-orders-display-method-1-width-discount: 80px;
    --store-orders-display-method-1-width-quantity: 80px;
    --store-orders-display-method-1-width-arrived: 60px;
    --store-orders-display-method-1-width-title: 580px;
    --store-orders-display-method-1-width-customer-name: 260px;
    --store-orders-display-method-1-width-edit-button: 100px;
    --store-filter-item-width: 380px;

    --store-arrivals-arrived-width: 300px;
    --store-packing-slips-name-customer-width: 360px;

    --dashboard-ready-to-order-total-items-width: 140px;
    --dashboard-ready-to-order-total-price-width: 230px;
    --dashboard-ready-to-order-button-width: 160px;

    --search-customer-width: 180px;
    --search-title-width: 300px;

    --input-quantity: 68px;
    --input-sku: 120px;
    --input-sku-barcode: 170px;

    --dashboard-header-height: 70px;
    --dashboard-left-sidebar-width: 80px;
    --dashboard-right-sidebar-width: 360px;

    --info-dashboard-notifications-date-width: 270px;

    --stores-logo-width: 150px;
    --stores-logo-heigh: 150px;
}

#index-main-latest-news-items-container, .index-footer, #index-main-new-and-noteworthy {
  font-size: 80%;
}

#index-menu, #index-main-new-and-noteworthy {
  flex-direction: column;
}

.comic-main-other-issue-cover, .calendar-main-display-method-1-cover {
  width: var(--comic-cover-small-width);
  min-width: var(--comic-cover-small-width);
  height: var(--comic-cover-small-height);
  min-height: var(--comic-cover-small-height);
  margin: 0px auto;
}

.comic-main-other-issue-cell {
  display: inline-block;
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0px;
  /* padding-right: 10px; */
  min-width: min-content;
  max-width: min-content;
  overflow: auto;
}

#comic-main-other-variants-container, #comic-main-other-issues-container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: auto;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 30px;
}

#comic-main-variants-container {
  margin-top: 30px;
  margin-left: 20px;
}

#comic-main-series-container {
  width: auto;
  height: auto;
  margin-top: 20px;
  margin-left: 20px;
  max-width: 100%;
}

.comic-right-sidebar {
  display: none;
}

#comic-cover-container-responsive {
	display: block;
}

#index-main-new-and-noteworthy {
  display: flex;
  margin-left: 10px;
  margin-right: 10px;

}

.calendar-right-sidebar {
  grid-area: calendar-right-sidebar;
  background-color: blueviolet;
  z-index: 10;
}

.filter-menu-value {
  font-size: 1.0em;
  color: var(--text0-color);
  margin-left: 10px;
}

.checkbox label::after {
  height: calc(var(--check-box-size) - 16px);
  left: calc(var(--check-box-size) - 22px);
  top: calc(var(--check-box-size) - 14px);
  width: calc(var(--check-box-size) - 24px);
}

/* New Releases */
.calendar-main-display-method-1-cell {
  display: inline-block;
  vertical-align: top;
  background: transparent;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 15px;
  transition: transform .2s;
  max-width: 40%;
}

/* Tracked List */

.dashboard-subscriptions-title, .calendar-menu-item-date {
	font-size: 1.0em;
}

.dashboard-subscriptions-title-container {
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Pull List */
.dashboard-pre-orders-item-cell-info-container {
  display: flex;
  flex-direction: column;
}

.dashboard-pre-orders-item-cell-container {
  display: inline-flex;
  flex-direction: column;
}

.dashboard-pre-orders-edit-button, .dashboard-pre-orders-save-button, .dashboard-pre-orders-cancel-button {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  margin-left: 12px;
}


.dashboard-pre-orders-edit-button text, .dashboard-pre-orders-save-button text, .dashboard-pre-orders-cancel-button text {
  font-size: .9em;
}
.dashboard-pre-orders-item-quantity-header {
  margin-left: 10px;
}

.dashboard-pre-orders-item-cell-image {
  margin-left: 0;
  margin-bottom: 15px;
}

.dashboard-pre-orders-item-remove-container {
  justify-content: left;
  padding: 12px 5px;
}

/* Comic info page */

#comic-main-container {
  width: 100%;
  margin-left: 15px;
}

#comic-cover-container-responsive {
  width: 80%;
  height: auto;
  display: inline-block;
}

.comic-main-cover {
  width: var(--comic-cover-normal-width);
  min-width: var(--comic-cover-normal-width);
  height: var(--comic-cover-normal-height);
  min-height: var(--comic-cover-normal-height);
  margin-top: 15px;
  margin-left: 15px;
    background-image: url("/images/noimage_red_lowres.jpg");
    background-size: 95%;
  	background-position: center;
  	background-repeat: no-repeat;

  }

.comic-main-title {
  font-size: 1.8em;
  }
  
.comic-container {
    display: grid;
    height: 100vh;
    max-width: 95%;
    grid-template-columns: var(--comic-left-sidebar-width) calc(100% - var(--comic-left-sidebar-width));
    grid-template-rows: auto auto;
    grid-template-areas:
        "comic-left-sidebar comic-main"
        "comic-left-sidebar comic-footer comic-footer"
}

#comic-main-publisher-information {
  display: block;
  padding-top: 30px;
}

#comic-user-info {
  margin-top: 10px;
  margin-left: 15px;
} 

#comic-user-info-container {
  margin-top: 10px;
  } 
  
#comic-main-description {
  width: 95%;
  margin-top: 20px;
  margin-left: 15px;
  font-size: 1.1em;
}

#comic-main-info {
  margin-left: 15px;
}

#comic-main-creators {
  margin-top: 20px;
  margin-left: 15px;
  margin-bottom: 40px;
  font-size: 90%;
}

/*Order List*/

.dashboard-order-cell-info-container {
  width: calc(100% - 20px - 10px);
  margin-left: 10px;
  margin-right: 10px;
}

.dashboard-ready-to-order-item-total-items-container, .dashboard-ready-to-order-button-container, .dashboard-ready-to-order-item-title, .dashboard-ready-to-order-item-total-price-container {
  text-align: left;
}

dashboard-order-store-items-ordered-other-info-container > .vertical-align {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  font-size: 80%;
  flex-direction: column;
  margin-left: 10px;
}
.dashboard-order-store-items-ordered-container {
  width: 58%;
  margin-left: 5px;
  border-top: 1px solid var(--grid-border-color);
  border-bottom: 0px solid var(--grid-border-color);
}

.dashboard-order-store-items-ordered-cell {
  display: flex;
  flex-direction: column;
}

.vertical-align {
  display: flex;
  justify-content: left;
  flex-direction: row;
  margin-left: 10px;
  align-items: baseline;
}

.dashboard-order-cancel-button text, .dashboard-ready-to-order-item-title, .dashboard-ready-to-order-item-value {
  font-size: 1.0em;
  }
  
.dashboard-order-cancel-button {
  margin-top: 10px;
}

/* Login screen */
#login-information {
  display: flex;
  width: 95%;
  position: relative;
  flex-direction: column-reverse;
}

#login-box {
  width: 90%;
  height: auto;
}

.login-username, .login-password {
  width: 80%;
}

#login-continue-button {
  justify-content: right;
  margin: 10px 15px;
  width: fit-content;
  padding: 6px 25px;
}

#login-links > .header2 {
  margin: 8px 0;
}

.input-block input {
  font-family: inherit;
  font-size: inherit;
  color: var(--text0-color);
  width: 85%;
}

.input-block {
  padding-right: 0px;
}

.index-main {
  padding-bottom: 30px;
}

.menu-title2 {
  max-width: 90%;
}

/* Dashboard */
.menu-button, .menu-button2 {
  font-size: 1.0em;
}

#info-account-username-container {
  margin-bottom: 6px;
}

.calendar-main-display-method-2-cover {
  filter: drop-shadow(1px 1px 3px #ddd);
}

#info-dashboard-wish-list-items-container {
  margin-left: 15px;
}

.calendar-main-display-method-2-cell {
  width: calc(100% - 0px - 0px);
  margin-left: 0px;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 5px;
  border-top: 1px solid var(--grid-border-color);
  border-bottom: 0px solid var(--grid-border-color);
}

.calendar-main-display-method-2-info {
  margin-right: 5px;
}

.calendar-menu-item-date {
  min-width: 80px;
}

#calendar-header-menu-items {
  align-items: center;
  flex-direction: column;
  overflow: visible;
  margin-left: 0px;
}

#calendar-header-new-comics {
  margin-right: 0px;
}


#orders-menu-container {
  width: calc(100% - 10px - 10px);
  margin-left: 10px;
  margin-right: 10px;
}

#info-dashboard-menu > .menu-button {
  display: block;
  margin-bottom: 5px;
}

#info-dashboard-menu-container {
  margin-top: 0px;
}

/* NEW COMICS */
#filter-menu-publishers-container > .vertical-align {
  flex-direction: row !important;
  align-items: center;
}

#filter-menu-format-container > .vertical-align {
  flex-direction: row !important;
  align-items: center;
}

#filter-menu-status-container > .vertical-align {
  flex-direction: row !important;
  align-items: center;
}

.calendar-right-sidebar {
  background-color: rgba(230,230,230,.85);
  }

/* TRACKED SERIES */

#tracked-series-menu-container > .menu {
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: 0px;
}

#dashboard-pre-orders-menu-container > .menu {
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: 0px;
}

#orders-menu-container > .menu {
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: 0px;
}

.info-dashboard-notifications-type-container {
  flex-direction: column;
}

}

/*
@media screen and (min-width: 200px) {
    .comic-background-image {
        transform: scale(3.5);
    }
}

@media screen and (min-width: 600px) {
    .comic-background-image {
        transform: scale(5.5);
    }
}

@media screen and (min-width: 900px) {
    .comic-background-image {
        transform: scale(7.5);
    }
}
*/

/* NOG VERVANGEN KLEUR AANPASSINGEN */
.comic-main-other-variants-info-header-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  margin-right: 10px;
  opacity: var(--text-opacity);
  filter: invert(40%);
}

.hilight-icon {
  filter: invert(60%) sepia(50%) saturate(950%) hue-rotate(320deg) brightness(80%) contrast(120%) !important;
}

.menu-item-icon {
  width: 32px;
  height: 32px;
  opacity: var(--text-opacity);
  filter: invert(90%);
}

/* DARK MODE DETECTIE EN KLEURWIJZIGINGEN */

@media (prefers-color-scheme: dark) {
  .login-body {
    background: #222;
  }

/*

body {
    --background-cover-opacity: 0.2;
}

.dark-mode {
  --background: #222;
  --sidebar-background: #333;
  --box-background-color: #222;
  --box-background-error-color: #B00020;
  --box-color: #4785C5;
  --box2-background-color: #333;
  --title-color: #eee;
  --text0-color: #ddd;
  --text1-color: #4785C5;
  --text2-color: #E2001A;
  --button1-background-color: #4785C5;
  --button1-color: #666;
  --button2-background-color: #E2001A;
  --button2-color: #fff;
  --button3-background-color: #E2001A;
  --button3-color: #fff;
  --check-box-background-color: #758FAA;
  --check-box-color: #fff;
  --button-textcolor: #fff;
  
  background: var(--background);
}

.menu-item-icon {
  filter: invert(8%);
}

.comic-main-other-variants-info-header-icon, .calendar-main-display-method-1-info-header-icon, .calendar-main-display-method-2-info-header-icon, .dashboard-subscriptions-title-issue-icon {
  filter: invert(25%);
}

.calendar-right-sidebar {
  background-color: rgba(34,34,34,.85);
}

.comic-background-container-overlay {
    background: linear-gradient(to bottom, rgba(30, 30, 30, var(--background-cover-opacity)) 0%, var(--background) 100%);
}

.calendar-header-foc-date {
  background: rgba(35,35,35,.7);
}

.calendar-menu-item-icon {
  filter: invert(0%);
}

.calendar-menu-item-filter-icon {
  filter: invert(0%);
}

.calendar-main-display-method-2-cover {
	filter: none;
}

.info-dashboard-subscriptions-cell-info-container {
  border-top: 1px solid #ccc;
  border-bottom: 0px solid var(--grid-border-color);
}

.calendar-main-display-method-2-cell, .dashboard-subscriptions-cell-info-container, .dashboard-subscriptions-title-container, .dashboard-pre-orders-item-cell-container, .dashboard-order-store-items-ordered-container {
    border-top: 1px solid #fff;
}

*/

}


.pages-container {
    margin-top: 15px;
    display:flex;
    padding: 10px;
    font-family: 'AvenirLTStd-Heavy';
    font-weight: normal;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    width: 100%;

    .pages-next {
        padding-left: 10px;
        cursor: pointer;
    }

    .pages-previous {
        padding-right: 10px;
        cursor: pointer;
    }

    select {
        padding-left: 5px; 
        padding-right: 5px;
        cursor: pointer;
    }

    .pages-previous-disabled,
    .pages-next-disabled {
        color: #a7a7a7;
    }
}