:root {
    --primary: #004C3F;
    --primary-light: #7AB933;
    --primary-dark: #003d33;
    --orange: #FF5722;
    --secondary: #FF5722;
    --danger: #FF0000;
    --mud-default-borderradius: 8px !important;
    --main-height: calc(100vh - 65px - 437px);
    --mud-typography-body1-size: 12px !important;
    --mud-typography-h6-size: 16px !important;
    --mud-typography-h5-size: 20px !important;
    --orange-light: #FFCFBF;
    --club-card-height: 350px;
    --green-light: #F5FEED;
    --package-card-height: 450px;
    --package-card-height-sm: 400px;
    --private-class-height: 270px;
    --training-class-height: 305px;
}

* {
    text-decoration: none;
    list-style: none;
}

input, textarea, select {
    transform: scale(1);
}

/* Mobile */
@media (max-width: 958.9px) {
    :root {
        --post-card-height: 425px;
        --club-card-height: auto;
        --coach-card-height: auto;
    }

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

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

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

    .only-on-desktop {
        display: none !important;
    }

    .app-bar .tool-bar {
        padding-right: 16px;
        padding-left: 16px;
    }

    body {
        padding-bottom: 64px;
    }

    .browser {
        flex-direction: column-reverse;
    }

    .browser .mud-nav-link-text {
        margin: 0 !important;
    }

    .browser .mud-collapse-wrapper-inner {
        padding: 0 15px;
    }

    .filter-header {
        padding: 0 16px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 41px;
    }

    .browser article {
        padding: 0 16px;
    }

    .home-banner {
        height: 150px !important;
    }

    .home-club-category-list .club-category-button {
        width: 100px !important;
    }

    .home-title {
        font-size: 22px !important;
    }

    .home-quick-reserve ul li button {
        width: fit-content !important;
    }

    .home-quick-reserve ul {
        justify-content: space-between !important;
    }

    .download-application .info {
        align-items: center;
    }

    .download-application .application-mockup {
        width: 95%;
    }

    .package-page-header {
        height: 200px;
    }

    .download-application .appstores {
        max-width: 300px;
    }

    .club-card .club-content {
        width: 100%;
        min-width: 0;
    }

    .club-card .club-title {
        justify-content: space-between !important;
    }

    .club-card .club-card-flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .coach-card .coach-content {
        width: 100%;
    }

    .coach-card .coach-title {
        justify-content: space-between !important;
    }

    .coach-card .coach-city {
        justify-content: space-between !important;
    }

    .coach-card .coach-card-flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .coach-city-skeleton {
        justify-content: start;
    }

    .club-card .text-size{
        text-align: start;
    }
}

/* Desktop */
@media (min-width: 960px) {
    :root {
        --post-card-height: 390px;
        --coach-card-height: 200px;
    }

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

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

    .hide-on-desktop {
        display: none !important;
    }

    .app-bar .tool-bar {
        padding-right: 24px;
        padding-left: 24px;
    }

    .browser {
        flex-direction: row;
    }

    .desktop-spacer {
        height: 20px;
    }

    .browser article {
        padding-inline-end: 26px;
    }

    .desktop-flex-row-reverse {
        flex-direction: row-reverse !important;
    }

    .download-application .appstores {
        max-width: 250px;
        text-align: start;
    }

    .download-application .info {
        align-items: start;
    }

    .download-application .application-mockup {
        width: 50%;
        margin-top: 30px;
    }

    .package-page-header {
        height: 400px;
    }

    .coach-city-skeleton {
        justify-content: center;
    }

    .package-card-sm {
        height: var(--package-card-height-sm) !important;
    }

    .package-card-sm .mud-paper{
        height: var(--package-card-height-sm) !important;
    }
}

