:root {

    --strip_dashboard_link: 'https://billing.stripe.com/p/login/test_eVa8wK2gZcIV9qM6oo';


    --contentBackgroundColor: #f5f5f5;
    --inputContentBackgroundColor: #EFF0F4;
    --inputContentBackgroundColorRGB: 239, 240, 244;
    --containerTransparentLightBlue: rgba(77, 119, 191, 0.06);

    /* --maestroBlack: #171717; */
    --maestroLightBlue: #F5F7FB;
    --maestroBlack: #1b222f;
    --maestroBlackRGB: 27, 34, 47;
    --maestroLime: #ADFF7B;
    --maestroGreenLime: #31C475;
    --maestroGreenLimeRGB: 49, 196, 117;
    --maestroTennisBall: #b1e869;
    --maestroGreen: #529b28;
    --maestroLawnGreen: #749262;
    --maestroForestGreen: #AAE1B8;
    --maestroDarkBlue: #383946;
    --maestroGrayBlue: #747ab9;
    --maestroLightGrayBlue: #BEC2D0;
    --maestroRed: #DC4F4F;
    --maestroRedRGB: 220, 79, 79;
    --maestroErrorBackgroundRed: #dc4f4f1e;
    --maestroDarkOrange: #d49124;
    --maestroOrange: #ffc022;
    --maestroYellow: #EFB546;
    --maestroBlue: #5767F1;
    --maestroBlueRGB: 87, 103, 241;
    --maestroTurquoise: #53ffe8;
    --maestroTurquoiseDark: #2bc0ac;

    --spinnerBackgroundColor: rgba(255, 255, 255, 0.6);
    --alertBackgroundColor: rgba(255, 255, 255, 0.8);
    --maestroRose: #ff5a9c;
    --darkGrayHeader: #465364;
    --darkSectionBody: #e8fdffc5;
    --tennisCourtBlue: #33446D;
    --sectionDarkBlue: #152038;
    --darkButton: #061026;
    --maestroPlaceholder: #898e9a;
    --maestroUncheckedBox: #c5cce0;
    --stripeBlurple: #635BFF;
    --stripeBlurpleRGB: 99, 91, 255;
    --stripeDark: #11243E;
    --stripeDarkRGB: 17, 36, 62;
    --stripeLight: #F7F9FC;
    --stripeLightRGB: 247, 249, 252;


    --disabledGray: rgb(186, 189, 193);
    --disabledLightGray: #cbcdd4;

    --page-gridline-color: #f2f2f2;

    --max-site-width: 1150px;
    --spinner-width: 100px;

    --headerHeight: 80px;
    --max-width-container-padding: 40px;
    --header-animated-gradient: 400%;

    --defaultCornerRadius: 10px;
    --mediumButtonCornerRadius: 12px;
    --extraMediumButtonCornerRadius: 16px;
    --largeButtonCornerRadius: 20px;
    --defaultButtonHeight: 40px;
    --defaultInputHeight: 45px;

    --svgLineWidth: 1.8px;

}




/* Html and body */

html {
    width: 100%;
    height: auto;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-family: Fira, SamsungOne600, SamsungOne700;
    scroll-behavior: smooth;
}

body {
    font-family: Fira, SamsungOne600, SamsungOne700
}

html::after {
    content: '';
}




/* Fonts */

@font-face {
    font-family: Fira;
    font-weight: 450;
    src: url('../fonts/FiraCode-VariableFont_wght.ttf')
}

@font-face {
    font-family: SamsungOne700;
    font-weight: 700;
    src: url('../fonts/SamsungOne-700.ttf')
}

@font-face {
    font-family: SamsungOne600;
    font-weight: 600;
    src: url('../fonts/SamsungOne-600.ttf')
}


/* Media */

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Screen sizes */

@media only screen and (max-width: 480px) {

    .header-logo-full {
        display: none;
    }

    .header-logo {
        display: inline;
    }

    .header-button,
    #header-get-started-button {
        display: none;
    }

    .footer-grid-container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4);
    }

    .footer-grid-column {
        padding-bottom: 50px;
    }

    .bottom-align-text {
        position: relative;
        top: 10px;
    }

    .homepage-sample-cell-wide {
        width: 100%;
        /* min-width: 400px; */
        display: none;
    }

    .full-height-grid-column {
        padding-bottom: 60px;
    }

    .section .container,
    .homepage-grid-container,
    .homepage-grid-section {
        grid-template-columns: repeat(auto-fit, 100%) !important;
    }

    .homepage-tennis-court {
        height: 84vw;
    }

    .section-feature-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .section-feature-container-two-col {
        grid-template-columns: repeat(1, 1fr);
    }

    .header-menu {
        display: flex;
    }

    h1 {
        letter-spacing: -2px !important;
        font-size: 13vw !important;
    }

    h2 {
        font-size: 8vw !important;
        letter-spacing: -0.2vw !important;
    }

    .single-graphic-section-icon {
        width: 100%;
        min-width: 300px;
    }

    .single-graphic-section-description {
        padding-left: 20px;
    }

    .column-quarter-width {
        width: 100%;
    }

    .column-quarter-width-right {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {

    footer-content {
        padding: 70px 20px 20px 20px;
    }

    .full-height-grid-column {
        height: 20px;
    }

    .homepage-sticky-row {
        padding-bottom: 100px;
    }

    .homepage-app-view-animation-container {
        height: 90vw;
    }

    .homepage-app-view-animation-container-auto-height {
        height: 90vw;
    }

    .homepage-sample-cell-wide {
        width: 100%;
        max-width: 500px;
    }

    .section-image-div-centered {
        display: flex;
        height: 100%;
    }

    .homepage-sticky-animation-figure {
        height: 100%;
        transform-origin: 0% 0%;
    }

    .world-map-container {
        position: absolute;
        opacity: 0.5;
    }

    .no-right-gap {
        padding-right: 0px;
    }

    .pricing-feature-value-row {
        max-width: none;
    }

    .column-quarter-width {
        grid-template-columns: calc(50% - 20px);
    }

    .column-quarter-width-right {
        grid-template-columns: calc(50% - 20px);
    }
}

@media only screen and (max-width: 899px) {

    .pricing-features-comparison-grid {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }

    .pricing-features-first-col {
        display: none;
    }

    .pricing-feature-comparison-container {
        width: 100%;
    }

    .pricing-feature-section-value {
        display: flex;
        justify-content: center;
    }

    .pricing-feature-value-cell-feature {
        display: inline;
    }

    .pricing-feature-value-row {
        justify-content: space-between;
    }

    .removable-feature-header {
        display: flex;
    }
}

@media only screen and (min-width: 200px) {

    .column-quarter-width,
    .column-quarter-width-right {
        grid-template-columns: 100%;
    }
}

@media only screen and (min-width: 481px) {

    .header-logo-full {
        display: none;
    }

    .header-logo {
        display: inline;
    }

    .header-button,
    #header-get-started-button {
        display: none;
    }

    .footer-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid-column {
        padding-bottom: 50px;
    }

    .full-height-grid-column {
        padding-bottom: 50px;
        height: fit-content;
    }

    .bottom-align-text {
        position: absolute;
        /* height: 20px; */
        top: 68.5px;
    }


    .section .container,
    .homepage-grid-container,
    .homepage-grid-section {
        grid-template-columns: repeat(auto-fit, 100%) !important;
    }

    .homepage-sticky-row {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .homepage-tennis-court {
        height: 400px;
    }

    .homepage-sticky-animated-content-container {
        position: relative;
        width: 100%;
    }

    .section-feature-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-feature-container-two-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-menu {
        display: flex;
    }

    h1 {
        letter-spacing: -2px !important;
        font-size: 11vw !important;
    }

    h2 {
        font-size: 7vw !important;
        letter-spacing: -0.2vw !important;
    }

    .single-graphic-section-icon {
        width: 100%;
        min-width: 300px;
    }

    .single-graphic-section-description {
        padding-left: 20px;
    }

    .column-quarter-width,
    .column-quarter-width-right {
        grid-template-columns: 100%;
        gap: 50px;
    }
}

@media only screen and (min-width: 768px) {

    .section .container {
        background-color: transparent;
    }

    .header-logo-full {
        display: none;
    }

    .header-logo {
        display: inline;
    }

    .header-button,
    #header-get-started-button {
        display: none;
    }


    footer-content {
        padding: 70px 20px 70px 20px;
    }

    .footer-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-grid-column {
        padding-bottom: 0px;
    }

    .bottom-align-text {
        position: absolute;
        height: 20px;
        bottom: 0px;
    }

    .split-column {
        grid-template-columns: repeat(2, 1fr);
    }

    .no-right-gap {
        padding-right: var(--max-width-container-padding)
    }

    .section .container,
    .homepage-grid-container,
    .homepage-grid-section {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }

    .homepage-app-view-animation-container {
        height: 100vh;
    }

    .homepage-app-view-animation-container-auto-height {
        height: 100%;
    }

    .homepage-tennis-court {
        height: 500px;
    }

    .homepage-sticky-animated-content-container {
        position: absolute;
        width: 50%;
    }

    .homepage-sticky-animation-figure {
        scale: 0.8;
    }

    .homepage-sticky-row {
        grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
        padding-bottom: 300px;
    }

    .homepage-sticky-animation-figure {
        transform-origin: 0% 50%;
    }

    .homepage-sample-cell-wide {
        max-width: 100%;
    }

    .world-map-container {
        position: relative;
        opacity: 0.75;
    }


    .section-image-div-centered {
        display: inline;
        height: auto;
    }

    .section-feature-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-menu {
        display: flex;
    }

    h1 {
        letter-spacing: -3px !important;
        font-size: 7vw !important;
    }

    h2 {
        font-size: 45px + 2vw !important;
    }

    .single-graphic-section-icon {
        width: 50%;
    }

    .single-graphic-section-description {
        padding-left: 0px;
    }

    .pricing-feature-value-row {
        max-width: calc(50vw - 60px);
    }

    .column-quarter-width {
        grid-template-columns: 25% 75%;
        gap: 0px;
    }

    .column-quarter-width-right {
        grid-template-columns: 75% 25%;
        gap: 0px;
    }

    .column-half-width {
        grid-template-columns: 50% 50%;
    }
}

