/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
.main-box {
	scroll-behavior: smooth;
}

#heat_1_Value_3, #heat_2_Value_3, #heat_3_Value_3, #heat_4_Value_3, #heat_5_Value_3 {
	/background: #ff4545;
	background-image: linear-gradient( 315deg, #ff4545 10%, #fce6e6 100%);
}
#heat_1_Value_2, #heat_2_Value_2, #heat_3_Value_2, #heat_4_Value_2, #heat_5_Value_2 {
	background: #fff6c4;
	background-image: linear-gradient( 315deg, #ffeb7f 10%, #f9f1c7 100%);

	
}
#heat_1_Value_1, #heat_2_Value_1, #heat_3_Value_1, #heat_4_Value_1, #heat_5_Value_1 {
	/background: #556cff;
	background-image: linear-gradient( 319deg, #4b64ff 10%, #bdddf4 100%);
}

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.badge.rounded-pill.bg-label-success {
	display: none;
}
.badge.rounded-pill.bg-label-success.visible {
	display: inline-flex;
}

.visible {
	display: inline-flex;
}

.d-flex-card {
	display: flex;
	width: 48%;
}

.card-body.results.left {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.hidden {
	display: none;
}



.table > :not(caption) > * > * {
	padding: 5px;
	border: 0px;
}

.table > :not(:first-child) {
    border-top: 1px solid #d9dee3;
}

a.link.external.hidden {
	display: none;
}


.modal-body {
	padding: 0.8rem 1.5rem;
}

.insertRowPeriod {
	/width: 40%;
	/margin: 0px 5px;
	
}
.ml-5 {
	margin-left: 5px;
}

.ml-10 {
	margin-left: 10px;
}

.ml-20 {
	margin-left: 20px;
}

.green {
	color: #00BA9D;
	fill: #b1e4d5 !important;
	fill:#ffd000 !important
}

.green1 {
	color: #00BA9D;
	fill: #ffd000 !important;
}



.red {
	color: var(--bs-danger)
}

.align-items {
	align-items: center;
}

.smart {
	//width: 20%;
	margin: 0 10px;
	text-align: center;
}

.ventilationSwitchModalSmartOff, .ventilationSwitchModalSmartOn {
	margin-left: 20px;
}

.smarty h6 {
	border-bottom: 1px solid #ffd000;
	text-transform: uppercase;
	font-size: 14px;
	color: #ffd000;
	margin-bottom: 30px;
	padding-bottom: 5px;
}
 
.smarty .d-flex {
	//background-color: #DEB887;
	padding: 10px;
}

.smarty .d-flex-card {
	//background-color: #DEB887;
	padding: 10px;
}

.ptb-10 {
	padding: 0 0 5px 0;
}

.insertAfterThis tr {
	height: 30px;
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
	background-color: #ffd000;
	border-color: #ffd000;
}

.bg-label-success {
	color: #00BA9D !important;
	background-color: #89ffdc !important;
}
.form-check-input:focus {
    border-color: transparent;
}

.small-upper {
	text-transform: uppercase;
    font-size: 13.8px;
	letter-spacing: 1.2px;
}

.form-control {
	padding: 0.4375rem ;
}	

.fa-greater-than, .fa-less-than {
	//color: #fff;
	font-size: 20px;
	margin-right: 20px;
	margin-left: 10px;
}    

span.smarty {
	//color: #fff;
	//font-size: 20px;
	//margin-left: 10px;
}

.fa-check, .fa-circle-xmark {
	font-size: 38px;
	color: #fff;
}

.insertRowButtonTr {
	width: 100%;
}
.fa-circle-plus {
	font-size: 35px;
}

/* .row { */
    /* --bs-gutter-x: 1rem !important; */
/* }	 */

.mb-4 {
    margin-bottom: 0.5rem !important;
}

.cart-desc span {
	font-size:12px;
}

.avatar.secondary {
	width: 25%;
} 

svg.setting {
	width: 30px;
	height: 30px;
	color: #fff;
	fill: #fff;
}

.heat {
	width: 100%;
}

.mt-10 {
	margin-top: 10px;
}

.heat-flex {
	display: flex !important;
    flex-direction: row;
    align-items: flex-end;
}

.avatar svg {
	width: 40px;
	height: 40px;
}

.toolbar-inner .avatar svg {
	width: 30px;
	height: 30px;
}

.title-heat {
	width: 20%;
}

.modal-dialog {
	max-width: 900px;
	top: 50px;
}

.container-xxl {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.heat .align-items-center {
	gap: 5px;
}
/* .container-p-y:not([class^=pb-]):not([class*=" pb-"]) { */
    /* padding-bottom: 1rem !important; */
/* } */

/* .container-p-y:not([class^=pt-]):not([class*=" pt-"]) { */
    /* padding-top: 1rem !important; */
/* } */
:root {
--bs-body-font-size: 0.8375rem;
}

h5 {
	font-size: 15px;
}

.card-body.results {
	padding: 0 ;
	width: 50%;
}

/* Input type */
.signBut {
      /width: 30px;
      
	  background-color: #CB9632;
	  border-color: #CB9632;
	  box-shadow: none;
	  color: #fff;
    }
	
.signBut1 {
	/* background: #697a8d; */
	/* color: #fff; */
}	
	

.inNum {width: 40px;}

.form-control {
	text-align: center;
	height: 60px;
	    font-size: 28px;
}

.smarty.input-group-text, .input-group-text.period {
	font-size: 12px;
}


input.form-control.smart {
	margin: 0px;
}

.input-group-text {
    display: flex;
    align-items: center;
    /padding: 0.4375rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.53;
    color: #697a8d;
    text-align: center;
    white-space: nowrap;
    background-color: #f2f3f5;
    border: 1px solid #d9dee3;
    border-radius: 0.375rem;
	justify-content: center;
}

.smarty-info {
	//width: 30%;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 12px;
	color: #ffd000;
}

.modal-body .table {
	margin-bottom: 1rem;
}

.smarty .d-flex.last {
	padding: 10px 10px 0px 10px;
}

.smarty .d-flex-card.last {
	padding: 10px 10px 0px 10px;
}

.fa-check:before, .fa-circle-xmark:before {
	vertical-align: middle;
}

.fw-semibold {
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 14px;
	letter-spacing: 1.2px;
}

.modal-title {
	letter-spacing: 1.2px;
}
.sta:before {
	/* border-left: 1px solid rgb(217,222,227); */
    /* content: ""; */
    /* position: absolute; */
    /* left: 50%; */
    /* bottom: 12px; */
    /* height: 50%; */
    /* width: 1px; */
}

.table th {
	font-size: 0.65rem;
}

/* .bg-label-primary { */
    /* background-color: #fff8ea!important; */
    /* color: #CB9632 !important; */
/* } */

.card-body {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card {
	height: 100%;
}

.card-body.heat {
	height: 100%;
	margin-top: 25px;
}

.card-body.heat.sta {
	height: unset;
}

.row.smarty {
	margin-top: 20px;
}

.mb-10 {
	margin-bottom: 10px;
}

.form-switch .form-check-input {
    width: 4em;
    height: 1.8rem;
	
}

.heat .form-switch, .heat .form-check-input {
    width: 4em;
    height: 1.8rem;
}

.badge {
	font-size: 0.8125em;
}

.avatar {
    
    width: unset; 
    height: unset;
		display: flex;
    flex-direction: column;	
    
}
.mb-1 {
	margin-bottom: 0.5rem !important;
}


.cart-desc {
	/* width: 70%; */
	height: 100%;
    align-items: flex-end;
    display: inline-flex;
	justify-content: space-between;
	gap: 10px;
}

.energy .cart-desc {
	gap: unset;
}

.avatar.secondary {
    width: 30%;
	display: flex;
    flex-direction: row;
	align-items: flex-start;
	
}

.avatar.secondary span {
	font-size: 12px;
	color: rgba(35, 37, 54, 1);
}

.setting1 {
	width: 25px;
	height: 25px;
	fill: rgba(35, 37, 54, 1);
}

.card-title { 
    gap: 20px !important;
}

.card-title.val {
	padding: 0px !important;
	
}



.cart-desc {
	flex-direction: column;
}

/* .card-body.results.left { */
	/* border-left: 1px solid #fff; */
	/* border-top: 1px solid #fff; */
	/* border-bottom: 1px solid #fff; */
	/* /border-right: 1px solid #fff; */
	/* border-radius: 0.5rem; */
/* } */

/* .card-body.results.right { */
	/* /border-left: 1px solid #fff; */
	/* border-top: 1px solid #fff; */
	/* border-bottom: 1px solid #fff; */
	/* border-right: 1px solid #fff; */
	/* border-radius: 0.5rem; */
/* } */

h3.card-title, h6.card-title  {
	color: rgba(35, 37, 54, 1)
}

.results .card-title {
	/background: #edfaf4;
	padding: 8px;
	border-radius: 0.5rem;
	color: #fff;
}

.signBut1, .signBut {
    
    line-height: 1!important;
    font-size: 35px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 50px;
}

.smarty.input-group-text, .input-group-text.period  {
	background: #d3d3d3;
	border-left: 0px;
	padding: 5px;
}

.insertBeforeNewRowTr {
	display: flex;
	align-items: center;
}

.insertRowTime {
	padding: 0.57rem;
}

.align-items-center {
	gap: 10px;
}


.modal-header {
    padding: 1.5rem 1.5rem 0.5rem;
}

.costime, .cosperiod {
	font-size: 16px;
}

.form-control.smart {
	border-right: 0px;
	border-left: 0px;
}
 
.form-control.insertRowPeriod {
	
}

td {
	min-height: 55px;
}
.play {
  animation: play 3s linear infinite;
}

.mt--10 {
	margin-top: -10px;
} 

/* Range */

.range-slider {
  margin: 60px 0 0 0;
}

.range-slider {
  width: 100%;
}

.range-slider__range {
  //accent-color: #00BA9D;
  -webkit-appearance: unset;
  width: calc(100% - (183px));
  height: 50px;
  border-radius: 5px;
  background: #fff;
  outline: none;
  padding: 0;
  margin: 0;
  align-items: flex-end;
  
}
.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #dfdfdf 50%, #999EA1 100%);
   //background: radial-gradient(#999EA1, #dfdfdf);
  cursor: pointer;
  margin-top: -45px;
  -webkit-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
  //background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
  //background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
	 -webkit-appearance: none;
  width: 60px;
  height: 60px;
  border: 0;
  margin-top: -45px;
  border-radius: 50%;
  background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #dfdfdf 50%, #999EA1 100%);
  cursor: pointer;
  -moz-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
  //background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
  //background: #1abc9c;
}
.range-slider__range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

.range-slider__value {
  display: inline-block;
  position: relative;
  width: 70px;
  //color: #fff;
  color: #ff0000;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  //background: #00BA9D;
  background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #dfdfdf 50%, #999EA1 100%);
  //background: radial-gradient(#999EA1, #dfdfdf);
  padding: 15px 10px;
  margin-left: 8px;
  font-size: 20px;
}
.range-slider__value:after {
  position: absolute;
  top: 17px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #dfdfdf;
  border-bottom: 7px solid transparent;
  content: "";
}

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

.range-slider__range::-webkit-slider-runnable-track {
	height: 10px;
	
}

.range-slider__range:focus::-webkit-slider-runnable-track {
  //background: #00BA9D;
  height: 10px;
}






.name {
	font-size: 20px;
	margin-right: 10px;
	min-width: 80px;
    display: inline-block;
}


.heatSwitch1OnIconPD {
	height: 35px;
	width: 35px;
	
}

.card-title.temp {
	background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
}
.card.ventilation  {
	/* background: rgba(35, 37, 54, 1); */
	background-image: linear-gradient( 315deg, #ABDCFF 10%, #0396FF 100%);
}    

.card-title.energy, .card-title.mtd {
	background: rgba(192, 197, 202, 1)
	 linear-gradient( 135deg, #dfdfdf 10%, #999EA1 100%);
}

.card.aspiration  {
	/* background: rgba(0, 166, 131, 1); */
	background-image: linear-gradient( 315deg, #EE9AE5 10%, #5961F9 100%);
}

.card-title.aspiration {
	background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);
}

.card.co  {
	/* background: rgba(227, 25, 25, 1); */
	background-image: linear-gradient( 315deg, #FFD3A5 10%, #FD6585 100%);
}

.card-title.co {
	background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);
}

.card.humidity  {
	/* background: rgba(11, 146, 187, 1); */
	background-image: linear-gradient( 315deg, #2AFADF 10%, #4C83FF 100%);
}

.card-title.humidity {
	background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
}
.card.heat {
	background: rgba(192, 197, 202, 1)
	 linear-gradient( 135deg, #dfdfdf 10%, #999EA1 100%);
}

h3.card-title {
	font-size: 36px;
}

h6.card-title {
	font-size: 16px;
}

/* End Range   */

.avatar.heat {
    position: absolute;
    top: -18px;
    left: -18px;
}

.avatar.heat svg {
	 /fill: #232536;
}

.card-body.heat {
	//padding: 0px 24px;
	gap: 10px;
}

.avatar svg {
	fill: #fff;
}

.avatar svg.setting1 {
	width: 20px;
    height: 20px;
    fill: rgba(35, 37, 54, 1);
}


.fw-semibold {
	color:#fff;
}

.heat .fw-semibold {
	color: rgba(35, 37, 54, 1);
	font-size: 16px;
	width: 20%;
}
.fw-semibold.d-block.name-stage {
	width: 100%;
}
.bg-label-primary {
    background-color:#ffd000 !important; 
    color: #414141 !important;
}

.heatSwitch3OnIconPD  {
	height: 40px;
	width: 40px;
}

body {
	background-color: #343E59; /*  #343E59 */
	color: #fff;
}

.badge {
	font-size: 12px;
}

.body-result {
	dispaly: flex;
	flex-direction: column;
}

.full_bottom.results {
	/padding: 0px 10px 10px 10px;
}
 
.full_bottom .card-title {
    justify-content: space-between;
} 

.cart-desc.first {
	padding-right: 3px;
	position: relative;
	flex-direction: column;
	align-items: flex-start;
}

.cart-desc.second {
	flex-direction: column;
}

/* .tot_energy:before { */
	/* content: "/"; */
    /* font-size: 20px; */
    /* //position: absolute; */
    /* top: 10px; */
    /* right: 0; */
	/* padding-right: 5px; */
    /* font-weight: 200; */
    /* font-family: serif; */
    /* color: #fff; */
/* } */
.full_bottom .cart-desc {
	width: unset;
}

.cart-desc.chart {
	flex-direction: unset;
}
.current-chart {
	font-size: 50px !important;
}

.bg-footer-theme {
	background-color: transparent!important;
	margin-top: 5px;
}

.mr-20 {
	margin-right: 20px;
}

.costime, .cosperiod {
	font-size: 28px;
}
.cosperiod .hour {
	font-size:18px;
}


.align-items-end {
	align-items: flex-end;
}

.card-body {
	padding: 0.8rem 0.8rem;
	justify-content: space-evenly;
}

.controls-box {
	display: flex;
    flex-direction: column;
    gap: 10px;
	width: 100%;
	//margin-left: 10px;
}

.controls {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    /gap: 10px;
	
}

.btn-yellow {
	background-color: #ffd000;
	border-color: #ffd000;
	color: #414141;
	text-transform: uppercase;
}

.btn-grey {
	background-color: #8592a3;
    border-color: #8592a3;
	color: #fff;
}

.btn-green {
	background-color: #66ff7a;
    border-color: #66ff7a;
	color: #fff;
}


.btn.disabled, .btn:disabled {
	color: #e2e2e2;
	/border-color: #e2e2e2;
}

#infoModalButtonTemp.disabled, #infoModalButtonCO2.disabled {
	opacity: 1 !important;
}

.timer-mode {
	/border-bottom: 1px solid #697a8d;
}

.visible-row {
	display: table-row;
}

.timer-badge, .manual-badge {
	/display: none;
}

.btn.rounded-pill {
	padding: 0.2rem 0.6rem;
}

.card-title {
	margin-bottom: 22.2px;
}

.result-box {
	/* gap: 10px; */
}

svg.setting.right {
	margin: 0px;
}

.no-set {
	border-top: 1px solid #fff !important;
}

@keyframes play {

  from
  {transform: rotate(0deg)}
  to
  {transform: rotate(360deg)}
}	

.container-p-y:not([class^=pb-]):not([class*=" pb-"]) {
    padding-bottom: 0.5rem !important;
}

.container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
    padding-top: 1.025rem !important;
}

.rounded-pill {
    border-radius: 3px;
	/* margin-top: 2px; */
	font-weight: 700;
	border-color: #c8c5c5;
	/* padding-top: 8px;
    padding-bottom: 7px; */
}

#on, #off {
	line-height: 1.7;/* 0.4; */
	padding: 0;/* 8px 8px 7px 6px; */
}
.activeMode{
	border-radius: 3px !important;
	padding-top: 6px;
}

/* #flexSwitchCheckDefault1,#flexSwitchCheckDefault2,#flexSwitchCheckDefault3,#flexSwitchCheckDefault4,.form-check-input.onAndOffSwitch.modal-box { */
	
/* } */

.mb-20 {
	margin-bottom: 20px;
}

.bb-y {
	border-bottom: 1px solid #ffd000;
}

.right-nav, .left-nav {
	width: 50px;
}

.input-group {
	justify-content: between-space 1imporatnt;
}

/* .modal-content .bg-label-primary { */
	/* display: none; */
/* } */

.badge.rounded-pill.bg-label-primary.visible {
    display: inline-flex;
}

.modal-content .bg-label-secondary {
	display: none;
}
.modal-content .bg-label-secondary.visible {
	display: inline-flex;
}
.badge.rounded-pill.bg-label-secondary.visible {
    display: inline-flex;
}

.modal-content {
	background-color: #343E59;
} 

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	color: #fff;
} 

.table:not(.table-dark) th {
	color: #fff;
}

.costime, .cosperiod {
	color: #fff;
}

.stage-box {
	display: flex;
	width: 100%;
	justify-content: center;
}

.stage {
	width: 40%;
}

.text-align-center{
	text-align: center;
}



#chart, #chartHum, #chartCo, #chartSoil {
  max-width: 650px;
  position: absolute;
  left: 10px;
}

#chartCo {
	top: 20px;
}

