@font-face {
    font-family: Gumption;
    src: url('/media/fonts/Gumption.otf');
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.bg-green {
    background: mediumspringgreen;
    color: white;
}

.bg-coral {
    background: coral;
    color: white;
}

.bg-gold {
    background: #ffb700;
    color: white;
}

.bg-ldpink {
    background: #DD9DA5;
    color: white;
}

.bg-ldmint {
    background: #ABC7B3;
    color: white;
}

.bg-ldblue {
    background: #7EB6CE;
    color: white;
}

.disabled {
    cursor: not-allowed !important;
}

.disabled:active {
    pointer-events: none !important;
}

.pointer{
    cursor: pointer;
}

.softbutton {
    cursor: pointer;
    border-radius: 5px;
    padding: 4px;
    box-shadow: 2px 2px 4px #7EB6CE;
    width: 100px;
    height: 30px;
}

.softbutton:hover {
    filter: brightness(110%);
}

.softbutton:active {
    box-shadow: 1px 1px 4px #7EB6CE;
}

.softbutton:disabled {
    cursor: not-allowed;
    filter: brightness(70%) !important;
}

.header {
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 5px #555;
    z-index: 33;
}

.main {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 32px;
    width: 100%;
    min-height: 50vh;
    /*text-align: center;*/
    z-index: 1;
}

.gap8 {
    gap: 8px;
}

.gap4 {
    gap: 4px;
}

.flex-row {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    /*width: 100%;*/
}

.flex-col {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    width: 100%;
}

.table-head {
    background: gray;
}

.table-row {
    background: lightgray;
}

.table-row:nth-child(odd) {
    background: darkgray !important;
}

.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 32px;
    width: 100%;
    min-height: 50vh;
    text-align: center;
    padding-bottom: 32px;
}

.justify-center {
    justify-content: center;
}

.footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    background-color: #DD9DA5;
    gap: 8px;
    position: static;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

.footer2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    background-color: #DD9DA5;
    gap: 8px;
    margin-top: 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.fi {
    color: white;
    text-decoration: none;
}

.version {
    color: white;
    font-size: 10px;
    font-family: Consolas, serif;
    align-self: center;
}

.modal-background,
.modalBackground {
    /*display: none; !* Hidden by default *!*/
    display: flex;
    visibility: collapse; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    /*padding-top: 100px; !* Location of the box *!*/
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}

.frame {
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 5px #333;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-color: white;
    margin-top: 32px;
}

.frame80 {
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 5px #333;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-color: white;
    /*width: 80%; use min-width baka! */
    /*height: 80vh; use min-width baka! */
    min-width: 80%;
    min-height: 80vh;
    margin-top: 32px;
}

.frame-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    background: #838383;
    color: white;
}

.frame-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    fill: white;
}

.frame-title {
    margin-right: auto;
}


.frame-content {
    display: flex;
    flex-direction: column;
    font-family: Consolas, serif;
    flex: 1;
    box-sizing: border-box;
    height: 100%;
}


.frameHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    background: #838383;
    color: white;
}

.frameIcon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    fill: white;
}

.frameTitle {
    margin-right: auto;
}

.frameButtonBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 8px;
    margin-left: auto;
}

.frameButton {
    font-size: 32px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    fill: white;
}

.frameButton:hover {
    text-shadow: 0 0 10px coral,
    0 0 10px coral,
    0 0 10px coral,
    0 0 10px coral;
}

.frameKVItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px;
    gap: 3px;
}

.frameContent {
    display: flex;
    flex-direction: column;
    font-family: Consolas, serif;
    flex: 1;
    box-sizing: border-box;
    height: 100%;
}

.frameInnerContent {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}


.formView {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 24px;
    height: 64px;
    gap: 4px;
}

.formErrorView {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.formErrorViewHeader {

}

.formErrorViewContent {

}

.formInputContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
}

.formSendButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
    width: 64px;
    background: springgreen;
    color: white;
    border-radius: 0 45px 45px 0;
}

.formSendButtonDisabled {
    background: dimgray;
}

