@import url("https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch");
@import './colors.scss';
@import '../mixins/gradients.scss';
@import './widgets.scss';

body {
    margin: 0;
    font-family: $text_font_family;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    background:url(poolsketch.png);
}
[tabindex="-1"]:focus {
    outline: none !important;
}
select, input[type=text] {
    font-family: $text_font_family;
    border-radius: $fld_radius;
}
fieldset {
    border-radius: $section_radius;
}
legend {
    font-family: cabin sketch;
}
input[type=checkbox] {
    position: relative;
    cursor: pointer;
    border: none;
    box-shadow: none;
    width: 1.1em;
    height: 1.1em;
    -webkit-appearance:none;
    -mos-appearance:none;
    outline:0px;
    appearance:none;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    top: 0;
    left: 0;
    background-color: white;
    border:solid 1px black;
    border-radius: 2px 25px 5px 15px/25px 5px 25px 2px !important;
}

input[type=checkbox]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    top: 0;
    left: 0;
    background-color: white;
    border: solid 1px black;
    border-radius: 2px 25px 5px 15px/25px 5px 25px 2px !important;
}

input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: calc(1.25em - 2px);
    height: calc(1.25em - 2px);
    top: 0;
    left: 0;
    margin-top:2px;
    margin-left:2px;
    position: absolute;
    background: url('pencilshade-green.png') !important;
    border-radius: 2px 25px 5px 15px/25px 5px 25px 2px !important;
    overflow:hidden;
}


div.chem-balance-value {
    font-family: $title_font_family;
}
.popover,
.control-panel {
    vertical-align: top;
    display: inline-block;
    margin-top: .4rem;
    margin-right: .2rem;
    padding-left: .4em;
    padding-right:.4em;
    padding-bottom:.4em;
    padding-top: 0px;
    border: solid 1px gray;
    border-radius: $section_radius;
    background-color: white;
    padding-top:0px;
    @include box_shadow(3px 3px 3px, rgba(127,127,127, 100), gainsboro);
}
.control-panel-title {
    font-family: cabin sketch;
    background: url('pencilshade-blue.png') !important;
    border-bottom: solid 1px black;
    border-top: solid 1px gainsboro;
    border-radius: 5px 25px 5px 25px/25px 5px 2px 5px;
    margin-bottom: 2px;
    padding-left: .4em;
    padding-right: .4em;
    margin-left: -.4em;
    margin-right: -.4em;
}
div.picPopover {
    padding-top:0px;
    padding-right:.4em;
}
.picController > .control-panel-title {
    background: white !important;
    margin-left:0px;
    margin-right:0px;
}
.status-text {
    font-family: "cabin sketch", "Neucha", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight:400;
}
.body-text {
    font-family: "Neucha", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight:700;
}