#chart2, #chartHum2, #chartCo2 {
  max-width: 800px;
  margin: auto;
}
/* .apexcharts-tooltip-title, .apexcharts-tooltip-series-group { */
	/* color: #414141; */
/* } */


.timeline-item-inner {
	background: transparent;
}

#chartTimeLineSoil, #chartTimeLineTemp, #chartTimeLineHum, #chartTimeLineCO2 {
	margin-left: -30px;
	margin-top: -30px;
	width: 95%;
}

#modalChart .modal-dialog {
    max-width: 90%;
}

.apexcharts-reset-icon, .apexcharts-menu-icon {
	display: none;
}

#chart .apexcharts-toolbar, #chartCo .apexcharts-toolbar, #chartHum .apexcharts-toolbar {
	display: none !important;
}

.card-title.temp,.card-title.co, .card-title.humidity, .card-title.soil  {
	position: relative;
} 
/* .apexcharts-canvas { */
    /* position: relative; */
    /* user-select: none; */
    /* left: -40px; */
	/* top: -25px; */
    /* position: pxsolute!important; */
/* } */

#chart {
	min-height: 0px!important;
}

/* apexcharts-xaxis */

/* .apexcharts-inner { */
	/* transform: translate(0, 0)!important; */
/* } */

#chart .apexcharts-grid, #chart .apexcharts-xaxis {
	display: none;
}

