@charset "utf-8";
/* CSS Document */

html,
body {
   margin:0;
   padding:0;
	min-height:100%;
}

html {
  height: 100%;
}


body {
	font-family:'klavika_lightplain', Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	color: #000;
	background:#f5f5f5;
	font-size: 80%;
	text-rendering: optimizeLegibility;
	min-height: 100%;
	}

body#login {
	background-color: #fff;
	height:auto;
	min-height:auto;
}



input, textarea, select {
	font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
	font-size:1em;
	}

input[type="text"]:read-only, input[type="text"]:disabled {
	background-color: rgba(0,0,0,0.1) !important;
}

html > body input[type="text"]:read-only {
	background-color: #fffcf9 !important;
	cursor: pointer;
}

#logincontent input[type="text"]:read-only, #logincontent input[type="text"]:disabled {
    color: #666;
    background-color: #ddd!important;
}

input[type="checkbox"], .formitem input[type="checkbox"] {
    width: 26px!important;
    height: 26px!important;
	display:inline-block;
    /*box-shadow: inset 0px 0px 12px rgba(0,0,0,0.1)!important;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin:0 5px 0 0;
	vertical-align: middle;
}

input[type="checkbox"]:checked, .formitem input[type="checkbox"]:checked,
input.checker:checked, .formitem input.checker:checked {
    background-image: url(../images/tick_smaller.png);
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: none;
}

/*
PC: Hey Lou this is me with a mad idea that means that when a label comes next after a checkbox
then it switches to inline-block and aligns to the middle.
I've also set vertical-align:middle to input[type=checkbox] above to make it behave better. If this
is a terrible idea please tell me off!!
 */
input[type="checkbox"] + label, .formitem input[type="checkbox"] + label {
	display: inline-block;
	vertical-align: 0;
	width: auto;
    padding: 8px 4px 0 0;
}

h1 {
    margin: 0 0 20px 0;
    font-weight: 400;
    font-size: 2.2em;
    text-transform: uppercase;
    font-family:'klavika_lightplain', Arial, Helvetica, sans-serif;
}

#logincontent h1 {
    margin: 25px 0;
    font-weight: normal;
    font-size: 2em;
    text-align: center;
}

#maincont h1 strong {
	font-weight: normal;
}

h2, #search_area h2, .api_doc h3 {
    font-size: 2em;
    clear: both;
    color: #000;
}

ul, ol {
	margin: 0;
	padding: 0;
}

ul.bullets {
	line-height: 1.2em;
    list-style: none outside none;
	list-style-type:circle;
}

ul.bullets li {
    margin: 0 0 10px 0;
    padding: 0 0 0 15px;
}

ul#email_placeholders li {
	width:46%;
	display:inline-block;
}

form {
	margin:0;
	padding:0;
}

a {
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}

strong[onclick] {
	cursor: pointer;
}

strong[onclick] > img {
	vertical-align: middle;
}

a:hover {
	text-decoration:none;
}

a.further_info, a.further_info:hover,
strong[onclick].further_info {
	text-decoration: underline;
	text-decoration-style: dotted;
}

h2.nomt, h3.nomt, p.nomt {
	margin-top:0;
}

p {
	line-height:1.6em;
}

#wrapper {
	min-height:100%;
   position:relative;
}


#loginwrapper {
    width: 90%;
    max-width: 860px;
    margin: 36px auto;
    background-color: #f5f5f5;
    box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 10%);
	border:1px solid #ccc;
}

#loginwrapper a {
	text-decoration:none;
	padding:0 0 2px 0;
	border-bottom:2px solid #ffc510;
}

#loginwrapper a:hover {
	border-bottom:0;
}

#content, #header .full, #footer .container, #toplinks .container, #nav_left ul  {
	width:90%;
	margin:0 auto;
	max-width:1600px;
}

#content {
	padding-bottom:60px;   /* Height of the footer */
	padding-top:20px;
	background-color:#fff;
	font-size:1.2em;
}

body#api #content {
	clear:both;
}

#fullcont {
	padding:20px 40px;
}

#loginpage {
	padding:15px 25px 30px 25px;
}

#logincontent {
	padding:0 25px 25px 25px;
	font-size:1.2em;
}


#logincontent .formitem {
	width:50%;
	float:left;
	margin: 0 0 20px 0;
}

#logincontent .formitem.full {
	width:100%;
}

#logincontent .formitem.full input {
    width: 56%;
}

#logincontent .buttons {
	width:100%;
	float:left;
}

#logincontent input.btn, #logincontent .btn, .planner_controls a.btn, a.add_btn, input.btn01, .btn01, table a.editbtn, table a.exportbtn, table a.btn02, table a.add_btn, table a.btn01, table input.btn01, .formitem input.btn, .formitem input.btn01, a.btn, a.btn1 {
    display: inline-block;
    background-color: #616161;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    float: none;
    width: auto!important;
    font-size: 1.1em;
    padding: 0 30px;
    cursor: pointer;
    height: 48px;
}

#logincontent input.btn#log {
    background-image: url(../images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: 90% center;
    background-size: 22px;
    padding: 0 50px 0 30px;
}

#logincontent input.btn#log:hover {
    background-image: url(../images/arrow-right-yellow.png);
}

input.btn01, .btn01 {
	padding:0 16px;
}

input.btn.margt, input.btn01.margt {
	margin-top:16px!important;
}

.margl, input.btn01.margl, input.btn.margl {
	margin-left:5px!important;
}

a.btn.copybtn {
    display: block;
    float: left;
	line-height:2.6em;
	padding:0 15px;
	height:38px;
}

#logincontent .btn:hover, #logincontent input.btn:hover, input.btn02:hover, a.add_btn:hover, input.btn01:hover, .btn01:hover, table a.editbtn:hover, table a.exportbtn:hover, table a.btn02:hover, table a.add_btn:hover, table a.btn01:hover, table input.btn01:hover, a.btn:hover {
	text-decoration:none;
   color:#ffc510;
	border:1px solid #f5f5f5;
	}

#logincontent .btn.margt {
	margin-top:22px!important;
}

#logincontent label{
	padding:0;
	float:none;
	width:100%;
}

#header {
    width: 100%;
    background: #ffc510;
    -webkit-box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    z-index: 5000;
    position: relative;
}

#header.api_header {
    width: 100%;
    min-height: auto;
    float: left;
}

#loginheader {
	margin: 0;
}

#main_nav {
	width:100%;
	margin: 0;
	padding: 0;
	clear: both;
	margin-top:-50px;
	float:left;
}

#main_nav .login a {
	color:#fffffe;
}

#main_nav .login a:hover {
	text-decoration:none;
}

#main_nav .links{
	width:100%;
	padding:0;
	float:left;
	text-align:center;
}

#main_nav .links ul {
    padding: 0;
    list-style-type: none;
    display: inline-block;
    width: 90%;
    margin: 0 auto;
    max-width: 1600px;
    /* background-image: url(../images/nav-bg.png); */
    background-position: left 50px;
    background-repeat: repeat-x;
    text-align: center;
    background-color: #fff;
    z-index: 50;
}

#main_nav .links li {
    display: inline-block;
    margin-right: 0.2%;
    min-width: 11%;
    z-index: 6000;
    position: relative;
}

#main_nav .links li:last-of-type {
	margin-right:0;
}

#main_nav .links li a {
	color:#000;
	background-color:#ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration:none;
	display:block;
	text-align: center;
	font-size: 1.3em;
	padding: 50px 9.5px 10px 9.5px;
	font-weight:bold;
	margin:0;
	background-repeat:no-repeat;
	background-position:center 12px;
    border:1px solid #999;
}

#main_nav .links li.selected a, #main_nav .links li a:hover {
	background-color:#fff;
	border:1px solid #fff;
}

#main_nav .links li a.home {
	background-image: url("../images/home_icon_01.png");
}

#main_nav .links li a.projects {
	background-image: url("../images/projects_icon.png");
}

#main_nav .links li a.inspections {
	background-image: url("../images/inspections_icon.png");
}

#main_nav .links li a.reports {
	background-image: url("../images/reports_icon.png");
}



#toplinks {
    margin: 0;
    text-align: right;
    padding: 0;
    width: 100%;
    color: #fff;
    float: right;
	background-color:#3c3c3c;
}

#toplinks a {
	padding-left:20px;
	display: block;
	float: left;
	color:#fff;
	}

#toplinks ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: right;
	display:block;
	width: auto;
}

#toplinks li {
	float:left;
	margin: 0 22px 0 0;
	display: block;
	background-repeat:no-repeat;
	background-position:left center;

}

#toplinks li.countdown {
	background-image:url(../images/timeicon.png);
	padding:10px 0 10px 22px;
}

#toplinks li.header_system_time_override {
	padding:10px 0 10px 0;
}

#toplinks li.loggedin {
	background-image:url(../images/loggedin_icon.png);
	padding:10px 0 10px 22px;
}

#toplinks li.changepass {
	background-image:url("../images/changepass_icon.png");
	padding:10px 0 10px 22px;
}

#toplinks li.logout {
	background-image:url(../images/logout_icon.png);
	padding:10px 0 10px 22px;
	margin-right:0;
}

#toplinks li a {
	text-decoration:none;
	padding: 0;
	white-space: nowrap;
}

#toplinks li a:hover, #toplinks li a.selected {
	text-decoration:underline;
}

#toplinks li.location_selection {
	padding: 10px 0 10px 22px

}

#toplinks li.location_selection label {
	display: inline-block;
    float: left;
	padding: 5px 4px 0 0;
}

#toplinks li span  {
    padding: 5px 0 0 0;
    display: block;
}

#toplinks li.location_selection strong  {
    padding: 5px 0 0 0;
    display: inline-block;
}

#toplinks li:last-of-type, #toplinks #big_link_buttons li:last-of-type {
	margin-right:0;
}

#toplinks form {
	display:inline-block;
}

#toplinks #big_link_buttons ul {
	margin:10px 0 0 0;
}

#toplinks #big_link_buttons li {
	margin:0 10px 0 0;
}

