body { background-color:white; margin:0; padding:0; font-family:'Lato'; font-weight:400; }
.day_div { background-color:white; float:left; width:30px; padding:2px 10px 3px 10px; color:black; border-right:1px solid black; font-weight:bold; }
.day_div_latest { background-color:deeppink; float:left; width:30px; padding:2px 10px 3px 10px; color:white; border-right:1px solid black; font-weight:bold; }



.week_div { background-color:black; float:left; width:50; padding:2 10 3 10; color:white; font-weight:bold; border-right:1px solid black; }


.employee_name_div { float:left; padding:4px 4px 4px 10px; width:190px; border-right:1px solid black; }

.edit_panel { float:left }
.wk_edit_panel { float:left; width:100%; border-bottom:1px solid black; }
.period_edit_panel { float:left; width:674px; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black;  }
.employee_edit_panel { float:left; width:100%; border-bottom:1px solid black; }
.hidden { display:none; }

.period_edit_div { float:left; padding:5px 10px 8px 10px; width:100%; }
.loading_div { float:left; padding:10px 10px 10px 10px; color:silver; }

input { padding:3px 4px; color:black; border-radius:4px; font-size:10pt; border:1px solid black; }
input::placeholder { font-family:Lato; font-weight:100; font-style:italic; color:gray; }

.select { background-color:white; border:1px solid black; font-size:10pt; color:black;
    border-radius:4px; padding:2px 0; cursor:pointer; outline:none;}