#chartCo .apexcharts-grid, #chartCo .apexcharts-xaxis {
	display: none;
}

#chartHum .apexcharts-grid, #chartHum .apexcharts-xaxis {
	display: none;
}

button.chart {
	position: absolute!important;
}

.modal-content.chart {
	background-color: #262D47;
}

.stage-text-middle {
	margin: auto;
}

.pass_heat {
	height: 40px;
	width: 120px !important;
}

.modal-header .input-group  {
	width: auto;
}

.burger-nav {
	display: flex;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
}
	
.bx-sm {
	font-size: 2rem !important;
}
	
.status-controller {
	margin-right: 15px; 
}

.burger-status {
	display: flex;
	align-items: center;
}

.bg-label-badge-secondary {
	background: transperant;
	border: 1px solid #8592a3 !important;
}

.bg-label-badge-success {
	background: #00BA9D !important;
	border: 2px solid #00BA9D !important;
}

.pulse-contrroler {
	
	animation: flash 3s infinite;
}

.pulse-progress-red{
	
	animation: pulse-progress-red 1.5s infinite;
	border-radius: 1px;
}

/* progress.pulse-progress-red[value]::-webkit-progress-bar { */
  /* background-color:#2eff40 !important; */
  
  
/* } */

.pulse-progress-yellow{
	
	animation: pulse-progress-yellow 1.5s infinite;
	border-radius: 1px;
}

.pulse {

  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,186,157, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

.new i{
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,186,157, 0.4);
  animation: pulse 2s infinite;
}

.new i:hover {
  animation: none;
}

.setDataBox {
	margin-bottom: 20px;
	display: flex;
}

.setData {
	width: 50%;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

#inlineRadio1, #inlineRadio2 {
	width: 3em;
	height: 3em;
}

.modal-body {
	display: none;
}

.range-slider {
	display: inline-flex;
	margin-top: 15px;
}

.stagewatts {
	width: 35px;
	height: 20px;
	//background: #ffd000;
	//border:  0px;
}

.setDataBody {
	flex-direction: column;
}

.setData label {
	width: 100%;
} 

.modal-body.chart {
	display: block;
	margin-bottom: 70px;
}

.fa-bar-chart {
	font-size: 1.5rem;
    color: #fff;
}

#chartOn {
	margin-right: 15px;
}



.main-settings {
	//display: block;
}

.fa-square.pas {
	margin: 10px!important;
}

button.passCheck {
	border: 2px solid #ffd000;
}

button.passCheck:focus {
	border: 2px solid #fff;
}

#time {
	
	margin-right: 10px;
	width: 80px;
	color: #fff;
	font-size: 17px;
}

.full_bottom.results {
	display: flex;
	/* gap: 10px; */
}

.card-title.pH-solid {
	/* width: 48%; */
	background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #dfdfdf 10%, #999EA1 100%);
	gap: 0px;
}
.card-title.energy {
	/* width: 48%; */
	//flex-direction: column;
	gap: 0px !important;
	justify-content: space-between;
	
}

.activateCO2_30, .activateCO2_60, .stagewatts  {
	width: 30px;
	font-size: 14px;
	float: unset!important;
	margin-left: 1em !important;
	border-radius: 3px;
	text-align: right;
}

.stagewatts {
	width: 50px;
	text-align: right;
	border-radius: 3px;
}

.avtivateGraphics, .lockInterface, .HealthAnalysis, .appPin, .setLockTimeApp, .LightAnalysis {
	float: right !important;
	margin-left: 1em !important;
	//margin-left: 0px !important;
}

.setDataStage {
	display: flex;
	//gap: 10px;
}

.setDataStageBox {
	display: flex;
	flex-direction: column;
	width: 20%;
	gap: 10px;
}

.clearStage {
	padding: 0.125rem 1.25rem;
	max-width: max-content;
}

.passCheck {
	border-radius: 5px!important;
}

/* .timer { */
	/* display:inline-flex; */
/* } */

.timer span{
	display: inline;
	font-weight: 100;
}

.full_bottom h6.card-title {
	font-size: 12px;
}

.kW {
	font-size: 10px !important;
}

.cart-desc-box {
	display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    height: 100%;
}

.avatar.secondary {
	width: 30%;
}
.avatar.secondary.energy {
	flex-direction: column;
}
.waterV .avatar.secondary {
	width: auto;
}

.fa-bar-chart.green {
	color: #00BA9D;
}

.range-slider input[type="range"] {
	display: block;
}

.btn.timer {
	display: flex;
	justify-content: center;
}

.save {
	display: none;
}

.saveIP {
	display: none;
}

.save.visible {
	display:inline-block;
}

.save svg, .saveIP svg{
	fill: #fff;
	color: #fff;
	width:28px;
	height: 28px;
	margin-left: 10px;
}

.modal.show {
	background: rgba(0,0,0,1);
}

.card-body.results.left {
    /* margin-right: 10px; */
}

.card-title.pH-solid {
    /* margin-right: 10px; */
	/* min-width: 159px; */
}

button.back {
	
}

svg.back-button {
	width: 30px;
	height: 30px;
	fill: #fff;
}
/* .card-title.energy { */
	/* min-width: 159px; */
/* } */

/* .ptr-content { */
	/* z-index: 3; */
/* } */

.panel-controller svg {
	width: 50px;
	height: 50px;
	fill: #fff;
}


.card-body .energy .cur_energy {
	font-size: 15px;
}
.card-body .energy .tot_energy {
	font-size: 20px;
}

@keyframes box-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0,186,157, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(0,186,157, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 0 rgba(0,186,157, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0,186,157, 0.4);
    box-shadow: 0 0 0 0 rgba(0,186,157, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(0,186,157, 0);
      box-shadow: 0 0 0 10px rgba(0,186,157, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(0,186,157, 0);
      box-shadow: 0 0 0 0 rgba(0,186,157, 0);
  }
}

@keyframes pulse-progress-red {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
  }
  50% {
      -moz-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.5);
      box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.5);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
  }
}

@keyframes pulse-progress-yellow {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 208, 0, 1);
    box-shadow: 0 0 0 0 rgb(255 208 0);
  }
  50% {
      -moz-box-shadow: 0 0 0 8px rgba(255, 208, 0, 0.5);
      box-shadow: 0 0 0 8px rgba(255, 208, 64, 0.5);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(255, 208, 0, 1);
      box-shadow: 0 0 0 0 rgba(255, 208, 0, 1);
  }
}
input[type="date"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], select, textarea {
		background: #fff;
		color: #414141;
		border-radius: 5px;
		border-radius: 5px;
}
	
.energy h6.card-title.val {
	font-size: 8px;
}



button.btn.btn-setting {
    width: 20%;
}

.card {
	margin: 0px !important;
}

.avatar.heat.bottom	{
	position: unset;
	top: unset;
	let: unset;
}

.tabbar-labels .tabbar-label{
	line-height: 1.2;
}

 .toolbar-bottom .toolbar-inner {
	 min-height:80px;
 }
 
 .tabbar-labels .tabbar-label {
	 position: unset;
	 margin-top: 5px;
	 margin-left: 10px;
 }
 
 .stage.main {
	width: 100%;
}

/* .form-control.smart.Heat-time { */
	/* margin-bottom: 2px; */
/* }  */

.input-group.hour, .input-group.minutes, .input-group.seconds {
	margin-bottom: 2px;
}

.form-control.smart {
	min-width: 20px;
} 

.fa-square.pas:hover {
	color: #ffd000;
	
}

#eCO2_value {
	color: #fff;
}

.btn-group {
	border-radius: 50px;
	padding: 0px  15px;
}

	
.heatPanelLabel {
	/* width: 100%; */
	position: absolute;
	top: 15px;
	right: 7px;
	color: black;
	font-size: smaller;
}

