* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;

    /* https://www.1001fonts.com/kalam-font.html */
    /* @import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap'); */

    /* animated gifs: https://blog.joypixels.com/emojione-animations-now-available/ */
    
    /* filter calculator: https://codepen.io/sosuke/pen/Pjoqqp */

    --screen-width: 80%;

    --blur: 7px;

    --color-default: white;
    --color-white: white;
    --color-error: red;
    --color-black: black;
    --color-green: rgba(0, 255, 0, 1.0);
    --color-dark-green: green;
    --color-red: red;
    --color-orange: orange;
    --color-gray: gray;
    --color-dark-gray: darkgray;
    --color-yellow: yellow;
    --color-blue: rgba(44, 84, 113, 1.0);
    --color-blue-intense: rgba(64, 104, 133, 1.0);
    --color-blue-very-intense: rgba(84, 124, 153, 1.0);

    --font-regular: 'Teen';
    --font-light: 'Teen-Light';
    --font-bold: 'Teen-Bold';

    --font-size-default: 1.7rem;
    --font-size-very-small: 1.1rem;
    --font-size-small: 1.4rem;
    --font-size-normal: 1.9rem;
    --font-size-large: 2.3rem;
    --font-size-very-large: 3.2rem;
    --font-size-very-very-large: 4.0rem;

    --font-color-default: white;
    --font-color-white: white;
    --font-color-error: red;
    --font-color-green: rgba(0, 255, 0, 1.0);
    --font-color-red: red;
    --font-color-orange: orange;
    --font-color-gray: gray;
    --font-color-dark-gray: darkgray;
    --font-color-yellow: yellow;
    --font-color-blue: rgba(44, 84, 113, 1.0);

    --menu-height: 60px;
    --menu-margin-top: 10px;
    --menu-margin-bottom: 10px;
    --menu-margin-left: 10px;
    --menu-margin-right: 10px;

    --menu-item-border-height: 1px;
    --menu-item-border-color-blue: var(--color-blue);
    --menu-item-margin-top: 4px;
    --menu-item-margin-bottom: 4px;
    --menu-item-margin-left: 6px;
    --menu-item-margin-right: 6px;
    --menu-item-padding-top: 6px;
    --menu-item-padding-bottom: 6px;
    --menu-item-padding-left: 6px;
    --menu-item-padding-right: 6px;

    --search-result-item-border-height: 2px;
    --search-result-item-border-color-blue: var(--color-blue);
    --search-result-item-border-color-red: var(--color-red);
    --search-result-item-border-color-dark-gray: var(--color-dark-gray);
    --search-result-item-border-blur: 1px;
    --search-result-item-border-radius: 1.5rem;
    --search-result-item-margin-top: 10px;
    --search-result-item-margin-bottom: 10px;
    --search-result-item-margin-left: 6px;
    --search-result-item-margin-right: 6px;
    --search-result-item-padding-left: 10px;
    --search-result-item-padding-right: 10px;
    --search-result-item-padding-top: 10px;
    --search-result-item-padding-bottom: 10px;

    --text-result-item-margin-top: 10px;
    --text-result-item-margin-bottom: 10px;
    --text-result-item-margin-left: 6px;
    --text-result-item-margin-right: 6px;
    --text-result-item-padding-left: 10px;
    --text-result-item-padding-right: 10px;
    --text-result-item-padding-top: 4px;
    --text-result-item-padding-bottom: 4px;

    --content-container-margin-bottom: 10px;

    --comic-cover-width: 175px;
    --comic-cover-height: 266px;

    --series-logo-width: 400px;
    --series-logo-height: 266px;

    --comic-cover-normal-width: calc(var(--comic-cover-width) * 0.9);
    --comic-cover-normal-height: calc(var(--comic-cover-height) * 0.9);
    --comic-cover-small-width: calc(var(--comic-cover-width) * 0.75);
    --comic-cover-small-height: calc(var(--comic-cover-height) * 0.75);
    --comic-cover-large-width: calc(var(--comic-cover-width) * 1.4);
    --comic-cover-large-height: calc(var(--comic-cover-height) * 1.4);
    --comic-cover-preview-width: calc(var(--comic-cover-width) * 0.35);
    --comic-cover-preview-height: calc(var(--comic-cover-height) * 0.35);
    --comic-cover-story-arc-width: calc(var(--comic-cover-width) * 0.75);
    --comic-cover-story-arc-height: calc(var(--comic-cover-height) * 0.75);
    --comic-cover-search-result-width: calc(var(--comic-cover-width) * 0.75);
    --comic-cover-search-result-height: calc(var(--comic-cover-height) * 0.75);
    --comic-cover-connecting-width: calc(var(--comic-cover-width) * 0.6);
    --comic-cover-connecting-height: calc(var(--comic-cover-height) * 0.6);
    --comic-cover-list1-width: calc(var(--comic-cover-width) * 0.85);
    --comic-cover-list1-height: calc(var(--comic-cover-height) * 0.85);
    --comic-cover-view4-width: calc(var(--comic-cover-width) * 0.75);
    --comic-cover-view4-height: calc(var(--comic-cover-height) * 0.75);

    --comic-cover-radius: 5px;

    --comic-cover-margin-top: 10px;
    --comic-cover-margin-bottom: 10px;
    --comic-cover-margin-left: 10px;
    --comic-cover-margin-right: 10px;

    --series-logo-normal-width: var(--series-logo-width);
    --series-logo-normal-height: var(--series-logo-height);

    --series-artwork-large-width: calc(var(--comic-cover-width) * 1.8);
    --series-artwork-large-height: calc(var(--comic-cover-height) * 1.8);

    --no-comic-cover: 0.7;
    --no-comic-cover-padding: 0.3;

    --input-normal-height: 38px;
    --input-normal-font-size: 1.9rem;
    --input-normal-placeholder: 1.9rem;
    --input-normal-font-color: var(--font-color-white);
    --input-normal-placeholder-font-color: var(--font-color-gray);
    --input-normal-border-radius: 1.1rem;
    --input-normal-border-height: 2px;
    --input-normal-border-blur: 1px;
    --input-normal-background-color: var(--color-black);
    --input-normal-border-color-blue: var(--color-blue);
    /*--input-normal-border-color-green: var(--color-green);*/
    --input-normal-border-color-green: var(--color-blue);
    --input-normal-icon-left: 10px;

    --window-transparency: rgba(0, 0, 0, 0.3);
    --window-transparency-light: rgba(0, 0, 0, 0.7);
    --window-transparency-dark: rgba(0, 0, 0, 0.8);
    --window-transparency-very-dark: rgba(0, 0, 0, 0.9);
    --window-border-radius: 5px;
    --window-margin-top: 10px;
    --window-margin-bottom: 10px; 
    --window-margin-left: 10px;
    --window-margin-right: 10px;
    --window-padding-top: 5px;
    --window-padding-bottom: 10px;
    --window-padding-left: 10px; 
    --window-padding-right: 10px;
    --background-image-blur: 10px; /* 20px */

    --window-title-bar-height: 50px;

    --scrollbar-border-radius: 20px;
    --scrollbar-thumb-color: var(--color-blue);
    --scrollbar-thumb-width: 12px;
    --scrollbar-thumb-height: 10px;

    --line-height: 2px;
    --line-color: var(--color-blue);

    --button-height: 38px;
    --button-font: var(--font-bold);
    --button-font-size: 1.9rem;
    --button-font-color-white: var(--font-color-white);
    --button-font-color-gray: var(--font-color-gray);
    --button-font-color-blue: var(--font-color-blue);
    --button-disabled-font-color: var(--font-color-gray);
    --button-border-radius: 1.4rem;
    --button-border-height: 2px;
    --button-border-blur: 1px;
    --button-background-color: var(--color-black);
    --button-border-color-blue: var(--color-blue);
    --button-border-color-gray: var(--color-gray);
    --button-border-color-red: var(--color-red);
    --button-border-color-orange: var(--color-orange);
    --button-border-color-green: var(--color-green);
    --button-border-color-dark-green: var(--color-dark-green);
    --button-border-color-yellow: var(--color-yellow);
    --button-padding-left: 1.4rem;
    --button-padding-right: 1.4rem;
    --button-counter-width: 32px;
    --button-counter-padding-left: 6px;
    --button-small-height: 30px;
    --button-small-font-size: 1.6rem;
    --button-small-border-height: 1px;


    --button-round-large-font: var(--font-bold);
    --button-round-large-height: 48px;
    --button-round-large-width: 48px;
    --button-round-large-font-size: 26px;
    --button-round-large-border-radius: 50%;

    --loader-size-small: 18px;
    --loader-size-normal: 30px;
    --loader-dot-size-normal: 30%;
    --loader-primary-white: var(--color-white);
    --loader-secondary-white: var(--color-white);

    --drag-and-drop-small-width: 340px;
    --drag-and-drop-normal-width: 420px;
    --drag-and-drop-background-color: var(--color-black);
    --drag-and-drop-border-radius: 1.5rem;
    --drag-and-drop-border-height: 2px;
    --drag-and-drop-border-color: var(--color-blue);
    --drag-and-drop-border-radius: 1.4rem;
    --drag-and-drop-border-blur: 1px;

    --drag-and-drop-button-border-color-blue: var(--color-blue);
    --drag-and-drop-button-border-color-green: var(--color-green);
    --drag-and-drop-button-border-color-yellow: var(--color-yellow);
    --drag-and-drop-button-border-color-red: var(--color-red);

    --drag-and-drop-font-size-small: 1.6rem;
    --drag-and-drop-font-size-normal: 1.9rem;
    --drag-and-drop-font-size-large: 2.1rem;
    --drag-and-drop-font-color-normal: var(--font-color-white);
    --drag-and-drop-font-color-error: var(--font-color-red);

    --message-box-maximum-width: 480px;
    --message-box-border-color-blue: var(--color-blue);
    --message-box-border-color-green: var(--color-green);
    --message-box-border-color-red: var(--color-red);
    --message-box-border-height: 2px;
    --message-box-border-radius: 1.5rem;
    --message-box-border-blur: 1px;
    --message-box-font-color: var(--font-color-white);
    --message-box-font-size: 2.2rem;
    --message-box-padding-top: 6px;
    --message-box-padding-bottom: 6px;
    --message-box-padding-left: 20px;
    --message-box-padding-right: 20px;

    --bottom-menu-height: 60px;
    --bottom-menu-bottom-space: 10px;
    --bottom-menu-margin-top: 10px;
    --bottom-menu-margin-bottom: 10px;
    --bottom-menu-padding-top: 10px;
    --bottom-menu-padding-bottom: 10px;
    --bottom-menu-padding-left: 10px;
    --bottom-menu-padding-right: 10px;

    --header-font: var(--font-bold);
    --header-font-size: 2.2rem;

    --draggable-items-container-height: 150px;
    --draggable-items-container-margin-bottom: 10px;

    --grid-color: var(--color-gray);
    --grid-size-width: 40px;
    --grid-size-height: 40px;
    --grid-margin-top: calc(var(--grid-size-height) * 4);
    --grid-margin-bottom: 10px;
    --grid-margin-left: 10px;
    --grid-margin-right: 10px;
    --grid-start-top: calc(var(--grid-size-height) * 3);
    --grid-total-size-height: calc(calc(var(--grid-size-height) * 10) + 2px); /* 50 */

    --grid-help-background-color-green: var(--color-green);
    --grid-help-background-color-red: var(--color-red);

    --text-very-small-font: var(--font-regular);
    --text-very-small-font-bold: var(--font-bold);
    --text-very-small-font-light: var(--font-light);
    --text-very-small-font-size: var(--font-size-very-small);
    --text-very-small-font-color-white: var(--color-white);
    --text-very-small-font-color-dark-gray: var(--color-dark-gray);
    --text-small-font: var(--font-regular);
    --text-small-font-bold: var(--font-bold);
    --text-small-font-light: var(--font-light);
    --text-small-font-size: var(--font-size-small);
    --text-small-font-color-white: var(--color-white);
    --text-small-font-color-dark-gray: var(--color-dark-gray);
    --text-normal-font: var(--font-regular);
    --text-normal-font-bold: var(--font-bold);
    --text-normal-font-light: var(--font-light);
    --text-normal-font-size: var(--font-size-normal);
    --text-normal-font-color-white: var(--color-white);
    --text-normal-font-color-dark-gray: var(--color-dark-gray);
    --text-large-font: var(--font-regular);
    --text-large-font-bold: var(--font-bold);
    --text-large-font-size: var(--font-size-large);
    --text-large-font-color-white: var(--font-color-white);
    --text-large-font-color-dark-gray: var(--font-color-dark-gray);
    --text-very-large-font: var(--font-regular);
    --text-very-large-font-bold: var(--font-bold);
    --text-very-large-font-size: var(--font-size-very-large);
    --text-very-large-font-color-white: var(--font-color-white);
    --text-very-large-font-color-dark-gray: var(--font-color-dark-gray);
    --text-very-very-large-font: var(--font-regular);
    --text-very-very-large-font-bold: var(--font-bold);
    --text-very-very-large-font-size: var(--font-size-very-very-large);
    --text-very-very-large-font-color-white: var(--font-color-white);
    --text-very-very-large-font-color-dark-gray: var(--font-color-dark-gray);

    --text-title-font: var(--font-bold);
    --text-title-font-size: var(--font-size-large);
    --text-title-font-color-white: var(--color-white);

    --comic-title-small-font: var(--font-light);
    --comic-title-small-font-size : var(--font-size-small);
    --comic-title-small-font-color-white: var(--color-white);

    --comic-release-date-very-small-font: var(--font-light);
    --comic-release-date-very-small-font-size : var(--font-size-very-small);
    --comic-release-date-very-small-font-color-dark-gray: var(--color-dark-gray);

    --comics-grid-border-height: 2px;
    --comics-grid-border-radius: 1.5rem;
    --comics-grid-border-blur: 1px;
    --comics-grid-border-color-blue: var(--color-blue);
    --comics-grid-border-padding-top: 6px;
    --comics-grid-border-padding-bottom: 6px;
    --comics-grid-border-padding-left: 6px;
    --comics-grid-border-padding-right: 6px;
    --comics-grid-border-margin-left: 6px;
    --comics-grid-border-margin-right: 6px;

    --comics-list1-border-height: 2px;
    --comics-list1-border-radius: 1.5rem;
    --comics-list1-border-blur: 1px;
    --comics-list1-border-color-blue: var(--color-blue);
    --comics-list1-border-padding-top: 8px;
    --comics-list1-border-padding-bottom: 8px;
    --comics-list1-border-padding-left: 10px;
    --comics-list1-border-padding-right: 10px;
    --comics-list1-border-margin-top: 20px;
    --comics-list1-border-margin-bottom: 20px;
    --comics-list1-border-margin-left: 6px;
    --comics-list1-border-margin-right: 6px;

    --length-username: 260px;
    --length-firstname: 260px;
    --length-lastname: 260px;
    --length-password: 260px;
    --length-email: 260px;
    --length-url: 700px;
    --length-price: 120px;
    --length-menu-search: 200px;
    --length-list-name: 360px;
    --length-description: 100%;
    --length-auction-price: 140px;
    --length-issue-number: 150px;
    --length-tag-name: 360px;
    --length-title: 360px;
    --length-series: 360px;
    --length-creator: 360px;
    --length-panel-comic-title: 420px;

    --link-color-blue: var(--color-blue);
    --link-color-blue-intense: var(--color-blue-intense);
    --link-color-blue-very-intense: var(--color-blue-very-intense);

    --publisher-logo-normal-width: 100px;
    --publisher-logo-normal-height: 40px;

    --icon-width: 24px;
    --icon-height: 24px;
    --icon-very-small-width: 16px;
    --icon-very-small-height: 16px;
    --icon-small-width: 20px;
    --icon-small-height: 20px;
    --icon-medium-width: 24px;
    --icon-medium-height: 24px;
    --icon-large-width: 28px;
    --icon-large-height: 28px;
    --icon-very-large-width: 36px;
    --icon-very-large-height: 36px;

    --icon-color-blue: invert(30%) sepia(17%) saturate(1310%) hue-rotate(163deg) brightness(97%) contrast(96%);
    --icon-color-dark-gray: invert(83%) sepia(0%) saturate(571%) hue-rotate(156deg) brightness(83%) contrast(88%);
    --icon-color-gray: invert(51%) sepia(6%) saturate(0%) hue-rotate(154deg) brightness(97%) contrast(88%);
    --icon-color-green: invert(58%) sepia(63%) saturate(3215%) hue-rotate(82deg) brightness(112%) contrast(131%);
    --icon-rating-width: 38px;
    --icon-rating-height: 38px;
    --icon-pre-order-width: 22px;
    --icon-pre-order-height: 22px;

    --tag-border-radius: 6px;

    --panel-marker-width: 40px;
    --panel-marker-height: 40px;
    --panels-sidebar: 300px;
    --panels-background-opacity: 0.15;
    --panels-text-width: 600px;
    --panels-text-height: 300px;
    --panels-text-background-opacity: 0.50;
    --panels-infobar-height: 30px;

    --comic-character-normal-width: 100px;
    --comic-character-normal-height: 100px;

    --folder-icon-normal-width: 180px;
    --folder-icon-normal-height: 180px;
}

