@font-face{ font-family:REPSCROLL; src:url('./_fonts/rep-scroll.ttf');    }
@font-face{ font-family:NESMARIO;  src:url('./_fonts/SuperMarioNES.ttf'); }
@font-face{ font-family:VCRJP;     src:url('./_fonts/vcr-jp.ttf');        }
@font-face{ font-family:MINECART;  src:url('./_fonts/MinecartLCD.ttf');   }


:root{
    --Red000:             rgba(200,1,1,0.4);

    --RoadGreen:          rgba(1,115,92,0.6);
    --RoadBlue:           #173662;

    --cc_l_blue:          rgba(200,245,255,0.9);

    --CF_NUM_01:          REPSCROLL;
    --CF_NUM_02:          NESMARIO;
    --CF_NUM_03:          VCRJP;
    --CF_NUM_04:          MINECART;

    --BAR_RED:            rgba(100,1,1,1);
    --BAR_GRN:            rgba(1,80,1,1);
    --BAR_DRK:            rgba(50,50,50,0.8);
}



body{
    height:               100vh;
    width:                100vw;

    padding:              0px;
    margin:               0px;
    overflow:             hidden;

    background-image:     url('./images/bg_default.jpg');
    background-repeat:    no-repeat;
    background-size:      cover;
    background-position:  bottom;

    align-items:          center;
    align-content:        center;
    justify-content:      center;
}

#div_main{
    margin:               0px;
    padding:              0px;
    height:               100vh;
    width:                100vw;

    font-family:          monospace;
    font-size:            20px;
    color:                gray;

    border-width:         0px;
    border-style:         solid;
    border-color:         black;

    align-items:          center;
    align-content:        center;
    justify-content:      center;
}


#div_menu{
  margin:               0px;
  padding:              0px;
  height:               625px;
  width:                500px;

  align-items:          center;
  align-content:        center;
  justify-content:      center;

  border-width:         5px;
  border-style:         double;
  border-color:         rgba(120,120,120,0.8);
  border-radius:        25px;
  background-color:     rgba(1,1,1,0.9);
}

.form_new_game{
    text-align:         center;
    margin:             5px;
    padding:            15px;
    width:              180px;
    border-style:       solid;
    border-radius:      8px;
    border-width:       3px;
    border-color:       white;
    font-family:        monospace;
    font-size:          23px;
    font-weight:        bold;
    color:              rgba(1,120,255,0.94);
    background-color:   rgba(80,80,80,0.2);
}

.form_new_game:hover{
  background-color: black;}

.form_submit{
  width:              250px;
  font-size:          30px;
  border-width:       7px;
  border-color:       silver;
  color:              white;
  background-color:   rgba(1,115,92,0.6);
  border-radius:      15px;
}

.form_submit:hover{
    background-color:   rgba(1,115,92,0.6);
    color:              white;
}

.form_new_game:hover{
  border-style:       inset;
}










/* =============================== */
/* GRID ELEMENT PROPERTIES (BEGIN) */
/* =============================== */

.GridContainer{
    --top_bottom:2px;
    margin-top: top_bottom;
    margin-bottom:  top_bottom;

    width: 800px;
    height: 100vh;

    padding: 0;
    margin: 0;

    display: grid;
    grid-template-columns: 220px auto;
    grid-template-rows: 50px 70px auto 30px;
    gap: 2px;
    grid-template-areas:
    "Ticker    Ticker"
    "DataPanel ActionPanel"
    "DataPanel MainContent"
    "Footer    Footer";

    /* dev */
    border-width: 0px;
    border-style: dotted;
    border-color: red;
}

.GridItem{
    display: grid;
    overflow: hidden;

    background-color: rgba(0, 0, 0, 0.8);

    border-width: 0px;
    border-style: dotted;
    border-color: gray;
    border-radius: 8px;

    font-family: monospace;
    color: white;
}

/* use this section only for grid-area assignment */
.Ticker         { grid-area: Ticker; }
.DataPanel      { grid-area: DataPanel; }
.ActionPanel    { grid-area: ActionPanel; }
.MainContent    { grid-area: MainContent; }
.Footer         { grid-area: Footer; }


/* additional properties for grid elements*/
.Ticker{
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    align-items: center;
}