.formSendButtonLoading {
    background: dimgray;
    cursor: progress !important;
}

.formSendButtonLoading > svg {
    animation: spin 2s linear infinite;
}

.formSendButton > svg {
    width: 32px;
    height: 32px;
    fill: white;
}

.formInput {
    font-size: 20px;
}


@-webkit-keyframes glow {
    to {
        border-color: #69c800;
        -webkit-box-shadow: 0 0 5px #69c800;
        -moz-box-shadow: 0 0 5px #69c800;
        box-shadow: 0 0 5px #69c800;
    }
}

.myGlower2 {
    background-color: #ccc;
    border: 1px solid transparent;
    -webkit-animation: glow 1.0s infinite alternate;
    -webkit-transition: border 1.0s linear, box-shadow 1.0s linear;
    -moz-transition: border 1.0s linear, box-shadow 1.0s linear;
    transition: border 1.0s linear, box-shadow 1.0s linear;
    width: 100px;
    height: 100px;
    margin: 50px;
}


@media only screen and (max-width: 768px) {
    .frame80 {
        width: 100%;
    }

    .dialog-frame {
        max-width: 100%;
        min-width: 100% !important;
        width: 100%;
    }

    .msgbox {
        /*background-color: green;*/
        width: 80%;
        max-width: 768px;
    }

    .subCatContainerH {
        /*flex-wrap: wrap;*/
    }

}

/* TOOL BAR */
.tool-bar,
.toolBar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*padding: 4px; looked better without added margin-bottom instead*/
    margin-bottom: 8px;
}

.toolBarButtonPanel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.toolBarButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    text-align: center;
    cursor: pointer;
}

.toolBarButton:has(svg) {
    display: flex;
    justify-content: center;
    align-items: center;
    fill: dimgray;
    width: 50px;
    height: 50px;
}

.toolBarSeparator {
    width: 2px;
    height: 50px;
    background-color: dimgray;
}

.newFeature {
    animation: aufmerksamkeit 2s linear infinite;
}

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

@keyframes aufmerksamkeit {
    0% {
        fill: dimgray;
    }
    40% {
        fill: #ffb700;
    }
    50% {
        fill: springgreen;
    }
    60% {
        fill: #ffb700;
    }
    100% {
        fill: dimgray;
    }
}

.toolBarButtonLoading {
    border: 12px solid #f3f3f3;
    border-top: 12px solid coral;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    animation: spin 2s linear infinite;
}

.toolBarButtonLoading:hover {
    border: none;
    border-radius: 0;
    fill: red;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>close-circle-outline</title><path fill="red" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" /></svg>') center center no-repeat;
    background-size: 50px;
    width: 50px;
    height: 50px;
    animation: none;
    z-index: 1;
}

