:root {
  --scrollbarBG: #F9F9F9;
  --thumbBG: #9E0620;
}

body::-webkit-scrollbar {
  width: 9px;
}

body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 2px solid var(--scrollbarBG);
}

.bg-ayo-red {
    background: #9E0620 !important;
    border-radius: 8px;
    text-align: center;
    height: 44px;
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
}

.bg-ayo-gray {
    background: #CACCCF !important;
    color: #fff !important;
}

.btn-close {
    opacity: 1 !important;
}

.btn-close:hover{
    opacity: .75 !important;
}

.text-ayo-red {
    color: #9E0620;
    text-decoration: none;
}

.border-rounded-eight {
    border-radius: 8px !important;
}

.text-ayo-red-lighter {
    color: #F44335 !important;
}

.text-ayo-gray {
    color: #E8E8E8 !important;
}


.text-ayo-gray-darker {
    color: #A0A4A8 !important;
}

.fs-14 {
    font-family: 'Rubik';
    font-size: 14px;
}

.fs-12 {
    font-family: 'Rubik';
    font-size: 12px !important;
}

.fs-14-important {
    font-family: 'Rubik';
    font-size: 14px !important;
}

.fw-500 {
    font-family: 'Rubik';
    font-weight: 500 !important;
}

.fw-400 {
    font-family: 'Rubik';
    font-weight: 400 !important;
}

.toastify {
    box-shadow: none !important;
}

/* Navbar style */
header {
    box-shadow: 0 1px 0 #E8E8E8;
}

header nav {
    display: flex;
    justify-content: space-between;
}

.navbar-nav .left-menu-item {
    padding-left: 18px;
    padding-right: 18px;
}

.navbar-nav .left-menu-item a.nav-link {
    padding-right: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
}

/* .nav-indicator {
    content: '•';
    position: relative;
    top: -8px;
    text-align: center;
    color: #9E0620;
    height: 1px;
    font-weight: 500;
} */
.deactive {
    color: #25282B !important;
}
.navbar-nav .left-menu-item a.nav-link.active::after {
    content: '•';
    position: relative;
    top: -8px;
    text-align: center;
    color: #9E0620;
    height: 1px;
    font-weight: 500;
}
.navbar-nav .left-menu-item a.nav-link.active .webView {
    content: '•';
    position: relative;
    top: -8px;
    text-align: center;
    color: #9E0620;
    height: 1px;
    font-weight: 500;
}

.divider-dash {
    width: 100%;
    height: 1px;
    display: block;
    border-bottom: 1px dashed #E8E8E8;
}

.divider-block {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #E8E8E8;
}

