@font-face {
    font-family: Unifont;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(../static/font/unifont-latin-400-normal.woff2) format('woff2');
}

@font-face {
    font-family: Minecraft;
    src: url(../static/font/minecraft.ttf) format('truetype');
}

body {
    font-family: Minecraft, Unifont, monospace, sans-serif;
    background: rgba(0, 0, 0, 0.5) url("../icons/minecraft/dirt.png");
    background-blend-mode: darken;
    background-size: 64px;
    image-rendering: pixelated;
    color: white;
}

b, label, th {
    font-weight: normal;
    text-shadow: 1px 0 0;
}

b {
    color: #FCA800;
}

h2 {
    text-shadow: 1px 0 0, 1px 1px 0 #00000050;
}

.jumbotron {
    /*border-radius: 0 !important;*/
    /*border: 2px solid white;*/
    /*background-image: url(../icons/minecraft/stone.png);*/
    /*background-size: 50px;*/
    text-align: center;
    /*color: white;*/
    background: none;
}

.jumbotron h1 {
    font-size: 16px;
    /*text-shadow: 4px 4px 0 black;*/
}

.dialog-warning {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-left: 20px;
}

.dialog-warning:hover::before {
    content: "这是一个自定义屏幕。点击此处了解更多信息（目前没做）。";
    text-shadow: 1px 1px 0 #3E3E3E;
    display: block;
    position: absolute;
    background: #140719;
    padding: 4px;
    width: 300px;
    white-space: normal;
    text-align: left;
    z-index: 999;
    box-shadow: -2px 0 0 #280562, 2px 0 0 #280562, 0 -2px 0 #280562, 0 2px 0 #280562, -4px -2px 0 #15081A, -2px -4px 0 #15081A, 4px -2px 0 #15081A, 2px -4px 0 #15081A, 4px 2px 0 #15081A, 2px 4px 0 #15081A, -4px 2px 0 #15081A, -2px 4px 0 #15081A;
}

.dialog-warning::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -19px;
    left: -19px;
    width: 2px;
    height: 2px;
    box-shadow: 8px 26px 0 #d5bd6b, 8px 28px 0 #e9cc6b, 10px 22px 0 #d5bd6b, 10px 24px 0 #ffdb60, 10px 26px 0 #ffdb60, 10px 28px 0 #e9cc6b, 12px 18px 0 #d5bd6b, 12px 20px 0 #ffdb60, 12px 22px 0 #ffdb60, 12px 24px 0 #ffdb60, 12px 26px 0 #ffdb60, 12px 28px 0 #ffdb60, 14px 14px 0 #d5bd6b, 14px 16px 0 #ffdb60, 14px 18px 0 #ffdb60, 14px 20px 0 #ffdb60, 14px 22px 0 #ffdd69, 14px 24px 0 #ffdb60, 14px 26px 0 #ffdb60, 14px 28px 0 #ffdb60, 16px 10px 0 #d5bd6b, 16px 12px 0 #ffdb60, 16px 14px 0 #ffdb60, 16px 16px 0 #ffdb60, 16px 18px 0 #ffdb60, 16px 20px 0 #ffdb60, 16px 22px 0 #ffdb60, 16px 24px 0 #ffdb60, 16px 26px 0 #ffdb60, 16px 28px 0 #ffdb60, 18px 8px 0 #ffdb60, 18px 10px 0 #ffdb60, 18px 12px 0 #ffdb60, 18px 22px 0 #ffdb60, 18px 28px 0 #ffdb60, 20px 8px 0 #ffdb60, 20px 10px 0 #ffdd69, 20px 12px 0 #ffdb60, 20px 22px 0 #ffdb60, 20px 28px 0 #ffdb60, 22px 10px 0 #d5bd6b, 22px 12px 0 #ffdb60, 22px 14px 0 #ffdb60, 22px 16px 0 #ffdb60, 22px 18px 0 #ffdb60, 22px 20px 0 #ffdb60, 22px 22px 0 #ffdb60, 22px 24px 0 #ffdb60, 22px 26px 0 #ffdb60, 22px 28px 0 #ffdb60, 24px 14px 0 #d5bd6b, 24px 16px 0 #ffdb60, 24px 18px 0 #ffdb60, 24px 20px 0 #ffdb60, 24px 22px 0 #ffdb60, 24px 24px 0 #ffdb60, 24px 26px 0 #ffdb60, 24px 28px 0 #ffdb60, 26px 18px 0 #d5bd6b, 26px 20px 0 #ffdb60, 26px 22px 0 #ffdb60, 26px 24px 0 #ffdb60, 26px 26px 0 #ffdb60, 26px 28px 0 #ffdb60, 28px 22px 0 #d5bd6b, 28px 24px 0 #ffdb60, 28px 26px 0 #ffdb60, 28px 28px 0 #e9cc6b, 30px 26px 0 #d5bd6b, 30px 28px 0 #e9cc6b;
}