/* iPhone */
@media (max-width: 767px) {
    * {
        --screen-width: 98%;
        --font-size-default: 1.3rem;
        --font-size-small: 1.2rem;
        --font-size-normal: 1.7rem;
        --font-size-large: 1.9rem;
        --font-size-very-large: 2.4rem;
        --font-size-very-very-large: 3.0rem;

        --header-font-size: 1.9rem;

        --button-height: 32px;
        --button-font-size: 1.7rem;
        --button-padding-left: 1.0rem;
        --button-padding-right: 1.0rem;

        --button-small-height: 26px;
        --button-small-font-size: 1.4rem;

        --comic-cover-normal-width: calc(var(--comic-cover-width) * 0.75);
        --comic-cover-normal-height: calc(var(--comic-cover-height) * 0.75);
        --comic-cover-large-width: calc(var(--comic-cover-width) * 1.0);
        --comic-cover-large-height: calc(var(--comic-cover-height) * 1.0);
        --comic-cover-story-arc-width: calc(var(--comic-cover-width) * 0.55);
        --comic-cover-story-arc-height: calc(var(--comic-cover-height) * 0.55);
        --comic-cover-search-result-width: calc(var(--comic-cover-width) * 0.55);
        --comic-cover-search-result-height: calc(var(--comic-cover-height) * 0.55);
        --comic-cover-connecting-width: calc(var(--comic-cover-width) * 0.4);
        --comic-cover-connecting-height: calc(var(--comic-cover-height) * 0.4);
        --comic-cover-list1-width: calc(var(--comic-cover-width) * 0.6);
        --comic-cover-list1-height: calc(var(--comic-cover-height) * 0.6);

        --publisher-logo-normal-width: 100px;
        --publisher-logo-normal-height: 30px;

        --length-menu-search: 120px;

        --button-round-large-height: 46px;
        --button-round-large-width: 46px;

        --icon-width: 18px;
        --icon-height: 18px;
        --icon-very-small-width: 12px;
        --icon-very-small-height: 12px;
        --icon-small-width: 14px;
        --icon-small-height: 14px;
        --icon-medium-width: 18px;
        --icon-medium-height: 18px;
        --icon-large-width: 22px;
        --icon-large-height: 22px;
        --icon-very-large-width: 30px;
        --icon-very-large-height: 30px;

        --series-artwork-large-width: calc(var(--comic-cover-width) * 1.4);
        --series-artwork-large-height: calc(var(--comic-cover-height) * 1.4);

        --folder-icon-normal-width: 90px;
        --folder-icon-normal-height: 90px;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    * {
        --screen-width: 98%;

        --comic-cover-large-width: calc(var(--comic-cover-width) * 1.2);
        --comic-cover-large-height: calc(var(--comic-cover-height) * 1.2);
    }
}

html {
    height: 100vh;
    overflow-y: scroll;
    width: 100%;
    font-size: 62.5%;
    scroll-behavior: auto;
}

html::-webkit-scrollbar {
    width: var(--scrollbar-thumb-width);
    height: var(--scrollbar-thumb-height);
}

html::-webkit-scrollbar-thumb { 
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
}

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

body {
    min-height: 100vh;
    height: 100vh;
    font-family: var(--font-regular);
    font-size: var(--font-size-default);
    color: var(--font-color-default);
    background-image: linear-gradient(rgba(6, 6, 6, 0.85), rgba(0, 0, 0, 0.85)), url('/comics/just-comics-logo-1.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background-color: rgba(0, 0, 0, 1.0); */
    background-blend-mode: hard-light;
}

dialog {
    background: transparent;
    border: none !important;
    color: white;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* Desktop */
@media (min-width: 1024px) {
    body {
        background-position-y: 50%;
    }

    .notForLargeScreen {
        display: none !important;
    }
}

/* iPhone */
@media (max-width: 767px) {
    body {
        background-position-x: 50%;
    }

    .notForSmallScreen {
        display: none !important;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    body {

    }

    .notForLargeScreen {
        display: none !important;
    }
}

pre {
    white-space: pre-wrap;
}

.hidden {
    display: none !important;
}

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

.noTransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.noAnimation {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

.noScrolling {
    position: fixed;
    overflow-y: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.noScrolling::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
}

.noTextShadow {
    text-shadow: none !important;
}

.noMargin {
    margin: 0 !important;
}

.noMarginTop {
    margin-top: 0 !important;
}

.noMarginBottom {
    margin-bottom: 0 !important;
}

.noMarginLeft {
    margin-left: 0 !important;
}

.noMarginRight {
    margin-right: 0 !important;
}

.noPadding {
    padding: 0 !important;
}

.noPaddingTop {
    padding-top: 0 !important;
}

.noPaddingBottom {
    padding-bottom: 0 !important;
}

.noPaddingLeft {
    padding-left: 0 !important;
}

.noPaddingRight {
    padding-right: 0 !important;
}

.noBorder {
    border: none !important;
}

.noTopBorder {
    border-top: none !important;
}

.noBottomBorder {
    border-bottom: none !important;
}

.noHeight {
    height: 0 !important;
}

.noHover {
    pointer-events: none !important;
}

.noFlexbox {
    display: block !important;
}

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

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

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

.margin-top-1 {
    margin-top: 10px !important;
}

.margin-top-2 {
    margin-top: 20px !important;
}

.margin-top-3 {
    margin-top: 30px !important;
}

.margin-top-4 {
    margin-top: 40px !important;
}

.margin-top-5 {
    margin-top: 50px !important;
}

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

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

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

.margin-bottom-1 {
    margin-bottom: 10px !important;
}

.margin-bottom-2 {
    margin-bottom: 20px !important;
}

.margin-bottom-3 {
    margin-bottom: 30px !important;
}

.margin-bottom-4 {
    margin-bottom: 40px !important;
}

.margin-bottom-5 {
    margin-bottom: 50px !important;
}

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

.margin-left-1 {
    margin-left: 10px !important;
}

.margin-left-2 {
    margin-left: 20px !important;
}

.margin-left-3 {
    margin-left: 30px !important;
}

.margin-left-4 {
    margin-left: 40px !important;
}

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

.margin-right-1 {
    margin-right: 10px !important;
}

.margin-right-2 {
    margin-right: 20px !important;
}

.margin-right-3 {
    margin-right: 30px !important;
}

.margin-right-4 {
    margin-right: 40px !important;
}

.padding-top-0-2 {
    padding-top: 2px !important;
}

.padding-top-0-3 {
    padding-top: 3px !important;
}

.padding-top-0-5 {
    padding-top: 5px !important;
}

.padding-top-5 {
    padding-top: 50px !important;
}

.padding-bottom-0-2 {
    padding-bottom: 2px !important;
}

.padding-bottom-0-3 {
    padding-bottom: 3px !important;
}

.padding-bottom-0-5 {
    padding-bottom: 5px !important;
}

.padding-bottom-5 {
    padding-bottom: 50px !important;
}

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

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

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

.padding-left-1 {
    padding-left: 10px !important;
}

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

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

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

.padding-right-1 {
    padding-right: 10px !important;
}

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

.forceBold {
    font-family: var(--font-bold) !important;
}

.forceInlineBlock {
    display: inline-block !important;
}

.forceFullWidth {
    width: 100% !important;
}

.flexBox {
    display: flex;
    align-items: center;
}

.flexBoxInline {
    display: inline-flex;
    align-items: center;  
}

.flexBoxColumn {
    flex-direction: column;
}

.flexBoxRow {
    flex-direction: row;
}

.flexBoxStart {
    align-items: flex-start;
}

.flexBoxFullWidth {
    width: 100%;
}

.flexBoxGap-0-0-1 {
    gap: 1px;
}

.flexBoxGap-0-5 {
    gap: 0.5rem;
}

.flexBoxGap-1 {
    gap: 1.0rem;
}

.flexBoxGap-2 {
    gap: 2.0rem;
}

.flexBoxGap-3 {
    gap: 3.0rem;
}

.flexBoxEmptySpace {
    width: auto;
    flex-grow: 1;
}

.flexBoxBreak {
    flex-basis: 100%;
    height: 0;
}

.flexBoxNoShrink {
    flex-shrink: 0 !important;
}

.flexBoxWrap {
    flex-wrap: wrap;
}

.flexBoxMinimumWidth {
    width: fit-content !important;
}

.flexToRight {
    flex-flow: row-reverse !important;
}

.flexItemFullWidth {
    flex: 0 0 100%;
}

.flexSpaceBetween {
    justify-content: space-between;
}

.flexSpaceAround {
    justify-content: space-around;
}

.wordWrap {
    word-wrap: anywhere;
}

.forceHeightAuto {
    height: auto !important;
}

.forceMaxHeightAuto {
    max-height: 100% !important;
}

.forceTextCenter {
    text-align: center !important;
}

.flexItemOrder1, .gridItemOrder1 {
    order: 1;
}

.flexItemOrder2, .gridItemOrder2 {
    order: 2;
}

.flexItemOrder3, .gridItemOrder3 {
    order: 3;
}

.flexItemOrder4, .gridItemOrder4 {
    order: 4;
}

.flexItemOrder5, .gridItemOrder5 {
    order: 5;
}

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

.whiteColor {
    color: var(--font-color-white) !important;
}

.darkGrayColor {
    color: var(--font-color-dark-gray) !important;
}

.greenColor {
    color: var(--font-color-green) !important;
}

.redColor {
    color: var(--font-color-red) !important;
}

.orangeColor {
    color: var(--font-color-orange) !important;
}

.noResultsContainerBorderColorRed {
    border: solid var(--search-result-item-border-height) var(--search-result-item-border-color-red) !important;
}

.hideCell, .hideCollected, .hideNotCollected, .hideMyClaims, .hideMyAuctions, .hideViewed, .hideNotViewed {
    display: none !important;
}

.inputUsername {
    width: var(--length-username) !important;
    max-width: 100%;
}

.inputFirstName {
    width: var(--length-firstname) !important;
    max-width: 100%;
}

.inputLastName {
    width: var(--length-lastname) !important;
    max-width: 100%;
}

.inputPassword {
    width: var(--length-password) !important;
    max-width: 100%;
}

.inputCurrentPassword {
    width: var(--length-password) !important;
    max-width: 100%;
}

.inputConfirmPassword {
    width: var(--length-password) !important;
    max-width: 100%;
}

.inputEmail {
    width: var(--length-email) !important;
    max-width: 100%;
}

.inputURL {
    width: var(--length-url) !important;
    max-width: 100%;
}

.inputMenuSearch {
    width: var(--length-menu-search) !important;
    max-width: 100%;
}

.inputListName {
    width: var(--length-list-name) !important;
    max-width: 100%;
}

.inputDescription {
    width: var(--length-description) !important;
    max-width: 100%;
}

.inputPrice {
    width: var(--length-price) !important;
}

.inputIssueNumber {
    width: var(--length-issue-number) !important;
}

.auctionPrice {
    width: var(--length-auction-price) !important; 
}

.inputTagName {
    width: var(--length-tag-name) !important;
    max-width: 100%;
}

.inputTitle {
    width: var(--length-title) !important;
    max-width: 100%;
}

.inputSeries {
    width: var(--length-series) !important;
    max-width: 100%;
}

.inputCreator {
    width: var(--length-series) !important;
    max-width: 100%;
}

.inputPanelComicTitle {
    width: var(--length-panel-comic-title) !important;
    max-width: 100%;
}

.line {
    width: 100%;
    height: var(--line-height);
    background-color: var(--line-color);
}

.forceButtonWidth-2 {
    width: 20px !important;
}

.forceButtonWidth-3 {
    width: 30px !important;
}

.forceButtonWidth-4 {
    width: 40px !important;
}

.forceButtonHeight-2 {
    height: 20px !important;
}

.forceButtonHeight-3 {
    height: 30px !important;
}

.forceButtonHeight-4 {
    height: 40px !important;
}

.forceWidth-20 {
    width: 20px !important;
}

.forceWidth-30 {
    width: 30px !important;
}

.forceWidth-40 {
    width: 40px !important;
}

.forceWidth-50 {
    width: 50px !important;
}

.forceWidth-60 {
    width: 60px !important;
}

.forceHeight-20 {
    height: 20px !important;
}

.forceHeight-30 {
    height: 30px !important;
}

.forceWordWrap {
    word-break: break-all !important;
}

.forceOpacity-30 {
    opacity: 0.3;
}

.buttonBlue {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: var(--button-padding-left);
    padding-right: var(--button-padding-right);
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-blue);
    border-radius: var(--button-border-radius);
}

.buttonBlue:hover {
    cursor: pointer;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue);
}

.buttonBlue:disabled {
    cursor: default;
    color: var(--button-disabled-font-color);
    border: var(--button-border-height) solid var(--button-border-color-blue);
    box-shadow: none;
}

.buttonBlueSelected {
    background-color: var(--button-border-color-blue);
}

.buttonBorderGray {
    border: var(--button-border-height) solid var(--button-border-color-gray) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray) !important;
}

.buttonBorderRed {
    border: var(--button-border-height) solid var(--button-border-color-red) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-red),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-red);
}

