.audiostack-main-div .p-color {
  color: #111827 !important;
}
.audiostack-main-div .s-color {
  color: #101828 !important;
}
.audiostack-main-div .t-color {
  color: #667085 !important;
}

.audiostack-main-div select {
  border: 1px solid #d0d5dd;
  font-size: 14px;
  color: #344054;
}
.audiostack-main-div {
  text-transform: capitalize;
  text-decoration: none;
}
.audiostack-main-div a {
  text-decoration: none;
}

.audiostack-main-div .custom-dropdown-toggle::after {
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  float: right;
  margin-top: 8px;
}
.audiostack-main-div .toggle-caret {
  transform: scale(-1);
}

.audiostack-main-div .collapsed .toggle-caret {
  transform: scale(1);
}

/* Hide the default radio button */
.audiostack-main-div input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Create a custom radio button */
.audiostack-main-div .custom-radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fcfcfd; /* Default color */
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  margin-right: 5px;
  margin-top: 2px;
  border: 1px solid #eaecf0;
}

/* Style the inside of the selected radio button */
.audiostack-main-div input[type="radio"]:checked + .custom-radio {
  background-color: #fff; /* Change color when checked */
}

/* Create the dot inside the radio button */
.audiostack-main-div .custom-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #030a1e;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Hide the dot by default */
}

/* Show the dot when the radio button is selected */
.audiostack-main-div input[type="radio"]:checked + .custom-radio::after {
  display: block;
}

/* Styling the toggle button */
.audiostack-main-div .toggle {
  position: relative;
  width: 36px;
  height: 18px;
  background-color: #fcfcfd;
  border-radius: 15px; /* Round corners */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s; /* Smooth transition */
  margin-top: 5px;
  margin-right: 5px;
  border: 1px solid #eaecf0;
}

/* The toggle circle */
.audiostack-main-div .toggle:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #eaecf0; /* Circle color */
  border-radius: 50%; /* Make it a circle */
  top: 2px; /* Center it vertically */
  left: 2px; /* Center it horizontally */
  transition: transform 0.3s; /* Smooth transition */
}

/* Change background color and circle position when checked */
.audiostack-main-div input[type="checkbox"]:checked + .toggle {
  background-image: linear-gradient(to right, #c13765, #2535b4);
  border: 0px;
}

/* Move the circle to the right when checked */
.audiostack-main-div input[type="checkbox"]:checked + .toggle:before {
  transform: translateX(18px); /* Move the circle */
  background-color: #fff;
  top: 3px;
}

.audiostack-main-div .gradient-border-button {
  position: relative;
  padding: 10px 20px;
  color: white; /* Button text color */
  /* background-color: black; Button background color */
  border: none; /* Remove default border */
  font-size: 14px;
  cursor: pointer;
  overflow: hidden; /* Prevent overflow of pseudo-element */
  transition: color 0.3s; /* Smooth transition for text color */
  background-image: linear-gradient(to right, #c13765, #2535b4);
  color: #667085;
  z-index: 999;
  border-radius: 7px;
  width: 100%;
}

/* Gradient border using a pseudo-element */
.audiostack-main-div .gradient-border-button::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #fff; /* Gradient colors */
  z-index: -1; /* Place behind the button */
  padding: 2px; /* Border thickness */
  border-radius: 5px; /* Round corners */
  transition: opacity 0.3s; /* Smooth transition */
}

/* Change text color on hover */
.audiostack-main-div .gradient-border-button:hover {
  color: #ff6b6b; /* Change text color on hover */
}

/* Change opacity of the border on hover */
.audiostack-main-div .gradient-border-button:hover::before {
  opacity: 0.5; /* Slightly transparent border on hover */
}

/* Style the range input */
.audiostack-main-div input[type="range"] {
  -webkit-appearance: none; /* Remove default appearance */
  width: 100%; /* Full width */
  height: 8px; /* Track height */
  border-radius: 5px; /* Round corners */
  background: linear-gradient(
    to right,
    #c13765,
    #2535b4
  ); /* Gradient background */
  outline: none; /* Remove outline */
  opacity: 0.8; /* Slightly transparent */
  transition: opacity 0.2s; /* Smooth transition */
}

/* Change opacity on hover */
.audiostack-main-div input[type="range"]:hover {
  opacity: 1; /* Fully opaque on hover */
}

/* Style the thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default thumb */
  appearance: none;
  width: 16px; /* Thumb width */
  height: 16px; /* Thumb height */
  border-radius: 50%; /* Round thumb */
  background: #fff; /* Thumb color */
  cursor: pointer; /* Pointer cursor */
}

.audiostack-main-div input[type="range"]::-moz-range-thumb {
  width: 16px; /* Thumb width */
  height: 16px; /* Thumb height */
  border-radius: 50%; /* Round thumb */
  background: #fff; /* Thumb color */
  cursor: pointer; /* Pointer cursor */
}

