@media only screen and (min-width: 1500px) {

    .img-send-number-container {
        height: auto;
        top: 350px;
        left: 0;
        right: 0;
        margin-left: 60px;
        margin-right: 700px;
    }

    .img-send-number-container h2 {
        color: #FFFFFF;
        font-family: PeydaBold;
        font-size: 35px;
    }

    .img-send-number-container h5 {
        color: #FFFFFF;
        font-family: PeydaThin;
        font-weight: 600;
        font-size: 35px;
        padding-right: .3rem;
    }

    .img-send-number-form>div:nth-child(1) input {
        border-radius: 30px;
        height: 60px;
        font-size: 20px;
    }

    .img-send-number-form>div:nth-child(2) input {
        border-radius: 30px;
        height: 60px;
        font-size: 20px;
    }

    .img-send-number-form>div:nth-child(1) input::placeholder {
        color: #434343;
        font-size: 20px;
        font-weight: bold;
    }
}

@media only screen and (max-width: 1199.98px) {
    .header {
        padding: 10px;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 20px;
    }

    .index-sidebar {
        width: 100%;
        margin-bottom: 20px;
    }


    .main-body {
        width: 100%;
        margin-right: 0;
    }

    .main-body-chart {
        width: 100%;
        margin-right: 0;
    }

    .body-container {
        padding: 20px 75px 0 75px;
    }

    .auto-container {
        padding: 20px 75px 0 75px;
    }

    .sidebar-box-header-number-container {
        width: 23%;
    }

    .sidebar-box-header-text-container {
        width: 75%;
    }

    .sidebar-back-button {
        justify-content: space-between !important;
        padding-right: 2rem;
        padding-left: 40%;
    }

    .main-chart-detail {
        padding: 2rem 10rem;
    }

    .hall-no-info {
        height: calc(100vh - 3.5rem - 3.35rem - 10px);
    }
}

