/**********************************************/
/* (c) IP Management GmbH 2021                */
/* CSS Version 1.00                           */
/**********************************************/

/**********************************************/
/* PART 1 | GENERAL                           */
/**********************************************/

/* 1.1 Global Variables */

@font-face {
          
        font-family: "HelveticaNeue-CondensedBold";
        
        src:
        
            url("./index.hyperesources/HelveticaNeueCondensedBold.eot"); /* IE9 Compact Modes */
        src:
        
            url("./HelveticaNeueCondensedBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
            url("./HelveticaNeueCondensedBold.otf") format("opentype"), /* Open Type Font */
            url("./HelveticaNeueCondensedBold.svg") format("svg"), /* Legacy iOS */
            url("./HelveticaNeueCondensedBold.ttf") format("truetype"), /* Safari, Android, iOS */
            url("./HelveticaNeueCondensedBold.woff") format("woff"), /* Modern Browsers */
            url("./HelveticaNeueCondensedBold.woff2") format("woff2"); /* Modern Browsers */
        
        font-weight: 900;
        font-style: normal;
    
}

:root {

    /* Theme Changes only here */

    --highDark: #eee;
    --highLight: #888;
    
    --themeColor: #ff6600;
    
    --buttonColorLightHover:#ff6600;
    --buttonColorDarkHover:#ff6600;

    /* Do not change anything from here */
    
    --dark: #131c24;
    --grey: #232C34;
    --anchorgrey: #6B6B79;
    --lightgrey: #e4e4e4;
    
    --white: #ffffff;
    --black: #000000;
    
    --bgLight:rgba(245,245,245,0.5);
    --bgDark:rgba(35,44,52,0.5);
    
    --bgLightHover:rgba(235,235,235,0.5);
    --bgDarkHover:rgba(0,0,0,0.3);
    
    --bgGlassLight:rgba(245,245,245,0.4);
    --bgGlassDark:rgba(35,44,52,0.4);
    --bgGlassWhite:rgba(255,255,255,0.4);
    
    --font:"HelveticaNeue-CondensedBold", sans-serif!important;
    --fontTypewriter:"Courier New", sans-serif!important;
    
}

/* 1.2 General Class Behaviour */

.button {
    
}

.button .buttonStandard {
    
    font-family: var(--font)!important;
    border-radius: 15px!important;
    transition: background-color 0.5s ease!important;
    
}

.sensorName, .sensorLabel, .sensorSpec {
    
    font-family: var(--font)!important;
    
}

.sensorName {
    
    padding-bottom: 20px!important;
    
}

.labeltext {
    
    font-weight: 600!important;
    font-family: var(--font)!important;
    
}

.expressionrange {
    
    font-family: var(--font);
    color: var(--anchorgrey);
    width: auto;
    font-weight: 600;
    margin: auto;
    padding: 3px;
    text-align: center;
}

.expressionfield {
    
    margin-bottom: 15px;
    
}

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


/* 1.3 System Overrides */

input {
    
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    
}
  

/*********************************************/
/* PART 2 | FORM ELEMENTS                    */
/*********************************************/

/* 2.1 Prestyling Checkbox Elements */

.checklabel {

    display: block;
    position: relative;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-user-select: none!important;
    -moz-user-select: none!important;
    -ms-user-select: none!important;
    user-select: none!important;
    padding-left: 65px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 400!important;
    width: calc(100% - 75px);
    border-radius: 10px;
    transition: 0.3s;
    font-family: var(--font)!important;
    
}

/* 2.2 Prestyling Radio Button Elements */

.radiolabel {

    display: block;
    position: relative;
    margin-bottom: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 50px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    width: calc(100% - 60px);
    border-radius: 10px;
    transition: 0.3s;
    font-family: var(--font)!important;
    
}


/* 2.3 Prestyling Textarea Fields */

.textfield {
    
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
    -webkit-appearance: none;
    opacity: 1!important;
    outline: 0;
    width: calc(100% - 40px);
    margin-top: 4px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 0;
    background: none;
    padding: 20px;
    font-family: var(--fontTypewriter);
    resize: vertical;

}

/**********************************************/
/* PART 3 |  MEDIA STYLING                    */
/**********************************************/
/**********************************************/
/* 3.1 Mobile Mode                            */
/**********************************************/

@media (max-width: 767px) {
    
    .button .buttonStandard {
        
        line-height: 20px!important;
        font-size: 10pt!important;
        font-family: var(--font)!important;
        font-weight: 600!important;
        
    }
    
    .radiolabel {
        
        font-size: 10pt!important;
        letter-spacing: 0 !important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .checklabel {
        
        letter-spacing: 0 !important;
        font-size: 10pt!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
    
    }
    
    .sensorName {
        
        font-size: 13pt!important;
        font-weight: 600!important;
        letter-spacing: 0 !important;
        font-family: var(--font)!important;
        
    }
    
    .sensorLabel {
        
        font-size: 10pt!important;
        font-weight: 400!important;
        letter-spacing: 0!important;
        font-family: var(--font)!important;
        
    }
    
    .sensorSpec {
        
        font-size: 8pt!important;
        font-weight: 600!important;
        letter-spacing: 0!important;
        font-family: var(--font)!important;
        
    }
    
    .textfieldlabel {
        
        font-size: 8pt;
        font-weight: 600;
        font-family: var(--font)!important;
        
    }
    
    .textfield {
        
        font-size: 10pt;
        font-weight: 600;
        font-family: var(--fontTypewriter)!important;
        
    }
    
    .labeltext {
        
        font-size: 10pt!important;
        letter-spacing: 0 !important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .progressMeter .totalMobile {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }

    .progressMeter .doneMobile {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }
    
    .expressionrange {
        
        font-size: 8pt;

    }
    
    .expressionfield {
        
        height: 85px;
        font-weight: 600;
        font-size: 9pt;
        
    }
    
    .screenMobile {
        
        /*special adjustment to operate correctly on small smartphones*/
        padding: 5px!important;
        width: calc(100% - 22px)!important;
        margin: auto!important;
    }
    
    .sensorNotification {
        
        font-size: 10pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        
    }
    
}

/**********************************************/
/* 3.2 Portrait Mode                          */
/**********************************************/

@media (min-width: 768px) and (max-width: 1023px) {
    
    .button .buttonStandard {
        
        line-height: 30px!important;
        font-size: 13pt!important;
        font-family: var(--font)!important;
        font-weight: 600!important;
        
    }
    
    .radiolabel {
        
        font-size: 11pt!important;
        letter-spacing: 0 !important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .checklabel {
        
        letter-spacing: 0px!important;
        font-size: 11pt!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
    
    }
    
    .sensorName {
        
        font-size: 14pt!important;
        font-weight: 600!important;
        letter-spacing: 0 !important;
        font-family: var(--font)!important;
        
    }
    
    .sensorLabel {
        
        font-size: 11pt!important;
        font-weight: 400!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .sensorSpec {
        
        font-size: 9pt!important;
        font-weight: 600!important;
        letter-spacing: 0!important;
        font-family: var(--font)!important;
        
    }
    
    .textfieldlabel {
        
        font-size: 9pt;
        font-weight: 600;
        font-family: var(--font)!important;
        
    }
    
    .textfield {
        
        font-size: 11pt;
        font-weight: 600;
        font-family: var(--fontTypewriter)!important;
        
    }
    
    .labeltext {
        
        font-size: 11pt!important;
        letter-spacing: 0px!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .progressMeter .totalPortrait {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }

    .progressMeter .donePortrait {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
        
    }
    
    .expressionrange {
        
        font-size: 9pt;

    }
    
    .expressionfield {
        
        height: 75px;
        font-weight: 400;
        font-size: 12pt;
        
    }
    
    .sensorNotification {
        
        font-size: 10pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        
    }

}

/**********************************************/
/* 3.3 Landscape Mode                         */
/**********************************************/

@media (min-width: 1024px) and (max-width: 1199px) {
    
    .button .buttonStandard {
        
        line-height: 30px!important;
        font-size: 13pt!important;
        font-family: var(--font)!important;
        font-weight: 600!important;
        
    }
    
    .radiolabel {
        
        font-size: 11pt!important;
        letter-spacing: 0px!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .checklabel {
        
        letter-spacing: 0px!important;
        font-size: 11pt!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
    
    }
    
    .sensorName {
        
        font-size: 14pt!important;
        font-weight: 600!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .sensorLabel {
        
        font-size: 11pt!important;
        font-weight: 400!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .sensorSpec {
        
        font-size: 9pt!important;
        font-weight: 600!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .textfieldlabel {
        
        font-size: 9pt;
        font-weight: 600;
        font-family: var(--font)!important;
        
    }
    
    .textfield {
        
        font-size: 10pt;
        font-weight: 600;
        font-family: var(--fontTypewriter)!important;
        
    }
    
    .labeltext {
        
        font-size: 10pt!important;
        letter-spacing: 0px!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .progressMeter .totalLandscape {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }

    .progressMeter .doneLandscape {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }
    
    .expressionrange {
        
        font-size: 9pt;

    }
    
    .expressionfield {
        
        height: 60px;
        font-weight: 400;
        font-size: 12pt;
        
    }
    
    .sensorNotification {
        
        font-size: 10pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        
    }
    
}

/**********************************************/
/* 3.4 Desktop Mode                           */
/**********************************************/

@media (min-width: 1200px) {
    
    .button .buttonStandard {
        
        line-height: 30px!important;
        font-size: 14pt!important;
        font-family: var(--font)!important;
        font-weight: 600!important;
        
    }
    
    .radiolabel {
        
        font-size: 12pt!important;
        letter-spacing: 0px!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .checklabel {
        
        letter-spacing: 0px!important;
        font-size: 12pt!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
    
    }
    
    .sensorName {
        
        font-size: 15pt!important;
        font-weight: 600!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .sensorLabel {
        
        font-size: 12pt!important;
        font-weight: 400!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .sensorSpec {
        
        font-size: 10pt!important;
        font-weight: 600!important;
        letter-spacing: 0px!important;
        font-family: var(--font)!important;
        
    }
    
    .textfieldlabel {
        
        font-size: 10pt;
        font-weight: 600;
        font-family: var(--font)!important;
        
    }
    
    .textfield {
        
        font-size: 12pt;
        font-weight: 600;
        font-family: var(--fontTypewriter)!important;
        
    }
    
    .labeltext {
        
        font-size: 12pt!important;
        letter-spacing: 0px!important;
        font-weight: 400!important;
        font-family: var(--font)!important;
        
    }
    
    .progressMeter .totalDesktop {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }

    .progressMeter .doneDesktop {
        
        font-size: 18pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        line-height: 30px!important;
        
    }
    
    .expressionrange {
        
        font-size: 9pt;

    }
    
    .expressionfield {
        
        height: 60px;
        font-weight: 400;
        font-size: 12pt;
        
    }
    
    .sensorNotification {
        
        font-size: 10pt!important;
        font-weight: 600!important;
        font-family: var(--font)!important;
        
    }

    
}

/**********************************************/
/* PART 4 | LIGHT AND DARK MODE               */
/**********************************************/

/*********************************************/
/* 4.1 LIGHT MODE                            */
/*********************************************/

@media (prefers-color-scheme: light) {
  
  .button .buttonStandard {
      
      background: linear-gradient(0deg, var(--bgLight), var(--bgGlassWhite))!important;
      border: 1pt solid var(--lightgrey)!important;
      color: var(--dark)!important;

  }
  
  .button .buttonStandard:hover {
      
      background: var(--bgLightHover)!important;
  }
  
  .progressBar {
      
      background: var(--highLight)!important;
  }
  
  .progressBarTotal {
      
      background: var(--lightgrey)!important;
      
  }
  
  .screenMobile, .screenPortrait, .screenLandscape, .screenDesktop, .progressMeter {
      
      background: none!important;
      border: 1pt solid var(--lightgrey)!important;
      border-radius: 15px!important;
      
  }
  
  .sensorName {
      
      color: var(--dark)!important;
      
  }
  
  .sensorLabel {
      
      color: var(--black)!important;
      
  }
  
  .sensorSpec {
      
      color: var(--highLight)!important;
      
  }
  
  .backgroundCover {
      
      background: var(--white)!important;
      
  }
  
  .checklabel {
      
      color: var(--dark);
      background: linear-gradient(0deg, var(--bgLight), var(--bgGlassWhite))!important;
      border: 1pt solid var(--lightgrey)!important;
      
  }
  
  .checkmark {
    
      position: absolute;
      top: -2px;
      left: 0px!important;
      margin-left: 10px;
      height: 20px!important;
      width: 40px!important;
      top: 50%;
      transform: translate(0, -50%);
      -webkit-appearance: none;
      background: linear-gradient(0deg, var(--white), var(--anchorgrey));
      outline: none;
      border-radius: 10px;
      box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--lightgrey), inset 0 0 3px var(--dark);
    
  }
  
  .checkmark:before {
      
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 20px;
      background: linear-gradient(0deg, var(--lightgrey), var(--white));
      border-radius: 10px;
      transform: scale(.98, .96);
      transition: .2s;
      
  }
  
  .checklabel input:checked ~ .checkmark:before {
       
      left: 10px;
      
  }
  
  .checklabel input:checked ~ .checkmark {
       
      background: var(--themeColor);
      
  }
  
  .checkmark:after {
      
      content: '';
      position: absolute;
      top: calc(50% - 2px);
      left: 20px;
      width: 4px;
      height: 4px;
      background: linear-gradient(0deg, var(--lightgrey), var(--anchorgrey));
      border-radius: 50%;
      transition: .2s;
  }
  
  .checklabel input:checked ~ .checkmark:after {
      
      left: 30px;
      background: var(--themeColor);
      
  }
  
  .checklabel:hover, .checklabel:active {
      
      background: var(--bgLightHover)!important;
      
  }
  
  .radiolabel {
      
      color: var(--dark);
      background: linear-gradient(0deg, var(--bgLight), var(--bgGlassWhite))!important;
      border: 1pt solid var(--lightgrey)!important;
      
  }
  
  .radiomark {
      
      position: absolute;
      top: -2px;
      left: 0px!important;
      margin-left: 10px;
      height: 20px!important;
      width: 20px!important;
      top: 50%;
      transform: translate(0, -50%);
      -webkit-appearance: none;
      background: linear-gradient(0deg, var(--white), var(--anchorgrey));
      outline: none;
      border-radius: 10px;
      box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--lightgrey), inset 0 0 3px var(--dark);
      
  }
  
  .radiolabel input:checked ~ .radiomark {
       
      background: var(--themeColor);
      
  }
  
  .radiomark:before {
      
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: linear-gradient(0deg, var(--lightgrey), var(--white));
      border-radius: 10px;
      transform: scale(.90, .88);
      transition: .2s;
      
  }
  
  .radiomark:after {
      
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      width: 6px;
      height: 6px;
      background: linear-gradient(0deg, var(--lightgrey), var(--anchorgrey));
      border-radius: 50%;
      transition: .2s;
      
  }
  
  .radiolabel:hover, .radiolabel:active {
      
      background: var(--bgLightHover)!important;
      
  }
  
  .radiolabel input:checked ~ .radiomark:after {
      
      background: var(--themeColor);
      
  }
  
  .textfield {
      
      border: 1pt solid var(--lightgrey);
      color: var(--dark);
      
  }
  
  .textfieldlabel {
      
      color: var(--dark);
      background: linear-gradient(0deg, var(--bgLight), var(--bgGlassWhite))!important;
      border-top: 1pt solid var(--lightgrey);
      border-left: 1pt solid var(--lightgrey);
      border-right: 1pt solid var(--lightgrey);

      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      padding: 5px 15px 5px 15px!important;
      
  }
  
  .textfield:focus {
      
      border: 1pt solid var(--themeColor);
  }
  
  .textfield:focus-within {
      
      border: 1pt solid var(--themeColor);
  }
  
  .labeltext {
      
      color: var(--grey)!important;
      
  }
  
  .progressMeter .doneMobile {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .doneLandscape {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .donePortrait {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .doneDesktop {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .totalMobile {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .totalPortrait {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .totalLandscape {
      
      color: var(--dark)!important;
      
  }
  
  .progressMeter .totalDesktop {
      
      color: var(--dark)!important;
      
  }
  
  .expressionmark {
      
      position: absolute;
      top: -2px;
      left: calc(50% - 10px);
      height: 20px!important;
      width: 20px!important;
      top: 50%;
      transform: translate(0, -50%);
      -webkit-appearance: none;
      background: linear-gradient(0deg, var(--white), var(--anchorgrey));
      outline: none;
      border-radius: 10px;
      box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--lightgrey), inset 0 0 3px var(--dark);
      
  }
  
  .expressiontouchlabel input:checked ~ .expressionmark {
       
      background: var(--themeColor);
      
  }
  
  .expressionmark::before {
      
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: linear-gradient(0deg, var(--lightgrey), var(--white));
      border-radius: 10px;
      transform: scale(0.9, 0.88);
      transition: 0.2s;
      
  }
  
  .expressionmark::after {
      
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      width: 6px;
      height: 6px;
      background: linear-gradient(0deg, var(--lightgrey), var(--anchorgrey));
      border-radius: 50%;
      transition: 0.2s;
      
  }
  
  .expressiontouchlabel:hover, .expressiontouchlabel:active {
      
      background: var(--bgLightHover);
      border-radius: 10px;
  }

  
  .expressiontouchlabel input:checked ~ .expressionmark::after {
      
      background: var(--themeColor);
      
  }
  
.expressionfield {
  
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  background: linear-gradient(0deg, var(--bgLight), var(--bgGlassWhite))!important;
  border: 1pt solid var(--lightgrey)!important;
  border-radius: 10px;
  padding: 5px;
  
}

.expressionlabel {
  
  color: var(--dark);
  position: absolute;
  top: 5px;
  left: 10px;
  font-family: var(--font);
  
}

.expressiontouch {
  
  position: relative;
  display: flex;
  flex-wrap: nowrap;

}

.expressiontouchlabel {

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

.sensorNotification {

    color: var(--highLight)!important;
}

}

/*********************************************/
/* 4.2 DARK MODE                             */
/*********************************************/

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

      background: linear-gradient(0deg, var(--bgDark), var(--bgGlassDark))!important;
      border: 1pt solid var(--bgGlassDark)!important;
      color: var(--lightgrey)!important;

  }

  .buttonStandard:hover {

      background: var(--bgDarkHover)!important;
  }
  
  .progressBar {
      
      background: var(--highDark)!important;
  }
  
  .progressBarTotal {
      
      background: var(--black)!important;
      
  }
  
  .screenMobile, .screenPortrait, .screenLandscape, .screenDesktop, .progressMeter {
      
      background: none!important;
      border: 1pt solid var(--grey)!important;
      border-radius: 15px!important;
      
  }
  
  .sensorName {
      
      color: var(--lightgrey)!important;
      
  }
  
  .sensorLabel {
      
      color: var(--lightgrey)!important;
      
  }
  
  .sensorSpec {
      
      color: var(--highDark)!important;
      
  }
  
  .backgroundCover {
      
      background: var(--dark)!important;
  
  }
  
  .checklabel {
      
      color: var(--lightgrey)!important;
      background: linear-gradient(0deg, var(--bgDark), var(--bgGlassDark))!important;
      border: 1pt solid var(--grey)!important;
      
  }
  
  .checkmark {
    
      position: absolute;
      top: -2px;
      left: 0px!important;
      margin-left: 10px;
      height: 20px!important;
      width: 40px!important;
      top: 50%;
      transform: translate(0, -50%);
      -webkit-appearance: none;
      background: linear-gradient(0deg, var(--anchorgrey), var(--dark));
      outline: none;
      border-radius: 15px;
      box-shadow: 0 0 0 2px var(--grey), 0 0 0 3px var(--dark), inset 0 0 5px var(--black);
    
  }
  
  .checkmark:before {
      
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 20px;
      background: linear-gradient(0deg, var(--black), var(--dark));
      border-radius: 15px;
      transform: scale(.98, .96);
      transition: .2s;
      
  }
  
  .checklabel input:checked ~ .checkmark:before {
       
      left: 10px;
      
  }
  
  .checklabel input:checked ~ .checkmark {
       
      background: var(--themeColor);
      
  }
  
  .checkmark:after {
      
      content: '';
      position: absolute;
      top: calc(50% - 2px);
      left: 20px;
      width: 4px;
      height: 4px;
      background: linear-gradient(0deg, var(--anchorgrey), var(--grey));
      border-radius: 50%;
      transition: .2s;
  }
  
  .checklabel input:checked ~ .checkmark:after {
      
      left: 30px;
      background: var(--themeColor);
      
  }
  
  .checklabel:hover, .checklabel:active {
      
      background: var(--bgDarkHover)!important;
      
  }
  
  .radiolabel {
      
      color: var(--lightgrey);
      background: linear-gradient(0deg, var(--bgDark), var(--bgGlassDark))!important;
      border: 1pt solid var(--grey)!important;
      
  }
  
  .radiomark {
      
      position: absolute;
      top: -2px;
      left: 0px!important;
      margin-left: 10px;
      height: 20px!important;
      width: 20px!important;
      top: 50%;
      transform: translate(0, -50%);
      -webkit-appearance: none;
      background: linear-gradient(0deg, var(--black), var(--dark));
      outline: none;
      border-radius: 10px;
      box-shadow: 0 0 0 2px var(--grey), 0 0 0 3px var(--dark), inset 0 0 3px var(--black);
      
  }
  
  .radiolabel input:checked ~ .radiomark {
       
      background: var(--themeColor);
      
  }
  
  .radiomark:before {
      
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: linear-gradient(0deg, var(--black), var(--dark));
      border-radius: 10px;
      transform: scale(.90, .88);
      transition: .2s;
      
  }
  
  .radiomark:after {
      
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      width: 6px;
      height: 6px;
      background: linear-gradient(0deg, var(--anchorgrey), var(--grey));
      border-radius: 50%;
      transition: .2s;
      
  }
  
  .radiolabel:hover, .radiolabel:active {
      
      background: var(--bgDarkHover);
  }

  .radiolabel input:checked ~ .radiomark {
      
      background-color: var(--highDark);
    
  }
  
  .radiolabel:hover, .radiolabel:active {
      
      background: var(--bgDarkHover)!important;
      
  }
  
  .radiolabel input:checked ~ .radiomark:after {
      
      background: var(--themeColor);
      
  }
  
  
  .textfield {
      
      border: 1pt solid var(--grey);
      color: var(--lightgrey);
      
  }
  
  .textfieldlabel {
      
      color: var(--lightgrey);
      background: linear-gradient(0deg, var(--bgDark), var(--bgGlassDark))!important;
      border-top: 1pt solid var(--grey);
      border-left: 1pt solid var(--grey);
      border-right: 1pt solid var(--grey);
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      padding: 5px 15px 5px 15px!important;
      
  }
  
  .textfield:focus {
      
      border: 1pt solid var(--themeColor);
  }
  
  .textfield:focus-within {
      
      border: 1pt solid var(--themeColor);
  }
  
  .progressMeter .doneMobile {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .doneLandscape {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .donePortrait {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .doneDesktop {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .totalMobile {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .totalPortrait {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .totalLandscape {
      
      color: var(--lightgrey)!important;
      
  }
  
  .progressMeter .totalDesktop {
      
      color: var(--lightgrey)!important;
      
  }
  
  .labeltext {
      
      color: var(--lightgrey)!important;
      
  }
  
  .expressionmark {
      
      position: absolute;
      top: -2px;
      left: calc(50% - 10px);
      height: 20px!important;
      width: 20px!important;
      top: 50%;
      transform: translate(0, -50%);
      -webkit-appearance: none;
      background: linear-gradient(0deg, var(--black), var(--dark));
      outline: none;
      border-radius: 10px;
      box-shadow: 0 0 0 2px var(--grey), 0 0 0 3px var(--dark), inset 0 0 3px var(--black);
      
  }
  
  .expressiontouchlabel input:checked ~ .expressionmark {
       
      background: var(--themeColor);
      
  }
  
  .expressionmark::before {
      
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: linear-gradient(0deg, var(--black), var(--dark));
      border-radius: 10px;
      transform: scale(0.9, 0.88);
      transition: 0.2s;
      
  }
  
  .expressionmark::after {
      
      content: '';
      position: absolute;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      width: 6px;
      height: 6px;
      background: linear-gradient(0deg, var(--anchorgrey), var(--grey));
      border-radius: 50%;
      transition: 0.2s;
      
  }
  
  .expressiontouchlabel:hover, .expressiontouchlabel:active {
      
      background: var(--bgDarkHover)!important;
      border-radius: 10px;
  }

  
  .expressiontouchlabel input:checked ~ .expressionmark::after {
      
      background: var(--themeColor);
      
  }
  
.expressionfield {
  
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  background: linear-gradient(0deg, var(--bgDark), var(--bgGlassDark))!important;
  border: 1pt solid var(--grey)!important;
  border-radius: 10px;
  padding: 5px;
  
}

.expressionlabel {
  
  color: var(--lightgrey);
  position: absolute;
  top: 5px;
  left: 10px;
  font-family: var(--font);
  
}

.expressiontouch {
  
  position: relative;
  display: flex;
  flex-wrap: nowrap;

}

.expressiontouchlabel {

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

.sensorNotification {

    color: var(--highDark)!important;

}
  
}

/**********************************************/
/* PART 5 | EXCEPTION HANDLING                */
/**********************************************/