body {
        font-family: monospace;
        padding-bottom: 128px;
        overflow-x: hidden;
        max-width: 95%;
        position: relative;
    }
    .pad {
      padding-left: 64px;
      padding-right: 64px;
    }
    .pad-small {
      padding-left: 16px;
      padding-right: 16px;
    }
    .pad-medium {
      padding-left: 16px;
      padding-right: 16px;
    }
    .pad-top {
      padding-top: 32px;
    }
    .div-header {

    }

    .div-footer {
        position: absolute;
        bottom: 0;
        background: var(--color-theme2);
        height: 20px;
        width: 120%;
        margin-left: -74px;
        margin-bottom: -8px;
    }

    .div-header.hide {
        display: none;
    }

    .banner {
        background: var(--color-theme2);
        color: white;
        font-size: 36px;
        padding: 26px 21px 0px 32px;
        padding-left: 60px;
        margin: -40px -74px 16px -74px;
        user-select: auto;
    }

    .row-flex {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

    }

    .right-align {
      cursor: auto;
      font-size: 12px;
      text-align: right;
    }
    .div-title {
      padding: 0 16px;
      font-size: 1.2vw;
      max-width: 97%;
      margin-bottom: 8px;
    }

    .history-button-group {
      margin-bottom: 8px;
      justify-content: flex-end;
    }

    .history-button-group div {
      margin-left: 4px;
    }

    .history-button-group .mode-button-hint {
      width: 60px;
      text-align: center;
    }

    .mode-button-group {
      justify-content: flex-start;
    }

    .mode-button {

    }
    .mode-button-hint {

    }
    .mode-button-des {
        height: 30px!important;
        padding: 0 15px;
        line-height: 30px;
    }

    .mode-button.off, .option-button.off {
        opacity: 0.4;
    }

    .div-col-con {
      display: flex;
      justify-content: space-around;
      align-content: space-around;
    }

    .div-col-cell {
      width: 45%;
      max-width: 550px;
    }


    .div-col {
      font-size: 16px;
      width: 100%;
      max-height: 600px;
      transition: 2s;
    }
    .div-col div {
      font-size: 16px;
      padding: 3px;
      opacity: 1;
      padding-left: 64px;
      transition: opacity 1s;
    }
    .div-col div:first-child {
      padding-top: 20px;
    }

    #input,#output {
      font-size:18px;
    }

    select {
      margin-bottom: 12px;
      height: 32px;
      font-size:18px;
    }
    select option {
      font-size: 1.2em;
    }

    .row-item-name {
        justify-content: flex-start;
        padding: 5px;
    }

    .input-item-counter, .output-item-label {
        margin: auto;
        width: fit-content;
        padding-left: 14px!important;
        padding-right: 14px!important;
    }

    .clickable {
        cursor: pointer;
    }

    .output-item-label {
        margin-bottom: 5px;
    }

    .itemselect {
        width: 60%;
    }

    .priorwork {
        padding: 5px;
        justify-content: flex-start;
    }

    #output, .input-enchant-item {
        margin-top: 30px;
    }

    .input-enchant-item {
        background: var(--color-theme1);
        padding-left: 8px;
        padding-bottom: 13px;
    }

    .input-enchant-item hr{
      width: calc(100% + 6px);
      margin-left: -8px;
    }

    option {
      height: 32px;
    }

    .enchantment {
      width: 100%;
      padding: 3px;
      display: flex;
      justify-content: space-between;
      line-height: 34px;
    }

    .enchantment:hover {
      background-color: var(--color-theme1);
    }

    .enchantment-list-item{
        display: flex;
        justify-content: flex-start;
        padding: 5px;
        height: 34px;
        position: relative;
    }

    .enchantment .lv,.enchantment-list-lv {
        outline: none;
    }

    .row-flex .select-box-hint:first-child {
        padding: 0 6px 0 10px;
    }


    .select-box-hint {
        height: 34px;
        min-width: 10px;
        background: var(--color-theme2);
        color: white;
        padding: 0 6px 0 8px;
        line-height: 34px;
        font-size: 18px;
    }

    .select-box-content {
        margin-right: 8px;
        height: 34px;
        overflow: hidden;
        min-width: 60px;
        margin-bottom: 0;
        border: 2px solid var(--color-theme2);
        text-align: center;
        outline: none;
        font-size: 18px;
    }

    select.select-box-content:hover, .mode-button-des:hover {
        border: 2px solid var(--color-theme2-opacity);
    }

    .enchantment-list-lv-hint {

    }

    .enchantment-list-lv {
    }

    .enchantment.highlight {
        font-weight: bold;
    }

    .lv_wrap {
        display: flex;
        padding: 0 3px 0 13px;
        border-radius: 7px;
    }
    .lv_wrap .lv {
      margin-right: 24px;
      height: 25px;
    }

    .lv_wrap div:last-child,.cursor-pointer {
        cursor: pointer;
        user-select: none;
    }



    .enchantment-list-input {
        width: 60%;
    }

    .enchantment-list-input-wrapper {
        width: 80%;
    }



    .enchantment:hover .show-outline:after,
    .enchantment-list-item:hover .show-outline:after,
    .show-outline:focus:after {
        content: "";
        background: black;
        position: absolute;
        bottom: 1px;
        left: -4px;
        height: 1px;
        width: 180%;
    }

    .enchantment .show-outline:focus:after {
        width: 100%;
        left: 0px;
    }

    .enchantment-list-item .show-outline:before {
        left: 1px;
        background: var(--color-theme1);
    }

    .show-outline:before {
        content: "lv";
        position: absolute;
        bottom: 0px;
        left: -28px;
        height: 25px;
        padding-left: 6px;
        border-radius: 6px;
    }

    .show-outline {
        position: relative;
    }

    .button {
        margin: auto;
        margin-top: 20px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 21px;
        width: fit-content;
        padding: 0 16px 0 16px;
    }

    .result-tree-button .button {
        width: 150px;
    }

    .button:hover {
        box-shadow: darkgrey 0 0 3px;
    }

    .div-message {
        text-align: center;
        font-size: 17px;
        margin: auto;
        margin-top: 20px;
        color: black;
    }

    #quick-message {
        font-size: 14px;
        height: 64px;
    }

    #error-message {
        color: red;
    }

    #error-message.success {
        color: var(--color-theme2-opacity);
    }

    #result-tree {

    }

    .anvil-pair {
        display: flex;
        margin: auto;
        width: 961px;
    }

    .tree-item,.anvil-pair span {
        padding: 24px;
        font-size: 16px;
        font-family: monospace;
        text-align: center;
    }
    .tree-item {
        width: 250px;
    }

    .tree-item span {
        font-size: 18px;
        font-weight: bold;
    }

    [title]:hover:not(.select-box-content) {
        opacity: 0.75;
    }

    :root {
        --color-theme1: #e1e1e1;
        --color-theme2: #94a5d3;
        --color-theme2-opacity: #4674f1;
        --color-theme2-hover: #626262;
    }