.audio_container {
      max-width: 400px;
      margin: 0 auto;
      position: relative;
    }

    .audio_container .hint-box .audio_title {
      font-size: 20px;
      font-weight: bold;
		color:#18233d;
    }

.audio-instrution-points ol {
	padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
	padding-top:10px !important;
}

.audio-instrution-points ol li{
	     font-size: 13px !important;
    font-weight: 500 !important;
    padding-bottom: 0 !important;
    margin-left: 10px !important;
    line-height: 20px !important;
	color:#18233d !important;


}
    .audio_container .hint-box .audio_description {
      font-style: italic;
      font-size: 12px;
      color: #444;
      margin-bottom: 0px;
    }

    .audio_container .hint-icon {
      cursor: pointer;
    }

    .audio_container .hint-icon svg {
      width: 35px;
      height: 35px;
      fill: #18233d;
    }

    .audio_container .hint-box {
      position: absolute;
      top: 94px;
      right: -302px;
      width: 260px;
      background: white;
      border: 1px solid #18233d;
      border-radius: 0px 20px 20px 20px;
      padding: 20px 20px;
      font-size: 13px;
      display: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 99;
    }

    .audio_container .progress-bar {
      width: 100%;
      margin-bottom: 10px;
    }

    .audio_container .progress-bar input[type="range"] {
		padding:0px !important;
      width: 100%;
      -webkit-appearance: none;
      height: 4px;
      background: #18233d;
      border-radius: 5px;
    }

    .audio_container .progress-bar input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #18233d;
      cursor: pointer;
    }

    .audio_container .progress-bar input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #18233d;
      cursor: pointer;
    }

    .audio_controls {
      display: flex;
      justify-content: center;
      gap: 35px;
      align-items: center;
      margin-bottom: 10px;
    }

    .audio_controls button {
      background: none;
      border: none;
      cursor: pointer;
    }

    .audio_controls svg {
      width: 32px;
      height: 32px;
      fill: #18233d;
    }

    .audio_container .hint-box .audio-heading-title {
      text-align: center;
    }

    .audio_container .icon_start,
    .audio_container_hidden_box .icon_start {
      background-color: #18233d !important;
      border-radius: 50%;
      padding: 5px 5px 0px 5px !important;
    }

    .audio_container_hidden_box .icon_start svg,
    .audio_container .icon_start svg {
      fill: #ffffff !important;
    }

    .audio_speed-wrapper {
      position: relative;
      display: inline-block;
    }

    .audio_container .speed-popup {
      display: none;
      position: absolute;
      bottom: -207px;
      left: -6px;
      background: white;
      padding: 0px 0px;
      border-radius: 8px;
      z-index: 100;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .audio_container button {
      background: none;
      border: none;
      font-size: 12px;
      color: #18233d;
      padding: 5px 4px;
      cursor: pointer;
      font-weight: bold;
    }

    .audio_speed-wrapper:hover .speed-popup {
      display: block;
    }

    .audio_controls {
      gap: 5px;
    }

    .audio_controls .new_design_icon svg {
      width: 27px;
    }

    .audio_controls .pdf_hint_icons .file-icons {
      display: flex;
      gap: 10px;
    }

    .audio_controls .pdf_hint_icons .file-icon {
      font-weight: 600;
      width: 36px;
      height: 36px;
      border: 2px solid #18233d;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #18233d;
      text-transform: lowercase;
    }

    .audio_controls .pdf_hint_icons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .audio_controls .voolumne_new_design {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .audio_controls .subtitle-wrapper {
      position: relative;
      display: inline-block;
    }

    .audio_controls .lang-dropdown {
      display: none;
      position: absolute;
      top: 40px;
      background: white;
      border: 1px solid #18233d38;
      border-radius: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      z-index: 200;
      width: 120px;
      overflow: hidden;
    }

    .audio_controls .lang-dropdown .select_language {
      padding: 8px;
      cursor: pointer;
      color: #18233d;
      font-size: 12px;
      border-bottom: 1px solid #0000000d;
    }

    .audio_controls .lang-dropdown .select_language:hover {
      background-color: #f0f0f0;
    }

    .audio_container_hidden_box {
      display: flex;
    }

    .audio_container_hidden_box .subtitle-box {
      width: 100%;
      display: none;
      border: 1px solid #18233d17;
      border-radius: 0px;
      padding: 0px 0px;
      margin-top: 20px;
      background: white;
      font-size: 14px;
      height: 220px;
      overflow-y: scroll;
      position: relative;
    }

    .audio_container_hidden_box .subtitle-box ul {
    margin: 0 !important;
    list-style: none;
    padding: 0 !important;
     
      margin-top: -35px !important;
      padding-top: 3px;
    }

    .audio_container_hidden_box .subtitle-box ul li:not(:last-child) {
      border-bottom: 1px solid #00000024;
    }

    .audio_container_hidden_box .subtitle-box ul li {
      padding-bottom: 5px;
      padding-top: 5px;
      padding: 6px 10px;
      font-size: 13px;
		    margin: 0 !important;
    }

    .audio_container_hidden_box .subtitle-box ul li span {
      padding-left: 0px;
    }

    .audio_container_hidden_box .subtitle-box ul li .language_box {
      padding: 0px !important;
         height: 10px;
    width: 10px;
    }

    .audio_container_hidden_box .subtitle-box ul li:hover {
      background-color: #f2efd5;
    }

    .audio_container_hidden_box .subtitle-box ul li.highlight {
      background-color: #f2efd5;
    }

    .audio_container_hidden_box .subtitle-box ul li .language_box svg {
      width: 15px !important;
      padding: 0;
    }

    .audio_container_hidden_box {
      max-width: 680px;
      margin: auto;
    }

    .audio_container_hidden_box .subtitle-box::-webkit-scrollbar {
      width: 8px;
    }

    .audio_container_hidden_box .subtitle-box::-webkit-scrollbar-track {
      background: #fff;
      border: 1px solid #18233d;
    }

    .audio_container_hidden_box .subtitle-box::-webkit-scrollbar-thumb {
      background-color: #18233d;
      border: 2px solid #1f2b49;
    }

    .audio_container_hidden_box .subtitle-box::-webkit-scrollbar-thumb:hover {
      background-color: #18233d;
    }

    .pdf_hint_icons .file-icons a {
      text-decoration: none;
    }

    .audio_container_hidden_box .first_a {
      font-size: 15px;
      font-weight: 600;
      color: #18233d70;
      cursor: pointer;
    }

    .audio_container_hidden_box .second_a {
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
    }

    .audio_container_hidden_box .font-controls {
      top: 10px;
      left: 93%;
      position: sticky;
      background-color: white;
      border-radius: 4px;
      padding: 2px 6px;
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      z-index: 10;
      width: fit-content;
    }

    .audio_controls .icon_start svg {
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .audio_controls .icon_start:hover svg {
      transition: background-color 0.2s ease, transform 0.2s ease;
      transform: scale(1.2);
    }

    .audio_controls .new_design_icon {
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .audio_container .speed-popup .set_speed {
      border-bottom: 1px solid #0000000d;
      display: block;
/*       width: 100%; */
      background-color: white;
      padding: 8px 12px;
      cursor: pointer;
      text-align: left;
      transition: background-color 0.2s ease;
    }

    .audio_container .speed-popup .set_speed:hover {
      background-color: #f0f0f0;
    }

    .audio_controls .loop_design_icon.active svg {
      transform: rotate(191deg);
      transition: transform 0.2s ease;
    }

    .audio_controls .loop_design_icon svg {
      transform: rotate(0deg);
      transition: transform 0.2s ease;
    }

    .audio_container .speed-popup .set_speed.active {
      background-color: #18233d;
      color: white;
    }

    .audio_controls .changes_spped_icon:hover {
      transform: scale(1) !important;
    }

    .audio_controls .pdf_hint_icons .file-icon:hover {
      background-color: #18233d;
      color: white;
    }

    .audio_controls .loop_design_icon.active {
      background-color: #18233d !important;
      border-radius: 51px;
      width: auto;
      padding: 2px 6px 0px 6px;
    }

    .audio_controls .loop_design_icon.active svg g {
      fill: white;
    }

    .audio_controls .lang-dropdown .select_language.active {
      background-color: #18233d;
      color: white;
    }

    .audio_container_hidden_box .font-dropdown .font_size_hadle.active {
      background-color: #18233d !important;
      color: white;
    }

    .audio_container_hidden_box .resizable-box {
      resize: both;
      overflow: auto;
      border: 1px solid #ccc;
      min-width: 200px;
      min-height: 100px;
      max-width: 100%;
      max-height: 500px;
      box-sizing: border-box;
      position: relative;
      background-color: #80808005;
    }

    .audio_controls .subtitle_active {
      display: none;
    }

    .audio_controls .subtitle_activeno {
      display: inline-block;
    }

    #subtitleToggleBtn.subtitles-on .subtitle_active {
      display: inline-block;
    }

    #subtitleToggleBtn.subtitles-on .subtitle_activeno {
      display: none;
    }

    .audio_container_hidden_box .font-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: #fff;
      border: 1px solid #18233d28;
      display: none;
      z-index: 10;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .audio_container_hidden_box .font-dropdown .font_size_hadle {
      padding: 5px 5px;
      cursor: pointer;
      font-size: 12px;
      border-bottom: 1px solid #0000001c;
    }

    .audio_container_hidden_box .font-dropdown .font_size_hadle:hover {
      background-color: #f0f0f0;
    }

    .audio_container_hidden_box .hover_id_font:hover #fontDropdown {

      display: block;
    }

    .audio_container_hidden_box .text_highlight {
      background-color: #fff166;
      padding: 3px 3px;
      border-radius: 5px;
    }

    .audio_controls .toggle_hint_new .svg_hover_show {
      display: none;
    }

    .audio_controls .toggle_hint_new:hover .svg_hover_show {
      display: block;
    }

    .audio_controls .toggle_hint_new:hover .svg_hover_hidden {
      display: none;
    }

    .audio_container_hidden_box span.de-line {
      margin-top: 5px;
    }

.audio_container_hidden_box .subtitle-box ul li .language_box {
    background-color: transparent !important;
    border: none;
    outline: none;
}
.audio_container_hidden_box .subtitle-box ul li .language_box svg{
	    background-color: #18233d !important;
    border-radius: 50%;
 padding: 2px 2px 2px 2px !important;
	width:18px !important;
	    margin-top: -5px;
}
.subtitle-box.resizable-box .combined-line .language_box svg {
    width: 15px !important;
}
.subtitle-box ul li span b {
    background-color: yellow;
    padding: 4px;
    border-radius: 4px;
}

    @media screen and (max-width:767px) {
      .audio_container_hidden_box {
        flex-wrap: wrap;
      }

      .audio_container .hint-box {
        top: 120px;
        right: 0px;
        border-radius: 20px 0px 20px 20px;
      }

      body {
        padding: 15px !important;
      }

      .audio_container_hidden_box .subtitle-box {
        margin-top: 10px;
      }
    }