@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Noto+Sans+TC&display=swap";
@import url("../css/jsoneditor/jsoneditor.min.css");

/* css reset */
* {
    margin: 0px;
    padding: 0px;
    outline: none;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', 'Noto Sans TC', monospace, sans-serif !important;
}
html {
    font-size: 16px; /* rem size */
}
img, svg {
    display: block !important;
}
div {
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 0px;
}
input[type=checkbox] {
    display: block;
}

/* custom style */
div[ui_type=raw_zone_wrap] {
    width: 50vw;
    height: 180px;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
}
div[ui_type=result_zone_wrap] {
    width: 50vw;
    height: 180px;
    padding: 10px;
    background-color: rgb(245,245,245);
    border: 1px solid #ff8000;
    border-radius: 4px;
}
textarea[ui_type=raw_zone] {
    width: 100%;
    height: 100%;
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 1px;
    resize: none;
    color: #333;
    border: none;
    background: none;
}
textarea[ui_type=result_zone] {
    width: 100%;
    height: 100%;
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 1px;
    resize: none;
    color: #333;
    border: none;
    background: none;
}
div[ui_type=button] {
    border: 2px solid #ff8000;
    color: #333;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 15px 25px;
    border-radius: 4px;
}
div[ui_type=button]:hover {
    color: #fff;
    background-color: #ff8000;
}
div[ui_key=to_source_code_page] {
    border: 2px solid #ff8000;
    color: #333;
    font-size: 1rem;
    line-height: 1.2rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 15px 25px;
    border-radius: 4px;
    background-color: #fff;
}
div[ui_key=to_source_code_page]:hover {
    color: #fff;
    background-color: #ff8000;
}