#app.twopanel{
    --chromeHeight1         : 55px;
    --chromeHeight2         : 90px;
    --chromeHeight          : var(--chromeHeight1);
    --padding-bottom        : calc(var(--chromeHeight2) + var(--bottom));


    .app-navigation {
        height: 100%;
    }

    #app-sidebar {
        padding-bottom: var(--bottom);
    }

    #app-content{
        .content-inner {

            padding-bottom: calc(var(--padding-bottom) + 32px);


            .top-fab {
                bottom: calc(var(--padding-bottom) + 64px);
            }

            &.artist-page {
                .artist-body {
                    padding-bottom: calc(var(--padding-bottom) - 32px);
                }
            }

            &.search-page {
                padding-bottom: calc(var(--padding-bottom) + 32px);
            }

            &.settings-page {
                padding-bottom: calc(var(--padding-bottom));
            }

            &.library-page {
                padding-bottom: calc(var(--padding-bottom)) !important;
            }

            &.library-artists-page {
                padding-bottom: calc(var(--padding-bottom)) !important;
            }

            &.collection-page {
                padding-bottom: calc(var(--padding-bottom) - var(--bottom)) !important;
            }

            &.about-page {
                button.sponsorBtn{
                    color:var(--textColorLight) !important;
                }
            }

            &.playlist-page {
                padding-bottom: 0px !important;

                .playlist-body.scrollbody{
                    .tabs{
                        .tab-content{ 
                            .tab-pane{
                                padding-bottom: calc(var(--padding-bottom)) !important;
                            }
                        }
                    }
                }
            }
        }
    }

    .app-chrome{

        .app-chrome--left{
            width: min-content;

            .playback-button.collapseLibrary  {
                margin-left: 10px;
            }
        }


        
        &:not(.chrome-bottom){
            
            .app-chrome--center {
                .app-chrome-item {
                    width       : 100% !important;
    
                    .top-nav-group {                    
                        width   : 60%;
                    }
                }
            }

            .app-chrome--left > div:nth-of-type(3) {
                margin-left     : calc(var(--sidebarWidth)/2.3);
                transition      : margin-left 0.35s var(--appleEase);
            }

            .search-input {
                width           : 45px;
                transition      : width 0.35s var(--appleEase);

                &:hover {
                    width       : 140px;
                }

                &:active,
                &:focus,
                &:not(:placeholder-shown) {
                    width       : 250px;
                }
            }

            &::before {
                transition: width 0.35s var(--appleEase);
            }
        }

        &.chrome-bottom { 
            border-radius       : var(--borderadius);
            border-radius       : var(--borderadius);
            left                : var(--bottom);
            right               : var(--bottom);
            width               : auto;
            position            : fixed;
            bottom              : var(--bottom);
            background-color    : transparent;
            backdrop-filter     : var(--glassFilter2);
            z-index             : 20 !important;

            &::before {
                display         : none !important;
            }

            .app-chrome--left{
                padding-right   : 16px;

                .actions {
                    display     : none;
                }
               
            }

            .app-chrome--center {
                flex-direction  : row-reverse;
                align-items     : center;
                margin-left     : 16px;
                margin-right    : 16px;
                width           : -webkit-fill-available;

                .playback-button.previous {
                    background-image    : url('icons/prev-bottom.svg');
                    background-size     : 75% !important;
                }

                .playback-button.play {
                    background-image    : url('icons/play-bottom.svg');
                    opacity             : 0.85;
                    border-radius       : 6px !important;
                    height              : 50px !important;
                }

                .playback-button.pause {
                    background-image    : url('icons/pause-bottom.svg');
                    opacity             : 0.85;
                    border-radius       : 6px !important;
                    height              : 50px !important;
                }

                .playback-button.stop {
                    background-image    : url('icons/stop-bottom.svg');
                    opacity             : 0.85;
                    border-radius       : 6px !important;
                    height              : 50px !important;
                }
                
                .playback-button.next {
                    background-image    : url('icons/next-bottom.svg');
                    background-size     : 85%;
                    background-size     : 75% !important;
                }

            }

            .app-chrome--right {
                width           : auto;
                margin-left     : 32px;

                .app-chrome-item.volume {
                    margin-right    : 2rem;
                }
            }
        }
    }

    &[library-visible="0"] {
        #app-main {
            .app-chrome.chrome-bottom {
                margin-left: 0;
            }
        }

        .app-chrome:not(.chrome-bottom) {
            .app-chrome--left > div:nth-of-type(3) {
                margin-left: 0 !important;
            }
            &::before {
                width: 100%;
            }
        }
    }
}