@charset "UTF-8";
html,
body {
  height: 100%;
  height: var(--better-full-vh);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  container-type: inline-size;
}

#content {
  --page-content-width: 464px;
}

:root {
  --better-full-vh: 100vh;
}

@media screen and (min-width: 790.4px) {
  #content {
    --page-content-width: 464px;
  }
}
@media screen and (min-width: 1045.6px) {
  #content {
    --page-content-width: 696px;
  }
}
@media screen and (min-width: 1300.8px) {
  #content {
    --page-content-width: 928px;
  }
}
@media screen and (min-width: 1556px) {
  #content {
    --page-content-width: 1160px;
  }
}
@media screen and (min-width: 1811.2px) {
  #content {
    --page-content-width: 1392px;
  }
}
.page {
  z-index: 0;
  height: 100%;
  width: 100vw;
  font-size: 13px;
  overflow: hidden auto;
}
.page .background-primary {
  background-color: var(--background-primary);
}
.page .background-secondary {
  background-color: var(--background-secondary);
}
.page .background-third {
  background-color: var(--background-third);
}
.page .nav-background {
  background-color: var(--nav-background);
}
.page .input-background {
  background-color: var(--background-third);
}

.fx {
  display: flex;
}

.fx-column {
  display: flex;
  flex-direction: column;
}

.fx-justify-center {
  justify-content: center;
}

.fx-justify-space-between {
  justify-content: space-between;
}

.fx-justify-space-around {
  justify-content: space-around;
}

.fx-justify-space-evenly {
  justify-content: space-evenly;
}

.fx-justify-end {
  justify-content: flex-end;
}

.fx-align-start {
  align-items: flex-start;
}

.fx-align-center {
  align-items: center;
}

.fx-align-end {
  align-items: flex-end;
}

.fx-wrap {
  flex-wrap: wrap;
}

.fx-align-self-start {
  align-self: flex-start;
}

.fx-align-self-center {
  align-self: center;
}

.fx-align-self-end {
  align-self: flex-end;
}

.fx-justify-self-end {
  justify-self: flex-end;
}

.fx-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fx-size-1 {
  flex-basis: calc(100% * 1 / 12);
  max-width: calc(100% * 1 / 12 - 0);
}

.fx-size-2 {
  flex-basis: calc(100% * 2 / 12);
  max-width: calc(100% * 2 / 12 - 0);
}

.fx-size-3 {
  flex-basis: calc(100% * 3 / 12);
  max-width: calc(100% * 3 / 12 - 0);
}

.fx-size-4 {
  flex-basis: calc(100% * 4 / 12);
  max-width: calc(100% * 4 / 12 - 0);
}

.fx-size-5 {
  flex-basis: calc(100% * 5 / 12);
  max-width: calc(100% * 5 / 12 - 0);
}

.fx-size-6 {
  flex-basis: calc(100% * 6 / 12);
  max-width: calc(100% * 6 / 12 - 0);
}

.fx-size-7 {
  flex-basis: calc(100% * 7 / 12);
  max-width: calc(100% * 7 / 12 - 0);
}

.fx-size-8 {
  flex-basis: calc(100% * 8 / 12);
  max-width: calc(100% * 8 / 12 - 0);
}

.fx-size-9 {
  flex-basis: calc(100% * 9 / 12);
  max-width: calc(100% * 9 / 12 - 0);
}

.fx-size-10 {
  flex-basis: calc(100% * 10 / 12);
  max-width: calc(100% * 10 / 12 - 0);
}

.fx-size-11 {
  flex-basis: calc(100% * 11 / 12);
  max-width: calc(100% * 11 / 12 - 0);
}

.fx-size-12 {
  flex-basis: calc(100% * 12 / 12);
  max-width: calc(100% * 12 / 12 - 0);
}

.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.text-align-left {
  text-align: left;
}

.btn {
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  color: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-family: inherit;
}
.btn.no-hover:hover:not(.active) {
  background-color: initial !important;
}

.btn:disabled:not(.custom-opacity) {
  opacity: 0.65;
}

.btn:not(:disabled) {
  cursor: pointer;
}

.btn:focus {
  outline: 0;
}

@media (hover: hover) {
  .color-mode-light .btn:not(:disabled, .no-hover):hover:not(:has(#draggable-window-container)) {
    background-color: #ededed;
  }
  .color-mode-dark .btn:not(:disabled, .no-hover):hover:hover:not(:has(#draggable-window-container)) {
    background-color: rgb(140, 140, 140);
  }
}
.btn-action {
  background-image: linear-gradient(-180deg, #f5f5f5 0%, #f0f0f1 100%);
  border: 1px solid #dcdbdb;
  border-radius: 2px;
  padding: 7px 23px;
  color: inherit;
}
.btn-action.active {
  background: #ded9d9 !important;
}

.btn-blue-font {
  color: #0a84ff;
}
.btn-blue-font:hover {
  color: white;
}

.btn-confirm {
  background-image: linear-gradient(-180deg, #4d90fe 0%, #4686ee 100%);
  border: 1px solid #3079ed;
  border-radius: 2px;
  padding: 7px 23px;
  color: white;
}

.btn-danger {
  background-image: linear-gradient(-180deg, #f5f5f5 0%, #f0f0f1 100%);
  border: 1px solid #dcdbdb;
  border-radius: 2px;
  padding: 7px 23px;
  color: red;
}

.btn-neutral {
  background-image: linear-gradient(-180deg, #f5f5f5 0%, #f0f0f1 100%);
  border: 1px solid #dcdbdb;
  border-radius: 2px;
  padding: 7px 23px;
}

.btn-outline {
  background: inherit;
  border: 1px solid #323232;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  padding: 8px 12px;
}
.btn-outline:hover {
  background-color: #3a3a3a !important;
}
.btn-outline:active {
  background: #323232 !important;
}

.btn-transparent {
  background-image: initial;
  background-color: transparent;
  border: 0;
}

.btn-radius {
  border-radius: 6px;
}

.btn-radius-top {
  border-radius: 6px 6px 0 0;
}

.btn-radius-bottom {
  border-radius: 0 0 6px 6px;
}

.btn-block {
  width: 100%;
}

.btn-round {
  border-radius: 50%;
}

.btn-oval {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.btn-small-oval {
  padding: 3px 5px;
  border-radius: 5px;
}

.btn-video-nav-icon {
  transition: filter 0.22s;
  background-color: initial !important;
}
.btn-video-nav-icon svg {
  fill: white;
  stroke: white;
}
@media (hover: hover) {
  .btn-video-nav-icon:hover svg:not(:disabled) {
    background-color: initial !important;
    filter: drop-shadow(0 0 7px white) !important;
  }
}

.btn-edit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.btn-blue {
  background-color: #0a84ff;
  color: white;
}
.btn-blue:hover {
  background-color: #0a84ff !important;
  color: white;
}

.btn-edit:hover,
.btn-edit:active {
  background-color: var(--hover-color) !important;
  /* stylelint-disable-next-line */
}
.btn-edit:hover svg,
.btn-edit:active svg {
  fill: var(--fill-color) !important;
  stroke: var(--fill-color) !important;
}

.btn-back-to-live {
  border: 1px solid #940a16;
  border-radius: 2px;
  padding: 7px 23px;
  color: inherit;
  background-color: #db0f20;
}
.btn-back-to-live:hover {
  background-color: #940a16 !important;
}

#autoplay-button {
  height: 29px;
  width: 29px;
  background-color: white !important;
}
#autoplay-button.off {
  background-color: initial !important;
}

.mt0 {
  margin-top: 0px;
}

.mt1 {
  margin-top: 1px;
}

.mt2 {
  margin-top: 2px;
}

.mt3 {
  margin-top: 3px;
}

.mt4 {
  margin-top: 4px;
}

.mt5 {
  margin-top: 5px;
}

.mt6 {
  margin-top: 6px;
}

.mt7 {
  margin-top: 7px;
}

.mt8 {
  margin-top: 8px;
}

.mt9 {
  margin-top: 9px;
}

.mt10 {
  margin-top: 10px;
}

.mt11 {
  margin-top: 11px;
}

.mt12 {
  margin-top: 12px;
}

.mt13 {
  margin-top: 13px;
}

.mt14 {
  margin-top: 14px;
}

.mt15 {
  margin-top: 15px;
}

.mt16 {
  margin-top: 16px;
}

.mt20 {
  margin-top: 20px;
}

.mt22 {
  margin-top: 22px;
}

.mt24 {
  margin-top: 24px;
}

.mt25 {
  margin-top: 25px;
}

.mt28 {
  margin-top: 28px;
}

.mt30 {
  margin-top: 30px;
}

.mt35 {
  margin-top: 35px;
}

.mt40 {
  margin-top: 40px;
}

.mt46 {
  margin-top: 46px;
}

.mt50 {
  margin-top: 50px;
}

.mt58 {
  margin-top: 58px;
}

.mt60 {
  margin-top: 60px;
}

.mt70 {
  margin-top: 70px;
}

.mt80 {
  margin-top: 80px;
}

.mt82 {
  margin-top: 82px;
}

.mt120 {
  margin-top: 120px;
}

.mt150 {
  margin-top: 150px;
}

.mb0 {
  margin-bottom: 0px;
}

.mb1 {
  margin-bottom: 1px;
}

.mb2 {
  margin-bottom: 2px;
}

.mb3 {
  margin-bottom: 3px;
}

.mb4 {
  margin-bottom: 4px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb6 {
  margin-bottom: 6px;
}

.mb7 {
  margin-bottom: 7px;
}

.mb8 {
  margin-bottom: 8px;
}

.mb9 {
  margin-bottom: 9px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb11 {
  margin-bottom: 11px;
}

.mb12 {
  margin-bottom: 12px;
}

.mb13 {
  margin-bottom: 13px;
}

.mb14 {
  margin-bottom: 14px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb16 {
  margin-bottom: 16px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb22 {
  margin-bottom: 22px;
}

.mb24 {
  margin-bottom: 24px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb28 {
  margin-bottom: 28px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb35 {
  margin-bottom: 35px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb46 {
  margin-bottom: 46px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb58 {
  margin-bottom: 58px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb70 {
  margin-bottom: 70px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb82 {
  margin-bottom: 82px;
}

.mb120 {
  margin-bottom: 120px;
}

.mb150 {
  margin-bottom: 150px;
}

.ml0 {
  margin-left: 0px;
}

.ml1 {
  margin-left: 1px;
}

.ml2 {
  margin-left: 2px;
}

.ml3 {
  margin-left: 3px;
}

.ml4 {
  margin-left: 4px;
}

.ml5 {
  margin-left: 5px;
}

.ml6 {
  margin-left: 6px;
}

.ml7 {
  margin-left: 7px;
}

.ml8 {
  margin-left: 8px;
}

.ml9 {
  margin-left: 9px;
}

.ml10 {
  margin-left: 10px;
}

.ml11 {
  margin-left: 11px;
}

.ml12 {
  margin-left: 12px;
}

.ml13 {
  margin-left: 13px;
}

.ml14 {
  margin-left: 14px;
}

.ml15 {
  margin-left: 15px;
}

.ml16 {
  margin-left: 16px;
}

.ml20 {
  margin-left: 20px;
}

.ml22 {
  margin-left: 22px;
}

.ml24 {
  margin-left: 24px;
}

.ml25 {
  margin-left: 25px;
}

.ml28 {
  margin-left: 28px;
}

.ml30 {
  margin-left: 30px;
}

.ml35 {
  margin-left: 35px;
}

.ml40 {
  margin-left: 40px;
}

.ml46 {
  margin-left: 46px;
}

.ml50 {
  margin-left: 50px;
}

.ml58 {
  margin-left: 58px;
}

.ml60 {
  margin-left: 60px;
}

.ml70 {
  margin-left: 70px;
}

.ml80 {
  margin-left: 80px;
}

.ml82 {
  margin-left: 82px;
}

.ml120 {
  margin-left: 120px;
}

.ml150 {
  margin-left: 150px;
}

.mr0 {
  margin-right: 0px;
}

.mr1 {
  margin-right: 1px;
}

.mr2 {
  margin-right: 2px;
}

.mr3 {
  margin-right: 3px;
}

.mr4 {
  margin-right: 4px;
}

.mr5 {
  margin-right: 5px;
}

.mr6 {
  margin-right: 6px;
}

.mr7 {
  margin-right: 7px;
}

.mr8 {
  margin-right: 8px;
}

.mr9 {
  margin-right: 9px;
}

.mr10 {
  margin-right: 10px;
}

.mr11 {
  margin-right: 11px;
}

.mr12 {
  margin-right: 12px;
}

.mr13 {
  margin-right: 13px;
}

.mr14 {
  margin-right: 14px;
}

.mr15 {
  margin-right: 15px;
}

.mr16 {
  margin-right: 16px;
}

.mr20 {
  margin-right: 20px;
}

.mr22 {
  margin-right: 22px;
}

.mr24 {
  margin-right: 24px;
}

.mr25 {
  margin-right: 25px;
}

.mr28 {
  margin-right: 28px;
}

.mr30 {
  margin-right: 30px;
}

.mr35 {
  margin-right: 35px;
}

.mr40 {
  margin-right: 40px;
}

.mr46 {
  margin-right: 46px;
}

.mr50 {
  margin-right: 50px;
}

.mr58 {
  margin-right: 58px;
}

.mr60 {
  margin-right: 60px;
}

.mr70 {
  margin-right: 70px;
}

.mr80 {
  margin-right: 80px;
}

.mr82 {
  margin-right: 82px;
}

.mr120 {
  margin-right: 120px;
}

.mr150 {
  margin-right: 150px;
}

.pt0 {
  padding-top: 0px;
}

.pt1 {
  padding-top: 1px;
}

.pt2 {
  padding-top: 2px;
}

.pt3 {
  padding-top: 3px;
}

.pt4 {
  padding-top: 4px;
}

.pt5 {
  padding-top: 5px;
}

.pt6 {
  padding-top: 6px;
}

.pt7 {
  padding-top: 7px;
}

.pt8 {
  padding-top: 8px;
}

.pt9 {
  padding-top: 9px;
}

.pt10 {
  padding-top: 10px;
}

.pt11 {
  padding-top: 11px;
}

.pt12 {
  padding-top: 12px;
}

.pt13 {
  padding-top: 13px;
}

.pt14 {
  padding-top: 14px;
}

.pt15 {
  padding-top: 15px;
}

.pt16 {
  padding-top: 16px;
}

.pt20 {
  padding-top: 20px;
}

.pt22 {
  padding-top: 22px;
}

.pt24 {
  padding-top: 24px;
}

.pt25 {
  padding-top: 25px;
}

.pt28 {
  padding-top: 28px;
}

.pt30 {
  padding-top: 30px;
}

.pt35 {
  padding-top: 35px;
}

.pt40 {
  padding-top: 40px;
}

.pt46 {
  padding-top: 46px;
}

.pt50 {
  padding-top: 50px;
}

.pt58 {
  padding-top: 58px;
}

.pt60 {
  padding-top: 60px;
}

.pt70 {
  padding-top: 70px;
}

.pt80 {
  padding-top: 80px;
}

.pt82 {
  padding-top: 82px;
}

.pt120 {
  padding-top: 120px;
}

.pt150 {
  padding-top: 150px;
}

.pb0 {
  padding-bottom: 0px;
}

.pb1 {
  padding-bottom: 1px;
}

.pb2 {
  padding-bottom: 2px;
}

.pb3 {
  padding-bottom: 3px;
}

.pb4 {
  padding-bottom: 4px;
}

.pb5 {
  padding-bottom: 5px;
}

.pb6 {
  padding-bottom: 6px;
}

.pb7 {
  padding-bottom: 7px;
}

.pb8 {
  padding-bottom: 8px;
}

.pb9 {
  padding-bottom: 9px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb11 {
  padding-bottom: 11px;
}

.pb12 {
  padding-bottom: 12px;
}

.pb13 {
  padding-bottom: 13px;
}

.pb14 {
  padding-bottom: 14px;
}

.pb15 {
  padding-bottom: 15px;
}

.pb16 {
  padding-bottom: 16px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb22 {
  padding-bottom: 22px;
}

.pb24 {
  padding-bottom: 24px;
}

.pb25 {
  padding-bottom: 25px;
}

.pb28 {
  padding-bottom: 28px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb35 {
  padding-bottom: 35px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb46 {
  padding-bottom: 46px;
}

.pb50 {
  padding-bottom: 50px;
}

.pb58 {
  padding-bottom: 58px;
}

.pb60 {
  padding-bottom: 60px;
}

.pb70 {
  padding-bottom: 70px;
}

.pb80 {
  padding-bottom: 80px;
}

.pb82 {
  padding-bottom: 82px;
}

.pb120 {
  padding-bottom: 120px;
}

.pb150 {
  padding-bottom: 150px;
}

.pl0 {
  padding-left: 0px;
}

.pl1 {
  padding-left: 1px;
}

.pl2 {
  padding-left: 2px;
}

.pl3 {
  padding-left: 3px;
}

.pl4 {
  padding-left: 4px;
}

.pl5 {
  padding-left: 5px;
}

.pl6 {
  padding-left: 6px;
}

.pl7 {
  padding-left: 7px;
}

.pl8 {
  padding-left: 8px;
}

.pl9 {
  padding-left: 9px;
}

.pl10 {
  padding-left: 10px;
}

.pl11 {
  padding-left: 11px;
}

.pl12 {
  padding-left: 12px;
}

.pl13 {
  padding-left: 13px;
}

.pl14 {
  padding-left: 14px;
}

.pl15 {
  padding-left: 15px;
}

.pl16 {
  padding-left: 16px;
}

.pl20 {
  padding-left: 20px;
}

.pl22 {
  padding-left: 22px;
}

.pl24 {
  padding-left: 24px;
}

.pl25 {
  padding-left: 25px;
}

.pl28 {
  padding-left: 28px;
}

.pl30 {
  padding-left: 30px;
}

.pl35 {
  padding-left: 35px;
}

.pl40 {
  padding-left: 40px;
}

.pl46 {
  padding-left: 46px;
}

.pl50 {
  padding-left: 50px;
}

.pl58 {
  padding-left: 58px;
}

.pl60 {
  padding-left: 60px;
}

.pl70 {
  padding-left: 70px;
}

.pl80 {
  padding-left: 80px;
}

.pl82 {
  padding-left: 82px;
}

.pl120 {
  padding-left: 120px;
}

.pl150 {
  padding-left: 150px;
}

.pr0 {
  padding-right: 0px;
}

.pr1 {
  padding-right: 1px;
}

.pr2 {
  padding-right: 2px;
}

.pr3 {
  padding-right: 3px;
}

.pr4 {
  padding-right: 4px;
}

.pr5 {
  padding-right: 5px;
}

.pr6 {
  padding-right: 6px;
}

.pr7 {
  padding-right: 7px;
}

.pr8 {
  padding-right: 8px;
}

.pr9 {
  padding-right: 9px;
}

.pr10 {
  padding-right: 10px;
}

.pr11 {
  padding-right: 11px;
}

.pr12 {
  padding-right: 12px;
}

.pr13 {
  padding-right: 13px;
}

.pr14 {
  padding-right: 14px;
}

.pr15 {
  padding-right: 15px;
}

.pr16 {
  padding-right: 16px;
}

.pr20 {
  padding-right: 20px;
}

.pr22 {
  padding-right: 22px;
}

.pr24 {
  padding-right: 24px;
}

.pr25 {
  padding-right: 25px;
}

.pr28 {
  padding-right: 28px;
}

.pr30 {
  padding-right: 30px;
}

.pr35 {
  padding-right: 35px;
}

.pr40 {
  padding-right: 40px;
}

.pr46 {
  padding-right: 46px;
}

.pr50 {
  padding-right: 50px;
}

.pr58 {
  padding-right: 58px;
}

.pr60 {
  padding-right: 60px;
}

.pr70 {
  padding-right: 70px;
}

.pr80 {
  padding-right: 80px;
}

.pr82 {
  padding-right: 82px;
}

.pr120 {
  padding-right: 120px;
}

.pr150 {
  padding-right: 150px;
}

.t0 {
  top: 0px;
}

.t1 {
  top: 1px;
}

.t2 {
  top: 2px;
}

.t3 {
  top: 3px;
}

.t4 {
  top: 4px;
}

.t5 {
  top: 5px;
}

.t6 {
  top: 6px;
}

.t7 {
  top: 7px;
}

.t8 {
  top: 8px;
}

.t9 {
  top: 9px;
}

.t10 {
  top: 10px;
}

.t11 {
  top: 11px;
}

.t12 {
  top: 12px;
}

.t13 {
  top: 13px;
}

.t14 {
  top: 14px;
}

.t15 {
  top: 15px;
}

.t16 {
  top: 16px;
}

.t20 {
  top: 20px;
}

.t22 {
  top: 22px;
}

.t24 {
  top: 24px;
}

.t25 {
  top: 25px;
}

.t28 {
  top: 28px;
}

.t30 {
  top: 30px;
}

.t35 {
  top: 35px;
}

.t40 {
  top: 40px;
}

.t46 {
  top: 46px;
}

.t50 {
  top: 50px;
}

.t58 {
  top: 58px;
}

.t60 {
  top: 60px;
}

.t70 {
  top: 70px;
}

.t80 {
  top: 80px;
}

.t82 {
  top: 82px;
}

.t120 {
  top: 120px;
}

.t150 {
  top: 150px;
}

.m0 {
  margin: 0px;
}

.m1 {
  margin: 1px;
}

.m2 {
  margin: 2px;
}

.m3 {
  margin: 3px;
}

.m4 {
  margin: 4px;
}

.m5 {
  margin: 5px;
}

.m6 {
  margin: 6px;
}

.m7 {
  margin: 7px;
}

.m8 {
  margin: 8px;
}

.m9 {
  margin: 9px;
}

.m10 {
  margin: 10px;
}

.m11 {
  margin: 11px;
}

.m12 {
  margin: 12px;
}

.m13 {
  margin: 13px;
}

.m14 {
  margin: 14px;
}

.m15 {
  margin: 15px;
}

.m16 {
  margin: 16px;
}

.m20 {
  margin: 20px;
}

.m22 {
  margin: 22px;
}

.m24 {
  margin: 24px;
}

.m25 {
  margin: 25px;
}

.m28 {
  margin: 28px;
}

.m30 {
  margin: 30px;
}

.m35 {
  margin: 35px;
}

.m40 {
  margin: 40px;
}

.m46 {
  margin: 46px;
}

.m50 {
  margin: 50px;
}

.m58 {
  margin: 58px;
}

.m60 {
  margin: 60px;
}

.m70 {
  margin: 70px;
}

.m80 {
  margin: 80px;
}

.m82 {
  margin: 82px;
}

.m120 {
  margin: 120px;
}

.m150 {
  margin: 150px;
}

.p0 {
  padding: 0px;
}

.p1 {
  padding: 1px;
}

.p2 {
  padding: 2px;
}

.p3 {
  padding: 3px;
}

.p4 {
  padding: 4px;
}

.p5 {
  padding: 5px;
}

.p6 {
  padding: 6px;
}

.p7 {
  padding: 7px;
}

.p8 {
  padding: 8px;
}

.p9 {
  padding: 9px;
}

.p10 {
  padding: 10px;
}

.p11 {
  padding: 11px;
}

.p12 {
  padding: 12px;
}

.p13 {
  padding: 13px;
}

.p14 {
  padding: 14px;
}

.p15 {
  padding: 15px;
}

.p16 {
  padding: 16px;
}

.p20 {
  padding: 20px;
}

.p22 {
  padding: 22px;
}

.p24 {
  padding: 24px;
}

.p25 {
  padding: 25px;
}

.p28 {
  padding: 28px;
}

.p30 {
  padding: 30px;
}

.p35 {
  padding: 35px;
}

.p40 {
  padding: 40px;
}

.p46 {
  padding: 46px;
}

.p50 {
  padding: 50px;
}

.p58 {
  padding: 58px;
}

.p60 {
  padding: 60px;
}

.p70 {
  padding: 70px;
}

.p80 {
  padding: 80px;
}

.p82 {
  padding: 82px;
}

.p120 {
  padding: 120px;
}

.p150 {
  padding: 150px;
}

.ma {
  margin: auto;
}

.mtba {
  margin-top: auto;
  margin-bottom: auto;
}

.msa {
  margin-left: auto;
  margin-right: auto;
}

.mta {
  margin-top: auto;
}

.mla {
  margin-left: auto;
}

.mra {
  margin-right: auto;
}

.ps0 {
  padding-left: 0px;
  padding-right: 0px;
}

.ptb0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.ms0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mtb0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.ps1 {
  padding-left: 1px;
  padding-right: 1px;
}

.ptb1 {
  padding-top: 1px;
  padding-bottom: 1px;
}

.ms1 {
  margin-left: 1px;
  margin-right: 1px;
}

.mtb1 {
  margin-top: 1px;
  margin-bottom: 1px;
}

.ps2 {
  padding-left: 2px;
  padding-right: 2px;
}

.ptb2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.ms2 {
  margin-left: 2px;
  margin-right: 2px;
}

.mtb2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.ps3 {
  padding-left: 3px;
  padding-right: 3px;
}

.ptb3 {
  padding-top: 3px;
  padding-bottom: 3px;
}

.ms3 {
  margin-left: 3px;
  margin-right: 3px;
}

.mtb3 {
  margin-top: 3px;
  margin-bottom: 3px;
}

.ps4 {
  padding-left: 4px;
  padding-right: 4px;
}

.ptb4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.ms4 {
  margin-left: 4px;
  margin-right: 4px;
}

.mtb4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.ps5 {
  padding-left: 5px;
  padding-right: 5px;
}

.ptb5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ms5 {
  margin-left: 5px;
  margin-right: 5px;
}

.mtb5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.ps6 {
  padding-left: 6px;
  padding-right: 6px;
}

.ptb6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.ms6 {
  margin-left: 6px;
  margin-right: 6px;
}

.mtb6 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.ps7 {
  padding-left: 7px;
  padding-right: 7px;
}

.ptb7 {
  padding-top: 7px;
  padding-bottom: 7px;
}

.ms7 {
  margin-left: 7px;
  margin-right: 7px;
}

.mtb7 {
  margin-top: 7px;
  margin-bottom: 7px;
}

.ps8 {
  padding-left: 8px;
  padding-right: 8px;
}

.ptb8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ms8 {
  margin-left: 8px;
  margin-right: 8px;
}

.mtb8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.ps9 {
  padding-left: 9px;
  padding-right: 9px;
}

.ptb9 {
  padding-top: 9px;
  padding-bottom: 9px;
}

.ms9 {
  margin-left: 9px;
  margin-right: 9px;
}

.mtb9 {
  margin-top: 9px;
  margin-bottom: 9px;
}

.ps10 {
  padding-left: 10px;
  padding-right: 10px;
}

.ptb10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ms10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mtb10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ps11 {
  padding-left: 11px;
  padding-right: 11px;
}

.ptb11 {
  padding-top: 11px;
  padding-bottom: 11px;
}

.ms11 {
  margin-left: 11px;
  margin-right: 11px;
}

.mtb11 {
  margin-top: 11px;
  margin-bottom: 11px;
}

.ps12 {
  padding-left: 12px;
  padding-right: 12px;
}

.ptb12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ms12 {
  margin-left: 12px;
  margin-right: 12px;
}

.mtb12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.ps13 {
  padding-left: 13px;
  padding-right: 13px;
}

.ptb13 {
  padding-top: 13px;
  padding-bottom: 13px;
}

.ms13 {
  margin-left: 13px;
  margin-right: 13px;
}

.mtb13 {
  margin-top: 13px;
  margin-bottom: 13px;
}

.ps14 {
  padding-left: 14px;
  padding-right: 14px;
}

.ptb14 {
  padding-top: 14px;
  padding-bottom: 14px;
}

.ms14 {
  margin-left: 14px;
  margin-right: 14px;
}

.mtb14 {
  margin-top: 14px;
  margin-bottom: 14px;
}

.ps15 {
  padding-left: 15px;
  padding-right: 15px;
}

.ptb15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.ms15 {
  margin-left: 15px;
  margin-right: 15px;
}

.mtb15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.ps16 {
  padding-left: 16px;
  padding-right: 16px;
}

.ptb16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.ms16 {
  margin-left: 16px;
  margin-right: 16px;
}

.mtb16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.ps20 {
  padding-left: 20px;
  padding-right: 20px;
}

.ptb20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ms20 {
  margin-left: 20px;
  margin-right: 20px;
}

.mtb20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.ps22 {
  padding-left: 22px;
  padding-right: 22px;
}

.ptb22 {
  padding-top: 22px;
  padding-bottom: 22px;
}

.ms22 {
  margin-left: 22px;
  margin-right: 22px;
}

.mtb22 {
  margin-top: 22px;
  margin-bottom: 22px;
}

.ps24 {
  padding-left: 24px;
  padding-right: 24px;
}

.ptb24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.ms24 {
  margin-left: 24px;
  margin-right: 24px;
}

.mtb24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.ps25 {
  padding-left: 25px;
  padding-right: 25px;
}

.ptb25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.ms25 {
  margin-left: 25px;
  margin-right: 25px;
}

.mtb25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.ps28 {
  padding-left: 28px;
  padding-right: 28px;
}

.ptb28 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.ms28 {
  margin-left: 28px;
  margin-right: 28px;
}

.mtb28 {
  margin-top: 28px;
  margin-bottom: 28px;
}

.ps30 {
  padding-left: 30px;
  padding-right: 30px;
}

.ptb30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.ms30 {
  margin-left: 30px;
  margin-right: 30px;
}

.mtb30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.ps35 {
  padding-left: 35px;
  padding-right: 35px;
}

.ptb35 {
  padding-top: 35px;
  padding-bottom: 35px;
}

.ms35 {
  margin-left: 35px;
  margin-right: 35px;
}

.mtb35 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.ps40 {
  padding-left: 40px;
  padding-right: 40px;
}

.ptb40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.ms40 {
  margin-left: 40px;
  margin-right: 40px;
}

.mtb40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.ps46 {
  padding-left: 46px;
  padding-right: 46px;
}

.ptb46 {
  padding-top: 46px;
  padding-bottom: 46px;
}

.ms46 {
  margin-left: 46px;
  margin-right: 46px;
}

.mtb46 {
  margin-top: 46px;
  margin-bottom: 46px;
}

.ps50 {
  padding-left: 50px;
  padding-right: 50px;
}

.ptb50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.ms50 {
  margin-left: 50px;
  margin-right: 50px;
}

.mtb50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.ps58 {
  padding-left: 58px;
  padding-right: 58px;
}

.ptb58 {
  padding-top: 58px;
  padding-bottom: 58px;
}

.ms58 {
  margin-left: 58px;
  margin-right: 58px;
}

.mtb58 {
  margin-top: 58px;
  margin-bottom: 58px;
}

.ps60 {
  padding-left: 60px;
  padding-right: 60px;
}

.ptb60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.ms60 {
  margin-left: 60px;
  margin-right: 60px;
}

.mtb60 {
  margin-top: 60px;
  margin-bottom: 60px;
}

.ps70 {
  padding-left: 70px;
  padding-right: 70px;
}

.ptb70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.ms70 {
  margin-left: 70px;
  margin-right: 70px;
}

.mtb70 {
  margin-top: 70px;
  margin-bottom: 70px;
}

.ps80 {
  padding-left: 80px;
  padding-right: 80px;
}

.ptb80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.ms80 {
  margin-left: 80px;
  margin-right: 80px;
}

.mtb80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.ps82 {
  padding-left: 82px;
  padding-right: 82px;
}

.ptb82 {
  padding-top: 82px;
  padding-bottom: 82px;
}

.ms82 {
  margin-left: 82px;
  margin-right: 82px;
}

.mtb82 {
  margin-top: 82px;
  margin-bottom: 82px;
}

.ps120 {
  padding-left: 120px;
  padding-right: 120px;
}

.ptb120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.ms120 {
  margin-left: 120px;
  margin-right: 120px;
}

.mtb120 {
  margin-top: 120px;
  margin-bottom: 120px;
}

.ps150 {
  padding-left: 150px;
  padding-right: 150px;
}

.ptb150 {
  padding-top: 150px;
  padding-bottom: 150px;
}

.ms150 {
  margin-left: 150px;
  margin-right: 150px;
}

.mtb150 {
  margin-top: 150px;
  margin-bottom: 150px;
}

.mt80 {
  margin-top: 80px;
}

.mt120 {
  margin-top: 120px;
}

.min-height-25 {
  min-height: 25px;
}

.height-34 {
  height: 34px;
}

.min-height-30 {
  min-height: 30px;
}

.min-height-50 {
  min-height: 50px;
}

.width-160 {
  width: 160px !important;
}

.width-218 {
  width: 218px;
}

.width-300 {
  width: 300px;
}

.width-400 {
  width: 400px;
}

.height-50 {
  height: 50px;
}

.max-width-500 {
  max-width: 500px;
}

.underline {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

.font-size-10 {
  font-size: 10px;
}

.font-size-11 {
  font-size: 11px;
}

.font-size-12 {
  font-size: 12px;
}

.font-size-13 {
  font-size: 13px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-15 {
  font-size: 15px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-17 {
  font-size: 17px;
}

.font-size-18 {
  font-size: 18px;
}

.font-size-20 {
  font-size: 20px;
}

.font-size-21 {
  font-size: 21px;
}

.font-size-22 {
  font-size: 22px;
}

.font-size-23 {
  font-size: 23px;
}

.font-size-24 {
  font-size: 24px;
}

.font-size-25 {
  font-size: 25px;
}

.font-size-26 {
  font-size: 26px;
}

.font-size-27 {
  font-size: 27px;
}

.font-size-28 {
  font-size: 28px;
}

.font-size-29 {
  font-size: 29px;
}

.font-size-30 {
  font-size: 30px;
}

.font-size-31 {
  font-size: 31px;
}

.font-size-32 {
  font-size: 32px;
}

.font-size-33 {
  font-size: 33px;
}

.font-size-34 {
  font-size: 34px;
}

.font-size-35 {
  font-size: 35px;
}

.font-size-36 {
  font-size: 36px;
}

.font-size-37 {
  font-size: 37px;
}

.font-size-38 {
  font-size: 38px;
}

.font-size-39 {
  font-size: 39px;
}

.font-size-40 {
  font-size: 40px;
}

.font-size-41 {
  font-size: 41px;
}

.font-size-42 {
  font-size: 42px;
}

.font-size-43 {
  font-size: 43px;
}

.font-size-44 {
  font-size: 44px;
}

.font-size-45 {
  font-size: 45px;
}

.font-size-46 {
  font-size: 46px;
}

.font-size-47 {
  font-size: 47px;
}

.font-size-48 {
  font-size: 48px;
}

.font-size-49 {
  font-size: 49px;
}

.font-size-50 {
  font-size: 50px;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.font-light-grey-always {
  color: #757575;
}

.font-light-grey {
  color: #757575;
}

.text-black {
  color: black;
}

.color-mode-dark .font-light-grey {
  color: #fff;
}

.font-blue {
  color: #007aff;
}

.font-light-blue {
  color: #0a84ff;
}

.font-red {
  color: #ff453a;
}

.font-white {
  color: white;
}

:root {
  --active-item-area-color: #007aff;
}

.color-mode-light {
  --background-primary: #eee;
  --background-secondary: #fff;
  --background-third: #fbfbfb;
  --active-item-color-underline: #007aff;
  --icons-color: #757575;
  --box-shadow-color: rgb(48 48 48 / 50%);
  --border-color: #d3d3d3;
  --border-list-separator: #d8d8d8;
  --nav-background: #f2f2f6;
  color: #4a4a4a;
  background: var(--background-secondary);
}

.color-mode-dark {
  --background-primary: #1d1d1d;
  --background-secondary: #313131;
  --background-third: #272727;
  --active-item-color-underline: #fff;
  --icons-color: #fff;
  --box-shadow-color: rgb(0 0 0 / 50%);
  --border-color: #565656;
  --border-list-separator: rgb(0 0 0 / 50%);
  color: #fff;
  background: var(--background-primary);
}

#flash-messages-container {
  position: fixed;
  top: 20px;
  right: 40px;
  overflow-x: hidden;
  z-index: 100;
}
#flash-messages-container .flash-message {
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 0.75rem 1.25rem;
  position: relative;
  margin-bottom: 1rem;
}
#flash-messages-container .alert {
  opacity: 0;
  position: relative;
  left: 100px;
  transition: all 700ms cubic-bezier(0.68, -0.55, 0.265, 1);
}
#flash-messages-container .alert.active {
  opacity: 1;
  left: 0;
}
#flash-messages-container .alert.active.exiting {
  opacity: 0;
  left: 100px;
}
#flash-messages-container .alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
#flash-messages-container .alert-success-multiline {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  max-width: 400px;
  white-space: pre-line;
}
#flash-messages-container .alert-progress {
  margin-top: 5px;
  /* stylelint-disable-next-line selector-class-pattern */
}
#flash-messages-container .alert-progress .alert-progressBar {
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(to right, #155724 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all linear;
}
#flash-messages-container .alert-progress .alert-progressBar.start {
  background-position: left bottom;
}
#flash-messages-container .alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
#flash-messages-container .alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
#flash-messages-container .alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-disable keyframes-name-pattern */
/* stylelint-disable at-rule-empty-line-before */
/* stylelint-disable length-zero-no-unit */
/* stylelint-disable number-max-precision */
/* stylelint-disable shorthand-property-no-redundant-values */
/* stylelint-disable unit-no-unknown */
/* stylelint-disable scss/comment-no-empty */
/* stylelint-disable comment-empty-line-before */
/* stylelint-disable comment-whitespace-inside */
/* stylelint-disable value-no-vendor-prefix */
/* stylelint-disable declaration-block-no-duplicate-properties */
/* stylelint-disable selector-pseudo-element-colon-notation */
/* stylelint-disable alpha-value-notation */
/* stylelint-disable color-function-notation */
/* stylelint-disable property-no-vendor-prefix */
/* stylelint-disable selector-class-pattern */
.flatpickr-input {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  box-sizing: border-box;
  background-color: var(--background-third);
  color: inherit;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 100%;
}
.flatpickr-input:not(:disabled) {
  cursor: pointer;
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
      /*rtl:begin:ignore*/
  /*
      */
  left: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
      /*rtl:begin:ignore*/
  /*
      */
  right: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder;
}

.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}

.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.flatpickr-day.today {
  border-color: #959ea9;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7;
}

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.ember-tooltip {
  filter: drop-shadow(0 0 3px black);
}

.ember-popover {
  color: inherit;
  background-color: var(--background-secondary);
  padding: 0;
  border: 1px solid var(--border-color);
}

progress[value] {
  /* Reset the default appearance */
  appearance: none;
  background-color: #757575;
  /* Remove default border in Firefox. */
  border: none;
  border-radius: 0;
  display: block;
  height: 4px;
  padding: 0;
  width: 100%;
}

progress[value]::-webkit-progress-value {
  background-color: #0079ff;
  transition: all 0.5s ease;
}

progress[value]::-moz-progress-bar {
  background-color: #0079ff;
}

.x-navbar {
  display: flex;
  width: 280px;
  height: 100%;
  position: fixed;
  border-right: 1px solid #e0e0e0;
  overflow: auto;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .x-navbar {
    width: 100vw;
    display: flex;
    height: 100%;
    transition: transform 400ms;
    will-change: transform;
  }
  .x-navbar.closed {
    right: 105vw;
    transform: translateX(-105vw);
  }
  .x-navbar.open {
    right: 105vw;
    transform: translateX(105vw);
  }
}
@media only screen and (min-width: 768px) {
  .x-navbar a.active,
  .x-navbar div.active {
    font-weight: 500;
  }
  .x-navbar .mobile-nav-arrow {
    display: none !important;
  }
}
.x-navbar #navbar-header {
  max-width: calc(100% - 72px);
}
.x-navbar .nav-category {
  opacity: 0.8;
  letter-spacing: 0.03em;
}
.x-navbar .nav-link-group {
  color: black;
  background: #fefefe;
  border-radius: 8px;
}
.x-navbar .nav-link-group > a:not(:last-child),
.x-navbar .nav-link-group > div:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
.x-navbar .nav-link-group > a:first-child,
.x-navbar .nav-link-group > div:first-child {
  border-radius: 8px 8px 0 0;
}
.x-navbar .nav-link-group > a:last-child,
.x-navbar .nav-link-group > div:last-child {
  border-radius: 0 0 8px 8px;
}
.x-navbar .nav-link-group > a:only-child,
.x-navbar .nav-link-group > div:only-child {
  border-radius: 8px;
}
.x-navbar a,
.x-navbar #nav-team-settings-section,
.x-navbar #general-settings-button,
.x-navbar .team-button {
  cursor: pointer;
}
.x-navbar a:hover,
.x-navbar #nav-team-settings-section:hover,
.x-navbar #general-settings-button:hover,
.x-navbar .team-button:hover {
  background-color: #e6e6e7;
}
.x-navbar #general-settings-button {
  border-radius: 0;
}
@media only screen and (max-width: 991px) {
  .x-navbar.messages {
    width: 100vw;
    display: flex;
    height: 100%;
    transition: transform 400ms;
    will-change: transform;
  }
  .x-navbar.messages.closed {
    right: 105vw;
    transform: translateX(-105vw);
  }
  .x-navbar.messages.open {
    right: 105vw;
    transform: translateX(105vw);
  }
}

@media only screen and (min-width: 768px) {
  .x-navbar-push-right {
    margin-right: 280px;
  }
}
@media only screen and (max-width: 991px) {
  .x-navbar-push-right.messages {
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) {
  .x-navbar-push-right.messages {
    margin-right: 280px;
  }
}

#nav-avatar :hover {
  cursor: pointer;
}
#nav-avatar picture img {
  border-radius: 50%;
}

.avatar-popover {
  border-radius: 6px;
  width: 150px;
  margin-right: -5px !important;
}
.avatar-popover .ember-popover-inner div .avatar-link-group {
  border-radius: 6px;
  color: black;
}
.avatar-popover .ember-popover-inner div .avatar-link-group a {
  border-bottom: 1px solid #e0e0e0;
}
.avatar-popover .ember-popover-inner div .avatar-link-group a:hover {
  background-color: #e6e6e7;
}

.x-full-page-overlay {
  overflow-y: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.x-full-page-overlay.theme-dark {
  background-color: rgba(0, 0, 0, 0.5);
}
.x-full-page-overlay.theme-transparent {
  background-color: rgba(0, 0, 0, 0);
}
.x-full-page-overlay.overlay-level-1 {
  z-index: 2;
}
.x-full-page-overlay.overlay-level-2 {
  z-index: 10;
}
.x-full-page-overlay.overlay-level-3 {
  z-index: 12;
}
.x-full-page-overlay.overlay-level-stat-player {
  z-index: 5;
}

.x-login-form img {
  width: calc(100% + 2px);
  transform: translate(-1px, -1px);
}
.x-login-form #login-sb-logo svg :last-child {
  fill: #57c6fd;
  stroke: #57c6fd;
}
.x-login-form #login-sb-logo path,
.x-login-form #login-sb-logo polygon {
  fill: gray;
  stroke: gray;
}
.x-login-form .form-fields {
  border-bottom: 1px solid #d3d3d3;
}
.x-login-form .login-header {
  border-bottom: 1px solid var(--border-color);
}
.x-login-form .login-item {
  width: 300px;
}
@media (min-width: 768px) {
  .x-login-form .login-item {
    width: 80%;
  }
}
.x-login-form .stage-two .form-fields {
  height: 140px;
}
.x-login-form .stage-two .form-fields input {
  position: relative;
  width: 140px;
  margin: auto;
}
.x-login-form .stage-two .form-fields #verification-code {
  border: 0;
  border-bottom: 2px solid #d3d3d3;
}
.x-login-form .stage-two .form-fields #verification-code:focus {
  outline: 0;
}
.x-login-form .form-footer {
  height: 50px;
}
.x-login-form input[type=number]::-webkit-outer-spin-button,
.x-login-form input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

#list-filter {
  margin-top: -41px;
}

.x-spinner-large {
  width: 64px;
  height: 64px;
}
.x-spinner-large::after {
  width: 46px;
  height: 46px;
}

.x-spinner-small {
  width: 32px;
  height: 32px;
}
.x-spinner-small::after {
  width: 23px;
  height: 23px;
}

.x-spinner-tiny {
  width: 16px;
  height: 16px;
}
.x-spinner-tiny::after {
  width: 10px;
  height: 10px;
}

.x-spinner-default::after {
  border: 5px solid #333;
  border-color: #333 transparent;
  content: " ";
  display: block;
  border-radius: 50%;
  animation: spinner-overlay 1.2s linear infinite;
}

.x-spinner-white {
  border: 5px solid white;
  border-color: white transparent;
  content: " ";
  display: block;
  border-radius: 50%;
  animation: spinner-overlay 1.2s linear infinite;
}

@keyframes spinner-overlay {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#x-seasons-select {
  position: relative;
  display: inline-block;
}
#x-seasons-select #seasons-dropdown {
  z-index: 5;
  width: 380px;
  position: absolute;
  min-height: 100px;
  top: 30px;
  right: 12px;
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  border-radius: 2px;
}
@media only screen and (max-width: 460px) {
  #x-seasons-select #seasons-dropdown {
    left: -190px;
    width: 300px;
  }
  #x-seasons-select #seasons-dropdown .season-list-item-name {
    max-width: 130px;
  }
}
#x-seasons-select .season-list-item-name {
  white-space: normal;
  text-align: left;
}
#x-seasons-select #seasons-select {
  border-bottom: 1px solid var(--border-color);
}
#x-seasons-select #season-name {
  background-color: var(--background-third);
  color: inherit;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 100%;
}
#x-seasons-select #season-start-date,
#x-seasons-select #season-end-date {
  max-width: 218px;
  padding-left: 10px;
}

