@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);



* {
    box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 4px;
  border: none;
  border-radius: 5px;
}
body{
  margin:0;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-13 {width: 20%;}
.col-14 {width: 30%;}

.row-1 {width: 8.33%;}

.row-2 {width: 16.66%;}

.row-3 {width: 25%;}

.row-4 {width: 33.33%;}

.row-5 {width: 41.66%;}
.row-6 {width: 50%;}


.row-7 {width: 58.33%;}

.row-8 {width: 66.66%;}

.row-9 {width: 75%;}

.row-10 {width: 83.33%;}

.row-11 {width: 91.66%;}

.row-12 {width: 100%;}


[class*="row-"] {
    float: left;
    text-align: center;
}

input {
    width: 100%;
    padding: 6px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    color: black;
}
  
    input[type=date] {
        text-align: center;
    }

select {
    width: 100%;
    padding: 6px 15px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    color: black;
}

    input[type=text]:hover, select:hover, input[type=text]:focus {
        background-color: white;
        border: 1px solid #5fa2db;
    }

input[type=submit] {
    width: 45%;
    background-color: #147cbb;
    color: white;
    padding: 8px 16px;
    margin: 8px 0;
    border: none;
    font-size: 12px;
    font-family: "Arial Black", Gadget, sans-serif;
    text-align: center;

    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
  
    border-radius: 25px;
   
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    display: inline-block;
    border-color:none;
    outline:none;
   
}

    input[type=submit]:hover{
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        margin: 8px 0;
    }

.row-mid {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}



/* ///////////////////////////////   Registration              /////////////////////////////////////////*/

.body-back {
    background: url("../images/ccms.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: fixed;
}

.im-shadows {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: auto;
}
.reg-otp, .reg-login {
    display: none;
}

.login-to a {
    color: white;
    padding: 2px 4px;
    background-color: #147ccb;
    border-radius: 2px;
}

.reg-open {
    background: linear-gradient(rgba(85, 98, 119, 0.6),rgba(119, 139, 172, 0.3));
    color: white;
}

.reg-top {
    padding: 0;
    margin: 0;
}

    .reg-top .header {
        border-radius: 0;
    }

.reg-header h2 {
    font-size: 25px;
}

.reg {
    color: white;
    padding: 2px 4px;
    background-color: #147ccb;
    border-radius: 2px;
}


.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}




    /*///////////////////////////////////       Profile             //////////////////////////////*/
    .pr-content {
        background-color: rgba(163, 163, 163, 0.8);
        margin: 0;
        padding: 0;
        width: 800px;
    }

    .pf-head {
        background: linear-gradient(rgba(180, 180, 180, 1), rgba(80, 80, 80, 1));
        margin: 0;
        padding: 20px 0 0 0;
        border-bottom: 1px solid #656565;
        font-weight: bold;
    }


    .pf-body {
        margin-top: 20px;
        width: 100%;
        float: left;
    }

    .pf-text {
        text-align: left;
        font-size: 15px;
        font-weight: bold;
    }

    .pf-row-heading {
        text-align: left;
    }

        .pf-row-heading h3 {
            text-decoration: underline;
        }

    .pf-selection {
        margin: 10px auto;
    }

    .pf-input-group {
        padding-bottom: 10px;
    }

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

    .pf-edit {
        width: 100%;
    }

    #cancel {
        margin-top: -6px;
        text-decoration: none;
    }

    .pf-edit > span {
        float: right;
        margin-top: -8px;
        padding: 10px;
    }

        .pf-edit > span > i {
            font-size: 20px;
        }

    .otp-section {
        display: none;
    }
    /*//////////////////////////////    Product Reg  ////////////////////////////*/
    .display-das {
        display: none;
    }

    .display-otp {
        display: none;
    }

    .reg-hide {
        display: none;
    }

    .very-hide {
        display: none;
    }
    /*/////////////////////////// map       /////////////////////////////*/
    #map {
        width: 100%;
        height: 500px;
    }


    /*///////////////////////////////////  Check Box     ///////////////////////////////////*/


    .container {
        /*display: block;*/
        position: relative;
        padding-left: 40px;
        padding-top: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        font-size: 14px;
        width: auto;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 3px;
        left: 16px;
        height: 20px;
        width: 20px;
        /*background-color: #5c6c7e;*/
        border: solid 2px #147ccb;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 3px;
        top: 0px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    /*/////////////////////////////////////////////////////////////////////////////*/

    .half {
        width: 50%;
    }

    .one-third {
        width: 70%;
    }

    one-fourth {
        width: 25%;
    }

    .quarter {
        width: 30%;
    }


    .gridview {
        height: 400px;
        overflow: auto;
        background-color: rgba(219, 219, 219, 0.66);
    }

    .bac {
        background-color: #0f79b8;
    }

    .main-buttons {
        padding: 6px 10px 5px 10px;
        background-color: #147cbb;
        color: white;
        cursor: pointer;
        border: none;
        border-radius: 5px;
    }

    .btn-delete {
        padding: 8px 10px;
        text-align: left;
    }

    .das-shadows {
        box-shadow: 2px 4px 2px grey;
    }

    .btn {
        padding: 8px 20px 8px 20px;
    }

    #date {
        text-align: center;
        background-color: none;
        background-color: #f2f2f2;
        border: solid 1px blue;
        font-size: 15px;
        width: 100px;
        padding: 10px 0 10px 0;
    }

    .next-prev {
        width: 80px;
        background-color: #147cbb;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 15px;
        font-weight: bold;
        border: none;
        margin: 10px auto;
    }

    .selection {
        margin: 5px auto;
    }

    .padding-0 {
        padding: 0;
    }

    .margin-0 {
        margin: 0px;
    }

    .device {
        border-radius: 5px;
        color: white;
        padding: 10px;
        height: 80px;
        background: linear-gradient(50deg,rgba(0, 66, 107, 1),rgba(84, 0, 230, 0.91)) !important;
    }

    .time-status {
        padding: 10px;
        height: 80px;
        background: linear-gradient(50deg,#5d4d37,#fa9151) !important;
    }

    .status {
        background: rgba(5, 5, 5, 0.2) !important;
        margin-top: 10px;
    }

        .status > div {
            color: white;
            margin: 1px 0;
        }

    .time-status > div {
        color: white;
        margin: 10px 0;
    }

    #controller {
        font-weight: bold;
        font-size: 20px;
        padding: 10px;
        text-decoration: line-through;
    }

    #updated_time {
        font-weight: bold;
    }

    .phase-heading {
        font-size: 20px;
        font-weight: bold
    }

    .neutral-heading {
        font-size: 16px;
        font-weight: bold
    }
    /* /////////////////               grid data              //////////////////////  */
    .gd-text {
        width: 35%;
    }

    .gd-input {
        width: 65%;
    }

    #btnresult {
        margin-left: 0;
    }



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

    #btnresult {
        margin-left: 40%;
    }
}

    .grid-text {
        width: 40%;
    }

    .grid-input {
        width: 60%;
    }

    .grid-text label {
        font-size: 12px;
        font-weight: bold;
    }
    /*///////////////////////////////// horizontal Menu     ///////////////////////*/

    .topnav {
        overflow: hidden;
        background-color: #333;
    }

        .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 10px 12px;
            text-decoration: none;
            font-size: 14px;
        }

            .topnav a:hover {
                background-color: #ddd;
                color: black;
            }

            .topnav a.active {
                background-color: #1e5799;
                color: white;
            }

    /*///////////////////////////////////   model   ////////////////////////////////////////////////////*/
    .modal, .myModaltwo {
        display: none;
        position: fixed;
        z-index: 99;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .notification {
        display: none;
        position: fixed;
        z-index: 1001;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    .loading {
        display: none;
        position: fixed;
        z-index: 1001;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.7);
    }

    .modal-content-one, .modal-content {
        background-color: rgba(199, 199, 199, 0.98);
        margin: auto;
        padding: 10px;
        width: 30%;
        height: auto;
        text-align: center;
        border-radius: 4px;
        border: none;
        color: black;
    }

    .inputs {
        margin: 5px 5px 5px 0;
    }

    .close {
        color: #aaaaaa;
        float: right;
        margin-top: -15px;
        margin-right: 4px;
        font-size: 28px;
        font-weight: bold;
    }



        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

    #Year1, #Year2, #Year3 {
        display: none;
    }

