/* [project]/app/globals.css [app-client] (css) */
@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 100;
  src: local(Cairo Thin), local(Cairo-Thin), url("/fonts/Cairo-Thin.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 200;
  src: local(Cairo ExtraLight), local(Cairo-ExtraLight), url("/fonts/Cairo-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 300;
  src: local(Cairo Light), local(Cairo-Light), url("/fonts/Cairo-Light.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 400;
  src: local(Cairo Regular), local(Cairo-Regular), url("/fonts/Cairo-Regular.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 500;
  src: local(Cairo Medium), local(Cairo-Medium), url("/fonts/Cairo-Medium.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 600;
  src: local(Cairo SemiBold), local(Cairo-SemiBold), url("/fonts/Cairo-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 700;
  src: local(Cairo Bold), local(Cairo-Bold), url("/fonts/Cairo-Bold.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 800;
  src: local(Cairo ExtraBold), local(Cairo-ExtraBold), url("/fonts/Cairo-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 900;
  src: local(Cairo Black), local(Cairo-Black), url("/fonts/Cairo-Black.ttf") format("truetype");
}

:root {
  --max-width: 1100px;
  --font-family: "Cairo", sans-serif;
  --main-color: #994e31;
  --main-bg-light-color: #994e311a;
  --box-shadow: 0 4px 12px #0000000d;
  --box-border: 1px solid #e5e7eb;
  --button-shadow: 0px 1px 2px 0px #0000000d;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  margin: 0;
  padding: 0;
}

textarea, button, input, textarea::placeholder, select {
  font-family: var(--font-family);
}

textarea {
  resize: none;
}

html, body {
  max-width: 100vw;
  font-family: var(--font-family);
  scrollbar-color: #ced3e1 #f1f1f1;
  transition: all .3s ease-in-out;
  overflow-x: hidden;
}

main {
  scroll-behavior: smooth !important;
}

button {
  cursor: pointer;
  background-color: #0000;
  border: none;
  outline: none;
  transition: all .3s ease-in-out;
}

img {
  object-fit: cover;
}

input {
  accent-color: var(--main-color);
  border: none;
  outline: none;
}

table {
  border: 1px solid #e9eaf3;
  border-radius: 10px;
  box-shadow: 0 2px 10px #195dc212;
  padding: 0 !important;
}

.fc-scroller table {
  border-radius: 0;
}

th {
  color: #000 !important;
  background-color: #0000 !important;
}

td {
  background-color: #fff;
}

.rdrDefinedRangesWrapper {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

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

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* [project]/app/styles/main.scss.css [app-client] (css) */
.not-found-container {
  text-align: center;
  background: url("https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80") center no-repeat;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

.not-found-container:before {
  content: "";
  z-index: 0;
  background: #000000b3;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.not-found-container .not-found-box {
  z-index: 100;
  background-color: #fff;
  border: 1px solid #0e4b7e;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  padding: 3rem 2rem;
  box-shadow: 0 0 20px #0e4b7e80;
}

.not-found-container .not-found-title {
  color: var(--main-color);
  margin-bottom: .5rem;
  font-size: 6rem;
  font-weight: bold;
}

.not-found-container .not-found-message {
  margin-bottom: .5rem;
  font-size: 1.75rem;
  font-weight: bold;
}

.not-found-container .not-found-submessage {
  color: gray;
  margin-bottom: 2rem;
  font-size: 1rem;
}

.layout {
  color: #000;
  background: #f8f9fc;
  max-height: 100dvh;
  overflow: hidden;
}

.layout .sidebar {
  border-right: 1px solid #e5e5e5;
  flex-direction: column;
  width: 200px;
  padding: 20px;
  display: flex;
}

.layout .sidebar .nav-links {
  flex-direction: column;
  gap: 5px;
  margin-bottom: 30px;
  display: flex;
}

.layout .sidebar .nav-links .nav-link {
  color: #030712;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: background .2s;
  display: flex;
}

.layout .sidebar .nav-links .nav-link:hover {
  background: var(--main-bg-light-color);
  color: var(--main-color);
}

.layout .sidebar .nav-links .nav-link.active {
  background: var(--main-bg-light-color);
  color: var(--main-color);
  font-weight: bold;
}

.layout .sidebar .nav-links .logout_btn {
  color: #fe5b5b;
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
}

.layout .sidebar .nav-links .logout_btn:hover {
  background: #ffdfdf;
}

.layout .sidebar .quick-access-title {
  color: #777;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}

.layout .sidebar .quick-access {
  margin: 0 0 30px;
  padding-left: 0;
  list-style: none;
}

.layout .main {
  height: calc(100dvh - 60px);
  margin-top: 60px;
  display: flex;
}

.layout .topbar {
  z-index: 200;
  border-bottom: 1px solid #e5e5e5;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 3rem;
  display: flex;
  position: fixed;
}

.layout .topbar .logo {
  justify-content: center;
  width: 50px;
  height: 40px;
  display: flex;
  position: relative;
}

.layout .topbar .select-team {
  color: var(--main-color);
  font-size: 18px;
  font-weight: bold;
}

.layout .topbar .notif_wrapper {
  position: relative;
}

.layout .topbar .notif_wrapper .icon, .layout .topbar .notif_wrapper .active_icon {
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  padding: .4rem;
  transition: background .2s;
  display: flex;
}

.layout .topbar .notif_wrapper .icon:hover, .layout .topbar .notif_wrapper .active_icon:hover {
  background-color: var(--main-bg-light-color);
}

.layout .topbar .notif_wrapper .active_icon {
  background-color: var(--main-bg-light-color);
  color: var(--main-color);
}

.layout .topbar .notif_wrapper .dropdown {
  background: #fff;
  border-radius: 10px;
  width: 280px;
  position: absolute;
  top: 120%;
  right: 0;
  overflow: hidden;
  box-shadow: 0 6px 20px #00000014;
}

.layout .topbar .notif_wrapper .dropdown .header {
  background: #f9fafb;
  border-bottom: 1px solid #eee;
  padding: .5rem 1rem;
  font-size: .95rem;
  font-weight: 600;
}

.layout .topbar .notif_wrapper .dropdown .list li {
  cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  display: flex;
}

.layout .topbar .notif_wrapper .dropdown .list li .iconWrapper {
  width: 25px;
  height: 25px;
  color: var(--main-color);
  background-color: var(--main-bg-light-color);
  border-radius: 100%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  display: flex;
}

.layout .topbar .notif_wrapper .dropdown .list li .text p {
  margin: 0;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.2;
}

.layout .topbar .notif_wrapper .dropdown .list li .text span {
  color: #888;
  margin-top: .25rem;
  font-size: .75rem;
  display: block;
}

.layout .topbar .profile-section {
  align-items: center;
  gap: 20px;
  display: flex;
}

.layout .topbar .profile-section .icon {
  cursor: pointer;
  color: #555;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  display: flex;
}

.layout .topbar .profile-section .icon:hover {
  color: var(--main-color);
}

.layout .topbar .profile-section .user {
  align-items: center;
  gap: 15px;
  display: flex;
}

.layout .topbar .profile-section .user .name {
  color: #030712;
  font-size: 15px;
  font-weight: bold;
}

.layout .topbar .profile-section .profile-img {
  border: 2px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.layout .content {
  width: calc(100% - 200px);
  max-height: 100vh;
  overflow-y: scroll;
}

.layout .container {
  padding: 24px;
}

.layout .dashboard, .layout .gameDetails, .layout .playerDetails, .layout .schedule, .layout .calendar-page, .layout .matches-results, .layout .squads_page {
  max-width: 1300px;
  margin: auto;
}

.layout .dashboard .header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.layout .dashboard .header h3 {
  color: #222;
  font-size: 24px;
  font-weight: bold;
}

.layout .dashboard .header .cta {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
  font-size: 15px;
  font-weight: bold;
  transition: background .3s;
  display: flex;
}

.layout .dashboard .header .cta:hover {
  background-color: var(--main-color);
}

.layout .dashboard .header .arrow {
  font-size: 14px;
}

.layout .dashboard .header .dropdown {
  position: relative;
}

.layout .dashboard .header .dropdown-menu {
  z-index: 10;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 160px;
  margin-top: 8px;
  padding: 0;
  position: absolute;
  top: 110%;
  right: 0;
  box-shadow: 0 4px 10px #0000001a;
}

.layout .dashboard .header .dropdown-item {
  cursor: pointer;
  color: #1f2937;
  padding: 5px 16px;
  font-size: .9rem;
  font-weight: 500;
  list-style: none;
}

.layout .dashboard .header .dropdown-item:hover {
  background-color: #f2f2f2;
}

.layout .dashboard .matches {
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 20px;
  display: grid;
}

.layout .dashboard .matches .match-card {
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: all .3s ease-in-out;
  overflow: hidden;
  box-shadow: 0 2px 4px #0000001a;
}

.layout .dashboard .matches .match-card:hover {
  border-color: var(--main-color);
}

.layout .dashboard .matches .match-header {
  background-color: var(--main-bg-light-color);
  border-bottom: 1px solid #e0e0e0;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  display: flex;
}

.layout .dashboard .matches .match-header .details {
  flex-direction: column;
  display: flex;
}

.layout .dashboard .matches .match-header .leauge {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
}

.layout .dashboard .matches .match-header .date {
  color: #222;
  font-weight: bold;
}

.layout .dashboard .matches .match-header .time {
  color: #555;
}

.layout .dashboard .matches .match-header .stadium {
  color: #666;
  font-size: .9em;
}

.layout .dashboard .matches .match-details {
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.layout .dashboard .matches .match-details .teams {
  align-items: center;
  gap: 15px;
  display: flex;
}

.layout .dashboard .matches .match-details .teams .team {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.layout .dashboard .matches .match-details .teams .team .logo {
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  position: relative;
  overflow: hidden;
}

.layout .dashboard .matches .match-details .teams .team .name {
  font-weight: bold;
}

.layout .dashboard .matches .match-details .flex-col {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.layout .dashboard .matches .match-details .referee, .layout .dashboard .matches .match-details .round, .layout .dashboard .matches .match-details .form {
  color: #444;
  margin-bottom: 4px;
  font-size: .9em;
}

.layout .dashboard .grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  display: grid;
}

.layout .dashboard .grid .prv-recent {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  color: #030712;
  border-radius: 10px;
  overflow: hidden;
}

.layout .dashboard .grid .prv-recent .previous-match .match-header {
  border-bottom: 1px solid #e0e0e0;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .match-header h2 {
  color: #333;
  margin: 0;
  font-size: 1.5rem;
}

.layout .dashboard .grid .prv-recent .previous-match .match-header button {
  cursor: pointer;
  background-color: #6b72801a;
  border: none;
  border-radius: 5px;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: bold;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section {
  background-color: #fff;
  flex-direction: column;
  gap: 20px;
  padding: 20px 35px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .date_location {
  color: #666;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .date_location div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .current-results {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .team {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .team .logo {
  border: var(--box-border);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  position: relative;
  overflow: hidden;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .team h3 {
  margin: 0 0 5px;
  font-size: 1.2rem;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .team.away-team .possession {
  color: #666;
  font-size: .9rem;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .score {
  margin: 0 20px;
  font-size: 2.5rem;
  font-weight: bold;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .stats div {
  background-color: #f3f4f6;
  border-radius: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .stats div span {
  color: #6b7280;
  font-size: 12px;
}

.layout .dashboard .grid .prv-recent .previous-match .score-section .analysis-link {
  text-align: end;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .recent-results {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .recent-results li {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  display: flex;
}

.layout .dashboard .grid .prv-recent .recent-results li .home-team, .layout .dashboard .grid .prv-recent .recent-results li .away-team {
  align-items: center;
  gap: 10px;
  font-weight: 600;
  display: flex;
}

.layout .dashboard .grid .prv-recent .recent-results li .home-team .logo, .layout .dashboard .grid .prv-recent .recent-results li .away-team .logo {
  border: var(--box-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.layout .dashboard .grid .injuries {
  border: var(--box-border);
  min-height: 400px;
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  padding: 1.5rem;
  display: flex;
}

.layout .dashboard .grid .injuries__header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .dashboard .grid .injuries__header h3 {
  align-items: center;
  gap: 5px;
  font-size: 1.25rem;
  display: flex;
}

.layout .dashboard .grid .injuries__header .injuries__count {
  cursor: default;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  padding: .2rem .7rem;
  font-size: .8rem;
  font-weight: bold;
}

.layout .dashboard .grid .injuries__card {
  border: var(--box-border);
  background: #f9fafb;
  border-radius: 10px;
  flex-direction: column;
  gap: .4rem;
  padding: .5rem 1rem;
  display: flex;
}

.layout .dashboard .grid .injuries__info {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.layout .dashboard .grid .injuries__info h4 {
  font-size: 1rem;
  font-weight: 600;
}

.layout .dashboard .grid .injuries__info p {
  color: #6b7280;
  align-items: center;
  gap: 5px;
  font-size: .85rem;
  display: flex;
}

.layout .dashboard .grid .injuries__info p span {
  justify-content: center;
  align-items: center;
  display: flex;
}

.layout .dashboard .grid .injuries__info p.outfor {
  color: #9ca3af;
  font-style: italic;
}

.layout .dashboard .grid .injuries__info .tag {
  border-radius: 5px;
  padding: .1rem .6rem;
  font-size: .75rem;
  font-weight: 650;
}

.layout .dashboard .grid .injuries__info .tag.minor {
  color: orange;
  background: #ffeac3;
}

.layout .dashboard .grid .injuries__info .tag.moderate {
  color: #991b1b;
  background: #fef2f2;
}

.layout .dashboard .grid .injuries__info .tag.major {
  color: #b91c1c;
  background: #fee2e2;
}

.layout .dashboard .grid .injuries__progress-bar {
  background: #e5e7eb;
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
}

.layout .dashboard .grid .injuries__progress-bar .injuries__progress-fill {
  background: var(--main-color);
  border-radius: 20px;
  height: 100%;
}

.layout .dashboard .grid .injuries__footer {
  color: #6b7280;
  justify-content: space-between;
  font-size: .8rem;
  display: flex;
}

.layout .dashboard .grid .injuries__footer .time {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .squad {
  border: var(--box-border);
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  gap: 20px;
  min-height: 400px;
  padding: 1.3rem;
  display: flex;
}

.layout .squad__tabs {
  gap: .5rem;
  display: flex;
}

.layout .squad__tabs button {
  color: #374151;
  cursor: pointer;
  background: #f3f4f6;
  border: 1px solid #0000;
  border-radius: 6px;
  padding: .3rem 1rem;
  font-weight: 650;
}

.layout .squad__tabs button.active {
  background: #fff;
  border-color: #d1d5db;
}

.layout .squad__list {
  flex-direction: column;
  gap: .5rem;
  max-height: 650px;
  display: flex;
  overflow-y: auto;
}

.layout .squad__player {
  background: #f9fafb;
  border-radius: 10px;
  justify-content: space-between;
  align-items: flex-start;
  padding: .55rem 1rem;
  display: flex;
}

.layout .squad__info {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.layout .squad__avatar {
  border: 2px solid var(--main-color);
  border-radius: 100%;
  width: 45px;
  height: 45px;
  position: relative;
}

.layout .squad__avatar .img {
  border-radius: 100%;
  width: 45px;
  height: 45px;
}

.layout .squad__avatar .player_nb {
  background: var(--main-color);
  color: #fff;
  z-index: 100;
  border-radius: 10px;
  padding: 0 6px;
  font-size: .7rem;
  position: absolute;
  bottom: -15px;
  left: 55%;
  transform: translateX(-50%);
}

.layout .squad__details h4 {
  font-size: .95rem;
  font-weight: 600;
}

.layout .squad__details p {
  color: #6b7280;
  font-size: .8rem;
}

.layout .squad__rating {
  color: #fff;
  border-radius: 8px;
  padding: 0 .6rem;
  font-size: .85rem;
  font-weight: bold;
}

.layout .appointments {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  padding: 1rem;
  display: flex;
}

.layout .appointments__header {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.layout .appointments__header .flex {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .appointments__header .appointments__date-add {
  align-items: center;
  gap: 10px;
  display: flex;
}

.layout .appointments__header .appointments__date-add input[type="date"] {
  border: var(--box-border);
  box-shadow: var(--button-shadow);
  background-color: #f8f9fc;
  border-radius: 6px;
  padding: .2rem;
  font-weight: 600;
}

.layout .appointments__header .appointments__date-add button {
  box-shadow: var(--button-shadow);
  border: var(--box-border);
  cursor: pointer;
  background: #f8f9fc;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: .2rem .8rem;
  font-weight: 600;
  display: flex;
}

.layout .appointments__header h3 {
  font-size: 1.25rem;
}

.layout .appointments__header .appointments__controls {
  background: #f1f1f1;
  border-radius: 6px;
  gap: .5rem;
  width: fit-content;
  padding: .2rem;
  display: flex;
}

.layout .appointments__header .appointments__controls button {
  color: #6b7280;
  cursor: pointer;
  background: #f1f1f1;
  border: none;
  border-radius: 6px;
  padding: .3rem .8rem;
  font-weight: 650;
}

.layout .appointments__header .appointments__controls button.active {
  color: #030712;
  background: #fff;
}

.layout .appointments__list {
  flex-direction: column;
  gap: 1rem;
  max-height: 500px;
  margin-top: 1rem;
  display: flex;
  overflow-y: auto;
}

.layout .appointments__item {
  background: #f9fafb;
  border-radius: 8px;
  justify-content: space-between;
  align-items: flex-start;
  padding: .75rem 1rem;
  display: flex;
  position: relative;
}

.layout .appointments__item.completed {
  color: #9ca3af;
  text-decoration: line-through;
}

.layout .appointments__item .appointments__icon {
  margin-right: .75rem;
  font-size: 1.2rem;
}

.layout .appointments__item .appointments__info {
  flex: 1;
}

.layout .appointments__item .appointments__info h4 {
  font-size: 1rem;
  font-weight: 600;
}

.layout .appointments__item .appointments__info .appointments__time {
  color: #6b7280;
  margin-top: .25rem;
  font-size: .875rem;
  display: block;
}

.layout .appointments__item .appointments__info p {
  color: #6b7280;
  margin-top: .25rem;
  font-size: .85rem;
}

.layout .appointments__item .appointments__tag {
  text-transform: capitalize;
  border-radius: 6px;
  padding: .2rem .6rem;
  font-size: .75rem;
  font-weight: 650;
}

.layout .appointments__item .appointments__tag.training {
  color: #065f46;
  background: #d1fae5;
}

.layout .appointments__item .appointments__tag.meeting {
  color: #0369a1;
  background: #e0f2fe;
}

.layout .appointments__item .appointments__tag.physio {
  color: #6b21a8;
  background: #ede9fe;
}

.layout .appointments__item .appointments__tag.travel {
  color: #92400e;
  background: #fef3c7;
}

.layout .appointments__footer {
  text-align: right;
  margin-top: 1rem;
}

.layout .appointments__footer a {
  color: #3b82f6;
  cursor: pointer;
  font-size: .85rem;
  font-weight: bold;
  text-decoration: underline;
}

.layout .gameDetails {
  color: #030712;
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .gameDetails header {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
}

.layout .gameDetails header div {
  align-items: center;
  gap: 5px;
  margin-bottom: .5rem;
  display: flex;
}

.layout .gameDetails header div b {
  font-size: .85rem;
}

.layout .gameDetails header div .gray {
  color: #6b728080;
}

.layout .gameDetails .grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  display: grid;
}

.layout .gameDetails .grid .match {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .gameDetails .grid .match__details, .layout .gameDetails .grid .match_standing {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 10px;
  min-height: 400px;
}

.layout .gameDetails .grid .match__details {
  padding: 1rem;
}

.layout .gameDetails .grid .match__details .time {
  background-color: var(--main-color);
  color: #fff;
  border-radius: 25px;
  width: fit-content;
  margin: auto;
  padding: 0 .4rem;
  font-size: .7rem;
}

.layout .gameDetails .grid .match__details .location {
  color: #6b7280;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: .85rem;
  display: flex;
}

.layout .gameDetails .grid .match__details .current-results {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .gameDetails .grid .match__details .team {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.layout .gameDetails .grid .match__details .team .logo {
  border: var(--box-border);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  position: relative;
  overflow: hidden;
}

.layout .gameDetails .grid .match__details .team h3 {
  margin: 0 0 5px;
  font-size: 1.2rem;
}

.layout .gameDetails .grid .match__details .team.away-team .possession {
  color: #666;
  font-size: .9rem;
}

.layout .gameDetails .grid .match__details .score {
  color: #03071280;
  margin: 0 20px;
  font-size: 2.5rem;
  font-weight: bold;
}

.layout .gameDetails .grid .match__details .score span {
  color: #22c55e;
}

.layout .gameDetails .grid .match__details .player_mvp {
  border: 1.5px solid #22c55e;
  border-radius: 5px;
  flex-direction: column;
  gap: 15px;
  margin-top: 1.5rem;
  padding: 1rem;
  display: flex;
}

.layout .gameDetails .grid .match__details .player_mvp h4 {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .gameDetails .grid .match__details .player_mvp .card {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .gameDetails .grid .match__details .player_mvp .card .flex-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.layout .gameDetails .grid .match__details .player_mvp .card .flex-row .avatar {
  border: 2px solid #22c55e;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
}

.layout .gameDetails .grid .match__details .player_mvp .card .flex-row .name div {
  color: #03071280;
  font-weight: 600;
  line-height: 1.2;
}

.layout .gameDetails .grid .match__details .player_mvp .card .rate {
  color: #fff;
  background-color: #22c55e;
  padding: 0 .2rem;
  font-size: .8rem;
  font-weight: bold;
}

.layout .gameDetails .grid .match__details .match-events-card {
  margin-top: 1.5rem;
}

.layout .gameDetails .grid .match__details .match-events-card__header {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.layout .gameDetails .grid .match__details .match-events-card__score {
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
}

.layout .gameDetails .grid .match__details .match-events-card__status {
  color: #fff;
  background-color: #22c55e;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
}

.layout .gameDetails .grid .match__details .match-events-card__additional-time {
  color: #666;
  font-size: 14px;
}

.layout .gameDetails .grid .match__details .match-events-card__events {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.layout .gameDetails .grid .match__details .match-events-card__event {
  border-bottom: 1px dashed #eee;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  display: flex;
}

.layout .gameDetails .grid .match__details .match-events-card__event:last-child {
  border-bottom: none;
}

.layout .gameDetails .grid .match__details .match-events-card__event--home {
  flex-direction: row;
}

.layout .gameDetails .grid .match__details .match-events-card__event--away {
  text-align: right;
  flex-direction: row-reverse;
}

.layout .gameDetails .grid .match__details .match-events-card__time {
  font-size: .8rem;
  font-weight: bold;
}

.layout .gameDetails .grid .match__details .match-events-card__details {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .gameDetails .grid .match__details .match-events-card__player {
  font-size: .9rem;
  font-weight: 500;
}

.layout .gameDetails .grid .match__details .match-events-card__icon {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.layout .gameDetails .grid .match__details .match-events-card__substitution {
  color: #03071280;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  display: flex;
}

.layout .gameDetails .grid .match__details .match-events-card__halftime {
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 10px;
}

.layout .gameDetails .grid .match__details .match-events-card__halftime-score {
  color: #666;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  display: flex;
}

.layout .gameDetails .grid .match__details .highest_rated_players {
  flex-direction: column;
  gap: 15px;
  margin-top: 1.5rem;
  display: flex;
}

.layout .gameDetails .grid .match__details .highest_rated_players h3 {
  text-align: center;
}

.layout .gameDetails .grid .match__details .highest_rated_players ul {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  display: grid;
}

.layout .gameDetails .grid .match__details .highest_rated_players ul li {
  border: var(--box-border);
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  padding: .3rem;
  display: flex;
}

.layout .gameDetails .grid .match__details .highest_rated_players ul li .flex-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.layout .gameDetails .grid .match__details .highest_rated_players ul li .flex-row .avatar {
  border: 2px solid #22c55e;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
}

.layout .gameDetails .grid .match__details .highest_rated_players ul li .flex-row h5 {
  font-weight: 500;
}

.layout .gameDetails .grid .match__details .highest_rated_players ul li .rate {
  color: #fff;
  background-color: #3b82f6;
  padding: 0 .2rem;
  font-size: .8rem;
  font-weight: bold;
}

.layout .gameDetails .grid .prematch-standings-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px #0000001a;
}

.layout .gameDetails .grid .prematch-standings-card__title {
  margin-bottom: 1épx;
  color: #333;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.layout .gameDetails .grid .prematch-standings-card__header {
  border-bottom: 1px solid #e0e0e0;
  grid-template-columns: 30px 1fr 120px 40px;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 0;
  font-weight: bold;
  display: grid;
}

.layout .gameDetails .grid .prematch-standings-card__list {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.layout .gameDetails .grid .prematch-standings-card__row {
  border-bottom: 1px solid #f5f5f5;
  grid-template-columns: 30px 1fr 120px 40px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  display: grid;
}

.layout .gameDetails .grid .prematch-standings-card__row:last-child {
  border-bottom: none;
}

.layout .gameDetails .grid .prematch-standings-card__position {
  font-weight: bold;
}

.layout .gameDetails .grid .prematch-standings-card__team {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .85rem;
  font-weight: 500;
  overflow: hidden;
}

.layout .gameDetails .grid .prematch-standings-card__form {
  gap: 4px;
  display: flex;
}

.layout .gameDetails .grid .prematch-standings-card__result {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
}

.layout .gameDetails .grid .prematch-standings-card__result--w {
  color: #fff;
  background-color: #22c55e;
}

.layout .gameDetails .grid .prematch-standings-card__result--l {
  color: #fff;
  background-color: #f44336;
}

.layout .gameDetails .grid .prematch-standings-card__result--d {
  color: #fff;
  background-color: #ff9800;
}

.layout .gameDetails .grid .prematch-standings-card__points {
  text-align: center;
  font-weight: bold;
}

.layout .gameDetails .grid .stats, .layout .gameDetails .grid .pitch, .layout .gameDetails .grid .team-lineup-container {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 10px;
  min-height: 400px;
  padding: 1rem;
}

.layout .gameDetails .grid .match-stats-card {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card .switchers {
  background-color: #f3f4f6;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  padding: .2rem;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card .switchers button {
  cursor: pointer;
  color: #374151;
  border: none;
  border-radius: 6px;
  padding: 0 1rem;
  font-weight: 650;
}

.layout .gameDetails .grid .match-stats-card .switchers button.active {
  background-color: var(--main-color);
  color: #fff;
}

.layout .gameDetails .grid .match-stats-card__title {
  font-size: 20px;
  font-weight: 650;
}

.layout .gameDetails .grid .match-stats-card__stats {
  flex-direction: column;
  gap: 20px;
  margin-top: .5rem;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card__stat {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.layout .gameDetails .grid .match-stats-card__home-value, .layout .gameDetails .grid .match-stats-card__away-value {
  min-width: 40px;
  font-size: 14px;
  font-weight: 600;
}

.layout .gameDetails .grid .match-stats-card__home-value {
  text-align: start;
}

.layout .gameDetails .grid .match-stats-card__away-value {
  text-align: end;
}

.layout .gameDetails .grid .match-stats-card__progress-container {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card__progress-bar {
  background-color: #f0f0f0;
  border-radius: 4px;
  height: 8px;
  display: flex;
  overflow: hidden;
}

.layout .gameDetails .grid .match-stats-card .full_bar {
  border-radius: 25px;
  justify-content: space-between;
  height: 15px;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card__progress-home {
  background-color: var(--main-color);
  border-radius: 10px;
  height: 100%;
}

.layout .gameDetails .grid .match-stats-card .percent_bg_home, .layout .gameDetails .grid .match-stats-card .percent_bg_away {
  color: #fff;
  border-radius: 25px;
  padding: .1rem 1rem;
  font-size: .85rem;
}

.layout .gameDetails .grid .match-stats-card .percent_bg_home {
  background-color: var(--main-color);
  width: fit-content;
}

.layout .gameDetails .grid .match-stats-card .percent_bg_away {
  float: right;
  background-color: #229898;
  width: fit-content;
}

.layout .gameDetails .grid .match-stats-card__progress-away {
  background-color: #229898;
  border-radius: 10px;
  height: 100%;
}

.layout .gameDetails .grid .match-stats-card__stat-name {
  text-align: center;
  font-size: 14px;
  font-weight: 650;
}

.layout .gameDetails .grid .match-stats-card .player-stats {
  margin-top: 1rem;
}

.layout .gameDetails .grid .match-stats-card .player-stats .duels {
  flex-direction: column;
  gap: 2rem;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card .player-stats .duels .duel-row {
  justify-content: space-between;
  align-items: center;
  max-width: 500px;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card .player-stats .duels .duel-label {
  text-align: center;
  flex-shrink: 0;
  width: 100px;
  font-weight: bold;
}

.layout .gameDetails .grid .match-stats-card .player-stats .defending {
  margin-top: 2rem;
}

.layout .gameDetails .grid .match-stats-card .player-stats .defending h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.layout .gameDetails .grid .match-stats-card .player-stats .defending .tackles {
  justify-content: center;
  align-items: center;
  gap: 2rem;
  display: flex;
}

.layout .gameDetails .grid .match-stats-card .circular-stat {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 112px;
  display: flex;
  position: relative;
}

.layout .gameDetails .grid .match-stats-card .circular-stat .circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.layout .gameDetails .grid .match-stats-card .circular-stat .bg {
  fill: none;
  stroke: #e5e5e5;
  stroke-width: 4px;
}

.layout .gameDetails .grid .match-stats-card .circular-stat .progress {
  fill: none;
  stroke-width: 4px;
  stroke-linecap: round;
}

.layout .gameDetails .grid .match-stats-card .circular-stat .brown {
  stroke: var(--main-color);
}

.layout .gameDetails .grid .match-stats-card .circular-stat .teal {
  stroke: #429a9d;
}

.layout .gameDetails .grid .match-stats-card .circular-stat .percent {
  font-size: .9rem;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layout .gameDetails .grid .match-stats-card .circular-stat .value {
  font-size: .7rem;
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layout .gameDetails .grid .match-stats-card .circular-stat .label {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: bold;
}

.layout .gameDetails .grid .match-stats-card .small {
  width: 57px;
  height: 57px;
}

.layout .gameDetails .grid .field {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .gameDetails .grid .pitch {
  border: 2px solid #e5e7eb;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.layout .gameDetails .grid .pitch .team {
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  display: flex;
}

.layout .gameDetails .grid .pitch .team.reverse {
  flex-direction: column-reverse;
}

.layout .gameDetails .grid .pitch .center-line {
  background: #bbb;
  width: 100%;
  height: 1px;
  margin: .3rem 0;
}

.layout .gameDetails .grid .pitch .line {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  display: flex;
}

.layout .gameDetails .grid .pitch .player {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: .75rem;
  display: flex;
}

.layout .gameDetails .grid .pitch .player .player-circle {
  background: #eee;
  border: 1px solid #994e31;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: relative;
}

.layout .gameDetails .grid .pitch .player .player-circle .avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.layout .gameDetails .grid .pitch .player .player-circle .rating {
  color: #fff;
  background: #22c55e;
  border-radius: 2px;
  padding: 1px 4px;
  font-size: .6rem;
  font-weight: bold;
  position: absolute;
  bottom: -5px;
  right: 0;
}

.layout .gameDetails .grid .pitch .player .player-circle .captain {
  color: #fff;
  background: #3cb371;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: .6rem;
  position: absolute;
  top: -6px;
  left: -6px;
}

.layout .gameDetails .grid .pitch .player .player-circle .yellow-card {
  background: #ff0;
  border: 1px solid #ccc;
  width: 12px;
  height: 16px;
  position: absolute;
  top: -6px;
  right: -6px;
  transform: rotate(-15deg);
}

.layout .gameDetails .grid .pitch .player .player-info {
  align-items: center;
  gap: 2px;
  display: flex;
}

.layout .gameDetails .grid .pitch .player .player-info .number {
  font-weight: bold;
}

.layout .gameDetails .grid .pitch .player .player-info .name {
  width: max-content;
  font-size: .7rem;
  display: block;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .btns {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  gap: .5rem;
  width: fit-content;
  margin: auto;
  padding: .2rem;
  display: flex;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .btns button {
  color: #6b7280;
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 6px;
  padding: .3rem .8rem;
  font-weight: 650;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .btns button.active {
  color: #030712;
  background: #f3f4f6;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .team-name {
  color: #1a3e72;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 24px;
  font-weight: bold;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .opponent-name {
  color: #9b1d20;
  text-transform: uppercase;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .avatar {
  border: 1px solid #03071226;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .manager-info {
  align-items: center;
  gap: 15px;
  line-height: 1.3;
  display: flex;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .manager-info .manager-name {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .manager-info .manager-title {
  color: #666;
  font-size: 14px;
  font-style: italic;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .player-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .player-list .player-item {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  display: flex;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .player-list .player-item .flex {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .player-list .player-item:last-child {
  border-bottom: none;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .player-list .player-item .player-name {
  flex-grow: 1;
}

.layout .gameDetails .grid .team-lineup-container .team-lineup .player-list .player-item .notes {
  color: #fff;
  background-color: #22c55e;
  padding: 0 .2rem;
  font-size: .8rem;
  font-weight: bold;
}

.layout .playerDetails {
  color: #030712;
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .playerDetails header {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
}

.layout .playerDetails header .cta {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.layout .playerDetails header .cta .path {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .playerDetails header .cta .path span {
  font-weight: 650;
}

.layout .playerDetails header .cta .path span:first-child {
  color: var(--main-color);
}

.layout .playerDetails header .cta button {
  color: #030712;
  border: var(--box-border);
  box-shadow: var(--button-shadow);
  background-color: #f8f9fc;
  border-radius: 5px;
  align-items: center;
  gap: 5px;
  padding: .3rem 1rem;
  font-weight: bold;
  display: flex;
}

.layout .playerDetails header .cta button.active {
  background-color: var(--main-color);
  color: #fff;
}

.layout .playerDetails header .cta .dropdown {
  display: inline-block;
  position: relative;
}

.layout .playerDetails header .cta .dropdown__menu {
  z-index: 2;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: 240px;
  margin-top: 10px;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  right: 0;
  box-shadow: 0 4px 10px #0000000d;
}

.layout .playerDetails header .cta .dropdown__section {
  padding: 8px 16px;
}

.layout .playerDetails header .cta .dropdown__section:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.layout .playerDetails header .cta .dropdown__header {
  color: #374151;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.layout .playerDetails header .cta .dropdown__item {
  color: #1f2937;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.layout .playerDetails header .cta .dropdown__item:hover {
  color: var(--main-color);
}

.layout .playerDetails header .cta .dropdown__item svg {
  stroke: var(--main-color);
}

.layout .playerDetails header .player {
  align-items: center;
  gap: 20px;
  display: flex;
}

.layout .playerDetails header .player .avatar {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.layout .playerDetails header .player .name {
  align-items: center;
  gap: 15px;
  display: inline-flex;
}

.layout .playerDetails header .player .name .status {
  color: #22c55e;
  background-color: #22c55e1a;
  border-radius: 5px;
  align-items: center;
  gap: 5px;
  padding: .3rem .5rem;
  font-size: .9rem;
  display: flex;
}

.layout .playerDetails header .player .details {
  align-items: center;
  gap: 40px;
  margin-top: .5rem;
  display: flex;
}

.layout .playerDetails header .player .details div {
  flex-direction: column;
  gap: 5px;
  line-height: 1.3;
  display: flex;
}

.layout .playerDetails header .player .details div span {
  text-transform: uppercase;
  color: #03071280;
  font-size: .8rem;
  font-weight: 650;
}

.layout .playerDetails .tabs {
  border: var(--box-border);
  background-color: #fff;
  border-radius: 9px;
  gap: .5rem;
  width: fit-content;
  padding: .3rem;
  display: flex;
}

.layout .playerDetails .tabs button {
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  padding: .2rem 1rem;
  font-weight: 650;
}

.layout .playerDetails .tabs button.active {
  background: var(--main-color);
  color: #fff;
}

.layout .playerDetails .grid {
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.layout .playerDetails .results_stats {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .playerDetails .match-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.layout .playerDetails .match-list .match {
  background-color: #fff;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  display: flex;
  box-shadow: 0 1px 4px #0000001a;
}

.layout .playerDetails .match-list .match .team {
  align-items: center;
  gap: 8px;
  min-width: 140px;
  display: flex;
}

.layout .playerDetails .match-list .match .team .logo {
  object-fit: contain;
  border: var(--box-border);
  border-radius: 100%;
  width: 28px;
  height: 28px;
  position: relative;
  overflow: hidden;
}

.layout .playerDetails .match-list .match .team span {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.layout .playerDetails .match-list .match .score {
  color: #222;
  font-size: 16px;
  font-weight: bold;
}

.layout .playerDetails .match-list .match .minute {
  color: #555;
  text-align: center;
  min-width: 40px;
  font-size: 14px;
}

.layout .playerDetails .match-list .match .rating {
  color: #fff;
  text-align: center;
  border-radius: 2px;
  min-width: 35px;
  padding: 2px;
  font-size: 12px;
  font-weight: 650;
}

.layout .playerDetails .match-list .match .rating.green {
  background-color: #22c55e;
}

.layout .playerDetails .match-list .match .rating.blue {
  background-color: #3b82f6;
}

.layout .playerDetails .match-stats-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 0 0 1px #e5e7eb;
}

.layout .playerDetails .match-stats-card .header {
  color: #111827;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
  display: flex;
}

.layout .playerDetails .match-stats-card .header .chevron {
  color: #6b7280;
  transform: rotate(180deg);
}

.layout .playerDetails .match-stats-card .stats-list {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.layout .playerDetails .match-stats-card .stats-list .stat-row {
  color: #1f2937;
  justify-content: space-between;
  font-size: 14px;
  display: flex;
}

.layout .playerDetails .match-stats-card .stats-list .stat-row .label {
  color: #374151;
  font-weight: 600;
}

.layout .playerDetails .match-stats-card .stats-list .stat-row .value {
  color: #111827;
  font-weight: 600;
}

.layout .playerDetails .flex-1 {
  flex-direction: column;
  flex: 1;
  gap: 20px;
  display: flex;
}

.layout .playerDetails .flex-col {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .playerDetails .player-summary {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 12px;
  gap: 24px;
  padding: 16px;
  display: flex;
}

.layout .playerDetails .player-summary .left {
  flex-direction: column;
  gap: 24px;
  width: 40%;
  display: flex;
}

.layout .playerDetails .player-summary .left .flex {
  align-items: center;
  gap: 20px;
  display: flex;
}

.layout .playerDetails .player-summary .left .traits .title {
  margin-bottom: 4px;
  font-weight: bold;
}

.layout .playerDetails .player-summary .left .traits .title.green {
  color: #22c55e;
}

.layout .playerDetails .player-summary .left .traits .title.red {
  color: #d93025;
  margin-top: 16px;
}

.layout .playerDetails .player-summary .left .traits p {
  color: #222;
  margin: 0;
  font-size: 14px;
}

.layout .playerDetails .player-summary .left .position .pitch {
  background-image: url("/clubsImages/field_analitics_bg.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid #1b1b1b;
  border-radius: 6px;
  width: 120px;
  height: 180px;
  position: relative;
}

.layout .playerDetails .player-summary .left .leagues {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.layout .playerDetails .player-summary .left .leagues .item {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.layout .playerDetails .player-summary .left .leagues .item .league {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .playerDetails .player-summary .left .leagues .item .name {
  flex-direction: column;
  gap: 5px;
  line-height: 1;
  display: flex;
}

.layout .playerDetails .player-summary .left .leagues .item span {
  color: #222;
  font-size: 14px;
}

.layout .playerDetails .player-summary .left .leagues .item span.apps {
  color: #03071280;
  font-size: 13px;
}

.layout .playerDetails .player-summary .left .leagues .item span.rating {
  color: #fff;
  border-radius: 2px;
  padding: 2px;
  font-size: 13px;
  font-weight: bold;
}

.layout .playerDetails .player-summary .left .leagues .item span.rating.green-bg {
  background: #22c55e;
}

.layout .playerDetails .player-summary .right {
  flex-direction: column;
  gap: 16px;
  width: 60%;
  display: flex;
}

.layout .playerDetails .player-summary .right .header {
  color: #222;
  justify-content: space-between;
  margin-bottom: 2rem;
  font-size: 14px;
  font-weight: bold;
  display: flex;
}

.layout .playerDetails .player-summary .right .header .avg {
  color: #fff;
  background: #22c55e;
  border-radius: 4px;
  padding: 2px;
  font-size: 13px;
  font-weight: 600;
}

.layout .playerDetails .player-summary .right .graph {
  align-items: flex-end;
  gap: 8px;
  height: 100px;
  display: flex;
}

.layout .playerDetails .player-summary .right .graph .bar {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
}

.layout .playerDetails .player-summary .right .graph .bar .rating-bar {
  border-radius: 3px;
  width: 16px;
  transition: height .3s;
}

.layout .playerDetails .player-summary .right .graph .bar .rating-bar.bar-green {
  background: #22c55e;
}

.layout .playerDetails .player-summary .right .graph .bar .rating-bar.bar-yellow {
  background: orange;
}

.layout .playerDetails .player-summary .right .graph .bar .rating-bar.bar-red {
  background: #fb5145;
}

.layout .playerDetails .player-summary .right .graph .bar span {
  color: #222;
  font-size: 12px;
}

.layout .playerDetails .player-summary .right .legend {
  color: #444;
  justify-content: space-between;
  font-size: 12px;
  display: flex;
}

.layout .playerDetails .player-summary .right .legend .dot {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  display: inline-block;
}

.layout .playerDetails .player-summary .right .legend .dot.swap {
  background: #ccc;
}

.layout .playerDetails .player-summary .right .legend .dot.injured {
  background: #f87171;
}

.layout .playerDetails .video-list {
  background-color: #fff;
  border-radius: 8px;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  display: flex;
  box-shadow: 0 2px 4px #0000001a;
}

.layout .playerDetails .video-list__title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .playerDetails .video-list__title button {
  box-shadow: var(--button-shadow);
  border: var(--box-border);
  cursor: pointer;
  background: #f8f9fc;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: .2rem .8rem;
  font-weight: 600;
  display: flex;
}

.layout .playerDetails .video-list__items {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.layout .playerDetails .video-list__item {
  box-shadow: var(--button-shadow);
  border: var(--box-border);
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}

.layout .playerDetails .video-list__item-image {
  aspect-ratio: 1;
  background-image: url("../media/football_field_bg.a89dfc6d.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  height: 100px;
  position: relative;
}

.layout .playerDetails .video-list__item-duration {
  color: #fff;
  background-color: #000;
  border-radius: 5px;
  padding: 0 .2rem;
  font-size: .8rem;
  position: absolute;
  bottom: .5rem;
  right: .5rem;
}

.layout .playerDetails .video-list__item-content {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.layout .playerDetails .video-list__item-title {
  color: #444;
  font-weight: 500;
}

.layout .playerDetails .video-list__item-link {
  background-color: var(--main-color);
  color: #fff;
  border-radius: 10px;
  padding: .3rem 1rem;
}

.layout .playerDetails .injury-history, .layout .playerDetails .phisical-test, .layout .playerDetails .fitness-analysis {
  border: var(--box-border);
  background-color: #fff;
  border-radius: 8px;
  flex-direction: column;
  gap: 20px;
  min-width: 432px;
  padding: 20px;
  display: flex;
  box-shadow: 0 2px 4px #0000001a;
}

.layout .playerDetails .injury-history ul {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .playerDetails .injury-history ul li {
  border: var(--box-border);
  border-inline-start: 3px solid #0000;
  border-radius: 5px;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  display: flex;
}

.layout .playerDetails .injury-history ul li .header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .playerDetails .injury-history ul li .header .status {
  border: var(--box-border);
  border-radius: 5px;
  padding: 0 .5rem;
  font-size: .8rem;
  font-weight: bold;
}

.layout .playerDetails .injury-history ul li .header .danger {
  color: red;
  background-color: #ef44441a;
}

.layout .playerDetails .injury-history ul li .header .low {
  color: #22c55e;
  background-color: #22c55e1a;
}

.layout .playerDetails .injury-history ul li .header .medium {
  color: #f97316;
  background-color: #f973161a;
}

.layout .playerDetails .injury-history ul li .date, .layout .playerDetails .injury-history ul li .task {
  color: #6b7280;
  align-items: center;
  gap: 5px;
  font-size: .9rem;
  display: flex;
}

.layout .playerDetails .injury-history ul .dn {
  border-inline-start-color: red;
}

.layout .playerDetails .injury-history ul .lo {
  border-inline-start-color: #22c55e;
}

.layout .playerDetails .injury-history ul .me {
  border-inline-start-color: #f97316;
}

.layout .playerDetails .phisical-test ul {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  display: grid;
}

.layout .playerDetails .phisical-test ul li {
  border: var(--box-border);
  border-radius: 5px;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  display: flex;
}

.layout .playerDetails .phisical-test ul li .title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .playerDetails .phisical-test ul li .title span {
  color: gray;
}

.layout .playerDetails .phisical-test ul li .title button {
  color: var(--main-color);
  justify-content: center;
  align-items: center;
  display: flex;
}

.layout .playerDetails .phisical-test ul li .value {
  font-weight: 650;
}

.layout .playerDetails .fitness-analysis .fitness-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .playerDetails .fitness-analysis .fitness-header h2 {
  font-size: 1.25rem;
  font-weight: bold;
}

.layout .playerDetails .fitness-analysis .fitness-header .fitness-meta {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.layout .playerDetails .fitness-analysis .fitness-header .fitness-meta span {
  color: #6b7280;
  font-size: .9rem;
}

.layout .playerDetails .fitness-analysis .fitness-header .fitness-meta .view-report {
  border: var(--box-border);
  cursor: pointer;
  background: #f8f9fc;
  border-radius: 6px;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem;
  font-size: .85rem;
  font-weight: 650;
  display: flex;
}

.layout .playerDetails .fitness-analysis .fitness-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 0 0 1px #eee;
}

.layout .playerDetails .fitness-analysis .fitness-card .card-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  display: flex;
}

.layout .playerDetails .fitness-analysis .fitness-card .card-header h3 {
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  display: flex;
}

.layout .playerDetails .fitness-analysis .fitness-card .card-header .level-badge {
  border-radius: 6px;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: bold;
}

.layout .playerDetails .fitness-analysis .fitness-card .card-header .level-badge.level-average {
  color: #d97706;
  background: #fff4e5;
}

.layout .playerDetails .fitness-analysis .fitness-card .card-header .level-badge.level-excellent {
  color: #10b981;
  background: #ecfdf5;
}

.layout .playerDetails .fitness-analysis .fitness-card .card-header .level-badge.level-high {
  color: #22c55e;
  background: #f0fdf4;
}

.layout .playerDetails .fitness-analysis .fitness-card .description {
  color: #6b7280;
  width: 50%;
  margin-bottom: .75rem;
  font-size: .9rem;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar {
  border-radius: 5px;
  width: 45%;
  height: 20px;
  display: flex;
  position: relative;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .bar-segment {
  flex: 1;
  height: 100%;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .bar-segment.very-good {
  background: #16a34a;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .bar-segment.good {
  background: #86efac;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .bar-segment.average {
  background: #facc15;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .bar-segment.low {
  background: #fda4af;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .bar-segment.very-low {
  background: #f87171;
}

.layout .playerDetails .fitness-analysis .fitness-card .bar-container .bar .arrow {
  color: red;
  font-size: 1.3rem;
  transition: left .3s;
  position: absolute;
  top: -120%;
}

.layout .playerDetails .note-card {
  border-radius: 8px;
  padding: 1rem;
  font-size: .95rem;
  line-height: 1.5;
}

.layout .playerDetails .note-card strong {
  margin-bottom: .5rem;
  display: block;
}

.layout .playerDetails .note-card ul {
  margin: 0;
  padding-left: 1.25rem;
}

.layout .playerDetails .note-card ul li {
  margin-bottom: .3rem;
  list-style: outside;
}

.layout .playerDetails .note-card.recommendations {
  background-color: #eff6ff;
  border: 1px solid #3b82f6;
}

.layout .playerDetails .note-card.restrictions {
  background-color: #fefce8;
  border: 1px solid #eab308;
}

.layout .playerDetails .weight-chart {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 0 0 1px #eee;
}

.layout .playerDetails .weight-chart h4 {
  margin-bottom: .5rem;
  font-size: 1rem;
}

.layout .schedule {
  color: #030712;
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .schedule header {
  justify-content: space-between;
  gap: 20px;
  display: flex;
}

.layout .schedule header .opponent, .layout .schedule header .results {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
}

.layout .schedule header .opponent {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  display: flex;
}

.layout .schedule header .opponent .path {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .schedule header .opponent .path span {
  color: #6b728080;
  font-weight: 650;
}

.layout .schedule header .opponent .path span:first-child {
  color: var(--main-color);
}

.layout .schedule header .opponent .team {
  align-items: center;
  gap: 20px;
  display: flex;
}

.layout .schedule header .opponent .team .logo {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.layout .schedule header .opponent .team .name {
  align-items: center;
  gap: 15px;
  display: inline-flex;
}

.layout .schedule header .opponent .team .name .status {
  color: #22c55e;
  background-color: #22c55e1a;
  border-radius: 5px;
  align-items: center;
  gap: 5px;
  padding: .3rem .5rem;
  font-size: .9rem;
  display: flex;
}

.layout .schedule header .opponent .team .details {
  align-items: center;
  gap: 40px;
  margin-top: .5rem;
  display: flex;
}

.layout .schedule header .opponent .team .details div {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
  display: flex;
}

.layout .schedule header .opponent .team .details div span {
  text-transform: uppercase;
  color: #03071280;
  font-size: .8rem;
  font-weight: 650;
}

.layout .schedule header .results {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 407px;
  display: flex;
}

.layout .schedule header .results .logo {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.layout .schedule header .results .stats {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.layout .schedule header .results .stats .team {
  align-items: center;
  gap: 5px;
  line-height: 1.3;
  display: flex;
}

.layout .schedule header .results .stats .team span {
  font-size: .85rem;
}

.layout .schedule .grid {
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.layout .schedule .standings, .layout .schedule .season-statistics, .layout .schedule .recent-form, .layout .schedule .top-players, .layout .schedule .schedule-card {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  display: flex;
}

.layout .schedule .form-stats, .layout .schedule .std {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .schedule .form-stats {
  min-width: 430px;
}

.layout .schedule .std {
  flex: 1;
}

.layout .schedule .recent-form {
  text-align: center;
}

.layout .schedule .recent-form p {
  color: #03071280;
}

.layout .schedule .recent-form .form-bar {
  gap: .5rem;
  margin: auto;
  display: flex;
}

.layout .schedule .recent-form .form-bar .bar {
  border-radius: 3px;
  width: 30px;
  height: 40px;
}

.layout .schedule .recent-form .form-bar .bar.w {
  background-color: #39b57a;
}

.layout .schedule .recent-form .form-bar .bar.l {
  background-color: #a4a9b3;
}

.layout .schedule .recent-form .form-bar .bar.d {
  background-color: #ffc107;
}

.layout .schedule select {
  border: var(--box-border);
  color: #030712;
  background-color: #f8f9fc;
  border-radius: 6px;
  padding: .2rem .5rem;
  font-weight: 600;
}

.layout .schedule .season-statistics .filters {
  gap: 1rem;
  display: flex;
}

.layout .schedule .season-statistics .dropdowns {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.layout .schedule .season-statistics .dropdowns details {
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: .4rem .6rem;
}

.layout .schedule .season-statistics .dropdowns details summary {
  cursor: pointer;
  font-weight: bold;
}

.layout .schedule .season-statistics .dropdowns details summary::marker {
  display: none !important;
}

.layout .schedule .season-statistics .dropdowns details ul {
  flex-direction: column;
  gap: 5px;
  padding-left: 1rem;
  display: flex;
}

.layout .schedule .season-statistics .dropdowns details ul li {
  color: #030712;
  list-style-type: none;
}

.layout .schedule .standings .filters {
  gap: 1rem;
  display: flex;
}

.layout .schedule .standings table {
  border-collapse: unset;
  border: none;
  width: 100%;
  font-size: .9rem;
}

.layout .schedule .standings table thead {
  background-color: #0000 !important;
}

.layout .schedule .standings table thead th {
  font-weight: 600;
  color: #03071280 !important;
}

.layout .schedule .standings table th, .layout .schedule .standings table td {
  text-align: center;
  border-bottom: 1px solid #ddd;
  padding: .3rem;
}

.layout .schedule .standings table tbody td {
  font-weight: 600;
}

.layout .schedule .standings table .position {
  background-color: #0000000d;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin: auto;
  font-weight: bold;
  display: flex;
}

.layout .schedule .standings table .top {
  color: #fff;
  background-color: #22c55e;
}

.layout .schedule .standings table .last5 {
  justify-content: center;
  gap: .2rem;
  display: flex;
}

.layout .schedule .standings table .last5 .result {
  color: #fff;
  text-align: center;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  font-size: .7rem;
  line-height: 20px;
  display: inline-block;
}

.layout .schedule .standings table .last5 .result.w {
  background-color: #22c55e;
}

.layout .schedule .standings table .last5 .result.l {
  background-color: #ef4444;
}

.layout .schedule .standings table .last5 .result.d {
  color: #000;
  background-color: #ffc107;
}

.layout .schedule .standings a {
  color: #007bff;
  text-align: right;
  float: right;
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
  display: block;
}

.layout .schedule .standings a:hover {
  text-decoration: underline;
}

.layout .schedule .top-players h3 {
  text-align: center;
}

.layout .schedule .top-players .header {
  gap: 8px;
  display: flex;
}

.layout .schedule .top-players .player-list {
  padding: 0;
  list-style: none;
}

.layout .schedule .top-players .player-list .player {
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  display: flex;
}

.layout .schedule .top-players .player-list .player .rank {
  width: 20px;
  font-weight: bold;
}

.layout .schedule .top-players .player-list .player .info {
  flex-direction: column;
  flex: 1;
  line-height: 1.3;
  display: flex;
}

.layout .schedule .top-players .player-list .player .info .name {
  font-weight: bold;
}

.layout .schedule .top-players .player-list .player .info .role {
  color: #03071280;
  font-size: 12px;
}

.layout .schedule .top-players .player-list .player .rating {
  color: #22c55e;
  align-items: center;
  font-weight: bold;
  display: flex;
}

.layout .schedule .top-players .player-list .player .rating .indicator {
  background: #22c55e;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-left: 6px;
}

.layout .schedule .top-players .show-more {
  color: #2563eb;
  text-align: center;
  cursor: pointer;
  margin-top: 12px;
  font-weight: bold;
}

.layout .schedule .schedule-card ul {
  padding: 0;
  list-style: none;
}

.layout .schedule .schedule-card ul .match {
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  display: flex;
}

.layout .schedule .schedule-card ul .match .date {
  color: #03071280;
  width: 80px;
  font-size: 12px;
}

.layout .schedule .schedule-card ul .match .teams {
  flex: 1;
  font-weight: bold;
}

.layout .schedule .schedule-card ul .match .score {
  text-align: center;
  width: 60px;
}

.layout .schedule .schedule-card ul .match .result {
  color: #fff;
  text-align: center;
  background: #22c55e;
  border-radius: 4px;
  width: 20px;
  padding: 2px 6px;
  font-size: 10px;
}

.layout .schedule .schedule-card ul .match.draw .result {
  color: #1e293b;
  background: #facc15;
}

.layout .schedule .schedule-card ul .match.loss .result {
  background: #dc2626;
}

.layout .calendar-page {
  flex-direction: column;
  gap: 25px;
  display: flex;
}

.layout .calendar-page .calendar-header {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .calendar-page .calendar-header .tabs {
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  gap: 10px;
  padding: 0;
  list-style: none;
  display: flex;
}

.layout .calendar-page .calendar-header .tabs .tab {
  cursor: pointer;
  color: #737373;
  border-bottom: 2px solid #0000;
  padding: 8px 10px;
  font-size: .9rem;
  font-weight: 650;
}

.layout .calendar-page .calendar-header .tabs .tab.active {
  border-bottom: 2px solid var(--main-color);
  color: var(--main-color);
  font-weight: bold;
}

.layout .calendar-page .calendar-header .controls {
  justify-content: space-between;
  gap: 8px;
  display: flex;
}

.layout .calendar-page .calendar-header .controls select, .layout .calendar-page .calendar-header .controls button {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  height: 38px;
  box-shadow: 0 1px 2px #0000000d;
}

.layout .calendar-page .calendar-header .controls .filters {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .calendar-page .calendar-header .controls .filters select {
  width: 150px;
  padding: 0 1rem;
}

.layout .calendar-page .calendar-header .controls .filters button {
  justify-content: center;
  align-items: center;
  width: 40px;
  display: flex;
  box-shadow: 0 1px 2px #0000000d;
}

.layout .calendar-page .calendar-header .controls .add-training {
  background: var(--main-color);
  color: #fff;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0 1rem;
  font-weight: 650;
  display: flex;
}

.layout .calendar-page .weekly-planner {
  flex-direction: column;
  gap: 25px;
  display: flex;
}

.layout .calendar-page .weekly-planner .week {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}

.layout .calendar-page .weekly-planner .week .week-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  display: flex;
}

.layout .calendar-page .weekly-planner .week .week-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

.layout .calendar-page .weekly-planner .week .week-header .week-actions {
  gap: .5rem;
  display: flex;
}

.layout .calendar-page .weekly-planner .week .week-header .week-actions button {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  height: 32px;
  padding: 0 .8rem;
  font-size: .85rem;
  font-weight: 600;
  transition: background-color .2s;
  box-shadow: 0 1px 2px #0000000d;
}

.layout .calendar-page .weekly-planner .week .week-header .week-actions button:hover {
  background-color: #e6e6e6;
}

.layout .calendar-page .weekly-planner .week .days {
  background-color: #fff;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  display: grid;
}

.layout .calendar-page .weekly-planner .week .days .day {
  background-color: #fff;
  border-inline-end: 1px solid #e5e5e5;
  flex-direction: column;
  padding: .5rem;
  display: flex;
}

.layout .calendar-page .weekly-planner .week .days .day:last-child {
  border-inline-end: none;
}

.layout .calendar-page .weekly-planner .week .days .day .day-header {
  margin-bottom: .5rem;
  font-size: .9rem;
  font-weight: bold;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions {
  flex-direction: column;
  gap: .2rem;
  display: flex;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session {
  color: #fff;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  padding: .4rem .6rem;
  font-size: .8rem;
  display: flex;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session span {
  margin-left: .5rem;
  font-size: .75rem;
  font-weight: bold;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-team-spirit {
  background-color: #00b894;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-field-players {
  background-color: #0984e3;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-general {
  background-color: #6c5ce7;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-combinations {
  background-color: #d63031;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-match {
  background-color: #e17055;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-match-priority {
  background-color: #2d3436;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-physical {
  background-color: #00cec9;
}

.layout .calendar-page .weekly-planner .week .days .day .sessions .session-tactics {
  background-color: #0984e3;
}

.layout .calendar-page .upcoming-games {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px #0000001a;
}

.layout .calendar-page .upcoming-games .title {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.layout .calendar-page .upcoming-games .cards {
  gap: 1rem;
  display: flex;
  overflow-x: auto;
}

.layout .calendar-page .upcoming-games .card {
  background: #fdfdfd;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  min-width: fit-content;
  display: flex;
}

.layout .calendar-page .upcoming-games .card .bg {
  background: var(--main-bg-light-color);
  padding: .5rem 1rem;
}

.layout .calendar-page .upcoming-games .card .details {
  padding: 1rem;
}

.layout .calendar-page .upcoming-games .card .card-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .calendar-page .upcoming-games .card .card-header .badge {
  color: #fff;
  border-radius: 5px;
  padding: .25rem .5rem;
  font-size: .7rem;
  font-weight: 600;
}

.layout .calendar-page .upcoming-games .card .card-header .badge.league, .layout .calendar-page .upcoming-games .card .card-header .badge.friendly {
  background-color: var(--main-color);
}

.layout .calendar-page .upcoming-games .card .card-time {
  color: #777;
  font-size: .85rem;
}

.layout .calendar-page .upcoming-games .card .card-team {
  align-items: center;
  gap: .5rem;
  font-weight: bold;
  display: flex;
}

.layout .calendar-page .upcoming-games .card .card-team .logo {
  border: 1px solid #e5e7eb;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  position: relative;
  overflow: hidden;
}

.layout .calendar-page .upcoming-games .card .card-footer {
  justify-content: space-between;
  align-items: center;
  gap: .25rem;
  margin-top: .5rem;
  display: flex;
}

.layout .calendar-page .upcoming-games .card .card-footer .info {
  color: #444;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  display: flex;
}

.layout .calendar-page .upcoming-games .card:first-child {
  border: 1.5px solid var(--main-color);
}

.layout .calendar-page .player_container {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .calendar-page .player_container .summaryGrid {
  gap: 1rem;
  display: flex;
}

.layout .calendar-page .player_container .summaryGrid .card {
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  padding: .5rem 1.5rem;
  display: flex;
  box-shadow: 0 1px 3px #0000001a;
}

.layout .calendar-page .player_container .summaryGrid .card .topRow {
  color: #333;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  display: flex;
}

.layout .calendar-page .player_container .summaryGrid .card .topRow .dot {
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.layout .calendar-page .player_container .summaryGrid .card .count {
  color: #111;
  font-size: 1.5rem;
  font-weight: bold;
}

.layout .calendar-page .player_container .header {
  background-color: #f5f5f5;
  border-radius: 5px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .5rem;
  display: flex;
  box-shadow: 0 1px 3px #0000001a;
}

.layout .calendar-page .player_container .header .search {
  border: 1px solid #ccc;
  border-radius: 8px;
  flex: 1;
  min-width: 200px;
  padding: .5rem 1rem;
}

.layout .calendar-page .player_container .header .filters {
  gap: .5rem;
  display: flex;
}

.layout .calendar-page .player_container .header .filters select {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: .5rem;
  font-weight: 600;
}

.layout .calendar-page .player_container .header .resetBtn {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: .5rem 1rem;
  font-weight: 650;
  transition: all .2s;
}

.layout .calendar-page .player_container .table {
  border-collapse: collapse;
  width: 100%;
}

.layout .calendar-page .player_container .table th, .layout .calendar-page .player_container .table td {
  text-align: center;
  border-bottom: 1px solid #eee;
  padding: .5rem 1rem;
}

.layout .calendar-page .player_container .table th {
  font-weight: bold;
}

.layout .calendar-page .player_container .table .playerInfo {
  text-align: start;
  align-items: center;
  gap: .75rem;
  line-height: 1.3;
  display: flex;
}

.layout .calendar-page .player_container .table .playerInfo .avtr {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.layout .calendar-page .player_container .table .playerInfo .subInfo {
  color: #666;
  font-size: .85rem;
}

.layout .calendar-page .player_container .table .status {
  border-radius: 12px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 650;
}

.layout .calendar-page .player_container .table .status.readytoplay {
  color: #22c55e;
  background: #d1fae5;
}

.layout .calendar-page .player_container .table .status.recovering {
  color: #3b82f6;
  background: #e0f2fe;
}

.layout .calendar-page .player_container .table .status.rest {
  color: #6b7280;
  background-color: #f3f4f6;
}

.layout .calendar-page .player_container .table .status.severeinjury {
  color: #ef4444;
  background: #fee2e2;
}

.layout .calendar-page .player_container .table .score {
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  display: flex;
}

.layout .calendar-page .player_container .table .badge {
  text-transform: capitalize;
  color: #fff;
  border-radius: 12px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 650;
}

.layout .calendar-page .player_container .table .badge.low {
  background-color: #22c55e;
}

.layout .calendar-page .player_container .table .badge.average {
  background-color: #facc15;
}

.layout .calendar-page .player_container .table .badge.high {
  background-color: #dc2626;
}

.layout .calendar-page .player_container .table .actionBtn {
  cursor: pointer;
  color: #111827;
  background-color: #0000;
  border: 1.5px solid #4b5563;
  border-radius: 8px;
  padding: .3rem 1rem;
  font-size: .85rem;
  font-weight: 650;
}

.layout .calendar-page .player_container .table .actionBtn:hover {
  background-color: #e5e7eb;
}

.layout .matches-results .header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  display: flex;
}

.layout .matches-results .header h2 {
  font-size: 1.7rem;
  font-weight: 700;
}

.layout .matches-results .header p {
  color: #666;
}

.layout .matches-results .header .add-result {
  background: var(--main-color);
  color: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 1.3rem;
  font-weight: 650;
  display: flex;
}

.layout .matches-results .wrapper {
  align-items: flex-start;
  gap: 2rem;
  display: flex;
}

.layout .matches-results .wrapper .results {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 10px;
  flex: 1;
  padding: 1.5rem;
}

.layout .matches-results .wrapper .results .top-bar {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.layout .matches-results .wrapper .results .top-bar select {
  background-color: #f8f9fc;
  border: 1px solid #e5e7eb;
  border-radius: .375rem;
  height: 40px;
  padding: 0 .5rem;
  font-weight: 600;
}

.layout .matches-results .wrapper .results .cards {
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 1rem;
  display: grid;
}

.layout .matches-results .wrapper .results .cards .card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .5rem;
  flex-direction: column;
  gap: .5rem;
  transition: all .3s ease-in-out;
  display: flex;
  overflow: hidden;
}

.layout .matches-results .wrapper .results .cards .card:hover {
  border-color: var(--main-color);
}

.layout .matches-results .wrapper .results .cards .card .meta {
  background-color: #3257531a;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  font-size: .875rem;
  display: flex;
}

.layout .matches-results .wrapper .results .cards .card .meta .flex {
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .matches-results .wrapper .results .cards .card .meta .sport, .layout .matches-results .wrapper .results .cards .card .meta .category {
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background-color: #fff;
  border-radius: 4px;
  padding: 0 .5rem;
  font-weight: 600;
}

.layout .matches-results .wrapper .results .cards .card .meta .sport {
  color: #fff;
  background-color: var(--main-color);
}

.layout .matches-results .wrapper .results .cards .card .match {
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.layout .matches-results .wrapper .results .cards .card .match .team {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  display: flex;
}

.layout .matches-results .wrapper .results .cards .card .match .team .logo {
  border: 1px solid #e5e7eb;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  position: relative;
}

.layout .matches-results .wrapper .results .cards .card .match .score-date {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.layout .matches-results .wrapper .results .cards .card .match .score-date .date {
  color: #6b7280;
  font-weight: 500;
}

.layout .matches-results .wrapper .results .cards .card .match .score-date strong {
  color: #fff;
  background-color: #000;
  border-radius: 4px;
  padding: .3rem .5rem;
  line-height: 1;
}

.layout .matches-results .wrapper .results .cards .card .result {
  text-transform: uppercase;
  border-radius: .375rem;
  width: fit-content;
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: bold;
}

.layout .matches-results .wrapper .results .cards .card .result.win {
  color: #fff;
  background: #22c55e;
}

.layout .matches-results .wrapper .results .cards .card .result.lost {
  color: #fff;
  background: #ef4444;
}

.layout .matches-results .wrapper .results .cards .card .result.draw {
  color: #fff;
  background: #9ca3af;
}

.layout .levels {
  border: var(--box-border);
  width: 200px;
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  position: sticky;
  top: 0;
}

.layout .levels h4 {
  margin-bottom: 1rem;
  font-weight: 650;
}

.layout .levels ul {
  flex-direction: column;
  gap: 5px;
  padding: 0;
  list-style: none;
  display: flex;
}

.layout .levels ul li label {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.layout .healthcare-page {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.layout .healthcare-page .header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.layout .healthcare-page .header p {
  color: #666;
  font-size: 1rem;
}

.layout .healthcare-page .header .cta-btn {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: .6rem 1.2rem;
  font-weight: 650;
  transition: background .3s;
}

.layout .healthcare-page .summary-cards {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}

.layout .healthcare-page .summary-card {
  border: var(--box-border);
  min-width: 150px;
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 12px;
  flex: 1;
  padding: 1rem;
}

.layout .healthcare-page .summary-card .top {
  justify-content: space-between;
  font-size: .9rem;
  display: flex;
}

.layout .healthcare-page .summary-card .top .icon {
  font-size: 1rem;
}

.layout .healthcare-page .summary-card h3 {
  margin: 0;
  font-size: 1.4rem;
}

.layout .healthcare-page .filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.layout .healthcare-page .filters .search {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 8px;
  flex: 1;
  align-items: center;
  min-width: 250px;
  padding: .4rem .6rem;
  display: flex;
}

.layout .healthcare-page .filters .search svg {
  color: #999;
  margin-right: .5rem;
}

.layout .healthcare-page .filters .search input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-size: .9rem;
}

.layout .healthcare-page .filters select {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  padding: .4rem 1rem;
  font-size: .9rem;
}

.layout .healthcare-page .players-section {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  display: grid;
}

.layout .healthcare-page .player-card {
  border: var(--box-border);
  width: 300px;
  box-shadow: var(--box-shadow);
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  display: flex;
}

.layout .healthcare-page .player-card .top {
  align-items: center;
  gap: 1rem;
  display: flex;
  position: relative;
}

.layout .healthcare-page .player-card .top .avatar {
  object-fit: cover;
  border: 2px solid var(--main-color);
  border-radius: 100%;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.layout .healthcare-page .player-card .top .info {
  line-height: 1;
}

.layout .healthcare-page .player-card .top .info h4 {
  margin: 0;
  font-size: 1rem;
}

.layout .healthcare-page .player-card .top .info .meta {
  color: #666;
  font-size: .85rem;
}

.layout .healthcare-page .player-card .top .status {
  border-radius: 8px;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
}

.layout .healthcare-page .player-card .top .status.healthy, .layout .healthcare-page .player-card .top .status.active, .layout .healthcare-page .player-card .top .status.readytoplay {
  color: #155724;
  background: #d4edda;
}

.layout .healthcare-page .player-card .top .status.injured {
  color: #721c24;
  background: #f8d7da;
}

.layout .healthcare-page .player-card .top .status.recovering {
  color: #004085;
  background: #e2e3f3;
}

.layout .healthcare-page .player-card .top .status.rest {
  color: #856404;
  background: #fff3cd;
}

.layout .healthcare-page .player-card .injury-box {
  border: var(--box-border);
  background: #f5f5f5;
  border-radius: 8px;
  justify-content: space-between;
  align-items: flex-start;
  padding: .75rem;
  display: flex;
}

.layout .healthcare-page .player-card .injury-box .injury p {
  margin: 0;
  font-size: .85rem;
}

.layout .healthcare-page .player-card .injury-box .injury .severity {
  border-radius: 5px;
  margin-top: .3rem;
  padding: 0 .4rem;
  font-size: .75rem;
  font-weight: bold;
  display: inline-block;
}

.layout .healthcare-page .player-card .injury-box .injury .severity.medium {
  color: #ea580c;
  background: #ffedd5;
}

.layout .healthcare-page .player-card .injury-box .dates {
  text-align: right;
  line-height: 1.3;
}

.layout .healthcare-page .player-card .injury-box .dates p {
  color: #777;
  margin: 0;
  font-size: .75rem;
}

.layout .healthcare-page .player-card .injury-box .dates strong {
  font-size: .9rem;
  display: block;
}

.layout .healthcare-page .player-card .fitness p {
  margin-bottom: .4rem;
  font-size: .85rem;
}

.layout .healthcare-page .player-card .fitness .bar {
  background: #eee;
  border-radius: 6px;
  width: 100%;
  height: 8px;
  overflow: hidden;
}

.layout .healthcare-page .player-card .fitness .bar .fill {
  background: #22c55e;
  height: 100%;
  transition: width .3s;
}

.layout .healthcare-page .player-card .fitness .score {
  text-align: right;
  margin-top: .3rem;
  font-size: .85rem;
  display: block;
}

.layout .healthcare-page .player-card .risk p {
  margin-bottom: .4rem;
  font-size: .85rem;
}

.layout .healthcare-page .player-card .risk .tags {
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem;
  display: grid;
}

.layout .healthcare-page .player-card .risk .tags .tag {
  border-radius: 5px;
  padding: .1rem .5rem;
  font-size: .75rem;
  font-weight: bold;
}

.layout .healthcare-page .player-card .risk .tags .tag.Low {
  color: #155724;
  background: #d4edda;
}

.layout .healthcare-page .player-card .risk .tags .tag.Average {
  color: #856404;
  background: #fff3cd;
}

.layout .healthcare-page .player-card .risk .tags .tag.High {
  color: #ef4444;
  background: #fee2e2;
}

.layout .healthcare-page .player-card .risk .tags .tag.Medium {
  color: #ea580c;
  background: #ffedd5;
}

.layout .healthcare-page .player-card .actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.layout .healthcare-page .player-card .actions button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: .2rem .8rem;
  font-size: .8rem;
  font-weight: 600;
}

.layout .healthcare-page .player-card .actions button.view {
  background: var(--main-color);
  color: #fff;
}

.layout .healthcare-page .player-card .actions button.plan {
  color: #333;
  background: #f1f1f1;
}

.players_filters {
  gap: 1rem;
  display: flex;
  position: relative;
}

.players_filters .dropdown {
  position: relative;
}

.players_filters .dropdown .trigger {
  border: var(--box-border);
  cursor: pointer;
  background-color: #f8f9fc;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  width: 140px;
  height: 40px;
  padding: 0 1rem;
  font-weight: 600;
  display: flex;
  box-shadow: 0 1px 2px #0000000d;
}

.players_filters .dropdown .trigger:hover {
  border-color: var(--main-color);
}

.players_filters .dropdown .trigger.active {
  background-color: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}

.players_filters .dropdown .menu {
  border: var(--box-border);
  z-index: 20;
  background: #fff;
  border-radius: .5rem;
  min-width: 160px;
  padding: .5rem 0;
  position: absolute;
  top: 110%;
  left: 0;
  box-shadow: 0 1px 3px #0000001a;
}

.players_filters .dropdown .menu .item {
  cursor: pointer;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.players_filters .dropdown .menu .item:hover {
  background: #f3f4f6;
}

.players_filters .dropdown .menu .item .dot {
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.empty_state {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: auto;
  display: flex;
}

.empty_state p {
  color: #6b7280;
}

.team-loading-spinner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.team-loading-spinner .spinner {
  animation: 1s linear infinite rotate;
}

.team-loading-spinner .path {
  stroke-dasharray: 90 150;
  stroke-dashoffset: 0;
  color: var(--main-color);
  animation: 1.5s ease-in-out infinite dash;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -124px;
  }
}

.players-page {
  color: #030712;
  flex-direction: column;
  display: flex;
}

.players-page .header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  display: flex;
}

.players-page .header h2 {
  font-size: 1.7rem;
  font-weight: 700;
}

.players-page .header p {
  color: #666;
}

.players-page .filter_search {
  background-color: #fff;
  border-radius: 5px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: .4rem;
  display: flex;
  box-shadow: 0 1px 3px #0000001a;
}

.players-page .filter_search input {
  border: var(--box-border);
  background-color: #f8f9fc;
  border-radius: 8px;
  flex: 1;
  height: 40px;
  margin-right: 10px;
  padding: 0 10px;
  box-shadow: 0 1px 2px #0000000d;
}

.players-page .filter_search input:focus {
  border-color: var(--main-color);
  outline: none;
}

.players-page table {
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  width: 100%;
}

.players-page table th, .players-page table td {
  text-align: center;
  border-bottom: 1px solid #eee;
  padding: 9px 12px;
}

.players-page table .player-info {
  justify-content: flex-start;
  align-items: center;
  line-height: 1.3;
  display: flex;
}

.players-page table .player-info .avatar {
  border: var(--box-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
}

.players-page table .player-info .start {
  text-align: start;
}

.players-page table .player-info .name {
  font-weight: bold;
}

.players-page table .player-info .sub {
  color: #777;
  font-size: 12px;
}

.players-page table .status {
  border-radius: 12px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 650;
}

.players-page table .status.ready-to-play, .players-page table .status.active {
  color: #22c55e;
  background: #d1fae5;
}

.players-page table .status.severe-injury, .players-page table .status.injured {
  color: #ef4444;
  background: #fee2e2;
}

.players-page table .status.rest {
  color: #5856d6;
  background: #e0e7ff;
}

.players-page table .status.suspended {
  color: #ef4444;
  background: #fee2e2;
}

.players-page table .status.recovering {
  color: #3b82f6;
  background: #e0f2fe;
}

.players-page table .team {
  font-weight: bold;
}

.players-page table .rating {
  color: #fff;
  list-style: 1.3;
  border-radius: 5px;
  padding: 0 .5rem;
  font-size: .85rem;
  font-weight: 600;
}

.players-page table .rating.high {
  background-color: #22c55e;
}

.players-page table .rating.low {
  background-color: #ef4444;
}

.players-page table .rating.none {
  color: #030712;
  background-color: #d1d5db;
}

.players-page table .fitness {
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.players-page table .action-menu {
  position: relative;
}

.players-page table .action-menu button {
  cursor: pointer;
  border: none;
  border: var(--box-border);
  background: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: .4rem;
  display: flex;
}

.players-page table .action-menu button.active {
  background-color: var(--main-color);
  color: #fff;
}

.players-page table .action-menu .dropdown {
  z-index: 10;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-width: 180px;
  position: absolute;
  top: 35px;
  right: 0;
  box-shadow: 0 4px 6px #0000001a;
}

.players-page table .action-menu .dropdown .section {
  text-align: start;
  border-bottom: 1px solid #eee;
  padding: 10px;
  font-weight: bold;
}

.players-page table .action-menu .dropdown button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  padding: 8px 10px;
  display: block;
}

.players-page table .action-menu .dropdown button:hover {
  background: #f9fafb;
}

.players-page .pagination {
  justify-content: center;
  margin-top: 20px;
  display: flex;
}

.players-page .pagination button {
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 6px;
  margin: 0 3px;
  padding: 5px 12px;
  font-weight: 600;
  box-shadow: 0 1px 3px #0000001a;
}

.login_container {
  background: url("https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80") center / cover no-repeat;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.login_container:before {
  content: "";
  z-index: 0;
  background: #000000b3;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.login_container .card {
  z-index: 1;
  border: 3px solid var(--main-color);
  background: #fff;
  border-radius: 15px;
  width: 400px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #00000080;
}

.login_container .card .header {
  background: var(--main-color);
  text-align: center;
  color: #fff;
  padding: 20px;
  position: relative;
}

.login_container .card .header .logo {
  border: 3px solid var(--main-color);
  background-color: #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  position: relative;
  box-shadow: 0 0 0 3px gray;
}

.login_container .card .header .title {
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.login_container .card .header .subtitle {
  letter-spacing: 1px;
  opacity: .9;
  margin: 5px 0 0;
  font-size: 14px;
}

.login_container .card .form {
  padding: 20px;
}

.login_container .card .form .formGroup {
  margin-bottom: 15px;
  position: relative;
}

.login_container .card .form .formGroup label {
  pointer-events: none;
  font-size: 14px;
  transition: all .3s;
  position: absolute;
  top: 12px;
  left: 45px;
}

.login_container .card .form .formGroup input {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 8px;
  width: 100%;
  padding: 15px 15px 15px 45px;
  font-size: 16px;
  transition: all .3s;
}

.login_container .card .form .formGroup input:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(var(--main-color), .2);
  outline: none;
}

.login_container .card .form .formGroup .icon {
  color: var(--main-color);
  font-size: 18px;
  position: absolute;
  top: 15px;
  left: 15px;
}

.login_container .card .form .loginBtn {
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
  box-shadow: 0 4px 6px #0000001a;
}

.login_container .card .form .loginBtn:hover {
  background: var(--main-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px #00000026;
}

.login_container .card .form .loginBtn:hover .arrow {
  transform: translateX(3px);
}

.login_container .card .form .loginBtn:active {
  transform: translateY(0);
}

.login_container .card .form .loginBtn .arrow {
  font-size: 20px;
  transition: transform .3s;
}

.login_container .card .form .footer {
  text-align: center;
  margin-top: 25px;
  position: relative;
}

.login_container .card .form .footer .forgot {
  color: var(--main-color);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  transition: color .3s;
}

.login_container .card .form .footer .forgot:hover {
  color: var(--main-color);
  text-decoration: underline;
}

.settings {
  flex-direction: column;
  gap: 25px;
  max-width: 900px;
  margin: auto;
  display: flex;
}

.settings header p {
  color: #737373;
}

.settings nav {
  align-items: center;
  gap: 10px;
  width: max-content;
  display: flex;
}

.settings nav a {
  color: #6b7280;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: .2rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
}

.settings nav a.active {
  background-color: var(--main-color);
  color: #fff;
}

.settings .wrp {
  border: var(--box-border);
  box-shadow: var(--box-shadow);
  background-color: #fff;
  border-radius: 10px;
  flex-direction: column;
  gap: 20px;
  padding: 2.5rem;
  display: flex;
}

.settings .avtr-name {
  align-items: center;
  gap: 20px;
  display: flex;
}

.settings .avtr-name .avatar {
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.settings .avtr-name .name {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.settings .avtr-name .status {
  color: green;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 0 .8rem;
  font-size: .75rem;
  font-weight: bold;
}

.settings .form, .settings .reset_pw_form {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  display: grid;
}

.settings .form .input_wrp, .settings .reset_pw_form .input_wrp {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.settings .form .input_wrp label, .settings .reset_pw_form .input_wrp label {
  color: #374151;
  font-weight: 600;
}

.settings .form .input_wrp input, .settings .form .input_wrp select, .settings .reset_pw_form .input_wrp input, .settings .reset_pw_form .input_wrp select {
  border: var(--box-border);
  height: 45px;
  box-shadow: var(--box-shadow);
  border-radius: 5px;
  padding: 0 1rem;
}

.settings .form .input_wrp input:focus, .settings .form .input_wrp select:focus, .settings .reset_pw_form .input_wrp input:focus, .settings .reset_pw_form .input_wrp select:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 1px var(--main-color);
  outline: none;
}

.settings .reset_pw_form {
  flex-direction: column;
  display: flex;
}

.settings .save_btn {
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: .5rem 1.5rem;
  font-weight: 650;
  transition: background-color .2s;
  box-shadow: 0 1px 2px #0000000d;
  background-color: var(--main-color) !important;
}

.logout-modal-overlay {
  backdrop-filter: blur(5px);
  z-index: 10000;
  background: #0000007a;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.logout-modal-overlay .logout-modal {
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  width: 90%;
  max-width: 450px;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 20px #0003;
}

.logout-modal-overlay .logout-modal .logout-modal-title {
  font-size: 1.5rem;
}

.logout-modal-overlay .logout-modal .logout-modal-text {
  color: #666;
  margin-bottom: 1rem;
  font-size: .9rem;
}

.logout-modal-overlay .logout-modal .logout-modal-actions {
  justify-content: space-between;
  gap: .5rem;
  display: flex;
}

.logout-modal-overlay .logout-modal .logout-modal-actions .cancel-btn, .logout-modal-overlay .logout-modal .logout-modal-actions .confirm-btn {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  flex: 1;
  padding: .5rem;
  font-weight: bold;
}

.logout-modal-overlay .logout-modal .logout-modal-actions .cancel-btn {
  color: #333;
  background-color: #f2f2f2;
}

.logout-modal-overlay .logout-modal .logout-modal-actions .confirm-btn {
  color: #fff;
  background-color: #e53935;
}

.teamSwitcher {
  z-index: 10000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  bottom: 20px;
  right: 60px;
  box-shadow: 0 4px 10px #0000001a;
}

.teamSwitcher .toggleButton {
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-weight: bold;
  transition: background .3s;
  display: flex;
}

.teamSwitcher .toggleButton:hover {
  background: var(--main-color);
}

.teamSwitcher .teamList {
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.teamSwitcher .teamList .teamItem {
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 6px;
  transition: background .2s;
  display: flex;
}

.teamSwitcher .teamList .teamItem:hover {
  background: #f0f0f0;
}

.teamSwitcher .teamList .teamItem.active {
  background: #e0f0ff;
  font-weight: bold;
}

.teamSwitcher .teamList .teamItem .teamLogo {
  object-fit: contain;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  position: relative;
}

.body-composition-popup {
  z-index: 50;
  backdrop-filter: blur(5px);
  z-index: 10000;
  background: #0000004d;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.body-composition-popup .modal {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 10px 20px #00000026;
}

.body-composition-popup .modal h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

.body-composition-popup .modal .close {
  cursor: pointer;
  color: red;
  background: none;
  border: none;
  font-size: 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.body-composition-popup .modal .input-group {
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.body-composition-popup .modal .input-group label {
  flex-direction: column;
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.body-composition-popup .modal .input-group label .input-with-unit {
  border: 1px solid #ccc;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.body-composition-popup .modal .input-group label .input-with-unit input {
  border: none;
  outline: none;
  flex: 1;
  padding: .5rem;
  font-size: 1rem;
}

.body-composition-popup .modal .input-group label .input-with-unit span {
  background: #f3f3f3;
  border-left: 1px solid #ccc;
  padding: .5rem;
}

.body-composition-popup .modal .input-group label input {
  border: 1px solid #ccc;
  border-radius: 6px;
  max-width: 150px;
  margin-top: .25rem;
  padding: .5rem;
  font-size: 1rem;
}

.body-composition-popup .modal .actions {
  justify-content: flex-end;
  margin-top: 1.5rem;
  display: flex;
}

.body-composition-popup .modal .actions button {
  min-width: 150px;
}

.body-composition-popup .modal .actions .back {
  color: #555;
  cursor: pointer;
  background: none;
  border: none;
  font-weight: 500;
}

.body-composition-popup .modal .actions .update {
  background-color: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: .5rem 1rem;
  font-weight: bold;
}

.injury-modal {
  z-index: 999;
  backdrop-filter: blur(5px);
  background: #0006;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.injury-modal__content {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  position: relative;
}

.injury-modal__close {
  cursor: pointer;
  background: none;
  border: none;
  position: absolute;
  top: 16px;
  right: 16px;
}

.injury-modal__title {
  margin-bottom: 20px;
  font-size: 18px;
}

.injury-modal__field {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  display: flex;
}

.injury-modal__field label {
  font-size: 14px;
  font-weight: 500;
}

.injury-modal__select {
  cursor: pointer;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  display: flex;
}

.injury-modal__toggle-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.injury-modal__toggle {
  cursor: pointer;
  background: #d1d5db;
  border-radius: 999px;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 2px;
  display: flex;
}

.injury-modal__toggle.on {
  background: #92400e;
}

.injury-modal__toggle .toggle__circle {
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: transform .2s;
}

.injury-modal__toggle.on .toggle__circle {
  transform: translateX(18px);
}

.injury-modal__date-group {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.injury-modal__date-group > div {
  width: 48%;
}

.injury-modal__date {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  display: flex;
}

.injury-modal__date input {
  border: none;
  outline: none;
  font-size: 14px;
}

.injury-modal__upload {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 14px;
}

.injury-modal__upload label {
  font-weight: 500;
}

.injury-modal__upload-note {
  color: #6b7280;
  margin: 6px 0;
  font-size: 12px;
}

.injury-modal__upload-btn {
  color: #fff;
  cursor: pointer;
  background: #111827;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  display: flex;
}

.injury-modal__actions {
  justify-content: space-between;
  display: flex;
}

.injury-modal__actions button {
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
}

.injury-modal__back {
  color: #111827;
  background: none;
  border: none;
}

.injury-modal__submit {
  color: #fff;
  background: #92400e;
  border: none;
}

.training-modal, .training-select {
  z-index: 999;
  backdrop-filter: blur(5px);
  color: #1f2a37;
  background: #0006;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.training-modal__content, .training-select__content {
  background: #fff;
  border-radius: 10px;
  max-width: 800px;
  padding: 24px;
  position: relative;
}

.training-modal__close, .training-select__close {
  cursor: pointer;
  background: none;
  border: none;
  position: absolute;
  top: 16px;
  right: 16px;
}

.training-modal__title, .training-select__title {
  text-align: center;
  margin-bottom: 16px;
  font-size: 18px;
}

.training-modal__form, .training-select__form {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.training-modal__form .dropdown, .training-modal__form .date-input, .training-select__form .dropdown, .training-select__form .date-input {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  display: flex;
}

.training-modal__form .dropdown input, .training-modal__form .date-input input, .training-select__form .dropdown input, .training-select__form .date-input input {
  border: none;
  outline: none;
  width: 100%;
}

.training-modal__field, .training-select__field {
  width: 48%;
}

.training-modal__field label, .training-select__field label {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.training-modal__options, .training-select__options {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.training-modal__options .option, .training-select__options .option {
  cursor: pointer;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  flex: 1;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  display: flex;
  box-shadow: 0 1px 2px #0000000d;
}

.training-modal__options .option.selected, .training-select__options .option.selected {
  border-color: var(--main-color);
  background-color: var(--main-bg-light-color);
}

.training-modal__options .option p, .training-select__options .option p {
  color: #6b7280;
  margin-top: 4px;
  font-size: 13px;
}

.training-modal__actions, .training-select__actions {
  justify-content: flex-end;
  display: flex;
}

.training-modal__actions button, .training-select__actions button {
  width: 150px;
  font-weight: 600;
}

.training-modal__actions .cancel, .training-select__actions .cancel {
  background: none;
  border: none;
  font-weight: 500;
}

.training-modal__actions .next, .training-select__actions .next {
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
}

.training-select__step {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 650;
}

.training-select__body {
  gap: 24px;
  display: flex;
}

.training-select__sidebar {
  border-right: 1px solid #e5e7eb;
  width: 300px;
  padding-right: 12px;
}

.training-select__sidebar .sidebar__item {
  color: #111827;
  cursor: pointer;
  padding: 8px;
  font-size: 14px;
}

.training-select__sidebar .sidebar__item.active {
  background-color: #f3f4f6;
  border-radius: 6px;
  font-weight: 600;
}

.training-select__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 400px;
  margin-bottom: 24px;
  display: grid;
  overflow-y: auto;
}

.training-select__grid .card {
  cursor: pointer;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 14px;
  font-size: 13px;
  box-shadow: 0 1px 2px #0000000d;
}

.training-select__grid .card.active {
  border-color: var(--main-color);
  background-color: var(--main-bg-light-color);
}

.training-select__grid .card p {
  color: #4b5563;
  margin-top: 4px;
}

.spinner {
  border: 4px solid #c7c7c7;
  border-top-color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin: auto;
  animation: 1s linear infinite spin;
}

.toast-error, .toast-success, .toast-alert {
  color: #fff;
  background-color: #fff;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 6px;
  display: flex;
  font-family: inherit !important;
}

.toast-error p, .toast-success p, .toast-alert p {
  font-size: .85rem;
}

.toast-error span, .toast-success span, .toast-alert span {
  color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.Toastify__progress-bar--bg {
  display: none !important;
}

.Toastify__progress-bar {
  opacity: 1 !important;
  background: #fff !important;
}

.toast-error {
  background-color: #ff5a65;
}

.toast-success {
  background-color: #05c168;
}

.toast-alert {
  background-color: #ff9e2c;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* [project]/node_modules/react-loading-skeleton/dist/skeleton.css [app-client] (css) */
@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block;
  background-color: var(--base-color);
  user-select: none;
  border-radius: .25rem;
  width: 100%;
  line-height: 1;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.react-loading-skeleton:after {
  content: " ";
  display: var(--pseudo-element-display);
  background-repeat: no-repeat;
  background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%));
  height: 100%;
  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateX(-100%);
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none;
  }
}


/*# sourceMappingURL=_33c27a1d._.css.map*/