@media screen and (max-width: 1000px) {
:root {
    --font-size: 16px;
    --body_frame_width: calc(100%);
    --side_frame_width: 0px;
    --form_font_size: 1em;
    --form_input_font_size: 1em;
    --full_frame_font_size: 1em;
    --popup_window_height: 22em;
    --popup_window_width: 20em;
    --popup_window_top: 1em;
    --popup_window_left: calc(50% - 10em);
    --nav_display: none;
    --nav_background_color: white;
    --nav_toggle_btn_display: block;
    --nav_position: absolute;
    --nav_border: 2px solid black;
    --section_width: calc(100%);
    --nav_width: calc(100% - 1.5em);
    }
}
@media screen and (min-width: 1001px) {
:root {
    --font-size: 16px;
    --body_frame_width: calc(80% - 40px);
    --side_frame_width: 20px;
    --form_font_size: 1em;
    --form_input_font_size: 1em;
    --full_frame_font_size: 1em;
    --popup_window_height: 23em;
    --popup_window_width: 30em;
    --popup_window_top: calc(3em);
    --popup_window_left: calc(50% - 15em);
    --nav_display: block;
    --nav_background_color: rgba( 255, 255, 255, 0.5);
    --nav_toggle_btn_display: none;
    --nav_position: static;
    --nav_border: 0px solid black;
    --section_width: calc(100% - 13em);
    --nav_width: 20em;
    }
}
html {
    height: 100%;
    border: 0px;
    padding: 0px;
    height: 100%;
}
@font-face { font-family: 'MapoGoldenPier'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff') format('woff'); font-weight: normal; font-style: normal; }
body {
    font-family: MapoGoldenPier;
    height: 100%;
    border: 0px;
    padding: 0px;
    margin: 0px;
    /*background: url( '/static/img/013.jpg' ) no-repeat fixed center center;
    background-size: cover;*/
    background-color: rgba(0, 0, 0, 0.05);
    font-size: var( --font-size );
}
body::-webkit-scrollbar {
    display: none;
}
.bg {
    width: 100%;
    height: 100%;
}
.div_full_frame {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    font-size: var( --full_frame_font_size );
}
.side_frame {
    width: var( --side_frame_width );
}
#side_frame_left {
}
#side_frame_right {
}
.body_frame {
    width: var( --body_frame_width );
}
.head_wrapper {
    display: flex;
    flex-flow: row nowrap;
    width: calc(100%);
    overflow: hidden;
    margin-bottom: 0.2em;
    border-bottom: 1px dotted grey;
}
.body_wrapper {
    display: flex;
    flex-flow: row nowrap;
    width: calc(100%);
}
.foot_wrapper {
    width: calc(100%);
    /* background-color: rgba( 255, 255, 255, 0.5); */
    margin-top: 0.2em;
}
.dim_layer {
    z-index:10;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: .5;
    background-color: black;
    display: none;
}
.popup_window {
    z-index:11;
    height: var( --popup_window_height );
    width: var( --popup_window_width );
    border: 2px solid black;
    position: fixed;
    top: var( --popup_window_top );
    left: var( --popup_window_left );
    color: black;
    background-color: white;
    display: none;
    text-align: center;
}
.btn_in_popup {
    width: 5em;
    height: 2em;

}
.left_header {
    width: 3em;
    height: 2.8em;
    line-height: 2.8em;
    text-align: center;
    border: 0px;
    /*background-color: rgba( 0, 255, 255, 0.5);*/
    margin-right: 0.2em;
}
.right_header {
    width: 15em;
    height: 2.8em;
    line-height: 2.8em;
    text-align: center;
    border: 0px;
    /*background-color: rgba( 255, 255, 255, 0.5);*/
    margin-left: 0.2em;
}