.panel {
    border-radius: 0;
    background: #00000080;
    color: #FFFFFF;
    border: none;
}

.panel-heading {
    border-radius: 0;
    background: #8B8B8B !important;
    color: white !important;
    box-shadow: 2px 2px 0 #FFFFFF80 inset, -2px -4px 0 #00000050 inset;
    border: 2px solid black !important;
    text-shadow: 1px 1px 0 #00000080;
}

.panel-body {
    border: 2px solid black !important;
    border-top: none !important;
}

.panel-heading:hover {
    border: 2px solid white !important;
}

a {
    color: #0000ff !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration-thickness: 2px;
}

.btn, select.form-control {
    border-radius: 0;
    border: 2px solid black;
    box-shadow: 2px 2px 0 #FFFFFF80 inset, -2px -4px 0 #00000050 inset;
    text-shadow: 1px 1px 0 #00000080;
    line-height: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
    transition: none;
}

.btn:hover, select.form-control:hover {
    border: 2px solid white;
}

.btn:active, select.form-control:active {
    border-radius: 0;
    border: 2px solid white !important;
    box-shadow: 2px 4px 0 #00000050 inset, -2px -2px 0 #FFFFFF80 inset;
    text-shadow: 1px 1px 0 #00000080;
    outline: none !important;
}

.btn:focus {
    border-color: white;
}

.btn:not(:active):focus, select.form-control:not(:active):focus {
    outline: none !important;
    box-shadow: 2px 2px 0 #FFFFFF80 inset, -2px -4px 0 #00000050 inset;
}

.btn-default, .btn-primary, .btn-success, .btn-info,
.btn-default:active, .btn-primary:active, .btn-success:active, .btn-info:active,
select.form-control {
    background: url(../icons/minecraft/stone.png);
    background-size: 32px;
}

.btn-default, .btn-default:hover, .btn-default:active {
    color: #FFFFFF !important;
}

.btn-info, .btn-info:hover, .btn-info:active {
    color: #54FCFC !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:active {
    color: #54FCFC !important;
}

.btn-warning, .btn-warning:hover, .btn-warning:active {
    color: #FCA800 !important;
}

.btn-success, .btn-success:hover, .btn-success:active {
    color: #54FC54 !important;
}

.btn-lg {
    line-height: 22px;
}

body, .btn, p, input, label, h1, h2, h3, h4, h5, h6, th, .form-control, small {
    font-size: 16px;
}

small {
    color: #A0A0A0;
}

input[type="text"] {
    border-radius: 0;
    border: 2px solid #A0A0A0;
    background: #000000;
    color: #FFFFFF;
    transition: none;
    text-shadow: 1px 1px 0 #373737;
}

::selection {
    background: #FFFFFF;
    color: #2222FF;
    text-shadow: 1px 1px 0 #C8C8FF;
}

.form-control {
    border-radius: 0;
    border: 2px solid #A0A0A0;
    background: #000000;
    color: #FFFFFF;
    height: 36px;
    transition: none;
}

input[type="text"]:focus {
    border: 2px solid #FFFFFF;
    box-shadow: none;
}

.form-control:focus {
    border: 2px solid #FFFFFF;
    box-shadow: none;
}

hr {
    border-width: 2px;
    border-color: #FFFFFF80;
    box-shadow: 0 2px 0 #00000050;
}

select.form-control option {
    background: #000000;
}

input[type=checkbox] {
    height: 38px;
    width: 38px;
    appearance: none;
    display: inline-block;
    background: rgba(0, 0, 0, 0.7) url(../icons/minecraft/stone.png);
    background-blend-mode: darken;
    background-size: 32px;
    border: 2px solid #000000;
    vertical-align: middle;
    margin-top: 0;
    margin-left: 10px;
}

input[type=checkbox]:focus {
    outline: none;
    border: 2px solid #FFFFFF;
}

