@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);
    }

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

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


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


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


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

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


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

@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: 484px) {
    .sensor-status-container {
        flex-direction: column;
        align-items: flex-end;
    }

    .LatestReport-width {
        font-size: 13px;
    }
}

@media only screen and (max-width: 352px) {
    .LatestReport-width {
        font-size: 11px;
    }
}



@media only screen and (max-width: 400px) {
    .control-table-sensorConnection-data > section:first-child > span {
       font-size:12px;
    }

    .control-table-sensorConnection-header > section:first-child > span {
       font-size:12px;
    }
}

@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;
    }
}


@media only screen and (max-width: 340px) {
    .control-table-sensorConnection-data > section:first-child > span {
        font-size: 11px;
    }

    .control-table-sensorConnection-header > section:first-child > span {
        font-size: 11px;
    }
}