html {
    margin-top: 0 !important;
}

body.admin-bar {
    margin-top: 0;
}

.menu-icon-image {
    max-width: 20px;
    max-height: 20px;
}

.left-panel .logo {
    background: #fff;
    padding: 10px 20px;
}

.left-panel a{
    color: #fff;
}

.left-panel a:hover{
    color: var(--primary-color);
}







.left-panel {
    width: 20%;
    max-width: 150px;
    float: left;
    background-color: var(--primary-color);
    padding: 20px;
    transition: width 0.5s;
    position: relative; /* Gör denna relativa så att innehållet inuti kan positioneras i förhållande till den */
    min-height: 100vh;
}

.left-panel.collapsed {
    width: 5%;
}

.right-panel {
    width: 75%;
    float: right;
    padding: 20px;
}



/* Gör så att #wrapper och #main får full skärmhöjd */
#wrapper, #main {
    height: 100vh; /* 100% av viewportens höjd */
    /* display: flex; */ /* Gör det till en flex-container */
}

/* Gör så att båda kolumnerna får full höjd av sin förälder */
.left-panel, .right-panel {
    height: 100%; /* 100% av förälderns höjd, som är #main */
}


.fullheight {
    min-height: 100vh;
    /*display: flex;
    flex-direction: column;*/
}


.menu-secondary {
    position: absolute;  /* Gör denna absolut för att den ska positioneras i förhållande till den relativa föräldern */
    bottom: 0;           /* Positionera den längst ner */
    width: 100%;         /* Säkerställ att den sträcker sig över hela bredden av sin förälder */
}