/**
 * Theme Name:     OnePress Child
 * Author:         FameThemes
 * Template:       onepress
 * Text Domain:	   onepress-child
 * Description:    OnePress is an outstanding creative and flexible WordPress one page theme well suited for business website, portfolio, digital agency, product showcase, freelancers and everyone else who appreciate good design. The theme overall is an elegant and classic one, a fine example of Bootstrap 4 WordPress theme which compatibility with latest version of WooCommerce. (Live preview : https://demos.famethemes.com/onepress)
 */
 


/* custom css theme */

.e-con > .e-con-inner{
	max-width:1320px !important;
}
.hfeed.site {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
body.logged-in .hfeed.site {

  height: calc(100vh - 32px);
}
.main-div {
  flex: 1 1 0%;
  overflow-y: auto;
}
body{
	overflow: hidden;
}
 :root {
     --primary-color: #b70b20;
	 --ast-global-color-1:#b70b20;
     --primary: #b70b20;
     --white-color: #fff;
     --white: #fff;
     --fb-color-btn: #1877f2;
     --google-color-btn: #4285f4;
     --black-color: #000000;
     --dark-bg: #131313;
     --text-dark: #2d3035;
     --dark-grey: #4f5762;
     --light-grey: #737d8b;
     --text-light: #c9d1d7;
     --Ultra-Light: #f6f7fa;
     --Logo-Red: #e11e38;
     --light-bg: #ECEFF5;
     --light: #ECEFF5;
}
 @font-face {
     font-family: Jost-Black;
     src: url(/wp-content/fonts/Jost-Black.ttf);
}
 @font-face {
     font-family: Jost-Bold;
     src: url(/wp-content/fonts/Jost-Bold.ttf);
}
 @font-face {
     font-family: Jost-SemiBold;
     src: url(/wp-content/fonts/Jost-SemiBold.ttf);
}
 @font-face {
     font-family: Jost-ExtraBold;
     src: url(/wp-content/fonts/Jost-ExtraBold.ttf);
}
 @font-face {
     font-family: Jost-Medium;
     src: url(/wp-content/fonts/Jost-Medium.ttf);
}
 @font-face {
     font-family: Jost-Regular;
     src: url(/wp-content/fonts/Jost-Regular.ttf);
}
 @font-face {
     font-family: Jost-ExtraLight;
     src: url(/wp-content/fonts/Jost-ExtraLight.ttf);
}
 body {
     margin: 0;
     padding: 0;
     font-family: Jost-Regular !important;
}
.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb),var(--bs-bg-opacity)) !important;
}
 .form-bg-color {
     background: var(--Ultra-Light);
}
 .mb-10 {
     margin-bottom: 10px !important;
}
 .mb-16 {
     margin-bottom: 16px !important;
}
 .mb-18 {
     margin-bottom: 18px !important;
}
 .mt-19 {
     margin-top: 19px !important;
}
 .mt-20 {
     margin-top: 20px !important;
}
 .mt-21 {
     margin-top: 21px !important;
}
 .mb-29 {
     margin-bottom: 29px !important;
}
 .mb-30 {
     margin-bottom: 30px !important;
}
 .mt-31 {
     margin-top: 31px !important;
}
 .mt-33 {
     margin-top: 33px !important;
}
 .mt-37 {
     margin-top: 37px !important;
}
 .mt-38 {
     margin-top: 38px !important;
}
 .mt-40 {
     margin-top: 40px !important;
}
 .mb-43 {
     margin-bottom: 43px !important;
}
 .ms-36 {
     margin-left: 36px !important;
}
 .ms-92 {
     margin-left: 92px !important;
}
 .p-16 {
     padding: 16px !important;
}
 .p-18 {
     padding: 18px !important;
}
 .pt-10 {
     padding-top: 10px !important;
}
 .py-10 {
     padding-top: 10px !important;
     padding-bottom: 10px !important;
}
 .pt-12 {
     padding-top: 12px !important;
}
 .pt-11 {
     padding-top: 11px !important;
}
 .py-11 {
     padding-top: 11px !important;
     padding-bottom: 11px !important;
}
 .py-13 {
     padding-top: 13px !important;
     padding-bottom: 13px !important;
}
 .p-20 {
     padding: 20px;
}
 .py-24 {
     padding-top: 24px !important;
     padding-bottom: 24px !important;
}
 .py-30 {
     padding-top: 30px !important;
     padding-bottom: 30px !important;
}
 .py-38 {
     padding-top: 38px !important;
     padding-bottom: 38px !important;
}
 .pt-40 {
     padding-top: 40px !important;
}
 .pb-64 {
     padding-bottom: 64px !important;
}
 .font-12 {
     font-size: 12px !important;
}
 .font-14 {
     font-size: 14px !important;
}
 .font-18 {
     font-size: 18px !important;
}
 .font-22 {
     font-size: 22px !important;
}
 .font-24 {
     font-size: 24px !important;
}
 .font-36 {
     font-size: 36px !important;
}
 .fw-normal {
    /* font-weight: 400 !important;
     */
     font-family: Jost-Regular !important;
}
 .fw-medium {
    /* font-weight: 500 !important;
     */
     font-family: Jost-Medium !important;
}
 .fw-semibold {
    /* font-weight: 600 !important;
     */
     font-family: Jost-SemiBold !important;
}
 .fw-bold {
    /* font-weight: 700 !important;
     */
     font-family: Jost-Bold !important;
}
 .fw-bolder {
    /* font-weight: 800 !important;
     */
     font-family: Jost-ExtraBold !important;
}
 .text-black {
     color: var(--black-color) !important;
}
 .text-dark {
     color: var(--text-dark) !important;
}
 .text-light-grey {
     color: var(--light-grey) !important;
}
 .text-light {
     color: var(--text-light) !important;
}
 .sign-in-btn {
     width: 120px !important;
}
 .outline-primary-btn {
     width: 120px !important;
}
 .boxHeight .w-full {
     width: 100%;
}
 .boxHeight {
     display: flex;
     align-items: stretch;
     justify-content: stretch;
}
/* header start */
 div#loadMoreContainer .btn.btn-primary, #loadMoreSongContainer .btn.btn-primary{
     padding-top: 10px;
     padding-bottom: 10px;
}
 div#loadMoreContainer {
     text-align: center;
}
.site-header{
	background: linear-gradient(0deg, #4f5762, #000 60%) !important;
}
.onepress-menu .menu-item-has-children .nav-toggle-subarrow {
  display: block !important;
  position: absolute;
  right: 0;
}
.onepress-menu .menu-item-has-children .nav-toggle-subarrow i{
	//color:#fff;
}
.onepress-menu .menu-item-has-children {
  position: relative;
}
.onepress-menu a{
	font-size: 14px!important;
  font-family: Jost-Bold!important;
	font-weight:normal !important;
}
.site-branding {
  float: unset !important;
}
.onepress-menu > li {
  float: none !important; 
  display: inline-block;
}
.onepress-menu {
  float: none !important;
}
#site-navigation {
  text-align: center;
}
#header-section .custom-logo {
  max-width: 284.594px;
  width: 100%;
  flex-shrink: 0;
  object-fit: contain;
}
#header-section .site-title {
  display: none !important;
}
  .header-full-width .container {
    padding-left: 0px !important;
  padding-right: 0px !important;
  width: 100% !important;
  max-width: 100% !important;
  }
.onepress-menu ul li a{
	color: var(--bs-dropdown-link-color);
	font-family: Jost-Regular !important;
	text-align:left !important;
}
.site-branding .site-logo-div {
  text-align: center;
}
.site-branding {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 40px;
}
.wp-block-image {
    margin: 0 0 1em;
    margin-bottom: 0px;
}
.poerhitz {
    border-right: 2px solid #b10607;
    padding-right: 27px;
}
/* .onepress-menu .current_page_item a, .onepress-menu a:hover{
	color:var(--primary-color) !important
}
 */