.x-input {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  color: black;
  box-sizing: border-box;
  padding-left: 10px !important;
  padding-top: 4px;
  padding-bottom: 4px;
}

.x-input:not(:disabled) {
  background-color: white;
}

.x-input:disabled {
  background-color: rgba(0, 0, 0, 0.05);
}

select.x-input {
  border-radius: 0;
}

.has-error {
  box-shadow: 0 0 1px 1px red;
}

#model-node-admin select[disabled],
#model-node-admin input[disabled] {
  background: lightgray;
}

#public-file-download-button {
  background-color: white;
  border-radius: 13px;
  max-width: 155px;
  min-width: 155px;
}

#lib-logo-img {
  max-width: 156px;
  position: absolute;
  bottom: 10px;
  right: 30px;
  opacity: 0.5;
}
#lib-logo-img.clear {
  opacity: 1;
}

.image-overlay {
  object-fit: contain;
  max-width: 95%;
  max-height: 95%;
  overflow: auto;
}

.games-container,
.x-library-container {
  z-index: 1;
}

#x-library .header-item,
.games-container .header-item {
  width: 84px;
}
#x-library header,
.games-container header {
  height: 32px;
}

.library-view-set-button {
  background-color: var(--background-primary);
}
.library-view-set-button .view-select {
  width: 100%;
  height: 100%;
}
.library-view-set-button .view-select.selected {
  background-color: var(--background-secondary);
}

.x-lib-modal {
  border-color: rgba(60, 60, 67, 0.15);
  border-radius: 10px;
  max-height: 90vh;
  max-width: 90vw;
  min-width: 200px;
  background-color: white;
}
.x-lib-modal .close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
}

#game-review-container {
  display: flex;
  overflow: hidden;
  position: relative;
  height: var(--better-full-vh);
  width: 100vw;
}
#game-review-container.is-presenting {
  height: calc(var(--better-full-vh) - 200px);
}
#game-review-container.modal {
  position: absolute;
  top: 50%;
  height: 80%;
  width: 80%;
  max-height: 100%;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
}
@media only screen and (max-width: 767px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  #game-review-container {
    height: var(--better-full-vh) !important;
    width: 100vw !important;
    border-radius: 0 !important;
  }
}

