@import '../mixins/gradients.scss';
@import './colors.scss';
@import './widgets.scss';

body {
    font-family: Arial;
    background-image: url(../Images/WaterDropBackground.jpg);
}
select, input[type=text], fieldset {
    font-size: 1rem;
    border-radius: 4px;
}
.popover,
.control-panel {
    vertical-align: top;
    display: inline-block;
    margin-top: .4rem;
    margin-right: .2rem;
    padding: .4em;
    border: solid 1px gray;
    border-radius: 5px;
    @include panel_background();
    @include box_shadow(5px 5px 5px, rgba(27, 27, 27, 0.4), gainsboro);
}
.control-panel-title {
    border-bottom: solid 3px orange;
    white-space: nowrap;
}
.status-text {

}
.body-text {
    font-family:Arial;
}
.fld-value {
    border: solid 1px gray;
    border-radius: 5px;
}
.fld-value-combo {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: solid 1px gray;
    background-color: white;
    color: black;
}
.fld-value-center {
    border-radius: 0px !important;
    border: solid 1px gray !important;
}

.btn-border {
    white-space: nowrap;
    border: solid 1px gray;
    border-radius: 5px;
    display: inline-block;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    padding-left: 0px;
    margin: .1rem;
    @include box_shadow(3px 3px 3px, rgba(127,127,127,0.5), gainsboro);
}
.btn {
    white-space: nowrap;
    border: solid 1px gray;
    border-radius: 5px;
    display: inline-block;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    padding-left: 0px;
    margin: .1rem;
    @include button_background();
    @include box_shadow(3px 3px 3px, rgba(127,127,127,0.5), gainsboro);
}
.btn-stateonly {
    @include box_shadow(3px 3px 3px, rgba(127,127,127,0.5), gainsboro);
    @include panel_background();
}
.btn-panel {
    padding: .2rem;
    margin-top: .2rem;
    text-align: right;
    border-top: solid 3px gainsboro;
}
.fld-btn-right {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border: solid 1px gray;
    @include fldbutton_background();
}
.fld-btn-left {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border: solid 1px gray;
    @include fldbutton_background();
}
.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 {
    @include hover_background();
}
.btn-toggle:not([disabled]):not(.disabled):active,
.btn: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: white;
    @include active_background();
}
.tab-contents {
    border: $outline_border;
    border-bottom-right-radius: $border_radius;
    border-bottom-left-radius: $border_radius;
    border-top-right-radius: $border_radius;
}
.tab-item {
    border: $outline_border;
    border-top-right-radius: $border_radius;
    border-top-left-radius: $border_radius;
    background-color: white;
}
.dropdown-panel {
    background-color: white;
    border: $outline_border;
    @include box_shadow(3px 3px 3px, rgba(127,127,127,0.5), gainsboro);
    border-radius: $border_radius;
}
.header-background {
    @include header_background();
}
table.optOuter {
    border-radius: 5px;
}

tr.optHeader > td {
    border-bottom: solid 2px black;
    border-top-right-radius: $border_radius;
    border-top-left-radius: $border_radius;
}

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 {
    @include selected_background();
    color: white;
}
table.crud-table > tbody > tr:hover > td:not(.btn-remove, .btn-edit),
table.optBody > tbody > tr:hover {
    @include hover_background();
    color: white;
}
div.picIndicator {
    display: inline-block;
    border: solid 1px gray;
    @include radial_gradient(center, ellipse, farthest-corner, rgba(222,222,222,1) 45%, rgba(0,33,0,0.2) 54%, rgba(0,0,0,1) 100%);
    @include box_shadow(2px 2px 2px, rgba(127,127,127,0.5), gainsboro);
    vertical-align:text-top;
    border-radius: 50%;
}
div.picIndicator[data-status=on],
div.picIndicator[data-status=ready],
div.picIndicator[data-status=selected],
div.picIndicator[data-status=true] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(0,240,0,1) 0%, rgba(0,0,0,1) 100%);
}
div.picIndicator[data-status=pending], div.piscIndicator[data-status=timeout] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(255,255,28,1) 0%, rgba(204,201,73,1) 85%, rgba(196,192,81,1) 100%);
}

div.picIndicator[data-status=delay] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(255,255,28,1) 0%, rgba(204,201,73,1) 85%, rgba(196,192,81,1) 100%);
    animation: blinker 1s linear infinite;
    -webkit-animation: blinker 1s infinite linear;
}
div.picIndicator[data-status=delayoff] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(0,240,0,1) 0%, rgba(0,0,0,1) 100%);
    animation: delayoff .5s ease infinite;
    -webkit-animation: delayoff .5s infinite ease;
}
div.picIndicator[data-status=delayon] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(255,255,28,1) 0%, rgba(204,201,73,1) 85%, rgba(196,192,81,1) 100%);
    animation: delayon .5s ease infinite;
    -webkit-animation: delayon .5s infinite ease;
}
@keyframes delayoff {
    0% {
        @include radial_gradient(center, ellipse, farthest-corner, rgba(0,240,0,1) 0%, rgba(0,0,0,1) 100%);
    }
    100% {
        @include radial_gradient(center, ellipse, farthest-corner, rgba(222,222,222,1) 45%, rgba(0,33,0,0.2) 54%, rgba(0,0,0,1) 100%);
    }
}
@keyframes delayon {
    0% {
        @include radial_gradient(center, ellipse, farthest-corner, rgba(255,255,28,1) 0%, rgba(204,201,73,1) 85%, rgba(196,192,81,1) 100%);
    }
    100% {
        @include radial_gradient(center, ellipse, farthest-corner, rgba(222,222,222,1) 45%, rgba(0,33,0,0.2) 54%, rgba(0,0,0,1) 100%);
    }
}


div.picIndicator[data-status=loading] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(252,255,84,1) 0%, rgba(255,182,71,1) 100%);
}

div.picIndicator[data-status=error] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(255,173,41,1) 0%, rgba(255,0,0,1) 100%);
}
.btn-toggle.fld-btn-left {
    border-top-left-radius: 1rem;
    border-bottom-left-radius:1rem;
}
.btn-toggle.fld-btn-right {
    border-top-right-radius:1rem;
    border-bottom-right-radius:1rem;
}
.btn-toggle.fld-btn-center {
    border: solid 1px gray;
    @include fldbutton_background();
}
.btn-toggle[data-selected="true"] {
    color: white;
    @include active_background();
}