$primary: #000000;
$primary_hv: #ffffff;
$bg:#efefef;
$confirmed:#DE3700;
$deaths:#767676;
$recovered:#60bb69;
$active: #f4c363;
$title: #a1a1a1;
$label: #a1a1a1;
.dataTables_filter{
  margin-bottom: 10px;
  font-size: 14px;
  input[type="search"]{
    line-height: normal;
    width:auto;
  }
}
.table_countries_today,.table_countries{
  table-layout: auto;
  width:100%;
  font-size: 16px;

}
.dataTables_wrapper{
  table.dataTable thead th, table.dataTable thead td{
    padding: 10px 15px;
  }
  .dataTables_length{
    margin-bottom: 10px;
    select{
      width: auto;
    }
  }
  .dataTables_paginate{
    .paginate_button{
      padding: 0.4em 0.8em;
      border: #eaeaea 1px solid;
      box-shadow: none;
      &:hover{
        border-color: #eaeaea;
      }
    }
  }
}
.widget{
  table.table_countries{
    margin-bottom:0;
  }
  .jms-covid-wrapper{
    .jms-covid-style-default,.jms-covid-style-tab,.jms-covid-live-map{
      padding: 10px 15px;
    }
  }
  .jms-covid-live-map{
    .world-map-wrap{
      min-height: 220px;
    }
  }
}

.jms-covid-style-default{
  background: $bg;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
  text-align: center;
  padding: 25px;
  .cv-info{
    display: flex;
    justify-content: center;
    .cv-col{
      border-right: 1px solid #ddd;
      padding:0 15px;
      &:first-child{
        padding-left: 0;
      }
      &:last-child{
        padding-right: 0;
        border-right: none;
      }
    }
  }
}
.jms-covid-style-3{
  .cv-tab-wrapper{
    .cv-nav-tabs {
      padding: 0;
      margin: 20px 0 0;
      list-style: none;
      border-top: 1px solid rgba(0, 0, 0, 0.25);
      li {
        background: transparent;
        display: inline-block;
        padding: 10px 16px;
        position: relative;
        &.active{
          &:before{
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: #efefef;
            border-bottom: 1px solid rgba(0, 0, 0, 0.25);
            border-left: 1px solid rgba(0, 0, 0, 0.25);
            position: absolute;
            top: -8px;
            left: 50%;
            margin-left: -7px;
            transform: rotate(-45deg);
          }
        }
        a {
          box-shadow: none;
          outline: none;
        }
      }
    }
    .cv-info-country{
      background-color: white;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
      border-radius: 6px;
      padding: 8px 12px 12px 12px;
      border-bottom: none;
      margin-bottom: 20px;
      .cv-confirmed{
        font-size: 1.2em;
        font-weight: bold;
      }
      .cv-bar{
        margin-top: 12px;
        height: 9px;
        display: flex;
      }
      .cv-legend {
        display: grid;
        padding: 20px 0;
        grid-template-columns: 8px auto min-content;
        grid-gap: 16px 8px;
        align-items: center;
        .color{
          width: 9px;
          height: 9px;
          border-radius: 9px;
        }
      }
    }
    .cv-info{
      justify-content: space-between;
      margin: 0 -15px;
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      .list-desc{
        flex: auto;
        padding: 0 15px;
      }
      .list-countries{
        flex: auto;
        padding: 0 15px;
        max-width: 100%;
        .dataTables_scrollHeadInner{
          padding-right: 0 !important;
        }
      }
    }
    .cv-desc-item{
      margin-bottom: 15px;
      text-align: center;
      padding: 5px;
      border-radius: 10px;
      font-weight: bold;
      & > div{
        color: #ffffff;
      }
      &:first-child{
        margin-top: 15px;
      }
    }
  }
}
.list-countries{
  .dataTables_wrapper{
    table {
      font-size: 16px ;
      tbody{
        tr{
          cursor: pointer;
          background-color: transparent;
        }
      }
      tbody td,thead th{border-color: #CCCCCC;}
      thead{
        th {
          font-weight: normal;
          text-align: left;
          &:nth-child(n + 2) {
            text-align: right;
          }
        }
      }
      tbody{
        td{
          &:nth-child(n + 2){
            text-align: right;
            font-weight: bold;
          }
        }
      }
    }
    .dataTables_scrollBody{
      border-bottom:none;
      &::-webkit-scrollbar {
        width: 12px;
      }

      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
      }
    }
  }
}