#toplinks #big_link_buttons li a {
    background-color:transparent;
    border: 1px solid #ffefd7;
    padding: 7px 15px 7px 32px;
    border-radius: 4px;
	color:#ffefd7;
	background-position: 6px center;
	background-repeat:no-repeat;
	background-size:18px;
}

#toplinks #big_link_buttons li.calls a {
    background-image:url("../images/call_list_icon.png");
}

#toplinks #big_link_buttons li.new a {
    background-image:url("../images/new_icon.png");
}

#toplinks #big_link_buttons li.volunteer a {
    background-image:url("../images/volunteer_icon.png");
}

#toplinks #big_link_buttons li.visitor a {
    background-image:url("../images/visitor_icon.png");
}

#toplinks #big_link_buttons li.sms_new a {
    background-image:url("../images/texts_icon.png");
}

#toplinks #big_link_buttons li.report_review a {
    background-image:url("../images/review_report.png");
}

#toplinks #big_link_buttons li a:hover {
   background-color: #580000;
   text-decoration:none;
}

#toplinks #big_link_buttons li a.header_widget_alert {
   background-color: #ce273a;
	color:#fff;
	border:1px solid #fff;

}

#toplinks #big_link_buttons li a.header_widget_alert:hover {
   background-color: #af001b;
}

#toplinks #big_link_buttons li.calls a.header_widget_alert {
    background-image:url("../images/call_list_icon_white.png");
}

#toplinks #big_link_buttons li.sm_snew a.header_widget_alert {
   background-image:url("../images/texts_icon_white.png");
}

#toplinks #big_link_buttons li.report_review a.header_widget_alert {
   background-image:url("../images/review_report_white.png");
}



select#switch_location_id {
    height: auto;
    padding: 4px 5px;
}

#logo {
	float:left
}

#logo a img {
	border:0;
}

#loginheader #logo {
	float:none;
}

#maincont, .infolayer, .boxsection {
	padding: 15px;
	border:1px solid #ccc;
}


.boxsection h2:first-of-type, .boxsection .api_doc h3:first-of-type {
	margin-top:0;
}


#scrollable_layer #maincont {
	padding:0;
	-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
    -moz-box-shadow: 0 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 0 rgba(0,0,0,0);
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.boxborder {
	padding:15px;
	border:1px solid #ccc;
	background-color:#fff;
}

.infolayer {
	background-image: url(../images/infolayer_icon.png);
    background-repeat: no-repeat;
    background-position: 99% 10px;
    position: relative;
	margin:25px 0;
}

#fullcont.landing .infolayer, #content.dash .infolayer {
	padding:0;
	background-image:none;
	border-radius:4px;
}

#fullcont.landing .infolayer h2, #content.dash .infolayer h2 {
	margin:0;
	color:#333;
	padding:10px;
}

#content.dash .infolayer {
	position:relative;
}

#content.dash .infolayer.margb {
	margin-bottom:15px;
}

#content.dash .infolayer #daily_notes_add_btn {
	display:block;
	width:29px;
	height:29px;
	background-image: url(../images/plus_icon.png);
	position:absolute;
	top:12px;
	right:60px;
	text-indent:-99999px!important;
	cursor:pointer;
}

#fullcont.landing .infolayer h2, #fullcont.landing .number, #content.dash .infolayer h2, #content.dash .infolayer .number {
	font-size:1.4em;
	display:inline-block;
	font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
}

#fullcont.landing .number, #content.dash .infolayer .number {
	background-color:#fff;
	color:#666;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
	border-radius: 0.8em;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
	display:none;
}


#fullcont.landing .infolayer a.header, #content.dash .infolayer a.header {
	display:block;
	text-decoration:none;
	padding:3px 10px;
}

#fullcont.landing .infolayer.margb {
	margin-bottom:25px;
}

.help_area_inner {
	padding:10px;
}

#logincontent .hideinfo button.nav-toggle, #logincontent .showinfo input.nav-toggle, #logincontent a.toggle {
    display: block;
    margin: -5px 0 0 0;
    border: 0!important;
    font-size: 1em;
    padding: 0;
    cursor: pointer;
}

#logincontent a.toggle {
    position: absolute;
    top: 20px;
    right: 45px;
}

#logincontent .infolayer h2 {
	margin:0;
	font-weight:normal;
	font-size:1.3em;
}


#maincont h1 {
	margin: 0;
	padding: 0;
	float:none;
}

#maincont h1 strong {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

#maincont .hidden_list h2 {
	font-size:1.2em;
	margin: 6px 0px;
	clear:both;
	padding:0px;
	color:#333233;
}

.formitem, .formitem_third  {
	margin: 0 0 15px 0;
}

.formitem.nomb {
	margin:0;
	padding:0;
}

#scrollable_layer .formitem, #scrollable_layer .formitem_third  {
	margin: 0 0 12px 0;
}

.formitemnh {
	min-height:auto;
	padding-bottom:15px;
}

.formitem a.calendar_style img, a.calendar_style img {
    float: left;
    margin-top: 0;
	margin-right:2px;
	width:30px;
	height:auto;
}

.formitem span.calendar_fromto_pad {
	float: left;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: .7em;
}

.formitem label, .formitemfull label, .formitem_third label, .formitem380 label {
	padding:0 10px 4px 0;
	display: block;
}

.formitem label.leftlabel, .text_info .formitem label {
	width:auto;
	display:inline-block;
	padding:4px 6px 0 0;
	vertical-align: top;
}

.text_info .formitem label.fulllabel {
	padding-bottom:4px;
}

.formitem label.error_label {
	color:#901601;
	font-style:italic;
	font-weight:bold;
}

.formitem label.match {
	color: #458B00 ;
	font-style:italic;
	font-weight:bold;
}

.formitem label.match + input, .formitem label.match + select, .formitem label.match + textarea {
	border:1px solid #458B00;
}

/*
 * Hey Lou, Paul here! I've updated the errorStyle function so that it does some additional stuff when you set the 'error'. In addition
 * to setting .error_label on the label, it also looks in the HTML for any div.formitem that is wrapping the label. If it finds one it
 * also sets .error_formitem on the wrapper div. This means that it can be much smarter and works better for date of birth fields which
 * have 3 text inputs for DD, MM, YYYY
 */
.formitem label.error_label + input, .formitem label.error_label + select, .formitem label.error_label + textarea,
.formitem.error_formitem input, .formitem.error_formitem select, .formitem.error_formitem textarea {
	border:1px solid #e61e26;
	background-color:#fff7e6;
}

#logincontent .formitem label.error_label {
	color:#e71d26 ;
}

#logincontent .formitem label.error_label + input{
	border:1px solid #e61e26;
}

.radio_buttons {
	float: left;
}

.formitem_third {
	width:33%;
}

.formitem_quarter {
	width: 25%;
	float:left;
}

label.checkerlabel {
    width: auto;
    padding: 3px 10px 5px 0;
    float: left;
}

label.check_label {
	padding-top:8px!important;
}

.formitem_third input.big_checker, .formitem input.big_checker {
	height: 18px;
	width: 18px;
}

.formitem label.left, .formitemfull label.left, .formitem380 label.left {
	text-align: left;
}

.formitem input, .formitem select, .formitem textarea, .formitemfull input, .formitemfull select, .formitemfull textarea, #planner tr.header input, input, select, textarea {
	border:1px solid #676767;
	font-size:1em;
	padding:0 1%;
	height:42px;
	background-color: #fffcf9;
	font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
}

.formitem select, .formitemfull select, select {
	height:40px;
}

textarea, .formitem textarea, .formitemfull textarea {
	padding:12px 1%;
}

select option {
	background-color:#fff!important;
}

.formitem input, .formitem textarea, .formitemfull input, .formitemfull textarea, .formitem.half textarea.fulltext {
	width: 94%;
}

.half .formitem.twothirds input {
    width: 92%;
}

.formitem.full input, .formitem.full textarea, .formitemfull input, .formitemfull textarea {
	width: 96%;
}

.half .formitem.full input, .half .formitem.full textarea, .half .formitemfull input, .half .formitemfull textarea {
    width: 94%;
}

.half .formitem.half

.formitem.full input.checker, .formitemfull input.checker{
	width: 20px;
	height:20px;
}

#client_alert_image_wrapper input#image_path {
	width:80%;
}

.formitem textarea, textarea {
	min-height:120px;
}

input:hover, textarea:hover,
input:focus, textarea:focus, select:hover, select:focus {
	border:1px solid #ccc;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}


.formitem select, .formitemfull select, .half .formitem.full select {
    width: 96.5%;
    height: 40px!important;
    padding: 0;
}

.half .formitem.half select {
	width:92.5%;
}

.half .formitem.half input {
	width:90%;
}

.formitem.full select, .formitemfull select {
	width: 98%;
}

.formitem.search select {
	width:50%;
	float:left;
}

.formitem.search input {
	width:48%;
	float:left;
}

.formitem input.smaller_input, .formitem select.smaller_input {
	width: 36%;
    margin-right: 1%;
    float: left;
	min-width:200px;
}

.formitem select.smaller_input {
	width: 38%;
}

.formitem select.mini_input {
	width:90px;
}

.formitem input.med_input, .formitem textarea.med_input {
	width:68%;
}

.formitem select.med_input, .half .formitem.full input.med_input, .half .formitem.full select.med_input {
	width:70%;
}

.formitem a.erase_style, .formitem a.erase_style2 {
	margin-left:5px;
}

.formitem input.exsmall, .formitem select.exsmall, .formitem textarea.exsmall, .formitem label.exsmall {
	width:100px!important;
	float: left;
	margin: 0 2px 0 0;
}

.formitem select.exsmall {
	width:102px;
}

.formitem input.daysmall, .formitem select.daysmall, .formitem label.daysmall, table input.daysmall, .half .formitem select.daysmall {
	width:36px!important;
	float: left;
	text-align:center;
}

.formitem input.yearsmall, .formitem select.yearsmall, .formitem label.yearsmall {
	width:82px!important;
	float: left;
	margin: 0 2px 0 0;
}

.formitem select.daysmall, .half .formitem select.daysmall {
	width:55px!important;
}

.formitem label.exsmall {
	width:auto;
}

.red {
	color:#8b0d01;
}

tr.red td {
	background-color: #f1cecf;
}

.buttonsfull {
	width:100%;
	float:left;
	text-align: right;
	margin: 12px 0;
	padding: 0;
}

.buttonsfull input {
	margin:0 0 5px 3px;
	min-width:86px;
}

.buttons_full_right {
	margin-top:10px;
	margin-right:5px;
}

.margt {
	margin-top:19px;
}

.padl {
	padding-left:15px;
}


.formitem.search input.btn01 {
	float:left;
	margin:0 0 0 5px;
	width:auto;
}

a.btn01, a.btn01a, a.editbtn, a.exportbtn, a.btn02, #alert_inner_layer a.btn, a.button, a.btn1 {
    padding: 0 25px;
    /* height: auto; */
    line-height: 2.8em;
}

