BODY {
    margin: 0px;
    background: white;
    font-family: "Rubik", "Lucida", "Arial", sans-serif;
    text-rendering: optimizelegibility;
}

DIV {
    font-weight: 300;
    font-size: 16px;
}

PRE {
    font-family: "Rubik", "Lucida", "Arial", sans-serif;
}

BLOCKQUOTE {
    margin: 0px;
    padding: 0px;
    padding-left: 20px;
}

H2 {
    font-weight: 100;
    font-size: 24px;
    color: gray;
}

H3 {
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    margin: 5px auto;
}

H4 {
    font-weight: 400;
    font-size: 15px;
    color: #666666;
    margin: 5px auto;
}

P {
    margin: 12px auto;
}

A {
    text-decoration: none;
}

LI {
    padding-top: 5px;
}

HR {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

TABLE {
    border-spacing: 0px;
}

TEXTAREA {
    background-color: white;
    border:solid 1px lightgray;
    border-radius: 5px;
    color: black;
    cursor: auto;
    font-family: "consolas", "lucida console", "courier new", monospace;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 12px;
    min-height: 32px;
}

.height100 {
    height: 100px;
}

.center {
    text-align: center;
}

.struct {
    font-family: "consolas", "lucida console", "courier new", monospace;
    font-size: 14px;
    padding: 8px;
    white-space: pre;
}

SELECT {
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid lightgray;
    border-radius: 5px;
    color: black;
    margin: 0px;
    font-size: inherit;
    padding: 6px 40px 6px 15px;
    font-family: "Rubik", "Lucida", "Arial", sans-serif;
}

INPUT {
    background: white;
    border-radius: 5px;
    border: 1px solid lightgray;
    color: black;
    cursor: auto;
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 6px 15px 6px 15px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

INPUT[type=submit] {
    -webkit-box-shadow: rgb(111, 197, 245) 0px 1px 1px 0px inset;
    -webkit-font-smoothing: subpixel-antialiased;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(55, 170, 234);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(55, 170, 234)), to(rgb(17, 126, 210)));
    background-image: linear-gradient(180deg,  rgb(55, 170, 234), rgb(17, 126, 210));
    background-origin: padding-box;
    border-bottom-color: rgb(0, 88, 156);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color:  rgb(12, 117, 187);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(12, 117, 187);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(25, 146, 218);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: rgb(111, 197, 245) 0px 1px 1px 0px inset;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    padding: 6px 20px 6px 20px;
    text-align: center;
    text-shadow: rgb(0, 102, 153) 0px -1px 1px;
}

SPAN.description {
    font-weight: normal;
}

.button-disabled {
    pointer-events: none; /* Disables the button completely. Better than just cursor: default; */
    opacity: 0.5;
}

.button {
    -webkit-box-shadow: rgb(111, 197, 245) 0px 1px 1px 0px inset;
    -webkit-font-smoothing: subpixel-antialiased;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(55, 170, 234);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(55, 170, 234)), to(rgb(17, 126, 210)));
    background-image: linear-gradient(180deg,  rgb(55, 170, 234), rgb(17, 126, 210));
    background-origin: padding-box;
    border-bottom-color: rgb(0, 88, 156);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color:  rgb(12, 117, 187);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(12, 117, 187);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(25, 146, 218);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: rgb(111, 197, 245) 0px 1px 1px 0px inset;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    padding: 6px 20px 6px 20px;
    text-align: center;
    text-shadow: rgb(0, 102, 153) 0px -1px 1px;
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 4px;
}
   /*
INPUT[type=submit]:hover {
    box-shadow: 0px 0px 5px gray;
}*/