.header-right-wrapper{
	padding-right: 1rem;
	padding-left: 1rem;
	padding-top: 0;
	padding-bottom: 0;
	border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
 .dropdown-menu.show .dropdown-item:hover {
     color: var(--primary-color);
}
 .dropdown-item.active, .dropdown-item:active {
     background-color: var(--primary-color) !important;
     color: var(--white-color) !important;
}
.recently-played-container a, .view-more-btn a {
  color: var(--text-light);
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.powerhits-card-content .w-full {
 width: calc(100% - 70px);
}

.powerhits-card-img .powerhits-card-content .already-playing-song {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  bottom: 20px;
  overflow: hidden;
  cursor: pointer;
}
 .song-card-custom.big-card .category-song-img img {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 .song-card-custom.big-card .category-song-img {
     position: relative;
     overflow: hidden;
     padding-top: 56.25%;
     border-radius: 8px;
}
 .song-card-custom.big-card .category-song-img .song-play, .card.song-card-custom.small-card .song-play {
     position: absolute;
     bottom: 15px;
     right: 15px;
     height: 40px;
     width: 40px;
     border-radius: 50%;
     overflow: hidden;
     z-index: 99;
}
 .song-card-custom.big-card .category-song-img .song-play img, .card.song-card-custom.small-card .song-play img{
     position: unset !important;
     height: 100%;
     width: 100%;
     object-fit: contain;
     z-index: 1;
     border-radius: 50%;
}
 .card.song-card-custom.small-card .song-img{
     position: relative;
     overflow: hidden;
     padding-top: 100%;
     border-radius: 8px;
}
 .card.song-card-custom.small-card .song-img img {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     object-fit: cover;
}
/* header end */
/* buttons start */
 .outline-primary-btn {
     display: flex;
     padding: 10px 11px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
     border-radius: 6px;
     font-size: 14px;
     font-family: Jost-Bold;
     border: 1.25px solid var(--primary-color) !important;
     background: var(--white-color) !important;
     color: var(--primary-color) !important;
}
 .outline-fb-btn {
     border: 1.25px solid var(--fb-color-btn) !important;
     background: var(--white-color) !important;
     color: var(--fb-color-btn) !important;
}
 .outline-google-btn {
     border: 1.25px solid var(--google-color-btn) !important;
     background: var(--white-color) !important;
     color: var(--google-color-btn) !important;
}
 .outline-apple-btn {
     border: 1.25px solid var(--black-color) !important;
     background: var(--white-color) !important;
     color: var(--black-color) !important;
}
 .primary-btn {
     display: flex;
     padding: 10px 11px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     border-radius: 6px;
     font-size: 14px;
     font-family: Jost-Bold;
     border: 1.25px solid var(--primary-color) !important;
     background: var(--primary-color) !important;
     color: var(--white-color) !important;
     transition: all 0.2s;
}
 .primary-btn:hover {
     background: #a80518 !important;
}
/* buttons end */
 .form-bg-img {
     background-image: url("/wp-content/assets/images/login-bg.png") !important;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
}
.gform_title {
  font-size: 24px !important;
  color: var(--black-color) !important;
  font-family: Jost-ExtraBold !important;
  text-transform: uppercase;
}
/* form section start */
 .listening-music-person {
     height: 687.42px;
     width: 100%;
     object-fit: cover;
     border-radius: 30px;
}
.gfield_label {
  font-family: Jost-Bold !important;
  color: var(--black-color) !important;
  font-size: 14px !important;
  font-weight: normal !important;
}
.ginput_container input, .ginput_container select {
  border-radius: 8px;
  border: 1.25px solid var(--text-light) !important;
  background: var(--white-color);
	background-color: var(--white-color) !important;
  font-size: 14px !important;
  box-shadow: none !important;
	-webkit-box-shadow:none !important;
  padding: 14px 10px !important;
	width:100% !important;
}
.gform_description {
  font-size: 14px !important;
  color: var(--text-dark) !important;
  font-family: Jost-Regular !important;
  margin-bottom: 31px !important;
  margin-top: 19px !important;
  line-height: normal;
}
body .gform_wrapper ul li.gfield {
  margin-top: 20px !important;

}
 .form-card-design {
     border-radius: 30px;
     background: var(--Ultra-Light);
     display: inline-flex;
     padding: 37px 78px 41.803px 74px;
     flex-direction: column;
     width: 100%;
}
 .custom-input-group {
     border-radius: 8px;
     border: 1.25px solid var(--text-light);
     background: var(--white-color);
     font-size: 14px;
}
.custom-input-group input, .custom-input-group select, .custom-input-group input:focus, .custom-input-group select:focus, .custom-input-group input:hover, .custom-input-group select:hover, .custom-input-group input:active, .custom-input-group select:active {
  background-color: #fff !important;
  border-width:0 !important;
  background: #fff !important;
}
 .custom-input-group .input-group-text {
     color: var(--dark-grey);
}
/* form section end */
/* sign-up start */
 .sign-up-card {
     width: 1050px;
     border-radius: 30px;
     background: var(--Ultra-Light);
     padding: 32px 41px;
}
 .sign-up-card .music-img-signup {
     width: 100%;
     object-fit: cover;
     border-radius: 10px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}
 .border-top-light {
     border-top: 1px solid var(--text-light);
}
 .border-bottom-light {
     border-bottom: 1px solid var(--text-light);
}
 .sign-up-card .hot-108-logo {
     width: 395px;
     height: 85px;
     object-fit: contain;
}
/* sign-up end */
/* page design start */
/*  main {
     background-color: var(--Ultra-Light);
} */

.custom-input-group {
  border-radius: 8px;
  border: 1.25px solid var(--text-light);
  background: var(--white-color);
}
.flex-2-grid p {
  flex: 1 1 0%;
}
.flex-2-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.wpcf7-form-control {
  border: 1.25px solid var(--text-light) !important;
  background: var(--white-color);
  font-size: 14px !important;
  border-radius: 0;
  box-shadow: none !important;
  background-color: #fff !important;
	width:100%;
  border-radius: 8px;
}
.wpcf7-form-control.wpcf7-submit {
  display: inline-flex !important;
  padding: 14px 11px !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: Jost-Bold;
  border: 1.25px solid var(--primary-color) !important;
  background: var(--primary-color) !important;
  color: var(--white-color) !important;
  transition: all 0.2s;
	max-width:415px;
}
.page-id-57 #content {
  background-color: var(--Ultra-Light);
}
 .back-icon-img {
     position: absolute;
     left: -65px;
}
 .background-dark-linear {
     border-radius: 8px;
     width: 100%;
     height: 423px;
     background: linear-gradient(180deg, #000 0%, #020303 25%, #0a0b0d 44%, #171a1d 62%, #2a2e34 78%, #424851 93%, #4f5762 100%);
     display: flex;
     justify-content: center;
     align-items: center;
}
 .background-dark-linear img {
     height: 173px;
     object-fit: contain;
     width: 100%;
}
 .text-primary-2 {
     color: var(--primary-color) !important;
}
 .view-more-btn .dropdown-toggle {
     border-radius: 8px;
     border: 1px solid var(--primary-color);
     width: fit-content;
     padding: 8px 12px;
}
 .view-more-btn .dropdown-toggle::after {
     display: none;
}
 .top-home-img {
     border-radius: 1rem;
     overflow: hidden;
     position: relative;
}
 .top-home-img img {
     width: 100%;
     object-fit: cover;
}
 .top-home-img .home-img-content {
     position: absolute;
     bottom: 0;
     right: 0;
     display: inline;
}
 .home-page-image {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .home-page-image img {
     width: 100%;
     object-fit: cover;
     height: 562px;
}
 .home-page-image .hot-radio-content {
     position: absolute;
}
 .page-light-bg {
     background: var(--light-bg);
}
 .song-card-custom {
     border-radius: 10px;
     background: var(--white-color);
     border: 0;
     border: 1.25px solid #ECEFF5 !important;⁨
     cursor: pointer;
     /*box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.10);*/
}

.currently-playing  .song-card-custom{
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10); ⁨⁨ ⁨
}
 
 .song-card-custom .song-img img {
     width: 100%;
     object-fit: cover;
     border-radius: 10px;
}
 .song-card-custom .song-img.active {
     position: relative;
}
 .song-card-custom .song-img.active::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 8px;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%);
}
 .song-card-custom .song-img .song-play {
     position: absolute;
     bottom: 20px;
     right: 20px;
     height: 50px;
     width: 50px;
     object-fit: contain;
     z-index: 1;
}
 .powerhits-card-img {
     position: relative;
     padding-top: 56.25%;
     overflow: hidden;
}
 .powerhits-card-img:after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border-radius: 10px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}
 .powerhits-card-img .powerhits-card-content {
     position: absolute;
     bottom: 0;
     width: 100%;
     left:0;
     right:0;
     z-index: 1;
}
 .powerhits-card-img .powerhits-card-content .title {
     font-size: 22px;
     font-family: Jost-Bold;
     color: var(--white-color);
     margin-bottom: 10px;
}
 .powerhits-card-img .powerhits-card-content .details {
     font-size: 14px;
     font-family: Jost-Regular;
     color: var(--text-light);
     margin-bottom: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 300px;
}
 .powerhits-card-img .home-page-img-bottom {
     height: 100%;
     width: 100%;
     object-fit: cover;
     position: absolute;
     border-radius: 10px;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
}
 .news-card-custom {
     border-radius: 10px;
     background: var(--white-color);
     box-shadow: 0px 0px 10px 0px rgba(7, 7, 7, 0.10);
     display: flex;
     padding: 35px 42px;
     margin-top:15px;
}
 .flexFull{
     flex:1 1 0%;
}
 .news-card-img {
     border-radius: 8px;
     height:158px;
     width:158px;
     min-width:158px;
     overflow: hidden;
     position: relative;
     margin-right: 30px;
}
 .news-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
}
 .upload-news-img {
     height: 150px;
     width: 150px;
     border: 1px solid rgb(216, 216, 216);
     border-radius: 8px;
}
 .upload-news-img .upload-img-input {
     height: 150px;
     width: 150px;
     cursor: pointer;
     opacity: 0;
}
 .news-heading-img {
     height: 423px;
     border-radius: 8px;
     overflow: hidden;
}
 .news-heading-img img {
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 .accordion-custom .accordion-item {
     border-radius: 8px;
     background: var(--white-color);
     box-shadow: 0px 0px 10px 0px rgba(7, 7, 7, 0.10);
     overflow: hidden;
}
 .accordion-button:not(.collapsed) {
     color: inherit;
     background-color: inherit;
     box-shadow: none;
}
/* playlists */
 .table-card-design {
     border-radius: 10px;
     overflow: hidden;
     border: 1.25px solid var(--light-bg);
     background: var(--white-color);
}
 .table-card-design thead th {
     background-color: var(--light-grey);
     padding: 22px 10px 20px;
     font-size: 14px;
     font-family: Jost-Bold;
     color: var(--white-color);
     white-space: nowrap;
}
 .table-card-design thead tr th:first-child, .table-card-design thead tr th:last-child, .table-card-design .table tbody tr td:first-child, .table-card-design .table tbody tr td:last-child {
     padding-left: 23px !important;
     padding-right: 23px !important;
}
 .table-card-design .table tbody tr td {
     vertical-align: middle;
}
 .table-card-design .table tbody tr.active td {
     background: var(--Ultra-Light);
}
 .table-card-design .playlist-small-image {
     width: 44px;
     height: 44px;
     border-radius: 8px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
     overflow: hidden;
     position: relative;
}
 .table-card-design tbody tr.active .playlist-small-image::after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     border-radius: 8px;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%);
}
 .table-card-design tbody tr.active .playlist-small-image svg {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     z-index: 1;
     display: flex;
     justify-self: center;
     align-self: center;
}
 .playlist-small-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .station-logo {
     display: flex;
     padding: 58px 0px 58.173px 0px;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
     border-top: 2px solid var(--primary-color);
     background: var(--black-color);
}
/* page design end */
/* footer start */
html, body {
  min-height: 100%;
  height: unset !important;
	
}
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
 .footer {
     background-color: var(--dark-bg);
}
 .grey-section-image {
     background-image: url("/wp-content/assets/images/grey-rectangle.jpg");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
/*   height: 90px;*/
/*      position: fixed;
     bottom: 0;
     left: 0;
     right: 0; */
     z-index: 999;
     min-height: 90px;
     -webkit-transition: all 0.5s ease;
     -moz-transition: position 0.5s;
     -ms-transition: position 0.5s;
     -o-transition: position 0.5s;
     transition: all 0.5s ease;
     transition-duration: 0.5s;
}
.expanded {
    height: 450px;
    transition-delay: 1s;
}
.popover-backdrop{
    display: none!important;
}
.site-footer .site-info {
    z-index: 1;
}
 .grey-section-image-content {
     padding-top: 12px !important;
     padding-bottom: 4px !important;
     padding-left:30px;
     padding-right:30px;
     min-height: 90px;
     width: 100%;
     /*display: flex;*/
     /*position: relative;*/
     /*justify-content: space-between;*/
     /*align-items: center;*/
}
 .grey-section-image-content .song-name {
     font-size: clamp(10px, 5vw, 18px);
     font-family: Jost-Bold;
     color: var(--white-color);
     text-transform: capitalize;
}
 .select-station-name {
     position: relative;
     display: flex;
     gap:10px;
     cursor:pointer;
     width:150px;
     min-height: 57px;
     align-items: center;
      /*justify-content: center;*/
}
.select-station-name h6{
    color: #fff;
    margin-bottom: 0;
}
.song-list {
    padding: 9px 14px;
    padding-bottom: 0;
    margin-bottom: 8px;
}
.select-station-name .form-select {
     background: transparent;
     border: none !important;
     outline: none !important;
     box-shadow: none !important;
     color: var(--white-color);
     font-size: 18px;
     font-style: normal;
     font-family: Jost-Bold;
     line-height: normal;
}
.select-station-name .form-select option {
     font-family: Font-Regular;
     color: #000;
}
 .select-station-name .form-select option:hover {
     background-color: var(--primary);
}
.select-station-name i {
     /*position: absolute;
     top: 11px;
     right: 14px;*/
     color: var(--text-light);
}
 .music-image {
     width: 48px;
     height: 48px;
     flex-shrink: 0;
     object-fit: cover;
     margin-bottom: 0px;
}
.progress.music-player {
     max-width: 300px;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: var(--Logo-Red);
  flex: 1 1 0%;
}
.progress.music-player .bg-light-color {
     border-radius: 10px;
     background: var(--white-color);
}
 .progress.volume-medium {
     width: 100%;
  background: #dedede;
  height: 20px;
  border-radius: 40px;
  position: relative;
}
.popover-content  .progress-bar  {
     border-radius: 40px;
  background: #4ecdc4;
}
.popover-content .volume-icon {
  width: 1.5rem;
  height: 1.5rem;
  padding-right: 1rem;
  color: #777;
  box-sizing: content-box;
}

