:root {
    --a4-x: 210mm;
    /* print rendering result is overflowed the page in firefox. so subtract 2px */
    --a4-y: calc(297mm - 2px);
    /* chromium's default value */
    --print-default-margin: 0.4in;
}

@page {
    size: A4;
    /* margin is overwrited by custom settings, and can't remove custom settings */
    margin: 0.4in;
}
.br-a4-portrait .br-page {
    width: calc(var(--a4-x) - (var(--print-default-margin) * 2));
    height: calc(var(--a4-y) - (var(--print-default-margin) * 2));
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: "Noto Sans JP";
}

/* print preview like */
@media screen {
    html {
        background: #eee;
    }
    .br-page {
        margin: var(--print-default-margin);
        padding: var(--print-default-margin);
        background: white;
        box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
    }
}

@media print {
    html
    ,body {
        width: calc(var(--a4-x) - (var(--print-default-margin) * 2));
    }
}

.br-page:not(:last-child) {
    break-after: page;
}

.br-page-inner {
    width: 100%;
    height: 100%;
}

.br-page-margin-bottom {
    position: relative;
    bottom: 0;
}

.br-content-outline {
    border: 1px solid black;
}
.br-content-outline-inner {
    /* emulate border-collapse */
    margin: -1px;
}

.br-disappear {
    display: none;
}

/* Definition No-Styled Classes */

/* print to every page's top */
.br-page-header {}
/* print to every page's bottom */
.br-page-footer {}
/* will insert page number into this */
.br-page-number {}
/* will insert total page number into this */
.br-total-number {}
/* elements in group are printed while the group is printing */
.br-group {}
/* disable .br-group */
.br-group-no-repeat {}
/* contents overflowed marking */
.br-splited {}

/* Convenience Classes */

.br-grid {
    display: flex;
}
.br-grid-header
,.br-grid-data {
    display: inline-block;
    word-break: break-all;
}

.br-bordered.br-grid:first-child .br-grid-header:not(:first-child)
,.br-bordered.br-grid:first-child .br-grid-data:not(:first-child) {
    border: 1px solid black;
    border-left: none;
}
.br-bordered.br-grid:first-child .br-grid-header:first-child
,.br-bordered.br-grid:first-child .br-grid-data:first-child {
    border: 1px solid black;
}
.br-bordered.br-grid:not(:first-child) .br-grid-header:not(:first-child)
,.br-bordered.br-grid:not(:first-child) .br-grid-data:not(:first-child) {
    border: 1px solid black;
    border-top: none;
    border-left: none;
}
.br-bordered.br-grid:not(:first-child) .br-grid-header:first-child
,.br-bordered.br-grid:not(:first-child) .br-grid-data:first-child {
    border: 1px solid black;
    border-top: none;
}

.br-indicator-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 99999;
}
.br-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform : translate(-50%,-50%);
    width: 400px;
    height: 400px;
}