.DataPanel{
    padding-top: 15px;
}

.ContentHeader{
    align-items: center;
}

.MainContent{
    padding-top: 15px;
}

.Footer{
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    align-items: center;
    font-weight: 500;
}

/* ==============================*/
/* GRID ELEMENT PROPERTIES (END) */
/* ==============================*/



/* ========================= */
/* TICKER PROPERTIES (BEGIN) */
/* ========================= */

#p_ticker{
    animation: marquee 600s linear infinite;
    white-space: nowrap;

    /* dev */
    border-width: 0px;
    border-style: dotted;
    border-color: red;
}

@keyframes marquee {
  0%    { transform: translate(0, 0);  }
  100%  { transform: translate(-50%, 0);  }
}

.font_ticker{
    font-size:      17px;
    font-weight:    bold;
}

.font_ticker_red    { color:#f20515; }
.font_ticker_green  { color:#36eb1a; }
.font_ticker_yellow { color:#eef205; }
.font_ticker_drugname { color:silver; }
.font_ticker_loopmsg  { color:gray; }

.font_ticker_percent{
    font-size:      13px;
    font-weight:    bold;
    color:          silver;
}

/* ======================= */
/* TICKER PROPERTIES (END) */
/* ======================= */



/* ============================= */
/* DATA PANEL PROPERTIES (BEGIN) */
/* ============================= */

.display_infoBox{
    /* border properties */
    border-style:solid;
    border-width:0px;
    border-color:silver;
    background-color:black;
    /*  */

    /*  */
    padding:2px;
    /*width:200px;*/
    /* text properties */
    font-size:15px;
    font-family: monospace;
    font-weight: normal;
}

.display_infoName{ color:white; }

.display_infoValue{ color:silver; }

.display_cad{ font-size:10px;color:gray; }

.display_health{
    background-color:rgb(0,120,0); /* rgb(0,140,0); -> rgb(140,0,0) */
    border-color:gray;
    border-width:1px;
    font-size:13px;
    color:white;
}

.display_reputation{ background-color:rgb(120,120,0); /* rgb(0,140,0); -> rgb(140,0,0) */ }

.display_day{
    font-size:25px;
    font-weight: bold;
}

.display_navBar{
    font-family:monospace;
    font-size:23px;
    font-weight:bold;
    color:white;
    text-decoration:none;
}

.display_navBar_current{
    text-decoration:underline;
}

.display_actionBar{
    font-family:arial;
    font-size:17px;
    font-weight:normal;
    color:silver;
    text-decoration:none;
}

.display_actionBar_current{
    text-decoration:underline;
}

.display_actionBar_BR{
    font-family:monospace;
    font-size:18px;
}

.input_submit_action{
    text-align:         center;
    margin:             15px;
    padding:            17px;
    width:              175px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       2px;
    border-color:       silver;
    font-family:        monospace;
    font-size:          17px;
    color:              white;
    background-color:   rgba(1,1,40,0.6);
}

.input_submit_action_city{
    font-size:          17px;
    font-weight:        normal;

}

.input_submit_action_newday{
    border-width:       4px;
    border-radius:      15px;
    border-style:       groove;
    padding:            1px;
    padding-left:       10px;
    padding-bottom:     8px;
    font-weight:        bold;
    font-size:          45px;
    color:              green;
}

.input_submit_action_newday_last{
    color:              red;
}

.input_submit_action:hover{
    border-color:       rgba(250,250,250,0.9);
    background-color:   rgba(0,0,80,0.6);
}

.input_submit_action_disabled,.input_submit_action_disabled:hover{
    border-color:       gray;
    background-color:   black;
    color:              gray;
}

.input_submit_action_newday:hover{

}
/* =========================== */
/* DATA PANEL PROPERTIES (END) */
/* =========================== */














/* ================= */
/* CITY MENU (BEGIN) */
/* ================= */

#div_city_main{
    padding:25px;
    padding-top:20px;
    font-size:20px;
}

.font_city_name{
    font-weight:bold;
    text-decoration: underline;
    font-size:30px;
}

.btn_city{}

/* =============== */
/* CITY MENU (END) */
/* =============== */
























/* ================ */
/* BUY/SELL (BEGIN) */
/* ================ */

#table_buysell { width:100%; }
#table_buysell tr:hover { background-color:rgba(100,100,100,0.4); }

.tr_buysell   { height:40px;margin-bottom:5px;margin-top:5px; }
.tr_buysell_A { background-color:rgba(5,5,5,0.8);          }
.tr_buysell_B { background-color:rgba(15,15,15,0.8);       }

.font_buysell_col_head       { font-family:monospace; }
.font_buysell_col_head_buy   { font-size:24px;  color:green;  font-weight:bold; }
.font_buysell_col_head_sell  { font-size:24px;  color:red;    font-weight:bold; }
.font_buysell_col_head_item  { font-size:13px;  color:white;  line-height:20px;  margin-bottom:3px;  text-decoration:underline; }
.font_buysell_col_head_units { font-size:18px;  color:gray;   line-height:30px;  margin-top:3px;}

.font_buysell_item_name{}
.font_buysell_units_owned{}

.td_buysell{
    height:40px;
    margin-left:0px;
    margin-right:0px;
    padding:10px;
    font-size:            20px;
    color:                white;
    font-weight:bold;
}

.td_buysell_q           { color:gold; }
.td_buysell_zero        { color:lightslategray; }
.td_buysell_item_price  { width:45%;  }
.td_buysell_item_name   { width:45%;  }
.td_buysell_units_owned { width:auto; }







#TABLE_BuySell_Item{
    width:            90%;
    padding:          0px;
    margin:           0px;
}
.TD_BuySell_BtnCol{
    width:20%;
}
.TD_BuySell_CenterCol{
    padding:          0px;
    margin:           0px;
    width:50%;
}

#TR_BuySell_Header{
    height:           30px;
}