@media (max-width: 425px) {
    header{
        box-shadow: 0 1px 0 #E8E8E8;
    }

    .modal-advertisement {
        align-items: flex-end !important;
        width: 100% !important;
        position:fixed !important;
       top:auto !important;
       right:auto !important;
       left:auto !important;
       bottom:0 !important;
    }

    .modal-advertisement .modal-content {
        margin-left: -8px;
    }

    .img-ads-desktop {
        display: none !important;
    }

    .img-ads-mobile {
        display: block !important;
    }

    .navbar-collapse ul.navbar-nav {
        margin-top: 16px;
    }

    .navbar-collapse ul.navbar-nav .left-menu-item {
        padding-left: 0 !important;
    }

    .nav-item.left-menu-item.dropdown ul.dropdown-menu {
        margin-bottom: 18px;
    }

    main {
        margin-top: 4.3rem;
    }

    .toastify {
        font-weight: 400;
        font-size: 12px;
        color: #fff;
        line-height: 16px;
        letter-spacing: .1px;
        font-family: 'Rubik';
        padding:12px 16px !important;
        max-width: none !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        flex-direction: row;
        justify-content: space-between;
    }
    footer > div:first-child {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}

li.divider {
    width: 1.5px;
    height: 20px;
    background: #E8E8E8;
    content: '';
}

.venue-cart-view-btn {
    position: relative;
}

.cart-icon-desktop {
    background: #fff;
    /*width: 42px;*/
    height: 42px;
    border-radius: 50%;
    border:0;
    z-index: 9999999;
}

.cart-icon-desktop .cart-icon-counter {
    width: 18px;
    height: 18px;
    padding:2px;
    color: #fff;
    background: #9E0620;
    border: 2px solid #fff;
    text-align: center;
    position: absolute;
    font-size: 10px;
    top:4px;
    right: 11px;
    border-radius: 50%;
    font-weight: 500;
    line-height: 130%;
}

.cart-icon-mobile {
    display: none;
    visibility: hidden;
}

.nav-btn {
    padding: 6px 18px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    font-family: 'Rubik';
    border-radius: 8px;
    width: 85px;
}

.nav-btn-signin {
    background: #fff;
    color: #25282B;
    margin: 0 15px;
}

.nav-btn-signup {
    background: #9E0620;
    border: 1px solid #9E0620;
}

ul.user-menu {
    margin-left: -200px;
    border-radius: 8px;
    padding:8px 16px;
    min-width: 240px;
}

ul.user-menu li:not(:last-child) {
    border-bottom: 1px solid #E8E8E8;
}

ul.user-menu li a.dropdown-item {
    padding:0.7rem 1.5rem 0.7rem 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.user-icon-mobile {
    display: none;
    visibility: hidden;
}

.user-icon-desktop {
    display: inline-block;
    visibility: visible;
}

@media (max-width: 992px) {
    header nav.navbar {
        padding-bottom: 1.25rem !important;
    }

    ul.expand-kompetisi-mobile {
        border-left: 3px solid #9E0620 !important;
        border-radius: 0 !important;
    }

    .modal-advertisement {
        align-items: flex-end !important;
        width: 100% !important;
        position:fixed !important;
       top:auto !important;
       right:auto !important;
       left:auto !important;
       bottom:0 !important;
    }

    .modal-advertisement .modal-content {
        margin-left: -8px;
    }

    .img-ads-desktop {
        display: none !important;
    }

    .img-ads-mobile {
        display: block !important;
    }

    #auth-action > ul {
        align-items: flex-start !important;
    }

    li.divider {
        height: 1px;
        width: 100%;
        margin-bottom: 10px;
    }

    .cart-icon-desktop {
        display: none;
        visibility: hidden;
    }

    .cart-icon-mobile {
        display: inline;
        visibility: visible;
        border-right: 2px solid #E8E8E8;
        padding-right: 10px;
    }

    .cart-icon-mobile .cart-icon-counter {
    width: 16px;
    height: 16px;
    padding:1px;
    color: #fff;
    background: #9E0620;
    border: 1px solid #fff;
    text-align: center;
    position: absolute;
    font-size: 10px;
    top:-2px;
    right: 6px;
    border-radius: 50%;
    font-weight: 500;
    line-height: 130%;
}

    #auth-action li.nav-item {
        width: 100%;
    }

    .nav-btn {
        width: 100%;
        margin:0;
    }

    .nav-btn-signin {
        border: 1px solid #E8E8E8;
        margin-bottom: 1rem;
    }

    #user-dropdown {
        display: none;
        visibility: hidden;
    }

    ul.user-menu {
        display: block !important;
        margin-left: 0;
        border:0;
        padding:0;
    }

    ul.user-menu li {
        border-bottom: 0 !important;
    }

    ul.user-menu li:nth-child(2) {
        border-bottom: 1px solid #E8E8E8 !important;
    }

    ul.user-menu li a.dropdown-item {
        padding:.6rem 1.5rem 1rem 0;
    }

    ul.user-menu li:nth-child(3) a.dropdown-item {
        padding-bottom: 0 !important;
    }

    .user-icon-desktop {
        display: none;
        visibility: hidden;
    }

    .user-icon-mobile {
        display: inline-block;
        visibility: visible;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 1460px !important;
    }
}

main {
    margin-top: 4.7rem;
}

/* Input components */
.ayo-form-container {
    margin-bottom: 18px;
}

.ayo-form-group {
    position: relative;
    width: 100%;
}

.ayo-form-group .ayo-form-input{
    width: 100%;
    padding:14px 16px;
    border:1px solid #E8E8E8;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    background: #fff;
    height: 48px;
    letter-spacing: 0.25px;
}

.ayo-form-group .ayo-form-input:focus:not(:read-only) {
    border:2px solid #9E0220;
}

.ayo-form-group .ayo-form-label {
    font-family: 'Rubik';
    position: absolute;
    left: 0;
    pointer-events: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding:14px 16px;
    transition: .5s;
    letter-spacing: 0.15px;
    color: #A0A4A8;
}

.ayo-form-group input.ayo-form-input:valid ~ label.ayo-form-label,
.ayo-form-group input.ayo-form-input:focus ~ label.ayo-form-label,
.ayo-form-group input.ayo-form-input:read-only ~ label.ayo-form-label{
    transform: translateX(10px) translateY(-9px);
    font-size: 12px;
    padding:0 5px;
    background: #fff;
}

.ayo-form-group input.ayo-form-input:invalid ~ label.ayo-form-label sup {
    display: none;
}

.ayo-form-group input.ayo-form-input:valid ~ label.ayo-form-label sup,
.ayo-form-group input.ayo-form-input:focus ~ label.ayo-form-label sup,
.ayo-form-group input.ayo-form-input:read-only ~ label.ayo-form-label sup{
    display: inline-block;
}

.ayo-form-group input.ayo-form-input:read-only{
    background: #e8e8e85e;
}

.ayo-form-group input.ayo-form-input:read-only ~ label.ayo-form-label {
    background: none;
    z-index: 99;
}

.ayo-form-group input.ayo-form-input:focus:not(:read-only) ~ label.ayo-form-label {
    color: #9E0220;
}

.ayo-form-input .input-group {
    position: relative;
    width: 100%;
    border-radius: 8px;
    border:1px solid #E8E8E8;
}