@media only screen and (min-width: 900px) {

    .header-logo-full {
        display: none;
    }

    .header-logo {
        display: inline;
    }

    .header-button,
    #header-get-started-button {
        display: inline;
    }

    .section .container,
    .homepage-grid-container,
    .homepage-grid-section {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }

    .homepage-sticky-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .section-feature-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .header-menu {
        display: none;
    }

    h2 {
        font-size: 60px !important;
    }

    .single-graphic-section-icon {
        width: 25%;
    }

    .pricing-features-comparison-grid {
        display: grid;
    }

    .pricing-features-first-col {
        display: flex;
    }

    .pricing-feature-value-cell-feature {
        display: none;
    }

    .pricing-feature-section-value {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .pricing-feature-value-row {
        max-width: calc(50vw - 60px);
        justify-content: center;
    }

    .removable-feature-header {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {

    .header-logo-full {
        display: inline;
    }

    .header-logo {
        display: none;
    }

    .header-page-buttons {
        display: flex;
    }

    .header-menu {
        display: none;
    }

    .section .container,
    .homepage-grid-container,
    .homepage-grid-section {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }

    h1 {
        letter-spacing: -3px !important;
        font-size: 85px !important;
    }
}

.smart-phone-size {
    max-width: 350px;
    width: calc(100% - 30px);
}

.vertical-fade-in {
    opacity: 0.0;
    top: -10px;
}



/* Page grid lines */

.body-parallax {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}

.section-parallax {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: var(--max-site-width);
}

.parallax {
    position: relative;
    display: flex;
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--max-site-width);
    justify-content: space-between;
    pointer-events: none;
    height: 100vh;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 0
}

.section-parallax-container {
    position: relative;
    display: flex;
    left: 0;
    right: 0;
    width: 100%;
    justify-content: space-between;
    pointer-events: none;
    height: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 0
}

.parallax-group {
    position: relative;
    display: block;
    height: 100vh;
    width: 1px;
}

.section-parallax-group {
    position: relative;
    display: block;
    height: 100%;
    width: 1px;
}

.section-parallax-horizontal-group {
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 1px;
    width: 100vw;
}

.dark-grid-line {
    border-left: 1px solid rgba(0, 0, 0, 0.07);
}

.dark-grid-line-dashed {
    background-image: linear-gradient(to bottom, rgb(0, 0, 0, 0.07) 40%, rgba(0, 0, 0, 0) 20%);
    background-position: left;
    background-size: 2px 10px;
    background-repeat: repeat-y;
}

.dark-grid-line-dashed-bottom {
    background-image: linear-gradient(to right, rgb(0, 0, 0, 0.07) 40%, rgba(0, 0, 0, 0) 20%);
    background-position: left;
    background-size: 10px 2px;
    background-repeat: repeat-x;
}

.light-grid-line {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.light-grid-line-dashed {
    background-image: linear-gradient(to bottom, rgb(255, 255, 255, 0.07) 40%, rgba(255, 255, 255, 0) 20%);
    background-position: left;
    background-size: 2px 10px;
    background-repeat: repeat-y;
}




/* Dim view overlay */

.dim-view {
    position: fixed;
    cursor: auto;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(215, 220, 255, 0.2);
    top: 0;
    animation: append-animate 0.2s ease;
    transition: opacity 0.2s ease;
}

.alert-dim-view {
    position: fixed;
    cursor: auto;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(215, 220, 255, 0.2);
    top: 0;
    opacity: 0.0;
}

.new-dim-view {
    animation: dim-view-overlay-animation 0.2s ease;
}

@keyframes dim-view-overlay-animation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}




/* Gradients and effects */

.light-shadow {
    box-shadow: 0 0 30px 0px #08080d1e;
}

.very-light-shadow {
    box-shadow: 0 0 30px 0px rgba(17, 10, 53, 0.1)
}

.orb {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    filter: blur(25px);
    background: radial-gradient(circle at center, white, transparent 40%), conic-gradient(from 45deg, #663a6d 52deg, #24425e 65deg, #18665c 120deg 307deg, #345a7f 353deg);
}

#gradient-canvas {
    width: 100%;
    /* min-width: var(--max-site-width); */
    height: 100%;
    position: absolute;
    top: 0px;
    /* clip-path: polygon(0 25vw, 100% 0, 100% calc(100% - 25vw), 0 100%); */
    --gradient-color-1: #d32c2c;
    --gradient-color-2: var(--maestroBlue);
    --gradient-color-3: #ff1616;
    --gradient-color-4: var(--maestroBlue);
    --gradient-color-5: #207688;
}

.gradient-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: visible;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0.75;
    /* -webkit-filter: blur(100px);
    filter: blur(100px); */
}

.blob-filter {
    content: '';
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(75px);
    backdrop-filter: blur(75px);
    background-color: rgba(255, 255, 255, 0.4);
    overflow: visible;
}

.bg-circle {
    position: absolute;
    left: 0%;
    /* top: 0%; */
    right: auto;
    bottom: auto;
    width: 30vw;
    height: 30vw;
    border-radius: 100%;
    background-color: #455268;
}

.bg-circle._1 {
    width: 35vw;
    height: 35vw;
    margin-top: 30vh;
    margin-left: -16%;
    /* border-radius: 20%; */
    /* border: 100px solid var(--maestroBlue); */
    background-color: var(--maestroBlue);
    animation: bg-color-change1 10s ease infinite alternate forwards;
}

@-webkit-keyframes bg-color-change1 {
    0% {
        background-color: var(--maestroBlue);
    }

    100% {
        background-color: var(--maestroTurquoise);
    }
}

@-moz-keyframes bg-color-change1 {
    0% {
        background-color: var(--maestroBlue);
    }

    100% {
        background-color: var(--maestroTurquoise);
    }
}

@keyframes bg-color-change1 {
    0% {
        background-color: var(--maestroBlue);
    }

    100% {
        background-color: var(--maestroTurquoise);
    }
}

.bg-circle._2 {
    width: 40vw;
    height: 45vw;
    margin-top: -20vw;
    margin-left: 40vw;
    border-radius: 20%;
    max-width: 400px;
    max-height: 400px;
    background-color: var(--maestroOrange);
    animation: bg-color-change2 8s ease infinite alternate forwards;
}

@-webkit-keyframes bg-color-change2 {
    0% {
        background-color: var(--maestroOrange);
    }

    100% {
        background-color: var(--maestroRed);
    }
}

@-moz-keyframes bg-color-change2 {
    0% {
        background-color: var(--maestroOrange);
    }

    100% {
        background-color: var(--maestroRed);
    }
}

@keyframes bg-color-change2 {
    0% {
        background-color: var(--maestroOrange);
    }

    100% {
        background-color: var(--maestroRed);
    }
}

