<style>
    table.dataframe {
      font-size: smaller;
    }

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      font-size: smaller;
      width: 100%;
    }
 
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 6px;
    }   

    tr:nth-child(even) {
      /* background-color: #dddddd; */
      background-color: rgb(240, 240, 250);
    }
    
    #lock-modal {
      background-color: black;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
    }
    
    #loading-circle {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      animation: spin 0.6s ease-in infinite;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }    
  
    .dataTables_length {
      margin-right: 2em;
    }
</style>