#volume-control {
    position: relative;
    width: 100%;
    height: 20px;
    background: #ddd;
    border-radius: 40px;
    overflow: hidden;
}

#volume-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #00bcd4; /* Turquoise color */
    border-radius: 40px;
}

#volumeknob {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #008c99;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.volume-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 22px;
}
/* Popover content box */
.popover-content {
  position: absolute;
  background: #f2f2f2;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #333;
  display: none;
  z-index: 9999; /* Above backdrop */
  width: 270px;
  bottom: 46px;
  right: -20px;
}
@media screen and (max-width:991.99px){
    .popover-content {
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;
    
}
.popover-content::before {
    right:calc(50% - 10px) !important;
}
.volume-container {
  position: unset !important;
}
.sm-relative-div{
    position:relative !important;
}
.mb-mt-10{
    margin-top:10px;
}
}
.popover-content::before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 1.7rem;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #f2f2f2 transparent transparent transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
  z-index: 1051;
}
/* Backdrop overlay */
.popover-backdrop {
  position: fixed; /* Cover entire viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.25); /* translucent dark */
  z-index: 999999; /* Just below popover */
  display: none;
}

/* .site-footer {

  padding-bottom: 120px !important;
} */
 .footer-bottom {
     padding: 77px 0 38px;
}
 .footer-bottom .small-hot-108-img {
     width: 138px;
     height: 29px;
     flex-shrink: 0;
     object-fit: contain;
}

 .site-footer .google-play-img img {
     width: 128.89px;
     height: 40px;
     flex-shrink: 0;
     object-fit: contain;
}
body.page-template-reset-password .form-card-design form p{
    margin-top: 6px;
}
body.blog h2.page-title{
    margin-bottom: 20px;
}
a.playBtn {
    border-radius: 6px;
    font-size: 14px 
    border: 1.25px solid var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
    transition: all 0.2s;
    width: 38px !important;
    font-size: 12px;
    padding: 5px 0px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
}
 @media screen and (max-width:767px){
body.playlist-template-default .progress.music-player {
 width: 250px;
 }
 body.playlist-template-default .custom_gap {
    display: block !important;
}
 .station__dropdown::-webkit-scrollbar {
  width: 0.7em;
}
.station-list .song_lising:hover .song-img1 .play{
    display: none !important;
}
.station-list .song-img1 .play{
   display: none !important;
}
 .song-img1 {
    /*position: relative;*/
    /*padding-top: 4px;*/
    /*left: 0;*/
    margin-bottom: 5px;
}
 .text-light {
    line-height: 17px;
}
.site-logo-div img {
  height: 75px !important;
}
.top-header {

  padding-top: 5px;
  padding-bottom: 5px;
}
/*.site-branding {*/
/*    height: 80px;*/
/*}*/
.grey-section-image-content {
    padding: 0px 15px;
}
.header-right-wrapper {
    padding: 9px 17px;
}
 .song_lising a {
    display: flex;
    gap: 11px!important;
    align-items: center;
    text-decoration: none !important;
    flex-wrap: wrap;
}
 .site-branding {
    padding: 0rem 1.5rem;
}
 section.dark-grey-bg .d-flex {
    flex-wrap: wrap;
}
.song-list {
    margin-bottom: 0;
}
.progress.music-player {
    width: 226px;
}
.custom_gap{
   display: flex; 
   column-gap: 24px;
}
 .back-icon-img img{
    width: 36px;
    margin-right: 10px;
}
.back-icon-img {
    position: relative;
    left: 0;
}
button[data-bs-target="#exampleModal"] {
    white-space: nowrap;
}
     .news-card-img {
         height:unset;
         width:100%;
         min-width:100%;
         padding-top:100%;
         margin-bottom:15px;
         margin-right:0;
    }
     .news-card-custom {
         display: flex;
         flex-direction: column;
         padding: 20px;
    }
    .powerhits-card-img .powerhits-card-content .details{
      width:150px !important;  
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .site-logo-div img {
  height: 60px;
}
.wp-block-image img {

  height: 60px;
  object-fit: contain;
}
}
/* footer end */
/* responsive tablet & mobile screen start */
 @media screen and (max-width: 992px) {
     .logo {
         max-width: 200.594px;
    }
     .header .power-logo {
         max-width: 150px;
    }
     .ms-36 {
         margin-left: 0 !important;
    }
     .ms-92 {
         margin-left: 0 !important;
    }
     .sign-in-btn {
         width: 84px !important;
    }
    .outline-primary-btn{
      width: 84px !important;  
    }
     .listening-music-person {
         height: 400px;
    }
     .form-card-design {
         padding: 1.5rem;
    }
     .sign-up-card {
         padding: 1.5rem;
         margin: 0 1rem;
         width: 100%;
         max-width: 600px;
    }
     .sign-up-card .hot-108-logo {
         max-width: 200px;
         width: 100%;
    }
     .footer .station-logo .logo {
         max-width: 200px;
    }
     .footer .grey-section-image {
         background-image: none;
         height: unset;
    }
     .grey-section-image-content {
         position: unset;
         background: linear-gradient(45deg, var(--text-dark), var(--dark-grey), var(--dark-grey));
         padding: 1rem;
    }
     .footer .select-station-name .form-select {
         font-size: 14px;
    }
     .footer .music-image {
         width: 46px;
         height: 46px;
    }
     .grey-section-image-content .song-name {
         font-size: 14px!important;
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 1;
         line-clamp: 1;
         -webkit-box-orient: vertical;
    }
     .footer .grey-section-image-content .artist-name {
         padding-top: 0px !important;
         font-size: 12px !important;
    }
     .footer .progress.music-player {
         max-width: 220px;
         width: 100%;
    }
    
}

 .page-title {
     color: var(--black-color);
     font-family: Jost-ExtraBold;
     text-transform: uppercase;
     font-size: 36px;
     margin: 0;
}
 .section-title {
     color: var(--black-color);
     font-family: Jost-ExtraBold;
     text-transform: uppercase;
     font-size: 24px;
     margin: 0;
}
 .song-card-custom .card-title {
     color: var(--black-color);
     font-family: Jost-Bold;
     font-size: 22px;
     margin-top: 12px;
     margin-bottom: 0;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
}
 .small-card .card-title {
     font-size: 14px;
}
 .song-card-custom .card-sub-title {
     color: var(--black-color);
     font-family: Jost-Regular !important;
     font-size: 14px;
     margin-top: 10px;
     margin-bottom: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
}
 .banner-top {
     background-repeat: no-repeat;
     background-size: cover;
     padding: 60px 0;
}
 .banner-bottom {
     background-repeat: no-repeat;
     background-size: cover;
     padding: 60px 0;
}
 .title-one {
     color: var(--white) !important;
  font-family: Jost-ExtraBold !important;
  font-size: 50px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: normal;
  text-transform: uppercase;
  margin: 0;

}
 .sub-title-one {
     color: var(--light)!important;
     font-family: Jost-Regular!important;
     font-size: 23px!important;
     font-style: normal!important;
     font-weight: 400!important;
     line-height: normal!important;
     margin: 0;
}
.entry-content {
  margin-bottom: 0 !important;
}
#primary{
	padding-bottom:0 !important;
}
.bottom-content{
	text-align:center;
}
 .bottom-content h1 {
     color: var(--white);
     text-align: center;
     font-family: Jost-ExtraBold;
     font-size: 33px;
     font-style: normal;
     margin-top: 0;
     margin-bottom: 10px;
     line-height: normal;
     text-transform: uppercase;
}
 .bottom-content p {
     color: var(--light);
     text-align: center;
    /* Paragraph */
     font-family: Jost-Regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     width: 100%;
     max-width: 850px;
	 margin-left:auto;
	 margin-right:auto;
	 margin-bottom:40px;
}
 .custom-btn-group {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
}
.btn-primary-target button i{
	transform:unset !important;
	position:unset !important
}
.btn-primary-target button{
	 display: inline-flex !important;
     padding: 20px 26px !important;
     justify-content: center;
     align-items: center;
     gap: 10px;
     border-radius: 6px;
     border: 1.25px solid var(--primary) !important;
     background: var(--primary) !important;
     text-decoration: none;
     color: var(--white) !important;
     text-align: center;
     font-family: Jost-Regular !important;
     font-size: 14px;
     font-style: normal;
     font-weight: 700 !important;
     line-height: normal;
     text-transform: uppercase;
     transition: all 0.2s;
}
.btn-primary-target button:hover, .btn-primary-target button:focus, .btn-primary-target button:active{
	  background: #c01f33 !important;
     border-color: #c01f33 !important;
}
 .btn-primary {
     display: inline-flex;
     padding: 20px 26px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     border-radius: 6px;
     border: 1.25px solid var(--primary) !important;
     background: var(--primary) !important;
     text-decoration: none;
     color: var(--white);
     text-align: center;
     font-family: Jost-Regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-transform: uppercase;
     transition: all 0.2s;
	 min-width: 166px !important;
     text-align: center;
     justify-content: center;
}
 .btn-primary:hover, .btn-primary:active, .btn:first-child:active, .btn-primary:focus {
     background: #c01f33 !important;
     border-color: #c01f33 !important;
}
 .border-bottom-10 {
     border-bottom: 10px solid var(--primary);
}
 .border-top-10 {
     border-top: 10px solid var(--primary);
}
 .contentContainer h1 {
     color: var(--black-color);
     font-family: Jost-ExtraBold !important;
     font-size: 33px;
     font-style: normal;
     line-height: normal;
     text-transform: uppercase;
     margin-top: 0;
     margin-bottom: 10px;
}
 .contentContainer p {
     color: var(--text-dark);
     font-family: Jost-Regular !important;
     font-size: 18px;
     font-style: normal;
     line-height: normal;
     margin-top: 0;
     margin-bottom: 10px;
}
 .contentContainer .link-btn, .button-link-style-1 button {
     font-family: Jost-Semibold !important;
  color: var(--text-dark) !important;
  font-size: 18px !important;
  font-style: normal;
  line-height: normal;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
		 
}
 .pb-40 {
     padding-bottom: 40px !important;
}
 .bg-ultra-light {
     background: var(--Ultra-Light) !important;
}
 .bg-white {
     background: #fff !important;
}
 .iconBox {
     text-align: center;
}
 .iconBox img {
     width: 100%;
     max-width: 81px!important;
     margin: auto;
}
 .iconBox h1 {
     color: var(--black-color)!important;
     text-align: center;
     font-family: Jost-Bold!important;
     font-size: 27px;
     font-style: normal;
     font-weight: 700 !important;
     line-height: normal;
     text-transform: uppercase;
     margin-top: 30px;
     margin-bottom: 10px;
}
 .iconBox p {
     color: var(--text-dark)!important;
     text-align: center;
     font-family: Jost-Regular!important;
     font-size: 18px;
     font-style: normal;
     font-weight: 400!important;
     line-height: normal;
     margin: 0;
}
 .list-style-02 .card {
     border-radius: 8px;
     background: #fff;
     margin-bottom: 20px;
     box-shadow: 0px 0px 10px 0px rgba(7, 7, 7, 0.10);
     padding: 30px;
     border: 0px;
}
 .list-style-02 .card .item {
     display: flex;
     align-items: center;
     padding-bottom: 22px;
     border-bottom: 1px solid var(--light-grey);
}
 .list-style-02 .card .item-list-02{
     padding-bottom: 0 !important;
     border-bottom: 0 !important;
}
 .list-style-02 .card .item-list-02 .btn-primary{
     padding:7px 14px !important;
}
 .list-style-02 .card .item .avatar {
     width: 59px;
     min-width: 59px;
     height: 59px;
     margin-right: 20px;
     border-radius: 50%;
     overflow: hidden;
}
 .list-style-02 .card .item .thumbnail {
     width: 158px;
     min-width: 80px;
     height: 158px;
     margin-right: 30px;
     border-radius: 6px;
     overflow: hidden;
}
 .list-style-02 .card .item .thumbnail img {
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 .list-style-02 .card .item .avatar img {
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 .list-style-02 .card .item .label {
     margin-right: 15px;
     flex: 1 1 0%;
}
 .list-style-02 .card .item .label h1 {
     color: var(--black-color);
    /* H3 */
     font-family: Jost-Bold!important;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-top: 0;
     margin-bottom: 0;
}
 .list-style-02 .card .item .label p {
     color: var(--text-dark);
    /* Paragraph */
     font-family: Jost-Regular!important;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 0;
     margin-top: 3px;
}
 .list-style-02 .card .item .note {
     text-align: right;
}
 .list-style-02 .card .item .note a {
     color: var(--text-dark);
     text-align: right;
    /* Hyperlink-Big */
     font-family: Jost-Regular!important;
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-skip-ink: auto;
     text-decoration-thickness: auto;
     text-underline-offset: auto;
     text-underline-position: from-font;
}
 .list-style-02 .card .item .note p {
     color: var(--text-dark);
     text-align: right;
     margin: 0;
    /* Paragraph */
     font-family: Jost-Regular!important;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}
 .list-style-02 .card .card-content {
     color: var(--dark-grey);
    /* Paragraph */
     font-family: Jost-Regular!important;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-top: 25px;
}
 .list-style-02 .card .post-share {
     margin-top: 25px;
}
 .list-style-02 .card .post-share ul {
     padding: 0;
     margin: 0;
}
 .list-style-02 .card .post-share ul li {
     list-style: none;
     display: inline-block;
     margin-right: 10px;
}
 .list-style-02 .card .post-share ul li:last-child {
     margin-right: 0 !important;
}
 .list-style-02 .card .post-share ul li a {
     text-decoration: none;
}
 .list-style-02 .card .post-share ul li a img {
     width: 20px;
}
 .view-all-btn {
     font-size: 18px;
     color: var(--text-dark);
     font-family: Jost-Medium!important;
     font-style: normal;
     line-height: normal;
     text-decoration-line: underline;
     text-decoration-style: solid;
}
 .list-style-1 {
     display: inline-flex;
     padding: 35px 42px;
     align-items: center;
     width: 100%;
     gap: 30px;
     border-radius: 10px;
     background: var(--white-color);
     box-shadow: 0px 0px 10px 0px rgba(7, 7, 7, 0.10);
     margin-bottom: 30px;
}
 .list-style-1 .list-img {
     width: 158px;
     height: 158px;
     border-radius: 8px;
     overflow: hidden;
}
 .list-style-1 .list-img img {
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 .list-style-1 .list-items .title {
     color: var(--black-color);
     font-size: 22px;
     font-style: normal;
     font-family: Jost-ExtraBold!important;
     line-height: normal;
     margin: 0;
     padding-bottom: 10px;
}
 .list-style-1 .list-items .date {
     color: var(--black-color);
     font-family: Jost-Regular!important;
     font-size: 14px;
     font-style: normal;
     line-height: normal;
     margin: 0;
     padding-bottom: 10px;
}
 .list-style-1 .list-items .details {
     color: var(--text-dark);
     font-family: Jost-Regular!important;
     font-size: 14px;
     font-style: normal;
     line-height: normal;
     margin: 0;
     padding-bottom: 10px;
}
 .list-style-1 .list-items .primary-btn {
     display: flex;
     padding: 10px 11px;
     justify-content: center;
     align-items: center;
     gap: 10px;
     border-radius: 6px;
     width: fit-content;
     border: 1.25px solid var(--primary-color);
     background: var(--primary-color);
     font-size: 14px;
     text-align: center;
     line-height: normal;
     text-transform: uppercase;
}
 .dark-grey-bg {
     background: var(--text-dark);
}
 .light-subtitle {
     color: var(--white-color);
     font-family: Jost-ExtraBold!important;
     font-size: 22px;
     font-style: normal;
     line-height: normal;
     text-transform: uppercase;
}
 .dark-subtitle {
     color: var(--black-color);
     font-family: Jost-ExtraBold!important;
     font-size: 22px;
     font-style: normal;
     line-height: normal;
     text-transform: uppercase;
}
 .swiper-container {
     width: 100%;
     height: 100%;
}
 .small-title {
     color: var(--black-color);
     font-family: Jost-Bold!important;
     font-size: 18px;
     font-style: normal;
     line-height: normal;
}
 .song-card-custom .category-song-img.center-play-btn {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
}
 .category-song-img.center-play-btn::after {
     content: "";
     position: absolute;
     bottom: 0;
     top: 0;
     left: 0;
     right: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}
 .song-card-custom .category-song-img.center-play-btn .song-play {
    position: absolute !important;
    bottom: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-self: center !important;
    align-items:center !important;
    height: 100%;
    margin: auto;
    /*height: 50px;*/
    
    /*width: 50px;*/
    
    /*object-fit: contain;
    */
     z-index: 1;
}
 .table-card-design td p {
     color: var(--text-dark);
     font-family: Jost-Regular!important;
     font-size: 14px;
     font-style: normal;
     line-height: normal;
}
 @media screen and (max-width: 992px) {
     .list-style-1 {
         flex-direction: column;
         padding: 1rem;
    }
}
/* Absolute Center Spinner */
 .loading {
     position: fixed;
     z-index: 99999999;
     height: 2em;
     width: 2em;
     overflow: show;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
/* Transparent Overlay */
 .loading:before {
     content: '';
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .5));
     background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .5));
}
/* :not(:required) hides these rules from IE9 and below */
 .loading:not(:required) {
    /* hide "loading..." text */
     font: 0/0 a;
     color: transparent;
     text-shadow: none;
     background-color: transparent;
     border: 0;
}
 .loading:not(:required):after {
     content: '';
     display: block;
     font-size: 10px;
     width: 1em;
     height: 1em;
     margin-top: -0.5em;
     -webkit-animation: spinner 150ms infinite linear;
     -moz-animation: spinner 150ms infinite linear;
     -ms-animation: spinner 150ms infinite linear;
     -o-animation: spinner 150ms infinite linear;
     animation: spinner 150ms infinite linear;
     border-radius: 0.5em;
     -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
     box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
 @-webkit-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @-moz-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @-o-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 @keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
    }
}
 .success-card {
     display: flex;
     width: 538px;
     padding: 40px;
     flex-direction: column;
     align-items: center;
     gap: 26px;
     border-radius: 10px;
     background: var(--white-color);
}
 .success-card .details {
     color: var(--text-dark);
     text-align: center;
     font-family: Jost-Regular;
     font-size: 14px;
     font-style: normal;
     line-height: normal;
     margin: 0;
}
 .success-card .success-btn {
     border-radius: 8px;
     border: 1.25px solid var(--Success);
     background: var(--Success);
     padding: 13px 43px;
     color: var(--White, #FFF);
     text-align: center;
     font-family: Jost-Bold;
     font-size: 14px;
     font-style: normal;
     line-height: normal;
     text-transform: uppercase;
}
 .success-card .success-btn:hover, .success-card .success-btn:active {
     border: 1.25px solid #34a762;
     background: #34a762;
}
 .success-card .images-section {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     align-self: stretch;
     margin-top: 23px;
}
 .success-card .images-section img {
     width: 135px;
     height: 40px;
     object-fit: contain;
}
 @media screen and (max-width: 992px) {
     .success-card {
         max-width: 538px;
         padding: 25px;
         gap: 20px;
    }
}
 .invalid-feedback {
     display: block !important;
}
/* responsive tablet & mobile screen start */
 .music-list::-webkit-scrollbar {
     width: 8px;
}
/* Track */
 .music-list::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px grey;
     border-radius: 4px;
}
/* Handle */
 .music-list::-webkit-scrollbar-thumb {
     background: var(--primary);
     border-radius: 4px;
}
 .music-list {
     max-height: 250px;
     overflow-y: auto;
}

