/*------- Datetimepicker -------*/
.bootstrap-datetimepicker-widget {
    width: auto!important;
    padding: 1rem !important;
    border-radius: 0.37rem !important;
    border-color: var(--color-main)!important;
    border-width: 1px !important;
    margin-left: -3px !important;
    color: inherit !important;
    margin-top: 0 !important;
}
.bootstrap-datetimepicker-widget.bottom:before {
    border-bottom: 7px solid var(--color-main) !important;
}

.bootstrap-datetimepicker-widget.top:before {
    border-top: 7px solid var(--color-main) !important;
}

.bootstrap-datetimepicker-widget .picker-switch {
    background-color: var(--color-main);
    font-weight: 400;
    color: var(--font-color-white);
}

.bootstrap-datetimepicker-widget .picker-switch:hover {
    color: inherit;
}

.bootstrap-datetimepicker-widget th {
    line-height: inherit !important;
}

.bootstrap-datetimepicker-widget td.day {
    height: 1.8rem !important;
    line-height: normal !important;
    width: 1.8rem !important;
    padding: .4rem !important;
    text-shadow: none !important;
}

.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover {
    background-color: var(--color-main) !important;
}

.bootstrap-datetimepicker-widget td.today:before {
    border-bottom: 7px solid var(--color-main) !important;
}

.bootstrap-datetimepicker-widget td span.active {
    background-color: var(--color-main) !important;
}

.bootstrap-datetimepicker-widget.bottom:after {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid #fff !important;
    position: absolute;
    top: -6px !important;
    left: 7px !important;
}

.bootstrap-datetimepicker-widget.pull-right:after {
    left: auto !important;
    right: 6px !important;
}




/*------- Language -------*/
.language-select {
    border: 0;
    padding: .5rem .75rem;
    border-radius: .6rem;
    line-height: normal;
    background: transparent;
    color: var(--color-main);
}

.language-select:hover {
    background-color: var(--bg-color-gray);
}




/*------- Modal Telegram-------*/
#modal-telegram-bot .modal-content {
    border: none;
    box-shadow: rgba(58, 53, 65, 0.3) 0px 2px 10px;
}

#modal-telegram-bot .btn-close {
    position: absolute;
    right: .5rem;
    top:.5rem;
    cursor: pointer;
    z-index: 100;
}

#modal-telegram-bot .modal-body {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    text-align: center;
}

.modal-telegram__top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.modal-telegram__top-image {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: .1rem solid var(--color-main);
    background-image: url(/image/catalog/logo.svg);
    background-color: var(--bg-color-white-natural);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-telegram__top-text {
    margin-left: .5rem;
    text-align: left;
}

@media (min-width:768px) {
    .modal-telegram__top-text br {
        display: none;
    }
    #btn-telegram-join {
        width: fit-content;
    }
}




/*------- Modal Google -------*/
#modal-google-login .modal-content {
    border: none;
    box-shadow: rgba(58, 53, 65, 0.3) 0px 2px 10px;
}

#modal-google-login .btn-close {
    position: absolute;
    right: .5rem;
    top:.5rem;
    cursor: pointer;
    z-index: 100;
}

#modal-google-login .modal-body {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    text-align: center;
}




/*------- Modal Instagram -------*/
#modal-instagram-warning .modal-content {
    border: none;
    box-shadow: rgba(58, 53, 65, 0.3) 0px 2px 10px;
}

#modal-instagram-warning .btn-close {
    position: absolute;
    right: .5rem;
    top:.5rem;
    cursor: pointer;
    z-index: 100;
}

#modal-instagram-warning .modal-body {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    text-align: center;
}




/*------- Account Register -------*/
#account-register {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-white);
    min-height: 100vh !important;
}
#account-register header {
    position: relative;
    backdrop-filter: none;
}

#account-register .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}
#account-register .header-container #menu,
#account-register .header-container .account__container {
    display: none;
}

#account-register #input-telephone {
    padding-left: 3.5rem !important;
}

#account-register form .text-danger {
    background-color: var(--bg-color-white);
}

#input-telephone::placeholder {
    color: transparent!important;
    font-size: 0!important;
}

@media (min-width:768px) {
    #account-register {
        background: var(--bg-color-gradient-2);
        padding-bottom: 3%;
    }
    #account-register #logo img {
        filter: brightness(400%);
    }
}
.agree {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: .9em;
    color: var(--font-color-gray);
    max-width: 25rem;
}

.school_info {
    color: var(--color-main);
    font-size: .8em;
    margin-left: .8rem;
}




/*------- Phone mask -------*/
.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;

}
.iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    max-height: 3.5rem;
    padding-left: .9rem;
}

.iti__flag {
    display: none;
}

#telephone .iti__selected-dial-code {
    display: none;
}

#telephone.form__input-wrapper:has(.form__input-label_telephone.floating)  .iti__selected-dial-code {
    display: block;
}

.form__input-wrapper:has(.form__input-label_telephone.floating)  .iti__selected-dial-code {
    display: block;
}

#account-register .iti__selected-dial-code {
    display: none;
}

#account-register .form__input-wrapper:has(.form__input-label_telephone.floating)  .iti__selected-dial-code {
    display: block;
}




/*------- Account Login -------*/
#account-login {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-white);
    min-height: 100vh !important;
}
#account-login header {
    position: relative;
    backdrop-filter: none;
}

#account-login .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}
#account-login .header-container #menu,
#account-login .header-container .account__container
{
    display: none;
}

@media (min-width:768px) {
    #account-login {
        background: var(--bg-color-gradient-2);
        padding-bottom: 3%;
    }
    #account-login #logo img {
        filter: brightness(400%);
    }
    #account-login .content-box {
        max-width: 25rem;
    }
}




/*------- Account Reset -------*/
#account-reset {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-white);
    min-height: 100vh !important;
}
#account-reset header {
    position: relative;
    backdrop-filter: none;
}

#account-reset .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#account-reset .header-container #menu,
#account-reset .header-container .account__container
{
    display: none;
}

#account-reset form .text-danger {
    background-color: var(--bg-color-white);
}


@media (min-width:768px) {
    #account-reset {
        background: var(--bg-color-gradient-2);
        padding-bottom: 3%;
    }
    #account-reset #logo img {
        filter: brightness(400%);
    }
    #account-reset .content-box {
        max-width: 25rem;
    }
}




/*------- Account Forgotten -------*/
#account-forgotten {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-white);
    min-height: 100vh !important;
}
#account-forgotten header {
    position: relative;
    backdrop-filter: none;
}

#account-forgotten .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#account-forgotten .header-container #menu,
#account-forgotten .header-container .account__container
{
    display: none;
}

@media (min-width:768px) {
    #account-forgotten {
        background: var(--bg-color-gradient-2);
        padding-bottom: 3%;
    }
    #account-forgotten #logo img {
        filter: brightness(400%);
    }
    #account-forgotten .content-box {
        max-width: 25rem;
    }
}




/*------- Account Order List -------*/
@media (min-width:768px) {
    #account-order .alert {
        display: inline-flex;
        width: fit-content;
    }
}

.registrations__list-switcher {
    margin-left: -0.3em;
    margin-bottom: 1.5rem;
}

.registrations__event {
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--bg-color-primary);
}

.registrations__event:last-child {
    border: none;
    margin-bottom: 0;
}

.registrations__event.archive .registrations__event-add,
.registrations__event.archive .registrations__event-payment,
.registrations__event.archive .registrations__event-item-buttons {
    display: none !important;
}

.registrations__event-title-container {
    margin-bottom: 1.5rem;
}

.registrations__event-add {
    margin-left: .8rem;
}

.registrations__event-title-box {
    display: flex;
}

.registrations__accordion-button {
    display: flex;
    align-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: -.9rem;
    margin-right: .5rem;
    margin-top: .2rem;
    padding: .1rem;

}
.registrations__accordion-button::after {
    content: "";
    flex-shrink: 0;
    margin: auto;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2344acce'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out;
    width: .8rem;
    height: .8rem;

}
.registrations__accordion-button:not(.collapsed)::after {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2344acce'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.registrations__event-title {
    font-weight: 700;
    font-size: 1.1em;
    line-height: normal;
    margin-bottom: .5rem;
}

.registrations__event-title span {
    display: block;
    font-weight: normal;
    font-size: .8em;
    color: var(--font-color-gray);
}


.registrations__event-payment {
    display: block !important;
    margin-bottom: 2rem;
}
.registrations__total-container .registrations__event-payment {
    width: auto !important;
}

.registrations__total-container {
    padding: .9rem .8rem ;
    background-color: var(--bg-color-white-natural);
    border-radius: .6rem;
    border: 1px solid var(--color-main);
    margin-bottom: 3rem;
}

.registrations__total-container .registrations__event-payment {
    margin-top: 1rem;
    margin-bottom: 0;
}

.registrations__total-info {
    margin-bottom: 1.5rem;
}

.registrations__total-info-item {
    margin-right: 1rem;
}

.registrations__total-info span{
    font-size: .9em;
}

.registrations__total-card-btn {
    margin-top: .5rem;
}

.registrations__total-payment-container span{
    font-size: .9em;
}

.registrations__total-payment-container {
    margin-bottom: 1rem;
}

.registrations__total-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.registrations__total-payment-btn {
    width: 100%;
}

