@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

*:not(i) {
    font-family: 'Poppins' !important
}
:root {
  --color-main: #000000;
  --color-alt: #222222;
  --color-body: #FFFFFF;
  --color-body-background: #000000;
  --color-random-items: #222222;
  --color-main-p: #ffffff;
  --color-main-p-form: var(--color-main-p);
  --color-widecontainer-background: #ff000000;
  --color-line-separator: #e2e2e2;
  --color-topbanner-background: transparent;
  --color-topbanner-container-background: transparent;
  --color-standard-border: #F1F1F1;
  --color-box-background: #000000;
  --color-box-border: transparent;
  --color-box-shadow: rgb(0 0 0 / 0%);
  --color-link: #FFFFFF;
  --color-link-hover: #dcdcdc;
  --color-header-main: #ffffff;
  --color-header: #ffffff;
  --color-header-overlay: var(--color-header);
  --color-header-bar-background: var(--color-box-background);
  --color-header-bar-border: var(--color-main);
  --color-panel-header: var(--color-header);
  --color-panel-border: var(--color-line-separator);
  --color-panel-header-background: #eee;
  --color-summury-border: var(--color-body);
  --color-button-background: #c1d100;
  --color-button-background-hover: #dcdcdc;
  --color-button: #000000;
  --color-button-hover: var(--color-button);
  --color-button-bordered-background: transparent;
  --color-button-bordered-background-hover: var(--color-button-bordered-background);
  --color-button-bordered: #ffffff;
  --color-button-bordered-hover: #dcdcdc;
  --color-button-bordered-border: var(--color-main);
  --color-button-bordered-border-hover: #dcdcdc;
  --color-button-stepback-background: #fff;
  --color-button-stepback-background-hover: #dcdcdc;
  --color-button-stepback-border: #717171;
  --color-button-stepback-border-hover: var(--color-main);
  --color-button-stepback-color: #717171;
  --color-button-stepback-color-hover: var(--color-button-hover);
  --color-button-nonactive: var(--color-main);
  --color-button-nonactive-hover: var(--color-main);
  --color-button-nonactive-background: #fff;
  --color-button-nonactive-background-hover: var(--color-button-nonactive-background);
  --color-button-nonactive-border: var(--color-main);
  --color-button-nonactive-border-hover: var(--color-main);
  --color-input: #000;
  --color-input-border: #979797;
  --color-input-border-hover: var(--color-input-border);
  --color-input-border-focus: var(--color-main);
  --color-input-border-error: #dc3545;
  --color-input-background: #ffffff;
  --color-input-withborderbottomonly-background: var(--color-input-background);
  --color-input-select: var(--color-input);
  --color-input-select-background: #FFF;
  --color-input-select-withborderbottomonly-background: var(--color-input-select-background);
  --color-input-select-border: var(--color-input-border);
  --color-input-select-border-open: #FFF;
  --color-input-select-selected: #ffffff;
  --color-input-select-selected-background: var(--color-main);
  --color-input-select-dropdown: #000000;
  --color-input-select-dropdown-search: #000000;
  --color-input-select-dropdown-search-border: rgb(0 0 0 / 50%);
  --color-input-select-dropdown-search-background: rgba(255, 255, 255, 0.16);
  --color-input-select-dropdown-background: #FFF;
  --color-input-checkbox: #f3f3f3;
  --color-input-checkbox-background: #ebebeb;
  --color-input-checkbox-background-checked: #959595;
  --color-input-radio: var(--color-alt);
  --color-input-radio-background: #ebebeb;
  --color-menu-container-background: #3B3B48;
  --color-menu-submenu: #3B3B48;
  --color-menu-submenu-background: #FFFFFF;
  --color-menu-submenu-item-background: #ffffff;
  --color-menu-submenu-border: rgba(0,0,0,0);
  --color-menu-item: #FFFFFF;
  --color-menu-item-active: #dcdcdc;
  --color-menu-item-hover: #dcdcdc;
  --color-menu-item-border: transparent;
  --color-menu-item-border-active: var(--color-main);
  --color-menu-item-border-hover: var(--color-main);
  --color-menu-login: #FFFFFF;
  --color-menu-login-hover: var(--color-alt);
  --color-menu-login-background: transparent;
  --color-menu-login-background-hover: transparent;
  --color-menu-login-expanded: #000000;
  --color-menu-login-expanded-background: var(--color-main);
  --color-menu-login-expanded-link: var(--color-menu-login-expanded);
  --color-menu-login-expanded-link-hover: var(--color-menu-login-expanded-link);
  --color-menu-mobile-login: var(--color-menu-login);
  --color-menu-mobile-login-background: var(--color-menu-container-background);
  --color-menu-mobile-login-background-hover: var(--color-menu-mobile-login-background);
  --color-menu-mobile-container-background: #fff;
  --color-menu-mobile-item: #FFFFFF;
  --color-menu-mobile-item-active: #fff;
  --color-menu-mobile-item-hover: #fff;
  --color-menu-mobile-submenu-background: #f6fdff;
  --color-menu-mobile-background-active: var(--color-main);
  --color-menu-mobile-background-hover: var(--color-main);
  --color-menu-mobile-button: var(--color-main);
  --color-menu-mobile-button-hover: #fff;
  --color-menu-mobile-button-background: var(--color-menu-mobile-button-hover);
  --color-menu-mobile-button-border: var(--color-main);
  --color-menu-mobile-button-border-hover: var(--color-main);
  --color-menu-lang: var(--color-main-p);
  --color-menu-lang-active: #fff;
  --color-menu-lang-border: var(--color-main);
  --color-menu-lang-background: var(--color-main);
  --color-menu-lang-background-active: var(--color-main);
  --color-step-frame-border: transparent;
  --color-step-frame-background: #fff;
  --color-select-club-border: var(--color-input-select-border);
  --color-step-list: #3B3B48;
  --color-step-list-active: #c1d100;
  --color-step-list-completed: #c1d100;
  --color-step-list-icon: #fff;
  --color-step-list-icon-active: #fff;
  --color-step-list-icon-completed: #fff;
  --color-step-list-circle-background: #63666A;
  --color-step-list-circle-background-active: #c1d100;
  --color-step-list-circle-background-completed: #c1d100;
  --color-step-list-mobile: var(--color-body);
  --color-step-list-mobile-background: var(--color-box-background);
  --color-step-list-mobile-border: var(--color-main);
  --color-ticket-box: var(--color-main);
  --color-ticket-box-border: var(--color-random-items);
  --color-ticket-box-border-hover: #a5a5a5;
  --color-ticket-box-border-active: var(--color-main);
  --color-ticket-box-border-locked: #000;
  --color-ticket-box-background: #fff;
  --color-ticket-box-background-hover: var(--color-ticket-box-background);
  --color-ticket-box-background-active: var(--color-main);
  --color-ticket-box-background-locked: rgba(0, 0, 0, 0.58);
  --color-ticket-box-header: #000;
  --color-ticket-box-header-hover: var(--color-ticket-box-header);
  --color-ticket-box-header-active: #000000;
  --color-ticket-box-header-locked: #000;
  --color-ticket-box-header-background: #e6e6e6;
  --color-ticket-box-header-background-hover: var(--color-ticket-box-header-background);
  --color-ticket-box-header-background-active: #c1d100;
  --color-ticket-box-header-background-locked: transparent;
  --color-ticket-box-text: #000000;
  --color-ticket-box-text-hover: var(--color-ticket-box-text);
  --color-ticket-box-text-active: var(--color-ticket-box-text);
  --color-ticket-box-text-locked: #000;
  --color-ticket-box-text-background: transparent;
  --color-ticket-box-text-background-hover: transparent;
  --color-ticket-box-text-background-active: #fff;
  --color-ticket-box-text-background-locked: transparent;
  --color-ticket-step-form-label: #FFF;
  --color-calendar-header-border: #e6e6e6;
  --color-calendar-filters-background: transparent;
  --color-calendar-filters-link: var(--color-main);
  --color-calendar-filters-link-hover: var(--color-alt);
  --color-calendar-separator-border: #e6e6e6;
  --color-calendar-arrow: var(--color-main);
  --color-calendar-arrow-hover: var(--color-alt);
  --color-calendar-daysandprint: var(--color-main);
  --color-calendar-daysandprint-hover: #fff;
  --color-calendar-daysandprint-active: var(--color-calendar-daysandprint-hover);
  --color-calendar-daysandprint-background: transparent;
  --color-calendar-daysandprint-background-hover: var(--color-main);
  --color-calendar-daysandprint-background-active: var(--color-main);
  --color-calendar-daysandprint-border: var(--color-main);
  --color-calendar-table-background: transparent;
  --color-calendar-table-thead: var(--color-link);
  --color-calendar-table-thead-hover: var(--color-link-hover);
  --color-calendar-table-thead-border: #e6e6e6;
  --color-calendar-table-thead-background: #fff;
  --color-calendar-table-border: #e6e6e6;
  --color-calendar-table-side-border: transparent;
  --color-calendar-table-currentday-background: var(--color-main);
  --color-calendar-table-currentday: #fff;
  --color-agreement-ticket-name: var(--color-body);
  --color-agreement-ticket-period: var(--color-body);
  --color-agreement-paymentheader: var(--color-agreement-section-header);
  --color-agreement-balance: var(--color-main);
  --color-agreement-section-header: var(--color-header);
  --color-agreement-section-header-background: var(--color-panel-header-background);
  --color-agreement-section-header-border: var(--color-header-bar-border);
  --color-agreement-section-border: var(--color-line-separator);
  --color-clientpage-link: var(--color-main);
  --color-clientpage-link-hover: var(--color-alt);
  --color-clientpage-icon: var(--color-main);
  --color-clientpage-icon-hover: var(--color-alt);
  --color-measurement-button: var(--color-button-background);
  --color-measurement-button-hover: var(--color-button-background);
  --color-measurement-button-active: #fff;
  --color-measurement-button-border: #eaeaea;
  --color-measurement-button-border-hover: var(--color-button-background);
  --color-measurement-button-border-active: var(--color-button-background);
  --color-measurement-button-background: transparent;
  --color-measurement-button-background-hover: transparent;
  --color-measurement-button-background-active: var(--color-button-background);
  --color-measurement-submenu-link: var(--color-button-background);
  --color-measurement-submenu-link-hover: var(--color-button-background-hover);
  --color-measurement-submenu-background: #fafafa;
  --color-challenge-link: var(--color-link);
  --color-challenge-link-hover: var(--color-link-hover);
  --color-modal: var(--color-body);
  --color-modal-background: var(--color-box-background);
  --color-modal-close-button: var(--color-body);
  --color-modal-close-button-hover: var(--color-modal-close-button);
  --color-modal-border: #ccc;
  --color-modal-button: var(--color-button);
  --color-modal-button-hover: var(--color-button-hover);
  --color-modal-button-background: var(--color-button-background);
  --color-modal-button-background-hover: var(--color-button-background-hover);
  --color-legend: #FFF;
  --color-legend-circle-green: #2aca41;
  --color-legend-circle-red: #ca412a;
  --color-legend-circle-yellow: #caaa2a;
  --color-legend-circle-grey: #9E9E9E;
  --color-datepicker-background: #fff;
  --color-datepicker-border: #ccc;
  --color-datepicker-border-bottom: transparent;
  --color-datepicker-border-input-bottom: #ccc;
  --color-datepicker-header: var(--color-body);
  --color-datepicker-week-background: #f9f9f9;
  --color-datepicker-day-background: #fff;
  --color-datepicker-day-background-hover: var(--color-main);
  --color-datepicker-day-background-active: var(--color-main);
  --color-datepicker-day-border: #d3d3d3;
  --color-datepicker-day-border-hover: var(--color-main);
  --color-datepicker-day-border-active: var(--color-main);
  --color-datepicker-day: #555;
  --color-datepicker-day-hover: #fff;
  --color-datepicker-day-active: var(--color-datepicker-day-hover);
  --color-scroll: var(--color-main);
  --color-table: #000;
  --color-table-tbody-background: #fff;
  --color-table-thead: #000;
  --color-table-thead-background: #f7f7f7;
  --color-table-button: var(--color-button);
  --color-table-button-hover: var(--color-button-hover);
  --color-table-button-background: var(--color-button-background);
  --color-table-button-background-hover: var(--color-button-background-hover);
  --color-table-border: #ccc;
  --color-tabs-border: var(--color-main);
  --color-tabs-item: #333;
  --color-tabs-item-hover: #000;
  --color-tabs-item-active: var(--color-button);
  --color-tabs-item-background: #f7f7f7;
  --color-tabs-item-background-hover: #dcdcdc;
  --color-tabs-item-background-active: var(--color-button-background);
  --color-tabs-item-border: transparent;
  --color-tabs-item-border-hover: transparent;
  --color-tabs-item-border-active: transparent;
  --color-message-error: #dc3545;
  --color-message-success-background: #dff0d8;
  --color-message-success-text: #3c763d;
  --color-message-success-border: transparent;
  --color-message-error-background: #f2dede;
  --color-message-error-text: #db344a;
  --color-message-error-border: transparent;
  --color-message-info-background: #eee;
  --color-message-info-text: #4A4A4A;
  --color-message-info-border: transparent;
  --color-message-info-border-outer: var(--color-box-background);
  --color-pagination: #fff;
  --color-pagination-background: var(--color-main);
  --color-pagination-background-hover: var(--color-alt);
  --color-pagination-background-disabled: #ccc;
  --color-pagination-background-active: var(--color-alt);
  --color-footer: #fff;
  --color-footer-background: var(--color-main);
  --color-footer-border: transparent;
  --color-footer-header: var(--color-footer);
  --color-footer-header-border: var(--color-footer);
  --color-footer-text: var(--color-footer);
  --color-footer-link: var(--color-footer);
  --color-footer-link-hover: var(--color-footer);
  --color-footer-box-shadow: transparent;
  --color-footer-advert: #4A4A4A;
  --color-footer-advert-text: var(--color-footer-advert);
  --color-footer-advert-link: var(--color-link);
  --color-footer-advert-link-hover: var(--color-link-hover);
  --color-footer-advert-background: #fff;
  --color-loginpage: #000;
  --color-loginpage-box-background: #fff;
  --color-loginpage-box-border: #ccc;
  --color-loginpage-label: var(--color-loginpage);
  --color-loginpage-header: var(--color-loginpage);
  --color-loginpage-link: var(--color-link);
  --color-loginpage-link-hover: var(--color-link-hover);
  --color-loginpage-button-background: var(--color-button-background);
  --color-loginpage-button-background-hover: var(--color-button-background-hover);
  --color-loginpage-input: var(--color-input);
  --color-loginpage-input-border: var(--color-input-border);
  --color-loginpage-input-border-hover: var(--color-loginpage-input-border);
  --color-loginpage-input-border-focus: var(--color-input-border-focus);
  --color-loginpage-input-background: transparent;
  --color-loginpage-input-background-hover: var(--color-loginpage-input-background);
  --color-loginpage-input-background-focus: var(--color-loginpage-input-background);
  --color-tooltip: var(--color-body);
  --color-tooltip-background: var(--color-box-background);
  --color-tooltip-border: var(--color-main);
  --background-image-body: var(--color-body-background);
  --background-image-loginpage: #fff;
  --border-radius: 10px;
  --border-width: 3px;
}



