@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&family=Noto+Sans+TC:wght@100;300;500;700&family=Outfit:wght@100;200;300;400;500;700&display=swap');

/*!
 * Custom styles for GL-LINE
 * Color Guideline - #48C7E4  #65CFCA  #1aa6c5 - #ff5285  #f12774 - #4c4c4c - #1ab56d
 * By Daphne
 */

/* 變數設定 */
:root {
    --bs-white          : #fff;
    --bs-gray           : #7b8186;
    --bs-gray-200       : #cfcfcf;
    --bs-gray-300       : #c5c5c5;
    --bs-light          : #f7f7f7;
    --bs-bg             :#f5f5f5;
    --bs-dark           : #0e1011;
    --bs-normal         : #65CFCA;
    --bs-invalid        :#fd7bad;
    --bs-font-sans-serif: "Noto Sans", sans-serif;
    --bs-font-monospace : "Noto Sans TC", "Montserrat Alternates","LiHei Pro Medium", "微軟正黑體", "Microsoft JhengHei", "PingFang TC", "Helvetica Neue", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Liberation Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-gradient       : linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

/* 共用元素 */
body {
    width  : 100vw;
    height: 100vh;
    padding: 0;
    background : var(--bs-bg);
    color      : #4c4c4c;
    font-family:  "Outfit", "Noto Sans TC", sans-serif;
    font-size  : 1rem;
    font-weight: 400;
    line-height: 1.6;
    /* For iphone */
    height: calc(55px +  constant(safe-area-inset-bottom));
    height: calc(55px +  env(safe-area-inset-bottom));
}
html,
body {
    font-family:  "Outfit", "Noto Sans TC", sans-serif;
    /* height:calc(((100vw / 2) - 20px) * 3 / 4); */
    background: var(--bs-bg);
}
* {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}
img {
    max-width: 100%;
}
a {
    color: #46b4af;
}
/* font size */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color:  var(--bs-dark);
}
h4 {
    font-size: 1.525rem;
}
h5 {
    font-size: 1.325rem;
}
h6 {
    font-size: 1.1rem;
}
.xxl-font {
    font-size: 2.5rem
}
.xl-font {
    font-size: 2.1rem
}
.ll-font {
    font-size: 1.8rem
}
.ml-font {
    font-size: 1.5rem
}
.mm-font {
    font-size: 1.1rem
}
.sm-font {
    font-size: .95rem
}
.xs-font {
    font-size: .85rem
}
.xxs-font {
    font-size  : .75rem;
    font-weight: 300;
}
.text-tiny {
    font-size: .7em;
}
.text-small {
    font-size: .85em;
}
.text-big {
    font-size: 1.4em;
}
.text-huge {
    font-size: 1.8em;
}
blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: 5px solid #ccc;
}
.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ellipsis-inline-two {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ellipsis-inline-three {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* background */
.leff-radius {
    background: transparent;
}
.leff-radius::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    background: var(--bs-white);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 0 10px 8px #efefef;
    z-index: 3;
}
.bg-secondary {
    background-color: #c7cbce !important;
}
.bg-available {
    background-color: var(--bs-normal) !important;
}
.bg-info {
    background-color: var(--bs-gray-200) !important;
}

/* text-align setting */
.text-left {
    text-align: left !important;
}

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

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

/* color setting */
.text-secondary {
    color: #bdbdbd !important;
}
.text-danger {
    color: #fb0072 !important;
}
.text-green {
    color: #1ab56d !important;
}
.text-info {
    color: #65CFCA !important;
}
.text-normal {
    color: var(--bs-normal) !important;
}
.text-dark-gray {
    color: #3d3d3d !important;
}
/* border setting */
.border-none {
    border: none;
}
textarea {
    font-size: .925rem;
    font-weight: 300;
    color: #666;
    border: 1px solid #cdcbcb;
    border-radius: 0.35rem;
    padding: 0.5rem;
}
/* padding */
.pl-0 {
    padding-left: 0 !important;
}

/* container */
main {
    padding-bottom: 3.5rem;
}
.container-full {
  width: 100%;
    padding-right: var(--bs-gutter-x, 0rem);
    padding-left: var(--bs-gutter-x, 0rem);
    margin-right: auto;
    margin-left: auto;
}
/* flex setting */
.flex-row-center {
    display        : flex;
    align-items    : center;
    justify-content: center;
}
.flex-row-center-start {
    display        : flex;
    align-items    : center;
    justify-content: start;
}
.flex-row-start-start {
    display        : flex;
    align-items: flex-start;
    justify-content: start;
}
.flex-row-center-center {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.flex-row-center-end {
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
}
.flex-row-center-between {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}
.flex-row-center-around {
    display        : flex;
    align-items    : center;
    justify-content: space-around;
}
.flex-row-center-evenly {
    display        : flex;
    align-items    : center;
    justify-content: space-evenly;
}
.flex-row-start-between {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
}
.flex-row-end-between {
    display        : flex;
    flex-direction : row;
    justify-content: end;
}
.flex-column-start-between {
    display       : flex;
    flex-direction: column;
    align-items   : flex-start;
}
.flex-column-end-between {
    display       : flex;
    flex-direction: column;
    align-items   : flex-end;
}
.flex-end {
    display        : flex;
    justify-content: flex-end;
}
.block-zero {
    margin-left : -2rem !important;
    margin-right: -2rem !important;
}

/* 驗證區塊 */
.grecaptcha-badge {
    z-index: 5;
}
/* img-size setting */
.max-width-100 {
    max-width: 100vw !important;
}

.img-100 {
    width: 100px;
}
.img-130 {
    width: 130px;
}
.img-140 {
    width: 140px;
}
.img-150 {
    width: 150px;
}
.img-200 {
    width : 200px;
    height: 200px;
}
.img-250 {
    width : 250px;
    height: 250px;
}
.img-300 {
    width : 300px;
    height: 300px;
}
.img-thumbnail {
    padding         : .25rem;
    background-color: var(--bs-bg);
    border          : 1px solid var(--bs-white);
    border-radius   : .25rem;
    width       : 100%;
    height          : auto;
}
.img-blur {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

/* list Used */
.between-left-w15 {
    width      : 15%;
    text-align : left !important;
}
.between-left-w20 {
    width      : 20%;
    text-align : left !important;
}
.between-left-w30 {
    width      : 30%;
    text-align : left !important;
}
.between-left-w40 {
    width      : 40%;
    text-align : left !important;
}
.between-left-w50 {
    width      : 50%;
    text-align : left !important;
}
.between-left-w60 {
    width      : 60%;
    text-align : left !important;
}
.between-right-w60 {
    width      : 60%;
    text-align : right !important;
}
.between-right-w70 {
    width      : 70%;
    text-align : right !important;
}
.between-right-w80 {
    width      : 80%;
    text-align : right !important;
}
.between-right-w85 {
    width      : 85%;
}

/* hr setting */
.baseline {
    /* border-top: 1px solid #efefef; */
    padding   : .625rem 0;
    box-shadow: 0px -8px 20px 16px var(--bs-bg);
}
.underline {
    border-bottom: 1px solid var(--bs-white);
    padding      : .625rem 0;
}

/* line-height setting */
.lh-normal {
    line-height: normal
}

.lh-16 {
    line-height: 1.6;
}

.lh-18 {
    line-height: 1.8;
}

.lh-20 {
    line-height: 2;
}

/* padding-fixed */
.padding-fixed-100 {
    padding-bottom: 100px;
}
.padding-fixed-150 {
    padding-bottom: 150px;
}
.padding-fixed-200 {
    padding-bottom: 200px;
}
.padding-fixed-250 {
    padding-bottom: 250px;
}

/* btn setting */
.btn {
    padding: .825rem .725rem;
}
.btn-fixed-group {
    position  : fixed;
    top: unset;
    bottom    : 0;
    left      : 0;
    right     : 0;
    padding-bottom: 2rem !important;
    background: var(--bs-bg);
    box-shadow: 0px -10px 30px 30px var(--bs-bg);
    z-index: 3;
}
.btn:disabled,
.disabled {
    cursor : not-allowed;
    opacity: .3 !important;
}
.btn:focus {
    outline   : 0;
    box-shadow: none;
}
.btn-normal {
    color           : var(--bs-white);
    background-color: var(--bs-normal);
    border-color    : var(--bs-normal);
}
.btn-normal:hover {
    color           : var(--bs-white);
    background-color: #56c7c1;
    border-color    : #56c7c1;
}
.btn-outline-normal {
    color       : var(--bs-normal);
    border-color: var(--bs-normal);
}
.btn-outline-normal:hover {
    color       : #56c7c1;
    border-color: #56c7c1;
}
.btn-danger {
    color           : var(--bs-white);
    background-color: var(--bs-invalid);
    border-color    : var(--bs-invalid);
}
.btn-danger:hover {
    color           : var(--bs-white);
    background-color: #f12774;
    border-color    : #f12774;
}
.btn-danger2 {
    color           : var(--bs-white);
    background-color: #FDCDCD;
    border-color    : #FDCDCD;
}
.btn-danger2:hover {
    color           : var(--bs-white);
    background-color: #FF8888;
    border-color    : #FF8888;
}
.btn-link {
    font-weight    : 400;
    color          : var(--bs-normal);
    text-decoration: none;
}
.btn-link:hover {
    font-weight    : 400;
    color          : #56c7c1;
    text-decoration: none;
}
.btn-dark {
    color           : var(--bs-white);
    background-color: var(--bs-dark);
    border-color    : var(--bs-gray-900);
}
.btn-dark:hover {
    color           : var(--bs-white);
    background-color: var(--bs-gray-700);
    border-color    : var(--bs-gray-600);
}
.btn-dark-outline{
    color       : var(--bs-dark);;
    border-color: var(--bs-dark);
}
.btn-dark-outline:hover {
    color       : var(--bs-gray-700);
}
.btn-dark-link {
    font-weight    : 400;
    color          : var(--bs-dark);
    text-decoration: none;
}
.btn-dark-link:hover {
    font-weight    : 400;
    color          : var(--bs-gray-700);
    text-decoration: none;
}

/* border-radius setting */
.radius-10 {
    border-radius: 10px !important;
}
.radius-50 {
    border-radius: 50px !important;
}
.radius-100 {
    border-radius: 100px !important;
}

/* form & radio & checkbox setting */
.form-control {
    font-weight: 300;
    padding: 0.525rem 0.75rem;
    color: var(--bs-gray-600);
    border: 1px solid #dde0e6;
}
.form-control:focus {
    border-color: var(--bs-normal);
    box-shadow: 0 0 0 0.25rem rgb(166 221 219 / .39);
}
.from-froup {
    padding-top  : 1rem;
    padding-bottom: 1rem;
}
.form-label {
    font-size: .875rem;
}
.from-froup .form-check {
    padding-left  : 0;
    padding-bottom: 1rem;
}
.form-select-gray {
    background-image: url("../images/arrow-down.svg");
    background-position: right 1.2rem center;
    padding           : .7rem 2.25rem .7rem 1.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size         : 1rem;
    font-weight       : 400;
    line-height       : 1.5;
    border-radius: 30px;
    color             : var(--bs-normal);
    background-color  : #f2f2f2;
    border            : 1px solid var(--bs-normal);
}
.form-select:active, .form-select:focus {
    border-color: var(--bs-normal);
    color: var(--bs-normal);
    font-weight: 500;
    outline: 0;
    box-shadow: 0px 7px 4px -1px #49c7e547;
}
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 16px;
    scroll-snap-type: x mandatory;
}
.color-0 { background-color: #f9f9f9; box-shadow: 1px 1px 5px rgba(5, 232, 126, 0.5)}
.color-1 { background-color: #f9f9f9; box-shadow: 1px 1px 5px rgba(27, 198, 255, 0.5)}
.scroll-item {
    min-width: 80%;
    max-width: 300px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 1.7px solid #ffffff;
    padding: 1.2rem;
    border-radius: 8px;
}
.vertical-list {
    display: block;
}
.input-group .btn {
    padding: 0.525rem 0.725rem;
}
.is-invalid-msg {
    color: #d20034;
    font-size: .75rem;
    font-weight: 300;
    display: flex;
    justify-content: flex-start;
    padding-top: 0.25rem;
    padding-left: 0.25rem;
}
.invalid-msg {
    font-size: 0.85rem;
    color: #d20034;
    position: relative;
    list-style: none;
    margin: 0 0 0.625rem 0;
    padding: 0 0 0 1rem;
    background: url(../images/icon-warning.svg?date=1503208846) 0 0.35rem no-repeat;
    background-size: 0.75rem;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #d20034;
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border-color: #d20034;
    box-shadow: 0 0 3px 0.15rem rgb(227 52 47 / 20%);
}
.gl-radio,
.gl-checkbox {
    position: absolute;
    display : none;
}
.gl-radio+label,
.gl-checkbox+label {
    position    : relative;
    display     : block;
    padding-left: 35px;
    cursor      : pointer;
}
.gl-radio+label:before {
    position     : absolute;
    top          : 0px;
    left         : 0px;
    display      : inline-block;
    width        : 25px;
    height       : 25px;
    content      : '';
    background   : var(--bs-white);
    border       : 2px solid var(--bs-normal);
    border-radius: 50%;
}
.gl-checkbox+label:before {
    position     : absolute;
    top          : 0px;
    left         : 0px;
    display      : inline-block;
    width        : 25px;
    height       : 25px;
    content      : '';
    background   : var(--bs-white);
    border       : 2px solid var(--bs-normal);
    border-radius: 5px;
}
.gl-radio+label:before,
.gl-checkbox+label:before {
    background: transparent;
}
.gl-radio+label:after,
.gl-checkbox+label:after {
    position: absolute;
    display : none;
    content : '';
}
.gl-radio+label:after {
    top          : 5px;
    left         : 5px;
    width        : 15px;
    height       : 15px;
    border-radius: 50%;
    background   : var(--bs-normal);
}
.gl-checkbox+label:after {
    top              : 3px;
    left             : 8px;
    box-sizing       : border-box;
    width            : 8px;
    height           : 15px;
    transform        : rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-width     : 3px;
    border-style     : solid;
    border-color     : var(--bs-white);
    border-top       : 0;
    border-left      : 0;
}
.gl-checkbox[type=checkbox]:checked+label:before {
    background-color: var(--bs-normal);
}
.gl-radio:checked+label:after,
.gl-checkbox:checked+label:after {
    display: block;
}

/* bannrer-size setting */
.banner-max-height {
    padding: 0 1rem;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden;

}
.banner-max-height img {
    border-radius: 15px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
    display: block;
}
.events-stop {
    position: absolute;
    padding: 0.35rem 1.5rem;
    background: #f95899e3;
    color: var(--bs-white);
    width: 95%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    font-size: 1.3rem;
}
.events-stop::after {
  content:””;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  right: 15%;
  top: calc( 50% — 6px );
}
/* reset Style */
.navbar {
    padding-bottom: 0;
    padding-top   : 5px;
}
.navbar-brand {
    font-size   : .9rem;
    margin-right: 0;
}
nav .btn {
    width: 55px;
}

/* content */
.content-defult {
    padding: 0 !important;
}
.content {
    padding-bottom: 8rem !important;
}
.content-lg {
    padding-bottom: 10.5rem !important;
}
.content ol,
.content ul {
    padding-left : 0rem;
    margin-bottom: 2rem;
}
/* .content-defult ol,
.content-defult ul {
    padding-left : 0rem;
} */

/* content - detail - carousel */
.carousel.pointer-event {
    padding-bottom: 1.5rem !important;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 2.3rem;
    height: 2.3rem;
    background-size: 70% 70%;
    background-color: #3336;
    border-radius: 100%;
}
.carousel-caption.custom-caption {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: left;
    z-index: 10;
}
.carousel-caption h5{
    color: #333;
}
.carousel-item .seating-block {
    height: 250px;
    width: auto;
    border-radius: 15px;
}
.carousel-indicators {
    margin-bottom: 2rem;
    bottom: -2.5rem;
}
.detail-content, .swiper-content {
    position: relative;
    line-height: normal;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}
.detail-content::-webkit-scrollbar, .swiper-content::-webkit-scrollbar {
    display: none;
}
.detail-content b {
    font-size: .9rem;
    font-weight: 400;
    color: var(--bs-dark);
}
.detail-content strong {
    font-weight: 500;
    color: var(--bs-dark);
}
.detail-content b i::before {
    content   : "";
    display   : block;
    position  : absolute;
    left      : 10px;
    font-style: normal;
}
.detail-content ol,
.detail-content ul {
    padding-left : 1.5rem;
    margin-bottom: 1.5rem;
}
.detail-content li {
    position: relative;
    list-style: inherit;
    font-size: .825rem;
    font-weight: 300;
    line-height: 1.6;
    padding-left: 5px;
}
.notice-content {
    position: absolute;
    bottom: 7rem;
}
.notice-content ul{
    padding-left: 0;
}
.notice {
    padding-left: 2px;
  }
.notice li {
  list-style: none;
  font-size: .9rem;
  padding-left: 0;
}
.notice li::before {
    content   : "";
}
.detail-title {
    font-size  : 1.25rem;
    font-weight: 600;
    padding    : 1.5rem;
    line-height: inherit;
}
.default-content ol,
.default-content ul {
    padding-left : .25rem;
    margin-bottom: 1.5rem;
}
.default-content {
    position: relative;
    list-style: none;
    font-size: .825rem;
    font-weight: 300;
    line-height: 1.6;
    padding-left: 10px;
}
.default-content li {
    position: relative;
    list-style: none;
    font-size: .825rem;
    font-weight: 300;
    line-height: 1.6;
    padding-left: 10px;
}
.default-content li::before {
    content: "−";
    display: block;
    position: absolute;
    left: 0;
    font-style: normal;
    line-height: inherit;
}
/* content - order */
.order-content {
    font-size    : .9rem;
    margin-top   : 2rem;
    margin-bottom: 2rem;
}
/*文字樣式可共用*/
.status-badge {
    position   : absolute;
    right      : 0;
    top        : 0;
    font-size  : .575rem;
    font-weight: 300;
    padding    : .5em .85em;
}
.qrcode-void-box {
    position: absolute;
    width: 100%;
    top: 6%;
    color: var(--bs-white);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qrcode-void-text {
    background: #000000c4;
    border: 3px dashed var(--bs-white);
    border-radius: 5px;
    color: var(--bs-white);
    height: 150px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    box-shadow: 0 0 6px 19px var(--bs-white);
}
/* orderlist Use */
.--info {
    width         : 100%;
    display       : flex;
    flex-direction: column;
    align-items: flex-start;
}
.text-date {
    font-size     : .75rem;
    font-weight   : 300;
    padding-bottom: .2rem;
    color         : #999;
}
.center-content {
    margin-top   : 1rem;
    margin-bottom: 1.5rem;
    text-align   : center;
}
.center-content h6 {
    font-size: 1rem;
    font-weight: 500;
}

/* ticketlist Use */
.--info {
    width         : 100%;
    display       : flex;
    flex-direction: column;
    align-items: flex-start;
}
.text-date {
    font-size     : .75rem;
    font-weight   : 300;
    padding-bottom: .2rem;
    color         : #999;
}
/* content - payment */
.payment-content {
    padding-top   : 1rem;
    padding-bottom: 2rem;
}
.payment-title {
    font-weight: 500;
    padding-top : 3.5rem;
    padding-bottom: .5rem;
    line-height: inherit;
}
.paymentinfo-content {
    padding-bottom: 15rem !important;
}
.payment-card {
   background: #e5e5e5;
   border-radius: 0.5rem;
   padding: 0.95rem 1.25rem;
}
.payment-card-title {
    font-size: .7rem;
    font-weight: 500;
    margin-top : 1rem;
    line-height: inherit;
}
.payment-info {
    font-size:.75rem;
    color: #5c5c5c;
}
.payment-icons img{
    width: 35px;
    padding-right: 8px;
    padding-bottom: 10px;

}
#applePayBtn {
    display: inline-block;
    color: transparent;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;
}
.box-round {
    background: #f2f2f2;
    padding: 1.5rem;
    border-radius: 0.35rem;
    margin-bottom: 1.5rem;
}
.box-round p {
    font-size: .95rem;
    margin-top: 0.5rem;
    color: var(--bs-gray-600);
}

/*tappay*/
.tappay-card .tappay-iframe iframe {
    height: 37px;
}
.tappay-card .tappay-iframe iframe form .input {
    font-size: .9rem;
    line-height: 37px;
    height: 37px;
}

/* content - Order seating */
.seat-detail {
    max-width: 800px;
    margin   : 0 auto;
}
.seat-area {
    position  : relative;
    margin    : 1.5rem auto;
    max-width : 95vw;
    height    : 450px;
    max-height: 40vh;
    overflow  : auto;
    left      : 0;
    top       : 0;
}
.seat-tooltip {
    background: #e9e9e9;
    padding: .5rem;
    border-radius: .5rem;
}
.row-area {
    position   : absolute;
    top        : 0;
    left       : 0;
    z-index    : 1;
    width      : 60px;
    float      : left;
    /* box-shadow : inset rgb(255 255 255 / .8) 65px 0px 2px 8px; */
}
li.row-no {
    height     : 40px;
    padding    : 8px 10px;
    font-size  : .9rem;
    line-height: 1.9;
    list-style : none;
}
.seating-plan {
    position  : relative;
    margin    : 0 !important;
    border-top: 0;
    padding   : 0;
    overflow-x: scroll;
    overflow-y: hidden;
    max-height: initial;
}
.seating-plan ol,
.seating-plan ul,
.seating-plan li {
    list-style: none;
}
.seating-plan .seats {
    display        : flex;
    flex-direction : row;
    flex-wrap      : nowrap;
    justify-content: flex-start;
    margin-bottom  : 0;
    padding-left   : 30px;
}
.seat {
    display : flex;
    justify-content: center;
    flex    : 0 0 40px;
    padding : 5px;
    height  : 40px;
    width   : 100%;
    position: relative;
}
.seat input[type=checkbox] {
    position: absolute;
    opacity : 0;
}
.seat input[type=checkbox]:checked+label {
    background: var(--bs-normal);
}
.seat input[type=checkbox]:disabled+label {
    background : #ccc;
    text-indent: -9999px;
    overflow   : hidden;
    color      : #999;
    opacity    : .3;
}
.seat input[type=checkbox]:disabled+label:after {
    content    : "○";
    text-indent: 0;
    position   : absolute;
    top        : 3px;
    left       : 50%;
    transform  : translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled+label:hover {
    box-shadow: none;
    cursor    : not-allowed;
}
.seat label {
    display            : block;
    position           : relative;
    width              : 100%;
    text-align         : center;
    font-size          : 1.5rem;
    font-weight        : bold;
    line-height        : 1.5rem;
    padding            : 4px 0;
    background         : #ccc;
    border-radius      : 5px;
    animation-duration : 300ms;
    animation-fill-mode: both;
}
.seat label:hover {
    cursor    : pointer;
    box-shadow: 0 0 0 4px #93f2ff;
}
.graphic-normal {
    display      : block;
    position     : relative;
    width        : 100%;
    text-align   : center;
    background   : #b1b1b1;
    height       : 15px;
    width        : 15px;
    border-radius: 5px;
}
.graphic-active {
    display      : block;
    position     : relative;
    width        : 100%;
    text-align   : center;
    background   : var(--bs-normal);
    height       : 15px;
    width        : 15px;
    border-radius: 5px;
}
.graphic-disable {
    display      : block;
    position     : relative;
    width        : 100%;
    text-align   : center;
    background   : #d2d2d2;
    height       : 15px;
    width        : 15px;
    border-radius: 5px;
}
.graphic-disable:after {
    content    : "○";
    text-indent: 0;
    color      : #dedede;
    position   : absolute;
    top        : 2px;
    left       : 50%;
    line-height: 1;
    transform  : translate(-50%, 0%);
}

/* content - ticket*/
.ticket-detail-content {
    background: #e9e9e9;
    padding: 1rem 1.325rem;
    border-radius: 20px;
}
.ticket-card {
    margin-bottom: .75rem !important;
}
.status-content {
    width: 100%;
}
.status-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #c8c8c8;
    border-radius: 50px;
    padding: .5rem;
    margin-bottom: 10px;
}
.status-box span {
    min-width: 85px;
    width: 85px;
    font-size: .925rem;
    font-family: monospace;
    color: #fff;
    background: #c8c8c8;
    text-align: center;
    border-radius: 100px;
    padding: .25rem;
    margin-right: 10px;
    letter-spacing: 2px;
}
.status-box.active {
    border: 1px solid var(--bs-normal);
}
.status-box.active span {
    background: var(--bs-normal);
}
.status-box.invalid {
    border: 1px solid var(--bs-invalid);
}
.status-box.invalid span {
    background: var(--bs-invalid);
}
.status-text {
    font-weight: 300;
}
.ticket-content {
    position: relative;
    line-height: 1.8;
}
.ticket-content li{
    position: relative;
    font-weight: 300;
    padding-left: 10px;
}
.ticket-content li::before {
    content   : "−";
    display   : block;
    position  : absolute;
    left      : 0;
    font-style: normal;
    line-height: inherit;
}
.ticket-content h6 {
    font-size: .975rem;
    font-weight: 500;
}
.ticket-content p {
    margin-bottom: 2.5rem;
}
.ticket-content b {
    font-size: .8rem;
    color: var(--bs-dark);
    font-weight: 400;
    position: relative;
}
.ticket-content b i::before {
    content   : "";
    display   : block;
    position  : absolute;
    top: -1px;
    left      : 10px;
    font-style: normal;
    line-height: normal;
}
.ticket-content ol,
.ticket-content ul {
    padding-left : .35rem;
    margin-bottom: 1.5rem;
    list-style: none;
    font-size: .825rem
}

/* content - Message page */
.error-content, .messages-content {
    font-size    : 1rem;
    padding-top   : 4rem;
    padding-bottom: 2rem;
}
.error-content b, .messages-content b {
    font-weight: 300;
}
.error-content h6, .messages-content h6{
    letter-spacing: 1;
}
.error-content ul, .messages-content ul {
    padding-left: 1rem;
}
.error-title,
.warning-title,
.success-title {
    font-size    : 1.325rem;
    font-weight  : 500;
    margin-top   : 2rem;
    margin-bottom: 3rem;
    line-height  : inherit;
}
.error-list {
    position   : relative;
    list-style : none;
    font-size  : .875rem;
    font-weight: 600;
}
.error-list a {
    text-decoration: none;
    color          : #4c4c4c;
    cursor         : pointer;
}
.error-list a:hover {
    opacity: .8;
}
.success-title::before {
    content                : "\f270";
    display                : inline-block;
    font-family            : bootstrap-icons !important;
    font-style             : normal;
    font-weight            : normal !important;
    font-variant           : normal;
    text-transform         : none;
    line-height            : 1;
    vertical-align         : -.275em;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    color                  : #1ab56d;
    font-size              : 2.5rem;
    margin-right           : .5rem;
}
.warning-title::before {
    content                : "\f333";
    display                : inline-block;
    font-family            : bootstrap-icons !important;
    font-style             : normal;
    font-weight            : normal !important;
    font-variant           : normal;
    text-transform         : none;
    line-height            : 1;
    vertical-align         : -.275em;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    color                  : #ffd000;
    font-size              : 2.5rem;
    margin-right           : .5rem;
}
.error-title::before {
    content                : "\f623";
    display                : inline-block;
    font-family            : bootstrap-icons !important;
    font-style             : normal;
    font-weight            : normal !important;
    font-variant           : normal;
    text-transform         : none;
    line-height            : 1;
    vertical-align         : -.275em;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    color                  : #d20034;
    font-size              : 2.5rem;
    margin-right           : .5rem;
}
.error-message-bg {
    background: url(../images/robot.svg);
    background-repeat: no-repeat;
    background-size: 80% 75%;
    background-position: bottom right;
    height: 100vh;
}
.order-error-bg {
    background: url(../images/order-error.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    height: 100vh;
}
.error-page {
    font-size: 1.15rem;
    padding: 7rem 2rem;
}
.error-heading {
    font-size: 3.25rem;
    font-weight: 600;
}
.warning-heading, .success-heading {
    font-size: 2.35rem;
    font-weight: 600;
    padding-bottom: 1rem;
}
.order-error-bg ul{
    padding-left: 2rem;
    font-size: 1.1rem;
    color: #000;
}
.rq-used {
    filter: invert(20%) sepia(10%) saturate(2045%) hue-rotate(135deg) brightness(280%) contrast(138%);
}
.rq-expired {
    filter: invert(20%) sepia(20%) saturate(1960%) hue-rotate(295deg) brightness(230%) contrast(100%);
}

/* memo */
.notes-xs {
    display       : inline-block;
    padding       : .35em 0 .5em;
    font-size     : .75em;
    font-weight   : 700;
    line-height   : 1;
    color         : var(--bs-white);
    text-align    : center;
    white-space   : nowrap;
    vertical-align: baseline;
    border-radius : .25rem;
}

/* card Setting */
.card-groups {
    position: relative;
    list-style: none;
    font-size: .85rem;
    font-weight: 400;
    text-align: left;
}
.card-groups a {
    text-decoration: none;
    color          : #4c4c4c;
    cursor         : pointer;
}
.card-groups a:hover {
    opacity: .8;
}
.card {
    position              : relative;
    display               : -webkit-flex;
    display               : -ms-flexbox;
    display               : flex;
    -webkit-flex-direction: column;
    -ms-flex-direction    : column;
    flex-direction        : column;
    min-width             : 0;
    word-wrap             : break-word;
    background-color      : var(--bs-white);
    background-clip       : border-box;
    border                : 0 solid rgba(0, 0, 0, .125);
    border-radius         : .25rem;
}
.card-events {
    box-shadow: 0 0 10px 6px #dededeab;
    border-radius: calc(1rem - 1px);
    min-height: 263px;
}
.card-body {
    -webkit-flex: 1 1 auto;
    -ms-flex    : 1 1 auto;
    flex        : 1 1 auto;
    min-height  : 1px;
    padding     : 1.25rem;
}
.card-body::after,
.card-footer::after,
.card-header::after {
    display: block;
    clear  : both;
    content: "";
}

.card-list, .card-list-row{
    position   : relative;
    list-style : none;
    font-size  : .85rem;
    font-weight: 400;
    text-align: left;
}
.card-img-hidden {
    max-height: 150px;
    overflow: hidden;
    margin: 0;
    border: 0;
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
}
.card-list a {
    text-decoration: none;
    color          : #4c4c4c;
    cursor         : pointer;
}
.card-list a:hover {
    opacity: .8;
}
.card-list .underline:last-child {
    border-bottom: none;
}
.card-list-name, .card-list-title {
    font-weight: 500;
    font-size: .875rem;
}
.card-list-subtitle {
    font-size: .7rem;
    font-weight: 300;
    padding-bottom: 0;
    color: #999;
}
.card-list-sessions, .card-list-text, .card-list-instructions {
    font-size: .75rem;
}
.card-list-instructions {
    color: var(--bs-gray);
}
.card-list-price {
    font-weight: 500;
}
.card-status-badge {
    position: absolute;
    top: unset;
    right: 0;
    bottom: 0;
    font-size: .75rem;
    font-weight: 300;
    padding: .5em .85em;
    border-radius: 50px;
}
.--card-info {
    width: 85%;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.--imgfix {
    width: 110px;
    height: 85px;
    margin-top: .2rem;
    margin-right: 15px;
}
.--imgfix img {
    background-color: transparent;
    border: 1px solid transparent;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
}
.no-result{
    padding: 2.5rem 1rem;
    text-align: center;
}
.card-no-result{
    width: 100px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .6;
}
.card-no-result img {
    display: block;
    max-width:100% ;
}
.card-ellipsis {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}


/* order detail */
.info-list {
    background: var(--bs-white);
    border-radius: .5rem;
    border-bottom: none;
    padding: .625rem .5rem;
    margin-bottom: .5rem;
    list-style: none;
}
.voucher-info {
    background: var(--bs-bg);
    border-radius: .5rem;
    font-size: .8rem;
    padding: .25rem .75rem !important;
    margin: .35rem .25rem !important;
}
/* swiper Use */
.btn-date,
.btn-floor {
    background-color: transparent;
    border: none;
    color: #C4C9DF;
    font-size: .7rem;
    position: relative;
    display: inline-grid;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.btn-date {
    border-radius: 8px;
    width: 100%;
    min-width: 70px;
    height: 60px !important;
    padding: 10px 5px;
    text-align      : center;
}

.btn-floor {
    border-radius: 50px;
    width        : 70px;
    min-width    : 70px;
    height       : 25px !important;
    padding      : 2px;
    text-align      : center;
}
.btn-date.active b,
.btn-floor.active b,
.btn-date.swiper-slide-active b,
.btn-floor.swiper-slide-active b {
    font-size: 1.2rem;
    color: var(--bs-normal);

}
.btn-date.active, .btn-floor.active, .btn-date.swiper-slide-active, .btn-floor.swiper-slide-active {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--bs-normal);
}

.btn-date.swiper-slide-active::after {
    position: absolute;
    content: "";
    left: 50%;
    bottom: -10px;
    background: var(--bs-normal);
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.btn-floor.swiper-slide-active::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-normal);
    bottom: -15px;
    left: 50%;
}
.btn-date:hover,
.btn-floor:hover {
    opacity: .8;
}
.btn-date:hover.active,
.btn-floor:hover.active {
    color: var(--bs-white);
}
.btn-date span,
.btn-date b,
.btn-floor b {
    line-height: 1.5;
}
.btn-date span {
    font-size: .8rem;
}
.btn-date b {
    font-weight: 400;
    font-size  : 1.1rem;
    padding-left: 0;
    color: #C4C9DF;
}

.btn-floor b {
    font-weight: 400;
    font-size  : .875rem;
    line-height: normal;
    padding-left: 0;
    color           : #C4C9DF;
}

/* 選擇場次優化 - &套件樣式 */
.vanilla-calendar {
    width: 100% !important;
    min-width: 272px;
    max-width: 100%;
    padding: 1rem;
}
.vanilla-calendar-day__btn {
    min-height: 2.875rem !important;
    width: 2.875rem !important;
    min-width: 2.875rem !important;
    border-radius: 5rem !important;
    font-size: 1rem !important;
    line-height: 2.875rem !important;
}
[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend, [data-calendar-theme=light] .vanilla-calendar-day__btn_holiday {
    color: var(--bs-dark) !important;
}
[data-calendar-theme=light] .vanilla-calendar-day__btn_prev, [data-calendar-theme=light] .vanilla-calendar-day__btn_next {
    color: var(--bs-dark) !important;
}
[data-calendar-theme=light] .vanilla-calendar-week__day, [data-calendar-theme=light] .vanilla-calendar-week__day_weekend {
    color: var(--bs-gray-500) !important;
    font-weight: 400;
}
[data-calendar-theme=light] .vanilla-calendar-day__btn_disabled {
    color: var(--bs-gray-300) !important;
}
[data-calendar-theme=light].vanilla-calendar, [data-calendar-theme=light] .vanilla-calendar-day__btn {
    background-color: transparent !important;
}
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected, [data-calendar-theme=light] .vanilla-calendar-day__btn_selected:hover {
    background-color: var(--bs-normal) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.1rem !important;
}

.calendar-mask {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    color: var(--bs-white);
    width: calc(100% - 1rem);
    height: calc(100% - 5rem);
    padding: 0;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.calendar-mask span::before, .calendar-mask span::after {
    content: "・・";
    padding: 10px;
}
.i-hot {
    position: relative;
    font-size: .875rem;
    padding-right: 1rem;
}
.i-hot::after{
    top: -5px;
    right: -3px;
}
.btn-time, .btn-time-select, .btn-time-select.active, .btn-hot  {
    padding: .625rem 1.375rem;
    max-width: 100%;
}
.btn-time {
    color           : var(--bs-dark);
    background-color: transparent;
    text-decoration: none;
    border-radius: 50rem;
}
.btn-time-select, .btn-time-select.active {
    color           : var(--bs-white);
    background-color: var(--bs-normal);
    border-color    : var(--bs-normal);
}
.btn-time:hover {
    color           : var(--bs-normal);
}
.btn-hot {
    position: relative;
    color           : var(--bs-dark);
    background-color: transparent;
    text-decoration: none;
}
.btn-hot::after{
    top: 5px;
    right: 3px;
}
.i-hot::after, .btn-hot::after {
    content: "!";
    position: absolute;
    width: 17px;
    height: 17px;
    font-size: 1.1rem;
    background: #ffc42d;
    color: var(--bs-white);
    font-weight: bold;
    text-align: center;
    line-height: 1;
    z-index: -1;
    border-radius: 15px;
    transform: rotate(15deg);
}
/* amount setting */
input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display           : none;
}
.customers-num {
    width     : 80px;
    margin    : 0 20px;
    text-align: center;
}
.customers {
    margin: 10px;
}
.customers input {
    border : none;
    outline: none;
    background: transparent;
}
.text-amount {
    color      : #a5a5a5;
    font-size  : .9rem;
    font-weight: 500;
}
input[type=date]:webkit-inner-spin-button {
    display: none;
}
.number-btn {
    width        : 35px;
    height       : 35px;
    border       : 1px solid var(--bs-normal);
    color        : var(--bs-normal);
    border-radius: 35px;
    font         : inherit;
    font-size    : 1.3rem;
    display      : inline-grid;
    align-items  : center;
    line-height  : initial;
    background   : transparent;
    outline      : none;
}
.number-btn:hover {
    background: var(--bs-normal);
    color: var(--bs-white);
    opacity: .7;
}
.number-btn:nth-child(2) {
    float: right;
}
.purchase-timer-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px
   }
   .purchase-timer-label{
       color: black;
       font-size: 0.65em;
       letter-spacing: 1.5px;
   }
   .purchase-timer-countdown{
       color: #FF6B00;
       font-size: 0.65rem;
       font-weight: 600;
   }

   .remind-purchase-content{
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 200px;
}
.remind-time-wrapper{
 display: flex;
 flex-direction: column;
 align-items: center;
}
.remind-time-text{
    color: black;
    font-size: 0.78em;
    letter-spacing: 2px;
}
.remind-time-count{
    color: #FF6B00;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2px;
}
.warning-title{
    margin-bottom: 8px !important;
}
.remind-text-wrapper{
    font-size: 0.96rem;
    font-weight: 300;
    margin-right: 10%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 5px;
}
.remind-text-tittle{
    font-weight: 500;
}
.remind-text-article{
    text-align: center;
    line-height: 25px;
}

.text-center-fullSection{
    padding: 3rem;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.text-center-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem !important;
    border: white 0.85px solid;
    border-radius: 15px;
    box-shadow: 2px 2px 20px rgb(239, 238, 238);
    box-shadow: -2px -2px 20px rgb(255, 255, 255);
}
.ticket-detail-contentStyle{
    margin-top: 10% !important;
    padding: 1rem 3rem;
    border-radius: 20px;
    width: 100% !important;
    box-shadow: 2px 2px 20px rgb(239, 238, 238);
    box-shadow: -2px -2px 20px rgb(255, 255, 255);
}
.countdown-group{
    margin-top: 15%;
}
.countdown-textGroup{
    width: 100vw !important;
    margin-top: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}
.ticket-detail-wrapper{
    height: 15%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reloadBtn-wrapper{
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#countdownText{
    font-size: 0.7rem ;
    font-weight: 300 !important;
    letter-spacing: 1.3px;
}
.countdownText-reloadBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 4px;
    border: none;
    color: rgb(0, 0, 0);
    width: 92% !important;
    border-radius: 10px;
}
.countdownText-reloadBtn:hover{
    background-color: #000;
    color: rgb(255, 255, 255);
}
.text-center-title{
    width: 100%;
    display: flex;
    flex-direction: column ;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 30px;

}
.text-center-member,
.text-center-qrcode {
    display: block;
    width: 100%;
    text-align: center;
}
.text-center-member{
    text-align: center !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    letter-spacing: 15px;
    margin-left: 0.65rem;
}
.ticket-card-bold{
    font-size: 0.7rem ;
    font-weight: 300;
}
.ticket-card-userID{
    margin-top: 0.7rem;
    font-size: 0.9rem;
    font-weight: 200;
}
.ticket-detail-wrapper-grid{
    margin-top: 35%;
    width: 60%;
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    grid-template-rows: repeat(2 , 1fr);
    color: #494747;
    font-weight: 100 !important;
    gap: 0.2px !important;
}
.ticket-wrapper-idText{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    font-size: 0.4rem;
    text-align: right;
    color: #46b4af;
}
.ticket-wrapper-idMath {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    text-align: right;
    color: #46b4af;
  }
.ticket-wrapper-lasttime{
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;
    font-size: 0.7rem;
    color: #3f7573;
}
  .ticket-wrapper-timeMath{
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    margin-top: 5px;
    text-align: center;
    color: #56c1bb;
    font-size: 0.7rem;
    font-weight: 100;
  }
/* RWD */
@media screen and (min-width: 768px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 90%;
    }
    .events-stop {
        left: 5%;
    }
    .seating-block {
        height: 450px;
    }
    .card-groups {
        width: 100%;
        margin: auto;
    }
    .countdown-textGroup{
        width: 100vw !important;
        margin-top: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }
    .countdown-group{
        margin-top: 6%;
    }
    .ticket-detail-wrapper-grid{
        margin-top: 10%;
        width: 60%;
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        color: #494747;
        font-weight: 100 !important;
        gap: 0.2px !important;
    }
}
@media screen and (max-width: 979px) {
    .--card-info {
        width: 78%;
    }
    .flexible-container {
        width: 60%;
    }
}
@media screen and (max-width: 768px) {
    .--card-info {
        width: 65%;
    }
    .flexible-container {
        width: 70%;
    }
    .countdown-textGroup{
        width: 90%  !important;
        margin-top: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }
    .ticket-detail-wrapper-grid{
        margin-top: 30%;
    }
}
@media screen and (max-width: 576px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 95%;
    }
    .flexible-container {
        width: 80%;
    }
    .card-groups {
        width: 100%;
        margin: auto;
    }
    .error-page {
        padding: 7rem 1rem;
    }
    .scroll-item{
        width: 100%;
    } 
    
    .horizontal-scroll::-webkit-scrollbar {
        height: 3px !important;
    }
    
      .horizontal-scroll.show-scrollbar::-webkit-scrollbar {
        height: 15px !important;
    }
    
      .horizontal-scroll::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
      .horizontal-scroll::-webkit-scrollbar-thumb {
        background: #ccc !important;
        border: none !important;
    }
    
      .horizontal-scroll::-webkit-scrollbar-thumb:hover {
        background: #aaa !important;
    }

    
}
@media screen and (max-width: 440px) {

}

.horizontal-scroll::-webkit-scrollbar {
    height: 10px;
    transition: height 0.3s ease;
  }

  .horizontal-scroll.show-scrollbar::-webkit-scrollbar {
    height: 15px;
  }

  .horizontal-scroll::-webkit-scrollbar-track {
    background: linear-gradient(to right , rgb(235, 233, 233), rgb(234, 234, 235), rgb(236, 236, 237));
    border-radius: 10px;
  }

  .horizontal-scroll::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
    border: 2px solid #f0f0f0;
  }

  .horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #3BAFAB;
  }