@media(max-width:1200px) {
    .login-wrapper {
        max-width: 100%;
        width: 100%;
        padding: 0 30px;
    }
    .login-wrapper .form-wrapper {
        padding: 35px 35px;
    }
}

@media all and (max-width:1199px) {
    .container {
        max-width: 100%;
        padding: 0 30px;
    }
}

@media(max-width:1024px) {
    .acc-l {
        width: 230px;
    }
    .acc-r {
        width: calc(100% - 230px);
        padding-left: 30px;
    }
    .my-acc-sidebar,
    .acc-r .acc-content {
        padding: 25px;
    }
    .my-playlist-wrapper .row>div {
        margin-bottom: 20px;
    }
}

@media(max-width:991px) {
    section.main {
        padding: 40px 0;
        min-height: 100vh;
        align-items: center;
        display: flex;
    }
    .login-wrapper {
        max-width: 100%;
        width: 100%;
        padding: 0 30px;
        height: auto;
        min-height: 100%;
    }
    .login-wrapper>div {
        flex: 0 0 100% !important;
        justify-content: center;
        text-align: left;
        width: 100% !important;
        max-width: 100% !important;
    }
    .login-wrapper .logo {
        margin: 0 0 30px 0;
    }
    .logo img {
        width: 320px;
        max-width: 100%;
    }
    .acc-r {
        padding-left: 20px;
    }
    form.header-search-wrapper {
        width: 50%;
    }
    header nav.navbar ul li a.nav-link {
        font-size: 18px;
    }
    .pages-wrapper .row>div:nth-child(n + 4) {
        margin-top: 0;
    }
    .pages-wrapper .row>div:nth-child(n + 3) {
        margin-top: 24px;
    }
}

@media(max-width:767px) {
    a.navbar-brand img {
        height: 60px;
    }
    a.custom-logo-link img {
        height: 40px;
    }
    section.main {
        padding: 40px 0;
    }
    .login-wrapper .logo {
        margin: 0 0 15px 0;
    }
    .login-wrapper .logo img {
        width: 175px;
        margin-bottom: 0;
    }
    .login-wrapper {
        padding: 0;
    }
    .login-wrapper .form-wrapper {
        padding: 20px 15px;
    }
    .form-wrapper h2 {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 20px;
    }
    .login-wrapper .form-wrapper .form-group {
        margin-bottom: 20px;
    }
    .btn-solid {
        padding: 15px;
        font-size: 14px;
    }
    .login-wrapper .form-wrapper .form-group input,
    .btn-solid {
        line-height: 18px;
    }
    p.reg-text {
        font-size: 16px;
    }
    .a-forgotpassword {
        line-height: 18px;
        font-size: 14px;
    }
    .login-wrapper .form-wrapper .form-group label.form-label,
    .login-wrapper .form-wrapper .form-group input {
        font-size: 15px;
    }
    .container {
        padding: 0 15px;
    }
    .btn-solid+.btn-solid,
    p.reg-text {
        margin-top: 20px;
    }
    .form-wrapper .form-group label.form-check-label {
        font-size: 14px;
    }
    .page-icon-img img {
        max-width: 90px;
    }
    /* Sidebar like App */
    .acc-l {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 1;
    }
    .acc-l .my-acc-sidebar {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .acc-l .my-acc-sidebar .acc-sidebar-item {
        padding: 0;
        border: 0;
    }
    
    .acc-sidebar-wrapper ul li.acc-sidebar-item-div {
        padding: 0;
        border: 0;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        display: flex;
        text-align: center;
        width: max-content;
    }
    .acc-sidebar-wrapper ul {
        padding: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-wrap: nowrap;
        max-width: 100%;
    }
    .acc-sidebar-wrapper ul li.acc-sidebar-item-div span.menu-image-title-after.menu-image-title {
        margin: 10px 15px 0;
        font: normal normal 500 12px/16px 'Roboto';
        display: inline-block;
    }
    .acc-sidebar-wrapper ul li.acc-sidebar-item-div img.menu-image {
        margin: 0 auto;
    }
    .acc-r {
        width: 100%;
        padding: 0;
        margin: 0 0 50px 0;
    }
    .acc-r .acc-content {
        padding: 15px;
    }
    .account-wrapper {
        margin-top: 65px;
    }
    .playlist-item .pl-img {
        height: 140px;
    }
    .playlist-item .pl-details .pl-title {
        font-size: 14px;
        margin: 10px 0;
    }
    .my-playlist-wrapper .playlist-item .pl-details .pl-title {
        font-size: 14px;
        margin: 0 0 10px 0;
    }
    ul.action-ul {
        margin: 10px 0 0 0;
    }
    /* playlist */
    .my-playlist-wrapper .playlist-item {
        display: flex;
        padding: 10px;
        align-items: center;
    }
    .my-playlist-wrapper .playlist-item .pl-img.pl-icon-img {
        height: 50px;
        width: 50px;
        margin-right: 10px;
    }
    .my-playlist-wrapper .playlist-item .pl-img.pl-icon-img img {
        padding: 10px;
    }
    .my-playlist-wrapper a.delete-playlist {
        position: unset;
        margin-left: auto;
    }
    .my-playlist-wrapper .row>div:last-child {
        margin-bottom: 0;
    }
    /* Search */
    button.navbar-toggler {
        outline: 0 !important;
        box-shadow: unset !important;
        border: 0;
    }
    .navbar-toggler svg.bi.bi-search {
        color: var(--yellow);
        width: 22px;
        height: 22px;
    }
    form.header-search-wrapper {
        width: 100%;
    }
    .header-search-wrapper input {
        width: 100%;
        padding: 10px 10px 10px 25px;
        line-height: 18px;
    }
    .header-search-wrapper button.btn {
        padding: 0 10px;
        display: none;
    }
    .header-search-wrapper svg {
        width: 18px;
        height: 18px;
    }
    .fav-playlist .playlist-item .pl-img.pl-icon-img,
    .fav-playlist .playlist-item .pl-img {
        height: 50px;
        width: 50px;
        margin-right: 10px;
    }
    .my-playlist-wrapper.fav-playlist .playlist-item .pl-img.pl-icon-img img {
        padding: 0;
    }
    .fav-playlist ul.action-ul {
        margin: 0;
    }
    .fav-playlist .pl-action {
        margin-left: auto;
    }
    .fav-playlist ul.action-ul li+li {
        margin-left: 10px;
    }
    /* setting page */
    .pages-wrapper .row>div:nth-child(n + 3) {
        margin-top: 0;
    }
    .pages-wrapper .row>div+div {
        margin-top: 12px !important;
    }
    .page-widget a {
        display: flex;
        width: 100%;
        align-items: center;
    }
    .page-widget a .pw-icon {
        width: 50px;
        height: 50px;
    }
    .pw-title {
        margin: 0 0 0px 10px;
        font-size: 16px;
    }
    .page-widget {
        padding: 12px;
        position: relative;
    }
    .page-widget:before {
        position: absolute;
        right: 12px;
        top: 50%;
        content: "\f105";
        color: rgb(255 255 255 / 65%);
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        transform: translateY(-50%);
    }
    .cp-title h4 {
        font: normal 600 20px/22px 'Roboto';
        margin: 0 0px 20px 0;
    }
    a.back-arrow {
        display: inline-block;
    }
    a.back-arrow img {
        width: 23px;
        margin-right: 10px;
    }
    .acc-content .login-wrapper .form-wrapper a.back-arrow {
        position: absolute;
        top: 20px;
        left: 15px;
    }
    .cp-title {
        display: flex;
        align-items: flex-start;
    }
    .cp-content p {
        font: normal normal 400 15px/20px 'Roboto';
    }
    .playlist-head h4.pl-title {
        font: normal 600 20px/22px 'Roboto';
    }
    div#mainwrap{
        bottom: 60px;
        padding: 10px;
    }
    .player-wrapper{
        padding: 20px 10px 15px 10px;
    }
    .player-wrapper #npTitle {
        font-size: 14px;
    }
   
}