@media (min-width:768px) {
    .registrations__total-container {
        width: fit-content;
    }

    .registrations__total-payment {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
    }

    .registrations__total-payment-container {
        margin-bottom: 0;
    }

    .registrations__total-info {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .registrations__total-payment-btn {
        width: auto;
    }
}

@media (min-width:1024px) {
    .registrations__total-card-btn {
        margin-top: 0;
    }

    .registrations__total-buttons-container {
        flex-direction: row;
        justify-content: flex-end;
    }
}

.registrations__event-item {
    position: relative;
    margin-bottom: 2rem;
    padding: .9rem .8rem .8rem;
    background-color: var(--bg-color-white-natural);
    border-radius: .6rem;
    border: 1px solid var(--color-main);
}

.registrations__event-item.cancelled {
    border-color: var(--bg-color-dark);
    background-color: var(--bg-color-gray);
    opacity: .6;
}

.registrations__event-item.cancelled svg{
    fill: var(--bg-color-dark);
    stroke: var(--bg-color-dark);

}
.registrations__event-item.cancelled .btn {
    border-color: var(--bg-color-dark);
    color: var(--font-color-gray-dark);
}


#account-order .active-archive__list.archive-preview .active-archive__list-item.archive {
    display: block;
}

.registrations__event-number {
    position: absolute;
    display: inline-flex;
    background-color: var(--color-main);
    color: var(--font-color-white);
    border-radius: .5rem;
    padding: .1rem .3rem;
    margin-top: -1.65rem;
    margin-left: -0.2rem;
    line-height: normal;
}

.registrations__event-day {
    display: flex;
    justify-content: end;
    margin-top: -.9rem;
    margin-right: -.8rem;
    margin-bottom: .8rem;
    margin-left: 4rem;
}

.registrations__event-day span {
    background-color: var(--bg-color-primary);
    padding: .15rem .3rem;
    font-size: .6em;
    width: fit-content;
    border-top-right-radius: .6rem;
    border-bottom-left-radius: .3rem;
    line-height: normal;
}

.registrations__event-item.cancelled .registrations__event-number{
    background-color: var(--bg-color-dark);
}

.registrations__event-category {
    margin-bottom: .8rem;
    margin-top: .3rem;
    font-size: .9em;
    line-height: normal;
    font-weight: 700;
}

.registrations__event-count {
    position: relative;
    gap: .3rem;
}

.registrations__event-performance {
    margin-bottom: 1rem;
    font-size: .9em;
    font-weight: 700;
    line-height: normal;
}

.registrations__event-members {
    line-height: normal;
    color: var(--font-color-white);
    width: fit-content;
    padding: .1rem .3rem;
    background-color: var(--color-main);
    border-radius: .4rem;
    font-size: .9em;
    margin-bottom: .2rem;
}

.registrations__event-count-button {
    display: flex;
    align-items: center;
    line-height: normal;
    cursor: pointer;
    position: absolute;
    top: .2rem;
    left: 6.5rem;
    z-index: 100;
    margin-bottom: .5rem;
}

.registrations__event-count-button-text {
    margin-left: .5rem;
    color: var(--color-main);
}

.registrations__event-count-button-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-bottom: -.17rem;
    margin-left: -.1rem	;
    fill: var(--color-main);
    transition: transform 0.25s ease-in-out 0s;
}

.registrations__event-count-button-icon.rotated {
    transform: rotate(90deg);
}

.registrations__event-members-list {
    margin-top: .5rem;
    font-size: .9em;
}

.registrations__event-members-list li::marker {
    font-size: .7rem;
}

.registrations__ticket-count {
    text-align: left !important;
}
.registrations__event-count span {
    font-size: .9em;
}

.registrations__event-total {
    margin-bottom: 1rem;
}

.registrations__event-total span {
    font-size: .9em;
}

.registrations__event-status {
    height: fit-content;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    text-align: center;
}

.registrations__event-item-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.registrations__event-item.payment-disable .registrations__event-item-payment{
    display: none;
}

.registrations__event-item-edit span {
    display: none;
}
.registrations__event-item-edit svg {
    margin-right: 0;
}

.registrations__event.archive .registrations__event-item {
    border-color: var(--bg-color-dark);
    background-color: var(--bg-color-gray);
    opacity: .6;
}

.registrations__event.archive .registrations__event-item .registrations__event-number{
    background-color: var(--bg-color-dark);
}

.registrations__event.archive .registrations__event-item svg{
    fill: var(--bg-color-dark);
    stroke: var(--bg-color-dark);
}
.registrations__event.archive .registrations__event-item .btn {
    border-color: var(--bg-color-dark);
}

@media (min-width:768px) {
    .registrations__event-title-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .registrations__event-title {
        margin-bottom: 0;
    }
    .registrations__event-item-edit span {
        display: inherit;
    }
    .registrations__event-item-edit svg {
        margin-right: 0.5rem;
    }

}


@media (min-width:1200px) {

    .registrations__event-item {
        display: flex;
        justify-content: space-between;
    }

    .registrations__event-item-container {
        display: flex;
        align-items: center;
    }

    #account-order .registrations__event-day {
        position: absolute;
        top: .4rem;
        left: 5rem;
        display: flex;
        justify-content: end;
        margin-top: -.9rem;
        margin-right: -.8rem;
        margin-bottom: .8rem;
        margin-left: 0;
    }

    #account-order .registrations__event-day span {
        border-radius: .3rem;
    }

    .registrations__event-category {

        width: 20rem;
    }

    .registrations__event-performance {
        margin: 0;
    }

    .registrations__event-count {
        display: block;
        margin: 0;
        padding: 0 .5rem;
        width: 9rem;
    }

    .registrations__event-count-button {
        position: inherit;
        left: 0;
    }

    .registrations__event-count-button-text {
        margin-left: 0;
    }

    .registrations__event-members div {
        margin-bottom: .3rem;
    }

    .registrations__event-members-list {
        padding-left: .5rem;
        font-size: .9em;
        line-height: normal;
    }

    .registrations__event-members-list li {
        margin-bottom: .3rem;
    }

    .registrations__event-total {
        margin: 0;
        line-height: normal;
        padding: 0 .5rem;
        width: 11rem;
    }

    .registrations__event-status {
        margin: 0;
        margin-left: .5rem;
        margin-right: .5rem;
    }

    .registrations__event-title-container {
        justify-content: flex-start;
    }

    .registrations__event-title {
        margin-right: 2rem;
    }

    .registrations__event-item-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .registrations__event-item-edit span {
        display: inherit;
        font-size: .85em;
    }
    .registrations__event-item-edit svg {
        margin-right: 0.5rem;
        width: 18px;
        height: 18px;
    }
}

@media (min-width:1600px) {
    .registrations__event-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .registrations__event-item {
        flex-direction: column;
        width: 23%;
    }

    .registrations__event-item-container {
        display: block;
    }

    #account-order .registrations__event-day {
        position: inherit;
        margin-left: 4rem;
    }

    #account-order .registrations__event-day span {
        border-radius: 0;
        border-top-right-radius: .6rem;
        border-bottom-left-radius: .3rem;
    }

    .registrations__event-category {
        margin-bottom: .8rem;
        margin-top: .8rem;
        width: auto;
    }

    .registrations__event-count {
        padding: 0;

        text-align: left;
        width: auto;
    }

    .registrations__event-performance {
        margin-bottom: 1rem;
    }

    .registrations__event-count-button {
        position: absolute;
        left: 6.5rem;
    }

    .registrations__event-members-list {
        padding-left: 2rem;
        font-size: .9em;
        line-height: normal;
    }

    .registrations__event-total {
        margin: 0;
        padding: 0;
        margin-bottom: 1rem;
        line-height: inherit;
        width: 16rem;
    }

    .registrations__event-status {
        margin-left: 0;
        margin-bottom: 1rem;
    }

    .registrations__event-item-buttons {
        flex-direction: row;
    }

    .registrations__event-item-edit span {
        font-size: 1em;
    }
    .registrations__event-item-edit svg {
        width: 22px;
        height: 22px;
    }
}




/*------- Account Order Info -------*/

#account-order-info {
    overflow: inherit;
}

#account-order-info #choice_members {
    margin-bottom: 0;
}

@media (max-width:767px) {
    #account-order-info .container__column-left {
        display: none;
    }

    #account-order-info .account__container-content {
        padding-left: 1.5rem;
    }
}

#account-order-info .alert {
    margin-top: .5rem;
}

.registration__info-event {
    margin-bottom: .8rem;
    font-size: .9em;
}

.registration__info-number {
    display: flex;
    align-items: center;
    margin-bottom: .8rem;
}

.registration__info-number label {
    display: none;
    min-width: 5rem;
    margin-right: .3rem;
    font-weight: normal;
    font-size: .9em;
    color: var(--font-color-gray);
}
.registration__info-number span {
    display: inline-flex;
    background-color: var(--color-main);
    color: var(--font-color-white);
    border-radius: 0.5rem;
    padding: 0.1rem 0.3rem;
    line-height: normal;
}

#ticket_form .registration__info-status {
    margin: 0;
}

.registration__info-status {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.registration__info-status-bottom {
    margin-top: .8rem;
}

#account-order-info .registration__info-status .alert {
    margin: 0;
    margin-top: 0;
}

.registration__info-status-top {
    width: fit-content;
    margin-bottom: .8rem;
}

.registration__info-status label {
    display: none;
    min-width: 5rem;
    margin-right: .3rem;
    font-weight: normal;
    font-size: .9em;
    color: var(--font-color-gray);
}
.registration__info-status span {
    display: inline-flex;
    background-color: var(--color-main);
    color: var(--font-color-white);
    border-radius: 0.5rem;
    padding: 0.1rem 0.3rem;
    line-height: normal;
}