.bg-circle._3 {
    left: auto;
    right: 0px;
    width: 70vh;
    height: 60vh;
    margin-top: -20vh;
    margin-right: -10vw;
    background-color: var(--maestroTurquoise);
    animation: bg-color-change3 14s ease infinite alternate forwards;
}

@-webkit-keyframes bg-color-change3 {
    0% {
        background-color: var(--maestroTurquoise);
    }

    100% {
        background-color: #d1ff67;
    }
}

@-moz-keyframes bg-color-change3 {
    0% {
        background-color: var(--maestroTurquoise);
    }

    100% {
        background-color: #d1ff67;
    }
}

@keyframes bg-color-change3 {
    0% {
        background-color: var(--maestroTurquoise);
    }

    100% {
        background-color: #d1ff67;
    }
}

.bg-circle._4 {
    left: auto;
    right: 0%;
    bottom: 0px;
    width: 40vw;
    height: 40vh;
    margin-top: 35%;
    margin-right: -10%;
    margin-bottom: -10%;
    background-color: var(--maestroOrange);
    opacity: 0.5;
    animation: bg-color-change4 14s ease infinite alternate forwards;
}

@-webkit-keyframes bg-color-change4 {
    0% {
        background-color: var(--maestroOrange);
    }

    100% {
        background-color: var(--maestroRed);
    }
}

@-moz-keyframes bg-color-change4 {
    0% {
        background-color: var(--maestroOrange);
    }

    100% {
        background-color: var(--maestroRed);
    }
}

@keyframes bg-color-change4 {
    0% {
        background-color: var(--maestroOrange);
    }

    100% {
        background-color: var(--maestroRed);
    }
}

.bg-circle._5 {
    left: 0px;
    /* right: 0%; */
    bottom: 0px;
    width: 50vw;
    height: 50vh;
    margin-top: 20%;
    margin-left: 0%;
    background-color: var(--maestroRose);
    opacity: 0.5;
    animation: bg-color-change4 14s ease infinite alternate forwards;
}

@-webkit-keyframes bg-color-change4 {
    0% {
        background-color: var(--maestroRose);
    }

    100% {
        background-color: var(--maestroOrange);
    }
}

@-moz-keyframes bg-color-change4 {
    0% {
        background-color: var(--maestroRose);
    }

    100% {
        background-color: var(--maestroOrange);
    }
}

@keyframes bg-color-change4 {
    0% {
        background-color: var(--maestroRose);
    }

    100% {
        background-color: var(--maestroOrange);
    }
}




/* Header styles */

