:root {
    --roundness: 16px;
    --roundness2: 8px;
    --monochrome-0: #404040;
    --monochrome-1: #707070;
    --monochrome-2: #A0A0A0;
    --monochrome-3: #CFCFCF;
    --monochrome-4: #E7E7E7;
    --monochrome-5: #F6F6F6;
    --shadow: 0px 48px 128px 8px rgba(0, 0, 0, .3);
}


.theme-connect-blue {
    --primary: #2732A7;
    --primary-variant-0: #f0f0f5;
    --primary-variant-1: #e1e2eb;
    --primary-variant-2: #c3c5d6;
    --primary-variant-3: #a5a7c2;
    --primary-variant-4: #878aae;
    --primary-variant-5: #4a5085;
    --primary-variant-6: #2c3271;
    --on-primary: white;
    --secondary: #FFEEDB;
    --on-secondary: black;
    --white: white;
    --red: #EE5B73;
    --orange: #F3B862;
    --yellow: #E9D66B;
    --green: #26A69B;
    --purple: #814FC2;
    --warning-red: #d64242;
}



body {
    background-color: var(--primary);
    overflow-y: hidden;
}

.layout {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    font-family: 'Quicksand','Segoe UI', sans-serif;
}

.header {
    display: grid;
    grid-template-columns: 60px max-content 1fr 1fr 1fr 60px 60px 60px;
    grid-template-rows: 60px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    background: transparent;
    overflow: hidden;
}

.headerButtonImage {
    transform: translateY(12px) translateX(12px);
    width: 36px;
    z-index: 1;
    cursor: pointer;
}

.headerDashboardTitle {
    font-size: 36px;
    font-weight: 800;
    color: white;
    align-self: center;
    text-align: center;
    min-width: max-content;
    user-select: none;
}

.headerSpacer {

}

.buttonImage {
    width: 24px;
    transform: translateY(2px) translateX(2px);
}

@-webkit-keyframes lineMenuButtonClickRight {
    0% {
        -webkit-transform: translateX(0px) scale(.95);
    }

    10% {
        -webkit-transform: translateX(3px) scale(.95);
    }

    30% {
        -webkit-transform: translateX(3px) scale(1);
    }

    40% {
        -webkit-transform: translateX(-1px) scale(1);
    }

    60% {
        -webkit-transform: translateX(-1px) scale(1);
    }

    70% {
        -webkit-transform: translateX(0px) scale(1);
    }
}

@-webkit-keyframes lineMenuButtonClickLeft {
    0% {
        -webkit-transform: translateX(0px) scale(.95);
    }

    10% {
        -webkit-transform: translateX(-3px) scale(.95);
    }

    30% {
        -webkit-transform: translateX(-3px) scale(1);
    }

    40% {
        -webkit-transform: translateX(1px) scale(1);
    }

    60% {
        -webkit-transform: translateX(1px) scale(1);
    }

    70% {
        -webkit-transform: translateX(0px) scale(1);
    }
}

.lineMenuButton {
    -webkit-transform: translateX(0px) scale(1);
    margin-top: 12px;
    margin-left: 12px;
    user-select: none;
}

.lineMenuButtonLeft {
    -webkit-animation: unset;
    -webkit-animation: lineMenuButtonClickRight .5s ease-in-out forwards;
}

.lineMenuButtonRight {
    -webkit-animation: unset;
    -webkit-animation: lineMenuButtonClickLeft .5s ease-in-out forwards;
}

.logo {
    -webkit-transform: translateY(12px) rotate(0deg);
    margin-right: 12px;
    height: 36px;
    z-index: 1;
    user-select: none;
}

.mainContent {
    -webkit-transition: all .2s;
    transition: all .2s;
    height: calc(100% - 60px);
    width: calc(100% - 200px);
    position: absolute;
    top: 60px;
    right: 0px;
    border: 0px solid;
    border-top: 0px solid;
    border-left: 0px solid;
    border-color: var(--on-primary);
    border-top-left-radius: 18px;
    background: url("../Images/gridBGTest.png") 0 0 repeat;
    overflow-y: auto;
}

.mainBig {
    width: calc(100% - 4px);
}

.mainSmall {
    width: calc(100% - 200px);
}



/* || Side Menu */