@media all and (max-width:575px) {
    .acc-r .acc-content {
        padding: 10px;
    }
    .form-wrapper .form-group input.form-check-input {
        padding: 8px;
    }
    .form-wrapper .form-group label.form-check-label {
        font-size: 12px;
    }
    .btn-solid {
        padding: 13px 15px;
    }
    .form-wrapper .form-group input {
        padding: 13px 15px 13px 50px;
    }
    .player-wrapper .plyr .plyr__controls{
        padding-left: 0;
        padding-right: 0;
    }
    .player-wrapper .plyr__controls button,.player-wrapper #tracks a {
        width: 26px;
        padding: 4px;
    }
    .acc-sidebar-wrapper ul li.acc-sidebar-item-div a {
        display: flex;
        flex-direction: column;
    }
}
@media all and (max-width:575px) {
    .player-wrapper #tracks {
        display: none;
    }
    
    .player-wrapper .plyr__controls button {
        display: none;
    }
    
    .player-wrapper .plyr__controls button[aria-label="Play"] {
        display: block;
    }
    .player-wrapper .plyr__controls button.plyr__control--pressed {
        display: block;
    }
    .player-wrapper .plyr__controls .plyr__controls__item.plyr__time,.player-wrapper .plyr__controls .plyr__controls__item.plyr__volume {
        display: none;
    }
    
    .player-wrapper #audiowrap .plyr {width: 30px;max-width: 30px;}
    
    .player-wrapper .plyr .plyr__controls {
        max-width: 30px;
    }
    
    .player-wrapper #nowPlay {
        width: 100%;
    }
    
    .player-wrapper #audiowrap {
        flex: 0 0 10% !important;
        min-width: 30px;
    }
}
@media all and (max-width:360px) {}
@media all and (max-width:350px) {
   
    .player-wrapper #audiowrap {
        /* flex-wrap: wrap;
        justify-content: center; */
    }
    
    .player-wrapper .plyr__volume input {
        display: none !important;
    }
    
    .player-wrapper .plyr__volume {
        width: auto;
        min-width: auto;
    }
}
@media all and (max-width:320px){
    div#mainwrap {
        bottom: 55px;
    }
    .player-wrapper #nowPlay .p-img {
        width: 40px;
        height: 40px;
    }
    .player-wrapper #npTitle {
        font-size: 12px;
        line-height: 14px;
    }
    .playlist-wrapper .row>div {
        width: 100%;
    }
    .acc-sidebar-wrapper ul li.acc-sidebar-item-div span.menu-image-title-after.menu-image-title {
        margin: 5px 5px 0;
        font: normal normal 500 12px/15px 'Roboto';
    }
    .player-wrapper .plyr .plyr__controls {
        padding: 0;
    }
}