/* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      /* width: 80%; */
      width: 400px; max-width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
    }

    .myModalLink {
      color: darkblue;
    }

    .myModalLink:hover {
      cursor: pointer;
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
    }

    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }

    /* The Close Button */
    .modal-close {
      color: #ccc;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .modal-close:hover,
    .modal-close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .modal-header {
      padding: 2px 10px;
      background-color: #ddd;
    }

    .modal-body {padding: 2px 10px;}

    .modal-footer {
      padding: 2px 10px;
      background-color: #ddd;
    }
    body {font-family: Arial, Helvetica, sans-serif;}
    div#container {margin: 10px;}
    table.mainTable { 
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 14px;
      border: solid 1px gray; 
      border-collapse: collapse;
      table-layout: fixed;
      margin: auto;
    }
    table.mainTable td,th {
      border-bottom:1px groove #ddd; 
      padding: 5px;
      overflow: hidden;
      }
    table.mainTable th {
      cursor: pointer;
    }
    .sort::before {
      content: ' ';
      background: right/50% url("../../assets/sort-light.png") no-repeat;
      display: block;
      height: 16px;
      width: 16px;
      float: right;
    }
    .sorted {
      color: darkblue;
    }
    .sorted::before {
      background: right/50% url("../../assets/sort.png") no-repeat;
    }
    tbody tr:hover {background-color: #f5f5f5;}
    .maintable thead {
      background-color: #e5e5e5;
      cursor: pointer;
    }
    table.ipgeodata { border: none;}
    table.ipgeodata td,th {padding: 3px;}
    a.mine, a.mine:visited {
        display: inline-block;
        padding: 5px;
        margin: 25px 5px;
        text-decoration: none;
        color: #333;
        box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
        border: 1px solid rgba(0,0,0,0.2);
    }
    a.mine:hover {border: 1px solid #003300;}
    a.mine:active {box-shadow: none;}
    span.mine {
      display: inline-block;
      padding: 5px;
      margin: 25px 5px;
      color: #333;
      border: 1px solid rgba(0,0,0,0.2);
    }