@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url('../fonts/RobotoLight.eot');
    src: url('../fonts/RobotoLight.eot') format('embedded-opentype'),
        url('../fonts/RobotoLight.woff2') format('woff2'),
        url('../fonts/RobotoLight.woff') format('woff'),
        url('../fonts/RobotoLight.ttf') format('truetype'),
        url('../fonts/RobotoLight.svg#RobotoLight') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    src: url('../fonts/RobotoRegular.eot');
    src: url('../fonts/RobotoRegular.eot') format('embedded-opentype'),
        url('../fonts/RobotoRegular.woff2') format('woff2'),
        url('../fonts/RobotoRegular.woff') format('woff'),
        url('../fonts/RobotoRegular.ttf') format('truetype'),
        url('../fonts/RobotoRegular.svg#RobotoRegular') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 600;
    src: url('../fonts/RobotoMedium.eot');
    src: url('../fonts/RobotoMedium.eot') format('embedded-opentype'),
        url('../fonts/RobotoMedium.woff2') format('woff2'),
        url('../fonts/RobotoMedium.woff') format('woff'),
        url('../fonts/RobotoMedium.ttf') format('truetype'),
        url('../fonts/RobotoMedium.svg#RobotoMedium') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('../fonts/RobotoBold.eot');
    src: url('../fonts/RobotoBold.eot') format('embedded-opentype'),
        url('../fonts/RobotoBold.woff2') format('woff2'),
        url('../fonts/RobotoBold.woff') format('woff'),
        url('../fonts/RobotoBold.ttf') format('truetype'),
        url('../fonts/RobotoBold.svg#RobotoBold') format('svg');
}

.btn-primary {
    color: #fff;
    background-color: #f8773f;
    border-color: #f8773f;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/*------------ Login page ------------*/

.login-page {
    height: 100vh;
    background-image: url(../images/banner-image.png);
    background-repeat: no-repeat;
    background-position: right -30px center;
    background-size: 59%;
}

.login-sec {
    width: 35%;
}

.login-page .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
}

span.logo {
    margin-bottom: 37px;
    display: flex;
}

.login-sec .bold-font {
    color: #252525;
    font-size: 28px;
    line-height: normal;
    font-weight: 700;
}
.mode-values .mode-opt input[type=radio]:checked+.mode-label {
    background: #527FF4;
}
.mode-values .mode-opt input[type=radio]:checked+.mode-label.green {
    background: #1bca5f;
}
.mode-values .mode-opt input[type=radio]:checked+.mode-label.yellow {
    background: #feca2d;
}

.login-sec p {
    font-size: 17px;
    line-height: 28px;
    color: #252525;
    padding-right: 73px;
    font-weight: 500;
    width: 91%;
}

.login-form {
    margin-top: 45px;
    width: 90%;
}

.login-group input {
    background: #F7F8F9;
    border: 1px solid #E8ECF4;
    color: #252525;
    border-radius: 25px;
    margin-bottom: 0;
    height: 56px;
    width: 100%;
    padding: 0 22px;
    outline: none;
    font-size: 15px;
    font-weight: 400;
}

.login-group {
    position: relative;
    margin-bottom: 20px;
}

.login-group button.hide-img {
    position: absolute;
    right: 12px;
    top: 14px;
}

.login-form .login-button {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 25px;
    background: #E7741E;
    border: none;
    justify-content: center;
    color: #fff;
    height: 56px;
    align-items: center;
    transition: 0.2s;
    font-weight: 500;
    font-size: 15px;
}

.login-form .login-button:hover {
    transition: 0.2s;
    background: #777777;
}

.hide-img {
    position: absolute;
    right: 12px;
    top: 14px;
    outline: none;
    border: none;
    background: transparent;
}

.hide-img img.eye-hide {
    top: 5px;
    /* visibility: hidden; */
}

.hide-img img {
    position: absolute;
    right: 0px;
}

/*------------ End Login page ------------*/

/*------------ Header section ----------------*/

.header {
    padding: 20px 0;
    background: #fff;
}