input.btn01:hover, a.btn01:hover, input.btn01a:hover, a.btn01a:hover, input.btn02:hover, input.btn03:hover, a.editbtn:hover, a.exportbtn:hover, a.btn02:hover, #alert_inner_layer a.btn:hover, a.button:hover {
	text-decoration:none;
	background-size:100%!important;
	-webkit-transition: background-size 0.3s ease-out;
 	-moz-transition: background-size 0.3s ease-out;
  	-o-transition: background-size 0.3s ease-out;;
 	 transition: background-size 0.3s ease-out;
}

.btn01.smlp {
	padding:0 6px!important;
}


a.btn01a {
	float:none;
	}

a.editbtn, a.exportbtn, a.btn02 {
	display:inline-block;
	}

a.minusmarg {
    float: none;
    margin-top: -10px;
    margin-left: 15px;
    display: inline-block;
}

.mandatory {
	color:#990000;
	font-weight:bold;
}

.negative {
	color:#990000;
	font-weight:normal;
}

.messages {
	 display:block;
	 margin:10px 0px;
	 padding:10px;
	 background-color:#efefef;
	 color:#990000;
	 border:1px solid #990000;
}


#maincont.sections fieldset {
	border: 1px dotted #ccc;
	margin: 15px 0 0 0;
	padding: 10px 0;
}

#maincont.section {
	border: 1px dotted #ccc;
	margin: 0 0 10px 0;
	padding: 20px 0 15px 0;
	width:98%;
}

#maincont.sections legend {
	font-weight:bold;
	color: #385c8f;
	padding: 0 6px 0 3px;
	font-size: 1.1em;
	background-color: #FAF8F8;
}

#maincont.sections .formitem {
	margin:5px 0;
	padding: 3px 0;
}

#logincontent label {
	text-align:left;
	line-height: 1.5;
}

input.lrg01, textarea.lrg01, select.lrg01 {
	width:90%;
}

select.extra_lrg {
	width:96%;
}

.clearfix {
	clear:both;
}


/* Update Event items OR calculator */
.req_show {
	position:fixed;
	top:0;
	left:0;
	z-index:240;
	width:100%;
	height:100%;
	background:url(../images/white.png);
	background-repeat:repeat;
}

.arranger {
	background:url(../images/fade_bg.png);
	background-repeat:repeat;
	border:1px solid #CCC;
	width:490px;
	margin:0 auto;
	margin-top:17%;
}


/* To make disabled look nice */

.disabled_style {
	color:#333;
	background-color:#efefef;
	border:1px solid #000;
	width:52%;
}

#loginwrapper p.marg_btm {
	margin-bottom:25px;
}

#wrapper p.error, #loginwrapper p.error {
	padding:5px;
	border:1px dotted #8b0d01;
	color:#8b0d01;
	text-align:center;
}

#loginwrapper p.error {
    padding: 5px;
    border: 1px dotted #fee5cd;
    color: #fee5cd;
}

em.grey {
	font-style:normal;
	}

.borderb {
	padding:0 0 15px 0;
	margin: 0 0 10px 0;
	border-bottom:1px dotted #ccc;
	width:100%;
	float:left;
	clear:both;
	}

.noborder {
	padding:0 0 15px 0;
	margin: 0 0 10px 0;
	/*border-bottom:1px dotted #ccc;*/
	width:100%;
	float:left;
	clear:both;
}

.bordert {
	margin-top:10px;
}

.borderb01 {
	padding:0 0 0 0;
	margin: 0 0 15px 0;
	}

#maincont.fullpage .fullwidth, #content #fullcont .fullwidth, #content .fullwidth  {
	width:100%;
	clear:both;
}

.half {
	width:50%;
	float:left;
	}

.quarter {
	width:25%;
	float:left;
}

.threequarters {
	width:75%;
	float:left;
}

.fifth {
	width:20%;
	float:left;
}

.threeeighths {
	/* Sorry! PC */
	width: 37.5%;
	float: left;
}
.auto {
	width:auto;
	float:left;
}

.eighth {
	/* Sorry! PC */
	width: 12.5%;
	float: left;
}

.halfleft {
	width:49%;
	padding-right:1%;
}

.halfright {
	width:49%;
	padding-left:1%;
}

.formitem.eighth input.calsmall {
	width:70%;
	min-width: auto;
}

.third {
	width:33.3%;
	float:left;
}

.autowidth {
	width:auto;
	float:left;
}

.third.padt {
	padding-top:20px;
}

.twothirds {
	width:66.6%;
	float:left;
}

.formitem .third input.smaller_input, .formitem .third select.smaller_input {
	width:58%;
}

.formitem.half input.sml_input {
	width:60%;
}

table.details, table.times {
	border:1px solid #ccc;
	margin:0 auto;
	border-collapse: collapse;
	}

table.details_dashboard {
	border:1px solid #ededed;
}

table tr:nth-child(even) td, table table tr:nth-child(even) td {
    background-color: #ffffff;
    border-bottom: 2px solid #fff;
	border-right:1px solid #fff;
}

table tr:nth-child(odd) td {
    background-color: #f5f5f5;
    border-bottom: 2px solid #fff;
	border-right:1px solid #fff;
}

table tr:nth-child(even) td:first-of-type, table table tr:nth-child(even) td:first-of-type, table tr:nth-child(odd) td:first-of-type {
	border-left:1px solid #fff;
}

table.calendar_table tr:nth-child(odd) td, table.calendar_table tr:nth-child(even) td  {
	background-color:#fff;
	border:0;
}

table tr.header.darkgrey, table tr.header.darkgrey td  {
	background-color:#999;
	}

table tr.header.lightgrey td {
	background-color:#e5e5e5;
}

table td.greenbg {
	background-color:#c1d7c0!important;
	padding:0;
	height:6px;
}

table td.yellowbg {
	background-color:#fef1db!important;
	padding:0;
	height:6px;
}

table td.yellowbg-db {
	background-color:#fef1db!important;
}

table tr.header td, table td.header {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
	border-top:1px solid #fff;
    font-weight: bold;
    background-color: #dddddd;
    color: #333;
	vertical-align:middle;
	padding:10px 6px;
}

table tr td.success {
    background-color: #009999!important;
    color: #fff;
}

table tr.inactive td {
	background-color: #EDEDED!important;
	color: #999;
	font-style: italic;
}

table tr td.failed {
    background-color: #cc0033!important;
    color: #fff;
}

tr.rota_header td {
	background-color: #cdcdcc!important;
	border-bottom:1px solid #fff!important;
	padding:10px 6px;
}

tr.rota_header td span {
	display:inline-block;
	vertical-align:top;
}

tr.rota_header td span.next_day, tr.rota_header td span.next_week  {
	float:right;
}

tr.rota_header td span.previous_day, tr.rota_header td span.previous_week   {
	float:left;
}

span.rota_date {
	padding:8px 0 0 0;
}

table td.nopad {
	padding:0!important;
}

table select {
    height: 36px!important;
}

table input {
	height:32px!important;
}

table.details.margb {
	margin-bottom:20px;
}

table tr.header td:first-of-type, table td.header:first-of-type {
    border-left: 1px solid #fff;
}

table tr.header td.last {
	border-right:0;
	}

table td.totals {
	border:1px solid #fff;
	background-color:#fff;
}


table tr.ended_record {
	background-color:#ebe2f6;
}

table tr.bottom_border td{
	border-bottom:1px solid #333;
}

table td {
	padding:6px 6px;
	}


input.greybg {
	background-color:#ebe8e8;
	}

.padb {
	padding-bottom:5px;
	display:block;
	}

.padb1 {
	padding-bottom:15px;
	}

img.borders {
	border:1px solid #999696;
	}

.leftfloat, a.btn1.leftfloat {
	float:left;
	}

.rightfloat {
	float:right!important;
	}

/* additioanl styles */
.button_top {
	margin-top:20px;
}

table.details input.formstyle, table.details select.formstyle, table.details textarea.formstyle {
	border:1px solid #999696;
	font-size:1.0em;
	width: 90%;
}

table.details input.no_top, table.details select.no_top, table.details textarea.no_top {
	margin-top:-3px;
}

table.details input.formstylebigger, table.details select.formstylebigger, table.details textarea.formstylebigger {
	width:97%;
}

table.details textarea.formstyle, textarea.formstyle {
	height:90px;
	overflow:auto;
	margin-bottom:5px;
	width:90%;
	font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
}

textarea.formstyle {
	width:616px;
}

table.details textarea.formstylefull {
	width:100%;
}

table.details td.date_display {
	font-size:0.9em;
	padding-top:5px;
}

table.details input.exsmall, table.details select.exsmall, table.details .textarea.exsmall, select.exsmall, input.exsmall {
	width:72px;
	float: left;
	margin: 0 2px 0 0;
}

table.details td.date_display select.exsmall {
	font-size:1.0em;
	width:48%;
	margin-top:3px;
}

table.details input.medium, table.details select.medium, table.details .textarea.medium {
	width:150px;
	float: left;
	margin: 0 2px 0 0;
	font-size:0.95em;
}

table.details .set_date_field {
	cursor:pointer;
}

input.fileinput, input[file] {
	background-color:#F0F0F0;
	cursor:pointer;
	}

h3 {
	font-size: 1.4em;
	font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
	font-weight:400;
	}


h3.shift_h3 {
	width:auto;
	}

h3.minm {
	margin: 10px 0;
}

.margb {
	margin-bottom:15px;
	}


