/*DASHBOARD CSS BY DUDY AB HALIM*/

/*
<link rel="stylesheet" type="text/css" href="{{ asset('public_side/css/dashboard.css') }}">
*/


  .fullwidth {
      max-width: 100%;
  }

  .agd-pengumuman {
      padding: 0 !important;
      background: #091bb5cc  !important;
      font-size: 15px !important;
  }

  .eocnewsticker > div > div {
    line-height: 16px !important;
  }

  .announcement {
      background: #020942cc;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
  }
  .kanan {
      float: right;
      margin-top: 5px;
  }

  .ann-content {
      padding: 8px;
  }

  .dashboardhead {
      background: #89cff0;
      font-weight: 600;
      padding: 8px 30px;
      color: black;
      text-transform: uppercase;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom: solid #bbb;
      font-size: 12px;
  }

  .boxarea {
      margin-top: 17px;
      border: solid #bbb8b8 2px;
      width: 100%;
      box-shadow: 0 0 8px -3px #000000e3;
      background: white;
      border-radius: 32px;
  }

  .chart-filter {
      margin-top: 0px;
      padding-right: 185px;
  }

  .chart-filter .form-group {
      margin: 0;
  }

  .chart-fed-state {
      border: #00c4ff solid 5px;
      margin: 5px;
      padding-bottom: 20px;
      background: #ffffff;
      box-shadow: #0000009e 2px 3px 5px 1px;
  }

  .summ-box {
      background: #00000012;
      margin: -5px 0 0px;
      padding: 4px 2px;
  }

  .summ-box.evenbox {
      background: #dbdbdb;
  }

  .summ-box span {
      display: inline-block;
  }
  .more {

  cursor:pointer;
}

  span.circ {
          /*vertical-align: middle;
          background: #ff8100;
          padding: 9px;
          margin-left: 20px;
          border-radius: 26px;
          min-width: 40px;
          text-align: center;
          color: white;
          font-weight: bold;*/
          vertical-align: middle;
          background: #bbbbbb4a;
          /* padding: 0px; */
          /* border: #d93a01 solid 1px; */
          /* margin-left: 20px; */
          /* border-radius: 26px; */
          /* min-width: 40px; */
          text-align: center;
          font-size: 27px;
          color: white;
          /* font-weight: bold; */
          padding: 9px 25px;
      }

  span.desc {
      vertical-align: middle;
      margin-left: 20px;
  }

  .desc-txt {
      color: #222;
      font-size: 12px;
      line-height: 16px;
  }

  .desc-val {
      color: #222;
      font-weight: 900;
      font-size: 12px;
  }

  .input-group div {
      color: #c0f2ff !important;
  }

  .graph_container{
    display:block;
    width:100%;
  }

  .box-vertstack {
      /*padding: 20px 0;*/
      /*background: #eee;*/

      background: rgb(255,255,255);
      background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,245,210,1) 43%, rgba(255,245,210,1) 56%, rgba(255,255,255,1) 100%);

      background: transparent;
  }

  canvas#v-bar-stack {
      /*max-width: 500px;*/
  }


  .content-dashboard {
      background: #ffffffdb;
      background-attachment: fixed;
      background-size: cover;


  }

  .chead {
      color: #edffb5;
      font-weight: 900;
      letter-spacing: 1px;
  }

  .barhead {
      font-weight: 600;

  }

  .box-mapjs {
      padding: 0;
      background: #89cff0;
  }

  div#malaysia-map {
      padding: 0px 100px;
  }

  .hg_section {
      display: none;
  }

  .row.agd-box-02 {
      padding: 5px;
  }

  .piepad-left {

  }

  .piepad-right {

  }

  .piepad-left .cname {
      left: 9px;
  }

  .piepad-right .cname {
      left: -5px;
  }

  .gpiechart {
      width: 100%;
      height: 180px;
  }

  .col-12.cname {
      text-align: center;
      margin-top: 10px;
      color: #000;
      font-weight: 700;
      position: absolute;
      bottom: 10px;
  }

  .clegend {
      text-align: center;
      padding: 0px 0 5px;
      font-size: 15px;
      margin-left: 35px;
  }

  .clegend i{
      margin: 5px;
  }

  .clegend span {
      padding: 0 30px;
  }

  .piegreen {
      color: var(--selesai);
  }

  .btn-selesai {
      background: var(--selesai);
  }

  .pieyellow {
      color: var(--dalamtindakan);
  }

  .btn-t-t {
      /*background: #f44f7a;*/

      background: var(--tiadatindakan);
  }

  .piered {
      color: var(--tiadatindakan);
  }

  .btn-d-t {
      color: black;
      background: var(--dalamtindakan);
  }

  .float-button {
      margin-top: 55px;
  }

  .float-button button {
      padding: 0;
      border: #000;
  }

  .boxarea select {
      /* background: #e1e1e1; */
      color: black;
      border-radius: 30px;
      margin-top: 0px;
  }

  .dashboardhead.tpik {
      font-size: 24px;
      font-weight: 400;
      background: transparent;
      border-bottom: solid 2px #666;
      padding: 0px 30px;
      text-align: center
  }

  .jsmaps-wrapper {

      margin: 0px !important;
  }
  .petabox {
      box-sizing: border-box;
      min-height: 160px;
      /*padding: 20px 200px 0;*/
  }

  .chart-summ-box {
      padding: 16px 12px;
  }

  .summ-box a:hover span {
      color: #f00;
      padding-left: 5px;
  }

  .buttonrow {
      min-height: 50px;
  }

  select.filterf {
      background-color: #bdd2f796;
      background-position-x: 173px;
  }

  select.filterf:focus {
      color: #495057;
      background-color: #eee;
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
  }

  img.banne {
      width: 100%;
      height: 100%;
  }

  .filter-label {
      margin-top: 12px;
      margin-left: 8px;
      color: #0885e4;
      font-weight: 700;
  }

  .tpik-filter {
      padding-right: 60px;
  }

  section.content-dashboard {
      padding-top: 0;
  }

  .box-n3p1k {
      background: #89cff0;
  }

  .col-lg-3.adj5 {
      padding: 0px 14px 0;
  }

  .col-lg-3.adj5 span {
      display: block;
      text-align: center;
  }

  .bordering {
      box-shadow: #0000001f 0 0 10px 0px;
      background: #fff;
      border-radius: 6px;
  }

  .box-dashboard {
      margin: 15px 0;
  }

  .tpik-item {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 5px;
      margin-left: 25px;
  }

  .tpik-item span {
      display: block;
  }

  .float-title {
      text-align: center;
      color: #000;
      font-weight: 600;
      font-size: 12px;
  }

  .peta {
      padding-top: 20px;
  }

  .col-lg-3.adj-3p1k {
      margin-top: 6px;
      padding-right: 7px !important;
  }

  .freset {
      width: 100%;
      margin-bottom: 10px;
      padding: 3px 0px !important;
  }

  .btn-selesai {
      margin-bottom: 49px;
  }

  .cname {
      position: relative;
      top: -10px;
      text-align: center;
  }

  .filterf {
      font-size: 12px !important;
      color: #35478f;
  }

  .jsmaps-select.mobile select {
      display: none;
  }

  .line1 {
      display: inline-block;
      vertical-align: middle;
  }

  .tp1k-title {
      width: 30%;
      text-align: center;
      font-size: 3em;
  }

  .tiris img, .tp1k-box {
      display: inline-block;
      vertical-align: middle;
  }

  .tp1k-val {
      font-size: 20px;
  }

  .tp1k-stat {
      display: inline-block;
      width: 25%;
  }

  .r4 {text-align: center;}

  .tp1k-stat-val {
      font-size: 2em;
  }

  .half-left, .half-right, .half-left-top, .half-right-top {
      flex: 1;
      height: 20px;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  }

  .flex-container {
      display: flex;
  }

  .topline {
      border-top: solid;
  }

  .c-line {
      border-right: solid;
  }

  .graph_container {
      min-height: 180px !important;
  }

  a:hover .tp1k-stat-item, a:hover .tp1k-stat-val {
      background: #dfdfdf;
  }

  @media (max-width: 576px){

    .tp1k-stat-item {
        font-size: 9px;
    }

    .line1.tp1k-title {
        width: 100%;
    }

    .line1.tiris {
        width: 100%;
        text-align: center;
    }

    select.filterf {
        background-position-x: 95%;
        width: 80%;
        margin: auto;
    }

    .filter-label {
        margin-top: 12px;
        margin-left: 30px;
        color: #0885e4;
        font-weight: 700;
    }

    
  }

  @media (max-width: 575px){
      .kanan {
          float: none !important;
          margin-top: 1px !important;
          text-align: center;
          font-size: 11px !important;
      }

      .agd-pengumuman {
        font-size: 11px !important;
      }

      .piepad-left, .piepad-right {
        order: 1;
        width: 50%;
    }

    .gpie-button{
      order: 2;
    }

    .float-button{

      display: flex;
      margin-top: 0px;
      
      padding: 25px 10% 60px;
      align-content: space-between;
    }

    .float-button button {
        padding: 0;
        margin: 0 2% !important;
        height: 45px;
    }

    button#btn-reset {
        position: absolute;
        bottom: 10px;
        display: inline-block;
        width: 70%;
        height: 25px;
    }

    .box-dashboard{
      margin: 0 !important;
    }

  }

  @media (max-width: 1199px){
      .kanan {
          float: none !important;
          margin-top: 0px !important;
          padding: 5px 0;
          text-align: center;
          font-size: 11px !important;
      }

      .agd-pengumuman-title {
          font-size: 11px !important;
      }

      .agd-pengumuman {
        font-size: 11px !important;
      }


  }

  

  @media (max-width: 992px){
    .bordering {margin-top: 16px;}
  }

  @media (min-width: 576px){

    .piepad-left, .piepad-right, .gpie-button{
      order: 1 ;
    }

    .kanan {
        float: none;
        text-align: center;
    }

  }