.TD_BuySell_Header{
    padding:          0px;
    margin:           0px;
    height:           30px;
    font-size:        20px;
    font-family:      monospace;
    font-weight:      bold;
    color:            white;
}

.BTN_BuySell_Item{
    padding:          10px;
    margin:           25px;

    width:            200px;
    height:           70px;

    border-radius:    20px;
    border-style:     solid;
    border-width:     1px;
    border-color:     rgba(1,100,1,0.6);

    font-size:        25px;
    font-family:      monospace;
    font-weight:      bold;
    color:            white;
    letter-spacing:   2px;

    background-color:  rgba(255,255,255,0.6);/* rgba(1,1,40,0.6); */
}

.BTN_BuySell_Item_Sell{
    color:black;
    /* color: rgba(250,0,0,1); */
}

.BTN_BuySell_Item_Buy{
    color:black;
    /* color: rgba(0,250,0,0.6); */
}

#P_BuySell_CenterDisplay{
    font-size:        100px;
    padding:          0px;
    margin:           0px;
}

.BTN_BuySell_Item_Disabled{

}

.font_buysell_header{
    font-size:        20px;
    font-family:      monospace;
    color:            silver;
}

.font_buysell_header_itemname{
    font-weight:      bold;
    color:            silver;
}

.font_buysell_header_symbol{
    font-weight:      bold;
    color:            gray;
}

.font_buysell_header_arrow_red{
    font-weight:      bold;
}

.font_buysell_header_arrow_green{
    font-weight:      bold;
}

.font_buysell_body_smalldark{
    font-size:        14px;
    font-family:      monospace;
    color:            gray;
}

.font_buysell_body_currency{
    font-size:        28px;
    font-family:      monospace;
    color:            green;
    margin:           6px;

}

.font_buysell_body_dollarsign{
    font-size:        25px;
    font-weight:      bold;
    color:            silver;
}

.font_buysell_body_quantity{
    font-size:        25px;
    font-family:      monospace;
    color:            var(--cc_l_blue);
}

.font_buysell_body_medium{
    font-size:        20px;
    font-family:      monospace;
    color:            silver;
}

.font_buysell_header_icon{
    font-size: 20px;
}



/* maybe move to shared? */

.button{
    text-align:         center;
    margin:             15px;
    padding:            17px;
    width:              175px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       2px;
    border-color:       silver;
    font-family:        monospace;
    font-size:          17px;
    color:              white;
    background-color:   rgba(1,1,40,0.6);
}

.button:hover{
    border-color:       rgba(250,250,250,0.9);
    background-color:   rgba(0,0,80,0.6);
}