.music-list{
  padding-right:5px !important;  
}

/* responsive tablet & mobile screen start */
 .music-list-pl::-webkit-scrollbar {
     width: 8px;
}
/* Track */
 .music-list-pl::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px grey;
     border-radius: 4px;
}
/* Handle */
 .music-list-pl::-webkit-scrollbar-thumb {
     background: var(--primary);
     border-radius: 4px;
}
 .music-list-pl {
     max-height: 250px;
     overflow-y: auto;
}

.music-list-pl{
  padding-right:5px !important;  
}

 .mesic-item {
     display: flex;
     padding: 10px;
     background: #727b8a;
     border-radius: 8px;
     margin-bottom: 10px;
     color: var(--text-light);
}

 .music-item {
     display: flex;
     padding: 10px;
     background: #727b8a;
     border-radius: 8px;
     margin-bottom: 10px;
     color: var(--text-light);
}
 .music-thumbnail {
     height: 45px;
     width: 45px;
     min-width: 45px;
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     margin-right: 15px;
     border: 1px solid #fff;
}
 .music-thumbnail img {
     height: 100%;
     width: 100%;
     object-fit: cover;
}
 .music-content {
     flex: 1 1 0%;
    /* white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     */
}
 .music-content h1 {
     margin-top: 0;
     font-size: 14px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     font-family: Jost-Bold;
     margin-bottom: 5px;
     max-width:150px;
}
 .music-content p {
     margin: 0;
     font-size: 14px;
     line-clamp: 1;
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
}
 .music-seen-time {
     margin-left: 10px;
     font-size: 14px;
     font-family: Jost-Bold;
     color: #fff;
}
 .btn-play-lg i {
     height: 30px;
     width: 30px;
     border: 2px solid #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
    /*font-size: 23px;
    */
     margin-right: 0;
}
 .btn-play-lg {
    /*font-size: 18px;
    */
    /*text-transform: uppercase;
    */
     min-width: 180px;
    /*justify-content: flex-start !important;
    */
    /*padding-left: 15px;
    */
}
 .bg-red-900 {
     background-color: var(--text-dark) !important;
}
 .segment-buttons-wrapper {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     margin-bottom: 1rem;
     scrollbar-width: thin;
     scrollbar-color: #e8e8e8 transparent;
}
/* For Webkit browsers */
 .segment-buttons-wrapper::-webkit-scrollbar {
     height: 3px;
}
 .segment-buttons-wrapper::-webkit-scrollbar-thumb {
     background-color: #717171;
     border-radius: 3px;
}
 .segment-buttons {
     display: inline-flex;
     white-space: nowrap;
    /* Remove border from container because wrapper has it */
     border-radius: 0.375rem;
}
 .segment-buttons button {
     border: none;
     padding: 0.5rem 1.25rem;
     background: white;
     color: var(--primary-color);
     cursor: pointer;
     font-weight: 500;
     transition: background-color 0.3s, color 0.3s;
     user-select: none;
     flex: 0 0 auto;
    /* prevent shrinking */
     border-right: 1px solid #eceff5;
}
 .segment-buttons button:last-child {
     border-right: none;
}
 .segment-buttons button.active {
     background-color: var(--primary-color);
     color: white;
     font-weight: 600;
}
 .segment-buttons button:focus {
     outline: none;
     box-shadow: none;
     z-index: 1;
     position: relative;
}



 .recently-played-container a, .view-more-btn a {
     color: var(--text-light);
     font-size: 16px;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.2s;
}
 .recently-played-container a:hover, .view-more-btn a:hover, .recently-played-container a:focus, .view-more-btn a:focus {
     color: var(--primary);
}
.segment-buttons button:hover {
    background-color: var(--primary-color);
    color: white;
}
.text-right{
    text-align: right;
}
svg.bi-arrow-right-short {
    cursor: pointer;
    margin-left: 30px;
}
.playBtn{
    display: none;
}
.dHide{
    display: none!important;
}
div#stationModal {

  z-index: 99 !important;
}
@media screen and (min-width:768px){
    .station__dropdown{
        max-height:442px;
    }
    div#stationModal {
    align-items: end;
    }
}
 @media screen and (max-width:767px){
     .hn_sl_banner {
  margin-top: 30px;
}
div#stationModal {

  height: calc(100% - 78px) !important;

}
     .station__dropdown{
    
     max-width: 100% !important;
    border-radius: 0 !important;
  
  
   
   
     }
 ul.onepress-menu-mobile{
    padding-bottom: 180px;
}
 .form-card-design {
     padding: 1.5rem;
     margin-left: 0px !important;
 }
 button.volume-btn i {
    position: relative;
    width: 40px;
    height: 30px;
}
 .mHide{
    display: none!important;
 }
 .dHide{
    display: block!important;
 }
 .playBtn{
    display: block!important;
}
 .song-img1 .play i {
    margin: initial;
}
 .sign-in-btn {
    width: 68px !important;
    font-size: 12px;
    padding: 10px 0px;
 } 
 .song-img1 {
    min-width: 40px;
    left: 0px!important;
    padding-top: 0px!important;
}
.text-line-4 {
-webkit-line-clamp: 3 !important;
/* number of lines to show */
line-clamp: 3 !important;
}
.song_lising {
min-width: 48%;
max-width: 48%;
margin-bottom: 9px;
border-bottom: 1px solid #ddd;
padding-bottom: 13px;
}
.station-list{

gap: 7px !important;

}
/*div#stationModal.open-modal {*/
/*    bottom: 168px !important;*/
/*}*/
.song_lising p {
  line-height: 16px;
}
}
 .text-line-4 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 4;
    /* number of lines to show */
     line-clamp: 4;
     -webkit-box-orient: vertical;
}
 .header-main-layout-1{
     background-image: linear-gradient(0deg, #4f5762, #000 60%);
}


.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  /*width: 80%;*/
  /*max-width: 400px;*/
  border-radius: 8px;
  position: relative;
}