.buttonTextGray {
    color: var(--button-disabled-font-color) !important;
}

.buttonTextWhite {
    color: var(--button-font-color-white) !important;
}

.buttonGreen {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: var(--button-padding-left);
    padding-right: var(--button-padding-right);
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-green);
    border-radius: var(--button-border-radius);
}

.buttonGreen:hover {
    cursor: pointer;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-green),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-green);
}

.buttonGreen:disabled {
    cursor: default;
    color: var(--button-disabled-font-color);
    border: var(--button-border-height) solid var(--button-border-color-green);
    box-shadow: none;
}

.buttonYellow {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: var(--button-padding-left);
    padding-right: var(--button-padding-right);
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-yellow);
    border-radius: var(--button-border-radius);
}

.buttonYellow:hover {
    cursor: pointer;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-yellow),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-yellow);
}

.buttonYellow:disabled {
    cursor: default;
    color: var(--button-disabled-font-color);
    border: var(--button-border-height) solid var(--button-border-color-yellow);
    box-shadow: none;
}

.buttonRed {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: var(--button-padding-left);
    padding-right: var(--button-padding-right);
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-red);
    border-radius: var(--button-border-radius);
}

.buttonRed:hover {
    cursor: pointer;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-red),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-red);
}

.buttonRed:disabled {
    cursor: default;
    color: var(--button-disabled-font-color);
    border: var(--button-border-height) solid var(--button-border-color-red);
    box-shadow: none;
}

.buttonCounter {
    display: inline-block;
    min-width: var(--button-counter-width);
    font-family: var(--button-font);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    padding-left: var(--button-counter-padding-left);
    background-color: var(--button-background-color);
}

.buttonRoundLarge {
    height: var(--button-round-large-height);
    width: var(--button-round-large-width);
    font-family: var(--button-round-large-font);
    font-size: var(--button-round-large-font-size);
    border-radius: var(--button-round-large-border-radius);
}

.checkbox {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
}

.checkboxSmall {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-small-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-small-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
}

.checkboxBorderBlue {
    border: var(--button-border-height) solid var(--button-border-color-blue);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue);
}

.checkboxBorderRed {
    border: var(--button-border-height) solid var(--button-border-color-red);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-red),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-red);
}

.checkboxBorderOrange {
    border: var(--button-border-height) solid var(--button-border-color-orange);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-orange),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-orange);
}

.checkboxBorderDarkGreen {
    border: var(--button-border-height) solid var(--button-border-color-dark-green);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-dark-green),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-dark-green);
}

.checkboxBlue {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-blue);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue);
}

.checkboxSmallBlue {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-small-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-small-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-small-border-height) solid var(--button-border-color-blue);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue);
}

.checkboxOffBlue {
    color: var(--button-font-color-gray) !important;
    border: var(--button-border-height) solid var(--button-border-color-gray) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray) !important;
}

.checkboxSmallOffBlue {
    color: var(--button-font-color-gray) !important;
    border: var(--button-small-border-height) solid var(--button-border-color-gray) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray) !important;
}

.checkboxGreen {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-green);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-green),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-green);
}

.checkboxSmallGreen {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-small-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-small-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-small-border-height) solid var(--button-border-color-green);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-green),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-green);
}

.checkboxOffGreen {
    color: var(--button-font-color-gray) !important;
    border: var(--button-border-height) solid var(--button-border-color-gray) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray) !important;
}

.checkboxSmallOffGreen {
    color: var(--button-font-color-gray) !important;
    border: var(--button-small-border-height) solid var(--button-border-color-gray) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray) !important;
}

.checkboxBlue:hover, .checkboxOffBlue:hover, .checkboxSmallBlue:hover, .checkboxSmallOffBlue:hover, .checkboxGreen:hover, .checkboxOffGreen:hover, .checkboxSmallGreen:hover, .checkboxSmallOffGreen:hover   {
    cursor: pointer;
}

.checkboxBlue[disabled] {
    cursor: default;
}

.checkboxOffBlue > .checkmark {
    color: transparent;
}

