.tooltip-window {
    position: fixed;
    right: 0;
    background: #FFFFFF;
    padding: 15px 30px;
    font-family: 'Nunito', sans-serif;
    width: 40%;
    height: 100%;
    overflow: scroll;
}

.tooltip-window.lite {
    width: 30%;
}

.tip {
    display: none;
}

.tip.active {
    display: block;
}

/* TODO: Remove !important. It's bad practice and it can cause errors in future */
.section-button {
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    background: #b4b4b4c5;
    cursor: pointer;
    border-bottom: darkgray 2px solid !important;
}

.section-button:hover {
    backdrop-filter: brightness(110%); 
}

.section-button .active {
    background: #00000030;
}

.List .collapsibleContent {
    border-left: #bdc5c9 2px solid;
    overflow: hidden;
    background: #ffffff50;
}

/* TODO: .section class is to generic. It should be renamed */
.section{
    padding: 10px 0px 20px 0px ;
}

/* TODO: content subclass already in use. Creating content class overrides the subclass.
Make .content a subclass of .content */
/* .content {
    padding: 0px 15px 0px 15px ;
    text-align: justify;
    overflow: hidden;
    transition: max-height .2s ease-out;
    max-height: 0px;
    border-left: #c0c2c3 2px solid;
    
} */

.collapsibleMini::before{
    content: "►";
}

.collapsibleMini.active::before{
    content: "▼";
}

/* TODO: Add proper class */
/* button:hover{
    filter: brightness(110%);
} */