/* Checkboxes do not need a fixed width */
input.tickbox, input.check {
	margin-top:4px;
	width:auto;
	padding:1px;
}

input.check {
	border:0;
}

.formitem.check_top_margin {
	padding-top: 22px;
}

.odd{
	background-color:#dedddd;
}


.display_text {
	padding:3px 0 0 0;
	float:left;
	width:auto;
}

.errors, .errors a  {
	color:#903;
	}

.errors {
	padding:10px;
	border:1px dotted #903;
	margin:0 0 10px 0;
	}

.errors p, .help_text p {
	margin:0 0 5px 0;
	}

.errors ul, #loginpage ul {
	padding:0 0 0 15px;
	}


#loginpage ul {
	margin-bottom:20px;
	}

#loginpage ul li {
	margin:0 0 3px 0;
	}

#loginpage ul ul {
	margin:8px 0 12px 0;
	}

.overlay_outer {
	width:700px;
	margin:50px auto;
	background:none;
	}

.overlay_inner {
	width:100%;
	padding:10px;
	background-color:#fff;
	border:2px solid #28AE71;
	}

p.right {
	float:right;
	}


/* For BAA Prefixes */
input.three_letters {
	width:40px;
}

input.five_letters {
	width:90px;
	margin-left:4px;
}

 /*For the exporting of results */
.export_buttons {
	display:block;
	clear:both;
	margin-top:15px;
	float:right;
}

.export_buttons_paras {
	margin:0 0 5px 12px;;
	float:right;
}

.buttons_paras {
    float: left;
    width: auto;
    display: block;
}

.buttons_paras p {
	margin-top:0;
}

#nav_left {
   font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
}

#nav_left ul {
	list-style-type:none;
    margin: 0 auto;
    padding: 10px 0 5px 0;
	text-align:center;
	background-color:#fff;
}

#nav_left li a {
   display: block;
    padding: 10px 11px;
    color: #333;
    text-decoration: none;
	border:1px solid #dddddd;
	border-radius:4px;
	background-color:#fff;
}

#nav_left li a:hover, #nav_left li a.selected {
    background-color: #efefef;
	color:#333;
	border:1px solid #333;
}

#nav_left li {
    display:inline-block;
    margin: 2px;
}

#logincontent .formitem br, .erase_style img, #booking_summary_area_special, .hidden, .showmenubtn {
		display:none;
	}

#logo a {
	display:block;
}

#logo img {
    margin: 6px 0 6px 0;
    width: 90px;
    height: auto;
}

#loginheader #logo img {
    margin: 0 auto;
    width: 100px;
    display: inline-block;
}

#maincont .full {
	width:100%;
	}

a.inline_link {
	float:left;
	margin-top:3px;
}

.pad_top {
	display:block;
	padding-top:5px;
}

.overlay_show {
	position:fixed;
	top:0;
	left:0;
	z-index:6000;
	width:100%;
	height:100%;
	background-repeat:repeat;
	background-image: url(../images/white.png);
}

.layer_arranger {
	width:60%;
	margin:3% auto;
	max-width:1340px;
}

.layer_arranger_wider {
	width:80%;
}

.inner_layer {
	width:100%;
	position: relative;
	text-align: left;
	z-index:50;
	background-color: #fff;
	border: 1px solid #ccc;
	max-height:90vh;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.2);
    box-shadow: 0 0 10px rgba(0,0,0,.2);
	}


#scrollable_layer {
    padding: 20px 20px 30px 20px;
    max-height: 80vh;
    overflow: auto;
}

.layer_arranger .inner_layer_wider .graph_scroll {
	height:600px;
	/*background-color: #FFF;*/
	margin-bottom:10px;
	overflow:auto;
}

#scrollable_layer .inner_scroll h2 {
	margin-top:0px;
}

#scrollable_layer .inner_scroll {
	height:370px;
	overflow:auto;
	margin-top:0px;
}

#scrollable_layer .longer_inner_scroll {
	height:450px;
}

.formitem .top_pad {
	float:left;
	margin-top:3px;
}


/* TO replace text elements */
.text_information {
	display:inline-block;
	margin-top:4px;
	/* Paul added these 2 items below to help with formitem clearing - it makes them have the same sort of
	 height as a select or text input */
	min-height: 36px;
	vertical-align: middle;
}

.text_info .text_information {
	min-height:auto;
	vertical-align:inherit;
}

.text_information strong {
	margin-top:3px;
}


.left, .leftfloat {
	float:left;
	}

.rightfloat {
	float:right;
}

.odd {
	background-color: #f6f6f6;
}

.even {
	background-color:#f9f9f9;
	}


/* Mailer report alterations */

.formitemfull .warning, p.warning {
	color:#8b0d01;
}

label.mailer_label {
	float:left;
	overflow:hidden;
	_overflow:visible;
}

/* Apply all outcomes */
select.apply_all {
	margin-right:15px;
	margin-top:0px;
	font-size:0.85em;
	padding:3px;
	background-color:#674889;
	color:#FFF;
}

#overlay_layer .email_template_text {
	width:595px;
	height:460px;
}

#overlay_layer .button_less_margin input{
	margin-right:58px;
}

input.make_readonly {
	background-color:#DDD;
}

input.make_normal {
	background-color:#FFF;
}

.has_notes {
	cursor:help;
}

.close_button a.btn01 {
	margin: 0 auto;
	}


/* Styles for the training coordinators area */

#rows_container_full {
	margin:15px 0 0 0;
}

#rows_container_full .row {
	padding:10px;
}

a.top {
	float:right;
}


/* iFrame fro adding docs */
.load_frame {
	width:100%;
	height:100px;
	margin:0px;
}

iframe#load_window body {
	background-image:none!important;
	background-color:transparent!important;
}

tr.download_row {
	font-size:0.9em;
}

.popup_search_area {
    position: relative;
	background-color: #fff;
    width: 400px;
    padding: 3px;
    border: solid 1px #c6c6c6;
	z-index:5000;
}

#logout_alert {
	padding: 0 4px;
}

#logout_alert p {
    background-color: #fff;
    border-top: solid 1px #ba1f23;
    border-bottom: solid 1px #ba1f23;
    padding: 15px;
    color: #ba1f23;
    font-weight: bold;
	margin: 0;
	text-align:center;
	font-size:1.1em;
}

html body #logout_alert.logout_alert_active {
	display: block;
	padding: 0 4px;
}

.warning {
	border-top: solid 1px #ba1f23;
	border-bottom: solid 1px #ba1f23;
	padding: 0 13px 0;
	color: #ba1f23;
	margin-bottom: 13px;
	text-align: center;
}

/* Calendar styles */
.calendar_overlay_show {
    background-image: url("../images/white.png");
    background-repeat: repeat;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 6000;
}

.calendar_layer_arranger {
    left: 49.5%;
    margin: 5% auto;
    max-width: 350px;
}

.calendar_inner_layer {
    background-color: #fff;
    border: 1px solid #999;
    padding: 0 0 10px;
    text-align: left;
    width: 100%;
    z-index: 50;

    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.4);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.4);
    box-shadow: 0 5px 10px rgba(0,0,0,.4);
}

#calendar_scrollable_layer {
    min-height: 315px;
    padding: 0;
}

#calendar_scrollable_layer table.calendar_table td {
    padding: 6px 5px;
    width: 12%;
}

#calendar_scrollable_layer table.calendar_table tr.calendar_header td {
    background-color: #3c3c3c;
}

#calendar_scrollable_layer table.calendar_table tr.calendar_header input{
    padding: 4px;
    border: 1px solid #fff;
}

#calendar_scrollable_layer table.calendar_table tr.calendar_body td {
	background-color:#f5f5f5;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	}

#calendar_scrollable_layer table.calendar_table td.calendar_prev_next a {
	color:#fff;
	border:0;
	}

#calendar_scrollable_layer table.calendar_table td.calendar_prev_next a:hover {
	text-decoration:none;
	}

#calendar_scrollable_layer table.calendar_table a {
	padding:4px 0;
	color:#333;
	text-decoration:none;
	display:block;
	border:1px solid #ccc;
	}

#calendar_scrollable_layer table.calendar_table a:hover {
	border-top:1px solid #4a2673;
	border-bottom:1px solid #4a2673;
	text-decoration:none;
	}

#calendar_scrollable_layer table.calendar_table a.today:link, #calendar_scrollable_layer table.calendar_table a.today:active {
    border: 1px solid #333;
    background-color: #ffc510;
    text-decoration: none;
    color: #000;
	font-weight:bold;
}

.emergency_contact {
    border: 1px solid #c00;
    background-color: #eee;
    padding: 5px 10px;
    width: auto;
    margin-right: 10px;
	border-radius:6px;
}

.half.right .emergency_contact {
	margin-right:0;
}

#calendar_div select {
    padding: 5px;
    height: auto;
}

.calendar_close_button {
    margin-top: 0;
    padding: 0;
    text-align: center;
}

.calendar_close_button a.btn01 {
    margin: 0 auto;
    font-size: 0.9em;
    padding: 0 10px;
    height: 34px;
    /* line-height: 3em; */
    float: none;
    display: inline-block;
}

.revision_changed {
	font-weight: bold;
	color: #ff0000;
}
.revision_inner_scroll {
	height:500px;
	overflow:auto;
	margin-top:0px;
}

.revision_inner_scroll .fullwidth, .formitem.full_2_btns, .leftcol .fullwidth, .leftcol .formitemfull {
	width: 100%;
}

table.details td.text_direction_vertical {
  /* Something you can count on */
  height: 90px;
  white-space: nowrap;
}

table.details td.text_direction_vertical div {
  transform:
    /* Magic Numbers */
    /*translate(25px, 51px)*/
    /* 45 is really 360 - 45 */
    rotate(270deg);
  	width: 30px;
}

table.details td.old_ie_hack div {
	width:45px;
	word-wrap: normal;
}

table.details td.text_direction_vertical div  span {
  padding: 5px 10px;
}

h3.minm em {
	color:#666;
	font-style:italic;
	font-weight:normal;
}

/* Iframe for image uploader */
.image_upload_iframe {
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
}

#scrollable_layer iframe.image_upload_iframe {
	min-height:500px;

}

