/* Use with Orange Tree theme and switch-leftborder & slider-leftborder
   custom widgets from https://community.openhab.org/t/overall-skin-based-on-the-orange-tree-theme-with-custom-widgets-and-styles/31307 */

/* Override some variables */
:root {
    --primary-color: #ff9c27;
    --chart-stroke: #123;
    --chart-fill: #61635e;
    --chart-tooltip: #000;
    --widget-box-shadow: none;
    --box-bg: none;
}

/* Don't uppercase drawer menu entries */

.drawer ul.menu li {
    text-transform: none !important;
}

/* Graph overrides */

.x-axis g.tick:nth-child(4n+4),
.x-axis g.tick:nth-child(4n+2) {
    display: none;
}

.y-axis g.tick:nth-child(2n+1),
.y2-axis g.tick:nth-child(2n+1) {
    display: none;
}

.chart-legend {
    display: none;
}

.chart-content {
    height: calc(100% + 1.5em) !important;
}

.dot-series .dot {
    display: none;
}

.dot-series .dot:nth-child(45n) {
    display: inherit !important;
    stroke: var(--primary-color);
    fill: var(--primary-color);
    r: 1;
}

.area-series {
    fill: var(--chart-fill) !important;
    stroke: var(--chart-fill) !important;
}

.line-series {
    stroke: var(--chart-fill) !important;
}

/* Overrides for the label widget */

.labelwidget-content {
    margin: auto;
    width: 100%;
    text-align: left;
    font-size: 17px;
    font-weight: bold;
}

/* Overrides for the dummy widget */

.dummy-content small {
    font-size: 0.5em;
    vertical-align: super;
}

.dummy-content {
    text-align: left;
}

.dummy .icon.backdrop {
    right: 0;
}

.dummy-content span:not(.value) {
    font-size: 13px;
}

/* Styles for the custom items */

.leftborder {
    float: left;
    margin: 8px 10px 10px 0;
    height: 2.5em;
    width: 7px;
    border-left: #646361 solid 2px;
    border-top: #646361 solid 2px;
    border-bottom: #646361 solid 2px;
}

.leftborder-label {
    text-align: left;
    font-size: 13px;
    margin-bottom: 8px;
}

.switch-leftborder .btn-primary {
    background-color: var(--primary-color);
    border-color: black;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: black;
}
.switch-leftborder .btn-primary:active {
    background-color: hsl(29, 100%, 50%);
    color: black;
}
.switch-leftborder .btn-default {
    background-color: #c2c7c3;
    border-color: black;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: black;
}

/* RZSlider overrides for the custom widget */

.slider-leftborder .rzslider {
    margin-top: 5px;
    margin-left: 0;
}

.slider-leftborder .rzslider .rz-pointer {
    width: 16px;
    height: 16px;
    top: -6px;
    background-color: #c2c7c3;
}

.slider-leftborder .rzslider .rz-pointer:after {
    display: none;
}

/* Color picker overrides for the custom widget */

.colorpicker-leftborder .colorpicker-content-flex {
    margin-left: 5px;
}

.colorpicker-leftborder .c-ckolor__picker {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #61635e;
}

/* Styles for the blinds widget */

.blinds-leftborder .blades {
    display: inline-block;
}

.blinds-leftborder .blades .blade {
    display: block;
    width: 80px;
    height: 5px;
    margin: 3px;
    background-color: #61635e;
}

.blinds-leftborder .blades .blade.down {
    display: block;
    width: 80px;
    height: 5px;
    margin: 3px;
    background-color: #c2c7c3;
}


.blinds-leftborder .rzslider {
    margin-top: 5px;
    margin-left: 0;
}

.blinds-leftborder .rzslider .rz-pointer {
    width: 16px;
    height: 16px;
    left: -6px !important;
    background-color: #c2c7c3;
}

.blinds-leftborder .rzslider .rz-pointer:after {
    display: none;
}

.switch-leftborder.playback .btn-default {
    background: transparent;
    border-color: #61635e;
    color: #61635e;
}	
	


.icon svg, .section .control svg {
	  stroke-width: 2px;
	}

.icon.on svg {
	  stroke: #26bf75;
	  fill: #26bf75;
	}