input[type=checkbox]:checked::before {
    content: "";
    margin-bottom: 34px;
    width: 2px;
    height: 2px;
    display: inline-block;
    position: relative;
    left: -4px;
    top: -4px;
    box-shadow: 8px 20px 0 #ffffffff, 8px 22px 0 #4b4b4b24, 10px 20px 0 #dadadaff, 10px 22px 0 #ffffffff, 12px 20px 0 #4c4c4c0c, 12px 22px 0 #ffffffff, 12px 24px 0 #ffffffff, 14px 22px 0 #dadadaff, 14px 24px 0 #ffffffff, 14px 26px 0 #ffffffff, 16px 24px 0 #dadadaff, 16px 26px 0 #ffffffff, 16px 28px 0 #ffffffff, 18px 24px 0 #ffffffff, 18px 26px 0 #ffffffff, 18px 28px 0 #ffffffff, 18px 30px 0 #dadadaff, 20px 22px 0 #ffffffff, 20px 24px 0 #ffffffff, 20px 26px 0 #dadadaff, 20px 28px 0 #a5a5a5ff, 22px 20px 0 #ffffffff, 22px 22px 0 #ffffffff, 22px 24px 0 #dadadaff, 24px 18px 0 #ffffffff, 24px 20px 0 #ffffffff, 24px 22px 0 #a5a5a5ff, 26px 16px 0 #ffffffff, 26px 18px 0 #ffffffff, 26px 20px 0 #a5a5a5ff, 28px 16px 0 #ffffffff, 28px 18px 0 #dadadaff, 30px 14px 0 #ffffffff, 30px 16px 0 #ffffffff, 32px 14px 0 #ffffffff;
}

input[type=radio] {
    height: 16px;
    width: 16px;
    appearance: none;
    display: inline-block;
    background: rgba(0, 0, 0, 0.7) url(../icons/minecraft/stone.png);
    background-blend-mode: darken;
    background-size: 32px;
    border: 2px solid #000000;
    vertical-align: middle;
    margin-top: 0;
    margin-left: 10px;
}

input[type=radio]:focus {
    outline: none;
    border: 2px solid #FFFFFF;
}

input[type=radio]:checked::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    position: relative;
    left: 2px;
    top: 2px;
    background-color: #F0F0F0;
    box-shadow: 2px 2px 0 #FFFFFF80 inset, -2px -2px 0 #00000020 inset;
}

.radio-inline {
    display: inline-flex;
    align-items: center;
}

th {
    color: white;
}

h2 {
    text-align: center;
}

h2::before {
    content: "[ "
}

h2::after {
    content: " ]"
}

#results .form-group:not(:first-child) {
    background-color: #00000080;
    padding: 10px;
    border: 2px solid black;
}

.item-icon {
    /*border: 2px solid transparent;*/
    box-shadow: -2px -2px 0 #373737, 0 -2px 0 #373737, -2px 0 0 #373737, 2px 2px 0 #FFFFFF, 2px 0 0 #FFFFFF, 0 2px 0 #FFFFFF, -2px 2px 0 #808080, 2px -2px 0 #808080;
}

.item-icon-unknown {
    box-shadow: -2px -2px 0 #373737, 0 -2px 0 #373737, -2px 0 0 #373737, 2px 2px 0 #FFFFFF, 2px 0 0 #FFFFFF, 0 2px 0 #FFFFFF, -2px 2px 0 #808080, 2px -2px 0 #808080;
    text-shadow: 1px 1px 0 #00000080;
    font-weight: normal;
    font-size: 16px;
}

.item img {
    background-color: #8B8B8B;
}

.item {
    border-radius: 0;
    border: 2px solid black;
    background-color: #C6C6C6;
    box-shadow: 2px 2px 0 #FFFFFF80 inset, -2px -2px 0 #00000050 inset;
    padding: 0 6px;
    font-size: 16px;
}

.item.just-icon {
    margin: 2px;
    border: none;
}

.item:hover {
    border: 2px solid white;
}


.item.just-icon:hover {
    border: none;
}

.item:active {
    box-shadow: 2px 4px 0 #00000050 inset, -2px -2px 0 #FFFFFF80 inset;
}

.count {
    font-size: 16px;
    font-weight: normal;

    .group-sep {
        font-size: 8px;
        font-weight: normal;
    }

    .plus {
        color: #808080;
    }
}

.table {
    border-spacing: unset;
}

.search-result-item {
    background: #C6C6C6;
    box-shadow: 2px 2px 0 #FFFFFF80 inset, -2px -2px 0 #00000050 inset;
    color: black;
}

.search-result-item:active {
    box-shadow: -2px -2px 0 #FFFFFF80 inset, 2px 2px 0 #00000050 inset;
}

.search-result-item td {
    border: none !important;
    border-radius: 0 !important;
}

tr.search-result-item {
    border-radius: 0 !important;
}

#search-result .active td {
    background-color: transparent;
}

#search-result tr.active {
    background-color: green !important;
    outline: 2px solid white;
    color: white;
}