.heatSunriseSunset {
	position: absolute;
	top: 15px;
	left: 12.8px;
	color: black;
	font-size: smaller;
}


:root {
--f7-tabbar-labels-height: 80px
	
}

/* .page-content:after { */
	/* content: ''; */
	/* backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur)); */
	/* height: 100%; */
	/* width: 100%; */
	/* z-index: 999999999; */
	/* position: absolute; */
	/* top: 0; */
	/* left: 0; */
/* } */

/* .toolbar-bottom:after { */
	/* content: ''; */
	/* backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur)); */
	/* height: 100%; */
	/* width: 100%; */
	/* z-index: 999999999; */
	/* position: absolute; */
	/* top: 0; */
	/* left: 0; */
/* } */

.offline {
	color: #fff;
}

#eCO2_value {
	color: #fff;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

.red_font {
	color: red !important;
}

progress[value].blink_me_red::-webkit-progress-value {

    
    background-color: red !important;
}

.blink_me_red {
	animation: blinker 1s linear infinite;
}


.blink_one {
  animation: blinker 0.3s linear 0.5s;
}

#modalSetting .modal-dialog {
	margin-bottom: 130px;
}

.calibration {
	width: 100%;
}

.calibration .yellow {
	color: #ffd000;
}

#messegeConfirmation {
	display: none;
}

.calibration-box {
	flex-direction: column;
}

.calibration-box .form-check-label.value {
	width: 100%;
}

#messegeConfirmation.yellow {
	color: #ffd000;
	text-align: center;
}

#calibrateCO2Yes {
	margin-bottom: 20px;
}

.modal-footer {
    padding: 0.25rem 1.5rem 4rem;
}

.little-message {
	color: #ffd000;
	font-size: x-small;
}

.pulsing {
	animation: box-pulse 0.3s ease-out 0.3s;
	animation-delay: 0.2s;
}

input[type="number"], input[type="text"] {
	background-color: #fff;
	color: #697a8d;
	font-size: xx-large !important;
	font-weight: bold;
}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}

span.input-group-text {
	border: 0px;
	background-color: #fff;
	writing-mode: vertical-rl;
    text-orientation: mixed;
	color: red;
}

.input-group-text {
	border: 0px
}

.values-box {
	display: flex;
	flex-direction: column;
	font-size: 8px;
	align-items: flex-start;
	//margin-left: 5px;
	line-height: 1.2;
	margin-top: 3px;
} 
 
.btn.currentMode {
	padding: 0.4375rem 0.4375rem;
	text-transform: uppercase;
} 

.card-title {
	gap: unset !important;
}

.it-off {
	display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.it-off label {
	width: 100% !important;
}

.card-title.d-flex {
	gap: 0px;
	justify-content: space-between;
}

.card-title.d-flex-card {
	gap: 0px;
	justify-content: space-between;
}

.buttonAndBadge {
	display: flex;
	flex-direction: column;
}

.card.smartsocket { 
	background-image: linear-gradient( 315deg, #61FBD5 10%, #00CA92 100%);
}

#modalSmartSocket .modal-header {
	background-image: linear-gradient( 315deg, #61FBD5 10%, #00CA92 100%);
}

.form-select {
	width: auto;
	margin: 0px 10px;
	font-size: 30px;
    background-position: right 0.175rem center;
    padding: 6px 40px 6px 20px;
}

.smartsocket .stage {
	width: 50%;
}

.stage-text {
	width: 250px;
}

card-title.co .avatar.secondary {
	//width: 100%;
}

.everyday {
	min-width:90px;
}

.control-buttons {
	display: flex;
	gap: 10px;
}  

.card-title.soil .avatar.secondary {
	width: 50%;
}

/* .card-title.humidity .avatar.secondary { */
	/* width: 100%; */
/* } */

.pass-box {
	//width: 20%;
	margin-right: 20px;
}

#currentPass {
	width: 200px;
}

.control-buttons .btn-yellow {
	background-color: white;
	border: 2px solid #fff;
}

.control-buttons .btn-yellow:hover {
	border: 2px solid #ffd000;
}

.control-buttons .btn-yellow.active {
	border: 2px solid #ffd000;
	background-color: #ffd000;
}

.modal-content.chart.noConnect {
	background-color: transparent;
}

#reConnectButton {
	//margin-bottom: 30px;
}

#newControllerPass {
	margin-bottom: 10px;
}

.form-check.noConnect {
	padding-left: 0px;
}

h3.noConnect {
	text-align: center;
	font-size: 22px;
}

#newControllerSet {
	font-size: 16px !important;
	color: #ffd000;
    line-height: 9px;
	/* width: 100%; */
    /* height: 40px; */
}

.setDataBox.Mode {
	flex-direction: row;
}

.setDataBox.Mode label {
	width: unset;
}

.setData.mode {
	flex-direction: column;
}

svg.settings-mode {
	width: 50px;
	height: 50px;
}

.form-check.controller-mode {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}

.form-check.controller-mode label {
	width: 16%;
}

#connectTo {
	text-align: center;
}

.setDataBox.Mode .setData.source-state input[type="text"] {
		width: 80%;
		font-size: medium !important;
		padding: 5px;
	}

	.setDataBox.Mode .setData.source-state input[type="checkbox"] {
		margin: 0 5px;
	}

	.setDataBox.Mode .setData.source-state .source-info {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		gap: 5px;
	}

	.setDataBox.Mode .setData.source-state .source-url {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.setDataBox.Mode .setData.source-state .source-info div {
		font-size: x-large;
		color: #ffd000;
	}

	.setDataBox.Mode .setData.source-state span {
		display: none;
		
		
	}

	.setDataBox.Mode .setData.source-state span svg {
		fill: #fff;
		color: #fff;
		width:28px;
		height: 28px;
		margin-left: 10px;
		
	}
	
	.systemStatus {
		width: 100%;
		justify-content: space-evenly;
	}
	
	#systemOfflineInputIP {
		width: 120px;
		font-size: 15px !important;
		padding: 14.2px 5px;
	}
	
	#systemOfflineInputIP {
		display: none;
	}
	
	.offlene-setbox {
		display: flex;
	}
	
	#current-time {
		margin-right: 10px;
	}
	
	.set-date {
		padding-left: 40px;
	}
	
	#set-time {
		width: auto;
	}
	
	.fa-download {
		margin-right: 10px;
		color: #fff;
	}
	
	.sun {
		width: 30px;
		height: 30px;
		
	}
	
	.snow {
		width: 30px;
		height: 30px;
	}
	
	.form-switch .form-check-input.seasons {
		
		margin-left: 0px;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
		border-color: #ffd000;
		background-color: #ffd000;
		
		
		
		
	}
	
	.form-check-input.seasons:checked, .form-check-input.seasons[type=checkbox]:indeterminate {
		background-color: #2AFADF;
		border-color: #2AFADF;
	}
	
	.swTime {
		display: flex;
		width: 100%;
		align-items: center;
		margin-bottom: 10px;
		gap: 5px;
		padding-left: 0px;
		justify-content: center;
	}
	
	.swTime label {
		font-size: xx-small;
	}
	.swTime .summer {
		color: #ffd000;
		fill: #ffd000;
	}
	
	.swTime .winter {
		color: #2AFADF ;
		fill: #2AFADF ;
	}
	
	/* .set-conttroler-time { */
		/* display: flex; */
	/* } */
	
	#checkControllerTime {
		font-size: 50px;
		text-align: center;
	}
	
	#modalSmartSocket .smarty h6 {
		margin-bottom: 0px;
	}
	
	.socket-span-conditions  {
		font-size: xx-small;
	}
	
	#set-time-send {
		margin-bottom: 10px;
	}
	
	.middle-nav {
		display: flex;
		align-items: flex-end;
		gap: 10px;
	}
	
	.status-controller-header {
		display: inline;
	}
	
	.set-time-online {
		margin-bottom: 10px;
	}
	
	.status-header {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.status-system-header {
		color: #fff;
		font-size: 9px;
		padding: 1px 3px;
		margin-bottom: 8px;
		border-radius: 3px;
		line-height: 1.4;
	}
	
	.flashing {
    animation: flash .5s infinite alternate;
	}

/* Define the flash animation */
	@keyframes flash {
		0% {
			opacity: 1;
		}
		30% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	
	.box-system {
		display: flex;
		justify-content: center;
		border-bottom: 1px solid #fff;
	}
	
	#scanning {
		opacity: 1;
		position: absolute;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	#scan-border {
		border: 3px solid #fff;
		border-radius: 10px;
		width: 250px;
		height: 250px;
	}
	
	#flash {
		width: 25px;
		height: 25px;
		margin: auto;
	}
	
	.controllerStatusBox.available{
		border-top: 1px solid #fff;
		padding-top: 25px;
	}