.btn-panel {
    padding: .2rem;
    margin-top: .2rem;
    text-align: right;
    border-top: solid 3px gainsboro;
}
.btn-border {
    display: inline-block;
    font-family: cabin sketch;
    font-weight: 400;
    font-size: 1.5rem;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid transparent;
    font-size: 1rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    padding-left: 0px;
    line-height: 1rem;
    border-radius: $btn_radius;
    border: solid 1px gray;
    margin: .1rem;
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.btn {
    display: inline-block;
    font-weight: 400;
    font-size: 1.5rem;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid transparent;
    font-size: 1rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    padding-left: 0px;
    line-height: 1rem;
    border-radius: $btn_radius;
    border: solid 1px gray;
    margin: .1rem;
    @include linear_gradient($panel_background);
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.fld-value {
    border: solid 1px gray;
    border-radius: $fld_radius !important;
}
.fld-value-center {
    border-top-left-radius: 12px 5px !important;
    border-bottom-left-radius: 3px 4px !important;
    border-top-right-radius: 3px 29px !important;
    border-bottom-right-radius: 12px 3px !important;
    border: solid 1px gray !important;
}
.fld-value-combo {
    border-top-left-radius: 4px 15px;
    border-bottom-left-radius: 4px;
    border-top-right-radius:4px 10px;
    border: solid 1px gray;
}
.btn:focus, .btn:hover {
    text-decoration: none;
}
.btn:focus, .btn.focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(51, 51, 51, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(51, 51, 51, 0.25);
}
.btn.disabled, .btn:disabled {
    opacity: .65;
    background: url(scratchout.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.btn:not([disabled]):not(.disabled):active, .btn:not([disabled]):not(.disabled).active {
    background-image: none;
}
.btn-stateonly {
    background: url(scratchout.png);
    background-repeat:no-repeat;
    background-size:100%;
}
.fld-btn-right {
    border-top-right-radius: 15px 5px;
    border-bottom-right-radius: 4px 10px;
    border-bottom-left-radius: 2px 15px;
    border: solid 1px gray;
    background: url('pencilshade-gray.png') !important;
    background-repeat: no-repeat;
    background-size: 100%;
}
.fld-btn-left {
    border-top-left-radius: 15px 5px;
    border-bottom-left-radius: 4px 10px;
    border-bottom-right-radius: 2px 15px;
    border: solid 1px gray;
    background: url('pencilshade-gray.png') !important;
    background-repeat: no-repeat;
    background-size: 100%;
}
.btn-toggle:not([disabled]):not(.disabled):hover,
.fld-btn-left:not([disabled]):not(.disabled):hover,
.fld-btn-left:not([disabled]):not(.disabled).hover,
.fld-btn-right:not([disabled]):not(.disabled):hover,
.fld-btn-right:not([disabled]):not(.disabled).hover,
.btn-border:not([disabled]):not(.disabled):hover,
.btn-border:not([disabled]):not(.disabled).hover,
.btn:not([disabled]):not(.disabled):hover,
.btn:not([disabled]):not(.disabled).hover {
    background: url('highlighter-yellow.png') !important;
}
.btn-toggle:not([disabled]):not(.disabled):active,
.fld-btn-left:not([disabled]):not(.disabled):active,
.fld-btn-left:not([disabled]):not(.disabled).active,
.fld-btn-right:not([disabled]):not(.disabled):active,
.fld-btn-right:not([disabled]):not(.disabled).active,
.btn-border:not([disabled]):not(.disabled):active,
.btn-border:not([disabled]):not(.disabled).active,
.btn:not([disabled]):not(.disabled):active,
.btn:not([disabled]):not(.disabled).active {
    color: black;
    background: url('pencilshade-blue.png') !important;
}
.tab-contents {
    border-left: solid 1px black;
    border-bottom: solid 1px black;
    border-right: solid 1px black;
    border-top: solid 1px black;
    border-radius: $tab_content_radius;
}
.tab-item {
    font-family: cabin sketch;
    font-weight: 400;
    border: solid 1px black;
    border-top-right-radius: 25px 5px;
    border-top-left-radius: 5px 2px;
    background-color: white;
}
.dropdown-panel {
    border: solid 1px black;
    box-shadow: 3px 3px 3px rgba(127,127,127,0.5);
    border-radius: $section_radius !important;
    background-color: white;
    border-radius: 5px;
}
.header-background {
    font-family: cabin sketch;
    font-weight: 700;
    background: url('pencilshade-blue.png') !important;
}
table.optOuter {
    border-radius: $section_radius !important;
}
tr.optHeader > td {
    border-bottom: solid 2px black;
    border-top-right-radius: 255px 5px;
    border-top-left-radius: 5px 255px;
}
table.optBody > tbody > tr > td:last-child,
table.optHeader > tbody > tr > td:last-child {
    border: none;
}

table.optBody td,
table.optHeader td {
    border-right: solid 1px gray;
}
table.crud-table > tbody > tr.selected > td:not(.btn-remove, .btn-edit),
table.optBody > tbody > tr.selected {
    background: url('highlighter-yellow.png') !important;
    color: black !important;
}
table.crud-table > tbody > tr:hover > td:not(.btn-remove, .btn-edit),
table.optBody > tbody > tr:hover {
    background: url('highlighter-gray.png') !important;
    color: white;
}
div.picIndicator {
    display: inline-block;
    border: solid 1px gray;
    border-radius: 2px 25px 5px 15px/25px 5px 25px 2px !important;
    vertical-align:middle;
}
div.picIndicator[data-status=on],
div.picIndicator[data-status=ready],
div.picIndicator[data-status=selected],
div.picIndicator[data-status=true] {
    background: url('pencilshade-green.png') !important;
    background-size:auto;
    background-attachment:fixed;
    background-position:left top;
}
div.picIndicator[data-status=delay] {
    background: url('pencilshade-yellow.png') !important;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
    animation: blinker 1s linear infinite;
    -webkit-animation: blinker 1s infinite linear;
}

div.picIndicator[data-status=delayoff] {
    background: url('pencilshade-yellow.png') !important;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
    animation: delayoff .5s ease infinite;
    -webkit-animation: delayoff .5s infinite ease;
}

div.picIndicator[data-status=delayon] {
    background: url('pencilshade-green.png') !important;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
    animation: delayon .5s ease infinite;
    -webkit-animation: delayon .5s infinite ease;
}

@keyframes delayoff {
    0% {
        background: url('pencilshade-yellow.png') !important;
        background-size: auto;
        background-attachment: fixed;
        background-position: left top;
    }

    100% {
        background: url('pencilshade-green.png') !important;
        background-size: auto;
        background-attachment: fixed;
        background-position: right bottom;
    }
}

@keyframes delayon {
    0% {
        background: url('pencilshade-yellow.png') !important;
    }

    100% {
        background: url('pencilshade-green.png') !important;
    }
}




div.picIndicator[data-status=pending], div.piscIndicator[data-status=timeout] {
    background: url('pencilshade-yellow.png') !important;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
}

div.picIndicator[data-status=loading] {
    background: url('pencilshade-orange.png') !important;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
}

div.picIndicator[data-status=error] {
    background: url('pencilshade-red.png') !important;
    background-size: auto;
    background-attachment: fixed;
    background-position: left top;
}
.btn-toggle.fld-btn-left {
}

.btn-toggle.fld-btn-right {
}

.btn-toggle.fld-btn-center {
    border: solid 1px gray;
    background: url('pencilshade-gray.png') !important;
}

.btn-toggle[data-selected="true"] {
    background: url('pencilshade-blue.png') !important;
}

div.picModules {
    margin-bottom: 5px;
}