.tagBlue {
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    height: var(--button-height);
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--button-font-size);
    color: var(--button-font-color-white);
    background-color: var(--button-background-color);
    text-align: center;
    border: var(--button-border-height) solid var(--button-border-color-blue);
    border-radius: var(--tag-border-radius);
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-blue);  
}

.tagOffBlue {
    color: var(--button-font-color-gray) !important;
    border: var(--button-border-height) solid var(--button-border-color-gray) !important;
    box-shadow: 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray),
                inset 0px 0px var(--button-border-blur) var(--button-border-blur) var(--button-border-color-gray) !important;
}

.tagBlue:hover, .tagOffBlue:hover {
    cursor: pointer;
}

.icon {
    width: var(--icon-width);
    height: var(--icon-height);
}

.iconVerySmall {
    width: var(--icon-very-small-width);
    height: var(--icon-very-small-height);
}

.iconSmall {
    width: var(--icon-small-width);
    height: var(--icon-small-height);
}

.iconSmall[disabled]:hover {
    cursor: default;
}

.iconMedium {
    width: var(--icon-medium-width);
    height: var(--icon-medium-height);
}

.iconMedium[disabled]:hover {
    cursor: default;
}

.iconLarge {
    width: var(--icon-large-width);
    height: var(--icon-large-height); 
}

.iconLarge[disabled]:hover {
    cursor: default;
}

.iconVeryLarge {
    width: var(--icon-very-large-width);
    height: var(--icon-very-large-height); 
}

.iconVeryLarge[disabled] {
    cursor: default;
    pointer-events: none !important;
}

.iconVeryLarge[disabled]:hover {
    cursor: default;
}

.iconRating {
    position: relative;
    width: var(--icon-rating-width);
    height: var(--icon-rating-height);
}

.iconColorBlue {
    filter: var(--icon-color-blue);
}

.iconColorDarkGray {
    filter: var(--icon-color-dark-gray);
}

.iconColorGray {
    filter: var(--icon-color-gray);
}

.iconColorGreen {
    filter: var(--icon-color-green);
}

.iconPreOrder {
    width: var(--icon-pre-order-width);
    height: var(--icon-pre-order-height);
}

.icon:hover, .iconVerySmall:hover, .iconSmall:hover, .iconMedium:hover, .iconLarge:hover, .iconVeryLarge:hover, .iconPreOrder:hover, .iconRating:hover, .seriesMyCollection:hover {
    cursor: pointer;
    opacity: 1.0;
}

.iconRatingText {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: var(--icon-rating-width);
    height: var(--icon-rating-height);
    justify-content: center;
    align-items: center;
}

.iconBookmarkRight {
    position: absolute;
    top: 0px;
    right: 2px;
}

.imageAsButton {
    position: relative;
    background-size: cover !important; 
    border: none !important;
    cursor: pointer;
}

.roundBackgroundColorGreen {
    background-color: var(--color-dark-green);
    border-radius: 50%;
}

.roundBackgroundColorOrange {
    background-color: var(--color-orange);
    border-radius: 50%;
}

.roundBackgroundColorRed {
    background-color: var(--color-red);
    border-radius: 50%;
}

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

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

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

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

.linkClaimSale {
    text-decoration: none;
}

.linkClaimSale:visited {
    text-decoration: none;
}

.linkClaimSale:hover {
    text-decoration: none;
}

.linkClaimSale:active {
    text-decoration: none;
}

.inputContainer {
    width: auto;
    height: auto;
}

.inputContainer .inputData {
    position: relative;
    width: 100%;
    height: var(--input-normal-height);
}

.inputContainer .inputData input {
    width: 100%;
    height: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    font-family: var(--font-regular);
    font-size: var(--input-normal-font-size);
    color: var(--input-normal-font-color);
    caret-color: var(--input-normal-font-color);
    border: var(--input-normal-border-height) solid var(--input-normal-border-color-blue);
    border-radius: var(--input-normal-border-radius);
    background-color: var(--input-normal-background-color);
}

.inputContainer .inputData icon {
    position: absolute;
    left: var(--input-normal-icon-left);
    top: calc((var(--input-normal-height) - var(--icon-small-height)) / 2);
}

.inputContainer .inputData .inputIcon {
    padding-left: calc(var(--icon-small-width) + var(--input-normal-icon-left) + 4px) !important;
}

.inputContainer .inputData input::-webkit-input-placeholder {
    opacity: 0;
}

.inputContainer .inputData input::-moz-placeholder {
    opacity: 0;
}

.inputContainer .inputData input::-ms-input-placeholder {
    opacity: 0;
}

.inputContainer .inputData input::-moz-placeholder {
    opacity: 0;
}

.inputContainer .inputData input::placeholder {
    opacity: 0;
}

.inputContainer .inputData input:focus {
    border: var(--input-normal-border-height) solid var(--input-normal-border-color-blue);
    box-shadow: 0px 0px var(--input-normal-border-blur) var(--input-normal-border-blur) var(--input-normal-border-color-blue),
                inset 0px 0px var(--input-normal-border-blur) var(--input-normal-border-blur) var(--input-normal-border-color-blue);
}

.inputContainer .inputData input:valid:not(:focus) {
    border: var(--input-normal-border-height) solid var(--input-normal-border-color-green);
    box-shadow: 0px 0px var(--input-normal-border-blur) var(--input-normal-border-blur) var(--input-normal-border-color-green),
                inset 0px 0px var(--input-normal-border-blur) var(--input-normal-border-blur) var(--input-normal-border-color-green);
}

.inputContainer .inputData input:focus ~ label,
.inputContainer .inputData input:valid ~ label {
    transform: translate(-1.0rem, -3.4rem);
    font-family: var(--font-regular);
    font-size: var(--input-normal-font-size);
    color: var(--input-normal-font-color);
    animation: none .08s ease-in-out infinite alternate;
}

.inputContainer .inputData label {
    position: absolute;
    height: 100%;
    top: 0.78rem;
    left: 1.2rem;
    font-family: var(--font-regular);
    font-size: var(--input-normal-font-size);
    color: var(--input-normal-placeholder-font-color);
    pointer-events: none;
    transition: all 0.3s ease;
}

.inputContainer:has(.forceUsePlaceholder) .inputData input::-webkit-input-placeholder {
    opacity: 1;
}

.inputContainer:has(.forceUsePlaceholder) .inputData input::-moz-placeholder {
    opacity: 1;
}

.inputContainer:has(.forceUsePlaceholder) .inputData input::-ms-input-placeholder {
    opacity: 1;
}

.inputContainer:has(.forceUsePlaceholder) .inputData input::-moz-placeholder {
    opacity: 1;
}

.inputContainer:has(.forceUsePlaceholder) .inputData input::placeholder {
    opacity: 1;
}

.inputContainer:has(.forceUsePlaceholder) .inputData label {
    display: none;
}

.inputContainer:not(:has(.forceUsePlaceholder)) {
    padding-top: 2.0rem;
}

.textAreaContainer {
    width: auto;
    height: auto;
    font-family: var(--font-regular);
    font-size: var(--input-normal-font-size);
    color: var(--input-normal-font-color);
    border: var(--input-normal-border-height) solid var(--input-normal-border-color-blue);
    border-radius: var(--input-normal-border-radius);
    background-color: var(--input-normal-background-color);
    resize: none;
    overflow-y: hidden;
    padding-top: 0.8rem;
    padding-bottom: 1.0rem;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
}

.textAreaContainer:focus {
    border: var(--input-normal-border-height) solid var(--input-normal-border-color-blue);
    box-shadow: 0px 0px var(--input-normal-border-blur) var(--input-normal-border-blur) var(--input-normal-border-color-blue),
                inset 0px 0px var(--input-normal-border-blur) var(--input-normal-border-blur) var(--input-normal-border-color-blue);
}

textarea[disabled] {
    background-color: transparent;
    border: var(--input-normal-border-height) solid transparent;
}

.loaderContainer {
    display: inline-block;
    position: relative;
    width: var(--loader-size-normal);
    height: var(--loader-size-normal);
    animation: loader 2.5s infinite linear both;
}

.loaderContainer > .loaderDot {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    animation: dotLoader 2.0s infinite ease-in-out both;
}

.loaderContainer > .dot-white::before {
    content: '';
    position: absolute;
    display: block;
    width: var(--loader-dot-size-normal);
    height: var(--loader-dot-size-normal);
    background: var(--loader-secondary-white);
    border-radius: 100%;
    box-shadow: 
        0px 0px 5px var(--loader-primary-white),
        0px 0px 10px var(--loader-primary-white),

        inset 0px 0px 2px var(--loader-secondary-white);
    animation: dotBeforeAnimation 2.0s infinite ease-in-out both;
}

.loaderContainer > .loaderDot:nth-child(1) { animation-delay: -1.1s }
.loaderContainer > .loaderDot:nth-child(2) { animation-delay: -1.0s }
.loaderContainer > .loaderDot:nth-child(3) { animation-delay: -0.9s }
.loaderContainer > .loaderDot:nth-child(4) { animation-delay: -0.8s }
.loaderContainer > .loaderDot:nth-child(5) { animation-delay: -0.7s }
.loaderContainer > .loaderDot:nth-child(6) { animation-delay: -0.6s }
.loaderContainer > .loaderDot:nth-child(1)::before { animation-delay: -1.1s }
.loaderContainer > .loaderDot:nth-child(2)::before { animation-delay: -1.0s }
.loaderContainer > .loaderDot:nth-child(3)::before { animation-delay: -0.9s }
.loaderContainer > .loaderDot:nth-child(4)::before { animation-delay: -0.8s }
.loaderContainer > .loaderDot:nth-child(5)::before { animation-delay: -0.7s }
.loaderContainer > .loaderDot:nth-child(6)::before { animation-delay: -0.6s }

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

@keyframes dotLoader {
    80%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes dotBeforeAnimation {
    50% {
        transform: scale(0.4);
    }
    100%, 0% {
        transform: scale(1.0);
    }
}

.comicCover {
    width: var(--comic-cover-normal-width) !important;
    height: var(--comic-cover-normal-height) !important;
    max-width: var(--comic-cover-normal-width) !important;
    max-height: var(--comic-cover-normal-height) !important;
    border-radius: var(--comic-cover-radius);
}

.comicCoverContainer {
    width: var(--comic-cover-normal-width);
    height: var(--comic-cover-normal-height);
    max-width: var(--comic-cover-normal-width);
    max-height: var(--comic-cover-normal-height);
    border-radius: var(--comic-cover-radius);
}

.searchResultsComicCover {
    width: var(--comic-cover-search-result-width) !important;
    height: var(--comic-cover-search-result-height) !important;
    max-width: var(--comic-cover-search-result-width) !important;
    max-height: var(--comic-cover-search-result-height) !important;
    border-radius: var(--comic-cover-radius) !important;
}

.searchResultsComicCoverContainer {
    width: var(--comic-cover-search-result-width);
    height: var(--comic-cover-search-result-height);
    min-width: var(--comic-cover-search-result-width);
    min-height: var(--comic-cover-search-result-height);
    max-width: var(--comic-cover-search-result-width);
    border-radius: var(--comic-cover-radius);
}

.comicCoverList1 {
    width: var(--comic-cover-list1-width) !important;
    height: var(--comic-cover-list1-height) !important;
    max-width: var(--comic-cover-list1-width) !important;
    max-height: var(--comic-cover-list1-height) !important;
    border-radius: var(--comic-cover-radius);
}

.comicCoverView4 {
    width: var(--comic-cover-view4-width) !important;
    height: var(--comic-cover-view4-height) !important;
    max-width: var(--comic-cover-view4-width) !important;
    max-height: var(--comic-cover-view4-height) !important;
    border-radius: var(--comic-cover-radius);
}

.comicCoverList1Container {
    width: var(--comic-cover-list1-width);
    height: var(--comic-cover-list1-height);
    max-width: var(--comic-cover-list1-width);
    max-height: var(--comic-cover-list1-height);
    border-radius: var(--comic-cover-radius);
}

.connectingComicCover {
    width: var(--comic-cover-connecting-width) !important;
    height: var(--comic-cover-connecting-height) !important;
    max-width: var(--comic-cover-connecting-width) !important;
    max-height: var(--comic-cover-connecting-height) !important;
}

.noComicCover {
    width: var(--comic-cover-normal-width) !important;
    height: calc(var(--comic-cover-normal-height) * var(--no-comic-cover)) !important;
    max-width: var(--comic-cover-normal-width) !important;
    max-height: calc(var(--comic-cover-normal-height) var(--no-comic-cover)) !important;
    border-radius: var(--comic-cover-radius) !important;
    padding-top: calc(var(--comic-cover-normal-height) * var(--no-comic-cover-padding)) !important;
}

.comicCoverTopOverlay {
    position: absolute;
    height: 40px !important;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.9), 80%, rgba(0, 0, 0, 0.1));
    z-index: 100;
    border-radius: 0;
}

