.border-row-top {
    border-top: 1px solid #dee2e6;
    padding-top: .8rem;
}

.footer {
    /* position: absolute; */
    margin-top: 30px;
    margin-bottom: 60px;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 70px;
}

.table.dataTable a {
    color: #2680C2;  /* palette 14 - blue-500 */
    text-decoration: none;
}

.table.dataTable a:hover {
    color: #0F609B;  /* palette 14 - blue-700 */
    text-decoration: underline;
}

.tr.checkedin {
    font-weight: bold;
}

.btn-xs, .btn-group-xs > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.25;
  border-radius: 0.2rem;
}

.color-facebook {
    color: #4267b2;
}

.color-twitter {
    color: #1da1f2;
}

.color-google {
    color: #0F9D58;  /* Google brand green - others are blue #4285F4 red #DB4437 yellow #F4B400 */
}

.color-discord {
    color: #5865f2;
}

.color-battlefy {
    color: #e62c40;
}

.fade-me-in.htmx-added {
    opacity: 0;
}

.fade-me-in {
    opacity: 1;
    transition: opacity 1s ease-out;
}

.fade-me-out.htmx-swapping {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* player PID card */
.container-player-pid {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Add padding for consistency with Bootstrap */
    padding-right: 15px;
}

/* STYLES FROM MDB.MIN.CSS */
.btn-rounded {
    border-radius: 10em
}
table th {
    font-size: .9rem;
    font-weight: 400
}
table td {
    font-size: .9rem;
    font-weight: 300
}
table.table thead th {
    border-top: none
}
table.table th, table.table td {
    padding-top: 1.1rem;
    padding-bottom: 1rem
}
table.table a {
    margin: 0;
    color: #212529
}
table.table .label-table {
    height: .94rem;
    padding: 0;
    margin: 0;
    line-height: .94rem
}
table.table.btn-table td {
    vertical-align: middle
}
table.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
    -webkit-transition: .5s;
    transition: .5s
}
table .th-lg {
    min-width: 9rem
}
table .th-sm {
    min-width: 6rem
}
table.table-sm th, table.table-sm td {
    padding-top: .6rem;
    padding-bottom: .6rem
}
.table-scroll-vertical {
    max-height: 300px;
    overflow-y: auto
}
/* END STYLES FROM MDB.MIN.CSS */


/* NAVBAR */
.navbar-rk9gg {
    padding-top: .8rem;
    padding-bottom: .8rem;
    font-size: 1.45rem;
}

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
/* END NAVBAR */


/* SIDEBAR used for player & organizer side navigation */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #3B3B3B;  /*grey-800 */
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #9E9E9E;  /*grey-400 */
}

.sidebar .nav-link.active {
  color: #2680C2;  /* blue-500 */
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

.sidebar .nav-item {
    font-size: .875rem;
    line-height: 1;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}
/* END SIDEBAR */


/* CSS STYLES FROM geeks-2.2.2 template */
/* LAST UPDATED 11/23/2021 blue info palette */

/* sidenav styles - currently used in profile pages 11/23/2021 */
.sidenav.navbar {
    background-color: #fff;
    border-radius: .5rem;
    padding: 0
}
@media (max-width:576px) {
    .sidenav.navbar {
        border-radius: 0 0 .5rem .5rem;
        border-top: 1px solid #ecebf1;
        padding: 1rem 1.5rem
    }
}
@media (min-width:576px) and (max-width:767.98px) {
    .sidenav.navbar {
        border-radius: 0 0 .5rem .5rem;
        border-top: 1px solid #ecebf1;
        padding: 1rem 1.5rem
    }
}
.sidenav.navbar .navbar-header {
    color: #6c757d;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: .2rem;
    padding: .3rem .4rem;
    text-transform: uppercase
}
.sidenav.navbar .navbar-nav {
    padding: 1.5rem;
    width: 100%
}
@media (max-width:576px) {
    .sidenav.navbar .navbar-nav {
        padding: 0
    }
}
.sidenav.navbar .navbar-nav .nav-item {
    margin-bottom: .125rem
}
.sidenav.navbar .navbar-nav .nav-item.active {
    background-color: #FAB38B; /* palette 14 - orange-200 */
    border-radius: .5rem;
    color: #C65D21; !important /* palette 14 - orange-500 */
}
.sidenav.navbar .navbar-nav .nav-item .nav-link {
    background-color: transparent;
    border-radius: .5rem;
    color: #3B3B3B; /* palette 14 - grey-800 */
    font-size: .875rem;
    font-weight: 500;
    padding: .3rem 0 .3rem .7rem;
    position: relative
}
.sidenav.navbar .navbar-nav .nav-item .nav-link .nav-icon {
    margin-right: .5rem;
    opacity: .6
}
.sidenav.navbar .navbar-nav .nav-item .nav-link:hover {
    background-color: #FAB38B; /* palette 14 - orange-200 */
    color: #3B3B3B; /* palette 14 - grey-800 */
}

.sidenav.navbar .navbar-nav .nav-item .nav-link:hover .nav-icon {
    opacity: 1
}
.sidenav.navbar .navbar-nav .active>.nav-link {
    color: #C65D21 !important   /* palette 14 - orange-500 */
}
.sidenav.navbar .navbar-nav .active>.nav-link .nav-icon {
    opacity: 1
}
/* END STYLES FROM geeks-2.2.2 template */


/* ADD EVERYTHING ABOVE THESE SECTIONS */

/* FONT AWESOME RELATED */
/* USE FONT AWESOME AS PSEUDO-ELEMENT */
/* New Simplified Version 6 CSS */
/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
    /* removed font- based rules */
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
/* Step 2: Reference Individual Icons */
/* trash-alt */
li.editor::before {
    font: var(--fa-font-solid);
    content: "\f2ed";
    padding: 6px;
}