@import url('./transitions.css');

.page {
  width: 100%;
  height: calc(100% - 64px);
  max-height: calc(100% - 64px);
}
.page.streaming {
  height: calc(100% - 64px - 165px);
  max-height: calc(100% - 64px - 165px);
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #855620; 
  border-radius: 4px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #704922; 
}

.no-scroll::-webkit-scrollbar {
  display: none;
  opacity: 0;
}

.tracksTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #474747;
}
.tracksTable tr:nth-child(even) {
  background-color: #2e2e2e;
}
.tracksTable tr {
  background-color: #373838;
}
.tracksTable tr:hover {
  background-color: #474747;
}
.tracksTable td {
  padding: 4px;
}
.tracksTable th {
  padding: 4px;
  font-size: 0.75rem;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

.icon-text {
  font-size: 1.1rem;
}

#page-wrapper {
  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
}

.box-shadow-md {
  box-shadow: 2px 8px 6px #111111aa;
}

.box-shadow-lg-up {
  box-shadow: 0px -12px 8px #111111ee;
}

.box-shadow-xl {
  box-shadow: 2px 14px 8px #111111aa;
}