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

:root {
    --primary-color: #046F4C;
    --primary-color-rgb: 4, 111, 76;

    --light-primary-color: #6DAF35;
    --light-primary-color-2: #a3f169;

    --dark-primary-color: #006E4B;
    --dark-primary-color-rgb: 0, 110, 75;
    --red-color: #D61A1E;
    --red-color-rgb: 214,26,30;

    --dark-color: #242424;
    --dark-green-rgb: 36,36,36;
    --white-color: #e7e7e7;
    --white-color-rgb: 231,231,231;
    
    --page-background-color: #fafafa;

    --text-font-family: 'Montserrat';
    --white-text-color: var(--white-color);
    --dark-text-color: var(--dark-color);
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/montserrat.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    width: 100%;
    height: 100%;
    font-size: 62.5%; /*10px*/
    scroll-behavior: smooth;
}

body {
    font-size: 1rem;
    font-family: var(--text-font-family), sans-serif;
    color: var(--dark-text-color);
    min-height: calc(100vh - calc(100vh - 100%));
    background-color: var(--page-background-color);
    overflow-x: hidden;
}

header, main, footer {
    width: 100%;
    position: relative;
    z-index: 999;
}

nav {
    position: relative;
    z-index: 2;
    background-color: var(--primary-color);
    padding: 0 1.5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px;
}

nav {
    height: calc(6rem + .9vw);
}

nav .branding-logo {
    width: auto;
    height: calc(2.1rem + 1.3vw);
    transform: translateY(-4px);
}

img {
    max-width: 100%;
    display: block;
}

button:focus,
button:active {
    outline: none;
}

a,a:visited {
    text-decoration: none;
    color: inherit;
    transition: color .15s ease;
}

a.text-light-primary:hover
 {
    color: var(--dark-primary-color) !important;
}

a.text-hover-light-primary:hover {
    color: var(--light-primary-color);
}

h1 {
    font-size: calc(2rem + 1vw);
}

button:focus {
    outline: none !important;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 0 2em;
}

