.menu-padding {
    padding: 0 6px !important
}

.main-banner img,
.photos-gallery img {
    height: auto !important;
    width: 100% !important
}

.main-banner .q-img__container,
.photos-gallery .q-img__container {
    display: flex;
    align-items: center;
    justify-content: center
}

.photos-gallery .q-img__container {
    background: #000
}

.q-btn {
    text-transform: capitalize !important
}

.button_achieve {
    background: #6C757D;
    width: 139px;
    height: 35px;
    clip-path: polygon(8% 0%, 92% 0%, 100% 23%, 100% 78%, 90% 100%, 8% 100%, 0% 75%, 0% 20%)
}

.achievement-home .q-item__section--side>.q-icon {
    font-size: 24px;
    display: none
}

.achievement-truncate {
    width: 140px
}

.achievement-truncate-home {
    width: 200px
}

.button_achieve2 {
    background: #6C757D;
    width: 214px;
    height: 35px;
    clip-path: polygon(8% 0%, 92% 0%, 100% 23%, 100% 78%, 90% 100%, 8% 100%, 0% 75%, 0% 20%)
}

.carousel-3d-controls {
    position: absolute;
    top: 50%;
    height: 0;
    margin-top: -30px;
    left: 0;
    width: 100%;
    z-index: 1000
}

.carousel-3d-controls button {
    background-color: transparent;
    border: none;
    padding: 0
}

.carousel-3d-controls .next,
.carousel-3d-controls .prev {
    position: absolute;
    z-index: 1010;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    top: 0
}

.carousel-3d-controls.prev {
    left: 10px;
    text-align: left
}

.carousel-3d-controls .next {
    right: 10px;
    text-align: right
}

.carousel-3d-controls .disabled {
    opacity: .2;
    cursor: default
}

.carousel-3d-controls .disabled:hover {
    cursor: default;
    opacity: .2
}

.carousel-3d-slide {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    top: 0;
    -webkit-box-shadow: 0 0 36px -21px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0 0 36px -21px rgba(66, 68, 90, 1);
    box-shadow: 0 0 36px -21px rgba(66, 68, 90, 1);
    background-size: cover;
    background-color: #ccc;
    display: block;
    margin: 0;
    box-sizing: border-box
}

.carousel-3d-container {
    min-height: 1px;
    width: 100%;
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin: 20px auto;
    box-sizing: border-box
}

.carousel-3d-slider {
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px
}

.carousel-3d-slide.opacity {
    filter: opacity(40%)
}

.carousel-3d-slide {
    text-align: left
}

.carousel-3d-slide img {
    width: 100%
}

.news-container iframe {
    width: 100% !important
}

.carousel-3d-slide.current {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 999
}

.carousel-3d-slide.current.opacity {
    filter: opacity(100%)
}

.football-event-card {
    background: #BFF6DD !important;
    border: #B5DCCA !important
}

.basketball-event-card {
    background: #FFE3C2 !important;
    border: #E5CEB3 !important
}

.esports-event-card {
    background: #D9CFFF !important;
    border: #C6BEE2 !important
}

.calendar .q-current-day .q-calendar__button {
    background: #B7914D !important;
    color: #fff !important
}

.calendar .q-calendar__button {
    border-radius: 8px;
    min-height: 2em;
    min-width: 2em;
    font-size: 14px
}

.calendar .q-calendar-month__head--weekdays,
.calendar .q-calendar-month__head--workweek {
    font-size: 14px;
    font-weight: 500
}

.calendar .q-calendar-month__head {
    margin-bottom: 15px
}

.calendar-container .q-btn:before {
    border-color: #929292;
    border-radius: 10px
}

.event-container .q-calendar-month__day.q-selected .q-calendar__button {
    color: #fff !important;
    background: #dfc28e !important
}

.event-container .q-field--outlined .q-field__control {
    border-radius: 8px !important;
    align-items: center
}

.event-container .event-calendar-dots {
    height: 7px;
    width: 7px;
    margin: 0 1.5px
}

.event-tab-container .q-tab__icon,
.news-tab-container .q-tab__icon,
.videos-tab-container .q-tab__icon {
    width: 40px;
    height: 40px;
    font-size: 28px
}

.event-tab-container .q-tab--active .q-tab__icon,
.news-tab-container .q-tab--active .q-tab__icon,
.videos-tab-container .q-tab--active .q-tab__icon {
    color: #E2B862 !important
}

.event-tab-container .q-tab--active .q-tab__indicator,
.news-tab-container .q-tab--active .q-tab__indicator,
.videos-tab-container .q-tab--active .q-tab__indicator {
    height: 4px;
    color: #E2B862 !important
}

.event-tab-container .q-tab--inactive .q-tab__indicator,
.news-tab-container .q-tab--inactive .q-tab__indicator,
.videos-tab-container .q-tab--inactive .q-tab__indicator {
    height: 1px;
    opacity: 1
}

.event-container .q-tab-panel,
.videos-container .q-tab-panel,
.news-container .q-tab-panel {
    padding: 0 !important
}

.event-container .q-stepper__dot {
    margin-right: 0 !important
}

.event-container .q-stepper--vertical .q-stepper__dot:before {
    margin-bottom: 0;
    background: #6C757D
}

.event-container .q-stepper--vertical .q-stepper__dot:after {
    margin-top: -3px;
    background: #6C757D
}

.event-container .q-stepper--vertical {
    padding: 0 0 !important
}

.event-container .q-img__content>div {
    background: unset !important
}

.event-container .full-time-stepper .q-stepper__dot {
    width: 0px !important;
    min-width: 0px !important;
    height: 0px !important;
    border-radius: 50%;
    margin-bottom: -30px
}

.event-container svg {
    height: 125px;
    width: 100%
}

.event-container .custom-colored-range .q-slider__track-container {
    background-image: var(--track-bg);
    height: 3px
}

.event-container .custom-colored-range--inside .q-slider__track {
    top: 2px;
    bottom: 2px
}

.event-container .custom-colored-range--outside .q-slider__track {
    border: 0 solid #929292;
    background: #929292;
    height: 0.1px !important;
    top: 3px
}

.event-container .q-slider__track-container--h {
    padding: 0 0 !important
}

.event-container .q-range.disabled,
[disabled] {
    opacity: 1 !important
}

.event-container .q-tab-panels .scroll,
.videos-container .q-tab-panel .scroll,
.news-container .q-tab-panel .scroll {
    overflow: unset !important
}

.news-container .loading-custom .q-card__section--vert,
.videos-container .loading-custom .q-card__section--vert {
    padding: 16px 0
}

.event-container .loading-custom .q-card__section--vert,
.division-detail-container .loading-custom .q-card__section--vert {
    padding: 0 0
}

.news-container .loading-custom .q-item,
.videos-container .loading-custom .q-item,
.event-container .loading-custom .q-item,
.division-detail-container .loading-custom .q-item,
.profile-container .loading-custom .q-item {
    padding: 8px 0
}

.event-container .on-left {
    margin-right: 4px !important
}

.dark .event-container .q-field__native {
    color: #e5e5e5 !important
}

.dark .event-container .q-field__marginal {
    color: #757575 !important
}

.dark .q-field--outlined .q-field__control:before {
    border: 1px solid #757575
}

.dark .achievement-home .q-field__native,
.dark .login-div .q-field__native,
.dark .register-div .q-field__native,
.dark .forgot-div .q-field__native,
.dark .reset-div .q-field__native,
.dark .player-list .q-field__native,
.dark .phone-div .q-field__native,
.dark .otp-div .q-field__native,
.dark .address-drawer .q-field__native,
.dark .profile-drawer .q-field__native {
    color: #e5e5e5 !important
}

