@import url('https://fonts.googleapis.com/css2?family=Baloo+2&family=Lato:wght@300&display=swap');

body{
    font-family: 'Baloo 2', cursive;
    background-color: #f7f9ff;
}

.main-content p,
.stats{
    color: #6d6d6d;
}

.side-nav{
    position: fixed;
    width: 200px;
    height: 100vh;
    padding-top: 10px;
    transition: all .5s ease-in-out;
    background-color:  #f7f9ff;
}

.side-nav li a{
    color: #9a9a9a;
    font-weight: 500;
    margin-bottom: 10px;
    margin-left: 7px;
}

.side-nav li a i{
    margin-right: 9px;
}

.side-nav li a:hover{
    color: rgb(6, 6, 6);
    font-weight: bold;
}

.main-content{
    margin-left: 200px;
}

.btn-slide svg{
    height: 25px;
    width: 25px;
}

@media only screen and (max-width: 992px) {
    .side-nav{
        position: fixed;
        left: -200px;
        width: 200px;
    }
    .main-content{
        margin-left: 0px;
    }
}

.slide{
    left: 0px;
}

.tablescroll {
    display: block;
    height: 500px;
    overflow-y:scroll;
  }

.tablescrollmin {
  display: block;
  height: 400px;
  overflow-y:scroll;
}

  table {
    table-layout: fixed;
  }

  th,
  td {
    width: 200px;
    overflow: hidden;
  }

  th.checkbox, td.checkbox {
    width: 40px;
  }

  .head {
    position: sticky;
    top: 0; 
    background-color: #f0eeee; 
    z-index: 2;
  }

  .fixed-col th:nth-child(1),
  .fixed-col td:nth-child(1) {
    position: sticky;
    left: 0;
    background-color: #f0eeee;
    z-index: 1;
  }

  .fixed-col th:nth-child(2),
  .fixed-col td:nth-child(2) {
    position: sticky;
    left: 40px;
    background-color: #f0eeee;
    z-index: 1;
  }

  .fixed-col th:nth-child(3),
  .fixed-col td:nth-child(3) {
    position: sticky;
    left: 240px;
    background-color: #f0eeee;
    z-index: 1;
  }

  .fixed-col th:nth-child(4),
  .fixed-col td:nth-child(4) {
    position: sticky;
    left: 440px;
    background-color: #f0eeee;
    z-index: 1;
  }

  .mtop-400 {
    margin-top: 400px;
  }

  .mtop-300 {
    margin-top: 300px;
  }

  .mtop-200 {
    margin-top: 200px;
  }

  .center {
    padding: 10px;
  }

  .minh-200 {
    min-height: 200px;
  }

  a:hover {
    color: #938f8f;
  }

  .pointer {
    cursor: pointer;
  }

  .header {
    position: sticky;
    top:0;
  }