.jms-covid-style-tab{
  background: $bg;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
  padding: 25px;
}
.jms-covid-style-tab:not(.jms-covid-style-3) {
  .cv-desc{
    display: flex;
    margin-bottom: 25px;
    flex-wrap: wrap;
    .cv-desc-col{
      flex: auto;
    }
    .cv-title{
      font-weight: bold;
      margin-bottom: 5px;
      text-transform: uppercase;
    }
    .cv-confirmed{
      font-size: 1.3em;
      font-weight: bold;
    }
    .cv-legend{
    }
  }
  .cv-tab-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -15px;
  }
  .cv-nav-tabs {
    margin: 0;
    list-style: none;
    flex:auto;
    padding:0 15px;
    //order: 2;
    @media (min-width: 768px) {
      max-width: 320px;
    }
    li {
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
      border-radius: 6px;
      padding: 10px 16px;
      margin-bottom: 12px;
      cursor: pointer;
      user-select: none;
      a {
        display: grid;
        grid-template-columns: auto min-content;
        grid-column-gap: 5px;
        box-shadow: none;
        outline: none;
      }
      &.active {
        font-weight: 700;
      }
    }
  }
  .cv-tab-content {
    flex:auto;
    padding:0 15px;
    .cv-tab-panel {
      display: none;
      background-color: white;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
      border-radius: 6px;
      padding: 8px 12px 12px 12px;
      border-bottom: none;
      margin-bottom: 20px;
      &.show {
        display: block;
      }
    }
    .cv-info{
      .cv-title{

      }
      .cv-confirmed{
        font-size: 1.2em;
        font-weight: bold;
      }
      .cv-bar{
        margin-top: 12px;
        height: 9px;
        display: flex;
      }
      .cv-legend {
        display: grid;
        padding: 20px 0;
        grid-template-columns: 8px auto min-content;
        grid-gap: 16px 8px;
        align-items: center;
        .color{
          width: 9px;
          height: 9px;
          border-radius: 9px;
        }
      }
    }
  }
}
.jms-covid-live-map{
  position: relative;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 10px;
  .cv-title{
    text-align: center;
    margin: 0;
    padding: 1rem 0;
  }
  .world-map-wrap{
    width: 100%;
    height: 100%;
    min-height: 60vh;
    #jms-covid-svg-map{
      path{
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        transition: fill .2s,stroke .2s;
      }
    }
    .footer_map{
      display: flex;
      justify-content: space-between;
    }
    .controls_map{
      display: flex;
      .zoom-out,.zoom-in{
        background: #767676;
        cursor: pointer;
        width: 35px;
        height: 30px;
        position: relative;
        font-size: 0;
        text-indent: -9999px;
        &:before,&:after{
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background: #ffffff;
          transition: background-color .2s;
        }
        &:before{
          width: 11px;
          height: 2px;
        }
      }
      .zoom-in{
        border-right: 1px solid #ffffff;
        &:after{
          width: 2px;
          height: 11px;
        }
      }
    }
  }
  .tooltip_nCoV{
    position: absolute;
    pointer-events: none;
    padding: 10px 15px;
    margin: 0 auto;
    background-color: rgba(0,0,0,.5);
    color: #ffffff;
    z-index: 999;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1.4;
    min-width: 180px;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    transform: translateX(-50%);
    &.active{
      opacity: 1;
    }
  }
}