.registration__info-category {
    display: flex;
    align-items: center;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 1rem;
}
.registration__info-category label {
    display: none;
    min-width: 5rem;
    margin-right: .3rem;
    font-weight: normal;
    font-size: .9em;
    color: var(--font-color-gray);
}

.registration__info-members {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.registration__info-members label {
    display: none;
    min-width: 5rem;
    margin-right: .3rem;
    font-weight: normal;
    font-size: .9em;
    color: var(--font-color-gray);
}

@media (min-width:768px) {
    .registration__info-number label {
        display: block;
    }
    .registration__info-status label {
        display: block;
    }
    .registration__info-category label {
        display: block;
    }
    .registration__info-members label {
        display: block;
    }

}

.member__row,
.member__row_coach{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color-white-natural);
    border-radius: 0.6rem;
    border: 1px solid var(--border-color-gray);

}
#members, .members {
    margin-bottom: 4rem;
}

#member_table, .member_table {
    margin-bottom: 0;
}

#member_table thead, .member_table thead {
    display: none ;
}

#member_table thead th, .member_table thead th {
    border: none;
}

.member__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: .3rem !important;
    margin-top: .5rem;
    margin-left: .5rem;
    margin-bottom: 1.5rem;
    line-height: normal;
    background-color: var(--bg-color-light) !important;
    border-radius: 50%;
}

.member__birthday_td-year {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    width: 3rem;
    top: .26rem;
    right: .3rem;
    background-color: var(--bg-color-primary);
    line-height: normal;
    overflow: hidden;
    border-radius: .3rem;
    padding: 0rem .3rem;
    font-size: .9em;
    transition: height .1s ease-in;
}

.member__birthday_td-year.show {
    height: 3rem;
}

#account-order-info .member__birthday_td-year {
    right: 1.3rem;
}

#account-order-info .autocomplete-list {
    max-width: calc(100% - 2rem);
    margin-top: -1.45rem;
}

.registration__info-coach .member__row-add {
    position: absolute;
    top: .17rem;
    right: 0;
    padding: .75rem;
    background-color: var(--bg-color-white);
    border-top-right-radius: .37rem;
    border-bottom-right-radius: .37rem;
    z-index: 1000;
}

.member__row-del-top {
    position: absolute;
    right: 0;
    padding: .3rem !important;
}

.member__row-del-bottom {
    display: none;
}

#member_table .form__input-label, .member_table .form__input-label {
    background-color: var(--bg-color-white-natural);
}
#member_table .member__row, .member_table .member__row {
    margin-bottom: 1rem;
}

#member_table td, .member_table td {
    padding: 0 1rem;
    border-bottom: none;
}

#member_table tfoot, .member_table tfoot {
    display: flex;
    justify-content: flex-end;
}

#member_table .warning, .member_table .warning {
    width: auto;
    margin: -.8rem 1rem .5rem;
    background-color: var(--bs-danger-bg-subtle) !important;
}

#coach .warning {
    margin-top: -1rem;
}

.coach_table .warning {
    margin-top: -1rem;
}


.member__row-add {
    display: flex;
    justify-content: flex-end;
}
#modal_members_list .active,
#modal_members_list .active-row {
    background-color: var(--color-main);
    color: var(--font-color-white);
}

#modal_members_list .active .member__list-type {
    color: var(--font-color-white);
}

#modal_coach_list .active,
#modal_coach_list .active-row {
    background-color: var(--color-main);
    color: var(--font-color-white);
}

.registration__info-team {
    margin-bottom: 2rem;
}

.registration__info-coach {
    margin-bottom: 1rem;
    width: 100% !important;
    position: relative;
}

.registration__info-performance {
    margin-bottom: 2rem;
}

.registration__info-duration-add {
    margin-bottom: 1rem;
    justify-content: center;
}
.registration__info-duration-add svg {
    stroke: var(--color-main);
    width: 1.7rem;
    height: 1.7rem;
    margin-right: .3rem;
}

.register__container-right {
    margin-top: 4rem;
}

.registration__info-duration-add:has(#duration-addition:not(:checked):disabled ) {
    display: none;
}

#register_form:has(#duration-addition:not(:checked):disabled ) #duration-allowed{
    display: none !important;
}


#registration__info-duration-table, .registration__info-duration-table {
    background-color: var(--bg-color-white-natural);
    padding: 0.8rem;
    border: 1px solid;
    border-color: var(--bg-color-gray-dark);
    border-radius: 0.6rem;
    margin-bottom: 2rem;
}

#registration__info-duration-table thead, .registration__info-duration-table thead {
    font-size: .8em;
}


#account-order-info .registration__info-duration-add:not(:has(input[type=checkbox]:checked)) {
    display: none;
}

#account-order-info .registration__info-file-track label {
    position: absolute;
    top: -1.7rem;
    left: -0.4rem;
    z-index: 1;
    font-size: .8rem;
    color: var(--color-main);
    background-color: var(--bg-color-white);
    padding: 0 0.3rem;
}


.registration__info-duration-info {
    line-height: normal;
    font-size: .9em;
    margin-bottom: .5rem;
}

.duration_table-per-user {
    font-size: .8em;
}

.registration__info-file {
    margin: 2rem 0;
}

.registration__info-file:has(.disabled) .alert {
    display: none;
}

.registration__info-file-track {
    font-size: .8rem;
    position: relative;
    margin-bottom: 1rem;

}
.registration__info-file-track span {
    font-size: 1.1em;
    display: block;
    line-height: normal;
    overflow: hidden;
}

.registration__info-file #input-file {
    display: none;
}

.registration__info-player {
    margin-bottom: 1.5rem;
}

.registration__info-player audio,
.registration__info-player video {
    width: 100%;
}

.registration__info-price {
    background-color: var(--bg-color-white-natural);
    padding: 0.8rem;
    border: 1px solid;
    border-color: var(--bg-color-gray-dark);
    border-radius: 0.6rem;
}

.registration__info-price span {
    font-size: .9em;
}
#choice_members:disabled,
#coach_list:disabled,
#member__row-add:disabled,
#add_member_btn:disabled,
#save:disabled,
#cancel:disabled,
#input-file-button.disabled{
    display: none;
}

.modal .member__row,
.modal .member__row_coach
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem .7rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    height: 2.65rem;

}

.modal .member__surname {
    padding-right: .3rem;
}

.modal .member__age, .modal .member__coach {
    font-size: .8em;
}
.modal .member__row .member__select-rem,
.modal .member__row_coach .member__select-rem {
    display: none;
}

.modal .member__row.active .member__select-rem,
.modal .member__row_coach.active .member__select-rem,
.modal .member__row.active-row .member__select-rem,
.modal .member__row_coach.active-row .member__select-rem {
    display: block;
}

.modal .member__row.active .member__select-add,
.modal .member__row_coach.active .member__select-add,
.modal .member__row.active-row .member__select-add,
.modal .member__row_coach.active-row .member__select-add {
    display: none;
}


.member__select-add {
    stroke: var(--color-main);
}

.member__select-rem {
    stroke: var(--bg-color-white);
}

#add_member,
#add_member_coach {
    margin: 1rem;
    width: auto;
}


@media (min-width:1024px) {
    #account-order-info .member__surname_td {
        position: relative;
    }
    #account-order-info .member__surname_td .autocomplete-list {
        margin-top: -.12rem;
    }


}

.account-order-info-spinner {
    margin-right: .4rem;
    width: 1.44rem !important;
    height: 1.44rem !important;
}

@media (min-width:1024px) {
    #member_table, .member_table {
        margin-bottom: 1rem;
    }
    #member_table thead, .member_table thead {
        display: table-header-group;
        font-size: .8em;
    }

    #member_table .warning, .member_table .warning {
        position: absolute;
        width: auto;
        z-index: 111;
        margin-left: 3.5rem;
        left: 0;
        bottom: -1rem;
    }

    #member_table td, .member_table td {
        padding: 1rem;
    }
    #member_table .form__input-wrapper, .member_table .form__input-wrapper {
        margin-bottom: 0;
    }

    #member_table .form__input-label, .member_table .form__input-label {
        display: none;
    }

    #member_table .member__row, .member_table .member__row {
        position: relative;
        display: table-row;
        border: 0;
        border-bottom: 1px solid var(--border-color-gray);
    }

    #member_table .member__row:has(.alert), .member_table .member__row:has(.alert) {
        background-color: var(--bg-color-danger-light);
    }

    #member_table .member__row:last-child, .member_table .member__row:last-child {
        border-bottom: 0;
    }

    .member__row-del-top {
        display: none;
    }


    #member_table .member__row:first-child .member__number, .member_table .member__row:first-child .member__number {
        border-top-left-radius: .6rem;
    }

    #member_table .member__row:first-child .member__row-del-bottom, .member_table .member__row:first-child .member__row-del-bottom {
        border-top-right-radius: .6rem;
    }

    #member_table .member__row:last-child .member__number, .member_table .member__row:last-child .member__number {
        border-bottom-left-radius: .6rem;
    }

    #member_table .member__row:last-child .member__row-del-bottom, .member_table .member__row:last-child .member__row-del-bottom {
        border-bottom-right-radius: .6rem;
    }

    .member__birthday_td-year {
        top: -.5rem;
        right: -.5rem;
        border-radius: .3rem;
        padding: 0rem .3rem;
        font-size: .9em;
        width: auto;
    }

    .member__birthday_td-year.show {
        height: 1.2rem;
    }

    .member__number {
        width: 2rem;
        display: table-cell;
        background-color: inherit !important;
        border-radius: 0;
        vertical-align: middle;
        padding: 0 1rem !important;

    }

    .member__row-del-bottom {
        display: table-cell;
        vertical-align: middle;
        text-align: right;
        width: 1rem;
    }

    .register__container {
        display: grid;
        justify-content: space-between;
        grid-template-columns: 40% 40%;
    }

    .register__container-right {
        margin-top: 0;
    }

    .register__container-right-wrapper {
        position: sticky;
        top: 5rem;
    }

    #register_form #back {
        display: none;
    }

}