#x-game-review {
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
#x-game-review .collapse {
  visibility: collapse;
  min-height: 0 !important;
  height: 0 !important;
}
#x-game-review #back-button {
  height: 40px;
  border-bottom: 1px solid var(--border-color);
}
#x-game-review .no-items-container {
  min-height: 250px;
  background: var(--background-third);
}
#x-game-review #playback-rate,
#x-game-review #note-tooltip,
#x-game-review #clip-hud {
  position: absolute;
  background: black;
  padding: 15px;
  border-radius: 10px;
  height: fit-content;
  overflow-x: hidden;
  z-index: 4;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  #x-game-review #playback-rate,
  #x-game-review #note-tooltip,
  #x-game-review #clip-hud {
    max-height: 80px;
  }
}
#x-game-review #playback-rate.playback,
#x-game-review #note-tooltip.playback,
#x-game-review #clip-hud.playback {
  white-space: inherit;
  text-align: center;
  top: 0;
  right: 0;
  left: unset;
}
#x-game-review #playback-rate .close-vid-note,
#x-game-review #note-tooltip .close-vid-note,
#x-game-review #clip-hud .close-vid-note {
  position: absolute;
  top: 3px;
  right: 1px;
}
#x-game-review #playback-rate {
  left: 0;
  top: 0;
  white-space: pre-wrap;
}
#x-game-review #note-tooltip {
  left: 35px;
  bottom: 0;
  white-space: pre-wrap;
  background-color: #1d1d1d;
}
#x-game-review #note-tooltip.top {
  top: 0;
  left: 0;
}
#x-game-review #clip-hud {
  background-color: #1d1d1d;
}
#x-game-review #clip-hud.top-right {
  top: 0;
  right: 0;
}
#x-game-review #clip-hud.top-left {
  top: 0;
  left: 0;
}
#x-game-review #clip-hud.bottom-left {
  bottom: 35px;
  left: 0;
}
#x-game-review #clip-hud.bottom-right {
  bottom: 0;
  right: 0;
}
#x-game-review #clip-hud.bottom {
  bottom: 20px;
  left: 35px;
  width: calc(100% - 35px);
}
#x-game-review #clip-hud.top {
  top: 0;
  left: 0;
  width: 100%;
}
#x-game-review #clip-hud .settings {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 17px;
  height: 17px;
}
#x-game-review #clip-hud dialog {
  border: 0;
  padding: 15px;
}
#x-game-review #clip-hud dialog .hud-settings-container {
  width: 678px;
}
#x-game-review #clip-hud dialog .hud-settings-container > div.title {
  margin-top: 15px;
  margin-bottom: 5px;
}
#x-game-review #clip-hud dialog .hud-settings-container .section {
  background-color: var(--background-secondary);
  padding: 15px;
  border-radius: 10px;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-preview {
  min-height: 83px;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-preview .hud-view {
  height: fit-content;
  max-width: 100%;
  min-width: 100px;
  padding: 10px;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .active .stack,
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .active .bar {
  border-color: #0a84ff !important;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .active .stack .inner,
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .active .bar .inner {
  border-color: #0a84ff !important;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .active .stack .layout-name,
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .active .bar .layout-name {
  color: #0a84ff;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .stack,
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .bar {
  width: 150px;
  height: 100px;
  border-width: 2px;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select:hover {
  cursor: pointer;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .stack .inner {
  width: 25%;
  height: 25%;
  border-radius: 6px 2px 6px 6px;
  border-width: 0 0 2px 2px;
}
#x-game-review #clip-hud dialog .hud-settings-container .hud-mode-select .bar .inner {
  height: 20%;
  border-radius: 6px 6px 2px 2px;
  border-width: 2px 0 0;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list {
  width: 100%;
  overflow-y: auto;
  background: var(--background-secondary);
  border-radius: 8px;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .drag-item {
  padding: 5px;
  min-height: 23px;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .drag-item:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .drag-item .drag-icon {
  width: 20px;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .default-cursor {
  cursor: default;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .stat.active {
  background: #3e3e3e;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .border-light-bottom {
  border-bottom: 1px solid white;
}
#x-game-review #clip-hud dialog .hud-settings-container .dragable-list .border-light-top {
  border-top: 1px solid white;
}
#x-game-review #top-controls {
  min-height: 53px;
  max-height: 53px;
  border-bottom: black solid 1px;
}
#x-game-review #top-controls .expand-button,
#x-game-review #top-controls #close-game-review-button {
  width: 36px;
  height: 36px;
  opacity: 0.5;
}
#x-game-review #top-controls .turtle-button {
  height: 30px;
  width: 30px;
  opacity: 0.3;
}
#x-game-review #top-controls .turtle-button svg {
  overflow: visible;
}
#x-game-review #top-controls .selected-clip-buttons {
  height: 36px;
  opacity: 0.5;
}
#x-game-review #top-controls .selected-clip-buttons.disabled, #x-game-review #top-controls .selected-clip-buttons:disabled {
  opacity: 0.3;
}
#x-game-review #top-controls .selected-clip-buttons.active {
  opacity: 1;
}
@media only screen and (max-width: 1200px) {
  #x-game-review #top-controls .selected-clip-buttons {
    width: 36px;
    height: 36px;
  }
}
@media only screen and (max-width: 860px) {
  #x-game-review #top-controls .selected-clip-buttons {
    width: 30px;
    height: 30px;
  }
}
#x-game-review #top-controls .statistics-button {
  height: 36px;
  opacity: 0.5;
}
@media only screen and (max-width: 1200px) {
  #x-game-review #top-controls .statistics-button {
    width: 36px;
  }
}
@media only screen and (max-width: 860px) {
  #x-game-review #top-controls .statistics-button {
    width: 30px;
    height: 30px;
  }
}
#x-game-review #top-controls .clipping-button,
#x-game-review #top-controls #edit-note-button,
#x-game-review #top-controls #create-title-card-button,
#x-game-review #top-controls #enable-multi-select-mode {
  width: 36px;
  height: 36px;
  opacity: 0.5;
}
#x-game-review #top-controls .clipping-button:disabled,
#x-game-review #top-controls #edit-note-button:disabled,
#x-game-review #top-controls #create-title-card-button:disabled,
#x-game-review #top-controls #enable-multi-select-mode:disabled {
  opacity: 0.3;
}
@media only screen and (max-width: 860px) {
  #x-game-review #top-controls .clipping-button,
  #x-game-review #top-controls #edit-note-button,
  #x-game-review #top-controls #create-title-card-button,
  #x-game-review #top-controls #enable-multi-select-mode {
    width: 30px;
    height: 30px;
  }
}
#x-game-review #top-controls .clipping-button.recording-active,
#x-game-review #top-controls #edit-note-button.recording-active,
#x-game-review #top-controls #create-title-card-button.recording-active,
#x-game-review #top-controls #enable-multi-select-mode.recording-active {
  opacity: 1;
  background-color: red;
}
#x-game-review #top-controls .top-controls-separator {
  height: 32px;
  border-right: solid 1px #464649;
}
#x-game-review #video-container {
  position: relative;
  max-height: calc(100% - 200px);
  transition: max-height 1s;
  aspect-ratio: 16/9;
  cursor: none;
}
#x-game-review #video-container.scrubber-hidden, #x-game-review #video-container.horizontal {
  max-height: 100%;
  height: 100%;
  aspect-ratio: auto;
}
#x-game-review #video-container.video-vertical {
  min-height: 40vh;
  max-height: 40vh;
}
#x-game-review #video-container.show-navigation, #x-game-review #video-container.shows-whiteboard {
  cursor: auto;
}
#x-game-review #video-container #video-inner-container {
  background-color: black;
  overflow: hidden;
}
#x-game-review #video-container #video-inner-container .clipping-button {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 1;
  width: 40px;
  height: 40px;
  opacity: 1;
  background-color: red;
}
#x-game-review #video-container #whiteboard {
  position: absolute;
  background-color: white;
}
#x-game-review #video-container video {
  height: 100%;
  width: 100%;
}
#x-game-review #video-container .split-video-container {
  height: 100%;
  width: 100%;
  display: flex;
}
#x-game-review #video-container .split-video-container .split-adjustments {
  position: absolute;
  top: 10px;
  width: 50%;
  padding: 5px;
  z-index: 1;
}
#x-game-review #video-container .split-video-container input {
  width: 80%;
}
#x-game-review #video-container #skip-feedback-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
#x-game-review #video-container #drawing-canvas {
  position: absolute;
}
#x-game-review #video-container #video-navigation {
  position: absolute;
  bottom: 20px;
  max-width: 440px;
  height: 75px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(39, 39, 39, 0.9);
  border: 1px solid #313131;
  border-radius: 2px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s linear;
  z-index: 4;
}
@media (hover: hover) {
  #x-game-review #video-container #video-navigation:hover {
    opacity: 1;
  }
}
#x-game-review #video-container #video-navigation .video-controls-container {
  width: 86px;
}
#x-game-review #video-container #video-navigation .camera-angle-list-item {
  border-radius: 3px;
}
@media only screen and (max-width: 767px), (max-height: 500px) {
  #x-game-review #video-container #video-navigation .camera-select-popover {
    transform: translate3d(0, -62px, 0) !important;
  }
}
#x-game-review #video-container .show-navigation #video-navigation {
  opacity: 1;
}
#x-game-review #video-container #back-to-live-button {
  position: absolute;
  top: 10px;
  z-index: 100000000;
}
#x-game-review .zero-min-width {
  min-width: 0;
}
@media only screen and (max-width: 767px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  #x-game-review {
    width: 100vw;
  }
  #x-game-review #video-and-scrubber-container,
  #x-game-review .scrubber-toggle-button {
    width: 100vw !important;
  }
}
#x-game-review #progress-container {
  cursor: pointer;
  width: 100%;
}
#x-game-review .stat-button .line-on-hover:hover {
  text-decoration: underline;
}
#x-game-review #loading-movie {
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: rgba(0, 0, 0, 0.6);
  flex-direction: column;
  z-index: 4;
  cursor: auto;
}
#x-game-review #tag-folder-container {
  overflow-y: auto;
}
#x-game-review #tag-folder-container button:last-child .border-bottom {
  border-color: transparent;
}
#x-game-review .x-tag-folder-row {
  box-sizing: border-box;
}
#x-game-review .tag-color {
  height: 13px;
  width: 15px;
  border-radius: 50%;
}
#x-game-review .tag-color.red {
  background-color: #ff3b30;
  color: white !important;
}
#x-game-review .tag-color.orange {
  background-color: #ff9500;
  color: white !important;
}
#x-game-review .tag-color.yellow {
  background-color: #fc0;
  color: white !important;
}
#x-game-review .tag-color.green {
  background-color: #4cd964;
  color: white !important;
}
#x-game-review .tag-color.teal {
  background-color: #5ac8fa;
  color: white !important;
}
#x-game-review .tag-color.blue {
  background-color: #007aff;
  color: white !important;
}
#x-game-review .tag-color.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
#x-game-review .tag-color.purple {
  background-color: #5856d6;
  color: white !important;
}
#x-game-review #left-menu-navigation {
  height: 41px;
}
#x-game-review #playlist-select {
  max-height: 180px;
}
#x-game-review .game-review-middle-container {
  height: calc(100% - 54px);
}
#x-game-review .game-review-middle-container.no-top-controls {
  height: 100%;
}
#x-game-review .game-review-middle-container #video-and-scrubber-container {
  position: relative;
}
@media only screen and (max-height: 500px), (orientation: portrait) {
  #x-game-review .game-review-middle-container {
    height: 100%;
  }
}
#x-game-review #on-vid-list-button {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
}
#x-game-review #on-vid-close-button {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}

#fast-scrubber,
#instant-breakdown-scrubber {
  max-height: var(--scrubber-max-height);
  position: relative;
  cursor: pointer;
  touch-action: none;
  transition: max-height 1s, width 1s;
}
#fast-scrubber.scrubber-hidden,
#instant-breakdown-scrubber.scrubber-hidden {
  max-height: 0;
}
#fast-scrubber.vertical-view,
#instant-breakdown-scrubber.vertical-view {
  position: absolute;
  bottom: 0;
  z-index: 1;
}
#fast-scrubber.vertical-view.scrubber-hidden,
#instant-breakdown-scrubber.vertical-view.scrubber-hidden {
  max-height: 0;
}
#fast-scrubber .scrubber-toggle-button,
#instant-breakdown-scrubber .scrubber-toggle-button {
  position: absolute;
  top: -20px;
  height: 20px;
  width: 100%;
}
#fast-scrubber .scrubber-toggle-button:hover,
#instant-breakdown-scrubber .scrubber-toggle-button:hover {
  background-color: rgba(140, 140, 140, 0.1882352941);
}
#fast-scrubber #bottom-video-control-bar,
#instant-breakdown-scrubber #bottom-video-control-bar {
  position: absolute;
  top: -50px;
  width: 100%;
  background-color: var(--background-primary);
}
#fast-scrubber #bottom-video-control-bar .turtle-button svg,
#instant-breakdown-scrubber #bottom-video-control-bar .turtle-button svg {
  overflow: visible;
}
#fast-scrubber.in-nudging,
#instant-breakdown-scrubber.in-nudging {
  min-height: var(--scrubber-max-height);
}
#fast-scrubber.in-nudging #fast-scrubber-now-line,
#instant-breakdown-scrubber.in-nudging #fast-scrubber-now-line {
  height: 100px;
  background-color: #007aff;
}
#fast-scrubber.moving,
#instant-breakdown-scrubber.moving {
  cursor: move;
}
#fast-scrubber #fast-scrubber-now-line,
#instant-breakdown-scrubber #fast-scrubber-now-line {
  background-color: #f2f4ff;
  height: var(--scrubber-max-height);
  width: 1px;
  position: absolute;
  top: 0;
  left: 50%;
  pointer-events: none;
}
#fast-scrubber #scrubber-time-tooltip,
#instant-breakdown-scrubber #scrubber-time-tooltip {
  position: absolute;
  background: black;
  top: calc(50% + 20px);
  left: calc(50% + 5px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  pointer-events: none;
}
#fast-scrubber .btn-scrubber-container,
#instant-breakdown-scrubber .btn-scrubber-container {
  position: absolute;
  max-height: var(--scrubber-max-height);
  top: 15px;
}
#fast-scrubber .btn-scrubber,
#instant-breakdown-scrubber .btn-scrubber {
  z-index: 7;
  position: relative;
  cursor: pointer;
}
#fast-scrubber .btn-scrubber-container-left,
#instant-breakdown-scrubber .btn-scrubber-container-left {
  left: 20px;
}
#fast-scrubber .btn-scrubber-container-left-lower,
#instant-breakdown-scrubber .btn-scrubber-container-left-lower {
  left: 20px;
  top: 45px;
}
#fast-scrubber .btn-scrubber-container-right,
#instant-breakdown-scrubber .btn-scrubber-container-right {
  right: 20px;
}

#playlist {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
}
#playlist .playlist-menu-item {
  cursor: pointer;
  width: 30px;
  height: 30px;
}
#playlist #playlist-info {
  position: absolute;
  left: -605px;
  width: 600px;
  top: 0;
  background-color: black;
  padding: 5px;
}
#playlist #playlist-info table {
  width: 100%;
  border-collapse: collapse;
}
#playlist #playlist-info .active {
  background-color: rgba(140, 140, 140, 0.25);
}
#playlist #playlist-info .timeline-label {
  cursor: pointer;
}
#playlist #keyboard-shortcuts {
  position: absolute;
  left: -445px;
  top: 0;
  background-color: black;
  padding: 10px;
}

#statistics {
  height: calc(100% - 100px);
  overflow-y: auto;
}
#statistics #table-overflow {
  overflow: auto;
}

.file-preview,
#title-card-container {
  position: relative;
}
.file-preview.vertical-view,
#title-card-container.vertical-view {
  min-height: 40vh;
  max-height: 40vh;
}

#playlist-card {
  z-index: 1;
  overflow: hidden;
}
#playlist-card.hidden {
  visibility: hidden;
}
#playlist-card.vertical-view {
  min-height: 40vh;
  max-height: 40vh;
}
#playlist-card .playlist-card-item {
  overflow: auto;
  margin: 10px 25px;
  padding: 5px;
  min-width: calc(100% - 60px);
  max-width: calc(100% - 60px);
  min-height: 1em;
  background: inherit;
}
#playlist-card .playlist-card-item.border {
  border: 1px var(--border-color) solid;
}
#playlist-card .title {
  height: 74px;
  max-height: 74px;
  flex-shrink: 0;
}
#playlist-card .subtitle {
  height: 64px;
  max-height: 64px;
  flex-shrink: 0;
}
#playlist-card .content {
  max-height: calc(80% - 120px);
}
#playlist-card #bullets-area:focus-within {
  outline: 1px auto;
}
#playlist-card #bullets-area ul {
  margin: 0;
}
#playlist-card #bullets-area ul:focus {
  outline: 0;
}
#playlist-card #bullets-area ul li {
  list-style-type: disc;
  text-align: left;
}
#playlist-card #bullets-area ul.upper-alpha li {
  list-style-type: upper-alpha;
}
#playlist-card #bullets-area ul.decimal li {
  list-style-type: decimal;
}

#on-vid-progress-bar {
  position: absolute;
  bottom: 0;
}

img {
  object-fit: contain;
}

#title-card-logo {
  width: 80px;
  position: absolute;
  right: 30px;
  bottom: 30px;
}

.add-file-button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 36px;
  background-color: #fff;
  font-weight: bold;
  color: black;
  box-shadow: 0 2px 4px 0 rgb(0, 0, 0);
  border-radius: 30px;
}
.add-file-button:hover {
  background-color: #fff !important;
}

#images-title-card .img-container,
#image-bullets-title-card .img-container {
  position: relative;
}
#images-title-card .img-container .change-button,
#image-bullets-title-card .img-container .change-button {
  position: absolute;
}
#images-title-card .one-img,
#image-bullets-title-card .one-img {
  width: 100%;
}
#images-title-card .two-img,
#image-bullets-title-card .two-img {
  width: 50%;
  min-width: 50%;
}

.hidden {
  display: none;
}

.basic-popover-button input {
  opacity: 0;
  width: 0;
  height: 0;
}
.basic-popover-button .slider {
  position: relative;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
  min-width: 40px;
  min-height: 22px;
}
.basic-popover-button .slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 1px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.basic-popover-button input:checked + .slider {
  background-color: #2196f3;
}
.basic-popover-button input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
.basic-popover-button input:checked + .slider::before {
  transform: translateX(18px);
}

#statting-board-container .sections-container {
  height: calc(100% - 192px);
  max-height: calc(100% - 192px);
  overflow: hidden auto;
}
#statting-board-container #statting-board-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  flex-direction: column;
}
#statting-board-container #statting-board-menu .menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  z-index: 1;
}
#statting-board-container #statting-board-menu .menu-container .menu-item {
  width: 100%;
  position: relative;
}
#statting-board-container .section-hotkey:not(:empty) {
  margin-left: 5px;
  background-color: gray;
  color: black;
  aspect-ratio: 1/1;
  height: 14px;
  text-align: center;
  border-radius: 3px;
}
#statting-board-container .btn {
  height: 50px;
  background-color: var(--background-secondary);
  position: relative;
}
#statting-board-container .btn .hotkey {
  position: absolute;
  top: 4px;
  left: 4px;
}
#statting-board-container .btn.basic-popover-button {
  height: unset;
  padding: 7px;
}
#statting-board-container .btn.basic-popover-button:first-child {
  border-radius: 6px 6px 0 0;
}
#statting-board-container .btn.basic-popover-button:last-child {
  border-radius: 0 0 6px 6px;
}
#statting-board-container .btn:disabled {
  color: #757575;
}
#statting-board-container .btn.full {
  width: calc(100% - 10px);
}
#statting-board-container .btn.half {
  width: calc(50% - 5px);
}
#statting-board-container .btn.button-active {
  background-color: #0a84ff;
}
#statting-board-container .btn .subtitle {
  white-space: break-spaces;
}
#statting-board-container .btn #statting-period-select {
  width: 40px;
  color: white;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin-right: 10px;
}
#statting-board-container .btn.swap-button {
  height: unset;
  background-color: transparent;
}

.option-color-red {
  color: red;
}

.option-color-cyan {
  color: cyan;
}

.option-color-yellow {
  color: yellow;
}

.statting-footer {
  width: calc(100% - 10px);
}
.statting-footer .active-stat-list-popover {
  max-height: 165px;
  overflow: auto;
}
.statting-footer .statting-selected-stat-button :disabled {
  color: #757575;
}
.statting-footer .statting-selected-stat-button .info-button {
  width: 17px;
  height: 17px !important;
  border: 2px solid #007aff;
}
.statting-footer .fast-edit-buttons button {
  background-color: #5e5ce6 !important;
}
.statting-footer .fast-edit-buttons button.red {
  background-color: red !important;
}

#draggable-window-container {
  overflow: visible !important;
}
#draggable-window-container .draggable-window-body .buttons-container .btn {
  display: flex;
  align-items: center;
  height: 20px;
}
#draggable-window-container .draggable-window-body .buttons-container .basic-popover-button {
  height: 30px;
}

#draggable-window-container {
  position: absolute;
  z-index: 4;
  border: 1px solid var(--border-color);
  background: var(--background-third);
  border-radius: 8px;
  width: 400px;
  max-width: 100vw;
  min-height: 150px;
  max-height: 500px;
  overflow: hidden;
}
#draggable-window-container.full-vw {
  width: 100vw;
}
#draggable-window-container.full-vw #notes-editable-element {
  min-height: 300px;
}
#draggable-window-container .draggable-title {
  cursor: drag;
  border-bottom: 1px solid var(--border-color);
  background: var(--background-primary);
}
#draggable-window-container .draggable-title div {
  width: 90%;
  max-width: 90%;
}
#draggable-window-container .draggable-title div .title,
#draggable-window-container .draggable-title div .subtitle {
  margin: 0;
}
#draggable-window-container .draggable-window-body {
  height: 80%;
  max-height: 80%;
  overflow-y: auto;
}
#draggable-window-container .draggable-window-body .ember-content-editable {
  outline: 0;
}
#draggable-window-container #notes-editable-element {
  background-color: var(--background-third);
  color: #fff;
  border: none;
  outline: none;
  width: calc(100% - 30px);
  min-height: 100px;
  resize: none;
}
#draggable-window-container .next-clip {
  border: 1px solid var(--border-color);
}

#left-menu-container {
  position: relative;
  z-index: 1;
  box-shadow: 1px 1px 0 0 var(--box-shadow-color);
  background-color: var(--background-primary);
  min-width: 350px;
  max-width: 350px;
}
#left-menu-container:not(.horizontal) {
  transition: height 1s;
}
@media only screen and (max-width: 1200px) and (min-height: 501px) and (min-width: 768px) {
  #left-menu-container.wide {
    width: calc(100vw - 360px);
    min-width: calc(100vw - 360px);
    max-width: calc(100vw - 360px);
  }
}
@media only screen and (min-width: 1201px) and (min-height: 501px) {
  #left-menu-container.wide {
    min-width: 850px;
    max-width: 850px;
  }
}
#left-menu-container.overlay {
  position: absolute;
  height: var(--better-full-vh);
  z-index: 4;
  width: 100vw;
  max-width: unset;
}
#left-menu-container.hidden {
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  visibility: hidden;
}
#left-menu-container #left-menu-header {
  min-height: 53px;
  max-width: 100%;
  border-bottom: transparent 1px;
}
#left-menu-container #left-menu-header a,
#left-menu-container #left-menu-header button {
  width: 36px;
  height: 36px;
  opacity: 0.5;
  flex-shrink: 0;
}
#left-menu-container.vertical {
  min-width: 100%;
  width: 100%;
}
#left-menu-container .x-modal-side-panel {
  min-height: calc(100% - 65px);
  height: calc(100% - 65px);
}
#left-menu-container .turtle-button svg {
  overflow: visible;
}
#left-menu-container .left-menu-bottom-controls {
  height: 36px;
  background-color: var(--background-secondary);
}
#left-menu-container .left-menu-bottom-controls .sorting-button {
  height: 16px;
  border: 2px solid #007aff;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#left-menu-container .left-menu-bottom-controls .sorting-button .top {
  width: 8px;
  height: 2px;
  background: #007aff;
  margin-bottom: 1px;
  margin-top: 5px;
  border-radius: 1px;
}
#left-menu-container .left-menu-bottom-controls .sorting-button .mid {
  width: 6px;
  height: 2px;
  background: #007aff;
  margin-bottom: 1px;
  border-radius: 1px;
}
#left-menu-container .left-menu-bottom-controls .sorting-button .low {
  width: 4px;
  height: 2px;
  background: #007aff;
  margin-bottom: 2px;
  border-radius: 1px;
}
#left-menu-container .left-menu-bottom-controls .sorting-popover {
  width: 120px;
}
#left-menu-container .left-menu-bottom-controls .bottom-menu-centering-div {
  width: 18px;
}

.show-more-span:hover {
  text-decoration: underline;
  background-color: gray;
}

.breakdown-container {
  max-width: 80%;
  max-height: 80%;
}
.breakdown-container.start-width {
  max-width: 450px;
}
.breakdown-container video {
  aspect-ratio: 16/9;
  height: calc(80vh - 118px - 57px - 30px - 100px);
}
.breakdown-container video.small {
  height: calc(80vh - 220px - 57px - 30px - 100px);
}
.breakdown-container video.medium {
  height: calc(80vh - 157px - 57px - 30px - 100px);
}
.breakdown-container .top-instruction {
  background-color: #ff375f;
  color: white;
  opacity: 1;
  font-size: 15px;
  font-weight: 600;
  font-style: semibold;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
}
.breakdown-container .vert-line {
  border-left: 2px solid var(--border-color);
  height: 37px;
  margin: 0 40px;
}
.breakdown-container .team-side-select {
  max-width: 150px;
  width: 150px;
  text-wrap: balance;
}
.breakdown-container .breakdown-stats-list {
  width: 240px;
  min-width: 240px;
  overflow: hidden auto;
  height: calc(80vh - 57px);
  max-height: calc(80vh - 57px);
}
.breakdown-container .btn:hover {
  color: white;
}

