.mb-20 {margin-bottom: 20px;}
.gh-new {
    /* width: fit-content; */
    /* width: 100%; */
    padding: 0 32px 10px 0;
    /* height: 145px; */
    height: fit-content;
    position: relative;
}
main .gh-container {
    max-width: 384px;
    min-height: 384px;
    width: 100%;
    /* height: fit-content; */
    height: min-content;
    
    color: var(--white);
    background-color: #023538;
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.gh-new .gh-body {
    /* width: 100%; */
    width: 328px;
    /* width: 400px; */
    /* height: 160px; */
    height: 184px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/main/gh.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 3;
}
.gh-weather-params {

}
.gh-content {
    color: var(--white);
}
.wind-status {
    padding: 0 26px 0 0;
}
.title-part {
    padding: 0 16px 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5px;
    row-gap: 10px;
}
.gh-title {
    max-width: 180px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
}
.gh-status {
    /* min-width: 200px; */
    margin-bottom: 15px;
    padding: 12px 18px;
    font-size: 12px;
    background-color: var(--default-grey);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    transition: background-color var(--trans);
}
.gh-status {}

.gh-status.default {background-color: var(--default-grey);}
.gh-status.ok {background-color: var(--green);}
.gh-status.connected {background-color: var(--yellow);}
.gh-status.manual {background-color: var(--purple);}
.gh-status.warning {background-color: var(--orange);}

/* .gh-new.left-valve::before {
    width: 183px;
    height: 58px;
    content: ' ';
    display: block;
    background-image: url('../images/greenhouse/valveLeft.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 48%;
    top: 0;
    z-index: 1;
}
.gh-new.right-valve::after {
    width: 183px;
    height: 58px;
    content: ' ';
    display: block;
    background-image: url('../images/greenhouse/valveRight.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 48%;
    z-index: 1;
} */
.gh-right-params {
    max-width: 190px;
    width: 100%;
}
.gh-valves {
    display: flex;
    align-items: center;
}
.gh-valves .valve {
    display: none;
    /* width: 183px; */
    width: 143px;
    /* height: 58px; */
    height: 48px;
    display: flex;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    translate: rotate var(--trans);
}
.gh-new.left-valve .valve.left-valve,
.gh-new.left-valve .gh-valve-param.left-param,
.gh-new.right-valve .valve.right-valve,
.gh-new.right-valve .gh-valve-param.right-param {
    display: flex;
}
.gh-valves .valve.left-valve {
    right: 55%;
    /* right: 48%; */
    /* top: 5px; */
    top: 8px;
    background-image: url('../images/main/valveLeft.png');
    transform-origin: top right;
    transform: rotate(-21deg);


}
.gh-valves .valve.right-valve {
    /* top: 5px; */
    top: 8px;
    left: 48%;
    background-image: url('../images/main/valveRight.png');
    transform-origin: top left;
    transform: rotate(21deg);



}


.valve-value {
    width: 41px;
    background: unset;
    border: unset;
    color: #fff;
    text-align: center;
}
.valve-value  {
    -moz-appearance: textfield; /* Для Firefox */
    appearance: textfield; /* Для современных браузеров */
  }
  
  /* Убираем стрелки для Webkit-браузеров (Chrome, Safari, Edge) */
  .valve-value ::-webkit-inner-spin-button,
  .valve-value ::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Убираем отступы */
  }
.valve-value {}