@media only screen and (max-width: 991.98px) {
    .chart-sidebar {
        width: 100%;
    }

    .chart-sidebar-container {
        justify-content: center;
    }

    .chart-sidebar-item:nth-child(2) {
        margin: 0px 20px;
    }

    .chart-main {
        width: calc(100%);
        margin: 0;
    }

    .chart-main-datetime-container {
        display: flex;
        justify-content: center;
        width: 100%;
        background-color: #FFFFFF;
        margin: 0;
        padding: 10px;
        border: 1px solid #D9D9D9;
        border-right: none;
        border-left: none;
        border-radius: 0;
    }

    .chart-main-header-text {
        padding: 15px;
    }

    .chart-profile {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .chart-profile-container {
        width: 90%;
    }

    .chart-main-header-container {
        padding: 0;
    }

    .control {
        padding: 0.8rem;
    }

    .fan-attribute-item {
        width: 100%;
    }

    .fan-attribute-item-power {
        margin-right: 0;
    }

    .fan-attribute-item-speed {
        margin-left: 0;
        margin-bottom: 5px;
    }

    .fun-value {
        text-align: left;
    }

    .fan-control-item {
        width: 100%;
        margin-bottom: 5px;
    }

    .image {
        padding: 0 3rem;
    }

    .image-box {
        width: 49%;
    }

    .chart-detail-sensor>section:first-child {
        margin-bottom: 1rem;
        width: 85%;
    }

    .chart-detail-sensor>section:first-child>section:first-child>section:nth-child(2) {
        width: 100%;
        margin-right: 0rem;
    }

    .chart-detail-sensor>section:first-child>section:first-child>a:nth-child(1) {
        width: 100%;
        margin-bottom: 1rem;
    }

    .chart-detail-back-button {
        justify-content: space-between !important;
        padding-right: 2rem;
        padding-left: 20%;
    }

    .images-container>section>span {
        border-radius: 10px;
        padding: .4rem;
        width: calc(calc(100% - 1rem) / 2);
    }

    .auto-body-bottom-content-sensor form>section>div:nth-child(1) {
        width: 100%;
        margin-bottom: 1.2rem;
    }

    .sensor-list {
        width: 100%;
    }

    .sensor-list>div>div:nth-child(2) {
        margin: 0;
    }

    .sensor-list>div>div>div {
        margin-bottom: .4rem;
    }

    .sensor-list>div>div>div>span {
        width: 100%;
    }

    .sensor-list>div>div>div>div {
        width: 100%;
        text-align: center;
    }

    .auto-accordion-off>section:nth-child(1)>section:nth-child(1)>section:nth-child(1) {
        width: 100%;
        margin-bottom: 1rem;
    }

    .auto-accordion-off>section:nth-child(1) section section section>span {
        font-size: 12px;
    }

    .auto-accordion-off>section:nth-child(1)>section:nth-child(1)>section:nth-child(2) {
        width: 100%;
    }

    .auto-accordion-off>section:nth-child(1) section section section>span:nth-child(1)>a img {
        top: .9rem;
    }

    .auto-accordion-off>section:nth-child(1)>section>section:nth-child(2)>section>section:nth-child(1) {
        background-color: #FFFFFF;
        padding: .5rem;
        border-radius: 7px;
        width: 100%;
        margin-bottom: 1rem;
    }

    .auto-accordion-off>section:nth-child(1)>section>section:nth-child(2)>section>section:nth-child(2) {
        width: 100%;
    }

    .auto-button-edit {
        margin-bottom: 0rem;
        width: 48%;
    }

    .auto-button-delete {
        font-size: 13px;
        width: 48%;
    }

    .auto-box>section:nth-child(2) {
        padding: .5rem;
    }

    .auto-box>section:nth-child(1)>section>section:nth-child(1) {
        display: none;
    }

    .auto-box>section:nth-child(1)>section>section:nth-child(2) {
        width: 100%;
        padding: 0 .5rem;
    }

    .auto-box>section:nth-child(2)>section {
        width: 100%;
    }

    .auto-box>section:nth-child(2)>section>section {
        width: 100%;
    }

    .auto-box>section:nth-child(2)>section:nth-child(2) {
        margin: .5rem 0;
    }

    .setting-table-header {
        display: none !important;
    }


    .setting-table>section {
        border: 1px solid #F0F0F0;
        border-radius: 10px;
        padding: .5rem 1rem;
        margin-bottom: .5rem;
    }

    .setting-table-header-off {
        display: inline-block;
    }

    .setting-table-header-off {
        width: 30%;
    }

    .setting-table-body {
        width: 70%;
    }

    .setting-table-header-off>section>span {
        width: 100%;
        line-height: 3rem;
        text-align: right;
    }

    .setting-table-body>section>span {
        width: 100%;
        line-height: 3rem;
        text-align: left;
        border: 0;
    }

    .setting-table-body>section>span:nth-child(4) {
        border-left: 0;
    }

    .client-page {
        padding: 50px 0
    }
}

@media only screen and (max-width: 767.98px) {
    .header-profile {
        width: 100%;
        text-align: center;
        display: none;
    }

    .header-md {
        position: relative;
        margin-bottom: 2rem;
    }

    .header-md::after {
        content: "";
        position: absolute;
        bottom: -.5rem;
        right: -25px;
        height: 1px;
        width: calc(100% + 50px);
        background-color: #BFBFBF;
    }

    .sheet {
        padding-right: 4rem;
    }

    .sheet-item {
        margin-left: 3rem;
    }

    .image-box {
        width: 100%;
    }

    .image {
        padding: 0 2rem;
    }

    .sidebar-back-button {
        justify-content: space-between !important;
        padding-right: 2rem;
        padding-left: 20%;
    }

    .main-chart-detail {
        padding: 2rem 3rem;
    }

    .sidebar {
        display: none;
    }

    /*.chart-main-title {
        display: none;
    }*/

    .header-second {
        display: block;
    }

    .hall-info>section>section>section:nth-child(2) {
        box-sizing: border-box;
    }

    .hall-info section section section section>span:nth-child(2) {
        margin-left: 0;
    }

    .hall-info>section {
        padding: 0rem;
    }

    .hall-accordion-off section section section section>span:nth-child(1)>a img {
        top: .7rem;
    }

    .hall-accordion-off section section>section:nth-child(1) {
        margin-bottom: .2rem;
    }

    .package-info {
        width: 100%;
        margin-bottom: .6rem;
    }

    .control-table-item {
        border: 1px solid #F0F0F0;
        border-radius: 10px;
        margin-bottom: .5rem;
    }

    .control-table-header-first {
        background-color: #FFFFFF;
    }

    .control-table-header {
        width: 40%;
        border-radius: 15px;
    }

    .control-table-header>section:first-child>span {
        width: 100% !important;
        text-align: right !important;
        color: #434343;
    }

    .control-table-header>section:first-child {
        padding-right: 1rem;
    }

    .control-table-header-show {
        display: block;
    }

    .control-table-data>section:first-child>span {
        justify-content: left;
        border: 0;
        padding: .8rem !important;
        max-height: 3.3rem;
        min-height: 3.3rem;
        width: 100% !important;
    }

    .control-table-data>section:first-child>span:first-child {
        width: auto !important;
        text-align: left;
        padding: .6rem 1.1rem;
    }



    .control-table-setpoint-header {
        width: 40%;
        border-radius: 15px;
    }


    .control-table-setpoint-header>section:first-child>span {
        width: 100% !important;
        text-align: right !important;
        color: #434343;
    }


    .control-table-setpoint-header>section:first-child {
        padding-right: 1rem;
    }


    .control-table-setpoint-header-show {
        display: block;
    }

    .control-table-setpoint-header-first {
        display: none;
    }


    .control-table-setpoint-data>section:first-child>span {
        justify-content: left;
        border: 0;
        padding: .8rem !important;
        max-height: 3.3rem;
        min-height: 3.3rem;
        width: 100% !important;
    }



    .images-container>section>span {
        border-radius: 10px;
        padding: .4rem;
        width: 100%;
    }

    .body-container {
        min-height: calc(100vh - 3.35rem - 3.5rem);
    }

    .auto-container {
        min-height: calc(100vh - 3.35rem - 3.5rem);
    }

    .auto-body-top {
        height: 10rem;
    }

    .auto-body-top-levels {
        padding: 0 .5rem 0 1rem;
        height: calc(12rem - 48px - 2.5rem - 2rem);
    }

    .date-levels-container>span:nth-child(1) span::before {
        width: 0rem;
        height: 0px;
    }

    .date-levels-container>span:nth-child(1) span::after {
        position: absolute;
        content: "تاریخ اجرا شرط";
        font-size: 12px;
        color: #1F1F1F;
        width: 6rem;
        top: 6px;
        right: 42px;
        z-index: 1000;
    }

    .date-levels-container>span:nth-child(2) span::before {
        width: 0rem;
        height: 0px;
    }

    .date-levels-container>span:nth-child(2) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .date-levels-container>span:nth-child(3) span::before {
        width: 0rem;
        height: 0px;
    }

    .date-levels-container>span:nth-child(3) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .date-levels-container>span:nth-child(4) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .date-levels-container>span:nth-child(1) {
        width: 55%;
        background-color: #F0F0F0;
        border-radius: 7px;
        padding: .4rem 1.2rem;
    }

    .auto-body-bottom-content-date form>section>div {
        width: 100%;
        margin-bottom: 1.5rem !important;
    }

    .auto-create-buttons>button:nth-child(1) {
        width: 10rem;
        margin-left: .5rem;
    }

    .auto-create-buttons>a:nth-child(2) {
        width: 8rem;
        margin-left: 0;
    }

    .auto-create-buttons>a:nth-child(3) {
        width: 8rem;
        border: 0;
        justify-content: center;
    }

    .sensor-levels-container>span:nth-child(1) span::before {
        width: 0rem;
        height: 0px;
    }

    .sensor-levels-container>span:nth-child(1) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .sensor-levels-container>span:nth-child(2) span::before {
        width: 0rem;
        height: 0px;
    }

    .sensor-levels-container>span:nth-child(2) span::after {
        position: absolute;
        content: "انتخاب سنسور";
        font-size: 12px;
        color: #1F1F1F;
        width: 6rem;
        top: 6px;
        right: 42px;
        z-index: 1000;
    }

    .sensor-levels-container>span:nth-child(3) span::before {
        width: 0rem;
        height: 0px;
    }

    .sensor-levels-container>span:nth-child(3) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .sensor-levels-container>span:nth-child(4) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .sensor-levels-container>span:nth-child(2) {
        width: 55%;
        background-color: #F0F0F0;
        border-radius: 7px;
        padding: .4rem 1.2rem;
    }

    .condition-levels-container>span:nth-child(1) span::before {
        width: 0rem;
        height: 0px;
    }

    .condition-levels-container>span:nth-child(1) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .condition-levels-container>span:nth-child(2) span::before {
        width: 0rem;
        height: 0px;
    }

    .condition-levels-container>span:nth-child(2) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .condition-levels-container>span:nth-child(3) span::before {
        width: 0rem;
        height: 0px;
    }

    .condition-levels-container>span:nth-child(3) span::after {
        position: absolute;
        content: "شرط های سنسور";
        font-size: 12px;
        color: #1F1F1F;
        width: 6rem;
        top: 6px;
        right: 42px;
        z-index: 1000;
    }

    .condition-levels-container>span:nth-child(4) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .condition-levels-container>span:nth-child(3) {
        width: 55%;
        background-color: #F0F0F0;
        border-radius: 7px;
        padding: .4rem 1.2rem;
    }

    .profile-levels-container>span:nth-child(1) span::before {
        width: 0rem;
        height: 0px;
    }

    .profile-levels-container>span:nth-child(1) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .profile-levels-container>span:nth-child(2) span::before {
        width: 0rem;
        height: 0px;
    }

    .profile-levels-container>span:nth-child(2) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .profile-levels-container>span:nth-child(3) span::before {
        width: 0rem;
        height: 0px;
    }

    .profile-levels-container>span:nth-child(3) span::after {
        content: "";
        font-size: 0;
        color: #1F1F1F;
        width: 0;
    }

    .profile-levels-container>span:nth-child(4) span::after {
        position: absolute;
        content: "مشخصات فرد";
        font-size: 12px;
        color: #1F1F1F;
        width: 6rem;
        top: 6px;
        right: 42px;
        z-index: 1000;
    }

    .profile-levels-container>span:nth-child(4) {
        width: 55%;
        background-color: #F0F0F0;
        border-radius: 7px;
        padding: .4rem 1.2rem;
    }





    /*---------------------------------------------------------------*/
    /*---------------------------------------------------------------*/
    /*page LogReport*/
    /*---------------------------------------------------------------*/
    /*---------------------------------------------------------------*/

    .product-table-item {
        border: 1px solid #F0F0F0;
        border-radius: 10px;
        margin-bottom: .5rem;
    }

    .log-table-header-first {
        background-color: #FFFFFF;
    }

    .log-table-header {
        width: 40%;
        border-radius: 15px;
    }

    .log-table-header-first {
        display: none;
    }

    .log-table-header>section:first-child>span {
        width: 100% !important;
        text-align: right !important;
        color: #434343;
    }


    .log-table-header>section:first-child {
        padding-right: 1rem;
    }


    .log-table-header-show {
        display: block;
    }


    .log-table-data>section:first-child>span {
        justify-content: left;
        border: 0;
        padding: .8rem !important;
        max-height: 3.3rem;
        min-height: 3.3rem;
        min-width: 100% !important;
    }



    .log-table-data>section:first-child>span:first-child {
        width: auto !important;
        text-align: left;
        padding: .6rem 1.1rem;
    }

    .table-responsive>div {
        min-width: 100%;
    }



    .client-page .container-content {
        width: 92%;
        margin-right: 4%
    }
}


@media only screen and (max-width: 1300px) {

    /*---------------------------------------------------------------*/
    /*---------------------------------------------------------------*/
    /*page index*/
    /*---------------------------------------------------------------*/
    /*---------------------------------------------------------------*/
    .header-index {
        border: 0;
    }

    .header-index nav>div {
        padding-bottom: .5rem;
        position: relative;
        display: block;
    }

    .header-index nav>div::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: -25px;
        height: 1px;
        width: calc(100% + 50px);
        background-color: #BFBFBF;
    }

    .header-index nav>div>a:nth-child(1) {
        display: inline-block;
    }

    .header-index nav {
        width: 100%;
    }

    .header-menu {
        display: none;
    }

    .header-menu li {
        display: block;
    }

    .header-menu li {
        margin: 1.5rem 0;
        border-bottom: 1px solid #F0F0F0;
    }

    .header-menu li a {
        padding: 0;
    }

    .header-menu li a:hover {
        color: #000000 !important;
    }


    .header-menu li a:hover::after {
        width: 0;
    }

    .header-logo {
        float: left !important;
        margin-left: 0;
    }

    .header-login {
        display: none;
        width: 100%;
        text-align: center;
    }
}