#right-side-menu {
  min-width: 350px;
  max-width: 350px;
  transition: max-width 1s, min-width 1s;
}
#right-side-menu.right-menu-hidden {
  min-width: 0;
  max-width: 0;
}
#right-side-menu .wrapper {
  width: 350px;
  height: 100%;
}
#right-side-menu #rhm-body {
  height: calc(100% - 53px);
}
#right-side-menu #rhm-body .rhm-container {
  width: calc(100% - 16px);
  border-radius: 10px;
  margin: 8px;
  background-color: var(--background-secondary);
}
#right-side-menu #rhm-body .rhm-container #adjust-player-form .x-form-builder-row {
  width: 60% !important;
}
#right-side-menu #rhm-body .rhm-container textarea {
  height: 100px;
  background: var(--background-secondary);
  border-radius: 10px;
  outline: 0;
  border: 0;
  resize: none;
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  margin: 5px 0 5px 6px;
  color: white;
}
#right-side-menu #rhm-body .rhm-container .rhm-item {
  overflow: auto;
  display: flex;
  align-items: center;
  padding: 11px 21px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item.list.active::after {
  content: "✓";
  color: #0a84ff;
  margin-left: auto;
  margin-right: 5px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item input {
  width: 100%;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .line {
  border-bottom: 2px solid;
  rotate: -45deg;
  width: 21px;
  transform-origin: left;
  height: 18px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .diagonal-arrow {
  rotate: 45deg;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .diagonal-arrow svg {
  stroke-width: 3;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .circle {
  border: 2px solid;
  border-radius: 50%;
  height: 15px;
  width: 15px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .rect {
  border: 2px solid;
  border-radius: 2px;
  height: 13px;
  width: 13px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item input#border-toggle {
  width: min-content !important;
  margin-right: 5px !important;
}
#right-side-menu #rhm-body .rhm-container .rhm-item.color-picker {
  max-width: 100%;
  overflow-x: scroll;
  gap: 10px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .color-pick {
  min-width: 60px;
  height: 35px;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .color-pick.active-color {
  border: 2px solid white;
}
#right-side-menu #rhm-body .rhm-container .rhm-item .no-opacity {
  min-width: 16px;
  min-height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.7098039216);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .full-opacity {
  min-width: 16px;
  min-height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.7098039216);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .teal {
  background-color: rgb(100, 210, 255);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .black {
  background-color: rgb(0, 0, 0);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .red {
  background-color: rgb(255, 69, 58);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .blue {
  background-color: rgb(10, 132, 255);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .yellow {
  background-color: rgb(255, 214, 10);
}
#right-side-menu #rhm-body .rhm-container .rhm-item .green {
  background-color: rgb(48, 209, 88);
}
#right-side-menu #rhm-body .rhm-container :not(.list).active {
  background-color: #0a84ff;
  color: white;
}
#right-side-menu #rhm-body .rhm-container :not(.list).active svg {
  fill: white;
  stroke: white;
}
#right-side-menu #rhm-body .rhm-container hr {
  width: calc(100% - 42px);
  margin: 0 auto;
  color: var(--border-color);
}
#right-side-menu #rhm-body .break-line {
  width: calc(100% - 42px);
  height: 1px;
  background-color: var(--border-color);
}

#right-side-menu-parent-container dialog,
#clip-editing-parent-container dialog {
  width: 200px;
  margin-top: 25px;
}
#right-side-menu-parent-container .x-form-builder-row,
#clip-editing-parent-container .x-form-builder-row {
  background-color: var(--background-secondary);
  padding: 10px;
  border-radius: 10px;
  justify-content: space-between;
  width: 80%;
  margin-bottom: 10px;
}
#right-side-menu-parent-container .x-form-builder-row label,
#clip-editing-parent-container .x-form-builder-row label {
  text-align: left;
  white-space: nowrap;
}
#right-side-menu-parent-container .x-form-builder-row.form-button,
#clip-editing-parent-container .x-form-builder-row.form-button {
  padding: 0 10px;
}
#right-side-menu-parent-container .x-form-builder-row.form-button button,
#clip-editing-parent-container .x-form-builder-row.form-button button {
  padding: 10px 0;
  text-align: left;
  width: 100%;
  font-size: 15px;
}
#right-side-menu-parent-container .x-form-builder-row.form-button span,
#clip-editing-parent-container .x-form-builder-row.form-button span {
  margin-left: 3px;
}

/* stylelint-disable scss/operator-no-newline-after */
.box-score-height {
  height: calc(100% - (53px + 1px) - 41px);
}
.box-score-height.sections-hidden {
  height: calc(100% - (53px + 1px));
}

.clips-height {
  height: calc(100% - 40px - (53px + 1px) - 41px);
}
.clips-height.sections-hidden {
  height: calc(100% - (53px + 1px));
}

#ember-testing .btn-popover {
  display: initial !important;
}

.section-header {
  border-bottom: 1px solid var(--border-color);
}
.section-header .section-header-button {
  height: 40px;
  min-width: 40px;
  max-width: 74px;
  border-bottom: 0 !important;
}

#box-score-menu {
  overflow-y: auto;
  backface-visibility: hidden;
}
#box-score-menu .stat-no-films {
  opacity: 0.4;
}
#box-score-menu .stat-button {
  display: block;
}
@media (hover: hover) {
  #box-score-menu .stat-button:hover {
    background-color: unset;
  }
}
#box-score-menu .btn-popover {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
#box-score-menu .select-stat-button {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
}
#box-score-menu .select-stat-button.not-selected {
  border: solid 1px var(--border-color);
}
#box-score-menu .under-nav {
  overflow-y: auto;
  height: calc(100% - 41px);
}
#box-score-menu .under-nav.sections-shown {
  height: 100%;
}
#box-score-menu .long-sub {
  white-space: nowrap;
  display: inline-block;
  border: none;
}
#box-score-menu .box-score-menu-item {
  height: 50px;
  box-shadow: 0 1px 0 0 var(--box-shadow-color);
}
#box-score-menu .box-score-menu-item.box-score-menu-border {
  border-bottom: 1px solid var(--border-color);
}
#box-score-menu :not(:last-child).box-score-menu-item .box-score-menu-border {
  border-bottom: 1px solid var(--border-color);
  height: 100%;
}
#box-score-menu .period-group {
  background: var(--background-secondary);
  height: 30px;
}
#box-score-menu .combo-group,
#box-score-menu .filter-header-item {
  box-sizing: border-box;
}
#box-score-menu .combo-group.dragging *,
#box-score-menu .filter-header-item.dragging * {
  pointer-events: none;
}
#box-score-menu .combo-group.border-drag-bottom,
#box-score-menu .filter-header-item.border-drag-bottom {
  border-bottom: 1px solid white;
}
#box-score-menu .combo-group.border-drag-top,
#box-score-menu .filter-header-item.border-drag-top {
  border-top: 1px solid white;
}
#box-score-menu .combo-group > div,
#box-score-menu .filter-header-item > div {
  min-height: 40px;
}
#box-score-menu .combo-group-active .combo-group-border {
  border-bottom: 1px solid transparent;
}
#box-score-menu .combo-group-border button:first-child {
  font-size: 15px;
}
#box-score-menu .combo-group-group .combo-group:not(:last-child, .combo-group-active).combo-group-border,
#box-score-menu .filter-header-group .combo-group:not(:last-child, .combo-group-active).combo-group-border {
  border-bottom: 1px solid var(--border-color);
}
#box-score-menu .combo-group-group .set-count,
#box-score-menu .combo-group-group .score-spans,
#box-score-menu .filter-header-group .set-count,
#box-score-menu .filter-header-group .score-spans {
  font-size: 12px;
}
#box-score-menu .combo-group-group button .combo-stats div:not(:first-child) button,
#box-score-menu .filter-header-group button .combo-stats div:not(:first-child) button {
  font-size: 12px;
}
#box-score-menu .combo-group-group button .combo-stats div:not(:first-child) span,
#box-score-menu .filter-header-group button .combo-stats div:not(:first-child) span {
  font-size: 12px;
}
#box-score-menu .combo-group .btn-popover {
  display: none !important;
}
#box-score-menu .combo-group-active {
  background-color: #3e3e3e;
}
#box-score-menu .combo-group-active.some-stat-selected {
  background-color: #2d3134;
}
@media (hover: hover) {
  #box-score-menu .combo-group-active .btn-popover:hover,
  #box-score-menu .combo-group-active .select-stat-button:hover {
    background-color: #8c8c8c !important;
  }
}
#box-score-menu .combo-group-selected {
  background-color: #3e3e3e !important;
}
#box-score-menu .combo-group-selected .btn-popover {
  display: flex !important;
}
#box-score-menu .combo-group-selected .btn-popover:hover {
  background: #3e3e3e !important;
}
#box-score-menu .combo-group-selected .stat-time:not(.in-public) {
  display: none;
}
#box-score-menu .combo-group-active .font-light-grey-always,
#box-score-menu .combo-group-selected .font-light-grey-always {
  color: white;
}
#box-score-menu .combo-group-text-row {
  max-width: calc(100% - 15px);
}
#box-score-menu .stat-list-stat-button {
  min-height: 62px;
}
#box-score-menu .stat-list-stat-button .combo-group-text-row {
  max-width: calc(100% - 50px);
}
@media (hover: hover) {
  #box-score-menu .combo-group:hover .btn-popover {
    display: flex !important;
  }
  #box-score-menu .combo-group:hover .btn-popover:hover,
  #box-score-menu .combo-group:hover .select-stat-button:hover {
    background-color: #3e3e3e;
  }
  #box-score-menu .combo-group:hover .stat-time:not(.in-public) {
    display: none;
  }
  #box-score-menu button:hover .font-light-grey-always {
    color: white;
  }
}

@media (hover: none) {
  .combo-group .btn-popover {
    display: flex !important;
  }
}
.border-red {
  border: solid 1px red !important;
}

.border-transparent {
  border: solid 1px transparent;
}

.adjust-player-player-name-button:focus {
  background-color: #8c8c8c;
}

.x-icon svg {
  fill: var(--icons-color);
  stroke: var(--icons-color);
}

.x-icon-error svg {
  fill: red;
  stroke: red;
}

.x-icon-success svg {
  fill: green;
  stroke: green;
}

.x-icon-white svg {
  fill: white;
  stroke: white;
}

.x-icon-black svg {
  fill: black;
  stroke: black;
}

.x-icon-original svg {
  fill: unset;
  stroke: unset;
}

.x-icon-red svg {
  fill: #ff453a;
  stroke: #ff453a;
}

.x-icon-off svg {
  fill: var(--border-color);
  stroke: var(--border-color);
}

.x-icon-blue svg {
  fill: #0058d0;
  stroke: #0058d0;
}

.x-icon-light-blue svg {
  fill: #0a84ff;
  stroke: #0a84ff;
}

.x-icon-dark-grey svg {
  fill: #151515;
  stroke: white;
}

.x-icon-grey svg {
  fill: #757575;
  stroke: #757575;
  opacity: 0.6;
}

.x-icon-solid-grey svg {
  fill: #757575;
  stroke: #757575;
}

.x-icon-green svg {
  fill: #6cd501;
  stroke: #6cd501;
}

.x-icon-gold svg {
  fill: #ffd700;
  stroke: #ffd700;
}

.x-icon-text-light-mode svg {
  fill: #4a4a4a;
  stroke: #4a4a4a;
}

.x-icon.align-to-text {
  vertical-align: bottom;
}

.x-icon.stroke-width-1 svg {
  stroke-width: 1;
}
.x-icon.stroke-width-2 svg {
  stroke-width: 2;
}
.x-icon.stroke-width-3 svg {
  stroke-width: 3;
}
.x-icon.stroke-width-4 svg {
  stroke-width: 4;
}
.x-icon.stroke-width-5 svg {
  stroke-width: 5;
}
.x-icon.stroke-width-6 svg {
  stroke-width: 6;
}
.x-icon.stroke-width-7 svg {
  stroke-width: 7;
}
.x-icon.stroke-width-8 svg {
  stroke-width: 8;
}

.x-legacy-modal {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: calc(100vw - 20px);
  background-color: var(--background-third);
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  border: 1px solid var(--border-color);
  z-index: 9;
  border-radius: 6px;
}
.x-legacy-modal .menu-shadow {
  box-shadow: 0 2px 4px 0 rgba(148, 148, 148, 0.4);
}
.x-legacy-modal.relative {
  position: relative;
}

#x-new-camera-modal #qr-codes {
  position: relative;
  height: 420px;
  box-shadow: inset 0 0 3px 2px var(--box-shadow-color);
}
#x-new-camera-modal .arrows-row {
  height: 15px;
}

#team-member-image .border-top {
  border-top: 1px solid #d3d3d3;
}
#team-member-image .preview {
  width: 100%;
}
#team-member-image #team-member-photo {
  display: none;
}
#team-member-image #spinner-container {
  position: absolute;
}
#team-member-image .high-z-index {
  z-index: 100;
}
#team-member-image #dragndrop-area {
  overflow: hidden;
  width: 40%;
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
  border-radius: 50%;
}
#team-member-image #dragndrop-area img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: unset;
}
#team-member-image .footer {
  width: 40%;
}
#team-member-image .dragndrop-hover {
  box-shadow: inset 0 0 3px 1px #007aff;
}

.x-filesystem #add-new-game-button,
.x-filesystem #sub-team-member-management {
  z-index: 1;
}
.x-filesystem div.search {
  background: #f2f2f7;
  border-radius: 6px;
  margin: 10px;
  padding: 7px 7px 0 42px;
  position: relative;
  width: calc(var(--page-content-width) - 69px);
  max-width: calc(100% - 69px);
}
@media screen and (max-width: 767px) {
  .x-filesystem div.search {
    width: calc(100% - 69px);
    max-width: calc(100% - 69px);
  }
}
.x-filesystem div.search div.magnifying-glass {
  left: 13px;
  position: absolute;
  top: 11px;
}
.x-filesystem div.search div.magnifying-glass svg g {
  fill: #a3a3aa;
  stroke: #a3a3aa;
}
.x-filesystem div.search div.input-container {
  float: none;
  min-width: 80px;
  overflow: hidden;
  flex-grow: 2;
}
.x-filesystem div.search .clear-query-button {
  opacity: 0.5;
  margin-left: 10px;
}
.x-filesystem div.search .clear-query-button:hover:not(.disabled) {
  cursor: pointer;
}
.x-filesystem div.search input.search-input {
  background: inherit;
  border: none;
  box-sizing: border-box;
  color: black;
  display: inline-block;
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 6px;
  outline: none;
  width: 100%;
  padding: initial;
}
.x-filesystem div.search input.search-input::placeholder {
  color: #a3a3aa;
  opacity: 1; /* Firefox */
}
.x-filesystem div.search select.search-dropdown {
  max-width: 40px;
}
.x-filesystem div.search select.search-dropdown.staff, .x-filesystem div.search select.search-dropdown.team {
  max-width: 55px;
}
.x-filesystem div.search select.search-dropdown.private {
  max-width: unset;
}
.x-filesystem .game-menu-popover {
  border-radius: 6px;
  min-width: 150px;
}
.x-filesystem .game-menu-popover .ember-popover-inner div .game-edit-group {
  border-radius: 6px;
  color: black;
}
.x-filesystem .game-menu-popover .ember-popover-inner div .game-edit-group > *:hover {
  background-color: #e6e6e7;
}
.x-filesystem .game-menu-popover .ember-popover-inner div .game-edit-group > *:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
.x-filesystem .game-menu-popover .ember-popover-inner div .game-edit-group > *:not(:last-child).border-strong {
  border-bottom: 3px solid #e0e0e0;
}
.x-filesystem .game-menu-popover .ember-popover-inner div .game-edit-group > *#game-delete-button {
  color: red;
}
.x-filesystem.grid {
  width: var(--page-content-width);
  max-width: 100%;
}
.x-filesystem.grid .tiles-group-title ~ .tiles-group-title {
  margin-top: 50px;
}
.x-filesystem.grid #tiles {
  display: flex;
  flex-wrap: wrap;
}
.x-filesystem.grid #tiles .blue-folder-container {
  display: inline-block;
  width: 116px;
  height: 88px;
}
.x-filesystem.grid #tiles .filesystem-item {
  width: 210px;
  margin: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 0 0 var(--box-shadow-color);
  border-radius: 9px;
  opacity: 1;
}
.x-filesystem.grid #tiles .filesystem-item header {
  height: 118px;
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail {
  background-color: rgba(0, 0, 0, 0.14);
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.red {
  background-color: #ff3b30;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.orange {
  background-color: #ff9500;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.yellow {
  background-color: #fc0;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.green {
  background-color: #4cd964;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.blue {
  background-color: #007aff;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item header.no-thumbnail.purple {
  background-color: #5856d6;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item footer {
  height: 52px;
}
.x-filesystem.grid #tiles .filesystem-item img {
  width: 210px;
  height: 118px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.x-filesystem.grid #tiles .filesystem-item img.sb-logo {
  height: 90px;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail {
  background-color: transparent;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.red {
  background-color: #ff3b30;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.orange {
  background-color: #ff9500;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.yellow {
  background-color: #fc0;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.green {
  background-color: #4cd964;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.blue {
  background-color: #007aff;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.x-filesystem.grid #tiles .filesystem-item:hover header.no-thumbnail.purple {
  background-color: #5856d6;
  color: white !important;
}
.x-filesystem.grid #tiles .with-button {
  width: 150px;
}
.x-filesystem.grid #tiles .without-button {
  width: 210px;
}
.x-filesystem.grid #tiles .thumbnail-text {
  font-size: 18px;
}
.x-filesystem.list {
  width: calc(100vw - 28px);
  max-width: 740px;
}
.x-filesystem.list .tiles-group-title {
  margin-top: 20px;
  margin-bottom: 5px;
}
.x-filesystem.list #tiles {
  display: flex;
  flex-direction: column;
}
.x-filesystem.list #tiles .blue-folder-container {
  display: inline-block;
  height: 37.6px;
  width: 51.2px;
}
.x-filesystem.list #tiles .filesystem-item {
  display: flex;
  height: 58px;
  max-height: 58px;
  opacity: 1;
}
.x-filesystem.list #tiles .filesystem-item header {
  width: 80px;
  min-width: 80px;
  height: 100%;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail {
  height: 45px;
  margin-top: 6px;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.red {
  background-color: #ff3b30;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.orange {
  background-color: #ff9500;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.yellow {
  background-color: #fc0;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.green {
  background-color: #4cd964;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.blue {
  background-color: #007aff;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item header.no-thumbnail.purple {
  background-color: #5856d6;
  color: white !important;
}
.x-filesystem.list #tiles .filesystem-item footer {
  width: 100%;
}
.x-filesystem.list #tiles .filesystem-item img {
  width: 80px;
  height: 58px;
}
.x-filesystem.list #tiles .filesystem-item img.sb-logo {
  height: 38px;
  pad: 10px 0;
}
.x-filesystem.list #tiles .thumbnail-text {
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  width: 80px;
  height: 58px;
  padding-top: 10px;
  font-size: 13px;
}
.x-filesystem.list #tiles .filesystem-item:not(:last-child) footer {
  border-bottom: 1px, solid, var(--border-list-separator);
}

.x-team-member-photo {
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
}

#team-logo-drop-area {
  position: relative;
  width: 40%;
  aspect-ratio: 1;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  overflow: hidden;
}
#team-logo-drop-area.light-border {
  border-color: red;
}
#team-logo-drop-area .logo-display {
  height: 90%;
  width: 100%;
}
#team-logo-drop-area .x-spinner {
  position: fixed;
}

.logo-footer {
  height: 10%;
  width: 50%;
  margin-bottom: 5px;
}

#team-logo {
  display: none;
}

.x-stat-management-popover {
  z-index: 3;
  background-color: rgba(49, 49, 49, 0.95);
  border-color: transparent;
  border-radius: 10px;
}
.x-stat-management-popover.top-layer {
  z-index: 6;
}
.x-stat-management-popover button {
  height: unset !important;
}

.fat-border-top {
  border-top: 6px solid rgba(28, 28, 28, 0.3);
}

#adjust-player-player-name {
  height: 16px;
}

.no-arrow {
  display: none;
}

.x-form-builder {
  display: flex;
  justify-content: center;
}
.x-form-builder p {
  margin: 0;
}
.x-form-builder p:not(:last-of-type) {
  margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .x-form-builder .x-form-builder-row {
    display: flex;
    flex-direction: column;
    width: 300px;
  }
  .x-form-builder .x-form-builder-row label {
    margin-bottom: 2px;
  }
  .x-form-builder .x-form-builder-row .x-input {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .x-form-builder .center-with-form {
    margin-left: calc(66.6666666667% - 12px);
  }
  .x-form-builder .x-form-builder-row {
    display: flex;
    align-items: center;
    width: 80%;
  }
  .x-form-builder .x-form-builder-row label {
    flex-basis: calc(100% * 3 / 12);
    max-width: calc(100% * 3 / 12 - 0);
    text-align: right;
    font-weight: 700;
    margin-right: 15px;
  }
  .x-form-builder .x-form-builder-row.footer {
    margin-left: 26px;
  }
  .x-form-builder .x-form-builder-row .x-input {
    flex-basis: calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12 - 0);
  }
  .x-form-builder .x-form-builder-row .x-input.toggle {
    flex-basis: calc(100% * 7 / 12);
    max-width: calc(100% * 7 / 12 - 47px);
  }
}
.x-form-builder .x-form-builder-row input:not([type=checkbox]),
.x-form-builder .x-form-builder-row input:not([type=radio]) {
  height: 30px;
}
.x-form-builder .x-form-builder-row input[type=checkbox] {
  height: 16px;
}
.x-form-builder .x-form-builder-row input[type=radio] {
  height: 16px;
  margin: 0;
}
.x-form-builder .x-form-builder-row select,
.x-form-builder .x-form-builder-row.radio {
  height: 30px;
}
.x-form-builder .x-form-builder-separator {
  width: 100%;
  border: 0.5px solid #d3d3d3;
}
.x-form-builder .x-form-builder-row select,
.x-form-builder .x-form-builder-row .fake-select,
.x-form-builder .x-form-builder-row input,
.x-form-builder .x-form-builder-row #country,
.x-form-builder .x-form-builder-row .es-control {
  border-radius: 16px;
}
.x-form-builder .x-form-builder-row .filtered-options-list {
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
}

.x-form-builder-row.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.x-form-builder-row.toggle .slider {
  position: relative;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
  min-width: 40px;
  min-height: 22px;
}
.x-form-builder-row.toggle .slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.x-form-builder-row.toggle input:checked + .slider {
  background-color: #2196f3;
}
.x-form-builder-row.toggle input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
.x-form-builder-row.toggle input:checked + .slider::before {
  transform: translateX(18px);
}

