* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

#info {
    float: left;
    width: 100%;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
  padding: 20px 2px;
}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 30px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 50px;
  text-align: center;
  background-color: RoyalBlue;
  font-size:30px;
  color:white;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

.dataframe {
  margin-left: auto;
  margin-right: auto;
}

.w3-input{
  margin-left: 35%;
  margin-top: 8px;
  padding:8px;
  display:block;
  border:none;
  border-bottom:1px solid #ccc;width:100%;
  }

.w3-animate-input{
  transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:35%!important}

.tbl_div{
    height: 100%;
    width: 100%;
}

.footer{
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}


#my-map {
    pointer-events: auto;
    height: 100%;
    width: 100vw;
  }

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

/* Clinic table */
#clinictbl {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

#clinictbl thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

#clinictbl th, .clinictbl td {
    padding: 12px 15px;
}

#clinictbl tbody tr {
    border-bottom: 1px solid #dddddd;
}

#clinictbl tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

#clinictbl tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

#clinictbl tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* map */
#my-map {
    display: flex;
    margin: 25px 70px;
    justify-content: center;
    width : 90%;
}


 /* box */
  .box { margin-bottom:24px; }
  .box1 { float:left; width:50%; padding-right:16px; }
  .box2 { float:left; width:50%; padding-left:16px; }
  .box section h2 a { background:url(/images/arrows/arrows.png) no-repeat right 4px; background-size:14px; padding-right:24px; }

/*******************************************************************************
  TABLE
*******************************************************************************/
  .box table { width:100%; border:1px solid #E8E8E8; }
  .box table th { background-color:#00ba66; border:1px solid #00ba66; color:#fff; font-size:0.8em; line-height:2.2em; padding-top:2px; }
  .box table tr:last-child { font-weight:700; }

  .box table td { font-size:1.2em; line-height:1.8em; text-align:center; color:#000; }
  .box table td a { color:#006fb0; }
  .box table td a:hover { color:#6288a5; border-bottom:1px solid #6288a5; }
  .box table td { width:100px; }
  .box table th:first-child { text-align:left; padding-left:8px; width:auto; }
  .box table td:first-child { text-align:left; padding-left:8px; width:auto; }

  /* odd and even row numbers */
  .odd { background-color:#f3f3f3; }
  .even { background-color:#fff; }

  /* net */
  table th.VAR, table th.VAR2 { color:#00ba66; text-indent:-9999px; }
  table th.NET, table th.NET2 { color:#00ba66; text-indent:-9999px; }
  table td.VAR { width:20px; }
  table td.VAR2 { width:20px; }
  table td.NET { width:80px; padding-right:8px; }
  table td.NET2 { width:80px; padding-right:8px; }

  /* note */
  p.note { display:block; text-align:right; margin:8px 0 0 0; margin-right:4px; font-size:0.9em; }
  p.note a { color:blue; }

  /* arrows */
  span.red { color:#df000f; }
  span.green { color:#01894c; }
  span.zero { font-size:0.8em; }
  span.blue { color:#779db4; }

  span.red-up { display:block; width:20px; background:url(/images/up-green.png) center center no-repeat; background-size:8px; }
  span.red-down { display:block; width:20px; background:url(/images/down-red.png) center center no-repeat; background-size:8px; }
  span.zero { display:block; width:20px; background:url(/images/no-change.png) center center no-repeat; background-size:6px; }
  span.green-up { display:block; width:20px; background:url(/images/up-green.png) center center no-repeat; background-size:8px; }
  span.green-down { display:block; width:20px; background:url(/images/down-red.png) center center no-repeat; background-size:8px; }
  span.black-down { display:block; width:20px; background:url(/images/down-red.png) center center no-repeat; background-size:8px; }
  span.black-up { display:block; width:20px; background:url(/images/up-green.png) center center no-repeat; background-size:8px; }

  /*******************************************************************************
  MOBILE
  ******************************************************************************/
  @media screen and (max-width:768px) {
      .max-screen {
          display: none;
      }

      /* box */
      .box {
          margin: 0%;
          margin-bottom: 24px;
      }

      .box1 {
          float: none;
          width: 100%;
          height: auto;
          padding: 0;
      }

      .box2 {
          float: none;
          width: 100%;
          height: auto;
          padding: 0;
      }

      #my-map{
          margin: 25px 20px;
          height: 100%;
          width : 90vw;
      }
  }