.alert {
    border-radius: 0;
    background-color: #212121;
    border: none;
    box-shadow: -2px 0 0 #212121, 0 -2px 0 #212121, 2px 0 0 #212121, 0 2px 0 #212121, -6px -4px 0 #555555, -4px -6px 0 #555555, 6px -2px 0 #555555, 4px -4px 0 #555555, 2px -6px 0 #555555, -6px 2px 0 #555555, -4px 4px 0 #555555, -2px 6px 0 #555555, 6px 4px 0 #555555, 4px 6px 0 #555555, -8px -4px 0 #000000, -6px -6px 0 #000000, -4px -8px 0 #000000, 8px 4px 0 #000000, 6px 6px 0 #000000, 4px 8px 0 #000000, 2px -8px 0 #000000, 4px -6px 0 #000000, 6px -4px 0 #000000, 8px -2px 0 #000000, -2px 8px 0 #000000, -4px 6px 0 #000000, -6px 4px 0 #000000, -8px 2px 0 #000000;
    margin: 8px 8px 18px 8px;
    padding: 4px 8px;
}

.btn:disabled, .btn:disabled:hover, .btn:disabled:active {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken;
    box-shadow: none;
    border: 2px solid black !important;
}

li::marker {
    content: "· ";
    text-shadow: 2px 2px 0 #00000080;
}

.modal-content {
    background-color: #C6C6C6;
    color: black;
    border-radius: 0;
    border: none;
    box-shadow: -2px 0 #C6C6C6, 0 -2px #C6C6C6, 0 2px #C6C6C6, 2px 0 #C6C6C6, 2px -2px #C6C6C6, -2px 2px #C6C6C6, -6px -4px #FFFFFF, -4px -6px #FFFFFF, 2px -6px #FFFFFF, -6px 2px #FFFFFF, 6px -2px #555555, -2px 6px #555555, 6px 4px #555555, 4px 6px #555555, 4px -4px #C6C6C6, -4px 4px #C6C6C6, -4px -8px #000000, 2px -8px #000000, -2px 8px #000000, 4px 8px #000000, -8px -4px #000000, -8px 2px #000000, 8px -2px #000000, 8px 4px #000000, -6px -6px #000000, 4px -6px #000000, 6px -4px #000000, 6px 6px #000000, -6px 4px #000000, -4px 6px #000000;

    .table {
        color: black;

        th {
            color: black;
        }

        tr {
            /*border-bottom: 2px solid black;*/
        }
    }

    th {
        color: black;
    }
}

.modal-footer, .modal-body, .modal-header {
    padding: 8px;
    border: none;
}

::-webkit-scrollbar {
    background-color: #000000;
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #C0C0C0;
    box-shadow: -2px -2px #808080 inset;
}

.table {
    border: none;

    th {
        text-align: center;
        color: white;
    }

    th, td {
        vertical-align: middle;
        border: none !important;
    }
}

#recipe-table {
    border-top: 2px solid white;

    tr {
        border-bottom: 2px solid #808080;
    }
}

.item-matrix tr {
    border: none !important;
}

#patch-list-table td {
    vertical-align: middle;
    text-align: center;
}

.alert-info {
    color: #54FCFC;
}

.alert-warning {
    color: #FCA800;
}

.alert-danger {
    color: #FC5454;
}

input.has-error, input.has-error:focus {
    color: #FC5454;
    background-color: #000000;
}

input.has-warning, input.has-warning:focus {
    color: #FCFC54;
    background-color: #000000;
}

#step-item-matrix-group {
    background-color: #373737;
    border-radius: 0;
    box-shadow: -2px -2px 0 #000000, 0 -2px 0 #000000, -2px 0 0 #000000, 2px 2px 0 #FFFFFF, 2px 0 0 #FFFFFF, 0 2px 0 #FFFFFF, -2px 2px 0 #555555, 2px -2px 0 #555555;
    color: #A0A0A0;
}

.modal-header .close {
    opacity: 1;
    width: 16px;
    height: 16px;

    span {
        display: none;
    }
}

.modal-header .close:hover {
    background-color: #FFFFFF50;
}

.modal-header .close:active {
    background-color: #FFFFFF30;
}

.modal-header .close::before {
    content: "";
    display: inline-block;
    position: relative;
    left: -6px;
    top: -6px;
    width: 2px;
    height: 2px;
    box-shadow: 2px 2px, 4px 4px, 6px 6px, 8px 8px, 10px 10px, 10px 2px, 8px 4px, 4px 8px, 2px 10px;
}

.item-group-matrix-sep {
    border: none;
    margin: 10px 0 0;
}

.corner-count {
    right: -2px;
    bottom: -2px;
    color: #FCFCFC;
    text-shadow: 2px 2px 0 #3E3E3E;
    background: none;
    padding: 0;
}