// Layout
.layout,
.layout-row,
.layout-column {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    min-height: 100vh;
}

.layout-row {
    -ms-flex-direction: row;
    flex-direction: row;

    >.flex {
        min-width: 0;
    }
}

.layout-column {
    -ms-flex-direction: column;
    flex-direction: column;

    >.flex {
        min-height: 0;
    }
}


.layout-header {
    z-index: 1035 !important;
    transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);

    .navbar {
        height: $navbar-height;
    }

    &.sticky~* .layout-sidenav.sticky,
    ~* .fixed-content {
        top: $navbar-height;
        height: calc(100vh - #{$navbar-height});
    }

    &.scroll-down {}

    &:not(.sticky).scroll-up {
        position: fixed;
        left: 0;
        right: 0;
    }
}

.layout-sidenav {
    position: relative;
    z-index: 1030 !important;
    min-width: $navbar-width;
    max-width: 100%;
    opacity: 1 !important;

    &.sticky {
        height: 100vh;
    }
}


.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;

    &.sticky-bottom {
        top: auto;
        bottom: -1px;
    }
}

@include media-breakpoint-down(md) {
    body.layout-row {
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .layout-sidenav {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        position: fixed;
        z-index: 1050 !important;
        display: none;
        opactiy: 0;

        .bg-dark &,
        & {
            background: transparent !important;
        }

        >* {
            position: fixed;
            height: 100%;
            transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform: translate3d(-100%, 0, 0);
            width: 100%;
            max-width: 18rem;
        }

        &.show {
            >div {
                transform: translate3d(0, 0, 0);
            }
        }
    }
}

@media print {

    .layout-sidenav,
    .layout-header {
        display: none !important;
    }
}

.page-body {
    img {

    width: 100% !important;
    height: auto !important;
    }
}