table.details td.highlight_error, strong.cancelled_flight {
	font-style:italic;
	font-weight:bold;
	color: #903;
}

table.details td.no_col {
	background-color:#EEE;
	border:0px;
}


#tab_menu_holder {
	display:block;
	width:100%;
	clear:both;
}

.tab_menu_item, .tab_menu_item_exit {
    display:inline-block;
    width: auto;
	min-width:11%;
	margin-bottom:-1px;
}

.tab_menu_item_exit {
	float:right;
}

.tab_menu_item a, .tab_menu_item_exit a {
	display: block;
	padding: 10px 20px;
	text-align:center;
	border: 1px solid #CCC;
	background-color: #DDD;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
	margin-bottom:-1px;
	text-decoration:none;
	color:#666;
	font-family:'klavika_regularplain', Arial, Helvetica, sans-serif;
	margin:0;
    font-size: 1.1em;
}

.tab_menu_item a.selected {
	text-decoration:none;
	background-color:#FFF;
	border-bottom:1px solid #FFF; /* Added as in Chrome shows background as faint 1px grey line */
	color:#000;
}

/* Specific thiongs for this item */
.tab_menu_item_exit a {

}
.tab_menu_item_exit a:hover {
    color: #901601;
    border: 1px solid #901601;
    border-bottom: 1px solid #fff;
	background-color:#f4e7e5;
}

.tab_menu_item a.selected.tab_menu_item_unsaved, .tab_menu_item a.tab_menu_item_unsaved {
    font-weight: bold;
    color: #901601;
    border: 1px solid #901601;
    border-bottom: 1px solid #fff;
	background-color:#f4e7e5;
}

.tab_menu_item a.selected.tab_menu_item_unsaved:after, .tab_menu_item a.tab_menu_item_unsaved:after {
    content: '*';
}

a.save_button_unsaved {
	font-weight: bold;
    color: #901601;
    border: 1px solid #901601;
	background-color:#f4e7e5;
	background-image: none;
}

a.save_button_unsaved:hover {
	font-weight: bold;
    color: #f4e7e5;
	background-color:#901601;
	background-image: none;
}

a.save_button_unsaved:after, a.save_button_unsaved:after {
    content: '*';
}

/* Alert layer styles */

.alert_overlay_show {
   background-image:url(../images/white.png);
    background-repeat: repeat;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9900;
}

.alert_layer_arranger {
    width: 90%;
    max-width: 860px;
    margin: 36px auto 0 auto;
    background-color: #fefefe;
    box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 10%);
    border: 1px solid #999;
}

#alert_inner_layer {
    padding:18px  2.5%;
	position:relative;
}

h1.error {
	background-image:url(../images/alert-icon.png);
	background-repeat:no-repeat;
	background-position:left center;
	padding:5px 0 5px 45px;
}

#alert_inner_layer h2 {
    padding: 5px 0 0 45px;
    margin: 0 0 20px 0;
    font-size: 1.6em;
    color: #000;
    line-height: 1.4em;
    background-image: url(../images/alert-icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    text-transform: uppercase;
}

#alert_scrollable_layer {
    height: 84%;
    margin: 0;
    overflow-y: auto;
    padding: 0;
    text-align: left;
    width: 100%;
}

#alert_scrollable_layer .buttons {
    text-align: center;
	padding:10px 0;
}

#alert_scrollable_layer .buttons a.btn {
    margin:0 3px;
	float:none;
	display:inline-block;
	border:0;
}

#alert_scrollable_layer .fullwidth {
	width:100%;
}

a.button {
	margin: 0 0 5px 0;
	float:left;
}

#alert_inner_layer a.btn:hover {
	text-decoration:none;
	background-color:#666;
}

/* END alert layer */

/* alert layer new styles */

#alert_overlay_close_button.alert_close_button, #overlay_close_button.close_button, #alert_close_button {
    top: -15px;
    position: absolute;
    text-align: center;
    right: -15px;
}

#alert_scrollable_layer .buttons a.btn01 {
    float:none;
}


#alert_scrollable_layer {
    max-height:60vh;
	font-size:1.2em;
}

.leftcol {
	width:75%;
}

.rightcol {
	width:24%;
}

.leftfloat {
	float:left;
}

.halfright, .rightfloat {
	float:right;
}

.half.left, .half.right {
	width:49%;
}

.half.left {
	margin:0 1% 0 0;
}

.half.right {
	margin:0 0 0 1%;
}

.half.borderb {
	clear:none;
}

#notice_overlay_layer .layer_arranger {
    width: 50%;
    margin: 5% auto;
	height: 98%;
    max-width: 1400px;
    position: relative;
	top:auto;
	left:auto;
}

#notice_scrollable_layer{
    padding: 5px 20px 5px 20px;
	height:50vh;
    overflow: auto;
    width: auto;
    position: relative;
}

#notice_scrollable_layer ul.bullets, #notice_scrollable_layer ul.bullets li, #scrollable_layer ul.bullets, #scrollable_layer ul.bullets li {
    color: #903;
    list-style-position: outside;
	list-style-type:circle;
}

#scrollable_layer ul.bullets, #scrollable_layer ul.bullets li {
    color: #000;
}

#notice_scrollable_layer ul.bullets {
    padding: 12px;
}

#scrollable_layer ul.bullets {
    padding: 0 12px;
}

#notice_scrollable_layer .errors {
    padding: 10px;
    border-top: 1px dotted #903;
    border-bottom: 1px dotted #903;
	border-left:0;
	border-right:0;
    margin: 0 0 10px 0;
}

#notice_scrollable_layer ul.bullets li, #scrollable_layer ul.bullets li {
    margin: 0 0 10px 0;
    padding: 0 0 0 10px;
    background-image:none;
}

#notice_scrollable_layer .buttons a.btn01 {
	float:none;
	display:inline-block;
}

#notice_scrollable_layer .buttons {
	text-align:center;
}

.close_button a.btn01, #alert_inner_layer .alert_close_button a.btn, #referral_form_details_holder .btn01.hideareabtn {
    display: inline-block;
    float: none;
    padding: 4px!important;
    height: 30px!important;
    border: 1px solid #999;
    width: 30px!important;
    background-image: url(../images/close.png)!important;
    background-size: unset!important;
    background-color: #ffffff!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
}

#referral_form_details_holder .btn01.hideareabtn {
    text-indent:-99999px;
	top: 6px;
    right: 6px;
    position: absolute;
}

.close_button a.btn01 strong, #alert_inner_layer .alert_close_button a.btn {
    font-weight: normal;
    text-indent: -9999px;
    position: absolute;
	top: -10px;
    right: -10px;
}

#alert_inner_layer .alert_close_button a.btn {
	top: 0;
    right: 0;
}

.close_button a.btn01:hover, #alert_inner_layer .alert_close_button a.btn:hover {
    background-color:#f6f6f6;
}

ul.confirm_buttons {
	list-style-type:none;
	width:100%;
	text-align:center;
	padding:0;
	margin:10px 0;
}

ul.confirm_buttons li {
	display:inline-block;
}

ul.confirm_buttons a.btn01,  #alert_scrollable_layer .buttons a.btn, #scrollable_layer a.btn01, #scrollable_layer .btn01  {
	display: inline-block;
    font-size: 1.1em;
    line-height: 2.8em;
}

#scrollable_layer .btn01  {
    line-height: normal;
}


.formitem.full {
	width:100%;
	float:left;
	clear:both;
}

#overlay_layer .mainsection {
    padding: 1.5%;
    background-color: #fff;
    margin: 0 0 10px 0;
    border:1px solid #999;
}

#scrollable_layer h3.minm {
	width:100%;
	clear:both;
	background-color:transparent;
}

#scrollable_layer h2 {
	margin-top:0;
	margin-bottom:5px;
}

#scrollable_layer h2:first-of-type {
	margin-bottom:15px;
}

#scrollable_layer h2.margt {
	margin:20px 0 10px 0;
}

.unresponsive_tabs h1 {
	margin:10px 0;
}

.buttons a.btn01 {
	float:right;
}

a.btn01.leftfloat {
	float:left!important;
}

.buttons {
    width: 100%;
    display: block;
    padding: 10px 0;
    text-align: right;
}

.formitem.half.buttons, .formitem.quarter.buttons {
    width: 50%;
    display: block;
    padding: 18px 0 0 0;
    text-align: left;
}

.formitem.quarter.buttons {
    width: 25%;
}

.formitem.buttons {
	padding-top:18px;
}

#scrollable_layer .buttons {
    padding: 20px 0 0 0;
}

.help_area_hide {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    max-height: 0px;
}

.help_area {
    transition: opacity 1s, max-height 1s;
    overflow: hidden;
}

.formitem.full_2_btns input.exsmall {
    width: 25%;
}


.footnote {
	font-size: .8em;
}

#notice_scrollable_layer ul.bullets.black li {
	color: #000;
}

/* MIT tooltip styles */
.tip_holder_outer {
	position:absolute;
	width: auto;
	height:auto;
	min-width:200px;
	max-width:380px;
	z-index:1000!important;
	background-color:#fff;
	color:#333;
	border:1px solid #ccc;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";
	filter: alpha(opacity=98);
	opacity: 0.98;
	-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.26);
	-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.26);
	box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.26);
}

.tip_holder_inner {
	padding:10px;
	line-height:normal;
}

.tip_holder_inner h3, .tip_holder_inner table {
	margin-top:0px;
}

.tip_holder_inner table {
	margin:0!important;
	border-top:0!important;
	width:auto!important;
}

.tip_holder_inner table td {
	padding:5px 6px;
	vertical-align:top;
}

.tip_holder_inner h3, .tip_holder_inner h4 {
	margin:4px 0 8px 0!important;
	padding:0!important;
	color:#333;
	font-size: 1.2em;
	font-weight: 400;
}

.tip_holder_inner p {
	margin:3px 0!important;
	padding:0!important;
}

.tip_holder_inner table, .tip_holder_inner table tbody {
	margin:0;
	padding:0;
}

#tip_holder_outer_1 {
	top:60%!important;
	left:40%!important;
}

#tip_holder_outer_2 {
	top:65%!important;
	left:40%!important;
}
/* END MIT tooltip */

