@import "../mixins/gradients.scss";
@import "./colors.scss";

label, 
span,
div:not(.picIBColor) {
    line-height: 1;
}
div.picBody > div {
    padding-right: 0;
}
div.picTabs {
    background-color:white;
    border-top-left-radius:$border_radius;
    border-top-right-radius:$border_radius;
    border:none;
    border-top:$outline_border;
    border-left:$outline_border;
    border-right:$outline_border; 

}
div.picTab {
    border:none;
}
div.picTab > .picTabText {
    margin-bottom:.4rem;

}
div.tab-contents {
    border-top:none;
}
div.picTab.picTabSelected > span.picTabText {
    border-bottom: solid 2px teal;
}
div.picTab:not(.picTabSelected) {
    border-color:silver;
    color:silver;
}
div.picConfigTabContents {
    background-color:white;
}
div.picConfigPage {
    margin-top:.4rem;
}
div.picController {
    padding:0px;
}
/* div.picFeatureGrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    display: grid; 
    width: 100%;
} */
div.picFeatures{
    display: block;
}
div.picSchedule,
div.picPump,
div.picChlorinator,
// div.picChemistry,
div.chemControllerDiv,
div.chemDoserDiv,
div.picPumpCircuit,
div.picBodyFilter,
div.picLightThemes {
    // padding-bottom:.4rem;
    display: flex;
    flex-wrap: wrap;
}
div.picIBColorSelector > div.picToggleButton > div.picIndicator {
    margin-left:.15em;
    margin-right:-.19em;
    margin-top: -.47em;
}
div.picSchedule > span, div.picSchedule > label, div.picChemistry label, div.picChemistry span {
    line-height: 2;
}
div.picChlorinator {
    justify-content: space-between;
}
div.picChemistry {
    width: 100%;
}
div.picIBColorSelector{
    display: flex;
}
div.picBodyFilter:not(:last-child),
div.picBody:not(:last-child),
div.picChlorinator:not(:last-child),
div.picSchedule:not(:last-child),
div.picPump:not(:last-child) {
    border-bottom: solid 1px rgba(0, 0, 0, 0.125);
    margin-bottom: 5px;
}
span.picFilterPercentage {
    text-align:right;
}
span.picPressureValue,
span.picFilterPercent,
span.picCurrentOutput, 
div.picEnergy, 
div.picBodySetpoints,
label.picSchedDays,
table.picSchedDays,
label.picPumpPrograms,
table.picPumpPrograms,
span.saturationIndex,
div.picRelay,
div.picProgram,
span.picFilterPercentage,
label.picIBThemeLabel {
    margin-right: auto;
}
label.picIBThemeLabel {
    width: 100%;
    margin-left: 10px;
}
div.picChlorStatus, 
div.picSuperChlor {
    order: 20;
}
div.picFeature,
div.picCircuit,
div.picVirtualCircuit {
    display: flex;
}
div.picFeature > label,
div.picCircuit > label,
div.picVirtualCircuit > label {
    top: 6px;
    margin-right: auto;
}
div.picToggleButton{
    order: 10;
    margin-right: auto;
}
div.picPopoverHeader,
div.picCircuitTitle {
    flex: 1 1 100%
}
div.picAmbientTemp label {
    color:white;
}
div.picController > div.picControllerTitle {
    margin:0px;
}
div.pover-icon:hover {
    color: orange;
    text-shadow: 3px 3px 16px #272634;
}
div.picSaltReqd {
    padding: .2rem;
    border-bottom: solid 1px gainsboro;
    margin-bottom: .4rem;
}
div.picBody[data-ison=false] div.picBodyTemp {
    color: silver;
}
span.picUnits {
    color: gray;
}
div.picAccordian-title {
    border: solid 1px gray;
    border-top-left-radius: $border_radius;
    border-top-right-radius: $border_radius;
}
div.pnl-scheduleDays {
    margin-top:.2rem;
}
div.pnl-scheduleDays > div.table {
    border-top-left-radius: $border_radius;
    border-top-right-radius: $border_radius;
}
div.pnl-scheduleDays div.table-caption {
    border-top-left-radius: $border_radius;
    border-top-right-radius: $border_radius;
    border: solid 1px gray;
    color:white;
    @include header_background();
}
div.pnl-scheduleDays div.table-row.dayheader {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
div.pnl-scheduleDays div.table-cell.dayheader {
    text-align: center;
    width: 2.4rem;
    border: solid 1px gray;
    font-weight: bold;
    color: white;
}
div.pnl-scheduleDays div.table-row.dayheader {
    background: white;
    background: #007bff linear-gradient(180deg, #007bff, #007bff);
    color: black;
    font-weight: bold;
}
div.pnl-scheduleDays div.table-cell.day:hover {
    @include hover_background();
}

div.pnl-scheduleDays div.table-cell.day:not(.disabled):active {
    color: white;
    @include active_background();
}
div.pnl-scheduleDays div.table-cell.day {
    text-align: center;
    font-size: 2rem;
    border: solid 1px gainsboro;
    cursor: pointer;
}
div.pnl-scheduleDays div.table-cell.day {
    text-align: center;
    font-size: 2rem;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
}

div.pnl-scheduleDays div.table-cell.day[data-selected=true]:before {
    content: "\f057";
    font-weight: 900;
}

div.pnl-scheduleDays div.table-cell.day:not([data-selected=true]):before {
    content: "\f111";
    font-weight: 400;
}
div.picSelector {
    display: flex;
    flex-direction: column;
}
div.picOption {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    // line-height: unset !important;
}
div.picOption > label {
    margin-right: auto;
}
div.picOption:first-child {
    margin-top: 10px;
}
i.picDropdownButton {
    margin-right: 10px;
}
div.picVirtualCircuit {
    padding-left: .5em;
    display: flex;
}

div.picBodyFilter > label.picFilterName,
div.picChlorinator > label.picChlorinatorName,
div.picChemController label.picControllerName {
    overflow-y: hidden;
}
div.picSpinner-up, div.picSpinner-down {
    line-height: 1.4rem!important
}
div.picModules > table > tbody > tr:nth-child(n+1) > td {
    color:rgba(0, 0, 0, 0.125);
}
span.picCircuitEndTime {
    position: unset;
    right: unset;
}
span.picLightEndTime {
    margin-top: -10px;
    margin-right: 5px;
    position: unset;
    right: unset;
}
div.picBody[data-covered=true]:before {
    text-align:right;
    display:block;
    position:absolute;
    left:-3.25em;
    top:2.5em;
}
span.picFilterPercentage,
span.picFilterPressure {
    width:5rem;
    text-align:right;
}