/**********************************************************************************/
/* (c) IP Management GmbH 2021-2024
/* SHOUT CSS V 5
/**********************************************************************************/

/**********************************************************************************/
/* Body                                                                           */
/**********************************************************************************/
html {

    scroll-behavior: smooth!important;

}

::-webkit-scrollbar {

    display: none!important;

}


body {

    min-height: 100%!important;
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;

}

@media (max-width: 767px) {



}
@media (min-width: 768px) and (max-width: 1023px) {



}
@media (min-width: 1024px) and (max-width: 1399px) {



}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    body {

        background-image: url("./img/background/bglight1.png");


    }

}
@media (prefers-color-scheme: dark) {

    body {

        background-image: url("./img/background/bgdark1.png");

    }

}

iframe {

    border: none!important;

}

/**********************************************************************************/
/* Display handling                                                               */
/**********************************************************************************/

/* 1. Display Error appearance */

.displayError {}


@media (max-width: 767px) {

    .displayError {}

}
@media (min-width: 768px) and (max-width: 1023px) {

    .displayError {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .displayError {}

}
@media (min-width: 1400px) {

    .displayError {}

}
@media (prefers-color-scheme: light) {

    .displayError {}

}
@media (prefers-color-scheme: dark) {

    .displayError {}

}

/* 2. Cases, the display error will be shown */

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {

    html {

        display: none;

    }

    .displayError {

        display: inline-block!important;

    }

}

@media (max-height: 400px)  {

    html {

        display: none;

    }

    .displayError {

        display: inline-block!important;

    }

}


input {

    -webkit-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    user-select: auto!important;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;

}

/**********************************************************************************/
/* Declare Classes                                                                */
/**********************************************************************************/

/************************************************/
/* APP Background                               */
/************************************************/

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .background {

        /*background-color: var(--colorShoutWhite)!important;*/

    }
}
@media (prefers-color-scheme: dark) {

    .background {

        /*background-color: var(--colorShoutDark)!important;*/

    }
}

/************************************************/
/* Login Screen                                 */
/************************************************/

@media (prefers-color-scheme: light) {

    .whyHandWhite {

        opacity: 0!important;

    }

    .whyHandDark {

        opacity: 1!important;

    }
}

@media (prefers-color-scheme: dark) {

    .whyHandWhite {

        opacity: 1!important;

    }

    .whyHandDark {

        opacity: 0!important;

    }

}

/**********************************************************************************/
/* Logo WHY                                                                       */
/**********************************************************************************/

.logoWhy {

    font-family: var(--font), serif !important;
    font-weight: 300!important;
    text-align: center!important;
    letter-spacing: 0.05em!important;

}