/* TOOL BAR */
.toolbar {
    margin: 10px 10px 20px 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* NAV BAR */
.toolbar-h {
    margin: 0 10px 20px 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.hNavBar {
    margin: 0 10px 20px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.hNavBarHorizontalGlue {
    margin-left: auto;
    margin-right: auto;
}

.hNavBarSeparator {
    /*border-left: 6px solid #838383;*/
    background: #888888;
    height: 50px;
    width: 2px;
    max-width: 2px;
    margin: 0 10px 0 10px;

}

.hNavBarItem {
    cursor: pointer;
}

.hNavBarItemSelected {
    text-shadow: 0 0 10px #ff0055;
}

.hNavBarButton {
    cursor: pointer;
    width: 50px;
}

.hFolderNavBar {
    height: 32px;
    margin: 10px 10px 20px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.hFolderNavItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-bottom: 2px solid #333;
    height: 100%;
    padding: 4px 8px 4px 8px;
}

.hFolderNavItem:hover {
    text-shadow: 0 0 10px #ff0055;
}

.hFolderNavItemTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.hFolderNavItemTitleText {

}

.hFolderNavItemIcon {
    width: 16px;
    height: 16px;
}

.hFolderNavItemSelected {
    border-bottom: none;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
}

.hFolderNavItemFiller {
    display: flex;
    border-bottom: 2px solid #333;
    height: 100%;
    flex: 1;
}


/* DIALOGS */

.dialog-frame,
.dialogFrame {
    display: flex;
    flex-direction: column;
    max-width: 420px;
    margin-top: 24px;
    height: auto;
    box-shadow: 5px 5px 5px #333;
    background: white linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    /*aspect-ratio: 4/3;*/
}

/*.dialogConfig {*/
/*    min-width: 320px;*/
/*    width: 500px;*/
/*    height: 300px;*/
/*}*/

.dialogContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    flex: 1;
}

.dialogButtonPane {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 8px;
}

.dialogButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 50px;
    flex: 1;
}

.dialogButton > svg {
    fill: white;
    width: 50px;
    height: 50px;
}

.dby {
    /*background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-circle-outline</title><path fill=white d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>') center center no-repeat;*/
    background: springgreen;
}

.dbn {
    /*background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>close-circle-outline</title><path fill="red" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" /></svg>') center center no-repeat;*/
    background: #ff0055;
}

.flex25 {
    flex: .25;
}

.flex90 {
    flex: .9;
}

.width100perc {
    width: 100%;
}

.kv {
    width: 290px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.kvContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 19px;
    width: 100%;
}

.kvContainerH {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 19px;
}

.kvContainerV {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    width: 100%;
}

.k {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
    flex: .25;
}

.v {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    text-align: start;
}

.v:is([type="checkbox"]){
    justify-content: flex-start;
}

.chk-k {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    text-align: start;
}

.chk-v {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
    flex: .1;
}

.customInputButton {
    fill: gray;
    width: 30px;
    height: 30px;
    padding: 1px 3px 1px 1px;
    flex: .1;
}

.resetInputVisuals {
    border: none;
    background: none;
    flex: 1;
}

.customInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: white;
    border: 1px solid black;
    border-radius: 5px;
    height: 32px;
}


.listContainers {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.listMiddleColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: .06;
}

.listMiddleButton {
    width: 32px;
    height: 32px;
    border-radius: 25px;
    fill: #333;
    border: 1px solid #333
}

.listMiddleButton > svg {

}

.listContainer {
    display: flex;
    flex-direction: column;
    /*flex: .47;*/
    flex: 1;
    min-width: 280px;
    width: 47%;
    box-shadow: 0 0 10px #333 inset;
    overflow-y: scroll;
    box-sizing: border-box;

}

.listItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    cursor: pointer;
    padding: 4px;
    margin: 0 4px 0 4px;
    box-shadow: 3px 3px 3px #333;
}

.listItem:hover {
    text-shadow: 0 0 10px #00ffbb;
}

.listItemText {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.listItemButton {
    width: 24px;
    height: 24px;
    background: #333;
}

.selectedListItem {
    box-shadow: 3px 3px 3px #00ffbb !important;
}

.cat-frame,
.catFrame {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    border: 1px solid dimgray;
    margin: 8px;
    /*padding: 6px;//padding makes titlebars go poof!*/
    flex: 1;
}

.border-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    border: 1px solid dimgray;
    margin: 8px;
    padding: 6px;
    flex: 1;
}

.catHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: lightgray;
    color: white;
    width: 100%;
    font-weight: bold;
    border-radius: 12px 12px 0 0;
    padding: 16px;
    gap: 6px;
}

.catHeaderTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
}

.cat-header-button,
.catHeaderButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    fill: white;
    cursor: pointer;
    border-radius: 15px;
}

.catHeaderSeparator {
    width: 1px;
    height: 100%;
    background: white;
    margin-left: 4px;
    margin-right: 4px;
}

.catContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px;
    gap: 8px;
    width: calc(100% - 64px);
    height: 100%;
}

.cat-sub-container,
.subCatContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 8px; deactivated! put subitems in container with gap!*/
    border-radius: 12px;
    border: 1px solid dimgray;
    padding: 16px;
}