@media (max-width: 991px){
	.energy h6.card-title.val {
		font-size: 8px;
		display: flex;
		
		flex-direction: column;
	}
	
	.heat .btn-setting {
		width: auto;
	}
	
	.heat .fw-semibold {
		width: 18%;
		margin-bottom: 0px !important;
		letter-spacing: 1px;
	}
	
	.heat .align-items-center {
		margin-bottom: 10px;
	}
	
	.heat .align-items-center.last {
		margin-bottom: 0px;
	}
	
	.everyday {
		min-width: 75px;
		color: #414141;
	}
	
	.fa-check, .fa-circle-xmark {
		font-size: 24px;
	}
	
	.costime,.cosperiod  {
		font-size: 20px;
	}
	
	.form-switch .form-check-input.modal-box {
		width: 3.2em;
		height: 1.6rem;
	}
	
	.form-control {
		/width: 100px ;
		text-align: center;
		height: 50px;
		font-size: 18px;
	}
	.modal-body {
		padding: 0.8rem 0.8rem;
	}
	#deleteRow, .insertRowButtonTr {
		padding: 0px;
	}
	
	.minus, .plus {
		//display: none;
	}
	.body-result {
		/order: 2;
		/margin-top: 10px;
	}
	
	.first_main {
		margin-bottom: 0px;
	}
	
	.stage {
		width: 100%;
	}
	
	.stage-box {
		flex-direction: column;
		margin-bottom: 30px;
	}
	
	.d-flex.align-items.stage-text {
    padding-bottom: 0px;
	}
	
	.d-flex-card.align-items.stage-text {
    padding-bottom: 0px;
	}
	
	.smarty .d-flex {
		padding: 2px;
	}
	
	.smarty .d-flex-card {
		padding: 2px;
	}
	
	.smarty h6 {
		margin-bottom: 30px;
	}
	
	.signBut1 {
    line-height: 1!important;
    font-size: 28px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 10px;
	}
	
	.table > :not(caption) > * > *{
		padding: 5px 0;
	}
	
	.text-to-speech-addon {
		padding: 5px;
	}
	
	.body-table {
		margin-top: 30px;
	}
	
	#insertBeforeNewRowTr {
		display: flex;
		flex-wrap: wrap;
		flex: 1 1 auto;
		gap: 10px;
	}
	
	#insertBeforeNewRowTr td {
		width: 48%;
		
	}
	
	thead {
		display: flex;
	}
	
	tr{
		width: 100%;
	}
	th {
		width: 35%;
	}
	.del-customizer {
		width: 100%;
	}
	
	.visible-row {
    display: inline-table;
	}
	
	.costime,.cosperiod {
		width: 30%;
	}
	
	.main-box {
		display: flex;
		flex-direction: column;
	}
	
	.first_main {
		order: 2;
	}
	
	.second_main {
		order: 1
	}
	
	.body-heat {
		margin-bottom: 10px ;
	}
	
	.pass_heat {
		width: 100px !important;
	}
	
	tr.cos {
		display: flex;
		justify-content: space-between;
	}
	
	.setDataBox {
		flex-direction: column;
	}
	
	.setDataBox.controller-box {
		flex-direction: row;
		width: 100%;
		justify-content: center;
	}
	
	
	
	.setData {
		width: 100%;
	}
	
	.card-body.results {
		width: 48%;
	}
	
	h3.card-title{
	 font-size: 30px;	
	}
	
	#chart g{
		width: 80px!important;
	}
	
	.card-title {
		gap: 0!important;
	}
	.modal-header .input-group {
		//width: 100px;
		//flex-wrap: nowrap;
	}
	.range-slider__range {
		width: calc(100% - (140px));
	}
	
	.range-slider .name {
		width: 100%;
	}
	.range-slider{
		flex-wrap: wrap;
	}

	.modal-header .d-flex {
		flex-wrap: wrap;
	}
	
	.modal-header .d-flex-card {
		flex-wrap: wrap;
	}
	
	.currentMode span{
		font-size: 11px;
	}	
	
	.modal .modal-dialog:not(.modal-fullscreen) {
		padding: 0px;
		padding-left: 0 !important;
	}
	
	.setData label {
		width: unset;
	}
	
	.form-check .form-check-input {
		margin-left: 0px;
	}
	
	.form-switch {
    padding-left: 0em;
	}
	
	.heat {
		width:auto;
	}
	
	.setDataStageBox {
		width: 100%;
	}
	
	.setDataBox .form-check {
		display: flex;
		gap: 10px;
		padding-left: 0px;
	}
	
	input[type="date"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], select, textarea {
		background: #fff;
		color: #414141;
		border-radius: 5px;
		border-radius: 5px;
	}
	
	.fa-square.pas {
		margin: 10px 10px !important;
	}
	
	input[type="time"]::-webkit-calendar-picker-indicator{
		width: 25px;
		height: 25px;
		padding: 10px;
		color: rgba(0, 0, 0, 0.7);
	}
	
	.stagewatts {
		width: 100%;
		height: 100%;
		padding: 2px;
		text-align: right;
		padding: 5px 5px 0px !important;
		line-height: 1.2;
	}
	
	.activateTimeOnOff {
		width: 30%;
		height: 100%;
		padding: 2px;
		text-align: right;
		padding: 5px 5px 0px !important;
		line-height: 1.2;
	}
	.input-group {
		justify-content: center;
	}
	
	input.form-control.smart, input.insertRowTime, input.insertRowPeriod{
		font-size: 18px;
	}
	
    
	
	.card-title.temp, .card-title.humidity, .card-title.pH-solid, .card-title.co, .card-title.aspiration, .card-title.energy  {
		min-height: 77px;
	}
	
	.avatar.secondary span {
		font-size: 8px;
		font-weight: 600;
	}
	
	.avatar svg.setting1 {
		height: 15px;
		width: 15px;
	}
	
	.card-body.heat {
		gap: 0px;
	    margin-top: 25px;
	}

	.tabbar-labels .tabbar-label {
		 position: unset;
		 margin-top: 5px;
		 margin-left: 0px;
	 }
	.stage.main {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.setDataStage {
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	
	.setDataStageBox {
		width: 100%;
	}
	
	.setDataBox .form-check {
		display: flex;
		align-items: center;
	}
	
	.setDataBox label {
		/* width: 40%; */
	}
	
	.form-check-label.second {
		width: 8%;
	}
	
	.save.visible {
		width: 8%;
	}
	
	.controller-box .save.visible {
		width: unset;
		margin-right: 5px;
	}
	
	.form-check-label.value {
		width: 40%;
	}
	
	.everyday {
		font-size: 14px;
		min-width: 100px;
	} 
	
	.smartsocket .stage {
		width: 100% !important;
	}
	
	.stage-text {
		width: 100%;
	}
	
	.smartsocket .stage-text {
		width: 100%;
	}
	
	.smartsocket .smarty-info {
		width: 15%;
	}
	
	.smartsocket .smarty-info-logic {
		width: 70%;
		text-align: center;
	}
	
	.smartsocket .stage-box {
		flex-wrap: nowrap;
	}
	
	.stage-text.perHour {
		//width: 38%;
		justify-content: flex-start !important;
	}
	
	.perHour .smarty-info {
		width: 100%;
	}
	
	.control-buttons .btn {
		padding: 0.4375rem 0.5rem;
	}
	
	.form-check.controller-mode label {
		width: 50%;
	}
	
	.source-box {
		flex-direction: column !important;
	}

	.setDataBox.Mode .setData.source-state {
		flex-direction: row ;
		width: 100% ;
	}

	
	 
}

@media (max-width: 460px){
	
	.tabbar-labels .tabbar-label {
		/* font-size: 9px !important; */
		display: none;
		
	}
	
	:root {
		--f7-tabbar-labels-height: 60px;
	}
	
	.gantt_container {
		min-height: 300px;
	}
	
	#ferro, #two, #three {
		/* min-height: 300px; */
		width: 88% !important;
	}
	
	.gantt_cal_light {
		max-width: 290px !important;
	}
	/* :root { */
		/* --f7-tabbar-labels-height: 120px; */
	/* } */
	
	
	.toolbar-bottom .toolbar-inner {
		/* min-height: 120px; */
	}
	
	.toolbar-inner {
		/* flex-wrap: wrap; */
	}
	
	.tabbar-labels .link {
		width: 25%;
	}
	
	button.btn.btn-setting {
		width: auto;
	}
	
	.controls {
		gap: 10px;
	}
	
	.activateTimeOnOff {
		width: 20%;
	}
	
	.activateTimeOnOff.controller {
		width: 40%;
		text-align: left;
	}
	
	.form-select {
		width: auto;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 24px;
		padding: 0px 20px 0px 10px;
		font-weight: 600;
		color: #414141;
		border-radius: 30px;
		line-height: 1.2;
	}
	
	.smartsocket .ml-20 {
		margin-left: 5px!important;
	}
	
	.signBut1, .signBut {
		width: 40px;
	}
	
	.avatar.secondary {
		width: 40%;
	}
	
	.avatar.secondary.energy {
		/* width: 30%; */
	}
	.apexcharts-text tspan {
		font-size: 10px;
	}
}