@media (min-width:1600px) {
    .register__container {
        grid-template-columns: 30% 30%;
    }

}




/*------- Account Edit -------*/
.customer_id {
    font-weight: 400;
    font-size: .8em;
    color: var(--font-color-gray);
}

.account-edit-form {
    margin-top: 2rem;
    max-width: max-content;
}




/*------- Account Delete -------*/
#account-deleted {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-gradient-2);
    min-height: 100vh !important;
    padding-bottom: 55%;
}
#account-deleted header {
    position: relative;
    backdrop-filter: none;
}

#account-deleted .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#account-deleted .header-container #menu,
#account-deleted .header-container .account__container
{
    display: none;
}

#account-deleted .content-box{
    margin: auto 1rem;
    max-width: 30rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
}

#account-deleted #logo img {
    filter: brightness(400%);
}


@media (min-width:768px) {
    #account-deleted {
        background: var(--bg-color-gradient-2);
        padding-bottom: 5%;
    }

    #account-deleted .btn{
        max-width: 18.5rem;
    }

    #account-deleted {
        padding-bottom: 5%;
    }

    #account-deleted .content-box{
        margin: auto;
    }
}




/*------- Account Member List -------*/
#account-member .btn-mode-switch-inner {
    width: 11.5rem;
}

#account-member .btn-mode-switch-inner:before {
    right: -0.2rem;
}

#account-member .btn-mode-switch-inner:after {
    width: 5.9rem;
}

#account-member .btn-mode-switch input[type="checkbox"]:checked + .btn-mode-switch-inner:before {
    content: attr(data-off);
    right: 0.3rem;
    left: 0.3rem;
}
#account-member .btn-mode-switch input[type="checkbox"]:checked + .btn-mode-switch-inner:after {
    content: attr(data-on);
    left: 5.6rem;
    box-shadow: -4px 0px 6px 0 rgba(0, 0, 0, 0.1);
    color: var(--color-main);
}

.member__list-buttons {
    margin-bottom: 1rem;

}
.member__list-box {
    display: flex;
    align-items: center;
}

.member__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-top: 1px solid;
    border-color: var(--border-color-gray);
}

.member__list-item:first-child {
    border-top: none;
}

.member__list-item.archive .member__list-item-status {
    display: none;
}
.member__list-item-icon {
    position: relative;
    display: inline-flex;
    height: fit-content;
    margin-right: .5rem;
}
.member__list-item-status {
    position: absolute;
    bottom: 14%;
    right: 14%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(86, 202, 0);
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;
}

.member__list-name {
    font-weight: 500;
}

.member__list-birthday {
    font-size: .8em;
    color: var(--font-color-gray);
}

.member__list-type {
    font-size: .8em;
    font-weight: 500;
    color: var(--color-main);
}

.member__list-item-edit {
    display: flex;
    margin-right: -.5rem;
    padding: .5rem;
    border-radius: 50%;
}

.member__list-item-text {
    display: none;
}

.member__list-item-edit svg {
    fill: var(--color-main);
}

@media (min-width:768px) {
    .member__list-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .member__list-buttons .btn-mode-switch {
        margin-right: 2rem;
    }

    .member__list-item {
        padding: .5rem;
    }

    .member__list-item:hover {
        background-color: var(--bg-color-gray);
    }

    .member__list-item-edit {
        margin-right:0;
    }

    .member__list-item-text{
        display: inherit;
    }
}





/*------- Account Member Add -------*/
#form-member {
    max-width: max-content;
    margin: 2rem 0 0 0;
}




/*------- Logout  -------*/
#common-logout {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-gradient-2);
    min-height: 100vh !important;
    padding-bottom: 55%;
}
#common-logout header {
    position: relative;
    backdrop-filter: none;
}

#common-logout .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#common-logout .header-container #menu,
#common-logout .header-container .account__container
{
    display: none;
}

#common-logout .content-box{
    margin: auto 1rem;
    max-width: 30rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
}

#common-logout #logo img {
    filter: brightness(400%);
}


@media (min-width:768px) {
    #common-logout {
        background: var(--bg-color-gradient-2);
        padding-bottom: 5%;
    }

    #common-logout .btn{
        max-width: 18.5rem;
    }

    #common-logout {
        padding-bottom: 5%;
    }

    #common-logout .content-box{
        margin: auto;
    }
}




/*------- Account Ticket -------*/
.ticket__event-count {
    margin-top: 1rem;
}
.ticket__event-date_end {
    text-align: left;
}

#account-ticket .active-archive__list.archive-preview .active-archive__list-item.archive {
    display: block;
}


@media (min-width:768px) {
    #account-ticket .alert {
        display: inline-flex;
        width: fit-content;
    }
}

@media (min-width:1024px) {
    #account-ticket .registrations__event-container {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 1rem;
    }

    #account-ticket .registrations__event-item {
        display: block;
        width: 45%;
        margin-right: 0;
    }

    #account-ticket .registrations__event-item-container {
        display: block;
    }

    #account-ticket .registrations__event-count {
        padding: 0;
        margin-bottom: 0.5rem;
    }

    #account-ticket .registrations__event-total {
        padding: 0;
        margin-bottom: 1rem;
        line-height: inherit;
    }

    #account-ticket .registrations__event-status {
        margin-left: 0;
        margin-bottom: 1rem;
    }

    #account-ticket .registrations__event-item-buttons{
        min-height: 2.8rem;
    }
}

@media (min-width:1200px) {
    #account-ticket .registrations__event-item {
        width: 31%;
    }
    #account-ticket .registrations__event-item-edit span {
        display: inherit;
    }
    #account-ticket .registrations__event-item-edit svg {
        margin-right: 0.5rem;
    }


}
@media (min-width:1600px) {
    #account-ticket .registrations__event-item {
        width: 23%;
    }
}




/*------- Account Ticket Info -------*/
.ticket__info-event {
    margin-bottom: .8rem;
    font-size: .9em;
}

.account-ticket-info .content__container {
    width: fit-content;
}

.account-ticket-info .ticket__item span {
    min-width: 5rem;
    margin-right: .3rem;
    font-weight: normal;
    font-size: .9em;
    color: var(--font-color-gray);
}

.account-ticket-info .registration__info-buttons {
    justify-content: space-between;
}




/*------- Progress bar -------*/

#progress_bar {
    width: 100%;
}
#progress__container, .progress__container {
    width: 100%;
    transition: width .3s ease;
}