h1 {
    font-size: 90px;
    color: var(--maestroBlack);
    font-weight: 1000;
    text-align: left;
    font-family: SamsungOne700;
    letter-spacing: -3.5px;
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

h2 {
    color: var(--maestroBlack);
    text-align: left;
    font-family: SamsungOne700;
    letter-spacing: -2px;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}

h3 {
    font-size: 40px;
    color: var(--maestroBlack);
    text-align: left;
    font-family: SamsungOne700;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
    letter-spacing: -0.075vw;
}

h4 {
    font-size: 30px;
    color: var(--maestroBlack);
    text-align: left;
    font-family: SamsungOne700;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    padding-bottom: 20px;
}

h5 {
    font-size: 18px;
    color: var(--maestroBlack);
    text-align: left;
    font-family: SamsungOne600;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
}

h6 {
    font-size: 16px;
    color: var(--maestroBlack);
    text-align: left;
    font-family: SamsungOne600;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
}

p,
td {
    font-family: SamsungOne600;
}

p.centered {
    text-align: center;
}

.bold {
    font-family: SamsungOne700;
}

div.app-version-tag {
    background-color: rgba(77, 196, 255, 0.2);
    border-radius: 50px;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    width: max-content;
}

div.app-version-tag-shop {
    background-color: rgba(148, 77, 255, 0.2);
}

div.app-version-tag-club {
    background-color: var(--maestroBlue)
}

a.support-reference-tag {
    /* border: solid 1px; */
    padding: 5px;
    padding-left: 0px;
    padding-right: 10px;
    width: max-content;
    font-family: SamsungOne700;
    text-decoration: none;
    font-size: 14px;
    color: var(--maestroBlue);
    height: fit-content;
    transition: ease-in 50ms;
}

a.support-reference-tag:hover {
    color: var(--maestroBlack);
}

a.app-feature-tag {
    background-color: rgba(77, 196, 255, 0.2);
    border-radius: 50px;
    /* border: solid 1px; */
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    width: max-content;
    font-family: SamsungOne700;
    text-decoration: none;
    font-size: 14px;
    color: var(--maestroBlue);
    height: fit-content;
    transition: ease-in 150ms;
}

p.app-version-tag {
    font-size: 14px;
    color: var(--maestroBlue);
    font-family: SamsungOne700;
}

p.app-version-tag-shop {
    color: var(--maestroBlue);
}

p.app-version-tag-club {
    color: white;
}

a.app-feature-tag:hover {
    background-color: var(--maestroBlue);
    color: white;
}

.play-section-header {
    font-size: 22px;
    padding: 0px;
}

.no-padding-text {
    padding: 0px;
}

.homepage-header-animated-gradient {
    padding-bottom: 30px;
    background: linear-gradient(45deg, rgba(255, 61, 61, 1) 0%, rgba(87, 94, 241, 1) 15%, rgb(239, 70, 70) 30%, rgb(9, 19, 41) 30%, rgb(9, 21, 41) 55%, rgba(87, 94, 241, 1) 55%, rgb(239, 70, 70) 70%, rgba(87, 94, 241, 1) 85%, rgba(255, 61, 61, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 400% auto;
    color: transparent;
    animation-fill-mode: forwards;
    animation-composition: add;
    animation: homepage-header-gradient-animation 20s linear infinite alternate;
}

.header-animated-gradient {
    padding-bottom: 30px;
    background: linear-gradient(45deg, rgb(41, 9, 9) 0%, rgb(41, 9, 9) 40%, var(--maestroRed) 40%, rgba(87, 94, 241, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 300% auto;
    animation-fill-mode: forwards;
    animation-composition: add;
    animation: header-gradient-animation 10s linear infinite alternate;
}

.fixed-size-header {
    font-size: 60px !important;
    letter-spacing: -2px !important;
}

.single-col-header {
    width: 100%;
    padding-left: var(--max-width-container-padding);
}

.single-section-header-container {
    margin-left: 40px;
    margin-right: 40px;
}

.half-width-section-header-container {
    max-width: 50%;
    height: auto;
    width: max-content;
    padding-left: 40px;
    padding-right: 20px;
}

.l-header1 {
    font-family: SamsungOne700;
    font-size: 24px;
    color: var(--maestroBlack);
    padding-bottom: 20px;
    padding-top: 60px;
}

.l-header2 {
    font-family: SamsungOne700;
    font-size: 20px;
    color: var(--maestroBlack);
    padding-bottom: 30px;
    padding-top: 30px;
}

.l-body {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 22px;
    color: var(--darkGrayHeader);
}

li {
    font-family: SamsungOne600;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 20px;
}

.fit-height-text {
    line-height: 0.75;
}




@-webkit-keyframes homepage-header-gradient-animation {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 170% 50%;
    }
}

@-moz-keyframes homepage-header-gradient-animation {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 170% 50%;
    }
}

@keyframes homepage-header-gradient-animation {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 170% 50%;
    }
}

@-webkit-keyframes header-gradient-animation {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@-moz-keyframes header-gradient-animation {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes header-gradient-animation {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.section-header-small-colored {
    font-size: 20px;
    color: var(--maestroBlue);
    text-align: left;
    font-family: SamsungOne700;
    letter-spacing: -0.5px;
    margin: 0;
    padding: 0;
    padding-bottom: 40px;
}

.dark-section-small-header {
    color: var(--maestroTurquoise);
}

.section-text-description {
    color: var(--darkGrayHeader);
    letter-spacing: -0.25px;
}

.section-cell-text {
    font-size: 18px;
    text-align: left;
    font-family: SamsungOne700;
    letter-spacing: -0.2px;
    margin: 0;
    padding: 0;
    padding-left: 20px;
    color: var(--maestroBlack);
}

.section-cell-text-17 {
    font-size: 17px;
    text-align: left;
    font-family: SamsungOne700;
    letter-spacing: -0.2px;
    margin: 0;
    padding: 0;
    padding-left: 20px;
    color: var(--maestroBlack);
}

.section-cell-text-no-padding {
    font-size: 20px;
    text-align: left;
    font-family: SamsungOne700;
    letter-spacing: -0.2px;
    margin: 0;
    padding: 0px;
    padding-left: 0px;
    color: var(--maestroBlack);
}

.cell-header {
    padding-left: 19px;
    margin-top: 5px;
    border-left: 1px solid var(--maestroRose);
}

.article-section-header {
    font-size: 21px;
    color: var(--maestroBlack);
}

.feature-header {
    padding-left: 19px;
    margin-left: -20px;
    border-left: 1px solid var(--maestroRose);
    padding-bottom: 0px;
    padding-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.small-header-bottom-padding {
    padding-bottom: 15px;
}

.small-header-top-padding {
    padding-top: 10px;
}

.footer-header {
    font-family: SamsungOne700;
    text-align: left;
    font-size: 15px;
    height: 25px;
    margin-bottom: 15px;
}

.cell-description {
    font-family: SamsungOne600;
    font-size: 15.5px;
    line-height: 25px;
    color: var(--darkGrayHeader);
}

.small-description-text {
    padding-left: 0px;
    font-size: 15px;
    font-family: SamsungOne600;
}

.bottom-align-text {
    bottom: 0px;
}

.bold {
    font-family: SamsungOne700;
}

.gray-text {
    color: var(--darkGrayHeader);
}

.pricing-feature-section-header {
    font-size: larger;
    padding: 0px;
    padding-left: 20px;
    margin-top: 100px;
    height: 30px;
    font-family: SamsungOne700;
}

.pricing-feature-section-header-first {
    margin-top: 255px;
}





/** Header */


header {
    height: var(--headerHeight);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--maestroLightBlue);
    position: relative;
    top: 0px;
    width: 100%;
    z-index: 10;
}

.homepage-header {
    position: absolute;
    background-color: transparent;
}

.transparent-header {
    background-color: transparent;
}

header-content {
    max-width: var(--max-site-width);
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-left: var(--max-width-container-padding);
    padding-right: var(--max-width-container-padding);
}

/* Header elements */

.header-logo-full {
    height: 50px;
    width: auto;
    aspect-ratio: auto;
    cursor: pointer;
    margin: auto;
}

.header-logo {
    height: 50px;
    width: auto;
    aspect-ratio: auto;
    cursor: pointer;
    margin: auto;
}

.header-menu {
    height: 100%;
    min-height: 30px;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    border-radius: var(--defaultCornerRadius);
    background-color: rgba(22, 28, 46, 0.05);
    transition: background-color 0.15s;
    cursor: pointer;
}

.header-menu:hover {
    background-color: rgba(36, 48, 84, 0.15);
}

.header-dropdown-menu {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: auto;
    background-color: white;
    margin-right: 30px;
    margin-top: 20px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 0 20px 0px #08080d1e;
    animation: header-dropdown-menu-keyframes 0.15s ease;
    transition: top;
    transform-origin: top;
    z-index: 200;
}

@keyframes header-dropdown-menu-keyframes {
    from {
        top: -10px;
        transform: scaleY(0.5);
    }

    to {
        top: 0px;
        transform: scaleY(1);
    }
}





/* Footer */

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--maestroLightBlue);
    width: 100%;
}

footer-content {
    max-width: var(--max-site-width);
    height: 100%;
    width: 100%;
    display: flex;
}

.footer-grid-container {
    display: grid;
    width: 100%;
}

.footer-grid-column {
    display: grid;
    width: 100%;
    height: max-content;
    grid-template-rows: min-content;
    margin-left: 20px;
    padding-right: 40px;
    position: relative;
}

.footer-grid-button-column {
    display: grid;
    row-gap: 10px;
}

.full-height-grid-column {
    height: 100%;
    min-height: 100px;
}




/* Sections */

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

section {
    position: relative;
    max-width: 100%;
}

.section-mask {
    height: 100%;
    width: 100%;
    position: relative;
}

.section-image-div {
    width: 100%;
    position: absolute;
}

.section-image-div-centered {
    width: 100%;
    position: absolute;
    justify-content: center;
}

.full-height {
    height: 100%;
    width: 100%;
}

.section-spacer {
    width: 1fr;
    height: 100px;
}

.section-spacer-custom {
    width: 1fr;
    height: var(--height);
}

.section {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow-y: visible;
    contain: paint;
}

.light-blue-section {
    background-color: var(--containerTransparentLightBlue);
}

.dark-section {
    background-color: var(--sectionDarkBlue);
}

.section-center-align-section {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow-y: visible;
    contain: paint;
    align-items: center;
}

.overflow-x {
    contain: none;
}

.no-overflow-x {
    overflow-x: hidden;
    overflow-y: visible;
    contain: none;
}

.split-column {
    grid-template-columns: repeat(2, 1fr);
}

.no-padding-section {
    padding-top: 0px;
    padding-bottom: 0px;
}

.top-padding-medium {
    padding-top: 50px;
}

.top-padding-small {
    padding-top: 30px;
}

.top-padding-large {
    padding-top: 100px;
}

.no-top-padding {
    padding-top: 0px;
}

.top-bottom-padding-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.bottom-padding-section {
    padding-top: 0px;
    padding-bottom: 100px;
}

.bottom-padding-section-large {
    padding-bottom: 200px;
}

.bottom-padding-section-100 {
    padding-bottom: 100px;
}

.bottom-padding-section-extra-medium {
    padding-top: 0px;
    padding-bottom: 75;
}

.bottom-padding-section-medium {
    padding-top: 0px;
    padding-bottom: 50;
}

.bottom-padding-section-small {
    padding-top: 0px;
    padding-bottom: 30px;
}

.feature-page-section-padding {
    padding-top: 60px;
    padding-bottom: 0px !important;
}

.section-padding {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
    padding-top: 100px;
}

.no-bottom-padding {
    padding-bottom: 0px;
}

.default-side-padding {
    padding-left: 20px;
    padding-right: 20px;
}

.default-side-margin {
    margin-left: 20px;
    margin-right: 20px;
}

.section .container {
    flex: 1;
    display: grid;
    flex-direction: column;
    align-self: center;
    gap: 100px;
    row-gap: 60px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding-left: var(--max-width-container-padding);
    padding-right: var(--max-width-container-padding);
    max-width: var(--max-site-width);
}

.no-side-padding-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.feature-inset-section {
    padding-left: 60px;
}

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

.no-padding {
    padding: 0px;
}




.row-container {
    width: 100%;
    max-width: var(--max-site-width);
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: var(--max-width-container-padding);
    padding-right: var(--max-width-container-padding);
}

.full-container {
    width: 100%;
    height: 100%;
}

.flex-container {
    overflow: visible;
    display: flex;
    flex-direction: row;
    flex: 1;
    padding-left: var(--max-width-container-padding);
    padding-right: var(--max-width-container-padding);
    max-width: var(--max-site-width);
    align-self: center;
}

.left-flex-container-row {
    display: flex;
    justify-content: left;
}

.left-flex-container-col {
    display: flex;
    flex-direction: column;
}

.centered-flex-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

.centered-flex-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
}

.section .container-no-gap {
    column-gap: 0px;
}


.section .container .column {
    position: relative;
    display: flex;
    width: 100%;
}

.section .container .column-centered {
    position: relative;
    display: flex;
    align-items: center;
}

.section .container .column-right {
    position: relative;
    display: flex;
    margin: auto;
    align-content: center;
    flex: 1;
}



.section .container .column .top-col {
    /* position: absolute; */
    display: ine-block;
    align-self: flex-start;
    bottom: 0;
}

.top-col-large-padding {
    padding-top: 100px;
}

.top-col-medium-padding {
    padding-top: 50px;
}

.top-col-no-padding {
    padding-top: 0px;
}

.right-padding-medium {
    padding-right: 40px;
}


.section .container .column .mid-col {
    /* position: absolute; */
    display: inline-block;
    align-self: center;
    bottom: 0;
}

.section .container .column .bottom-col {
    /* position: absolute; */
    display: inline-block;
    align-self: flex-end;
    bottom: 0;
}


.flex-column-list-default-spacing {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flex-column-list-medium-spacing {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.flex-column-repeat-list {
    display: flex;
    flex-wrap: wrap;
    background-color: rgba(232, 248, 255, 0.8);
    border-radius: 24px;
    justify-content: space-evenly;
    margin-left: 20px;
    margin-right: 20px;
    padding: 15px;
    gap: 10px;
}

.relative-container {
    position: relative;
}

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




/* Grid containers */

.two-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    @media only screen and (min-width: 0px) and (max-width: 767px) {
        padding: 20px;
    }
}




/* Spacers */

.line-separator {
    height: 2px;
    width: 100%;
    background-color: var(--contentBackgroundColor);
    border-radius: 2px;
    margin-top: 10px;
    margin-bottom: 5px;
}




/* Section cells */

.section-feature-container {
    width: 100%;
    display: grid;
    row-gap: 60px;
}

.section-feature-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    height: 100%;
    padding-right: 40px;
}

.feature-cell-country {
    display: flex;
    flex-direction: row;
    height: min-content;
    flex: 1;
    padding-left: 20px;
    gap: 10px;
    align-items: center;
}

.feature-cell-country p {
    /* background-color: rgba(255, 255, 255, 0.75); */
    background: var(--maestroLightBlue);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding-left: 4px;
    padding-right: 4px;
}

.homepage-sticky-row {
    height: auto;
    width: 100%;
    display: grid;
    gap: 40px;
}

.homepage-sticky-animation-figure {
    z-index: 100;
}

.homepage-payment-methods-grid {
    max-width: 100%;
    margin-top: 50px;
    margin-bottom: 10px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-content: space-between;
    position: relative;
    padding: 20px;
    border-radius: 16px;
    background-color: rgba(126, 132, 159, 0.05)
}

.payment-method-grid-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    height: 30px;
}

.payment-methods-svg {
    width: 100%;
    height: 30px;
    left: 0px;
    position: absolute;
}

.no-right-gap {
    gap: 0px;
}

.feature-sub-section-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background-color: rgb(0, 0, 0, 0.02);
    padding: 10px;
    border-radius: 12px;
}