main {
    min-height: var(--main-height);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-primary-light {
    color: var(--primary-light) !important;
}

.text-orange {
    color: var(--orange) !important;
}

.border-radius {
    border-radius: var(--mud-default-borderradius) !important;
}

.app-bar {
    box-shadow: 0 1px 5px 3px #00000012;
    border-bottom: 1px #E4E4E4 solid;
    line-height: 64px;
    background: white;
}

.app-bar .tool-bar {
    line-height: 64px;
    gap: 16px;
}

.app-bar .brand-logo {
    height: 38px;
    width: 38px;
}

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

.header-title {
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 700;
    line-height: 1;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.background-gray {
    background-color: #fafafa;
}

.background-white {
    background-color: #fff;
}

.top-bar-nav {
    display: flex;
    justify-content: center;
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.top-bar-nav li a, .top-bar-nav li button {
    font-size: 12px;
    font-weight: 400;
    text-decoration: none !important;
}

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

.align-middle {
    vertical-align: middle;
}

.w-100 {
    width: 100% !important;
}

.w-80p{
    width: 80px;
}

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

.mud-button-root {
    text-transform: none !important;
    padding: 10px;
    gap: 10px;
    font-size: 12px;
}

.mud-input > textarea.mud-input-root {
    margin-top: 0 !important;
}

.mud-checkbox .mud-button-root {
    padding: 4px !important;
}

.mud-switch .mud-button-root.mud-switch-base-large {
    padding: 12.5px !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: 14px;
    font-weight: 500;
}

.mud-chip-content {
    font-size: 12px;
}

.mud-alert {
    padding: 1.5px 12px;
    gap: 10px;
    font-size: 12px;
    line-height: 1.75;
}

.mud-button-outlined-default {
    border-color: #CACACA !important;
}

.mud-icon-button {
    padding: 8.5px !important;
}

.mud-input-slot {
    padding: 11px !important;
    font-size: 12px !important;
}

.mud-input-label {
    font-size: 12px !important;
}

.mud-input-label-outlined {
    transform: translate(14px, 12px);
}

.mud-application-layout-rtl .mud-input-label-outlined {
    transform: translate(-14px, 12px);
}

.mud-dialog-title b {
    font-size: 14px !important;
}

.border-gray {
    border: 1px solid #EAEAEA;
}

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

.stack-next-to {
    display: flex;
    flex-direction: row;
    align-items: center;
}

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

.gap-2 {
    gap: 2px;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.d-none {
    display: none !important;
}

.nav-button-group {
    display: flex;
    gap: 5px;
}

.error-overlay {
    text-align: center;
    width: 100%;
    min-height: var(--main-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.textbox {
    max-width: 350px;
    text-align: justify;
    line-height: 1.5;
}

.lh-lg {
    line-height: 2 !important;
}

.lh-xl {
    line-height: 3 !important;
}

.textbox-lg {
    max-width: 500px;
    text-align: justify;
    line-height: 1.5;
}

.button-box {
    width: 350px;
}

footer {
    gap: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
    z-index: 2;
    position: relative;
}


footer ul li {
    text-align: start;
}

.footer-item {
    color: #2E2E2E;
}

.footer-title {
    color: #222222;
    font-weight: 700 !important;
}

.footer-subtitle {
    color: #222222;
    font-weight: 500 !important;
}

.footer-text {
    font-weight: 400;
    font-size: 14px;
    padding: 8px !important;
    line-height: 1.5;
    text-align: start;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

.copyright {
    padding-top: 20px;
    border-top: 1px #E4E4E4 solid;
}

.icon-enclosed {
    border-radius: var(--mud-default-borderradius);
    background-color: #F9FAFB;
    padding: 10px;
    display: inline-block;
}

.text-start {
    text-align: start !important;
}

.reference-image {
    position: relative;
}

.pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fullscreen-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    z-index: 1300;
    background-color: white;
}

.mobile-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 64px;
    background-color: white;
    box-shadow: 0 -1px 5px 3px #00000012;
    border-bottom: 1px solid #E4E4E4;
    z-index: 3;
}

.mobile-nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.mobile-nav ul li {
    width: 20%;
}

.mobile-nav nav,
.mobile-nav nav ul,
.mobile-nav nav ul li {
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav nav ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 8px;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    gap: 3px;
    margin-top: 1px;
}

.mobile-nav nav ul li a:hover {
    color: var(--primary);
}

.mobile-nav nav ul li a.active {
    color: var(--primary);
}

.mobile-nav nav ul li a svg {
    font-size: 25px;
}

.mobile-nav *,
.mobile-nav *::before,
.mobile-nav *::after {
    box-sizing: border-box;
}

.quick-login .mud-dialog-actions {
    padding-right: 23px;
    padding-left: 23px;
}

.list-group {
    display: flex;
    flex-direction: column;
}

.list-group button {
    width: 100%;
}

.list-group .list-item {
    padding: 20px 10px;
    line-height: 1;
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    border-radius: var(--mud-default-borderradius);
}

.list-group .list-item:hover {
    background-color: #fafafa;
}

.loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, rgba(0, 0, 0, 0.5) 90%, #0000);
    background: var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
    background-size: calc(100% / 3) 50%;
    animation: l3 1s infinite linear;
    transform: scale(0.35);
}

@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%
    }
    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%
    }
    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%
    }
    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%
    }
}

