[type="checkbox"] {
    position: relative;
    left: 30px;
    top: 0px;
    z-index: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  [type="checkbox"] + label {
    position: relative;
    display: block;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    padding-left:75px;
    position: relative;
    margin-top: -20px;
  }
  [type="checkbox"] + label:before {
    width: 60px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid #ddd;
    background-color: grey;
    content: "";
    margin-right: 15px;
    transition: background-color 0.5s linear;
    z-index: 5;
    position: absolute;
    left: 0px;
  }
  [type="checkbox"] + label:after {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #fff;
    content: "";
    transition: margin 0.1s linear;
    box-shadow: 0px 0px 5px #aaa;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 10;
  }
  [type="checkbox"]:checked + label:before {
    background-color: #FA6600;
  }
  [type="checkbox"]:checked + label:after {
    margin: 0 0 0 30px;
  }

input:invalid {
    background-color: rgb(153, 52, 5);
}

input:valid {
    border: 1px solid #555;
}

input.config {
    background-color: #5f5f5f;
    color: white;
    border: 1px solid #555;
    margin-top: 7px;
    font-size: 20px;
    height: 44px;
    width: 50%;
}

input:focus {
   border: 1px solid #555;

}

div.connectingOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 80;
    background: #090909;
    opacity: 1.00;
    margin: 0;
    padding: 0;
    bottom: 0;
    color: #6e6e6e;
    font-family: Arial, monospace;
    font-size: 2vmax;
    text-align: center;
    font-weight: normal;
    visibility: hidden;
}

div.UpdateOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 101;
    background: #090909;
    margin: 0;
    padding: 0;
    bottom: 0;
    color: #FA6600;
    font-family: Arial, monospace;
    font-size: 4vmax;
    text-align: center;
    font-weight: bold;
    visibility: hidden;
}

div.menuStyle {
    position: absolute;
    bottom: 0px;
    z-index: 100;
    background: rgb(17, 17, 17);
    ;
    width: 100%;
    height: 10%;
    padding-top: 5px;
    padding-bottom: 5px;
}

div.gear {
    color: #ee3636;
    font-family: Arial;
    font-weight: bold;
    font-size: 10vmax;
    display: table-cell;
    text-align: left;
    height: 50px;
    min-width: 80px;
}

div.values {
    color: white;
    font-family: Arial, monospace;
    font-size: 5vmax;
    text-align: right;
    display: table-cell;
}

div.imgbar {
    color: white;
    font-family: Arial, monospace;
    font-size: 5vmax;
    text-align: left;
    display: table-cell;
}

div.description {
    color: white;
    font-family: Arial;
    font-size: 2vmax;
    text-align: left;
    display: table-cell;
    padding-left: 3px;
    width: 0px;
}

div.digitMeter {
    color: white;
    font-family: Arial, monospace;
    font-size: 24vmax;
    text-align: right;
    display: table-cell;
}


hr.hr1 {
    border: 0;
    height: 2px;
    background: #555555;
}

div.wrap {
    display: table;
    width: 100%;
}

div.hspacer {
    color: white;
    font-family: Arial, monospace;
    font-size: 5vmax;
    text-align: center;
    display: table-cell;
    width: 100%;
}

div.digihspacer {
    display: table-cell;
    width: 10%;
}

canvas.rpm {
    display: block;
    margin: auto;
    margin-top: 4px;
    margin-bottom: 2vmax;
    padding: 0;
}

canvas.progress {
    height: 30px;
    border: 1px solid #FA6600;
    margin: 10px;
    margin-top: 30px;
    padding: 1px;
    width: 90%;
}

canvas.fuel {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 50px;
    background-color: #36a7ee;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

div.overallframe {
    margin: 0px;

}

div.configScreenFrame {
    overflow-y: scroll; /* Add the ability to scroll */
    overflow-X: hidden;
    margin: 0px;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 90;
    background-color: #090909;
}


div.appInfoScreenFrame {
    overflow-y: scroll; /* Add the ability to scroll */
    overflow-X: hidden;
    margin: 0px;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 90;
    background-color: #090909;
  }
  
div.tripScreenFrame {
    overflow-y: scroll; /* Add the ability to scroll */
    overflow-X: hidden;
    margin: 0px;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 90;
    background-color: #090909;
}

div.infoScreenFrame {
    overflow-y: scroll; /* Add the ability to scroll */
    overflow-X: hidden;
    margin: 0px;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 89;
    background-color: #090909;
}

div.diagScreenFrame {
    overflow-y: scroll; /* Add the ability to scroll */
    overflow-X: hidden;
    margin: 0px;
    padding: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 77;
    background-color: #090909;
}

div.driveScreenFrame {
    margin: 5px;
    padding: 0px;
    position: fixed;
    width: 97%;
    height: 100%;
    z-index: 78;
}

div.blockElement {
    margin: 15px;
    padding: 15px;
    background-color: #111111;
    border: 1px solid #313131;
    border-radius: 3px;
    color: #e1e1e1;
    font-family: Arial, monospace;
}

div.blockElementButton {
    margin: 15px;
    padding: 15px;
    background-color: #111111;
    border: 1px solid #FA6600;
    border-radius: 3px;
    color: #e1e1e1;
    font-family: Arial, monospace;
}

div.blockElementHeader {
    font-family: Arial, monospace;
    font-weight: bold;

    color: #e1e1e1;
}

div.blockElementTitelHeader {
    font-family: Arial, monospace;
    font-weight: bold;

    color: #FA6600;
}



button.menu {
    width: 20%;
    height: 100%;
    float: left;
    border: 1px solid rgb(17, 17, 17);
    font-size: 24px;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: grey;
    border-radius: 4px;
}

button {
    height: 45px;
    border: 1px solid rgb(17, 17, 17);
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: grey;
    border-radius: 4px;
}

button.menu:focus {
    background-color: #36a7ee;
}

button.menu:active {
    background-color: #FA6600;
}


button:hover {
    background-color: #36a7ee;
}

button:active {
    background-color: #FA6600;
}

.topSpacer {
    margin-top: 10vmax;
}

.topSpacer2 {
    margin-top: 15vmax;
}

.staticHint {
    margin: 10px;
    padding: 2px;
    border: 2px solid #FA6600;
}

.pulsingHint {
    margin: 10px;
    padding: 2px;
    border: 2px solid #FA6600;
    animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

.pulsingImage {
    width: 30vmax; 
    filter: invert(42%) sepia(11%) saturate(4%) hue-rotate(30deg) brightness(100%) contrast(91%); 
    #filter: invert(39%) sepia(94%) saturate(1706%) hue-rotate(3deg) brightness(101%) contrast(100%);
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 2px;
    border: 0px solid #FA6600;
    animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
    to {
        opacity: 0;
    }
}