.single-graphic-section {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
}

.single-graphic-section-icon {
    min-width: 150px;
    padding-left: 40px;
    padding-left: 40px;
    padding-right: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
    align-content: center;
}


/* Pricing page */

.pricing-feature-section {
    height: var(--featureHeight);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.075);
    padding-left: 20px;
    font-family: SamsungOne600;
}

.pricing-feature-section-value {
    align-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
    height: var(--featureHeight);
    border-top: 1px solid rgba(0, 0, 0, 0.075);
    padding-left: 20px;
}





/* Home page sections */

.homepage-main-section {
    height: auto;
    min-height: 100px;
    --columns: 2;
    z-index: 1;
    position: relative;
    padding-bottom: 0px;
    padding-top: calc(100px + var(--headerHeight));
}

.homepage-sticky-animated-content-container {
    height: 100%;
    top: 0;
    right: 0px;
    align-items: center;
}

.side-animated-content-container {
    height: 100%;
    top: 0;
    right: 0px;
    align-items: center;
}

.homepage-app-view-animation-container {
    order: 2;
    z-index: 2;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-animated-image-container {
    order: 2;
    z-index: 2;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage-app-view-animation-container-auto-height {
    order: 2;
    z-index: 2;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage-tennis-court {
    max-height: 500px;
}

.homepage-sample-cell-wide {
    align-self: center;
}

.column-quarter-width {
    display: grid;
}

.column-quarter-width-right {
    display: grid;
}

.column-half-width {
    display: grid;
}





/* Posts & articles */

.event-post-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.post-hover-container {
    cursor: pointer;
    transition: 75ms;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 15px;
    background-color: rgba(74, 96, 204, 0.05);
    margin-right: 20px;
}

.post-hover-container:hover {
    /* transform: scale(1.01); */
    background-color: rgba(57, 73, 153, 0.1);
}

.sticky-outline-container {
    height: min-content;
    background-color: rgba(49, 55, 133, 0.05);
    max-width: 300px;
    border-radius: 12px;
    justify-content: left;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    gap: 0px;
    margin-right: 0px;
}

.highlight-callout {
    background-color: rgba(49, 55, 133, 0.05);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    color: var(--maestroBlack);
}





#page-container {
    position: relative;
    min-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#content-wrap {
    width: 100%;
    margin: 0;
    margin-bottom: 80px;
}




/* Popup & overlay menus */

.white-menu {
    display: grid;
    background-color: white;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    border-radius: 16px;
    row-gap: 20px;
    grid-template-rows: min-content;
    height: min-content;
}

.light-menu {
    background-color: rgba(243, 243, 248, 0.3);
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    border-radius: 16px;
    row-gap: 20px;
    grid-template-rows: min-content;
    height: min-content;
}





/* A tags */

.title-link {
    color: var(--maestroBlue);
    text-decoration: none;
    font-family: SamsungOne700;
    font-size: 17px;
}

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

.title-link:hover,
.small-link:hover {
    color: var(--maestroGrayBlue);
}

.blue-a {
    color: var(--maestroBlue);
    padding-left: 2px;
    text-decoration: none;
}

.blue-a:hover {
    color: var(--maestroGrayBlue);
}

.dark-a {
    color: var(--maestroBlack);
    padding-left: 2px;
    text-decoration: none;
    transition: linear 75ms;
}

.small-link {
    font-size: 15px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.dark-a:hover {
    color: var(--maestroBlue);
}





/* Buttons */

button {
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    border: 0px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.header-button {
    font-family: SamsungOne700;
    font-size: 15px;
    padding: 10px;
    -webkit-transition: opacity 0.15s;
    transition: opacity 0.15s;
}

.footer-button {
    font-family: SamsungOne600;
    font-size: 15px;
    text-align: left;
    margin: 0px;
    /* height: 30px; */
    -webkit-transition: opacity 0.15s;
    transition: opacity 0.15s;
    height: min-content;
}

.header-button:hover,
.footer-button:hover {
    opacity: 0.5;
}

.hover-text-opacity-button {
    font-family: SamsungOne700;
    font-size: 15px;
    padding: 10px;
    -webkit-transition: opacity 0.15s;
    /* For Safari 3.0 to 6.0 */
    transition: opacity 0.15s;
    /* For modern browsers */
}

.hover-text-opacity-button:hover {
    opacity: 0.5;
}


.maestro-blue-button {
    position: relative;
    transition: all 0.2s ease;
    padding-left: 12px;
    padding-right: 8px;
    justify-content: center;
    vertical-align: middle;
    height: var(--defaultButtonHeight);
    background: var(--maestroBlue);
    border-radius: var(--defaultCornerRadius);
}

.maestro-dark-button {
    position: relative;
    transition: all 0.2s ease;
    padding-left: 12px;
    padding-right: 8px;
    justify-content: center;
    vertical-align: middle;
    height: var(--defaultButtonHeight);
    background: var(--maestroBlack);
    border-radius: var(--defaultCornerRadius);
}

.maestro-drop-down-button {
    position: relative;
    transition: all 0.2s ease;
    padding-left: 15px;
    padding-right: 8px;
    justify-content: center;
    vertical-align: middle;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--defaultInputHeight);
    background: var(--maestroLightBlue);
    border-radius: var(--defaultCornerRadius);
}

.maestro-white-hover-button {
    font-family: SamsungOne700;
    font-size: 15px;
    position: relative;
    transition: all 0.2s ease;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.15s ease;
    height: var(--defaultButtonHeight);
    background: white;
    border-radius: var(--defaultCornerRadius);
}

.maestro-white-hover-button:hover {
    color: var(--maestroBlue);
}

.maestro-dark-hover-button {
    font-family: SamsungOne700;
    font-size: 15px;
    position: relative;
    transition: all 0.2s ease;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.15s ease;
    height: var(--defaultButtonHeight);
    color: white;
    background: var(--darkButton);
    border-radius: var(--defaultCornerRadius);
}

.maestro-dark-hover-button:hover {
    color: var(--maestroTurquoise);
    background: black;
}

.white-button-large {
    font-family: SamsungOne700;
    font-size: 15px;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    border-radius: var(--defaultCornerRadius);
    color: var(--maestroBlack);
    box-shadow: 0 0 20px 0px #08080d11;
    transition: all 0.15s ease;
    position: relative;
    display: flex;
    align-items: center;
}

.white-button-large:hover {
    color: var(--maestroBlue);
}

.maestro-blue-button:before,
.maestro-dark-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.15s ease;
    border-radius: var(--defaultCornerRadius);
}

.maestro-blue-button span,
.maestro-dark-button span,
.maestro-drop-down-button span {
    position: relative;
    font-size: 15px;
    color: white;
    font-family: SamsungOne700;
    font-weight: 900;
}

.maestro-drop-down-button span {
    color: var(--maestroBlack);
    font-family: SamsungOne600;
}

.maestro-blue-button:hover:before {
    width: 100%;
    background: var(--maestroDarkBlue);
}

.maestro-dark-button:hover:before {
    width: 100%;
    background: var(--darkGrayHeader);
}

.button-nofill {
    position: relative;
    /* margin: auto; */
    font-size: 15px;
    color: var(--maestroBlack);
    font-family: SamsungOne700;
    font-weight: 900;
    transition: all 0.2s ease;
    padding-left: 12px;
    padding-right: 8px;
    height: var(--defaultButtonHeight);
    justify-content: center;
    vertical-align: middle;
}

.custom-button {
    color: var(--textColor);
    font-family: var(--font);
}

.nofill-no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.button-nofill:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: var(--defaultCornerRadius);
    width: 100%;
    height: 100%;
    transition: all 0.15s ease;
}

.custom-button:before {
    color: var(--textColor);
}

.button-nofill:hover {
    color: var(--maestroGrayBlue);
}

.custom-button:hover {
    color: var(--hoverColor);
}

.button-nofill span {
    position: relative;
    font-size: 15px;
    color: var(--maestroDarkBlue);
    font-family: SamsungOne700;
    font-weight: 900;
}

.light-nofill {
    color: white;
}

button .button-nofill:hover:before {
    width: 100%;
    color: var(--maestroGrayBlue) !important;
}

.no-arrow-button {
    padding-right: 15px;
    padding-left: 15px;
}


.container-button {
    transition: opacity 150ms ease;
    opacity: 1.0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    margin-top: 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 0px;
    font-size: 15px;
    font-family: SamsungOne600;
    color: white;
    background-color: var(--maestroBlueRGB);
}

.container-button.nofill {
    height: fit-content;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
}

.container-button:hover {
    opacity: var(--alpha, 0.75);
}

form:valid input[type="submit"] {
    background-color: #cfc;
    color: #060;
}

form:invalid input[type="submit"] {
    background-color: #fcc;
    color: #600;
}




/* Select drop down */

.maestro-drop-down {
    position: relative;
    transition: all 0.2s ease;
    padding-left: 15px;
    padding-right: 8px;
    justify-content: center;
    cursor: pointer;
    vertical-align: middle;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: none;
    font-size: 15px;
    align-items: center;
    height: var(--defaultInputHeight);
    background: none;
    background-color: var(--maestroLightBlue);
    border-radius: var(--defaultCornerRadius);
    font-family: SamsungOne600;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
}

.maestro-drop-down-default {
    background-color: var(--inputContentBackgroundColor);
}



/* Alert */

.alert-container {
    background-color: white;
    width: 300px;
    border-radius: 16px;
    animation: alert-menu-keyframes 0.25s cubic-bezier(0.23, 1, 0.320, 1) 100ms forwards;
    transition: bottom;
    opacity: 0.0;
}

.alert-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.alert-title {
    font-size: 15px;
    font-family: SamsungOne700;
    background-color: var(--maestroBlack);
    text-align: center;
    color: white;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}

.alert-body {
    font-size: 15px;
    font-family: SamsungOne600;
    padding-bottom: 10px;
}

@keyframes alert-menu-keyframes {
    from {
        margin-top: 30px;
        opacity: 0.0;
    }

    to {
        margin-top: 0px;
        opacity: 1.0;
    }
}



/* Spinner */

.spinner-view {
    background-color: var(--spinnerBackgroundColor);
    opacity: 1;
    flex: 1;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border-radius: 10px;
    display: flex;
    opacity: 0.0;
    animation: show-opactiy-keyframes 0.3s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

.spinner-loader-view {
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
    flex: 1;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border-radius: 10px;
    display: flex;
    opacity: 0.0;
    animation: show-opactiy-keyframes 0.25s cubic-bezier(0.23, 1, 0.320, 1) 200ms forwards;
}

@keyframes show-opactiy-keyframes {
    from {
        opacity: 0.0;
    }

    to {
        opacity: 1.0;
    }
}

@keyframes remove-opacity-keyframes {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}




/* Checkbox */

fieldset {
    margin: 0px;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

fieldset label {
    justify-content: flex-start;
    display: flex;
    align-content: center;
    margin: 0px;
    padding: 0px;
    border: none;
    gap: 10px;
}

fieldset span {
    font-family: SamsungOne600;
}

.checkbox {
    margin-top: 0px;
    width: 20px;
    height: 20px;
    color: var(--maestroRed);
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    padding-left: 0px;
    background: none;
    outline: 0;
    flex-grow: 0;
    border-radius: 12px;
    transition: background 300ms;
    cursor: pointer;
}

.checkbox::before {
    margin-left: 0px;
    padding-left: 0px;
    content: "";
    color: transparent;
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background-color: var(--maestroUncheckedBox);
    transition: background 150ms;
    background-size: contain;
}

.checkbox:checked {
    padding-left: 0px;
    background-color: var(--maestroBlue);
}

.checkbox:checked::before {
    box-shadow: none;
    background-color: var(--maestroBlue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
}

.checkbox-span {
    font-family: 'SamsungOne600';
    font-size: 16px;
}




/* Input */

input {
    height: var(--defaultInputHeight);
    background-color: var(--inputContentBackgroundColor);
    /* background-color: transparent; */
    border: none;
    border-width: 1px;
    border-color: var(--maestroLightBlue);
    border-radius: 10px;
    width: 100%;
    margin-top: 10px;
    font-family: SamsungOne600;
    position: relative;
    color: var(--maestroBlack);
    padding-left: 15px;
    padding-right: 15px;
    font-size: 15px;
}

input.no-margin {
    margin-top: 0px;
}

.input-header {
    margin-bottom: 10px;
}

.search-input {
    background-image: url(../../assets/svgs/search-icon.svg);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position-x: 10px;
    background-position-y: 50%;
    padding-left: 32px;
}

.white-input-border {
    background-color: white;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 0px;
}

.standout-input {
    border: 1px solid rgba(var(--maestroBlackRGB), 0.75);
}

.input-with-icon {
    padding-left: 32px;
    padding-right: 10px;
}

.input-icon {
    position: absolute;
    padding-left: 10px;
    height: 15px;
}

::placeholder {
    color: var(--maestroPlaceholder);
}

.white-input {
    background-color: white;
}

.light-blue-input {
    background-color: var(--maestroLightBlue);
}

input:focus {
    outline: none;
    border: solid;
    border-width: 2px;
    outline-color: black;
    border-color: #818DF4;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--maestroBlue);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--inputContentBackgroundColor);
}



textarea {
    font-family: SamsungOne600;
    font-size: 16px;
    color: var(--maestroBlack);
    max-width: 100%;
    width: 100%;
    resize: vertical;
    border: none;
    border-radius: 10px;
    background-color: var(--maestroLightBlue);
    padding: 15px;
    margin-top: 10px;
}


.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .15s;
    transition: .15s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .15s;
    transition: .15s;
}

input:checked+.slider {
    background-color: var(--maestroBlue);
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
}

.time-input {
    height: 35px;
    cursor: pointer;
    position: relative;
    text-align: left;
}





/* Input validation */

form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.input-div {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-input-message {
    margin-top: 5px;
    padding: 4px 8px;
    margin-bottom: 5px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    color: var(--maestroRed);
    display: none;
    width: fit-content;
    background-color: rgba(var(--maestroRedRGB), 0.1);
    transition: all 100ms ease;
    font-family: SamsungOne600;
}

.invalid .form-input-message {
    display: block;
}




/* Autocomplete dropdown */

.autocomplete-dropdown {
    background-color: var(--inputContentBackgroundColor);
    min-height: 0px;
    flex: 1;
    border-radius: 10px;
    width: max-content !important;
    min-width: 100% !important;
    z-index: 1000;
    height: 50px;
    overflow-y: scroll;
    display: none;
    opacity: 0.0;
    flex-direction: column;
    pointer-events: none;
    flex-grow: 1;
    padding: 10px 15px;
    position: absolute;
    top: var(--defaultInputHeight);
    margin-top: 10px;
    transition: all 150ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

input:focus+.autocomplete-dropdown,
.autocomplete-dropdown:active {
    height: 140px;
    opacity: 1.0;
    transition: all 150ms cubic-bezier(0.075, 0.82, 0.165, 1);
    pointer-events: all;
    display: flex;
}

.dropdown-outline {
    box-shadow: 0 0 0 10px rgb(255, 255, 255, 0.5);
}

.autocomplete-dropdown.presented {
    opacity: 1.0;
    transition: all 150ms cubic-bezier(0.075, 0.82, 0.165, 1);
    pointer-events: all;
    display: flex;
}

.autocomplete-dropdown .dropdown-item {
    font-family: 'SamsungOne600';
    font-size: 15px;
    cursor: pointer;
    transition: all 75ms;
    padding: 5px 0px;
}

.autocomplete-dropdown .dropdown-item:hover {
    opacity: 0.5;
}



/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}





/* Svg styling */

.button-right-arrow-style {
    width: 13px;
    height: 10px;
}

.maestro-line-round {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--svgLineWidth);
    fill: none;
}

.dark-line {
    stroke: var(--maestroBlack);
}

.standalone-svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    margin-right: 5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--svgLineWidth);
    transform: translateX(-3px);
    transition: all 0.15s ease;
}

.white-line {
    stroke: white;
}

.maestro-blue-button svg,
.maestro-dark-button svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    margin-right: 5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: white;
    stroke-width: var(--svgLineWidth);
    transform: translateX(-3px);
    transition: all 0.15s ease;
}