.x-messenger {
  display: flex;
  color: #fff;
  height: 100%;
  width: 100%;
}
.x-messenger .message-radius {
  border-radius: 11px;
}
.x-messenger .list-reply-container {
  width: fit-content;
  align-self: flex-end;
}
.x-messenger .image-overlay {
  object-fit: contain;
  max-width: 95%;
  max-height: 95%;
  overflow: auto;
}
.x-messenger section.chat-room-list {
  background: #262626;
  border-left: 1px solid #393939;
  border-right: 1px solid #393939;
  display: inline-block;
  float: left;
  height: 100%;
  overflow: hidden;
  width: 318px;
}
@container (max-width: 720px) {
  .x-messenger section.chat-room-list {
    display: block;
    float: none;
    position: absolute;
    width: 100%;
    border-left: initial;
    border-right: initial;
  }
}
.x-messenger section.chat-room-list.is-side-modal {
  display: block;
  float: none;
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  border-left: initial;
  border-right: initial;
}
.x-messenger section.chat-room-list div.top-buffer {
  border-bottom: 1px solid #393939;
  height: 90px;
  background: var(--background-secondary);
  position: relative;
}
.x-messenger section.chat-room-list div.top-buffer button svg g {
  fill: #fff;
  stroke: #fff;
}
.x-messenger section.chat-room-list div.top-buffer button svg g path {
  stroke-width: 2.5;
}
.x-messenger section.chat-room-list div.top-buffer.is-side-modal {
  height: 54px;
}
.x-messenger section.chat-room-list div.top-buffer.is-side-modal button svg g {
  fill: inherit;
  stroke: inherit;
}
.x-messenger section.chat-room-list div.top-buffer.is-side-modal .back {
  visibility: hidden;
}
.x-messenger section.chat-room-list div.chat-rooms {
  max-height: calc(100% - 90px);
  overflow: auto;
}
.x-messenger section.chat-room-list div.chat-rooms.is-side-modal {
  max-height: calc(100% - 54px);
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room {
  border-bottom: 1px solid #393939;
  box-sizing: border-box;
  cursor: pointer;
  height: 77px;
  overflow: hidden;
  padding: 8px 16px 5px 0;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room.active {
  background: #393939;
  pointer-events: none;
}
@container (max-width: 720px) {
  .x-messenger section.chat-room-list div.chat-rooms div.chat-room.active {
    background: #262626;
    pointer-events: all;
  }
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.left-buffer {
  display: inline-block;
  float: left;
  min-height: 1px;
  position: relative;
  width: 27px;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.left-buffer div.circle-filled {
  left: 8px;
  position: absolute;
  top: 3px;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.left-buffer div.circle-filled svg g {
  fill: #0a84ff;
  stroke: #0a84ff;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content {
  display: inline-block;
  float: left;
  position: relative;
  width: calc(100% - 27px);
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content h4.title {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content div.info {
  color: rgba(235, 235, 245, 0.6);
  position: absolute;
  right: 0;
  top: 0;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content div.info div.x-icon {
  margin-right: 2px;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content div.info div.x-icon svg g {
  fill: inherit;
  stroke: inherit;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content div.info span.datetime {
  font-size: 15px;
}
.x-messenger section.chat-room-list div.chat-rooms div.chat-room div.chat-room-content p.last-message {
  color: rgba(235, 235, 245, 0.6);
  font-size: 15px;
  margin: 0;
  margin-top: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 38px;
}
.x-messenger section.chat-room-details {
  background: #212121;
  float: left;
  height: 100%;
  width: calc(100% - 320px);
}
.x-messenger section.chat-room-details.is-side-modal {
  display: block;
  float: none;
  width: 100%;
  z-index: -1;
  height: calc(100% - 74px);
  position: absolute;
}
@container (max-width: 720px) {
  .x-messenger section.chat-room-details {
    display: block;
    float: none;
    width: 100%;
    z-index: -1;
  }
}
.x-messenger section.chat-room-details .side-modal-chat-title {
  position: absolute;
  top: 0;
  z-index: 1;
  background: inherit;
  height: 40px;
}
.x-messenger section.chat-room-details .message-popover {
  width: 141px;
}
.x-messenger section.chat-room-details .message-popover .message-editor {
  min-width: 250px;
}
.x-messenger section.chat-room-details .message-popover .message-editor button {
  border: none;
}
.x-messenger section.chat-room-details.drag {
  position: relative;
}
.x-messenger section.chat-room-details.drag .drop-info {
  position: absolute;
  height: var(--better-full-vh);
  width: 100%;
  z-index: 2;
  opacity: 0.3;
  background-color: gray;
  color: black;
}
.x-messenger section.chat-room-details div.top-buffer {
  height: 53px;
  position: absolute;
  background: var(--background-secondary);
  top: 0;
  width: calc(100vw - 320px - 281px);
  z-index: 1;
  border-bottom: 1px solid rgba(60, 60, 67, 0.15);
}
@container (max-width: 991px) {
  .x-messenger section.chat-room-details div.top-buffer {
    width: calc(100vw - 320px);
  }
}
@container (max-width: 720px) {
  .x-messenger section.chat-room-details div.top-buffer {
    width: 100%;
  }
}
.x-messenger section.chat-room-details div.top-buffer .buffer-buttons-wrapper {
  position: absolute;
  width: 100%;
  top: 9px;
  justify-content: flex-start;
}
.x-messenger section.chat-room-details div.top-buffer .buffer-buttons-wrapper .details-back-button path {
  stroke-width: 2.5;
}
.x-messenger section.chat-room-details div.top-buffer button {
  height: 36px;
  margin-left: 5px;
}
.x-messenger section.chat-room-details div.top-buffer button.active-call-icon {
  background-color: #0a84ff;
  border-radius: 15px;
  width: 70px;
  height: 27px;
}
.x-messenger section.chat-room-details div.top-buffer button.active-call-icon:hover {
  background-color: #0a84ff !important;
}
.x-messenger section.chat-room-details div.top-buffer button.join-call-button {
  background-color: #6cd501;
  border-radius: 15px;
  width: 55px;
  height: 27px;
}
.x-messenger section.chat-room-details div.top-buffer button.join-call-button:hover {
  background-color: #6cd501 !important;
}
.x-messenger section.chat-room-details div.top-buffer button.chat-room-settings {
  width: 56px;
  margin-left: 0;
}
.x-messenger section.chat-room-details div.top-buffer button.chat-room-start-call {
  width: 56px;
  margin-left: auto;
}
.x-messenger section.chat-room-details div.top-buffer button.back {
  left: 15px;
}
.x-messenger section.chat-room-details div.message-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.x-messenger section.chat-room-details div.message-container.is-side-modal {
  height: 100%;
}
.x-messenger section.chat-room-details div.message-board {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
  max-height: calc(100% - 89px);
  overflow: auto;
  padding: 0 20px;
}
.x-messenger section.chat-room-details div.message-board.relative {
  position: relative;
}
.x-messenger section.chat-room-details div.message-board .board-spinner {
  position: absolute;
  width: 90%;
  height: 90%;
}
.x-messenger section.chat-room-details div.message-board div.top-message-buffer {
  height: 120px;
}
.x-messenger section.chat-room-details div.message-board div.day-divider {
  color: #565659;
  font-size: 15px;
  font-weight: bold;
  margin: 8px 0;
  text-align: center;
}
.x-messenger section.chat-room-details div.message-board div.message {
  font-size: 15px;
  overflow: hidden;
}
.x-messenger section.chat-room-details div.message-board div.message div.left-buffer {
  display: inline-block;
  float: left;
  min-height: 1px;
  width: 44px;
}
.x-messenger section.chat-room-details div.message-board div.message div.left-buffer img.x-team-member-photo {
  border-radius: 6px;
  height: 36px;
  position: relative;
  top: 3px;
  width: 36px;
  box-shadow: unset;
}
.x-messenger section.chat-room-details div.message-board div.message .message-reactions-box {
  border-radius: 1px 11px 11px;
  width: fit-content;
  max-width: 100%;
  white-space: inherit;
  cursor: pointer;
}
.x-messenger section.chat-room-details div.message-board div.message .message-reactions-box.own {
  border-radius: 11px 1px 11px 11px;
}
.x-messenger section.chat-room-details div.message-board div.message .attachment-reactions-box {
  border-radius: 1px 11px 11px;
  width: fit-content;
  max-width: 100%;
  white-space: inherit;
  cursor: pointer;
}
.x-messenger section.chat-room-details div.message-board div.message .attachment-reactions-box.own {
  border-radius: 11px 1px 11px 11px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content {
  max-width: 100%;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content.has-avatar {
  max-width: calc(100% - 44px);
  display: inline-block;
  float: left;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .reaction-radius {
  border-radius: 11px 11px 11px 1px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content span.author {
  color: #929297;
  display: inline-block;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content span.time {
  color: #565659;
  margin-left: 8px;
  white-space: nowrap;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply),
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box {
  background-color: rgba(0, 0, 0, 0.05);
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).red,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.red,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.red {
  background-color: #ff3b30;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).orange,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.orange,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.orange {
  background-color: #ff9500;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).yellow,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.yellow,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.yellow {
  background-color: #fc0;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).green,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.green,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.green {
  background-color: #4cd964;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).teal,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.teal,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).blue,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.blue,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.blue {
  background-color: #007aff;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).indigo,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.indigo,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content:not(.reply).purple,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-reactions-box.purple,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .attachment-reactions-box.purple {
  background-color: #5856d6;
  color: white !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.circle-filled {
  margin-left: 2px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.circle-filled svg g {
  fill: #2bac76;
  stroke: #2bac76;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container {
  border-radius: 6px;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .giphy-container {
  position: relative;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .giphy-container img {
  background: none !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .giphy-container .giphy-gif {
  width: auto !important;
  height: auto !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .giphy-container .giphy-gif > div {
  width: auto !important;
  height: auto !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .giphy-container .giphy-gif > div > div {
  display: none;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .giphy-container .giphy-attribution {
  position: absolute;
  left: 2px;
  bottom: 2px;
  max-height: 18px;
  max-width: 50px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .attached-file-thumbnail,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .image-preview {
  max-height: 162px;
  border-radius: 6px;
  object-fit: contain;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .attached-file-thumbnail:hover,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachments-container .image-preview:hover {
  cursor: pointer;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content.mobile,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachment.mobile {
  -webkit-touch-callout: none;
  user-select: none;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .text-content.mobile > *,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content .message-attachment.mobile > * {
  -webkit-touch-callout: none;
  user-select: none;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment {
  position: relative;
  margin: 8px 5px 5px;
  max-width: 210px;
  flex-shrink: 0;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment a,
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment img {
  max-height: 162px;
  max-width: 210px;
  width: auto;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment.same-author {
  margin-bottom: 5px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container img {
  border-radius: 15px 15px 0 0;
  display: block;
  height: 118px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.no-thumbnail {
  background: #393939;
  border-radius: 15px 15px 0 0;
  font-size: 18px;
  height: 118px;
  padding: 0 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.round-attachment {
  border-radius: 15px !important;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info {
  background: #2d2d2d;
  border-radius: 0 0 15px 15px;
  font-size: 12px;
  padding: 0 16px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info.url {
  padding: 10px 20px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info div.name {
  font-weight: bold;
  padding: 6px 0 2px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info div.additional-info {
  color: rgba(235, 235, 245, 0.6);
  padding-bottom: 6px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info button.active-call-icon {
  background-color: #0a84ff;
  border-radius: 15px;
  width: 70px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info button.join-call-button {
  background-color: #6cd501;
  border-radius: 15px;
  width: 55px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content {
  margin: 2px 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 14px;
  width: fit-content;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content:not(.reply) {
  color: #fff;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content.has-reactions {
  margin-bottom: 1px;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content.only-emoji {
  font-size: 50px;
  background-color: transparent;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content > * {
  max-width: 100%;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content.same-author {
  margin-top: 0;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content a.link {
  color: #00b0f4;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content a.link:hover {
  text-decoration: underline;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content p {
  margin: 0;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content blockquote {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.x-messenger section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content blockquote p {
  border-left: 5px solid rgba(0, 0, 0, 0.1);
  padding-left: 5px;
}
.x-messenger section.chat-room-details div.message-actions,
.x-messenger section.chat-room-details .reply-container {
  background: #171717;
  border-top: 1px solid #393939;
  box-sizing: border-box;
  min-height: 58px;
  padding: 0 48px;
}
@container (max-width: 720px) {
  .x-messenger section.chat-room-details div.message-actions,
  .x-messenger section.chat-room-details .reply-container {
    padding: 0 24px;
  }
}
.x-messenger section.chat-room-details div.message-actions div.attachment-container,
.x-messenger section.chat-room-details .reply-container div.attachment-container {
  max-width: 210px;
}
.x-messenger section.chat-room-details div.message-actions div.attachment-container div.round-attachment,
.x-messenger section.chat-room-details .reply-container div.attachment-container div.round-attachment {
  border-radius: 15px !important;
  padding: 0 16px;
}
.x-messenger section.chat-room-details div.message-actions .attachment-info,
.x-messenger section.chat-room-details .reply-container .attachment-info {
  background: #2d2d2d;
  border-radius: 0 0 15px 15px;
  font-size: 12px;
}
.x-messenger section.chat-room-details div.message-actions .attachment-info div.name,
.x-messenger section.chat-room-details .reply-container .attachment-info div.name {
  font-weight: bold;
  padding: 6px 0 2px;
  margin-left: 10px;
  margin-right: 10px;
}
.x-messenger section.chat-room-details div.message-actions .attachment-info div.additional-info,
.x-messenger section.chat-room-details .reply-container .attachment-info div.additional-info {
  color: #808080;
  padding-bottom: 6px;
  margin-left: 10px;
}
.x-messenger section.chat-room-details div.message-actions div.editor,
.x-messenger section.chat-room-details .reply-container div.editor {
  color: #fff;
  font-size: 16px;
  margin-bottom: 8px;
  margin-top: 18px;
  outline: none;
  overflow-wrap: anywhere;
}
.x-messenger section.chat-room-details div.message-actions div.editor.ember-content-editable:empty:not(:focus)::before, .x-messenger section.chat-room-details div.message-actions div.editor.ember-content-editable:focus:empty::before,
.x-messenger section.chat-room-details .reply-container div.editor.ember-content-editable:empty:not(:focus)::before,
.x-messenger section.chat-room-details .reply-container div.editor.ember-content-editable:focus:empty::before {
  color: #a3a3aa;
}
.x-messenger section.chat-room-details div.message-actions div.editor span#mentionables,
.x-messenger section.chat-room-details .reply-container div.editor span#mentionables {
  display: inline;
}
.x-messenger section.chat-room-details div.message-actions div.editor blockquote,
.x-messenger section.chat-room-details .reply-container div.editor blockquote {
  display: flex;
  flex-direction: column;
  margin: 5px 0;
}
.x-messenger section.chat-room-details div.message-actions div.editor blockquote > blockquote,
.x-messenger section.chat-room-details .reply-container div.editor blockquote > blockquote {
  margin: 0;
}
.x-messenger section.chat-room-details div.message-actions div.editor blockquote p,
.x-messenger section.chat-room-details .reply-container div.editor blockquote p {
  border-left: 5px solid rgba(0, 0, 0, 0.1);
  padding-left: 5px;
  margin: 5px 0;
}
.x-messenger section.chat-room-details div.message-actions div.message-preview,
.x-messenger section.chat-room-details .reply-container div.message-preview {
  margin: 16px 5px 4px;
  max-width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.x-messenger section.chat-room-details div.message-actions div.message-preview .close-filled,
.x-messenger section.chat-room-details .reply-container div.message-preview .close-filled {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.x-messenger section.chat-room-details div.message-actions div.message-preview .close-filled svg g,
.x-messenger section.chat-room-details .reply-container div.message-preview .close-filled svg g {
  fill: rgb(213, 213, 213);
  stroke: rgb(213, 213, 213);
}
.x-messenger section.chat-room-details div.message-actions div.message-preview div.thumbnail-container,
.x-messenger section.chat-room-details .reply-container div.message-preview div.thumbnail-container {
  position: relative;
  width: 100%;
  max-width: 168px;
  min-width: 70px;
  margin-left: 5px;
  margin-right: 5px;
}
@container (max-width: 767px) {
  .x-messenger section.chat-room-details div.message-actions div.message-preview div.thumbnail-container,
  .x-messenger section.chat-room-details .reply-container div.message-preview div.thumbnail-container {
    min-width: 28px;
  }
}
.x-messenger section.chat-room-details div.message-actions__button-group,
.x-messenger section.chat-room-details .reply-container__button-group {
  overflow: hidden;
  width: 100%;
  margin-bottom: 17px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button,
.x-messenger section.chat-room-details .reply-container__button-group button {
  border-radius: 5px;
  color: #565659;
  font-size: 15px;
  padding: 4px 6px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.is-side-modal,
.x-messenger section.chat-room-details .reply-container__button-group button.is-side-modal {
  color: inherit;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.margin-right,
.x-messenger section.chat-room-details .reply-container__button-group button.margin-right {
  margin-right: 6px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.send,
.x-messenger section.chat-room-details .reply-container__button-group button.send {
  float: right;
  height: 26px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.send > span,
.x-messenger section.chat-room-details .reply-container__button-group button.send > span {
  bottom: 6px;
  position: relative;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.send.active,
.x-messenger section.chat-room-details .reply-container__button-group button.send.active {
  color: #0a84ff;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.send.active svg g,
.x-messenger section.chat-room-details .reply-container__button-group button.send.active svg g {
  fill: #0a84ff;
  stroke: #0a84ff;
}
.x-messenger section.chat-room-details div.message-actions__button-group button.send:disabled,
.x-messenger section.chat-room-details .reply-container__button-group button.send:disabled {
  opacity: 1;
}
@media (hover: hover) {
  .x-messenger section.chat-room-details div.message-actions__button-group button:hover,
  .x-messenger section.chat-room-details .reply-container__button-group button:hover {
    background: #3a3a3c;
    color: #fff;
  }
  .x-messenger section.chat-room-details div.message-actions__button-group button:hover svg g,
  .x-messenger section.chat-room-details .reply-container__button-group button:hover svg g {
    fill: #fff;
    stroke: #fff;
  }
}
.x-messenger section.chat-room-details div.message-actions__button-group button div.x-icon,
.x-messenger section.chat-room-details .reply-container__button-group button div.x-icon {
  position: relative;
}
.x-messenger section.chat-room-details div.message-actions__button-group button div.x-icon.attach-paperclip,
.x-messenger section.chat-room-details .reply-container__button-group button div.x-icon.attach-paperclip {
  top: 1px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button div.x-icon.emoji,
.x-messenger section.chat-room-details .reply-container__button-group button div.x-icon.emoji {
  top: 2px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button div.x-icon.send-icon,
.x-messenger section.chat-room-details .reply-container__button-group button div.x-icon.send-icon {
  bottom: 1px;
  margin-right: 3px;
}
.x-messenger section.chat-room-details div.message-actions__button-group button svg g,
.x-messenger section.chat-room-details .reply-container__button-group button svg g {
  fill: inherit;
  stroke: inherit;
}
.x-messenger section.chat-room-details span.mentioned {
  background: #0655a3;
  border-radius: 4px;
  display: inline-block;
  padding: 1px 4px 2px;
}
.x-messenger div.popover {
  all: initial;
  background: #252525;
  border: none;
  border-radius: 6px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.15), 2px 8px 10px 0 rgba(0, 0, 0, 0.15), -1px 8px 10px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  font-family: inherit;
  margin: 5px 0 0;
  z-index: 1;
}
.x-messenger div.popover div.tooltip-arrow {
  display: none;
}
.x-messenger div.popover ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.x-messenger div.popover ul li {
  cursor: pointer;
  font-size: 15px;
  height: 31px;
  line-height: 31px;
  padding: 0 16px;
  position: relative;
}
.x-messenger div.popover ul li:hover {
  background: #393939 !important;
}
.x-messenger div.popover ul li:first-child {
  border-radius: 6px 6px 0 0;
}
.x-messenger div.popover ul li:last-child {
  border-radius: 0 0 6px 6px;
}
.x-messenger div.popover ul li:only-child {
  border-radius: 6px;
}
.x-messenger div.popover ul li.light {
  background: #323232;
}
.x-messenger div.popover ul li.no-events {
  pointer-events: none;
}
.x-messenger div.popover.mentions {
  max-height: 320px;
  overflow-x: scroll;
  width: 320px;
}
.x-messenger div.popover.mentions span.member-info {
  color: #a3a3aa;
  line-height: 40px;
  max-height: 40px;
  position: absolute;
  right: 16px;
  top: 0;
}
.x-messenger div.popover.mentions li.active {
  background: #393939;
}
.x-messenger div.popover.attach-options input#message-file {
  display: none;
}
.x-messenger div.popover.attach-options li.active {
  background: #393939;
}
.x-messenger div.popover.rfs-popover {
  max-width: 210px;
  display: flex;
}
.x-messenger div.popover.rfs-popover .title {
  color: gray;
  font-size: 11px;
  padding: 7px 5px 0;
}
.x-messenger div.popover.rfs-popover .text {
  font-size: 13px;
  font-weight: bold;
  padding: 5px;
}
.x-messenger div.popover.rfs-popover .start-button {
  font-size: 13px;
  font-weight: bold;
  padding: 5px;
  border-top: 4px solid var(--border-color) !important;
  color: green;
  margin: 0;
}
.x-messenger div.popover.rfs-popover .start-button .x-icon-success svg g {
  fill: green !important;
  stroke: green !important;
}
.x-messenger.light-theme {
  color: black;
}
.x-messenger.light-theme section.chat-room-list {
  background: #f2f2f7;
  border-color: rgba(60, 60, 67, 0.15) !important;
}
.x-messenger.light-theme section.chat-room-list div.top-buffer {
  border-color: rgba(60, 60, 67, 0.15);
}
.x-messenger.light-theme section.chat-room-list div.top-buffer button {
  border: none;
}
.x-messenger.light-theme section.chat-room-list div.top-buffer button svg g {
  fill: #0a84ff !important;
  stroke: #0a84ff !important;
}
.x-messenger.light-theme section.chat-room-list div.top-buffer button:hover {
  background: none !important;
}
.x-messenger.light-theme section.chat-room-list div.chat-room {
  background: #fff;
  border-bottom: 1px solid rgba(60, 60, 67, 0.15) !important;
}
.x-messenger.light-theme section.chat-room-list div.chat-room.active {
  background: rgba(60, 60, 67, 0.15) !important;
  border-bottom: none !important;
}
@container (max-width: 720px) {
  .x-messenger.light-theme section.chat-room-list div.chat-room.active {
    background: #fff !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.15) !important;
  }
}
.x-messenger.light-theme section.chat-room-list div.chat-room div.chat-room-content div.info {
  color: #808080 !important;
}
.x-messenger.light-theme section.chat-room-list div.chat-room div.chat-room-content p.last-message {
  color: #808080 !important;
}
.x-messenger.light-theme section.chat-room-details {
  background: #fff;
}
.x-messenger.light-theme section.chat-room-details.overlay {
  z-index: 4;
}
.x-messenger.light-theme section.chat-room-details div.top-buffer .buffer-buttons-wrapper {
  position: absolute;
  width: 100%;
  top: 9px;
  justify-content: flex-start;
}
.x-messenger.light-theme section.chat-room-details div.top-buffer .chat-name-centering {
  width: 77px;
}
.x-messenger.light-theme section.chat-room-details div.top-buffer button {
  border: none;
}
.x-messenger.light-theme section.chat-room-details div.top-buffer button:hover {
  background: rgba(60, 60, 67, 0.15);
}
.x-messenger.light-theme section.chat-room-details div.message-board .board-spinner {
  position: absolute;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message {
  max-width: 66%;
}
@container (max-width: $full-view-width) {
  .x-messenger.light-theme section.chat-room-details div.message-board div.message {
    max-width: 66%;
  }
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content:not(.reply) {
  color: black;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content a.link {
  color: #0073f4;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content.current-member {
  margin-left: auto;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content.current-member.reaction-radius {
  border-radius: 11px 11px 1px;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.text-content.current-member a.link {
  color: rgb(255, 255, 255);
  text-decoration: underline;
  margin-right: 4px;
  margin-left: 4px;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.no-thumbnail {
  background: rgba(60, 60, 67, 0.15);
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info {
  background: #f2f2f7;
}
.x-messenger.light-theme section.chat-room-details div.message-board div.message div.chat-room-message-content div.message-attachment div.attachment-container div.attachment-info div.additional-info {
  color: #808080;
}
.x-messenger.light-theme section.chat-room-details .reply-container {
  position: relative;
}
.x-messenger.light-theme section.chat-room-details .reply-container .reply-close-btn {
  position: absolute;
  top: 0;
  right: 10px;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container {
  border-radius: 6px;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .giphy-container {
  position: relative;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .giphy-container img {
  background: none !important;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .giphy-container .giphy-gif {
  width: auto !important;
  height: auto !important;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .giphy-container .giphy-gif > div {
  width: auto !important;
  height: auto !important;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .giphy-container .giphy-gif > div > div {
  display: none;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .giphy-container .giphy-attribution {
  position: absolute;
  left: 2px;
  bottom: 2px;
  max-height: 18px;
  max-width: 50px;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .attached-file-thumbnail,
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .image-preview {
  max-height: 162px;
  border-radius: 6px;
  object-fit: contain;
}
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .attached-file-thumbnail:hover,
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachments-container .image-preview:hover {
  cursor: pointer;
}
.x-messenger.light-theme section.chat-room-details .reply-container .text-content.mobile,
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachment.mobile {
  -webkit-touch-callout: none;
  user-select: none;
}
.x-messenger.light-theme section.chat-room-details .reply-container .text-content.mobile > *,
.x-messenger.light-theme section.chat-room-details .reply-container .message-attachment.mobile > * {
  -webkit-touch-callout: none;
  user-select: none;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.message-attachment {
  position: relative;
  margin: 8px 5px 5px;
  max-width: 210px;
  flex-shrink: 0;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.message-attachment div.attachment-container div.additional-info {
  color: #808080;
}
.x-messenger.light-theme section.chat-room-details .reply-container a,
.x-messenger.light-theme section.chat-room-details .reply-container img {
  max-height: 162px;
  max-width: 210px;
  height: 162px;
  width: auto;
}
.x-messenger.light-theme section.chat-room-details .reply-container.same-author {
  margin-bottom: 5px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container img {
  border-radius: 15px 15px 0 0;
  display: block;
  height: 118px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.no-thumbnail {
  background: rgba(60, 60, 67, 0.15);
  border-radius: 15px 15px 0 0;
  font-size: 18px;
  height: 118px;
  padding: 0 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.round-attachment {
  border-radius: 15px !important;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.attachment-info {
  background: #f2f2f7;
  border-radius: 0 0 15px 15px;
  font-size: 12px;
  padding: 0 16px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.attachment-info.url {
  padding: 10px 20px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.attachment-info div.name {
  font-weight: bold;
  padding: 6px 0 2px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.attachment-info div.additional-info {
  color: #808080;
  padding-bottom: 6px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.attachment-info button.active-call-icon {
  background-color: #0a84ff;
  border-radius: 15px;
  width: 70px;
}
.x-messenger.light-theme section.chat-room-details .reply-container div.attachment-container div.attachment-info button.join-call-button {
  background-color: #6cd501;
  border-radius: 15px;
  width: 55px;
}
.x-messenger.light-theme section.chat-room-details div.message-actions,
.x-messenger.light-theme section.chat-room-details .reply-container {
  background: #fff;
  border-top: 1px solid rgba(60, 60, 67, 0.15);
}
.x-messenger.light-theme section.chat-room-details div.message-actions .attachment-info,
.x-messenger.light-theme section.chat-room-details .reply-container .attachment-info {
  background: #f2f2f7;
}
.x-messenger.light-theme section.chat-room-details div.message-actions .attachment-info .additional-info,
.x-messenger.light-theme section.chat-room-details .reply-container .attachment-info .additional-info {
  color: #808080;
}
.x-messenger.light-theme section.chat-room-details div.message-actions div.editor,
.x-messenger.light-theme section.chat-room-details .reply-container div.editor {
  color: black;
  white-space: pre-wrap;
}
.x-messenger.light-theme section.chat-room-details div.message-actions div.message-preview .image-preview,
.x-messenger.light-theme section.chat-room-details div.message-actions div.message-preview .no-thumbnail,
.x-messenger.light-theme section.chat-room-details .reply-container div.message-preview .image-preview,
.x-messenger.light-theme section.chat-room-details .reply-container div.message-preview .no-thumbnail {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  min-height: 36px;
}
.x-messenger.light-theme section.chat-room-details div.message-actions div.message-preview .image-preview.sb-item,
.x-messenger.light-theme section.chat-room-details div.message-actions div.message-preview .no-thumbnail.sb-item,
.x-messenger.light-theme section.chat-room-details .reply-container div.message-preview .image-preview.sb-item,
.x-messenger.light-theme section.chat-room-details .reply-container div.message-preview .no-thumbnail.sb-item {
  border-radius: 6px 6px 0 0;
}
.x-messenger.light-theme section.chat-room-details div.message-actions div.message-preview div.no-thumbnail,
.x-messenger.light-theme section.chat-room-details .reply-container div.message-preview div.no-thumbnail {
  height: 100%;
  width: 100%;
  background: rgba(60, 60, 67, 0.15);
  font-size: 13px;
  text-align: center;
}
.x-messenger.light-theme section.chat-room-details div.message-actions__button-group button,
.x-messenger.light-theme section.chat-room-details .reply-container__button-group button {
  color: #565659;
}
@media (hover: hover) {
  .x-messenger.light-theme section.chat-room-details div.message-actions__button-group button:hover,
  .x-messenger.light-theme section.chat-room-details .reply-container__button-group button:hover {
    background: #f2f2f7;
  }
  .x-messenger.light-theme section.chat-room-details div.message-actions__button-group button:hover svg g,
  .x-messenger.light-theme section.chat-room-details .reply-container__button-group button:hover svg g {
    fill: #565659;
    stroke: #565659;
  }
}
.x-messenger.light-theme section.chat-room-details span.mentioned {
  background: #bfdefd;
}
.x-messenger.light-theme div.popover {
  background: #fff !important;
  color: black;
}
.x-messenger.light-theme div.popover ul li:hover {
  background: #f2f2f7 !important;
}
.x-messenger.light-theme div.popover ul li.active {
  background: #f2f2f7 !important;
}
.x-messenger.light-theme div.popover ul li.light {
  background: #fff;
}

.x-modal-confirmation {
  background: #252525;
  border-radius: 6px;
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  color: #fff;
  left: calc(50% - 220px);
  min-height: 117px;
  position: fixed;
  top: calc(50% - 60px);
  width: 440px;
  z-index: 13;
}
@media only screen and (max-width: 440px) {
  .x-modal-confirmation {
    left: 1%;
    width: 98%;
  }
}
.x-modal-confirmation .message-container {
  box-sizing: border-box;
  font-size: 15px;
  min-height: 76px;
  padding: 20px 24px;
}
.x-modal-confirmation hr {
  border: 1px solid #464649;
  border-bottom: none;
  margin: 0;
}
.x-modal-confirmation .actions {
  font-size: 16px;
  padding: 10px 24px;
  overflow: hidden;
}
.x-modal-confirmation .actions .destructive-confirm {
  color: #ff453a;
  float: left;
}
.x-modal-confirmation .actions .normal-action {
  float: right;
}
.x-modal-confirmation .actions .normal-action.confirm {
  margin-left: 24px;
}
.x-modal-confirmation.light-theme {
  background: #fff;
  color: black;
}
.x-modal-confirmation.light-theme hr {
  border: 1px solid rgba(60, 60, 67, 0.15);
}
.x-modal-confirmation.light-theme .actions button:hover {
  background: none;
}

.x-modal-side-panel {
  background: #252525;
  border-radius: 6px;
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100% - 32px);
  min-height: calc(100% - 32px);
  position: fixed;
  right: -600px;
  top: 16px;
  transition: 0.5s ease;
  width: 600px;
  z-index: 11;
  overflow-y: auto;
}
@media only screen and (max-width: 600px) {
  .x-modal-side-panel {
    left: 1%;
    transition: none;
    width: 98%;
  }
}
.x-modal-side-panel .border-radius {
  border-radius: 6px;
}
.x-modal-side-panel .modal-inner-color {
  background: #f2f2f7;
}
.x-modal-side-panel.bottom-layer {
  height: calc(100% - 64px);
  margin-right: 15px;
  min-height: calc(100% - 64px);
  top: 32px;
}
.x-modal-side-panel.top-layer {
  z-index: 13;
}
.x-modal-side-panel .panel-header {
  padding: 16px 14px;
}
.x-modal-side-panel .panel-header h1 {
  display: inline;
  font-size: 22px;
}
.x-modal-side-panel .panel-header button.btn:not(.option-button) {
  height: 35px;
  float: right;
  margin-left: 10px;
}
.x-modal-side-panel .panel-header .top-button {
  float: right;
}
.x-modal-side-panel .panel-header .top-button:hover {
  background: #47a2ff;
  cursor: pointer;
}
.x-modal-side-panel div.search {
  background: #38383b;
  border-radius: 3px;
  margin: 0 16px 12px;
  padding: 7px 7px 0 42px;
  position: relative;
  overflow: auto;
  width: 85%;
  min-height: 35px;
}
.x-modal-side-panel div.search div.add-member,
.x-modal-side-panel div.search div.magnifying-glass {
  left: 13px;
  position: absolute;
  top: 11px;
}
.x-modal-side-panel div.search div.add-member svg g,
.x-modal-side-panel div.search div.magnifying-glass svg g {
  fill: #a3a3aa;
  stroke: #a3a3aa;
}
.x-modal-side-panel div.search div.tag {
  background: #0655a3;
  border-radius: 8px;
  box-sizing: border-box;
  float: left;
  font-size: 16px;
  height: 26px;
  line-height: 26px;
  margin-bottom: 6px;
  margin-right: 6px;
  padding: 0 7px 0 10px;
}
.x-modal-side-panel div.search div.tag label {
  color: #fff;
  max-width: 100px;
}
.x-modal-side-panel div.search div.tag div.x-icon {
  cursor: pointer;
  position: relative;
  top: 3px;
}
.x-modal-side-panel div.search div.tag div.x-icon svg {
  fill: #fff;
  stroke: #fff;
}
.x-modal-side-panel div.search div.input-container {
  float: none;
  min-width: 91px;
  overflow: hidden;
  flex-grow: 2;
}
.x-modal-side-panel div.search .clear-query-button {
  opacity: 0.5;
}
.x-modal-side-panel div.search .clear-query-button:hover:not(.disabled) {
  cursor: pointer;
}
.x-modal-side-panel div.search input.search-input {
  background: inherit;
  border: none;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 6px;
  outline: none;
  width: 100%;
  padding: initial;
}
.x-modal-side-panel div.search input.search-input::placeholder {
  color: #a3a3aa;
  opacity: 1; /* Firefox */
}
.x-modal-side-panel div.clip-note textarea.clip-note-input {
  height: 50px;
  background-color: #2c2c2f;
  color: #fff;
  border: none;
}
.x-modal-side-panel .giphy-attribution {
  height: 30px;
}
.x-modal-side-panel span.subtitle {
  color: rgba(235, 235, 245, 0.6);
}
.x-modal-side-panel div.breadcrumb-trail {
  color: rgba(235, 235, 245, 0.6);
  margin: 0 16px 8px;
  text-transform: uppercase;
}
.x-modal-side-panel div.breadcrumb-trail span {
  cursor: pointer;
}
.x-modal-side-panel div.breadcrumb-trail span:last-child {
  cursor: default;
  pointer-events: none;
}
.x-modal-side-panel div.breadcrumb-trail div.chevron-right {
  margin-right: 4px;
  position: relative;
  top: 1px;
}
.x-modal-side-panel div.breadcrumb-trail div.chevron-right > svg g {
  fill: rgba(235, 235, 245, 0.6);
  stroke: rgba(235, 235, 245, 0.6);
}
.x-modal-side-panel div.breadcrumb-trail div.ellipsis {
  position: relative;
  top: 1px;
}
.x-modal-side-panel div.breadcrumb-trail div.ellipsis svg g {
  stroke: rgba(235, 235, 245, 0.6);
}
.x-modal-side-panel div.breadcrumb-trail div.ellipsis svg rect {
  stroke: rgba(235, 235, 245, 0.6);
}
.x-modal-side-panel div.breadcrumb-trail div.ellipsis svg:hover g {
  stroke: #fff;
}
.x-modal-side-panel div.breadcrumb-trail div.ellipsis svg:hover rect {
  fill: rgba(235, 235, 245, 0.6);
  stroke: #fff;
}
.x-modal-side-panel div.breadcrumb-trail div.breadcrumb-options {
  z-index: 2;
}
.x-modal-side-panel hr {
  border: 1px solid #464649;
  border-bottom: none;
  margin: 0;
}
.x-modal-side-panel .side-modal-insert.content {
  min-height: 100px;
  box-sizing: border-box;
  overflow: auto;
  flex: 1;
}
.x-modal-side-panel .side-modal-insert.content div.taggings-height {
  max-height: 92%;
  overflow-y: auto;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-container label {
  float: left;
  text-align: right;
  margin-right: 15px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item {
  width: 80%;
  align-self: center;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item.folder-item ::placeholder {
  color: black;
  opacity: 1;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item.tag-name {
  margin-left: -2px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item.playlist-name {
  margin-left: 22px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item.folder-name {
  margin-left: 14px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item.folder-privacy {
  margin-left: -25px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item.folder-item {
  margin-left: -29px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item .side-modal-input {
  width: 70%;
  border-width: 0;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 10px;
}
.x-modal-side-panel .side-modal-insert.content .tag-creation-item .side-modal-input#folder-name {
  cursor: pointer;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list:not(.no-bottom) {
  border-bottom: 1px solid #464649;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list.tag-creation-folder-list {
  max-height: 92%;
  overflow-y: scroll;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li {
  border-top: 1px solid #464649;
  cursor: pointer;
  font-size: 17px;
  height: 60px;
  line-height: 60px;
  margin: 0 16px;
  position: relative;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:first-child {
  border-top: none;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.active {
  background: #464649;
  margin: 0;
  padding: 0 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.active span.member-info {
  right: 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.active + li {
  margin: 0;
  padding: 0 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.active + li span.member-info {
  right: 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li button.select-stat-button {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  position: absolute;
  top: 9px;
  right: 0;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li button.select-stat-button.not-selected {
  border: solid 1px var(--border-color);
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li span.member-info {
  color: #a3a3aa;
  line-height: 60px;
  position: absolute;
  right: 0;
  top: 0;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:hover {
  background: #464649;
  margin: 0;
  padding: 0 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:hover span.member-info {
  right: 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:hover .select-stat-button {
  right: 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:hover + li {
  margin: 0;
  padding: 0 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:hover + li span.member-info {
  right: 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li:hover + li .select-stat-button {
  right: 16px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.no-matches {
  cursor: default;
  text-align: center;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.no-matches:hover, .x-modal-side-panel .side-modal-insert.content ul.default-list li.no-matches.active {
  background: none !important;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.list-header {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  pointer-events: none;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.list-sub {
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  padding: 5px 0;
  pointer-events: none;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.list-item {
  height: 40px;
  line-height: 37px;
  font-size: 15px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.list-item div.x-icon:not(.check-icon) {
  margin-right: 10px;
  position: relative;
  top: 3px;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.list-item div.x-icon:not(.check-icon) > svg g {
  fill: #0a84ff;
  stroke: #0a84ff;
}
.x-modal-side-panel .side-modal-insert.content ul.default-list li.list-item span.count {
  color: rgba(235, 235, 245, 0.6);
  float: right;
  font-size: 12px;
}
.x-modal-side-panel .side-modal-insert.content span.note {
  color: rgba(235, 235, 245, 0.6);
  display: block;
  font-size: 13px;
  margin: 8px 16px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row {
  margin-bottom: 24px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row label {
  color: rgba(235, 235, 245, 0.6);
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
  vertical-align: top;
  width: 185px;
}
@media only screen and (max-width: 600px) {
  .x-modal-side-panel .side-modal-insert.content div.panel-form-row label {
    width: 115px;
  }
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content {
  display: inline-block;
  width: calc(100% - 190px);
}
@media only screen and (max-width: 600px) {
  .x-modal-side-panel .side-modal-insert.content div.panel-form-row__content {
    width: calc(100% - 120px);
  }
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content input.form-input {
  background: inherit;
  border: 1px solid rgba(235, 235, 245, 0.6);
  border-radius: 6px;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  outline: none;
  padding: 0 8px;
  width: 100%;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content span {
  color: rgba(235, 235, 245, 0.6);
  font-size: 13px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content span.margin-left {
  margin-left: 8px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list {
  border: 1px solid rgba(235, 235, 245, 0.6);
  border-radius: 6px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li {
  font-size: 17px;
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  position: relative;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li:first-child {
  border-radius: 6px 6px 0 0;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li:last-child {
  border-radius: 0 0 6px 6px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li.notifications-row {
  cursor: pointer;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li.notifications-row:hover {
  background: #393939;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li.no-events {
  pointer-events: none;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li.add-addtional-group-members {
  border-top: 1px solid rgba(235, 235, 245, 0.6);
  cursor: pointer;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li.add-addtional-group-members:hover {
  background: #393939;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.circle-filled svg g {
  fill: #2bac76;
  stroke: #2bac76;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.trash,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.add-plus,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.checkmark {
  cursor: pointer;
  position: absolute;
  right: 9px;
  top: 2px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.trash.trash,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.add-plus.trash,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.checkmark.trash {
  right: 6px;
  top: 6px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.trash.trash svg g,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.add-plus.trash svg g,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.checkmark.trash svg g {
  fill: #ff453a;
  stroke: #ff453a;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.trash.add-plus svg g,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.add-plus.add-plus svg g,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.checkmark.add-plus svg g {
  fill: inherit;
  stroke: inherit;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.trash.checkmark,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.add-plus.checkmark,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.checkmark.checkmark {
  position: absolute;
  top: 4px;
}
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.trash.checkmark svg g,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.add-plus.checkmark svg g,
.x-modal-side-panel .side-modal-insert.content div.panel-form-row__content ul.form-list li div.checkmark.checkmark svg g {
  fill: #0a84ff;
  stroke: #0a84ff;
}
.x-modal-side-panel .panel-footer {
  background: #323232;
  border-radius: 0 0 6px 6px;
  height: 60px;
  text-align: center;
  width: 100%;
}
.x-modal-side-panel .panel-footer .btn-confirm {
  background: #0a84ff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  min-height: 40px;
  padding: 10px 33px;
}
.x-modal-side-panel .panel-footer .btn-confirm.spinner-padding {
  padding: 5px 33px;
}
.x-modal-side-panel .panel-footer .btn-confirm div.x-spinner {
  height: 30px;
  width: 30px;
}
.x-modal-side-panel .panel-footer .btn-confirm div.x-spinner::after {
  border-color: #fff transparent #fff transparent;
  height: 20px;
  width: 20px;
}
.x-modal-side-panel .panel-footer .btn-confirm:hover {
  background: #47a2ff;
}
.x-modal-side-panel .panel-footer .btn-confirm:active {
  background: #0861bf;
}
.x-modal-side-panel .panel-footer .btn-confirm.danger {
  color: #ff453a;
  background: #3c3c3f;
}
.x-modal-side-panel .panel-footer .btn-confirm.danger:hover {
  background: #545457;
}
.x-modal-side-panel .panel-footer .btn-confirm.danger:active {
  background: #131316;
}
.x-modal-side-panel .panel-footer .btn-confirm.danger div.x-spinner::after {
  border-color: #ff453a rgba(255, 69, 58, 0.7) #ff453a rgba(255, 69, 58, 0.7);
}
.x-modal-side-panel .panel-footer span.footer-note {
  color: rgba(235, 235, 245, 0.6);
  display: block;
  font-size: 13px;
  margin: 8px 16px;
  text-align: left;
}
.x-modal-side-panel div.panel-form {
  padding: 28px 32px;
}
.x-modal-side-panel div.panel-form span.note {
  display: block;
  margin: 8px 0 0 8px;
}
.x-modal-side-panel.light-theme {
  background: #fff;
  color: black;
}
.x-modal-side-panel.light-theme .panel-header button.btn:not(.option-button) {
  background: #f2f2f7;
  border: none;
  color: #808080;
}
.x-modal-side-panel.light-theme .panel-header button.btn:not(.option-button):hover {
  background: rgba(60, 60, 67, 0.15) !important;
}
.x-modal-side-panel.light-theme .panel-header button.btn:not(.option-button) div.settings-panel svg g {
  fill: #808080;
  stroke: #808080;
}
.x-modal-side-panel.light-theme div.search {
  background: #f2f2f7;
}
.x-modal-side-panel.light-theme div.search div.tag {
  background: #bfdefd;
}
.x-modal-side-panel.light-theme div.search div.tag label {
  color: black;
}
.x-modal-side-panel.light-theme div.search input.search-input {
  color: black;
}
.x-modal-side-panel.light-theme div.breadcrumb-trail {
  color: #808080;
}
.x-modal-side-panel.light-theme div.breadcrumb-trail div.chevron-right > svg g {
  fill: #808080;
  stroke: #808080;
}
.x-modal-side-panel.light-theme div.breadcrumb-trail div.ellipsis svg g {
  stroke: #808080;
}
.x-modal-side-panel.light-theme div.breadcrumb-trail div.ellipsis svg rect {
  fill: #fff;
  stroke: #808080;
}
.x-modal-side-panel.light-theme div.breadcrumb-trail div.ellipsis svg:hover g {
  stroke: #fff;
}
.x-modal-side-panel.light-theme div.breadcrumb-trail div.ellipsis svg:hover rect {
  fill: #808080;
  stroke: #fff;
}
.x-modal-side-panel.light-theme hr {
  border: 1px solid rgba(60, 60, 67, 0.15);
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list {
  border-bottom: 1px solid rgba(60, 60, 67, 0.15);
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list li {
  border-top: 1px solid rgba(60, 60, 67, 0.15);
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list li:first-child {
  border-top: none;
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list li.active {
  background: rgba(60, 60, 67, 0.15);
  border-top: none;
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list li:hover {
  background: rgba(60, 60, 67, 0.15);
  border-top: none;
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list li.no-matches:hover {
  background: none;
}
.x-modal-side-panel.light-theme .side-modal-insert.content ul.default-list li.list-item span.count {
  color: #808080;
}
.x-modal-side-panel.light-theme .side-modal-insert.content span.note {
  color: #808080;
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row label {
  color: #808080;
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row__content input.form-input {
  border: 1px solid #808080;
  color: black;
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row__content span {
  color: black;
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row__content ul.form-list {
  border: 1px solid #808080 !important;
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row__content ul.form-list li.notifications-row:hover {
  background: rgba(60, 60, 67, 0.15);
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row__content ul.form-list li.add-addtional-group-members {
  border-top: 1px solid #808080 !important;
}
.x-modal-side-panel.light-theme .side-modal-insert.content div.panel-form-row__content ul.form-list li.add-addtional-group-members:hover {
  background: rgba(60, 60, 67, 0.15);
}
.x-modal-side-panel.light-theme .panel-footer {
  background: #fff;
}
.x-modal-side-panel.light-theme .panel-footer .btn-confirm:hover {
  background: #47a2ff;
}
.x-modal-side-panel.light-theme .panel-footer .btn-confirm:active {
  background: #0861bf;
}
.x-modal-side-panel.light-theme .panel-footer .btn-confirm.danger {
  background: #f2f2f7;
}
.x-modal-side-panel.light-theme .panel-footer .btn-confirm.danger:hover {
  background: rgba(60, 60, 67, 0.15);
}
.x-modal-side-panel.light-theme .panel-footer .btn-confirm.danger:active {
  background: #808080;
}
.x-modal-side-panel.light-theme .panel-footer span.footer-note {
  color: #808080;
}
.x-modal-side-panel #film-files,
.x-modal-side-panel #film-files-label {
  display: none;
}
.x-modal-side-panel #nudging-modal {
  position: fixed;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  width: 700px;
  max-width: 100vw;
  z-index: 15;
  max-height: calc(var(--better-full-vh) - 60px);
  background: var(--background-third);
  border-radius: 10px;
  overflow: auto;
}
.x-modal-side-panel #nudging-modal .x-spinner {
  position: relative;
  top: -2px;
  left: -1px;
  margin: 1px 9px;
}
.x-modal-side-panel #nudging-modal .dragable-list {
  min-width: 150px;
  max-width: 150px;
  overflow-y: auto;
  border-right: 1px solid var(--border-color);
}
.x-modal-side-panel #nudging-modal .dragable-list .default-cursor {
  cursor: default;
}
.x-modal-side-panel #nudging-modal .dragable-list .stat {
  word-break: break-all;
  white-space: normal;
}
.x-modal-side-panel #nudging-modal .dragable-list .stat.active {
  background: #3e3e3e;
}
.x-modal-side-panel #nudging-modal .dragable-list .border-light-bottom {
  border-bottom: 1px solid white;
}
.x-modal-side-panel #nudging-modal .dragable-list .border-light-top {
  border-top: 1px solid white;
}
.x-modal-side-panel #nudging-modal .right-side-container {
  max-width: calc(100vw - 150px);
}
.x-modal-side-panel #nudging-modal .top-menu {
  background-color: inherit;
}
.x-modal-side-panel #nudging-modal video {
  max-width: 100%;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container {
  height: 200px;
  border-bottom-right-radius: 10px;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container > * {
  width: 50%;
  max-width: 50%;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container > *.is-alone {
  width: 100%;
  max-width: 100%;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container button:not(.stat) {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .chevron-button {
  aspect-ratio: 1;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list {
  overflow-y: auto;
  border-left: 1px solid var(--border-color);
  max-height: 300px;
  border-bottom-right-radius: 10px;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list .stat {
  white-space: normal;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list .stat:hover .move-stat:hover {
  background-color: #e0e0e0;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list .stat .move-stat {
  min-width: 30px;
  aspect-ratio: 1;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list .stat.scoring {
  border: 1px solid #7c7c7c;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list .stat.active {
  background: #3e3e3e;
}
.x-modal-side-panel #nudging-modal .nudge-bottom-container .stat-list .stat.active:hover .move-stat:hover {
  background-color: rgb(140, 140, 140);
}
.x-modal-side-panel #dragndrop-area {
  min-height: 152px;
  box-shadow: inset 0 0 3px 1px var(--border-color);
}
.x-modal-side-panel #dragndrop-area .x-list-select-container {
  width: 100%;
}
.x-modal-side-panel #dragndrop-area.dragndrop-hover {
  box-shadow: inset 0 0 3px 1px #007aff;
}
.x-modal-side-panel .thumbnail-button {
  width: 100%;
  height: 100%;
}
.x-modal-side-panel .thumbnail-button img {
  height: 100%;
  width: 100%;
  display: block;
}
.x-modal-side-panel .thumbnail-active {
  border: 3px solid #0079ff !important;
  margin-top: -2px;
}
.x-modal-side-panel .camera-angle-button {
  text-align: left;
}
.x-modal-side-panel .list-name {
  max-width: 375px;
}
.x-modal-side-panel .retry-button {
  height: 80%;
}

.side-modal-wide-buttons > * {
  width: 95%;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 16px;
  height: 33px;
}
.side-modal-wide-buttons > * .inner {
  border-radius: 16px;
}

.options-popover {
  border-radius: 6px;
  min-width: 150px;
}
.options-popover .ember-popover-inner div .options-group {
  border-radius: 6px;
  color: black;
}
.options-popover .ember-popover-inner div .options-group > *:hover {
  background-color: #e6e6e7;
}
.options-popover .ember-popover-inner div .options-group > *:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}
.options-popover .ember-popover-inner div .options-group > *:not(:last-child).border-bold {
  border-bottom: 2px solid #e0e0e0;
}
.options-popover .x-admin-radius {
  border-radius: 16px;
}
.options-popover #set-as-main-button input,
.options-popover #film-part-nudging-toggle input {
  height: 13px;
}

.x-list-select-container {
  background-color: var(--background-primary);
  border: 1px solid var(--border-color);
  min-height: 150px;
  max-height: 400px;
  overflow-y: auto;
}
.x-list-select-container.full-height {
  max-height: 100%;
}
.x-list-select-container .x-list-select {
  box-shadow: inset 0 1px 3px 0 var(--box-shadow-color);
  background-color: var(--background-secondary);
  border-bottom: 1px solid var(--border-color);
}
.x-list-select-container .x-list-select-item-active-row {
  background-color: var(--active-item-area-color) !important;
}
.x-list-select-container .x-list-select-item-active-row .x-list-select-item-border {
  border-bottom: 1px solid var(--active-item-area-color) !important;
}
.x-list-select-container .x-list-select-item-active-row div {
  color: white;
}
.x-list-select-container .x-list-select-item-container:not(:last-child) .x-list-select-item-border {
  border-bottom: 1px solid var(--border-color);
}
.x-list-select-container .x-list-select-item {
  min-height: 40px;
}
.x-list-select-container .list-select-max-content-width {
  max-width: 430px;
}

.pdf-container {
  overflow: auto;
  max-width: 100%;
  max-height: 100%;
}

.pdf-controls {
  position: relative;
  height: 30px;
  width: 100%;
}

.next-page {
  rotate: 180deg;
}

/* stylelint-disable selector-class-pattern */
.file-icon,
.image-icon {
  display: block;
  position: relative;
  height: 28px;
}

.image-icon {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 28px;
}

.file-icon {
  width: 20px;
  margin-left: 7px;
  border-width: 1px;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(45deg, #fff calc(100% - 5px), rgba(255, 255, 255, 0) calc(100% - 5px), rgba(255, 255, 255, 0) 100%);
  border-image: linear-gradient(45deg, #8c8c8c calc(100% - 6.5px), rgba(255, 255, 255, 0) calc(100% - 6.5px), rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(calc(100% - 9.5px) 0, 100% 9.5px, 100% 100%, -8px 100%, -8px 0);
  border-style: solid;
  border-image-slice: 1;
}
.file-icon::before {
  content: " ";
  position: absolute;
  top: -1px;
  right: -1px;
  height: 10px;
  width: 10px;
  box-shadow: -1px 1px 0 0.5px rgba(140, 140, 140, 0.6);
  border-bottom-left-radius: 1px;
  background: linear-gradient(45deg, #fff calc(50% - 0.5px), #8c8c8c calc(50% - 0.5px), #8c8c8c calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 100%);
}
.file-icon::after {
  content: " ";
  position: absolute;
  height: 10px;
  width: 23px;
  bottom: 4px;
  left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 8px;
  color: #fff;
  font-weight: 600;
  background: #8c8c8c;
  letter-spacing: -1px;
  padding-top: 1px;
}
.file-icon[data-file]::after {
  content: attr(data-file);
}
.file-icon[data-file*=zip]::after, .file-icon[data-file*=tar]::after, .file-icon[data-file*=dmg]::after, .file-icon[data-file*=jar]::after, .file-icon[data-file*=rar]::after {
  background: #a19382;
}
.file-icon[data-file*=dwg]::after, .file-icon[data-file*=obj]::after, .file-icon[data-file*=dae]::after, .file-icon[data-file*=skp]::after, .file-icon[data-file*=fbx]::after, .file-icon[data-file*="3ds"]::after {
  background: #5e43c6;
}
.file-icon[data-file*=doc]::after, .file-icon[data-file*=rtf]::after, .file-icon[data-file*=odt]::after, .file-icon[data-file*=tex]::after, .file-icon[data-file*=txt]::after {
  background: #1482c8;
}
.file-icon[data-file*=svg]::after, .file-icon[data-file*=ai]::after {
  background: #ec8f08;
}
.file-icon[data-file*=pdf]::after {
  background: #d83433;
}
.file-icon[data-file*=xml]::after, .file-icon[data-file*=csv]::after, .file-icon[data-file*=xls]::after {
  background: #47b188;
}
.file-icon[data-file*=jpg]::after, .file-icon[data-file*=jpeg]::after, .file-icon[data-file*=gif]::after, .file-icon[data-file*=tif]::after, .file-icon[data-file*=psd]::after, .file-icon[data-file*=raw]::after, .file-icon[data-file*=png]::after {
  background: #1c387a;
}
.file-icon[data-file*=webm]::after, .file-icon[data-file*=mkv]::after, .file-icon[data-file*=avi]::after, .file-icon[data-file*=mov]::after, .file-icon[data-file*=m4v]::after, .file-icon[data-file*=mpeg]::after, .file-icon[data-file*=mp4]::after {
  background: #ff4290;
}
.file-icon[data-file*=mp3]::after, .file-icon[data-file*=m4a]::after, .file-icon[data-file*=ogg]::after, .file-icon[data-file*=aac]::after, .file-icon[data-file*=flac]::after {
  background: #0c6845;
}

.image-icon--medium,
.file-icon--medium {
  height: 70px;
}

.image-icon--medium {
  width: 70px;
}

.file-icon--medium {
  width: 50px;
  border-width: 3px;
  margin-left: 17px;
  background: linear-gradient(45deg, #fff calc(100% - 15px), rgba(255, 255, 255, 0) calc(100% - 15px), rgba(255, 255, 255, 0) 100%);
  border-image: linear-gradient(45deg, #8c8c8c calc(100% - 18px), rgba(255, 255, 255, 0) calc(100% - 18px), rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(calc(100% - 26px) 0, 100% 26px, 100% 100%, -20px 100%, -20px 0);
  border-style: solid;
  border-image-slice: 1;
}
.file-icon--medium::before {
  top: -2px;
  right: -2px;
  height: 25px;
  width: 25px;
  box-shadow: -1.5px 1.5px 0 1.5px #8c8c8c;
  border-bottom-left-radius: 5px;
  background: linear-gradient(45deg, #fff calc(50% - 2px), #8c8c8c calc(50% - 2px), #8c8c8c calc(50% + 2px), transparent calc(50% + 2px), transparent 100%);
}
.file-icon--medium::after {
  height: 25px;
  width: 57.5px;
  font-size: 20px;
  bottom: 8px;
  left: -20px;
}

.image-icon--large,
.file-icon--large {
  height: 140px;
  width: 100px;
}

.image-icon--large {
  width: 140px;
}

.image-icon--responsive,
.file-icon--responsive {
  width: 100%;
  padding-top: 100%;
}

.file-icon--responsive {
  width: calc(100% - 36px - 36px);
}

.file-icon--large,
.file-icon--responsive {
  border-width: 4px;
  margin-left: 36px;
  background: linear-gradient(45deg, #fff calc(100% - 35px), rgba(255, 255, 255, 0) calc(100% - 35px), rgba(255, 255, 255, 0) 100%);
  border-image: linear-gradient(45deg, #8c8c8c calc(100% - 38px), rgba(255, 255, 255, 0) calc(100% - 38px), rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(calc(100% - 48px) 0, 100% 48px, 100% 100%, -40px 100%, -40px 0);
  border-style: solid;
  border-image-slice: 1;
}
.file-icon--large::before,
.file-icon--responsive::before {
  top: -4px;
  right: -4px;
  height: 50px;
  width: 50px;
  box-shadow: -2px 2px 0 2px #8c8c8c;
  border-bottom-left-radius: 5px;
  background: linear-gradient(45deg, #fff calc(50% - 2px), #8c8c8c calc(50% - 2px), #8c8c8c calc(50% + 2px), transparent calc(50% + 2px), transparent 100%);
}
.file-icon--large::after,
.file-icon--responsive::after {
  height: 50px;
  width: 115px;
  font-size: 40px;
  bottom: 20px;
  left: -40px;
}

#twilio-presenter-controls {
  width: 153px;
  height: 153px;
  background-color: #151515;
  opacity: 0.95;
  border-radius: 16px;
  left: calc(100% - 168px);
  top: 58px;
  z-index: 4;
  position: fixed;
  visibility: visible;
}
#twilio-presenter-controls.in-participants-list {
  position: initial;
  opacity: initial;
  left: initial;
  top: initial;
}
#twilio-presenter-controls button {
  width: 62px;
  height: 62px;
  background-color: #0084ff;
}
#twilio-presenter-controls button.inactive {
  background-color: #ededed;
}
#twilio-presenter-controls #twilio-end-session-button {
  background-color: #ff453a;
}

#small-presenter-controls-container {
  background-color: #6cd501;
  border-radius: 26px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 42px;
  z-index: 1;
  padding: 5px;
}
#small-presenter-controls-container button {
  padding: 5px;
  color: white;
}
#small-presenter-controls-container button:hover {
  background-color: #70e000;
}
#small-presenter-controls-container button .x-icon {
  vertical-align: bottom;
}
#small-presenter-controls-container .popover-tooltip {
  border: unset;
}
#small-presenter-controls-container .popover {
  background-color: #6cd501;
  width: 145px;
  border: unset;
}
#small-presenter-controls-container .popover button {
  display: flex;
  text-align: start;
}
#small-presenter-controls-container .popover button .icon-container {
  width: 24px;
}

#presenter-participants-view {
  z-index: 1;
  width: 75vw;
  height: 75vh;
}
@media screen and (max-width: 767px) {
  #presenter-participants-view {
    width: 90vw;
    height: 90vh;
  }
}
#presenter-participants-view #twilio-participants-container {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}

#twilio-participants-container {
  width: 100%;
  height: 100%;
  min-height: 0;
  background-color: var(--background-secondary);
}
#twilio-participants-container #twilio-participants {
  overflow-y: auto;
  gap: 15px;
}
#twilio-participants-container .twilio-participant-popover {
  border-radius: 10px;
  border: unset;
  width: 200px;
  z-index: 4;
}
#twilio-participants-container .twilio-participant-popover .line-break {
  height: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
}
#twilio-participants-container .twilio-participant-popover button {
  width: 100%;
}
#twilio-participants-container .twilio-participant-popover button:hover:not(:disabled) {
  color: white !important;
}
#twilio-participants-container .twilio-participant-popover button:hover:not(:disabled) g {
  fill: white;
  stroke: white;
}
#twilio-participants-container .twilio-participant-popover button:first-child {
  border-radius: 10px 10px 0 0;
}
#twilio-participants-container .twilio-participant-popover button:last-child {
  border-radius: 0 0 10px 10px;
}
#twilio-participants-container .twilio-room-participant-tile {
  width: 153px;
  height: 153px;
  background-color: var(--background-third);
  border-radius: 16px;
  position: relative;
}
#twilio-participants-container .twilio-room-participant-tile .twilio-room-participant-tile-video-container {
  height: 75%;
}
#twilio-participants-container .twilio-room-participant-tile .twilio-room-participant-tile-video-container video {
  width: 100%;
  height: 100%;
  border-radius: 16px 16px 0 0;
}
#twilio-participants-container .twilio-room-participant-tile .twilio-room-participant-tile-video-container video.reversed {
  transform: scaleX(-1);
}
#twilio-participants-container .twilio-room-participant-tile .twilio-room-participant-tile-video-container img {
  border-radius: 16px;
}
#twilio-participants-container .twilio-room-participant-tile .twilio-room-participant-tile-footer {
  height: 25%;
  background-color: var(--background-primary);
  border-radius: 0 0 16px 16px;
}
#twilio-participants-container #twilio-mute-all-btn {
  background-color: #0084ff;
}
#twilio-participants-container #twilio-mute-all-btn.disabled {
  background-color: #3f3f3f;
  border: 0;
  color: #757575;
  background-image: unset;
}

#drawing-tool {
  opacity: 0.5;
}
#drawing-tool.enabled {
  opacity: 1;
}
#drawing-tool button {
  width: 36px;
  height: 36px;
}
@media only screen and (max-width: 860px) {
  #drawing-tool button {
    width: 30px;
    height: 30px;
  }
}
#drawing-tool button .selected-color-indicator {
  height: 18px;
  width: 18px;
}
#drawing-tool button.redo-button {
  transform: scale(-0.95, 0.95);
}
#drawing-tool #show-drawing-options-button {
  width: 17px;
  height: 11px;
  background-color: white;
  position: relative;
  left: -17px;
  bottom: -23px;
  border-radius: 2px;
  margin-right: -17px;
}
#drawing-tool #show-drawing-options-button span {
  height: 28px;
}
#drawing-tool .red:not(.x-icon) {
  background-color: rgb(255, 69, 58);
}
#drawing-tool .red svg {
  fill: rgb(255, 69, 58);
  stroke: rgb(255, 69, 58);
}
#drawing-tool .green:not(.x-icon) {
  background-color: rgb(48, 209, 88);
}
#drawing-tool .green svg {
  fill: rgb(48, 209, 88);
  stroke: rgb(48, 209, 88);
}
#drawing-tool .blue:not(.x-icon) {
  background-color: rgb(10, 132, 255);
}
#drawing-tool .blue svg {
  fill: rgb(10, 132, 255);
  stroke: rgb(10, 132, 255);
}
#drawing-tool .black:not(.x-icon) {
  background-color: rgb(0, 0, 0);
}
#drawing-tool .black svg {
  fill: rgb(0, 0, 0);
  stroke: rgb(0, 0, 0);
}
#drawing-tool .yellow:not(.x-icon) {
  background-color: rgb(255, 214, 10);
}
#drawing-tool .yellow svg {
  fill: rgb(255, 214, 10);
  stroke: rgb(255, 214, 10);
}
#drawing-tool .teal:not(.x-icon) {
  background-color: rgb(100, 210, 255);
}
#drawing-tool .teal svg {
  fill: rgb(100, 210, 255);
  stroke: rgb(100, 210, 255);
}
#drawing-tool .clear:not(.x-icon) {
  background-color: rgba(255, 255, 255, 0.5);
}
#drawing-tool .clear svg {
  fill: rgba(255, 255, 255, 0.5);
  stroke: rgba(255, 255, 255, 0.5);
}
#drawing-tool .stroke-width-1 svg {
  stroke-width: 1.5;
}
#drawing-tool .stroke-width-2 svg {
  stroke-width: 2.5;
}
#drawing-tool .stroke-width-3 svg {
  stroke-width: 3.5;
}
#drawing-tool .stroke-width-4 svg {
  stroke-width: 5;
}
#drawing-tool .stroke-width-5 svg {
  stroke-width: 6.5;
}
#drawing-tool .stroke-width-6 svg {
  stroke-width: 8;
}
#drawing-tool .stroke-width-7 svg {
  stroke-width: 9.5;
}
#drawing-tool .field-popover {
  width: 100px;
  border: unset;
  z-index: 6;
}
#drawing-tool .field-popover :first-child {
  border-radius: 6px 6px 0 0;
}
#drawing-tool .field-popover :not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
#drawing-tool .field-popover :last-child {
  border-radius: 0 0 6px 6px;
}
#drawing-tool .field-popover button {
  width: 100%;
  height: unset;
}
#drawing-tool .drawing-tool-popover {
  background: #353338;
  border-radius: 13px;
  border: unset;
  z-index: 5;
}
#drawing-tool .drawing-tool-popover #drawing-options {
  height: 60px;
}
#drawing-tool .drawing-tool-popover #drawing-options #toggle-laser-button,
#drawing-tool .drawing-tool-popover #drawing-options .twilio-eraser-button,
#drawing-tool .drawing-tool-popover #drawing-options .twilio-line-button,
#drawing-tool .drawing-tool-popover #drawing-options .twilio-save-button,
#drawing-tool .drawing-tool-popover #drawing-options .field-toggle,
#drawing-tool .drawing-tool-popover #drawing-options .redo-button,
#drawing-tool .drawing-tool-popover #drawing-options .undo-button,
#drawing-tool .drawing-tool-popover #drawing-options .clear-button {
  height: 30px;
  width: 30px;
}
#drawing-tool .drawing-tool-popover #drawing-options #toggle-laser-button .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .twilio-eraser-button .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .twilio-line-button .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .twilio-save-button .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .field-toggle .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .redo-button .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .undo-button .selected-marker-laser,
#drawing-tool .drawing-tool-popover #drawing-options .clear-button .selected-marker-laser {
  position: absolute;
  border: white solid 2px;
  width: 20px;
  height: 20px;
}
#drawing-tool .drawing-tool-popover #drawing-options .twilio-line-button.selected {
  border: 1px solid white;
}
#drawing-tool .drawing-tool-popover #drawing-options .colors-container {
  width: 75px;
  gap: 5px;
}
#drawing-tool .drawing-tool-popover #drawing-options .colors-container .twilio-color-picker-button {
  width: 20px;
  height: 20px;
}
#drawing-tool .drawing-tool-popover #drawing-options .colors-container .twilio-color-picker-button .selected-marker-color {
  border: white solid 2px;
  width: 14px;
  height: 14px;
}

.tag-board-container.active-stat {
  max-height: calc(100% - 57px - 130px);
  overflow: auto;
}
.tag-board-container.hidden {
  display: none;
}
.tag-board-container .tag-board-section-header {
  width: 315px;
}
.tag-board-container .section-title-input {
  outline: none;
  border: none;
  background: none;
  color: inherit;
}
.tag-board-container .tag-board-section-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  place-items: center;
  padding: 10px;
  width: 315px;
}

.tag-board-button {
  width: 150px;
  height: 60px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.tag-board-button.disabled {
  opacity: 0.5;
}
.tag-board-button.active {
  border-color: white;
}
.tag-board-button.exclusive {
  width: 320px;
  grid-column: span 2;
}
.tag-board-button.empty {
  border: 2px dashed #0a84ff;
  width: 148px;
  height: 58px;
  color: #0a84ff;
}
.tag-board-button.drop-left {
  border-left: 3px solid rgba(255, 255, 255, 0.5);
}
.tag-board-button.drop-right {
  border-right: 3px solid rgba(255, 255, 255, 0.5);
}
.tag-board-button div.red {
  background-color: #ff3b30;
  color: white !important;
}
.tag-board-button div.orange {
  background-color: #ff9500;
  color: white !important;
}
.tag-board-button div.yellow {
  background-color: #fc0;
  color: white !important;
}
.tag-board-button div.green {
  background-color: #4cd964;
  color: white !important;
}
.tag-board-button div.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.tag-board-button div.blue {
  background-color: #007aff;
  color: white !important;
}
.tag-board-button div.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.tag-board-button div.purple {
  background-color: #5856d6;
  color: white !important;
}
.tag-board-button div.mutual-active {
  border: 1px solid white;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.tag-board-button .count {
  font-size: 12px;
  width: 15px;
  height: 15px;
  aspect-ratio: 1/1;
}
.tag-board-button .count.hide {
  opacity: 0;
}
.tag-board-button .border-left {
  border-color: white;
}

.info-button {
  width: 17px;
  height: 17px;
  border: 2px solid #757575;
}

.button-color.red {
  background-color: #ff3b30;
  color: white !important;
}
.button-color.orange {
  background-color: #ff9500;
  color: white !important;
}
.button-color.yellow {
  background-color: #fc0;
  color: white !important;
}
.button-color.green {
  background-color: #4cd964;
  color: white !important;
}
.button-color.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.button-color.blue {
  background-color: #007aff;
  color: white !important;
}
.button-color.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.button-color.purple {
  background-color: #5856d6;
  color: white !important;
}

.overlay-button {
  background-color: rgba(49, 49, 49, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  z-index: 3;
}
.overlay-button.current-stat, .overlay-button.next-stat {
  padding-left: 10px;
  padding-right: 10px;
  justify-content: space-between;
}

.scrubbing-time-tooltip {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  width: unset;
  height: unset;
}

.toggle-overlay-menu {
  position: absolute;
  top: calc(50% - 15px);
  right: 30px;
}

.upper-left-buttons {
  position: absolute;
  top: 20px;
  left: 30px;
}

.stat-name {
  overflow: hidden;
  width: 85%;
}

.current-stat {
  position: absolute;
  top: 20px;
  left: 71px;
  max-width: 180px;
  width: 180px;
}

.next-stat {
  position: absolute;
  top: 20px;
  right: 71px;
  max-width: 180px;
  width: 180px;
}

.tagging-buttons {
  position: absolute;
  bottom: 20px;
  left: 30px;
}
.tagging-buttons #drop-pin-button {
  padding-top: 4px;
}
.tagging-buttons .recording-active {
  background-color: red;
}

.skip-slow-buttons {
  position: absolute;
  bottom: 20px;
  right: 30px;
}

.autoplay-settings g {
  stroke-width: 0.5;
}
.autoplay-settings.autoplay-on {
  background-color: white !important;
}

.playback-speed-icon svg {
  overflow: visible;
}

.nav-category {
  opacity: 0.8;
}

.thumb-placeholder {
  background: var(--background-primary);
}

.item-thumbnail,
.thumb-placeholder {
  width: 35px;
  height: 25px;
}
.item-thumbnail.red,
.thumb-placeholder.red {
  background-color: #ff3b30;
  color: white !important;
}
.item-thumbnail.orange,
.thumb-placeholder.orange {
  background-color: #ff9500;
  color: white !important;
}
.item-thumbnail.yellow,
.thumb-placeholder.yellow {
  background-color: #fc0;
  color: white !important;
}
.item-thumbnail.green,
.thumb-placeholder.green {
  background-color: #4cd964;
  color: white !important;
}
.item-thumbnail.teal,
.thumb-placeholder.teal {
  background-color: #5ac8fa;
  color: white !important;
}
.item-thumbnail.blue,
.thumb-placeholder.blue {
  background-color: #007aff;
  color: white !important;
}
.item-thumbnail.indigo,
.thumb-placeholder.indigo {
  background-color: #5e5ce6;
  color: white !important;
}
.item-thumbnail.purple,
.thumb-placeholder.purple {
  background-color: #5856d6;
  color: white !important;
}

.picker-item-active {
  background: rgb(44, 44, 72);
  color: white;
}

.drawing-buttons {
  background-color: transparent;
  position: absolute;
  bottom: 20px;
  left: 5px;
}
.drawing-buttons.open {
  background-color: rgba(49, 49, 49, 0.7);
  border-radius: 6px;
  padding: 4px;
}
.drawing-buttons:not(.big-vid) {
  top: 20px;
  right: 30px;
  left: unset;
  background-color: rgba(49, 49, 49, 0.95);
  width: 36px;
  height: 36px;
}
.drawing-buttons:not(.big-vid) .selected-color-indicator {
  width: 18px !important;
  height: 18px !important;
}
.drawing-buttons:not(.big-vid).open {
  height: fit-content;
}
.drawing-buttons .selected-color-indicator {
  width: 24px;
  height: 24px;
}
.drawing-buttons .selected-color-indicator.blue {
  background-color: rgb(10, 132, 255);
}
.drawing-buttons .selected-color-indicator.yellow {
  background-color: rgb(255, 214, 10);
}
.drawing-buttons .selected-color-indicator.teal {
  background-color: rgb(100, 210, 255);
}
.drawing-buttons .small-color-picker {
  padding: 3px !important;
}
.drawing-buttons .small-color-picker div {
  display: flex;
  gap: 5px;
}
.drawing-buttons button {
  opacity: 0.65;
  width: 24px;
  height: 24px;
}
.drawing-buttons button#laser-drag-btn {
  width: 32px;
  height: 32px;
}
.drawing-buttons button .diagonal-arrow {
  margin-top: 3px;
  rotate: 45deg;
}
.drawing-buttons button .diagonal-arrow svg {
  stroke-width: 2;
}
.drawing-buttons button .diagonal-arrow.blue svg {
  stroke: rgb(10, 132, 255);
}
.drawing-buttons button .diagonal-arrow.yellow svg {
  stroke: rgb(255, 214, 10);
}
.drawing-buttons button .diagonal-arrow.teal svg {
  stroke: rgb(100, 210, 255);
}
.drawing-buttons button .circle {
  border: 2px solid;
  border-radius: 50%;
  height: 18px;
  width: 18px;
}
.drawing-buttons button .circle.blue {
  border-color: rgb(10, 132, 255);
}
.drawing-buttons button .circle.yellow {
  border-color: rgb(255, 214, 10);
}
.drawing-buttons button .circle.teal {
  border-color: rgb(100, 210, 255);
}
.drawing-buttons button .rect {
  border: 2px solid;
  border-radius: 2px;
  height: 18px;
  width: 18px;
}
.drawing-buttons button .rect.blue {
  border-color: rgb(10, 132, 255);
}
.drawing-buttons button .rect.yellow {
  border-color: rgb(255, 214, 10);
}
.drawing-buttons button .rect.teal {
  border-color: rgb(100, 210, 255);
}
.drawing-buttons button.saturated {
  opacity: 1;
}

#cameras-page {
  width: 100%;
  max-width: 1000px;
}

#cameras-list {
  width: 100%;
  max-width: 1000px;
  background-color: var(--background-secondary);
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
}
#cameras-list .camera-row {
  height: 60px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
}
#cameras-list .camera-row-container:last-child .camera-row {
  border-color: transparent;
}
#cameras-list .camera-status-icon {
  width: 60px;
  min-width: 60px;
  height: 60px;
}

@media only screen and (max-width: 767px) {
  #details-page form {
    width: unset;
  }
}
@media only screen and (max-width: 767px) {
  #film-download-page #film-download-filter-query {
    margin-bottom: 5px;
  }
}
#film-download-page .federation-site-table td > button {
  background-image: linear-gradient(-180deg, #4d90fe 0%, #4686ee 100%);
  border: 1px solid #3079ed;
  border-radius: 2px;
  color: white;
  width: 75%;
  height: 70%;
  max-width: 100px;
  font-weight: normal;
}

#film-session-container {
  height: calc(100% - 200px);
  background-color: black;
}
#film-session-container.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
#film-session-container .font-light-grey {
  color: #757575;
}
#film-session-container #ir-close {
  position: absolute;
  right: 20px;
  top: 35px;
  z-index: 20;
  cursor: pointer;
}
#film-session-container #rfs-controls {
  position: absolute;
  bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  background-color: var(--background-primary);
}
#film-session-container #rfs-controls .rfs-time {
  line-height: 32px;
}
#film-session-container #left-container {
  height: 100%;
  width: 100%;
  position: relative;
}
#film-session-container #left-container #film-session-drawing-canvas {
  position: absolute;
  visibility: initial;
  z-index: 2;
}
#film-session-container #left-container #button-container {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
}
#film-session-container #left-container #button-container button {
  color: #6cd501;
}
#film-session-container #left-container #button-container #left-button {
  border-radius: 10px;
  background-color: var(--background-primary);
  box-shadow: 0 1px 2px 0 var(--box-shadow-color);
}
#film-session-container #left-container #button-container #left-button span {
  border-bottom: 0;
}
#film-session-container #left-container #button-container #right-buttons {
  background-color: var(--background-primary);
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 var(--box-shadow-color);
}
#film-session-container #left-container #button-container #right-buttons button {
  display: inline-flex;
  border-radius: 5px;
  padding: 2px;
}
#film-session-container #left-container #whiteboard {
  position: absolute;
  background-color: white;
  width: 100%;
}
#film-session-container #left-container #film-session-video-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#film-session-container #left-container #film-session-video-container.hidden {
  visibility: hidden;
  z-index: 0;
  position: absolute;
}
#film-session-container #left-container #film-session-video-container #film-session-video {
  height: 100%;
  width: 100%;
}
#film-session-container #left-container #playlist-card {
  white-space: pre-line;
}
#film-session-container #left-container #playlist-card.hidden {
  visibility: hidden;
  z-index: 0;
  position: absolute;
}
#film-session-container #left-container .clip-info {
  position: absolute;
  bottom: 20px;
  background-color: var(--background-primary);
  opacity: 0.8;
  border-radius: 20px;
}
#film-session-container #left-container .clip-info#clip-name {
  right: 20px;
  max-width: calc(50% - 20px);
}
#film-session-container #left-container .clip-info#clip-name.mobile {
  max-width: calc(100% - 155px);
  right: unset;
  bottom: unset;
  top: 5px;
  left: 5px;
}
#film-session-container #left-container .clip-info#clip-note {
  left: 20px;
  padding: 15px 15px 10px 10px;
  max-width: calc(50% - 20px);
  max-height: 86px;
  overflow-y: auto;
}
#film-session-container #left-container .clip-info#clip-note.mobile {
  max-width: 100%;
  right: unset;
  bottom: 5px;
  top: unset;
  left: 5px;
}
#film-session-container #left-container .clip-info#clip-note button {
  position: absolute;
  top: 0;
  right: 0;
}
#film-session-container #left-container .clip-info#clip-note button:hover {
  background-color: initial;
}
#film-session-container #film-session-users-list {
  width: 100%;
  height: 200px;
}
#film-session-container #film-session-users-list.collapse {
  visibility: collapse;
  width: 0;
  min-width: 0;
  min-height: 0 !important;
  height: 0 !important;
}
#film-session-container #film-session-users-list.full-screen {
  height: 100%;
}

#simple-stream-video {
  width: 100vw;
  height: var(--better-full-vh);
  object-position: center;
  background: black;
}

#camera-select,
.angle-list {
  position: absolute;
  left: 15px;
  top: 15px;
}

.angle-list {
  background: rgba(39, 39, 39, 0.9);
  color: white;
  border-radius: 6px;
  overflow: hidden;
}
.angle-list :not(:last-child) {
  border-bottom: white 1px;
}
.angle-list button {
  width: 100%;
}

/* stylelint-disable-next-line */
.x-schedule-max-width {
  max-width: 1224px;
}

.x-schedule-box-shadow {
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  width: calc(100vw - 80px);
}
@media only screen and (max-width: 767px) {
  .x-schedule-box-shadow {
    width: 100vw;
  }
}

.watch-game-and-box-score-links {
  min-width: 200px;
}

#x-schedule th,
#x-schedule td,
#x-schedule tr {
  border: 1px solid #e4e4e4;
}
#x-schedule table {
  width: 100%;
  border-collapse: collapse;
  border-bottom-style: hidden;
  border-left-style: hidden;
  border-right-style: hidden;
}
#x-schedule td {
  height: 50px;
}
#x-schedule .no-border-bottom {
  border-bottom: 1px solid transparent;
}
#x-schedule .no-border-right {
  border-right: 1px solid transparent;
}
#x-schedule .team-name {
  color: #091f3f;
}
#x-schedule .game-day {
  font-weight: 700;
}
#x-schedule .btn-table {
  border-radius: 2px;
  border: 0;
  color: white;
}
#x-schedule .background-dark {
  background: #f1f1f1;
}
#x-schedule .background-light {
  background: white;
}
#x-schedule .game-hour,
#x-schedule .game-location {
  width: 120px;
  text-align: center;
}

#x-schedule-mobile .border-bottom {
  border-bottom: 1px solid #a3a3a3;
}
#x-schedule-mobile .schedule-date-row {
  height: 45px;
  background: white;
}
#x-schedule-mobile .blue-color {
  color: #115ec6;
}
#x-schedule-mobile .schedule-row {
  height: 55px;
  box-sizing: border-box;
}
#x-schedule-mobile .btn-table {
  background: #115ec6;
  border-radius: 2px;
  border: 0;
  color: white;
}
#x-schedule-mobile .background-dark {
  background: #f1f1f1;
}
#x-schedule-mobile .background-light {
  background: white;
}
#x-schedule-mobile .game-hour-mobile {
  width: 90px;
}

#nav-holder {
  margin-left: 40px;
}

#page-nav {
  background: white;
}
@media only screen and (max-width: 767px) {
  #page-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    transition: transform 350ms;
    will-change: transform;
    z-index: 3;
    transform: translateY(calc(100% - 50px));
  }
  #page-nav.open {
    transform: translateY(0);
  }
  #page-nav #page-nav-mobile-top {
    height: 50px;
  }
  #page-nav #page-nav-content {
    display: flex;
    flex-direction: column;
    font-size: 16px;
  }
  #page-nav button,
  #page-nav .federation-select,
  #page-nav a {
    width: 80vw;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    color: inherit;
  }
  #page-nav .federation-select select {
    width: 100%;
  }
  #page-nav select option {
    color: inherit;
  }
  #page-nav a {
    display: flex;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  #page-nav {
    width: 100%;
    height: 60px;
    position: sticky;
    left: 0;
  }
  #page-nav #page-nav-content {
    height: 60px;
    display: flex;
  }
}

.federation-select select {
  appearance: none;
  padding: 3px;
  background: transparent;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  height: 100%;
  padding-right: 15px;
}
@media only screen and (min-width: 767px) {
  .federation-select select {
    max-width: 180px;
  }
}

.federation-select {
  position: relative;
  display: inline;
}

#federation-box-score {
  width: 1224px;
  max-width: 100vw;
  background: white;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
#federation-box-score header {
  border-bottom: 1px solid #e5e5e5;
  position: relative;
}
#federation-box-score .box-score-mobile-back {
  position: absolute;
  top: 10px;
  left: 10px;
}
#federation-box-score .box-score-button-primary {
  max-width: 185px;
  border-radius: 2px;
  border: 0;
  color: white;
  font-size: 14px;
}
#federation-box-score .box-score-button-secondary {
  max-width: 185px;
  border-radius: 10px;
  border: 2px solid;
  background-color: transparent;
  font-size: 14px;
}
#federation-box-score.broadcast {
  justify-content: center;
  align-items: center;
  overflow: auto;
}
#federation-box-score.broadcast section {
  width: 90%;
  max-width: 1440px;
}
#federation-box-score.broadcast section tbody td,
#federation-box-score.broadcast section tfoot td {
  width: 7%;
  height: auto;
  padding: 2px;
}
#federation-box-score.broadcast section tbody td:not(:first-child),
#federation-box-score.broadcast section tfoot td:not(:first-child) {
  min-width: unset !important;
}
#federation-box-score.broadcast section th:not(:first-child) {
  min-width: unset !important;
}