#progress__container.hide, .progress__container.hide {
    width: 0;
}
.progress progress[value="0"] + .progress-value:before {
    content: "0%";
}
.progress progress[value="0"] ~ .progress-bg .progress-bar {
    width: 0%;
}
.progress progress[value="1"] + .progress-value:before {
    content: "1%";
}
.progress progress[value="1"] ~ .progress-bg .progress-bar {
    width: 1%;
}
.progress progress[value="2"] + .progress-value:before {
    content: "2%";
}
.progress progress[value="2"] ~ .progress-bg .progress-bar {
    width: 2%;
}
.progress progress[value="3"] + .progress-value:before {
    content: "3%";
}
.progress progress[value="3"] ~ .progress-bg .progress-bar {
    width: 3%;
}
.progress progress[value="4"] + .progress-value:before {
    content: "4%";
}
.progress progress[value="4"] ~ .progress-bg .progress-bar {
    width: 4%;
}
.progress progress[value="5"] + .progress-value:before {
    content: "5%";
}
.progress progress[value="5"] ~ .progress-bg .progress-bar {
    width: 5%;
}
.progress progress[value="6"] + .progress-value:before {
    content: "6%";
}
.progress progress[value="6"] ~ .progress-bg .progress-bar {
    width: 6%;
}
.progress progress[value="7"] + .progress-value:before {
    content: "7%";
}
.progress progress[value="7"] ~ .progress-bg .progress-bar {
    width: 7%;
}
.progress progress[value="8"] + .progress-value:before {
    content: "8%";
}
.progress progress[value="8"] ~ .progress-bg .progress-bar {
    width: 8%;
}
.progress progress[value="9"] + .progress-value:before {
    content: "9%";
}
.progress progress[value="9"] ~ .progress-bg .progress-bar {
    width: 9%;
}
.progress progress[value="10"] + .progress-value:before {
    content: "10%";
}
.progress progress[value="10"] ~ .progress-bg .progress-bar {
    width: 10%;
}
.progress progress[value="11"] + .progress-value:before {
    content: "11%";
}
.progress progress[value="11"] ~ .progress-bg .progress-bar {
    width: 11%;
}
.progress progress[value="12"] + .progress-value:before {
    content: "12%";
}
.progress progress[value="12"] ~ .progress-bg .progress-bar {
    width: 12%;
}
.progress progress[value="13"] + .progress-value:before {
    content: "13%";
}
.progress progress[value="13"] ~ .progress-bg .progress-bar {
    width: 13%;
}
.progress progress[value="14"] + .progress-value:before {
    content: "14%";
}
.progress progress[value="14"] ~ .progress-bg .progress-bar {
    width: 14%;
}
.progress progress[value="15"] + .progress-value:before {
    content: "15%";
}
.progress progress[value="15"] ~ .progress-bg .progress-bar {
    width: 15%;
}
.progress progress[value="16"] + .progress-value:before {
    content: "16%";
}
.progress progress[value="16"] ~ .progress-bg .progress-bar {
    width: 16%;
}
.progress progress[value="17"] + .progress-value:before {
    content: "17%";
}
.progress progress[value="17"] ~ .progress-bg .progress-bar {
    width: 17%;
}
.progress progress[value="18"] + .progress-value:before {
    content: "18%";
}
.progress progress[value="18"] ~ .progress-bg .progress-bar {
    width: 18%;
}
.progress progress[value="19"] + .progress-value:before {
    content: "19%";
}
.progress progress[value="19"] ~ .progress-bg .progress-bar {
    width: 19%;
}
.progress progress[value="20"] + .progress-value:before {
    content: "20%";
}
.progress progress[value="20"] ~ .progress-bg .progress-bar {
    width: 20%;
}
.progress progress[value="21"] + .progress-value:before {
    content: "21%";
}
.progress progress[value="21"] ~ .progress-bg .progress-bar {
    width: 21%;
}
.progress progress[value="22"] + .progress-value:before {
    content: "22%";
}
.progress progress[value="22"] ~ .progress-bg .progress-bar {
    width: 22%;
}
.progress progress[value="23"] + .progress-value:before {
    content: "23%";
}
.progress progress[value="23"] ~ .progress-bg .progress-bar {
    width: 23%;
}
.progress progress[value="24"] + .progress-value:before {
    content: "24%";
}
.progress progress[value="24"] ~ .progress-bg .progress-bar {
    width: 24%;
}
.progress progress[value="25"] + .progress-value:before {
    content: "25%";
}
.progress progress[value="25"] ~ .progress-bg .progress-bar {
    width: 25%;
}
.progress progress[value="26"] + .progress-value:before {
    content: "26%";
}
.progress progress[value="26"] ~ .progress-bg .progress-bar {
    width: 26%;
}
.progress progress[value="27"] + .progress-value:before {
    content: "27%";
}
.progress progress[value="27"] ~ .progress-bg .progress-bar {
    width: 27%;
}
.progress progress[value="28"] + .progress-value:before {
    content: "28%";
}
.progress progress[value="28"] ~ .progress-bg .progress-bar {
    width: 28%;
}
.progress progress[value="29"] + .progress-value:before {
    content: "29%";
}
.progress progress[value="29"] ~ .progress-bg .progress-bar {
    width: 29%;
}
.progress progress[value="30"] + .progress-value:before {
    content: "30%";
}
.progress progress[value="30"] ~ .progress-bg .progress-bar {
    width: 30%;
}
.progress progress[value="31"] + .progress-value:before {
    content: "31%";
}
.progress progress[value="31"] ~ .progress-bg .progress-bar {
    width: 31%;
}
.progress progress[value="32"] + .progress-value:before {
    content: "32%";
}
.progress progress[value="32"] ~ .progress-bg .progress-bar {
    width: 32%;
}
.progress progress[value="33"] + .progress-value:before {
    content: "33%";
}
.progress progress[value="33"] ~ .progress-bg .progress-bar {
    width: 33%;
}
.progress progress[value="34"] + .progress-value:before {
    content: "34%";
}
.progress progress[value="34"] ~ .progress-bg .progress-bar {
    width: 34%;
}
.progress progress[value="35"] + .progress-value:before {
    content: "35%";
}
.progress progress[value="35"] ~ .progress-bg .progress-bar {
    width: 35%;
}
.progress progress[value="36"] + .progress-value:before {
    content: "36%";
}
.progress progress[value="36"] ~ .progress-bg .progress-bar {
    width: 36%;
}
.progress progress[value="37"] + .progress-value:before {
    content: "37%";
}
.progress progress[value="37"] ~ .progress-bg .progress-bar {
    width: 37%;
}
.progress progress[value="38"] + .progress-value:before {
    content: "38%";
}
.progress progress[value="38"] ~ .progress-bg .progress-bar {
    width: 38%;
}
.progress progress[value="39"] + .progress-value:before {
    content: "39%";
}
.progress progress[value="39"] ~ .progress-bg .progress-bar {
    width: 39%;
}
.progress progress[value="40"] + .progress-value:before {
    content: "40%";
}
.progress progress[value="40"] ~ .progress-bg .progress-bar {
    width: 40%;
}
.progress progress[value="41"] + .progress-value:before {
    content: "41%";
}
.progress progress[value="41"] ~ .progress-bg .progress-bar {
    width: 41%;
}
.progress progress[value="42"] + .progress-value:before {
    content: "42%";
}
.progress progress[value="42"] ~ .progress-bg .progress-bar {
    width: 42%;
}
.progress progress[value="43"] + .progress-value:before {
    content: "43%";
}
.progress progress[value="43"] ~ .progress-bg .progress-bar {
    width: 43%;
}
.progress progress[value="44"] + .progress-value:before {
    content: "44%";
}
.progress progress[value="44"] ~ .progress-bg .progress-bar {
    width: 44%;
}
.progress progress[value="45"] + .progress-value:before {
    content: "45%";
}
.progress progress[value="45"] ~ .progress-bg .progress-bar {
    width: 45%;
}
.progress progress[value="46"] + .progress-value:before {
    content: "46%";
}
.progress progress[value="46"] ~ .progress-bg .progress-bar {
    width: 46%;
}
.progress progress[value="47"] + .progress-value:before {
    content: "47%";
}
.progress progress[value="47"] ~ .progress-bg .progress-bar {
    width: 47%;
}
.progress progress[value="48"] + .progress-value:before {
    content: "48%";
}
.progress progress[value="48"] ~ .progress-bg .progress-bar {
    width: 48%;
}
.progress progress[value="49"] + .progress-value:before {
    content: "49%";
}
.progress progress[value="49"] ~ .progress-bg .progress-bar {
    width: 49%;
}
.progress progress[value="50"] + .progress-value:before {
    content: "50%";
}
.progress progress[value="50"] ~ .progress-bg .progress-bar {
    width: 50%;
}
.progress progress[value="51"] + .progress-value:before {
    content: "51%";
}
.progress progress[value="51"] ~ .progress-bg .progress-bar {
    width: 51%;
}
.progress progress[value="52"] + .progress-value:before {
    content: "52%";
}
.progress progress[value="52"] ~ .progress-bg .progress-bar {
    width: 52%;
}
.progress progress[value="53"] + .progress-value:before {
    content: "53%";
}
.progress progress[value="53"] ~ .progress-bg .progress-bar {
    width: 53%;
}
.progress progress[value="54"] + .progress-value:before {
    content: "54%";
}
.progress progress[value="54"] ~ .progress-bg .progress-bar {
    width: 54%;
}
.progress progress[value="55"] + .progress-value:before {
    content: "55%";
}
.progress progress[value="55"] ~ .progress-bg .progress-bar {
    width: 55%;
}
.progress progress[value="56"] + .progress-value:before {
    content: "56%";
}
.progress progress[value="56"] ~ .progress-bg .progress-bar {
    width: 56%;
}
.progress progress[value="57"] + .progress-value:before {
    content: "57%";
}
.progress progress[value="57"] ~ .progress-bg .progress-bar {
    width: 57%;
}
.progress progress[value="58"] + .progress-value:before {
    content: "58%";
}
.progress progress[value="58"] ~ .progress-bg .progress-bar {
    width: 58%;
}
.progress progress[value="59"] + .progress-value:before {
    content: "59%";
}
.progress progress[value="59"] ~ .progress-bg .progress-bar {
    width: 59%;
}
.progress progress[value="60"] + .progress-value:before {
    content: "60%";
}
.progress progress[value="60"] ~ .progress-bg .progress-bar {
    width: 60%;
}
.progress progress[value="61"] + .progress-value:before {
    content: "61%";
}
.progress progress[value="61"] ~ .progress-bg .progress-bar {
    width: 61%;
}
.progress progress[value="62"] + .progress-value:before {
    content: "62%";
}
.progress progress[value="62"] ~ .progress-bg .progress-bar {
    width: 62%;
}
.progress progress[value="63"] + .progress-value:before {
    content: "63%";
}
.progress progress[value="63"] ~ .progress-bg .progress-bar {
    width: 63%;
}
.progress progress[value="64"] + .progress-value:before {
    content: "64%";
}
.progress progress[value="64"] ~ .progress-bg .progress-bar {
    width: 64%;
}
.progress progress[value="65"] + .progress-value:before {
    content: "65%";
}
.progress progress[value="65"] ~ .progress-bg .progress-bar {
    width: 65%;
}
.progress progress[value="66"] + .progress-value:before {
    content: "66%";
}
.progress progress[value="66"] ~ .progress-bg .progress-bar {
    width: 66%;
}
.progress progress[value="67"] + .progress-value:before {
    content: "67%";
}
.progress progress[value="67"] ~ .progress-bg .progress-bar {
    width: 67%;
}
.progress progress[value="68"] + .progress-value:before {
    content: "68%";
}
.progress progress[value="68"] ~ .progress-bg .progress-bar {
    width: 68%;
}
.progress progress[value="69"] + .progress-value:before {
    content: "69%";
}
.progress progress[value="69"] ~ .progress-bg .progress-bar {
    width: 69%;
}
.progress progress[value="70"] + .progress-value:before {
    content: "70%";
}
.progress progress[value="70"] ~ .progress-bg .progress-bar {
    width: 70%;
}
.progress progress[value="71"] + .progress-value:before {
    content: "71%";
}
.progress progress[value="71"] ~ .progress-bg .progress-bar {
    width: 71%;
}
.progress progress[value="72"] + .progress-value:before {
    content: "72%";
}
.progress progress[value="72"] ~ .progress-bg .progress-bar {
    width: 72%;
}
.progress progress[value="73"] + .progress-value:before {
    content: "73%";
}
.progress progress[value="73"] ~ .progress-bg .progress-bar {
    width: 73%;
}
.progress progress[value="74"] + .progress-value:before {
    content: "74%";
}
.progress progress[value="74"] ~ .progress-bg .progress-bar {
    width: 74%;
}
.progress progress[value="75"] + .progress-value:before {
    content: "75%";
}
.progress progress[value="75"] ~ .progress-bg .progress-bar {
    width: 75%;
}
.progress progress[value="76"] + .progress-value:before {
    content: "76%";
}
.progress progress[value="76"] ~ .progress-bg .progress-bar {
    width: 76%;
}
.progress progress[value="77"] + .progress-value:before {
    content: "77%";
}
.progress progress[value="77"] ~ .progress-bg .progress-bar {
    width: 77%;
}
.progress progress[value="78"] + .progress-value:before {
    content: "78%";
}
.progress progress[value="78"] ~ .progress-bg .progress-bar {
    width: 78%;
}
.progress progress[value="79"] + .progress-value:before {
    content: "79%";
}
.progress progress[value="79"] ~ .progress-bg .progress-bar {
    width: 79%;
}
.progress progress[value="80"] + .progress-value:before {
    content: "80%";
}
.progress progress[value="80"] ~ .progress-bg .progress-bar {
    width: 80%;
}
.progress progress[value="81"] + .progress-value:before {
    content: "81%";
}
.progress progress[value="81"] ~ .progress-bg .progress-bar {
    width: 81%;
}
.progress progress[value="82"] + .progress-value:before {
    content: "82%";
}
.progress progress[value="82"] ~ .progress-bg .progress-bar {
    width: 82%;
}
.progress progress[value="83"] + .progress-value:before {
    content: "83%";
}
.progress progress[value="83"] ~ .progress-bg .progress-bar {
    width: 83%;
}
.progress progress[value="84"] + .progress-value:before {
    content: "84%";
}
.progress progress[value="84"] ~ .progress-bg .progress-bar {
    width: 84%;
}
.progress progress[value="85"] + .progress-value:before {
    content: "85%";
}
.progress progress[value="85"] ~ .progress-bg .progress-bar {
    width: 85%;
}
.progress progress[value="86"] + .progress-value:before {
    content: "86%";
}
.progress progress[value="86"] ~ .progress-bg .progress-bar {
    width: 86%;
}
.progress progress[value="87"] + .progress-value:before {
    content: "87%";
}
.progress progress[value="87"] ~ .progress-bg .progress-bar {
    width: 87%;
}
.progress progress[value="88"] + .progress-value:before {
    content: "88%";
}
.progress progress[value="88"] ~ .progress-bg .progress-bar {
    width: 88%;
}
.progress progress[value="89"] + .progress-value:before {
    content: "89%";
}
.progress progress[value="89"] ~ .progress-bg .progress-bar {
    width: 89%;
}
.progress progress[value="90"] + .progress-value:before {
    content: "90%";
}
.progress progress[value="90"] ~ .progress-bg .progress-bar {
    width: 90%;
}
.progress progress[value="91"] + .progress-value:before {
    content: "91%";
}
.progress progress[value="91"] ~ .progress-bg .progress-bar {
    width: 91%;
}
.progress progress[value="92"] + .progress-value:before {
    content: "92%";
}
.progress progress[value="92"] ~ .progress-bg .progress-bar {
    width: 92%;
}
.progress progress[value="93"] + .progress-value:before {
    content: "93%";
}
.progress progress[value="93"] ~ .progress-bg .progress-bar {
    width: 93%;
}
.progress progress[value="94"] + .progress-value:before {
    content: "94%";
}
.progress progress[value="94"] ~ .progress-bg .progress-bar {
    width: 94%;
}
.progress progress[value="95"] + .progress-value:before {
    content: "95%";
}
.progress progress[value="95"] ~ .progress-bg .progress-bar {
    width: 95%;
}
.progress progress[value="96"] + .progress-value:before {
    content: "96%";
}
.progress progress[value="96"] ~ .progress-bg .progress-bar {
    width: 96%;
}
.progress progress[value="97"] + .progress-value:before {
    content: "97%";
}
.progress progress[value="97"] ~ .progress-bg .progress-bar {
    width: 97%;
}
.progress progress[value="98"] + .progress-value:before {
    content: "98%";
}
.progress progress[value="98"] ~ .progress-bg .progress-bar {
    width: 98%;
}
.progress progress[value="99"] + .progress-value:before {
    content: "99%";
}
.progress progress[value="99"] ~ .progress-bg .progress-bar {
    width: 99%;
}
.progress progress[value="100"] + .progress-value:before {
    content: "100%";
}
.progress progress[value="100"] ~ .progress-bg .progress-bar {
    width: 100%;
}