.comicCharacter {
    width: var(--comic-character-normal-width) !important;
    height: var(--comic-character-normal-height) !important;
    max-width: var(--comic-character-normal-width) !important;
    max-height: var(--comic-character-normal-height) !important;
    border-radius: var(--comic-cover-radius);
}

.comicCharacterContainer {
    width: var(--comic-character-normal-width);
    height: var(--comic-character-normal-height);
    max-width: var(--comic-character-normal-width);
    max-height: var(--comic-character-normal-height);
    border-radius: var(--comic-cover-radius);
}

.gridCharactersContainer {
    display: grid;
    grid-gap: 2.0rem;
    grid-template-columns: repeat(auto-fit, calc(var(--comic-character-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right)));
    justify-content: space-evenly;
    width: 100%;
    height: auto;
}

.folderIcon {
    width: var(--folder-icon-normal-width) !important;
    height: var(--folder-icon-normal-height) !important;
    max-width: var(--folder-icon-normal-width) !important;
    max-height: var(--folder-icon-normal-height) !important;
}

.folderIconContainer {
    width: var(--folder-icon-normal-width);
    height: var(--folder-icon-normal-height);
    max-width: var(--folder-icon-normal-width);
    max-height: var(--folder-icon-normal-height);
}

.gridFolderIconsContainer {
    display: grid;
    grid-gap: 2.0rem;
    grid-template-columns: repeat(auto-fit, calc(var(--folder-icon-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right)));
    justify-content: space-evenly;
    width: 100%;
    height: auto;
}

.seriesLogo {
    width: auto;
    max-height: var(--comic-cover-normal-height);
}

.seriesLogoContainer {
    max-width: var(--series-logo-normal-width);
    max-height: var(--series-logo-normal-height); 
}

.seriesArtworkBorder {
    width: fit-content;
    height: fit-content;
    border: solid var(--search-result-item-border-height) var(--search-result-item-border-color-blue);
    border-radius: var(--search-result-item-border-radius);
    background-color: transparent;
    padding-left: var(--search-result-item-padding-left);
    padding-right: var(--search-result-item-padding-right);    
    padding-top: var(--search-result-item-padding-top);
    padding-bottom: var(--search-result-item-padding-bottom);    
}

.seriesArtworkLargeContainer {
    width: var(--series-artwork-large-width) !important;
    height: var(--series-artwork-large-height) !important;
    max-width: var(--series-artwork-large-width) !important;
    max-height: var(--series-artwork-large-height) !important;
}

.publisherLogo {
    width: auto;
    max-width: var(--publisher-logo-normal-width);
    height: var(--publisher-logo-normal-height);
}

.panelsComicImageInfoContainer {
    width: 100%;
    height: auto;
}

#panelsComicImageMainContainer {
    display: grid;
    grid-template-columns: auto var(--panels-sidebar);
    grid-template-areas: "panelinformation panels"
                         "panelimage panels";
    grid-gap: 1.0rem;
    width: 100%;
    height: auto;
}

#panelsComicImageInfobarContainer {
    grid-area: panelinformation;
    width: 100%;
    height: var(--panels-infobar-height);
    padding-left: calc(var(--panel-marker-width) / 2);
    padding-right: calc(var(--panel-marker-width) / 2);
}

#panelsComicImageDraggableMainContainer {
    grid-area: panelimage;
    position: relative;
    width: 100%;
    height: auto;
    background-color: transparent;
    padding: calc(var(--panel-marker-width) / 2);
}

/*
.panelsComicImageDraggableContainer {
    position: relative;
    width: 100%;
    height: auto;
    background-color: transparent;
}
*/

#panelsComicPanelsContainer {
    grid-area: panels;
    width: 100%;
    background-color: transparent;
}

.panelsComicImage {
    position: relative;
    width: 100%;
    height: 100%;
}

#panelsComicImage {
    width: 100%;
    height: auto;
    z-index: 2;
    clip-path: url(#panelsComicImageClips);
    /*cursor: url('/images/icon-crosshair.png'), crosshair;*/
}

#panelComicsImagePanelsSVG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
#panelComicsImageTextSVG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: calc(var(--panel-marker-width) / 2);
    opacity: var(--panels-text-background-opacity);
    z-index: 2;
}
*/

#panelsComicImageBackground {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    padding: calc(var(--panel-marker-width) / 2);
    opacity: var(--panels-background-opacity);
    z-index: 1;
}

.panelMarker {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--panel-marker-width);
    height: var(--panel-marker-height);
    border-radius: 50%;
    background-color: #00000090;
    cursor: grab;
    z-index: 3;
}

.panelMarkerCross {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.7rem;
    color: var(--text-normal-font-color-white);
    background-color: transparent;
    z-index: 3;
}

.panelHandle {
    cursor: move;
}

.panelMarkerInfo {
    width: 100%;
    height: auto;
    background-color: transparent;
    color: var(--text-normal-font-color-dark-gray);
    /*cursor: grab;*/
}

/*
.panelsComicsImageSelection {
    position: absolute;
    top: 0;
    left: 0;
    padding: calc(var(--panel-marker-width) / 2);
    z-index: 1;
}
*/

#panelsComicImagePanelsTextMainContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--panels-text-width);
    height: var(--panels-text-height);
    background-color: var(--window-transparency);
    border: var(--message-box-border-height) solid var(--message-box-border-color-blue);
    border-radius: var(--message-box-border-radius);
    margin: calc(var(--panel-marker-width) / 2);
    z-index: 4;
    overflow: hidden;
}

#panelsComicImagePanelsTextContainer {
    width: 100%;
    height: calc(var(--panels-text-height) - 115px);
    overflow-y: auto;
}

#panelsComicImagePanelsTextContainer::-webkit-scrollbar {
    width: var(--scrollbar-thumb-width);
    height: var(--scrollbar-thumb-height);
}

#panelsComicImagePanelsTextContainer::-webkit-scrollbar-thumb { 
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
}

#panelsComicImagePanelsTextContainer::-webkit-scrollbar-track {
    background: var(--window-transparency);
    border-radius: var(--scrollbar-border-radius);
}

.panelsComicImagePanelsTextContainer {
    width: calc(100% - 10px);
    margin-right: 10px;
}

.panelsComicImagePanelsTextEditText {
    width: 100%;
    height: auto;
    font-family: var(--text-small-font);
    font-size: var(--text-small-font-size);
    border: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    background-color: transparent !important;

    /*cursor: text;*/
}

.gridAreaCover {
    grid-area: cover;
}

.gridAreaTitle {
    grid-area: title;
}

.gridAreaLogo {
    grid-area: logo;
}

.gridAreaButtons {
    grid-area: buttons;
}

.gridAreaInfo {
    grid-area: info;
}

.fakeButton {
    height: var(--button-height);
}

/* Desktop */
@media (min-width: 1024px) {
    .seriesInfoMainContainer {
        display: grid;
        grid-template-columns: min-content auto minmax(min-content, 1fr);
        grid-template-areas: "cover title logo"
                             "cover info info";
        grid-gap: 1.0rem;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .comicInfoMainContainer {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-areas: "cover title"
                             "cover info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .gridAreaSeriesCover {
        justify-self: start;
    }

    .gridAreaSeriesLogo {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .gridAreaSeriesButtons {
        justify-self: center;
    }

    .gridAreaInfo {
        align-self: end;
    }

    #comicKeyInfoContainerSmallScreen {
        display: none;
    }

    #comicTitleContainerLargeScreen {
        display: block;
    }
}

/* iPhone */
@media (max-width: 767px) {
    .seriesInfoMainContainer {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas: "title"
                             "logo"
                             "buttons"
                             "info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .comicInfoMainContainer {
        display: grid;
        grid-template-columns: auto;
        grid-template-areas: "title"
                             "cover"
                             "info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .gridAreaSeriesCover {
        justify-self: center;
    }

    .gridAreaSeriesLogo {
        display: none;
    }

    .gridAreaCover {
        justify-self: center;
    }

    .gridAreaSeriesButtons {
        justify-self: center;
    }

    .fakeButton {
        display: none;
    }

    #comicKeyInfoContainerLargeScreen {
        display: none;
    }

    #comicTitleContainerLargeScreen {
        display: none;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .seriesInfoMainContainer {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-areas: "cover title"
                             "cover info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .comicInfoMainContainer {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-areas: "cover title"
                             "cover info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .gridAreaSeriesCover {
        justify-self: start;
    }

    .gridAreaTitle {
        justify-self: start;
    }

    .gridAreaSeriesLogo {
        display: none;
    }

    .gridAreaCover {
        justify-self: start;
    }

    .gridAreaInfo {
        margin-top: auto;
    }

    #comicKeyInfoContainerSmallScreen {
        display: none;
    }

    #comicTitleContainerLargeScreen {
        display: block;
    }
}

.drag-and-drop-area {
    display: inline-block;
    position: relative;
    margin-left: 2.0rem;
    margin-right: 2.0rem;
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
    width: var(--drag-and-drop-normal-width);
    height: auto;
    background-color: var(--drag-and-drop-background-color);
    border: var(--drag-and-drop-border-height) solid var(--drag-and-drop-border-color);
    border-radius: var(--drag-and-drop-border-radius);
}

.drag-and-drop-area-border-on {
    box-shadow: 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-border-color),
                inset 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-border-color);
}

.drag-and-drop-area-container {
    margin-top: 1.6rem !important;
    margin-bottom: 1.6rem !important;
    margin-left: 0.0rem !important;
    margin-right: 0.0rem !important;
}

/* iPhone */
@media (max-width: 767px) {
    .drag-and-drop-area {
        width: var(--drag-and-drop-small-width);
    }
}

.drag-and-drop-area-instructions {
    width: 100%;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    font-family: var(--font-regular);
    font-size: var(--drag-and-drop-font-size-large);
    color: var(--drag-and-drop-font-color-normal);
    text-align: center;
}

.drag-and-drop-area-choose-file-container-button-color-blue {
    border: var(--drag-and-drop-border-height) solid var(--drag-and-drop-button-border-color-blue);
    border-radius: var(--drag-and-drop-border-radius);
}