.menu {
    position: fixed;
    top: 60px;
    left: 0px;
    box-sizing: border-box;
    -webkit-transition: all .1s;
    transition: all .1s;
    width: 200px;
    background: transparent;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 60px);
}

.menuButton {
    -webkit-transition: all .1s;
    transition: all .1s;
    background-color: transparent;
    color: var(--on-primary);
    border: none;
    text-align: left;
    padding-left: 16px;
    padding-right: 8px;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 4px;
    border-radius: var(--roundness2);
    min-height: 36px;
    height: 48px;
    width: 192px;
    font-weight: 400;
    position: relative;
    z-index: 0;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .menuButton:active {
        -webkit-transition: all .05s ease-in;
        transition: all .05s ease-in;
        background-color: var(--primary-variant-0);
        color: var(--primary);
    }

.menuButtonSelected {
    background-color: white;
    color: var(--primary);
    font-weight: 600;
}

.menuButtonSelectedOverride {
    background-color: transparent !important;
}

.menuButtonHolder {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: min-content min-content;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 4px;
}

.menuButtonHalf {
    min-width: 94px;
    margin: 0px;
    width: fit-content;
}

/* … */



.dashRoomWindow {
}

.floatingButtonContainer {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floatingButton {
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    color: var(--monochrome-0);
    background-color: var(--monochrome-4);
    text-align: center;
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
    min-height: 56px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 64px;
    z-index: 1;
    font-size: 28px;
    user-select: none;
    outline: 0px solid white;
    cursor: pointer;
    opacity: .75;
}

    .floatingButton img {
        -webkit-transition: all .05s ease-in;
        transition: all .05s ease-in;
        opacity: .75;
    }

    .floatingButton:hover {
        background-color: var(--primary);
        color: var(--on-primary);
        font-weight: 700;
        z-index: 2;
        outline: 3px solid white;
        opacity: 1;
    }

        .floatingButton:hover img {
            filter: invert();
            opacity: 1;
        }

    .floatingButton:active {
        background-color: var(--primary-variant-5);
        color: var(--on-primary);
        opacity: 1;
    }



.dashWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-template-rows: repeat(5, minmax(160px, 1fr));
    grid-auto-rows: 0px;
    grid-gap: 4px;
    box-sizing: border-box;
    padding-top: 4px;
    padding-left: 4px;
    border-collapse: collapse;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    max-width: 100%;
    overflow: hidden;
}

.dashMainWindow {
    height: 100%;
}

.dashPoint {
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
    display: grid;
    grid-template-rows: 32px calc(100% - 56px) 24px;
    text-align: center;
    border: 4px solid;
    border-radius: var(--roundness);
    box-sizing: border-box;
    background-color: #F6F6F6;
    cursor: pointer;
    user-select: none;
    max-width: 100%;
}

    .dashPoint:hover {
        opacity: .9;
    }

    .dashPoint:active {
        opacity: .8;
    }

.dashSetPointLight {
    border: 6px dashed rgba(0, 0, 0, .2) !important;
}

.dashSetPointDark {
    border: 6px dashed rgba(255, 255, 255, .2) !important;
}


.dashPointAlarm {
    background-color: red;
    color: white;
    box-shadow: 0px 0px 32px 0px red;
    border-color: red;
    -webkit-animation: dashPointAlarm 2s ease-in-out infinite;
}

.dashPointUnableToUpdate {
    opacity: .5;
    color: black;
    background-color: transparent;
    border: dotted 4px black;
}

@-webkit-keyframes dashPointAlarm {
    0% {
        background-color: red;
        color: white;
        border-color: red;
        box-shadow: 0px 0px 32px 0px red;
    }

    65% {
        background-color: lightgoldenrodyellow;
        color: black;
        border-color: lightgoldenrodyellow;
        box-shadow: 0px 0px 8px 0px transparent;
    }

    95% {
        background-color: white;
        color: black;
        border-color: white;
        box-shadow: 0px 0px 8px 0px transparent;
    }

    100% {
        background-color: red;
        color: white;
        border-color: red;
        box-shadow: 0px 0px 32px 0px red;
    }
}



.alertBar {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 24px;
    background-color: rgba(255, 0, 0, .3);
    color: black;
    overflow: hidden;
}


.dashBoardAlarm {
    background-color: red;
    color: white;
    box-shadow: 0px 0px 32px 0px red;
    border-color: red;
    -webkit-animation: dashBoardAlarm 2s ease-in-out infinite;
}

@-webkit-keyframes dashBoardAlarm {
    0% {
        background-color: red;
        border-color: red;
        box-shadow: 0px 0px 32px 0px red;
    }

    65% {
        background-color: rebeccapurple;
        border-color: lightgoldenrodyellow;
        box-shadow: 0px 0px 8px 0px transparent;
    }

    95% {
        background-color: var(--primary);
        border-color: white;
        box-shadow: 0px 0px 8px 0px transparent;
    }

    100% {
        background-color: red;
        border-color: red;
        box-shadow: 0px 0px 32px 0px red;
    }
}



.dashPointAdd {
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    color: white;
    background-color: var(--primary);
    text-align: center;
    position: fixed;
    right: 24px;
    bottom: 24px;
    font-size: 20px;
    font-weight: 400;
    padding-left: 8px;
    padding-right: 8px;
    min-height: 56px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 64px;
    z-index: 1;
}

    .dashPointAdd:hover {
        font-size: 48px;
        font-weight: 700;
        background-color: lightgray;
        color: var(--primary);
        z-index: 1;
    }

    .dashPointAdd:active {
        background-color: darkgray;
        color: var(--primary);
    }

.pointHeader {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    width: 100%;
    height: 32px;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    box-sizing: border-box;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pointHeader img {
        float: right;
        height: 20px;
        cursor: pointer;
        padding-left: 4px;
        opacity: 0.25;
    }

.pointName {
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pointValue {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    height: fit-content;
    max-height: 80vh;
    font-size: 512px;
    line-height: 1.11em;
    display: flex;
    justify-content: center;
}

.graphCavnas {
    transform: translate(-50%, -41%);
    height: 100% !important;
}

.pointFooter {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pointAdd {
    position: relative;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 100;
    font-size: 50px !important;
    cursor: pointer;
}

.large {
    grid-column: span 2;
    grid-row: span 2;
}

.medium {
    grid-column: span 2;
}

.small {
}

.white {
    background-color: var(--white);
    border-color: #bfbfbf;
    color: #333333;
}

.red {
    background-color: var(--red);
    border-color: var(--red);
    color: white;
}

.orange {
    background-color: var(--orange);
    border-color: var(--orange);
    color: black;
}

.yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: black;
}

.green {
    background-color: var(--green);
    border-color: var(--green);
    color: white;
}

.blue {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.purple {
    background-color: var(--purple);
    border-color: var(--purple);
    color: white;
}

.alertChanger {
    display: inline-block;
    max-width: 90%;
    width: 450px;
    height: 240px;
    border: 3px solid var(--primary);
    border-radius: 8px;
    box-shadow: 3px 4px 3px 1px rgba(0, 0, 0, 0.2);
    background-color: white;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    text-align: center;
}

    .alertChanger [type=button] {
        width: 150px;
        height: 35.5px;
        font-size: 20px;
        border: 1px solid rgba(255,255,255,0.7);
        border-radius: 3px;
        outline: none;
        background-color: var(--primary);
        color: white;
        cursor: pointer;
        position: relative;
        top: 10px;
    }

    .alertChanger [type=number] {
        text-align: left;
        font-size: 20px;
    }

    .alertChanger select {
        height: 30px;
        font-size: 15px;
        text-align: center;
    }

.changerHeader {
    background-color: var(--primary);
    color: white;
    font-size: 20px;
    height: 30px;
    width: calc(100% + 2px);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    line-height: 25px;
    box-sizing: border-box;
    padding-left: 4px;
    margin-left: -1px;
    margin-top: -1px;
    margin-bottom: 10px;
    text-align: left;
}

    .changerHeader img {
        float: right;
        margin-right: 6px;
        margin-top: 4px;
        height: 20px;
        cursor: pointer;
    }

.alertChanger table {
    width: 80%;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

    .alertChanger table td:nth-child(1) {
        width: 40%;
        text-align: right;
        padding-right: 10px;
    }

    .alertChanger table td:nth-child(2) {
        text-align: left;
    }

.alertChanger select {
    width: 150px;
}

.splashScreen_dash {
    grid-column-start: 4;
    grid-column-end: 16;
    grid-row-start: 2;
    grid-row-end: 15;
    background-color: white;
    border-radius: var(--roundness);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.splashLogo_dash {
    padding-top: 32px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
}

.splashLogo_dash_activation {
    padding-top: 64px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 256px;
    max-height: 256px;
}

.logoSubText_dash {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-height: 90%;
    max-width: 90%;
    color: var(--primary);
    font-size: 30px;
    padding-bottom: 32px;
    font-weight: 500;
    user-select: none;
    cursor: default;
}

.dashboardActivate {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 90%;
    max-width: 90%;
    color: var(--primary);
    font-size: 20px;
    padding-bottom: 32px;
    font-weight: 500;
}

.dashboardCode {
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    max-height: 90%;
    max-width: 90%;
    color: var(--primary);
    font-size: 50px;
    font-weight: 600;
}

.dashboardQR {
    display: block;
    padding-left: calc(50% - 64px);
    padding-right: calc(50% - 64px);
    max-height: 100%;
    max-width: 100%;
    color: white;
    font-size: 30px;
}


.middleThing {
    flex-grow: 5;
    max-width: 1024px;
    height: 100%;
}

.sideThing {
    flex-shrink: 5;
}


/* || Pop Up Messages */
.messageContainer {
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 20px;
    border-collapse: collapse;
    z-index: 15;
}

.warningContainer {

}

    .warningContainer > .popupModal {
        background-color: rgba(0, 0, 0, .5);
        backdrop-filter: blur(32px);
        z-index: 20;
    }

    .warningContainer > .messageWindow {
        background-color: var(--warning-red);
        color: white;
        z-index: 21;
    }

        .warningContainer > .messageWindow > .popupHeader {
            color: white;
        }

        .warningContainer > .messageWindow > .popupButtonHolder > .popupButton {
            color: white;
            background-color: rgba(255, 255, 255, .2);
        }

.popupModal {
    background-color: rgba(255, 255, 255, .0);
    backdrop-filter: blur(4px);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
}

.formTitle {

}

.pointTypesWindow {
    display: inline-block;
    max-width: 480px;
    width: 360px;
    max-height: 560px;
    height: 560px;
    box-shadow: var(--shadow);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    border-radius: var(--roundness);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
}

.pointTypeHolder {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    overflow-y: scroll;
    margin: 8px;
    border-radius: var(--roundness);
}

    .pointTypeHolder::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .pointTypeHolder::-webkit-scrollbar-thumb {
        background: var(--monochrome-3);
        border-radius: 4px;
    }

        .pointTypeHolder::-webkit-scrollbar-thumb:hover {
            background: var(--primary-variant-3);
        }

.formWindow {
    display: grid;
    grid-template-rows: 64px calc(100% - 128px) 64px;
    width: 300px;
    height: auto;
    box-shadow: var(--shadow);
    position: fixed;
    z-index: 11;
    border-radius: var(--roundness);
    background-color: rgba(225, 225, 225, .8);
    backdrop-filter: blur(16px);
}

.messageWindow {
    display: grid;
    grid-template-rows: 64px calc(100% - 128px) 64px;
    width: 360px;
    height: auto;
    box-shadow: var(--shadow);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    border-radius: var(--roundness);
    background-color: rgba(225, 225, 225, .8);
    backdrop-filter: blur(16px);
}

.popupHeader {
    color: var(--monochrome-0);
    font-size: 36px;
    font-weight: 500;
    height: 64px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0px;
    padding-top: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popupSubHeader {
    color: black;
    font-size: 12px;
    font-weight: 400;
    height: 12px;
    margin-bottom: 4px;
    margin-left: 16px;
    margin-right: 16px;
    text-align: left;
}

.popupContent {
    font-size: 16px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0px;
    font-size: 20px;
}

.popupMore {
    font-size: 10px;
    margin-left: 16px;
    margin-right: 20px;
    padding-left: 0px;
    padding-bottom: 16px;
}

.popupButton {
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    color: var(--monochrome-0);
    background-color: rgba(255, 255, 255, .8);
    text-align: center;
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    border-radius: var(--roundness2);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    border: none;
    flex-grow: 2;
    font-weight: 500;
    cursor: pointer;
    height: 48px;
    user-select: none;
}

    .popupButton:hover {
        background-color: white;
        color: var(--primary);
    }

    .popupButton:active {
        background-color: var(--primary);
        color: var(--on-primary);
    }

.popupButtonHolder {
    display: flex;
    justify-content: space-evenly;
    gap: 8px;
    padding: 8px;
}

.dropdownMini {
    -webkit-transition: all .05s;
    transition: all .05s;
    appearance: none;
    border: 0px solid;
    border-radius: var(--roundness2);
    color: var(--monochrome-0);
    width: 100%;
    height: 36px;
    padding-left: 8px;
    font-weight: 500;
    font-size: 20px;
    background-color: rgba(255, 255, 255, .8);
}

    .dropdownMini:hover {
        background-color: white;
        color: var(--primary);
    }

    .dropdownMini:focus-visible {
        color: black;
    }

.popupSpecialContent {
    display: grid;
    grid-gap: 8px;
    grid-template-rows: fit-content() 32px;
    font-size: 16px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 0px;
}

.sizePicker {
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    display: grid;
    grid-gap: 4px;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(4, minmax(16px, 1fr));
    grid-template-rows: repeat(2, minmax(48px, 1fr));
}

.sizePickerButton {
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .5);
    border: solid 4px white;
    cursor: pointer;
}

    .sizePickerButton:hover {
        background-color: rgba(255, 255, 255, 1);
    }

.spCustom {
    background-color: transparent;
    border: none;
    grid-column: span 1;
    grid-row: span 1;
    max-width: 100%;
    max-height: 100%;
}

    .spCustom:hover {
        background-color: rgba(255, 255, 255, .25);
    }

.spSmall {
    grid-column: span 1;
    grid-row: span 1;
}

.spMedium {
    grid-column: span 2;
    grid-row: span 1;
}

.spLarge {
    grid-column: span 2;
    grid-row: span 2;
}

.spSelected {
    background-color: white;
}


.colorPicker {
    display: flex;
    justify-content: space-between;
    height: min-content;
    width: 100%;
}

.colorPickerColor {
    -webkit-transition: all .05s ease-in;
    transition: all .05s ease-in;
    height: 28px;
    width: 28px;
    border-radius: 16px;
    opacity: .8;
    cursor: pointer;
}

.colorPickerColor:hover {
    opacity: 1;
}

.cpSelected {
    opacity: 1;
    outline: 3px solid white;
}

.inputSpecial {
    -webkit-transition: all .05s !important;
    transition: all .05s !important;
    appearance: none !important;
    border: 0px solid !important;
    border-radius: var(--roundness2) !important;
    color: var(--monochrome-0) !important;
    width: calc(100% - 8px) !important;
    height: 36px !important;
    padding-left: 8px !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    background-color: rgba(255, 255, 255, .8) !important;
}

    .inputSpecial:hover {
        background-color: white !important;
        color: var(--primary) !important;
    }

    .inputSpecial:focus-visible {
        color: black !important;
    }

    .inputSpecial::placeholder {
        color: var(--monochrome-0);
    }

.setpointSelect {
    -webkit-transition: all .05s !important;
    transition: all .05s !important;
    appearance: none !important;
    border: 0px solid !important;
    border-radius: var(--roundness2) !important;
    color: var(--monochrome-0) !important;
    width: calc(100% - 16px) !important;
    height: 48px !important;
    padding-left: 8px !important;
    margin-left: 8px;
    font-weight: 500 !important;
    font-size: 36px !important;
    background-color: rgba(255, 255, 255, .8) !important;
}

    .setpointSelect:hover {
        background-color: white !important;
        color: var(--primary) !important;
    }

    .setpointSelect:focus-visible {
        color: black !important;
    }

    .setpointSelect::placeholder {
        color: var(--monochrome-0);
    }


.customSizeConsole {
    margin: 8px;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
        ". . . . upButton upButton upButton upButton . . . ."
        "leftButton screen screen screen screen screen screen screen screen screen screen rightButton"
        "leftButton screen screen screen screen screen screen screen screen screen screen rightButton"
        "leftButton screen screen screen screen screen screen screen screen screen screen rightButton"
        ". . . . downButton downButton downButton downButton . . . .";
}

.customSizeScreen {
    display: grid;
    grid-area: screen;
    transition: 300ms;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(3, 1fr);
    overflow: hidden;
    white-space: nowrap;
}

.customSizeButton {
    transition: all .05s ease-in;
    color: var(--monochrome-0);
    background-color: rgba(255, 255, 255, .8);
    text-align: center;
    display: inline-block;
    font-size: 32px;
    border-radius: var(--roundness2);
    border: none;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .customSizeButton:hover {
        background-color: white;
        color: var(--primary);
    }

    .customSizeButton:active {
        background-color: var(--primary);
        color: var(--on-primary);
    }

.customSizeScreenBackgroundSquare {
    background-color: rgba(255,255,255,.35);
    border-radius: var(--roundness2);
    margin: 4px;
}

.customSizeReferenceTile {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .5);
    border: solid 4px white;
    border-radius: var(--roundness2);
    color: black;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    user-select: none;
}




/* BACKGROUND */
.background {
    display: grid;
    grid-template-columns: repeat(18, minmax(48px, 1fr));
    grid-template-rows: repeat(36, minmax(48px, 1fr));
    grid-gap: 4px;
    padding: 4px;
    background: white;
    width: calc(100vw - 8px);
    height: 100%;
    overflow: hidden;
    z-index: 99;
}

.bgElement {
    -webkit-animation: bgElement 15s ease-in-out infinite;
    border-radius: 32px;
    opacity: 0;
    transform: scale(.95);
    z-index: 99;
}

@-webkit-keyframes bgElement {
    0% {
        opacity: 0;
        transform: scale(.75);
        border-radius: 32px;
    }

    10% {
        opacity: 1;
        transform: scale(1);
        border-radius: var(--roundness);
    }

    15% {
        opacity: 0;
        transform: scale(.95);
        border-radius: var(--roundness);
    }

    100% {
        opacity: 0;
        transform: scale(.95);
        border-radius: 32px;
    }
}

.loadingContainer {
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 20px;
    border-collapse: collapse;
    z-index: 11;
} 

@-webkit-keyframes DBloadingWindow {
    50% {
        transform: translate(-50%, -50%) scale(.8);
        border-radius: 48px;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        border-radius: 32px;
    }
}

.DBloadingWindow {
    -webkit-animation: DBloadingWindow 3s alternate infinite ease-in-out;
    display: inline-block;
    width: 200px;
    height: 200px;
    box-shadow: var(--shadow);
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(16px);
    position: absolute;
    left: calc(50% - 64px);
    top: calc(50% - 64px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    text-align: left;
    padding-bottom: 10px;
    border-radius: 32px;
}

@-webkit-keyframes bigSpinnerDash {
    50% {
        filter: blur(4px);
        opacity: 20%;
    }

    100% {
        -webkit-transform: rotate(1280deg);
        filter: blur(0px);
    }
}

.bigSpinnerDash {
    display: inline-block;
    animation: bigSpinnerDash 1.5s alternate infinite ease-in-out;
    height: 128px;
    opacity: 30%;
    position: absolute;
    left: calc(50% - 64px);
    top: calc(50% - 64px);
}

.inputBox {
    -webkit-transition: all .05s;
    transition: all .05s;
    appearance: none;
    max-height: 28px;
    border: 1px solid rgb(0,0,0,.05);
    border-radius: 4px;
    color: var(--monochrome-0);
    font-weight: 600;
    padding-left: 4px;
    border-bottom: solid 1px var(--primary-variant-4);
}

    .inputBox:hover {
        border-bottom: solid 1px var(--primary);
        color: black;
    }

    .inputBox:focus-visible {
        color: black;
    }

.inputContainer {
    display: grid !important;
    grid-template-columns: 84px calc(100% - 84px);
    grid-row-gap: 4px;
    margin-left: 8px;
    margin-right: 8px;
    font-weight: 500 !important;
    font-size: 20px !important;
}

.inputFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    margin-right: 8px;
    font-weight: 500;
    font-size: 20px;
}

#setPointValueInput {
    height: 48px !important;
    font-size: 36px !important;
    text-align: center;
}

.paintButton {
    border-radius: 32px;
    width: 64px;
    height: 64px;
    left: calc(50% + 226px);
    top: calc(20% - 32px);
    transform: translate(-50%, -50%);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.5);
}

.paintButtonImg {
    filter: invert();
    opacity: .5;
    padding: 8px;
}