body{
    font-family: 'IBM Plex Sans Thai', sans-serif;
    font-family: 'Mitr', sans-serif;
    background-color: #1e384a;
  }
  .clicle_status{
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: inline-block;
    padding-top: 10px;
  }
  .status_blue{
    border: 3px solid #264d8e;
  }
  .status_pp{
    border: 3px solid #9214b3;
  }
  .status_green{
    border: 3px solid #478e15;
  }
  .clicle_status span{
    margin-left: 60px;
    position: absolute;
  }
  .box_map{
    height: 25px;
    width: 50px;
  }
  .status_black{
    border: 3px solid #000;
  }
  .status_red{
    border: 3px dashed #b54543;
  }
  .status_point{
    border: 3px solid #b54543;
    background-color: #fffe00;
  }
  .box_map span{
    margin-left: 60px;
    position: absolute;
  }
  .box_status p{
    margin-top:10px;
    margin-bottom:0;
  }
  .clicle_wind{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-block;
    padding-top: 1px;
  }
  .clicle_wind span{
    margin-left: 40px;
    position: absolute;
  }
  .wind_1{
    background-color: #7CB5EC;
  }
  .wind_2{
    background-color: #0000ff;
  }
  .wind_3{
    background-color: #90ED7D;
  }
  .wind_4{
    background-color: #FFFF00;
  }
  .wind_5{
    background-color: #F7A35C;
  }
  .wind_6{
    background-color: #F15C80;
  }
  .chart_sensor{
    width: 100%;
    height: 500px;
  }
  /* .chart_sensor2{
    height: 500px !important;
  } */
  .rain-widget {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }
  .rain-widget .outer-wrap {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      text-align: center;
  }
  .rain-widget .outer-wrap .rain-wrap {
      display: flex;
      flex-direction: column;
      padding: 18px 5px 5px;
  }
  .rain-widget .outer-wrap .rain-wrap .rain-tube {
      flex-grow: 1;
      display: flex;
      width: 40px;
      margin: auto;
      overflow: hidden;
      height: 440px;
  }
  .rain-widget .outer-wrap .rain-wrap .rain-tube .bg {
      background: url(../images/rain-bg.93b6a828.svg) 0 0 no-repeat;
      background-size: 100%;
      flex-grow: 1;
      position: relative;
      margin-bottom: 20px;
  }
  .rain-widget .outer-wrap .rain-wrap .rain-tube .bg:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      top: 30px;
      background: url(../images/rain-ticks.a373a9f1.svg) 0 0 repeat-y;
      background-size: 30%;
      width: 100%;
      height: 300px;
      z-index: 5;
  }
  .rain-widget .outer-wrap .rain-wrap .rain-tube .bg:after {
      z-index: 2;
      content: "";
      width: 100%;
      height: 40px;
      background: url(../images/rain-bottom.3e114d0b.svg) 50% no-repeat;
      background-size: 100%;
      position: absolute;
      left: 0;
      bottom: -20px;
  }
  .rain-widget .outer-wrap .rain-wrap.zero .rain {
      display: none;
  }
  .rain-widget .outer-wrap .rain-wrap .rain {
      transition: height 4s cubic-bezier(.27,1.01,.3,.935);
      height: 50px;
      position: absolute;
      z-index: 4;
      bottom: 0;
      left: 0;
      width: 100%;
      background: url(../images/rain-bar.2fcdca90.svg) 0 0 no-repeat;
      background-size: 100%;
  }
  #map {
    height: 100%;
    height: 650px;
  }
  .footers{
    width: 100%;
    padding: 15px;
    background-color: #3c464d;
    color: rgb(230, 230, 230);
    margin-top: 5px;
  }
  .image_amp{
    position: absolute;
    z-index: 9999;
    right: 60px;
    top: 110px;
    width: 150px;
  }
  .ndd-uberzoom-navigator-window{
    background: rgb(0 0 0 / 50%);
  }
  table.dataTable tbody tr,
  .dataTables_wrapper .dataTables_processing{
    background: none;
  }
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate
  ,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
    color: #fff !important;
  }
  .dark-mode select{
    color: #000000;
  }
  #datatables tbody tr td{
    text-align: center !important;
  }
  .compass{
    position: absolute;
    right: 15px;
    top: 130px;
    height: 130px;
    z-index: 999;
  }
  .box_sss{
    position: absolute;
    right: 20px;
    top: 280px;
    width: 230px;
    z-index: 999;
    background-color: #ffffff;
    color:#000;
    border-radius: 15px;
    padding: 15px;
  }
  .clicles{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin: 0px auto;
  }
  @media (max-width: 768px) {
    .box_sss{
      font-size: 8px;
      width: 95px;
      padding: 10px 15px;
    }
    .box_sss .pt-2{
      padding-top:0 !important;
    }
    .box_sss .col-2, .box_sss .col-10{
      padding: 0 !important;
    }
    .clicles{
      height: 10px;
      width: 10px;
    }
    .image_amp{
      width: 100px;
      right: 20px;
    }
    .map_size{
      /*padding: 0 15%;*/
    }
    .border_right{
      border:none !important;
    }
    .image_amp{
        top: 80px;
        left: 10px;
    }
  }