.card,
.card-header,
.card-body,
.card-footer {
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.login-page .login-section,
.register-page .register-section {
    width: clamp(300px, 400px, 85vw) !important;
    margin-left: auto;
    margin-right: auto;
}

.loader0 {
    width: 4rem;
    height:  4rem;
    border: 5px solid rgb(50, 174, 134, 1);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

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

.loader1 {
    width: 20vw;
    height: 20vw;
    max-width: 80px;
    max-height: 80px;
    background: linear-gradient(
      165deg,
      rgba(255, 255, 255, 1) 0%,
      rgb(220, 220, 220) 40%,
      rgb(170, 170, 170) 98%,
      rgb(10, 10, 10) 100%
    );
    border-radius: 50%;
    position: relative;
}

.loader1:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border-bottom: 0 solid #ffffff05;
    box-shadow: 0 -10px 20px 20px #ffffff40 inset,
      0 -5px 15px 10px #ffffff50 inset, 0 -2px 5px #ffffff80 inset,
      0 -3px 2px #ffffffbb inset, 0 2px 0px #ffffff, 0 2px 3px #ffffff,
      0 5px 5px #ffffff90, 0 10px 15px #ffffff60, 0 10px 20px 20px #ffffff40;
    filter: blur(3px);
    animation: 2s rotate linear infinite;
}

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

header nav {
    margin-top: 2.4rem;
}

header nav .nav-icon  {
    width: 2.5em;
    height: 2.5em;
}

.loader2 {
    width: 100%;
    height: 5px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.loader2::after {
    content: '';  
    box-sizing: border-box;
    width: 0;
    height: 5px;
    background: var(--white-color);
    position: absolute;
    top: 0;
    left: 0;
    animation: animFw 10s linear infinite;
}

@keyframes animFw {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.loader3 {
    width: 6rem;
    aspect-ratio: 1.14;
    --primary-color: #6DAF35;
    --c1: conic-gradient(from 150deg at top, var(--primary-color) 2deg 59deg, #0000 61deg);
    --c2: conic-gradient(from -30deg at bottom, var(--primary-color) 2deg 59deg, #0000 61deg);
    background:
            var(--c1) top,
            var(--c1) bottom right,
            var(--c2) bottom,
            var(--c1) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    animation: l37 1s infinite, colorChange 2s infinite linear alternate;
}

@keyframes l37 {
    80%, 100% {
        background-position: bottom right, bottom left, bottom, top;
    }
}

@keyframes colorChange {
    0%, 100% {
        --primary-color: #6DAF35;
    }
    50% {
        --primary-color: #D61A1E;
    }
}

.no-size {
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
}


.form-control,
.form-select {
    color: var(--white-text-color);
    font-size: 1.35em;
    width: 100%;
    background-color: transparent;
    height: 3.8em;
    border-width: 0;
    border-bottom: 1px solid #c9c9c9;
    border-radius: 0;
    transition: border-color .4s ease;
    font-weight: 500;
}

.form-control.text-dark {
    border-bottom-color: #7b7b7b;
}

textarea {
    border: 1px solid #c9c9c9;
}

textarea.text-dark {
    border: 1px solid #7b7b7b;
}

.form-control:focus,
.form-select:focus {
    color: var(--white-text-color);
    background-color: transparent;
    box-shadow: unset;
}
      
.form-control:focus {
    border-color: var(--white-color);
}

.form-control[type="password"] {
    padding-right: 3.5rem !important;
}

.form-group svg {
    width: 2.2em;
    height: 2.2em;
    transition: all .4s ease;
}

.form-group svg.floating-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.form-control::placeholder {
    color: rgba(var(--white-color-rgb), .6);
}

.form-control.text-dark::placeholder {
    color: rgba(0,0,0, .4);
}

.form-control:focus + svg.icon .fill-white,
.form-control:not(:placeholder-shown) + svg.icon .fill-white {
    fill: #fff;
}

.form-control:focus + svg.icon .stroke-white,
.form-control:not(:placeholder-shown) + svg.icon .stroke-white {
    stroke: #fff;
}

.form-group svg > * {
    transition: all .4s ease;
}

.form-group svg .fill-white{
    fill: rgba(var(--white-color-rgb), .75);
}

.form-group svg .stroke-white {
    stroke: rgba(var(--white-color-rgb), .75);
}

.form-group svg.start {
    left: 1rem;
}

.form-group svg.end {
    right: 1rem;
}

.news-card {
    border-radius: 6px;
    border: 1px solid #e9e9e9;
    overflow: hidden;
    min-height: 24rem;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.news-card .card-body {
    background: rgba(0,0,0,.7);
}

.news-card .news-date {
    position: absolute;
    top: 0;
    right: 20px;
    width: calc(6rem);
    height: calc(8rem + .8vw);
    background-color: rgba(var(--red-color-rgb), .75);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 65%, 0 100%);
    padding-top: 1.2rem;
}

.news-card .news-date b {
    font-weight: 900;
    margin-bottom: .25rem;
}

.news-card .news-date span {
    font-weight: 500;
}

.news-card .card-body {
    width: 100%;
    min-height: 10rem;
    justify-content: space-between;
}

.news-card .card-image img{
    transition: transform .2s ease;
}

.news-card .card-image:hover img {
    transform: scale(1.1);
}

.eye-icon {
    width: 2.75em;
    aspect-ratio: 1;
    transition: all .1s ease;
}

.eye-icon:hover path{
    stroke: #fff;
}

.carousel-item {
    max-height: 50rem;
}

.show-starts-in {
    font-size: calc(1.8rem + .2vw);
}

.btn:disabled {
    opacity: .7;
    pointer-events: none;
}

.btn {
    border-radius: 10em;
    text-transform: uppercase;
    display: block;
    position: relative;
    padding: 1.2em 3rem;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transition: all .2s ease;
}

.btn-primary:not(.btn-animated) {
    transition: filter .2s ease;
}

.btn-primary:not(.btn-animated):hover {
    filter: brightness(1.3);
}

.btn.btn-animated:focus {
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2) !important;
}

.btn.btn-animated::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10em;
    transition: all .55s ease;
    z-index: -1;
}

.btn.btn-animated:hover {
  transform: translateY(-3px);
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
}

.btn.btn-animated:hover::after {
  transform: scaleX(1.1) scaleY(1.4);
  opacity: 0;
}

.btn.btn-animated:active {
  transform: translateY(-1px);
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
}

.btn.btn-light-primary {
    background-color: var(--light-primary-color);
    color: #fff;
}

.btn.btn-white {
  background-color: var(--white-color);
  color: #000;
}

.btn.btn-white:not(.btn-outlined)::after {
  background-color: var(--white-color);
}

.btn.btn-dark:not(.btn-outlined)::after {
    background-color: #000;
}

.btn.btn-primary:not(.btn-outlined)::after {
    background-color: var(--primary-color);
}

.btn.btn-danger:not(.btn-outlined)::after {
    background-color: var(--red-color);
}

.btn-danger.btn-outlined {
    background-color: transparent;
    color: var(--red-color);
}

.btn-danger.btn-outlined:hover {
    background-color: var(--red-color);
    color: #fff;
}

.btn.btn-light-primary:not(.btn-outlined)::after {
    background-color: var(--light-primary-color);
}

.btn.btn-white.btn-outlined {
    background-color: transparent;
    border: 1px solid var(--white-color);
    color: var(--white-color);
}

.border-primary {
    border-color: var(--primary-color) !important;
}
.btn-back {
    background-color: rgba(0,0,0,.1);
    transition: all .15s ease;
}

.btn-back svg {
    width: calc(2.8em + .25vw);
    aspect-ratio: 1;
}

.btn-back:hover {
    background-color: rgba(0,0,0,.2);
}

span.arena-discount {
    font-size: calc(1.2rem + .25vw);
}
span.arena-discount-status {
    font-size: calc(1rem + .15vw);
}

.btn-voice-permission {
    --green-color: #13c51c;
    --size: calc(3.5rem + .15vw);
    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    min-height: var(--size);
    color: var(--green-color);
    border: 2px solid var(--green-color);
    transition: all .15s ease;
    box-shadow: unset !important;
}

.btn-voice-permission.enabled,
.btn-voice-permission:hover {
    background-color: #13c51c !important;
    color: #fff !important;
}

.btn-voice-permission svg {
    width: 90%;
    height: 90%;
}

.footer {
    font-size: 1em;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 6.6em;
    max-width: 100%;
    background-color: var(--primary-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    z-index: 999;
}

.footer-nav {
    font-size: 1.3em;
    font-weight: 500;
}

.has-footer-nav main {
    padding-bottom: 12em;
}

.footer-nav .nav-item,
.footer-nav .nav-item .nav-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 3;
}

.footer-nav .nav-item .nav-link small {
    font-size: calc(1.07rem + .015vw);
}

.footer-nav .nav-item .nav-link svg {
    width: 1.6em;
    height: 1.6em;
}

.footer-nav .nav-link .nav-icon {
    padding: 1em;
    border-radius: 50%;
}

.footer-nav .nav-link .nav-icon-box {
    border-radius: 50%;
}

.footer-nav .nav-link:not(.empty-link).active small {
    display: none;
}

.footer-nav .nav-link:not(.empty-link).active .nav-icon-box  {
    padding: 1.4em;
    background-color: var(--red-color);
    box-shadow: 0 0px 20px rgba(204, 204, 204, 0.397);
}

.footer-nav .nav-link:not(.empty-link).active .nav-icon {
    transform: translateY(-44%);
    padding: .8rem !important;
    /* transition: transform .4s .2s ease-out, background-color .3s .4s ease-out; */
}

.footer-nav .nav-item .nav-link:not(.empty-link).active svg {
    width: 1.75em;
    height: 1.75em;
}

.footer-nav .nav-link:not(.empty-link).active .stroke-white {
    stroke: #000;
}

.footer-nav .nav-link:not(.empty-link).active .stroke-white {
    stroke: #fff;
} 

.footer-nav .nav-link:not(.empty-link).active .fill-white {
    fill: #000;
}

.footer-nav .nav-link:not(.empty-link).active .fill-white {
    fill: #fff;
}

.footer-nav .nav-link::after {
    transition: all .15s ease;
}

.footer-nav a.nav-link::after {
    opacity: 0;
}

.footer-nav .nav-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    background-color: rgba(0,0,0,.0);
    opacity: 0;
}

.footer-nav .nav-link:not(.active):hover::after,
.footer-nav .nav-link:not(.active):focus::after {
    opacity: 1;
}

.lights {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.light {
  background-color: var(--white-color);
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: flicker 1s infinite ease-in-out;
}

.icon-size-small {
    width: 2rem;
    height: 2rem;
}

.icon-size-medium {
    width: 2rem;
    height: 2rem;
}

.icon-size-large {
    width: 3rem;
    height: 3rem;
}

@keyframes flicker {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.profile-card {
    gap: 3rem;
}

.profile-img-box {
    width: 9rem;
    height: 9rem;
    background-color: var(--primary-color);
    position: relative;
}

.profile-img-box svg {
    width: 90%;
    height: 90%;
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--page-background-color);
}

.profile-user-name {
    font-size: calc(2rem + .1vw);
    font-weight: 900;
}

.profile-user-email {
    font-size: calc(1.4rem + .1vw);
    color: #787878;
    font-weight: 500;
}

.profile-info-box {
    font-size: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 1.5rem;
}

.profile-info-box li:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.profile-info-box,
.profile-info-box li:not(:last-child) {
    border-color: #b4b4b4;
}

.profile-info-item svg {
    width: 2em;
    min-width: 2em;
    margin-right: 1.75em;
}

.profile-info-item p {
    font-size: 1.3em;
    word-break: break-all;
}

.next-events-section .carousel .carousel-item img {
    min-height: 13rem;
    object-fit: cover;
}

hr:not([size]) {
    height: 2px;
    background-color: rgba(var(--white-color-rgb), .5) !important;;
}

hr.dark:not([size]) {
    height: 1px;
    background-color: rgba(0,0,0, .7) !important;;
}


.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
    width: 100%;
    background-color: #eeeeee;
    padding-left: calc(3rem + .15vw) !important;
    padding-right: calc(3rem + .15vw) !important;
    border: unset;
}

.modal .btn-close {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    color: #fff;
    transition: all .15s ease;
    box-shadow: unset;
    filter: unset !important;
    opacity: 1;
}

.modal .btn-close.btn-close-primary {
    background-color: rgba(var(--dark-primary-color-rgb), .6);
}

.modal .btn-close svg {
    width: 100%;
    height: 100%;
}

.modal .btn-close.btn-close-primary:hover {
    background-color: rgba(var(--dark-primary-color-rgb), 1) !important;
}

.modal .btn-close.btn-close-muted:hover {
    background-color: rgba(51, 51, 51, 0.08);
}

.modal .btn-close.btn-close-white,
.modal .btn-close.btn-close-white:hover {
    background-color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.modal .modal-halfscreen .modal-content {
    border-top-right-radius:  5rem;
    border-top-left-radius: 5rem;
}

.modal .modal-dialog:not(.modal-halfscreen) .modal-content {
    border-radius: 1.2rem !important;
}
.modal.new-ticket-modal {
    top: 100%;
    max-width: 100vw;
}

.modal.new-ticket-modal.show {
    transform: unset;
    transition: top .15s linear;
    top: 0;
}

.new-ticket-modal.show {
    display: flex !important;
}

.new-ticket-modal:not(.show) {
    display: none;
}

.modal .modal-halfscreen .modal-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.modal .modal-halfscreen .modal-body img {
    object-fit: cover;
}

.carousel {
    background-color: rgba(var(--dark-green-rgb), .15);
}

.voice-permission-icon {
    width: 10rem;
    height: 10rem;
    background-color: rgba(var(--dark-primary-color-rgb), .2);
    color: var(--dark-primary-color);
}

.voice-permission-status {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(25%, 30%);
    border-radius: 50%;
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.voice-permission-status .status-icon {
    width: 50%;
    height: 50%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
}

.voice-permission-status.disabled {
    background-color: var(--red-color);
}

.voice-permission-status.disabled .status-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill="%23fff" viewBox="0 0 1792 1792"><path d="m1082.2 896.6 410.2-410c51.5-51.5 51.5-134.6 0-186.1s-134.6-51.5-186.1 0l-410.2 410L486 300.4c-51.5-51.5-134.6-51.5-186.1 0s-51.5 134.6 0 186.1l410.2 410-410.2 410c-51.5 51.5-51.5 134.6 0 186.1 51.6 51.5 135 51.5 186.1 0l410.2-410 410.2 410c51.5 51.5 134.6 51.5 186.1 0 51.1-51.5 51.1-134.6-.5-186.2l-409.8-409.8z"/></svg>');
}

.voice-permission-status.enabled {
    background-color: var(--light-primary-color);
}

.voice-permission-status.enabled .status-icon {
    width: 70%;
    height: 70%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 12 2.89075 2.8907v0c.06039.0603.15825.0604.21865 0v0L17 8"/></svg>');
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-danger {
    background-color: var(--red-color) !important;
}

.bg-dark-primary {
    background-color: var(--dark-primary-color);
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-light-primary {
    color: var(--light-primary-color) !important;
}

.text-light-primary-2 {
    color: var(--light-primary-color-2) !important;
}

.text-white {
    color: var(--white-text-color) !important;
}

.text-white-75 {
    color: rgba(255,255,255,.75) !important;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-unset {
    flex: unset;
}

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

.fill-white {
    fill: var(--white-color);
}

.stroke-dark {
    stroke: var(--dark-text-color);
}

.fill-dark {
    fill: var(--dark-text-color);
}

.box-shadow {
    box-shadow: 0 0 20px #00000026 !important;
}

.text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-ellipsis-1 {
    -webkit-line-clamp: 1;
}

.text-ellipsis-2 {
    -webkit-line-clamp: 2;
}

.text-ellipsis-4 {
    -webkit-line-clamp: 4;
}

.mn-w-250 {
    min-width: 250px;
}

.mx-w-300 {
    max-width: 30rem !important;
}

.mx-w-350 {
    max-width: 35rem !important;
}

.mx-w-450 {
    max-width: 45rem !important;;
}

.rounded-4 {
    border-radius: .4rem;
}

.rounded-5 {
    border-radius: .5rem;
}

.filter-gray-1 {
    filter: grayscale(1);
}

.text-ident-3 {
    text-indent: calc(3rem + .2vw);
} 

.cP {
    cursor: pointer;
}

.skeleton {
    background: linear-gradient(110deg, #e5e5e5 8%, #f0f0f0 18%, #e5e5e5 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: .25rem;
    z-index: 2;
}

.skeleton.vertical {
    background: linear-gradient(180deg, #e5e5e5 8%, #f0f0f0 18%, #e5e5e5 33%);
    background-size: 100% 200%;
    animation: 2s shine-vertical linear infinite;
    border-radius: .5rem;
}

.skeleton-text {
    height: 1rem;
    width: 80%;
    margin-top: 1rem;
    background: linear-gradient(110deg, #e5e5e5 8%, #f0f0f0 18%, #e5e5e5 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: .25rem;
}


@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

@keyframes shine-vertical {
    to {
        background-position-y: -200%;
    }
}


.font-family-mono {
    font-family: "Roboto Mono", "Menlo", "Consolas", "Courier New", "Droid Sans Mono", "SF Mono", "Lucida Console", monospace;          
}

.fill-white {
    color: var(--white-color);
}

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

.lh-1 {
    line-height: 1;
}

.lh-175 {
    line-height: 1.75;
}

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

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

.hex-grid-background::before {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    background-image: url("assets/img/hexGrid.svg");
    background-repeat: repeat;
    background-size: 50vw auto;
    background-attachment: fixed;
    opacity: .65;
}

.hex-grid-background::after {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(var(--dark-primary-color-rgb), .97);
}

.btn-mh-6 {
    min-height: 6rem;
}

.btn-mh-5 {
    min-height: 5rem;
}

.btn-shadow-1 {
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}


.light-show-page .branding-logo,
.login-page .branding-logo,
.register-page .branding-logo {
    width: 25rem;
    max-width: 70vw;
}

.sidebar {
    width: 380px;
    max-width: clamp(250px, 300px, 75vw);
    height: calc(100vh - calc(100vh - 100%));
    overflow-y: auto;
    position: fixed;
    top: 0;
    background-color: #f8f9fa;
    transition: right .3s ease, left .3s ease;
    box-shadow: -4px 0 10px rgba(0,0,0,.1);
    z-index: 1062;
}

.btn-close-sidebar {
    min-width: 4rem;
    min-height: 4rem;
}

.sidebar .branding-logo {
    width: auto;
    height: auto;
    max-width: 70%;
}

.sidebar-header {
    height: calc(6rem + .9vw);
}

.sidebar.right {
    right: -420px;
}

.sidebar.left {
    left: -420px;
}

.sidebar.right.open {
    right: 0;
}

.sidebar.left.open {
    left: 0;
}

.sidebar-body .nav-link > * {
    line-height: 1;
    transition: all .15s ease;
}

.sidebar-body .nav-link {
    background-color: rgba(3, 132, 35, 0.1);
    border-radius: 1rem;
    color: var(--primary-color);
    font-weight: 600 !important;
}

.sidebar-body .nav-link svg {
    width: calc(2.3rem + .15vw);
    height: calc(2.3rem + .15vw);
}

.sidebar-body .nav-link:hover {
    background-color: rgba(3, 132, 35, 0.2);
}

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1061;
    width: 100vw;
    height: 100vh;
    opacity: .5;
    background-color: #22292f;
    display: none;
}

.page-overlay.show {
    display: block;
}

.section-title {
    font-size: calc(2rem + .5vw);
}

.section-paragraph {
    font-size: calc(1.35rem + .6vw);
    font-weight: 500;
}

.no-content-msg {
    font-size: calc(1.3rem + .5vw);
}

.custom-carousel {
    width: 100%;
   /* height: 25vh;*/
   /* min-height: 18rem;*/
    max-height: 55rem;
    box-shadow: 0 -4px 10px rgba(0,0,0,.05) inset;
}

.custom-carousel-inner {
    display: flex;
    transition: transform 0.6s ease;
    height: 100%;
}

.custom-carousel-item {
    flex: 0 0 100%;
    height: 100%;
/*    background-color: #efefef;*/
    background-color: #003521;
}

.custom-arrow {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    width: calc(4rem + .8vw);
    height: calc(4rem + .8vw);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    user-select: none;
    transition: background 0.3s;
    padding: .8rem;
}

.custom-arrow svg {
    width: 100%;
    height: 100%;
}

.custom-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.custom-arrow.left {
    left: 4%;
}

.custom-arrow.left svg {
    transform: rotate(180deg);
}

.custom-arrow.right {
    right: 4%;
}

.custom-carousel-tabs {
    width: 92%;
    z-index: 2;
}

.custom-carousel-tab {
    width: 33%;
    height: calc(3px + .2vw);
    background-color: rgba(241, 241, 241, 0.3);
    overflow: hidden;
    border-radius: calc(2px + .2vw);
    position: relative;
    cursor: pointer;
    transition: background-color .1s ease ;
}

.custom-carousel-tab:hover {
    background-color: rgba(241, 241, 241, 0.45);
}

.custom-carousel-tab + .custom-carousel-tab {
    margin-left: calc(10px + 1vw);
}

.custom-carousel-tab::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: white;
    transition: width linear;
}

.custom-carousel-tab.active::after {
    animation: fillTab 5s linear forwards;
}

@keyframes fillTab {
    0% { width: 0%; }
    100% { width: 100%; }
}


@keyframes blink {
    0% {
        opacity: 1;
    }
    100% {
        opacity: .5;
    }
}

.input-effect {
    width: 100%;
    position: relative;
    margin: 5rem 0;
}

.input-effect-1 ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: .4s;
}

.input-effect-1.invalid ~ .focus-border {
    background-color: var(--red-color) !important;
}

.input-effect-1 ~ .focus-border.bg-dark {
    background-color: rgba(99, 99, 99, 0.43) !important;
}

.input-effect-1:focus ~ .focus-border,
.has-content.input-effect-1 ~ .focus-border{
    width: 100%;
    transition: .4s;
    left: 0;
}

.input-effect-1 ~ label{
    position: absolute;
    left: 0;
    width: 100%;
    top: 10px;
    color: rgba(255, 255, 255, 0.7);
    transition: .3s;
    z-index: 1;

    pointer-events: none;

}

.input-effect-1 ~ label.text-dark {
    color: #878787 !important;
}

.input-effect-1:focus ~ label,
.has-content.input-effect-1  ~ label {
    pointer-events: none;

    top: -1.4rem;
    font-size: 1.4rem;
    transition: 0.3s;
    color: #fff;
}

.eye-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    width: 3.2rem;
    height: 3.2rem;
    stroke: rgba(255,255,255,.3);
    padding: .5rem 0 .5rem .5rem;
    cursor: pointer;
}

.eye-icon:hover {
    transition: all .2s ease;
    stroke: #fff;
}

.password-input {
    padding-right: 6rem !important;
}


.form-control {
    height: 5rem;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.4);
    border-radius: 0;
    background-color: transparent;
    font-weight: normal !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #ebebeb;
    pointer-events: none;
    opacity: 1 !important;
}

.form-control:disabled::placeholder, .form-control[readonly]::placeholder {
    color: #333;
}

.form-select {
    border: 1px solid #fff;
    border-radius: .5rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}

.form-control,
.form-label {
    font-size: 1.6rem;
    color: rgb(86, 92, 105);
}

.form-control:not([readonly], :disabled, .disabled):focus {
    border-color: var(--primary-color) !important;
}

.form-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.form-label svg {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    margin-right: 1rem;
}

.form-label svg path,
.form-label svg circle {
    transition: .3s;
}

.form-control[readonly] {
    pointer-events: none;
}

.form-control:not([readonly], :disabled, .disabled):focus {
    background-color: transparent;
}

.form-control:focus {
    outline: none;
    box-shadow: unset;
}

.form-control-2 {
    border: 1px solid #7b7b7b !important;
    padding: 0 2rem !important;
    border-radius: .25rem !important;
}


.error-box {
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .25s ease;
    opacity: 0;
    transform: translateY(28px);
}

input.invalid ~ .error-box {
     opacity: 1;
     transform: translateY(35px);
}

input.invalid,
select.invalid {
    border-color: var(--red-color) !important;
}


.no-auto-fill input:-webkit-autofill,
.no-auto-fill input:-webkit-autofill:hover,
.no-auto-fill input:-webkit-autofill:focus,
.no-auto-fill input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px rgba(242, 242, 242, 0.01);
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* vertical line */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: rgba(236, 236, 236, 0.75);
    top: 0;
    bottom: 0;
    left: 22px;
}

.timeline.timeline-0::after {
    content: unset;
}

.timeline-item {
    padding: 0 5px 10px 64px;
    position: relative;
    margin-top: calc(2.5rem + 4vw) !important;
    background-color: inherit;
    width: 100%;
}

.timeline-item:last-child {
    padding-bottom: 0 !important;
}

.timeline-content {
    background-color: #ffffff;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e9e9e9;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
}

.timeline-content h3 {
    font-size: calc(1.55rem + .2vw);
    line-height: 1.3;
    margin-bottom: calc(.5rem + .3vw);
}

.timeline-content p {
    font-size: calc(1.3rem + .1vw);
    line-height: 1.75;
    margin-bottom: calc(1.2rem + .5vw);
}

.timeline-content a.more-infos  {
    font-size: calc(1.3rem + .1vw);
}

.timeline-content a.more-infos svg {
    width: calc(2rem + .1vw);
    height: calc(2rem + .1vw);
    margin-left: .5rem;
}

.timeline-padding {
    padding: calc(1.2rem + .5vw);calc(1.5rem + .4vw);
}

.timeline-date {
    position: absolute;
    width: calc(5rem + .6vw);
    height: calc(5rem + .6vw);
    top: 0;
    left: 0;
    background-color: var(--light-primary-color);
    border-radius: 50%;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.timeline-date b {
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    margin-bottom: .35rem;
    color: #fff;
}

.timeline-date span {
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: #fff;
}

.timeline-img.skeleton {
    height: calc(10rem + 1vw);
}

.timeline-img img {
    transition: all .3s ease;
    backface-visibility: hidden;
    transform-origin: center;
    perspective: 1000px;
}

.timeline-img:hover + .timeline-padding h3 a {
    color: var(--light-primary-color);
}

.manager-box {
    width: 100%;
    padding: 2.5rem;
    background-color: #FBFCFF;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .8rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.manager-sidebar-menu .card-header .card-background {
    min-height: 8rem;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}

.manager-sidebar-menu .card-header .rounded-img {
    width: 7.5rem;
    height: 7.5rem;
    position: absolute;
    top: 3.5rem;
    left: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FAF7FF;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    z-index: 2;
}

.tab-box {
    padding: 2.4rem;
    border: 1px solid #ebe9f1 !important;
    border-radius: .7rem;
}

.nav-tabs-2 .nav-link::after {
    content: none !important;
}

.nav-tabs-2 .nav-item {
    border-radius: .5rem;
}

.nav-tabs-2 .nav-item + .nav-item {
    margin-top: 1rem;
}

.nav-tabs-2 .nav-link {
    display: flex;
    align-items: center;
    padding: 1.7rem;
    background-color: transparent;
    border-radius: .4rem;
    border: 1px solid rgba(43, 43, 43, 0.1);
    color: #464646;
}

.nav-tabs-2 .nav-link:not(.empty-link).active {
    background-color: rgba(var(--primary-color-rgb), .2);
    color: var(--primary-color) !important;
    border: 1px solid rgba(var(--primary-color-rgb), .2);
}

.nav-tabs-2 .nav-link .right-arrow {
    min-width: 1.7rem;
    min-height: 1.7rem;
}

.nav-tabs-3 .nav-link::after {
    content: none !important;
}

.nav-tabs-3 .nav-item {
    border-radius: .5rem;
    border: unset !important;
}

.nav-tabs-3 .nav-link {
    display: flex;
    align-items: center;
    padding: 1.3rem 1.7rem;
    background-color: transparent;
    border-radius: .6rem;
    color: #464646;
    font-weight: bold;
    font-size: 1.3rem !important;
}

.nav-tabs-3 .nav-link:not(.empty-link).active,
.nav-tabs-3 .nav-link:not(.empty-link):hover{
    background-color: rgba(113, 255, 131, 0.15);
    color: var(#fff) !important;
}



.upload-area {
    border: 2px dashed  rgba(var(--primary-color-rgb), .7);
    background-color: rgba(var(--primary-color-rgb), .05);
    color:  rgba(var(--primary-color-rgb), .6);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.upload-area:hover {
    background-color: rgba(var(--primary-color-rgb), .14);
    border-color:  rgba(var(--primary-color-rgb), 1);
}

.upload-area input[type="file"] {
    display: none;
}

.upload-icon  {
    width: 3rem !important;
    height: 3rem !important;
    margin-left: auto;
    margin-right: auto;
    color:  rgba(var(--primary-color-rgb), 1);
}

.upload-instruction {
    font-size: calc(1.2rem + .05vw);
    font-weight: 600;
    color: #1e293b;
}

.upload-subtext {
    font-size: calc(1.1rem + .05vw);
    color: #64748b;
    margin-top: 0.25rem;
}

.dataTables_wrapper {
    width: 100%;
}

.datatable-header {
    margin: 0 !important;
}

.dataTables_filter,
.dataTables_length {
    margin-bottom: .75rem;
}

.datatable-header .dataTables_filter input,
.datatable-header .dataTables_length select {
    font-size: 1.2rem !important;
    min-height: 50px;
}

.dataTables_filter {
    padding: 0;
}

.dataTables_filter,
.dataTables_filter label,
.dataTables_filter label input[type="search"] {
    width: 100%;
    max-width: 35rem;
}

.dataTables_filter label input[type="search"] {
    padding: 0 1.5rem;
}

div.dataTables_wrapper div.dataTables_length .form-select {
    min-width: 6.4rem;
    padding: 0 0 0 1rem;
    background-position: calc(100% - 1rem) 50%;
}

.dataTables_length label span {
    font-size: 1.2rem !important;
    font-weight: 500;
}

div.dataTables_wrapper div.dataTables_filter select, div.dataTables_wrapper div.dataTables_length select {
    background-position: 3rem;
}

table tfoot th, .table thead th {
    font-size: 1.2rem !important;
    color: #545454;
}

table tbody tr td {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.paginate_button.current {
    margin: 0 1rem ;
}

div.dataTables_wrapper .dataTables_info {
    padding-top: 0 !important;
    color: #1a1e21;
}

.datatable-footer {
    margin-top: 1.5rem;
}

.datatable-scroll tr td {
    font-size: 1.286rem !important
}

.datatable-footer > * {
    font-size: 1.2rem !important;
}

.dataTables_paginate,
.dataTables_paginate span {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.paginate_button.previous,
.paginate_button.next {
    margin: 0 1.25rem;
}

.paginate_button:not(.next, .previous) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 3rem;
    border-radius: .4rem;
    font-weight: bolder;
    margin: 0;
    transition: all .15s ease;
}

.paginate_button.current {
    background-color: var(--primary-color);
    color: #fff;
}

.paginate_button:not(.current, .next, .previous):hover {
    background-color: rgba(var(--primary-color-rgb), .075);
}

.table > :not(caption) > * > * {
    padding: 1.5rem 2rem !important;
}

table.dataTable.stripe > tbody > tr:nth-child(2n+2) > *,
table.dataTable.display > tbody > tr:nth-child(2n+2) > * {
    box-shadow: inset 0 0 0 9999px rgba(243, 242, 247, 0.68);
}

.datatable-header input,
.datatable-header select {
    border: 1px solid #7b7b7b;
    background-color: transparent;
    transition: all .4s ease;
    padding: 1.6rem 2.2rem;
    color: #1a1e21;
    box-shadow: unset !important;
    border-radius: .5rem;
}

.datatable-header select {
    padding: 1.6rem .4rem;
    text-align: center;
    margin: 0 1rem;
}

.datatable-header input:focus,
.datatable-header select:focus {
    border-color: var(--primary-color) !important;
    outline: none;
}

.datatable-footer .paginate_button  {
    cursor: pointer;
}

.datatable-footer .paginate_button:not(.current):hover {
    color: var(--primary-color) !important;
}

#bubble, #showImg,#flashlightball {
    transition: .5s;
}
#lightShow {
    transition: .1s;
}

#bubble.active{
    transform: scale(1.4);
}
#flashlightball.active{
    transform: scale(1.4);
}

.letter-spacing-1 {
    letter-spacing: .4rem;
}

.manage-page .container {
    max-width: 1440px;
}

.banner-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow: hidden;
    border-radius: .5rem;
}

.banner-item {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.banner-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.15);
    transition: background-color .2s ease;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.banner-item:hover img {
    transform: scale(1.07);
}

.banner-item:hover::after {
    background-color: rgba(0,0,0,.05);
}

.form-switch .form-check-label .switch-icon-left,
.form-switch .form-check-label .switch-icon-right {
    display: flex;
    width: 13px;
    height: 13px;
    top: calc(50% - 6.5px);
}

.form-switch .form-check-input:not(:checked) {
    background-color: #e2e2e2;
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color) !important;
}

.form-switch .form-check-input:focus {
    outline: none;
    box-shadow: unset;
    color: #fff !important;
    border-color:  #d8d6de;
}

.form-check-input {
    width:2rem;
    height: 2rem;
    margin-right: 1rem;
    margin-top: 0.0825rem;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border:  1px solid #d8d6de;
    appearance: none;
    color-adjust: exact;
    transition: all .15s ease;
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-label {
    user-select: none;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check .form-check-input:not(:checked):focus {
    border-color: #d8d6de;
}

.form-check .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input {
    height: 2.5rem;
    width: 5rem;
    float: left;
    margin-left: -3.5rem;
    background-image: url("data:image/svg+xml,%3csvg width='26px' height='26px' viewBox='0 0 26 27' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3ccircle id='path-1' cx='8' cy='8' r='8'%3e%3c/circle%3e%3cfilter x='-40.6%' y='-21.9%' width='168.8%' height='168.8%' filterUnits='objectBoundingBox' id='filter-2'%3e%3cfeOffset dx='-1' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'%3e%3c/feOffset%3e%3cfeGaussianBlur stdDeviation='1.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'%3e%3c/feGaussianBlur%3e%3cfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0' type='matrix' in='shadowBlurOuter1'%3e%3c/feColorMatrix%3e%3c/filter%3e%3c/defs%3e%3cg id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='switches-dot' transform='translate%285.000000, 5.000000%29' fill-rule='nonzero'%3e%3cg id='Oval'%3e%3cuse fill='black' fill-opacity='1' filter='url%28%23filter-2%29' xlink:href='%23path-1'%3e%3c/use%3e%3cuse fill='%23fff' xlink:href='%23path-1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 3rem;
    transition: background-position 0.15s ease-in-out, background-color 0.1s ease;
}

.wallet-page .section-paragraph {
    position: relative;
    z-index: 2;
}

.ticket {
    width: 100%;
    height: 100%;
    position: relative;
}

.ticket + .ticket {
    margin-top: 4rem;
}

.holes-top {
    width: 100%;
    position: relative;
}

.holes-top span {
    height: 0;
    width: 0;
    border: 5rem solid var(--page-background-color);
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.holes-top span:nth-child(1) {
    left: 0;
    border-left-width: 0;
    border-top-width: 0;
    transform: translate(-40%, -50%);
}

.holes-top span:nth-child(2) {
    left: 50%;
    border-width: 2.5rem;
    transform: translate(-50%, -50%);
}

.holes-top span:nth-child(3) {
    border-right-width: 0;
    border-top-width: 0;
    right: 0;
    transform: translate(40%, -50%);
}

.holes-lower {
    position: relative;
    margin: 2.5rem;
}

.cut-line {
    border-top: 3px solid transparent;
    border-image: repeating-linear-gradient(
            to right,
            #fff 0 6px,
            transparent 6px 24px
    ) 1;
}

.fw-600 {
    font-weight: 600;
}

.solid-line {
    width: 100%;
    height: 2px;
    display: block;
    background-color: #fff;
}

.ticket-line {
    width: 100%;
    border: 2px dashed #ffffff;
}

.holes-lower:before, .holes-lower:after {
    content: "";
    height: 5rem;
    width: 5rem;
    background-color: var(--page-background-color);
    position: absolute;
    border-radius: 50%;
}

.holes-lower:before {
    top: 0;
    left: 0;
    transform: translate(-80%, -50%);
}

.holes-lower:after {
    top: 0;
    right: 0;
    transform: translate(80%, -50%);
}

.ticket-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ticket-header {
    padding: 5rem 2.5rem 1rem;
}

.ticket-title {
    font-size: calc(2.2rem + .3vw);
    font-weight: 900;
    color: #fff;
}

.ticket-subtitle {
    font-size: calc(1.6rem + .1vw);
    margin-bottom: .4rem !important;
    font-weight: 500;
    color: #eee;
}

.ticket-body {
    padding-top: 1.5rem;
}

.ticket-img {
    min-height: 14rem;
    object-fit: cover;
}

.ticket-barcode-box {
    width: 100%;
    padding: 3.5%;
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
    background-color: #fff;
}

.ticket-barcode-box.parking-barcode {
    border-radius: .35rem;
}

.ticket-barcode-box img {
    width: 100%;
    min-height: 6rem;
    max-height: 6rem;
}

.ticket-body table {
    width: 100%;
    font-size: calc(1.4rem + .05vw);
}

.ticket-body table th {
    color: #d6d6d6;
}

.ticket-body table th,
.ticket-body table td {
    text-align: center;
    width: 33.33%;
}

.ticket-body table td {
    font-weight: 900;
    color: #fff;
    padding-bottom: 0 !important;
}

.ticket-body table + table {
    margin-top: 1.5rem;
}

.ticket-body .bigger {
    text-align: center;
    font-size: calc(2.8rem + .1vw);
    color: #fff;
}

.ticket-footer {
    padding: 2rem 2rem 0 2rem;
}

.wallet-section {
    width: 100%;
    min-height: 50vh;
    padding: 0 5vh;
}


.wallet-card {
    width: 100%;
    background: linear-gradient(30deg, #1c1c1c  40%, #262626);
    background-size: 100%;
    position: relative;
    overflow: hidden;
    padding: calc(1.5rem + .1vw);
    border-radius: 1rem;
    min-height: calc(18rem + 5vw);
    max-height: 25rem;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    border: 2px solid #131313;
}

.grand-bares-card::before,
.wallet-card::before {
    content: '';
    position: absolute;
    background-image: url("assets/img/grand-card-pattern.png") ;
    background-repeat: repeat;
    background-position: center;
    background-size: 200% 200%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    filter: brightness(0) invert(1);
    opacity: .4;
    z-index: 1;
}

.wallet-card-title {
    font-size: calc(1.5rem + 1vw);
    letter-spacing: .5rem;
    font-weight: 900 !important;
    line-height: 1.6 !important;
    transition: all .15s ease;
}

.wallet-card.my-tickets {
    background: #1650bf !important;
    border-color: #1650bf ;
}

.wallet-card-text {
    font-size: calc(1.3rem + .1vw);
}

.wallet-card-text .arrow-box {
    width: 4rem;
    height: 4rem;
    transition: all .15s ease;
}


.wallet-card:hover .arrow-box {
    background-color: #fff;
    color: #000;
}

.wallet-card:hover .wallet-card-title {
    color: #fff !important;
}

.wallet-card-text .arrow-box {
    background-color: rgba(255,255,255,.1);
    border-radius: 50%;
    padding: .3rem;
}

.wallet-card-content {
    max-width: 60%;
}

.wallet-card img,
.wallet-card .svg-logo {
    width: calc(7rem + 1vw);
    height: auto;
}

.grand-bares-card img  {
    width: 7.6rem;
}

.wallet-card.card-body {
    font-size: calc(1.4rem + .1vw);
}

.wallet-card .card-body span {
    color: #d1d1d1;
    margin-bottom: .75rem;
    font-weight: 700;
}

.wallet-card .card-body h3 {
    font-size: 3.3rem;
    font-weight: 900;
    color: #FAB413;
}

.parking-ticket .ticket-body > * {
    color: #fff;
}

.parking-ticket .bigger {
    font-size: calc(3.3rem + .1vw);
    font-weight: 900;
}

.alert-message-list {
    position: fixed;
    top: 3.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    height: auto;
    z-index: 9999;
    visibility: hidden;
}

.alert-message-list .alert-message-item {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 1.5em;
    background-color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    color: #fff !important;
    border-radius: .25rem;
    cursor: pointer;
    opacity: 0;
    transform: scale(.7);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-message-list .alert-message-item.show {
    animation: alert-fade-in .3s ease forwards;
}

.alert-message-list .alert-message-item p {
    font-size: 1.35rem  ;
}

.size-0 {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0   ;
}

.alert-message-list .alert-message-item.hidden {
    animation: alert-fade-out .3s ease forwards;
}

@keyframes alert-fade-in {
    0% {
        opacity: 0;
        transform: scale(.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes alert-fade-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.alert-message-list .alert-message-item:not(:last-child) {
    margin-bottom: 1.25rem;
}

.alert-message-list .alert-message-item .alert-msg-icon,
.alert-message-list .alert-message-item .alert-close-icon {
    width: 2.2rem;
}

.alert-message-list .alert-message-item.success-alert {
    background-color: rgba(43,220,114,1);
}

.alert-message-list .alert-message-item.warning-alert {
    background-color: rgba(248, 110, 26, 1);
}

.alert-message-list .alert-message-item.error-alert {
    background-color: var(--bs-danger);
}

.sound-editor-page {
    background-color: #F7F8FA;
}

.waveform-editor {
    min-height: 55vh;
    background-color: #F5F6F8;
    border-radius: 3rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 28px 0px, rgba(0, 0, 0, 0.1) 0 0 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    border: 1px solid rgba(0,0,0,.02);
}

.waveform-box {
    width: 100%;
    height: 136px;
    position: relative;
    border-radius: .5rem;
    overflow: hidden;
}

.waveform-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.ws-button {
    width: 4.2rem;
    min-width: 4.2rem;
    aspect-ratio: 1;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    cursor: pointer;
    transition: all .2s ease;
}

.ws-button:hover {
    background-color: #ececec;
}

.ws-button svg {
    width: 40%;
    aspect-ratio: 1;
    transition: inherit;
}

.ws-button.btn-play:hover {
    background-color: rgba(var(--primary-color-rgb), .08);
}

.ws-button.btn-play:hover svg {
    color: var(--primary-color);
}

.ws-button.btn-pause:hover {
    background-color: rgba(var(--red-color-rgb), .08);
}

.ws-button.btn-pause:hover svg {
    color: var(--red-color);
}

.ws-button.btn-loop {
    animation: unset;
}
.ws-button.btn-loop.active svg {
    transition: unset;
    animation: rotation 3s linear infinite;
}

.phone-mockup {
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 350px;
    min-width: 250px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 1.2rem;
    border: 1px solid #5f5f5f;
    transition: background-color .1s ease;
}

.phone-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.phone-camera {
    position: relative;
    width: 7rem;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.phone-camera .flash {
    position: absolute;
    inset: 0;
    transform: translateY(-3px);
    border-radius: 50%;
    background: linear-gradient(
            165deg,
            rgba(255, 255, 255, 1) 0%,
            rgb(220, 220, 220) 40%,
            rgb(170, 170, 170) 98%,
            rgb(10, 10, 10) 100%
    );
    filter: blur(3px);
    box-shadow:
            0 -10px 20px 20px #ffffff40 inset,
            0 -5px 15px 10px #ffffff50 inset,
            0 -2px 5px #ffffff80 inset,
            0 -3px 2px #ffffffbb inset,
            0 2px 0px #ffffff,
            0 2px 3px #ffffff,
            0 5px 5px #ffffff90,
            0 10px 15px #ffffff60,
            0 10px 20px 20px #ffffff40;
    animation:  flash-pulse .1s ease-in-out forwards;
    opacity: 0.8;
}

.phone-camera .flash::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    border-radius: 50%;
    box-shadow:
            0 0 80px 40px rgba(255, 255, 255, 0.5),
            0 0 120px 60px rgba(255, 255, 255, 0.35),
            0 0 150px 80px rgba(255, 255, 255, 0.25);
    filter: blur(6px);
    opacity: 0.9;
    pointer-events: none;
    z-index: -1;
    animation: scale-flash-before 2.3s ease-out infinite;
}

.phone-camera .flash::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -40%;
    right: -40%;
    bottom: -40%;
    border-radius: 50%;
    box-shadow:
            0 0 100px 50px rgba(255, 255, 255, 0.25),
            0 0 160px 80px rgba(255, 255, 255, 0.15),
            0 0 200px 100px rgba(255, 255, 255, 0.08);
    filter: blur(8px);
    opacity: 0.7;
    pointer-events: none;
    z-index: -2;
    animation: scale-flash-after 3.1s ease-out infinite;
}

.phone-camera .flash.blink {
    transform: translateY(-2px);
    animation: flash-rotate .2s ease-out infinite, flash-pulse .2s ease-in-out infinite forwards !important;
    opacity: 0.8;
}

@keyframes scale-flash-before {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

@keyframes scale-flash-after {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.75;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

@keyframes flash-rotate {
    0%{
        transform: translateY(-2px);
    }
    100% {
        transform: rotate(360deg) translateY(-2px);
    }
}

@keyframes flash-pulse {
    0% {
        opacity: 0.6;
        filter: blur(2px);
        box-shadow:
                0 -5px 10px 10px #ffffff30 inset,
                0 -3px 7px 5px #ffffff40 inset,
                0 -1px 3px #ffffff60 inset,
                0 -2px 1px #ffffffaa inset,
                0 1px 0px #ffffff,
                0 1px 1px #ffffff,
                0 2px 2px #ffffff70,
                0 5px 7px #ffffff50,
                0 5px 10px 10px #ffffff30;
    }
    80%,100% {
        opacity: 1;
        filter: blur(4px);
        box-shadow:
                0 -10px 20px 20px #ffffff40 inset,
                0 -5px 15px 10px #ffffff50 inset,
                0 -2px 5px #ffffff80 inset,
                0 -3px 2px #ffffffbb inset,
                0 2px 0px #ffffff,
                0 2px 3px #ffffff,
                0 5px 5px #ffffff90,
                0 10px 15px #ffffff60,
                0 10px 20px 20px #ffffff40;
    }
}

.sound-ad-card {
    border-radius: 2rem;
    border: 1px solid #eae5e5 !important;
}

.sound-ad-card img {
    object-fit: cover;
    aspect-ratio: 9 / 16;
    border-radius: 2rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: all .3s ease;
}

.sound-ad-card img:hover {
    transform: scale(1.06);
}

.zoom-box {
    width: 7.5rem;
    min-width: 7.5rem;
    min-height: 4.4rem;
    background-color: #fff;
    border-radius: .5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #333;
    border: 1px solid rgba(0,0,0,.02);
}

.flash-infos .triggers-list {
    width: 100%;
    min-height: 11.8rem;
    overflow-x: scroll;
}

.flash-infos .triggers-list .trigger-item {
    min-width: 8rem;
    width: 8rem;
    aspect-ratio: 1;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4a4949;
    box-shadow: none !important;
    transition: transform .3s ease, color .15s ease, background-color .15s ease;
    padding: 0;
    position: relative;
    margin: 1rem 0;
    color: #ffffff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: 1px solid #333;
}

.flash-infos .triggers-list .trigger-item .icon-wrapper {
    mix-blend-mode: difference;
}

.image-grid .image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 177.78%;
    overflow: hidden;
    border-radius: 1.2rem;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    background-color: #202020;
    display: block;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.image-grid img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 92.5%;
    transition: transform 0.3s ease;
}

.image-wrapper:hover img {
    transform: scale(1.05) translateX(-50%);
}

.image-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.image-wrapper:hover .image-overlay {
    opacity: 1;
}

.pointer-events-none {
    pointer-events: none;
}

.image-overlay svg {
    width: 30%;
    min-width: 4rem;
    aspect-ratio: 1;
    color: white;
    pointer-events: none; /
}

.form-control.filter-input,
.form-select.filter-input {
    border: 1px solid #6a6a6a;
    min-height: 5rem;
    height: 4.4rem;
    width: 100%;
    max-width: 25rem;
    font-size: 1.35rem;
}

.form-select.filter-input:focus {
    border-color: var(--primary-color);
}
.pickr {
    transition: all .1s ease;
}

.pickr .pcr-button.disabled {
    filter: grayscale(1);
    opacity: .6 !important;
    pointer-events: none;
    cursor: not-allowed !important;
}

.pickr .pcr-button {
    width: 5rem !important;
    height: 5rem !important;
    border-radius: .5rem !important;
    aspect-ratio: 1;
}

.pickr .pcr-button::after,
.pickr .pcr-button::before {
    border-radius: inherit !important;
}

.pcr-app .pcr-interaction .pcr-save {
    background-color: var(--primary-color) !important;
    order: 10;
}

.pcr-app .pcr-interaction .pcr-save,
.pcr-app .pcr-interaction .pcr-cancel {
    letter-spacing: 0;
    font-weight: 600;
}

.pcr-app .pcr-interaction .pcr-cancel.disabled {
    filter: grayscale(1);
    pointer-events: none;
    cursor: default;
}


.flash-infos .triggers-list .trigger-item::before {
    content: '';
    border: 2px solid #1f1f1f;
    opacity: 0;
    border-radius: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transition: all .3s ease;
}

.flash-infos .triggers-list .trigger-item.selected {
    transform: scale(.9);
}

.flash-infos .triggers-list .trigger-item.selected::before {
    width: 110%;
    height: 110%;
    opacity: 1;
    pointer-events: none;
}

.flash-infos .triggers-list .trigger-item svg {
    width: 35%;
    aspect-ratio: 1;
    transition: all .15s ease;
}

.flash-infos .triggers-list .trigger-item:hover,
.flash-infos .triggers-list .trigger-item.selected{
    background-color: #202020;
}

.flash-infos .triggers-list .trigger-item:hover span:not(.close-icon) {
    color: #fff;
}

.flash-infos .triggers-list .trigger-item .close-icon {
    color: #dddddd;
    width: 2.2rem;
    aspect-ratio: 1;
    transition: all .15s ease;
    position: absolute;
    top: 0;
    right: 0;
}

.pickr {
    display: none !important;
}

.big-picker {
    transform: scale(1.35);
    transform-origin: top left;
}

.flash-infos .triggers-list .close-icon:hover  {
    color: #ff6f6f;
}

.flash-infos .form-group label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.3rem;
    font-weight: 500;
    color: #878787;
    font-size: 1.5rem;
}

.flash-infos .form-group input,
.flash-infos .form-group select {
    border: 1px solid rgba(0,0,0,.02) !important;
    background-color: #F5F6F8 !important;
    height: 5rem !important;
    border-radius: .5rem !important;
    color: #000000;
    font-size: 1.8rem;
    text-align: right;
    font-weight: normal !important;
    padding: 0 1.3rem;
}

.flash-infos .form-group select {
    padding: 0 3rem;
}

.flash-infos  .form-select:not([readonly], :disabled, .disabled):focus {
    border-color: var(--primary-color) !important;
}

.trigger-config-box {
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 10000;
    border-radius: .1em;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s,visibility 0s .3s;
    box-shadow: 0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);
    left: 0;
    top: 0;
    padding: .8rem;
    width: 50rem;
    min-height: 25rem;
}

.trigger-config-box input {
    color: #44474a;
    text-align: left;
    width: 100%;
    transition: all .2s;
    border-radius: .15rem;
    height: 5rem;
    background: #f1f3f4;
    font-weight: 500;
    letter-spacing: .035rem;
    font-size: 1.5rem;
    padding: .9rem 2rem;
    border: 1px solid #e2e0e099 !important;
    outline: none !important;
    box-shadow: unset !important;
    cursor: text;
}

.trigger-config-box input:focus {
    filter: brightness(0.975);
}

.trigger-config-box.visible {
    transition: opacity .3s;
    visibility: visible;
    opacity: 1;
}


.custom-branding-logo {
    height: 5rem;
    aspect-ratio: 1;
    position: relative;
}

.custom-branding-logo::before,
.custom-branding-logo::after {
    content: '';
    position: absolute !important;
    top: 50%;
    width: 3rem;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.custom-branding-logo::before {
    left: calc(50% - 1rem);
    background-color: #6BAF35;
    transform: translate(-50%, -66%);
}

.custom-branding-logo::after {
    left: calc(50% + 1rem);
    transform: rotate(180deg)  translate(50%, 30%);
    background-color: #D5181D;
}

.z-index-up {
    z-index: 2;
}

.fw-900 {
    font-weight: 900;
}

@keyframes fadeRight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes fadeBottom {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@media (min-width: 768px) {
    .timeline::after {
        left: 50%;
        margin-left: -3px;
    }

    .timeline-item {
        width: 50%;
        padding: 0 5px 40px 40px;
    }

    .timeline-item.left {
        left: 50%;
        padding-right: 50px;
        padding-left: 0;
        transform: translateX(-100%);
        z-index: 2;
    }

    .timeline-item.right {
        left: 50%;
        padding-left: 50px;
        padding-right: 0;
    }

    .timeline-item.left .timeline-date {
        right: 0;
        left: unset;
        transform: translateX(50%);
    }

    .timeline-item.right .timeline-date {
        left: 0;
        right: unset;
        transform: translateX(-50%);
    }

    .w-md-auto,
    .w-md-auto.w-100 {
        width: auto !important;
    }

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

    .timeline-2 {
        justify-content: space-evenly;
    }

    .timeline-3 {
        justify-content: space-between;
    }

    .ticket-col {
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
    .waveform {
        width: 80%;
    }
}

@media (min-width: 991px) {
    .custom-carousel {
        height: 40vh;
    }

    .timeline {
        display: flex;
        flex-wrap: nowrap;
        gap: 3rem;
        padding-top: 5rem;
    }

    .timeline-item {
        width: 30%;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: unset !important;
        left: 0 !important;
    }

    .timeline::after {
        width: 100%;
        height: 6px;
        top: calc(2.5rem + 4vw) !important;
        left: 0;
    }

    .timeline-item.left .timeline-date,
    .timeline-item.right .timeline-date{
        top: -5rem;
        left: 50%;
        right: unset;
        transform: translate(-50%, -50%);
    }

    .btn-more-events {
        margin-top: 5rem !important;
        max-width: 45rem !important;
    }

    .home-page section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .btn-leave-show {
        width: 100% !important;
        max-width: 40rem !important;
    }

    .profile-card .card-header,
    .profile-card .card-body {
        background-color: #fff;
        border: 1px solid #d2d2d2;
        border-radius: 1.5rem;
        box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    }

    .profile-card .card-body {
        max-width: unset !important;
    }

    .profile-img-box svg {
        color: #fff;
    }

    .alert-message-list {
        position: fixed;
        top: unset;
        bottom: 5%;
        left: unset;
        right: 3.5%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 350px;
        height: auto;
        z-index: 9999;
        visibility: hidden;
    }

    .custom-carousel-tabs {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 1.1rem;
    }

    .modal .modal-halfscreen .modal-content {
        border-radius: 5rem;
        margin: auto !important;
    }

    .modal.rounded-modal .modal-content  {
        border-radius: 3rem;
        overflow: hidden;
    }

    main.pt-5 {
        padding-top: 6rem !important;
    }

    .mx-xl-75 {
        max-width: 75% !important;
    }
}

@media (max-width: 500px) {
    .upload-area {
        padding: 1.5rem;
    }
}

@media (max-width: 991px) {
    .footer-menu .container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .profile-card .card-header {
        max-width: unset !important;
    }

    .timeline-1::after {
        left: 22px;
        right: unset;
        margin: 0;
        transform: unset;
    }

    .timeline-1 .timeline-item:first-child {
        width: 100%;
        padding-right: 0;
        padding-left: 70px;
        left: 0;
        transform: unset;
    }

    .timeline-1 .timeline-item:first-child .timeline-date {
        left: 0;
        transform: unset;
    }
}

@media (max-width: 1200px) {
    .news-card-box:not(:last-child) {
        margin-bottom: calc(2rem + .5vw)
    }
}


@media(min-width: 1367px) {
    .big-picker {
        transform: scale(1.55);
    }
}