*{ margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", serif;
}
/* For Chrome, Safari, Edge, and other WebKit-based browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
html{}
body{
    background: url('/img/radio-bg.jpg') top center no-repeat fixed;
    background-size: cover;
}
a{
    text-decoration: none;
}
img{width:100%;height:auto;}
ul{}
li{
    list-style-type: none;
}
.row{}
.overly{
    background: #ffffffcf;
    width: 100%;
    height: 100%;
}
.site_content{display: inline-block;width: 100%;}
.reload{
    position: absolute;
    right: 5px;
    top: 70px;
    width: 50px;
    height: 50px;
    background: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    border-radius: 100%;
    color: #555;
    box-shadow: 0 0 5px #ccc;
    z-index: 1;
}
.reload i{}
.reload:active{background:red;color:#fff;}
.main_content{
    width: 100%;
    float: left;
    clear: both;
    position: relative;
    background: #fff;
    min-height: 100vh;
    margin-bottom: -5px;
}
.inner{
    width: 520px;
    margin:  0 auto;
    position: relative;
}
.preloader{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999;
    display: inline-block;
    width: 100%;
    background: #fff;
}
.preloader .preloader-container{width: 100px;position: absolute;left: 50%;top: 35%;transform: translate(-50%, -35%);}
.preloader h3{
    font-size: 14px;
    text-align: center;
    margin: 5px;
    font-weight: 400;
    color: red;
    animation: loadingdot .5s ease infinite;
}
.preloader img{}
.preloader span{
    
}

@keyframes loadingdot{
    0% {color: #e70202;}
    50%{
        color: #fff;
    }
    100%{color: #e70202;}
}
/*====== header ====*/
.fixed-header{position: fixed;top: 0;left: 0;right: 0;z-index: 9999;}
.header{background: #fffffff7;height: 60px;border-radius: 0 0 8px 8px;box-shadow: 0 0 5px #ccc;}
.header .head-bar{display: flex;}
.header .head-bar .back-process{width: 25%;}
.header .head-bar .back-process button{
    width: 50px;
    margin: 10px;
    height: 40px;
    background: none;
    border: none;
    font-size: 20px;
    border-radius: 3px;
    outline: none;
    color: #414141;
}
.header .head-bar .back-process button:hover{background:orangered;color:#fff;}
.header .head-bar .back-process button:active{background:#313131;color:#fff;}
.header .head-bar .back-process button.notification{
    float: right;
    color: #414141;
}
.header .head-bar .back-process button.notification:hover{}
.header .head-bar .back-process button.notification:active{}
.header .head-bar .logo{
    width: 50%;
    text-align: center;
}
.header .head-bar .logo img{
    height: 45px;
    width: auto;
    margin: 5px 0;
}
/*====== Index ====*/
/*====== Index ====*/
.show-stream-head{
    background: #fff;
    width: 100%;
    clear: both;
    float: left;
    padding-top: 50px;
}
.stream-head-box{
    display: inline-block;
    width: 100%;
    height: 300px;
    clear: both;
    float: left;
    position: relative;
    border-radius: 0 0 20px 20px;
}
.stream-head-box .header-box-contain{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: 40px 0px;
}
.stream-head-box .header-box-contain h3{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    text-align: center;
    margin-bottom: 5px;
    color: #313131;
}
.stream-head-box .header-box-contain h3 a{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    
}
.stream-head-box .header-box-contain h4{
    text-align: center;
    font-size: 10px;
    color: red;
}
.stream-head-box .header-box-icon{
    width: 100px;
    height: 100px;
    background: #fff;
    text-align: center;
    line-height: 100px;
    font-size: 48px;
    border-radius: 100%;
    color: #c40000;
    margin: 12px auto;
    background-size: 100% 100%;
    transition: .5s;
    box-shadow: 0 0 6px #ccc;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.stream-head-box .header-box-icon .header-box-flame{
    background: #b90000;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 0;
    transition: .5s;
    z-index: 1;
    display: none;
}
.stream-head-box .header-box-icon.IconPlay{
    animation: radioshow 3s ease-out infinite;
}
.stream-head-box .radioshowicon{
    animation: radioshowicon 3s linear infinite;
}



@keyframes radioshow{
0% {color: #e70202;}
50%{
    color: #fff;
}
100%{color: #e70202;}
}
@keyframes radioshowicon{
0% {height:0%;}
50%{height: 100%;}
100%{height:0%;}
}

.stream-head-box .header-box-icon i{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    display: none;
}

.stream-player{
    background: #ffffff;
    display: inline-block;
    width: 100%;
    padding: 20px 20px 50px 20px;
    float: left;
    margin-top: -20px;
    clear: both;
    position: relative;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 5px #ccc;
}
.stream-player .player-box{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
}
.stream-player .player-box audio{ display:none;}
.stream-player .audio-player{
    width: 100%;
    float: left;
    display: grid;
    grid-template-columns: 15% auto;
    gap: 10px;
}
.stream-player .audio-player .player-button{
    grid-row: 1 / 3;
}
.stream-player .audio-player button{
    font-size: 30px;
    width: 65px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    background: #c70000fa;
    display: none;
}
.stream-player .audio-player button.active{display:block;}
.stream-player .audio-player button i{}
.stream-player .audio-player button#play{
}
.stream-player .audio-player button#pause{}
.stream-player .audio-player button#stop{}
.stream-player .audio-player button#mute{}
.stream-player .audio-player button.active{}
.stream-player .audio-player button:hover{}
.stream-player .audio-player button:active{}
.stream-player .audio-player .time{
    color: #fff;
    font-size: 12px;
    line-height: 9px;
    margin-top: 5px;
    color: red;
    position: relative;
}
.stream-player .audio-player .time .time-div{
    position: absolute;
}
.stream-player .audio-player .time span{
    line-height: 16px;
}
.stream-player .audio-player .time span.volume-button{
    margin: 0 10px;
    position: relative;
}
.stream-player .audio-player .time span.volume-button i{
    font-size: 18px;
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.stream-player .audio-player .time span.volume-button.mute{display:none;}
.stream-player .audio-player .time span.live-button{}
.stream-player .audio-player .time span.live-button i{
    font-size: 15px;
    float: left;
    margin-right: 5px;
    color: red;
}
.stream-player .audio-player .progress-container{
    margin-top: 0;
    position: relative;
}
.stream-player .audio-player .progress-container .progress{
    width: 100% !important;
    height: 8px;
    background: #ffbfbfa1;
    border-radius: 10px;
    position: relative;
    /* overflow: hidden; */
}
.stream-player .audio-player .progress-container .progress .progress-complete{
    background: #fb0000;
    height: 8px;
    border-radius: 8px;
    position: relative;
    transition: .5s;
}

.stream-player .audio-player .progress-container .volume-bar{
    color: #575555;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.stream-player .audio-player .progress-container .volume-bar .volume-grid{
    display: flex;
    position: relative;
}
.stream-player .audio-player .progress-container .volume-grid .volume-icon{
    font-size: 18px;
    line-height: 0;
    color: #0577d1;
}
.stream-player .audio-player .progress-container .volume-grid .volume-icon i{}
.stream-player .audio-player .progress-container .volume-grid .volume-bar-total{
    width: 100px;
    height: 5px;
    background: #cde9ff;
    vertical-align: middle;
    margin-top: 7px;
    margin-left: 5px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.stream-player .audio-player .progress-container .volume-grid .volume-count{
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #0577d1;
    border-radius: 8px;
}
.stream-player .audio-player .progress-container .progress .progress-complete::after{content: " ";width: 20px;height: 20px;background: #fb0000;display: block;border-radius: 100%;position: absolute;right: 0;top: 50%;transform: translate(0, -50%);transition: .5s;}

/*--------------*/
.show-stream-head .stream-bottom{
    display: inline-block;
    width: 100%;
    background: #f8f8f8;
    float: left;
    padding: 15px 20px 20px 20px;
    border-radius: 25px 25px 0 0;
    margin-top: -30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 3px #cfcfcf;
}
.show-stream-head .stream-bottom .next-showes{
    display: inline-block;
    text-align: center;
    width: 100%;
    padding-bottom: 40px;
}
.show-stream-head .stream-bottom .next-showes h3{
    text-align: left;
    color: #313131;
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}
.show-stream-head .stream-bottom .next-showes h3 a{
    position: absolute;
    right: 0;
    color: #2296f3;
    font-size: 10px;
    line-height: 14px;
}
.show-stream-head .stream-bottom .next-show-banner{
    width: 100%;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
}
.show-stream-head .stream-bottom .next-show-banner img{
    float: left;
}
.show-stream-head .stream-bottom .next-show-grid{
    display: flex;
    width: 100%;
    clear: both;
    float: left;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
}
.show-stream-head .stream-bottom .next-show-grid .show-thumbnail{
    width: 70px;
    height: 60px;
    float: left;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}
.show-stream-head .stream-bottom .next-show-grid .show-thumbnail img{
    width: auto;
    height: 100%;
    max-height: 100px;
    overflow: hidden;
    border-radius: 5px;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.show-stream-head .stream-bottom .next-show-grid .show-content{
    width: 100%;
    padding: 8px 30px 0 10px;
    float: left;
    position: relative;
}
.show-stream-head .stream-bottom .next-show-grid .show-content h4{
    color: #b90303;
    text-align: left;
    font-size: 10px;
    font-weight: normal;
}
.show-stream-head .stream-bottom .next-show-grid .show-content h3{
    font-size: 12px;
    line-height: 18px;
    width: 100%;
    clear: both;
    float: left;
    margin-bottom: 0;
    padding-bottom: 0;
    letter-spacing: .5px;
    border-bottom: none;
    max-height: 36px;
    overflow: hidden;
}
.show-stream-head .stream-bottom .next-show-grid .show-content h5{
    text-align: left;
    font-size: 10px;
    color: #2296f3;
    font-weight: normal;
    text-transform: capitalize;
}
.show-stream-head .stream-bottom .next-show-grid .show-content .download-icon{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0px, -50%);
    color: #555;
    background: #efefef;
    border-radius: 3px;
    cursor: pointer;
}
.show-stream-head .stream-bottom .next-show-grid .show-content .download-icon i{
    color: #555;
    font-size: 22px;
}
.show-stream-head .stream-bottom  .next-show-ads-grid{
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    width: 100%;
}
.show-stream-head .stream-bottom .next-show-ads{
    margin: 10px 0;
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.show-stream-head .stream-bottom .next-show-ads img{
    border-radius: 8px;
}


/*==== Footer ====*/
.fixed-footer{
    position: fixed;
    bottom: -5px;
    left: 0;
    right: 0;
    z-index:9999;
}
.footer{
    height: 45px;
    padding: 0;
    background: linear-gradient(0deg, #f2f2f2, #ffffff, #f2f2f2);
    border-radius: 15px 15px 0 0;
    color: #fff;
    width: 100%;
    display: inline-block;
    box-shadow: 0 0 3px #ccc;
}
.footer .navigation-menu{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
}
.footer .navigation-menu ul{
    display: flex;
    width: 100%;
    clear: both;
    float: left;
}
.footer .navigation-menu ul li{
}
.footer .navigation-menu li{
    width: 20%;
    float: left;
    text-align: center;
    font-size: 25px;
}
.footer .navigation-menu li .box{
    display: block;
    float: left;
    width: 100%;
}
.footer .navigation-menu li .menu-icon{
    color: #015f89;
    position: relative;
}
.footer .navigation-menu li .menu-icon:active{}
.footer .navigation-menu li .menu-icon i{
    font-size: 20px;
    line-height: 45px;
}
.footer .navigation-menu li .menu-icon span{
    font-size: 30px;
    line-height: 35px;
    width: 40px;
    height: 40px;
    background: #ff5119;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 2px);
    color: #ffffff;
    font-weight: 200;
}
.footer .navigation-menu li .menu-icon:active{}
.footer #massageBox.active::after{content: "";width: 10px;height: 10px;display: block;background: #2196f3;top: -5px;position: absolute;left: 45%;transform: rotate(45deg);}


.live-msg-box{position: absolute;left: 15px;right: 15px;bottom: -1500%;background: #ffffff;border-radius: 10px;transition: .5s;display: block;z-index: -1;}
.live-msg-box .live-massage-row{
    width: 100%;
    height: auto;
    display: inline-block;
    float: left;
    position: relative;
}
.live-msg-box .live-massage-row .massage-icon{
    display: none;
}
.live-msg-box .live-massage-row  h3{
    font-size: 12px;
    padding: 9px 20px;
    background: #2196f3;
    color: #fff;
    border-radius: 5px 5px 0 0;
    position: relative;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #ccc;
    float: left;
}
.live-msg-box .live-massage-row  h3 span{
    position: absolute;
    right: 15px;
    font-size: 16px;
    line-height: 25px;
    top: 3px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
}
.live-msg-box .live-massage-row ul{
    color: #f5f5f5;
    padding: 10px 15px 0 15px;
    max-height: 200px;
    overflow-y: scroll;
    display: inline-block;
    width: 100%;
    float: left;
    box-shadow: 0 0 5px #c6c6c6;
}
.live-msg-box .live-massage-row li{
    background: #f2f2f2;
    margin-bottom: 8px;
    border-radius: 8px;
    padding: 10px;
    font-size: 10px;
    color: #313131;
}
.live-msg-box .live-massage-row li:last-child{}
.live-msg-box .live-massage-row li .box{}
.live-msg-box .live-massage-row li .name{
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    clear: both;
    float: left;
}
.live-msg-box .live-massage-row li .msg{
    width: 100%;
    clear: both;
    font-size: 12px;
    line-height: 16px;
    padding: 5px;
    background: #fff;
    margin: 5px 0;
    float: left;
    display: inline-block;
    border-left: 2px solid #2296f3;
}
.live-msg-box .live-massage-row li .msg p{}
.live-msg-box .live-massage-row li .from{
    font-size: 8px;
    margin: 3px 0;
    line-height: 8px;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    color: #555;
}
.live-msg-box .write-massage{
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 15px 8px 15px;
    background: #2196F3;
    float: left;
    border-radius: 0 0 8px 8px;
}
.live-msg-box .write-massage .write-massage-box{
    width: 100%;
    display: inline-block;
    clear: both;
    float: left;
    position: relative;
}
.live-msg-box .write-massage form{
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}
.live-msg-box .write-massage form textarea{
    width: 100%;
    height: 60px;
    border-radius: 8px;
    resize: none;
    border: 2px solid #2196F3;
    background: #f8f8f8;
    padding: 7px;
    padding-right: 15px;
    font-size: 12px;
    line-height: 18px;
    transition: .5s;
}
.live-msg-box .write-massage form textarea:focus{
    background: #fff;
    outline-color: #2296f3;
}
.live-msg-box .write-massage form button{
    position: absolute;
    right: 0px;
    bottom: 5px;
    border: none;
    top: 11px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    padding-right: 3px;
    color: #2296f3;
}


.live-msg-box .write-massage form button:hover{}

.live-msg-box .massage-data-info{
    display: inline-block;
    width: 100%;
    float: left;
}
.live-msg-box .massage-data-info form{
    padding: 5px 15px 15px 15px;
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    background: #ffffff;
    border: 1px solid #2296f3;
    border-bottom: 8px solid #2296f3;
    border-top: none;
    border-radius: 0 0 5px 5px;
}
.live-msg-box .massage-data-info form h4{
    font-size: 12px;
    margin-bottom: 4px;
    color: #313131;
}
.live-msg-box .massage-data-info form input[type="number"],
.live-msg-box .massage-data-info form input[type="text"]{
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    background: #f8f8f8;
    border: 1px solid #ccc;
    transition: .5s;
}
.live-msg-box .massage-data-info form input[type="number"]:focus,
.live-msg-box .massage-data-info form input[type="text"]:focus{
    background: #fff;
    outline-color: #2296f3;
}
.live-msg-box .massage-data-info form input[type="submit"]{
    width: 100%;
    padding: 10px;
    background: #363e45;
    border: none;
    font-weight: 400;
    color: #fff;
    border-radius: 2px;
    transition:.5s;
    cursor: pointer;
}
.live-msg-box .massage-data-info form input[type="submit"]:hover{
    background: orangered;
}
.live-msg-box .massage-data-info form input[type="submit"]:active{
    background: #000;
}


.live-fixed-massges{
    position: absolute;
    top: -500%;
    z-index: 9999;
    display: block;!;!i;!;
    transition: .5s;
    right: 0;
    left: 0;
}
.live-fixed-massges .single-msg::before{
    content: " ";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    right: 5.5%;
    background: #ffffff;
    transform: rotate(45deg);
    top: -9px;
    border-top: 1px ridge #999696;
    border-left: 1px ridge #999696;
}
.live-fixed-massges .single-msg{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    padding: 10px 20px 10px 30px;
    transition: 1s;
    opacity: 1;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0 10px #4f4e4e;
}
.live-fixed-massges .single-msg span{
    position: absolute;
    left: 5px;
    width: 20px;
    height: 20px;
    background: #ff1d1d;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
}
.live-fixed-massges .single-msg button:hover{}
.live-fixed-massges .single-msg button:active{}
.live-fixed-massges .single-msg .name{
    font-size: 12px;
    font-weight: 600;
    color: #2196F3;
}
.live-fixed-massges .single-msg .msg{
    font-size: 11px;
    line-height: 14px;
    padding: 12px 10px;
    background: #f5f5f5;
    margin: 3px 0;
    border-radius: 3px;
    color: #000;
}
.live-fixed-massges .single-msg .from{
    margin-top: 2px;
    display: inline-block;
    width: 100%;
    font-size: 10px;
    line-height: 10px;
    float: left;
    color: #05a90b;
    white-space: nowrap;
}




/*===== Showes ======*/
.all-showes{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: 60px 0;
    background: #fff;
    padding: 10px 15px;
}
.all-showes .upcoming-showes{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 5px;
}
.all-showes .upcoming-showes h3{
    font-size: 14px;
    margin-bottom: 5px;
    color: #313131;
}
.all-showes .upcoming-showes h3 i{
    color: darkred;
}
.all-showes .upcoming-showes ul{
    display: flex;
    width: 200%;
    clear: left;
    gap: 10px;
    transition: .5s;
}
.all-showes .upcoming-showes ul li{
    width: 33.33%;
    background: #f8f8f8;
    box-shadow: 0 0 3px #ccc;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.all-showes .upcoming-showes ul li .show-thumbnail{
    height: 100px;
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    overflow: hidden;
}
.all-showes .upcoming-showes ul li .show-thumbnail img{
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.all-showes .upcoming-showes ul li .show-content{display: inline-block;width: 100%;float: left;padding: 8px;}
.all-showes .upcoming-showes ul li .show-content h4{
    text-align: center;
    font-size: 8px;
    text-align: left;
    color: red;
}
.all-showes .upcoming-showes ul li .show-content h5{
    font-size: 11px;
    line-height: 13px;
    margin: 3px 0;
    text-align: left;
    overflow: hidden;
    color: #313131;
    max-height: 25px;
}
.all-showes .upcoming-showes ul li .show-content h6{
    font-size: 10px;
    font-weight: normal;
    color: #555;
}
.all-showes .upcoming-showes .sliding-button{
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translate(0, -50%); */
}
.all-showes .upcoming-showes .sliding-button button{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(3px, -50%);
    width: 30px;
    height: 30px;
    border: none;
    font-size: 15px;
    border-radius: 100%;
    color: #313131;
    transition: .5s;
    cursor: pointer;
    opacity: .7;
}
.all-showes .upcoming-showes .sliding-button button:hover{
    opacity: 1;
}
.all-showes .upcoming-showes .sliding-button button:active{
    background: #000;
    color: #fff;
    opacity: 1;
}
.all-showes .upcoming-showes .sliding-button button.slide-next{
    left: unset;
    right: 10px;
}
.all-showes .completed-showes{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #cf0000;
    margin-bottom: 5px;
}
.all-showes .completed-showes h3{
    padding: 7px 10px;
    color: #fff;
    background: #cf0000;
    border-bottom: 1px solid;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
}
.all-showes .completed-showes .showes-find{
    display: flex;
    width: 100%;
    padding: 10px;
    float: left;
    gap: 10px;
}
.all-showes .completed-showes .showes-find .showes-input{
    width: 90%;
    float: left;
}
.all-showes .completed-showes .showes-find input[type="text"]{
    width: 100%;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #ccc;
    font-size: 12px;
    line-height: 12px;
    border-radius: 3px;
    transition: .5s;
}
.all-showes .completed-showes .showes-find input[type="text"]:focus{
    background: #fff;
    outline-color: #2296f3;
}
.all-showes .completed-showes .showes-find .find-calender{
    width: 10%;
    float: right;
}
.all-showes .completed-showes .showes-find button{
    width: 100%;
    font-size: 18px;
    line-height: 20px;
    padding: 0px;
    border: none;
    background: #e5e5e5;
    color: #fff;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.all-showes .completed-showes .showes-find input[type="date"]{
    float: right;
    padding: 0 8px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 25px;
    margin-right: 0;
}

.all-showes .completed-showes .showes-find input[type="date"]:focus, .all-showes .completed-showes .showes-find input[type="date"]:active{
    border: none;
    outline: none;
}
.all-showes .completed-showes ul{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    padding: 0 10px;
}
.all-showes .completed-showes ul li{
    display: flex;
    gap: 10px;
    width: 100%;
    clear: both;
    float: left;
    margin-bottom: 10px;
    background: #f9f9f9;
    box-shadow: 0 0 3px #ccc;
    padding: 10px;
    border-radius: 8px;
    position: relative;
}
.all-showes .completed-showes li .show-thumbnail{
    width: 75px;
    height: 60px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
}
.all-showes .completed-showes li .show-thumbnail img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: auto;
}
.all-showes .completed-showes li .show-content{
    width: auto;
    padding: 3px 0;
}
.all-showes .completed-showes li .show-content h4{
    font-size: 8px;
    color: red;
    font-weight: 500;
    width: 100%;
    float: left;
}
.all-showes .completed-showes li .show-content h5{
    color: #313131;
    width: 100%;
    float: left;
    font-size: 12px;
    margin: 3px 0;
    font-weight: 600;
    line-height: 15px;
    max-height: 30px;
    overflow: hidden;
}
.all-showes .completed-showes li .show-content h6{
    font-size: 10px;
    font-weight: normal;
    color: #555;
}
.all-showes .completed-showes li .show-content button{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%);
    width: 45px;
    height: 45px;
    font-size: 20px;
    line-height: 45px;
    background: #fff;
    color: #d70202;
    border: 1px solid #d70202;
    border-radius: 100%;
    padding-left: 4px;
    transition: .5s;
}
.all-showes .completed-showes li .show-content button:hover{
    background: #d70202;
    color: #fff;
}
/*======= Comment ========*/
.show-comments{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: -30px 0 0 0;
    z-index: 1;
    position: relative;
    border-radius: 15px 15px 0 0;
    background: #000;
    padding: 0 20px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0;
    right: 0;
}
.show-comments h3{
    color: #2296f3;
    padding: 10px 0 5px 0;
    border-bottom: 1px solid;
    margin-bottom: 5px;
    font-size: 17px;
}
.show-comments .show-comment-box{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
}
.show-comments .show-comment-box .show-comment-write{
    width: 100%;
    display: inline-block;
    clear: both;
    float: left;
}
.show-comments .show-comment-box .show-comment-write form{
    width: 100%;
    display: inline-block;
    clear: both;
    position: relative;
    float: left;
}
.show-comments .show-comment-box .show-comment-write form input[type="number"],
.show-comments .show-comment-box .show-comment-write form input[type="text"]{
    width: 100%;
    padding: 8px;
    font-size: 12px;
    line-height: 12px;
    border-radius: 3px;
    border: none;
    margin-bottom: 5px;
    background: #d9d9d9;
    transition: .5s;
}
.show-comments .show-comment-box .show-comment-write form input[type="number"]:focus,
.show-comments .show-comment-box .show-comment-write form input[type="text"]:focus{
    background: #fff;
    outline-color: #2296f3;
}
.show-comments .show-comment-box .show-comment-write form input[type="submit"]{
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 3px;
    background: #FF5722;
    color: #f2f2f2;
}
.show-comments .show-comment-box .show-comment-write form textarea{
    width: 100%;
    padding: 5px 30px 5px 5px;
    resize: none;
    height: 60px;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    line-height: 14px;
    transition: .5s;
    background: #ffffffc9;
}
.show-comments .show-comment-box .show-comment-write form textarea:focus{
    background: #fff;
    outline-color: #2296f3;
}
.show-comments .show-comment-box .show-comment-write form button{
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    background: transparent;
    border: none;
    transform: translate(0, -50%);
}
.show-comments .show-comment-box .show-comment-write form button i{
    font-size: 28px;
    color: #2296f3;
}

.show-comments .show-comment-box .comment-view{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin-bottom: 10px;
}
.show-comments .show-comment-box .comment-view ul{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    color: #f2f2f2;
    max-height: 250px;
    overflow-y: scroll;
    margin: 10px 0;
}
.show-comments .show-comment-box .comment-view li{
    background: #232020;
    border-radius: 7px;
    padding: 10px;
    margin-bottom: 10px;
}
.show-comments .show-comment-box .comment-view li .box{
    display: inline-block;
    width: 100%;
}
.show-comments .show-comment-box .comment-view li .name{
    font-size: 13px;
    line-height: 13px;
    width: 100%;
    clear: both;
    float: left;
    color: #31a4ff;
}
.show-comments .show-comment-box .comment-view li .msg{
    font-size: 12px;
    line-height: 15px;
    margin: 5px 0;
    display: inline-block;
    width: 100%;
}
.show-comments .show-comment-box .comment-view li .massage p{}
.show-comments .show-comment-box .comment-view li .from{
    font-size: 10px;
    font-weight: normal;
    color: yellow;
}


/*======== Admin Page =========*/
.admin-dashboard{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    padding: 20px;
}
.admin-dashboard .content-data{
    background: #fff;
    width: 100%;
    clear: both;
    float: left;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 3px #ccc;
    display: inline-block;
}
.admin-dashboard .radio-data{
    background: #fff;
    width: 75%;
    clear: both;
    float: left;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 3px #ccc;
}

.admin-dashboard .content-data .welcome-massage{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}
.admin-dashboard .content-data .welcome-massage h1{
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    line-height: 20px;
}
.admin-dashboard .content-data .welcome-massage img{
    width: 100px;
    height: 100px;
}
.admin-dashboard .content-data .welcome-massage span{
    display: block;
    font-size: 20px;
    color: #2a2c2b;
    margin: 10px 0;
}
.admin-dashboard .content-data .welcome-massage span i{
    text-transform: uppercase;
    color: red;
    font-size: 18px;
}
.admin-dashboard .content-data .dashboard-menu-box{
    width: 580px;
    margin: 15px auto 25px auto;
}
.admin-dashboard .content-data .dashboard-menu-box ul{
    display: flex;
    width: 100%;
    gap: 15px;
}
.admin-dashboard .content-data .dashboard-menu-box li{
    width: 50%;
    text-align: center;
}
.admin-dashboard .content-data .dashboard-menu-box li a{
    display: block;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid;
}
.admin-dashboard .content-data .dashboard-menu-box li:first-child a{
    background: #f4faff;
    color: #1191f7;
    border-color: #c1e3ff;
}
.admin-dashboard .content-data .dashboard-menu-box li:nth-child(3) a{
    background: #fef4ff;
    color: #9C27B0;
    border-color: #9C27B0;
}
.admin-dashboard .content-data .dashboard-menu-box li:nth-child(2) a{
    background: #eeffee;
    color: #00b700;
    border-color: #9bff9b;
}
.admin-dashboard .content-data .dashboard-menu-box li:nth-child(4) a{
    background: #E0F2F1;
    color: #009688;
    border-color: #009688;
}
.admin-dashboard .content-data .dashboard-menu-box li:nth-child(5) a{
    background: #ffeeee;
    color: #e30000;
    border-color: #ffc1c1;
}
.admin-dashboard .content-data .dashboard-menu-box li:nth-child(5) a{}
.admin-dashboard .content-data .dashboard-menu-box li a:hover{
}
.admin-dashboard .content-data .dashboard-menu-box li i{
    display: block;
    font-size: 40px;
}
.admin-dashboard .content-data .dashboard-menu-box li span{
    display: block;
    width: 100%;
    font-size: 14px;
    margin: 10px 0;
}
/*---- On air page ---*/
.on-air-page{
    display: inline-block;
    width: 75%;
    clear: both;
    float: left;
}
.massage-box .on-air-page{
    margin: 0 auto;
    float: unset;
    display: block;
}
.backbutton{
    display: block;
    padding: 10px 20px;
    background: orangered;
    width: max-content;
    margin: 0 auto;
    color: #fff;
    border-radius: 5px;
    line-height: 16px;
}
.backbutton:hover{}
.on-air-page h2{
    font-size: 18px;
    color: red;
    border-bottom: 1px solid #ccc;
    padding: 0 0 5px 0;
    margin-bottom: 10px;
}
.on-air-page .on-air-grid{
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 15px 0;
}
.on-air-page .on-air-thumbnail{
    width: 20%;
    background: #fbfbfb;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 3px;
}
.on-air-page .on-air-thumbnail form{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin-bottom: 5px;
}
.on-air-page .on-air-thumbnail label{
    display: block;
    float: left;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.on-air-page .on-air-thumbnail input[type="file"]{
    width: 60%;
    margin-top: 5px;
}
.on-air-page .on-air-thumbnail input[type="submit"]{
    float: right;
    padding: 7px 12px;
    background: #2296f3;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    transition: .5s;
}
.on-air-page .on-air-thumbnail input[type="submit"]:hover{}
.on-air-page .on-air-thumbnail input[type="submit"]:active{}
.on-air-page .on-air-thumbnail .on-air-load-thumbnail{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: 10px 0;
    margin-bottom: 0;
}
.on-air-page .on-air-thumbnail .on-air-load-thumbnail img{
    width: 100%;
    height: auto;
}


.on-air-page .on-air-player{
    width: 35%;
    background: #fbfbfb;
    border: 1px solid #ccc;
    border-radius: 3px;
    position: relative;
}
.on-air-player .stream-head-box{
    padding-top: 0;
    height: 250px;
}
.on-air-player .header-box-contain{
    margin: 25px 0;
}
.on-air-player .stream-player{
    padding: 20px;
}
.on-air-player .stream-player .audio-player button{
}

.on-air-page .on-air-player .oa-player-data{
    display:inline-block;
    width:100%;
    padding: 25px 0;
    position: relative;
}
.on-air-page .on-air-player .oa-player-data .play-icon-box{
    background: red;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 25px auto 0 auto;
    border-radius: 100%;
    overflow: hidden;
}
.on-air-page .on-air-player .oa-player-data .play-icon-box button{
    background: transparent;
    border: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    margin-left: 4px;
    color: #fff;
}
.on-air-page .on-air-player .oa-player-data .play-icon-box .play-box-flame{}
.on-air-page .on-air-player .playing-bar{
    display: inline-block;
    width: 100%;
    padding: 10px;
    clear: both;
    float: left;
}
.on-air-page .on-air-player .playing-bar .playing-bar-line{
    overflow: hidden;
    height: 8px;
    background: #ffacac;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
}
.on-air-page .on-air-player .playing-bar .playing-bar-line .playing-bar-progress{
    background: linear-gradient(90deg, #ab0000, #fb5a5a, #ab0000, #fb5a5a, #ab0000, #fb5a5a, #ab0000, #fb5a5a, #ab0000, #fb5a5a, #ab0000, #fb5a5a);
    background-size: 200% 200%;
}
.on-air-page .on-air-player .player-mixc{}
.on-air-page .on-air-player .player-recorder{
    position: absolute;
    left: 10px;
    top: 10px;
    color: #e30000;
    font-size: 12px;
    font-weight: bold;
}
.on-air-page .on-air-player .recording-box{}
.on-air-page .on-air-player .recording-box span{}
.on-air-page .on-air-player .recording-box span i{}

.on-air-page .program-info{
    width: 65%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0;
}
.on-air-page .program-info h3{
    font-size: 14px;
    padding: 10px;
    background: #f2f2f2;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
    color: #007bdf;
}
.on-air-page .program-info form{
    padding: 10px;
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto;
    gap: 15px;
}
.on-air-page .program-info form .form-row{
    float: left;
}
.on-air-page .program-info form label{}
.on-air-page .program-info form input[type="date"],
.on-air-page .program-info form input[type="text"]{
    width: 100%;
    padding:8px;
    background: #f8f8f8;
    border: 1px solid #ccc;
}
.on-air-page .program-info form input[type="text"]:focus{}
.on-air-page .program-info form label{
    font-size: 13px;
    margin-bottom: 3px;
    display: block;
    float: left;
    width: 100%;
    font-weight: 500;
}
.on-air-page .program-info form select{
    width: 100%;
    padding: 7px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: .5s;
    background: #f8f8f8;
}
.on-air-page .program-info form select:hover{}
.on-air-page .program-info form .categories-box{}
.on-air-page .program-info form .categories-box li{}
.on-air-page .program-info form .categories-box input[type="checkbox"]{}
.on-air-page .program-info form .status-box{
    display: flex;
    width: 100%;
    gap: 10px;
}
.on-air-page .program-info form .status-box li{
    padding-right: 5px;
    width: 50%;
}
.on-air-page .program-info form .status-box li label{
    background: #f5f5f5;
    padding: 10px;
    border-radius: 7px;
    clear: both;
    float: left;
    cursor: pointer;
    transition: .5s;
    color: #444;
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    border: 1px solid #e9e9e9;
}
.on-air-page .program-info form .status-box input[type="radio"]{
    float: left;
    margin-right: 5px;
}
.on-air-page .program-info form input[type="submit"]{
    background: #0276d3;
    color: #fff;
    width: 150px;
    padding: 8px;
    border: none;
    border-radius: 3px;
    font-weight: bold;
    float: left;
    cursor: pointer;
    transition: .5s;
}
.on-air-page .program-info form .reset-button{
    background: #525252;
    color: #fff;
    width: auto;
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    font-weight: bold;
    display: block;
    float: left;
    font-size: 13px;
    line-height: 16px;
    margin-left: 7px;
    cursor: pointer;
    transition: .5s;
}
.on-air-page .program-info form input[type="submit"]:hover{
    background: #3fa9ff;
}
.on-air-page .program-info form .reset-button:hover{
    background: red;
}
.on-air-page .program-info form input[type="submit"]:active{
    background: #000;
}
.on-air-page .program-info form .reset-button:active{
    background: #000;
}

.on-air-page .comments-grid{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: 10px 0;
}
.on-air-page .comments-grid h2{}
.on-air-page .comments-grid .comment-row{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    margin: 10px 0;
}

.on-air-page .comments-grid .approve-comments,
.on-air-page .comments-grid .pending-comment-box{border: 1px solid #ccc;border-radius: 8px;overflow: hidden;}
.on-air-page .comments-grid .approve-comments h3,
.on-air-page .comments-grid .comment-row .pending-comment-box h3{font-size: 12px;padding: 10px;background: #484747;border-bottom: 1px solid #ccc;color: #f2f2f2;font-weight: normal;}
.on-air-page .comments-grid .approve-comments ul,
.on-air-page .comments-grid .pending-comment-box ul{padding: 10px;display: inline-block;width: 100%;float: left;clear: both;max-height: 246px;overflow-y: scroll;}
.on-air-page .comments-grid .approve-comments ul{
    max-height: 450px;
}
.on-air-page .comments-grid .approve-comments li,
.on-air-page .comments-grid .pending-comment-box li{background: #f8f8f8;padding: 10px;margin-bottom: 10px;box-shadow: 0 0 3px #ccc;border-radius: 5px;display: flex;}
.on-air-page .comments-grid .approve-comments .box,
.on-air-page .comments-grid .pending-comment-box li .box{width: auto;float: left;}
.on-air-page .comments-grid .approve-comments h4,
.on-air-page .comments-grid .pending-comment-box li h4{font-size: 14px;font-weight: 500;color: #444;}
.on-air-page .comments-grid .approve-comments .msg,
.on-air-page .comments-grid .pending-comment-box li .msg{font-size: 12px;line-height: 18px;margin: 7px 0;background: #fff;padding: 10px;border-left: 5px double #2296f3;border-right: 5px double #2296f3;}
.on-air-page .comments-grid .approve-comments h5,
.on-air-page .comments-grid .pending-comment-box li h5{font-size: 10px;font-weight: 500;color: #666666;}
.on-air-page .comments-grid .approve-comments .action-button,
.on-air-page .comments-grid .pending-comment-box li .action-button{width: 30px;margin-right: 15px;position: relative;}
.on-air-page .comments-grid .approve-comments button,
.on-air-page .comments-grid .pending-comment-box li .action-button button{display:block;width: 25px;height: 25px;margin-bottom: 3px;background: #fff;border-radius: 3px;border: none;font-size: 15px;color: red;cursor: pointer;transition: .5s;}
.on-air-page .comments-grid .approve-comments button i,
.on-air-page .comments-grid .pending-comment-box li .action-button button i{}
.on-air-page .comments-grid .approve-comments button:hover,
.on-air-page .comments-grid .pending-comment-box button:hover{}
.on-air-page .comments-grid .approve-comments button:active,
.on-air-page .comments-grid .pending-comment-box button:active{}

.on-air-page .comments-grid .comment-row .comment-edit-box{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    overflow: hidden;
}
.on-air-page .comments-grid .comment-row .comment-edit-box h3{
    background: #484747;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
}
.on-air-page .comments-grid .comment-row .comment-edit-box form{
    padding: 10px;
}
.on-air-page .comments-grid .comment-row .comment-edit-box form textarea,
.on-air-page .comments-grid .comment-row .comment-edit-box form input[type="text"]:nth-child(2){float:right;}
.on-air-page .comments-grid .comment-row .comment-edit-box form input[type="text"]{
    width: 48%;
    float: left;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    transition: .5s;
    font-size: 12px;
}
.on-air-page .comments-grid .comment-row .comment-edit-box form textarea:focus,
.on-air-page .comments-grid .comment-row .comment-edit-box form input[type="text"]:focus{}
.on-air-page .comments-grid .comment-row .comment-edit-box form textarea{
    width: 100%;
    resize: none;
    height: 75px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    padding: 8px;
    margin-bottom: 8px;
    transition: .5s;
}
.on-air-page .comments-grid .comment-row .comment-edit-box form button{}
.on-air-page .comments-grid .comment-row .comment-edit-box form button i{}
.on-air-page .comments-grid .comment-row .comment-edit-box form input[type="submit"],
.on-air-page .comments-grid .comment-row .comment-edit-box form input[type="reset"]{
    width: 120px;
    padding: 8px;
    text-transform: uppercase;
    background: #cb0202;
    color: #fff;
    border-radius: 5px;
    border: none;
}
.on-air-page .comments-grid .comment-row .comment-edit-box form input[type="submit"]{
    background: #2296f3;
}
.stream-statistics{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: 15px 0 0 0;
    position: relative;
}
.stream-statistics .ss-data{
    display: flex;
    width: 100%;
    clear: both;
    border-top: 1px solid #c9c9c9;
    border-left: none;
    border-right: none;
    padding: 10px 0 0 0;
    font-size: 12px;
    color: #444;
}
.stream-statistics .ss-data h3{
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    color: red;
    width: 120px;
}
.stream-statistics .ss-data ul{
    display: flex;
    width: 80%;
    margin-left: 5%;
}
.stream-statistics .ss-data li{
    width: 15%;
}
.massage-box .stream-statistics .ss-data li{
    line-height: 35px;
}
.stream-statistics .ss-data span{}
.stream-statistics .ss-data span:first-child{
    font-weight: 500;
}
.on-update-massage{
    display: inline-block;
    width: 75%;
    float: left;
    padding: 10px 0px 10px 0;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    margin: 20px 0;
}
.on-update-massage h2{
    color: #454241;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding: 8px 10px;
    margin-top: -10px;
}
.on-update-massage p{
    padding: 15px;
    background: #f8f8f8;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 0 3px #ccc;
    color: #444;
    font-size: 14px;
    line-height: 20px;
}
.on-update-massage p i{
    font-size: 18px;
}
.on-update-massage form{
    display: flex;
    padding: 10px;
    width: 100%;
    gap: 20px;
}
.on-update-massage form .form-row{
    width: 40%;
}
.on-update-massage form .form-row label{
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    color: #444;
    width: 100%;
}
.on-update-massage form textarea{
    resize: none;
    height: 80px;
    margin-bottom: 3px !important;
}
.on-update-massage form textarea,
.on-update-massage form input[type="text"]{
    width: 100%;
    margin: 3px 0 20px 0;
    padding: 10px;
    font-size: 12px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    transition: .5s;
}
.on-update-massage form textarea:focus,
.on-update-massage form input[type="text"]:focus{
    background: #fff;
    outline-color: #2296f3;
}
.on-update-massage form .reset,
.on-update-massage form input[type="submit"]{
    width: 150px;
    padding: 10px;
    border: none;
    background: #2296f3;
    border-radius: 5px;
    cursor: pointer;
    transition: .5s;
    color: #fff;
    float: left;
    text-align:center;
    font-size: 14px;
    margin-right: 10px;
}
.on-update-massage form input[type="submit"]:hover{
    background: #673AB7;
}.on-update-massage form .reset{background:red;}

.on-update-massage form .reset:hover{background:darkred;}
.on-update-massage form .reset:active{background:#000;}

.on-update-massage form input[type="submit"]:active{
    background: #000;
}
.massages-section{
    width: 25%;
    float: right;
    padding-left: 15px;
    margin-right: -15px;
    margin-bottom: -15px;
    border-radius:  0 8px 8px 0;
}
.massage-box .massages-section{
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.massages-section .all-massages-grid{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    background: #ffffff;
    box-shadow: 0 0 3px #c1c1c1;
}
.massage-box .all-massages-grid h2{
    border-radius: 10px 10px 0 0 !important;!i;!;
    margin: 0 !important;!i;!;
    background: #2296f3 !important;!i;!;
    border: none !important;!i;!;
}
.massages-section .all-massages-grid h2{
    font-size: 20px;
    background: #7a7c7d;
    color: #fff;
    padding: 13px;
    margin: -15px 0 0px 0px;
    border-radius: 0 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}
.massages-section .all-massages-grid ul{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    max-height: 580px;
    overflow-y: scroll;
}
.massages-section .all-massages-grid li{
    display: flex;
    width: 100%;
    padding: 10px 15px;
    position: relative;
    border-bottom: 1px solid #e9e9e9;
}
.massages-section .all-massages-grid li.approved{}
.massages-section .all-massages-grid li .action-button{width: 35px;padding-top: 2px;min-width: 35px;}
.massages-section .all-massages-grid li .action-button button{
    width: 30px;
    height: 30px;
    background: #2296f3;
    color: #fff;
    border: none;
    border-radius: 3px;
    margin-bottom: 3px;
    cursor: pointer;
    transition: .5s;
}
.massages-section .all-massages-grid li .action-button button:hover{
    background: #e8f4fd;
    color: #2296f3;
}
.massages-section .all-massages-grid li .action-button button.approve{
    background: #01cf01;
    color: #fff;
}
.massages-section .all-massages-grid li .action-button button.approve:hover{
    background: #e3ffe3;
    color: #01cf01;
}

.massages-section .all-massages-grid li .action-button button.remove{
    background: #fbdfdf;
    color: #fd3030;
}
.massages-section .all-massages-grid li .action-button button.remove:hover{
    background: #fd3030;
    color: #fff;
}
.massages-section .all-massages-grid li .action-button button:active{background:#000 !important;color:#fff !important;}
.massages-section .all-massages-grid li .action-button button:disabled:hover,
.massages-section .all-massages-grid li .action-button button:disabled{
    background:#f2f2f2;
    color:#9E9E9E;
    cursor:no-drop;
}

.massages-section .all-massages-grid .box{
    font-size: 13px;
    line-height: 18px;
    padding-left: 10px;
}
.massages-section .all-massages-grid li h4{
    font-size: 14px;
    color: #F44336;
    margin-bottom: 3px;
}
.massages-section .all-massages-grid li .msg{
    background: #f2f2f2;
    padding: 8px;
    border-radius: 3px;
}
.massages-section .all-massages-grid li h5{
    font-size: 12px;
    margin-top: 5px;
    font-weight: 400;
    color: #9b9b9b;
}
.massages-section .comment-edit-box{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    background: #bdbdbd;
    padding: 10px;
    position: relative;
}
.massages-section .comment-edit-box form{
    display: inline-block;
    width: 100%;
    position: relative;
}
.massages-section .comment-edit-box textarea{
    width: 100%;
    padding: 10px 30px 10px 5px;
    border-radius: 8px;
    resize: none;
    font-size: 13px;
    line-height: 16px;
    height: 70px;
    border: none;
    background: #f8f8f8;
    transition: .5s;
}
.massages-section .comment-edit-box textarea:focus{
    background: #fff;
    outline-color: #2296f3;
}
.massages-section .comment-edit-box button{
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translate(0, -50%);
    background: transparent;
    border: none;
    outline: none;
    color: #2296f3;
}
.massages-section .comment-edit-box button i{
    color: inherit;
}
.massages-section .comment-edit-box button:hover{
    color: orangered;
}
.massages-section .comment-edit-box button:active{
    color: #000;
}

.godashboard{
    padding: 8px 10px;
    color: #fff;
    background: orangered;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
.setting-form{
    display: inline-block;
    width: 100%;
    float: left;
}
.setting-form form{
    width: 728px;
    display: grid;
    grid-template-columns: 30% 45% 25%;
    gap: 20px;
    margin-bottom: 20px;
}
.setting-form form label{
    font-size: 12px;
    line-height: 30px;
    font-weight: 500;
}
.setting-form form img{
    height: 100px;
    width: auto;
    margin-top: 5px;
}
.setting-form form img.banner{width:200px;height:auto;}
.setting-form input[type="text"]{
    background: #f8f8f8;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 12px;
}
.setting-form input[type="file"]{
    margin: 8px 0;
    display: inline-block;
    width: 100%;
}
.setting-form input[type="text"]:focus{}
.setting-form input[type="submit"]{
    background: #2296f3;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    padding: 5px;
    cursor: pointer;
    transition: .5s;
    height: 32px;
}
.setting-form input[type="submit"]:hover{
    background: orangered;
}
.setting-form input[type="submit"]:active{
    background: #000;
}


/* width */
::-webkit-scrollbar {
  width: 8px;
    display:none;
}
.setloader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e7e7e78a;
    display: none;
}
.loading {
  border: 16px solid #0081e7; /* Light grey */
  border-top: 16px solid #ff7043; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 12.5% auto;
}
.login-form-box{
    width: 360px;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
}
.login-form-box .logo{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
}
.login-form-box .logo img{
    width: 80px;
    border-radius: 100%;
}
.login-form-box h2{
    text-align: center;
    color: #2296f3;
    border-bottom: 1px solid #2196F3;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
}
.login-form-box form{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin: 10px 0;
}
.login-form-box .form-row{
    margin: 15px 0;
    display: grid;
    width: 100%;
    clear: both;
    grid-template-columns: 30% 70%;
}
.login-form-box form label{
    font-size: 12px;
    font-weight: 500;
    line-height: 30px;
}
.login-form-box form input[type="text"],
.login-form-box form input[type="password"]{
    background: #f8f8f8;
    border: 1px solid #ccc;
    padding: 5px;
    transition: .5s;
}
.login-form-box form input[type="text"]:focus,
.login-form-box form input[type="password"]:focus{
    background: #fff;
    outline-color: #2296f3;
}
.login-form-box form input[type="submit"]{
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #2296f3;
    border: none;
    border-radius: 3px;
    transition: .5s;
    cursor: pointer;
}
.login-form-box form input[type="submit"]:hover{
    background: orangered;
}
.login-form-box form input[type="submit"]:active{
    background: #000;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.archive-programs{}
.archive-programs h2{
    font-size: 16px;
    color: orangered;
    border-bottom: 1px solid;
    padding-bottom: 3px;
    margin-bottom: 5px;
}
.archive-programs h2 i{}
.archive-programs .archive-programs-grid{
    display: grid;
    grid-template-columns: 30% 70%;
}
.archive-programs .add-archive-programs{
    padding-right: 30px;
    margin: 15px 0;
    border-radius: 3px;
}
.archive-programs .add-archive-programs:last-child{}
.archive-programs .add-archive-programs h3{
    background: #555;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    border-radius: 5px 5px 0 0;
}
.archive-programs .add-archive-programs form{
    padding: 15px;
    box-shadow: 0 0 3px #ccc;
    display: inline-block;
    width: 100%;
    clear: both;
}
.archive-programs .add-archive-programs .form-row{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    margin-bottom: 10px;
}
.archive-programs .add-archive-programs form label{
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-bottom: 3px;
}
.archive-programs .add-archive-programs form input[type="text"]{
    width: 100%;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #ccc;
}
.archive-programs .add-archive-programs form input[type="text"]:focus{
    background: #fff;
    outline-color: #2296f3;
}
.archive-programs .add-archive-programs form input[type="file"]{}
.archive-programs .add-archive-programs form input[type="submit"]{
    width: 120px;
    padding: 10px;
    background: #2296f3;
    color: #fff;
    border: none;
    border-radius: 3px;
    transition: .5s;
    cursor: pointer;
}
.archive-programs .add-archive-programs form input[type="submit"]:hover{
    background: orangered;
}
.archive-programs .add-archive-programs form input[type="submit"]:active{
    background: #000;
}
.archive-programs .add-archive-programs ul{display: inline-block;width: 100%;float: left;box-shadow: 0 0 3px #ccc;}
.archive-programs .add-archive-programs ul li{
    padding: 10px;
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    border-top: 1px solid #e1e1e1;
}
.archive-programs .add-archive-programs ul li p{
    display: inline-block;
    width: 100%;
    clear: both;
    float: left;
    text-align: center;
    padding: 20px;
    color: red;
}
.archive-programs .add-archive-programs li .box{
    display: flex;
    position: relative;
    width: 100%;
}
.archive-programs .add-archive-programs ul .thumbnail{
    border-radius: 5px;
    overflow: hidden;
    width: 75px;
    height: 75px;
    position: relative;
    float: left;
}
.archive-programs .add-archive-programs ul .thumbnail img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
}
.archive-programs .add-archive-programs ul .contents{width: 45%;padding: 0 15px;}
.archive-programs .add-archive-programs ul .contents h4{
    font-size: 12px;
    color: orangered;
    font-weight: 400;
    margin-bottom: 3px;
}
.archive-programs .add-archive-programs ul .contents h3{
    background: transparent;
    color: #313131;
    padding: 0;
    margin: 5px 0;
    font-size: 15px;
}
.archive-programs .add-archive-programs ul .contents h5{
    font-size: 10px;
    font-weight: 600;
    color: #666;
}
.archive-programs .add-archive-programs ul .preview{
    width: 30%;
    text-align: center;
}
.archive-programs .add-archive-programs ul .preview audio{
    width: 80%;
    height: 50px;
}
.archive-programs .add-archive-programs ul .action-button{width: 20%;float:right;text-align: right;padding: 15px 0;}
.archive-programs .add-archive-programs ul .action-button button{
    width: 30px;
    height:30px;
    line-height:30px;
    font-size:14px;
    background: #2296f3;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    transition: .5s;
    color: #fff;
    border:none;
}
.archive-programs .add-archive-programs ul .action-button button:hover{
    background: #f1f1f1;
    color: #2296f3;
}
.archive-programs .add-archive-programs ul .action-button button.remove{
    background:red;
    color:#fff;
}
.archive-programs .add-archive-programs ul .action-button button.remove:hover{background:#f2f2f2;color:red;}
.archive-programs .add-archive-programs ul .action-button button:active{background:#000 !important;color:#fff !important;}



.archive-programs .add-archive-programs ul .contents .remove{
}
.archive-programs .add-archive-programs ul .contents .download-button{
    position: absolute;
    right: 35px;
    top: 0;
    width: 30px;
    padding: 5px;
    background: #efefef;
    text-align: center;
    border-radius: 3px;
    color: #555;
    cursor: pointer;
    transition: .5s;
}
.archive-programs .add-archive-programs ul .contents .download-button:hover{
    background:#2296f3;color:#fff;
}
.archive-programs .add-archive-programs ul .contents .remove:hover{
    background:red;color:#fff;
}

.archive-programs .add-archive-programs ul .contents .download-button:active,
.archive-programs .add-archive-programs ul .contents .remove:active{
    background:#000;
    color:#fff;
}
.archive-programs .add-archive-programs ul .contents .download-button i{}


@media only screen and (max-width: 520px) {
    .inner{width:100%;}
    .show-stream-head .stream-player .audio-player{
    grid-template-columns: 65px auto;
    }
}