/********************************/
/* Framework */
/********************************/
#framework {
    display: flex;
    flex-direction: column;
    height:100%;
    width: 100vw;
}

    /********************************/
    /* Header */
    /********************************/
    #framework #header {
        /*display: flex;*/
        /*height: 95px;*/
        box-shadow: 0px 7.09px 41.17px 0px rgba(0, 0, 0, 0.04), 0px 10px 20px 0px rgba(0, 0, 0, 0.01);
        z-index:1;
        /*align-items: center;*/
        background-color: white;
        font-size: 12px;
    }

        #framework #header img.logo {
            width: 136px;
            /*height: 45px;*/
            margin-left: 30px;
        }

        #framework #header div.name-nav-text,
        #framework #header div.header-datetime,
        #framework #header div.loggedInUser {
/*            display: flex;
            flex-direction: column;*/
        }

        #framework #header div.name-nav-text {
            /*width: auto;
            flex: 1;*/
            padding-right: 17px;
            height:95px;
        }

        #framework #header div.header-datetime {
/*            flex-direction: row;
            flex-wrap: nowrap;
            margin-left: auto;*/
        }

            #framework #header div.header-datetime > div,
            #framework #header div.loggedInUser {
                margin-left: 5px;
            }

        #framework #header div.loggedInUser {
            font-size: 15px;
            margin-left: auto;
/*            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;*/
        }

    /********************************/
    /* Body */
    /********************************/
    #framework #body {
        display: flex;
        /*flex-direction: row;*/
        height: calc(100% - 95px);
    }

        #framework #body #leftMenu {
            width: 76px;
            background: var(--primary);
        }

            #framework #body #leftMenu .navbar-button{
            display:flex;
            flex-direction:column;
            }
                #framework #body #leftMenu .navbar-button .nav-icon {
                    width: 76px;
                    height: 76px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                    #framework #body #leftMenu .navbar-button .nav-icon:hover,
                    #framework #body #leftMenu .navbar-button .nav-icon.active:hover {
                        cursor: pointer;
                        background: var(--primary-dark);
                    }

                    #framework #body #leftMenu .navbar-button .nav-icon.active {
                        background: var(--primary-med);
                    }

                    #framework #body #leftMenu .navbar-button .nav-icon img {
                        max-width:23px;
                    }

        #framework #body #mainContent {
            /*height: calc(100% - 95px);*/
            height:100%;
            overflow: auto;
            /*padding: 20px;*/
            /*padding-left: 20px;
            max-width: calc(100% - 96px);*/
            width: 100vw;
            box-sizing: border-box;
            /*display: flex;
            flex-direction: column;
            justify-content: space-between;*/
            background: #F8F8F8;
        }
            #framework #body #mainContent > * {
                padding-left: 20px;
                padding-right: 20px;
            }
            #framework #body #mainContent > *:first-child {
                padding-top: 20px;
            }

            #framework #body #mainContent > form {
                /*height:100%;*/
                height: calc(100% - 95px);
                /*height: 100%;*/
            }

/********************************/
/* TO SORT */
/********************************/
.loggedInUser .settings-icon {
    width: 22px;
    height: 22px;
    display: flex;
    background: #000000;
    align-items: center;
    justify-content: center;
    margin: 10px 0px 10px 10px;
}

    .loggedInUser .settings-icon:hover {
        cursor: pointer;
    }

.settings-icon img {
    margin-top:3px;
    width: 16px;
    height: 16px;
}

.remodal-wrapper {
    background: rgba(142, 142, 142, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    overflow:scroll;
}
    .remodal-wrapper > div {
        /*position: absolute;
        top: 0;
        left: 0;*/

    }