.drag-and-drop-area-choose-file-container-button-color-blue:hover {
    box-shadow: 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-button-border-color-blue),
                inset 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-button-border-color-blue);
}

.drag-and-drop-area-choose-file-container-button-color-yellow {
    border: var(--drag-and-drop-border-height) solid var(--drag-and-drop-button-border-color-yellow);
    border-radius: var(--drag-and-drop-border-radius);
}

.drag-and-drop-area-choose-file-container-button-color-yellow:hover {
    box-shadow: 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-button-border-color-yellow),
                inset 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-button-border-color-yellow);
}

.drag-and-drop-area-choose-file-container-button-color-red {
    border: var(--drag-and-drop-border-height) solid var(--drag-and-drop-button-border-color-red);
    border-radius: var(--drag-and-drop-border-radius);
}

.drag-and-drop-area-choose-file-container-button-color-red:hover {
    box-shadow: 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-button-border-color-red),
                inset 0px 0px var(--drag-and-drop-border-blur) var(--drag-and-drop-border-blur) var(--drag-and-drop-button-border-color-red);
}

.drag-and-drop-area-choose-file-container {
    width: 100%;
    margin-top: 1.8rem;
    margin-bottom: 1.8rem;
    text-align: center;
}

.drag-and-drop-area-choose-file-container > label {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-family: var(--font-regular);
    font-size: var(--drag-and-drop-font-size-normal);
    color: var(--drag-and-drop-font-color-normal);
    background-color: transparent;
    text-align: center;
    border: var(--drag-and-drop-border-height) solid var(--drag-and-drop-button-border-color-blue);
    border-radius: var(--drag-and-drop-border-radius);
}

.drag-and-drop-area-choose-file-container > label:hover {
    cursor: pointer;
}

.drag-and-drop-area-preview-cover {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
    width: auto;
    height: var(--comic-cover-preview-height);
    border-radius: var(--comic-cover-radius);
}

.drag-and-drop-area-preview-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 1.3rem;
    margin-right: 1.6rem;
}

.drag-and-drop-area-preview {
    position: relative;
    display: inline-block;
    width: auto;
    margin-top: 1.5rem;
    height: auto;
}

.drag-and-drop-area-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 1.5rem;
    height: auto;
}

.drag-and-drop-area-loader {
    width: 100%;
    height: auto;
    margin-top: 2.0rem;
    text-align: center;
}

.drag-and-drop-area-info {
    margin-left: 1.2rem;
    margin-bottom: 0.8rem;
    width: auto;
    height: auto;
    font-family: var(--font-regular);
    font-size: var(--drag-and-drop-font-size-small);
    color: var(--drag-and-drop-font-color-normal);
    word-break: break-all;
}

#menuContainer {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    position: absolute;
    top: 0px;
    width: 100%;
    height: var(--menu-height);
    background-color: var(--window-transparency);
    border-radius: var(--window-border-radius);
    margin-top: var(--menu-margin-top);
    margin-bottom: var(--menu-margin-bottom);
    padding-left: var(--window-padding-left);
    padding-right: var(--window-padding-right);
}

#menuContainer .item:last-child {
    justify-self: end;
}

.menuTitleContainer {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--menu-height);
    background-color: transparent;
    border-radius: var(--window-border-radius);
    margin-top: var(--menu-margin-top);
    margin-bottom: var(--menu-margin-bottom);
    padding-left: var(--window-padding-left);
    padding-right: var(--window-padding-right);
    line-height: var(--menu-height);
    text-align: center;
    vertical-align: middle;
}

#messageMainContainer, #menuItemsMainContainer, .modalMainContainer {
    display: inline-block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--window-transparency-dark);
    z-index: 200;
}

#searchMainContainer {
    z-index: 500;
}

#readGlobalMainContainer, #conditionGlobalMainContainer, #comicExtraInfoGlobalMainContainer, #tagsGlobalMainContainer {
    z-index: 600;
}

#messageMainContainer {
    z-index: 1000;
}

/* Desktop */
@media (min-width: 1024px) {
    .modalContentContainer {
        width: var(--screen-width);
        height: calc(100% - var(--menu-margin-top) - var(--menu-margin-bottom));
        background-color: transparent;
        border-radius: var(--window-border-radius);
        margin-top: var(--menu-margin-top);
        margin-bottom: var(--menu-margin-bottom);
        margin-left: auto;
        margin-right: auto;
        padding-right: var(--menu-margin-right);
        overflow-y: auto;
    }
}

/* iPhone */
@media (max-width: 767px) {
    .modalContentContainer {
        /*width: var(--screen-width);*/
        width: calc(100% - var(--menu-margin-left));
        height: calc(100% - var(--menu-margin-top) - var(--menu-margin-bottom));
        background-color: transparent;
        border-radius: var(--window-border-radius);
        margin-top: var(--menu-margin-top);
        margin-bottom: var(--menu-margin-bottom);
        margin-left: var(--menu-margin-left);
        padding-right: var(--menu-margin-right);
        overflow-y: auto;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .modalContentContainer {
        width: calc(100% - var(--menu-margin-left));
        height: calc(100% - var(--menu-margin-top) - var(--menu-margin-bottom));
        background-color: transparent;
        border-radius: var(--window-border-radius);
        margin-top: var(--menu-margin-top);
        margin-bottom: var(--menu-margin-bottom);
        margin-left: var(--menu-margin-left);
        padding-right: var(--menu-margin-right);
        overflow-y: auto;
    }
}

.modalContentContainer::-webkit-scrollbar {
    width: var(--scrollbar-thumb-width);
    height: var(--scrollbar-thumb-height);
}

.modalContentContainer::-webkit-scrollbar-thumb { 
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
}

.modalContentContainer::-webkit-scrollbar-track {
    background: var(--window-transparency);
    border-radius: var(--scrollbar-border-radius);
}

.modalButtonsContainer {
    display: grid;
    align-items: center;
    width: calc(var(--screen-width) - var(--menu-margin-left) - var(--menu-margin-right));
    height: var(--menu-height);
    margin-left: var(--menu-margin-left);
    margin-right: var(--menu-margin-right);
}

#menuItemsContainer {
    width: 100%;
    height: auto;
}

#menuItemsContainer ul {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
}

#menuItemsContainer ul li {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--menu-item-margin-top);
    margin-bottom: var(--menu-item-margin-bottom);
    list-style: none;
}

#menuItemsContainer ul li a {
    display: block;
    width: auto;
    height: auto;
    font-family: var(--font-normal);
    font-size: var(--font-size-normal);
    color: var(--font-color-white);
    text-decoration: none;
    padding-top: var(--menu-item-padding-top);
    padding-bottom: var(--menu-item-padding-bottom);
    padding-left: var(--menu-item-padding-left);
    padding-right: var(--menu-item-padding-right);
    border-top: solid var(--menu-item-border-height) transparent;
    border-bottom: solid var(--menu-item-border-height) transparent;
    text-align: none;
}

#menuItemsContainer ul li a:hover {
    cursor: pointer;
    width: 100%;
    background-color: var(--window-transparency);
    border-top: solid var(--menu-item-border-height) var(--menu-item-border-color-blue);
    border-bottom: solid var(--menu-item-border-height) var(--menu-item-border-color-blue);
}

/* Desktop */
@media (min-width: 1024px) {
    #bottomMenuContainer {
        display: none;
    }

    #bottomMenuItemsMainContainer {
        display: none;
    }
}

/* iPhone */
@media (max-width: 767px) {
    #bottomMenuContainer {
        position: fixed;
        /*
        position: sticky;
        position: -webkit-sticky;
        */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        left: calc(calc(100% - var(--screen-width)) / 2);
        bottom: var(--bottom-menu-bottom-space);
        width: var(--screen-width);
        height: var(--bottom-menu-height);
        padding-left: var(--bottom-menu-padding-left);
        padding-right: var(--bottom-menu-padding-right);
        border-radius: var(--window-border-radius);
        background-color: var(--window-transparency-very-dark);
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    #bottomMenuContainer {
        display: none;
    }

    #bottomMenuItemsMainContainer {
        display: none;
    }
}

#bottomMenuItemsMainContainer {
    position: fixed;
    /*
    position: sticky;
    position: -webkit-sticky;
    */
    left: calc(calc(100% - var(--screen-width)) / 2);
    bottom: calc(var(--bottom-menu-height) + var(--bottom-menu-margin-bottom));
    width: var(--screen-width);
    height: auto;
    padding-left: var(--bottom-menu-padding-left);
    padding-right: var(--bottom-menu-padding-right);
    border-radius: var(--window-border-radius);
    background-color: var(--window-transparency-very-dark);
}

.optionsMenuContainer {
    width: 100%;
    height: auto;
}

.optionsMenuContainer ul {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
}

.optionsMenuContainer ul li {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--menu-item-margin-top);
    margin-bottom: var(--menu-item-margin-bottom);
    list-style: none;
}

.optionsMenuContainer ul li a {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    font-family: var(--font-normal);
    font-size: var(--font-size-normal);
    color: var(--font-color-white);
    text-decoration: none;
    padding-top: var(--menu-item-padding-top);
    padding-bottom: var(--menu-item-padding-bottom);
    padding-left: var(--menu-item-padding-left);
    padding-right: var(--menu-item-padding-right);
    border-top: solid var(--menu-item-border-height) transparent;
    border-bottom: solid var(--menu-item-border-height) transparent;
    text-align: none;
}

.optionsMenuContainer ul li a:hover {
    cursor: pointer;
    width: 100%;
    background-color: var(--window-transparency);
    border-top: solid var(--menu-item-border-height) var(--menu-item-border-color-blue);
    border-bottom: solid var(--menu-item-border-height) var(--menu-item-border-color-blue);
}

.drag-and-drop-area-info-error-color {
    color: var(--drag-and-drop-font-color-error) !important;
}

.clickToEnlarge:hover {
    cursor: pointer;
}

#enlargeImageContainer {
    display: inline-block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--window-transparency);
    z-index: 200;
}

.enlargeImage {
    width: auto;
    height: 80%;
    max-width: 80%;
    max-height: 80%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: auto;
    position: absolute;
    object-fit: contain;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    cursor: pointer; /* fix for iOS so click event are registered, touch screen is close screen then works */
    border-radius: var(--comic-cover-radius);
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

#enlargeImageCloseButton {
    position: relative;
    top: 2%;
    left: 80%;
}

.screenContainer {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    -webkit-backdrop-filter: blur(var(--background-image-blur));
    backdrop-filter: blur(var(--background-image-blur));
}

/* Desktop */
@media (min-width: 1024px) {

}

/* iPhone */
@media (max-width: 767px) {
    .screenContainer {
        padding-bottom: calc(var(--bottom-menu-padding-top) + var(--bottom-menu-padding-bottom) + var(--bottom-menu-padding-bottom));
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {

}

.mainContainer {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
}

.infoContainer {
    position: relative;
    width: 100%;
    max-width: var(--screen-width);
    height: 100%;
    margin: auto;
}

/* Desktop */
@media (min-width: 1024px) {
    .contentMainContainer {
        padding-top: calc(var(--menu-height) + var(--menu-margin-top) + var(--menu-margin-bottom));
        margin-bottom: var(--content-container-margin-bottom);
    }
}

/* iPhone */
@media (max-width: 767px) {
    .contentMainContainer {
        padding-top: calc(var(--menu-height) + var(--menu-margin-top) + var(--menu-margin-bottom));
        margin-bottom: calc(var(--bottom-menu-height) - var(--bottom-menu-margin-bottom));
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .contentMainContainer {
        padding-top: calc(var(--menu-height) + var(--menu-margin-top) + var(--menu-margin-bottom));
        margin-bottom: var(--content-container-margin-bottom);
    }
}

.shakeIt {
    -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); }
}

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

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

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

@keyframes fadeInOut {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

/* Desktop */
@media (min-width: 1024px) {
    .jcMessageContent {
        position: absolute;
        display: table;
        top: 50%;
        left: 50%;
        width: auto;
        max-width: var(--message-box-maximum-width);
        height: auto;
        transform: translate(-50%, -50%);
        background-color: var(--color-black);
        border: var(--message-box-border-height) solid var(--message-box-border-color-blue);
        border-radius: var(--message-box-border-radius);
        box-shadow: 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue),
                    inset 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue);
    }
}