.maestro-drop-down-button svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    margin-right: 5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--svgLineWidth);
    transform: translateX(-3px);
    transition: all 0.15s ease;
}

.white-button-large svg,
.maestro-white-hover-button svg,
.maestro-dark-hover-button svg {
    transform: translateX(-3px);
    transition: all 0.15s ease;
    margin-left: 10px;
}

.maestro-dark-hover-button svg {
    margin-left: 5px;
    margin-right: 3px;
}

.white-button-large:hover svg,
.maestro-white-hover-button:hover svg {
    transform: translateX(0);
    stroke: var(--maestroBlue);
}

.maestro-dark-hover-button:hover svg {
    transform: translateX(0);
    stroke: var(--maestroTurquoise);
}

.maestro-white-hover-button svg {
    margin-left: 5px;
    margin-right: 3px;
}

.maestro-blue-button:hover svg,
.maestro-dark-button:hover svg {
    transform: translateX(0);
}

.button-nofill svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    margin-right: 5px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--maestroDarkBlue);
    stroke-width: var(--svgLineWidth);
    transform: translateX(-3px);
    transition: all 0.15s ease;
}

.button-nofill.light-nofill svg {
    stroke: white;
}

.nofill-no-padding svg {
    margin-left: 5px;
}

.button-nofill:hover svg {
    transform: translateX(0);
    stroke: var(--maestroGrayBlue) !important;
}