table.details {
	width:100%!important;
}

table a.editbtn, table a.exportbtn, table a.btn02, table a.add_btn, table a.btn01, table input.btn01, a.btn01.today, a.btn1 {
    padding: 0 10px!important;
    float: none;
    font-size: 1em;
    margin: 0;
    min-width: 36px;
    height: 30px!important;
    line-height: 2em;
}

table tr.rota_header span {
	vertical-align:top;
}

table tr.rota_header span a.btn01 {
	height:31px!important;
	line-height:2.4;
}

table tr.rota_header span.rota_date01 a.btn01 {
	margin-left:3px;
}

a.btn01.today {
	height: 36px!important;
    line-height: 2.8em;
	vertical-align: top;
	margin-left:5px;
}


table a.editbtn:hover, table a.exportbtn:hover, table a.btn02:hover, table a.add_btn:hover, table a.btn01:hover, table input.btn01:hover, ul.confirm_buttons a.btn01:hover, .calendar_close_button a.btn01:hover, #alert_scrollable_layer .buttons a.btn:hover, #scrollable_layer a.btn01:hover, #scrollable_layer .btn01:hover, a.btn01.today:hover, a.btn1:hover {
	color:#ffc510;
	border:0;
}

.buttonspadt {
	padding-top:20px;
}

.formitem.half .half input.smaller_input {
    width: 72%!important;
}

.formitem.half .half input#from_date.smaller_input, .formitem.half .half input#to_date.smaller_input {
    width: 58%!important;
}

.extra_bottom_margin {
	margin-bottom:18px;
}

tr.manifest_row {
	color: red;
}

/* END planner booking view */

.rel {
	position:relative;
}

textarea.fulltext, textarea.fulltext01, input.fulltext01  {
	width:96%;
}

input.btn01.leftfloat {
    float: left;
    margin: 0 3px 3px 0;
}

input.btn01.leftfloat.margt {
    margin-top:19px;
}

img.margr {
	margin:0 5% 0 0;
}

.email_frame {
    margin-top: 10px;
    background-color: #fff;
    width:100%;
    height: 70vh;
    border: none;
}

/* Nice white box for text previews */
.white_html_box {
	display:block;
	background-color:#FFF;
	padding:5px 10px 5px 10px;
	white-space: pre-wrap;
}

/* Email footer on-page styles */
#preview_email_text {
	position:relative;
	margin: -25% 30% 20% 30%;
	width:600px;
	float:left;
	background-color: #FFF;
	border:1px solid #DDD;
	padding:20px;
	font-size:0.95em;
	border-radius:20px;
	display:inline;
	clear:both;
}

#preview_email_text h3 {
	background-color: #FFF;
	margin-bottom:20px;
	color:#333;
	font-size:1.2em;
}

input.btn01[type=button]:disabled {
	text-decoration:none;
	background:#a3a3a3;
	color: #bbb;
	border-color: #bbbbbb;
}

.inlbl {
	display: inline-block;
}

.vrtmdl {
	vertical-align: middle;
}

.clearnone {
	clear: none !important;
}

a.icon_and_text {
	text-decoration: none;
}

a.icon_and_text img {
	vertical-align: top;
}


a.overlay_link {
	cursor:pointer;
	font-weight:bold;
}

#footer {
    background: #616161;
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    background-image: url(../images/Sika-logo-white.png);
    background-position: 99% center;
    background-repeat: no-repeat;
    background-size: 50px;
}

#footer span {
	display:block;
	color:#fff;
	padding:25px 0;
	float:left;
}

#footer.login_footer {
	display:none;
}


.content_inner {
    padding: 0 20px 20px 20px;
}

.table_wrapper {
	overflow:auto;
	width:100%;
}

/* Loader css */

.save_buttons_loading {
	float:right;
	text-align:right;
}

small {
    position: relative;
    display: inline-block;
    margin: 0 4px;
    width: 8px;
    height: 26px;
    border-radius: 2px;
    border: solid #333;
    border-width: 0 1px 1px 0;
    background: #931901;
    animation: tilt infinite 5s cubic-bezier(0.955, -0.010, 1.000, 1.000);
    transform-origin: 100% 100%;
}

small::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  display: block;
  width: 5px;
  height: 5px;
  background: transparent;
  box-shadow: 0 2px rgba(0,0,0,.3);
  animation: stretch infinite 5s cubic-bezier(0.955, -0.010, 1.000, 1.000);
  opacity: 0;
  transform-origin: 0% 0%;
}

small:nth-child(2),
small:nth-child(2)::before {
  animation-delay: .3s;
}

small:nth-child(3),
small:nth-child(3)::before {
  animation-delay: .6s;
}

small:nth-child(4),
small:nth-child(4)::before {
  animation-delay: .9s;
}

small:nth-child(5),
small:nth-child(5)::before {
  animation-delay: 1.2s;
}

small:last-of-type {
  animation-name: tilt-last;
}

small:last-of-type::before {
  animation-name: stretch-last;
}

@keyframes tilt {
  10% { transform: rotate(70deg) }
  60% { transform: rotate(70deg) }
  70% { transform: rotate( 0deg) }
}

@keyframes tilt-last {
  10% { transform: rotate(90deg) }
  60% { transform: rotate(90deg) }
  70% { transform: rotate( 0deg) }
}

@keyframes stretch {
  10% { transform: rotate(-70deg); width: 10px; opacity: 1; left: 0px; bottom: -1px; }
  60% { transform: rotate(-70deg); width: 10px; opacity: 1; }
  70% { width: 5px; transform: rotate(0deg); opacity: 0; }
}

@keyframes stretch-last {
  10% { transform: rotate(-90deg); width: 10px; height: 2px; opacity: .5; left: 3px; bottom: -1px; }
  60% { transform: rotate(-90deg); width: 10px; height: 2px; opacity: .5; }
  70% { transform: rotate(0deg); width: 5px; height: 5px;opacity: 0;}
}

.loader {
  position: relative;
  display: block;
  margin: auto;
  padding: 0;
  width: 100px;
  height: 15px;
  text-align: center;
}

#sms_details_area .loader, #stats_area .loader, #engagement_area .loader, #sms_sending_details_area .loader, #upcoming_cover_shift_area_loading .loader, #shift_stats_area_loading .loader, #book_supervision_area_loading .loader, #cover_shift_area_loading .loader, #booked_supervision_area_loading {
	text-align:left;
	display:inline-block;
	min-height:184px;
}

#engagement_area .loader small, #cover_shift_area_loading .loader small {
    border: solid #b50029;
    background: #ce273a;
}

#stats_area .loader small, #upcoming_cover_shift_area_loading .loader small {
    border: solid #da6f3b;
    background: #f1814c;
}

#sms_sending_details_area .loader small, #booked_supervision_area_loading .loader small {
    border: solid #a23217;
    background: #ba4a2b;
}

/* PC: Sets up background for any iframes in an overlay_layer */
html body.iframe_bg {
	background-color: transparent !important;
}

html body.iframe_bg h2 {
	margin-top:0;
}

.scrollable_layer_scroller_01 {
	max-height: 296px;
	overflow: auto;
}

table tr.vtop, table tr.vtop td, table tr td.vtop, img.vtop {
	vertical-align: top;
}

.formitem input.calsmall, table tr input.calsmall {
	padding-right: 40px;
	background-image: url(../images/vcalendar.png);
	background-repeat: no-repeat;
	background-position: right 5px center;
	background-size: 25px 25px;
	width: 36%!important;
	cursor: pointer;
	float: left;
	background-color: #fffcf9!important;
	min-width:90px;
}

.formitem input.calsmall.readonly {
	background-color:#e5e5e5!important;
	background-image:none;
}

table tr td[onclick] {
	cursor: pointer;
}

/* TR FOOTER BREAKER - TO ADD A LITTLE BOTTOM BORDER */
table tr.tr_breaker, table tr.tr_breaker > * {
	border-bottom: 4px solid #ddd;
}

table tr.tr_breaker td.tr_breaker_empty {
	height: 0;
	padding: 0;
	box-sizing: border-box;
}

/* BLUE WASH */
table tr.blue_wash {
	background-color: #deedfa;
}

table tr.blue_wash:nth-child(even) td, table table tr.blue_wash:nth-child(even) td,
table tr.blue_wash:nth-child(even) th, table table tr.blue_wash:nth-child(even) th {
	background-color: #deedfa;
}

table tr.blue_wash:nth-child(odd) td,
table tr.blue_wash:nth-child(odd) th {
	background-color: #cadded;
}

/* RED WASH */
table tr.red_wash {
	background-color: #cd2626;
	color:#eee;
}

table tr.red_wash:nth-child(even) td, table table tr.red_wash:nth-child(even) td,
table tr.red_wash:nth-child(even) th, table table tr.red_wash:nth-child(even) th {
	background-color: #cd2626;
}

table tr.red_wash:nth-child(odd) td,
table tr.red_wash:nth-child(odd) th {
	background-color: #ee2c2c;
}

table tr.high_priority_wash:nth-child(odd) td, table tr.high_priority_wash:nth-child(even) td,
table tr.high_priority_wash, table tr.high_priority_wash td, table td.high_priority_wash {
	background-color: #f1cecf!important;
}

/* viewing_call_highlight - class added by JS to call list */
table tr.viewing_call_highlight:nth-child(odd) td, table tr.viewing_call_highlight:nth-child(even) td,
table tr.viewing_call_highlight, table tr.viewing_call_highlight td, table td.viewing_call_highlight {
	background-color: #C1FFC1!important;/*#B4EEB4!important;*/
}

td.comms_success {
    color: #333;
    font-weight: bold;
    background-color: #def3eb!important;
}

td.comms_failed{
	background-color:#fadede!important;
	font-weight:bold;
	color:#8b0d01;
}


.fullwidth_object {
	min-height: 600px;
	width: 100%;
}

span.dash {
    float: left;
    padding: 10px 4px;
}

#api-doc {
    float: right;
    color: #fff;
    font-size: 2em;
    padding: 35px 0;
}

.api_menu {
    width: 90%;
	border:1px solid #ccc;
}

.api_menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.api_menu li {
    border-bottom: 3px solid #fff;
	display:block;
}