@media (max-width: 389px){
	.main-box-sensor .d-flex-card {
		width: 100%;
	}
	.result-box.d-flex {
		flex-wrap: wrap;
	}
	
	.result-box.d-fle-card {
		flex-wrap: wrap;
	}
	
	.card-body.results {
		width: 100%;
	}
	.card-body.results.left {
		margin-right: 0px;
		margin-bottom: 8px;
	}
	
	.avatar.heat {
		position: absolute;
		top: -13px;
		left: -13px;
	}
	
	.row > * {
		
		/* padding-right: calc(var(--bs-gutter-x) * 0.4); */
		/* padding-left: calc(var(--bs-gutter-x) * 0.4); */
		
	}
	
	#off, #on {
		/* display: none; */
	}
	
	button.btn.btn-setting {
		/* width: 15%; */
	}
	
	.card-title.temp, .card-title.humidity, .card-title.pH-solid, .card-title.co, .card-title.aspiration, .card-title.energy{
		min-height: auto;
	}
	
	.heat .fw-semibold {
		width: 22%;
		letter-spacing: 0.5px;
	}
	
	.everyday {
		font-size: 14px;
	}
	
	.modal-dialog {
    
		margin: 0.8rem;
    
	}
	.signBut1, .signBut {
		line-height: 1!important;
		font-size: 25px;
		padding-top: 3px;
		padding-bottom: 3px;
		width: 0px;
		
	}
	
	.smartsocket .form-switch .form-check-input{
		width:48px;
	}
	
	.smartsocket .smarty.input-group-text {
		/* display:none; */
	}
	
	.tabbar-labels .tabbar-label {
		font-size: 6px !important;
	}
	
	.table th {
		font-size: 8px;
	}
	
	#insertBeforeNewRowTr td {
		width: 47%;
	}
	
	
	
	
	.modal-header {
		padding: 1.5rem 0.8rem 0.5rem;
	}
	.burger-status {
		width: 100%;
		justify-content: center;
		margin-bottom: 15px;
		border-bottom: 1px solid #697a8d;
	}
	
	.controllerStatusBox {
		line-height: 1.5;
	}
	
	.everyday, .name-stage {
		zoom: 0.8;
	}
	
	
	/* .btn { */
		/* padding: 0.20rem 0.20rem; */
	/* } */
}

@media (max-width: 390px){
	input[type="number"], input[type="text"] {
		
		font-size: 20px !important;
		
	}
	
}

/* // about pass // */
.input-group.password {
	display:none;
}

.modal-body {
	 display: block; 
}
/* // end about pass // */

.btn {
	font-size: small;
}

#modalCO .modal-header {
	background-image: linear-gradient( 315deg, #FFD3A5 10%, #FD6585 100%);
}

#modalAspiration .modal-header {
	background-image: linear-gradient( 315deg, #EE9AE5 10%, #5961F9 100%);
}
#modalVentilation .modal-header {
	background-image: linear-gradient( 315deg, #ABDCFF 10%, #0396FF 100%);
}
#modalHumidity .modal-header {
	background-image: linear-gradient( 315deg, #2AFADF 10%, #4C83FF 100%);
}

#modalHeat1 .modal-header, #modalHeat2 .modal-header, #modalHeat3 .modal-header, #modalHeat4 .modal-header, #modalHeat5 .modal-header{
	background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #dfdfdf 10%, #999EA1 100%);
}

/* #modalSetting .modal-body { */
	/* background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #dfdfdf 10%, #999EA1 100%); */
/* } */

#modalSetting .modal-header {
	background: rgba(192, 197, 202, 1) linear-gradient( 135deg, #f0f135 10%, #00BA9D 100%);
}

.modal-title {
	font-weight: 600;
	width: 100%;
	text-align: center;
}

.modal-header .d-flex {
	width: 100%;
}

.modal-header .d-flex-card {
	width: 100%;
}

.modal-body .d-flex {
	justify-content: center;
	font-weight: 600;
}

.smarty h6 {
	text-align: center;
    font-weight: 600;
}

@media (min-width: 992px){
	.setDataStage {
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
	.form-check-input {
		//width: 2em;
		padding: 0 5px;
	}
	.stagewatts {
		width: 100%;
		height: 40px;
		margin-left: 0px !important;
		margin-bottom: 10px !important;
		padding: 8px 8px 0px!important;
	}
	
	.setDataBox {
		width: 100%;
	}
	.timeActive {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.timeActive .form-check-label {
		width: 30%;
	}
	
	.timeActive .activateTimeOnOff {
		width: 80px;
		padding: 8px 8px 0px !important;
	}
	
	.timeActive .form-check-label.second {
		width: unset;
		margin-left: 5px;
		margin-right: 10px;
	}
	
	.calibration button {
		width: 40%;
	}
	
	#calibrateCO2Yes {
		margin-bottom: 0px;
		margin-right: 20px;
	}
	
	.calibration {
		width: 100%;
		text-align: center;
	}
	
	.stage.main {
		flex-direction: column;
	}
	
	.it-off {
		width: 130px;
	}
	
	.stage-box {
		gap: 10px;
		margin-bottom: 20px;
	}
	
	.stage {
		width: 100%;
	}
	/* .aspiration .card-title { */
		/* margin-bottom: 0px; */
	/* } */
	
	.card-title.energy {
		height: 83.19px;
	}
	
	.source-box {
		flex-direction: row !important;
		gap: 10px;
	}


	.setData.source-state {
		flex-direction: column !important;
	}
	
}

@media (min-width: 768px){
	.d-flex.current-asp {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.d-flex-card.current-asp {
		flex-direction: column;
		align-items: flex-start;
	}
	
	
}

.controllerStatusBox {
	text-align: center;
}

#controllerStatus, .controllerStatus {
	color: #fff;
	padding: 4px;
	border-radius: 0.375rem;
	margin-left: 5px;
	height: 100%;
}


.systemUp {
	text-transform: uppercase;
	margin: 10px;
	padding: 7px;
	/* border-bottom: 1px solid #fff; */
}

.system-reconnect {
	display: none;
}

.newConnectControler {
	border-top: 1px solid #fff;
	padding-top: 30px;
	padding-bottom: 30px;
}

.controller-info-modal {
	text-align: center;
	color: #fff;
}

.controller-info-modal button {
	font-weight: bold;
	color: #fff;
}

.controller-info-modal h4 {
	padding: 20px 0 10px;
}

.manual-qr-box {
	display: flex;
    justify-content: space-evenly;
}

.manual-qr-box .manual {
    /* width: 100px; */
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.newConnectControler {
	display: none;
}

.toggle-controller {
	display: none;
	padding: 20px 0;
}

.offline-demo  {
	padding: 20px 0 30px;
	border-top: 1px solid #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

#noConnect, .reConnect {
	display: none;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, input:-internal-autofill-selected {
   
    -webkit-background-clip: unset !important;
}

.increment, .decrement {
	background: none;
	color: #fff;
	width: 30px;
}

.logo-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo-header h3 {
	margin-bottom: 0px;
}

#controllerHeader {
	color: #fff;
	font-size: 10px;
}

/* #reConnectButton { */
	/* display: none; */
/* } */
#reConnectButton{
	font-size: 15px !important;
	font-weight: 400;
	height: auto;
	padding: 0.35rem !important;
    text-align: center;
    /* height: 100%; */
    min-height: 28.5px;
}

#reConnectButton1 {
	display: inline;
	width: auto;
	margin-left: 3px;
	margin-right: 3px;
	
}

@media (max-width: 768px){
	
	.title-heat {
		width: 23%;
	}
	.reConnectButton {
		display: block;
	}
	
	.reConnectButton1 {
		display: none;
	}
	
	.values-box {
		font-size: x-small;
		font-weight: 600;
	}
	
	.nutrients-settings {
		flex-wrap: wrap;
	}
	
	#saveNutrients {
		width: 40%;
	}
	
	.setDataBox.Mode.panel-box-controller{
		flex-direction: column;
	}
	
	.setDataBox.Mode.panel-box-controller .setData {
		width: 100%;
		flex-direction: row;
	}
}



.useTomato, .useCucumber, .usePepper, .useCustomMode {
	display: none;
}

.toggle-controller {
	flex-direction: column;
}

.timeline {
	max-width: 1200px;
	margin: 0 auto;
}

.heatSwitch1Off, .heatSwitch1On, .heatSwitch2Off, .heatSwitch2On, .heatSwitch3Off, .heatSwitch3On,.heatSwitch4Off, .heatSwitch4On,.heatSwitch5Off, .heatSwitch5On{
	width: 35px;
    margin-bottom: 4px;
    height: 17px;
    vertical-align: baseline;
}

.setDataBox.Mode .setData {
	width: 25%;
	padding-left: 0px;
	align-items: center;
	text-align: center;
}

.setDataBox.Mode .setData.system {
	width: 100%;
}

.setDataBox.Mode .form-check .form-check-input {
	margin-left: 0px;
}

.page-content {
  scroll-padding-top: 70px; /* replace 100px with the height of your sticky/fixed header */
}

.no-hairline {
	position: relative;
}

.name-stage {
	word-wrap: normal;
}

.modalHeat1Days, .modalHeat2Days, .modalHeat3Days, .modalHeat4Days, .modalHeat5Days {
	font-size: 10px;
    font-weight: normal;
    color: black;
    text-transform: none;
}
.modalHeat1DaysLeft, .modalHeat2DaysLeft, .modalHeat3DaysLeft, .modalHeat4DaysLeft, .modalHeat5DaysLeft {
	color: #414141;
	font-size: 10px;
	font-weight: normal;
	color: black;
	position: absolute;
    z-index: 100;
	padding-left: 4px;
}
.modalHeat1HoursLeft, .modalHeat2HoursLeft, .modalHeat3HoursLeft, .modalHeat4HoursLeft, .modalHeat5HoursLeft {
	color: #414141;
	font-size: 9px;
	font-weight: normal;
	color: black;
	position: absolute;
    z-index: 100;
	padding-left: 4px;
}

