@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@500;600&display=swap);.center-tab-selector {
  display: flex;
  height: 40px;
  padding: 24px;
  width: 100%;
}
.center-tab-selector .item-tab {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  margin-right: 8px;
  padding: 12px 16px;
  background-color: rgba(0,206,184,0.1);
  color: #00ceb8;
  border-radius: 8px;
  cursor: pointer;
}
.center-tab-selector .item-tab.selected {
  background-color: #00ceb8;
  color: #022047;
}
.center-tab-selector .item-tab .waiver-count-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  height: 18px;
  width: 18px;
  box-sizing: border-box;
  background-color: #ff2b6d;
  color: #fff;
  font-size: 9px;
  position: absolute;
  top: -5px;
  right: -5px;
  border: 2px solid #293042;
  font-weight: 600;
  padding-right: 1px;
}
.center-tab-selector .item-tab .waiver-count-tab.selected {
  background-color: #00ceb8;
  color: #022047;
  padding-bottom: 3px;
  padding-right: 1px;
}
.center-tab-selector .nba {
  background-color: rgba(255,174,88,0.1);
  color: #ffae58;
}
.center-tab-selector .nba.selected {
  background-color: #ffae58;
  color: #022047;
}
.center-tab-selector .selector-title {
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-left: 4px;
}
.center-tab-selector .selector-title.selected {
  color: #022047;
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.large-left-panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1f2431;
  border-right: 1px solid rgba(163,187,211,0.05);
}
.large-left-panel .leagues-dropdown {
  color: #fff;
  position: relative;
  width: 50px;
  height: 23px;
}
.large-left-panel .leagues-dropdown .app-dropdown {
  position: absolute;
  z-index: 10;
}
.large-left-panel .divider {
  background-color: #61707e;
  margin-left: 16px;
  margin-right: 36px;
  display: flex;
  flex: 1;
  height: 2px;
}
.large-left-panel .header .left-nav-logo {
  height: 40px;
  padding: 12px;
  margin-left: 8px;
  margin-top: 18px;
}
.large-left-panel .notification-indicator-container {
  position: absolute;
  top: 6px;
  left: 36px;
}
.large-left-panel .notification-indicator-container .nav-notification-indicator {
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: #022047;
  font-weight: bold;
}
.num-people-in-lounge-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #00ceb8;
  font-size: 9px;
  font-weight: 900;
  color: #022047;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
  text-align: center;
  transition: all 0.3s ease;
  transform: scale(0);
}
.num-people-in-lounge-indicator.show {
  transform: scale(1);
}
.league-nav-item-lounge-indicator {
  transition: all 0.1s ease;
  transform: scale(0);
}
.league-nav-item-lounge-indicator.show {
  transform: scale(1);
}
.league-nav-item-lounge-indicator img {
  width: 20px;
  height: 20px;
}
.league-nav-item-lounge-indicator .num-people-in-lounge-indicator {
  position: absolute;
  top: -8px;
  right: 14px;
}
.horizontal-dot-loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.horizontal-dot-loader span {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin: 0 2px;
  background-color: #fff;
  display: block;
  opacity: 0;
}
.horizontal-dot-loader span:nth-child(1) {
  animation: 1s blink infinite 0.3333s;
}
.horizontal-dot-loader span:nth-child(2) {
  animation: 1s blink infinite 0.6666s;
}
.horizontal-dot-loader span:nth-child(3) {
  animation: 1s blink infinite 0.9999s;
}
@-moz-keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}
@-o-keyframes blink {
  50% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}
.nav-league-request-section {
  max-width: 240px;
  position: relative;
  overflow: hidden;
}
.set-up-your-league-content {
  width: 388px;
  margin: 0 auto;
}
.set-up-your-league-content .main-text {
  margin-bottom: 8px !important;
}
.set-up-your-league-content .sub-text {
  font-size: 12px;
  font-family: Inter;
  font-weight: normal;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-align: center;
  margin-bottom: 30px;
}
.set-up-your-league-content .section-header-text {
  flex-direction: row;
  align-items: center;
  display: flex;
  text-transform: uppercase;
  font-family: Poppins;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  color: #d8e2ed;
  margin-bottom: 8px;
}
.set-up-your-league-content .section-header-text .dotted-divider {
  margin-left: 8px;
  flex-grow: 1;
  border-width: 1px;
  border-top-style: dashed;
  display: inline-block;
  border-color: #7988a1;
}
.set-up-your-league-content .section-divider {
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
  font-family: Poppins;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(124,139,164,0.7);
}
.set-up-your-league-content .section-item {
  margin: 0 0 16px;
  padding: 14px 11px 11px 16px;
  border-radius: 24px;
  border: solid 2px #a3bbd3;
  cursor: pointer;
}
.set-up-your-league-content .section-item:hover {
  opacity: 0.85;
}
.set-up-your-league-content .section-item.selected {
  background-color: rgba(0,206,184,0.2);
  border-color: #00ceb8;
}
.set-up-your-league-content .section-item.selected .new-league-item .desc-text {
  color: #fff;
}
.set-up-your-league-content .league-item {
  display: flex;
  flex-direction: row;
}
.set-up-your-league-content .league-item .title-text {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  color: #fff;
  margin-bottom: 4px;
}
.set-up-your-league-content .league-item .desc-text {
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  color: #a3bbd3;
}
.set-up-your-league-content .league-item .avatar-league {
  margin-right: 8px;
}
.set-up-your-league-content .league-item .league-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.set-up-your-league-content .new-league-item .title-text {
  font-family: Poppins;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.25px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}
.set-up-your-league-content .new-league-item .desc-text {
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-transform: capitalize;
}
.set-up-your-league-content .league-info-desc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 4px;
  text-transform: capitalize;
}
.set-up-your-league-content .no-leagues-text {
  font-size: 12px;
  font-family: Inter;
  font-weight: normal;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
  opacity: 0.5;
}
.app-button-gradient {
  text-transform: uppercase;
  color: #fff;
  font-family: "Muli";
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  padding: 0 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: linear-gradient(315deg, #00b7b3, #4ce2a7);
}
.app-button-gradient .loader {
  margin: auto;
}
.league-invite-background {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  flex: 1;
}
.league-invite-background .bg-red {
  height: 500px;
  width: 500px;
  border-radius: 250px;
  background-color: #ff2b6d;
  filter: blur(50px);
  opacity: 0.2;
  position: absolute;
  top: 100px;
  right: 50px;
}
.league-invite-background .bg-green {
  height: 500px;
  width: 500px;
  border-radius: 250px;
  background-color: #00ceb8;
  filter: blur(50px);
  opacity: 0.2;
  position: absolute;
  top: 120px;
  left: 50px;
}
.league-invite-background .top-left-logo {
  position: absolute;
  top: 57px;
  left: 28px;
  width: 200px;
}
.league-invite-background .league-invite-content {
  display: flex;
  position: relative;
  flex-direction: column;
  border-radius: 24px;
  background-color: #344054;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 66px;
  padding-bottom: 32px;
}
.league-invite-background .league-invite-content .error-container {
  position: absolute;
  top: 54px;
}
.league-invite-background .league-invite-content .sport-icon {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: -60px;
  z-index: 10;
}
.league-invite-background .league-invite-content .title {
  font-size: 32px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin-top: 144px;
}
.league-invite-background .league-invite-content .subtitle {
  color: #b9c4d4;
  font-size: 16px;
  font-family: 'Inter';
  margin-top: 15px;
}
.league-invite-background .league-invite-content .league-info-container {
  margin-top: 24px;
  display: flex;
  flex: 1;
  flex-direction: row;
  padding: 14px 20px;
  background-color: #293142;
  height: 72px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
}
.league-invite-background .league-invite-content .league-info-container .league-info {
  display: flex;
  flex-direction: column;
  margin-left: 24px;
}
.league-invite-background .league-invite-content .league-info-container .league-info .league-name {
  font-size: 16px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.league-invite-background .league-invite-content .league-info-container .league-info .league-description {
  margin-top: 8px;
  font-size: 12px;
  color: #b9c4d4;
}
.league-invite-background .league-invite-content .buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 70px;
  height: 48px;
  width: 100%;
  flex: 1;
  justify-content: space-between;
}
.league-invite-background .league-invite-content .buttons-container .cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 32px;
  border-radius: 28px;
  height: 48px;
  width: 168px;
  color: #d8e2ed;
  font-size: 14px;
  border: 1px solid #d8e2ed;
  cursor: pointer;
}
.league-invite-background .league-invite-content .buttons-container .confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 32px;
  border-radius: 28px;
  height: 48px;
  width: 264px;
  background-color: #00ceb8;
  color: #022047;
  font-size: 14px;
  margin-left: 24px;
  cursor: pointer;
}
.upload-preview-generic-file .file-preview-container {
  text-align: center;
}
.upload-preview-generic-file .file-preview-container .file-icon {
  width: 65px;
}
.upload-preview-generic-file .file-preview-container .file-name {
  font-size: 12px;
  width: 70px;
  text-align: center;
}
.upload-preview-generic-file .file-preview-container .file-size {
  font-size: 9px;
  color: #ccc;
  text-align: center;
}
.edit-upload-item {
  box-shadow: 1px 1px 10px #444;
  background: #fff;
  min-width: 400px;
  max-width: 70vw;
  padding: 20px;
  border-radius: 5px;
}
.edit-upload-item .header-section {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  margin: 5px 0 20px 0;
}
.edit-upload-item .header-section .close-btn {
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px;
}
.edit-upload-item .preview-render .preview-wrapper {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.edit-upload-item .preview-render .preview-wrapper .upload-preview-image {
  text-align: center;
}
.edit-upload-item .preview-render .preview-wrapper .upload-preview-image img {
  height: 200px;
}
.edit-upload-item .preview-render .preview-wrapper .file-name-wrapper {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}
.edit-upload-item .preview-render .preview-wrapper .upload-preview-video video {
  height: 200px;
}
.edit-upload-item .preview-render .description-input-wrapper {
  margin-top: 15px;
}
.edit-upload-item .preview-render .description-input-wrapper textarea {
  background: #f6f6f6;
  margin-top: 10px;
  border-radius: 3px;
  padding: 10px;
  height: 100px;
}
.edit-upload-item .preview-render .action-buttons {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
.edit-upload-item .preview-render .action-buttons .button {
  font-size: 11px;
  width: 80px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: #ddd;
  margin-left: 15px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
.edit-upload-item .preview-render .action-buttons .button.confirm {
  background: #85c43b;
}
.drag-drop-preview-handler {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  pointer-events: none;
}
.drag-drop-preview-handler.active {
  pointer-events: auto;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
}
.drag-drop-preview-handler .upload-previews {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
.alert-modal {
  position: fixed;
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(0,0,0,0.7);
  transition: all 0.05s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-modal .alert-content-container {
  min-width: 150px;
  min-height: 50px;
  border-radius: 5px;
  background: #fff;
  transition: all 0.07s ease-out;
  transform: scale(0);
}
.alert-modal.show {
  z-index: 99999;
  opacity: 1;
}
.alert-modal.show .alert-content-container {
  transform: scale(1);
}
.video-chat-avatar {
  position: relative;
}
.video-chat-avatar .speaking-border {
  background: #fff;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 0;
}
.video-chat-avatar .speaking-border.speaking {
  opacity: 1;
}
.video-chat-avatar .avatar {
  z-index: 2;
  position: absolute;
}
.video-chat-avatar .mute-indicator {
  position: absolute;
  bottom: -2px;
  right: -5px;
  z-index: 3;
}
.mute-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  transform: scale(0);
}
.mute-indicator.muted {
  transform: scale(1);
  color: #fff;
  background-color: #eb446f;
  font-size: 10px;
}
.video-chat-draft-avatar {
  position: relative;
}
.video-chat-draft-avatar .avatar-wrapper {
  position: relative;
}
.video-chat-draft-avatar .avatar-wrapper .user-presence-in-lounge-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  bottom: -2px;
  right: -5px;
  background: #4aa79f;
  color: #022047;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.voice-lounge-button-container {
  position: relative;
}
.voice-lounge-button-container .overlay-league-open {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-lounge-button-container .voice-lounge-button {
  border-radius: 50%;
  position: relative;
  borderWidth: 1;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  opacity: 0.9;
}
.voice-lounge-button-container .voice-lounge-button.new-message {
  background: rgba(45,54,73,0.5);
}
.voice-lounge-button-container .voice-lounge-button img {
  width: 24px;
  height: 24px;
}
.voice-lounge-button-container .voice-lounge-button .num-people-in-lounge-indicator {
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: 2;
}
.voice-lounge-button-container .voice-lounge-button.expanded {
  background-color: rgba(0,206,184,0.7);
}
.voice-lounge-button-container .voice-lounge-modal-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: -8px;
  width: 320px;
  height: 294px;
  top: 55px;
  z-index: 9999;
}
.voice-lounge-button-container .voice-lounge-modal-wrapper.is-global {
  bottom: 75px;
  top: auto;
}
.voice-lounge-button-container .voice-lounge-modal-wrapper .down-pointer {
  background-color: #d8e2ed;
  width: 16px;
  height: 16px;
  position: absolute;
  transform: rotate(45deg);
  top: -6px;
  right: 20px;
  border-radius: 3px;
}
.voice-lounge-button-container .voice-lounge-modal-wrapper .down-pointer.is-global {
  bottom: -8px;
  top: auto;
}
.theme-dark .voice-lounge-button {
  background: #677897;
}
.users-in-lounge-agora {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.users-in-lounge-agora .user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.users-in-lounge-agora .user-item .display-name {
  max-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  margin-top: 3px;
  line-height: 14px;
  color: #344054;
}
.users-in-lounge-agora .show-more {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
.users-in-lounge-presence {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.users-in-lounge-presence .user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.users-in-lounge-presence .user-item .display-name {
  max-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  margin-top: 3px;
  color: #344054;
}
.users-in-lounge-presence .show-more {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
.voice-lounge-modal {
  width: 320px;
  height: 294px;
  border-radius: 16px;
  background: #d8e2ed;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
}
.voice-lounge-modal.global {
  height: 376px;
  background-color: #3a465b;
}
.voice-lounge-modal .users-in-lounge-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.voice-lounge-modal .action-button {
  width: 116px;
  height: 32px;
  border-radius: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  color: #022047;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
}
.voice-lounge-modal .action-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.voice-lounge-modal .action-buttons .side-button-container {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-lounge-modal .action-buttons .side-button-container .close {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #344054;
  box-sizing: border-box;
  cursor: pointer;
}
.voice-lounge-modal .action-buttons .side-button-container .close img {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}
.voice-lounge-modal .action-buttons .center-button-container {
  flex-grow: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-lounge-modal .lounge-title {
  color: #022047;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.voice-lounge-modal .lounge-title img {
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
  left: -3px;
}
.voice-lounge-modal .default-text {
  font-size: 14px;
  line-height: 16px;
  color: #022047;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.voice-lounge-modal .default-text .text-body {
  margin-top: 5px;
}
.mute-button {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #344054;
  box-sizing: border-box;
  cursor: pointer;
}
.mute-button i {
  color: #344054;
}
.mute-button.muted {
  background: #344054;
}
.mute-button.muted i {
  color: #fff;
}
.chat-right-icons-panel-container {
  display: flex;
  flex: 0 0 80px;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgba(163,187,211,0.05);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.chat-right-icons-panel-container .chat-right-icons-panel-friends {
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-direction: column;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating {
  position: absolute;
  right: 40px;
  bottom: 30px;
  z-index: 99;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container {
  position: relative;
  height: 56px;
  width: 56px;
  border-radius: 56px;
  background-color: #3a465b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.75);
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container.glow {
  -webkit-box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  animation: glow 2.2s infinite alternate;
}
@-moz-keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
@-webkit-keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
@-o-keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
@keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .avatar-container {
  height: 56px;
  width: 56px;
  border-radius: 56px;
  overflow: hidden;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .overlay-league-open {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 56px;
  overflow: hidden;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .new-message-indicator-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  width: 14px;
  border-radius: 20px;
  background-color: #181c28;
  z-index: 200;
  top: 0px;
  right: 0px;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .new-message-indicator-container .indicator {
  height: 12px;
  width: 12px;
  border-radius: 20px;
  background-color: #ff2b6d;
}
.right-panel-slider {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 100vh;
  height: 100%;
  max-width: 704px;
  width: 0%;
  right: 0px;
  background-color: #2d3649;
  border-top-left-radius: 24px;
  z-index: 9000;
  position: absolute;
  transition: width 0.25s ease-in-out;
  flex-wrap: nowrap;
  overflow: hidden;
}
.right-panel-slider.open {
  width: 100%;
}
.lol-pick-ban-slider {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 100vh;
  height: 100%;
  max-width: 704px;
  width: 100%;
  right: 0px;
  background-color: #2d3649;
  border-top-left-radius: 24px;
  z-index: 9000;
  position: absolute;
  transition: width 0.25s ease-in-out;
  flex-wrap: nowrap;
  overflow: hidden;
}
.lol-pick-ban-slider .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-pick-ban-slider .cancel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1c212d;
  cursor: pointer;
  height: 32px;
  width: 32px;
  border-radius: 24px;
}
.lol-pick-ban-slider .header-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  color: #fff;
  font-size: 24px;
}
.lol-pick-ban-slider .content {
  display: flex;
  flex: 1;
  min-width: 704px;
  height: 100%;
  flex-direction: column;
}
.lol-pick-ban-slider .content .player-name {
  color: #fff;
  size: 18px;
  font-family: 'Poppins', sans-serif;
  margin-top: 12px;
}
.lol-pick-ban-slider .info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex: 0.5;
  height: 72px;
  background-color: #252d3d;
}
.lol-pick-ban-slider .info-container .username {
  color: #fff;
  font-size: 24px;
}
.lol-pick-ban-slider .info-container .pos-team {
  color: #b9c4d4;
  font-size: 14px;
  font-weight: 300;
}
.lol-pick-ban-slider .player-pos-container {
  height: 72px;
  width: 72px;
  background-color: rgba(58,70,91,0.3);
  align-items: center;
  justify-content: center;
  display: flex;
}
.pick-ban-selection {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  margin-top: 30px;
  max-height: 150px;
  position: relative;
}
.pick-ban-selection .search-panel-wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 16px;
  min-height: 400px;
  max-height: 400px;
  width: 472px;
  border-radius: 16px;
  z-index: 10;
  overflow: hidden;
}
.pick-ban-selection .search-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  min-height: 96px;
  width: 96px;
  min-width: 96px;
  background-color: rgba(216,226,237,0.1);
  border-radius: 16px;
  overflow: hidden;
}
.pick-ban-selection .pick-ban-champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 24px;
  cursor: pointer;
  position: relative;
}
.pick-ban-selection .pick-ban-champion .selected-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  height: 24px;
  width: 24px;
  border-radius: 32px;
  position: absolute;
  top: 6px;
  left: 6px;
}
.pick-ban-selection .pick-ban-champion .selected-circle.pick {
  background-color: #00baff;
  display: flex;
}
.pick-ban-selection .pick-ban-champion .selected-circle.ban {
  background-color: #ff2b6d;
  display: flex;
}
.pick-ban-selection .pick-ban-champion .champion-img-container {
  height: 96px;
  width: 96px;
  border: 2px solid #000;
  border-radius: 16px;
  overflow: hidden;
}
.pick-ban-selection .pick-ban-champion .champion-img-container.selected-pick {
  border: 2px solid #00baff;
}
.pick-ban-selection .pick-ban-champion .champion-img-container.selected-ban {
  border: 2px solid #ff2b6d;
}
.pick-ban-selection .pick-ban-champion .champion-img-container .pick-cross-line {
  height: 2px;
  width: 100px;
  transform: rotate(45deg);
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.pick-ban-selection .pick-ban-champion .champion-img {
  height: 96px;
  width: 96px;
  border-radius: 16px;
}
.pick-ban-selection .pick-ban-champion .champion-name {
  font-size: 16px;
  color: #a3bbd3;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
.search-champion-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
  padding-bottom: 0px;
  background-color: #3a465b;
  overflow: hidden;
  box-sizing: border-box;
}
.search-champion-panel .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-champion-panel .search-bar-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  flex: 1;
  max-height: 40px;
  border: 1px solid #b9c4d4;
  border-radius: 40px;
  box-sizing: border-box;
}
.search-champion-panel .search-bar-container.selected {
  border: 1px solid #00baff;
}
.search-champion-panel .search-bar-container .search-bar {
  background-color: transparent;
  display: flex;
  flex: 1;
  border: none;
  outline: none;
  height: 24px;
  color: #b9c4d4;
  font-size: 14px;
}
.search-champion-panel .champion-list-container {
  display: flex;
  padding-bottom: 40px;
  margin-top: 16px;
  flex-direction: column;
}
.search-champion-panel .champion-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  cursor: pointer;
}
.search-champion-panel .hero-name {
  font-size: 12;
  color: #b9c4d4;
  margin-left: 8px;
}
.search-champion-panel .champion-img {
  height: 30px;
  width: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.search-champion-panel .champion-img.pick {
  border: 1px solid #00baff;
}
.search-champion-panel .champion-img.ban {
  border: 1px solid #ff2b6d;
}
.search-champion-panel .circle {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  border: 1px solid #b9c4d4;
  margin-right: 16px;
}
.search-champion-panel .circle.pick {
  background-color: #00baff;
  border: 1px solid #00baff;
}
.search-champion-panel .circle.ban {
  background-color: #ff2b6d;
  border: 1px solid #ff2b6d;
}
.pick-ban-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #252d3d;
  padding-bottom: 100px;
}
.pick-ban-content .title {
  color: #d8e2ed;
  font-size: 14px;
  font-weight: 600;
}
.pick-ban-content .recent-games-header {
  display: flex;
  flex: 1;
  flex-direction: row;
  height: 28px;
  background-color: rgba(163,187,211,0.05);
  width: 100%;
  margin-top: 16px;
  position: relative;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}
.pick-ban-content .recent-games-header .large-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 100px;
  font-size: 12px;
  color: #7988a1;
}
.pick-ban-content .recent-games-header .med-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 60px;
  font-size: 12px;
  color: #7988a1;
}
.pick-ban-content .recent-games-header .small-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 40px;
  font-size: 12px;
  color: #7988a1;
}
.play-rate-card {
  display: flex;
  flex-direction: row;
  background-color: rgba(58,70,91,0.25);
  border-radius: 16px;
  height: 66px;
  min-width: 177px;
  overflow: hidden;
  margin-right: 16px;
}
.play-rate-card .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}
.play-rate-card .champion-img {
  height: 66px;
  width: 58px;
  object-fit: cover;
}
.play-rate-card .text-content {
  display: flex;
  flex-direction: column;
  padding: 8px;
  flex: 1;
}
.play-rate-card .text-content .hero-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.play-rate-card .text-content .kda {
  color: #a3bbd3;
  font-size: 9px;
}
.play-rate-card .text-content .pts {
  color: #fff;
  font-size: 10px;
}
.play-rate-card .text-content .count {
  color: #a3bbd3;
  font-size: 9px;
}
.lol-player-versus-card {
  display: flex;
  flex: 1;
  flex-direction: row;
  position: relative;
  min-width: 180px;
  height: 120px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.lol-player-versus-card .spaced-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.lol-player-versus-card .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-player-versus-card .large-champ {
  height: 100%;
  width: 70%;
  object-fit: cover;
}
.lol-player-versus-card .small-champ {
  height: 100%;
  width: 30%;
  object-fit: cover;
}
.lol-player-versus-card .best {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: linear-gradient(#ff0, #ffa500);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 9px;
  font-weight: bold;
  border-bottom-right-radius: 8px;
}
.lol-player-versus-card .worst {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: linear-gradient(#dbdbdb, #bababa);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 9px;
  font-weight: bold;
  font-weight: bold;
  border-bottom-right-radius: 8px;
}
.lol-player-versus-card .gradient-container {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, #000);
  padding: 16px;
}
.lol-player-versus-card .gradient-container .text {
  color: #a3bbd3;
  font-size: 14px;
}
.lol-player-game-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  margin-top: 8px;
}
.lol-player-game-summary .large-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 100px;
  font-size: 12px;
  color: #7988a1;
}
.lol-player-game-summary .med-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 60px;
  font-size: 12px;
  color: #7988a1;
}
.lol-player-game-summary .small-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 40px;
  font-size: 12px;
  color: #7988a1;
}
.lol-player-game-summary .champion-img {
  height: 24px;
  width: 24px;
  border-radius: 24px;
}
.lol-player-game-summary .main {
  color: #fff;
  font-size: 12px;
}
.lol-player-game-summary .description {
  color: #b9c4d4;
  font-size: 10px;
}
.radio-container {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row;
  align-items: center;
}
.radio-container .label-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.radio-container .label-container .radio {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 14px;
  border: solid 1px #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.radio-container .label-container .radio .radio-selected {
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background-color: #022047;
}
.radio-container .label-container .container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.radio-container .label-container .container .text-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
.radio-container .label-container .container .text-container .text-style {
  font-size: 13;
  display: flex;
  flex: 1;
  flex-grow: 1;
}
.radio-container .label-container .container .vote-result-bar-indicator {
  display: block;
  height: 2px;
  background: #eee;
  width: 100%;
}
.radio-container .label-container .container .vote-result-bar-indicator .vote-result-bar-indicator-fill {
  display: block;
  height: 2px;
  transition: width 0.1s linear;
}
.radio-container .vote-result-vote-count {
  align-items: center;
  aspect-ratio: 1;
  background-color: #181c28;
  border-radius: 20px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex: 0 0 40px;
  font-size: 10px;
  height: 40px;
  justify-content: center;
  line-height: 11px;
  margin-left: 16px;
  padding: 2px;
  text-align: center;
}
.view-poll-votes-modal {
  width: 400px;
  padding: 25px 25px;
  max-height: 80vh;
  overflow-y: auto;
}
.view-poll-votes-modal .modal-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 18px;
}
.view-poll-votes-modal .modal-subtitle {
  font-size: 18px;
  color: #fff;
  margin-bottom: 12px;
}
.view-poll-votes-modal .vote-list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: #fff;
  margin-bottom: 12px;
}
.view-poll-votes-modal .vote-list-item .vote-list-item-username {
  margin-left: 8px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
}
.straight-line {
  margin-left: 32px;
  margin-right: 4px;
  width: 1px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -44px;
  background-color: #808080;
  padding: 0px !important;
}
.curved-arrow {
  margin-left: 32px;
  margin-right: 4px;
  width: 10px;
  height: 12px;
  border-left: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-bottom-left-radius: 5px;
  position: absolute;
  top: -5px;
  left: -44px;
}
.sub-player-item-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 44px;
  position: relative;
  padding-left: 57px;
  overflow: hidden;
}
.tab_component {
  display: flex;
  flex-direction: row;
}
.auction-player-header {
  width: calc(100% - 3px);
}
.auction-player-header .auction-tab-container {
  position: absolute;
  width: 100vw;
  pointer-events: none;
  background-image: linear-gradient(to top, #000, rgba(0,0,0,0));
}
.auction-player-header .auction-tab-container.theme_light {
  background-image: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
}
.auction-player-header .headerText {
  font-family: 'Poppins';
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
}
.auction-player-header .projection-text {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
}
.auction-player-header .subHeaderText {
  font-family: 'Lato';
  font-size: 11;
  letter-spacing: 0;
  white-space: nowrap;
}
.auction-player-header .playerInfoText {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
  white-space: nowrap;
}
.auction-player-header .left-component {
  margin-left: 16px;
  margin-top: 22px;
}
.auction-player-header .right-header {
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.auction-player-header .right-header .bid-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 200px);
}
.auction-player-header .right-header .bid-container .bid-item {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
  margin-bottom: 20px;
}
.auction-player-header .right-header .bid-container .bid-item .offer-text {
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
}
.auction-player-header .right-header .bid-container .bid-item .team-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  margin-left: 3px;
}
.auction-player-header .right-header .button-placeholder {
  height: 100%;
  width: 130px;
}
.player-card-player-position {
  height: 40px;
  display: flex;
  flex-direction: row;
  background: rgba(0,0,0,0.6);
  width: 268px;
}
.player-card-player-position >.position {
  min-width: 46.5px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  font-family: 'Muli';
  font-weight: 800;
  padding-left: 5px;
  padding-right: 5px;
}
.player-card-player-position >.team {
  color: #fff;
  padding-left: 10px;
  line-height: 40px;
  font-weight: bold;
  font-family: 'Lato';
  font-size: 18px;
  letter-spacing: 0.08px;
  padding-right: 20px;
  text-transform: uppercase;
}
.player-card-player-position >.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 20px;
  border-color: transparent transparent transparent rgba(0,0,0,0.6);
  position: absolute;
  right: -20px;
}
.modal-wrapper {
  position: relative;
  min-height: 200px;
  min-width: 420px;
  background-color: #2d3649;
  border-radius: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex: 1;
}
.modal-wrapper .close-container {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  cursor: pointer;
  z-index: 10;
}
.modal-wrapper .close-container:hover {
  background-color: #202635;
}
.select-trade-partners {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 600px;
  height: auto;
  max-height: 80vh;
  width: auto;
  max-width: 90vw;
  min-width: 700px;
  box-sizing: border-box;
  position: relative;
}
.select-trade-partners .row {
  display: flex;
  flex-direction: row;
}
.select-trade-partners .custom-checkbox {
  border-color: #7988a1;
  height: 16px;
  width: 16px;
  flex: 0 0 16px;
  top: 0px;
  border-radius: 4px;
}
.select-trade-partners .custom-checkbox.checked {
  background: #00ceb8;
  border-color: #00ceb8;
}
.select-trade-partners .custom-checkbox.checked .checkmark {
  color: #fff;
}
.select-trade-partners .custom-checkbox .checkmark::before {
  font-size: 16px;
}
.select-trade-partners .checkbox-label {
  color: #fff;
  font-size: 12px;
  margin-left: 8px;
  font-family: 'Inter';
  white-space: nowrap;
}
.select-trade-partners .trade-partners-center {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 503px;
  height: 90%;
}
.select-trade-partners .trade-partners-container {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.select-trade-partners .partner-item-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  max-width: 112px;
  margin-right: 2px;
}
.select-trade-partners .scrolled-header {
  display: flex;
  flex: 1;
  height: 34px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  align-items: center;
  justify-content: center;
  width: 112px;
  position: absolute;
  left: 0px;
  z-index: 99;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #2d3649;
  color: #fff;
  -webkit-box-shadow: 0px 0px 1px 0px #000;
  box-shadow: 0px 0px 1px 0px #000;
  cursor: pointer;
}
.select-trade-partners .scrolled-header.selected {
  background-color: #00ceb8;
  color: #022047;
}
.select-trade-partners .scrolled-header .scrolled-header-text {
  font-family: 'Inter';
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  max-width: 80px;
  line-height: 16px;
  user-select: none;
}
.select-trade-partners .trade-partners-scroll {
  padding-left: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 32px;
}
.select-trade-partners .scroll-button-right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  right: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.select-trade-partners .scroll-button-left {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  left: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.trade-partner-roster-item {
  display: flex;
  position: relative;
  flex-direction: column;
  border-radius: 16px;
  padding: 18px 4px;
  box-sizing: border-box;
  max-width: 112px;
  min-width: 112px;
  width: 112px;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex: 1;
  height: 100%;
}
.trade-partner-roster-item.selected {
  background-color: rgba(0,206,184,0.15);
}
.trade-partner-roster-item.is-owner {
  cursor: auto;
}
.trade-partner-roster-item .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 48px;
  background-image: linear-gradient(to left top, #3a465b, #a3bbd3);
  overflow: hidden;
  position: relative;
}
.trade-partner-roster-item .avatar-container .selected-over {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(0,206,184,0.7);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.trade-partner-roster-item .avatar-container .selected-over .selected-text {
  font-size: 12px;
  color: #fff;
  font-family: 'Poppins';
  z-index: 30;
}
.trade-partner-roster-item .display-name {
  color: #eef2f7;
  font-size: 14px;
  margin-top: 4px;
  line-height: 16px;
  font-weight: 600;
  font-family: 'Inter';
  margin-bottom: 4px;
}
.trade-partner-roster-item .display-name.selected {
  color: #00ceb8;
}
.trade-partner-roster-item .faab-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  border-radius: 28px;
  height: 56px;
  max-height: 56px;
  padding: 16px 8px;
  background-color: #515e78;
  cursor: pointer;
  margin: 4px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.trade-partner-roster-item .faab-container.is-own {
  border: 1px solid #fff;
}
.trade-partner-roster-item .faab-container .faab-text {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: medium;
  margin-left: 8px;
  font-family: 'Poppins';
  letter-spacing: 1px;
}
.trade-partner-roster-item .scrolled-header {
  display: flex;
  flex: 1;
  height: 34px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  align-items: center;
  justify-content: center;
  width: 112px;
  position: absolute;
  left: 0px;
  z-index: 99;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #2d3649 a;
  color: #fff;
  -webkit-box-shadow: 0px 0px 1px 0px #000;
  box-shadow: 0px 0px 1px 0px #000;
  cursor: pointer;
}
.trade-partner-roster-item .scrolled-header.selected {
  background-color: #00ceb8;
  color: #022047;
}
.trade-partner-roster-item .scrolled-header.isHover {
  background-color: #3a465b;
}
.trade-partner-roster-item .scrolled-header .scrolled-header-text {
  font-family: 'Inter';
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  max-width: 80px;
  line-height: 16px;
  user-select: none;
}
.trade-center-player-box {
  position: relative;
  margin-top: 4px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 64px;
  height: 64px;
  max-height: 64px;
  margin-bottom: 4px;
  border-width: 1px;
  border-style: solid;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  user-select: none;
  width: 100%;
  min-width: 100%;
}
.trade-center-player-box.selected {
  background-color: rbga(0, 0, 0, 0.5);
}
.trade-center-player-box.clickable {
  cursor: pointer;
  min-height: 68px;
  height: 68px;
  max-height: 68px;
  min-width: 140px;
}
.trade-center-player-box .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-center-player-box .spaced {
  justify-content: space-between;
}
.trade-center-player-box .player-info {
  color: #d8e2ed;
  font-size: 10px;
  font-weight: 400;
  font-family: 'Inter';
  line-height: 12px;
  margin-right: 4px;
}
.trade-center-player-box .player-info.selected {
  opacity: 0.2;
}
.trade-center-player-box .info-like-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 18px;
}
.trade-center-player-box .top-corner-container {
  position: absolute;
  top: 4px;
  right: 4px;
}
.trade-center-player-box .heart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  position: relative;
  margin-left: 4px;
}
.trade-center-player-box .num-interested {
  position: absolute;
  z-index: 1;
  color: #022047;
  font-size: 7px;
  font-weight: 600;
  cursor: pointer;
}
.trade-center-player-box .player-name {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  font-family: 'Inter';
  line-height: 20px;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-center-player-box .player-name.small {
  font-size: 12px;
  max-width: 80px;
}
.trade-center-player-box .player-name:hover {
  text-decoration: underline;
}
.trade-center-player-box .player-name.selected {
  opacity: 0.2;
}
.trade-center-player-box .tradeblock-button {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-height: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  flex: 1;
  align-items: center;
  background-color: transparent;
  color: #d8e2ed;
  border: 1px solid #d8e2ed;
  font-family: 'Poppins', sans-serif;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
}
.trade-center-player-box .tradeblock-button.selected {
  opacity: 0.2;
}
.trade-center-player-box .tradeblock-button .trade-block-text {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  padding-left: 8px;
}
.trade-center-player-box .tradeblock-button.is-owner {
  cursor: pointer;
}
.trade-center-player-box .tradeblock-button.active {
  background-color: #fff;
  border-top: 1px solid transparent;
  color: #022047;
}
.trade-center-player-box .selection-circle {
  height: 22px;
  width: 22px;
  background-color: transparent;
  border: 2px solid #d8e2ed;
  border-radius: 50%;
}
.trade-center-player-box .selection-circle.selected {
  background-color: #00ceb8;
}
.trade-center-player-box .player-menu {
  position: absolute;
  top: 20px;
  width: 235px;
  padding: 8px;
  background-color: #202635;
  min-height: 112px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
.trade-center-player-box .player-menu .send-to {
  font-size: 10px;
  font-weight: bold;
  color: #a3bbd3;
  margin-top: 8px;
  line-height: 18px;
  font-family: 'Inter';
}
.trade-center-player-box .player-col {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.trade-center-player-box .user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 8px;
}
.trade-center-player-box .user-item:hover {
  background-color: rgba(58,70,91,0.5);
}
.trade-center-player-box .user-item .display-name {
  font-size: 14px;
  color: #fff;
  margin-left: 8px;
  font-family: 'Inter';
  line-height: 16px;
  margin-bottom: 2px;
}
.trade-center-player-box .going-to-bottom {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-height: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  flex: 1;
  flex-direction: row-reverse;
  align-items: center;
  color: #fff;
  border: 1px solid #4a5870;
  font-family: 'Poppins', sans-serif;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
  background-color: #4a5870;
}
.trade-center-player-box .going-to-bottom .going-to-text {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  padding-right: 8px;
  opacity: 0.3;
}
.best-available-player-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-bottom: 16px;
}
.best-available-player-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.best-available-player-container .row.players {
  margin-top: 16px;
  width: 100%;
  overflow-x: auto;
}
@media (min-width: 1200px) {
  .best-available-player-container .row.players {
    overflow: hidden;
  }
}
.best-available-player-container .title {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}
.best-available-player-container .player-item-container {
  display: flex;
  flex: 1;
  height: 140px;
  width: 90px;
  max-width: 90px;
  min-width: 90px;
  margin-right: 8px;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.best-available-player-container .player-item-container .avatar-container {
  background-color: #181c28;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 42px;
  z-index: 10;
}
.best-available-player-container .player-item-container .data-container {
  display: flex;
  flex: 1;
  position: relative;
  top: -16px;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.best-available-player-container .player-item-container .data-container .name {
  margin-top: 16px;
  font-size: 14px;
  color: #d8e2ed;
  font-weight: 600;
}
.best-available-player-container .player-item-container .data-container .team {
  color: #b9c4d4;
  font-size: 10px;
  line-height: 12px;
}
.best-available-player-container .player-item-container .data-container .position {
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
}
.best-available-player-container .player-item-container .data-container .circle {
  height: 4px;
  width: 4px;
  border-radius: 4px;
  background-color: #b9c4d4;
  margin: 0 2px;
}
.best-available-player-container .player-item-container .data-container .bottom-section {
  display: flex;
  flex: 1;
  background-color: rgba(58,70,91,0.1);
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.best-available-player-container .player-item-container .data-container .bottom-section .points {
  font-size: 18px;
  color: #fff;
  font-weight: 600px;
}
.trade-center-draft-picks {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.draft-picks-dropdown-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  border-radius: 28px;
  height: 56px;
  max-height: 56px;
  padding: 16px 8px;
  background-color: #515e78;
  margin: 4px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  border: 1px solid transparent;
}
.draft-picks-dropdown-container.is-own {
  border: 1px solid #fff;
}
.draft-pick-text {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: medium;
  margin-left: 8px;
  font-family: 'Poppins';
  letter-spacing: 1px;
}
.draft-pick-menu {
  display: flex;
  flex-direction: column;
  background-color: #3a465b;
  padding: 24px 20px;
  min-height: 300px;
  width: 220px;
  border-radius: 16px;
  position: absolute;
  top: 4px;
  z-index: 10;
  cursor: auto;
  justify-content: space-between;
}
.draft-pick-menu .close-container {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  cursor: pointer;
}
.draft-pick-menu .close-container:hover {
  background-color: #202635;
}
.draft-pick-menu .add-button {
  margin-top: 8px;
  display: flex;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: #00ceb8;
  align-items: center;
  justify-content: center;
  color: #022047;
  cursor: pointer;
  min-height: 48px;
  max-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.draft-pick-menu .add-button.disabled {
  opacity: 0.5;
}
.draft-pick-menu .cancel-button {
  margin-top: 8px;
  display: flex;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: rgba(216,226,237,0.1);
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  min-height: 48px;
  max-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.draft-pick-menu .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins';
}
.draft-pick-menu .subtitle {
  font-size: 16px;
  color: #a3bdd3;
  font-family: 'Inter';
  line-height: 19px;
}
.dropdown-container {
  position: relative;
  margin-top: 16px;
  width: 100%;
  min-height: 60px;
  z-index: 10;
}
.dropdown-container .first .app-dropdown {
  z-index: 30;
}
.dropdown-container .app-dropdown {
  min-width: 100%;
  position: absolute;
}
.dropdown-container .app-dropdown:hover .selected-value {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown-container .selected-value {
  color: #a3bbd3;
  background-color: #2d3649;
  padding: 18px 28px;
  border-radius: 28px;
}
.dropdown-container .dropdown-items-container .dropdown-items .app-dropdown-item {
  background-color: #2d3649;
}
.trade-center-draft-pick-box {
  position: relative;
  margin-top: 4px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 64px;
  height: 64px;
  max-height: 64px;
  margin-bottom: 4px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  user-select: none;
  min-width: 100%;
  background-color: #515e78;
}
.trade-center-draft-pick-box.is-own {
  background-color: transparent;
  border: 1px solid #515e78;
}
.trade-center-draft-pick-box .top-corner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 4px;
}
.trade-center-draft-pick-box .draft-pick-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.trade-center-draft-pick-box .draft-pick-content .text {
  font-size: 12px;
  color: #fff;
  max-width: 50px;
}
.trade-center-draft-pick-box .draft-pick-content .interest-button {
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.trade-center-draft-pick-box .draft-pick-content .num-interested {
  font-size: 9px;
  color: #022047;
  position: absolute;
  right: 9px;
}
.trade-center-draft-pick-box .draft-pick-content .prev-owner {
  font-size: 10px;
  color: #a3bbd3;
}
.trade-center-draft-pick-box .tradeblock-button {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-height: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  flex: 1;
  align-items: center;
  background-color: transparent;
  color: #d8e2ed;
  border: 1px solid #d8e2ed;
  font-family: 'Poppins', sans-serif;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
}
.trade-center-draft-pick-box .tradeblock-button .trade-block-text {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  padding-left: 8px;
}
.trade-center-draft-pick-box .tradeblock-button.is-owner {
  cursor: pointer;
}
.trade-center-draft-pick-box .tradeblock-button.active {
  background-color: #fff;
  border-top: 1px solid transparent;
  color: #022047;
}
.app-dropdown-v2 {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.app-dropdown-v2 .selected-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid transparent;
  height: 48px;
  padding: 12px;
  box-sizing: border-box;
  background-color: #2d3649;
  justify-content: space-between;
  color: #a3bbd3;
  cursor: pointer;
  border-radius: 24px;
}
.app-dropdown-v2 .selected-container.isOpen {
  border: 1px solid #fff;
  color: #fff;
}
.app-dropdown-v2 .selected-container .selected-text {
  font-size: 12px;
  line-height: 16px;
  font-family: 'Inter';
  font-weight: 600;
}
.app-dropdown-v2 .hover-between {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 70px;
  background-color: transparent;
}
.app-dropdown-v2 .dropdown-container {
  display: inline-flex;
  flex-direction: column;
  height: 112px;
  flex: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  box-sizing: border-box;
  background-color: #242d40;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
}
.app-dropdown-v2 .dropdown-container .dropdown-scroll {
  padding: 8px;
}
.app-dropdown-v2 .dropdown-container .dropdown-item {
  display: flex;
  align-items: center;
  max-height: 44px;
  padding: 12px 24px;
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
}
.app-dropdown-v2 .dropdown-container .dropdown-item:hover {
  background-color: #3a465b;
}
.app-dropdown-v2 .dropdown-container .dropdown-item:hover.selected {
  background-color: #d8e2ed;
}
.app-dropdown-v2 .dropdown-container .dropdown-item.selected {
  background-color: #d8e2ed;
  color: #022047;
}
.app-dropdown-v2 .dropdown-container .dropdown-item .item-text {
  font-size: 14px;
  font-family: 'Inter';
  line-height: 18px;
  font-weight: 600;
}
.add-trade-assets {
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
  min-height: 600px;
  max-height: 70vh;
  width: auto;
  max-width: 90vw;
  min-width: 700px;
  overflow: hidden;
  position: relative;
}
.add-trade-assets .content-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  max-height: 520px;
  box-sizing: border-box;
  overflow: hidden;
}
.add-trade-assets .left {
  display: flex;
  flex: 1;
  flex-direction: column;
  z-index: 20;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.add-trade-assets .right {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-left: 1px solid #61707e;
  min-width: 500px;
  max-width: 500px;
}
.add-trade-assets .trade-partners-assets-container {
  display: flex;
  flex-direction: row;
}
.add-trade-assets .add-trade-assets-scroll {
  padding-left: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 32px;
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
}
.add-trade-assets .add-trade-summary-scroll {
  padding-left: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 32px;
  flex: 1;
}
.add-trade-assets .scroll-button-right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  right: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.add-trade-assets .scroll-button-left {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  left: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.trade-center-asset-select-list {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 16px 4px;
  box-sizing: border-box;
  width: 148px;
  min-width: 148;
  align-items: center;
  margin-left: 1px;
  user-select: none;
}
.trade-center-asset-select-list .row {
  display: flex;
  align-items: center;
}
.trade-center-asset-select-list .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 48px;
  background-image: linear-gradient(#3a465b, #a3bbd3);
  overflow: hidden;
  position: relative;
}
.trade-center-asset-select-list .display-name {
  color: #eef2f7;
  font-size: 14px;
  margin-top: 4px;
  line-height: 16px;
  font-weight: 600;
  font-family: 'Inter';
  margin-bottom: 4px;
}
.trade-center-asset-select-list .trade-box-player-container {
  display: flex;
  width: 100%;
}
.trade-center-asset-select-list .faab-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  border-radius: 28px;
  height: 56px;
  max-height: 56px;
  padding: 16px 8px;
  background-color: #515e78;
  margin: 4px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.trade-center-asset-select-list .faab-container.is-own {
  border: 1px solid #fff;
}
.trade-center-asset-select-list .faab-container .faab-text {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: medium;
  margin-left: 8px;
  font-family: 'Poppins';
  letter-spacing: 1px;
}
.trade-center-asset-select-list .faab-inside {
  display: flex;
  flex-direction: row;
  flex: 1;
  position: relative;
}
.trade-center-asset-select-list .faab-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  width: 240px;
  background-color: #3a465b;
  box-sizing: border-box;
  top: -60px;
  border-radius: 16px;
  padding: 16px;
  cursor: auto;
  z-index: 10;
  left: 50px;
  margin-bottom: 40px;
}
.trade-center-asset-select-list .faab-menu .close-container {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  cursor: pointer;
}
.trade-center-asset-select-list .faab-menu .close-container:hover {
  background-color: #202635;
}
.trade-center-asset-select-list .faab-menu .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins';
}
.trade-center-asset-select-list .faab-menu .subtitle {
  font-size: 16px;
  color: #a3bdd3;
  font-family: 'Inter';
  line-height: 19px;
}
.trade-center-asset-select-list .faab-menu .input-faab-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  background-color: #2d3649;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 28px;
  margin-top: 16px;
  height: 48px;
  box-sizing: border-box;
}
.trade-center-asset-select-list .faab-menu .input-faab-container .clear-input {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.trade-center-asset-select-list .faab-menu .input-faab-container .dollar {
  color: #d8e2ed;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  font-family: 'Poppins';
}
.trade-center-asset-select-list .faab-menu .input-faab-container .input-faab {
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  outline: none;
  line-height: 20px;
  padding-left: 4px;
  flex-grow: 1;
  max-width: 100px;
}
.trade-center-asset-select-list .faab-menu .add-button {
  margin-top: 8px;
  display: flex;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: #00ceb8;
  align-items: center;
  justify-content: center;
  color: #022047;
  cursor: pointer;
  min-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.trade-center-asset-select-list .faab-menu .add-button.disabled {
  opacity: 0.5;
}
.trade-center-asset-select-list .faab-menu .cancel-button {
  margin-top: 8px;
  display: flex;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: rgba(216,226,237,0.1);
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  min-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.trade-center-asset-select-list .dropdown-container {
  position: relative;
  margin-top: 16px;
  width: 100%;
  height: 60px;
}
.trade-summary {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.trade-summary.has-footer {
  margin-bottom: 100px;
}
.trade-summary .asset-row {
  display: flex;
  margin-bottom: 8px;
}
.trade-summary .spaced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trade-summary .cancel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 40px;
  cursor: pointer;
  z-index: 10;
}
.trade-summary .cancel-container:hover {
  background-color: #202635;
}
.trade-summary .row {
  display: flex;
  align-items: center;
}
.trade-summary .spaced {
  justify-content: space-between;
}
.trade-summary .roster-trade-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.trade-summary .roster-trade-container .username {
  font-size: 14px;
  color: #fff;
  margin-left: 4px;
}
.trade-summary .roster-trade-container .accepted {
  font-size: 9px;
  color: #00ceb8;
  margin-left: 4px;
  font-family: 'Poppins';
}
.trade-summary .roster-trade-container .rejected {
  font-size: 9px;
  color: #ff2b6d;
  margin-left: 4px;
  font-family: 'Poppins';
}
.trade-summary .roster-trade-container .pending {
  font-size: 9px;
  color: #a3bbd3;
  margin-left: 4px;
}
.trade-summary .roster-trade-container .roster-trade-summary {
  margin-top: 8px;
  display: flex;
  padding: 16px;
  box-sizing: border-box;
  background-color: #3a465b;
  border-radius: 16px;
  flex-direction: column;
  flex: 1;
}
.trade-summary .roster-trade-container .roster-trade-summary .roster-trade-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(163,187,211,0.1);
  height: 10px;
  max-height: 10px;
  margin-top: 8px;
}
.trade-summary .roster-trade-container .roster-trade-summary .roster-trade-title .panel-title {
  color: #a3bbd3;
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  flex: 1;
  line-height: 10px;
  font-family: 'Poppins';
}
.trade-summary .roster-trade-container .roster-trade-summary .divide-left {
  border-left: 1px solid rgba(255,255,255,0.3);
}
.trade-summary .roster-trade-container .roster-trade-summary .panel-container {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px;
  box-sizing: border-box;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .asset-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  max-height: 32px;
  max-width: 32px;
  border-radius: 32px;
  flex-direction: column;
  overflow: hidden;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .asset-circle .asset-text {
  color: #fff;
  font-size: 10px;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .meta {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .meta .meta-text-1 {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-family: 'Inter';
  font-weight: 600;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .meta .meta-text-2 {
  color: #d8e2ed;
  font-size: 10px;
  line-height: 12px;
  font-family: 'Inter';
}
.trade-summary .empty-container {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  align-items: center;
}
.trade-summary .empty-text {
  font-size: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
}
.switch-container {
  display: flex;
  position: relative;
  border-radius: 7px;
  height: 14px;
  width: 36px;
  background-color: #808080;
  align-items: center;
}
.switch-container .switch-circle {
  display: flex;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  left: 0px;
  transition: all 0.3s ease-in-out;
}
.switch-container .switch-circle.enabled {
  left: 16px;
  background-color: #008000;
  transition: all 0.25s ease-in-out;
}
.review-trade-offer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 600px;
  max-height: 70vh;
  width: 600px;
  max-width: 600px;
  min-width: 600px;
  box-sizing: border-box;
}
.review-trade-offer .review-trade-scroll {
  display: flex;
  flex: 1;
  padding-left: 32px;
  padding-top: 16px;
  padding-bottom: 32px;
  padding-right: 32px;
  flex-direction: column;
}
.propose-trade-partners {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  box-sizing: border-box;
}
.propose-trade-partners .propose-trade-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-grow: 1;
}
.propose-trade-partners .title {
  font-size: 18px;
  color: #fff;
}
.propose-trade-partners .description {
  font-size: 14px;
  color: #eef3f7;
}
.propose-trade-partners .row {
  display: flex;
  align-items: center;
}
.propose-trade-partners .spaced {
  justify-content: space-between;
}
.propose-trade-partners .trade-header {
  padding: 32px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(163,187,211,0.1);
}
.propose-trade-partners .trade-title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  user-select: none;
}
.propose-trade-partners .footer-title {
  font-size: 16px;
  line-height: 18px;
  color: #eef2f7;
  font-family: 'Inter';
  font-weight: 600;
  user-select: none;
}
.propose-trade-partners .trade-description {
  font-size: 14px;
  color: #eef2f7;
  line-height: 18px;
  font-family: 'Inter';
}
.propose-trade-partners .propose-trade-footer {
  position: relative;
  padding: 16px 32px;
  background-color: #2d3649;
  box-sizing: border-box;
  z-index: 20;
}
.propose-trade-partners .propose-trade-footer .footer-shadow {
  height: 32px;
  position: absolute;
  background: linear-gradient(rgba(36,45,64,0), #242d40);
  z-index: 20;
  top: -32px;
  left: 0;
  right: 0;
  width: 100%;
}
.propose-trade-partners .propose-trade-footer .next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  color: #022047;
  padding: 16px 32px;
  border-radius: 32px;
  cursor: pointer;
  font-weight: 600;
  width: 192px;
  height: 48px;
  font-family: 'Poppins';
  line-height: 14px;
  box-sizing: border-box;
}
.propose-trade-partners .propose-trade-footer .back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(216,226,237,0.1);
  color: #fff;
  padding: 16px 32px;
  border-radius: 32px;
  cursor: pointer;
  border: 1px solid #fff;
  font-weight: 600;
  width: 192px;
  height: 48px;
  box-sizing: border-box;
}
.player-transaction-history-item {
  font-size: 13px;
  padding: 12px 8px;
}
.player-transaction-history-item .transaction-history-waiver,
.player-transaction-history-item .transaction-history-draft,
.player-transaction-history-item .transaction-history-fa,
.player-transaction-history-item .transaction-history-trade {
  display: flex;
  flex-direction: row;
}
.player-transaction-history-item .transaction-history-waiver .team-name,
.player-transaction-history-item .transaction-history-draft .team-name,
.player-transaction-history-item .transaction-history-fa .team-name,
.player-transaction-history-item .transaction-history-trade .team-name {
  font-weight: 900;
}
.player-transaction-history-item .action-column {
  width: 100px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  line-height: 12px;
}
.player-transaction-history-item .body-column {
  flex-grow: 1;
}
.player-transaction-history-item .date-time {
  font-size: 10px;
}
.player-transaction-history-item .trade-detail-for-roster {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
}
.player-transaction-history-item .trade-detail-for-roster .trade-detail-item {
  font-size: 11px;
  padding: 2px 0;
}
.player-transaction-history-item .trade-detail-for-roster .trade-receive {
  padding-right: 10px;
}
.player-transaction-history-section .league-season {
  font-size: 12px;
  font-weight: bold;
  padding: 5px 0;
  margin-top: 10px;
}
.player-transaction-history .view-all-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
}
.player-transaction-history .view-all-container .view-all-divider {
  height: 1px;
  background-color: #00ceb8;
  flex-grow: 1;
}
.player-transaction-history .view-all-container .view-all-text {
  color: #00ceb8;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0 10px;
}
.player-transaction-history .no-history {
  font-size: 12px;
  text-align: center;
}
.player-card-v2-header {
  width: 100%;
  position: relative;
}
.player-card-v2-header .status {
  position: absolute;
  width: 260px;
  height: 24px;
  background: linear-gradient(to right, #18202f, rgba(2,32,71,0.4), rgba(142,142,142,0));
  opacity: 0.8;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-card-v2-header .status img {
  height: 20px;
  width: 20px;
  margin-right: 4px;
  margin-left: 16px;
}
.player-card-v2-header .status p {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: left;
  color: #eef2f7;
}
.player-card-v2-header .team-bg-image {
  position: absolute;
  width: 180px;
  height: 180px;
  flex-grow: 0;
  opacity: 0.24;
  top: -20px;
  left: -30px;
}
.player-card-v2-header .player-image {
  position: absolute;
  width: 156px;
  height: 105px;
  top: 10px;
  left: 20px;
}
.player-card-v2-header .top-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 168px;
}
.player-card-v2-header .top-row .player-name {
  height: 60px;
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -1px;
  text-align: left;
  color: var(--white);
}
.player-card-v2-header .top-row .player-name .player-last-name {
  font-weight: 600;
  margin-left: 8px;
}
.player-card-v2-header .top-row .player-owner i {
  color: #58a7ff;
  width: 16px;
  height: 8px;
}
.player-card-v2-header .top-row .player-owner span {
  height: 22px;
  flex-grow: 0;
  margin: 0 0 0 4px;
  font-family: Inter;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: var(--white);
}
.player-card-v2-header .trapezoid-tab {
  width: 100%;
}
.player-card-v2-header .trapezoid-tab .player-team-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 320px;
  margin-top: 28px;
  margin-left: 24px;
}
.player-card-v2-header .trapezoid-tab .player-team-info span {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.player-card-v2-header .trapezoid-tab .player-team-info .player-team-number {
  margin-left: 6px;
}
.player-card-v2-header .trapezoid-tab .player-team-info .dot-separator {
  margin-left: 16px;
  margin-right: 16px;
}
.player-card-v2-header .trapezoid-tab .player-team-info .player-team-positions {
  display: flex;
  flex-direction: row;
}
.player-card-v2-header .trapezoid-tab .player-team-info .player-team-positions .player-team-position {
  margin-right: 4px;
  font-size: 18px;
  line-height: 1.33;
}
.player-card-v2-header .trapezoid-tab .player-metrics {
  display: flex;
  flex-direction: row;
}
.player-card-v2-header .trapezoid-tab .player-metrics .vl {
  width: 1.5px;
  height: 32px;
  flex-grow: 0;
  border-radius: 16px;
  background-color: rgba(124,139,164,0.7);
  margin-left: 24px;
  margin-right: 24px;
}
.player-card-v2-header .trapezoid-tab .player-metrics .player-metric-category {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #d8e2ed;
  margin-bottom: 6px;
}
.player-card-v2-header .trapezoid-tab .player-metrics .player-metric-value {
  font-family: Inter;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #fff;
}
.nba-recent-games {
  width: 100%;
  height: 188px;
  margin-bottom: 52px;
}
.nba-recent-games h2 {
  margin-top: 20px;
  margin-left: 24px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-rankings h2 {
  margin-left: 24px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-rankings .rank-fields {
  display: flex;
  flex-direction: row;
}
.player-rankings .rank-fields .field {
  margin-left: 24px;
  margin-top: 8px;
}
.player-rankings .rank-fields .field span {
  flex-grow: 0;
  font-family: Inter;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.player-rankings .rank-fields .field span.field-name {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.25px;
  margin-left: 4px;
}
.player-ownership-percentage h2 {
  margin-left: 24px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
  margin-bottom: 8px;
}
.player-ownership-percentage span {
  flex-grow: 0;
  font-family: Inter;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
  margin-left: 24px;
}
.nba-weekly-game-projections {
  width: 100%;
}
.nba-weekly-game-projections .game-projections-header {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  margin-left: 24px;
  width: 558px;
  justify-content: space-between;
}
.nba-weekly-game-projections .game-projections-header h2 {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-weekly-game-projections .game-projections {
  margin-left: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
}
.nba-weekly-game-projections .game-projections .left-arrow {
  margin-top: 32px;
  cursor: pointer;
}
.nba-weekly-game-projections .game-projections .right-arrow {
  margin-top: 32px;
  cursor: pointer;
}
.nba-weekly-game-projections .game-projections .projection-cards {
  width: 558px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin-right: 6px;
  margin-left: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nba-weekly-game-projections .game-projections .projection-cards::-webkit-scrollbar {
  display: none;
}
.nba-weekly-opponent-stats {
  margin-left: 24px;
  margin-top: 20px;
}
.nba-weekly-opponent-stats h2 {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-weekly-opponent-stats .opponent-stats-container {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}
.nba-weekly-opponent-stats .category-row {
  width: 56px;
  height: 30px;
}
.nba-weekly-opponent-stats .category-row .category-text {
  height: 16px;
  margin-top: 8px;
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #a3bbd3;
}
.nba-weekly-opponent-stats .opponent-row {
  width: 80px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nba-weekly-opponent-stats .opponent-row .opponent-image {
  width: 16px;
  height: 16px;
}
.nba-weekly-opponent-stats .opponent-row .opponent-name {
  margin-left: 4px;
  margin-top: 4px;
  flex-grow: 0;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.nba-weekly-opponent-stats .opponent-row .opponent-rank {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
}
.nba-season-average {
  margin-left: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.nba-season-average h2 {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-season-average .season-average-container {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}
.nba-season-average .category-row {
  width: 80px;
  height: 30px;
}
.nba-season-average .category-row .category-text {
  height: 16px;
  margin-top: 8px;
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #a3bbd3;
}
.nba-season-average .stat-row {
  width: 60px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nba-season-average .stat-row .stat-name {
  margin-left: 4px;
  margin-top: 4px;
  flex-grow: 0;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.nba-season-average .stat-row .stat-value {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
}
.nba-player-research {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.nba-player-research .research-left-panel {
  width: 600px;
}
.nba-player-research .research-left-panel .nba-player-ranking-and-percentages {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 75px;
}
.nba-player-research .research-right-panel {
  width: 300px;
}
.nba-player-research .research-right-panel h2 {
  margin-left: 12px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-player-gamelog {
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.nba-player-gamelog .header-row-sticky-container {
  position: sticky;
  top: 0;
  background: #252d3d;
  width: 100%;
}
.nba-player-gamelog .header-row {
  display: flex;
  flex-direction: row;
  height: 28px;
  padding: 4px 0px 8px 24px;
  background: rgba(163,187,211,0.05);
}
.nba-player-gamelog .game-row {
  display: flex;
  flex-direction: row;
  height: 28px;
  padding: 4px 12px 8px 24px;
  display: flex;
  align-items: center;
}
.nba-player-gamelog .row-col {
  width: 39px;
  height: 100%;
  flex-grow: 0;
  margin: 0 4px 0 0;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  color: #a3bbd3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nba-player-gamelog .row-col.align-left {
  justify-content: flex-start;
  margin: 0 12px 0 0;
}
.nba-player-gamelog .row-spacer {
  width: 12px;
}
.player-card-v2-gamelog {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 100%;
  width: 100%;
}
.player-card-v2-gamelog .gamelog-container {
  width: 100%;
}
.player-card-v2-gamelog .gamelog-container .season-gamelog .season-text-container {
  margin-left: 24px;
  margin-bottom: 16px;
  cursor: pointer;
}
.player-card-v2-gamelog .gamelog-container .season-gamelog .season-text-container.expanded {
  cursor: default;
}
.player-card-v2-gamelog .gamelog-container .season-gamelog .season-text {
  height: 20px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #d8e2ed;
}
.player-card-v2-team {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 100%;
  width: 100%;
}
.player-card-v2-team .team-rank-container {
  margin-bottom: 24px;
}
.player-card-v2-team .team-rank-container .title {
  margin-left: 24px;
}
.player-card-v2-team .team-rank-container .team-rank-row {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
}
.player-card-v2-team .team-rank-container .team-rank-row .team-rank-container .team-rank-category {
  flex-grow: 0;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
  color: #eef2f7;
  margin-bottom: 8px;
}
.player-card-v2-team .team-rank-container .team-rank-row .team-rank-container .team-rank-value-container {
  width: 64px;
  height: 30px;
  border-radius: 4px;
  margin-right: 4px;
}
.player-card-v2-team .team-rank-container .team-rank-row .team-rank-container .team-rank-value-container .team-rank-value {
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #181c28;
  padding-top: 4px;
  padding-left: 8px;
}
.player-card-v2-team .team-depth-chart-container {
  margin-left: 24px;
  margin-bottom: 32px;
}
.player-card-v2-team .team-depth-chart-container .position-group-header {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7888a4;
  margin: 15px 0 10px 0;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart .position-group {
  margin-bottom: 20px;
  margin-right: 20px;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart .position-group .position {
  margin-bottom: 8px;
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #a3bbd3;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart .position-group .position-player {
  margin-bottom: 4px;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
  color: #fff;
  cursor: pointer;
}
.player-card-v2-team .title {
  margin-bottom: 16px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-card-v2-history {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 100%;
  width: 100%;
}
.player-card-v2-history .history-container {
  width: 100%;
  height: 100%;
}
.player-card-v2-history .history-container .header-row {
  display: flex;
  flex-direction: row;
  height: 28px;
  padding: 4px 12px 8px 24px;
  background: rgba(163,187,211,0.05);
}
.player-card-v2-history .history-container .season-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 28px;
  padding: 4px 12px 8px 24px;
  display: flex;
  align-items: center;
}
.player-card-v2-history .history-container .row-col {
  width: 49px;
  height: 100%;
  flex-grow: 0;
  margin: 0 5px 0 0;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  color: #a3bbd3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.player-card-v2-history .title {
  margin-left: 24px;
  margin-bottom: 12px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-card .details-panel {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top-right-radius: 10px;
  padding-bottom: 16px;
  background: #252d3d;
}
.player-card .tabs {
  display: flex;
  flex-direction: row;
  padding: 4px 0px 20px 24px;
  background: $colorPlayerCardBackground;
}
.player-card .tabs .tab {
  width: 116px;
  height: 40px;
  margin-right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: rgba(255,174,88,0.1);
  cursor: pointer;
}
.player-card .tabs .tab span {
  flex-grow: 0;
  font-family: Poppins;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: normal;
  text-align: left;
  color: #ffae58;
  margin-left: 8px;
}
.player-card .tabs .tab.selected {
  background-color: #ffae58;
}
.player-card .tabs .tab.selected span {
  color: #022047;
}
.player-card .tab-content {
  background: $colorPlayerCardBackground;
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.player-card .tab-content .hidden {
  display: none;
}
.draft-cell-emoji {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: auto;
}
.draft-cell-emoji .draft-emoji {
  margin-right: -6px;
  pointer-events: auto;
}
.draft-cell-emoji .draft-emoji img {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.draft-cell-emoji .overlay {
  position: absolute;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 100;
  pointer-events: auto;
  width: 200px;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.draft-cell-emoji .overlay.below {
  top: calc(100% - 1px);
}
.draft-cell-emoji .overlay.above {
  bottom: calc(100% - 1px);
}
.draft-cell-emoji .overlay.left {
  left: 0;
}
.draft-cell-emoji .overlay.right {
  right: 0;
}
.draft-cell-emoji .overlay::-webkit-scrollbar {
  width: 12px;
}
.draft-cell-emoji .overlay::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border: 2px solid #fff;
  border-radius: 8px;
}
.draft-cell-emoji .overlay::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
.draft-cell-emoji .overlay ul {
  list-style: none;
  padding-bottom: 8px;
  padding-top: 8px;
}
.draft-cell-emoji .overlay li {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  height: 34px;
  padding-left: 16px;
  padding-right: 16px;
}
.draft-cell-emoji .overlay li div {
  flex: 1;
  margin-right: 8px;
  margin-left: 8px;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  color: #39465b;
}
.draft-cell-emoji .overlay li img {
  width: 20px;
  height: 20px;
}
.theme-dark .draft-cell-emoji .overlay {
  background-color: #363957;
}
.theme-dark .draft-cell-emoji .overlay::-webkit-scrollbar-thumb {
  border-color: #363957;
}
.theme-dark .draft-cell-emoji .overlay li div {
  color: #fff;
}
.draft-board {
  width: 100vw;
  overflow-x: auto;
  flex-direction: column;
  position: relative;
}
.draft-board .draft-board-bg-underlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.draft-board .dimmed {
  opacity: 0.25;
}
.draft-board .column-container {
  display: flex;
  position: relative;
  margin: 0 auto;
  padding-bottom: 12px;
  width: 96vw;
  overflow-x: auto;
}
.draft-board .team-column {
  display: inline-block;
  vertical-align: top;
  position: relative;
  flex-grow: 1;
  padding-top: 5px;
}
.draft-board .team-column.active-player-light {
  background-color: #fff;
  border-radius: 8px;
}
.draft-board .team-column.active-player-dark {
  background-color: #3a465b;
  border-radius: 8px;
}
.draft-board .team-column .custom-team-name {
  font-size: 13px;
  font-weight: bold;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  overflow-x: hidden;
  position: relative;
  cursor: pointer;
  line-height: 13px;
  margin-bottom: 7px;
}
.draft-board .team-column .custom-team-name >div {
  width: 100px;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.draft-board .team-column .my-team-highlight {
  position: absolute;
  width: calc(100% + 2px);
  height: 100%;
  left: -2px;
  top: 1px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 5px 5px 10px #ccd2da;
}
.draft-board .team-column .team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto;
  z-index: 99;
  position: relative;
  top: 8px;
  cursor: pointer;
}
.draft-board .team-column .team-avatar.default {
  background: #f9f9f9;
}
.draft-board .team-column .team-avatar .autopick-indicator-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.draft-board .team-column .draftboard-presence-indicator {
  width: 10px;
  height: 10px;
  background: $colorRb;
  border-radius: 50%;
}
.draft-board .team-column .name-container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.draft-board .team-column .team-header-container-clone {
  display: none;
}
.draft-board .team-column .team-name {
  font-size: 13px;
  font-weight: 900;
  color: #555;
  height: 40px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 102px;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  height: 100%;
}
.draft-board .team-column .team-name.unclaimed {
  color: #bbb;
}
.draft-board .team-column .team-name.picking {
  color: #ffac61;
}
.draft-board .team-column .team-name .claim-btn {
  font-size: 11px;
  color: #fff;
  font-weight: normal;
  border-radius: 20px;
  background: #6e7df5;
  height: 25px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 10px;
  margin-right: 2px;
  width: 100%;
  text-transform: uppercase;
  font-family: 'Muli';
  font-weight: 700;
  letter-spacing: 1px;
  padding-bottom: 1px;
}
.draft-board .team-column .team-name .claim-btn:hover {
  opacity: 0.75;
}
.draft-board .team-column .team-name .commish {
  height: 12px;
  position: absolute;
}
.draft-board .team-column .team-name .fa-star {
  font-size: 10px;
  padding: 0 3px;
}
.draft-board .team-column .claim-btn-container {
  height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.draft-board .team-column .current-roster {
  position: relative;
  margin-top: 30px;
}
.draft-board .team-column .current-roster .cell .player-name {
  color: #444;
}
.draft-board .team-column .current-roster .cell .position {
  color: #444;
}
.draft-board .team-column .current-roster.theme-dark .cell .player-name {
  color: #a3bbd3;
}
.draft-board .team-column .current-roster.theme-dark .cell .position {
  color: #a3bbd3;
}
.draft-board .team-column .keepers {
  position: relative;
}
.draft-board .team-column .keepers .cell {
  display: flex;
  justify-content: flex-start;
}
.draft-board .team-column .keepers .cell .player-name {
  color: #444;
}
.draft-board .team-column .keepers .cell .position {
  color: #444;
}
.draft-board .team-column .keepers.theme-dark .cell .player-name {
  color: #a3bbd3;
}
.draft-board .team-column .keepers.theme-dark .cell .position {
  color: #a3bbd3;
}
.draft-board .team-column .keeper-header {
  width: 100px;
  font-size: 11px;
  font-weight: bold;
  height: 40px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.draft-board .team-column .keeper-header.theme_dark {
  color: #a3bbd3;
}
.draft-board .row-num-column {
  margin-top: 40px;
  margin-right: 10px;
  margin-left: 15px;
  display: inline-block;
  position: absolute;
  left: -50px;
}
.draft-board .row-num-column .row-num {
  height: 60px;
  line-height: 60px;
  text-align: right;
  letter-spacing: 0.5px;
  font-size: 13px;
  font-weight: 900;
  color: #999;
  margin-right: 10px;
  box-sizing: border-box;
}
.draft-board .cell-container {
  flex-grow: 1;
}
.draft-board .extra-slot {
  min-width: 120px;
  min-height: 50px;
}
.draft-board .cell {
  min-width: 120px;
  min-height: 50px;
  border-radius: 8px;
  background: #d0d8e6;
  margin: 0 1px 2px 1px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  padding: 4px 0px 0px 8px;
  justify-content: flex-start;
  font-family: 'Muli';
}
.draft-board .cell.is-lol {
  min-height: 60px;
}
.draft-board .cell.is-active {
  justify-content: center;
}
.draft-board .cell.current-pick {
  background: #ffd900;
  color: #ad4e09;
  font-size: 20px;
}
.draft-board .cell.current-pick .pick {
  color: #ad4e09;
}
.draft-board .cell.current-pick:hover {
  background: #ffe341;
}
.draft-board .cell.times-up {
  background: #444;
  color: #fff;
  font-size: 13px;
}
.draft-board .cell.times-up .pick {
  color: #737373;
}
.draft-board .cell:hover {
  background: #b2b8c1;
}
.draft-board .cell .timer-text {
  font-weight: 900;
  font-size: 13px;
  align-self: center;
  margin: -4px 0px 0px -8px;
}
.draft-board .cell .pick {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1px;
  color: #737373;
  opacity: 0.6;
  position: absolute;
  right: 8px;
  top: 8px;
}
.draft-board .cell .bye {
  font-size: 10px;
  letter-spacing: 0.1px;
  color: #fff;
  position: absolute;
  bottom: 10px;
  right: 8px;
  opacity: 0.75;
}
.draft-board .cell .player .position {
  text-transform: uppercase;
  color: #344054;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft-board .cell .player .player-name {
  color: #022047;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 86px;
  overflow: hidden;
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft-board .cell .player .sub-player-name {
  color: #022047;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 86px;
  overflow: hidden;
  font-family: 'Poppins';
  font-size: 9px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  text-align: left;
  opacity: 0.5;
}
.draft-board .cell .player .keeper-icon {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: #fff;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  color: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}
.draft-board .cell .pick-traded {
  background: #677897;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
  max-width: 110px;
}
.draft-board .cell .pick-traded.own {
  background: #000;
}
.draft-board .cell.lol .player {
  color: #333;
}
.draft-board .cell.lol .player .first-name {
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 84px;
  overflow: hidden;
  padding-bottom: 13px;
  font-weight: bold;
}
.draft-board .cell.lol .player .last-name {
  display: none;
}
.draft-board .cell.lol .lol-role-icon-container {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  bottom: 0;
}
.draft-board .cell.lol .lol-role-icon-container.top {
  background-image: url("https://sleepercdn.com/images/icons/lol/top.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.jun {
  background-image: url("https://sleepercdn.com/images/icons/lol/jun.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.mid {
  background-image: url("https://sleepercdn.com/images/icons/lol/mid.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.adc {
  background-image: url("https://sleepercdn.com/images/icons/lol/adc.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.sup {
  background-image: url("https://sleepercdn.com/images/icons/lol/sup.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol.drafted .pick {
  color: #333 !important;
}
.draft-board .cell .player-avatar-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  right: 0;
}
.draft-board .cell .cell-direction-wrap {
  position: absolute;
  left: 3px;
  bottom: -2px;
}
.draft-board .cell .cell-direction-wrap .direction.down {
  transform: rotate(90deg);
}
.draft-board .cell .cell-direction-wrap .direction.left {
  transform: rotate(180deg);
}
.draft-board .cell .cell-emoji-wrap {
  position: absolute;
  right: 40px;
  bottom: -3px;
}
.full-screen-mode .draft-board {
  flex-grow: 1;
  overflow-y: auto;
}
.full-screen-mode .draft-board .current-roster {
  display: none;
}
.full-screen-mode .column-container {
  min-width: 100% !important;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-screen-mode .team-header-container {
  width: 100% !important;
  max-width: 200px;
}
.full-screen-mode .team-name {
  margin: 0 auto;
  height: 100%;
}
.full-screen-mode .team-column {
  max-width: 200px;
}
.full-screen-mode .cell-container {
  flex-grow: 1;
  margin: 1px 1px 1px 0;
  max-width: 200px;
}
.full-screen-mode .cell-container .cell {
  height: 100%;
  justify-content: flex-start;
}
.full-screen-mode .cell-container .cell.current-pick {
  justify-content: center;
}
.full-screen-mode .cell-container .cell.lol .player-avatar-container .avatar-player {
  width: 50px !important;
  height: 50px !important;
}
.full-screen-mode .cell-container .cell.lol .player-avatar-container .sub-avatar .avatar-player {
  width: 30px !important;
  height: 30px !important;
  left: -10px !important;
}
.autopick-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}
.draft-user-header {
  flex: 1;
  display: flex;
}
.draft-user-header .pass-text {
  font-family: 'Poppins';
  font-size: 6px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  margin-left: 2px;
}
.draft-user-header .badge {
  width: 24px;
  height: 24px;
  position: absolute;
  right: -5px;
  bottom: 0px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.draft-user-header .pass-line {
  border-bottom-width: 1px;
  border-style: solid;
  width: 14px;
  margin-bottom: 2px;
}
.draft-user-header .header-container {
  flex: 1;
  display: flex;
}
.draft-user-header .header-button {
  margin: 3px;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.draft-user-header .claim-text {
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  padding: 5px 8px 5px 8px;
  border-radius: 28px;
}
.draft-user-header .header-text {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}
.draft-user-header .header {
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}
.draft-user-header .header .video-wrap {
  flex: 1;
  align-self: center;
  align-content: center;
  position: relative;
  display: flex;
}
.trade-list-item {
  display: flex;
  flex: 1;
  min-height: 156px;
  max-height: 156px;
  flex-direction: column;
  margin-top: 8px;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgba(58,70,91,0.2);
  position: relative;
}
.trade-list-item.is-chat {
  max-height: 220px;
  height: 220px;
  width: 300px;
  max-width: 300px;
  margin-top: 0px;
}
.trade-list-item.selected {
  background-color: rgba(58,70,91,0.7);
}
.trade-list-item:hover {
  background-color: rgba(58,70,91,0.5);
}
.trade-list-item:hover.selected {
  background-color: rgba(58,70,91,0.9);
}
.trade-list-item .selected-indicator {
  height: 32px;
  background-color: #00ceb8;
  width: 6px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  position: absolute;
  left: -24px;
  top: 40%;
}
.trade-list-item .row {
  display: flex;
  align-items: center;
}
.trade-list-item .spaced {
  justify-content: space-between;
}
.trade-list-item .countdown {
  color: #d8e2ed;
  font-size: 9px;
  font-weight: 600;
  font-family: 'Poppins';
  line-height: 10px;
}
.trade-list-item .header-text {
  font-size: 9px;
  color: #d8e2ed;
  font-size: 600;
  margin-left: 4px;
  font-family: 'Poppins';
  line-height: 10px;
}
.trade-list-item .status-wrapper {
  position: absolute;
  top: 16px;
  right: 0px;
  color: #d8e2ed;
}
.trade-list-item .triangle-bottomright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 17px 10px;
  border-color: transparent transparent rgba(58,70,91,0.5) transparent;
}
.trade-list-item .triangle-bottomright.complete {
  border-color: transparent transparent #00ceb8 transparent;
}
.trade-list-item .triangle-bottomright.small {
  border-width: 0 0 20px 14px;
}
.trade-list-item .status {
  display: flex;
  padding: 4px 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(58,70,91,0.5);
  font-size: 9px;
  font-weight: 600;
  font-family: 'Poppins';
}
.trade-list-item .status.complete {
  background-color: #00ceb8;
  color: #022047;
}
.trade-list-item .timestamp {
  color: #d8e2ed;
  font-size: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding-right: 8px;
  font-family: 'Poppins';
}
.trade-list-item .users-meta {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}
.trade-list-item .users-meta .users-name {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  font-family: 'Inter';
}
.trade-list-item .users-meta .way-trade {
  font-size: 14px;
  margin-top: 2px;
  color: #d8e2ed;
  font-family: 'Inter';
}
.trade-list-item .assets-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}
.trade-list-item .assets-container .left-assets {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.trade-list-item .assets-container .trade-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 24px;
  background-color: #71809c;
}
.trade-list-item .assets-container .right-assets {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.trade-list-item .assets-container .player-asset {
  display: flex;
  flex-direction: column;
  width: 50px;
  justify-content: center;
  align-items: center;
}
.trade-list-item .assets-container .asset-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  flex-direction: column;
  position: relative;
}
.trade-list-item .assets-container .asset-circle .avatar-circle {
  height: 12px;
  width: 12px;
  position: absolute;
  bottom: 0;
  right: -4px;
}
.trade-list-item .assets-container .asset-text {
  font-size: 9px;
  color: #fff;
  font-family: 'Inter';
}
.trade-list-item .assets-container .player-name {
  font-size: 9px;
  color: #fff;
  max-width: 45px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  line-height: 10px;
  font-family: 'Inter';
}
.trade-list-item .view-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
  border-radius: 28px;
  color: #022047;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 600;
  background-color: #00ceb8;
  margin-top: 16px;
}
.avatars-container {
  height: 24px;
  width: 24px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.avatars-container .avatar-1 {
  position: absolute;
  z-index: 10;
  bottom: 0;
  right: 0;
}
.avatars-container .avatar-2 {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
}
.trade-center-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%;
  flex: 1;
}
.trade-center-wrapper .received {
  font-size: 9px;
  line-height: 10px;
  color: #a3bbd3;
  font-family: 'Poppins';
}
.trade-center-wrapper .accepted {
  font-size: 9px;
  color: #00ceb8;
  font-family: 'Poppins';
}
.trade-center-wrapper .rejected {
  font-size: 9px;
  color: #ff2b6d;
  font-family: 'Poppins';
}
.trade-center-wrapper .row {
  display: flex;
  align-items: center;
}
.trade-center-wrapper .spaced {
  justify-content: space-between;
}
.trade-center-wrapper .countdown {
  font-size: 12px;
  color: #d8e2ed;
  font-family: 'Poppins';
}
.trade-center-wrapper .trade-center-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.trade-center-wrapper .trade-center-container.has-footer {
  padding-bottom: 80px;
}
.trade-center-wrapper .trade-center-container .trade-header {
  display: flex;
  flex-direction: column;
}
.trade-center-wrapper .trade-center-container .trade-header .title {
  font-size: 18px;
  color: #fff;
  font-family: 'Poppins';
  line-height: 24px;
}
.trade-center-wrapper .trade-center-container .trade-header .pending-message {
  font-size: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
  line-height: 16px;
}
.trade-center-wrapper .trade-center-container .summary-wrapper {
  display: flex;
  margin-top: 16px;
  flex-direction: column;
}
.trade-center-wrapper .trade-action-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  padding: 24px;
  box-sizing: border-box;
  background-color: #2d3649;
  display: flex;
  flex: 1;
  border-top: 1px solid #3a465b;
}
.trade-center-wrapper .trade-action-footer .trade-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 600;
  box-sizing: border-box;
  font-family: 'Poppins';
  max-width: 200px;
}
.trade-center-wrapper .trade-action-footer .gray {
  background-color: rgba(58,70,91,0.5);
  color: #fff;
}
.trade-center-wrapper .trade-action-footer .green {
  background-color: #00ceb8;
  color: #022047;
}
.trade-center-wrapper .trade-action-footer .rounded {
  border-radius: 24px;
}
.trade-center-wrapper .trade-action-footer .left {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.trade-center-wrapper .trade-action-footer .right {
  margin-left: 2px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.lol-weekly-report-message {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  max-width: 300px;
}
.lol-weekly-report-message .row {
  display: flex;
  align-items: center;
}
.lol-weekly-report-message .title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  height: 24px;
  width: 200px;
  border-radius: 24px;
  background-color: #2e3748;
  color: #fff;
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: medium;
  box-shadow: 0 1px 2px 0 #000;
}
.lol-weekly-report-message .container-gradient {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #00baff, #ff6086);
  border-radius: 8px;
  box-sizing: border-box;
  height: 133px;
  padding: 1px;
  width: 100%;
}
.lol-weekly-report-message .container-gradient .container {
  display: flex;
  flex: 1;
  background-color: #2e3748;
  height: 100%;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.lol-weekly-report-message .container-gradient .container .top-players {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player .number {
  font-size: 16px;
  color: #fff;
  font-family: 'Poppins';
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player .lol-name {
  font-size: 12px;
  color: #fff;
  font-family: 'Poppins';
  font-weight: medium;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player .points {
  font-size: 10px;
  color: #fff;
  font-family: 'Inter';
  font-weight: lighter;
}
.lol-weekly-report-modal {
  height: 600px;
  width: 800px;
}
.lol-weekly-report-modal .lol-weekly-report-scroll {
  padding: 32px;
}
.lol-weekly-report-modal .row {
  display: flex;
  align-items: center;
}
.lol-weekly-report-modal .circle {
  height: 4px;
  width: 4px;
  border-radius: 4px;
  margin-left: 4px;
  margin-right: 4px;
  background-color: #fff;
}
.lol-weekly-report-modal .section-title {
  font-size: 18px;
  color: #b9c4d4;
  font-family: 'Poppins';
  line-height: 24px;
}
.lol-weekly-report-modal .other-awards {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lol-weekly-report-modal .other-awards .award-card {
  display: flex;
  flex-direction: column;
  width: 172px;
  border-radius: 16px;
  background-color: #2d3649;
  box-shadow: 0 1px 2px 0 #000;
  margin-top: 14px;
  overflow: hidden;
}
.lol-weekly-report-modal .other-awards .award-card .top-section {
  height: 52px;
  padding-top: 10px;
  padding-left: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.lol-weekly-report-modal .other-awards .award-card .top-section.blue {
  background: linear-gradient(rgba(0,174,238,0.9), rgba(0,186,255,0.1));
}
.lol-weekly-report-modal .other-awards .award-card .top-section.red {
  background: linear-gradient(rgba(255,43,109,0.5), rgba(255,43,109,0.1));
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section {
  display: flex;
  flex-direction: column;
  padding: 8px;
  box-sizing: border-box;
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .tag {
  font-size: 9px;
  color: #eef2f7;
  line-height: 12px;
  font-family: "Inter";
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .username {
  font-size: 16px;
  line-height: 18px;
  font-family: 'Inter';
  color: #fff;
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .points {
  font-size: 14px;
  color: #a3bbd3;
  line-height: 18px;
  font-family: 'Inter';
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .vs {
  font-size: 10px;
  line-height: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
  text-align: right;
}
.lol-weekly-report-modal .league-awards-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: 84px;
  border-radius: 16px;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 14px;
  justify-content: space-between;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card.best {
  background: linear-gradient(rgba(0,174,238,0.9), rgba(0,186,255,0.1));
  margin-right: 8px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card.worst {
  background: linear-gradient(rgba(255,43,109,0.5), rgba(255,43,109,0.1));
  margin-left: 8px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .title {
  color: #eef2f7;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 16px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .username {
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  font-family: 'Poppins';
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .high-points {
  font-size: 14px;
  font-family: 'Inter';
  color: #fff;
  line-height: 18px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .low-points {
  font-size: 12px;
  font-family: 'Inter';
  color: #b9c4d4;
  line-height: 16px;
}
.lol-weekly-report-modal .divider {
  height: 244px;
  width: 1px;
  background-color: rgba(106,119,144,0.7);
  margin: 0 24px;
}
.lol-weekly-report-modal .col {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.lol-weekly-report-modal .best-worst-picks {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.lol-weekly-report-modal .best-worst-picks .champion-name {
  font-size: 14px;
  font-family: 'Inter';
  font-weight: 500;
  line-height: 18px;
  color: #b9c4d4;
}
.lol-weekly-report-modal .best-worst-picks .champion-owner {
  font-family: 'Inter';
  font-size: 10px;
  line-height: 12px;
  color: #eef2f7;
}
.lol-weekly-report-modal .best-worst-picks .pick-card {
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: #3a465b;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 64px;
  margin-top: 10px;
  align-items: center;
  justify-content: space-between;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .player-username {
  font-size: 16px;
  color: #d8e2ed;
  line-height: 18px;
  font-family: 'Inter';
}
.lol-weekly-report-modal .best-worst-picks .pick-card .player-desc {
  font-size: 10px;
  line-height: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
}
.lol-weekly-report-modal .best-worst-picks .pick-card .player-desc.small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .points {
  font-size: 16px;
  font-family: 'Inter';
  line-height: 18px;
  font-weight: 600;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .points.blue {
  color: #00baff;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .points.red {
  color: #ff6086;
}
.lol-weekly-report-modal .champion-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  border-radius: 8px;
  margin-left: 8px;
  position: relative;
  overflow: hidden;
}
.lol-weekly-report-modal .champion-container.blue {
  background-color: #00baff;
}
.lol-weekly-report-modal .champion-container.red {
  background-color: #ff6086;
}
.lol-weekly-report-modal .champion-container .ban-line {
  position: absolute;
  height: 100px;
  width: 2px;
  background-color: #ff6086;
  transform: rotate(135deg);
}
.lol-weekly-report-modal .position-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #18202f;
  border-radius: 6px;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 24px;
  width: 24px;
}
.lol-weekly-report-modal .champion-name {
  text-align: center;
  font-size: 10px;
  color: #a3bbd3;
  line-height: 12px;
}
.lol-weekly-report-modal .top-player-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  width: 143px;
  margin-right: 16px;
  box-sizing: border-box;
  background-color: #3a465b;
  font-family: 'Inter';
  min-height: 185px;
  overflow: hidden;
}
.lol-weekly-report-modal .top-player-card .top-section {
  display: flex;
  max-height: 68px;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.lol-weekly-report-modal .top-player-card .mid-section {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lol-weekly-report-modal .top-player-card .mid-section .player-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.lol-weekly-report-modal .top-player-card .mid-section .owner {
  font-size: 10px;
  color: #a3bbd3;
}
.lol-weekly-report-modal .top-player-card .mid-section .points {
  color: #fff;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
}
.lol-league-matchup-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.lol-matchup-report-row-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-bottom: 16px;
  position: relative;
}
.lol-matchup-report-row-container .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  background-color: #2d3649;
  color: #a3bbd3;
  font-size: 11px;
  position: absolute;
  top: 32px;
  border-radius: 24px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}
.lol-matchup-card-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-name {
  color: #d8e2ed;
  font-size: 16px;
  line-height: 18px;
  font-family: 'Inter';
  font-weight: 500;
  margin-bottom: 8px;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.row.reverse {
  flex-direction: row-reverse;
}
.row.space-between {
  justify-content: space-between;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lol-matchup-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #3a465b;
  border-radius: 8px;
  font-family: 'Inter';
  padding-bottom: 8px;
}
.lol-matchup-card.left {
  border-top-left-radius: 32px;
  margin-right: 4px;
  padding-right: 12px;
}
.lol-matchup-card.right {
  border-top-right-radius: 32px;
  margin-left: 4px;
  padding-left: 12px;
}
.lol-matchup-card.winner {
  background: linear-gradient(rgba(0,186,255,0.5), rgba(0,186,255,0.1));
}
.lol-matchup-card .adjusted-points {
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
}
.lol-matchup-card .base-points {
  color: #d8e2ed;
  margin-top: 4px;
  font-size: 10px;
  line-height: 12px;
}
.lol-matchup-card .champion-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 32px;
  max-width: 32px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-left: 0px;
}
.lol-matchup-card .champion-container.blue {
  background-color: #00baff;
}
.lol-matchup-card .champion-container.red {
  background-color: #ff6086;
}
.lol-league-standings-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(28,33,45,0.3);
  padding: 26px 16px;
  flex: 1;
  border-radius: 24px;
  box-sizing: border-box;
}
.lol-league-standings-container .row {
  display: flex;
  flex-direction: row;
}
.lol-league-standings-container .row.space-between {
  justify-content: space-between;
}
.lol-league-standings-container .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lol-league-standings-container .title {
  font-size: 18px;
  line-height: 24px;
  color: #b9c4d4;
  font-family: 'Poppins';
}
.lol-league-standings-container .table-title {
  color: rgba(124,139,164,0.7);
  font-family: 'Poppins';
  letter-spacing: 0.25px;
  font-size: 9px;
  line-height: 10px;
}
.lol-league-standings-container .standing-card {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  align-items: center;
  min-height: 72px;
}
.lol-league-standings-container .standing-card .rank {
  font-size: 18px;
  color: #a3bbd3;
  font-family: 'Poppins';
}
.lol-league-standings-container .standing-card .username {
  font-size: 12px;
  color: #fff;
  line-height: 18px;
  font-family: 'Poppins';
  width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lol-league-standings-container .standing-card .record {
  color: #d8e2ed;
  font-size: 10px;
  line-height: 12px;
  font-family: 'Inter';
}
.lol-league-standings-container .standing-card .regular-text {
  font-size: 12px;
  font-family: 'Inter';
  line-height: 16px;
  color: #a3bbd3;
}
.embed-process-upload {
  border-left: 5px solid #eee;
  padding-left: 10px;
}
.embed-process-upload .meta-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-process-upload .meta-container .render-preview-wrapper {
  margin-right: 10px;
}
.embed-process-upload .meta-container .render-preview-wrapper .upload-preview-generic-file .file-icon {
  width: 30px;
}
.embed-process-upload .meta-container .render-preview-wrapper .upload-preview-image img {
  width: 100px;
}
.embed-process-upload .meta-container .render-preview-wrapper .upload-preview-video video {
  width: 100px;
}
.embed-process-upload .meta-container .name {
  font-size: 12px;
}
.embed-process-upload .meta-container .file-size {
  font-size: 10px;
  font-weight: normal;
}
.embed-process-upload .upload-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #f6f6f6;
  margin-top: 5px;
}
.embed-process-upload .upload-progress-bar .upload-progress-bar-fill {
  height: 6px;
  border-radius: 3px;
  transition: all 0.1s linear;
  background: #85c43b;
}
.embed-process-upload .error-message {
  font-size: 10px;
  margin-top: 5px;
  font-weight: bold;
  color: #f00;
}
.embed-video-raw {
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-video-raw video {
  height: 300px;
}
.embed-upload {
  border-left: 5px solid #eee;
  padding-left: 10px;
  margin-top: 10px;
}
.embed-upload .file-link {
  text-decoration: none;
  font-weight: bold;
  margin-top: 5px;
  display: block;
}
.embed-upload.file-generic .file-link {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-upload.file-generic .file-link .upload-preview-generic-file {
  margin-right: 10px;
}
.embed-upload.file-generic .file-link .upload-preview-generic-file .file-icon {
  width: 30px;
}
.embed-upload.file-generic .file-link .name {
  font-size: 12px;
}
.embed-upload.file-generic .file-link .file-size {
  font-size: 10px;
  font-weight: normal;
}
.embed-upload .icon-download {
  height: 16px;
  position: relative;
  top: 2px;
  margin-left: 5px;
}
.embed-trade-container {
  padding: 16px;
  margin: 10px 0;
  border-radius: 16px;
  max-width: 256px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  background-color: #344054;
}
.embed-trade-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-trade-container >.player-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-trade-container >.player-info-container .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 40px;
}
.embed-trade-container >.player-info-container >.player-meta {
  margin-left: 8px;
}
.embed-trade-container >.player-info-container >.player-meta .trade-label {
  text-transform: uppercase;
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  font-family: "Poppins";
}
.embed-trade-container >.player-info-container >.player-meta .player-name {
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  margin-top: 6px;
  font-family: "Inter";
}
.embed-trade-container >.player-info-container >.player-meta .player-team {
  font-size: 10px;
  line-height: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
  letter-spacing: -0.25px;
  font-weight: normal;
}
.embed-trade-container .trade-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  color: #022047;
  width: 109px;
  height: 40px;
  border-radius: 28px;
  margin-left: 40px;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 600;
}
.embed-trade-container .like-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00ceb8;
  color: #022047;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  margin-left: 16px;
}
.embed-trade-container.embed-trade-player:hover {
  cursor: pointer;
}
.embed-trade-container.embed-trade-pick >.player-info-container {
  align-items: center;
}
.embed-trade-container.embed-trade-pick >.player-info-container >.draft-pick-avatar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #999;
  border-radius: 50%;
  height: 48px;
  width: 48px;
}
.embed-trade-container.embed-trade-pick >.player-info-container >.draft-pick-avatar .draft-round {
  font-size: 14px;
  font-weight: 900;
}
.embed-trade-container.embed-trade-pick >.player-info-container >.draft-pick-avatar .draft-round-suffix {
  font-size: 10px;
  font-weight: bold;
}
.embed-trade-container.embed-trade-pick >.player-info-container .player-meta .draft-pick-detail-container .draft-pick-text {
  font-size: 10px;
  text-transform: uppercase;
  display: inline;
}
.embed-trade-container.embed-trade-pick >.player-info-container .player-meta .draft-pick-detail-container .draft-pick-owner {
  display: inline;
  font-size: 10px;
}
.trade-list-item-dm {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 8px;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgba(58,70,91,0.2);
  position: relative;
  max-width: 350px;
  margin-top: 0px;
}
.trade-list-item-dm:hover {
  background-color: rgba(58,70,91,0.5);
}
.trade-list-item-dm .row {
  display: flex;
  align-items: center;
}
.trade-list-item-dm .assets-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
}
.trade-list-item-dm .username {
  font-size: 14px;
  line-height: 16px;
  font-family: 'Poppins';
  color: #fff;
  font-weight: 600;
}
.trade-list-item-dm .asset-item {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin: 8px 0;
}
.trade-list-item-dm .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  position: relative;
}
.trade-list-item-dm .pick {
  color: #fff;
  font-weight: 600;
  font-family: 'Poppins';
  font-size: 10px;
}
.trade-list-item-dm .meta {
  margin-left: 8px;
  margin-bottom: 8px;
}
.trade-list-item-dm .meta .meta-1 {
  font-size: 12px;
  line-height: 14px;
  font-family: 'Inter';
  color: #fff;
  font-weight: 500;
}
.trade-list-item-dm .meta .meta-2 {
  font-size: 10px;
  line-height: 12px;
  font-family: 'Inter';
  color: #d8e2ed;
  font-weight: 500;
}
.trade-list-item-dm .empty {
  color: #fff;
  font-family: 'Inter';
  font-size: 12px;
  margin: 8px 0;
}
.embed-reply {
  display: flex;
  flex-direction: column;
  background-color: rgba(58,70,91,0.2);
  border-left: 4px solid #a3bbd3;
  padding: 8px;
  height: 48px;
  max-height: 48px;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  flex: 1;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.embed-reply .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-reply .reply-text {
  color: #fff;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 14px;
  margin-top: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.embed-reply .username {
  font-size: 9px;
  font-family: 'Poppins';
  line-height: 10px;
  color: #a3bbd3;
  font-weight: 600;
}
.drag-drop-placeholder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.drag-drop-placeholder .icon-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f6f6f6;
  position: relative;
}
.drag-drop-placeholder .icon-wrapper img {
  transition: all 0.2s ease;
  position: absolute;
}
.drag-drop-placeholder .icon-wrapper .file-icon {
  top: 42px;
  transform: rotate(0);
  left: 50px;
  width: 100px;
  z-index: 1;
  top: 42px;
}
.drag-drop-placeholder .icon-wrapper .image-icon {
  top: 105px;
  left: 55px;
  z-index: 2;
  width: 90px;
  transform: rotate(0);
}
.drag-drop-placeholder .icon-wrapper .video-icon {
  top: 35px;
  width: 70px;
  left: 65px;
  transform: rotate(0);
}
.drag-drop-placeholder .header-copy {
  font-size: 22px;
  font-weight: bold;
  margin-top: 45px;
  letter-spacing: 0.5px;
  color: #f6f6f6;
}
.dragging .icon-wrapper .file-icon {
  transform: rotate(20deg);
  left: 80px;
}
.dragging .icon-wrapper .image-icon {
  transform: rotate(-10deg);
  left: 22px;
}
.dragging .icon-wrapper .video-icon {
  transform: rotate(-5deg);
  left: 20px;
}
.league-pinned-header {
  display: flex;
  height: 48px;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #18202f;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
}
.league-pinned-header .pinned-title {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.3px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  margin-left: 8px;
}
.league-pinned-header .back-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2d3649;
  height: 32px;
  width: 32px;
  border-radius: 40px;
  cursor: pointer;
}
.auction-timer {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.auction-timer .auction-timer-text {
  font-family: 'Poppins';
  font-size: 32px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.5px;
  text-align: left;
  color: #3a465b;
}
.auction-timer .auction-timer-paused-text {
  font-family: 'Poppins';
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.5px;
  text-align: left;
  color: #3a465b;
}
.auction-timer .auction-timer-icon {
  width: 40px;
  height: 40px;
}
.auction-timer.theme_dark .auction-timer-text {
  color: #d8e2ed;
}
.auction-timer.theme_dark .auction-timer-paused-text {
  color: #d8e2ed;
}
.draft-afk-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(216,226,237,0.302);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.draft-afk-overlay .dialog-container {
  width: 360px;
  height: 460px;
  padding: 20px;
  background-color: #2d3649;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.draft-afk-overlay .dialog-container .header-text {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}
.draft-afk-overlay .dialog-container .afk-image {
  width: 240px;
  height: 240px;
}
.draft-afk-overlay .dialog-container .reminder-text {
  width: 260px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #a3bbd3;
}
.draft-afk-overlay .dialog-container .autopick-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-family: 'Inter';
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: right;
  color: #eef2f7;
}
.draft-afk-overlay .dialog-container .autopick-container .auction-timer .auction-timer-text {
  font-size: 18px;
}
.draft-emoji-selector {
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
  height: 34px;
  border-radius: 24px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: all 0.1s linear;
  position: relative;
}
.draft-emoji-selector .draft-emoji {
  position: relative;
}
.draft-emoji-selector .draft-emoji:hover img {
  transform: scale(1.3);
}
.draft-emoji-selector .draft-emoji .highlight {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  background: rgba(103,120,151,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  display: none;
}
.draft-emoji-selector .draft-emoji.selected .highlight {
  display: block;
}
.draft-emoji-selector .draft-emoji img {
  width: 30px;
  height: 30px;
  margin-left: 2px;
  margin-right: 2px;
  pointer-events: none;
  user-select: none;
  transition: transform 0.1s linear;
}
.draft-emoji-selector .animate {
  animation: draftEmojiFloatUp 0.8s ease-out forwards;
  transform-origin: center center;
}
@-moz-keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
@-webkit-keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
@-o-keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
@keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
.theme-dark .draft-emoji-selector {
  background: #677897;
}
.theme-dark .draft-emoji .highlight {
  background: rgba(184,191,255,0.3);
}
.socket-connection-status-banner {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1000;
  background-color: #ff6482;
  cursor: pointer;
}
.socket-connection-status-banner .text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  text-align: left;
  color: #fff;
}
.empty-panel-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.empty-panel-container p {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #eef2f7;
}
.empty-panel-container .footer {
  position: absolute;
  bottom: 0;
  height: 93px;
  width: 100%;
  background: #2c3749;
  opacity: 0.5;
  border: 1px solid rgba(58,70,91,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-panel-container .footer .download-row {
  display: flex;
  flex-direction: row;
  margin-top: 16px;
}
.empty-panel-container .footer .download-row a {
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
}
.empty-panel-container .footer .direct-download {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
  justify-content: center;
}
.empty-panel-container .footer .direct-download p {
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #eef2f7;
}
.empty-panel-container .footer .direct-download a {
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #00ceb8;
  text-decoration: none;
  margin-left: 4px;
}
.empty-panel-container .footer .responsible-gaming {
  display: flex;
  flex-direction: row;
  margin-top: 4px;
  justify-content: center;
}
.empty-panel-container .footer .responsible-gaming a {
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #00ceb8;
  text-decoration: none;
  margin-left: 4px;
}
.players-panel-lol {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.league-division-standings2 {
  display: flex;
  flex-direction: column;
}
.player-injury-container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  height: 16px;
}
.player-injury-container .status-img {
  height: 12px;
  width: 12px;
}
.player-injury-container .text {
  font-size: 10px;
  margin-left: 4px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem;
}

.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
}

.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
}

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 80px;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year-container {
  margin: 0.4rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.react-datepicker__year-container-text {
  display: inline-block;
  cursor: pointer;
  flex: 1 0 30%;
  width: 12px;
  padding: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}

.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: 85px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  -moz-appearance: textfield;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}

.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}

.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
  box-sizing: content-box;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}

.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text {
  cursor: pointer;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range ,
.react-datepicker__month-text--in-selecting-range ,
.react-datepicker__quarter-text--in-selecting-range {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
.react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
.react-datepicker__quarter-text--in-range {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover {
  background-color: transparent;
}

.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}

.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0px 6px 0px 0px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "\D7";
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}
.app-round-input {
  border-radius: 28px;
  height: 48px;
  padding: 12px 14px;
  background: #2d3649;
  box-sizing: border-box;
  cursor: text;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.app-round-input.focus {
  border: 1px solid #00ceb8;
}
.app-round-input ::placeholder {
  color: rgba(124,139,164,0.7);
}
.app-round-input input {
  outline: none;
  background: none;
  border: none;
  color: #fff;
  font-family: Poppins;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
}
.app-round-input .app-round-input-prefix-text {
  font-family: Poppins;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 16px;
  margin-right: 4px;
}
.item {
  padding: 20px;
  width: 200px;
  border-radius: 4px;
  cursor: pointer;
  color: #a3bbd3;
}
.item:hover {
  background-color: #00d8a7;
  color: #fff;
}
.lol-matchup-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 32px;
}
.lol-matchup-row .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #a3bbd3;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #181c28;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
.lol_matchup_card_container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
}
.lol_matchup_card_container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol_matchup_card_container .avatar-container {
  position: absolute;
  top: -20px;
  z-index: 10;
}
.lol_matchup_card_container .avatar-container.flip {
  right: 0px;
}
.lol_matchup_card_container .card {
  display: flex;
  flex: 1 1 0px;
  position: relative;
  flex-direction: column;
  background-color: rgba(58,70,91,0.25);
  min-height: 70px;
  border-radius: 16px;
  margin-right: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.lol_matchup_card_container .card.flip {
  margin-left: 4px;
}
.lol_matchup_card_container .card-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  padding: 8px;
  padding-right: 12px;
  box-sizing: border-box;
}
.lol_matchup_card_container .card-container.flip {
  padding-right: 8px;
  padding-left: 12px;
  margin-left: 4px;
}
.lol_matchup_card_container .bar-percentage {
  display: flex;
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  flex-grow: 1;
  max-height: 4px;
  min-height: 4px;
  background-color: #a3bbd3;
  margin-left: 35px;
}
.lol_matchup_card_container .bar-percentage.flip {
  margin-left: 0;
  margin-right: 35px;
  flex-direction: row-reverse;
}
.lol_matchup_card_container .content-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
  box-sizing: border-box;
}
.lol_matchup_card_container .content-row.flip {
  flex-direction: row-reverse;
}
.lol_matchup_card_container .record {
  font-size: 10px;
  color: #7988a1;
  margin-left: 30px;
}
.lol_matchup_card_container .record.flip {
  margin-left: 0;
  margin-right: 30px;
}
.lol_matchup_card_container .username {
  font-size: 10px;
  color: #7988a1;
  max-width: 56px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lol_matchup_card_container .adjusted {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.lol_matchup_card_container .base-text {
  color: #7988a1;
  font-size: 10px;
}
.lol_matchup_card_container .base {
  color: #7988a1;
  font-size: 10px;
  font-weight: 400;
}
.lol_matchup_card_container .teamname {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  margin-top: 8px;
}
.lol_matchup_card_container .teamname.flip {
  text-align: right;
}
.roster-matchup-tab-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-family: 'Inter', sans-serif;
}
.roster-matchup-tab-wrapper .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.roster-matchup-tab-wrapper .playoff-week-selector-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}
.roster-matchup-tab-wrapper .player-section {
  display: flex;
  flex-direction: column;
}
.roster-matchup-tab-wrapper .player-section .title {
  font-size: 18px;
  font-weight: 600px;
  color: #b9c4d4;
}
.matchup-player-row-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  flex: 1;
  cursor: pointer;
}
.matchup-player-row-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.matchup-player-row-container .row.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .spaced-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.matchup-player-row-container .player-image-row {
  display: flex;
  flex: 1;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  min-height: 32px;
}
.matchup-player-row-container .player-image-row .player-image-item {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.matchup-player-row-container .player-image-row .player-image-item.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .player-image-row .player-image-item .player-image {
  height: 32px;
  width: 44px;
  object-fit: cover;
}
.matchup-player-row-container .player-image-row .player-image-item .player-name {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 8px;
}
.matchup-player-row-container .player-image-row .player-image-item .player-name.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .player-image-row .player-image-item .player-pos {
  display: flex;
  flex-direction: row;
  font-size: 10px;
  line-height: 12px;
  color: #7988a1;
  margin: 0 4px;
}
.matchup-player-row-container .player-image-row .player-image-item .player-pos.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .player-matchup-body-row {
  position: relative;
  display: flex;
  flex: 1;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
}
.matchup-player-row-container .player-matchup-body-row .position {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  background-color: #262e3e;
  position: absolute;
  font-size: 10px;
  z-index: 10;
  top: 12px;
  border: 1px solid rgba(58,70,91,0.5);
}
.matchup-player-row-container .player-matchup-body-row .position .flex {
  justify-content: spacew;
}
.matchup-player-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
}
.matchup-player-item.empty-player.flip {
  text-align: right;
}
.matchup-player-item.empty-player .matchup-player-body-item {
  display: flex;
  justify-content: center;
}
.matchup-player-item .header-row {
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: flex-end;
  flex: 1;
  justify-content: space-between;
  margin-right: 20px;
}
.matchup-player-item .header-row .player-pos {
  color: #a3bbd3;
  font-size: 10px;
  font-family: 'Inter';
  padding-left: 5px;
  padding-right: 5px;
}
.matchup-player-item .header-row.flip {
  flex-direction: row-reverse;
  margin-left: 16px;
  margin-right: 0px;
}
.matchup-player-item .header-row.flip .player-name {
  flex-direction: row-reverse;
}
.matchup-player-item .header-row.flip .nickname-container {
  flex-direction: row-reverse;
}
.matchup-player-item .player-image {
  height: 32px;
  width: 44px;
  object-fit: cover;
}
.matchup-player-item .player-name {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 8px;
}
.matchup-player-item .nickname-container {
  display: flex;
  align-items: center;
}
.matchup-player-item .nickname-container .roster-nickname {
  color: #00baff;
  font-size: 10px;
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 6px;
}
.matchup-player-item .nickname-container.flip .roster-nickname {
  color: #fff;
}
.matchup-player-item .injury-container {
  margin-left: 4px;
  padding-bottom: 2px;
}
.matchup-player-body-item {
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-direction: column;
  background-color: rgba(163,187,211,0.05);
  border-radius: 16px;
  padding: 12px;
  box-sizing: border-box;
  min-height: 60px;
  cursor: pointer;
  border: 1px solid rgba(58,70,91,0.5);
  position: relative;
}
.matchup-player-body-item.in-game {
  background-color: rgba(0,206,184,0.15);
}
.matchup-player-body-item.in-game-flip {
  background-color: rgba(255,43,109,0.15);
}
.matchup-player-body-item .possession-indicator-wrapper {
  position: absolute;
  top: 0px;
  flex: 1;
  left: 40px;
  right: 10px;
}
.matchup-player-body-item .possession-indicator-wrapper.flip {
  left: 10px;
  right: 40px;
}
.matchup-player-body-item .container-row {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
}
.matchup-player-body-item .container-row.flip {
  flex-direction: row-reverse;
}
.matchup-player-body-item .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.matchup-player-body-item .row.flip {
  flex-direction: row-reverse;
}
.matchup-player-body-item .column {
  display: flex;
  flex-direction: column;
  margin-right: 8px;
}
.matchup-player-body-item .column.flip {
  align-items: flex-end;
}
.possession-indicator-rate {
  display: flex;
  flex: 1;
  align-items: center;
}
.possession-indicator-rate .divider {
  position: relative;
  justify-content: flex-start;
  display: flex;
  height: 4px;
  flex: 1;
  background-color: #3a465b;
}
.possession-indicator-rate .divider.flip {
  justify-content: flex-end;
}
.league-tab-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
  font-family: 'Inter', sans-serif;
  padding: 0 24px;
}
.league-tab-container .postdraft-scroll-right-panel {
  display: flex;
  flex-direction: column;
  padding: 24px;
  padding-top: 0px;
  flex-grow: 1;
}
.league-tab-container .title {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: medium;
  color: #fff;
  margin-top: 4px;
}
.league-tab-container .subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #7988a1;
}
.league-tab-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
}
.league-tab-container .row.standings .team-wrap {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.league-tab-container .item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  flex: 1;
}
.league-tab-container .standings-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  margin-left: 16px;
}
.league-tab-container .panel-row {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 64px;
}
.league-tab-container .league-activity-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  color: #fff;
  margin-top: 16px;
  padding: 16px;
  min-height: 300px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.league-tab-container .league-activity-card .view {
  color: #00ceb8;
  font-size: 10px;
  cursor: pointer;
}
.league-tab-container .league-matchups {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: #fff;
}
.league-tab-container .league-tab-standings {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-top: 0px;
}
.league-tab-container .league-tab-standings .league-standings-container {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background-color: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
  box-sizing: border-box;
  padding: 16px 8px;
}
.league-tab-container .league-tab-standings .league-standing-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 16px;
}
.league-tab-container .league-tab-standings .league-standing-list .league-standing-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 60px;
  cursor: pointer;
}
.league-tab-container .league-tab-standings .league-standing-list .rank {
  font-size: 16px;
  color: #d8e2ed;
  font-weight: 700;
  width: 26px;
  line-height: 17px;
}
.league-tab-container .league-tab-standings .league-standing-list .value {
  font-size: 10px;
  color: #a3bbd3;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .avatar-container {
  margin-right: 4px;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .team-name {
  margin-left: 4px;
  max-width: 40 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .name {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .name .commish-badge {
  margin: 0;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .description {
  position: absolute;
  color: #fff;
  font-size: 16px;
  right: 0px;
}
.league-tab-container .league-settings-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  box-sizing: border-box;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.league-tab-container .league-settings-container .league-settings {
  display: flex;
  flex-direction: column;
}
.league-tab-container .league-settings-container .league-settings .settings-row {
  display: flex;
  flex: 1;
  min-height: 40px;
  padding: 16px 0px;
  flex-direction: row;
  justify-content: space-between;
}
.league-tab-container .league-settings-container .league-settings .settings-row .name {
  color: #7988a1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600px;
}
.league-tab-container .league-settings-container .league-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.league-tab-container .league-settings-container .league-settings .settings-row .bold {
  font-weight: 700;
}
.scoring-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  margin-top: 16px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.scoring-container .scoring-settings {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.scoring-container .scoring-settings .grouping-header {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  margin-top: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.scoring-container .scoring-settings .settings-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 40px;
  max-height: 60px;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius: 5px;
}
.scoring-container .scoring-settings .settings-row.highlight {
  background-color: #ffffc7;
  padding: 8px !important;
}
.scoring-container .scoring-settings .settings-row .name {
  font-size: 12px;
  color: #7988a1;
  font-weight: 600px;
}
.scoring-container .scoring-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.scoring-container .scoring-settings .settings-row .value .plus {
  color: #00ceb8;
}
.scoring-container .scoring-settings .settings-row .value .minus {
  color: #ff2b6d;
}
.setting-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  cursor: pointer;
}
.setting-circle:hover {
  background-color: #1c212d;
}
.no-roster-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  background-color: rgba(58,70,91,0.25);
  border-radius: 16px;
  margin-top: 16px;
}
.no-roster-container .user-name {
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  font-weight: 400;
  margin-left: 8px;
}
.league-tab-roster-modal {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 32px;
  background: #102131;
  max-height: 600px;
  width: 800px;
}
.playoff-modal {
  height: 500px;
  width: 800px;
  background-color: #1c212d;
  border-radius: 24px;
  overflow: auto;
  padding: 32px;
  color: #fff;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.playoff-modal .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.playoff-modal .close-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  background-color: rgba(58,70,91,0.5);
  border-radius: 40px;
  cursor: pointer;
}
.playoff-modal .bracket-round {
  font-family: 'Inter', sans-serif;
}
.playoff-modal .title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 28px;
  font-weight: medium;
}
.league-members-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-members-container .team-placeholder {
  color: #fff;
  font-size: 14px;
}
.league-members-container .teams-container {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 8px;
  flex: 1;
  width: 100%;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
  margin-bottom: 16px;
}
.league-members-container .teams-container .meta {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
}
.league-members-container .teams-container .meta .team-name {
  margin-left: 4px;
  max-width: 40 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.league-members-container .teams-container .meta .name {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.league-members-container .teams-container .meta .name .commish-badge {
  margin: 0;
}
.league-members-container .teams-container .meta .description {
  position: absolute;
  top: 20px;
  width: 130px;
  height: 12px;
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.league-members-container .teams-container .users-without-roster-container {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
.league-members-container .teams-container .users-without-roster-container .subtitle {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 8px;
}
.league-members-container .teams-container .users-without-roster-container .member-settings {
  padding: 8px 16px;
  background-color: #00ceb8;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #022047;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.league-members-container .teams-container .users-without-roster-container .index {
  color: #7988a1;
  font-size: 12px;
  margin-right: 8px;
}
.league-members-container .teams-container .users-without-roster-container .member {
  font-size: 12px;
  color: #fff;
}
.league-members-container .teams-container .teams-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
}
.league-members-container .teams-container .team-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: 8px;
  padding: 16px;
  height: 60px;
  justify-content: center;
  cursor: pointer;
}
.league-members-container .teams-container .team-item.selected {
  background-color: rgba(0,206,184,0.2);
}
.league-members-container .teams-container .team-item .rank {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  color: #7988a1;
}
.league-members-container .teams-container .team-item .button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  background-color: #00ceb8;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 6px 8px;
  font-weight: 600;
}
.league-members-container .title {
  font-size: 18px;
  color: #fff;
  line-height: 24px;
}
.league-members-container .invite {
  font-size: 12px;
  font-weight: bold;
  color: #00ceb8;
  cursor: pointer;
}
.league-members-container .text {
  font-size: 12px;
  color: #b9c4d4;
  line-height: 16px;
}
.league-members-container .header {
  padding: 8px;
}
.league-members-container .setting-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  cursor: pointer;
}
.league-members-container .setting-circle:hover {
  background-color: #1c212d;
}
.roster-popup {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 32px;
  background: #102131;
  max-height: 600px;
  width: 500px;
}
.trade-list-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  position: relative;
}
.trade-list-container .empty-trades {
  display: flex;
  align-items: center;
  flex: 1;
  flex-direction: column;
  padding-top: 48px;
}
.trade-list-container .empty-text {
  color: #a3bbd3;
  font-size: 12px;
  margin-top: 16px;
  font-weight: 'Inter';
}
.trade-list-container .propose-text {
  color: #00ceb8;
  font-size: 12px;
  margin-top: 16px;
  font-weight: 'Poppins';
  font-weight: 600;
  cursor: pointer;
}
.trade-list-container .more-container {
  display: flex;
  flex: 1;
  height: 20px;
  align-items: center;
  width: 100%;
  opacity: 0.8;
  margin: 24px 0;
}
.trade-list-container .more-container .line {
  display: flex;
  flex-grow: 1;
  height: 1px;
  background-color: rgba(96,111,140,0.7);
}
.trade-list-container .more-container .show-more {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
  cursor: pointer;
  font-family: 'Poppins';
}
.trade-panel-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.trade-panel-container .trade-panel-content-row {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: stretch;
  flex-direction: row;
  box-sizing: border-box;
  padding-top: 8px;
}
.trade-panel-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-panel-container .row.spaced {
  justify-content: space-between;
}
.trade-panel-container .trade-title {
  font-size: 18px;
  color: #fff;
  user-select: none;
  font-family: 'Poppins', sans-serif;
  line-height: 24px;
  font-weight: 500;
}
.trade-panel-container .trades-count-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  height: 16px;
  width: 16px;
  border-radius: 24px;
  font-size: 10px;
  color: #022047;
  margin-left: 8px;
}
.trade-panel-container .button {
  display: flex;
  align-items: center;
  padding: 12px 32px;
  font-size: 14px;
  border-radius: 24px;
  font-weight: 600;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  height: 40px;
  font-family: 'Poppins';
  position: relative;
}
.trade-panel-container .button.review {
  background-color: rgba(58,70,91,0.5);
  color: #fff;
  margin-right: 8px;
}
.trade-panel-container .button.trade {
  background-color: #a3acff;
  color: #022047;
}
.trade-panel-container .button .pending-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff2b6d;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  color: #fff;
  font-size: 12px;
  font-family: 'Inter';
  text-align: center;
  position: absolute;
  top: -6px;
  right: -3px;
}
.trade-panel-container .active-trades-scroll {
  position: relative;
  padding: 0 24px;
  flex-grow: 1;
}
.trade-panel-container .active-trades-scroll.right-divider {
  border-right: 2px solid rgba(163,187,211,0.1);
}
.trade-panel-container .trade-block-scroll {
  position: relative;
  padding: 16px;
  padding-right: 8px;
  padding-top: 0px;
}
.trade-panel-container .right {
  display: flex;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  flex: 1;
  flex-direction: column;
}
.trade-panel-container .left {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.trade-block-player {
  display: flex;
  flex-direction: column;
  height: 64px;
  width: 23%;
  box-sizing: border-box;
  background-color: rgba(58,70,91,0.5);
  border-radius: 8px;
  padding: 4px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 104px;
  min-width: 104px;
  overflow: hidden;
}
.trade-block-player:hover {
  background-color: #3a465b;
}
.trade-block-player.isSmall {
  width: 45%;
}
.trade-block-player .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-block-player .pos-text {
  font-size: 10px;
  color: #eef2f7;
  font-weight: 600;
  font-family: 'Inter';
  line-height: 12px;
}
.trade-block-player .circle-separator {
  margin: 0 4px;
  height: 4px;
  width: 4px;
  border-radius: 100%;
  background-color: #d8e2ed;
}
.trade-block-player .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  position: relative;
}
.trade-block-player .avatar-container .heart-container {
  position: absolute;
  top: -3px;
  right: -5px;
}
.trade-block-player .player-name {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-family: 'Inter';
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.trade-block-player .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border: 1px solid transparent;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.trade-block-player .footer.isTrade {
  border: 1px solid #fff;
}
.trade-block-player .owner {
  font-size: 10px;
  color: #fff;
  font-family: 'Inter';
  line-height: 12px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-block-player .owner.isTrade {
  color: #022047;
  font-weight: 600;
  border: 1px solid #fff;
  font-size: 9px;
  line-height: 10px;
}
.trade-block-list-container {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.trade-block-list {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: 24px;
}
.empty-container {
  display: flex;
  flex-direction: column;
  padding-top: 66px;
  align-items: center;
  flex: 1;
}
.empty-text {
  font-size: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
}
.trade-block-title {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins';
  line-height: 24px;
}
.trade-block-pick {
  display: flex;
  flex-direction: column;
  height: 64px;
  width: 23%;
  box-sizing: border-box;
  background-color: rgba(58,70,91,0.5);
  border-radius: 8px;
  padding: 4px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 104px;
  min-width: 104px;
}
.trade-block-pick:hover {
  background-color: #3a465b;
}
.trade-block-pick.isSmall {
  width: 45%;
}
.trade-block-pick .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-block-pick .heart-container {
  position: absolute;
  top: 4px;
  right: 4px;
}
.trade-block-pick .draft-pick-content {
  display: flex;
  position: relative;
  flex-direction: row;
}
.trade-block-pick .draft-pick-content .text {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter';
  line-height: 14px;
  color: #fff;
}
.trade-block-pick .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border: 1px solid transparent;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.trade-block-pick .footer.isTrade {
  border: 1px solid #fff;
}
.trade-block-pick .footer .owner {
  font-size: 10px;
  color: #fff;
  font-family: 'Inter';
  line-height: 12px;
  font-weight: normal;
}
.trade-block-pick .footer .owner.isTrade {
  color: #022047;
  font-weight: 600;
  border: 1px solid #fff;
  font-size: 9px;
  line-height: 10px;
}
.container {
  background: #fff;
  border-radius: 10px;
  max-height: 80vh;
  overflow: auto;
  background: #283245;
  color: #fff;
  padding: 12px;
}
.container .title {
  font-size: 16px;
  font-weight: bold;
}
.container .content-container {
  margin-top: 12px;
}
.container .content-container .input-unit {
  margin-right: 4px;
}
.container .content-container input {
  width: 64px;
}
.container .content-container button {
  margin-left: 8px;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}
.container .content-container button:hover,
.container .content-container button:active {
  opacity: 0.75;
}
.container .content-container button:disabled {
  opacity: 0.5;
}
.container .content-container button.button-save {
  color: $colorWr;
}
.container .content-container .waiver-budget {
  font-size: 12px;
  margin-top: 8px;
  color: $colorGrey300;
}
.container .content-container .errors-container {
  margin-top: 8px;
}
.app-modal {
  border-radius: 16px;
  padding: 24px 20px;
  background-color: #3a465b;
  position: relative;
}
.app-modal .app-modal-header-text {
  color: #fff;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
}
.app-modal .app-modal-subheader-text {
  color: #a3bbd3;
  font-family: Inter;
  font-size: 16px;
  letter-spacing: -0.15px;
}
.app-modal .app-modal-content {
  padding-top: 16px;
  padding-bottom: 16px;
}
.app-modal .close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #202635;
  cursor: pointer;
}
.app-modal .close-button img {
  height: 12px;
  width: 12px;
}
.user-tab-menu {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 24px;
  padding-top: 8px;
  box-sizing: border-box;
}
.user-tab-menu .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.user-tab-menu .avatar {
  width: 40px;
  height: 40px;
  border-radius: 24px;
  position: relative;
}
.user-tab-menu .info {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}
.user-tab-menu .info .name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
}
.user-tab-menu .info .name-row .name {
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
  font-family: 'Poppins';
}
.team-setting-container {
  position: relative;
  height: 570px;
  width: 420px;
  background-color: #2c3749;
  border-radius: 24px;
  box-sizing: border-box;
}
.team-setting-container .form-elements input,
.team-setting-container input {
  display: flex;
  width: 290px;
  height: 36px;
  border-radius: 8px;
  background-color: #344054;
  border: none;
  color: #fff;
  padding: 8px;
  box-sizing: border-box;
  margin-top: 4px;
  margin-bottom: 4px;
  outline: none;
}
.team-setting-container .title {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  padding-bottom: 32px;
}
.team-setting-container .league-icon {
  position: relative;
}
.team-setting-container .edit-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50px;
  bottom: 0px;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: #3a465b;
  z-index: 99;
}
.team-setting-container .label {
  font-size: 12px;
  font-weight: bolder;
  color: #a3bbd3;
}
.team-setting-container .edit-player-nickname-item {
  margin-top: 12px;
  color: #fff;
}
.team-setting-container .edit-player-nickname-item:last-child {
  margin-bottom: 64px;
}
.team-setting-container .nickname-input {
  display: flex;
  width: 100%;
}
.team-setting-container .form-elements button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  width: 72px;
  height: 32px;
  color: #022047;
  font-size: 14px;
  outline: none;
}
.team-setting-container .floating-save-button {
  position: absolute;
  display: flex;
  right: 12px;
  bottom: 12px;
}
.team-setting-container .validation-message-block {
  width: 270px;
}
.predraft-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 100%;
  height: 100%;
}
.league-invite-friends-cta-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 24px;
  background-color: rgba(58,70,91,0.25);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 24px;
  margin-bottom: 16px;
}
.league-invite-friends-cta-container .subtitle {
  font-size: 14px;
  color: #b9c4d4;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}
.league-invite-friends-cta-container .invite-friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80px;
  width: 50px;
  margin-right: 8px;
  cursor: pointer;
}
.league-invite-friends-cta-container .invite-friend .invite-circle {
  display: flex;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  border: 2px solid #00ceb8;
  background-color: rgba(0,186,255,0.1);
  align-items: center;
  justify-content: center;
}
.league-invite-friends-cta-container .invite-friend .invite-text {
  font-size: 12px;
  line-height: 20px;
  color: #00ceb8;
  text-align: center;
}
.league-invite-friends-cta-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-invite-friends-cta-container .invite-list-container {
  display: flex;
  flex: 1;
  max-height: 80px;
}
.league-invite-friends-cta-container .divider {
  display: flex;
  height: 40px;
  width: 2px;
  background-color: #a3bbd3;
  margin-top: 8px;
  border-radius: 4px;
  margin-left: 8px;
  margin-right: 8px;
}
.league-invite-friends-cta-container .link-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 40px;
  padding: 12px;
  color: #fff;
  background-color: rgba(58,70,91,0.25);
  border-radius: 16px;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.league-invite-friends-cta-container .link-container .text {
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
}
.league-invite-friends-cta-container .share-link {
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 83px;
  border-radius: 50px;
  cursor: pointer;
  color: #022047;
  font-size: 14px;
  font-weight: 600;
}
.invite-friend-item-container {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 50px;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
}
.invite-friend-item-container .avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a3bbd3;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  position: relative;
}
.invite-friend-item-container .opacity-wrapper {
  opacity: 0.4;
}
.invite-friend-item-container .text {
  font-size: 10px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.invite-friend-item-container .floating-status {
  position: absolute;
  right: -4px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 30px;
  background-color: #1c212d;
  z-index: 99;
}
.predraft-tab-container {
  display: flex;
  flex: 1;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: auto;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  padding: 0 24px;
}
.predraft-tab-container .content-container {
  display: flex;
  flex-direction: column;
  min-width: 460px;
  flex: 1;
  box-sizing: border-box;
  flex-grow: 1;
}
.predraft-tab-container .predraft-tab-selector {
  display: flex;
  flex: 1;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.predraft-tab-container .predraft-tab-selector .horizontal-pill-selector {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.predraft-tab-container .predraft-tab-selector .horizontal-pill-selector .option-item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.predraft-tab-container .predraft-tab-selector .horizontal-pill-selector .selected-pill-background {
  background-color: #00ceb8;
  shadow: none;
}
.predraft-tab-container .setting-button {
  cursor: pointer;
  font-size: 24px;
}
.predraft-tab-container .member-settings-menu {
  background: #18202e;
}
.predraft-tab-container .menu-item:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.predraft-tab-container .menu-item:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.predraft-tab-container .context-menu,
.predraft-tab-container.dark {
  background: #18202e;
  color: #fff;
  z-index: 999;
  border-radius: 16px;
}
.predraft-tab-container .context-menu .pointer .fa-caret-up,
.predraft-tab-container.dark .pointer .fa-caret-up,
.predraft-tab-container .context-menu .pointer .fa-caret-down,
.predraft-tab-container.dark .pointer .fa-caret-down {
  color: #18202e;
}
.predraft-tab-container .league-transaction-item-waiver-container {
  border-bottom: 1px solid #181c28;
}
.predraft-tab-container .title-section {
  padding: 16px;
  margin-bottom: 32px;
  display: flex;
  flex: 1;
  height: 50px;
  box-sizing: border-box;
}
.predraft-tab-container .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.predraft-tab-container .title {
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  font-weight: 500;
}
.predraft-tab-container .subtitle {
  font-size: 14px;
  color: #fff;
  opacity: 0.7;
}
.predraft-tab-container .view {
  font-size: 12px;
  color: #00ceb8;
  cursor: pointer;
  font-weight: 600;
}
.predraft-tab-container .league-activity-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 24px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
  margin-top: 16px;
  overflow: hidden;
  margin-bottom: 32px;
}
.predraft-tab-container .team-panel .team-roster .team-roster-item .player-name-wrapper .bye-week {
  position: relative;
  top: 2px;
}
.predraft-tab-container .scoring-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  margin-top: 16px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.predraft-tab-container .scoring-settings {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.predraft-tab-container .scoring-settings .scoring-notice {
  font-size: 12px;
  color: #a3bdd3;
}
.predraft-tab-container .scoring-settings .grouping-header {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  margin-top: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.predraft-tab-container .scoring-settings .settings-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius: 5px;
}
.predraft-tab-container .scoring-settings .settings-row.highlight {
  background-color: #ffffc7;
  padding: 8px !important;
}
.predraft-tab-container .scoring-settings .settings-row .name {
  font-size: 12px;
  color: #7988a1;
  font-weight: 600px;
}
.predraft-tab-container .scoring-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.predraft-tab-container .scoring-settings .settings-row .value .plus {
  color: #00ceb8;
}
.predraft-tab-container .scoring-settings .settings-row .value .minus {
  color: #ff2b6d;
}
.predraft-tab-container .league-settings-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  box-sizing: border-box;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.predraft-tab-container .league-settings-container .league-settings {
  display: flex;
  flex-direction: column;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row {
  display: flex;
  flex: 1;
  padding: 20px 0px;
  flex-direction: row;
  justify-content: space-between;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row .name {
  color: #7988a1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600px;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row .bold {
  font-weight: 700;
}
.predraft-draftboard-card {
  display: flex;
  flex: 1;
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background-color: #5e72e4;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  max-height: 220px;
  flex-direction: column;
  overflow: hidden;
  font-weight: 500;
  margin-bottom: 16px;
}
.predraft-draftboard-card .draftboar-img-container {
  position: absolute;
  top: 0;
  right: 0;
}
.predraft-draftboard-card .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.predraft-draftboard-card .button-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 16px;
  z-index: 1;
}
.predraft-draftboard-card .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
}
.predraft-draftboard-card .subtitle {
  color: #b9c4d4;
  font-size: 14px;
  line-height: 18px;
  z-index: 10;
}
.predraft-draftboard-card .preview {
  font-size: 12px;
  color: #b9c4d4;
  text-decoration: underline;
  cursor: pointer;
  line-height: 18px;
}
.predraft-draftboard-card .settings {
  cursor: pointer;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(58,70,91,0.5);
}
.predraft-draftboard-card .draft-button {
  display: flex;
  flex: 1;
  height: 56px;
  border-radius: 28px;
  background-color: rgba(216,226,237,0.1);
  border: 1px solid #fff;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px;
  max-width: 160px;
}
.predraft-draftboard-card .draft-button .divider {
  height: 16px;
  width: 2px;
  background-color: #022047;
  margin: 0 4px;
}
.predraft-draftboard-card .focus {
  background-color: #00ceb8;
  color: #022047;
  border: none;
}
.predraft-draftboard-card .focus.nba {
  background-color: #ffae58;
}
.predraft-draftboard-card .disable {
  background-color: #808080;
  cursor: default;
  opacity: 0.7;
}
.predraft-draftboard-card .name {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.predraft-draftboard-card .description {
  font-size: 10px;
  margin-top: 4px;
  text-align: center;
}
.predraft-draftboard-card .countdown-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  max-height: 88px;
  border-radius: 24px;
  background-color: #1c212d;
  opacity: 0.85;
  padding: 16px;
  box-sizing: border-box;
  margin-top: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.predraft-draftboard-card .countdown-container .drafting-text {
  font-size: 14px;
  color: #00ceb8;
  min-width: 105px;
}
.predraft-draftboard-card .countdown-container .username {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 16px;
  max-width: 90px;
  overflow: hidden;
}
.predraft-draftboard-card .countdown-container .draft-pos {
  font-size: 10px;
  color: #b9c4d4;
  font-weight: 200;
  margin-top: 4px;
}
.predraft-draftboard-card .countdown-container .dots {
  display: flex;
  flex: 1;
  align-items: center;
  font-size: 14;
  margin: 0 2px;
}
.predraft-draftboard-card .countdown-container .date-number-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 56px;
}
.predraft-draftboard-card .countdown-container .date-number-container .number {
  font-size: 40px;
  color: #00ceb8;
}
.predraft-draftboard-card .countdown-container .date-number-container .text {
  font-size: 9px;
  color: #b9c4d4;
}
.predraft-draftboard-card .countdown-container .date-number-container .empty-time {
  height: 4px;
  width: 16px;
  background-color: #b9c4d4;
  margin-bottom: 8px;
  margin-top: 8px;
}
.predraft-draftboard-card .countdown-container .space-top {
  margin-top: 8px;
}
.fast-five-promo-modal {
  display: flex;
  flex-direction: column;
  height: 510px;
  width: 500px;
}
.fast-five-promo-modal .row {
  display: flex;
  align-items: center;
}
.fast-five-promo-modal .gradient {
  display: flex;
  max-height: 156px;
  flex: 1;
  flex-direction: column;
  background-image: linear-gradient(#6e7df5, transparent);
  padding-top: 54px;
  box-sizing: border-box;
}
.fast-five-promo-modal .gradient .title {
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: medium;
  color: #fff;
  opacity: 0.8;
}
.fast-five-promo-modal .fast-five-modal-content {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  align-items: center;
}
.fast-five-promo-modal .fast-five-modal-content .pos-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item {
  display: flex;
  flex-direction: column;
  background-color: #3a465b;
  width: 68px;
  height: 100px;
  margin-right: 16px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  align-items: center;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item .pos-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item .description {
  font-size: 10px;
  line-height: 15px;
  font-family: 'Poppins';
  font-weight: medium;
  color: #fff;
  text-align: center;
  margin-top: 2px;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item .arrow-down {
  width: 0;
  height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-top: 22px solid #3a465b;
  margin-top: 3px;
}
.fast-five-promo-modal .desc {
  font-size: 16px;
  color: #d8e2ed;
  line-height: 19px;
  font-family: 'Inter';
  margin-top: 42px;
  text-align: center;
}
.fast-five-promo-modal .desc-2 {
  font-size: 16px;
  color: #d8e2ed;
  line-height: 19px;
  font-family: 'Inter';
  font-weight: bold;
  text-align: center;
}
.fast-five-promo-modal .close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #022047;
  background: #00baff;
  border-radius: 48px;
  height: 48px;
  width: 180px;
  margin-top: 32px;
  font-weight: bold;
  cursor: pointer;
}
.fast-five-promo-modal .footer {
  font-size: 14px;
  color: #a3bbd3;
  line-height: 18px;
  text-align: center;
  font-family: 'Inter';
  margin-top: 16px;
}
.starter-list-container {
  display: flex;
  flex-direction: column;
}
.starter-list-container .position-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 8px;
  background-color: rgba(59,70,91,0.25);
}
.starter-list-container .starter-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 120px;
  margin-top: 16px;
  position: relative;
  justify-content: center;
  padding: 0 16px;
}
.lol-starter-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  margin-right: 4px;
  font-family: 'Inter', sans-serif;
}
.lol-starter-card.flip {
  margin-left: 4px;
  margin-right: 0px;
}
.lol-starter-card .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-starter-card .row.flip {
  flex-direction: row-reverse;
}
.lol-starter-card .player-header {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 0 16px;
  height: 34px;
}
.lol-starter-card .player-header.flip {
  flex-direction: row-reverse;
}
.lol-starter-card .player-header .player-meta-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.lol-starter-card .player-header .player-meta-container.flip {
  margin-left: 0;
  margin-right: 8px;
}
.lol-starter-card .player-header .player-meta-container .player-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}
.lol-starter-card .player-header .player-meta-container .player-data {
  color: #7988a1;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
}
.lol-starter-card .player-header .player-meta-container .substitute-text {
  color: #00ceb8;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
  margin: 0 4px;
}
.lol-starter-card .lol-player-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: rgba(58,70,91,0.25);
  min-height: 100px;
  border-radius: 16px;
}
.lol-starter-card .lol-player-body .lol-body-top {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(58,70,91,0.5);
}
.lol-starter-card .lol-player-body .lol-body-top.flip {
  flex-direction: row-reverse;
}
.lol-starter-card .lol-player-body .lol-body-top .lol-score-container {
  display: flex;
  flex-direction: column;
}
.lol-starter-card .lol-player-body .lol-body-top .lol-score-container .adjusted-score {
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}
.lol-starter-card .lol-player-body .lol-body-top .lol-score-container .base-score {
  font-size: 10px;
  line-height: 12px;
  color: #b9c4d4;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container {
  display: flex;
  flex-direction: row;
  position: relative;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container.flipped {
  flex-direction: row-reverse;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .opponent-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 20px;
  border: 2px solid #ff6086;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .opponent-choice .avatar-identifier {
  position: absolute;
  bottom: -6px;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .cross-ban {
  height: 2px;
  width: 100%;
  background-color: #ff6086;
  transform: rotate(45deg);
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .cross-pick {
  height: 2px;
  width: 100%;
  background-color: #00baff;
  transform: rotate(45deg);
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice {
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
  width: 40px;
  border-radius: 50px;
  background-color: #99e3ff;
  border: 2px solid #00baff;
  cursor: pointer;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice.has-champion {
  background-color: transparent;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice.flipped {
  margin-right: 8px;
  margin-left: 0px;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice .text {
  position: absolute;
  color: #046ae0;
  font-size: 12px;
  z-index: 10;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.lol-matchup-list-container {
  display: flex;
  flex-direction: column;
}
.lol-score-and-projection-container-row {
  display: flex;
  position: relative;
}
.lol-score-and-projection-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 8px 16px;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  background-color: #2e3748;
}
.lol-score-and-projection-row.flipped {
  flex-direction: row-reverse;
}
.lol-score-and-projection-row .row {
  display: flex;
  flex-direction: row;
}
.lol-score-and-projection-row .lol-points-container {
  display: flex;
  flex-direction: column;
}
.lol-score-and-projection-row .lol-points-container .base-score {
  font-size: 10px;
  font-family: 'Inter', sans-serif;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score {
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.blue {
  color: #00baff;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.red {
  color: #ff6086;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.blue-and-red {
  color: #fff;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.flipped {
  text-align: right;
}
.lol-score-and-projection-row .lol-kda-container {
  display: flex;
  flex-direction: column;
}
.lol-score-and-projection-row .lol-kda-container .result-text {
  font-size: 9px;
  color: #fff;
  font-family: 'Poppins';
}
.lol-score-and-projection-row .lol-kda-container .team-text {
  font-size: 9px;
  color: #b9c4d4;
  font-family: 'Poppins';
  margin-left: 4px;
}
.lol-score-and-projection-row .lol-kda-container .kda-text {
  margin-top: 4px;
  font-size: 10px;
  color: #b9c4d4;
  font-family: 'Poppins';
}
.lol-score-and-projection-row .champion-image-container {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 28px;
  background: transparent;
}
.lol-score-and-projection-row .champion-image-container.blue {
  background: #00baff;
  color: #00baff;
}
.lol-score-and-projection-row .champion-image-container.red {
  background: #ff6086;
  color: #ff6086;
}
.lol-score-and-projection-row .champion-image-container.blue-and-red {
  background-image: linear-gradient(to bottom right, #00baff, #ff6086);
}
.fast-five-player-indicator {
  position: absolute;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
  user-select: none;
}
.fast-five-player-indicator .row {
  display: flex;
  align-items: center;
}
.fast-five-player-indicator .content-row {
  flex: 1;
  display: flex;
  flex-direction: row;
  z-index: 10;
  align-items: center;
  padding: 0 4px;
}
.fast-five-player-indicator .content-row.flipped {
  flex-direction: row-reverse;
}
.fast-five-player-indicator .content-row .vertical {
  font-size: 6px;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Poppins';
}
.fast-five-player-indicator .content-row .vertical.flipped {
  writing-mode: vertical-rl;
  transform: rotate(0deg);
}
.fast-five-player-indicator .content-row .pos {
  padding-left: 10px;
  padding-right: 4px;
}
.fast-five-player-indicator .content-row .pos.flipped {
  padding-right: 10px;
  padding-left: 4px;
}
.fast-five-player-indicator .content-row .time {
  font-family: 'Poppins';
  font-weight: bold;
  font-size: 14px;
}
.fast-five-player-indicator .content-row .description {
  font-family: 'Poppins';
  font-size: 10px;
  line-height: 12px;
  color: #fff;
}
.fast-five-player-indicator .content-row .description.flipped {
  text-align: right;
}
.fast-five-player-indicator .content-row .circle {
  height: 3px;
  width: 3px;
  background-color: #eef2f7;
  border-radius: 3px;
  margin: 0 8px;
}
.fast-five-player-indicator .content-row .current {
  font-size: 9px;
  color: #eef2f7;
  line-height: 12px;
  font-family: 'Inter';
}
.fast-five-player-indicator .content-row .winner {
  font-size: 10px;
  color: #eef2f7;
  line-height: 12px;
  font-family: 'Inter';
}
.fast-five-player-indicator .content-row .score {
  font-size: 14px;
  color: #fff;
  font-family: 'Poppins';
  font-weight: bold;
}
.roster-matchup-lcs-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.week-selector-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.postdraft-panel {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
}
.fast-five-promo-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  align-items: center;
  background-image: linear-gradient(to right, #635ee4, #475580);
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 20;
}
.fast-five-promo-banner .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fast-five-promo-banner .text {
  margin-left: 10px;
  font-size: 12px;
  color: #d8e2ed;
  line-height: 16px;
  font-family: 'Inter';
}
.password-rules-container .password-rules-text {
  font-family: 'Lato';
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.1px;
  color: #8190b0;
}
.password-rules-container .password-rules-text img {
  height: 12px;
  width: 12px;
  margin-right: 4px;
  opacity: 0.5;
}
.password-rules-container .password-rules-text.indent {
  margin-left: 20px;
}
.password-rules-container .password-rules-text.valid {
  color: #022047;
}
.password-rules-container .password-rules-text.valid img {
  opacity: 1;
}
.password-rules-container.dark .password-rules-text {
  color: #677897;
}
.password-rules-container.dark .password-rules-text img {
  opacity: 1;
}
.password-rules-container.dark .password-rules-text.valid {
  color: #a3bbd3;
}
.settings-container .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #181c28;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.settings-container .spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.onboard-desc-text {
  font-family: 'Lato';
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.1px;
  color: #8190b0;
}
.onboard-header-text {
  text-align: left;
  font-family: 'Muli';
  font-size: 42px;
  font-weight: 800;
  line-height: 1.52;
  color: $colorDark;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.onboard-header-text .header {
  flex-grow: 1;
}
.onboard-header-text .right-header-action {
  font-size: 16px;
  font-weight: bold;
  color: #00ceb8;
  cursor: pointer;
}
.animated-border {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  position: relative;
}
.animated-border .filling {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  transition: all 0.2s ease;
}
.animated-border .filling.show {
  width: 100%;
}
.box-text-input {
  padding: 2px 10px;
  min-width: 380px;
}
.box-text-input .input-container {
  position: relative;
  display: flex;
  flex-grow: 1;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.box-text-input .input-container input {
  font-family: 'Lato';
  height: 52px;
  padding: 15px 12px;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-size: 18px;
  color: $colorDark;
  caret-color: $colorMint;
  transition: all 0.2s ease;
  width: 100%;
}
.box-text-input .input-container input::placeholder {
  color: $colorGrey300;
  letter-spacing: 0.08px;
}
.box-text-input .input-container input:disabled {
  color: $colorGrey300;
  background: $colorGrey100;
}
.box-text-input .input-container .bottom-border {
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
.box-text-input .input-container .message-indicator {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-text-input .input-container .message-indicator img {
  width: 16px;
}
.box-text-input .input-container .password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  cursor: pointer;
  background: #fff;
}
.box-text-input label {
  font-size: 12px;
  line-height: 18px;
  color: #8190b0;
  display: block;
  transition: all 0.2s ease;
  margin-bottom: 3px;
}
.box-text-input .input-message {
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-text-input.focus >label {
  color: $colorMint;
}
.box-text-input.error .input-container {
  padding-right: 46px;
}
.box-text-input.error >label {
  color: $colorRed;
}
.box-text-input.error .input-message {
  color: $colorRed;
}
.box-text-input.error .message-indicator {
  background: #f9d3cf;
  color: #ff2b6d;
  font-size: 18px;
}
.box-text-input.warning .input-container {
  padding-right: 46px;
}
.box-text-input.warning label {
  color: $colorOrange;
}
.box-text-input.warning .input-message {
  color: $colorOrange;
}
.box-text-input.warning .message-indicator {
  background: rgba(241,161,83,0.3);
  color: #ff7a5a;
}
.box-text-input.success .input-container {
  padding-right: 46px;
}
.box-text-input.success label {
  color: $colorMint;
}
.box-text-input.success .input-message {
  color: $colorMint;
}
.box-text-input.success .message-indicator {
  background: #cbf3dc;
  color: #4ce2a7;
}
.box-text-input.disabled .input-container {
  padding-right: 0;
}
.box-text-input.disabled label,
.box-text-input.disabled .input-message {
  color: #8190b0;
}
.box-text-input.disabled .message-indicator {
  display: none;
}
.box-text-input.disabled .bottom-border {
  opacity: 0;
}
.validation-alert {
  padding: 21px 26px;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'Muli';
  display: flex;
  flex-direction: row;
}
.validation-alert i {
  font-size: 20px;
}
.validation-alert.error {
  background-color: rgba(250,150,170,0.5);
  color: $colorRed;
}
.validation-alert.error i {
  color: $colorRed;
}
.validation-alert.confirmation {
  background-color: rgba(76,226,167,0.2);
  color: $colorMint;
}
.validation-alert.confirmation i {
  color: $colorMint;
}
.validation-alert.info {
  background-color: rgba(110,125,245,0.15);
  color: $colorPurple;
}
.validation-alert.info i {
  color: $colorPurple;
}
.validation-alert.warning {
  background-color: rgba(254,221,170,0.5);
  color: $colorOrange;
}
.validation-alert.warning i {
  color: $colorOrange;
}
.validation-alert .message {
  flex-grow: 1;
  align-self: center;
  padding: 0 22px;
}
.validation-alert .dismiss-button {
  padding-left: 10px;
  cursor: pointer;
  position: relative;
}
.validation-alert .dismiss-button:after {
  content: "";
  padding: 20px;
  position: absolute;
  left: -2px;
  top: -10px;
}
.sign-up-form .error-message-container {
  margin: 20px 10px;
}
.sign-up-form .sign-up-button {
  width: 110px;
  margin-top: 40px;
  margin-left: 10px;
}
.sign-up-form .box-text-input {
  margin-bottom: 5px;
}
.sign-up-panel {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.sign-up-panel .initializing-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition: all 0.3s ease;
  background-color: #102131;
  z-index: 1;
}
.sign-up-panel .initializing-loading-overlay.hide {
  opacity: 0;
  pointer-events: none;
}
.sign-up-panel .content-container {
  padding: 100px 130px 130px 130px;
  flex-grow: 1;
  margin: auto;
  max-width: 700px;
}
.sign-up-panel .content-container .auth-header-with-description {
  margin-bottom: 40px;
  padding: 0 10px;
}
.sign-up-panel .header-container {
  padding: 0 10px;
  margin-bottom: 40px;
}
.resend-code-button .main-container-wrapper {
  cursor: pointer;
}
.resend-code-button .main-container-wrapper.wait {
  cursor: wait;
}
.resend-code-button .main-container {
  font-size: 16px;
  font-family: 'Muli';
  line-height: 20px;
  color: #00ceb8;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.resend-code-button .loader {
  margin-left: 10px;
}
.resend-code-button .sub-container {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.03px;
  color: #a3bbd3;
}
.verify-form .error-message-container {
  margin: 20px 10px;
}
.verify-form .verify-button {
  width: 110px;
  margin-left: 10px;
}
.verify-form .box-text-input {
  margin-bottom: 5px;
}
.verify-form .resend-container {
  margin-top: 52px;
  padding: 0 10px;
}
.verify-form .action-button-container[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.login-form .error-message-container {
  margin: 20px 10px;
}
.login-form .login-button {
  width: 110px;
  margin-left: 10px;
}
.login-form .box-text-input {
  margin-bottom: 5px;
}
.login-form .resend-container {
  margin-top: 52px;
  padding: 0 10px;
}
.login-form .action-button-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 10px;
}
.login-form .action-button-container .button-wrapper {
  flex-grow: 1;
}
.login-form .action-button-container[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.login-form .forgot-password {
  font-size: 16;
  font-family: 'Muli';
  color: #00ceb8;
  cursor: pointer;
}
.login-form .resend-code {
  font-size: 16;
  font-family: 'Muli';
  color: #00ceb8;
  cursor: pointer;
  padding-right: 15px;
}
.login-panel {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.login-panel .successMessage {
  color: #00bfa5;
  font-size: 20px;
  padding: 14px;
}
.login-panel .initializing-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  transition: all 0.3s ease;
  background-color: #102131;
  z-index: 1;
}
.login-panel .initializing-loading-overlay.hide {
  opacity: 0;
  pointer-events: none;
}
.login-panel .content-container {
  padding: 100px 130px 130px 130px;
  flex-grow: 1;
  margin: auto;
  max-width: 700px;
}
.login-panel .content-container .auth-header-with-description {
  margin-bottom: 40px;
  padding: 0 10px;
}
.login-panel .header-container {
  padding: 0 10px;
  margin-bottom: 40px;
}
.onboard-image-panel {
  padding: 0 40px 40px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: auto;
  width: 512px;
}
.onboard-image-panel .logo {
  height: 40px;
  position: fixed;
  top: 42px;
  z-index: 1;
}
.onboard-image-panel .logo img {
  width: 174px;
}
.onboard-image-panel .content-container {
  padding-bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-image-panel .content-container video {
  width: 816px;
  height: 1080px;
}
.onboard-image-panel .title-container {
  padding-bottom: 91px;
}
.onboard-image-panel .title {
  font-size: 36px;
  font-weight: 900;
  font-family: 'Muli';
  color: #fff;
  line-height: 45px;
}
.onboard-image-panel .description {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.1px;
  font-family: 'Lato';
  color: #e6effa;
}
.onboard-image-panel-login {
  padding: 0 40px 40px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: auto;
  width: 512px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
}
.onboard-image-panel-login .logo {
  height: 40px;
  position: fixed;
  top: 42px;
  z-index: 1;
}
.onboard-image-panel-login .logo img {
  width: 174px;
}
.onboard-image-panel-login .login-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center 63%;
  background-repeat: no-repeat;
  background-size: 70%;
}
.onboard-image-panel-login .content-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.onboard-image-panel-login .content-container video {
  width: 816px;
  height: 1080px;
}
.onboard-image-panel-login .title-container {
  padding-bottom: 191px;
  z-index: 1;
}
.onboard-image-panel-login .title {
  font-size: 36px;
  font-weight: 900;
  font-family: 'Muli';
  color: #fff;
  line-height: 45px;
}
.onboard-image-panel-login .description {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.1px;
  font-family: 'Lato';
  color: #e6effa;
}
.panel-copyright-footer {
  margin-bottom: 48px;
  font-size: 14px;
  font-family: 'Muli';
  color: #8190b0;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  max-width: 700px;
  padding-left: 140px;
  padding-right: 140px;
}
.panel-copyright-footer a {
  padding-right: 20px;
  text-decoration: none;
  line-height: 1.29;
  color: #8190b0;
}
.panel-copyright-footer a:not(:first-child) {
  padding-left: 20px;
}
.panel-copyright-footer .copyright {
  display: none;
  line-height: 1.29;
}
.auth-onboard-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
}
.auth-onboard-layout .left-panel {
  min-width: 512px;
  height: 100vh;
  overflow: hidden;
  background-color: #102131;
  display: flex;
  flex: 2 2 0;
  position: relative;
  transition: all 0.3s ease;
}
.auth-onboard-layout .left-panel.sign-up {
  background-color: #122638;
}
.auth-onboard-layout .right-panel {
  flex: 3 3 0;
  height: 100vh;
  overflow: auto;
  background-color: #f8fafd;
  display: flex;
  position: relative;
  flex-direction: column;
}
@media (max-width: 1000px) {
  .auth-onboard-layout .left-panel {
    min-width: 0;
    width: 0;
    flex: 0 0 0;
    opacity: 0;
  }
  .auth-onboard-layout .right-panel header {
    opacity: 1;
  }
}
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.scrollbar-container {
  position: relative;
  height: 100%; }

/*# sourceMappingURL=styles.css.map*/@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url("https://fonts.gstatic.com/s/lato/v13/h3_FseZLI76g1To6meQ4zX-_kf6ByYO6CLYdB4HQE-Y.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url("https://fonts.gstatic.com/s/lato/v13/ifRS04pY1nJBsu8-cUFUS-vvDin1pK8aKteLpeZ5c0A.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url("https://fonts.gstatic.com/s/lato/v13/IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url("https://fonts.gstatic.com/s/lato/v13/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url("https://fonts.gstatic.com/s/lato/v13/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url("https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url("https://fonts.gstatic.com/s/lato/v13/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url("https://fonts.gstatic.com/s/lato/v13/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url("https://fonts.gstatic.com/s/lato/v13/t85RP2zhSdDjt5PhsT_SnlKPGs1ZzpMvnHX-7fPOuAc.woff2") format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url("https://fonts.gstatic.com/s/lato/v13/lEjOv129Q3iN1tuqWOeRBgLUuEpTyoUstqEm5AMlJo4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
a img {
  border: none;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-o-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-moz-keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0px);
  }
}
@-webkit-keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0px);
  }
}
@-o-keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0px);
  }
}
@-moz-keyframes slideLeftAndUp {
  from {
    transform: translate(20px, 20px);
  }
  to {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes slideLeftAndUp {
  from {
    transform: translate(20px, 20px);
  }
  to {
    transform: translate(0, 0);
  }
}
@-o-keyframes slideLeftAndUp {
  from {
    transform: translate(20px, 20px);
  }
  to {
    transform: translate(0, 0);
  }
}
@keyframes slideLeftAndUp {
  from {
    transform: translate(20px, 20px);
  }
  to {
    transform: translate(0, 0);
  }
}
@-moz-keyframes slideLeft {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes slideLeft {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(0);
  }
}
@-o-keyframes slideLeft {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideLeft {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(0);
  }
}
.avatar-nfl-ari {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/ari.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-atl {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/atl.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-bal {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/bal.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-buf {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/buf.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-car {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/car.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-chi {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/chi.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-cin {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/cin.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-cle {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/cle.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-dal {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/dal.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-den {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/den.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-det {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/det.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-gb {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/gb.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-hou {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/hou.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-ind {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/ind.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-jac,
.avatar-nfl-jax {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/jax.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-kc {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/kc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-la,
.avatar-nfl-lar {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/la.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-lac {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/lac.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-lv {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/oak.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-mia {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/mia.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-min {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/min.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-ne {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/ne.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-no {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/no.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-nyg {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/nyg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-nyj {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/nyj.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-oak {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/oak.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-phi {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/phi.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-pit {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/pit.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-sea {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/sea.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-sf {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/sf.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-tb {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/tb.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-ten {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/ten.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nfl-was {
  background-image: url("https://sleepercdn.com/images/team_logos/nfl/was.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-atl {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/atl.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-bkn {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/bkn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-bos {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/bos.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-cha {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/cha.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-chi {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/chi.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-cle {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/cle.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-dal {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/dal.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-den {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/den.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-det {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/det.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-gsw {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/gsw.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-hou {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/hou.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-ind {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/ind.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-lac {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/lac.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-lal {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/lal.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-mem {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/mem.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-mia {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/mia.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-mil {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/mil.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-min {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/min.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-nop {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/nop.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-nyk {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/nyk.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-okc {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/okc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-orl {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/orl.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-phi {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/phi.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-phx {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/phx.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-por {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/por.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-sa {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/sa.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-sac {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/sac.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-sas {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/sas.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-tor {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/tor.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-uta {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/uta.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-was {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/was.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.avatar-nba-wsh {
  background-image: url("https://sleepercdn.com/images/team_logos/nba/wsh.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.auth-style-modal {
  background: #f4f4f4;
  padding: 20px 20px;
  border-radius: 10px;
  min-width: 400px;
}
.auth-style-modal .modal-body-container {
  margin: 15px 0;
  min-height: 50px;
  display: flex;
  align-items: flex-end;
}
.auth-style-modal h1 {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}
.auth-style-modal .description {
  font-size: 12px;
  color: #aaa;
}
.auth-style-modal footer {
  text-align: left;
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}
@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.ball-pulse-sync > div:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  -moz-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  -ms-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  -o-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  -moz-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  -ms-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  -o-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(3) {
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  -moz-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  -ms-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  -o-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}
.ball-pulse-sync > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}
@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.ball-scale > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  -moz-animation: ball-scale 1s 0s ease-in-out infinite;
  -ms-animation: ball-scale 1s 0s ease-in-out infinite;
  -o-animation: ball-scale 1s 0s ease-in-out infinite;
  animation: ball-scale 1s 0s ease-in-out infinite;
}
.ball-scale > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  -moz-animation: ball-scale 1s 0s ease-in-out infinite;
  -ms-animation: ball-scale 1s 0s ease-in-out infinite;
  -o-animation: ball-scale 1s 0s ease-in-out infinite;
  animation: ball-scale 1s 0s ease-in-out infinite;
}
.ball-scale-random {
  width: 37px;
  height: 40px;
}
.ball-scale-random > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  display: inline-block;
  height: 30px;
  width: 30px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  -moz-animation: ball-scale 1s 0s ease-in-out infinite;
  -ms-animation: ball-scale 1s 0s ease-in-out infinite;
  -o-animation: ball-scale 1s 0s ease-in-out infinite;
  animation: ball-scale 1s 0s ease-in-out infinite;
}
.ball-scale-random > div:nth-child(1) {
  margin-left: -7px;
  -webkit-animation: ball-scale 1s 0.2s ease-in-out infinite;
  -webkit-animation: ball-scale 1s 0.2s ease-in-out infinite;
  -moz-animation: ball-scale 1s 0.2s ease-in-out infinite;
  -ms-animation: ball-scale 1s 0.2s ease-in-out infinite;
  -o-animation: ball-scale 1s 0.2s ease-in-out infinite;
  animation: ball-scale 1s 0.2s ease-in-out infinite;
}
.ball-scale-random > div:nth-child(3) {
  margin-left: -2px;
  margin-top: 9px;
  -webkit-animation: ball-scale 1s 0.5s ease-in-out infinite;
  -webkit-animation: ball-scale 1s 0.5s ease-in-out infinite;
  -moz-animation: ball-scale 1s 0.5s ease-in-out infinite;
  -ms-animation: ball-scale 1s 0.5s ease-in-out infinite;
  -o-animation: ball-scale 1s 0.5s ease-in-out infinite;
  animation: ball-scale 1s 0.5s ease-in-out infinite;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.ball-rotate {
  position: relative;
}
.ball-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: relative;
}
.ball-rotate > div:first-child {
  -webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  -webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  -moz-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  -ms-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  -o-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
}
.ball-rotate > div:before,
.ball-rotate > div:after {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  content: "";
  position: absolute;
  opacity: 0.8;
}
.ball-rotate > div:before {
  top: 0px;
  left: -28px;
}
.ball-rotate > div:after {
  top: 0px;
  left: 25px;
}
.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  height: 26px;
  width: 26px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  -moz-animation: rotate 0.75s 0s linear infinite;
  -ms-animation: rotate 0.75s 0s linear infinite;
  -o-animation: rotate 0.75s 0s linear infinite;
  animation: rotate 0.75s 0s linear infinite;
}
.ball-clip-rotate-pulse {
  position: relative;
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}
.ball-clip-rotate-pulse > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%;
}
.ball-clip-rotate-pulse > div:first-child {
  background: #fff;
  height: 16px;
  width: 16px;
  top: 7px;
  left: -7px;
  -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -moz-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -ms-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -o-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.ball-clip-rotate-pulse > div:last-child {
  position: absolute;
  border: 2px solid #fff;
  width: 30px;
  height: 30px;
  left: -16px;
  top: -2px;
  background: transparent;
  border: 2px solid;
  border-color: #fff transparent #fff transparent;
  -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -moz-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -ms-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -o-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}
.ball-clip-rotate-multiple {
  position: relative;
}
.ball-clip-rotate-multiple > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  left: -20px;
  top: -20px;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  -webkit-animation: rotate 1s 0s ease-in-out infinite;
  -webkit-animation: rotate 1s 0s ease-in-out infinite;
  -moz-animation: rotate 1s 0s ease-in-out infinite;
  -ms-animation: rotate 1s 0s ease-in-out infinite;
  -o-animation: rotate 1s 0s ease-in-out infinite;
  animation: rotate 1s 0s ease-in-out infinite;
}
.ball-clip-rotate-multiple > div:last-child {
  display: inline-block;
  top: -10px;
  left: -10px;
  width: 15px;
  height: 15px;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  border-color: #fff transparent #fff transparent;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}
@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
.ball-scale-ripple > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: 2px solid #fff;
  -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -moz-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -ms-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -o-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
@-webkit-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
.ball-scale-ripple-multiple {
  position: relative;
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}
.ball-scale-ripple-multiple > div:nth-child(0) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.ball-scale-ripple-multiple > div:nth-child(1) {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.ball-scale-ripple-multiple > div:nth-child(2) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.ball-scale-ripple-multiple > div:nth-child(3) {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.ball-scale-ripple-multiple > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  top: -2px;
  left: -26px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #fff;
  -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -moz-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -ms-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  -o-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
  animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.ball-beat > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
  -moz-animation: ball-beat 0.7s 0s infinite linear;
  -ms-animation: ball-beat 0.7s 0s infinite linear;
  -o-animation: ball-beat 0.7s 0s infinite linear;
  animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1) {
  -webkit-animation-delay: -0.35s !important;
  animation-delay: -0.35s !important;
}
@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.ball-scale-multiple {
  position: relative;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}
.ball-scale-multiple > div:nth-child(2) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.ball-scale-multiple > div:nth-child(3) {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.ball-scale-multiple > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  left: -30px;
  top: 0px;
  opacity: 0;
  margin: 0;
  width: 60px;
  height: 60px;
  -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
  -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
  -moz-animation: ball-scale-multiple 1s 0s linear infinite;
  -ms-animation: ball-scale-multiple 1s 0s linear infinite;
  -o-animation: ball-scale-multiple 1s 0s linear infinite;
  animation: ball-scale-multiple 1s 0s linear infinite;
}
@-webkit-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
    transform: translate(25px, -50px);
  }
  66% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
  }
  66% {
    -webkit-transform: translate(-25px, 50px);
    transform: translate(-25px, 50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }
  66% {
    -webkit-transform: translate(-25px, -50px);
    transform: translate(-25px, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
.ball-triangle-path {
  position: relative;
  -webkit-transform: translate(-29.994px, -37.50938px);
  transform: translate(-29.994px, -37.50938px);
}
.ball-triangle-path > div:nth-child(1) {
  -webkit-animation-name: ball-triangle-path-1;
  animation-name: ball-triangle-path-1;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.ball-triangle-path > div:nth-child(2) {
  -webkit-animation-name: ball-triangle-path-2;
  animation-name: ball-triangle-path-2;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.ball-triangle-path > div:nth-child(3) {
  -webkit-animation-name: ball-triangle-path-3;
  animation-name: ball-triangle-path-3;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.ball-triangle-path > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid #fff;
}
.ball-triangle-path > div:nth-of-type(1) {
  top: 50px;
}
.ball-triangle-path > div:nth-of-type(2) {
  left: 25px;
}
.ball-triangle-path > div:nth-of-type(3) {
  top: 50px;
  left: 50px;
}
@-webkit-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  75% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  25% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
.ball-pulse-rise > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
.ball-pulse-rise > div:nth-child(2n) {
  -webkit-animation-name: ball-pulse-rise-even;
  animation-name: ball-pulse-rise-even;
}
.ball-pulse-rise > div:nth-child(2n-1) {
  -webkit-animation-name: ball-pulse-rise-odd;
  animation-name: ball-pulse-rise-odd;
}
@-webkit-keyframes ball-grid-beat {
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
.ball-grid-beat {
  width: 57px;
}
.ball-grid-beat > div:nth-child(1) {
  -webkit-animation-delay: 0.49s;
  animation-delay: 0.49s;
  -webkit-animation-duration: 0.93s;
  animation-duration: 0.93s;
}
.ball-grid-beat > div:nth-child(2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-duration: 1.02s;
  animation-duration: 1.02s;
}
.ball-grid-beat > div:nth-child(3) {
  -webkit-animation-delay: 0.63s;
  animation-delay: 0.63s;
  -webkit-animation-duration: 1.07s;
  animation-duration: 1.07s;
}
.ball-grid-beat > div:nth-child(4) {
  -webkit-animation-delay: -0.04s;
  animation-delay: -0.04s;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}
.ball-grid-beat > div:nth-child(5) {
  -webkit-animation-delay: 0.21s;
  animation-delay: 0.21s;
  -webkit-animation-duration: 1.41s;
  animation-duration: 1.41s;
}
.ball-grid-beat > div:nth-child(6) {
  -webkit-animation-delay: -0.08s;
  animation-delay: -0.08s;
  -webkit-animation-duration: 0.66s;
  animation-duration: 0.66s;
}
.ball-grid-beat > div:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 1.36s;
  animation-duration: 1.36s;
}
.ball-grid-beat > div:nth-child(8) {
  -webkit-animation-delay: 0.78s;
  animation-delay: 0.78s;
  -webkit-animation-duration: 1.17s;
  animation-duration: 1.17s;
}
.ball-grid-beat > div:nth-child(9) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-duration: 1.49s;
  animation-duration: 1.49s;
}
.ball-grid-beat > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  float: left;
  -webkit-animation-name: ball-grid-beat;
  animation-name: ball-grid-beat;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
@-webkit-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.ball-grid-pulse {
  width: 57px;
}
.ball-grid-pulse > div:nth-child(1) {
  -webkit-animation-delay: 0.19s;
  animation-delay: 0.19s;
  -webkit-animation-duration: 0.98s;
  animation-duration: 0.98s;
}
.ball-grid-pulse > div:nth-child(2) {
  -webkit-animation-delay: 0.48s;
  animation-delay: 0.48s;
  -webkit-animation-duration: 1.58s;
  animation-duration: 1.58s;
}
.ball-grid-pulse > div:nth-child(3) {
  -webkit-animation-delay: 0.58s;
  animation-delay: 0.58s;
  -webkit-animation-duration: 1.13s;
  animation-duration: 1.13s;
}
.ball-grid-pulse > div:nth-child(4) {
  -webkit-animation-delay: 0.63s;
  animation-delay: 0.63s;
  -webkit-animation-duration: 0.98s;
  animation-duration: 0.98s;
}
.ball-grid-pulse > div:nth-child(5) {
  -webkit-animation-delay: 0.06s;
  animation-delay: 0.06s;
  -webkit-animation-duration: 0.64s;
  animation-duration: 0.64s;
}
.ball-grid-pulse > div:nth-child(6) {
  -webkit-animation-delay: 0.38s;
  animation-delay: 0.38s;
  -webkit-animation-duration: 0.85s;
  animation-duration: 0.85s;
}
.ball-grid-pulse > div:nth-child(7) {
  -webkit-animation-delay: -0.06s;
  animation-delay: -0.06s;
  -webkit-animation-duration: 1.53s;
  animation-duration: 1.53s;
}
.ball-grid-pulse > div:nth-child(8) {
  -webkit-animation-delay: 0.57s;
  animation-delay: 0.57s;
  -webkit-animation-duration: 0.76s;
  animation-duration: 0.76s;
}
.ball-grid-pulse > div:nth-child(9) {
  -webkit-animation-delay: 0.73s;
  animation-delay: 0.73s;
  -webkit-animation-duration: 0.98s;
  animation-duration: 0.98s;
}
.ball-grid-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  float: left;
  -webkit-animation-name: ball-grid-pulse;
  animation-name: ball-grid-pulse;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.ball-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -10px;
}
.ball-spin-fade-loader > div:nth-child(1) {
  top: 25px;
  left: 0;
  -webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
  animation: ball-spin-fade-loader 1s -0.96s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(2) {
  top: 17.04545px;
  left: 17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
  animation: ball-spin-fade-loader 1s -0.84s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(3) {
  top: 0;
  left: 25px;
  -webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
  animation: ball-spin-fade-loader 1s -0.72s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(4) {
  top: -17.04545px;
  left: 17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
  animation: ball-spin-fade-loader 1s -0.6s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(5) {
  top: -25px;
  left: 0;
  -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
  animation: ball-spin-fade-loader 1s -0.48s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(6) {
  top: -17.04545px;
  left: -17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
  animation: ball-spin-fade-loader 1s -0.36s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(7) {
  top: 0;
  left: -25px;
  -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
  animation: ball-spin-fade-loader 1s -0.24s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(8) {
  top: 17.04545px;
  left: -17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
  -webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
  -moz-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
  -ms-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
  -o-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
  animation: ball-spin-fade-loader 1s -0.12s infinite linear;
}
.ball-spin-fade-loader > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
}
@-webkit-keyframes ball-spin-loader {
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
.ball-spin-loader {
  position: relative;
}
.ball-spin-loader > span:nth-child(1) {
  top: 45px;
  left: 0;
  -webkit-animation: ball-spin-loader 2s 0.9s infinite linear;
  -webkit-animation: ball-spin-loader 2s 0.9s infinite linear;
  -moz-animation: ball-spin-loader 2s 0.9s infinite linear;
  -ms-animation: ball-spin-loader 2s 0.9s infinite linear;
  -o-animation: ball-spin-loader 2s 0.9s infinite linear;
  animation: ball-spin-loader 2s 0.9s infinite linear;
}
.ball-spin-loader > span:nth-child(2) {
  top: 30.68182px;
  left: 30.68182px;
  -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
  -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
  -moz-animation: ball-spin-loader 2s 1.8s infinite linear;
  -ms-animation: ball-spin-loader 2s 1.8s infinite linear;
  -o-animation: ball-spin-loader 2s 1.8s infinite linear;
  animation: ball-spin-loader 2s 1.8s infinite linear;
}
.ball-spin-loader > span:nth-child(3) {
  top: 0;
  left: 45px;
  -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
  -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
  -moz-animation: ball-spin-loader 2s 2.7s infinite linear;
  -ms-animation: ball-spin-loader 2s 2.7s infinite linear;
  -o-animation: ball-spin-loader 2s 2.7s infinite linear;
  animation: ball-spin-loader 2s 2.7s infinite linear;
}
.ball-spin-loader > span:nth-child(4) {
  top: -30.68182px;
  left: 30.68182px;
  -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
  -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
  -moz-animation: ball-spin-loader 2s 3.6s infinite linear;
  -ms-animation: ball-spin-loader 2s 3.6s infinite linear;
  -o-animation: ball-spin-loader 2s 3.6s infinite linear;
  animation: ball-spin-loader 2s 3.6s infinite linear;
}
.ball-spin-loader > span:nth-child(5) {
  top: -45px;
  left: 0;
  -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
  -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
  -moz-animation: ball-spin-loader 2s 4.5s infinite linear;
  -ms-animation: ball-spin-loader 2s 4.5s infinite linear;
  -o-animation: ball-spin-loader 2s 4.5s infinite linear;
  animation: ball-spin-loader 2s 4.5s infinite linear;
}
.ball-spin-loader > span:nth-child(6) {
  top: -30.68182px;
  left: -30.68182px;
  -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
  -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
  -moz-animation: ball-spin-loader 2s 5.4s infinite linear;
  -ms-animation: ball-spin-loader 2s 5.4s infinite linear;
  -o-animation: ball-spin-loader 2s 5.4s infinite linear;
  animation: ball-spin-loader 2s 5.4s infinite linear;
}
.ball-spin-loader > span:nth-child(7) {
  top: 0;
  left: -45px;
  -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
  -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
  -moz-animation: ball-spin-loader 2s 6.3s infinite linear;
  -ms-animation: ball-spin-loader 2s 6.3s infinite linear;
  -o-animation: ball-spin-loader 2s 6.3s infinite linear;
  animation: ball-spin-loader 2s 6.3s infinite linear;
}
.ball-spin-loader > span:nth-child(8) {
  top: 30.68182px;
  left: -30.68182px;
  -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
  -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
  -moz-animation: ball-spin-loader 2s 7.2s infinite linear;
  -ms-animation: ball-spin-loader 2s 7.2s infinite linear;
  -o-animation: ball-spin-loader 2s 7.2s infinite linear;
  animation: ball-spin-loader 2s 7.2s infinite linear;
}
.ball-spin-loader > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: #008000;
}
@-webkit-keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  66% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  66% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.ball-zig-zag {
  position: relative;
  -webkit-transform: translate(-15px, -15px);
  transform: translate(-15px, -15px);
}
.ball-zig-zag > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  margin-left: 15px;
  top: 4px;
  left: -7px;
}
.ball-zig-zag > div:first-child {
  -webkit-animation: ball-zig 0.7s 0s infinite linear;
  -webkit-animation: ball-zig 0.7s 0s infinite linear;
  -moz-animation: ball-zig 0.7s 0s infinite linear;
  -ms-animation: ball-zig 0.7s 0s infinite linear;
  -o-animation: ball-zig 0.7s 0s infinite linear;
  animation: ball-zig 0.7s 0s infinite linear;
}
.ball-zig-zag > div:last-child {
  -webkit-animation: ball-zag 0.7s 0s infinite linear;
  -webkit-animation: ball-zag 0.7s 0s infinite linear;
  -moz-animation: ball-zag 0.7s 0s infinite linear;
  -ms-animation: ball-zag 0.7s 0s infinite linear;
  -o-animation: ball-zag 0.7s 0s infinite linear;
  animation: ball-zag 0.7s 0s infinite linear;
}
@-webkit-keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  34% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  84% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  34% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  84% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.ball-zig-zag-deflect {
  position: relative;
  -webkit-transform: translate(-15px, -15px);
  transform: translate(-15px, -15px);
}
.ball-zig-zag-deflect > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  margin-left: 15px;
  top: 4px;
  left: -7px;
}
.ball-zig-zag-deflect > div:first-child {
  -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
  -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
  -moz-animation: ball-zig-deflect 1.5s 0s infinite linear;
  -ms-animation: ball-zig-deflect 1.5s 0s infinite linear;
  -o-animation: ball-zig-deflect 1.5s 0s infinite linear;
  animation: ball-zig-deflect 1.5s 0s infinite linear;
}
.ball-zig-zag-deflect > div:last-child {
  -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
  -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
  -moz-animation: ball-zag-deflect 1.5s 0s infinite linear;
  -ms-animation: ball-zag-deflect 1.5s 0s infinite linear;
  -o-animation: ball-zag-deflect 1.5s 0s infinite linear;
  animation: ball-zag-deflect 1.5s 0s infinite linear;
}
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -moz-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -ms-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  -o-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.line-scale > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}
@-webkit-keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.line-scale-party > div:nth-child(1) {
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
  -webkit-animation-duration: 1.23s;
  animation-duration: 1.23s;
}
.line-scale-party > div:nth-child(2) {
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
}
.line-scale-party > div:nth-child(3) {
  -webkit-animation-delay: 0.09s;
  animation-delay: 0.09s;
  -webkit-animation-duration: 0.39s;
  animation-duration: 0.39s;
}
.line-scale-party > div:nth-child(4) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-duration: 0.59s;
  animation-duration: 0.59s;
}
.line-scale-party > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation-name: line-scale-party;
  animation-name: line-scale-party;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
.line-scale-pulse-out > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -moz-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -ms-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -o-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.line-scale-pulse-out > div:nth-child(2),
.line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;
}
.line-scale-pulse-out > div:nth-child(1),
.line-scale-pulse-out > div:nth-child(5) {
  -webkit-animation-delay: -0.2s !important;
  animation-delay: -0.2s !important;
}
@-webkit-keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3);
  }
  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
.line-scale-pulse-out-rapid > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
  -webkit-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
  -moz-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
  -ms-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
  -o-animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
  animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
}
.line-scale-pulse-out-rapid > div:nth-child(2),
.line-scale-pulse-out-rapid > div:nth-child(4) {
  -webkit-animation-delay: -0.25s !important;
  animation-delay: -0.25s !important;
}
.line-scale-pulse-out-rapid > div:nth-child(1),
.line-scale-pulse-out-rapid > div:nth-child(5) {
  -webkit-animation-delay: 0s !important;
  animation-delay: 0s !important;
}
@-webkit-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
.line-spin-fade-loader {
  position: relative;
  top: -10px;
  left: -4px;
}
.line-spin-fade-loader > div:nth-child(1) {
  top: 20px;
  left: 0;
  -webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.84s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(2) {
  top: 13.63636px;
  left: 13.63636px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.72s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(3) {
  top: 0;
  left: 20px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.6s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(4) {
  top: -13.63636px;
  left: 13.63636px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.48s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(5) {
  top: -20px;
  left: 0;
  -webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.36s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(6) {
  top: -13.63636px;
  left: -13.63636px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.24s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(7) {
  top: 0;
  left: -20px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s -0.12s infinite ease-in-out;
}
.line-spin-fade-loader > div:nth-child(8) {
  top: 13.63636px;
  left: -13.63636px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
  -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
  -moz-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
  -ms-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
  -o-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
  animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
}
.line-spin-fade-loader > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  width: 5px;
  height: 15px;
}
@-webkit-keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
.triangle-skew-spin > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
  -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -moz-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -ms-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -o-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
@-webkit-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
.square-spin > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -moz-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -ms-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -o-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
@-webkit-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-webkit-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-webkit-keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}
.pacman {
  position: relative;
}
.pacman > div:nth-child(2) {
  -webkit-animation: pacman-balls 1s -0.99s infinite linear;
  -webkit-animation: pacman-balls 1s -0.99s infinite linear;
  -moz-animation: pacman-balls 1s -0.99s infinite linear;
  -ms-animation: pacman-balls 1s -0.99s infinite linear;
  -o-animation: pacman-balls 1s -0.99s infinite linear;
  animation: pacman-balls 1s -0.99s infinite linear;
}
.pacman > div:nth-child(3) {
  -webkit-animation: pacman-balls 1s -0.66s infinite linear;
  -webkit-animation: pacman-balls 1s -0.66s infinite linear;
  -moz-animation: pacman-balls 1s -0.66s infinite linear;
  -ms-animation: pacman-balls 1s -0.66s infinite linear;
  -o-animation: pacman-balls 1s -0.66s infinite linear;
  animation: pacman-balls 1s -0.66s infinite linear;
}
.pacman > div:nth-child(4) {
  -webkit-animation: pacman-balls 1s -0.33s infinite linear;
  -webkit-animation: pacman-balls 1s -0.33s infinite linear;
  -moz-animation: pacman-balls 1s -0.33s infinite linear;
  -ms-animation: pacman-balls 1s -0.33s infinite linear;
  -o-animation: pacman-balls 1s -0.33s infinite linear;
  animation: pacman-balls 1s -0.33s infinite linear;
}
.pacman > div:nth-child(5) {
  -webkit-animation: pacman-balls 1s 0s infinite linear;
  -webkit-animation: pacman-balls 1s 0s infinite linear;
  -moz-animation: pacman-balls 1s 0s infinite linear;
  -ms-animation: pacman-balls 1s 0s infinite linear;
  -o-animation: pacman-balls 1s 0s infinite linear;
  animation: pacman-balls 1s 0s infinite linear;
}
.pacman > div:first-of-type {
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-top: 25px solid #fff;
  border-left: 25px solid #fff;
  border-bottom: 25px solid #fff;
  border-radius: 25px;
  -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
  -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
  -moz-animation: rotate_pacman_half_up 0.5s 0s infinite;
  -ms-animation: rotate_pacman_half_up 0.5s 0s infinite;
  -o-animation: rotate_pacman_half_up 0.5s 0s infinite;
  animation: rotate_pacman_half_up 0.5s 0s infinite;
  position: relative;
  left: -30px;
}
.pacman > div:nth-child(2) {
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-top: 25px solid #fff;
  border-left: 25px solid #fff;
  border-bottom: 25px solid #fff;
  border-radius: 25px;
  -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
  -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
  -moz-animation: rotate_pacman_half_down 0.5s 0s infinite;
  -ms-animation: rotate_pacman_half_down 0.5s 0s infinite;
  -o-animation: rotate_pacman_half_down 0.5s 0s infinite;
  animation: rotate_pacman_half_down 0.5s 0s infinite;
  margin-top: -50px;
  position: relative;
  left: -30px;
}
.pacman > div:nth-child(3),
.pacman > div:nth-child(4),
.pacman > div:nth-child(5),
.pacman > div:nth-child(6) {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  width: 10px;
  height: 10px;
  position: absolute;
  -webkit-transform: translate(0, -6.25px);
  transform: translate(0, -6.25px);
  top: 25px;
  left: 70px;
}
@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
    transform: translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
    transform: translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
    transform: translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.cube-transition {
  position: relative;
  -webkit-transform: translate(-25px, -25px);
  transform: translate(-25px, -25px);
}
.cube-transition > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  width: 10px;
  height: 10px;
  position: absolute;
  top: -5px;
  left: -5px;
  background-color: #fff;
  -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
  -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
  -moz-animation: cube-transition 1.6s 0s infinite ease-in-out;
  -ms-animation: cube-transition 1.6s 0s infinite ease-in-out;
  -o-animation: cube-transition 1.6s 0s infinite ease-in-out;
  animation: cube-transition 1.6s 0s infinite ease-in-out;
}
.cube-transition > div:last-child {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.semi-circle-spin {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden;
}
.semi-circle-spin > div {
  position: absolute;
  border-width: 0px;
  border-radius: 100%;
  -webkit-animation: spin-rotate 0.6s 0s infinite linear;
  -webkit-animation: spin-rotate 0.6s 0s infinite linear;
  -moz-animation: spin-rotate 0.6s 0s infinite linear;
  -ms-animation: spin-rotate 0.6s 0s infinite linear;
  -o-animation: spin-rotate 0.6s 0s infinite linear;
  animation: spin-rotate 0.6s 0s infinite linear;
  background-image: -webkit-linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%);
  background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%);
  width: 100%;
  height: 100%;
}
@-moz-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  66% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@-o-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@-moz-keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@-o-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@-moz-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
    transform: translate(25px, -50px);
  }
  66% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
    transform: translate(25px, -50px);
  }
  66% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-o-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
    transform: translate(25px, -50px);
  }
  66% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
    transform: translate(25px, -50px);
  }
  66% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-moz-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
  }
  66% {
    -webkit-transform: translate(-25px, 50px);
    transform: translate(-25px, 50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
  }
  66% {
    -webkit-transform: translate(-25px, 50px);
    transform: translate(-25px, 50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-o-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
  }
  66% {
    -webkit-transform: translate(-25px, 50px);
    transform: translate(-25px, 50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
  }
  66% {
    -webkit-transform: translate(-25px, 50px);
    transform: translate(-25px, 50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-moz-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }
  66% {
    -webkit-transform: translate(-25px, -50px);
    transform: translate(-25px, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }
  66% {
    -webkit-transform: translate(-25px, -50px);
    transform: translate(-25px, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-o-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }
  66% {
    -webkit-transform: translate(-25px, -50px);
    transform: translate(-25px, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }
  66% {
    -webkit-transform: translate(-25px, -50px);
    transform: translate(-25px, -50px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}
@-moz-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  75% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  75% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  75% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  75% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  25% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
@-webkit-keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  25% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
@-o-keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  25% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
@keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  25% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}
@-moz-keyframes ball-grid-beat {
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes ball-grid-beat {
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes ball-grid-beat {
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ball-grid-beat {
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes ball-spin-loader {
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes ball-spin-loader {
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes ball-spin-loader {
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ball-spin-loader {
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  66% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  66% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  66% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ball-zig {
  33% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  66% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  66% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  66% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  66% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ball-zag {
  33% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  66% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  34% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  84% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  34% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  84% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  34% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  84% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ball-zig-deflect {
  17% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  34% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(15px, -30px);
    transform: translate(15px, -30px);
  }
  84% {
    -webkit-transform: translate(-15px, -30px);
    transform: translate(-15px, -30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  34% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  84% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  34% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  84% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  34% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  84% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes ball-zag-deflect {
  17% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  34% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  50% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  67% {
    -webkit-transform: translate(-15px, 30px);
    transform: translate(-15px, 30px);
  }
  84% {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-o-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-moz-keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes line-scale-party {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-o-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-moz-keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3);
  }
  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-webkit-keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3);
  }
  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-o-keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3);
  }
  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3);
  }
  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-moz-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@keyframes line-spin-fade-loader {
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@-webkit-keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@-o-keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@keyframes triangle-skew-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@-moz-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@-webkit-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@-o-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}
@-moz-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-webkit-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-o-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-webkit-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-o-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-moz-keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}
@-webkit-keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}
@-o-keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}
@keyframes pacman-balls {
  75% {
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translate(-100px, -6.25px);
    transform: translate(-100px, -6.25px);
  }
}
@-moz-keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
    transform: translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
    transform: translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
    transform: translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
    transform: translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
    transform: translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
    transform: translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-o-keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
    transform: translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
    transform: translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
    transform: translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes cube-transition {
  25% {
    -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
    transform: translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(50px, 50px) rotate(-180deg);
    transform: translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
    transform: translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-moz-keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
 * Cropper.js v0.8.1
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2015-2016 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2016-09-03T04:55:16.458Z
 */
.cropper-container {
  font-size: 0;
  line-height: 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;
}
.cropper-container img {
  display: block;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  image-orientation: 0deg;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.cropper-wrap-box {
  overflow: hidden;
}
.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
}
.cropper-modal {
  opacity: 0.5;
  background-color: #000;
}
.cropper-view-box {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51,153,255,0.75);
}
.cropper-dashed {
  position: absolute;
  display: block;
  opacity: 0.5;
  border: 0 dashed #eee;
}
.cropper-dashed.dashed-h {
  top: 33.33333333%;
  left: 0;
  width: 100%;
  height: 33.33333333%;
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333333%;
  width: 33.33333333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px;
}
.cropper-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  opacity: 0.75;
}
.cropper-center:before,
.cropper-center:after {
  position: absolute;
  display: block;
  content: ' ';
  background-color: #eee;
}
.cropper-center:before {
  top: 0;
  left: -3px;
  width: 7px;
  height: 1px;
}
.cropper-center:after {
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px;
}
.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}
.cropper-face {
  top: 0;
  left: 0;
  background-color: #fff;
}
.cropper-line {
  background-color: #39f;
}
.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize;
}
.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize;
}
.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize;
}
.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize;
}
.cropper-point {
  width: 5px;
  height: 5px;
  opacity: 0.75;
  background-color: #39f;
}
.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize;
}
.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}
.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize;
}
.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize;
}
.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize;
}
.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize;
}
.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize;
}
.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 1;
}
.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: ' ';
  opacity: 0;
  background-color: #39f;
}
@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: 0.75;
  }
}
.cropper-invisible {
  opacity: 0;
}
.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-hide {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}
.cropper-hidden {
  display: none !important;
}
.cropper-move {
  cursor: move;
}
.cropper-crop {
  cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
html {
  overflow: hidden;
  height: 100%;
}
body {
  height: 100%;
  overflow: auto;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  background: #102131;
}
textarea {
  width: 100%;
  resize: none;
  border: none;
  height: 40px;
  font-size: 14px;
  line-height: 24px;
  outline: none;
  font-family: 'Lato';
  box-sizing: border-box;
}
strong {
  font-weight: bold;
}
.rotate45 {
  transform: rotate(45deg);
}
.dev-simulator {
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  width: 400px;
  color: #fff;
  padding: 10px;
  overflow: scroll;
}
.dev-simulator .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.dev-simulator .dev-item {
  margin-bottom: 6px;
}
.dev-simulator .dev-item .dev-btn {
  margin-left: 6px;
  display: inline-block;
  background-color: #00ceb8;
  color: #022047;
  cursor: pointer;
}
.dev-simulator .dev-players {
  margin-top: 30px;
}
.dev-simulator .dev-players .dev-players-col {
  display: inline-block;
  margin-right: 20px;
}
.app-layout {
  height: 100vh;
  background: #fff;
  overflow-y: hidden;
}
.autocomplete-command-item {
  font-size: 13px;
  padding: 0px 15px;
  display: flex;
  align-items: center;
  height: 39px;
  padding-left: 45px;
}
.autocomplete-command-item .name {
  font-weight: bold;
  margin-left: 7px;
}
.autocomplete-command-item .example {
  flex-grow: 1;
  font-size: 11px;
  color: #555;
  font-style: italic;
  padding-left: 5px;
}
.autocomplete-command-item .description {
  font-size: 11px;
  color: #555;
  line-height: 13px;
  margin-left: 10px;
}
.selected .autocomplete-command-item {
  background: rgba(255,255,255,0.05);
}
.autocomplete-mention-item {
  font-size: 13px;
  padding: 0px 15px;
  display: flex;
  align-items: center;
  height: 39px;
  flex-direction: row;
}
.autocomplete-mention-item:hover {
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}
.autocomplete-mention-item .display-name {
  font-weight: bold;
}
.selected .autocomplete-mention-item {
  background: rgba(255,255,255,0.05);
}
.autocomplete-mention-item {
  font-size: 13px;
  padding: 0px 15px;
  display: flex;
  align-items: center;
  height: 39px;
}
.autocomplete-mention-item:hover {
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}
.autocomplete-mention-item .display-name {
  font-weight: bold;
  margin-left: 7px;
}
.selected .autocomplete-mention-item {
  background: rgba(255,255,255,0.05);
}
.autocomplete-player-item {
  font-size: 13px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  height: 39px;
}
.autocomplete-player-item:hover {
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}
.autocomplete-player-item .name {
  margin: 0 10px 0 15px;
  font-weight: bold;
}
.autocomplete-player-item .meta {
  font-size: 11px;
  color: #888;
}
.selected .autocomplete-player-item {
  background: rgba(255,255,255,0.05);
}
.bracket-matchup >.wrapper {
  border-radius: 16px;
  padding: 8px;
  background-color: rgba(58,70,91,0.5) !important;
}
.bracket-matchup >.wrapper >.team-item {
  display: flex;
  flex-direction: row;
  padding-right: 7px;
  align-items: center;
  justify-content: center;
  height: 42px;
}
.bracket-matchup >.wrapper >.team-item .roster-score-and-projection {
  align-items: flex-end;
}
.bracket-matchup >.wrapper >.team-item .avatar-wrapper {
  display: flex;
  flex-grow: 1;
  width: 44px;
  flex-direction: column;
  padding-left: 6px;
  padding-right: 6px;
}
.bracket-matchup >.wrapper >.team-item .team-name {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  white-space: nowrap;
}
.bracket-matchup >.wrapper >.team-item .tbd-possible-opponents {
  font-size: 9px;
  color: #a3bbd3;
  text-align: center;
  margin-top: 3px;
}
.bracket-matchup >.wrapper .header-text {
  font-size: 9px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 2px;
}
.bracket-round {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bracket-round >.header {
  text-align: center;
  font-size: 11px;
  color: #fff;
  padding-left: 10px;
  margin-bottom: 10px;
}
.bracket-round >.header .week {
  font-size: 9px;
  margin-top: 5px;
}
.bracket-round >.round-matchup-item {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 7px;
  display: flex;
  flex-direction: column;
}
.bracket-round >.round-matchup-item .top-connector {
  border-right: 1px solid rgba(58,70,91,0.5);
  border-top: 1px solid rgba(58,70,91,0.5);
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  opacity: 0;
}
.bracket-round >.round-matchup-item .top-connector.show {
  opacity: 1;
}
.bracket-round >.round-matchup-item .bottom-connector {
  border-right: 1px solid rgba(58,70,91,0.5);
  border-bottom: 1px solid rgba(58,70,91,0.5);
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  opacity: 0;
}
.bracket-round >.round-matchup-item .bottom-connector.show {
  opacity: 1;
}
.bracket-round.highlight >.header {
  font-weight: bold;
  color: #a3bbd3;
}
.bracket-round.highlight .bracket-matchup .wrapper {
  border-radius: 16px;
  padding: 8px;
  background: #3a465b !important;
}
.branch-handler {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #68b609;
}
.branch-handler .invite-container {
  background: #fff;
  padding: 25px 40px;
  border-radius: 10px;
  box-shadow: 1px 1px 15px #18202f;
}
.ban-form {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  min-width: 340px !important;
}
.ban-form .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.ban-form .menu-item:hover {
  background: #18202f;
}
.ban-form .channel-settings-body >.ban-days {
  display: flex;
}
.ban-form .channel-settings-body >.ban-days >.day {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 15px 0;
  font-weight: bold;
}
.ban-form .channel-settings-body >.ban-days >.day:hover {
  background: #ffe7e7;
}
.ban-form .channel-settings-body >.ban-days >.day.selected {
  background: #b20000;
  color: #fff;
}
.members-settings .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-bottom: 40px;
}
.members-settings .empty-state >i {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 25px;
}
.members-settings .empty-state >.title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bbb;
}
.members-settings .empty-state >.description {
  font-size: 13px;
  margin-top: 5px;
  color: #ccc;
}
.members-settings .empty-state.paginated-scrollview {
  position: absolute;
  left: 50%;
  top: 50%;
  padding-top: 70px;
  padding-left: 51px;
}
.members-settings .channel-settings-header >div:first-child {
  flex-grow: 0;
}
.members-settings .channel-settings-header .text-input {
  flex-grow: 1;
  margin-left: 25px;
}
.members-settings .channel-settings-header .text-input input {
  box-sizing: border-box;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  background: #eee;
  border-radius: 3px;
}
.members-settings .channel-settings-header .text-input .spinner {
  right: 8px;
}
.members-settings .channel-member-item {
  padding: 10px 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}
.members-settings .channel-member-item i {
  color: #bbb;
}
.members-settings .channel-member-item:hover {
  background: #fff;
}
.members-settings .channel-member-item:hover >.menu {
  opacity: 1;
}
.members-settings .channel-member-item >.meta {
  flex-grow: 1;
  font-size: 14px;
}
.members-settings .channel-member-item >.meta >.name {
  font-weight: bold;
}
.members-settings .channel-member-item >.meta >.role-name {
  font-size: 12px;
  color: #bbb;
  margin-top: 3px;
}
.members-settings .channel-member-item >.menu {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  background: #fefefe;
  align-self: center;
  color: #bbb;
  display: flex;
  opacity: 0;
  font-size: 12px;
}
.members-settings .channel-member-item >.menu >div {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.members-settings .channel-member-item >.menu >div:hover {
  background: #f0f0f0;
}
.channel-alert-preferences {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  max-height: 60vh;
  min-width: 350px !important;
  color: #fff;
}
.channel-alert-preferences .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.channel-alert-preferences .menu-item:hover {
  background: #18202f;
}
.channel-alert-preferences .pref-section >.pref-section-header {
  padding: 20px 25px 10px 25px;
  font-size: 11px;
  font-weight: bold;
  color: #bbb;
  text-transform: uppercase;
}
.channel-alert-preferences .pref-section .pref-item {
  padding: 10px 25px;
}
.channel-header {
  color: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  height: 78px;
  box-sizing: border-box;
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.channel-header .header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}
.channel-header .body-container {
  position: absolute;
  top: 70px;
  z-index: 900;
  width: calc(100% - 40px);
}
.channel-header .name-container {
  flex-grow: 1;
  margin-left: 16px;
}
.channel-header .name-container .name {
  font-size: 16px;
  font-weight: 800;
  font-family: 'Muli';
  line-height: 20px;
}
.channel-header .name-container .description {
  color: #7888a4;
  font-size: 12px;
}
.channel-header .button {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.channel-header .button:hover {
  color: #a3bbd3;
}
.channel-header .button i {
  transition: all 0.1s ease;
}
.channel-header .no-permission {
  font-size: 13px;
  color: #fff;
  margin-bottom: 15px;
}
.channel-header .no-permission i {
  margin-right: 10px;
}
.channel-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 100px);
  border-right: 1px solid #0b1021;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
}
.channel-panel .header {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
}
.channel-panel .topics {
  flex-grow: 1;
  overflow: auto;
}
.channel-panel .default-state-message {
  text-align: center;
  padding: 20px;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.channel-panel >.notification {
  padding: 15px 25px;
  display: flex;
}
.channel-panel >.notification .main {
  flex-grow: 1;
}
.channel-panel >.notification .right {
  margin-left: 20px;
}
.channel-panel .notification-alert.bad {
  min-height: 15px;
}
.channel-settings-container {
  box-shadow: 1px 1px 10px #18202f;
  width: 60vw;
  height: 80vh;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
}
.channel-settings {
  overflow-y: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 480px;
}
.channel-settings .channel-settings-header {
  display: flex;
  padding: 20px 25px;
  align-items: center;
  -webkit-flex: 0 0 24px;
  -ms-flex: 0 0 24px;
  flex: 0 0 24px;
}
.channel-settings .channel-settings-header >.meta {
  flex-grow: 1;
}
.channel-settings .channel-settings-header .title {
  font-weight: bold;
  font-size: 16px;
}
.channel-settings .channel-settings-header .description {
  margin-top: 5px;
  font-size: 12px;
  color: #a3bbd3;
}
.channel-settings .channel-settings-body {
  overflow-y: auto;
}
.channel-settings .channel-settings-body .channel-settings-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  display: flex;
}
.channel-settings .channel-settings-body .channel-settings-empty-state >i {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 25px;
}
.channel-settings .channel-settings-body .channel-settings-empty-state >.title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bbb;
}
.channel-settings .channel-settings-body .channel-settings-empty-state >.description {
  font-size: 13px;
  margin-top: 5px;
  color: #ccc;
}
.channel-settings .channel-settings-body .channel-settings-empty-state >.description {
  padding-bottom: 32px;
}
.channel-settings .channel-settings-footer {
  padding: 20px 25px;
}
.channel-settings .subheader {
  font-size: 11px;
  text-transform: uppercase;
  color: #a3bbd3;
  font-weight: bold;
  margin-bottom: 5px;
}
.channel-form .channel-settings-body {
  color: #666;
  padding: 25px;
  display: flex;
}
.channel-form .channel-settings-body .section {
  margin-bottom: 20px;
}
.channel-form .channel-settings-body .section .checkboxes {
  margin-top: 10px;
}
.channel-form .channel-settings-body .section label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: #bbb;
  margin-bottom: 5px;
}
.channel-form .channel-settings-body .section .custom-radio-group {
  margin-bottom: 5px;
  margin-top: 10px;
}
.channel-form .channel-settings-body .section .custom-radio-group .custom-radio-item {
  margin-bottom: 10px;
}
.channel-form .channel-settings-body .section .sport .custom-radio-group {
  display: flex;
}
.channel-form .channel-settings-body .section .sport .custom-radio-group .custom-radio-item {
  margin-right: 10px;
}
.channel-form .channel-settings-body .section .channel-icon {
  margin-top: 10px;
}
.channel-form .text-input {
  width: 100%;
}
.channel-form .upload {
  display: flex;
}
.channel-form .upload .meta {
  margin-left: 20px;
}
.channel-form .upload .meta .title {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
}
.channel-form .upload .meta .description {
  font-size: 12px;
  color: #bbb;
  margin-top: 5px;
  margin-bottom: 8px;
}
.channel-form .left {
  flex-grow: 2;
}
.channel-form .right {
  flex-grow: 1;
  padding: 0 40px;
}
.invite-settings .invite-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.invite-settings .invite-container .invite-title {
  margin-top: 50px;
  font-weight: bold;
  font-size: 16px;
}
.invite-settings .invite-container .invite-description {
  font-size: 12px;
  color: #a3bbd3;
  margin-top: 5px;
}
.invite-settings .invite-container .invite-link {
  margin-top: 30px;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}
.invite-settings .invite-container .invite-link .invite-url {
  padding: 15px 20px;
  color: #75c525;
  font-weight: bold;
  background: #fff;
}
.invite-settings .invite-container .invite-link .copy {
  display: flex;
  width: 50px;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #ccc;
  cursor: pointer;
}
.invite-settings .invite-container .invite-link .copy:hover {
  background: #eee;
}
.invite-settings .channel-settings-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.members-settings .channel-settings-header >div:first-child {
  flex-grow: 0;
}
.members-settings .channel-settings-header .text-input {
  flex-grow: 1;
  margin-left: 25px;
}
.members-settings .channel-settings-header .text-input input {
  box-sizing: border-box;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  background: #eee;
  border-radius: 3px;
}
.members-settings .channel-settings-header .text-input .spinner {
  right: 8px;
}
.members-settings .channel-member-item {
  padding: 10px 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}
.members-settings .channel-member-item i {
  color: #bbb;
}
.members-settings .channel-member-item:hover {
  background: #18202f;
}
.members-settings .channel-member-item:hover >.menu {
  opacity: 1;
  margin-left: 5px;
}
.members-settings .channel-member-item >.meta {
  flex-grow: 1;
  font-size: 14px;
  margin-left: 15px;
}
.members-settings .channel-member-item >.meta >.name {
  font-weight: bold;
}
.members-settings .channel-member-item >.meta >.role-name {
  font-size: 12px;
  color: #bbb;
  margin-top: 3px;
}
.members-settings .channel-member-item >.menu {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  background: #fefefe;
  align-self: center;
  color: #bbb;
  display: flex;
  opacity: 0;
  font-size: 12px;
}
.members-settings .channel-member-item >.menu >div {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.members-settings .channel-member-item >.menu >div:hover {
  background: #18202f;
}
.set-member-roles {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  width: 300px;
  max-height: 75vh;
}
.set-member-roles .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.set-member-roles .menu-item:hover {
  background: #18202f;
}
.set-member-roles .channel-settings-header >.meta {
  margin-left: 15px;
}
.set-member-roles .channel-settings-body >.member-role-item {
  padding: 15px 25px;
  display: flex;
  cursor: pointer;
}
.set-member-roles .channel-settings-body >.member-role-item:hover {
  background: #18202f;
}
.set-member-roles .channel-settings-body >.member-role-item >.custom-checkbox {
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  margin-right: 10px;
}
.set-member-roles .channel-settings-body >.member-role-item >.meta >.role-name {
  font-weight: bold;
  font-size: 14px;
}
.set-member-roles .channel-settings-body >.member-role-item >.meta >.role-permissions {
  margin-top: 3px;
  font-size: 12px;
  color: #bbb;
  line-height: 1.2;
}
.new-topic-form textarea {
  display: block;
  outline: none;
  border: 1px solid #ccc;
  width: 100%;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 0 10px;
}
.new-topic-form >.footer-container {
  display: flex;
  margin-top: 5px;
  margin-bottom: 15px;
}
.new-topic-form .loader-message {
  font-size: 11px;
  color: #aaa;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.new-topic-form .char-counter {
  font-size: 11px;
  color: #aaa;
  text-align: right;
}
.new-topic-form .error-message {
  border-left: 5px solid #fd0000;
  padding: 15px;
  font-size: 13px;
  line-height: 1.25;
  color: #fd0000;
  background: #ffe5e6;
  font-weight: bold;
  margin-bottom: 15px;
}
.modal-item >.new-topic-form {
  box-shadow: 1px 1px 15px #18202f;
  box-shadow: 1px 1px 10px #18202f;
  width: 60vw;
  height: 80vh;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  width: 300px !important;
  height: 110px !important;
  padding: 20px;
  background: #fff;
  min-height: 110px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}
.topic-type-options .tag-item {
  padding: 15px 25px;
  display: flex;
  cursor: pointer;
}
.topic-type-options .tag-item:hover {
  background: #fff;
}
.topic-type-options .tag-item.selected {
  color: #fff;
}
.topic-type-options .tag-item.selected .description {
  color: #fff !important;
}
.topic-type-options .tag-item .color {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
.topic-type-options .tag-item .meta {
  margin-left: 10px;
}
.topic-type-options .tag-item .meta .title {
  font-weight: bold;
  font-size: 14px;
}
.topic-type-options .tag-item .meta .description {
  font-size: 12px;
  color: #bbb;
  margin-top: 3px;
}
.topic-type-selector {
  position: relative;
  background: #283244;
}
.topic-type-selector .selected-tag-item {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.topic-type-selector .selected-tag-item .color {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}
.topic-type-selector .selected-tag-item .meta {
  margin-left: 0px;
}
.topic-type-selector .selected-tag-item .title {
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 12px 3px 12px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
}
.topic-type-selector >.topic-type-options {
  position: absolute;
  background: #283244;
  border: 1px solid #18202f;
  z-index: 1;
}
.topic-type-selector >.topic-type-options .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.topic-type-selector >.topic-type-options .menu-item:hover {
  background: #18202f;
}
.create-notification-tag {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  width: 300px;
}
.create-notification-tag .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.create-notification-tag .menu-item:hover {
  background: #18202f;
}
.create-notification-tag .text-input {
  width: 100%;
  margin-bottom: 15px;
}
.create-notification-tag .channel-settings-body {
  padding: 20px 25px;
}
.notification-tag-item {
  padding: 15px;
  display: flex;
  cursor: pointer;
}
.notification-tag-item:hover {
  background: #18202f;
}
.notification-tag-item:hover >.menu {
  opacity: 1;
}
.notification-tag-item >.color {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-right: 15px;
  margin-top: 5px;
}
.notification-tag-item >.metadata {
  flex-grow: 1;
}
.notification-tag-item >.metadata >.tag {
  font-size: 11px;
  font-weight: bold;
  color: #bbb;
}
.notification-tag-item >.metadata >.name {
  font-weight: bold;
  font-size: 14px;
  margin: 5px 0;
}
.notification-tag-item >.metadata >.name:first-letter {
  text-transform: capitalize;
}
.notification-tag-item >.metadata >.description {
  font-size: 12px;
  color: #bbb;
}
.notification-tag-item >.metadata >.description:first-letter {
  text-transform: capitalize;
}
.notification-tag-item >.menu {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  background: #fefefe;
  align-self: center;
  color: #bbb;
  display: flex;
  opacity: 0;
  font-size: 12px;
}
.notification-tag-item >.menu >div {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.notification-tag-item >.menu >div:hover {
  background: #18202f;
}
.push-topic-modal {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  min-width: 350px !important;
}
.push-topic-modal .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.push-topic-modal .menu-item:hover {
  background: #18202f;
}
.push-topic-modal .channel-settings-footer .button {
  margin-right: 10px;
}
.create-role {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  width: 200px;
}
.create-role .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.create-role .menu-item:hover {
  background: #18202f;
}
.create-role .text-input {
  width: 100%;
  margin-bottom: 15px;
}
.create-role .channel-settings-body {
  padding: 20px 25px;
}
.role-item {
  padding: 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}
.role-item i {
  color: #bbb;
}
.role-item:hover {
  background: #18202f;
}
.role-item:hover >.menu {
  opacity: 1;
}
.role-item >.role-name {
  flex-grow: 1;
  font-size: 14px;
}
.role-item >.menu {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  background: #18202f;
  align-self: center;
  color: #bbb;
  display: flex;
  opacity: 0;
  font-size: 12px;
}
.role-item >.menu >div {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.role-item >.menu >div:hover {
  background: #18202f;
}
.role-settings .channel-settings-body {
  display: flex;
  height: 100%;
  overflow-y: hidden;
}
.role-settings .channel-settings-body .roles-list {
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #18202f;
  -webkit-flex: 0 0 220px;
  -ms-flex: 0 0 220px;
  flex: 0 0 220px;
}
.role-settings .channel-settings-body .roles-list .selected {
  background: #18202f;
  font-weight: bold;
}
.role-settings .channel-settings-body .permissions-list {
  height: 100%;
  overflow-y: auto;
  flex-grow: 1;
}
.role-settings .channel-settings-body .permissions-list .role-permission-item {
  display: flex;
  padding: 15px;
  cursor: pointer;
}
.role-settings .channel-settings-body .permissions-list .role-permission-item:hover {
  background: #18202f;
}
.role-settings .channel-settings-body .permissions-list .role-permission-item .custom-checkbox {
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  height: 26px;
}
.role-settings .channel-settings-body .permissions-list .role-permission-item >.permission-metadata {
  margin-left: 10px;
}
.role-settings .channel-settings-body .permissions-list .role-permission-item >.permission-metadata >.name {
  font-size: 14px;
}
.role-settings .channel-settings-body .permissions-list .role-permission-item >.permission-metadata >.description {
  font-size: 12px;
  color: #bbb;
  margin-top: 2px;
}
.role-settings .channel-settings-body .subheader-container {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  color: #bbb;
  line-height: 26px;
}
.role-settings .channel-settings-body .subheader-container >.btn {
  cursor: pointer;
}
.role-settings .channel-settings-body .subheader-container >.btn:hover {
  color: #666;
}
.role-settings .channel-settings-body .subheader-container .subheader {
  flex-grow: 1;
  margin-bottom: 0;
}
.tag-player-modal {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  width: 300px !important;
}
.tag-player-modal .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.tag-player-modal .menu-item:hover {
  background: #18202f;
}
.tag-player-modal .panel-empty-state {
  top: 0 !important;
  height: 100% !important;
}
.tag-player-modal .channel-settings-header >div:first-child {
  flex-grow: 0;
}
.tag-player-modal .channel-settings-header .text-input {
  flex-grow: 1;
  margin-left: 25px;
}
.tag-player-modal .channel-settings-header .text-input input {
  box-sizing: border-box;
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  background: #eee;
  border-radius: 3px;
}
.tag-player-modal .channel-settings-header .text-input .spinner {
  right: 8px;
}
.tag-player-modal .channel-settings-body {
  height: 40vh;
}
.tag-player-modal .channel-settings-body .tag-player-item {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  cursor: pointer;
}
.tag-player-modal .channel-settings-body .tag-player-item.selected {
  background: #fff;
}
.tag-player-modal .channel-settings-body .tag-player-item >.meta {
  margin-left: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tag-player-modal .channel-settings-body .tag-player-item >.meta .position {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  font-weight: normal;
  color: #aaa;
}
.tag-player-modal .channel-settings-footer .button {
  margin-right: 10px;
}
.tag-player-modal .channel-settings-footer .button button {
  width: 100px;
}
.topic-item {
  padding: 24px 16px;
  transition: all 0.1s ease;
  border-left: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #0b1021;
  box-sizing: border-box;
  margin: 8px;
}
.topic-item .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.topic-item .beer-button-topic {
  height: 32px;
  width: 80px;
  border-radius: 18px;
  justify-content: center;
  cursor: pointer;
}
.topic-item .circle {
  height: 4px;
  width: 4px;
  border-radius: 2px;
  background-color: #7888a4;
  margin-right: 4px;
}
.topic-item .circle.selected {
  background-color: #4a5870;
}
.topic-item:hover {
  background: rgba(58,70,91,0.25);
  border-radius: 12px;
}
.topic-item:hover .topic-item-menu {
  opacity: 1;
}
.topic-item.selected {
  background: #00ceb8;
  border-radius: 12px;
}
.topic-item.unread .title {
  font-weight: bold;
  opacity: 1;
  color: #fff;
}
.topic-item.unread .title a {
  color: #fff;
  font-weight: bold;
}
.topic-item .topic-item-menu {
  opacity: 0;
}
.topic-item .header-container {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  color: #4a5870;
  position: relative;
  justify-content: space-between;
}
.topic-item .header-container .type {
  text-transform: uppercase;
  font-weight: 900;
  margin-right: 15px;
}
.topic-item .header-container .user {
  margin-left: 2px;
  margin-right: 8px;
}
.topic-item .header-container .user.selected {
  color: #4a5870;
}
.topic-item .header-container .hidden {
  margin-right: 5px;
  font-weight: bold;
}
.topic-item .header-container .hidden i {
  position: absolute;
  bottom: 2px;
  right: 19px;
  font-size: 12px;
}
.topic-item .body-container {
  display: flex;
  margin-top: 8px;
  color: #fff;
}
.topic-item .body-container.selected {
  color: #4a5870;
}
.topic-item .body-container >img {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
  height: 60px;
}
.topic-item .topic-footer {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  color: #7888a4;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.topic-item .topic-footer.selected {
  color: #4a5870;
}
.topic-item .topic-footer .transform {
  transition: all 0.2s ease;
}
.topic-item .topic-footer .transform:hover {
  transform: scale(1.1);
}
.topic-item .topic-footer .footer-text {
  font-size: 12px;
  font-weight: 500px;
}
.topic-item .title {
  font-size: 16px;
  word-break: break-word;
  align-self: center;
  transition: all 0.2s ease;
  line-height: 1.2;
}
.topic-item .title a {
  pointer-events: none;
  text-decoration: none;
  color: #fff;
}
.topic-item .title.selected a {
  color: #022047;
  font-weight: 600;
}
.topic-item .title:first-letter {
  text-transform: capitalize;
}
.topic-item .fa-thumb-tack {
  font-size: 14px;
}
.topic-item-menu {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  background: #283244;
  position: absolute;
  top: 15px;
  right: 15px;
}
.topic-item-menu .btn {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
  color: #626262;
}
.topic-item-menu .btn:hover {
  background: #18202f;
}
.topic-item-menu .btn .fa-plus {
  position: absolute;
  font-size: 8px;
  right: 7px;
  top: 3px;
}
.topic-item-menu .menu {
  color: #fff;
  margin: 4px 0;
}
.topic-item-menu .menu .menu-item:hover {
  background-color: rgba(58,70,91,0.5);
}
.topics {
  padding: 0 32px;
}
.bottom-chat-panel-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: absolute;
  align-items: flex-end;
  flex-direction: row-reverse;
  bottom: 0;
  right: 32px;
  left: 0px;
  pointer-events: none;
  z-index: 8888;
  background-color: transparent;
}
.bottom-chat-panel-container .bottom-chat-panel-wrapper {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  pointer-events: all;
  background-color: transparent;
  display: none;
  width: 480px;
  height: 0px;
}
.bottom-chat-panel-container .bottom-chat-panel-wrapper.open {
  display: block;
  width: 480px;
  height: 548px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
.bottom-chat-panel-container .bottom-chat-panel-wrapper.expand {
  width: 480px;
  height: 548px;
}
.bottom-chat-panel-container .bottom-voice-panel-wrapper {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  pointer-events: all;
  width: 320px;
  background-color: transparent;
  margin-top: 16px;
  display: none;
  height: 0px;
  margin-right: 16px;
}
.bottom-chat-panel-container .bottom-voice-panel-wrapper.open {
  display: block;
  height: 424px;
  width: 320px;
}
.chat-header {
  display: flex;
  flex-direction: row;
  padding: 24px;
  min-height: 63px;
  align-items: center;
  box-sizing: border-box;
  color: #fff;
  border-radius: 24px;
  background-color: #1d2230;
}
.chat-header .circle {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #a3bbd3;
  margin: 0 4px;
}
.chat-header .top-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.chat-header .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.chat-header .row .count {
  font-size: 12px;
  color: #a3bbd3;
}
.chat-header .row .bottom-text {
  font-size: 12px;
  color: #a3bbd3;
}
.chat-header .name-container {
  flex-grow: 1;
}
.chat-header .header-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.chat-header .name {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  margin-top: 12px;
}
.chat-header a {
  text-decoration: none;
  color: #fff;
}
.chat-header .source-link {
  color: #a3bbd3;
  margin-left: 4px;
  font-size: 11px;
  line-height: 12px;
  margin-top: 3px;
  cursor: pointer;
}
.chat-header .last-comment-timestamp {
  color: #a3bbd3;
  font-size: 11px;
  line-height: 12px;
  margin-top: 3px;
}
.chat-header .author {
  font-weight: bold;
  color: #fff;
  font-size: 14px;
  margin-left: 16px;
}
.chat-header .button {
  -webkit-flex: 0 0 24px;
  -ms-flex: 0 0 24px;
  flex: 0 0 24px;
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  text-align: center;
}
.chat-header .button:hover {
  color: #a3bbd3;
}
.chat-header .bottom-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  height: 24px;
  margin-top: 8px;
}
.chat-input {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.chat-input .autocomplete-container {
  border-bottom: 1px solid #4b576b;
}
.chat-input .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.chat-input .reply-header {
  display: flex;
  flex-direction: row;
  position: absolute;
  align-items: center;
  z-index: 20;
  top: -48px;
  height: 48px;
  max-height: 48px;
  width: 100%;
  justify-content: space-between;
  background-color: #2d3649;
  margin-right: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.chat-input .reply-header .cancel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  cursor: pointer;
}
.chat-input .reply-header .reply {
  display: flex;
  flex-direction: column;
  border-left: 4px solid #a3bbd3;
  padding: 8px;
  height: 48px;
  max-height: 48px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  box-sizing: border-box;
}
.chat-input .reply-header .reply .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.chat-input .reply-header .reply .reply-text {
  color: #fff;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 14px;
  margin-top: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.chat-input .reply-header .reply .username {
  font-size: 9px;
  font-family: 'Poppins';
  line-height: 10px;
  color: #a3bbd3;
  font-weight: 600;
}
.chat-input .input-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid #3a465b;
}
.chat-input .input-container .button-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background-color: #1d2230;
}
.chat-input .input-container .icon {
  font-size: 20px;
  color: #ddd;
  position: absolute;
  top: 8px;
  left: 12px;
}
.chat-input .input-container .text-area-wrapper {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  border-radius: 32px;
  background-color: #181c28;
  margin: 0 8px;
}
.chat-input .input-container .text-area-wrapper textarea {
  background: transparent;
  caret-color: #ddd;
  color: #fff;
  -ms-overflow-style: none;
}
.chat-input .input-container .text-area-wrapper textarea::-webkit-scrollbar {
  display: none;
}
.chat-input .sup-button {
  display: none;
}
.chat-menu {
  cursor: pointer;
}
.chat-menu .menu-items {
  background: #283244;
  border: 1px solid #18202f;
  background: #283245;
}
.chat-menu .menu-items .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.chat-menu .menu-items .menu-item:hover {
  background: #18202f;
}
.chat-menu .menu-items .menu-item {
  padding: 10px 25px;
}
.chat-menu .menu-items .menu-item:hover {
  background: #022047;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle {
  height: 50vh;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle .chat-panel-menu {
  display: flex;
  padding: 0 20px;
  height: 35px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle .chat-panel-menu .menu-item {
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle .chat-panel-menu .menu-item .avatar {
  margin-right: 5px;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle .chat-panel-menu .menu-item.selected {
  background: #555;
  color: #fff;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle .chat-panel {
  height: calc(50vh - 45px) !important;
}
.draftboard-page .bottom-container .chat .chat-panel-toggle .draft-roster {
  height: calc(50vh - 45px);
}
.chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 14px;
}
.chat-panel.league-chat-panel {
  padding: 0px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.chat-panel .header-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.chat-panel .body-container {
  display: flex;
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
  height: 100%;
}
.chat-panel .body-container .jump-to-last-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 10px;
  z-index: 999;
  left: calc(50% - 80px);
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  cursor: pointer;
  box-sizing: border-box;
}
.chat-panel .body-container .cancel-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 20px;
  background-color: #2db8a8;
  margin-left: 14px;
  box-sizing: border-box;
  border-radius: 15px;
}
.chat-panel .body-container .cancel-jump:hover {
  opacity: 0.7;
}
.chat-panel .body-container .main-panel {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.chat-panel .body-container .main-panel .panel-loader {
  height: 100%;
}
.chat-panel .body-container .side-panel {
  -webkit-flex: 0 0 0px;
  -ms-flex: 0 0 0px;
  flex: 0 0 0px;
  width: 200px;
  transition: all 0.15s ease;
  overflow-x: hidden;
}
.chat-panel .body-container .side-panel.show {
  -webkit-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  border-left: 1px solid #eee;
}
.chat-panel .footer-container >.notification {
  padding: 15px 25px;
  border-radius: 5px;
  display: flex;
}
.chat-panel .footer-container >.notification .main {
  flex-grow: 1;
}
.chat-panel .footer-container >.notification .right {
  margin-left: 20px;
}
.chat-panel .no-topic-selected-state {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
}
.chat-panel .loading-msg {
  text-align: center;
  color: #999;
  font-size: 11px;
  padding: 10px;
  letter-spacing: 0.2px;
}
.chat-panel .typing-indicator-container {
  display: flex;
  align-items: center;
  position: relative;
}
.chat-panel .typing-indicator-container .typing-indicator {
  margin: 5px 0 5px 20px;
}
.chat-panel .typing-indicator-container .typing-indicator-text {
  font-size: 12px;
  color: #999;
  margin-left: 7px;
  position: relative;
  top: 0px;
}
.chat-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.chat-panel-empty >i {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 25px;
}
.chat-panel-empty >.title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bbb;
}
.chat-panel-empty >.description {
  font-size: 13px;
  margin-top: 5px;
  color: #ccc;
}
.chat-panel-empty >.description {
  padding-bottom: 60px;
}
.chat-panel-container {
  height: 100%;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.chat-panel-container .topic {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 16px;
  height: 100%;
  padding-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.chat-panel-container .dm {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 16px;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 16px;
}
.theme-light .chat-panel {
  background-color: #fff;
}
.theme-light .chat-panel .comment-group {
  color: #022047;
}
.theme-light .chat-panel .comment-group .comment-item-container .text-container {
  color: #022047;
}
.theme-light .chat-panel .comment-group .comment-item-container .text-container:hover {
  background: #f1f4f6;
}
.theme-light .chat-panel .comment-group .comment-item-container .text-container.pinned {
  background: #ededed;
}
.theme-light .chat-panel .comment-group .name.self {
  background: #f4ffbb;
}
.theme-light .chat-panel .chat-default-copy-item {
  color: #022047;
}
.theme-light .chat-input {
  color: #394354;
  background: #fff;
}
.theme-light .chat-input .input-container textarea {
  caret-color: #022047;
  color: #022047;
}
.theme-light .chat-input .input-container .text-area-wrapper {
  background-color: rgba(163,187,211,0.2);
}
.chat-default-copy-item {
  padding: 40px 75px;
  color: #fff;
}
.chat-default-copy-item .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.chat-default-copy-item .description {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 20px;
}
.comment-group {
  padding: 8px 16px;
  font-size: 14px;
  padding-bottom: 10px;
  display: flex;
  color: #fff;
  overflow: hidden;
}
.comment-group .comment-item-container.highlight {
  background: #5e6d14;
}
.comment-group .comment-item-faded {
  opacity: 0.5;
}
.comment-group .avatar {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
}
.comment-group .avatar.league {
  margin-right: 0;
}
.comment-group .avatar.league svg {
  position: relative;
  left: 6px;
}
.comment-group .role {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 10px;
  color: #3498db;
}
.comment-group .content-container {
  display: inline-block;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.comment-group .name-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 3px;
}
.comment-group .name {
  font-weight: bold;
  margin-right: 10px;
}
.comment-group .name.self {
  background: #5e6d14;
}
.comment-group .timestamp {
  font-size: 12px;
  color: #ccc;
}
.comment-group .text-container {
  margin-bottom: 10px;
  line-height: 1.35;
  color: #fff;
  word-break: break-word;
  position: relative;
  padding: 5px 0;
  margin: 0;
}
.comment-group .text-container pre {
  white-space: pre-wrap;
}
.comment-group .text-container .error {
  font-size: 12px;
  font-weight: bold;
  color: #e91e63;
  letter-spacing: 0.4px;
}
.comment-group .text-container.sending .message-text {
  opacity: 0.5;
}
.comment-group .text-container.pinned {
  border-left: 2px solid #019494;
  padding: 6px 8px;
}
.comment-group .text-container .pinned-header {
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.comment-group .text-container .pinned-header .pinned-message {
  font-size: 9px;
  color: #00ceb8;
  font-family: 'Poppins', sans-serif;
  line-height: 10px;
  font-weight: 600;
}
.comment-group .text-container .mention {
  font-weight: bold;
  color: #3498db;
}
.comment-group .text-container .hashtag {
  color: #3498db;
  font-weight: bold;
}
.comment-group .text-container .hashtag .hashtag-meta {
  font-size: 10px;
  font-weight: normal;
}
.comment-group .text-container .edit {
  font-size: 10px;
  color: #ccc;
  display: inline-block;
  padding-left: 5px;
}
.comment-group .text-container .comment-item-menu-container {
  position: absolute;
  right: 0;
  top: 0px;
  display: none;
}
.comment-group .text-container:hover {
  background: transparent;
}
.comment-group .text-container:hover .comment-item-menu-container {
  display: block;
}
.comment-group .text-container .comment-reactions-container {
  display: inline-block;
}
.comment-group .text-container .comment-reactions-container .reaction-menu {
  padding: 3px 0 !important;
}
.comment-group .text-container .comment-reactions-container .reaction-menu .reaction {
  height: 25px;
  position: relative;
  justify-content: flex-start;
}
.comment-group .text-container .comment-reactions-container .reaction-menu .reaction img {
  max-height: 20px;
}
.comment-group .text-container .comment-reactions-container .reaction-menu .reaction.reacted {
  background: none;
}
.comment-group .text-container .comment-reactions-container .reaction-menu .reaction .reaction-count {
  font-size: 10px;
  color: #aaa;
  padding-left: 2px;
  font-weight: bold;
  position: absolute;
  left: 18px;
}
.comment-group .reply {
  font-family: 'Inter';
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  padding: 8px;
}
.comment-item-menu {
  border-radius: 4px;
  display: flex;
  background-color: #1d2230;
}
.comment-item-menu .btn {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.comment-item-menu .btn:hover {
  background: rgba(58,70,91,0.5);
}
.comment-item-menu .btn .fa-plus {
  position: absolute;
  font-size: 8px;
  right: 7px;
  top: 3px;
}
.comment-item-menu .context-menu .menu {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.comment-item-menu .context-menu .menu .menu-item:hover {
  background-color: rgba(58,70,91,0.5);
}
.reaction-item {
  display: flex;
  margin-right: 4px;
  padding: 2px 7px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fbfbfb;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
}
.reaction-item:hover {
  background: #333;
}
.reaction-item img {
  display: block;
  width: 20px;
  height: 20px;
}
.reaction-item .reaction-count {
  margin-left: 3px;
  font-size: 12px;
  font-weight: bold;
}
.reaction-item.selected {
  background: #333;
}
.reaction-item.selected .reaction-count {
  color: #fff;
}
.reaction-members {
  background: #333;
  width: 80px;
  padding: 0px 8px;
  color: #fff;
  font-size: 12px;
  position: relative;
}
.reaction-members .members {
  padding: 5px 0;
  max-height: 150px;
  overflow-y: auto;
}
.reaction-members .user {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 64px;
  padding: 3px 0;
  font-weight: bold;
  display: flex;
}
.reaction-members .user .avatar {
  -webkit-flex: 0 0 15px;
  -ms-flex: 0 0 15px;
  flex: 0 0 15px;
  margin-right: 7px !important;
  font-size: 7px !important;
}
.reaction-members .arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: #333;
  bottom: -3px;
}
.reaction-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 8px;
  max-width: 240px;
}
.reaction-menu .reaction {
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.reaction-menu .reaction.reacted {
  background: #333;
}
.reaction-menu .reaction img {
  max-height: 24px;
  transition: all 0.2s ease;
}
.reaction-menu .reaction:hover img {
  transform: scale(1.5);
}
.reaction-menu .reaction.hide {
  transform: scale(0);
  width: 0px !important;
}
.reaction-menu:hover .reaction.hide {
  transform: scale(1);
  width: 40px !important;
}
.reaction-menu .reaction-members-container {
  position: absolute;
  bottom: 30px;
  left: -38px;
}
.edit-comment-form .chat-input .input-container {
  padding: 0;
}
.edit-comment-form .chat-input .input-container .text-area-wrapper {
  padding: 8px 12px 8px 0;
}
.edit-comment-form .chat-input textarea {
  width: 100%;
  padding-left: 10px;
}
.edit-comment-form .cancel-btn {
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
}
.embed-8ball {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: inline-block;
  margin-top: 10px;
}
.embed-8ball .ball-text {
  position: absolute;
  top: 113px;
  right: 132px;
  width: 51px;
  height: 50px;
  text-align: center;
  color: #fff;
  font-size: 7px;
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}
.embed-8ball .ball-text.show {
  opacity: 1;
}
.embed-draft-link {
  max-width: 400px;
  border-left: 5px solid #eee;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-draft-link .header-text {
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.embed-draft-link .name {
  font-size: 16px;
}
.embed-draft-link .description {
  margin-top: 2px;
  font-size: 12px;
  margin-bottom: 13px;
}
.embed-draft-link .link {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: #58a7ff;
  cursor: pointer;
}
.embed-draft-link .link i {
  margin-right: 5px;
}
.draftboard-modal {
  width: 70vw;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  padding: 20px;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
}
.draftboard-modal .draft-board {
  width: auto !important;
  overflow-y: hidden;
}
.embed-draft-order {
  max-width: 400px;
  border-left: 5px solid #eee;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-draft-order .title {
  font-weight: bold;
  margin-bottom: 3px;
}
.embed-draft-order .title:first-letter {
  text-transform: capitalize;
}
.embed-draft-order .draft-order-item {
  font-size: 12px;
  display: flex;
  align-items: center;
}
.embed-draft-order .draft-order-item .order {
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
}
.embed-draft-order .draft-order-item .draft-order-item-row {
  display: flex;
  align-items: center;
  height: 30px;
}
.embed-draft-order .draft-order-item .draft-order-item-row .name {
  font-weight: bold;
  font-size: 14px;
}
.embed-fortune {
  display: inline-block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 10px;
}
.embed-fortune .fortune-text {
  position: absolute;
  top: 140px;
  left: 88px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: bold;
  width: 116px;
  overflow: hidden;
  -webkit-animation: marquee 12s linear infinite;
  -moz-animation: marquee 12s linear infinite;
  -ms-animation: marquee 12s linear infinite;
  -o-animation: marquee 12s linear infinite;
  animation: marquee 12s linear infinite;
}
@-moz-keyframes marquee {
  0% {
    text-indent: 50%;
  }
  100% {
    text-indent: -105%;
  }
}
@-webkit-keyframes marquee {
  0% {
    text-indent: 50%;
  }
  100% {
    text-indent: -105%;
  }
}
@-o-keyframes marquee {
  0% {
    text-indent: 50%;
  }
  100% {
    text-indent: -105%;
  }
}
@keyframes marquee {
  0% {
    text-indent: 50%;
  }
  100% {
    text-indent: -105%;
  }
}
.embed-gif {
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
}
.embed-invite-link {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  border: 1px solid #efefef;
  border-left: 5px solid #eee;
  border-radius: 5px;
}
.embed-invite-link .validation-message-block {
  margin-bottom: 0;
}
.embed-invite-link .body {
  display: flex;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
}
.embed-invite-link .sport {
  display: none !important;
}
.embed-invite-link .meta {
  margin-left: 20px;
  flex-grow: 1;
}
.embed-invite-link .meta .header-text {
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.embed-invite-link .meta .name {
  font-size: 16px;
}
.embed-invite-link .meta .description {
  margin-top: 2px;
  font-weight: 300;
}
.embed-invite-link .actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-invite-link .actions .button {
  border-radius: 0;
  width: 100%;
}
.embed-invite-link .actions .button button {
  width: 100%;
  border-radius: 0;
}
.embed-invite-link .actions i {
  font-size: 14px;
  margin-right: 4px;
  color: #75c525;
}
.embed-invite-link .actions .subbed-text {
  font-size: 10px;
  font-weight: bold;
  color: #ccc;
  text-transform: uppercase;
  padding: 10px;
  border-top: 1px solid #efefef;
  width: 100%;
  text-align: center;
}
.embed-league-report {
  margin-top: 12px;
}
.embed-team-name {
  margin-top: 5px;
  padding-left: 15px;
  border-left: 5px solid #eee;
}
.embed-team-name >.team-name {
  font-size: 13px;
  padding: 4px 0px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.embed-league-transaction {
  max-width: 300px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  border-left: 5px solid #eee;
  padding-left: 15px;
}
.embed-league-transaction .transaction-body {
  display: flex;
  flex-direction: row;
}
.embed-league-transaction .transaction-body .bid-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  width: 120px;
}
.embed-league-transaction .transaction-body .bid-container .bid-button {
  min-width: 46px;
  height: 46px;
  border-radius: 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
  padding: 0 8px;
  box-sizing: border-box;
}
.embed-league-transaction .transaction-body .bid-container .bid-button .bid-button-text {
  font-size: 15px;
  color: #555;
  font-weight: bold;
}
.embed-league-transaction .transaction-body .bid-container .bid-button .bid-button-sub-text {
  font-size: 11px;
  color: #999;
  position: relative;
  top: -2px;
}
.embed-league-transaction .transaction-body .bid-container .total-bids {
  margin-top: 4px;
  color: #999;
  text-decoration: underline;
  font-size: 12px;
}
.embed-league-transaction .actions-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.embed-league-transaction .transaction-player {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.embed-league-transaction .transaction-player .avatar-player {
  margin-right: 6px;
}
.embed-league-transaction .action {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-league-transaction .action i {
  font-size: 14px;
  font-weight: bold;
}
.embed-league-transaction .action .fa-plus {
  color: #00ceb8;
}
.embed-league-transaction .action .fa-minus {
  color: #ff2a6d;
}
.embed-league-transaction .player-image {
  width: 50px;
  height: 40px;
  border-radius: 4px;
  background: #ccc;
  margin-right: 5px;
}
.embed-league-transaction .header-text {
  margin-bottom: 10px;
}
.embed-league-transaction .label {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}
.embed-league-transaction .section {
  margin-top: 10px;
}
.embed-league-transaction .validation-message-block {
  margin-bottom: 0;
}
.embed-league-transaction .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.embed-league-transaction .name {
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}
.embed-league-transaction .description {
  margin-top: 2px;
  font-size: 12px;
  color: #fff;
}
.embed-league-transaction .actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-league-transaction .actions .button {
  border-radius: 0;
  width: 100%;
}
.embed-league-transaction .actions .button button {
  width: 100%;
  border-radius: 0;
}
.embed-league-transaction .actions i {
  font-size: 14px;
  margin-right: 4px;
  color: #75c525;
}
.embed-league-transaction .actions .subbed-text {
  font-size: 10px;
  font-weight: bold;
  color: #ccc;
  text-transform: uppercase;
  padding: 10px;
  border-top: 1px solid #efefef;
  width: 100%;
  text-align: center;
}
.embed-league-transaction .sys-message-pending {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.trade-list-item-attachment-wrapper {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgba(58,70,91,0.2);
  position: relative;
  max-height: 220px;
  height: 220px;
  width: 300px;
  max-width: 300px;
  margin-top: 18px;
}
.embed-photo .embed-photo-item {
  background: #eee;
  border-radius: 14px;
}
.embed-player-nickname-item {
  margin-top: 5px;
  padding-left: 15px;
  border-left: 5px solid #eee;
}
.embed-player-nickname-item >.nickname-change-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
}
.embed-player-nickname-item >.nickname-change-item .position {
  font-size: 10px;
}
.embed-player-nickname-item >.nickname-change-item .nickname {
  font-weight: bold;
  margin-left: 6px;
}
.embed-player-nickname-item >.nickname-change-item .player {
  margin-left: 6px;
}
.embed-player-nickname-item >.nickname-change-item .player .fa-caret-right {
  margin-left: 6px;
}
.embed-poll {
  border-left: 5px solid #eee;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-poll .prompt {
  font-weight: bold;
  margin-bottom: 3px;
}
.embed-poll .prompt:first-letter {
  text-transform: capitalize;
}
.embed-poll .poll-type {
  font-size: 10px;
  color: #bbb;
  letter-spacing: 0.3px;
  margin-bottom: 13px;
}
.embed-poll .poll-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  pointer-events: auto;
}
.embed-poll .poll-item .custom-radio {
  display: block;
  width: 30px;
  height: 26px;
  border: 1px solid #aaa;
  border-radius: 50%;
  position: relative;
  top: 1px;
}
.embed-poll .poll-item input[type=radio] {
  display: none;
}
.embed-poll .poll-item input[type=checkbox] {
  display: none;
}
.embed-poll .poll-item input[type=radio]:checked + label .custom-radio {
  background: #58a7ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-poll .poll-item input[type=radio]:checked + label .custom-radio .checkmark::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}
.embed-poll .poll-item input[type=radio] + label .custom-radio {
  transition: all 0.3s ease;
}
.embed-poll .poll-item input[type=checkbox]:checked + label .custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-poll .poll-item input[type=checkbox]:checked + label .custom-checkbox .checkmark {
  transform: rotate(45deg) scaleX(-1);
}
.embed-poll .poll-item input[type=checkbox]:checked + label .custom-checkbox .checkmark::before {
  content: 'L';
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 24px;
  position: relative;
  top: -1px;
}
.embed-poll .poll-item label {
  display: flex;
  flex-direction: row;
  width: 100%;
  cursor: pointer;
}
.embed-poll .poll-item label:hover .poll-text {
  font-weight: bold;
}
.embed-poll .poll-item label:hover .custom-checkbox {
  border-color: #2196f3 !important;
}
.embed-poll .poll-item label .poll-body-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.embed-poll .poll-item label .poll-body-container .poll-text-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.embed-poll .poll-item label .poll-body-container .poll-text-container .poll-text {
  flex-grow: 1;
}
.embed-poll .poll-item label .poll-body-container .poll-text-container .num-poll-votes {
  color: #ddd;
  font-size: 13px;
}
.embed-poll .poll-item label .poll-body-container .vote-result-bar-indicator {
  height: 2px;
  background: #eee;
  width: 100%;
}
.embed-poll .poll-item label .poll-body-container .vote-result-bar-indicator .vote-result-bar-indicator-fill {
  display: block;
  height: 2px;
  transition: width 0.1s linear;
}
.embed-poll .poll-item .vote-result-vote-count {
  align-items: center;
  aspect-ratio: 1;
  background-color: #181c28;
  border-radius: 20px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-basis: 40px;
  font-size: 10px;
  height: 40px;
  justify-content: center;
  line-height: 11px;
  margin-left: 16px;
  padding: 2px;
  text-align: center;
}
.radio-container {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row;
  align-items: center;
}
.radio-container .label-container {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.radio-container .label-container .radio {
  -webkit-flex: 0 0 28px;
  -ms-flex: 0 0 28px;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 14px;
  border: solid 1px #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.radio-container .label-container .radio .radio-selected {
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background-color: #022047;
}
.radio-container .label-container .container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.radio-container .label-container .container .text-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
.radio-container .label-container .container .text-container .text-style {
  font-size: 13;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-grow: 1;
}
.radio-container .label-container .container .vote-result-bar-indicator {
  display: block;
  height: 2px;
  background: #eee;
  width: 100%;
}
.radio-container .label-container .container .vote-result-bar-indicator .vote-result-bar-indicator-fill {
  display: block;
  height: 2px;
  transition: width 0.1s linear;
}
.radio-container .vote-result-vote-count {
  align-items: center;
  aspect-ratio: 1;
  background-color: #181c28;
  border-radius: 20px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  font-size: 10px;
  height: 40px;
  justify-content: center;
  line-height: 11px;
  margin-left: 16px;
  padding: 2px;
  text-align: center;
}
.embed-reply {
  display: flex;
  flex-direction: column;
  background-color: rgba(58,70,91,0.2);
  border-left: 4px solid #a3bbd3;
  padding: 8px;
  height: 48px;
  max-height: 48px;
  margin-bottom: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.embed-reply .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-reply .reply-text {
  color: #fff;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 14px;
  margin-top: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.embed-reply .username {
  font-size: 9px;
  font-family: 'Poppins';
  line-height: 10px;
  color: #a3bbd3;
  font-weight: 600;
}
.embed-roster {
  border-left: 5px solid #eee;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #efefef;
  border-radius: 5px;
}
.embed-roster >.roster-header {
  display: flex;
  align-items: center;
  padding: 10px;
}
.embed-roster >.roster-header >.roster-header-meta {
  padding-left: 15px;
}
.embed-roster >.roster-header >.roster-header-meta .team-name {
  font-size: 14px;
  font-weight: bold;
}
.embed-roster >.roster-header >.roster-header-meta .league-name {
  font-size: 11px;
  margin-top: 3px;
}
.embed-roster >.roster-header >.roster-header-meta .record {
  font-size: 11px;
  margin-top: 3px;
}
.embed-roster >.roster-list {
  padding: 15px 10px;
}
.embed-roster >.roster-list .roster-row {
  display: flex;
  align-items: center;
  min-height: 36px;
  box-sizing: border-box;
}
.embed-roster >.roster-list .roster-row .player-meta {
  margin-left: 10px;
}
.embed-roster >.roster-list .roster-row .player-meta .name {
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.embed-roster >.roster-list .roster-row .player-meta .name.empty {
  opacity: 0.7;
  font-weight: normal;
}
.embed-roster >.roster-list .roster-row .player-meta .name .nickname {
  font-size: 10px;
  padding-left: 7px;
  font-weight: normal;
}
.embed-roster >.roster-list .roster-row .player-meta .position {
  font-size: 10px;
  display: flex;
}
.embed-roster >.roster-list .roster-row .player-meta .position .next-game {
  padding-left: 4px;
}
.embed-roster >.roster-list .roster-row .player-meta .great {
  color: #ec5556;
}
.embed-roster >.roster-list .roster-row .player-meta .good {
  color: #eb7200;
}
.embed-roster >.roster-list .roster-row .player-meta .avg {
  color: #67c314;
}
.embed-roster >.roster-list .roster-row .player-meta .bad {
  color: #00a300;
}
.embed-side-discussion {
  max-width: 300px;
  min-width: 200px;
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #efefef;
  border-left: 5px solid #eee;
  border-radius: 5px;
  background: #fff;
  text-align: left;
}
.embed-side-discussion .meta {
  margin: 10px 15px;
  display: flex;
  align-items: center;
}
.embed-side-discussion .meta .title {
  font-size: 16px;
  font-weight: bold;
}
.embed-side-discussion .meta .description {
  margin-top: 2px;
  font-weight: 300;
}
.embed-side-discussion .meta .discussion-tag {
  color: #fff;
  border-color: #fff;
  font-size: 10px;
  font-weight: bold;
  z-index: 1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 3px solid;
  margin-right: 10px;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.embed-side-discussion .action {
  text-align: center;
  cursor: pointer;
  padding: 10px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #8887e9;
}
.self .embed-side-discussion {
  margin-left: auto;
}
.embed-team-name {
  margin-top: 5px;
  padding-left: 15px;
  border-left: 5px solid #eee;
}
.embed-team-name >.team-name {
  font-size: 13px;
  padding: 4px 0px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.embed-trade-container {
  padding: 16px;
  margin: 10px 0;
  border-radius: 16px;
  max-width: 256px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  background-color: #344054;
}
.embed-trade-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-trade-container >.player-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-trade-container >.player-info-container .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 40px;
}
.embed-trade-container >.player-info-container >.player-meta {
  margin-left: 8px;
}
.embed-trade-container >.player-info-container >.player-meta .trade-label {
  text-transform: uppercase;
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  font-family: "Poppins";
}
.embed-trade-container >.player-info-container >.player-meta .player-name {
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  margin-top: 6px;
  font-family: "Inter";
}
.embed-trade-container >.player-info-container >.player-meta .player-team {
  font-size: 10px;
  line-height: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
  letter-spacing: -0.25px;
  font-weight: normal;
}
.embed-trade-container .trade-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  color: #022047;
  width: 109px;
  height: 40px;
  border-radius: 28px;
  margin-left: 40px;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 600;
}
.embed-trade-container .like-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #00ceb8;
  color: #022047;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  margin-left: 16px;
}
.embed-trade-container.embed-trade-player:hover {
  cursor: pointer;
}
.embed-trade-container.embed-trade-pick >.player-info-container {
  align-items: center;
}
.embed-trade-container.embed-trade-pick >.player-info-container >.draft-pick-avatar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #999;
  border-radius: 50%;
  height: 48px;
  width: 48px;
}
.embed-trade-container.embed-trade-pick >.player-info-container >.draft-pick-avatar .draft-round {
  font-size: 14px;
  font-weight: 900;
}
.embed-trade-container.embed-trade-pick >.player-info-container >.draft-pick-avatar .draft-round-suffix {
  font-size: 10px;
  font-weight: bold;
}
.embed-trade-container.embed-trade-pick >.player-info-container .player-meta .draft-pick-detail-container .draft-pick-text {
  font-size: 10px;
  text-transform: uppercase;
  display: inline;
}
.embed-trade-container.embed-trade-pick >.player-info-container .player-meta .draft-pick-detail-container .draft-pick-owner {
  display: inline;
  font-size: 10px;
}
.embed-process-upload {
  border-left: 5px solid #eee;
  padding-left: 10px;
}
.embed-process-upload .meta-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-process-upload .meta-container .render-preview-wrapper {
  margin-right: 10px;
}
.embed-process-upload .meta-container .render-preview-wrapper .upload-preview-generic-file .file-icon {
  width: 30px;
}
.embed-process-upload .meta-container .render-preview-wrapper .upload-preview-image img {
  width: 100px;
}
.embed-process-upload .meta-container .render-preview-wrapper .upload-preview-video video {
  width: 100px;
}
.embed-process-upload .meta-container .name {
  font-size: 12px;
}
.embed-process-upload .meta-container .file-size {
  font-size: 10px;
  font-weight: normal;
}
.embed-process-upload .upload-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #f6f6f6;
  margin-top: 5px;
}
.embed-process-upload .upload-progress-bar .upload-progress-bar-fill {
  height: 6px;
  border-radius: 3px;
  transition: all 0.1s linear;
  background: #85c43b;
}
.embed-process-upload .error-message {
  font-size: 10px;
  margin-top: 5px;
  font-weight: bold;
  color: #f00;
}
.embed-upload {
  border-left: 5px solid #eee;
  padding-left: 10px;
  margin-top: 10px;
}
.embed-upload .file-link {
  text-decoration: none;
  font-weight: bold;
  margin-top: 5px;
  display: block;
}
.embed-upload.file-generic .file-link {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.embed-upload.file-generic .file-link .upload-preview-generic-file {
  margin-right: 10px;
}
.embed-upload.file-generic .file-link .upload-preview-generic-file .file-icon {
  width: 30px;
}
.embed-upload.file-generic .file-link .name {
  font-size: 12px;
}
.embed-upload.file-generic .file-link .file-size {
  font-size: 10px;
  font-weight: normal;
}
.embed-upload .icon-download {
  height: 16px;
  position: relative;
  top: 2px;
  margin-left: 5px;
}
.embed-url {
  width: 100%;
  border-left: 5px solid #eee;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-url.small-image {
  display: flex;
}
.embed-url.small-image .image-container {
  -webkit-flex: 0 0 100px;
  -ms-flex: 0 0 100px;
  flex: 0 0 100px;
  width: 100px !important;
  height: 100px !important;
  background-size: contain;
  margin-right: 10px;
}
.embed-url.small-image .meta {
  margin-top: 0;
  padding-top: 0;
}
.embed-url.tweet .meta .description {
  font-size: 14px;
  margin-top: 0;
}
.embed-url img {
  border-radius: 5px;
}
.embed-url .image-container {
  width: 380px;
  height: 210px;
  background-position: center;
  background-clip: cover;
  background-repeat: no-repeat;
  background-color: #000;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.embed-url .image-container i {
  font-size: 50px;
  color: #fff;
  opacity: 0.7;
}
.embed-url .image-container:hover i {
  opacity: 1;
}
.embed-url .image-container video {
  border: 1px solid #eee;
}
.embed-url .rich-media-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: #000;
  border-radius: 5px;
}
.embed-url .loading-tweet {
  color: #ccc;
}
.embed-url .meta {
  padding-top: 12px;
}
.embed-url .meta .title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.2px;
  cursor: pointer;
  color: #4183d7;
}
.embed-url .meta .title:hover {
  opacity: 0.7;
}
.embed-url .meta .description {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.3;
}
.embed-url .meta .source {
  font-size: 10px;
  margin-top: 9px;
  color: #ccc;
}
.self .embed-url {
  margin-left: 0;
}
.embed-video-raw {
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-video-raw video {
  height: 300px;
}
.embed-video {
  border-left: 5px solid #eee;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.embed-video .iframe-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.embed-video img {
  display: block;
  border-radius: 5px;
}
.embed-video iframe {
  border: none;
  border-radius: 5px;
}
.embed-video .meta {
  padding-top: 12px;
}
.embed-video .meta .title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.2px;
}
.embed-video .meta .source {
  font-size: 10px;
  margin-top: 9px;
  color: #ccc;
}
.emoji-selector {
  position: relative;
}
.emoji-selector .emoji-toggle {
  cursor: pointer;
}
.emoji-selector .emoji-toggle .fa-smile-o {
  font-size: 28px;
  color: #bbb;
  transition: all 0.2s ease;
}
.emoji-selector .emoji-toggle .fa-smile-o:hover {
  color: #00d8a7;
  transform: scale(1.1);
}
.gif-picker .menu {
  border-radius: 16px !important;
}
.gif-picker .fa-caret-down,
.gif-picker .fa-carent-up {
  color: #4a5870 !important;
}
.gif-picker .gif-icon-container {
  width: 24px;
  height: 20px;
  border-radius: 4px;
  background: #b9c4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  cursor: pointer;
}
.gif-picker .gif-icon-container span {
  color: #3a465b;
  font-size: 12px;
  line-height: 1.11;
  letter-spacing: 0.25;
  font-family: 'Poppins';
  font-weight: 600;
}
.gif-picker .gif-picker-panel {
  width: 296px;
  background: #4a5870;
  border-radius: 16px;
}
.gif-picker .gif-picker-panel .gif-search-container {
  width: 296px;
  height: 72px;
  background: #4a5870;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gif-picker .gif-picker-panel .gif-search-container .gif-search-wrapper {
  position: relative;
  width: 268px;
  height: 40px;
  border-radius: 26px;
  border: 1px solid #00ceb8;
  display: flex;
  align-items: center;
}
.gif-picker .gif-picker-panel .gif-search-container .gif-search-wrapper input {
  height: 32px;
  border-radius: 26px;
  border: none;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  padding-left: 42px;
  outline: none;
  width: 210px;
  background: transparent;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
}
.gif-picker .gif-picker-panel .gif-search-container .gif-search-wrapper input::placeholder {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #7988a1;
}
.gif-picker .gif-picker-panel .gif-grid {
  width: 280px;
  height: 268px;
  margin-left: 8px;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer;
}
.gif-picker .gif-picker-panel .gif-footer {
  height: 28px;
  width: 296px;
  background: #4a5870;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gif-picker .gif-picker-panel .gif-footer .powered-by {
  opacity: 0.8;
  font-family: Poppins;
  font-size: 9px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: 0.25px;
  text-align: left;
  color: #a3bbd3;
}
.giphy-panel {
  width: 100%;
  min-height: 142px;
  border-bottom: 1px solid #ddd;
}
.giphy-panel .legend {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  background-color: #f4f4f4;
  padding: 5px 10px;
  position: relative;
  border-bottom: 1px solid #ccc;
  text-align: left;
  letter-spacing: 0.5px;
}
.giphy-panel .legend .filter {
  display: inline;
  position: relative;
  left: 0;
}
.giphy-panel .legend .filter .filter-term {
  font-weight: bold;
  padding-left: 5px;
}
.giphy-panel .legend .filter i {
  animation-duration: 1.25s !important;
  font-size: 10px;
  margin-left: 5px;
}
.giphy-panel .legend .hotkeys {
  display: inline;
  position: absolute;
  right: 10px;
}
.giphy-panel .legend .hotkeys i {
  font-weight: 900;
}
.giphy-panel .legend .hotkeys .navigate,
.giphy-panel .legend .hotkeys .select {
  display: inline;
  margin-left: 15px;
}
.giphy-panel .legend .hotkeys .navigate i,
.giphy-panel .legend .hotkeys .select i {
  margin-right: 4px;
}
.giphy-panel .legend .hotkeys .navigate .key,
.giphy-panel .legend .hotkeys .select .key {
  font-weight: 900;
  color: #aaa;
  letter-spacing: 0.4px;
}
.giphy-panel >.giphy-panel-items {
  position: absolute;
  width: 100%;
  height: 120px;
  overflow: auto;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 4px 8px;
}
.giphy-panel >.giphy-panel-items .giphy-link-item {
  position: relative;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  margin: 5px;
  transition: all 0.1s ease;
  cursor: pointer;
}
.giphy-panel >.giphy-panel-items .giphy-link-item.highlight,
.giphy-panel >.giphy-panel-items .giphy-link-item:hover {
  transform: scale(1.1);
}
.giphy-panel >.giphy-panel-items .giphy-link-item.highlight >.overlay,
.giphy-panel >.giphy-panel-items .giphy-link-item:hover >.overlay {
  opacity: 0.3;
}
.giphy-panel >.giphy-panel-items .giphy-link-item video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.giphy-panel >.giphy-panel-items .giphy-link-item >.overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  color: #ddd;
  opacity: 0;
  white-space: normal;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pinned-comments {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  border-radius: 5px;
}
.pinned-comments .no-messages,
.pinned-comments .loader {
  font-size: 14px;
  text-align: center;
  color: #aaa;
  font-weight: bold;
}
.create-poll {
  width: 400px;
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  padding: 25px 25px;
}
.create-poll .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.create-poll .menu-item:hover {
  background: #18202f;
}
.create-poll .section-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  font-weight: bold;
}
.create-poll .text-input {
  width: 100%;
}
.create-poll .body {
  height: 300px;
  overflow-y: auto;
  padding: 30px 0px 30px 0px;
}
.create-poll .body .sub-option {
  margin-top: 25px;
}
.view-poll-votes-modal {
  width: 400px;
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  padding: 25px 25px;
  max-height: 80vh;
  overflow-y: auto;
}
.view-poll-votes-modal .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.view-poll-votes-modal .menu-item:hover {
  background: #18202f;
}
.view-poll-votes-modal .modal-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 18px;
}
.view-poll-votes-modal .modal-subtitle {
  font-size: 18px;
  color: #fff;
  margin-bottom: 12px;
}
.view-poll-votes-modal .vote-list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: #fff;
  margin-bottom: 12px;
}
.view-poll-votes-modal .vote-list-item .vote-list-item-username {
  margin-left: 8px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
}
.topic-chat-presence {
  display: flex;
  overflow: auto;
  position: absolute;
  right: 0;
  padding: 10px 20px;
  z-index: 999;
}
.topic-chat-presence .presence-item {
  margin-left: 5px;
  position: relative;
}
.topic-chat-presence .avatar-container {
  border: 3px solid #41495c;
  border-radius: 50%;
  background: #41495c;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topic-chat-presence .avatar-container span {
  font-size: 13px;
  font-weight: bold;
  color: #a3bbd3;
}
.topic-chat-presence .online-bubble {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  right: 0;
  background: #45e8a7;
}
@media (min-width: 1220px) {
  .topic-chat-presence {
    position: absolute !important;
  }
}
@-moz-keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@-o-keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.unread-divider {
  text-align: center;
  padding: 20px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  position: relative;
}
.unread-divider .text {
  background: #00ceb8;
  padding: 0 15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  z-index: 2;
  bottom: 8px;
  color: #fff;
  border-radius: 8px;
  font-family: 'Muli';
  font-size: 10px;
  line-height: 14px;
}
.unread-divider .divider {
  background: #00ceb8;
  height: 1px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 15px;
  z-index: 1;
}
.unread-divider .new {
  left: 30px;
}
.chat-right-icons-panel-container {
  display: flex;
  -webkit-flex: 0 0 80px;
  -ms-flex: 0 0 80px;
  flex: 0 0 80px;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgba(163,187,211,0.05);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.chat-right-icons-panel-container .chat-right-icons-panel-friends {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-grow: 1;
  flex-direction: column;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating {
  position: absolute;
  right: 40px;
  bottom: 30px;
  z-index: 99;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container {
  position: relative;
  height: 56px;
  width: 56px;
  border-radius: 56px;
  background-color: #3a465b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.75);
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container.glow {
  -webkit-box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  -webkit-animation: glow 2.2s infinite alternate;
  -moz-animation: glow 2.2s infinite alternate;
  -ms-animation: glow 2.2s infinite alternate;
  -o-animation: glow 2.2s infinite alternate;
  animation: glow 2.2s infinite alternate;
}
@-moz-keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
@-webkit-keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
@-o-keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
@keyframes glow {
  from {
    box-shadow: 0px 0px 14px -3px rgba(255,255,255,0.4);
  }
  to {
    box-shadow: 0px 0px 14px 3px rgba(255,255,255,0.75);
  }
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .avatar-container {
  height: 56px;
  width: 56px;
  border-radius: 56px;
  overflow: hidden;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .overlay-league-open {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 56px;
  overflow: hidden;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .new-message-indicator-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  width: 14px;
  border-radius: 20px;
  background-color: #181c28;
  z-index: 200;
  top: 0px;
  right: 0px;
}
.chat-right-icons-panel-container .chat-right-icons-panel-league .league-icon-floating .league-icon-container .new-message-indicator-container .indicator {
  height: 12px;
  width: 12px;
  border-radius: 20px;
  background-color: #ff2b6d;
}
.app-download-cta {
  position: relative;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  background: #373a44;
  color: #fff;
  display: flex;
  overflow: hidden;
}
.app-download-cta .app-icons {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.app-download-cta .app-icons >a {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
  text-decoration: none;
}
.app-download-cta .app-icons >a:hover {
  opacity: 0.95;
  transform: scale(1.2);
}
.app-download-cta .cta {
  position: fixed;
  width: 420px;
  height: 40px;
  bottom: 50px;
  right: 50px;
  background: #4093dc;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.4px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-left: 35px;
  opacity: 0;
  -webkit-animation: fadeIn 2s ease forwards, slideDown 1s ease;
  -moz-animation: fadeIn 2s ease forwards, slideDown 1s ease;
  -ms-animation: fadeIn 2s ease forwards, slideDown 1s ease;
  -o-animation: fadeIn 2s ease forwards, slideDown 1s ease;
  animation: fadeIn 2s ease forwards, slideDown 1s ease;
  cursor: pointer;
  transition: all 0.2s ease;
}
.app-download-cta .cta:hover {
  transform: scale(1.03);
}
.app-download-cta .cta .buttons {
  width: 80px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  position: absolute;
  right: 0;
  background: #6bb9ff;
  font-size: 12px;
}
.app-download-cta .cta-animation-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5px;
}
.avatar-channel {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  position: relative;
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-channel .sport {
  position: absolute;
}
.avatar-league {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  position: relative;
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-league .sport {
  position: absolute;
}
.avatar-picker {
  overflow: auto;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.avatar-picker .row {
  margin: 0;
  padding: 0;
  display: flex;
}
.avatar-picker .scroll-indicator {
  position: absolute;
  bottom: 10px;
  text-align: center;
  opacity: 0.9;
  font-size: 11px;
  color: #666;
  font-weight: bold;
}
.avatar-picker .scroll-indicator .text {
  display: inline-block;
  padding: 5px 15px;
  background: #fff;
  border-radius: 10px;
}
.avatar-picker .avatar-cell {
  cursor: pointer;
  box-sizing: border-box;
  background-size: 70% 70% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  position: relative;
}
.avatar-picker .avatar-cell .highlight {
  position: absolute;
  display: none;
}
.avatar-picker .avatar-cell .highlight .checkmark {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  bottom: -3px;
  right: -3px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-picker .avatar-cell .highlight .checkmark i {
  font-size: 13px;
}
.avatar-picker .avatar-cell.selected .highlight {
  display: block;
}
.avatar-picker .avatar-cell:hover {
  border: 3px solid rgba(255,255,255,0.7);
}
.avatar-picker .avatar-cell:hover .highlight {
  left: -3px;
  top: -3px;
}
.avatar-player {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-player.free-agent {
  border-radius: 5px;
  border: 1px solid #000;
  color: #000;
  font-weight: 900;
}
.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.color-picker {
  display: flex;
  align-items: center;
}
.color-picker .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  margin-right: 5px;
  cursor: pointer;
}
.color-picker .color {
  width: 36px;
  height: 36px;
  border-radius: 3px;
}
.context-menu .menu {
  position: fixed;
  z-index: 1000;
  border-radius: 8px;
  background-color: #1d2230;
}
.context-menu .menu.top .pointer {
  bottom: -3px;
}
.context-menu .menu.bottom .pointer {
  top: -22px;
}
.context-menu .menu .pointer {
  width: 16px;
  height: 16px;
  font-size: 30px;
  color: #fff;
  position: fixed;
}
.context-menu .menu .menu-item {
  margin: 0 8px;
  padding: 8px;
  font-size: 14px;
  font-weight: bold;
  min-width: 100px;
  cursor: pointer;
  border-radius: 8px;
}
.context-menu .context-menu-underlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: rgba(0,0,0,0);
}
.cta-animation {
  pointer-events: none;
}
.cta-animation .center {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: 0.5;
}
.cta-animation .cta-bubble-animation {
  position: absolute;
  left: -15px;
  top: -15px;
}
.cta-bubble-animation {
  position: relative;
}
.cta-bubble-animation > div:nth-child(2) {
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}
.cta-bubble-animation > div:nth-child(3) {
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.cta-bubble-animation > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  top: 0px;
  opacity: 0;
  margin: 0;
  width: 60px;
  height: 60px;
  -webkit-animation: cta-bubble-animation 2s 0s linear infinite;
  -webkit-animation: cta-bubble-animation 2s 0s linear infinite;
  -moz-animation: cta-bubble-animation 2s 0s linear infinite;
  -ms-animation: cta-bubble-animation 2s 0s linear infinite;
  -o-animation: cta-bubble-animation 2s 0s linear infinite;
  animation: cta-bubble-animation 2s 0s linear infinite;
}
@-moz-keyframes cta-bubble-animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes cta-bubble-animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes cta-bubble-animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes cta-bubble-animation {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.cta-message-bubble {
  opacity: 0;
  -webkit-animation: fadeIn 2s ease forwards;
  -moz-animation: fadeIn 2s ease forwards;
  -ms-animation: fadeIn 2s ease forwards;
  -o-animation: fadeIn 2s ease forwards;
  animation: fadeIn 2s ease forwards;
  position: relative;
  pointer-events: none;
}
.cta-message-bubble .action-animation {
  pointer-events: none;
}
.cta-message-bubble .message {
  padding: 15px 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 5px;
  -webkit-animation: slideUp 1s ease;
  -moz-animation: slideUp 1s ease;
  -ms-animation: slideUp 1s ease;
  -o-animation: slideUp 1s ease;
  animation: slideUp 1s ease;
  top: 45px;
  background: #667cd1;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 1px 1px 15px rgba(0,0,0,0.15);
  position: absolute;
  letter-spacing: 0.3px;
  white-space: nowrap;
  left: 23px;
}
.drag-drop-container {
  position: relative;
  height: 100%;
}
.drag-drop-container.dragging .upload-area-overlay {
  pointer-events: auto;
  background: rgba(0,0,0,0.7);
  opacity: 1;
}
.drag-drop-container .upload-area-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s ease;
}
.drag-drop-container .upload-area-overlay .drag-drop-placeholder {
  display: flex;
  flex-grow: 1;
  pointer-events: none;
}
.drag-drop-placeholder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.drag-drop-placeholder .icon-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f6f6f6;
  position: relative;
}
.drag-drop-placeholder .icon-wrapper img {
  transition: all 0.2s ease;
  position: absolute;
}
.drag-drop-placeholder .icon-wrapper .file-icon {
  top: 42px;
  transform: rotate(0);
  left: 50px;
  width: 100px;
  z-index: 1;
  top: 42px;
}
.drag-drop-placeholder .icon-wrapper .image-icon {
  top: 105px;
  left: 55px;
  z-index: 2;
  width: 90px;
  transform: rotate(0);
}
.drag-drop-placeholder .icon-wrapper .video-icon {
  top: 35px;
  width: 70px;
  left: 65px;
  transform: rotate(0);
}
.drag-drop-placeholder .header-copy {
  font-size: 22px;
  font-weight: bold;
  margin-top: 45px;
  letter-spacing: 0.5px;
  color: #f6f6f6;
}
.dragging .icon-wrapper .file-icon {
  transform: rotate(20deg);
  left: 80px;
}
.dragging .icon-wrapper .image-icon {
  transform: rotate(-10deg);
  left: 22px;
}
.dragging .icon-wrapper .video-icon {
  transform: rotate(-5deg);
  left: 20px;
}
.drag-drop-preview-handler {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  pointer-events: none;
}
.drag-drop-preview-handler.active {
  pointer-events: auto;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
}
.drag-drop-preview-handler .upload-previews {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
.edit-upload-item {
  box-shadow: 1px 1px 10px #444;
  background: #fff;
  min-width: 400px;
  max-width: 70vw;
  padding: 20px;
  border-radius: 5px;
}
.edit-upload-item .header-section {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  margin: 5px 0 20px 0;
}
.edit-upload-item .header-section .close-btn {
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px;
}
.edit-upload-item .preview-render .preview-wrapper {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.edit-upload-item .preview-render .preview-wrapper .upload-preview-image {
  text-align: center;
}
.edit-upload-item .preview-render .preview-wrapper .upload-preview-image img {
  height: 200px;
}
.edit-upload-item .preview-render .preview-wrapper .file-name-wrapper {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}
.edit-upload-item .preview-render .preview-wrapper .upload-preview-video video {
  height: 200px;
}
.edit-upload-item .preview-render .description-input-wrapper {
  margin-top: 15px;
}
.edit-upload-item .preview-render .description-input-wrapper textarea {
  background: #f6f6f6;
  margin-top: 10px;
  border-radius: 3px;
  padding: 10px;
  height: 100px;
}
.edit-upload-item .preview-render .action-buttons {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
.edit-upload-item .preview-render .action-buttons .button {
  font-size: 11px;
  width: 80px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: #ddd;
  margin-left: 15px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
.edit-upload-item .preview-render .action-buttons .button.confirm {
  background: #85c43b;
}
.upload-preview-generic-file .file-preview-container {
  text-align: center;
}
.upload-preview-generic-file .file-preview-container .file-icon {
  width: 65px;
}
.upload-preview-generic-file .file-preview-container .file-name {
  font-size: 12px;
  width: 70px;
  text-align: center;
}
.upload-preview-generic-file .file-preview-container .file-size {
  font-size: 9px;
  color: #ccc;
  text-align: center;
}
.upload-preview-image .loader {
  background: #f6f6f6;
}
.form-elements {
  position: relative;
  display: inline-block;
}
.form-elements.text-input {
  position: relative;
}
.form-elements.text-input .spinner {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px !important;
  height: 16px !important;
  display: none;
}
.form-elements.text-input.loading input {
  padding-right: 30px;
}
.form-elements.text-input.loading .spinner {
  display: inline-block;
}
.form-elements label {
  font-size: 10px;
  font-weight: bold;
  color: #b1b1b1;
}
.form-elements input {
  border: none;
  border-bottom: 1px solid #a3bbd3;
  background: none;
  color: #fff;
  width: 100%;
  padding: 7px 0;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  opacity: 0.7;
  box-sizing: border-box;
}
.form-elements input::placeholder {
  color: #a3bbd3;
  opacity: 0.7;
}
.form-elements input:focus {
  opacity: 0.9;
}
.form-elements input.white {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.8);
}
.form-elements input.white::placeholder {
  color: #fff;
}
.form-elements .right-wrap {
  position: absolute;
  right: 0;
  bottom: 8px;
}
.form-elements .right-wrap .right-text {
  cursor: pointer;
  font-size: 10px;
  color: #9e9e9e;
}
.form-elements .validation-msg {
  position: absolute;
  padding: 12px 12px;
  background: #fff;
  color: #333;
  box-shadow: 2px 2px 7px #333;
  font-size: 12px;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  border-radius: 4px;
  color: #ff9800;
  display: none;
  white-space: nowrap;
  z-index: 9999;
}
.form-elements .validation-msg.show {
  display: block;
}
.form-elements .validation-msg::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.form-elements button {
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 50px;
  height: 40px;
  font-size: 12px;
  background: #00ceb8;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-elements button:hover {
  background: #00ceb8;
}
.form-elements button .spinner {
  width: 15px;
  height: 15px;
}
.form-elements button.cancel {
  border: 1px solid #a3bbd3;
  color: #a3bbd3;
  background: none;
}
.form-elements button.cancel .spinner {
  border-color: #a3bbd3;
  border-top-color: #3a465b;
}
.form-elements button.dangerous {
  background: #58a7ff;
}
.form-elements button.small {
  padding: 8px 25px;
  font-size: 10px;
  height: 30px;
}
.form-elements button.small .spinner {
  height: 7px !important;
  width: 7px !important;
}
.form-elements button.primary {
  background: #00c3b8;
}
.form-elements button.primary:hover {
  background: #45e8a7;
}
.form-elements button.black {
  background: #000;
}
.form-elements button.black:hover {
  background: #333;
}
.form-elements button.border {
  background: transparent;
  color: #fff;
  border: 1px solid #a3bbd3;
}
.form-elements button.border:hover {
  border: 1px solid #3a465b;
}
.form-elements.nba {
  margin-top: 16px;
}
.form-elements.nba button {
  background: #ffae58;
}
.form-elements.nba button:hover {
  background: #ffae58;
}
.form-elements.disable button {
  cursor: default;
  background: #f1f1f2;
  color: #c0c1c1;
}
.form-elements.disable button:hover {
  background: #f1f1f2;
}
.validation-message-block {
  padding: 16px;
  box-sizing: border-box;
  color: #b20000;
  background: #ffe7e7;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid;
  border-radius: 16px;
  height: 48px;
  display: flex;
  align-items: center;
}
.validation-message-block.confirmation {
  background: rgba(0,206,184,0.2);
  border-color: #00ceb8;
  color: #00ceb8;
}
.validation-message-block.warning {
  background: #ffd900;
  color: #9e6d0b;
  border-color: #9e6d0b;
}
.validation-message-block >.validation-message-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
}
.custom-checkbox-item {
  display: flex;
  cursor: pointer;
}
.custom-checkbox-item >.meta {
  font-size: 15px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.custom-checkbox-item >.meta >.name {
  font-weight: bold;
  color: #677897;
}
.custom-checkbox-item >.meta >.description {
  font-size: 12px;
  margin-top: 3px;
  color: #a3bbd3;
}
.custom-checkbox {
  width: 28px;
  height: 26px;
  -webkit-flex: 0 0 28px;
  -ms-flex: 0 0 28px;
  flex: 0 0 28px;
  border: 1px solid #aaa;
  border-radius: 5px;
  position: relative;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-checkbox.checked .checkmark {
  display: block;
}
.custom-checkbox .checkmark {
  display: none;
  transform: rotate(45deg) scaleX(-1);
}
.custom-checkbox .checkmark::before {
  content: 'L';
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 24px;
  position: relative;
  top: -1px;
}
.custom-radio-item {
  display: flex;
  cursor: pointer;
}
.custom-radio-item >.meta {
  font-size: 15px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.custom-radio-item >.meta >.name {
  font-weight: bold;
}
.custom-radio-item >.meta >.description {
  font-size: 12px;
  margin-top: 3px;
  color: #bbb;
}
.custom-radio-item >.custom-radio {
  display: flex;
  width: 28px;
  height: 28px;
  -webkit-flex: 0 0 28px;
  -ms-flex: 0 0 28px;
  flex: 0 0 28px;
  border: 1px solid #aaa;
  border-radius: 50%;
  position: relative;
  align-items: center;
  justify-content: center;
}
.custom-radio-item >.custom-radio.checked .custom-radio-fill {
  transform: scale(1);
}
.custom-radio-item >.custom-radio .custom-radio-fill {
  display: block;
  width: 22px;
  height: 22px;
  -webkit-flex: 0 0 22px;
  -ms-flex: 0 0 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: #00c3b8;
  position: relative;
  transform: scale(0);
  transition: all 0.1s ease;
}
.custom-dropdown {
  position: relative;
  display: inline-block;
}
.custom-dropdown .selected-value {
  border-bottom: 1px solid #a3bbd3;
  font-weight: bold;
  padding: 10px 10px 10px 0;
  padding-right: 50px;
  cursor: pointer;
}
.custom-dropdown .selected-value i {
  position: absolute;
  right: 0;
  font-weight: normal;
  font-size: 14px;
}
.custom-dropdown .dropdown-items {
  position: absolute;
  display: none;
  width: 100%;
  background: #fff;
  z-index: 99999;
}
.custom-dropdown .dropdown-items.open {
  display: block;
  border-left: 1px solid #a3bbd3;
  border-right: 1px solid #a3bbd3;
}
.custom-dropdown .dropdown-items .custom-dropdown-item {
  display: flex;
  cursor: pointer;
  border-bottom: 1px solid #a3bbd3;
  padding: 15px 0;
  background: #fff;
}
.custom-dropdown .dropdown-items .custom-dropdown-item.selected,
.custom-dropdown .dropdown-items .custom-dropdown-item:hover {
  background: #f3f3f3;
}
.custom-dropdown .dropdown-items .custom-dropdown-item >.meta {
  font-size: 12px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.custom-dropdown .dropdown-items .custom-dropdown-item >.meta >.name {
  font-weight: bold;
}
.custom-dropdown .dropdown-items .custom-dropdown-item >.meta >.description {
  font-size: 12px;
  margin-top: 3px;
  color: #bbb;
}
.custom-horizontal-select {
  display: inline-block;
  border: 1px solid #a3bbd3;
  border-radius: 4px;
}
.custom-horizontal-select .custom-horizontal-select-item {
  display: inline-block;
  cursor: pointer;
  padding: 10px;
  width: 60px;
  border-bottom: 1px solid #a3bbd3;
}
.custom-horizontal-select .custom-horizontal-select-item >.meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.custom-horizontal-select .custom-horizontal-select-item >.meta >.name {
  font-weight: bold;
  font-size: 15px;
}
.custom-horizontal-select .custom-horizontal-select-item >.meta >.description {
  font-size: 10px;
  margin-top: 3px;
}
.custom-horizontal-select .custom-horizontal-select-item.selected {
  background: #00c3b8;
}
.custom-horizontal-select .custom-horizontal-select-item:hover {
  background: #00c3b8;
}
.custom-switch {
  display: flex;
  align-items: center;
}
.custom-switch .text .title {
  font-size: 13px;
  font-weight: bold;
  margin-left: 10px;
}
.custom-switch .text .description {
  font-size: 11px;
  margin-left: 10px;
}
.custom-switch .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.custom-switch .switch input {
  display: none;
}
.custom-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.custom-switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.custom-switch input:checked + .slider {
  background-color: #00d8a7;
}
.custom-switch input:focus + .slider {
  box-shadow: 0 0 1px #00d8a7;
}
.custom-switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.custom-switch .slider.round {
  border-radius: 34px;
}
.custom-switch .slider.round:before {
  border-radius: 50%;
}
.cropper-tool {
  min-width: 400px !important;
  width: 400px !important;
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
}
.cropper-tool .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.cropper-tool .menu-item:hover {
  background: #18202f;
}
.cropper-tool .cancel {
  margin-left: 15px;
}
.image-uploader .preview {
  position: relative;
  border-radius: 5px;
  background: #a3bbd3;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.image-uploader .preview .overlay {
  position: absolute;
  border-radius: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  align-items: center;
  justify-content: center;
  background-color: #000;
}
.image-uploader .preview .text {
  color: #fff;
  font-size: 20px;
  position: absolute;
  opacity: 0;
  transition: 0.5s ease;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.image-uploader .preview >img {
  display: block;
  border-radius: 5px;
}
.image-uploader .preview:hover .overlay {
  opacity: 0.5;
}
.image-uploader .preview:hover .text {
  opacity: 1;
}
.image-uploader label {
  display: block;
}
.image-uploader input[type=file] {
  width: 0.1px !important;
  height: 0.1px !important;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.paginated-scrollview {
  flex-grow: 1;
  overflow-y: auto;
}
.paginated-scrollview .pagination-loader {
  text-align: center;
}
.panel-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 65px);
  position: relative;
  top: -60px;
}
.panel-loader .spinner {
  width: 44px !important;
  height: 44px !important;
}
.panel-loader .icon {
  background: #102131;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  position: absolute;
  opacity: 0.7;
  -webkit-animation: 1s blink infinite 0.3333s;
  -moz-animation: 1s blink infinite 0.3333s;
  -ms-animation: 1s blink infinite 0.3333s;
  -o-animation: 1s blink infinite 0.3333s;
  animation: 1s blink infinite 0.3333s;
}
.panel-loader .icon img {
  display: block;
  width: 25px;
  height: 25px;
}
.panel-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.panel-tabs .tabs-container {
  display: flex;
  flex-direction: row;
  -webkit-flex: 0 0 62px;
  -ms-flex: 0 0 62px;
  flex: 0 0 62px;
}
.panel-tabs .tabs-container .tab-item {
  flex-basis: 100%;
  font-size: 14px;
  text-align: center;
  padding: 16px 10px;
  cursor: pointer;
  border-bottom: none;
  box-sizing: border-box;
}
.panel-tabs .tabs-container .tab-item.selected {
  border-left: 5px solid #333;
}
.panel-tabs .tabs-container .tab-item:hover {
  background: #fefefe;
}
.panel-tabs .tabs-container .tab-item .name {
  font-weight: bold;
}
.panel-tabs .tabs-container .tab-item .description {
  font-size: 11px;
  color: #aaa;
  margin-top: 3px;
}
.panel-tabs .tab-layout-container {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  height: 100%;
  -ms-overflow-style: none;
}
.panel-tabs .tab-layout-container::-webkit-scrollbar {
  display: none;
}
.panel-tabs .round-tab {
  flex-grow: 1;
  flex-basis: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  background: #3a465b;
  box-shadow: 1px -4px 5px #17202f;
  cursor: pointer;
  padding: 0 19px;
  font-size: 12px;
  font-family: 'Muli';
  font-weight: bold;
  color: #a3bbd3;
}
.panel-tabs .round-tab:hover .tab {
  opacity: 0.9;
}
.panel-tabs .round-tab .tab {
  white-space: nowrap;
}
.panel-tabs .round-tab .tab .icon {
  height: 13px;
  margin-bottom: 5px;
}
.panel-tabs .round-tab.selected {
  background: #283245;
  box-shadow: none;
  color: #00ceb8;
}
.panel-tabs .round-tab.selected::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  right: -20px;
  bottom: 0;
  background: #3a465b;
  z-index: 1;
}
.panel-tabs .round-tab.selected .tab::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  right: -10px;
  bottom: 0;
  background: #283245;
}
.panel-tabs .round-tab.selected::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  bottom: 0;
  background: #3a465b;
  z-index: 1;
}
.panel-tabs .round-tab.selected .tab::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  left: -10px;
  bottom: 0;
  background: #283245;
}
.panel-tabs .round-tab:last-child::after {
  background: #17202f;
}
.panel-tabs .round-tab:first-child::before {
  display: none;
}
.panel-tabs .round-tab:first-child .tab::before {
  display: none;
}
.panel-tabs .round-tab .tab-shadow {
  position: absolute;
  left: 10px;
  bottom: 4px;
  right: -3px;
  top: -3px;
  box-shadow: 5px 5px 5px #000;
}
.panel-tabs.small .tabs-container {
  -webkit-flex: 0 0 42px;
  -ms-flex: 0 0 42px;
  flex: 0 0 42px;
}
.panel-tabs.small .round-tab.selected::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  right: -10px;
}
.panel-tabs.small .round-tab.selected .tab::after {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  right: -5px;
}
.panel-tabs.small .round-tab.selected::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: -10px;
}
.panel-tabs.small .round-tab.selected .tab::before {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  left: -5px;
}
.panel-tabs.light .round-tab {
  flex-grow: 1;
  flex-basis: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  background: #f9f9f9;
  box-shadow: 1px -4px 5px #ccd2da;
  cursor: pointer;
  padding: 0 19px;
  font-size: 12px;
  font-family: 'Muli';
  font-weight: bold;
  color: #a3bbd3;
}
.panel-tabs.light .round-tab:hover .tab {
  opacity: 0.9;
}
.panel-tabs.light .round-tab .tab .icon {
  height: 13px;
  margin-bottom: 5px;
}
.panel-tabs.light .round-tab.selected {
  background: #fff;
  box-shadow: none;
  color: #00ceb8;
}
.panel-tabs.light .round-tab.selected::after {
  background: #f9f9f9;
}
.panel-tabs.light .round-tab.selected .tab::after {
  background: #fff;
}
.panel-tabs.light .round-tab.selected::before {
  background: #f9f9f9;
}
.panel-tabs.light .round-tab.selected .tab::before {
  background: #fff;
}
.panel-tabs.light .round-tab:last-child::after {
  background: #fff;
}
.panel-tabs.light .round-tab:first-child::before {
  display: none;
}
.panel-tabs.light .round-tab:first-child .tab::before {
  display: none;
}
.panel-tabs.light .round-tab .tab-shadow {
  box-shadow: 5px 5px 5px #ccd2da;
}
.panel-with-sub-nav {
  display: flex;
  height: 100%;
}
.panel-with-sub-nav.right {
  flex-direction: row-reverse;
}
.panel-with-sub-nav.right .sub-nav {
  border-left: 1px solid #18202f;
}
.panel-with-sub-nav .panel-content {
  flex-grow: 1;
  overflow-y: auto;
  height: 100%;
}
.panel-with-sub-nav .sub-nav {
  padding: 24px;
  -webkit-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  border-right: 1px solid #61707e;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.panel-with-sub-nav .sub-nav .sub-nav-footer .logout-text {
  cursor: pointer;
  color: #d70000;
}
.panel-with-sub-nav .sub-nav .sub-nav-content {
  flex-grow: 1;
}
.panel-with-sub-nav .sub-nav .nav-section {
  margin-bottom: 16px;
}
.panel-with-sub-nav .sub-nav .nav-section-header {
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0;
  margin-bottom: 5px;
}
.panel-with-sub-nav .sub-nav .nav-item {
  font-size: 15px;
  cursor: pointer;
  color: #7988a1;
  position: relative;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 16px;
  margin: 1px 0;
}
.panel-with-sub-nav .sub-nav .nav-item .alert {
  position: relative;
  display: inline-block;
  color: #f00;
}
.panel-with-sub-nav .sub-nav .nav-item.selected {
  font-weight: bold;
  color: #fff;
  background-color: rgba(58,70,91,0.25);
}
.panel-with-sub-nav .sub-nav .nav-item:hover {
  background-color: rgba(58,70,91,0.25);
}
.panel-with-sub-navigation {
  display: flex;
  height: 100%;
}
.panel-with-sub-navigation.right {
  flex-direction: row-reverse;
}
.panel-with-sub-navigation.right .sub-navigation {
  border-left: 1px solid #efefef;
}
.panel-with-sub-navigation .panel-content {
  flex-grow: 1;
  overflow: auto;
}
.panel-with-sub-navigation .sub-navigation {
  padding: 30px 25px;
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  border-right: 1px solid #efefef;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.panel-with-sub-navigation .sub-navigation .sub-navigation-items {
  flex-grow: 1;
}
.panel-with-sub-navigation .sub-navigation .nav-section {
  margin-bottom: 40px;
}
.panel-with-sub-navigation .sub-navigation .nav-section-header {
  font-size: 12px;
  color: #ddd;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0;
  margin-bottom: 5px;
}
.panel-with-sub-navigation .sub-navigation .nav-item {
  font-size: 16px;
  cursor: pointer;
  padding: 12px 0;
}
.panel-with-sub-navigation .sub-navigation .nav-item.selected {
  font-weight: bold;
}
.send-sms-dl-link-form .description {
  font-size: 14px;
  margin-bottom: 5px;
  opacity: 0.4;
  font-weight: 300;
}
.send-sms-dl-link-form input {
  display: block;
  border: 1px solid #efefef;
  padding: 10px 15px;
  border-radius: 5px;
  background: #fff;
  font-size: 15px;
  outline: none;
  height: 44px;
  box-sizing: border-box;
}
.send-sms-dl-link-form .form-elements button {
  padding: 0;
  background: #7ab337;
  font-size: 16px;
  line-height: 44px;
  height: 44px !important;
  font-weight: bold;
  text-transform: none;
  height: auto;
}
.send-sms-dl-link-form .success .sent-text {
  font-size: 24px;
  font-weight: bold;
  line-height: 40px;
  opacity: 0;
  -webkit-animation: 2s ease 1s forwards fadeIn;
  -moz-animation: 2s ease 1s forwards fadeIn;
  -ms-animation: 2s ease 1s forwards fadeIn;
  -o-animation: 2s ease 1s forwards fadeIn;
  animation: 2s ease 1s forwards fadeIn;
}
.time-picker.disabled .time-select:hover .options {
  display: none;
}
.time-picker.disabled .selected-time {
  cursor: auto;
}
.time-picker .time-select {
  position: relative;
}
.time-picker .time-select:hover .options {
  display: flex;
}
.time-picker .time-select .options {
  display: none;
  position: absolute;
  bottom: 49px;
  z-index: 99;
}
.time-picker .selected-time {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #448aff;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
}
.time-picker .selected-time .period {
  padding-left: 10px;
  text-transform: uppercase;
}
.time-picker .selected-time .timezone {
  padding-left: 10px;
  text-transform: uppercase;
}
.time-picker .selected {
  background: #559fff;
  color: #fff;
}
.time-picker .options {
  border: 1px solid #efefef;
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  font-weight: 13px;
  width: 100%;
  box-sizing: border-box;
}
.time-picker .options .header {
  height: 20px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 20px;
  border-bottom: 1px solid #efefef;
}
.time-picker .options .options-container {
  height: 110px;
  overflow-y: auto;
  position: relative;
  border-right: 1px solid #efefef;
}
.time-picker .options .hour-options {
  flex-grow: 1;
  flex-basis: 0;
}
.time-picker .options .hour-options .hour-item {
  display: flex;
  height: 25px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.time-picker .options .minute-options {
  flex-grow: 1;
  flex-basis: 0;
}
.time-picker .options .minute-options .minute-item {
  display: flex;
  height: 25px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.time-picker .options .period-options {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
}
.time-picker .options .period-options .period-item {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.time-picker .options .period-options .options-container {
  border-right: none;
}
.draft-settings .time-select .options {
  bottom: 31px;
}
.draft-settings .selected-time {
  height: 32px;
  font-size: 12px;
  background: #212a3c;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  border-radius: 25px;
  padding: 0px 16px;
}
.draft-settings .selected-time .period {
  padding-left: 4px;
}
.draft-settings .selected-time .timezone {
  padding-left: 4px;
  color: #b9c4d4;
}
.draft-settings .selected {
  background: #00ceb8;
}
.draft-settings .options {
  background: #212a3c;
}
.username-component {
  font-size: 14px;
  cursor: pointer;
}
.username-component:hover {
  opacity: 0.7;
}
.link-button {
  text-decoration: none;
  display: block;
}
.link-button:focus {
  outline: auto;
}
.alert-modal {
  position: fixed;
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(0,0,0,0.7);
  transition: all 0.05s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-modal .alert-content-container {
  min-width: 150px;
  min-height: 50px;
  border-radius: 5px;
  background: #fff;
  transition: all 0.07s ease-out;
  transform: scale(0);
}
.alert-modal.show {
  z-index: 99999;
  opacity: 1;
}
.alert-modal.show .alert-content-container {
  transform: scale(1);
}
.app-modal {
  border-radius: 16px;
  padding: 24px 20px;
  background-color: #3a465b;
  position: relative;
  box-shadow: 1px 1px 15px #18202f;
}
.app-modal .app-modal-header-text {
  color: #fff;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.3;
}
.app-modal .app-modal-subheader-text {
  color: #a3bbd3;
  font-family: Inter;
  font-size: 16px;
  letter-spacing: -0.15px;
}
.app-modal .app-modal-content {
  padding-top: 16px;
  padding-bottom: 16px;
}
.app-modal .close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #202635;
  cursor: pointer;
}
.app-modal .close-button img {
  height: 12px;
  width: 12px;
}
.animated-border {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  position: relative;
}
.animated-border .filling {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  transition: all 0.2s ease;
}
.animated-border .filling.show {
  width: 100%;
}
.app-button-gradient {
  text-transform: uppercase;
  color: #fff;
  font-family: "Muli";
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  padding: 0 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: linear-gradient(315deg, #00b7b3, #4ce2a7);
  background-image: linear-gradient(315deg, #00b7b3, #4ce2a7);
}
.app-button-gradient:hover {
  box-shadow: 0 5px 8px 0 rgba(2,32,71,0.1);
}
.app-button-gradient.mint {
  background-image: linear-gradient(315deg, #07c5ff, #4ce2b8);
}
.app-button-gradient.red {
  background-image: linear-gradient(129deg, #ffaa7f, #ff3a6e);
}
.app-button-gradient.orange {
  background-image: linear-gradient(317deg, #ff4542, #ffae58);
}
.app-button-gradient.purple {
  background-image: linear-gradient(135deg, #89a5fb, #635ee4);
}
.app-button-gradient.lilac {
  background-image: linear-gradient(135deg, #db84ff, #9139ff);
}
.app-button-gradient.blue {
  background-image: linear-gradient(315deg, #5e73e4, #7cdaf9);
}
.app-button-gradient.grey {
  background-image: linear-gradient(315deg, #a3bbd3, #e6effa);
}
.app-button-gradient.dark {
  background-image: linear-gradient(136deg, #55609f, #101c5a);
}
.app-button-gradient .loader {
  margin: auto;
}
.app-dropdown-v2 {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.app-dropdown-v2 .selected-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid transparent;
  height: 48px;
  padding: 12px;
  box-sizing: border-box;
  background-color: #2d3649;
  justify-content: space-between;
  color: #a3bbd3;
  cursor: pointer;
  border-radius: 24px;
}
.app-dropdown-v2 .selected-container.isOpen {
  border: 1px solid #fff;
  color: #fff;
}
.app-dropdown-v2 .selected-container .selected-text {
  font-size: 12px;
  line-height: 16px;
  font-family: 'Inter';
  font-weight: 600;
}
.app-dropdown-v2 .hover-between {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 70px;
  background-color: transparent;
}
.app-dropdown-v2 .dropdown-container {
  display: inline-flex;
  flex-direction: column;
  height: 112px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  box-sizing: border-box;
  background-color: #242d40;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
}
.app-dropdown-v2 .dropdown-container .dropdown-scroll {
  padding: 8px;
}
.app-dropdown-v2 .dropdown-container .dropdown-item {
  display: flex;
  align-items: center;
  max-height: 44px;
  padding: 12px 24px;
  border-radius: 16px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
}
.app-dropdown-v2 .dropdown-container .dropdown-item:hover {
  background-color: #3a465b;
}
.app-dropdown-v2 .dropdown-container .dropdown-item:hover.selected {
  background-color: #d8e2ed;
}
.app-dropdown-v2 .dropdown-container .dropdown-item.selected {
  background-color: #d8e2ed;
  color: #022047;
}
.app-dropdown-v2 .dropdown-container .dropdown-item .item-text {
  font-size: 14px;
  font-family: 'Inter';
  line-height: 18px;
  font-weight: 600;
}
.app-dropdown {
  position: relative;
  display: inline-block;
  border-radius: 16px;
  font-size: 10px;
}
.app-dropdown:hover .selected-value {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.app-dropdown:hover .dropdown-items-container {
  display: block;
}
.app-dropdown .selected-value {
  padding: 8px 32px 8px 16px;
  cursor: pointer;
  background-color: #212a3c;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  border-radius: 16px;
  box-sizing: border-box;
}
.app-dropdown .selected-value i {
  position: absolute;
  right: 8px;
  font-weight: normal;
  color: #fff;
}
.app-dropdown .dropdown-items-container {
  position: relative;
  display: none;
  z-index: 99999;
}
.app-dropdown .dropdown-items-container:hover {
  display: block;
}
.app-dropdown .dropdown-items {
  position: absolute;
  width: 100%;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.app-dropdown .dropdown-items .app-dropdown-item {
  display: flex;
  cursor: pointer;
  padding: 15px 0;
  font-family: 'Poppins', sans-serif;
  background-color: #212a3c;
}
.app-dropdown .dropdown-items .app-dropdown-item .meta {
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}
.app-dropdown .dropdown-items .app-dropdown-item .meta .name {
  font-weight: 700;
  color: #a3bbd3;
}
.app-dropdown .dropdown-items .app-dropdown-item .meta .description {
  color: #a3bbd3;
  margin-left: 4px;
}
.app-dropdown .dropdown-items .app-dropdown-item:hover {
  background-color: #293243;
}
.app-dropdown .dropdown-items .app-dropdown-item:hover .name {
  color: #fff;
}
.app-dropdown .dropdown-items .app-dropdown-item.selected .name {
  color: #00ceb8;
}
.app-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.app-round-input {
  border-radius: 28px;
  height: 48px;
  padding: 12px 14px;
  background: #2d3649;
  box-sizing: border-box;
  cursor: text;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.app-round-input.focus {
  border: 1px solid #00ceb8;
}
.app-round-input ::placeholder {
  color: rgba(124,139,164,0.7);
}
.app-round-input input {
  outline: none;
  background: none;
  border: none;
  color: #fff;
  font-family: Poppins;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
}
.app-round-input .app-round-input-prefix-text {
  font-family: Poppins;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 16px;
  margin-right: 4px;
}
.box-text-input {
  padding: 2px 10px;
  min-width: 380px;
}
.box-text-input .input-container {
  position: relative;
  display: flex;
  flex-grow: 1;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
  transition: all 0.2s ease;
  border-radius: 2px;
}
.box-text-input .input-container input {
  font-family: 'Lato';
  height: 52px;
  padding: 15px 12px;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-size: 18px;
  color: #022047;
  caret-color: #00ceb8;
  transition: all 0.2s ease;
  width: 100%;
}
.box-text-input .input-container input::placeholder {
  color: #a3bbd3;
  letter-spacing: 0.08px;
}
.box-text-input .input-container input:disabled {
  color: #a3bbd3;
  background: #edf2f9;
}
.box-text-input .input-container .bottom-border {
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
.box-text-input .input-container .message-indicator {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-text-input .input-container .message-indicator img {
  width: 16px;
}
.box-text-input .input-container .password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  cursor: pointer;
  background: #fff;
}
.box-text-input label {
  font-size: 12px;
  line-height: 18px;
  color: #8190b0;
  display: block;
  transition: all 0.2s ease;
  margin-bottom: 3px;
}
.box-text-input .input-message {
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-text-input.focus .input-container {
  box-shadow: 0 9px 10px 0 rgba(2,32,71,0.1);
}
.box-text-input.focus >label {
  color: #00ceb8;
}
.box-text-input.error .input-container {
  padding-right: 46px;
}
.box-text-input.error >label {
  color: #ff2b6d;
}
.box-text-input.error .input-message {
  color: #ff2b6d;
}
.box-text-input.error .message-indicator {
  background: #f9d3cf;
  color: #ff2b6d;
  font-size: 18px;
}
.box-text-input.warning .input-container {
  padding-right: 46px;
}
.box-text-input.warning label {
  color: #ff7a5a;
}
.box-text-input.warning .input-message {
  color: #ff7a5a;
}
.box-text-input.warning .message-indicator {
  background: rgba(241,161,83,0.3);
  color: #ff7a5a;
}
.box-text-input.success .input-container {
  padding-right: 46px;
}
.box-text-input.success label {
  color: #00ceb8;
}
.box-text-input.success .input-message {
  color: #00ceb8;
}
.box-text-input.success .message-indicator {
  background: #cbf3dc;
  color: #4ce2a7;
}
.box-text-input.disabled .input-container {
  padding-right: 0;
}
.box-text-input.disabled label,
.box-text-input.disabled .input-message {
  color: #8190b0;
}
.box-text-input.disabled .message-indicator {
  display: none;
}
.box-text-input.disabled .bottom-border {
  opacity: 0;
}
.switch-container {
  display: flex;
  position: relative;
  border-radius: 7px;
  height: 14px;
  width: 36px;
  background-color: #808080;
  align-items: center;
}
.switch-container .switch-circle {
  display: flex;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  left: 0px;
  transition: all 0.3s ease-in-out;
}
.switch-container .switch-circle.enabled {
  left: 16px;
  background-color: #008000;
  transition: all 0.25s ease-in-out;
}
.validation-alert {
  padding: 21px 26px;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'Muli';
  display: flex;
  flex-direction: row;
}
.validation-alert i {
  font-size: 20px;
}
.validation-alert.error {
  background-color: rgba(250,150,170,0.5);
  color: #ff2b6d;
}
.validation-alert.error i {
  color: #ff2b6d;
}
.validation-alert.confirmation {
  background-color: rgba(76,226,167,0.2);
  color: #00ceb8;
}
.validation-alert.confirmation i {
  color: #00ceb8;
}
.validation-alert.info {
  background-color: rgba(110,125,245,0.15);
  color: #6e7df5;
}
.validation-alert.info i {
  color: #6e7df5;
}
.validation-alert.warning {
  background-color: rgba(254,221,170,0.5);
  color: #ff7a5a;
}
.validation-alert.warning i {
  color: #ff7a5a;
}
.validation-alert .message {
  flex-grow: 1;
  align-self: center;
  padding: 0 22px;
}
.validation-alert .dismiss-button {
  padding-left: 10px;
  cursor: pointer;
  position: relative;
}
.validation-alert .dismiss-button:after {
  content: "";
  padding: 20px;
  position: absolute;
  left: -2px;
  top: -10px;
}
.horizontal-pill-selector {
  height: 32px;
  border-radius: 16px;
  padding: 3px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  position: relative;
}
.horizontal-pill-selector .option-item {
  height: 26px;
  line-height: 26px;
  padding-left: 13px;
  padding-right: 13px;
  border-radius: 13px;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  transition: all 0.1s ease;
  z-index: 10;
}
.horizontal-pill-selector .selected-pill-background {
  position: absolute;
  height: 26px;
  box-sizing: border-box;
  top: 3px;
  transition: all 0.1s ease;
  z-index: 0;
  border-radius: 13px;
}
.horizontal-pill-selector .extra-options-wrapper {
  position: absolute;
  right: 0px;
  top: 25px;
  display: none;
  z-index: 20;
}
.horizontal-pill-selector .extra-options-wrapper:hover {
  display: block;
}
.horizontal-pill-selector .extra-options {
  position: relative;
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
  border-radius: 4px;
  z-index: 999;
}
.horizontal-pill-selector .extra-options .extra-option-item {
  min-width: 88px;
  box-sizing: border-box;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 16px;
  padding-right: 16px;
}
.horizontal-pill-selector .more-option-item .more-text {
  width: 38px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  text-align: center;
}
.horizontal-pill-selector .more-option-item:hover .extra-options-wrapper {
  display: block;
}
.horizontal-dot-loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.horizontal-dot-loader span {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin: 0 2px;
  background-color: #fff;
  display: block;
  opacity: 0;
}
.horizontal-dot-loader span:nth-child(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
  -moz-animation: 1s blink infinite 0.3333s;
  -ms-animation: 1s blink infinite 0.3333s;
  -o-animation: 1s blink infinite 0.3333s;
  animation: 1s blink infinite 0.3333s;
}
.horizontal-dot-loader span:nth-child(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
  -moz-animation: 1s blink infinite 0.6666s;
  -ms-animation: 1s blink infinite 0.6666s;
  -o-animation: 1s blink infinite 0.6666s;
  animation: 1s blink infinite 0.6666s;
}
.horizontal-dot-loader span:nth-child(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
  -moz-animation: 1s blink infinite 0.9999s;
  -ms-animation: 1s blink infinite 0.9999s;
  -o-animation: 1s blink infinite 0.9999s;
  animation: 1s blink infinite 0.9999s;
}
@-moz-keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}
@-o-keyframes blink {
  50% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}
.tab_component {
  display: flex;
  flex-direction: row;
}
.auction-bid-input {
  display: flex;
  flex-direction: row;
  height: 65px;
  padding-left: 14px;
  padding-right: 14px;
  position: relative;
  justify-content: space-between;
}
.auction-bid-input .MuiCircularProgress-colorPrimary {
  color: #2c3749;
}
.auction-bid-input .MuiCircularProgress-colorSecondary {
  color: #fff;
}
.auction-bid-input .auction-bid-container {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-left: 16px;
  height: 48px;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  width: 544px;
}
.auction-bid-input input {
  border: none;
  background: transparent;
  outline: none;
}
.auction-bid-input .error-message-container {
  z-index: 999;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  top: -50px;
}
.auction-bid-input .error-message-container .error-message {
  background-color: #ff2b6d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  height: 35px;
}
.auction-bid-input .error-message-container .error-message .error-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
  margin-left: 4px;
  margin-right: 10px;
}
.auction-bid-input .error-message-container .error-message .triangle {
  position: absolute;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ff2b6d;
  z-index: 999;
}
.auction-bid-input .nomination-text {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}
.auction-bid-input .disabled {
  opacity: 0.3;
}
.auction-bid-input .button {
  cursor: pointer;
  transition: all 0.1s linear;
}
.auction-bid-input .button:hover {
  transform: scale(1.15);
}
.auction-bid-input .button.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.auction-bid-input .linear_gradient {
  background-image: linear-gradient(to top, #89a6fb, #625ee4);
  cursor: pointer;
  display: flex;
  margin-left: 15px;
  align-items: center;
  border-radius: 28px;
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 258px;
  height: 48px;
}
.auction-bid-input .linear_gradient.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.auction-bid-input .highest-offer-container {
  width: 258px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.auction-bid-input .highest-offer-container .highest-offer-text {
  color: #feaf58;
}
.auction-bid-input .highest-offer-container.theme-dark .highest-offer-text {
  color: #ffae58;
}
.auction-bid-input .priceText {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
}
.auction-bid-input .priceIcon {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: 0.5px;
}
.auction-bid-input .bidInfo {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
}
.auction-bid-input .bidText {
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  color: #fff;
}
.auction-bid-input .stats-header {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
  text-transform: uppercase;
}
.auction-bid-input .stats-value {
  flex-grow: 0;
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  text-transform: uppercase;
}
.auction-bid-input .circular-progress-label {
  flex-grow: 0;
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
}
.auction-bid-input .headerText {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
}
.auction-bid-input .subHeaderText {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
}
.auction-bid-input .pass-button {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
}
.auction-bid-input .pass-button.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.auction-bid-input .pass-button .pass-text {
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  margin-left: 2px;
  user-select: none;
}
.auction-bid-input .pass-button .pass-line {
  border-bottom-width: 2px;
  border-style: solid;
  width: 14px;
  margin-bottom: 2px;
}
.auction-player-header {
  width: calc(100% - 3px);
}
.auction-player-header .auction-tab-container {
  position: absolute;
  width: 100vw;
  pointer-events: none;
  background-image: linear-gradient(to top, #000, rgba(0,0,0,0));
}
.auction-player-header .auction-tab-container.theme_light {
  background-image: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
}
.auction-player-header .headerText {
  font-family: 'Poppins';
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  white-space: nowrap;
}
.auction-player-header .projection-text {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
}
.auction-player-header .subHeaderText {
  font-family: 'Lato';
  font-size: 11;
  letter-spacing: 0;
  white-space: nowrap;
}
.auction-player-header .playerInfoText {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
  white-space: nowrap;
}
.auction-player-header .left-component {
  margin-left: 16px;
  margin-top: 22px;
}
.auction-player-header .right-header {
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.auction-player-header .right-header .bid-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 200px);
}
.auction-player-header .right-header .bid-container .bid-item {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
  margin-bottom: 20px;
}
.auction-player-header .right-header .bid-container .bid-item .offer-text {
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
}
.auction-player-header .right-header .bid-container .bid-item .team-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  margin-left: 3px;
}
.auction-player-header .right-header .button-placeholder {
  height: 100%;
  width: 130px;
}
.auction-timer {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.auction-timer .auction-timer-text {
  font-family: 'Poppins';
  font-size: 32px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.5px;
  text-align: left;
  color: #3a465b;
}
.auction-timer .auction-timer-paused-text {
  font-family: 'Poppins';
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.5px;
  text-align: left;
  color: #3a465b;
}
.auction-timer .auction-timer-icon {
  width: 40px;
  height: 40px;
}
.auction-timer.theme_dark .auction-timer-text {
  color: #d8e2ed;
}
.auction-timer.theme_dark .auction-timer-paused-text {
  color: #d8e2ed;
}
.auction-user-budget-text {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 4px 16px 0px 16px;
}
.auction-user-budget-text .max-text {
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  text-align: left;
}
.auction-user-budget-text .max-number {
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  text-align: left;
}
.auction-user-budget-text .max-icon-container {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  position: relative;
  display: flex;
  z-index: 999;
}
.auction-user-budget-text .max-icon-container .max-icon {
  width: 10px;
  height: 10px;
  top: 0px;
  left: 0px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  font-family: 'Poppins';
  font-size: 8px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  line-height: 1.6;
}
.auction-user-budget-text .max-icon-container .tooltip {
  position: absolute;
  visibility: hidden;
  top: 20px;
  display: 'flex';
  flex-direction: column;
  padding: 8px 16px 8px 16px;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
}
.auction-user-budget-text .max-icon-container .tooltip .tooltip-text {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: -0.15px;
  text-align: left;
  white-space: nowrap;
}
.auction-user-budget-text .max-icon-container:hover .tooltip {
  visibility: visible;
}
.auction-user-budget-text .roster-number {
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  text-align: right;
}
.auction-user-budget-text .remaining-text {
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  text-align: right;
}
.auction-user-budget-text .slash-text {
  font-family: 'Poppins';
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
}
.autopick-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}
.autopick-on-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1d5e2;
}
.create-draft-form .num-teams-options .num-team-option.selected {
  background: #ccc;
}
.draft-afk-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(216,226,237,0.302);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.draft-afk-overlay .dialog-container {
  width: 360px;
  height: 460px;
  padding: 20px;
  background-color: #2d3649;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.draft-afk-overlay .dialog-container .header-text {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}
.draft-afk-overlay .dialog-container .afk-image {
  width: 240px;
  height: 240px;
}
.draft-afk-overlay .dialog-container .reminder-text {
  width: 260px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #a3bbd3;
}
.draft-afk-overlay .dialog-container .autopick-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-family: 'Inter';
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: right;
  color: #eef2f7;
}
.draft-afk-overlay .dialog-container .autopick-container .auction-timer .auction-timer-text {
  font-size: 18px;
}
.draft-cell-emoji {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: auto;
}
.draft-cell-emoji .draft-emoji {
  margin-right: -6px;
  pointer-events: auto;
}
.draft-cell-emoji .draft-emoji img {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.draft-cell-emoji .overlay {
  position: absolute;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 100;
  pointer-events: auto;
  width: 200px;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.draft-cell-emoji .overlay.below {
  top: calc(100% - 1px);
}
.draft-cell-emoji .overlay.above {
  bottom: calc(100% - 1px);
}
.draft-cell-emoji .overlay.left {
  left: 0;
}
.draft-cell-emoji .overlay.right {
  right: 0;
}
.draft-cell-emoji .overlay::-webkit-scrollbar {
  width: 12px;
}
.draft-cell-emoji .overlay::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border: 2px solid #fff;
  border-radius: 8px;
}
.draft-cell-emoji .overlay::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
.draft-cell-emoji .overlay ul {
  list-style: none;
  padding-bottom: 8px;
  padding-top: 8px;
}
.draft-cell-emoji .overlay li {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  height: 34px;
  padding-left: 16px;
  padding-right: 16px;
}
.draft-cell-emoji .overlay li div {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 8px;
  margin-left: 8px;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  color: #39465b;
}
.draft-cell-emoji .overlay li img {
  width: 20px;
  height: 20px;
}
.theme-dark .draft-cell-emoji .overlay {
  background-color: #363957;
}
.theme-dark .draft-cell-emoji .overlay::-webkit-scrollbar-thumb {
  border-color: #363957;
}
.theme-dark .draft-cell-emoji .overlay li div {
  color: #fff;
}
.draft-popup-menu {
  background: #fff;
  border-radius: 4px;
  padding: 0 !important;
  color: #666;
}
.draft-popup-menu >.item {
  padding: 10px 30px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 50px;
  font-size: 16px;
}
.draft-popup-menu >.item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.draft-popup-menu >.item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.draft-popup-menu >.item .description {
  font-weight: normal;
  font-size: 13px;
  margin-top: 4px;
  color: #999;
}
.draft-popup-menu >.item:hover {
  background: #efefef;
}
.draft-chat {
  display: flex;
  flex-direction: column;
  height: 50vh;
}
.draft-chat .body {
  flex-grow: 1;
}
.draft-chat .footer {
  padding: 1px 20px 10px 20px;
}
.draft-conversion-billboard {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: #555;
  font-family: 'Inter', sans-serif;
}
.draft-conversion-billboard .inner-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.draft-conversion-billboard .inner-container .button {
  margin: 10px;
}
.draft-conversion-billboard .inner-container .link-button {
  background-color: #dbdbdb;
  background-image: url("/images/icons/icon_right_arrow-af84bc885ba3521204731e3e8e63377f.png?vsn=d");
  background-position: 90% center;
  background-size: 20px;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  border-color: #ccc;
  border-width: 1px;
  color: #555;
}
.draft-conversion-billboard .inner-container .link-button:hover {
  background-color: #ccc;
  background-image: url("/images/icons/icon_right_arrow-af84bc885ba3521204731e3e8e63377f.png?vsn=d");
  background-position: 90% center;
  background-size: 20px;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  color: #555;
}
.draft-conversion-billboard .inner-container .top-image {
  margin-bottom: 6px;
}
.draft-conversion-billboard .inner-container .paragraph {
  margin-top: 10px;
  font-size: 14px;
}
.draft-conversion-billboard .inner-container h1 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 15px;
  font-family: 'Poppins', sans-serif;
}
.draft-conversion-billboard .inner-container .sub-text {
  color: #888;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
.draft-conversion-billboard .inner-container .comfirmation {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.draft-conversion-billboard .inner-container .comfirmation .fa {
  color: #00c853;
  font-size: 25px;
  margin-right: 10px;
}
.theme-dark .draft-conversion-billboard {
  color: #fff;
}
.draft-emoji-selector {
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
  height: 34px;
  border-radius: 24px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: all 0.1s linear;
  position: relative;
}
.draft-emoji-selector .draft-emoji {
  position: relative;
}
.draft-emoji-selector .draft-emoji:hover img {
  transform: scale(1.3);
}
.draft-emoji-selector .draft-emoji .highlight {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  background: rgba(103,120,151,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  display: none;
}
.draft-emoji-selector .draft-emoji.selected .highlight {
  display: block;
}
.draft-emoji-selector .draft-emoji img {
  width: 30px;
  height: 30px;
  margin-left: 2px;
  margin-right: 2px;
  pointer-events: none;
  user-select: none;
  transition: transform 0.1s linear;
}
.draft-emoji-selector .animate {
  -webkit-animation: draftEmojiFloatUp 0.8s ease-out forwards;
  -moz-animation: draftEmojiFloatUp 0.8s ease-out forwards;
  -ms-animation: draftEmojiFloatUp 0.8s ease-out forwards;
  -o-animation: draftEmojiFloatUp 0.8s ease-out forwards;
  animation: draftEmojiFloatUp 0.8s ease-out forwards;
  transform-origin: center center;
}
@-moz-keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
@-webkit-keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
@-o-keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
@keyframes draftEmojiFloatUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
.theme-dark .draft-emoji-selector {
  background: #677897;
}
.theme-dark .draft-emoji .highlight {
  background: rgba(184,191,255,0.3);
}
.draft-header {
  height: 80px;
  width: 100vw;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  padding: 0 100px;
  box-sizing: border-box;
  display: flex;
  padding-top: 10px;
  font-family: 'Muli';
}
.draft-header .middle {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
}
.draft-header .middle .start-draft-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 21px 28px;
  height: 56px;
  background-color: #a3acff;
  color: #022047;
  border-radius: 28px;
  cursor: pointer;
}
.draft-header .middle .start-draft-button .start-draft-text {
  font-size: 14px;
  color: #022047;
  font-weight: 600;
}
.draft-header .center {
  text-align: center;
}
.draft-header .center .title {
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
}
.draft-header .center .subheader {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}
.draft-header .center .subheader .draft-settings-text {
  color: #677897;
}
.draft-header .center .subheader.theme-dark .draft-settings-text {
  color: #b9c4d4;
}
.draft-header .left {
  padding-left: 20px;
  position: absolute;
  left: 0;
  height: 50px;
  display: flex;
}
.draft-header .right {
  padding-right: 20px;
  flex-direction: row;
  align-items: center;
  width: 300px;
  position: relative;
  right: 0;
  height: 50px;
  display: flex;
}
.draft-header .action-button {
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
  transition: all 0.2s ease;
  margin-left: 5px;
}
.draft-header .action-button.selected {
  background: #677897;
  color: #fff;
}
.draft-header .action-button i {
  font-size: 24px;
}
.draft-header .action-button .fa-chevron-left {
  font-size: 20px;
}
.draft-header .text-button {
  font-size: 13px;
}
.draft-header .settings-button {
  font-size: 13px;
}
.draft-header .draft-settings-text {
  display: flex;
  text-align: center;
  justify-content: center;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft-header .middot {
  padding-left: 4px;
  padding-right: 4px;
}
.draft-header .share-link {
  cursor: pointer;
}
.draft-header .share-link i {
  padding-left: 5px;
  font-size: 12px;
}
.draft-header .commish-ftue-item {
  position: absolute;
  top: 50px;
  left: -30px;
  font-size: 13px;
  font-family: 'Muli';
}
.draft-header .commish-ftue-item .up-pointer {
  position: absolute;
  background: #3a465b;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  right: -75px;
  top: -3px;
}
.draft-header .commish-ftue-item .copy {
  color: #fff;
  background: #3a465b;
  position: absolute;
  width: 250px;
  left: -200px;
  line-height: 1.5;
  font-size: 16px;
  padding: 20px 20px;
  border-radius: 4px;
  box-shadow: 1px 1px 15px #18202f;
  z-index: 9999;
  font-size: 13px;
}
.draft-header .commish-ftue-item .copy em {
  font-weight: 800;
  letter-spacing: 0.5px;
}
.draft-header .commish-ftue-item img {
  width: 40px;
  opacity: 0.7;
}
.overlay-container {
  position: absolute;
  top: 0;
  width: 100vw;
  pointer-events: none;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}
.overlay-container .inner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.overlay-container .inner-container .overlayHeader {
  width: 164px;
  border-radius: 13px;
  height: 26px;
  background-color: #4a5870;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: left;
  color: #fff;
  margin-top: 10px;
}
.overlay-container .inner-container .overlayHeader.fullScreen {
  margin-top: 0px;
  width: 100vw;
  border-radius: 0px;
  height: 36px;
}
.overlay-container .inner-container .overlayHeader.autoPick {
  background-color: #ff7db6;
  color: #022047;
}
.overlay-container .inner-container .overlayHeader.userPick,
.overlay-container .inner-container .overlayHeader.paused {
  background-color: #a3acff;
  color: #022047;
}
.overlay-container .inner-container .overlayHeader.nomination {
  background-color: #ffae58;
  color: #022047;
}
.overlay-container .inner-container .auction-timer {
  height: 48px;
  margin-left: 10px;
}
.draft-keeper-selection-panel {
  background: #1c212d;
  color: #fff;
  min-width: 400px !important;
  border-radius: 4px;
}
.draft-keeper-selection-panel .league-member-header {
  border: none;
}
.draft-keeper-selection-panel .channel-settings-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.draft-keeper-selection-panel .channel-settings-footer .auction-bid-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  background: #2f3540;
  border-radius: 28px;
  width: 112px;
  height: 40px;
  margin-right: 16px;
}
.draft-keeper-selection-panel .channel-settings-footer .auction-bid-input .auction-price-icon {
  font-family: 'Mulish';
  font-size: 12px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: 0.5px;
  text-align: left;
  color: #d8e2ed;
}
.draft-keeper-selection-panel .channel-settings-footer .auction-bid-input input {
  width: 100px;
  border: none;
  height: 40px;
  outline: none;
  padding-left: 5px;
  font-size: 14px;
  color: #fff;
}
.draft-keeper-selection-panel .channel-settings-footer .auction-bid-input input::placeholder {
  color: #fff;
}
.draft-keeper-selection-panel .channel-settings-footer .form-elements button {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 28px;
  width: 140px;
}
.draft-keeper-selection-panel .channel-settings-footer .form-elements button .button-text {
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  color: #022047;
  white-space: nowrap;
}
.draft-keeper-selection-panel .channel-settings-body {
  max-height: 60vh;
  overflow: auto;
  padding: 0 15px;
}
.draft-keeper-selection-panel .channel-settings-body .content {
  padding: 10px 10px 25px 10px;
  font-size: 14px;
}
.draft-keeper-selection-panel .channel-settings-body .content .form-section {
  margin-top: 0;
}
.draft-list-panel-header {
  color: #fff;
  padding: 32px;
  display: flex;
  align-items: center;
  height: 88px;
  box-sizing: border-box;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.draft-list-panel-header .header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.draft-list-panel-header .name-container {
  flex-grow: 1;
}
.draft-list-panel-header .name-container .name {
  font-size: 24px;
  font-weight: 800;
  font-family: 'Muli';
  line-height: 32px;
}
.draft-list-panel-header .name-container .description {
  color: #7888a4;
  font-size: 12px;
}
.draft-list-panel-header .button {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  text-align: center;
}
.draft-list-panel-header .button:hover {
  color: #ccc;
}
.draft-list-panel-header .button i {
  transition: all 0.1s ease;
}
.draft-list-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #fff;
}
.draft-list-panel .mock-draft-tab-selector {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 32px;
}
.draft-list-panel .mock-draft-tab-selector .horizontal-pill-selector {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.draft-list-panel .mock-draft-tab-selector .horizontal-pill-selector .option-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.draft-list-panel .mock-draft-tab-selector .horizontal-pill-selector .selected-pill-background {
  background-color: #00ceb8;
  shadow: none;
}
.draft-list-panel .tabs-container {
  -webkit-flex: 0 0 48px !important;
  -ms-flex: 0 0 48px !important;
  flex: 0 0 48px !important;
}
.draft-list-panel .tabs-container .tab-item {
  border-right: none !important;
  font-size: 16px;
}
.draft-list-panel .tabs-container .tab-item .description {
  font-size: 13px;
}
.draft-list-panel .list {
  flex-grow: 1;
  overflow: auto;
  padding: 0 16px;
}
.draft-list-panel .tab-layout-container {
  background: #283245;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.draft-list .draft-list-item {
  padding: 15px 20px 15px 20px;
  transition: all 0.1s ease;
  cursor: pointer;
  border-bottom: 1px solid #18202e;
}
.draft-list .draft-list-item:hover {
  opacity: 0.9;
}
.draft-list .draft-list-item .header {
  display: flex;
  align-items: center;
}
.draft-list .draft-list-item .header .status {
  font-size: 9px;
  font-weight: bold;
  padding: 4px 13px;
  border-radius: 3px;
  color: #fff;
}
.draft-list .draft-list-item .header .status.pre_draft {
  background: #58a7ff;
}
.draft-list .draft-list-item .header .status.drafting {
  background: #ffae58;
}
.draft-list .draft-list-item .header .status.paused {
  background: #ff2a6d;
}
.draft-list .draft-list-item .header .status.complete {
  background: #00ceb8;
}
.draft-list .draft-list-item .header .created {
  flex-grow: 1;
  font-size: 11px;
  color: #aaa;
  text-align: right;
}
.draft-list .draft-list-item .body .title {
  font-weight: bold;
  margin: 5px 0 10px 0;
  font-size: 16px;
  text-align: center;
}
.draft-list .draft-list-item .body .season {
  font-size: 10px;
  text-align: center;
}
.draft-list .draft-list-item .body .meta {
  display: flex;
  flex-direction: row;
  margin: 15px;
}
.draft-list .draft-list-item .body .setting-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  border-left: 1px solid #efefef;
  padding: 10px 0;
}
.draft-list .draft-list-item .body .setting-item .value {
  font-size: 16px;
  font-weight: 300;
}
.draft-list .draft-list-item .body .setting-item .label {
  font-size: 10px;
}
.draft-list .draft-list-item .body .setting-item:first-child {
  border-left: none;
}
.draft-list .draft-list-item .body .roster {
  font-size: 11px;
  text-align: center;
}
.draft-pick-modal {
  box-shadow: 1px 1px 10px #18202f;
  width: 60vw;
  height: 80vh;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  height: 50vh;
  width: 970px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.draft-pick-modal.auction {
  padding-top: 30px;
  height: 70vh;
}
.draft-pick-modal > .header {
  text-align: center;
  padding: 15px;
  font-size: 14px;
  font-family: 'Muli';
  letter-spacing: 0.5px;
}
.draft-pick-modal .draft-ranking-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.draft-pick-modal .draft-ranking-container .draft-rankings {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-bottom: 0;
}
.draft-pick-modal .draft-ranking-container .draft-rankings >.body-container {
  flex-grow: 1;
}
.draft-rankings {
  background: #fff;
  padding: 15px 0px;
  height: 100%;
  color: #3a465b;
}
.draft-rankings .body-container {
  height: calc(100% - 62px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none;
}
.draft-rankings .body-container::-webkit-scrollbar {
  display: none;
}
.draft-rankings .header-controls {
  padding-bottom: 0;
}
.draft-rankings .header-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
}
.draft-rankings .header-filters .custom-switch {
  pointer-events: none;
}
.draft-rankings .header-filters .filter-button {
  cursor: pointer;
  font-size: 10px;
  font-family: 'Muli';
  text-transform: uppercase;
  margin-right: 15px;
  user-select: none;
}
.draft-rankings .header-filters .filter-button .custom-checkbox-item .meta .name {
  font-size: 10px;
  color: #fbfbfb;
}
.draft-rankings .header-filters .filter-button .custom-checkbox-item .custom-checkbox {
  width: 18px;
  height: 18px;
  -webkit-flex: 0 0 18px;
  -ms-flex: 0 0 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border-color: #7988a1;
}
.draft-rankings .header-filters .filter-button .custom-checkbox-item .custom-checkbox.checked {
  background: #00ceb8;
  border-color: #00ceb8;
}
.draft-rankings .header-filters .filter-button .custom-checkbox-item .custom-checkbox.checked.nba {
  background: #ffae58;
  border-color: #ffae58;
}
.draft-rankings .header-filters .filter-button .custom-checkbox-item .custom-checkbox .checkmark {
  color: #022047;
  padding-bottom: 2px;
  padding-left: 1px;
}
.draft-rankings .header-filters .filter-button .custom-checkbox-item .custom-checkbox .checkmark::before {
  font-size: 15px !important;
}
.draft-rankings .header-filters.theme_light .custom-checkbox {
  border-color: #3a465b;
}
.draft-rankings .header-filters.theme_light .custom-checkbox-item .meta .name {
  color: #3a465b;
}
.draft-rankings .header-tab-container {
  display: flex;
  align-items: center;
}
.draft-rankings .positions-filter {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 20px;
  margin-right: 20px;
}
.draft-rankings .player-search {
  position: relative;
  margin-right: 50px;
  margin-left: 20px;
  flex-basis: 300px;
}
.draft-rankings .player-search input {
  width: 100%;
  border: none;
  background: #edf2f9;
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
  outline: none;
  font-size: 13px;
  padding: 0 10px;
  padding-left: 38px;
  font-size: 14px;
  color: #677897;
}
.draft-rankings .player-search input::placeholder {
  color: rgba(103,120,151,0.4);
}
.draft-rankings .player-search i {
  position: absolute;
  top: 10px;
  left: 16px;
  color: rgba(103,120,151,0.4);
}
.draft-rankings .col-sml {
  width: 40px;
}
.draft-rankings .col-sml.highlight {
  background-color: #dfeaff;
}
.draft-rankings .col-sml .value {
  font-size: 12px;
  font-family: 'Muli';
}
.draft-rankings .col-med {
  width: 47px;
}
.draft-rankings .col-med.highlight {
  background-color: #dfeaff;
}
.draft-rankings .col-med .value {
  font-size: 12px;
  font-family: 'Muli';
}
.draft-rankings .col-lrg {
  width: 80px;
}
.draft-rankings .col-border-right {
  border-right: 1px solid #efefef;
}
.draft-rankings .col-border-bottom {
  border-bottom: 1px solid #efefef;
}
.draft-rankings .stat-cell {
  height: 44px;
  display: flex;
  align-items: center;
}
.draft-rankings .header {
  font-size: 12px;
  font-family: 'Muli';
  color: #677897;
  border-bottom: solid 1px #d8e2ed;
  margin-top: 10px;
}
.draft-rankings .header .col-sml {
  cursor: pointer;
}
.draft-rankings .header .col-med {
  cursor: pointer;
}
.draft-rankings .header .stat-section-header {
  font-weight: bold;
}
.draft-rankings .header .row {
  display: flex;
}
.draft-rankings .header .row >div {
  padding: 8px 0px 8px 10px;
}
.draft-rankings .header .row >.rank {
  width: 30px;
  padding-right: 5px;
  padding-left: 43px;
  font-size: 12px;
  font-family: 'Muli';
}
.draft-rankings .header .row >.position {
  width: 40px;
}
.draft-rankings .header .row >.name {
  width: 205px;
  padding-left: 10px;
}
.draft-rankings .header .row >.pts-and-proj {
  width: 90px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.draft-rankings .header .row >.rush-header,
.draft-rankings .header .row >.rec-header,
.draft-rankings .header .row >.pass-header {
  width: 140px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.draft-rankings .header .col-border-right {
  border-right: 1px solid #fff;
}
.draft-rankings .header.lol >.row >.name.section-name {
  width: 225px;
}
.draft-rankings .header.lol .pts-and-proj {
  width: 140px;
}
.draft-rankings .header.lol .kda-header {
  width: 140px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.draft-rankings .header.lol .laning-header {
  width: 140px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.draft-rankings .header.lol .team-bonus-header {
  width: 240px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.draft-rankings .player-loader-item {
  display: flex;
  height: 29px;
  padding: 5px 13px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.draft-rankings .player-loader-item .loader-bar {
  flex-grow: 1;
  height: 11px;
  border-radius: 9px;
  background: #efefef;
}
.draft-rankings .player-rank-item {
  display: flex;
  font-size: 13px;
  cursor: pointer;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
}
.draft-rankings .player-rank-item .expected-draft-player-divider {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -1px;
  border-bottom: 1px solid #00c852;
  padding-left: 107px;
  color: #008838;
  font-size: 7px;
  letter-spacing: 0.2px;
  pointer-events: none;
  z-index: 2;
}
.draft-rankings .player-rank-item .expected-draft-player-divider .label {
  position: relative;
  bottom: -7px;
}
.draft-rankings .player-rank-item .expected-draft-player-divider .round {
  position: relative;
  bottom: -7px;
  padding-left: 10px;
}
.draft-rankings .player-rank-item .expected-draft-player-divider .overall-pick {
  position: relative;
  bottom: -7px;
  padding-left: 10px;
}
.draft-rankings .player-rank-item .menu {
  width: 97px;
  height: 29px;
  position: absolute;
  left: -110px;
  background: #75c525;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  line-height: 29px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.draft-rankings .player-rank-item .menu.drafting {
  left: 0 !important;
}
.draft-rankings .player-rank-item .menu.wait {
  background: #555;
}
.draft-rankings .player-rank-item .menu .spinner {
  width: 14px !important;
  height: 14px !important;
  position: relative;
  top: 3px;
}
.draft-rankings .player-rank-item .avatar-player {
  margin-right: 10px;
}
.draft-rankings .player-rank-item:hover {
  background: #efefef !important;
}
.draft-rankings .player-rank-item:hover .menu {
  left: 0;
}
.draft-rankings .player-rank-item.show-watchlist-action:hover .name {
  padding-left: 35px !important;
}
.draft-rankings .player-rank-item.show-watchlist-action:hover .watchlist-action {
  transform: scale(1) !important;
}
.draft-rankings .player-rank-item.watching {
  background: #ffffc7 !important;
}
.draft-rankings .player-rank-item.watching .name {
  padding-left: 35px !important;
}
.draft-rankings .player-rank-item.watching .watchlist-action {
  transform: scale(1) !important;
}
.draft-rankings .player-rank-item.selected {
  background: #efefef;
}
.draft-rankings .player-rank-item.selected .menu {
  left: 0;
}
.draft-rankings .player-rank-item >div {
  padding: 8px 0px 8px 10px;
}
.draft-rankings .player-rank-item >.rank {
  width: 30px;
  padding-right: 5px;
}
.draft-rankings .player-rank-item >.position {
  width: 40px;
  text-align: left;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
.draft-rankings .player-rank-item >.position .position-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 3px;
}
.draft-rankings .player-rank-item >.name {
  width: 216px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}
.draft-rankings .player-rank-item >.name .name-wrapper {
  text-align: left;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
}
.draft-rankings .player-rank-item >.name .injury-status {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 10px;
  color: #f00;
}
.draft-rankings .player-rank-item >.name .injury-status.probable {
  color: #ffa500;
}
.draft-rankings .player-rank-item >.name .team {
  font-size: 11px;
  color: #777;
  padding-left: 10px;
}
.draft-rankings .player-rank-item >.name .watchlist-action {
  padding-right: 5px;
  transform: scale(0);
  transition: all 0.2s ease;
  position: absolute;
  left: 3px;
  padding: 10px;
}
.draft-rankings .player-rank-item >.name .watchlist-action .fa-plus {
  font-size: 6px;
}
.draft-right-panel .panel-tabs .tabs-container .round-tab {
  text-transform: uppercase;
  color: #6e7df5;
}
.draft-right-panel .tab-layout-container {
  overflow: hidden;
  min-width: 350px;
}
.draft-right-panel .panel-inner-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.draft-right-panel .panel-inner-wrapper .right-panel-wrapper .chat-panel-container {
  height: calc(100% - 42px);
}
.draft-right-panel .queue-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.draft-right-panel .queue-wrapper .draft-queue {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.draft-right-panel .queue-wrapper .draft-queue .sortable-queue-list {
  height: 100%;
  overflow: auto;
}
.draft-right-panel .roster-panel-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.draft-right-panel .chat-panel-container {
  width: 100%;
}
.draft-right-panel .right-panel-sub-wrapper {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}
.draft-right-panel .right-panel-sub-wrapper .right-panel-sub-wrapper-header {
  height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  font-family: 'Muli';
  font-weight: 700;
  letter-spacing: 1px;
  color: #6e7df5;
  padding: 0 20px;
}
.draft-right-panel .right-panel-wrapper {
  flex-grow: 1;
}
.draft-settings-draft-order .channel-settings-body {
  padding: 20px 25px;
}
.draft-settings-draft-order .team-item {
  height: 40px;
  align-items: center;
  display: flex;
  cursor: move;
}
.draft-settings-draft-order .team-item:hover {
  background: #18202f;
}
.draft-settings-draft-order .team-item .position {
  width: 30px;
  font-size: 12px;
  font-weight: 900;
  padding-left: 15px;
}
.draft-settings-draft-order .team-item .name {
  padding-left: 10px;
  font-weight: bold;
}
.sortable-list-team-item {
  z-index: 999999;
  height: 40px;
  align-items: center;
  display: flex;
}
.sortable-list-team-item .position {
  width: 30px;
  font-size: 12px;
  font-weight: 900;
}
.sortable-list-team-item .name {
  padding-left: 10px;
  font-weight: bold;
}
.draft-settings-general {
  position: relative;
}
.draft-settings-general .custom-dropdown {
  width: 250px;
}
.draft-settings-general .text-input {
  width: 560px;
}
.draft-settings-general .channel-settings-body {
  padding: 20px 25px;
}
.draft-settings-general .nomination-section {
  margin-bottom: 10px;
}
.draft-settings-general .section {
  margin-bottom: 40px;
}
.draft-settings-general .section .label {
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  font-weight: bold;
  margin-bottom: 5px;
}
.draft-settings-general .custom-radio-group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  width: 600px;
}
.draft-settings-general .custom-radio-group .custom-radio-item {
  margin: 0px 30px 10px 0px;
}
.draft-settings-general .autopause-wrap {
  margin-top: 10px;
  margin-left: 15px;
}
.draft-settings-general .autopause-wrap .autopause-times {
  margin: 16px 0px;
}
.draft-settings-general .autopause-wrap .autopause-times.disabled {
  opacity: 0.5;
}
.draft-settings-general .autopause-wrap .autopause-times .label {
  font-size: 10px;
  color: #a3bbd3;
  margin-bottom: 0px;
}
.draft-settings-general .autopause-wrap .autopause-times .to {
  margin: 10px 4px 0px;
}
.draft-settings-general .autopause-wrap .autopause-times .time-picker {
  margin-top: 10px;
}
.draft-settings-general .autopick-wrap {
  margin-top: 10px;
  margin-left: 15px;
}
.draft-settings-general .draft-type .custom-horizontal-select-item {
  width: 80px;
}
.draft-settings-panel {
  background: #283244;
  width: 70vw;
  height: 70vh;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
  color: #fff;
}
.draft-settings-panel .save-changes-confirmation {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,0.6);
  color: #fff;
  z-index: 9;
  font-size: 15px;
  font-weight: bold;
}
.draft-settings-panel .save-changes-confirmation >.confirmation-buttons {
  display: flex;
  margin-top: 15px;
}
.draft-settings-panel .save-changes-confirmation >.confirmation-buttons .button {
  margin-right: 10px;
}
.draft-settings-roster .channel-settings-body {
  padding: 20px 25px;
}
.draft-settings-roster .roster-size {
  padding: 30px 25px 10px 25px;
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  font-weight: bold;
  border-bottom: 1px solid #efefef;
}
.draft-settings-roster .roster-item {
  display: flex;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding-left: 25px;
}
.draft-settings-roster .roster-item .fa-plus-circle,
.draft-settings-roster .roster-item .fa-minus-circle {
  opacity: 0.7;
}
.draft-settings-roster .roster-item .position {
  flex-grow: 1;
  font-size: 14px;
  font-weight: bold;
}
.draft-settings-roster .roster-item .color {
  height: 30px;
  width: 30px;
  border-radius: 3px;
  margin: 0 10px;
}
.draft-settings-roster .roster-item .color.slots_qb {
  background: #ff2a6d;
}
.draft-settings-roster .roster-item .color.slots_rb {
  background: #00ceb8;
}
.draft-settings-roster .roster-item .color.slots_wr {
  background: #58a7ff;
}
.draft-settings-roster .roster-item .color.slots_te {
  background: #ffae58;
}
.draft-settings-roster .roster-item .color.slots_flex {
  background: #3a465b;
}
.draft-settings-roster .roster-item .color.slots_rec_flex {
  background: #3a465b;
}
.draft-settings-roster .roster-item .color.slots_super_flex {
  background: #3a465b;
}
.draft-settings-roster .roster-item .color.slots_wrrb_flex {
  background: #3a465b;
}
.draft-settings-roster .roster-item .color.slots_idp_flex {
  background: #3a465b;
}
.draft-settings-roster .roster-item .color.slots_k {
  background: #bd66ff;
}
.draft-settings-roster .roster-item .color.slots_def {
  background: #7988a1;
}
.draft-settings-roster .roster-item .color.slots_dl {
  background: #ff795a;
}
.draft-settings-roster .roster-item .color.slots_lb {
  background: #6d7df5;
}
.draft-settings-roster .roster-item .color.slots_db {
  background: #7988a1;
}
.draft-settings-roster .roster-item .color.bench {
  background: #a3bbd3;
}
.draft-settings-roster .roster-item .action {
  display: flex;
}
.draft-settings-roster .roster-item .action >div {
  width: 30px;
  line-height: 30px;
  cursor: pointer;
  font-size: 14px;
}
.draft-settings-roster .roster-item .action .plus-action:hover .fa-plus-circle {
  color: #00ceb8;
}
.draft-settings-roster .roster-item .action .minus-action:hover .fa-minus-circle {
  color: #ff2a6d;
}
.draft-settings-roster .add-new-position {
  font-size: 12px;
  font-weight: bold;
}
.draft-settings-roster .add-new-position .header {
  padding: 15px 25px;
  cursor: pointer;
}
.draft-settings-roster .add-new-position .available-positions {
  display: none;
}
.draft-settings-roster .add-new-position:hover .available-positions {
  display: block;
}
.draft-settings-roster .add-new-position:hover .available-positions .available-position-item {
  padding: 10px 25px;
  font-size: 13px;
  cursor: pointer;
}
.draft-settings-roster .add-new-position:hover .available-positions .available-position-item:hover {
  background: #18202f;
}
.draft-status-bar-container {
  transition: all 0.3s ease;
  height: 0;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.draft-status-bar-container.show {
  height: 34px;
}
.draft-status-bar-container.show .draft-status-bar {
  top: 0;
}
.draft-status-bar {
  transition: all 0.3s ease;
  padding: 0px 15px;
  background: #ffd900;
  color: #ad4e09;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  height: 34px;
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
  width: 100vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: fixed;
  top: -34px;
  box-sizing: border-box;
  z-index: 9999;
}
.draft-status-bar.urgent {
  background: #ff2a6d;
}
.draft-status-bar.confirmation {
  background: #00ceb8;
  color: #fff;
}
.full-screen-mode .draft-status-bar-container {
  height: 0;
}
.full-screen-mode .draft-status-bar-container .draft-status-bar {
  top: -34px;
}
.draft-user-header {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
}
.draft-user-header .pass-text {
  font-family: 'Poppins';
  font-size: 6px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 1px;
  margin-left: 2px;
}
.draft-user-header .badge {
  width: 24px;
  height: 24px;
  position: absolute;
  right: -5px;
  bottom: 0px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.draft-user-header .pass-line {
  border-bottom-width: 1px;
  border-style: solid;
  width: 14px;
  margin-bottom: 2px;
}
.draft-user-header .header-container {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
}
.draft-user-header .header-button {
  margin: 3px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.draft-user-header .claim-text {
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  padding: 5px 8px 5px 8px;
  border-radius: 28px;
}
.draft-user-header .header-text {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}
.draft-user-header .header {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}
.draft-user-header .header .video-wrap {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-self: center;
  align-content: center;
  position: relative;
  display: flex;
}
.draftboard-page-unauth {
  background: #efefef;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: row;
}
.draftboard-page-unauth .logo {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  position: absolute;
  padding-left: 40px;
  top: 30px;
  left: 72px;
}
.draftboard-page-unauth .logo img {
  display: inline-block;
  position: absolute;
  width: 45px;
  height: 45px;
  top: -16px;
  left: -5px;
}
.draftboard-page-unauth .overlay-container {
  width: 300px;
  background: #fff;
  height: 100vh;
  overflow: auto;
  -webkit-flex: 0 0 300px;
  -ms-flex: 0 0 300px;
  flex: 0 0 300px;
  padding: 25px 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.draftboard-page-unauth .overlay-container .avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #efefef;
}
.draftboard-page-unauth .overlay-container .name {
  margin-top: 50px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
}
.draftboard-page-unauth .overlay-container .name:first-letter {
  text-transform: capitalize;
}
.draftboard-page-unauth .overlay-container .meta {
  display: flex;
  flex-direction: row;
  margin: 15px;
  width: 100%;
}
.draftboard-page-unauth .overlay-container .setting-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  border-left: 1px solid #efefef;
  padding: 10px 0;
}
.draftboard-page-unauth .overlay-container .setting-item .value {
  font-size: 16px;
  font-weight: 300;
}
.draftboard-page-unauth .overlay-container .setting-item .label {
  font-size: 10px;
}
.draftboard-page-unauth .overlay-container .setting-item:first-child {
  border-left: none;
}
.draftboard-page-unauth .overlay-container .roster {
  font-size: 11px;
  text-align: center;
}
.draftboard-page-unauth .overlay-container .action-buttons {
  margin-top: 30px;
}
.draftboard-page-unauth .overlay-container .action-buttons .button {
  margin-bottom: 10px;
  width: 100%;
}
.draftboard-page-unauth .overlay-container .action-buttons button {
  width: 100%;
}
.draftboard-page-unauth .board-container {
  flex-grow: 1;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
}
.draftboard-page-unauth .board-container .draft-board {
  position: relative;
  width: auto !important;
  padding-bottom: 20px;
}
.draftboard-page-unauth .board-container .draft-board .column-container {
  padding: 0 20px;
}
.draftboard-page-unauth .board-container .draft-board .column-container .custom-team-name {
  pointer-events: none;
  margin-top: 15px;
  margin-bottom: 13px;
}
.draftboard-page-unauth .board-container .draft-board .claim-btn-container {
  margin-top: 5px;
}
.draftboard-page {
  background: #edf2f9;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}
.draftboard-page .draft-board {
  display: flex;
  overflow-y: hidden;
}
.draftboard-page .top-container {
  height: 50vh;
  overflow: auto;
  padding-bottom: 50px;
  box-sizing: border-box;
  transition: height 0.2s ease;
  position: relative;
}
.draftboard-page .top-container.full {
  height: 100vh;
}
.draftboard-page .top-container.full.auction {
  height: 91vh;
}
.draftboard-page .top-container.mid {
  height: 30vh;
}
.draftboard-page .top-container .team-column {
  position: relative;
}
.draftboard-page .top-container .team-header-container {
  opacity: 1;
}
.draftboard-page .top-container .team-header-container-clone {
  display: block !important;
  position: absolute;
  width: 100%;
  top: 0px;
  opacity: 0;
  background: #edf2f9;
  z-index: 9998;
  pointer-events: none;
  padding: 4px 0px 0px 8px;
}
.draftboard-page .top-container.fixed-headers .team-header-container-clone {
  opacity: 1;
  pointer-events: all;
}
.draftboard-page .top-container.fixed-headers .team-header-container-clone .claim-btn {
  display: none;
}
.draftboard-page .top-container.fixed-headers .team-header-container-clone .custom-team-name {
  top: 0px;
}
.draftboard-page .top-container.fixed-headers .team-header-container {
  opacity: 0;
}
.draftboard-page .top-container.fixed-headers-enter .team-header-container-clone {
  opacity: 0;
}
.draftboard-page .top-container.fixed-headers-enter.fixed-headers-enter-active .team-header-container-clone {
  transition: all 0.3s ease;
  opacity: 1;
}
.draftboard-page .top-container.fixed-headers-exit .team-header-container-clone {
  opacity: 1;
}
.draftboard-page .top-container.fixed-headers-exit.fixed-headers-exit-active .team-header-container-clone {
  transform: translateY(-100px) !important;
  opacity: 0;
}
.draftboard-page .bottom-container {
  height: 50vh;
  display: flex;
  box-sizing: border-box;
  position: relative;
  transition: height 0.2s ease;
  -ms-overflow-style: none;
  transition: all 0.2s ease;
}
.draftboard-page .bottom-container::-webkit-scrollbar {
  display: none;
}
.draftboard-page .bottom-container.minimized {
  height: 0;
}
.draftboard-page .bottom-container.minimized.auction {
  height: 9vh;
}
.draftboard-page .bottom-container.mid {
  height: 70vh;
}
.draftboard-page .bottom-container.mid .bottom-panel-wrapper {
  height: 70vh;
}
.draftboard-page .bottom-container.mid .rankings {
  height: 70vh;
}
.draftboard-page .bottom-container .bottom-panel-wrapper {
  height: 50vh;
  width: 100vw;
  display: flex;
  box-sizing: border-box;
  position: relative;
  -ms-overflow-style: none;
}
.draftboard-page .bottom-container .bottom-panel-wrapper::-webkit-scrollbar {
  display: none;
}
.draftboard-page .bottom-container .voice-lounge-button-container {
  position: absolute;
  z-index: 3;
  right: 100px;
  top: -40px;
}
.draftboard-page .bottom-container .draft-emoji-selector {
  position: absolute;
  z-index: 3;
  right: 100px;
  top: -40px;
}
.draftboard-page .bottom-container .collapse-btn-down {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: -40px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.1s linear;
}
.draftboard-page .bottom-container .collapse-btn-down:hover {
  transform: scale(1.15);
}
.draftboard-page .bottom-container .collapse-btn-up {
  position: absolute;
  z-index: 3;
  right: 50px;
  top: -40px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transform: rotate(180deg);
  transition: all 0.1s linear;
}
.draftboard-page .bottom-container .collapse-btn-up:hover {
  transform: scale(1.15) rotate(180deg);
}
.draftboard-page .bottom-container .rankings {
  -webkit-flex: 0 0 967px;
  -ms-flex: 0 0 967px;
  flex: 0 0 967px;
  height: 50vh;
}
.draftboard-page .bottom-container .right-panel-wrapper {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 275px;
  background: #fff;
  box-shadow: -2px 5px 10px #ccd2da;
  border-top-left-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.draftboard-page .bottom-container .right-panel-wrapper .draft-right-panel {
  height: 100%;
}
.draftboard-page .bottom-container .right-panel-queue-wrapper {
  min-width: 350px;
}
.draftboard-page .bottom-container .right-panel-chat-wrapper {
  min-width: 300px;
}
.draftboard-page .bottom-container .comment-item-menu {
  background: #fff;
}
.draftboard-page .bottom-container .context-menu .menu-item {
  background: #efefef;
}
.draftboard-page .bottom-container .context-menu .menu-item:hover {
  background: #ccc;
}
.draft-popup-menu {
  background: #fff;
  border-radius: 4px;
  padding: 0 !important;
  color: #666;
}
.draft-popup-menu >.item {
  padding: 13px 30px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 50px;
  font-size: 16px;
}
.draft-popup-menu >.item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.draft-popup-menu >.item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.draft-popup-menu >.item .description {
  font-weight: normal;
  font-size: 13px;
  margin-top: 4px;
  color: #999;
}
.draft-popup-menu >.item:hover {
  background: #efefef;
}
.draft-popup-menu .player-rank-item2,
.draft-popup-menu .right-panel-wrapper,
.draft-popup-menu .draft-queue-player-item-player {
  transition: all 0.2s ease;
}
.full-screen-mode .top-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.full-screen-mode .draft-rankings {
  transition: all 0.2s ease;
}
.theme-dark {
  background: #030616;
}
.theme-dark .draft-header .center .title {
  color: #fff;
}
.theme-dark .draft-board .team-column .team-name {
  color: #eee;
}
.theme-dark .draft-board .team-column .my-team-highlight {
  box-shadow: none;
  background: #3d4656;
}
.theme-dark .draft-board .team-column .team-header-container-clone {
  background: #030616;
}
.theme-dark .draft-board .team-column .custom-team-name {
  color: #eee;
}
.theme-dark .draft-board .cell {
  background: #21283c;
}
.theme-dark .draft-board .cell:hover {
  background: #3b404e;
}
.theme-dark .draft-board .cell .pick {
  color: #eee;
}
.theme-dark .draft-rankings {
  background: #2d3649;
  color: #fff;
}
.theme-dark .draft-rankings .player-search input {
  background: #2a2e3d;
  color: #fff;
}
.theme-dark .draft-rankings .player-search input::placeholder {
  color: rgba(163,187,211,0.5);
}
.theme-dark .draft-rankings .player-search i.fa-search {
  color: rgba(163,187,211,0.5);
}
.theme-dark .draft-rankings .roster-requirement-status2 {
  border-color: rgba(163,187,211,0.2);
  background: #2a2e3d;
  color: #a3bbd3;
}
.theme-dark .draft-rankings .filter-button .custom-checkbox {
  border-color: rgba(163,187,211,0.2);
}
.theme-dark .draft-rankings .player-rank-item2.odd {
  background-color: rgba(163,187,211,0.05);
}
.theme-dark .draft-rankings .player-rank-item2:hover {
  background-color: #292e3d !important;
}
.theme-dark .draft-rankings .player-rank-item2 >.name .queue-action {
  background: #31375b;
}
.theme-dark .draft-rankings .player-rank-item2 >.name .queue-action.selected {
  background: #6e7df5;
}
.theme-dark .draft-rankings .header {
  border-bottom-color: #151a2a;
}
.theme-dark .draft-rankings .header .col-border-right {
  border-color: #1c1f2d;
}
.theme-dark .draft-rankings .col-border-right {
  border-color: #151a2a;
}
.theme-dark .draft-rankings .col-sml.highlight {
  background-color: #030616;
}
.theme-dark .draft-rankings .col-med.highlight {
  background-color: #030616;
}
.theme-dark .bottom-container {
  background: #1b1f2d;
}
.theme-dark .bottom-container .right-panel-wrapper {
  background: #283244;
  box-shadow: -2px 5px 10px #1b1f2d;
}
.theme-dark .bottom-container .collapse-btn-up,
.theme-dark .bottom-container .collapse-btn-down {
  background: #677897;
}
.theme-dark .draft-roster2 {
  color: #fff;
}
.theme-dark .draft-roster2 .owner-selector .owner-selector-items-container {
  box-shadow: -2px 5px 10px #1b1f2d;
}
.theme-dark .draft-roster2 .owner-selector .owner-selector-items-container .owner-selector-items {
  background: #3a465b;
}
.theme-dark .draft-roster2 .owner-selector .owner-selector-items-container .owner-selector-items .owner-selector-item:hover {
  background: rgba(163,187,211,0.05);
}
.theme-dark .draft-roster2 .draft-roster-list-item {
  color: #fff;
}
.theme-dark .panel-tabs .round-tab:last-child::after {
  background: none;
}
.theme-dark .draft-popup-menu {
  background: #283243;
  color: #fff;
}
.theme-dark .draft-popup-menu >.item:hover {
  background: rgba(163,187,211,0.05);
}
.theme-dark .context-menu .pointer .fa {
  color: #283243;
}
.theme-dark .context-menu .menu-item {
  background: #283243;
}
.theme-dark .context-menu .menu-item:hover {
  background: #022047;
}
.theme-dark .player-loader-item .loader-bar {
  background: #252a37;
}
.theme-dark.draft-pick-modal .header {
  color: #fff;
  background: #1c202d;
}
.theme-dark .comment-item-menu {
  background: #283244 !important;
}
.theme-dark .context-menu {
  background: #283244;
}
.theme-dark .context-menu .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
  background: #283244 !important;
}
.theme-dark .context-menu .menu-item:hover {
  background: #18202f;
}
.draft-board {
  width: 100vw;
  overflow-x: auto;
  flex-direction: column;
  position: relative;
}
.draft-board .draft-board-bg-underlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.draft-board .dimmed {
  opacity: 0.25;
}
.draft-board .column-container {
  display: flex;
  position: relative;
  margin: 0 auto;
  padding-bottom: 12px;
  width: 96vw;
  overflow-x: auto;
}
.draft-board .team-column {
  display: inline-block;
  vertical-align: top;
  position: relative;
  flex-grow: 1;
  padding-top: 5px;
}
.draft-board .team-column.active-player-light {
  background-color: #fff;
  border-radius: 8px;
}
.draft-board .team-column.active-player-dark {
  background-color: #3a465b;
  border-radius: 8px;
}
.draft-board .team-column .custom-team-name {
  font-size: 13px;
  font-weight: bold;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  overflow-x: hidden;
  position: relative;
  cursor: pointer;
  line-height: 13px;
  margin-bottom: 7px;
  -ms-overflow-style: none;
}
.draft-board .team-column .custom-team-name::-webkit-scrollbar {
  display: none;
}
.draft-board .team-column .custom-team-name >div {
  width: 100px;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.draft-board .team-column .my-team-highlight {
  position: absolute;
  width: calc(100% + 2px);
  height: 100%;
  left: -2px;
  top: 1px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 5px 5px 10px #ccd2da;
}
.draft-board .team-column .team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto;
  z-index: 99;
  position: relative;
  top: 8px;
  cursor: pointer;
}
.draft-board .team-column .team-avatar.default {
  background: #f9f9f9;
}
.draft-board .team-column .team-avatar .autopick-indicator-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.draft-board .team-column .draftboard-presence-indicator {
  width: 10px;
  height: 10px;
  background: #00ceb8;
  border-radius: 50%;
}
.draft-board .team-column .name-container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
.draft-board .team-column .team-header-container-clone {
  display: none;
}
.draft-board .team-column .team-name {
  font-size: 13px;
  font-weight: 900;
  color: #555;
  height: 40px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 0 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 102px;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  height: 100%;
}
.draft-board .team-column .team-name.unclaimed {
  color: #bbb;
}
.draft-board .team-column .team-name.picking {
  color: #ffac61;
}
.draft-board .team-column .team-name .claim-btn {
  font-size: 11px;
  color: #fff;
  font-weight: normal;
  border-radius: 20px;
  background: #6e7df5;
  height: 25px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 10px;
  margin-right: 2px;
  width: 100%;
  text-transform: uppercase;
  font-family: 'Muli';
  font-weight: 700;
  letter-spacing: 1px;
  padding-bottom: 1px;
}
.draft-board .team-column .team-name .claim-btn:hover {
  opacity: 0.75;
}
.draft-board .team-column .team-name .commish {
  height: 12px;
  position: absolute;
}
.draft-board .team-column .team-name .fa-star {
  font-size: 10px;
  padding: 0 3px;
}
.draft-board .team-column .claim-btn-container {
  height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.draft-board .team-column .current-roster {
  position: relative;
  margin-top: 30px;
}
.draft-board .team-column .current-roster .cell .player-name {
  color: #444;
}
.draft-board .team-column .current-roster .cell .position {
  color: #444;
}
.draft-board .team-column .current-roster.theme-dark .cell .player-name {
  color: #a3bbd3;
}
.draft-board .team-column .current-roster.theme-dark .cell .position {
  color: #a3bbd3;
}
.draft-board .team-column .keepers {
  position: relative;
}
.draft-board .team-column .keepers .cell {
  display: flex;
  justify-content: flex-start;
}
.draft-board .team-column .keepers .cell .player-name {
  color: #444;
}
.draft-board .team-column .keepers .cell .position {
  color: #444;
}
.draft-board .team-column .keepers.theme-dark .cell .player-name {
  color: #a3bbd3;
}
.draft-board .team-column .keepers.theme-dark .cell .position {
  color: #a3bbd3;
}
.draft-board .team-column .keeper-header {
  width: 100px;
  font-size: 11px;
  font-weight: bold;
  height: 40px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.draft-board .team-column .keeper-header.theme_dark {
  color: #a3bbd3;
}
.draft-board .row-num-column {
  margin-top: 40px;
  margin-right: 10px;
  margin-left: 15px;
  display: inline-block;
  position: absolute;
  left: -50px;
}
.draft-board .row-num-column .row-num {
  height: 60px;
  line-height: 60px;
  text-align: right;
  letter-spacing: 0.5px;
  font-size: 13px;
  font-weight: 900;
  color: #999;
  margin-right: 10px;
  box-sizing: border-box;
}
.draft-board .cell-container {
  flex-grow: 1;
}
.draft-board .extra-slot {
  min-width: 120px;
  min-height: 50px;
}
.draft-board .cell {
  min-width: 120px;
  min-height: 50px;
  border-radius: 8px;
  background: #d0d8e6;
  margin: 0 1px 2px 1px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  padding: 4px 0px 0px 8px;
  justify-content: flex-start;
  font-family: 'Muli';
}
.draft-board .cell.is-lol {
  min-height: 60px;
}
.draft-board .cell.is-active {
  justify-content: center;
}
.draft-board .cell.current-pick {
  background: #ffd900;
  color: #ad4e09;
  font-size: 20px;
}
.draft-board .cell.current-pick .pick {
  color: #ad4e09;
}
.draft-board .cell.current-pick:hover {
  background: #ffe341;
}
.draft-board .cell.times-up {
  background: #444;
  color: #fff;
  font-size: 13px;
}
.draft-board .cell.times-up .pick {
  color: #737373;
}
.draft-board .cell:hover {
  background: #b2b8c1;
}
.draft-board .cell .timer-text {
  font-weight: 900;
  font-size: 13px;
  align-self: center;
  margin: -4px 0px 0px -8px;
}
.draft-board .cell .pick {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1px;
  color: #737373;
  opacity: 0.6;
  position: absolute;
  right: 8px;
  top: 8px;
}
.draft-board .cell .bye {
  font-size: 10px;
  letter-spacing: 0.1px;
  color: #fff;
  position: absolute;
  bottom: 10px;
  right: 8px;
  opacity: 0.75;
}
.draft-board .cell .player .position {
  text-transform: uppercase;
  color: #344054;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft-board .cell .player .player-name {
  color: #022047;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 86px;
  overflow: hidden;
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft-board .cell .player .sub-player-name {
  color: #022047;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 86px;
  overflow: hidden;
  font-family: 'Poppins';
  font-size: 9px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  text-align: left;
  opacity: 0.5;
}
.draft-board .cell .player .keeper-icon {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: #fff;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  color: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}
.draft-board .cell .pick-traded {
  background: #677897;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
  max-width: 110px;
}
.draft-board .cell .pick-traded.own {
  background: #000;
}
.draft-board .cell.lol .player {
  color: #333;
}
.draft-board .cell.lol .player .first-name {
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 84px;
  overflow: hidden;
  padding-bottom: 13px;
  font-weight: bold;
}
.draft-board .cell.lol .player .last-name {
  display: none;
}
.draft-board .cell.lol .lol-role-icon-container {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  bottom: 0;
}
.draft-board .cell.lol .lol-role-icon-container.top {
  background-image: url("https://sleepercdn.com/images/icons/lol/top.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.jun {
  background-image: url("https://sleepercdn.com/images/icons/lol/jun.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.mid {
  background-image: url("https://sleepercdn.com/images/icons/lol/mid.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.adc {
  background-image: url("https://sleepercdn.com/images/icons/lol/adc.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol .lol-role-icon-container.sup {
  background-image: url("https://sleepercdn.com/images/icons/lol/sup.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.draft-board .cell.lol.drafted .pick {
  color: #333 !important;
}
.draft-board .cell .player-avatar-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  right: 0;
}
.draft-board .cell .cell-direction-wrap {
  position: absolute;
  left: 3px;
  bottom: -2px;
}
.draft-board .cell .cell-direction-wrap .direction.down {
  transform: rotate(90deg);
}
.draft-board .cell .cell-direction-wrap .direction.left {
  transform: rotate(180deg);
}
.draft-board .cell .cell-emoji-wrap {
  position: absolute;
  right: 40px;
  bottom: -3px;
}
.full-screen-mode .draft-board {
  flex-grow: 1;
  overflow-y: auto;
}
.full-screen-mode .draft-board .current-roster {
  display: none;
}
.full-screen-mode .column-container {
  min-width: 100% !important;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-screen-mode .team-header-container {
  width: 100% !important;
  max-width: 200px;
}
.full-screen-mode .team-name {
  margin: 0 auto;
  height: 100%;
}
.full-screen-mode .team-column {
  max-width: 200px;
}
.full-screen-mode .cell-container {
  flex-grow: 1;
  margin: 1px 1px 1px 0;
  max-width: 200px;
}
.full-screen-mode .cell-container .cell {
  height: 100%;
  justify-content: flex-start;
}
.full-screen-mode .cell-container .cell.current-pick {
  justify-content: center;
}
.full-screen-mode .cell-container .cell.lol .player-avatar-container .avatar-player {
  width: 50px !important;
  height: 50px !important;
}
.full-screen-mode .cell-container .cell.lol .player-avatar-container .sub-avatar .avatar-player {
  width: 30px !important;
  height: 30px !important;
  left: -10px !important;
}
.edit-draftboard-team-name-modal {
  background: #283245;
  color: #fff;
  width: 300px;
  box-shadow: 1px 1px 15px #18202f;
}
.edit-draftboard-team-name-modal .channel-settings-body {
  padding: 20px 25px;
}
.edit-draftboard-team-name-modal .section {
  margin-bottom: 30px;
}
.edit-draftboard-team-name-modal .section .label {
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  font-weight: bold;
  margin-bottom: 5px;
}
.edit-draftboard-team-name-modal .section .text-input {
  width: 100%;
}
.new-draft-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  height: 100%;
  overflow: auto;
  color: #fff;
}
.new-draft-panel img {
  width: 140px;
  margin-bottom: 30px;
}
.new-draft-panel .title {
  font-weight: 300;
  font-size: 30px;
}
.new-draft-panel .description {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.new-draft-panel .bullets {
  text-align: center;
  margin: 30px;
  font-size: 12px;
}
.new-draft-panel .bullets .item {
  margin-bottom: 13px;
}
.straight-line {
  margin-left: 32px;
  margin-right: 4px;
  width: 1px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -44px;
  background-color: #808080;
  padding: 0px !important;
}
.curved-arrow {
  margin-left: 32px;
  margin-right: 4px;
  width: 10px;
  height: 12px;
  border-left: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-bottom-left-radius: 5px;
  position: absolute;
  top: -5px;
  left: -44px;
}
.sub-player-item-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  max-height: 44px;
  position: relative;
  padding-left: 57px;
  overflow: hidden;
}
.lol-player-rank-container {
  display: flex;
  flex-direction: column;
  height: 200px;
}
.lol-player-rank-container:hover {
  background-color: #292e3d !important;
}
.expected-draft-player-divider {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  left: 0;
  bottom: -1px;
  border-bottom: 1px solid #6e7df5;
  padding-left: 90px;
  color: #6e7df5;
  font-size: 7px;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 2;
  font-family: 'Muli';
  align-items: center;
  height: 10px;
}
.expected-draft-player-divider .label {
  position: relative;
}
.expected-draft-player-divider .round {
  position: relative;
  padding-left: 5px;
}
.expected-draft-player-divider .overall-pick {
  position: relative;
  padding-left: 10px;
}
.player-rank-item2 {
  display: flex;
  font-size: 13px;
  cursor: pointer;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
}
.player-rank-item2.odd {
  background-color: #f6f7f9;
}
.player-rank-item2.drafted {
  opacity: 0.3;
}
.player-rank-item2.drafted .draft-button {
  opacity: 0;
}
.player-rank-item2.drafted .auction-button {
  opacity: 0;
}
.player-rank-item2 .menu {
  width: 97px;
  height: 29px;
  position: absolute;
  left: -110px;
  background: #75c525;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  line-height: 29px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.player-rank-item2 .menu.drafting {
  left: 0 !important;
}
.player-rank-item2 .menu.wait {
  background: #555;
}
.player-rank-item2 .menu .spinner {
  width: 14px !important;
  height: 14px !important;
  position: relative;
  top: 3px;
}
.player-rank-item2 .avatar-player {
  margin-right: 10px;
}
.player-rank-item2:hover {
  background: #e9edf1 !important;
}
.player-rank-item2:hover .menu {
  left: 0;
}
.player-rank-item2.selected {
  background: #efefef;
}
.player-rank-item2.selected .menu {
  left: 0;
}
.player-rank-item2 >div {
  padding: 8px 0px 8px 10px;
}
.player-rank-item2 >.rank {
  width: 30px;
  padding-right: 5px;
  font-size: 12px;
  font-family: 'Muli';
}
.player-rank-item2 >.name {
  width: 216px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  font-family: 'Muli';
}
.player-rank-item2 >.name.sub {
  width: 193px;
}
.player-rank-item2 >.name .name-wrapper {
  text-align: left;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  font-size: 12px;
}
.player-rank-item2 >.name .name-wrapper .position-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 3px;
}
.player-rank-item2 >.name .name-wrapper .position {
  font-size: 10px;
  font-family: 'Muli';
  padding-top: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  line-height: 12px;
  font-weight: normal;
}
.player-rank-item2 >.name .name-wrapper .position .rookie-label {
  height: 13px;
  margin-left: 5px;
  position: relative;
  top: -1px;
}
.player-rank-item2 >.name .injury-status {
  font-size: 9px;
  text-transform: uppercase;
  margin-right: 10px;
  color: #f00;
  margin-left: 5px;
}
.player-rank-item2 >.name .injury-status.probable {
  color: #ffa500;
}
.player-rank-item2 >.name .team {
  padding-left: 6px;
  color: #677897;
}
.player-rank-item2 >.name .watchlist-action {
  padding-right: 5px;
  transition: all 0.2s ease;
  left: 3px;
  padding: 10px;
}
.player-rank-item2 >.name .watchlist-action img {
  height: 22px;
  transition: all 0.1s linear;
  transform: scale(1);
}
.player-rank-item2 >.name .watchlist-action:hover {
  opacity: 0.85;
}
.player-rank-item2 >.name .watchlist-action:hover img {
  transform: scale(1.25);
}
.player-rank-item2 >.name .queue-action {
  margin-right: 15px;
  transition: all 0.2s ease;
  left: 3px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbdef8;
}
.player-rank-item2 >.name .queue-action.selected {
  background: #6e7df5;
}
.player-rank-item2 >.name .queue-action img {
  height: 16px;
  transition: all 0.1s linear;
  transform: scale(1);
}
.player-rank-item2 >.name .queue-action:hover img {
  transform: scale(1.25);
}
.player-rank-item2 .auction-button {
  width: 20px;
  height: 20px;
  border-radius: 24px;
  border-width: 2px;
  border-style: solid;
  margin-right: 8;
  margin-left: 12;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-rank-item2 .auction-button .checkmark {
  box-shadow: 0 2.4px 4.8px 0 rgba(0,0,0,0.502);
  width: 12px;
  height: 12px;
  border-radius: 8px;
}
.player-rank-item2 .auction-button.isHovered {
  background-color: #a3acff;
  border-width: 0px;
  width: 24px;
  height: 24px;
}
.player-rank-item2 .auction-button.disable,
.player-rank-item2 .auction-button.limit {
  opacity: 0.3;
}
.player-rank-item2 .draft-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #00ceb8;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-rank-item2 .draft-button svg path {
  fill: #00ceb8;
}
.player-rank-item2 .draft-button:hover {
  background: #00ceb8;
}
.player-rank-item2 .draft-button:hover svg path {
  fill: #fff;
}
.player-rank-item2 .draft-button.picking {
  background: #ecf0f4;
}
.player-rank-item2 .draft-button.disable,
.player-rank-item2 .draft-button.limit {
  background: #ecf0f4;
  border: none;
}
.player-rank-item2 .draft-button.disable:hover,
.player-rank-item2 .draft-button.limit:hover {
  background: #ecf0f4;
}
.player-rank-item2 .draft-button.disable:hover svg path,
.player-rank-item2 .draft-button.limit:hover svg path {
  fill: #022047;
}
.player-rank-item2 .draft-button.disable svg path,
.player-rank-item2 .draft-button.limit svg path {
  fill: #a3bbd3;
}
.player-rank-item2 .draft-button.limit:hover .over-limit-warning-message {
  display: block;
}
.player-rank-item2 .draft-button .over-limit-warning-message {
  position: absolute;
  left: 44px;
  width: 206px;
  font-size: 12px;
  background-color: #6e7df5 !important;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 4px;
  pointer-events: none;
  color: #022047;
  text-align: center;
  display: none;
}
.player-rank-item2 .draft-button .over-limit-warning-message .message-pointer {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  left: -4px;
  top: 8px;
  background-color: #6e7df5 !important;
}
.player-rank-item2 .draft-button .spinner {
  border-width: 2px;
  width: 8px;
  height: 8px;
}
.theme-dark .player-rank-item2 .draft-button {
  background: #282d3d;
}
.theme-dark .player-rank-item2 .draft-button svg path {
  fill: #00ceb8;
}
.theme-dark .player-rank-item2 .draft-button:hover {
  background: #00ceb8;
}
.theme-dark .player-rank-item2 .draft-button:hover svg path {
  fill: #022047;
}
.theme-dark .player-rank-item2 .draft-button.picking {
  background: #282d3d;
}
.theme-dark .player-rank-item2 .draft-button.disable:hover,
.theme-dark .player-rank-item2 .draft-button.limit:hover {
  background: #282d3d;
}
.theme-dark .player-rank-item2 .draft-button.disable svg path,
.theme-dark .player-rank-item2 .draft-button.limit svg path {
  fill: #5c6a7c;
}
.theme-dark .player-rank-item2 .draft-button .over-limit-warning-message {
  background-color: #6e7df5 !important;
}
.player-stats-modal {
  box-shadow: 1px 1px 10px #18202f;
  width: 60vw;
  height: 80vh;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.player-stats-modal .subheader {
  margin-bottom: 25px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.3;
}
.player-stats-modal .player-header {
  display: flex;
  padding: 15px 25px;
  align-items: center;
  height: 76px;
  box-sizing: border-box;
  -webkit-flex: 0 0 76px;
  -ms-flex: 0 0 76px;
  flex: 0 0 76px;
  border-bottom: 1px solid #efefef;
}
.player-stats-modal .player-header .name {
  font-weight: bold;
  font-size: 16px;
}
.player-stats-modal .player-header .meta {
  flex-grow: 1;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: 15px;
}
.player-stats-modal .player-header .meta .bio {
  margin-left: 20px;
}
.player-stats-modal .player-header .meta .bio .college,
.player-stats-modal .player-header .meta .bio .experience,
.player-stats-modal .player-header .meta .bio .age {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.8;
}
.player-stats-modal .player-injury-status {
  border-left: 5px solid #b20000;
  color: #b20000;
  background: #ffe7e7;
  border-bottom: 1px solid #efefef;
  padding: 15px 20px;
  font-size: 14px;
}
.player-stats-modal .player-injury-status.probable {
  border-left: 5px solid #e86400;
  color: #e86400;
  background: #fff0e7;
}
.player-stats-modal .player-injury-status .injury-status {
  font-weight: 900;
  line-height: 1.4;
  display: flex;
}
.player-stats-modal .player-injury-status .injury-date {
  font-size: 10px;
  letter-spacing: 0.5px;
  flex-grow: 1;
  text-align: right;
}
.player-stats-modal .player-injury-status .injury-notes {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 10px;
}
.player-stats-modal .body-container {
  display: flex;
  background: #fff;
  flex-grow: 1;
}
.player-stats-modal .body-container >.stats {
  padding: 15px 25px;
  -webkit-flex: 0 0 180px;
  -ms-flex: 0 0 180px;
  flex: 0 0 180px;
  border-right: 1px solid #efefef;
  overflow: auto;
}
.player-stats-modal .body-container >.news {
  padding: 15px 25px;
  flex-grow: 1;
  overflow: auto;
}
.roster-requirement-status {
  display: flex;
}
.roster-requirement-status .filter-item {
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.roster-requirement-status .filter-item.selected {
  background: #555;
  color: #fff;
}
.roster-requirement-status .filter-item .name {
  text-align: center;
  font-weight: bold;
}
.roster-requirement-status .filter-item .slots {
  text-align: center;
  opacity: 0.75;
}
.roster-requirement-status2 {
  display: flex;
  background: #edf2f9;
  border: 1px solid #d8e2ed;
  height: 40px;
  border-radius: 20px;
  color: #677897;
}
.roster-requirement-status2 .filter-item {
  font-size: 10px;
  font-family: 'Muli';
  cursor: pointer;
  border-radius: 20px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.roster-requirement-status2 .filter-item.selected {
  background: #00ceb8;
  color: #022047;
}
.roster-requirement-status2 .filter-item.selected.nba {
  background: #ffae58;
}
.roster-requirement-status2 .filter-item .name {
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}
.roster-requirement-status2 .filter-item .slots {
  text-align: center;
  margin-top: 5px;
}
.socket-connection-status-banner {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1000;
  background-color: #ff6482;
  cursor: pointer;
}
.socket-connection-status-banner .text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.25px;
  text-align: left;
  color: #fff;
}
.beer-bubbles-container {
  position: relative;
}
.beer-bubbles-container .bubble {
  background: rgba(255,255,255,0.7);
  position: absolute;
}
.beer-bubbles-container .bubble.speed-0 {
  -webkit-animation: bottomUp 0.5s linear;
  -moz-animation: bottomUp 0.5s linear;
  -ms-animation: bottomUp 0.5s linear;
  -o-animation: bottomUp 0.5s linear;
  animation: bottomUp 0.5s linear;
}
.beer-bubbles-container .bubble.speed-1 {
  -webkit-animation: bottomUp 1s linear;
  -moz-animation: bottomUp 1s linear;
  -ms-animation: bottomUp 1s linear;
  -o-animation: bottomUp 1s linear;
  animation: bottomUp 1s linear;
}
.beer-bubbles-container .bubble.speed-2 {
  -webkit-animation: bottomUp 1.5s linear;
  -moz-animation: bottomUp 1.5s linear;
  -ms-animation: bottomUp 1.5s linear;
  -o-animation: bottomUp 1.5s linear;
  animation: bottomUp 1.5s linear;
}
@-moz-keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@-webkit-keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@-o-keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
.floaties-button {
  transition: all 0.2s ease;
  cursor: pointer;
}
.floaties-button img {
  width: 26px;
  height: 26px;
}
.floaties-button:hover {
  transform: scale(1.1);
}
.floaties-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.animated-floatie-item-container {
  opacity: 1;
  -webkit-animation: bottomUp 3s, waverAndScale 3s, fadeOutFloatie 3s;
  -moz-animation: bottomUp 3s, waverAndScale 3s, fadeOutFloatie 3s;
  -ms-animation: bottomUp 3s, waverAndScale 3s, fadeOutFloatie 3s;
  -o-animation: bottomUp 3s, waverAndScale 3s, fadeOutFloatie 3s;
  animation: bottomUp 3s, waverAndScale 3s, fadeOutFloatie 3s;
  position: absolute;
}
.animated-floatie-item-container img {
  width: 50px;
  height: 50px;
}
.animated-floatie-item-container .floatie-avatar {
  position: absolute;
  bottom: -7px;
  right: -7px;
}
@-moz-keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@-webkit-keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@-o-keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@keyframes bottomUp {
  from {
    bottom: 0;
  }
  to {
    bottom: 120%;
  }
}
@-moz-keyframes waverAndScale {
  0% {
    transform: translateX(0px) scale(0) rotate(0deg);
  }
  10% {
    transform: translateX(-5px) scale(1.2), rotate(-2deg);
  }
  20% {
    transform: translateX(-10px) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(5px) scale(1) rotate(-2deg);
  }
  100% {
    transform: translateX(10px) scale(1) rotate(0deg);
  }
}
@-webkit-keyframes waverAndScale {
  0% {
    transform: translateX(0px) scale(0) rotate(0deg);
  }
  10% {
    transform: translateX(-5px) scale(1.2), rotate(-2deg);
  }
  20% {
    transform: translateX(-10px) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(5px) scale(1) rotate(-2deg);
  }
  100% {
    transform: translateX(10px) scale(1) rotate(0deg);
  }
}
@-o-keyframes waverAndScale {
  0% {
    transform: translateX(0px) scale(0) rotate(0deg);
  }
  10% {
    transform: translateX(-5px) scale(1.2), rotate(-2deg);
  }
  20% {
    transform: translateX(-10px) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(5px) scale(1) rotate(-2deg);
  }
  100% {
    transform: translateX(10px) scale(1) rotate(0deg);
  }
}
@keyframes waverAndScale {
  0% {
    transform: translateX(0px) scale(0) rotate(0deg);
  }
  10% {
    transform: translateX(-5px) scale(1.2), rotate(-2deg);
  }
  20% {
    transform: translateX(-10px) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(5px) scale(1) rotate(-2deg);
  }
  100% {
    transform: translateX(10px) scale(1) rotate(0deg);
  }
}
@-moz-keyframes fadeOutFloatie {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOutFloatie {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOutFloatie {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOutFloatie {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.form-container .form-item-wrap {
  margin-top: 35px;
}
.form-container .text-input {
  width: 100%;
  max-width: 420px;
}
.form-container .bottom-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.form-container .section-header {
  color: #ccc;
  margin-top: 30px;
}
.form-container .section-header .text {
  cursor: pointer;
  font-size: 10px;
  color: #9e9e9e;
}
.add-friend-panel {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  width: 30vw;
  overflow: hidden;
  color: #fff;
}
.add-friend-panel .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.add-friend-panel .menu-item:hover {
  background: #18202f;
}
.add-friend-panel .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding-bottom: 40px;
}
.add-friend-panel .empty-state >i {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 25px;
}
.add-friend-panel .empty-state >.title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bbb;
}
.add-friend-panel .empty-state >.description {
  font-size: 13px;
  margin-top: 5px;
  color: #ccc;
}
.add-friend-panel >.search-input {
  padding: 10px 15px;
  position: relative;
}
.add-friend-panel >.search-input .text-input {
  width: 100%;
}
.add-friend-panel >.search-input .text-input input {
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  background: #18202f;
  border-radius: 4px;
}
.add-friend-panel >.search-input .text-input input::placeholder {
  color: #a3bbd3;
}
.add-friend-panel >.search-input .fa-search {
  position: absolute;
  right: 23px;
  color: #a3bbd3;
  opacity: 0.7;
  top: 16px;
  font-size: 16px;
}
.add-friend-panel >.results {
  height: 60vh;
  overflow: auto;
}
.add-friend-panel >.results >.member-item {
  padding: 10px 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}
.add-friend-panel >.results >.member-item i {
  color: #a3bbd3;
}
.add-friend-panel >.results >.member-item:hover {
  background: #18202f;
}
.add-friend-panel >.results >.member-item >.meta {
  flex-grow: 1;
  font-size: 16px;
  margin-left: 15px;
}
.add-friend-panel >.results >.member-item >.meta >.name {
  font-weight: bold;
}
.add-friend-panel >.results >.member-item >.meta >.role-name {
  font-size: 12px;
  color: #a3bbd3;
  margin-top: 3px;
}
.add-friend-panel >.results >.member-item >.menu >.status {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a3bbd3;
}
.blocked-list {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  height: 50vh;
  max-width: 240px !important;
  color: #fff;
}
.blocked-list .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.blocked-list .menu-item:hover {
  background: #18202f;
}
.blocked-list .spinner {
  align-self: center;
}
.blocked-list .result-container {
  flex-grow: 1;
}
.blocked-list .channel-settings-body {
  position: relative;
}
.blocked-list .channel-settings-body .centered-self {
  padding-bottom: 30px;
}
.blocked-list .channel-settings-body .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.blocked-list .channel-settings-body .empty-state >i {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 25px;
}
.blocked-list .channel-settings-body .empty-state >.title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bbb;
}
.blocked-list .channel-settings-body .empty-state >.description {
  font-size: 13px;
  margin-top: 5px;
  color: #ccc;
}
.blocked-list .user-item {
  padding: 10px 0;
  padding: 10px 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}
.blocked-list .user-item i {
  color: #a3bbd3;
}
.blocked-list .user-item:hover {
  background: #18202f;
}
.blocked-list .user-item >.meta {
  margin-left: 15px;
  flex-grow: 1;
}
.blocked-list .user-item >.meta >.name {
  font-weight: bold;
  font-size: 14px;
}
.blocked-list .user-item >.meta >.description {
  font-size: 12px;
  color: #a3bbd3;
  margin-top: 3px;
}
.blocked-list .user-item >.status-text {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a3bbd3;
}
.blocked-list .user-item >.status-text i {
  margin: 0 5px;
}
.blocked-list .user-item >.menu {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  background: #18202f;
  align-self: center;
  color: #a3bbd3;
  display: flex;
  font-size: 12px;
}
.blocked-list .user-item >.menu >div {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.blocked-list .user-item >.menu >div:hover {
  background: #18202f;
}
.friend-action-context-menu {
  background: #283244;
  border: 1px solid #18202f;
  font-size: 12px;
}
.friend-action-context-menu .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.friend-action-context-menu .menu-item:hover {
  background: #18202f;
}
.friend-action-context-menu >.menu-item {
  padding: 0 25px;
  display: flex;
  align-items: center;
}
.friend-action-context-menu >.menu-item .text {
  padding: 10px;
}
.friend-action-context-menu >.menu-item .spinner {
  width: 7px !important;
  height: 7px !important;
}
.friend-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #18202f;
}
.friend-item >.meta {
  margin-left: 15px;
  flex-grow: 1;
}
.friend-item >.meta >.name {
  font-weight: bold;
  font-size: 14px;
}
.friend-item >.meta >.description {
  font-size: 12px;
  color: #a3bbd3;
  margin-top: 3px;
}
.friend-item >.button {
  margin-left: 10px;
}
.friend-item >.button button {
  width: 100px;
}
.friend-item >.status-text {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #a3bbd3;
}
.friend-item >.status-text i {
  margin: 0 5px;
}
.friend-item >.menu {
  border: 1px solid #18202f;
  border-radius: 4px;
  display: flex;
  background: #283244;
  align-self: center;
  color: #fff;
  display: flex;
  font-size: 12px;
}
.friend-item >.menu >div {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}
.friend-item >.menu >div:hover {
  background: #18202f;
}
.friend-item >.menu .fa-comments {
  position: relative;
  top: -1px;
}
.friend-request-item >.request {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.friend-request-item >.request >.meta {
  margin-left: 15px;
  flex-grow: 1;
}
.friend-request-item >.request >.meta >.name {
  font-weight: bold;
  font-size: 14px;
}
.friend-request-item >.request >.meta >.description {
  font-size: 12px;
  color: #bbb;
  margin-top: 3px;
}
.friend-request-item >.request >.button {
  margin-left: 10px;
}
.friend-request-item >.request >.button button {
  width: 100px;
}
.friends-panel {
  height: 100%;
  overflow: auto;
  color: #fff;
  border-radius: 10px;
  margin-top: 16px;
}
.friends-panel >.friends-panel-header {
  position: relative;
  display: flex;
  height: 62px;
  align-items: center;
  padding: 15px 25px;
  box-sizing: border-box;
  z-index: 1;
}
.friends-panel >.friends-panel-header >.header {
  flex-grow: 1;
  font-size: 17px;
  font-weight: bold;
}
.friends-panel >.friends-panel-header .button {
  margin-left: 15px;
}
.friends-panel >.friends-panel-header .button button {
  width: 150px;
}
.friends-panel >.friends-panel-body .section-header {
  margin-top: 25px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #bbb;
}
.friends-panel >.friends-panel-body >.friend-requests {
  padding: 0 25px 25px 25px;
}
.friends-panel >.friends-panel-body >.friends {
  padding: 0 25px 25px 25px;
}
.game-center-leaderboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
}
.game-center-leaderboard >.position-filters {
  padding: 30px 15px;
  display: flex;
  justify-content: center;
}
.game-center-leaderboard >.position-filters >.filter-item {
  font-size: 13px;
  font-weight: bold;
  padding: 0 6px;
  color: #777;
  cursor: pointer;
}
.game-center-leaderboard >.position-filters >.filter-item:hover {
  color: #999;
}
.game-center-leaderboard >.position-filters >.filter-item.selected {
  color: #e0e0e0;
}
.game-center-leaderboard >.players-list >.player-item {
  display: flex;
  color: #e0e0e0;
  font-size: 14px;
  width: 250px;
  padding: 12px;
  position: relative;
}
.game-center-leaderboard >.players-list >.player-item >.rank {
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  font-weight: bold;
}
.game-center-leaderboard >.players-list >.player-item >.score {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  font-size: 14px;
  font-weight: bold;
}
.game-center-leaderboard >.players-list >.player-item >.player-meta {
  flex-grow: 1;
  cursor: pointer;
  padding-right: 10px;
}
.game-center-leaderboard >.players-list >.player-item >.player-meta .name {
  font-weight: bold;
}
.game-center-leaderboard >.players-list >.player-item >.player-meta .name .position {
  font-size: 12px;
  color: #888;
  padding-left: 5px;
}
.game-center-leaderboard >.players-list >.player-item >.player-meta .player-stat-text {
  color: #bbb;
  margin-top: 3px;
}
.game-center-leaderboard >.players-list >.player-item .owner-text {
  font-size: 9px;
  position: absolute;
  top: 0px;
  color: #58a7ff;
}
.game-center-leaderboard >.players-list >.player-item >.actions {
  display: flex;
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
}
.game-center-leaderboard >.players-list >.player-item >.actions i {
  cursor: pointer;
}
.game-center-leaderboard >.players-list >.player-item >.actions .fa-plus {
  color: #00ceb8;
}
.game-center-leaderboard >.players-list >.player-item >.actions .fa-plus.waiver {
  color: #ffa500;
}
.game-center-leaderboard >.players-list >.player-item >.actions .fa-exchange {
  color: #58a7ff;
}
.game-center-leaderboard >.players-list >.empty {
  font-size: 14px;
  font-weight: bold;
  color: #777;
}
.game-center-leaderboard2 {
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}
.game-center-leaderboard2 .spinner-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-center-leaderboard2 >.position-filters {
  padding: 0px 15px 20px 10px;
  display: flex;
  justify-content: center;
}
.game-center-leaderboard2 >.position-filters >.filter-item {
  font-size: 13px;
  font-weight: bold;
  padding: 0 6px;
  color: #777;
  cursor: pointer;
}
.game-center-leaderboard2 >.position-filters >.filter-item:hover {
  color: #999;
}
.game-center-leaderboard2 >.position-filters >.filter-item.selected {
  color: #e0e0e0;
}
.game-center-leaderboard2 >.players-list .empty-no-players {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.game-center-leaderboard2 >.players-list .empty-no-players img {
  max-width: 50%;
}
.game-center-leaderboard2 >.players-list .empty-no-players .title {
  color: #a3bbd3;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 14px;
  margin-top: 50px;
}
.game-center-leaderboard2 >.players-list .empty-no-players .desc {
  color: #a3bbd3;
  font-size: 10px;
  padding-top: 10px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  padding: 10px 15px;
  min-width: 300px;
  cursor: pointer;
  position: relative;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .owner-text {
  font-size: 9px;
  position: absolute;
  top: -5px;
  color: #58a7ff;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-action-button {
  margin-right: 10px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-action-button.add {
  border-color: #00ceb8;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-action-button.trade {
  border-color: #58a7ff;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-action-button.trade .svg-icon {
  position: relative;
  top: 4px;
  left: 4px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-action-button.waiver {
  border-color: #ffae58;
  color: #ffae58;
  text-align: center;
  font-size: 10px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-action-button.drop {
  color: #ff2b6d;
  border-color: #ff2b6d;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .rank {
  font-size: 13px;
  font-weight: 700;
  width: 20px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .avatar-player {
  margin-left: 10px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-meta {
  padding: 0 10px;
  flex-grow: 1;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-meta .name {
  font-size: 13px;
  font-weight: 700;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-meta .position {
  padding-top: 5px;
  font-size: 10px;
  color: #a2bbd3;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-meta .player-stat-text {
  color: #627391;
  padding-top: 5px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .player-meta .owner-text {
  font-size: 9px;
  color: #58a7ff;
  padding-top: 5px;
}
.game-center-leaderboard2 .game-center-leaderboard-player-item .score {
  font-size: 15px;
  font-weight: 700;
}
.game-center-panel {
  height: 100vh;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
}
.game-center-panel .game-center-nav {
  background: #525252;
  height: 100vh;
  width: 82px;
  box-sizing: border-box;
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none;
}
.game-center-panel .game-center-nav::-webkit-scrollbar {
  display: none;
}
.game-center-panel .game-center-nav .score-container {
  flex-grow: 1;
  overflow: auto;
  -ms-overflow-style: none;
}
.game-center-panel .game-center-nav .score-container::-webkit-scrollbar {
  display: none;
}
.game-center-panel .game-center-nav .leaderboard {
  height: 64px;
  -webkit-flex: 0 0 64px;
  -ms-flex: 0 0 64px;
  flex: 0 0 64px;
  border-bottom: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #e0e0e0;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.5;
}
.game-center-panel .game-center-nav .leaderboard .sub {
  font-size: 10px;
}
.game-center-panel .game-center-nav .game-ticker-item-wrapper {
  border-left: 1px solid #333;
  cursor: pointer;
  transform: all 0.2s ease;
}
.game-center-panel .game-center-nav .game-ticker-item-wrapper:hover {
  opacity: 0.8;
}
.game-center-panel .game-center-nav .game-ticker-item-wrapper.selected {
  border-left: none;
}
.game-center-panel .score-detail-panel {
  height: 100vh;
  width: 70vw;
  background: #525252;
  position: fixed;
  right: -100%;
  z-index: 9997;
  transition: all 0.2s ease;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  box-shadow: 1px 1px 15px #18202f;
  -ms-overflow-style: none;
}
.game-center-panel .score-detail-panel::-webkit-scrollbar {
  display: none;
}
.game-center-panel .score-detail-panel.show {
  right: 80px;
}
.game-center-panel .score-detail-panel >.plays-panel {
  height: 100vh;
  overflow: hidden;
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  border-right: 1px solid #333;
}
.game-center-panel .score-detail-panel >.plays-panel .plays-list-wrapper {
  height: calc(100% - 60px);
  overflow: auto;
  -ms-overflow-style: none;
}
.game-center-panel .score-detail-panel >.plays-panel .plays-list-wrapper::-webkit-scrollbar {
  display: none;
}
.game-center-panel .score-detail-panel >.plays-panel .plays-list {
  height: 100%;
}
.game-center-panel .score-detail-panel >.score-detail {
  height: 100vh;
  overflow: auto;
  -webkit-flex: 0 0 700px;
  -ms-flex: 0 0 700px;
  flex: 0 0 700px;
  flex-grow: 1;
  -ms-overflow-style: none;
}
.game-center-panel .score-detail-panel >.score-detail::-webkit-scrollbar {
  display: none;
}
.game-center-panel .score-detail-panel >.leaderboard-detail {
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex: 0 0 700px;
  -ms-flex: 0 0 700px;
  flex: 0 0 700px;
  flex-grow: 1;
  display: flex;
  -ms-overflow-style: none;
}
.game-center-panel .score-detail-panel >.leaderboard-detail::-webkit-scrollbar {
  display: none;
}
.game-center-panel .score-detail-panel >.leaderboard-detail .leaders-wrapper {
  height: 100vh;
  overflow: auto;
  flex-grow: 1;
  flex-basis: 0;
  border-right: 1px solid #333;
  -ms-overflow-style: none;
}
.game-center-panel .score-detail-panel >.leaderboard-detail .leaders-wrapper::-webkit-scrollbar {
  display: none;
}
.game-center-panel .score-detail-panel >.leaderboard-detail .trending-wrapper {
  font-family: 'Inter', sans-serif;
  height: 100vh;
  overflow: auto;
  flex-grow: 1;
  flex-basis: 0;
  -ms-overflow-style: none;
}
.game-center-panel .score-detail-panel >.leaderboard-detail .trending-wrapper::-webkit-scrollbar {
  display: none;
}
.game-center-panel .scoring-setting-selector {
  height: 60px;
  width: 250px;
  position: relative;
  background: #3f3f3f;
}
.game-center-panel .scoring-setting-selector .scoring-settings-items-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
}
.game-center-panel .scoring-setting-selector .scoring-settings-items-wrapper .header {
  padding: 10px 20px;
  font-size: 12px;
  text-align: center;
  background: #666;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item {
  cursor: pointer;
  height: 60px;
  width: 250px;
  padding: 10px 10px 10px 20px;
  background: #3f3f3f;
  box-sizing: border-box;
  display: none;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid #303030;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item .meta {
  flex-grow: 1;
  padding: 0 15px;
  color: #e0e0e0;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item .meta .name {
  font-size: 14px;
  font-weight: bold;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item .meta .desc {
  font-size: 11px;
  margin-top: 3px;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item .right {
  padding: 0 10px;
  font-size: 20px;
  color: #888;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item:hover {
  background: #222;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item.selected,
.game-center-panel .scoring-setting-selector .scoring-settings-item.show {
  display: flex;
}
.game-center-panel .scoring-setting-selector .scoring-settings-item.selected.show {
  background: #222;
}
.game-center-panel .game-center-underlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  left: 0;
  top: 0;
}
.game-ticker-item {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  padding: 16px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  position: relative;
  border-radius: 16px;
}
.game-ticker-item .selected-indicator {
  margin-top: 20px;
}
.game-ticker-item .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a3acff;
  height: 24px;
  width: 24px;
  border-radius: 8px;
}
.game-ticker-item .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.game-ticker-item .game-day-text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 20px;
  width: 90px;
  margin-left: 8px;
}
.game-ticker-item.rz {
  background: #ff2b6d;
}
.game-ticker-item.td {
  background: #00ceb8 !important;
}
.game-ticker-item >.schedule-text {
  margin-bottom: 6px;
  font-size: 9px;
  color: #fff;
  opacity: 0.7;
}
.game-ticker-item >.team {
  display: flex;
  transition: all 0.2s ease;
  position: relative;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03px;
  line-height: 24px;
}
.game-ticker-item >.team .avatar-player {
  margin-right: 8px;
}
.game-ticker-item >.team.away-team {
  margin-bottom: 2px;
}
.game-ticker-item >.team.win {
  font-weight: bold;
  opacity: 1;
}
.game-ticker-item >.team.lose {
  color: #677897;
}
.game-ticker-item >.team.possession {
  font-weight: bold;
  opacity: 1;
}
.game-ticker-item >.team.possession .indicator {
  opacity: 1;
}
.game-ticker-item >.team .score {
  flex-grow: 1;
  text-align: right;
  padding-right: 5px;
}
.game-ticker-item >.team .indicator {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  right: -12px;
  opacity: 0;
  transition: all 0.2s ease;
}
.game-ticker-item .down-and-distance {
  font-size: 9px;
  margin-top: 6px;
  color: #eee;
  opacity: 0.7;
}
.game-ticker-item .schedule-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}
.game-ticker-item .schedule-container .schedule-text {
  flex-grow: 1;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
.game-ticker-list {
  padding-bottom: 100px;
  margin-right: 16px;
}
.game-ticker-list .game-ticker-item-wrapper.selected .game-ticker-item {
  background-color: rgba(58,70,91,0.25);
}
.game-ticker-list .game-ticker-item-wrapper.in-game .game-ticker-item {
  background-image: linear-gradient(to right, rgba(0,206,184,0.16), rgba(0,206,184,0));
}
.game-weather-icon {
  height: 16px;
}
.play-by-play-item {
  padding: 20px;
  font-family: 'Muli';
}
.play-by-play-item .header-meta {
  display: flex;
  align-items: center;
}
.play-by-play-item .header-meta .time-remaining {
  flex-grow: 1;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  color: #a3bbd3;
  letter-spacing: 0.5px;
}
.play-by-play-item .header-meta .tag {
  padding: 3px 18px;
  border-radius: 3px;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
}
.play-by-play-item .play-desc {
  font-size: 13px;
  color: #fff;
  line-height: 1.3;
  margin-top: 5px;
}
@media (max-width: 1366px) {
  .play-by-play-item .play-desc {
    font-size: 11px;
  }
}
.play-by-play-player {
  display: flex;
  align-items: center;
  padding-top: 10px;
  font-family: 'Muli';
}
.play-by-play-player .player-meta {
  margin-left: 10px;
  flex-grow: 1;
}
.play-by-play-player .player-meta >.name {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}
.play-by-play-player .player-meta >.name .position {
  font-size: 11px;
  padding-left: 5px;
  color: #a3bbd3;
}
.play-by-play-player .player-meta >.stat-text {
  font-size: 11px;
  color: #a3bbd3;
  margin-top: 5px;
}
.play-by-play-player >.points {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.4px;
  transform: scale(0);
  -webkit-animation: 0.3s grow 0.3s forwards;
  -moz-animation: 0.3s grow 0.3s forwards;
  -ms-animation: 0.3s grow 0.3s forwards;
  -o-animation: 0.3s grow 0.3s forwards;
  animation: 0.3s grow 0.3s forwards;
}
.play-by-play-player >.points.good {
  color: #00ceb8;
}
.play-by-play-player >.points.bad {
  color: #ff2b6d;
}
.players-in-game {
  font-family: 'Inter', sans-serif;
}
.players-in-game >.player-position-groups {
  padding-bottom: 80px;
}
.players-in-game >.player-position-groups .position-leaders-section {
  padding: 10px;
}
.players-in-game >.player-position-groups .position-leaders-section .position-name {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 25px;
  font-family: 'Poppins', sans-serif;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item {
  display: flex;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  padding: 10px 15px;
  width: 0;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .player-meta,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .player-meta {
  flex-grow: 1;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .player-meta .name,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .player-meta .name {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1366px) {
  .players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .player-meta .name,
  .players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .player-meta .name {
    font-size: 12px;
  }
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .player-meta .player-stat-text,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .player-meta .player-stat-text {
  padding-top: 6px;
  font-size: 10px;
  color: #a3bbd3;
  line-height: 1.15;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .scoring,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .scoring {
  width: 60px;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .scoring .stat,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .scoring .stat {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .scoring .proj,
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .scoring .proj {
  font-size: 10px;
  padding-top: 6px;
  color: #a3bbd3;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player {
  flex-direction: row-reverse;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .player-meta {
  text-align: right;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .home-player >.player .scoring {
  text-align: left;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .player-meta {
  text-align: left;
}
.players-in-game >.player-position-groups .position-leaders-section >.player-item .away-player >.player .scoring {
  text-align: right;
}
.plays-list {
  padding-bottom: 80px;
}
.plays-list.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.plays-list.empty .empty {
  font-size: 14px;
  font-weight: bold;
  color: #777;
  padding: 25px;
  text-align: center;
  line-height: 1.3;
}
.plays-list.empty .empty img {
  display: block;
  width: 120px;
  margin-bottom: 20px;
}
.team-score-header-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 8px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.row.flip {
  flex-direction: row-reverse;
}
.game-info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #181c28;
  font-size: 8px;
  width: 80px;
  padding: 4px;
  box-sizing: border-box;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.game-info .main-text {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}
.team-score-header {
  position: relative;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  width: 100%;
  height: 112px;
}
.team-score-header .team {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  box-sizing: border-box;
  padding: 16px;
  min-height: 60px;
}
@media (max-width: 1430px) {
  .team-score-header .team {
    padding: 8px;
  }
}
.team-score-header .team .score {
  font-size: 32px;
}
@media (max-width: 1430px) {
  .team-score-header .team .score {
    font-size: 18px;
  }
}
.team-score-header .team .team-record {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin: 0 8px;
}
.team-score-header .team .title {
  font-size: 32px;
  color: #fff;
}
@media (max-width: 1430px) {
  .team-score-header .team .title {
    font-size: 18px;
  }
}
.team-score-header .team .team-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 36px;
  align-items: center;
  z-index: 99;
}
.team-score-header .left .avatar {
  position: absolute;
  left: 0;
  z-index: 0;
  opacity: 0.1;
  top: 0;
}
.team-score-header .left .score {
  margin-right: 16px;
}
.team-score-header .right .avatar {
  position: absolute;
  right: 0;
  z-index: 0;
  opacity: 0.1;
  top: 0;
}
.team-score-header .right .score {
  margin-left: 16px;
}
.team-score-header .right .team-row {
  flex-direction: row-reverse;
}
.team-score-header .right .possession {
  display: block;
  width: 16px;
  opacity: 0.5;
  padding: 10px;
  z-index: 1;
}
.team-score-header .right .avatar-player {
  z-index: 1;
}
.team-score-header .right.in-game .subtext {
  margin-bottom: 10px;
}
.team-score-header .right .subtext {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.team-score-header .team-gradient {
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 5px;
  left: 10px;
  z-index: 0;
}
.team-score-header .away-team .avatar-player {
  margin-right: 20px;
}
.team-score-header .away-team .team-gradient {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.team-score-header .home-team .avatar-player {
  margin-left: 20px;
}
.team-score-header .home-team .team-gradient {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.score-switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
  width: 160px;
  padding: 8px;
  justify-content: space-between;
  border: 1px solid #a3bbd3;
  border-radius: 24px;
}
.score-switch .item {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 10px;
  color: #022047;
}
.score-switch .item .selected {
  background-image: linear-gradient(#00b7b3, #4ce2a7);
}
.trending-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
}
.trending-list >.filters {
  padding: 30px 15px;
  display: flex;
  justify-content: center;
}
.trending-list >.filters >.filter-item {
  font-size: 13px;
  font-weight: bold;
  padding: 0 6px;
  color: #777;
  cursor: pointer;
  text-transform: uppercase;
}
.trending-list >.filters >.filter-item:hover {
  color: #999;
}
.trending-list >.filters >.filter-item.selected {
  color: #e0e0e0;
}
.trending-list >.players-list >.trending-item {
  display: flex;
  color: #e0e0e0;
  font-size: 14px;
  width: 250px;
  padding: 12px;
}
.trending-list >.players-list >.trending-item >.rank {
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  font-weight: bold;
}
.trending-list >.players-list >.trending-item >.score {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  font-size: 14px;
  font-weight: bold;
}
.trending-list >.players-list >.trending-item >.player-meta {
  flex-grow: 1;
  padding-right: 10px;
  position: relative;
  cursor: pointer;
}
.trending-list >.players-list >.trending-item >.player-meta .name {
  font-weight: bold;
}
.trending-list >.players-list >.trending-item >.player-meta .position {
  font-size: 12px;
  margin-top: 3px;
  color: #bbb;
}
.trending-list >.players-list >.trending-item.trending .score {
  color: #489b2c;
}
.trending-list >.players-list >.trending-item.falling .score {
  color: #ee6761;
}
.trending-list >.players-list >.trending-item .owner-text {
  font-size: 9px;
  position: absolute;
  top: -13px;
  color: #58a7ff;
}
.trending-list >.players-list >.trending-item >.actions {
  display: flex;
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
}
.trending-list >.players-list >.trending-item >.actions i {
  cursor: pointer;
}
.trending-list >.players-list >.trending-item >.actions .fa-plus {
  color: #00ceb8;
}
.trending-list >.players-list >.trending-item >.actions .fa-plus.waiver {
  color: #ffa500;
}
.trending-list >.players-list >.trending-item >.actions .fa-exchange {
  color: #58a7ff;
}
.inbox-panel-header {
  color: #fff;
  padding: 32px;
  display: flex;
  align-items: center;
  height: 88px;
  box-sizing: border-box;
}
.inbox-panel-header .header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.inbox-panel-header .name-container {
  flex-grow: 1;
}
.inbox-panel-header .name-container .name {
  font-size: 24px;
  font-weight: 800;
  font-family: 'Muli';
  line-height: 32px;
}
.inbox-panel-header .name-container .description {
  color: #7888a4;
  font-size: 12px;
}
.inbox-panel {
  background: none;
  color: #fff;
  height: 100%;
  padding-bottom: 16px;
  box-sizing: border-box;
}
.inbox-panel .tab-layout-container {
  background: #283245;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.inbox-panel .inbox-tab-selector {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin: 32px;
}
.inbox-panel .inbox-tab-selector .horizontal-pill-selector {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.inbox-panel .inbox-tab-selector .horizontal-pill-selector .option-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.inbox-panel .inbox-tab-selector .horizontal-pill-selector .selected-pill-background {
  background-color: #00ceb8;
  shadow: none;
}
.inbox-commented-item {
  padding: 15px 20px 15px 20px;
  border-bottom: 1px solid #18202e;
  transition: all 0.1s ease;
  cursor: pointer;
  border-left: none;
  padding-bottom: 15px;
  overflow: hidden;
  border-radius: 8px;
}
.inbox-commented-item:hover {
  background: #283245;
}
.inbox-commented-item.selected {
  border-left: 6px solid #00ceb8;
  background: #283245;
}
.inbox-commented-item >.title-container {
  margin-bottom: 5px;
  font-size: 11px;
  color: #7888a4;
}
.inbox-commented-item >.title-container >.label {
  line-height: 1.2;
}
.inbox-commented-item .message-container {
  display: flex;
}
.inbox-commented-item .message-container .content {
  margin-top: 5px;
  margin-left: 15px;
}
.inbox-commented-item .message-container .mention {
  color: #3498db;
  font-weight: bold;
  font-style: italic;
}
.inbox-commented-item .message-container .user {
  font-weight: bold;
  padding-right: 5px;
  display: flex;
  align-items: center;
}
.inbox-commented-item .message-container .user .name {
  padding-right: 7px;
}
.inbox-commented-item .message-container .user .timestamp {
  font-size: 12px;
  color: #7888a4;
  font-weight: normal;
}
.inbox-commented-item .message-container .message {
  margin-top: 3px;
}
.user-comments {
  font-size: 14px;
  overflow-y: auto;
  flex-grow: 1;
  padding: 0 32px;
}
.mention-item-container {
  border-bottom: 1px solid #18202e;
  transition: all 0.1s ease;
  cursor: pointer;
  border-left: none;
  padding-bottom: 15px;
}
.mention-item-container:hover {
  background: #283245;
}
.mention-item-container.selected {
  border-left: 6px solid #00ceb8;
  background: #283245;
}
.mention-item-container.unread {
  background: #18202e;
}
.mention-item-container >.title-container {
  padding: 15px 20px 0px 20px;
  margin-bottom: 5px;
  font-size: 12px;
  color: #7888a4;
}
.mention-item-container >.title-container >.label {
  line-height: 1.2;
}
.mention-item-container >.title-container >.title {
  font-weight: bold;
  font-size: 13px;
}
.mention-item-container >.mention-item {
  display: flex;
  padding: 0px 20px 10px 20px;
}
.mention-item-container >.mention-item .mention {
  color: #3498db;
  font-weight: bold;
  font-style: italic;
}
.mention-item-container >.mention-item .content {
  flex-grow: 1;
  position: relative;
  margin-left: 15px;
  top: 7px;
}
.mention-item-container >.mention-item .content .user {
  font-weight: bold;
  padding-right: 5px;
  display: flex;
  align-items: center;
}
.mention-item-container >.mention-item .content .user .name {
  padding-right: 7px;
}
.mention-item-container >.mention-item .content .user .timestamp {
  font-size: 12px;
  color: #7888a4;
  font-weight: normal;
}
.mention-item-container >.mention-item .content .message {
  margin-top: 5px;
}
.user-mentions {
  font-size: 14px;
  overflow-y: auto;
  flex-grow: 1;
  padding: 0 32px;
}
.inbox-topic-item {
  padding: 15px 20px 15px 20px;
  border-bottom: 1px solid #18202e;
  transition: all 0.1s ease;
  border-left: none;
  cursor: pointer;
  overflow: hidden;
}
.inbox-topic-item:hover {
  background: #283245;
}
.inbox-topic-item.selected {
  border-left: 6px solid #00ceb8;
  background: #283245;
}
.inbox-topic-item .header-container {
  display: flex;
  flex-direction: row;
  font-size: 10px;
  margin-bottom: 6px;
  color: #bbb;
  position: relative;
}
.inbox-topic-item .header-container .type {
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 5px;
  font-size: 11px;
}
.inbox-topic-item .header-container .channel-container {
  flex-grow: 1;
  color: #7888a4;
  font-size: 11px;
}
.inbox-topic-item .header-container .channel-container .channel {
  font-weight: bold;
  padding-left: 3px;
}
.inbox-topic-item .title {
  font-size: 16px;
}
.inbox-topic-item .title a {
  pointer-events: none;
  text-decoration: none;
  color: #7888a4;
}
.inbox-topic-item .title:first-letter {
  text-transform: capitalize;
}
.user-topics {
  overflow-y: auto;
  flex-grow: 1;
  padding: 0 32px;
}
.integration-panel {
  height: calc(100% - 80px);
  position: relative;
}
.integration-panel .integration-panel-item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  user-select: none;
  position: relative;
}
.integration-panel .integration-panel-item:first-child .selected-indicator-underlay::before {
  display: none;
}
.integration-panel .integration-panel-item:first-child .selected-indicator-underlay .handle-bar::before {
  display: none;
}
.integration-panel .integration-panel-item .icon-container {
  background: #171e2e;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  transition: all 0.3s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integration-panel .integration-panel-item .name {
  max-width: 70px;
  font-size: 10px;
  font-family: 'Muli';
  opacity: 0.6;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: 5px;
  z-index: 1;
}
.integration-panel .integration-panel-item .selected-indicator-underlay {
  transition: all 0.1s ease;
  position: absolute;
  z-index: 0;
  background: #1b1f2d;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  top: 0px;
  bottom: 0px;
  width: 84px;
  left: -84px;
  opacity: 0;
  pointer-events: none;
}
.integration-panel .integration-panel-item.selected .icon-container {
  background: #01ceb8;
}
.integration-panel .integration-panel-item.selected .name {
  opacity: 1;
  color: #01ceb8;
}
.integration-panel .integration-panel-item.selected .selected-indicator-underlay {
  left: 0;
  opacity: 1;
  pointer-events: auto;
}
.integration-panel .integration-panel-item.selected .selected-indicator-underlay::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: 0;
  background: #0b0d1c;
  z-index: 1;
}
.integration-panel .integration-panel-item.selected .selected-indicator-underlay .handle-bar::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
  background: #1b1f2d;
  z-index: 0;
}
.integration-panel .integration-panel-item.selected .selected-indicator-underlay::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  bottom: -20px;
  left: 0;
  background: #0b0d1c;
  z-index: 1;
}
.integration-panel .integration-panel-item.selected .selected-indicator-underlay .handle-bar::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -10px;
  left: 0;
  background: #1b1f2d;
  z-index: 0;
}
.integration-panel .menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -20px;
  padding-right: 20px;
  z-index: 601;
  background: #090d1c;
  border-top-left-radius: 10px;
  transition: all 0.3s ease;
  overflow: auto;
}
.integration-panel .menu.open {
  border-top-left-radius: 0;
}
.integration-panel .integration-content {
  position: absolute;
  width: 70vw;
  min-width: 400px;
  height: 100%;
  box-sizing: border-box;
  padding-right: 86px;
  background: #1b1f2d;
  top: 0;
  right: -70vw;
  transition: all 0.3s ease;
  z-index: 600;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 1px 1px 30px #0d131f;
}
.integration-panel .integration-content.open {
  right: 0;
}
.integration-panel .integration-modal-underlay.show {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
}
.player-list-item {
  height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Muli';
  cursor: pointer;
  border: solid 1px transparent;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.player-list-item .scrolled-name {
  position: absolute;
  top: 2px;
  opacity: 0;
  transition: all;
  font-size: 8px;
  color: #fff;
  z-index: 100;
  transition: opacity 0.25s;
}
.player-list-item .scrolled-name.show {
  opacity: 1;
}
.player-list-item.odd {
  background: #212635;
}
.player-list-item:hover {
  background: #2e3544;
  box-shadow: 0 2px 16px 0 rgba(3,6,22,0.5);
  border: solid 1px rgba(255,255,255,0.08);
}
.player-list-item .owner {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 9px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-list-item .cell {
  display: flex;
  -webkit-flex: 0 0 44px;
  -ms-flex: 0 0 44px;
  flex: 0 0 44px;
  font-size: 12px;
  color: #acbfe8;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 2px;
}
.player-list-item .cell.nba {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
}
.player-list-item .cell.idp_flex,
.player-list-item .cell.dl,
.player-list-item .cell.lb,
.player-list-item .cell.db {
  margin: 2px 10px;
}
.player-list-item .cell.k {
  margin: 2px 6px;
}
.player-list-item .cell.def {
  margin: 2px 4px;
}
.player-list-item .player-meta-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 90px;
}
.player-list-item .player-meta-container .name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.player-list-item .player-meta-container .name-row {
  display: flex;
  width: 90px;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.player-list-item .player-meta-container .name-container {
  padding: 0 4px;
  width: 110px;
  cursor: pointer;
}
.player-list-item .player-meta-container .name-container .game-schedule-live-description {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.player-list-item .player-meta-container .rookie-label {
  height: 12px;
  margin-left: 5px;
  position: absolute;
}
.player-list-item .position-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.player-list-item .position-container .position {
  font-size: 9px;
  line-height: 12px;
  color: #a3bbd3;
}
.player-list-item .position-container .injury-status {
  font-size: 9px;
  line-height: 12px;
  text-transform: uppercase;
  color: #ff2a6d;
  margin-left: 2px;
}
.player-list-item .position-container .injury-status.probable {
  color: #ffa656;
}
.player-list-item .owner-cell {
  -webkit-flex: 0 0 32px;
  -ms-flex: 0 0 32px;
  flex: 0 0 32px;
  display: flex;
  flex-direction: row;
  font-size: 10px;
  line-height: 12px;
  color: #79bdff;
  align-items: center;
  position: relative;
  margin-left: 8px;
}
.player-list-item .owner-cell .player-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 0 0 32px;
  -ms-flex: 0 0 32px;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 16px;
  background: #282d3d;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
}
.player-list-item .owner-cell .owner-text {
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  right: 8px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.player-list-item .watch-button {
  cursor: pointer;
  padding-left: 14px;
}
.player-list-item .watch-button img {
  transition: all 0.3s ease;
  transform: scale(1);
  width: 24px;
}
.player-list-item .watch-button:hover img {
  transform: scale(1.15);
}
.player-list-item .game-schedule-live-description {
  opacity: 0.6;
  min-height: 11px;
}
.player-list-item .player-action-button.trade svg {
  position: relative;
  top: 4px;
  left: 4px;
}
.player-list-item .player-action-button.waiver {
  display: flex;
  color: #ffae58;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.player-list-item .player-action-button.drop .drop {
  color: #ff2b6d;
}
.player-list-item .player-action-button.drop .drop i {
  font-size: 13px;
}
.game-schedule-wrapper .game-schedule-live-description {
  color: #a3bbd3;
  font-size: 11px;
}
.players-panel-lol {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.integration-players-panel {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.integration-players-panel .player-text {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 600;
  margin-right: 16px;
}
.integration-players-panel .header {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
.integration-players-panel .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.integration-players-panel .position-pill {
  display: flex;
  z-index: 10;
}
.integration-players-panel .header-top {
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48px;
  box-sizing: border-box;
  min-width: 640px;
}
.integration-players-panel .header-top .player-search-wrapper {
  margin-left: 8px;
}
.integration-players-panel .header-top .player-search-wrapper .player-search {
  position: relative;
  width: 160px;
  height: 32px;
  border-radius: 20px;
  border: none;
  background: #202635;
}
.integration-players-panel .header-top .player-search-wrapper .player-search .fa-search {
  position: absolute;
  font-size: 16px;
  right: 8px;
  top: 8px;
  color: #4e5a6e;
}
.integration-players-panel .header-top .player-search-wrapper input {
  height: 32px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  line-height: 40px;
  color: #fff;
  padding-left: 8px;
  outline: none;
  width: 110px;
  background-color: transparent;
}
.integration-players-panel .header-top .player-search-wrapper input::placeholder {
  color: #4e5a6e;
}
.integration-players-panel .filter-panel {
  margin-top: 16px;
  display: flex;
  position: relative;
  z-index: 99;
  color: #fff;
  align-items: center;
  box-sizing: border-box;
  height: 0px;
  visibility: hidden;
  transition: all 0.2s ease;
  overflow: hidden;
}
.integration-players-panel .filter-panel.open {
  height: 40px;
  transition: all 0.2s ease;
  visibility: visible;
  overflow: initial;
}
.integration-players-panel .filter-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.integration-players-panel .custom-checkbox {
  border-color: #7988a1;
  height: 16px;
  width: 16px;
  -webkit-flex: 0 0 16px;
  -ms-flex: 0 0 16px;
  flex: 0 0 16px;
  top: 0px;
  border-radius: 4px;
}
.integration-players-panel .custom-checkbox.checked {
  background: #00ceb8;
  border-color: #00ceb8;
}
.integration-players-panel .custom-checkbox.checked.nba {
  background: #ffae58;
  border-color: #ffae58;
}
.integration-players-panel .custom-checkbox.checked .checkmark {
  color: #022047;
}
.integration-players-panel .custom-checkbox .checkmark::before {
  font-size: 16px;
}
.integration-players-panel .filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 8px;
}
.integration-players-panel .filter-dropdown {
  margin-right: 8px;
  margin-top: 6px;
  height: 32px;
}
.integration-players-panel .filter-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #212a3c;
  min-height: 32px;
  min-width: 32px;
  border-radius: 32px;
  cursor: pointer;
  user-select: none;
}
.integration-players-panel .filter-button:hover {
  background-color: #3a465b;
}
.integration-players-panel .filter-button .filter-section {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 44px;
  right: 0px;
  z-index: 99;
  height: 400px;
  width: 500px;
  border-radius: 24px;
  box-sizing: border-box;
  padding: 32px;
  background-color: #2e3547;
  -webkit-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.75);
  overflow: hidden;
}
.integration-players-panel .filter-button .leaguemates-section {
  position: relative;
  display: flex;
  flex-direction: column;
}
.integration-players-panel .filter-button .leaguemates-section .leaguemate-scroll {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 180px;
  max-height: 300px;
  margin-top: 16px;
}
.integration-players-panel .filter-button .leaguemates-section .leaguemate-scroll .leaguemate-item {
  font-size: 12px;
  line-height: 16px;
  margin-left: 16px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-players-panel .filter-button .team-section-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.integration-players-panel .filter-button .teams-section {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16px;
}
.integration-players-panel .filter-button .teams-section .team {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 26px;
  margin-right: 16px;
  margin-top: 8px;
  flex-direction: column;
}
.integration-players-panel .filter-button .teams-section .team .team-name {
  font-size: 9px;
  color: #b9c4d4;
  margin-top: 4px;
}
.integration-players-panel .filter-button .teams-section .team .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(58,70,91,0.5);
  height: 26px;
  width: 26px;
  border-radius: 26px;
  border: 1px solid rgba(58,70,91,0.5);
  cursor: pointer;
}
.integration-players-panel .filter-button .teams-section .team .selected {
  border: 1px solid #fff;
}
.integration-players-panel .title {
  font-size: 16px;
  color: #fff;
  line-height: 18px;
  font-weight: 500;
}
.integration-players-panel .subtitle {
  font-size: 14px;
  color: #7988a1;
  line-height: 18px;
  font-weight: 500;
}
.integration-players-panel .clickable {
  cursor: pointer;
}
.integration-players-panel .clickable i {
  font-size: 8px;
  color: #4e5a6e;
}
.integration-players-panel .filter-label {
  font-size: 12px;
  color: #fff;
  position: relative;
  margin-right: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
.integration-players-panel .stat-type-filter {
  min-width: 151px;
  margin-right: 8px;
}
.integration-players-panel .player-table {
  position: relative;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-bottom: 36px;
}
.integration-players-panel .player-table:hover {
  overflow-x: auto;
}
.integration-players-panel .table-header {
  color: #fff;
  border-bottom: 1px solid #151a2a;
  padding-top: 16px;
}
.integration-players-panel .table-header .stat-key-header {
  display: flex;
  flex-direction: row;
  padding-left: 171px;
}
.integration-players-panel .table-header .stat-key-header.nba {
  padding-left: 176px;
}
.integration-players-panel .table-header .stat-key-header .label {
  display: flex;
  align-items: center;
  justify-items: center;
  -webkit-flex: 0 0 44px;
  -ms-flex: 0 0 44px;
  flex: 0 0 44px;
  padding-bottom: 9px;
  margin: 0 2px;
  width: 40px;
}
.integration-players-panel .table-header .stat-key-header .label.nba {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
}
.integration-players-panel .table-header .stat-key-header .label:last-child {
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
}
.integration-players-panel .table-header .stat-key-header .label.idp_flex,
.integration-players-panel .table-header .stat-key-header .label.dl,
.integration-players-panel .table-header .stat-key-header .label.lb,
.integration-players-panel .table-header .stat-key-header .label.db {
  margin: 0 10px;
}
.integration-players-panel .table-header .stat-key-header .label.k {
  margin: 0 6px;
}
.integration-players-panel .table-header .stat-key-header .label.def {
  margin: 0 4px;
}
.integration-players-panel .table-header .stat-key-header .label span {
  font-size: 12px;
  text-transform: uppercase;
  line-height: 16px;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.integration-players-panel .table-header .section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.integration-players-panel .table-header .section-header .fantasy {
  -webkit-flex: 0 0 96px;
  -ms-flex: 0 0 96px;
  flex: 0 0 96px;
  margin-left: 156px;
}
.integration-players-panel .table-header .section-header .fantasy.hasAdp {
  -webkit-flex: 0 0 118px;
  -ms-flex: 0 0 118px;
  flex: 0 0 118px;
  margin-left: 180px;
}
.integration-players-panel .table-header .section-header .rushing {
  -webkit-flex: 0 0 160px;
  -ms-flex: 0 0 160px;
  flex: 0 0 160px;
}
.integration-players-panel .table-header .section-header .receiving {
  -webkit-flex: 0 0 197px;
  -ms-flex: 0 0 197px;
  flex: 0 0 197px;
}
.integration-players-panel .player-list-container {
  height: 100%;
  position: relative;
  text-overflow: ellipsis;
  width: 100%;
}
.integration-players-panel .player-list-container .players-list {
  height: 100%;
}
.integration-players-panel .player-list-container .empty-list-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 100px;
}
.integration-players-panel .player-list-container .empty-list-container .no-result {
  font-size: 16px;
  color: rgba(124,139,164,0.7);
  font-weight: 600;
  margin-top: 16px;
}
.integration-players-panel .player-list-loader {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #1b1f2d;
}
.integration-players-panel .player-list-loader .shimmer-wrapper {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.integration-players-panel .player-list-loader .shimmer-wrapper .shimmer {
  flex-grow: 1;
  height: 12px;
  border-radius: 7px;
  margin: 8px 0;
  background: #4c576b;
}
.integration-players-panel.non-league .section-header {
  padding-left: 330px;
}
.integration-players-panel.non-league .stat-key-header {
  padding-left: 300px;
}
.integration-scores-panel {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
.integration-scores-panel .leaderboard-view {
  transition: all 0.3s ease;
  opacity: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  bottom: -100%;
  padding: 16px;
  overflow: hidden;
}
.integration-scores-panel .leaderboard-view.show {
  display: block;
  opacity: 1;
  bottom: 0;
}
.integration-scores-panel .leaderboard-view .game-center-leaderboard2 {
  height: 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.integration-scores-panel .leaderboard-view .game-center-leaderboard2 .players-list {
  height: 100%;
  width: 100%;
  overflow: auto;
  padding-bottom: 80px;
}
.integration-scores-panel .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  height: 48px;
  padding: 16px;
}
.integration-scores-panel .header .week-selector-container {
  color: #fff;
  height: 30px;
}
.integration-scores-panel .header .week-selector-container .app-dropdown {
  width: 180px;
  font-size: 12px;
}
.integration-scores-panel .scores-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}
.integration-scores-panel .scores-content .game-tickers-wrapper {
  height: 100%;
  overflow: auto;
  -webkit-flex: 0 0 164px;
  -ms-flex: 0 0 164px;
  flex: 0 0 164px;
}
.integration-scores-panel .scores-content .game-detail-wrapper {
  height: 100%;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-left: 1px solid #3a465b;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-header {
  padding-bottom: 10px;
  padding-left: 16px;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 16px;
  box-sizing: border-box;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-detail-tab-selector {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-height: 52px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-detail-tab-selector .horizontal-pill-selector {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-detail-tab-selector .horizontal-pill-selector .option-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-detail-tab-selector .horizontal-pill-selector .selected-pill-background {
  background-color: #00ceb8;
  shadow: none;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-detail-players-wrapper {
  height: calc(100% - 24px);
  overflow: auto;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  box-sizing: border-box;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-detail-players-wrapper .players-in-game {
  overflow: hidden;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-play-by-play-wrapper {
  height: 100%;
  overflow: auto;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}
.integration-scores-panel .scores-content .game-detail-wrapper .game-detail-content .game-play-by-play-wrapper .plays-list.empty {
  height: 100%;
}
.best-available-player-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  margin-bottom: 16px;
}
.best-available-player-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.best-available-player-container .row.players {
  margin-top: 16px;
  width: 100%;
  overflow-x: auto;
}
@media (min-width: 1200px) {
  .best-available-player-container .row.players {
    overflow: hidden;
  }
}
.best-available-player-container .title {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}
.best-available-player-container .player-item-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 140px;
  width: 90px;
  max-width: 90px;
  min-width: 90px;
  margin-right: 8px;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.best-available-player-container .player-item-container .avatar-container {
  background-color: #181c28;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 42px;
  z-index: 10;
}
.best-available-player-container .player-item-container .data-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  top: -16px;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.best-available-player-container .player-item-container .data-container .name {
  margin-top: 16px;
  font-size: 14px;
  color: #d8e2ed;
  font-weight: 600;
}
.best-available-player-container .player-item-container .data-container .team {
  color: #b9c4d4;
  font-size: 10px;
  line-height: 12px;
}
.best-available-player-container .player-item-container .data-container .position {
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
}
.best-available-player-container .player-item-container .data-container .circle {
  height: 4px;
  width: 4px;
  border-radius: 4px;
  background-color: #b9c4d4;
  margin: 0 2px;
}
.best-available-player-container .player-item-container .data-container .bottom-section {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: rgba(58,70,91,0.1);
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.best-available-player-container .player-item-container .data-container .bottom-section .points {
  font-size: 18px;
  color: #fff;
  font-weight: 600px;
}
.trending-list-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  flex-direction: row;
  font-family: 'Poppins', sans-serif;
  align-items: center;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  padding: 8px;
  max-height: 60px;
  min-height: 60px;
}
.trending-list-item .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trending-list-item .player-action-button.add {
  border-color: #00ceb8;
}
.trending-list-item .player-action-button.trade {
  border-color: #58a7ff;
}
.trending-list-item .player-action-button.trade .svg-icon {
  position: relative;
  top: 4px;
  left: 4px;
}
.trending-list-item .player-action-button.waiver {
  border-color: #ffae58;
  color: #ffae58;
  text-align: center;
  font-size: 10px;
}
.trending-list-item .player-action-button.drop {
  color: #ff2b6d;
  border-color: #ff2b6d;
}
.trending-list-item:hover {
  opacity: 0.9;
}
.trending-list-item .rank {
  -webkit-flex: 0 0 24px;
  -ms-flex: 0 0 24px;
  flex: 0 0 24px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.trending-list-item .owner-text {
  font-size: 9px;
  color: #58a7ff;
  padding-top: 5px;
}
.trending-list-item .player-details {
  padding: 0 10px;
  flex-grow: 1;
}
.trending-list-item .player-details .name {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.trending-list-item .player-details .position {
  padding-top: 5px;
  font-size: 10px;
  color: #a2bbd3;
}
.trending-list-item .score {
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}
.trending-list-item .score.trending {
  color: #01ceb8;
}
.trending-list-item .score.falling {
  color: #ff2a6d;
}
.trending-list-item .game-schedule-live-description {
  color: #627391;
}
.trending-list2 {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  padding-bottom: 64px !important;
  box-sizing: border-box;
  overflow-x: hidden;
}
@media (max-width: 1300px) {
  .trending-list2 {
    flex-direction: column;
    align-items: center;
  }
}
.trending-list2 .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trending-list2 .player-action-button {
  height: 24px;
  width: 24px;
}
.trending-list2 .last {
  margin-top: 16px;
}
@media (min-width: 1300px) {
  .trending-list2 .last {
    margin-top: 0px;
    margin-left: 16px;
  }
}
.trending-list2 .trending-container {
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  border-radius: 16px;
  box-sizing: border-box;
  width: 100%;
  flex-grow: 1;
  background-color: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
@media (min-width: 1300px) {
  .trending-list2 .trending-container {
    width: 350px;
  }
}
.trending-list2 .trending-container .dropdown {
  height: 30px;
}
.trending-list2 .trending-container .app-dropdown .selected-value {
  width: 80px;
}
.trending-list2 .trending-container .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 600;
}
.trending-list2 .trending-container .trending-list-players {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  background-color: #181c28;
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  align-items: flex-start;
}
.integration-trending-panel {
  height: 100%;
  overflow: auto;
}
.integration-trending-panel .trending-scroll {
  padding: 0 32px;
}
.integration-trending-panel .players-list {
  padding: 20px 25px;
  box-sizing: border-box;
  flex-grow: 1;
}
.empty-list-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.empty-list-container .no-result {
  font-size: 16px;
  color: rgba(124,139,164,0.7);
  font-weight: 600;
  margin-top: 16px;
}
.integration-watchlist-panel {
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0 32px;
}
@media (max-width: 1440px) {
  .integration-watchlist-panel {
    max-width: 900px;
  }
}
.integration-watchlist-panel .header {
  font-family: 'Muli';
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  line-height: 32px;
  padding-bottom: 25px;
  padding: 25px;
  box-sizing: border-box;
}
.integration-watchlist-panel .watchlist-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}
.integration-watchlist-panel .watchlist-content .news {
  height: 100%;
  overflow: hidden;
  background: #232d40;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-sizing: border-box;
}
.integration-watchlist-panel .watchlist-content .news .player-news-tab {
  padding-bottom: 60px;
}
.integration-watchlist-panel .watchlist-content .news .player-news {
  padding-bottom: 50px;
}
.integration-watchlist-panel .watchlist-content .news.first-player-selected {
  border-top-left-radius: 0;
}
.integration-watchlist-panel .watchlist-players-wrapper {
  height: 100%;
  overflow: hidden;
  flex-grow: 1;
}
.integration-watchlist-panel .watchlist-players-wrapper .watchlist-players {
  height: 100%;
}
.integration-watchlist-panel .watchlist-players-wrapper .watchlist-players >div:last-child {
  margin-bottom: 80px;
}
.integration-watchlist-panel .watchlist-players-wrapper .watchlist-players .watchlist-player-item {
  padding: 15px 15px;
  box-shadow: border-box;
  box-sizing: border-box;
}
.integration-watchlist-panel .watchlist-players-wrapper .watchlist-players .watchlist-player-item-wrapper {
  position: relative;
}
.integration-watchlist-panel .watchlist-players-wrapper .watchlist-players .watchlist-player-item-wrapper.selected .watchlist-player-item {
  background: #232d40;
}
.integration-watchlist-panel .watchlist-players-wrapper.not-selected .watchlist-players >div:last-child {
  margin-bottom: 0px;
}
@media (min-width: 900px) {
  .integration-watchlist-panel .watchlist-players-wrapper {
    -webkit-flex: 0 0 340px;
    -ms-flex: 0 0 340px;
    flex: 0 0 340px;
  }
  .integration-watchlist-panel .watchlist-players-wrapper.not-selected {
    flex-grow: 1;
  }
  .integration-watchlist-panel .watchlist-content .news {
    display: block;
  }
}
.watchlist-player-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Muli';
  color: #fff;
  padding: 10px 0;
  min-width: 300px;
  cursor: pointer;
}
.watchlist-player-item .player-action-button.add {
  border-color: #00ceb8;
}
.watchlist-player-item .player-action-button.trade {
  border-color: #58a7ff;
}
.watchlist-player-item .player-action-button.trade .svg-icon {
  position: relative;
  top: 4px;
  left: 4px;
}
.watchlist-player-item .player-action-button.waiver {
  border-color: #ffae58;
  color: #ffae58;
  text-align: center;
  font-size: 10px;
}
.watchlist-player-item .player-action-button.drop {
  color: #ff2b6d;
  border-color: #ff2b6d;
}
.watchlist-player-item .owner-text {
  font-size: 9px;
  color: #58a7ff;
  padding-top: 5px;
}
.watchlist-player-item .player-details {
  padding: 0 10px;
  flex-grow: 1;
}
.watchlist-player-item .player-details .name {
  font-size: 13px;
  font-weight: 700;
}
.watchlist-player-item .player-details .position {
  padding-top: 5px;
  font-size: 10px;
  color: #a2bbd3;
}
.watchlist-player-item .game-schedule-live-description {
  color: #627391;
}
.watchlist-player-item .watch-button img {
  width: 30px;
  padding: 10px;
}
.watchlist-player-item .player-scoring {
  color: #fff;
  text-align: center;
}
.watchlist-player-item .player-scoring .projections {
  color: #fff;
  opacity: 0.7;
}
.watchlist-players .watchlist-players-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: 'Muli';
  padding-bottom: 50px;
  box-sizing: border-box;
}
.watchlist-players .watchlist-players-empty img {
  max-width: 50%;
}
.watchlist-players .watchlist-players-empty .title {
  color: #a3bbd3;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 14px;
  margin-top: 50px;
}
.watchlist-players .watchlist-players-empty .desc {
  color: #a3bbd3;
  font-size: 10px;
  padding-top: 10px;
}
.watchlist-players .watchlist-players-empty .desc .svg-icon {
  position: relative;
  top: 5px;
}
.invited-prompt {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #18202f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.invited-prompt .validation-message-block {
  margin-top: 20px;
  margin-bottom: 0;
}
.invited-prompt .invite-container {
  background: #283245;
  padding: 25px 40px;
  border-radius: 10px;
  box-shadow: 1px 1px 15px #18202f;
  position: relative;
}
.invited-prompt .logo-wrapper {
  position: absolute;
  top: -50px;
}
.invited-prompt .logo-wrapper img {
  width: 70px;
  height: 70px;
}
.invited-prompt .logo-wrapper .ripple {
  position: relative;
  left: 35px;
  top: 11px;
}
.invited-prompt .channel-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.invited-prompt .channel-invite .subtext {
  font-weight: 300;
  font-size: 16px;
  margin: 10px 0 40px 0;
  text-align: center;
  letter-spacing: 0.3px;
}
.invited-prompt .channel-invite .channel-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.invited-prompt .channel-invite .channel-meta .name {
  font-size: 30px;
  font-weight: bold;
  margin: 40px 0 10px 0;
  text-align: center;
}
.invited-prompt .channel-invite .channel-meta .description {
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 30px;
}
.invited-prompt .channel-invite .actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invited-prompt .channel-invite .actions .button button {
  min-width: 250px;
  min-height: 50px;
}
.invited-prompt .invite-container-draftboard,
.invited-prompt .invite-container-league {
  padding: 25px 40px;
  border-radius: 10px;
  position: relative;
  color: #fff;
}
.invited-prompt .draftboard-invite {
  height: 100vh;
  overflow: auto;
  width: 300px;
  padding: 25px 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.invited-prompt .draftboard-invite .avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #ddd;
  background: #fff;
}
.invited-prompt .draftboard-invite .name {
  margin-top: 50px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
}
.invited-prompt .draftboard-invite .name:first-letter {
  text-transform: capitalize;
}
.invited-prompt .draftboard-invite .meta {
  display: flex;
  flex-direction: row;
  margin: 15px;
  width: 100%;
}
.invited-prompt .draftboard-invite .setting-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  border-left: 1px solid #efefef;
  padding: 10px 0;
}
.invited-prompt .draftboard-invite .setting-item .value {
  font-size: 16px;
  font-weight: 300;
}
.invited-prompt .draftboard-invite .setting-item .label {
  font-size: 10px;
}
.invited-prompt .draftboard-invite .setting-item:first-child {
  border-left: none;
}
.invited-prompt .draftboard-invite .roster {
  font-size: 11px;
  text-align: center;
}
.invited-prompt .draftboard-invite .action-buttons {
  margin-top: 30px;
}
.invited-prompt .draftboard-invite .action-buttons .button {
  margin-bottom: 10px;
  width: 100%;
}
.invited-prompt .draftboard-invite .action-buttons button {
  width: 100%;
}
.invited-prompt .league-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.invited-prompt .league-invite .invite-copy {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  text-align: center;
  opacity: 0.8;
}
.invited-prompt .league-invite .league-invite-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.invited-prompt .league-invite .league-invite-item .league-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.invited-prompt .league-invite .league-invite-item .league-meta .name {
  margin-top: 40px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.25;
}
.invited-prompt .league-invite .league-invite-item .league-meta .name strong {
  font-weight: 600;
}
.invited-prompt .league-invite .league-invite-item .league-meta .description {
  margin: 15px 0 30px 0;
  font-size: 16px;
  opacity: 0.8;
}
.invited-prompt .league-invite .actions {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.invited-prompt .league-invite .button button {
  min-width: 300px;
  min-height: 50px;
  margin-bottom: 10px;
}
.league-invite-background {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.league-invite-background .bg-red {
  height: 500px;
  width: 500px;
  border-radius: 250px;
  background-color: #ff2b6d;
  filter: blur(50px);
  opacity: 0.2;
  position: absolute;
  top: 100px;
  right: 50px;
}
.league-invite-background .bg-green {
  height: 500px;
  width: 500px;
  border-radius: 250px;
  background-color: #00ceb8;
  filter: blur(50px);
  opacity: 0.2;
  position: absolute;
  top: 120px;
  left: 50px;
}
.league-invite-background .top-left-logo {
  position: absolute;
  top: 57px;
  left: 28px;
  width: 200px;
}
.league-invite-background .league-invite-content {
  display: flex;
  position: relative;
  flex-direction: column;
  border-radius: 24px;
  background-color: #344054;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 66px;
  padding-bottom: 32px;
}
.league-invite-background .league-invite-content .error-container {
  position: absolute;
  top: 54px;
}
.league-invite-background .league-invite-content .sport-icon {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: -60px;
  z-index: 10;
}
.league-invite-background .league-invite-content .title {
  font-size: 32px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin-top: 144px;
}
.league-invite-background .league-invite-content .subtitle {
  color: #b9c4d4;
  font-size: 16px;
  font-family: 'Inter';
  margin-top: 15px;
}
.league-invite-background .league-invite-content .league-info-container {
  margin-top: 24px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  padding: 14px 20px;
  background-color: #293142;
  height: 72px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
}
.league-invite-background .league-invite-content .league-info-container .league-info {
  display: flex;
  flex-direction: column;
  margin-left: 24px;
}
.league-invite-background .league-invite-content .league-info-container .league-info .league-name {
  font-size: 16px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}
.league-invite-background .league-invite-content .league-info-container .league-info .league-description {
  margin-top: 8px;
  font-size: 12px;
  color: #b9c4d4;
}
.league-invite-background .league-invite-content .buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 70px;
  height: 48px;
  width: 100%;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: space-between;
}
.league-invite-background .league-invite-content .buttons-container .cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 32px;
  border-radius: 28px;
  height: 48px;
  width: 168px;
  color: #d8e2ed;
  font-size: 14px;
  border: 1px solid #d8e2ed;
  cursor: pointer;
}
.league-invite-background .league-invite-content .buttons-container .confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px 32px;
  border-radius: 28px;
  height: 48px;
  width: 264px;
  background-color: #00ceb8;
  color: #022047;
  font-size: 14px;
  margin-left: 24px;
  cursor: pointer;
}
.unauthenticated-invited-page {
  display: flex;
}
.unauthenticated-invited-page .channel-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.unauthenticated-invited-page .channel-invite .invite-copy {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.25;
  text-align: center;
  opacity: 0.8;
}
.unauthenticated-invited-page .channel-invite .channel-invite-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.unauthenticated-invited-page .channel-invite .channel-invite-item .channel-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.unauthenticated-invited-page .channel-invite .channel-invite-item .channel-meta .name {
  margin-top: 40px;
  font-size: 38px;
  font-weight: 300;
  line-height: 1.25;
}
.unauthenticated-invited-page .channel-invite .channel-invite-item .channel-meta .name strong {
  font-weight: 300;
}
.unauthenticated-invited-page .channel-invite .channel-invite-item .channel-meta .description {
  margin: 15px 0 30px 0;
  font-size: 16px;
  opacity: 0.8;
}
.unauthenticated-invited-page .channel-invite .button button {
  min-width: 300px;
  min-height: 50px;
  margin-bottom: 10px;
}
.unauthenticated-invited-page .league-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.unauthenticated-invited-page .league-invite .invite-copy {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  text-align: center;
  opacity: 0.8;
}
.unauthenticated-invited-page .league-invite .league-invite-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.unauthenticated-invited-page .league-invite .league-invite-item .league-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.unauthenticated-invited-page .league-invite .league-invite-item .league-meta .name {
  margin-top: 40px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.25;
}
.unauthenticated-invited-page .league-invite .league-invite-item .league-meta .name strong {
  font-weight: 600;
}
.unauthenticated-invited-page .league-invite .league-invite-item .league-meta .description {
  margin: 15px 0 30px 0;
  font-size: 16px;
  opacity: 0.8;
}
.unauthenticated-invited-page .league-invite .button button {
  min-width: 300px;
  min-height: 50px;
  margin-bottom: 10px;
}
.keyboard-navigatable-listview .legend {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  padding: 5px 10px;
  position: relative;
  border-bottom: 1px solid #aaa;
  text-align: left;
  letter-spacing: 0.5px;
}
.keyboard-navigatable-listview .legend .filter {
  display: inline;
  position: relative;
  left: 0;
}
.keyboard-navigatable-listview .legend .filter .filter-term {
  font-weight: bold;
  padding-left: 5px;
}
.keyboard-navigatable-listview .legend .filter i {
  animation-duration: 1.25s !important;
  font-size: 10px;
  margin-left: 5px;
}
.keyboard-navigatable-listview .legend .hotkeys {
  display: inline;
  position: absolute;
  right: 10px;
}
.keyboard-navigatable-listview .legend .hotkeys i {
  font-weight: 900;
}
.keyboard-navigatable-listview .legend .hotkeys .navigate,
.keyboard-navigatable-listview .legend .hotkeys .select {
  display: inline;
  margin-left: 15px;
}
.keyboard-navigatable-listview .legend .hotkeys .navigate i,
.keyboard-navigatable-listview .legend .hotkeys .select i {
  margin-right: 4px;
}
.keyboard-navigatable-listview .legend .hotkeys .navigate .key,
.keyboard-navigatable-listview .legend .hotkeys .select .key {
  font-weight: 900;
  color: #aaa;
  letter-spacing: 0.4px;
}
.keyboard-navigatable-listview .results {
  max-height: 400px;
  overflow: auto;
}
.keyboard-navigatable-listview .no-results {
  padding: 10px 10px;
  font-size: 12px;
  text-align: center;
  color: #aaa;
  letter-spacing: 0.4px;
}
.add-player-panel {
  border-radius: 10px;
}
.add-player-panel .player-name-with-position {
  color: #fff;
}
.add-player-panel .game-schedule-live-description {
  color: #a3bbd3;
}
.add-player-panel .channel-settings-body {
  height: auto !important;
  max-height: 60vh;
  overflow-x: hidden;
}
.add-player-panel .player-to-add {
  display: flex;
  padding: 20px 10px;
}
.add-player-panel .player-to-add .cell-player-meta {
  flex-grow: 1;
}
.add-player-panel .player-to-add .cell-position {
  margin-right: 26px;
}
.add-player-panel .drop-message {
  padding: 10px;
  font-size: 13px;
  color: #a3bbd3;
  text-align: center;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.add-player-panel .bid-form {
  margin: 15px 10px;
  padding: 10px 0;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.add-player-panel .bid-form .label {
  font-size: 10px;
  text-transform: uppercase;
  color: #a3bbd3;
  font-weight: 900;
  margin-bottom: 10px;
}
.add-player-panel .bid-form .label .sub-label {
  padding-left: 5px;
}
.add-player-panel .bid-form .bid-input-container {
  display: flex;
  font-size: 13px;
  align-items: center;
}
.add-player-panel .bid-form .bid-input-container input {
  line-height: 26px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-left: 4px;
  padding-left: 5px;
  font-size: 13px;
  width: 80px;
}
.assign-draft-order-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
}
.assign-draft-order-modal .channel-settings-body {
  max-height: 300px;
}
.assign-draft-order-modal .channel-settings-body .unassigned {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  margin: 10px 25px 10px 25px;
}
.assign-draft-order-modal .channel-settings-body .user {
  height: 50px;
  align-items: center;
  display: flex;
  padding: 5px 25px;
  box-sizing: border-box;
  cursor: pointer;
}
.assign-draft-order-modal .channel-settings-body .user:hover {
  background: #18202f;
}
.assign-draft-order-modal .channel-settings-body .user.selected {
  background: #18202f;
}
.assign-draft-order-modal .channel-settings-body .user .position {
  width: 30px;
  font-size: 12px;
  font-weight: 900;
}
.assign-draft-order-modal .channel-settings-body .user .name {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
  font-weight: bold;
  flex-grow: 1;
}
.assign-draft-order-modal .channel-settings-body .user .fa-check-circle {
  color: #00ceb8;
}
.center-tab-selector {
  display: flex;
  height: 40px;
  padding: 24px;
  width: 100%;
}
.center-tab-selector .item-tab {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  margin-right: 8px;
  padding: 12px 16px;
  background-color: rgba(0,206,184,0.1);
  color: #00ceb8;
  border-radius: 8px;
  cursor: pointer;
}
.center-tab-selector .item-tab.selected {
  background-color: #00ceb8;
  color: #022047;
}
.center-tab-selector .item-tab .waiver-count-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  height: 18px;
  width: 18px;
  box-sizing: border-box;
  background-color: #ff2b6d;
  color: #fff;
  font-size: 9px;
  position: absolute;
  top: -5px;
  right: -5px;
  border: 2px solid #293042;
  font-weight: 600;
  padding-right: 1px;
}
.center-tab-selector .item-tab .waiver-count-tab.selected {
  background-color: #00ceb8;
  color: #022047;
  padding-bottom: 3px;
  padding-right: 1px;
}
.center-tab-selector .nba {
  background-color: rgba(255,174,88,0.1);
  color: #ffae58;
}
.center-tab-selector .nba.selected {
  background-color: #ffae58;
  color: #022047;
}
.center-tab-selector .selector-title {
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-left: 4px;
}
.center-tab-selector .selector-title.selected {
  color: #022047;
}
.commish-badge {
  display: inline-block;
}
.commish-badge img {
  width: 16px;
}
.commish-edit-matchup-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  width: 800px;
  border-radius: 10px;
  overflow: hidden;
}
.commish-edit-matchup-modal .channel-settings-body {
  display: flex;
}
.commish-edit-matchup-modal .channel-settings-body .rosters-list {
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  height: 60vh;
  overflow: auto;
  border-right: 1px solid #18202f;
}
.commish-edit-matchup-modal .channel-settings-body .rosters-list .roster-nav-item {
  padding: 10px 15px;
  margin: 15px;
  border-radius: 5px;
  cursor: pointer;
}
.commish-edit-matchup-modal .channel-settings-body .rosters-list .roster-nav-item:hover {
  background: #18202f;
}
.commish-edit-matchup-modal .channel-settings-body .rosters-list .roster-nav-item.selected {
  background: #18202f;
}
.commish-edit-matchup-modal .channel-settings-body .edit-rosters-panel {
  flex-grow: 1;
  height: 60vh;
  overflow: auto;
  padding: 25px;
  box-sizing: border-box;
}
.commish-edit-matchup-modal .channel-settings-body .edit-rosters-panel .custom-points-display {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0;
  font-size: 12px;
}
.commish-edit-matchup-modal .channel-settings-body .edit-rosters-panel .custom-points-display .points-label .points {
  font-weight: bold;
  margin-left: 3px;
  font-size: 15px;
}
.commish-edit-matchup-modal .channel-settings-body .edit-rosters-panel .custom-points-display .button {
  margin-left: 15px;
}
.commish-edit-matchup-modal .channel-settings-body .edit-rosters-panel .custom-points-display input {
  margin-left: 10px;
  width: 50px;
  height: 24px;
}
.commish-edit-schedule-matchups-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  width: 600px;
  border-radius: 10px;
  overflow: hidden;
}
.commish-edit-schedule-matchups-modal .channel-settings-body {
  width: 100%;
  max-height: 450px;
}
.commish-edit-schedule-matchups-modal .channel-settings-body .all-matchups {
  min-height: 450px;
  padding-top: 20px;
}
.commish-edit-schedule-matchups-modal .channel-settings-body .all-matchups .instruction {
  text-align: center;
  margin-bottom: 20px;
}
.commish-edit-schedule-matchups-modal .channel-settings-body .all-matchups.spinner-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.commish-lock-roster-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  width: 500px;
  border-radius: 10px;
  overflow: hidden;
}
.commish-lock-roster-modal .channel-settings-body {
  width: 100%;
  max-height: 450px;
}
.commish-lock-roster-modal .channel-settings-body .league-user-row {
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  position: relative;
  height: 40px;
  align-items: center;
}
.commish-lock-roster-modal .channel-settings-body .league-user-row:hover {
  background: #18202f;
}
.commish-lock-roster-modal .channel-settings-body .league-user-row.selected {
  background: #18202f;
}
.commish-lock-roster-modal .channel-settings-body .league-user-row.selected:hover {
  background: #18202f;
}
.commish-lock-roster-modal .channel-settings-body .league-user-row .lock-icon {
  padding-left: 10px;
}
.commish-lock-roster-modal .channel-settings-body .league-user-row .league-user-name {
  padding-left: 10px;
}
.commish-update-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  width: 500px;
  border-radius: 10px;
  overflow: hidden;
}
.commish-update-modal .channel-settings-body {
  width: 100%;
  max-height: 450px;
}
.commish-update-modal .channel-settings-body .league-user-row {
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  position: relative;
  height: 40px;
}
.commish-update-modal .channel-settings-body .league-user-row:hover {
  background: #18202f;
}
.commish-update-modal .channel-settings-body .league-user-row.selected {
  background: #18202f;
}
.commish-update-modal .channel-settings-body .league-user-row.selected:hover {
  background: #18202f;
}
.commish-update-modal .channel-settings-body .league-user-row .selected-icon {
  position: absolute;
  left: 25px;
  top: 23px;
}
.commish-update-modal .channel-settings-body .league-user-row .team-owner-with-description {
  margin-left: 35px;
}
.create-league-modal {
  box-shadow: 1px 1px 10px #18202f;
  width: 60vw;
  height: 80vh;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  background: #2d3649;
}
.create-league-modal .main-text {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  margin-bottom: 8px;
  color: #fff;
}
.create-league-modal .sub-text {
  font-size: 12px;
  font-family: Inter;
  font-weight: normal;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-align: center;
  margin-bottom: 30px;
}
.create-league-modal .dotted-divider {
  margin-left: 8px;
  flex-grow: 1;
  border-width: 1px;
  border-top-style: dashed;
  display: inline-block;
  border-color: #7988a1;
}
.create-league-modal .header {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
}
.create-league-modal .header .spacer {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.create-league-modal .header .back-button {
  cursor: pointer;
}
.create-league-modal .header .close-button {
  cursor: pointer;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-league-modal .header .close-button:hover {
  background: #1c212d;
  border-radius: 20px;
}
.create-league-modal .header .header-progress-container {
  width: 200px;
}
.create-league-modal .header .header-progress-container .header-text {
  color: #7988a1;
  font-size: 12px;
  text-align: center;
  font-family: Poppins;
}
.create-league-modal .header .header-progress-container .progress-bar {
  height: 4px;
  border-radius: 2px;
  background: #7988a1;
  margin-top: 8px;
}
.create-league-modal .header .header-progress-container .progress-bar-fill {
  margin-top: 8px;
  height: 4px;
  border-radius: 2px;
  transition: all 0.1s linear;
  background: #00ceb8;
}
.create-league-modal .choose-game-content {
  margin-top: 30px;
}
.create-league-modal .choose-game-content .banner-image {
  width: 100%;
  cursor: pointer;
}
.create-league-modal .choose-game-content .sports-row {
  margin-top: 40px;
  flex-direction: row;
  display: flex;
  justify-content: space-evenly;
}
.create-league-modal .choose-game-content .sports-row .sport-row-button {
  cursor: pointer;
}
.create-league-modal .choose-game-content .sports-row .sports-row-title {
  margin-top: 12px;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
}
.create-league-modal .choose-game-content .sports-row .sports-row-description {
  font-family: Inter;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  margin-top: 5px;
  padding-bottom: 5px;
  color: #b9c4d4;
  max-width: 124px;
}
.create-league-modal .choose-game-content .sports-row .sports-row-size {
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: 0.25px;
  margin-top: 5px;
  color: #b9c4d4;
}
.create-league-modal .choose-league-size-content {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  width: 418px;
  margin-left: 131px;
}
.create-league-modal .choose-league-size-content .sub-header {
  margin-top: 30px;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: 1.25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.create-league-modal .choose-league-size-content .league-icon {
  margin-top: 8px;
}
.create-league-modal .choose-league-size-content .dropdown {
  margin-top: 8px;
  width: 235px;
  height: 48px;
  border: 1px solid #fff;
  background-color: #2d3649;
  border-radius: 28px;
  padding-left: 10px;
  padding-right: 20px;
  margin-right: 8px;
  color: #fff;
  font-family: Inter;
  font-size: 16px;
}
.create-league-modal .choose-league-size-content .name-input .form-elements.text-input {
  width: 100%;
}
.create-league-modal .choose-league-size-content .name-input .actual-text {
  border-bottom: none;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: -0.25px;
  text-align: left;
  border-radius: 24px;
  margin-top: 8px;
  height: 48px;
  color: #fff;
  border: 1px solid #fff;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: 0;
  opacity: 1;
}
.create-league-modal .choose-league-size-content .name-input .actual-text:focus {
  border: 1px solid #00ceb8;
}
.create-league-modal .choose-league-size-content .worry-text {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #b9c4d4;
}
.create-league-modal .choose-league-size-content .validation-block {
  margin-top: 20px;
  height: 60px;
}
.create-league-modal .choose-league-size-content .next-button {
  width: 418px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background-color: #00ceb8;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #022047;
  cursor: pointer;
}
.create-league-modal .choose-league-settings-content {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
}
.create-league-modal .choose-league-settings-content .sub-header {
  margin-top: 25px;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.11;
  letter-spacing: 1.25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.create-league-modal .choose-league-settings-content .selection-title-text {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: -0.25px;
  text-align: left;
  color: #fff;
  margin: 4px;
  margin-left: 8px;
}
.create-league-modal .choose-league-settings-content .selection-description-text {
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 16px;
  letter-spacing: -0.25px;
  text-align: left;
  margin-left: 8px;
  color: #b9c4d4;
}
.create-league-modal .choose-league-settings-content .worry-text {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 12px;
  color: #b9c4d4;
}
.create-league-modal .choose-league-settings-content .next-button {
  width: 418px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background-color: #00ceb8;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #022047;
  cursor: pointer;
}
.create-league-modal .choose-league-settings-content .league-type-selector {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
.create-league-modal .choose-league-settings-content .league-type-selector .league-type-button {
  width: 178px;
  height: 84px;
  padding: 8px;
  border-radius: 24px;
  border: 2px solid #7988a1;
  cursor: pointer;
  position: relative;
}
.create-league-modal .choose-league-settings-content .league-type-selector .league-type-button-selected {
  background-color: rgba(0,206,184,0.2);
  border: 2px solid #00ceb8;
}
.create-league-modal .choose-league-settings-content .league-type-selector .league-type-background-image {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0.85;
}
.create-league-modal .choose-league-settings-content .draft-type-selector {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.create-league-modal .choose-league-settings-content .draft-type-selector .draft-type-button {
  width: 100%;
  height: 50px;
  padding: 5px;
  border-radius: 20px;
  border: 2px solid rgba(0,0,0,0);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.create-league-modal .choose-league-settings-content .draft-type-selector .draft-type-button-selected {
  background-color: rgba(0,206,184,0.2);
  border: 2px solid #00ceb8;
}
.create-league-modal .duplicate-league-content {
  margin-top: 30px;
  height: calc(100% - 60px);
}
.create-league-modal .duplicate-league-content .next-button {
  width: 418px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background-color: #00ceb8;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #022047;
  cursor: pointer;
  margin: 0 auto;
}
.create-league-modal .duplicate-league-content .set-up-your-league-content {
  height: calc(100% - 60px);
  overflow: auto;
}
.create-league-modal-background {
  width: 680px;
  height: 576px;
  padding: 24px;
  border-radius: 24px;
}
.create-league-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.create-league-panel .animated-bot-left {
  background-image: url("https://sleepercdn.com/images/landing/v3/logos/anim_bot_side_dark.gif");
  position: absolute;
  left: 25px;
  width: 224px;
  height: 348px;
  pointer-events: none;
}
.choose-pro-league-content {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  align-content: center;
  flex-direction: column;
  height: 90%;
}
.spacer {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.main-text {
  font-family: Poppins;
  font-size: 26px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
}
.selection-title-text {
  font-family: Poppins;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: center;
  color: #fff;
}
.selection-description-text {
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #b9c4d4;
}
.next-button-pro-league {
  width: 418px;
  height: 48px;
  margin-left: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background-color: #00ceb8;
  font-family: Poppins;
  font-size: 23px;
  color: #022047;
  cursor: pointer;
}
.pro-league-selector {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
.pro-league-selector .region-map {
  width: 400px;
  height: 211px;
  display: flex;
  flex-direction: row;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  justify-content: space-between;
}
.pro-league-selector .lcs {
  margin-left: 20px;
}
.pro-league-selector .lck {
  margin-right: 20px;
}
.pro-league-selector .pro-league-button {
  width: 50px;
  height: 50px;
  border-radius: 27px;
  background-color: rgba(100,110,120,0.6);
  border: 2px solid #7988a1;
  cursor: pointer;
}
.pro-league-selector .pro-league-button-selected {
  background-color: rgba(0,145,200,0.9);
  border: 2px solid #00baff;
}
.choose-pro-league-content {
  align-content: center;
}
.choose-pro-league-content .team-logos {
  margin-top: 12px;
}
.choose-pro-league-content .teams-subheader {
  font-family: Poppins;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: center;
}
.choose-pro-league-content .teams-details {
  font-family: Inter;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #b9c4d4;
}
.set-up-your-league-content {
  width: 388px;
  margin: 0 auto;
}
.set-up-your-league-content .main-text {
  margin-bottom: 8px !important;
}
.set-up-your-league-content .sub-text {
  font-size: 12px;
  font-family: Inter;
  font-weight: normal;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-align: center;
  margin-bottom: 30px;
}
.set-up-your-league-content .section-header-text {
  flex-direction: row;
  align-items: center;
  display: flex;
  text-transform: uppercase;
  font-family: Poppins;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  color: #d8e2ed;
  margin-bottom: 8px;
}
.set-up-your-league-content .section-header-text .dotted-divider {
  margin-left: 8px;
  flex-grow: 1;
  border-width: 1px;
  border-top-style: dashed;
  display: inline-block;
  border-color: #7988a1;
}
.set-up-your-league-content .section-divider {
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
  font-family: Poppins;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(124,139,164,0.7);
}
.set-up-your-league-content .section-item {
  margin: 0 0 16px;
  padding: 14px 11px 11px 16px;
  border-radius: 24px;
  border: solid 2px #a3bbd3;
  cursor: pointer;
}
.set-up-your-league-content .section-item:hover {
  opacity: 0.85;
}
.set-up-your-league-content .section-item.selected {
  background-color: rgba(0,206,184,0.2);
  border-color: #00ceb8;
}
.set-up-your-league-content .section-item.selected .new-league-item .desc-text {
  color: #fff;
}
.set-up-your-league-content .league-item {
  display: flex;
  flex-direction: row;
}
.set-up-your-league-content .league-item .title-text {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  color: #fff;
  margin-bottom: 4px;
}
.set-up-your-league-content .league-item .desc-text {
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  color: #a3bbd3;
}
.set-up-your-league-content .league-item .avatar-league {
  margin-right: 8px;
}
.set-up-your-league-content .league-item .league-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.set-up-your-league-content .new-league-item .title-text {
  font-family: Poppins;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.25px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}
.set-up-your-league-content .new-league-item .desc-text {
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-transform: capitalize;
}
.set-up-your-league-content .league-info-desc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 4px;
  text-transform: capitalize;
}
.set-up-your-league-content .no-leagues-text {
  font-size: 12px;
  font-family: Inter;
  font-weight: normal;
  letter-spacing: -0.25px;
  color: #d8e2ed;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
  opacity: 0.5;
}
.division-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
}
.division-header .division-header-avatar {
  position: relative;
}
.division-header .division-name {
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}
.draft_auction_results_item {
  cursor: pointer;
}
.draft_auction_results_item .userNameText {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft_auction_results_item .playerInfoText {
  align-self: center;
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
}
.draft_auction_results_item .playerNameText {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: right;
}
.draft_auction_results_item .pickNumberText {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: right;
}
.draft_auction_results_item .offerNumberText {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: right;
}
.draft-queue-player-item {
  height: 44px;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-left: 0px;
  padding-right: 15px;
  user-select: none;
}
.draft-queue-player-item .draft-queue-player-item-player {
  cursor: pointer;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
}
.draft-queue-player-item .draft-queue-player-item-player .stats-item {
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.draft-queue-player-item .draft-queue-player-item-player .stats-item .stats_header {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
}
.draft-queue-player-item .draft-queue-player-item-player .stats-item .stats_value {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
}
.draft-queue-player-item .draft-queue-player-item-player .svg-handles {
  cursor: move;
  padding-left: 8px;
  padding-right: 10px;
}
.draft-queue-player-item .draft-queue-player-item-player .svg-handles path {
  fill: #a3bbd3;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container {
  min-width: 0;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .name {
  font-weight: 700;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #3a465b;
  max-width: 110px;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .position {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 10px;
  font-family: 'Muli';
  padding-top: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  line-height: 12px;
  font-weight: normal;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .position .position-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 3px;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .position .rookie-label {
  height: 12px;
  margin-left: 5px;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .position .team {
  padding-left: 6px;
  color: #677897;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .position .injury-status {
  font-size: 9px;
  text-transform: uppercase;
  margin-right: 10px;
  color: #f00;
  margin-left: 5px;
}
.draft-queue-player-item .draft-queue-player-item-player .meta-container .position .injury-status.probable {
  color: #ffa500;
}
.draft-queue-player-item .draft-queue-player-item-player .stats-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
}
.draft-queue-player-item .draft-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #00ceb8;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.draft-queue-player-item .draft-button svg path {
  fill: #00ceb8;
}
.draft-queue-player-item .draft-button:hover {
  background: #00ceb8;
}
.draft-queue-player-item .draft-button:hover svg path {
  fill: #fff;
}
.draft-queue-player-item .draft-button.picking {
  background: #ecf0f4;
}
.draft-queue-player-item .draft-button.disable {
  background: #ecf0f4;
  border: none;
}
.draft-queue-player-item .draft-button.disable:hover {
  background: #ecf0f4;
}
.draft-queue-player-item .draft-button.disable:hover svg path {
  fill: #022047;
}
.draft-queue-player-item .draft-button.disable svg path {
  fill: #a3bbd3;
}
.draft-queue-player-item .draft-button .spinner {
  border-width: 2px;
  width: 8px;
  height: 8px;
}
.draft-queue-player-item .delete-button {
  height: 24px;
  border-radius: 12px;
  width: 64px;
  line-height: 24px;
  text-align: center;
  font-family: 'Muli';
  font-size: 10px;
  border: 1px solid #677897;
  cursor: pointer;
  text-transform: uppercase;
  margin-right: 5px;
  margin-left: 5px;
}
.draft-queue-player-item .delete-button:hover {
  background: #677897;
  color: #fff;
}
.draft-queue-player-item.theme-dark {
  color: #fff;
  background-color: transparent;
}
.draft-queue-player-item.theme-dark.odd {
  background-color: transparent;
}
.draft-queue-player-item.theme-dark .draft-queue-player-item-player .meta-container .name {
  color: #fff;
}
.draft-queue-player-item.theme-dark .draft-queue-player-item-player .meta-container .delete-button {
  color: #677897;
}
.draft-queue-player-item.theme-dark .draft-queue-player-item-player .meta-container .delete-button:hover {
  color: #102131;
}
.draft-queue-player-item.theme-dark .draft-button {
  background: #282d3d;
}
.draft-queue-player-item.theme-dark .draft-button svg path {
  fill: #00ceb8;
}
.draft-queue-player-item.theme-dark .draft-button:hover {
  background: #00ceb8;
}
.draft-queue-player-item.theme-dark .draft-button:hover svg path {
  fill: #022047;
}
.draft-queue-player-item.theme-dark .draft-button.picking {
  background: #282d3d;
}
.draft-queue-player-item.theme-dark .draft-button.disable:hover {
  background: #282d3d;
}
.draft-queue-player-item.theme-dark .draft-button.disable svg path {
  fill: #5c6a7c;
}
.sortable-queue-item {
  z-index: 1;
  position: relative;
  cursor: pointer;
}
.sortable-queue-item .sortable-queue-item-handle {
  width: 8px;
  left: 0;
  top: 0;
  bottom: 0;
}
.sortable-queue-list {
  position: relative;
  padding-top: 3px;
}
.sortable-queue-list .item-container {
  position: relative;
  margin-top: 10px;
}
.sortable-queue-list .item-container .item-placeholder {
  position: absolute;
  opacity: 0.05;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.sortable-queue-list .item-container .item-placeholder.odd {
  background-color: #f9fafc;
}
.sortable-queue-list .item-container .item-placeholder.odd.theme-light {
  opacity: 0.1;
  background-color: #aaa;
}
.sortable-queue-list .top-of-queue {
  position: absolute;
  border-color: #89a5fb;
  border-radius: 8px;
  border-style: dashed;
  border-width: 1px;
  margin-left: 5px;
  margin-right: 5px;
  height: 50px;
  width: calc(100% - 12px);
}
.sortable-queue-list .top-of-queue .top-of-queue-text {
  text-align: center;
  color: #a4acff;
  font-family: 'Poppins';
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
}
.draft-queue {
  position: relative;
}
.draft-queue .autopick-toggle {
  z-index: 1;
}
.draft-queue .header {
  height: 34px;
  position: relative;
}
.draft-queue .header .header-text {
  display: flex;
  flex-direction: row;
  align-content: center;
  font-family: 'Muli';
  font-size: 12px;
  text-transform: uppercase;
  color: #677897;
  letter-spacing: 0.5px;
}
.draft-queue .header .player-label {
  line-height: 34px;
  padding-left: 30px;
  flex-grow: 1;
}
.draft-queue .header .draft-label {
  line-height: 34px;
  padding-right: 10px;
}
.draft-queue .header .top-of-queue::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.15;
  border-radius: 8px;
  background-image: linear-gradient(to bottom, #6e7df5, #6e7df5), linear-gradient(to top, #89a5fb, #635ee4);
}
.draft-queue .empty-queue-state {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 42px;
  font-family: 'Muli';
}
.draft-queue .empty-queue-state img {
  max-width: 90%;
}
.draft-queue .empty-queue-state .empty-header {
  color: #a3bbd3;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 700;
}
.draft-queue .empty-queue-state .empty-desc {
  color: #a3bbd3;
  margin-top: 10px;
  font-size: 10px;
}
.draft-queue .autopick-toggle-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 15px 16px 5px 16px;
}
.draft-queue .autopick-toggle-container .autopick-label {
  font-size: 10px;
  color: #d8e2ed;
  padding: 0 10px;
}
.draft-roster-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
  padding: 0 10px;
  color: #3a465b;
}
.draft-roster-list-item .player-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  flex-grow: 1;
  font-family: 'Muli';
}
.draft-roster-list-item .player-data .avatar-player {
  margin-right: 10px;
}
.draft-roster-list-item .player-data .name {
  font-size: 12px;
  font-weight: 700;
}
.draft-roster-list-item .player-data .team {
  color: #677897;
  font-size: 10px;
  padding-top: 3px;
}
.draft-roster-list-item .player-data .meta-container {
  flex-grow: 1;
}
.draft-roster-list-item .player-data .pick-container {
  flex-basis: 50px;
  text-align: center;
}
.draft-roster-list-item .player-data .pick-container .pick-text {
  font-weight: 700;
  font-size: 12px;
}
.draft-roster-list-item .player-data .pick-container .pick-label {
  color: #677897;
  font-size: 10px;
  padding-top: 3px;
}
.draft-roster-list-item .player-data-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10px;
  font-size: 12px;
  font-family: 'Muli';
  color: #677897;
}
.draft-roster {
  display: block;
  overflow: auto;
  padding-left: 20px;
}
.draft-roster .roster-item {
  display: flex;
  flex-direction: row;
  height: 40px;
  align-items: center;
  margin-bottom: 5px;
  cursor: pointer;
}
.draft-roster .roster-item .league-slot-position-square {
  margin-bottom: 0;
}
.draft-roster .roster-item .avatar-player {
  margin-left: 5px;
}
.draft-roster .roster-item .player-name-with-position {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 10px;
  width: 120px;
  overflow: hidden;
}
.draft-roster .roster-item .player-name-with-position .position {
  padding-left: 0;
}
.draft-roster .roster-item .bye {
  padding-left: 10px;
  text-align: center;
}
.draft-roster .roster-item .bye .label {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  color: #555;
  line-height: 13px;
}
.draft-roster .roster-item .bye .value {
  font-size: 10px;
  color: #ccc;
}
.draft-roster .roster-item .empty {
  font-size: 14px;
  padding: 0 15px;
  color: #ccc;
}
.draft-roster2 {
  position: relative;
}
.draft-roster2 .draft-roster-list-item .player-data {
  cursor: pointer;
}
.draft-roster2 .owner-selector .selected-team {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Muli';
  line-height: 13px;
  letter-spacing: 0.04px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding: 5px 38px 5px 10px;
  cursor: pointer;
}
.draft-roster2 .owner-selector .selected-team .avatar {
  margin-right: 10px;
}
.draft-roster2 .owner-selector .selected-team .name-container {
  flex-grow: 1;
}
.draft-roster2 .owner-selector .owner-selector-items-container {
  position: absolute;
  max-height: 300px;
  overflow: auto;
  left: 25px;
  right: 25px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #ccd2da;
}
.draft-roster2 .owner-selector .owner-selector-items-container .owner-selector-items {
  background: #fcfcfc;
  border-radius: 10px;
  user-select: none;
}
.draft-roster2 .owner-selector .owner-selector-items-container .owner-selector-item {
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Muli';
  font-size: 12px;
  letter-spacing: 0.02px;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.draft-roster2 .owner-selector .owner-selector-items-container .owner-selector-item:hover {
  background: #e9edf1;
}
.draft-roster2 .owner-selector .owner-selector-items-container .owner-selector-item .avatar {
  margin-right: 10px;
}
.draft_tab_view_results {
  width: 100%;
  height: 100%;
}
.draft_tab_view_results .headerText {
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
  text-align: left;
}
.draft_tab_view_results .player_list_dropdowns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: transparent;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .selected-value {
  border-color: #000;
  color: #000;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .dropdown-items {
  background-color: #f0f6fc;
  border-radius: 16px;
  margin-top: 10px;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .dropdown-items .app-dropdown-item {
  margin: 4px;
  border-radius: 12px;
  background-color: transparent;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .dropdown-items .app-dropdown-item .meta .name {
  color: #000;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .dropdown-items .app-dropdown-item:hover {
  background-color: #e2ebf1;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .dropdown-items .app-dropdown-item.selected {
  background-color: #d8e2ed;
}
.draft_tab_view_results .player_list_dropdowns.theme-light .dropdown-items .app-dropdown-item.selected .name {
  color: #000;
}
.draft_tab_view_results .player_list_header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  margin-left: 20px;
  margin-right: 20px;
}
.draft_tab_view_results .player_list {
  height: calc(100% - 32px - 40px - 32px);
  overflow: hidden;
}
.draft_tab_view_results .titleText {
  flex-grow: 0;
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
}
.draft_tab_view_results .subTitleText {
  flex-grow: 0;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
}
.draft_tab_view_results .app-dropdown {
  height: 40px;
  min-width: 120px;
  width: 40%;
  margin-left: 8px;
  margin-right: 8px;
}
.draft_tab_view_results .app-dropdown .selected-value {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  background-color: transparent;
  border: 1px solid;
  border-color: #fff;
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.draft_tab_view_results .app-dropdown .dropdown-items {
  background-color: #3a465b;
  border-radius: 16px;
  margin-top: 10px;
}
.draft_tab_view_results .app-dropdown .dropdown-items .app-dropdown-item {
  margin: 4px;
  border-radius: 12px;
  background-color: transparent;
}
.draft_tab_view_results .app-dropdown .dropdown-items .app-dropdown-item .meta .name {
  color: #fff;
}
.draft_tab_view_results .app-dropdown .dropdown-items .app-dropdown-item:hover {
  background-color: #495769;
}
.draft_tab_view_results .app-dropdown .dropdown-items .app-dropdown-item.selected {
  background-color: #d8e2ed;
}
.draft_tab_view_results .app-dropdown .dropdown-items .app-dropdown-item.selected .name {
  color: #000;
}
.draft-time-setup {
  display: flex;
  margin-top: 7px;
}
.draft-time-setup.member-view {
  flex-direction: column;
}
.draft-time-setup .time-option {
  flex-grow: 1;
  flex-basis: 0;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-align: center;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 15px 0 15px;
  cursor: pointer;
}
.draft-time-setup .time-option:hover {
  color: #fff;
  background: #00d8a7;
  border: 1px solid #00d8a7;
}
.draft-time-setup .time-option:hover .action-button {
  border-top-color: #fff;
}
.draft-time-setup .time-option .copy {
  flex-grow: 1;
  font-weight: 300;
  display: flex;
  align-items: center;
  padding-bottom: 8px;
}
.draft-time-setup .time-option .action-button {
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  border-top: 1px solid #e9e9e9;
  line-height: 28px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  width: 100%;
}
.draft-time-setup .or-text {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.draft-time-setup .validation-message-block {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.draft-time-setup .draft-btn .button {
  width: 100%;
  box-sizing: border-box;
}
.draft-time-setup .draft-btn .button button {
  width: 100%;
  box-sizing: border-box;
}
.draft-time-setup .draft-btn .countdown {
  margin-left: 5px;
}
.draft-time-setup .draft-btn .drafting-soon {
  background: #ffae58 !important;
}
.draft-time-setup .draft-btn .within-a-day {
  background: #58a7ff !important;
}
.draft-time-setup .draft-btn .drafting-now {
  background: #ff2a6d !important;
}
.drop-player-panel {
  background: #283245;
  min-width: 400px !important;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
  color: #fff;
}
.drop-player-panel .channel-settings-body {
  height: 60vh;
  overflow: auto;
  padding: 0 15px;
}
.edit-co-owner-settings .edit-co-owner-settings-body {
  width: 400px;
}
.edit-co-owner-settings .section {
  margin-top: 40px;
}
.edit-co-owner-settings .section .section-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: #a3bbd3;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
}
.edit-co-owner-settings .section .section-content >.search-input {
  padding: 10px 0px;
  position: relative;
}
.edit-co-owner-settings .section .section-content >.search-input .text-input {
  width: 100%;
}
.edit-co-owner-settings .section .section-content >.search-input .text-input input {
  border: none;
  padding-left: 15px;
  padding-right: 15px;
  background: #3a465b;
  border-radius: 4px;
  color: #fff;
}
.edit-co-owner-settings .section .section-content >.search-input .text-input input::placeholder {
  color: #a3bbd3;
}
.edit-co-owner-settings .section .section-content >.search-input .fa-search {
  position: absolute;
  right: 23px;
  color: #aaa;
  opacity: 0.7;
  top: 16px;
  font-size: 16px;
}
.edit-co-owner-settings .section .section-content .co-owner-row {
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
}
.edit-co-owner-settings .section .section-content .co-owner-row .name {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 8px;
  color: #fff;
}
.edit-co-owner-settings .section .section-content .no-results {
  color: #a3bbd3;
  font-size: 14px;
  padding-top: 10px;
  padding-left: 15px;
}
.edit-commish-settings .form-section {
  padding: 30px 0 0 0;
  margin: 0;
}
.edit-commish-settings .channel-settings-body .description {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 13px;
}
.division-settings .app-dropdown-container {
  height: 40px;
  margin-top: 8px;
  width: 152px;
}
.division-settings .app-dropdown-container .app-dropdown {
  width: 152px;
  height: 40px;
  font-size: 12px;
}
.division-settings .channel-settings-body {
  flex-grow: 1;
}
.division-settings .channel-settings-body.disabled {
  align-items: center;
  justify-content: center;
  font-size: 14px;
  display: flex;
  color: #999;
}
.division-settings .channel-settings-body .division-item {
  margin-bottom: 30px;
}
.division-settings .channel-settings-body .division-item .division-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.division-settings .channel-settings-body .division-item .division-header-container .division-header-wrapper {
  width: 46px;
  flex-basis: 46px;
}
.division-settings .channel-settings-body .division-item .division-header-container .division-name-input {
  display: block;
  flex-grow: 1;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
}
.division-settings .channel-settings-body .division-item .division-roster-item {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.division-settings .channel-settings-body .division-item .division-roster-item .owner-wrapper {
  flex-grow: 1;
}
.division-settings .channel-settings-body .division-item .division-roster-item i {
  color: #ccc;
}
.division-settings .channel-settings-body .division-item .division-roster-item.empty {
  height: 61px;
  box-sizing: border-box;
}
.division-settings .channel-settings-body .division-item .division-roster-item.empty .empty-owner {
  flex-grow: 1;
  font-size: 15px;
  color: #999;
}
.set-unassigned-roster-to-division-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  background: #2d3649;
  width: 340px;
}
.set-unassigned-roster-to-division-modal .division-roster-item {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
}
.edit-draft-order-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  background: #283245;
  width: 340px;
}
.edit-draft-order-modal .channel-settings-body {
  max-height: 450px;
  padding: 25px 0 0 0;
  overflow: auto;
}
.edit-draft-order-modal .label {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ccc;
  margin: 0 25px 10px 25px;
}
.edit-draft-order-modal .team-item {
  height: 50px;
  align-items: center;
  display: flex;
  border-bottom: 1px solid #efefef;
  padding: 5px 25px;
  box-sizing: border-box;
  cursor: move;
}
.edit-draft-order-modal .team-item:hover {
  background: #efefef;
}
.edit-draft-order-modal .team-item .position {
  width: 30px;
  font-size: 12px;
  font-weight: 900;
}
.edit-draft-order-modal .team-item .name {
  padding-left: 10px;
  font-size: 13px;
  font-weight: bold;
}
.edit-draft-order-modal .channel-settings-footer .button {
  margin-right: 10px;
}
.edit-draft-order-modal .draft-order-item {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.edit-draft-order-modal .unassigned-list {
  padding-left: 25px;
  padding-right: 25px;
}
.sortable-list-team-item-modal {
  z-index: 999999;
  height: 50px;
  align-items: center;
  display: flex;
}
.sortable-list-team-item-modal .position {
  width: 30px;
  font-size: 12px;
  font-weight: 900;
  display: none !important;
}
.sortable-list-team-item-modal .name {
  padding-left: 10px;
  font-weight: bold;
}
.edit-draft-order .unassigned-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.edit-draft-order .unassigned-container .text {
  color: #7988a1;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}
.edit-draft-order .unassigned-container .unassigned-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.edit-draft-order .unassigned-container .unassigned-user-container {
  margin-top: 8px;
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 16px;
  background-color: rgba(58,70,91,0.15);
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.edit-draft-order .unassigned-container .unassigned-user-container .unassigned-user {
  font-weight: bold;
  font-size: 10px;
  color: #fff;
}
.edit-draft-order .draft-order-item {
  padding: 16px;
  display: flex;
  align-items: center;
  font-size: 13px;
  height: 80px;
  cursor: pointer;
  transition: all 0.1s ease;
  border: 1px solid rgba(58,70,91,0.15);
  box-sizing: border-box;
  border-radius: 16px;
}
.edit-draft-order .draft-order-item .budget-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  margin-left: 15px;
}
.edit-draft-order .draft-order-item .budget-container input {
  width: 30px;
  border: none;
  height: 20px;
  outline: none;
  padding-left: 5px;
  font-size: 14px;
  border-bottom-color: #a3bbd3;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background: none;
  color: #fff;
}
.edit-draft-order .draft-order-item:hover {
  background: #18202f;
}
.edit-draft-order .draft-order-item .description-label {
  font-size: 11px;
  color: #a3bbd3;
}
.edit-draft-order .draft-order-item .draft-position {
  width: 25px;
}
.edit-draft-order .draft-order-item .name {
  flex-grow: 1;
  font-weight: bold;
  margin-left: 5px;
}
.edit-draft-order .draft-order-item.empty {
  cursor: pointer;
}
.edit-draft-order .draft-order-item.empty .name {
  color: #fff;
  font-weight: normal;
}
.edit-draft-order .draft-order-item.empty:hover {
  color: #fff;
  background: #18202f;
}
.edit-draft-settings .channel-settings-body {
  overflow: auto;
}
.edit-draft-settings .channel-settings-body.lock {
  overflow-y: hidden;
}
.edit-draft-settings .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.edit-draft-settings .app-dropdown-container {
  height: 40px;
  margin-top: 8px;
  width: 152px;
}
.edit-draft-settings .app-dropdown-container .app-dropdown {
  width: 152px;
  height: 40px;
  font-size: 12px;
}
.edit-draft-settings .form-section .label {
  display: flex;
}
.edit-draft-settings .draft-type .custom-horizontal-select-item {
  width: 80px;
}
.edit-draft-settings .nomination-section {
  margin-bottom: 10px;
}
.edit-draft-settings .supplemental-draft-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  padding: 16px 20px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: #022047;
  font-size: 14px;
  font-weight: 600;
  border-radius: 28px;
  cursor: pointer;
  width: 300px;
}
.edit-draft-settings .supplemental-draft-description {
  font-size: 12px;
  margin-bottom: 15px;
}
.edit-draft-settings .date-time-picker {
  position: relative;
}
.edit-draft-settings .date-time-picker .timezone-copy {
  font-size: 11px;
  margin-top: 3px;
}
.edit-draft-settings .date-time-picker .date {
  position: relative;
}
.edit-draft-settings .date-time-picker .date .date-picker {
  outline: none;
  width: 120px;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  background: none;
  color: #fff;
  border: 1px solid;
}
.edit-draft-settings .date-time-picker .date .date-picker::placeholder {
  color: #a3bbd3;
}
.edit-draft-settings .date-time-picker .date .fa-calendar {
  position: absolute;
  left: 116px;
  top: 6px;
  font-size: 12px;
}
.edit-draft-settings .date-time-picker .time {
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  position: absolute;
  left: 140px;
  top: 0;
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
}
.edit-draft-settings .date-time-picker .time input {
  outline: none;
  font-size: 12px;
  line-height: 12px;
}
.edit-draft-settings .date-time-picker .time input:focus {
  background: #58a7ff;
  color: #fff;
}
.edit-draft-settings .date-time-picker .time .hour,
.edit-draft-settings .date-time-picker .time .minute,
.edit-draft-settings .date-time-picker .time .period {
  color: #fff;
  background: none;
}
.edit-draft-settings .date-time-picker .time .hour,
.edit-draft-settings .date-time-picker .time .minute {
  width: 14px;
  border: none;
}
.edit-draft-settings .date-time-picker .time .hour {
  text-align: right;
}
.edit-draft-settings .date-time-picker .time .period {
  width: 22px;
  border: none;
}
.edit-draft-settings .edit-link {
  font-size: 11px;
  text-transform: none;
  color: #58a7ff;
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  margin-left: 15px;
}
.edit-draft-settings .edit-link i {
  padding-right: 4px;
}
.edit-draft-settings .edit-link:hover {
  color: #555;
}
.edit-draft-settings .autopick-wrap,
.edit-draft-settings margin-top: 10px {
  margin-left: 15px;
}
.edit-draft-settings .autopause-times {
  margin-top: 16px;
}
.edit-draft-settings .autopause-times.disabled {
  opacity: 0.5;
}
.edit-draft-settings .autopause-times .label {
  font-size: 10px;
  color: #a3bbd3;
  margin-bottom: 0px;
}
.edit-draft-settings .autopause-times .to {
  margin: 10px 4px 0px;
}
.edit-draft-settings .autopause-times .time-picker {
  margin-top: 10px;
}
.edit-draft-time .submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  cursor: pointer;
  color: #022047;
  background-color: #00ceb8;
  border-radius: 8px;
  width: 120px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}
.edit-draft-time .form-section .label {
  display: flex;
}
.edit-draft-time .channel-settings-body {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.edit-draft-time .date-time-picker {
  position: relative;
}
.edit-draft-time .date-time-picker .timezone-copy {
  font-size: 11px;
  margin-top: 3px;
}
.edit-draft-time .date-time-picker .date {
  position: relative;
}
.edit-draft-time .date-time-picker .date .date-picker {
  outline: none;
  width: 120px;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  background: none;
  color: #fff;
  border: 1px solid;
}
.edit-draft-time .date-time-picker .date .date-picker::placeholder {
  color: #a3bbd3;
}
.edit-draft-time .date-time-picker .date .fa-calendar {
  position: absolute;
  left: 116px;
  top: 6px;
  font-size: 12px;
}
.edit-draft-time .date-time-picker .time {
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  position: absolute;
  left: 140px;
  top: 0;
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
}
.edit-draft-time .date-time-picker .time input {
  outline: none;
  font-size: 12px;
  line-height: 12px;
}
.edit-draft-time .date-time-picker .time input:focus {
  background: #58a7ff;
  color: #fff;
}
.edit-draft-time .date-time-picker .time .hour,
.edit-draft-time .date-time-picker .time .minute,
.edit-draft-time .date-time-picker .time .period {
  color: #fff;
  background: none;
}
.edit-draft-time .date-time-picker .time .hour,
.edit-draft-time .date-time-picker .time .minute {
  width: 14px;
  border: none;
}
.edit-draft-time .date-time-picker .time .hour {
  text-align: right;
}
.edit-draft-time .date-time-picker .time .period {
  width: 22px;
  border: none;
}
.edit-league-member-panel {
  min-width: 400px !important;
  box-shadow: 1px 1px 15px #18202f;
  color: #fff;
  background: #283245;
}
.edit-league-member-panel .league-member-header {
  border: none;
}
.edit-league-member-panel .channel-settings-body {
  max-height: 60vh;
  overflow: auto;
  padding: 0 15px;
}
.edit-league-member-panel .channel-settings-body .user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 25px 10px;
}
.edit-league-member-panel .channel-settings-body .user-item .user-name {
  margin-left: 10px;
}
.edit-league-member-panel .channel-settings-body .add-users-wrap {
  padding: 10px 10px 25px 10px;
  font-size: 14px;
}
.edit-league-member-panel .channel-settings-body .add-users-wrap .select-user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 3px;
}
.edit-league-member-panel .channel-settings-body .add-users-wrap .select-user-item:hover {
  background-color: #18202f;
}
.edit-league-member-panel .channel-settings-body .add-users-wrap .select-user-item.selected {
  background-color: #18202f;
}
.edit-league-member-panel .channel-settings-body .add-users-wrap .select-user-item.selected:hover {
  background-color: #18202f;
}
.edit-league-member-panel .channel-settings-body .add-users-wrap .select-user-item .user-name {
  margin-left: 10px;
}
.edit-league-member-panel .channel-settings-footer .unassign-button-wrap {
  display: inline-block;
  margin-right: 20px;
}
.edit-league-settings .channel-settings-body {
  overflow: auto;
}
.edit-league-settings .channel-settings-body.lock {
  overflow-y: hidden;
}
.edit-league-settings .daily-waivers-hour-container {
  margin-top: 10px;
}
.edit-league-settings .daily-waivers-hour-container .daily-processing-times-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 540px;
  border: 1px solid #efefef;
}
.edit-league-settings .daily-waivers-hour-container .daily-processing-times-list .time-item {
  width: 45px;
  height: 25px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
}
.edit-league-settings .daily-waivers-hour-container .daily-processing-times-list .time-item.selected {
  background-color: #00ceb8;
  font-weight: bold;
}
.edit-league-settings .daily-waivers-days-container {
  margin-top: 20px;
}
.edit-league-settings .daily-waivers-days-container .daily-processing-days-list-item {
  margin-top: 10px;
}
.edit-league-settings .daily-waivers-days-container .daily-processing-days-list-item .warning {
  margin-left: 16px;
  font-size: 11px;
  color: #ffae58;
  align-self: flex-start;
}
.edit-league-settings .app-dropdown-container {
  height: 40px;
  margin-top: 8px;
  max-width: 152px;
}
.edit-league-settings .app-dropdown-container .app-dropdown {
  width: 152px;
  height: 40px;
  font-size: 12px;
}
.edit-league-settings .row {
  display: flex;
  align-items: center;
}
.edit-league-settings .waiver-bid-min {
  margin-top: 8px;
}
.edit-matchups-section {
  margin-bottom: 30px;
}
.edit-matchups-section .section-header {
  font-size: 11px;
  color: #a3bbd3;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding-bottom: 10px;
}
.edit-matchups-section .edit-matchup-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.edit-matchups-section .edit-matchup-row .edit-roster-item {
  width: 180px;
  padding: 10px 30px;
  background: #18202f;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #18202f;
}
.edit-matchups-section .edit-matchup-row .edit-roster-item.selected {
  border: 2px solid #ffd900;
}
.edit-matchups-section .edit-matchup-row .edit-roster-item .avatar-wrap {
  margin-right: 6px;
}
.edit-matchups-section .edit-matchup-row .versus {
  width: 30px;
  height: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit-member-settings .content {
  margin-top: 25px;
}
.edit-member-settings .section {
  margin-top: 30px;
}
.edit-member-settings .section .section-title {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 10px;
}
.edit-member-settings .section .user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.edit-member-settings .section .user-item .user-name {
  margin-left: 10px;
  color: #626262;
  font-weight: bold;
  font-size: 14px;
}
.edit-league-settings .edit-league-settings-body {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.edit-league-settings .edit-player-nickname {
  margin: 25px 0;
}
.edit-league-settings .edit-player-nickname >.label {
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  font-weight: bold;
  margin-bottom: 5px;
}
.edit-league-settings .edit-player-nickname .edit-player-nickname-item {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
  margin-top: 15px;
}
.edit-league-settings .edit-player-nickname .edit-player-nickname-item .nickname input {
  border: none;
  border-bottom: 1px solid #a3bbd3;
  width: 100%;
  margin-top: 5px;
  outline: none;
  height: 20px;
  margin-bottom: 10px;
  background: none;
  color: #fff;
}
.empty-panel-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.empty-panel-container p {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #eef2f7;
}
.empty-panel-container .footer {
  position: absolute;
  bottom: 0;
  height: 93px;
  width: 100%;
  background: #2c3749;
  opacity: 0.5;
  border: 1px solid rgba(58,70,91,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-panel-container .footer .download-row {
  display: flex;
  flex-direction: row;
  margin-top: 16px;
}
.empty-panel-container .footer .download-row a {
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
}
.empty-panel-container .footer .direct-download {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
  justify-content: center;
}
.empty-panel-container .footer .direct-download p {
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #eef2f7;
}
.empty-panel-container .footer .direct-download a {
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #00ceb8;
  text-decoration: none;
  margin-left: 4px;
}
.empty-panel-container .footer .responsible-gaming {
  display: flex;
  flex-direction: row;
  margin-top: 4px;
  justify-content: center;
}
.empty-panel-container .footer .responsible-gaming a {
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: center;
  color: #00ceb8;
  text-decoration: none;
  margin-left: 4px;
}
.game-schedule-live-description {
  display: flex;
  font-size: 11px;
  position: relative;
  color: #7988a1;
  align-items: center;
}
.game-schedule-live-description.flip {
  justify-content: flex-end;
}
.game-schedule-live-description .rz {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 3px;
  background: #ff2a6d;
  color: #fff;
  font-weight: bold;
  font-size: 8px;
  margin: 0 3px;
  position: relative;
  top: -1px;
}
.game-schedule-live-description .great {
  color: #ec5556;
}
.game-schedule-live-description .good {
  color: #eb7200;
}
.game-schedule-live-description .avg {
  color: #67c314;
}
.game-schedule-live-description .bad {
  color: #00a300;
}
.game-schedule-wrapper {
  display: flex;
  flex-direction: column;
}
.game-schedule-wrapper.flip {
  align-items: flex-end;
}
.yet-to-play {
  max-width: 60px;
  font-size: 10px;
  color: #7988a1;
}
.injury-status-indicator {
  font-size: 10px;
}
.latest-winner-indicator {
  position: absolute;
  bottom: -15%;
  left: -15%;
}
.league-activity {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.league-activity .panel-loader-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-height: 300px;
}
.league-activity .league-activity-item {
  box-sizing: border-box;
  width: 100%;
}
.league-activity .league-activity-item .league-transaction-item-commissioner-container .commissioner-text {
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: bold;
}
.league-activity .league-activity-item .league-transaction-item-commissioner-container .league-transaction-item-waiver {
  margin-top: 8px;
}
.league-activity .league-activity-item:last-child {
  border-bottom: none;
}
.league-activity .empty-transaction {
  display: flex;
  flex-direction: column;
  height: 200px;
  align-items: center;
  justify-content: center;
}
.league-activity .empty-transaction .empty-transaction-message {
  margin-top: 8px;
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 30px;
}
.league-activity .league-activity-item .transactions .drop-player,
.league-activity .league-activity-item .transactions .add-player {
  color: #fff;
}
.league-average-match {
  background-color: #283244;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px solid #efefef;
}
.league-average-match .average-icon-wrap {
  padding-bottom: 15px;
}
.league-average-match .average-icon-wrap .award-icon {
  width: 60px;
  height: 60px;
}
.league-average-match .average-title {
  font-weight: bold;
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}
.league-average-match .average-description {
  color: #ccc;
  font-size: 11px;
}
.co-owner-message-warning {
  font-size: 12px;
  color: #a3bbd3;
  text-align: center;
  padding: 10px 0px 15px 0;
  margin-bottom: 16px;
}
.league-division-standings .division-container {
  margin-bottom: 20px;
}
.league-division-standings .division-container .division-container-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
}
.league-division-standings .division-container .division-container-header .division-header {
  flex-grow: 1;
}
.league-division-standings .division-container .division-container-header .division-header .division-name {
  max-width: 120px;
  font-size: 13px !important;
  text-overflow: ellipsis;
}
.league-division-standings2 {
  display: flex;
  flex-direction: column;
}
.league-division-unassigned-rosters-warning.isCommish {
  cursor: pointer;
}
.league-header {
  display: flex;
  flex-direction: row;
  padding: 1px 20px 1px 20px;
  height: 48px;
  align-items: center;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  align-items: center;
  justify-content: space-between;
}
.league-header.new-message {
  background-color: #00ceb8;
  color: #022047;
}
.league-header .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-header .minimize-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  background-color: #2d3649;
  cursor: pointer;
  margin-left: 12px;
}
.league-header .minimize-chat:hover {
  background-color: #d8e2ed;
  box-shadow: 0px 10px 16px -4px #1c212d;
  -webkit-box-shadow: 0px 10px 16px -4px #1c212d;
  -moz-box-shadow: 0px 10px 16px -4px #1c212d;
}
.league-header .minimize-chat.new-message {
  background-color: rgba(58,70,91,0.5);
}
.league-header .right-option-container {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-header .right-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  background-color: #2d3649;
  border: 1px solid #6a7790;
  border-radius: 20px;
}
.league-header .right-option.new-message {
  background-color: rgba(58,70,91,0.5);
}
.league-header .right-option.is-hover {
  background-color: #6a7790;
}
.league-header .right-option:hover {
  background-color: #d8e2ed;
}
.league-header .shortcut {
  padding-top: 4px;
  font-size: 10px;
  color: #7988a1;
  margin-left: 8px;
}
.league-header .league-avatar-container {
  margin-right: 10px;
}
.league-header .name {
  font-weight: 500;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  line-height: 24px;
}
.league-header .pin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  background-color: #2d3649;
  cursor: pointer;
  margin-left: 12px;
}
.league-header .pin-button:hover {
  box-shadow: 0px 10px 16px -4px #1c212d;
  -webkit-box-shadow: 0px 10px 16px -4px #1c212d;
  -moz-box-shadow: 0px 10px 16px -4px #1c212d;
  color: #a3bbd3;
}
.league-header .voice-lounge-button-container {
  margin-left: 12px;
  border-radius: 50%;
}
.league-header .voice-lounge-button-container .voice-lounge-button {
  box-shadow: none;
}
.league-header .voice-lounge-button-container:hover {
  box-shadow: 0px 10px 16px -4px #1c212d;
  -webkit-box-shadow: 0px 10px 16px -4px #1c212d;
  -moz-box-shadow: 0px 10px 16px -4px #1c212d;
}
.league-header .league-header-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  border-radius: 17px;
  cursor: pointer;
  padding-left: 8px;
}
.league-header .league-header-arrow-container .league-header-arrow {
  height: 30px;
  width: 30px;
  transform: rotate(180deg);
}
.league-header .league-header-arrow-container .league-header-arrow.open {
  transform: rotate(0deg);
}
.league-panel-header {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #fff;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  padding: 20px 0;
  min-width: 490px;
  max-width: 100%;
  box-sizing: border-box;
}
.league-panel-header .settings-header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  min-width: 40px;
  border-radius: 8px;
  background-color: rgba(58,70,91,0.5);
  box-sizing: border-box;
}
.league-panel-header .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-panel-header .header-row-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.league-panel-header .member-settings-menu {
  background: #18202e;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 1px 1px 15px #18202f;
}
.league-panel-header .member-settings-menu .menu-item:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.league-panel-header .member-settings-menu .menu-item:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.league-panel-header .post-draft-league-header {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: 100%;
}
.league-panel-header .post-draft-league-header .context-menu .menu {
  border-radius: 16px;
  overflow: hidden;
}
.league-panel-header .post-draft-league-header .context-menu .menu .pointer .fa-caret-up,
.league-panel-header .post-draft-league-header .context-menu .menu .pointer .fa-caret-down {
  color: #18202e;
}
.league-panel-header .post-draft-league-header .left-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 80%;
}
@media (min-width: 1100px) {
  .league-panel-header .post-draft-league-header .left-header-row {
    max-width: 100%;
  }
}
.league-panel-header .post-draft-league-header .name {
  font-size: 20px;
  font-weight: 800;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 8px;
  font-family: 'Poppins', sans-serif;
}
.league-panel-header .post-draft-league-header .desc {
  color: #b9c4d4;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  margin-left: 8px;
}
.league-pinned-header {
  display: flex;
  height: 48px;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #18202f;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
}
.league-pinned-header .pinned-title {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.3px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  margin-left: 8px;
}
.league-pinned-header .back-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2d3649;
  height: 32px;
  width: 32px;
  border-radius: 40px;
  cursor: pointer;
}
.league-invite-cta {
  width: 100%;
  overflow: hidden;
}
.league-invite-cta .invite-link {
  background: #ddd;
  border-radius: 5px;
  display: flex;
  color: #666;
  padding: 13px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}
.league-invite-cta .invite-link:hover {
  background: #d0d0d0;
}
.league-invite-cta .invite-link .invite-url {
  flex-grow: 1;
  -webkit-flex: 0 0 220px;
  -ms-flex: 0 0 220px;
  flex: 0 0 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-invite-cta .invite-description {
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: #a3bbd3;
  margin-top: 5px;
}
.league-invite-cta .invite-link {
  margin-right: 10px;
  width: 240px;
  box-sizing: border-box;
  overflow: hidden;
}
.league-invite-cta .invite-link .copy {
  padding-left: 10px;
}
.league-invite-cta .invite-link-container {
  display: flex;
}
.league-invite-cta .invite-link-container .button {
  height: 40px !important;
}
.league-invite-cta .invite-link-container .button button {
  height: 40px !important;
}
.league-matchups-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  max-width: 70vw;
  height: 70vh;
  width: 860px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1c212d;
  padding: 16px;
  border-radius: 24px;
  box-sizing: border-box;
}
.league-matchups-modal .league-matchups .spinner-container {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.league-matchups-modal .league-matchups .league-matchup-row-item {
  box-sizing: border-box;
  margin-top: 16px;
  border-radius: 5px;
  border-bottom: none;
  border-radius: 16px;
  padding: 16px;
  font-family: 'Inter', sans-serif;
}
.league-matchups-modal .league-matchups .league-matchup-row-item.selected {
  background: rgba(58,70,91,0.25);
}
.league-matchups-modal .team-owner-matchup-row {
  display: block !important;
  padding: 15px 20px;
  box-sizing: border-box;
  border: none;
}
.league-matchups-modal .team-owner-matchup-row .user.reverse {
  flex-direction: row-reverse;
}
.league-matchups-modal .team-owner-matchup-row .user.reverse .team-owner-with-description {
  flex-direction: row;
}
.league-matchups-modal .team-owner-matchup-row .user.reverse .avatar-container {
  margin-left: 0;
}
.league-matchups-modal .team-owner-matchup-row .user.reverse .meta .name,
.league-matchups-modal .team-owner-matchup-row .user.reverse .meta .description {
  text-align: left;
}
.league-matchups-modal .team-owner-matchup-row .user .team-owner-matchup-roster {
  margin-bottom: 10px;
}
.league-matchups-modal .team-owner-matchup-row .user .team-owner-matchup-roster:last-child {
  margin-bottom: 0;
}
.league-matchups-modal .matchup-detail {
  min-width: 440px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 32px;
  padding-bottom: 0px;
  box-sizing: border-box;
}
.league-matchups-modal .matchup-detail .roster-matchup2 {
  width: 100%;
}
.league-matchups-modal .matchup-detail .roster-matchup {
  margin: 25px 0;
}
.league-matchups-modal .matchup-detail .roster-matchup .spinner-container {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  top: -25px;
}
.league-matchups-modal .matchup-detail .roster-matchup-row .roster-matchup-row-player {
  width: 200px;
}
.league-matchups-modal .matchup-detail .roster-matchup-row .roster-matchup-row-player .player-name-with-position {
  width: auto;
}
.league-matchups-modal .matchup-detail .roster-matchup-row .roster-matchup-row-player .player-meta {
  display: flex;
  flex-direction: column;
}
.league-matchups-modal .matchup-detail .roster-matchup-row .roster-matchup-row-player:first-child .player-meta .player-stat-text {
  align-self: flex-end;
}
.league-matchups-modal .matchup-detail .playoff-section {
  text-align: center;
  padding-top: 100px;
}
.league-matchups-modal .matchup-detail .playoff-section .playoff-image {
  width: 200px;
  height: 142px;
}
.league-matchups-modal .matchup-detail .playoff-section .playoff-title {
  font-size: 16px;
  color: #999;
  font-weight: bold;
  margin-top: 50px;
}
.league-matchups-modal .week-selector-carousel {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
}
.league-matchups-modal .week-selector-carousel .current-week {
  flex-grow: 1;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
.league-matchups .league-matchup-row-item {
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 16px 0 16px 0;
  font-family: 'Inter', sans-serif;
}
.league-matchups .league-matchup-row-item .position-label {
  width: 14px;
}
.league-matchups .matchup-pending-message {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  line-height: 1.3;
}
.league-members-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-members-container .team-placeholder {
  color: #fff;
  font-size: 14px;
}
.league-members-container .teams-container {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 8px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
  margin-bottom: 16px;
}
.league-members-container .teams-container .meta {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
}
.league-members-container .teams-container .meta .team-name {
  margin-left: 4px;
  max-width: 40 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.league-members-container .teams-container .meta .name {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.league-members-container .teams-container .meta .name .commish-badge {
  margin: 0;
}
.league-members-container .teams-container .meta .description {
  position: absolute;
  top: 20px;
  width: 130px;
  height: 12px;
  font-family: Inter;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.league-members-container .teams-container .users-without-roster-container {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
.league-members-container .teams-container .users-without-roster-container .subtitle {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 8px;
}
.league-members-container .teams-container .users-without-roster-container .member-settings {
  padding: 8px 16px;
  background-color: #00ceb8;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #022047;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.league-members-container .teams-container .users-without-roster-container .index {
  color: #7988a1;
  font-size: 12px;
  margin-right: 8px;
}
.league-members-container .teams-container .users-without-roster-container .member {
  font-size: 12px;
  color: #fff;
}
.league-members-container .teams-container .teams-list {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
}
.league-members-container .teams-container .team-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  border-radius: 8px;
  padding: 16px;
  height: 60px;
  justify-content: center;
  cursor: pointer;
}
.league-members-container .teams-container .team-item.selected {
  background-color: rgba(0,206,184,0.2);
}
.league-members-container .teams-container .team-item .rank {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  color: #7988a1;
}
.league-members-container .teams-container .team-item .button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  background-color: #00ceb8;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 6px 8px;
  font-weight: 600;
}
.league-members-container .title {
  font-size: 18px;
  color: #fff;
  line-height: 24px;
}
.league-members-container .invite {
  font-size: 12px;
  font-weight: bold;
  color: #00ceb8;
  cursor: pointer;
}
.league-members-container .text {
  font-size: 12px;
  color: #b9c4d4;
  line-height: 16px;
}
.league-members-container .header {
  padding: 8px;
}
.league-members-container .setting-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  cursor: pointer;
}
.league-members-container .setting-circle:hover {
  background-color: #1c212d;
}
.roster-popup {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 32px;
  background: #102131;
  max-height: 600px;
  width: 500px;
}
.league-panel {
  height: 100%;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
  color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.league-panel .postdraft-center-scroll {
  padding: 32px;
  padding-top: 0px;
}
.league-panel .league-panel-tabs-wrapper {
  position: relative;
  height: 100%;
}
.league-panel .league-panel-tab-selector {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  margin-left: 32px;
  margin-right: 32px;
}
.league-panel .league-panel-tab-selector .horizontal-pill-selector {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.league-panel .league-panel-tab-selector .horizontal-pill-selector .option-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.league-panel .league-panel-tab-selector .horizontal-pill-selector .selected-pill-background {
  background-color: #00ceb8;
  shadow: none;
}
.league-panel .league-panel-tab-selector .tabs-container .tab {
  position: relative;
}
.league-panel .league-panel-tab-selector .tabs-container .tab svg {
  position: absolute;
  top: -5px;
  left: -3px;
}
.league-panel .league-panel-tab-selector .tabs-container .tab svg.tab-matchup-icon {
  top: -1px;
}
.league-panel .league-panel-tab-selector .tabs-container .tab svg.tab-league-icon {
  top: -2px;
  left: -1px;
}
.league-panel .league-panel-tab-selector .tabs-container .tab svg.tab-settings-icon {
  top: -3px;
}
.league-panel .league-panel-tab-selector .tabs-container .tab .text-wrapper {
  padding-left: 20px;
}
.league-panel .league-panel-tab-selector .tab-layout-container {
  background: #18202f;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
.league-panel .league-panel-content-wrapper {
  height: 100%;
  position: relative;
  font-family: 'Inter', sans-serif;
}
.league-panel .scroll-predraft {
  padding: 32px;
  padding-top: 0px;
}
.league-panel .panel-loader {
  width: 100%;
}
.league-panel .tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.league-panel .channel-settings {
  min-width: 360px !important;
}
.league-panel .settings-section .grouping-header {
  font-size: 11px;
  color: #fff;
  margin-top: 30px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding-bottom: 10px;
}
.league-panel .settings-section .settings-header {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: #b6b6b6;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
  display: flex;
}
.league-panel .settings-section .settings-header .countdown {
  margin-left: 5px;
}
.league-panel .settings-section .settings-header .right {
  flex-grow: 1;
  text-align: right;
  font-weight: normal;
  color: #888;
  text-transform: none;
}
.league-panel .settings-section .settings-header .right i {
  margin-right: 3px;
}
.league-panel .settings-section .settings-header .edit {
  font-weight: bold;
  color: #58a7ff;
  cursor: pointer;
}
.league-panel .settings-section .settings-header .edit:hover {
  color: #555;
}
.league-panel .settings-section .settings-row {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  align-items: center;
  transition: all 0.2s ease;
}
.league-panel .settings-section .settings-row.edit {
  cursor: pointer;
}
.league-panel .settings-section .settings-row input[type=number] {
  outline: none;
  width: 30px;
  margin: 0 5px;
  text-align: right;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #ddd;
}
.league-panel .settings-section .settings-row input[type=number]:focus {
  border-color: #58a7ff;
}
.league-panel .settings-section .settings-row.disabled .name,
.league-panel .settings-section .settings-row.disabled .value {
  color: #bbb;
}
.league-panel .settings-section .settings-row.highlight {
  background-color: #505030;
}
.league-panel .settings-section .settings-row .name {
  flex-grow: 1;
  font-weight: bold;
  margin-right: 10px;
  font-size: 13px;
}
.league-panel .settings-section .settings-row .value {
  font-size: 12px;
}
.league-panel .settings-section .settings-row .value.value-list-item {
  margin-bottom: 5px;
}
.league-panel .settings-section .settings-row .plus {
  color: #00d8a7;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.league-panel .settings-section .settings-row .minus {
  color: #e04040;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.league-panel .settings-section .settings-row.stack {
  flex-direction: column;
  max-width: 395px;
  align-items: flex-start;
}
.league-panel .settings-section .settings-row.stack .name {
  margin-bottom: 5px;
}
.league-panel .settings-section .settings-row.stack .value {
  white-space: initial;
}
.league-panel .settings-section .settings-row.sub-section {
  padding-left: 20px;
}
.form-section {
  margin-top: 50px;
}
.form-section .label {
  font-size: 10px;
  text-transform: uppercase;
  color: #aaa;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-section .label-description {
  font-size: 12px;
  margin-bottom: 15px;
}
.form-section .custom-horizontal-select {
  margin-top: 5px;
}
.form-section .custom-radio-group {
  margin-top: 15px;
}
.form-section .custom-radio-group .custom-radio-item {
  margin-bottom: 15px;
}
.form-section .custom-radio-group .custom-radio-item .subtext {
  font-size: 12px;
  color: #666;
  padding-left: 5px;
}
.form-section .text-input {
  width: 100%;
}
.form-section .disclaimer {
  font-size: 13px;
  margin-top: 10px;
  color: #999;
}
.league-warning-message {
  background: #ffd900;
  color: #9e6d0b;
  padding: 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.league-tab-panel-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  width: 100%;
}
.league-players-list {
  overflow-y: auto;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.league-players-list .league-players-list-item {
  padding: 10px 10px;
  border-bottom: 1px solid #efefef;
  align-items: center;
  display: flex;
  flex-direction: row;
  min-height: 20px;
}
.league-players-list .league-players-list-item >.actions {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.league-players-list .league-players-list-item >.owner-info {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  text-align: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}
.league-players-list .league-players-list-item >.owner-info .waiver-text {
  text-align: center;
}
.league-players-list .league-players-list-item .player-info {
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  cursor: pointer;
}
.league-players-list .league-players-list-item .player-info .avatar {
  margin-left: 15px;
}
.league-players-list .league-players-list-item .player-info .player-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}
.league-players-list .league-players-list-item .player-info .player-name .meta {
  font-size: 13px;
  font-weight: bold;
  display: flex;
}
.league-players-list .league-players-list-item .player-info .player-name .meta .injury-status {
  font-weight: normal;
  margin-left: 5px;
  font-size: 11px;
  color: #f00;
  align-self: center;
}
.league-players-list .league-players-list-item .player-info .player-name .meta .injury-status.probable {
  color: #ffa500;
}
.league-players-list .league-players-list-item .player-info .player-name .team {
  font-size: 11px;
  font-weight: normal;
  align-self: center;
  margin-left: 5px;
}
.league-players-panel-wrapper {
  display: flex;
  height: 84vh;
  z-index: 99999;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  width: 80vw !important;
  max-width: 1370px !important;
}
.league-players-panel-wrapper .league-players-side-panel {
  -webkit-flex: 0 0 300px;
  -ms-flex: 0 0 300px;
  flex: 0 0 300px;
  height: 70vh;
  border-right: 1px solid #efefef;
  overflow: hidden;
  box-sizing: border-box;
}
.league-players-panel {
  max-width: 1270px !important;
  flex-grow: 1;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 15px 0px 0px 0px;
  box-sizing: border-box;
}
.league-players-panel .waiver-clear-countdown {
  margin: 0 15px 15px 15px;
}
.league-players-panel .players-search-container {
  display: flex;
  margin-bottom: 15px;
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  box-sizing: border-box;
  width: 500px;
}
.league-players-panel .league-players-panel-content {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.league-players-panel .league-players-panel-content.hidden {
  display: none;
}
.league-players-panel .league-players-search-results-container {
  border-top: 1px solid #efefef;
  padding-top: 20px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.league-players-panel .league-players-search-results-container .section-title {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color: #b6b6b6;
  border-bottom: 1px solid #efefef;
  padding-bottom: 8px;
  padding-left: 18px;
}
.league-players-panel .body-container {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.league-players-panel .header-tab-container {
  padding-bottom: 15px;
  display: flex;
  align-items: center;
}
.league-players-panel .positions-filter {
  display: flex;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  justify-content: center;
}
.league-players-panel .watch-list-button {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  margin-right: 15px;
}
.league-players-panel .watch-list-button .watch-list-button-wrapper {
  line-height: 30px;
  padding: 3px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: inline-block;
}
.league-players-panel .watch-list-button i {
  margin-right: 5px;
}
.league-players-panel .watch-list-button.selected .watch-list-button-wrapper {
  background: #555;
  color: #fff;
}
.league-players-panel .player-search {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  position: relative;
  margin-right: 25px;
  margin-left: 15px;
}
.league-players-panel .player-search input {
  width: 100%;
  border: none;
  background: #efefef;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  outline: none;
  font-size: 13px;
  padding: 0 10px;
}
.league-players-panel .player-search i {
  position: absolute;
  top: 6px;
  right: -6px;
  color: #ccc;
}
.league-players-panel .col-sml {
  width: 50px;
  height: 29px;
  padding: 0 !important;
  box-sizing: border-box;
}
.league-players-panel .col-sml .value {
  height: 29px;
  line-height: 29px;
}
.league-players-panel .col-sml .value .stat-cell {
  height: 29px;
  line-height: 29px;
  padding-left: 10px;
  border-right: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
}
.league-players-panel .col-lrg {
  width: 80px;
}
.league-players-panel .col-border-right {
  border-right: 1px solid #efefef;
}
.league-players-panel .col-border-bottom {
  border-bottom: 1px solid #efefef;
}
.league-players-panel .adp,
.league-players-panel .bye,
.league-players-panel .proj-pts,
.league-players-panel .proj-avg {
  padding: 0px 0px 0px 10px !important;
}
.league-players-panel .owner {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 29px;
  box-sizing: border-box;
}
.league-players-panel .header {
  font-size: 13px;
  font-weight: bold;
}
.league-players-panel .header .col-sml {
  padding: 8px 0px 8px 10px !important;
}
.league-players-panel .header .row {
  display: flex;
}
.league-players-panel .header .row >div {
  padding: 8px 0px 8px 10px;
}
.league-players-panel .header .row >.rank {
  width: 40px;
  padding-right: 5px;
}
.league-players-panel .header .row >.position {
  width: 40px;
}
.league-players-panel .header .row >.name {
  width: 205px;
  padding-left: 10px;
}
.league-players-panel .header .row >.pts-and-proj {
  width: 90px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.league-players-panel .header .row >.rush-header,
.league-players-panel .header .row >.rec-header,
.league-players-panel .header .row >.pass-header {
  width: 140px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.league-players-panel .header .col-border-right {
  border-right: 1px solid #fff;
}
.league-players-panel .hide-owned {
  position: relative;
  top: -3px;
  margin-left: 15px;
}
.league-players-panel .hide-owned .name {
  font-size: 13px;
  font-weight: normal;
  margin-top: 3px;
}
.league-players-panel .player-loader-item {
  display: flex;
  height: 29px;
  padding: 5px 13px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.league-players-panel .player-loader-item .loader-bar {
  flex-grow: 1;
  height: 11px;
  border-radius: 9px;
  background: #efefef;
}
.league-players-panel .player-rank-item {
  display: flex;
  font-size: 13px;
  cursor: pointer;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
}
.league-players-panel .player-rank-item .menu {
  width: 97px;
  height: 29px;
  position: absolute;
  left: -110px;
  background: #75c525;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  line-height: 29px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.league-players-panel .player-rank-item .menu.drafting {
  left: 0 !important;
}
.league-players-panel .player-rank-item .menu.wait {
  background: #555;
}
.league-players-panel .player-rank-item .menu .spinner {
  width: 14px !important;
  height: 14px !important;
  position: relative;
  top: 3px;
}
.league-players-panel .player-rank-item .avatar-player {
  margin-right: 10px;
}
.league-players-panel .player-rank-item:hover {
  background: #efefef !important;
}
.league-players-panel .player-rank-item:hover .menu {
  left: 0;
}
.league-players-panel .player-rank-item.show-watchlist-action:hover .name {
  padding-left: 35px !important;
}
.league-players-panel .player-rank-item.show-watchlist-action:hover .watchlist-action {
  transform: scale(1) !important;
}
.league-players-panel .player-rank-item.watching {
  background: #ffffc7 !important;
}
.league-players-panel .player-rank-item.watching .name {
  padding-left: 35px !important;
}
.league-players-panel .player-rank-item.watching .watchlist-action {
  transform: scale(1) !important;
}
.league-players-panel .player-rank-item.selected {
  background: #efefef;
}
.league-players-panel .player-rank-item.selected .menu {
  left: 0;
}
.league-players-panel .player-rank-item >div {
  padding: 8px 0px 8px 10px;
}
.league-players-panel .player-rank-item >.rank {
  width: 40px;
  padding-right: 5px;
}
.league-players-panel .player-rank-item >.rank i {
  padding-right: 6px;
  font-size: 14px;
}
.league-players-panel .player-rank-item >.rank .fa-plus {
  color: #00ceb8;
}
.league-players-panel .player-rank-item >.position {
  width: 40px;
  text-align: left;
}
.league-players-panel .player-rank-item >.name {
  width: 216px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}
.league-players-panel .player-rank-item >.name .name-wrapper {
  text-align: left;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
}
.league-players-panel .player-rank-item >.name .injury-status {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 10px;
  color: #f00;
}
.league-players-panel .player-rank-item >.name .injury-status.probable {
  color: #ffa500;
}
.league-players-panel .player-rank-item >.name .team {
  font-size: 11px;
  color: #777;
  padding-left: 10px;
}
.league-players-panel .player-rank-item >.name .watchlist-action {
  padding-right: 5px;
  transform: scale(0);
  transition: all 0.2s ease;
  position: absolute;
  left: 3px;
  padding: 10px;
}
.league-players-panel .player-rank-item >.name .watchlist-action .fa-plus {
  font-size: 6px;
}
.league-players-panel .header-row {
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  cursor: pointer;
}
.league-players-panel .header-row:hover {
  font-weight: bold;
}
.league-players-panel .header-row.sorting {
  background: #efefef;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.league-players-panel .header-row .header-cell {
  font-size: 10px;
  box-sizing: border-box;
}
.league-players-panel .data-column {
  padding: 4px;
  box-sizing: border-box;
  font-size: 12px;
  text-align: center;
  align-items: center;
}
.league-players-panel .player-grid-cell {
  display: flex;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #efefef;
}
.league-players-panel .player-grid-cell.sorting {
  background: #efefef;
}
.league-players-panel .player-grid-cell .player-name {
  cursor: pointer;
}
.league-players-panel .player-grid-cell .stat {
  padding: 7px;
  border-radius: 5px;
  width: 45px;
  box-sizing: border-box;
}
.league-players-panel .player-grid-cell >.actions {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.league-players-panel .player-grid-cell >.owner {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  text-align: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.league-players-panel .player-grid-cell >.owner .waiver-text {
  text-align: center;
}
.league-players-panel .player-grid-cell .player-info {
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  cursor: pointer;
}
.league-players-panel .player-grid-cell .player-info .avatar {
  margin-left: 15px;
}
.league-players-panel .player-grid-cell .player-info .player-name {
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}
.league-players-panel .player-grid-cell .player-info .player-name .meta {
  font-size: 13px;
  font-weight: bold;
  display: flex;
}
.league-players-panel .player-grid-cell .player-info .player-name .meta .injury-status {
  font-weight: normal;
  margin-left: 5px;
  font-size: 11px;
  color: #f00;
  align-self: center;
}
.league-players-panel .player-grid-cell .player-info .player-name .meta .injury-status.probable {
  color: #ffa500;
}
.league-players-panel .player-grid-cell .player-info .player-name .team {
  font-size: 11px;
  font-weight: normal;
  align-self: center;
  margin-left: 5px;
}
.league-players-panel .player-grid-cell .projection-section {
  display: flex;
  margin-left: 300px;
}
.league-players-panel .player-grid-cell .projection-section .projection-col {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}
.league-players-panel .actions i {
  cursor: pointer;
}
.league-players-panel .actions .fa-plus {
  color: #00ceb8;
}
.league-players-panel .actions .fa-plus.waiver {
  color: #ffa500;
}
.league-players-panel .actions .fa-exchange {
  color: #58a7ff;
}
.league-players-panel .stat-filter {
  font-size: 12px;
  padding: 10px 15px 0;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  margin-bottom: 20px;
}
.league-players-panel .stat-filter .position-filter {
  display: flex;
  padding: 0 20px;
}
.league-players-panel .stat-filter .position-filter .filter-item {
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.league-players-panel .stat-filter .position-filter .filter-item.selected {
  background: #555;
  color: #fff;
}
.league-players-panel .stat-filter .position-filter .filter-item .name {
  text-align: center;
  font-weight: bold;
}
.league-players-panel .stat-filter .position-filter .filter-item .slots {
  text-align: center;
  opacity: 0.75;
}
.league-players-panel .stat-filter .subheader {
  font-weight: bold;
  padding-right: 7px;
  display: flex;
  padding-bottom: 15px;
}
.league-players-panel .stat-filter .stat-filter-items {
  display: flex;
  width: 100%;
  overflow: auto;
  align-items: center;
  margin-top: 9px;
}
.league-players-panel .stat-filter .stat-filter-items.no-top-margin {
  margin-top: 0px;
}
.league-players-panel .stat-filter .stat-filter-items .copy {
  margin-right: 10px;
  font-weight: bold;
}
.league-players-panel .stat-filter .stat-filter-items .copy.extra {
  margin-left: 40px;
}
.league-players-panel .stat-filter .stat-filter-items .select-filter-item {
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.league-players-panel .stat-filter .stat-filter-items .select-filter-item.selected {
  background: rgba(58,70,91,0.25);
  color: #fff;
}
.league-players-panel .stat-filter .stat-filter-items .stat-filter-item {
  font-size: 10px;
  margin: 10px 10px 10px 0;
}
.league-players-panel .stat-filter .stat-filter-items .stat-filter-item .label {
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 54px;
}
.league-players-panel .stat-filter .stat-filter-items .stat-filter-item input[type=number] {
  width: 50px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 0 7px;
  box-sizing: border-box;
  outline: none;
}
.league-players-panel .stat-filter .stat-filter-items ::-webkit-scrollbar {
  width: 0px; /* remove scrollbar space */
  background: transparent; /* optional: just make scrollbar invisible */
}
.league-players-side-panel .tabs {
  display: flex;
  border-bottom: 1px solid #efefef;
}
.league-players-side-panel .tabs .tab-item {
  cursor: pointer;
  flex-grow: 1;
  font-size: 13px;
  border-right: 1px solid #efefef;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.league-players-side-panel .tabs .tab-item:hover {
  font-weight: bold;
}
.league-players-side-panel .tabs .selected {
  border-bottom: 5px solid #555;
}
.league-players-side-panel .content-container {
  height: calc(70vh - 40px);
  overflow: auto;
}
.league-players-side-panel .trending-list >.filters >.filter-item {
  color: #e0e0e0;
}
.league-players-side-panel .trending-list >.filters >.filter-item.selected {
  color: #777;
}
.league-players-side-panel .trending-list >.players-list >.trending-item {
  font-size: 13px;
  color: #555;
}
.league-players-side-panel .trending-list >.players-list >.trending-item >.player-meta .position {
  font-size: 11px;
  font-weight: normal;
  color: #555;
}
.league-players-side-panel .trending-list >.players-list >.trending-item >.score {
  font-size: 12px;
}
.league-players-side-panel .game-center-leaderboard >.position-filters >.filter-item {
  color: #e0e0e0;
}
.league-players-side-panel .game-center-leaderboard >.position-filters >.filter-item.selected {
  color: #777;
}
.league-players-side-panel .game-center-leaderboard >.players-list >.player-item {
  font-size: 13px;
  color: #555;
}
.league-players-side-panel .game-center-leaderboard >.players-list >.player-item >.player-meta .position {
  font-size: 11px;
  font-weight: normal;
  color: #555;
}
.league-players-side-panel .game-center-leaderboard >.players-list >.player-item >.player-meta .player-stat-text {
  color: #777;
}
.league-players-side-panel .game-center-leaderboard >.players-list >.player-item >.score {
  font-size: 12px;
}
.playoff-modal {
  height: 500px;
  width: 800px;
  background-color: #1c212d;
  border-radius: 24px;
  overflow: auto;
  padding: 32px;
  color: #fff;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.playoff-modal .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.playoff-modal .close-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  background-color: rgba(58,70,91,0.5);
  border-radius: 40px;
  cursor: pointer;
}
.playoff-modal .bracket-round {
  font-family: 'Inter', sans-serif;
}
.playoff-modal .title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 28px;
  font-weight: medium;
}
.league-playoff-bracket {
  padding-top: 10px;
}
.league-playoff-bracket .week-selector-row {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 16px;
}
.league-playoff-bracket .bracket-rounds-container {
  display: flex;
  flex-direction: row;
}
.league-playoff-bracket.loader {
  padding: 10px;
  text-align: center;
}
.league-playoff-bracket .loser-bracket-container .league-standings-header {
  margin-bottom: 10px;
}
.league-playoff-bracket .loser-bracket-container .league-standings-header i {
  cursor: pointer;
}
.league-playoff-bracket .loser-bracket-container .league-standings-header .toilet-bowl-desc {
  font-size: 12px;
  line-height: 1.35;
  padding: 10px;
  width: 200px;
  background: #444;
  color: #eee;
  letter-spacing: 0.2px;
  position: absolute;
  top: 20px;
  left: -200px;
}
.league-playoff-bracket .league-standings-header {
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
}
.league-playoff-bracket .label-standings {
  flex-grow: 1;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  color: #a3bbd3;
}
.custom-seeding-warning {
  font-size: 11px;
  padding: 5px 15px;
  text-align: center;
  color: #aaa;
}
.league-research-panel {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
}
.league-research-panel .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.league-research-panel .header .tabs {
  display: flex;
  flex-direction: row;
  padding: 16px 0;
}
.league-research-panel .header .tabs .tab-item {
  font-size: 13px;
  font-weight: 700;
  padding: 0 6px;
  color: #e0e0e0;
  cursor: pointer;
  text-transform: uppercase;
}
.league-research-panel .header .tabs .tab-item.selected {
  color: #777;
}
.league-research-panel .header .button .dark {
  background: #444;
}
.league-research-panel .spinner-container {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 80px 0;
}
.league-research-panel .league-research-section .league-research-header {
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
  display: flex;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  color: #555;
}
.league-research-panel .trending-panel .league-research-section .trending-list {
  width: 100%;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list {
  width: 100%;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list >.trending-item {
  color: #555;
  width: 100%;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
  align-items: center;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list >.trending-item >.player-meta >.player-info {
  flex-direction: row;
  display: flex;
  align-items: center;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list >.trending-item >.player-meta >.player-info .player-details {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list >.trending-item >.player-meta >.player-info .position {
  font-size: 11px;
  font-weight: 400;
  color: #555;
  margin-top: 0;
  margin-left: 8px;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list >.trending-item >.player-meta >.player-info .owner-text {
  position: initial;
  margin-left: 8px;
  margin-top: 4px;
}
.league-research-panel .trending-panel .league-research-section .trending-list >.players-list >.trending-item .score {
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
}
.league-research-panel .leaders-panel .game-center-leaderboard .position-filters {
  padding: 10px 15px;
}
.league-research-panel .leaders-panel .game-center-leaderboard .position-filters .filter-item {
  color: #e0e0e0;
}
.league-research-panel .leaders-panel .game-center-leaderboard .position-filters .filter-item.selected {
  color: #777;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list {
  width: 100%;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  align-items: center;
  border-bottom: 1px solid #efefef;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item .rank {
  color: #555;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item .avatar-player {
  margin-right: 8px;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item .player-meta .owner-text {
  position: initial;
  margin-bottom: 5px;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item .player-meta .name {
  color: #555;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item .player-meta .player-stat-text {
  color: #555;
}
.league-research-panel .leaders-panel .game-center-leaderboard .players-list .player-item .score {
  color: #555;
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
}
.league-settings-member-row {
  display: flex;
  padding: 10px 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #18202f;
}
.league-settings-member-row .roster-num {
  color: #fff;
  padding-right: 20px;
  font-size: 13px;
}
.league-settings-member-row .roster-name {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}
.league-settings-member-row .roster-name .user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-settings-member-row .roster-name .user-item .user-name {
  margin-left: 10px;
}
.league-settings-member-row .roster-name .unassigned-roster {
  font-weight: normal;
  font-size: 13px;
  color: #fff;
}
.league-settings-member-row .player-list {
  display: flex;
  flex-direction: row;
  display: inline-block;
  padding-right: 50px;
  padding-top: 6px;
  color: #a3bbd3;
}
.league-settings-member-row .player-list .player-list-label {
  font-size: 12px;
  display: inline-block;
  padding-right: 5px;
}
.league-settings-member-row .player-list .player-list-item {
  font-size: 12px;
  font-weight: normal;
  display: inline-block;
  padding-right: 5px;
}
.league-settings-member-row .roster-action .action-text {
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
}
.league-settings-member-row .roster-action .action-text i {
  margin-right: 3px;
}
.league-settings-member-row .roster-action .action-text.remove:hover {
  color: #ff2a6d;
}
.league-settings-member-row .roster-action .action-text.add:hover {
  color: #00ceb8;
}
.league-settings-member-row .player-list-item {
  border: none;
}
.league-settings-member-row .player-list-item:hover {
  border: none;
  box-shadow: none;
  background: none;
}
.league-settings-panel {
  height: 650px;
  width: 850px;
  box-shadow: 1px 1px 15px #18202f;
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: #2d3649;
  border-radius: 24px;
  color: #fff;
  overflow: hidden;
}
.league-settings-panel .setting-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #181c28;
  padding: 12px 24px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
  border-radius: 14px;
  cursor: pointer;
}
.league-settings-panel .setting-button.disabled {
  background-color: #9c9ea3;
  color: #fff !important;
}
.league-settings-panel .gradient-scroll {
  position: absolute;
  height: 150px;
  width: 590px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(to bottom, transparent, #2d3649);
  z-index: 99;
  pointer-events: none;
}
.league-settings-panel .close-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 20px;
  cursor: pointer;
}
.league-settings-panel .close-container:hover {
  background-color: rgba(58,70,91,0.5);
}
.league-settings-panel .label {
  font-size: 12px;
  color: #b9c4d4;
  letter-spacing: 1px;
  font-weight: 600;
}
.league-settings-panel .description {
  margin-top: 5px;
  font-size: 12px;
  color: #a3bbd3;
  line-height: 14px;
}
.league-settings-panel .channel-settings {
  min-width: 360px !important;
}
.league-settings-panel .channel-settings-body {
  padding: 0 25px 150px 25px;
}
.league-settings-panel .channel-settings-body .roster-position-selector {
  margin-top: 25px;
}
.league-settings-panel .channel-settings-body .validation {
  margin-top: 25px;
}
.league-settings-panel .save-changes-confirmation {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,0.6);
  color: #fff;
  z-index: 9;
  font-size: 15px;
  font-weight: bold;
}
.league-settings-panel .save-changes-confirmation >.confirmation-buttons {
  display: flex;
  margin-top: 15px;
}
.league-settings-panel .save-changes-confirmation >.confirmation-buttons .button {
  margin-right: 10px;
}
.league-settings-panel .settings-section .grouping-header {
  font-size: 11px;
  color: #a3bbd3;
  margin-top: 30px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding-bottom: 10px;
}
.league-settings-panel .settings-section .settings-header {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: #ccc;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
  display: flex;
}
.league-settings-panel .settings-section .settings-header .right {
  flex-grow: 1;
  text-align: right;
  font-weight: normal;
  color: #888;
  cursor: pointer;
  text-transform: none;
}
.league-settings-panel .settings-section .settings-header .right:hover {
  color: #a3bbd3;
}
.league-settings-panel .settings-section .settings-header .right i {
  margin-right: 3px;
}
.league-settings-panel .settings-section .settings-row {
  display: flex;
  color: #a3bbd3;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  align-items: center;
}
.league-settings-panel .settings-section .settings-row.edit {
  cursor: pointer;
}
.league-settings-panel .settings-section .settings-row input[type=number] {
  outline: none;
  width: 30px;
  margin: 0 5px;
  text-align: right;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #ddd;
}
.league-settings-panel .settings-section .settings-row input[type=number]:focus {
  border-color: #58a7ff;
}
.league-settings-panel .settings-section .settings-row.disabled .name,
.league-settings-panel .settings-section .settings-row.disabled .value {
  color: #bbb;
}
.league-settings-panel .settings-section .settings-row.highlight {
  background-color: #ffffc7;
}
.league-settings-panel .settings-section .settings-row .name {
  flex-grow: 1;
  font-weight: bold;
  margin-right: 10px;
  font-size: 13px;
}
.league-settings-panel .settings-section .settings-row .value {
  font-size: 12px;
}
.league-settings-panel .settings-section .settings-row .plus {
  color: #518613;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.league-settings-panel .settings-section .settings-row .minus {
  color: #e04040;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.league-settings-panel .scoring-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 24px;
}
.league-settings-panel .scoring-filters .horizontal-pill-selector {
  min-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  box-sizing: border-box;
  white-space: nowrap;
  height: 32px;
}
.league-settings-panel .scoring-filters .horizontal-pill-selector .option-item {
  width: 140px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.league-settings-panel .fast-five-title {
  font-size: 12px;
  font-weight: medium;
  font-family: 'Poppins';
  color: #a3bbd3;
}
.league-settings-panel .fast-five-desc {
  font-size: 16px;
  font-family: 'Inter';
  color: #fff;
}
.league-settings-panel .pos-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #202635;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  box-sizing: border-box;
}
.league-settings-panel .value-click-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  width: 104px;
  background-color: #4a5870;
  border-radius: 32px;
  justify-content: space-between;
  padding: 0 4px;
  user-select: none;
}
.league-settings-panel .value-click-container .add {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3a465b;
  color: #00baff;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  cursor: pointer;
}
.league-settings-panel .value-click-container .add:hover {
  background-color: #00baff;
  color: #022047;
}
.league-settings-panel .value-click-container .text {
  font-size: 14px;
  font-family: 'Poppins';
  color: #fff;
}
.league-settings-panel .value-click-container .sub {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3a465b;
  color: #d8e2ed;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  cursor: pointer;
}
.league-settings-panel .value-click-container .sub:hover {
  background-color: #d8e2ed;
  color: #022047;
}
.league-settings-panel .fast-five-subtitle {
  font-size: 12px;
  color: #d8e2ed;
  font-family: 'Inter';
  letter-spacing: -0.25px;
}
.league-settings-panel .row {
  display: flex;
  align-items: center;
}
.league-slot-position-square {
  display: flex;
  flex-wrap: wrap;
  border-radius: 8px;
  width: 42px;
  height: 32px;
  color: #022047;
  overflow: hidden;
  margin-right: 8px;
}
.league-slot-position-square div {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  overflow: hidden;
}
.league-slot-position-square .disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ccc;
}
.league-slot-position-square.super_flex,
.league-slot-position-square.super {
  display: block;
}
.league-slot-position-square.super_flex .row,
.league-slot-position-square.super .row {
  margin: 0;
  padding: 0;
}
.league-slot-position-square.super_flex .row div,
.league-slot-position-square.super .row div {
  height: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 10px;
}
.league-slot-position-square.super_flex div:first-child,
.league-slot-position-square.super div:first-child {
  border-radius: 0px;
  border-top-left-radius: 5px;
}
.league-slot-position-square.super_flex div:nth-child(2),
.league-slot-position-square.super div:nth-child(2) {
  border-radius: 0px;
  border-top-right-radius: 5px;
}
.league-slot-position-square.super_flex >div:nth-child(2) div:first-child,
.league-slot-position-square.super >div:nth-child(2) div:first-child {
  border-radius: 0px;
  border-bottom-left-radius: 5px;
}
.league-slot-position-square.super_flex >div:nth-child(2) div:last-child,
.league-slot-position-square.super >div:nth-child(2) div:last-child {
  border-radius: 0px;
  border-bottom-right-radius: 5px;
}
.league-slot-position-square .qb {
  background: #ff2a6d;
}
.league-slot-position-square .qb.disabled {
  background: #2c3749;
  color: #ff2a6d;
}
.league-slot-position-square .rb {
  background: #00ceb8;
}
.league-slot-position-square .rb.disabled {
  background: #2c3749;
  color: #00ceb8;
}
.league-slot-position-square .wr {
  background: #58a7ff;
}
.league-slot-position-square .wr.disabled {
  background: #2c3749;
  color: #58a7ff;
}
.league-slot-position-square .te {
  background: #ffae58;
}
.league-slot-position-square .te.disabled {
  background: #2c3749;
  color: #ffae58;
}
.league-slot-position-square .k {
  background: #bd66ff;
}
.league-slot-position-square .k.disabled {
  background: #2c3749;
  color: #bd66ff;
}
.league-slot-position-square .def {
  background: #7988a1;
  color: #fff;
}
.league-slot-position-square .def.disabled {
  background: #2c3749;
  color: #7988a1;
}
.league-slot-position-square .dl {
  background: #ff795a;
}
.league-slot-position-square .dl.disabled {
  background: #2c3749;
  color: #ff795a;
}
.league-slot-position-square .lb {
  background: #6d7df5;
}
.league-slot-position-square .lb.disabled {
  background: #2c3749;
  color: #6d7df5;
}
.league-slot-position-square .db {
  background: #ff7cb6;
}
.league-slot-position-square .db.disabled {
  background: #2c3749;
  color: #ff7cb6;
}
.league-slot-position-square .bn {
  background: #a3bbd3;
}
.league-slot-position-square .bn.disabled {
  background: #2c3749;
  color: #a3bbd3;
}
.league-slot-position-square .idp_flex {
  background: #a3bbd3;
}
.league-slot-position-square .idp_flex.disabled {
  background: #2c3749;
  color: #a3bbd3;
}
.league-slot-position-square .ir {
  background: #000;
  color: #fff;
}
.league-slot-position-square .ir.disabled {
  background: #2c3749;
  color: #fff;
}
.league-slot-position-square .tx {
  background: #000;
  color: #fff;
}
.league-slot-position-square .tx.disabled {
  background: #2c3749;
  color: #fff;
}
.league-slot-position-square .top {
  background: #ff7cb6;
}
.league-slot-position-square .jun {
  background: #00ceb8;
}
.league-slot-position-square .mid {
  background: #c898f8;
}
.league-slot-position-square .adc {
  background: #ffae59;
}
.league-slot-position-square .sup {
  background: #79bdff;
}
.league-slot-position-square .pg {
  background: #ff2b6d;
}
.league-slot-position-square .sg {
  background: #ff5c00;
}
.league-slot-position-square .sf {
  background: #00ceb8;
}
.league-slot-position-square .pf {
  background: #00baff;
}
.league-slot-position-square .c {
  background: #bd66ff;
}
.league-slot-position-square .util {
  background: #9e3a01;
}
.league-slot-position-square .g {
  background: #58a7ff;
}
.league-slot-position-square .f {
  background: #6d7df5;
}
.league-standings-panel {
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}
.league-standings-panel .league-activity {
  padding-bottom: 45px;
}
.league-standings {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  flex-direction: column;
}
.league-standings .horizontal-padding {
  padding: 0 12px;
}
.league-standings .trophies-wrap {
  display: flex;
  flex-direction: row;
  height: 200px;
}
.league-standings .section {
  margin-top: 20px;
}
.league-standings .league-standings-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  align-items: center;
  font-size: 12px;
  color: #fff;
  padding: 7px 0 7px 5px;
  cursor: pointer;
  box-sizing: border-box;
}
.league-standings .league-standings-row.me {
  background: #18202e;
  border-radius: 5px;
}
.league-standings .league-standings-header {
  padding: 0 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #b6b6b6;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.league-standings .league-standings-header .right {
  font-weight: 700;
  color: #2196f3;
  cursor: pointer;
  font-size: 11px;
}
.league-standings .label-standings {
  flex-grow: 1;
}
.league-standings .label-points-for,
.league-standings .label-points-against,
.league-standings .label-waiver,
.league-standings .label-standings {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
}
.league-standings .points-for,
.league-standings .points-against,
.league-standings .label-points-for,
.league-standings .label-points-against {
  font-size: 13px;
  -webkit-flex: 0 0 70px;
  -ms-flex: 0 0 70px;
  flex: 0 0 70px;
}
@media (max-width: 1060px) {
  .league-standings .points-for,
  .league-standings .points-against,
  .league-standings .label-points-for,
  .league-standings .label-points-against {
    font-size: 12px;
    -webkit-flex: 0 0 70px;
    -ms-flex: 0 0 70px;
    flex: 0 0 70px;
  }
}
.league-standings .waiver,
.league-standings .label-waiver {
  -webkit-flex: 0 0 53px;
  -ms-flex: 0 0 53px;
  flex: 0 0 53px;
}
.league-standings .rank {
  font-weight: bold;
  color: #fff;
  -webkit-flex: 0 0 20px;
  -ms-flex: 0 0 20px;
  flex: 0 0 20px;
}
.league-standings .team-container {
  width: 205px;
}
.league-standings .unowned-team {
  width: 174px;
}
.league-standings .unowned-team .team-name {
  font-size: 12px;
  font-weight: bold;
}
.league-standings .unowned-team .description {
  color: #ccc;
  margin-top: 3px;
  font-size: 11px;
}
.league-transaction-item-waiver-container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  font-family: 'Poppins', sans-serif;
  border-bottom: 1px solid rgba(163,187,211,0.05);
}
.league-transaction-item-waiver-container .clear {
  position: absolute;
  top: 24px;
  right: 4px;
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  padding: 4px 4px 4px 8px;
  background-color: #a3bbd3;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.league-transaction-item-waiver-container .waiver-clear .clear-time {
  font-weight: normal;
}
.league-transaction-item-waiver-container .waiver-clear .bid {
  font-weight: bold;
}
.league-transaction-item-waiver-container .fa-plus {
  color: #00ceb8;
  font-size: 14px;
}
.league-transaction-item-waiver-container .fa-minus {
  color: #ff2a6d;
  font-size: 14px;
}
.league-transaction-item-waiver-container .status-text {
  font-size: 10px;
  color: #022047;
  padding: 2px 6px;
}
.league-transaction-item-waiver-container .trade-status-text {
  font-size: 10px;
  color: #022047;
  padding: 2px 6px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver {
  position: relative;
  font-size: 13px;
  display: flex;
  flex-direction: row;
  padding-top: 16px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver.column {
  flex-direction: column;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .meta .team-owner-with-description {
  padding-top: 8px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .meta .team-owner-with-description .meta .name {
  font-size: 16px;
  font-family: 'Inter', sans-serif;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .transactions {
  display: flex;
  flex-direction: column;
  margin-left: 32px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .action-btns {
  color: #58a7ff;
  cursor: pointer;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .action-btns:hover {
  opacity: 0.7;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .action-btns i {
  padding-right: 5px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .action-label {
  margin-right: 10px;
  text-transform: uppercase;
  width: 15px;
  font-size: 10px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .add-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  margin-top: 8px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .name {
  overflow: hidden;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .name .action-label {
  color: #00ceb8;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .drop-player {
  color: #fff;
  display: flex;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .drop-player .action-label {
  color: #ff2a6d;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver .position {
  color: #a3bbd3;
  font-weight: normal;
  font-size: 10px;
  margin-left: 4px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver.margin-bottom {
  margin-bottom: 0px;
}
.league-transaction-item-waiver-container .league-transaction-item-waiver:last-child {
  margin-bottom: 0px;
}
.league-transactions-overview-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  width: 800px;
  border-radius: 24px;
  overflow: hidden;
  background: #1c212d;
}
.league-transactions-overview-modal .close-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  background-color: rgba(58,70,91,0.5);
  border-radius: 40px;
  cursor: pointer;
}
.league-transactions-overview-modal .channel-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.league-transactions-overview-modal .channel-settings-body {
  display: flex;
}
.league-transactions-overview-modal .channel-settings-body .rosters-list {
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  height: 60vh;
  overflow: auto;
  border-right: 1px solid rgba(163,187,211,0.05);
  padding: 16px;
}
.league-transactions-overview-modal .channel-settings-body .rosters-list .selected-indicator {
  position: absolute;
  left: 0;
  height: 32px;
  width: 6px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #00ceb8;
}
.league-transactions-overview-modal .channel-settings-body .rosters-list .selected-indicator.space {
  margin-top: 16px;
}
.league-transactions-overview-modal .channel-settings-body .rosters-list .roster-nav-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 16px;
  border-radius: 16px;
  cursor: pointer;
  height: 72px;
  box-sizing: border-box;
}
.league-transactions-overview-modal .channel-settings-body .rosters-list .roster-nav-item:hover {
  background: rgba(58,70,91,0.1);
}
.league-transactions-overview-modal .channel-settings-body .rosters-list .roster-nav-item.selected {
  background: rgba(58,70,91,0.25);
}
.league-transactions-overview-modal .channel-settings-body .rosters-list .all {
  font-weight: bold;
  font-size: 14px;
  padding: 15px;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel {
  flex-grow: 1;
  height: 60vh;
  overflow: auto;
  box-sizing: border-box;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .filters {
  display: flex;
  align-items: center;
  padding: 16px;
  padding-bottom: 8px;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .filters .select-filter-item {
  font-size: 13px;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .filters .select-filter-item.selected {
  background: rgba(58,70,91,0.25);
  color: #fff;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .transaction-item {
  padding: 16px;
  padding-top: 0px;
  border-top: 1px solid rgba(163,187,211,0.05);
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .transaction-item.first {
  border-top: none;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .league-transaction-item-waiver {
  padding-top: 24px;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .league-transaction-item-waiver .clear {
  top: 4px;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .league-transaction-item-waiver .drop-player,
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .league-transaction-item-waiver .add-player {
  color: #fff;
}
.league-transactions-overview-modal .channel-settings-body .transactions-panel .transactions-list .empty {
  padding-left: 25px;
  font-size: 13px;
  color: #ccc;
}
.league-waiver-claims-panel {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  max-width: 70vw;
  height: 70vh;
  width: 450px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #283245;
}
.league-waiver-claims-panel .league-waiver-claims-panel-header {
  display: flex;
  margin: 0 20px;
  padding: 10px 0;
  align-items: center;
}
.league-waiver-claims-panel .league-waiver-claims-panel-header .meta {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 10px;
}
.league-waiver-claims-panel .league-waiver-claims-panel-header .meta .name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px;
}
.league-waiver-claims-panel .league-waiver-claims-panel-header .meta .position {
  font-size: 11px;
  color: #999;
}
.league-waiver-claims-panel .league-waiver-claims-panel-header .close-icon {
  height: 25px;
  width: 25px;
  cursor: pointer;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body {
  padding: 18px 10px;
  overflow-y: auto;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  padding: 5px 15px 5px 5px;
  border-radius: 5px;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row .avatar-wrap {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  border: 1px solid #fafafa;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row .username {
  font-weight: bold;
  font-size: 13px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  color: #fff;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row .username .invalid {
  font-size: 11px;
  color: #a3bbd3;
  margin-left: 8px;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row .bid {
  font-size: 13px;
  color: #a3bbd3;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row.success {
  background: #18202f;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .claim-row.success .bid {
  font-weight: bold;
}
.league-waiver-claims-panel .league-waiver-claims-panel-body .notes {
  font-size: 12px;
  color: #fff;
  margin-left: 40px;
}
.fast-five-player-indicator {
  position: absolute;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
  user-select: none;
}
.fast-five-player-indicator .row {
  display: flex;
  align-items: center;
}
.fast-five-player-indicator .content-row {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  flex-direction: row;
  z-index: 10;
  align-items: center;
  padding: 0 4px;
}
.fast-five-player-indicator .content-row.flipped {
  flex-direction: row-reverse;
}
.fast-five-player-indicator .content-row .vertical {
  font-size: 6px;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Poppins';
}
.fast-five-player-indicator .content-row .vertical.flipped {
  writing-mode: vertical-rl;
  transform: rotate(0deg);
}
.fast-five-player-indicator .content-row .pos {
  padding-left: 10px;
  padding-right: 4px;
}
.fast-five-player-indicator .content-row .pos.flipped {
  padding-right: 10px;
  padding-left: 4px;
}
.fast-five-player-indicator .content-row .time {
  font-family: 'Poppins';
  font-weight: bold;
  font-size: 14px;
}
.fast-five-player-indicator .content-row .description {
  font-family: 'Poppins';
  font-size: 10px;
  line-height: 12px;
  color: #fff;
}
.fast-five-player-indicator .content-row .description.flipped {
  text-align: right;
}
.fast-five-player-indicator .content-row .circle {
  height: 3px;
  width: 3px;
  background-color: #eef2f7;
  border-radius: 3px;
  margin: 0 8px;
}
.fast-five-player-indicator .content-row .current {
  font-size: 9px;
  color: #eef2f7;
  line-height: 12px;
  font-family: 'Inter';
}
.fast-five-player-indicator .content-row .winner {
  font-size: 10px;
  color: #eef2f7;
  line-height: 12px;
  font-family: 'Inter';
}
.fast-five-player-indicator .content-row .score {
  font-size: 14px;
  color: #fff;
  font-family: 'Poppins';
  font-weight: bold;
}
.fast-five-promo-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  align-items: center;
  background-image: linear-gradient(to right, #635ee4, #475580);
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 20;
}
.fast-five-promo-banner .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fast-five-promo-banner .text {
  margin-left: 10px;
  font-size: 12px;
  color: #d8e2ed;
  line-height: 16px;
  font-family: 'Inter';
}
.fast-five-promo-modal {
  display: flex;
  flex-direction: column;
  height: 510px;
  width: 500px;
}
.fast-five-promo-modal .row {
  display: flex;
  align-items: center;
}
.fast-five-promo-modal .gradient {
  display: flex;
  max-height: 156px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  background-image: linear-gradient(#6e7df5, transparent);
  padding-top: 54px;
  box-sizing: border-box;
}
.fast-five-promo-modal .gradient .title {
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: medium;
  color: #fff;
  opacity: 0.8;
}
.fast-five-promo-modal .fast-five-modal-content {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  align-items: center;
}
.fast-five-promo-modal .fast-five-modal-content .pos-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item {
  display: flex;
  flex-direction: column;
  background-color: #3a465b;
  width: 68px;
  height: 100px;
  margin-right: 16px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  align-items: center;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item .pos-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item .description {
  font-size: 10px;
  line-height: 15px;
  font-family: 'Poppins';
  font-weight: medium;
  color: #fff;
  text-align: center;
  margin-top: 2px;
}
.fast-five-promo-modal .fast-five-modal-content .pos-item .arrow-down {
  width: 0;
  height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-top: 22px solid #3a465b;
  margin-top: 3px;
}
.fast-five-promo-modal .desc {
  font-size: 16px;
  color: #d8e2ed;
  line-height: 19px;
  font-family: 'Inter';
  margin-top: 42px;
  text-align: center;
}
.fast-five-promo-modal .desc-2 {
  font-size: 16px;
  color: #d8e2ed;
  line-height: 19px;
  font-family: 'Inter';
  font-weight: bold;
  text-align: center;
}
.fast-five-promo-modal .close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #022047;
  background: #00baff;
  border-radius: 48px;
  height: 48px;
  width: 180px;
  margin-top: 32px;
  font-weight: bold;
  cursor: pointer;
}
.fast-five-promo-modal .footer {
  font-size: 14px;
  color: #a3bbd3;
  line-height: 18px;
  text-align: center;
  font-family: 'Inter';
  margin-top: 16px;
}
.lol_matchup_card_container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
}
.lol_matchup_card_container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol_matchup_card_container .avatar-container {
  position: absolute;
  top: -20px;
  z-index: 10;
}
.lol_matchup_card_container .avatar-container.flip {
  right: 0px;
}
.lol_matchup_card_container .card {
  display: flex;
  -webkit-flex: 1 1 0px;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  position: relative;
  flex-direction: column;
  background-color: rgba(58,70,91,0.25);
  min-height: 70px;
  border-radius: 16px;
  margin-right: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.lol_matchup_card_container .card.flip {
  margin-left: 4px;
}
.lol_matchup_card_container .card-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  padding: 8px;
  padding-right: 12px;
  box-sizing: border-box;
}
.lol_matchup_card_container .card-container.flip {
  padding-right: 8px;
  padding-left: 12px;
  margin-left: 4px;
}
.lol_matchup_card_container .bar-percentage {
  display: flex;
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  flex-grow: 1;
  max-height: 4px;
  min-height: 4px;
  background-color: #a3bbd3;
  margin-left: 35px;
}
.lol_matchup_card_container .bar-percentage.flip {
  margin-left: 0;
  margin-right: 35px;
  flex-direction: row-reverse;
}
.lol_matchup_card_container .content-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
  box-sizing: border-box;
}
.lol_matchup_card_container .content-row.flip {
  flex-direction: row-reverse;
}
.lol_matchup_card_container .record {
  font-size: 10px;
  color: #7988a1;
  margin-left: 30px;
}
.lol_matchup_card_container .record.flip {
  margin-left: 0;
  margin-right: 30px;
}
.lol_matchup_card_container .username {
  font-size: 10px;
  color: #7988a1;
  max-width: 56px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lol_matchup_card_container .adjusted {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.lol_matchup_card_container .base-text {
  color: #7988a1;
  font-size: 10px;
}
.lol_matchup_card_container .base {
  color: #7988a1;
  font-size: 10px;
  font-weight: 400;
}
.lol_matchup_card_container .teamname {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  margin-top: 8px;
}
.lol_matchup_card_container .teamname.flip {
  text-align: right;
}
.lol-matchup-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 32px;
}
.lol-matchup-row .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #a3bbd3;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #181c28;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
.lol-matchup-list-container {
  display: flex;
  flex-direction: column;
}
.starter-list-container {
  display: flex;
  flex-direction: column;
}
.starter-list-container .position-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 8px;
  background-color: rgba(59,70,91,0.25);
}
.starter-list-container .starter-row {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 120px;
  margin-top: 16px;
  position: relative;
  justify-content: center;
  padding: 0 16px;
}
.lol-pick-ban-slider {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  max-height: 100vh;
  height: 100%;
  max-width: 704px;
  width: 100%;
  right: 0px;
  background-color: #2d3649;
  border-top-left-radius: 24px;
  z-index: 9000;
  position: absolute;
  transition: width 0.25s ease-in-out;
  flex-wrap: nowrap;
  overflow: hidden;
}
.lol-pick-ban-slider .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-pick-ban-slider .cancel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1c212d;
  cursor: pointer;
  height: 32px;
  width: 32px;
  border-radius: 24px;
}
.lol-pick-ban-slider .header-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  color: #fff;
  font-size: 24px;
}
.lol-pick-ban-slider .content {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 704px;
  height: 100%;
  flex-direction: column;
}
.lol-pick-ban-slider .content .player-name {
  color: #fff;
  size: 18px;
  font-family: 'Poppins', sans-serif;
  margin-top: 12px;
}
.lol-pick-ban-slider .info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  -webkit-flex: 0.5;
  -ms-flex: 0.5;
  flex: 0.5;
  height: 72px;
  background-color: #252d3d;
}
.lol-pick-ban-slider .info-container .username {
  color: #fff;
  font-size: 24px;
}
.lol-pick-ban-slider .info-container .pos-team {
  color: #b9c4d4;
  font-size: 14px;
  font-weight: 300;
}
.lol-pick-ban-slider .player-pos-container {
  height: 72px;
  width: 72px;
  background-color: rgba(58,70,91,0.3);
  align-items: center;
  justify-content: center;
  display: flex;
}
.play-rate-card {
  display: flex;
  flex-direction: row;
  background-color: rgba(58,70,91,0.25);
  border-radius: 16px;
  height: 66px;
  min-width: 177px;
  overflow: hidden;
  margin-right: 16px;
}
.play-rate-card .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.play-rate-card .champion-img {
  height: 66px;
  width: 58px;
  object-fit: cover;
}
.play-rate-card .text-content {
  display: flex;
  flex-direction: column;
  padding: 8px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.play-rate-card .text-content .hero-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.play-rate-card .text-content .kda {
  color: #a3bbd3;
  font-size: 9px;
}
.play-rate-card .text-content .pts {
  color: #fff;
  font-size: 10px;
}
.play-rate-card .text-content .count {
  color: #a3bbd3;
  font-size: 9px;
}
.lol-player-game-summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  margin-top: 8px;
}
.lol-player-game-summary .large-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 100px;
  font-size: 12px;
  color: #7988a1;
}
.lol-player-game-summary .med-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 60px;
  font-size: 12px;
  color: #7988a1;
}
.lol-player-game-summary .small-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 40px;
  font-size: 12px;
  color: #7988a1;
}
.lol-player-game-summary .champion-img {
  height: 24px;
  width: 24px;
  border-radius: 24px;
}
.lol-player-game-summary .main {
  color: #fff;
  font-size: 12px;
}
.lol-player-game-summary .description {
  color: #b9c4d4;
  font-size: 10px;
}
.lol-player-versus-card {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  position: relative;
  min-width: 180px;
  height: 120px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.lol-player-versus-card .spaced-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.lol-player-versus-card .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-player-versus-card .large-champ {
  height: 100%;
  width: 70%;
  object-fit: cover;
}
.lol-player-versus-card .small-champ {
  height: 100%;
  width: 30%;
  object-fit: cover;
}
.lol-player-versus-card .best {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: linear-gradient(#ff0, #ffa500);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 9px;
  font-weight: bold;
  border-bottom-right-radius: 8px;
}
.lol-player-versus-card .worst {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: linear-gradient(#dbdbdb, #bababa);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 9px;
  font-weight: bold;
  font-weight: bold;
  border-bottom-right-radius: 8px;
}
.lol-player-versus-card .gradient-container {
  display: flex;
  flex-direction: column-reverse;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, #000);
  padding: 16px;
}
.lol-player-versus-card .gradient-container .text {
  color: #a3bbd3;
  font-size: 14px;
}
.lol-score-and-projection-container-row {
  display: flex;
  position: relative;
}
.lol-score-and-projection-row {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 8px 16px;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  background-color: #2e3748;
}
.lol-score-and-projection-row.flipped {
  flex-direction: row-reverse;
}
.lol-score-and-projection-row .row {
  display: flex;
  flex-direction: row;
}
.lol-score-and-projection-row .lol-points-container {
  display: flex;
  flex-direction: column;
}
.lol-score-and-projection-row .lol-points-container .base-score {
  font-size: 10px;
  font-family: 'Inter', sans-serif;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score {
  font-size: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.blue {
  color: #00baff;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.red {
  color: #ff6086;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.blue-and-red {
  color: #fff;
}
.lol-score-and-projection-row .lol-points-container .adjusted-score.flipped {
  text-align: right;
}
.lol-score-and-projection-row .lol-kda-container {
  display: flex;
  flex-direction: column;
}
.lol-score-and-projection-row .lol-kda-container .result-text {
  font-size: 9px;
  color: #fff;
  font-family: 'Poppins';
}
.lol-score-and-projection-row .lol-kda-container .team-text {
  font-size: 9px;
  color: #b9c4d4;
  font-family: 'Poppins';
  margin-left: 4px;
}
.lol-score-and-projection-row .lol-kda-container .kda-text {
  margin-top: 4px;
  font-size: 10px;
  color: #b9c4d4;
  font-family: 'Poppins';
}
.lol-score-and-projection-row .champion-image-container {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: 28px;
  background: transparent;
}
.lol-score-and-projection-row .champion-image-container.blue {
  background: #00baff;
  color: #00baff;
}
.lol-score-and-projection-row .champion-image-container.red {
  background: #ff6086;
  color: #ff6086;
}
.lol-score-and-projection-row .champion-image-container.blue-and-red {
  background-image: linear-gradient(to bottom right, #00baff, #ff6086);
}
.lol-starter-card {
  display: flex;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  flex-direction: column;
  margin-right: 4px;
  font-family: 'Inter', sans-serif;
}
.lol-starter-card.flip {
  margin-left: 4px;
  margin-right: 0px;
}
.lol-starter-card .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-starter-card .row.flip {
  flex-direction: row-reverse;
}
.lol-starter-card .player-header {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 0 16px;
  height: 34px;
}
.lol-starter-card .player-header.flip {
  flex-direction: row-reverse;
}
.lol-starter-card .player-header .player-meta-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.lol-starter-card .player-header .player-meta-container.flip {
  margin-left: 0;
  margin-right: 8px;
}
.lol-starter-card .player-header .player-meta-container .player-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}
.lol-starter-card .player-header .player-meta-container .player-data {
  color: #7988a1;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
}
.lol-starter-card .player-header .player-meta-container .substitute-text {
  color: #00ceb8;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
  margin: 0 4px;
}
.lol-starter-card .lol-player-body {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  background-color: rgba(58,70,91,0.25);
  min-height: 100px;
  border-radius: 16px;
}
.lol-starter-card .lol-player-body .lol-body-top {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(58,70,91,0.5);
}
.lol-starter-card .lol-player-body .lol-body-top.flip {
  flex-direction: row-reverse;
}
.lol-starter-card .lol-player-body .lol-body-top .lol-score-container {
  display: flex;
  flex-direction: column;
}
.lol-starter-card .lol-player-body .lol-body-top .lol-score-container .adjusted-score {
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}
.lol-starter-card .lol-player-body .lol-body-top .lol-score-container .base-score {
  font-size: 10px;
  line-height: 12px;
  color: #b9c4d4;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container {
  display: flex;
  flex-direction: row;
  position: relative;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container.flipped {
  flex-direction: row-reverse;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .opponent-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 20px;
  border: 2px solid #ff6086;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .opponent-choice .avatar-identifier {
  position: absolute;
  bottom: -6px;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .cross-ban {
  height: 2px;
  width: 100%;
  background-color: #ff6086;
  transform: rotate(45deg);
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .cross-pick {
  height: 2px;
  width: 100%;
  background-color: #00baff;
  transform: rotate(45deg);
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice {
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
  width: 40px;
  border-radius: 50px;
  background-color: #99e3ff;
  border: 2px solid #00baff;
  cursor: pointer;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice.has-champion {
  background-color: transparent;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice.flipped {
  margin-right: 8px;
  margin-left: 0px;
}
.lol-starter-card .lol-player-body .pick-ban-choice-container .user-choice .text {
  position: absolute;
  color: #046ae0;
  font-size: 12px;
  z-index: 10;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.pick-ban-content {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  background-color: #252d3d;
  padding-bottom: 100px;
}
.pick-ban-content .title {
  color: #d8e2ed;
  font-size: 14px;
  font-weight: 600;
}
.pick-ban-content .recent-games-header {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  height: 28px;
  background-color: rgba(163,187,211,0.05);
  width: 100%;
  margin-top: 16px;
  position: relative;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}
.pick-ban-content .recent-games-header .large-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 100px;
  font-size: 12px;
  color: #7988a1;
}
.pick-ban-content .recent-games-header .med-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 60px;
  font-size: 12px;
  color: #7988a1;
}
.pick-ban-content .recent-games-header .small-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  min-width: 40px;
  font-size: 12px;
  color: #7988a1;
}
.pick-ban-selection {
  display: flex;
  flex-direction: row;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 30px;
  max-height: 150px;
  position: relative;
}
.pick-ban-selection .search-panel-wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 16px;
  min-height: 400px;
  max-height: 400px;
  width: 472px;
  border-radius: 16px;
  z-index: 10;
  overflow: hidden;
}
.pick-ban-selection .search-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  min-height: 96px;
  width: 96px;
  min-width: 96px;
  background-color: rgba(216,226,237,0.1);
  border-radius: 16px;
  overflow: hidden;
}
.pick-ban-selection .pick-ban-champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 24px;
  cursor: pointer;
  position: relative;
}
.pick-ban-selection .pick-ban-champion .selected-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  height: 24px;
  width: 24px;
  border-radius: 32px;
  position: absolute;
  top: 6px;
  left: 6px;
}
.pick-ban-selection .pick-ban-champion .selected-circle.pick {
  background-color: #00baff;
  display: flex;
}
.pick-ban-selection .pick-ban-champion .selected-circle.ban {
  background-color: #ff2b6d;
  display: flex;
}
.pick-ban-selection .pick-ban-champion .champion-img-container {
  height: 96px;
  width: 96px;
  border: 2px solid #000;
  border-radius: 16px;
  overflow: hidden;
}
.pick-ban-selection .pick-ban-champion .champion-img-container.selected-pick {
  border: 2px solid #00baff;
}
.pick-ban-selection .pick-ban-champion .champion-img-container.selected-ban {
  border: 2px solid #ff2b6d;
}
.pick-ban-selection .pick-ban-champion .champion-img-container .pick-cross-line {
  height: 2px;
  width: 100px;
  transform: rotate(45deg);
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.pick-ban-selection .pick-ban-champion .champion-img {
  height: 96px;
  width: 96px;
  border-radius: 16px;
}
.pick-ban-selection .pick-ban-champion .champion-name {
  font-size: 16px;
  color: #a3bbd3;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
.roster-matchup-lcs-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.week-selector-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.search-champion-panel {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  padding: 16px;
  padding-bottom: 0px;
  background-color: #3a465b;
  overflow: hidden;
  box-sizing: border-box;
}
.search-champion-panel .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-champion-panel .search-bar-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-height: 40px;
  border: 1px solid #b9c4d4;
  border-radius: 40px;
  box-sizing: border-box;
}
.search-champion-panel .search-bar-container.selected {
  border: 1px solid #00baff;
}
.search-champion-panel .search-bar-container .search-bar {
  background-color: transparent;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: none;
  outline: none;
  height: 24px;
  color: #b9c4d4;
  font-size: 14px;
}
.search-champion-panel .champion-list-container {
  display: flex;
  padding-bottom: 40px;
  margin-top: 16px;
  flex-direction: column;
}
.search-champion-panel .champion-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  cursor: pointer;
}
.search-champion-panel .hero-name {
  font-size: 12;
  color: #b9c4d4;
  margin-left: 8px;
}
.search-champion-panel .champion-img {
  height: 30px;
  width: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.search-champion-panel .champion-img.pick {
  border: 1px solid #00baff;
}
.search-champion-panel .champion-img.ban {
  border: 1px solid #ff2b6d;
}
.search-champion-panel .circle {
  height: 24px;
  width: 24px;
  border-radius: 24px;
  border: 1px solid #b9c4d4;
  margin-right: 16px;
}
.search-champion-panel .circle.pick {
  background-color: #00baff;
  border: 1px solid #00baff;
}
.search-champion-panel .circle.ban {
  background-color: #ff2b6d;
  border: 1px solid #ff2b6d;
}
.matchup-header .matchup-row {
  display: flex;
  flex-direction: row;
  padding-bottom: 8px;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
}
.matchup-header .matchup-row .user {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  width: 0;
  margin-right: 4px;
}
.matchup-header .matchup-row .reverse {
  margin-right: 0px;
  margin-left: 4px;
}
.matchup-header .matchup-owner-item {
  flex-grow: 1;
}
.matchup-header .vs-label {
  display: flex;
  position: absolute;
  height: 32px;
  width: 32px;
  padding: 4px;
  border-radius: 32px;
  align-items: center;
  justify-content: center;
  background-color: #293042;
  z-index: 99;
}
.matchup-header .vs-label .label {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  position: absolute;
  color: #606f8c;
  font-size: 14px;
  font-weight: 800;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}
.matchup-header .win-chance-bar {
  padding-left: 7px;
  padding-right: 7px;
}
.matchup-header .remaining-players-container {
  display: flex;
  flex-direction: row;
  padding-top: 4px;
  padding-left: 7px;
  padding-right: 7px;
}
.matchup-header .remaining-players-container .remaining-players {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}
.matchup-owner-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: rgba(163,187,211,0.05);
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(58,70,91,0.5);
}
.matchup-owner-item .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.matchup-owner-item .row.flip {
  flex-direction: row-reverse;
}
.matchup-owner-item .row.space-between {
  justify-content: space-between;
}
.matchup-owner-item .bottom-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 48px;
}
.matchup-owner-item .bottom-row.flip {
  flex-direction: row-reverse;
  margin-left: 0 !important;
  margin-right: 48px;
}
.matchup-owner-item .bottom-row.space-between {
  justify-content: space-between;
}
.matchup-owner-item .win-percentage-number {
  font-size: 10px;
  color: #fff;
  font-weight: bold;
}
.matchup-owner-item .win-bar {
  position: absolute;
  display: flex;
  width: 90%;
  background-color: rgba(58,70,91,0.5);
  height: 4px;
  overflow: hidden;
  border-top-right-radius: 4px;
  bottom: 4px;
  left: 32px;
  z-index: 0;
}
.matchup-owner-item .win-bar.flip {
  flex-direction: row-reverse;
  left: auto;
  right: 32px;
}
.matchup-owner-item .owner-container {
  flex-grow: 1;
  position: relative;
}
.matchup-owner-item .owner-container .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #45e6a7;
  border-radius: 50%;
  z-index: 10;
  background-color: #293042;
}
.matchup-owner-item .owner-container .avatar-container.flip {
  border: 2px solid #f75c8d;
}
.matchup-owner-item .owner-container .meta {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  font-family: 'Inter';
  margin-left: 8px;
}
.matchup-owner-item .owner-container .meta.flip {
  margin-left: auto;
  margin-right: 8px;
}
.matchup-owner-item .owner-container .meta.flip .team-name {
  align-self: flex-end;
}
.matchup-owner-item .owner-container .meta.flip .name {
  align-self: flex-end;
}
.matchup-owner-item .owner-container .name {
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  margin-top: 4px;
  color: #fff;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 80px;
  text-overflow: ellipsis;
}
@media (min-width: 1200px) {
  .matchup-owner-item .owner-container .name {
    max-width: 160px;
  }
}
@media (min-width: 1440px) {
  .matchup-owner-item .owner-container .name {
    max-width: 200px;
    font-size: 14px;
  }
}
.matchup-owner-item .owner-container .team-name {
  margin-top: 4px;
  font-size: 10px;
  color: #a3bbd3;
  line-height: 12px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 80px;
  text-overflow: ellipsis;
}
@media (min-width: 1200px) {
  .matchup-owner-item .owner-container .team-name {
    max-width: 160px;
  }
}
@media (min-width: 1440px) {
  .matchup-owner-item .owner-container .team-name {
    max-width: 200px;
    font-size: 12px;
  }
}
.matchup-owner-item .description {
  font-size: 10px;
  color: #a3bbd3;
  margin: 0 8px;
}
.matchup-owner-item .roster-score-and-projection-matchup .score {
  font-size: 12px;
}
.matchup-panel {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  width: 100% !important;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
  padding-top: 32px;
  margin-bottom: 50px;
}
.matchup-panel .renew-league-button-container {
  padding: 16px;
  text-align: center;
  border-radius: 8px;
  padding-top: 0px;
  margin-bottom: 32px;
  padding-top: 0px;
}
.matchup-panel .renew-league-button-container .form-elements button {
  border-radius: 8px;
  color: #022047;
}
.matchup-panel .missing-team-message {
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
}
.matchup-panel .roster-matchup {
  padding-bottom: 45px;
}
.matchup-panel .roster-matchup .matchup-header-container {
  padding: 0 10px;
}
.matchup-panel .roster-matchup.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.matchup-section-header {
  font-size: 18px;
  font-family: 'Muli';
  font-weight: 800;
  letter-spacing: 0.05px;
  color: #fff;
}
.week-selector-dropdown {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15px;
  font-weight: 800;
  color: #fff;
  display: inline-block;
  z-index: 100;
  background-color: #2d3649;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 8px 16px;
}
.week-selector-dropdown .label {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  min-width: 70px;
}
.week-selector-dropdown .label .text {
  flex-grow: 1;
  color: #fff;
}
.week-selector-dropdown .label .icon {
  margin-left: 5px;
}
.week-selector-dropdown .label .icon.left {
  transform: rotate(90deg);
  margin-left: 0;
  margin-right: 5px;
}
.week-selector-dropdown .label .icon.right {
  transform: rotate(270deg);
}
.week-selector-dropdown .week-items-container {
  position: absolute;
  top: 30px;
  right: 0;
  display: none;
  padding-top: 7px;
}
.week-selector-dropdown .week-items-container:hover {
  display: block;
}
.week-selector-dropdown .week-items-container .week-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 230px;
  max-height: 320px;
  overflow: auto;
  background: #2d3649;
  border-radius: 8px;
  border: 1px solid rgba(58,70,91,0.5);
  margin-top: 4px;
  -webkit-box-shadow: 0px 0px 5px 1px #141414;
  box-shadow: 0px 0px 5px 1px #141414;
}
.week-selector-dropdown .week-items-container .week-items .week {
  display: flex;
  -webkit-flex: 0 0 33.3%;
  -ms-flex: 0 0 33.3%;
  flex: 0 0 33.3%;
  align-items: center;
  justify-content: center;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 8px;
  color: #fff;
}
.week-selector-dropdown .week-items-container .week-items .week:hover {
  background-color: #3e4759;
  color: #fff;
}
.week-selector-dropdown .week-items-container .week-items .selected {
  background-color: rgba(216,226,237,0.9);
  color: #2d3649;
}
.week-selector-dropdown:hover .week-items-container {
  display: block;
}
.matchup-player-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
}
.matchup-player-item.empty-player.flip {
  text-align: right;
}
.matchup-player-item.empty-player .matchup-player-body-item {
  display: flex;
  justify-content: center;
}
.matchup-player-item .header-row {
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: flex-end;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: space-between;
  margin-right: 20px;
}
.matchup-player-item .header-row .player-pos {
  color: #a3bbd3;
  font-size: 10px;
  font-family: 'Inter';
  padding-left: 5px;
  padding-right: 5px;
}
.matchup-player-item .header-row.flip {
  flex-direction: row-reverse;
  margin-left: 16px;
  margin-right: 0px;
}
.matchup-player-item .header-row.flip .player-name {
  flex-direction: row-reverse;
}
.matchup-player-item .header-row.flip .nickname-container {
  flex-direction: row-reverse;
}
.matchup-player-item .player-image {
  height: 32px;
  width: 44px;
  object-fit: cover;
}
.matchup-player-item .player-name {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 8px;
}
.matchup-player-item .nickname-container {
  display: flex;
  align-items: center;
}
.matchup-player-item .nickname-container .roster-nickname {
  color: #00baff;
  font-size: 10px;
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 6px;
}
.matchup-player-item .nickname-container.flip .roster-nickname {
  color: #fff;
}
.matchup-player-item .injury-container {
  margin-left: 4px;
  padding-bottom: 2px;
}
.matchup-player-body-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-grow: 1;
  flex-direction: column;
  background-color: rgba(163,187,211,0.05);
  border-radius: 16px;
  padding: 12px;
  box-sizing: border-box;
  min-height: 60px;
  cursor: pointer;
  border: 1px solid rgba(58,70,91,0.5);
  position: relative;
}
.matchup-player-body-item.in-game {
  background-color: rgba(0,206,184,0.15);
}
.matchup-player-body-item.in-game-flip {
  background-color: rgba(255,43,109,0.15);
}
.matchup-player-body-item .possession-indicator-wrapper {
  position: absolute;
  top: 0px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  left: 40px;
  right: 10px;
}
.matchup-player-body-item .possession-indicator-wrapper.flip {
  left: 10px;
  right: 40px;
}
.matchup-player-body-item .container-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
}
.matchup-player-body-item .container-row.flip {
  flex-direction: row-reverse;
}
.matchup-player-body-item .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.matchup-player-body-item .row.flip {
  flex-direction: row-reverse;
}
.matchup-player-body-item .column {
  display: flex;
  flex-direction: column;
  margin-right: 8px;
}
.matchup-player-body-item .column.flip {
  align-items: flex-end;
}
.matchup-player-row-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}
.matchup-player-row-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.matchup-player-row-container .row.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .spaced-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.matchup-player-row-container .player-image-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  min-height: 32px;
}
.matchup-player-row-container .player-image-row .player-image-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.matchup-player-row-container .player-image-row .player-image-item.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .player-image-row .player-image-item .player-image {
  height: 32px;
  width: 44px;
  object-fit: cover;
}
.matchup-player-row-container .player-image-row .player-image-item .player-name {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 8px;
}
.matchup-player-row-container .player-image-row .player-image-item .player-name.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .player-image-row .player-image-item .player-pos {
  display: flex;
  flex-direction: row;
  font-size: 10px;
  line-height: 12px;
  color: #7988a1;
  margin: 0 4px;
}
.matchup-player-row-container .player-image-row .player-image-item .player-pos.flip {
  flex-direction: row-reverse;
}
.matchup-player-row-container .player-matchup-body-row {
  position: relative;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
}
.matchup-player-row-container .player-matchup-body-row .position {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  background-color: #262e3e;
  position: absolute;
  font-size: 10px;
  z-index: 10;
  top: 12px;
  border: 1px solid rgba(58,70,91,0.5);
}
.matchup-player-row-container .player-matchup-body-row .position .flex {
  justify-content: spacew;
}
.roster-matchup-tab-wrapper {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-family: 'Inter', sans-serif;
}
.roster-matchup-tab-wrapper .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.roster-matchup-tab-wrapper .playoff-week-selector-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}
.roster-matchup-tab-wrapper .player-section {
  display: flex;
  flex-direction: column;
}
.roster-matchup-tab-wrapper .player-section .title {
  font-size: 18px;
  font-weight: 600px;
  color: #b9c4d4;
}
.possession-indicator-rate {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
}
.possession-indicator-rate .divider {
  position: relative;
  justify-content: flex-start;
  display: flex;
  height: 4px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #3a465b;
}
.possession-indicator-rate .divider.flip {
  justify-content: flex-end;
}
.my-trade-transactions {
  background: #090d1c;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
  position: absolute;
  bottom: -35px;
  transition: all 0.2s ease;
  left: 0;
  right: 0;
}
.my-trade-transactions.show {
  bottom: 0;
}
.my-trade-transactions .body-container {
  width: 100%;
  max-height: 500px;
  position: absolute;
  bottom: -520px;
  overflow: hidden;
  transition: all 0.2s ease;
  padding-bottom: 20px;
  background: #090d1c;
  z-index: 499;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.my-trade-transactions .body-container .trade-content {
  max-height: 454px;
  overflow: auto;
}
.my-trade-transactions .body-container.open {
  bottom: 15px;
}
.my-trade-transactions .footer-container {
  left: 0;
  right: 0;
  background: #090d1c;
  bottom: 0;
  z-index: 500;
  position: absolute;
  display: flex;
  padding: 10px 15px;
  box-sizing: border-box;
  font-size: 13px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  align-items: center;
  user-select: none;
}
.my-trade-transactions .footer-container .message {
  flex-grow: 1;
}
.my-trade-transactions .footer-container .message i {
  padding-right: 10px;
}
.my-trade-transactions .footer-container .footer-toggle {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}
.my-trade-transactions .header-tabs {
  display: flex;
}
.my-trade-transactions .header-tabs >.tab {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  padding: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid #555;
}
.my-trade-transactions .header-tabs >.tab:first-child {
  border-top-left-radius: 8px;
}
.my-trade-transactions .header-tabs >.tab:last-child {
  border-top-right-radius: 8px;
}
.my-trade-transactions .header-tabs >.tab.selected {
  border-bottom: 5px solid #999;
}
.my-trade-transactions .team-owner-with-description .name {
  color: #f5f5f5 !important;
}
.my-trade-transactions .transaction-trade-item {
  border-bottom: 1px solid #444;
}
.my-trade-transactions .no-trades {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 25px;
  font-size: 13px;
}
.player-action-button {
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-action-button img {
  width: 20px;
}
.player-action-button .button-text {
  font-size: 10px;
  text-align: center;
}
.player-action-button.add .button-text,
.player-action-button.drop .button-text,
.player-action-button.trade .button-text {
  display: none;
}
.player-action-button.waiver img {
  display: none;
}
.player-injury-container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  height: 16px;
}
.player-injury-container .status-img {
  height: 12px;
  width: 12px;
}
.player-injury-container .text {
  font-size: 10px;
  margin-left: 4px;
}
.player-name-with-position {
  color: #555;
  display: flex;
  align-items: flex-end;
  font-family: 'Muli';
}
.player-name-with-position .name-text {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.player-name-with-position .position {
  font-weight: normal;
  font-size: 10px;
  padding-left: 10px;
  color: #888;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.player-name-with-position .injury-status-indicator {
  position: relative;
  top: -1px;
  padding: 0 2px;
}
.player-scoring {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: 'Inter', sans-serif;
}
.player-scoring.clickable {
  cursor: pointer;
}
.player-scoring .projections {
  font-size: 11px;
  font-weight: normal;
  color: #a3bbd3;
}
.player-scoring .score {
  font-size: 12px;
  margin-bottom: 2px;
}
.player-scoring .overperform {
  color: #00ceb8;
}
.player-scoring .underperform {
  color: #ff2a6d;
}
.player-scoring .fa-caret-up,
.player-scoring .fa-caret-down {
  color: #102131;
}
.player-scoring .player-scoring-wrapper {
  position: absolute;
  top: 14px;
  left: 0px;
  z-index: 999;
}
.player-stat-text {
  font-size: 11px;
}
.players-news-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  min-width: 800px;
  max-width: 85vw;
  max-height: 80vh;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px !important;
  background: #3a465b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.players-news-modal.loading {
  align-items: center;
  justify-content: center;
}
.players-news-modal >.players-nav {
  box-sizing: border-box;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  display: flex;
  flex-direction: row;
  z-index: 2;
  position: relative;
  top: 1px;
}
.players-news-modal >.players-nav .player-search-bar {
  position: relative;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-end;
}
.players-news-modal >.players-nav .player-search-bar .player-search {
  width: 100%;
}
.players-news-modal >.players-nav .player-search-bar .player-search input {
  width: 100%;
  border: none;
  background: #102131;
  border-radius: 20px;
  height: 24px;
  line-height: 40px;
  outline: none;
  font-size: 12px;
  padding: 0 10px;
  padding-left: 28px;
  color: #fff;
  border: 1px solid #677897;
  box-sizing: border-box;
}
.players-news-modal >.players-nav .player-search-bar .player-search input::placeholder {
  color: rgba(103,120,151,0.4);
}
.players-news-modal >.players-nav .player-search-bar .player-search i {
  position: absolute;
  top: 4px;
  left: 8px;
  color: rgba(103,120,151,0.4);
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list {
  position: absolute;
  right: 18px;
  top: 10px;
  width: 230px;
  z-index: 1;
  color: #fff;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .search-loader {
  height: 32px;
  background: #102131;
  border-radius: 5px;
  color: rgba(103,120,151,0.4);
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  margin-top: 3px;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .players {
  margin-top: 3px;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .players .legend {
  display: none;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .players .results {
  background: #102131;
  border-radius: 5px;
  max-height: 230px;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .players .results .player-search-results-item {
  line-height: 32px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 10px;
  font-family: 'Muli';
  cursor: pointer;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .players .results .player-search-results-item:hover {
  background: #00cea6;
}
.players-news-modal >.players-nav .player-search-bar .player-search-results-list .players .results .selected .player-search-results-item {
  background: #00cea6;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper {
  display: flex;
  flex-direction: row;
  max-width: calc(100% - 250px);
  overflow: hidden;
  flex-grow: 1;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item {
  padding: 10px 20px 10px 15px;
  cursor: pointer;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  max-width: 200px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item.selected {
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item.selected >.player-wrapper >.avatar-player {
  background-color: #efefef !important;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-wrapper {
  display: flex;
  align-items: center;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-wrapper >.avatar-player {
  margin-right: 10px;
  background-color: #fff !important;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-wrapper >.player-name-with-position {
  flex-direction: column !important;
  align-items: flex-start;
  color: #fff;
  font-size: 10px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-wrapper >.player-name-with-position >.position {
  padding-left: 0;
  padding-top: 2px;
  font-size: 8px;
  color: #fff;
  opacity: 0.9;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-wrapper >.player-name-with-position .injury-status-indicator {
  margin-top: 2px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-news-card-item {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 15px;
  color: #666;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-news-card-item:first-child {
  border-top-left-radius: 10px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-news-card-item:last-child {
  border-bottom-left-radius: 10px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-news-card-item >.header {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 5px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.player-news-card-item >.header >.timestamp {
  font-size: 10px;
  color: #bbb;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  padding-left: 10px;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.close-btn {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  top: 14px;
  right: 5px;
  color: #fff;
  cursor: pointer;
}
.players-news-modal >.players-nav >.player-nav-scroll-wrapper >.player-nav-item >.close-btn:hover {
  background: rgba(255,255,255,0.3);
}
.players-news-modal .player-card {
  height: calc(80vh - 50px);
}
.players-news-modal .player-card-wrapper.hide {
  display: none;
}
.postdraft-league-settings {
  width: 100% !important;
  background-color: #1c212d;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 16px;
  min-height: 100vh;
}
.postdraft-league-settings .draft-results-btn {
  margin-top: 10px;
  margin-right: 10px;
  background: #58a7ff !important;
}
.postdraft-league-settings .leave-league {
  margin-bottom: 50px;
  margin-top: 20px;
}
.postdraft-league-settings .leave-league-btn {
  margin-top: 10px;
  margin-right: 10px;
  background: #ff2a6d !important;
}
.postdraft-league-settings .scoring-settings {
  padding-bottom: 45px;
}
.league-tab-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
  font-family: 'Inter', sans-serif;
  padding: 0 24px;
}
.league-tab-container .postdraft-scroll-right-panel {
  display: flex;
  flex-direction: column;
  padding: 24px;
  padding-top: 0px;
  flex-grow: 1;
}
.league-tab-container .title {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: medium;
  color: #fff;
  margin-top: 4px;
}
.league-tab-container .subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #7988a1;
}
.league-tab-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
}
.league-tab-container .row.standings .team-wrap {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.league-tab-container .item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.league-tab-container .standings-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  margin-left: 16px;
}
.league-tab-container .panel-row {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-bottom: 64px;
}
.league-tab-container .league-activity-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  color: #fff;
  margin-top: 16px;
  padding: 16px;
  min-height: 300px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.league-tab-container .league-activity-card .view {
  color: #00ceb8;
  font-size: 10px;
  cursor: pointer;
}
.league-tab-container .league-matchups {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: #fff;
}
.league-tab-container .league-tab-standings {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-top: 0px;
}
.league-tab-container .league-tab-standings .league-standings-container {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background-color: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
  box-sizing: border-box;
  padding: 16px 8px;
}
.league-tab-container .league-tab-standings .league-standing-list {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 16px;
}
.league-tab-container .league-tab-standings .league-standing-list .league-standing-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  min-height: 60px;
  cursor: pointer;
}
.league-tab-container .league-tab-standings .league-standing-list .rank {
  font-size: 16px;
  color: #d8e2ed;
  font-weight: 700;
  width: 26px;
  line-height: 17px;
}
.league-tab-container .league-tab-standings .league-standing-list .value {
  font-size: 10px;
  color: #a3bbd3;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .avatar-container {
  margin-right: 4px;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .team-name {
  margin-left: 4px;
  max-width: 40 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .name {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .name .commish-badge {
  margin: 0;
}
.league-tab-container .league-tab-standings .league-standing-list .team-owner-with-description .meta .description {
  position: absolute;
  color: #fff;
  font-size: 16px;
  right: 0px;
}
.league-tab-container .league-settings-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  box-sizing: border-box;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.league-tab-container .league-settings-container .league-settings {
  display: flex;
  flex-direction: column;
}
.league-tab-container .league-settings-container .league-settings .settings-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 40px;
  padding: 16px 0px;
  flex-direction: row;
  justify-content: space-between;
}
.league-tab-container .league-settings-container .league-settings .settings-row .name {
  color: #7988a1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600px;
}
.league-tab-container .league-settings-container .league-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.league-tab-container .league-settings-container .league-settings .settings-row .bold {
  font-weight: 700;
}
.scoring-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  margin-top: 16px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.scoring-container .scoring-settings {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.scoring-container .scoring-settings .grouping-header {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  margin-top: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.scoring-container .scoring-settings .settings-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 40px;
  max-height: 60px;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius: 5px;
}
.scoring-container .scoring-settings .settings-row.highlight {
  background-color: #ffffc7;
  padding: 8px !important;
}
.scoring-container .scoring-settings .settings-row .name {
  font-size: 12px;
  color: #7988a1;
  font-weight: 600px;
}
.scoring-container .scoring-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.scoring-container .scoring-settings .settings-row .value .plus {
  color: #00ceb8;
}
.scoring-container .scoring-settings .settings-row .value .minus {
  color: #ff2b6d;
}
.setting-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  cursor: pointer;
}
.setting-circle:hover {
  background-color: #1c212d;
}
.no-roster-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  background-color: rgba(58,70,91,0.25);
  border-radius: 16px;
  margin-top: 16px;
}
.no-roster-container .user-name {
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  font-weight: 400;
  margin-left: 8px;
}
.league-tab-roster-modal {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 32px;
  background: #102131;
  max-height: 600px;
  width: 800px;
}
.postdraft-panel {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  flex-direction: column;
}
.trade-panel-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.trade-panel-container .trade-panel-content-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  align-items: stretch;
  flex-direction: row;
  box-sizing: border-box;
  padding-top: 8px;
}
.trade-panel-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-panel-container .row.spaced {
  justify-content: space-between;
}
.trade-panel-container .trade-title {
  font-size: 18px;
  color: #fff;
  user-select: none;
  font-family: 'Poppins', sans-serif;
  line-height: 24px;
  font-weight: 500;
}
.trade-panel-container .trades-count-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  height: 16px;
  width: 16px;
  border-radius: 24px;
  font-size: 10px;
  color: #022047;
  margin-left: 8px;
}
.trade-panel-container .button {
  display: flex;
  align-items: center;
  padding: 12px 32px;
  font-size: 14px;
  border-radius: 24px;
  font-weight: 600;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  height: 40px;
  font-family: 'Poppins';
  position: relative;
}
.trade-panel-container .button.review {
  background-color: rgba(58,70,91,0.5);
  color: #fff;
  margin-right: 8px;
}
.trade-panel-container .button.trade {
  background-color: #a3acff;
  color: #022047;
}
.trade-panel-container .button .pending-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff2b6d;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  color: #fff;
  font-size: 12px;
  font-family: 'Inter';
  text-align: center;
  position: absolute;
  top: -6px;
  right: -3px;
}
.trade-panel-container .active-trades-scroll {
  position: relative;
  padding: 0 24px;
  flex-grow: 1;
}
.trade-panel-container .active-trades-scroll.right-divider {
  border-right: 2px solid rgba(163,187,211,0.1);
}
.trade-panel-container .trade-block-scroll {
  position: relative;
  padding: 16px;
  padding-right: 8px;
  padding-top: 0px;
}
.trade-panel-container .right {
  display: flex;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.trade-panel-container .left {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.item {
  padding: 20px;
  width: 200px;
  border-radius: 4px;
  cursor: pointer;
  color: #a3bbd3;
}
.item:hover {
  background-color: #00d8a7;
  color: #fff;
}
.remaining-players {
  font-size: 10px;
  color: #a3bbd3;
  text-align: left;
  font-family: 'Muli';
}
.remaining-players.flip {
  text-align: right;
}
.remaining-players.flip .label {
  padding-right: 0px;
  padding-left: 4px;
}
.remaining-players.flip .desc {
  text-align: right;
}
.remaining-players .label {
  font-weight: bold;
  padding-right: 4px;
}
.remaining-players .desc {
  text-align: left;
  margin-top: 4px;
}
.renew-league-form .renew-league-body {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.renew-league-form .renew-league-body .section {
  margin-top: 30px;
}
.renew-league-form .renew-league-body .section .form-item-wrap {
  margin: 20px 0;
}
.roster-matchup-player-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.roster-matchup-player-item .roster-nickname {
  max-width: none;
  white-space: pre-wrap;
}
.roster-matchup-player-item .player-meta {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}
.roster-matchup-player-item .player-meta .player-info .player-name {
  font-family: 'Muli';
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
@media (max-width: 1040px) {
  .roster-matchup-player-item .player-meta .player-info .player-name {
    font-size: 14px;
  }
}
.roster-matchup-player-item .player-meta .player-desc {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  color: #a3bbd3;
  padding-top: 4px;
}
@media (max-width: 1040px) {
  .roster-matchup-player-item .player-meta .player-desc {
    font-size: 10px;
  }
}
.roster-matchup-player-item .player-meta .game-schedule-live-description {
  color: #a3bbd3;
}
.roster-matchup-player-item .player-scoring {
  flex-basis: 40px;
  text-align: right;
}
.roster-matchup-player-item .player-scoring .score {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
@media (max-width: 1040px) {
  .roster-matchup-player-item .player-scoring .score {
    font-size: 12px;
  }
}
.roster-matchup-player-item .player-scoring .projections {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #a3bbd3;
  padding-top: 2px;
}
@media (max-width: 1040px) {
  .roster-matchup-player-item .player-scoring .projections {
    font-size: 10px;
  }
}
.roster-matchup-player-item .player-stat-text {
  text-align: left;
}
.roster-matchup-player-item.flip {
  flex-direction: row-reverse;
}
.roster-matchup-player-item.flip .player-meta {
  text-align: right;
}
.roster-matchup-player-item.flip .player-meta .player-info .player-desc {
  text-align: right;
  flex-direction: row-reverse;
}
.roster-matchup-player-item.flip .player-stat-text {
  text-align: right;
}
.roster-matchup-player-item.flip .player-scoring {
  text-align: left;
}
.roster-matchup .roster-matchup-row {
  display: flex;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
  justify-content: center;
}
.roster-matchup .roster-matchup-row .player-meta {
  flex-grow: 1;
  cursor: pointer;
}
.roster-matchup .roster-matchup-row .game-schedule-live-description {
  text-align: left;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player {
  display: flex;
  width: 176px;
  white-space: nowrap;
  padding: 10px 0;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .player-name-with-position {
  flex-direction: row-reverse;
  width: 132px;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .player-name-with-position .position {
  position: relative;
  top: -1px;
  padding-left: 0;
  padding-right: 10px;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .player-name-with-position .name-text {
  font-size: 13px;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .game-schedule-live-description {
  text-align: right;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .player-stat-text {
  text-align: right;
  margin-top: 4px;
  color: #777;
  max-width: 131px;
  white-space: normal;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .off-roster-tag {
  font-size: 10px;
  margin-top: 10px;
  font-style: italic;
  text-align: right;
  color: #ec5556;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .roster-nickname {
  text-align: right;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) {
  flex-direction: row-reverse;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .player-name-with-position {
  justify-content: flex-start;
  flex-direction: row;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .player-name-with-position .position {
  padding-left: 10px;
  padding-right: 0;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .game-schedule-live-description {
  text-align: left;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .player-stat-text {
  text-align: left;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .off-roster-tag {
  text-align: left;
  color: #ec5556;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .roster-nickname {
  text-align: left;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player:nth-child(3n+0) .player-meta.empty {
  text-align: left;
  font-size: 13px;
}
.roster-matchup .roster-matchup-row .roster-matchup-row-player .player-meta.empty {
  width: 130px;
  color: #999;
  font-size: 15px;
  text-align: right;
  font-size: 13px;
  line-height: 27px;
}
.roster-matchup .roster-matchup-row .player-scoring {
  text-align: center;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-matchup .roster-matchup-row .player-scoring .projections {
  text-align: center;
}
.roster-matchup .position-label {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  font-size: 14px;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
.roster-matchup .position-label >.league-slot-position-square {
  z-index: 99;
}
.roster-matchup .position-label >.background {
  height: 100%;
  width: 25px;
  position: absolute;
}
.roster-matchup .position-label >.background.background-left {
  left: 0;
}
.roster-matchup .position-label >.background.background-right {
  right: 0;
}
.roster-matchup .position-label >.background .playing {
  background: #ffffc7;
}
.roster-matchup .header-bench {
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
  margin-top: 30px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: #555;
}
.roster-matchup .playing {
  background: #ffffc7;
}
.roster-matchup .no-matchup-desc {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin: 10px;
}
.roster-matchup .matchup-pending-message {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  line-height: 1.3;
}
.roster-matchup2.loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-matchup2 .section-header-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.roster-matchup2 .section-header-wrapper .matchup-section-header {
  flex-grow: 1;
}
.roster-matchup2 .playoff-week-selector-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}
.roster-matchup2 .matchup-header {
  padding: 0 8px;
  margin-top: 36px;
  font-family: 'Inter', sans-serif;
}
.roster-matchup2 .roster-matchup-row {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
}
.roster-matchup2 .roster-matchup-row .player-meta {
  flex-grow: 1;
  cursor: pointer;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-row-player2 {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  padding: 8px 12px;
  align-items: center;
  box-sizing: border-box;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-row-player2 .player-scoring .score {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-row-player2 .player-scoring .projections {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #a3bbd3;
  padding-top: 2px;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-row-player2 .player-meta.empty {
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  min-height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-row-player2.flip {
  flex-direction: row-reverse;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-row-player2.flip .player-meta.empty {
  text-align: right;
  flex-direction: row-reverse;
}
.roster-matchup2 .roster-matchup-row .injury-status-indicator {
  padding: 0 5px;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item .player-stat-text {
  margin-top: 6px;
  color: #edf2f9;
  white-space: normal;
  line-height: 1.18;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item .off-roster-tag {
  font-size: 10px;
  margin-top: 10px;
  font-style: italic;
  text-align: right;
  color: #ec5556;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item:nth-child(3n+0) {
  flex-direction: row-reverse;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item:nth-child(3n+0) .player-name-with-position {
  justify-content: flex-start;
  flex-direction: row;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item:nth-child(3n+0) .player-name-with-position .position {
  padding-left: 10px;
  padding-right: 0;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item:nth-child(3n+0) .game-schedule-live-description {
  text-align: left;
  font-size: 8px;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item:nth-child(3n+0) .player-stat-text {
  text-align: left;
}
.roster-matchup2 .roster-matchup-row .roster-matchup-player-item:nth-child(3n+0) .off-roster-tag {
  text-align: left;
  color: #ec5556;
}
.roster-matchup2 .position-label {
  -webkit-flex: 0 0 34px;
  -ms-flex: 0 0 34px;
  flex: 0 0 34px;
  font-size: 14px;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
.roster-matchup2 .position-label >.league-slot-position-square {
  z-index: 99;
}
.roster-matchup2 .position-label >.background {
  height: 100%;
  width: 25px;
  position: absolute;
}
.roster-matchup2 .position-label >.background.background-left {
  left: 0;
}
.roster-matchup2 .position-label >.background.background-right {
  right: 0;
}
.roster-matchup2 .position-label >.background .playing {
  background: #0c5850;
}
.roster-matchup2 .header-bench {
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
  margin-top: 30px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: #555;
}
.roster-matchup2 .playing {
  background: #0c5850;
}
.roster-matchup2 .no-matchup-desc {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin: 10px;
}
.roster-matchup2 .matchup-pending-message {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  line-height: 1.3;
}
.roster-nickname {
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}
.roster-position-selector .roster-item {
  display: flex;
  height: 40px;
  align-items: center;
  padding-left: 25px;
}
.roster-position-selector .roster-item .fa-plus-circle,
.roster-position-selector .roster-item .fa-minus-circle {
  opacity: 0.7;
}
.roster-position-selector .roster-item .position {
  flex-grow: 1;
  font-size: 14px;
  font-weight: bold;
}
.roster-position-selector .roster-item .color {
  height: 30px;
  width: 30px;
  border-radius: 30px;
  margin: 0 16px;
}
.roster-position-selector .roster-item .color.qb {
  background: #ff2a6d;
}
.roster-position-selector .roster-item .color.rb {
  background: #00ceb8;
}
.roster-position-selector .roster-item .color.wr {
  background: #58a7ff;
}
.roster-position-selector .roster-item .color.te {
  background: #ffae58;
}
.roster-position-selector .roster-item .color.flex {
  background: #3a465b;
}
.roster-position-selector .roster-item .color.wrrb_flex {
  background: #3a465b;
}
.roster-position-selector .roster-item .color.rec_flex {
  background: #3a465b;
}
.roster-position-selector .roster-item .color.super_flex {
  background: #3a465b;
}
.roster-position-selector .roster-item .color.idp_flex {
  background: #3a465b;
}
.roster-position-selector .roster-item .color.k {
  background: #bd66ff;
}
.roster-position-selector .roster-item .color.def {
  background: #7988a1;
}
.roster-position-selector .roster-item .color.dl {
  background: #ff795a;
}
.roster-position-selector .roster-item .color.lb {
  background: #6d7df5;
}
.roster-position-selector .roster-item .color.db {
  background: #7988a1;
}
.roster-position-selector .roster-item .color.bn {
  background: #a3bbd3;
}
.roster-position-selector .roster-item .color.pg {
  background: #ff2b6d;
}
.roster-position-selector .roster-item .color.sg {
  background: #ff5c00;
}
.roster-position-selector .roster-item .color.sf {
  background: #00ceb8;
}
.roster-position-selector .roster-item .color.pf {
  background: #00baff;
}
.roster-position-selector .roster-item .color.c {
  background: #bd66ff;
}
.roster-position-selector .roster-item .color.util {
  background: #9e3a01;
}
.roster-position-selector .roster-item .color.g {
  background: #58a7ff;
}
.roster-position-selector .roster-item .color.f {
  background: #6d7df5;
}
.roster-position-selector .roster-item .action {
  display: flex;
  width: 104px;
  height: 34px;
  padding: 6px;
  box-sizing: border-box;
  align-items: center;
  background-color: #4a5870;
  border-radius: 16px;
}
.roster-position-selector .roster-item .action >div {
  width: 30px;
  line-height: 30px;
  cursor: pointer;
  font-size: 14px;
}
.roster-position-selector .roster-item .action .plus-action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-position-selector .roster-item .action .plus-action:hover .fa-plus-circle {
  color: #00ceb8;
}
.roster-position-selector .roster-item .action .minus-action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-position-selector .roster-item .action .minus-action:hover .fa-minus-circle {
  color: #ff2a6d;
}
.roster-position-selector .roster-item .action .slot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}
.roster-position-selector .add-new-position {
  font-size: 12px;
  font-weight: bold;
}
.roster-position-selector .add-new-position .header {
  padding: 15px 25px;
  cursor: pointer;
}
.roster-position-selector .add-new-position .available-positions {
  display: none;
}
.roster-position-selector .add-new-position:hover .available-positions {
  display: block;
}
.roster-position-selector .add-new-position:hover .available-positions .available-position-item {
  padding: 10px 25px;
  font-size: 13px;
  cursor: pointer;
}
.roster-position-selector .add-new-position:hover .available-positions .available-position-item:hover {
  background: #18202f;
}
.roster-score-and-projection-matchup {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter', sans-serif;
  margin-right: 6px;
}
.roster-score-and-projection-matchup.flip {
  flex-direction: row-reverse;
  margin-right: auto;
  margin-left: 6px;
}
.roster-score-and-projection-matchup.row {
  flex-direction: row;
}
.roster-score-and-projection-matchup .projections {
  display: flex;
  font-size: 10px;
  font-weight: normal;
  color: #a3bbd3;
  margin: 0 3px;
  margin-top: 1px;
}
.score-breakdown {
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
  background: #102131;
  font-size: 11px !important;
  padding: 0 0 5px 0;
  width: 270px;
  overflow: hidden;
}
.score-breakdown >.header {
  display: flex;
  text-align: left;
  padding: 10px 15px 10px 15px;
  font-size: 10px;
  font-weight: normal;
  overflow: hidden;
  margin-bottom: 5px;
}
.score-breakdown >.header >.name {
  -webkit-flex: 0 0 120px;
  -ms-flex: 0 0 120px;
  flex: 0 0 120px;
  padding-right: 5px;
}
.score-breakdown >.header >.label-stat {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  padding-right: 3px;
}
.score-breakdown >.header >.label-setting {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  padding-right: 3px;
}
.score-breakdown >.header >.label-score {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.score-breakdown >.stat-row {
  display: flex;
  padding: 5px 15px;
  text-align: left;
}
.score-breakdown >.stat-row >.stat-name {
  font-weight: bold;
  padding-right: 5px;
  -webkit-flex: 0 0 120px;
  -ms-flex: 0 0 120px;
  flex: 0 0 120px;
  overflow: hidden;
}
.score-breakdown >.stat-row >.stat-value {
  font-weight: normal;
  padding-right: 3px;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.score-breakdown >.stat-row >.scoring-setting {
  font-weight: normal;
  padding-right: 3px;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.score-breakdown >.stat-row >.score {
  font-weight: bold;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.score-breakdown >.footer {
  margin: 0 15px;
  padding: 5px 0;
  border-top: 1px solid #efefef;
  display: flex;
  text-align: left;
}
.score-breakdown >.footer >.label {
  flex-grow: 1;
}
.score-breakdown >.footer >.total {
  font-weight: bold;
  text-align: left;
  flex-basis: 30px;
  font-size: 12px;
}
.selectable-roster {
  width: 100%;
}
.selectable-roster .header {
  display: flex;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  border-bottom: 1px solid #18202f;
  padding-bottom: 5px;
  margin-top: 30px;
}
.selectable-roster .team-roster-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #18202f;
  min-height: 50px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}
.selectable-roster .team-roster-item .player-name-with-position {
  color: #fff;
}
.selectable-roster .team-roster-item .player-stat-text {
  margin-top: 5px;
}
.selectable-roster .team-roster-item .player-scoring {
  color: #fff;
}
.selectable-roster .team-roster-item .player-scoring .projections {
  color: #a3bbd3;
}
.selectable-roster .team-roster-item.selected {
  background: #18202f !important;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ffae58;
}
.selectable-roster .team-roster-item.selected .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.selectable-roster .team-roster-item.invalid {
  cursor: default;
  opacity: 0.3;
}
.selectable-roster .team-roster-item.valid {
  background: #ffffc7;
}
.selectable-roster .team-roster-item.valid:hover {
  background: #ffffc7;
}
.selectable-roster .team-roster-item.valid .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.selectable-roster .cell-position,
.selectable-roster .header-cell-position {
  -webkit-flex: 0 0 42px;
  -ms-flex: 0 0 42px;
  flex: 0 0 42px;
  padding-right: 15px;
  padding-left: 10px;
}
.selectable-roster .cell-player-meta,
.selectable-roster .header-cell-player-meta {
  flex-grow: 1;
}
.selectable-roster .cell-points,
.selectable-roster .header-cell-points {
  -webkit-flex: 0 0 72px;
  -ms-flex: 0 0 72px;
  flex: 0 0 72px;
}
.selectable-roster .cell-bye,
.selectable-roster .header-cell-bye {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.selectable-roster .cell-percent-start,
.selectable-roster .header-cell-percent-start {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}
.selectable-roster .cell-position {
  color: #a3bbd3;
  font-size: 14px;
}
.set-keepers-panel {
  background: #283245;
  color: #fff;
  min-width: 400px !important;
  border-radius: 4px;
  box-shadow: 1px 1px 15px #18202f;
}
.set-keepers-panel .league-member-header {
  border: none;
}
.set-keepers-panel .channel-settings-body {
  max-height: 60vh;
  overflow: auto;
  padding: 0 15px;
}
.set-keepers-panel .channel-settings-body .content {
  padding: 10px 10px 25px 10px;
  font-size: 14px;
}
.set-keepers-panel .channel-settings-body .content .empty-message {
  font-size: 14px;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item {
  cursor: pointer;
  padding: 15px;
  border-top: 1px solid #efefef;
  display: flex;
  justify-content: space-between;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item .player-name {
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item .player-info {
  color: #eee;
  font-size: 10px;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item .selected-icon {
  display: none;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item .selected-icon i {
  font-size: 25px;
  color: #93e133;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item.first-item {
  border-top: none;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item:hover {
  background-color: #555;
}
.set-keepers-panel .channel-settings-body .content .select-keeper-item.selected .selected-icon {
  display: inline-block;
}
.set-keepers-panel .channel-settings-body .content .select-user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 3px;
}
.set-keepers-panel .channel-settings-body .content .select-user-item:hover {
  background-color: #555;
}
.set-keepers-panel .channel-settings-body .content .select-user-item.selected {
  background-color: #333;
}
.set-keepers-panel .channel-settings-body .content .select-user-item.selected:hover {
  background-color: #333;
}
.set-keepers-panel .channel-settings-body .content .select-user-item .user-name {
  margin-left: 10px;
}
.set-trade-player-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: 1px 1px 15px #18202f;
  width: 600px;
  height: 500px;
  background: #283245;
  overflow: hidden;
}
.set-trade-player-modal .channel-settings-body {
  display: flex;
}
.set-trade-player-modal .channel-settings-body .left-column {
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  border-right: 1px solid #3a475f;
  padding: 15px;
  overflow: auto;
  height: 418px;
  box-sizing: border-box;
}
.set-trade-player-modal .channel-settings-body .left-column .trade-roster-item-container {
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 10px;
  cursor: pointer;
  box-sizing: border-box;
}
.set-trade-player-modal .channel-settings-body .left-column .trade-roster-item-container.selected {
  background: #3a475f;
}
.set-trade-player-modal .channel-settings-body .right-column {
  flex-grow: 1;
  padding: 15px;
  overflow: auto;
  height: 418px;
  box-sizing: border-box;
}
.set-trade-player-modal .channel-settings-body .right-column .team-roster-item:last-child {
  border-bottom: none;
}
.user-tab-menu {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 24px;
  padding-top: 8px;
  box-sizing: border-box;
}
.user-tab-menu .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.user-tab-menu .avatar {
  width: 40px;
  height: 40px;
  border-radius: 24px;
  position: relative;
}
.user-tab-menu .info {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}
.user-tab-menu .info .name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
}
.user-tab-menu .info .name-row .name {
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
  font-family: 'Poppins';
}
.team-owner-matchup-row {
  display: flex;
  padding: 10px 10px;
  border-radius: 5px;
  box-sizing: border-box;
}
.team-owner-matchup-row .user {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
}
.team-owner-matchup-row .user .team-owner-matchup-roster {
  flex-grow: 1;
}
.team-owner-matchup-row .user .team-owner-matchup-roster .team-owner-with-description .team-name {
  max-width: 60px;
}
.team-owner-matchup-row .user.reverse .team-owner-with-description {
  flex-direction: row-reverse;
}
.team-owner-matchup-row .user.reverse .team-owner-with-description .avatar-container {
  margin-right: 0px;
  margin-left: 10px;
}
.team-owner-matchup-row .user.reverse .team-owner-with-description .avatar {
  margin-right: 0px;
}
.team-owner-matchup-row .user.reverse .team-owner-with-description div {
  text-align: right;
}
.team-owner-matchup-row .user.reverse .team-owner-with-description .meta {
  margin-left: 10px;
  margin-right: 0;
}
.team-owner-matchup-row .player-scoring {
  width: 40px;
  text-align: center;
}
.team-owner-matchup-row-wrapper .remaining-players-container {
  display: flex;
  margin: 0 10px;
}
.team-owner-matchup-row-wrapper .remaining-players-container .remaining-players {
  flex-grow: 1;
  padding: 10px 0;
  flex-basis: 0;
}
.team-owner-matchup-row-wrapper .win-chance-bar {
  margin: 0 10px;
}
.team-owner-with-description {
  display: flex;
  align-items: center;
}
.team-owner-with-description .avatar-container {
  margin-right: 10px;
}
.team-owner-with-description >.meta >.name {
  font-weight: bold;
  color: #fff;
  font-size: 12px;
  text-transform: none;
  position: relative;
}
.team-owner-with-description >.meta >.name .commish-badge {
  position: relative;
  top: 3px;
  margin-left: 5px;
}
.team-owner-with-description >.meta >.team-name {
  margin-top: 3px;
  font-weight: normal;
  color: #ccc;
  font-size: 10px;
  line-height: 12px;
  text-transform: none;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-owner-with-description >.meta >.description {
  font-size: 11px;
  color: #aaa;
  margin-top: 3px;
  margin-bottom: 1px;
}
.team-panel {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  box-sizing: border-box;
  border-radius: 16px;
  min-height: 80vh;
}
.team-panel .padding-wrapper {
  padding: 0 24px;
}
.team-panel .invalid-roster-message-warning .validation-message-block {
  margin: 16px 0;
}
.team-panel .actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.team-panel .actions .btn-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.team-panel .actions .btn-container.space {
  margin-right: 16px;
}
.team-panel .actions .btn-container.disabled {
  opacity: 0.5;
}
.team-panel .actions .btn-container .waiver-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 12px;
  height: 12px;
  width: 12px;
  box-sizing: border-box;
  background-color: #ff2b6d;
  color: #fff;
  font-size: 9px;
  position: absolute;
  top: -2px;
  right: -2px;
}
.team-panel .actions .btn-text {
  font-size: 10px;
  color: #fff;
  margin-top: 4px;
}
.team-panel .actions .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #3a465b;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 40px;
}
.team-panel .actions .action-text {
  font-family: 'Muli';
  font-size: 9px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-top: 2px;
  text-align: center;
}
.team-panel .missing-team-message {
  font-size: 14px;
  text-align: center;
  margin-top: 15px;
}
.team-panel .team-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 30px;
  cursor: pointer;
  padding-left: 10px;
}
.team-panel .edit {
  color: #58a7ff;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 5px;
}
.team-panel :hover .edit {
  color: #555;
}
.team-panel .fa-cog {
  margin-right: 3px;
}
.team-panel .team-roster .player-scoring {
  color: #fff;
}
.team-panel .league-warning-message {
  margin: 16px 24px;
  padding: 16px;
  margin-top: 0;
}
.team-panel .button-icon {
  margin-bottom: 5px;
  height: 60px;
  width: 60px;
}
.roster-popup-container {
  background: #283245;
  min-width: 560px !important;
  border-radius: 10px;
  max-height: 500px;
  overflow-y: auto;
}
.team-roster {
  width: 100%;
  padding-bottom: 64px;
}
.team-roster .week-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 24px;
  margin-bottom: 12px;
}
.team-roster .row {
  display: flex;
  align-items: center;
}
.team-roster .title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 16px;
}
.team-roster .title-row.spaced {
  padding: 8px 16px;
}
.team-roster .pos {
  font-size: 11px;
  margin-right: 4px;
}
.team-roster .title {
  font-size: 14px;
  color: #fff;
  font-family: 'Poppins';
}
.team-roster .header-option {
  font-size: 12px;
  color: #d8e2ed;
  width: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 1300px) {
  .team-roster .header-option {
    width: 80px;
  }
}
.team-roster .item-option {
  font-size: 12px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 1300px) {
  .team-roster .item-option {
    width: 80px;
  }
}
.team-roster .percentage-style {
  color: #fff;
  font-size: 10px;
  margin-left: 4px;
}
.team-roster.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.team-roster .header {
  display: flex;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: #555;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
  margin-top: 30px;
}
.team-roster .player-divider {
  display: flex;
  width: 80%;
  height: 1px;
  background-color: #344054;
  margin-left: 20%;
}
.team-roster .team-roster-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  color: #888;
  min-height: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  overflow: hidden;
  margin-top: 4px;
  box-sizing: border-box;
  min-height: 64px;
}
.team-roster .team-roster-item.odd {
  background-color: rgba(163,0,0,0.05);
}
.team-roster .team-roster-item.out {
  background-color: rgba(255,43,109,0.05);
}
.team-roster .team-roster-item.probable {
  background-color: rgba(238,242,247,0.05);
}
.team-roster .team-roster-item.in-game {
  background-color: rgba(0,206,184,0.05);
}
.team-roster .team-roster-item .avatar-player {
  margin-right: 8px;
}
.team-roster .team-roster-item.selected {
  background: #022047 !important;
  border: 1px solid #ffae58;
  color: #fff;
}
.team-roster .team-roster-item.selected .position {
  color: #fff;
}
.team-roster .team-roster-item.selected .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.team-roster .team-roster-item.invalid {
  cursor: default;
  opacity: 0.3;
}
.team-roster .team-roster-item.valid {
  background: #3a485b;
  border-radius: 8px;
  color: #fff;
}
.team-roster .team-roster-item.valid .position {
  color: #fff;
}
.team-roster .team-roster-item.valid:hover {
  background: #4a5870;
}
.team-roster .team-roster-item.valid .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.team-roster .cell-position,
.team-roster .header-cell-position {
  -webkit-flex: 0 0 42px;
  -ms-flex: 0 0 42px;
  flex: 0 0 42px;
}
.team-roster .cell-player-meta,
.team-roster .header-cell-player-meta {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.team-roster .cell-points,
.team-roster .header-cell-points {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}
.team-roster .cell-bye,
.team-roster .header-cell-bye {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.team-roster .cell-bye {
  font-size: 12px;
}
.team-roster .cell-percent-start,
.team-roster .header-cell-percent-start {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}
.team-roster .cell-position {
  color: #bbb;
  font-size: 14px;
}
.team-roster .header-cell-news,
.team-roster .cell-news {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
}
.team-roster .header-cell-news i,
.team-roster .cell-news i {
  color: #107ace;
  font-size: 16px;
}
.team-roster .off-roster-tag {
  font-size: 10px;
  margin-top: 10px;
  font-style: italic;
  color: #ec5556;
}
.team-roster .player-scoring {
  text-align: right;
}
.team-roster .player-name-row {
  display: flex;
  align-items: center;
}
.team-roster .player-name {
  font-size: 14px;
  color: #fff;
  font-family: 'Inter';
  margin-right: 4px;
}
.team-roster .bye-week {
  font-size: 11px;
  margin-right: 4px;
}
.team-roster .section-header-wrapper {
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 24px;
  padding: 0 16px;
}
.team-roster .section-header-wrapper .matchup-section-header {
  flex-grow: 1;
  margin-top: 12px;
}
.team-roster .section-header-wrapper.starters {
  padding-bottom: 0;
}
.team-roster .roster-nickname {
  color: #fff;
  padding-right: 4px;
}
.team-roster .update-roster-copy {
  font-size: 12px;
  color: #7888a4;
  position: relative;
  margin-top: 4px;
  padding: 0 16px;
  display: none;
}
@media (min-width: 1200px) {
  .team-roster .update-roster-copy {
    display: block;
  }
}
.team-roster .draft-pick-item {
  font-family: 'Muli';
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 16px;
}
.team-roster .game-schedule-live-description {
  margin: 6px 0;
  display: flex;
  align-items: center;
}
.team-roster .player-stat-text {
  color: #a3bbd3;
}
.team-roster .score-breakdown .header {
  color: #a3bbd3;
}
.team-setting-container {
  position: relative;
  height: 570px;
  width: 420px;
  background-color: #2c3749;
  border-radius: 24px;
  box-sizing: border-box;
}
.team-setting-container .form-elements input,
.team-setting-container input {
  display: flex;
  width: 290px;
  height: 36px;
  border-radius: 8px;
  background-color: #344054;
  border: none;
  color: #fff;
  padding: 8px;
  box-sizing: border-box;
  margin-top: 4px;
  margin-bottom: 4px;
  outline: none;
}
.team-setting-container .title {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  padding-bottom: 32px;
}
.team-setting-container .league-icon {
  position: relative;
}
.team-setting-container .edit-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50px;
  bottom: 0px;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: #3a465b;
  z-index: 99;
}
.team-setting-container .label {
  font-size: 12px;
  font-weight: bolder;
  color: #a3bbd3;
}
.team-setting-container .edit-player-nickname-item {
  margin-top: 12px;
  color: #fff;
}
.team-setting-container .edit-player-nickname-item:last-child {
  margin-bottom: 64px;
}
.team-setting-container .nickname-input {
  display: flex;
  width: 100%;
}
.team-setting-container .form-elements button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  width: 72px;
  height: 32px;
  color: #022047;
  font-size: 14px;
  outline: none;
}
.team-setting-container .floating-save-button {
  position: absolute;
  display: flex;
  right: 12px;
  bottom: 12px;
}
.team-setting-container .validation-message-block {
  width: 270px;
}
.trade-modal {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  height: 618px;
  overflow: hidden;
  border-radius: 10px;
  background: #283245;
  box-shadow: 1px 1px 15px #18202f;
  max-width: 90vw;
  transition: all 0.2s ease;
}
.trade-modal.step-1 {
  width: 990px;
}
.trade-modal.step-1 .validation-message-block {
  margin: 0;
}
.trade-modal.step-2 {
  width: 440px;
}
.trade-modal.step-2 .propose-btn {
  margin-left: 15px;
}
.trade-modal .channel-settings-header {
  border: none;
}
.trade-modal .channel-settings-footer {
  display: flex;
  border: none;
}
.trade-modal .carousel-btn {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  font-size: 9px;
  border-radius: 50%;
  background: #283245;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 15px #18202f;
  z-index: 99;
  cursor: pointer;
}
.trade-modal .carousel-btn:hover {
  background: #3a475f;
}
.trade-modal .carousel-btn i {
  font-size: 13px;
}
.trade-modal .carousel-btn.prev {
  left: 5px;
}
.trade-modal .carousel-btn.next {
  right: 5px;
}
.trade-modal .channel-settings-body {
  height: 470px;
  background: #283245;
  border: none;
}
.trade-modal .rosters-container {
  display: flex;
  height: 470px;
  overflow: hidden;
  position: relative;
  background: #283245;
}
.trade-modal .rosters-container .carousel-container {
  overflow: hidden;
}
.trade-modal .rosters-container .roster-item-container {
  -webkit-flex: 0 0 300px;
  -ms-flex: 0 0 300px;
  flex: 0 0 300px;
  width: 300px;
  height: 428px;
  overflow: hidden;
  border-radius: 10px;
  background: #3a475f;
  position: absolute;
  transition: all 0.3s ease;
  box-sizing: border-box;
  margin-left: 15px;
  box-shadow: 1px 1px 15px #18202f;
}
.trade-modal .rosters-container .roster-item-container:hover {
  background: #283245;
}
.trade-modal .rosters-container .roster-item-container .trade-partner-item.selected {
  background: #283245;
}
.trade-modal .rosters-container .roster-item-container .trade-partner-item.selected .trade-partner i {
  color: #00ceb8;
}
.trade-modal .rosters-container .roster-item-container .trade-partner-item .team-owner-with-description {
  flex-grow: 1;
}
.trade-modal .rosters-container .roster-item-container .trade-partner {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  box-sizing: border-box;
  height: 70px;
  cursor: pointer;
}
.trade-modal .rosters-container .roster-item-container .trade-partner i {
  font-size: 26px;
  color: #ccc;
  font-weight: normal;
}
.trade-modal .rosters-container .roster-item-container .trade-roster-summary {
  padding: 0 20px;
  cursor: pointer;
}
.trade-modal .rosters-container .roster-item-container .roster {
  overflow-y: auto;
  height: 300px;
  margin-top: 20px;
  border-top: 1px solid #efefef;
}
.trade-modal .rosters-container .roster-item-container .roster .header {
  padding-left: 10px;
}
.trade-modal .rosters-container .roster-item-container .roster .team-roster-item {
  cursor: default;
  border: none;
}
.trade-modal .rosters-container .roster-item-container .roster .team-roster-item .player-name-with-position {
  color: #fff;
}
.trade-modal .rosters-container .roster-item-container .roster .team-roster-item .game-schedule-live-description {
  color: #fff;
  opacity: 0.7;
}
.trade-modal .rosters-container .roster-item-container .roster .team-roster-item .cell-player-meta {
  padding-left: 8px;
}
.trade-modal .rosters-container .roster-item-container .roster .team-roster-item .cell-points {
  color: #fff;
}
.trade-modal .trade-state {
  display: flex;
  background: #171e29;
}
.trade-modal .trade-state .trade-state-receives,
.trade-modal .trade-state .trade-state-sends {
  flex-grow: 1;
  flex-basis: 0;
}
.trade-modal .trade-state .trade-state-header {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 25px;
  color: #999;
  background: #283245;
}
.trade-modal .trade-state .trade-state-players-container {
  background: #171e29;
  padding: 15px 25px;
}
.trade-modal .trade-state .trade-state-player {
  margin-bottom: 15px;
  font-size: 12px;
}
.trade-modal .trade-state .trade-state-player:last-child {
  margin-bottom: 0;
}
.trade-modal .trade-state .trade-state-player .player-name {
  font-weight: bold;
}
.trade-modal .trade-state .trade-state-player .position {
  color: #777;
  font-weight: normal;
  font-size: 10px;
}
.trade-modal .trade-state .trade-state-player .bye {
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 3px;
}
.trade-modal .trade-state .trade-state-draft-pick {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.trade-modal .trade-state .faab-title {
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  padding-top: 5px;
}
.trade-modal .trade-state .faab-trade {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}
.trade-modal .acquire-trade-partner-item >.meta {
  display: flex;
  align-items: center;
  padding: 15px 25px;
}
.trade-modal .acquire-trade-partner-item >.meta .name-container {
  flex-grow: 1;
}
.trade-modal .acquire-trade-partner-item >.meta .trade-btn {
  background: #58a7ff;
  font-size: 10px;
}
.trade-preview-roster {
  width: 100%;
}
.trade-preview-roster .header {
  display: flex;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
  margin-top: 30px;
}
.trade-preview-roster .team-roster-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: #fff;
  min-height: 50px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}
.trade-preview-roster .team-roster-item .player-name-with-position {
  color: #fff;
}
.trade-preview-roster .team-roster-item .game-schedule-live-description {
  color: #fff;
  opacity: 0.7;
}
.trade-preview-roster .team-roster-item .cell-player-meta {
  padding-left: 8px;
}
.trade-preview-roster .team-roster-item .cell-points {
  color: #fff;
}
.trade-preview-roster .team-roster-item.selected {
  background: #fff !important;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ffae58;
}
.trade-preview-roster .team-roster-item.selected .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.trade-preview-roster .team-roster-item.invalid {
  cursor: default;
  opacity: 0.3;
}
.trade-preview-roster .team-roster-item.valid {
  background: #ffffc7;
}
.trade-preview-roster .team-roster-item.valid:hover {
  background: #ffffc7;
}
.trade-preview-roster .team-roster-item.valid .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.trade-preview-roster .team-roster-item.draft-pick {
  padding-left: 10px;
}
.trade-preview-roster .cell-position,
.trade-preview-roster .header-cell-position {
  -webkit-flex: 0 0 42px;
  -ms-flex: 0 0 42px;
  flex: 0 0 42px;
  padding-right: 15px;
  padding-left: 10px;
}
.trade-preview-roster .cell-player-meta,
.trade-preview-roster .header-cell-player-meta {
  flex-grow: 1;
}
.trade-preview-roster .cell-points,
.trade-preview-roster .header-cell-points {
  -webkit-flex: 0 0 72px;
  -ms-flex: 0 0 72px;
  flex: 0 0 72px;
}
.trade-preview-roster .cell-bye,
.trade-preview-roster .header-cell-bye {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.trade-preview-roster .cell-percent-start,
.trade-preview-roster .header-cell-percent-start {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}
.trade-preview-roster .cell-position {
  color: #bbb;
  font-size: 14px;
  padding-right: 0;
}
.trade-preview-roster .cell-player-meta .name-text {
  font-size: 12px;
}
.trade-preview-roster .cell-player-meta .position {
  padding-left: 5px;
  position: relative;
  top: -1px;
}
.trade-roster-summary {
  font-size: 11px;
}
.trade-roster-summary .strongest {
  font-weight: bold;
  margin-bottom: 5px;
}
.trade-selectable-roster {
  width: 100%;
}
.trade-selectable-roster .header {
  display: flex;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  border-bottom: 1px solid #efefef;
  padding-bottom: 5px;
  margin-top: 30px;
}
.trade-selectable-roster .team-roster-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: #fff;
  min-height: 50px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}
.trade-selectable-roster .team-roster-item.selected {
  background: #3a475f !important;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #ffae58;
}
.trade-selectable-roster .team-roster-item.selected .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.trade-selectable-roster .team-roster-item.invalid {
  cursor: default;
  opacity: 0.3;
}
.trade-selectable-roster .team-roster-item.valid {
  background: #3a475f;
}
.trade-selectable-roster .team-roster-item.valid:hover {
  background: #3a475f;
}
.trade-selectable-roster .team-roster-item.valid .cell-position {
  color: #ffae58;
  font-weight: bold;
}
.trade-selectable-roster .cell-player-meta {
  padding-left: 8px;
}
.trade-selectable-roster .FAAB-info {
  font-size: 12px;
  color: #fff;
  padding-top: 5px;
  font-weight: bold;
}
.trade-selectable-roster .dollar {
  font-size: 14px;
  padding-top: 3px;
}
.trade-selectable-roster .error {
  color: #f00 !important;
}
.trade-selectable-roster .input-container {
  display: flex;
  flex-direction: row;
  border: 1px solid #888;
  width: 50%;
  margin-top: 5px;
  border-radius: 4px;
  padding: 2px 7px;
}
.trade-selectable-roster .input-container .input {
  border-width: 0px;
  font-size: 14px;
  background: none;
  color: #fff;
}
.trade-selectable-roster .input-container .input:hover {
  border-width: 0px;
}
.trade-selectable-roster .input-container .input:focus {
  border-width: 0px;
  outline: none;
}
.trade-selectable-roster .cell-position,
.trade-selectable-roster .header-cell-position {
  -webkit-flex: 0 0 42px;
  -ms-flex: 0 0 42px;
  flex: 0 0 42px;
  padding-right: 15px;
  padding-left: 10px;
}
.trade-selectable-roster .cell-player-meta,
.trade-selectable-roster .header-cell-player-meta {
  flex-grow: 1;
}
.trade-selectable-roster .cell-points,
.trade-selectable-roster .header-cell-points {
  -webkit-flex: 0 0 72px;
  -ms-flex: 0 0 72px;
  flex: 0 0 72px;
}
.trade-selectable-roster .cell-bye,
.trade-selectable-roster .header-cell-bye {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.trade-selectable-roster .cell-percent-start,
.trade-selectable-roster .header-cell-percent-start {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}
.trade-selectable-roster .cell-position {
  color: #bbb;
  font-size: 14px;
  padding-right: 0;
}
.trade-selectable-roster .cell-player-meta .name-text {
  font-size: 12px;
}
.trade-selectable-roster .cell-player-meta .position {
  padding-left: 5px;
  position: relative;
  top: -1px;
}
.trade-selectable-roster .draft-pick-row {
  padding-left: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.trade-selectable-roster .player-name-with-position {
  color: #fff;
}
.add-trade-assets {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  min-height: 600px;
  max-height: 70vh;
  width: auto;
  max-width: 90vw;
  min-width: 700px;
  overflow: hidden;
  position: relative;
}
.add-trade-assets .content-row {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-height: 520px;
  box-sizing: border-box;
  overflow: hidden;
}
.add-trade-assets .left {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  z-index: 20;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.add-trade-assets .right {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  border-left: 1px solid #61707e;
  min-width: 500px;
  max-width: 500px;
}
.add-trade-assets .trade-partners-assets-container {
  display: flex;
  flex-direction: row;
}
.add-trade-assets .add-trade-assets-scroll {
  padding-left: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 32px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
}
.add-trade-assets .add-trade-summary-scroll {
  padding-left: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 32px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.add-trade-assets .scroll-button-right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  right: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.add-trade-assets .scroll-button-left {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  left: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.avatars-container {
  height: 24px;
  width: 24px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.avatars-container .avatar-1 {
  position: absolute;
  z-index: 10;
  bottom: 0;
  right: 0;
}
.avatars-container .avatar-2 {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
}
.propose-trade-partners {
  display: flex;
  flex-direction: column;
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
}
.propose-trade-partners .propose-trade-content {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-grow: 1;
}
.propose-trade-partners .title {
  font-size: 18px;
  color: #fff;
}
.propose-trade-partners .description {
  font-size: 14px;
  color: #eef3f7;
}
.propose-trade-partners .row {
  display: flex;
  align-items: center;
}
.propose-trade-partners .spaced {
  justify-content: space-between;
}
.propose-trade-partners .trade-header {
  padding: 32px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(163,187,211,0.1);
}
.propose-trade-partners .trade-title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  user-select: none;
}
.propose-trade-partners .footer-title {
  font-size: 16px;
  line-height: 18px;
  color: #eef2f7;
  font-family: 'Inter';
  font-weight: 600;
  user-select: none;
}
.propose-trade-partners .trade-description {
  font-size: 14px;
  color: #eef2f7;
  line-height: 18px;
  font-family: 'Inter';
}
.propose-trade-partners .propose-trade-footer {
  position: relative;
  padding: 16px 32px;
  background-color: #2d3649;
  box-sizing: border-box;
  z-index: 20;
}
.propose-trade-partners .propose-trade-footer .footer-shadow {
  height: 32px;
  position: absolute;
  background: linear-gradient(rgba(36,45,64,0), #242d40);
  z-index: 20;
  top: -32px;
  left: 0;
  right: 0;
  width: 100%;
}
.propose-trade-partners .propose-trade-footer .next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  color: #022047;
  padding: 16px 32px;
  border-radius: 32px;
  cursor: pointer;
  font-weight: 600;
  width: 192px;
  height: 48px;
  font-family: 'Poppins';
  line-height: 14px;
  box-sizing: border-box;
}
.propose-trade-partners .propose-trade-footer .back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(216,226,237,0.1);
  color: #fff;
  padding: 16px 32px;
  border-radius: 32px;
  cursor: pointer;
  border: 1px solid #fff;
  font-weight: 600;
  width: 192px;
  height: 48px;
  box-sizing: border-box;
}
.review-trade-offer {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 600px;
  max-height: 70vh;
  width: 600px;
  max-width: 600px;
  min-width: 600px;
  box-sizing: border-box;
}
.review-trade-offer .review-trade-scroll {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 32px;
  padding-top: 16px;
  padding-bottom: 32px;
  padding-right: 32px;
  flex-direction: column;
}
.select-trade-partners {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  min-height: 600px;
  height: auto;
  max-height: 80vh;
  width: auto;
  max-width: 90vw;
  min-width: 700px;
  box-sizing: border-box;
  position: relative;
}
.select-trade-partners .row {
  display: flex;
  flex-direction: row;
}
.select-trade-partners .custom-checkbox {
  border-color: #7988a1;
  height: 16px;
  width: 16px;
  -webkit-flex: 0 0 16px;
  -ms-flex: 0 0 16px;
  flex: 0 0 16px;
  top: 0px;
  border-radius: 4px;
}
.select-trade-partners .custom-checkbox.checked {
  background: #00ceb8;
  border-color: #00ceb8;
}
.select-trade-partners .custom-checkbox.checked .checkmark {
  color: #fff;
}
.select-trade-partners .custom-checkbox .checkmark::before {
  font-size: 16px;
}
.select-trade-partners .checkbox-label {
  color: #fff;
  font-size: 12px;
  margin-left: 8px;
  font-family: 'Inter';
  white-space: nowrap;
}
.select-trade-partners .trade-partners-center {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 503px;
  height: 90%;
}
.select-trade-partners .trade-partners-container {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.select-trade-partners .partner-item-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
  max-width: 112px;
  margin-right: 2px;
}
.select-trade-partners .scrolled-header {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  align-items: center;
  justify-content: center;
  width: 112px;
  position: absolute;
  left: 0px;
  z-index: 99;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #2d3649;
  color: #fff;
  -webkit-box-shadow: 0px 0px 1px 0px #000;
  box-shadow: 0px 0px 1px 0px #000;
  cursor: pointer;
}
.select-trade-partners .scrolled-header.selected {
  background-color: #00ceb8;
  color: #022047;
}
.select-trade-partners .scrolled-header .scrolled-header-text {
  font-family: 'Inter';
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  max-width: 80px;
  line-height: 16px;
  user-select: none;
}
.select-trade-partners .trade-partners-scroll {
  padding-left: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 32px;
}
.select-trade-partners .scroll-button-right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  right: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.select-trade-partners .scroll-button-left {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  background-color: rgba(216,226,237,0.5);
  left: 10px;
  top: 300px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
}
.trade-block-list-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.trade-block-list {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-top: 24px;
}
.empty-container {
  display: flex;
  flex-direction: column;
  padding-top: 66px;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.empty-text {
  font-size: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
}
.trade-block-title {
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins';
  line-height: 24px;
}
.trade-block-pick {
  display: flex;
  flex-direction: column;
  height: 64px;
  width: 23%;
  box-sizing: border-box;
  background-color: rgba(58,70,91,0.5);
  border-radius: 8px;
  padding: 4px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 104px;
  min-width: 104px;
}
.trade-block-pick:hover {
  background-color: #3a465b;
}
.trade-block-pick.isSmall {
  width: 45%;
}
.trade-block-pick .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-block-pick .heart-container {
  position: absolute;
  top: 4px;
  right: 4px;
}
.trade-block-pick .draft-pick-content {
  display: flex;
  position: relative;
  flex-direction: row;
}
.trade-block-pick .draft-pick-content .text {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter';
  line-height: 14px;
  color: #fff;
}
.trade-block-pick .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border: 1px solid transparent;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.trade-block-pick .footer.isTrade {
  border: 1px solid #fff;
}
.trade-block-pick .footer .owner {
  font-size: 10px;
  color: #fff;
  font-family: 'Inter';
  line-height: 12px;
  font-weight: normal;
}
.trade-block-pick .footer .owner.isTrade {
  color: #022047;
  font-weight: 600;
  border: 1px solid #fff;
  font-size: 9px;
  line-height: 10px;
}
.trade-block-player {
  display: flex;
  flex-direction: column;
  height: 64px;
  width: 23%;
  box-sizing: border-box;
  background-color: rgba(58,70,91,0.5);
  border-radius: 8px;
  padding: 4px 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  max-width: 104px;
  min-width: 104px;
  overflow: hidden;
}
.trade-block-player:hover {
  background-color: #3a465b;
}
.trade-block-player.isSmall {
  width: 45%;
}
.trade-block-player .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-block-player .pos-text {
  font-size: 10px;
  color: #eef2f7;
  font-weight: 600;
  font-family: 'Inter';
  line-height: 12px;
}
.trade-block-player .circle-separator {
  margin: 0 4px;
  height: 4px;
  width: 4px;
  border-radius: 100%;
  background-color: #d8e2ed;
}
.trade-block-player .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  position: relative;
}
.trade-block-player .avatar-container .heart-container {
  position: absolute;
  top: -3px;
  right: -5px;
}
.trade-block-player .player-name {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-family: 'Inter';
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.trade-block-player .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 16px;
  border: 1px solid transparent;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.trade-block-player .footer.isTrade {
  border: 1px solid #fff;
}
.trade-block-player .owner {
  font-size: 10px;
  color: #fff;
  font-family: 'Inter';
  line-height: 12px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-block-player .owner.isTrade {
  color: #022047;
  font-weight: 600;
  border: 1px solid #fff;
  font-size: 9px;
  line-height: 10px;
}
.trade-center-asset-select-list {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 16px 4px;
  box-sizing: border-box;
  width: 148px;
  min-width: 148;
  align-items: center;
  margin-left: 1px;
  user-select: none;
}
.trade-center-asset-select-list .row {
  display: flex;
  align-items: center;
}
.trade-center-asset-select-list .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 48px;
  background-image: linear-gradient(#3a465b, #a3bbd3);
  overflow: hidden;
  position: relative;
}
.trade-center-asset-select-list .display-name {
  color: #eef2f7;
  font-size: 14px;
  margin-top: 4px;
  line-height: 16px;
  font-weight: 600;
  font-family: 'Inter';
  margin-bottom: 4px;
}
.trade-center-asset-select-list .trade-box-player-container {
  display: flex;
  width: 100%;
}
.trade-center-asset-select-list .faab-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  border-radius: 28px;
  height: 56px;
  max-height: 56px;
  padding: 16px 8px;
  background-color: #515e78;
  margin: 4px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.trade-center-asset-select-list .faab-container.is-own {
  border: 1px solid #fff;
}
.trade-center-asset-select-list .faab-container .faab-text {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: medium;
  margin-left: 8px;
  font-family: 'Poppins';
  letter-spacing: 1px;
}
.trade-center-asset-select-list .faab-inside {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}
.trade-center-asset-select-list .faab-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  width: 240px;
  background-color: #3a465b;
  box-sizing: border-box;
  top: -60px;
  border-radius: 16px;
  padding: 16px;
  cursor: auto;
  z-index: 10;
  left: 50px;
  margin-bottom: 40px;
}
.trade-center-asset-select-list .faab-menu .close-container {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  cursor: pointer;
}
.trade-center-asset-select-list .faab-menu .close-container:hover {
  background-color: #202635;
}
.trade-center-asset-select-list .faab-menu .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins';
}
.trade-center-asset-select-list .faab-menu .subtitle {
  font-size: 16px;
  color: #a3bdd3;
  font-family: 'Inter';
  line-height: 19px;
}
.trade-center-asset-select-list .faab-menu .input-faab-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  background-color: #2d3649;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 28px;
  margin-top: 16px;
  height: 48px;
  box-sizing: border-box;
}
.trade-center-asset-select-list .faab-menu .input-faab-container .clear-input {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.trade-center-asset-select-list .faab-menu .input-faab-container .dollar {
  color: #d8e2ed;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  font-family: 'Poppins';
}
.trade-center-asset-select-list .faab-menu .input-faab-container .input-faab {
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  outline: none;
  line-height: 20px;
  padding-left: 4px;
  flex-grow: 1;
  max-width: 100px;
}
.trade-center-asset-select-list .faab-menu .add-button {
  margin-top: 8px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: #00ceb8;
  align-items: center;
  justify-content: center;
  color: #022047;
  cursor: pointer;
  min-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.trade-center-asset-select-list .faab-menu .add-button.disabled {
  opacity: 0.5;
}
.trade-center-asset-select-list .faab-menu .cancel-button {
  margin-top: 8px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: rgba(216,226,237,0.1);
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  min-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.trade-center-asset-select-list .dropdown-container {
  position: relative;
  margin-top: 16px;
  width: 100%;
  height: 60px;
}
.trade-center-draft-pick-box {
  position: relative;
  margin-top: 4px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  min-height: 64px;
  height: 64px;
  max-height: 64px;
  margin-bottom: 4px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  user-select: none;
  min-width: 100%;
  background-color: #515e78;
}
.trade-center-draft-pick-box.is-own {
  background-color: transparent;
  border: 1px solid #515e78;
}
.trade-center-draft-pick-box .top-corner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 4px;
}
.trade-center-draft-pick-box .draft-pick-content {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.trade-center-draft-pick-box .draft-pick-content .text {
  font-size: 12px;
  color: #fff;
  max-width: 50px;
}
.trade-center-draft-pick-box .draft-pick-content .interest-button {
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.trade-center-draft-pick-box .draft-pick-content .num-interested {
  font-size: 9px;
  color: #022047;
  position: absolute;
  right: 9px;
}
.trade-center-draft-pick-box .draft-pick-content .prev-owner {
  font-size: 10px;
  color: #a3bbd3;
}
.trade-center-draft-pick-box .tradeblock-button {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-height: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  background-color: transparent;
  color: #d8e2ed;
  border: 1px solid #d8e2ed;
  font-family: 'Poppins', sans-serif;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
}
.trade-center-draft-pick-box .tradeblock-button .trade-block-text {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  padding-left: 8px;
}
.trade-center-draft-pick-box .tradeblock-button.is-owner {
  cursor: pointer;
}
.trade-center-draft-pick-box .tradeblock-button.active {
  background-color: #fff;
  border-top: 1px solid transparent;
  color: #022047;
}
.trade-center-draft-picks {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.draft-picks-dropdown-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  border-radius: 28px;
  height: 56px;
  max-height: 56px;
  padding: 16px 8px;
  background-color: #515e78;
  margin: 4px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  border: 1px solid transparent;
}
.draft-picks-dropdown-container.is-own {
  border: 1px solid #fff;
}
.draft-pick-text {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: medium;
  margin-left: 8px;
  font-family: 'Poppins';
  letter-spacing: 1px;
}
.draft-pick-menu {
  display: flex;
  flex-direction: column;
  background-color: #3a465b;
  padding: 24px 20px;
  min-height: 300px;
  width: 220px;
  border-radius: 16px;
  position: absolute;
  top: 4px;
  z-index: 10;
  cursor: auto;
  justify-content: space-between;
}
.draft-pick-menu .close-container {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  cursor: pointer;
}
.draft-pick-menu .close-container:hover {
  background-color: #202635;
}
.draft-pick-menu .add-button {
  margin-top: 8px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: #00ceb8;
  align-items: center;
  justify-content: center;
  color: #022047;
  cursor: pointer;
  min-height: 48px;
  max-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.draft-pick-menu .add-button.disabled {
  opacity: 0.5;
}
.draft-pick-menu .cancel-button {
  margin-top: 8px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border-radius: 24px;
  background-color: rgba(216,226,237,0.1);
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  min-height: 48px;
  max-height: 48px;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 600;
}
.draft-pick-menu .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins';
}
.draft-pick-menu .subtitle {
  font-size: 16px;
  color: #a3bdd3;
  font-family: 'Inter';
  line-height: 19px;
}
.dropdown-container {
  position: relative;
  margin-top: 16px;
  width: 100%;
  min-height: 60px;
  z-index: 10;
}
.dropdown-container .first .app-dropdown {
  z-index: 30;
}
.dropdown-container .app-dropdown {
  min-width: 100%;
  position: absolute;
}
.dropdown-container .app-dropdown:hover .selected-value {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown-container .selected-value {
  color: #a3bbd3;
  background-color: #2d3649;
  padding: 18px 28px;
  border-radius: 28px;
}
.dropdown-container .dropdown-items-container .dropdown-items .app-dropdown-item {
  background-color: #2d3649;
}
.trade-center-modal {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 600px;
  width: 900px;
  background-color: #2d3649;
  flex-direction: row;
  position: relative;
  padding-top: 36px;
}
.trade-center-modal .right-empty {
  display: flex;
  margin-top: 140px;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.trade-center-modal .right-empty .text {
  color: #a3bbd3;
  font-size: 12px;
  margin-top: 16px;
  font-weight: 'Inter';
}
.trade-center-modal .col {
  display: flex;
  flex-direction: column;
}
.trade-center-modal .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-center-modal .left {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  padding: 24px 0;
  box-sizing: border-box;
  overflow: hidden;
}
.trade-center-modal .left .trade-list-scroll {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.trade-center-modal .left .trade-list-scroll .trade-list-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
  padding: 0 24px;
}
.trade-center-modal .left .trade-tab-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.trade-center-modal .left .trade-tab-container .trade-tab {
  color: #d8e2ed;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-family: 'Poppins';
}
.trade-center-modal .left .trade-tab-container .trade-tab.selected {
  color: #00ceb8;
}
.trade-center-modal .left .selected-line {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 4px;
  background-color: rgba(58,70,91,0.5);
  width: 100%;
  border-radius: 4px;
  margin-top: 24px;
  overflow: hidden;
}
.trade-center-modal .left .selected-line .line {
  height: 5px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #333e52;
  border-radius: 4px;
  overflow: hidden;
}
.trade-center-modal .left .selected-line .line.selected {
  background-color: #00ceb8;
}
.trade-center-modal .right {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-left: 1px solid rgba(163,187,211,0.1);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.trade-center-modal .position-pill {
  display: flex;
  z-index: 10;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
}
.trade-center-modal .position-pill .horizontal-pill-selector {
  max-width: 360px;
}
.trade-center-player-box {
  position: relative;
  margin-top: 4px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  min-height: 64px;
  height: 64px;
  max-height: 64px;
  margin-bottom: 4px;
  border-width: 1px;
  border-style: solid;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  user-select: none;
  width: 100%;
  min-width: 100%;
}
.trade-center-player-box.selected {
  background-color: rbga(0, 0, 0, 0.5);
}
.trade-center-player-box.clickable {
  cursor: pointer;
  min-height: 68px;
  height: 68px;
  max-height: 68px;
  min-width: 140px;
}
.trade-center-player-box .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-center-player-box .spaced {
  justify-content: space-between;
}
.trade-center-player-box .player-info {
  color: #d8e2ed;
  font-size: 10px;
  font-weight: 400;
  font-family: 'Inter';
  line-height: 12px;
  margin-right: 4px;
}
.trade-center-player-box .player-info.selected {
  opacity: 0.2;
}
.trade-center-player-box .info-like-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 18px;
}
.trade-center-player-box .top-corner-container {
  position: absolute;
  top: 4px;
  right: 4px;
}
.trade-center-player-box .heart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  position: relative;
  margin-left: 4px;
}
.trade-center-player-box .num-interested {
  position: absolute;
  z-index: 1;
  color: #022047;
  font-size: 7px;
  font-weight: 600;
  cursor: pointer;
}
.trade-center-player-box .player-name {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  font-family: 'Inter';
  line-height: 20px;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-center-player-box .player-name.small {
  font-size: 12px;
  max-width: 80px;
}
.trade-center-player-box .player-name:hover {
  text-decoration: underline;
}
.trade-center-player-box .player-name.selected {
  opacity: 0.2;
}
.trade-center-player-box .tradeblock-button {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-height: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  background-color: transparent;
  color: #d8e2ed;
  border: 1px solid #d8e2ed;
  font-family: 'Poppins', sans-serif;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
}
.trade-center-player-box .tradeblock-button.selected {
  opacity: 0.2;
}
.trade-center-player-box .tradeblock-button .trade-block-text {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  padding-left: 8px;
}
.trade-center-player-box .tradeblock-button.is-owner {
  cursor: pointer;
}
.trade-center-player-box .tradeblock-button.active {
  background-color: #fff;
  border-top: 1px solid transparent;
  color: #022047;
}
.trade-center-player-box .selection-circle {
  height: 22px;
  width: 22px;
  background-color: transparent;
  border: 2px solid #d8e2ed;
  border-radius: 50%;
}
.trade-center-player-box .selection-circle.selected {
  background-color: #00ceb8;
}
.trade-center-player-box .player-menu {
  position: absolute;
  top: 20px;
  width: 235px;
  padding: 8px;
  background-color: #202635;
  min-height: 112px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
.trade-center-player-box .player-menu .send-to {
  font-size: 10px;
  font-weight: bold;
  color: #a3bbd3;
  margin-top: 8px;
  line-height: 18px;
  font-family: 'Inter';
}
.trade-center-player-box .player-col {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.trade-center-player-box .user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 8px;
}
.trade-center-player-box .user-item:hover {
  background-color: rgba(58,70,91,0.5);
}
.trade-center-player-box .user-item .display-name {
  font-size: 14px;
  color: #fff;
  margin-left: 8px;
  font-family: 'Inter';
  line-height: 16px;
  margin-bottom: 2px;
}
.trade-center-player-box .going-to-bottom {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-height: 18px;
  height: 18px;
  min-height: 18px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row-reverse;
  align-items: center;
  color: #fff;
  border: 1px solid #4a5870;
  font-family: 'Poppins', sans-serif;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
  background-color: #4a5870;
}
.trade-center-player-box .going-to-bottom .going-to-text {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  padding-right: 8px;
  opacity: 0.3;
}
.trade-center-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.trade-center-wrapper .received {
  font-size: 9px;
  line-height: 10px;
  color: #a3bbd3;
  font-family: 'Poppins';
}
.trade-center-wrapper .accepted {
  font-size: 9px;
  color: #00ceb8;
  font-family: 'Poppins';
}
.trade-center-wrapper .rejected {
  font-size: 9px;
  color: #ff2b6d;
  font-family: 'Poppins';
}
.trade-center-wrapper .row {
  display: flex;
  align-items: center;
}
.trade-center-wrapper .spaced {
  justify-content: space-between;
}
.trade-center-wrapper .countdown {
  font-size: 12px;
  color: #d8e2ed;
  font-family: 'Poppins';
}
.trade-center-wrapper .trade-center-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.trade-center-wrapper .trade-center-container.has-footer {
  padding-bottom: 80px;
}
.trade-center-wrapper .trade-center-container .trade-header {
  display: flex;
  flex-direction: column;
}
.trade-center-wrapper .trade-center-container .trade-header .title {
  font-size: 18px;
  color: #fff;
  font-family: 'Poppins';
  line-height: 24px;
}
.trade-center-wrapper .trade-center-container .trade-header .pending-message {
  font-size: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
  line-height: 16px;
}
.trade-center-wrapper .trade-center-container .summary-wrapper {
  display: flex;
  margin-top: 16px;
  flex-direction: column;
}
.trade-center-wrapper .trade-action-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  padding: 24px;
  box-sizing: border-box;
  background-color: #2d3649;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-top: 1px solid #3a465b;
}
.trade-center-wrapper .trade-action-footer .trade-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 600;
  box-sizing: border-box;
  font-family: 'Poppins';
  max-width: 200px;
}
.trade-center-wrapper .trade-action-footer .gray {
  background-color: rgba(58,70,91,0.5);
  color: #fff;
}
.trade-center-wrapper .trade-action-footer .green {
  background-color: #00ceb8;
  color: #022047;
}
.trade-center-wrapper .trade-action-footer .rounded {
  border-radius: 24px;
}
.trade-center-wrapper .trade-action-footer .left {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.trade-center-wrapper .trade-action-footer .right {
  margin-left: 2px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.trade-interest-modal {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  height: 400px;
  width: 400px;
  background-color: #2d3649;
  padding: 24px;
  box-sizing: border-box;
}
.trade-interest-modal .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-interest-modal .asset-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  flex-direction: column;
  overflow: hidden;
}
.trade-interest-modal .player-meta {
  margin-left: 16px;
}
.trade-interest-modal .player-meta .player-name {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
.trade-interest-modal .player-meta .player-pos {
  font-size: 12px;
  color: #a3bbd3;
  margin-top: 4px;
}
.trade-interest-modal .users {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.trade-interest-modal .users .title {
  font-size: 14px;
  color: #a3bbd3;
}
.trade-interest-modal .user-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}
.trade-interest-modal .user-container .username {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-left: 16px;
}
.trade-interest-modal .pick-text {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.trade-list-item-dm {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  margin-top: 8px;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgba(58,70,91,0.2);
  position: relative;
  max-width: 350px;
  margin-top: 0px;
}
.trade-list-item-dm:hover {
  background-color: rgba(58,70,91,0.5);
}
.trade-list-item-dm .row {
  display: flex;
  align-items: center;
}
.trade-list-item-dm .assets-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.trade-list-item-dm .username {
  font-size: 14px;
  line-height: 16px;
  font-family: 'Poppins';
  color: #fff;
  font-weight: 600;
}
.trade-list-item-dm .asset-item {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin: 8px 0;
}
.trade-list-item-dm .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  position: relative;
}
.trade-list-item-dm .pick {
  color: #fff;
  font-weight: 600;
  font-family: 'Poppins';
  font-size: 10px;
}
.trade-list-item-dm .meta {
  margin-left: 8px;
  margin-bottom: 8px;
}
.trade-list-item-dm .meta .meta-1 {
  font-size: 12px;
  line-height: 14px;
  font-family: 'Inter';
  color: #fff;
  font-weight: 500;
}
.trade-list-item-dm .meta .meta-2 {
  font-size: 10px;
  line-height: 12px;
  font-family: 'Inter';
  color: #d8e2ed;
  font-weight: 500;
}
.trade-list-item-dm .empty {
  color: #fff;
  font-family: 'Inter';
  font-size: 12px;
  margin: 8px 0;
}
.trade-list-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 156px;
  max-height: 156px;
  flex-direction: column;
  margin-top: 8px;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: rgba(58,70,91,0.2);
  position: relative;
}
.trade-list-item.is-chat {
  max-height: 220px;
  height: 220px;
  width: 300px;
  max-width: 300px;
  margin-top: 0px;
}
.trade-list-item.selected {
  background-color: rgba(58,70,91,0.7);
}
.trade-list-item:hover {
  background-color: rgba(58,70,91,0.5);
}
.trade-list-item:hover.selected {
  background-color: rgba(58,70,91,0.9);
}
.trade-list-item .selected-indicator {
  height: 32px;
  background-color: #00ceb8;
  width: 6px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  position: absolute;
  left: -24px;
  top: 40%;
}
.trade-list-item .row {
  display: flex;
  align-items: center;
}
.trade-list-item .spaced {
  justify-content: space-between;
}
.trade-list-item .countdown {
  color: #d8e2ed;
  font-size: 9px;
  font-weight: 600;
  font-family: 'Poppins';
  line-height: 10px;
}
.trade-list-item .header-text {
  font-size: 9px;
  color: #d8e2ed;
  font-size: 600;
  margin-left: 4px;
  font-family: 'Poppins';
  line-height: 10px;
}
.trade-list-item .status-wrapper {
  position: absolute;
  top: 16px;
  right: 0px;
  color: #d8e2ed;
}
.trade-list-item .triangle-bottomright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 17px 10px;
  border-color: transparent transparent rgba(58,70,91,0.5) transparent;
}
.trade-list-item .triangle-bottomright.complete {
  border-color: transparent transparent #00ceb8 transparent;
}
.trade-list-item .triangle-bottomright.small {
  border-width: 0 0 20px 14px;
}
.trade-list-item .status {
  display: flex;
  padding: 4px 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(58,70,91,0.5);
  font-size: 9px;
  font-weight: 600;
  font-family: 'Poppins';
}
.trade-list-item .status.complete {
  background-color: #00ceb8;
  color: #022047;
}
.trade-list-item .timestamp {
  color: #d8e2ed;
  font-size: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding-right: 8px;
  font-family: 'Poppins';
}
.trade-list-item .users-meta {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}
.trade-list-item .users-meta .users-name {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  font-family: 'Inter';
}
.trade-list-item .users-meta .way-trade {
  font-size: 14px;
  margin-top: 2px;
  color: #d8e2ed;
  font-family: 'Inter';
}
.trade-list-item .assets-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}
.trade-list-item .assets-container .left-assets {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.trade-list-item .assets-container .trade-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 24px;
  background-color: #71809c;
}
.trade-list-item .assets-container .right-assets {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.trade-list-item .assets-container .player-asset {
  display: flex;
  flex-direction: column;
  width: 50px;
  justify-content: center;
  align-items: center;
}
.trade-list-item .assets-container .asset-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  flex-direction: column;
  position: relative;
}
.trade-list-item .assets-container .asset-circle .avatar-circle {
  height: 12px;
  width: 12px;
  position: absolute;
  bottom: 0;
  right: -4px;
}
.trade-list-item .assets-container .asset-text {
  font-size: 9px;
  color: #fff;
  font-family: 'Inter';
}
.trade-list-item .assets-container .player-name {
  font-size: 9px;
  color: #fff;
  max-width: 45px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  line-height: 10px;
  font-family: 'Inter';
}
.trade-list-item .view-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
  border-radius: 28px;
  color: #022047;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: 600;
  background-color: #00ceb8;
  margin-top: 16px;
}
.trade-list-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  position: relative;
}
.trade-list-container .empty-trades {
  display: flex;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  padding-top: 48px;
}
.trade-list-container .empty-text {
  color: #a3bbd3;
  font-size: 12px;
  margin-top: 16px;
  font-weight: 'Inter';
}
.trade-list-container .propose-text {
  color: #00ceb8;
  font-size: 12px;
  margin-top: 16px;
  font-weight: 'Poppins';
  font-weight: 600;
  cursor: pointer;
}
.trade-list-container .more-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 20px;
  align-items: center;
  width: 100%;
  opacity: 0.8;
  margin: 24px 0;
}
.trade-list-container .more-container .line {
  display: flex;
  flex-grow: 1;
  height: 1px;
  background-color: rgba(96,111,140,0.7);
}
.trade-list-container .more-container .show-more {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
  cursor: pointer;
  font-family: 'Poppins';
}
.trade-partner-roster-item {
  display: flex;
  position: relative;
  flex-direction: column;
  border-radius: 16px;
  padding: 18px 4px;
  box-sizing: border-box;
  max-width: 112px;
  min-width: 112px;
  width: 112px;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}
.trade-partner-roster-item.selected {
  background-color: rgba(0,206,184,0.15);
}
.trade-partner-roster-item.is-owner {
  cursor: auto;
}
.trade-partner-roster-item .avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  border-radius: 48px;
  background-image: linear-gradient(to left top, #3a465b, #a3bbd3);
  overflow: hidden;
  position: relative;
}
.trade-partner-roster-item .avatar-container .selected-over {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(0,206,184,0.7);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.trade-partner-roster-item .avatar-container .selected-over .selected-text {
  font-size: 12px;
  color: #fff;
  font-family: 'Poppins';
  z-index: 30;
}
.trade-partner-roster-item .display-name {
  color: #eef2f7;
  font-size: 14px;
  margin-top: 4px;
  line-height: 16px;
  font-weight: 600;
  font-family: 'Inter';
  margin-bottom: 4px;
}
.trade-partner-roster-item .display-name.selected {
  color: #00ceb8;
}
.trade-partner-roster-item .faab-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  border-radius: 28px;
  height: 56px;
  max-height: 56px;
  padding: 16px 8px;
  background-color: #515e78;
  cursor: pointer;
  margin: 4px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.trade-partner-roster-item .faab-container.is-own {
  border: 1px solid #fff;
}
.trade-partner-roster-item .faab-container .faab-text {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  font-weight: medium;
  margin-left: 8px;
  font-family: 'Poppins';
  letter-spacing: 1px;
}
.trade-partner-roster-item .scrolled-header {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  align-items: center;
  justify-content: center;
  width: 112px;
  position: absolute;
  left: 0px;
  z-index: 99;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #2d3649 a;
  color: #fff;
  -webkit-box-shadow: 0px 0px 1px 0px #000;
  box-shadow: 0px 0px 1px 0px #000;
  cursor: pointer;
}
.trade-partner-roster-item .scrolled-header.selected {
  background-color: #00ceb8;
  color: #022047;
}
.trade-partner-roster-item .scrolled-header.isHover {
  background-color: #3a465b;
}
.trade-partner-roster-item .scrolled-header .scrolled-header-text {
  font-family: 'Inter';
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  max-width: 80px;
  line-height: 16px;
  user-select: none;
}
.trade-proposal-summary {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.trade-proposal-summary .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade-proposal-summary .title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Poppins';
}
.trade-proposal-summary .subtitle {
  color: #fff;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  margin-top: 8px;
}
.trade-proposal-summary .app-dropdown-container {
  position: absolute;
  z-index: 40;
  right: 0;
  top: 0;
  color: #fff !important;
}
.trade-proposal-summary .app-dropdown-container .app-dropdown {
  min-width: 140px;
  z-index: 40;
}
.trade-proposal-summary .app-dropdown-container .app-dropdown:hover .selected-value {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.trade-proposal-summary .app-dropdown-container .selected-value {
  color: #a3bbd3;
  background-color: rgba(58,70,91,0.5);
  padding: 18px 28px;
  border-radius: 28px;
}
.trade-proposal-summary .app-dropdown-container .dropdown-items-container .dropdown-items .app-dropdown-item {
  background-color: #333e52;
}
.trade-summary {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.trade-summary.has-footer {
  margin-bottom: 100px;
}
.trade-summary .asset-row {
  display: flex;
  margin-bottom: 8px;
}
.trade-summary .spaced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trade-summary .cancel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 40px;
  cursor: pointer;
  z-index: 10;
}
.trade-summary .cancel-container:hover {
  background-color: #202635;
}
.trade-summary .row {
  display: flex;
  align-items: center;
}
.trade-summary .spaced {
  justify-content: space-between;
}
.trade-summary .roster-trade-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.trade-summary .roster-trade-container .username {
  font-size: 14px;
  color: #fff;
  margin-left: 4px;
}
.trade-summary .roster-trade-container .accepted {
  font-size: 9px;
  color: #00ceb8;
  margin-left: 4px;
  font-family: 'Poppins';
}
.trade-summary .roster-trade-container .rejected {
  font-size: 9px;
  color: #ff2b6d;
  margin-left: 4px;
  font-family: 'Poppins';
}
.trade-summary .roster-trade-container .pending {
  font-size: 9px;
  color: #a3bbd3;
  margin-left: 4px;
}
.trade-summary .roster-trade-container .roster-trade-summary {
  margin-top: 8px;
  display: flex;
  padding: 16px;
  box-sizing: border-box;
  background-color: #3a465b;
  border-radius: 16px;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.trade-summary .roster-trade-container .roster-trade-summary .roster-trade-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(163,187,211,0.1);
  height: 10px;
  max-height: 10px;
  margin-top: 8px;
}
.trade-summary .roster-trade-container .roster-trade-summary .roster-trade-title .panel-title {
  color: #a3bbd3;
  font-size: 9px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 10px;
  font-family: 'Poppins';
}
.trade-summary .roster-trade-container .roster-trade-summary .divide-left {
  border-left: 1px solid rgba(255,255,255,0.3);
}
.trade-summary .roster-trade-container .roster-trade-summary .panel-container {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 8px;
  box-sizing: border-box;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .asset-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  max-height: 32px;
  max-width: 32px;
  border-radius: 32px;
  flex-direction: column;
  overflow: hidden;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .asset-circle .asset-text {
  color: #fff;
  font-size: 10px;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .meta {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .meta .meta-text-1 {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-family: 'Inter';
  font-weight: 600;
}
.trade-summary .roster-trade-container .roster-trade-summary .panel .meta .meta-text-2 {
  color: #d8e2ed;
  font-size: 10px;
  line-height: 12px;
  font-family: 'Inter';
}
.trade-summary .empty-container {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  align-items: center;
}
.trade-summary .empty-text {
  font-size: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
}
.transaction-player {
  display: flex;
  font-size: 12px;
  font-weight: bold;
}
.transaction-player .transaction {
  margin-right: 5px;
}
.transaction-player .player-name {
  margin-right: 3px;
}
.transaction-player .meta {
  font-size: 10px;
  color: #aaa;
}
.transaction-trade-item .roster-item {
  display: flex;
  padding: 15px;
  align-items: center;
}
.transaction-trade-item .roster-item .owner-container {
  -webkit-flex: 0 0 150px;
  -ms-flex: 0 0 150px;
  flex: 0 0 150px;
}
.transaction-trade-item .roster-item .owner-container .meta .name {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.transaction-trade-item .roster-item .players-container {
  font-size: 13px;
}
.transaction-trade-item .roster-item .players-container .FAAB-title {
  font-size: 12px;
  font-weight: bold;
  color: #888;
  padding-bottom: 5px;
}
.transaction-trade-item .roster-item .players-container .transaction-player-text {
  font-weight: 900;
  margin-bottom: 5px;
}
.transaction-trade-item .roster-item .players-container .transaction-player-text .from-text {
  color: #888;
  font-size: 12px;
  font-weight: 600;
}
.transaction-trade-item .roster-item .players-container .transaction-player-text .action-text {
  text-transform: uppercase;
  display: inline-block;
  width: 16px;
  font-size: 12px;
  font-weight: bold;
}
.transaction-trade-item .roster-item .players-container .transaction-player-text .action-text .fa-plus {
  color: #00ceb8;
}
.transaction-trade-item .roster-item .players-container .transaction-player-text .action-text .fa-minus {
  color: #ff2a6d;
}
.transaction-trade-item .roster-item .players-container .transaction-player-text .player-position {
  font-size: 10px;
  font-weight: bold;
  padding-left: 5px;
  color: #888;
}
.transaction-trade-item .action-status {
  font-size: 12px;
  margin-top: 10px;
  color: #999;
}
.transaction-trade-item .action-status i {
  padding-right: 5px;
}
.transaction-trade-item .action-status .fa-times {
  color: #ff2a6d;
}
.transaction-trade-item .action-status .fa-check {
  color: #00ceb8;
}
.transaction-trade-item .transaction-header {
  display: flex;
  background: #090d1c;
  align-items: center;
  padding: 15px;
}
.transaction-trade-item .transaction-header >.title {
  flex-grow: 1;
  font-size: 13px;
  font-weight: bold;
}
.transaction-trade-item .transaction-header >.timestamp {
  -webkit-flex: 0 0 100px;
  -ms-flex: 0 0 100px;
  flex: 0 0 100px;
  font-size: 11px;
  text-align: right;
  color: #555;
}
.transaction-trade-item .transaction-header >.timestamp .countdown {
  display: inline-block;
}
.transaction-trade-item .validation-message-block {
  border: none !important;
  border-radius: 5px;
}
.transaction-trade-item .trade-actions-container {
  padding: 10px 15px;
}
.transaction-trade-item .trade-actions-container .trade-actions .button {
  margin-right: 10px;
}
.transaction-trade-item .trade-actions-container .trade-actions .button button {
  background: #777 !important;
}
.transaction-trade-item .trade-actions-container .commish-msg {
  color: #999;
  font-size: 11px;
  margin-top: 5px;
}
.league-trophy-wrap {
  margin-top: 10px;
  width: 150px;
  height: 200px;
}
.league-trophy {
  position: relative;
  background-color: #eee;
  border-radius: 20px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.league-trophy .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.league-trophy .content .trophy-banner-wrap {
  height: 37px;
  position: relative;
}
.league-trophy .content .trophy-banner-wrap .trophy-banner {
  width: 125px;
  height: 37px;
}
.league-trophy .content .trophy-banner-wrap .trophy-banner-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #555;
}
.league-trophy .content .trophy-head-wrap {
  height: 78px;
}
.league-trophy .content .trophy-head-wrap .trophy-head {
  width: 110px;
  height: 78px;
}
.league-trophy .content .trophy-base-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.league-trophy .content .trophy-base-wrap .trophy-middle-wrap {
  position: relative;
  height: 28px;
}
.league-trophy .content .trophy-base-wrap .trophy-middle-wrap .trophy-middle {
  width: 110px;
  height: 28px;
}
.league-trophy .content .trophy-base-wrap .trophy-middle-wrap .trophy-middle-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.league-trophy .content .trophy-base-wrap .trophy-middle-wrap .trophy-middle-text .trophy-name {
  margin-top: 2px;
  font-size: 10px;
  font-weight: bold;
  color: #555;
  max-width: 50px;
  overflow: hidden;
  white-space: nowrap;
}
.league-trophy .content .trophy-base-wrap .trophy-middle-wrap .trophy-middle-text .trophy-record {
  font-size: 10px;
  color: #808080;
}
.league-trophy .content .trophy-base-wrap .trophy-bottom {
  width: 110px;
  height: 20px;
}
.view-team-panel {
  background: #283245;
  min-width: 500px !important;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
}
.view-team-panel .channel-settings-body {
  height: 60vh;
  overflow: auto;
  padding: 0 15px;
}
.container {
  background: #fff;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
  max-height: 80vh;
  overflow: auto;
  background: #283245;
  color: #fff;
  padding: 12px;
}
.container .title {
  font-size: 16px;
  font-weight: bold;
}
.container .content-container {
  margin-top: 12px;
}
.container .content-container .input-unit {
  margin-right: 4px;
}
.container .content-container input {
  width: 64px;
}
.container .content-container button {
  margin-left: 8px;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}
.container .content-container button:hover,
.container .content-container button:active {
  opacity: 0.75;
}
.container .content-container button:disabled {
  opacity: 0.5;
}
.container .content-container button.button-save {
  color: #58a7ff;
}
.container .content-container .waiver-budget {
  font-size: 12px;
  margin-top: 8px;
  color: #a3bbd3;
}
.container .content-container .errors-container {
  margin-top: 8px;
}
.waiver-clear-countdown {
  padding: 12px 20px;
  border-radius: 5px;
  background: #ffd900;
  color: #9e6d0b;
  display: flex;
  font-size: 13px;
}
.waiver-clear-countdown .countdown-wrapper {
  flex-grow: 1;
  text-align: right;
  font-weight: bold;
}
.waivers-panel {
  background: #fff;
  min-width: 560px !important;
  box-shadow: 1px 1px 15px #18202f;
  border-radius: 10px;
  max-height: 80vh;
  overflow: auto;
  background: #283245;
  color: #fff;
}
.waivers-panel .no-trades {
  padding: 40px 10px 80px;
  font-size: 14px;
  color: #999;
}
.waivers-panel .transaction-trade-item .transaction-header {
  background-color: #18202f;
}
.waivers-panel .transaction-trade-item .transaction-header .timestamp {
  color: #a3bbd3;
}
.waivers-panel .fa-bars {
  padding-right: 20px;
  font-size: 20px;
  color: #ccc;
  align-self: center;
}
.waivers-panel .trans-item {
  padding: 15px 0;
  display: flex;
  border-bottom: 1px solid #3a465b;
  cursor: move;
}
.waivers-panel .trans-item .transactions {
  width: 290px;
  -webkit-flex: 0 0 290px;
  -ms-flex: 0 0 290px;
  flex: 0 0 290px;
}
.waivers-panel .trans-item .trans-item-wrapper {
  flex-grow: 1;
}
.waivers-panel .trans-item .action-btns {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 12px;
  color: #58a7ff;
  cursor: pointer;
  font-size: 13px;
  align-self: center;
}
.waivers-panel .trans-item .action-btns i {
  padding-right: 4px;
}
.waivers-panel .channel-settings-header {
  -webkit-flex: 0 0 46px;
  -ms-flex: 0 0 46px;
  flex: 0 0 46px;
}
.waivers-panel .channel-settings-header .description {
  line-height: 1.3;
}
.waivers-panel .waiver-channel-settings-body {
  padding: 0 15px;
}
.waivers-panel .default-text {
  font-size: 14px;
  padding: 15px 10px;
}
.waivers-panel .sortable-section.divider {
  border-top: 5px solid #3a465b;
}
.sortable-list-waiver-item {
  z-index: 999999;
}
.sortable-list-waiver-item .action-btns,
.sortable-list-waiver-item .fa-bars {
  display: none;
}
.week-selector {
  display: flex;
  font-size: 11px;
  color: #a3bbd3;
  padding-bottom: 5px;
  border-bottom: 1px solid #efefef;
  padding-right: 3px;
  align-items: center;
}
.week-selector .label {
  font-weight: 900;
  color: #a3bbd3;
  flex-grow: 1;
}
.week-selector .selected {
  color: #a3bbd3;
  font-weight: 900;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #a3bbd3;
  font-size: 10px;
}
.week-selector .week {
  margin-left: 10px;
  cursor: pointer;
  border-radius: 50%;
}
.week-selector .week:hover {
  opacity: 0.8;
}
.week-selector .week:first-child {
  cursor: pointer;
}
.lol-league-matchup-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.lol-league-standings-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(28,33,45,0.3);
  padding: 26px 16px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 24px;
  box-sizing: border-box;
}
.lol-league-standings-container .row {
  display: flex;
  flex-direction: row;
}
.lol-league-standings-container .row.space-between {
  justify-content: space-between;
}
.lol-league-standings-container .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lol-league-standings-container .title {
  font-size: 18px;
  line-height: 24px;
  color: #b9c4d4;
  font-family: 'Poppins';
}
.lol-league-standings-container .table-title {
  color: rgba(124,139,164,0.7);
  font-family: 'Poppins';
  letter-spacing: 0.25px;
  font-size: 9px;
  line-height: 10px;
}
.lol-league-standings-container .standing-card {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  align-items: center;
  min-height: 72px;
}
.lol-league-standings-container .standing-card .rank {
  font-size: 18px;
  color: #a3bbd3;
  font-family: 'Poppins';
}
.lol-league-standings-container .standing-card .username {
  font-size: 12px;
  color: #fff;
  line-height: 18px;
  font-family: 'Poppins';
  width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lol-league-standings-container .standing-card .record {
  color: #d8e2ed;
  font-size: 10px;
  line-height: 12px;
  font-family: 'Inter';
}
.lol-league-standings-container .standing-card .regular-text {
  font-size: 12px;
  font-family: 'Inter';
  line-height: 16px;
  color: #a3bbd3;
}
.lol-matchup-card-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.team-name {
  color: #d8e2ed;
  font-size: 16px;
  line-height: 18px;
  font-family: 'Inter';
  font-weight: 500;
  margin-bottom: 8px;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.row.reverse {
  flex-direction: row-reverse;
}
.row.space-between {
  justify-content: space-between;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lol-matchup-card {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #3a465b;
  border-radius: 8px;
  font-family: 'Inter';
  padding-bottom: 8px;
}
.lol-matchup-card.left {
  border-top-left-radius: 32px;
  margin-right: 4px;
  padding-right: 12px;
}
.lol-matchup-card.right {
  border-top-right-radius: 32px;
  margin-left: 4px;
  padding-left: 12px;
}
.lol-matchup-card.winner {
  background: linear-gradient(rgba(0,186,255,0.5), rgba(0,186,255,0.1));
}
.lol-matchup-card .adjusted-points {
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
}
.lol-matchup-card .base-points {
  color: #d8e2ed;
  margin-top: 4px;
  font-size: 10px;
  line-height: 12px;
}
.lol-matchup-card .champion-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 32px;
  max-width: 32px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin-left: 0px;
}
.lol-matchup-card .champion-container.blue {
  background-color: #00baff;
}
.lol-matchup-card .champion-container.red {
  background-color: #ff6086;
}
.lol-matchup-report-row-container {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 16px;
  position: relative;
}
.lol-matchup-report-row-container .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  background-color: #2d3649;
  color: #a3bbd3;
  font-size: 11px;
  position: absolute;
  top: 32px;
  border-radius: 24px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}
.lol-weekly-report-message {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  max-width: 300px;
}
.lol-weekly-report-message .row {
  display: flex;
  align-items: center;
}
.lol-weekly-report-message .title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  height: 24px;
  width: 200px;
  border-radius: 24px;
  background-color: #2e3748;
  color: #fff;
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: medium;
  box-shadow: 0 1px 2px 0 #000;
}
.lol-weekly-report-message .container-gradient {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #00baff, #ff6086);
  border-radius: 8px;
  box-sizing: border-box;
  height: 133px;
  padding: 1px;
  width: 100%;
}
.lol-weekly-report-message .container-gradient .container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #2e3748;
  height: 100%;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.lol-weekly-report-message .container-gradient .container .top-players {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player .number {
  font-size: 16px;
  color: #fff;
  font-family: 'Poppins';
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player .lol-name {
  font-size: 12px;
  color: #fff;
  font-family: 'Poppins';
  font-weight: medium;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.lol-weekly-report-message .container-gradient .container .top-players .lol-player .points {
  font-size: 10px;
  color: #fff;
  font-family: 'Inter';
  font-weight: lighter;
}
.lol-weekly-report-modal {
  height: 600px;
  width: 800px;
}
.lol-weekly-report-modal .lol-weekly-report-scroll {
  padding: 32px;
}
.lol-weekly-report-modal .row {
  display: flex;
  align-items: center;
}
.lol-weekly-report-modal .circle {
  height: 4px;
  width: 4px;
  border-radius: 4px;
  margin-left: 4px;
  margin-right: 4px;
  background-color: #fff;
}
.lol-weekly-report-modal .section-title {
  font-size: 18px;
  color: #b9c4d4;
  font-family: 'Poppins';
  line-height: 24px;
}
.lol-weekly-report-modal .other-awards {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lol-weekly-report-modal .other-awards .award-card {
  display: flex;
  flex-direction: column;
  width: 172px;
  border-radius: 16px;
  background-color: #2d3649;
  box-shadow: 0 1px 2px 0 #000;
  margin-top: 14px;
  overflow: hidden;
}
.lol-weekly-report-modal .other-awards .award-card .top-section {
  height: 52px;
  padding-top: 10px;
  padding-left: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.lol-weekly-report-modal .other-awards .award-card .top-section.blue {
  background: linear-gradient(rgba(0,174,238,0.9), rgba(0,186,255,0.1));
}
.lol-weekly-report-modal .other-awards .award-card .top-section.red {
  background: linear-gradient(rgba(255,43,109,0.5), rgba(255,43,109,0.1));
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section {
  display: flex;
  flex-direction: column;
  padding: 8px;
  box-sizing: border-box;
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .tag {
  font-size: 9px;
  color: #eef2f7;
  line-height: 12px;
  font-family: "Inter";
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .username {
  font-size: 16px;
  line-height: 18px;
  font-family: 'Inter';
  color: #fff;
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .points {
  font-size: 14px;
  color: #a3bbd3;
  line-height: 18px;
  font-family: 'Inter';
}
.lol-weekly-report-modal .other-awards .award-card .bottom-section .vs {
  font-size: 10px;
  line-height: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
  text-align: right;
}
.lol-weekly-report-modal .league-awards-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  min-height: 84px;
  border-radius: 16px;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 14px;
  justify-content: space-between;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card.best {
  background: linear-gradient(rgba(0,174,238,0.9), rgba(0,186,255,0.1));
  margin-right: 8px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card.worst {
  background: linear-gradient(rgba(255,43,109,0.5), rgba(255,43,109,0.1));
  margin-left: 8px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .title {
  color: #eef2f7;
  font-size: 12px;
  font-family: 'Inter';
  line-height: 16px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .username {
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  font-family: 'Poppins';
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .high-points {
  font-size: 14px;
  font-family: 'Inter';
  color: #fff;
  line-height: 18px;
}
.lol-weekly-report-modal .league-awards-container .best-worst-container .large-card .low-points {
  font-size: 12px;
  font-family: 'Inter';
  color: #b9c4d4;
  line-height: 16px;
}
.lol-weekly-report-modal .divider {
  height: 244px;
  width: 1px;
  background-color: rgba(106,119,144,0.7);
  margin: 0 24px;
}
.lol-weekly-report-modal .col {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.lol-weekly-report-modal .best-worst-picks {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.lol-weekly-report-modal .best-worst-picks .champion-name {
  font-size: 14px;
  font-family: 'Inter';
  font-weight: 500;
  line-height: 18px;
  color: #b9c4d4;
}
.lol-weekly-report-modal .best-worst-picks .champion-owner {
  font-family: 'Inter';
  font-size: 10px;
  line-height: 12px;
  color: #eef2f7;
}
.lol-weekly-report-modal .best-worst-picks .pick-card {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  background-color: #3a465b;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 64px;
  margin-top: 10px;
  align-items: center;
  justify-content: space-between;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .player-username {
  font-size: 16px;
  color: #d8e2ed;
  line-height: 18px;
  font-family: 'Inter';
}
.lol-weekly-report-modal .best-worst-picks .pick-card .player-desc {
  font-size: 10px;
  line-height: 12px;
  color: #a3bbd3;
  font-family: 'Inter';
}
.lol-weekly-report-modal .best-worst-picks .pick-card .player-desc.small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50px;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .points {
  font-size: 16px;
  font-family: 'Inter';
  line-height: 18px;
  font-weight: 600;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .points.blue {
  color: #00baff;
}
.lol-weekly-report-modal .best-worst-picks .pick-card .points.red {
  color: #ff6086;
}
.lol-weekly-report-modal .champion-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  border-radius: 8px;
  margin-left: 8px;
  position: relative;
  overflow: hidden;
}
.lol-weekly-report-modal .champion-container.blue {
  background-color: #00baff;
}
.lol-weekly-report-modal .champion-container.red {
  background-color: #ff6086;
}
.lol-weekly-report-modal .champion-container .ban-line {
  position: absolute;
  height: 100px;
  width: 2px;
  background-color: #ff6086;
  transform: rotate(135deg);
}
.lol-weekly-report-modal .position-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #18202f;
  border-radius: 6px;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 24px;
  width: 24px;
}
.lol-weekly-report-modal .champion-name {
  text-align: center;
  font-size: 10px;
  color: #a3bbd3;
  line-height: 12px;
}
.lol-weekly-report-modal .top-player-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  width: 143px;
  margin-right: 16px;
  box-sizing: border-box;
  background-color: #3a465b;
  font-family: 'Inter';
  min-height: 185px;
  overflow: hidden;
}
.lol-weekly-report-modal .top-player-card .top-section {
  display: flex;
  max-height: 68px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.lol-weekly-report-modal .top-player-card .mid-section {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lol-weekly-report-modal .top-player-card .mid-section .player-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.lol-weekly-report-modal .top-player-card .mid-section .owner {
  font-size: 10px;
  color: #a3bbd3;
}
.lol-weekly-report-modal .top-player-card .mid-section .points {
  color: #fff;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
}
.weekly-report-full-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: space-between;
  grid-gap: 0px;
}
@media (min-width: 1818px) {
  .weekly-report-full-container {
    justify-content: space-around;
  }
}
.weekly-report-matchup-item {
  padding: 15px 20px;
  border-radius: 5px;
}
.weekly-report-owner-item {
  padding: 15px;
  border-radius: 16px;
  margin: 12px auto;
  max-width: 256px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  background: #344054;
}
@media (min-width: 1200px) {
  .weekly-report-owner-item {
    min-width: 256px;
  }
}
.weekly-report-owner-item .header {
  font-size: 14px;
  font-weight: 900;
}
.weekly-report-owner-item .tagline {
  font-size: 12px;
  margin-top: 4px;
  font-weight: normal;
  line-height: 1.3;
}
.weekly-report-owner-item .owner-row {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.weekly-report-owner-item .owner-row.loser {
  opacity: 0.4;
}
.weekly-report-owner-item .owner-row .owner-meta {
  margin-left: 8px;
  flex-grow: 1;
}
.weekly-report-owner-item .owner-row .owner-meta .username {
  font-weight: bold;
  font-size: 14px;
}
.weekly-report-owner-item .owner-row .owner-meta .team-name {
  font-size: 11px;
  color: #999;
}
.weekly-report-owner-item .owner-row .points {
  font-size: 14px;
  font-weight: bold;
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  text-align: right;
}
.weekly-report-player-item {
  padding: 15px;
  border-radius: 16px;
  margin: 12px auto;
  max-width: 256px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  background: #344054;
}
@media (min-width: 1200px) {
  .weekly-report-player-item {
    min-width: 256px;
  }
}
.weekly-report-player-item .header {
  font-size: 14px;
  font-weight: 900;
}
.weekly-report-player-item .tagline {
  font-size: 12px;
  margin-top: 4px;
  font-weight: normal;
  line-height: 1.3;
}
.weekly-report-player-item .owner-row {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.weekly-report-player-item .owner-row.loser {
  opacity: 0.4;
}
.weekly-report-player-item .owner-row .owner-meta {
  margin-left: 8px;
  flex-grow: 1;
}
.weekly-report-player-item .owner-row .owner-meta .username {
  font-weight: bold;
  font-size: 14px;
}
.weekly-report-player-item .owner-row .owner-meta .team-name {
  font-size: 11px;
  color: #999;
  margin-top: 3px;
}
.weekly-report-player-item .owner-row .points {
  font-size: 14px;
  font-weight: bold;
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  text-align: right;
}
.weekly-report-player-item .owner-row .stat-text {
  font-size: 10px;
  margin-top: 3px;
  font-weight: normal;
}
.win-chance-bar {
  min-height: 16px;
  overflow: hidden;
}
.win-chance-bar .percentage-wrap {
  display: flex;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  margin-bottom: -3px;
  font-family: 'Muli';
}
.win-chance-bar .percentage-wrap .percentage {
  padding: 0 1px;
  letter-spacing: 1px;
}
.win-chance-bar .percentage-wrap .percentage-middle {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  letter-spacing: 1px;
}
.win-chance-bar .left {
  font-size: 8px;
  line-height: 11px;
  text-align: center;
  color: #fff;
  background: #00ceb8;
  display: inline-block;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  overflow: hidden;
}
.win-chance-bar .right {
  font-size: 8px;
  line-height: 11px;
  text-align: center;
  color: #fff;
  background: #58a7ff;
  display: inline-block;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
}
.channel-item-wrapper {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  padding-right: 16px;
  height: 60px;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}
.channel-item-wrapper .channel-item {
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  opacity: 0.8;
  padding: 12px;
  margin: 4px 12px;
  border-radius: 16px;
  overflow: hidden;
}
.channel-item-wrapper .channel-item >.avatar-channel {
  border-radius: 4px !important;
  margin-right: 16px;
  top: -1px;
  background-color: #fff;
}
.channel-item-wrapper .channel-item >.avatar-channel >.sport {
  display: none !important;
}
.channel-item-wrapper .channel-item >.meta {
  flex-grow: 1;
}
.channel-item-wrapper .channel-item >.fa {
  margin-right: 23px;
  color: #fff;
  align-self: center;
}
.channel-item-wrapper .channel-item .title {
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  line-height: 14px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 130px;
  text-overflow: ellipsis;
}
.channel-item-wrapper .channel-item .description {
  font-size: 10px;
  color: #fff;
  opacity: 0.8;
  margin-top: 3px;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  white-space: nowrap;
  max-width: 130px;
  text-overflow: ellipsis;
}
.channel-item-wrapper .channel-item.selected,
.channel-item-wrapper .channel-item:hover {
  background: #283245;
}
.channel-item-wrapper.unread-topic {
  opacity: 1;
}
.channel-item-wrapper.unread-topic .title {
  font-weight: bold;
}
.channel-item-wrapper.unread-messages {
  opacity: 1;
}
.channel-item-wrapper.unread-messages .title {
  font-weight: bold;
  opacity: 1;
}
.large-left-panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1f2431;
  border-right: 1px solid rgba(163,187,211,0.05);
}
.large-left-panel .leagues-dropdown {
  color: #fff;
  position: relative;
  width: 50px;
  height: 23px;
}
.large-left-panel .leagues-dropdown .app-dropdown {
  position: absolute;
  z-index: 10;
}
.large-left-panel .divider {
  background-color: #61707e;
  margin-left: 16px;
  margin-right: 36px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 2px;
}
.large-left-panel .header .left-nav-logo {
  height: 40px;
  padding: 12px;
  margin-left: 8px;
  margin-top: 18px;
}
.large-left-panel .notification-indicator-container {
  position: absolute;
  top: 6px;
  left: 36px;
}
.large-left-panel .notification-indicator-container .nav-notification-indicator {
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: #022047;
  font-weight: bold;
}
.left-nav-panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.left-nav-panel .header {
  padding: 26px 10px 0px 10px;
}
.left-nav-panel .header .left-nav-logo {
  height: 40px;
}
.left-nav-panel .notification-indicator-container {
  position: absolute;
  right: 35px;
  top: 12px;
}
.left-nav-panel .coming-soon {
  padding: 0 15px;
  margin: 20px 0;
  font-weight: normal;
  opacity: 0.75;
  font-size: 13px;
  color: #fff;
  line-height: 14px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all 0.6s ease;
}
.left-nav-panel .body {
  padding-bottom: 44px;
}
.small-left-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  overflow: hidden;
  height: 100vh;
  z-index: 9999;
  box-sizing: border-box;
  background-color: #1f2431 v;
  transition: all ease-in-out 0.25s;
  border-right: 0.5px solid #18202f;
}
.small-left-panel.open {
  width: 240px;
  border-right: none;
}
.nav-draftboard-wrapper {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
  margin: 8px 0;
  margin-right: 12px;
  margin-top: 16px;
  margin-left: 4px;
  height: 56px;
  overflow: hidden;
  justify-content: center;
  border-radius: 8px;
  box-sizing: border-box;
}
.nav-draftboard-item {
  display: flex;
  padding-right: 16px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
  padding: 8px;
  margin-left: 16px;
  box-sizing: border-box;
}
.nav-draftboard-item.small {
  max-width: 56px;
}
.nav-draftboard-item .title {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
  color: #fff;
  line-height: 14px;
  text-transform: capitalize;
  letter-spacing: 0.23px;
  padding-left: 16px;
}
.nav-draftboard-item .description {
  font-size: 10px;
  color: #fff;
  opacity: 0.75;
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
}
.nav-draftboard-item.selected {
  background: #283245;
  border-radius: 8px;
}
.nav-inbox-item {
  padding: 0 20px;
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  opacity: 1;
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.nav-inbox-item .title {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
  color: #677897;
  text-transform: capitalize;
  letter-spacing: 0.23px;
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-inbox-item .description {
  font-size: 10px;
  color: #fff;
  opacity: 0.75;
  margin-top: 2px;
}
.nav-inbox-item:hover {
  background: #283245;
}
.nav-inbox-item.selected {
  background: #283245;
}
.nav-inbox-item.selected .title {
  color: #fff;
  font-weight: bold;
}
.nav-inbox-item img.icon {
  width: 32px;
  margin-left: 4px;
}
.nav-league-create-item {
  padding: 12px 15px 10px 5px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
}
.nav-league-create-item .trophy-icon {
  width: 40px;
  height: 50px;
  margin-right: 10px;
  padding-left: 10px;
}
.nav-league-create-item .title {
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  line-height: 14px;
  letter-spacing: 0.5px;
}
.nav-league-create-item .description {
  font-size: 12px;
  color: #fff;
  opacity: 0.75;
  padding-top: 5px;
}
.nav-league-create-item:hover,
.nav-league-create-item.selected {
  background: #283245;
}
.nav-league-item-wrapper {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  height: 80px;
  margin: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-league-item-wrapper .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 3px;
}
.nav-league-item-wrapper .row.flip {
  justify-content: flex-end;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.nav-league-item-wrapper .league-status {
  font-size: 9px;
  line-height: 10px;
  font-family: 'Poppins', sans-serif;
}
.nav-league-item-wrapper .circle {
  height: 4px;
  width: 4px;
  border-radius: 5px;
  margin-right: 4px;
}
.nav-league-item-wrapper .nav-league-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  padding: 16px;
  padding-left: 12px;
  padding-bottom: 4px;
  margin-left: 16px;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
  position: relative;
  color: #fbfbfb;
  box-sizing: border-box;
  border-radius: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 72px;
  width: 216px;
}
.nav-league-item-wrapper .nav-league-item.small {
  max-width: 56px;
  overflow: hidden;
  border-radius: 16px;
  max-height: 56px;
  transition: all 0.2s ease;
}
.nav-league-item-wrapper .nav-league-item .nav-league-matchup {
  padding-top: 0px;
}
.nav-league-item-wrapper .nav-league-item .avatar-league {
  border-radius: 4px !important;
  margin-right: 12px;
  background-color: #fff;
  margin-left: 4px;
}
.nav-league-item-wrapper .nav-league-item .avatar-league .sport {
  display: none !important;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .league-title {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  line-height: 16px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .format-container {
  display: flex;
  flex-direction: row;
  margin-top: 2px;
  align-items: center;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .format-container .team {
  font-size: 10px;
  padding-top: 1px;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  line-height: 11px;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .score-container {
  display: flex;
  flex-direction: row;
  margin-top: 2px;
  align-items: center;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .score-container .roster-score-and-projection-matchup {
  margin: 0;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .score-container .team {
  font-size: 10px;
  padding-top: 1px;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  line-height: 11px;
}
.nav-league-item-wrapper .nav-league-item .nav-info-container .score-container .score {
  font-size: 10px;
  opacity: 0.7;
  font-family: 'Inter', sans-serif;
}
.nav-league-item-wrapper .nav-league-item:hover,
.nav-league-item-wrapper .nav-league-item.selected {
  background: rgba(58,70,91,0.25);
  color: #fff;
}
.nav-league-item-wrapper .nav-league-item:hover .league,
.nav-league-item-wrapper .nav-league-item.selected .league {
  color: #fff;
}
.nav-league-item-wrapper .nav-league-item:hover .team,
.nav-league-item-wrapper .nav-league-item.selected .team {
  color: #fff;
}
.nav-league-item-wrapper.unread-messages {
  opacity: 1;
}
.nav-league-item-wrapper.unread-messages .title,
.nav-league-item-wrapper.unread-messages .league {
  font-weight: bold;
  opacity: 1;
}
.nav-league-item-wrapper .nav-league-item-season-label {
  font-size: 10px;
  font-weight: bold;
  color: #969696;
}
.nav-league-item-wrapper .league-nav-item-lounge-indicator {
  position: absolute;
  right: 25px;
  top: 9px;
}
.nav-league-matchup {
  position: relative;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  max-width: 150px;
}
.nav-league-matchup .team-name-container {
  position: relative;
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}
.nav-league-matchup .small-text {
  font-family: 'Inter', sans-serif;
  display: inline-block;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #a3bbd3;
  width: 60px;
}
.nav-league-matchup .right {
  text-align: right;
  justify-content: flex-end;
}
.nav-league-matchup .vs {
  font-size: 10px;
  letter-spacing: 0.2px;
  color: #a3bbd3;
  width: 30px;
  text-align: center;
}
.nav-league-matchup .score-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 10px;
}
.nav-league-matchup .score-container .left-score {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.nav-league-matchup .score-container .right-score {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: flex-end;
}
.nav-league-matchup .win-bar-wrapper {
  width: 60px;
  margin-bottom: 6px;
}
.league-request-item {
  margin-left: 4px;
  max-width: 280px;
  height: 80px;
}
.league-request-item.small {
  max-width: 48px;
}
.league-request-item >.request {
  padding: 10px 20px 10px 15px;
  position: relative;
  height: 56px;
  box-sizing: border-box;
}
.league-request-item >.request .request-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 4px;
  padding-right: 4px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  background: linear-gradient(90deg, rgba(16,33,49,0) 0%, #3a465b 100%);
  z-index: 0;
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  box-sizing: border-box;
}
.league-request-item >.request .request-background.small {
  border-radius: 28px;
  height: 56px;
  width: 56px;
  right: 0;
  left: 8px;
  top: -4px;
}
.league-request-item >.request .request-meta-container {
  display: flex;
  z-index: 1;
  cursor: default;
}
.league-request-item >.request .request-meta-container .avatar-league {
  border-radius: 4px !important;
  margin-right: 16px;
  background-color: #fff;
  margin-top: 4px;
  margin-left: 10px;
  width: 24px !important;
  height: 24px !important;
}
.league-request-item >.request .row {
  display: flex;
}
.league-request-item >.request .meta {
  flex-grow: 1;
}
.league-request-item >.request .meta >.name {
  color: #fff;
  opacity: 0.8;
  font-size: 14px;
  width: 104px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 3px;
  font-weight: bold;
  position: relative;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  font-family: 'Muli';
}
.league-request-item >.request .meta >.description {
  font-size: 10px;
  color: #fff;
  flex-grow: 1;
  opacity: 0.7;
  line-height: 15px;
}
.league-request-item >.request .meta .invite-by {
  display: flex;
  flex-direction: row;
  font-size: 10px;
  color: #fff;
  opacity: 0.7;
  margin-top: 2px;
}
.league-request-item >.request >.button {
  margin-left: 4px;
}
.league-request-item >.request >.button button {
  width: 100px;
}
.league-request-item.selected {
  background: #283245;
}
.league-request-item.selected .league {
  color: #fff;
}
.league-request-item.selected .team {
  color: #fff;
}
.league-request-item .buttons {
  z-index: 1;
  display: flex;
  flex-direction: row;
  position: relative;
  right: -3px;
  bottom: 2px;
}
.league-request-item .buttons .button {
  margin-right: 4px;
}
.league-request-item .buttons button {
  width: 92px;
  box-sizing: border-box;
}
.league-request-item .buttons button.cancel {
  background: #454955;
}
@-moz-keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.nav-league-request-section {
  max-width: 240px;
  position: relative;
  overflow: hidden;
}
.nav-league-section-header {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 22px;
  padding-right: 20px;
  height: 56px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
.nav-league-section-header .title {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #606f8c;
  opacity: 1;
  flex-grow: 1;
  line-height: 18px;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.84px;
  font-weight: 400;
  margin-bottom: 4px;
}
.nav-league-section-header .row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.nav-league-section-header .create-league-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.nav-managed-league-event-item {
  display: flex;
  flex-direction: row;
  padding: 10px 15px 8px 15px;
  opacity: 1;
  transition: all 0.2s ease;
  position: relative;
}
.nav-managed-league-event-item >.avatar-league {
  border-radius: 4px !important;
  margin-right: 10px;
  top: -1px;
  background-color: #fff;
}
.nav-managed-league-event-item >.avatar-league >.sport {
  display: none !important;
}
.nav-managed-league-event-item >.league-info-container {
  width: 100%;
  padding-right: 25px;
}
.nav-managed-league-event-item .league {
  color: #fff;
  opacity: 0.8;
  font-size: 13px;
  width: 135px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  font-weight: normal;
  position: relative;
  top: -2px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}
.nav-managed-league-event-item .score-container {
  display: flex;
  flex-direction: row;
}
.nav-managed-league-event-item .score-container .team {
  font-size: 10px;
  color: #fff;
  flex-grow: 1;
  opacity: 0.7;
  line-height: 15px;
  display: flex;
  flex-direction: row;
}
.nav-managed-league-event-item .score-container .team .countdown {
  font-weight: bold;
  margin-left: 5px;
}
.nav-managed-league-event-item .score-container .score {
  font-size: 10px;
  color: #fff;
  opacity: 0.7;
  line-height: 15px;
}
.nav-managed-league-event-item .managed-by-container {
  font-size: 10px;
  color: #fff;
  opacity: 0.4;
  margin-top: 3px;
}
.nav-notification-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: 4px;
  background: #00ceb8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}
.nav-private-messages-item {
  padding: 0 20px;
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  opacity: 1;
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.nav-private-messages-item .title {
  font-size: 14px;
  line-height: 16px;
  font-weight: normal;
  color: #677897;
  text-transform: capitalize;
  letter-spacing: 0.23px;
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-private-messages-item .description {
  font-size: 10px;
  color: #fff;
  opacity: 0.75;
  margin-top: 2px;
}
.nav-private-messages-item:hover {
  background: #283245;
}
.nav-private-messages-item.selected {
  background: #283245;
}
.nav-private-messages-item.selected .title {
  color: #fff;
  font-weight: bold;
}
.nav-private-messages-item img.icon {
  width: 32px;
  margin-left: 4px;
}
.profile-wrapper {
  display: flex;
  flex-direction: column;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-color: #18202f;
  height: 100%;
  overflow: hidden;
}
.profile-wrapper .nav-profile-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 0px 0px 15px;
  position: relative;
  font-family: 'Inter', sans-serif;
}
.profile-wrapper .nav-profile-item .avatar {
  width: 32px;
  height: 32px;
  margin-right: 15px;
  margin-left: 4px;
}
.profile-wrapper .nav-profile-item .settings-icon {
  padding: 24px;
  color: #fff;
}
.profile-wrapper .nav-profile-item .name-container {
  flex-grow: 1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-wrapper .nav-profile-item .name {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.4px;
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-wrapper .nav-profile-item .role {
  display: flex;
  color: #7988a1;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  align-items: center;
  margin-top: 4px;
}
.profile-wrapper .nav-profile-item .icon {
  font-size: 22px;
  color: #677897;
  opacity: 0.6;
  cursor: pointer;
  position: relative;
  top: -2px;
}
.profile-wrapper .nav-profile-item .icon:hover {
  opacity: 1;
}
.profile-wrapper .nav-profile-item .notification-indicator-container {
  position: absolute;
  right: 10px;
  top: 15px;
}
.profile-wrapper .nav-profile-item .notification-indicator-container .nav-notification-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #f00;
  background: #f00;
}
.nav-search {
  text-align: center;
  padding: 15px;
}
.nav-search .results {
  border-radius: 3px;
}
.nav-search .autocomplete-player-item {
  cursor: pointer;
}
.nav-search .autocomplete-player-item:hover {
  background-color: #f0f0f0;
}
.nav-search .name {
  margin: 0 10px 0 15px;
  text-align: left;
}
.nav-search .meta {
  margin: 3px 10px 0 15px;
  text-align: left;
}
.nav-search .player-search {
  position: relative;
  padding-right: 28px;
}
.nav-search .player-search input {
  height: 30px;
  padding: 0 12px;
  background: #373a44;
  font-size: 12px;
  width: 100%;
  color: #fff;
  border: 1px solid #343740;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px 0 rgba(98,98,98,0.27);
}
.nav-search .player-search input::placeholder {
  color: #fff;
  opacity: 0.7;
}
.nav-search .player-search .fa-search {
  position: absolute;
  right: 15px;
  color: #fff;
  opacity: 0.4;
  top: 7px;
  font-size: 16px;
}
.nav-section-header {
  padding: 44px 15px 5px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.nav-section-header:hover .title,
.nav-section-header:hover .new {
  opacity: 1;
}
.nav-section-header .title {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  opacity: 1;
  flex-grow: 1;
  line-height: 18px;
  font-family: 'Muli';
  letter-spacing: 0.23px;
  font-weight: 400;
}
.nav-section-header .new {
  color: #fff;
  padding-right: 20px;
  opacity: 0.7;
  cursor: pointer;
}
.selected-indicator-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0px;
  left: 0px;
  bottom: 0px;
  height: 100%;
}
.selected-indicator-wrapper .selected-indicator {
  position: absolute;
  top: 16px;
  left: -10px;
  width: 10px;
  background-color: #00ceb8;
  transform: scale(0);
  border-radius: 4px;
  height: 32px;
  transition: all 0.2s ease;
}
.selected-indicator-wrapper .selected-indicator.show {
  transform: scale(1);
  left: -5px;
}
.topic-indicator {
  position: absolute;
  top: 25px;
  left: 0px;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-indicator >.indicator {
  width: 10px;
  height: 10px;
  background: #00ceb8;
  transition: all 0.2s linear;
  transform: scale(0);
  position: relative;
  left: -5px;
  opacity: 0;
  border-radius: 50%;
}
.topic-indicator >.indicator.show {
  transform: scale(1);
  opacity: 1;
}
.app-loader {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
}
.loading-screen {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #102131;
  z-index: 9999;
}
.loading-screen .ripple {
  position: relative;
}
.loading-screen .logo-container {
  position: relative;
  top: 69px;
}
.loading-screen .logo {
  width: 76px;
  height: 76px;
  position: absolute;
  top: -83px;
  left: -6px;
}
.loading-screen .message {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: #fff;
  opacity: 0.7;
}
.landing-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.landing-logo .logo {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background-color: #83c03a;
  background-image: url("/images/sleeperbot_icon_sm.png");
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
}
.landing-logo .name {
  font-size: 18px;
  font-weight: bold;
  margin-left: 7px;
  padding-top: 3px;
  letter-spacing: 0.2px;
}
.create-dm-panel {
  color: #fff;
  font-family: 'Muli';
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #283244;
  border-radius: 10px;
}
.create-dm-panel .section-header {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 15px;
}
.create-dm-panel .dm-results {
  flex-grow: 1;
  height: 100%;
  overflow: auto;
}
.create-dm-panel .search-users-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 30px;
  background: #102131;
  padding: 5px 15px;
}
.create-dm-panel .search-users-wrapper input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  padding: 0 10px;
  margin: 5px 0;
  height: 26px;
  line-height: 26px;
  font-size: 15px;
  box-sizing: border-box;
}
.create-dm-panel .search-users-wrapper .loader {
  position: absolute;
  right: 10px;
  bottom: 6px;
}
.create-dm-panel .search-users-wrapper .selected-user-item {
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 10px;
  font-weight: bold;
  margin: 5px 5px;
  padding: 5px 10px;
  background: #283244;
}
.create-dm-panel .search-users-wrapper .selected-user-item .name-wrapper {
  padding: 0 10px;
}
.create-dm-panel .dm-search-input {
  flex-grow: 1;
}
.create-dm-panel .search-result-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 15px;
  cursor: pointer;
}
.create-dm-panel .search-result-item .name-wrapper {
  flex-grow: 1;
}
.create-dm-panel .search-result-item .avatar {
  margin-right: 15px;
}
.create-dm-panel .search-result-item:hover {
  background: #102131;
}
.create-dm-panel .friend-result-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 15px;
  cursor: pointer;
}
.create-dm-panel .friend-result-item .name-wrapper {
  flex-grow: 1;
}
.create-dm-panel .friend-result-item .avatar {
  margin-right: 15px;
}
.create-dm-panel .friend-result-item:hover {
  background: #102131;
}
.create-dm-panel .button-wrapper {
  padding: 0 15px 15px 15px;
}
.dm-header {
  display: flex;
  flex-direction: row;
  padding: 24px;
  align-items: center;
  color: #fff;
  border-radius: 24px;
  background-color: #1d2230;
}
.dm-header >.name-container {
  flex-grow: 1;
}
.dm-header >.name-container .meta {
  display: flex;
  color: #bbb;
  font-size: 11px;
  line-height: 12px;
  margin-top: 3px;
}
.dm-header >.name-container >.name {
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.3px;
}
.dm-header >.name-container >.name a {
  pointer-events: none;
  text-decoration: none;
  color: #333;
}
.dm-header >.name-container >.name:first-letter {
  text-transform: capitalize;
}
.dm-header >.name-container .author {
  font-weight: bold;
  color: #777;
}
.dm-header .button {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  text-align: center;
}
.dm-header .button:hover {
  color: #a3bbd3;
}
.dm-members {
  transition: all 0.3s ease;
}
.dm-members .member {
  display: flex;
  width: 200px;
  align-items: center;
  padding: 6px 10px;
  color: #fff;
  font-family: 'Muli';
}
.dm-members .member .name {
  font-size: 13px;
}
.message-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 16px;
  align-items: center;
  cursor: pointer;
  transition: all 0.1s ease;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 4px;
  border-radius: 16px;
}
.message-item .title {
  color: #fff;
}
.message-item .last-message {
  color: #7888a4;
}
.message-item:hover {
  background: rgba(58,70,91,0.25);
}
.message-item.selected {
  background: #0b1021;
}
.message-item.unread .title {
  font-weight: 900;
  color: #fff;
}
.message-item.unread .last-message {
  color: #7888a4;
}
.message-item.unread .timestamp {
  font-weight: bold;
  color: #00ceb8 !important;
}
.message-item .avatars {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
  text-align: right;
  position: relative;
  padding-right: 20px;
  left: -15px;
  top: -20px;
}
.message-item .avatars .avatar-item {
  border-radius: 50%;
  border: 2px solid #0b1021;
  background: #0b1021;
  width: 36px;
  height: 34px;
  overflow: hidden;
}
.message-item .avatars .avatar-1 {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 3;
}
.message-item .avatars .avatar-2 {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 2;
}
.message-item .avatars .avatar-3 {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
}
.message-item .avatars .avatar {
  position: relative;
  top: -1px;
}
.message-item .body {
  flex-grow: 1;
}
.message-item .body .title-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  font-size: 14px;
  align-items: center;
  margin-bottom: 5px;
  justify-content: space-between;
}
.message-item .body .title-container .title {
  max-width: 200px;
  white-space: nowrap;
  margin-right: 15px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-overflow-style: none;
}
.message-item .body .title-container .title::-webkit-scrollbar {
  display: none;
}
.message-item .body .title-container .timestamp {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
  text-align: right;
  font-size: 12px;
  color: #7888a4;
}
.message-item .body .last-message {
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  -ms-overflow-style: none;
}
.message-item .body .last-message::-webkit-scrollbar {
  display: none;
}
.message-item .body .last-message .author {
  font-weight: bold;
}
.message-item .typing-indicator-container {
  position: absolute;
  right: 4px;
  bottom: 8px;
}
.message-item .typing-indicator-container .typing-indicator {
  background: none;
}
.message-request {
  display: flex;
  padding: 15px 15px;
  color: #fff;
}
.message-request .avatars {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
  text-align: right;
  position: relative;
  padding-right: 20px;
  left: -15px;
}
.message-request .avatars .avatar-item {
  border-radius: 50%;
  border: 2px solid #0b1021;
  background: #0b1021;
  width: 36px;
  height: 34px;
  overflow: hidden;
}
.message-request .avatars .avatar-1 {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 3;
}
.message-request .avatars .avatar-2 {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 2;
}
.message-request .avatars .avatar-3 {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
}
.message-request .avatars .avatar {
  position: relative;
  top: -1px;
}
.message-request .from {
  margin-top: 3px;
  margin-bottom: 3px;
  display: flex;
}
.message-request .from .name {
  font-size: 15px;
  flex-grow: 1;
}
.message-request .from .created {
  font-size: 12px;
  color: #7888a4;
}
.message-request .body-container {
  flex-grow: 1;
}
.message-request .description {
  font-size: 12px;
  color: #7888a4;
}
.message-request .buttons {
  margin-top: 10px;
}
.message-request .buttons .button {
  margin-right: 10px;
}
.message-request .buttons .button button {
  min-width: 115px;
}
.messages-list {
  position: relative;
}
.messages-list >.content-container >div:nth-child(2) {
  border-top: 1px solid #18202f;
}
.messages-list >.content-container .header {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ccc;
  padding: 15px 15px;
}
.messages-panel-header {
  color: #fff;
  padding: 32px 0;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  height: 72px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.messages-panel-header .name-container {
  flex-grow: 1;
  flex-direction: row;
  display: flex;
  align-items: center;
}
.messages-panel-header .name-container .name {
  font-size: 24px;
  font-weight: 800;
  font-family: 'Muli';
  line-height: 32px;
}
.messages-panel-header .name-container .description {
  color: #7888a4;
  font-size: 12px;
  margin-left: 16px;
}
.messages-panel-header.friends-mode {
  border-right: none;
}
.messages-panel-header.friends-mode .button.friends {
  margin-right: 0;
  margin-left: 20px;
}
.messages-panel-header .button {
  -webkit-flex: 0 0 50px;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  height: 100%;
  margin: 0 5px;
}
.messages-panel-header .button:hover {
  color: #ccc;
}
.messages-panel-header .search {
  flex-grow: 1;
}
.messages-panel-container {
  padding-top: 0px;
}
.messages-panel-container .messages-panel {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: calc(100vh - 88px);
  flex-direction: column;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: #fff;
  overflow: hidden;
}
.messages-panel-container .messages-panel .messages {
  flex-grow: 1;
  height: 100%;
  overflow: auto;
  padding-right: 16px;
  padding-bottom: 80px;
}
.new-direct-message-input {
  position: relative;
}
.new-direct-message-input .input-container {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  padding: 15px 15px;
}
.new-direct-message-input input {
  display: inline-block;
  outline: none;
  border: none;
  height: 30px;
  flex-grow: 1;
  min-width: 100px;
  font-size: 14px;
}
.new-direct-message-input .user-item {
  padding: 8px 12px;
  height: 30px;
  box-sizing: border-box;
  background: #77bd22;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  margin: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.new-direct-message-input .label {
  height: 32px;
  display: flex;
  align-items: center;
  color: #ccc;
  font-weight: 300;
  position: absolute;
  pointer-events: none;
}
.new-direct-message-input .autocomplete-container {
  width: 100%;
  top: 50px;
}
.new-direct-message-input .autocomplete-container .legend {
  display: none;
}
.search-messages-input {
  position: relative;
}
.search-messages-input input {
  background: #eee;
  width: 100%;
  border: none;
  border-radius: 4px;
  height: 32px;
  padding: 0 15px;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.search-messages-input input::placeholder {
  color: #bbb;
}
.search-messages-input .fa-search {
  position: absolute;
  right: 10px;
  color: #aaa;
  opacity: 0.7;
  top: 7px;
  font-size: 16px;
}
.search-messages-input .autocomplete-wrapper {
  position: absolute;
  width: calc(100% + 26px);
  left: 1px;
  top: 31px;
  z-index: 1;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
#modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 9999;
}
#modal .modal-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#modal .modal-item-underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: all 0.1s linear;
  background-color: rgba(216,226,237,0.3);
}
#modal.shadow {
  background: rgba(0,0,0,0.5);
}
.modal-wrapper {
  position: relative;
  min-height: 200px;
  min-width: 420px;
  background-color: #2d3649;
  border-radius: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.modal-wrapper .close-container {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  cursor: pointer;
  z-index: 10;
}
.modal-wrapper .close-container:hover {
  background-color: #202635;
}
.panel-layout {
  height: 100vh;
  width: 100vw;
  background: #181c28;
  overflow: hidden;
  display: flex;
  -ms-overflow-style: none;
}
.panel-layout::-webkit-scrollbar {
  display: none;
}
.panel-layout .left-panel {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-flex: 0 0 240px;
  -ms-flex: 0 0 240px;
  flex: 0 0 240px;
  width: 240px;
  box-sizing: border-box;
}
@media (max-width: 1450px) {
  .panel-layout .left-panel {
    -webkit-flex: 0 0 72px;
    -ms-flex: 0 0 72px;
    flex: 0 0 72px;
    width: 72px;
  }
}
.panel-layout .left-panel .header {
  -webkit-flex: 0 0 61px;
  -ms-flex: 0 0 61px;
  flex: 0 0 61px;
}
.panel-layout .left-panel .body {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  width: 240px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.panel-layout .left-panel .body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.panel-layout .left-panel .footer {
  -webkit-flex: 0 0 72px;
  -ms-flex: 0 0 72px;
  flex: 0 0 72px;
}
.panel-layout .center-panel-wrapper {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px 24px 24px 24px;
}
.panel-layout .panel-layout-column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.panel-layout .center-panel-header {
  display: flex;
  flex-direction: row;
  height: 60px;
  width: 100%;
  margin-bottom: 20px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
}
.panel-layout .center-panel-header .left-header {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.panel-layout .center-panel-header .right-header {
  width: 100%;
  max-width: 500px;
  z-index: 1;
  box-sizing: border-box;
  margin-left: 24px;
}
@media (min-width: 1300px) {
  .panel-layout .center-panel-header .right-header {
    max-width: 100%;
  }
}
.panel-layout .dual-content-panel {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  height: 100%;
}
.panel-layout .dual-content-panel .center-panel {
  background-color: rgba(58,70,91,0.5);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 496px;
  max-width: 800px;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #3a465b;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 1300px) {
  .panel-layout .dual-content-panel .center-panel {
    min-width: 800px;
  }
}
.panel-layout .dual-content-panel .right-panel {
  background-color: rgba(58,70,91,0.5);
  height: 100%;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
  margin-left: 24px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #3a465b;
  min-width: 260px;
  max-width: 388px;
}
@media (min-width: 1300px) {
  .panel-layout .dual-content-panel .right-panel {
    max-width: 100%;
  }
}
.panel-layout .single-content-panel {
  width: 100%;
  height: 100%;
}
.panel-layout .single-content-panel .main-panel {
  height: 100%;
  z-index: 1;
}
.depth-chart {
  padding-left: 16px;
}
.depth-chart .depth-chart-position-group {
  margin-bottom: 10px;
}
.depth-chart .depth-chart-position-group .position {
  display: inline-block;
  width: 40px;
  vertical-align: top;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding-top: 5px;
}
.depth-chart .depth-chart-position-group .position-players-list {
  display: inline-block;
}
.depth-chart .depth-chart-position-group .position-players-list .depth-chart-player-item {
  font-size: 13px;
  cursor: pointer;
  padding: 5px 0;
}
.depth-chart .position-group-header {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7888a4;
  margin: 15px 0 10px 0;
}
.player-card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 27px;
}
.player-card-actions .player-card-watch-button.on {
  background: #ffae58;
}
.player-card-actions .player-card-watch-button.on .text {
  color: #fff;
}
.player-card-browser {
  box-shadow: 1px 1px 10px #18202f;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  box-shadow: none;
  width: 960px;
  max-height: 80vh;
  border-radius: 16px !important;
  overflow: hidden;
}
.player-card-header {
  min-height: 215px;
  -webkit-flex: 0 0 215px;
  -ms-flex: 0 0 215px;
  flex: 0 0 215px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.player-card-header.team-defense .player-image-container .player-image {
  position: relative;
  left: 40px;
  top: -10px;
}
.player-card-header .injury-status {
  position: absolute;
  top: 18px;
  right: 0px;
  font-family: 'Muli';
  padding: 20px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  background: #f00;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: none;
}
.player-card-header .player-card-header-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.player-card-header .player-card-content-container {
  z-index: 1;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}
.player-card-header .player-image-container {
  position: relative;
  margin-right: -16px;
  min-width: 310px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.player-card-header .player-image-container .player-image {
  height: 206px;
}
.player-card-header .player-image-container .player-position-container {
  position: absolute;
  bottom: 0;
  left: 0;
}
.player-card-header .player-info-container {
  flex-grow: 1;
  padding: 25px 26px 18px 0px;
}
.player-card-header .player-info-container .player-name-container {
  display: flex;
  flex-direction: row;
  position: relative;
}
.player-card-header .player-info-container .player-name-container .player-owner-label {
  position: absolute;
  top: -12px;
  left: 0;
}
.player-card-header .player-info-container .player-name {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  font-family: 'Muli';
  line-height: 1.22;
  display: flex;
  align-items: center;
}
.player-card-header .player-info-container .profile-items-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 25px;
}
.player-card-header .player-info-container .profile-items-container .profile-item {
  text-align: center;
}
.player-card-header .player-info-container .profile-items-container .profile-item-divider {
  height: 36px;
  width: 1.5px;
  opacity: 0.5;
  background-color: #d8e2ed;
  margin: 0 12px;
}
.player-card-header .player-info-container .profile-items-container .profile-item-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-card-header .player-info-container .profile-item-label {
  font-size: 14px;
  font-family: 'Muli';
  font-weight: 800;
  opacity: 0.5;
  letter-spacing: 1.4px;
  color: #fff;
  margin-bottom: 9px;
}
.player-card-header .player-info-container .profile-item-value {
  font-size: 24px;
  font-family: 'Muli';
  font-weight: 800;
  opacity: 0.8;
  color: #fff;
}
.player-card-header .player-info-container .profile-item-unit {
  display: inline;
  font-size: 14px;
  opacity: 0.8;
  color: #fff;
}
.player-card-header .player-info-container .player-ranking-container {
  margin-top: 18px;
}
.player-card-header .player-info-container .player-ranking-container .player-ranking-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 5px;
}
.player-card-header .player-info-container .player-ranking-container .player-ranking-row .rank-item {
  margin-right: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-card-header .player-info-container .player-ranking-container .player-ranking-row .rank-item .rank-value {
  font-size: 22px;
  font-weight: 800;
  font-family: 'Muli';
  color: #fff;
}
.player-card-header .player-info-container .player-ranking-container .player-ranking-row .rank-item .rank-label {
  font-size: 10px;
  font-weight: 800;
  font-family: 'Muli';
  color: #a3bbd3;
  letter-spacing: 1px;
  padding-left: 3px;
}
.player-card-header .player-info-container .player-ranking-container .player-ranking-row .shimmer {
  min-width: 32px;
  height: 10px;
  border-radius: 5px;
  background: #b3bdc7;
  display: inline-block;
  opacity: 0.9;
}
.player-card-header .team-bg-image {
  position: absolute;
  width: 200px;
  left: 220px;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}
.player-card-player-position {
  height: 40px;
  display: flex;
  flex-direction: row;
  background: rgba(0,0,0,0.6);
  width: 268px;
}
.player-card-player-position >.position {
  min-width: 46.5px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  font-family: 'Muli';
  font-weight: 800;
  padding-left: 5px;
  padding-right: 5px;
}
.player-card-player-position >.team {
  color: #fff;
  padding-left: 10px;
  line-height: 40px;
  font-weight: bold;
  font-family: 'Lato';
  font-size: 18px;
  letter-spacing: 0.08px;
  padding-right: 20px;
  text-transform: uppercase;
}
.player-card-player-position >.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 20px;
  border-color: transparent transparent transparent rgba(0,0,0,0.6);
  position: absolute;
  right: -20px;
}
.player-card-action-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-sizing: border-box;
  height: 32px;
  min-width: 32px;
  box-sizing: border-box;
  cursor: pointer;
  background: rgba(255,255,255,0.7);
  margin-right: 24px;
  transition: all 0.1s;
  position: relative;
}
.player-card-action-button.expanded {
  opacity: 0.9;
  padding-left: 32px;
  padding-right: 16px;
}
.player-card-action-button .text {
  width: 0;
  overflow: hidden;
  transition: all 0.1s;
  font-size: 14px;
  font-family: 'Muli';
  font-weight: 700;
  color: #022047;
}
.player-card-action-button .text.expanded {
  width: 100% !important;
}
.player-card-action-button img {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 9px;
  top: 8px;
}
.player-card-action-button .spinner {
  position: absolute;
  left: 9px;
  top: 8px;
}
.player-card-action-button:hover:not(.expanded) {
  opacity: 0.9;
  padding-left: 32px;
  padding-right: 16px;
}
.player-card-action-button:hover:not(.expanded) .text {
  width: 100% !important;
}
.player-card-section-header {
  font-family: 'Lato';
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04px;
}
.player-card .details-panel {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.player-card .player-details-panel {
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  height: 100%;
}
.player-card .player-details-panel >.panel {
  overflow: auto;
}
.player-card .player-details-panel >.panel.stats {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 5px 5px 20px 2px;
}
.player-card .player-details-panel .overview {
  padding: 24px 0px;
  -webkit-flex: 0 100 300px;
  -ms-flex: 0 100 300px;
  flex: 0 100 300px;
  min-width: 200px;
}
.player-card .player-details-panel .overview .player-card-section-header {
  padding-bottom: 15px;
}
.player-card .game-log-section-header-container {
  padding: 0 24px 14px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-card .game-log-section-header-container h2 {
  flex-grow: 1;
}
.player-card .career-log-section-header-container {
  padding: 24px 24px 14px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-card .career-log-section-header-container h2 {
  flex-grow: 1;
}
.player-card .transaction-history-container {
  padding: 24px 24px 14px 24px;
}
.player-card .depth-chart {
  padding-bottom: 100px;
}
.player-owner-label {
  font-size: 10px;
  font-family: 'Muli';
  color: #58a7ff;
}
.player-owner-label i {
  padding-right: 2px;
}
.player-career-log {
  display: flex;
  flex-direction: row;
}
.player-career-log .stat-section .stat-columns-wrapper {
  display: flex;
  flex-direction: row;
}
.player-career-log .stat-table-wrapper {
  display: flex;
  flex-direction: row;
}
.player-career-log .stat-section-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.player-career-log .stat-section-wrapper .stat-section {
  flex-grow: 1;
}
.player-career-log .stat-section-wrapper .stat-section .stat-section-columns {
  display: flex;
  flex-direction: row;
}
.player-career-log .stat-label {
  font-size: 9px;
  font-family: 'Lato';
  font-weight: 700;
  letter-spacing: 0.03px;
  padding-left: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #a3bbd3;
}
.player-career-log .stat-section-label {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  font-family: 'Lato';
  font-weight: 700;
  letter-spacing: 0.03px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #fbfbfb;
}
.player-career-log .stat-column {
  flex-grow: 1;
}
.player-career-log .stat-value {
  height: 32px;
  line-height: 32px;
  font-size: 10px;
  font-weight: normal;
  padding-left: 3px;
  text-align: center;
  color: #fff;
  position: relative;
}
.player-career-log .stat-value.large {
  font-size: 12px;
  font-weight: 700;
}
.player-career-log .stat-value.even {
  background-color: rgba(237,242,249,0.1);
}
.player-career-log .stat-value .stat-value-background-overlay {
  position: absolute;
  left: 1px;
  top: 0px;
  bottom: 0px;
  right: 1px;
  z-index: 0;
  opacity: 0.3;
}
.player-career-log .stat-value .stat-value-text {
  position: relative;
  z-index: 1;
}
.player-career-log .weeks .stat-column .stat-value {
  font-family: 'Muli';
  font-weight: 700;
}
.player-career-log .weeks .stat-column .stat-value .stat-value-text {
  opacity: 0.6;
}
.player-career-log .opponents .stat-column .stat-value {
  font-family: 'Muli';
  font-weight: 700;
}
.player-career-log .stat-column.proj .stat-value-text {
  font-weight: 700;
  opacity: 0.6;
}
.player-career-log .stat-column.fpts {
  background: rgba(163,187,211,0.15);
  border-radius: 4px;
}
.player-career-log .stat-column.fpts .stat-value-text {
  font-weight: 700;
}
.player-career-logs {
  position: relative;
}
.player-career-logs.placeholder .header-section-placeholder {
  height: 30px;
}
.player-career-logs.placeholder .season-placeholder {
  height: 30px;
  width: 100%;
  border: 1px solid rgba(0,0,0,0);
}
.player-career-logs.placeholder .season-placeholder .shimmer {
  width: 100%;
  height: 12px;
  border-radius: 7px;
  margin: 8px 0;
  background: #4c576b;
}
.player-career-logs .stat-table-wrapper {
  display: flex;
  flex-direction: row;
}
.player-career-logs .stat-table-wrapper .stat-section {
  flex-grow: 1;
  margin-right: 3px;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-column {
  flex-grow: 1;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-section-label {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  font-family: 'Lato';
  font-weight: 700;
  letter-spacing: 0.03px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #fbfbfb;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-label {
  font-size: 9px;
  font-family: 'Lato';
  font-weight: 700;
  letter-spacing: 0.03px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 10px 6px;
  color: #a3bbd3;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-label.wr {
  padding: 10px 5px;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-label.defense {
  padding: 10px 19px;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-label.te,
.player-career-logs .stat-table-wrapper .stat-section .stat-label.k {
  padding: 10px 13px;
}
.player-career-logs .stat-table-wrapper .stat-section .section-columns {
  display: flex;
  flex-direction: row;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value {
  height: 32px;
  line-height: 32px;
  font-size: 10px;
  font-weight: normal;
  padding: 0px 6px;
  text-align: center;
  color: #fff;
  position: relative;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value.wr {
  padding: 0px 5px;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value.defense {
  padding: 0px 19px;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value.te,
.player-career-logs .stat-table-wrapper .stat-section .stat-value.k {
  padding: 0px 13px;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value.large {
  font-size: 12px;
  font-weight: 700;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value.even {
  background-color: rgba(237,242,249,0.1);
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value-background-overlay {
  position: absolute;
  left: 1px;
  top: 0px;
  bottom: 0px;
  right: 1px;
  z-index: 0;
  opacity: 0.3;
}
.player-career-logs .stat-table-wrapper .stat-section .stat-value-text {
  position: relative;
  z-index: 1;
}
.player-game-log {
  position: relative;
}
.player-game-log.placeholder .header-section-placeholder {
  height: 30px;
}
.player-game-log.placeholder .week-placeholder {
  height: 30px;
  width: 100%;
  border: 1px solid rgba(0,0,0,0);
}
.player-game-log.placeholder .week-placeholder .shimmer {
  width: 100%;
  height: 12px;
  border-radius: 7px;
  margin: 8px 0;
  background: #4c576b;
}
.player-game-log .stat-table-wrapper {
  display: flex;
  flex-direction: row;
}
.player-game-log .stat-section-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin-right: 3px;
}
.player-game-log .stat-section-wrapper .stat-section {
  flex-grow: 1;
}
.player-game-log .stat-section-wrapper .stat-section .stat-section-columns {
  display: flex;
  flex-direction: row;
}
.player-game-log .stat-label {
  font-size: 9px;
  font-family: 'Lato';
  font-weight: 700;
  letter-spacing: 0.03px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 10px 8px;
  color: #a3bbd3;
}
.player-game-log .stat-label.rb {
  padding: 10px 9px;
}
.player-game-log .stat-label.wr {
  padding: 10px 7px;
}
.player-game-log .stat-label.defense {
  padding: 10px 15px;
}
.player-game-log .stat-label.te,
.player-game-log .stat-label.k {
  padding: 10px 14px;
}
.player-game-log .stat-section-label {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  font-family: 'Lato';
  font-weight: 700;
  letter-spacing: 0.03px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #fbfbfb;
}
.player-game-log .stat-column {
  flex-grow: 1;
}
.player-game-log .stat-value {
  height: 32px;
  line-height: 32px;
  font-size: 10px;
  font-weight: normal;
  padding: 0px 8px;
  text-align: center;
  color: #fff;
  position: relative;
}
.player-game-log .stat-value.rb {
  padding: 0px 9px;
}
.player-game-log .stat-value.wr {
  padding: 0px 7px;
}
.player-game-log .stat-value.defense {
  padding: 0px 15px;
}
.player-game-log .stat-value.te,
.player-game-log .stat-value.k {
  padding: 0px 14px;
}
.player-game-log .stat-value.great {
  color: #ec5556;
}
.player-game-log .stat-value.good {
  color: #eb7200;
}
.player-game-log .stat-value.avg {
  color: #67c314;
}
.player-game-log .stat-value.bad {
  color: #00a300;
}
.player-game-log .stat-value.large {
  font-size: 12px;
  font-weight: 700;
}
.player-game-log .stat-value.even {
  background-color: rgba(237,242,249,0.1);
}
.player-game-log .stat-value .stat-value-background-overlay {
  position: absolute;
  left: 1px;
  top: 0px;
  bottom: 0px;
  right: 1px;
  z-index: 0;
  opacity: 0.3;
}
.player-game-log .stat-value .stat-value-text {
  position: relative;
  z-index: 1;
}
.player-game-log .weeks .stat-column .stat-value {
  font-family: 'Muli';
  font-weight: 700;
}
.player-game-log .weeks .stat-column .stat-value .stat-value-text {
  opacity: 0.6;
}
.player-game-log .opponents .stat-column .stat-value {
  font-family: 'Muli';
  font-weight: 700;
}
.player-game-log .stat-column.proj .stat-value-text {
  font-weight: 700;
  opacity: 0.6;
}
.player-game-log .stat-column.fpts {
  background: rgba(163,187,211,0.15);
  border-radius: 4px;
}
.player-game-log .stat-column.fpts .stat-value-text {
  font-weight: 700;
}
.projection-section .stat-section-columns .stat-column.ppr {
  background: rgba(163,187,211,0.15);
  border-radius: 4px;
  margin-left: 1px;
}
.projection-section .stat-section-columns .stat-column.std {
  background: rgba(163,187,211,0.15);
  border-radius: 4px;
  margin-right: 1px;
}
.player-news {
  margin-bottom: 16px;
}
.player-news .player-news-item {
  padding: 16px;
}
.player-news .player-news-item.is-analysis {
  background-color: #28445b;
}
.player-news .player-news-item .title {
  font-family: 'Muli';
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 10px;
}
.player-news .player-news-item .description {
  font-family: 'Lato';
  line-height: 1.4;
  font-size: 12px;
  letter-spacing: 0.03px;
  color: #666;
  margin-bottom: 10px;
}
.player-news .player-news-item .analysis {
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
}
.player-news .player-news-item .analysis .analysis-tag {
  font-weight: 900;
  padding-right: 5px;
}
.player-news .player-news-item .timestamp {
  font-size: 10px;
  color: #bbb;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.player-news .player-news-item .source:first-letter {
  text-transform: uppercase;
}
.player-news .empty {
  font-size: 14px;
  font-weight: bold;
}
.player-projections-table {
  padding: 20px;
  width: 250px;
  -webkit-flex: 0 0 250px;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
}
.player-projections-table .header-row {
  padding: 4px;
  border-bottom: 1px solid #ddd;
  font-size: 11px;
  font-weight: 900;
}
.player-projections-table .header-row .cell {
  display: inline-block;
  min-width: 20px;
  padding-right: 5px;
  color: #333;
}
.player-projections-table .header-row .opponent {
  width: 120px;
}
.player-projections-table .header-row .pts {
  width: 40px;
}
.player-projections-table .header-row .proj {
  width: 40px;
}
.player-projections-table .week-row {
  font-size: 11px !important;
  padding: 4px;
  border-bottom: 1px solid #ddd;
}
.player-projections-table .week-row .cell {
  display: inline-block;
  min-width: 20px;
  padding-right: 5px;
  color: #333;
}
.player-projections-table .week-row .cell .game-schedule-live-description {
  width: 120px;
}
.player-projections-table .week-row .cell .player-scoring {
  flex-direction: row;
}
.player-projections-table .week-row .cell .player-scoring >.score {
  width: 40px;
  font-size: 11px;
}
.player-projections-table .week-row .cell .player-scoring >.projections {
  width: 40px;
}
.player-stats-grid {
  display: flex;
}
.player-stats-grid .column {
  font-size: 13px;
}
.player-stats-grid .column .header-cell {
  padding-right: 25px;
  padding-bottom: 10px;
  font-weight: bold;
}
.player-stats-grid .column .cell {
  height: 30px;
}
.player-transaction-history-item {
  font-size: 13px;
  padding: 12px 8px;
}
.player-transaction-history-item .transaction-history-waiver,
.player-transaction-history-item .transaction-history-draft,
.player-transaction-history-item .transaction-history-fa,
.player-transaction-history-item .transaction-history-trade {
  display: flex;
  flex-direction: row;
}
.player-transaction-history-item .transaction-history-waiver .team-name,
.player-transaction-history-item .transaction-history-draft .team-name,
.player-transaction-history-item .transaction-history-fa .team-name,
.player-transaction-history-item .transaction-history-trade .team-name {
  font-weight: 900;
}
.player-transaction-history-item .action-column {
  width: 100px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  line-height: 12px;
}
.player-transaction-history-item .body-column {
  flex-grow: 1;
}
.player-transaction-history-item .date-time {
  font-size: 10px;
}
.player-transaction-history-item .trade-detail-for-roster {
  display: flex;
  flex-direction: row;
  padding-top: 5px;
}
.player-transaction-history-item .trade-detail-for-roster .trade-detail-item {
  font-size: 11px;
  padding: 2px 0;
}
.player-transaction-history-item .trade-detail-for-roster .trade-receive {
  padding-right: 10px;
}
.player-transaction-history-section .league-season {
  font-size: 12px;
  font-weight: bold;
  padding: 5px 0;
  margin-top: 10px;
}
.player-transaction-history .view-all-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
}
.player-transaction-history .view-all-container .view-all-divider {
  height: 1px;
  background-color: #00ceb8;
  flex-grow: 1;
}
.player-transaction-history .view-all-container .view-all-text {
  color: #00ceb8;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0 10px;
}
.player-transaction-history .no-history {
  font-size: 12px;
  text-align: center;
}
.nba-player-gamelog {
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.nba-player-gamelog .header-row-sticky-container {
  position: sticky;
  top: 0;
  background: #252d3d;
  width: 100%;
}
.nba-player-gamelog .header-row {
  display: flex;
  flex-direction: row;
  height: 28px;
  padding: 4px 0px 8px 24px;
  background: rgba(163,187,211,0.05);
}
.nba-player-gamelog .game-row {
  display: flex;
  flex-direction: row;
  height: 28px;
  padding: 4px 12px 8px 24px;
  display: flex;
  align-items: center;
}
.nba-player-gamelog .row-col {
  width: 39px;
  height: 100%;
  flex-grow: 0;
  margin: 0 4px 0 0;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  color: #a3bbd3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nba-player-gamelog .row-col.align-left {
  justify-content: flex-start;
  margin: 0 12px 0 0;
}
.nba-player-gamelog .row-spacer {
  width: 12px;
}
.nba-player-research {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.nba-player-research .research-left-panel {
  width: 600px;
}
.nba-player-research .research-left-panel .nba-player-ranking-and-percentages {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 75px;
}
.nba-player-research .research-right-panel {
  width: 300px;
}
.nba-player-research .research-right-panel h2 {
  margin-left: 12px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-recent-games {
  width: 100%;
  height: 188px;
  margin-bottom: 52px;
}
.nba-recent-games h2 {
  margin-top: 20px;
  margin-left: 24px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-season-average {
  margin-left: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.nba-season-average h2 {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-season-average .season-average-container {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}
.nba-season-average .category-row {
  width: 80px;
  height: 30px;
}
.nba-season-average .category-row .category-text {
  height: 16px;
  margin-top: 8px;
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #a3bbd3;
}
.nba-season-average .stat-row {
  width: 60px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nba-season-average .stat-row .stat-name {
  margin-left: 4px;
  margin-top: 4px;
  flex-grow: 0;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.nba-season-average .stat-row .stat-value {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
}
.nba-weekly-game-projections {
  width: 100%;
}
.nba-weekly-game-projections .game-projections-header {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  margin-left: 24px;
  width: 558px;
  justify-content: space-between;
}
.nba-weekly-game-projections .game-projections-header h2 {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-weekly-game-projections .game-projections {
  margin-left: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
}
.nba-weekly-game-projections .game-projections .left-arrow {
  margin-top: 32px;
  cursor: pointer;
}
.nba-weekly-game-projections .game-projections .right-arrow {
  margin-top: 32px;
  cursor: pointer;
}
.nba-weekly-game-projections .game-projections .projection-cards {
  width: 558px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin-right: 6px;
  margin-left: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nba-weekly-game-projections .game-projections .projection-cards::-webkit-scrollbar {
  display: none;
}
.nba-weekly-opponent-stats {
  margin-left: 24px;
  margin-top: 20px;
}
.nba-weekly-opponent-stats h2 {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.nba-weekly-opponent-stats .opponent-stats-container {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}
.nba-weekly-opponent-stats .category-row {
  width: 56px;
  height: 30px;
}
.nba-weekly-opponent-stats .category-row .category-text {
  height: 16px;
  margin-top: 8px;
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #a3bbd3;
}
.nba-weekly-opponent-stats .opponent-row {
  width: 80px;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nba-weekly-opponent-stats .opponent-row .opponent-image {
  width: 16px;
  height: 16px;
}
.nba-weekly-opponent-stats .opponent-row .opponent-name {
  margin-left: 4px;
  margin-top: 4px;
  flex-grow: 0;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.nba-weekly-opponent-stats .opponent-row .opponent-rank {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
}
.player-card-v2-gamelog {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 100%;
  width: 100%;
}
.player-card-v2-gamelog .gamelog-container {
  width: 100%;
}
.player-card-v2-gamelog .gamelog-container .season-gamelog .season-text-container {
  margin-left: 24px;
  margin-bottom: 16px;
  cursor: pointer;
}
.player-card-v2-gamelog .gamelog-container .season-gamelog .season-text-container.expanded {
  cursor: default;
}
.player-card-v2-gamelog .gamelog-container .season-gamelog .season-text {
  height: 20px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #d8e2ed;
}
.player-card-v2-header {
  width: 100%;
  position: relative;
}
.player-card-v2-header .status {
  position: absolute;
  width: 260px;
  height: 24px;
  background: linear-gradient(to right, #18202f, rgba(2,32,71,0.4), rgba(142,142,142,0));
  opacity: 0.8;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.player-card-v2-header .status img {
  height: 20px;
  width: 20px;
  margin-right: 4px;
  margin-left: 16px;
}
.player-card-v2-header .status p {
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: left;
  color: #eef2f7;
}
.player-card-v2-header .team-bg-image {
  position: absolute;
  width: 180px;
  height: 180px;
  flex-grow: 0;
  opacity: 0.24;
  top: -20px;
  left: -30px;
}
.player-card-v2-header .player-image {
  position: absolute;
  width: 156px;
  height: 105px;
  top: 10px;
  left: 20px;
}
.player-card-v2-header .top-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 168px;
}
.player-card-v2-header .top-row .player-name {
  height: 60px;
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -1px;
  text-align: left;
  color: var(--white);
}
.player-card-v2-header .top-row .player-name .player-last-name {
  font-weight: 600;
  margin-left: 8px;
}
.player-card-v2-header .top-row .player-owner i {
  color: #58a7ff;
  width: 16px;
  height: 8px;
}
.player-card-v2-header .top-row .player-owner span {
  height: 22px;
  flex-grow: 0;
  margin: 0 0 0 4px;
  font-family: Inter;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: var(--white);
}
.player-card-v2-header .trapezoid-tab {
  width: 100%;
}
.player-card-v2-header .trapezoid-tab .player-team-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 320px;
  margin-top: 28px;
  margin-left: 24px;
}
.player-card-v2-header .trapezoid-tab .player-team-info span {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.player-card-v2-header .trapezoid-tab .player-team-info .player-team-number {
  margin-left: 6px;
}
.player-card-v2-header .trapezoid-tab .player-team-info .dot-separator {
  margin-left: 16px;
  margin-right: 16px;
}
.player-card-v2-header .trapezoid-tab .player-team-info .player-team-positions {
  display: flex;
  flex-direction: row;
}
.player-card-v2-header .trapezoid-tab .player-team-info .player-team-positions .player-team-position {
  margin-right: 4px;
  font-size: 18px;
  line-height: 1.33;
}
.player-card-v2-header .trapezoid-tab .player-metrics {
  display: flex;
  flex-direction: row;
}
.player-card-v2-header .trapezoid-tab .player-metrics .vl {
  width: 1.5px;
  height: 32px;
  flex-grow: 0;
  border-radius: 16px;
  background-color: rgba(124,139,164,0.7);
  margin-left: 24px;
  margin-right: 24px;
}
.player-card-v2-header .trapezoid-tab .player-metrics .player-metric-category {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #d8e2ed;
  margin-bottom: 6px;
}
.player-card-v2-header .trapezoid-tab .player-metrics .player-metric-value {
  font-family: Inter;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: center;
  color: #fff;
}
.player-card-v2-history {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 100%;
  width: 100%;
}
.player-card-v2-history .history-container {
  width: 100%;
  height: 100%;
}
.player-card-v2-history .history-container .header-row {
  display: flex;
  flex-direction: row;
  height: 28px;
  padding: 4px 12px 8px 24px;
  background: rgba(163,187,211,0.05);
}
.player-card-v2-history .history-container .season-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 28px;
  padding: 4px 12px 8px 24px;
  display: flex;
  align-items: center;
}
.player-card-v2-history .history-container .row-col {
  width: 49px;
  height: 100%;
  flex-grow: 0;
  margin: 0 5px 0 0;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  color: #a3bbd3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.player-card-v2-history .title {
  margin-left: 24px;
  margin-bottom: 12px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-card-v2-team {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 100%;
  width: 100%;
}
.player-card-v2-team .team-rank-container {
  margin-bottom: 24px;
}
.player-card-v2-team .team-rank-container .title {
  margin-left: 24px;
}
.player-card-v2-team .team-rank-container .team-rank-row {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
}
.player-card-v2-team .team-rank-container .team-rank-row .team-rank-container .team-rank-category {
  flex-grow: 0;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-align: left;
  color: #eef2f7;
  margin-bottom: 8px;
}
.player-card-v2-team .team-rank-container .team-rank-row .team-rank-container .team-rank-value-container {
  width: 64px;
  height: 30px;
  border-radius: 4px;
  margin-right: 4px;
}
.player-card-v2-team .team-rank-container .team-rank-row .team-rank-container .team-rank-value-container .team-rank-value {
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #181c28;
  padding-top: 4px;
  padding-left: 8px;
}
.player-card-v2-team .team-depth-chart-container {
  margin-left: 24px;
  margin-bottom: 32px;
}
.player-card-v2-team .team-depth-chart-container .position-group-header {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7888a4;
  margin: 15px 0 10px 0;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart .position-group {
  margin-bottom: 20px;
  margin-right: 20px;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart .position-group .position {
  margin-bottom: 8px;
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.35px;
  text-align: left;
  color: #a3bbd3;
}
.player-card-v2-team .team-depth-chart-container .team-depth-chart .position-group .position-player {
  margin-bottom: 4px;
  font-family: Inter;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-align: left;
  color: #fff;
  cursor: pointer;
}
.player-card-v2-team .title {
  margin-bottom: 16px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-card .details-panel {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top-right-radius: 10px;
  padding-bottom: 16px;
  background: #252d3d;
}
.player-card .tabs {
  display: flex;
  flex-direction: row;
  padding: 4px 0px 20px 24px;
  background: #252d3d;
}
.player-card .tabs .tab {
  width: 116px;
  height: 40px;
  margin-right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: rgba(255,174,88,0.1);
  cursor: pointer;
}
.player-card .tabs .tab span {
  flex-grow: 0;
  font-family: Poppins;
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: normal;
  text-align: left;
  color: #ffae58;
  margin-left: 8px;
}
.player-card .tabs .tab.selected {
  background-color: #ffae58;
}
.player-card .tabs .tab.selected span {
  color: #022047;
}
.player-card .tab-content {
  background: #252d3d;
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.player-card .tab-content .hidden {
  display: none;
}
.player-game-projection-card {
  width: 104px;
  height: 70px;
  background-color: #2c3749;
  display: inline-block;
  margin: 14px 12px 14px 0px;
  position: relative;
}
.player-game-projection-card .projected-points {
  width: 100%;
  opacity: 0.7;
  background: #4a5870;
  padding-top: 12px;
  padding-bottom: 8px;
}
.player-game-projection-card .final-points {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 8px;
}
.player-game-projection-card .points-category {
  margin-left: 13px;
  font-family: Poppins;
  font-size: 9px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-game-projection-card .points-value {
  margin-left: 18px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-game-projection-card .points-value.final {
  color: #fff;
  margin-left: 16px;
}
.player-game-projection-card .opponent-schedule {
  position: absolute;
  width: 75px;
  height: 18px;
  padding: 1px 11px;
  background: #d8e2ed;
  top: -12px;
  left: 4px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.player-game-projection-card .opponent-schedule span {
  flex-grow: 0;
  font-family: Poppins;
  font-size: 9px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: 0.25px;
  text-align: left;
  color: #344054;
  margin-top: 2px;
}
.player-game-projection-card .opponent-schedule .opponent {
  margin-left: 4px;
}
.player-game-projection-card:last-child {
  margin: 14px 0px 14px 0px;
}
.player-ownership-percentage h2 {
  margin-left: 24px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
  margin-bottom: 8px;
}
.player-ownership-percentage span {
  flex-grow: 0;
  font-family: Inter;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
  margin-left: 24px;
}
.player-rankings h2 {
  margin-left: 24px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: -0.25px;
  text-align: left;
  color: #a3bbd3;
}
.player-rankings .rank-fields {
  display: flex;
  flex-direction: row;
}
.player-rankings .rank-fields .field {
  margin-left: 24px;
  margin-top: 8px;
}
.player-rankings .rank-fields .field span {
  flex-grow: 0;
  font-family: Inter;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: #fff;
}
.player-rankings .rank-fields .field span.field-name {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.25px;
  margin-left: 4px;
}
.invite-friend-item-container {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 50px;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
}
.invite-friend-item-container .avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a3bbd3;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  position: relative;
}
.invite-friend-item-container .opacity-wrapper {
  opacity: 0.4;
}
.invite-friend-item-container .text {
  font-size: 10px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.invite-friend-item-container .floating-status {
  position: absolute;
  right: -4px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 30px;
  background-color: #1c212d;
  z-index: 99;
}
.predraft-keeper-card {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background-color: #2c3647;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  max-height: 220px;
  flex-direction: column;
  overflow: hidden;
  font-weight: 500;
  margin-bottom: 16px;
}
.predraft-keeper-card-locked {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background-color: #2c3647;
  color: #88909d;
  font-family: 'Poppins', sans-serif;
  max-height: 220px;
  flex-direction: column;
  overflow: hidden;
  font-weight: 500;
  margin-bottom: 16px;
  align-items: center;
  text-align: center;
}
.predraft-keeper-card-locked .subtitle {
  opacity: 0.4 !important;
}
.predraft-keeper-card-locked .extra-avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #808080;
  border-radius: 16px;
  width: 32px;
  height: 32px;
}
.predraft-keeper-card-locked .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.predraft-keeper-card-locked .button-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 16px;
  z-index: 1;
  height: 56px;
}
.predraft-keeper-card-locked .keeper-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
}
.predraft-keeper-card-locked .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
}
.predraft-keeper-card-locked .subtitle {
  color: #b9c4d4;
  font-size: 14px;
  line-height: 18px;
  z-index: 10;
}
.predraft-keeper-card-locked .settings {
  cursor: pointer;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(58,70,91,0.5);
}
.predraft-keeper-card-locked .draft-button {
  display: flex;
  height: 100%;
  border-radius: 28px;
  background-color: rgba(216,226,237,0.1);
  border: 1px solid #fff;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px;
  min-width: 160px;
}
.predraft-keeper-card-locked .draft-button .divider {
  height: 16px;
  width: 2px;
  background-color: #022047;
  margin: 0 4px;
}
.predraft-keeper-card-locked .focus {
  background-color: #00ceb8;
  color: #022047;
  border: none;
}
.predraft-keeper-card-locked .focus.nba {
  background-color: #ffae58;
}
.predraft-keeper-card-locked .disable {
  background-color: #808080;
  cursor: default;
  opacity: 0.7;
}
.predraft-keeper-card-locked .name {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.predraft-keeper-card-locked .countdown-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  max-height: 88px;
  border-radius: 24px;
  background-color: #1c212d;
  opacity: 0.85;
  padding: 16px;
  box-sizing: border-box;
  margin-top: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.predraft-keeper-card-locked .countdown-container .drafting-text {
  font-size: 14px;
  color: #00ceb8;
  min-width: 105px;
}
.predraft-keeper-card-locked .countdown-container .username {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 16px;
  max-width: 90px;
  overflow: hidden;
}
.predraft-keeper-card-locked .countdown-container .draft-pos {
  font-size: 10px;
  color: #b9c4d4;
  font-weight: 200;
  margin-top: 4px;
}
.predraft-keeper-card-locked .countdown-container .dots {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  font-size: 14;
  margin: 0 2px;
}
.predraft-keeper-card-locked .countdown-container .date-number-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 56px;
}
.predraft-keeper-card-locked .countdown-container .date-number-container .number {
  font-size: 40px;
  color: #00ceb8;
}
.predraft-keeper-card-locked .countdown-container .date-number-container .text {
  font-size: 9px;
  color: #b9c4d4;
}
.predraft-keeper-card-locked .countdown-container .date-number-container .empty-time {
  height: 4px;
  width: 16px;
  background-color: #b9c4d4;
  margin-bottom: 8px;
  margin-top: 8px;
}
.predraft-keeper-card-locked .countdown-container .space-top {
  margin-top: 8px;
}
.league-invite-friends-cta-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 24px;
  background-color: rgba(58,70,91,0.25);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 24px;
  margin-bottom: 16px;
}
.league-invite-friends-cta-container .subtitle {
  font-size: 14px;
  color: #b9c4d4;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}
.league-invite-friends-cta-container .invite-friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80px;
  width: 50px;
  margin-right: 8px;
  cursor: pointer;
}
.league-invite-friends-cta-container .invite-friend .invite-circle {
  display: flex;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  border: 2px solid #00ceb8;
  background-color: rgba(0,186,255,0.1);
  align-items: center;
  justify-content: center;
}
.league-invite-friends-cta-container .invite-friend .invite-text {
  font-size: 12px;
  line-height: 20px;
  color: #00ceb8;
  text-align: center;
}
.league-invite-friends-cta-container .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.league-invite-friends-cta-container .invite-list-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-height: 80px;
}
.league-invite-friends-cta-container .divider {
  display: flex;
  height: 40px;
  width: 2px;
  background-color: #a3bbd3;
  margin-top: 8px;
  border-radius: 4px;
  margin-left: 8px;
  margin-right: 8px;
}
.league-invite-friends-cta-container .link-container {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 40px;
  padding: 12px;
  color: #fff;
  background-color: rgba(58,70,91,0.25);
  border-radius: 16px;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.league-invite-friends-cta-container .link-container .text {
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
}
.league-invite-friends-cta-container .share-link {
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 83px;
  border-radius: 50px;
  cursor: pointer;
  color: #022047;
  font-size: 14px;
  font-weight: 600;
}
.predraft-draftboard-card {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  border-radius: 24px;
  padding: 24px;
  background-color: #5e72e4;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  max-height: 220px;
  flex-direction: column;
  overflow: hidden;
  font-weight: 500;
  margin-bottom: 16px;
}
.predraft-draftboard-card .draftboar-img-container {
  position: absolute;
  top: 0;
  right: 0;
}
.predraft-draftboard-card .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.predraft-draftboard-card .button-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 16px;
  z-index: 1;
}
.predraft-draftboard-card .title {
  font-size: 18px;
  line-height: 24px;
  color: #fff;
}
.predraft-draftboard-card .subtitle {
  color: #b9c4d4;
  font-size: 14px;
  line-height: 18px;
  z-index: 10;
}
.predraft-draftboard-card .preview {
  font-size: 12px;
  color: #b9c4d4;
  text-decoration: underline;
  cursor: pointer;
  line-height: 18px;
}
.predraft-draftboard-card .settings {
  cursor: pointer;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(58,70,91,0.5);
}
.predraft-draftboard-card .draft-button {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 56px;
  border-radius: 28px;
  background-color: rgba(216,226,237,0.1);
  border: 1px solid #fff;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px;
  max-width: 160px;
}
.predraft-draftboard-card .draft-button .divider {
  height: 16px;
  width: 2px;
  background-color: #022047;
  margin: 0 4px;
}
.predraft-draftboard-card .focus {
  background-color: #00ceb8;
  color: #022047;
  border: none;
}
.predraft-draftboard-card .focus.nba {
  background-color: #ffae58;
}
.predraft-draftboard-card .disable {
  background-color: #808080;
  cursor: default;
  opacity: 0.7;
}
.predraft-draftboard-card .name {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.predraft-draftboard-card .description {
  font-size: 10px;
  margin-top: 4px;
  text-align: center;
}
.predraft-draftboard-card .countdown-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  max-height: 88px;
  border-radius: 24px;
  background-color: #1c212d;
  opacity: 0.85;
  padding: 16px;
  box-sizing: border-box;
  margin-top: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.predraft-draftboard-card .countdown-container .drafting-text {
  font-size: 14px;
  color: #00ceb8;
  min-width: 105px;
}
.predraft-draftboard-card .countdown-container .username {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 16px;
  max-width: 90px;
  overflow: hidden;
}
.predraft-draftboard-card .countdown-container .draft-pos {
  font-size: 10px;
  color: #b9c4d4;
  font-weight: 200;
  margin-top: 4px;
}
.predraft-draftboard-card .countdown-container .dots {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  font-size: 14;
  margin: 0 2px;
}
.predraft-draftboard-card .countdown-container .date-number-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 56px;
}
.predraft-draftboard-card .countdown-container .date-number-container .number {
  font-size: 40px;
  color: #00ceb8;
}
.predraft-draftboard-card .countdown-container .date-number-container .text {
  font-size: 9px;
  color: #b9c4d4;
}
.predraft-draftboard-card .countdown-container .date-number-container .empty-time {
  height: 4px;
  width: 16px;
  background-color: #b9c4d4;
  margin-bottom: 8px;
  margin-top: 8px;
}
.predraft-draftboard-card .countdown-container .space-top {
  margin-top: 8px;
}
.predraft-panel {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  max-height: 100%;
  height: 100%;
}
.predraft-tab-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: auto;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  padding: 0 24px;
}
.predraft-tab-container .content-container {
  display: flex;
  flex-direction: column;
  min-width: 460px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
  flex-grow: 1;
}
.predraft-tab-container .predraft-tab-selector {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.predraft-tab-container .predraft-tab-selector .horizontal-pill-selector {
  display: flex;
  flex-direction: row;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.predraft-tab-container .predraft-tab-selector .horizontal-pill-selector .option-item {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.predraft-tab-container .predraft-tab-selector .horizontal-pill-selector .selected-pill-background {
  background-color: #00ceb8;
  shadow: none;
}
.predraft-tab-container .setting-button {
  cursor: pointer;
  font-size: 24px;
}
.predraft-tab-container .member-settings-menu {
  background: #18202e;
  box-shadow: 1px 1px 15px #18202f;
}
.predraft-tab-container .menu-item:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.predraft-tab-container .menu-item:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.predraft-tab-container .context-menu,
.predraft-tab-container.dark {
  background: #18202e;
  color: #fff;
  z-index: 999;
  border-radius: 16px;
}
.predraft-tab-container .context-menu .pointer .fa-caret-up,
.predraft-tab-container.dark .pointer .fa-caret-up,
.predraft-tab-container .context-menu .pointer .fa-caret-down,
.predraft-tab-container.dark .pointer .fa-caret-down {
  color: #18202e;
}
.predraft-tab-container .league-transaction-item-waiver-container {
  border-bottom: 1px solid #181c28;
}
.predraft-tab-container .title-section {
  padding: 16px;
  margin-bottom: 32px;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 50px;
  box-sizing: border-box;
}
.predraft-tab-container .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.predraft-tab-container .title {
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  font-weight: 500;
}
.predraft-tab-container .subtitle {
  font-size: 14px;
  color: #fff;
  opacity: 0.7;
}
.predraft-tab-container .view {
  font-size: 12px;
  color: #00ceb8;
  cursor: pointer;
  font-weight: 600;
}
.predraft-tab-container .league-activity-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 24px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
  margin-top: 16px;
  overflow: hidden;
  margin-bottom: 32px;
}
.predraft-tab-container .team-panel .team-roster .team-roster-item .player-name-wrapper .bye-week {
  position: relative;
  top: 2px;
}
.predraft-tab-container .scoring-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  margin-top: 16px;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.predraft-tab-container .scoring-settings {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
}
.predraft-tab-container .scoring-settings .scoring-notice {
  font-size: 12px;
  color: #a3bdd3;
}
.predraft-tab-container .scoring-settings .grouping-header {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  margin-top: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.predraft-tab-container .scoring-settings .settings-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius: 5px;
}
.predraft-tab-container .scoring-settings .settings-row.highlight {
  background-color: #ffffc7;
  padding: 8px !important;
}
.predraft-tab-container .scoring-settings .settings-row .name {
  font-size: 12px;
  color: #7988a1;
  font-weight: 600px;
}
.predraft-tab-container .scoring-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.predraft-tab-container .scoring-settings .settings-row .value .plus {
  color: #00ceb8;
}
.predraft-tab-container .scoring-settings .settings-row .value .minus {
  color: #ff2b6d;
}
.predraft-tab-container .league-settings-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  box-sizing: border-box;
  background: rgba(163,187,211,0.05);
  border: 1px solid rgba(58,70,91,0.5);
}
.predraft-tab-container .league-settings-container .league-settings {
  display: flex;
  flex-direction: column;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 20px 0px;
  flex-direction: row;
  justify-content: space-between;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row .name {
  color: #7988a1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600px;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row .value {
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  margin-left: 60px;
  text-align: right;
}
.predraft-tab-container .league-settings-container .league-settings .settings-row .bold {
  font-weight: 700;
}
.user-profile {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
  width: 300px;
  height: 450px;
  display: flex;
  flex-direction: column;
}
.user-profile .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.user-profile .menu-item:hover {
  background: #18202f;
}
.user-profile .loader {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-profile >.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  background: #fff;
}
.user-profile >.body >.profile {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 0 10px 0;
}
.user-profile >.body >.profile >.name {
  font-weight: bold;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.user-profile >.body >.profile >.role {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  color: #bbb;
  margin-top: 3px;
}
.user-profile >.body >.profile >.cookies {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  margin-top: 3px;
}
.user-profile >.body >.profile >.mutual-friends {
  font-size: 11px;
  margin: 15px 0 10px 0;
}
.user-profile >.menu {
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
  border-top: 1px solid #eee;
  background: #fff;
  display: flex;
  color: #999;
}
.user-profile >.menu i {
  height: 16px !important;
}
.user-profile >.menu .menu-text {
  font-size: 10px;
  margin-top: 2px;
}
.user-profile >.menu >div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
.user-profile >.menu >div:hover {
  background: #efefef;
}
.user-profile >.menu >div.ban-btn .unban {
  display: none !important;
}
.user-profile >.menu >div.ban-btn:hover .unban {
  display: block !important;
}
.user-profile >.menu >div.ban-btn:hover .ban {
  display: none !important;
}
.user-profile >.menu .confirmation {
  color: #61a80d;
}
.user-profile >.menu .confirmation .fa {
  position: relative;
}
.user-profile >.menu .confirmation .fa .fa {
  font-size: 8px;
  position: absolute;
}
.user-profile >.footer {
  flex-grow: 1;
}
.right-panel-slider {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  max-height: 100vh;
  height: 100%;
  max-width: 704px;
  width: 0%;
  right: 0px;
  background-color: #2d3649;
  border-top-left-radius: 24px;
  z-index: 9000;
  position: absolute;
  transition: width 0.25s ease-in-out;
  flex-wrap: nowrap;
  overflow: hidden;
}
.right-panel-slider.open {
  width: 100%;
}
.settings-panel-container {
  height: 100%;
}
.settings-panel-container .panel-with-sub-nav .sub-nav {
  -webkit-flex: 0 0 260px !important;
  -ms-flex: 0 0 260px !important;
  flex: 0 0 260px !important;
}
.settings-container {
  padding: 38px 40px;
  height: 100%;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.settings-container .header .header-title {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  color: #fff;
}
.settings-container .header .header-text {
  letter-spacing: 0.2px;
  line-height: 1.64;
  color: #a3bbd3;
  font-size: 14px;
}
.settings-container .bottom .bottom-text {
  letter-spacing: 0.2px;
  line-height: 1.64;
  color: #a3bbd3;
  font-size: 14px;
}
.settings-container .support-settings-page {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.settings-container .support-settings-page .sub-header {
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  color: #fff;
}
.settings-container .support-settings-page .description {
  letter-spacing: 0.2px;
  line-height: 1.64;
  color: #a3bbd3;
  font-size: 15px;
  margin-right: 20px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.settings-container .support-settings-page .action-button {
  align-items: center;
  justify-content: center;
  padding: 12px;
  height: 40px;
  border-radius: 16px;
  background: #00ceb8;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  color: #fbfbfb;
}
.settings-container .support-settings-page .row {
  flex-direction: row;
  margin-bottom: 25px;
  display: flex;
}
.settings-container .content .bottom-wrap {
  padding: 35px 0;
}
.settings-container .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #181c28;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.settings-container .spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  -ms-animation: spin 1s linear infinite;
  -o-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.new-side-discussion-topic-form-container {
  display: block;
  margin: 0 25px;
}
.new-side-discussion-topic-form-container .create-new-cta {
  text-align: center;
  position: relative;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation {
  display: flex;
  justify-content: center;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation .button:before {
  content: '';
  display: block;
/*Make it a small rectangle so the border will create an L-shape*/
  width: 3px;
  height: 9px;
/*Add a white border on the bottom and left, creating that 'L' */
  border: solid #fff;
  border-width: 0 2px 2px 0;
/*Rotate the L 45 degrees to turn it into a checkmark*/
  transform: rotate(45deg);
  position: absolute;
  top: 9px;
  left: 12px;
  pointer-events: none;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation .button button {
  min-width: 0;
  height: 30px !important;
  width: 30px !important;
  color: transparent;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  display: block;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation .button button.cancel {
  border: none;
  background: #f15555;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation .button:nth-child(2) {
  margin-left: 8px;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation .button:nth-child(2):before {
  content: 'X';
  font-size: 11px;
  border: none;
  transform: rotate(0deg);
  top: 9px;
  left: 12px;
  color: #fff;
}
.new-side-discussion-topic-form-container .create-new-cta.confirmation .button.loading:before {
  display: none;
}
.new-side-discussion-topic-form {
  transition: all 0.2s ease;
  position: relative;
}
.new-side-discussion-topic-form.show {
  height: auto;
}
.new-side-discussion-topic-form.show .button button {
  padding-left: 35px;
  padding-right: 35px;
}
.new-side-discussion-topic-form .topic-type-selector {
  position: absolute;
  top: 0;
}
.new-side-discussion-topic-form .topic-type-selector .selected-tag-item .meta .title {
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  box-sizing: border-box;
  width: 78px;
  overflow: hidden;
  line-height: 18px;
  border-radius: 0;
}
.new-side-discussion-topic-form .topic-type-selector .topic-type-options {
  top: 25px;
  left: -1px;
  z-index: 2;
}
.new-side-discussion-topic-form textarea {
  display: block;
  outline: none;
  border: 1px solid #ccc;
  width: 100%;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  padding: 0 10px;
  padding-left: 88px;
}
.new-side-discussion-topic-form >.footer-container {
  display: flex;
  margin-top: 5px;
  margin-bottom: 15px;
}
.new-side-discussion-topic-form .loader-message {
  font-size: 11px;
  color: #aaa;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.new-side-discussion-topic-form .char-counter {
  font-size: 11px;
  color: #aaa;
  text-align: right;
}
.new-side-discussion-topic-form .error-message {
  border-left: 5px solid #fd0000;
  padding: 15px;
  font-size: 13px;
  line-height: 1.25;
  color: #fd0000;
  background: #ffe5e6;
  font-weight: bold;
  margin-bottom: 15px;
}
.modal-item >.new-topic-form {
  box-shadow: 1px 1px 15px #18202f;
  box-shadow: 1px 1px 10px #18202f;
  width: 60vw;
  height: 80vh;
  min-width: 300px;
  min-height: 200px;
  background: #283245;
  overflow: auto;
  border-radius: 10px;
  color: #fff;
  width: 300px !important;
  height: 110px !important;
  padding: 20px;
  background: #fff;
  min-height: 110px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}
.side-discussion-chat-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}
.side-discussion-chat-panel .header-info-container {
  position: absolute;
  top: 5px;
  left: 38px;
  z-index: 1;
  display: flex;
  flex-direction: row;
}
.side-discussion-chat-panel .discussion-tag {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 20px;
}
.side-discussion-chat-panel .topic-subscription-toggle-wrapper {
  margin-left: 5px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.side-discussion-chat-panel .topic-subscription-toggle-wrapper:hover {
  transform: scale(1.1);
}
.side-discussion-chat-panel .chat-panel {
  flex-grow: 1;
  height: auto;
  margin: 15px 20px;
  border: 1px solid #efefef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 1px 1px 15px #ddd;
}
.side-discussion-chat-panel .chat-panel .role {
  display: none;
}
.side-discussion-chat-panel .chat-panel .chat-default-copy-item {
  display: none;
}
.side-discussion-chat-panel .chat-panel .chat-header {
  border-bottom: none;
}
.side-discussion-chat-panel .chat-panel .chat-header .name-container .name {
  font-size: 14px;
}
.side-discussion-chat-panel .chat-panel .chat-header .button {
  display: none;
}
.side-discussion-chat-panel .chat-panel .chat-header .header-meta {
  display: none;
}
.side-discussion-chat-panel .chat-panel .chat-input {
  border-top-color: #efefef !important;
}
.side-discussion-chat-panel .chat-panel .body-container .topic-chat-presence {
  display: none;
}
.side-discussion-container {
  height: 100%;
}
.side-discussion-container .discussion-nav-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.side-discussion-container .discussion-nav-container .list-tab {
  height: 100%;
  transition: all 0.2s ease;
  opacity: 1;
}
.side-discussion-container .discussion-nav-container .list-tab.in-background {
  opacity: 0;
}
.side-discussion-container .discussion-nav-container .list-tab .list-tab-header {
  height: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-flex: 0 0 63px;
  -ms-flex: 0 0 63px;
  flex: 0 0 63px;
}
.side-discussion-container .discussion-nav-container .list-tab .list-tab-header .title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.side-discussion-container .discussion-nav-container .list-tab .list-tab-header .description {
  font-size: 12px;
  margin-top: 5px;
  opacity: 0.5;
}
.side-discussion-container .discussion-nav-container .detail-tab {
  transition: all 0.3s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}
.side-discussion-container .discussion-nav-container .detail-tab .close-detail {
  position: fixed;
  top: 4px;
  right: 7px;
  padding: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #847aff;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}
.side-discussion-container .discussion-nav-container .detail-tab .close-detail:hover {
  transform: scale(1.1);
}
.side-discussion-list-panel {
  height: calc(100vh - 63px);
  overflow: auto;
}
.side-discussions-list-wrapper .side-discussions-list .panel-empty-state {
  pointer-events: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper {
  margin: 15px 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper:hover {
  background-color: #f9f9f9 !important;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .meta-wrapper {
  flex-direction: row;
  align-items: center;
  display: flex;
  flex-grow: 1;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-subscription-toggle {
  padding: 10px 15px;
  cursor: pointer;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-subscription-toggle i {
  color: #ccc;
  transition: all 0.2s ease;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-subscription-toggle:hover i {
  transform: scale(1.1);
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item {
  border-bottom: none;
  transition: all 0.2s ease;
  border-radius: 10px;
  padding: 20px;
  padding-right: 50px;
  flex-grow: 1;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item:hover {
  background: #f9f9f9;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item .header-container {
  margin: 0;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item .header-container .user {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item .header-container .timestamp {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item .header-container .num-comments {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .topic-item .body-container {
  margin-top: 0;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .discussion-tag {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  left: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 3px solid;
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .discussion-tag-wrapper {
  -webkit-flex: 0 0 46px;
  -ms-flex: 0 0 46px;
  flex: 0 0 46px;
  margin-left: 10px;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel {
  height: auto;
  border: 1px solid #efefef;
  border-radius: 10px;
  background: #fff;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .topic-chat-presence {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .chat-input {
  border-top-color: #efefef;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .chat-header .header-meta {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .chat-header .button {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .body-container {
  flex-grow: 0;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .footer-container {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper .chat-panel .footer-container .chat-input {
  border-top: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper.selected .chat-panel {
  height: 350px;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper.selected .chat-panel .body-container {
  flex-grow: 1;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper.selected .chat-panel .footer-container {
  display: block;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper.selected .chat-panel .footer-container .chat-input {
  border-top: 1px solid #efefef;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper.selected .comment-list .name-container .role {
  display: none;
}
.side-discussions-list-wrapper .side-discussions-list .side-discussion-item-wrapper.selected .comment-list .chat-default-copy-item {
  display: none;
}
.side-panel-container {
  height: 100%;
  border-left: 1px solid #efefef;
}
.sign-up-layout {
  background: #17202f;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #fff;
}
.sign-up-layout a {
  text-decoration: none;
}
.sign-up-layout input {
  text-align: center;
  width: 300px;
}
.sign-up-layout header {
  padding: 40px 50px;
  display: flex;
  flex-direction: row;
}
.sign-up-layout header .logo {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
  padding-left: 40px;
}
.sign-up-layout header .logo img {
  display: inline-block;
  position: absolute;
  width: 45px;
  height: 45px;
  top: -16px;
  left: -5px;
}
.sign-up-layout header .auth-links {
  flex-grow: 1;
  text-align: right;
  margin-top: 3px;
}
.sign-up-layout header .auth-links a {
  text-transform: uppercase;
  padding: 0 15px;
  font-weight: bold;
  color: #fff;
  opacity: 0.7;
  transition: all 0.3s ease;
  font-size: 13px;
  cursor: pointer;
}
.sign-up-layout header .auth-links a:hover {
  opacity: 1;
}
.sign-up-layout .content-container {
  flex-grow: 1;
  padding: 0 50px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sign-up-layout .content-container h1 {
  font-size: 26px;
  letter-spacing: 1px;
  margin-bottom: 15px;
  font-weight: bold;
}
.sign-up-layout .content-container p {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
  letter-spacing: 0.5px;
  line-height: 1.35;
  font-weight: 300;
}
.sign-up-layout .content-container .avatar {
  width: 200px;
  height: 200px;
  margin: 60px 0 30px 0;
  border-radius: 50%;
  border: 8px solid #98df83;
  display: flex;
  background: #fff;
  background-repeat: no-repeat;
  background-size: 70% 70%;
  background-position: center center;
  align-items: center;
  justify-content: center;
}
.sign-up-layout .content-container .avatar.default {
  background: #fff;
  background-size: contain;
  border: 8px solid rgba(255,255,255,0.5);
}
.sign-up-layout .content-container .avatar-selector-container {
  margin: 20px 0;
}
.sign-up-layout .content-container input {
  margin: 30px 0;
}
.sign-up-layout .content-container button {
  margin: 0 auto;
}
.sign-up-layout .content-container a {
  font-size: 13px;
  opacity: 0.7;
  display: inline-block;
}
.sign-up-layout .content-container a.forgot-link {
  margin-top: 15px;
}
.sign-up-layout footer {
  padding: 40px 50px;
  text-align: center;
}
.sign-up-layout footer a {
  padding: 0 15px;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.sign-up-layout footer a:hover {
  opacity: 1;
}
.sign-up-layout footer span {
  padding: 0 15px;
  font-size: 11px;
  color: #fff;
}
.sign-up-layout .header-text {
  height: 90px;
}
.sign-up-layout .steps {
  overflow: hidden;
  width: 300px;
  height: 165px;
  position: relative;
  margin: 0 auto;
}
.sign-up-layout .steps .step-1 {
  display: inline-block;
  position: absolute;
  transition: left 0.3s ease;
  left: 0;
}
.sign-up-layout .steps .step-1.hide {
  left: -300px;
}
.sign-up-layout .steps .step-2 {
  display: inline-block;
  position: absolute;
  transition: left 0.3s ease;
  left: 300px;
}
.sign-up-layout .steps .step-2.show {
  left: 0;
}
.global-active-lounge {
  position: absolute;
  right: 40px;
  bottom: 110px;
  transition: all 0.2s ease;
  transform: scale(0);
}
.global-active-lounge.show {
  transform: scale(1);
  z-index: 999;
}
.league-nav-item-lounge-indicator {
  transition: all 0.1s ease;
  transform: scale(0);
}
.league-nav-item-lounge-indicator.show {
  transform: scale(1);
}
.league-nav-item-lounge-indicator img {
  width: 20px;
  height: 20px;
}
.league-nav-item-lounge-indicator .num-people-in-lounge-indicator {
  position: absolute;
  top: -8px;
  right: 14px;
}
.mute-button {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #344054;
  box-sizing: border-box;
  cursor: pointer;
}
.mute-button i {
  color: #344054;
}
.mute-button.muted {
  background: #344054;
}
.mute-button.muted i {
  color: #fff;
}
.mute-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  transform: scale(0);
}
.mute-indicator.muted {
  transform: scale(1);
  color: #fff;
  background-color: #eb446f;
  font-size: 10px;
}
.num-people-in-lounge-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #00ceb8;
  font-size: 9px;
  font-weight: 900;
  color: #022047;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
  text-align: center;
  transition: all 0.3s ease;
  transform: scale(0);
}
.num-people-in-lounge-indicator.show {
  transform: scale(1);
}
.users-in-lounge-agora {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.users-in-lounge-agora .user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.users-in-lounge-agora .user-item .display-name {
  max-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  margin-top: 3px;
  line-height: 14px;
  color: #344054;
}
.users-in-lounge-agora .show-more {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
.users-in-lounge-presence {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.users-in-lounge-presence .user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.users-in-lounge-presence .user-item .display-name {
  max-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  margin-top: 3px;
  color: #344054;
}
.users-in-lounge-presence .show-more {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
.video-chat-avatar {
  position: relative;
}
.video-chat-avatar .speaking-border {
  background: #fff;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 0;
}
.video-chat-avatar .speaking-border.speaking {
  opacity: 1;
}
.video-chat-avatar .avatar {
  z-index: 2;
  position: absolute;
}
.video-chat-avatar .mute-indicator {
  position: absolute;
  bottom: -2px;
  right: -5px;
  z-index: 3;
}
.video-chat-draft-avatar {
  position: relative;
}
.video-chat-draft-avatar .avatar-wrapper {
  position: relative;
}
.video-chat-draft-avatar .avatar-wrapper .user-presence-in-lounge-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  bottom: -2px;
  right: -5px;
  background: #4aa79f;
  color: #022047;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.voice-container {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-direction: column;
  background-color: #3a465b;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  height: 424px;
}
.voice-container .row {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.voice-container .voice-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  border-bottom: 1px solid #18202f;
  padding: 0 16px;
}
.voice-container .voice-header .minimize-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  background-color: #2d3649;
  cursor: pointer;
  margin-left: 12px;
}
.voice-container .voice-header .minimize-voice:hover {
  background-color: #d8e2ed;
}
.voice-container .voice-header .right-option-container {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.voice-container .voice-header .right-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  background-color: #2d3649;
  border: 1px solid #6a7790;
  border-radius: 20px;
  cursor: pointer;
}
.voice-container .voice-header .right-option.new-message {
  background-color: rgba(58,70,91,0.5);
}
.voice-container .voice-header .right-option.is-hover {
  background-color: #6a7790;
}
.voice-container .voice-header .right-option:hover {
  background-color: #d8e2ed;
}
.voice-container .voice-header .voice-title {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
.voice-container .voice-body {
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex-grow: 1;
}
.voice-container .voice-footer {
  display: flex;
  height: 68px;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  justify-content: space-between;
}
.voice-container .voice-footer .mute {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff2b6d;
  height: 40px;
  width: 40px;
  border-radius: 50px;
  cursor: pointer;
}
.voice-container .voice-footer .deafen {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  height: 40px;
  width: 40px;
  border-radius: 50px;
}
.voice-container .voice-footer .leave {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  height: 40px;
  width: 158px;
  border-radius: 28px;
  border: 1px solid #ff2b6d;
  cursor: pointer;
}
.voice-container .voice-footer .leave .leave-text {
  font-size: 14px;
  color: #ff2b6d;
  font-family: 'Poppins', sans-serif;
}
.voice-lounge-button-container {
  position: relative;
}
.voice-lounge-button-container .overlay-league-open {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-lounge-button-container .voice-lounge-button {
  border-radius: 50%;
  position: relative;
  borderWidth: 1;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  opacity: 0.9;
}
.voice-lounge-button-container .voice-lounge-button.new-message {
  background: rgba(45,54,73,0.5);
}
.voice-lounge-button-container .voice-lounge-button img {
  width: 24px;
  height: 24px;
}
.voice-lounge-button-container .voice-lounge-button .num-people-in-lounge-indicator {
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: 2;
}
.voice-lounge-button-container .voice-lounge-button.expanded {
  background-color: rgba(0,206,184,0.7);
}
.voice-lounge-button-container .voice-lounge-modal-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: -8px;
  width: 320px;
  height: 294px;
  top: 55px;
  z-index: 9999;
}
.voice-lounge-button-container .voice-lounge-modal-wrapper.is-global {
  bottom: 75px;
  top: auto;
}
.voice-lounge-button-container .voice-lounge-modal-wrapper .down-pointer {
  background-color: #d8e2ed;
  width: 16px;
  height: 16px;
  position: absolute;
  transform: rotate(45deg);
  top: -6px;
  right: 20px;
  border-radius: 3px;
}
.voice-lounge-button-container .voice-lounge-modal-wrapper .down-pointer.is-global {
  bottom: -8px;
  top: auto;
}
.theme-dark .voice-lounge-button {
  background: #677897;
}
.voice-lounge-modal {
  width: 320px;
  height: 294px;
  border-radius: 16px;
  background: #d8e2ed;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px;
}
.voice-lounge-modal.global {
  height: 376px;
  background-color: #3a465b;
}
.voice-lounge-modal .users-in-lounge-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.voice-lounge-modal .action-button {
  width: 116px;
  height: 32px;
  border-radius: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00ceb8;
  color: #022047;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
}
.voice-lounge-modal .action-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.voice-lounge-modal .action-buttons .side-button-container {
  -webkit-flex: 0 0 40px;
  -ms-flex: 0 0 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-lounge-modal .action-buttons .side-button-container .close {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #344054;
  box-sizing: border-box;
  cursor: pointer;
}
.voice-lounge-modal .action-buttons .side-button-container .close img {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}
.voice-lounge-modal .action-buttons .center-button-container {
  flex-grow: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-lounge-modal .lounge-title {
  color: #022047;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.voice-lounge-modal .lounge-title img {
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
  left: -3px;
}
.voice-lounge-modal .default-text {
  font-size: 14px;
  line-height: 16px;
  color: #022047;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.voice-lounge-modal .default-text .text-body {
  margin-top: 5px;
}
.vertical-divider {
  display: inline-block;
  padding: 0 5px;
}
.rotate {
  transform: rotate(45deg);
}
.spinner {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 0.25rem solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  -webkit-animation: spin 0.5s infinite linear;
  -moz-animation: spin 0.5s infinite linear;
  -ms-animation: spin 0.5s infinite linear;
  -o-animation: spin 0.5s infinite linear;
  animation: spin 0.5s infinite linear;
  display: inline-block;
}
.spinner.grey {
  border: 0.25rem solid rgba(0,0,0,0.05);
  border-top-color: #ccc;
}
.spinner.green {
  border: 0.25rem solid rgba(0,216,167,0.25);
  border-top-color: #00d8a7;
}
.centered-self {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.default-text {
  font-size: 13px;
  color: #bbb;
}
.typing-indicator {
  background-color: #e6e7ed;
  will-change: transform;
  width: auto;
  border-radius: 50px;
  padding: 10px;
  display: table;
  margin: 0 auto;
  position: relative;
  transition: all 0.2s ease;
}
.typing-indicator.show {
  transform: scale(1);
}
.typing-indicator span {
  height: 5px;
  width: 5px;
  float: left;
  margin: 0 1px;
  background-color: #9e9ea1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}
.typing-indicator span:nth-child(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
  -moz-animation: 1s blink infinite 0.3333s;
  -ms-animation: 1s blink infinite 0.3333s;
  -o-animation: 1s blink infinite 0.3333s;
  animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-child(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
  -moz-animation: 1s blink infinite 0.6666s;
  -ms-animation: 1s blink infinite 0.6666s;
  -o-animation: 1s blink infinite 0.6666s;
  animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-child(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
  -moz-animation: 1s blink infinite 0.9999s;
  -ms-animation: 1s blink infinite 0.9999s;
  -o-animation: 1s blink infinite 0.9999s;
  animation: 1s blink infinite 0.9999s;
}
.notification-alert {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.2px;
}
.notification-alert.bad {
  background: #e72d61;
  color: #fff;
}
.notification-alert.warning {
  background: #ffd900;
  color: #9e6d0b;
}
.modal-container {
  background: #283244;
  border: 1px solid #18202f;
  box-shadow: 1px 1px 15px #18202f;
}
.modal-container .menu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
}
.modal-container .menu-item:hover {
  background: #18202f;
}
.panel-empty-state {
  text-align: center;
  height: calc(100vh - 65px);
  position: relative;
  top: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.panel-empty-state >i {
  font-size: 50px;
  color: #bbb;
  margin-bottom: 25px;
}
.panel-empty-state >.title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #bbb;
}
.panel-empty-state >.description {
  font-size: 13px;
  margin-top: 5px;
  color: #ccc;
}
.full-screen-layout {
  width: 100vw;
  height: 100vh;
}
.fade-in {
  -webkit-animation: fadeIn 0.5s forwards;
  -moz-animation: fadeIn 0.5s forwards;
  -ms-animation: fadeIn 0.5s forwards;
  -o-animation: fadeIn 0.5s forwards;
  animation: fadeIn 0.5s forwards;
}
.context-menu .context-menu-container {
  border-radius: 4px;
}
.context-menu .context-menu-container .context-menu-item {
  padding: 13px 30px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 50px;
  font-size: 16px;
  cursor: pointer;
}
.context-menu .context-menu-container .context-menu-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.context-menu .context-menu-container .context-menu-item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.context-menu .context-menu-container .context-menu-item .description {
  font-weight: normal;
  font-size: 13px;
  margin-top: 4px;
  color: #999;
}
.context-menu .context-menu-container .context-menu-item:hover {
  opacity: 0.75;
}
a {
  color: #6d7df5;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.modal-shadow {
  box-shadow: 1px 1px 15px #18202f;
}
.theme-light.modal-shadow {
  box-shadow: 1px 1px 15px #ccd2da;
}
.theme-light .modal-shadow {
  box-shadow: 1px 1px 15px #ccd2da;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}
@-o-keyframes blink {
  50% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}
@-moz-keyframes bulge {
  50% {
    transform: scale(1.15);
  }
}
@-webkit-keyframes bulge {
  50% {
    transform: scale(1.15);
  }
}
@-o-keyframes bulge {
  50% {
    transform: scale(1.15);
  }
}
@keyframes bulge {
  50% {
    transform: scale(1.15);
  }
}
@-moz-keyframes shrink {
  50% {
    transform: scale(0.85);
  }
}
@-webkit-keyframes shrink {
  50% {
    transform: scale(0.85);
  }
}
@-o-keyframes shrink {
  50% {
    transform: scale(0.85);
  }
}
@keyframes shrink {
  50% {
    transform: scale(0.85);
  }
}
@-moz-keyframes grow {
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes grow {
  100% {
    transform: scale(1);
  }
}
@-o-keyframes grow {
  100% {
    transform: scale(1);
  }
}
@keyframes grow {
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-o-keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
}
@-moz-keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}
@-o-keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}

/*# sourceMappingURL=bundle.css.map*/