:root {

    /* Shades of B&W */
    --black: #151515;
    --dark-gray-dark: #333333;
    --dark-gray: #4F4F4F;
    --dark-gray-light: #828282;
    --light-gray-dark: #BDBDBD;
    --light-gray: #E0E0E0;
    --light-gray-light: #F2F2F2;
    --white: #F8F8F8;
    --pure-white: #FFFFFF;
  
  
    /* Colors https://color.adobe.com/pl/Royalty-color-theme-7499791 */
    --color-primary-dark: #460259;
    --color-primary: #5A0273;
    --color-primary-light: #672C75;
  
    --color-accent-dark: #D96704;
    --color-accent-light: #F2CB05;
  
  
    /* Fonts */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-accent: 'Raleway', sans-serif;
    --font-emoji: 'Noto Color Emoji', sans-serif;
  
  }

  @font-face {
    font-family: 'Noto Color Emoji';
    src: url(fonts/NotoColorEmoji.ttf);
  }

  .emoji {
    font-family: var(--font-emoji);
    user-select: none;
  }
  
  /* Main Style Configuration */
  
  p, b, i, ul, li, span, small, em {
    color: var(--black);
  }
  
  h1 {
    font-family: var(--font-secondary);
    color: var(--dark-gray);
  }
  
  h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--dark-gray-dark);
  }
  
  .dark-theme {
    background-color: var(--black);
  }
  
  .dark-theme p, .dark-theme b, .dark-theme i, .dark-theme ul, .dark-theme li, .dark-theme span, .dark-theme small, .dark-theme em {
    color: var(--light-gray-dark);
  }
  
  .dark-theme h1 {
    font-family: var(--font-secondary);
    color: var(--white);
  }
  
  .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 {
    font-family: var(--font-secondary);
    color: var(--light-gray-light);
  }
  
  .img-cover {
    object-fit: cover;
  }
  
  .img-contain {
    object-fit: contain;
  }

  /* custom */
  .btn:hover .hover-white-text {
    color: white !important;
    transition: color 0.25s ease-in-out;
  }

/* Records */

.record {
    padding-left: 12px;
    position: relative;
    cursor: default;
    color: rgba(222, 226, 230, 0.75);
    transition: all 0.23s linear;
}

.record .fix {
    color: rgb(229 224 210 / 75%);
}

.record div {
    padding: 4px 5px 4px 0px;
}

.record *, .record i { 
    transition: all 0.23s linear;
    color: rgba(222, 226, 230, 0.75);
}

.record:hover, .record:hover * {
    color: rgba(255,255,255,0.8);
    background-color: rgba(27,31,35,1);
    border-radius: 12px;
}

.record:hover {
    transition: all 0.13s linear;
    /* padding: 8px 12px; */
}

.record:hover::before {
    opacity: 1;
}

.record::before {
    transition: all 0.23s linear;
    content: '\0325';
    position: absolute;
    top: -9px;
    left: 2px;
    padding: 6px 0px 0px 0;
}

/* Tiles */

.tile-title {
    font-variant: small-caps;
    font-family: var(--font-primary);
}

.tile-title .disabled {
    font-variant: small-caps;
    font-family: var(--font-primary);
    color: grey;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 150px;
    background: rgba(0,0,0,0.20);
    border-radius: 8px;
    transition: all 0.24s ease-out;
    padding-top: -15px;
    box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
    position: relative;
    font-family: var(--font-secondary);
    font-weight: 500;
    text-decoration: none;
    color: rgb(180,180,220);
}

.tile-logo {
    user-select: none;
}

.disabled {
    color: grey !important;
}

.tile:hover {
    transform: scale(1.08);
    color: white;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.10);
}

.tile-logo:hover {
    transform: scale(1.0);
}

.disabled:hover {
    cursor: default;
    transform: scale(1.00);
    background: rgba(0,0,0,0.20);
}

.tile:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: -3px -3px 12px rgba(255,255,255,0.1);
    transition: all 0.24s ease-out;
}

.tile:hover::before {
    box-shadow: -2px -2px 6px rgba(255,255,255,0.1);
}

.tile:active {
    transform: scale(0.95);
    box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
    
}

.tile:active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 2px 2px 8px rgba(255,255,255,0.1);
}

.tile-action {
    background: rgba(0,0,100,0.20);
}

.tile-action:hover {
    background: rgba(40,40,160,0.30);
}

/* LOGIN ----------------- */

.login-theme {
  height: 100vh;
  width: 100%;
  background-image: url(login-bg2.jpg);
  background-size: cover;
}

.npro-logo {
  display: flex;
  justify-content: center;
  width: 100%;
}

.login-logo {
  width: 200px;
}

.login-wrapper {
  backdrop-filter: blur(4px);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.15);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 50%, rgba(69, 69, 69, 0.35) 100%);
  box-shadow: 7px 7px 10px #0F111480;

  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.login-wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  box-shadow: -7px -7px 10px rgba(40, 40, 50, 0.25);
  user-select: none;
  pointer-events: none;
}

.discord-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #5865F2;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-family: sans-serif;
  transition: background-color 0.3s ease;
}

.discord-login-button:hover {
  background-color: #4752c4;
}

.discord-login-button .icon {
  width: 24px;
  height: 24px;
  filter: invert(1);
}

.form-check-input.both-checked:checked {
  background-color: #62796a;
  border-color: #5f806a;
  opacity: 0.85;
}

.both-checked-row > td{
  color: #7e7e7e !important;
}