@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-weight: bold;
  src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
}

* {
  font-family: "Roboto", sans-serif;
  padding: 0;
  margin: 0;
}

html,
body {
  overflow: hidden;
  width: 350px;
  height: 600px;
  max-height: 600px;
}

/* Adds smooth transition when user changes theme 
! Needs fix
html,
body,
.tabs,
.card-panel {
  transition: all 0.3s ease-in-out;
}
*/

.dark {
  background-color: hsl(220, 7%, 11%);
  .tabs {
    background-color: hsl(220, 7%, 11%);
  }

  .card-panel,
  .usercard {
    background-color: hsl(220, 7%, 15%);
    color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
  }

  .switch {
    input:not(:checked) > .lever {
      background-color: rgba(80, 80, 80, 0.5) !important;
    }

    input:not(:checked) > .lever:after {
      background-color: rgba(80, 80, 80, 1) !important;
    }
  }

  #pMiDOption,
  .credit-panel {
    color: rgba(255, 255, 255, 0.6);
  }
}

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

.waves-effect.waves-discord .waves-ripple {
  /* The alpha value allows the text and background color
  of the button to still show through. */
  background-color: rgba(114, 137, 218, 0.4);
}

html:not(.dark) ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
}

#tabContent {
  position: relative;
  top: 125px;
  height: calc(600px - 125px);
  overflow-y: auto;
  overflow-x: hidden;
}

#header {
  z-index: 10000;
  position: fixed;
  height: 75px;
  width: 100%;
  background-color: rgba(89, 107, 174, 1);
}

.headerTabs {
  z-index: 10000;
  position: fixed;
  top: 75px;
}

.row {
  margin-bottom: 0;
}

#header img {
  height: 75px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#pMiDHeading {
  color: #7289da;
  margin: 5px;
  margin-bottom: 10px;
  padding: 0;
  font-size: 23px;
  font-weight: 600;
}

#pMiDOption,
.credit-panel {
  color: rgb(146, 146, 146);
}

#pMiDOption {
  margin: 0;
  padding: 0;
  font-size: 17px;
}

.card-panel .row .col {
  padding: 0;
}

#options {
  margin: 5px;
  width: calc(100% - 10px);

  tr {
    border: none;

    td {
      padding: 5px 0;

      &:first-child {
        width: 80%;
      }
      &:last-child {
        width: 20%;
      }
    }
  }

  .lever {
    float: right;
    margin: 0 !important;
  }
}

.switch {
  cursor: pointer;

  label {
    .lever {
      width: 42px;
      height: 24px;
      background: #72767d;

      &:before,
      &:after {
        width: 18px;
        height: 18px;
        left: 3px;
        top: 3px;
      }

      &:after {
        box-shadow: none;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

input[type="checkbox"]:checked:not(:disabled) ~ .lever:active::before,
input[type="checkbox"]:checked:not(:disabled).tabbed:focus ~ .lever::before {
  background-color: transparent;
}

.switch label input[type="checkbox"]:checked + .lever:before,
.switch label input[type="checkbox"]:checked + .lever:after {
  left: 21px;
}

.switch label input[type="checkbox"]:checked + .lever:after {
  background-color: #fff;
}

.switch label input[type="checkbox"]:checked + .lever {
  background-color: #7289da;
}

.yt:checked + .lever {
  background-color: rgb(218, 39, 39) !important;
}

.twitch:checked + .lever {
  background-color: #7d5bbe !important;
}

.soundcloud:checked + .lever {
  background-color: rgb(255, 102, 0) !important;
}

.netflix:checked + .lever {
  background-color: rgba(204, 22, 23, 1) !important;
}

.rabbit:checked + .lever {
  background-color: #fe6600 !important;
}

.anime4you:checked + .lever {
  background-color: #6e46b6 !important;
}

.crunchyroll:checked + .lever {
  background-color: #ea5d13 !important;
}

.aniflix:checked + .lever {
  background-color: #e23333 !important;
}

.card-panel {
  margin: 10px 5px;
  padding: 14px;
  box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.15);
}

.tabs .tab a {
  color: rgba(90, 109, 174, 0.75);
  font-weight: 500;
}

.tabs .tab a:hover,
.tabs .tab a.active {
  color: #7289da;
}

.tabs .tab a:focus,
.tabs .tab a:focus.active {
  color: #7289da;
  background-color: transparent;
}

.tabs .indicator {
  background-color: #7289da;
  box-shadow: 5px 5px black;
}

#credits table tr {
  border: none;
}

#credits table tr td {
  width: 50%;
}

.credit-panel {
  margin: 5px;
  padding: 0;
  height: 50px;
}

.credits_text h6 {
  font-size: 17px;
  margin-bottom: 4px;
}

.usercard:hover .credits_text h6 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.credits_text p {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.credits_container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-bottom: 5px;
}

.usercard {
  user-select: none;
  background: #fff;
  box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.15);
  flex-grow: 1;
  flex: 1 0;
  float: left;
  justify-content: center;
  margin: 10px;
  padding-top: 15px;
  text-align: center;
  border-radius: 4px;
  width: 50%;
  transition: all 150ms ease-out;
  min-width: 100px;
  min-height: 150px;
  color: rgb(102, 102, 102);
  display: flex;
  align-items: center;
}

.usercard .credits_text * {
  overflow: hidden;
}

.usercard .credits_avatar img {
  width: 50px;
  border-radius: 50%;
}

.usercard div {
  top: -4px;
  position: relative;
}

.usercard:hover:not(.noHover) {
  background-color: var(--hoverColor);
  color: rgba(255, 255, 255, 0.6);
  transform: scale(1.025);
}