body {
    background: var(--color-body-background);
}

header .topbanner .container {
    display: flex;
    align-items: center;
    color: var(--color-main-p);
}

header .topbanner .container::after {
    content: "MY ACCOUNT";
    white-space: nowrap;
    padding: 5px 15px;
    margin-left: 15px;
    border-left: solid 1px var(--color-main-p);
    font-weight: bold;
}

html[lang=cs] header .topbanner .container::after {
    content: "M\016E J \00DA \010C ET";
}

html[lang=sk] header .topbanner .container::after {
    content: "M\00D4 J \00DA \010C ET";
}

html[lang=bg] header .topbanner .container::after {
    content: "\041C \041E \042F \0422  \041F \0420 \041E \0424 \0418 \041B ";
}

.loginmenu > li > a:not(#loginmenu_log_in)::before {
    content: "";
    background: url("data:image/svg+xml,%3Csvg id='Vrstva_1' data-name='Vrstva 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 29.3'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M26 11.3a6 6 0 11-6-6 6 6 0 016 6M27.2 23a11.5 11.5 0 012.5 6c.2 2.2-.3 3-1.8 3.9a11.9 11.9 0 01-4.6 1.5 18.7 18.7 0 01-9.4-.7 9 9 0 01-2.5-1.3 3 3 0 01-1-3.1 11.6 11.6 0 012.6-6.4s3-3.9 7-3.9 6.9 3.7 7.2 4' transform='translate(-10.3 -5.3)'/%3E%3C/svg%3E") no-repeat 50% 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

#scheduler, .calendar_main {
    background-color: var(--color-body-background);
}

