.app-footer-container {
    // this is to make box shadow of page-header and footer appear over content with bg. I should find a better way to handle it (without z-index)
    //z-index: 1;
    display: flex; // just to have child content taking full height
    width: 100%;
    margin-top: auto;

    background: @footer-bg;
    color: @footer-color;
    border-top: 1px solid @footer-border-color;
    .box-shadow(@footer-box-shadow);

    .app-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        max-width: @footer-max-width;
        width: 100%;
        margin: 0 auto;
        flex: 1 0 auto; // take parent full height
    }

    // allow to customize links in footer
    a {
        color: @footer-link-color;

        &:hover {
            color: @footer-link-hover-color;
        }
        &:focus {
            color: @footer-link-active-color;
        }
    }

    .app-footer-brand {
        padding: @padding-base-vertical floor(@grid-gutter-width / 2);
        margin-right: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        white-space: nowrap;
        font-weight: bold;

        img {
            max-height: 18px;
            max-width: 12px;
            margin-right: 10px;
        }

        span {
            margin-right: 5px;
        }

        small {
            font-weight: normal;
        }
    }

    .app-footer-btn {
        .action-icon {
            margin: 0;
        }

        span {
            margin-left: @icon-text-spacer;
        }
    }

    .app-current-locale {
        padding: @padding-base-vertical floor(@grid-gutter-width / 2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-footer-content {
        min-width: 100%; // force display in a new line in flex container
        padding: floor(@grid-gutter-width / 2);
        border-bottom: 1px solid @footer-inner-border-color;
    }
}
