/* $Id $ */

:root {
    --color0: @color0;
    --color1: @color1;
    --color2: @color2;
    --color3: @color3;
    --color4: @color4;
    --colorUpdatePending: @colorUpdatePending;
    --color-update-pending: @colorUpdatePending;
    --color-active-background: @color-active-background;
    --color-active-text: @color-active-text;
}

.color0 { background-color: @color0; color: @color0-text; }
.color1 { background-color: @color1; color: @color1-text; }
.color2 { background-color: @color2; color: @color2-text; }
.color3 { background-color: @color3; color: @color3-text; }
.color4 { background-color: @color4; color: @color4-text; }

html { font-size: 16px; }
body { background-color: @pagebackground; font-size: 1rem; }
body,p,div { font-family: @fonts; }
input,button,select { font-family: @fonts; }
body,div,p,h1,h2,h3,ul,li,canvas { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

.gridster { margin: 0 auto; }
.gridster .gs-w { cursor: pointer; overflow: hidden; }
.gridster ul { list-style-type: none; }
.pull-left { float: left; }
.clearfix::after { content: ""; clear: both; display: table; }

.widget {
    position: static;
    // display: -webkit-flex;
    // display: -moz-flex;
    // display: flex;
    // -webkit-flex-direction: column;
    //    -moz-flex-direction: column;
    //         flex-direction: column;
    min-height: 100%; height: 100%; width: 100%;
    padding: 0 0;
    font-size: 0.875rem; line-height: 1rem;
}

.widget .align-center {
    -webkit-align-items: center;
       -moz-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
}

/*

.widget .widget-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.widget-content .widget-body {
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.widget-content .widget-body-full {
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.widget-content .widget-title {
    position: absolute;
    font-size: 1rem; line-height: 1.25rem;
    font-weight: normal;
    top: 4px;
    left: 8px;
    z-index: 1;
}

.widget-content .widget-value {
    position: absolute;
    font-size: 0.67rem;
    font-weight: normal;
    line-height: 1.25em;
    top: calc(1.25rem + 4px);
    left: 8px;
    z-index: 1;
}

.widget-content .widget-footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 1;
}
*/

.widget.nodata { background-color: #101010 !important; }

.widget .bi::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: text-bottom;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.widget .inline { display: inline-flex; }

/* Light-weight grid system; requires no size breaks */

.widget .flex-container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.widget .col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.widget .col-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.widget .col-3 { flex: 0 0 25%; max-width: 25%; }
.widget .col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.widget .col-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.widget .col-6 { flex: 0 0 50%; max-width: 50%; }
.widget .col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.widget .col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.widget .col-9 { flex: 0 0 75%; max-width: 75%; }
.widget .col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.widget .col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.widget .col-12 { flex: 0 0 100%; max-width: 100%; }
.widget .col-auto { flex: 0 0 min-content; }

.widget .offset-1 { margin-left: 8.333%; }
.widget .offset-2 { margin-left: 16.666%; }
.widget .offset-3 { margin-left: 25%; }
.widget .offset-4 { margin-left: 33.333%; }
.widget .offset-5 { margin-left: 41.666%; }
.widget .offset-6 { margin-left: 50%; }
.widget .offset-7 { margin-left: 58.333%; }
.widget .offset-8 { margin-left: 66.666%; }
.widget .offset-9 { margin-left: 75%; }
.widget .offset-10 { margin-left: 83.333%; }
.widget .offset-11 { margin-left: 91.666%; }
.widget .offset-auto { margin-left: min-content; }

.widget .text-left { text-align: left; }
.widget .text-center { text-align: center; }
.widget .text-right { text-align: right; }

.widget .spacer-1 { height: 0.25rem; width: 1px; }
.widget .spacer-2 { height: 0.50rem; width: 1px; }
.widget .spacer-3 { height: 0.75rem; width: 1px; }
.widget .spacer-4 { height: 1.00rem; width: 1px; }

/* DEPRECATED -- TO BE REMOVED */

.widget-clock { }
.widget-clock h1 { font-size: 6em; font-weight: bold; line-height: 1em; }
.widget-clock div#date { display: block; font-size: 2em; }

.widget-camera { }
.widget-camera .controls { color: #ffffff; font-size: 3em; position: absolute; top: 10px; left: 10px; }
.widget-camera .controls .control { float:left; margin-left: 16px; }
.widget-camera .overlay { clear: both; font-size: 1em; color: #ffff00; position: absolute; left: 10px; bottom: 10px; }

.widget-slideshow { }
.widget-slideshow .controls { color: #ffffff; font-size: 3em; position: absolute; top: 10px; left: 10px; }
.widget-slideshow .controls .control { float:left; margin-left: 16px; }
.widget-slideshow .overlay { clear: both; font-size: 1em; color: #ffff00; position: absolute; left: 10px; bottom: 10px; }

.widget-rssfeed { }
.widget-rssfeed h1 { font-size: 1em; font-weight: bold; line-height: 1.3em; margin: 0 0 8 0; }
.widget-rssfeed #wrapper { margin: 8 8 8 8; }
.widget-rssfeed p { font-size: 0.667em; line-height: 1.2em; margin: 0 0 20 0; text-align: left; }
.widget-rssfeed img { float: left; }
.widget-rssfeed a { text-decoration: none; color: inherit; }

.widget-thermostat { }
.widget-thermostat h1 { font-size: 2em; font-weight: bold; }
.widget-thermostat #temperature { font-size: 5em; }
.widget-thermostat #setpoints { margin-top: 12px; width: 90%; }
.widget-thermostat #setpoints #heatsp { float: left; width: 30%; font-size: 2em; text-align: left; }
.widget-thermostat #setpoints #state { float: left; width: 40%; font-size: 1.5em; text-align: center; }
.widget-thermostat #setpoints #coolsp { float: right; font-size: 2em; text-align: right; }
.widget-thermostat #setpoints #cool-ico { color: #0030c0; }
.widget-thermostat #setpoints #heat-ico { color: #a00000; }
.widget-thermostat .therm-heating { color: red; }
.widget-thermostat .therm-cooling { color: blue; }
.widget-thermostat .therm-fanonly { color: #003366; }
