@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);

:root {
    --inpage-width: 370px;
    --inpage-border-radius: 0.25rem;
    --inpage-theme-default: #fff;
    --inpage-theme-primary: #0d6efd;
    --inpage-theme-secondary: #6c757d;
    --inpage-theme-success: #198754;
    --inpage-theme-danger: #dc3545;
    --inpage-theme-warning: #ffc107;
    --inpage-theme-info: #0dcaf0;
    --inpage-theme-light: #f8f9fa;
    --inpage-theme-dark: #212529
}

.hidden, .inpage:not(.inpage_show) {
    display: none
}

.top_right_inpage_container {
    position: fixed;
    top: 15px;
    right: 15px;
    width: var(--inpage-width)
}

.top_left_inpage_container {
    position: fixed;
    top: 15px;
    left: 15px;
    width: var(--inpage-width)
}

.bottom_center_inpage_container, .top_center_inpage_container {
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    width: var(--inpage-width)
}

.top_center_inpage_container {
    top: 15px
}

.bottom_center_inpage_container {
    bottom: 15px
}

.bottom_right_inpage_container {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: var(--inpage-width)
}

.bottom_left_inpage_container {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: var(--inpage-width)
}

.inpage {
    display: grid;
    grid-template:'image image header header header header' 'image image body body body body';
    grid-template-rows:30% 70%;
    grid-template-columns:15% 15% auto auto auto auto;
    font-size: .875rem;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: var(--inpage-border-radius);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    position: relative;
    overflow: hidden;
    transition: opacity .3s;
    z-index: 1000
}

.inpage__image__container {
    grid-area: image;
    justify-self: center;
    align-self: center;
    padding: .5rem
}

.inpage_default {
    color: #212529;
    background-color: var(--inpage-theme-default)
}

.inpage_primary {
    color: #fff;
    background-color: var(--inpage-theme-primary)
}

.inpage_secondary {
    color: #fff;
    background-color: var(--inpage-theme-secondary)
}

.inpage_success {
    color: #fff;
    background-color: var(--inpage-theme-success)
}

.inpage_danger {
    color: #fff;
    background-color: var(--inpage-theme-danger)
}

.inpage_warning {
    color: #212529;
    background-color: var(--inpage-theme-warning)
}

.inpage_info {
    color: #212529;
    background-color: var(--inpage-theme-info)
}

.inpage_light {
    color: #212529;
    background-color: var(--inpage-theme-light)
}

.inpage_dark {
    color: #fff;
    background-color: var(--inpage-theme-dark)
}

.inpage_danger .inpage__close, .inpage_dark .inpage__close, .inpage_primary .inpage__close, .inpage_secondary .inpage__close, .inpage_success .inpage__close {
    filter: invert(1)
}

.inpage:not(:last-child) {
    margin-bottom: .75rem
}

.inpage_showing {
    opacity: 0
}

.inpage__header {
    grid-area: header;
    cursor: pointer;
    font-size: .975rem;
    padding: .5rem 2.25rem .5rem 1rem
}

.inpage__icon {
    width: 10px;
    height: 10px
}

.inpage__close {
    content: "";
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: .875em;
    height: .875em;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/.875em auto no-repeat;
    border: 0;
    opacity: .5;
    cursor: pointer;
    transition: opacity .1s ease-in-out
}

.inpage__close:hover {
    opacity: 1
}

.inpage__body {
    grid-area: body;
    cursor: pointer;
    padding: 1rem
}

.inpage__image {
    display: block;
    cursor: pointer;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: 100% 0
}

.inpage_message .inpage__body {
    padding-right: 2.25rem
}

@media (max-width: 1024px) {
    :root {
        --inpage-border-radius: 0.20rem;
        --inpage-width: 250px
    }

    .inpage {
        font-size: .475rem
    }

    .inpage__header {
        font-size: .575rem;
        padding: .3rem 1.55rem .3rem .2rem
    }

    .inpage__body {
        padding: .4rem .5rem .5rem .2rem
    }

    .inpage__icon {
        width: 7px;
        height: 7px
    }

    .inpage__image__container {
        padding: .2rem
    }

    .inpage__close {
        width: .5375em;
        height: .5375em;
        top: .65rem;
        right: .65rem;
        background-size: .5375em auto
    }
}

@media (max-width: 767px) {
    :root {
        --inpage-border-radius: 0.15rem;
        --inpage-width: 150px
    }

    .inpage {
        font-size: .375rem
    }

    .inpage__header {
        font-size: .475rem;
        padding: .3rem 1.55rem .3rem .2rem
    }

    .inpage__body {
        padding: .4rem .5rem .5rem .2rem
    }

    .inpage__icon {
        width: 5px;
        height: 5px
    }

    .inpage__image__container {
        padding: .1rem
    }

    .inpage__close {
        width: .4375em;
        height: .4375em;
        top: .55rem;
        right: .55rem;
        background-size: .4375em auto
    }

    .top_left_inpage_container, .top_right_inpage_container {
        position: fixed;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: var(--inpage-width)
    }

    .bottom_left_inpage_container, .bottom_right_inpage_container {
        position: fixed;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: var(--inpage-width)
    }
}