: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_5 { background-color:lightgray; }
.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; }

.button_like { float:left; background-color:#8E8E8E; color:whitesmoke; border-radius:6px; padding:2px 8px; font-size:9pt; margin:1px 0 0 0; border:1px solid #8E8E8E; }
.button_like_active { background-color:#BFE6DF; color:#34B19C; border:1px solid #34B19C; }
.button_like_sms_active { background-color:#C0E5E7; color:cadetblue; border:1px solid cadetblue; }
.button_like_inactive { background-color:whitesmoke; color:darkgray; border:1px solid darkgray; }
.button_like_special { background-color:gold; color:cadetblue; border:1px solid cadetblue; }
.button_like_special_inactive { background-color:#E1E1E1; color:darkgray; border:1px solid darkgray; }
.button_like_on { background-color:darkgray; color:whitesmoke; border:1px solid darkgray; }
.button_like_off { background-color:crimson; color:whitesmoke; border:1px solid crimson; }
.button_like_error { background-color:deeppink; color:whitesmoke; border:1px solid deeppink; }
.button_like_hidden { background-color:whitesmoke; color:whitesmoke; border:1px solid whitesmoke; }
.button_like_narrow { padding:2px 6px; }

.button_border { float:left; border:1px solid black; color:black; border-radius:6px; padding:2px 8px; font-size:9pt; margin:1px 0 0 0; }
.button_border_active { border:1px solid cadetblue; color:cadetblue; }
.button_border_inactive { border:1px solid lightgray; color:lightgray; }
.button_border_off { border:1px solid crimson; color:crimson; }
.button_border_error { border:1px solid deeppink; color:deeppink; }
.button_border_borderless { border:1px solid whitesmoke; }
.button_border_hidden { border:1px solid whitesmoke; color:whitesmoke; }
.button_border_narrow { padding:2px 6px; }

.button_title { float:left; font-size:9pt; margin:4px 5px 0 0; color:cadetblue; }
.button_title_sms { float:left; font-size:9pt; margin:4px 5px 0 0; color:cadetblue; }

.state_left { float:left; background-color:#8E8E8E; color:whitesmoke; border-radius:12px 0 0 12px; padding:2px 8px; font-size:9pt; margin:1px 0 0 0; border:1px solid darkgray; }
.state_left_active { background-color:#34B19C; color:whitesmoke; border:1px solid #34B19C; }
.state_left_sms_active { background-color:cadetblue; color:whitesmoke; border:1px solid cadetblue; }
.state_left_inactive { background-color:darkgray; color:whitesmoke; border:1px solid darkgray; }
.state_right { float:left; background-color:whitesmoke; color:darkgray; border-radius:0 12px 12px 0; padding:2px 8px; font-size:9pt; margin:1px 0 0 0; border:1px solid darkgray; border-left:0 solid white; }
.state_right_active { background-color:whitesmoke; color:#34B19C; border:1px solid #34B19C; }
.state_right_sms_active { background-color:whitesmoke; color:cadetblue; border:1px solid cadetblue; }
.state_right_inactive { background-color:whitesmoke; color:darkgray; border:1px solid darkgray; }
.state_both { float:left; background-color:whitesmoke; color:lightgray; border-radius:12px 12px 12px 12px; padding:2px 8px; font-size:9pt; margin:1px 0 0 0; border:1px solid lightgray; }

.edit_div_line { float:left; width:100%; margin:3px 6px 0 255px; }
.edit_greeting_text { float:left; width:100%; margin:2px 0 0 10px; padding:0 80px 0 0; font-size:12pt; font-style:italic; }
.greeting_input { border:1px solid lightgray; border-radius:3px; margin:0 4px 0 4px; font-size:10pt; color:darkgray; }
.greeting_input_special { border:1px solid lightgray; border-radius:3px; margin:0 4px 0 4px; font-size:10pt; }

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