.p-absolute {
    position: absolute;
}

.form-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-item label {
    font-weight: 500;
}

.dialog-actions {
    display: flex;
    gap: 8px;
}

.sidebar-filter .mud-nav-link {
    line-height: 2;
    padding-left: 0;
    padding-right: 8px;
    font-size: 14px;
    font-weight: 400;
}

.mud-application-layout-rtl .sidebar-filter .mud-nav-link {
    padding-left: 8px;
    padding-right: 0;
}

.sidebar-filter .mud-nav-link-text {
    font-size: 12px;
    margin-right: 5px;
    margin-left: 5px;
}

.sidebar-filter .form-item {
    margin-right: 5px;
    margin-left: 5px;
}

.sidebar-filter .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 41px;
}

.browser {
    display: flex;
    gap: 10px;
    width: 100%;
}

.browser-article {
    width: 100%;
}

.browser .browser-top-bar-desktop {
    width: 100%;
    height: 41px;
    padding: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.active {
    font-weight: bold;
    color: var(--primary);
}

.browser-top-bar-mobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50px;
    align-items: center;
}

.action-sheet li {
    padding: 0 15px;
}

.action-sheet li {
    height: 50px;
}

.location-failed-list {
    line-height: 2;
}

.location-failed-list li svg {
    top: 5px;
    position: relative;
    color: var(--primary);
}

.browser-top-bar-mobile {
    background: #fff;
    padding: 0 16px;
}

.d-flex {
    display: flex;
}

.club-card .club-image {
    width: 90px;
    aspect-ratio: 1;
    z-index: 1;
    position: relative;
    border-radius: 100%;
}

.club-card .club-card-flex {
    width: 100%;
    min-width: 0;
}

.club-card .text-size{
    width: calc(100% - 16px);
}

.club-card .text-container{
    width: 100%;
    padding-inline-end: 16px;
}

.club-card {
    position: relative;
    height: var(--club-card-height);
}

.club-card .mud-paper {
    height: var(--club-card-height);
}

.club-card .club-image-skeleton {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    display: flex;
    justify-content: center;
}

.club-card .mud-card-actions {
    padding-top: 0;
}

.club-card .mud-card:hover {
    transition: 0.3s;
    background-color: rgba(0, 0, 0, 0.005);
}

.top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

.top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

.club-card .club-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-card .club-image {
    width: 90px;
    z-index: 1;
    position: relative;
    border-radius: 100%;
}

.post-card {
    position: relative;
    height: var(--post-card-height);
}

.post-card .mud-paper {
    height: var(--post-card-height);
}

.post-card .club-image-skeleton {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    display: flex;
    justify-content: center;
}

.post-card .mud-card-actions {
    padding-top: 0;
}

.post-card .mud-card:hover {
    transition: 0.3s;
    background-color: rgba(0, 0, 0, 0.005);
}

.post-card {
    position: relative;
    height: var(--post-card-height);
}

.post-card .mud-paper {
    height: var(--post-card-height);
}

.post-card .club-image-skeleton {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    display: flex;
    justify-content: center;
}

.post-card .mud-card-actions {
    padding-top: 0;
}

.post-card .mud-card:hover {
    transition: 0.3s;
    background-color: rgba(0, 0, 0, 0.005);
}

.post-card .info p {
    margin-top: 10px;
    text-align: justify !important;
}