/* iPhone */
@media (max-width: 767px) {
    .jcMessageContent {
        position: absolute;
        display: table;
        top: 50%;
        left: 50%;
        width: auto;
        max-width: 80%;
        height: auto;
        transform: translate(-50%, -50%);
        background-color: var(--color-black);
        border: var(--message-box-border-height) solid var(--message-box-border-color-blue);
        border-radius: var(--message-box-border-radius);
        box-shadow: 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue),
                    inset 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue);
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .jcMessageContent {
        position: absolute;
        display: table;
        top: 50%;
        left: 50%;
        width: auto;
        max-width: var(--message-box-maximum-width);
        height: auto;
        transform: translate(-50%, -50%);
        background-color: var(--color-black);
        border: var(--message-box-border-height) solid var(--message-box-border-color-blue);
        border-radius: var(--message-box-border-radius);
        box-shadow: 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue),
                    inset 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue);
    }
}

.jcMessageContent jcMessageText {
    display: inline-block;
    margin-top: 1.6rem;
    padding-left: 3.0rem;
    padding-right: 3.0rem;
    font-family: var(--font-regular);
    font-size: var(--message-box-font-size);
    text-align: center;
    background-color: transparent;
    color: var(--message-box-font-color);
    width: 100%;
}

#jcMessageLoaderContainer {
    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: 0.7rem;
    margin-bottom: 1.8rem;
    background-color: transparent;
}

#jcContentContainer {
    padding-top: var(--message-box-padding-top);
    padding-bottom: var(--message-box-padding-bottom);
    padding-left: var(--message-box-padding-left);
    padding-right: var(--message-box-padding-right);
}

#jcContentContainer #searchResultsComicDescriptionContainer {
    display: none !important;
}

#jcMessageButtonContainer {
    display: block;
    margin-top: 1.0rem;
    margin-bottom: 3.0rem;
    padding-left: 3.0rem;
    padding-right: 3.0rem;
    text-align: center;
}

#jcQuestionMessageButtonContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 2.0rem;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-top: 1.0rem;
    margin-bottom: 3.0rem;
    padding-left: 3.0rem;
    padding-right: 3.0rem;
}

.jcMessageBoxBlue {
    border: var(--message-box-border-height) solid var(--message-box-border-color-blue) !important;
    box-shadow: 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue),
                inset 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-blue) !important;
}

.jcMessageBoxGreen {
    border: var(--message-box-border-height) solid var(--message-box-border-color-green) !important;
    box-shadow: 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-green),
                inset 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-green) !important;
}

.jcMessageBoxRed {
    border: var(--message-box-border-height) solid var(--message-box-border-color-red) !important;
    box-shadow: 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-red),
                inset 0px 0px var(--message-box-border-blur) var(--message-box-border-blur) var(--message-box-border-color-red) !important;
}

.headerTitle {
    font-family: var(--header-font);
    font-size: var(--header-font-size);
    color: var(--font-color-white);
}

.textTitle {
    font-family: var(--text-title-font);
    font-size: var(--text-title-font-size);
    color: var(--text-title-font-color-white);
}

.textVerySmall {
    font-family: var(--text-very-small-font);
    font-size: var(--text-very-small-font-size);
    color: var(--text-very-small-font-color-white);
}

.textVerySmallHeader {
    font-family: var(--text-very-small-font);
    font-size: var(--text-very-small-font-size);
    color: var(--text-very-small-font-color-dark-gray);
}

.textVerySmallValue {
    font-family: var(--text-very-small-font);
    font-size: var(--text-very-small-font-size);
    color: var(--text-very-small-font-color-white);
}

.textVerySmallLight {
    font-family: var(--text-very-small-font-light);
    font-size: var(--text-very-small-font-size);
    color: var(--text-very-small-font-color-white);
}

.textSmall {
    font-family: var(--text-small-font);
    font-size: var(--text-small-font-size);
    color: var(--text-small-font-color-white);
}

.textSmallHeader {
    font-family: var(--text-small-font);
    font-size: var(--text-small-font-size);
    color: var(--text-small-font-color-dark-gray);
}

.textSmallValue {
    font-family: var(--text-small-font);
    font-size: var(--text-small-font-size);
    color: var(--text-small-font-color-white);
}

.textSmallLight {
    font-family: var(--text-small-font-light);
    font-size: var(--text-small-font-size);
    color: var(--text-small-font-color-white);
}

.textSmallLightBold {
    font-family: var(--text-small-font-bold);
    font-size: var(--text-small-font-size);
    color: var(--text-small-font-color-white);
}

.textNormal {
    font-family: var(--text-normal-font);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-white);
}

.textNormalLight {
    font-family: var(--text-normal-font-light);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-white);
}

.textNormalBold {
    font-family: var(--text-normal-font-bold);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-white);
}

.textNormalHeader {
    font-family: var(--text-normal-font);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-dark-gray);  
}

.textNormalValue {
    font-family: var(--text-normal-font);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-white);  
}

.textNormalBoldHeader {
    font-family: var(--text-normal-font-bold);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-dark-gray);  
}

.textNormalBoldValue {
    font-family: var(--text-normal-font-bold);
    font-size: var(--text-normal-font-size);
    color: var(--text-normal-font-color-white);  
}

.textLarge {
    font-family: var(--text-large-font);
    font-size: var(--text-large-font-size);
    color: var(--text-large-font-color-white);
}

.textLargeBold {
    font-family: var(--text-large-font-bold);
    font-size: var(--text-large-font-size);
    color: var(--text-large-font-color-white);
}

.textLargeBoldHeader {
    font-family: var(--text-large-font-bold);
    font-size: var(--text-large-font-size);
    color: var(--text-large-font-color-dark-gray);
}

textLargeBoldValue, .textLargeBoldValue {
    font-family: var(--text-large-font-bold);
    font-size: var(--text-large-font-size);
    color: var(--text-large-font-color-white);
    word-wrap: break-word;
}

.textVeryLarge {
    font-family: var(--text-very-large-font);
    font-size: var(--text-very-large-font-size);
    color: var(--text-very-large-font-color-white);
}

.textVeryLargeBold {
    font-family: var(--text-very-large-font-bold);
    font-size: var(--text-very-large-font-size);
    color: var(--text-very-large-font-color-white);
}

.textVeryVeryLarge {
    font-family: var(--text-very-very-large-font);
    font-size: var(--text-very-very-large-font-size);
    color: var(--text-very-very-large-font-color-white);
}

.textVeryVeryLargeBold {
    font-family: var(--text-very-very-large-font-bold);
    font-size: var(--text-very-very-large-font-size);
    color: var(--text-very-very-large-font-color-white);
}

.comicTitleSmall {
    font-family: var(--comic-title-small-font);
    font-size: var(--comic-title-small-font-size);
    line-height: 1.6rem;
    min-height: calc(1.6rem * 4);
    text-align: center;
    color: var(--comic-title-small-font-color-white);
}

.characterNameSmall, .folderIconSeriesSmall {
    font-family: var(--comic-title-small-font);
    font-size: var(--comic-title-small-font-size);
    line-height: 1.6rem;
    min-height: calc(1.6rem * 2);
    text-align: center;
    color: var(--comic-title-small-font-color-white);
}

.comicPublisherVerySmall, .comicReleaseDateVerySmall, .characterNameVerySmall, .folderIconSeriesVerySmall {
    font-family: var(--comic-release-date-very-small-font);
    font-size: var(--comic-release-date-very-small-font-size);
    line-height: 1.2rem;
    min-height: calc(1.2rem * 2);
    color: var(--comic-release-date-very-small-font-color-dark-gray);
    text-align: center;
}

.windowTitleBarContainer {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    width: 100%;
    height: var(--window-title-bar-height);
    padding-top: var(--window-padding-top);
    padding-bottom: var(--window-padding-bottom);
    padding-left: var(--window-padding-left);
    padding-right: var(--window-padding-right);
    background-color: transparent;
}

.windowTitleBarContainer .item:last-child {
    justify-self: end;
}

.contentContainer {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - var(--menu-height) - var(--menu-margin-top) - var(--menu-margin-bottom) - var(--window-padding-top) - var(--window-padding-bottom));
    border-radius: var(--window-border-radius);
    background-color: var(--window-transparency);
    padding-top: var(--window-padding-top);
    padding-bottom: var(--window-padding-bottom);
}

.windowContainer {
    margin-top: var(--window-margin-top);
    margin-bottom: var(--window-margin-bottom);
    margin-left: var(--window-margin-left);
    margin-right: var(--window-margin-right);
}

.windowInputContainer {
    padding-top: var(--window-padding-top);
    padding-bottom: var(--window-margin-bottom);
    padding-left: var(--window-padding-left);
    padding-right: var(--window-padding-right);
}

.windowMenuButtonsContainer {
    display: flex;
    gap: 1.0rem;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - var(--window-margin-left) - var(--window-margin-right));
    height: auto;
    margin-top: var(--window-margin-top);
    margin-bottom: var(--window-margin-bottom);
    margin-left: var(--window-margin-left);
    margin-right: var(--window-margin-right);
}

/* Desktop */
@media (min-width: 1024px) {

}

/* iPhone */
@media (max-width: 767px) {
    .windowMenuButtonsContainerSmallScreen {
        justify-content: space-between;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {

}

.connectingCoverContainer {
    display: flex;
    width: 100%;
    height: calc(var(--comic-cover-connecting-height) + 2*var(--scrollbar-thumb-height));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    column-gap: 0px;
    overflow-x: scroll;
}

.connectingCoverContainer::-webkit-scrollbar {
    width: var(--scrollbar-thumb-width);
    height: var(--scrollbar-thumb-height);
}

.connectingCoverContainer::-webkit-scrollbar-thumb { 
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
}

.connectingCoverContainer::-webkit-scrollbar-track {
    background: var(--window-transparency);
    border-radius: var(--scrollbar-border-radius);
}

#loginContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 2.0rem;
}

#dashboardGridMainContainer {
    position: relative;
    width: calc(100% - var(--grid-margin-left));
    height: auto;
    margin-left: var(--grid-margin-left);
    /*margin-right: var(--grid-margin-right);*/
    overflow: hidden;
}

.dashboardGridMainContainerOn {
    min-height: var(--grid-total-size-height);
}

.dashboardGridMainContainerOff {
    min-height: calc(var(--grid-total-size-height) - var(--draggable-items-container-height));
}

#dashboardGrid {
    position: absolute;
    left: 0;
    width: 100%;
    /*
    height: calc(var(--grid-total-size-height) - calc(var(--draggable-items-container-height) + var(--draggable-items-container-margin-bottom)));
    min-height: calc(var(--grid-total-size-height) - calc(var(--draggable-items-container-height) + var(--draggable-items-container-margin-bottom)));
    */
    background-image: radial-gradient(circle at 1px 1px, var(--grid-color) 1px, transparent 0);
    background-size: var(--grid-size-width) var(--grid-size-height);
}

