@import "~frontend-react-components/build/react-components.css";
@import "styles/common.scss";
@import "components/**/*.scss";
@import url("https://fonts.googleapis.com/css?family=Rubik");

.LoadingIndicator {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.PayeePortal-wrapper {
    height: 100%;
}

.PayeePortal {

    &-header {
        background-color: $gorilla;
        min-width: 1230px;
    }

    &-content {
        background-color: $white;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        width: 1230px;
    }

    &-content-loading .LoadingIndicator {
        background-color: $white;
        z-index: 1;
    }
}

.Footer-links {
    margin: 10px auto;
    max-width: fit-content;

    .Footer-link {
        color: $rhino;
        text-decoration: none;

        &:hover,
        &:focus,
        &:visited {
            text-decoration: underline;
        }

        &:not(:last-child)::after {
            content: " | ";
            color: $rhino;
            margin: 0 5px;
            text-decoration: none;
            display: inline-block;
        }
    }
}

/* stylelint-disable selector-class-pattern, selector-max-type */
// Rewrite pagination default z-index for active pager used only for joined pagers
.pagination > .active > a,
.pagination > .active > span {
    z-index: auto;
}

ul.pagination li.disabled a.page {
    background: $mouse;

    .Icons-left-pagination-arrow,
    .Icons-right-pagination-arrow {
        fill: $timberwolf;
    }
}
/* stylelint-enable selector-class-pattern, selector-max-type */

.alert { // stylelint-disable-line selector-class-pattern
    border-radius: 5px;
    border-width: 0;
    padding: 15px;
}

.alert-info { // stylelint-disable-line selector-class-pattern
    background-color: $bluejay_light;
    border-color: $bluejay;
    color: $bluejay;
}

.alertWrapper { // stylelint-disable-line selector-class-pattern
    border: 10px solid $white;
    margin-bottom: 20px;
}