body {
   margin: 0;
   padding: 0;
   outline: none;
   box-sizing: border-box;
   color: white;
}

main {
   min-height: 100%;
   background: transparent;
}

.view {
   padding: 1rem;
}

.view.no-content {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   height: 100vh;
   width: 100vw;
   padding: 0;
   background-color: #121212;
}

.quote-clip {
   color: #90c5f4;
   text-decoration: none;
}

.quote-clip:hover {
   color: #60acee;
}

.no-quotes {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 400px;
   height: auto;
   background-color: rgb(0 0 0 / 50%);
   color: white;
   padding: 2rem 3rem;
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
   box-shadow: 0 0 9px 0 rgb(0 0 0 / 30%);
}

.cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 2rem;
   margin-top: 1rem;
}

.card-single {
   display: flex;
   justify-content: space-between;
   background: rgb(0 0 0 / 65%);
   border: 2px solid #00ffdb;
   padding: 2rem;
   border-radius: 2px;
}

.card-single div:last-child span {
   font-size: 3rem;
   color: #bcc3ff;
}

.card-single div:first-child span {
   color: #fff;
}

.table-quotes {
   --mdb-table-bg: rgb(0 0 0 / 65%);
   --mdb-table-striped-bg: #212121;
   --mdb-table-striped-color: #fff;
   --mdb-table-active-bg: rgb(0 0 0 / 50%);
   --mdb-table-active-color: #fff;
   --mdb-table-hover-bg: rgb(0 255 219 / 75%);
   --mdb-table-hover-color: #fff;
   color: #fff;
   border-color: #4f4f4f;
   ;
}

.page-item.disabled .page-link {
   color: white;
   background-color: #282828;
   border-color: #000000;
}

.page-item.disabled {
   cursor: not-allowed;
}

.page-item {
   padding-right: 4px;
}

.page-link {
   background-color: #434343;
   color: white;
}

.page-link:hover {
   background-color: #585858;
   color: white;
}

.page-item.active .page-link {
   background-color: rgb(27 231 204 / 75%) !important;
}

.page-item.active .page-link:hover {
   background-color: rgba(104, 245, 226, 0.75) !important;
}

.empty-row {
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
}

.last {
   padding-right: 0;
}

.custom-select,
.paginate_button {
   cursor: pointer;
}

.form-control {
   color: #ffffff;
   background-color: #434343;
   border: 1px solid #212121;
}

.form-control:focus {
   color: #ffffff;
   background-color: #585858;
   border: 1px solid #313131;
   box-shadow: inset 0 0 0 1px #959595;
   outline: none;
}

table.dataTable thead th {
   min-width: 180px;
}

#tableRow {
   vertical-align: middle;
}

.dataTables_wrapper {
   margin-top: calc(100px - 1rem);
}

.dataTables_wrapper .row:first-child {
   background: #121212;
   position: fixed;
   top: 50px;
   left: 1rem;
   right: 0;
   width: 100%;
   z-index: 1;
   padding-right: 8px;
   height: 50px;
   align-items: center;
}

.table-counter {
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   width: 100%;
   height: 50px;
   background: #121212;
   top: 0;
   right: 0;
   left: 0;
   z-index: 1;
}

@media only screen and (max-width: 960px) {
   .cards {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media only screen and (max-width: 767px) {
   .cards {
      grid-template-columns: repeat(2, 1fr);
   }

   .dataTables_wrapper {
      margin-top: calc(150px - 1rem);
   }
   
   .dataTables_wrapper .row:first-child {
      height: 100px;
   }
}

@media only screen and (max-width: 560px) {
   .cards {
      grid-template-columns: 100%;
   }

   .dataTables_wrapper {
      margin-top: calc(150px - 1rem);
   }
   
   .dataTables_wrapper .row:first-child {
      height: 100px;
   }
}