:root {
   --h-header: 70px;
   --h-footer: 60px;
   --w-sidebar-league: 300px;

   --radius-lg: 1.25rem;
   --radius-md: 0.75rem;
   --radius-sm: 0.5rem;
   --radius-xs: 0.25rem;

   --p-main: 24px;
   --m-main-negative: -24px;

   --bs-body-color: var(--text-color-body);

   --color-border: var(--color-neutral-30);
   --color-border-dark: var(--color-neutral-80);
   --color-form-border: var(--color-neutral-40);
   
   --bg-color-body: var(--color-neutral-20);
   --bg-color-components: var(--color-neutral-white);
   --bg-color-components-light: var(--color-neutral-10);
   
   --text-color-base: var(--color-neutral-100);
   --text-color-secondary: var(--color-neutral-70);
   --text-color-muted: var(--color-neutral-50);
   --text-color-white: var(--color-neutral-white);
   

   --bs-body-color: var(--text-color-base);
}

body {
   font-family: "Onest", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   background-color: var(--bg-color-body);
}

body:has(.home-page) .sf-main {
   height: calc(100dvh - var(--h-header) - var(--p-main) * 2);
}

body:has(.home-page) .sf-main-content {
   margin-left: 0;
}

body:has(.home-page) #sidebarMenu {
   display: none!important;
}

body:has(.home-page) .home-hidden {
   display: none!important;
}

body:has(.home-page) .sf-header-logo{
   border-right: none;
}

.sf-header {
   width: 100%;
   height: var(--h-header);
   background-color: var(--color-neutral-white);
   position: sticky;
   top: 0;
   z-index: 25;
   border-bottom: 1px solid var(--color-neutral-30);
}

@media (min-width: 1200px) {
   .sf-header-logo {
      width: calc(var(--w-sidebar-league) - var(--p-main));
      border-right: 1px solid var(--color-border);
   }
}

@media (max-width: 1200px) {
   .sf-header-logo {
      border-right: 1px solid var(--color-border);
   }
}

.sf-main {
   width: 100%;
   height: 100%;
   position: relative;
   padding-block: var(--p-main);
}

.home-page {
   width: 100%;
   height: 100%;
   position: absolute;
}

#sidebarMenu {
   width: var(--w-sidebar-league);
   height: calc(100% - var(--h-header));
   position: fixed;
   bottom: 0;
   background-color: var(--bg-color-components);
   border-right: 1px solid var(--color-border);
   transition: all 0.3s ease;
}

@media (min-width: 1200px) {
   #sidebarMenu {
      left: 0;
   }

   .hide-sidebar #sidebarMenu {
      left: -100%;
   }
}

@media (max-width: 1200px) {
   #sidebarMenu {
      left: -100%;
      z-index: 99;
   }

   .show-sidebar #sidebarMenu {
      left: 0;
   }

   .sf-ovelay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 20;
      display: none;
   }
}

@media (max-width: 576px) {
   #sidebarMenu {
      width: 100%;
   }
}

#sidebarMenu .sideba-inner {
   padding: var(--p-main);
}

#sidebarMenu .nav-link {
   border-radius: var(--radius-xs);
   color: var(--bs-body-color);
   font-size: 0.875rem;
   padding: 0.75rem 1rem;
}

#sidebarMenu .nav-link .nav-link-icon {
   font-size: 1.125rem;
   margin-right: 0.25rem;
   vertical-align: -3px;
}

#sidebarMenu .nav-link:hover {
   background-color: var(--bg-color-components-light);
}

#sidebarMenu .nav-link.active {
   background-color: var(--bs-body-color);
   color: var(--color-neutral-white);
   pointer-events: none;
}

#sidebarMenu .nav-link-back {
   border-radius: 0px;
   background-color: var(--color-neutral-30);
   padding-inline: calc(1rem +var(--p-main) / 2);
}

#sidebarMenu .nav-link-back:hover {
   background-color: var(--color-neutral-40);
}

#sidebarMenu .sidebar-league-logo {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-xs);
   border: 1px solid var(--color-form-border);
   flex-shrink: 0;
   overflow: hidden;
   background-color: var(--bg-color-components-light);
}

#sidebarMenu .sidebar-league-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: .25rem;
}

.sf-main-content {
   transition: all 0.3s ease;
}

@media (min-width: 1200px) {
   .sf-main-content {
      width: calc(100% - var(--w-sidebar-league));
      margin-left: var(--w-sidebar-league);
   }

   .hide-sidebar .sf-main-content {
      width: 100%;
      margin-left: 0;
   }
}

@media (max-width: 1200px) {
   .sf-main-content {
      width: 100%;
      margin-left: 0;
   }
}

