html,
body,
#app,
main,
.page
{
    height:100%;
}

#body {
    height: -moz-calc(100% - (var(--navigation-height)));
    height: -webkit-calc(100% - (var(--navigation-height)));
    height: calc(100% - (var(--navigation-height)));
    overflow-y: scroll;
}
#navigation {
    height: var(--navigation-height);
}

.header {
    height: var(--header-height);
    line-height:40px;
    font-weight:bold;
}

.header .icon-button{
    position:absolute;
    top:5px;
    right:15px;
}

.content {
    height: calc(100% - var(--header-height));
    overflow-y: scroll;
}


.header-with-search {
    height: var(--header-with-search-height);
}

.searchable-content {
    height: calc(100% - var(--header-with-search-height));
    overflow-y:scroll;
}

.hover-select-container .hover-select-list {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    z-index:10;
}

.hover-select-container.active .hover-select-list {
    display: initial;
}

ul{
    padding:0;
    margin:0;
    list-style:none;
}

.questionnaire-wrapper {
    transition: all 0.5s;
    position:relative;
}
    .questionnaire-wrapper.show-delete-button .list-item {
        width: calc(100% - var(--delete-button-wrapper));
        display: inline-block;
    }

    .questionnaire-wrapper .delete-container {
        width:var(--delete-button-wrapper);
        display: none;
        transition: all 0.5s;
        transition-delay: 1000ms;
    }

    .questionnaire-wrapper.show-delete-button .delete-container {
        display: block;
        position:absolute;
        right:0px;
        top:3px;
    }

:root {
    --header-height: 40px;
    --header-with-search-height: 80px;
    --navigation-height: 75px;
    --delete-button-wrapper: 50px;
}

.h-0{
    height:0;
}