:root {
	--jnny_color:#168EA5;
	--jnny_secondary_color:#34B19C;
	--jnny_third_color:#DC143C;
	--jnny_page_color:whitesmoke;
	--jnny_highlight_color:hotpink;
}

body { background-color:#edeae3; margin:0; padding:0; }

.do_button { float:left; padding:2px 8px 1px 8px; font-family:'Lato', sans-serif; font-weight:400; font-size:11px; color:white; margin-right:3px; cursor:pointer; border-radius:4px; border-right:1px solid black; border-bottom:1px solid black; }
.do_button:hover { background-color: hotpink; }
.do_button_1 { background-color:var(--jnny_color); }
.do_button_2 { background-color:var(--jnny_secondary_color); }
.do_button_3 { background-color:var(--jnny_third_color); }
.do_button_4 { background-color:darkred; }
.do_button_via {background-color: #168141;}
.do_button_via_secondary {background-color: #9dcb3b}
.do_button_off { background-color:#D3D3D3; }
.dont_do_button { float:left; padding:2px 8px 1px 8px; font-family:'Lato', sans-serif; font-weight:400; font-size:11px; color:white; margin-right:3px; border-radius:4px; border-right:1px solid black; border-bottom:1px solid black; background-color:darkgray; }
.no_button { float:left; padding:2px 8px 1px 8px; font-family:'Lato', sans-serif; font-weight:400; font-size:11px; color:white; margin-right:3px; border-radius:4px; border-right:1px solid lightgray; border-bottom:1px solid lightgray; background-color:lightgray; }


.urba_code_text_field {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 20px;
    color: black;
    vertical-align: middle;
    background-color: white;
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid darkslategray;
    border-radius: 6px;
    outline: none;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 0 inset;
}

.urba_code_text_field:focus {
        border-color: white;
        outline: none;
        /*box-shadow: rgba(3, 102, 214, 0.3) 0 0 0 3px;*/
    }

.jnny_nav_button { display:inline-block; font-size:24px; width:46px; text-align:center; padding:6px 6px; margin:0 1px; color:var(--jnny_color); background-color:var(--jnny_page_color); border-top-left-radius:6px; border-top-right-radius:6px; }
.jnny_nav_button_off { color:var(--jnny_page_color); cursor:pointer; background-color:var(--jnny_third_color); }
.jnny_nav_button_off:hover { background-color:var(--jnny_highlight_color); }

.jnny_header { float:left; width:100%; margin:0 0 0 0; padding:0 0 6px 0; background-color:var(--jnny_color); }
.jnny_header_local { float:left; width:100%; margin:0 0 0 0; padding:0 0 6px 0; background-color:mediumpurple; }
.jnny_subheader { float:left; width:100%; margin:0 0 0 0; padding:4px 0 0 0; text-align:center; background-color:var(--jnny_secondary_color); }

.list_div { float:left; font-family:'Lato', sans-serif; font-weight:400; color:black; width:100%; border-bottom:1px solid #464530; padding:6px 0; }

.vialogue_text_field {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 20px;
    color: black;
    vertical-align: middle;
    background-color: white;
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid darkslategray;
    border-radius: 6px;
    outline: none;
    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 0 inset;
}

.urba_code_text_field:focus {
        border-color: white;
        outline: none;
        /*box-shadow: rgba(3, 102, 214, 0.3) 0 0 0 3px;*/
    }


.batch_color_icon { float:left; padding:1px 10px 1px 10px; margin:0 0 0 6px; font-family:'Lato', sans-serif; font-weight:400; font-size:12px; border-radius:2px; text-align:center; }
.batch_color_icon_1 { background-color:#15B041; color:white; }
.batch_color_icon_2 { background-color:#F2CE00; color:#464530; }
.batch_color_icon_3 { background-color:#F08D1B; color:white; }
.batch_color_icon_4 { background-color:hotpink; color:white; }
.batch_color_icon_0 { background-color:gray; color:white; }

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

.user_login_button:hover { border:1px solid #EBD84E; color:#EBD84E; }

.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; }

.login_label { float:left; margin:2px 0 0 20px; width:100%; color:lightgray; }

.login_button { float:left; padding:2px 8px; border:1px solid darkgray; background-color:white; color:darkgray;
    border-radius:6px; cursor:pointer; font-size:9pt; }

.login_button:hover {  border:1px solid var(--jnny_color); color:var(--jnny_color); }

input { padding:2px 4px; font-family:Lato, sans-serif; font-weight:400; font-size:9pt; color:black; border-radius:6px; }

.permit_jnny_cc_all { float:left; padding:2px 6px 1px 6px; border:1px solid var(--jnny_secondary_color); background-color:var(--jnny_secondary_color); color:white; font-size:8pt; border-radius:4px; }

.permit_personnelement_admin { float:left; padding:2px 6px 1px 6px; border:1px solid green; background-color:green; color:white; font-size:8pt; border-radius:4px; }
.permit_personnelement_pro { float:left; padding:2px 6px 1px 6px; border:1px solid crimson; background-color:crimson; color:white; font-size:8pt; border-radius:4px; }
.permit_personnelement_lite { float:left; padding:2px 6px 1px 6px; border:1px solid deepskyblue; background-color:deepskyblue; color:white; font-size:8pt; border-radius:4px; }

.site_permissions_super { float:left; padding:2px 6px 1px 6px; border:1px solid deeppink; background-color:deeppink; color:white; font-size:8pt; border-radius:4px; }
.site_permissions_all { float:left; padding:2px 6px 1px 6px; border:1px solid green; background-color:green; color:white; font-size:8pt; border-radius:4px; }
.site_permissions_some { float:left; padding:2px 6px 1px 6px; border:1px solid green; background-color:whitesmoke; color:green; font-size:8pt; border-radius:4px; }

.permit_site_none { float:left; padding:2px 6px 1px 6px; border:1px solid lightgray; background-color:whitesmoke; color:lightgray; font-size:8pt; border-radius:4px; }

.inline_definition { float:left; margin:7px 0 0 3px; font-size:9pt; color:lightgray; }
.inline_definition:hover { color:tomato; }

.site_permission_site_name { float:left; font-size:11pt; font-weight:bold; }

.monthly_total { float:left; color:black; font-size:12pt; cursor:pointer; }
.monthly_total:hover { font-size:9pt; border:1px solid deeppink; border-radius:4px; padding:1px 10px; color:deeppink; }

.section_tab { float:left; border:1px solid gray; border-top-left-radius:8px; border-top-right-radius:8px; padding:4px 8px; }
.section_tab_on { border-bottom:1px solid whitesmoke; }
.section_tab_off { border-bottom:1px solid gray; cursor:pointer; }
.section_tab_off:hover { background-color:gold; }
.section_tab_space { float:left; border-bottom:1px solid gray; color:whitesmoke; padding:4px 0 5px 0; }

.permit_text_active { color:black; }
.permit_text_inactive { color:lightgray; }