#resend {
    display: none  ;
    background-color:#147ccb;
    color:white;
    width:45px;
   padding:0 4px 4px 4px;
    font-size:12px;
    cursor:pointer;
}
/*/////////////////       energy     ////////////////////////*/
.energy-loc {
    width: 100%;
}

    .energy-bac {
        background: linear-gradient(#556277,rgba(119, 139, 172, 0.97));
        color: white;
        text-align: center;
        padding: 5px 0 5px 0;
    }

    .energy-head {
        /*font-size: 16px;*/
        /*font-weight: bold;*/
    }

    .energy-val {
        font-size: 20px;
        margin-top: 10px;
    }

        .energy-val > span {
            font-size: 12px;
        }

    .cal-energy {
        float: right;
    }

    .energy {
        width: 33.33%;
    }
    /* /////////////////////     User image      /////////////////////////////////////////////*/

    .user-image {
        margin: 10px 20px auto;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        float: left;
    }

    .user-name {
        margin: 5px 0 0 0;
        float: left;
        text-align: center;
        color: white;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }

    .profile {
        background-color: rgba(56, 69, 97, 0.97);
        margin: -5px;
        float: left;
        text-align: center;
        color: white;
        width: 100%;
        display: none;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }

        .profile ul {
            margin-top: 0;
            padding: 0;
        }

            .profile ul li {
                float: left;
                text-align: left;
                padding: 5px;
                width: 100%;
                list-style: none;
                padding-left: 20px;
            }

                .profile ul li a {
                    background-color: transparent;
                    padding: 10px 4px;
                    border: none;
                    color: white;
                    width: 100%;
                    text-align: left;
                    cursor: pointer;
                    float: left;
                    font-size: 12px;
                    text-decoration: none;
                }

                    .profile ul li a i {
                        padding: 5px;
                    }

                .profile ul li:hover {
                    background-color: rgba(133, 133, 133, 0.4);
                }

                    .profile ul li:hover a {
                        color: black;
                    }

    .ac-active {
        background-color: rgba(133, 133, 133, 0.7);
    }

    #user_name_side, #user_name_nav {
        cursor: pointer;
    }

        #user_name_side:hover .profile {
            display: block;
        }
    /*///////////////////////////   Notification ////////////////////////////////*/
    .notification-content {
        width: 200px;
        position: absolute;
        background: #797979;
        margin-top: 10px;
        right: 30px;
    }



    .notification-open {
        float: right;
        padding: 10px;
        margin-top: 5px;
        color: white;
        background: rgba(92, 92, 92, 0.97);
        border-radius: 40px;
        height: 40px;
        width: 40px;
        margin-right: 10px;
        cursor: pointer;
    }
    /*//////////////////////////  avarage heading /////////////////////////////////////////*/

    .avg-head {
        text-align: left;
    }
    /*////////////////////////        Volt            /////////////////////////////////////////*/
    .phases-heading {
        padding: 0;
    }

    .volt-header {
        background: linear-gradient(#147cbb,#0f79b8);
        color: white;
        border-radius: 3px;
        box-shadow: 3px 3px 3px gray;
        border: none;
        margin: 5px 0 5px 0;
    }

    .volt-max {
        background: linear-gradient(#147cbb,#0f79b8);
        color: white;
        font-size: 15px;
        border-radius: 3px;
        box-shadow: 5px 5px 5px gray;
        margin: 6px 0px 15px 0px;
    }

    .volt-table {
        border-collapse: collapse;
        border-radius: 4px;
    }

    .volt-max-area {
        width: 100%;
        border: 1px solid rgba(117, 117, 117, 0.77);
        margin: 15px 0 10px 0;
    }

    .volt-table td, th {
        border: thin solid #bdb8b8;
        padding: 10px 0 10px 0;
        text-align: center;
        height: 40px;
    }

    .volt-table tr:nth-child(odd) {
        background-color: #dddddd;
    }

    .volt-content {
        background: linear-gradient(45deg,rgba(159, 163, 198, 0.49),rgba(71, 71, 71, 0.66));
        border-radius: 4px;
        /*width: 100%;*/
        margin-bottom: 10px;
        padding: 10px 0 10px 0;
    }

    .graph-bg {
        background: rgba(31, 31, 31, 0.89);
        border-radius: 3px;
        margin: 70px 0 0 0;
        padding: 10px;
        box-shadow: 5px 5px 5px gray;
        color: white;
    }


    .volt-box {
        background: linear-gradient(rgba(168, 168, 168, 1),rgba(77, 77, 77, 1));
    }

    .volt-heads {
        margin-top: -18px;
        text-align: center;
        color: white;
        padding: 10px 5px;
        font-weight: bold;
        font-size: 25px;
        border: none;
        border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(54, 54, 54, 1);
        width: 70px
    }

    .volt-heads-red {
        background: #f82323;
    }

    .volt-heads-yellow {
        background: #e5b827;
    }

    .volt-heads-blue {
        background: #147ccb;
    }

    .volt-value {
        padding: 20px;
        font-size: 30px;
        color: white;
    }
    /*/////////////////////////////        Temp         //////////////////////////////////////////////    */
    .temp-red {
        background: linear-gradient(45deg, #ff8597,#b8001c);
        border-radius: 4px;
        padding: 10px 2px 10px 0px;
        color: white;
        min-height: 80px;
    }

    .temp-yellow {
        background: linear-gradient(45deg, #f5ff85,#ae6e0f);
        border-radius: 4px;
        padding: 10px 2px 10px 0px;
        color: white;
        min-height: 80px;
    }

    .temp-blue {
        background: linear-gradient(45deg, #85baff,#3164af);
        border-radius: 4px;
        padding: 10px 2px 10px 0px;
        color: white;
        min-height: 80px;
    }

    .temp-orange {
        background: linear-gradient(45deg, #E0C583,#AE4D0F);
        border-radius: 4px;
        padding: 10px 2px 10px 0px;
        color: white;
        min-height: 80px;
    }

    .temp {
        background: linear-gradient(45deg, #84dcbc,#3a8273);
        border-radius: 4px;
        padding: 10px 2px 10px 0px;
        color: white;
        min-height: 80px;
    }

        .temp-red, .temp-blue, .temp-yellow, .temp label {
            font-size: 18px;
        }


    .icons i {
        color: rgba(255, 255, 255, 0.63);
        font-size: 23px;
    }

.temp-head {
    background: #147ccb;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 3px;
    box-shadow: 5px 5px 5px gray;
    width: 100%;
    margin-bottom: 10px;
}
.label-header {
    background: #147ccb;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 3px;
   
    width: 100%;
    margin-bottom: 10px;
}

    /*//////////////////////////    Current      /////////////////////////////////////*/

    .current-r {
        background: linear-gradient(45deg, #ff8597,rgba(179, 0, 0, 1),#ff8597);
        border-radius: 4px;
        padding: 5px 0 5px 0;
        color: white;
        margin: 0 0 0px 0;
    }

.sps-r {
    background: linear-gradient(45deg, #2b40ab,rgba(22, 34, 90, 1),#2b40ab);
    border-radius: 4px 4px 4px 4px ;
    padding: 0px 0 8px 0;
    color: white;
    margin: 0 0 0px 0;
}

    .current-y {
        margin: 0 0 0px 0;
        background: linear-gradient(45deg, rgba(255, 194, 71, 1),#ae6e0f,rgba(255, 194, 71, 1));
        border-radius: 4px;
        padding: 5px 0 5px 0;
        color: white;
    }

    .current-b {
        margin: 0 0 0px 0;
        background: linear-gradient(45deg, rgba(41, 123, 255, 0.91),#3164af,rgba(41, 123, 255, 0.91));
        border-radius: 4px;
        padding: 5px 0 5px 0;
        color: white;
    }


    .neutral {
        margin: 0 0 0px 0;
        /*background: linear-gradient(45deg, #84dcbc,#3a8273,#84dcbc);*/
        background: linear-gradient(45deg, #292929,black,#292929);
        border-radius: 4px;
        padding: 5px 0 5px 0;
        color: white;
    }

    .current-g {
        background: linear-gradient(45deg, #00611a,rgba(0, 82, 22, 0.82),#00611a);
        border-radius: 4px;
        padding: 5px 0 5px 0;
        color: white;
        margin: 0 0 0px 0;
    }

    .current-phases hr {
        width: 80%;
    }

    .fourth-res hr {
        width: 70%;
    }

    .curr-r, .curr-y, .curr-b {
        font-size: 16px;
    }

    .current {
        text-align: center;
    }

    .current-graph {
        margin-top: 0px;
    }
    /*/////////////// //////////////      loader //////////////////////////////*/
    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid blue;
        border-bottom: 16px solid blue;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        margin: 1% auto;
        margin-top: 10%;
    }

    .loader-text {
        margin: 0 46% auto;
        font-size: 35px;
        position: absolute;
        color: white;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /*//////////////////////          copy          //////////////////////////////*/

    .copy-right {
        background-color: #147ccb;
        color: white;
        font-size: 10px;
        padding: 10px 0;
    }
    /* / ////////////////////////////          error    ////////////////////////////*/

    .errors {
        background: rgba(31, 31, 31, 0.77);
        color: white;
        font-size: 20px;
        border-radius: 3px;
        box-shadow: 5px 5px 5px gray;
        width: 40%;
        margin-bottom: 10px;
        padding-left: 10px;
        text-align: left;
    }

    /*////////////////////////         error logs          /////////////////////////////*/

    .error-head {
        margin: 20px 0;
    }

    .error_logs {
        max-height: 300px;
        width: 100%;
        overflow: auto
    }

    .error_logs_phase-r {
        background: linear-gradient(45deg, #ff8597,rgba(179, 0, 0, 1),#ff8597);
        padding: 10px 0 10px 0;
        color: white;
        /*font-weight: bold;*/
    }

    .error_logs_phase-y {
        background: linear-gradient(45deg, rgba(255, 194, 71, 1),#ae6e0f,rgba(255, 194, 71, 1));
        padding: 10px 0 10px 0;
        color: white;
        /*font-weight: bold;*/
    }

    .error_logs_phase-b {
        background: linear-gradient(45deg, rgba(41, 123, 255, 0.91),#3164af,rgba(41, 123, 255, 0.91));
        padding: 10px 0 10px 0;
        color: white;
        /*font-weight: bold;*/
    }
    /*///////////////////////////      Error label       ///////////////////////////////////////*/
    .lberror {
        color: red;
    }

    .energy-cal {
        color: white;
        background: #207cca;
        background: -moz-linear-gradient(top, #207cca 35%, #7db9e8 37%, #1e5799 40%, #1e5799 66%, #2989d8 100%);
        background: -webkit-linear-gradient(top, #207cca 35%,#7db9e8 37%,#1e5799 40%,#1e5799 66%,#2989d8 100%);
        background: linear-gradient(to bottom, #207cca 35%,#7db9e8 37%,#1e5799 40%,#1e5799 66%,#2989d8 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#2989d8',GradientType=0 );
    }


    .energy-head-cal {
        height: 40%;
        /*padding:20px;*/
    }

    .energy-val-cal {
        height: 60%;
        /*padding: 20px;*/
    }

    .text-watt {
        width: 100px;
        float: left;
        padding: 4px 10px;
    }

    /*///////////////////////////////////////////////////////////////////*/
    @media only screen and (max-width:1080px) {
        [class*="row-"] {
            width: 100%;
        }


        .half-res {
            width: 50%;
        }

        .quarter-res {
            width: 33.33%;
        }




        .current-phases {
            width: 100%;
        }

        .graph-bg {
            margin-top: 20px;
        }
    }

    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }

        .right-pad {
            padding: 0;
        }


        .sixty {
            width: 60%;
        }

        .fourty {
            width: 40%;
        }

        .energy {
            width: 33.33%;
        }

        .graph-bg {
            margin-top: 20px;
        }

        .selection {
            margin: 0px;
        }

        .half-res {
            width: 50%;
        }

        .quarter-res {
            width: 33.33%;
        }

        .fourth-res {
            width: 25%;
        }

        .current-phases {
            width: 33.33%;
        }


        .energy-head-cal, .energy-val-cal {
            padding: 0px;
        }

        .cal-energy {
            width: 33.33%;
            float: left;
        }

        .energy-up {
            width: 50%;
        }

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

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

@media only screen and (max-width: 640px) {
    /* For mobile phones: */
    .inputs {
        width: 100%;
        margin: 5px 5px 5px 0;
    }

    .modal-content-one, .modal-content {
        padding: 10px;
        width: 60%;
        text-align: left;
    }

    .modal, .myModaltwo {
        padding-top: 10px;
    }



    /*//////////   fonts  12---15  ////////////*/

    .energy-head {
        font-size: 12px;
    }


    .temp-red, .temp-yellow, .temp-blue, .temp {
        padding: 10px 0px 10px 0px;
    }
    /*//////////////////////////////*/

    .half-res {
        width: 50%;
    }

    .fourth-res {
        width: 25%;
        font-size: 14px;
    }

    .quarter-res {
        width: 33.33%;
    }

    .current-phases {
        width: 33.33%;
    }

    .curr-r, .curr-y, .curr-b {
        font-size: 15px;
    }

    .loader-text {
        margin: 0 34% auto;
    }

    .volt-heads {
        width: 30px;
        padding: 5px 8px;
        margin-top: -13px
    }

    .volt-value, .volt-heads {
        font-size: 15px;
    }

   
}




    .updated-values {
        width: 12%;
        
    }

@media only screen and (max-width: 1080) {
    .updated-values {
        width: 20%;
    }
}

@media only screen and (max-width: 640px) {
    .updated-values {
        width: 33.33%;
    }
        .updated-values h4 {
            font-size: 8px;
            padding: 0;
            margin: 0;
        }

}

        .updated-values h4 {
            font-size: 10px;
            padding: 0;
            margin: 0;
        }

        .updated-values label {
            font-size: 10px;
        }

    .alert-up > h3 {
        font-size: 14px;
        padding: 0;
        margin: 0;
    }

.low {
    background-color: rgba(196, 196, 196, 0.94);
    min-height: 85px;
}

.high {
    background-color: rgba(208, 213, 220, 1);
    min-height: 85px;
}

.overload {
    background-color: rgba(196, 196, 196, 0.94);
    min-height: 85px;
}