.coach-card .coach-image {
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

.coach-card .coach-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coach-card .coach-city {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coach-card {
    position: relative;
    height: var(--coach-card-height);
}

.coach-card .mud-paper {
    height: var(--coach-card-height);
}

.coach-card .coach-card-flex {
    width: 100%;
}

.package-card {
    position: relative;
    height: var(--package-card-height);
}

.package-card .mud-paper {
    height: var(--package-card-height);
}

.package-card .mud-paper {
    height: var(--package-card-height);
}

.package-card .mud-card-actions {
    padding-top: 0;
}

.package-card .mud-card:hover {
    transition: 0.3s;
    background-color: rgba(0, 0, 0, 0.005);
}

.pagination {
    width: 100%;
    text-align: center;
}

.pagination .mud-typography-body1 {
    line-height: 28px !important;
}

.home-title {
    font-size: 26px;
    text-align: center;
    margin: 30px auto;
    font-weight: 400 !important;
}

.home-banner {
    height: 238px;
    width: 100%;
    background-image: url("../img/football-banner.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 500px;
    margin-bottom: 30px;
}

.home-club-category-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding-bottom: 30px;
}

.home-club-category-list .club-category-button {
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: white;
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
    gap: 4px;
    border: 1px #E4E4E4 solid;
}

.home-club-category-list .club-category-button:hover {
    transition: 0.2s;
    border: 1px solid var(--orange);
}

.home-quick-reserve {
    padding: 20px 10px;
}

.home-quick-reserve ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
    border-bottom: 1px solid rgba(228, 228, 228, 0.5);
}

.home-quick-reserve ul li button {
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: white;
    gap: 4px;
    padding: 12px 12px 10px;
}

.home-quick-reserve ul li button.active {
    color: var(--orange);
    border-bottom: 2px solid var(--orange);
}

.home-quick-reserve ul li button.active:hover {
    color: var(--orange);
}

.home-quick-reserve ul li button:hover {
    color: black;
    transition: 0.2s;
}

.home-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.home-feature .icon {
    display: flex;
    flex-direction: column;
    width: fit-content;
    border-radius: var(--mud-default-borderradius);
    padding: 18px;
    border: 1px solid #E4E4E4;
}

.home-feature:hover {
    transition: 0.2s;
    background: var(--orange);
    border-radius: var(--mud-default-borderradius);
    color: white !important;
}

.horizontal-card {
    display: flex;
    flex-direction: column-reverse;
    gap: 15px;
}

.horizontal-card .item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    position: relative;
    height: 100%;
}

.horizontal-card .item div {
    border-radius: var(--mud-default-borderradius);
}

.horizontal-card .item ul li {
    list-style: disc;
    line-height: 1.5;
    margin: 10px 0;
    margin-inline-start: 14px;
}

.horizontal-card .item .spacer{
    flex: 1;
}


@keyframes slides {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.logos {
    background: rgba(122, 185, 51, 4%);
    overflow: hidden;
    padding: 30px 10px;
    white-space: nowrap;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-inline-start: calc(-50vw - 5px);
    margin-inline-end: calc(-50vw + 5px);
}

.logos:before, .logos:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
}

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(122, 185, 51, 1%), rgba(122, 185, 51, 4%));
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(122, 185, 51, 1%), rgba(122, 185, 51, 4%));
}

.logo_items {
    display: inline-block;
    animation: 35s slides infinite linear;
}

.logo_items img {
    height: 100px;
    margin: 0 40px;
    filter: grayscale(1) opacity(0.6);
    border-radius: 100%;
}

.logo_items img:hover {
    transition: 0.2s;
    filter: grayscale(0) opacity(1);
}

.download-application .info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

.curved-section {
    position: relative;
    background: var(--primary);
}

.curved-section .content {
    position: relative;
    z-index: 1;
}

.content-above-curve {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url("../img/slope.svg") no-repeat center center;
    background-size: auto 100%;
    width: 100%;
    height: 90%;
}

.content-above-curve[dir="ltr"] {
    transform: scaleX(-1);
}

.content-above-curve svg {
    border-radius: var(--mud-default-borderradius);
}

.download-application .application-mockup {
    position: relative;
    bottom: 0;
    height: auto;
}

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

.download-application .appstores {
    margin-top: 5px;
}

.download-application .appstores img {
    width: 100%;
    height: auto;
    aspect-ratio: 292 / 94;
}

.download-application .items {
    display: flex;
    gap: 12px;
    flex-direction: column;
    position: relative;
    margin-inline-start: -80px;
}

.download-application .items li {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--mud-default-borderradius);
    padding: 10px;
    backdrop-filter: blur(20px);
    border: 1px solid #E4E4E4;
    box-shadow: var(--mud-elevation-1);
}

.bg-orange-light {
    background: var(--orange-light);
}

.bg-green-light {
    background: var(--green-light);
}

.package-page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.package-quick-reserve {
    margin-top: -50px;
}

.background-blur {
    backdrop-filter: blur(10px);
}

.loaded {
    display: none;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    z-index: 1299;
}

.loading .loader {
    --_g: no-repeat radial-gradient(circle closest-side, var(--primary), 90%, #0000) !important;
}

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

.align-items-start {
    align-items: start !important;
}

.text-content {
    line-height: 2.5 !important;
}

.text-content h1 {
    font-size: 18px !important;
    margin-top: 10px !important;
}

.text-content h2 {
    font-size: 16px !important;
    margin-top: 10px !important;
}

.text-content h3 {
    font-size: 14px !important;
    margin-top: 10px !important;
}

.text-content p, .text-content strong, .text-content b, .text-content span {
    font-size: 12px !important;
}

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

.club-facility {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 5px;
}

.invoice ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #EAEAEA;
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
}