.button_disabled,.button_disabled:hover{
    border-color:       gray;
    background-color:   black;
    color:              gray;
}


/* ============== */
/* BUY/SELL (END) */
/* ============== */






/* ================= */
/* BANK MENU (BEGIN) */
/* ================= */

#div_bank_main{
    padding:                20px;
    text-align:             left;
    font-family:            monospace;
    font-size:              20px;
    line-height:            30px;
}

.font_bank_title{
    font-family:            NESMARIO;
    color:                  gray;
    text-decoration:        none;
    font-weight:            normal;
    margin:                 5px;
    font-size:              18px;
}

.font_bank_currency{
    color:                  green;
    font-weight:            bold;
    font-family:            MINECART;
    font-size:              23px;
}

.font_bank_currency_loan{
    color:                  rgba(250,20,20,1);

}

.font_bank_dollarsign{
    font-size:              23px;
    padding:                5px;
    color:                  silver;
    font-weight:            bold;
    font-family:            MINECART;
}





.btn_bank{
    padding:                7px;
    margin:                 1px;
    width:                  120px;
    height:                 45px;
    background-color:       black;
    color:                  white;
    border-radius:          15px;
    border-color:           gray;
    border-width:           2px;
}

.btn_bank:hover{
    border-color:           black;
    color:                  white;
    border-width:           1px;
}

#btn_bank_confirm{
    height:35px;
    width:100px;
    background-color:black;
    border-color:gold;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    font-weight:400;
    font-size:15px;
    color:gold;
}

#btn_bank_confirm:hover{ border-width:2px; }

#btn_bank_confirm:disabled{
    border-width:1px;
    border-color:silver;
    color:gray;
}

#s_bankloan_payment{
    width:                  75%;
}

.font_bank_loanamt{
    font-size:   23px;
    font-family: MINECART;
    font-weight: bold;
}

.font_bank_fineprint{
    font-size:15px;
    color:gray;
}

#P_Bank_LoanDisplay{

}

/* =============== */
/* BANK MENU (END) */
/* =============== */











/* ================= */
/* INVENTORY (BEGIN) */
/* ================= */


#table_inv{ width:100%; }

.tr_inv{ padding-bottom:25px; }

.tr_inv:hover{ background-color:rgba(100,100,100,0.4); }

.td_inv{
    font-size:20px;
    color:white;
    font-weight:bold;
    text-align:center;
    align-items:center;
    align-content:center;
    justify-content:center;

}

.td_inv_leftCol   { width:45%; }
.td_inv_rightCol  { width:45%; }
.td_inv_centerCol { width:auto; }


.td_inv_header{
    text-decoration:none;
    text-align:left;
    color:gray;
    margin:0px;
}

.font_inv_headbar{
    color:gold;
    font-size:20px;
    font-weight:bold;
}

/* =============== */
/* INVENTORY (END) */
/* =============== */











.input_submit_city{
    text-align:         center;
    margin:             20px;
    padding:            17px;
    width:              215px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       4px;
    border-color:       silver;
    font-family:        monospace;
    font-size:          25px;
    color:              white;
    font-weight:        bold;
    background-color:   var(--RoadGreen);
}

.input_submit_city:hover{
    border-color:       white;
    color:              white;
}

.input_submit_city_current{
    color:              white;
    border-color:       silver;
    background-color:   var(--RoadBlue);
}

.input_submit_city_current:hover{
    border-color:       gray;
    color:              white;
}

.input_submit_city_home{
    /*color:            gold;*/
}











/* ============== */
/* SHARED (BEGIN) */
/* ============== */



.div_x{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    align-items:center;
    align-content:center;
    justify-content:center;
    text-align:center;
}
.div_x_inline { display:inline;}
.div_x_Tright { text-align:right; }
.div_x_Tleft  { text-align:left; }

#div_headbar       { display:flex; width:100%;}
#div_headbar_left  { width:45%; position:relative; left:-15px;}
#div_headbar_right { width:45%; position:relative; right:-15px;}
#div_headbar_inner_left { position:relative; top:-5px; left:-10px;}

.btn_headbar{
    height:35px;
    width:100px;
    background-color:black;
    border-color:rgba(255,0,0,0.6);
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    font-weight:400;
    font-size:15px;
    color:rgba(255,0,0,0.6);
}