.progress progress {
    content: attr(value)'%';
}

.progress {
    display: block;
    position: relative;
    overflow: hidden;
}
.progress progress {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -777px;
}
.progress-value {
    color: #333;
    display: block;
    line-height: 21px;
    text-align: center;
}
.progress-bg {
    background-color: var(--bg-color-primary);
    position: relative;
    height: 1rem;
    border-radius: .375rem;
    overflow: hidden;
}

@-webkit-keyframes progress_bar {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -40px 0;
    }
}
@-moz-keyframes progress_bar {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -40px 0;
    }
}
@keyframes progress_bar {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -40px 0;
    }
}
.progress-bar {
    overflow: hidden;
    background-color: var(--color-main);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    -webkit-transition: width 1s linear;
    -moz-transition: width 1s linear;
    -ms-transition: width 1s linear;
    transition: width 1s linear;
}
.progress-bar:after {
    -webkit-animation: progress_bar 0.8s linear infinite;
    -moz-animation: progress_bar 0.8s linear infinite;
    -ms-animation: progress_bar 0.8s linear infinite;
    -o-animation: progress_bar 0.8s linear infinite;
    animation: progress_bar 0.8s linear infinite;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/*------- Organizer-------*/
.organizer-container {
    padding: 2.5rem 1rem 1.5rem;
}

.organizer__box {
    margin-bottom: 1rem;
}

.organizer__logo {
    max-width: 9rem;
    margin: auto;
    margin-bottom: 2rem;
    flex-shrink: 0;

}
.organizer__logo img {
    max-width: 100%;
    border-radius: 50%;
}
@media (min-width: 1024px) {
    .organizer__box {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
    .organizer__logo {
        margin-bottom: 0;

    }
}


@media (min-width: 1200px) {
    .organizer-container {
        max-width: 960px;
    }
}




/*------- Pagination -------*/
.pagination-container {
    display: flex;align-items: center;
    justify-content: flex-end;
}

.pagination-result {
    margin-right: .5rem;
    font-size: .9em;
}

.pagination {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    margin-left: 1.5rem;
}




/*------- Checkout Registration -------*/
#checkout-registration {
    background: var(--bg-color-gradient-3);
}

#checkout-registration .content-box {
    background-color: inherit;

}

#checkout-registration .content-box-empty {
    color: var(--font-color-white);
}

#checkout-registration .checkout-container:not(:has(#coach)) {
    min-height: 100vh !important;
}

.checkout-container {
    min-height: 100vh;
}

.checkout__container-title {
    font-weight: 700;
    margin: 1rem 0;
    line-height: normal;
    color: var(--font-color-white);
}

.checkout__container-title span {
    font-size: .8em;
    font-weight: normal;
    color: var(--font-color-white-light);
}
span.checkout__container-title-text {
    display: block;
    font-weight: normal;
}

.checkout__container-box {
    position: relative;
    display: flex;
    margin-bottom: 3rem;
    overflow: hidden;

}

.checkout__box-item {
    position: relative;
    left:50%;
    transform:translateX(100%);
    padding: .8rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
    background-color: var(--bg-color-white);
    transition: all .3s ease;
    height: fit-content;
    min-width: 100%;
}

.checkout__step-title {
    position: absolute;
    top: 0.55rem;
    font-size: .8em;
    font-weight: 700;
}
.checkout__step-count {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.checkout__step-count-item {
    display: block;
    width: .8rem;
    height: .8rem;
    margin: 0 .2rem;
    border-radius: 50%;
    background-color: var(--bg-color-gray-dark);
}

.checkout__step-count-item.active {
    background-color: var(--color-main);
}

.checkout__category-name {
    font-weight: 700;
    line-height: normal;
    margin-bottom: 2rem;
}

.checkout__promocode-button {
    margin-bottom: 1rem;
}

#choice_members {
    margin-bottom: 1rem;
}

.register__checkout #member_table .form__input-blur:hover,
.register__checkout #member_table .form__input-blur:focus,
#account-order-info .member_table .form__input-blur:hover,
#account-order-info .member_table .form__input-blur:focus{
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-main);
}



.autocomplete-list {
    margin-top: -.1rem;
    box-shadow: 0 0 0 2px var(--color-main);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-bottom-left-radius: 0.37rem;
    border-bottom-right-radius: 0.37rem;
    max-height: 10rem;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    list-style-type: none;
    padding: 0;
    width: 100%;
    z-index: 1000;
}