.subCatContainerH {
    display: flex;
    flex-direction: row;
    /*gap: 8px; deactivated! put subitems in container with gap!*/
    border-radius: 12px;
    border: 1px solid dimgray;
    padding: 16px;
}

.bottomRightNumberContainer {
    width: 32px;
    height: 32px;
    fill: white;
    display: inline-block;
    position: relative;
}

.bottomRightNumberValue {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: #ffb700;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    cursor: default;
}

.centerNumberValue {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    font-weight: bold;
    cursor: default;
}

.col-redA50 {
    --col: rgba(255, 0, 85, 0.5);
}

.col-orangeA50 {
    --col: rgba(255, 128, 0, 0.5);
}

.col-blueA50 {
    --col: rgba(0, 225, 255, 0.5);
}

.col-greenA50 {
    --col: rgba(0, 250, 154, 0.5);
}

.col-grayA50 {
    --col: rgba(103, 103, 103, 0.5);
}

.col2-trans,
.col2-whiteA0 {
    --col2: rgba(255, 255, 255, 0);
}

.stripes {
    background-image: linear-gradient(45deg, var(--col) 25%, var(--col2) 25%, var(--col2) 50%, var(--col) 50%, var(--col) 75%, var(--col2) 75%, var(--col2) 100%);
    /*background-image: -moz-linear-gradient(-45deg, var(--col2) 25%, var(--col) 25%, var(--col) 50%, var(--col2) 50%, var(--col2) 75%, var(--col) 75%, var(--col));*/
    background-size: 20px 20px;
}

.stripes-orange {
    --col: rgba(255, 128, 0, 0.3);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0) 25%, var(--col) 25%, var(--col) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 75%, var(--col) 75%, var(--col));
    background-size: 20px 20px;
}

.stripes-red {
    --col: rgba(255, 0, 0, 0.3);
    /*background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0) 25%, var(--col) 25%, var(--col) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 75%, var(--col) 75%, var(--col));*/
    background-image: -moz-linear-gradient(-45deg, var(--col) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, var(--col) 50%, var(--col) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
    background-size: 20px 20px;
}

.status-bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background: var(--col, red);
    padding: 6px;
    gap: 8px;
}

.status-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    fill: white;
    width: 24px;
    height: 24px;
}

.status-msg {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: white;
    flex: 1;
}

.glitch_this {
    -webkit-filter: url("/media/filter/glitchSVG.svg#glitch");
    filter: url("/media/filter/glitchSVG.svg#glitch");
}

.glitch_this:hover {
    /* cursor: pointer;
    -webkit-filter: none;
    filter: none; */
}

.glitch_this img {
    height: auto;
    max-width: 100%;
}

/*.metallic {*/
/*    border: none;*/
/*    outline: none;*/
/*    color: #000;*/
/*    background: linear-gradient(*/
/*            45deg,*/
/*            #999 5%,*/
/*            #fff 10%,*/
/*            #ccc 30%,*/
/*            #ddd 50%,*/
/*            #ccc 70%,*/
/*            #fff 80%,*/
/*            #999 95%*/
/*    );*/
/*    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);*/
/*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
/*    !*transition: all 0.2s ease-in-out;*!*/
/*}*/

.fillSilver {
    fill: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\'><linearGradient id=\'grad\' x2=\'0.75\' y2=\'1\'><stop offset=\'0%\' stop-color=\'%23ffffff\'/><stop offset=\'5%\' stop-color=\'%23aaaaaa\'/><stop offset=\'10%\' stop-color=\'%23ffffff\'/><stop offset=\'30%\' stop-color=\'%23cccccc\'/><stop offset=\'50%\' stop-color=\'%23dddddd\'/><stop offset=\'70%\' stop-color=\'%23cccccc\'/><stop offset=\'80%\' stop-color=\'%23ffffff\'/><stop offset=\'95%\' stop-color=\'%23aaaaaa\'/></linearGradient></svg>#grad') gray;
}