.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 20px;
  cursor: pointer;
}



.song-img1{
    width: 50px;
     min-width: 50px;
    height: 50px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    transition: all .2s ease-in-out;
}

.song-img1 a img {
    width: 100%;
    height: 100%;
}


.sonlising h1{
    font-size: 15px;
    margin-bottom: 0px;
    font-weight: 600;
}
.station-list {
    width: 100%;
    
    display: block;
    overflow: hidden;
    /*height: 100%;*/
    display: flex;
    gap: 17px;
    flex-wrap: wrap;
    justify-content: space-between;
    -webkit-overflow-scrolling: touch;
}
.back-to-top i{
	visibility: visible !important;
}
div#stationModal {
    /*bottom: -9999px;*/
    /*left: 0;*/
    /*right: 0;*/
    /*position: fixed;*/
    /*display: block !important;*/
    /*transition: bottom 450ms cubic-bezier(1, 0, 0, 1), left 250ms ease, right 250ms ease;*/
    
    /*z-index: 9;*/
    position: fixed;
    /*top: 0;*/
	bottom: -110vh;
  left: 0;
  z-index: 9;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
 
  outline: 0;
}

.station__dropdown {
    background: #FFF;
    margin: 0;
    padding: 20px;
    border-radius: 6px 6px 0 0;
    width: 100%;
    max-width: 96%;
    margin: 0px auto;
    box-shadow: 1px 1px 5px #457;
    overflow-y: auto;
  flex:1 1 0%;
    -webkit-overflow-scrolling: touch;   
}
.station__dropdown::-webkit-scrollbar {
  width: 0.8em;
}
 
