/* Change the color when the button is hovered over */
.logo .btn-primary:hover {
  background-color: #ef4e1c;
  border-color: #ef4e1c;
  color: white;
}

/* Change the color when the button is in focus (clicked) */
.logo .btn-primary:focus {
  background-color: #ef4e1c;
  border-color: #ef4e1c;
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(239, 78, 28, 0.5);
}

/* Change the color when the button is active */
.logo .btn-primary:active {
  background-color: #ef4e1c;
  border-color: #ef4e1c;
  color: white;
}

/* Change the color of the text when the dropdown item is hovered over */
.logo .dropdown-item:hover {
  color: #ef4e1c;
}

/* Change the color of the text when the dropdown item is in focus (clicked) */
.logo .dropdown-item:focus {
  color: #ef4e1c;
}

.text-dhiraagu:hover {
  color: #ef4e1c;
}

.form-control {
    height: 50px; /* Adjust this value as needed */
    padding: 10px; /* This adds padding inside the control, adjust as needed */
    font-size: 16px; /* Optional: Adjust font size if needed */
}

/* Promo Messaging Styling Section (promo-index.html)*/

/* Styling for the toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px; /* Adjust as necessary */
  height: 34px; /* Adjust as necessary */
  margin: 10px;
}

/* Hide default HTML 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; /* Gray background */
  transition: .4s;
  border-radius: 34px; /* Fully rounded edges */
}

.slider:before {
  position: absolute;
  content: ""; /* Empty content for the knob */
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Stylish ON/OFF labels */
.slider:after {
  content: 'TEST';
  color: #ff1500; /* Luminous Orange/Red text for 'Live' */
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  right: 10px; /* Adjust for OFF label position */
  font-size: 10px;
  font-family: sans-serif;
  transition: .4s;
}

 /* Box shadow on focus */
input:focus + .slider {
  box-shadow: 0 0 1px #7cff0a;
}

/* Position of the toggle button when in the ON position */
input:checked + .slider:before {
  transform: translateX(26px); /* Adjust distance for ON position */
}

/* Color of the slider when in the Live position */
input:checked + .slider {
  background-color: #ff4500; /* Luminous Orange/Red for 'Live' */
}

input:checked + .slider:after {
  content: 'LIVE';
  color: #fff; /* ON label color */
  left: 10px; /* Adjust for ON label position */
  right: auto;
  transition: .4s;
}

/* Default style when not checked (Test) */
input:not(:checked) + .slider {
  background-color: #7cff0a; /* Luminous Green for 'Test' */
}

input:not(:checked) + .slider:after {
  content: 'TEST';
  color: #fff; /* White text for visibility */
  left: 10px; /* Adjust for ON label position */
  right: auto;
  transition: .4s;
}

/* Adjustments for the range sliders if necessary */
.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

.range-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, #7cff0a 0% 70%, #d3d3d3 70% 100%);
}

.range-slider::-moz-range-track {
  width: 100%;
  height: 15px;
  background: linear-gradient(90deg, #7cff0a 0% 70%, #d3d3d3 70% 100%);
}

.range-slider::-moz-range-progress {
  background-color: #7cff0a; /* Firefox requires this pseudo-element for the track fill */
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider-container {
  position: relative;
  height: 200px; /* Adjust based on the height of your slider */
}

.slider-value {
  position: absolute;
  left: 50%; /* Adjust based on your layout */
  top: 50%;
  transform: translate(-50%, -50%);
  /* More styles as needed */
}

.vertical-slider {
  -webkit-appearance: none;
  width: 8px;
  height: 175px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  transform: rotate(-90deg);
}

.vertical-slider::-webkit-slider-runnable-track {
  background: linear-gradient(0deg, #7cff0a 0% 70%, #d3d3d3 70% 100%);
}

.vertical-slider::-moz-range-track {
  background: linear-gradient(0deg, #7cff0a 0% 70%, #d3d3d3 70% 100%);
}

.vertical-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.vertical-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

/*Pagination Styling*/
  .cci-pager{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:8px 0 16px 0;
    flex-wrap:wrap;           /* wraps nicely on small screens */
  }
  .cci-pager__range{
    color:#f15525;            /* matches your “Showing …” color */
    font-weight:600;
  }
  .cci-pager__nav{}
  .cci-pager__list{
    display:flex;
    align-items:center;
    gap:.4rem;
    list-style:none;
    margin:0;
    padding:0;
  }
  .cci-pager__item{
    display:inline-flex;
  }
  .cci-pager__link{
    display:inline-block;
    min-width:36px;
    padding:.35rem .6rem;
    border:1px solid #e6e6e6;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    font-size:.92rem;
    color:#06b6d4;            /* your teal links */
    background:#fff;
  }
  .cci-pager__item.is-active .cci-pager__link{
    background:#06b6d4;
    color:#fff;
    border-color:#06b6d4;
    cursor:default;
  }
  .cci-pager__item.is-disabled .cci-pager__link{
    color:#bbb;
    border-color:#eee;
    pointer-events:none;
    background:#fafafa;
  }

  /* compact on very narrow screens */
  @media (max-width: 576px){
    .cci-pager__link{ padding:.3rem .5rem; min-width:32px; }
  }