.autocomplete-item {
    padding: .5rem;
    cursor: pointer;
}

.register__checkout .autocomplete-list {
    max-width: calc(100% - 2rem);
    margin-top: -1.45rem;
}

.autocomplete-list-coach {
    margin-top: -.15rem !important;
    width: 100% !important;
    max-width: 100% !important;
}
.autocomplete-item:hover {
    background-color: var(--bg-color-light);
}

[v-cloak] {
    display: none;
}

.modal-footer {
    border-top: none;
}

.checkout__form_second .btn-small {
    margin-bottom: 1rem;
}

.checkout__step-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}

.checkout__button {
    width: auto;
}

.checkout__button-next {
    padding-left: 1.3rem;
    width: auto;
}

.checkout__button-next svg,
.checkout__button-next span {
    margin-left: .4rem;
    margin-right: 0;
}

.checkout__error {
    margin-top: .3rem;
}

.checkout__first.show {
    transform: translateX(-50%);
}

.checkout__first.hide {
    transform: translateX(-230%);
}

.checkout__second {
    max-height: 10000vh;
    transform: translateX(120%);
    transition: transform .3s, max-height .3s;
}

.checkout__second.show {
    transform: translateX(-150%);
}

.checkout__second.hide {
    transform: translateX(-260%);
}

.checkout__second.min {
    max-height: 50vh;
}

.checkout__third {
    transform: translateX(120%);
}

.checkout__third.show {
    transform: translateX(-250%);
}

.checkout__third.hide {
    transform: translateX(-500%);
}

.checkout__fourth {
    transform: translateX(120%);
}

.checkout__fourth.show {
    transform: translateX(-350%);
}

.checkout__fourth.show.without-third {
    transform: translateX(-250%);
}

.checkout__fourth.hide {
    transform: translateX(-500%);
}

.checkout__zero.show {
    transform: translateX(-50%);
}

.checkout__container-box.with-zero .checkout__zero.hide {
    transform: translateX(-230%);
}


.checkout__container-box.with-zero .checkout__first.show {
    transform: translateX(-150%);

}

.checkout__container-box.with-zero .checkout__first.hide {
    transform: translateX(-280%);
}

.checkout__container-box.with-zero .checkout__second {
    transform: translateX(120%);
}

.checkout__container-box.with-zero .checkout__second.show {
    transform: translateX(-250%);

}

.checkout__container-box.with-zero .checkout__second.hide {
    transform: translateX(-400%);
}

.checkout__container-box.with-zero .checkout__third {
    transform: translateX(120%);
}

.checkout__container-box.with-zero .checkout__third.show {
    transform: translateX(-300%);
    left: auto;
}

.checkout__container-box.with-zero .checkout__third.hide {
    transform: translateX(-500%) !important;
}


#checkout-registration .registration__info-file {
    margin-bottom: 2rem;
}
.registration__info-file-container {
    box-shadow: 0 0 0 2px var(--color-main);
    border-radius: .37rem;
    padding: 1rem;
}

#checkout-registration .registration__info-file-track label {
    position: absolute;
    top: -1.7rem;
    left: -0.4rem;
    z-index: 1;
    font-size: .8rem;
    color: var(--color-main);
    background-color: var(--bg-color-white);
    padding: 0 0.3rem;
}

#checkout-registration #input-file-button {
    width: 100%;
}

#checkout-registration .registration__info-duration-add label {
    margin-right: 0;
    font-size: .95em;
}

#checkout-registration .registration__info-file-track span {
    color: var(--font-color-primary);
}


#checkout-registration #registration__info-duration-table, #checkout-registration .registration__info-duration-table {
    max-width: 26rem;
}

.checkout__third .alert-info {
    margin-top: 0.5rem;
}

#duration-allowed-span {
    margin-left: .2rem;
}

#checkout__second #member_table thead th {
    padding-left: 1rem;
}

#coach, .coach_table {
    position: relative;
    margin-top: 4rem;
}

#member_coach_table, .member_coach_table {
    width: 100%;
}
.member-coach__row {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.member-coach__row td {
    padding: 0;
}

.member-coach__row .member__row-del-bottom {
    position: absolute;
    top: .9rem;
    right: .7rem;
    display: block;
    z-index: 1000;
}

.coach_table .member__row-add,
#coach .member__row-add {
    position: absolute;
    top: .17rem;
    right: 0;
    padding: .75rem;
    background-color: var(--bg-color-white);
    border-top-right-radius: .37rem;
    border-bottom-right-radius: .37rem;
    z-index: 1000;
}

#add_member_coach_btn, .member_coach_btn {
    display: flex;
    padding: .3rem;
    margin-bottom: 0 !important;
}

#add_member_coach_btn, .member_coach_btn svg{
    fill: var(--bg-color-white);
}

.coach_message {
    color: var(--color-main);
    font-size: .8em;
}


@media (min-width: 1024px) {
    .member-coach__row .member__row-del-bottom {
        right: 1rem;
    }
}

.member-coach__row:first-child .member__row-del-bottom{
    display: none;
}

.member-coach__row .member__number {
    display: none;
}

.member__full_name_td {
    flex-basis: 100%;
}

#team, .team {
    margin-top: 3rem;
}

#checkout-registration .team {
    margin-top: 0;
}

#checkout-registration .registration__info-duration-add:not(:has(input[type=checkbox]:checked)) {
    display: none;
}


#modal_unsaved_changes .modal-dialog {
    margin-left: .75rem;
    margin-right: .75rem;
}

@media (min-width:576px) {
    #modal_unsaved_changes .modal-dialog {
        margin-left: auto;
        margin-right: auto;
    }
}


#modal_unsaved_changes .modal-content {
    border-radius: 1rem;
}

#modal_unsaved_changes .modal-header {
    padding-bottom: 0;
}

#modal_unsaved_changes .modal-body {
    padding: 0 1.8rem;
    text-align: center;
}

#modal_unsaved_changes .modal-title {
    margin-bottom: .5rem;
}

#modal_unsaved_changes .modal-footer {
    padding: 1.8rem;
    gap: 1rem;
}

#modal_unsaved_changes .modal-footer>* {
    margin: 0;
}

.modal-backdrop.show {
    opacity: 0.7;
}

@media (min-width:768px) {

    #checkout-registration .content-box {
        background: var(--bg-color-white);
    }

    #checkout-registration .content-box-empty {
        color: inherit;
        max-width: 20rem;
        margin-top: 30%;
    }

    .checkout-container {
        overflow: hidden;
    }
}


@media (min-width:1024px) {

    .checkout-container {
        max-width: 45rem;
    }

    .checkout__container-box {
        margin-bottom: 3rem;
    }

    .checkout__box-item {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
    }

    .checkout__zero,
    .checkout__first,
    .checkout__third,
    .checkout__fourth {
        min-width: 30rem;
    }

    .checkout__first.hide {
        transform: translateX(-230%);
    }

    .checkout__second.show {
        transform: translateX(-69%);
        left: auto;
    }
    .checkout__second.hide {
        transform: translateX(-260%);
    }

    .checkout__third.show {
        transform: translateX(-222.5%);
        left: auto;
    }

    .checkout__fourth.show {
        transform: translateX(-322.5%);
        left: auto;
    }

    .checkout__fourth.show.without-third {
        transform: translateX(-222.5%);
        left: auto;
    }

    .checkout__container-box.with-zero .checkout__first.show {
        transform: translateX(-150%);
    }

    .checkout__container-box.with-zero .checkout__second.show {
        transform: translateX(-138%);
    }

    .checkout__container-box.with-zero .checkout__third.show {
        transform: translateX(-320%);
    }

    #member_table ::-webkit-input-placeholder {
        color:transparent;
    }

    #member_table ::-moz-placeholder {
        color:transparent;
    }

    .coach_table,
    #coach,
    #telephone,
    #team
    {
        width: 50%;
    }

    #checkout-registration .member__birthday_td .form__input-wrapper {
        width: 7.5rem;
    }

    #checkout-registration .member__surname_td .form__input-wrapper,
    #checkout-registration .member__name_td .form__input-wrapper {
        width: 12rem;
    }

    #checkout-registration #member_table td {
        padding: 1rem .5rem;
    }

    #checkout-registration .autocomplete-list {
        width: 12rem;
        margin-top: -.15rem;
    }

    #checkout-registration .autocomplete-item {
        font-size: .9em;
    }
}




/*------- Checkout Success -------*/
#checkout-success {
    background: var(--bg-color-gradient-2);
}

.success__box {
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
    background-color: var(--bg-color-white);
    transition: all .3s ease;
    width: 100%;
}