.station__dropdown::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
.station__dropdown::-webkit-scrollbar-thumb {
  background-color: #c01f33;
  outline: 1px solid #c01f33;
}
body.scroll-y-hiddeen {
  overflow: hidden !important;
}

.song_lising a{
    display: flex;
    gap: 20px;
    align-items: center;
    text-decoration: none !important;
}
.song_lising {
    width: 32%;
    position: relative;
    cursor: pointer;
}
.song-img1 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/*.song-img1 {*/
/*    position: relative;*/
/*    padding-top: 4px;*/
/*    left: 7px;*/
/*}*/
.song-img1 .play {
    display: none;
    font-size: 13px;
    text-align: center;
    position: absolute;
    color: #222;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
    transform: translate(0%, -50%);
}
.song_lising:hover .song-img1 .play {
    display: block !important;
}
.song_lising a:hover .play{
	display: block;
}
.card.song-card-custom:hover .category-song-img:before{
	content: "";
    display: block;
    width: 100%;
    height: 40%;
    background: rgb(0 0 0 / 30%);
    position: absolute;
    z-index: 9;
    /* top: 50%; */
    /* transform: translate(0%, -50%); */
    bottom: 0;
}
.card.song-card-custom:hover .song-img:before{
	content: "";
    display: block;
    width: 100%;
    height: 40%;
    background: rgb(0 0 0 / 30%);
    position: absolute;
    z-index: 9;
    /* top: 50%; */
    /* transform: translate(0%, -50%); */
    bottom: 0;
}
.song-img1 .play i{
color:#fff;
background: red;
width: 30px;
height:30px;
text-align: center;
border-radius: 20px;
margin:auto;
display: flex;
align-items: center;
justify-content: center;
}


.volume-icon span{
    font-size: 10px;
    padding-left: 5px;
    cursor: pointer;  
}
.volume-icon i {
  font-size: 23px;
   cursor: pointer;  
}
#play-music{
    width: 40px;
  cursor: pointer;
  text-align: center;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  font-size: 20px;
    /*width: 10px;*/
    /*cursor: pointer;*/
    /*text-align: center; */
    
}


 @media screen and (max-width:375px){
     .progress.music-player{
        width: 192px;  
     }
 }
 @media screen and (max-width: 360px) {
    .progress.music-player {
        width: 145px;
    }
   
}
 .mesic-item:last-child {
  margin-bottom: 0;
}
.music-item:last-child {
  margin-bottom: 0;
}

 .our-select {
  width: 100%;
  max-width: 200px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: Jost-Bold;
  border: 1px solid #b70b20;
  border-radius: 8px;
  background-color: #fff;
  color: #b70b20;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20fill%3D%22%23b70b20%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5H7z%22/%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.our-select:focus {
  border-color: #b70b20;
  box-shadow: 0 0 0 3px rgba(183, 11, 32, 0.3);
  outline: none;
}

