:root {
    --base-font: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    --button-font: Helvetica,Arial,"Lucida Grande",sans-serif;
    --header-font: "ft40roman";
    --header2-font: Helvetica,Arial,"Lucida Grande",sans-serif;
    --heading-font: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    --color_warning: orange;
    --color_error: red;
    --color_critical: #ffcccc;
    --color_saved: #CCFFCC;
    --color_dark_background: #323639;
    --color_hover: lightblue;
    --color_success: green;
    --color_changed: lightblue;
    --color_process: inherit;
    --color_ordering: #CCCCFF;
    --color_review: #FFFF99;
    --color_partial: #FFBDDA repeating-linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%);
    --color_confirmed: #c9f;
    --color_received: #EAADEA;
    --color_ready: lightblue;
    --color_prepare: #d1ffd2;
    --color_shipped: lightgreen;
    --color_cancel: #ff4444;
    --color_won: #d1ffd2;
    --color_outbid: #ffcccc;
}

@font-face{
    font-family: "ft40roman";
    src: url('/font/ft40-roman-webfont.woff2') format('woff2'), url('/font/ft40-roman-webfont.woff') format('woff');
    font-display: swap;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes save-flash {
    from { background: var(--color_saved); }
    to { }
}
@keyframes save-flash {
    0% { background: var(--color_saved); }
    100% { }
}

html {
    font-size: 100.01%
}
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 1.0em;
    font-family: inherit;
    background: transparent;
}
:link,:visited {
    text-decoration: none;
}
:focus {
    outline: 0;
}
img {
    margin:0;padding:0;border:0
}
body {
    color: black;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: var(--base-font);
    background: white url("/image/background.png") no-repeat 101% 1px;
}

h1 { font-size: 1.3em; }
h2 { font-size: 1.235em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1.05em; }
h1,h2,h3,h4,h5,h6 {
    font-weight:bold;
    line-height: 1em;
}



a {
    color: inherit;
    border-bottom: 1px dotted #aaa;

    &.anchor {
        display: block;
        position: relative;
        top: -42px;
        visibility: hidden;
    }

    &[target=_blank] {
        margin-right: 12px;
        position: relative;
        &:after {
            content: "\f08e";
            font-family: FontAwesome;
            display: inline-block;
            position: absolute;
            right: -12px;
            font-size: 8px;
        }
    }
}


.page-error {
    background: #161819 url("/image/denied.jpg");
    background-size: cover;

    header {
        font-size: 0.85em;
        background: var(--color_dark_background);
        z-index: 2;
        @media screen and (max-width: 1200px) {
            width: 50px;
        }
        a {
            border-bottom: 0;
        }

        background: none;
        width: 100%;
        height: auto;
        float: none;
        position: relative;

        #header-logo {
            img {
                height: 50px;
                margin: 30px auto 40px;
                display: block;
            }
        }
    }

    main {

        width: 100%;
        height: 100%;
        position: relative;
        transition: left 0.6s;
        transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
        left: 0;

        z-index: 3;
        padding: 0;
        .body {
            max-width:1000px;
            padding: 70px 10px 0;
        }

        .view {
            max-width: 1000px;
            padding:20px 30px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%,  rgba(0, 0, 0, 0.3) 100%);
            margin: 20px auto 0;
            &.view-error-exception {
                padding: 0;
                background: none;
            }
            .title h2 {

                text-align: left;
                background: #222;
                color: white;
                font-family: var(--header-font);

                position: relative;
                clear: both;
                line-height: 1.3em;

                margin: 0;
                padding: 0 0 5px 0;
                font-size: 1.3em;
                font-weight: 100;
                text-transform: uppercase;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                background: none;
            }

            .body {
                padding: 0;
                color: #dcdcdc;
                font-size: 1.0em;
            }
        }
    }
}