.dashboardGridOn {
    /*top: calc(var(--draggable-items-container-height) + var(--draggable-items-container-margin-bottom));*/

    height: calc(var(--grid-total-size-height) - calc(var(--draggable-items-container-height) + var(--draggable-items-container-margin-bottom)));
    min-height: calc(var(--grid-total-size-height) - calc(var(--draggable-items-container-height) + var(--draggable-items-container-margin-bottom)));
    top: calc(var(--draggable-items-container-height) + var(--draggable-items-container-margin-bottom));
}

.dashboardGridOff {
    top: var(--draggable-items-container-margin-bottom);

    height: calc(var(--grid-total-size-height) - calc(var(--draggable-items-container-height)));
    min-height: calc(var(--grid-total-size-height) - calc(var(--draggable-items-container-height)));
}

#dashboardDraggableItemsContainer {
    position: absolute;
    top: 0;
    width: calc(100% - var(--grid-margin-left));
    height: var(--draggable-items-container-height);
    background-color: var(--window-transparency);
}

.dashboardGridHelperOk {
    background-color: var(--grid-help-background-color-green) !important;
}

.dashboardGridHelperNotOk {
    background-color: var(--grid-help-background-color-red) !important;
}

/* Desktop */
@media (min-width: 1024px) {
    .comicsContainer-view1 {
        display: grid;
        grid-gap: 2.0rem;
        grid-template-columns: repeat(auto-fit, calc(var(--comic-cover-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right)));
        justify-content: space-evenly;
        width: calc(100% - var(--window-margin-left) - var(--window-margin-right));
        height: auto;
    }
}

/* iPhone */
@media (max-width: 767px) {
    .comicsContainer-view1 {
        display: grid;
        grid-gap: 1.0rem;
        grid-template-columns: repeat(auto-fit, calc(var(--comic-cover-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right)));
        justify-content: space-evenly;
        width: calc(100% - var(--window-margin-left) - var(--window-margin-right));
        height: auto;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .comicsContainer-view1 {
        display: grid;
        grid-gap: 2.0rem;
        grid-template-columns: repeat(auto-fit, calc(var(--comic-cover-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right)));
        justify-content: space-evenly;
        width: calc(100% - var(--window-margin-left) - var(--window-margin-right));
        height: auto;
    }
}

.comicsGridCoverImageContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    width: calc(var(--comic-cover-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right));
    max-width: calc(var(--comic-cover-normal-width) + var(--comic-cover-margin-left) + var(--comic-cover-margin-right));
    height: 100%;
    border: var(--comics-grid-border-height) solid transparent;
    border-radius: var(--comics-grid-border-radius);
    padding-top: var(--comics-grid-border-padding-top);
    padding-bottom: var(--comics-grid-border-padding-bottom);
    padding-left: var(--comics-grid-border-padding-left);
    padding-right: var(--comics-grid-border-padding-right);
}

.comicsGridCoverImageContainer:hover {
    cursor: pointer;
    border: var(--comics-grid-border-height) solid var(--comics-grid-border-color-blue);
    border-radius: var(--comics-grid-border-radius);
    padding-top: var(--comics-grid-border-padding-top);
    padding-bottom: var(--comics-grid-border-padding-bottom);
    box-shadow: 0px 0px var(--comics-grid-border-blur) var(--comics-grid-border-blur) var(--comics-grid-border-color-blue),
                inset 0px 0px var(--comics-grid-border-blur) var(--comics-grid-border-blur) var(--comics-grid-border-color-blue);
}

.comicsGridCoverImageContainerSelected {
    cursor: pointer;
    border: var(--comics-grid-border-height) solid var(--comics-grid-border-color-blue);
    border-radius: var(--comics-grid-border-radius);
    padding-top: var(--comics-grid-border-padding-top);
    padding-bottom: var(--comics-grid-border-padding-bottom);
    box-shadow: 0px 0px var(--comics-grid-border-blur) var(--comics-grid-border-blur) var(--comics-grid-border-color-blue),
                inset 0px 0px var(--comics-grid-border-blur) var(--comics-grid-border-blur) var(--comics-grid-border-color-blue);
}

.comicsGridCoverImageInfoContainer {
    /*
    margin-left: var(--comics-grid-border-margin-left);
    margin-right: var(--comics-grid-border-margin-right);
    */
}

.comicsContainer-view2, .comicsContainer-view3 {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
}

.comicsContainer-view4 {
    display: flex;
    overflow-x: auto;
    width: 100%;
    height: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    column-gap: 2.0rem;
}

.comicsContainer-view4::-webkit-scrollbar {
    width: var(--scrollbar-thumb-width);
    height: var(--scrollbar-thumb-height);
}

.comicsContainer-view4::-webkit-scrollbar-thumb { 
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
}

.comicsContainer-view4::-webkit-scrollbar-track {
    background: var(--window-transparency);
    border-radius: var(--scrollbar-border-radius);
}

.comicsContainer-view4-container:hover {
    cursor: pointer;
}

.comicsList1ComicsContainer {
    display: flex;
    flex-direction: row;
    gap: 1.0rem;
    width: 100%;
    height: auto;
    border: solid var(--comics-list1-border-height) var(--comics-list1-border-color-blue);
    border-radius: var(--comics-list1-border-radius);
    margin-top: var(--comics-list1-border-margin-top);
    padding-top: var(--comics-list1-border-padding-top);
    padding-bottom: var(--comics-list1-border-padding-bottom);
    padding-left: var(--comics-list1-border-padding-left);
    padding-right: var(--comics-list1-border-padding-right);    
}

.comicsList1ComicsContainer:hover {
    cursor: pointer;
    box-shadow: 0px 0px var(--comics-list1-border-blur) var(--comics-list1-border-blur) var(--comics-list1-border-color-blue),
                inset 0px 0px var(--comics-list1-border-blur) var(--comics-list1-border-blur) var(--comics-list1-border-color-blue);
    background-color: var(--window-transparency);
}

/* Desktop */
@media (min-width: 1024px) {
    .comicInfoContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: auto;
    }
}

/* iPhone */
@media (max-width: 767px) {
    .comicInfoContainer {
        display: grid;
        grid-template-columns: auto;
        width: 100%;
        height: auto;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .comicInfoContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: auto;
    }
}

#searchInputContainer {
    display: inline-block;
    width: auto;
    flex: 1;
}

/* Desktop */
@media (min-width: 1024px) {
    #searchResultsButtonsMainContainer {
        display: none !important;
    }

    #searchResultsContainer {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        height: auto;
    }

    #searchResultsSeriesMainContainer {
        display: inline-block !important;
        height: auto;
        flex-basis: 35%;
        flex-grow: 1;
    }

    #searchResultsComicsMainContainer {
        display: inline-block !important;
        height: auto;
        flex-basis: 65%;
        flex-grow: 1;
    }
}

/* iPhone */
@media (max-width: 767px) {
    #searchInputButtonsContainerLargeScreen {
        display: none;
    }

    #searchInputButtonsContainerSmallScreen {
        display: block !important;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    #searchResultsButtonsMainContainer {
        display: none !important;
    }

    #searchResultsContainer {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        height: auto;
    }

    #searchResultsSeriesMainContainer {
        display: inline-block !important;
        height: auto;
        flex-basis: 35%;
        flex-grow: 1;
    }

    #searchResultsComicsMainContainer {
        display: inline-block !important;
        height: auto;
        flex-basis: 65%;
        flex-grow: 1;
    }
}

.noResultsContainer, .resultsSeriesContainer, .resultsGeneralContainer {
    display: flex;
    flex-direction: column;
    gap: 1.0rem;
    width: 100%;
    height: auto;
    border: solid var(--search-result-item-border-height) var(--search-result-item-border-color-blue);
    border-radius: var(--search-result-item-border-radius);
    background-color: transparent;
    padding-left: var(--search-result-item-padding-left);
    padding-right: var(--search-result-item-padding-right);    
    padding-top: var(--search-result-item-padding-top);
    padding-bottom: var(--search-result-item-padding-bottom);
}

.resultsGeneralContainerSelected {
    box-shadow: 0px 0px var(--search-result-item-border-blur) var(--search-result-item-border-blur) var(--search-result-item-border-color-blue),
                inset 0px 0px var(--search-result-item-border-blur) var(--search-result-item-border-blur) var(--search-result-item-border-color-blue);
}

.resultsTextContainer {
    display: flex;
    flex-direction: column;
    gap: 1.0rem;
    width: 100%;
    height: auto;
    border: solid var(--search-result-item-border-height) var(--search-result-item-border-color-blue);
    border-radius: var(--search-result-item-border-radius);
    background-color: transparent;
    padding-left: var(--text-result-item-padding-left);
    padding-right: var(--text-result-item-padding-right);    
    padding-top: var(--text-result-item-padding-top);
    padding-bottom: var(--text-result-item-padding-bottom);
}

.resultsComicsContainer {
    display: flex;
    flex-direction: row;
    gap: 1.0rem;
    width: 100%;
    height: auto;
    border: solid var(--search-result-item-border-height) var(--search-result-item-border-color-blue);
    border-radius: var(--search-result-item-border-radius);
    background-color: transparent;
    margin-top: var(--search-result-item-margin-top);
    margin-bottom: var(--search-result-item-margin-bottom);
    padding-left: var(--search-result-item-padding-left);
    padding-right: var(--search-result-item-padding-right);    
    padding-top: var(--search-result-item-padding-top);
    padding-bottom: var(--search-result-item-padding-bottom);
}

.noResultsContainer:hover {
    cursor: default;
}

.resultsSeriesContainer:hover, .resultsComicsContainer:hover, .resultsGeneralContainer:hover, .resultsTextContainer:hover {
    cursor: pointer;
    box-shadow: 0px 0px var(--search-result-item-border-blur) var(--search-result-item-border-blur) var(--search-result-item-border-color-blue),
                inset 0px 0px var(--search-result-item-border-blur) var(--search-result-item-border-blur) var(--search-result-item-border-color-blue);
    background-color: var(--window-transparency);
}


/* Desktop */
@media (min-width: 1024px) {

}

/* iPhone */
@media (max-width: 767px) {
    #listsEditListItemsButtonContainer {
        justify-content: space-evenly;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {

}

.dateHeader {
    background-color: var(--window-transparency-very-dark);
}

.selectDateContainer {
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 2.0rem;
    height: auto;
}

.selectDateItemContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.auctionBidContainer {
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
}

/* Desktop */
@media (min-width: 1024px) {
    .artworkSeriesMainContainer {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-areas: "artwork info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .gridArtworkSeries {
        grid-area: artwork;
    }
}

/* iPhone */
@media (max-width: 767px) {
    .artworkSeriesMainContainer {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas: "title" 
                             "artwork"
                             "info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .gridArtworkSeries {
        grid-area: artwork;
        margin: auto;
    }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .artworkSeriesMainContainer {
        display: grid;
        grid-template-columns: min-content auto;
        grid-template-areas: "artwork info";
        grid-gap: 1.0rem;
        width: 100%;
        height: auto;
        margin-bottom: var(--window-margin-bottom);
    }

    .gridArtworkSeries {
        grid-area: artwork;
    }
}

.gridArtworkSeriesTitle {
    grid-area: title;
}

.gridArtworkSeriesInfo {
    grid-area: info;
}