html, body {
  overflow-x:clip !important;
  position: relative !important;
  width: 100% !important; 
  overflow-wrap:break-word;
    min-height: 100vh !important;  /* <-- critical for full height sidebar */
}

.over-hidden{
    overflow-x:hidden !important;
    overflow-y: scroll !important;
    position: relative !important;
    width: 100% !important; 
}


.text-black {
	color: #000000;
}

.bg-black {
	background:  #000000;
}

.text-white {
	color: #ffffff;
}

.bg-white {
	background:  #ffffff;
}

.form-check-input:checked {
    background-color: #198754;
    border-color: white;
}

.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='white'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  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='white'/%3e%3c/svg%3e");
}

.form-switch {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  
}

 .sortable_list {
	width: 100%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 10px 5px 5px 5px;
float: left;
margin-right: 10px;
}

.sortable_list li {
margin: 10px 15px 15px 15px;
	width: 92%;
padding: 10px;
font-size: 1.2em;
}

 .sortable_list_sponsor {
	width: 100%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 10px 5px 5px 5px;
float: left;
margin-right: 10px;
}

.sortable_list_sponsor li {
margin: 10px 15px 15px 15px;
	width: 92%;
padding: 0px;
font-size: 1.2em;
}


 .list_sponsor {
	width: 100%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 10px 5px 5px 5px;
float: left;
margin-right: 10px;
}

.list_sponsor li {
margin: 10px 15px 15px 15px;
	width: 92%;
padding: 0px;
font-size: 1.2em;
}

.mh-50 { min-height: 50px; }
.mh-60 { min-height: 60px; }
.mh-70 { min-height: 70px; }
.mh-80 { min-height: 80px; }
.mh-90 { min-height: 90px; }
.mh-100 { min-height: 100px; }
.mh-110 { min-height: 110px; }
.mh-120 { min-height: 120px; }
.mh-130 { min-height: 130px; }
.mh-140 { min-height: 140px; }
.mh-150 { min-height: 150px; }
.mh-160 { min-height: 160px; }
.mh-170 { min-height: 170px; }
.mh-180 { min-height: 180px; }
.mh-190 { min-height: 190px; }
.mh-200 { min-height: 200px; }
.mh-210 { min-height: 210px; }
.mh-220 { min-height: 220px; }
.mh-230 { min-height: 230px; }
.mh-240 { min-height: 240px; }
.mh-250 { min-height: 250px; }
.mh-260 { min-height: 260px; }
.mh-270 { min-height: 270px; }
.mh-280 { min-height: 280px; }
.mh-290 { min-height: 290px; }
.mh-300 { min-height: 300px; }
.mh-310 { min-height: 310px; }
.mh-320 { min-height: 320px; }
.mh-330 { min-height: 330px; }
.mh-340 { min-height: 340px; }
.mh-350 { min-height: 350px; }
.mh-360 { min-height: 360px; }
.mh-370 { min-height: 370px; }
.mh-380 { min-height: 380px; }
.mh-390 { min-height: 390px; }
.mh-400 { min-height: 400px; }
.mh-500 { min-height: 500px; }

.mh-70p { min-height: 70%; }
.mh-80p { min-height: 80%; }
.mh-90p { min-height: 90%; }
.mh-100p { min-height: 100%; }

.mh-100vh { min-height: 100vh; }

.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }
.mt-neg-20 { margin-top: -20px; }
.mb-neg-100 { margin-bottom: -100px; z-index:99; position:relative; }
.mb-neg-90 { margin-bottom: -90px; z-index:99; position:relative; }
.mb-neg-80 { margin-bottom: -80px; z-index:99; position:relative; }
.mb-neg-70 { margin-bottom: -70px; z-index:99; position:relative; }
.mb-neg-60 { margin-bottom: -60px; z-index:99; position:relative; }
.mb-neg-50 { margin-bottom: -50px; z-index:99; position:relative; }

.ms-neg-20 { margin-left: -20px; }
.ms-neg-30 { margin-left: -30px; }
.ms-neg-40 { margin-left: -40px; }

.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }


.overflow-yh { overflow-y: hidden;}
.overflow-xh { overflow-x: hidden;}


