/* Apply background color on desktop and tablets */
@media (min-width: 768px) {
  .exr-itinerary-container {
    background-color: #f2f2f2; /* Use the variable or specific color if defined in your CSS */
  }
}

/* Remove background color on mobile */
@media (max-width: 767px) {
  .exr-itinerary-container {
    background-color: transparent;
  }
}




.exr-main-tab-titles{
    
    margin: 0px;
}

/* Default styles for mobile (no border) */
.scrollable-main-tabs,
.scrollable-vertical-tabs {
  border: none;
}

/* Apply borders only on tablets and desktops */
@media (min-width: 768px) {
  .scrollable-main-tabs {
    border-bottom: solid;
  }

  .scrollable-vertical-tabs {
    border-right: solid;
  }
}


/* Default style for desktop and tablets */
.scrollable-main-tabs {
  padding: 25px 20px 10px 20px; /* Padding: top right bottom left */
}

/* Style for mobiles only */
@media (max-width: 767px) {
  .scrollable-main-tabs {
    padding-top: 20px; /* Adjust the padding value as needed */
    padding-bottom: 10px;
    padding-right: 15px;
    padding-left: 18px;
    box-sizing: border-box;
  }
}


/* Default style for desktop and tablets */
.scrollable-vertical-tabs{
  padding: 25px 20px 10px 20px; /* Padding: top right bottom left */
}

/* Style for mobiles only */
@media (max-width: 767px) {
  .scrollable-vertical-tabs {
    padding-top: 0px; /* Adjust the padding value as needed */
    padding-bottom: 20px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) {
  .scrollable-vertical-tabs {
    scrollbar-width: none;  
  }
}




#v-pills-tab {
  min-width: 120px; /* Ensure a minimum width to prevent squeezing */
  white-space: nowrap; /* Prevent text from wrapping */
}

/* Base style for nav links */
.exr-main-tab-titles .nav-link {
    color: #1A3636; /* Non-active tabs in black */
    font-weight: normal;
    border-bottom: 0px solid transparent; /* Default underline size and transparent color */
    padding: 10px 15px; /* Add padding */
    outline: none; /* Remove default focus outline */
}

.exr-main-tab-titles .nav-link.active,
.exr-main-tab-titles .show>.nav-link {
    color: #3FA2F6; /* Active tab in blue */
    font-weight: bold;
    border-bottom: 4px solid #3FA2F6; /* Underline size and color for active tabs */
    padding: 10px 15px; /* Ensure active tabs have the same padding */
    outline: none; /* Remove default focus outline */
}

/* Hover effect for nav links */
.exr-main-tab-titles .nav-link:hover {
    color: #3FA2F6; /* Change text color on hover */
    border-bottom: 2px solid transparent; /* Transparent underline on hover */
}

/* Hover effect for inactive nav links */
.exr-main-tab-titles .nav-link:not(.active):hover {
  color: #3FA2F6; /* Change text color on hover for inactive tabs */
}

/* Ensure active tab remains styled correctly on hover */
.exr-main-tab-titles .nav-link.active:hover,
.exr-main-tab-titles .show>.nav-link:hover {
    color: #3FA2F6; /* Keep active tab text color in blue */
    border-bottom: 4px solid #3FA2F6; /* Keep underline for active tab in blue */
}

.nav-pills .nav-link {
  border: none;
}

.custom-vertical-tabs .nav-link {
  border: none;
}




/* Specific CSS for making different tabs scrollable on mobile */

/* Main Navigation Tabs */
@media (max-width: 768px) {
    .scrollable-main-tabs .nav-pills {
      white-space: nowrap;
      overflow-x: auto;
      flex-wrap: nowrap;
    }
    
    .scrollable-main-tabs .nav-item {
      flex: 0 0 auto;
    }
    
    .scrollable-main-tabs .nav-link {
      white-space: nowrap;
    }
  }
  
  /* Secondary Navigation Tabs */
  @media (max-width: 768px) {
    .scrollable-secondary-tabs .nav-underline {
      white-space: nowrap;
      overflow-x: auto;
      flex-wrap: nowrap;
    }
    
    .scrollable-secondary-tabs .nav-item {
      flex: 0 0 auto;
    }
    
    .scrollable-secondary-tabs .nav-link {
      white-space: nowrap;
    }
  }
  