.fillCopper {
    fill: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\'><linearGradient id=\'grad\' x2=\'0.75\' y2=\'1\'><stop offset=\'0%\' stop-color=\'%2394716B\'/><stop offset=\'5%\' stop-color=\'%23B79891\'/><stop offset=\'10%\' stop-color=\'%23B79891\'/><stop offset=\'30%\' stop-color=\'%23BAA7A2\'/><stop offset=\'50%\' stop-color=\'%23AF958D\'/><stop offset=\'70%\' stop-color=\'%2394716B\'/><stop offset=\'80%\' stop-color=\'%23AF958D\'/><stop offset=\'95%\' stop-color=\'%2394716B\'/></linearGradient></svg>#grad') #B79891;
}

.fillSilver2 {
    background: linear-gradient(
            45deg,
            #777777 5%,
            #fff 10%,
            #ccc 30%,
            #ddd 50%,
            #ccc 70%,
            #fff 80%,
            #999 95%
    );
}

.fillGold {
    fill: url('data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\'><linearGradient id=\'grad\' x2=\'0.75\' y2=\'1\'><stop offset=\'0%\' stop-color=\'%23ffffff\'/><stop offset=\'5%\' stop-color=\'%23d4af37\'/><stop offset=\'10%\' stop-color=\'%23debc5b\'/><stop offset=\'30%\' stop-color=\'%23e7c97c\'/><stop offset=\'50%\' stop-color=\'%23efd69d\'/><stop offset=\'70%\' stop-color=\'%23e7c97c\'/><stop offset=\'80%\' stop-color=\'%23debc5b\'/><stop offset=\'95%\' stop-color=\'%23d4af37\'/><stop offset=\'100%\' stop-color=\'%23e7c97c\'/></linearGradient></svg>#grad') darkgoldenrod;
}

/*.fillGold{*/
/*    background: linear-gradient(*/
/*            45deg,*/
/*            #d4af37 5%,*/
/*            #debc5b 10%,*/
/*            #e7c97c 30%,*/
/*            #efd69d 50%,*/
/*            #e7c97c 70%,*/
/*            #debc5b 80%,*/
/*            #d4af37 95%*/
/*    );*/
/*}*/

.metallicShimmer {
    color: blue;
    display: inline-block;
    mask: linear-gradient(-35deg, #000 30%, #0005, #000 70%) right/350% 100%;
    animation: metallicShimmer 2.5s infinite;
}

@keyframes metallicShimmer {
    100% {
        mask-position: left
    }
}

.textLoadAnimation {
    display: inline-block;
    mask: linear-gradient(90deg, #000 30%, #0005, #000 70%) right/350% 100%;
    animation: textLoadFrames 2.5s infinite;
    background: darkgray;
}

@keyframes textLoadFrames {
    100% {
        mask-position: left
    }
}

@keyframes shrinkFrom150Frames {
    0% {
        scale: 1.5;
    }
    100% {
        scale: 1;
    }
}

@keyframes fadeAlpha0Frames {
    0% {
        fill: rgba(255, 255, 255, 0);
    }
    100% {
        fill: rgba(255, 255, 255, 1);
    }
}

@keyframes fadeAlpha50Frames {
    0% {
        fill: rgba(255, 255, 255, 0.5);
    }
    100% {
        fill: rgba(255, 255, 255, 1);
    }
}

.creds {
    font-family: 'Poppins', sans-serif;
    position: fixed;
    font-size: 10px;
    bottom: 0;
    right: 8px;
}

.hex-bg1 {
    --s: 13px; /* control the size*/
    --c1: #3a3a3a;
    --c2: #370000;

    --c: #0000, var(--c1) .5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
    background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)),
    var(--g2), var(--g2) var(--s) calc(1.73 * var(--s)),
    var(--g3) var(--s) 0, var(--g3) 0 calc(1.73 * var(--s)) var(--c2);
    background-size: calc(2 * var(--s)) calc(3.46 * var(--s));
}


/* HTML: <div class="hexloader"></div> */
.hexloader {
    width: 74px;
    height: calc(27px * 0.866 + 6px);
    display: grid;
}