.w-40px { width:40px; }
.w-45px { width:45px; }
.w-50px { width:50px; }
.w-55px { width:55px; }
.w-60px { width:60px; }
.w-65px { width:65px; }
.w-70px { width:70px; }
.w-75px { width:75px; }
.w-80px { width:80px; }
.w-85px { width:85px; }
.w-90px { width:90px; }
.w-95px { width:95px; }
.w-100px { width:100px; }
.w-150px { width:150px; }
.w-200px { width:200px; }
.w-250px { width:250px; }
.w-300px { width:300px; }

.abs-bottom {
position: absolute; 
                    bottom: 0; 
                    width: 100%; 
}

.no-underline {
text-decoration: none;
}


.sticky-top .unassigned { margin-top: 100px !important;  }


.nav-pills .nav-link {
  color: #333333 !important;
}

.nav-pills .nav-link.active {
  background-color: #198754 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Add shadow */
}


.nav-pills .nav-link.focus {
  background-color: #198754 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Add shadow */
}


@media screen and (max-width:992px){
.navbar .navbar-collapse {
  background: #ffffff;
  position: absolute;
 
  border: 1px solid #cccccc;
  padding:7px 20px 7px 20px;
  right: 0px;
  z-index:99998;
  border-radius: 8px;
}
}

.navbar {
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  -ms-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  border-radius: 8px;
}






.calendar {
    display: flex;
    flex-flow: column;
}
.calendar .header .month-year {
    font-size: 20px;
    font-weight: bold;
    color: #636e73;
    padding: 20px 0;
}
.calendar .days {
    display: flex;
    flex-flow: wrap;
}
.calendar .days .day_name {
    width: calc(100% / 7);
    border-right: 1px solid #e6e9ea;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #818589;
    color: #fff;
    background: linear-gradient(to top, #198754, #106640) !important;
}
.calendar .days .day_name:nth-child(7) {
    border: none;
}
.calendar .days .day_num {
    display: flex;
    flex-flow: column;
    width: calc(100% / 7);
    border-right: 1px solid #e6e9ea;
    border-bottom: 1px solid #e6e9ea;
    padding: 15px;
    font-weight: bold;
    color: #7c878d;
    cursor: pointer;
    min-height: 100px;
}
.calendar .days .day_num span {
    display: inline-flex;
    width: 30px;
    font-size: 14px;
}
.calendar .days .day_num .event {
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #f7c30d;
    color: #fff;
    word-wrap: break-word;
}
.calendar .days .day_num .event.green {
    background-color: #198754;
    text-decoration: none;
}
.calendar .days .day_num .event.blue {
    background-color: #0d6efd;
    text-decoration: none;
}
.calendar .days .day_num .event.red {
    background-color: #dc3545;
    text-decoration: none;
}
.calendar .days .day_num .event.yellow {
    background-color: #ffc107;
    color: #000000;
    text-decoration: none;
}


.calendar .days .day_num .event.green a {
    background-color: #198754;
    color: #ffffff;
    text-decoration: none;
}
.calendar .days .day_num .event.blue a {
    background-color: #0d6efd;
    color: #ffffff;
    text-decoration: none;
}
.calendar .days .day_num .event.red a {
    background-color: #dc3545;
    color: #ffffff;
    text-decoration: none;
}
.calendar .days .day_num .event.yellow a {
    background-color: #ffc107;
    color: #000000;
    text-decoration: none;
}


.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid #e6e9ea;
}
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: inherit;
}
.calendar .days .day_num.selected {
    background-color: #f1f2f3;
    cursor: inherit;
    color: #198754;
    font-weight: 1000;
}

.border-left-think-success{
		border-right: 8px solid 	#198754;
}
.border-left-think-primary{
		border-right: 8px solid 	#0d6efd;
}
.border-left-think-warning{
		border-right: 8px solid 	#ffc107;
}


.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #198754 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #fdfdfd;
} 

.ui-autocomplete.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 14px;
}