@media only screen and (max-width: 575.98px) {
    .body-container {
        padding: 10px 0px 0 0px;
    }

    .auto-container {
        padding: 10px 0px 0 0px;
    }

    .sidebar-box-body-row-container {
        border: 1px solid #BFBFBF;
        border-radius: 5px;
        padding: 10px 5px;
        margin-left: 5px;
        width: 33%;
    }

    .sidebar-box-NH3 {
        margin-left: 0 !important;
    }

    .sidebar-box-number-temp {
        margin-left: 0;
    }

    .sidebar-box-body-row-left {
        margin-top: 1.5rem;
        text-align: center;
    }

    .sidebar-box-body-row {
        margin-bottom: 0;
    }

    .sidebar-img {
        margin-left: .2rem;
    }

    .sidebar-img-text {
        font-size: 12px;
    }

    .chart-sidebar-item:nth-child(2) {
        margin: 0px 10px;
    }

    .image {
        padding: 0 1rem;
    }

    .main-chart-detail {
        padding: 2rem 0rem;
    }

    .hall-create-buttons>button:nth-child(1) {
        width: 60%;
    }

    .hall-create-buttons>button:nth-child(2) {
        width: 30%;
        border: 1px solid #BFBFBF;
        margin-right: .5rem;
    }

    .auto-create-container {
        padding: 10px 0px 0 0px;
    }
}