.container-fluid {
   padding-inline: 24px;
}

/* MATERIAL SYMBOLS */
.material-symbols-outlined {
   font-variation-settings: 
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
}

.material-symbols-outlined.filled {
   font-variation-settings: 
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
}

.text-header-1 {
   font-size: 2.75rem;
   letter-spacing: -3%;
   line-height: 100%;
}

.text-header-2 {
   font-size: 2rem;
   letter-spacing: -2%;
   line-height: 120%;
}

.text-header-3 {
   font-size: 1.75rem;
   letter-spacing: -1.5%;
   line-height: 120%;
}

.text-header-4 {
   font-size: 1.375rem;
   letter-spacing: -2.5%;
   line-height: 120%;
}

.text-body-xl {
   font-size: 1.375rem;
}

.text-body-lg {
   font-size: 1.25rem;
}

.text-body-md {
   font-size: 1.125rem;
}

.text-body-base {
   font-size: 1rem;
}

.text-body-sm {
   font-size: 0.875rem;
}

.text-body-xs {
   font-size: 0.75rem;
}

@media (min-width: 768px) {
   .text-header-1 {
      font-size: 3.5rem;
   }
   
   .text-header-2 {
      font-size: 2.25rem;
   }
   
   .text-header-3 {
      font-size: 2rem;
   }
   
   .text-header-4 {
      font-size: 1.5rem;
   }
}

@media (min-width: 1200px) {
   .text-header-1 {
      font-size: 4rem;
   }
   
   .text-header-2 {
      font-size: 3rem;
   }
   
   .text-header-3 {
      font-size: 2.25rem;
   }
   
   .text-header-4 {
      font-size: 1.75rem;
   }
}

/* TEXT COLOR */
.text-color-secondary {
   color: var(--text-color-secondary);
}

.text-color-muted {
   color: var(--text-color-muted);
}

.text-color-white {
   color: var(--text-color-white);
}

/* BG COLOR */
.bg-color-components-light {
   background-color: var(--bg-color-components-light);
}

/* BUTTONS */
.btn {
   --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  /* --bs-btn-border-radius: 38px; */

   border-radius: var(--bs-btn-border-radius);
   padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
   font-size: .875rem;
}

.btn .material-symbols-outlined {
   font-size: 1.25rem;
   vertical-align: -5px;
   margin-left: -4px;
   margin-right: 4px;
}

.btn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 39px;
   height: 39px;
   padding: 0;
}

.btn.btn-right-icon .material-symbols-outlined {
   margin-right: 0px;
   margin-left: 4px;
}

.btn-icon .material-symbols-outlined {
   font-size: 1.25rem;
   margin: 0px;
}

.btn-dark {
   --bs-btn-color: var(--color-neutral-white);
   --bs-btn-bg: var(--color-neutral-100);
   --bs-btn-border-color: var(--color-neutral-100);
   --bs-btn-hover-color: var(--color-neutral-white);
   --bs-btn-hover-bg: var(--color-neutral-90);
   --bs-btn-hover-border-color: var(--color-neutral-90);
   --bs-btn-focus-shadow-rgb: 66, 70, 73;
   --bs-btn-active-color:var(--color-neutral-white);
   --bs-btn-active-bg: var(--color-neutral-90);
   --bs-btn-active-border-color: var(--color-neutral-90);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--color-neutral-white);
   --bs-btn-disabled-bg: var(--color-neutral-100);
   --bs-btn-disabled-border-color: var(--color-neutral-100);
}

.btn-light {
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-bg: transparent;
   --bs-btn-border-color: transparent;
   --bs-btn-hover-color: var(--bs-body-color);
   --bs-btn-hover-bg: var(--bg-color-components-light);
   --bs-btn-hover-border-color: var(--bg-color-components-light);
   --bs-btn-focus-shadow-rgb: 211, 212, 213;
   --bs-btn-active-color: var(--bs-body-color);
   --bs-btn-active-bg: var(--bg-color-components-light);
   --bs-btn-active-border-color: var(--bg-color-components-light);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--bs-body-color);
   --bs-btn-disabled-bg: #f8f9fa;
   --bs-btn-disabled-border-color: #f8f9fa;
 }

.btn-outline-light {
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-border-color: var(--color-form-border);
   --bs-btn-hover-color: var(--bs-body-color);
   --bs-btn-hover-bg: var(--bg-color-components-light);
   --bs-btn-hover-border-color: var(--color-form-border);
   --bs-btn-focus-shadow-rgb: 248, 249, 250;
   --bs-btn-active-color: var(--bs-body-color);
   --bs-btn-active-bg: var(--bg-color-components-light);
   --bs-btn-active-border-color: var(--color-form-border);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #f8f9fa;
   --bs-btn-disabled-bg: transparent;
   --bs-btn-disabled-border-color: #f8f9fa;
   --bs-gradient: none;
 }