/* Main Navigation Tabs */
.exr-tour-details-tab-title .nav-link {
    color: #000; /* Default text color */
    background-color: #dec2c2;
  }
  
  .exr-tour-details-tab-title .nav-link:focus,
  .exr-tour-details-tab-title .nav-link:hover {
    color: #fff; /* Hover and focus text color */
  }
  
  .exr-tour-details-tab-title .nav-link.active {
    color: #fff; /* Active text color */
    background-color: #007bff; /* Active background color */
  }
  
  .exr-tour-details-tab-title .nav-link.active:focus,
  .exr-tour-details-tab-title .nav-link.active:hover {
    color: #fff; /* Keep active text color same on hover and focus */
  }
  
  .exr-tour-details-tab-title .nav-link:not(.active):hover {
    color: #fff; /* Hover text color for inactive elements */
    background-color: #007bff; /* Active background color */
  }

  /* Specific CSS for making main navigation tabs scrollable on mobile */
  @media (max-width: 768px) {
    .scrollable-main-tabs .nav-pills {
      white-space: nowrap;
      overflow-x: auto;
      flex-wrap: nowrap;
    }
  
    .scrollable-main-tabs .nav-item {
      flex: 0 0 auto;
    }
  
    .scrollable-main-tabs .nav-link {
      white-space: nowrap;
    }
  }




/* Vertical Tabs ***************************************************************************************************************************************************/

  /* Vertical Tabs */
  @media (max-width: 768px) {
    .custom-vertical-tabs .scrollable-vertical-tabs {
      white-space: nowrap;
      overflow-x: auto;
      flex-wrap: nowrap;
    }
    
    .custom-vertical-tabs .scrollable-vertical-tabs .nav-item {
      flex: 0 0 auto;
    }
    
    .custom-vertical-tabs .scrollable-vertical-tabs .nav-link {
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .custom-vertical-tabs .scrollable-vertical-tabs .nav-link span {
      display: block;
      line-height: 1;
    }
  }


.custom-vertical-tabs .nav-link {
  color: #000; /* Default text color */
  background-color: #dec2c2;
  border-radius: 0.25rem;
  margin: 0.25rem;
}

.custom-vertical-tabs .nav-link:focus,
.custom-vertical-tabs .nav-link:hover {
  color: #fff; /* Hover and focus text color */
}

.custom-vertical-tabs .nav-link.active {
  color: #fff; /* Active text color */
  background-color: #007bff; /* Active background color */
}

.custom-vertical-tabs .nav-link.active:focus,
.custom-vertical-tabs .nav-link.active:hover {
  color: #fff; /* Keep active text color same on hover and focus */
}


/* Style for filtered vertical tabs */
.filtered-tab {
  color: white !important; /* Change to desired color */
  background-color: #007bff !important;/* Optional: Change background color for better visibility */
  }

  .custom-vertical-tabs .nav-link:not(.active):hover {
    color: #fff; /* Hover text color for inactive elements */
    background-color: #007bff !important;/* Optional: Change background color for better visibility */
  }


  
    
  /* Vertical Tabs */
  @media (max-width: 768px) {
    .custom-vertical-tabs .scrollable-vertical-tabs {
      white-space: nowrap;
      overflow-x: auto;
      flex-wrap: nowrap;
    }
  
    .custom-vertical-tabs .scrollable-vertical-tabs .nav-item {
      flex: 0 0 auto;
    }
  
    .custom-vertical-tabs .scrollable-vertical-tabs .nav-link {
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .custom-vertical-tabs .scrollable-vertical-tabs .nav-link span {
      display: block;
      line-height: 1.2;
    }
  }

/* Vertical end ***************************************************************************************************************************************************/

/* Default padding for desktop */
.exr-itinerary-container {
  padding: 30px; /* Adjust as needed for desktop */
}

/* Padding for mobile */
@media (max-width: 767px) {
  .exr-itinerary-container {
      padding-top: 20px; /* Adjust as needed for mobile */
      padding-left: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
  }
}