.box-score-table .header {
  height: 36px;
  font-weight: 700;
}
.box-score-table .body {
  height: 54px;
}
.box-score-table .rounded-corners-border {
  border: 1px solid #d2d3d4;
  border-radius: 3px;
}
.box-score-table .rounded-corners-border .body:first-child {
  border-bottom: 1px solid #d2d3d4;
}
.box-score-table .name-cell {
  width: 180px;
}
.box-score-table .cell {
  text-align: center;
  width: 54px;
}
.box-score-table .box-score-stats-row:disabled {
  font-weight: initial;
  color: black;
}

.federation-site-table-container {
  width: 100%;
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  max-height: calc(100vh - 114px);
}

.pagination-item {
  width: 160px;
}
.pagination-item select {
  width: 55px;
}

div.search {
  background: #f2f2f7;
  border-radius: 6px;
  margin: auto 20px auto auto;
  padding: 7px 7px 0 42px;
  position: relative;
  width: 20%;
  height: 42px;
}
@media screen and (max-width: 767px) {
  div.search {
    width: calc(80vw - 42px);
    margin-left: auto;
    margin-right: auto;
  }
}
div.search div.magnifying-glass {
  left: 13px;
  position: absolute;
  top: 11px;
}
div.search div.magnifying-glass svg g {
  fill: #a3a3aa;
  stroke: #a3a3aa;
}
div.search div.input-container {
  float: none;
  min-width: 70px;
  overflow: hidden;
  flex-grow: 2;
}
div.search .clear-query-button {
  opacity: 0.5;
  min-height: 20px;
  min-width: 20px;
}
div.search .clear-query-button:hover:not(.disabled) {
  cursor: pointer;
}
div.search input.search-input {
  background: inherit;
  border: none;
  box-sizing: border-box;
  color: black;
  display: inline-block;
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 6px;
  outline: none;
  width: 100%;
  padding: initial;
}
div.search input.search-input::placeholder {
  color: #a3a3aa;
  opacity: 1; /* Firefox */
}