/* CARD */
.card {
   border-color: var(--color-border);
   transition: all 0.3s ease;
}

.card-hover:hover {
   border-color: var(--color-border-dark);
}

.card-shadow-hover:hover {
   box-shadow: 0px 20px 20px -8px var(--color-neutral-40);
}

.card-body {
   padding: 1.25rem;
}

.card-footer {
   color: inherit;
   background-color: transparent;
   border-top: none;
   padding: 0px 1.25rem 1.25rem 1.25rem;

}

.rounded-lg {
   border-radius: var(--radius-lg);
}

.rounded-md {
   border-radius: var(--radius-md);
}

.rounded-sm {
   border-radius: var(--radius-sm);
}

.rounded-xs {
   border-radius: var(--radius-xs);
}

.logo-league-container {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.logo-league-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* BADGES */
.badge {
   padding: 0.5rem 0.65rem;
   font-weight: 500;
}

.badge-primary-light {
   background-color: var(--color-everglade-10);
   color: var(--color-everglade-60);
}

/* FORMS */
.input-group-icon {
   position: relative;
}

.input-group-icon .material-symbols-outlined {
   position: absolute;
   left: 11px;
   top: 50%;
   transform: translateY(-55%);
   color: var(--text-color-muted);
   font-size: 1.125rem;
}

.input-group-icon .vertical-divider {
   width: 1px;
   height: 50%;
   background-color: var(--color-form-border);
   position: absolute;
   left: 38px;
   top: 50%;
   transform: translateY(-50%);
}

.input-group-icon input {
   padding-left: 3.125rem;
}

.form-control {
   padding: 0.5rem 0.75rem;
   font-size: .875rem;
   color: var(--bs-body-color);
   border: var(--bs-border-width) solid var(--color-form-border);
}

.form-control::placeholder {
   color: var(--text-color-muted);
}

.form-control:focus {
   border-color: var(--color-neutral-60);
   box-shadow: 0 0 0 0.25rem var(--color-neutral-30);
}

/* DROPDOWN */
.no-caret.dropdown-toggle::after {
   display: none;
}

.dropdown-arrow {
   position: absolute;
   right: .5rem;
   top: 50%;
   transform: translateY(-50%);
}

.dropdown-menu {
   border-color: var(--color-form-border);
}

.dropdown-item {
   display: block;
   width: 100%;
   font-size: .875rem;
   padding: .5rem 1rem;
   color: var(--bs-body-color);
}

.dropdown-item:hover {
   background-color: var(--bg-color-components-light);
}

.dropdown-item:focus {
   background-color: var(--color-neutral-30);
   color: var(--bs-body-color);
}

.dropdown-item.active, .dropdown-item:active {
   color: var(--text-color-white);
   background-color: var(--bs-body-color);
 }

/* .w-full.dropdown-toggle::after {
   position: absolute;
   right: 0;
} */

/* BREADCRUMBS */
.sf-title-container {
   margin-top: var(--m-main-negative);
   /* background-color: var(--color-neutral-30); */
   /* border-bottom: 1px solid var(--color-border); */
   padding-block: .75rem;
   margin-bottom: .25rem;
}

.sf-title-container .breadcrumb {
   padding: 0;
   margin-bottom: 0;
   background-color: transparent;
   font-size: 0.875rem;
}

.breadcrumb-item a {
   color: var(--bs-body-color);
}

.breadcrumb-item.active {
   color: var(--text-color-secondary);
   opacity: .8;
}

/* .breadcrumb-item + .breadcrumb-item::before {
   content: "/";
} */

/* LINE HEIGHT */
.line-height-1 {
   line-height: 1;
}

.line-height-1-1{
   line-height: 1.1;
}

.line-height-1-2 {
   line-height: 1.2;
}

.line-height-1-3 {
   line-height: 1.3;
}

.line-height-1-4 {
   line-height: 1.4;
}

.line-height-1-5 {
   line-height: 1.5;
}

.line-height-1-6 {
   line-height: 1.6;
}

/* LINE CLAMP */
.line-clamp {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
}

.line-clamp-1 {
   -webkit-line-clamp: 1;
}

.line-clamp-2 {
   -webkit-line-clamp: 2;
}

.line-clamp-3 {
   -webkit-line-clamp: 3;
}

/* TOOLTIPS */
.tooltip {
   font-size: 0.75rem;
}

/* HERO HOME */
.hero-home-container img {
   /* mix-blend-mode: multiply; */
   filter: grayscale(70%) contrast(1.5);
}



@media (min-width: 576px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1536px) {
   
}