.header .container {
    max-width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.head-left img {
    max-width: 132px;
}

.alert-btn {
    background: #527FF4;
    font-size: 15px;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100px;
    box-shadow: unset !important;
}


.alert-btn:hover {
    background: transparent;
    color: #527FF4;
    border: 1px solid #527FF4;
}

.alert-btn:hover img {
    filter: sepia(100) saturate(100) brightness(0.5) hue-rotate(160deg);
}

/*------------ Header section ----------------*/

.dash-head {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    background: #fff;
    padding: 15px 0 0 0 !important;
    border-radius: 10px;
    align-items: center;
}

.book-p {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.dash-left {
    width: 40%;
}

.nav-bread {
    width: 100%;
}

.nav-bread ol.breadcrumb {
    width: 100%;
}


.breadcrumb-item a {
    color: #B2B2B4;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

li.breadcrumb-item {
    position: relative;
}

.breadcrumb-item.active {
    color: #252525;
    position: relative;
    font-size: 14px;
    font-weight: 600;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(270deg);
    filter: brightness(60%) grayscale(1) sepia(1) invert(1);
    background: url("../images/side-bar/left.png") no-repeat;
    background-size: contain;
    padding: 0;
    position: absolute;
    top: 7px;
    left: -7px;
}

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

.checkbox-info {
    position: absolute;
    left: 19px;
    opacity: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.info-label label {
    width: 100%;
    font-size: 14px;
    display: flex;
    cursor: pointer;
    padding-left: 30px;
    position: relative;
    color: #252525;
    font-weight: 600;
}

.ac-data i.fa.fa-trash {
    color: #fff;
    font-size: 12px;
}

.checkbox-info+label::before {
    content: '';
    position: absolute;
    border: 1px solid #000000;
    width: 20px;
    height: 20px;
    text-align: center;
    color: transparent;
    transition: .2s;
    right: 0;
    border-radius: 3px;
}

.checkbox-info:checked+label::before {
    content: url("../images/check-white.svg");
    background: #527ff4 !important;
    color: #fff;
    border-color: #527ff4;
}

.box-scroll {
    scrollbar-color: #777777 #B2B2B4;
    scrollbar-width: thin !important;
}

.box-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.box-scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #B2B2B4;
    border-radius: 10px;
}

.box-scroll::-webkit-scrollbar-thumb {
    background: #777777;
    border-radius: 10px;
}

.box-scroll::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

.box-scroll::-webkit-scrollbar-button {
    height: auto;
}

.detail-head {
    font-size: 14px;
    color: #000000b5;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.detail-head b {
    font-weight: 600 !important;
}

.detail-range {
    font-weight: 500;
    font-size: 13px;
    color: #B2B2B4;
    margin-bottom: 10px;
}

.tem-deg {
    font-weight: 400;
    font-size: 13px;
    color: #777777;
    /* margin-top: 25px; */
}

.tem-deg b {
    font-size: 16px;
    font-weight: 600;
}

.disable-text {
    color: #a3a4a5;
}

.status-p {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    width: 50px;
}

.on-text {
    color: #527ff4 !important;
}

.on-deg b {
    color: #527ff4 !important;
}


.ac-data {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    /* position: relative; */
    /* box-shadow: 0 0 30px 0 #ccc; */
    /* padding: 20px; */
    border-radius: 8px;
}

.ac-data .device-listview {
    width: 100%;
}

.select-data {
    width: 110px !important;
}

.info-label {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 4px;
    cursor: pointer;
}

.select-data {
    right: -55px;
}

.status-btn {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 5px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    box-shadow: none !important;
}

.disable-btn {
    background: #F2F3F8;
}

.on-btn {
    background: #E7741E;
}

.on-btn img {
    filter: brightness(0) invert(1);
}

.data-active {
    background: #527ff4 !important;
}

.data-active .detail-head,
.data-active .detail-range,
.data-active .tem-deg,
.data-active .status-p {
    color: #fff;
}

.data-active .status-btn {
    background: #fff;
}

.data-active .status-btn img {
    filter: brightness(1) hue-rotate(322deg) sepia(1) saturate(100);
}

.common-btn {
    background-color: #f8773f;
    color: #fff;
    border: 1px solid #f8773f;
    padding: 5px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: unset !important;
    outline: none !important;
    transition: all 0.3s ease-in-out;

    &:hover {
        background-color: transparent;
        color: #577ff4;
    }
}

.scheon-btn {
    color: #ffffff;
}

.scheon-btn:hover {
    color: #fff;
    background: #09C199;
    border: 1px solid #09C199;
}

.scheoff-btn {
    color: #ffffff;
}

.scheoff-btn:hover {
    color: #fff;
    background: #F85359;
    border: 1px solid #F85359;
}

.sche-btn {
    border: 1px solid transparent;
    background: #f8773f;
    color: #fff;
}

.sche-btn:hover {
    color: #527FF4;
    background: transparent;
    border: 1px solid #527FF4;
}

.scheadd-btn {
    color: #ffffff;
}

.scheadd-btn:hover {
    background: #6B47DB;
    color: #fff;
    border: 1px solid #6B47DB;
}

.scheremove-btn {
    color: #ffffff;
}

.scheremove-btn:hover {
    background: #527FF4;
    color: #fff;
    border: 1px solid #527FF4;
}

.schemove-btn {
    color: #ffffff;
}

.schemove-btn:hover {
    background: #252525;
    color: #fff;
    border: 1px solid #252525;
}

.error {
    color: red;
}

@media only screen and (max-width:991px) {
    .login-page {
        background-image: unset;
    }

    .login-sec {
        width: 100%;
    }
}

/* New Changes 06 / 05 / 2025 */
.page_title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.page_header {
    border: none;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    position: sticky;
    top: 0px;
    z-index: 2;
    background-color: #fff;
}

.page_header .form-control {
    width: auto;
    font-weight: bold;
}

.main-content,
.loc-data,
.mode_sec,
.seasonal_mode_sec {
    width: 84%;
    position: relative;
    padding: 10px;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 8px;
}

.blue_btn {
    font-size: 14px;
    font-weight: 600;
    padding: 5px 20px;
    background-color: #f8773f;
    color: #fff;
    border: 1px solid #f8773f;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}

.blue_btn:hover {
    background-color: transparent;
    color: #f8773f;
}

.green_btn {
    color: #fff;
    background-color: #52be80;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    border: 1px solid #52be80;
    border-radius: 6px;
}

.green_btn:hover {
    background-color: transparent;
    color: #52be80;
}

.grey_btn {
    color: #000;
    background-color: #e5e8e8;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    border: 1px solid #e5e8e8;
    border-radius: 6px;
}

.grey_btn:hover {
    background-color: transparent;
}

table thead tr {
    background-color: #f2f4f4;
}

input:focus-visible,
select:focus-visible,
input:focus,
select:focus {
    outline: unset !important;
}

.bg_sw {
    background-color: #fff !important;
    box-shadow: 0 0 10px 0 #ccc;
    padding: 10px;
    border-radius: 10px;
    height: 100%;
}

.top-breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-breadcrumb .breadcrumb {
    justify-content: flex-end;
    align-items: center;
}

.back_arrow i {
    font-size: 30px;
    margin-bottom: 15px;
}


.page_size {
    width: 85%;
}

.speed-values .speed-opt input[type=radio]:checked+label {
    background: #FF9500 !important;
    color: #fff !important;
    font-weight: 600 !important;
}