.ayo-form-input .input-group .ayo-form-input {
    border-right: 0;
}
.ayo-form-group .input-group .ayo-form-input {
    border-bottom-right-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.ayo-form-group .input-group button {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    position: absolute;
    top:10px;
    right: 14px;
    border:0;
    background: #fff;
}
.ayo-form-group .input-group button:focus-visible {
    border:0;
    outline: 0;
}

.ayo-form-input .form-control:focus,
.ayo-form-input .form-control:focus-visible,
.ayo-form-input .form-control:focus-within {
    border:1px solid #d9d9d9 !important;
    box-shadow: none;
}

/* Button */
.btn-ayo {
    border:none;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    border-radius:8px;
    font-family: 'Rubik';
    padding:10px 14px;
    text-align: center;
    font-weight: 500;
    height: 42px;
}

.btn-ayo-red, .btn-ayo-red:hover {
    background: #9E0620;
    color: #fff;
}

.btn-ayo-gray {
    color: #fff;
    background: #CACCCF;
}

.btn-ayo-white {
    color: #52575C;
    background: #fff;
    border:1px solid #E8E8E8 !important;
}

.btn-ayo-white-border-red {
    color: #9E0620;
    background: #fff;
    border:1px solid #9E0620 !important;
}

.text-error {
    color: #9E0620;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.15px;
}

.img-keep-aspect-ratio {
    object-fit: cover !important;
    object-position: center center;
}

/* Bottom sheet style */
.modal-bottom-sheet .modal-dialog{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin:0;
}
.modal-bottom-sheet .modal-dialog .modal-body {
    padding:0;
}
.modal-bottom-sheet .modal-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: .15px;
}
.modal-bottom-sheet .modal-header {
    margin-bottom: 20px;
}

.time-slots .btn {
    width: 100%;
    margin-bottom: 13px;
}

.time-slots .btn:hover {
    background-color: #9E0620;
    color: #fff; /* Ensures text is readable on the new background */
    border-color: #9E0620;
}

.btn-custom {
    background-color: #9E0620;
    color: #fff; /* Ensures text is readable on the new background */
    border-color: #9E0620;
}

.input-group-text {
    padding-right: 0.75rem; /* Adjust the value as needed */
}

/* Base styling for filter-date-btn */
.filter-date-btn {
    margin: 0.5rem 1rem; /* Uniform margin for all buttons */
    /* Additional styling properties */
}

/* Styling for active state */
.filter-date-btn.active {
    background-color: #9E0620;
    color: #fff; /* Optional: Change text color for better contrast */
    border-color: #9E0620; /* Optional: Match border color to background */
    /* Margin remains consistent */
}

.time-slot-btn:hover {
    background-color: #9E0620;
    color: #fff; /* Ensures text is readable on the new background */
    border-color: #9E0620;
}


/* .btn-ayo-red, .btn-ayo-red:hover { */
    /* background: #9E0620; */
    /* color: #fff; */
/* } */


/* Custom Navbar Styles */
.navbar-custom {
    background-color: #9E0620; /* Set your desired background color */
    border-color: #9E0620; /* Match the border color to the background */
	
}

/* Navbar Brand */
.navbar-custom .navbar-brand {
    color: #fff; /* Set the brand text color */
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #d5d5d5; /* Set the brand text color on hover/focus */
}

/* Navbar Links */
.navbar-custom .navbar-nav > li > a {
    color: #fff; /* Set the link text color */
	margin-left: 40px;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: #dfff; /* Set the link text color on hover/focus */
}

/* Dropdown Menu */
.navbar-custom .dropdown-menu {
    background-color: #9E0620; /* Set the dropdown background color */
    border-color: #9E0620; /* Match the border color to the background */
}

.navbar-custom .dropdown-menu > li > a {
    color: #fff; /* Set the dropdown link text color */
}

.navbar-custom .dropdown-menu > li > a:hover,
.navbar-custom .dropdown-menu > li > a:focus {
    color: #d5d5d5; /* Set the dropdown link text color on hover/focus */
    background-color: transparent; /* Optional: Change background on hover/focus */
}

/* Navbar Toggle (for mobile view) */
.navbar-custom .navbar-toggle {
    border-color: #fff; /* Set the toggle border color */
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #fff; /* Set the toggle icon color */
}

/* Positioning the logo image */
.logo-container {
    position: relative;
    height: 70px; /* Adjust to match your navbar height */
}

.logo-img {
    position: absolute;
    left: 0;         /* Align logo to the left */
    bottom: 0;       /* Align logo to the bottom of the container */
    width: 60px;     /* Default logo width */
}

/* Responsive settings for mobile devices */
@media (max-width: 576px) {
    .logo-container {
        height: 60px; /* Reduce height on smaller screens */
    }

    .logo-img {
        width: 50px;     /* Slightly smaller logo on mobile */
        bottom: 5px;     /* Add some spacing from bottom */
        left: 10px;      /* Add spacing from left edge */
    }
}