@import url(https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Open+Sans&display=swap);
/*
    ! Main CSS Theme

    Includes all the objects that can be used on different pages (for consistency)
    Examples:
    - chapter/episodes thumbnails
    - 

    Every class which is used in only one page must NOT be in here
*/

/*  */

/* ! BEG: Bootstrap Colors===================================================================*/

/* ! URL: https://bootswatch.com/slate/ */

/* Bootstrap Colors */
/* :root
{
    --blue: #2C3E50;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #E74C3C;
    --orange: #fd7e14;
    --yellow: #F39C12;
    --green: #18BC9C;
    --teal: #20c997;
    --cyan: #3498DB;
    --white: #fff;
    --gray: #95a5a6;
    --gray-dark: #343a40;
    
    --primary: #2C3E50;
    --secondary: #95a5a6;
    --success: #18BC9C;
    --info: #3498DB;
    --warning: #F39C12;
    --danger: #E74C3C;
    --light: #ecf0f1;
    --dark: #7b8a8b;
} */


/* ! END: Bootstrap Colors===================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Default HTML Tags==================================================================*/

/* ? En ordre alphabétique! */


/* ! BEG: Navbars ===========================================================================*/
/* ! END: Navbars ===========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Buttons ===========================================================================*/
/* ! END: Buttons ===========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Typography ========================================================================*/


/* h1 {font-size: 2.34375rem}
h2 {font-size: 1.875rem}
h3 {font-size: 1.640625rem}
h4 {font-size: 1.40625rem}
h5 {font-size: 1.171875rem}
h6 {font-size: 0.9375rem} */

h1 {font-size: 4.0rem}
h2 {font-size: 3.5rem}
h3 {font-size: 3.0rem}
h4 {font-size: 2.4rem}
h5 {font-size: 1.8rem}
h6 {font-size: 1.2rem}

big {
    font-size: 120%;
}

small {
    font-size: 80%;
}

i {
    /* color:#ff4956; */
    font-style: italic;
    font-size: 1.3em;
    font-weight: 100;
}

p:empty,
p:last-child {margin-bottom: 0}
p {
    margin-top: 0;
    margin-bottom: 1rem;
}


strong,
b {
    font-weight: bold;
    /* color: var(--sc-primary-background); */
}

.dg-text { color: var(--sc-grey-900); }
.dg-textSecondary { color: var(--sc-grey-700); }
.dg-textLabel { color: var(--sc-grey-600); }
.dg-textDisabled { color: var(--sc-grey-500); }


/* ! END: Typography ========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Tables ============================================================================*/


table {
    width: 100%;
    text-align: left;
}


/* Header */

table th {
    font-weight: bold;
    background: var(--sc-primary-background);
    color: var(--sc-primary-foreground);
    font-size: 1.2rem;
    padding: 0.5rem;
    margin: 0.5rem;
}
table th, table td {
    padding: 0.75rem;
    vertical-align: top;
    /* border-top: 1px solid rgba(0, 0, 0, 0.6); */
}

/* Rows */
tr:hover { background-color: rgba(0, 0, 0, 0.075); }
tr { width: 100%; }

tr:nth-child(odd) {
    background-color: var(--sc-background);
    color: var(--sc-foreground);
}
tr:nth-child(even) {
    background-color: var(--sc-surface-background);
    color: var(--sc-surface-foreground);
}
tr:last-child td {
    /* background: var(--sc-background); */
}

table.table-on-background tr:nth-child(odd) {
    background-color: var(--sc-background);
    color: var(--sc-foreground);
}

table.table-on-background tr:nth-child(even) {
    background-color: var(--sc-primary-light-background);
    color: var(--sc-primary-light-foreground);
}



/* Cells */
td {
    /* font-size: 1rem;
    text-align: left; */

    padding: 0.5rem;
    margin: 0.5rem;
}

/* Alignment */
/* th:last-child,
td:last-child {text-align: right}

th:first-child,
td:first-child {text-align: left} */


/* Primary */
.table-primary:hover > th,
.table-primary:hover > td {
    background-color: var(--sc-primary-background-hover);
    color: var(--sc-primary-foreground-hover);
}
.table-primary, .table-primary > th, .table-primary > td {
    background-color: var(--sc-primary-background);
    color: var(--sc-primary-foreground);
}

/* secondary */
.table-secondary:hover > th,
.table-secondary:hover > td {
    background-color: var(--sc-secondary-background-hover);
    color: var(--sc-secondary-foreground-hover);
}
.table-secondary, .table-secondary > th, .table-secondary > td {
    background-color: var(--sc-secondary-background);
    color: var(--sc-secondary-foreground);
}

/* Success */
.table-success:hover > th,
.table-success:hover > td {
    background-color: var(--sc-success-background-hover);
    color: var(--sc-success-foreground-hover);
}
.table-success, .table-success > th, .table-success > td {
    background-color: var(--sc-success-background);
    color: var(--sc-success-foreground);
}

/* danger */
.table-danger:hover > th,
.table-danger:hover > td {
    background-color: var(--sc-danger-background-hover);
    color: var(--sc-danger-foreground-hover);
}
.table-danger, .table-danger > th, .table-danger > td {
    background-color: var(--sc-danger-background);
    color: var(--sc-danger-foreground);
}

/* warning */
.table-warning:hover > th,
.table-warning:hover > td {
    background-color: var(--sc-warning-background-hover);
    color: var(--sc-warning-foreground-hover);
}
.table-warning, .table-warning > th, .table-warning > td {
    background-color: var(--sc-warning-background);
    color: var(--sc-warning-foreground);
}

/* info */
.table-info:hover > th,
.table-info:hover > td {
    background-color: var(--sc-info-background-hover);
    color: var(--sc-info-foreground-hover);
}
.table-info, .table-info > th, .table-info > td {
    background-color: var(--sc-info-background);
    color: var(--sc-info-foreground);
}


/* ! END: Tables ============================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Navs ==============================================================================*/
/* ! END: Navs ==============================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Indicators (Alerts) ================================================================*/


.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    /* border-radius: 0.25rem; */
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 700;
}

.alert-dismissible {
    padding-right: 2rem;
}

.alert--close:hover {
    cursor: pointer;
    transform: scale3D(1.3, 1.3, 1.3);
}
.alert-dismissible .alert--close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

.alert * {color: inherit}
.alert-surface {
    color: var(--sc-surface-foreground);
    background-color: var(--sc-surface-background);
    /* color: #1e2123;
    background-color: #d8d9da;
    border-color: #c8c9cb; */
}

.alert-primary {
    color: var(--sc-primary-light-foreground);
    background-color: var(--sc-primary-light-background);
    /* color: #1e2123;
    background-color: #d8d9da;
    border-color: #c8c9cb; */
}

/* .alert-secondary *, */
.alert-secondary {
    color: var(--sc-secondary-light-foreground);
    background-color: var(--sc-secondary-light-background);
    /* color: #3f4447;
    background-color: #e4e6e7;
    border-color: #dadcde; */
}

/* .alert-success *, */
.alert-success {
    /* color: var(--sc-success-foreground);
    background-color: var(--sc-success-background); */
    color: #336633;
    background-color: #e0f3e0;
    border-color: #d3eed3;
}

.alert-info {
    /* color: var(--sc-info-foreground);
    background-color: var(--sc-info-background); */
    color: #2f6473;
    background-color: #def2f8;
    border-color: #d1edf6;
}

.alert-warning {
    /* color: var(--sc-warning-foreground);
    background-color: var(--sc-warning-background); */
    color: #814d03;
    background-color: #feeacd;
    border-color: #fde1b9;
}

.alert-danger {
    /* color: var(--sc-danger-foreground);
    background-color: var(--sc-danger-background); */
    color: #7c312f;
    background-color: #fcdfde;
    border-color: #fad2d1;
}

.alert-light {
    /* color: var(--color-on-light);
    background-color: var(--color-light); */
    color: #797b7c;
    background-color: #fbfbfc;
    border-color: #f9fafb;
}

.alert-dark {
    /* color: var(--color-on-dark);
    background-color: var(--color-dark); */
    color: #141619;
    background-color: #d4d5d6;
    border-color: #c3c4c5;
}
  

/* ! END: Indicators (Alerts) ================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Indicators (Badges) ================================================================*/


.badge.clickable:hover {cursor: pointer}
.badge
{
    display: inline-block;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    height: 1.25rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.badge-pill {border-radius: 2rem; padding-left: 0.8rem; padding-right: 0.8rem;}

.badge.large {font-size: 1rem; height: 1.5rem;}
.badge.dismissible.large::before {height: 1rem}

.badge.dismissible {padding-right: 1.4rem}
.badge.dismissible::before {
    content: "\f00d";
    position: absolute;
    right: 0.4rem; top: 0; bottom: 0;
    margin: auto;
}

.badge-primary {
    color: var(--sc-primary-foreground);
    background-color: var(--sc-primary-background);
}

.badge-primary-light {
    color: var(--sc-primary-light-foreground);
    background-color: var(--sc-primary-light-background);
}

.badge-secondary {
    color: var(--sc-secondary-foreground);
    background-color: var(--sc-secondary-background);
}

.badge-success {
    color: var(--sc-success-foreground);
    background-color: var(--sc-success-background);
}

.badge-info {
    color: var(--sc-info-foreground);
    background-color: var(--sc-info-background);
}

.badge-warning {
    color: var(--sc-warning-foreground);
    background-color: var(--sc-warning-background);
}

.badge-danger {
    color: var(--sc-danger-foreground);
    background-color: var(--sc-danger-background);
}

/* ! END: Indicators (Badges) ================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Indicators (Tooltips) ==============================================================*/


.tooltip-container.special-case {position: inherit !important}/*needed for the tooltips, because overflow-y scroll hides overflow-x... https://www.brunildo.org/test/Overflowxy2.html*/
.tooltip-container {position: relative}

.tooltip-container:hover > .tooltip {display: flex}
.tooltip::before {
    content: ' ';
    position: absolute;
    border: 6px solid transparent;
    margin: auto;
    width: 0; height: 0;
}

/* todo: make the multiline work -> it's not currently being used anywhere */
.tooltip.multiline {
    width: auto;
    height: auto;
    /* max-height: 20vw;
    overflow-y: auto; */
    white-space: normal;
    width: -moz-fit-content;
    width: fit-content;
}
.tooltip {
    display: none;
    position: absolute;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;

    --tooltip-backgound: var(--dg-color-tooltip-background);
    background: var(--tooltip-backgound);
    color: var(--dg-color-tooltip-foreground);

    /* Size */
    width: fit-content;
    width: -moz-fit-content;

    --tooltip-unit: 1rem;

    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;

    text-align: center;
    white-space: nowrap;/*one line*/
    margin: auto;

    animation: 0.3s fadeIn;

    z-index: 99;
}

.tooltip.small {width: 8vw}
.tooltip.medium {width: 12vw}
.tooltip.large {width: 15vw}
.tooltip.larger {width: 20vw}
.tooltip.huge {width: 30vw}

.tooltip.primary   {--tooltip-backgound: var(--sc-primary-background); color: var(--sc-primary-foreground)}
.tooltip.secondary {--tooltip-backgound: var(--sc-secondary-background); color: var(--sc-secondary-foreground)}
    
/* todo: temporaire, pour s'assurer que des "tooltips de tutoriels" n'apparaissent pas partout */
.tooltip.white  { display: none !important; }
/* todo: temporaire, pour s'assurer que des "tooltips de tutoriels" n'apparaissent pas partout */

.tooltip.white  {--tooltip-backgound: var(--sc-background); color: var(--sc-foreground)}
.tooltip.green  {--tooltip-backgound: var(--sc-success-background); color: var(--sc-success-foreground)}
.tooltip.blue   {--tooltip-backgound: var(--sc-warning-background); color: var(--sc-warning-foreground)}
.tooltip.pink   {--tooltip-backgound: var(--color-secondary-dark-background); color: var(--color-secondary-dark-foreground)}
.tooltip.purple {--tooltip-backgound: var(--sc-primary-background); color: var(--sc-primary-foreground)}


/* * Positions */
/* Dead centered, superposed on the div */
.tooltip.xy-mid {top: 0; right: 0; bottom: 0; left: 0}
.tooltip.xy-mid::before {display: none}
/* Optional class if we want to grey out the entire tooltip container on hover*/

/* 
    used on the dashboard only
    todo: rename to inside-middle
    */
.tooltip-container.xy-mid-hover:hover::before {transition: 0.3s all !important;display: block}
.tooltip-container.xy-mid-hover::before {
    content: ' ';
    background: #33333333;
    position: absolute;
    display: none;
    top: 0; right: 0; bottom: 0; left: 0;

    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 0.6vw;

    animation: 0.3s fadeIn;
}

/*
    todo: tooltips inside the div
    inside-top-left
    inside-top-right
    inside-bottom-left
    inside-bottom-right

    inside-top
    inside-right
    inside-bottom
    inside-left
*/


/* Top & Bottom */
.tooltip.top, .tooltip.top::before,
.tooltip.bottom, .tooltip.bottom::before {left: -100vw; right: -100vw}

.tooltip.top {bottom: calc(100% + 1rem)}
.tooltip.top::before {top: 100%; border-top: 6px solid var(--tooltip-backgound)}

.tooltip.bottom {top: calc(100% + 1rem)}
.tooltip.bottom::before {bottom: 100%; border-bottom: 6px solid var(--tooltip-backgound)}

/* Right & Left */
.tooltip.right, .tooltip.right::before,
.tooltip.left, .tooltip.left::before {top: -100vh; bottom: -100vh}

.tooltip.right {left: calc(100% + 1rem)}
.tooltip.right::before {right: calc(100% - 1px); border-right: 6px solid var(--tooltip-backgound)}

.tooltip.left {right: calc(100% + 1rem)}
.tooltip.left::before {left: calc(100% - 1px); border-left: 6px solid var(--tooltip-backgound)}

/* Special */
.tooltip.bottom-right, .tooltip.bottom-right::before {left: calc(-10vw); right: calc(10vw)}
.tooltip.bottom-right {top: calc(100% + 1rem); left: 100%; transform: translateX(-50%)}
.tooltip.bottom-right::before {bottom: 100%; border-bottom: 6px solid var(--tooltip-backgound)}

/* note: the +1px comes from a border that is 2px, so that it is centered on the border */
.tooltip.bottom-right.border-2px {left: calc(100% + 1px)}


/* ! END: Indicators (Tooltips) ==============================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Progress ==========================================================================*/

.progress--container
{
    background-color: var(--sc-primary-light-background);
    width: 100%;
    height: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}

.progress--bar
{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--sc-primary-background);
}


/* ! END: Progress ==========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Containers ========================================================================*/
.card {
    border-radius: 1rem;
    box-shadow: var(--std-box-shadow);
    overflow: hidden;
}

.card-header {
    display: flex;
    background-color: var(--sc-primary-background);
    color: var(--sc-primary-foreground);
    height: 4rem;
    border-radius: 1rem 1rem 0 0;
    gap: 1rem;
    padding: 0 1rem;
}

.card-header > img {height: 100%; width: auto; padding: 0.2rem 0}
.card-header > div {
    font-size: 1.6rem;
    line-height: 2rem;
    padding: 1rem ;
}

.card-body * {color: var(--sc-surface-foreground)}
.card-body {
    background-color: var(--sc-surface-background);
    padding: 2rem;
}

/* ! END: Containers ========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Ðialogs ===========================================================================*/
/* ! END: Ðialogs ===========================================================================*/
/*  */
/*  */
/*  */
/* ! END: Default HTML Tags==================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: GENERAL CLASSES ===================================================================*/


/* Todo: delete this one/make it more universal, maybe with the body/section tag */
.main_content {width: 100%}

.flex-container {display: flex}
.flex-panel {flex: 1}


/* ! END: GENERAL CLASSES ===================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Chapters/Series Thumbnails ========================================================*/


/* For all the category lists (like netflix) */
.home--category-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* auto-fill vs auto-fit */
    /* https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ */
    grid-gap: 2rem;
}



.series--recent-chapter
{
    transform: scale(1.0);
    position: relative;
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    margin: 0;
    transition: 0.3s all ease;
}
.series--recent-chapter > img:not(.chapters--logo) { min-height: 10rem; }
.series--recent-chapter > img {
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--std-box-shadow);
}
.series--recent-chapter:hover {
    cursor: pointer;
    /* width: 100%;
    height: -moz-fit-content;
    height: fit-content; */
    transform: scale(1.1);
    /* margin: 0 !important; */
}


/* Section: Recent Chapters */

.chapters--description div:last-child {
    font-size: 20px;
    line-height: 20px;
    height: 36px;
    text-align: right;
    padding: 8px 16px;
    color: var(--sc-surface-foreground-translucent);
    background: var(--sc-surface-background-translucent);
    border-radius: 10px 0 10px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.chapters--description
{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 36px;
    
    display: flex;
}

.chapters--logo {
    position: absolute;
    display: block;
    top: 0.5rem; left: 0.5rem;
    
    height: 20% !important;
    width: auto !important;
    box-shadow: none !important;

    z-index: 1;
}


/* ! END: Chapters/Series Thumbnails ========================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Loading ===========================================================================*/


/* .loading {position: relative} */
.loading.aborted {
    /* background-color: linear-gradient(var(--color-error) 80%, var(--color-error) 20%) !important; */
    color: var(--dg-color-toasts-red) !important;
    background: white !important;
}

.loading.aborted::before {display: none;}
.loading.aborted::after{
    /* content: "\f00d"; */ /* uses font-awesome, so it can only work if the loading div has the "fa" class*/
    content: "\2715"; /* hex code for "x"*/
    color: inherit;
    font-size: 10rem;
    line-height: 10rem;
    height: 10rem;
    width: 10rem;
}

/* The background */
.loading::after {
    content: attr(data-progress);
    position: absolute;

    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    
    width: 100%;
    color: white;
    text-align: center;
    font-weight: bold;

    line-height: 2rem;
    font-size: 2rem;
    height: 2rem;

    z-index: 6;
    border-radius: inherit;

    
    /* padding: calc(25% - var(--progress-height) / 2) 0; */
}
/* The round line */
.loading > * { filter:  blur(5px) grayscale(100%); }

.loading {
    pointer-events: none;
    cursor: wait !important;
    /* overflow: hidden; */
    /* opacity: 0.8; */
    
}
.loading::before
{
    content: ' ';
    position: absolute;
    border: 1px solid transparent;
    border-top: 4px solid var(--sc-primary-background);
    border-radius: 50%;
    
    width: 5vw; height: 5vw;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    z-index: 1;

    animation: spin 1s linear infinite;
}

.loading.big::before { width: 10vw; height: 10vw; }
.loading.small::before { width: 2vw; height: 2vw; }


/* ! END: Loading ===========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Buttons ===========================================================================*/


.button:hover {cursor: pointer}
.button {
    display: block;
    text-decoration: none;

    text-align: center;
    
    white-space: nowrap;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;

    width: fit-content;
    width: -moz-fit-content;

    border: none;
    transition: all 0.3s;
    /* transition: 0.3s all; */
    box-shadow: var(--std-box-shadow);
    text-shadow:  1px 1px rgba(0, 0, 0, 0.3);

    border-color: rgba(0, 0, 0, 0.6);

    --btn--unit: 1rem;

    border-radius: calc(var(--btn--unit) * 2);
    padding: calc(var(--btn--unit) * 0.5) var(--btn--unit);
    font-size: var(--btn--unit);
    line-height: calc(var(--btn--unit) * 1.3);
    height: calc(var(--btn--unit) * 2.3);
}

.button.disabled {opacity: 0.8; filter: grayscale(90%);}
.button.small {--btn--unit: 0.75rem}
.button.large {--btn--unit: 1.5rem}

.button.button-outline:hover {box-shadow: inset 0 0 4px var(--sc-background)}
.button.button-outline {
    border-width: 1px;
    border-style: solid;
    /* border: 2px solid var(--sc-primary-background); */
}

/* Buttons with a "Font Awesome" image on the left of it */
.fas.image-text-button::before { margin-right: 0.5rem; }


/* ! Normal buttons */

/* Primary */
.img--button.primary,
.button.primary {background-color: var(--sc-primary-background); color: var(--sc-primary-foreground)}
.img--button.primary:hover,
.button.primary:hover {background-color: var(--sc-primary-background-hover); color: var(--sc-primary-foreground-hover)}

.img--button.primary-light,
.button.primary-light {background-color: var(--sc-primary-light-background); color: var(--sc-primary-light-foreground)}
.img--button.primary-light:hover,
.button.primary-light:hover {background-color: var(--sc-primary-light-background-hover); color: var(--sc-primary-light-foreground-hover)}

/* Secondary */
.img--button.secondary,
.button.secondary {background-color: var(--sc-secondary-background); color: var(--sc-secondary-foreground)}
.img--button.secondary:hover,
.button.secondary:hover {background-color: var(--sc-secondary-background-hover); color: var(--sc-secondary-foreground-hover)}

/* Success */
.img--button.success,
.button.success {background-color: var(--sc-success-background); color: var(--sc-success-foreground)}
.img--button.success:hover,
.button.success:hover {background-color: var(--sc-success-background-hover); color: var(--sc-success-foreground-hover)}

/* Info */
.img--button.info,
.button.info {background-color: var(--sc-info-background); color: var(--sc-info-foreground)}
.img--button.info:hover,
.button.info:hover {background-color: var(--sc-info-background-hover); color: var(--sc-info-foreground-hover)}

/* Warning */
.img--button.warning,
.button.warning {background-color: var(--sc-warning-background); color: var(--sc-warning-foreground)}
.img--button.warning:hover,
.button.warning:hover {background-color: var(--sc-warning-background-hover); color: var(--sc-warning-foreground-hover)}

/* Danger */
.img--button.danger,
.button.danger {background-color: var(--sc-danger-background); color: var(--sc-danger-foreground)}
.img--button.danger:hover,
.button.danger:hover {background-color: var(--sc-danger-background-hover); color: var(--sc-danger-foreground-hover)}

/* Link */
.img--button.link,
.button.link {background-color: var(--color-link); color: var(--color-on-link)}
.img--button.link:hover,
.button.link:hover {background-color: var(--color-link-hover); color: var(--color-on-link-hover)}


/* ! Outline buttons */

/* Primary */
.button.button-outline.primary {color: var(--sc-primary-background); background-color: var(--sc-primary-foreground)}
.button.button-outline.primary:hover {color: var(--sc-primary-background); background-color: var(--sc-primary-foreground)}

/* Secondary */
.button.button-outline.secondary {color: var(--sc-secondary-background); background-color: var(--sc-secondary-foreground)}
.button.button-outline.secondary:hover {color: var(--sc-secondary-background); background-color: var(--sc-secondary-foreground)}

/* Success */
.button.button-outline.success {color: var(--sc-success-background); background-color: var(--sc-success-foreground)}
.button.button-outline.success {color: var(--sc-success-background); background-color: var(--sc-success-foreground)}

/* Info */
.button.button-outline.info {color: var(--sc-info-background); background-color: var(--sc-info-foreground)}
.button.button-outline.info {color: var(--sc-info-background); background-color: var(--sc-info-foreground)}

/* Warning */
.button.button-outline.warning {color: var(--sc-warning-background); background-color: var(--sc-warning-foreground)}
.button.button-outline.warning {color: var(--sc-warning-background); background-color: var(--sc-warning-foreground)}

/* Danger */
.button.button-outline.danger {color: var(--sc-danger-background); background-color: var(--sc-danger-foreground)}
.button.button-outline.danger {color: var(--sc-danger-background); background-color: var(--sc-danger-foreground)}

/* Link */
.button.button-outline.link {color: var(--color-link); background-color: var(--color-on-link)}
.button.button-outline.link {color: var(--color-link); background-color: var(--color-on-link)}








/* ! END: Buttons ===========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Buttons (Page Selectors) ==========================================================*/


.page-selector {
    display: flex;
    /* margin: 0.6vw auto; */

    /* Size */
    height: 3.4rem;
}

/* .page-selector > span    {flex: 1} */
.page-selector > div:first-child {border-top-left-radius: 2vw; border-bottom-left-radius: 2vw; margin: 0 0 0 auto}
.page-selector > div:last-child {border-top-right-radius: 2vw; border-bottom-right-radius: 2vw;  margin: 0 auto 0 -2px}
.page-selector > div:hover {cursor: pointer; margin-top: -0.4vw;}
.page-selector > div {
    text-align: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0;

    /* Size */
    height: 3.4rem;
    font-size: 1.6rem;
    line-height: 2rem;
    padding: 0.6rem 1rem;

    /* Colors */
    border: 3px solid var(--sc-foreground);
	background: var(--sc-surface-background);
	color: var(--sc-surface-foreground);
    
    margin-left: -3px;

    transition: 0.3s all;
}

.page-selector > div.activated {
    background-color: var(--sc-foreground);
	color: var(--sc-background);
    
}

/* Different Sizes */

.page-selector.small > div {
    /* Size */
    height: 2.2rem;
    font-size: 1rem;
    line-height: 1rem;
    padding: 0.6rem 1rem;
}


/* ! END: Buttons (Page Selectors) ==========================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Dropdowns =========================================================================*/


.dropdown-container.open > .dropdown-list,
.dropdown-container:hover > .dropdown-list {display: block !important;}
.dropdown-container {
    /* Same height as a button */
    height: auto;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0;
}

.dropdown-list.bottom-right {right: 0; top: 100%}
.dropdown-list {
    display: none;
    position: absolute;
    background-color: var(--sc-surface-background);
    box-shadow: var(--heavy-box-shadow);
    
    max-height: 40vh; /* to prevent long lists to be too long*/
    overflow-y: auto;

    z-index: 1;

    display: none;
}

.dropdown-item:hover {
    cursor: pointer;
    background-color: var(--sc-primary-light-background);
    color: var(--sc-primary-light-foreground);
}
.dropdown-item {
    background-color: var(--sc-surface-background);
    color: var(--sc-surface-foreground);
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    list-style-type: none;
}

.dropdown-page.visible { display: block; }
.dropdown-page {
    display: none;
    background: var(--sc-surface-background);
    color: var(--sc-surface-foreground);
}


/* ! END: Dropdowns =========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Accordions ========================================================================*/


/* Contains [button, section, dropdownArrow] */
.accordion:first-child > *:first-child,
.accordion:first-child {border-radius: 1rem 1rem 0 0}
.accordion:last-child {border-radius: 0 0 1rem 1rem}
.accordion {
    /* overflow: hidden; */
    box-shadow: var(--std-box-shadow);
    display: block;
    flex-direction: column;
    transition: all 0.3s
}

/* * Button */
.accordion > div:hover:after {
    margin: -2px;
    border: 1.2rem solid transparent;
    border-top: 2rem solid white;
}
.accordion > div:hover {cursor: pointer; background: var(--sc-primary-background)}

.accordion.selected > div,
.accordion:last-child > div {border-bottom: none}
.accordion > div {
    position: relative;
    display: flex;
    background: var(--sc-primary-background);
    border-bottom: 2px solid var(--sc-surface-background);
    box-sizing: border-box;
}
/* Button's image */
.accordion > div > img {width: 3rem; height: 3rem;}
/* Button's text */
.accordion > div > div {flex: 1; font-size: 2rem; line-height: 2rem; padding: 0.6rem; color: white}

/* Accordion up/down arrow */
.accordion--arrow {transition: 0.3s all}
.accordion.selected .accordion--arrow {transform: scaleY(-1)}


.accordion.accordion-dropdown.selected { display: block; }
.accordion.accordion-dropdown { display: none; }

.accordion.accordion-dropdown.selected > accordion-title { display: block; }
.accordion.accordion-dropdown > accordion-title { display: none; }

/* * Accordion's Section */
.accordion:last-child > section {border-radius: 0 0 1rem 1rem}
.accordion.selected > div:after {display: none}
.accordion.selected > section {display: block}
.accordion > section {
    display: none;
    background: var(--sc-surface-background);
    color: var(--sc-surface-foreground);
    padding: 1.2rem; 
}


/* ! END: Accordions ========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Scroll Bar ========================================================================*/

/* for firefox */
* {
    scrollbar-color: var(--sc-primary-background) transparent;
}

/* the scrollbar. */
::-webkit-scrollbar {width: 16px; height: 16px; z-index: 1;}

/* the buttons on the scrollbar (arrows pointing upwards and downwards). */
::-webkit-scrollbar-button {display: none}

/* the draggable scrolling handle. */

::-webkit-scrollbar-thumb
{
    background: var(--sc-primary-background);
    border-radius: 16px;

    min-height: 40px;
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sc-primary-background-hover);
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

/* the track (progress bar) of the scrollbar. */
::-webkit-scrollbar-track {background: transparent}


/* ! END: Scroll Bar ========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Switches ==========================================================================*/

.dg-switch
{
    position: relative;
    display: inline-block;
    
    width: 5rem;
    height: 2.5rem;
    border-radius: 2rem;
    box-shadow: var(--std-box-shadow);
    background-color: var(--sc-surface-background);
}

/* Hide default HTML checkbox */
.dg-switch input {
  opacity: 0; width: 0; height: 0;
}

.dg-switch input:checked + .dg-switch--slider {
    background-color: var(--sc-primary-background);
}
.dg-switch input:checked + .dg-switch--slider:before {
    margin: 0.25rem 0.25rem 0.25rem 2.5rem;
    background-color: var(--sc-surface-background);
}

.dg-switch--slider
{
    cursor: pointer;

    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;

    width: 100%;
    height: 100%;
    border-radius: 2rem;

    transition: 0.3s all;
}

.dg-switch--slider::before {
    content: " ";

    position: absolute;
    top: 0; bottom: 0;
    right: 0; left: 0;

    width: 2rem; height: 2rem;
    border-radius: 2rem;

    margin: 0.25rem 2.5rem 0.25rem 0.25rem;

    background-color: var(--sc-primary-background);
    box-shadow: var(--std-box-shadow);
    transition: 0.3s all;
}


.click-me {z-index: 2}

.click-me::before {
    content: " ";
    position: absolute;
    /* border-radius: 100%; */
    left: -100%; right: -100%; top: -100%; bottom: -100%;
    margin: auto;

    height: 110%;
    width: 110%;

    background: transparent;
    border: 4px solid red;
    /* z-index: 2; */
}

/* ! END: Switches ==========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Font Awesome 5.13.0 ===============================================================*/


/* Social Media Buttons */
.social-media-icon:hover {
    background-color: var(--color-secondary-dark-background);
    color: var(--color-secondary-dark-foreground);
}
.social-media-icon
{
    font-size: 1.2vw;
    line-height: 2vw;
    
    width: 3vw;
    height: 3vw;
    
    padding: 0.5vw;
    margin: 0.5vw;
    margin-top: 0.6vw;
    /*total height of 4.1 vw*/

    text-align: center;
    text-decoration: none;
    
    border-radius: 50%;
    
    color: var(--sc-secondary-foreground);
    background: var(--sc-secondary-background);
    
    transition: all 0.3s;
}


/* ! END: Font Awesome 5.13.0 ===============================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Media Queries =====================================================================*/

/* ! END: Media Queries =====================================================================*/


/* 

Source: https://www.youtube.com/watch?v=YV35fXL2qkk @ 1:12

*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

#js-toastHandler {
    position: fixed;
    bottom: 2rem; right: 2rem;

    /*
    top: 0; bottom: 0; right: 0;

    padding: 2rem 2rem 2rem 0;
    height: 100vh;
    overflow-y: auto;
    */


    min-width: 20rem;
    max-width: calc(100vw - 6rem);
    width: 20vw;

    z-index: 10;
}


.toast.log {color: var(--dg-color-toasts-dark); background: #fffffc}

.toast.currency,
.toast.normal {background: var(--dg-color-toasts-dark); color: white;}
.toast.info {background: var(--dg-color-toasts-blue); color: white;}
.toast.success {background: var(--dg-color-toasts-green); color: white;}
.toast.warning {background: var(--dg-color-toasts-orange); color: white;}
.toast.error {background: var(--dg-color-toasts-red); color: white;}
.toast.keys {background: var(--color-keys-light); color: var(--color-on-keys-light)}
.toast.diamonds {background: var(--color-diamonds-light); color: var(--color-on-diamonds-light)}

.toast {
    display: grid;
    grid-template-areas: 'icon title' 'icon body';
    /* grid-template-columns: 2.2rem 1fr; */
    grid-template-columns: 2.2rem calc(100% - 2.7rem);
    grid-gap: 0.5rem;

    margin-top: 20px;
    width: 100%;
    
    padding: 1rem;
    /* word-break: break-all; */

    border-radius: 0.5rem;
    box-shadow: var(--heavy-box-shadow);

    overflow: hidden;
}

.toast--icon {
    grid-area: icon;
    width: 2.2rem;
    height: 2.7rem;
    
    font-size: 1.7rem;
    line-height: 2.7rem;
}

.toast--title {
    grid-area: title;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.2rem;
    width: 100%;
}

.toast--body {
    grid-area: body;
    font-size: 1rem;
    width: 100%;
}

.toast--close:hover {
    cursor: pointer;
    transform: scale3D(1.3, 1.3, 1.3);
}
.toast--close {
    position: absolute;
    top: 0.75rem; right: 1rem;
    
    font-size: 1.2rem;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;
    transition: 0.2s all !important;
}

.toast.active .toast--progress {
    animation: unLoad linear;
    animation-duration: inherit;
}

/* Keep the progress bar at 100% while the toast is coming into view */
.toast.fadeInRight .toast--progress {width: 100%}

.toast.normal .toast--progress {background: rgba(255, 255, 255, 0.8)}
.toast--progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0%;
    height: 5px;
    border-radius: 0 0 3px 3px;
    background: rgba(0, 0, 0, 0.2);
}





/* Width Animation */

@keyframes unLoad {
    0% {width: 100%}
    99% {width: 0%}
    /* on ne met pas 100%, parce que sinon le event 'onanimationend' du parent
    se déclanche au mauvais moment et il n'y a pas de fadeOut du Toast */
}
@charset "UTF-8";
/*

    CSS classes for vue transitions

    They need to be applied to both the transition and the child

    ex.:

    <transition :duration="300" name="transitions--fadeInOut300ms">

        <div class="transitions--fadeInOut300ms"></div>

    </transition>

*/
.transitions--fadeInOut300ms {
  animation-fill-mode: both;
  animation-duration: 300ms;
}
.transitions--fadeInOut300ms-enter-active {
  animation-name: fadeIn;
}
.transitions--fadeInOut300ms-leave-active {
  animation-name: fadeOut;
}
.transitions--fadeInOut1000ms {
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.transitions--fadeInOut1000ms-enter-active {
  animation-name: fadeIn;
}
.transitions--fadeInOut1000ms-leave-active {
  animation-name: fadeOut;
}
.transitions--fadeInOut3000ms {
  animation-fill-mode: both;
  animation-duration: 3000ms;
}
.transitions--fadeInOut3000ms-enter-active {
  animation-name: fadeIn;
}
.transitions--fadeInOut3000ms-leave-active {
  animation-name: fadeOut;
}
.transitions--fadeInLeftOutRight4rem300ms {
  animation-fill-mode: both;
  animation-duration: 300ms;
}
.transitions--fadeInLeftOutRight4rem300ms-enter-active {
  animation-name: fadeInLeft4rem;
}
.transitions--fadeInLeftOutRight4rem300ms-leave-active {
  animation-name: fadeOutRight4rem;
}
.transitions--fadeInLeftOutRight4rem1000ms {
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.transitions--fadeInLeftOutRight4rem1000ms-enter-active {
  animation-name: fadeInLeft4rem;
}
.transitions--fadeInLeftOutRight4rem1000ms-leave-active {
  animation-name: fadeOutRight4rem;
}
.transitions--fadeInLeftOutRight4rem3000ms {
  animation-fill-mode: both;
  animation-duration: 3000ms;
}
.transitions--fadeInLeftOutRight4rem3000ms-enter-active {
  animation-name: fadeInLeft4rem;
}
.transitions--fadeInLeftOutRight4rem3000ms-leave-active {
  animation-name: fadeOutRight4rem;
}
.transitions--fadeInLeftUpDown1rem300ms {
  animation-fill-mode: both;
  animation-duration: 300ms;
}
.transitions--fadeInLeftUpDown1rem300ms-enter-active {
  animation-name: fadeInUp1rem;
}
.transitions--fadeInLeftUpDown1rem300ms-leave-active {
  animation-name: fadeOutDown1rem;
}
.transitions--fadeInLeftUpDown1rem1000ms {
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.transitions--fadeInLeftUpDown1rem1000ms-enter-active {
  animation-name: fadeInUp1rem;
}
.transitions--fadeInLeftUpDown1rem1000ms-leave-active {
  animation-name: fadeOutDown1rem;
}
.transitions--fadeInLeftUpDown1rem3000ms {
  animation-fill-mode: both;
  animation-duration: 3000ms;
}
.transitions--fadeInLeftUpDown1rem3000ms-enter-active {
  animation-name: fadeInUp1rem;
}
.transitions--fadeInLeftUpDown1rem3000ms-leave-active {
  animation-name: fadeOutDown1rem;
}
.transitions--slideInOutRight300ms {
  animation-fill-mode: both;
  animation-duration: 300ms;
}
.transitions--slideInOutRight300ms-enter-active {
  animation-name: slideInRight;
}
.transitions--slideInOutRight300ms-leave-active {
  animation-name: slideOutRight;
}
.transitions--slideInOutRight1000ms {
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.transitions--slideInOutRight1000ms-enter-active {
  animation-name: slideInRight;
}
.transitions--slideInOutRight1000ms-leave-active {
  animation-name: slideOutRight;
}
.transitions--slideInOutRight3000ms {
  animation-fill-mode: both;
  animation-duration: 3000ms;
}
.transitions--slideInOutRight3000ms-enter-active {
  animation-name: slideInRight;
}
.transitions--slideInOutRight3000ms-leave-active {
  animation-name: slideOutRight;
}
.transitions--zoomInOut300ms {
  animation-fill-mode: both;
  animation-duration: 300ms;
}
.transitions--zoomInOut300ms-enter-active {
  animation-name: zoomIn;
}
.transitions--zoomInOut300ms-leave-active {
  animation-name: zoomOut;
}
.transitions--zoomInOut1000ms {
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.transitions--zoomInOut1000ms-enter-active {
  animation-name: zoomIn;
}
.transitions--zoomInOut1000ms-leave-active {
  animation-name: zoomOut;
}
.transitions--zoomInOut3000ms {
  animation-fill-mode: both;
  animation-duration: 3000ms;
}
.transitions--zoomInOut3000ms-enter-active {
  animation-name: zoomIn;
}
.transitions--zoomInOut3000ms-leave-active {
  animation-name: zoomOut;
}

/*
    Primer Primitives
    https://www.figma.com/community/file/854766928300977832

    ! Rules
    - DO NOT USE SCSS VARIABLES IN THE CODE.
    - Only use CSS properties in the code.
    - DON'T USE 50-900 values for primary/secondary colors in the code

*/
:root {
  /* 
      ! Primary/Highlight Color: #2E294E

      A primary color is the color displayed most frequently across your app’s screens and components.

      "On" colors are primarily applied to text, iconography, and strokes. Sometimes, they are applied to surfaces.

      todo IDEA: 800 should be the primary color?

  */
  --sc-p900: hsl(248, 31%, 10%);
  --sc-p800: hsl(248, 31%, 23%);
  --sc-p700: hsl(248, 31%, 31%);
  --sc-p600: hsl(248, 31%, 56%);
  --sc-p500: hsl(248, 31%, 71%);
  --sc-p400: hsl(248, 31%, 83%);
  --sc-p300: hsl(248, 31%, 89%);
  --sc-p200: hsl(248, 31%, 93%);
  --sc-p100: hsl(248, 31%, 95%);
  --sc-p050: hsl(248, 31%, 98%);
  /*
      ! Secondary/Accent/Call to Action Color: #EE4266

      ? Should be applied sparingly to accent select parts of your UI

      * Secondary colors are best for:
      - Floating action buttons
      - Selection controls, like sliders and switches
      - Highlighting selected text
      - Progress bars
      - Links and headlines

      todo IDEA: either 400 or 500 should be the accent color?
  */
  --sc-a900: hsl(347, 83%, 10%);
  --sc-a800: hsl(347, 83%, 23%);
  --sc-a700: hsl(347, 83%, 31%);
  --sc-a600: hsl(347, 83%, 56%);
  --sc-a500: hsl(347, 83%, 60%);
  --sc-a400: hsl(347, 83%, 71%);
  --sc-a300: hsl(347, 83%, 89%);
  --sc-a200: hsl(347, 83%, 93%);
  --sc-a100: hsl(347, 83%, 95%);
  --sc-a050: hsl(347, 83%, 98%);
  /* 
      ! Neutral Colors: Based on the primary color but with extremely low saturation

      todo IDEAs:
      - 100 and 900 should be the extreme colors?
      - there should be NO saturation (only shades of grey)
  */
  --sc-grey-900: hsl(248, 10%, 10%);
  --sc-grey-800: hsl(248, 10%, 23%);
  --sc-grey-700: hsl(248, 10%, 31%);
  --sc-grey-600: hsl(248, 10%, 56%);
  --sc-grey-500: hsl(248, 10%, 71%);
  --sc-grey-400: hsl(248, 10%, 83%);
  --sc-grey-300: hsl(248, 10%, 89%);
  --sc-grey-200: hsl(248, 10%, 93%);
  --sc-grey-100: hsl(248, 10%, 95%);
  --sc-grey-050: hsl(248, 10%, 98%);
  --sc-grey-000: hsl(0, 0%, 100%);
}

/*
    Color theme example by Kevin Powell
    use a loop to convert SASS colors to CSS colors
    Dark theme: https://www.youtube.com/watch?v=JzoGgIB9FDQ
    His inspiration: https://www.twitch.tv/peruvianidol


    todo: seek inspiration from Element
    - https://element.eleme.cn/#/en-US/theme/preview


    todo: css calculate colors
    - https://developer.epages.com/blog/coding/css-can-do-that-color-manipulation-for-the-fearless/


    todo: seek inspiration from Vaadin
    - https://vaadin.com/components
    - https://vaadin.com/docs/latest/ds/components


    todo: these colors here (light vs dark) could be background color based on the OS's theme
    --sc-light: #fffffc;
    --sc-on-light: #323232;
    --sc-light-hover: hsl(60, 100%, 89%);
    --sc-on-light-hover: #323232;

    --sc-dark: #323232;
    --sc-on-dark: #fff;
    --sc-dark-hover: hsl(0, 0%, 40%);
    --sc-on-dark-hover: #fff;
*/
:root {
  --border-radius-1: 0.25rem;
  --border-radius-2: 0.5rem;
  --border-radius-3: 1rem;
  --border-radius-4: 1.5rem;
  --border-radius-100: 100vw;
  --margin-1: 0.25rem;
  --margin-2: 0.5rem;
  --margin-3: 1rem;
  --margin-4: 1.25rem;
  --margin-5: 1.5rem;
  --margin-6: 2rem;
  --margin-7: 3rem;
  --margin-8: 4rem;
  --margin-9: 6rem;
  --margin-10: 8rem;
  --heavy-box-shadow: 0.2vw 0.2vw 0.5vw rgba(0,0,0,0.3);
  /* Neumorphism: https://www.youtube.com/watch?v=KlSLdEB3lzg */
  --neumorph-shadow:
      -6px -6px 10px 0 rgba(255,255,255,1),
      6px 6px 10px 0 rgba(0,0,0,0.15);
  --white-box-shadow: 0 0 20px 0 white;
  /*
      Shadow Generator: https://shadows.brumm.af/

      Animation Generator: https://animista.net/play/

      SVG Illustrations: https://undraw.co/illustrations

      Multicolor Gradients: https://gradienta.io/

      Avatar Maker: https://avatarmaker.com/

      Image size reducer: https://squoosh.app/

      SVG Waves: https://getwaves.io/

      Color hues: https://www.happyhues.co/palettes/1

  */
  --std-box-shadow: 0.5rem 0.5rem 1.5rem rgba(0,0,0,0.15);
  --small-box-shadow: 2px 2px 1rem 0 rgba(0,0,0,0.10);
  --pink-accent-shadow:
      -10px -10px 10px 0 rgba(255,255,255,1),
      10px 10px 10px 0 #c0000e33;
  --yellow-accent-shadow: 0.2vw 0.2vw 0.5vw #de940933;
  --blue-accent-shadow: 0.2vw 0.2vw 0.5vw #02586533; /*this shade of blue doesn't exist anywhere else in the code*/
  --dark-box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3);
  --std-pink-shadow: 0.2vw 0.2vw 0.5vw rgba(255, 73, 86, .2);
  --std-purple-shadow: 0.2vw 0.2vw 0.5vw rgba(104, 38, 102, .2);
  --std-yellow-shadow: 0.2vw 0.2vw 0.5vw rgba(247, 179, 52, .2);
  --pink-shadow: 0 10px 50px 0 rgba(255, 73, 86, .1);
  --purple-shadow: 0 10px 50px 0 rgba(104, 38, 102, .1);
  --yellow-shadow: 0 10px 50px 0 rgba(247, 179, 52, .1);
  --grey-shadow: 0 10px 50px 0 rgba(34, 43, 55, .1);
}

/*
    ! Rules
    - This color theme is the whole theme.
    - Components should use variables from this file only.
    - All variables used here should come from PRIMITIVES.

    ! Dulcet Games Color Palette
    https://coolors.co/ee4266-edd2e0-c4cbca-2e294e-00171f

    Paradise Pink - EE4266
    Queen Pink - EDD2E0
    Lavender Gray - C4CBCA
    Space Cadet - 2E294E
    Rich Black - 00171F

    Alternate Color Palette?
    https://coolors.co/ee4266-3772ff-2e294e

    Dulcet Games Color = "dgc"
    Serie Color = "sc"
*/
:root {
  --sc-primary-background: var(--sc-p800);
  --sc-primary-foreground: white;
  --sc-primary-background-hover: hsl(248, 31%, 13%);
  --sc-primary-foreground-hover: white;
  --sc-primary-light-background: var(--sc-p100);
  --sc-primary-light-foreground: var(--sc-p700);
  --sc-primary-light-background-hover: var(--sc-p300);
  --sc-primary-light-foreground-hover: var(--sc-p700);
  --sc-primary-transparent-10: rgba(46, 41, 78, 0.1);
  --sc-primary-transparent-50: rgba(46, 41, 78, 0.5);
  --sc-secondary-background: #ee4266;
  --sc-secondary-foreground: white;
  --sc-secondary-background-hover: hsl(347, 83%, 50%);
  --sc-secondary-foreground-hover: white;
  --sc-secondary-light-background: var(--sc-a100);
  --sc-secondary-light-foreground: var(--sc-a700);
  --sc-secondary-light-background-hover: var(--sc-a300);
  --sc-secondary-light-foreground-hover: var(--sc-a700);
  /* 
      ! Surface, background, and error colors

      Surface colors affect surfaces of components, such as cards, sheets, and menus.
      The background color appears behind scrollable content. The baseline background and surface color is #FFFFFF.
      Error color indicates errors in components, such as invalid text in a text field. The baseline error color is #B00020.
  */
  --sc-background: var(--sc-grey-050);
  --sc-foreground: var(--sc-grey-700);
  --sc-surface-background: var(--sc-grey-000);
  --sc-surface-foreground: var(--sc-grey-700);
  --sc-surface-background-hover: var(--sc-grey-700);
  --sc-surface-foreground-hover: var(--sc-grey-000);
  --sc-header-background: #080026;
  --sc-header-foreground: var(--sc-p050);
  --sc-header-background-hover: var(--sc-header-foreground);
  --sc-header-foreground-hover: var(--sc-header-background);
  --sc-sub-header-background: var(--sc-primary-background);
  --sc-sub-header-foreground: var(--sc-primary-foreground);
  --sc-success-background: #38b48b;
  --sc-success-foreground: #fff;
  --sc-success-background-hover: hsl(160, 53%, 36%);
  --sc-success-foreground-hover: #fff;
  --sc-info-background: #2ca9e1;
  --sc-info-foreground: #fff;
  --sc-info-background-hover: hsl(199, 75%, 43%);
  --sc-info-foreground-hover: #fff;
  --sc-warning-background: #f89406;
  --sc-warning-foreground: #fff;
  --sc-warning-background-hover: hsl(35, 95%, 40%);
  --sc-warning-foreground-hover: #fff;
  --sc-danger-background: #e9546b;
  --sc-danger-foreground: #fff;
  --sc-danger-background-hover: hsl(351, 77%, 52%);
  --sc-danger-foreground-hover: #fff;
  --dg-color-toasts-dark: #323232;
  --dg-color-toasts-blue: #2ca9e1;
  --dg-color-toasts-green: #38b48b;
  --dg-color-toasts-orange: #f89406;
  --dg-color-toasts-red: #e9546b;
  --dg-color-tooltip-background: #333333;
  --dg-color-tooltip-foreground: white;
}

* {
  font-family: "Josefin Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "El Messiri", sans-serif;
}

/*
    Coolors: click on "tools" at the top right
    https://coolors.co/c3f9b8-b8edf9-dab8f9-f9b8e9-f9d7b8-f9ebb8
*/
:root {
  /* Diamonds & Keys */
  --color-diamonds-light: hsl(300, 100%, 94%);
  --color-on-diamonds-light: hsl(300, 100%, 10%);
  --color-keys-light: hsl(192, 100%, 94%);
  --color-on-keys-light: hsl(192, 100%, 10%);
  --color-gift: #ff4753;
  --color-gift-light: #f3def2;
  --checkerboard-background-image: linear-gradient(45deg, #eee 25%, transparent 25%),
      linear-gradient(-45deg, #eee 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #eee 75%),
      linear-gradient(-45deg, transparent 75%, #eee 75%);
  --checkerboard-background-size: 20px 20px;
  --checkerboard-background-position:
      0 0,
      0 10px,
      10px -10px,
      -10px 0px;
}

.checkered-img, .gmClothes--droppableArea {
  background-image: var(--checkerboard-background-image);
  background-size: var(--checkerboard-background-size);
  background-position: var(--checkerboard-background-position);
}

:root {
  /* Todo: delete 'dark' colors */
  --color-primary-dark-background: #080026;
  --color-primary-dark-foreground: white;
  --color-illustrations-dark: #025966;
  --color-illustrations-light: #cef8fe;
  --color-achievements-dark: #f5a232;
  --color-achievements-light: #fdecb9;
  --color-lore-dark: #682766;
  --color-lore-light: #f2e5ee;
  --light-green: #dbffdb;
  --on-light-green: black;
  /* By Page */
  --color-dashboard-gradient: var(--sc-primary-light-background);
  --color-on-dashboard-gradient: var(--sc-primary-light-foreground);
  --color-login-form-background: var(--sc-primary-background);
  --color-on-login-form-background: var(--sc-primary-foreground);
  --sc-surface-background-translucent: #ffffffdd;
  --sc-surface-foreground-translucent: black;
  /* For the wardrobe */
  --color-coins-light: #fdeac7;
  /* --color-sousface: hsl(231, 19%, 97%);
  --color-on-sousface: var(--sc-foreground); */
}

/*
    This is to prevent weird mobile scroll behaviour
    ? https://stackoverflow.com/questions/65478746/element-with-fixed-position-hides-by-half-on-scroll-from-mobile
*/
html, body {
  overflow: auto;
}

* {
  position: relative;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  font-weight: 300;
  line-height: 1.3; /* this is multiplied by the font-size */
}

a {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: block;
}

pre {
  /* Discord colors */
  /*
  background: rgb(47, 49, 54);
  color: rgb(185, 187, 190);
  border: 1px solid rgb(34, 32, 37);
  */
  background: var(--sc-primary-light-background);
  /* color: var(--sc-primary-light-foreground); */
  color: rgb(185, 187, 190);
  border: 1px solid rgb(34, 32, 37);
  padding: 1rem;
  border-radius: 1rem;
  margin: 0;
  /* margin-top: 0;
  margin-bottom: 1rem; */
}

/*
    As seen on the General Settings of the Dulcet Studio
*/
.generalCenteredSection {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}

.hoverGrow {
  transition: 0.3s all;
}
.hoverGrow:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.dgtitle--container {
  display: flex;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.dgtitle--container h1 {
  font-size: 4rem;
  line-height: 4rem;
}
@media only screen and (max-width: 1200px) {
  .dgtitle--container h1 {
    font-size: 3rem;
  }
}
.dgtitle--container i {
  font-size: 2rem;
  line-height: 3.5rem;
  padding-bottom: 0.5rem;
}

.dg-button {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -moz-appearance: button;
       appearance: button;
  -webkit-appearance: button;
  width: fit-content;
  width: -moz-fit-content;
  margin: unset;
  border: none;
  transition: 0.3s background-color, 0.3s color, 0.3s filter;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 0, 0, 0.6);
  --btn--unit: 1rem;
  border-radius: calc(var(--btn--unit) * 2);
  padding: calc(var(--btn--unit) * 0.5) var(--btn--unit);
  height: calc(var(--btn--unit) * 2.3);
  --button-text-color: white;
  --button-background-color: black;
  background-color: var(--button-background-color);
  outline: 0;
}
.dg-button:not(.is-loading):hover {
  cursor: pointer;
}
.dg-button.icon-only .dg-button--icon {
  text-align: center;
  padding: 0;
}
.dg-button.icon-only {
  padding: 0;
  width: calc(var(--btn--unit) * 2.3);
}
.dg-button.disabled {
  background-color: var(--sc-grey-200);
  color: var(--sc-grey-500);
}
.dg-button.disabled * {
  color: var(--sc-grey-500);
}
.dg-button.disabled:hover {
  cursor: not-allowed;
}
.dg-button.reversed {
  flex-direction: row-reverse;
}
.dg-button:not(.reversed):not(.icon-only) > .dg-button--icon {
  text-align: left;
  padding-right: calc(var(--btn--unit) / 2);
}
.dg-button.reversed > .dg-button--icon {
  text-align: right;
  padding-left: calc(var(--btn--unit) / 2);
}
.dg-button.is-loading {
  overflow: hidden;
  filter: grayscale(0.5);
}
.dg-button.is-loading:not(.icon-only) {
  padding-left: calc(var(--btn--unit) * 2.4);
}
.dg-button.is-loading .dg-button--icon {
  display: none;
}
.dg-button.is-loading::before, .dg-button.is-loading::after {
  content: " ";
  position: absolute;
  left: calc(var(--btn--unit) * 0.8);
  top: calc(var(--btn--unit) * 0.5);
  width: var(--btn--unit);
  height: var(--btn--unit);
  border-radius: var(--btn--unit);
}
.dg-button.is-loading::before {
  opacity: 0.5;
  border: 2px solid var(--button-text-color);
}
.dg-button.is-loading::after {
  border: 2px solid transparent;
  border-top-color: var(--button-text-color);
  animation: 1s spin infinite linear;
}
.dg-button.is-loading.icon-only::before, .dg-button.is-loading.icon-only::after {
  left: calc(var(--btn--unit) * 0.5);
}
.dg-button.small {
  --btn--unit: 0.75rem ;
}
.dg-button.large {
  --btn--unit: 1.5rem ;
}
.dg-button.x-large {
  --btn--unit: 2rem ;
}
.dg-button.header {
  --button-background-color: var(--sc-header-background);
  --button-text-color: var(--sc-header-foreground);
}
.dg-button.header.hover, .dg-button.header:hover {
  --button-background-color: var(--sc-header-background-hover);
  --button-text-color: var(--sc-header-foreground-hover);
}
.dg-button.header.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-header-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.header.outlined.hover, .dg-button.header.outlined:hover {
  --button-background-color: var(--sc-header-background-hover);
  --button-text-color: var(--sc-header-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.primary {
  --button-background-color: var(--sc-primary-background);
  --button-text-color: var(--sc-primary-foreground);
}
.dg-button.primary.hover, .dg-button.primary:hover {
  --button-background-color: var(--sc-primary-background-hover);
  --button-text-color: var(--sc-primary-foreground-hover);
}
.dg-button.primary.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-primary-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.primary.outlined.hover, .dg-button.primary.outlined:hover {
  --button-background-color: var(--sc-primary-background-hover);
  --button-text-color: var(--sc-primary-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.primary-light {
  --button-background-color: var(--sc-primary-light-background);
  --button-text-color: var(--sc-primary-light-foreground);
}
.dg-button.primary-light.hover, .dg-button.primary-light:hover {
  --button-background-color: var(--sc-primary-light-background-hover);
  --button-text-color: var(--sc-primary-light-foreground-hover);
}
.dg-button.primary-light.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-primary-light-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.primary-light.outlined.hover, .dg-button.primary-light.outlined:hover {
  --button-background-color: var(--sc-primary-light-background-hover);
  --button-text-color: var(--sc-primary-light-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.secondary {
  --button-background-color: var(--sc-secondary-background);
  --button-text-color: var(--sc-secondary-foreground);
}
.dg-button.secondary.hover, .dg-button.secondary:hover {
  --button-background-color: var(--sc-secondary-background-hover);
  --button-text-color: var(--sc-secondary-foreground-hover);
}
.dg-button.secondary.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-secondary-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.secondary.outlined.hover, .dg-button.secondary.outlined:hover {
  --button-background-color: var(--sc-secondary-background-hover);
  --button-text-color: var(--sc-secondary-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.secondary-light {
  --button-background-color: var(--sc-secondary-light-background);
  --button-text-color: var(--sc-secondary-light-foreground);
}
.dg-button.secondary-light.hover, .dg-button.secondary-light:hover {
  --button-background-color: var(--sc-secondary-light-background-hover);
  --button-text-color: var(--sc-secondary-light-foreground-hover);
}
.dg-button.secondary-light.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-secondary-light-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.secondary-light.outlined.hover, .dg-button.secondary-light.outlined:hover {
  --button-background-color: var(--sc-secondary-light-background-hover);
  --button-text-color: var(--sc-secondary-light-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.success {
  --button-background-color: var(--sc-success-background);
  --button-text-color: var(--sc-success-foreground);
}
.dg-button.success.hover, .dg-button.success:hover {
  --button-background-color: var(--sc-success-background-hover);
  --button-text-color: var(--sc-success-foreground-hover);
}
.dg-button.success.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-success-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.success.outlined.hover, .dg-button.success.outlined:hover {
  --button-background-color: var(--sc-success-background-hover);
  --button-text-color: var(--sc-success-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.info {
  --button-background-color: var(--sc-info-background);
  --button-text-color: var(--sc-info-foreground);
}
.dg-button.info.hover, .dg-button.info:hover {
  --button-background-color: var(--sc-info-background-hover);
  --button-text-color: var(--sc-info-foreground-hover);
}
.dg-button.info.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-info-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.info.outlined.hover, .dg-button.info.outlined:hover {
  --button-background-color: var(--sc-info-background-hover);
  --button-text-color: var(--sc-info-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.warning {
  --button-background-color: var(--sc-warning-background);
  --button-text-color: var(--sc-warning-foreground);
}
.dg-button.warning.hover, .dg-button.warning:hover {
  --button-background-color: var(--sc-warning-background-hover);
  --button-text-color: var(--sc-warning-foreground-hover);
}
.dg-button.warning.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-warning-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.warning.outlined.hover, .dg-button.warning.outlined:hover {
  --button-background-color: var(--sc-warning-background-hover);
  --button-text-color: var(--sc-warning-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.danger {
  --button-background-color: var(--sc-danger-background);
  --button-text-color: var(--sc-danger-foreground);
}
.dg-button.danger.hover, .dg-button.danger:hover {
  --button-background-color: var(--sc-danger-background-hover);
  --button-text-color: var(--sc-danger-foreground-hover);
}
.dg-button.danger.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-danger-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.danger.outlined.hover, .dg-button.danger.outlined:hover {
  --button-background-color: var(--sc-danger-background-hover);
  --button-text-color: var(--sc-danger-foreground-hover);
  border: 2px solid var(--button-background-color);
}
.dg-button.surface {
  --button-background-color: var(--sc-surface-background);
  --button-text-color: var(--sc-surface-foreground);
}
.dg-button.surface.hover, .dg-button.surface:hover {
  --button-background-color: var(--sc-surface-background-hover);
  --button-text-color: var(--sc-surface-foreground-hover);
}
.dg-button.surface.outlined {
  --button-background-color: transparent;
  --button-text-color: var(--sc-surface-background);
  border: 2px solid var(--button-text-color);
}
.dg-button.surface.outlined.hover, .dg-button.surface.outlined:hover {
  --button-background-color: var(--sc-surface-background-hover);
  --button-text-color: var(--sc-surface-foreground-hover);
  border: 2px solid var(--button-background-color);
}

.dg-button--image {
  width: calc(var(--btn--unit) * 1.3);
  height: calc(var(--btn--unit) * 1.3);
}

.dg-button--text,
.dg-button--icon {
  font-size: var(--btn--unit);
  line-height: calc(var(--btn--unit) * 1.3);
  height: calc(var(--btn--unit) * 1.3);
  padding: 0;
  color: var(--button-text-color);
}

.dg-modal-container--animation-enter-active {
  animation-name: fadeIn;
}

.dg-modal-container--animation-leave-active {
  animation-name: fadeOut;
}

.dg-modal-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  animation-fill-mode: both;
  animation-duration: 300ms;
}

.dg-modal-container--animation-enter-active .dg-modal {
  animation-name: zoomIn;
}

.dg-modal-container--animation-leave-active .dg-modal {
  animation-name: zoomOut;
}

.dg-modal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  /* box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.6); */
  animation-fill-mode: both;
  animation-duration: 300ms;
  /*
  &.horizontal.small { width: 30%; height: 25% }
  &.horizontal.medium { width: 40%; height: 35% }
  &.horizontal.large { width: 50%; height: 45% }
  &.horizontal.huge { width: 80%; height: 45% }

  &.vertical.small {height: 30%; width: 30%}
  &.vertical.medium {height: 40%; width: 35%}
  &.vertical.large {height: 50%; width: 40%}
  */
}

.dg-modal--header > * {
  height: 4rem;
  font-size: 2rem;
  line-height: 2rem;
  padding: 1rem;
}

.dg-modal--header {
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  width: 100%;
  height: 4rem;
  border-radius: 1rem 1rem 0 0;
}

.dg-modal--body {
  flex: 1;
  height: 30vh;
  padding: 2rem;
  overflow-y: auto;
}

.dg-modal--footer {
  width: 100%;
}

#dg--modal--dismissButton {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.dg-confirm-modal {
  width: min(30rem, 90vw);
  height: -moz-min-content;
  height: min-content;
  padding: 2rem;
  padding-bottom: 1rem;
}
.dg-confirm-modal--questionLine {
  font-size: 1.2rem;
  font-weight: bold;
}
.dg-confirm-modal--justificationLine {
  margin-top: 0.5rem;
  font-size: 1rem;
  opacity: 0.9;
}
.dg-confirm-modal--buttonLine {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.dg-confirm-modal.is-loading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dg-input {
  --dg-input--unit: 1rem;
  height: calc(2.3 * var(--dg-input--unit));
  --dg-input-text-color: var(--sc-surface-foreground);
  background-color: var(--sc-surface-background);
  color: var(--dg-input-text-color);
}
.dg-input .dg-input--icon {
  position: absolute;
  left: calc(var(--dg-input--unit) / 4);
  top: 0;
  color: var(--dg-input-text-color);
  height: calc(2.3 * var(--dg-input--unit));
  line-height: calc(2.3 * var(--dg-input--unit));
  width: calc(2.3 * var(--dg-input--unit));
  font-size: var(--dg-input--unit);
  text-align: center;
}
.dg-input input {
  height: calc(2.3 * var(--dg-input--unit));
  font-size: var(--dg-input--unit);
  line-height: var(--dg-input--unit);
  padding: calc(var(--dg-input--unit) * 0.5) var(--dg-input--unit);
  color: var(--dg-input-text-color);
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  border-bottom: 2px solid var(--dg-input-text-color);
  border-radius: 0;
}
.dg-input input.has-icon {
  padding-left: calc(var(--dg-input--unit) / 2 + 2.3 * var(--dg-input--unit));
}
.dg-input.primary {
  --dg-input-text-color: var(--sc-primary-background);
}
.dg-input.primary:hover {
  --dg-input-text-color: var(--sc-primary-background-hover);
}
.dg-input.secondary {
  --dg-input-text-color: var(--sc-secondary-background);
}
.dg-input.secondary:hover {
  --dg-input-text-color: var(--sc-secondary-background-hover);
}

.dg-toggle {
  --dg-toggle-background-color: var(--sc-primary-light-background);
  --dg-toggle-foreground-color: var(--sc-primary-background);
  width: -moz-min-content;
  width: min-content;
}
.dg-toggle .dg-toggle--container {
  display: inline-block;
  position: relative;
  height: 1.3rem;
  width: 2.45rem;
  background-color: var(--dg-toggle-background-color);
  border: 0 solid var(--dg-toggle-foreground-color);
  border-radius: 2.45rem;
  box-shadow: 0 0 1px var(--dg-toggle-foreground-color);
  vertical-align: middle;
  transition: all 300ms;
}
.dg-toggle .dg-toggle--container:hover {
  cursor: pointer;
}
.dg-toggle .dg-toggle--container::before {
  content: "";
  display: none;
  height: 1.3rem;
  width: 2.45rem;
  border-radius: 1rem;
  position: absolute;
  left: 0;
  top: 0;
  background-color: red;
}
.dg-toggle .dg-toggle--container::after {
  content: "";
  display: block;
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--dg-toggle-foreground-color);
  transition: all 300ms;
}
.dg-toggle input:checked + .dg-toggle--container {
  --dg-toggle-background-color: var(--sc-success-background);
  --dg-toggle-foreground-color: var(--sc-success-foreground);
}
.dg-toggle input:checked + .dg-toggle--container::after {
  left: 1.3rem;
}

.dg-drag-drop--container {
  background-color: var(--sc-primary-light-background);
  border: 1px solid var(--sc-primary-background);
  padding: 3rem;
  transition: 0.3s background-color;
}
.dg-drag-drop--container.invisible {
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1;
  border-color: transparent;
}
.dg-drag-drop--container.invisible .dg-drag-drop--message, .dg-drag-drop--container.invisible > div {
  display: none;
}
.dg-drag-drop--container.hasFiles {
  background-color: var(--sc-primary-light-background);
}
.dg-drag-drop--container.hasFiles .dg-drag-drop--message {
  display: flex;
}
.dg-drag-drop--container.isDragover {
  background-color: var(--sc-primary-light-background-hover);
}
.dg-drag-drop--container.isDragover .dg-drag-drop--message {
  display: flex;
}
.dg-drag-drop--container .dg-drag-drop--message {
  display: flex;
  justify-content: space-between;
}
.dg-drag-drop--container ul.dg-drag-drop--filesList {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  padding: 0;
  margin: 0;
}
.dg-drag-drop--container ul.dg-drag-drop--filesList li.dg-drag-drop--file {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  background-color: var(--sc-surface-background);
  font-size: 1rem;
  line-height: 1rem;
  min-height: 4rem;
  line-height: 2.3rem;
  padding: 0.85rem 1.7rem;
}
.dg-drag-drop--container ul.dg-drag-drop--filesList li.dg-drag-drop--file.tooBig {
  border: 2px solid var(--sc-danger-background);
}
.dg-drag-drop--container ul.dg-drag-drop--filesList li.dg-drag-drop--file.tooBig::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background: var(--sc-danger-background);
  opacity: 0.05;
}
.dg-drag-drop--container ul.dg-drag-drop--filesList li.dg-drag-drop--file > div {
  line-height: 2.3rem;
}
.dg-drag-drop--container ul.dg-drag-drop--filesList li.dg-drag-drop--file > img {
  border: 1px solid var(--sc-primary-background);
  height: 2.3rem;
  width: auto;
  display: block;
}
.dg-drag-drop--container .dg-drag-drop--oneFile--preview {
  margin-top: 1rem;
  width: 100%;
  border: 2px solid var(--sc-primary-background);
}
.dg-drag-drop--container .tooBigMessage {
  color: var(--sc-danger-background);
  font-weight: bold;
}

#assetsFieldHandle {
  display: none;
}

.dg-drag-drop--underline {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

[v-cloak] {
  display: none;
}

ul.dg-tabs--list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: inset 0 -1px 0 0 var(--sc-primary-transparent-10);
}
ul.dg-tabs--list > li {
  font-size: 1rem;
  line-height: 1rem;
  height: 3rem;
  padding: 1rem 2rem;
  cursor: pointer;
  display: inline-block;
}
ul.dg-tabs--list > li:hover::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-primary-background);
  opacity: 0.1;
}
ul.dg-tabs--list > li.dg-tab--selected {
  font-weight: bold;
  border-radius: 10px 10px 0 0;
}
ul.dg-tabs--list > li.dg-tab--selected::after {
  content: " ";
  width: 4rem;
  height: 0;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  margin: 0 auto;
  animation: zoomIn;
  animation-duration: 0.3s;
  border-bottom: 2px solid var(--sc-foreground);
  box-shadow: 0 0 2px var(--sc-grey-500);
}

/*
.dg-tab {
    display: inline-block;
    color: black;
    padding: 20px;
    padding: 1rem;
    width: 100%;
    min-width: 800px;
    border-radius: 10px;
    min-height: 400px;
    background-color: #fff;
}
*/
.dg-star--container {
  display: flex;
  gap: 0.2rem;
}
.dg-star--container i {
  color: grey;
  font-size: 0.8rem;
  line-height: 1.3rem;
}
.dg-star--container i.softFilled {
  color: gold;
}
.dg-star--container i.filled {
  color: orange;
}

.dgDatepickerContainer {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.dgDatepicker--input {
  padding: 0 1rem;
  border: 2px solid var(--sc-primary-light-background);
  height: 2.5rem;
  border-radius: 4px;
}
.dgDatepicker--input.error {
  border: 2px solid var(--sc-danger-background);
  color: var(--sc-danger-background);
}

/*
input.dgDatepicker--input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    background: transparent;
    color: transparent;

    position: absolute;
    @include inset0;
    width: auto;
    height: auto;
}
*/
.dgDatepicker--daysContainer {
  padding: 0.6rem 1rem;
}
.dgDatepicker--daysContainer.alert {
  flex: 1 1 100%;
}

/* Form outline is a line for a form element */
.dropdown-form-outline {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  /* transition on all children of the form line*/
  /* We position the "caret down" inside the form line */
}
.dropdown-form-outline * {
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
.dropdown-form-outline .fas.fa-caret-down {
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 1.5rem;
  line-height: 2.5rem;
  /*z-index: 0; /* we want to select the input even if we click on the down arrow -> corrected via javascript*/
}
.dropdown-form-outline .fas.fa-caret-down:hover {
  cursor: pointer;
}

/* inputs in the form element */
.dropdown-form-control {
  /* default: font-size = 1rem, line-height = 1.3 */
  padding: 0.6rem 1rem;
  /* 1.3 + 1.2 = 2.5 */
  height: 2.5rem;
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  color: inherit;
  background: var(--sc-surface-background);
  border: 2px solid var(--sc-primary-light-background);
  border-radius: 0.3rem;
  /*z-index: 1; /* we want to select the input even if we click on the down arrow -> corrected via javascript*/
}
.dropdown-form-control:focus {
  outline: none;
  cursor: pointer;
}
.dropdown-form-control:focus ~ .dropdown-form-label {
  color: var(--sc-primary-background);
}

/* labels in the form element */
.dropdown-form-label {
  position: absolute;
  left: 0.5rem;
  top: -0.5rem;
  padding: 0 0.3rem;
  font-size: 0.9rem;
  line-height: 0.9rem;
  height: 0.9rem;
  z-index: 0;
  /*z-index: 2; /* we want to select the input even if we click on the down arrow -> corrected via javascript*/
}
.dropdown-form-label::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--sc-surface-background);
  z-index: -1;
}

.dropdown-form-dropdownContainer {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  max-height: 40vh; /* to prevent long lists to be too long*/
  overflow-y: auto;
  width: 100%;
  z-index: 1;
}
.dropdown-form-dropdownContainer.bottom-right {
  right: 0;
  top: 100%;
}
.dropdown-form-dropdownContainer:hover {
  cursor: pointer;
}

.dropdown-line-item {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style-type: none;
}
.dropdown-line-item:hover {
  cursor: pointer;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

.settingsCard .settingsCard--row {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  display: flex;
  gap: 1rem;
  border: 1px solid var(--sc-primary-light-background);
}
.settingsCard .settingsCard--row:first-child {
  border-radius: 1rem 1rem 0 0;
}
.settingsCard .settingsCard--row:last-child {
  border-radius: 0 0 1rem 1rem;
}
.settingsCard .settingsCard--row .settingsCard--title {
  width: 18rem;
  font-weight: bold;
}
.settingsCard .settingsCard--row .settingsCard--details {
  flex: 1;
}
.settingsCard .settingsCard--lastRow {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  padding: 1rem;
  border-radius: 0 0 1rem 1rem;
  border: 1px solid var(--sc-primary-light-background);
}

.dgEmptyState {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dgEmptyState .dgEmptyState__div {
  width: 100%;
  text-align: center;
}
.dgEmptyState .dgEmptyState__div.dgEmptyState__title {
  font-size: 1.6rem;
  margin-top: 1.5rem;
}
.dgEmptyState .dgEmptyState__div.dgEmptyState__description {
  font-size: 1rem;
  margin-top: 1rem;
}
.dgEmptyState .dgEmptyState__div.dgEmptyState__description p {
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.dgEmptyState .dgEmptyState__icon {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  color: var(--sc-primary-light-background);
}
.dgEmptyState .dgEmptyState__icon.normal {
  font-size: 6rem;
}
.dgEmptyState .dgEmptyState__icon.large {
  font-size: 16rem;
}
.dgEmptyState .dgEmptyState__icon:first-child {
  margin-top: 0;
}
.dgEmptyState .dgEmptyState__image {
  margin-top: 1rem;
  width: auto;
  margin: 0 auto;
}
.dgEmptyState .dgEmptyState__image.normal {
  height: 8rem;
}
.dgEmptyState .dgEmptyState__image.large {
  height: 16rem;
}
.dgEmptyState .dgEmptyState__buttonContainer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.dgEmptyState--loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.dgEmptyState--loader--circle {
  border: 2px solid transparent;
  border-top-color: var(--sc-primary-background);
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  animation: 1s spin infinite linear;
}
.dgEmptyState--loader--text {
  line-height: 2rem;
  font-size: 1.5rem;
}

.big--emptystate {
  width: 100%;
  height: calc(100vh - 4rem - 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dgLoadingFiller--container {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4666666667);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}
.dgLoadingFiller--container .dgLoadingFiller--spinner {
  height: 2rem;
  width: 2rem;
  border: 4px solid transparent;
  border-top: 4px solid white;
  border-radius: 2rem;
  animation: spin 1s linear infinite;
}
.dgLoadingFiller--container .dgLoadingFiller--text {
  font-size: 1.6rem;
  color: white;
}

.dgFunnelContainer {
  background-color: var(--sc-surface-background);
  border-radius: 1rem;
  border: 1px solid var(--sc-primary-light-background);
  padding: 1rem;
}

.dgFunnel--titleRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  flex-wrap: wrap;
}
.dgFunnel--titleRow--title {
  font-size: 2rem;
  font-weight: bold;
}
.dgFunnel--titleRow--completionRate {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}

.dgFunnel--funnelContainer {
  display: flex;
  flex-direction: row;
  margin-top: var(--margin-5);
}
.dgFunnel--funnelContainer--columnTitle {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sc-grey-600);
}
.dgFunnel--funnelContainer--columnValue {
  font-size: 2rem;
  font-weight: bold;
  color: var(--sc-grey-700);
}
.dgFunnel--funnelContainer--columnThumbContainer {
  display: flex;
  flex-direction: column;
  height: 15rem;
  margin-top: var(--margin-6);
}
.dgFunnel--funnelContainer .cuteVerticalSeparator {
  height: 100%;
  width: 2px;
  background-color: var(--sc-grey-300);
  position: absolute;
  left: -1px;
  top: 0;
  opacity: 0.5;
}
.dgFunnel--funnelContainer .cuteStatsContainer {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.dgFunnelVertical--funnelContainer {
  display: flex;
  flex-direction: column;
  margin-top: var(--margin-5);
}
.dgFunnelVertical--funnelContainer--columnTitle {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sc-grey-600);
}
.dgFunnelVertical--funnelContainer--columnValue {
  font-size: 2rem;
  font-weight: bold;
  color: var(--sc-grey-700);
}
.dgFunnelVertical--funnelContainer--columnThumbContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 5rem;
  flex: 1;
}
.dgFunnelVertical--funnelContainer--columnThumb {
  background-color: var(--sc-primary-background);
  height: 5rem;
}
.dgFunnelVertical--funnelContainer .cuteHorizontalSeparator {
  width: 100%;
  height: 2px;
  background-color: var(--sc-grey-300);
  position: absolute;
  left: -1px;
  top: 0;
  opacity: 0.5;
}
.dgFunnelVertical--funnelContainer .cuteStatsContainer {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.range-slider-container {
  display: flex;
  width: 450px;
  margin: auto;
}

.range-slider {
  width: 300px;
  margin-top: 1.4em;
  margin-bottom: 0.8em;
}

.range-slider input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}

input[type=number] {
  border: 0;
  font-size: 1em;
  -moz-appearance: textfield;
}

input[type=number]:focus {
  outline: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number]:invalid,
input[type=number]:out-of-range {
  border: 2px solid #ff6347;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-lower {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-upper {
  background: #2497e3;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #2497e3;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}

input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #2497e3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

.gm-addButton {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: 0.3s all;
  min-height: 5rem;
}
.gm-addButton > div {
  font-weight: bold;
}
.gm-addButton:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm-addButton::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}

.addAchievement--preview {
  display: flex;
  gap: 0.5rem;
  background: var(--sc-surface-background);
  border-radius: 4px;
}
.addAchievement--preview .ap--image {
  height: 5rem;
  width: 5rem;
}
.addAchievement--preview .ap--rightSide {
  padding: 0.5rem;
}
.addAchievement--preview .ap--rightSide .apr--title {
  font-size: 1.2rem;
}
.addAchievement--preview .ap--rightSide .apr--description {
  opacity: 0.9;
}

.qna-component {
  margin-top: 2rem;
  border-radius: 0 0 1rem 0;
  overflow: hidden;
  border: 1px solid var(--sc-primary-light-background);
  border-left: none;
}
.qna-component div {
  padding: 2rem;
  padding-left: 8rem;
}
.qna-component div::before {
  display: block;
  box-sizing: border-box;
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 8rem;
  padding: 0 2rem;
  text-align: center;
  font-size: 3rem;
  line-height: 3rem;
  height: 3rem;
}
.qna-component .qna-component--question {
  font-size: 1.5rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-left: 4px solid var(--sc-primary-background);
}
.qna-component .qna-component--question::before {
  content: "Q.";
}
.qna-component .qna-component--answer {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-left: 4px solid var(--sc-secondary-light-background);
  min-height: 5.5rem;
}
.qna-component .qna-component--answer::before {
  content: "A.";
}
.qna-component a::before {
  margin-right: 0.5rem;
}

.InfoHeaderContainer {
  display: flex;
  justify-content: space-between;
}
.InfoHeaderContainer .InfoHeader--title {
  font-size: 2rem;
  line-height: 2rem;
}
.InfoHeaderContainer .InfoHeader--info {
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
  border-radius: 4px;
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}

.dg-profilepic {
  color: var(--sc-primary-background);
  background: var(--sc-primary-foreground);
  border: 1px solid var(--sc-primary-light-background);
}

.dg-profilepic--fontAwesome {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}

.illustrationimage--animation {
  animation-fill-mode: both;
  animation-duration: 300ms;
  background-color: black;
  color: white;
}
.illustrationimage--animation-enter-active {
  animation-name: flipInX;
}
.illustrationimage--animation-leave-active {
  animation-name: flipOutX;
}

.illustrationimage--locked {
  text-align: center;
  height: 100%;
  width: 100%;
  min-height: 10rem;
  min-width: 10rem;
  padding: 5rem;
}
.illustrationimage--locked::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  font-size: 5rem;
  line-height: 10rem;
  height: 10rem;
  width: 10rem;
}

.illustrationimage--imageStack {
  min-height: 5rem;
}
.illustrationimage--imageStack img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.illustrationimage--imageStack img:first-child {
  position: relative;
}

.avatarSquarePic--container {
  overflow: hidden;
  position: relative;
}
.avatarSquarePic--container .avatarSquarePic--image {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
}

.avatarPic--non-canvas-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 2rem;
  width: 100%;
  height: auto;
}

.dashboard--loader-container {
  position: relative;
}
.dashboard--loader-container::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: var(--sc-primary-background);
  opacity: 0.1;
}
.dashboard--loader-container .dashboard--loading-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  animation: spin 1s linear infinite;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: 0 4px 0 0 var(--sc-primary-background);
  box-sizing: content-box;
}
.dashboard--loader-container .dashboard--loading-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  top: calc(50% + 80px + 2rem);
  width: 100%;
  text-align: center;
}

.highestInfinity {
  margin: 0;
  position: relative;
  color: black;
  border-radius: 3rem;
  padding: 0.6rem 1.2rem;
  box-shadow: var(--std-box-shadow);
  color: var(--sc-secondary-light-foreground);
  background-color: var(--sc-secondary-light-background);
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  height: 4rem;
  /* flex: 1; */
  /* display: grid;
  grid-template-columns: 1fr fit-content(3rem);
  grid-template-areas:
  "number icon"
  "text icon" */
  /* Number + image */
}
.highestInfinity:hover {
  cursor: pointer;
}
.highestInfinity > img {
  height: 3rem;
  width: 3rem;
}
.highestInfinity > .home-stat-number {
  text-align: left;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 350;
  margin-right: 0.6rem;
}

#draggable-container {
  position: fixed;
  display: none;
  z-index: 1;
}

#draggable-header:hover {
  cursor: move;
}

#draggable-header {
  z-index: 2;
  padding: 0.5rem 1rem;
  border-radius: 1rem 1rem 0 0;
  background: black;
  color: white;
}

/*
	CSS DOCUMENT
	PROPERTY OF DULCET GAMES INC.

	March 7, 2018
*/
/* ! Ilustrations */
#js-series--illustrations-container.horizontal > div {
  width: 70vw;
  height: fit-content;
  height: -moz-fit-content;
}

#js-series--illustrations-container.vertical > div {
  height: 90vh;
  width: fit-content;
  width: -moz-fit-content;
}

#js-series--illustrations-container > div {
  width: 95vw;
  height: 95vh;
  display: flex;
  max-width: unset;
  max-height: unset;
}

#js-series--illustrations-container.horizontal > div > #js-series--illustrations-list {
  width: 100%;
  height: fit-content;
  height: -moz-fit-content;
}

#js-series--illustrations-container.vertical > div > #js-series--illustrations-list {
  width: fit-content;
  width: -moz-fit-content;
  height: calc(100% - 8vw); /* to account for the menus */
}

#js-series--illustrations-list {
  display: flex;
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  background-color: var(--sc-primary-background);
}

.ef--footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}

.js-illustration-canvas.vertical {
  height: 100%;
  width: auto;
}

.js-illustration-canvas.horizontal {
  width: 100%;
  height: auto;
}

.js-illustration-canvas.visible {
  display: block;
}

.js-illustration-canvas {
  height: 100%;
  display: none;
  /* position: absolute;
  left: -10vw;
  top: -10vw;
  right: -10vw;
  bottom: -10vw;
  margin: auto; */
}

.series--title-container {
  display: flex;
  width: 100%;
  background: var(--sc-primary-background);
}

.series--title {
  color: white;
  padding: 0;
  flex: 1;
  font-size: 2rem;
  line-height: 4rem;
  text-align: center;
}

#js-series--illustration-counter {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.6rem;
  color: white;
  text-align: center;
}

/* ! Achievements */
#js-series--achievements-container > div {
  width: 600px;
  max-height: 60vh;
  overflow: visible;
}

#js-series--achievements-list {
  max-height: calc(60vh - 4rem);
  overflow: auto;
  padding: 1rem;
}

.js-achievement-line {
  position: relative;
  display: flex;
  color: var(--sc-surface-foreground);
  background-color: var(--sc-surface-background);
  height: fit-content;
  height: -moz-fit-content;
  border-radius: 10px;
  box-shadow: var(--std-box-shadow);
  margin: 10px;
}

.achievement-title {
  font-size: 2rem;
  line-height: 2rem;
}

.achievement-description {
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-top: 0.5rem;
  flex: 1;
}

.achievement-icon > img,
.achievement-icon {
  height: 6rem;
  width: auto;
  margin: auto 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.lock-image {
  height: 6rem;
  width: auto;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* ! Lore */
.js-lore-button:hover {
  transform: scale(1.3);
  cursor: pointer;
}

.js-lore-button {
  height: 2.5rem;
  width: 2.5rem;
  font-size: 2.5rem;
  line-height: 2.5rem;
  margin: 0.75rem !important;
  color: var(--sc-primary-foreground);
  transition: 0.3s all;
  z-index: 1;
}

#js-lore--counter {
  height: 2.5rem;
  font-size: 2rem;
  line-height: 2.5rem;
  margin: 0.75rem;
  color: var(--sc-primary-foreground);
  transition: 0.3s all;
}

.dg-post {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  margin: 0 auto;
}
.dg-post .post--ProfilePic {
  transition: 0.3s all;
  border-radius: 3rem;
}
.dg-post .post--ProfilePic:hover {
  box-shadow: var(--std-box-shadow);
}
.dg-post .post--body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dg-post .post--body p {
  margin: 0;
}
.dg-post .post--body .post--username {
  width: fit-content;
  width: -moz-fit-content;
  font-weight: bold;
}
.dg-post .post--body .post--spoiler--toggle {
  background-color: transparent;
  color: var(--sc-primary-background);
  margin-top: 0.5rem;
  border-radius: 0.6rem;
  text-align: center;
  transition: 0.3s all;
  padding: 2rem 1rem;
}
.dg-post .post--body .post--spoiler--toggle:hover {
  cursor: pointer;
}
.dg-post .post--body .post--spoiler--toggle::before {
  content: " ";
  position: absolute;
  border-radius: 0.6rem;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-primary-background);
  opacity: 0.1;
}
.dg-post .post--body .post--text {
  margin-top: 0.5rem;
  padding-right: 2rem;
}
.dg-post .post--body .post--images--container {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.dg-post .post--body .post--images--container .post--image {
  height: 100px;
  border-radius: 0.5rem;
  transition: 0.3s box-shadow;
}
.dg-post .post--body .post--images--container .post--image:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.dg-post .post--body .post--commentsLine {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.dg-post .post--body .post--commentsLine .clickable:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
}
.dg-post .post--body .post--commentsLine .clickable .likedByUser {
  color: var(--sc-secondary-background);
}
.dg-post .post--body .post--commentsLine i {
  line-height: 1.3rem;
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
}
.dg-post .post--body .post--viewComments {
  color: var(--sc-primary-background);
  font-size: 0.8rem;
}
.dg-post .post--body .post--viewComments:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
}
.dg-post .post--body .post--viewComments i {
  line-height: 1.3rem;
  font-size: 1rem;
  margin-right: 0.5rem;
}

.post--commentsModal--footer {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding-bottom: 1.35rem;
  justify-content: space-around;
}

.dg-post--updateBubble {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  font-size: 0.8rem;
  line-height: 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1.5rem;
  height: 1.5rem;
  width: fit-content;
  width: -moz-fit-content;
}
.dg-post--updateBubble i {
  font-size: 0.8rem;
  line-height: 1rem;
}

.post--threedotsMenu--container {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: -2rem;
  min-width: 350px;
  border-radius: 1rem;
  box-shadow: var(--heavy-box-shadow);
  padding: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  z-index: 1;
}
.post--threedotsMenu--container::before {
  content: " ";
  position: absolute;
  top: -0.9rem;
  right: 2rem;
  border: 0.5rem solid transparent;
  border-bottom-color: var(--sc-surface-background);
}
.post--threedotsMenu--container .post--threedotsmenu--item {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: 0.3s all;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: inherit;
}
.post--threedotsMenu--container .post--threedotsmenu--item:hover {
  cursor: pointer;
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
}
.post--threedotsMenu--container .post--threedotsmenu--item .post--threedotsmenu--item--icon {
  width: 2rem;
  text-align: center;
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
  border-radius: 2rem;
}
.post--threedotsMenu--container .post--threedotsmenu--item div {
  font-size: 1rem;
  line-height: 1rem;
  height: 2rem;
  padding: 0.5rem;
}
.post--threedotsMenu--container .post--threedotsmenu--item .post--threedotsmenu--item--text {
  flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dg-review--container {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
}
.dg-review--container .review--ProfilePic {
  width: 6rem;
  height: 6rem;
  border-radius: 3rem;
  transition: 0.3s all;
  border: 1px solid var(--sc-primary-light-background);
}
.dg-review--container .review--ProfilePic:hover {
  box-shadow: var(--std-box-shadow);
}
.dg-review--container .review--ProfilePic.dg-profilepic--fontAwesome {
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  font-size: 6rem;
  text-align: center;
  background-color: var(--sc-primary-foreground);
  color: var(--sc-primary-background);
}
.dg-review--container .review--body {
  flex: 1;
}
.dg-review--container .review--body.withBottomBorderAndPadding {
  border-bottom: 2px solid var(--sc-primary-transparent-10);
  padding-bottom: 2rem;
}
.dg-review--container .review--body p {
  margin: 0;
}
.dg-review--container .review--body .review--username {
  width: fit-content;
  width: -moz-fit-content;
  font-weight: bold;
}
.dg-review--container .review--body .review--rating {
  margin-top: 0.5rem;
}
.dg-review--container .review--body .review--text {
  margin-top: 0.5rem;
  padding-right: 2rem;
}
.dg-review--container .review--body .review--commentsLine {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.dg-review--container .review--body .review--commentsLine .clickable:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
}
.dg-review--container .review--body .review--commentsLine .clickable .likedByUser {
  color: var(--sc-secondary-background);
}
.dg-review--container .review--body .review--commentsLine i {
  line-height: 1.3rem;
  font-size: 1rem;
}
.dg-review--container .review--body .review--viewComments {
  color: var(--sc-primary-background);
  font-size: 0.8rem;
  margin-bottom: 2rem;
}
.dg-review--container .review--body .review--viewComments:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
}
.dg-review--container .review--body .review--viewComments i {
  line-height: 1.3rem;
  font-size: 1rem;
  margin-right: 0.5rem;
}

.review--reply--container .review--reply--fancyArrow {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-bottom: 2px solid var(--sc-foreground);
  border-left: 2px solid var(--sc-foreground);
  border-bottom-left-radius: 0.2rem;
}
.review--reply--container .review--reply--fancyArrow::after {
  content: "";
  position: absolute;
  bottom: calc(-2px - 0.25rem);
  left: calc(100% - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid var(--sc-foreground);
  border-right: 2px solid var(--sc-foreground);
  border-bottom-right-radius: 0.2rem;
  transform: rotate(-45deg);
}
.review--reply--container .review--reply--quill {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-left: 2.5rem;
}

.recursive-review {
  background-color: var(--sc-background);
  color: var(--sc-foreground);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 0.6rem;
  margin-top: 0;
}

.review--commentsModal--footer {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding-bottom: 1.35rem;
  justify-content: space-around;
}

.seriesStatusComponent {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
}
.seriesStatusComponent.clickable:hover {
  cursor: pointer;
}
.seriesStatusComponent.DRAFT {
  background-color: hsl(47, 89%, 90%) !important;
}
.seriesStatusComponent.STORY_PITCH {
  background-color: hsl(29, 89%, 90%) !important;
}
.seriesStatusComponent.WORK_IN_PROGRESS {
  background-color: hsl(315, 89%, 90%) !important;
}
.seriesStatusComponent.DEMO {
  background-color: hsl(271, 89%, 90%) !important;
}
.seriesStatusComponent.ONGOING {
  background-color: hsl(191, 89%, 90%) !important;
}
.seriesStatusComponent.COMPLETE {
  background-color: hsl(110, 89%, 90%) !important;
}
.seriesStatusComponent.INACTIVE {
  background-color: hsl(47, 89%, 90%) !important;
}
.seriesStatusComponent.HIATUS {
  background-color: hsl(47, 89%, 90%) !important;
}
.seriesStatusComponent.CANCELLED {
  background-color: hsl(0, 89%, 90%) !important;
}
.seriesStatusComponent i {
  margin: 0 !important;
  font-size: 1rem;
  line-height: 1.3rem;
}
.seriesStatusComponent .seriesStatusComponent--text {
  font-size: 1rem;
  line-height: 1.3rem;
}

.seriesStatusComponentBadge.clickable:hover {
  cursor: pointer;
}
.seriesStatusComponentBadge.DRAFT {
  background-color: hsl(47, 89%, 90%) !important;
}
.seriesStatusComponentBadge.STORY_PITCH {
  background-color: hsl(29, 89%, 90%) !important;
}
.seriesStatusComponentBadge.WORK_IN_PROGRESS {
  background-color: hsl(315, 89%, 90%) !important;
}
.seriesStatusComponentBadge.DEMO {
  background-color: hsl(271, 89%, 90%) !important;
}
.seriesStatusComponentBadge.ONGOING {
  background-color: hsl(191, 89%, 90%) !important;
}
.seriesStatusComponentBadge.COMPLETE {
  background-color: hsl(110, 89%, 90%) !important;
}
.seriesStatusComponentBadge.INACTIVE {
  background-color: hsl(47, 89%, 90%) !important;
}
.seriesStatusComponentBadge.HIATUS {
  background-color: hsl(47, 89%, 90%) !important;
}
.seriesStatusComponentBadge.CANCELLED {
  background-color: hsl(0, 89%, 90%) !important;
}

.dg-comment--container {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0 1rem;
}
.dg-comment--container .comment--ProfilePic {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 2rem;
  border-radius: 2rem;
  transition: 0.3s all;
}
.dg-comment--container .comment--ProfilePic:hover {
  box-shadow: var(--std-box-shadow);
}
.dg-comment--container .comment--body {
  flex: 1;
  border-bottom: 2px solid var(--sc-primary-transparent-10);
  padding-bottom: 2rem;
}
.dg-comment--container .comment--text {
  margin-top: 0.5rem;
  padding-right: 2rem;
}
.dg-comment--container .comment--commentsLine {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.dg-comment--container .comment--commentsLine .comment--clickableElement:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
}
.dg-comment--container .comment--commentsLine .comment--clickableElement .likedByUser {
  color: var(--sc-secondary-background);
}
.dg-comment--container .comment--commentsLine i {
  line-height: 1.3rem;
  font-size: 1rem;
}

.dgDialogContainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  animation-fill-mode: both;
  animation-duration: 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dgDialogContainer .dgDialog {
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  padding: 2rem;
  width: min(30rem, 100% - 2rem);
}
.dgDialogContainer .dgDialog .dgDialog--image {
  margin-bottom: 2rem;
  width: 100%;
  height: auto;
}
.dgDialogContainer .dgDialog .dgDialog--icon {
  width: 100%;
  text-align: center;
  font-size: 6rem;
  margin-bottom: 0.5rem;
  color: var(--sc-primary-light-background);
}
.dgDialogContainer .dgDialog .dgDialog--title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.dgDialogContainer .dgDialog .dgDialog--buttonsLine {
  display: flex;
  margin-top: 0.5rem;
  justify-content: center;
}
.dgDialogContainer .dgDialog .dgDialog--buttonsLine.noSpacing {
  gap: 0.5rem;
}
.dgDialogContainer .dgDialog .dgDialog--buttonsLine.containsSpacing {
  justify-content: space-between;
}
.dgDialogContainer .dgDialog .dgDialog--buttonsLine .dgDialog--buttonsGroup {
  justify-content: center;
  display: flex;
  gap: 0.5rem;
}
.dgDialogContainer .dgDialog .dgDialog--buttonsLine .dgDialog--button {
  flex: 1;
  width: auto;
}

.post--newPost {
  border: 2px solid var(--sc-primary-background);
  background-color: transparent;
  color: var(--sc-primary-background);
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  border-radius: 0.6rem;
  transition: 0.3s box-shadow;
  padding: 0.5rem;
}
.post--newPost > div {
  line-height: 2.3rem;
  transition: 0.3s all;
}
.post--newPost:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.post--newPost:hover div {
  font-weight: bold;
}
.post--newPost::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-primary-background);
  opacity: 0.1;
}

#login-signup--modal-parent {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 5; /* the header is 4 */
  background-color: rgba(0, 0, 0, 0.7); /* same as opacity: 0.7; */
}

#login-signup--modal {
  display: flex;
  max-width: min(1400px, 100vw - 2rem);
  width: 90vw;
  height: 80vh;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  border-radius: 10px;
  z-index: 100;
}

#login-signup--mosaic {
  flex: 4;
  height: 100%;
  padding: 0;
  background-color: var(--sc-header-background);
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
  background: url("/assets/components/SE_THUMBNAIL2.png");
  background-position: 50%;
  background-size: cover;
  transition: 0.3s all;
  filter: brightness(1.5);
}
#login-signup--mosaic.signup::after {
  background-color: var(--sc-primary-background);
}
#login-signup--mosaic::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: var(--sc-secondary-background);
  opacity: 0.5;
  transition: 0.3s all;
}

#login-signup--container {
  flex: 6;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--sc-background);
  color: var(--sc-foreground);
  border-radius: 0 1rem 1rem 0;
}
#login-signup--container .login-signup--container--form {
  padding: 4rem 6rem;
  padding-bottom: 0;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
@media only screen and (max-width: 651px) {
  #login-signup--container .login-signup--container--form {
    padding: 4rem 0;
  }
}
#login-signup--container .login-signup--container--form .login-signup--container--form--input {
  margin: 0;
  margin-top: 2rem;
  width: 100%;
  min-width: 300px;
}
#login-signup--container .login-signup--container--form .login-signup--container--form--forgotpassword {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 1rem;
  font-size: 0.9rem;
}
#login-signup--container .login-signup--container--form .login-signup--container--form--forgotpassword * {
  font-size: 0.9rem;
}
#login-signup--container .login-signup--container--form--submit {
  margin: 2rem auto;
  margin-bottom: 4rem;
}
#login-signup--container .login-signup--container--form .alert {
  margin: 1rem 0 0 0;
}

#login-signup--container--menu {
  display: flex;
  width: calc(100% - 2*6rem);
  transition: 0.3s all;
  border-bottom: 2px solid var(--sc-primary-light-background);
  margin: 0 6rem;
  margin-top: 4rem;
}
#login-signup--container--menu div {
  flex: 1;
  padding: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  height: 4rem;
  text-align: center;
  opacity: 0.5;
}
#login-signup--container--menu div:hover {
  cursor: pointer;
  opacity: 0.8;
}
#login-signup--container--menu div.selected {
  opacity: 1;
}
#login-signup--container--menu div.selected::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto;
  height: 2px;
  width: 100%;
  background: var(--sc-primary-background);
}

#login-signup--back-button {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

/*

    Mobile behaviour

*/
@media only screen and (max-width: 1300px) {
  #login-signup--mosaic {
    flex: 5;
  }
  #login-signup--container {
    flex: 5;
  }
}
@media only screen and (max-width: 715px) {
  #login-signup--mosaic {
    display: none;
  }
  #login-signup--modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
  #login-signup--back-button {
    top: 1rem;
    left: 1rem;
  }
  #login-signup--container {
    padding: 0;
    border-radius: 0;
  }
  #login-signup--container .login-signup--container--form {
    display: flex;
    padding: 2rem 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #login-signup--container .login-signup--container--form--submit {
    margin: 0 !important;
    width: 100%;
  }
  #login-signup--container--menu {
    margin-top: 3rem;
  }
}
/* ! Progress Bar (on chapters.php)*/
#current-chapter__progressBarContainer {
  height: 3.6rem;
  flex: 2;
  position: relative;
  padding: 0.8rem 0; /*text is 2rem*/
  margin: 0;
  margin-left: 2rem; /* pour le logo */
  left: 0;
  bottom: 0;
  border-radius: 0 1rem 1rem 0;
}

#current-chapter__progressBarLogo {
  position: absolute;
  z-index: 1;
  top: -1rem;
  left: -2.5rem;
  margin: 0;
  transform: none !important;
}

#js-current-chapter__progressBar--earliest.visible {
  display: block;
}

#js-current-chapter__progressBar--earliest {
  /* content: ' '; */
  display: none;
  position: absolute;
  border-right: 2px solid var(--sc-primary-background);
  /* background-color: var(--sc-primary-background); */
  margin: 0;
  height: var(--current-chapter__progressBar-height);
  /* width: 2px; */
  /* border: calc(0.5 * var(--current-chapter__progressBar-height)) solid transparent;
  border-bottom: calc(0.5 * var(--current-chapter__progressBar-height)) solid var(--sc-primary-background); */
  z-index: 0;
}

#js-current-chapter__progressBar--latest {
  position: relative;
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
  text-align: right;
  font-size: 1.2rem;
  line-height: 2rem;
  height: 2rem;
  min-width: 5rem !important;
  padding-right: 1rem;
  margin-left: 0;
  border-radius: 0 1rem 1rem 0;
}

/* ! Progress Bar (on series.php)*/
.progressBarContainer {
  height: 2.5rem;
  width: calc(100% - 0.5rem);
  position: absolute;
  bottom: -1vw;
  left: 0;
  padding: 0;
  margin-left: 1rem;
  border-radius: 0 2.5rem 2.5rem 0;
}

.chapter--progressBarLogo {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-50%, -42%, 0);
  width: 5rem;
  height: 5rem;
  margin: 0;
  z-index: 1;
}

.not-started .series--thumbnail__leftSide {
  filter: grayscale(100%);
}

.progressBarContainer.not-started {
  filter: grayscale(100%);
}

/* .progressBarContainer.not-started .js-current-chapter__progressBar--latest {background-color: black} */
.progressBarContainer.start-screen .js-current-chapter__progressBar--latest {
  background-color: var(--sc-primary-background);
}

/* .progressBarContainer.barely-started .js-current-chapter__progressBar--latest {background-color: var(--sc-success-background)} */
.progressBarContainer.completed .js-current-chapter__progressBar--latest {
  background-color: var(--sc-success-background);
}

.progressBarContainer.score-screen .js-current-chapter__progressBar--latest {
  background-color: var(--sc-primary-background);
}

.js-current-chapter__progressBar--latest {
  position: relative;
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
  text-align: right;
  font-weight: 400;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1.2rem;
  margin: 0.5rem auto 0.5rem 0;
  padding: 0 1rem 0 5vw;
  min-width: 9vw;
  border-radius: 0 2.5rem 2.5rem 0;
}

.post--writingPost--container {
  width: min(40rem, 90vw);
  height: -moz-min-content;
  height: min-content;
  max-height: min(60rem, 90vh);
}
.post--writingPost--container .dg-modal--body {
  padding: 1rem;
  padding-bottom: 0;
}
.post--writingPost--container .post--writingPost--username {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.post--writingPost--container .post--writingPost--body {
  flex: 1;
}
.post--writingPost--container .post--writingPost--body .post--writingPost--body--quill {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  margin-top: 1rem;
}
.post--writingPost--container .post--writingPost--body .post--writingPost--body--quill .ql-container {
  border: none;
}
.post--writingPost--container .post--writingPost--body .post--writingPost--body--quill .ql-editor {
  min-height: 10rem;
}
.post--writingPost--container .post--writingPost--body .post--spoilerToggle {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
}
.post--writingPost--container .postModalTitle {
  font-weight: bold;
  font-size: 1rem;
}
.post--writingPost--container .postModal--imagesContainer {
  margin-top: 0.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--newImage {
  height: 100px;
  min-width: 100px;
  width: -moz-min-content;
  width: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--sc-primary-light-background);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: 0.3s box-shadow;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--newImage i, .post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--newImage div {
  color: var(--sc-primary-background);
  white-space: nowrap;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--newImage:hover {
  box-shadow: var(--heavy-box-shadow);
  cursor: pointer;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image {
  height: 100px;
  width: fit-content;
  width: -moz-fit-content;
  transition: 0.3s box-shadow;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image img {
  height: 100px;
  width: auto;
  border-radius: 0.5rem;
  transition: 0.3s filter;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image.toBeDeleted img {
  filter: brightness(0.4);
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image .postModal--imagesContainer--image--tag {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  padding: 2px 4px;
  text-align: center;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image .postModal--imagesContainer--image--tag.new {
  color: var(--sc-success-foreground);
  background-color: var(--sc-success-background);
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image .postModal--imagesContainer--image--tag.deleted {
  color: var(--sc-danger-foreground);
  background-color: var(--sc-danger-background);
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image .postModal--imagesContainer--image--deleteButton {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image:hover .postModal--imagesContainer--image--deleteButton {
  display: block;
}
.post--writingPost--container .postModal--imagesContainer .postModal--imagesContainer--image:hover img {
  filter: brightness(0.4);
}

.uploadFilesModal {
  width: min(60rem, 90vw);
  height: min(40rem, 90vh);
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
}

.imagesModal {
  width: fit-content;
  width: -moz-fit-content;
  height: -moz-min-content;
  height: min-content;
  padding: 2rem;
  background-color: transparent;
  box-shadow: none;
}
.imagesModal img.imagesModal--image.square, .imagesModal img.imagesModal--image.vertical, .imagesModal img.imagesModal--image.horizontal {
  height: 80vh;
  width: auto;
}
.imagesModal .imagesModal--counter {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.3rem;
  border-radius: 1rem;
  width: fit-content;
  width: -moz-fit-content;
  height: 2.3rem;
  margin: 0 auto;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2rem;
}
.imagesModal .imagesModal--button {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: 0.3s all;
}

.seriesStatusChart {
  display: flex;
  height: calc(2rem * 2);
  margin: 4rem 0;
  padding-left: 1rem;
}
.seriesStatusChart--statusBox {
  flex: 1;
  height: calc(2rem * 2);
}
.seriesStatusChart--statusBox:last-child .pinContainer {
  display: none;
}
.seriesStatusChart--statusBox.DRAFT:last-child .aboveSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.DRAFT:last-child .belowSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.DRAFT.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.DRAFT.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.DRAFT .pinContainer {
  background-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--statusBox.DRAFT .pinContainer .pinIcon {
  color: hsl(47, 89%, 40%);
}
.seriesStatusChart--statusBox.STORY_PITCH:last-child .aboveSection {
  border-left: 2px dashed hsl(29, 89%, 80%);
}
.seriesStatusChart--statusBox.STORY_PITCH:last-child .belowSection {
  border-left: 2px dashed hsl(29, 89%, 80%);
}
.seriesStatusChart--statusBox.STORY_PITCH.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(29, 89%, 80%);
}
.seriesStatusChart--statusBox.STORY_PITCH.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(29, 89%, 80%);
}
.seriesStatusChart--statusBox.STORY_PITCH .pinContainer {
  background-color: hsl(29, 89%, 90%);
}
.seriesStatusChart--statusBox.STORY_PITCH .pinContainer .pinIcon {
  color: hsl(29, 89%, 40%);
}
.seriesStatusChart--statusBox.WORK_IN_PROGRESS:last-child .aboveSection {
  border-left: 2px dashed hsl(315, 89%, 80%);
}
.seriesStatusChart--statusBox.WORK_IN_PROGRESS:last-child .belowSection {
  border-left: 2px dashed hsl(315, 89%, 80%);
}
.seriesStatusChart--statusBox.WORK_IN_PROGRESS.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(315, 89%, 80%);
}
.seriesStatusChart--statusBox.WORK_IN_PROGRESS.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(315, 89%, 80%);
}
.seriesStatusChart--statusBox.WORK_IN_PROGRESS .pinContainer {
  background-color: hsl(315, 89%, 90%);
}
.seriesStatusChart--statusBox.WORK_IN_PROGRESS .pinContainer .pinIcon {
  color: hsl(315, 89%, 40%);
}
.seriesStatusChart--statusBox.DEMO:last-child .aboveSection {
  border-left: 2px dashed hsl(271, 89%, 80%);
}
.seriesStatusChart--statusBox.DEMO:last-child .belowSection {
  border-left: 2px dashed hsl(271, 89%, 80%);
}
.seriesStatusChart--statusBox.DEMO.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(271, 89%, 80%);
}
.seriesStatusChart--statusBox.DEMO.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(271, 89%, 80%);
}
.seriesStatusChart--statusBox.DEMO .pinContainer {
  background-color: hsl(271, 89%, 90%);
}
.seriesStatusChart--statusBox.DEMO .pinContainer .pinIcon {
  color: hsl(271, 89%, 40%);
}
.seriesStatusChart--statusBox.ONGOING:last-child .aboveSection {
  border-left: 2px dashed hsl(191, 89%, 80%);
}
.seriesStatusChart--statusBox.ONGOING:last-child .belowSection {
  border-left: 2px dashed hsl(191, 89%, 80%);
}
.seriesStatusChart--statusBox.ONGOING.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(191, 89%, 80%);
}
.seriesStatusChart--statusBox.ONGOING.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(191, 89%, 80%);
}
.seriesStatusChart--statusBox.ONGOING .pinContainer {
  background-color: hsl(191, 89%, 90%);
}
.seriesStatusChart--statusBox.ONGOING .pinContainer .pinIcon {
  color: hsl(191, 89%, 40%);
}
.seriesStatusChart--statusBox.COMPLETE:last-child .aboveSection {
  border-left: 2px dashed hsl(110, 89%, 80%);
}
.seriesStatusChart--statusBox.COMPLETE:last-child .belowSection {
  border-left: 2px dashed hsl(110, 89%, 80%);
}
.seriesStatusChart--statusBox.COMPLETE.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(110, 89%, 80%);
}
.seriesStatusChart--statusBox.COMPLETE.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(110, 89%, 80%);
}
.seriesStatusChart--statusBox.COMPLETE .pinContainer {
  background-color: hsl(110, 89%, 90%);
}
.seriesStatusChart--statusBox.COMPLETE .pinContainer .pinIcon {
  color: hsl(110, 89%, 40%);
}
.seriesStatusChart--statusBox.INACTIVE:last-child .aboveSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.INACTIVE:last-child .belowSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.INACTIVE.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.INACTIVE.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.INACTIVE .pinContainer {
  background-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--statusBox.INACTIVE .pinContainer .pinIcon {
  color: hsl(47, 89%, 40%);
}
.seriesStatusChart--statusBox.HIATUS:last-child .aboveSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.HIATUS:last-child .belowSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.HIATUS.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.HIATUS.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(47, 89%, 80%);
}
.seriesStatusChart--statusBox.HIATUS .pinContainer {
  background-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--statusBox.HIATUS .pinContainer .pinIcon {
  color: hsl(47, 89%, 40%);
}
.seriesStatusChart--statusBox.CANCELLED:last-child .aboveSection {
  border-left: 2px dashed hsl(0, 89%, 80%);
}
.seriesStatusChart--statusBox.CANCELLED:last-child .belowSection {
  border-left: 2px dashed hsl(0, 89%, 80%);
}
.seriesStatusChart--statusBox.CANCELLED.statusAboveLine > .aboveSection {
  border-left: 2px dashed hsl(0, 89%, 80%);
}
.seriesStatusChart--statusBox.CANCELLED.statusBelowLine > .belowSection {
  border-left: 2px dashed hsl(0, 89%, 80%);
}
.seriesStatusChart--statusBox.CANCELLED .pinContainer {
  background-color: hsl(0, 89%, 90%);
}
.seriesStatusChart--statusBox.CANCELLED .pinContainer .pinIcon {
  color: hsl(0, 89%, 40%);
}
.seriesStatusChart--statusBox .pinContainer {
  position: absolute;
  left: -1rem;
  height: 2rem;
  width: 2rem;
  border-radius: 2rem;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s all;
}
.seriesStatusChart--statusBox .pinContainer .pinIcon {
  text-align: center;
  font-size: 1rem;
  line-height: 1rem;
}
.seriesStatusChart--statusBox .pinContainer .pinTextContainer {
  display: none;
  height: 4.5rem;
  padding-right: 0.5rem;
}
.seriesStatusChart--statusBox .pinContainer .pinTextContainer .pinTextContainer--title {
  font-size: 1rem;
  line-height: 2rem;
  height: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
}
.seriesStatusChart--statusBox .pinContainer .pinTextContainer .pinTextContainer--date {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  line-height: 1rem;
  height: 1rem;
  white-space: nowrap;
  opacity: 0.9;
}
.seriesStatusChart--statusBox .pinContainer:hover {
  z-index: 2;
  height: 4.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: fit-content;
  width: -moz-fit-content;
  align-items: flex-start;
  gap: 0.25rem;
}
.seriesStatusChart--statusBox .pinContainer:hover .pinIcon {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
.seriesStatusChart--statusBox .pinContainer:hover .pinTextContainer {
  display: block;
}
.seriesStatusChart--statusBox > .aboveSection {
  border-bottom: 2px solid var(--sc-primary-light-background);
}
.seriesStatusChart--statusBox > .aboveSection, .seriesStatusChart--statusBox > .belowSection {
  height: 2rem;
}
.seriesStatusChart--statusBox.statusAboveLine > .aboveSection {
  border-left: 2px dashed var(--sc-primary-light-background);
}
.seriesStatusChart--statusBox.statusAboveLine > .pinContainer {
  bottom: 100%;
}
.seriesStatusChart--statusBox.statusBelowLine > .belowSection {
  border-left: 2px dashed var(--sc-primary-light-background);
}
.seriesStatusChart--statusBox.statusBelowLine > .pinContainer {
  top: 100%;
}

.seriesStatusChart--lastItem {
  margin-left: 1rem;
  display: flex;
  align-items: center;
}
.seriesStatusChart--lastItem::before {
  content: "";
  border: 0.5rem solid transparent;
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 0;
  width: 0;
}
.seriesStatusChart--lastItem .pinContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 0.5rem;
  border-radius: 0.5rem;
}
.seriesStatusChart--lastItem .pinContainer::before {
  content: "Current status";
  position: absolute;
  top: calc(100% + 0.5rem);
  margin: 0 auto;
  text-align: center;
  font-size: 0.8rem;
  line-height: 0.8rem;
  padding: 0.5rem 1rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 1rem;
}
.seriesStatusChart--lastItem .pinContainer .pinIcon {
  width: 2.3rem;
  height: 2.3rem;
  line-height: 2.3rem;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 2.3rem;
}
.seriesStatusChart--lastItem .pinContainer .pinTextContainer--title {
  font-size: 1rem;
  line-height: 2rem;
  height: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
}
.seriesStatusChart--lastItem .pinContainer .pinTextContainer--date {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  line-height: 1rem;
  height: 1rem;
  white-space: nowrap;
  opacity: 0.9;
}
.seriesStatusChart--lastItem.DRAFT::before {
  border-right-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--lastItem.DRAFT .pinContainer {
  background-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--lastItem.DRAFT .pinContainer .pinIcon {
  background-color: hsl(47, 89%, 60%);
  color: hsl(47, 89%, 10%);
}
.seriesStatusChart--lastItem.STORY_PITCH::before {
  border-right-color: hsl(29, 89%, 90%);
}
.seriesStatusChart--lastItem.STORY_PITCH .pinContainer {
  background-color: hsl(29, 89%, 90%);
}
.seriesStatusChart--lastItem.STORY_PITCH .pinContainer .pinIcon {
  background-color: hsl(29, 89%, 60%);
  color: hsl(29, 89%, 10%);
}
.seriesStatusChart--lastItem.WORK_IN_PROGRESS::before {
  border-right-color: hsl(315, 89%, 90%);
}
.seriesStatusChart--lastItem.WORK_IN_PROGRESS .pinContainer {
  background-color: hsl(315, 89%, 90%);
}
.seriesStatusChart--lastItem.WORK_IN_PROGRESS .pinContainer .pinIcon {
  background-color: hsl(315, 89%, 60%);
  color: hsl(315, 89%, 10%);
}
.seriesStatusChart--lastItem.DEMO::before {
  border-right-color: hsl(271, 89%, 90%);
}
.seriesStatusChart--lastItem.DEMO .pinContainer {
  background-color: hsl(271, 89%, 90%);
}
.seriesStatusChart--lastItem.DEMO .pinContainer .pinIcon {
  background-color: hsl(271, 89%, 60%);
  color: hsl(271, 89%, 10%);
}
.seriesStatusChart--lastItem.ONGOING::before {
  border-right-color: hsl(191, 89%, 90%);
}
.seriesStatusChart--lastItem.ONGOING .pinContainer {
  background-color: hsl(191, 89%, 90%);
}
.seriesStatusChart--lastItem.ONGOING .pinContainer .pinIcon {
  background-color: hsl(191, 89%, 60%);
  color: hsl(191, 89%, 10%);
}
.seriesStatusChart--lastItem.COMPLETE::before {
  border-right-color: hsl(110, 89%, 90%);
}
.seriesStatusChart--lastItem.COMPLETE .pinContainer {
  background-color: hsl(110, 89%, 90%);
}
.seriesStatusChart--lastItem.COMPLETE .pinContainer .pinIcon {
  background-color: hsl(110, 89%, 60%);
  color: hsl(110, 89%, 10%);
}
.seriesStatusChart--lastItem.INACTIVE::before {
  border-right-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--lastItem.INACTIVE .pinContainer {
  background-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--lastItem.INACTIVE .pinContainer .pinIcon {
  background-color: hsl(47, 89%, 60%);
  color: hsl(47, 89%, 10%);
}
.seriesStatusChart--lastItem.HIATUS::before {
  border-right-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--lastItem.HIATUS .pinContainer {
  background-color: hsl(47, 89%, 90%);
}
.seriesStatusChart--lastItem.HIATUS .pinContainer .pinIcon {
  background-color: hsl(47, 89%, 60%);
  color: hsl(47, 89%, 10%);
}
.seriesStatusChart--lastItem.CANCELLED::before {
  border-right-color: hsl(0, 89%, 90%);
}
.seriesStatusChart--lastItem.CANCELLED .pinContainer {
  background-color: hsl(0, 89%, 90%);
}
.seriesStatusChart--lastItem.CANCELLED .pinContainer .pinIcon {
  background-color: hsl(0, 89%, 60%);
  color: hsl(0, 89%, 10%);
}

.seriesStatusInfo--mainLine {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  padding-bottom: 1rem;
}
.seriesStatusInfo--mainLine .informationLine {
  position: relative;
  display: flex;
  gap: var(--margin-2);
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: var(--margin-3);
  transition: 0.3s all;
}
.seriesStatusInfo--mainLine .informationLine i {
  height: 3rem;
  width: 3rem;
  border-radius: 2rem;
  color: black;
  text-align: center;
  font-size: 1.2rem;
  line-height: 3rem;
  transition: 0.3s all;
}
.seriesStatusInfo--mainLine .informationLine .floatingExplanation {
  width: calc(100% - 4rem);
  display: flex;
  align-items: center;
}
.seriesStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper {
  width: 100%;
}
.seriesStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper p {
  opacity: 0.9;
  font-size: 0.9rem;
}
.seriesStatusInfo--mainLine::before {
  content: "";
  height: calc(100% - 5rem);
  width: 4px;
  background-color: var(--sc-primary-light-background);
  position: absolute;
  left: calc(2.5rem - 2px);
  top: 0;
  bottom: 0;
  margin: auto 0;
}

/* ! Section 1: Stats Container */
section#home-stats-container {
  display: flex;
  gap: 1rem;
}
@media only screen and (max-width: 651px) {
  section#home-stats-container {
    display: none;
  }
}

.gameBarLink {
  position: relative;
  border-radius: 3rem;
  box-shadow: var(--std-box-shadow);
  padding: 0 0.5rem;
  box-sizing: border-box;
  color: var(--sc-header-foreground);
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  border: 2px solid transparent;
  height: 2.5rem;
  margin: 0.75rem 0;
  /* Number + image */
}
.gameBarLink:hover {
  cursor: pointer;
}
.gameBarLink > img {
  height: calc(2.5rem - 4px);
  width: calc(2.5rem - 4px);
  padding: 0.25rem;
}
.gameBarLink > .home-stat-number {
  text-align: left;
  font-size: 1.25rem;
  line-height: calc(2.5rem - 4px);
  height: calc(2.5rem - 4px);
  margin-left: 0.5rem;
}

#js-daily-gift--notification-controller {
  background-color: var(--color-gift-light);
  color: var(--color-on-gift-light);
  border-color: var(--color-gift-light);
}
#js-daily-gift--notification-controller.claimed {
  background-color: rgb(227, 227, 227) !important;
}
#js-daily-gift--notification-controller.claimed > img {
  filter: grayscale(1);
}
#js-daily-gift--notification-controller.active-notification::after {
  content: " ";
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-gift);
}

#js-diamonds-shop--button {
  border-color: var(--color-diamonds-light);
}

#js-keys-shop--button {
  border-color: var(--color-keys-light);
}

/***** Bank & Coffee Shop *****/
/* Main Structure */
.shopMenu {
  display: flex;
}
.shopMenu > div {
  margin: 0 1rem;
  border-radius: 1rem 1rem 0 0;
}

.shopMenu-item {
  flex: 1;
  background: var(--sc-primary-light-background);
}
.shopMenu-item:hover {
  cursor: pointer;
  background: var(--sc-background);
}
.shopMenu-item.visible {
  background: var(--sc-background);
}
.shopMenu-item > img {
  height: 3rem;
  width: 3rem;
  margin: 0.1rem auto;
}

#shop-exit {
  height: 3rem;
  width: 3rem;
  font-size: 2rem;
  line-height: 2rem;
  padding: 0.5rem;
  text-align: center;
  background: #222222;
  color: white;
}
#shop-exit:hover {
  cursor: pointer;
  background: black;
}

.shopContent-grid {
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.5rem;
  padding: 1.5rem;
  background: var(--sc-background);
  border-radius: 1rem;
}
.shopContent-grid.visible {
  display: grid;
}

/* Inner Grid Elements */
.shop-gridElement {
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  background: white;
  color: black;
  margin: 0;
  height: fit-content;
  height: -moz-fit-content;
  box-shadow: var(--std-box-shadow);
  transition: 0.3s all;
}
.shop-gridElement:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.shop-gridElement > img {
  width: 100%;
  height: auto;
}

.shop-gridElement__reward-container {
  display: flex;
  /* to account for when there is no bonus */
}
.shop-gridElement__reward-container > .reward-bonus {
  text-align: left;
  background: var(--light-green);
  color: var(--on-light-green);
  border-radius: 2rem 0 0 2rem;
}
.shop-gridElement__reward-container > div {
  margin-top: 0.6rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
  font-weight: normal;
  padding: 0.3rem 0.6rem;
}
.shop-gridElement__reward-container > div:nth-last-child(odd) {
  text-align: center !important;
}
.shop-gridElement__reward-container > div:first-child {
  text-align: right;
  flex: 1;
}

.shop-gridElement__button {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 0.3rem;
  width: 100%;
  display: flex;
  padding: 0.3rem 0.6rem;
  background: #222222;
  /* background: var(--color-secondary-dark-background); */
  color: white;
  /* border-radius: 2rem; */
}
.shop-gridElement__button > div.button--currency {
  padding: 0.5rem 0.3rem;
  margin: 0 0 0 auto;
}
.shop-gridElement__button > img.button--currency {
  padding: 0.1rem;
  width: 2rem;
  margin: 0 auto 0 0;
}
.shop-gridElement__button > .button--currency {
  font-size: 1rem;
  line-height: 1rem;
  height: 2rem;
}
.shop-gridElement__button > .button--amount {
  font-size: 1.6rem;
  line-height: 1.6rem;
  padding: 0.2rem 0.3rem;
  font-weight: normal;
}
.shop-gridElement__button > .button--amount:first-child {
  margin: 0 0 0 auto;
}
.shop-gridElement__button > .button--amount:last-child {
  margin: 0 auto 0 0;
}

/** Paypal/stripe popup*/
#shopPopup-confirm-popup {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1.2rem;
  border-radius: 1rem;
  background: var(--sc-background);
  color: var(--sc-foreground);
  box-shadow: var(std-box-shadow);
}
#shopPopup-confirm-popup > div {
  flex: 1;
  margin: 1.2rem auto;
  display: block;
}

#other-options {
  font-size: 1.2rem;
  line-height: 1.2rem;
  max-width: 25rem;
  text-align: center;
}

#js-stats-bar--highestInfinity--image {
  border-radius: 3rem;
  box-shadow: var(--std-box-shadow);
}

/* ! BEG: Daily gift ========================================================================*/
/* The container */
#js-daily--gift {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}
#js-daily--gift.visible {
  display: block;
}
#js-daily--gift > div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 35rem;
  height: 30rem;
  display: flex;
  flex-direction: column;
  overflow: visible;
  animation-duration: 0.3s;
  padding: 2rem;
  border-radius: 1rem;
  background: var(--sc-background);
  color: var(--sc-foreground);
  box-shadow: var(--std-box-shadow);
}
#js-daily--gift > div > .button {
  margin: 1.2rem auto 0 auto;
}

/* The modal */
/* Reward (number + icon) */
#rewards-line {
  display: flex;
  margin: 1rem auto;
}
#rewards-line > *:first-child {
  margin-left: auto;
}
#rewards-line > *:last-child {
  margin-right: auto;
}
#rewards-line > div {
  font-size: 3rem;
  line-height: 4rem;
  font-weight: normal;
  margin: 0;
}
#rewards-line > img {
  width: 4rem;
  height: 4rem;
  margin: 0;
  margin-left: 0.5rem;
}

.js-daily-gift-tip {
  font-size: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  margin: 0;
  margin-top: 2rem;
}

/* Countdown Section */
.daily-gift--countdown {
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
}
.daily-gift--countdown > div {
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  margin: 1rem;
  /* first child: number (actual countdown) */
  /* last child: string (hours/minutes/seconds) */
}
.daily-gift--countdown > div:first-child {
  margin-left: auto;
}
.daily-gift--countdown > div:last-child {
  margin-right: auto;
}
.daily-gift--countdown > div > div:first-child {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: normal;
}
.daily-gift--countdown > div > div:last-child {
  font-size: 1rem;
  line-height: 1rem;
}

#js-daily-gift--seconds {
  color: var(--sc-danger-background);
}

/* ! END: Daily gift ========================================================================*/
@media only screen and (max-width: 900px) {
  .popupHandlers.visible #shopPopup {
    display: flex !important;
    flex-direction: column;
  }
  .shopMenu {
    width: 100%;
  }
  .shopContent {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  .shopContent-grid {
    height: 100%;
    max-height: calc(100vh - 3rem);
    grid-template-columns: 1fr !important;
    overflow-y: auto;
    border-radius: 0;
  }
  #shop-exit {
    margin: 0;
  }
  .shopMenu > div:first-child {
    margin: 0;
  }
  .shopMenu > div {
    margin: 0 1rem;
    border-radius: 0;
  }
}
.backgroundStoreModal {
  width: min(1600px, 90vw);
  height: min(900px, 90vh);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.bsm--leftMenu {
  min-width: 15%;
  background-color: var(--sc-primary-background);
  height: 100%;
  padding-top: 2rem;
}
.bsm--leftMenu .bsm--leftMenu--menuItem {
  height: 3rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding: 0.75rem 1.5rem;
  color: var(--sc-primary-foreground);
  transition: 0.3s all;
}
.bsm--leftMenu .bsm--leftMenu--menuItem.selected::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: 8px solid transparent;
  border-right-color: var(--sc-background);
}
.bsm--leftMenu .bsm--leftMenu--menuItem:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
  background-color: var(--sc-primary-foreground);
}
.bsm--leftMenu .bsm--leftMenu--menuItem i {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-right: 0.5rem;
}

.bsm--rightMenu {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bsm--rightMenu .collectionContainer {
  width: 100%;
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  padding: 2rem;
  padding-top: 0;
  gap: 1rem;
}
.bsm--rightMenu .collectionContainer .collectionPreview img.collectionImage {
  width: 100%;
  height: auto;
}
.informationLine.DRAFT i {
  background-color: hsl(47, 89%, 90%);
}
.informationLine.DRAFT.isCurrentLine, .informationLine.DRAFT:hover {
  background-color: hsl(47, 89%, 90%);
}
.informationLine.DRAFT.isCurrentLine i, .informationLine.DRAFT:hover i {
  background-color: hsl(47, 89%, 70%);
}
.informationLine.DRAFT.isCurrentLine .seriesStatusInfo--title, .informationLine.DRAFT:hover .seriesStatusInfo--title {
  color: hsl(47, 89%, 40%);
}

.informationLine.STORY_PITCH i {
  background-color: hsl(29, 89%, 90%);
}
.informationLine.STORY_PITCH.isCurrentLine, .informationLine.STORY_PITCH:hover {
  background-color: hsl(29, 89%, 90%);
}
.informationLine.STORY_PITCH.isCurrentLine i, .informationLine.STORY_PITCH:hover i {
  background-color: hsl(29, 89%, 70%);
}
.informationLine.STORY_PITCH.isCurrentLine .seriesStatusInfo--title, .informationLine.STORY_PITCH:hover .seriesStatusInfo--title {
  color: hsl(29, 89%, 40%);
}

.informationLine.WORK_IN_PROGRESS i {
  background-color: hsl(315, 89%, 90%);
}
.informationLine.WORK_IN_PROGRESS.isCurrentLine, .informationLine.WORK_IN_PROGRESS:hover {
  background-color: hsl(315, 89%, 90%);
}
.informationLine.WORK_IN_PROGRESS.isCurrentLine i, .informationLine.WORK_IN_PROGRESS:hover i {
  background-color: hsl(315, 89%, 70%);
}
.informationLine.WORK_IN_PROGRESS.isCurrentLine .seriesStatusInfo--title, .informationLine.WORK_IN_PROGRESS:hover .seriesStatusInfo--title {
  color: hsl(315, 89%, 40%);
}

.informationLine.DEMO i {
  background-color: hsl(271, 89%, 90%);
}
.informationLine.DEMO.isCurrentLine, .informationLine.DEMO:hover {
  background-color: hsl(271, 89%, 90%);
}
.informationLine.DEMO.isCurrentLine i, .informationLine.DEMO:hover i {
  background-color: hsl(271, 89%, 70%);
}
.informationLine.DEMO.isCurrentLine .seriesStatusInfo--title, .informationLine.DEMO:hover .seriesStatusInfo--title {
  color: hsl(271, 89%, 40%);
}

.informationLine.ONGOING i {
  background-color: hsl(191, 89%, 90%);
}
.informationLine.ONGOING.isCurrentLine, .informationLine.ONGOING:hover {
  background-color: hsl(191, 89%, 90%);
}
.informationLine.ONGOING.isCurrentLine i, .informationLine.ONGOING:hover i {
  background-color: hsl(191, 89%, 70%);
}
.informationLine.ONGOING.isCurrentLine .seriesStatusInfo--title, .informationLine.ONGOING:hover .seriesStatusInfo--title {
  color: hsl(191, 89%, 40%);
}

.informationLine.COMPLETE i {
  background-color: hsl(110, 89%, 90%);
}
.informationLine.COMPLETE.isCurrentLine, .informationLine.COMPLETE:hover {
  background-color: hsl(110, 89%, 90%);
}
.informationLine.COMPLETE.isCurrentLine i, .informationLine.COMPLETE:hover i {
  background-color: hsl(110, 89%, 70%);
}
.informationLine.COMPLETE.isCurrentLine .seriesStatusInfo--title, .informationLine.COMPLETE:hover .seriesStatusInfo--title {
  color: hsl(110, 89%, 40%);
}

.informationLine.INACTIVE i {
  background-color: hsl(47, 89%, 90%);
}
.informationLine.INACTIVE.isCurrentLine, .informationLine.INACTIVE:hover {
  background-color: hsl(47, 89%, 90%);
}
.informationLine.INACTIVE.isCurrentLine i, .informationLine.INACTIVE:hover i {
  background-color: hsl(47, 89%, 70%);
}
.informationLine.INACTIVE.isCurrentLine .seriesStatusInfo--title, .informationLine.INACTIVE:hover .seriesStatusInfo--title {
  color: hsl(47, 89%, 40%);
}

.informationLine.HIATUS i {
  background-color: hsl(47, 89%, 90%);
}
.informationLine.HIATUS.isCurrentLine, .informationLine.HIATUS:hover {
  background-color: hsl(47, 89%, 90%);
}
.informationLine.HIATUS.isCurrentLine i, .informationLine.HIATUS:hover i {
  background-color: hsl(47, 89%, 70%);
}
.informationLine.HIATUS.isCurrentLine .seriesStatusInfo--title, .informationLine.HIATUS:hover .seriesStatusInfo--title {
  color: hsl(47, 89%, 40%);
}

.informationLine.CANCELLED i {
  background-color: hsl(0, 89%, 90%);
}
.informationLine.CANCELLED.isCurrentLine, .informationLine.CANCELLED:hover {
  background-color: hsl(0, 89%, 90%);
}
.informationLine.CANCELLED.isCurrentLine i, .informationLine.CANCELLED:hover i {
  background-color: hsl(0, 89%, 70%);
}
.informationLine.CANCELLED.isCurrentLine .seriesStatusInfo--title, .informationLine.CANCELLED:hover .seriesStatusInfo--title {
  color: hsl(0, 89%, 40%);
}

.seriesStatusInfo--title {
  font-size: 1.6rem;
  transition: 0.3s all;
}

.findPlayerModal--userLine {
  margin-top: 0.25rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-radius: 4px;
  padding: 0.5rem;
  transition: 0.3s all;
}
.findPlayerModal--userLine.selected {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.findPlayerModal--userLine:hover {
  cursor: pointer;
  transform: scale(1.01);
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}

.seriesPreviewModalClass {
  width: min(1600px, 60vw);
  height: max(900px, 90vh);
  overflow-y: auto;
}
@media only screen and (max-width: 651px) {
  .seriesPreviewModalClass {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

#sp--background-banner {
  position: relative;
  width: 100%;
  height: 30rem;
  margin: 0;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
#sp--background-banner::before {
  content: "";
  background: linear-gradient(to top, var(--sc-background), transparent 50%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
#sp--background-banner #sp--social-media-icons .sp--social-media-icon {
  font-size: 1rem;
  line-height: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  margin-left: 0.5rem;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  color: var(--sc-secondary-foreground);
  background: var(--sc-secondary-background);
  transition: all 0.3s;
  /* Social Media Buttons */
}
#sp--background-banner #sp--social-media-icons .sp--social-media-icon:hover {
  background-color: var(--sc-secondary-background-hover);
  color: var(--sc-secondary-foreground-hover);
}
#sp--background-banner #sp--logoSnapshot {
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
  max-height: 10rem;
  width: fit-content;
  width: -moz-fit-content;
  /* background: radial-gradient(closest-side, var(--sc-background), transparent); */
}
#sp--background-banner #sp--logoSnapshot--logo {
  height: 8rem;
  width: auto;
}
@media only screen and (max-width: 651px) {
  #sp--background-banner #sp--logoSnapshot--logo {
    width: 100%;
    height: auto;
  }
}
#sp--background-banner .sp--logoSnapshot--line {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
@media only screen and (max-width: 651px) {
  #sp--background-banner .sp--logoSnapshot--line {
    flex-wrap: wrap;
  }
}
#sp--background-banner .sp--logoSnapshot--line#sp--statsContainer {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media only screen and (max-width: 651px) {
  #sp--background-banner .sp--logoSnapshot--line#sp--statsContainer {
    justify-content: center;
  }
}
#sp--background-banner .sp--logoSnapshot--line > .lineItem {
  width: fit-content;
  width: -moz-fit-content;
  font-size: 1rem;
  line-height: 1.3rem;
  padding: 0.5rem 1rem;
  height: 2.3rem;
  color: var(--sc-foreground);
  background: var(--sc-background);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}
#sp--background-banner .sp--logoSnapshot--line > .lineItem i {
  margin-right: 0.5rem;
}
#sp--background-banner .sp--logoSnapshot--line > .lineItem.authorName {
  font-style: italic;
}
#sp--background-banner .sp--logoSnapshot--line > .lineItem > .rating > span {
  font-weight: bold;
}
#sp--background-banner .sp--logoSnapshot--line > .lineItem.secondary {
  color: var(--sc-secondary-light-foreground);
  background: var(--sc-secondary-light-background);
}

#sp--launch--section {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2rem;
  gap: 1rem;
}
#sp--launch--section a {
  text-decoration: none;
}

#sp--updates--container {
  margin-top: 1rem;
  padding-bottom: 10rem;
}

.sp--chaptersGrid {
  display: grid;
  grid-gap: 2rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.sp--chaptersGrid--chapter {
  border-radius: 0.6rem;
  text-decoration: none;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
  transition: 0.3s all;
}
.sp--chaptersGrid--chapter img {
  border-radius: 0.6rem 0.6rem 0 0;
  width: 100%;
  height: auto;
}
.sp--chaptersGrid--chapter--chapterTextContainer {
  padding: 1rem;
}
.sp--chaptersGrid--chapter--chapterTitle {
  font-size: 1.2rem;
  font-weight: bold;
}
.sp--chaptersGrid--chapter--chapterDescription {
  font-size: 1rem;
  margin-top: 1rem;
}
.sp--chaptersGrid--chapter:hover {
  background-color: var(--sc-primary-light-background-hover);
  color: var(--sc-primary-light-foreground-hover);
  box-shadow: var(--heavy-box-shadow);
}

#sp--main-section {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}

.sp--reviews--generalBox {
  display: flex;
  border-bottom: 2px solid var(--sc-primary-transparent-10);
}
.sp--reviews--generalBox .sp--reviews--generalBox--leftSide {
  flex: 1;
  padding: 2rem 0;
}
.sp--reviews--generalBox .sp--reviews--generalBox--leftSide .sp--reviews--generalLine {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: 0 2rem;
}
.sp--reviews--generalBox .sp--reviews--generalBox--leftSide .sp--reviews--generalLine span {
  flex: 1;
}
.sp--reviews--generalBox .sp--reviews--generalBox--leftSide .sp--reviews--generalLine + .sp--reviews--generalLine {
  margin-top: 1rem;
}
.sp--reviews--generalBox .sp--reviews--generalBox--rightSide {
  flex: 1;
  padding: 2rem 0;
  padding-left: 2rem;
  border-left: 2px solid var(--sc-primary-transparent-10);
}
.sp--reviews--generalBox .sp--reviews--generalBox--rightSide .sp--reviews--generalBox--rightSide--floatingBox {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: calc(100% - 2rem);
  height: -moz-min-content;
  height: min-content;
  text-align: center;
}

#sp--reviews--header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  line-height: 2rem;
  margin: 0 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 0.5rem;
}

.sp--compactContent {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}

.seriesCard--serieLine {
  margin-top: 1rem;
  border-radius: 1rem;
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  display: flex;
  flex-direction: column;
}
.seriesCard--serieLine--thumbnail {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
}
.seriesCard--serieLine--seriesStatusContainer {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
}
.seriesCard--serieLine--seriesStatusContainer--seriesStatusItem {
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  opacity: 0.9;
}
.seriesCard--serieLine--content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.seriesCard--serieLine--content .seriesCard--serieLine--link {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  text-decoration: none;
}
.seriesCard--serieLine--content .seriesCard--serieLine--link .seriesCard--serieLine--image {
  height: 3rem;
  width: 3rem;
}
.seriesCard--serieLine--content .seriesCard--serieLine--link .seriesCard--serieLine--link--text {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 3rem;
}
.seriesCard--serieLine--content .seriesCard--serieLine--linkline {
  display: flex;
  gap: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-top: 0.5rem;
}
.seriesCard--serieLine--content .seriesCard--serieLine--linkline .seriesCard--serieLine--linkline-text {
  opacity: 0.9;
  line-height: 2rem;
}
.seriesCard--serieLine--content .seriesCard--serieLine--genre {
  padding: 0.25rem 0.5rem;
  line-height: 1rem;
  font-size: 0.8rem;
  opacity: 0.9;
  height: 1.5rem;
  margin-top: 0.5rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}
.seriesCard--serieLine--content .seriesCard--series--statLine {
  display: flex;
  gap: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-right: 0.25rem;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
.seriesCard--serieLine--content .seriesCard--series--statLine i,
.seriesCard--serieLine--content .seriesCard--series--statLine div {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
.seriesCard--serieLine--content .seriesCard--series--statLine.primary {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
.seriesCard--serieLine--content .seriesCard--series--statLine.primaryLight {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.seriesCard--serieLine--content .seriesCard--series--statLine.warning {
  background: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
.seriesCard--serieLine--content .seriesCard--series--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.seriesCard--serieLine--content .seriesCard--series--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}

.storyengine--loading--animation-enter-active {
  animation-name: fadeIn;
}
.storyengine--loading--animation-enter-active.storyengine--loading {
  animation-duration: 1s;
  animation-delay: 0;
}

.storyengine--loading--animation-leave-active {
  animation-name: fadeOut;
}
.storyengine--loading--animation-leave-active.storyengine--loading {
  animation-duration: 1s;
  animation-delay: 2s;
}

.storyengine--loading {
  animation-fill-mode: both;
}

.proTipLoader--container {
  position: relative;
}
.proTipLoader--container .proTipLoader__backgroundImage {
  width: 100%;
  height: auto;
}
.proTipLoader--container .proTipLoader__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__backgroundGradient {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(200deg, transparent 30%, var(--sc-primary-background)), linear-gradient(-22deg, transparent 56%, var(--sc-primary-background));
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__topText {
  position: absolute;
  top: 10%;
  left: 0;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__topText .proTipLoader__overlay__title {
  padding-left: 4rem;
  padding-right: 80%;
  font-size: 4rem;
  line-height: 4.5rem;
  height: 4.5rem;
  font-weight: bold;
  color: var(--sc-primary-foreground);
  width: fit-content;
  width: -moz-fit-content;
  white-space: nowrap;
  background: linear-gradient(to left, transparent, var(--sc-primary-light-background) 200%);
  overflow: hidden;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__topText .proTipLoader__overlay__subtitle {
  margin-left: 4rem;
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__topText .proTipLoader__overlay__subtitle .proTipLoader__overlay__subtitle__image {
  height: 2rem;
  width: 2rem;
  margin: 0.5rem 0;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__topText .proTipLoader__overlay__subtitle .proTipLoader__overlay__subtitle__text {
  color: var(--sc-primary-foreground);
  font-size: 2rem;
  line-height: 2rem;
  padding: 0.5rem 0;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  right: 4rem;
  width: calc(100% - 2 * 4rem);
  display: flex;
  gap: 5rem;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__tipContainer {
  flex: 1;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__tipContainer .proTipLoader__overlay__tip__title {
  font-size: 2rem;
  font-weight: 300;
  height: 2rem;
  color: var(--sc-primary-light-background);
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__tipContainer .proTipLoader__overlay__tip__text {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  color: var(--sc-primary-foreground);
  text-shadow: 1px 1px 0 var(--sc-primary-background), -1px -1px 0 var(--sc-primary-background), 1px -1px 0 var(--sc-primary-background), -1px 1px 0 var(--sc-primary-background), 1px 1px 0 var(--sc-primary-background);
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__loaderContainer {
  width: fit-content;
  width: -moz-fit-content;
  font-size: 2rem;
  color: var(--sc-primary-foreground);
  height: 2rem;
  margin-top: auto;
  display: flex;
  gap: 1rem;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__loaderContainer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -200%;
  right: -200%;
  width: 300%;
  height: 0;
  margin: auto;
  box-shadow: 0 0 10rem 3.5rem var(--sc-primary-light-background);
  transform: scale(0.25);
  animation: 2s specialPulse infinite;
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__loaderContainer .proTipLoader__overlay__loader__text {
  font-size: 2rem;
  line-height: 2rem;
  color: var(--sc-primary-foreground);
}
.proTipLoader--container .proTipLoader__overlay .proTipLoader__overlay__bottomText .proTipLoader__overlay__loaderContainer .proTipLoader__overlay__loader__spinner {
  height: 2rem;
  width: 2rem;
  border-radius: 2rem;
  border: 4px solid var(--sc-primary-background);
  border-top-color: var(--sc-primary-foreground);
  animation: spin 1s linear infinite;
}
@keyframes specialPulse {
  from {
    box-shadow: 0 0 10rem 3.5rem var(--sc-primary-light-background);
  }
  50% {
    box-shadow: 0 0 10rem 5rem var(--sc-primary-light-background);
  }
  to {
    box-shadow: 0 0 10rem 3.5rem var(--sc-primary-light-background);
  }
}
.serieCurrencyCountButton--loadingContainer {
  display: flex;
  padding: 0.5rem 1rem;
  width: 5rem;
  height: 3rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  box-shadow: var(--std-box-shadow);
  border-radius: 3rem;
}
.serieCurrencyCountButton--loadingContainer::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border: 2px solid var(--sc-surface-background);
  border-top: 2px solid var(--sc-primary-background);
  border-radius: 2rem;
  animation: 1s spin infinite linear;
}

.serieCurrencyCountButton--container {
  display: flex;
  padding-left: 1rem;
  height: 3rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 3rem;
  box-shadow: var(--std-box-shadow);
}
.serieCurrencyCountButton--container:hover {
  cursor: pointer;
}
.serieCurrencyCountButton--container .serieCurrencyCountButton__amount {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  line-height: 2rem;
  height: 2rem;
}
.serieCurrencyCountButton--container img {
  margin: 0.5rem;
  height: 2rem;
  width: 2rem;
}
.serieCurrencyCountButton--container > .tooltip {
  align-items: center;
  height: 3rem;
}

/* ! BEG: Overrides of Existing Items =======================================================*/
/* footer * {color: #adb5bd} */
/*
footer * {color: #fff !important;
	font-size: 1.2rem;
	line-height: 1.2rem;
}
footer {background-color: #212529}

main {margin: 0; padding: 0; scroll-behavior: smooth;}
*/
/* ! END: Overrides of Existing Items =======================================================*/
/* ! BEG: General items =====================================================================*/
section.about-us {
  padding: 5rem;
}

/* Titles */
.about-us--h1 {
  margin-top: 4rem;
  margin-bottom: 4rem;
  font-size: 6rem;
  line-height: 6rem;
}

.about-us--h2 {
  text-align: center;
  font-size: 4rem;
  line-height: 4rem;
}

.about-us--h3 {
  font-size: 2rem;
  text-align: center;
  line-height: 2rem;
  font-family: "Roboto", sans-serif;
}

.about-us--section-container a:hover {
  color: var(--sc-secondary-background) !important;
}

.about-us--section-container a,
.about-us--section-container b,
.about-us--section-container p {
  margin-top: 2rem;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: left;
}

.about-us--section-container {
  margin: 0;
  position: relative;
  width: 100%;
  margin: auto;
}

.about-us--icon {
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  margin: 0 auto;
  height: 4rem;
  width: 4rem;
  font-size: 2rem;
  line-height: 2rem;
  padding: 1rem 0;
  text-align: center;
  background-color: inherit;
  color: inherit;
  border-radius: 50%;
}

/* ! END: General items =====================================================================*/
/* ! BEG: Colors ============================================================================*/
section.about-us.color1 {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.about-us.color1 .about-us--icon {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.about-us.color1 * {
  color: var(--sc-header-foreground);
}

section.about-us.color2 {
  background-color: var(--sc-background);
  color: var(--sc-foreground);
}

section.about-us.color2 .about-us--icon {
  background-color: var(--sc-background);
  color: var(--sc-header-background);
}

section.about-us.color2 * {
  color: var(--sc-foreground);
}

section.about-us.color3 {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
}

section.about-us.color3 .about-us--icon {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-background);
}

section.about-us.color3 * {
  color: var(--sc-secondary-light-foreground);
}

section.about-us.color4 {
  background-color: var(--sc-background);
  color: var(--sc-foreground);
}

section.about-us.color4 .about-us--icon {
  background-color: var(--sc-background);
  color: var(--sc-primary-background);
}

section.about-us.color4 *:not(.button) {
  color: var(--sc-foreground);
}

section.about-us.color5 {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

section.about-us.color5 .about-us--icon {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-background);
}

section.about-us.color5 * {
  color: var(--sc-primary-light-foreground);
}

section.about-us.color6 {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.about-us.color6 .about-us--icon {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.about-us.color6 * {
  color: var(--sc-header-foreground);
}

/* ! END: Colors ============================================================================*/
.teamContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 3rem;
  padding: 0 10vw;
  margin-top: 4rem;
}
.teamContainer .teamIndividual {
  width: 100%;
}
.teamContainer .teamIndividual .teamImage {
  width: 100%;
}
.teamContainer .teamIndividual .employeeName {
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  margin-top: 0.5rem;
}
.teamContainer .teamIndividual .employeeTitle {
  font-weight: bold;
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.8;
}

.aboutSplitter {
  display: flex;
  gap: 10rem;
  width: 80%;
  margin: 2rem auto 0 auto;
  align-items: center;
}

.contactUsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.contactUsContainer .contactUsItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 500px;
  min-width: 300px;
  margin-top: 3rem;
}
.contactUsContainer .contactUsItem .contactUsImage {
  width: 70%;
}
.contactUsContainer .contactUsItem .contactUsTitle {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
}
.contactUsContainer .contactUsItem .contactUsText {
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
}

.libraryPage--isEmptyState {
  height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}

.libraryPage--emptyStateContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.libraryPage--seriesContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 1rem;
}
.libraryPage--seriesContainer .libraryPage--seriesComponent {
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: 0.3s all;
}
.libraryPage--seriesContainer .libraryPage--seriesComponent--title {
  margin-top: var(--margin-2);
  font-size: 1.2rem;
  font-weight: bold;
}
.libraryPage--seriesContainer .libraryPage--seriesComponent--description {
  margin-top: var(--margin-1);
  font-size: 1rem;
}
.libraryPage--seriesContainer .libraryPage--seriesComponent--image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

#libraryPage--demoDiv {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  text-align: center;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: fit-content;
  width: -moz-fit-content;
}

.dp--seriesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
}

.dp--paginator {
  display: flex;
  gap: 0.5rem;
  height: 4rem;
  justify-content: center;
  align-items: center;
}
.dp--paginator .dp--paginator--arrow {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.5rem;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 1.5rem;
}
.dp--paginator .dp--paginator--arrow:hover {
  box-shadow: var(--std-box-shadow);
  cursor: pointer;
}
.dp--paginator .dp--paginator--page {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.5rem;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 2rem;
}
.dp--paginator .dp--paginator--page:hover {
  box-shadow: var(--std-box-shadow);
  cursor: pointer;
}
.dp--paginator .dp--paginator--page.selected {
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
.dp--paginator .dp--paginator--page.selected::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 4px;
  animation-name: goToFullWidth;
  animation-duration: 4.7s;
  animation-timing-function: linear;
  background-color: var(--sc-primary-background);
}
@keyframes goToFullWidth {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.dp--carouselItem {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* GO TO PREVIOUS SLIDE */
  /* GO TO NEXT SLIDE */
}
.dp--carouselItem.carousel-prev-enter-active, .dp--carouselItem.carousel-prev-leave-active {
  transition: transform 500ms ease-in-out;
}
.dp--carouselItem.carousel-prev-enter {
  transform: translate(-100%);
}
.dp--carouselItem.carousel-prev-leave-to {
  transform: translate(100%);
}
.dp--carouselItem.carousel-next-enter-active, .dp--carouselItem.carousel-next-leave-active {
  transition: transform 500ms ease-in-out;
}
.dp--carouselItem.carousel-next-enter {
  transform: translate(100%);
}
.dp--carouselItem.carousel-next-leave-to {
  transform: translate(-100%);
}

.featuredSeries--serieLine {
  height: 500px;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 1rem;
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
}

.featuredSeries--serieLineOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.featuredSeries--serieLineOverlay .featuredSeries--serieLine--content {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: 40%;
  height: -moz-min-content;
  height: min-content;
  background-color: rgba(255, 255, 255, 0.8);
  color: black(--sc-primary-light-foreground);
  border-radius: 1rem;
  padding: 1rem;
}
.featuredSeries--serieLineOverlay .featuredSeries--serieLine--content .featuredSeries--serieLine--link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}
.featuredSeries--serieLineOverlay .featuredSeries--serieLine--content .featuredSeries--serieLine--link--text {
  font-size: 1.6rem;
  font-weight: bold;
}
.featuredSeries--serieLineOverlay .featuredSeries--serieLine--content .featuredSeries--serieLine--genre {
  padding: 0.25rem 0.5rem;
  line-height: 1rem;
  font-size: 0.8rem;
  opacity: 0.9;
  height: 1.5rem;
  margin-top: 0.5rem;
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}
.featuredSeries--serieLineOverlay .featuredSeries--serieLine--series_status {
  width: -moz-min-content;
  width: min-content;
  height: 2.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  padding: 0.5rem;
  white-space: nowrap;
}
.featuredSeries--serieLineOverlay .featuredSeries--serieLine--image {
  height: 3rem;
  width: 3rem;
}

.analytics--pointseries--point {
  padding: 2rem 3rem;
  font-size: 4rem;
  line-height: 4rem;
  text-align: center;
}

.trendseriesModule {
  color: var(--sc-surface-foreground); /*Default Title Color*/
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  padding: 1rem;
  /* Position the grid element inside its grid box */
  justify-self: start;
  align-self: start;
  /* Make sure that the module takes all the available space designated by the grid */
  border-radius: 1rem;
  position: relative;
  margin: 0;
}

.module-selector-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  --module-selector-height: 1.2rem;
  --module-selector-padding: 10px;
  --module-selector-total-height: calc(var(--module-selector-height) + 2* var(--module-selector-padding));
  margin-bottom: var(--module-selector-padding);
}

.module-title {
  font-size: 2rem;
  line-height: 2rem;
  height: 2rem;
  flex: 70;
  margin-left: 0.75rem;
  width: fit-content;
  width: -moz-fit-content;
}

.module-tag-container {
  display: flex;
  justify-content: center;
  flex: 1;
  gap: 0.5rem;
  padding: 0.375rem 0; /* the height of the badges is 1.25rem, the height of the container is 2rem */
}

.module--loadtime {
  text-align: right;
  flex: 1;
  line-height: 2rem;
  height: 2rem;
}

.module-chart-container {
  width: 100%;
  animation: fadeIn 0.8s;
}
.module-chart-container canvas {
  width: 100% !important;
  height: auto !important;
}

.analytics-trendseries-row {
  /* border-bottom: 2px solid var(--sc-primary-background); */
  width: 100%;
  display: flex;
  gap: 1rem;
  margin: 0 auto;
  padding: 0 1rem;
  margin-top: 1rem;
}
.analytics-trendseries-row ~ div {
  margin-top: 1rem;
}
.analytics-trendseries-row .analytics--trendseries--number {
  width: -moz-fit-content;
  width: fit-content;
  text-align: right;
  font-size: 2rem;
  line-height: 2.2rem;
}
.analytics-trendseries-row .analytics-tooltip-container:hover {
  cursor: help;
}
.analytics-trendseries-row .analytics-tooltip-container {
  border-bottom: 2px dotted var(--sc-secondary-background);
}
.analytics-trendseries-row .trendseries-percentage-difference.positive {
  color: var(--sc-success-background);
}
.analytics-trendseries-row .trendseries-percentage-difference.negative {
  color: var(--sc-danger-background);
}

#page--admindashboard {
  --adminDashboardCutePadding: 10rem;
  overflow: hidden;
}
#page--admindashboard .pad--tab-series {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine {
  margin-top: 1rem;
  border-radius: 4px;
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--serieLine--link {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  text-decoration: none;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--serieLine--link .pad--serieLine--image {
  height: 3rem;
  width: 3rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--serieLine--link .pad--serieLine--link--text {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 3rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--serieLine--linkline {
  display: flex;
  gap: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-top: 0.5rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--serieLine--linkline .pad--serieLine--linkline-text {
  opacity: 0.9;
  line-height: 2rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--serieLine--genre {
  padding: 0.25rem 0.5rem;
  line-height: 1rem;
  font-size: 0.8rem;
  opacity: 0.9;
  height: 1.5rem;
  margin-top: 0.5rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine {
  display: flex;
  gap: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-right: 0.25rem;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine i,
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine div {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine.primary {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine.primaryLight {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine.warning {
  background: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
#page--admindashboard .pad--tab-series .pad--serieLine .pad--series--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
#page--admindashboard .pad--tab-chapter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 1rem;
}
#page--admindashboard .pad--tab-chapter .pad--chapterLine {
  margin-top: 1rem;
  border-radius: 4px;
  color: var(--sc-surface-foreground);
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
#page--admindashboard .pad--tab-chapter .pad--chapter-image {
  width: 100%;
  height: auto;
  min-height: 2.8rem;
}
#page--admindashboard .pad--tab-chapter .pad--chapter-status {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  height: 2.3rem;
  line-height: 2.3rem;
  font-size: 1rem;
  min-width: 2.3rem;
  padding: 0 1rem;
  border-radius: 2rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter-status.PUBLIC {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter-status.REJECTED {
  background-color: red;
}
#page--admindashboard .pad--tab-chapter .pad--chapter-status.DRAFT {
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter-status.PENDING-APPROVAL, #page--admindashboard .pad--tab-chapter .pad--chapter-status.BETA {
  background-color: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter-title {
  font-weight: bold;
  margin-top: 1rem;
}
#page--admindashboard .pad--tab-chapter .pad--chapter-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLinecontainer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine {
  display: flex;
  gap: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-right: 0.25rem;
  margin-top: 0.25rem;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine i,
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine div {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine.primary {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine.primaryLight {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine.warning {
  background: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
#page--admindashboard .pad--tab-chapter .pad--chapter--linkline {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
  text-decoration: none;
  border-radius: 4px;
}
#page--admindashboard .pad--tab-chapter .pad--chapter--linkline:hover {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  box-shadow: var(--std-box-shadow);
}
#page--admindashboard .pad--tab-chapter .pad--chapter--linkline .pad--chapter--linkline-text {
  opacity: 0.9;
  line-height: 2rem;
}
#page--admindashboard .pad--userpic {
  height: 2rem;
  width: 2rem;
  border-radius: 2rem;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
}

.pad--series--wordCountItem--container {
  margin-top: 0.5rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.pad--series--wordCountItem--container .pad--series--wordCountItem {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.25rem 0;
  align-items: center;
  border-top: 1px dashed var(--sc-primary-background);
}
.pad--series--wordCountItem--container .pad--series--wordCountItem:first-child {
  border-top: none;
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .stateName {
  flex: 1;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: bold;
  text-align: right;
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer {
  flex: 2;
  display: flex;
  height: 1rem;
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer .wordCountBar.colored {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: bold;
  text-align: center;
  border-radius: 0.25rem;
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer .wordCountBar.colored.PUBLIC {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer .wordCountBar.colored.REJECTED {
  background-color: red;
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer .wordCountBar.colored.DRAFT {
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer .wordCountBar.colored.PENDING-APPROVAL, .pad--series--wordCountItem--container .pad--series--wordCountItem .wordCountBarContainer .wordCountBar.colored.BETA {
  background-color: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}

.pad--separator {
  height: 0;
  width: 50%;
  margin: 1rem auto;
}

.sat--table--serieLine.borderTop::after {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: var(--sc-primary-background);
}

#seriesAnalyticsTab--table {
  padding: 0 var(--adminDashboardCutePadding);
}
#seriesAnalyticsTab--table .sat--table--serieLine--name {
  display: flex;
  gap: var(--margin-2);
  align-items: center;
}
#seriesAnalyticsTab--table .sat--table--serieLine--logo {
  width: 2rem;
  height: 2rem;
}

.seriesAnalyticsTab--tableHeader {
  font-size: 2rem;
  margin: 0 var(--adminDashboardCutePadding);
  margin-top: 4rem;
  text-align: center;
}

.seriesAnalyticsTab--topLineNumberscontainers {
  display: flex;
  justify-content: space-evenly;
  margin-top: var(--margin-3);
}

.seriesAnalyticsTab--mainNumberContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
}
.seriesAnalyticsTab--mainNumberContainer--title {
  font-size: 1.2rem;
}
.seriesAnalyticsTab--mainNumberContainer--subtitle {
  font-size: 0.8rem;
  opacity: 0.8;
}
.seriesAnalyticsTab--mainNumberContainer--value {
  font-size: 2rem;
  font-weight: bold;
}
.seriesAnalyticsTab--mainNumberContainer:not(:first-child):before {
  content: "";
  height: 100%;
  position: absolute;
  right: calc(100% - 1px);
  background-color: var(--sc-primary-light-background);
  width: 2px;
  border-radius: 1rem;
}

.payrollChevron {
  font-size: 2rem;
}
.payrollChevron:hover {
  cursor: pointer;
}

.abTesting--title {
  font-size: 1.6rem;
  font-weight: bold;
}

.abTestingCard {
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid var(--sc-primary-light-background);
  background-color: var(--sc-surface-background);
}

.abTesting--legendContainer {
  margin-top: 0.5rem;
}
.abTesting--legendContainer .abTesting--legend--bubbleLine {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.abTesting--legendContainer .abTesting--legend--bubble {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 1rem;
}
.abTesting--legendContainer .abTesting--legend--text {
  font-size: 0.8rem;
}

.abTesting--conversionBubble {
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
  text-align: center;
  border-radius: 3rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}

.abTesting--conversionArrow {
  position: absolute;
  font-size: 8rem;
  line-height: 8rem;
  height: 8rem;
  text-align: center;
  left: -4rem;
  top: 0;
  bottom: 0;
  right: -4rem;
  margin: auto;
  color: var(--sc-primary-light-background);
}

.abTesting--margin {
  margin-top: 3rem;
}

.asdfsdafsd {
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid var(--sc-primary-light-background);
  background-color: var(--sc-surface-background);
  width: 15rem;
}

.asdfsdafsd--value {
  font-size: 1.6rem;
  font-weight: bold;
}

.abTesting--greyArea {
  background-color: #eee;
}

.abTesting--tiesColor {
  background-color: #ccc;
}

.moderation--chapterLine {
  display: flex;
  height: 10rem;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 4px;
}
.moderation--chapterLine:not(:first-child) {
  margin-top: 1rem;
}

.moderation--chapterLine--thumbnail {
  height: 10rem;
  width: auto;
  border-radius: 4px 0 0 4px;
}

.moderation--chapterLine--rightContainer {
  height: 10rem;
  width: auto;
  border-radius: 0 4px 4px 0;
  padding: 0.5rem 1rem;
}

.moderation--chapter-info {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  gap: 1rem;
}
.moderation--chapter-info .moderation--chapter-title {
  font-size: 2rem;
  line-height: 2.3rem;
  font-weight: 350;
  margin: 0rem;
  color: var(--sc-surface-foreground);
}
.moderation--chapter-info .moderation--chapter-status {
  font-size: 1.2rem;
  line-height: 1.5rem;
  height: -moz-min-content;
  height: min-content;
  min-height: 2.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.moderation--chapter-info .moderation--chapter-status.PUBLIC {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.moderation--chapter-info .moderation--chapter-status.REJECTED {
  background-color: red;
}
.moderation--chapter-info .moderation--chapter-status.DRAFT {
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.moderation--chapter-info .moderation--chapter-status.PENDING-APPROVAL, .moderation--chapter-info .moderation--chapter-status.BETA {
  background-color: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}

.moderation--chapter--buttonLine {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 1rem;
}
.moderation--chapter--buttonLine:hover {
  cursor: pointer;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  box-shadow: var(--std-box-shadow);
}
.moderation--chapter--buttonLine > i {
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
}
.moderation--chapter--buttonLine > div {
  opacity: 0.9;
  line-height: 2rem;
  font-size: 1rem;
}

.moderation--chapter-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
}

.moderation--chapter--statLinecontainer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine {
  display: flex;
  gap: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-right: 0.25rem;
  margin-top: 0.25rem;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine i, .moderation--chapter--statLinecontainer .moderation--chapter--statLine div {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine.primary {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine.primaryLight {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine.warning {
  background: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.moderation--chapter--statLinecontainer .moderation--chapter--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}

#mainSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 4rem);
}

#mainSection--imageContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#mainSection--imageContainer #mainSection--backgroundImage {
  height: 100%;
  width: 100%;
  background-image: url("/assets/pages/creatorspage/hero-section.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#mainSection--imageContainer #mainSection--imageMask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(173deg, hsla(347, 83%, 95%, 0.9) 35%, hsla(347, 83%, 95%, 0.9) 50%, transparent 79%);
}

.cp--bigTitle {
  font-size: 3rem;
  font-weight: bold;
  width: max(40%, 30rem);
  text-align: center;
  color: var(--sc-p700);
}

.cp--bigTitle2 {
  font-size: 2rem;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.cp--subTitle {
  font-size: 1rem;
  width: max(50%, 30rem);
  text-align: center;
  color: var(--sc-p700);
}

.cp--subTitle2 {
  font-size: 1.2rem;
  color: var(--sc-p700);
  width: 100%;
  text-align: center;
}

.cp--subTitle3 {
  font-size: 1.2rem;
  color: var(--sc-p300);
  width: 100%;
  text-align: left;
  font-weight: bold;
}

#cp--arguments {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem min(24rem, 20%);
}

.cp--arguments--section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem min(24rem, 20%);
}
@media only screen and (max-width: 1200px) {
  .cp--arguments--section {
    padding: 5rem min(24rem, 10%) !important;
  }
}
@media only screen and (max-width: 800px) {
  .cp--arguments--section {
    padding: 5rem min(24rem, 5%) !important;
  }
}

.cp--argumentContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 5rem;
  height: 20rem;
}
.cp--argumentContainer .cp--argumentContainer--catchphrase {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--sc-secondary-background);
}
.cp--argumentContainer .cp--argumentContainer--title {
  font-size: 2rem;
  font-weight: bold;
}
.cp--argumentContainer .cp--argumentContainer--description {
  opacity: 0.8;
  font-size: 1rem;
}

.cp--argumentContainer2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 5rem;
  height: 20rem;
}
@media only screen and (max-width: 800px) {
  .cp--argumentContainer2 {
    flex-direction: column-reverse !important;
    height: unset;
    gap: 2rem;
    text-align: center;
  }
}
.cp--argumentContainer2 .cp--argumentContainer--title2 {
  font-size: 2rem;
  font-weight: bold;
}
.cp--argumentContainer2 .cp--argumentContainer--description2 {
  color: #6C6B78;
  font-size: 1.2rem;
}

.cp--argumentContainer3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 5rem;
  height: 20rem;
}
@media only screen and (max-width: 800px) {
  .cp--argumentContainer3 {
    flex-direction: column-reverse !important;
    height: unset;
    gap: 2rem;
    text-align: center;
  }
}
.cp--argumentContainer3 .cp--argumentContainer--title3 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--sc-foreground);
}
.cp--argumentContainer3 .cp--argumentContainer--description3 {
  font-size: 1.2rem;
  color: #6C6B78;
}

.createWithUsCard {
  flex: 1;
  background-color: var(--sc-surface-background);
  border: 1px solid var(--sc-grey-300);
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.createWithUsCard div {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #6C6B78;
  text-align: center;
}

#stepsContainer {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 3rem;
  width: 100%;
}
@media only screen and (max-width: 800px) {
  #stepsContainer {
    flex-direction: column;
  }
}

.stepsCard {
  flex: 1;
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.stepsCard .stepNumber {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
}
.stepsCard .stepTitle {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--sc-grey-800);
  text-align: center;
  margin-top: 0.5rem;
}
.stepsCard .stepDescription {
  font-size: 1rem;
  color: var(--sc-grey-600);
  text-align: center;
}

.creators-page--icon {
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  margin: 0 auto;
  height: 4rem;
  width: 4rem;
  font-size: 2rem;
  line-height: 2rem;
  padding: 1rem 0;
  text-align: center;
  background-color: inherit;
  color: inherit;
  border-radius: 50%;
}

.creatorsPage--hover {
  font-weight: bold;
}
.creatorsPage--hover:hover {
  cursor: pointer;
}

#editorPreviewContainer {
  width: 100%;
  background: linear-gradient(to bottom right, #EECDA3, #EF629F);
  border-radius: 2rem;
  padding-top: 2rem;
  padding-right: 4rem;
  padding-left: 4rem;
  box-shadow: var(--std-box-shadow);
}
#editorPreviewContainer #editorPreviewText {
  color: white;
  font-size: 3rem;
  text-align: center;
  padding: 0 4rem;
  font-weight: bold;
}
@media only screen and (max-width: 800px) {
  #editorPreviewContainer #editorPreviewText {
    padding: 0;
    font-size: 2.5rem;
  }
}
#editorPreviewContainer #topVideoBar {
  height: 2.4rem;
  background-color: #E7E7E7;
  border-radius: 1rem 1rem 0 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#editorPreviewContainer #topVideoBar .threeButtonsContainer {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 1rem;
}
#editorPreviewContainer #topVideoBar .threeButtonsContainer .macosButton {
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
}
#editorPreviewContainer #topVideoBar .threeButtonsContainer .macosButton.close {
  background-color: #ED6A5E;
}
#editorPreviewContainer #topVideoBar .threeButtonsContainer .macosButton.minimize {
  background-color: #F4BF4F;
}
#editorPreviewContainer #topVideoBar .threeButtonsContainer .macosButton.fullscreen {
  background-color: #61C554;
}
#editorPreviewContainer #topVideoBar .searchBar {
  width: 60%;
  border-radius: 0.5rem;
  background-color: #D6D6D6;
  color: #626262;
  padding: 0.25rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
}

#startYourStorySection {
  height: calc(100vh - 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 800px) {
  #startYourStorySection {
    height: unset;
  }
}

section.creators-page.color1 {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.creators-page.color1 .creators-page--icon {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.creators-page.color1 .colored-text {
  color: var(--sc-header-foreground);
}

section.creators-page.color2 {
  background-color: var(--sc-background);
  color: var(--sc-foreground);
}

section.creators-page.color2 .creators-page--icon {
  background-color: var(--sc-background);
  color: var(--sc-header-background);
}

section.creators-page.color3 {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
}

section.creators-page.color3 .creators-page--icon {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-background);
}

section.creators-page.color3 * {
  color: var(--sc-secondary-light-foreground);
}

section.creators-page.color4 {
  background-color: var(--sc-background);
  color: var(--sc-foreground);
}

section.creators-page.color4 .creators-page--icon {
  background-color: var(--sc-background);
  color: var(--sc-primary-background);
}

section.creators-page.color5 {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

section.creators-page.color5 .creators-page--icon {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-background);
}

section.creators-page.color6 {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.creators-page.color6 .creators-page--icon {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
}

section.creators-page.color6 * {
  color: var(--sc-header-foreground);
}

#cm-map {
  height: 100vh;
  width: 100%;
  background: var(--sc-background);
}

#cm-map--tools {
  display: flex;
  gap: 0.5rem;
  height: 4rem;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  padding: 0 1rem;
  width: fit-content;
  width: -moz-fit-content;
  z-index: 1;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
}
#cm-map--tools .cm-map--menu-button {
  margin: 0.85rem 0;
}
#cm-map--tools .cm-map--tools--separator {
  height: 1.5rem;
  width: 1px;
  background: var(--sc-surface-foreground);
  opacity: 0.1;
  margin: 1.25rem 0.5rem;
}

#cm-map--visjs--loader {
  height: 100%;
  width: 100%;
}

#cm-map--visjs {
  height: 100%;
  width: 100%;
}
#cm-map--visjs > .vis-network {
  outline: none;
}

.cm-map--reorganizeNodesContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}
.cm-map--reorganizeNodesContainer .reorganizeNodesOption {
  width: 100%;
  transition: 0.3s all;
  border-radius: 1rem;
  overflow: hidden;
  padding: 1rem 0;
}
.cm-map--reorganizeNodesContainer .reorganizeNodesOption:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.cm-map--reorganizeNodesContainer .reorganizeNodesOption .reorganizeNodesOption--icon {
  width: 100%;
  height: 10rem;
  font-size: 10rem;
  line-height: 10rem;
  text-align: center;
}
.cm-map--reorganizeNodesContainer .reorganizeNodesOption .reorganizeNodesOption--name {
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
}

#cm-header {
  display: flex;
  width: 100%;
  transition: 0.5s all;
  padding: 0 1rem;
  padding-top: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
#cm-header.sidebarVisible {
  width: calc(100% - var(--chaptermaker-overlay-width));
}
#cm-header .cm-header__container {
  height: 3.5rem;
  padding: 0 1rem;
  display: flex;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
}
#cm-header .cm-header__separator {
  height: 1.5rem;
  width: 1px;
  background: var(--sc-surface-foreground);
  opacity: 0.1;
  margin: 1rem 0.3rem;
}
#cm-header #cm-header__settingsDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 1rem);
  right: -0.5rem;
  background: var(--sc-surface-background);
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
  padding: 1rem;
}
#cm-header #cm-header__settingsDropdown.opened {
  display: block;
}
#cm-header #cm-header__settingsDropdown::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  right: 1.45rem;
  border: 0.5rem solid transparent;
  border-bottom-color: var(--sc-surface-background);
}
#cm-header #cm-header__settingsDropdown .cm-header__settingsDropdown__item {
  display: flex;
  border-radius: 0.5rem;
  padding: 0.25rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#cm-header #cm-header__settingsDropdown .cm-header__settingsDropdown__item:not(:first-child) {
  margin-top: 0.5rem;
}
#cm-header #cm-header__settingsDropdown .cm-header__settingsDropdown__item:hover:not(.nohover) {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  cursor: pointer;
}
#cm-header #cm-header__settingsDropdown .cm-header__settingsDropdown__item .cm-header__settingsDropdown__item--icon {
  font-size: 1rem;
  line-height: 1.3rem;
  padding: 0.5rem 0;
  height: 2.3rem;
  width: 2.3rem;
  text-align: center;
}
#cm-header #cm-header__settingsDropdown .cm-header__settingsDropdown__item .cm-header__settingsDropdown__item--title {
  white-space: nowrap;
  height: 2.3rem;
  line-height: 2.3rem;
  padding: 0 0.5rem;
}
#cm-header #cm-header__settingsDropdown .cm-header__settingsDropdown__item .cm-header__settingsDropdown__item--toggle {
  margin: 0.5rem 0 0 0.5rem;
}

.cm-header-button {
  margin: 0.6rem 0.3rem;
  height: 2.3rem;
  line-height: 2.3rem;
  min-width: 2.3rem;
}
.cm-header-button > .img--button {
  padding: 0;
  margin: 0;
}

.cm--chapter-status {
  margin: 0.6rem 0.3rem;
  height: 2.3rem;
  line-height: 2.3rem;
  font-size: 1rem;
  min-width: 2.3rem;
  padding: 0 1rem;
  border-radius: 2rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.cm--chapter-status.PUBLIC {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.cm--chapter-status.REJECTED {
  background-color: red;
}
.cm--chapter-status.DRAFT {
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.cm--chapter-status.PENDING-APPROVAL, .cm--chapter-status.BETA {
  background-color: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}

.cm--one-node--tab-selector--container {
  display: flex;
  width: 100%;
  gap: 1.5rem;
  padding: 0.5rem;
}

.cm--one-node--tab-selector--container button {
  filter: grayscale(1);
}

.cm--one-node--tab-selector--container div.cm--tab-active button {
  filter: none;
  transform: scale(1.4);
}

#cm--toolbox--tab--tutorial button {
  background-color: var(--dg-color-toasts-green);
  color: white;
}

#cm--toolbox--tab--todos button {
  background-color: var(--dg-color-toasts-blue);
  color: white;
}

#cm--toolbox--tab--errors button {
  background-color: var(--dg-color-toasts-red);
  color: white;
}

#cm--toolbox--tab--shortcuts button {
  background-color: var(--dg-color-toasts-green);
  color: white;
}

#cm--toolbox--tab--search button {
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}

/* .cm--one-node--tab-selector--container div.cm--tab-active .cm--overlaybadge--container { display: block; } */
.cm--overlaybadge--container {
  /* display: none; */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  width: -moz-fit-content;
}

.cm--overlaybadge--container .badge {
  color: white;
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}

.cm--overlaybadge--container .badge.todos {
  background-color: var(--dg-color-toasts-blue);
}

.cm--overlaybadge--container .badge.comments {
  background-color: var(--dg-color-toasts-dark);
}

.cm--overlaybadge--container .badge.errors {
  background-color: var(--dg-color-toasts-red);
}

.cm--overlaybadge--container .badge.warnings {
  background-color: var(--dg-color-toasts-orange);
}

.cm--search-item {
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 1rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  display: grid;
  grid-template-areas: "matchType . nodeID" "matchString matchString matchString";
  grid-template-columns: auto 1fr auto;
  grid-gap: 0.5rem;
}
.cm--search-item:hover {
  cursor: pointer;
  background-color: var(--sc-primary-light-background-hover);
  color: var(--sc-primary-light-foreground-hover);
  box-shadow: var(--std-box-shadow);
}
.cm--search-item .cm--search-item--matchType {
  grid-area: matchType;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  letter-spacing: 1px;
}
.cm--search-item .cm--search-item--matchType.edge {
  color: var(--sc-success-foreground);
  background-color: var(--sc-success-background);
}
.cm--search-item .cm--search-item--matchType.character {
  color: var(--sc-danger-foreground);
  background-color: var(--sc-danger-background);
}
.cm--search-item .cm--search-item--matchType.expression {
  color: var(--sc-warning-foreground);
  background-color: var(--sc-warning-background);
}
.cm--search-item .cm--search-item--matchType.outfit {
  color: var(--sc-info-foreground);
  background-color: var(--sc-info-background);
}
.cm--search-item .cm--search-item--matchType.nodeID {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
}
.cm--search-item .cm--search-item--matchType.locale {
  color: var(--sc-info-foreground);
  background-color: var(--sc-info-background);
}
.cm--search-item .cm--search-item--nodeID {
  grid-area: nodeID;
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
  height: 1.25rem;
}
.cm--search-item .cm--search-item--matchString {
  grid-area: matchString;
}

.cm--search--found-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem 0;
}
.cm--search--found-details div {
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
}
.cm--search--found-details div.edge {
  color: var(--sc-success-foreground);
  background-color: var(--sc-success-background);
}
.cm--search--found-details div.character {
  color: var(--sc-danger-foreground);
  background-color: var(--sc-danger-background);
}
.cm--search--found-details div.expression {
  color: var(--sc-warning-foreground);
  background-color: var(--sc-warning-background);
}
.cm--search--found-details div.outfit {
  color: var(--sc-info-foreground);
  background-color: var(--sc-info-background);
}
.cm--search--found-details div.nodeID {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
}
.cm--search--found-details div.locale {
  color: var(--sc-info-foreground);
  background-color: var(--sc-info-background);
}

.cm-overlay-animation-enter-active > #cm-sweetscript {
  display: none;
}

.cm-overlay-animation-leave-active > #cm-sweetscript {
  display: none;
}

#cm-sweetscript {
  width: 20vw;
  height: 10vw;
  position: fixed;
  top: 9rem;
  left: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  animation-duration: 300ms;
  resize: both;
  overflow: hidden;
  z-index: 1;
}

#editor {
  height: calc(100% - 36px);
  width: 100%;
  overflow-y: auto;
}

#editor, #editor div {
  font-family: monospace;
  font-size: unset !important;
  line-height: unset !important;
}

.cm-overlay {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  /* the menu is 3.5 rem; we're going to give a spacing of 2 rem */
  height: 100%;
  width: var(--chaptermaker-overlay-width);
  /* min-width: 500px; */
  max-width: 80vw;
  box-shadow: var(--std-box-shadow);
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  animation-fill-mode: both;
  animation-duration: 500ms;
}

/* the white div which contains the visible panel */
.cm-overlay--content {
  margin-right: 0;
  padding: 1rem;
  padding-bottom: 0;
  height: 100%;
  width: 100%;
}

/* .cm-overlay-animation-enter-active { animation-name: slideInRight; }
.cm-overlay-animation-leave-active { animation-name: slideOutRight; } */
.cm-overlay-animation-enter-active {
  animation-name: fadeInRight;
}

.cm-overlay-animation-leave-active {
  animation-name: fadeOutRight;
}

.cmToolbox__buttonsContainer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.cm-overlayToolbox__closeButton {
  padding: 0.5rem;
}
.cm-overlayToolbox__closeButton:hover {
  cursor: pointer;
}

.illustrationModal {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.cm-game-preview-animation-enter-active {
  animation-name: zoomIn;
}

.cm-game-preview-animation-leave-active {
  animation-name: zoomOut;
}

.cm-overlay-animation-enter-active > #one-node--current-node-dev {
  display: none;
}

.cm-overlay-animation-leave-active > #one-node--current-node-dev {
  display: none;
}

#one-node--current-node-dev {
  position: fixed;
  right: calc(var(--chaptermaker-overlay-width) + 1rem);
  bottom: 1rem;
  width: 20vw;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--heavy-box-shadow);
  animation-duration: 300ms;
  -webkit-animation-duration: 300ms;
}

.cm--one-node--tab-selector--container {
  height: 4rem;
}
.cm--one-node--tab-selector--container img {
  filter: grayscale(1);
  transform: scale(0.8);
}
.cm--one-node--tab-selector--container div.cm--tab-active img {
  filter: none;
  transform: scale(1.2);
}

.cm--one-node--playButton:hover {
  cursor: pointer;
}

#cm--tab-characters {
  width: 100%;
  height: 100%;
  display: block;
}

.cm-characters--container {
  width: 100%;
  height: 36rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cm-character--title {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2rem;
  height: 2rem;
}

.cm-character--image {
  grid-area: image;
  height: 30rem;
  width: auto;
  margin: 0 auto;
}

.cm-character--bubble {
  grid-area: bubble;
  width: 100%;
}

.cm-character--bubble-buttons {
  grid-area: bubble-buttons;
  width: 100%;
  display: flex;
}
.cm-character--bubble-buttons > * {
  margin: 0;
}
.cm-character--bubble-buttons > *:first-child {
  margin-left: auto;
}
.cm-character--bubble-buttons > *:last-child {
  margin-right: auto;
}

.cm-overlay-animation-enter-active > #cm-game-preview {
  display: none;
}

.cm-overlay-animation-leave-active > #cm-game-preview {
  display: none;
}

#cm-game-preview {
  width: 60vw;
  min-height: 10vw;
  height: auto;
  position: fixed;
  top: 9rem;
  left: 1rem;
  z-index: 1;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  animation-duration: 300ms;
  overflow: hidden;
  resize: both;
}

.cm--tabEvent--event {
  margin: 1rem 1rem 0 1rem;
  width: calc(100% - 2rem);
  background: var(--sc-background);
  color: var(--sc-foreground);
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  text-align: left;
  padding: 1rem;
}

.cm--tabEvent--event--title {
  font-size: 1.5rem;
  font-weight: bold;
}

.cm--tabEvent--event--subTitle {
  font-size: 1.2rem;
}

.cm--tabEvent--event--description-container {
  margin-top: 0.5rem;
  display: flex;
  gap: 1rem;
}

.cm--tabEvent--event--image {
  width: 3rem;
  height: 3rem;
}

.cm--tabEvent--event--description {
  font-size: 1rem;
  flex: 1;
}

.cm--tabEvent--event--raw {
  background: black;
  color: white;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  flex: 1;
  border-radius: 0.4rem;
  padding: 0.5rem;
  /* Discord colors */
  /*
  background: rgb(47, 49, 54);
  color: rgb(185, 187, 190);
  border: 1px solid rgb(34, 32, 37);
  */
  background: rgb(47, 49, 54);
  color: #eee;
  border: 1px solid rgb(34, 32, 37);
}

.cm--tabEvent--event--button-container > *:first-child {
  margin-left: auto;
}

.cm--tabEvent--event--button-container > *:last-child {
  margin-right: auto;
}

.cm--tabEvent--event--button-container > * {
  margin: 0;
}

.cm--tabEvent--event--button-container {
  margin-top: 0.5rem;
  display: flex;
  gap: 1rem;
}

body.header-chaptermaker {
  padding: 0 !important;
  /* 
  * {
      outline: 1px solid black;
      outline: 2px solid red;
  }
  */
}

#cm-app-container {
  width: 100%;
  height: 100vh;
  --chaptermaker-overlay-width: 25vw;
  grid-template-columns: 1fr var(--chaptermaker-overlay-width);
  grid-template-rows: 3.5rem 1fr;
  overflow: hidden;
}

.dashboard--chapter-title {
  margin-top: 2rem;
}

.upcoming-chapter--progress-line {
  margin-top: 2rem;
}
.upcoming-chapter--progress-line:first-child {
  margin: 0;
}
.upcoming-chapter--progress-line .description {
  display: flex;
  margin: 0.5rem;
}
.upcoming-chapter--progress-line .description div {
  font-weight: bold;
}
.upcoming-chapter--progress-line .fas {
  margin-right: 1rem;
}

.dashboard-section {
  margin: 2rem 0;
}
.dashboard-section--left {
  grid-area: left;
  width: 100%;
}
.dashboard-section--right {
  color: var(--sc-surface-foreground);
  grid-area: right;
  width: 100%;
}
.dashboard-section--right--div {
  margin-top: 4rem;
}

#js-current-chapter-container > .series--chapter {
  height: 18rem;
}
#js-current-chapter-container > .series--chapter .series--thumbnail__description {
  height: 10.2rem;
}

.dashboard--header {
  font-size: 1.6rem;
  line-height: 2rem;
  margin-top: 4rem;
  margin-bottom: 1rem;
}

.dashboard--writingReview--container {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  max-width: 100%;
  padding: 2rem 1rem;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
  border-radius: 0.6rem;
}
.dashboard--writingReview--container .dashboard--writingReview--ProfilePic {
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
}
.dashboard--writingReview--container .dashboard--writingReview--body {
  flex: 1;
}
.dashboard--writingReview--container .dashboard--writingReview--body .dashboard--writingReview--body--quill {
  background-color: var(--sc-background);
  color: var(--sc-foreground);
  border-radius: 0.6rem;
  margin-top: 1rem;
}
.dashboard--writingReview--container .dashboard--writingReview--body .dashboard--reviews--generalLine {
  display: flex;
  gap: 1rem;
  width: 50%;
  margin-top: 0.5rem;
}
.dashboard--writingReview--container .dashboard--writingReview--body .dashboard--reviews--generalLine:first-child {
  margin-top: 0;
}
.dashboard--writingReview--container .dashboard--writingReview--body .dashboard--reviews--generalLine span {
  flex: 1;
}

.myreview--container {
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 0.6rem;
}
.myreview--container .review--body {
  border: none;
  padding-bottom: 0;
}
.myreview--container .review--commentsLine {
  margin-bottom: 0 !important;
}

#dashboard--myReview--header--container {
  display: flex;
  justify-content: space-between;
  height: 2.3rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
#dashboard--myReview--header--container #dashboard--myReview--header {
  font-size: 1.6rem;
  line-height: 2.3rem;
  height: 2.3rem;
}

#dashboard--myReview--header2 {
  height: 2.3rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2.3rem;
  height: 2.3rem;
}

#myReview--separator {
  height: 2rem;
  width: 100%;
  border-bottom: 2px solid var(--sc-primary-transparent-10);
}

.dashboard--chaptersGrid {
  display: grid;
  grid-gap: 2rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.dashboard--chaptersGrid .dashboard--chaptersGrid--chapter {
  border-radius: 0.6rem;
  text-decoration: none;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
  transition: 0.3s all;
}
.dashboard--chaptersGrid .dashboard--chaptersGrid--chapter img {
  border-radius: 0.6rem 0.6rem 0 0;
  width: 100%;
  height: auto;
}
.dashboard--chaptersGrid .dashboard--chaptersGrid--chapter .dashboard--chaptersGrid--chapterTextContainer {
  padding: 1rem;
}
.dashboard--chaptersGrid .dashboard--chaptersGrid--chapter .dashboard--chaptersGrid--chapterTitle {
  font-size: 1.2rem;
  font-weight: bold;
}
.dashboard--chaptersGrid .dashboard--chaptersGrid--chapter .dashboard--chaptersGrid--chapterDescription {
  font-size: 1rem;
  margin-top: 1rem;
}
.dashboard--chaptersGrid .dashboard--chaptersGrid--chapter:hover {
  background-color: var(--sc-surface-background-hover);
  color: var(--sc-surface-foreground-hover);
  box-shadow: var(--heavy-box-shadow);
}

/* Overwite the tabs */
.series--chapter.visible {
  display: flex;
}

.series--chapter {
  position: relative;
  display: none;
  width: 100%;
  height: 13rem;
  /* height: fit-content; */
  margin: 2vw 0;
  transition: 0.3s all;
  border-radius: 0.6rem;
  box-shadow: var(--std-box-shadow);
}

.series--chapter.not-started:hover .series--thumbnail__leftSide {
  transform: none;
}

/* .series--chapter:hover .series--thumbnail__leftSide { transform: scale3d(1.02, 1.02, 1.02); } */
/* * Left side: contains image + progress bar */
.js-current-chapter > * {
  filter: grayscale(0%) !important;
}

.js-current-chapter .series--thumbnail__leftSide {
  width: 35%;
}

.series--thumbnail__leftSide__progressBarLogo {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-50%, -42%, 0);
  width: 3rem;
  height: 3rem;
  margin: 0;
  z-index: 1;
}

.not-started .series--thumbnail__leftSide {
  filter: grayscale(100%);
}

.series--progressBarContainer.not-started {
  filter: grayscale(100%);
}

/* .series--progressBarContainer.not-started .series--thumbnail__leftSide__progressBar__progress {background-color: black} */
.series--progressBarContainer.start-screen .series--thumbnail__leftSide__progressBar__progress {
  background-color: var(--color-primary-background);
}

/* .series--progressBarContainer.barely-started .series--thumbnail__leftSide__progressBar__progress {background-color: var(--sc-success-background)} */
.series--progressBarContainer.score-screen .series--thumbnail__leftSide__progressBar__progress {
  background-color: var(--color-primary-background);
  text-align: left;
}

.series--progressBarContainer.completed .series--thumbnail__leftSide__progressBar__progress {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
  text-align: left;
}

.series--thumbnail__leftSide__progressBar__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
  text-align: right;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.25rem 0.5rem;
  height: 1.5rem;
  /* min-width: fit-content; */
  border-radius: 0 0 0 0.6rem;
}

.series--thumbnail__leftSide {
  position: relative;
  /* width: 30%; */
  height: 100%;
  /* height: min-content; */
  transition: 0.3s all;
  z-index: 1;
}

.series--thumbnail__leftSide .BETA {
  background: var(--color-primary-background);
  color: var(--color-primary-foreground);
  position: absolute;
  left: 1rem;
  top: 1rem;
  box-shadow: var(--white-box-shadow);
  border-radius: 3vw;
  font-size: 1.2vw;
  line-height: 1.6vw;
  padding: 0.5vw 1vw;
}

.series--thumbnail__leftSide .STORY {
  background: black;
  color: white;
}

.series--thumbnail__leftSide .FUN {
  background: var(--sc-secondary-background);
  color: white;
}

.series--thumbnail__leftSide .STORY,
.series--thumbnail__leftSide .FUN {
  position: absolute;
  right: 1rem;
  top: 1rem;
  box-shadow: var(--white-box-shadow);
  border-radius: 3vw;
  font-size: 1.2vw;
  line-height: 1.6vw;
  padding: 0.5vw 1vw;
}

.series--thumbnail__leftSide__image {
  display: block;
  height: 100%;
  width: auto;
  border-radius: 0.6rem 0 0 0.6rem;
}

.series--thumbnail__progressBar {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.5vw;
  max-width: 100%;
  background: var(--color-secondary-dark-background);
  border-radius: 1vw;
  border-top-left-radius: 0vw;
}

/* * Right Side */
.series--thumbnail__rightSide {
  display: flex;
  flex-direction: column;
  /* display: block; */
  position: relative;
  flex: 1;
  /* margin-left: 2vw; */
  border-radius: 0 0.6rem 0.6rem 0;
  padding: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
}

.series--thumbnail__title-container {
  display: flex;
  width: 100%;
}

.series--thumbnail__title-container div {
  line-height: 1.5rem;
  height: 1.5rem;
}

.series--thumbnail__title {
  text-align: left;
  font-weight: 400;
  font-size: 1.5rem;
}

.series--thumbnail__cost {
  display: flex;
}

.series--thumbnail__cost div {
  font-size: 1.2rem;
}

.series--thumbnail__cost img {
  display: block;
  height: 2rem;
  width: 2rem;
  margin: -0.25rem;
  margin-left: 0.25rem;
}

.series--thumbnail__author {
  flex: 1;
}

.series--thumbnail__likes {
  text-align: right;
  padding-right: 0.6vw !important;
}

.series--thumbnail__likes-image {
  width: 1.6vw;
  height: 1.6vw;
  padding-right: 0.6vw;
}

/* the font-awesome icon */
.trailer-button::before {
  font-size: 1rem;
  line-height: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  vertical-align: middle;
  text-align: center;
  margin-right: 0.5rem;
}

.series--chapter.not-started .chapter-button {
  filter: grayscale(100%);
}

/* .series--chapter.not-started:hover .chapter-button { animation: none; } */
/* .series--chapter:hover .chapter-button {animation: 1s pulse infinite} */
.trailer-button,
.chapter-button {
  height: 2.5rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-decoration: none;
  padding: 0.5rem 1rem;
  box-shadow: var(--std-box-shadow);
}

.series--thumbnail__description {
  width: 100%;
  margin: 1rem 0 0 0;
  /* max-height: 2 + 1.5 + 1 + x + 1 + 2.3?; */
  height: 5.2rem;
  /* max-height: calc(13rem - 3.5rem - 2rem - 2.3rem); */
  text-align: left;
  font-size: 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

.series--thumbnail__rightSide__bottomLine {
  display: flex;
  margin-top: 1rem;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

.series--thumbnail__rightSide__bottomLine-text {
  padding: 0.6rem;
  margin-left: 1rem;
}

.series--thumbnail__rightSide__bottomLine-img {
  padding: 0;
}

.series--thumbnail__rightSide__bottomLine-text,
.series--thumbnail__rightSide__bottomLine-img {
  font-size: 1rem;
  line-height: 1rem;
  height: 2rem;
  width: auto;
}

/* Achievements, Illustrations, Lore, Quest Items, etc. */
.series--chapterItemClickable {
  height: 2rem;
}

.series--chapterItemClickable:hover::before {
  width: 30%;
}

.series--chapterItemClickable::before {
  content: " ";
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  border-bottom: 3px solid black;
  transition: 0.3s all;
}

.series--chapterItemClickable:hover {
  cursor: pointer;
}

.series--chapterItemClickable {
  border-radius: 2rem;
  transition: 0.3s all;
}

.achievement-clickable::before {
  border-color: var(--color-achievements-dark);
}

.illustration-clickable::before {
  border-color: var(--color-illustrations-dark);
}

.lore-clickable::before {
  border-color: var(--color-lore-dark);
}

.achievement-clickable:hover {
  background-color: var(--color-achievements-light);
}

.illustration-clickable:hover {
  background-color: var(--color-illustrations-light);
}

.lore-clickable:hover {
  background-color: var(--color-lore-light);
}

#contact--page--container {
  padding: 4rem 20%;
  min-height: calc(100vh - 8rem);
}

.contact--grid {
  display: grid;
  grid-template-areas: "business support";
  margin-top: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4rem;
  width: 100%;
}

.contact-card {
  width: 100%;
  flex: 1;
  border-radius: 0.6rem;
  box-shadow: var(--std-box-shadow);
  background-color: var(--sc-surface-background);
  overflow: hidden;
  transition: 0.3s all;
  display: flex;
  flex-direction: column;
}
.contact-card h5 {
  text-align: center;
}
.contact-card .contact--img-badge {
  font-size: 15rem;
  line-height: 20rem;
  width: 100%;
  text-align: center;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
.contact-card .contact--card-bottom {
  padding: 2rem;
}
.contact-card .contact-link {
  font-size: 1.2rem;
  line-height: 1.6rem;
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.gameengine--event--illustration--continue-button:hover {
  cursor: pointer;
  animation: pulse 1.6s infinite;
}

.gameengine--event--illustration--continue-button {
  position: absolute;
  bottom: 2rem;
  margin-top: auto;
  right: 2rem;
  margin-left: auto;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  color: black;
  box-shadow: var(--heavy-box-shadow);
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 0.1rem;
  font-weight: bold;
  transition: 0.3s all;
}

.gameengine--events--illustration--base64--animation-enter-active {
  animation-name: fadeInUpSmall;
}

.gameengine--events--illustration--base64--animation-leave-active {
  animation-name: fadeOutUpSmall;
}

#gameengine--events--illustration--base64 {
  animation-fill-mode: both;
  animation-duration: 3s;
  margin: 0 auto;
}
#gameengine--events--illustration--base64.horizontal, #gameengine--events--illustration--base64.horizontal > img {
  width: 100%;
  height: auto;
}
#gameengine--events--illustration--base64.vertical, #gameengine--events--illustration--base64.vertical > img {
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.gameengine--event--achievement--animation-enter-active {
  background: red;
}

.gameengine--event--achievement--animation-leave-active {
  background: blue;
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: all calc(var(--i) * 0.1s);
}

.slide-left-enter, .slide-left-leave-to {
  opacity: 0;
  transform: translateX(50%);
}

.gameengine--event--achievement--container {
  margin-top: 1rem;
  margin-left: 1rem;
  width: 60%;
  min-height: 6rem;
  background: var(--sc-background);
  color: var(--sc-foreground);
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  text-align: left;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-areas: "image title" "image description";
  grid-template-columns: 6rem 1fr;
  grid-template-rows: 2.1rem 1fr;
}

.gameengine--event--achievement--image {
  grid-area: image;
  border-radius: 1rem 0 0 1rem;
  height: 6rem;
  width: 6rem;
}

.gameengine--event--achievement--title {
  grid-area: title;
  width: 100%;
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.6rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  height: 1.6rem;
  font-weight: bold;
}

.gameengine--event--achievement--description {
  grid-area: description;
  width: 100%;
  text-align: left;
  margin-left: 0.5rem;
  font-size: 1rem;
  height: 100%;
}

.gameengine--event--achievement--continue-button:hover {
  cursor: pointer;
  animation: pulse 1.6s infinite;
}

.gameengine--event--achievement--continue-button {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  padding: 0.75rem 1.5rem;
  background: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
  box-shadow: var(--heavy-box-shadow);
  border-radius: 1rem;
  font-weight: bold;
  transition: 0.3s all;
}

.gameengine-event--choice--parent.right .choice-element {
  text-align: left;
}

.gameengine-event--choice--parent.right {
  right: 0;
  border-left: 2px solid var(--gameengine--continue--background);
}

.gameengine-event--choice--parent.left .choice-element {
  text-align: right;
}

.gameengine-event--choice--parent.left {
  left: 0;
  border-right: 2px solid var(--gameengine--continue--background);
}

.gameengine-event--choice--parent.center {
  left: 0;
  right: 0;
  width: 100%;
}

.gameengine-event--choice--parent.center > div {
  text-align: center;
}

.gameengine-event--choice--parent.visible {
  display: flex;
}

.gameengine-event--choice--parent {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  top: 1rem;
  bottom: 1rem;
  margin: auto 0;
  padding: 4rem 0;
  width: calc(55% - 2rem);
  min-height: 50%;
  height: fit-content;
  height: -moz-fit-content;
  max-height: calc(100% - 2rem);
  color: var(--gameengine--continue--foreground);
  background: radial-gradient(farthest-side at 0, var(--gameengine--continue--background), transparent), linear-gradient(0deg, transparent, var(--gameengine--continue--background), transparent);
  /* background: radial-gradient(farthest-side at 0, black, transparent); */
  /* background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); */
  /* background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); */
  box-shadow: none;
}

.choice-element:first-child {
  margin-top: auto;
}

.choice-element:last-child {
  margin-bottom: auto;
}

.choice-element {
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.2rem;
  padding: 0.5rem 23px;
  margin-left: 0;
  font-weight: normal;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  transition: 0.3s all;
}

.choice-element:hover {
  cursor: pointer;
  color: var(--gameengine--continue--foreground-hover);
  background-color: var(--gameengine--continue--background-hover);
  box-shadow: var(--std-box-shadow);
  transform: scale(1.01);
  /* border-top: 2px solid var(--gameengine--choice--hoverBorder);
  border-bottom: 2px solid var(--gameengine--choice--hoverBorder); */
}

.choice-element:hover::after {
  content: " ";
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  border: 6px solid transparent;
  border-left: 6px solid var(--sc-primary-background);
  animation: 1.5s pulseLeft infinite;
}

.gameengine-event--continue:hover {
  cursor: pointer;
  /* filter: opacity(0.9); */
  color: var(--gameengine--continue--foreground-hover);
  background-color: var(--gameengine--continue--background-hover);
}

.gameengine-event--continue {
  position: absolute;
  display: grid;
  /* todo: add portrait */
  grid-template-areas: "portrait name" "portrait text";
  grid-template-rows: 2rem 1fr;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1.2rem;
  /* min-height: 20%; */
  max-height: 40%;
  overflow-y: auto;
  color: var(--gameengine--continue--foreground);
  background: var(--gameengine--continue--background);
  transition: color 0.3s, background-color 0.3s;
  z-index: 2;
}

.gameengine-event--characterBubble:hover {
  cursor: pointer;
  /* filter: opacity(0.9); */
  color: var(--gameengine--continue--foreground-hover);
  background-color: var(--gameengine--continue--background-hover);
}

.gameengine-event--characterBubble {
  position: absolute;
  display: grid;
  grid-template-areas: "portrait name" "portrait text";
  grid-template-rows: 2rem 1fr;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1.2rem;
  /* min-height: 20%; */
  max-height: 40%;
  overflow: none;
  color: var(--gameengine--continue--foreground);
  background: var(--gameengine--continue--background);
  transition: color 0.3s, background-color 0.3s;
  z-index: 2;
}
.gameengine-event--characterBubble.nocharacter {
  grid-template-areas: "name" "text";
  grid-template-columns: 1fr;
}

.gameengine-event--characterBubble--character-portrait {
  grid-area: portrait;
  border-radius: 50%;
  border: 2px solid var(--sc-primary-background);
  box-shadow: var(--std-box-shadow);
  background: var(--gameengine--continue--background);
  height: 5rem;
  width: 5rem;
}

.gameengine-event--characterBubble--character-name {
  grid-area: name;
  width: 100%;
  font-weight: bold;
  text-align: left;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 2rem;
  padding-top: 0.6rem;
  line-height: 1.4rem;
  font-size: 1.4rem;
}

.gameengine-event--characterBubble--text *:not(b):not(strong) {
  font-weight: normal;
}

.gameengine-event--characterBubble--text * {
  font-size: 1.2rem;
  line-height: 1.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.gameengine-event--characterBubble--text {
  grid-area: text;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-left: 0;
  font-weight: normal;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow-y: auto;
}

.gameengine--events--navigation--image--animation-enter-active {
  animation-name: fadeIn;
}

.gameengine--events--navigation--image--animation-leave-active {
  animation-name: fadeOut;
}

.gameengine--events--navigation--image {
  animation-duration: 100ms;
  animation-fill-mode: both;
}

.gameengine-event--navigation-button {
  position: absolute !important;
  cursor: pointer;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  font-size: 3rem;
  line-height: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--sc-secondary-foreground);
  border: 0.25rem solid var(--sc-secondary-background);
  box-shadow: 0 0 1.5rem 0.5rem var(--sc-secondary-foreground);
  z-index: 2;
  transition: 0.3s transform, 0.3s background-color;
}
.gameengine-event--navigation-button:hover {
  background-color: var(--sc-secondary-light-background);
  transform: scale3d(1.2, 1.2, 1.2);
}
.gameengine-event--navigation-button::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--sc-secondary-background);
  z-index: 3;
}

/* Todo eventually: Make it so that the parent is a grid element and children can be positioned according to where we want them in the grid */
.js-navigation--generic0 {
  bottom: 5%;
  left: 10%;
}

.js-navigation--generic1 {
  bottom: 5%;
  left: 20%;
}

.js-navigation--generic2 {
  bottom: 5%;
  left: 30%;
}

.js-navigation--generic3 {
  bottom: 5%;
  left: 40%;
}

.js-navigation--generic4 {
  bottom: 5%;
  left: 50%;
}

.js-navigation--generic5 {
  bottom: 5%;
  left: 60%;
}

.js-navigation--generic6 {
  bottom: 5%;
  left: 70%;
}

.js-navigation--generic7 {
  bottom: 5%;
  left: 80%;
}

.js-navigation--generic8 {
  bottom: 5%;
  left: 90%;
}

.gameengine--events--navigation--backup-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
}

#gameengine--event--rf-romance {
  margin-left: auto;
}

#gameengine--event--rf-romance:hover {
  box-shadow: 0 0 3rem var(--sc-secondary-background);
}

#gameengine--event--rf-friendship {
  margin-right: auto;
}

#gameengine--event--rf-friendship:hover {
  box-shadow: 0 0 3rem var(--sc-success-background);
}

.gameengine--event--rf-button:hover {
  cursor: pointer;
  transform: scale(1.1);
  animation: 1s pulse infinite;
}

.gameengine--event--rf-button {
  /* position: absolute; */
  top: 0;
  bottom: 0;
  margin: auto 0;
  border-radius: 50%;
  width: 15vw;
  height: 15vw;
  box-shadow: var(--heavy-box-shadow);
  transition: 0.3s all;
}

.gameengine--events--loreItemContainer--animation-enter-active {
  animation-name: backInUp;
}

.gameengine--events--loreItemContainer--animation-leave-active {
  animation-name: backOutUp;
}

#gameengine--events--loreItemContainer {
  color: var(--sc-foreground);
  background: var(--sc-background);
  padding: 10% 20%;
  overflow-y: auto;
  animation-fill-mode: both;
  animation-duration: 1s;
}

#gameengine--events--loreItemContainer--title {
  font-size: 2rem;
  line-height: 2rem;
}

#gameengine--events--loreItemContainer--content {
  margin-top: 2rem;
}

.gameengine--event--lore--continue-button:hover {
  cursor: pointer;
  animation: pulse 1.6s infinite;
}

.gameengine--event--lore--continue-button {
  position: absolute;
  bottom: 2rem;
  margin-top: auto;
  right: 3rem;
  margin-left: auto;
  padding: 0.75rem 1.5rem;
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  box-shadow: var(--heavy-box-shadow);
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 0.1rem;
  font-weight: bold;
  transition: 0.3s all;
}

#gameengine--event--form-container {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: 300ms all;
  animation-duration: 300ms;
}

#gameengine--event--attribute-form {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /* height: 40%; */
  height: 14rem;
  min-width: 40%;
  width: fit-content;
  width: -moz-fit-content;
  background: var(--sc-background);
  border-radius: 1rem;
  text-align: center;
  box-shadow: var(--std-box-shadow);
}
#gameengine--event--attribute-form > * {
  margin: 0 auto;
}

.gameengine--event--attribute-form__title {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  font-size: 1.6rem;
  line-height: 3rem;
  height: 3rem;
  margin-bottom: 2rem !important;
  border-radius: 1rem 1rem 0 0;
}

#gameengine--event--attribute-form .dropdown-container {
  margin: 2rem 2rem auto 2rem;
  min-width: calc(100% - 4rem);
  width: -moz-fit-content;
  width: fit-content;
}

#gameengine--event--attribute-form .button-dropdown,
#gameengine--event--attribute-form .dropdown-list,
#gameengine--event--attribute-form .dropdown-item {
  min-width: 100%;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}

#gameengine--event--choose-outfit-container {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  padding: 0 10%;
  transition: 300ms all;
  animation-duration: 300ms;
}

/* .game-outfits-left {left: 25%}
.game-outfits-middle {left: 50%}
.game-outfits-right {left: 75%} */
.game-outfits {
  position: relative;
  margin: auto 0;
  height: calc(100% - 8vw);
  max-width: 25%;
  flex: 1;
  border-radius: 1rem;
  background: var(--sc-background);
  box-shadow: var(--std-box-shadow);
  transition: 0.3s all;
}
.game-outfits:hover {
  cursor: pointer;
  transform: scale3d(1.2, 1.2, 1.2);
  animation: pulse 1.6s infinite;
  box-shadow: var(--heavy-box-shadow);
}
.game-outfits .choose-outfit--avatarImage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  display: block;
  height: 100%;
  width: auto;
  border-radius: 1rem;
}

.gameengine--sequences--weak-update--animation-enter-active {
  animation-name: fadeInUpSmall;
}

.gameengine--sequences--weak-update--animation-leave-active {
  animation-name: fadeOutUpSmall;
}

.gameengine--sequences--weak-update {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 2rem;
  box-shadow: var(--std-box-shadow);
  position: absolute;
  margin: auto;
  width: 40%;
  height: 7.7rem;
  max-height: 8.9rem;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  animation-fill-mode: both;
  animation-duration: 800ms;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.gameengine--sequences--weak-update--title {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: bold;
}

.gameengine--sequences--weak-update--description {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.2rem;
  height: 1.2rem;
  max-height: 2.4rem;
}

.gameengine--sequences--oneline-update--animation-enter-active {
  animation-name: fadeInUpSmall;
}

.gameengine--sequences--oneline-update--animation-leave-active {
  animation-name: fadeOutUpSmall;
}

.gameengine--sequences--oneline-update {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem 2rem;
  box-shadow: var(--std-box-shadow);
  position: absolute;
  margin: auto;
  width: 40%;
  height: 3.5rem;
  max-height: 8.9rem;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  animation-fill-mode: both;
  animation-duration: 800ms;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.gameengine--sequences--oneline-update--title {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: bold;
}

/* TODO: WHEN WE WILL REDO THE COLOR THEME */
/* GAME ENGINE COLORS */
:root {
  /* todo: ces couleurs doivent être dérivées du thème principal (avec des calculs, en SASS) */
  --gameengine--continue--background: #fcf8fce6;
  --gameengine--continue--foreground: black;
  --gameengine--continue--background-hover: #e0b8e0e6;
  --gameengine--continue--foreground-hover: black;
  --gameengine--choice--hoverBorder: #471f47;
}

.gameengine--overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.gameengine--character-sprite {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: auto;
}

.gameengine--character-attributeMeter {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 10%;
  height: -moz-min-content;
  height: min-content;
  padding-bottom: 2rem;
}
.gameengine--character-attributeMeter img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.gameengine--character-attributeMeter img:first-of-type {
  position: relative;
}
.gameengine--character-attributeMeter .gameengine--character-attributeMeter--number {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  width: fit-content;
  width: -moz-fit-content;
  margin: 1rem auto 0 auto;
  padding: 0 0.5rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 0.6rem;
  box-shadow: 0 0 0.5rem 0.4rem var(--sc-primary-light-background);
}

.gameengine--background {
  width: 100%;
  height: auto;
}

.gameengine--background--illustration {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: black;
  width: 100%;
  height: 100%;
}
.gameengine--background--illustration .horizontal, .gameengine--background--illustration .horizontal > img {
  width: 100%;
  height: auto;
}
.gameengine--background--illustration .vertical, .gameengine--background--illustration .vertical > img {
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.gameengine--overlay.dark-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  transition: 300ms all;
  animation-duration: 300ms;
}

.gameengine--overlay--save--animation-enter-active {
  animation-name: fadeInUpSmall;
}

.gameengine--overlay--save--animation-leave-active {
  animation-name: fadeOutUpSmall;
  background-color: var(--sc-success-background) !important;
  color: var(--sc-success-foreground) !important;
  animation-delay: 1000ms;
}
.gameengine--overlay--save--animation-leave-active .gameengine--overlay--save--saving {
  display: none;
}
.gameengine--overlay--save--animation-leave-active .gameengine--overlay--save--saved {
  display: block;
}

.gameengine--overlay--save--saved {
  display: none;
}

.gameengine--overlay--save {
  display: flex;
  gap: 0.5rem;
  margin: auto;
  position: absolute;
  top: 1rem;
  right: 2rem;
  width: -moz-fit-content;
  width: fit-content;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 2rem;
  z-index: 10;
  transition: 0.3s background-color;
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.gameengine--overlay--save div.loading::before,
.gameengine--overlay--save div.loading::after {
  height: 1.5rem;
  width: 1.5rem;
  border-top-color: #fff !important;
}
.gameengine--overlay--save div.loading {
  height: 1.5rem;
  width: 1.5rem;
}
.gameengine--overlay--save div {
  font-size: 1rem;
  line-height: 1.5rem;
}

.gameengine--genericLoader {
  display: flex;
  gap: 1rem;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: fit-content;
  width: -moz-fit-content;
  height: 2rem;
}
.gameengine--genericLoader .gameengine--genericLoader--spinner {
  height: 2rem;
  width: 2rem;
}
.gameengine--genericLoader .gameengine--genericLoader--spinner.white::before, .gameengine--genericLoader .gameengine--genericLoader--spinner.white::after {
  border-top-color: white;
}
.gameengine--genericLoader .gameengine--genericLoader--text {
  font-size: 2rem;
  line-height: 2rem;
}

#createSerie--page {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}

/*
#createSerie--imagePreview {
    background-image: url('/assets/pages/createseries/newseries.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    background-color: var(--sc-surface-background);

    width: 100%;
    opacity: 0.5;
    height: 10rem;
}
*/
.createSerie--container {
  display: flex;
  gap: 2rem;
}

.createSerie--title {
  font-size: 1.2rem;
}

.createSerie--genreLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.createSerie--textDescription {
  font-size: 0.8rem;
  opacity: 0.9;
}

.createSerie--input, .gm--attributes--attributeContainer input, #gm--general--data input, .gm--soundtracks--soundtrackContainer input, #gm--characters--data input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid var(--sc-primary-light-background);
  border-radius: 4px;
  outline: none;
  box-shadow: none;
}

.createSerie--quillSummary .ql-container, #gm--general--data .gmgd--quill .ql-container, #gm--characters--data .gm--characters--quill .ql-container {
  background-color: var(--sc-surface-background);
  border: 2px solid var(--sc-primary-light-background) !important;
  border-radius: 4px;
  height: 200px;
}
.createSerie--quillSummary .ql-container .ql-editor.ql-blank::before, #gm--general--data .gmgd--quill .ql-container .ql-editor.ql-blank::before, #gm--characters--data .gm--characters--quill .ql-container .ql-editor.ql-blank::before {
  font-style: normal;
}

.required-asterisk {
  color: red;
  font-size: inherit;
  line-height: inherit;
}

.createSerie--hover {
  text-decoration: underline;
  font-weight: bold;
}
.createSerie--hover:hover {
  cursor: pointer;
}

.gettingPublished--step {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
.gettingPublished--step .gettingPublished--stepNumber {
  background-color: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5rem 1rem;
  height: 2rem;
  position: relative;
}
.gettingPublished--step .gettingPublished--stepNumber.fa-arrow-down::before, .gettingPublished--step .gettingPublished--stepNumber.fa-chevron-down::before {
  position: absolute;
  left: calc(50% - 1rem);
  top: calc(100% + 0.5rem);
  font-size: 1rem;
  line-height: 1rem;
  width: 2rem;
  text-align: center;
  color: var(--sc-foreground);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  font-family: "Font Awesome 5 Free";
}
.gettingPublished--step .gettingPublished--stepText {
  flex: 1;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5rem 0;
  height: 2rem;
}

#help--body {
  padding: 4rem 20%;
  min-height: calc(100vh - 8rem);
}

.help--title {
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
  padding: 4rem;
}
.help--title h1 {
  text-align: center;
}

.help--menu-card--container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
}

.help--menu-card {
  padding: 3rem 4rem;
  width: 100%;
  min-height: 300px;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: 0.3s all;
  border: 1px solid var(--sc-primary-light-background);
}
.help--menu-card:hover {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  cursor: pointer;
}
.help--menu-card .help--menu-card--icon {
  font-size: 3rem;
  line-height: 3rem;
  height: 3rem;
  color: var(--sc-primary-background);
  margin: 1rem;
}
.help--menu-card .help--menu-card--title {
  font-size: 1.2rem;
  font-weight: bold;
}
.help--menu-card .help--menu-card--description {
  margin-top: 1rem;
  font-size: 1rem;
  opacity: 0.8;
}
.help--menu-card .help--menu-card--description::before {
  content: " ";
  width: 20%;
  height: 2px;
  background-color: var(--sc-surface-foreground);
  margin: 2rem auto;
  display: block;
  opacity: 0.7;
}

.help--close-section {
  position: absolute;
  right: calc(80% + 2rem);
  top: 4.7rem;
}

.help--category--title {
  font-size: 2rem;
  line-height: 2rem;
}

.help--category--description {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
  opacity: 0.8;
}

:root {
  --home-page-logged-out-unit: 0.6vw;
}

#homepage--loggedout {
  background: url("/assets/pages/homepage/dulcet-backgroundimage.png");
}

/* First div: Home (Featured) */
.home--featured {
  display: grid;
  /* grid-template-columns: 5fr 2fr;
  grid-column-gap: 4vw;
  width: 100%; */
  margin-bottom: 6rem;
  overflow: hidden;
  /*
  &::after {
      content: " ";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      width: 100%;
      height: 10vw;

      background: linear-gradient(to bottom, transparent, var(--sc-background));
  }
  */
}

.home--featured--banner {
  width: 100%;
}

.home--featuredSection {
  width: 100%;
  height: fit-content;
  height: -moz-fit-content;
  flex-direction: column;
  padding: 2vw;
}
.home--featuredSection .home--featured--becomeCreator {
  text-decoration: none;
  flex: 1;
  transform: rotate(-9deg);
  transition: 0.3s all;
  margin-top: 2vw;
}
.home--featuredSection .home--featured--becomeCreator img {
  width: 60%;
  border-radius: 4rem;
  margin: auto;
  box-shadow: var(--heavy-box-shadow);
  transition: 0.3s all;
}
.home--featuredSection .home--featured--becomeCreator:hover {
  cursor: pointer;
  transform: scale(1.2) rotate(3deg);
}
.home--featuredSection .home--featured--becomeCreator:hover img {
  box-shadow: var(--heavy-box-shadow);
  border-radius: 1rem;
}

.home--comingOutContainer {
  margin: 0 auto;
  width: -moz-min-content;
  width: min-content;
  white-space: nowrap;
  height: 4rem;
  padding: 0.25rem;
  z-index: 1;
  animation: pulse 2s infinite;
  box-shadow: var(--heavy-box-shadow);
}
.home--comingOutContainer .home--comingOutText {
  color: var(--sc-primary-foreground);
  font-size: 2rem;
  line-height: 3.25rem;
  z-index: 1;
  padding: 0 1rem;
  font-weight: normal;
  border: 2px solid var(--sc-primary-foreground);
  border-radius: 2px;
}
.home--comingOutContainer .home--comingOutBackground {
  content: "";
  background-color: var(--sc-primary-background);
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 1;
  border-radius: 4px;
}

#home--featured-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 33vw; /* the aspect ratio is 3:1*/
  height: 100%;
  filter: blur(3px);
  /* filter: blur(10px); */
  background-position: center 50%;
  background-size: cover;
}

/* Carousel: every game has 1 background and 1 description */
.home--series-preview,
#home--featured-carousel {
  position: relative;
  display: flex;
  /* background: var(--sc-surface-background); */
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
}

#home--featured-carousel--clip-path {
  content: " ";
  position: absolute;
  left: -5vw;
  top: 0;
  bottom: 0;
  display: block;
  height: 100vh;
  width: 100%;
  background: linear-gradient(to right, var(--sc-surface-background) 50%, rgba(0, 0, 0, 0) 60%);
  z-index: 1;
  transform: rotate(-10deg);
  margin: auto;
}

/* All items within the description div */
.home--featured-serie-description * {
  margin-top: 1rem;
  margin-left: 0;
}

.home--featured-serie-description {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1vw;
  padding-left: 2vw;
  width: 50%;
  border-radius: 1rem 0 0 1rem;
  z-index: 2;
}

/* The image of the featured serie */
.home--featured-serie-background img {
  width: 100%;
  border-radius: 0 1rem 1rem 0;
}

.home--featured-serie-background {
  margin-left: 30%;
  width: 100%;
  overflow: hidden;
}

/* .home--featured-serie-description::before {
    content: ' ';
    position: absolute;
    left: 0; top: 0;

    display: block;

    height: 150%;
    width: 25%;

    background: var(--sc-surface-background);
    z-index: 1;

    transform: rotate(15deg);
    margin: auto;
} */
/* On the featured section, there is one promotion ("Click here to publish your own game!") */
#home--featured-promotion > p {
  margin: 1vw 0;
}

#home--featured-promotion {
  padding: 2vw;
  color: var(--sc-surface-foreground-translucent);
  background: var(--sc-surface-background-translucent);
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  height: -moz-fit-content;
  height: fit-content;
}

#home--featured-promotion > h2 {
  font-family: "Roboto", sans-serif;
  font-size: 2vw;
  text-align: center;
  font-weight: 400;
  color: var(--sc-primary-background);
}

/* Common to all series (title, description, stats) */
.serie--title-big img {
  width: 100%;
}

.serie--title-big {
  color: var(--sc-surface-foreground);
  margin-left: -1rem;
}

.serie--description {
  color: var(--sc-surface-foreground);
  flex: 1;
  /* text-shadow:
  -1px -1px 0 var(--sc-surface-background),
  1px -1px 0 var(--sc-surface-background),
  -1px 1px 0 var(--sc-surface-background),
        1px 1px 0 var(--sc-surface-background); */
}

.serie--stats {
  color: var(--sc-surface-foreground);
}

.home--category--loggedin {
  max-width: min(50rem, 100% - 4rem);
  margin: 0 auto;
  margin-top: 6rem;
}

/* Chapter Previews */
.home--category {
  padding: 0 16vw;
  margin-top: 6rem;
}
@media only screen and (max-width: 651px) {
  .home--category {
    padding: 0 1rem;
  }
}

.home--separator {
  flex: 1;
  top: 0;
  bottom: 0;
  margin: 2rem 0;
  height: 0;
}

.home--separator2 {
  flex: 1;
  top: 0;
  bottom: 0;
  margin: 1rem 0;
  height: 0;
  border-bottom: 2px solid var(--sc-primary-light-background);
}

.home--storyPitchTitle {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 2rem;
  width: -moz-min-content;
  width: min-content;
  white-space: nowrap;
}

.home--storyPitchContainer {
  background-color: var(--sc-surface-background);
  border: 1px solid var(--sc-primary-light-background);
  padding: 1rem;
  border-radius: 0.5rem;
  flex: 1;
}

.home--leaderboardBadge {
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  line-height: calc(4rem - 12px);
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  background-color: var(--sc-primary-light-background);
  border: 6px solid var(--sc-primary-light-background);
  flex-shrink: 0;
}
.home--leaderboardBadge.firstPosition {
  color: #ffe077;
  background-color: #ffb956;
  border-color: #ffd779;
}
.home--leaderboardBadge.secondPosition {
  color: #dee1d4;
  background-color: #9fa0a1;
  border-color: #dee1d4;
}
.home--leaderboardBadge.thirdPosition {
  color: #fa9646;
  background-color: #cc722f;
  border-color: #fa9646;
}

.home--series-preview {
  display: none;
  opacity: 0;
  position: absolute;
  top: 16vw;
  left: 0;
  transition: 0.3s all;
  z-index: 1;
}
.home--series-preview.visible {
  display: flex;
  opacity: 1;
}

.home--demo-banner::after {
  content: "DEMO";
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
  font-weight: bold;
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  color: white;
  background: rgb(220, 29, 29);
  /* transform: translate3d(30%, 50%, 0) rotate(-45deg); */
}

#dashboard--intro__registeredPlayers {
  position: absolute;
  bottom: 4rem;
  left: 0;
  right: 0;
  width: fit-content;
  width: -moz-fit-content;
  /* todo: change color */
  color: var(--sc-primary-background);
  background-color: var(--sc-primary-light-background);
  font-size: 2rem;
  line-height: 2rem;
  font-weight: normal;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  box-shadow: var(--heavy-box-shadow);
  z-index: 3;
}
#dashboard--intro__registeredPlayers * {
  font-size: 2rem;
}

#home--about-us {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  text-align: center;
  background: #F08BA1;
  color: var(--sc-a900);
  margin-top: calc(17vw + 5rem);
  margin-bottom: 17vw;
  padding: 5vw 0;
}
#home--about-us .home--about-us--firstSection {
  margin-top: -10vw;
  padding: 0 16vw;
}
@media only screen and (max-width: 1000px) {
  #home--about-us .home--about-us--firstSection {
    padding: 0 min(10%, 2rem);
  }
}
#home--about-us .home--about-us--topimage {
  bottom: 100%;
}
#home--about-us .home--about-us--bottomimage {
  top: 100%;
}
#home--about-us .home--about-us--topimage,
#home--about-us .home--about-us--bottomimage {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  height: auto;
}
#home--about-us::after {
  content: "";
  left: 0;
  right: 0;
  top: 100%;
  height: 40rem;
  width: 100%;
  background: url("/assets/pages/homepage/aboutus-top.svg") no-repeat top center;
}
#home--about-us > p {
  font-size: 1.6rem;
  text-align: left;
}
#home--about-us #home--about-us__flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 4rem;
  padding: 0 20vw;
}
@media only screen and (max-width: 1000px) {
  #home--about-us #home--about-us__flex-container {
    padding: 0 min(10vw, 2rem);
  }
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card {
  margin-top: 10rem;
  margin-bottom: 10rem;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 1700px) {
  #home--about-us #home--about-us__flex-container .home--aboutUs--card {
    margin-bottom: 20rem;
  }
}
@media only screen and (max-width: 1200px) {
  #home--about-us #home--about-us__flex-container .home--aboutUs--card {
    margin-bottom: 10rem;
  }
}
@media only screen and (max-width: 700px) {
  #home--about-us #home--about-us__flex-container .home--aboutUs--card {
    margin-top: 5rem;
  }
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card > p {
  font-size: 1rem;
  flex: 1;
  padding: 2rem 0;
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card.forplayers {
  justify-content: flex-start;
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card.forwriters {
  justify-content: flex-end;
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card.forartists {
  justify-content: flex-start;
}
@media only screen and (max-width: 1200px) {
  #home--about-us #home--about-us__flex-container .home--aboutUs--card.forplayers {
    justify-content: center;
  }
  #home--about-us #home--about-us__flex-container .home--aboutUs--card.forwriters {
    justify-content: center;
  }
  #home--about-us #home--about-us__flex-container .home--aboutUs--card.forartists {
    justify-content: center;
  }
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--textContainer {
  max-width: min(100%, 30rem);
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--textContainer img.home--aboutUs--svg {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  min-height: calc(100% + 10rem);
  width: calc(100% + 10rem);
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--character {
  position: absolute;
  top: -100%;
  bottom: -100%;
  margin: auto;
  height: 300%;
  width: auto;
  opacity: 0.4;
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--character.forplayers {
  left: calc(100% + 10vw);
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--character.forwriters {
  right: calc(100% + 10vw);
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--character.forartists {
  left: calc(100% + 10vw);
}
@media only screen and (max-width: 1200px) {
  #home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--character {
    display: none;
  }
}
#home--about-us #home--about-us__flex-container .home--aboutUs--card .home--aboutUs--backgroundImage {
  z-index: 0;
  opacity: 0.1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: 50%;
  background-size: cover;
}
#home--about-us #home--about-us__flex-container button {
  margin: 0 auto;
}

#home--dulcetInNumbers {
  text-align: center;
  padding-top: 0;
}
#home--dulcetInNumbers .home--dulcetInNumbers--container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}
#home--dulcetInNumbers .home--dulcetInNumbers--container .home--dulcetInNumbers--card {
  background: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  padding: 3rem 0;
  flex: 1 0 250px;
  border-radius: 0.6rem;
}
#home--dulcetInNumbers .home--dulcetInNumbers--container .home--dulcetInNumbers--card .home--dulcetInNumbers--card--title {
  color: var(--sc-secondary-background);
  font-size: 1.125rem;
}
#home--dulcetInNumbers .home--dulcetInNumbers--container .home--dulcetInNumbers--card .home--dulcetInNumbers--card--description {
  font-size: 2.25rem;
  font-weight: bold;
}
#home--dulcetInNumbers .home--dulcetInNumbers--container .home--dulcetInNumbers--card .home--dulcetInNumbers--card--backgroundImage {
  margin-top: 2rem;
}
#home--dulcetInNumbers .home--dulcetInNumbers--container .home--dulcetInNumbers--card .home--dulcetInNumbers--card--backgroundImage::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  box-shadow: inset 20px 0 40px 5px var(--sc-secondary-light-background), inset -20px 0 10px 5px var(--sc-secondary-light-background);
}
#home--dulcetInNumbers .home--dulcetInNumbers--container .home--dulcetInNumbers--card .home--dulcetInNumbers--card--backgroundImage img {
  width: 100%;
  height: auto;
}

.storyPitchModalClass {
  width: min(30rem, 90vw);
  height: -moz-min-content;
  height: min-content;
  padding: 2rem;
  padding-bottom: 1rem;
}

#index-banner {
  position: relative;
  width: 100%;
  height: 69vw;
  display: grid;
  grid-template-columns: 5.5fr 4.5fr;
  grid-template-areas: "text characters";
  background-image: url("/assets/pages/homepage/banner-background-sweetelite.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  padding: 0 10%;
}

#registeredPlayers {
  --this-div-height: 2vw;
  flex: 1 1 0%;
  position: absolute;
  bottom: calc(100% + 3vw);
  left: -1rem;
  transform: rotate(-5deg);
  color: hsl(39, 93%, 85%);
  font-size: var(--this-div-height);
  line-height: var(--this-div-height);
  font-weight: 400;
  margin: 0vw;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 3;
  border: 4px dotted #f8b332;
  border-radius: 0.6vw;
  padding: 0.6vw;
  background-color: rgba(248, 179, 50, 0.2666666667);
}

#index-div1-gradient {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%; */
  /* background-image: linear-gradient(to right, rgba(104, 38, 102, 0.4), rgba(104, 38, 102, 0.8) 100%); */
  background: linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(46, 41, 78, 0.6666666667) 40%, rgba(46, 41, 78, 0.8));
}

#index-div1-main-text {
  position: relative;
  grid-area: text/text/text/text;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  margin-left: 3vw;
  top: 18vw;
  z-index: 2;
}

#transition1 {
  position: absolute;
  left: 0vw;
  bottom: 0vw;
  width: 100%;
  z-index: 1;
}

#index-div1-characters {
  grid-area: characters/characters/characters/characters;
  z-index: 2;
  position: relative;
  right: 0vw;
  width: 100%;
  height: auto;
  padding-top: 6vw;
}

#index-div1-main-text-title {
  color: var(--sc-grey-000);
  font-size: calc(4.5 * var(--home-page-logged-out-unit));
}

#index-div1-main-text-subtitle {
  color: var(--sc-grey-300);
  font-size: calc(2.4 * var(--home-page-logged-out-unit));
  margin-top: calc(2 * var(--home-page-logged-out-unit));
  margin-bottom: calc(2 * var(--home-page-logged-out-unit));
}

#specialButton {
  --btn--unit: 1.2vw;
  padding: 0 calc(3 * var(--btn--unit));
  font-size: 1.8vw;
  line-height: 4vw;
  height: 4vw;
  border-radius: 4vw;
  margin-top: 2vw;
  width: fit-content;
  width: -moz-fit-content;
  background-color: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
}

.seriesLogoContainer {
  width: auto;
  background-color: var(--sc-surface-background);
  border: 1px solid var(--sc-primary-light-background);
  border-radius: 1rem;
  padding: 1vw 2vw;
}
.seriesLogoContainer > img {
  height: 4vw;
}
.seriesLogoContainer:hover {
  cursor: pointer;
}

.homeLoggedOut--subTitle2 {
  font-size: 1.2rem;
  color: var(--sc-p700);
  width: 100%;
  text-align: center;
}

.homeVariantAvailableGamesLine {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.homeVariantAvailableGamesLine .homeVariantAvailableGamesLine--gameLogo {
  padding: 2rem;
  border-radius: 1rem;
  transition: 0.3s all;
}
.homeVariantAvailableGamesLine .homeVariantAvailableGamesLine--gameLogo:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.homeVariantAvailableGamesLine .homeVariantAvailableGamesLine--gameLogo.selected {
  background-color: var(--sc-surface-background);
}
.homeVariantAvailableGamesLine .homeVariantAvailableGamesLine--gameLogo.selected::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border: 1rem solid transparent;
  border-top-color: var(--sc-surface-background);
}
.homeVariantAvailableGamesLine .homeVariantAvailableGamesLine--gameLogo > img {
  height: 4rem;
  width: auto;
}

.homeVariantAvailableGamesLine--genrePill {
  padding: 0.25rem 0.5rem;
  line-height: 1rem;
  font-size: 0.8rem;
  height: 1.5rem;
  margin-top: 0.5rem;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}

.homeVariantAvailableGamesLine--argumentsContainer > li {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.homeVariantAvailableGamesLine--argumentLine {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.homeVariantAvailableGamesLine--seriesPreviewCard {
  display: flex;
  flex-wrap: wrap;
  align-items: space-around;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  width: fit-content;
  width: -moz-fit-content;
  background-color: var(--sc-surface-background);
  border-radius: 1rem;
  padding: 2rem;
}
.homeVariantAvailableGamesLine--seriesPreviewCard .homeVariantAvailableGamesLine--seriesPreviewCard--image {
  width: clamp(min(20rem, 100%), 33%, 100%);
  margin: 0 auto;
}
.homeVariantAvailableGamesLine--seriesPreviewCard .homeVariantAvailableGamesLine--seriesPreviewCard--image img {
  width: 100%;
}
.homeVariantAvailableGamesLine--seriesPreviewCard .homeVariantAvailableGamesLine--seriesPreviewCard--description {
  flex: 1;
  min-width: min(30rem, 100%);
}

.home--post {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  margin-top: 3rem;
}
.home--post > * {
  padding: 2rem;
  background-color: transparent;
  box-shadow: none;
}
.home--post .postDescription {
  display: flex;
  justify-content: space-between;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-radius: 1rem 1rem 0 0;
}
.home--post.postType--ACHIEVEMENT .postSection {
  display: flex;
  gap: 1rem;
}
.home--post.postType--ACHIEVEMENT .postSection img {
  width: 5rem;
  height: 5rem;
}
.home--post.postType--ACHIEVEMENT .postSection div {
  font-size: 1.6rem;
  line-height: 2rem;
  padding: 1.5rem 0;
  font-weight: bold;
}
.home--post.postType--LORE .postSection .postSection--title {
  font-size: 1.2rem;
  font-weight: bold;
}
.home--post.postType--ILLUSTRATION .postSection .postSection--title {
  font-size: 1.2rem;
  font-weight: bold;
}

.home--upToDate {
  height: 10rem;
  width: 100%;
  padding: 2rem;
}
.home--upToDate .home--upToDate--oneLiner {
  padding: 4rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: 2rem;
  width: 100%;
}

.timelineEntry--pageview .timelineEntry--pageview--mainLine {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 1.6rem;
}
.timelineEntry--pageview .timelineEntry--pageview--page {
  padding: 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  line-height: 0.8rem;
  height: 1.6rem;
}

.timelineEntry--playthrough .timelineEntry--playthrough--mainLine {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 1.6rem;
}
.timelineEntry--playthrough .timelineEntry--playthrough--chapterTitle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  line-height: 1.6rem;
  font-size: 1rem;
  font-weight: bold;
}
.timelineEntry--playthrough .timelineEntry--playthrough--chapterTitle .timelineEntry--playthrough--seriesIcon {
  height: 1.6rem;
  width: 1.6rem;
}
.timelineEntry--playthrough .timelineEntry--playthrough--page {
  padding: 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  line-height: 0.8rem;
  height: 1.6rem;
}

.playthrough-line--progress {
  grid-area: progress;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.playthrough-line--progress > .progress--container {
  margin: 0.5rem 0 !important;
  height: 1rem !important;
}

.playthrough-line--badges {
  grid-area: badges;
}

.playthrough-line--percentageCompletion {
  grid-area: percentageCompletion;
}

.playthrough-line--created_at {
  grid-area: created_at;
}

.timelineEntry--playthrough--currencyBubble {
  border-radius: 5rem;
  padding: 0.5rem 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.timelineEntry--playthrough--currencyBubble.darkToast {
  background-color: var(--dg-color-toasts-dark);
  color: white;
}
.timelineEntry--playthrough--currencyBubble.diamondsToast {
  background-color: var(--color-diamonds-light);
  color: var(--color-on-diamonds-light);
}
.timelineEntry--playthrough--currencyBubble.keysToast {
  background-color: var(--color-keys-light);
  color: var(--color-on-keys-light);
}
.timelineEntry--playthrough--currencyBubble.usdToast {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.timelineEntry--playthrough--currencyBubble .timelineEntry--playthrough--currencyBubble--text {
  font-size: 1.6rem;
  font-weight: bold;
}

.timelineEntry--playthrough--smallFlex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timelineEntry--playthrough--mediumFlex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.timelineEntry--giftBubble {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  align-items: center;
  background-color: var(--color-keys-light);
  color: var(--color-on-keys-light);
}
.timelineEntry--giftBubble .timelineEntry--giftBubble--text {
  font-size: 1.6rem;
  font-weight: bold;
}
.timelineEntry--giftBubble .timelineEntry--giftBubble--image {
  width: 3rem;
}

#userTimelineTab::before {
  content: "";
  position: absolute;
  width: 2px;
  left: calc(1rem - 1px);
  top: 1rem;
  height: calc(100% - 1rem);
  background: var(--sc-primary-light-background);
}
#userTimelineTab .timelineEntry {
  margin-left: 3rem;
}
#userTimelineTab .timelineEntry:not(:first-child) {
  margin-top: 1rem;
}
#userTimelineTab .timelineIcon {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -2.8rem;
  font-size: 0.8rem;
  height: 1.6rem;
  width: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  border-radius: 1rem;
}
#userTimelineTab .timelineIcon.pageview {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
}
#userTimelineTab .timelineIcon.pageview-new {
  color: var(--sc-secondary-foreground);
  background-color: var(--sc-secondary-background);
}
#userTimelineTab .timelineIcon.playthrough {
  color: var(--sc-info-foreground);
  background-color: var(--sc-info-background);
}
#userTimelineTab .timelineIcon.purchase {
  color: var(--sc-success-foreground);
  background-color: var(--sc-success-background);
}
#userTimelineTab .timelineIcon.gift {
  color: var(--color-on-keys-light);
  background-color: var(--color-keys-light);
}
#userTimelineTab .timelineIcon.signup {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
}

.userTimeline--subtleText {
  color: var(--sc-grey-600);
  font-size: 0.8rem;
}

/* ! BEG: General ===========================================================================*/
section.profile-section.no-padding {
  padding: 0;
}

section.profile-section {
  padding: 2rem;
}

/* used for followers, friends & notifications */
.button.square:hover {
  transform: scale(1.1);
}

.button.square {
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 3rem;
  border-radius: 50%;
}

/* ! END: General ===========================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Header/Banner =====================================================================*/
#profile--background-banner {
  position: relative;
  width: 100%;
  height: 20rem;
  margin: 0;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  box-shadow: inset 0 0 0.6rem #000;
  /* -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000; */
}

#profile--background-profile-pic--container {
  top: calc(100% - 3rem);
  left: 8rem;
  right: 0;
  margin: 0;
  height: 8rem;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  grid-template-areas: "pic ." "pic username" "pic joindate";
  grid-template-columns: 8rem auto;
  grid-template-rows: 4rem 2rem 2rem;
}

#js-profile-pic-canvasImg {
  width: 100%;
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

#profile--button--edit-picture {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 2rem;
  font-size: 1rem;
  line-height: 2.5rem;
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
}

.js-canvas--temporary--viewer.js-profile-pic-crop {
  border-radius: 50%;
}

.js-canvas--temporary--viewer.js-profile-avatar-crop {
  border-radius: 1rem;
}

.js-canvas--temporary--viewer {
  background-color: var(--sc-surface-background);
  box-shadow: var(--heavy-box-shadow);
  margin: 0 auto;
  width: 100%;
}

#js-profile--avatar-image--container {
  width: 100%;
}

#js-profile--avatar-image.placeholder {
  min-height: 50rem;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1);
  box-shadow: var(--std-box-shadow);
}

#js-profile--avatar-image {
  width: 100%;
  border-radius: 1rem;
}

#profile--background-profile-pic {
  grid-area: pic;
  width: 8rem;
  height: 8rem;
  padding: 0;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
  border-radius: 50%;
  text-align: center;
  margin: 0;
}

#profile--button--edit-cover-background {
  position: absolute;
  bottom: 1rem;
  right: 4rem;
}

#profile--background-username {
  grid-area: username;
  font-size: 2rem;
  line-height: 2rem;
  height: 2rem;
  /* padding-top: 2rem; */
  margin-left: 1rem;
  width: -moz-fit-content;
  width: fit-content;
}

#profile--background-joindate {
  grid-area: joindate;
  font-size: 0.8rem;
  line-height: 1.5rem;
  height: 2rem;
  padding-bottom: 0.5rem;
  margin-left: 1rem;
  width: -moz-fit-content;
  width: fit-content;
}

#profile--background-friends--container > * {
  margin-left: 2rem;
}

#profile--background-friends--container {
  position: absolute;
  top: 100%;
  right: 8rem;
  margin: 1rem;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
}

#js-profile--followers:hover {
  transform: scale(1.05);
  cursor: pointer;
}

#js-profile--followers::before {
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
  font-size: 1rem;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

#js-profile--followers {
  height: 3rem;
  font-size: 1.5rem;
  line-height: 3rem;
  padding: 0 1.5rem;
  padding-right: 3rem;
  margin-left: 1rem;
  border-radius: 0.5rem;
}

.check-icon {
  position: absolute;
  bottom: -0.4rem;
  right: -0.4rem;
  border-radius: 50%;
  color: var(--sc-success-foreground);
  background: var(--sc-success-background);
  padding: 0.3rem;
  height: 1.4rem;
  width: 1.4rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 0.8rem;
}

#js-profile--followers--count {
  height: 3rem;
  font-size: 1rem;
  line-height: 3rem;
}

.js-follower-line > div:first-child {
  flex: 1;
}

.js-follower-line > div {
  font-size: 1rem;
  line-height: 3rem;
  height: 3rem;
}

.js-follower-line:hover {
  transform: scale(1.02);
}

.js-follower-line {
  margin-top: 1rem;
  padding: 0 1rem;
  height: 3rem;
  text-decoration: none;
  display: flex;
  gap: 1rem;
  transition: 0.3s all;
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
}

.js-follower-line.follower {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

.js-follower-line.following {
  background: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
}

.js-avatar-line > img {
  height: 2rem;
  width: 2rem;
  margin: 0.5rem 0;
}

.js-avatar-line > div {
  font-size: 1rem;
  line-height: 3rem;
  height: 3rem;
}

.js-avatar-line:hover {
  transform: scale(1.02);
}

.js-avatar-line {
  margin-top: 1rem;
  padding: 0 1rem;
  height: 3rem;
  text-decoration: none;
  display: flex;
  gap: 1rem;
  transition: 0.3s all;
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
}

/* ! END: Header/Banner =====================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Bio / Social Media ================================================================*/
#profile--bio-media--container {
  display: grid;
  grid-template-areas: "bio avatar";
  margin-top: 6rem;
  padding: 4rem;
  grid-template-columns: 80% 20%;
  grid-gap: 2rem;
}

#profile--bio--container {
  width: 100%;
  padding-right: 6rem;
  padding-left: 2rem;
}
#profile--bio--container .dg-tabs--container {
  min-height: 20rem;
}

#profile--avatar-image {
  grid-area: avatar;
  width: 100%;
  height: 40rem;
  background: black;
  color: white;
  text-align: center;
  padding: 8rem 0;
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}

#edit-bio:hover {
  transform: scale(1.1);
  cursor: pointer;
}

#edit-bio {
  display: block;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  height: 2rem;
  width: 2rem;
  margin: 1rem;
  color: var(--sc-primary-background);
  border-radius: 50%;
  transition: 0.3s all;
}

.edit-email-line > .fas:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.edit-email-line > * {
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
  transition: 0.3s all;
}

.edit-email-line {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ! END: Bio / Social Media ================================================================*/
/*  */
/*  */
/*  */
/* ! BEG: Tabs Sub-Section ==================================================================*/
#profile--tabs-container {
  margin-top: 4rem;
}

form {
  width: 100%;
}

/* "Chapters" tab */
#tab-profile--chapters {
  padding-top: 2rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* auto-fill vs auto-fit */
  /* https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ */
  grid-gap: 2rem;
}
#tab-profile--chapters.no-chapters.selected {
  display: block;
}
#tab-profile--chapters.selected {
  display: grid;
}

/* ! END: Tabs Section ======================================================================*/
/*  */
/*  */
/*  */
#terms-body,
#parents-body {
  padding: 4rem 10%;
}
#terms-body h2,
#parents-body h2 {
  font-family: "Roboto", sans-serif;
  font-size: 3rem;
  margin-left: 0;
  width: fit-content;
  width: -moz-fit-content;
  margin-top: 20px;
  margin-bottom: 20px;
}

#terms-body .dg-tab {
  margin-top: 2rem;
}

.ThemePrimitivesSizes--container div {
  background-color: burlywood;
  min-width: 10rem;
}

.themeTypography-flexContainer {
  display: flex;
  gap: 2rem;
  justify-content: space-evenly;
}

.themeTypography--dividerBorder {
  width: 80%;
  height: 4px;
  margin: 2rem auto;
  border-radius: 2px;
  background-color: var(--sc-grey-300);
}

#themeColors h2:not(:first-child) {
  margin-top: 1rem;
}

.themeColors__colorGrid {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}
.themeColors__colorGrid > div {
  min-width: 25%;
}

.themeColors__colorRow {
  display: flex;
  gap: 1rem;
}
.themeColors__colorRow:not(:first-child) {
  margin-top: 1rem;
}
.themeColors__colorRow div {
  min-height: 40px;
  min-width: 40px;
  border-radius: 4px;
  line-height: 40px;
}

.themeColors__colorCard {
  width: 100%;
}
.themeColors__colorCard .bigSection {
  flex: 1;
  padding: 1rem;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.themeColors__colorCard .lineSection {
  display: flex;
}
.themeColors__colorCard .lineSection div {
  flex: 1;
  height: 40px;
}
.themeColors__colorCard .lineSection div:first-child {
  border-bottom-left-radius: 4px;
}
.themeColors__colorCard .lineSection div:last-child {
  border-bottom-right-radius: 4px;
}

#themeController table td {
  text-align: center;
}
#themeController table td button {
  margin: 0 auto;
}
#themeController table td:first-child {
  text-align: right;
}
#themeController table thead td {
  font-size: 1.2rem;
  font-weight: bold;
}
#themeController table tbody td:first-child {
  line-height: 2.3rem;
}
#themeController table tbody tr:first-child td:not(:first-child) {
  border-top: 2px dashed var(--sc-primary-background);
}
#themeController table tbody tr:last-child td:not(:first-child) {
  border-bottom: 2px dashed var(--sc-primary-background);
}
#themeController table tbody td:last-child {
  border-right: 2px dashed var(--sc-primary-background);
}
#themeController table tbody td:nth-child(2) {
  border-left: 2px dashed var(--sc-primary-background);
}

.button-theme-section {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  gap: 0.5rem;
}

#themeController {
  background-color: var(--sc-background);
}
#themeController .dg-tab {
  margin-top: 2rem;
}
#themeController section {
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
}
#themeController section .themePage--sectionHeader {
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  padding: 2rem 4rem;
  border-radius: 1rem 1rem 0 0;
}
#themeController section .themePage--sectionBody {
  padding: 2rem 4rem;
}

.theme--row {
  gap: 1rem;
  margin-bottom: 1rem;
}

#themeController .flex-container {
  /* width: fit-content;
  width: -moz-fit-content; */
  gap: 1rem;
  margin-bottom: 1rem;
}

#themeController .tooltip-container {
  width: fit-content;
  width: -moz-fit-content;
}

.dg-theme-sc-test {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.dg-theme-sc-test > div {
  flex: 1 1 300px;
}
.dg-theme-sc-test.primary {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
}
.dg-theme-sc-test.primary:hover {
  color: var(--sc-primary-foreground-hover);
  background-color: var(--sc-primary-background-hover);
}
.dg-theme-sc-test.primary-light {
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
}
.dg-theme-sc-test.primary-light:hover {
  color: var(--sc-primary-light-foreground-hover);
  background-color: var(--sc-primary-light-background-hover);
}
.dg-theme-sc-test.secondary {
  color: var(--sc-secondary-foreground);
  background-color: var(--sc-secondary-background);
}
.dg-theme-sc-test.secondary:hover {
  color: var(--sc-secondary-foreground-hover);
  background-color: var(--sc-secondary-background-hover);
}
.dg-theme-sc-test.secondary-light {
  color: var(--sc-secondary-light-foreground);
  background-color: var(--sc-secondary-light-background);
}
.dg-theme-sc-test.secondary-light:hover {
  color: var(--sc-secondary-light-foreground-hover);
  background-color: var(--sc-secondary-light-background-hover);
}
.dg-theme-sc-test.background {
  color: var(--sc-foreground);
  background-color: var(--sc-background);
}
.dg-theme-sc-test.surface {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
}

.dg-theme-sc-text {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.dg-theme-sc-text.primary {
  color: var(--sc-primary-background);
}
.dg-theme-sc-text.primary:hover {
  color: var(--sc-primary-background-hover);
}
.dg-theme-sc-text.primary-light {
  color: var(--sc-primary-light-background);
}
.dg-theme-sc-text.primary-light:hover {
  color: var(--sc-primary-light-background-hover);
}
.dg-theme-sc-text.secondary {
  color: var(--sc-secondary-background);
}
.dg-theme-sc-text.secondary:hover {
  color: var(--sc-secondary-background-hover);
}
.dg-theme-sc-text.secondary-light {
  color: var(--sc-secondary-light-background);
}
.dg-theme-sc-text.secondary-light:hover {
  color: var(--sc-secondary-light-background-hover);
}
.dg-theme-sc-text.background {
  color: var(--sc-background);
}
.dg-theme-sc-text.surface {
  color: var(--sc-surface-background);
}

.theme--avatarSquare {
  border: 2px solid var(--sc-primary-background);
  box-shadow: var(--std-box-shadow);
}

.theme--dragdrop--invisible-square {
  width: 40rem;
  height: 20rem;
  background: var(--sc-surface-background);
  border: 2px solid var(--sc-primary-background);
}
.theme--dragdrop--invisible-square .theme--dragdrop--invisible-square--text {
  padding: 9rem 0;
  line-height: 2rem;
  text-align: center;
}

#seriesMenu--currentSeries {
  background: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  border-radius: 0.5rem;
  display: flex;
  padding: 0.5rem;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem !important;
}
#seriesMenu--currentSeries::after {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  width: 50%;
  height: 2px;
  background: var(--sc-header-foreground);
  border-radius: 2px;
}

#seriesMenu--demoDiv {
  background: rgb(220, 29, 29) !important;
  color: white !important;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

#seriesMenu--community {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  pointer-events: none;
  transition: 0.3s all;
}
#seriesMenu--community:hover {
  cursor: pointer;
}
#seriesMenu--community:hover .seriesMenu--community--title {
  box-shadow: var(--heavy-box-shadow);
}
#seriesMenu--community:hover .seriesMenu--community--icon {
  box-shadow: var(--heavy-box-shadow);
}
#seriesMenu--community .seriesMenu--community--title {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  padding-top: 0.5rem;
  padding-left: 2rem;
  padding-bottom: 0.5rem;
  padding-right: 3rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  height: 2.6rem;
  font-weight: bold;
  box-shadow: var(--std-box-shadow);
  pointer-events: auto;
  transition: 0.3s all;
  flex: 1;
}
#seriesMenu--community .seriesMenu--community--icon {
  background-color: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
  height: 4rem;
  width: 4rem;
  border-radius: 3rem;
  font-size: 2rem;
  line-height: 4rem;
  text-align: center;
  margin-left: -2rem;
  box-shadow: var(--std-box-shadow);
  pointer-events: auto;
  transition: 0.3s all;
}

/*
	CSS DOCUMENT
	PROPERTY OF DULCET GAMES INC.

	March 7, 2018
*/
/* table.avatar-table tr { background-color: transparent; } */
/* table.avatar-table td { border: none; } */
table.avatar-table td:first-child {
  width: 30%;
}

table.avatar-table td:last-child {
  text-align: center;
}

.avatar-table--edit-button:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.avatar-table--edit-button {
  margin: 0;
  width: 100%;
  transition: 0.3s all;
}

#avatar--public-chapter {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* auto-fill vs auto-fit */
  /* https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ */
  grid-gap: 2rem;
}

/* width: 2/5 of the screen*/
#profile-image {
  width: 40%;
  display: block;
}

/* width: 3/5 of the screen*/
#profile-description-container {
  width: 60%;
  display: block;
}

#profile-description-container section {
  margin-top: 4rem;
}

#js-profile-attributes-container {
  padding: 0.5rem;
  min-height: 6rem;
  box-shadow: var(--std-box-shadow);
}

.isWipOrSpContainer {
  height: calc(100vh - 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
}

#seriesMenu--backgroundImage {
  position: absolute;
  height: 100%;
  width: 100%;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0.5;
  z-index: 0;
}

#seriesMenu--authorsnote {
  display: flex;
  gap: 1rem;
}
#seriesMenu--authorsnote .seriesMenu--authorsnote--profilepic--container {
  position: absolute;
  right: calc(100% + 1rem);
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#seriesMenu--authorsnote .seriesMenu--authorsnote--profilepic--container .seriesMenu--authorsnote--profilepic {
  height: 4rem;
  width: 4rem;
  border-radius: 4rem;
  animation-duration: 0.3s;
  transition: 0.3s all;
  box-shadow: var(--std-box-shadow);
}
#seriesMenu--authorsnote .seriesMenu--authorsnote--profilepic--container .seriesMenu--authorsnote--profilepic:hover {
  cursor: pointer;
  box-shadow: var(--heavy-box-shadow);
}
#seriesMenu--authorsnote .seriesMenu--authorsnote--card {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  animation-duration: 0.3s;
  transition: 0.3s all;
}
#seriesMenu--authorsnote .seriesMenu--authorsnote--card::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: 100%;
  border: 0.5rem solid transparent;
  border-right-color: var(--sc-surface-background);
}
#seriesMenu--authorsnote .seriesMenu--authorsnote--card .seriesMenu--authorsnote--card--title {
  font-size: x-large;
  font-weight: bold;
}

.seriesMenu--storyPitch--card {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  animation-duration: 0.3s;
  transition: 0.3s all;
}
.seriesMenu--storyPitch--card .seriesMenu--authorsnote--card--title {
  font-size: x-large;
  font-weight: bold;
}

#seriesDashboard--community {
  position: absolute;
  top: 2rem;
  right: 4rem;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  pointer-events: none;
  transition: 0.3s all;
}
#seriesDashboard--community:hover {
  cursor: pointer;
}
#seriesDashboard--community:hover .seriesDashboard--community--title {
  box-shadow: var(--heavy-box-shadow);
}
#seriesDashboard--community:hover .seriesDashboard--community--icon {
  box-shadow: var(--heavy-box-shadow);
}
#seriesDashboard--community .seriesDashboard--community--title {
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  padding-top: 0.5rem;
  padding-left: 2rem;
  padding-bottom: 0.5rem;
  padding-right: 3rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  height: 2.6rem;
  font-weight: bold;
  box-shadow: var(--std-box-shadow);
  pointer-events: auto;
  transition: 0.3s all;
}
#seriesDashboard--community .seriesDashboard--community--icon {
  background-color: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
  height: 4rem;
  width: 4rem;
  border-radius: 3rem;
  font-size: 2rem;
  line-height: 4rem;
  text-align: center;
  margin-left: -2rem;
  box-shadow: var(--std-box-shadow);
  pointer-events: auto;
  transition: 0.3s all;
}

#seriesMenu--back {
  position: absolute;
  top: 2rem;
  left: 4rem;
}

#seriesDashboard--main-section {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}

#seriesDashboard--logoSnapshot--line {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
@media only screen and (max-width: 651px) {
  #seriesDashboard--logoSnapshot--line {
    flex-wrap: wrap;
  }
}
#seriesDashboard--logoSnapshot--line > .lineItem {
  width: fit-content;
  width: -moz-fit-content;
  font-size: 1rem;
  line-height: 1.3rem;
  padding: 0.5rem 1rem;
  height: 2.3rem;
  color: var(--sc-foreground);
  background: var(--sc-background);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}
#seriesDashboard--logoSnapshot--line > .lineItem i {
  margin-right: 0.5rem;
}
#seriesDashboard--logoSnapshot--line > .lineItem.authorName {
  font-style: italic;
}
#seriesDashboard--logoSnapshot--line > .lineItem > .rating > span {
  font-weight: bold;
}
#seriesDashboard--logoSnapshot--line > .lineItem.secondary {
  color: var(--sc-secondary-light-foreground);
  background: var(--sc-secondary-light-background);
}

.characters--character-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 20rem;
  width: 20rem;
  height: calc(100vh - 4rem - 3rem - 2rem - (2 * 2rem));
  background-color: var(--sc-surface-background);
  overflow: hidden;
  border: 2px solid var(--sc-primary-light-background);
  border-radius: 1rem;
  margin: 2rem 0;
  transition: 0.3s box-shadow, 0.3s border, 1000ms margin-left 0.9s, 1000ms margin-right 0.9s;
  background-size: cover;
  background-position: center;
}
.characters--character-container:first-child {
  margin-left: 2rem;
}
.characters--character-container:hover {
  cursor: pointer;
  border: 2px solid var(--sc-primary-background);
  background-color: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
  z-index: 1;
}
.characters--character-container .characters--character--sprite {
  position: absolute;
  height: calc(calc(100vh - 4rem - 3rem - 2rem - (2 * 2rem)) - 6rem);
  top: 0;
  left: 50%;
  width: auto;
  flex: 1;
  transform: translateX(-50%);
}
.characters--character-container .characters--character--isDatable-heart {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: var(--sc-secondary-foreground);
  background-color: var(--sc-secondary-background);
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5rem 0;
  height: 2rem;
  width: 2rem;
  text-align: center;
  border-radius: 50%;
  z-index: 1;
}
.characters--character-container .characters--character--description {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 20rem;
  height: 6rem;
  padding: 1rem;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-top: 2px solid var(--sc-surface-foreground);
  border-radius: 0 0 1rem 1rem;
}
.characters--character-container .characters--character--description .characters--character--description--title {
  font-size: 1.5rem;
  line-height: 2rem;
  height: 2rem;
  font-weight: bold;
}
.characters--character-container .characters--character--description .characters--character--description--subtitle {
  font-size: 1rem;
  height: 1.5rem;
  line-height: 1.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

.characters--selectedCharacterContainer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: var(--sc-surface-background);
  height: calc(100vh - 4rem);
  z-index: 1;
  overflow: hidden;
}
.characters--selectedCharacterContainer::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300%;
  background: var(--sc-primary-light-background);
  z-index: -1;
  transform: translate3d(-57%, -50%, 0) rotate(20deg);
}
.characters--selectedCharacterContainer .characters--selectedCharacterContainer--sprite {
  position: absolute;
  top: 4rem;
  left: 2rem;
  width: auto;
  height: calc(100% - 4rem);
  flex: 1;
}
.characters--selectedCharacterContainer .characters--selectedCharacter--description {
  position: absolute;
  left: 4rem;
  right: auto;
  bottom: 4rem;
  padding: 1rem;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 0 0 1rem 1rem;
  min-width: 30rem;
  max-width: 50%;
  width: fit-content;
  width: -moz-fit-content;
  background-color: transparent;
  color: var(--sc-primary-foreground);
  height: 6rem;
}
.characters--selectedCharacterContainer .characters--selectedCharacter--description::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: var(--sc-primary-background);
  border-radius: 1rem;
  opacity: 0.8;
  box-shadow: var(--std-box-shadow);
}
.characters--selectedCharacterContainer .characters--selectedCharacter--description .characters--selectedCharacter--title {
  font-size: 4rem;
  line-height: 5.5rem;
  height: 5.5rem;
  overflow: visible;
  white-space: nowrap;
}
.characters--selectedCharacterContainer .characters--selectedCharacter--description .characters--selectedCharacter--subtitle {
  position: absolute;
  top: 5.5rem;
  left: 0;
  padding: 0 1rem;
  margin: 1rem 0;
  width: 100%;
  height: 4.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}
.characters--selectedCharacterContainer .characters--character--close-button {
  position: absolute;
  top: 0.85rem;
  left: 4rem;
}
.characters--selectedCharacterContainer .characters--character--attributes {
  overflow-y: auto;
  height: 100%;
  width: 70%;
  margin-left: 30%;
  padding: 2rem 4rem;
  padding-left: 20%;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--attribute-description--container {
  padding: 2rem;
  border-radius: 1rem;
  background-color: var(--sc-background);
  color: var(--sc-foreground);
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--attribute-description--container p {
  font-size: 1.1rem;
  line-height: 2rem;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--title--container {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 3rem;
  height: 3rem;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--title--container .characters--character--cgs--title {
  font-size: 2rem;
  line-height: 3rem;
  height: 3rem;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--title--container i {
  position: absolute;
  right: calc(100% + 1rem);
  top: 0;
  bottom: 0;
  margin: 0;
  font-size: 2rem;
  line-height: 3rem;
  height: 3rem;
  text-align: right;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: center;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--container .characters--character--cg:hover button {
  display: flex;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--container .characters--character--cg button {
  position: absolute;
  display: none;
  bottom: 1rem;
  right: 1rem;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--container .characters--character--cg--image {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cgs--container .characters--character--cg--image img {
  border-radius: 0.5rem;
}
.characters--selectedCharacterContainer .characters--character--attributes .characters--character--cg--no-cg-associated {
  padding: 2rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  line-height: 2rem;
  background-color: var(--sc-background);
  color: var(--sc-foreground);
}
.characters--selectedCharacterContainer .characters--character--attributes {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-duration: 1000ms;
}

#characters--selectedCharacterContainer--top-navigation-menu {
  margin: 0 auto;
  display: flex;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: var(--sc-primary-foreground);
  color: var(--sc-primary-background);
  padding: 0.85rem;
  box-shadow: var(--std-box-shadow);
  z-index: 1;
}
#characters--selectedCharacterContainer--top-navigation-menu div {
  line-height: 2.3rem;
  height: 2.3rem;
}
#characters--selectedCharacterContainer--top-navigation-menu div:hover {
  cursor: pointer;
}
#characters--selectedCharacterContainer--top-navigation-menu .previousNextCharacter {
  width: -moz-fit-content;
  width: fit-content;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1.2rem;
  padding: 0 1rem;
}
#characters--selectedCharacterContainer--top-navigation-menu .currentCharacter {
  width: -moz-fit-content;
  width: fit-content;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 1rem;
}

#characters--page-container {
  width: 100%;
  height: calc(100vh - 4rem);
  padding-top: 2rem;
}

/* 
	! Horizontal Scrolling: https://codepad.co/snippet/pure-css-horizontal-scroll-experiment
*/
.characters--character--horizontal-scroll {
  display: flex;
  gap: 3rem;
  padding: 0 2rem;
  width: calc(100% - 10rem);
  height: 100%;
  margin: 0;
  overflow-x: auto;
}
.characters--character--horizontal-scroll::-webkit-scrollbar {
  height: 1rem;
  width: 1rem;
}
.characters--character--horizontal-scroll.is-selected {
  padding: 0;
}

#characters--character--leftside-fade {
  background: linear-gradient(to left, transparent, var(--sc-primary-light-background) 90%);
}

#characters--character--rightside-fade {
  background: linear-gradient(to right, transparent, var(--sc-primary-light-background) 90%);
}

.characters__moveArrow {
  height: 100vh;
  height: calc(100vh - 4rem - 3rem - 2rem);
  width: 5rem;
  transition: 1000ms all;
}
.characters__moveArrow:hover {
  cursor: pointer;
  filter: brightness(0.8);
}
.characters__moveArrow .fas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 5rem;
  width: 5rem;
  text-align: center;
  font-size: 3rem;
  line-height: 5rem;
  color: var(--sc-primary-light-foreground);
}

#clothes-store {
  display: flex;
  height: calc(100vh - 4rem);
  gap: 2rem;
  overflow-y: scroll;
}
#clothes-store #clothes-store--avatarContainer {
  flex: 3;
}
#clothes-store #clothes-store--avatarContainer .clothes-store--avatarImage {
  position: absolute;
  left: 0;
  right: 0;
  top: 2rem;
  width: 100%;
  height: auto;
}
#clothes-store #clothes-store--avatarContainer #clothes-store--customActions--container {
  position: absolute;
  top: 1rem;
  left: 0;
  display: flex;
  gap: 1rem;
  width: 100%;
}
#clothes-store #clothes-store--avatarContainer #clothes-store--customActions--container > .tooltip-container {
  width: 2.3rem;
}
#clothes-store #clothes-store--avatarContainer #clothes-store--customActions--container #clothes-store--saveAppearance {
  width: fit-content !important;
  width: -moz-fit-content !important;
}
#clothes-store #clothes-store--categoriesContainer {
  flex: 3;
}
#clothes-store #clothes-store--categoriesContainer #clothes-store--categoriesTitle {
  padding: 0.5rem 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 2rem;
  border: 1px solid transparent;
}
#clothes-store #clothes-store--categoriesContainer .clothes--categoryButton {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: 0.3s all;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border: 2px solid transparent;
  box-shadow: var(--std-box-shadow);
}
#clothes-store #clothes-store--categoriesContainer .clothes--categoryButton:first-child {
  margin-top: 0;
}
#clothes-store #clothes-store--categoriesContainer .clothes--categoryButton:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
  border-color: var(--sc-primary-light-background);
}
#clothes-store #clothes-store--categoriesContainer .clothes--categoryButton.selected {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  border-color: var(--sc-primary-background);
}
#clothes-store #clothes-store--categoriesContainer .clothes--categoryButton.selected::before {
  content: "";
  border: 0.7rem solid transparent;
  border-right-color: var(--sc-primary-background);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 0;
  height: 0;
  margin: auto 0;
}
#clothes-store #clothes-store--clothingItemsContainer {
  flex: 5;
  display: grid;
  background: var(--sc-surface-background);
  grid-gap: 1rem;
  padding: 1rem;
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  grid-template-columns: repeat(auto-fill, 8rem);
  grid-template-rows: repeat(auto-fill, 8rem);
  justify-content: center;
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--unequipItemButton {
  height: 8rem;
  width: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--sc-primary-background);
  border-radius: 1rem;
  background-color: var(--sc-primary-light-background);
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--unequipItemButton > i.fas {
  color: var(--sc-primary-background);
  font-size: 4rem;
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--unequipItemButton:hover {
  cursor: pointer;
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--unequipItemButton:hover img {
  box-shadow: var(--std-box-shadow);
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 8rem;
  width: 8rem;
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  border: 2px solid transparent;
  transition: 0.3s all;
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton:hover {
  cursor: pointer;
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton:hover img {
  box-shadow: var(--std-box-shadow);
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton.owned {
  border-color: var(--sc-success-background);
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton.selected img {
  border-color: var(--sc-primary-background);
}
#clothes-store #clothes-store--clothingItemsContainer .clothes--itemButton.selected::after {
  content: "";
  border: 0.7rem solid transparent;
  border-top-color: var(--sc-primary-background);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 0;
  height: 0;
  margin: 0 auto;
}
#clothes-store #clothesStore__SerieCurrencyCountButton {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  z-index: 1;
}

#clothes-store--colorsPopup {
  position: absolute;
  width: min(50rem, 100% - 2rem);
  max-height: calc(4 * (6rem + 1rem) + 1rem);
  left: -50rem;
  right: -50rem;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 1rem;
  z-index: 1;
  background-color: var(--sc-background);
  color: var(--sc-foreground);
  box-shadow: var(--heavy-box-shadow);
  overflow-y: auto;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer-titleline {
  display: flex;
  grid-column: 1/-1;
  margin-bottom: 1rem;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer-titleline #clothes-store--colorsContainer-titleline-title {
  font-size: 2.3rem;
  line-height: 2.3rem;
  flex: 1;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, 6rem);
  justify-content: center;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer::-webkit-scrollbar {
  height: 1rem;
  width: 1rem;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 1rem;
  border: 2px solid transparent;
  height: 6rem;
  width: 6rem;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  border: 2px solid transparent;
  transition: 0.3s all;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton:hover {
  cursor: pointer;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton:hover img {
  border-color: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton::after {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  height: 2rem;
  width: 2rem;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 2rem;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton.owned::after {
  content: "\f00c";
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton.available-for-purchase::after {
  content: "\f07a";
  background-color: var(--sc-info-background);
  color: var(--sc-info-foreground);
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton.selected {
  border-radius: 6rem;
}
#clothes-store--colorsPopup #clothes-store--colorsContainer .clothes--colorButton.selected img {
  border-color: var(--sc-primary-background);
}

#clothes-store--cart-container {
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  margin-bottom: 2rem;
  overflow: hidden;
}
#clothes-store--cart-container .clothes--cart--title {
  display: flex;
  height: 2.3rem;
}
#clothes-store--cart-container .clothes--cart--title .clothes--cart--title--string {
  font-size: 2rem;
  line-height: 2.3rem;
  height: 2.3rem;
  flex: 1;
}
#clothes-store--cart-container .clothes--cartItem {
  display: flex;
  gap: 0.5rem;
  background: var(--sc-background);
  color: var(--sc-foreground);
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  transition: 0.3s all;
  overflow: hidden;
}
#clothes-store--cart-container .clothes--cartItem:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
#clothes-store--cart-container .clothes--cartItem .clothes--cartItem--thumbnail {
  height: 3rem;
  width: 3rem;
  border-radius: 0.5rem 0 0 0.5rem;
}
#clothes-store--cart-container .clothes--cartItem .clothes--cartItem--name {
  height: 3rem;
  font-size: 1rem;
  line-height: 3rem;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}
#clothes-store--cart-container .clothes--cartItem .clothes--cartItem--price {
  height: 3rem;
  font-size: 1rem;
  line-height: 3rem;
  padding-right: 1rem;
}
#clothes-store--cart-container .clothes--cart--subtotal {
  display: flex;
  margin-top: 1rem;
  gap: 0.5rem;
}
#clothes-store--cart-container .clothes--cart--subtotal .clothes--cart--subtotal--title {
  font-size: 1.5rem;
  line-height: 1.5rem;
  flex: 1;
}
#clothes-store--cart-container .clothes--cart--subtotal .clothes--cart--subtotal--number {
  font-size: 1.5rem;
  line-height: 1.5rem;
}
#clothes-store--cart-container .clothes--cart--subtotal .clothes--cart--subtotal--currencyImage {
  height: 1.5rem;
  width: 1.5rem;
}

#view--chapter {
  display: flex;
  gap: 2rem;
  padding: 2rem 4rem;
  transition: 1s all;
}

#view--chapter--left-side {
  flex: 1;
}

#view--chapter--mainContainer {
  box-shadow: var(--std-box-shadow);
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 1rem;
}

.game-view #view--chapter--mainContainer {
  flex: 8;
}

.game-view #view--chapter--aside {
  flex: 2;
  max-width: 20%;
}

.menu-view #view--chapter--mainContainer {
  flex: 7;
}

.menu-view #view--chapter--aside {
  flex: 3;
  max-width: 30%;
}

.chapter--thumbnail {
  width: 100%;
}

.chapter--replay-handler {
  width: 100%;
  min-height: 600px;
  text-align: center;
  background: black;
  box-shadow: var(--std-box-shadow);
}

.chapter--replay-handler--modal {
  position: absolute;
  display: flex;
  flex-direction: column;
  inset: 0;
  margin: auto;
  padding: 3rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: rgba(255, 255, 255, 0.9);
  color: black;
  flex-direction: column;
  width: 80%;
  height: 80%;
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}

.chapter--game--title {
  text-align: center;
  line-height: 4rem;
}

.chapter--replay-handler-cost > img {
  display: block;
  height: 3.4rem;
  width: 3.4rem;
  background-color: var(--color-keys-light);
  padding: 0.5rem;
  border-radius: 2rem;
}

.chapter--replay-handler-cost * {
  font-size: 1.6rem;
  line-height: 3.4rem;
}

.chapter--replay-handler-cost {
  display: flex;
  gap: 0.5rem;
  margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
}

.chapter--replay-handler-text {
  width: 80%;
  margin: 0 auto;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-align: center;
}

.chapter--replay-handler-text > div {
  display: inline-block;
}

.chapter--replay-handler--image {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: -0.6rem;
}

.chapter--replay-handler-button {
  margin: 0 auto;
  margin-top: 2rem;
}

.chapter--game-card-alternative {
  width: 100%;
  color: var(--sc-surface-foreground);
  background-color: var(--sc-surface-background);
  position: relative;
  padding: 1.5rem;
  font-weight: 400;
}

.chapter--game-card {
  width: 100%;
  color: var(--sc-surface-foreground);
  background-color: var(--sc-surface-background);
  position: relative;
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
  margin-top: 1rem;
  /* margin-bottom: 100px; */
  padding: 1.5rem;
  font-weight: 400;
}

.gc--top-line {
  display: flex;
  height: 3.6rem;
  gap: 1rem;
  justify-content: space-between;
  /* border: 1px solid black;
  box-sizing: border-box; */
  /* Buttons inside the top line */
}
.gc--top-line .gc--button-container {
  height: 2.3rem;
  width: 2.3rem;
  padding: 0;
  margin: 0.5rem 0;
}

.gc--top-line > h3 {
  font-size: 3rem;
  line-height: 3rem;
  margin: 0.3rem 0;
  padding: 0;
}

/* Most divs in the top line */
.gc--top-line > div {
  height: 2rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
  margin: 0.8rem 0 0.8rem 1rem;
  padding: 0.4rem 0.6rem;
  border-radius: 2rem;
}

#btnChapterLike.liked {
  filter: none;
}

#btnChapterLike {
  color: var(--sc-secondary-background);
  filter: grayscale(100%);
  font-size: 2.2rem;
  width: 3.6rem;
  height: 3.6rem;
  line-height: 3.6rem;
  padding: 0;
  text-align: center;
  margin: 0;
}

#btnChapterLike:hover,
.gc--button-container > .img--button:hover {
  transform: scale(1.1);
}

.gc--top-line > div.STORY {
  background: black;
  color: white;
}

.gc--top-line > div.FUN {
  background: var(--sc-secondary-background);
  color: white;
}

.gc--main-line {
  width: 100%;
}

.gc--description {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  transition: 1s all;
}

#js-game-description.visible {
  display: block;
}

#js-game-description {
  display: none;
}

#js-game-collapse-description-image.rotated {
  transform: rotate(180deg);
}

#chapter--replay-handler-back-to-score:hover {
  cursor: pointer;
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
}

#chapter--replay-handler-back-to-score {
  margin: 0 auto;
  margin-top: 1vw;
  font-weight: bold;
  padding: 0.5vw 1vw;
  color: var(--sc-foreground);
  font-size: 1.2vw;
  line-height: 1.2vw;
  border-radius: 2vw;
}

.chapter--game--button-container {
  display: flex;
  margin-top: 2rem;
}

.chapter--game--button-container > * {
  margin: 0 0.5rem;
}

.chapter--game--button-container > *:first-child {
  margin-left: auto;
}

.chapter--game--button-container > *:last-child {
  margin-right: auto;
}

#chapter--storyengine {
  border-radius: 0;
  overflow: visible;
  min-height: 400px;
  z-index: 2;
  /*
  .gameengine--events--navigation--backup-background,
  .gameengine--events--navigation--image,
  .chapter--screen--summary--image,
  .chapter--screen--summary,
  .chapter--thumbnail
  { border-radius: 1rem; }

  */
  /*
     .gameengine--background,
     .gameengine-event--continue,
  .characters--character--description,
     .gameengine-event--characterBubble
     { border-radius: 0 0 1rem 1rem; }
     */
}

#chapter--dev--map--visjs > .vis-network {
  outline: 1px solid black;
}

#chapter--dev--map--visjs {
  margin: 1rem 0;
  width: 100%;
  height: 700px;
  background-color: var(--sc-background);
}

#chapter--aside--characterContainer {
  background-position: 50% 50%;
  background-size: auto 100%;
  /* background-color: var(--sc-primary-light-background); */
  /* box-shadow: var(--std-box-shadow); */
  border-radius: 0.6vw;
  width: 100%;
}

.chapter--loadingStatusChange--animation-enter-active {
  animation-name: fadeIn;
}

.chapter--loadingStatusChange--animation-leave-active {
  animation-name: fadeOut;
}

.chapter--loadingStatusChange {
  width: 100%;
  min-height: 400px;
  animation-fill-mode: both;
  animation-duration: 1000ms;
}

.chapter--loadingStatusChange.error {
  background: var(--color-on-error);
  color: var(--color-error);
}

.chapter--screen--summary {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 600px;
  text-align: center;
  color: var(--sc-surface-foreground);
  background: var(--sc-surface-background);
}

.chapter--screen--summary--image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: opacity(0.1);
}

.chapter--screen--summary--separator {
  flex: 1;
  top: 0;
  bottom: 0;
  /* right: 100%; */
  margin: auto 0;
  height: 0;
  /* width: 30rem; */
  border-bottom: 4px dotted var(--sc-primary-light-background);
  /* border-bottom: 6px solid transparent;
  border-image: url("/svg/global/popup-border.png") 30 round; */
  /* height: 2px;
  background-image: linear-gradient(to left, var(--sc-primary-background) 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 20px 2px;
  background-repeat: repeat-x; */
}

.chapter--screen--summary--score--line {
  margin: 1rem 0;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  display: flex;
}

.chapter--screen--summary--score--header {
  margin: 0;
  line-height: 2rem;
  font-size: 2rem;
  padding: 0.5rem;
  /* background: var(--sc-background); */
  z-index: 1;
}

.chapter--screen--summary--score--number {
  position: relative;
  text-align: center;
  margin: 0;
  font-weight: 500;
  line-height: 2rem;
  font-size: 1.6rem;
  padding: 0.7rem;
}

.chapter--screen--summary--score--img {
  margin: 0;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  box-shadow: var(--heavy-box-shadow);
}

.chapter--canPlayStatus--animation-enter-active {
  animation-name: fadeIn;
}

.chapter--canPlayStatus--animation-leave-active {
  animation-name: fadeOut;
}

.chapter--canPlayStatus--animation {
  animation-fill-mode: both;
  animation-duration: 500ms;
}

/* 
.chapter--objectives--objective-line:hover::before {
    content: ' ';
    position: absolute;

    width: 0; height: 0;

    right: 100%;
    top: 0;
    bottom: 0;
    margin: auto 0;

    border: 6px solid transparent;
    border-left: 6px solid black;
    transition: 0.3s all;
}
*/
.chapter--objectives--objective-line {
  position: relative;
  margin: 1rem 0 0 1rem;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 85%;
  transition: 0.3s all;
}

.chapter--objectives--objective-line.complete {
  font-weight: normal;
  color: var(--sc-success-background);
  text-decoration: line-through;
}

.chapter--objectives--objective-line.complete::after {
  content: "Completed!";
  color: var(--sc-success-background);
  font-weight: bold;
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  margin: auto 0;
  margin-left: 1vw;
}

.chapters--reviewOverview {
  width: 100%;
  padding: 2rem;
  border-bottom: 2px solid var(--sc-primary-transparent-10);
  margin-bottom: 2rem;
}
.chapters--reviewOverview > div {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

#component--choose-replay--container {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

#component--choose-replay-main-section {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 60%;
  max-height: 80vh;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
  border-radius: 1rem;
}

#component--choose-replay-main-section--title {
  text-align: center;
}

.component--choose-replay-title {
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto;
  text-align: center;
  font-weight: 500;
  transition: 0.3s all;
}

#component--choose-replay--chooser {
  display: flex;
  gap: 2rem;
  height: 100%;
}

.component--choose-replay--selector.selected::after {
  content: "\f058";
  background-color: var(--sc-success-foreground);
  color: var(--sc-success-background);
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  height: 2rem;
  border-radius: 1rem;
  width: 2rem;
  text-align: center;
}

.component--choose-replay--selector.selected {
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  transform: scale(1.04);
}

.component--choose-replay--selector:hover {
  cursor: pointer;
  transform: scale(1.04);
  box-shadow: var(--heavy-box-shadow);
}

.component--choose-replay--selector {
  position: relative;
  flex: 1;
  background-color: var(--sc-background);
  color: var(--sc-foreground);
  border-radius: 1rem;
  padding: 1rem;
  /* For the COST div at the bottom */
  padding-bottom: 4rem;
  box-shadow: var(--std-box-shadow);
  transition: 0.3s all;
}

.component--choose-replay--selector > p {
  margin-top: 0.5rem;
  font-size: 1rem;
}

.component--choose-replay--warning-message {
  color: var(--sc-danger-background);
  font-weight: bold;
}

.component--choose-replay--cost {
  /* At bottom */
  position: absolute;
  bottom: 0.5rem;
  /* Centered */
  left: 0;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.6rem;
  transition: 0.3s all;
}

#component--choose-replay--footer {
  display: flex;
  gap: 1rem;
  margin: 0;
  height: 3.65rem;
  padding-bottom: 2.7rem;
}
#component--choose-replay--footer > * {
  margin: 0;
  height: 2.3rem;
}
#component--choose-replay--footer > *:first-child {
  margin-left: auto;
}
#component--choose-replay--footer > *:last-child {
  margin-right: auto;
}

/* ! Section 1 : INTRO ======================================================================*/
.gameintro--section-title {
  margin: 0 auto;
  margin-top: -10vw;
  margin-bottom: 6vw;
  z-index: 1;
  color: var(--sc-header-foreground);
  width: fit-content;
  width: -moz-fit-content;
}

#gameintro--section-intro {
  position: relative;
  width: 100%;
  height: 100vh;
}

#gameintro--section-intro--header-background {
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: brightness(0.8);
}

#gameintro--section-intro--gradient {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110%;
  /* opacity: 0.5; */
  background-image: linear-gradient(to bottom left, transparent 30%, var(--color-dashboard-gradient)), linear-gradient(transparent 80%, var(--color-dashboard-gradient));
  /* background-image: linear-gradient(transparent, var(--color-dashboard-gradient)); */
}

#gameintro--section-intro--intro__info-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: var(--color-on-dashboard-gradient);
  padding: 30vh 0;
  padding-left: 10rem;
  width: 50%;
  height: 100vh;
  z-index: 1;
}
#gameintro--section-intro--intro__info-div p {
  color: inherit;
  /* text-align: left; */
  font-size: 1.6rem;
  margin: 2rem auto;
  font-weight: normal;
  text-shadow: 1px 1px 0 var(--color-dashboard-gradient), -1px -1px 0 var(--color-dashboard-gradient), 1px -1px 0 var(--color-dashboard-gradient), -1px 1px 0 var(--color-dashboard-gradient), 1px 1px 0 var(--color-dashboard-gradient);
}
#gameintro--section-intro--intro__info-div > img {
  max-width: 600px;
  min-width: 200px;
  width: 35vw;
}

#gameintro--section-intro--intro__info-div__button-line {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
#gameintro--section-intro--intro__info-div__button-line > * {
  margin: 0;
}

/* ! Section 2 : About & Arguments ==========================================================*/
#gameintro--section-about {
  background-color: var(--color-dashboard-gradient);
  padding: 4rem 15%;
  text-align: center;
}
#gameintro--section-about * {
  color: var(--color-on-dashboard-gradient);
}

#gameintro--section-about__about-div {
  font-size: 1.4rem;
}

#gameintro--section-about__info-div {
  display: flex;
  width: calc(100% - 4rem);
  margin: 4rem auto;
  margin-bottom: 8rem;
}
#gameintro--section-about__info-div div {
  font-size: 1.2rem;
}
#gameintro--section-about__info-div > div {
  padding: 2rem;
  margin: auto;
}
#gameintro--section-about__info-div > div:nth-child(2) {
  border-left: 2px solid var(--color-on-dashboard-gradient);
  border-right: 2px solid var(--color-on-dashboard-gradient);
}
#gameintro--section-about__info-div i.fas {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}

/* ! Section 3 : Characters & Description ===================================================*/
#gameintro--section-meetCharacters {
  width: calc(100% - 10vw);
  position: relative;
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  padding: 2rem;
  padding-bottom: 0;
  border-radius: 1rem;
  margin: -3vw 5vw 0 5vw;
}

#gameintro--section-meetCharacters--container {
  width: 100%;
  display: grid;
  grid-gap: 4rem;
  grid-template-areas: "characters game-description";
  grid-template-columns: 8fr 4fr;
  /* grid-template-rows: 5vw 1fr; */
}

#gameintro--section-meetCharacters--backgroundImage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1rem;
  /* opacity: 0.2; */
  background-size: cover;
  background-position: 50%;
  border: none;
}

#gameintro--section-meetCharacters--backgroundImage__gradient {
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100%;
  border-radius: 1rem;
  height: 100%;
  background-image: linear-gradient(var(--sc-surface-background), transparent);
}

#gameintro--section-meetCharacters--serieBox {
  height: -moz-min-content;
  height: min-content;
  margin: 2rem 0;
  color: var(--sc-surface-foreground);
  padding: 1rem 2rem;
  border-radius: 1rem;
  background-color: var(--sc-surface-background);
  box-shadow: var(--heavy-box-shadow);
}
#gameintro--section-meetCharacters--serieBox > * {
  margin-top: 1rem;
}
#gameintro--section-meetCharacters--serieBox > *:first-child {
  margin-top: 0;
}
#gameintro--section-meetCharacters--serieBox div, #gameintro--section-meetCharacters--serieBox p {
  font-size: 1.5rem;
}

#gameintro--section-meetCharacters--serieBox--title {
  font-size: 3rem !important;
}

#gameintro--section-meetCharacters--serieBox--logo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  margin: 0;
}

#gameintro--section-meetCharacters--grid {
  display: grid;
  grid-area: characters;
  width: 100%;
  grid-template-rows: 1fr;
  grid-template-columns: 15vw 10fr 5fr;
  grid-template-areas: "character-list portrait description";
}

@media only screen and (max-width: 1450px) {
  #gameintro--section-meetCharacters--container {
    grid-gap: 0rem;
    grid-template-areas: "game-description game-description" "characters characters";
  }
}
#gameintro--section-meetCharacters--portraitsList {
  grid-area: character-list;
  display: grid;
  position: absolute;
  grid-template-columns: repeat(auto-fill, minmax(6vw, 1fr));
  grid-gap: 1rem;
  width: 100%;
  height: auto;
  /* height: min-content; */
  margin-top: 2rem;
  /* margin-top: 4vw; */
}

.gameintro--gridCharacter {
  width: 100%;
  height: auto;
  margin: 0;
  /* border: 2px solid var(--sc-primary-background); */
  /* border-radius: 50%; */
  border-radius: 1rem;
  box-shadow: var(--heavy-box-shadow);
  overflow: hidden;
  transition: all 300ms;
}
.gameintro--gridCharacter:hover {
  cursor: pointer;
  transform: scale3d(1.1, 1.1, 1.1);
  /* box-shadow: var(--heavy-box-shadow); */
}

#gameintro--section-meetCharacters--characterImage {
  grid-area: portrait;
  /* width: auto; */
  height: 40vw;
  /* margin-left: 0; */
}

#gameintro--section-meetCharacters--characterDescription-container {
  grid-area: description;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 2rem);
  border-radius: 1rem;
  z-index: 0;
  background: linear-gradient(to bottom right, var(--color-dashboard-gradient), transparent);
  /* background-color: var(--sc-primary-background); */
  color: var(--color-on-dashboard-gradient);
}

#gameintro--section-meetCharacters--characterName {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 2rem;
  padding: 0 1.2rem;
  font-size: 3rem;
}

#gameintro--section-meetCharacters--characterDescription {
  position: relative;
  width: 100%;
  font-size: 1.2rem;
  margin-top: 1rem;
  padding: 0 1.2rem;
  font-style: italic;
}

#page--gameintro h1 {
  text-align: center;
  font-size: 6rem;
  line-height: 8rem;
}

#gamemakerMenu {
  padding: 0;
  gap: 0;
}

.gamemaker-menu-tab {
  font-weight: 400;
  letter-spacing: 0.1rem;
  display: block;
  font-size: 1.2rem;
  padding: 0.8rem;
  white-space: nowrap;
  position: relative;
}
.gamemaker-menu-tab.before-selected:hover {
  border-bottom-right-radius: 1rem;
}

#gamemaker-menu--logo {
  display: flex;
  height: 4rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
#gamemaker-menu--logo img {
  height: 3rem;
  width: 3rem;
  margin: 0;
}
#gamemaker-menu--logo h1 {
  margin-left: 0.5rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 2rem;
  flex: 1;
}

.gamemakerMenu-folder {
  transition: 0.3s all;
  text-decoration: none;
}
.gamemakerMenu-folder.selected .gamemakerMenu-folderTitle {
  background-color: var(--sc-primary-background-hover);
  color: var(--sc-primary-foreground-hover);
}
.gamemakerMenu-folder.selected .gamemakerMenu-folderTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  background-color: var(--sc-primary-foreground);
}
.gamemakerMenu-folder .gamemakerMenu-folderTitle {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.8rem;
  align-items: center;
}
.gamemakerMenu-folder .gamemakerMenu-folderTitle i {
  width: 1.2rem;
  text-align: left;
}
.gamemakerMenu-folder .gamemakerMenu-folderTitle i, .gamemakerMenu-folder .gamemakerMenu-folderTitle div {
  font-size: 1.2rem;
}
.gamemakerMenu-folder .gamemakerMenu-folderTitle .gamemakerMenu-folderTitleText {
  flex: 1;
  padding: 0.8rem 0;
}
.gamemakerMenu-folder .gamemakerMenu-folderTitle:hover {
  background-color: var(--sc-primary-background-hover);
  color: var(--sc-primary-foreground-hover);
  cursor: pointer;
  z-index: 1;
}
.gamemakerMenu-folder .gamemakerMenu-folderItem {
  font-size: 1rem;
  padding: 0.8rem;
  padding-left: 3rem;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}
.gamemakerMenu-folder .gamemakerMenu-folderItem:hover {
  background-color: var(--sc-primary-background-hover);
  color: var(--sc-primary-foreground-hover);
  cursor: pointer;
  z-index: 1;
}
.gamemakerMenu-folder .gamemakerMenu-folderItem.selected {
  background-color: var(--sc-primary-background-hover);
  color: var(--sc-primary-foreground-hover);
}
.gamemakerMenu-folder .gamemakerMenu-folderItem.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  background-color: var(--sc-primary-foreground);
}
.gamemakerMenu-folder .gamemakerMenu-folderItem.selected + .gamemakerMenu-folder .gamemakerMenu-folderItem:hover {
  border-top-right-radius: 1rem;
}

#gamemakerMenu--Container {
  overflow-y: auto;
  margin-top: 0.5rem;
}
#gamemakerMenu--Container::-webkit-scrollbar {
  display: none;
}

#seriesMenu--currentSeries {
  background: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
  margin: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  padding: 0.5rem;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem !important;
}
#seriesMenu--currentSeries::after {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  width: 50%;
  height: 2px;
  background: var(--sc-header-foreground);
  border-radius: 2px;
}

.view--instructions-line {
  margin-top: 1rem;
}

.gm--chapters--loadingstate {
  width: 100%;
  height: calc(100vh - 4rem - 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
}
.gm--chapters--loadingstate .gm--chapters--loadingstate--loadingBox {
  display: flex;
  gap: 0.5rem;
}
.gm--chapters--loadingstate .gm--chapters--loadingstate--loadingBox .gcll--loader {
  border: 2px solid transparent;
  border-top-color: var(--sc-primary-background);
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  animation: 1s spin infinite linear;
}
.gm--chapters--loadingstate .gm--chapters--loadingstate--loadingBox .gcll--text {
  line-height: 2rem;
  font-size: 1.5rem;
}

.gm--chapters--chapter--officialStamp {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 0.8rem;
  color: var(--sc-success-background);
  border: 2px solid var(--sc-success-background);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--sc-success-foreground);
}
.gm--chapters--chapter--officialStamp::before {
  margin-right: 0.25rem;
}

.gm--chapters--container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.gm--chapters--container .gm--chapters--chapter {
  flex: 1 1 350px;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
  display: flex;
  flex-direction: column;
  transition: 0.3s all;
}
.gm--chapters--container .gm--chapters--chapter:hover {
  cursor: pointer;
  transform: scale(1.01);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--imageContainer {
  min-height: 200px;
  width: 100%;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--imageContainer img {
  width: 100%;
  height: auto;
  border-radius: 4px 4px 0 0;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine {
  display: flex;
  gap: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  margin-right: 0.25rem;
  margin-top: 0.25rem;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine i,
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine div {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine.primary {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine.primaryLight {
  background: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine.warning {
  background: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--statLinecontainer .gm--chapter--statLine.error {
  background: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter-info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter-info .gm--chapter-title {
  flex: 1;
  font-size: 2rem;
  line-height: 2.3rem;
  font-weight: 350;
  margin: 0rem;
  color: var(--sc-surface-foreground);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--buttonLine {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
  text-decoration: none;
  border-radius: 4px;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--buttonLine:hover {
  cursor: pointer;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  box-shadow: var(--std-box-shadow);
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--buttonLine > i {
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter--buttonLine > div {
  opacity: 0.9;
  line-height: 2rem;
  font-size: 1rem;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter-titleSeparator {
  font-weight: bold;
  margin-top: 1rem;
}
.gm--chapters--container .gm--chapters--chapter .gm--chapters--chapter--textContainer .gm--chapter-description {
  margin-top: 1rem;
  color: var(--sc-surface-foreground);
  opacity: 0.9;
  font-size: 1rem;
  line-height: 1.2rem;
  width: 100%;
}

.gm-chapters--addChapterSection {
  flex: 1 1 350px;
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  padding: 0 2rem;
  transition: 0.3s all;
}
.gm-chapters--addChapterSection > div {
  line-height: 2.3rem;
  font-weight: bold;
}
.gm-chapters--addChapterSection:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm-chapters--addChapterSection::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}

td .tableInput {
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
}

.gm--chapter-status {
  font-size: 1.2rem;
  line-height: 1.5rem;
  height: -moz-min-content;
  height: min-content;
  min-height: 2.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.gm--chapter-status.PUBLIC {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.gm--chapter-status.REJECTED {
  background-color: red;
}
.gm--chapter-status.DRAFT {
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.gm--chapter-status.PENDING-APPROVAL, .gm--chapter-status.BETA {
  background-color: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}
.gm--chapter-status.clickable {
  transition: 0.3s all;
}
.gm--chapter-status.clickable:hover {
  cursor: pointer;
  transform: scale(1.01);
}

.chapterStatusInfo--mainLine {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  padding-bottom: 1rem;
}
.chapterStatusInfo--mainLine .informationLine {
  transition: 0.3s all;
  border-radius: 1rem;
}
.chapterStatusInfo--mainLine .informationLine .floatingExplanation {
  width: calc(100% - 4rem);
  padding: 1rem;
  transition: 0.3s all;
  display: flex;
  align-items: center;
}
.chapterStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper {
  width: 100%;
}
.chapterStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper span, .chapterStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper p, .chapterStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper ul, .chapterStatusInfo--mainLine .informationLine .floatingExplanation .absoluteText--wrapper li {
  opacity: 0.9;
  font-size: 0.9rem;
}
.chapterStatusInfo--mainLine::before {
  content: "";
  position: absolute;
  width: 2px;
  left: calc(1rem - 1px);
  top: 1rem;
  height: calc(100% - 1rem);
  background: var(--sc-primary-light-background);
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineEntry {
  margin-left: 3rem;
  transition: 0.3s all;
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineEntry:hover .floatingExplanation {
  cursor: pointer;
  transform: scale(1.01);
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineEntry:not(:first-child) {
  margin-top: 1rem;
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineEntry:last-child::before {
  content: "";
  position: absolute;
  width: 2px;
  left: calc(-1.8rem - 4px);
  top: 2rem;
  height: calc(100% - 1rem);
  background: var(--sc-surface-background);
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineIcon {
  position: absolute;
  top: 1rem;
  left: 0;
  margin-left: -2.8rem;
  font-size: 0.8rem;
  height: 1.6rem;
  width: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  border-radius: 1rem;
  transition: 0.3s all;
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineIcon.PUBLIC {
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineIcon.REJECTED {
  background-color: red;
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineIcon.DRAFT {
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.chapterStatusInfo--mainLine .chapterStatusInfo--mainLineIcon.PENDING-APPROVAL, .chapterStatusInfo--mainLine .chapterStatusInfo--mainLineIcon.BETA {
  background-color: var(--sc-warning-background);
  color: var(--sc-warning-foreground);
}

.chapterStatusInfo--title {
  font-size: 1.6rem;
  transition: 0.3s all;
}

.asdfkasdjhfgsadkfjhgdsfkjadshfg {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
}
.asdfkasdjhfgsadkfjhgdsfkjadshfg--title {
  font-size: 1.2rem;
}
.asdfkasdjhfgsadkfjhgdsfkjadshfg--subtitle {
  font-size: 0.8rem;
  opacity: 0.8;
}
.asdfkasdjhfgsadkfjhgdsfkjadshfg--value {
  font-size: 2rem;
  font-weight: bold;
}
.asdfkasdjhfgsadkfjhgdsfkjadshfg:not(:first-child):before {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(100% - 1px);
  background-color: var(--sc-primary-light-background);
  width: 2px;
  border-radius: 1rem;
}

#gm--characters--data {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}
#gm--characters--data input {
  margin-top: 0.5rem;
}
#gm--characters--data .gm--characters--quill {
  margin-top: 0.5rem;
}

#gm--characters--view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  grid-gap: 1rem;
}

.gm--character-line {
  border: 2px solid var(--sc-primary-background);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s box-shadow;
}
.gm--character-line:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--character-line.gm--character-line--new-character {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  min-height: 10rem;
}
.gm--character-line.gm--character-line--new-character::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}
.gm--character-line img {
  width: 100%;
  height: auto;
}
.gm--character-line .gm--character-line--name {
  font-size: 1.2rem;
  padding: 0.5rem;
  flex: 1;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.gm--character-line .gm--character-line--isDatable-heart {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: var(--sc-secondary-foreground);
  background-color: var(--sc-secondary-background);
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.5rem 0;
  height: 2rem;
  width: 2rem;
  text-align: center;
  border-radius: 50%;
  z-index: 1;
}

#gm--EditCharacter {
  display: grid;
  grid-template-areas: "back-button ." "portrait name" "portrait tabs";
  grid-template-columns: 10rem 1fr;
  grid-template-rows: auto auto 1fr;
  grid-column-gap: 2rem;
}

.gm--EditCharacter--back-button {
  grid-area: back-button;
}

.gm--EditCharacter--name {
  grid-area: name;
}

.gm--EditCharacter--portrait {
  grid-area: portrait;
  border-radius: 50%;
  margin-top: 2rem;
  width: 10rem;
  height: 10rem;
  box-shadow: var(--std-box-shadow);
}

.gm--EditCharacter--tabs {
  grid-area: tabs;
  min-height: 80vh;
}

.gm--EditCharacter--table {
  margin-top: 1rem;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}
.gm--EditCharacter--table > button {
  margin-top: 1rem;
}

.gm--EditCharacter--sprites--outfit-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
}
.gm--EditCharacter--sprites--outfit-container .gm--sprites-outfit {
  border: 2px solid var(--sc-primary-background);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gm--EditCharacter--sprites--outfit-container .gm--sprites-outfit:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--EditCharacter--sprites--outfit-container .gm--sprites-outfit img {
  width: 100%;
  height: auto;
}
.gm--EditCharacter--sprites--outfit-container .gm--sprites-outfit div {
  font-size: 1.2rem;
  padding: 0.5rem;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

.gm--sprites-breadcrumbs {
  padding: 1rem;
}
.gm--sprites-breadcrumbs span {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.gm--sprites-breadcrumbs span + span::before {
  content: "/ ";
  color: var(--sc-foreground);
}
.gm--sprites-breadcrumbs .clickable {
  font-weight: bold;
  color: var(--sc-primary-background);
}
.gm--sprites-breadcrumbs .clickable:hover {
  color: var(--sc-primary-background-hover);
  cursor: pointer;
}

.gm--EditCharacter--sprites--spriteImg {
  border: 2px solid var(--sc-primary-background);
  min-height: 40rem;
  width: 100%;
}

.gm--massUploadSprites--modal {
  width: min(60rem, 90vw);
  height: min(60rem, 90vh);
}

.gm--massUploadSprites--fileInProcess {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  display: flex;
  gap: 1rem;
  border-radius: 0.5rem;
}
.gm--massUploadSprites--fileInProcess::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  opacity: 0.05;
  background-color: var(--sc-primary-background);
}
.gm--massUploadSprites--fileInProcess.success {
  color: var(--sc-success-background);
  background-color: transparent;
}
.gm--massUploadSprites--fileInProcess.success::before {
  background-color: var(--sc-success-background);
}
.gm--massUploadSprites--fileInProcess.error {
  color: var(--sc-danger-background);
  background-color: transparent;
}
.gm--massUploadSprites--fileInProcess.error::before {
  background-color: var(--sc-danger-background);
}
.gm--massUploadSprites--fileInProcess a * {
  font-weight: bold;
}

.gm--massUploadSprites--doneProcess {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  padding: 1rem;
  margin-top: 1rem;
  text-align: center;
  border-radius: 0.5rem;
}

.gm--EditCharacter--images-tab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
}
.gm--EditCharacter--images-tab .gm--EditCharacter--images--draganddrop-container {
  width: 100%;
  position: relative;
}
.gm--EditCharacter--images-tab .gm--EditCharacter--images-image {
  width: 100%;
  height: auto;
  border: 2px solid var(--sc-primary-background);
}
.gm--EditCharacter--images-tab .gm--EditCharacter--images-text {
  font-size: 1.2rem;
  padding: 0.5rem;
  text-align: center;
}

.gm--newCharacter--modal {
  width: min(40rem, 90vw);
  height: min(40rem, 90vh);
}
.gm--newCharacter--modal .description--textarea {
  display: block;
  resize: vertical;
  border: none;
  border: 1px solid var(--sc-primary-background);
  border-radius: 4px;
  outline: none !important;
  background-color: var(--sc-surface-background);
  flex: 1;
  max-height: 100%;
  min-height: 8rem;
  width: 100%;
  padding: 1rem;
}

#gm--backgrounds-vis-container {
  width: 100%;
  height: calc(100vh - 4rem);
  transition: 0.3s padding-right;
}
#gm--backgrounds-vis-container.nothingSelected {
  padding-right: 0;
}
#gm--backgrounds-vis-container > .vis-network {
  outline: none;
}

#gm--backgrounds-vis-tools {
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 4rem;
  height: -moz-fit-content;
  height: fit-content;
  padding: 0.85rem;
  background: var(--sc-surface-background);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
}

.gm--backgrounds--floatingPanel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  height: calc(100vh - 4rem - 2rem);
  border-radius: 4px;
  overflow-y: scroll;
  width: min(40rem, 50%);
  padding: 1rem 2rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
}
.gm--backgrounds--floatingPanel .gm--backgrounds--header {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}
.gm--backgrounds--floatingPanel .gm--backgrounds--header .gm--backgrounds--header--text {
  font-size: 2rem;
  line-height: 2rem;
}
.gm--backgrounds--floatingPanel .gm--backgrounds--header .gm--backgrounds--header--locationID {
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
  border-radius: 4px;
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
}
.gm--backgrounds--floatingPanel .gm--backgrounds--form {
  padding: 1rem;
  margin-top: 1rem;
  background: var(--sc-background);
  color: var(--sc-foreground);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
}
.gm--backgrounds--floatingPanel .gm--backgrounds--statePreviewContainer {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
}
.gm--backgrounds--floatingPanel .gm--backgrounds--statePreviewContainer .gm--backgrounds--statePreview {
  border-radius: 4px;
  overflow: hidden;
  transition: 0.3s box-shadow;
}
.gm--backgrounds--floatingPanel .gm--backgrounds--statePreviewContainer .gm--backgrounds--statePreview:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--backgrounds--floatingPanel .gm--backgrounds--statePreviewContainer .gm--backgrounds--statePreview img {
  width: 100%;
  height: auto;
}
.gm--backgrounds--floatingPanel .gm--backgrounds--statePreviewContainer .gm--backgrounds--statePreview .gm--backgrounds--statePreview--text {
  font-size: 1.2rem;
  padding: 0.5rem;
  flex: 1;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.gm--backgrounds--floatingPanel .gm--backgrounds--state--imageContainer {
  margin-top: 1rem;
  min-height: 20rem;
  border: 2px solid var(--sc-primary-background);
}
.gm--backgrounds--floatingPanel .gm--backgrounds--state--imageContainer img.gm--backgrounds--state--image {
  width: 100%;
  height: auto;
}

.gm--backgrounds--editEdge--fromTo {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.gm--backgrounds--editEdge--fromTo div {
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
}
.gm--backgrounds--editEdge--fromTo .gm--backgrounds--editEdge--fromTo--from,
.gm--backgrounds--editEdge--fromTo .gm--backgrounds--editEdge--fromTo--to {
  border-radius: 4px;
  background: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
}
.gm--backgrounds--editEdge--fromTo .gm--backgrounds--editEdge--fromTo--from:hover,
.gm--backgrounds--editEdge--fromTo .gm--backgrounds--editEdge--fromTo--to:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}

.gm--backgrounds--editEdge--previewContainer {
  margin-top: 1rem;
  min-height: 20rem;
  background-color: var(--sc-background);
  border: 2px solid var(--sc-primary-background);
}

.gm--backgrounds--editEdge--previewDot {
  position: absolute;
  color: var(--sc-secondary-background);
  z-index: 1;
  font-size: 2rem;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  text-align: center;
}
.gm--backgrounds--editEdge--previewDot:hover {
  cursor: pointer;
}

.gm--backgrounds--editEdge--previewImage {
  width: 100%;
  height: auto;
}

.gm--addBackground--modal {
  width: 40rem;
  height: 40rem;
}

.gm--soundtracks--soundtrackContainer {
  max-width: min(60rem, 100%);
  margin: 0 auto;
  padding-bottom: 30rem;
}
.gm--soundtracks--soundtrackContainer input {
  margin-top: 0.5rem;
}

.gm--soundtrackItem--row {
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 4px;
  background: var(--sc-surface-background);
  transition: 0.3s box-shadow;
}
.gm--soundtrackItem--row:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--soundtrackItem--row.new-soundtrackItem {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  padding: 0.5rem;
}
.gm--soundtrackItem--row.new-soundtrackItem > div {
  line-height: 2.3rem;
}
.gm--soundtrackItem--row.new-soundtrackItem:hover {
  font-weight: bold;
}
.gm--soundtrackItem--row.new-soundtrackItem::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}

.gm--illustrationContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
  margin-top: 2rem;
}

.gm--illustrationContainer--illustration {
  width: 100%;
  height: auto;
  border-radius: 4px;
  overflow: hidden;
  height: -moz-fit-content;
  height: fit-content;
}
.gm--illustrationContainer--illustration img {
  width: 100%;
  height: auto;
}
.gm--illustrationContainer--illustration:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
  transition: 0.3s all;
}
.gm--illustrationContainer--illustration .gm--illustrationContainer--illustration--text {
  font-size: 1.2rem;
  padding: 0.5rem;
  flex: 1;
  text-align: center;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

.gm--EditIllustrationContainer {
  display: flex;
  gap: 2rem;
  height: calc(100vh - 4rem);
  padding-left: 3rem;
  padding-top: 2rem;
}
.gm--EditIllustrationContainer .gm--EditIllustration--illustrationPreview {
  flex: 1;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layersContainer--layersTab {
  padding-right: 3rem;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--categoryContainer {
  margin-top: 2rem;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--categoryContainer.isReceivingDrops {
  border: 4px dashed var(--sc-primary-background);
  background: var(--sc-primary-light-background);
  padding: 1rem;
  border-radius: 4px;
  transition: 0.3s all;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer {
  margin-top: 1rem;
  display: flex;
  padding-right: 1rem;
  gap: 1rem;
  border-radius: 4px;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  transition: 0.3s background-color, 0.3s box-shadow;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.gm--EditIllustration--layers--layerContainer-addLayer {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  padding: 0.5rem;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.gm--EditIllustration--layers--layerContainer-addLayer > .gm--EditIllustration--buttonText {
  line-height: 2.3rem;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.gm--EditIllustration--layers--layerContainer-addLayer:hover {
  font-weight: bold;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.gm--EditIllustration--layers--layerContainer-addLayer::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.gm--EditIllustration--layers--layerContainer-addLayer.primaryColor {
  border: 2px solid var(--sc-primary-background);
  color: var(--sc-primary-background);
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.gm--EditIllustration--layers--layerContainer-addLayer.primaryColor::before {
  background-color: var(--sc-primary-background);
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.isBeingDragged {
  opacity: 0.5;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.isActiveLayer {
  border: 2px solid var(--sc-success-background);
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer.isActiveLayer::after {
  content: "active";
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--sc-success-background);
  color: var(--sc-success-foreground);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 0.8rem;
  z-index: 1;
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer .gm--EditIllustration--layers--imagePreview {
  height: 5rem;
  width: auto;
  border-radius: 4px 0 0 4px;
  background-image: var(--checkerboard-background-image);
  background-size: var(--checkerboard-background-size);
  background-position: var(--checkerboard-background-position);
}
.gm--EditIllustrationContainer .gm--EditIllustration--layersContainer .gm--EditIllustration--layers--layerContainer .gm--EditIllustration--layers--text {
  padding: 1rem 0;
  line-height: 3rem;
}

.gm--illustrations--layers--form {
  padding: 1rem;
  margin-top: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-foreground);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
}

.gm--illustrations--EditLayer--layerImageContainer {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  border-radius: 4px;
  min-height: 5rem;
}
.gm--illustrations--EditLayer--layerImageContainer .gm--illustrations--EditLayer--layerImage {
  width: 100%;
  height: auto;
  border: 2px solid var(--sc-primary-background);
  min-height: 5rem;
  background-image: var(--checkerboard-background-image);
  background-size: var(--checkerboard-background-size);
  background-position: var(--checkerboard-background-position);
}

.gm--illustrations--EditLayer--dependencyLine {
  margin-top: 1rem;
  display: flex;
  border-radius: 4px;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  height: 5rem;
  gap: 1rem;
  box-shadow: var(--std-box-shadow);
}
.gm--illustrations--EditLayer--dependencyLine > img {
  border-radius: 4px 0 0 4px;
  height: 5rem;
}
.gm--illustrations--EditLayer--dependencyLine > .gm--illustrations--EditLayer--dependencyLine--text {
  padding: 1rem 0;
  line-height: 3rem;
}
.gm--illustrations--EditLayer--dependencyLine > .gm--illustrations--EditLayer--dependencyLine--button {
  margin: 1.35rem 0;
}
.gm--illustrations--EditLayer--dependencyLine.gm--illustrations--EditLayer--dependencyLine--addDependency {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-start;
  height: auto;
  padding: 0.5rem 0.5rem;
  transition: 0.3s all;
}
.gm--illustrations--EditLayer--dependencyLine.gm--illustrations--EditLayer--dependencyLine--addDependency > div {
  line-height: 2.3rem;
}
.gm--illustrations--EditLayer--dependencyLine.gm--illustrations--EditLayer--dependencyLine--addDependency:hover {
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--illustrations--EditLayer--dependencyLine.gm--illustrations--EditLayer--dependencyLine--addDependency::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}

.gm--illustrations--EditDependencyContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1rem;
}
.gm--illustrations--EditDependencyContainer .gm--illustrations--EditDependency--product {
  padding: 4px;
  border-radius: 4px;
}
.gm--illustrations--EditDependencyContainer .gm--illustrations--EditDependency--product:hover {
  cursor: pointer;
  background: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
}
.gm--illustrations--EditDependencyContainer .gm--illustrations--EditDependency--product.selectedItem {
  border: 4px solid var(--sc-primary-background);
  background: var(--sc-primary-light-background);
}
.gm--illustrations--EditDependencyContainer .gm--illustrations--EditDependency--product.selectedItem::after {
  content: "Selected";
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--sc-success-background);
  color: var(--sc-success-foreground);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 0.8rem;
  z-index: 1;
}
.gm--illustrations--EditDependencyContainer .gm--illustrations--EditDependency--product img.gm--illustrations--EditDependency--image {
  width: 100%;
  height: auto;
}
.gm--illustrations--EditDependencyContainer .gm--illustrations--EditDependency--product .gm--illustrations--EditDependency--text {
  text-align: center;
}

.gm--illustrations--charactersView {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
  padding-bottom: 4rem;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--addItem {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 1rem;
  min-height: 10rem;
  display: flex;
  flex-direction: column;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--addItem:hover {
  cursor: pointer;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--addItem::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem {
  border-radius: 4px;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem img.gm--illustrations--charactersView--image {
  width: 100%;
  height: auto;
  border-radius: 4px 4px 0 0;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem .gm--illustrations--charactersView--text {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  padding: 0.5rem;
  text-align: center;
  font-weight: bold;
  border-radius: 0 0 4px 4px;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem:hover {
  box-shadow: var(--std-box-shadow);
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem.selectable:hover {
  cursor: pointer;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem.selectedCharacter {
  border: 4px solid var(--sc-primary-background);
  background: var(--sc-primary-light-background);
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem.selectedCharacter::after {
  content: "Selected";
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--sc-success-background);
  color: var(--sc-success-foreground);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 0.8rem;
  z-index: 1;
}
.gm--illustrations--charactersView .gm--illustrations--charactersView--gridItem .gm--illustrations--charactersView--buttonsContainer {
  position: absolute;
  top: 4px;
  right: 4px;
  width: fit-content;
  width: -moz-fit-content;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#gm--general--data {
  max-width: min(60rem, 100%);
  margin: 0 auto;
}
#gm--general--data input {
  margin-top: 0.5rem;
}
#gm--general--data .gmgd--quill {
  margin-top: 0.5rem;
}

.gm--general--smallerWidth {
  max-width: min(60rem, 100%);
  margin: 0 auto;
  margin-top: var(--margin-3);
}

.gm--general td {
  padding: 0;
}
.gm--general td:first-child {
  padding: 0.5rem;
}
.gm--general td > textarea {
  min-height: 2rem;
  resize: vertical;
}
.gm--general td > textarea,
.gm--general td > input {
  width: 100%;
  background-color: transparent;
  padding: 0.5rem;
  outline: none;
  border: none;
}

#gm--uploadCssFileContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  background: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  padding: 2rem;
}

.gm--general--serieThumbnail {
  margin-top: var(--margin-6);
  width: 100%;
  height: auto;
}
.gm--general--serieThumbnail img {
  width: 100%;
  height: auto;
}

.gm--general--logoTab div {
  height: -moz-fit-content;
  height: fit-content;
}

.gm--loreItem--previewTitle {
  border-radius: 4px;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  text-align: center;
  padding: 0.5rem;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.gm--loreItem--row {
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 4px;
  background: var(--sc-surface-background);
  transition: 0.3s box-shadow;
}
.gm--loreItem--row:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--loreItem--row.new-loreItem {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  padding: 0.5rem;
}
.gm--loreItem--row.new-loreItem > div {
  line-height: 2.3rem;
}
.gm--loreItem--row.new-loreItem:hover {
  font-weight: bold;
}
.gm--loreItem--row.new-loreItem::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}

#gm--loreItem--selectedItem {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 50%);
}
#gm--loreItem--selectedItem .gm--loreItem--selectedItem--editor input {
  width: 100%;
}
#gm--loreItem--selectedItem .gm--loreItem--selectedItem--editor .gm--loreItem--selectedItem--editorContent {
  margin-top: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
}
#gm--loreItem--selectedItem .gm--loreItem--selectedItem--preview {
  padding: 2rem;
  border-radius: 4px;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border: 2px solid var(--sc-primary-light-background);
}
#gm--loreItem--selectedItem .gm--loreItem--selectedItem--preview p {
  margin: 0;
}
#gm--loreItem--selectedItem .gm--loreItem--selectedItem--preview .gm--loreItem--selectedItem--preview--title {
  font-size: 2rem;
}
#gm--loreItem--selectedItem .gm--loreItem--selectedItem--preview .gm--loreItem--selectedItem--preview--text {
  margin-top: 1rem;
}

.gmClothes--SelectItem--categoryPage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-gap: 1rem;
}
.gmClothes--SelectItem--categoryPage .gmClothes--SelectItem--itemContainer {
  border-radius: 4px;
  transition: 0.3s all;
}
.gmClothes--SelectItem--categoryPage .gmClothes--SelectItem--itemContainer:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.gmClothes--SelectItem--categoryPage .gmClothes--SelectItem--itemContainer img.gmClothes--SelectItem--itemImage {
  border-radius: 4px 4px 0 0;
  width: 100%;
  height: auto;
}
.gmClothes--SelectItem--categoryPage .gmClothes--SelectItem--itemContainer .gmClothes--SelectItem--itemText {
  border-radius: 0 0 4px 4px;
  text-align: center;
}

.gmClothes--EditItemContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}

.gmClothes--EditItem--variantLine {
  border-radius: 4px;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  transition: 0.3s all;
}
.gmClothes--EditItem--variantLine:hover {
  box-shadow: var(--std-box-shadow);
  cursor: pointer;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.gmClothes--EditItem--variantLine img.gmClothes--EditItem--variantLine--image {
  height: 4rem;
  width: 4rem;
}
.gmClothes--EditItem--variantLine .gmClothes--EditItem--variantLine--title {
  font-size: 1rem;
}
.gmClothes--EditItem--variantLine .gmClothes--EditItem--variantLine--text {
  color: var(--sc-grey-600);
  font-size: 0.8rem;
}
.gmClothes--EditItem--variantLine.new-variant {
  border: 2px solid var(--sc-primary-background);
  background-color: transparent;
  color: var(--sc-primary-background);
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  height: 2.3rem;
  box-sizing: content-box;
  padding: calc((4rem - 2.3rem) / 2);
}
.gmClothes--EditItem--variantLine.new-variant > div {
  line-height: 2.3rem;
}
.gmClothes--EditItem--variantLine.new-variant:hover {
  font-weight: bold;
  cursor: pointer;
}
.gmClothes--EditItem--variantLine.new-variant::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-primary-background);
  opacity: 0;
}

.gmClothes--EditVariantContainer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 2rem;
}

.gmClothes--droppableArea {
  border: 2px solid var(--sc-primary-background);
  margin-top: 1rem;
}

.gmClothes--AddItemContainer {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 2rem;
  margin-top: 1rem;
}

.gmClothes--AddItem--stepSelector {
  border: 2px solid transparent;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 2rem;
  padding: 0.5rem;
  transition: 0.3s all;
  width: 100%;
  font-weight: normal;
}
.gmClothes--AddItem--stepSelector:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gmClothes--AddItem--stepSelector.done {
  border-color: var(--sc-success-background);
  background-color: var(--sc-success-background);
  color: var(--sc-success-foreground);
}
.gmClothes--AddItem--stepSelector::before {
  font-weight: 900;
  margin-right: 0.5rem;
  font-family: "Font Awesome 5 Free";
}
.gmClothes--AddItem--stepSelector.error {
  border-color: var(--sc-danger-background);
  background-color: var(--sc-danger-background);
  color: var(--sc-danger-foreground);
}
.gmClothes--AddItem--stepSelector.selected {
  border-color: var(--sc-primary-background);
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

.gmClothes--isUploading--title {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.gmClothes--isUploading--line {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  line-height: 1.3rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
}
.gmClothes--isUploading--line .gmClothes--isUploading--loadingContainer {
  display: flex;
  gap: 0.5rem;
  line-height: 1.3rem;
}
.gmClothes--isUploading--line .gmClothes--isUploading--loader {
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid transparent;
  border-top-color: var(--sc-surface-foreground);
  border-radius: 50%;
  animation: 1s spin infinite linear;
}
.gmClothes--isUploading--line .fa-check {
  line-height: 1.3rem;
  color: var(--sc-success-background);
}
.gmClothes--isUploading--line .fa-times {
  line-height: 1.3rem;
  color: var(--sc-danger-background);
}

.gm--attributes--attributesListContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 1rem;
  margin-top: 1rem;
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  height: -moz-fit-content;
  height: fit-content;
  transition: 0.3s all;
  border-radius: 4px;
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine:hover {
  cursor: pointer;
  box-shadow: var(--std-box-shadow);
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgesContainer {
  display: flex;
  gap: 0.5rem;
  z-index: 1;
  margin-top: 0.5rem;
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgeWithImage {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  height: 1.5rem;
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 1rem;
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgeWithImage > i {
  font-size: 0.8rem;
  line-height: 0.8rem;
  height: 0.8rem;
  width: 0.8rem;
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgeWithImage > span {
  display: block;
  font-size: 0.8rem;
  line-height: 1rem;
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgeWithImage.isLoveMeter {
  color: var(--sc-secondary-foreground);
  background-color: var(--sc-secondary-background);
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgeWithImage.isEditable {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
}
.gm--attributes--attributesListContainer .gm--attributes--attributeLine .gm--attributes--attributeLine--badgeWithImage.isPossibilities {
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  font-size: 0.8rem;
  line-height: 1rem;
}

.gm--attributes--attributeContainer {
  max-width: min(60rem, 100%);
  margin: 0 auto;
  padding-bottom: 30rem;
}
.gm--attributes--attributeContainer input {
  margin-top: 0.5rem;
}

.gm--attributes--attribute--possibility {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  transition: 0.3s all;
  padding-right: 1rem;
  display: flex;
  gap: 1rem;
  border-radius: 4px;
  margin-top: 1rem;
  box-shadow: var(--std-box-shadow);
}
.gm--attributes--attribute--possibility input {
  padding: 0.5rem;
  padding-left: 1rem;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  line-height: 2.3rem;
  flex: 1;
  border: none;
}
.gm--attributes--attribute--possibility .gm--attributes--attribute--possibility--button {
  margin: 0.5rem 0;
}
.gm--attributes--attribute--possibility.new-possibility {
  border: 2px solid var(--sc-success-background);
  background-color: transparent;
  color: var(--sc-success-background);
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
  padding: 0.5rem;
}
.gm--attributes--attribute--possibility.new-possibility > div {
  line-height: 2.3rem;
}
.gm--attributes--attribute--possibility.new-possibility:hover {
  font-weight: bold;
  cursor: pointer;
}
.gm--attributes--attribute--possibility.new-possibility::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0;
  background-color: var(--sc-success-background);
  opacity: 0.1;
}

.gmAttributes--imageDropContainer {
  margin-top: 1rem;
  width: min(10rem, 50%);
}
.gmAttributes--imageDropContainer img {
  width: 100%;
  height: auto;
}

.gma-buttonsContainer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

.gmFinance--salesRow {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 1rem;
  padding: 0 1rem;
}

.gmFinance--totalRow {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 1rem;
  padding: 1rem 1rem;
  border-top: 2px solid var(--sc-foreground);
  border-top: 2px solid var(--sc-primary-transparent-50);
}
.gmFinance--totalRow * {
  font-weight: bold;
  font-size: 1.2rem;
}

.gmFinance--addExpenseModal--line {
  display: flex;
  justify-content: space-between;
}

.gmFinance--section {
  padding: 2rem;
  margin-top: 2rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 1rem;
  box-shadow: var(--std-box-shadow);
}

.financeCuteBubble {
  padding: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
}

#gm-home--cardContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 1rem;
}
#gm-home--cardContainer .gmh--card {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  border: 2px solid var(--sc-primary-light-background);
  border-radius: 4px;
  padding: 1rem;
}

.gm--achievements--modal {
  width: 40rem;
  height: 40rem;
}
.gm--achievements--modal .gm--achievements--modal--title {
  width: 100%;
}
.gm--achievements--modal .gm--achievements--modal--description {
  width: 100%;
  resize: vertical;
  min-height: 10rem;
}
.gm--achievements--modal .gm--achievements--modal--footer {
  display: flex;
  padding: 1rem;
  gap: 1rem;
  justify-content: center;
}

.gm--achievements--achievementContainer {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  margin-top: 1rem;
}
.gm--achievements--achievementContainer .gm--achievements--achievementLine {
  transition: 0.3s all;
  height: -moz-fit-content;
  height: fit-content;
}
.gm--achievements--achievementContainer .gm--achievements--achievementLine:hover {
  box-shadow: var(--std-box-shadow);
  cursor: pointer;
}

.gma-deleteConfirmationModal {
  width: 30rem;
  max-height: 30rem;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1rem 2rem;
}
.gma-deleteConfirmationModal .gma-dcm-question {
  font-size: 1.2rem;
  font-weight: bold;
}
.gma-deleteConfirmationModal .gma-dcm-buttonsContainer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 1rem;
}

.analyticsSquare {
  padding: 1rem;
  border-radius: var(--border-radius-1);
  background-color: var(--sc-surface-background);
  box-shadow: var(--std-box-shadow);
  height: -moz-fit-content;
  height: fit-content;
}
.analyticsSquare--numberLine {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.analyticsSquare--title {
  font-size: 1rem;
}
.analyticsSquare--value {
  font-size: 1.6rem;
  font-weight: bold;
}
.analyticsSquare--percentage.isPositive {
  color: var(--sc-success-background);
}
.analyticsSquare--percentage.isNegative {
  color: var(--sc-danger-background);
}

.gamemakerAnalytics--chapterTitle th {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.gamemakerAnalytics--chapterTitle th:hover {
  cursor: pointer;
  opacity: 0.9;
}

.gamemakerAnalytics--chapterRow {
  transition: 0.3s all;
}
.gamemakerAnalytics--chapterRow > td {
  font-size: 1.2rem;
}
.gamemakerAnalytics--chapterRow img {
  width: auto;
  height: 5rem;
  border-radius: 4px;
}
.gamemakerAnalytics--chapterRow__ranking {
  font-size: 1.6rem;
  font-weight: bold;
}
.gamemakerAnalytics--chapterRow__imageContainer {
  display: flex;
  gap: 1rem;
}
.gamemakerAnalytics--chapterRow__titleDescriptionContainer {
  height: 3rem;
  margin: 1rem 0;
}
.gamemakerAnalytics--chapterRow__titleDescriptionContainer__title {
  font-size: 1.6rem;
  line-height: 2rem;
}
.gamemakerAnalytics--chapterRow__titleDescriptionContainer__description {
  font-size: 1rem;
  line-height: 1rem;
}
.gamemakerAnalytics--chapterRow__ranking {
  font-size: 1rem;
  height: 1rem;
  margin: 2rem 0;
}
.gamemakerAnalytics--chapterRow__playthroughCount, .gamemakerAnalytics--chapterRow__nodesCount, .gamemakerAnalytics--chapterRow__ratingAverage, .gamemakerAnalytics--chapterRow__commentsCount, .gamemakerAnalytics--chapterRow__wordCount {
  text-align: right;
  vertical-align: middle;
}
.gamemakerAnalytics--chapterRow {
  font-size: 1rem;
  height: 1rem;
  margin: 2rem 0;
  padding-right: 1rem;
}

.gamemakerAnalytics--mobileOnly {
  display: none;
  margin-top: 1rem;
}
@media only screen and (max-width: 1400px) {
  .gamemakerAnalytics--mobileOnly {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
}

#gamemakerAnalytics--tab--overview {
  display: flex;
  gap: 2rem;
}

#gamemakerAnalytics--tab--overview__realtime {
  background-color: var(--sc-surface-background);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
  margin-top: 2rem;
  padding: 2rem;
  height: -moz-fit-content;
  height: fit-content;
  width: 20rem;
}
@media only screen and (max-width: 1400px) {
  #gamemakerAnalytics--tab--overview__realtime {
    display: none;
  }
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__dot {
  background-color: var(--sc-danger-background);
  height: 0.5rem;
  width: 0.5rem;
  margin: 0.25rem;
  border-radius: 100%;
  transition: 0.3s background-color;
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__dot.connected {
  background-color: var(--sc-success-background);
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__dot.connected::before {
  content: " ";
  position: absolute;
  top: -400%;
  right: -400%;
  bottom: -400%;
  left: -400%;
  margin: auto;
  border-radius: 100%;
  border: 1px solid var(--sc-success-background);
  box-shadow: 0 0 2px var(--sc-success-background);
  animation: 7s pulseLive infinite;
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__importantText {
  font-size: 1.6rem;
  font-weight: bold;
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__change {
  font-size: 1rem;
  margin-left: 1rem;
  color: var(--sc-success-background);
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__textDescription {
  font-size: 1rem;
  line-height: 1rem;
}
#gamemakerAnalytics--tab--overview__realtime .gamemakerAnalytics--tab--overview__realtime__separator {
  width: 100%;
  height: 1px;
  background-color: var(--sc-surface-foreground);
  opacity: 0.2;
  margin: 2rem 0;
}

.gamemakerAnalytics--totalPlaythroughLine {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin-top: 2rem;
}

.gamemakerAnalytics--chartSection {
  background-color: var(--sc-surface-background);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
  margin-top: 2rem;
}
.gamemakerAnalytics--chartSection .gamemakerAnalytics--chartSection__tab .gamemakerAnalytics--chartSection__chart {
  border: none;
  box-shadow: none;
}

.gamemakerAnalytics--chapterSection {
  background-color: var(--sc-surface-background);
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
  margin-top: 2rem;
}

.temp-coming-soon {
  margin: 2rem;
}

@keyframes pulseLive {
  from {
    width: 100%;
    height: 100%;
  }
  10% {
    opacity: 0;
    transform: scale(4);
  }
  to {
    opacity: 0;
    width: 100%;
    height: 100%;
  }
}
.gm--grid--fullwidth--instructions {
  grid-column: 1/-1;
  padding: 1rem;
}

.gm--table {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  padding: 1rem;
  border-radius: 4px;
  box-shadow: var(--std-box-shadow);
}

.gm--formTitle {
  font-size: 1.2rem;
}
.gm--formTitle:not(:first-child) {
  margin-top: 2rem;
}

.gm--formTextarea {
  display: block;
  resize: vertical;
  border: 1px solid var(--sc-primary-background);
  border-radius: 4px;
  background-color: var(--sc-surface-background);
  min-height: 8rem;
  width: 100%;
  padding: 0.5rem;
}

.gm--formError {
  margin-top: 0.5rem;
}

body {
  position: relative;
  background-color: var(--sc-background);
  color: var(--sc-foreground);
  margin: 0;
  width: 100%;
  padding-top: 4rem;
  transition: padding 0.3s ease;
  overflow-x: hidden;
}

.view--page {
  min-height: calc(100vh - 4rem);
  padding: 2rem 3rem;
  padding-left: 4rem;
}
@media only screen and (max-width: 651px) {
  .view--page {
    padding: 2rem 1rem;
  }
}

.stdAppContainer {
  width: 100%;
  padding-left: 15.5rem;
}
@media only screen and (max-width: 651px) {
  .stdAppContainer {
    padding-left: 0;
  }
}

.stdMenuBar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: calc(100vh - 4rem);
  width: 15.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  padding: 1rem 0.5rem;
  z-index: 1;
}
@media only screen and (max-width: 651px) {
  .stdMenuBar {
    display: none;
  }
  .stdMenuBar.mobileVisible {
    display: flex;
  }
}
.stdMenuBar--menuItem {
  display: flex;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  align-items: center;
}
.stdMenuBar--menuItem.accent {
  color: var(--sc-secondary-foreground);
  background-color: var(--sc-secondary-background);
}
.stdMenuBar--menuItem:hover {
  cursor: pointer;
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
}
.stdMenuBar--menuItem.router-link-exact-active {
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
}
.stdMenuBar--menuItem--icon {
  width: 2rem;
  height: 2rem;
  font-size: 1.6rem;
  line-height: 2rem;
  text-align: center;
}
.stdMenuBar--menuItem--text {
  font-size: 1.2rem;
  line-height: 1rem;
  height: 2rem;
  padding: 0.5rem;
  flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.appContainer--transitionWrapper-enter-active {
  animation-name: fadeIn;
  overflow-x: hidden;
}

.appContainer--transitionWrapper-leave-active {
  animation-name: fadeOut;
  overflow-x: hidden;
}

.pageContainer--transitionWrapper-enter-active {
  animation-name: fadeInLeft4rem;
  overflow-x: hidden;
}

.pageContainer--transitionWrapper-leave-active {
  animation-name: fadeOutRight4rem;
  overflow-x: hidden;
}

.appContainer--transitionWrapper--child,
.pageContainer--transitionWrapper--child {
  animation-fill-mode: both;
  animation-duration: 300ms;
}

.dulcetHeaderLoggedIn--headerLinks {
  display: flex;
}
@media only screen and (max-width: 651px) {
  .dulcetHeaderLoggedIn--headerLinks {
    display: none;
  }
}
.dulcetHeaderLoggedIn--headerLinks .header--clickableSelector {
  padding: 0 1rem;
  transition: 0.3s all;
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
.dulcetHeaderLoggedIn--headerLinks .header--clickableSelector i, .dulcetHeaderLoggedIn--headerLinks .header--clickableSelector span, .dulcetHeaderLoggedIn--headerLinks .header--clickableSelector .header--clickableSelector--text {
  line-height: 4rem;
}
.dulcetHeaderLoggedIn--headerLinks .header--clickableSelector a {
  text-decoration: none;
}
.dulcetHeaderLoggedIn--headerLinks .header--clickableSelector .header--clickableSelector--text {
  color: var(--sc-header-foreground);
}
.dulcetHeaderLoggedIn--headerLinks .header--clickableSelector .header--clickableSelector--text:hover {
  color: var(--sc-primary-light-foreground);
}
.dulcetHeaderLoggedIn--headerLinks .header--clickableSelector:hover {
  cursor: pointer;
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}

@media only screen and (max-width: 651px) {
  #loggedInMenu--home-selector--image {
    display: none;
  }
}

#loggedInMenu--home-selector--image--mobileOnly {
  display: none;
}
#loggedInMenu--home-selector--image--mobileOnly img {
  width: 3rem;
  height: 3rem;
  margin: 0.5rem;
}
@media only screen and (max-width: 651px) {
  #loggedInMenu--home-selector--image--mobileOnly {
    display: block;
  }
}

@media only screen and (max-width: 651px) {
  #menu--series.menu--loggedIn {
    flex-wrap: wrap;
  }
}

#loggedOutMenu--hamburger--contents {
  display: flex;
  gap: 1rem;
}

#loggedOutMenu--home-selector--image img {
  height: 3rem;
  margin: 0.5rem;
  width: auto;
}

.loggedOutMenu--hamburger--button--structure {
  display: none;
  height: 3rem;
  font-size: 1.5rem;
  line-height: 3rem;
  width: 3rem;
  margin: 0.5rem;
}
.loggedOutMenu--hamburger--button--structure:hover {
  cursor: pointer;
}

#loggedOutMenu--home-selector--image--mobileOnly {
  display: none;
}
#loggedOutMenu--home-selector--image--mobileOnly img {
  height: 3rem;
  width: 3rem;
  margin: 0.5rem;
}

/* Mobile */
@media only screen and (max-width: 870px) {
  #loggedOutMenu--home-selector--image {
    display: none;
  }
  #loggedOutMenu--home-selector--image--mobileOnly {
    display: block;
  }
  .loggedOutMenu--hamburger--button--structure {
    display: block;
  }
  #loggedOutMenu--hamburger--contents {
    display: none;
  }
  #loggedOutMenu--hamburger--contents.visible {
    display: flex;
    flex-direction: column;
    position: absolute;
    gap: 0;
    background-color: var(--sc-header-background);
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 4rem);
    animation: 0.3s fadeInDown;
  }
  #loggedOutMenu--hamburger--contents.visible > .header--menu--button {
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
    margin-top: 2rem;
  }
  #loggedOutMenu--hamburger--contents.visible > .header--menu--button > .dg-button {
    width: 100%;
  }
}
#header--profile--button {
  display: flex;
  height: 4rem;
}
#header--profile--button:hover {
  cursor: pointer;
}

#header--profile--button--text {
  height: 4rem;
  line-height: 4rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#header--profile--button--dropdown {
  position: absolute;
  top: 98%;
  right: 0;
  min-width: 350px;
  border-radius: 1rem;
  box-shadow: var(--heavy-box-shadow);
  padding: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
}
#header--profile--button--dropdown:hover {
  cursor: default;
}
#header--profile--button--dropdown::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  right: 1.5rem;
  border: 8px solid transparent;
  border-bottom-color: var(--sc-surface-background);
}

.header--profile--dropdown--link {
  display: flex;
  text-decoration: none;
  transition: 0.3s all;
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  color: inherit;
}
.header--profile--dropdown--link:hover {
  cursor: pointer;
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  box-shadow: var(--std-box-shadow);
}
.header--profile--dropdown--link .header--profile--dropdown--link--icon {
  width: 2rem;
  text-align: center;
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
  border-radius: 2rem;
}
.header--profile--dropdown--link img.header--profile--dropdown--link--icon {
  background-color: transparent;
}
.header--profile--dropdown--link div {
  font-size: 1rem;
  line-height: 1rem;
  height: 2rem;
  padding: 0.5rem;
}
.header--profile--dropdown--link .header--profile--dropdown--link--text {
  flex: 1;
}

#header--profile--button--profile-link {
  display: grid;
  grid-template-areas: "img username" "img description";
  grid-template-columns: 4rem 1fr;
  grid-column-gap: 1rem;
}
#header--profile--button--profile-link #header--dropdown--profile-pic {
  border-radius: 50%;
  box-shadow: var(--std-box-shadow);
  width: 4rem;
  height: 4rem;
  grid-area: img;
}
#header--profile--button--profile-link #header--dropdown--profile-pic.dg-profilepic--fontAwesome {
  line-height: 4rem;
  font-size: 4rem;
  text-align: center;
  background-color: var(--sc-header-foreground);
  color: var(--sc-header-background);
  padding: 0;
}
#header--profile--button--profile-link .username {
  grid-area: username;
  margin: 0;
  margin-top: 0.75rem;
  font-size: 1.2rem;
  line-height: 1.2rem;
  height: 1.2rem;
  padding: 0;
}
#header--profile--button--profile-link .description {
  grid-area: description;
  margin: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  line-height: 0.8rem;
  height: 0.8rem;
  padding: 0;
}
#header--profile--button--profile-link #header--profile--button--logout {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 0;
}

.header--profile--dropdown--separator {
  width: 90%;
  height: 2px;
  background-color: var(--sc-surface-foreground);
  opacity: 10%;
  margin: 1rem auto;
}

#home-selector--image {
  height: 3rem;
  margin: 0.5rem;
  width: auto;
}

#home-selector--image--mobileOnly {
  display: none;
}

#header--profile-pic {
  border-radius: 50%;
  box-shadow: var(--std-box-shadow);
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.75rem;
}
#header--profile-pic.dg-profilepic--fontAwesome {
  color: var(--sc-header-foreground);
  background-color: var(--sc-header-background);
  line-height: 2.5rem;
  font-size: 2.5rem;
  text-align: center;
}

div#js-header--profile-pic {
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
}

#menu--series {
  /* grid-area: series; */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 4rem;
  display: flex;
  gap: 2rem;
  /* todo: --color-header-background ? */
  background-color: var(--sc-header-background);
  color: var(--sc-header-foreground);
  padding: 0 1rem;
  /* box-shadow: var(--std-box-shadow); */
  z-index: 3;
  justify-content: space-between;
}
@media only screen and (max-width: 651px) {
  #menu--series {
    position: relative;
    height: auto;
    gap: 1rem;
    padding: 0 0.5rem;
  }
}

.header-moderation-stamp:hover::after {
  display: none;
}

/* And show it when the menu is large */
.menu--pages-folder:hover {
  color: initial !important;
  background-color: initial !important;
  cursor: default !important;
}

.menu--pages-folder {
  display: block !important;
  height: auto !important;
}

#menu-demo-tag:hover {
  background-color: red;
  color: white;
}

#menu-demo-tag {
  font-size: 1.2rem;
  line-height: 1.2rem;
  height: 2.5rem;
  padding: 0.65rem 1.3rem;
  font-weight: 400;
  background-color: red;
  color: white;
  text-align: center;
  font-weight: bold;
  border-radius: 1rem;
}

#js-collapse-image {
  display: none;
}

#js-expand-image {
  transition: 0.3s all;
}

#header-profile-icon {
  background: var(--sc-background);
  border-radius: 50%;
}

.menu--beta-banner::before {
  content: "demo";
  position: absolute;
  bottom: -0.3rem;
  right: -2rem;
  left: -2rem;
  margin: auto;
  font-size: 0.8rem;
  line-height: 0.8rem;
  font-weight: bold;
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  z-index: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 2rem;
  color: white;
  background: rgb(220, 29, 29);
  /* transform: translate3d(30%, -30%, 0) rotate(-45deg); */
  /* transform: translate3d(23%, -82%, 0) rotate(-45deg); */
}

#js-collapse-button {
  position: absolute;
  right: -1rem;
  bottom: 3rem;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: center;
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  border-radius: 50%;
  box-shadow: -2px -2px 20px 1px var(--sc-primary-background);
  transition: 0.3s all;
  z-index: 2;
}
#js-collapse-button:hover {
  cursor: pointer;
}

#dev-version-div,
#alpha-version-div {
  width: 100%;
  font-size: 0.8rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}

#alpha-version-div {
  color: var(--sc-danger-foreground);
  background: var(--sc-danger-background);
}

#dev-version-div {
  color: var(--sc-info-foreground);
  background: var(--sc-info-background);
}

/* Mobile */
@media only screen and (max-width: 651px) {
  #js-collapse-button {
    display: none !important;
  }
  body {
    display: block;
    width: 100%;
    padding: 0;
    /* grid-template-areas: "header" "main" !important;
    grid-template-rows: 4rem auto !important;
    grid-template-columns: auto !important; */
  }
  #menu--series {
    flex-direction: row;
    width: 100%;
    padding-top: 0;
  }
  #js-mobile-serieLogo.visible {
    display: block !important;
  }
  #js-mobile-serieName.visible {
    display: block !important;
  }
  #js-mobile-serieLogo,
  #js-mobile-serieName {
    display: none !important;
    font-size: 2rem;
    line-height: 4rem;
    margin-left: 0;
  }
}
a.header--menu--button {
  text-decoration: none !important;
}

.header--menu--button {
  margin: 0.85rem 0;
}

#header--browseMenu {
  display: flex;
  height: 4rem;
  color: inherit;
  position: relative;
}
#header--browseMenu::before {
  content: " ";
  display: none;
  position: absolute;
  top: calc(100% - 0.5rem);
  left: calc(50% - 0.5rem);
  border: 0.5rem solid transparent;
  border-bottom-color: var(--sc-primary-background);
}
#header--browseMenu::after {
  content: "";
  display: none;
  position: absolute;
  top: 100%;
  left: -0.75rem;
  right: 0;
  width: 100%;
  min-width: 350px;
  height: 4rem;
}
#header--browseMenu:hover::after {
  display: block;
}
#header--browseMenu:hover::before {
  display: block;
}
#header--browseMenu:hover .header--browseMenu--floater {
  display: flex;
}
#header--browseMenu .header--browseMenu--floater {
  z-index: 1;
  position: absolute;
  display: none;
  top: calc(100% + 0.5rem);
  left: -0.75rem;
  min-width: 550px;
  min-height: 300px;
  border-radius: 0.5rem;
  box-shadow: var(--std-box-shadow);
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
  max-height: calc(50vh - 4rem);
  overflow-y: auto;
}
#header--browseMenu .header--browseMenu--floater .header--browseMenu--floater--sections {
  border-radius: 0.5rem 0 0 0.5rem;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  width: 150px;
}
#header--browseMenu .header--browseMenu--floater .header--browseMenu--floater--sections div {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#header--browseMenu .header--browseMenu--floater .header--browseMenu--floater--sections div:hover {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
#header--browseMenu .header--browseMenu--floater .header--browseMenu--floater--headerSection {
  background: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  padding: 1rem 2rem;
  font-weight: bold;
}
#header--browseMenu .header--browseMenu--floater .header--browseMenu--floater--games {
  padding: 1rem;
  flex: 1;
}
#header--browseMenu .header--browseMenu--floater .header--browseMenu--floater--games .browseMenu--gameGenre {
  font-size: 0.8rem;
  line-height: 0.8rem;
  border-radius: 1rem;
  padding: 0.5rem;
  height: 1.8rem;
  margin: 1.1rem 0;
  background-color: var(--sc-secondary-light-background);
  color: var(--sc-secondary-light-foreground);
}
#header--browseMenu .header--game-selector {
  display: flex;
  height: 4rem;
  color: inherit;
  padding: 0 1rem;
  white-space: nowrap;
  text-decoration: none;
  transition: 0.3s all;
  border-radius: 0.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-top: 0.5rem;
  /* #home-selector.router-link-exact-active::after, */
  /*
  &.router-link-active div::after {
      content: ' ';
      position: absolute;
      left: 0; right: 0; bottom: 0;

      margin: 0 auto;

      width: 50%;
      height: 4px;
      background-color: var(--sc-header-foreground);
      border-radius: 4px 4px 0 0;
  }
  */
}
#header--browseMenu .header--game-selector:first-child {
  margin-top: 0;
}
#header--browseMenu .header--game-selector:hover {
  background-color: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  box-shadow: var(--std-box-shadow);
  cursor: pointer;
}
#header--browseMenu .header--game-selector img {
  height: 2.5rem;
  width: 2.5rem;
  margin: 0.75rem 0;
}
#header--browseMenu .header--game-selector div {
  line-height: 2rem;
  padding: 1rem 0.5rem;
}

.appNotificationsContainer {
  padding: 0.75rem 0;
  margin: 0;
  height: 4rem;
  position: relative;
}
.appNotificationsContainer .appNotifications--icon {
  font-size: 1.5rem;
  line-height: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: 2.5rem;
  transition: 0.3s all;
}
.appNotificationsContainer .appNotifications--icon:hover {
  cursor: pointer;
  color: var(--sc-primary-background);
  background-color: var(--sc-primary-foreground);
}
.appNotificationsContainer .appNotifications--unreadIndicator {
  position: absolute;
  top: calc(0.75rem - 0.5 * 0.6rem);
  left: calc(100% - 1.5 * 0.6rem);
  background-color: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
  font-size: 0.8rem;
  line-height: 0.8rem;
  padding: 0.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  text-align: center;
  font-weight: bold;
  border-radius: 0.6rem;
}
.appNotificationsContainer .appNotifications--notificationsList {
  position: absolute;
  top: 98%;
  right: -2rem;
  min-width: 350px;
  border-radius: 1rem;
  box-shadow: var(--heavy-box-shadow);
  padding: 1rem;
  background: var(--sc-surface-background);
  color: var(--sc-surface-foreground);
  max-height: calc(50vh - 4rem);
  overflow-y: auto;
}
.appNotificationsContainer .appNotifications--notificationsList:hover {
  cursor: default;
}
.appNotificationsContainer .appNotifications--notificationsList::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  right: calc(-1 * -2rem + 1.25rem - 8px);
  border: 8px solid transparent;
  border-bottom-color: var(--sc-surface-background);
}
.appNotificationsContainer .appNotifications--notificationsList--wrapper {
  height: 100%;
  overflow-y: auto;
}
.appNotificationsContainer .appNotifications--notificationsList--item {
  display: flex;
  text-decoration: none;
  transition: 0.3s all;
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  color: inherit;
}
.appNotificationsContainer .appNotifications--notificationsList--item:first-child {
  margin-top: 0;
}
.appNotificationsContainer .appNotifications--notificationsList--item.recentlyLoaded {
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground);
}
.appNotificationsContainer .appNotifications--notificationsList--item:hover {
  cursor: pointer;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  box-shadow: var(--std-box-shadow);
}
.appNotificationsContainer .appNotifications--notificationsList--item--image, .appNotificationsContainer .appNotifications--notificationsList--item--icon {
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
}
.appNotificationsContainer .appNotifications--notificationsList--item--icon {
  color: var(--sc-primary-foreground);
  background-color: var(--sc-primary-background);
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  /*
  &.log {background: var(--dg-color-toasts-dark); color: white;}

  &.primary { color: var(--sc-primary-foreground); background-color: var(--sc-primary-background); }
  &.secondary { color: var(--sc-secondary-foreground); background-color: var(--sc-secondary-background); }

  &.success { color: var(--sc-success-foreground); background-color: var(--sc-success-background); }
  &.info { color: var(--sc-info-foreground); background-color: var(--sc-info-background); }
  &.warning { color: var(--sc-warning-foreground); background-color: var(--sc-warning-background); }
  &.danger { color: var(--sc-danger-foreground); background-color: var(--sc-danger-background); }
  */
}
.appNotificationsContainer .appNotifications--notificationsList--item div {
  font-size: 1rem;
  line-height: 1rem;
  min-height: 2rem;
  padding: 0.5rem;
  flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.appNotificationsContainer .appNotifications--notificationsList--item--item--text {
  flex: 1;
}
.appNotificationsContainer .appNotifications--notificationsList .appNotifications--notificationsListEmptyState {
  padding: 2rem 0;
}
.appNotificationsContainer .appNotifications--notificationsList .appNotifications--notificationsListEmptyState div {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
.appNotificationsContainer .appNotifications--notificationsList .appNotifications--notificationsListEmptyState div:first-child {
  margin-top: 0;
}

footer {
  padding-top: 6rem;
  color: hsl(248, 31%, 24%);
  text-align: center;
  font-size: 1em;
  /* font-size: 0.8em; */
  letter-spacing: 0.2em;
  padding: 4rem 0;
}

.footer-links-container {
  font-size: 1rem;
}
.footer-links-container a {
  margin: 0 1rem;
}

/*
	CSS DOCUMENT
	PROPERTY OF DULCET GAMES INC.

    https://ihatetomatoes.net/create-custom-preloading-screen/

	March 7, 2018
*/
/* ! Common to Logged In & Off */
.menu-item {
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 3rem;
  font-weight: 500;
  background-color: transparent;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.3s;
}

/* .headers-gap-left {grid-area: gapLeft;} */
.headers-gap-right {
  grid-area: gapRight;
}

#menu-login-button,
.menu-item {
  padding: 0.75rem 1.5rem;
}

/* ! Logged Off */
#menu-container-logged-off > a {
  font-size: 2rem;
  line-height: 2rem;
  margin: 0.75rem;
  height: auto;
}

#menu-container-logged-off {
  display: flex;
  width: 100%;
  height: 5rem;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  z-index: 2;
  transition: 0.3s height;
}

#headers-logo-container-logged-off {
  text-align: center;
  width: 22rem;
  height: 4rem;
  margin: 0.5rem 2rem 0.5rem 5rem;
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}

.menu--pages-link.router-link-exact-active {
  /* .router-link-active { */
  background-color: var(--sc-primary-light-background);
  color: var(--sc-primary-light-foreground) !important;
}

#menu-signup-button:hover {
  background-color: var(--color-secondary-dark-background);
  color: var(--color-secondary-dark-foreground);
}

#menu-signup-button {
  display: none;
  background-color: var(--sc-secondary-background);
  color: var(--sc-secondary-foreground);
}

#menu-login-button:hover {
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground) !important;
}

#menu-login-button {
  background-color: var(--sc-primary-background);
  color: var(--sc-primary-foreground);
  border-radius: 5rem;
  margin-right: 3rem;
}

#menu-hamburger {
  display: none;
}

#menu-anti-hamburger {
  display: none;
}

@media only screen and (max-width: 1000px) {
  #headers-logo-container-logged-off {
    display: block !important;
    margin: 0.5rem 0 0.5rem 5%;
    width: calc(100vw - 7rem);
    height: 4rem;
  }
  #menu-container-logged-off > * {
    display: none;
  }
  #menu-hamburger {
    display: block;
    font-size: 2.5rem;
    line-height: 5rem;
    height: 5rem;
    width: 5rem;
    text-align: center;
    margin: 0;
    margin-left: auto;
  }
  #menu-anti-hamburger {
    position: absolute;
    display: none;
    font-size: 2.5rem;
    line-height: 5rem;
    height: 5rem;
    width: 5rem;
    text-align: center;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
  /* When the menu is opened */
  #menu-container-logged-off.opened {
    height: 100vh;
    flex-direction: column;
  }
  #menu-container-logged-off.opened #menu-hamburger {
    display: none;
  }
  #menu-container-logged-off.opened #menu-anti-hamburger {
    display: block;
  }
  #menu-container-logged-off.opened * {
    display: block;
  }
  #menu-container-logged-off.opened #menu-login-button {
    width: calc(100% - 1.5rem);
  }
  #menu-container-logged-off.opened #menu-signup-button {
    display: block;
    width: calc(100% - 1.5rem);
  }
}
.header-new::after {
  content: "NEW";
  color: white;
  background: rgb(220, 29, 29);
}

.header-beta-stamp::after {
  content: "BETA";
  color: var(--sc-secondary-foreground);
  background: var(--sc-secondary-background);
}

.header-moderation-stamp::after {
  content: attr(data-new-moderation-tasks);
  color: var(--sc-primary-light-foreground);
  background-color: var(--sc-primary-light-background);
  /* background: rgb(220, 29, 29); */
}

.header-new::after,
.header-moderation-stamp::after,
.header-beta-stamp::after {
  position: absolute;
  left: calc(100% - 0.5rem);
  top: 0.25rem;
  bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 2rem;
  font-weight: bold;
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  box-shadow: var(--std-box-shadow);
  /* transform: rotate(20deg); */
}

.dg-fa-experimental-stamp {
  display: flex !important;
}

.dg-fa-experimental-stamp:hover::before {
  transform: rotate(10deg);
}

.dg-fa-experimental-stamp::before {
  position: absolute;
  left: calc(100% - 0.5rem);
  top: 0.25rem;
  bottom: 0.25rem;
  color: var(--sc-secondary-foreground);
  background: var(--sc-secondary-background);
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 2rem;
  transition: 0.3s transform;
  transform: rotate(-20deg);
  box-shadow: var(--std-box-shadow);
}

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes shrink {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(0.95, 0.95, 0.95);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.shrink {
  animation-name: shrink;
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  animation-name: pulse;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation-name: spin;
}
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  animation-name: rubberBand;
}
@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  animation-name: shake;
}
@keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}
.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  transform-origin: top center;
  animation-name: swing;
}
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.wobble {
  animation-name: wobble;
}
@keyframes jello {
  from, 11.1%, to {
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  animation-name: jello;
  transform-origin: center;
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
.heartBeat {
  animation-name: heartBeat;
  animation-duration: 1.3s;
  animation-timing-function: ease-in-out;
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  animation-duration: 0.75s;
  animation-name: bounceIn;
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInDown {
  animation-name: bounceInDown;
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  animation-name: bounceInLeft;
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInRight {
  animation-name: bounceInRight;
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  animation-name: bounceInUp;
}
@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  animation-duration: 0.75s;
  animation-name: bounceOut;
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  animation-name: bounceOutDown;
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  animation-name: bounceOutLeft;
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  animation-name: bounceOutRight;
}
@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  animation-name: bounceOutUp;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownBig {
  animation-name: fadeInDownBig;
}

/* fadeInLeft4rem: Mostly used for whole page transitions */
@keyframes fadeInLeft4rem {
  from {
    opacity: 0;
    transform: translate3d(-4rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft4rem {
  animation-name: fadeInLeft4rem;
}

@keyframes fadeInUp1rem {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp1rem {
  animation-name: fadeInUp1rem;
}

@keyframes fadeOutDown1rem {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
}
.fadeOutDown1rem {
  animation-name: fadeOutDown1rem;
}
@keyframes fadeInLeftSmall {
  from {
    opacity: 0;
    transform: translate3d(-25%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftSmall {
  animation-name: fadeInLeftSmall;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}
@keyframes fadeInRightSmall {
  from {
    opacity: 0;
    transform: translate3d(25%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightSmall {
  animation-name: fadeInRightSmall;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightBig {
  animation-name: fadeInRightBig;
}
@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    transform: translate3d(0, 25%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpSmall {
  animation-name: fadeInUpSmall;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpBig {
  animation-name: fadeInUpBig;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

/* fadeOutRight4rem: Mostly used for whole page transitions */
@keyframes fadeOutRight4rem {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(4rem, 0, 0);
  }
}
.fadeOutRight4rem {
  animation-name: fadeOutRight4rem;
}

/* fadeOutRight Small */
@keyframes fadeOutRightSmall {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(25%, 0, 0);
  }
}
.fadeOutRightSmall {
  animation-name: fadeOutRightSmall;
}

/* fadeOutRight */
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  animation-name: fadeOutRight;
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}
@keyframes fadeOutUpSmall {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -25%, 0);
  }
}
.fadeOutUpSmall {
  animation-name: fadeOutUpSmall;
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}
@keyframes flip {
  from {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}
@keyframes flipOutX {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  animation-duration: 0.75s;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}
@keyframes flipOutY {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  animation-duration: 0.75s;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}
@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}
@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateIn {
  animation-name: rotateIn;
}
@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}
@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownRight {
  animation-name: rotateInDownRight;
}
@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}
@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpRight {
  animation-name: rotateInUpRight;
}
@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1;
  }
  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  animation-name: rotateOut;
}
@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}
@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}
@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}
@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}
@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  animation-duration: 2s;
  animation-name: hinge;
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.jackInTheBox {
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.rollIn {
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  animation-name: rollOut;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  animation-name: zoomInDown;
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  animation-name: zoomInLeft;
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  animation-name: zoomInRight;
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  animation-name: zoomInUp;
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  animation-name: zoomOut;
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  animation-name: zoomOutDown;
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}
.zoomOutLeft {
  animation-name: zoomOutLeft;
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}
.zoomOutRight {
  animation-name: zoomOutRight;
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  animation-name: zoomOutUp;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

.animated.fast {
  animation-duration: 800ms;
}

.animated.faster {
  animation-duration: 500ms;
}

.animated.slow {
  animation-duration: 2s;
}

.animated.slower {
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}
@keyframes backInDown {
  0% {
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInDown {
  animation-name: backInDown;
}
@keyframes backInLeft {
  0% {
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInLeft {
  animation-name: backInLeft;
}
@keyframes backInRight {
  0% {
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInRight {
  animation-name: backInRight;
}
@keyframes backInUp {
  0% {
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.backInUp {
  animation-name: backInUp;
}
@keyframes backOutDown {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.backOutDown {
  animation-name: backOutDown;
}
@keyframes backOutLeft {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.backOutLeft {
  animation-name: backOutLeft;
}
@keyframes backOutRight {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.backOutRight {
  animation-name: backOutRight;
}
@keyframes backOutUp {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  20% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.backOutUp {
  animation-name: backOutUp;
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  animation-name: slideInUp;
}
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  animation-name: slideInRight;
}
@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  animation-name: slideInDown;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  animation-name: slideInLeft;
}
@keyframes slideOutTop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutTop {
  animation-name: slideOutTop;
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}
@keyframes slideOutBottom {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutBottom {
  animation-name: slideOutBottom;
}
@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  animation-name: slideOutLeft;
}