.calendar_main .filters {
    background: var(--color-box-background);
}

.mainmenu .submenu {
    /* border: solid 10px var(--color-button-background); */
    /* border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Vrstva 1' viewBox='0 0 190 20'%3E%3Cpath d='M0 0h190v10H0z' style='fill:%23a2072e'/%3E%3Cpath d='M0 10h190v10H0z' style='fill:none'/%3E%3Cpath d='M103 10H87l8-8 8 8z'/%3E%3C/svg%3E") 10 0 0 0 / 10px 0 0 0 / 0px stretch; */
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
}

.mainmenu li span, .mainmenu li.dropdown span {
    transition: all 350ms;
}

@media (min-width: 992px) {
    header {
        max-width: 1200px;
        margin: 0 auto;
    }

    header::before {
        content: "";
        position: absolute;
        margin-left: -50vw;
        margin-right: -50vw;
        left: 50%;
        right: 50%;
        width: 100vw;
        max-width: 1440px;
        background-color: var(--color-main);
        top: 0;
        height: 100%;
    }

    header .topbanner, header .topbanner .container {
        background-color: transparent;
    }

    header .logo {
        display: inline-block;
        width: 145px;
        height: 76px;
        vertical-align: middle;
        background: url(https://www.thegymff.cz/wp-content/uploads/2024/12/logo-TheGym_horizontal_white.svg) no-repeat 50% 50%;
        padding: 0;
        background-size: contain;
        margin: 5px 0;
    }

    header {
        display: flex;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    header nav {
        margin: 0;
    }

    header nav .mainmenu {
        background-color: transparent;
        width: auto;
        padding: 0;
        justify-content: flex-end;
        margin: 0;
    }

    .menucontainer {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        padding: 0 40px 0 12px;
        flex-direction: row;
    }

    .mainmenu li {
        display: inline-block;
        text-transform: none;
        position: relative;
        transition: all 350ms;
    }

    .mainmenu li span, .mainmenu li.dropdown span {
        padding: 5px 10px;
        color: var(--color-link);
        font-weight: normal;
        text-transform: none;
        line-height: 1;
        font-size: 17px;
    }

    .mainmenu>li>a {
        padding: 5px 15px;
        /* color: #fff; */
        border: none;
        font-weight: normal;
        text-transform: none;
        line-height: 1;
        font-size: 17px;
        transition: all 350ms ease-in-out;
    }

    .mainmenu li a.active {
        padding: 5px 15px;
        border: none;
        font-weight: normal;
        text-transform: none;
        line-height: 1;
        font-size: 17px;
        transition: all 350ms ease-in-out;
    }

    .mainmenu li a:hover, .mainmenu li span:hover, .mainmenu li.dropdown span:hover, .lang_list.tabs li a:hover {
        /* color: #ada8a8; */
    }

    .loginmenu > li > a:hover {
        background-color: var(--color-menu-container-background);
        color: var(--color-button-background);
    }

    .mainmenu .submenu {
        text-transform: none;
        border-radius: var(--border-radius);
        top: 100%;
        left: 50%;
        padding: 5px 0;
        border-left: 0;
        border-bottom: 0;
        border-right: 0;
        max-height: 70vh;
        max-height: calc(100vh - 75px);
        overflow: auto !important;
        margin: 0 0 0 -95px;
    }

    .mainmenu .submenu li a {
        padding: 8px 15px;
        text-align: center;
        color: var(--color-menu-submenu);
    }

    .languages {
        position: absolute;
        right: 0;
        top: 0;
    }

    .languages .lang_list {
        right: 0px;
        top: 27px;
    }

    .loginmenu {
        position: relative;
        float: none;
        top: 0 !important;
        right: 0 !important;
        overflow: visible;
    }

    .loginmenu > li > a {
        /* color: var(--color-menu-container-background); */
        text-transform: none !important;
        font-weight: normal !important;
        font-size: 17px;
    }

    .loginmenu > li > a#loginmenu_log_in {
        border: solid 2px #FFF;
        white-space: nowrap;
    }

    .loginmenu > li > a:not(#loginmenu_log_in) {
        overflow: hidden;
        width: 40px;
        display: block;
        white-space: nowrap;
        text-indent: 40px;
        position: relative;
    }

    .loginmenu > li > a:not(#loginmenu_log_in)::before {
        content: "";
        vertical-align: middle;
        position: absolute;
        top: 9px;
        left: 9px;
    }

    .loginmenu > li > a:not(#loginmenu_log_in):hover {
        background-color: var(--color-button-background);
    }

    .loginmenu > li ul > li {
        background-color: var(--color-menu-item);
        border-radius: 0 !important;
        font-size: 14px;
    }

    .loginmenu > li ul > li a {
        font-size: 14px;
    }

    .loginmenu li .arrow {
        display: block;
        width: 0;
        height: 10px;
    }

    .loginmenu li .arrow .arrow-n {
        border-bottom-color: var(--color-menu-item);
        border-bottom-width: 8px;
        top: -5px;
    }
}

@media (min-width: 1440px) {
    header::before {
        margin-left: -720px;
    }
}

@media (max-width: 991px) {
    header {
        padding: 12px;
    }

    header .topbanner, header .topbanner .container {
        background-color: transparent;
    }

    header .logo {
        display: inline-block;
        width: 90px;
        height: 47px;
        vertical-align: middle;
        background: url(https://www.thegymff.cz/wp-content/uploads/2024/12/logo-TheGym_horizontal_white.svg) no-repeat 50% 50%;
        padding: 0;
        margin: 0 0px 0 10px !important;
    }

    .open-mobile-menu {
        color: var(--color-menu-mobile-button-background);
        background-color: transparent;
        font-size: 30px;
        top: 2px;
    }

    .menucontainer, .mainmenu, .loginmenu>li>a, .loginmenu>li>a:hover {
        background-color: var(--color-body-background);
        color: var(--color-body);
        text-transform: none;
        font-size: 17px;
        font-weight: normal;
        text-align: left !important;
    }

    .loginmenu li a {
        padding: 8px 10px 8px 10px !important;
    }

    .mainmenu li span, .mainmenu li a {
        /* color: var(--color-button); */
        text-transform: none;
        font-weight: normal;
        font-size: 17px;
        text-align: left;
        padding: 8px 10px 8px 10px !important;
        border: none;
    }

    .mainmenu .submenu, .mainmenu .submenu li a, .loginmenu > li ul > li {
        background-color: var(--color-menu-item);
        color: var(--color-button);
    }

    .steps li.active {
        font-size: 25px;
        text-transform: uppercase;
        background: var(--color-body-background);
        border: solid 8px var(--color-body-background);
    }
}

h1, .h1, h2, .h2, h3, .h3 {
    text-transform: none;
    font-weight: bold;
    border-radius: 0 !important;
    text-align: center !important;
}

h1 {
    border: none !important;
    padding-left: 0 !important;
    background-color: transparent !important;
}
h1:before {
    content: "" !important;
    margin-right: 0 !important;!i;!;
}

h4, .h4 {
    text-transform: uppercase;
}

footer .container {
    padding: 15px 20px;
}

footer aside.advert {
    display: none;
}

footer h3, footer .h3 {
    border-bottom: solid 1px var(--color-calendar-header-border);
}

footer nav ul li {
    margin-bottom: 10px;
}

.lang_list.tabs li a:not(.active) {
    color: var(--color-menu-container-background);
    background-color: var(--color-menu-item);
}

.lang_list.tabs li.active a {
    color: var(--color-menu-lang-active);
    background-color: transparent;
    font-size: 17px;
}

.lang_list.tabs {
    border-radius: var(--border-radius);
    margin-left: 0.5em;
}

.lang_list.tabs li:last-child {
    border: none !important;
}

div:empty {
    background-color: transparent !important;
}

.topcontainer {
    background-color: transparent;
}

#kupkarnet_date .date-input {
    border: 1px solid var(--color-input-border);
    background: var(--color-input-background);
}

/* Start timetable */
.calendar_table {
    /* border-left: solid 20px transparent; */
    /* border-right: solid 10px transparent; */
}

.calendar_table thead tr {
    background-color: transparent;
}

.calendar_table tr td {
    border: none !important;
    padding: 5px 10px 5px 0 !important;
}

.calendar_table thead tr td {
    text-align: left;
    text-transform: uppercase;
    border: none;
    padding: 0 0 10px 0;
    width: 14.28% !important;
}

.calendar_table thead tr td.current {
    background-color: transparent;
}

.calendar_table thead tr td a {
    text-transform: uppercase;
    color: var(--color-calendar-second-text);
    padding: 10px 10px 20px 10px;
    display: block;
    border-left: solid 4px var(--color-calendar-table-border);
    font-weight: bold;
    pointer-events: none;
}

.calendar_table thead tr td.current a {
    background-color: var(--color-calendar-table-currentday-background);
    color: var(--color-button-background);
    border-left: solid 4px var(--color-button-background);
}

.calendar_table .event {
    padding: 8px 10px 8px 14px;
}

.calendar_table .event * {
    z-index: 1;
    position: relative;
    color: var(--color-body);
}

.calendar_table .event::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-color: var(--color-box-background);
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    -webkit-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}