/* progress {
  opacity: 0;
}
 */
progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 100%; 
  height: 13px;
}
progress[value]#modalHeat1HoursLeft, progress[value]#modalHeat2HoursLeft, progress[value]#modalHeat3HoursLeft, progress[value]#modalHeat4HoursLeft, progress[value]#modalHeat5HoursLeft {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 13px;
}
progress[value]#intensity::-webkit-progress-value {
	background: rgb(0,95,255);
	background: linear-gradient(90deg, rgb(124 173 255) 0%, rgba(249,255,248,1) 34%, rgba(255,254,164,1) 70%, rgb(255 0 0 / 25%) 90%);
}
progress[value]::-webkit-progress-bar {
  background-color: #f5f5f5;
  border-radius: 3px;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; */
}
progress[value]::-webkit-progress-value {
  background-color:#2eff40;

    border-radius: 3px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
progress[value]#modalHeat1HoursLeft::-webkit-progress-value, progress[value]#modalHeat2HoursLeft::-webkit-progress-value, progress[value]#modalHeat3HoursLeft::-webkit-progress-value, progress[value]#modalHeat4HoursLeft::-webkit-progress-value, progress[value]#modalHeat5HoursLeft::-webkit-progress-value {
  background-color:#ff8c7a;
}
.progress-container {
  position: relative;
  display: inline-block;
  background: #f5f5f5;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 75%;
  background: #2eff40;
}

.heat .fw-semibold {
	line-height: 20px;
}

.btn-red {
	background: red;
	color: #fff;
}

.btn-blue {
	background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
	color: #fff;
}

#confirmExitButton, #cancelExitButton {
	margin-top: 10px;
}

.pin-login {
  display: inline-block;
  border-radius: 10px;
  padding: 10px;
  font-size: 28px;
  //background: #343E59;
  //border: 1px solid #363b5e;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-family: sans-serif;
}

.pin-login__text {
  margin: 10px auto 10px auto;
  padding: 10px;
  display: block;
  width: 50%;
  font-size: 0.5em;
  text-align: center;
  letter-spacing: 0.2em;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: default;
}

.pin-login__text--error {
  color: #901818;
  background: #ffb3b3;
  animation-name: loginError;
  animation-duration: 0.1s;
  animation-iteration-count: 2;
}

@keyframes loginError {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@-moz-keyframes loginError {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

.pin-login__key {
  width: 60px;
  height: 60px;
  margin: 10px;
  background: rgba(255, 255, 255, 1);
  color: #363b5e;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
}

.pin-login__key:active {
  background: rgba(255, 255, 255, 0.5);
}

.modal-content.pass {
	background-color: transparent;
}

.modal-content.pass div.modal-header {
	/* margin: 0 auto; */
}

.modal-content.pass div.modal-header .passModalHeader {
	text-align: center;
    
}
.clearAppPass {
	background: red;
	width: 80px;
	padding: 6px 3px;
}

.pin-login__progressbar {
  height: 10px;
  background-color: #fff;
  width: 0;
  transition: width 0.3s ease;
  
}

.pin-login__progressbar--error {
  background-color: #ff0000;
}

.progressbar-box {
	border: 1px solid #fff;
    border-radius: 5px;
    overflow: hidden;
	margin-bottom: 10px;
}

.modal-content.pass .info-modal {
	text-align: center;
}

.popover.modal-in {
	z-index: 100000;
}

.popover {
	background-color: #2C3333;
	width: 300px;
	box-shadow: none;
}

.popover-arrow.on-top {
	background-color: #2C3333;
}


.smart-select .item-after {
	font-size: 12px;
	max-width: 100%;
	color: #fff;
	display: inline;
	bottom: 4px;
	top: 0px;
}

.smart-select .item-after:after {
	content: "\2039";
	display: inline-block;
	color: #ffd000;
	font-size: 20px;
	transform: rotate(270deg);
	padding-left: 3px;
}

.reConnectButton {
	//background-color: #fff;
    font-size: 14px !important;
    color: #fff;
    padding: 6px !important;
    width: 65%;
    height: 28.5px;
    border-radius: 5px;
    border-bottom: 1px solid #ffd000;
	
}

.system-reconnect{
	background-color: #ffd000;
    font-size: var(--f7-block-font-size);
    color: #000;
    text-transform: uppercase;
    width: auto;
    height: 28.5px;
    border-radius: 5px;
    border: 1px solid #ffd000;
	margin-left: 5px;
	animation: flash 2s infinite;	
}

.currentConnectButton {
	background-color: #ffd000;
    font-size: var(--f7-block-font-size);
    color: #000;
    text-transform: uppercase;
    width: auto;
    height: 28.5px;
    border-radius: 5px;
    border: 1px solid #ffd000;
	margin-left: 5px;
}

#availableControllers {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.ios .icon-radio:after {
	color: #ffd000;
}

#addNewController {
	margin-bottom: 10px;
}

@media (min-width: 480px){
	#offlineDemo {
		width: 45%;
	}
	
	#statistics-chart {
		width: 45%;
	}
	#addNewController {
		width: 50%;
	}
	 #reConnectButton {
		width: 50%;
		
	}
	.reConnectButton {
		width: 240px;
		max-width: 240px;
	}
	#reConnectButton {
		font-size: 15px !important;
		padding: 0.35rem !important;
		text-align: center;
		/* height: 100%; */
		font-weight: 400;
		min-height: 28.5px;
	}
	.newConnectControler {
		width: 50%;
		margin: 0px auto;
	}
}

.setDataBox.controller-box {
		flex-direction: row;
		width: 100%;
		justify-content: center;
}

.clearStage {
	font-size: 10px;
	line-height: 1.2;
}

.remove-controller-button {
	width: auto;
	padding: 0px 10px;
}

.remove-controller-button .fa-circle-xmark{
	font-size: 24px;
}

/* .modal-header { */
	/* padding: 0px; */
/* } */

.modal .btn-close {
	//transform: none;
}

.controller-info-modal h4 {
	padding: 0px 0px 10px;
}

.col-md.form-check.fs-m {
	font-size: 11px;
	font-style: italic;
	align-items: center !important;
	line-height: 12px;
	color: #d1d1d1;
	display: flex;
	position: relative;
	margin-left: 20px;
	min-height: 16px;
	
}

.setData.menu {
	flex-direction: row;
	width: 90%;
}
 
.setData.menu svg {
	width: 30px;
	height: 30px;
}
.small-txt {
	text-align: center;
    display: block;
    margin-bottom: 30px;
    color: whitesmoke;
	font-size: smaller;
}
/* .modal-content { */
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
/* } */

.intensity {
	position: absolute;
    color: #333;
    font-size: 9px;
    top: 2px;
    left: 10%;
	/* transform: translate(-50%, 0%); */
	height: 16px;
}
progress#intensity {
	height: 16px;
	box-shadow: darkgray 2px 2px 2px 0px;
}

span.prog {
	padding: 0 3px;
	font-size: 9px;
	line-height: 16px;
}