.b2c_button {
    padding: 6px 12px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.b2c_button:active {
    transform: translateY(2px);
}

.b2c_fl {
    float: right;
    margin: -0.22em 0;
}

.table {
    border-right: solid 1px lightgray;
    background: #f8f8f8;
}
.table TR:nth-child(even) {
    /*background: #f0f0f0;*/
}
.table TR:nth-child(odd) {
    /*background: #f7f7f7;*/
}

.trselected {
    background: #dff0d8;
}

.table TH {
    border-bottom: solid 1px lightgray;
    border-left: solid 1px lightgray;
}

.table TD {
    color: black;
    padding: 12px;
    font-weight: 300;
    font-size: 16px;
    border-bottom: solid 1px lightgray;
    border-left: solid 1px lightgray;
}

TD.tsection {
    background: white;
    height: 40px;
    font-size: 22px;
    font-weight: 100;
    color: gray;
    text-align: left;
    padding: 35px 12px 8px 12px;
}

.table CAPTION {
    text-align: left;
    background: lightgray;
    color: darkslategray;
    font-size: 22px;
    padding: 6px;
    border-bottom: solid 1px gray;
    border-top: solid 1px gray;
}

.table THEAD TD {
    background: lightgray;
    color: darkslategray;
    font-weight: 400;
    font-size: 20px;
    padding: 12px;
    /*border-bottom: solid 1px gray;*/
}
.table TFOOT TD {
    background: lightgray;
    color: black;
    padding: 12px;
    font-weight: 400;
    font-size: 16px;
    /*border-top: solid 1px gray;*/
}

TD.tdleft {
    width: 200px;
    text-align: right;
    padding-right: 20px;
    font-size: 18px;
    color: gray;
}

TD.tdleft-tall {
    vertical-align: top;
    padding-top: 5%;
}

.tdiv {
    background:  rgb(240, 240, 240);
    height: 20px;
    font-size: 10px;
    color: gray;
    text-align: center;
}

.account-history-full {
    background-color: white;
}

.account-history TD {
    font-size: 13px;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    height: 48px;
    vertical-align: top;
}

.account-history THEAD TD {
    font-size: 13px;
    padding: 2px;
    text-align: center;
}

.account-history TFOOT TD {
    text-align: right;
    vertical-align: top;
}

.account-history .valueChanged, div.valueChanged {
    background-color: #ffeebb;
}

div.valueChanged {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: solid 1px lightgray;
}

table.access-values {
    width: auto!important;
    min-width: 25em;
}

table.access-values TD, table.access-values TH {
    border: solid 1px lightgray;
    height: auto;
    padding: 2px;
}

table.access-values TD.key {
    width: 12em;
}

table.access-values TD.value {
    width: 2em;
    text-align: center;
}

table.changed-values {
    width: auto!important;
    min-width: 25em;
}

table.changed-values TD {
    border: solid 1px lightgray;
    height: auto;
}

table.changed-values TD.key {
    width: 5em;
    font-weight: bold;
}

.hidden {
    display: none;
}

.products TD {
    font-size: 13px;
    padding: 5px;
    padding-left: 6px;
    padding-right: 6px;
}

.nav_highlight {
    background: #dff0d8;
}

TR.section_highlight TD {
    background: #9bd6ff;
}

.cc {
    text-align: right;
    font-family: monospace;
}

.ccl {
    text-align: left;
    font-family: monospace;
}

.log {
    font-size: 10px;
    font-family: monospace;
    padding: 1px;
}


.table-div {
    height: 4px;
    background: white;
    padding: 0;
}

.non-matched {
    opacity: 0.4;
}

.row-disabled {
    background-color: pink;
}

.row-separator {
    height:8px;
    background:white;
    padding:0;
    border:none;
}

.products THEAD TD {
    font-size: 13px;
    padding: 4px;
    text-align: center;
}

.products TFOOT TD {
    font-size: 13px;
    padding: 4px;
    text-align: right;
    vertical-align: top;
}

.header {
    padding: 20px 20px 0px 20px;
    background: darkslategray;
}

.headerdev {
    padding: 20px 20px 0px 20px;
    background: darkgreen;
}

.logo {
    padding-bottom: 10px;
    padding-left: 0px;
    width:100%;
}
.logo IMG {
    height: 24px;
}
.logo TD {
    color: lightgray;
    vertical-align: bottom;
}
.logo A {
    color: white;
}
.logo TD:last-child {
    text-align: right;
}

.menu {
    border: none;
    margin-top: 10px;
}
.menuitem {
    color: white;
    padding: 10px 8px 6px 8px;
    font-weight: 300;
    font-size: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /*background: black;*/
    display: inline-block;
}
.menuitem A {
    color: white;
}
.menuitemselected {
    background: lightgray;
    color: white;
    padding: 12px;
    font-weight: 300;
    font-size: 16px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.menuitemselected A {
    color: black;
}


.subheader {
    padding: 10px 20px 0px 20px;
    background: lightgray;
}
.submenu {
    border: none;
    border-spacing: 0px;
}
.submenuitem {
    color: black;
    margin-right: 20px;
    padding: 8px 8px 6px 8px;
    font-weight: 100;
    font-size: 16px;
    /*border: 1px solid gray;*/
}
.submenuitem A {
    color: black;
}
.submenuitemselected {
    color: gray;
    padding: 12px;
    font-weight: 100;
    font-size: 16px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: white;

}
.submenuitemselected A {
    color:black;
}

.content.login {
    font-size: 14px;
}
.content.login table {
    border: none;
    margin: 0 auto;
    width: auto;
    max-width: 34em;
}
.logintable {
    background-color: #f0f0f0;
    border-radius: 10px;
    border: solid 1px lightgray;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.0976563) 0px 2px 2px 0px;
}
.logintable TD {
    padding: 15px;
}
INPUT[type=submit].login, INPUT[type=button].login {
    background-color: #f37656;
    color: white;
    border: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    border-radius: 3px;
    font-weight: normal;
    cursor: pointer;
}

.errors {
    color: darkred;
    padding: 5px 10px 5px 10px;
    background: lightpink;
    margin: 10px 0px 10px 0px;
}

.error {
    color: red;
    font-weight: normal;
    font-size: 13px;
    border-radius: 10px;
    padding: 6px;
    background: lightpink;
    display: inline-block;
}

.messages {
    color: green;
    padding: 5px 10px 5px 10px;
    background: lightgreen;
    margin: 10px 0px 10px 0px;
    line-break: normal;
}

.messages.warn {
    color: brown;
    background: lightyellow;
    border-top: solid lightgray thin;
    border-bottom: solid lightgray thin;
}

.messages.info.icon {
    z-index: 6;
    min-width: 28px;
    top: 16px;
}

.messages.info {
    position: absolute;
    z-index: 5;
    top: 40px;
    right: 10px;
    float: right;
    min-width: 300px;
    color: darkgray;
    background: lightyellow;
    border: solid lightgray thin;

    max-height: 800px;
    overflow-y: auto;
}

.content {
    padding: 20px;
}

.footer {
    padding: 20px;
    /*padding: 10px 20px 10px 20px;*/
    background: #f0f0f0;
    color: darkgray;
    font-size: 14px;
}
.login .footer {
    position: absolute;
    bottom: 0;
    width: 100%; /* Fallback for older browsers */
    width: -moz-available; /* For Firefox */
    width: -webkit-fill-available; /* For WebKit-based browsers like Safari and Chrome */
    width: stretch; /* Standard property for future compatibility */
}

#output0 {
    width: 600px;
    height: 300px;
}