.calendar_table .event:hover::before {
    opacity: 0.8;
    left: 4px;
}

.calendar_table .event p.event_name {
    text-align: left;
    font-size: 15px;
}

.calendar_table .event p.room {
    text-align: left;
}

.calendar_table .event .eventlength {
    font-weight: bold;
    font-size: 13px;
    color: var(--color-calendar-second-text);
}

.daysandprint a:only-child {
    display: none;
}

/* end timetable */
a, input, select, textarea, .select2-container, .select1-container {
    border-radius: var(--border-radius) !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container .select2-container--default, .select2-container .select2-selection--single {
    border-radius: var(--border-radius);
}
.button, .btn {
    text-transform: uppercase;
    font-weight: bold;
}

.event-description {
    line-height: 1.4;
    padding-bottom: 20px;
    display: inline-block;
}

/* health */
.event.health {
    background: #07afb1 url(https://www.formfactory.cz/timetable/health_icon2.png) 100% 100% no-repeat !important;
}

.event.health * {
    color: #000;
}

#calendar_downer_text {
    padding: 0;
    background: #ffffff;
}

div#OverlayLogin {
    background: #f2f2f2;
    font-family: Arial, sans-serif;
    border: 1px solid var(--color-loginpage-box-border);
    border-radius: 4px;
    max-width: 400px;
    width: 100%;
    color: var(--color-loginpage);
    padding: 25px;
    border-radius: 0px;
    box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
    padding: 120px 40px 40px 40px;
}

