::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

:root{
  --primary-colour: #ffe6a7;
}

.body{
  padding: 0;
  margin: 0 !important;
  width: 100%;
}

.modal {
  display: none; 
  position: fixed; 
  z-index: 10; 
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
  overflow: hidden;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-y: auto;
}

.popup-name{
  font-size: 2vw;
}

.popup-section{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 92%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 48px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  margin-right: 10px;
}

.close:hover,
.close:focus {
  color: rgb(68, 68, 68);
  text-decoration: none;
  cursor: pointer;
}

/*                    ---table stuff---                                    */

.table-container{
  height: 60vh;
  overflow-y: auto;
  overflow-x: hidden; 
  width: 85vw;
  border: 3px solid #ddd;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-bottom: 150px;
}


#table-search {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' height=\'24px\' viewBox=\'0 -960 960 960\' width=\'24px\' fill=\'%235f6368\'%3E%3Cpath d=\'M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\'/%3E%3C/svg%3E');
  background-position: 10px 12px;
  background-repeat: no-repeat; 
  width: 30%;
  font-size: 16px;
  padding: 12px 20px 12px 40px; 
  border: 1px solid #ddd;
  margin-bottom: 12px; 
}

.data-table{
  border-collapse: collapse;
  font-size: 18px;
  table-layout: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-collapse: collapse; 
  background: white;
  z-index: 1;
}

.data-table th, .data-table td {
  text-align: left; 
  padding: 12px; 
}

.data-table tr {
  border-bottom: 1px solid #ddd;
}

.data-table tr.reaction-table-header, .data-table tr:hover {

  background-color: #f1f1f1;
}


/*                    ---table stuff---                                    */


.filter-reactions{
  width: 90px;
  height: 30px;
}


.hidden-effect {
  display: none;
}


#active-reaction-table thead {
  background-color: #f2f2f2;
}

th {
   position: sticky;
  top: 0;
  background: #f1f1f1;
  z-index: 1;
}



.table-options-container{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.choose-table{
  background-color: #eee060;
}

.active-table-button{
  background-color: #da6b6b;
}

.view-table {
  z-index: 5;
}


.header-container{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.horizontal-line{
  width: 80%;
  height: 1px;
  background-color: black;
}

.wave-graphic{
  width: 150vw;
  margin-top: 120px;
  margin-bottom: 120px;
}

.ripple{
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background-color: transparent;
  width: 150px;
  height: 60px;
  border: solid;
  border-width: 0 0 2px 0;
  border-color:transparent;
  border-radius: 5px;
  transition: 0.4s;
  outline: none;
  background-color: rgb(243, 243, 243);
}

.active, .ripple:hover {
  background-color: var(--primary-colour);
  opacity: 0.95;
}
.ripple-span{
  position: absolute;
  background: white;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
  animation: ripple 0.5s linear infinite;
  width: 100px;
  height: 100px;
}

@keyframes ripple{
  0%{
    width: 0px;
    height: 0px;
    opacity: 0.5;
  }
  100%{
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}