.hexloader:before,
.hexloader:after {
    content: "";
    grid-area: 1/1;
    /*background:#FD135A;*/
    background: #FFB6C1;
    --c1: conic-gradient(from 150deg at top, #000 60deg, #0000 0);
    --c2: conic-gradient(from -30deg at bottom, #000 60deg, #0000 0);
    --s: 27px calc(27px * 0.866);
    clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 100%, 0 100%);
    -webkit-mask: var(--c1) left 6px top 4px,
    var(--c2) center,
    var(--c1) right 6px top 4px,
    linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-repeat: no-repeat;
    animation: l6b 2s infinite both;
}

.hexloader:after {
    transform: rotate(180deg);
    transform-origin: 50% 99%;
    animation-delay: 0.5s;
}

@keyframes l6b {
    0% {
        -webkit-mask-size: 0 0, 0 0, 0 0, auto
    }
    8.33% {
        -webkit-mask-size: var(--s), 0 0, 0 0, auto
    }
    16.67% {
        -webkit-mask-size: var(--s), var(--s), 0 0, auto
    }
    25%,
    50% {
        -webkit-mask-size: var(--s), var(--s), var(--s), auto
    }
    58.33% {
        -webkit-mask-size: 0 0, var(--s), var(--s), auto
    }
    66.67% {
        -webkit-mask-size: 0 0, 0 0, var(--s), auto
    }
    75%,
    100% {
        -webkit-mask-size: 0 0, 0 0, 0 0, auto
    }
}


/* HTML: <div class="wurstloader"></div> */
.wurstloader {
    height: 35px;
    width: 80px;
    margin-left: 0px;
    background: radial-gradient(farthest-side, #ffd1d1 94%, #0000) 4px 22px/5px 5px,
    radial-gradient(farthest-side, #ffd1d1 94%, #0000) 12px 18px/5px 5px,
    radial-gradient(farthest-side, #ffd1d1 94%, #0000) 3px 6px/8px 8px,
    radial-gradient(farthest-side, #eb8594 90%, #0000 94%) left/20px 100%,
    #bd3342;
    background-repeat: no-repeat;
    border-radius: 0 50px 50px 0;
    border-top-left-radius: 30px 40px;
    border-bottom-left-radius: 30px 40px;
    animation: l7 3s infinite steps(10);
    position: relative;
}

.wurstloader::before {
    content: " ";
    position: absolute;
    inset: calc(50% - 8px) -10px calc(50% - 8px) auto;
    width: 15px;
    background: #bd3342;
    clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%);
}

@keyframes l7 {
    100% {
        width: 20px;
        margin-left: 60px;
    }
}

.paused {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* HTML: <div class="conveyorloader"></div> */
.conveyorloader {
    width: 90px;
    height: 14px;
    box-shadow: 0 3px 0 #fff;
    position: relative;
    clip-path: inset(-40px 0 -5px)
}

.conveyorloader:before {
    content: "";
    position: absolute;
    inset: auto calc(50% - 17px) 0;
    height: 50px;
    --g: no-repeat linear-gradient(#ccc 0 0);
    background: var(--g), var(--g), var(--g), var(--g);
    background-size: 16px 14px;
    animation: l7-1 2s infinite linear,
    l7-2 2s infinite linear;
}

@keyframes l7-1 {
    0%,
    100% {
        background-position: 0 -50px, 100% -50px
    }
    17.5% {
        background-position: 0 100%, 100% -50px, 0 -50px, 100% -50px
    }
    35% {
        background-position: 0 100%, 100% 100%, 0 -50px, 100% -50px
    }
    52.5% {
        background-position: 0 100%, 100% 100%, 0 calc(100% - 16px), 100% -50px
    }
    70%,
    98% {
        background-position: 0 100%, 100% 100%, 0 calc(100% - 16px), 100% calc(100% - 16px)
    }
}

@keyframes l7-2 {
    0%, 70% {
        transform: translate(0)
    }
    100% {
        transform: translate(200%)
    }
}