div#OverlayLogin .multisport {
    padding: 20px 0 0 0;
}

#OverlayLogin #login-form .fields label {
    margin: 0 0 5px 0;
    padding: 0;
    font-weight: normal;
}

#OverlayLogin h1 {
    color: var(--color-button-background);
    text-align: center !important;
}

#OverlayLogin input[type=text], #OverlayLogin input[type=password] {
    border-color: #FFF #FFF #a9a7a7 #FFF;
}

#OverlayLogin a {
    text-decoration: underline;
}

#OverlayLogin input[type=submit] {
    width: 100%;
    margin: 0 0 20px 0;
}

#OverlayLogin::before {
    content: "";
    position: absolute;
    top: 40px;
    right: 45%;
    right: calc(45% + 15px);
    padding: 5px 15px;
    width: 35%;
    height: 50px;
    background: url(https://www.formfactory.cz/timetable/logo_ff_white_main.svg) no-repeat 50% 50%;
    background-size: contain;
    animation: 0.8s ease-out 0s 1 loadname;
    animation-fill-mode: backwards;
    animation-delay: 0s;
}

#OverlayLogin::after {
    content: "MY ACCOUNT";
    color: var(--color-loginpage-button-background);
    text-decoration: none;
    text-transform: uppercase;
    position: absolute;
    top: 50px;
    left: 55%;
    padding: 5px 15px;
    border-left: solid 1px var(--color-loginpage-button-background);
    white-space: nowrap;
    font-weight: bold;
    animation-fill-mode: backwards;
    animation-delay: 0s;
    overflow: hidden;
    display: block;
}