.google-play-img{
    margin-bottom: 50px;
}

@media screen and (max-width:600px){
    .list-style-02 .card .item {

  flex-direction: column;
}
.list-style-02 .card .item .thumbnail {
  width: 100%;
  min-width: 100%;
margin-bottom:15px;
  margin-right: 0 !important;

}
.list-style-02 .card .item .label {
  margin-right: 0 !important;

  width: 100%;
}
.item.item-talent .avatar.slot-start {
  margin: auto !important;
}
.item.item-talent .label {
  text-align: center;
}
.item.item-talent .note.slot-end {
  text-align: center !important;
}
.item.item-talent .note.slot-end p{
  text-align: center !important;
}
}
 
.form-label {
  font-weight: 600 !important;
  font-family: Jost-Regular !important;
  font-size: 14px;
}

.text-uppercase{
    text-transform: uppercase;
}
.ms-16{
    margin-left:16px;
}
#gform_submit_button_1 {
  width: 100%;
  border-radius: 8px;
  padding: 17px 23px !important;
}
.google-play-icon i.fab.fa-apple:before{
    content: "\f3ab" !important;
}
.btn-primary-target i {
  font-size: 18px !important;
}
.volume-container{
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
}
.flex-full{
    flex:1 1 0%;
}
i.fa.fa-heart-o {
    margin-right: 9px;
}
i.fa.fa-heart-o {
    font-size: 24px;
    cursor: pointer;
}
.welcome {
    display: none;
    position: fixed;
  margin: auto;
  top: 0;
  z-index: 999999 !important;
  height: 100%;
  overflow: hidden;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
.site-header{
   z-index: 99!important; 
}
.card-custom {
    border-radius: 1.5rem; /* Large rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-social {
	border-radius: 2rem; /* Fully rounded buttons */
}
.welcome hr {
    margin-bottom: 0;
}
.welcome .btn-social span {
    font-family: 'Jost-Bold';
}
.form-check.mb-4 {
    display: flex;
    align-items: center;
}
.welcome a {
    font-family: 'Jost-Bold';
}
.signin{
    height: 44px;
}
.welcome .form-control{
    height: 44px;
}
.song-list:hover{
    border-radius: 9px;
    padding: 9px 14px;
    padding-bottom: 0;
    margin-bottom: 8px;
}
.song-list .music-image{
    box-shadow: 1px 1px 10px #FFF;
}
.heart-fill {
  opacity: 0;
  fill: url(#heart-gradient);
}

.heart-outline {
  opacity: 1;
  fill: #ffffff;
}

.heart-outline,
.heart-fill {
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

.heart-fill {
  background:
}

#heart {
  width: 30px;
  height: 30px;
}

#heart:hover {
  cursor: pointer;
}

#heart:hover .heart-fill {
  opacity: 1;
}

#heart:hover .heart-outline {
  opacity: 0;
}
button.volume-btn {
    position: relative;
    width: 40px;
    height: 40px;
}
button.volume-btn:hover i{
    display: none;
}
button.volume-btn:hover:before {
    content: "";
    background-image: url(https://website.hot108.betaplanets.com/wp-content/uploads/2025/08/output-onlinegiftools-3.gif);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: 0;
    right: 0;
    margin: auto;
}
i#play-music:hover{
    box-shadow: 0px 0px 14px #e3123b;
    border-radius: 100px;
}
.disc_loader {
    display: none;
    width: 42px;
    height: 42px;
    left: 0;
    right: 0;
    margin: auto;
}
.liked .heart-fill {
    fill: #e3123b !important;
    opacity: 1;
}
.liked .heart-outline {
    opacity: 1;
    fill: #e3123b !important;
}
.favourite-toaster {
    left: 0;
    right: 0;
    margin: auto;
    top: auto !important;
    bottom: 105px;
    border-left: 0px !important;
    text-align: center;
    padding: 15px 15px !important;
}
.favourite-toaster svg {
	display: none;
}
.favourite-toaster button {
	display: none;
}
.eyeIcon i {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 22px;
}
.eyeIcon {
    position: relative;
}
input#password {
    padding-right: 41px;
}
svg.disc_loader_station {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px auto;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 999;
    display: none;
}
img.already-playing-song.live-song-display{
    width: 40px;
    position: absolute;
    right: 24px;
    margin: auto;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 99;
}
.already-playing-song{
    display: none;
}
.site-header{
  -webkit-transition: all 0.5s ease;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: all 0.5s ease;
}
.text-truncate {
    margin-bottom: 0;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    pointer-events: auto !important;
    z-index: 99999;
    cursor: pointer !important;
}
.song_lising h5 {
    margin-bottom: 0;
    min-width: 132px;
}
.song_lising p {
    margin-bottom: 0;
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
   color: #171717;
}
/*@media screen and (max-width: 1440px){*/
/*    .song-img1 img {*/
/*        width: 30px;*/
/*        height: 30px;*/
/*        min-width: 30px;*/
/*        min-height: 33px;*/
/*    }*/
/*}*/
@media screen and (min-width: 1441px){
  .song_lising:hover a {
        /*background: rgb(255 0 0 / 30%);*/
         background: #ECEFF5;
    }
    .song_lising:hover .song-img1 .play{
        display: block !important;
    }
    .song_lising:hover a .song-img1:hover {
        opacity: 1;
    }
    .song_lising:hover a .song-img1 {
        opacity: 0.5;
    }
}
@keyframes smoothScroll {
	0% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}


/*new css start player*/

@media screen and (min-width:768px){
    
    .mobile-player-section{
         display:none !important;
    }
}
@media screen and (max-width:767.99px){
    .grey-section-image{
        display:none !important;
    }
    .site-branding {

gap: 10px !important;
padding-left: 0 !important;
}
}
.mobile-player-body .song-title{
        font-size: 24px;
  line-height: 30px;
  white-space: unset;
  margin-top:20px;

    }
    .mobile-player-body .song-sub-title{
         white-space: unset;
          font-size: 16px;
  line-height: 20px;
    }