.note {
    font-size: 12px;
    padding: 0px 20px 10px 20px ;
}

#calibration {
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    box-shadow: 5px 5px 5px #666666;
    text-align: center;
}

#calibrationWindow {
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 600px;
    height: 690px;
    background: white;
    box-shadow: 5px 5px 5px #666666;
    text-align: center;
}

#calibration CANVAS {
    padding-bottom: 10px;
    position: relative;
}

#calibration A {
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
}

.caption {
    margin-top: 10px;
    font-size:13px;
    color: gray;
}

.warning {
    margin-top: 10px;
    font-size:13px;
    color: red;
    font-weight: bold;
}


.diagram-window {
    position: absolute;
    background: white;
    display: none;
    border: solid 1px black;
    box-shadow: 5px 5px 5px #666666;
    text-align: center;
}

.parameters {
    /*background: #e0e0e0;*/
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
}

.parameters TH {
    padding: 6px 10px 6px 10px;
    text-align: left;
    font-size: 16px;
    background: lightgray;
}

.parameters TD > IMG {
    opacity: 0.4;
}

.parameters INPUT {
    font-size: 13px;
    padding: 4px;
}
.parameters SELECT {
    font-size: 13px;
    padding: 4px;
    padding-right: 32px;
}

.parameters .param-info {
    font-size: 12px;
    font-weight: 100;
    background: lightgray;
    color: gray;
}

TD.nopadding {
    /*padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;*/
}

.parameters TD {
    padding: 6px 10px 6px 10px;
    font-size: 16px;
    border-left: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

#add_parameter {
    display: inline-block;
    margin-top: 8px;
}


#add_sensor {
    display: inline-block;
    margin-top: 8px;
}

.icon-preview {
    width: 30px;
    height: 30px;
    background: lightgray;
    border-radius: 15px;
    overflow: visible;
}

.icon-preview:hover {
    background: black;
}

.icon-preview > IMG {
    background: white;
    border: solid 1px lightgray;
    padding: 0;
    z-index: 1000;
    position: relative;
    left: 50px;
    top: -13px;
}