/* -------------------- */

/* Account */

.grid-two-col-700 {
    display: grid;
    flex-direction: column;

    @media only screen and (min-width: 0px) and (max-width: 700px) {
        grid-template-columns: repeat(1);
    }

    @media only screen and (min-width: 701px) {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.grid-two-col-700-left {
    display: grid;
    flex-direction: column;

    @media only screen and (min-width: 0px) and (max-width: 700px) {
        grid-template-columns: repeat(1);
    }

    @media only screen and (min-width: 701px) {
        grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
        column-gap: 20px;
    }
}

.grid-left-right-align-container {
    display: flex;
    flex-direction: column;

    @media only screen and (min-width: 0px) and (max-width: 700px) {
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 20px;
    }

    @media only screen and (min-width: 701px) {
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 0px;
    }
}

.billing-history-cell {
    display: grid;
    flex: 1;
    align-items: center;
    row-gap: 5px;
    column-gap: 5px;
    grid-template-columns: repeat(auto-fill);
}

.billing-history-price-line {
    display: grid;

    @media only screen and (min-width: 0px) and (max-width: 700px) {
        grid-template-columns: repeat(1);
        display: grid;
        row-gap: 5px;
    }

    @media only screen and (min-width: 701px) {
        grid-template-columns: repeat(2);
        display: flex;
        flex-direction: row;
        column-gap: 5px;
    }
}

.loading-label {
    border-radius: 10px;
    background-color: rgba(var(--maestroBlackRGB), 0.1);
    color: transparent;
}





/* Account setup */

.setup-column-container {
    width: 100%;
    position: relative;
    margin: auto;
    height: 100%;
    overflow: scroll;
    display: flex;

    @media only screen and (min-width: 0px) and (max-width: 650px) {
        flex-direction: column;
    }

    @media only screen and (min-width: 651px) {
        flex-direction: row;
    }
}

.setup-progress-sidebar-container {
    background-color: var(--maestroBlue);
    display: flex;
    flex: 1;
    align-items: flex-start;
    overflow: hidden;
    height: 100%;

    /* margin: auto; */
    /* top bar */
    @media only screen and (max-width: 650px) {
        height: fit-content;
        min-height: 250px;
        max-height: 250px;
        padding: 30px;
        flex-direction: column;
        row-gap: 20px;
    }

    /* thin side bar */
    @media only screen and (min-width: 651px) {
        min-width: 80px;
        padding: 20px;
        width: 30% !important;
        height: auto !important;
        max-width: 250px;
        flex-direction: column;
        row-gap: 30px;
    }

    /* default side bar */
    @media only screen and (min-width: 1001px) {
        height: 100%;
        padding: 40px;
        max-width: 350px;
        flex-direction: column;
    }
}

.setup-progress-sidebar-container::before {
    width: 0px;
    transition: all 150ms ease-out;
}

.setup-progress-sidebar-scroll-container {
    overflow: scroll;
    width: 100%;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.setup-sidebar-container {
    display: flex;
    width: 100%;
    flex: 1;
    flex-basis: 100%;

    @media only screen and (max-width: 650px) {
        flex-direction: row;
        justify-content: space-between;
        column-gap: auto;
    }

    @media only screen and (min-width: 651px) {
        flex-direction: column;
    }
}

.setup-scrollable-content {
    display: flex;
    width: 100%;
    flex: 1;

    @media only screen and (max-width: 650px) {
        flex-direction: row;
        justify-content: space-between;
        column-gap: auto;
    }

    @media only screen and (min-width: 651px) {
        flex-direction: column;
    }
}


/* div {
    border: 1px black solid;
} */

.setup-column-section {
    margin-top: 10px;
    border-radius: 0px;
    display: flex;
    overflow: hidden;
    height: min-content;
    min-width: 30px;
    min-height: 30px;
    justify-content: flex-start;
    align-items: flex-start;
    opacity: 1.0;
    transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: transparent;

    @media only screen and (max-width: 650px) {
        max-width: 30px;
        max-height: 30px;
    }

    @media only screen and (min-width: 651px) {
        max-width: auto;
        max-height: max-content;
    }
}

.setup-column-section::before {
    opacity: 0.0;
    transition: opacity 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.setup-column-section.disabled {
    pointer-events: none;
    background-color: transparent;
    transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.setup-column-section.selected {
    transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.setup-column-section.removed {
    pointer-events: none;
    background-color: transparent;
    display: none;
    transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.setup-column-section-item {
    padding-left: 30px;
    margin-left: 9px;
    border-left: solid 2px white;
    height: 0px;
    opacity: 0;
    overflow-x: visible;
    overflow-y: hidden;
}

.setup-column-section-item.expanded {
    height: auto;
    opacity: 1.0;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: opacity 200ms;
}

.setup-section-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: solid 2px white;
    border-radius: 10px;
    opacity: 1.0;
    position: relative;
}

.setup-section-checkmark {
    opacity: 0.0;
}

.complete .setup-section-checkmark {
    opacity: 1.0;
}

.setup-section-selected-indicator {
    position: absolute;
    width: 3.5px;
    height: 3.5px;
    border-radius: 3px;
    opacity: 0.0;
    background-color: white;
    transition: all 200ms linear;
}

.selected .setup-section-selected-indicator {
    opacity: 1.0;
    top: 6.5px;
    left: 26px;

    @media only screen and (max-width: 650px) {
        top: 22px;
        left: 6.5px;
    }
}

.disabled .setup-section-icon {
    border: solid 2px rgba(255, 255, 255, 0.5);
}

.complete .setup-section-icon {
    background-color: white;
}

.setup-column-section-header {
    margin-bottom: 10px;
    overflow-wrap: break-word;
    max-lines: 1;
}

.setup-column-section-header-title {
    word-break: break-all;
    max-lines: 1;
    display: inline;
    font-size: 18px;
}

.setup-operating-hours-container {
    column-gap: 20px;
    display: flex;
    justify-content: space-between;
}

.operating-hours-day-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    justify-content: space-between;
    align-items: center;
    flex: 1;
    column-gap: 20px;
}




.setup-column-input-area {
    position: relative;
    width: 100%;
    /* height: ma */
    min-height: 100%;
    margin: auto;
    flex: 1;

    @media only screen and (max-width: 650px) {
        height: fit-content;
        min-height: fit-content;
    }
}

.setup-column-input-area-content {
    row-gap: 20px;
    margin: 20px 0px;
    padding: 20px;
    width: 100%;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.75);
    animation: setup-column-input-area-content-animation 500ms cubic-bezier(0.175, 0.885, 0.32, 1) forwards;
}

@keyframes setup-column-input-area-content-animation {
    0% {
        opacity: 0.0;
        margin-top: 30px;
    }

    30% {
        opacity: 0.0;
        margin-top: 30px;
    }

    100% {
        opacity: 1.0;
        margin-top: 0px;
    }
}

.setup-navigation-button {
    font-family: 'SamsungOne700';
    height: auto;
    padding: 10px 15px;
    margin-top: 0px;
    border-radius: 10px;
    width: fit-content;
    max-width: fit-content;
    color: var(--maestroBlack);
}

.setup-navigation-button.removed {
    --alpha: 0.5;
    pointer-events: none;
    opacity: 0.0;
}

.setup-navigation-button.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.setup-navigation-button.next {
    background-color: var(--maestroBlue);
    color: white;
}

.business-type-button {
    background-color: var(--contentBackgroundColor);
    border-radius: 20px;
    padding: 20px;
    height: fit-content;
    min-width: fit-content;
    flex-basis: 100%;
    flex: 1;
    row-gap: 10px;
    pointer-events: all;
}

.business-type-button p {
    color: var(--maestroBlack);
}

.business-type-button.selected,
.business-type-button.selected p {
    background-color: var(--maestroBlue);
    color: white;
    pointer-events: none;
}




/* Membership styling */

.club-membership {
    background-color: rgba(var(--stripeBlurpleRGB), 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 40px;
    border-radius: 12px;
    color: rgba(var(--stripeBlurpleRGB), 1.0);
}





/* ---------------------------------------- */

/* Play */

/* Default screen size classes */

.display-mobile-only {
    @media only screen and (min-width: 0px) and (max-width: 480px) {
        display: flex !important;
    }

    @media only screen and (min-width: 481px) {
        display: none !important;
    }
}

.hide-mobile-only {
    @media only screen and (min-width: 0px) and (max-width: 480px) {
        display: none !important;
    }

    @media only screen and (min-width: 481px) {
        display: inherit !important;
    }
}

.see-all-section {
    display: grid;

    @media only screen and (min-width: 0px) and (max-width: 766px) {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }

    @media only screen and (min-width: 767px) {
        display: flex;
    }
}

.see-all-section-no-location {
    display: grid;

    @media only screen and (min-width: 0px) and (max-width: 500px) {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }

    @media only screen and (min-width: 501px) {
        display: flex;
    }
}

.no-location {
    display: flex;
    align-items: center;
    flex-grow: 1.0;
}




/* Containers */

.image-container {
    overflow: hidden;
    display: flex;
    align-content: center;
    justify-content: center;
    height: fit-content;
}

.text-box-overlay-container {
    padding: 20px;
    border-bottom-left-radius: 26px;
    border-bottom-right-radius: 26px;
}

.play-cell-container {
    display: grid;

    @media only screen and (min-width: 0px) and (max-width: 500px) {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    @media only screen and (min-width: 501px) and (max-width: 900px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media only screen and (min-width: 901px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tennis-court-texture-container {
    background-image: url(../../assets/img/tennis-court-texture.png);
    background-size: cover;
    background-position-y: 40%;
    background-repeat: no-repeat;
}

.variable-padding {
    @media only screen and (min-width: 0px) and (max-width: 767px) {
        padding: 0px;
    }

    @media only screen and (min-width: 768px) {
        padding: 40px;
    }
}

.variable-margin-0-20 {
    @media only screen and (min-width: 0px) and (max-width: 767px) {
        margin: 0px;
    }

    @media only screen and (min-width: 768px) {
        margin: 20px;
    }
}

.variable-margin-0-20 {
    @media only screen and (min-width: 0px) and (max-width: 499px) {
        margin: 0px;
    }

    @media only screen and (min-width: 500px) {
        margin: 20px;
    }
}


/* Animations */

.dark-animated-gradient {
    padding-bottom: 30px;
    background: linear-gradient(45deg, white 0%, rgba(87, 94, 241, 1) 15%, white 30%, var(--maestroGreenLime) 30%, white 55%, rgba(87, 94, 241, 1) 55%, white 70%, rgba(255, 61, 61, 1) 85%, white 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 400% auto;
    color: transparent;
    animation-fill-mode: forwards;
    animation-composition: add;
    animation: homepage-header-gradient-animation 20s linear infinite alternate;
}

.luminosity-animated-gradient {
    padding-bottom: 30px;
    mix-blend-mode: luminosity;
    background: linear-gradient(45deg, black 0%, rgb(112, 25, 25) 30%, rgb(112, 25, 25) 30%, black 50%, white 50%, rgb(112, 25, 25) 60%, black 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 400% auto;
    color: transparent;
    animation-fill-mode: forwards;
    animation-composition: add;
    animation: homepage-header-gradient-animation 20s linear infinite alternate;
}

.red-white-animated-gradient {
    padding-bottom: 30px;
    /* mix-blend-mode: luminosity; */
    background: linear-gradient(45deg, white 0%, white 15%, rgba(255, 61, 61, 1) 15%, rgb(255, 255, 255) 40%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 70%, white 70%, rgba(255, 61, 61, 1) 100%, rgba(255, 61, 61, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 400% auto;
    color: transparent;
    animation-fill-mode: forwards;
    animation-composition: add;
    animation: homepage-header-gradient-animation 20s linear infinite alternate;
}



/* Header */

.play-header-profile-button {
    display: none;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    column-gap: 10px;
    width: fit-content;
    transition: all 100ms;

    @media only screen and (max-width: 899px) {
        display: none;
    }

    @media only screen and (min-width: 900px) {
        display: flex;
    }
}

.play-menu {
    display: flex;
}

.play-header-profile-button:hover {
    opacity: 0.5;
}

.play-header-display-name {
    font-size: 15px;
    font-family: SamsungOne700;
}

.play-header-role-type {
    font-size: 13px;
    font-family: SamsungOne700;
    color: var(--maestroPlaceholder);
}

.play-header-profile-pic {
    height: 36px;
    width: 36px;
    border-radius: 20px;
}

.padded-container {
    padding: 20px;
    margin: 0px 20px;
    width: 100%;
}

.filled-container {
    background-color: var(--fillColor, var(--contentBackgroundColor));
    border-radius: 20px;
}

.default-row-direction {
    flex-direction: row;
    display: flex;
    align-items: center;
    column-gap: 10px;
}



/* Buttons */

.default-button {
    background-color: rgb(var(--maestroBlueRGB));
    width: fit-content;
    border-radius: var(--mediumButtonCornerRadius);
    margin: 0px;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    padding: 10px;
    column-gap: 10px;
    height: 45px;
}

.text-only-button {
    padding-left: 0px;
    padding-right: 0px;
}

.no-padding-button {
    margin-top: 0px;
    padding: 0px;
}

.location-button {
    color: var(--maestroBlack);
    background-color: transparent;
    height: fit-content;
    margin-left: 20px;
}



/* Input */

.play-input {
    margin: 0px;
    background-color: var(--containerTransparentLightBlue);
    border-radius: 10px;
}

.main-content-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 32px;
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
}

.verif-input-no-sel::selection {
    color: inherit;
    background: transparent;
}

#verif-input {
    display: flex;
    column-gap: 8px;
}

#verif-input input {
    text-align: center;
    padding: 8px;
    font-size: 20px;
    outline: none;
    height: 56px;
    max-width: 40px;
    width: 10vw;
    font-family: SamsungOne700;
}

#verif-input input:focus::placeholder {
    color: transparent;
}

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

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



/* ---------------------------------------- */






/* Layer effects */

.dim-box-shadow {
    box-shadow: 0 0 20px 0px #08080d11;
}




/* Animations */

.bouncing-logo {
    animation: bounce 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(10px)
    }

    100% {
        transform: translateY(0px);
    }
}




/* Google */

.gsi-material-button {
    width: 100%;
    height: 45px;
    display: flex;
    border: #747775 1px solid;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}



/* Loaders */

.loader {
    position: absolute;
    width: 100px;
    height: 100px;
    transition: all 100ms ease;
}

.circular {
    animation: rotate 2s linear infinite;
    height: 100px;
    position: relative;
    width: 100px;
    transition: all 100ms ease;
}


.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation:
        dash 1.5s ease-in-out infinite,
        color 6s ease-in-out infinite;
    stroke-linecap: round;
}

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

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

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes color {

    100%,
    0% {
        stroke: black;
    }
}