.api_menu li a {
	background-color: #fffbf7;
	padding:10px;
	text-decoration:none;
	display:block;
}

.api_menu li.selected_menu a, .api_menu li a:hover {
	background-color:#fef2e5;
}


.api_menu h2 {
    background-color: #cdcdcc;
    padding: 10px;
    margin: 0;
    color: #000;
	font-size:1.1em;
	font-weight:bold;
}

body#api .boxsection table {
	width:100%;
}

body#api .boxsection ul table {
	width:95%;
}

body#api #fullcont {
    padding: 0 20px;
}

body#api ul.bullets {
    line-height: 1.2em;
    /* list-style: none outside none; */
    list-style-type: circle;
    padding: 0 0 0 15px;
}

body#api ul.bullets li {
    margin: 0 0 10px 0;
    padding: 0;
}

table td.start_time_label, table td.end_time_label {
	min-width:100px;
}

label.leftlabel, label#new_message_text {
    width: auto;
    display: inline-block;
    padding: 0 0 5px 0;
}

#char_user {
    display: inline-block;
    padding: 0 0 5px 0;
	float:left;
}

#credit_cost {
	display: inline-block;
    padding: 0 2% 5px 0;
	float:right;
}

#add_sms_message_holder textarea {
	width:96%;
}

#char_user strong {
    color: #333;
}

.instructions {
    background-color: #e9f4e9;
    padding: 6px 15px;
    margin: 0 0 15px 0;
    border: 1px dashed #127612;
}

.volunteer_photo_upload_panel {
	width: auto;
	display: inline-block;
}

.volunteer_photo_upload_panel img {
	display: block;
	margin: 0 auto 5px;
	 border: 1px solid #ccc;
}

.volunteer_photo_upload_panel .volunteer_photo_upload_buttons {
	text-align: center;
}

.volunteer_photo_upload_panel .volunteer_photo_upload_buttons input[type=button] {
	float: none;
	display: inline-block;
}

td.td_left {
    text-align: left;
    padding-left: 10px!important;
}

td.td_right {
    text-align: right;
    padding-right: 10px!important;
}

td.td_right a.btn01, #scrollable_layer td.td_right a.btn01, span.next_day a.btn01, #scrollable_layer span.next_day a.btn01, span.next_week a.btn01, #scrollable_layer span.next_week a.btn01 {
    background-repeat: no-repeat!important;
    background-image: url(../images/next_arrow.png)!important;
    background-position: 92% center!important;
    padding-right: 30px!important;
}

span.next_week a.btn01, #scrollable_layer span.next_week a.btn01 {
	margin-right:4px;
}

td.td_left a.btn01, #scrollable_layer td.td_left a.btn01, span.previous_day a.btn01, #scrollable_layer span.previous_day a.btn01, span.previous_week a.btn01, #scrollable_layer span.previous_week a.btn01 {
    background-repeat: no-repeat!important;
    background-image: url(../images/previous_arrow.png)!important;
    background-position: 8% center!important;
    padding-left: 30px!important;
}

span.previous_week a.btn01, #scrollable_layer span.previous_week a.btn01 {
	margin-left:4px;
}

td.td_centre  {
	text-align: center;
}

td.td_centre input.calsmall {
    float:none!important;
	width:auto;
	max-width: 90px;
	background-color:#fffcf9!important;
}

a#appt_filters_hide_btn, a#appt_filters_show_btn {
	background-repeat:no-repeat;
	color:#8d2500;
	text-decoration: none;
	font-size:1.1em;
	font-weight:bold;
	margin-top:15px;
	display:block;
	background-position:right center;
	padding:8px 30px 8px 0;
}

a#appt_filters_show_btn {
	background-image:url("../images/arrow_up.png");

}

a#appt_filters_hide_btn {
	background-image:url("../images/arrow_down.png");
}

.buttons_right input.btn01, .buttons_right a.btn01 {
	margin-left:4px;
}

td#start_time_label, td#end_time_label {
	min-width: 100px!important;
    white-space: nowrap!important;
}

.text_info_warning{
	background-color:#f9e9e7;
	border:1px dashed #d14e36;
	padding:6px 16px;
}

.formitem label.numberlabel {
	padding-right: 0;
    width: 90px;
	text-align:center;
}

.text_information.numbertext {
display: inline-block;
    margin-top: 0px;
    min-height: 36px;
    vertical-align: middle;
    clear: both;
    float: left;
    width: 80px;
    text-align: center;
    font-size: 1.1em;
}

.text_information.numbertext strong {
    margin-top: 12px;
    display: block;
}

td.wspre {
	white-space: pre;
}

.click_span {
	cursor:pointer;
	display:block;
}

#referral_form_details_holder {
    position: fixed;
    top: 0.5%;
    left: 5.5%;
    background-color: #fff;
    padding: 1.5%;
    width: 86%;
    border-radius: 8px;
    border: 1px solid #999;
    -webkit-box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 56%);
    -moz-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.56);
    box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 56%);
}

#referral_form_details_holder .formitem {
    margin: 0 0 10px 0;
}

#referral_form_details_holder .btn01 {
    padding: 0 10px;
    height: 30px;
    line-height: 2.2em;
    font-size: 1em;
}

#referral_form_details_holder .btn01.hidebtn {
    background-color: #ce273a;
    background: #ce273a!important;
	border:1px solid #af001b;
}

#referral_form_details_holder .btn01.hidebtn:hover {
	background-color: #af001b;
	background: #af001b!important;
}

#previous_next_holder.buttons_right {
	text-align:right;
}

.circle {
    display: inline-block;
    background-color: #ce273a;
    height: 24px;
    width: 24px;
    border: 1px solid #fff;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1em;
    line-height:1.7em;
	font-weight:bold;
}


.circle.review {
	background-color: #666;
}

.circle.assessment {
	background-color: #999;
}

.circle.cover {
	background-color: #009999;
}

.circle.cover_needs_cover {
	background-color: #FF781F;
}

.call_info_holder {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #bbb;
    text-align: center;
	background-color:#eee;
}

.refresh_countdown .call_info_holder {
	background-color:#80ad87;
	border:1px solid #5f9367;
	color:#fff;
}


.call_info_holder strong {
    line-height: 2.2em;
    font-size: 1.1em;
}

#counter_area.boxsection  {
	padding:8px 15px;
	text-align:center;
}

#counter_area .fifth {
	width:auto;
	float:none;
	display:inline-block;
	margin:0 4%;

}

#counter_area .fifth:first-of-type {
	margin-left:0;
}

#counter_area .fifth.refresh_countdown  {
	margin-right:0;
}

#counter_area label {
	display:inline-block;
	padding-right:3px;
}

.padlock, .pick_up_call, .release_call, .tick {
    text-indent: -99999px;
    background-size: 26px;
	height:30px;
    background-repeat: no-repeat;
    background-image: url(../images/padlock-icon.png);
	background-position:center center;
}

.padlock:hover, .traffic_light img:hover, .tick:hover {
		cursor:help;
}

.pick_up_call {
    background-image: url(../images/pick-up-call-icon.png);
}

.release_call {
    background-image: url(../images/release-call-icon.png);
}

.tick {
    background-image: url(../images/call_tick_icon.png);
}

.pick_up_call a, .padlock a, .release_call a {
	display:block;
	height:30px;
	width:100%;
}

.traffic_light img {
	width:22px;
	height:22px;
}

img.notes {
	height:26px;
	width:auto;
}


.traffic_light {
	text-align:center;
}

table.lesspad td {
    padding: 3px 6px;
}

.clear_date {
    position: relative;
    display: inline-block;
    width: 100%;
}

.clear_date a.clear_date_button {
    cursor: pointer;
    position: absolute;
    display: inline-block;
    height: 29px;
    width: 29px;
    right: 3px;
    left: 109px;
}

.formitem .clear_date input.calsmall {
    padding-right: 40px;
    background-image: url(../images/vcalendar.png);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    float: left;
    background-position: 85px center!important;
    width: 150px!important;
    background-color: #fffcf9!important;
    max-width: 150px!important;
    box-sizing: border-box;
	height:40px;
}

.clear_date a.calendar_style.erase_style01, .clear_date a.calendar_style.erase_style02 {
    cursor: pointer;
    position: absolute;
    display: inline-block;
    height: 29px;
    width: 29px;
    left: 115px;
    bottom: 6px;
}

table .clear_date a.calendar_style.erase_style01,  table .clear_date a.calendar_style.erase_style02 {
    bottom: 3px;
}

.clear_date.smaller_input a.calendar_style.erase_style01 {
    cursor: pointer;
    position: absolute;
    display: inline-block;
    height: 29px;
    width: 29px;
   left:65%;
    bottom: 6px;
    right: 24%;
}

.clear_date a.calendar_style.erase_style02 {
    left: 89%;
}

.half .formitem.half .clear_date a.calendar_style.erase_style02 {
    left: 78%;
}

.formitem.third .clear_date a.calendar_style.erase_style02 {
    left: 88%;
}

.formitem.quarter .clear_date a.calendar_style.erase_style02 {
    left: 82%;
}

.years_nav ul, #homepage_nav_tabs ol {
	margin:0 0 15px 0;
	padding:0;
	list-style-type:none;
}

.years_nav li, #homepage_nav_tabs li {
	display:inline-block;
	border-right:1px solid #666;
	font-size:1.2em;
	margin-right:12px;
	padding-right:14px;

}

.years_nav li:last-of-type, #homepage_nav_tabs li:last-of-type {
	border-right:0;
}

.years_nav li a, #homepage_nav_tabs li a {
	padding:0 0 3px 0;
	text-decoration:none;
	border-bottom:2px solid #ccc;
}


.years_nav li a:hover, .years_nav li a.selected, #homepage_nav_tabs li a:hover, #homepage_nav_tabs li a.selected {
	border-bottom:2px solid #333!important;
	color:#333;
}

.years_nav li a:first-of-type, #homepage_nav_tabs li a:first-of-type {
	padding-left:0;
}

#upcoming_cover_shift_area, #cover_shift_area  {
	padding-right:8px;
}

#booked_supervision_area, #book_supervision_area, #dbs_warning_area{
	padding-left:8px;
}

