/*layout app.html
*/

#mainView {
    height: calc(100dvh - var(--headerHeight));
    background-color: var(--background-workarea);
    overflow:auto;
}

.force-layout-fill #mainView {
    height: 100%;

}



/* strutture Flex ------------------------------------------------------------------

*/
.re-container {
    display: flex; /* displays flex-items (children) inline */
    flex-direction: column; /* stacks them vertically */
    height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

.re-container-row-right {
    display: flex; /* displays flex-items (children) inline */
    flex-direction: row-reverse; /* stacks them vertically */
    height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
    gap: 10px;
}

.re-container-row-center {
    display: flex; /* displays flex-items (children) inline */
    flex-direction: row; /* stacks them vertically */
    height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
    gap: 10px;
}


re-header {
}
re-main {
    flex: 1; /* takes the remaining height of the "container" div */
    overflow: auto; /* to scroll just the "main" div */
    flex-direction: row;
    display: flex;
}
re-footer {
}

.re-col-left {
    height: 100%; /* takes the visible area of the "main" div */
    overflow: auto; /* recommended */
}

.re-col-right {
    height: 100%; /* takes the visible area of the "main" div */

    overflow: auto; /* recommended */
    margin-left: 10px;
}


/* area di lavoro con bordo e sfondo */

.re-workarea-container {
    padding: 10px;
    background-color: var(--background-workarea);
}
.re-workarea-container-top {
    padding: 10px 20px 5px 20px;
    background-color: var(--background-workarea);
}

.re-workarea-container-middle {
    padding: 5px 20px 5px 20px;
    background-color: var(--background-workarea);
}


.re-workarea-container-bottom {
    padding: 5px 20px 10px 20px;
    background-color: var(--background-workarea);
}

/* box interno ad area di lavoro con sfondo e rounded corner*/
.re-work-box {
    background-color: var(--background);
    border-radius: 10px;
    padding: 5px;
}

.re-work-box h1 {
        text-align: center;
        font-size: 30px;
        margin: 5px;
    }

.re-work-boxh2 {
    text-align: center;
    font-size: 25px;
    margin: 5px;
}


.re-work-box-with-grid {

}

.re-work-box-margin-left {
    margin-left: 10px;
}

/* struttura pagina */

.re-pageheader {
    display: flex;
    flex-direction: row; /* stacks  */
    align-items: center;
    gap: 10px;
}

/* barra di navigazione submenu*/
.re-navbar {
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: var(--background);
}
    .re-navbar .re-item {
        display: flex;
        align-items: center;
        color: var(--navbar-item-color);
        padding-right: 7px;
        padding-left: 7px;
        font-weight: 700;
        border-right: 1px solid var(--nvabar-item-color-disabled);
    }

    .re-navbar .re-item.re-last {
        border-right: none;
    }

.re-navbar .re-item .re-planning {
    display: flex;
    flex-direction:column;
    padding-right: 35px;
}

.re-navbar .re-item .re-planning .re-riga {
    color: var(--textcolor);
    font-weight: normal;
    font-size: 13px;
    padding: 0;
    margin: 0;
    line-height: 14px;
}

.re-cliccabile {
    cursor: pointer
}

/*struttura per template "popup" ricerca/cliente*/
.customer-search {
    display: flex;
}
.customer-search .customer-search-left {
    width: 150px;
}
.customer-search .customer-search-right {
    flex-grow: 1;
}

.customer-search .customer-search-right .customer-search-small-text {
    font-size: 10px;
}

/*struttura per barra di ricerca in planning clienti finali*/
.re-clientifinali-cerca {
    display: flex;
}

.re-clientifinali-cerca .re-text-field {
    width: 200px;
}

.re-clientifinali-cerca .re-button-right {
    flex-grow: 1;
}