.success__text {
    display: flex;
    align-items: end;
    margin-top: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.success__text span {
    margin-left: 0.5rem;
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: -0.2rem;
    color: var(--font-color-white);
}

.success__number {
    position: absolute;
    display: inline-flex;
    background-color: var(--color-main);
    color: var(--font-color-white);
    border-radius: 0.5rem;
    padding: 0.1rem 0.3rem;
    margin-top: -1.65rem;
    margin-left: -0.2rem;
    line-height: normal;
}

.success__category {
    margin-bottom: 0.8rem;
    margin-top: 0.5rem;
    line-height: normal;
    font-weight: 700;
}
.success__count {
    margin-bottom: .5rem;
}

.success__item {
    display: flex;
    align-items: baseline;
}

.success__addition {
    line-height: normal;
    margin-bottom: .2rem;
    align-items: flex-end;
    margin-top: .2rem;
}

.success__item span {
    width: 6.5rem;
    font-size: .9em;
}
.success__item .currency {
    width: auto;
    margin: 0 .2rem;
}

.success__total {
    margin-bottom: 1rem;
}

.success__buy {
    width: fit-content;
    margin-bottom: 2rem;
}

.success__buttons .btn {
    margin-bottom: 1rem;
}

.success__buttons .btn:last-child {
    margin-bottom: 0;
}


@media (min-width: 1024px) {
    .success__box {
        padding: 2rem;
    }

    .checkout__box-item {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
    }

    .success__number {
        margin-top: -2.65rem;
    }

    .success__category {
        margin-top: 0;
    }

    .success__buttons {
        display: flex;
        flex-direction: row-reverse;
        gap: .8rem;
    }

    .success__buttons .btn {
        margin-bottom: 0;
    }

}




/*------- Checkout Ticket -------*/
#checkout-ticket {
    background: var(--bg-color-gradient-3);
}

#checkout-ticket .checkout__container-box .with-zero .checkout__first.show {
    transform: translateX(-150%);
}

#checkout-ticket .checkout__box-item.hide {
    transform: translateX(-270%);
}

.ticket__item {
    display: flex;align-items: baseline;
    line-height: normal;
    margin-bottom: .5rem;
}

.ticket__item span {
    display: block;
    width: 5.5rem;
    flex-shrink: 0;
    font-size: .9em;
}
.ticket__item .currency {
    width: auto;
    margin: 0 .2rem;
}

.ticket__item-place {
    font-size: .9em;
}

.ticket__cart {
    display: flex;
    margin: 1.5rem 0;
    align-items: center;
}
.ticket__cart .ticket__item {
    margin-bottom: 0;
}

.ticket__cart-count {
    display: flex;
    align-items: center;
}

.ticket__cart-count #count{
    width: 3rem;
    margin: 0 .5rem;
    text-align: center;
    border: none;
    background-color: transparent;
    color: var(--font-color-primary);
    font-weight: 700;
    outline: none;

}
.ticket__cart-count #count::-webkit-inner-spin-button,
.ticket__cart-count #count::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

.ticket__cart-count #count {
    -moz-appearance: textfield;
}


.ticket__cart-count button {
    display: flex;
    align-items: center;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
}

.ticket__item #finale_price {
    font-weight: 700;
}

.ticket__buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
}

@media (min-width: 1024px) {
    #checkout-ticket .checkout-container {
        max-width: 35rem;
    }

    #checkout-ticket .checkout__box-item {
        padding: 2rem;

    }
}




/*------- Ticket Success -------*/

#ticket-success {
    background: var(--bg-color-gradient-2);
}

.ticket__item-name {
    margin: 1rem 0;
}

.ticket__item-quantity {
    margin-bottom: 1rem;
}

.ticket__item-total {
    margin-bottom: 1rem;
}
.ticket__item-buy {
    width: fit-content;
    margin-bottom: 2rem;
}




/* ------- Payment Failure ------- */
#payment-failure {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-gradient-2);
    min-height: 100vh !important;
    padding-bottom: 55%;
}

#payment-failure #logo img {
    filter: brightness(400%);
}

#payment-failure header {
    position: relative;
    backdrop-filter: none;
}

#payment-failure .content-box {
    margin: auto 1rem;
    max-width: 40rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
}

#payment-failure .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#payment-failure .header-container #menu,
#payment-failure .header-container .account__container
{
    display: none;
}

#payment-failure li::marker {
    color: var(--color-main);
}

.payment-icon {
    fill: var(--color-gray);
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem auto;
}

@media (min-width:768px) {
    #payment-failure {
        padding-bottom: 5%;
    }

    #payment-failure .content-box {
        margin: auto;
    }

    #payment-failure .btn{
        max-width: 18.5rem;
    }
}




/* ------- Payment Success ------- */

#payment-success {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-gradient-2);
    min-height: 100vh !important;
    padding-bottom: 55%;
}

#payment-success header {
    position: relative;
    backdrop-filter: none;
}

#payment-success #logo img {
    filter: brightness(400%);
}

#payment-success .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#payment-success .content-box {
    margin: auto 1rem;
    max-width: 40rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
}


#payment-success .header-container #menu,
#payment-success .header-container .account__container {
    display: none;
}

.payment-icon-success {
    fill: var(--color-main);
}

@media (min-width:768px) {
    #payment-success {
        padding-bottom: 5%;
    }

    #payment-success .content-box {
        margin: auto;
    }

    #payment-success .btn{
        max-width: 18.5rem;
    }
}



/*------- Error Page -------*/
#error-not-found {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-gradient-2);
    min-height: 100vh !important;
    padding-bottom: 55%;
}
#error-not-found .content-box{
    margin: auto 1rem;
    max-width: 40rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
}

#error-not-found header {
    position: relative;
    backdrop-filter: none;
}

#error-not-found .header-container {
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
}

#error-not-found .header-container #menu,
#error-not-found .header-container .account__container
{
    display: none;
}

#error-not-found #logo img {
    filter: brightness(400%);
}

#common-login {
    display: flex;
    flex-direction: column;
    background: var(--bg-color-gradient-2);
    min-height: 100vh !important;
    padding-bottom: 45%;
}

#common-login .content-box{
    margin: auto 1rem;
    max-width: 30rem;
    border-radius: 1rem;
    box-shadow: rgba(58, 53, 65, 0.30) 0px 2px 10px;
}

@media (min-width:768px) {
    #error-not-found {
        padding-bottom: 5%;
    }

    #error-not-found .btn{
        max-width: 18.5rem;
    }

    #error-not-found .content-box{
        margin: auto;
    }

    #common-login {
        padding-bottom: 5%;
    }

    #common-login .content-box{
        margin: auto;
    }
}





/*------- Promo Section -------*/
.promo__section-container {
    padding-bottom: 3.5rem;
}


.promo__section-title {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.promo__section-container:has(.promo-container) .promo__section-title {
    display: flex;
}

.promo__section-title h2 {
    margin-bottom: 0;
    font-size: 1.3rem;
    text-align: center;
    color: var(--color-gray);
}
.promo__section-container svg {
    margin-bottom: .3rem;
}

.promo-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-items: center;
}

.promo__thumb {
    border-radius: .5rem;
    overflow: hidden;
}


@media (min-width: 1200px) {

    .promo__section-container {
        max-width: 100%;
    }

    .promo-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .promo__thumb {
        width: calc(16.66% - 1rem);
    }
}

@media (min-width: 2000px) {
    .promo__thumb {
        width: calc(14.2% - 1rem);
    }
}



/*------- Information Page -------*/
.information__container {
    padding-top: 2rem;
}

.information__title {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    margin-bottom: 2rem;
}




@media print {
    /* All your print styles go here */
    header,
    #program .program-search,
    #program .program__row-button-arrow,
    #program .program__element-duration,
    #program .program__registration-coach,
    #program .program__registration-duration-container,
    #program .program__registration-team,
    #program .program__registration-school,
    #program .program__row.ended,
    #program .program__registration-members,
    .modal {
        display: none !important;
    }

    body {
        background-color: #ffffff;
        font-size: .7em;
    }

    #program {
        background: #ffffff;
        color: #000000;
    }

    #program .container {
        padding-top: 0;
        margin-right: 15px;
    }

    #program .program-product__title,
    #program .program-product__date,
    #program .program-name {
        color: #000000;
    }

    #program .program__info-container {
        background-color: #ffffff;
        padding: 0;
        padding-left: 5rem;
        padding-bottom: .7rem;
        margin-bottom: 1rem;
        border: 1px solid #c2c2c2;
        border-top: 0;
    }
    .program__row-button.collapsed + .program__row-info {
        display: block;
    }

    .program__row:has(.program__info-container) .program__row-button {
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;

    }

    .program__register-count {
        margin-bottom: 0;
        border-bottom-left-radius: .2rem;
        margin-left: -.5rem;
        background-color: #d5d5d5;
    }

    .program__registration-members-print .program__registration-members-text {
        background-color: #d5d5d5;
    }

    .program__element-name-round {
        color: #000000;
    }

    #program .heat-separator {
        background-color: #d5d5d5;
        margin-left: -5rem;
        margin-right: 0;
        margin-bottom: 0;
    }

    #program .program__row-button-container-box {
        flex-direction: row;
        align-items: center;
    }

    #program .program__registration {
        margin-bottom: 0;
    }

    #program .program__registration-container-top {
        margin-bottom: 0;
        align-items: center;
    }

    #program .program__element-time {
        background-color: #666;
        color: #fff;
        margin-bottom: 0;
    }
    #program .program__element-number{
        width: 2rem;
        padding-top: 0;
    }


    #program .program__registration-number {
        background-color: #444;
        color: #fff;
    }

    #program .program__element-name {
        margin-bottom: 0;
        padding-top: 0;
    }

    #program .program__registration-members-print {
        display: flex;
        flex-shrink: 0;
    }

    #program .program__registration-school-print {
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
    }

    #program .program__registration-school-print .program__registration-school-city {
        font-weight: normal;
        font-size: .9em;
    }

    #program .program__row-button {
        padding: .3rem;
        background-color: #d5d5d5;
    }

    #program .program-product__title-container {
        padding-top: 0;
        margin-top: 0;
        background-color: transparent;
    }

    #program .program__element-container {
        justify-content: center;
        font-size: 1.2em;
    }
}