/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 */

.App {
    min-width: 80rem; /* Remove this when responsive will be added */
}

.App,
.App-cols {
    display: flex;
    height: 100%;
    width: 100%;
}

.App-col {
    display: flex;
    flex-direction: column;
}
.App-col--main {
    flex: 1 1 auto;
    min-width: 30rem;
}
.App-col--grow {
    flex: 1 1 auto;
}
.App-col--side {
    flex: 1 1 auto;
    min-width: 18rem;
    max-width: 30rem;
}
.App-col--menu {
    flex: 1 1 auto;
    min-width: 22rem;
    max-width: 30rem;
}
.App-col--vertical {
    writing-mode: vertical-rl;
}
.App-col--rPadding {
    padding-right: 3rem;
}

.App-rows {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
}
.App-rows--padding {
    padding: 0 5%;
}

.App-row {
    display: flex;
    flex-direction: column;
}
.App-row--header {
    border-bottom: 1px solid var(--separator-color);
}
.App-row--main {
    flex: 1 1 auto;
}
.App-row--vPadding {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.App-row--topPadding {
    padding-bottom: 2rem;
}
.App-row--bottomPadding {
    padding-bottom: 2rem;
}
.App-row--scroller {
    overflow-y: auto;
}

@media (max-width: 1400px) {
    .App-rows--padding {
        padding: 3rem;
    }

    .App-col--menu {
        min-width: 19rem;
        max-width: 25rem;
    }
}