body, p, td, span, h1, h2, h3, h4, h5, h6, * {
    font-family: "Roboto";
}
table{font-size: 14px;}
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    border: none;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
.navbar-inverse {background: #FFFFFF !important; height: 60px !important;}
.navbar-inverse .navbar-nav > li > a {color: black !important;}
.breadcrumb {padding: 14px 0px !important;}
.breadcrumb > li + li:before {color: #ffffff !important;}
.breadcrumb > li a {color: #ffffff !important;}
.navigation > li.active > a, .navigation > li.active > a:hover, .navigation > li.active > a:focus {background-color: #E37731 !important;}
.content-wrapper .row {
    margin-bottom: 30px;
    border-color: #ddd;
    background-color: #ffffff;
    border: 2px;
    padding-bottom: 20px !important;
}
.login-container .page-container .login-form {width: 360px !important;}
.site-header {float: right; margin-top: 8px;}
.site-header label {margin-right: 10px; font-size: 16px;}
.dashboard-box .col-box {height: 200px !important; color: white !important;  font-size: 2em !important;font-weight: 700;}
.dashboard-box .col-box .text {font-weight:400 !important;}
.dashboard-box .alert-1{background-color: red; }
.dashboard-box .gateway2{background-color: #559CAB;}
.dashboard-box .gateway{background-color: #E37731;}
.dashboard-box .gateway3{background-color: #B44E47;}
.dashboard-box .smart{background-color: #263238;}
.dashboard-box .reporting{background-color: #B44E47;}
.dashboard-box .col-box div{margin: auto; display: table;}
.dashboard-box .col-box div.number{font-size: 2em}
.dashboard-box div.number{padding-top: 30px;font-size: 2em}

.dashboard-header .row {padding:0px !important; margin:0 5px !important;}
.dashboard-box .gateway3 {height: 200px !important; text-align:center; color: white !important;  font-size: 2em !important;}
.dashboard-box .gateway2 {height: 200px !important; text-align:center; color: white !important;  font-size: 2em !important;}
.dashboard-box .gateway3 .number {font-weight: 700 !important;}
.dashboard-box .gateway3 .text {font-weight: 400 !important;}
.dashboard-box .gateway2 .number {font-weight: 700 !important;}
.dashboard-box .gateway2 .text {font-weight: 400 !important;}

.canvasjs-chart-container canvas {
    width:100% !important;
}

.row{margin-left: 5px !important;}
.box-header,.box-title-header {height: 50px;line-height: 50px;background: white;margin-left: 5px;margin-right: -10px;padding-left: 10px; margin-bottom: 20px;}
.box-header h1 {margin-top: 5px;}
.box-header .btn-primary {float: right; margin-top: 8px;}
.box-title-header {margin-bottom: 30px;}
.box-title-header h2{margin-top: 8px !important;}
.box-border {border:1px solid;border-color: #d3d3d3; background: white;}
.row-none {margin-bottom: 30px; padding-bottom: 15px; width: 100%;}
.row-none .col-left {width: 58%; float: left; margin-left: 4px; padding:5px; }
.row-none .col-right {width: 40%;float: right; margin-right: -5px; padding:5px;}
/* detail roller */
.detail-roller .col-left {width: 100%; float: left;}
.detail-roller .col-left .col1 {width: 49.5%; float: left}
.detail-roller .col-left .col2 {width: 49.5%; float: right}
.detail-roller .col-right {width: 100%; float: right; margin-right: -20px;}
.detail-roller .box-border {margin-bottom: 15px; }
.detail-roller .box-border table {
    border: none;
}
.back-btn { background: #E37731 !important; border: 1px solid #c4682a !important}
.detail-roller .box-border table tr:nth-child(even) {background: white;}
.row-2 .left {width: 49.5%; background: white;float: left}
.row-2 .right {width: 49.5%; background: white;float: right}
.row-2 .right {margin-right: -20px;}

.box-border .pill-green {
    padding:10px;
    background:green;
    color:white;
    border-radius:5px;
}
.box-border p {
    padding:25px;
    margin:0px;
}

.box-border th {
    background:#36474F;
    color:#ffffff;
}

.box-border .pill-red {
    padding:10px;
    background:red;
    color:white;
    border-radius:5px;
}

.box-border {
    padding-right:0px !important;
}

@media(max-width:700px) {

    .box-border {
        display: flex;
        padding-right:0 !important;
    }

    .box-border .pill-green {
        display: block;
        width:100%;
        text-align: center;
    }
    .Spdfne1 {
        margin-top:10px !important;
        width:100%;
        text-align: center;
    }
    
    #obj1 {
        width:100%;
    }
    #twoLine {
        float: left !important;
         margin-left: 0px; padding-left: 5px; margin-bottom:25px;
        margin-right: 0px;
    }
    #oneLine {
        display: block !important;
        width:100% !important;
    }
    .box-header {
        margin: 0 0 30px 0px !important;
        height:auto !important;
    }
}
#twoLine {
    float:right; margin-right: 5px; padding-left: 5px; margin-bottom:25px;
    }
@media(max-width:1200px) {
    .row-none .col-left {
        width:100% !important;;
    }
    .row-none .col-right {
        width:100% !important;;
        margin-top: 20px;
    }
}


@media(max-width:1300px) {

    .detail-roller .col-left {
        width:100% !important;
    }

    .detail-roller .col-right {
        width:100% !important;
        margin-right:0;
    }

}

.historyTempDiv {
    float: left;
    width: 100%;
    clear: both;
    display: inline-block;
    padding: 10px;
    min-height: 420px;
    background:#ffffff;
    border:1px solid #d3d3d3;
    margin-bottom:20px;
}

@media(max-width:768px) {

    .dashboard-box .alert-1 {
        width:100% !important;
        margin-left:0px !important;
    }
    .dashboard-box .gateway {
        width:100% !important;
    }
    .dashboard-box .gateway2 {
        width:100% !important;
    }
    .dashboard-box .gateway3 {
        width:100% !important;
    }
    .dashboard-box .smart {
        width:100% !important;
    }
    ul.breadcrumb {
        display:none !important;
    }
    .col-left {
        width:100% !important;
    }
    .col-right {
        width:100% !important;
    }
    .box-title-header h2 {
        display: none !important;
    }
    .col1 {
        width:100% !important;
    }
    .col2 {
        width:100% !important;
    }
    .detail-roller .col-right {
        margin-right:0px !important;
    }
    .back-btn {
        display:none !important;
    }
    .row-2 .left {
        width:100% !important;
    }
    .row-2 .right {
        width:100%;
        margin-right:0px !important;
    }
}
.login-form .btn {
    padding:20px !important;
}
.login-container {
    background: url('../assets/images/orrange-bg.jpg') no-repeat bottom center;
    background-color: #F47320;
}