.image-button {
    width: 20px;
    vertical-align: middle;
    padding: 2px 4px 2px 4px;
}


.delete-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 3px;
    margin-left: 20px;
    background-image: url(/static/admin/delete.png);
    -webkit-background-size: 24px 24px;
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    float: right;
    z-index: 1000;
}

.beta {
    background-image: url(/static/admin/beta-badge.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 35px;
}

.extfw {
    background-image: url(/static/admin/evo-badge.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 35px;
}

.option {
    display: inline-block;
    background: lightgray;
    border-radius:  7px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.option SPAN {
    display: block;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.option DIV {
    padding: 8px;
    display: block;
}

.row-locked {
    background-color: #e0ffd0;
}

.IN_PRODUCTION TD {
    background: #ffe7e7;
}
.COMPLETED TD {
    background: #ffffe7;
}
.SHIPPED TD {
    background: #e7ffe7;
}
.HIDDEN TD {
    background: white;
    opacity: 0.5;
}

TD.dev-info {
    background: #fff2c1;
}

TD.admin-only {
    background: #f8e9cf;
}

TR.admin-only {
    background: #f8e9cf;
}

DIV.admin-only {
    background: #f8e9cf;
    padding: 10px;
    border-left: 10px solid #ffc800;
}

TR.admin-only TD:nth-child(1) {
    border-left: 10px solid #ffc800;
}

.table TD.critical {
    background: #fff3f3;
    border-left: 10px solid red;
}

.table TD.criticalnobg {
    border-left: 10px solid red;
}
.row-hidden {
    background: pink;
}

.fitting {
    display: inline-block;
    padding: 10px;
    margin-bottom: 20px;
    border: solid 1px lightgray;
    background: lightgray;
    border-radius: 10px;
}

.row-highlight {
    background-color: lightgreen;
}

.artifact-link {
}
.firmware_list {
    display: none;
}

@media (max-width: 1156px) {
    table.menu {
        width: 1096px;
    }
}
@media (max-width: 1128px) {
    table.menu {
        width: 1030px;
    }
    .content table {
        width: 1060px;
    }
}
@media (max-width: 1062px) {
    table.menu {
        width: 956px;
    }
    .content table {
        width: 1004px;
    }
}
@media (max-width: 996px) {
    table.menu {
        width: 864px;
    }
    .content table {
        width: 940px;
    }
}
@media (max-width: 930px) {
    table.menu {
        width: 764px;
    }
    .content table {
        width: 840px;
    }
}
@media (max-width: 792px) {
    table.menu {
        width: 666px;
    }
    .content table {
        width: 700px;
    }
}
@media (max-width: 694px) {
    table.menu {
        width: 644px;
    }
    .content table {
        width: 640px;
    }
}
@media (max-width: 675px) {
    table.menu {
        width: 528px;
    }
}
@media (max-width: 560px) {
    table.menu {
        width: 494px;
    }
}
@media (max-width: 520px) {
    table.menu {
        width: 412px;
    }
}
@media (max-width: 440px) {
    table.menu {
        width: 390px;
    }
}
@media (max-width: 418px) {
    table.menu {
        width: 354px;
    }
}
@media (max-width: 382px) {
    table.menu {
        width: 334px;
    }
}

.curve_overview {
    display: inline-flex;
    border: solid thin lightgray;
    vertical-align: middle;
    background-color:white;
}

.casambi-brand-styling {
    font-family: "nimbus-sans", sans-serif;
}

.casambi-brand-styling h1 {
    font-size: 35px;
    font-weight: 700;
}

.casambi-brand-styling input[type=text],
.casambi-brand-styling input[type=password] {
    border: 1px solid rgba(235, 83, 36, .5);
    border-radius: .315rem;
    color: #000;
    padding: .688rem 1rem;
    width: 100%;
}

.casambi-brand-styling input[type=text]:focus,
.casambi-brand-styling input[type=password]:focus {
    background-color: rgba(231, 116, 37, .1);
    border-color: #eb5324;
    outline: 0;
}

.casambi-brand-styling input[type=submit],
.casambi-brand-styling input[type=button] {
    background: #e77425;
    border: 1px solid #e77425;
    border-radius: 12.5rem;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .8rem 1.5rem;
    text-align: center;
    text-decoration: none;
}

.casambi-brand-styling .small-top-margin {
    margin-top: 5px;
}

.casambi-brand-styling .input-label {
    margin-bottom: 8px;
}