.invoice ul li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

.mud-dialog-content {
    line-height: 2 !important;
}

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

.slider-button {
    background: white !important;
    padding: 20px;
    margin: 0 10px;
}

.white-space-break {
    white-space: break-spaces;
}

.comments {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*.comments li{
    background-color: var(--primary);
    color: whitesmoke !important;
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
}*/

.comments li {
    background-color: white;
    padding: 12px;
    border-radius: var(--mud-default-borderradius);
}

.comments li h6 {
    font-size: 14px !important;
}

.comments li .reply {
    border: 1px solid #EAEAEA;
    color: #222222 !important;
    padding: 12px;
    margin: 0 12px;
    border-radius: var(--mud-default-borderradius);
}

.club-sport {
    width: 100%;
    aspect-ratio: 1;
    background: center center;
    background-size: cover;
    border-radius: var(--mud-default-borderradius);
    position: relative;
}

.club-sport .overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.3);
    border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
}

.club-sport .overlay h3 {
    color: whitesmoke;
    font-weight: 500 !important;
}

.navigation-methods li a {
    padding: 10px;
    margin: 12px 0;
    border: 1px solid #EAEAEA;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navigation-methods li img{
    border-radius: var(--mud-default-borderradius);
}

.navigation-methods li a:hover {
    transition: 0.2s;
    background: rgba(0, 0, 0, 0.02);
}

.session-list li {
    padding: 12px 0;
    margin: 12px 0;
    border: 1px solid #EAEAEA;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.session-list li:hover {
    transition: 0.2s;
    background: rgba(0, 0, 0, 0.02);
}

.mud-typography-h5.mud-picker-month-selected {
    font-size: 14px !important;
}

.training-class-card {
    position: relative;
    height: var(--training-class-height);
}

.training-class-card .mud-paper {
    height: var(--training-class-height);
}

.training-class-title {
    height: 80px;
    text-align: center;
    font-weight: bold;
    padding: 16px;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.mud-grid-item:nth-child(odd) .training-class-title {
    background-color: var(--primary);
}

.mud-grid-item:nth-child(even) .training-class-title {
    background-color: var(--primary-light);
}

.training-class-title h6 {
    color: whitesmoke !important;
    font-size: 14px !important;
}

.training-class-card .info {
    padding: 8px 16px;
}


.private-class-card {
    position: relative;
    height: var(--private-class-height);
}

.private-class-card .mud-paper {
    height: var(--private-class-height);
}

.private-class-title {
    height: 80px;
    text-align: center;
    font-weight: bold;
    padding: 16px;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.mud-grid-item:nth-child(odd) .private-class-title {
    background-color: var(--primary);
}

.mud-grid-item:nth-child(even) .private-class-title {
    background-color: var(--primary-light);
}

.private-class-title h6 {
    color: whitesmoke !important;
    font-size: 14px !important;
}

.private-class-card .info {
    padding: 8px 16px;
}

.card-footer {
    padding: 16px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.select-day-of-the-week {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 5px;
}

.no-box-shadow {
    box-shadow: none !important;
}

.video-cover {
    width: 100%;
    position: relative;
    cursor: pointer;
}

.video-cover img {
    width: 100%;
    border-radius: var(--mud-default-borderradius);
}

.video-cover .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--mud-default-borderradius);
}

.video-cover .mud-icon-root {
    font-size: 65px;
    color: whitesmoke;
}

.coach-city-skeleton {
    width: 100%;
    display: flex;
}

.justify-content-center {
    justify-content: center !important;
}

.coach-header .coach-image {
    width: 60px;
    height: 60px;
    border-radius: var(--mud-default-borderradius);
}

.flex-row-end {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.aspect-1 {
    aspect-ratio: 1;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-danger{
    color: var(--danger) !important;
}

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

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

.text-ellipsis-1-line{
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-ellipsis-2-line {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.package-prices li {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 8px;
    margin: 12px 0;
    cursor: pointer;
}

.package-prices li:hover {
    transition: 0.2s;
    background: rgba(0, 0, 0, 0.02);
}

.z-1{
    position: relative !important;
    z-index: 1 !important;
}