.federation-site-table {
  background-color: white;
  border-collapse: collapse;
  font-size: 16px;
  text-align: center;
  width: 100%;
}
.federation-site-table thead {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 700;
  cursor: pointer;
}
.federation-site-table th {
  padding: 0 10px;
  background: white;
}
.federation-site-table td,
.federation-site-table th {
  height: 50px;
  min-width: 80px;
}
.federation-site-table.sticky-column-last th:last-child {
  position: sticky;
  right: 0;
  box-shadow: -1px 1px #e5e5e5;
}
.federation-site-table.sticky-column-last td:last-child {
  position: sticky;
  right: 0;
  background: inherit;
  box-shadow: -1px 1px #e5e5e5;
}
.federation-site-table.sticky-firsts th {
  position: sticky;
  top: 0;
}
.federation-site-table.sticky-firsts th:first-child {
  left: 0;
  background: white;
  z-index: 1;
}
.federation-site-table.sticky-firsts td:first-child {
  position: sticky;
  left: 0;
  background: inherit;
}
.federation-site-table.sticky-firsts tbody tr:first-child td:first-child {
  box-shadow: 0 -1px 0 0 #e5e5e5;
}
.federation-site-table.sticky-firsts tfoot tr td {
  background: white;
}
.federation-site-table.sticky-firsts tfoot tr:first-child td:first-child {
  box-shadow: 0 -2px #e5e5e5;
}
.federation-site-table th:hover:not(.no-reaction) {
  filter: brightness(90%);
}
.federation-site-table th.align-left,
.federation-site-table td.align-left {
  text-align: left;
  padding-left: 15px;
}
.federation-site-table .fx-justify-left {
  justify-content: flex-start;
}
.federation-site-table tbody tr:nth-child(odd) {
  background: white;
}
.federation-site-table tbody tr:nth-child(even) {
  background: #f1f1f1;
}
@media (hover: hover) {
  .federation-site-table tbody tr:hover {
    filter: brightness(90%);
  }
}
.federation-site-table .btn-table {
  background-color: transparent;
  width: 100%;
  height: 100%;
}
.federation-site-table .link-table {
  font-weight: 700;
}
.federation-site-table .link-table.on-top {
  position: relative;
  z-index: 1;
}
.federation-site-table .no-reaction :hover {
  cursor: default;
}
.federation-site-table .no-reaction .short-name {
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.federation-site-table tfoot {
  border-top: 3px solid #e5e5e5;
}

#federation-teams-page table {
  width: 640px;
  background: white;
  box-shadow: 0 2px 4px 0 var(--box-shadow-color);
  border-collapse: collapse;
}
#federation-teams-page table thead .teams-table-heading {
  height: 70px;
}
#federation-teams-page table tbody .teams-table-row {
  height: 60px;
}
#federation-teams-page table tbody tr:not(:last-child) .teams-table-row {
  border-bottom: 1px solid #e5e5e5;
}
#federation-teams-page table tbody tr:not(:last-child) .teams-table-row-mobile {
  border-bottom: 1px solid #e5e5e5;
}
#federation-teams-page table .btn-table-teams {
  border-radius: 2px;
  font-size: 14px;
  width: 84px;
}
#federation-teams-page table .teams-standings-button {
  background-color: white !important;
}
#federation-teams-page .teams-table-mobile {
  width: 100vw;
}