#OverlayLogin .fields {
    margin: 0;
    padding: 0 0 10px 0 !important;
}

html[lang=cs] #OverlayLogin::after {
    content: "M\016E J \00DA \010C ET";
}

html[lang=sk] #OverlayLogin::after {
    content: "M\00D4 J \00DA \010C ET";
}

form[action^="/Login/LoginForm2"] {
    display: flex;
    flex-flow: column;
}

form[action^="/Login/LoginForm2"]>:nth-child(1) {
    order: 1;
}

form[action^="/Login/LoginForm2"]>:nth-child(2) {
    order: 2;
}

form[action^="/Login/LoginForm2"]>:nth-child(3) {
    order: 3;
}

form[action^="/Login/LoginForm2"]>:nth-child(4) {
    order: 4;
}

form[action^="/Login/LoginForm2"]>:nth-child(5) {
    order: 6;
}

form[action^="/Login/LoginForm2"]>:nth-child(6) {
    order: 7;
}

form[action^="/Login/LoginForm2"]>:nth-child(7) {
    order: 5;
}

@media print {
    header, nav, #calendar_header_right, #calendar_registered_meetings, .daysandprint, footer, .filters, .month_chooser, .week_chooser {
        display: none;
    }

    body.schedule-print-active #scheduler {
        top: 90px;
    }

    #calendar_header_left {
        width: 100%;
    }

    #calendar_header_left h1:before {
        content: " ";
        width: 0px;
        height: 0px;
    }

    td div.event {
        height: 60px !important;
        min-height: 60px !important;
        border-bottom: 1px solid #e6e6e6;
    }

    #calendar_header_left h1:after {
        content: " ";
        width: 150px;
        height: 50px;
        background: url(https://statics.efitness.com.pl/userfilespublic/895/Styles/img/Form-Factory_LOGO_CMYK_CZ.png) no-repeat center center transparent;
        background-size: contain;
        vertical-align: middle;
        display: block;
        float: right;
    }

    .calendar_header {
        padding: 0;
        margin: 0;
    }

    .calendar_header > div > h1 {
        visibility: visible;
    }

    #calendar_header_left h1:first-child:before {
        content: none;
    }

    body.schedule-print-active .calendar_header {
        display: block !important;
    }

    .calendar_table tr td {
        padding: 5px 2px 5px !important;
    }

    .calendar_table .event .eventlength {
        font-size: 9px;
    }

    .calendar_table .event {
        padding: 3px 5px 5px 5px;
    }

    .calendar_table .event::before {
        left: 2px;
    }

    .calendar_table_weekcascading thead tr td:first-child {
        font-size: 0.75rem;
    }

    .calendar_table thead tr td {
        width: 14.28% !important;
    }
}

