//
// Side panel
// --------------------------------------------------

#layout-side-panel {
    .fix-button {
        position: absolute;
        right: 2px;
        top: 1px;
        display: block;
        width: 20px;
        height: 20px;
        font-size: 13px;

        i {
            display: block;
            text-align: center;
            margin-top: 5px;
            color: @color-scrollpanel-fix-button;
        }

        &:hover {
            text-decoration: none;
            .opacity(1)!important;
        }
    }

    .fix-button-content-header .fix-button {
        top: 9px;
        right: 7px;

        i {
            color: @color-scrollpanel-fix-button-light;
        }
    }

    .sidepanel-content-header {
        background: #95a5a6;
        color: white;
        font-size: 14px;
        padding: 10px 15px;
        position: relative;

        &:after {
            .triangle(down, 15px, 8px, #95a5a6);
            position: absolute;
            left: 14px;
            bottom: -8px;
        }
    }
}

body.side-panel-not-fixed {
    #layout-side-panel {
        display: none;

        .fix-button {
            .opacity(0.5);
        }
    }
}

body.display-side-panel {
    #layout-side-panel {
        display: block;
        position: absolute;
        z-index: 500;
        width: 300px;
        .box-shadow(2px 0px 2px 0 rgba(0, 0, 0, 0.3));
    }
}

@media (min-width: @screen-md-min) {
    body.side-panel-fix-shadow {
        #layout-side-panel {
            .box-shadow(none);
        }
    }
}

.touch #layout-side-panel .fix-button {
    display: none;
}

@media (max-width: @screen-sm) {
    #layout-side-panel .fix-button {
        display: none;
    }
}