.dark .achievement-home .q-field__marginal,
.dark .contact-footer .q-field__native,
.dark .search-faq .q-field__native,
.dark .login-div .q-field__marginal,
.dark .register-div .q-field__marginal,
.dark .forgot-div .q-field__marginal,
.dark .reset-div .q-field__marginal,
.dark .player-list .q-field__marginal,
.dark .phone-div .q-field__marginal,
.dark .otp-div .q-field__marginal,
.dark .address-drawer .q-field__marginal,
.dark .profile-drawer .q-field__marginal {
    color: #e5e5e5 !important
}

.dark .q-field--outlined .q-field__control:hover:before {
    border-color: #000
}

.otp-container .q-field--dense .q-field__control {
    height: 70px !important
}

.navigation-container .q-img__content>div {
    padding: 0 16px !important;
    background-color: unset
}

.navigation-container .q-item__label {
    color: #6C757D !important;
    font-weight: 700
}

.dark .q-item__label {
    color: #e5e5e5 !important;
    font-weight: 700
}

.navigation-container .q-item__section--side>.q-icon {
    color: #6C757D !important
}

.videos-container .q-video {
    border-radius: 0.5rem !important
}

.banner-container .banner-height {
    height: 188px
}

.banner-container .navigation-wrapper {
    width: 100% !important;
    flex-wrap: nowrap !important
}

.banner-container .flat-button.active {
    background-color: blue
}

.q-carousel__slide {
    padding: 0 !important
}

.faq-list .q-item {
    padding: 0 10px
}

.faq-list .q-item__section--side {
    margin: 0 -15px 0 0px !important
}

.banner-container .navigation-btns {
    width: 100% !important
}

.banner-container .flat-button {
    width: 100%;
    height: 4px
}

.faq-search .q-field__marginal {
    color: rgb(96 97 98) !important
}

.contact-footer [type='text']:focus,
.contact-footer [type='email']:focus,
.contact-footer textarea:focus,
.rating-products textarea:focus,
.faq-search .search-faq [type='text']:focus,
.search-container .search [type='text']:focus,
.description-container .quantity-input [type='number']:focus,
.cart-drawer .quantity-input [type='number']:focus,
.description-container .quantity-input [type='number']:active,
.cart-drawer .quantity-input [type='number']:active,
.buy-ticket-container .quantity-input [type='number']:focus,
.buy-ticket-container .quantity-input [type='number']:active,
.profile-drawer .order-id-input [type='number']:focus,
.profile-drawer .order-id-input [type='number']:active,
.address-drawer input[type='text']:focus,
.login-div input[type='text']:focus,
.reset-div input[type='password']:focus,
.profile-drawer input[type='text']:focus,
.profile-drawer input[type='password']:focus {
    outline-offset: 0px !important;
    box-shadow: unset !important;
    border-color: unset !important;
    --tw-ring-shadow: unset !important
}

.fillup-drawer [type='text']:focus,
.fillup-drawer [type='number']:focus {
    outline-offset: 0px !important;
    box-shadow: unset !important;
    border-color: unset !important;
    --tw-ring-shadow: unset !important;
    --tw-ring-color: #E2B862 !important;
    border-color: #E2B862 !important
}

.login-div input[type='text'],
.login-div input[type='password'],
.login-div input[type='email'],
.register-div input[type='text'],
.register-div input[type='email'],
.register-div input[type='password'],
.register-div input[type='number'] {
    font-size: 1rem
}

.forgot-email-div input[type='email'] {
    font-size: 1rem
}

.profile-drawer textarea:focus {
    outline-offset: 0px !important;
    box-shadow: unset !important;
    border-color: unset !important;
    --tw-ring-shadow: unset !important
}

.rating-products textarea:focus {
    outline-offset: 0px !important;
    box-shadow: unset !important;
    border-color: unset !important;
    --tw-ring-shadow: unset !important;
    --tw-ring-color: unset !important;
    --tw-ring-offset-shadow: unset !important
}

.rating-products .q-field__native,
.q-field__prefix,
.q-field__suffix,
.q-field__input {
    padding: 5px 8px !important
}

.dark .rating-products textarea {
    color: #FFFFFF !important
}

.dark .rating-products .q-uploader__title {
    background: #212529 !important
}

.dark .rating-products .q-uploader__header {
    background: #212529 !important
}

.rating-products .q-uploader__header {
    background: #fff !important
}

.profile-drawer input[type='tel']:focus {
    outline-offset: 0px !important;
    box-shadow: unset !important;
    border-color: unset !important;
    --tw-ring-shadow: unset !important
}

.product-height {
    height: 7rem !important
}

.profile-drawer input[type='email']:focus {
    outline-offset: 0px !important;
    box-shadow: unset !important;
    border-color: unset !important;
    --tw-ring-shadow: unset !important
}

.login-div input:-webkit-autofill,
.login-div input:-webkit-autofill:hover,
.login-div input:-webkit-autofill:focus,
.login-div input:-webkit-autofill:active,
.register-div input:-webkit-autofill,
.register-div input:-webkit-autofill:hover,
.register-div input:-webkit-autofill:focus,
.register-div input:-webkit-autofill:active,
.forgot-div input:-webkit-autofill,
.forgot-div input:-webkit-autofill:hover,
.forgot-div input:-webkit-autofill:focus,
.forgot-div input:-webkit-autofill:active,
.reset-div input:-webkit-autofill,
.reset-div input:-webkit-autofill:hover,
.reset-div input:-webkit-autofill:focus,
.reset-div input:-webkit-autofill:active,
.player-list input:-webkit-autofill,
.player-list input:-webkit-autofill:hover,
.player-list input:-webkit-autofill:focus,
.player-list input:-webkit-autofill:active,
.phone-div input:-webkit-autofill,
.phone-div input:-webkit-autofill:hover,
.phone-div input:-webkit-autofill:focus,
.phone-div input:-webkit-autofill:active,
.otp-div input:-webkit-autofill,
.otp-div input:-webkit-autofill:hover,
.otp-div input:-webkit-autofill:focus,
.otp-div input:-webkit-autofill:active,
.profile-drawer input:-webkit-autofill,
.profile-drawer input:-webkit-autofill:hover,
.profile-drawer input:-webkit-autofill:focus,
.profile-drawer input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #4B4B4B !important
}

.dark .login-div input:-webkit-autofill,
.dark .login-div input:-webkit-autofill:hover,
.dark .login-div input:-webkit-autofill:focus,
.dark .login-div input:-webkit-autofill:active,
.dark .register-div input:-webkit-autofill,
.dark .register-div input:-webkit-autofill:hover,
.dark .register-div input:-webkit-autofill:focus,
.dark .register-div input:-webkit-autofill:active,
.dark .forgot-div input:-webkit-autofill,
.dark .forgot-div input:-webkit-autofill:hover,
.dark .forgot-div input:-webkit-autofill:focus,
.dark .forgot-div input:-webkit-autofill:active,
.dark .reset-div input:-webkit-autofill,
.dark .reset-div input:-webkit-autofill:hover,
.dark .reset-div input:-webkit-autofill:focus,
.dark .reset-div input:-webkit-autofill:active,
.dark .player-list input:-webkit-autofill,
.dark .player-list input:-webkit-autofill:hover,
.dark .player-list input:-webkit-autofill:focus,
.dark .player-list input:-webkit-autofill:active,
.dark .phone-div input:-webkit-autofill,
.dark .phone-div input:-webkit-autofill:hover,
.dark .phone-div input:-webkit-autofill:focus,
.dark .phone-div input:-webkit-autofill:active,
.dark .otp-div input:-webkit-autofill,
.dark .otp-div input:-webkit-autofill:hover,
.dark .otp-div input:-webkit-autofill:focus,
.dark .otp-div input:-webkit-autofill:active,
.dark .profile-drawer input:-webkit-autofill,
.dark .profile-drawer input:-webkit-autofill:hover,
.dark .profile-drawer input:-webkit-autofill:focus,
.dark .profile-drawer input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #212529 inset !important;
    -webkit-text-fill-color: #757575 !important
}