.fffooter {
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px 20px 30px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.fffooter::after {
    border-bottom: solid 1px var(--color-calendar-header-border);
    content: "";
    display: block;
    width: 100%;
    position: relative;
    top: 30px;
}

.fffooter .langfooter ul li {
    padding: 1em 0 0 0;
}

.fffooter .langfooter ul li a span {
    padding: 0 0 0 0.4em;
}

.fffooter .langfooter a {
    background-color: transparent;
    padding: 6px 10px 6px;
    line-height: 1;
    display: block;
}

.cardsicon,.socialicon {
    display: inline-block!important;
    margin: 1.5em 30px 0 0;
    font-size: 15px
}

.cardsicon a,.socialicon a {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    margin: .5em 15px 0 0;
    transition: all .5s;
    vertical-align: middle
}
.cardsicon a {
    pointer-events: none;
}

.cardsicon a>span,.socialicon a>span {
    opacity: 0;
    color: #000;
    position: absolute;
    transition: all .5s;
    pointer-events: none;
    white-space: nowrap;
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%)
}

.socialicon a>span {
    color: #fff;
}

.cardsicon a:focus>span,.cardsicon a:hover>span,.socialicon a:focus>span,.socialicon a:hover>span {
    opacity: 1;
    top: -1.8em
}

