* {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #041725;
  /*background-image: url("../img/BG-texture.png");*/
  background-size: cover;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
@font-face {
  font-family: "Circular Std";
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/CircularStd-Book.woff2?1f1f0b7a337d291e40d252a5db3e5af2) format("woff2"), url(/fonts/CircularStd-Book.woff?21a2c3d36dbaade80e2cb7491ad0dc7d) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  font-style: normal;
  font-weight: 700;
  src: url(/fonts/CircularStd-Bold.woff2?fb72b487cf867b50d2cb79fdd94fa2ff) format("woff2"), url(/fonts/CircularStd-Bold.woff?b0808321079afca2aa3497d8ace4876e) format("woff");
  font-display: swap;
}
.main_page {
  display: grid;
  grid-template-columns: 296px 489px 658px 1fr;
  width: 1920px;
  height: 1080px;
  background-color: #041725;
  /*background-image: url("../img/BG-texture.png");*/
}
.main_page--statistics {
  grid-template-columns: 296px 1fr;
}
.main_page--planner-base {
  grid-template-columns: 296px 1fr;
}
.main_players-container {
  margin-right: 64px;
}
.main_football-field-container {
  background-color: #7d6c6c;
  margin: 16px 0;
}
.main_right-side-container {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-left: 80px;
  margin-top: 40px;
  width: 352px;
}
.main_statistics-container {
  display: grid;
  grid-template-columns: 736px 1fr;
  gap: 0 62px;
}
.navigation {
  height: 100%;
}
.navigation__list {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navigation__item {
  margin-bottom: 16px;
  border: 2px solid #021322;
}
.navigation__item .navigation__link {
  display: block;
  box-sizing: border-box;
  padding: 20px 10px 20px 10px;
  width: 100%;
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  color: #1F9F9F;
  background-color: #021322;
}
.navigation__item:hover {
  border: 2px solid #283847;
}
.navigation__item:hover .navigation__sub-list {
  display: flex;
}
.navigation__item--active {
  border: 2px solid #082C38;
}
.navigation__item--active .navigation__link {
  background-color: #082C38;
}
.navigation__item--active:hover {
  border: 2px solid #082C38;
}
.navigation__item--bottom {
  margin-top: auto;
}
.navigation__item--open {
  border: 2px solid #283847;
}
.navigation__item--open .navigation__sub-list {
  display: flex;
}
.navigation__item--open .navigation__sub-list .navigation__sub-item--active .navigation__sub-link {
  color: #1F9F9F;
}
.navigation__item--open .navigation__sub-list a {
  color: #283847;
}
.navigation__sub-list {
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 16px 0;
  list-style-type: none;
  border-top: 2px solid #283847;
  background-color: #021322;
}
.navigation__sub-list .navigation__sub-link {
  display: block;
  box-sizing: border-box;
  padding: 10px 10px 10px 35px;
  width: 100%;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
  color: #1F9F9F;
  text-align: left;
}
.players-editing__container {
  margin-top: 16px;
  display: flex;
}
.players-editing__button {
  padding: 0;
  min-height: 40px;
  width: 144px;
  margin-left: 8px;
  background-color: transparent;
  border: 1px solid #283847;
  box-sizing: border-box;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 15px;
  line-height: 19px;
  font-weight: 500;
  color: #1F9F9F4D;
}
.players-editing__button--tooltip::before {
  content: "";
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: -8px;
  right: -8px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 4px solid #041624;
  background-color: #1f9f9f;
}
.players-editing__button--tooltip::after {
  content: "Complete Evaluation";
  display: none;
  align-items: center;
  top: -58px;
  right: -48px;
  z-index: 10;
  box-sizing: border-box;
  position: absolute;
  height: 48px;
  width: 96px;
  background-color: #031522;
  border: 1px solid #283847;
  border-radius: 4px;
  color: #fafafa;
}
.players-editing__button--tooltip:hover::after,
.players-editing__button--tooltip:hover::before {
  display: flex;
}
.players-editing__button--icon {
  width: 40px;
  padding: 0;
  margin-left: 0;
  margin-right: auto;
}
.logo {
  margin-bottom: 30px;
}
.team-performance {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
}
.team-performance__header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-performance__header {
  display: block;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 26px;
  font-weight: 700;
  color: #1f9f9f;
}
.team-performance__state-buttons-container {
  display: flex;
  margin-top: 15px;
}
.team-performance__state-button {
  min-height: 40px;
  width: 50%;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  border: 1px solid #082f38;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #082f38;
}
.team-performance__state-button--active {
  background-color: #082f38;
  color: #1f9f9f;
}
.team-performance__section-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style-type: none;
}
.team-performance__section_item {
  position: relative;
  margin-top: 16px;
}
.team-performance__feature-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-performance__feature {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #1f9f9f;
}
.team-performance__rating-bar-container {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.team-performance__bar-button {
  height: 12px;
  width: 32px;
  border-radius: 0;
  background-color: transparent;
  border: 2px solid #1f9f9f26;
}
.team-performance__bar-button--active:nth-child(1) {
  background-color: #860000;
}
.team-performance__bar-button--active:nth-child(2) {
  background-color: #831800;
}
.team-performance__bar-button--active:nth-child(3) {
  background-color: #833000;
}
.team-performance__bar-button--active:nth-child(4) {
  background-color: #835300;
}
.team-performance__bar-button--active:nth-child(5) {
  background-color: #836b00;
}
.team-performance__bar-button--active:nth-child(6) {
  background-color: #7d8300;
}
.team-performance__bar-button--active:nth-child(7) {
  background-color: #618300;
}
.team-performance__bar-button--active:nth-child(8) {
  background-color: #4a8300;
}
.team-performance__bar-button--active:nth-child(9) {
  background-color: #00831c;
}
.team-performance__bar-button--active:nth-child(10) {
  background-color: #00831c;
}
.team-performance__bar-button--change {
  background-color: #1f9f9f42;
  border-color: #1f9f9f88;
}
.team-performance__option-menu-list {
  display: none;
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  width: 80px;
  right: -18px;
  top: 44px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.team-performance__option-menu-list--open {
  display: flex;
}
.team-performance__option-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 16px;
}
.team-performance__option-menu-item:hover {
  background-color: #1f9f9f20;
}
.team-performance__option-menu-item:hover .scills__option-menu-content {
  color: #fafafa;
}
.team-performance__option-menu-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f;
}
.square-button {
  box-sizing: border-box;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  outline: none;
  border: 2px solid #283847;
}
.square-button > svg {
  fill: #1f9f9f;
}
.square-button:hover {
  background-color: #1f9f9f29;
  border: none;
}
.square-button--active {
  background-color: #1f9f9f;
}
.square-button--active:hover {
  border: 2px solid #283847;
  background-color: #1f9f9f;
}
.square-button--active > svg {
  fill: #fafafa;
}
.square-button--disabled {
  opacity: 0.3;
}
.square-button--disabled:hover {
  border: 2px solid #283847;
  background-color: transparent;
}
.players-team__container {
  margin-top: 16px;
}
.players-team__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.players-team__description {
  display: block;
  margin-bottom: 8px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #1f9f9f;
}
.players-team__number {
  box-sizing: border-box;
  display: block;
  width: 48px;
  text-align: center;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  color: #1f9f9f;
  background-color: #092d39;
  border: 1px solid #092d39;
}
.players-team__number:hover {
  border-color: #1f9f9f;
}
.players-team__number--bench {
  opacity: 0.1;
}
.players-team__name {
  display: block;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: #1f9f9f;
}
.players-team__name:hover {
  text-decoration: underline;
}
.players-team__position {
  box-sizing: border-box;
  display: block;
  width: 64px;
  text-align: center;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  color: #1f9f9f;
  background-color: #092d39;
  border: 1px solid #092d39;
}
.players-team__position:hover {
  border: 1px solid #1f9f9f;
}
.players-team__position--active {
  background-color: #1f9f9f;
  border: 1px solid #1f9f9f;
  color: #fafafa;
}
.players-team__item {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  align-items: center;
}
.players-team__item--empty > .players-team__number {
  border: 1px solid #283847;
  color: #283847;
  background-color: #031522;
}
.players-team__item--empty > .players-team__name:hover {
  text-decoration: none;
}
.players-team__item--empty > .players-team__position {
  border: 1px solid #283847;
  color: #283847;
  background-color: #031522;
}
.players-team__item--editing > .players-team__number {
  opacity: 0.2;
  border: 1px solid #283847;
}
.players-team__item--editing > .players-team__name {
  opacity: 0.2;
}
.players-team__item--editing > .players-team__name:hover {
  text-decoration: none;
}
.players-team__item--editing > .players-team__position {
  opacity: 0.2;
  border: 1px solid #283847;
}
.players-team__item--bench {
  opacity: 0.3;
}
.players-team__item--bench > .players-team__number {
  border: 1px solid #283847;
  color: #283847;
  background-color: #031522;
}
.players-team__item--bench > .players-team__name:hover {
  text-decoration: none;
}
.players-team__item--bench > .players-team__position {
  border: 1px solid #283847;
  color: #283847;
  background-color: #031522;
}
.player-team__position-menu-list {
  display: none;
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  width: 213px;
  right: -218px;
  top: -1px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.player-team__position-menu-list--open {
  display: flex;
}
.player-team__position-menu-list .player-team__position-menu-list {
  display: none;
}
.player-team__position-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 8px;
}
.player-team__position-menu-item::after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  right: -25px;
}
.player-team__position-menu-item:hover {
  background-color: #1f9f9f20;
}
.player-team__position-menu-item:hover .player-team__position-menu-list {
  display: flex;
}
.player-team__position-menu-item:hover .player-team__position-menu-text {
  color: #1f9f9f;
}
.player-team__position-menu-item .player-team__position-menu-list {
  right: -223px;
  top: -1px;
}
.player-team__position-menu-text {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f46;
}
.pitch-settings__container {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.pitch-settings__header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #175864;
}
.pitch-settings__select-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.pitch-settings__select-header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
}
.pitch-settings__select-button {
  min-height: 47px;
  border: 1px solid #283847;
  background-color: #031522;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #283847;
  margin-top: 8px;
}
.pitch-settings__select-button--active {
  border-color: #1f9f9f;
  color: #fafafa;
}
.pitch-settings__create-button {
  margin-top: auto;
  margin-bottom: 30px;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  border: 1px solid #283847;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 62px;
  font-weight: 700;
  color: #1f9f9f4a;
  text-align: center;
  text-decoration: none;
}
.pitch-settings__create-button:hover {
  color: #f1f9f9;
  border-color: #f1f9f9;
}
.pitch-settings__select-list {
  display: none;
  z-index: 1;
  position: absolute;
  top: 78px;
  width: 352px;
  flex-direction: column;
  margin: 0;
  padding: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  list-style-type: none;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
  background-color: #021322;
}
.pitch-settings__select-list--open {
  display: flex;
}
.pitch-settings__select-item {
  display: flex;
}
.pitch-settings__item-select-button {
  display: flex;
  flex-grow: 1;
  align-items: center;
  margin: 0 8px;
  padding: 0;
  padding-left: 12px;
  min-height: 36px;
  text-align: start;
  border: none;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  color: #1f9f9f;
  background-color: transparent;
}
.pitch-settings__item-select-button svg {
  margin-right: 8px;
}
.pitch-settings__item-select-button:hover {
  background-color: #1f9f9f12;
}
.view-settings_list {
  position: absolute;
  left: -70px;
  top: 56px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  list-style-type: none;
}
.view-settings_item {
  margin-top: -1px;
}
.equipment-container {
  margin-top: 32px;
}
.equipment-header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #175864;
}
.equipment-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  margin-top: 16px;
  padding: 0;
  list-style-type: none;
  gap: 10px 10px;
}
.equipment-button {
  height: 40px;
  width: 40px;
  padding: 0;
  outline: none;
  border-radius: 4px;
  background-color: #1758643d;
  border: none;
}
.statistics_left-side-container {
  width: 736px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 48px;
}
.statistics_right-side-container {
  position: relative;
  margin-top: 48px;
  margin-right: 221px;
}
.goal-settings {
  margin-top: 84px;
}
.goal-settings__header-container {
  display: flex;
  padding: 19px;
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 27px;
  font-weight: 700;
  color: #d7dce0e5;
  background: linear-gradient(180deg, #1f9f9f16 0%, rgba(31, 159, 159, 0) 100%);
  border-top: 2px solid #9f9f9f;
}
.goal-settings_header {
  margin-right: auto;
}
.goal-settings_date-link {
  color: #1f9f9f;
}
.goal-settings_list {
  padding: 0;
  list-style-type: none;
  margin-top: 24px;
}
.goal-settings_list-description {
  display: block;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
}
.goal-settings_item {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #1f9f9f;
  margin-top: 6px;
}
.goal-settings_item:first-of-type {
  margin-top: 32px;
}
.goal-settings_item-link {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-decoration: none;
  color: #1f9f9f;
}
.contacts_list {
  padding: 0;
  margin: 0;
  margin-top: 48px;
}
.contacts_item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.contacts_item:nth-child(2) {
  margin-top: 50px;
}
.contacts_item-key {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #1f9f9f;
}
.contacts_item-value {
  margin-top: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #d7dce0e5;
}
.contacts_item-value--absent {
  color: #1F9F9F;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}
.scills__list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  margin-top: 24px;
  padding: 0;
  list-style-type: none;
  gap: 48px 32px;
}
.scills__item {
  display: flex;
  flex-direction: column;
  width: 352px;
  align-items: stretch;
}
.scills__description {
  display: block;
  padding: 19px;
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 27px;
  font-weight: 700;
  color: #d7dce0e5;
  background: linear-gradient(180deg, #1f9f9f16 0%, rgba(31, 159, 159, 0) 100%);
  border-top: 2px solid #9f9f9f;
}
.scills__option-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-top: 16px;
  padding: 0;
  list-style-type: none;
}
.scills__option-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.scills__option-description {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
}
.square-menu-button {
  box-sizing: border-box;
  padding: 0;
  width: 40px;
  height: 40px;
  outline: none;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  background-color: #031522;
  color: #283847E5;
  border: 2px solid #283847;
}
.square-menu-button:hover {
  border-color: #1f9f9f83;
}
.square-menu-button:active {
  color: #1f9f9f;
  border-color: #1f9f9f;
}
.square-menu-button--1 {
  background-color: #FF202029;
  border: none;
  color: #FF2020E5;
}
.square-menu-button--1:hover {
  border: 2px solid #FF202052;
}
.square-menu-button--1:active {
  border: 2px solid #FF2020;
  color: #FF2020E5;
}
.square-menu-button--2 {
  background-color: #FF461D29;
  border: none;
  color: #FF461DE5;
}
.square-menu-button--2:hover {
  border: 2px solid #FF461D52;
}
.square-menu-button--2:active {
  border: 2px solid #FF461D;
  color: #FF461DE5;
}
.square-menu-button--3 {
  background-color: #FF701D29;
  border: none;
  color: #FF701DE5;
}
.square-menu-button--3:hover {
  border: 2px solid #FF701D52;
}
.square-menu-button--3:active {
  border: 2px solid #FF701D;
  color: #FF701DE5;
}
.square-menu-button--4 {
  background-color: #FFAC1D29;
  border: none;
  color: #FFAC1DE5;
}
.square-menu-button--4:hover {
  border: 2px solid #FFAC1D52;
}
.square-menu-button--4:active {
  border: 2px solid #FFAC1D;
  color: #FFAC1DE5;
}
.square-menu-button--5 {
  background-color: #FFD51D29;
  border: none;
  color: #FFD51DE5;
}
.square-menu-button--5:hover {
  border: 2px solid #FFD51D52;
}
.square-menu-button--5:active {
  border: 2px solid #FFD51D;
  color: #FFD51DE5;
}
.square-menu-button--6 {
  background-color: #F4FF1D29;
  border: none;
  color: #F4FF1DE5;
}
.square-menu-button--6:hover {
  border: 2px solid #F4FF1D52;
}
.square-menu-button--6:active {
  border: 2px solid #F4FF1D;
  color: #F4FF1DE5;
}
.square-menu-button--7 {
  background-color: #C4FF1D29;
  border: none;
  color: #C4FF1DE5;
}
.square-menu-button--7:hover {
  border: 2px solid #C4FF1D52;
}
.square-menu-button--7:active {
  border: 2px solid #C4FF1D;
  color: #C4FF1DE5;
}
.square-menu-button--8 {
  background-color: #9CFF1D29;
  border: none;
  color: #9CFF1DE5;
}
.square-menu-button--8:hover {
  border: 2px solid #9CFF1D52;
}
.square-menu-button--8:active {
  border: 2px solid #9CFF1D;
  color: #9CFF1DE5;
}
.square-menu-button--9 {
  background-color: #6CFA0029;
  border: none;
  color: #6CFA00E5;
}
.square-menu-button--9:hover {
  border: 2px solid #6CFA0052;
}
.square-menu-button--9:active {
  border: 2px solid #6CFA00;
  color: #6CFA00E5;
}
.square-menu-button--10 {
  background-color: #1DFF4E29;
  border: none;
  color: #1DFF4EE5;
}
.square-menu-button--10:hover {
  border: 2px solid #1DFF4E52;
}
.square-menu-button--10:active {
  border: 2px solid #1DFF4E;
  color: #1DFF4EE5;
}
.scills__option-menu-list {
  display: none;
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  width: 80px;
  right: -18px;
  top: 44px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.scills__option-menu-list--open {
  display: flex;
}
.scills__option-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 16px;
}
.scills__option-menu-item:hover {
  background-color: #1f9f9f20;
}
.scills__option-menu-item:hover .scills__option-menu-content {
  color: #fafafa;
}
.scills__option-menu-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f;
}
.player-info_container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 280px;
  padding: 30px 18px;
  align-items: center;
  flex-direction: column;
  border-top: 2px solid #1f9f9f;
  background: linear-gradient(180deg, #1f9f9f16 0%, rgba(31, 159, 159, 0) 100%);
}
.player-info_name {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #d7dce0e5;
}
.player-info_parametres-list {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  margin-top: 18px;
  list-style-type: none;
}
.player-info_parametres-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.player-info_parametres-key {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #1f9f9f;
}
.player-info_parametres-value {
  margin-top: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #d7dce0e5;
}
.player-info_parametres-value--absent {
  color: #1F9F9F;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}
.player-info_addiction {
  margin-top: 24px;
  width: 60%;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #d7dce0e5;
  text-align: center;
}
.player-info__birth-date-list {
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  width: 112px;
  right: -10px;
  top: 50px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
  height: 298px;
  overflow-x: hidden;
}
.player-info__birth-date-list::-webkit-scrollbar {
  width: 4px;
  background-color: #092D39;
}
.player-info__birth-date-list::-webkit-scrollbar-thumb {
  background-color: #1f9f9f;
}
.player-info__birth-date-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 16px;
}
.player-info__birth-date-item::after {
  content: "";
  position: absolute;
  height: 30px;
  width: 30px;
  right: -25px;
}
.player-info__birth-date-item:hover {
  background-color: #1f9f9f20;
}
.player-info__birth-date-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f;
}
.player-info__birth-date-list--month {
  display: none;
  top: -6px;
  right: -155px;
  width: 145px;
  height: 380px;
}
.player-info__birth-date-list--month--active {
  display: flex;
}
.player-info__birth-date-list--month .player-info__birth-date-item:hover .player-info__birth-date-list--days {
  display: flex;
}
.player-info__birth-date-list--days {
  display: none;
  top: 0;
  right: -110px;
  width: 100px;
}
.player-info__position-menu-list {
  display: none;
  z-index: 10;
  position: absolute;
  box-sizing: border-box;
  width: 213px;
  left: 34px;
  top: 180px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.player-info__position-menu-list--open {
  display: flex;
}
.player-info__position-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 8px;
}
.player-info__position-menu-item::after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  right: -25px;
}
.player-info__position-menu-item:hover {
  background-color: #1f9f9f20;
}
.player-info__position-menu-item:hover .player-team__position-menu-list {
  display: flex;
}
.player-info__position-menu-item:hover .player-info__position-menu-content {
  color: #fafafa;
}
.player-info__position-menu-item .player-team__position-menu-list {
  right: -223px;
  top: -1px;
}
.player-info__position-menu-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f46;
}
.player-add_parametres-list {
  position: relative;
  display: grid;
  padding: 0;
  margin-left: 24px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 50px;
  background-image: url(/images/Separators.svg?79bce025a5e6c57f806470034b59e6af);
  background-repeat: no-repeat;
  background-position: center;
}
.player-add_parametres-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.player-add_parametres-key {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #1f9f9f;
}
.player-add_parametres-value {
  margin-top: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #d7dce0e5;
}
.player-add_parametres-value--absent {
  color: #1F9F9F;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}
.player-add_chenge-list {
  display: none;
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  width: 112px;
  right: 0;
  top: 80px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
  height: 366px;
  overflow-x: hidden;
}
.player-add_chenge-list--open {
  display: flex;
}
.player-add_chenge-list::-webkit-scrollbar {
  width: 4px;
  background-color: #092D39;
}
.player-add_chenge-list::-webkit-scrollbar-thumb {
  background-color: #1f9f9f;
}
.player-add_change-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 16px;
}
.player-add_change-item:hover {
  background-color: #1f9f9f20;
}
.player-add_change-item:hover .player-add_change-content {
  color: #fafafa;
}
.player-add_change-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f;
}
.players-switcher__container {
  margin-top: 48px;
}
.players-switcher__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.players-switcher__item:nth-child(2) > .players-switcher__button {
  border-left: none;
}
.players-switcher__item:nth-child(3) > .players-switcher__button {
  border-top: none;
}
.players-switcher__item:nth-child(4) > .players-switcher__button {
  border-top: none;
  border-left: none;
}
.players-switcher__button {
  display: block;
  box-sizing: border-box;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 15px;
  line-height: 19px;
  font-weight: 500;
  outline: none;
  width: 100%;
  min-height: 48px;
  background-color: transparent;
  color: #1F9F9F4D;
  border: 1px solid #283847;
}
.players-switcher__button--active {
  color: #1F9F9F;
}
.user-buttons__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.user-buttons__item {
  margin-left: 8px;
}
.user-buttons__item:first-child {
  margin-left: 0;
  position: absolute;
  left: -70px;
  top: 0;
}
.user-buttons__item:nth-of-type(2) {
  margin-left: 0;
}
.user-buttons__item:last-child {
  margin-left: auto;
}
.team-select__container {
  display: flex;
  margin-top: 32px;
}
.team-select__button {
  min-height: 48px;
  width: 100px;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  border: 1px solid #082f38;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #1f9f9f55;
}
.team-select__button--active {
  background-color: #082f38;
  color: #1f9f9f;
}
.team-select__select-wrapper {
  margin-left: auto;
}
.team-select__select {
  box-sizing: border-box;
  width: 144px;
  min-height: 48px;
  margin-left: auto;
  background-color: transparent;
  outline: none;
  border: 1px solid #082c38;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #1f9f9f55;
}
.team-select__select > svg {
  margin-left: 28px;
  fill: #1f9f9f55;
}
.team-select__select--active {
  color: #1f9f9f;
}
.team-select__select--active > svg {
  fill: #1f9f9f;
}
.team-view__list {
  padding: 0;
  margin: 0;
  margin-top: 8px;
  list-style-type: none;
}
.team-view__color {
  align-self: stretch;
}
.team-view__item {
  height: 56px;
  display: flex;
  align-items: center;
  margin-top: 4px;
  background-color: #021322;
}
.team-view__item:nth-child(1) > .team-view__color {
  width: 6px;
  background-color: #30bbd4;
}
.team-view__item:nth-child(2) > .team-view__color {
  width: 6px;
  background-color: #b5308a;
}
.team-view__item--edit {
  opacity: 0.32;
}
.team-view__item--edit .team-view__name {
  text-decoration: underline;
}
.team-view__item--edit .team-view__number {
  font-size: 16px;
  text-decoration: underline;
}
.team-view__name {
  display: block;
  margin-left: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
}
.team-view__number {
  margin-left: auto;
  margin-right: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: #1f9f9f;
}
.menu {
  display: flex;
  flex-direction: column;
  padding: 50px 50px 10px;
}
.start-game-button {
  box-sizing: border-box;
  width: 100%;
  background-color: #021322;
  outline: none;
  border: none;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 48px;
  font-weight: 700;
  color: #1f9f9f;
  text-align: center;
  text-decoration: none;
  border: 2px solid #02132298;
}
.start-game-button:hover {
  border-color: #283847;
}
.start-game-button_container {
  margin-top: auto;
  margin-bottom: 40px;
  display: flex;
}
.season-stats {
  display: flex;
  flex-direction: column;
  margin-top: 72px;
  min-width: 605px;
}
.season-stats__header-container {
  position: relative;
  display: flex;
  padding: 19px 24px 0;
  height: 60px;
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 27px;
  font-weight: 700;
  color: #d7dce0e5;
  background: linear-gradient(180deg, #1f9f9f16 0%, rgba(31, 159, 159, 0) 100%);
  border-top: 2px solid #9f9f9f;
}
.season-stats__table-description-list {
  position: absolute;
  right: 14px;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 50px) 64px;
  gap: 0 14px;
  justify-items: center;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.season-stats__table-description-text {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
}
.season-stats__table-description-color {
  height: 16px;
  width: 12px;
  background-color: #00ff00;
}
.season-stats__table-description-color--false {
  background-color: #ff0000;
}
.season-stats__main-list {
  box-sizing: border-box;
  width: 100%;
  padding: 0 14px 0 24px;
  display: flex;
  flex-direction: column;
  list-style-type: none;
}
.season-stats__main-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr repeat(5, 50px) 64px;
  gap: 0 14px;
  min-height: 40px;
  align-items: center;
  justify-items: center;
}
.season-stats__main-key {
  display: block;
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
  margin-right: auto;
}
.season-stats__main-description {
  display: block;
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #d7dce0e5;
  width: 64px;
}
.season-stats__main-rating {
  width: 40px;
  height: 32px;
  background-color: transparent;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #243443;
  border: 2px solid transparent;
}
.season-stats__main-rating--1 {
  background-color: #FF202029;
  color: #FF2020E5;
}
.season-stats__main-rating--2 {
  background-color: #FF461D29;
  color: #FF461DE5;
}
.season-stats__main-rating--3 {
  background-color: #FF701D29;
  color: #FF701DE5;
}
.season-stats__main-rating--4 {
  background-color: #FFAC1D29;
  color: #FFAC1DE5;
}
.season-stats__main-rating--5 {
  background-color: #FFD51D29;
  color: #FFD51DE5;
}
.season-stats__main-rating--6 {
  background-color: #F4FF1D29;
  color: #F4FF1DE5;
}
.season-stats__main-rating--7 {
  background-color: #C4FF1D29;
  color: #C4FF1DE5;
}
.season-stats__main-rating--8 {
  background-color: #9CFF1D29;
  color: #9CFF1DE5;
}
.season-stats__main-rating--9 {
  background-color: #6CFA0029;
  color: #6CFA00E5;
}
.season-stats__main-rating--10 {
  background-color: #1DFF4E29;
  color: #1DFF4EE5;
}
.season-stats__button-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  right: -150px;
  bottom: 30px;
}
.season-stats__option-menu-list {
  display: none;
  z-index: 1;
  position: absolute;
  box-sizing: border-box;
  width: 80px;
  right: -10px;
  bottom: 48px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.season-stats__option-menu-list--open {
  display: flex;
}
.season-stats__option-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 16px;
}
.season-stats__option-menu-item:hover {
  background-color: #1f9f9f20;
}
.season-stats__option-menu-item:hover .scills__option-menu-content {
  color: #fafafa;
}
.season-stats__option-menu-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f;
}
.radius-button__primary {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 23px;
  min-height: 44px;
  border-radius: 8px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  background-color: #1f9f9f;
  color: #ffffff;
  border: 2px solid #1f9f9f;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.radius-button__primary:hover {
  background-color: #048484;
}
.radius-button__primary:focus {
  background-color: #af9f9f;
  border-color: #FAFAFA;
}
.radius-button__primary--active {
  background-color: #048484;
  border-color: #1f9f9f;
}
.radius-button__primary:disabled {
  opacity: 0.3;
}
.radius-button__primary:disabled:hover {
  background-color: #1f9f9f;
}
.radius-button__primary--slim {
  min-height: 40px;
}
.radius-button__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 23px;
  border-radius: 8px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #1f9f9f;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.radius-button__secondary:hover {
  background-color: #1f9f9f49;
}
.radius-button__secondary:focus {
  background-color: #0B161D;
}
.radius-button__secondary:active {
  background-color: #1f9f9f49;
}
.radius-button__secondary:disabled {
  opacity: 0.32;
}
.popup {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.popup__container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  align-items: center;
  min-width: 520px;
  min-height: 204px;
  transform: translate(-50%, -50%);
  background-color: #021322;
  border-radius: 4px;
}
.popup__header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: #fafafa;
}
.popup__header--left {
  align-self: flex-start;
}
.popup__content {
  margin-top: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #1F9F9F;
  width: 80%;
  text-align: center;
}
.popup__button-container {
  display: flex;
  margin-top: 24px;
  gap: 0 12px;
}
.popup__button-container--right {
  justify-content: flex-end;
  width: 100%;
}
.popup__remove-link {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #1F9F9F;
  margin-right: auto;
  align-self: center;
}
.square-menu-button {
  box-sizing: border-box;
  padding: 0;
  width: 40px;
  height: 40px;
  outline: none;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  background-color: #031522;
  color: #283847E5;
  border: 2px solid #283847;
}
.square-menu-button:hover,
.square-menu-button:focus {
  border-color: #1f9f9f83;
}
.square-menu-button:active,
.square-menu-button--active {
  color: #1f9f9f;
  border-color: #1f9f9f;
}
.square-menu-button--1 {
  background-color: #FF202029;
  border: none;
  color: #FF2020E5;
}
.square-menu-button--1:hover {
  border: 2px solid #FF202052;
}
.square-menu-button--1:active {
  border: 2px solid #FF2020;
  color: #FF2020E5;
}
.square-menu-button--2 {
  background-color: #FF461D29;
  border: none;
  color: #FF461DE5;
}
.square-menu-button--2:hover {
  border: 2px solid #FF461D52;
}
.square-menu-button--2:active {
  border: 2px solid #FF461D;
  color: #FF461DE5;
}
.square-menu-button--3 {
  background-color: #FF701D29;
  border: none;
  color: #FF701DE5;
}
.square-menu-button--3:hover {
  border: 2px solid #FF701D52;
}
.square-menu-button--3:active {
  border: 2px solid #FF701D;
  color: #FF701DE5;
}
.square-menu-button--4 {
  background-color: #FFAC1D29;
  border: none;
  color: #FFAC1DE5;
}
.square-menu-button--4:hover {
  border: 2px solid #FFAC1D52;
}
.square-menu-button--4:active {
  border: 2px solid #FFAC1D;
  color: #FFAC1DE5;
}
.square-menu-button--5 {
  background-color: #FFD51D29;
  border: none;
  color: #FFD51DE5;
}
.square-menu-button--5:hover {
  border: 2px solid #FFD51D52;
}
.square-menu-button--5:active {
  border: 2px solid #FFD51D;
  color: #FFD51DE5;
}
.square-menu-button--6 {
  background-color: #F4FF1D29;
  border: none;
  color: #F4FF1DE5;
}
.square-menu-button--6:hover {
  border: 2px solid #F4FF1D52;
}
.square-menu-button--6:active {
  border: 2px solid #F4FF1D;
  color: #F4FF1DE5;
}
.square-menu-button--7 {
  background-color: #C4FF1D29;
  border: none;
  color: #C4FF1DE5;
}
.square-menu-button--7:hover {
  border: 2px solid #C4FF1D52;
}
.square-menu-button--7:active {
  border: 2px solid #C4FF1D;
  color: #C4FF1DE5;
}
.square-menu-button--8 {
  background-color: #9CFF1D29;
  border: none;
  color: #9CFF1DE5;
}
.square-menu-button--8:hover {
  border: 2px solid #9CFF1D52;
}
.square-menu-button--8:active {
  border: 2px solid #9CFF1D;
  color: #9CFF1DE5;
}
.square-menu-button--9 {
  background-color: #6CFA0029;
  border: none;
  color: #6CFA00E5;
}
.square-menu-button--9:hover {
  border: 2px solid #6CFA0052;
}
.square-menu-button--9:active {
  border: 2px solid #6CFA00;
  color: #6CFA00E5;
}
.square-menu-button--10 {
  background-color: #1DFF4E29;
  border: none;
  color: #1DFF4EE5;
}
.square-menu-button--10:hover {
  border: 2px solid #1DFF4E52;
}
.square-menu-button--10:active {
  border: 2px solid #1DFF4E;
  color: #1DFF4EE5;
}
.planner-base__container {
  display: flex;
  flex-direction: column;
  padding: 110px 148px 100px 0;
}
.planner-base__navigation-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.planner-base__utils-button-container {
  display: flex;
}
.planner-base__calendar-table {
  display: block;
  margin-top: 24px;
  width: 100%;
  border-collapse: collapse;
}
.planner-base__calendar-table th {
  box-sizing: border-box;
  background-color: #1f9f9f0f;
  border: 1px solid #1f9f9f;
  height: 100px;
  width: 185px;
}
.planner-base__calendar-table td {
  box-sizing: border-box;
  border: 1px solid #1f9f9f;
  height: 130px;
  padding: 8px;
  width: 185px;
}
.planner-base__header-cell {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 0;
}
.planner-base__header-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 10px;
  font-weight: 500;
  color: #1f9f9f;
}
.planner-base__header-time {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 18px;
  line-height: 10px;
  font-weight: 500;
  color: #1f9f9f;
}
.planner-base__cell-header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 26px;
  font-weight: 700;
  color: #1f9f9f;
  text-align: center;
}
.planner-base__cell-time {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: #1f9f9f;
  margin-top: auto;
  margin-bottom: 12px;
}
.planner-base__cell {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.planner-base__cell--game-plan {
  background: linear-gradient(180deg, #512C93 99.99%, rgba(78, 13, 191, 0) 100%);
}
.planner-base__cell--game-plan .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--game-plan .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--opposition {
  background: linear-gradient(180deg, #321648 99.99%, rgba(50, 8, 124, 0) 100%);
}
.planner-base__cell--opposition .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--opposition .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--pre-game {
  background: linear-gradient(180deg, #E47B74 99.99%, rgba(234, 134, 82, 0) 100%);
}
.planner-base__cell--pre-game .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--pre-game .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--speed {
  background: linear-gradient(180deg, #0A2848 99.99%, rgba(9, 45, 85, 0) 100%);
}
.planner-base__cell--speed .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--speed .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--tactical {
  background: linear-gradient(180deg, #0F64BF 99.99%, rgba(78, 160, 248, 0) 100%);
}
.planner-base__cell--tactical .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--tactical .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--specific {
  background: linear-gradient(180deg, #3595FD 99.99%, rgba(9, 94, 187, 0) 100%);
}
.planner-base__cell--specific .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--specific .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--warm {
  background: linear-gradient(180deg, #C24B35 99.99%, rgba(238, 119, 98, 0) 100%);
  color: #fafafa;
}
.planner-base__cell--warm .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--warm .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--review {
  background: linear-gradient(180deg, #855BCE 99.99%, #EBDFFF 100%);
}
.planner-base__cell--review .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--review .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 12px;
}
.planner-base__cell--matchday {
  background: linear-gradient(180deg, #8B1717 99.99%, rgba(140, 16, 16, 0) 100%);
}
.planner-base__cell--matchday .planner-base__cell-time {
  color: #fafafa;
}
.planner-base__cell--matchday .planner-base__cell-header {
  color: #fafafa;
  font-size: 16px;
  margin-top: 7px;
}
.planner-base__cell--matchday .planner-base__cell-header:first-child {
  font-size: 24px;
  margin-top: 12px;
}
.planner-base__sessions {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.planner-base__add-button {
  display: block;
  height: 48px;
  background-color: transparent;
  border: 1px dashed #1f9f9fc0;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: #1f9f9f;
}
.planner-base__intensity-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.planner-base__intensity-table {
  display: block;
  width: 100%;
  border-collapse: collapse;
}
.planner-base__intensity-table th {
  box-sizing: border-box;
  background-color: #1f9f9f0f;
  border: 1px solid #1f9f9f;
  height: 68px;
  width: 185px;
}
.planner-base__intensity-table td {
  box-sizing: border-box;
  border: 1px solid #1f9f9f;
  height: 68px;
  width: 185px;
}
.planner-base__intensity-header-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 26px;
  font-weight: 500;
  color: #1f9f9f;
}
.planner-base__intensity {
  display: flex;
  width: 100%;
  height: 68px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.planner-base__intensity--1 {
  background: linear-gradient(180deg, rgba(14, 233, 141, 0.4) 0%, rgba(14, 233, 141, 0) 100%);
}
.planner-base__intensity--3 {
  background: linear-gradient(180deg, rgba(22, 232, 15, 0.4) 0%, rgba(22, 232, 15, 0) 100%);
}
.planner-base__intensity--4 {
  background: linear-gradient(180deg, rgba(152, 232, 15, 0.4) 0%, rgba(152, 232, 15, 0) 100%);
}
.planner-base__intensity--6 {
  background: linear-gradient(180deg, rgba(232, 189, 15, 0.4) 0%, rgba(232, 189, 15, 0) 100%);
}
.planner-base__intensity--9 {
  background: linear-gradient(180deg, rgba(232, 55, 15, 0.4) 0%, rgba(232, 55, 15, 0) 100%);
}
.planner-base__intensity--10 {
  background: linear-gradient(180deg, rgba(247, 0, 0, 0.4) 0%, rgba(247, 0, 0, 0) 100%);
}
.planner-base__intensity-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 21px;
  line-height: 26px;
  font-weight: 500;
  color: #1f9f9f;
}
.tactical-library {
  display: flex;
  padding: 48px 80px 48px 0;
  flex-direction: column;
}
.tactical-library__content-container {
  display: flex;
  flex-direction: column;
}
.tactical-library__library-container {
  margin-top: 42px;
}
.tactical-library__content-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tactical-library__form-container {
  position: relative;
}
.tactical-library__form-container::after {
  content: url(/images/search.svg?96621536b1932af05ea0bb3a427eeb42);
  position: absolute;
  top: 22px;
  right: 16px;
}
.tactical-library__library-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tactical-library__header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #1f9f9f;
}
.tactical-library__content-list {
  display: grid;
  padding: 0;
  margin: 0;
  margin-top: 16px;
  grid-template-columns: repeat(9, 1fr);
  gap: 16px;
  list-style-type: none;
}
.tactical-library__content-item--add {
  grid-column: 9/10;
  grid-row: 1/1;
}
.tactical-library__library-list {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 16px;
  list-style-type: none;
  padding: 0;
  margin-top: 16px;
}
.folder__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 158px;
  border-radius: 8px;
  border: 2px solid #283847;
  background-color: #021322;
  cursor: pointer;
}
.folder__container:hover {
  opacity: 0.64;
  cursor: default;
}
.folder__container--inactive {
  opacity: 0.2;
}
.folder__container--inactive:hover {
  opacity: 0.2;
}
.folder__name {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #fafafa;
  margin-top: 6px;
}
.folder__description {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 450;
  color: #f1f9f9ab;
}
.folder__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 158px;
  border-radius: 8px;
  border: 2px solid #283847;
  background-color: #021322;
  cursor: pointer;
}
.folder__add svg {
  fill: #1F9F9F;
}
.folder__add:hover svg {
  fill: #fafafa;
}
.folder__add-name {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #fafafa;
  margin-top: 12px;
}
.file__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0C1D2C52;
  min-height: 174px;
  cursor: pointer;
}
.file__container svg {
  fill: #3595FDCC;
}
.file__container:hover {
  background-color: #0C1D2CA3;
}
.file__container--session svg {
  fill: #FF7B29CC;
}
.file__container--gameplan svg {
  fill: #0EE98DCC;
}
.file__container--diagram svg {
  fill: #1F9F9F;
}
.file__container--practice svg {
  fill: #3595FDCC;
}
.file__menu-button {
  position: absolute;
  right: 0;
  top: 8px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.file__menu-button svg {
  fill: #1f9f9f;
}
.file__menu-button:hover svg {
  fill: #fafafa;
}
.file__name {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #fafafa;
  margin-top: 6px;
}
.file__description {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 450;
  color: #f1f9f9ab;
}
.input {
  position: relative;
  box-sizing: border-box;
  height: 56px;
  background-color: #031522;
  border: 1px solid #283847;
  border-radius: 4px;
  padding: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fafafa;
  outline: none;
  resize: none;
  overflow: hidden;
}
.input::-moz-placeholder {
  color: #283847;
}
.input::placeholder {
  color: #283847;
}
.input:hover {
  border-color: #1F9F9F;
}
.input:hover::-moz-placeholder {
  color: #fafafa;
}
.input:hover::placeholder {
  color: #fafafa;
}
.input:focus {
  color: #fafafa;
  border-color: #1F9F9F;
}
.input:active {
  color: #fafafa;
  border-color: #1F9F9F;
}
.create-practice__container {
  display: flex;
  flex-direction: column;
  width: 658px;
  margin-top: 40px;
}
.create-practice__header-button-container {
  display: flex;
  gap: 0 8px;
  align-items: center;
}
.create-practice__header {
  display: block;
  margin-right: auto;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #1f9f9f;
}
.create-practice__form {
  margin-top: 8px;
}
.create-practice__label {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.create-practice__label--players {
  width: 90px;
}
.create-practice__label--time {
  width: 128px;
}
.create-practice__label-content {
  margin: 0;
  margin-bottom: 8px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #1f9f9f;
}
.create-practice__lable-addiction {
  color: #283847;
}
.create-practice__label-content-description {
  font-size: 14px;
  color: #1f9f9faf;
}
.create-practice__time-container {
  display: flex;
  justify-content: stretch;
  gap: 0 16px;
}
.crate-practice__time-content {
  display: block;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fafafa;
  width: 150px;
  white-space: nowrap;
  margin-top: 50px;
  align-self: center;
}
.create-practice__submit-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  margin-top: 32px;
  margin-bottom: 16px;
  border: 1px dashed #1f9f9fc0;
}
body {
  font-family: "Circular Std", "Arial", sans-serif;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mt-1 {
  margin-top: 1em;
}
.text-center {
  text-align: center;
}
.main__web-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
@media (min-width: 650px) {
  .main__web-app {
    justify-content: center;
  }
}
.web-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #03101c;
  padding: 52px 6vw;
  width: 100%;
  max-width: 650px;
  flex-grow: 1;
}
@media (min-width: 650px) {
  .web-app {
    padding: 52px 145px;
    justify-content: center;
    flex-grow: 0;
    border-radius: 16px;
  }
}
@media (min-width: 1300px) {
  .web-app {
    display: grid;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    max-width: 1300px;
    min-height: 712px;
  }
}
.web-app--narrow {
  padding: 52px 145px;
  justify-content: center;
  flex-grow: 0;
  border-radius: 16px;
}
@media (min-width: 1300px) {
  .web-app--narrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 650px;
    min-height: 10px;
  }
}
.web-app__main-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 360px;
  min-width: 360px;
}
@media (min-width: 1300px) {
  .web-app__main-container {
    min-height: 712px;
    margin: 54px 145px 84px 145px;
  }
}
.web-app__main-container--message {
  align-items: center;
  justify-content: center;
}
.web-app--narrow .web-app__main-container {
  min-height: auto;
  margin: 0;
}
@media (min-width: 1300px) {
  .web-app__main-container--small {
    min-height: 350px;
    margin: 54px 145px 84px 145px;
  }
}
.web-app__logo {
  align-self: center;
  justify-content: center;
  display: flex;
}
.web-app__logo--left-logo {
  align-self: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.web-app__header-container {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
}
.web-app__header-container--message {
  margin-bottom: 20px;
}
.web-app__header-container--message-button {
  margin-bottom: 40px;
}
.web-app__header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
  color: #fafafa;
  text-align: center;
}
.web-app__header-status {
  margin-top: 27px;
}
.web-app__header-link {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #1f9f9f;
  text-decoration: none;
  border-bottom: 1px solid #1f9f9f;
  align-self: flex-end;
}
@media (min-width: 650px) {
  .web-app__header-link {
    font-size: 14px;
  }
}
.web-app__message-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 450;
  text-align: center;
  color: #fafafa;
  margin-bottom: 8px;
}
.web-app__message-content + .web-app__submit-button {
  margin-top: 30px;
}
.web-app__date {
  color: #1f9f9f;
}
.web-app__form {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.web-app__description-container {
  margin-top: 57px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.web-app__description-container--small-margin {
  margin-top: 9px;
  margin-bottom: 0;
}
.web-app__label-description {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fafafa;
}
.web-app__description-special {
  display: block;
  padding: 8px 12px;
  background-color: #1F9F9F14;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: #1f9f9f;
  text-align: center;
  border-radius: 2px;
}
.web-app__form-legend {
  margin-bottom: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  color: #fafafa;
}
.web-app__form-legend--30px-top {
  margin-top: 30px;
}
.web-app__form-legend--text {
  opacity: 0.6;
  line-height: 1.3em !important;
  margin-bottom: 0px;
}
@media (min-width: 650px) {
  .web-app__form-legend {
    font-size: 16px;
    line-height: 16px;
  }
}
.web-app__form-fieldset {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 0;
  border: none;
}
.web-app__radio-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 0;
}
.web-app__form-radio-label {
  flex-basis: 49%;
}
.web-app__radio-control-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 16px 2px;
  border-radius: 4px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  background-color: #051522;
  color: #ffffff;
  border: 2px solid #051522;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.web-app__radio-control-mark:hover {
  background-color: #1f9f9f49;
  transition: 0.1s linear;
}
.web-app__radio-input:checked + .web-app__radio-control-mark {
  background-color: #1f9f9f;
}
.form-2-cols {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.w-100 {
  width: 100%;
}
.form-2-cols .form-control {
  flex-basis: 49%;
}
.form-control {
  width: 100%;
}
.web-app__input {
  flex-basis: 100%;
  width: 100%;
  height: 56px;
  background-color: #031522;
  border: 1px solid #031522;
  border-radius: 4px;
  padding: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #fafafa;
  outline: none;
  resize: none;
  overflow: hidden;
}
.web-app__input::-moz-placeholder {
  color: #283847;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  -moz-transition: 0.1s linear;
  transition: 0.1s linear;
}
.web-app__input::placeholder {
  color: #283847;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  transition: 0.1s linear;
}
.web-app__input:hover {
  border-color: rgba(31, 159, 159, 0.5);
}
.web-app__input:focus {
  color: #fafafa;
  border-color: #1f9f9f;
}
.web-app__input:active {
  color: #fafafa;
  border-color: #1f9f9f;
}
@media (min-width: 650px) {
  .web-app__input {
    font-size: 16px;
  }
  .web-app__input::-moz-placeholder {
    font-size: 16px;
  }
  .web-app__input::placeholder {
    font-size: 16px;
  }
}
.web-app__input--wide-input {
  flex-basis: 100%;
}
.web-app__input--select {
  flex-basis: 100%;
  position: relative;
  color: #283847;
  text-align: start;
  cursor: pointer;
}
.web-app__input--select:hover {
  color: #fafafa81;
  transition: 0.1s linear;
}
.web-app__input--select::before {
  content: url(/images/narrow-bottom.svg?3ee459afbf7848e4a8a7fd88b275e39f);
  position: absolute;
  right: 16px;
  top: 16px;
}
.web-app__input--select:active::before {
  content: url(/images/narrow-bottom-active.svg?e7f0464c21632bd083883cc00bc422c1);
}
.web-app__input--select:focus::before {
  content: url(/images/narrow-bottom-active.svg?e7f0464c21632bd083883cc00bc422c1);
}
.web-app__input.error {
  border-color: #ef3054;
}
.web-app__select-container {
  display: flex;
  flex-basis: 49%;
}
.web-app__select-container--wide-input {
  flex-basis: 100%;
}
.web-app__select-container--open-menu .web-app__input {
  border-color: #1f9f9f;
  border-radius: 4px 4px 0 0;
  color: #fafafa;
}
.web-app__select-container--open-menu .web-app__input::before {
  content: url(/images/narrow-bottom-active.svg?e7f0464c21632bd083883cc00bc422c1);
}
.web-app__select-container--open-menu .web-app__select-list {
  display: flex;
}
.web-app__select-list {
  position: absolute;
  display: none;
  z-index: 9999;
  top: 54px;
  list-style-type: none;
  flex-direction: column;
  background-color: #051522;
  width: 100%;
  border: 1px solid #1f9f9f;
}
.web-app__select-item {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 450;
  color: #283847;
  cursor: pointer;
}
.web-app__select-item:hover {
  color: #1f9f9f;
  background-color: #071B2C;
}
.web-app__input-container {
  display: flex;
}
.web-app__checkbox-label {
  display: flex;
  align-items: center;
  margin-top: 40px;
}
.web-app__checkbox-label--no-margin {
  margin-top: 0;
}
.web-app__checkbox-label-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #fafafa;
}
@media (min-width: 650px) {
  .web-app__checkbox-label-content {
    font-size: 16px;
  }
}
.web-app__checkbox-label-link {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
  color: #1f9f9f;
  text-decoration: none;
}
.web-app__checkbox-control-mark {
  display: block;
  height: 18px;
  width: 18px;
  margin-right: 8px;
  background-color: #28384752;
  border-radius: 50%;
  cursor: pointer;
}
.web-app__checkbox-control-mark:hover {
  background-color: #1C375A7A;
}
.web-app__checkbox:checked + .web-app__checkbox-control-mark {
  position: relative;
  background-color: #1F9F9F;
}
.web-app__checkbox:checked + .web-app__checkbox-control-mark::after {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  top: 6px;
  right: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}
.web-app__submit-button-container {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1300px) {
  .web-app__submit-button-container {
    margin-top: auto;
  }
}
.web-app__submit-button-container--30px-top {
  margin-top: 30px;
}
.web-app__submit-button-container--40px-top {
  margin-top: 40px;
}
.web-app__submit-button-container--57px-top {
  margin-top: 57px;
}
.web-app__submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 49%;
  padding: 0 23px;
  min-height: 52px;
  border-radius: 8px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  background-color: #1f9f9f;
  color: #ffffff;
  border: 2px solid #1f9f9f;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: 0.1s linear;
}
@media (min-width: 650px) {
  .web-app__submit-button {
    font-size: 16px;
    padding: 0 16px;
  }
}
.web-app__submit-button:hover {
  background-color: #048484;
  border-color: #048484;
}
.web-app__submit-button:focus {
  background-color: #af9f9f;
  border-color: #fafafa;
}
.web-app__submit-button:active {
  background-color: #048484;
  border-color: #1f9f9f;
}
.web-app__submit-button:disabled {
  opacity: 0.3;
}
.web-app__submit-button:disabled:hover {
  background-color: #1f9f9f;
  cursor: auto;
  border-color: #1f9f9f;
}
.web-app__submit-button--dark {
  background-color: transparent;
  color: #1f9f9f;
  border: 2px solid #1f9f9f;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.web-app__submit-button--dark:hover {
  background-color: #1f9f9f49;
}
.web-app__submit-button--dark:focus {
  background-color: #0B161D;
}
.web-app__submit-button--dark:active {
  background-color: #1f9f9f49;
}
.web-app__submit-button--dark:disabled {
  opacity: 0.32;
}
.web-app__submit-button--dark:disabled:hover {
  background-color: transparent;
}
.web-app__submit-button.w-100 {
  flex-basis: 100%;
}
.web-app__radius-button {
  border-radius: 8px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  outline: none;
  border: 2px solid #283847;
  cursor: pointer;
}
.web-app__radius-button:hover {
  background-color: #1f9f9f29;
  transition: 0.1s linear;
}
.web-app__radius-button:active {
  border-color: #1f9f9f;
}
.web-app__radius-button--disabled {
  opacity: 0.3;
}
.web-app__radius-button--disabled:hover {
  border: 2px solid #283847;
  background-color: transparent;
}
.web-app__text {
  color: #FAFAFA;
  line-height: 1.5;
}
p.web-app__text {
  margin-bottom: 1em;
}
.web-app__table {
  margin-top: 20px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 300;
  color: white;
}
.web-app__table th {
  text-align: start;
  padding: 4px 0;
  padding-right: 10px;
  color: #FAFAFA;
  opacity: 0.7;
  font-weight: 300;
}
.web-app__table td {
  color: #fafafa;
  height: 22px;
  padding: 4px 0;
}
.web-app__table .web-app__payment-fail {
  color: #ef3054;
}
.web-app__table--three-column {
  margin-top: 4px;
}
.web-app__table--30px-top {
  margin-top: 30px;
}
.web-app__table--45px-top {
  margin-top: 45px;
}
.web-app__edit-link {
  margin-top: 20px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #1f9f9f;
}
.web-app__edit-link--40px-bottom {
  margin-bottom: 40px;
}
.web-app__option-menu-list {
  position: absolute;
  display: none;
  z-index: 1;
  right: 0;
  top: 48px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.web-app__option-menu-list--open {
  display: flex;
}
.web-app__option-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
}
.web-app__option-menu-item:hover {
  background-color: #1f9f9f20;
}
.web-app__option-menu-item:hover .web-app__option-menu-content {
  color: #fafafa;
}
.web-app__form-error {
  flex-basis: 100%;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  color: #ef3054;
  line-height: 1.3;
  margin-top: 4px;
  margin-bottom: 8px;
}
.web-app__option-menu-content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 400;
  color: #1f9f9f;
  border-radius: 4px;
  padding: 0 16px 0 16px;
  cursor: pointer;
  width: 100%;
  display: block;
  text-decoration: none;
  text-align: left;
}
.select2-container .select2-selection--single {
  flex-basis: 100%;
  width: 100%;
  height: 56px;
  background-color: #031522;
  border: 1px solid #031522;
  border-radius: 4px;
  padding: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #fafafa;
  outline: none;
  resize: none;
  overflow: hidden;
}
.select2-container .select2-selection--single:hover {
  border-color: rgba(31, 159, 159, 0.5);
}
.select2-container--open .select2-selection--single {
  border: 1px solid #1F9F9F;
}
.select2-container--open .select2-selection--single:hover {
  border: 1px solid #1F9F9F;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: white;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding-left: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #283847;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  background: url(/images/narrow-bottom-active.svg?e7f0464c21632bd083883cc00bc422c1) center center no-repeat;
  height: 8px;
  left: 50%;
  margin-left: -16px;
  margin-top: 8px;
  position: absolute;
  top: 50%;
  width: 12px;
  border: none;
  opacity: 0.2;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  background: url(/images/narrow-up.svg?59d50e6a9fcdbcfe2ff032256cb4e3dd) center center no-repeat;
  opacity: 1;
}
.select2-dropdown {
  background-color: #051522;
  border: 1px solid #1F9F9F;
  border-top: 1px solid #1F9F9F;
  border-radius: 0;
}
.select2-results__option--selectable {
  text-align: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #283847;
  line-height: 56px;
  height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}
.select2-container--default .select2-results__option--selected {
  background-color: #071B2C;
  color: #1F9F9F;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #071B2C;
  color: #1F9F9F;
}
.ui-widget {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fafafa;
  /*color:#283847;*/
}
.ui-widget.ui-widget-content {
  background-color: #051522;
  border: none;
  border-radius: 8px;
}
.ui-widget-header {
  background-color: transparent;
  border: none;
}
.ui-datepicker .ui-datepicker-title {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 40px;
  font-weight: 500;
  color: #fafafa;
}
.ui-datepicker th {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fafafa;
  /*color:#283847;*/
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background-color: #1F9F9F;
}
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border: none !important;
}
.ui-widget-content .ui-state-default {
  background-color: transparent;
  color: #283847;
  color: #fafafa;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.ui-widget-content .ui-state-default:hover {
  background-color: #1F9F9F;
  color: white;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled span {
  border: none !important;
}
.ui-widget-header .ui-state-hover {
  background-color: transparent;
  border: none;
}
.ui-datepicker span.ui-icon {
  width: 24px;
  height: 30px;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-next span.ui-icon {
  background: url(/images/arrow-right.svg?8265e0a001f4f1145a776d0ee6730a53) center center no-repeat;
  opacity: 0.3;
}
.ui-datepicker .ui-datepicker-prev span.ui-icon {
  background: url(/images/arrow-left.svg?77b5945080f6203eb796066b508c03c0) center center no-repeat;
  opacity: 0.3;
}
.ui-datepicker span.ui-icon:hover {
  opacity: 1;
}
#ui-datepicker-div {
  margin-top: 5px;
  width: 307px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.font-700 {
  font-weight: 700;
}
.text-default {
  color: #FAFAFA;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  opacity: 0.7;
}
.email-logo {
  background: url(/images/email-logo.png?b1f851106144a4163eac2c301ab2f40f) center center no-repeat;
}
.nicescroll-cursors {
  border: none !important;
  background-color: #1f9f9f !important;
}
.slider_container {
  display: none;
}
@media (min-width: 1300px) {
  .slider_container {
    display: flex;
    height: 100%;
    overflow: hidden;
    border-radius: 0 16px 16px 0;
  }
}
.slider {
  display: none;
}
@media (min-width: 1300px) {
  .slider {
    display: flex;
    flex-direction: column;
    background-size: 80%;
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
  }
}
.slider__image-container {
  max-height: 700px;
  height: 700px;
}
.slider__image-container img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}
.slider__gradient {
  position: absolute;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 200px;
  background: linear-gradient(0deg, #03101c 50%, rgba(217, 217, 217, 0) 75.44%);
}
.slider__image {
  display: block;
  border-radius: 0 16px 0 0;
  height: 700px;
  -o-object-fit: cover;
     object-fit: cover;
  clip: rect(0 650px 580px 0);
}
.slider__content-container {
  z-index: 9999;
  margin-top: -100px;
  margin-bottom: 20px;
  padding: 0 32px;
}
.slider__header {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #fafafa;
}
.slider__description {
  display: block;
  margin-top: 16px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: inherit;
  line-height: inherit;
  font-weight: 500;
  color: #1f9f9f;
  text-decoration: none;
}
.slider__button-container {
  margin-top: 24px;
  display: flex;
  gap: 16px;
}
.slider__button {
  transition: 0.1s linear;
  cursor: pointer;
}
.slider__buttons_wrapper {
  min-height: 162px;
  padding: 0 32px;
}
.swiper {
  flex-direction: column;
  display: flex;
}
.datepicker {
  z-index: 99999;
  top: -100px;
  left: 360px;
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 328px;
  background-color: #02111C;
  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.1), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
  border-radius: 8px;
}
.datepicker__buttons-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px 15px;
}
.datepicker__month-button {
  height: 30px;
  width: 40px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.datepicker__month-button svg {
  stroke: #667085;
  transition: 0.1s linear;
}
.datepicker__month-button:hover svg,
.datepicker__month-button:focus svg {
  stroke: #fafafac1;
}
.datepicker__month-button:active svg {
  stroke: #fafafa;
}
.datepicker__year-button {
  background-color: transparent;
  border: none;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 450;
  color: #344054;
}
.datepicker__days-list {
  display: grid;
  grid-gap: 4px 0;
  grid-template-columns: repeat(7, 1fr);
  list-style-type: none;
  padding: 10px 25px 20px;
}
.datepicker__days-content {
  display: block;
  height: 40px;
  width: 40px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 40px;
  font-weight: 450;
  color: #344054;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  transition: 0.05s linear;
}
.datepicker__days-content:hover,
.datepicker__days-content:focus {
  background-color: #1f9f9f;
  color: #fafafa;
}
.datepicker__days-content--active {
  background-color: #1f9f9f1d;
  color: #fafafa;
  cursor: default;
}
.datepicker__days-content--active:hover,
.datepicker__days-content--active:focus {
  background-color: #1f9f9f1d;
  color: #fafafa;
}
.datepicker__days-content--unactive {
  color: #2838474d;
}
.datepicker__days-content--unactive:hover,
.datepicker__days-content--unactive:focus {
  background-color: #1f9f9f;
}
.datepicker__days-content--days:hover,
.datepicker__days-content--days:focus {
  background-color: transparent;
  color: #344054;
  cursor: default;
}
.datepicker__submit-buttons-container {
  display: flex;
  gap: 0 8px;
  align-items: center;
  min-height: 76px;
  padding: 0 53px;
  background-color: #030F18;
}
.datepicker__submit-buttons-container .web-app__submit-button {
  min-height: 44px;
}
.dropdown {
  display: none;
  z-index: 10;
  position: absolute;
  box-sizing: border-box;
  width: 240px;
  left: 116px;
  top: 44px;
  flex-direction: column;
  list-style-type: none;
  background-color: #021322;
  padding: 8px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 8px 8px 16px 0 #1f9f9f14;
}
.dropdown--open {
  display: flex;
}
.dropdown--formation {
  top: 48px;
  left: 0;
  width: 213px;
}
.dropdown--formation .dropdown__content {
  color: #1f9f9f55;
}
.dropdown--league {
  top: 52px;
  left: -76px;
  width: 220px;
}
.dropdown--league .dropdown__item {
  padding-left: 32px;
}
.dropdown--team-performance {
  width: 80px;
  left: auto;
  right: -18px;
  top: 44px;
}
.dropdown--team-performance .dropdown__item:hover .dropdown__content {
  color: #fafafa;
}
.dropdown__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 0 8px;
}
.dropdown__item::after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  right: -25px;
}
.dropdown__item:hover,
.dropdown__item:focus {
  background-color: #1f9f9f55;
}
.dropdown__item:hover svg,
.dropdown__item:focus svg {
  fill: #f1f9f955;
}
.dropdown__item:hover .dropdown__content,
.dropdown__item:focus .dropdown__content {
  color: #1f9f9f;
}
.dropdown__item .player-team__position-menu-list {
  right: -223px;
  top: -1px;
}
.dropdown__item--active .dropdown__content {
  color: #1f9f9f;
}
.dropdown__item--edit .dropdown__content {
  color: #1f9f9f55;
}
.dropdown__item--edit svg {
  fill: #1f9f9f55;
  position: absolute;
  left: 7px;
}
.dropdown__content {
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 36px;
  font-weight: 450;
  color: #1f9f9f;
}
.competitions-form {
  display: flex;
  margin-top: 16px;
  width: 100%;
}
.competitions-form--two-rows {
  display: grid;
  grid-template-columns: 64px 392px;
  gap: 16px;
}
.competitions-form__fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  min-width: 100%;
}
.competitions-form__legend {
  margin-bottom: 8px;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #1f9f9f;
}
.player-performance {
  list-style-type: none;
}
.players-performance__header-list {
  display: grid;
  grid-template-columns: 64px 48px 194px repeat(4, 64px) 32px;
  gap: 0 8px;
  margin-bottom: 8px;
  margin-top: 16px;
}
.player-performance__header-content {
  justify-self: center;
  font-family: "Circular Std", "Arial", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #1f9f9f;
}
.player-performance__header-content:first-child {
  grid-column: 1/4;
  justify-self: start;
}
.player-performance__list {
  display: grid;
  grid-template-columns: 64px 48px 194px repeat(4, 64px) 32px;
  gap: 0 8px;
  margin-bottom: 8px;
}
.player-performance__input {
  height: 32px;
  width: 64px;
  border-radius: 4px;
  background-color: #031522;
  border: 1px solid #283847;
  color: #1f9f9f;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.player-performance__card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 32px;
  width: 64px;
  border-radius: 4px;
  background-color: #031522;
  border: 1px solid #283847;
}
.player-performance__card:active,
.player-performance__card:focus {
  border-color: #1f9f9f;
}
.player-performance__card:hover {
  border-color: #1f9f9f;
}
.player-performance__card:hover .player-performance__card-arrow--right {
  opacity: 1;
}
.player-performance__card--active-arrow:hover .player-performance__card-arrow {
  opacity: 1;
}
.player-performance__card-arrow {
  width: 21px;
  border: none;
  border-radius: 3px 0 0 3px;
  background-color: transparent;
  opacity: 0;
  transition: 0.1s linear;
}
.player-performance__card-arrow--right {
  border-radius: 0 3px 3px 0;
}
.player-performance__color-card {
  width: 12px;
  height: 18px;
  font-family: "Circular Std", "Arial", sans-serif;
  border-radius: 2px;
  align-self: center;
  justify-self: center;
  font-size: 14px;
  font-weight: 700;
  color: #1f9f9f;
  text-align: center;
}
.player-performance__color-card--one-green {
  background-color: #DDEA4A;
}
.player-performance__color-card--two-green {
  width: 22px;
}
.player-performance__color-card--two-green::before {
  content: "";
  width: 10px;
  height: 18px;
  background-color: #DDEA4A;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}
.player-performance__color-card--two-green::after {
  content: "";
  width: 10px;
  height: 18px;
  background-color: #DDEA4A;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 2px;
}
.player-performance__rating-button {
  height: 32px;
  width: 64px;
  border-width: 1px;
  color: #1f9f9f;
  font-size: 14px;
}
.player-performance__rating-button:hover {
  border-color: #1f9f9f;
}
.player-performance__edit-button {
  width: 32px;
  height: 32px;
  border: none;
  background-color: transparent;
}
.player-performance__edit-button:hover svg {
  fill: #fafafa;
  transition: 0.1s linear;
}
.player-performance__edit-button svg {
  fill: #1f9f9f;
}
.player-performance__edit-button--active svg {
  fill: #1DFF4EE5;
}
:root {
  --accent-color: #1F9F9F;
  --blur-accent-color: #088888;
  --grey-grey-300: #B4B4B4;
  --grey-grey-400: #8E8E8E;
  --grey-grey-600: #6A6A6A;
  --grey-grey-800: #363636;
  --rate-red: #FF2020;
  --blue-blue-800: #3D5061;
  --background-blue-100: #092D39;
  --background-blue-200: #061E31;
  --background-blue-300: #0F2434;
  --background-blue-400: #021322;
  --background-main: #041725;
  --transparent-light-blue: rgba(40, 56, 71, 0.34);
}
body {
  background-color: var(--background-main);
}
.web-app {
  background-color: var(--background-blue-200);
}
@media (min-width: 650px) {
  .web-app {
    padding: 40px 115px;
  }
  .web-app__main-container {
    width: 100%;
    max-width: 100%;
  }
}
.web-app__header-container {
  margin-top: 40px;
}
.web-app__header {
  width: 100%;
}
.web-app__header-steps {
  display: flex;
  gap: 6px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.web-app__header-step {
  border-radius: 8px;
  height: 6px;
  background: var(--background-blue-300, #0F2434);
  width: 100%;
}
.web-app__header-step__active {
  background: var(--blur-accent-color, #088888);
}
.web-app__description-container {
  margin-top: 0;
}
.web-app__label-description {
  color: #FAFAFA;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.square-button {
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  color: #6A6A6A;
  border: 1px solid #363636;
  border-radius: 8px;
}
.square-button svg {
  fill: none;
}
.square-button svg path {
  stroke: #8E8E8E;
}
.square-button:hover {
  border: 1px solid #8E8E8E;
  color: #FFFFFF;
  background-color: transparent;
}
.square-button:hover svg {
  fill: none;
}
.square-button:hover svg path {
  stroke: #fff;
}
.square-button:active {
  border: 1px solid #088888;
  color: #088888;
  background-color: transparent;
}
.square-button:active svg path {
  stroke: #088888;
}
.square-button:disabled {
  background-color: transparent;
}
.square-button:disabled svg {
  fill: #363636;
}
/* button - regular */
.ft_btn,
.radius-button {
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  color: var(--grey-grey-600);
  border: 1px solid var(--grey-grey-800);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.2s all;
  padding: 11px 10px;
  background-color: transparent;
  font-family: Circular Std;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  min-width: 120px;
}
.ft_btn:hover,
.radius-button:hover {
  border-color: var(--grey-grey-400);
  color: white;
  background-color: transparent;
}
.ft_btn:active,
.ft_btn.active,
.radius-button:active,
.radius-button.active {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background-color: transparent;
}
a.ft_btn {
  text-decoration: none;
}
.ft_btn svg path {
  /* fill: var(--grey-grey-400);*/
}
.ft_btn svg path,
.ft_btn svg line,
.ft_btn svg rect {
  stroke: var(--grey-grey-400);
}
.ft_btn:hover svg path,
.ft_btn:hover svg line,
.ft_btn:hover svg rect {
  stroke: white;
}
.ft_btn:active svg {
  path: var(--accent-color);
}
.ft_btn:active svg path,
.ft_btn:active svg line,
.ft_btn:active svg rect,
.ft_btn.active svg path,
.ft_btn.active svg line,
.ft_btn.active svg rect {
  stroke: var(--accent-color);
}
/* button - primary */
.ft_btn__primary,
.radius-button__primary {
  color: white;
  background: var(--accent-color);
  border-color: var(--accent-color);
  min-width: 120px;
}
.ft_btn__primary:disabled {
  opacity: 0.2;
}
.ft_btn__primary:hover,
.ft_btn__primary:hover {
  background: white;
  border-color: white;
  color: var(--accent-color);
}
.ft_btn__primary:active,
.radius-button__primary:active {
  background: var(--blur-accent-color);
  border-color: var(--blur-accent-color);
  color: white;
}
.ft_btn__primary.ft_btn__inactive,
.radius-button__primary.inactive {
  background: var(--background-blue-100);
  border-color: var(--background-blue-100);
  color: #061e31;
}
.ft_btn__l {
  width: 220px;
  max-width: 100%;
}
.ft_btn__primary svg path {
  stroke: #fff;
}
.ft_btn__primary:hover svg path {
  stroke: var(--blur-accent-color);
}
/* button secondary */
.ft_btn__secondary,
.radius-button__secondary,
.popup__close {
  border-color: var(--accent-color);
  background: transparent;
  color: var(--accent-color);
}
.ft_btn__secondary:hover,
.popup__close:hover {
  color: white;
  background: var(--accent-color);
  border-color: var(--accent-color);
}
/* button with down arrow */
.ft_dd_btn {
  background: url(/src/assets/img/arr-dwn.svg) 10px 50px no-repeat;
  background-position: right 16px center;
  text-align: left;
  justify-content: flex-start;
  padding-left: 16px;
  padding-right: 40px;
}
/* button with icon */
.ft_btn__icon {
  width: 44px;
  min-width: 44px;
}
/* button small height - 36px */
.ft_btn_sm {
  height: 36px;
  line-height: 36px;
}
/* Primary button */
.radius-button__primary {
  border: 1px solid #1F9F9F;
  background-color: transparent;
  color: #1F9F9F;
  font-size: 14px;
  font-weight: 700;
  transition: 0.2s all;
}
.radius-button__primary:hover {
  background-color: #088888;
  color: white;
}
/* Buttons switch */
.ft_switch_container {
  display: flex;
  width: 100%;
}
.ft_switch_container .ft_btn {
  flex: 1;
}
.ft_switch_container .ft_btn:first-child {
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: none;
}
.ft_switch_container .ft_btn.active:first-child {
  border-right-color: var(--accent-color);
  margin-right: -5px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.ft_switch_container .ft_btn:last-child {
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transition: none;
}
.ft_switch_container .ft_btn.active:last-child {
  border-left-color: var(--accent-color);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-left: -5px;
}
/* Input */
.ft_input,
.input {
  border: 1px solid var(--grey-grey-300, #B4B4B4);
  border-radius: 8px;
  padding: 8px 16px 8px 16px;
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  background-color: transparent;
}
.ft_input::-moz-placeholder, .input::-moz-placeholder {
  color: var(--grey-grey-300, #B4B4B4);
}
.ft_input::placeholder,
.input::placeholder {
  color: var(--grey-grey-300, #B4B4B4);
}
.ft_input:hover,
.input:hover {
  border: 1px solid #FFF;
}
.ft_input:focus,
.input:focus {
  border-color: var(--accent-color);
}
.ft_input:focus:hover,
.input:focus:hover {
  border-color: var(--accent-color);
}
.ft_input:-moz-read-only, .input:-moz-read-only, .ft_input:-moz-read-only:hover, .input:-moz-read-only:hover {
  border-color: var(--grey-grey-800);
}
.ft_input:disabled,
.input:disabled,
.ft_input:read-only,
.input:read-only,
.ft_input:read-only:hover,
.input:read-only:hover {
  border-color: var(--grey-grey-800);
}
.ft_input.error,
.input.error,
.has-error {
  border-color: var(--rate-red);
}
/* field - details */
.ft_form_field_details {
  padding-left: 16px;
  margin-top: 8px;
  font-size: 12px;
  font-family: Circular Std;
  font-weight: 700;
  color: var(--grey-grey-400);
}
/* Title (h1) */
.ft_title {
  color: #FFF;
  font-size: 32px;
  font-family: Circular Std;
  font-weight: 700;
}
.ft_subtitle {
  color: #FFF;
  font-size: 22px;
  font-family: Circular Std;
  font-weight: 500;
}
/* Files */
.file__container {
  background: var(--background-blue-400);
}
/* popup */
.popup__container {
  background-color: var(--background-main);
}
.popup__subtitle,
.popup__content {
  color: var(--grey-grey-600);
  margin-bottom: 0.5em;
  display: inline-block;
}
.popup__content {
  margin-bottom: 2em;
}
/* date picker */
.v3dp__body {
  padding: 0px 16px 16px 16px!important;
}
.v3dp__heading__center {
  border-radius: 8px;
  padding: 12px;
}
.v3dp__heading__button {
  border-radius: 8px;
}
.v3dp__heading {
  padding: 16px 16px 0px 16px!important;
  height: auto!important;
}
.v3dp__heading__center,
.v3dp__subheading {
  font-family: "Circular Std", "Arial", sans-serif;
}
.v3dp__elements button.selected span {
  background-color: var(--accent-color) !important;
}
/* drop downs */
.ft_dd_btn .dropdown__content {
  color: white;
  font-size: 14px;
  font-weight: 700;
}
.dropdown {
  border-radius: 8px;
  border: none;
  background: var(--background-main, #041725);
  width: 100%;
  padding: 0;
  padding-top: 4px;
  box-shadow: none;
}
.dropdown__item {
  padding: 10px 16px;
  border-left: 1px solid var(--grey-grey-300);
  border-right: 1px solid var(--grey-grey-300);
  border-radius: 0px;
}
.dropdown__item:first-child {
  border-top: 1px solid var(--grey-grey-300);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.dropdown__item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom: 1px solid var(--grey-grey-300);
}
.dropdown__item:hover {
  background: #061E31;
}
.dropdown__item:hover .dropdown__content,
.dropdown--formation .dropdown__content {
  color: white;
}
.dropdown__content,
.dropdown--formation .dropdown__content {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}
.dropdown__item svg path {
  fill: #b4b4b4;
}
.dropdown--formation-sub {
  right: calc(-100% - 8px);
}
.dropdown__item--color::before {
  width: 14px;
  height: 14px;
}
.dropdown--formation {
  top: 36px;
}
.dropdown__item.selected .dropdown__content,
.dropdown__item.selected .dropdown--formation .dropdown__content {
  color: var(--accent-color);
}
.dropdown__item.selected:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/src/assets/img/icons/check.svg") center center no-repeat;
}
.square-menu-button {
  border: 1px solid transparent;
  background-color: var(--background-blue-400);
}
.square-menu-button:hover {
  border-color: var(--accent-color);
  border-width: 1px;
}
.square-menu-button:active,
.square-menu-button.active {
  border-color: var(--accent-color);
  color: var(--grey-grey-300);
}
/*1*/
.square-menu-button--1 {
  background-color: rgba(255, 32, 32, 0.16);
  border-color: transparent;
  color: #FF2020;
}
.square-menu-button--1:hover {
  border-color: rgba(255, 32, 32, 0.32);
}
.square-menu-button--1:active,
.square-menu-button--1:focus {
  border: 1px solid #FF2020;
  color: #FF2020;
}
/*2*/
.square-menu-button--2 {
  background-color: rgba(255, 70, 29, 0.16);
  border-color: transparent;
  color: #ff461d;
}
.square-menu-button--2:hover {
  border-color: rgba(255, 70, 29, 0.32);
}
.square-menu-button--2:active,
.square-menu-button--2:focus {
  border: 1px solid #ff461d;
  color: #ff461d;
}
/*3*/
.square-menu-button--3 {
  background-color: rgba(255, 112, 29, 0.16);
  border-color: transparent;
  color: #ff701d;
}
.square-menu-button--3:hover {
  border-color: rgba(255, 112, 29, 0.32);
}
.square-menu-button--3:active,
.square-menu-button--3:focus {
  border: 1px solid #ff701d;
  color: #ff701d;
}
/*4*/
.square-menu-button--4 {
  background-color: rgba(255, 172, 29, 0.16);
  border-color: transparent;
  color: #ffac1d;
}
.square-menu-button--4:hover {
  border-color: rgba(255, 172, 29, 0.32);
}
.square-menu-button--4:active,
.square-menu-button--4:focus {
  border: 1px solid #ffac1d;
  color: #ffac1d;
}
/*5*/
.square-menu-button--5 {
  background-color: #FFD51D29;
  border-color: transparent;
  color: #FFD51DE5;
}
.square-menu-button--5:hover {
  border-color: rgba(255, 213, 29, 0.32);
}
.square-menu-button--5:active,
.square-menu-button--5:focus {
  border: 1px solid var(--rate-orange-100, #FFD51D);
  color: #FFD51DE5;
}
/*6*/
.square-menu-button--6 {
  background-color: rgba(244, 255, 29, 0.16);
  border-color: transparent;
  color: #f4ff1d;
}
.square-menu-button--6:hover {
  border-color: rgba(244, 255, 29, 0.32);
}
.square-menu-button--6:active,
.square-menu-button--6:focus {
  border: 1px solid #f4ff1d;
  color: #f4ff1d;
}
/*7*/
.square-menu-button--7 {
  background-color: rgba(196, 255, 29, 0.17);
  border-color: transparent;
  color: #c4ff1d;
}
.square-menu-button--7:hover {
  border-color: rgba(196, 255, 29, 0.32);
}
.square-menu-button--7:active,
.square-menu-button--7:focus {
  border: 1px solid #c4ff1d;
  color: #c4ff1d;
}
/*8*/
.square-menu-button--8 {
  background-color: rgba(156, 255, 29, 0.17);
  border-color: transparent;
  color: #9cff1d;
}
.square-menu-button--8:hover {
  border-color: rgba(156, 255, 29, 0.32);
}
.square-menu-button--8:active,
.square-menu-button--8:focus {
  border: 1px solid #9cff1d;
  color: #9cff1d;
}
/*9*/
.square-menu-button--9 {
  background-color: rgba(108, 250, 0, 0.17);
  border-color: transparent;
  color: #6cfa00;
}
.square-menu-button--9:hover {
  border-color: rgba(108, 250, 0, 0.32);
}
.square-menu-button--9:active,
.square-menu-button--9:focus {
  border: 1px solid #6cfa00;
  color: #6cfa00;
}
/*10*/
.square-menu-button--10 {
  background-color: rgba(29, 255, 78, 0.17);
  border-color: transparent;
  color: #1dff4e;
}
.square-menu-button--10:hover {
  border-color: rgba(29, 255, 78, 0.32);
}
.square-menu-button--10:active,
.square-menu-button--10:focus {
  border: 1px solid #1dff4e;
  color: #1dff4e;
}
.web-app__label-description,
.web-app__form-legend {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: center;
  width: 100%;
}
.web-app__form-radio-label {
  background-color: transparent;
}
.web-app__radio-control-mark {
  background-color: transparent;
  border: none;
  border-radius: 8px;
  border: 1px solid var(--grey-grey-400, #8E8E8E);
  color: var(--grey-grey-300, #B4B4B4);
  padding: 16px;
}
.web-app__radio-input:checked + .web-app__radio-control-mark {
  background-color: transparent;
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.web-app__radio-container {
  gap: 0;
}
.web-app__checkbox-label {
  margin-top: 30px;
}
.web-app__submit-button-container {
  margin-top: 50px;
}
.footer_login_link {
  color: var(--grey-grey-300, #B4B4B4);
  text-align: center;
  margin-top: 40px;
}
.select2-container .select2-selection--single {
  border: 1px solid var(--grey-grey-300, #B4B4B4);
  border-radius: 8px;
  padding: 8px 16px 8px 16px;
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--grey-grey-300, #B4B4B4);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-results__option--selectable {
  text-align: left;
  color: white;
  padding: 10px 16px;
  height: 36px;
  line-height: 16px;
  border-radius: 0px;
}
.select2-dropdown {
  border-color: var(--grey-grey-300, #B4B4B4);
  border-radius: 8px;
}
.web-app__form-error {
  padding-left: 16px;
  color: #FF2020;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.footer_login_link {
  font-size: 14px;
}
.mt-0 {
  margin-top: 0;
}
@media (min-width: 1300px) {
  .web-app {
    padding: 0;
  }
  .web-app__main-container {
    margin-top: 40px;
    margin-left: 115px;
    margin-bottom: 40px;
    width: 420px;
  }
  .web-app.web-app--narrow {
    padding: 40px;
  }
}
.slider__image-container {
  height: 100%;
  position: relative;
  min-height: 100%;
}
.slider__gradient {
  height: 500px;
}
.slider__content-container {
  margin-top: 0px;
  position: absolute;
  bottom: 100px;
}
.slider__header {
  font-size: 32px;
  line-height: 1.3;
  max-width: 470px;
}