@import "../mixins/gradients.scss";
@import "./colors.scss";
@import "./widgets.scss";
body {
    font-family: Roboto;
    background-image: url('background.jpg');
}
select, input[type=text] {
    font-size: 1rem;
    border-top:none;
    border-left:none;
    border-right:none;
    border-width:1px;
} 

fieldset {
    font-size: 1rem;
    border-radius: $border_radius;
}
.disabled {
    opacity:.5;
}
.popover,
.control-panel {
    vertical-align: top;
    display: inline-block;
    margin-top: .4rem;
    margin-right: .2rem;
    padding: .4em;
    border: $outline_border;
    border-radius: $border_radius;
    @include panel_background();
    @include box_shadow(2px 2px 2px, rgba(27, 27, 27, 0.4), gainsboro);
}
.control-panel-title {
    white-space: nowrap;
    border-bottom: solid 1px gray;
    margin-left: -.4rem;
    margin-right: -.4rem;
    margin-top: -.4rem;
    padding-top: .4rem;
    color: white;
    padding-left: .4rem;
    padding-right: .2rem;
    padding-bottom:.2rem;
    margin-bottom:.2rem;
    border-top-left-radius:$border_radius;
    border-top-right-radius:$border_radius;
    @include panel_header_background();
    @include box_shadow(2px 2px 5px, rgba(27, 27, 27, 0.4), gainsboro);
}
.status-text {

}
.body-text {
    font-family:Arial;
}
.fld-value {
    //border: solid 1px gray;
    border-bottom: solid 1px gray;
}
.fld-value-combo {
    border-bottom: solid 1px gray;
    background-color: white;
    color: black;
}
.fld-value-center {
    border-bottom: solid 1px gray;
}

.btn-border {
    white-space: nowrap;
    border: solid 1px gray;
    border-radius: $border_radius;
    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: $border_radius;
    display: inline-block;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-right: .2rem;
    padding-left: 0px;
    margin: .1rem;
    color: #E6EAEF;
    @include button_background();
//    @include box_shadow(1px 1px 1px, rgba(127,127,127,0.5), gainsboro);
}
.btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin-left: 0;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-size: 1000% 1000%;
    background-position: 50%;
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: background .5s, opacity 1s;
}
.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 {
    color: #2196F3;
    //border-radius:$border_radius;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    //border: solid 1px gray;
    @include fldbutton_background();
}
.fld-btn-left {
    color: #2196F3;
}
.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 {
    color: #0c7cd5;
}

.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 {
    color: white;
    @include hover_background();
}
.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: white;
    @include active_background();
    opacity: .5;
}
.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 {
    color:white;
    @include panel_header_background();
}
table.optOuter {
    border-radius: $border_radius;
    color: black;
}

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 silver;
    background:white;
    vertical-align:text-top;
    border-radius: 25%;
}
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(210,255,82,1) 0%,rgba(145,232,66,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(210,255,82,1) 0%,rgba(145,232,66,1) 100%);
    }

    100% {
        background: white;
    }
}

@keyframes delayon {
    0% {
        background: white;
    }
    100% {
        @include radial_gradient(center, ellipse, farthest-corner, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%);
    }
}
div.picIndicator[data-status=loading] {
    @include radial_gradient(center, ellipse, farthest-corner, rgba(255,175,75,1) 0%,rgba(255,146,10,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 {
    color:black;
}

.btn-toggle.fld-btn-right {
    color:black;
}

.btn-toggle.fld-btn-center {
    color: black;
}

.btn-toggle[data-selected="true"] {
    color: cornflowerblue;
    border-bottom:solid 1px black;
}