.socialicon a {
    background: url(https://www.formfactory.cz/wp-content/uploads/2022/02/social2022.svg) no-repeat 50% 0;
    background-size: 100% auto;
    /* filter: invert(1); */
}

.socialicon a.ig {
    background-position: 0 50%
}

.socialicon a.li {
    background-position: 0 100%
}

.socialicon a.yt {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/06/social2022-07.svg);
    background-position: 0 100%
}

.socialicon a.tt {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/06/social2022-07.svg);
    background-position: 0 0%
}

.cardsicon a {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 40px;
    height: 28px;
    background-color: #fff;
    border-radius: 3px;
    border: 2px solid #f2f2f2;
}

a.visa {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/02/visa.svg)
}

a.visael {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/02/visa-electron.svg)
}

a.mastercard {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/02/master-card.svg)
}

a.maestro {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/02/maestro.svg)
}

a.payu {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2023/03/payu_s.svg);
    width: 50px;
    background-size: 80%;
    background-position: 50% 70%
}

a.espago {
    background-image: url(https://www.formfactory.cz/wp-content/uploads/2022/02/espago.svg);
    width: 80px;
    background-size: 80%;
    background-position: 50% 60%
}

.footerlast div {
    margin: 0 auto;
    max-width: 1200px;
    padding: 60px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
}

.footerlast p {
    display: inline-block!important;
}

.cardsicon.en, .cardsicon.cz {
    display: none !important;
}

html[lang^=cs] .cardsicon.cz {
    display: inline-block !important;
}

html[lang^=en] .cardsicon.en {
    display: inline-block !important;
}

.submenu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.submenu::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.submenu::-webkit-scrollbar-thumb {
    background: #ada8a8;
}

.submenu::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

.submenu::-webkit-scrollbar-thumb:active {
    background: #fff;
}

.submenu::-webkit-scrollbar-track {
    background: transparent;
}

.submenu::-webkit-scrollbar-track:hover {
    background: #242424;
}

.submenu::-webkit-scrollbar-track:active {
    background: #242424;
}

.submenu::-webkit-scrollbar-corner {
    background: transparent;
}

/* order menu city */
.mainmenu ul.submenu.submenu-open {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    ul.submenu {
        display: grid !important;
        grid-template-columns: 1fr;
        -moz-transition: all 350ms ease-in-out;
        -o-transition: all 350ms ease-in-out;
        -webkit-transition: all 350ms ease-in-out;
        transition: all 350ms ease-in-out;
        -ms-transform: scale(1, 0);
        -ms-transform-origin: 50% 0%;
        -webkit-transform: scale(1, 0);
        transform-origin: 50% 0%;
        width: 190px;
        opacity: 0;
    }

    .mainmenu ul.submenu.submenu-open {
        opacity: 1;
        display: grid;
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

ul.submenu li {
    display: contents !important;
}

:is(ul#calendar-submenu, ul#buy-ticket-submenu, ul#buy-gift-submenu) li a:not([href*="thegymff.cz"]) {
    display: none;
}
.club-network.dropdown:has(#calendar-submenu) {
    display: none !important;
}
[href*="/calendar"], footer ul li:has([href*="/calendar"]) {
    display: none !important;
}
.tabs.lang_list li:hover {
  background-color: transparent;
  border-color: transparent;
}


.step {
    box-shadow: none;
}
/* end order menu city*/

.karnetbox, .personal-training-box {
    border-radius: var(--border-radius);
}
.karnetbox.active, .personal-training-box.active {
    outline: solid 5px var(--color-ticket-box-header-background-active);
    outline-offset: 3px;
}
.karnetbox .header, .personal-training-box .header {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border-bottom: none;
}
.karnetbox .karnetframe, .karnetbox .training-frame, .personal-training-box .karnetframe, .personal-training-box .training-frame {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.steps li.active ~ li {
    color: var(--color-step-list-circle-background);
    border-color: var(--color-step-list);
}
.steps li.active:not(:last-child)::before {
    background: var(--color-step-list);
}
.steps li:not(.arrow)::after {
    border-radius: var(--border-radius);
}

.topcontainer section {
  padding-top: 10px;
  border-radius:  var(--border-radius);
  border: var(--border-width) solid var(--color-agreement-section-border);
}
.informacjaformaplatnosci p .change-payment-type{
  border: var(--border-width) solid var(--color-agreement-section-border);
}
.informacjaformaplatnosci p .change-payment-type:hover {
  border: var(--border-width) solid var(--color-button-bordered-border-hover);
}
.topcontainer section h1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}