/* most common CSS */
body {
  padding-top: 5rem;
  background-color: #efefef;
  font-family: 'Helvetica Neue', sans-serif;
}
.container {
  max-width: 1400px;
}

.navbar-brand { font-size: 20px; }
p { font-size: 16px; }
h2, h3, h4, h5, h6 { font-size: 20px; }

.p-2 {
  padding-bottom: 0px!important;
  margin-bottom: 5px!important;
}

.navbar {
  background-color: #2b2c2d
}
.starter-template {
  padding: 2rem 1rem;
  text-align: center;
}

.card-header .fa {
  transition: .2s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}

.card-img-top {
  background-color: rgb(248, 248, 248);
  width: 47px;
  height: 50px;
  object-fit: cover;
  object-position: 50% 10%;
  margin: 0px 3px 3px 0px;
  border-width: 1px;
  border-style: solid;
  border-radius: 10%;
  border-color: rgb(204, 204, 204);
  border-image: initial;
}

.headshot {
  object-fit: cover;
  object-position: 50% 10%;
  margin-right: 10px;
  border-radius: 15%;
  border-color: rgb(228, 228, 231);
  border-width: 1px;
  border-style: solid;
  --tw-bg-opacity: 1;
  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
  width: 55px;
  height: 55px;
  line-height: 55px;        
}
.player-search-result {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding:0.5rem 0.25rem 0.5rem 16px;
  --webkit-box-align: center;
}

.form-pt-opinion {
  border: 1px solid #dee2e6;
  border-radius: 12px;
  margin-bottom: 5px;
  padding-left: 10px;
}

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

.dropdown-item {
  font-size: 0.9rem;
  padding: 0.1rem 0.75rem;
}

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 43px;
  background-color: #f8f9fa;
  z-index:99;
}

.btn .fa {
  transition: .3s transform ease-in-out;
}
.collapsed .fa {
  transform: rotate(90deg);
}

/* Table styling */
.table-responsive {
  display: table;
}

.center-badge {
  vertical-align: middle !important;
  text-align: center;
}
.left-badge {
  vertical-align: middle !important;
  text-align: left;
}

/* Tooltip styling */
.qtip {
  max-width: 500px;
}

/* Select styling */
.selectize-dropdown {
	text-align: left;
}

.selectize-dropdown .title {
	display: block;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.selectize-dropdown .name {
	font-weight: bold;
	margin-right: 5px;
}
.selectize-dropdown .by {
	font-size: 11px;
	opacity: 0.8;
}
.selectize-dropdown .by::before {
	content: '   ';
}

/* Coloring select options */
.below-average {
  background-color: #f28139;
  color: white;
}
.average {
  background-color: #f2dd42;
  color: white;
}
.above-average {
  background-color: #8dc343;
  color: white;
}
.elite {
  background-color: #26a843;
  color: white;
}

.bootstrap-select {
  border: 1px solid #ced4da !important;
}


@media (max-width: 900px) {
  .navbar-brand { font-size: 18px; }
  p { font-size: 14px; }
  h2, h3, h4, h5, h6 { font-size: 18px; }
  .container {
    max-width: 890px;
  }
  .btn-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

}

@media (max-width: 800px) {
  .navbar-brand { font-size: 18px; }
  p { font-size: 14px; }
  h2, h3, h4, h5, h6 {
    font-size: 18px;
  }
  .btn-block {
    font-size: 14px;
  }
  .btn-sm {
    font-size: 14px;
  }
  .btn-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

}

@media (max-width: 700px) {
  .navbar-brand { font-size: 16px; }
  p { font-size: 12px; }
  h2, h3, h4, h5, h6 {
    font-size: 16px;
  }
  .btn-block {
    font-size: 12px;
  }
  .btn-sm {
    font-size: 12px;
  }
  .btn-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  .row {
    margin: 0;
  }
  .card {
    width: 100%;
  }
  .container {
    max-width: 727px;
    padding: 1%;
  }
  .card-body {
    padding: 0.3rem;
  }

}

@media (max-width: 600px) {
  .navbar-brand { font-size: 14px; }
  p { font-size: 10px; }
  h2, h3, h4, h5, h6 {
    font-size: 14px;
  }
  .btn-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  .btn-block {
    font-size: 10px;
  }
  .btn-sm {
    font-size: 10px;
  }
  .row {
    margin: 0;
  }
  .card {
    width: 100%;
  }

  a.nav-link.btn {
    text-align: left
  }
  .container {
    max-width: 410px;
    padding: 1%;
  }
  .card-body {
    padding: 0.3rem;
  }
  .table-responsive {
    //display: block;
    /* font-size: 6px; */
  }
}