/* Import of tnetennbas */
/* NB : duplicated in travelling.css */
@import url("tnetennba.css");
@import url("tnetennba-codes.css");

/** BASE CSS STARTS HERE **/

/* general start */
/* general : tags start */
body { background-color: #fff; color: #000; min-width: 310px; } /* A11Y min width reduced so at 1280px wide with 400% zoom it fits including chromes scroll bar ! */
img {max-width: 100%; }
a:link {font-weight: bold; text-underline-offset: 3px;}

/* general : tags end */
/* general : classes start */
.cleft{clear:left;}
.clear, .clearspinner{clear:both;}
.vspace{clear:both;height: 1em;}
.vspace2{clear:both;height: 3.5em;}
.inline{display:inline;}
.inline-block{display:inline-block;}
.clrspan{clear:both;display:block;}
.centre {text-align:center}
.breakword { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.single_line_truncate {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.subtle_paragraph {color: #999999;}
.capitalise {text-transform: uppercase;}
.dont_capitalise {text-transform: none;}
/* general : classes end */
/* general end */

/* standard grey scale colours START */
/* convention for class names pi_{grey_name}_{usage(fg|bg|bd)} add as required */
/* AJ : shout if we need to start using these with pseudo classes e.g. :hover */
.pi_g1_fg { color: #696969 !important; }
.pi_g2_fg { color: #848484 !important; }
.pi_g3_fg { color: #B9B9B9 !important; }
.pi_g3_bd { border-color: #B9B9B9 !important; }
.pi_g4_bd { border-color: #D5D5D5 !important; }
.pi_g4_bg { background-color: #D5D5D5 !important; }
.pi_g5_bg { background-color: #EBEBEB !important; }
.pi_g6_bg { background-color: #F2F2F2 !important; }
.pi_g7_bg { background-color: #F8F8F8 !important; }
/* standard grey scale colours END */

/* text sizes START (make important if required) )*/
.font-xxxs {font-size:0.5rem}
.font-xxs {font-size:0.625rem}
.font-xs {font-size:0.75rem}
.font-s {font-size:0.875rem}
.font-l {font-size:1.125rem}
.font-xl {font-size:1.25rem}
.font-xxl {font-size:1.375rem}
.font-xxxl {font-size:1.5rem}
/* text sizes END */


/* icon font family sizing START */
.icon {font-size:1em;}
.icon.icon-mini {font-size:.6em;}
.icon.icon-small {font-size:.8em;}
.icon.icon-large {font-size:1.4em; }
.icon.icon-xlarge {font-size:1.8em; }
.icon.icon-xxlarge {font-size:2.3em; }
/* icon font family sizing END */

/* START PORTAL TEMPLATE */

/* START 2019STYLE */
ul#superHeaderMenu li, ul#navBarLanguage li { line-height: 0.9rem; }
ul#superHeaderMenu li:not(:first-child)
, ul#navBarLanguage li:not(:first-child) { border-left-style: solid; border-left-width: 2px; padding-left: 10px; margin-left: 10px; }
.pi_sunshine_page #navHeader { box-shadow: 0px 2px 4px 0px rgba(51, 51, 51, 0.5); }

/* main menu 2019 start */
#navbar_2019 { box-shadow: 0px 2px 4px 0px rgba(51, 51, 51, 0.5); }
#navbar_2019 #navbar_main { height: 80px; }
#navbar_2019 #brand_logo { height: 80px; width: 100%; object-fit: contain; max-height: 80px; max-width: 320px;}
#navbar_2019 #menu_ul > li > a { border-bottom: 3px solid transparent; padding-left: 0; padding-right: 0; }
#navbar_2019 #menu_ul > li > a:hover
, #navbar_2019 #menu_ul > li > a:focus { border-bottom-color: currentColor; }
#navbar_2019 #menu_ul li:not(.dropdown-item) > a.active { border-bottom-color: currentColor; }
#navbar_2019 #nav_search_icon
, #navbar_2019 #nav_share_icon
, #navbar_2019 #nav_link_expand
, #nav_expand_outer_search #expand_header_search
, #nav_expand_outer_search #nav_search_expand_icon { font-size: 1.1rem; }
#nav_expand_outer_links.nav_expandable
, #nav_expand_outer_search.nav_expandable { border-top: solid 1px rgba(255,255,255, 0.36); }
#nav_expand_outer_links #navbarNavContentExpand li:first-child { margin-top: 13px; }
#nav_expand_outer_links #navbarNavContentExpand li:last-child { margin-bottom: 13px; }
#nav_expand_outer_links #navbarNavContentExpand a { font-weight: bold; }
#nav_expand_outer_links #navbarNavContentExpand a.active { border-bottom-width: 3px; border-bottom-style: solid; }
#nav_expand_outer_links #navbarNavContentExpand hr {border-color: currentColor;}
/* Added custom styles here as BS4 method chain was becoming unwieldy */ 
/* Below to read full width click events to the dropdown items, after .dropdown-item move from the a to the li element */
/* #navbar_2019 #more #nav_dropdown_overflow li.dropdown-item {padding: 0.25rem 0 0.25rem 0;} */
#navbar_2019 #more #nav_dropdown_overflow li.dropdown-item a {/*padding: 0 1.25rem 0 1.25rem;*/ width: 100%; display: block; }
#navbar_2019 #more #nav_dropdown_overflow li.dropdown-item a.active { color: #FFFFFF !important; }
#navbar_2019 #more #nav_dropdown_overflow li.dropdown-item:hover a { color: #FFFFFF !important; text-decoration: none; }
/* main menu 2019 end */

/* #main_menu.admin_menu start */
#main_menu.admin_menu { box-shadow: 0px 2px 4px 0px rgba(51, 51, 51, 0.5); }
#main_menu.admin_menu ul { margin: 0; }
/* #main_menu.admin_menu - reduce height */
#main_menu.admin_menu ul li { line-height: 80px; font-size: 1.25rem; float: left; display: block; text-align: center; }
#main_menu.admin_menu ul li a { display: block; height: 80px; padding: 0 1rem; font-size: 1.25rem;}
/* .admin_menu - link colour */
#main_menu.admin_menu ul li a,
#main_menu.admin_menu ul li a:link,
#main_menu.admin_menu ul li a:visited { color: #777777; }
#main_menu.admin_menu ul li a:hover,
#main_menu.admin_menu ul li a:focus,
#main_menu.admin_menu ul li a:active { color: #333333; }
/* remove selected background */
#main_menu.admin_menu ul li a.active { background: none; }

#main_menu.admin_menu ul li.image_slot a,
#main_menu.admin_menu ul li.image_slot span {text-align:center; padding:0; display: block; height: 80px;}
#main_menu.admin_menu ul li.image_slot a img,
#main_menu.admin_menu ul li.image_slot span img {margin:auto; vertical-align:baseline; max-height: 80px;}
/* #main_menu.admin_menu end */


/** CORE CSS STARTS HERE **/

.message_flash { margin-right: 2%; clear:both}


/* END PORTAL TEMPLATE */

/* breadcrum start */
#breadcrumb { padding: 0.2em 0; margin: 5px 0 0 0; font-size: 1.1em; }
#breadcrumb a { display: block; float: left; font-weight: bold; text-decoration: none; }
#breadcrumb .seperator { display: block; float: left; width: 20px; height: 15px; text-indent: -500px; background: url(../images/arrow.gif) no-repeat center center; }
/* breadcrum end */

/* footer start */
#footer { height:80px; border-top-width: 1px; border-top-style: solid;}
/* footer end */

/* generic form css start */
form { padding: 0 0 0 0; }
form fieldset { margin: 0 0 1em 0; padding: 0; border: none; }
form legend { font-weight: bold; margin: 0; padding: 0.5em 0 0.5em 5px; color:inherit;}
.adaptation_enhanced_help form fieldset legend { background: none repeat scroll 0 0 #6D6E71; border: 1px solid #6D6E71; color: white; float: left; height: 5px; display:block; }
form input.input-medium {width:190px;}
form input.input-small {width:100px;}
.form-controls {text-align:left; padding:1.5em 1em 2em 0; margin-left: 33%;}
.formfield .label
, .formfield label { float:left; width:35%; font-weight:bold; text-align:right; margin:10px 10px 0 0; color:inherit; }
.controls .label
, .controls label { clear:left; float:none; text-align:left; width:auto; font-weight:normal; margin: 5px; }
.formfield .label .req
, .formfield label .req { font-size:.8em; display:block; color:#666; }
.formfield .formcontrols { background:none; }
.formfield .controls { margin-left:35%; padding:3px 0; }
.formfield .controls input[type="file"]
, .formfield .controls input[type="text"]
, .formfield .controls input[type="password"] { background-color: #ffffff; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s; height: 20px; padding: 4px 6px; border-radius: 4px; font-family:inherit; color:inherit; float:left; }
form .editable { display: block; clear: both; background: #f1f1f1; padding: 0.7em 10px;  min-width: 200px; margin-bottom: 3px; border-radius:5px;}
form fieldset .checkbox { display: block; clear: both; padding: 0 0 4px 0; }
form fieldset .checkbox input { width: auto; }
form fieldset .checkbox label { padding-top: 1px; float: left; font-weight: normal; }
form .formbottom { padding: 0.5em 0; }
form .formbottom input,
form .formbottom .input { width: auto; float: right; font: 1em Arial, Helvetica sans-serif; } /* font should probably go from this !! */
form .formelement { float: left; background: #EEEEEE; padding: 0.5em 0; }
form .linked_identity { display: block; clear: both; background: #EEEEEE; padding: 0.5em 10px; border-bottom: 2px solid white; min-width: 200px; margin-bottom: 1em; }
form .linked_identity .identity { float:left; min-width: 300px;}
/* generic form css end */


/* 2019Style
.columns { min-height: 500px;}
*/
.columns  div.col-one {width:100%;float:left;}
.columns  div.col-half {width:50%;float:left;}
.columns  div.col-third {width:33%;float:left;}
.columns  div.col-2thirds {width:66%;float:left;}
.columns  div .col-inner {margin-right:20px;}
.columns  div:first-child .col-inner {margin-left:20px;}
/* join page summary end */

/* dunno ? maybe my profile maybe image widget? start */
#my_image_paragraph_1 { margin: 200px 0px 0px 0px; background-color: black; filter: alpha(opacity=50); opacity: 0.5; }
#my_image_paragraph_1 p { margin: 0 7px; padding: 5px 0 10px 0; color: white; }
#my_image_paragraph_1 a,
#my_image_paragraph_1 h1,
#my_image_paragraph_1 h2,
#my_image_paragraph_1 h3,
#my_image_paragraph_1 h4,
#my_image_paragraph_1 h5 { color: white; }
#my_image_1 { background: url(/images/test-image.jpg) no-repeat top left; } /* test image ?? wtf ?? */
/* dunno ? maybe my profile maybe image widget? end */

/* calendar css start - should this be in widget css ?? */
.calendar_nav { text-align: center; padding: 1% 2%; font-size: 1.05em; background: #B7DCEB; }
.calendar_nav .next, .calendar_nav .previous { display: block; width: 16px; height: 16px; background: url(../images/cal.png) no-repeat; }
.calendar_nav .next { background-position: -16px -300px; float: right; }
.calendar_nav .next:hover { background-position: -16px -316px; }
.calendar_nav .previous { background-position: 0px -300px; float: left; }
.calendar_nav .previous:hover { background-position: 0px -316px; }
.calendar_nav strong { line-height: 1.6em; }
table.cal_table { border: 1px solid #B7DCEB; margin: 2px 0 0 0; border-collapse: collapse; width: 100%; }
table.cal_table thead { background: #B7DCEB; }
table.cal_table thead th { text-align: center; padding: 0 0 1px 0; font-size: 0.9em; }
table.cal_table tbody td { border: 1px solid #B0BAC8; width: 14%; background: #F4F5F7; }
table.cal_table tbody td span { display: block; background: #F4F5F7; font-size: 1.1em; padding: 2px 3px; font-weight: bold; text-align: center; color: #494949; }
table.cal_table tbody td span a { display: block; color: white; }
table.cal_table tbody .events { background-color: #25AAE1; }
table.cal_table tbody .events span { background: #25AAE1 url(../images/cal.png) left 0px repeat-x; color: white; }
table.cal_table tbody .today { background-color: #E1E2E6; }
table.cal_table tbody .today span { background: #E1E2E6 url(../images/cal.png) left -100px repeat-x; }
table.cal_table tbody .today span a { color: #333333; }
table.cal_table tbody .events.today { background-color: #25AAE1; }
table.cal_table tbody .events.today span { background-color: #25AAE1; }
table.cal_table tbody .inactive { background-color: #C9E6F3; }
table.cal_table tbody .inactive span { background: #C9E6F3 url(../images/cal.png) left -200px repeat-x; color: #999999; }
/* calendar css end */

/* tab menu start */
.tab-content > div {display:none; margin:0 10px;}
.widget_tab_menu.standalone { margin:0 10px; }
.widget_tab_menu.standalone ul { border-bottom:2px solid #ddd; list-style-type: none; }
.widget_tab_menu.standalone ul li a
, .widget_tab_menu.standalone ul li:first-child a { background:#ddd; border-radius:5px 5px 0 0; border:none; margin:6px 3px 0 3px; padding:11px 20px 11px 20px; border-bottom:2px solid #ddd; margin-bottom:-2px; font-size: 1.1em; }
.widget_tab_menu.standalone ul li a:hover { background:#e7e7e7; }
.widget_tab_menu.standalone ul li a.active
, .widget_tab_menu.standalone ul li a.active:hover { background:#fff; border-radius:5px 5px 0 0; border:2px solid #ddd; border-bottom:none; }
/* tab menu end */

/* large calendar start */
table.cal_table.large_cal { font-size: 1em; }
table.cal_table.large_cal tbody td span { padding: 10px 0; }
table.cal_table.large_cal tbody td b.event { display: block; clear: both; font-size: 0.9em; color: white; padding: 0 0 3px 0; text-align: left; border-top: 1px solid #CCCCCC; margin: 0 3px; }
table.cal_table.large_cal tbody td b.details { padding: 0 5px 6px 20px; color: white; font-size: 0.9em; font-weight: normal; }
table.cal_table.large_cal tbody td b.details a { text-decoration: underline; color: white; font-weight: normal; }
table.cal_table.large_cal tbody td .hide, 
table.cal_table.large_cal tbody td .show { display: block; width: 16px; height: 16px; background: url(../images/cal.png) no-repeat; float: left; margin: 0 2px 0 0; cursor: pointer; }
table.cal_table.large_cal tbody td .show { background-position: -32px -300px; }
table.cal_table.large_cal tbody td .show:hover { background-position: -32px -316px; }
table.cal_table.large_cal tbody td .hide { background-position: -48px -300px; }
table.cal_table.large_cal tbody td .hide:hover { background-position: -48px -316px; }
/* large calendar end */

/* bubble css start - not sure if help bubble or user bubble ? */
.bubble_anchor { position: relative; }
.bubble { visibility: hidden; position: absolute; top: 0; left: -50px; }
.bubble ul { padding: 0 10px 3px 10px; margin: 0 0 0 10px; }
.bubble ul li { white-space: nowrap; }
.bubble .topleft { height: 6px; margin-right: 15px; background: url(../images/cal.png) 0px -400px no-repeat; }
.bubble .topright { width: 15px; height: 6px; float: right; background: url(../images/cal.png) right -400px no-repeat; }
.bubble .middleleft { margin-right: 15px; background: url(../images/cal.png) 0px -406px no-repeat; overflow: hidden; }
.bubble .middleright { background: url(../images/cal.png) right -406px no-repeat; overflow: hidden; min-width: 110px; max-width: 300px; max-height: 170px; }
.bubble .bottomleft { height: 20px; margin-right: 15px; background: url(../images/cal.png) 0px -580px no-repeat; }
.bubble .bottomright { width: 15px; height: 20px; float: right; background: url(../images/cal.png) right -580px no-repeat; }
/* bubble css end */

/* taxonomy [?] start */
li.hover { border: 1px solid #cccccc; } /* way to generuc a rule ! */
/* taxonomy [?] end */

/* smells like admin start */
#widgets_not_in_use .widget_item { float: left; background-color: #D2F1FC; width: 150px; border: 1px solid #CCCCCC; margin-left: 20px; margin-right: 20px; }
.widget_item, .header_nav_item, .footer_nav_item { background-color: #D2F1FC; width: 150px; }
ul#col1_widgets, ul#col2_widgets, ul#col3_widgets { min-height: 20px; border: 5px solid #CCCCCC; width: 152px; margin-left: 0; padding: 0; list-style: none; min-height: 30px; }
div#widgets_not_in_use { min-height: 30px; border: 1px solid #CCCCCC; position: relative; margin-bottom: 10px; overflow: hidden; display: inline-block; }
div#widgets_not_in_use { display: block; }
ul#widgets_not_in_use,
ul#header_nav_list_use,
ul#header_nav_list_nuse,
ul#footer_nav_list_use,
ul#footer_nav_list_nuse { margin-left: 0; padding: 0; list-style: none; min-height: 30px; }

.combined_admin_page_widget_layout #row_1, .combined_admin_page_widget_layout #row_2 { border: 1px solid #CCCCCC; clear: left; }
.combined_admin_page_widget_layout #row_1 .float, .combined_admin_page_widget_layout #row_2 .float { float: left; margin-left: 20px; }
.combined_admin_page_widget_layout #column_1 { clear: left; float: left; margin-left: 20px; }
.combined_admin_page_widget_layout #column_2,
.combined_admin_page_widget_layout #column_3 { float: left; margin-left: 20px; }
.combined_admin_page_widget_layout #widgets_not_in_use { min-height: 30px; }
.combined_admin_page_widget_layout h3 { margin-top: 5px; }
#col_2 h3, #col_2 p { clear: none; } /*scary suspect this should only be for admin but will have knockon everywhere ! */
.combined_admin_widget_add h3, .combined_admin_widget_add p { clear: left; }

#addadbsource { clear: left; }
.admin_form_container { margin: 0 auto 15px 30px; }
.ds_left { width:35%; float:left; border-right: 2px solid #DAE7EC;}
.ds_middle { float:left; width:48%; margin-left:2em; margin-right:2em; height:100%; }
.right { float:right; list-style:none; }
.right_link_actions{ list-style:none; clear:right; }
.right h3{ }
/* smells like admin end */

/* admin and non-admin start */
.required_field:after {display:inline; font-weight:bold;color:#CC0000;content: ' *'}
.required_field_legend {color: #696969; margin-left: 4px} /* this is our grey 1 but leaving it explicit due to rule above */

/* admin and non-admin end */

.pi_widget_menu {background: #DDDDDD; font-size: 1.1em; margin: 0 0 2px; padding: 0;}
.pi_widget_menu .tabbed_items{list-style: none; margin: 0; padding: 5px 0 0 5px; height: 27px;}
.pi_widget_menu .tab_item{float: left; display: block; height: 27px;}
.pi_widget_menu .tab_item a{padding: 0 15px; margin: 0; display: block; height: 27px; line-height: 30px; text-decoration: none; font-weight: bold;}
.pi_widget_menu .tab_item.active{background: url(/core/public/images/user_profiles/tab-right.png) no-repeat right top transparent;}
.pi_widget_menu .tab_item.active a{color: #000;padding:0 11px 0 15px;	margin: 0 11px 0;background: url(/core/public/images/user_profiles/tab-left.png) no-repeat left top transparent;}

a.has-bubble { position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; }
a.has-bubble span { display: none; }
a.has-bubble:hover span.tooltip { margin:10px; position: relative; padding: 10px 0 0 10px; bottom: 0; background: url('/core/public/images/balloon.gif') no-repeat bottom left; text-align: left; }
a.has-bubble:hover span { display: block; }
a.has-bubble:hover span.bubble-middle { position: relative; bottom:25px; } /* different middle bg for stretch */

#skip_nav,
#skip_nav li {position: absolute; left: 5px; top: 5px; z-index:1001; width: 250px;}
#skip_nav li a {position: absolute; top: -205px; color: #fff; background-color: #000; display:inline-block; width: auto; transition: top .1s ease-in;padding: 0.4rem;border-radius: 0.2rem;}
#skip_nav li a:focus {top: 0; transition: top .1s ease-in;}

#widget_list_nav { position: relative; }

.dir_admin_cms input.editable_text,
.div_admin_cms div.editable_text,
.dir_admin_cms .admin_field .field_edit div.editable_text {min-height:1.35em;background:#d9d9d9 !important; border: solid 1px #c7cbd4; padding:.2em}
.dir_admin_cms div.editable_text:hover,
.dir_admin_cms input.editable_text:hover,
.dir_admin_cms .admin_field .field_edit div.editable_text:hover {background:#d9d9d9 !important; border-color: #fff #7b7e85 #7b7e85 #fff}

.detail_key {height:28px; background:#eee; color:#333; border-radius: 3px; margin-right: 6px; padding: 4px 8px; }
h2.screenname {font-weight:normal; font-size:1.2em;padding-top:20px;}
hr.profile_separator {box-shadow: 0 3px 3px #BBBBBB;-moz-box-shadow: 0 3px 3px #BBBBBB;-webkit-box-shadow: 0 3px 3px #BBBBBB; height: 2px; margin-bottom: 20px; margin-right: 20px; }


/* html validation fixes show none */
.display_none { display:none; }

.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

.min-width-800 { min-width: 800px; }

#cookie_overlay { position: fixed; z-index: 1001; width:100%; display: block; left: 0; bottom: 0; background-color: #333; color: #FFF;}
#cookie_overlay a { color: #FFF; text-decoration: underline; }

/* share_modal START */
#share_modal #share_video_time { width: 100px; }
#share_modal #share_link_input
, #share_modal #embed_link_text { cursor: pointer; }
/* share_modal END */

#change_your_password_container {max-width: 620px;}
#change_your_password_container #password_change_button {margin-top: 22px;}
#change_your_password_container #change_your_password_paragraph {margin-bottom: 20px;}
#change_your_password_container .change_your_password_input_label {text-align: left; width: auto; margin-left: 24px;}

.state .badge {display:block; background:#666; color:#E6E6E6; width:40px; height:40px; padding:6px 14px 14px 6px; line-height:40px; border-radius:50%; float:left; font-size:1.3em; text-align: center; margin:10px 5px 10px 10px;}
.state.done .badge {color:#f0ff49; background:#454545;}

.tab-content .state h2 {float:left;}

.box-controls {text-align:right; padding: 10px 15px 15px; border-top: 2px solid #e4e4e4;}

/* I2Web adaptation overlay CSS */
/*
.pi_widget { position: relative; }
*/
.structured_links { position: relative; margin: 20px; padding: 10px; background-color: #FFFFFF; border-radius: 6px; }
.structured_links li { list-style: none outside none; }
.overlay_adaptation { position: absolute; width: 99%; height: 97%; opacity: 1; font-size: xx-large; z-index: 1; color: black; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; text-align:center;
	vertical-align: middle; min-height: 10%; float: left; top: 0; left: 0; filter: alpha(opacity=80); -moz-opacity:1; background: rgb(238, 221, 130); /* RGBa with 0.6 opacity */ background: rgba(238, 221, 130, 0.8);
	border:1px solid red; }


/* 2019Style .basic_table { max-width: 700px; } */
.basic_table { border: solid 1px #D5D5D5; margin-bottom: 1rem; width: 100%; }
.basic_table th
, .basic_table td { border: solid 1px #D5D5D5; padding: 0.5rem; }
.basic_table  th { background-color: #F8F8F8; }

/* pi_error div */
div.pi_error {border-radius: 8px;border-width: 4px; border-style: double;background: #fff; display:inline-block; padding:1.5em 2em;font-size: 1.2em;}
div.pi_error h3 {font-size: 1.2em; text-shadow: 2px 2px #DDD;}

/* jPicker css fixes (for bootstrap / html5 / css3 START */
.jPicker * { box-sizing: content-box; line-height: normal; font-family: Arial, Helvetica, sans-serif !important; }
.jPicker label { margin-bottom: 0; }
.jPicker hr { margin-bottom: 6px; margin-top: 6px }
.jPicker.Container { white-space: nowrap;}
.jPicker .Button { white-space: normal;}
/* jPicker css fixes (for bootstrap / html5 / css3 END */

/* responsive css start */
@media screen and (max-width: 1200px) {
	/* responsive for admin menu start */
	#main_menu.admin_menu .navbar-section ul li { font-size: 1em; }
	#main_menu.admin_menu ul li a { padding: 0 10px; }
	#main_menu.admin_menu ul li.image_slot a { padding: 0; }
	/* responsive for admin menu end */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
	/* responsive for admin menu start */
	#main_menu.admin_menu ul li a { font-size: 0.90rem; }
	/* responsive for admin menu end */
}
@media screen and (max-width: 768px) { 
	/* responsive for fixed header menu start */
	
	/* responsive for fixed header menu end */
	.combined_portal_hidden { margin-left: 20px; margin-right: 20px; }
	.filter
	, .message_flash { margin-right: 0px; }
	/* remove nav menu logo and reduce height */
	#main_menu.admin_menu ul li { line-height: 40px; white-space: nowrap; }
	.method_manage_my_details .pi_widget div.activities_under{ display: inline-block; margin-left: 46px; }
	
	/* join / login page */
	#pi_widget_content_static_login .columns  div.col-half { width:100%; float:left; }
	
	/* responsive for fixed header menu end */
}

/* responsive css end */


/********************* Start accessibility statement page **********************/
.third_party_testing_container_img { width: 164px; }
.third_party_testing_container_txt { margin-left: 174px; }
.method_accessibility_statement #zoonou_logo { width: 50% }
/********************* End accessibility statement page **********************/


/* Default custom css rules START */
/* there is a mirror of this block in widget css but prepended by .pi_widget */
/* the actual custom css file contains both these sets of rules - and should be kept in sync */

/* Default custom css rules - to be overriden */
/* custom body font-family */
body.pi_sunshine_page
, div.pi_sunshine_page
, .pi_sunshine_page button:not(.vjs-button)
, .pi_sunshine_page input
, .pi_sunshine_page select
, .pi_sunshine_page textarea
, .pi_sunshine_page .cs_body_font_family {
	font-family: Arial,Helvetica,sans-serif;
}
/* custom menu font-family */
.pi_sunshine_page .cs_menu_font_family {
	font-family: Arial,Helvetica,sans-serif;
}
/* custom menu font-family */
.pi_sunshine_page .cs_heading_font_family {
	font-family: Arial,Helvetica,sans-serif;
}
/* custom background flat */
.pi_sunshine_page .cs_background_flat {
	background-color: #444444;
}
.js .cs_hover_group:hover .cs_background_flat,
.js .cs_hover_group:focus .cs_background_flat {
	background-color: #666666;
}
.js .cs_hover_group:active .cs_background_flat {
	background-color: #888888;
}
/* custom background gradient */
.pi_sunshine_page .cs_background_grad {
	background: #444444; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDJmMmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #444444 0%, #342f2c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#342f2c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #444444 0%,#342f2c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #444444 0%,#342f2c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #444444 0%,#342f2c 100%); /* IE10+ */
	background: linear-gradient(top,  #444444 0%,#342f2c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#342f2c',GradientType=0 ); /* IE6-8 */
}
.ie9 .pi_sunshine_page .cs_background_grad {
	filter: none;
}
/* custom background gradient top */
.pi_sunshine_page .cs_background_grad_top {
	background-color: #444444;
}
/* custom border */
.pi_sunshine_page .cs_border_flat { 
	border-color: #444444;
}
a
, .cs_link_colour
, .cs_link_colour_hover:hover {
	color: #444444;
}
a:hover
, a:focus:not(.btn):not(.alert-link)
, .cs_hover_group:hover a
, .cs_hover_group:focus a {
	color: #666666;
}
a:active
, .cs_hover_group:active a {
	color: #888888;
}

/* item highlight colour e.g. cookie modal */
.pi_widget .cs_item_highlight {
	background-color: #F2F2F2;
}

/* custom menu font colour */
.pi_sunshine_page .cs_menu_font_colour
, .pi_sunshine_page a.cs_menu_font_colour {
	color: #FFFFFF;
}
/* custom menu border colour - from menu font colour */
.pi_sunshine_page .cs_menu_border_colour {
	border-color: #FFFFFF !important;
}

/* light touch BOOTSTRAP4 override START - match their selector as we load after ! */

/* buttons start */
.btn-primary {
	background-color: #444444;
	border-color: #444444;
}
.btn-primary:hover {
	background-color: #666666;
	border-color: #666666;
}
.btn-primary:focus
, .btn-primary.focus {
	background-color: #666666;
	border-color: #666666;
	box-shadow: 0 0 0 .2rem rgba(68,68,68,0.5);
}
.btn-primary.disabled
, .btn-primary:disabled {
	background-color: #444444;
	border-color: #444444;
}
.btn-primary:not(:disabled):not(.disabled).active
, .btn-primary:not(:disabled):not(.disabled):active
, .show > .btn-primary.dropdown-toggle{
	background-color: #888888;
	border-color: #888888;
}
.btn-primary:not(:disabled):not(.disabled).active:focus
, .btn-primary:not(:disabled):not(.disabled):active:focus
, .show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(136,136,136,0.5);
}

.btn-link {
	color: #444444;
}
.btn-link:hover {
	color: #666666;
}
.btn-link:active { /* bootstrap does not have this - but it is needed to look like a link ! */
	color: #888888;
}

.btn-outline-primary {
	color: #444444;
	border-color: #444444;
}
.btn-outline-primary:not(:disabled):not(.disabled):hover {
	background-color: #444444;
	border-color: #444444;
}
.btn-outline-primary.focus
, .btn-outline-primary:focus {
	box-shadow: 0 0 0 .2rem rgba(68,68,68,0.5);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color: #444444;
}
.btn-outline-primary:not(:disabled):not(.disabled).active
, .btn-outline-primary:not(:disabled):not(.disabled):active
, .show > .btn-outline-primary.dropdown-toggle {
	background-color: #888888; /* bootstrap uses link_colour here ! */
	border-color: #888888; /* bootstrap uses link_colour here ! */
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus
, .btn-outline-primary:not(:disabled):not(.disabled):active:focus
, .show > .btn-outline-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(136,136,136,0.5); /* bootstrap uses link_colour here ! */
}
/* buttons END */

/* badges START */
/* Badges, badges, we don't need no stinking badges man! */
.badge-primary {
	background-color: #444444;
}
a.badge-primary:hover
, a.badge-primary:focus {
	background-color: #666666;
}
/* badges END */

/* dropdown START */
.dropdown-item:focus
, .dropdown-item:hover {
	color: #FFF !important;
	background-color: #444444;
}
/* dropdown END */

/* pagination START */
.page-link {
	color: #444444;
}
.page-link:hover {
	color: #666666;
}
.page-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(68,68,68,0.25);
}
.page-item.active .page-link {
	background-color: #444444;
	border-color: #444444;
}
/* pagination END */

/* light touch BOOTSTRAP4 override END */

/* Default custom css rules END */