.gh-new .gh-params {
    width: 100%;
    padding-top: 30px;
    display: flex;
    align-items: flex-start;
    /* align-items: center;
    justify-content: center; */
}
.gh-new .gh-params.params-between {
    /* padding: 50px 15px 0 25px; */
    /* padding-top: 50px; */
    padding-top: 90px;
    padding-bottom: 10px;
    /* justify-content: space-between; */
}
.gh-new .gh-params.wo-titles {
    padding-top: 50px;
}
.gh-new .gh-param {
    width: fit-content;
    margin: 0 12px;
    display: flex;
    flex-direction: column;
}
.gh-new .gh-param-img {
    /* height: 48px; */
    height: 40px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gh-new .gh-param-img img {
    /* height: 48px; */
    

}
.gh-new .gh-param-name {
    font-family: 'Open Sans';
    /* color: var(--green); */
    color: var(--white);
    font-size: 12px;
    text-align: center;
    line-height: 1;
}
.gh-new .gh-valve-params {
    /* width: 100%; */
    width: 400px;
    position: absolute;
    /* top: 15px; */
    top: 20px;
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
}
.gh-new .gh-valve-params.w-left,
.gh-new .gh-valve-params.w-right {
    width: 220px;
}
.gh-new .gh-valve-params.w-left {justify-content: flex-start;}
.gh-new .gh-valve-params.w-right {justify-content: flex-end;}
.gh-new .gh-valve-param {
    display: none;

    height: 24px;
    width: 64px;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    background-color: var(--dark-green);
    border: 1px solid var(--green);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-family: 'Open Sans';
    font-size: 14px;
    color: var(--white);
}
.gh-new .gh-fan-param {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gh-new .gh-fan-param {}
.gh-new .gh-valve-params {}
.spinning {
    transition: rotate;
    -webkit-transition: rotate;
    -moz-transition: rotate;
    -ms-transition: rotate;
    -o-transition: rotate;

    animation: spinning 1s linear infinite;
    -webkit-animation: spinning 1s linear infinite;
}
@keyframes spinning {
    from {
        transform: rotate(360deg);
      }
}
.hidden {
    visibility: hidden;
}
.gh-new .gh-item {
    width: 80px;
    height: 80px;
    margin: 0 18px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/greenhouse/plants.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.gh-new .gh-item img {
    width: 80%;
    border-radius: 10px;
}
/* .gh-new .gh-item {
    margin-left: 30px;
} */
.gh-new .gh-right-params {
    margin-right: 20px;
}
.gh-new .gh-right-params .gh-param {
    margin: 0 5px;
}
.checkbox-wrapper {}
.checkbox-wrapper {}

.mode-wrapper {
    width: 100%;
    /* margin: 0 16px 0 0; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mode-title {
    margin: 0 20px 0 0;
    font-size: 12px;
}

.checkbox-wrapper .my-checkbox {
    width: 48px;
    height: 24px;
    margin: 0;
    position: relative;
    appearance: none;
    background-color: var(--dark-green);
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    cursor: pointer;
  }

  .checkbox-wrapper .my-checkbox::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  }

  .checkbox-wrapper .my-checkbox,
  .checkbox-wrapper .my-checkbox::after {
    transition: all 100ms ease-out;
  }

  .checkbox-wrapper .my-checkbox::after {
      content: "";
    height: 12px;
    width: 12px;
    position: absolute;
    left: 6px;
    top: 50%;
    background-color: #D9D9D9;
    border-radius: 50%;
    transform: translateY(-50%);
  }


  .checkbox-wrapper .my-checkbox:hover {
    background-color: #044d43;
    transition-duration: 0s;
  }

  .checkbox-wrapper .my-checkbox:checked {
    background-color: var(--green);
  }

  .checkbox-wrapper .my-checkbox:checked::after {
    background-color: #fff;
    left: 32px;
  }

  .checkbox-wrapper :focus:not(.focus-visible) {
    outline: 0;
  }

  /* .checkbox-wrapper .my-checkbox:checked:hover {
    background-color: #535db3;
  } */
.param-icon {
    width: 40px;
    height: 40px;
    background-image: url('../images/main/sprite.png');
    /* background-position: center; */
    /* background-size: contain; */
}
.gh-container-params {
    /* margin: 15px 0 10px 0; */
    margin: 16px 0;
    /* display: flex;
    align-items: stretch;
    justify-content: space-between; */
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    row-gap: 2px;
    column-gap: 20px;

}
.gh-container-params .gh-right-params {
    max-width: unset;
}
.gh-container-params .param-icon {
    min-width: 40px;
    margin: 0 16px 0 0;
}
.param-icon.weather-no {background-position:357px -440px;}
.param-icon.weather-cloudy {background-position:618px -775px;}
.param-icon.weather-cloudy-blue {background-position:409px -395px}

/* .param-icon.wind-no {background-position:202.3px 93px;} */
.param-icon.full-sun {background-position: -6px -3px;}

.param-icon.wind-no-info {background-position: 150px 93.5px;}
.param-icon.wind-no {background-position: 202px 93.5px;}
.param-icon.wind-st-1 {background-position: 202px 480.5px;}
.param-icon.wind-st-1-1 {background-position: 202px 432.5px;}
.param-icon.wind-st-2 {background-position: 202px 384.5px;}
.param-icon.wind-st-2-1 {background-position: 202px 337.5px;}
.param-icon.wind-st-3 {background-position: 202px 290.5px;}
.param-icon.wind-st-3-1 {background-position: 202px 242.5px;}
.param-icon.wind-st-4 {background-position: 202px 193.5px;}
.param-icon.wind-st-4-1 {background-position: 202px 143.5px;}




.param-icon.temp-stage-1 {background-position: 254px -5px;}
.param-icon.temp-stage-2-down {background-position: 254px -52px;}
.param-icon.temp-stage-2-up {background-position: 254px -102px;}
.param-icon.temp-stage-3 {background-position: 254px -148px;}
.param-icon.temp-stage-4-down {background-position: 254px -194px;}
.param-icon.temp-stage-4-up {background-position: 254px -242px;}
.param-icon.temp-alarm {background-position: 254px -291px;}
.param-icon.temp-turned-off {background-position: 254px -340px;}
.param-icon.temp-no {background-position: 254px -390px;}




.param-icon.wet-alarm {background-position: -162px -4px}
.param-icon.wet-stage-1 {background-position: -162px -52px}
.param-icon.wet-stage-2 {background-position: -162px -100px}
.param-icon.wet-stage-3 {background-position: -162px -147px}
.param-icon.wet-stage-4 {background-position: -162px -194px}
.param-icon.wet-turned-off {background-position: -162px -242px}
.param-icon.wet-no {background-position: -162px -290px}

.param-icon.fan-stage-1 {
    background-position: 356.5px -54px;
    animation: spinning 2s linear infinite;
    -webkit-animation: spinning 1.5s linear infinite;
}

.param-icon.fan-stage-2 {
    background-position: 356.5px -100px;
    animation: spinning 1.5s linear infinite;
    -webkit-animation: spinning 1.2s linear infinite;
}

.param-icon.fan-stage-3 {
    background-position: 356.5px -149px;
        animation: spinning .8s linear infinite;
    -webkit-animation: spinning 1s linear infinite;
}

.param-icon.fan-alarm {
    background-position: 356.5px -195.4px;
    animation: spinning .3s linear infinite;
    -webkit-animation: spinning .3s linear infinite;
}

.param-icon.fan-turned-off {
    background-position: 356.5px -6px;
}

.param-icon.fan-no {
    background-position: 356.5px -242.4px;
}
.param-icon.no-weather {
    background-position: -7px -4px;
}

[class^="fan-stage-"],
.fan-alarm {
    transition: rotate;
    -webkit-transition: rotate;
    -moz-transition: rotate;
    -ms-transition: rotate;
    -o-transition: rotate;
}
.param-container {
    display: flex;
    align-items: center;
}
.param-container img {
    margin-right: 10px;
}
.param-container .param-values {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}
.gh-param.graphics-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
    bottom: -20px;

}

.graphics-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#0C4D2D, #0F6339);
    border-radius: 8px;
    cursor: pointer;
}
.graphics-btn svg path {
   transition: stroke var(--trans)
}
.graphs-input:checked + .gh-container {}
.graphs-input:checked + .gh-content .gh-right-params .graphics-btn svg path,
.graphics-btn:hover svg path {
    stroke: #F6BF04;
}
.graph {
    min-height: 225px;
    width: 100%;
    height: fit-content;
    /* height: 192px; */
    padding: 0 24px 12px 16px;
    display: none;
    box-sizing: border-box;
    background-color: #04403C;
}
.graphs-input {display: none;}
.graphs-input:checked + .gh-content .graph {display: flex;}
.graph-wrapper {
    width: 100%;
    position: relative;
}
.graph-wrapper .open-graph-separately {
    position: absolute;
    top: 140px;
    right: 10px;
    /* bottom: 10px; */
    z-index: 2;
}
.apexcharts-yaxis-label {
    fill: #fff;
}
.apexcharts-tooltip-title,
.apexcharts-tooltip-text * {
    color: #000;
}
.graph-container .apexcharts-legend {
    padding-right: 70px;
}
.apexcharts-legend-text {font-style: italic;}
.apexcharts-yaxis-label {}
.manual-mode .manual-param {display: flex;}
.manual-param {
    width: 40px;
    height: 20px;
    margin: 5px 0 0 0;
    display: none;
    align-items: center;
    line-height: 1;
    border: unset;
    border-bottom: 1px solid #9747FF;
    background-color: unset;
}
.manual-param input {
    width: 22px;
    border: unset;
    background-color: unset;
    font-size: 12px;
    color: var(--white);
    font-weight: bold;
    font-style: italic;
    outline: none;
}
.manual-param .manual-param-unit {
    /* padding: 0 0 0 5px; */
    font-size: 12px;
}
.manual-param input::-webkit-outer-spin-button,
.manual-param input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.manual-param input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
@media screen and (max-width: 1260px) {
    #gh-list {
        /* min-height: fit-content; */
        grid-template-columns: repeat(2, 384px);
        
        
    }
}
@media screen and (max-width: 900px) {
    #gh-list-wrapper {
        height: calc(100vh - 68px);
        overflow: hidden;
        overflow-y: scroll;
    }
    #gh-list {
        grid-template-columns: 1fr;
    }
}




