body {
    color: transparent;
    padding-top: 60px;
}
/* Icon styling */
.bi {
    font-size: 1rem;
    vertical-align: middle;
  }
  /* Spinner animation */
  .spinner {
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  /* List item styling */
  .list-group-item.active {
    color: #9d2323;
    border-left: 3px solid #0d6efd;
  }
  /* Time display */
  .time-display {
    /* font-family: 'Courier New', monospace;
    font-weight: 500; */
    font-size: 0.75rem;
    color: #352424;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  /* Play button */
  .play-button {
    transition: all 0.2s ease;
    min-width: 80px;
  }
  .play-button:hover {
    transform: scale(1.05);
  }
  .active-segment {
    border-left: 3px solid #ffc107;
    transition: all 0.3s ease;
  }
  [data-file-name] {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
  }
  /* progress bar starts */
  .progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0,0,0,0.1);
}
.progress-bar {
    height: 100%;
    background: #3d07ff;
    transition: width 0.5s linear;
}
.countdown-timer {
    position: absolute;
    right: 100px;
    bottom: 15px;
    font-size: 0.75rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.play-button {
    position: relative;
    overflow: hidden;
}
/* progressbar ends */
.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    /* Ensures the container doesn't exceed the parent's width */
    overflow: hidden;
    /* Optional: Adds padding to the left and right */
    box-sizing: border-box;
    /* background-color: #90a6bd; */
}
.searchbardiv {
    display: block;
    position: fixed;
    background: #7D1935;
    top: 50px;
    right: 0px;
    z-index: 1001;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    margin: 0px;
}
.buttonsearch {
    position: fixed;
    top: 18px;
    float: right;
    right: 0px;
    margin-right: 10px;
    background-color: transparent;
    border: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.buttonsearch:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0px;
}
.buttonsearch:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0px;
}
#formsearch {
    display: none;
}
.glyphicon.glyphicon-search {
    font-size: 18px;
}
#searchbox {
    box-shadow: none;
    padding: 8px 14px;
}
#searchbox:hover {
    box-shadow: none;
}
.form-control:focus {
    border-color: #ccc;
}
.navbar-toggle {
    margin-right: 35px;
    border: none;
    background: transparent !important;
}
.navbar-toggle:hover {
    background: transparent !important;
}
.navbar-toggle .icon-bar {
    width: 22px;
    transition: all 0.2s;
}
.navbar-toggle .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
    opacity: 0;
}
.navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
    transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
}
#play-btn {
    background-image: url(https://www.radioindialive.com/play-fill.svg);
    background-size: cover;
    width: 38px;
    height: 38px;
    margin: 7px;
}
#play-btn-top {
    width: 41px;
    height: 41px;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50px;
    background-image: url(https://www.radioindialive.com/play-fill.svg);
    color: transparent;
    /* Hide the text */
    border: none;
    /* Remove the default border */
    outline: none;
    /* Remove the outline */
}
#play-btn-pause {
    background-image: url(https://www.radioindialive.com/pause-fill.svg);
    width: 41px;
    height: 41px;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50px;
    background-image: url(https://www.radioindialive.com/play-fill.svg);
}
#play-btn-pouse-top {
    background-image: url(https://www.radioindialive.com/pause-fill.svg);
    background-size: cover;
    position: relative;
    width: 40px;
    height: 41px;
    left: 81%;
    top: -34%;
    border: solid 1px red;
    border-radius: 51px;
}
#play-btn-loading {
    background-image: url(https://www.radioindialive.com/loading.gif);
    background-size: cover;
    width: 38px;
    height: 38px;
    margin: 7px;
}
.upper-ads {
    width: 100%;
    clear: both;
    top: 73px;
    height: 90px;
    position: fixed;
    z-index: 1;
    background: cadetblue;
}
.upper-ads-adsense {
    width: 300px;
    height: 600px;
}
.after-player {
    height: 290px !important;
}
#main {
    display: flex;
    width: 90%;
    margin-top: 175px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 2px 3px 8px 3px #0d6efd;
}
.play_pouse_main {
    border-radius: 50px;
    position: relative;
    width: 29%;
    height: 73%;
    margin: auto;
    border: double;
    color: darkred;
    background-image: url(//proxy.radioindialive.com/play.png);
    background-size: 100%;
}
.animated {
    overflow: hidden;
    width: 11rem;
    white-space: nowrap;
}
.animated>* {
    display: inline-block;
    position: relative;
    animation: 6s linear 0s infinite move;
    ;
}
.animated>*.min {
    min-width: 100%;
}
@keyframes move {
    0%,
    25% {
        transform: translateX(0%);
        left: 0%;
    }
    75%,
    100% {
        transform: translateX(-100%);
        left: -10%;
    }
}
.channelsindex {
    width: 180px;
    border: solid 2px blue;
    display: inline-block;
}
#radio_name {
    margin-top: -1px;
    font-size: 17px;
    color: aliceblue;
    height: 43px;
    padding: 15px;
    width: auto;
}
.play_pouse {
    width: 94%;
    height: 52%;
    padding: 21px;
    border: darkgreen;
    position: absolute;
    background: transparent;
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: center;
}
li.card:hover {
    border: solid 3px green;
    background-color: blue;
}
.player {
    background: #198754;
    display: inline-table;
    position: fixed;
    bottom: 0px;
    z-index: 9999;
    width: 100%;
    height: 60px;
    text-align: center;
}
/* #radio {
    display: inline-grid;
    width: 65%;
    height: auto;
    overflow: hidden;
    padding: 10px;
} */
#radio-info {
    margin: auto;
    display: inline-block;
    background-color: cornsilk;
    border: solid rgb(224, 138, 167) 3px;
    width: 25%;
    height: 665px;
    overflow: scroll;
    overflow-x: hidden;
}
/* .radio-info-h1{
    padding: 5px;
    color: #37423b;
    display: flex;
    background-color: white;
    width: 100%;
} */
#channels {
    margin: auto;
    display: inline-block;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: cornsilk;
    border: solid rgb(224, 138, 167) 3px;
    width: 28%;
    height: 665px;
}
#channelshome {
    width: 98%;
    height: 561px;
    overflow: auto;
    overflow-x: hidden;
    margin-left: 16px;
    box-shadow: 2px 3px 8px 3px #dc3545;
}
.imgchannels {
    width: 100%;
    height: 100%;
}
li.card {
    margin: 2px;
    width: 125px;
    box-shadow: 2px 3px 8px 3px #1d2129;
}
#sidebar {
    text-align: center;
    display: inline-block;
    width: 33.4%;
    /*
    text-align: center;
    display: inline-block;
    background-color: cornsilk;
    width: 33.4%;
    height: 665px;
    background: #f9fafbbd;
    margin-left: 16px;
    box-shadow: 2px 3px 8px 3px #dc3545;
    */
}
.sidebarAds {
    width: 100%;
    /* Default width for small devices */
    height: 300px;
    /* Default height for small devices */
    margin: 0 auto;
    /* Center the element */
}
/* Styles for large devices */
@media (min-width: 992px) {
    .sidebarAds {
        height: 600px !important;
        /* Height for large devices */
    }
}
img.radioimg {
    width: 140px;
    /*
    margin: auto;
    float: left;
    height: 85px;
    background-image: url("https://www.radioindialive.com/apple-icon-180x180.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #90a6bd;
    border-color: #833c54;
    text-align: center;
    padding: 3px;
    width: 150px;
    height: 150px; */
}
#radioimg {
    width: 100px;
    height: 100px;
    /* width: 100%;
    margin: auto;
    float: left;
    height: 85px;
    background-image: url("https://www.radioindialive.com/apple-icon-180x180.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #90a6bd;
    border-color: #833c54;
    text-align: center;
    padding: 3px;
    max-width: 150px;
    margin-top: 5px; */
}
h3.card {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    background-color: #833c54;
    word-wrap: break-word;
}
/* Channel list*/
.cname {
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 14px;
    max-height: 4.0em;
    line-height: 1.3;
    color: black;
    padding: 2px;
    height: 60px;
    max-width: fit-content;
}
.active {
    border: solid 2px green;
    background-color: red;
    zoom: 1.1;
}
.active-nave {
    background-color: green;
}
a.active {
    background-color: green;
}
a:hover {
    background: violet;
}
.sticky {
    border: solid blue 2px;
    border-radius: 17px;
    height: 100px;
    width: 100px;
    position: fixed;
    right: 0px;
    bottom: 368px;
    /*left: 0px;*/
    z-index: 1030;
}
.radio-info-img {
    float: left;
    width: 140px;
    height: 110px;
    border: solid;
    padding: 4px;
    background-image: url(https://www.radioindialive.com/placeholder.jpg);
    background-size: cover;
    border-radius: 11px;
    background-repeat: no-repeat;
}
/* width: 123px;
    border: solid;
    background-image: url(https://www.uk-radios.com/placeholder.png);
    background-size: contain;
*/
.radio-data {
    background-color: white;
    display: table-row;
}
.radio-data-icon {
    border: 1px solid;
    font-size: 24px;
    display: flex;
    word-break: break-word;
    font-family: system-ui, sans-serif;
    font-weight: 500;
    margin: 0;
}
.icon-p {
    border-collapse: separate;
    font-size: 17px;
    width: 88%;
    margin: 13px;
    color: black;
    /* white-space: break-spaces;
    text-align: initial; */
}
.status_icon {
    position: absolute;
    margin-top: 1px;
    margin-left: 4px;
    width: 19px;
    border: solid 3px red;
    border-radius: 10px;
}
.facebook_comments {
    width: 80%;
    margin: auto;
}
/*----------------------------------------------------------------
            Screen Size min width to 640px
-----------------------------------------------------------------*/
@media screen and (max-width: 640px) {
    #main {
        display: inline-block;
        width: 100%;
        margin-top: 125px;
        margin-left: 0px;
        margin-right: 0px;
    }
}
@media screen and (max-width: 640px) {
    #channelshome {
        width: 100%;
        margin: auto;
    }
    .after-player {
        height: 210px !important;
    }
    #sidebar {
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        text-align: center;
    }
    #radio {
        height: auto;
        width: 100%;
    }
    .radio-data {
        display: block;
        width: 100%;
        border: solid 2px red;
    }
    .cname {
        font-size: 11px;
    }
    .upper-ads {
        width: 100%;
        height: 48px;
        top: 75px;
    }
    .facebook_comments {
        width: 100%;
    }
}
/*----------------------------------------------------------------
            Screen Size min width 991px
-----------------------------------------------------------------*/
@media (max-width: 991px) {
    .upper-ads {
        top: 70px;
    }
}
/*----------------------------------------------------------------
            Screen Size min width 641px to max 1007px
-----------------------------------------------------------------*/
/*----------------------------------------------------------------
            Screen Size min width to 1008 px
-----------------------------------------------------------------*/
/*----------------------------------------------------------------
            Screen Size min width to 400 px
-----------------------------------------------------------------*/
/*----------------------------------------------------------------
            Screen Size min width to 1024 px
-----------------------------------------------------------------*/
@media screen and (max-width: 1025px) {
    .player {
        bottom: 47px;
    }
}