.audiostack-main-div .gradient-text {
  background: linear-gradient(to right, #c13765, #2535b4); /* Gradient color */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.audiostack-main-div .gradient-background {
  background: linear-gradient(to right, #c13765, #2535b4); /* Gradient color */
}

.loading-div {
  width: 10%;
  height: 10px;
  background: linear-gradient(to right, #224bda, #e93ab8); /* Gradient color */
  animation: growShrink 8s infinite;
}
@keyframes growShrink {
  0% {
    width: 10%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 10%;
  }
}

.audiostack-main-div .nav-link {
  font-size: 16px;
  font-weight: 500;
  background-color: #fff !important;
  border: 0;
  border-bottom: 1px solid #ddd;
  color: #d0d5dd !important;
}

.audiostack-main-div .nav-link.active {
  border: 0;
  border-bottom: 1px solid #111827;
  color: #111827 !important;
}

.audiostack-main-div .btn-p {
  background-color: #101828;
  color: #fff;
}

.audiostack-main-div .btn-s {
  background-color: #d0d5dd;
  color: #101828;
}

.audiostack-main-div .btn-d {
  background-color: #101828;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  width: 25px;
  padding: 0px;
  height: 25px;
  justify-content: center;
  align-items: center;
}

.audiostack-main-div .btn-dropdown.collapsed {
  background-color: #d0d5dd;
  color: #101828;
}

.audiostack-main-div .btn-dropdown.collapsed path {
  fill: #101828;
}

.audiostack-main-div .btn-dropdown {
  background-color: #344054;
  color: #fff;
}

.audiostack-main-div .btn-dropdown path {
  fill: #fff;
}

.audiostack-main-div .custom-card {
  background-color: #f9fafb;
  padding: 25px;
}

.audiostack-main-div .btn-p:disabled {
  background-color: #d0d5dd !important;
  color: #fff;
}

.audiostack-main-div input::placeholder,
.audiostack-main-div textarea::placeholder {
  color: #d0d5dd;
}

.audiostack-main-div label {
  color: #111827;
}

.audiostack-main-div .fs-38 {
  font-size: 38px;
}
.audiostack-main-div .fs-32 {
  font-size: 32px;
}
.audiostack-main-div .fs-24 {
  font-size: 24px;
}

.audiostack-main-div .fs-20 {
  font-size: 20px;
}
.audiostack-main-div .fs-16 {
  font-size: 16px;
}
.audiostack-main-div .fs-14 {
  font-size: 14px;
}

.audiostack-main-div .fs-12 {
  font-size: 12px;
}
.audiostack-main-div .fs-8 {
  font-size: 8px;
}
.audiostack-main-div .fw-bold {
  font-weight: bold;
}

.audiostack-main-div .fw-light {
  font-weight: 300;
}
.audiostack-main-div .fw-semibold {
  font-weight: 600;
}
.audiostack-main-div .fs-small {
  font-size: small !important;
}
.audiostack-main-div .cursor-p {
  cursor: pointer;
}

.audiostack-main-div .audio-profile:hover {
  background-color: #eee;
}

.audiostack-main-div .mood-selected {
  color: #344054 !important;
  border: 1px solid #344054 !important;
}

.audiostack-main-div .hide {
  display: none;
}

.audiostack-main-div .sound-filter-btn {
  min-width: 100px;
  padding: 5px;
  border-radius: 5px;
  margin-right: 5px;
  cursor: pointer;
  margin-bottom: 5px;
  text-align: center;
  color: #98a2b3;
}

.audiostack-main-div .dropdown-menu {
  max-height: 200px;
  overflow: scroll;
}

.audiostack-main-div #soundTemplateTable th {
  white-space: nowrap;
  font-size: 14px;
  color: #667085;
  font-weight: 500;
}

.audiostack-main-div #soundTemplateTable td {
  font-size: 12px;
  border-bottom: 1px solid #667085;
}

/* Mobile Styles */
@media only screen and (max-width: 767px) {
  .audiostack-main-div .fs-24 {
    font-size: 14px;
  }
  .audiostack-main-div .nav-link {
    font-size: 12px;
  }
  .audiostack-main-div .form-check-label {
    font-size: 14px;
  }
  .audiostack-main-div .custom-radio {
    width: 16px;
    height: 16px;
  }

  .audiostack-main-div .fs-38 {
    font-size: 16px;
  }

  .audiostack-main-div .toggle {
    width: 60px;
  }

  .audiostack-main-div input[type="checkbox"]:checked + .toggle::before {
    transform: translateX(15px);
  }
}

.options-div {
  transition: 0.5s ease-in-out;
}

.div-hidden {
  height: 0;
  opacity: 0;
  display: none;
}

.div-shown {
  height: auto;
  opacity: 1;
  display: flex;
}

.ad-action-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Laptop Styles */
@media only screen and (min-width: 1024px) {
  .justify-content-lg-end {
    justify-content: end;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .audiostack-main-div .fs-38 {
    font-size: 20px;
  }
}