.select:hover { border:1px solid #3c8357; color:#3c8357; }

.edit_input_title { float:left; width:100%; margin:0 0 1px 0; font-size:9pt; color:#3c8357; }
.edit_input_title_disabled { float:left; width:100%; margin:0 0 1px 0; font-size:9pt; color:silver; }
.edit_input_section_title { float:left; width:100%; margin:0 0 0 0; font-size:10pt; font-weight:bold; color:#3c8357; }

.payroll_total { float:left; width:100%; padding:30 10; }

.div_check { background-color:greenyellow; }
.div_highlight { background-color:gold; }
.div_notice { background-color:aqua; }
.div_error { background-color:deeppink; color:white; }
.div_provisional { background-color:deepskyblue; }

.control_panel { float:left; width:100%; margin:4px 0 20px 10px; }
.employee_panel { float:left; width:100%; margin:4 0 4 4; }

.ok_button { position:absolute; left:20; top:20; padding:2 8 2 8; margin:6 0 0 0; font-family:'Lato'; font-weight:400; background-color:green; font-size:16px; color:white; margin-right:3px; cursor:pointer; border-radius:4px; border-right:1px solid black; border-bottom:1px solid black; }
.ok_button:hover { background-color:tomato; }

.final_paycheck { float:right; margin:0 0 0 0; background-color:gold; border-radius:6px; border:1px solid black; width:240px; padding:3px 10px 3px 10px; font-weight:bold; text-align:center; }
.new_wage { float:right; margin:0 0 0 0; background-color:gold; border-radius:6px; border:1px solid black; width:240px; padding:3px 10px 3px 10px; font-weight:bold; text-align:center; }

.unknown_text { background-color:deeppink; color:white; padding:2px 5px; }
.maybe_unknown_text { background-color:gold; padding:2px 4px; }

.launch_panel { float:left; width:100%; margin:10px 0 0 10px; }
.tool_panel { float:left; width:100%; padding: 0 0 0 0; margin:4px 0 0 10px; }
.body_panel { float:left; width:100%; }

.hr_header_tab_on { float:left; background-color:white; margin:20px 0 0 4px; padding:4px 8px 2px 8px; color:#3c8357; font-size:12px; border-top-left-radius:4px;  border-top-right-radius:4px; }
.hr_header_tab_off { float:left; background-color:#D9E8D9; margin:20px 0 0 4px; padding:4px 8px 2px 8px; color:darkgreen; font-size:12px; border-top-left-radius:4px;  border-top-right-radius:4px; cursor:pointer; }
.hr_header_tab_off:hover { float:left; background-color:#D9E8D9; margin:16px 0 0 4px; padding:4px 8px 6px 8px; color:darkgreen; font-size:12px; border-top-left-radius:4px;  border-top-right-radius:4px; cursor:pointer; }

.do_nothing_button { float:left; padding:2px 8px 2px 8px; margin:0 0 0 0; font-family:'Lato', sans-serif; font-weight:400; font-size:11px; background-color:lightgray; color:white; border-radius:4px; border:1px solid lightgray; }
.do_button { float:left; padding:2px 8px 2px 8px; margin:0 0 0 0; font-family:'Lato'; font-weight:400; font-size:11px; cursor:pointer; border-radius:4px; border:1px solid black; }
.employee_list_div { float:left; margin:0 0 0 0; width:100vw; background-color:white; padding:2px 20px 7px 10px; border-bottom:1px solid darkgray; }

.do_button_active { background-color:deeppink; color:white; border:1px solid deeppink; }

.do_button_on_latest { background-color:deeppink; color:white; border:1px solid deeppink; }
.do_button_on_latest:hover { background-color:gold; color:black; border:1px solid gold; }

.hr_header_lite { float:left; width:100%; margin:0 0 0 0; padding:0 0 6px 0; background-color:deepskyblue; }
.do_button_on_lite { background-color:deepskyblue; color:white; border:1px solid deepskyblue; }
.do_button_on_lite:hover { background-color:gold; color:black; border:1px solid gold; }
.do_button_off_lite { background-color:white; color:black; }
.do_button_off_lite:hover { color:deepskyblue; border:1px solid deepskyblue; }
.text_lite { color:deepskyblue; }
.message_lite { border-radius:4px; padding:3px 6px; color:deepskyblue; border:1px solid deepskyblue; }

.hr_header_pro { float:left; width:100%; margin:0 0 0 0; padding:0 0 6px 0; background-color:crimson; }
.do_button_on_pro { background-color:crimson; color:white; border:1px solid crimson; }
.do_button_on_pro:hover { background-color:gold; color:black; border:1px solid gold; }
.do_button_off_pro { background-color:white; color:black; }
.do_button_off_pro:hover { color:crimson; border:1px solid crimson; }
.text_pro { color:crimson; }
.message_pro { border-radius:4px; padding:3px 6px; color:crimson; border:1px solid crimson; }

.hr_header_admin { float:left; width:100%; margin:0 0 0 0; padding:0 0 0 0; background-color:#3c8357; }
.employee_list_div_admin { float:left; margin:0 0 0 0; width:100vw; background-color:#A6C9A6; padding:2px 10px 7px 10px; }
.do_button_on_admin { background-color:#3c8357; color:white; border:1px solid #3c8357; }
.do_button_on_admin:hover { background-color:gold; color:black; border:1px solid gold; }
.do_button_off_admin { background-color:white; color:black; }
.do_button_off_admin:hover { color:#3c8357; border:1px solid #3c8357; }
.text_admin { color:#3c8357; }
.message_admin { border-radius:4px; padding:3px 6px; color:#3c8357; border:1px solid #3c8357; }

.hr_header_none { float:left; width:100%; margin:0 0 0 0; padding:0 0 6px 0; background-color:lightgray; }

sup {
  vertical-align: super;
  font-size: 8px;
}

.user_login_button { float:right; margin:10px 12px 0 0; border:1px solid white; padding:2px 6px;
    color:white; border-radius:5px; cursor:pointer; font-size:9pt; }

.user_login_button:hover { border:1px solid gold; color:black; background-color:gold; }

.user_login_button_off { float:right; margin:10px 12px 0 0; border:1px solid lightgray; padding:3px 6px;
    background-color:white; color:lightgray; border-radius:5px; cursor:pointer; font-size:9pt; }

.user_login_button_off:hover { border:1px solid lightgray; color:lightgray; }

.user_panel_div { position:absolute; top:0; right:0; }

.user_panel { position:absolute; top:0; right:0; width:220px; background-color:white;
    border-bottom:1px solid darkgray; border-left:1px solid lightgray; border-bottom-left-radius:3px;
    opacity:1.0;  box-shadow:0 3px 0 3px rgba(0,0,0,0.1); }

.user_panel_off { display:none; }

.submit_login_button { float:left; margin:0 0 0 0; border:1px solid darkgray; padding:2px 6px;
    color:darkgray; border-radius:5px; cursor:pointer; font-size:9pt; }

.submit_login_button:hover { border:1px solid gold; color:black; background-color:gold; }