@media (max-width: 767px) {

    .logoWhy {

        font-size: var(--font9)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .logoWhy {

        font-size: var(--font9)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .logoWhy {

        font-size: var(--font9)!important;

    }

}
@media (min-width: 1400px) {

    .logoWhy {

        font-size: var(--font9)!important;

    }

}
@media (prefers-color-scheme: light) {

    .logoWhy {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .logoWhy {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* Logo Suffix                                                                    */
/**********************************************************************************/

.logoSuffix {

    font-family: var(--font), serif !important;
    font-weight: 600!important;
    text-align: center!important;
    letter-spacing: -0.03em!important;

}

@media (max-width: 767px) {

    .logoSuffix {

        font-size: var(--font7)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .logoSuffix {

        font-size: var(--font9)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .logoSuffix {

        font-size: var(--font9)!important;

    }

}
@media (min-width: 1400px) {

    .logoSuffix {

        font-size: var(--font9)!important;

    }

}
@media (prefers-color-scheme: light) {

    .logoSuffix {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .logoSuffix {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* Icon 920 Logo                                                                  */
/**********************************************************************************/

.i920Logo {

    background-size: cover!important;
    background-repeat: no-repeat!important;
    position: absolute!important;
    margin-top: -7px!important;
    margin-left: -40px!important;

}

@media (max-width: 767px) {

    .i920Logo {

        height: 120px!important;
        width: 120px!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .i920Logo {

        height: 120px!important;
        width: 120px!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .i920Logo {

        height: 100px!important;
        width: 100px!important;

    }

}
@media (min-width: 1400px) {

    .i920Logo {

        height: 100px!important;
        width: 100px!important;

    }

}
@media (prefers-color-scheme: light) {

    .i920Logo {

        background-image: url("./img/icons/i001b.png") !important;

    }
}
@media (prefers-color-scheme: dark) {

    .i920Logo {

        background-image: url("./img/icons/i001w.png") !important;

    }
}

/**********************************************************************************/
/* Icon 923 Instagram                                                             */
/**********************************************************************************/

.i923 {

    background-size: cover!important;
    background-repeat: no-repeat!important;
    position: absolute!important;
    margin-top: -7px!important;
    margin-left: -40px!important;

}

@media (max-width: 767px) {

    .i923 {

        height: 120px!important;
        width: 120px!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .i923 {

        height: 120px!important;
        width: 120px!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .i923 {

        height: 100px!important;
        width: 100px!important;

    }

}
@media (min-width: 1400px) {

    .i923 {

        height: 100px!important;
        width: 100px!important;

    }

}
@media (prefers-color-scheme: light) {

    .i923 {

        background-image: url("./img/icons/i923b.png") !important;

    }
}
@media (prefers-color-scheme: dark) {

    .i923 {

        background-image: url("./img/icons/i923w.png") !important;

    }
}

/************************************************/
/* Button Persist Primary                       */
/************************************************/

.buttonPersistPrimary {

    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: var(--buttonRadius)!important;
    text-align: center!important;
    cursor: pointer!important;
    transition: transform 200ms !important;
    background-color: var(--colorShoutPink)!important;
    border: 1px solid var(--colorShoutPink)!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;



}

.buttonPersistPrimary:hover {

    transform: scale(1.02, 1.02);

}

.buttonPersistPrimary:active {

    transform: scale(0.98, 0.98);

}


.buttonLabelPersistPrimary {

    color: var(--colorShoutWhite) !important;
    font-weight: 700!important;
    font-family: var(--font), serif !important;
    line-height: var(--lineHeight43pxButtonLabel)!important;

}

@media (max-width: 767px) {

    .buttonLabelPersistPrimary {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .buttonLabelPersistPrimary {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .buttonLabelPersistPrimary {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1400px) {

    .buttonLabelPersistPrimary {

        font-size: var(--font4)!important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/************************************************/
/* Button Persist Secondary                     */
/************************************************/
.buttonPersistSecondary {

    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: var(--buttonRadius)!important;
    text-align: center!important;
    cursor: pointer!important;
    transition: transform 0.2s!important;
    background-color: transparent!important;
    border: 1px solid var(--colorShoutPink)!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-transform: uppercase!important;

}

.buttonPersistSecondary:hover {

    transform: scale(1.02, 1.02);
    transition: transform 0.2s!important;

}

.buttonPersistSecondary:active {

    transform: scale(0.98, 0.98);
    transition: transform 0.2s!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


.buttonLabelPersistSecondary {

    color: var(--colorShoutPink) !important;
    font-weight: 700!important;
    font-family: var(--font), serif !important;
    line-height: var(--lineHeight43pxButtonLabel)!important;

}

@media (max-width: 767px) {

    .buttonLabelPersistSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .buttonLabelPersistSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .buttonLabelPersistSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1400px) {

    .buttonLabelPersistSecondary {

        font-size: var(--font3)!important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


/************************************************/
/* Button Navigate Primary                      */
/************************************************/

.buttonNavigatePrimary {

    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: var(--buttonRadius)!important;
    text-align: center!important;
    cursor: pointer!important;
    transition: transform 0.2s!important;
    background-color: var(--colorShoutPetrol)!important;
    border: 1px solid var(--colorShoutPetrol)!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-transform: uppercase!important;

}

.buttonNavigatePrimary:hover {

    transform: scale(1.02, 1.02);
    transition: transform 0.2s!important;

}

.buttonNavigatePrimary:active {

    transform: scale(0.98, 0.98);
    transition: transform 0.2s!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


.buttonLabelNavigatePrimary {

    color: var(--colorShoutWhite) !important;
    font-weight: 700!important;
    font-family: var(--font), serif !important;
    line-height: var(--lineHeight43pxButtonLabel)!important;

}

@media (max-width: 767px) {

    .buttonLabelNavigatePrimary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .buttonLabelNavigatePrimary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .buttonLabelNavigatePrimary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1400px) {

    .buttonLabelNavigatePrimary {

        font-size: var(--font3)!important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/************************************************/
/* Button Navigate Secondary                    */
/************************************************/
.buttonNavigateSecondary {

    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: var(--buttonRadius)!important;
    text-align: center!important;
    cursor: pointer!important;
    transition: transform 0.2s!important;
    background-color: transparent!important;
    border: 1px solid var(--colorShoutPetrol)!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-transform: uppercase!important;

}

.buttonNavigateSecondary:hover {

    transform: scale(1.02, 1.02);
    transition: transform 0.2s!important;

}

.buttonNavigateSecondary:active {

    transform: scale(0.98, 0.98);
    transition: transform 0.2s!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


.buttonLabelNavigateSecondary {

    color: var(--colorShoutPetrol) !important;
    font-weight: 700!important;
    font-family: var(--font), serif !important;
    line-height: var(--lineHeight43pxButtonLabel)!important;

}

@media (max-width: 767px) {

    .buttonLabelNavigateSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .buttonLabelNavigateSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .buttonLabelNavigateSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1400px) {

    .buttonLabelNavigateSecondary {

        font-size: var(--font3)!important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


/************************************************/
/* Button Confirm Primary                       */
/************************************************/

.buttonConfirmPrimary {

    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: var(--buttonRadius)!important;
    text-align: center!important;
    cursor: pointer!important;
    transition: transform 0.2s!important;
    background-color: var(--colorShoutPurple)!important;
    border: 1px solid var(--colorShoutPurple)!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;

}

.buttonConfirmPrimary:hover {

    transform: scale(1.02, 1.02);
    transition: transform 0.2s!important;

}

.buttonConfirmPrimary:active {

    transform: scale(0.98, 0.98);
    transition: transform 0.2s!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


.buttonLabelConfirmPrimary {

    color: var(--colorShoutWhite) !important;
    font-weight: 700!important;
    font-family: var(--font), serif !important;
    line-height: var(--lineHeight43pxButtonLabel)!important;

}

@media (max-width: 767px) {

    .buttonLabelConfirmPrimary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .buttonLabelConfirmPrimary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .buttonLabelConfirmPrimary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1400px) {

    .buttonLabelConfirmPrimary {

        font-size: var(--font4)!important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/************************************************/
/* Button Navigate Secondary                    */
/************************************************/
.buttonConfirmSecondary {

    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: var(--buttonRadius)!important;
    text-align: center!important;
    cursor: pointer!important;
    transition: transform 0.2s!important;
    background-color: transparent!important;
    border: 1px solid var(--colorShoutPurple)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-transform: uppercase!important;

}

.buttonConfirmSecondary:hover {

    transform: scale(1.02, 1.02);
    transition: transform 0.2s!important;

}

.buttonConfirmSecondary:active {

    transform: scale(0.98, 0.98);
    transition: transform 0.2s!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}


.buttonLabelConfirmSecondary {

    font-weight: 700!important;
    font-family: var(--font), serif !important;
    line-height: var(--lineHeight43pxButtonLabel)!important;

}

@media (max-width: 767px) {

    .buttonLabelConfirmSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .buttonLabelConfirmSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .buttonLabelConfirmSecondary {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1400px) {

    .buttonLabelConfirmSecondary {

        font-size: var(--font3)!important;

    }

}
@media (prefers-color-scheme: light) {

    .buttonLabelConfirmSecondary {

        color: var(--colorShoutPurple) !important;

    }
}
@media (prefers-color-scheme: dark) {

    .buttonLabelConfirmSecondary {

        color: var(--colorShoutWhite) !important;

    }
}

/************************************************/
/* Input Field                                  */
/************************************************/

.inputField {

    -webkit-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    user-select: auto!important;
    -webkit-appearance: none!important;
    opacity: 1!important;
    outline: 0!important;
    width: calc(100% - 40px)!important;
    margin-top: 4px!important;
    border-radius:var(--buttonRadius)!important;
    padding: 20px!important;
    font-family: var(--font), serif !important;

}


@media (max-width: 767px) {

    .inputField {

        font-size: var(--font4)!important;
        font-weight: 500 !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .inputField {

        font-size: var(--font4)!important;
        font-weight: 500 !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .inputField {

        font-size: var(--font4)!important;
        font-weight: 500 !important;

    }

}
@media (min-width: 1400px) {

    .inputField {

        font-size: var(--font4)!important;
        font-weight: 500 !important;

    }

}
@media (prefers-color-scheme: light) {

    .inputField {

        border: 1px solid var(--colorShoutWhite)!important;
        color: var(--colorShoutGrey)!important;
        background-color: var(--colorShoutWhite)!important;

    }

    .inputField:focus {

        border: 1px solid var(--colorShoutPink)!important;

    }

    .inputField:focus-within {

        border: 1px solid var(--colorShoutPink)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .inputField {

        border: 1px solid var(--colorShoutAnchor)!important;
        color: var(--colorShoutLightGrey)!important;
        background-color: var(--colorShoutGrey)!important;

    }

    .inputField:focus {

        border: 1px solid var(--colorShoutPink)!important;

    }

    .inputField:focus-within {

        border: 1px solid var(--colorShoutPink)!important;

    }
}

/************************************************/
/* TextFieldLabel                               */
/************************************************/

.textFieldLabel {

    font-family: var(--font), serif !important;
    font-weight: 600!important;

}

@media (max-width: 767px) {

    .textFieldLabel {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .textFieldLabel {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .textFieldLabel {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1400px) {

    .textFieldLabel {

        font-size: var(--font4)!important;

    }

}
@media (prefers-color-scheme: light) {

    .textFieldLabel {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .textFieldLabel {

        color: var(--colorShoutLightGrey)!important;

    }

}

/**********************************************************************************/
/* textfield                                                                      */
/**********************************************************************************/

.textfield {


     -webkit-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    user-select: auto!important;
    -webkit-appearance: none;


    opacity: 1!important;
    outline: 0!important;
    width: calc(100% - 40px)!important;
    margin-top: 4px!important;
    border-radius: var(--buttonRadius)!important;
    background: none!important;
    padding: 20px!important;
    font-family: var(--font), serif !important;
    font-weight: 700!important;
    resize: none!important;

}

.textfield:focus {

    border: 1px solid var(--colorShoutPink)!important;
}

.textfield:focus-within {

    border: 1px solid var(--colorShoutPink)!important;
}

@media (max-width: 767px) {

    .textfield {

        font-size: var(--font4)!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .textfield {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .textfield {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1400px) {

    .textfield {

        font-size: var(--font5)!important;

    }

}
@media (prefers-color-scheme: light) {

    .textfield {

        color: var(--colorShoutDark)!important;
        background: var(--bgLight)!important;
        border: 1px solid var(--bgLight)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .textfield {

        color: var(--colorShoutWhite)!important;
        background: var(--bgDark)!important;
        border: 1px solid var(--bgDark)!important;

    }

}

/**********************************************************************************/
/* Radio Elements                                                                 */
/**********************************************************************************/

.radiolabel {

    display: block!important;
    position: relative!important;
    margin-bottom: 15px!important;
    cursor: pointer!important;
    -webkit-user-select: none!important;
    -moz-user-select: none!important;
    -ms-user-select: none!important;
    user-select: none!important;
    padding: 15px 10px 15px 50px !important;
    width: calc(100% - 65px)!important;
    border-radius: var(--buttonRadius)!important;
    transition: all 0.2s!important;
    font-family: var(--font), serif !important;
    letter-spacing: 0 !important;
    font-weight: 700!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {

    .radiolabel {

        font-size: var(--font3)!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .radiolabel {

        font-size: var(--font3)!important;

    }
}
@media (min-width: 1024px) and (max-width: 1399px) {

    .radiolabel {

        font-size: var(--font4)!important;

    }
}
@media (min-width: 1400px) {

    .radiolabel {

        font-size: var(--font4)!important;

    }
}
@media (prefers-color-scheme: light) {

    .radiolabel {

        color: var(--colorShoutDark)!important;
        background: var(--bgLight)!important;
        border: 1px solid transparent!important;

    }

    .radiomark {

        position: absolute!important;
        left: 0!important;
        margin-left: 10px!important;
        height: 26px!important;
        width: 26px!important;
        top: 50%!important;
        transform: translate(0, -50%)!important;
        -webkit-appearance: none!important;
        background: var(--colorShoutWhite) !important;
        outline: none!important;
        border-radius: 30px!important;
        /*box-shadow: 0 0 0 1px var(--colorShoutWhite), 0 0 0 1px var(--colorShoutLightGrey), inset 0 0 3px var(--colorShoutDark)!important;*/

    }

    .radiolabel input:checked ~ .radiomark {

        background: var(--colorShoutPink)!important;

    }

    .radiomark:before {

        content: ''!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 26px!important;
        height: 26px!important;
        background: var(--colorShoutDark)!important;
        border-radius: 30px!important;
        transform: scale(.80, .80)!important;
        transition: all 0.2s!important;

    }

    .radiomark:after {

        content: ''!important;
        position: absolute!important;
        top: calc(50% - 5px)!important;
        left: calc(50% - 5px)!important;
        width: 10px!important;
        height: 10px!important;
        background: var(--colorShoutWhite)!important;
        border-radius: 50%!important;
        transition: all 0.2s!important;

    }

    .radiolabel:hover, .radiolabel:active {

        border: 1px solid var(--colorShoutPink)!important;

    }

    .radiolabel input:checked ~ .radiomark:after {

        background: var(--colorShoutPink)!important;

    }


}
@media (prefers-color-scheme: dark) {

    .radiolabel {

        color: var(--colorShoutLightGrey)!important;
        background: var(--bgDark)!important;
        border: 1px solid transparent!important;

    }

    .radiomark {

        position: absolute!important;
        left: 0!important;
        margin-left: 10px!important;
        height: 26px!important;
        width: 26px!important;
        top: 50%!important;
        transform: translate(0, -50%)!important;
        -webkit-appearance: none!important;
        background: var(--colorShoutDark) !important;
        outline: none!important;
        border-radius: 30px!important;
        /*box-shadow: 0 0 0 1px var(--colorShoutWhite), 0 0 0 1px var(--colorShoutLightGrey), inset 0 0 3px var(--colorShoutDark)!important;*/

    }

    .radiolabel input:checked ~ .radiomark {

        background: var(--colorShoutPink)!important;

    }

    .radiomark:before {

        content: ''!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 26px!important;
        height: 26px!important;
        background: var(--colorShoutWhite)!important;
        border-radius: 30px!important;
        transform: scale(.80, .80)!important;
        transition: all 0.2s!important;

    }

    .radiomark:after {

        content: ''!important;
        position: absolute!important;
        top: calc(50% - 5px)!important;
        left: calc(50% - 5px)!important;
        width: 10px!important;
        height: 10px!important;
        background: var(--colorShoutDark)!important;
        border-radius: 50%!important;
        transition: all 0.2s!important;

    }

    .radiolabel:hover, .radiolabel:active {

        border: 1px solid var(--colorShoutPink)!important;

    }

    .radiolabel input:checked ~ .radiomark:after {

        background: var(--colorShoutPink)!important;

    }

}

/**********************************************************************************/
/* Checkbox Elements                                                              */
/**********************************************************************************/

.checklabel {

    display: block!important;
    position: relative!important;
    margin-bottom: 15px!important;
    cursor: pointer!important;
    -webkit-user-select: none!important;
    -moz-user-select: none!important;
    -ms-user-select: none!important;
    user-select: none!important;
    padding: 15px 10px 15px 65px !important;
    width: calc(100% - 80px)!important;
    border-radius: var(--buttonRadius)!important;
    transition: all 0.2s!important;
    font-family: var(--font), serif !important;
    letter-spacing: 0 !important;
    font-weight: 700!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {

    .checklabel {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .checklabel {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .checklabel {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1400px) {

    .checklabel {

        font-size: var(--font4)!important;

    }

}

@media (prefers-color-scheme: light) {

    .checklabel {

        color: var(--colorShoutDark)!important;
        background: var(--bgLight)!important;
        border: 1px solid transparent!important;

    }

    .checkmark {

        position: absolute!important;
        left: 0!important;
        margin-left: 10px!important;
        height: 26px!important;
        width: 40px!important;
        top: 50%!important;
        transform: translate(0, -50%)!important;
        -webkit-appearance: none!important;
        background: var(--colorShoutDark) !important;
        outline: none!important;
        border-radius: 20px!important;

    }

    .checkmark:before {

        content: ''!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 26px!important;
        height: 26px!important;
        background: var(--colorShoutWhite) !important;
        border-radius: 20px!important;
        transform: scale(.96, .96)!important;
        transition: all 0.2s!important;
        box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

    }

    .checklabel input:checked ~ .checkmark:before {

        left: 14px!important;

    }

    .checklabel input:checked ~ .checkmark {

        background: var(--colorShoutPink)!important;

    }

   .checkmark:after {

        content: ''!important;
        position: absolute!important;
        top: calc(50% - 2px)!important;
        left: 13px!important;
        width: 0 !important;
        height: 0 !important;
        background: var(--colorShoutDark)!important;
        border-radius: 50%!important;
        transition: all 0.2s!important;

    }

    .checklabel input:checked ~ .checkmark:after {

        left: 30px!important;
        background: var(--colorShoutPink)!important;

    }

    .checklabel:hover, .checklabel:active {

        border: 1px solid var(--colorShoutPink)!important;

    }

}

@media (prefers-color-scheme: dark) {

    .checklabel {

        color: var(--colorShoutLightGrey)!important;
        background: var(--bgDark)!important;
        border: 1px solid transparent!important;

    }

    .checkmark {

        position: absolute!important;
        left: 0!important;
        margin-left: 10px!important;
        height: 26px!important;
        width: 40px!important;
        top: 50%!important;
        transform: translate(0, -50%)!important;
        -webkit-appearance: none!important;
        background: var(--colorShoutWhite) !important;
        outline: none!important;
        border-radius: 20px!important;

    }

    .checkmark:before {

        content: ''!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 26px!important;
        height: 26px!important;
        background: var(--colorShoutDark) !important;
        border-radius: 20px!important;
        transform: scale(.96, .96)!important;
        transition: all 0.2s!important;
        box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

    }

    .checklabel input:checked ~ .checkmark:before {

        left: 14px!important;

    }

    .checklabel input:checked ~ .checkmark {

        background: var(--colorShoutPink)!important;

    }

    .checkmark:after {

        content: ''!important;
        position: absolute!important;
        top: calc(50% - 2px)!important;
        left: 13px!important;
        width: 0 !important;
        height: 0 !important;
        background: var(--colorShoutDark)!important;
        border-radius: 50%!important;
        transition: all 0.2s!important;
    }

    .checklabel input:checked ~ .checkmark:after {

        left: 30px!important;
        background: var(--colorShoutPink)!important;

    }

    .checklabel:hover, .checklabel:active {

        border: 1px solid var(--colorShoutPink)!important;

    }

}

/**********************************************************************************/
/* Sensor Label                                                                   */
/**********************************************************************************/

.sensorLabel {

    font-family: var(--font), serif !important;
    letter-spacing: 0.04em!important;
    text-transform: uppercase!important;
    font-weight: 700!important;

}

@media (max-width: 767px) {

    .sensorLabel {

        font-size: var(--font3)!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensorLabel {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensorLabel {

        font-size: var(--font5)!important;

    }

}
@media (min-width: 1400px) {

    .sensorLabel {

        font-size: var(--font5)!important;

    }

}
@media (prefers-color-scheme: light) {

    .sensorLabel {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensorLabel {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* Sensor Name                                                                    */
/**********************************************************************************/

.sensorName {

    font-family: var(--font), serif !important;
    transition: visibility 0ms!important;

}

@media (max-width: 767px) {

    .sensorName {

        font-size: var(--font5)!important;
        font-weight: 700;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensorName {

        font-size: var(--font5)!important;
        font-weight: 700;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensorName {

        font-size: var(--font5)!important;
        font-weight: 700;

    }

}
@media (min-width: 1400px) {

    .sensorName {

        font-size: var(--font5)!important;
        font-weight: 700;

    }

}
@media (prefers-color-scheme: light) {

    .sensorName {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensorName {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* Sensor Notification                                                            */
/**********************************************************************************/

.sensorNotification {

    font-family: var(--font), serif !important;
    letter-spacing: 0.04em!important;
    font-weight: 400!important;
    line-height: 1.3em!important;
    margin-top: 25px!important;
    margin-bottom: 25px!important;
    text-align: left!important;

}

@media (max-width: 767px) {

    .sensorNotification {

        font-size: var(--font3)!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensorNotification {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensorNotification {

        font-size: var(--font5)!important;
        padding-left: 20px!important;
        border-left: 4pt solid var(--colorShoutPink) !important;

    }

}
@media (min-width: 1400px) {

    .sensorNotification {

        font-size: var(--font5)!important;
        padding-left: 20px!important;
        border-left: 4pt solid var(--colorShoutPink) !important;

    }

}
@media (prefers-color-scheme: light) {

    .sensorNotification {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensorNotification {

        color: var(--colorShoutWhite)!important;


    }

}


/**********************************************************************************/
/* Screen Desktop                                                                 */
/**********************************************************************************/

.screenDesktop {

    /* Attention: minimum padding 10px set in HYPE */
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .screenDesktop {

        /*border: 0.5pt solid var(--colorShoutWhite)!important;*/
        border-radius: var(--buttonRadius)!important;
        background-color: var(--colorShoutBgLight)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .screenDesktop {

       /* border: 0.5pt solid var(--colorShoutDark)!important;*/
        border-radius: var(--buttonRadius)!important;
        background-color: var(--colorShoutBgDark)!important;

    }

}

/**********************************************************************************/
/* Screen Main Desktop                                                            */
/**********************************************************************************/

.screenMainDesktop {

    /* Attention: minimum padding 10px set in HYPE */
    /*box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;*/

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .screenMainDesktop {

        border-radius: var(--buttonRadius)!important;
        /*background-color: var(--colorShoutBgLight)!important;*/

    }
}
@media (prefers-color-scheme: dark) {

    .screenMainDesktop {

        border-radius: var(--buttonRadius)!important;
    /*background-color: var(--colorShoutBgDark)!important;*/

    }
}

/**********************************************************************************/
/* Screen Mobile                                                                  */
/**********************************************************************************/

.screenMobile {

    /* Attention: minimum padding 10px set in HYPE */
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {

    .screenMobile {

        border-radius: 0!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .screenMobile {

        border-radius: var(--buttonRadius)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .screenMobile {

        border-radius: var(--buttonRadius)!important;

    }

}
@media (min-width: 1400px) {

    .screenMobile {

        border-radius: var(--buttonRadius)!important;

    }

}
@media (prefers-color-scheme: light) {

    .screenMobile {

       /* border: 0.5pt solid var(--colorShoutWhite)!important;*/
        background-color: var(--colorShoutBgLight)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .screenMobile {

       /* border: 0.5pt solid var(--colorShoutDark)!important;*/
        background-color: var(--colorShoutBgDark)!important;

    }

}

/**********************************************************************************/
/* Expressionfield                                                                */
/**********************************************************************************/

.expressionfield {

    margin-bottom: 15px!important;
    display: flex!important;
    align-items: flex-end!important;
    justify-content: center!important;
    -webkit-justify-content: center!important;
    position: relative!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {

    .expressionfield {

        min-height: 100px!important;
        flex-wrap: wrap!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .expressionfield {

        min-height: 100px!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .expressionfield {

        min-height: 100px!important;

    }

}
@media (min-width: 1400px) {

    .expressionfield {

       min-height:100px!important;

    }

}
@media (prefers-color-scheme: light) {

    .expressionfield {

        background-color: var(--colorShoutWhiteHalf) !important;
        border: none!important;
        border-radius: var(--buttonRadius)!important;
        padding: 5px;

    }

}
@media (prefers-color-scheme: dark) {

    .expressionfield {

        background-color: var(--colorShoutBlackHalf)!important;
        border: none!important;
        border-radius: var(--buttonRadius)!important;
        padding: 5px;

    }

}


/**********************************************************************************/
/* Expressionlabel                                                                */
/**********************************************************************************/

.expressionlabel {

    font-weight: 600!important;
    position: absolute;
    top: 5px;
    left: 10px;
    font-family: var(--font), serif;
    padding: 5px!important;
    margin-left: 5px!important;
    margin-right: 5px!important;
    letter-spacing: 0.04em!important;

}

@media (max-width: 767px) {

    .expressionlabel {

        font-size: var(--font5)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .expressionlabel {

        font-size: var(--font5)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .expressionlabel {

        font-size: var(--font5)!important;

    }

}
@media (min-width: 1400px) {

    .expressionlabel {

        font-size: var(--font5)!important;

    }


}
@media (prefers-color-scheme: light) {

    .expressionlabel {

        color: var(--colorShoutDark);

    }

}
@media (prefers-color-scheme: dark) {

    .expressionlabel {

        color: var(--colorShoutLightGrey);

    }

}


/**********************************************************************************/
/* Expressiontouch                                                                */
/**********************************************************************************/

.expressiontouch {

    position: relative!important;
    display: flex!important;
    flex-wrap: nowrap!important;
    align-items: flex-end!important;
    justify-content: center!important;
    min-width: 40%!important;
    bottom: -5px!important;
    border-top-left-radius: 3px!important;
    border-top-right-radius: 3px!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .expressiontouch {

        padding: 5px!important;
        /*background: var(--colorShoutWhite)!important;*/
        background: var(--colorShoutWhiteHalf)!important;
        /*-webkit-box-shadow: 1px 1px 1px var(--boxShadowLight)!important;
        box-shadow: 1px 1px 1px var(--boxShadowLight)!important;
        border-top: 0.5pt solid var(--colorShoutInstrumentGrey) !important;
        border-left: 0.5pt solid var(--colorShoutInstrumentGrey)!important;
        border-right: 0.5pt solid var(--colorShoutInstrumentGrey) !important;*/

    }

}
@media (prefers-color-scheme: dark) {

    .expressiontouch {

        padding: 5px!important;
        background-color: var(--colorShoutBgLight)!important;
        /*background: var(--colorShoutBlackHalf)!important;*/
        /*-webkit-box-shadow: inset 1px 1px 1px var(--boxShadowDark)!important;
        box-shadow: inset 1px 1px 1px var(--boxShadowDark)!important;
        border-top: 0.5pt solid var(--colorShoutAnchor) !important;
        border-left: 0.5pt solid var(--colorShoutAnchor)!important;
        border-right: 0.5pt solid var(--colorShoutAnchor) !important;*/

    }

}


/**********************************************************************************/
/* Expressionrange                                                                */
/**********************************************************************************/

.expressionrange {

    font-family: var(--font), serif;
    width: auto;
    font-weight: 800!important;
    margin: auto!important;
    margin-left: 2px!important;
    margin-right: 2px!important;
    padding: 5px!important;
    text-align: center;
    border-radius: var(--buttonRadius) !important;
    text-transform: uppercase!important;


}

@media (max-width: 767px) {

    .expressionrange {

        font-size: var(--font2)!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .expressionrange {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .expressionrange {

        font-size: var(--font3)!important;

    }

}
@media (min-width: 1400px) {

    .expressionrange {

        font-size: var(--font3)!important;

    }

}
@media (prefers-color-scheme: light) {

    .expressionrange {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .expressionrange {

        color: var(--colorShoutWhite)!important;


    }

}

/**********************************************************************************/
/* Expressiontouchlabel                                                           */
/**********************************************************************************/

.expressiontouchlabel {

    font-family: var(--font), serif !important;
    border: 1px solid transparent!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .expressiontouchlabel {

        color: var(--colorShoutDark);
        position: relative;
        width: 40px!important;
        height: 30px!important;
        cursor: pointer;

    }

    .expressiontouchlabel:hover, .expressiontouchlabel:active {

        background: var(--colorShoutBgLight)!important;
        border-radius: var(--buttonRadius)!important;
        border: 1px solid var(--colorShoutPink)!important;
        transition: all 0.2s!important;

    }

}
@media (prefers-color-scheme: dark) {

    .expressiontouchlabel {

        color: var(--colorShoutLightGrey);
        position: relative;
        width: 40px!important;
        height: 30px!important;
        cursor: pointer;

    }

    .expressiontouchlabel:hover, .expressiontouchlabel:active {

        background: var(--colorShoutBgDark)!important;
        border-radius: var(--buttonRadius)!important;
        border: 1px solid var(--colorShoutPink)!important;
        transition: all 0.2s!important;

    }

}


/**********************************************************************************/
/* Expressionmark                                                                 */
/**********************************************************************************/

.expressionmark {

}

.expressiontouchlabel input:checked ~ .expressionmark {

    background: var(--colorShoutPink)!important;

}

.expressiontouchlabel input:checked ~ .expressionmark::after {

    background: var(--colorShoutPink)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .expressionmark {

        position: absolute!important;
        left: 0!important;
        margin-left: 10px!important;
        height: 20px!important;
        width: 20px!important;
        top: 50%!important;
        transform: translate(0, -50%)!important;
        -webkit-appearance: none!important;
        background: var(--colorShoutWhite) !important;
        outline: none!important;
        border-radius: 10px!important;
        box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

    }

    .expressiontouchlabel input:checked ~ .expressionmark {

        background: var(--colorShoutPink)!important;

    }

    .expressionmark:before {

        content: ''!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 20px!important;
        height: 20px!important;
        background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;
        border-radius: 10px!important;
        transform: scale(1.1, 1.1)!important;

    }

    .expressionmark:after {

        content: ''!important;
        position: absolute!important;
        top: calc(50% - 7px)!important;
        left: calc(50% - 7px)!important;
        width: 14px!important;
        height: 14px!important;
        background-image: linear-gradient(var(--colorShoutAnchor), var(--colorShoutBlack), var(--colorShoutDark))!important;
        border-radius: 50%!important;

    }

}
@media (prefers-color-scheme: dark) {

    .expressionmark {

        position: absolute!important;
        left: 0!important;
        margin-left: 10px!important;
        height: 20px!important;
        width: 20px!important;
        top: 50%!important;
        transform: translate(0, -50%)!important;
        -webkit-appearance: none!important;
        background: var(--colorShoutBlack)!important;
        outline: none!important;
        border-radius: 10px!important;
        box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

    }

    .expressiontouchlabel input:checked ~ .expressionmark {

        background: var(--colorShoutPink)!important;

    }

    .expressionmark:before {

        content: ''!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 20px!important;
        height: 20px!important;
        background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;
        border-radius: 10px!important;
        transform: scale(1.1, 1.1)!important;
        transition: all 0.2s!important;

    }

    .expressionmark:after {

        content: ''!important;
        position: absolute!important;
        top: calc(50% - 7px)!important;
        left: calc(50% - 7px)!important;
        width: 14px!important;
        height: 14px!important;
        background-image: linear-gradient(var(--colorShoutAnchor), var(--colorShoutBlack), var(--colorShoutDark))!important;
        border-radius: 50%!important;
        transition: all 0.2s!important;

    }
}

/**********************************************************************************/
/* Error                                                                          */
/**********************************************************************************/

.error {

    font-family: var(--font), serif !important;
    font-size: var(--font3)!important;
    font-weight: 500!important;
    padding: 10px!important;
    margin: 10px!important;
    border-radius: var(--buttonRadius)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .error {

        color: var(--colorShoutSun)!important;
        padding: 10px!important;

    }

}
@media (prefers-color-scheme: dark) {

    .error {

        color: var(--colorShoutSun)!important;
        padding: 10px!important;

    }

}

/**********************************************************************************/
/* AJAX Loader - ServerAction                                                     */
/**********************************************************************************/

.serverAction {

}

.serverActionLabelText {

    font-family: var(--font), serif !important;
    font-size: var(--font1)!important;
    font-weight: 700!important;
    letter-spacing: 0.04em!important;
    text-align: center!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .serverAction {

    }

    .serverActionLabelText {

        color: var(--colorShoutDark)!important;

    }

    .serverActionLight {

        background: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .serverAction {

    }


    .serverActionLabelText {

        color: var(--colorShoutWhite)!important;

    }


    .serverActionLight {

        background: var(--colorShoutBlack) !important;

    }

}
/**********************************************************************************/
/* screenBackground                                                               */
/**********************************************************************************/

.screenBackground {

    border-radius: var(--buttonRadius);
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .screenBackground {

        /*background: linear-gradient(0deg, var(--bgGlassLight), var(--bgLight)) !important;*/
        background-color: var(--colorShoutBgLight)!important;
        /*border: 0.5pt solid var(--colorShoutWhite) !important;*/

    }

}
@media (prefers-color-scheme: dark) {

    .screenBackground {

        /*background: linear-gradient(0deg, var(--bgDark), var(--bgGlassDark))!important;*/
        background-color: var(--colorShoutBgDark)!important;
        /*border: 0.5pt solid var(--colorShoutDark)!important;*/

    }
}

/**********************************************************************************/
/* controlBar                                                                     */
/**********************************************************************************/

.controlBar {

   /* box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;*/
    -webkit-backdrop-filter: blur(20px)!important; /* mozilla, safari, firefox, iOS */
    backdrop-filter: blur(20px) !important;
    scroll-padding-bottom: 40px!important;
    scrollbar-witdh: 0!important;

}

@media (max-width: 767px) {

    .controlBar {

        border-radius: 0!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .controlBar {

        border-radius: var(--buttonRadius) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .controlBar {

        border-radius: var(--buttonRadius) !important;

    }

}
@media (min-width: 1400px) {

    .controlBar {

        border-radius: var(--buttonRadius) !important;

    }

}
@media (prefers-color-scheme: light) {

    .controlBar {


       /*background-color: var(--colorShoutBgLight)!important;*/
        border: 0.5pt solid var(--colorShoutBorderLight);
        background-image: linear-gradient(var(--colorShoutBgLight),var(--colorShoutBgLightHalf), var(--colorShoutBgLightHalf))!important;

    }

}
@media (prefers-color-scheme: dark) {

    .controlBar {

        /*background-color: var(--colorShoutBgDark)!important;*/
        border: 0.5pt solid var(--colorShoutBorderDark);
        background-image: linear-gradient(var(--colorShoutBgDark),var(--colorShoutBgDarkHalf), var(--colorShoutBgDarkHalf))!important;

    }

}

/**********************************************************************************/
/* Row                                                                            */
/**********************************************************************************/

.row {

    display: flex!important; /* equal height of the children */
    align-items: center!important;
    border-radius: var(--buttonRadius) !important;
    padding-left: 5px!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .row {

        background-image: linear-gradient(var(--colorShoutBgLight),var(--colorShoutBgLightHalf), var(--colorShoutBgLightHalf))!important;

    }

}
@media (prefers-color-scheme: dark) {

    .row {

        background-image: linear-gradient(var(--colorShoutBgDark),var(--colorShoutBgDarkHalf), var(--colorShoutBgDarkHalf))!important;

    }

}

/**********************************************************************************/
/* Col                                                                            */
/**********************************************************************************/

.col {


}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/**********************************************************************************/
/* QR Code                                                                        */
/**********************************************************************************/

.arenaCode {

    background-position: center!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .arenaCode {

        background-color: var(--colorShoutPink)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .arenaCode {

        background-color: var(--colorShoutPink)!important;

    }

}

/**********************************************************************************/
/* QR Connect Bar                                                                 */
/**********************************************************************************/

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .qrConnectBar {

        background-color: var(--colorShoutWhite)!important;
        transition: transform 0.2s!important;

    }

    .qrConnectButton:hover .qrConnectBar{

        background-color: var(--colorShoutPink)!important;


    }

    .qrConnectButton:active .qrConnectBar{

        background-color: var(--colorShoutPink)!important;
        left: 20px!important;

    }

}
@media (prefers-color-scheme: dark) {

    .qrConnectBar {

        background-color: var(--colorShoutDark)!important;
        transition: transform 0.2s!important;

    }

    .qrConnectButton:hover .qrConnectBar{

        background-color: var(--colorShoutPink)!important;


    }

    .qrConnectButton:active .qrConnectBar{

        background-color: var(--colorShoutPink)!important;
        left: 20px!important;

    }

}

/**********************************************************************************/
/* Button Rotate Element                                                          */
/**********************************************************************************/

/**********************************************************************************/
/* rotateButtonDiscCoverOuter                                                     */
/**********************************************************************************/

.rotateButtonDiscCoverOuter {}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .rotateButtonDiscCoverOuter {

        background: transparent!important;

    }
}
@media (prefers-color-scheme: dark) {

    .rotateButtonDiscCoverOuter {

        background-color: transparent!important;

    }

}

/**********************************************************************************/
/* rotateButtonDiscGlow                                                          */
/**********************************************************************************/

.rotateButtonDiscGlow {

    background-color: var(--colorShoutPink)!important;
}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/**********************************************************************************/
/* rotateButtonDiscCoverInner                                                      */
/**********************************************************************************/

.rotateButtonDiscCoverInner {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .rotateButtonDiscCoverInner {

        /*background: linear-gradient(0deg, var(--colorShoutDark), var(--colorShoutBlack))!important;*/
        outline: none!important;
        border-radius: 50%!important;
       /* box-shadow: 0 0 0 1px var(--colorShoutDark), 0 0 0 1px var(--colorShoutLightGrey), inset 0 0 4px var(--colorShoutInstrumentGrey)!important;*/

        background: var(--colorShoutWhite)!important;

        /*box-shadow: 0 0 0 1px var(--colorShoutWhite), 0 0 0 1px var(--colorShoutInstrumentGrey), inset 0 0 1px var(--colorShoutBlack)!important;*/
       /* box-shadow: 0 0 0 1px var(--colorShoutWhite), 0 0 0 1px var(--colorShoutInstrumentGrey), inset 0 0 4px var(--colorShoutInstrumentGrey)!important;
*/
    }

}
@media (prefers-color-scheme: dark) {

    .rotateButtonDiscCoverInner {

        /*background: linear-gradient(0deg, var(--colorShoutDark), var(--colorShoutBlack))!important;*/
        background: var(--colorShoutDark)!important;
        /*box-shadow: 0 0 0 1px var(--colorShoutBlack), 0 0 0 1px var(--colorShoutAnchor), inset 0 0 4px var(--colorShoutAnchor)!important;*/
        border-radius: 50% !important;

    }

}

/**********************************************************************************/
/* rotateButtonNeedle                                                             */
/**********************************************************************************/

.rotateButtonNeedle {


}


@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .rotateButtonNeedle {

        background: var(--colorShoutPink)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .rotateButtonNeedle {

        background: var(--colorShoutPink)!important;

    }
}


/**********************************************************************************/
/* valueButton                                                                    */
/**********************************************************************************/

.valueButton {

    font-size: var(--font2)!important;
    font-weight: 600!important;
    font-family: var(--fontMono), serif !important;
    text-align: center!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .valueButton {

        color: var(--colorShoutWhite)!important;
        vertical-align: center!important;

    }
}
@media (prefers-color-scheme: dark) {

    .valueButton {

        color: var(--colorShoutWhite)!important;
        vertical-align: center!important;

    }
}


/**********************************************************************************/
/* Button Label                                                                   */
/**********************************************************************************/

.labelButton {

    font-size: var(--font2)!important;
    font-weight: 700!important;
    font-family: var(--font), serif !important;
    text-align: center!important;
    text-transform: uppercase!important;
    letter-spacing: 0.02em!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .labelButton {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .labelButton {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* rotateButtonNeedleCover                                                        */
/**********************************************************************************/

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .rotateButtonNeedleCover {

        background: var(--colorShoutAnchor)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .rotateButtonNeedleCover {

        background: var(--colorShoutAnchor)!important;

    }
}

/**********************************************************************************/
/* Icon Label                                                                     */
/**********************************************************************************/

.iconlabel {

    font-family: var(--font), serif !important;
    font-size: var(--font2) !important;
    font-weight: 700!important;
    text-align: center!important;
    text-transform: uppercase!important;
    overflow: hidden!important;
    letter-spacing: 0.02em!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .iconlabel {

        color: var(--colorShoutDark) !important;

    }
}
@media (prefers-color-scheme: dark) {

    .iconlabel {

        color: var(--colorShoutWhite)!important;

    }
}

/**********************************************************************************/
/* Button Switch Element OFF                                                      */
/**********************************************************************************/

.switchButtonLabelOff {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    font-size: var(--font1) !important;
    text-align: center!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchButtonLabelOff {

        color: var(--colorShoutInsetGreyDark)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .switchButtonLabelOff {

        color: var(--colorShoutInsetGreyDark)!important;

    }

}

/**********************************************************************************/
/* Button Rotate Element                                                          */
/**********************************************************************************/

/**********************************************************************************/
/* Button Switch Element ON                                                       */
/**********************************************************************************/

.switchButtonLabelOn {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    font-size: var(--font1) !important;
    text-align: center!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchButtonLabelOn {

        color: var(--colorShoutWhite)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .switchButtonLabelOn {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* switch Button Light Off                                                        */
/**********************************************************************************/

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchButtonLightOff {

        background-image: linear-gradient(var(--colorShoutAnchor), var(--colorShoutBlack), var(--colorShoutDark))!important;
        border-inline: 0.5pt solid var(--colorShoutBlack)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .switchButtonLightOff {

        background-image: linear-gradient(var(--colorShoutAnchor), var(--colorShoutBlack), var(--colorShoutDark))!important;
        border-inline: 0.5pt solid var(--colorShoutBlack)!important;

    }
}

/**********************************************************************************/
/* switch Button Light On                                                         */
/**********************************************************************************/

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchButtonLightOn {

        background-image: linear-gradient(var(--colorShoutPinkGlow), var(--colorShoutPink), var(--colorShoutPink))!important;

    }
}
@media (prefers-color-scheme: dark) {

    .switchButtonLightOn {

        background-image: linear-gradient(var(--colorShoutPinkGlow), var(--colorShoutPink), var(--colorShoutPink))!important;

    }
}

/**********************************************************************************/
/* switchCoverOuter                                                     */
/**********************************************************************************/

.switchCoverOuter {

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchCoverOuter {

        background: transparent!important;

    }
}
@media (prefers-color-scheme: dark) {

    .switchCoverOuter {

        background-color: transparent!important;

    }

}

/**********************************************************************************/
/* switchCoverInnerOff                                                            */
/**********************************************************************************/

.switchCoverInnerOff {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchCoverInnerOff {

        outline: none!important;
        border-radius: 50%!important;
        background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 0.5pt solid var(--colorShoutBgDarkHalf)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .switchCoverInnerOff {

        outline: none!important;
        border-radius: 50%!important;
        background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 0.5pt solid var(--colorShoutBgDarkHalf)!important;

    }

}

/**********************************************************************************/
/* switchCoverInnerOn                                                             */
/**********************************************************************************/

.switchCoverInnerOn {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .switchCoverInnerOn {

        outline: none!important;
        border-radius: 50%!important;
        background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 0.5pt solid var(--colorShoutBgDarkHalf)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .switchCoverInnerOn {

        outline: none!important;
        border-radius: 50%!important;
        background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 0.5pt solid var(--colorShoutBgDarkHalf)!important;

    }

}

/**********************************************************************************/
/* Value Identifier                                                               */
/**********************************************************************************/

.valueIdentifier, .panel_control_ca_label {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    text-transform: uppercase!important;

}

@media (max-width: 767px) {

    .valueIdentifier, .panel_control_ca_label {

        padding: 2px 4px !important;
        margin-right: 4px!important;
        font-size: var(--font1)!important;
        border-radius: 3px!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .valueIdentifier, .panel_control_ca_label {

        padding: 2px 8px !important;
        margin-right: 10px!important;
        font-size: var(--font2)!important;
        border-radius: 3px!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .valueIdentifier, .panel_control_ca_label {

        padding: 2px 8px !important;
        margin-right: 10px!important;
        font-size: var(--font2)!important;
        border-radius: 3px!important;

    }

}
@media (min-width: 1400px) {

    .valueIdentifier, .panel_control_ca_label {

        padding: 2px 8px !important;
        margin-right: 10px!important;
        font-size: var(--font2)!important;
        border-radius: 3px!important;

    }

}
@media (prefers-color-scheme: light) {

.valueIdentifier, .panel_control_ca_label {

        background-color: var(--colorShoutPink)!important;
        color: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .valueIdentifier, .panel_control_ca_label {

        background-color: var(--colorShoutPink)!important;
        color: var(--colorShoutBlack)!important;

    }

}

/**********************************************************************************/
/* Expressionidentifier                                                            */
/**********************************************************************************/

.expressionIdentifier {

    position: relative!important;
    top: -0.5em!important;

}

@media (max-width: 767px) {

    .expressionIdentifier {

        display: none!important;

    }
}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .expressionIdentifier {


    }
}
@media (prefers-color-scheme: dark) {

    .expressionIdentifier {

    }

}

/**********************************************************************************/
/* Standard Declarations                                                          */
/**********************************************************************************/

.switchPanel {

    border-radius: var(--buttonRadius)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    /*max-width: 1000px!important;
    margin:auto!important;
    position: relative!important;
    display: block!important;*/

}

@media (max-width: 767px) {

    .switchPanel {}

}
@media (min-width: 768px) and (max-width: 1023px) {

    .switchPanel {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .switchPanel {}

}
@media (min-width: 1400px) {

    .switchPanel {}

}
@media (prefers-color-scheme: light) {

    .switchPanel {

       background-color: var(--colorShoutBgLight)!important;
       /* background-color: var(--bgLight)!important;*/

    }

}
@media (prefers-color-scheme: dark) {

    .switchPanel {

        background-color: var(--colorShoutBgDark)!important;
        /*background-color: var(--bgDark) !important;*/

    }

}

/**********************************************************************************/
/* Standard Declarations                                                          */
/**********************************************************************************/

.outerPanel {

    border-radius: var(--buttonRadius)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {

    .outerPanel {}

}
@media (min-width: 768px) and (max-width: 1023px) {

    .outerPanel {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .outerPanel {}

}
@media (min-width: 1400px) {

    .outerPanel {}

}
@media (prefers-color-scheme: light) {

    .outerPanel {

        background-color: rgba(255,255,255,0.1)!important;
        /* background-color: var(--bgLight)!important;*/

    }

}
@media (prefers-color-scheme: dark) {

    .outerPanel {

        background-color: rgba(035, 044, 052, 0.1)!important;
        /*background-color: var(--bgDark) !important;*/

    }

}

/**********************************************************************************/
/* Ajax Loader Background                                                         */
/**********************************************************************************/

.ajaxLoaderBackground {


}

@media (max-width: 767px) {  }
@media (min-width: 768px) and (max-width: 1023px) {  }
@media (min-width: 1024px) and (max-width: 1399px) {  }
@media (min-width: 1400px) {  }
@media (prefers-color-scheme: light) {

    .ajaxLoaderBackground  {

        background-color: rgba(0, 0, 0, 0.8)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .ajaxLoaderBackground  {

        background-color: rgba(0, 0, 0, 0.8)!important;

    }

}

/**********************************************************************************/
/* COEX DATA ITEM IDENTIFIER (QUESTION)                                           */
/**********************************************************************************/

.coexIdentifier {

    font-family: var(--font), serif !important;
    font-weight: 800!important;
    line-height: 1.1em!important;
    top: calc(30%)!important;

}

@media (max-width: 767px) {

    .coexIdentifier {

        font-size: var(--font7) !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .coexIdentifier {

        font-size: var(--font8) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .coexIdentifier {

        font-size: var(--font9) !important;

    }

}
@media (min-width: 1400px) {

    .coexIdentifier {

        font-size: var(--font9) !important;

    }

}
@media (prefers-color-scheme: light) {

    .coexIdentifier {

        color: var(--colorShoutDark) !important;
        /*text-shadow: 0px 1px 1px var(--colorShoutWhite) !important;*/

    }

}
@media (prefers-color-scheme: dark) {

    .coexIdentifier {

        color: var(--colorShoutWhite) !important;
        /*text-shadow: 0px 1px 1px var(--colorShoutDark) !important;*/

    }

}

/**********************************************************************************/
/* Label Switch Panel                                                             */
/**********************************************************************************/

.labelSwitchPanel {

    text-transform: uppercase!important;
    line-height: 8pt!important;
    font-family: var(--font), serif !important;
    font-weight: 800!important;
    font-size: var(--font1) !important;
    color: var(--colorShoutWhite) !important;
    border-top-left-radius: var(--buttonRadius) !important;
    border-bottom-left-radius: var(--buttonRadius)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;


}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .labelSwitchPanel {

        background-color: var(--colorShoutBgLight) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .labelSwitchPanel {

        background-color: var(--colorShoutBgDark) !important;

    }

}



/**********************************************************************************/
/* label in Switch and Button Elements                                            */
/**********************************************************************************/

.labelSwitchButton {

    font-family: var(--font), serif !important;
    text-transform: uppercase!important;
    font-weight: 600!important;
    font-size: var(--font2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .labelSwitchButton {

        color: var(--colorShoutBlack)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .labelSwitchButton {

        color: var(--colorShoutWhite)!important;

    }
}

/**********************************************************************************/
/* Display Coex Alternative                                                       */
/**********************************************************************************/

.coexAlternative {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    line-height: var(--lineHeight8)!important;

}

@media (max-width: 767px) {

    .coexAlternative {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .coexAlternative {

        font-size: var(--font4) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .coexAlternative {

        font-size: var(--font4) !important;

    }

}
@media (min-width: 1400px) {

    .coexAlternative {

        font-size: var(--font4) !important;

    }

}
@media (prefers-color-scheme: light) {

    .coexAlternative {

        color: var(--colorShoutDark)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .coexAlternative {

        color: var(--colorShoutWhite)!important;

    }
}

/**********************************************************************************/
/* Display Coex Alternative Panel                                                  */
/**********************************************************************************/

.coexAlternativePanel {}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .coexAlternativePanel {

        background-color: rgba(255, 255, 255, 0.2) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .coexAlternativePanel {

        background-color: rgba(0, 0, 0, 0.2) !important;

    }
}

/**********************************************************************************/
/* Coex Alt Icon                                                                  */
/**********************************************************************************/

.coexAltIcon {

    font-family: var(--font), serif !important;
    text-transform: uppercase!important;
    font-weight: 800!important;
    border-radius: 3px !important;
    font-size: var(--font1) !important;
    text-align: center!important;
    line-height: var(--lineHeight6)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .coexAltIcon {

        color: var(--colorShoutWhite)!important;
        background-color: var(--colorShoutPink)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .coexAltIcon {

        color: var(--colorShoutWhite)!important;
        background-color: var(--colorShoutPink)!important;
    }
}

.coexAltIcon2 {

    font-family: var(--font), serif !important;
    text-transform: uppercase!important;
    font-weight: 800!important;
    border-radius: 3px !important;
    font-size: var(--font3) !important;
    text-align: center!important;
    line-height: var(--lineHeight7)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .coexAltIcon2 {

        color: var(--colorShoutPurple)!important;
        background-color: var(--colorShoutWhite)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .coexAltIcon2 {

        color: var(--colorShoutWhite)!important;
        background-color: var(--colorShoutPurple)!important;
    }
}

/**********************************************************************************/
/* Resolution Shuttter                                                            */
/**********************************************************************************/

.resolutionOff {

    display: none!important;

}

@media (max-width: 374px) {

    .resolutionOff {

        display: block!important;

    }
}

@media (max-height: 544px) {

    .resolutionOff {

        display: block!important;

    }
}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

.resolutionOffShutter {}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .resolutionOffShutter {

        background-color: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .resolutionOffShutter {

        background-color: var(--colorShoutDark)!important;

    }

}

.resolutionError {

    font-family: var(--font), serif !important;
    font-weight: 800!important;
    font-size: var(--font6)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .resolutionError {

        color: var(--colorShoutPink)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .resolutionError {

        color: var(--colorShoutWhite)!important;

    }
}

/**********************************************************************************/
/* COEX Overlay Screen                                                            */
/**********************************************************************************/

.overlayScreen {

    border-radius: var(--buttonRadius) !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .overlayScreen {

        background-color: var(--bgLight)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .overlayScreen {

        background-color: var(--bgDark)!important;

    }
}


/**********************************************************************************/
/* Coex Welcome Text                                                              */
/**********************************************************************************/

.coexWelcome {

    font-family: var(--font), serif !important;
    font-weight: 800!important;

}

@media (max-width: 767px) {

    .coexWelcome {

        font-size: var(--font5) !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .coexWelcome {

        font-size: var(--font6) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .coexWelcome {

        font-size: var(--font7) !important;

    }

}
@media (min-width: 1400px) {

    .coexWelcome {

        font-size: var(--font7) !important;

    }

}
@media (prefers-color-scheme: light) {

    .coexWelcome {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .coexWelcome {

        color: var(--colorShoutWhite)!important;

    }
}


/**********************************************************************************/
/* Coex Intro Text                                                                */
/**********************************************************************************/

.coexIntroText {

    font-family: var(--font), serif !important;
    font-weight: 400!important;


}

@media (max-width: 767px) {

    .coexIntroText {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .coexIntroText {

        font-size: var(--font4) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .coexIntroText {

        font-size: var(--font5) !important;

    }

}
@media (min-width: 1400px) {

    .coexIntroText {

        font-size: var(--font5) !important;

    }

}
@media (prefers-color-scheme: light) {

    .coexIntroText {

        color: var(--colorShoutDark)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .coexIntroText {

        color: var(--colorShoutWhite)!important;

    }
}

/**********************************************************************************/
/* Coex Result Value                                                              */
/**********************************************************************************/

.coexResultValue {

    font-family: var(--font), serif !important;
    font-weight: 800!important;
    font-size: var(--font6) !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .coexResultValue {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .coexResultValue {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* UI Button Dynamic                                                              */
/**********************************************************************************/

.buttonDynamic {

   /* box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    border-radius: var(--buttonRadius) !important;*/

}

@media (max-width: 767px) {

    .buttonDynamic {

        border-radius: 0 !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .buttonDynamic {

        /*background: var(--colorShoutWhite) !important;*/

    }
}
@media (prefers-color-scheme: dark) {

    .buttonDynamic {

        /*background: var(--colorShoutDark) !important;*/

    }
}


.buttonDynamic .iconBackground {

    border-radius: var(--buttonSmallRadius)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .buttonDynamic .iconBackground {

        background-color: var(--bgGlassLight)!important;
        border: 1px solid var(--colorShoutWhite) !important;

    }

    .buttonDynamic .iconBackground:before {

        content: '' !important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 100% !important;
        height: 50% !important;
        background-color: var(--colorShoutWhite) !important;
        border-top-left-radius: var(--buttonSmallRadius) !important;
        border-top-right-radius: var(--buttonSmallRadius)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .buttonDynamic .iconBackground {

        background-color: var(--colorShoutDark) !important;
        border: 1px solid var(--colorShoutBlack) !important;

    }

    .buttonDynamic .iconBackground:before {

        content: '' !important;
        position: absolute!important;
        top: 50%!important;
        left: 0!important;
        width: 100% !important;
        height: 50% !important;
        background-color: var(--colorShoutBlack) !important;
        border-bottom-left-radius: var(--buttonSmallRadius) !important;
        border-bottom-right-radius: var(--buttonSmallRadius) !important;

    }
}

/**********************************************************************************/
/* Limbic Visualizer                                                              */
/**********************************************************************************/

/**********************************/
/* Limbic Visualizer Value        */
/**********************************/

.limbicVisualizerValue {

    font-weight: 800!important;
    text-align: center!important;
    vertical-align: center!important;

}

@media (max-width: 767px) {

    .limbicVisualizerValue {

        font-size: var(--font9) !important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .limbicVisualizerValue {

        font-size: var(--font10) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .limbicVisualizerValue {

        font-size: var(--font10) !important;

    }

}
@media (min-width: 1400px) {

    .limbicVisualizerValue {

        font-size: var(--font10) !important;

    }

}
@media (prefers-color-scheme: light) {

    .limbicVisualizerValue {

        text-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .limbicVisualizerValue {

        text-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
        color: var(--colorShoutWhite) !important;

    }

}

/**********************************/
/* Limbic Visualizer Label        */
/**********************************/

.limbicVisualizerLabel {

    font-family: var(--font), serif !important;
    font-size: var(--font4) !important;
    font-weight: 800!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .limbicVisualizerLabel {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .limbicVisualizerLabel {

        color: var(--colorShoutWhite) !important;

    }

}

/*************************************/
/* Limbic Visualizer Achievement BG  */
/*************************************/

.achievementBackground {

    border-radius: var(--buttonRadius)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .achievementBackground {

        background-color: var(--bgGlassLight)!important;
        border: 1px solid var(--colorShoutWhite) !important;

    }

    .achievementBackground:before {

        content: '' !important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        width: 100% !important;
        height: 50% !important;
        background-color: var(--colorShoutWhite) !important;
        border-top-left-radius: var(--buttonRadius) !important;
        border-top-right-radius: var(--buttonRadius)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .achievementBackground {

        background-color: var(--colorShoutDark) !important;
        border: 1px solid var(--colorShoutBlack) !important;

    }

    .achievementBackground:before {

        content: '' !important;
        position: absolute!important;
        top: 50%!important;
        left: 0!important;
        width: 100% !important;
        height: 50% !important;
        background-color: var(--colorShoutBlack) !important;
        border-bottom-left-radius: var(--buttonRadius) !important;
        border-bottom-right-radius: var(--buttonRadius) !important;

    }
}

/**********************************************************************************/
/* System Message                                                                 */
/**********************************************************************************/

.systemMessage {

    max-width: 260px!important;
    box-sizing: border-box!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer!important;
    display: flex!important;
    align-items: center!important;
    text-transform: uppercase!important;

}

@media (max-width: 767px) {

    .systemMessage {}

}
@media (min-width: 768px) and (max-width: 1023px) {

    .systemMessage {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .systemMessage {}

}
@media (min-width: 1400px) {

    .systemMessage {}

}
@media (prefers-color-scheme: light) {

    .systemMessage {


    }

}
@media (prefers-color-scheme: dark) {

    .systemMessage {


    }

}

.systemMessageText {

    font-family: var(--font), serif !important;
    font-weight: 800!important;
    text-align: left!important;
    max-width: 260px!important;

}

@media (max-width: 767px) {

    .systemMessageText {

        font-size: var(--font3)!important;
        line-height: var(--lineHeight3)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .systemMessageText {

        font-size: var(--font3)!important;
        line-height: var(--lineHeight3)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .systemMessageText {

        font-size: var(--font4)!important;
        line-height: var(--lineHeight4)!important;

    }

}
@media (min-width: 1400px) {

    .systemMessageText {

        font-size: var(--font4)!important;
        line-height: var(--lineHeight4)!important;

    }

}
@media (prefers-color-scheme: light) {

    .systemMessageText {

        color: var(--colorShoutPink)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .systemMessageText {

        color: var(--colorShoutPink)!important;

    }

}

/**********************************************************************************/
/* loader                                                                         */
/**********************************************************************************/

.loader {

}

@media (max-width: 767px) {

    .loader {


    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .loader {


    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .loader {


    }

}
@media (min-width: 1400px) {

    .loader {


    }

}
@media (prefers-color-scheme: light) {

    .loader {

        background-color: var(--bgLoaderLight)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .loader {

        background-color: var(--bgLoaderDark)!important;

    }

}

.loaderElipse {

    opacity: 0.8!important;

}

@media (max-width: 767px) {

    .loaderElipse {}
}
@media (min-width: 768px) and (max-width: 1023px) {

    .loaderElipse {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .loaderElipse {}

}
@media (min-width: 1400px) {

    .loaderElipse {}

}
@media (prefers-color-scheme: light) {

    .loaderElipse {

        background-color: var(--colorShoutPink)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .loaderElipse {

        background-color: var(--colorShoutPink)!important;

    }

}


/**********************************************************************************/
/* Scene 2 Views General                                                          */
/**********************************************************************************/

.scene2-view1,.scene2-view2, .scene2-view3, .scene2-view4 {

    transition: opacity 400ms ease-in-out!important;

}

/**********************************************************************************/
/* Scene 2 View 1                                                                 */
/**********************************************************************************/

.scene2-view1 {

    top: clamp(106px, 15vh, 15vh)!important;

}

/**********************************************************************************/
/* Scene 2 Views Sensor Dashboard                                                 */
/**********************************************************************************/

.scene2-view2, .scene2-view3, .scene2-view4 {

    position: relative!important;
    display: flex!important;
    justify-content: center!important;
    margin: 0 auto!important;
    width: 100% !important;
    top: clamp(106px, 15vh, 15vh)!important;
    margin-bottom: 20px!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {

    .scene2-view2, .scene2-view3, .scene2-view4 {



    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .scene2-view2,.scene2-view3, .scene2-view4 {

        max-width: 1080px!important;

    }

}
@media (min-width: 1400px) {

    .scene2-view2, .scene2-view3, .scene2-view4 {

        max-width: 1200px!important;

    }

}

/**********************************************************************************/
/* Sensor Type 1                                                                  */
/**********************************************************************************/

.sensor1BarBackground {

    border-radius: var(--buttonRadius)!important;
    overflow: hidden!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .sensor1BarBackground {

        background: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarBackground {

        background: var(--colorShoutBlack)!important;

    }

}

.sensor1BarValue {

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .sensor1BarValue {

        background: var(--colorShoutPink)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarValue {

        background: var(--colorShoutPink)!important;

    }

}

.sensor1BarLabel {

    border-radius: var(--buttonRadius)!important;
    font-family: var(--fontMono), serif !important;
    font-weight: 800!important;
    text-align: center!important;
    line-height: var(--lineHeight11)!important;

}

@media (max-width: 767px) {

    .sensor1BarLabel {

        font-size: var(--font6) !important;
        line-height: var(--lineHeight16)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1BarLabel {

        font-size: var(--font6) !important;
        line-height: var(--lineHeight16)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1BarLabel {

        font-size: var(--font6) !important;
        line-height: var(--lineHeight16)!important;

    }

}
@media (min-width: 1400px) {

    .sensor1BarLabel {

        font-size: var(--font6) !important;
        line-height: var(--lineHeight16)!important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1BarLabel {

        color: var(--colorShoutBlack) !important;
        background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarLabel {

        color: var(--colorShoutPink) !important;
        background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;


    }

}
/*
.sensor1No {

    border-radius: 0!important;
    font-family: var(--font) !important;
    font-weight: 300!important;

}

@media (max-width: 767px) {

    .sensor1No {

        font-size: var(--font8) !important;
        text-align: left!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1No {

        font-size: var(--font8) !important;
        text-align: left!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1No {

        font-size: var(--font8) !important;
        text-align: left!important;

    }

}
@media (min-width: 1400px) {

    .sensor1No {

        font-size: var(--font8) !important;
        text-align: left!important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1No {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1No {

        color: var(--colorShoutWhite)!important;

    }

}

*/
.sensor1Name {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 300!important;

}

@media (max-width: 767px) {

    .sensor1Name {

        font-size: var(--font4) !important;
        text-align: left!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1Name {

        font-size: var(--font4) !important;
        text-align: left!important;


    }
}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1Name {

        font-size: var(--font4) !important;
        text-align: left!important;

    }

}
@media (min-width: 1400px) {

    .sensor1Name {

        font-size: var(--font4) !important;
        text-align: left!important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1Name {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1Name {

        color: var(--colorShoutWhite)!important;

    }

}

.sensor1TopName {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 800!important;

}

@media (max-width: 767px) {

    .sensor1TopName {

        font-size: var(--font6) !important;
        text-align: left!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1TopName {

        font-size: var(--font6) !important;
        text-align: left!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1TopName {

        font-size: var(--font6) !important;
        text-align: left!important;

    }

}
@media (min-width: 1400px) {

    .sensor1TopName {

        font-size: var(--font6) !important;
        text-align: left!important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1TopName {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1TopName {

        color: var(--colorShoutWhite)!important;

    }

}

.sensor1BarLabelLow {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 600!important;
    text-align: left!important;

}

@media (max-width: 767px) {

    .sensor1BarLabelLow {

        font-size: var(--font3) !important;
    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1BarLabelLow {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1BarLabelLow {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1400px) {

    .sensor1BarLabelLow {

        font-size: var(--font3) !important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1BarLabelLow {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarLabelLow {

        color: var(--colorShoutWhite)!important;

    }

}

.sensor1BarLabelMedium {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 600!important;
    text-align: center!important;

}

@media (max-width: 767px) {

    .sensor1BarLabelMedium {

        font-size: var(--font3) !important;
    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1BarLabelMedium {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1BarLabelMedium {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1400px) {

    .sensor1BarLabelMedium {

        font-size: var(--font3) !important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1BarLabelMedium {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarLabelMedium {

        color: var(--colorShoutWhite)!important;

    }

}

.sensor1BarLabelHigh {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 600!important;
    text-align: right!important;

}

@media (max-width: 767px) {

    .sensor1BarLabelHigh {

        font-size: var(--font3) !important;
    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1BarLabelHigh {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1BarLabelHigh {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1400px) {

    .sensor1BarLabelHigh {

        font-size: var(--font3) !important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1BarLabelHigh {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarLabelHigh {

        color: var(--colorShoutWhite)!important;

    }

}

.sensor1BarValueHigh {

    border-radius: 0!important;
    font-family: var(--fontMono), serif !important;
    font-weight: 800!important;
    text-align: left!important;

}

@media (max-width: 767px) {

    .sensor1BarValueHigh {

        font-size: var(--font3) !important;
    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1BarValueHigh {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1BarValueHigh {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1400px) {

    .sensor1BarValueHigh {

        font-size: var(--font3) !important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1BarValueHigh {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarValueHigh {

        color: var(--colorShoutWhite)!important;

    }

}

.sensor1BarValueLow {

    border-radius: 0!important;
    font-family: var(--fontMono), serif !important;
    font-weight: 800!important;
    text-align: right!important;

}

@media (max-width: 767px) {

    .sensor1BarValueLow {

        font-size: var(--font3) !important;
    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor1BarValueLow {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor1BarValueLow {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1400px) {

    .sensor1BarValueLow {

        font-size: var(--font3) !important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor1BarValueLow {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor1BarValueLow {

        color: var(--colorShoutWhite)!important;

    }

}

.iconFrame {

    border-radius: 50px!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .iconFrame {

        border: 1px solid var(--colorShoutBlack)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .iconFrame {

        border: 1px solid var(--colorShoutWhite)!important;

    }

}

.stretchConnect {



}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .stretchConnect {

        background-color: var(--colorShoutBlack)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .stretchConnect {

        background-color: var(--colorShoutWhite)!important;

    }

}

.stretchPoint {



}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .stretchPoint {

        background-color: var(--colorShoutBlack)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .stretchPoint {

        background-color: var(--colorShoutWhite) !important;

    }

}

/**********************************************************************************/
/* Symbol s_sensor2 Sensor Type 2                                                 */
/**********************************************************************************/

/*************************/
/* Label                 */
/*************************/


.sensor2Name {

    font-family: var(--font), serif !important;
    font-weight: 800!important;
    text-align: center!important;

}

@media (max-width: 767px) {

    .sensor2Name {

        font-size: var(--font5)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor2Name {

        font-size: var(--font4)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor2Name {

        font-size: var(--font5)!important;

    }

}
@media (min-width: 1400px) {

    .sensor2Name {

        font-size: var(--font5)!important;

    }

}
@media (prefers-color-scheme: light) {

    .sensor2Name {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor2Name {

        color: var(--colorShoutWhiteHalf)!important;

    }

}

/*************************/
/* axis                  */
/*************************/

.x-axis, .y-axis, .s-axis, .d-axis, .b-axis {

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .s-axis, .d-axis, .b-axis {

        background-color: var(--colorShoutDark)!important;

    }

    .x-axis, .y-axis {

        background-color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .s-axis, .d-axis, .b-axis {

        background-color: var(--colorShoutBlack)!important;

    }

    .x-axis, .y-axis {

        background-color: var(--colorShoutBlack)!important;

    }

}

/*************************/
/* axisEnd               */
/*************************/

.x-axisEnd, .y-axisEnd {



}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .x-axisEnd, .y-axisEnd {

        border: 1pt solid var(--colorShoutBlack) !important;
        background: var(--colorShoutDark) !important;
    }

}
@media (prefers-color-scheme: dark) {

    .x-axisEnd, .y-axisEnd {

        border: 1pt solid var(--colorShoutWhiteHalf) !important;
        background: var(--colorShoutBlack) !important;

    }

}

/*************************/
/* sensor2sectorLabel    */
/*************************/

.sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    text-transform: uppercase!important;
    letter-spacing: 0.02em!important;
    padding-top: 2px!important;

}

.sensor2sector1Label, .sensor2sector3Label {

    text-align: left!important;

}

.sensor2sector2Label, .sensor2sector4Label {

    text-align: right!important;

}

@media (max-width: 767px) {

    .sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

        font-size: var(--font2)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

        font-size: var(--font2)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

        font-size: var(--font2)!important;

    }

}
@media (min-width: 1400px) {

    .sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

        font-size: var(--font2)!important;

    }

}
@media (prefers-color-scheme: light) {

    .sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor2sector1Label, .sensor2sector2Label, .sensor2sector3Label, .sensor2sector4Label {

        color: var(--colorShoutWhite)!important;

    }

}

/*************************/
/* sensor2sectoricon     */
/*************************/

.sensor2sector1icon, .sensor2sector2icon, .sensor2sector3icon, .sensor2sector4icon {

    background: transparent!important;
}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/*************************/
/* sensor2fill           */
/*************************/

.sensor2fill1, .sensor2fill2, .sensor2fill3, .sensor2fill4 {

    border: 2pt solid var(--colorShoutPink)!important;
    background: var(--colorShoutPinkGlow) !important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    transition: width 500ms, height 500ms, opacity 500ms, left 500ms, right 500ms, visibility 0ms;


}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/*************************/
/* sensor2Mark           */
/*************************/

.sensor2Mark {

    background: transparent!important;

}


@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .sensor2Mark {

        border: 0.5pt solid var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor2Mark {

        border: 0.5pt solid var(--colorShoutBlack) !important;

    }

}

/*************************/
/* sensor2InnerLabel     */
/*************************/

.sensor2InnerLabel1, .sensor2InnerLabel2, .sensor2InnerLabel3, .sensor2InnerLabel4  {

    font-family: var(--font), serif !important;
    font-weight: 800!important;

}

.sensor2InnerLabel1, .sensor2InnerLabel3 {

    text-align: left!important;

}

.sensor2InnerLabel2, .sensor2InnerLabel4 {

    text-align: right!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor2InnerLabel1, .sensor2InnerLabel2, .sensor2InnerLabel3, .sensor2InnerLabel4  {

        font-size: var(--font7) !important;

    }

}
@media (min-width: 1400px) {

    .sensor2InnerLabel1, .sensor2InnerLabel2, .sensor2InnerLabel3, .sensor2InnerLabel4  {

        font-size: var(--font8) !important;

    }

}

@media (prefers-color-scheme: light) {

    .sensor2InnerLabel1, .sensor2InnerLabel2, .sensor2InnerLabel3, .sensor2InnerLabel4  {

        color: var(--colorShoutBgDarkHalf) !important;

    }

}

@media (prefers-color-scheme: dark) {

    .sensor2InnerLabel1, .sensor2InnerLabel2, .sensor2InnerLabel3, .sensor2InnerLabel4 {

        color: var(--colorShoutBgLightHalf) !important;

    }

}

/*************************/
/* s-,b-,d-values        */
/*************************/

.d-value-circle, .s-value-circle, .b-value-circle {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .d-value-circle, .s-value-circle, .b-value-circle {

        background: var(--colorShoutPink)!important;
        border: 2pt solid var(--colorShoutBlack)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .d-value-circle, .s-value-circle, .b-value-circle {

        background: var(--colorShoutPink)!important;
        border: 2pt solid var(--colorShoutWhite)!important;

    }

}

.d-value-bar, .s-value-bar, .b-value-bar {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .d-value-bar, .s-value-bar, .b-value-bar {

        background: var(--colorShoutBlack)!important;
    }

}
@media (prefers-color-scheme: dark) {

    .d-value-bar, .s-value-bar, .b-value-bar {

        background: var(--colorShoutWhite)!important;

    }

}

.d-value, .s-value, .b-value {

    transition: width 500ms, height 500ms, opacity 500ms, left 500ms, right 500ms, bottom 500ms, top 500ms, visibility 0ms;

}


/**********************************************************************************/
/* Sensor Type 3                                                                  */
/**********************************************************************************/

.valueTacho {

    border-radius: 0!important;
    font-family: var(--fontMono), serif !important;
    font-weight: 800!important;
    text-align: center!important;
    letter-spacing: -1pt!important;
    font-size: var(--font7)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .valueTacho {

        color: var(--colorShoutBlack) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .valueTacho {

        color: var(--colorShoutPink)!important;

    }
}

.tachoDiscCoverOuter {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .tachoDiscCoverOuter {

       /* background-image: linear-gradient(180deg, var(--colorShoutWhite), var(--colorShoutWhiteSmoke))!important;*/
        background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .tachoDiscCoverOuter {

        /*background-image: linear-gradient(180deg, var(--colorShoutDark), var(--colorShoutBlack))!important;*/
        background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;

    }

}

.tachoDiscCoverInner {



}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .tachoDiscCoverInner  {

        /*background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;*/
        background-color: var(--colorShoutWhite)!important;
        /*background-image: linear-gradient(180deg, var(--colorShoutWhite), var(--colorShoutWhiteSmoke))!important;*/
        border: 1px solid var(--colorShoutLightGrey) !important;

    }
}
@media (prefers-color-scheme: dark) {

    .tachoDiscCoverInner  {

        /*background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;*/
        background-image: linear-gradient(180deg, var(--colorShoutDark), var(--colorShoutBlack))!important;
        background-color: var(--colorShoutDark) !important;
        border: 1px solid var(--colorShoutBlack) !important;

    }

}

.tachoNeedle {



}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .tachoNeedle  {

        background-color: var(--colorShoutPink)!important;

    }
}
@media (prefers-color-scheme: dark) {

    .tachoNeedle  {

        background-color: var(--colorShoutPink)!important;

    }

}

.tachoLabelLow, .tachoLabelMedium, .tachoLabelHigh {

    font-family: var(--fontMono), serif !important;
    font-weight: 800!important;
    text-align: center!important;
    letter-spacing: -0.03em!important;
    font-size: var(--font3)!important;
    line-height: var(--lineHeight3)!important;
    border-radius: var(--buttonSmallRadius)!important;
    padding: 2px!important;


}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .tachoLabelLow, .tachoLabelMedium, .tachoLabelHigh {

        color: var(--colorShoutDark)!important;
        background: var(--colorShoutWhiteHalf)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .tachoLabelLow, .tachoLabelMedium, .tachoLabelHigh {

        color: var(--colorShoutWhite)!important;
        background: var(--colorShoutBlackHalf)!important;

    }
}

.tachoLabelStability {

    font-family: var(--font), serif !important;
    font-weight: 400!important;
    text-align: right!important;
    letter-spacing: -0.03em!important;
    font-size: var(--font2)!important;
    line-height: var(--lineHeight3)!important;
    border-radius: var(--buttonSmallRadius)!important;
    padding: 2px!important;


}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .tachoLabelStability {

        color: var(--colorShoutDark)!important;
        background: transparent!important;

    }

}
@media (prefers-color-scheme: dark) {

    .tachoLabelStability {

        color: var(--colorShoutWhite)!important;
        background: transparent!important;

    }
}

.sensor3No, .sensor2No, .sensor1No {

    font-family: var(--font), serif !important;
    font-weight: 500!important;
    text-align: center!important;
    letter-spacing: -0.03em!important;
    font-size: var(--font5)!important;
    line-height: var(--lineHeight6)!important;
    border-radius: var(--buttonSmallRadius)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .sensor3No, .sensor2No, .sensor1No {

        /*color: var(--colorShoutDark)!important;
       background: var(--colorShoutBgLight)!important;*/

        color: var(--colorShoutBlack)!important;
        background: var(--colorShoutBgLight)!important;


    }

}
@media (prefers-color-scheme: dark) {

    .sensor3No, .sensor2No, .sensor1No {

        color: var(--colorShoutInstrumentGrey) !important;
        background: var(--colorShoutBgDark)!important;

    }
}

.sensor3icon {

    text-align: center!important;
    background: transparent!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .sensor3icon {



    }

}
@media (prefers-color-scheme: dark) {

    .sensor3icon {



    }
}

.sensor3TopName {

    font-family: var(--font), serif !important;
    font-weight: 800!important;
    border-radius: var(--buttonRadius) !important;
    padding-top: 2px!important;
    padding-bottom: 6px!important;
    text-transform:uppercase!important;

}

@media (max-width: 767px) {

    .sensor3TopName {

        font-size: var(--font3) !important;
        text-align: center!important;
        line-height: var(--lineHeight15)!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor3TopName {

        font-size: var(--font3) !important;
        text-align: center!important;
        line-height: var(--lineHeight15)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor3TopName {

        font-size: var(--font3) !important;
        text-align: center!important;
        line-height: var(--lineHeight15)!important;

    }

}
@media (min-width: 1400px) {

    .sensor3TopName {

        font-size: var(--font3) !important;
        text-align: center!important;
        line-height: var(--lineHeight15)!important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor3TopName {

        color: var(--colorShoutDark) !important;
        background-color: var(--colorShoutWhiteHalf) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor3TopName {

        color: var(--colorShoutWhite)!important;
        background-color: var(--colorShoutBlackHalf) !important;

    }

}

.sensor3Name {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 700!important;
    text-transform: uppercase!important;
    letter-spacing: 0.02em!important;
    padding-top: 2px!important;

}

@media (max-width: 767px) {

    .sensor3Name {

        font-size: var(--font2) !important;
        text-align: left!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .sensor3Name {

        font-size: var(--font2) !important;
        text-align: left!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .sensor3Name {

        font-size: var(--font2) !important;
        text-align: left!important;

    }

}
@media (min-width: 1400px) {

    .sensor3Name {

        font-size: var(--font2) !important;
        text-align: left!important;

    }
}
@media (prefers-color-scheme: light) {

    .sensor3Name {

        color: var(--colorShoutDark) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .sensor3Name {

        color: var(--colorShoutWhite)!important;

    }

}

.tachoPowerLightLow, .tachoPowerLightMedium, .tachoPowerLightHigh {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .tachoPowerLightLow, .tachoPowerLightMedium, .tachoPowerLightHigh {

        background-color: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .tachoPowerLightLow, .tachoPowerLightMedium, .tachoPowerLightHigh {

        background-color: var(--colorShoutBlack)!important;

    }

}

.on {

    background-color: var(--colorShoutPink)!important;

}

/**********************************************************************************/
/* Application Standard Label Field                                               */
/**********************************************************************************/

.labelStandard {

    padding-top: 2px!important;
    padding-bottom: 2px!important;

}

@media (max-width: 767px) {

    .labelStandard {

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .labelStandard {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .labelStandard {}

}
@media (min-width: 1400px) {

    .labelStandard {}

}
@media (prefers-color-scheme: light) {

    .labelStandard {

    }

}
@media (prefers-color-scheme: dark) {

    .labelStandard {

    }
}

/**********************************************************************************/
/* Label Standard Text                                                            */
/**********************************************************************************/

.labelStandardText {

    font-family: var(--font), serif !important;
    font-weight: 600!important;
    border-radius: var(--buttonRadius) !important;
    text-transform: uppercase!important;
    letter-spacing: 0.1em!important;
    position: relative!important;
    top: 22px!important;

}

@media (max-width: 767px) {

    .labelStandardText {

        font-size: var(--font3) !important;
        border-radius: 0!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .labelStandardText {

        font-size: var(--font4) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .labelStandardText {

        font-size: var(--font4) !important;
        line-height: var(--lineHeight4)!important;

    }

}
@media (min-width: 1400px) {

    .labelStandardText {

        font-size: var(--font4) !important;
        line-height: var(--lineHeight4)!important;

    }

}
@media (prefers-color-scheme: light) {

    .labelStandardText {

        color: var(--colorShoutDark)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .labelStandardText {

        color: var(--colorShoutWhite) !important;

    }

}

/**********************************************************************************/
/* Label Standard Icon                                                            */
/**********************************************************************************/

.labelIcon, .iconStandard {

    margin-top: 5px!important;
    margin-bottom: 5px!important;

}

@media (max-width: 767px) {

    .labelIcon, .iconStandard {}

}
@media (min-width: 768px) and (max-width: 1023px) {

    .labelIcon, .iconStandard {}

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .labelIcon, .iconStandard {}

}
@media (min-width: 1400px) {

    .labelIcon, .iconStandard {}

}
@media (prefers-color-scheme: light) {

    .labelIcon, .iconStandard {}

}
@media (prefers-color-scheme: dark) {

    .labelIcon, .iconStandard {}

}

/**********************************************************************************/
/* Scene 2 View 1 Panels                                                          */
/**********************************************************************************/

.panelScreen {

    border-radius: var(--buttonRadius)!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

.panelScreen:hover {

    transform: scale(1.02, 1.02) !important;
    transition: transform 0.2s !important;

}

.panelScreen:active {

    transform: scale(1, 1) !important;
    transition: transform 0.2s !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .panelScreen {

       /* background-color: var(--colorShoutWhiteHalf)!important;*/
        background-image: linear-gradient(var(--colorShoutBgLight),var(--colorShoutBgLightHalf), var(--colorShoutBgLightHalf))!important;

    }

}
@media (prefers-color-scheme: dark) {

    .panelScreen {

       /* background-color: var(--colorShoutBlackHalf)!important;*/
        background-image: linear-gradient(var(--colorShoutBgDark),var(--colorShoutBgDarkHalf), var(--colorShoutBgDarkHalf))!important;

    }

}

.panelActive {



}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .panelActive {



    }

}
@media (prefers-color-scheme: dark) {

    .panelActive {



    }

}

.panel_ca {

    font-family: var(--fontMono), serif !important;
    font-weight: 100!important;
    letter-spacing: -0.04em!important;
    text-transform: uppercase!important;
    border-top-left-radius: var(--buttonRadius) !important;
    text-align: center!important;
    /*box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;*/

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_ca {

        padding: 5px!important;
        font-size: var(--font8) !important;
        line-height: calc(var(--font8) + 13px)!important;

    }

}
@media (min-width: 1400px) {

    .panel_ca {

        padding: 5px!important;
        font-size: var(--font8) !important;
        line-height: calc(var(--font8) + 13px)!important;

    }

}
@media (prefers-color-scheme: light) {

    .panel_ca {

        background-color: var(--colorShoutPink)!important;
        color: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .panel_ca {

        background-color: var(--colorShoutPink)!important;
        color: var(--colorShoutBlack)!important;

    }

}

.panel_cb {

    font-family: var(--font), serif !important;
    font-weight: 600!important;
    letter-spacing: -0.02em!important;
    border-top-right-radius: var(--buttonRadius) !important;
    text-align: left!important;
    padding: 5px 5px !important;
    /*box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;*/

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_cb {

        font-size: var(--font3a) !important;

    }

}
@media (min-width: 1400px) {

    .panel_cb {

        font-size: var(--font3a) !important;

    }
}
@media (prefers-color-scheme: light) {

    .panel_cb {

        color: var(--colorShoutBlack) !important;
        background-color: var(--colorShoutWhiteHalf)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .panel_cb {

        color: var(--colorShoutWhite) !important;
        background-color: var(--colorShoutBlackHalf)!important;


    }

}

.panel_cc {

    font-family: var(--font), serif !important;
    font-weight: 600!important;
    letter-spacing: -0.02em!important;
    border-bottom-left-radius: var(--buttonRadius) !important;
    border-bottom-right-radius: var(--buttonRadius) !important;
    text-align: left!important;
    padding: 3px 5px !important;
    overflow: auto scroll!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_cc {

        font-size: var(--font3) !important;

    }

}
@media (min-width: 1400px) {

    .panel_cc {

        font-size: var(--font3) !important;

    }

}
@media (prefers-color-scheme: light) {

    .panel_cc {

        color: var(--colorShoutDark)!important;
        background-color: var(--colorShoutBgLight) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .panel_cc {

        color: var(--colorShoutWhite)!important;
        background-color: var(--colorShoutBgDark)!important;


    }

}

.panel_hash {

    font-family: var(--font), serif !important;
    font-weight: 300!important;
    letter-spacing: -0.04em!important;
    text-transform: uppercase!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_hash {

        font-size: var(--font7) !important;

    }

}
@media (min-width: 1400px) {

    .panel_hash {

        font-size: var(--font7) !important;

    }

}
@media (prefers-color-scheme: light) {

    .panel_hash {

        color: var(--colorShoutDark) !important;

    }
}
@media (prefers-color-scheme: dark) {

    .panel_hash {

        color: var(--colorShoutWhite) !important;

    }

}

.panel_gc, .panel_gb, .panel_done, .panel_control_ca {

    font-family: var(--fontMono), serif !important;
    font-weight: 600!important;
    border-radius: var(--buttonRadius) !important;
    text-align: center!important;
    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {

    .panel_gc, .panel_gb, .panel_done, .panel_control_ca  {

        font-size: var(--font5) !important;
        line-height: var(--lineHeight5)!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_gc, .panel_gb, .panel_done, .panel_control_ca  {

        font-size: var(--font5) !important;
        line-height: var(--lineHeight5)!important;

    }

}
@media (min-width: 1400px) {

    .panel_gc, .panel_gb, .panel_done, .panel_control_ca  {

        font-size: var(--font5) !important;
        line-height: var(--lineHeight5)!important;

    }

}
@media (prefers-color-scheme: light) {

    .panel_gc, .panel_control_ca  {

        color: var(--colorShoutWhite) !important;
        background-color: var(--colorShoutPink)!important;

    }

    .panel_gb {

        color: var(--colorShoutBlack) !important;
        background-color: var(--colorShoutWhite)!important;

    }

    .panel_done {

        color: var(--colorShoutBlack) !important;
        background-color: var(--colorShoutWhite)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .panel_gc, .panel_control_ca  {

        color: var(--colorShoutBlack) !important;
        background-color: var(--colorShoutPink)!important;

    }

    .panel_gb {

        color: var(--colorShoutWhite) !important;
        background-color: var(--colorShoutBlack)!important;

    }

    .panel_done {

        color: var(--colorShoutWhite) !important;
        background-color: var(--colorShoutBlack)!important;

    }

}

.panel_progress_label_1, .panel_progress_label_2, .panel_progress_label_3 {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    border-radius: var(--buttonRadius) !important;
    text-align: right!important;
    text-transform: uppercase!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_progress_label_1, .panel_progress_label_2, .panel_progress_label_3  {

        font-size: var(--font2) !important;

    }

}
@media (min-width: 1400px) {

    .panel_progress_label_1, .panel_progress_label_2, .panel_progress_label_3  {

        font-size: var(--font2) !important;

    }

}
@media (prefers-color-scheme: light) {

    .panel_progress_label_1, .panel_progress_label_2, .panel_progress_label_3 {

        color: var(--colorShoutBlack) !important;
        background-color: transparent!important;

    }

}
@media (prefers-color-scheme: dark) {

    .panel_progress_label_1, .panel_progress_label_2, .panel_progress_label_3 {

        color: var(--colorShoutWhite) !important;
        background-color: transparent!important;

    }

}

/**********************************************************************************/
/* Scene 2 View 1 | Panel Control                                                 */
/**********************************************************************************/

.panel_control_cb {

    font-family: var(--font), serif !important;
    font-weight: 700!important;
    text-align: left!important;
    padding: 2px 4px !important;
    margin-right: 4px!important;
    line-height: var(--lineHeight13) !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .panel_control_cb  {

        font-size: var(--font4) !important;

    }

}
@media (min-width: 1400px) {

    .panel_control_cb  {

        font-size: var(--font4) !important;

    }

}
@media (prefers-color-scheme: light) {

    .panel_control_cb {

        color: var(--colorShoutBlack) !important;
        background-color: transparent!important;

    }

}
@media (prefers-color-scheme: dark) {

    .panel_control_cb {

        color: var(--colorShoutWhite) !important;
        background-color: transparent!important;

    }

}

/**********************************************************************************/
/* Scene 2 View 3 | Action Panel                                                  */
/**********************************************************************************/

.actionPanelScreen {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    -webkit-backdrop-filter: blur(10px)!important; /* mozilla, safari, firefox, iOS */
    backdrop-filter: blur(10px) !important;
    border-radius: var(--buttonRadius) !important;
    display: block!important;

}

.actionPanelScreen:hover {

    transform: scale(1.02, 1.02) !important;
    transition: all 0.2s !important;

}

.actionPanelScreenTop {

    position: absolute!important;
    top: 16px!important;
    transition: top 0.2s !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .actionPanelScreen {

        background-color: var(--colorShoutBgLight)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .actionPanelScreen {

        background-color: var(--colorShoutBgDark)!important;

    }

}

.actionScreenData {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    -webkit-backdrop-filter: blur(10px)!important; /* mozilla, safari, firefox, iOS */
    backdrop-filter: blur(10px) !important;
    border-radius: var(--buttonRadius) !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .actionScreenData {

        background-color: var(--colorShoutBgLight)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .actionScreenData {

        background-color: var(--colorShoutBgDark)!important;

    }

}

/**********************************************************************************/
/* Scene 2 View 1 No-Button-Label Overlay (if button is deactivated)              */
/**********************************************************************************/

.non-persist_label {

    font-family: var(--font), serif !important;
    font-size: var(--font4)!important;
    text-transform: uppercase!important;
    text-align: center!important;
    vertical-align: center!important;
    font-weight: 800!important;
    line-height: var(--lineHeight12) !important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .non-persist_label {

        color: var(--colorShoutBlackHalf)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .non-persist_label {

        color: var(--colorShoutWhiteHalf)!important;

    }

}

.srcData {

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {

    .srcData {

        width: calc(984px - 32px) !important;
        padding-left: 16px!important;
        padding-right: 16px!important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/**********************************************************************************/
/* Experimental                                                                   */
/**********************************************************************************/

.rotateButtonNeedle, .rotateFill {

    transition: transform 1s!important;

}

/**********************************************************************************/
/* FlowEye                                                                        */
/**********************************************************************************/

.serverName {

    font-family: var(--font), serif !important;
    font-size: var(--font1)!important;
    font-weight: 800!important;

}

@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/**********************************************************************************/
/* Widget Design Grid                                                             */
/**********************************************************************************/

.widgetBody {

    display: flex!important;
    flex-flow: row wrap;
    justify-content: center!important;
    padding: 0!important;
    margin: 0!important;
    width: 100% !important;

}

@media (max-width: 767px) and (orientation: portrait) {

    .widgetBody {

        flex-direction: column!important;

    }
}
@media (max-width: 767px) and (orientation: landscape) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/*******************************/
/* widget item                 */
/*******************************/

.widgetItem{

    margin: 5px!important;
    border-radius: var(--buttonRadius) !important;
    max-height: 300px!important;

}

@media (max-width: 767px) and (orientation: portrait) {}
@media (max-width: 767px) and (orientation: landscape) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .widgetItem {


    }
}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {

    .widgetItem {

        /*border: 1pt solid var(--colorShoutBgLightHalf) !important;*/

    }
}
@media (prefers-color-scheme: dark) {

    .widgetItem {

        /*border: 1pt solid var(--colorShoutBgDarkHalf) !important;*/

    }
}

/**********************************************************************************/
/* widgetObject                                                                   */
/**********************************************************************************/

@media (max-width: 767px) and (orientation: portrait) {}
@media (max-width: 767px) and (orientation: landscape) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {

    .widgetObject {

        width: 27vw !important;
        height: 300px !important;

    }

}
@media (min-width: 1400px) {


    .widgetObject {

        max-width: 21vw !important;
        height: 300px !important;

    }

}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

/**********************************************************************************/
/* Hype Flow-Radar Classes                                                        */
/**********************************************************************************/

.labelHype {

    border-radius: 0!important;
    font-family: var(--font), serif !important;
    font-weight: 800!important;

}

@media (max-width: 767px) {

    .labelHype {

        font-size: var(--font5) !important;
        text-align: center!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .labelHype {

        font-size: var(--font6) !important;
        text-align: left!important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .labelHype {

        font-size: var(--font6) !important;
        text-align: left!important;

    }

}
@media (min-width: 1400px) {

    .labelHype {

        font-size: var(--font6) !important;
        text-align: left!important;

    }
}
@media (prefers-color-scheme: light) {

    .labelHype {

        color: var(--colorShoutBlack) !important;

    }

}
@media (prefers-color-scheme: dark) {

    .labelHype {

        color: var(--colorShoutWhite)!important;

    }

}

/**********************************************************************************/
/* barHype                                                                        */
/**********************************************************************************/

.barHype {

    box-shadow: var(--colorBoxShadowLight1), var(--colorBoxShadowLight2)!important;
    -webkit-backdrop-filter: blur(10px)!important; /* mozilla, safari, firefox, iOS */
    backdrop-filter: blur(10px) !important;
    scroll-padding-bottom: 40px!important;

}

@media (max-width: 767px) {

    .barHype {

        border-radius: 0!important;

    }

}
@media (min-width: 768px) and (max-width: 1023px) {

    .barHype {

        border-radius: var(--buttonRadius) !important;

    }

}
@media (min-width: 1024px) and (max-width: 1399px) {

    .barHype {

        border-radius: var(--buttonRadius) !important;

    }

}
@media (min-width: 1400px) {

    .barHype {

        border-radius: var(--buttonRadius) !important;

    }

}
@media (prefers-color-scheme: light) {

    .barHype {


        /*background-color: var(--colorShoutBgLight)!important;*/
        color: var(--colorShoutBlack) !important;
        background-image: linear-gradient(var(--colorShoutWhite) 50%, var(--colorShoutWhiteSmoke) 50%)!important;

    }

}
@media (prefers-color-scheme: dark) {

    .barHype {

        /*background-color: var(--colorShoutBgDark)!important;*/
        background-image: linear-gradient(var(--colorShoutDark) 50%, var(--colorShoutBlack) 50%)!important;

    }

}


/**********************************************************************************/
/* Standard Declarations                                                          */
/**********************************************************************************/



@media (max-width: 767px) and (orientation: portrait) {}
@media (max-width: 767px) and (orientation: landscape) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (min-width: 1024px) and (max-width: 1399px) {}
@media (min-width: 1400px) {}
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}