.mobile-player-section{
    /*background: #2d3035;*/
    background-image: url("/wp-content/assets/images/grey-rectangle.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
    padding: 3px 15px 3px 3px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:1050;
}
.song-title {
  font-size: 17px;
  color: #fff;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.song-sub-title {
  font-size: 14px;
  color: var(--text-light);
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.song-details {
  flex: 1 1 0%;
  overflow: hidden;
}
.mobile-player {
  display: flex;
  gap: 20px;
  align-items: center;
}
.song-thumbnail {
  height: 72px;
  width: 72px;
  min-width: 72px;
  position: relative;
}
.song-thumbnail img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
 .progress.mobile-music-player{
    width: 100%;
    flex: 1 1 0%;
    height:7px;
     background: var(--Logo-Red);
}
.progress.mobile-music-player .progress-bar{
    background: var(--white-color);
}
.action-style {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 30px;
}

.station-button i {
  color: #fff;
  font-size: 18px;
}
.song-palyer-time {
  margin-top: 5px;
}
.song-time {
  display: inline-block;
  font-size: 14px;
  min-width: 40px;
  text-align: right;
  color: var(--text-light);
  line-height: 16px;
}

.mobile-player-body {
  /*height: calc(100vh - 78px);*/
  background: #000;
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}
.ply-img img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.ply-img {
  text-align: center;
}
.inner-text-center .text-center{
    text-align:center;
}
.height-full{
    height:100%;
}
.card-custom-scroll{
    max-height: 93vh;
  overflow-y: auto;
}
.login-to-clear, .sign-in-btn {
  min-width: 85px;
}
.station-button i {
  font-size: 24px;
}
.station-button {
  width: 25px;
  text-align: center;
}
.song_lising_det p {
  line-height: 16px;
}
.line-h-16{
    line-height: 16px;
}
@media screen and (min-width:768px){
    .list_and_player_modal.open-modal{
        bottom:195px !important;
    }
    .song_lising {
  width: calc(50% - 20px) !important;

}
}
@media screen and (min-width:992px){
    .list_and_player_modal.open-modal{
         bottom:90.6px !important;
    }
       .song_lising {
  width: calc(33.333% - 20px) !important;

}
}


/*================================= New home page css start =================================*/

.hn_text_01 {
    color: #FFF;
    font-family: Jost-Regular;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
}

.hn_title_01 {
    color: #000;
    font-family: Jost-ExtraBold;
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
}

.hn_title_02 {
    color: #B70B20;
    font-family: Jost-ExtraBold;
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
}

.hn_section_01 {
    border-bottom: 1px solid #4F5762;
    padding-top: 27px;
    padding-bottom: 27px;
    background: var(--Black, #000);
}

.hn-md-20 {
    margin-bottom: 30px !important;
}

.hn_sl_banner {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.hn_sl_banner img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 10px;
}

.hn-fig-title {
    color: #ffffff;
    font-family: Jost-ExtraBold;
    font-size: 24px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
}

.hn-fig-sub-title {
    color: #B70B20;
    font-family: Jost-Regular;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
}

.hn-finger-caption {
    text-align: right;
    padding: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: end;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.hn_small_container {
    max-width: 675px;
}

.hn_section_02 {
    padding-top: 180px;
    padding-bottom: 196px;
    background: url(/wp-content/assets/images/hn-bg-01.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hn_section_03 {
    padding-top: 25px;
    padding-bottom: 25px;
    background: #000;
    border-top: 2px solid #B70B20;
}

.hn_song_container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.hn_song_title {
    color: #B70B20;
    font-family: Jost-Bold;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
}

.hn_song_atr {
    color: #FFF;
    font-family: Jost-Regular;
    font-size: 18px;
    font-style: normal;
    line-height: normal;
}

.hn_section_04 {
    background: #ECEFF5;
    padding-top: 38px;
    padding-bottom: 20px;
}

.hn_card_sm {
    border-radius: 10px;
    padding: 15px;
    background: #fff;
    border-width: 1.25px;
    border-style: solid;
    border-color: #ECEFF5;
    margin-bottom: 25px;
}

.hn_card_sm:hover {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10);
    border-color: transparent !important;
}

.hn_music_banner {
    position: relative;
    padding-top: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.hn_music_banner .hn_sm_banner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.hn_play_icon {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: ease-in-out 0.2s;
    padding: 15px;
    display: flex;
    align-items: end;
    justify-content: end;
}

.hn_play_icon img {
    width: 40px;
    cursor: pointer;
}

.hn_card_sm:hover .hn_play_icon {
    opacity: 1;
    transform: translateY(0);
    transition: ease-in-out 0.2s;
}

.hn_music_caption {
    margin-top: 15px;
}

.hn_music_caption h1 {
    color: #000;
    margin-top: 0;
    margin-bottom: 5px;
    font-family: Jost-Bold;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn_music_caption p {
    color: #2D3035;
    margin: 0;
    font-family: Jost-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn_section_05 {
    background: #F6F7FA;
    padding-top: 40px;
    padding-bottom: 20px;
}

.hn_card_lg {
    border-radius: 10px;
    background: #fff;
    margin-bottom: 25px;
    position: relative;
}


.hn_music_banner_lg {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.hn_music_banner_lg .hn_lg_banner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.hn_music_caption_lg {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
    padding: 30px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.hn_play_icon_lg {
    width: 40px;
}

.hn_music_caption_lg h1 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: Jost-ExtraBold;
    font-size: 22px;
    font-style: normal;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn_music_caption_lg p {
    color: #ECEFF5;
    margin: 0;
    font-family: Jost-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /////////////////////// */

.hn_card_md {
    border-radius: 10px;
    padding: 15px;
    background: #fff;
    border-width: 1.25px;
    border-style: solid;
    border-color: #ECEFF5;
    margin-bottom: 25px;
}

.hn_card_md:hover {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10);
    border-color: transparent !important;
}

.hn_music_banner_md {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.hn_music_banner_md .hn_md_banner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.hn_play_icon_md {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: ease-in-out 0.2s;
    padding: 15px;
    display: flex;
    align-items: end;
    justify-content: end;
}

.hn_play_icon_md img {
    width: 40px;
    cursor: pointer;
}

.hn_card_md:hover .hn_play_icon_md {
    opacity: 1;
    transform: translateY(0);
    transition: ease-in-out 0.2s;
}

.hn_music_caption_md {
    margin-top: 15px;
}

.hn_music_caption_md h1 {
    color: #000;
    margin-top: 0;
    margin-bottom: 5px;
    font-family: Jost-ExtraBold;
    font-size: 22px;
    font-style: normal;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn_music_caption_md p {
    color: #2D3035;
    margin: 0;
    font-family: Jost-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn_btn_outline_black {
    border: 2.28px solid #B70B20;
    padding: 8px 24px;
    background: #000;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #FFF;
    font-family: Jost-Bold;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 8px;
}

.hn_btn_red {
    border: 0px;
    padding: 8px 24px;
    background: #B70B20;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #FFF;
    font-family: Jost-Bold;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 8px;
}

.hn_btn_outline_black:hover {
    background: #B70B20;

}

.hn_btn_red:hover {
    background: #000;
}

.w-163 {
    min-width: 163px;
}

/*================================= New home page css Etart =================================*/

.dropdown-toggle-after-none:after{
    content:none !important;
}

.dropdown-scroll{
    max-height:300px;
    overflow: hidden;
  
  overflow-y: auto !important;
}

.dropdown-menu-custom .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}
.dropdown-menu-custom .dropdown-song-thumbnial {
  height: 40px;
  width: 40px;
  border-radius: 4px;
  overflow: hidden;
}
.dropdown-menu-custom .dropdown-song-thumbnial img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.dropdown-menu-custom{
 z-index: 10;
  width: 300px;
  max-width: 300px;
}
#historySection #histories, #historySection #chats {
  width: auto !important;
}
.music-thumbnail-img {
  height: 60px;
  width: 60px;
  min-width: 60px;
  position: relative;
  /*border-radius: 8px;*/
  overflow: hidden;
  border: 1px solid #fff;
  margin:auto;
}

.music-thumbnail-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.image-center-td{
    text-align:center;
}
#header-section .followWrap {
  height: auto !important;
}
@media screen and (min-width:1140.11px){
	.onepress-menu #menu-item-1188 .sub-menu{
  width: 668px;
	column-count: 2; 
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
	background:#fff;
}
	.onepress-menu #menu-item-1188 .sub-menu li a {
	color: #444 !important;
  font-weight: 600 !important;
  font-size: 18px !important;
		padding-top:4px;
		padding-bottom:4px;
}
		.onepress-menu #menu-item-1188 .sub-menu li a:hover {
	color: #b70b20 !important;
 
}
	.onepress-menu #menu-item-1188 .sub-menu li a:hover::after {
		  opacity: 1;
	}
.onepress-menu #menu-item-1188 .sub-menu li a::after {
  content: "\f04b";
  font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
  font-size: 17px;
  background: #b70b20;
  height: 30px;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  left: 22px;
  top: 10px;
  opacity: 0;
}
}

.onepress-menu #menu-item-1188 .sub-menu li a img{
width: 40px;
  height: 40px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  transition: all .2s ease-in-out;
}

.onepress-menu .menu-item-has-children .nav-toggle-subarrow {

  margin: auto;
  bottom: 0;
  top: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#nav-toggle {

  padding-top: 1rem;
  padding-bottom: 1rem;
}
.elementor-button {
  font-family: Jost-Bold !important;
  font-weight: normal !important;
}
#stationName .elementor-heading-title{
	font-family: Jost-Bold !important;
}

#songInfo .elementor-heading-title{
	font-family: Jost-Regular !important;
}


@media screen and (min-height:720px) and (max-height:900px){
    .onepress-menu #menu-item-1188 .sub-menu{
        max-height: 350px;
    overflow-y: auto !important;
    overflow: hidden;
    column-count: unset !important;
    }
    .onepress-menu #menu-item-1188 .sub-menu li{
       min-width:50% !important;
   float:left;
    }
    
}

/*header-sub-menu*/
/*
.header-right-wrapper {
    position: relative;
}

.header-right-wrapper nav ul > li#menu-item-1188 {
    position: static !important;
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
}

.header-right-wrapper nav ul > li#menu-item-1188 .nav-toggle-subarrow {
    position: static !important;
    margin-left: -10px;
}

.header-right-wrapper nav ul > li#menu-item-1188 ul.sub-menu {
    min-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 50vh;
    overflow: auto;
    display: flex !important;
    flex-wrap: wrap;
    margin: -1px 0 0 0 !important;
    padding:20px !important;
}

.header-right-wrapper nav ul > li#menu-item-1188 ul.sub-menu > li {
    width: calc(50% - 10px);
    min-width: auto !important;
}

.header-right-wrapper nav ul > li#menu-item-1188 ul.sub-menu > li > a img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
}

.header-right-wrapper nav ul > li#menu-item-1188 ul.sub-menu > li > a span {
    font-size:22px;
}

.header-right-wrapper nav ul > li#menu-item-1188 ul.sub-menu > li > a::after{
    width:50px !imporatnt;
    height:50px !important;
    left:55px !imporatnt;
    top:35px !imporatnt;
}
*/
/*header-sub-menu*/

/*.close-icon > i:before {*/
/*    content: "\f00d" !important;*/
/*    color: #b60a20 !important;*/
/*}*/
#footer-station-cl {
        font-size: 14px;
    background: red;
    color: white;
    margin-bottom: 15px;
    padding: 9px 10px;
    border-radius: 100px;
    cursor: pointer;
}