@media only screen and (max-width: 445px) {
    .chart-item-title {
        width: 100%;
    }

    .chart-main-body {
        padding: 2rem .5rem 0 .5rem !important;
        margin-bottom: 2rem;
    }

    .sensors {
        flex-direction: column;
        align-items: center;
    }

    .sensors>section:nth-child(2) {
        margin: 15px 0;
    }

    .chart-item-body {
        width: 100%;
    }

    .sensor {
        width: 100%;
    }

    .sensor-square-humidity {
        width: 100%;
        height: auto;
        aspect-ratio: 3/3;
        background-color: #FFE197;
        border-radius: 7px;
    }

    .sensor-circle-humidity {
        bottom: 1.2rem;
        left: 1.70rem;
        width: 85%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 11px solid #CDA749;
        border-right: 11px solid transparent;
        rotate: 45deg;
        z-index: 1000;
    }

    .sensor-square-temp {
        width: 100%;
        height: auto;
        aspect-ratio: 3/3;
        background-color: #97BAFF;
        border-radius: 7px;
    }

    .sensor-circle-temp {
        bottom: 1.2rem;
        left: 1.70rem;
        width: 85%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 11px solid #587EE1;
        border-right: 11px solid transparent;
        rotate: 45deg;
        z-index: 1000;
    }

    .sensor-square-ammonia {
        width: 100%;
        height: auto;
        aspect-ratio: 3/3;
        background-color: #C6D0BC;
        border-radius: 7px;
    }

    .sensor-circle-ammonia {
        bottom: 1.2rem;
        left: 1.70rem;
        width: 85%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 11px solid #708A55;
        border-right: 11px solid transparent;
        rotate: 45deg;
        z-index: 1000;
    }

    .sensor-circle-white {
        bottom: 1.35rem;
        left: 1.5rem;
        width: 85%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 50%;
        border: 5px solid transparent;
        border-right: 5px solid #FFFFFF;
        rotate: 45deg;
        z-index: 500;
    }

    .sensor-title {
        font-size: 16px;
        top: .7rem;
        right: .8rem;
        z-index: 1000;
    }

    .sensor-number-humidity {
        top: 51%;
        right: 23%;
        width: 50%;
        height: 50%;
        rotate: -45deg;
        z-index: 10000;
        font-size: 18px;
        font-weight: 600;
    }

    .sensor-number-temp {
        top: 51%;
        right: 23%;
        width: 50%;
        height: 50%;
        rotate: -45deg;
        z-index: 10000;
        font-size: 18px;
        font-weight: 600;
    }

    .sensor-number-temp span:first-child span {
        top: -.3rem;
        right: -.4rem;
        font-size: 10px;
    }

    .sensor-number-ammonia {
        top: 25%;
        right: 24%;
        width: 50%;
        height: 50%;
        rotate: -45deg;
        z-index: 10000;
        font-size: 18px;
        font-weight: 600;
    }

    .ppm {
        font-size: 10px;
        font-weight: normal;
        margin-top: -5px;
    }

    .chart-detail-sensor {
        padding: 2rem 0;
    }

    .chart-detail-sensor>section:nth-child(2) {
        width: 100%;
    }

    .chart-detail-table-section {
        flex-direction: row !important;
        justify-content: space-between !important;
        border-bottom: 1px solid #F0F0F0;
        border-left: 1px solid #F0F0F0;
        border-right: 1px solid #F0F0F0;
        padding: 0 .8rem !important;
    }

    .table-header {
        padding: 0;
        background-color: #FFFFFF;
    }

    .table-header-show {
        display: inline-block !important;
    }

    .table-header>section {
        flex-direction: column !important;
        justify-content: space-between;
        padding: 0.8rem 0;
    }

    .table-header>section>span {
        padding: .5rem 0;
    }

    .table-header>section>span:nth-child(1) {
        width: auto;
    }

    .table-header>section>span:nth-child(2) {
        width: auto;
        margin: 0;
    }

    .table-header>section>span:nth-child(3) {
        width: auto;
    }

    .table-data {
        padding: 0 !important;
    }

    .table-data>section {
        flex-direction: column !important;
        justify-content: space-between;
        align-items: end !important;
        padding: 0.8rem 0;
    }

    .table-data>section>span {
        padding: .5rem 0;
    }

    .table-data>section>span:nth-child(1) {
        width: auto;
        text-align: left;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
        padding: 0;
        /*width: 2rem;*/
        /*height:2rem;*/
        /*padding-left: .7rem;*/
        /*border-radius: 50%;*/
        /*background-color: #F0F0F0;*/
    }


    .table-data>section>span>span {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: #F0F0F0;
    }

    .table-data>section>span:nth-child(2) {
        width: auto;
        text-align: left;
        border-bottom: 1px solid transparent;
    }

    .table-data>section>span:nth-child(3) {
        width: auto;
        text-align: left;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

    .images-container {
        padding: 1rem 0.5rem;
    }

    .auto-create-buttons>button:nth-child(1) {
        width: 8rem;
        margin-left: .5rem;
        font-size: 13px;
    }

    .auto-create-buttons>a:nth-child(2) {
        width: 7rem;
        margin-left: 0;
        font-size: 13px;
    }

    .auto-create-buttons>a:nth-child(3) {
        width: 7rem;
        border: 0;
        /*justify-content: center;*/
        font-size: 13px;
    }

    .auto-create-buttons>a:nth-child(3)>img {
        display: none;
    }

    .auto-create-buttons-sensor>button:nth-child(1) {
        width: 15rem;
        font-size: 13px;
    }

    .auto-create-buttons-sensor>a:nth-child(2) {
        width: 9rem;
        margin-left: .5rem;
        font-size: 13px;
    }

    .auto-create-buttons-sensor>a:nth-child(3) {
        width: 9rem;
        font-size: 13px;
    }
}

@media only screen and (max-width: 1200px) {
    .option-img-title {
        font-size: 18px;
    }

    .option-img-footer {
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 992px) {
    .option-img-title {
        font-size: 15px;
    }

    .option-img-footer {
        font-size: 14px !important;
    }

    .chart-main-header-container>span:nth-child(3) {
        padding: .2rem 0;
    }
}

@media only screen and (max-width: 1060px) {
    .index-title {
        font-size: 30px;
    }

    .index-subTitle {
        font-size: 15px;
    }

    .temp-icon {
        display: none;
    }

    .hotspot-icon {
        display: none;
    }

    .tv-border {
        width: 800px;
        min-width: 800px;
    }

    .tv-img {
        width: 650px;
    }

    .img-list-sensor {
        top: 4.5rem;
        right: -1rem;
        width: 170px;
        z-index: 100000;
    }

    .img-fan1 {
        bottom: 10rem;
        left: -1rem;
        width: 130px;
    }

    .img-fan2 {
        bottom: 6rem;
        left: -1rem;
        width: 130px;
    }

    .option-index {
        margin-top: 19rem;
    }
}

@media only screen and (max-width: 992px) {
    .img-send-number-container>h2 {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 861px) {

    .tv-border {
        width: 600px;
        min-width: 600px;
    }

    .tv-img {
        width: 485px;
    }

    .img-list-sensor {
        top: 3rem;
        right: 1rem;
        width: 90px;
    }

    .img-fan1 {
        top: 9.2rem;
        right: 1.7rem;
        width: 75px;
    }

    .img-fan2 {
        top: 11.5rem;
        right: 1.7rem;
        width: 75px;
    }

    .option-index {
        margin-top: 11rem;
    }

    .option-img-title {
        font-size: 14px;
    }
}

@media only screen and (max-width: 767.98px) {
    .send-number {
        width: 93%;
        top: 41.5rem;
    }

    .send-number input {
        background-color: #EEEEEE;
    }

    .send-number button {
        /*font-size: 12px;*/
    }

    .part-absolute {
        top: 17rem;
    }

    .humidity-icon {
        display: none;
    }

    .on-icon {
        display: none;
    }

    .intro-index {
        padding: .5rem;
    }

    .intro-index-box {
        height: 535px;
    }

    .intro-circle-third {
        display: none;
    }

    .option-index {
        margin-top: 12rem;
        padding: 0 .5rem;
    }

    .option-index h3 {
        font-size: 25px;
    }

    .option-index p {
        font-size: 16px;
    }

    .option-img-item {
        margin: .3rem 0 .8rem 0;
    }

    .option-img-title {
        font-size: 16px;
    }

    .option-img-item img {
        padding: 0;
    }

    .option-index {
        margin-top: 17rem;
    }

    .gallery-index>span {
        padding: 0 1rem 0 0;
    }

    .gallery-index>span>span:nth-child(1) {
        display: block;
    }

    .gallery-index h3 {
        font-size: 30px;
    }

    .gallery-index-image-scroll {
        width: 100%;
        min-height: 300px;
    }

    .gallery-index-image {
        height: 300px;
        width: 1125px;
    }

    .gallery-index-image-row1 {
        top: 6px;
        right: 0px;
        width: 1027px;
        height: 139.56px;
        margin-bottom: .2rem;
    }

    .gallery-index-image-row2 {
        bottom: 6px;
        left: 0px;
        width: 1027px;
        height: 139.56px;
    }

    .gallery-index-image img {
        margin: 0 .2rem;
        width: 197.77px;
    }

    footer {
        padding: 0;
        margin-top: 1rem;
    }

    .footer-container {
        padding: 6vw 6vw 1vw 6vw;
    }

    footer article:nth-child(1) img {
        margin-bottom: 4vw
    }

    footer p {
        font-size: 3vw !important;
    }

    footer article:nth-child(2)>div>ul {
        display: none;
    }

    footer article:nth-child(2)>div>a {
        margin: .5rem 0 .5rem 0 !important;
    }

    footer article:nth-child(2) {
        border: none;
    }

    footer article:nth-child(3)>div>p:nth-child(1) {
        text-align: center;
        padding: 2vw 0;
    }

    /* img-send-number css */
    /* ---------------------------------------------------------------------------------------------*/
    .img-send-number-index {
        padding: 0 .5rem;
    }

    .img-send-number-index img:nth-child(1) {
        display: none;
    }

    .img-send-number-index img:nth-child(2) {
        display: block;
    }

    .img-send-number-container {
        top: 140vw;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0 .7rem;
    }

    .img-send-number-container h2 {
        font-size: 29px;
    }

    .img-send-number-container h5 {
        font-size: 29px;
    }

    .img-send-number-form {
        margin-top: 1rem;
    }

    .img-send-number-form>div:nth-child(1) input {
        height: 3rem;
        font-size: 16px;
        background-color: #F0F0F0;
    }

    .img-send-number-form>div:nth-child(2) input {
        height: 3rem;
        font-size: 16px;
    }

    .img-send-number-form>div:nth-child(1) input::placeholder {
        font-size: 14px;
    }

    .img-send-number-form div:nth-child(1) {
        padding-left: 0;
    }

    .img-send-number-form div:nth-child(2) {
        padding-right: 0rem;
    }

    /* blog css */
    /* --------------------------------------------------------------------------------------------- */
    .blog-index {
        margin: 1.5rem 0;
    }

    .blog-container {
        padding-bottom: 1rem;
    }

    .arrow-button {
        display: none;
    }

    .blog-scroll {
        width: 100%;
        padding: .5rem;
        overflow-x: hidden;
    }

    #blog4,
    #blog5,
    #blog6,
    #blog7,
    #blog8 {
        display: none;
    }

    .view-all-blog {
        display: block;
    }

    .view-all-blog:hover {
        color: #FFFFFF;
        background-color: #0F45FF;
    }

    .blog-card-item-container {
        width: 100%;
    }

    .blog-card-item {
        padding: .4rem !important;
        min-width: 0rem;
        width: 100% !important;
        margin-left: 0;
        margin-bottom: 1.5rem;
        -webkit-transition: all .4s;
    }

    .blog-card-body h5 {
        font-size: 22px;
        padding: 0 0 .5rem 2rem;
        line-height: 2rem;
    }

    .blog-card-body p:nth-child(2) {
        color: #BFBFBF;
        padding-left: 3rem;
        text-align: justify;
        display: none;
    }

    .blog-card-body p:nth-child(3) {
        padding-left: .5rem;
        margin-bottom: 0;
    }

    .blog-card-body p:nth-child(3) a span:first-child {
        color: #BFBFBF;
        padding-left: .5rem;
        -webkit-transition: all .4s;
    }

    .blog-card-body p:nth-child(3) a span:nth-child(2) i {
        font-size: 20px;
        color: #0F45FF;
        display: none;
        -webkit-transition: all .4s;
    }

    .blog-card-item-container:target .blog-card-item {
        width: 25rem;
    }

    .blog-card-item-container:target .card-text {
        display: block;
    }

    .blog-card-item-container:target .blog-card-body p:nth-child(3) a span:first-child {
        color: #0F45FF;
    }

    .blog-card-item-container:target .blog-card-body p:nth-child(3) a span:nth-child(2) i {
        display: inline-block;
    }

    /* relico css */
    /* --------------------------------------------------------------------------------------------- */
    .relico-index {
        padding: 1rem .5rem;
    }

    .relico-index-title {
        font-family: PeydaBold;
        font-size: 30px;
        padding-right: 1rem;
        margin-bottom: 1.3rem;
    }

    .relico-index-items>div>div {
        height: 60vw;
        margin-bottom: 7vw;
    }

    .relico-index-items h5 {
        font-size: 4vw;
        margin-bottom: 2.2vw;
    }

    /* social css */
    /* --------------------------------------------------------------------------------------------- */
    .social-index {
        padding: 1.6rem 0 0 0;
    }

    .social-index>div {
        width: 100vw;
        padding: 0 .5rem;
    }

    .social-index-container {
        height: 27rem;
        background-color: #F6F7F9;
        border-radius: 15px;
    }

    .social-index-container>div:nth-child(1) {
        position: absolute;
        top: 0;
        width: 35rem;
        margin-bottom: 3rem;
    }

    .social-index-container>div:nth-child(2) {
        position: absolute;
        bottom: 0;
        /*width: 31rem;*/
        /*margin-bottom: 3rem;*/
    }

    .social-index-title {
        padding-right: 1rem;
    }

    .social-index-title>span {
        font-size: 30px;
    }

    .social-index-button {
        font-size: 16px !important;
        margin: 1rem 0;
    }

    /*---------------------------------------------------------------*/
    /*---------------------------------------------------------------*/
    /*page blog*/
    /*---------------------------------------------------------------*/
    /*---------------------------------------------------------------*/

    .blog-recent {
        padding: 0;
    }

    .blog-recent-card {
        box-shadow: 0 1px 3px #747681 !important;
        border-radius: 4px !important;
    }

    .blog {
        padding: 0;
    }

    .blog-recent-background-img-toggle {
        display: none;
    }

    .blog-recent-img-toggle {
        display: block;
    }
}

@media only screen and (max-width: 710px) {}


@media only screen and (max-width: 666px) {
    .sensor-status-container {
        padding: 8px 16px !important;
    }
}

@media only screen and (max-width: 635px) {
    .tv-border {
        border: 0;
    }
}

@media only screen and (max-width: 635px) {
    .chart-detail-chart>section:nth-child(1) {
        padding: 0;
    }

    .chart-detail-chart>section:nth-child(1)>span:nth-child(1) {
        margin: .5rem;
    }

    .chart-detail-chart>section:nth-child(1)>span:nth-child(2) {
        margin-bottom: .5rem;
    }
}



@media only screen and (max-width: 575px) {
    .sidebar-box-number {
        font-size: 14px;
    }

    .wallet-charge {
        padding: 0 .7rem 0 1rem;
    }
}



@media only screen and (max-width: 516px) {
    .index-title {
        top: 3.3rem;
    }

    .index-subTitle {
        top: 10.4rem;
    }
}

@media only screen and (max-width: 405px) {
    .main-body-header {
        margin: 0;
    }

    .main-body-header-number {
        font-size: 10.5px !important;
    }
}

@media only screen and (max-width: 372px) {
    .sidebar-img-text {
        font-size: 10px;
    }

    .sidebar-box-number {
        font-size: 12px;
    }

    .sheet {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .sheet-chart-link {
        font-size: 12px;
    }

    .sheet-control-link {
        font-size: 12px;
    }

    .sheet-img-link {
        font-size: 12px;
    }

    .sheet-item {
        margin-left: 2.7rem !important;
    }

    .chart-sidebar-item-back-temp {
        background-color: #FFFFFF;
    }

    .chart-sidebar-item-back-NH3 {
        background-color: #FFFFFF;
    }

    .chart-sidebar-item-back-humidity {
        background-color: #FFFFFF;
    }

    .chart-sidebar-item-front-temp {
        top: 11px;
        left: -3px;
    }

    .chart-sidebar-item-front-NH3 {
        top: 11px;
        left: 22px;
    }

    .chart-sidebar-item-front-humidity {
        top: 11px;
        left: 10px;
    }

    .chart-sidebar-item-front-text {
        position: absolute;
        top: 34px;
        left: 39px;
        z-index: 10000;
    }

    .chart-sidebar-item-front {
        border-right: 6px solid #FFFFFF
    }

    .chart-sidebar-item-sensor-humidity {
        right: 24px;
    }

    .chart-sidebar-item-sensor-temp {
        right: 40px;
    }

    .chart-sidebar-item-sensor-NH3 {
        top: 60px;
        right: 14px;
    }

    .chart-sidebar-item-front-text-temp {
        top: 34px;
        left: 14px;
    }

    .chart-sidebar-item-front-text-humidity {
        top: 34px;
        left: 27px;
    }

    .chart-item-status {
        flex-direction: column !important;
        margin-bottom: .2rem;
    }

    .sensor-status-container {
        margin-bottom: .7rem;
    }

    .sensor-status {
        justify-content: space-between;
    }
}

@media only screen and (max-width: 350px) {
    .index-title {
        top: 3.3rem;
        font-size: 24px;
    }

    .index-subTitle {
        top: 10.4rem;
    }

    .send-number button {
        font-size: 12px;
    }

    .img-send-number-container h2 {
        font-size: 20px;
    }

    .img-send-number-container h5 {
        font-size: 20px;
    }

    .img-send-number-form>div:nth-child(1) input {
        height: 2.5rem;
        font-size: 15px;
    }

    .img-send-number-form>div:nth-child(2) input {
        height: 2.5rem;
        font-size: 15px;
    }

    .social-index-title>span {
        font-size: 25px;
    }

    .option-index h3 {
        font-size: 22px;
    }
}