@media (min-width: 1024px) {
  .navbar,.navbar-end,.navbar-menu {
      display:flex;
      align-items: stretch
  }
}

.navbar {
  --tw-bg-opacity: 1;
  background-color: rgba(255,255,255,var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(243,244,246,var(--tw-border-opacity));
  border-bottom-width: 1px;
  display: flex;
  height: 3.5rem;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  z-index: 30;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: 150ms
}

@media (min-width: 1024px) {
  .navbar {
      padding-left:15rem;
      width: auto
  }
}

.navbar-brand {
  display: flex;
  align-items: stretch;
  flex: 1 1 0%;
  height: 3.5rem
}

.navbar-brand.is-right {
  flex: none
}

@media (min-width: 1024px) {
  .navbar-brand.is-right {
      display:none
  }
}

.navbar-brand .navbar-item {
  display: flex;
  align-items: center
}

.navbar-item,.navbar-link {
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: .75rem;
  padding-right: .75rem
}

.navbar-item {
  flex-grow: 0;
  flex-shrink: 0;
  position: relative
}

@media (min-width: 1024px) {
  .navbar-item {
      display:flex;
      align-items: center
  }
}

@media (min-width: 1024px) {
  .navbar-item.mobile-aside-button {
      display:none
  }
}

@media (min-width: 1024px) {
  .navbar-item.has-divider {
      --tw-border-opacity:1;
      border-color: rgba(243,244,246,var(--tw-border-opacity));
      border-right-width: 1px
  }
}


@media (min-width: 1024px) {
  .navbar-item>.navbar-link {
      background-color:transparent
  }
}

.navbar-item .icon+span {
  margin-left: .5rem
}

.navbar-item.has-user-avatar>.navbar-link {
  display: flex;
  align-items: center
}

.navbar-item.has-user-avatar .user-avatar {
  display: inline-flex;
  height: 1.5rem;
  margin-right: .75rem;
  width: 1.5rem
}

.navbar-item.dropdown {
  padding: 0
}

@media (min-width: 1024px) {
  .navbar-item.dropdown {
      padding-top:.5rem;
      padding-bottom: .5rem;
      padding-left: .75rem;
      padding-right: .75rem
  }
}

.navbar-item.dropdown>.navbar-link .icon:last-child {
  display: none
}

@media (min-width: 1024px) {
  .navbar-item.dropdown>.navbar-link .icon:last-child {
      display:inline-flex
  }
}

@media (min-width: 1024px) {
  .navbar-item.desktop-icon-only {
      justify-content:center;
      width: 4rem
  }
}

@media (min-width: 1024px) {
  .navbar-item.desktop-icon-only span:last-child {
      display:none
  }
}

.navbar-item .input {
  border-width: 0
}

.navbar-menu {
  max-height: calc(100vh - 3.5rem);
  --tw-bg-opacity: 1;
  background-color: rgba(255,255,255,var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(243,244,246,var(--tw-border-opacity));
  border-bottom-width: 1px;
  display: none;
  overflow: auto;
  position: absolute;
  left: 0;
  top: 3.5rem;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
  width: 100vw
}

@media (min-width: 1024px) {
  .navbar-menu {
      border-bottom-width:0;
      display: flex;
      flex-grow: 1;
      overflow: visible;
      position: static;
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
  }
}

.navbar-menu.active {
  display: block
}

@media (min-width: 1024px) {
  .navbar-end {
      justify-content:flex-end;
      margin-left: auto
  }
}

.navbar-item .navbar-dropdown {
  font-size: .875rem;
  line-height: 1.25rem
}

@media (min-width: 1024px) {
  .navbar-item .navbar-dropdown {
      --tw-bg-opacity:1;
      background-color: rgba(255,255,255,var(--tw-bg-opacity));
      --tw-border-opacity: 1;
      border-color: rgba(229,231,235,var(--tw-border-opacity));
      border-bottom-right-radius: .25rem;
      border-bottom-left-radius: .25rem;
      border-top-width: 2px;
      min-width: 100%;
      position: absolute;
      left: 0;
      top: 100%;
      --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
      box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
      z-index: 20
  }
}

@media (min-width: 1024px) {
  .navbar-item:not(.active) .navbar-dropdown {
      display:none
  }
}

.navbar-item.active.dropdown>.navbar-link,.navbar-item.active:not(.dropdown) {
  --tw-text-opacity: 1;
  color: rgba(59,130,246,var(--tw-text-opacity))
}

.custom-context-menu {
  position: fixed;
  border: 1px solid #ccc;
  list-style: none;
  padding: 4px 0;
  border-radius: 4px;
  box-shadow: 0px 2px 6px 2px #ddd;
  background-color: #fff;
  z-index: 2;
  &.hidden {
    display: none;
  }

  li {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
    user-select: none;
    transition: all 0.1s;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      cursor: pointer;
      background-color: #0170fe;
      color: #fff;
    }

    &:active {
      background-color: #f0f2f7;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.border-blue {
  border-color: #3490dc;
}

.bg-blue {
  background-color: #3c78c6;
}

.bg-text {
  color: rgba(255, 255, 255, .6);
}

.nav-bg {
  background-color: #1b60b9;
}

.menu-active {
  background: #e5e5e5;
  color: #114484;
}

.btn-default {
  color: #28568d;
}
.league-search {
  width: 200px;
}
.pagination {
  text-align: center;
  padding: 0.3em;
  cursor: default;
  margin-top: 2rem;
}

.pagination a,
.pagination span,
.pagination em {
  padding: 0.2em 0.5em;
}

.pagination .disabled {
  color: #aaaaaa;
}

.pagination .current {
  font-style: normal;
  font-weight: bold;
  color: #0063dc;
}

.pagination a {
  border: 1px solid #dddddd;
  color: #333;
  text-decoration: none;
}

.pagination a:hover,
.pagination a:focus {
  border-color: #003366;
  background: #0063dc;
  color: white;
}

.pagination .page_info {
  color: #aaaaaa;
  padding-top: 0.8em;
}

.pagination .previous_page,
.pagination .next_page {
  border-width: 2px;
}

.pagination .previous_page {
  margin-right: 1em;
}

.pagination .next_page {
  margin-left: 1em;
}


.alert-h_size {
  color: #e842da;
}

.alert-f_size {
  color: #ff5900;
}

.alert-f_let {
  color: #a1308a;
}

.alert-h_let {
  color: #6200ff;
}

.select-item .select2-container .select2-selection--single {
  height: 44px;
}

.select-item .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
}

.select-item .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}
.select2-container {
  min-width: 120px;
}


.modal {
  position: fixed;
  z-index: 1;
  /* Centering */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  /* Add the drop shadow */
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2), 0 5px 10px 0 rgba(0,0,0,0.19);
}

.cancel-button {
  background-color: #1530ff;
  font-size: 12px;
  color: white;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  text-decoration: none;
}
.cancel-button:hover {
  background-color: #2640fe;
}

.bg-neutral-400	{
  background-color: rgba(163, 163, 163, 0.391);
}

.divid-y:after {
  content: " ";
  border: 1px solid #e5e7eb;
  width: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.size-up-long {
  background-color: #d8e4cc;
}

.alert .size-large {
  background-color: #f4a4e7;
}

.let-large {
  background-color: #e1f07d;
}

tr:hover .top-btn {
  display: inline-block;
}

.top {
  border-left: 2px solid rgb(30, 91, 233);
}

.red {
  color: red;
}

.pre-f_size {
  color: rgb(7, 92, 219)
}

.pre-h_size {
  color: #0dbd3f;
}

.state-closed {
 color: blue;
}