.card-title.ec-soil {
	background-image: linear-gradient( 315deg, #61FBD5 10%, #00CA92 100%);
}

.setting.small {
	height: 20px;
	width: 20px;
}

.water-settings {
	color: #fff;
    height: 50px;
    fill: #fff;
	margin-right: 5px;
    width: 50px;
    /* margin-right: 6px; */
	/* display: none; */
}

.water-data-box {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: space-between; 
	width: 100%;
	
}
.water-data-box.main { 
margin-bottom: 8px;
}

.water {
	flex-direction: row;
	align-items: flex-start;
}

.water-settings-box {
	display: flex;
    align-items: center;
    /* justify-content: flex-end; */
    width: 100%;
    gap: 10px;
    /* border-left: 1px solid #dfdfdf; */
}

.fw-semibold.d-block.name-stage.water {
	width: 100%;
	letter-spacing: 0.7px;
	position: relative;
}

.title-svg {
	font-size: 14px;
	padding: 0 0px 0 6px;
}

.water-value {
	color: #fff;
    font-size: 9px;
    font-weight: 400;
    text-transform: lowercase;
	line-height: normal;
}

.card.water, .card-title.waterV {
	background-image: linear-gradient( 135deg, #bec3c6 10%, #4C83FF 100%);
	    /* background-image: linear-gradient( 135deg, #278df9 10%, #ff4c75 100%); */
    
	
}

.card.water {
	 margin-top: 10px!important;
}

.water-mode-value {
	display: flex;
    flex-direction: row;
	align-items: flex-start;
    gap: 10px;
}

.water-mode-value .activeMode  {
	font-size: 8px;
	padding-top: 2px;
	height: 10px;
	width: fit-content;
	margin: 0px;
}

.name-stage.water {
	font-size: 15px;
	color: #333;
}

.first-water {
	width: 100%;
}

/* .middle-water { */
	/* width: 2%; */
	
/* } */

.secondary-water {
	width: 90%;
	gap: 10px;
    display: flex;
    flex-direction: column;
	margin-left: 40px;
	
}

.water-body {
	/* flex-direction: row !important; */
}

.water-svg {
	color: #fff;
	fill: #fff;
	width: 50px;
	margin-left: -5px;
}

.s-title {
	font-size: 9px;
}

.waterPanelLabel {
	/* position: absolute; */
    /* top: 4px; */
    letter-spacing: 1.4px;
    font-weight: 600;
    font-size: 14px;
}

#water-circulation .modal-header, #water-air .modal-header, #water-temp .modal-header, #water-circulation-ph .modal-header, #water-circulation-ec .modal-header {
	background-image: linear-gradient( 135deg, #bec3c6 10%, #4C83FF 100%);
}

.waterMode {
	width: 25px;
	height: 25px;
	position: absolute;
	top: -12px;
}
.wMode {
	position: relative;
}

.estimated-energy {
	margin-top: auto;
}

.avatar.secondary.energy {
	height: 100%;
	width: auto;
}

#ferro {
	/* min-height: 300px; */
	width:96% !important; 
}

.gantt_container {
	min-height: 350px;
}

.ec-box {
	/* display: none; */
}

.hidro-status {
	height: 10px;
	display: flex;
}


.hidro-status span {
	width: 20px;
    /* margin-bottom: 4px; */
    height: 10px;
    font-size: 7px;
    line-height: 1.8;
    vertical-align: baseline;
	line-height: 1.5;
	
    /* position: absolute; */
    /* top: -5px; */
    /* right: -27px; */
	border-radius: 2px !important;
}

.water-data-box-left {
	display: flex;
	align-items: center;
	position: relative;
}



/* gantt */
.gantt_duration {
	display:flex;
}

.gantt_time_selects {
	display: flex;
}

.gantt_task_drag {
	width: 20px !important;
	display: block !important;
	
}

.gantt_task_drag.task_left {
	left: -15px !important;
}

.gantt_task_drag.task_right {
	right: -15px !important;
}


.gantt_task_drag.task_left:before {
	content: '\300A';
	color: #a6a6a6;
	position: absolute;
    left: 0px;
}

.gantt_task_drag.task_right:after {
	content: '\300B';
    color: #a6a6a6;
    position: absolute;
    right: 0px;
}

.gantt_task_content {
	font-size: 10px !important;
}

.weekend {
			background: #f4f7f4 !important;
		}

		.gantt_selected .weekend {
			background: #FFF3A1 !important;
		}

		.well {
			text-align: right;
		}

		@media (max-width: 991px) {
			.nav-stacked > li {
				float: left;
			}
		}

		.container-fluid .row {
			margin-bottom: 10px;
		}

		.container-fluid .gantt_wrapper {
			height: 700px;
			width: 100%;
		}

		.gantt_container {
			border-radius: 4px;
		}

		.gantt_grid_scale {
			background-color: transparent;
		}

		.gantt_hor_scroll {
			margin-bottom: 1px;
		}
		
		#chartSelector {
			font-size: 11px;
		}
		
		.gantt_cal_light input {
			font-size: 13px !important;
		}
		
		
		.custom-period {
    background-color: #ffcccb; /* Set the background color for the custom period */
    /* Add any other styles as needed */
}

.custom_progress {
			display: inline-block;
			vertical-align: top;
			text-align: center;
			height: 100%;
		}

.first_style {
    background-color: #2eff40;
}

.second_style {
    background-color: blue;
}

.third_style {
    background-color: #ffa200;
}

.fourth_style {
    background-color: red;
}

.fifth_style {
    background-color: purple;
}

.default_style {
    background-color: gray;
}

.gantt_cal_light {
    z-index: 99999999999 !important;
}

.advancer {
	display: none;
}

.stage-box button.heat-pin {
	margin: 10px 0px;
	
	border-radius: 5px;
}

.nutrients-settings {
	display: flex;
    align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	
}

.nutrients-settings button {
	/* width: 20%; */
	/* padding: 0.125rem 1.25rem; */
	/* display: none; */
}

#saveNutrients {
	width: 20%;
}

#saveAsNutrients {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	width: auto;
	height: 100%;
}

.nutrients-save {
	display: none;
	height: 32px;
	gap: 20px;
}

.nutrients-save .input-group-append {
	height: 100%;
}
.nutrients-save input[type="text"] {
	height: 32px;
	font-size: 15px!important;
}



.gantt_scale_line {
	background: #fdd000;
	
}	

.gantt_scale_cell {
	color: #333 !important;
}	 

.plantHide, .plantLHide {
	display: none;
}



@media (max-width: 1028px){
	.modal-dialog {
		max-width: 90%;
	}
	
}

.fa-angle-up {
	display: none;
}

.fa-angle-down {
	display: inline;
}

.subdrop .fa-angle-down {
	display: none;
}

.subdrop .fa-angle-up {
	display: inline;
}

.panel-sensor svg {
	fill: #fff;
}

.controller-box svg {
	width: 30px;
	height: 30px;
	margin-right: 5px;
}

#statistics-chart {
		width: 80%;
	}
	
.abs {
	position: absolute;
	top: 13px;
	left: 0px;
	font-size:6px !important;
}	

@media (max-width: 991px){
	.abs {
	position: absolute;
	top: 10px;
	left: 0px;
	font-size:6px !important;
}
}

.const-title {
	color: #fff;
    margin-bottom: 15px;
    margin-top: -25px;
    text-transform: initial;
    font-weight: 500;
}	

.timezone {
	display: none;
	width: 300px;
    font-size: 15px;
    border-radius: 3px;
    padding:5px;
}	

.timezone-label {
	display: none;
	margin-top: 15px;
}

.message-timezone {
	display: none;
	color: #fdd000;
}

.newControllerSet  {
	font-weight: 600;
}

.separate-b {
	border-bottom: 1px solid #000;
    padding-bottom: 20px;
}

.fs-m::before {
	content: url(../icons/noun-information-55404.svg);
    display: inline-block;
    width: 14px;
    height: 14px;   
    position: absolute;
    left: -20px;
	
}

.setDataBox .form-check {
	padding-left: 0px;
}

.navbar-bg, .toolbar-inner {
    background-color: rgba(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
    backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
}

.toolbar-bottom, .toolbar-inner {
	background: transparent !important;
}
.top-right {
	display:inline-flex;
	column-gap: 5px!important;
}

#calibratePhNext, #calibrateEcNext {
	margin-bottom: 20px;
}

.steps {
	color: #ffd000;
	font-style: italic;
}

.calibration.inside {
	margin-top: 8px;
	padding:3px;
}

#messegeConfirmationPh {
	display: none;
}

#messegeConfirmationEc {
	display: none;
}
.inline_input {
	width: 50px;
    height: 23px;
    text-align: center;
    display: inline;
}

.calibration.set {
	width: auto;
    font-size: 7px;
    position: absolute;
    top: -7px;
    right: 0px;
    padding: 2px;
	line-height: 1.2;
}

.sensors-panels-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}



.base-timer {
  position: relative;
  width: 100px;
  height: auto;
  margin: auto;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.step2ph, .step2ec, #calibratePhNext2, #calibrateEcNext2 {
	display: none;
}

.dot {
  height: 5px;
  width: 5px;
  background-color: #00BA9D;
  border-radius: 50%;
  display: inline-block;
  
}	
	
.controller-info-modal h4 {
	margin: 3px;
}

.setDataBox.Mode.systemStatus {
	border-bottom: 1px solid #fff;
	margin-bottom: 25px;
}

.setDataBox.controller-box.select {
	margin-bottom: 45px;
}

.repatMode {
	padding-top: 60px;
	border-top: 1px solid #000;
}

.smartSocket .table {
	margin-bottom: 60px;
}

.fa-check {
	color: #00BA9D;
}

.fa-circle-xmark {
	color: red;
}

#timeZoneOk {
	display: none;
	margin: 20px 0px;
}

.base-timer button {
	width: 100%;
	margin-top: 10px; 
	margin-bottom: 50px;
}

.calibration button {
	margin-bottom: 10px;
}

#input-datalist {
	display: none;
}

.small-txt-mode {
    text-align: center;
    color: whitesmoke;
    font-size: smaller;
    margin-top: -9px;
}

.green-icon {
	color: #00BA9D;
}

.info-modal h5 {
	color: #ffd000;
    margin-top: 25px;
    font-weight: bold;
}

#calibratePhNext2,
#calibrateEcNext2,
#calibrateEcDone,
#calibratePhDone {
	max-width: 100px;
}

#box-calibrate-buttons {
	text-align: center;
}

.form-switch .form-check-input:focus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2867, 89, 113, 0.3%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
	background-position: right center;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.buyAccess #startDate,#endDate{
	font-size: large !important;
}

.subscrBuy {
	text-align: center;
	color:white;
}


.swal2-actions {
  flex-wrap: nowrap !important;   /* prevent wrapping */
  width: 90% !important;         /* make action container full width */
  margin: auto;
}

.swal2-actions button {
  flex: 1 1 0% !important;        /* make each button stretch equally */
}