.search-container .search .q-field__control,
.search-container .search .q-field__marginal {
    height: 50px !important
}

.search-container .search [type='text'] {
    font-size: 1rem
}

.product-container .product-item,
.recommendation-container .recommended-item {
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%)
}

.banner-home-container .carousel__prev,
.banner-home-container .carousel__next {
    background: rgba(255, 252, 252, 0) !important;
    color: #929292 !important
}

.banner-home-container .carousel__prev {
    left: 15px;
    width: 2.5rem
}

.banner-home-container .carousel__next {
    right: 15px;
    width: 2.5rem
}

.banner-home-container .carousel__icon {
    width: 6rem;
    height: 4rem
}

.text-truncate-container {
    width: 140px
}

.text-truncate-container-rate {
    width: 225px
}

.text-truncate-container-reco {
    width: 140px
}

.text-truncate-container p {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.text-truncate-container-reco p {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.image-container .sample-images,
.recommendation-container .recommended-images {
    flex-wrap: nowrap !important;
    overflow-x: scroll !important
}

.image-container .sample-images::-webkit-scrollbar,
.recommendation-container .recommended-images::-webkit-scrollbar {
    width: 0;
    height: 0
}

.description-container .buttons .plus-btn,
.description-container .buttons .minus-btn,
.bottom-sheets .buttons .plus-btn,
.bottom-sheets .buttons .minus-btn {
    border-radius: 10px !important;
    width: 35px !important;
    height: 31px !important;
    box-shadow: none !important;
    background-color: #D9D9D9 !important
}

.dark .description-container .buttons .plus-btn,
.dark .description-container .buttons .minus-btn,
.dark .bottom-sheets .buttons .plus-btn,
.dark .bottom-sheets .buttons .minus-btn {
    border-radius: 10px !important;
    width: 35px !important;
    height: 31px !important;
    box-shadow: none !important;
    background-color: #343a40 !important
}

.cart-drawer .buttons .plus-btn,
.cart-drawer .buttons .minus-btn {
    border-radius: 10px !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: none !important;
    background-color: #D9D9D9;
    font-size: 11px !important;
    padding: 0 !important
}

.dark .cart-drawer .buttons .plus-btn,
.dark .cart-drawer .buttons .minus-btn {
    border-radius: 10px !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: none !important;
    background-color: #B7914D !important;
    font-size: 11px !important;
    padding: 0 !important
}

.description-container .quantity,
.cart-drawer .quantity,
.profile-drawer .quantity {
    flex-wrap: nowrap !important
}

.description-container .buttons .quantity-input {
    width: 50px !important;
    text-align: center !important
}

.cart-drawer .buttons .quantity-input {
    text-align: center !important;
    border: 1px solid #929292 !important;
    border-radius: 10px !important
}

.cart-drawer .buttons .q-field--outlined.q-field--highlighted .q-field__control:after {
    border: 1px solid #929292 !important;
    border-radius: 10px !important
}

.cart-drawer .buttons .quantity-input .q-field__control::before {
    border: none;
    outline: none
}

.description-container .buttons .quantity-input .q-field__control {
    height: 36px !important
}

.cart-drawer .buttons .quantity-input .q-field__control {
    height: 30px !important
}

.description-container .buttons .quantity-input .q-field__control input,
.bottom-sheets .q-field__control input,
.cart-drawer .buttons .quantity-input .q-field__control input {
    padding: 0 !important;
    text-align: center;
    color: unset
}

.bottom-sheets .q-field__control {
    height: 35px !important
}

.add-cart .add-cart-btn {
    border-radius: 50px;
    width: 100%;
    height: 40px;
    box-shadow: none;
    background: #929292;
    text-transform: unset
}

.cart-drawer .q-btn:before,
.description-container .q-btn:before,
.ticket-wrapper .q-btn:before {
    box-shadow: none
}

.ticket-wrapper .ticket-btn {
    border-radius: 50px;
    height: 40px;
    box-shadow: none;
    background: #595959;
    text-transform: unset
}

.shadow-faq {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1) !important
}

.dark .shadow-faq {
    background: #212529 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgb(255 254 245 / 10%) !important
}

.dark .shadow-faq .q-card {
    background: #212529;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.cookie-settings .q-checkbox__inner--truthy,
.q-checkbox__inner--indet {
    color: #6c757d !important
}

.cookie-settings .q-item__section--avatar {
    min-width: 40px !important
}

.cookie-settings .q-item__section--side {
    padding-right: 0 !important;
    margin-bottom: 12px !important
}

.faq-card .q-item__section--side>.q-icon {
    font-size: 35px !important;
    color: #6C757D !important
}

.faq-list .q-item__section--main {
    margin-top: 15px
}

.ticket-wrapper .ticket-btn.green {
    background: #198754
}

.buy-ticket-btn {
    color: #198754 !important
}

.cookie-ticket-btn {
    color: #B7914D !important
}

.ok-ticket-btn {
    background: #198754 !important
}

.show-ticket-btn {
    background: #B7914D !important
}

.isi-data-btn {
    color: #B7914D !important
}

.lihat-data-btn {
    color: #6C757D !important
}

.dark .lihat-data-btn {
    color: #e5e5e5 !important
}

.ticket-wrapper .store-btn {
    border-radius: 50px;
    height: 40px;
    box-shadow: none;
    background: #6C757D;
    text-transform: unset
}

.ticket-quan-btn {
    border-radius: 10px !important;
    padding: 0 5px !important;
    height: 30px !important
}

.ticket-banner-container .q-img__content>div {
    padding: 30px !important;
    background: rgb(0 0 0 / 0%) !important
}

.ticket-banner-container p {
    line-height: 1rem !important
}

.ticket-events-container .q-img__content>div {
    background: rgb(0 0 0 / 0%) !important
}

.buy-ticket-container .q-img__content>div {
    background: rgb(0 0 0 / 0%) !important
}

.videos-container .q-img__content>div {
    background: rgb(0 0 0 / 0%) !important
}

.buy-ticket-container .q-field--standard .q-field__control:before {
    height: 36px !important;
    border: 1px solid !important;
    border-radius: 15px !important
}

.buy-ticket-container .q-field__control {
    height: 37px !important;
    border-radius: 12px !important
}

.buy-ticket-container .q-field--outlined .q-field__control {
    padding: 0 10px !important
}

.buy-ticket-container .buttons .q-field__native,
.q-field__prefix,
.q-field__suffix,
.q-field__input {
    text-align: center
}

.fillup-drawer .navigation-container .q-item__section--side>.q-icon {
    opacity: 0 !important;
    display: none
}

.fillup-drawer .q-item__section--side>.q-icon {
    font-size: 0px !important
}

.q-item__section--main~.q-item__section--side {
    padding-left: 0 !important
}

.rating-home .q-video iframe,
.q-video object,
.q-video embed {
    height: 5rem
}

.rating-home-dialog .q-video iframe,
.q-video object,
.q-video embed {
    height: 25rem;
    width: 25rem
}

.footer-du-icon {
    background: linear-gradient(to top, #212529 0%, #212529 50%, white 50%, white 100%);
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 1000;
}

.dark .footer-du-icon {
    background: linear-gradient(to top, #191919 0, #191919 50%, #212529 40%, #212529 100%) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 1000;
}

.footer-du-icon .q-img__image {
    width: 125px !important;
    height: 75px !important;
    position: absolute;
    margin: 2% 34% !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 9999 !important
}

.footer-du-icon div {
    padding-bottom: 45px !important
}

.footer-bg.q-layout__section--marginal {
    background-color: #ffffff !important
}

.footer-du-btm.q-toolbar {
    margin-top: -1px
}

.cart-drawer aside.q-drawer,
.profile-drawer aside.q-drawer,
.fillup-drawer aside.q-drawer {
    width: 100% !important;
    transform: translateY(0) !important;
    transition: 300ms cubic-bezier(.39, .575, .565, 1) !important
}

.cart-drawer aside.q-drawer .q-drawer__content,
.profile aside.q-drawer .q-drawer__content,
.fillup-drawer aside.q-drawer {
    overflow-y: hidden;
    overflow-y: hidden
}

.cart-drawer aside.q-layout--prevent-focus.q-drawer--left,
.profile-drawer aside.q-layout--prevent-focus.q-drawer--left,
.fillup-drawer aside.q-layout--prevent-focus.q-drawer--left {
    transform: translateY(100%) !important
}

.cart-drawer .checkout-btn,
.address-drawer .add-address-btn {
    border-radius: 50px;
    height: 40px;
    box-shadow: none;
    background: #C6C6C6;
    text-transform: unset;
    padding: 0 25px !important
}

.address-drawer .add-address-btn {
    width: 100% !important
}

.cart-drawer .checkout-btn:hover,
.address-drawer .add-address-btn:hover {
    background: #929292
}

.checkout-drawer .address-btn {
    border: 2px solid #929292;
    border-radius: 20px;
    height: 40px;
    box-shadow: none;
    background: transparent;
    text-transform: unset;
    padding: 0 25px !important
}

.q-item__label+.q-item__label.checkout-select-item {
    margin-top: 0px !important
}

.cart-drawer .items-checkout {
    height: calc(100% - 145px);
    overflow-y: scroll
}

.fillup-drawer .items-checkout {
    height: calc(100% - 165px);
    overflow-y: scroll
}

.address-drawer .items-checkout-add {
    height: calc(100% - 145px);
    overflow-y: scroll
}

.address-drawer .items-checkout-edit {
    height: calc(100% - 190px);
    overflow-y: scroll
}

.profile-drawer .profile-body {
    height: calc(100% - 173px);
    overflow-y: scroll
}

.profile-drawer .custom-height {
    height: 100px
}

.profile-drawer .profile-body-item {
    height: calc(100% - 73px);
    overflow-y: scroll
}

.q-menu.q-position-engine {
    border-radius: 10px !important
}

.items-checkout .q-checkbox__bg {
    border-radius: 6px !important;
    width: 22px !important;
    height: 22px !important
}

.items-checkout .q-checkbox__inner--truthy,
.items-checkout .q-checkbox__inner--indet {
    color: #929292
}

.profile-drawer input::placeholder {
    font-size: 13px !important;
    color: #6C757D !important
}

.login-email.q-field__native,
.login-password.q-field__native {
    box-shadow: unset !important;
    border-color: unset !important
}

.register-name.q-field__native,
.register-email.q-field__native,
.register-telephone.q-field__native,
.register-password.q-field__native,
.register-repassword.q-field__native {
    box-shadow: unset !important;
    border-color: unset !important
}

.forget-password.q-field__native,
.forget-password2.q-field__native,
.forget-email.q-field__native {
    box-shadow: unset !important;
    border-color: unset !important
}

.phone-number.q-field__native {
    box-shadow: unset !important;
    border-color: unset !important
}

header.q-header {
    z-index: 2500 !important
}

.shipment .shipment-select {
    width: 170px !important
}

.login-div .q-field--error.q-field--outlined.q-field--highlighted .q-field__control:after,
.register-div .q-field--error.q-field--outlined.q-field--highlighted .q-field__control:after,
.forgot-div .q-field--error.q-field--outlined.q-field--highlighted .q-field__control:after,
.phone-div .q-field--error.q-field--outlined.q-field--highlighted .q-field__control:after,
.otp-div .q-field--error.q-field--outlined.q-field--highlighted .q-field__control:after,
.profile-drawer .q-field--error.q-field--outlined.q-field--highlighted .q-field__control:after {
    border-color: #c10015 !important
}

.contact-footer .q-field--outlined.q-field--highlighted .q-field__control:after,
.login-div .q-field--outlined.q-field--highlighted .q-field__control:after,
.register-div .q-field--outlined.q-field--highlighted .q-field__control:after,
.forgot-div .q-field--outlined.q-field--highlighted .q-field__control:after,
.phone-div .q-field--outlined.q-field--highlighted .q-field__control:after,
.otp-div .q-field--outlined.q-field--highlighted .q-field__control:after,
.profile-drawer .q-field--outlined.q-field--highlighted .q-field__control:after,
.event-container .q-field--outlined.q-field--highlighted .q-field__control:after {
    border-color: #E2B862 !important
}

.dark .contact-footer .q-field--outlined .q-field__control:before,
.dark .faq-search .q-field--outlined .q-field__control:before,
.dark .login-div .q-field--outlined .q-field__control:before,
.dark .register-div .q-field--outlined .q-field__control:before,
.dark .forgot-div .q-field--outlined .q-field__control:before,
.dark .reset-div .q-field--outlined .q-field__control:before,
.dark .player-list .q-field--outlined .q-field__control:before,
.dark .phone-div .q-field--outlined .q-field__control:before,
.dark .otp-div .q-field--outlined .q-field__control:before,
.dark .address-drawer .q-field--outlined .q-field__control:before,
.dark .profile-drawer .q-field--outlined .q-field__control:before {
    border-color: #757575
}

.login-div .q-field__messages {
    text-align: right
}

.active-input .q-field__inner .q-field__control:before {
    border-color: #E2B862 !important
}

.active-input .q-field__control:before {
    border-color: #E2B862 !important
}

.header-z-top {
    z-index: 3000 !important
}

.gudang-img .q-img__container img {
    object-fit: none !important
}

.card-section-latest {
    background: #FFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1) !important
}

.my-card {
    border-radius: 10px !important
}

.banner-home-container .carousel__pagination {
    position: absolute;
    top: 445px;
    transform: translate(0%);
    left: 3%
}

.banner-division-container .carousel__pagination {
    position: absolute;
    top: 435px;
    transform: translate(0%);
    left: 3%
}

.banner-home-container .carousel__pagination li,
.banner-division-container .carousel__pagination li {
    flex: 1 0 10% !important
}

.banner-home-container .carousel__pagination-button,
.banner-division-container .carousel__pagination-button {
    background: rgb(52 58 64 / 61%);
    width: 60px
}

.news-division-home-container .carousel__pagination {
    justify-content: left !important
}

.news-home-container .carousel {
    height: 18rem
}

.news-home-container .carousel__slide,
.matches-home-container .carousel__slide,
.video-home-container .carousel__slide,
.merchandise-home-container .carousel__slide,
.partners-home-container .carousel__slide,
.news-division-home-container .carousel__slide {
    margin: 5px 5px !important
}

.merchandise-home-container .carousel__next {
    transform: translate(-30%, -50%) !important
}

.merchandise-home-container .carousel__prev {
    transform: translate(5%, -50%)
}

.merchandise-home-container .carousel__prev,
.carousel__next {
    background: rgb(249 211 104) !important;
    color: #000 !important;
    font-size: 30px !important
}

.matches-home-container .carousel__pagination-button--active,
.news-home-container .carousel__pagination-button--active,
.video-home-container .carousel__pagination-button--active,
.news-division-home-container .carousel__pagination-button--active,
.merchandise-home-container .carousel__pagination-button--active,
.partners-home-container .carousel__pagination-button--active {
    background: #D9D9D9 !important;
    width: 60px !important
}

.matches-home-container .carousel__pagination {
    margin: 5px 8px 10px 0 !important;
    display: flex !important;
    flex: 30px !important;
    justify-content: space-evenly !important
}

.news-home-container .carousel__pagination,
.news-division-home-container .carousel__pagination,
.video-home-container .carousel__pagination {
    margin: 5px 0 10px -40px !important;
    display: flex !important;
    flex: 30px !important;
    justify-content: space-evenly !important
}

.merchandise-home-container .carousel__pagination {
    margin: 5px 0 10px -28px !important;
    display: flex !important;
    flex: 30px !important;
    justify-content: space-evenly !important
}

.news-home-container .carousel__pagination-button,
.matches-home-container .carousel__pagination-button,
.video-home-container .carousel__pagination-button,
.news-division-home-container .carousel__pagination-button,
.merchandise-home-container .carousel__pagination-button,
.news-division-home-container .carousel__pagination-button {
    background-color: #fff;
    width: 0
}

.division-home-container .carousel__slide {
    padding: 0 8px
}

.registration-banner {
    box-shadow: none !important;
    border-radius: 10px !important
}

.daftar-btn {
    border-radius: 20px !important;
    height: 40px !important;
    width: 100% !important;
    box-shadow: none !important;
    background: #B7914D !important;
    text-transform: unset !important;
    padding: 0 25px !important
}

.daftar-btn::before {
    box-shadow: none !important
}

.division-detail-container .carousel__slide {
    padding: 4px
}

.division-detail-container .q-card__section--vert {
    padding: 12px
}

.division-detail-container .carousel__pagination-button--active {
    background: #D9D9D9 !important;
    width: 100%
}

.division-detail-container .carousel__pagination-button {
    background-color: transparent;
    width: 100%;
    padding: 0;
    margin: 0
}

.division-detail-container .carousel__pagination li {
    flex: 1 1 0%
}

.division-detail-container .carousel__pagination {
    margin-top: -5px
}

.address-drawer input {
    --tw-ring-shadow: 0 0 #000 !important
}

.address-drawer .active .q-field__control:before {
    border-color: #E2B862 !important
}

.q-field--outlined .q-field__control {
    padding: 0 17px !important
}

.cart-drawer .quantity-input .q-field--outlined .q-field__control {
    padding: 0 0px !important
}

.extra-tight {
    line-height: .9
}

.image-container-shop .q-carousel .q-carousel__thumbnail {
    border: 1px solid #DBDBDB;
    border-radius: 8px;
    margin: 8px;
    width: 72spx;
    padding: 5px;
    height: 60px;
    opacity: 1
}

.image-container-shop .q-carousel__navigation--top,
.q-carousel__navigation--bottom {
    left: 0px !important;
    right: 0px !important
}

.image-container-shop .q-carousel__navigation-inner {
    justify-content: left !important
}

.image-container-shop .q-carousel .q-carousel__thumbnail--active {
    border-color: #b7914d !important
}

.image-container-shop .q-carousel__slide,
.q-carousel .q-carousel--padding {
    background-image: none !important
}

.dark .description-container .q-field__native,
.dark .search-container .q-field__native {
    color: #FFF
}

.dark .search-container .q-field--outlined .q-field__control:hover:before,
.dark .description-container .q-field--outlined .q-field__control:hover:before {
    border-color: #fff
}

.dark .search-container .q-icon,
.dark .description-container .q-icom {
    color: #D9D9D9
}

.dark .description-container .q-field--outlined .q-field__control:before,
.dark .search-container .q-field--outlined .q-field__control:before {
    border: 1px solid rgb(255 255 255 / 24%)
}

.Vue-Toastification__toast-body {
    line-height: 25px !important;
    font-size: 16px !important
}

.Vue-Toastification__icon {
    width: 17px !important
}

.Vue-Toastification__toast {
    min-height: 55px !important;
    padding: 15px 24px !important
}

.description-hide {
    height: 5rem;
    background: -webkit-linear-gradient(bottom, #eee, #333) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important
}

.description-hide span,
.description-hide li {
    color: rgb(0, 0, 0, 0) !important;
    background: rgb(0, 0, 0, 0) !important;
    font-size: 0.75rem !important
}

.dark .description-hide {
    height: 5rem;
    background: -webkit-linear-gradient(top, #eee, #333) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important
}

.description-1 span {
    background: -webkit-linear-gradient(top, #6C757D, #6C757D) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 0.75rem !important
}

.dark .ticket-container .q-field--outlined .q-field__control:before {
    border-color: #606970
}

.dark .ticket-container .q-field__native span {
    color: #6C757D
}

.custom-badge-padding {
    padding: 5px 10px !important
}

.break-anywhere {
    overflow-wrap: anywhere
}

.mpl_data {
    margin-right: 150px
}

.mpl_data2 {
    margin-left: 150px
}

.Vue-Toastification__container {
    width: 100% !important
}

.Vue-Toastification__toast {
    margin-bottom: 0 !important;
    min-width: 100% !important
}

.Vue-Toastification__container.bottom-left,
.Vue-Toastification__container.bottom-right,
.Vue-Toastification__container.bottom-center {
    bottom: 0 !important;
    left: 0 !important;
    margin-left: 0 !important
}

.Vue-Toastification__toast-component-body {
    width: 100% !important
}

.side-img {
    height: 65px
}

.embed-container {
    overflow: hidden;
    position: relative;
    width: 100%
}

.embed-container ::after {
    padding-top: 56.25%;
    display: block;
    content: ''
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    border: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important
}

.topnav-list-container {
    height: calc(100% - 75px)
}

.q-toggle-responsive .q-toggle__inner,
.q-radio-responsive .q-radio__inner {
    font-size: 40px
}

.topnav-list-container .q-item {
    padding: 16px 16px
}

.event-filter {
    width: 130px
}

.event-filter .q-field__native {
    place-content: center
}

.event-img-responsive {
    max-width: 40px;
    height: 40px
}

.left-stepper-responsive {
    margin-right: 150px
}

.right-stepper-responsive {
    margin-left: 150px
}

.event-container .q-stepper__dot {
    height: 100%
}

.q-btn--rounded {
    border-radius: 50px !important
}

.address-drawer input,
.profile-drawer input,
.profile-drawer textarea,
.profile-drawer input::placeholder {
    font-size: 0.60rem !important
}

.badge-responsive.font-bold {
    font-weight: 700 !important
}

.icon-payment {
    width: 50% !important
}

.icon-payment2 {
    width: 35% !important
}

.custom-list ol {
    list-style: decimal !important;
    padding-left: 1rem !important
}

.card-custom-radius {
    border-radius: 0.5rem !important
}

.custom-placeholder-style input::placeholder {
    color: #6C757D !important
}

.profile-drawer .order-id-input input,
.profile-drawer .order-id-input input::placeholder {
    font-size: 1rem !important;
    opacity: 1 !important
}

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

    .banner-home-container .carousel__pagination,
    .banner-division-container .carousel__pagination {
        top: 790px !important
    }

    .description-1 span {
        font-size: 1.25rem !important
    }

    .description-hide span,
    .description-hide li {
        font-size: 1.25rem !important
    }
}

@media only screen and (min-width:820px) {
    .banner-home-container .carousel__prev {
        left: 45px;
        width: 5rem
    }

    .banner-home-container .carousel__next {
        right: 45px;
        width: 5rem
    }

    .banner-home-container .carousel__pagination,
    .banner-division-container .carousel__pagination {
        top: 715px
    }

    .description-1 span {
        font-size: 1.25rem !important
    }

    .description-hide span,
    .description-hide li {
        font-size: 1.25rem !important
    }

    .icon-payment {
        width: 25% !important
    }

    .icon-payment2 {
        width: 25% !important
    }

    .banner-container .banner-height {
        height: 415px !important
    }
}

@media only screen and (min-width:600px) {
    .footer-du-icon .q-img__image {
        margin: 2% 44% !important
    }

    .banner-home-container .carousel__pagination,
    .banner-division-container .carousel__pagination {
        top: 690px
    }

    .description-1 span {
        font-size: 1.25rem !important
    }

    .description-hide span,
    .description-hide li {
        font-size: 1.25rem !important
    }
}

@media only screen and (max-width:280px) {
    .product-height {
        height: 9rem !important
    }

    .banner-home-container .carousel__pagination-button,
    .banner-division-container .carousel__pagination-button {
        width: 35px !important
    }

    .text-truncate-container {
        width: 100px
    }

    .text-truncate-container-reco {
        width: 68px
    }
}

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

    .matches-home-container .carousel__slide,
    .news-home-container .carousel__slide,
    .video-home-container .carousel__slide,
    .merchandise-home-container .carousel__slide,
    .partners-home-container .carousel__slide,
    .news-division-home-container .carousel__slide {
        margin: 5px 4px !important
    }

    .banner-home-container .carousel__pagination-button,
    .banner-division-container .carousel__pagination-button {
        width: 45px
    }

    .text-truncate-container {
        width: 125px
    }

    .text-truncate-container-reco {
        width: 100px
    }
}

@media screen and (min-width:414px) {
    .banner-container .banner-height {
        height: 188px
    }
}

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

    .matches-home-container .carousel__slide,
    .news-home-container .carousel__slide,
    .video-home-container .carousel__slide,
    .merchandise-home-container .carousel__slide,
    .partners-home-container .carousel__slide,
    .news-division-home-container .carousel__slide {
        margin: 5px 4px !important
    }
}

@media screen and (max-width:375px) {
    .text-truncate-container-rate {
        width: 180px
    }
}

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

    .matches-home-container .carousel__slide,
    .news-home-container .carousel__slide,
    .video-home-container .carousel__slide,
    .merchandise-home-container .carousel__slide,
    .partners-home-container .carousel__slide,
    .news-division-home-container .carousel__slide {
        margin: 5px 5px !important
    }

    .banner-container .banner-height {
        height: 180px
    }

    .buy-ticket-container .q-field__native,
    .q-field__prefix,
    .q-field__suffix,
    .q-field__input {
        padding: 0px !important
    }
}

@media screen and (min-width:420px) {
    .text-truncate-container-reco {
        width: 100px
    }

    .left-stepper-responsive {
        margin-right: 180px
    }

    .right-stepper-responsive {
        margin-left: 180px
    }

    .cart-drawer .items-checkout .q-checkbox__bg {
        width: 25px !important;
        height: 25px !important
    }

    .cart-drawer .q-checkbox__inner {
        width: .5em;
        height: .5em
    }

    .cart-drawer .buttons .plus-btn,
    .cart-drawer .buttons .minus-btn {
        width: 35px !important;
        height: 35px !important
    }

    .responsive-icon {
        width: 35px !important
    }

    .cart-drawer .buttons .quantity-input .q-field__control {
        height: 33px !important
    }

    .cart-drawer .buttons .quantity-input input {
        font-size: 15px
    }

    .shipment .shipment-select {
        width: 200px !important
    }

    .address-drawer input,
    .profile-drawer input,
    .profile-drawer textarea,
    .profile-drawer input::placeholder {
        font-size: .75rem !important
    }
}

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

    .matches-home-container .carousel__slide,
    .news-home-container .carousel__slide,
    .video-home-container .carousel__slide,
    .merchandise-home-container .carousel__slide,
    .partners-home-container .carousel__slide,
    .news-division-home-container .carousel__slide {
        margin: 5px 0px !important
    }

    .event-tab-container .q-tab__icon,
    .news-tab-container .q-tab__icon,
    .videos-tab-container .q-tab__icon {
        width: 45px;
        height: 50px;
        font-size: 2rem !important
    }

    .news-container .q-btn,
    .videos-container .q-btn,
    .order-see-all .q-btn {
        font-size: 1.25rem !important
    }

    .ticket-wrapper .ticket-btn {
        height: 50px;
        width: 125px;
        padding: 0 5px
    }

    .ticket-wrapper .store-btn {
        height: 50px;
        width: 125px;
        padding: 0 5px
    }

    .topnav-list-container .q-item {
        padding: 18px 16px
    }

    .side-img {
        height: 75px
    }

    .topnav-list-container {
        height: calc(100% - 103px)
    }

    .q-toggle-responsive .q-toggle__inner,
    .q-radio-responsive .q-radio__inner {
        font-size: 51px
    }

    .navigation-container .q-item__section--side>.q-icon {
        font-size: 1.5rem !important
    }

    .mpl_data {
        margin-right: 200px
    }

    .mpl_data2 {
        margin-left: 200px
    }

    .calendar .q-calendar-month__head--weekdays,
    .calendar .q-calendar-month__head--workweek {
        font-size: 15px
    }

    .calendar .q-calendar__button {
        font-size: 17px
    }

    .calendar .q-calendar-month__week--days {
        margin: 14px 0
    }

    .event-container .event-calendar-dots {
        height: 12px;
        width: 12px;
        margin: 0 1.5px
    }

    .event-filter {
        width: 200px
    }

    .event-filter .q-field__native {
        padding: 13px 0
    }

    .event-filter .q-field__native span {
        font-size: 1.25rem !important;
        padding: 9px 0
    }

    .event-filter .q-field__marginal {
        font-size: 2rem !important
    }

    .event-img-responsive {
        max-width: 50px;
        height: 50px
    }

    .left-stepper-responsive {
        margin-right: 210px
    }

    .right-stepper-responsive {
        margin-left: 210px
    }

    .event-container svg {
        height: 180px
    }

    .custom-badge-padding {
        padding: 10px 17px !important
    }

    .q-badge.badge-responsive {
        padding: 6px 7px
    }

    .cart-drawer .items-checkout .q-checkbox__bg {
        width: 25px !important;
        height: 25px !important
    }

    .cart-drawer .q-checkbox__inner {
        width: 1em;
        height: 1em
    }

    .cart-drawer .buttons .plus-btn,
    .cart-drawer .buttons .minus-btn {
        width: 45px !important;
        height: 45px !important
    }

    .responsive-icon {
        width: 45px !important
    }

    .cart-drawer .buttons .quantity-input .q-field__control {
        height: 43px !important
    }

    .cart-drawer .buttons .quantity-input input {
        font-size: 25px
    }

    .cart-drawer .checkout-btn,
    .address-drawer .add-address-btn {
        height: 60px;
        padding: 0 55px !important
    }

    .cart-drawer .items-checkout {
        height: calc(100% - 167px)
    }

    .fillup-drawer .items-checkout {
        height: calc(100% - 167px)
    }

    .shipment .shipment-select {
        width: 260px !important
    }

    .checkout-drawer .q-field--dense .q-field__marginal,
    .profile-drawer .q-field--dense .q-field__marginal {
        height: 56px;
        font-size: 30px
    }

    .checkout-drawer .q-field--auto-height.q-field--dense .q-field__native,
    .address-drawer .q-field--dense .q-field__control,
    .profile-drawer .q-field--dense .q-field__control {
        min-height: 56px
    }

    .address-drawer .q-field__control-container,
    .address-drawer .q-field--outlined .q-field__control:after,
    .profile-drawer .q-field__control-container,
    .profile-drawer .q-field--outlined .q-field__control:after {
        min-height: 56px
    }

    .address-drawer .items-checkout-edit {
        height: calc(100% - 195px)
    }

    .address-drawer .items-checkout-add {
        height: calc(100% - 167px)
    }

    .profile-drawer .profile-body {
        height: calc(100% - 175px)
    }

    .address-drawer input,
    .profile-drawer input,
    .profile-drawer textarea,
    .profile-drawer input::placeholder {
        font-size: 1rem !important
    }

    .profile-drawer .order-id-input input,
    .profile-drawer .order-id-input input::placeholder {
        font-size: 1.25rem !important
    }
}

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

    .matches-home-container .carousel__slide,
    .news-home-container .carousel__slide,
    .video-home-container .carousel__slide,
    .merchandise-home-container .carousel__slide,
    .news-division-home-container .carousel__slide {
        margin: 5px 8px !important
    }

    .partners-home-container .carousel__slide {
        margin: 5px 10px !important
    }
}

@media screen and (min-width:768px) {
    .product-height {
        height: 10rem !important
    }

    .matches-home-container .carousel__slide,
    .news-home-container .carousel__slide,
    .video-home-container .carousel__slide,
    .merchandise-home-container .carousel__slide,
    .news-division-home-container .carousel__slide {
        margin: 5px 0px !important
    }

    .event-tab-container .q-tab__icon,
    .news-tab-container .q-tab__icon,
    .videos-tab-container .q-tab__icon {
        width: 45px;
        height: 50px;
        font-size: 2rem !important
    }

    .news-container .q-btn,
    .videos-container .q-btn,
    .order-see-all .q-btn {
        font-size: 1.5rem !important
    }

    .ticket-wrapper .ticket-btn {
        height: 60px;
        width: 150px;
        padding: 0 10px
    }

    .ticket-wrapper .store-btn {
        height: 60px;
        width: 150px;
        padding: 0 10px
    }

    .topnav-list-container .q-item {
        padding: 18px 16px
    }

    .side-img {
        height: 75px
    }

    .topnav-list-container {
        height: calc(100% - 103px)
    }

    .q-toggle-responsive .q-toggle__inner,
    .q-radio-responsive .q-radio__inner {
        font-size: 51px
    }

    .navigation-container .q-item__section--side>.q-icon {
        font-size: 1.5rem !important
    }

    .mpl_data {
        margin-right: 200px
    }

    .mpl_data2 {
        margin-left: 200px
    }

    .calendar .q-calendar-month__head--weekdays,
    .calendar .q-calendar-month__head--workweek {
        font-size: 20px
    }

    .calendar .q-calendar__button {
        font-size: 20px
    }

    .calendar .q-calendar-month__week--days {
        margin: 19px 0
    }

    .event-container .event-calendar-dots {
        height: 14px;
        width: 14px;
        margin: 0 2px
    }

    .event-filter {
        width: 260px
    }

    .event-filter .q-field__native {
        padding: 16px 0
    }

    .event-filter .q-field__native span {
        font-size: 1.50rem !important;
        padding: 9px 0
    }

    .event-filter .q-field__marginal {
        font-size: 2.25rem !important
    }

    .event-img-responsive {
        max-width: 75px;
        height: 75px
    }

    .left-stepper-responsive {
        margin-right: 255px
    }

    .right-stepper-responsive {
        margin-left: 255px
    }

    .event-container svg {
        height: 230px
    }

    .login-div input[type='text'],
    .login-div input[type='password'],
    .login-div input[type='email'],
    .register-div input[type='text'],
    .register-div input[type='email'],
    .register-div input[type='password'],
    .register-div input[type='number'] {
        font-size: 1.25rem
    }

    .search-container .search [type='text'] {
        font-size: 1.25rem
    }

    .banner-container .banner-height {
        height: 385px
    }

    .forgot-email-div input[type='email'] {
        font-size: 1.25rem
    }

    .custom-badge-padding {
        padding: 14px 21px !important
    }

    .q-badge.badge-responsive {
        padding: 9px 10px
    }

    .cart-drawer .items-checkout .q-checkbox__bg {
        width: 25px !important;
        height: 25px !important
    }

    .cart-drawer .q-checkbox__inner {
        width: 1em;
        height: 1em
    }

    .cart-drawer .buttons .plus-btn,
    .cart-drawer .buttons .minus-btn {
        width: 45px !important;
        height: 45px !important
    }

    .responsive-icon {
        width: 45px !important
    }

    .cart-drawer .buttons .quantity-input .q-field__control {
        height: 43px !important
    }

    .cart-drawer .buttons .quantity-input input {
        font-size: 25px
    }

    .cart-drawer .checkout-btn,
    .address-drawer .add-address-btn {
        height: 70px;
        padding: 0 60px !important
    }

    .cart-drawer .items-checkout {
        height: calc(100% - 212px)
    }

    .fillup-drawer .items-checkout {
        height: calc(100% - 212px)
    }

    .shipment .shipment-select {
        width: 280px !important
    }

    .checkout-drawer .q-field--dense .q-field__marginal,
    .profile-drawer .q-field--dense .q-field__marginal {
        height: 66px;
        font-size: 35px
    }

    .checkout-drawer .q-field--auto-height.q-field--dense .q-field__native,
    .address-drawer .q-field--dense .q-field__control,
    .profile-drawer .q-field--dense .q-field__control {
        min-height: 66px
    }

    .address-drawer .q-field__control-container,
    .address-drawer .q-field--outlined .q-field__control:after,
    .profile-drawer .q-field__control-container,
    .profile-drawer .q-field--outlined .q-field__control:after {
        min-height: 66px
    }

    .address-drawer .items-checkout-edit {
        height: calc(100% - 254px)
    }

    .address-drawer input,
    .profile-drawer input,
    .profile-drawer textarea,
    .profile-drawer input::placeholder {
        font-size: 1.125rem !important
    }

    .profile-drawer .profile-body {
        height: calc(100% - 235px)
    }

    .address-drawer .items-checkout-add {
        height: calc(100% - 176px)
    }

    .profile-drawer .custom-height {
        height: 160px
    }

    .icon-payment {
        width: 25% !important
    }

    .icon-payment2 {
        width: 15% !important
    }

    .profile-drawer .order-id-input input,
    .profile-drawer .order-id-input input::placeholder {
        font-size: 1.5rem !important
    }

    .news-home-container .carousel__pagination {
        margin: 5px 0 10px -200px !important
    }

    .merchandise-home-container .carousel__pagination {
        margin: 5px 0 10px -145px !important
    }
}

@media screen and (min-width:1024px) {
    .text-truncate-container-reco {
        width: 225px
    }

    .product-height {
        height: 12rem !important
    }

    .event-tab-container .q-tab__icon,
    .news-tab-container .q-tab__icon,
    .videos-tab-container .q-tab__icon {
        width: 45px;
        height: 70px;
        font-size: 3rem !important
    }

    .news-container .q-btn,
    .videos-container .q-btn,
    .order-see-all .q-btn {
        font-size: 2.25rem !important
    }

    .ticket-wrapper .ticket-btn {
        height: 80px;
        width: 200px;
        padding: 0 15px
    }

    .ticket-wrapper .store-btn {
        height: 80px;
        width: 200px;
        padding: 0 15px
    }

    .topnav-list-container .q-item {
        padding: 18px 16px
    }

    .side-img {
        height: 94px
    }

    .topnav-list-container {
        height: calc(100% - 120px)
    }

    .q-toggle-responsive .q-toggle__inner,
    .q-radio-responsive .q-radio__inner {
        font-size: 71px
    }

    .navigation-container .q-item__section--side>.q-icon {
        font-size: 2.25rem !important
    }

    .calendar .q-calendar-month__head--weekdays,
    .calendar .q-calendar-month__head--workweek {
        font-size: 25px
    }

    .calendar .q-calendar__button {
        font-size: 25px
    }

    .calendar .q-calendar-month__week--days {
        margin: 22px 0
    }

    .event-container .event-calendar-dots {
        height: 16px;
        width: 16px;
        margin: 0 2px
    }

    .event-filter {
        width: 360px
    }

    .event-filter .q-field__native {
        padding: 20px 0
    }

    .event-filter .q-field__native span {
        font-size: 2.25rem !important;
        padding: 15px 0
    }

    .event-filter .q-field__marginal {
        font-size: 2.75rem !important
    }

    .event-img-responsive {
        max-width: 100px;
        height: 100px
    }

    .left-stepper-responsive {
        margin-right: 300px
    }

    .right-stepper-responsive {
        margin-left: 300px
    }

    .event-container svg {
        height: 300px
    }

    .custom-badge-padding {
        padding: 20px 24px !important
    }

    .q-badge.badge-responsive {
        padding: 14px 14px
    }

    .cart-drawer .items-checkout .q-checkbox__bg {
        width: 35px !important;
        height: 35px !important
    }

    .cart-drawer .q-checkbox__inner {
        width: 1.5em;
        height: 1.5em
    }

    .cart-drawer .buttons .plus-btn,
    .cart-drawer .buttons .minus-btn {
        width: 55px !important;
        height: 55px !important
    }

    .responsive-icon {
        width: 55px !important
    }

    .cart-drawer .buttons .quantity-input .q-field__control {
        height: 53px !important
    }

    .cart-drawer .buttons .quantity-input input {
        font-size: 35px
    }

    .cart-drawer .checkout-btn,
    .address-drawer .add-address-btn {
        height: 85px;
        padding: 0 65px !important
    }

    .cart-drawer .items-checkout {
        height: calc(100% - 285px)
    }

    .fillup-drawer .items-checkout {
        height: calc(100% - 285px)
    }

    .shipment .shipment-select {
        width: 380px !important
    }

    .checkout-drawer .q-field--dense .q-field__marginal,
    .profile-drawer .q-field--dense .q-field__marginal {
        height: 86px;
        font-size: 40px
    }

    .checkout-drawer .q-field--auto-height.q-field--dense .q-field__native,
    .address-drawer .q-field--dense .q-field__control,
    .profile-drawer .q-field--dense .q-field__control {
        min-height: 86px
    }

    .address-drawer .q-field__control-container,
    .address-drawer .q-field--outlined .q-field__control:after,
    .profile-drawer .q-field__control-container,
    .profile-drawer .q-field--outlined .q-field__control:after {
        min-height: 86px
    }

    .q-field__native {
        line-height: 28px !important
    }

    .address-drawer .items-checkout-edit {
        height: calc(100% - 325px)
    }

    .address-drawer .items-checkout-add {
        height: calc(100% - 232px)
    }

    .profile-drawer .profile-body {
        height: calc(100% - 315px)
    }

    .address-drawer input,
    .profile-drawer input,
    .profile-drawer textarea,
    .profile-drawer input::placeholder {
        font-size: 1.5rem !important
    }

    .profile-drawer .custom-height {
        height: 200px
    }

    .custom-list ol {
        padding-left: 1.5rem !important
    }

    .profile-drawer .order-id-input input,
    .profile-drawer .order-id-input input::placeholder {
        font-size: 2.25rem !important
    }
}

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

    .event-tab-container .q-tab__icon,
    .news-tab-container .q-tab__icon,
    .videos-tab-container .q-tab__icon {
        width: 45px;
        height: 100px;
        font-size: 4rem !important
    }

    .product-height {
        height: 10rem !important
    }

    .news-container .q-btn,
    .videos-container .q-btn,
    .order-see-all .q-btn {
        font-size: 3rem !important
    }

    .ticket-wrapper .ticket-btn {
        height: 100px;
        width: 250px;
        padding: 0 20px
    }

    .ticket-wrapper .store-btn {
        height: 100px;
        width: 250px;
        padding: 0 20px
    }

    .side-img {
        height: 113px
    }

    .topnav-list-container {
        height: calc(100% - 113px)
    }

    .topnav-list-container .q-item {
        padding: 22px 16px
    }

    .q-toggle-responsive .q-toggle__inner,
    .q-radio-responsive .q-radio__inner {
        font-size: 91px
    }

    .navigation-container .q-item__section--side>.q-icon {
        font-size: 3rem !important
    }

    .calendar .q-calendar-month__head--weekdays,
    .calendar .q-calendar-month__head--workweek {
        font-size: 30px
    }

    .calendar .q-calendar__button {
        font-size: 30px
    }

    .calendar .q-calendar-month__week--days {
        margin: 25px 0
    }

    .event-container .event-calendar-dots {
        height: 18px;
        width: 18px;
        margin: 0 2.5px
    }

    .event-filter {
        width: 460px
    }

    .event-filter .q-field__native {
        padding: 18px 0
    }

    .event-filter .q-field__native span {
        font-size: 3rem !important;
        padding: 23px 0
    }

    .event-filter .q-field__marginal {
        font-size: 3rem !important
    }

    .event-img-responsive {
        max-width: 125px;
        height: 125px
    }

    .left-stepper-responsive {
        margin-right: 380px
    }

    .right-stepper-responsive {
        margin-left: 380px
    }

    .event-container svg {
        height: 385px
    }

    .custom-badge-padding {
        padding: 22px 24px !important
    }

    .q-badge.badge-responsive {
        padding: 17px 15px
    }

    .cart-drawer .items-checkout .q-checkbox__bg {
        width: 45px !important;
        height: 45px !important
    }

    .cart-drawer .q-checkbox__inner {
        width: 2em;
        height: 2em
    }

    .cart-drawer .buttons .plus-btn,
    .cart-drawer .buttons .minus-btn {
        width: 65px !important;
        height: 65px !important
    }

    .responsive-icon {
        width: 65px !important
    }

    .cart-drawer .buttons .quantity-input .q-field__control {
        height: 63px !important
    }

    .cart-drawer .buttons .quantity-input input {
        font-size: 45px
    }

    .address-drawer input,
    .profile-drawer input,
    .profile-drawer textarea,
    .profile-drawer input::placeholder {
        font-size: 1.875rem !important
    }

    .cart-drawer .checkout-btn,
    .address-drawer .add-address-btn {
        height: 95px;
        padding: 0 65px !important
    }

    .cart-drawer .items-checkout {
        height: calc(100% - 297px)
    }

    .fillup-drawer .items-checkout {
        height: calc(100% - 297px)
    }

    .shipment .shipment-select {
        width: 480px !important
    }

    .checkout-drawer .q-field--dense .q-field__marginal,
    .profile-drawer .q-field--dense .q-field__marginal {
        height: 96px;
        font-size: 45px
    }

    .checkout-drawer .q-field--auto-height.q-field--dense .q-field__native,
    .address-drawer .q-field--dense .q-field__control,
    .profile-drawer .q-field--dense .q-field__control {
        min-height: 96px
    }

    .address-drawer .q-field__control-container,
    .address-drawer .q-field--outlined .q-field__control:after,
    .profile-drawer .q-field__control-container,
    .profile-drawer .q-field--outlined .q-field__control:after {
        min-height: 96px
    }

    .q-field__native {
        line-height: 34px !important
    }

    .address-drawer .items-checkout-edit {
        height: calc(100% - 345px)
    }

    .address-drawer .items-checkout-add {
        height: calc(100% - 242px)
    }

    .profile-drawer .profile-body {
        height: calc(100% - 375px)
    }

    .profile-drawer .custom-height {
        height: 260px
    }

    .custom-list ol {
        padding-left: 2rem !important
    }

    .profile-drawer .order-id-input input,
    .profile-drawer .order-id-input input::placeholder {
        font-size: 3rem !important
    }
}

.truncate-text-achievement {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.footer-img {
    width: auto !important;
    height: 200px !important;
    object-fit: scale-down !important;
}