.side_nav {
  position: fixed;
  width: 150px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(to left, #198754, #106640);
}

.side_nav_links {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
   height: 100%;
     scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer/Edge Legacy */
}

/* Chrome, Safari and Edge (WebKit) */
.side_nav_links::-webkit-scrollbar {
  display: none;
}

.border-end-20{


}

.nav_side_planner li .active {
    background: #ffffff;
color: #198754 !important;
    /*border-right: 8px solid #ffc107 !important;*/
    border-radius: 0px !important;
text-decoration:none;
width:150px;
}


.nav_side_planner a {
color: #FFFFFF !important;
    border-radius: 0px !important;
text-decoration:none;
width:150px;
}

.nav_bottom_planner li .active {
color: #198754 !important;
}


.nav_bottom_planner a {
color: #FFFFFF !important;
}

    /*.nav_side_planner a:hover {
    background: #ffffff;
color: #198754 !important;
border-right: 8px solid #ffc107 !important;
    border-radius: 0px !important;
text-decoration:none;
width:150px;
}*/

.text-grey{
    color: #333333 !important;
}


.custom-popover {
  --bs-popover-max-width: 400px !important;
  --bs-popover-border-color: #198754;
  --bs-popover-header-bg: #198754;
  --bs-popover-header-color: #ffffff;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}


h1 {
  /*font-weight: 800 !important;
  background: -webkit-linear-gradient(#333, #333, #198754);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}


.square {
    width: 50vw;
    height: 50vw;
}

.w-100px { width:100px; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 576px) {
    .mh-title { min-height: 200px; }
    .mh-hole { min-height: 200px; }
    .mh-sponsor { min-height: 100px; }
    .mh-cart { min-height: 130px; }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) {
    .mh-title { min-height: 200px; }
    .mh-hole { min-height: 200px; }
    .mh-sponsor { min-height: 100px; }
    .mh-cart { min-height: 130px; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .mh-title { min-height: 200px; }
    .mh-hole { min-height: 200px; }
    .mh-sponsor { min-height: 100px; }
    .mh-cart { min-height: 130px; }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .mh-title { min-height: 500px; }
    .mh-hole { min-height: 250px; }
    .mh-sponsor { min-height: 250px; }
    .mh-cart { min-height: 250px; }
    .shadow-split { box-shadow: 0 0.5rem 1rem rgba(0,0,0, .15); }
}






/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {
    .mh-title { min-height: 500px; }
    .mh-hole { min-height: 250px; }
    .mh-sponsor { min-height: 250px; }
    .mh-cart { min-height: 250px; }
    .shadow-split { box-shadow: 0 0.5rem 1rem rgba(0,0,0, .15); }
}

.bg-sponsor{
  background-image: url("../images/sponsor_default.png");
  background-size: cover;
  }

  .ui-autocomplete { cursor: default;z-index:3000 !important;} 

a:hover {
 cursor:pointer;
}


 .autocomplete_tournament-container {
            position: relative;
            width: 300px;
        }


        .autocomplete_tournament-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10;
            border: none; /* No border initially */
            display: none; /* Hide the container initially */
        }

        .autocomplete_tournament-results.visible {
            border: 1px solid #ccc; /* Show the border when results are visible */
            display: block; /* Make the container visible */
        }

        .autocomplete_tournament-item {
            padding: 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .autocomplete_tournament-item img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            border-radius: 50%;
        }

        .autocomplete_tournament-item:hover {
            background-color: #f9f9f9;
        }


 .autocomplete_golfer-container {
            position: relative;
            width: 350px;
        }


          .autocomplete_golfer-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10;
            border: none; /* No border initially */
            display: none; /* Hide the container initially */
        }

        .autocomplete_golfer-results.visible {
            border: 1px solid #ccc; /* Show the border when results are visible */
            display: block; /* Make the container visible */
        }

        .autocomplete_golfer-item {
            padding: 5px;
            border-bottom: 0px solid #f0f0f0;
            cursor: pointer;
            display: block;
            align-items: center;
        }

/*
        .autocomplete_golfer-item img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            border-radius: 50%;
        }
*/
.autocomplete_golfer-item:hover {
    background-color: #f9f9f9;
}

.autocomplete_golfer-item.active,
.autocomplete_golfer-item:focus {
  background-color: #f9f9f9;
}




         .dropdown:hover .dropdown-menu {
            display: block;
            margin-top: 0; /* Prevent margin shift on hover */
        }

        /* Full-width dropdown menu */
        .dropdown-menu-fullwidth {
            width: 100%;
            padding: 20px;
            /*border-radius: 0; /* Remove rounded corners */
            /*border: 1px solid #198754; /* Green border */
            /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
            width: 210%; /* Increase width to exceed parent by 40% on both sides */
            margin-left: -55%; /* Center the dropdown relative to the parent */
        }



        /* Full-screen dropdown menu */
        .dropdown-menu-fullscreen {
            position: absolute;
            top: 100%; /* Position below the button */
            left: 50%; /* Start at the middle of the screen */
            padding: 30px;
            transform: translateX(-50%); /* Center horizontally */
            width: 180vw; /* Full width of the viewport */
            height: auto; /* Allow content to dictate height. (was auto) */
            border-radius: 0; /* Remove rounded corners */
            border-top: 1px solid #cccccc; /* Green border */
            border-bottom: 0px solid green; /* Green border */
            border-left: 0px solid green; /* Green border */
            border-right: 0px solid green; /* Green border */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
            background-color: white; /* Ensure proper background */
            z-index: 10500; /* Keep it on top of other elements */
            
        }

            


        /* Button hover effect */
        .dropdown:hover .dropdown-toggle {
            background-color: #ffffff !important;
            color: #198754 !important;
            /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
        }

        .dropdown-item img {

            
        }

     .header_logo {

        height: 50px;
            
        }

        /* Initial styling for the div */
        .header-drop-image-text {
            transition: background-color 0.3s ease; /* Smooth transition */
        }

            .header-drop-image-text_hold {
            transition: background-color 0.3s ease; /* Smooth transition */
            background-color: #198754 !important; /* Change link background color */
            background: linear-gradient(to top, #198754, #106640);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
            font-color: #ffffff !important;
        }

            .header-drop-image-text:hover {
            background-color: #198754 !important; /* Change link background color */
            background: linear-gradient(to top, #198754, #106640);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
        }

            .header-drop-image-text:hover a {
            color: #ffffff !important; /* Change link color */
            
        }

            .header-drop-image-text:hover span {
            color: #ffffff !important; /* Change link color */
            
        }

        .green-gradient{
         background: linear-gradient(to top, #198754, #106640) !important; 

        }

        .btn-success{
background: linear-gradient(to top, #198754, #106640) !important;
            border: 1px solid #ffffff !important;
        }

        .btn-success:hover {
            background-color: linear-gradient(to top, #198754, #106640) !important;
            opacity: 0.9; /* Slightly transparent */
        }

        .btn-warning{
            background: linear-gradient(to top, #ffc107, #e0a800) !important;
            border: 1px solid #ffffff !important;
            color: #333333 !important;
        }
        .btn-warning:hover {
            background: linear-gradient(to top, #ffc107, #e0a800) !important;
            opacity: 0.9; /* Slightly transparent */
        }

        .btn-danger{
            background: linear-gradient(to top, #dc3545, #871c25) !important;
            border: 1px solid #ffffff !important;
            color: #ffffff !important;
        }
        .btn-danger:hover {
            background: linear-gradient(to top, #dc3545, #871c25) !important;
            opacity: 0.9; /* Slightly transparent */
        }

        .btn-primary{
            background: linear-gradient(to top, #0d6efd, #003c9e) !important;
            border: 1px solid #ffffff !important;
            color: #ffffff !important;
        }
        .btn-primary:hover {
            background: linear-gradient(to top, #0d6efd, #003c9e) !important;
            opacity: 0.9; /* Slightly transparent */
        }

        .bg-success-gradient{
            background: linear-gradient(to top, #198754, #106640) !important;
            border: 0px !important;
        }

        .bg-success-gradient-noborder{
            background: linear-gradient(to top, #198754, #106640) !important;
        }

        /*.bg-success{
            background: linear-gradient(to top, #198754, #106640) !important;
            color: #ffffff;
        }*/

        .bg-warning{
            background: linear-gradient(to top, #ffc107, #ffc107) !important;
        }

        .bg-danger{
            background: linear-gradient(to top, #dc3545, #dc3545) !important;
        }

        .bg-primary{
            background: linear-gradient(to top, #0d6efd,  #0d6efd) !important;
        }

      .bg-success-gradient{
            background: linear-gradient(to top, #198754, #106640) !important;
            border: 0px !important;
        }

        /* Custom class for hover underline effect */
      /* Custom styling for tabs */
        .account-nav-tabs {
            display: flex;
            justify-content: center; /* Center tabs */
            gap: 40px; /* Add spacing between tabs */
            border-bottom: none; /* Remove default bottom border */
        }

        .account-nav-tabs .nav-link {
            font-size: 18px; /* Increase tab size */
            padding: 12px 24px; /* Add padding for larger clickable area */
            color: #000; /* Default text color */
            text-decoration: none; /* Remove underline */
            border: none; /* Remove borders */
            border-radius: 0; /* No rounded corners */
            position: relative; /* Needed for ::after */
            transition: color 0.3s ease; /* Smooth color transition */
        }

        /* Add underline using ::after */
        .account-nav-tabs .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0; /* Position at the bottom */
            left: 0;
            width: 0%; /* Start with no underline */
            height: 2px; /* Thickness of the underline */
            background-color: #198754; /* Underline color */
            transition: width 0.3s ease; /* Smooth left-to-right effect */
        }

        /* Expand underline on hover */
        .account-nav-tabs .nav-link:hover::after {
            width: 100%; /* Full underline width on hover */
        }

        /* Active tab styling */
        .account-nav-tabs .nav-link.active {
            color: #198754; /* Active text color */
        }

        /* Keep underline for active tab */
        .account-nav-tabs .nav-link.active::after {
            width: 100%; /* Full underline for active tab */
        }


.transaction-tab-card {
  background-color: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
  color: #198754;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.transaction-tab-card:hover {
  background-color: #f8f9fa;
  color: #198754;
  box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.1);
}

.transaction-tab-card.active {
      background: linear-gradient(to top, #198754, #106640) !important;
  border-color: #198754;
  color: #ffffff;
  box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.3);
}

        
  /* Container for mobile tabs */
ul.nav-tabs.mobile-nav-tabs {
  display: flex;
  justify-content: center;               /* Center tabs horizontally */
  border-bottom: none !important;        /* Remove default Bootstrap border */
  overflow-x: auto;                      /* Scrollable if overflow */
  white-space: nowrap;
  flex-wrap: nowrap;
  gap: 25px;                             /* Spacing between tabs */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 0;
}

/* Hide scrollbars on iOS/Chrome */
ul.nav-tabs.mobile-nav-tabs::-webkit-scrollbar {
  display: none;
}

/* Base tab button styling */
ul.nav-tabs.mobile-nav-tabs .nav-link.nav-link-mobile {
  all: unset;                            /* Remove all Bootstrap nav-link styles */
  display: inline-block;
  padding: 12px 0;
  margin: 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: black;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}

/* Green underline hover effect */
ul.nav-tabs.mobile-nav-tabs .nav-link.nav-link-mobile::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #198754;            /* Bootstrap green */
  transition: width 0.3s ease;
}

/* Hover underline reveal */
ul.nav-tabs.mobile-nav-tabs .nav-link.nav-link-mobile:hover::after {
  width: 100%;
}

/* Active tab text + underline */
ul.nav-tabs.mobile-nav-tabs .nav-link.nav-link-mobile.active {
  color: #198754;
}

ul.nav-tabs.mobile-nav-tabs .nav-link.nav-link-mobile.active::after {
  width: 100%;
}

.mobile-nav-tabs {
  overscroll-behavior-x: contain; /* ✅ Prevent horizontal bounce */
    overscroll-behavior: none; /* ✅ Prevent all scroll chaining & bounce */
}


        /* Zoom when hover */
                .zoom-div {
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: transform 0.2s ease; /* Smooth transition */
        }

        /* Zoom effect on hover */
        .zoom-div:hover {
            transform: scale(1.05); /* Expand by 10% */
        }


        .zoom-div-10 {
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: transform 0.2s ease; /* Smooth transition */
        }

        /* Zoom effect on hover */
        .zoom-div-10:hover {
            transform: scale(1.10); /* Expand by 10% */
        }

        .zoom-div-15 {
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: transform 0.2s ease; /* Smooth transition */
        }

        /* Zoom effect on hover */
        .zoom-div-15:hover {
            transform: scale(1.15); /* Expand by 10% */
        }

        .zoom-div-20 {
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: transform 0.2s ease; /* Smooth transition */
        }

        /* Zoom effect on hover */
        .zoom-div-20:hover {
            transform: scale(1.20); /* Expand by 10% */
        }

        .bold {
            font-weight: bold;
        }

        .disabled-link {
    pointer-events: none;
    color: gray; /* Optional: Change appearance to indicate it's disabled */
    text-decoration: none; /* Optional: Remove underline */
    cursor: default; /* Change cursor to indicate it's not clickable */
}



/* underline slide effet */
        /* Base styling for the link */
                .underline-slide {
            position: relative; /* Required for the pseudo-element */
            display: inline-block; /* Ensures proper alignment */
            color: #6c757d; /* Text color (Bootstrap secondary) */
            text-decoration: none; /* Remove default underline */
            transition: color 0.3s ease; /* Smooth text color transition */
        }

        /* Hover effect for the text color */
        .underline-slide:hover {
            color: #198754; /* Change color on hover (Bootstrap success) */
        }

        /* Pseudo-element for the underline */
        .underline-slide::after {
            content: ""; /* Empty content for the pseudo-element */
            position: absolute; /* Position relative to the link */
            left: 0;
            bottom: -4px; /* Space between text and underline */
            width: 0; /* Start with no width */
            height: 2px; /* Thickness of the underline */
            background-color: #198754; /* Green color for the underline */
            transition: width 0.3s ease; /* Smooth transition for the width */
        }

        /* On hover, expand the underline */
        .underline-slide:hover::after {
            width: 100%; /* Expand to the full width of the link */
        }

        /* fixed height for main menu iconns */
        .main_header_icon {
            
            height:120px;
        }


/* underline slide effet */
        /* Base styling for the link */
                .underline-slide-grey {
            position: relative; /* Required for the pseudo-element */
            display: inline-block; /* Ensures proper alignment */
            color: #198754; /* Text color (Bootstrap secondary) */
            text-decoration: none; /* Remove default underline */
            transition: color 0.3s ease; /* Smooth text color transition */
        }

        /* Hover effect for the text color */
        .underline-slide-grey:hover {
            color: #6c757d; /* Change color on hover (Bootstrap success) */
        }

        /* Pseudo-element for the underline */
        .underline-slide-grey::after {
            content: ""; /* Empty content for the pseudo-element */
            position: absolute; /* Position relative to the link */
            left: 0;
            bottom: -4px; /* Space between text and underline */
            width: 0; /* Start with no width */
            height: 2px; /* Thickness of the underline */
            background-color: #6c757d; /* Green color for the underline */
            transition: width 0.3s ease; /* Smooth transition for the width */
        }

        /* On hover, expand the underline */
        .underline-slide-grey:hover::after {
            width: 100%; /* Expand to the full width of the link */
        }

        /* fixed height for main menu iconns */


        /* Custom styling for the side menu */
        .offcanvas-start {
            width: 250px; /* Width of the side menu */
        }

        .offcanvas-title {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .offcanvas-body a {
            text-decoration: none;
            font-size: 1.2rem;
            margin: 10px 0;
            display: block;
            color: #6c757d; /* Bootstrap secondary color */
            transition: color 0.3s ease;
        }

        .offcanvas-body a:hover {
            color: #198754; /* Bootstrap success color */
        }

        .icon {
            transition: transform 0.3s ease; /* Smooth icon rotation */
        }

        .icon.rotate {
            transform: rotate(180deg); /* Rotate when expanded */
        }

        .cursor-pointer {
                cursor: pointer;
        }

        /* checkout pages */
        
    #card-container, #address-container, #order-container {
      max-width: 100%;
      padding: 40px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

    #payment-button {
      margin-top: 20px;
      width: 100%;
      padding: 12px;
      background-color: #4CAF50;
      border: none;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      border-radius: 4px;
    }
    #payment-button:hover {
      background-color: #45a049;
    }


    .icon-tab {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }


     /* Transition effect for icon color */
    .icon-tab i {
      transition: color 0.3s ease;
    }
    /* Make the icon green on hover */
    .icon-tab:hover i {
      color: green;
      z-index: 1000;
    }
    /* Make the icon green when its tab is active */
    .icon-tab.active i {
      color: green;
    }
    
    /* Optional styling for active tab background */
    .icon-tab.active {
      border-radius: 0.25rem;
      transform: scale(1.15);
    }
    
    /* Optional: add hover effect for the tab container */
    .icon-tab:hover {
      cursor: pointer;
      z-index: 1000;
    }

    /* When another tab is hovered, remove zoom from active tab */

    /* not sure why but leave these brackets as is */
    .icon-tab.active.hovered-neighbor {
      transform: scale(1);
    }


#dash_header {
    position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Initially hide the header by moving it up */
  transform: translateY(-100%);
  /* Transition for a smooth slide-in/out effect */
  transition: transform 0.5s ease;
  z-index: 10000; /* Ensure it's on top */
}

#dash_header.sticky {
  transform: translateY(0);
}

.offcanvas {
  height: 100vh;
  overflow-y: auto;
  margin-top: var(--header-height); /* replace with actual header height if needed */
}


@media (min-width: 1200px) {
  #dash_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Initially hide the header by moving it up */
  transform: translateY(-100%);
  /* Transition for a smooth slide-in/out effect */
  transition: transform 0.5s ease;
  z-index: 1000; /* Ensure it's on top */
  }

#dash_header.sticky {
  transform: translateY(0);
}
}




/* When the header should appear */

/* } */



.pac-container {
  z-index: 1200 !important;
}

.pac-container.pac-sponsor-address {
  margin-top: -100px !important;
  z-index: 1200 !important;
}



  /* The switch container */
    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 25px;
      vertical-align: middle;
    }
    /* Hide the default checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }
    /* The slider knob */
    .slider:before {
      position: absolute;
      content: "";
      height: 17px;
      width: 17px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }
    /* When the checkbox is checked, change slider background color */
    input:checked + .slider {
      background-color: #198754;
    }
    /* When the checkbox is checked, move the slider knob */
    input:checked + .slider:before {
      transform: translateX(26px);
    }
    /* Toggle label styling */
    .toggle-label {
      font-family: sans-serif;
      font-size: 16px;
      margin-left: 10px;
      vertical-align: middle;
    }
    .toggle-label.off {
      color: #dc3545;
    }
    .toggle-label.on {
      color: #198754;
    }




    .package-items-round-top {
  border-radius: 14px 0px 0px 0px;
}

    .package-items-round-bottom {
  border-radius: 0px 0px 14px 14px;
}

.right-rounded {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .left-rounded {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
  }


  textarea.form-control.auto-resize {
    overflow-y: hidden  !important; /* Hide vertical scroll bar */
    resize: none  !important;       /* Optionally disable manual resizing */
}


.flip-card {
  perspective: 1000px;
  width: 100%;
  aspect-ratio: 1 / 1; /* makes it a square */
  border-radius: 1rem; /* rounded corners */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border-radius: 1rem; /* rounded corners to match */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1rem;
  overflow: hidden;
}

.flip-card-front {
  background-color: white;
  color: black;
}

.flip-card-back {
  background-color: #f8f9fa;
  color: black;
  transform: rotateY(180deg);
}

.flip-card {
  min-height: 200px;  /* Adjust as needed */
}

/*For the leaderboard */

.text-pink{

    color: #d63384 !important;
}

.text-purple{
    color: #6f42c1 !important;
}

.text-orange{
    color: #fd7e14 !important;
}

  #map {
    width: 100%;
    aspect-ratio: 2 / 3; /* 1.5 times taller than wide */
    min-height: 400px;
  }


  .modal-header.bg-success{

    background: linear-gradient(to top, #198754, #106640) !important;
  }

  .bg-success.bg-gradient-custom{
    background: linear-gradient(to top, #198754, #106640) !important;

  }

    .bg-success.bg-gradient-custom-reverse{
    background: linear-gradient(to bottom, #198754, #106640) !important;

  }

  .w-30 { width: 30%; }
  .w-35 { width: 35%; }
  .w-40 { width: 40%; }
  .w-45 { width: 45%; }