.x-navbar-push-down {
  margin-bottom: 64px;
}

.federation-navbar {
  height: 64px;
  box-shadow: 0 2px 2px 0 var(--box-shadow-color);
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2;
  white-space: nowrap;
}
.federation-navbar #navbar-header {
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .federation-navbar .only-non-mobile {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .federation-navbar .only-mobile {
    display: none;
  }
}
.federation-navbar #navbar-logo {
  margin-right: 5px;
  margin-top: 30px;
}
.federation-navbar #navbar-logo.nba-fit {
  margin-top: 0;
  max-height: 64px;
}
.federation-navbar .side-menu-button-container {
  height: 64px;
  width: 64px;
}
.federation-navbar .dark-theme a:hover {
  background-color: rgba(255, 255, 255, 0.07);
}
.federation-navbar .light-theme a:hover {
  background-color: rgba(0, 0, 0, 0.07);
}
.federation-navbar #mobile-menu-button {
  padding: 0 5px;
  border-radius: 6px;
}
.federation-navbar #mobile-menu-button:hover {
  background-color: rgba(255, 255, 255, 0.07);
}
@media only screen and (min-width: 769px) {
  .federation-navbar #page-menu-items {
    width: 100%;
    height: 64px;
  }
  .federation-navbar #page-menu-items .margin-to-page-content {
    margin-right: calc((100vw - var(--page-content-width)) / 2);
  }
  .federation-navbar #page-menu-items ul {
    list-style-type: none;
    height: 100%;
    margin: 0;
    padding-inline-start: 0;
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
  }
  .federation-navbar #page-menu-items li {
    display: flex-item;
    height: 64px;
    cursor: pointer;
    line-height: 64px;
  }
  .federation-navbar #page-menu-items li a {
    display: block;
    padding-left: 12px;
    padding-right: 12px;
    height: 64px;
  }
}
@media only screen and (max-width: 768px) {
  .federation-navbar #page-menu-items {
    position: absolute;
    bottom: 64px;
    transition: transform 500ms ease-in-out;
    will-change: transform;
    margin: 0;
    padding: 0;
    z-index: 3;
    left: 0;
  }
  .federation-navbar #page-menu-items.opened {
    transform: translateY(100%);
  }
  .federation-navbar #page-menu-items ul {
    display: flex;
    list-style-type: none;
    flex-direction: column;
    padding-inline-start: 0;
    margin: 0;
  }
  .federation-navbar #page-menu-items li {
    height: 60px;
    margin: 0;
    padding: 0;
    width: 100vw;
  }
  .federation-navbar #page-menu-items li a,
  .federation-navbar #page-menu-items li button {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.federation-navbar #back-button {
  position: fixed;
  background-color: #f9f9f9;
  color: black;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  width: 380px;
  top: 64px;
  right: 0;
  line-height: initial;
  z-index: 3;
}
.federation-navbar #back-button a {
  display: flex !important;
}
.federation-navbar #back-button a:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

a span {
  border-bottom: 1px solid transparent;
}

.btn span {
  border-bottom: 1px solid transparent;
}

a.active span {
  border-bottom-color: var(--active-item-color-underline);
}

.btn.active span {
  border-bottom-color: var(--active-item-color-underline);
}

.carousel-container {
  position: relative;
}
.carousel-container .slide {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.carousel-container #dots-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
  width: 100vw;
}
.carousel-container #dots-container .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #717171;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.carousel-container #dots-container .dot.active, .carousel-container #dots-container .dot:hover {
  background-color: #bbb;
}

.hide-federations {
  display: none;
}

.loading {
  width: 100%;
  height: calc(var(--better-full-vh) - 265px);
}

#federation-footer {
  width: 100vw;
  color: #fff;
  margin-left: -40px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  #federation-footer {
    padding-bottom: 50px;
    margin-left: initial;
  }
}
#federation-footer .federation-social-link {
  fill: #fff;
}
#federation-footer .federation-image-link img {
  max-height: 90px;
}
@media only screen and (max-width: 767px) {
  #federation-footer .federation-image-link img {
    max-height: 55px;
  }
}
#federation-footer .footer-links {
  margin-top: -10px;
}

.federation-content {
  min-height: calc(100% - 80px);
  width: calc(100vw - 80px);
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 767px) {
  .federation-content {
    width: 100vw;
  }
}

.fix-first-column-width tr th:first-child {
  width: 400px;
}

#profile-page {
  max-width: 100vw;
  width: 1224px;
}

.fed-btn-radius {
  border-radius: 2px;
}

.federation-picker {
  gap: 25px;
  background-image: linear-gradient(to right top, #1d428a, #55619f, #bdb5d0, #bdb5d0, #c04361, #a60a24);
}
.federation-picker .federation-link {
  max-width: calc(100% - 50px);
  max-height: 40%;
  transition: all 0.5s ease-in-out;
  width: 108vh;
}
.federation-picker .federation-link:hover {
  transform: scale(1.02);
}
.federation-picker .federation-link .title {
  color: white;
  width: 40%;
  background-color: #1d428a;
  padding: 2px 5px;
  margin: 0;
  text-align: center;
  align-self: start;
  text-transform: uppercase;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
}
@media screen and (min-width: 769px) {
  .federation-picker .federation-link .title {
    font-size: 25px;
    line-height: 38px;
  }
}
.federation-picker .federation-link .league-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.federation-picker .federation-link:first-child {
  margin-top: auto;
  margin-bottom: 30px;
}
.federation-picker .federation-link:last-child {
  margin-bottom: auto;
}

#federation-main-page .main-page-section {
  margin-top: 30px;
}
#federation-main-page .federation-select {
  margin-top: 20px;
  margin-right: 0;
}
@media only screen and (max-width: 767px) {
  #federation-main-page .federation-select {
    margin-right: 20px;
  }
}
#federation-main-page .federation-select ~ .main-page-section {
  margin-top: 0;
}
#federation-main-page .main-page-section ~ .main-page-section {
  margin-top: 82px;
}
#federation-main-page .section-name-container {
  border-bottom: 2px solid #e7e7e7;
  width: 100vw;
}
@media only screen and (max-width: 767px) {
  #federation-main-page .section-name-container {
    margin-left: 5px;
  }
}
#federation-main-page #hero-image-section .carousel-container {
  width: 100vw;
  margin-top: -16px;
  margin-left: -40px;
}
@media only screen and (max-width: 767px) {
  #federation-main-page #hero-image-section .carousel-container {
    margin-left: initial;
  }
}
#federation-main-page #hero-image-section .carousel-container img {
  height: 42.8632661809vw;
  max-height: calc(0.6 * var(--better-full-vh));
  object-fit: cover;
}
#federation-main-page #recent-games-section .recent-games-container {
  overflow-x: auto;
  cursor: grab;
  width: 100vw;
  -ms-overflow-style: none; /* hide scrollbar IE and Edge */
  scrollbar-width: none; /* hide scrollbar Firefox */
}
#federation-main-page #recent-games-section .recent-games-container::-webkit-scrollbar {
  display: none; /* hide scrollbar Safari, Chrome, Opera */
}
#federation-main-page #recent-games-section .recent-games-container.grabbed {
  cursor: grabbing;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game {
  min-width: 310px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 0 3px #e7e7e7;
}
@media only screen and (min-width: 768px) {
  #federation-main-page #recent-games-section .recent-games-container .recent-game:last-child {
    margin-right: 80px;
  }
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .border-bottom {
  border-bottom: 1px solid #e7e7e7;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .header {
  min-height: 45px;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .header .network-name-game-type {
  color: #9a9aa8;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .team-row {
  height: 39px;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .team-row:nth-child(odd) {
  background-color: #f3f3f3;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .footer {
  min-height: 50px;
}
#federation-main-page #recent-games-section .recent-games-container .recent-game .footer a {
  flex-grow: 1;
  border: 2px solid;
  border-radius: 5px;
}
#federation-main-page .leaders-section .leaders-tile {
  width: 100%;
  max-width: 405px;
}
#federation-main-page .leaders-section .leaders-tile .leaders-video-button {
  position: relative;
  width: 100%;
  height: 230px;
  background-color: #000;
}
#federation-main-page .leaders-section .leaders-tile .leaders-video-button .subtitle {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: white;
  text-transform: uppercase;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table .leaders-subtitle {
  color: #9a9aa8;
  overflow: hidden;
  text-overflow: ellipsis;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table .titles-container {
  max-width: 145px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table .leaders-title {
  white-space: normal;
  overflow-wrap: break-word;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table .logo-placeholder {
  width: 52px;
  height: 52px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table td,
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table th {
  min-width: 60px;
}
@media only screen and (max-width: 375px) {
  #federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table td,
  #federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table th {
    min-width: 15px;
    padding: 0 5px;
  }
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tbody {
  position: relative;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tbody tr {
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.safari-active {
  font-weight: 500;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.safari-active .leaders-title-container {
  margin-top: 8px;
  font-size: 18px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active {
  height: 158px;
  cursor: pointer;
  font-weight: 500;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active.auto-cursor {
  cursor: auto;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:first-child {
  position: absolute;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:first-child .titles-container {
  height: 158px;
  max-width: 217px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:first-child .leaders-title-container {
  margin-top: 20px;
  font-size: 22px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:first-child .leaders-subtitle {
  font-size: 16px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:first-child .logo-placeholder {
  width: 140px;
  height: 140px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:first-child .leaders-index {
  display: none;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active td:not(:first-child) {
  vertical-align: bottom;
  padding-bottom: 17px;
}
#federation-main-page .leaders-section .leaders-tile .federation-site-table-container .federation-site-table tr.active img {
  height: 140px;
  width: 140px;
}
#federation-main-page #news-section .news-tile {
  width: 405px;
}
@media only screen and (max-width: 767px) {
  #federation-main-page #news-section .news-tile {
    width: 90%;
  }
}
#federation-main-page #news-section .news-tile img {
  height: 260px;
  box-shadow: 0 0 4px 0 var(--box-shadow-color);
  object-fit: cover;
}
#federation-main-page #news-section .news-tile .subtitle {
  color: #9a9aa8;
}

body {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}
body select,
body input {
  font-family: Roboto, sans-serif;
}

html {
  background-color: #eee;
}

@media (hover: hover) {
  :not(:disabled, .disabled).hoverable:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
    cursor: pointer;
  }
  :not(:disabled, .disabled).hoverable:hover .hoverable-force {
    background-color: rgba(0, 0, 0, 0.03) !important;
  }
}
#ember-testing-container * {
  transition: all 0s !important;
}

.use-pointer {
  cursor: pointer;
}

.normal-cursor {
  cursor: auto;
}

.wrap-anywhere {
  word-wrap: anywhere;
}

#account-page {
  max-width: var(--page-content-width);
}

.display-inline-block {
  display: inline-block;
}

.fill-height {
  height: 100%;
}

.fill-width {
  width: 100%;
}

.width-0 {
  width: 0%;
}

.width-4 {
  width: 1%;
}

.width-8 {
  width: 2%;
}

.width-12 {
  width: 3%;
}

.width-16 {
  width: 4%;
}

.width-20 {
  width: 5%;
}

.width-24 {
  width: 6%;
}

.width-28 {
  width: 7%;
}

.width-32 {
  width: 8%;
}

.width-36 {
  width: 9%;
}

.width-40 {
  width: 10%;
}

.width-44 {
  width: 11%;
}

.width-48 {
  width: 12%;
}

.width-52 {
  width: 13%;
}

.width-56 {
  width: 14%;
}

.width-60 {
  width: 15%;
}

.width-64 {
  width: 16%;
}

.width-68 {
  width: 17%;
}

.width-72 {
  width: 18%;
}

.width-76 {
  width: 19%;
}

.width-80 {
  width: 20%;
}

.width-84 {
  width: 21%;
}

.width-88 {
  width: 22%;
}

.width-92 {
  width: 23%;
}

.width-96 {
  width: 24%;
}

.fill-viewport-height {
  height: 100vh;
  height: var(--better-full-vh);
}

.fill-viewport-width {
  width: 100vw;
}

.global-z-index {
  z-index: 1;
}

a[disabled] {
  opacity: 0.65;
  cursor: default;
}

a.disabled {
  opacity: 0.65;
  cursor: default;
}

a:not(.disabled) {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

.capitalize {
  text-transform: capitalize;
}

.no-transform {
  text-transform: none;
}

.uppercase {
  text-transform: uppercase;
}

.active-link:hover span {
  text-decoration: underline;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.border-left {
  border-left: 1px solid var(--border-color);
}

.border-right {
  border-right: 1px solid var(--border-color);
}

.border-top {
  border-top: 1px solid var(--border-color);
}

.hide-scrollbar {
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar ::-webkit-scrollbar {
  display: none;
}

.borders {
  border: 1px solid var(--border-color);
}
.borders-white {
  border: 1px solid white;
}

.underline-on-hover:hover {
  text-decoration: underline;
}

.white-space-initial {
  white-space: initial;
}

.white-space-nowrap {
  white-space: nowrap;
}

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

.text-wrap-left {
  white-space: normal;
  text-align: left;
}

#modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}

.border-box {
  box-sizing: border-box;
}

#warning-message {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  padding: 30px;
}

.sorting-indicator-white {
  fill: white;
}

@media only screen and (min-width: 768px) {
  #show-mobile-nav-button {
    display: none;
  }
}
.template-margins-mobile {
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .template-margins-mobile {
    margin-left: 5px;
    margin-right: 5px;
  }
}

.table-page {
  width: calc(100vw - 10px);
}
@media only screen and (min-width: 768px) {
  .table-page {
    width: calc(100vw - 420px);
  }
}

.border-bottom-black {
  border-bottom: black solid 1px;
}

.img-contain {
  object-fit: contain;
}

.basic-popover button {
  height: 30px;
}
.basic-popover button.red {
  color: red;
}
.basic-popover button.cyan {
  color: cyan;
}
.basic-popover button.yellow {
  color: yellow;
}