body{
    padding:0;
    margin:0;
    max-width: 100%;
    overflow-x: hidden;
    /* background-color:#bde5f7; */
    background-color:#f1f1f1;
}

label{
    font-size: 14px;
    color:#000;
    font-weight: 500;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.mendetary{
    color:red;
}

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

.text-sm{
    font-size : 14px;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verd;
}

.text-red{
    color: #dc3545 !important;
}

.text-white{
    color: #fff !important;
}

.text-black{
    color: #000;
}

.text-skyblue{
    color: #f4f4f4;
}

.bg-red{
    background: hsl(354, 76%, 67%) !important;
}

.bg-gold-yellow{
    background: #ffbf00 !important;
}

.text-gold-yellow{
    color: #ffbf00;
}

.bg-skyblue{
    /* background-color: #00FFFF !important; */
    background-color: #fff !important;
}

.bg-lightblue{
    background: #82b1ff !important;
}

.form-group > label
{
text-align: right;
}

.card_header {
    font-family:Verdana, Geneva, Tahoma, sans-serif ;
    font-size: large;
}

/* .form-input{
    background-color:#00FFFF;
}

.form-input:focus{
    background-color:#00FFFF;
} */

/* .form-button{
    background-color:#00FFFF;
    color:#000
}

.form-button:hover{
    background-color:#00FFFF;
    color:#000
} */
.container-fluid{
    padding:0;
}
.bodyContent{
    margin-left:240px;
}

.leftNavbar{
    position:fixed;
    height:100vh;
    width: 230px;
    background-color:#000;
}

.get_live_data{
    position: absolute;
    width:auto;
    bottom: 1.5rem;
    left: 0rem;
    right: 0rem;
}

/* @media only screen and (max-width: 1050px) {
    .status_images{
        width: 100% !important;
    }
} */

    a {
       text-decoration: none !important;
   }
   
   h1,
   h2,
   h3 {
        color: #ffd24b;
       font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
   
   .myform {
       position: relative;
       display: -ms-flexbox;
       display: flex;
       padding: .8rem;
       -ms-flex-direction: column;
       flex-direction: column;
       width: 100%;
       pointer-events: auto;
       background-color: #fff;
       background-clip: padding-box;
       border: 1px solid rgba(0, 0, 0, .2);
       /* border-radius: 1.1rem; */
       outline: 0;
       max-width: 500px;
       color:#ffd24b;
   }

   .tx-tfm {
       text-transform: uppercase;
   }

   .nav-pills .nav-link:hover{
    color: #fff;
    background-color: #ffd24b;
   }

   .login-or {
       position: relative;
       color: #aaa;
       margin-top: 10px;
       margin-bottom: 10px;
       padding-top: 10px;
       padding-bottom: 10px;
   }
   
   .span-or {
       display: block;
       position: absolute;
       left: 50%;
       top: -2px;
       margin-left: -25px;
       background-color: #fff;
       width: 50px;
       text-align: center;
   }
   
   .hr-or {
       height: 1px;
       margin-top: 0px !important;
       margin-bottom: 0px !important;
   }
   
   form .error {
       color: #ff0000;
       padding-bottom: 0 !important;
   }
   
   #histroy {
       font-size: 22px;
   }

   #dllSelect{
       height:28px;
       width:100px;
       background-color: purple;
       color:#fff;
       margin-top:5px;
       float:right;
   }

     #btnDownload{
       float:right;
       margin-top:3px;
       margin-right: 10px;
   }

   .shadow{
      /* background-color:#FFF; */
      background-color:#fff;
  } 

    #filterButton button{
        background-color: #cca413;
        color:#fff;
        border:none;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-style: oblique;
    }

    #power{
        color:red;
        font-size:50px;
        border:5px solid red;
        border-radius: 50%;
        padding:5px;
    }

    #charging{
        color:green;
        font-size:50px;
        padding:3px;
        border:5px solid green;
        border-radius: 50%;
    }

    #trangle{
        position: relative;
    top: -20px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid blue;
    }

    .border_trip_detials{
        background-color:#fff;
        min-height: 100px;
    }

    .flex-container {
        display: flex;
    }
      
    .flex-container > div {
      background-color: #fff;
      height: auto;
      width: 20%;
      margin-left: 10px;
      margin-right: 10px;
    }

    .flex-container > div:first-child {
        margin-right: 10px;
        margin-left: 0px;
    }

    .flex-container > div:last-child {
        margin-right: 0px;
        margin-left: 10px;
    }

    /* Redio buttons */
    .redio-container {
        display: block;
        align-items: center;
        position: relative;
        margin-bottom: 12px;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
  
    /* Create a custom radio button */
    .checkmark {
        position: absolute;
        top: 0;
        height: 18px;
        width: 18px;
        background-color: #eee;
        border-radius: 50%;
        margin-left: -29px;
    }
  
    /* On mouse-over, add a grey background color */
    .redio-container:hover input ~ .checkmark {
        background-color: #ccc;
    }
    
    /* When the radio button is checked, add a blue background */
    .on {
        background-color: green;
    }
    
    .off {
        background-color: #dc3545;
    }
  
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
    }
    
    /* Style the indicator (dot/circle) */
    .redio-container .checkmark:after {
        top: 6px;
        left: 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: white;
    }

    .demo1, .demo2, .demo3, .demo4, .demo5{
        position: relative;
        width: 14vw;
        height: 14vw;
        margin:auto;
        box-sizing: border-box;
        align-items: center !important;
        align-content: center !important;
    }

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #0d6efd; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #0000FF; 
  }

  .status_images{
    float:right;
  }

@media only screen and (max-width: 992px) {
    .demo1, .demo2, .demo3, .demo4, .demo5{
        width: 25vw;
        height: 25vw;
    }
}

@media only screen and (max-width: 767px) {
    .bodyContent{
        margin-left:0px;
    }

    .form-group > label {
        text-align: left;
    }

    .leftNavbar{
        position:inherit;
        height:auto;
        width:100vw;    
    }

    .get_live_data{
        position: relative;
        width:auto;
    }

    .demo1, .demo2, .demo3, .demo4, .demo5{
        width: 25vw;
        height: 25vw;
    }

    .status_radio{
        margin-left: -50%;
    }
    
}


@media only screen and (max-width: 576px) {
    .border_trip_detials{
        min-height: 60px;
    }

    #search_div{
        margin-top: 15px;
        text-align: center;
    }

    .demo1, .demo2, .demo3, .demo4, .demo5{
        width: 55vw;
        height: 65vw;
       
    }
}


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