h3.circle_h3 {
	line-height:2.3em;
}

h3.shifts_worked, h3.absences, h3.cover_shifts {
	padding:0 25px 0 24px;
	background-repeat:no-repeat;
	background-position:left center;
	background-size:18px;
}

h3.shifts_worked {
	background-image:url("../images/shifts_worked_icon.png");
}

h3.absences {
	background-image:url("../images/absences_icon.png");
}

h3.cover_shifts {
	background-image:url("../images/cover_shifts_icon.png");
	background-size:27px;
	padding:0 0 0 32px;
}

span.number_circle {
	border:1px solid #bbb;
	border-radius:50%;
	width:40px;
	height:40px;
	display:inline-block;
	text-align: center;
	background-color:#eee;
	margin-left:5px;
}


#dbs_warning_area .dbs_expiry_lozenge {
    padding: 15px;
    background-color: #f1f1f1;
    border: 1px solid #333;
}

#dbs_warning_area .buttons {
	padding:0;
}

#dbs_warning_area h2 {
	margin:0 0 5px 0;
}

#dbs_warning_area p {
	margin:9px 0 3px 0;
}

.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.arrowright {
  -webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.arrowleft {
  -webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

/* Turns out our own CSS sabotages our tooltip library */
#WzTtDiV table tr > td {
	background-color: transparent !important;
}

/* Master rota tables */

#master_rota_table table {
	border: none;
	border-collapse: separate;
}


#master_rota_table table.details tr td {
    border-bottom: 1px solid #999;
    border-right: none;
    border-left: 1px solid #cdcdcd;
    border-top: 0;
    padding: 4px;
    background-color: #FFF;
}

#master_rota_table table.details tr.header td {
	border-bottom: none;
	border-top: 1px solid #999!important;
	background-color: #ddd;
	text-align:left;
}

#master_rota_table table.details tr.header.header_weeks td, #master_rota_table table.details tr.header.header_times td, #master_rota_table table.details tr.header.header_normal td {
	text-align:center;
}

#master_rota_table table.details tr td:first-of-type {
	border-left: 1px solid #999;
}

#master_rota_table table.details tr:last-of-type td {
	border-bottom: 1px solid #999;
}

#master_rota_table table.details td.days {
	border: none;
	padding:3px;
}

#master_rota_table table.details tr.header td.is_day, #master_rota_table table.details tr.header.header_weeks td  {
	border-bottom:1px solid #999!important;
	border-top:1px solid #999!important;
	background-color: #ddd;
	vertical-align: middle;
}

#master_rota_table table.details tr.header td.is_day  {
	border-top:0!important;
}

#master_rota_table table.details tr.header.header_weeks td  {
	border-bottom:0!important;
	text-transform:uppercase;
	background-color: #ccc;
}

#master_rota_table table.details tr.header.header_weeks td:first-of-type, #master_rota_table table.details tr.header.header_normal td:first-of-type, #master_rota_table table.details tr.header.header_times td:first-of-type  {
	border-left:1px solid #999!important;
}


#master_rota_table table.details tr.header.header_normal td  {
	background-color:#eee;
	border-left:1px solid #cdcdcd!important;
	border-bottom:1px solid #999!important;
}

#master_rota_table table.details td:nth-child(2n+1), #master_rota_table table.details tr.header.header_normal td:nth-child(2n+1), #master_rota_table table.details tr.header.header_times td, #master_rota_table table.details tr.header.header_weeks td {
  border-right: 1px solid #cc0066!important;
}

/*#master_rota_table table.details tr.header.header_weeks td, #master_rota_table table.details tr.header.header_times td:nth-child(3), #master_rota_table table.details tr.header.header_normal td:nth-child(7), #master_rota_table table.details td:nth-child(7) {
  border-right: 2px solid #cc0066!important;
}*/

#master_rota_table table.details tr.header.header_weeks td.end_of_week, #master_rota_table table.details tr.header.header_times td.end_of_week, #master_rota_table table.details tr.header.header_normal td.end_of_week, #master_rota_table table.details td.end_of_week {
	border-right: 2px solid #cc0066!important;
}

#master_rota_table table.details tr.header td:last-of-type, #master_rota_table table.details tr td:last-of-type {
	border-right: 1px solid #999!important;
}

#master_rota_table table.details td:nth-child(2n+1):last-of-type, #master_rota_table table.details tr.header.header_normal td:nth-child(2n+1):last-of-type, #master_rota_table table.details tr.header.header_times td:last-of-type, #master_rota_table table.details tr.header.header_weeks td:last-of-type {
  border-right: 1px solid #999!important;
}

#master_rota_table table.details td.first_col {
	border-left:1px solid #CCC; /* First of a bank of six cols for a 'slot' so make it darker? */
}

#master_rota_table table.details td.last_col {
	/* border-right: none; /* So we dont end up with a double border? */
}

#master_rota_table table.details td.dark_purple {
	background-color: #9370DB;
	color: #FFF;
}

#master_rota_table table.details td.light_purple {
	background-color: #E6E6FA;
	color:#9370DB;
}

#master_rota_table table.details td.light_grey {
	background-color: #EFEFEF;
	color:#888;
	font-style: italic;
}

#master_rota_table table.details td.light_blue {
	background-color: #0099CC;
	color: #FFF;
}

#master_rota_table table.details td.light_pink {
	background-color: #ffe6e9;
	/*color: #FFF;*/
}

#master_rota_table table.details td.light_green {
	background-color: #d8fbdc ;
}

#master_rota_table table.details td.light_yellow {
	background-color: #FFFF99;
}

#master_rota_table .circle {
    height: 18px;
    width: 18px;
    font-size: 0.9em;
    line-height: 1.8em;
}

/* Sticky table styles */

.sticky_table_wrapper {
	overflow: auto;
	width: 100%;
	max-height: 60vh;
}

table.sticky_details {
	white-space: nowrap;
	margin: 0;
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	/*table-layout: fixed;*/
	min-width: 700px;
}

table.sticky_details thead td,
table.sticky_details thead th {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 25vw;
}

table.sticky_details tbody th {
	font-weight: 100;
	font-style: italic;
	text-align: left;
	position: relative;
}


table.sticky_details thead td.sticky_header,
table.sticky_details thead td.sticky_header_right {
	z-index:60;
}

table.sticky_details tbody td.sticky_header,
table.sticky_details thead td.sticky_header {
	position: sticky;
	left: 0;
}

table.sticky_details tbody td.sticky_header_right,
table.sticky_details thead td.sticky_header_right {
	position: sticky;
	right: 0;
}

/*
table.sticky_details thead td:nth-child(2).sticky_header,
table.sticky_details tbody td:nth-child(2).sticky_header{
  left: 95px;
}

*/

table.sticky_details tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
}


/* New report overlay */
.report_overlay_show {
	position:fixed;
	top:0;
	left:0;
	z-index:940;
	width:100%;
	height:100%;
	background-repeat:repeat;
	background-image: url(../images/white.png);
}

.report_layer_arranger {
	width:75%;
	margin:3% auto;
	max-width:1340px;
}

.report_inner_layer {
	width:100%;
	position: relative;
	text-align: left;
	z-index:50;
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.2);
    box-shadow: 0 0 10px rgba(0,0,0,.2);
	}


#report_scrollable_layer {
    padding: 8px;
}

#report_scrollable_layer .inner_scroll h2 {
	margin-top:0px;
}

#report_scrollable_layer .inner_scroll {
	height:370px;
	overflow:auto;
	margin-top:0px;
}

#report_scrollable_layer .longer_inner_scroll {
	height:450px;
}

#report_scrollable_layer h2.nomt:first-of-type {
	padding:24px 12px 10px 12px;
	margin-bottom:0;
}

#report_scrollable_layer .buttons_paras {
	padding:0 12px;
}

#report_scrollable_layer .export_buttons_paras, #report_scrollable_layer .export_buttons {
	padding:0 6px;
}

#header_sticky .buttons_paras {
	float:none;
	width:100%;
}

#header_sticky .export_buttons_paras, #footer_sticky .export_buttons {
    float: none;
    text-align: right;
	margin:0;
}

#header_sticky .export_buttons_paras input.btn01, #footer_sticky .export_buttons input.btn01, .export_buttons_paras input.btn01, .export_buttons input.btn01 {
	height:32px
}

#header_sticky, #footer_sticky {
    padding:15px;
}

#header_sticky {
    padding-bottom:5px;
}

#footer_sticky {
    padding-top:5px;
}

@media screen and (max-height: 700px) {
	.sticky_table_wrapper {
    max-height: 42vh;
}
}

/* //END new report overlay */

@font-face {
    font-family: 'klavika_lightplain';
    src: url('../css/fonts/klavika_light_plain-webfont.eot');
    src: url('../css/fonts/klavika_light_plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/klavika_light_plain-webfont.woff2') format('woff2'),
         url('../css/fonts/klavika_light_plain-webfont.woff') format('woff'),
         url('../css/fonts/klavika_light_plain-webfont.ttf') format('truetype'),
         url('../css/fonts/klavika_light_plain-webfont.svg#klavika_lightplain') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'klavika_mediummedium';
    src: url('../css/fonts/klavika_medium_medium-webfont.eot');
    src: url('../includesfonts/klavika_medium_medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('../includes/klavika_medium_medium-webfont.woff2') format('woff2'),
         url('../css/fonts/klavika_medium_medium-webfont.woff') format('woff'),
         url('../css/fonts/klavika_medium_medium-webfont.ttf') format('truetype'),
         url('../css/fonts/klavika_medium_medium-webfont.svg#klavika_mediummedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'klavika_regularplain';
    src: url('../css/fonts/klavika_regular_plain-webfont.eot');
    src: url('../css/fonts/klavika_regular_plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/klavika_regular_plain-webfont.woff2') format('woff2'),
         url('../css/fonts/klavika_regular_plain-webfont.woff') format('woff'),
         url('../css/fonts/klavika_regular_plain-webfont.ttf') format('truetype'),
         url('../css/fonts/klavika_regular_plain-webfont.svg#klavika_regularplain') format('svg');
    font-weight: normal;
    font-style: normal;
}