/* @media (min-width: 999px) and (max-width: 1400px), (max-width: 500px) { */

@media screen and (max-width: 998px) {
    :root {
        --index-block-padding-top: 100px;
    }
    #index-block {
        /* height: fit-content; */
    }
    #index-info {
        top: calc(40% - var(--index-block-padding-top));
        /* margin-top: 180px; */
    }
    #index-block h1 {
        font-size: 40px;
    }
    #index-block h2 {
        font-size: 14px;
    }
    #index-block .btn {
        max-width: 270px;
        height: 40px;
        font-size: 14px;

    }
    #fond-info {
        grid-template-columns: 1fr;
    }
    #fond-info img {
        width: 100px;
    }
    #fond-info .text {
        grid-row: 1;
    }
    #index-greenhouses {
        margin-bottom: 50px;
        /* width: calc(100% - 40px); */
        /* margin: 0 20px; */
        /* grid-template-columns: 1fr; */
        /* position: initial; */
    }
    #main {
        grid-template-columns: 1fr;
    }
    .green-grad-back {
        padding-top: 50px;
    }
    #index-greenhouses {
        max-width: 470px;
    }
    #index-greenhouses .greenhouse {
        min-height: unset;
    }
    #index-greenhouses .greenhouse .gh-new {
        margin-top: 20px;
    }
    
    #monitor-containter {
        grid-template-columns: 1fr;
    }
    .gh-new .gh-params.params-between {
        max-width: 380px;
    }
    /* #monitor-left .gh-new.left-valve::before,
    #monitor-left .gh-new.right-valve::after {top: 0;} */
    .gh-new.left-valve::before,
    .gh-new.right-valve::after {top: 0;}

    /* #monitor-left .gh-new .gh-valve-params { */
    /* .gh-new .gh-valve-params { */
        /* width: 70%; */
        /* top: 28px; */
    /* } */
    #monitoring-block {
        /* height: auto; */
        height: 2000px;
    }
   /* #monitor-left  {
        max-width: 385px;
        margin: 0 auto;
    } */
    /* #monitor-left .gh-new .left-valve { */
    .gh-new .left-valve {
        /* left: 29%; */
        /* left: 32%; */


        /* left: 11%; */
        /* top: 5px;
        left: 6%; */
    }
    /* #monitor-left .gh-new .right-valve { */
    /* .gh-valves .valve.right-valve {left: 45%;} */
    /* .gh-new .right-valve { */
        /* left: 51%; */
    /* } */
    /* #monitor-left .gh-new .right-valve {}
    #monitor-left {}
    #monitor-left {} */
     #third-block {max-width: calc(100% - 40px);}
     #monitor-right img {margin: 0;}


}
@media screen and (max-width:768px) {
    .gh-new .gh-body {
        max-width: 300px;
        height: 170px;
        margin: 0 auto;
    }
    .gh-new.left-valve::before,
    .gh-new.right-valve::after {
        /* max-width: 183px; */
        max-width: 135px;
        width: 50%;
        top: 12px;
    }
    .gh-valves .valve {
        width: 130px;
        height: 44px;
    }
    .gh-valves .valve.right-valve {
        left: 46%;
    }
    .gh-new .gh-valve-params {
        /* top: 25px; */
    }
    .gh-new .gh-valve-params .valve-value {
        width: 25px;
        font-size: 12px;
    }
    .gh-new .gh-valve-param {
        width: 48px;
        font-size: 12px;
    }
    .gh-new .gh-item {
        margin-left: 20px;
        width: 40px;
        height: 40px;
    }
    .gh-new .gh-param-img img {
        height: 30px;
    }
    .gh-new .gh-fan-param {
        /* width: 30px;
        height: 30px; */
        /* top: 30px; */
    }
    #main .gh-title {font-size: 14px;}
    /* main .gh-container {
        height: min-content;
    } */
    /* .gh-valves .valve {
        width: 120px;
        height: 40px;
    }
    .gh-valves .valve.left-valve {
        left: unset;
        right: 54%;
        top: 6px;

    }
    .gh-valves .valve.right-valve {
        right: unset;
        left: 45%;
        top: 6px;

    } */


}
@media screen and (max-width: 500px) {
    #index-block .wrapper {
        padding: 0 30px;
    }
    .gh-abilities {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
    

    /* #index-greenhouses .greenhouse {
        padding: 30px 8px;
    } */
    #monitoring-block {height: 1800px;}
    .gh-title {font-size: 12px;}
    .mode-title {margin: 0 5px 0 0;}
    .checkbox-wrapper .my-checkbox {
        width:  35px;
        height: 20px;
    }
    .checkbox-wrapper .my-checkbox::after {
        left: 4px;
    }
    .checkbox-wrapper .my-checkbox:checked::after {
        left: 20px;
    }




    main #gh-list-wrapper {
        max-width: 336px;
    }
    main #gh-list {
        grid-template-columns: 336px;
    }
    #main .gh-title {font-size: 12px;}
    /* Из index.css */
    .gh-body {
        height: 150px;
    }
   .gh-new .gh-valve-params {
        width: 300px;
        top: 20px;
    }
    .gh-new .gh-fan-param {
        top: 10px;
        transform: scale(0.7);
    }
    .gh-new .left-valve,
    .gh-new .right-valve {
        width: 110px;
        top: 16px;
    }
    .gh-new .left-valve {right: 54%;left: unset;}
    .gh-new .right-valve {left: 46%;right: unset;}
    .gh-new .gh-item {
        min-width: 40px;
        margin: 0 10px;
    }
    .gh-new .gh-param-img {height: 30px;}
    .gh-param-name {font-size: 12px;}
    .inner-wet-icon,
    .inner-temp-icon {transform: scale(0.7);}
    .gh-param-text {margin-left: 5px;}
    .gh-param-text span {font-size: 10px;}
    .gh-param.graphics-btn {right: 10px;transform: scale(0.7);}
    .wind-status {
        font-size: 12px;
    }
    .gh-container-params {
        grid-template-columns: 1fr 1fr;
    }
    .gh-container-params .param-icon {
        margin: 0 8px 0 0;
    }
    .gh-new .gh-params.params-between {
        padding-top: 50px;
    }
    main .gh-container {
        min-height: 344px;
    }

    #gh-list .gh-container {
        width: 310px;
        height: min-content;
    }
    #gh-list .gh-body {
        max-width: 300px;
        width: 100%;
        height: 140px;
    }
    .gh-valves .valve.left-valve {right: 57%;}
    .gh-valves .valve.right-valve {left: 45%;}
    /* .gh-param.graphics-btn {} */



}