@font-face {
    font-family: 'FontAwesome';
    src: url('libs/fontawesome-webfont.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Material Design Icons';
    src: url('libs/materialdesign/fonts/materialdesignicons-webfont.woff2') format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("libs/fa-brands-400.woff") format("woff");
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    src: url("libs/fa-solid-900.woff") format("woff");
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    src: url("libs/fa-regular-400.woff") format("woff");
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("libs/fontawesome/webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    src: url("libs/fontawesome/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    src: url("libs/fontawesome/webfonts/fa-regular-400.woff2") format("woff2");
}

@page {
    margin: 0.5cm;
}

body * {
    visibility: hidden;
}

/* The other canvases and the scroll box are as large as the drawing on the
   screen: laid out, they would add empty pages after the printed one. */
#scrollBox,
.canvas {
    display: none;
}

/* main.js keeps body.architecture-mode in sync with the active diagram mode
   (syncUiWithActiveMode); print exactly the active mode's canvas, at the top
   left of the page and squeezed to its width. The work area's place on the
   screen is the canvases' inline left (and top in presentation mode), and the
   build links this sheet before index.css, so the print place is important. */
#sequenceCanvas,
body.architecture-mode #architectureCanvas {
    display: block;
    visibility: visible;
    max-width: 100%;
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    margin: 0;
    padding: 0;
}

body.architecture-mode #sequenceCanvas {
    display: none;
}