header {
    width: calc(100%);
    height: 2.8em;
    line-height: 2.8em;
    margin: 0em;
    border: 0em solid red;
    text-align: center;
    /* background-color: rgba( 255, 255, 255, 0.5); */

}
nav {
    width: var(--nav_width);
    margin: 0em;
    border: var(--nav_border);
    padding: 0.5em;
    text-align: left;
    display: var(--nav_display);
    position: var(--nav_position);
    z-index: 5;
    background-color: var(--nav_background_color);
}
#nav_toggle_btn {
    display: var(--nav_toggle_btn_display);
}
section {
    width: var(--section_width);
    margin: 0em;
    border: 0em solid red;
    padding: 0em;
}
aside {
    display: none;
    width: calc(6em);
    height: 10em;
    margin: 0em;
    border: 0em solid red;
    padding: 0.5em;

}
.memo_item_bar {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 1px dotted grey;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
.memo_item_bar_date_block {
    width: 7em;
    font-size: 0.8em;
}
.memo_item_bar_text_block {
    width: calc(100% - 7em);
    white-space: pre-line;
    word-break: break-all;
}
article._article_top {
    width: calc(100% - 1em);
    padding: 0.5em;
    border: 0em solid red;
    margin: 0em;
    margin-bottom: 0.2em;
    text-align: left;
    /* background-color: rgba( 255, 255, 255, 0.5);*/
}
article._article_middle {
    width: calc(100% - 1em);
    padding: 0.5em;
    border: 0em solid red;
    margin: 0em;
    margin-bottom: 0.2em;
    text-align: left;
    /* background-color: rgba( 255, 255, 255, 0.5);*/
}
article._article_main {
    width: calc(100% - 1em);
    padding: 0.5em;
    border: 0em solid red;
    margin: 0em;
    text-align: left;
    /* background-color: rgba( 255, 255, 255, 0.5);*/
}
footer {
    width: calc(100%);
    height: 3em;
    margin: 0em;
    border: 0em solid red;
    padding: 0em;
    line-height: 3em;
}

/* Form tag control */
form {
    display: inline;
    font-size: var( --form_font_size );
}
input[type=submit] {
    background-color: transparent;
    border: 0px;
    font-size: 1em;
}
input, option, select, textarea {
    font-size: var( --form_input_font_size );
    font-family: "Sunflower", sans-serif;
}
#id_memo_add_memo_type {
    width: 100%;
}
#id_memo_add_memo_text {
    width: 100%;
    height: 5em;
}
#id_memo_edit_memo_type {
    width: 80%;
}
#id_memo_edit_memo_text {
    width: 80%;
    height: 13em;
}
#memo_data_add_btn {
    width: 100%;
    height: 2em;
}
ul {
    list-style-type: square;
}
li {
    padding: 0em;
    margin: 0em;
}
a {
    text-decoration: none;
}




.miners_main_wrapper {
    width: 100%;
    border: 0px;
}
.miners_vertical_wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    width: 29em;
    border: 0px;
    font-size: 0.8em;
}
.miner_item {
    width:3em;
    border: 1px dotted grey;
    text-align: center;

}
.status_item {
    width: 3em;
    border: 1px dotted grey;
    text-align: center;
    height: 5em;
    line-height: 4.5em;
}
.miner_item_header {
    width: 3em;
    border: 1px dotted grey;
    text-align: center;
}
.mining_book_data_row {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.mining_book_item_row {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.mining_book_costs {
    width: 25%;
}
.mining_book_utils {
    width: 25%;
}
.mining_book_sales {
    width: 25%;
}
.mining_book_net {
    width: 25%;
}
.mining_book_date {
    width: 5.2em;
}
#id_date {
    width: 5em;
    margin: 0px;
    padding: 0px;
}
.mining_book_typeint {
    width: 3.2em;
    text-align: left;
}
#id_typeint {
    width: 3em;
    margin: 0px;
    padding: 0px;
}
.mining_book_item {
    width: 8em;
}
#id_item {
    width: 7.8em;
    margin: 0px;
    padding: 0px;
}
.mining_book_price {
    width: 6em;
    text-align: right;
}
#id_price {
    width: 5.8em;
    margin: 0px;
    padding: 0px;
}
.btn_mining_book {
    width: 100%;
}