.btn_headbar:hover{
    border-width: 2px;
}

.btn_headbar:disabled{
    color:gray;
    border-color:green;
    border-width:1px;
}



.font_green  { color:green;  }
.font_blue   { color:blue;   }
.font_orange { color:orange; }
.font_gold   { color:gold;   }
.font_white  { color:white; }
.font_gray   { color:gray; }
.font_silver { color:silver; }
.font_red    { color:red; }
.font_yellow { color:yellow; }

.font_light_blue { color:var(--cc_l_blue); }

.font_smalldark{
    font-size:        14px;
    font-family:      monospace;
    color:            gray;
}

/* ============ */
/* SHARED (END) */
/* ============ */


.font_header_icon{
    font-size:35px;
}

.font_header_currency{
    font-size:20px;
    font-family: MINECART;
    font-weight: bold;
    color: silver;
}

.font_header_currency_s{
    font-size:23px;
    color:green;
    font-weight:bold;
    font-family: MINECART;
}











/***********sidebar*************/


.font_sb_large{
    font-size:37px;
    font-weight:bold;
}

.font_sb_medium{
    font-size:25px;
    font-weight:bold;
}

.font_location{
    font-size:18px;
    font-weight:600;
    color:gray;
}

.font_sb_cross{
    font-size:35px;
    font-weight:bold;
}

.font_sb_cbox{
    font-size:25px;

}

.p_sb_bar{
    width:140px;
    height:60px;
    white-space: nowrap;
    padding:0px;
    margin:0px;
}

.div_sb_bar{
    width:135px;
    height:30px;
    border-width:1px;
    border-style:solid;
    border-color:silver;
    text-align: center;
    justify-content:center;
    align-items:center;
    align-content: center;
}

.table_sb_bar{
    width:180px;
    margin:0px;
}

.td_sb_bar{
    margin:0px;
    background-color: rgba(1,1,1,0);
}

.td_sb_bar_container{
    width:135px;
    background-color: rgba(1,1,1,0);
}

.td_sb_bar_icon{
    width:45px;
}





#div_sb_health_main{
    background-color:var(--BAR_RED);
    z-index: 2;
    height:30px;
    width:135px;
}

.div_sb_hbars{
    position:relative;
    height:30px;
    width:135px;
}

#div_healthbar{
    z-index:2;
    top:-30px;
    background-color:var(--BAR_GRN);
    width:100%;
}

#hb1{ z-index:3; }


#div_sb_inv_main{
    background-color:var(--BAR_DRK);
    z-index: 2;
    height:30px;
    width:135px;
}

#div_invbar{
    z-index:2;
    top:-30px;
    background-color:var(--BAR_GRN);
    width:100%;
}

#ib1{ z-index:3; }








.font_header{
    font-size:          25px;
    font-weight:        bold;
}


.A_Footer{
    font-size:          13px;
    text-decoration:    none;
    color:              silver;
}

.A_Footer_NewGame{
    font-size:          14px;
    text-decoration:    none;
    color:              rgba(255,0,0,0.6);
    font-weight:        bold;
}




/* =================== */
/* FINAL SCORE (BEGIN) */
/* =================== */

.td_score{ border-color:red; border-width:0px; border-style:solid; }

.td_score_col_1{ width:20px;   }
.td_score_col_2{ width:65px;   }
.td_score_col_3{ width:300px; color:silver; }

.font_score_title{
    font-weight:bold;
    font-size:35px;
    text-decoration:none;
    color:var(--cc_l_blue);
    font-family:NESMARIO;
}

.font_score_daily{}

.font_score_daily_value{
    font-weight:bold;
    color:silver;
}

#btn_score_continue{
    margin:5px;
    padding:20px;

    font-weight:bold;
    font-size:20px;
    text-decoration:none;
    color:var(--cc_l_blue);
    font-family:NESMARIO;

    border-radius:10px;
    border-style:solid;
    border-width:4px;
    border-color:gray;

    background-color:rgba(1,1,1,0.1);
}

#btn_score_continue:hover{
    border-color:silver;
    color:var(--cc_l_blue);
}

/* ================= */
/* FINAL SCORE (END) */
/* ================= */