/* include reset */
@import url("/css/reset.css");
@import url("/css/fonts.css");

html, body { font-family: 'source_sans_prolight',sans-serif; margin:0; padding:0; height:100%; color:#333; }
table { border-collapse: collapse; border-spacing: 0; width:100%; font-size:1em; }
.backstretch { opacity: 0.05; }
body { font-size: 14px; background: #fff; } /* for IE and Firefox */
textarea:focus, input:focus { outline:0; }
/* chrome BS */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	background-color: #000;
    transition: background-color 5000s ease-in-out 0s;
	-webkit-text-fill-color: #2974b3;
}
button:focus {outline:0;}
input, textarea {
    font-family: 'source_sans_prolight',sans-serif;
    font-size: 14px;
    border: 1px solid #979797;
    background: none;
    color: #979797;
    padding: 5px 10px;
    margin: 2px 0 10px 0 !important;
    width: 760px;
}
.ck-editor__editable_inline {
    min-height: 200px !important;
}
.ck.ck-editor {
	margin-bottom: 50px !important;
}
p, h2, h3 {
    margin: 0 0 10px 0;
    padding: 0px;
    width: 100%;
    display: inline-block;
}
.smart-forms .switch > .switch-label {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.green {
	color: #75ab00;
}
.red {
	color: #f44336;
}
body {
	position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

body:after{
      content:"";
      position:fixed; /*// stretch a fixed position to the whole screen*/
      top:0;
      height:100vh; /*// fix for mobile browser address bar appearing disappearing*/
      left:0;
      right:0;
      z-index:-1; /*// needed to keep in the background*/
      background:  url( '/img/background.jpg' ) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      opacity: 0.05;
}

/* message boxes */
.msg_report { background:#2974b3; color:#FFF; padding:20px; z-index:1; position:fixed; margin: 0 auto; top:10px; left:0; right:0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); font-family: 'source_sans_prolight', sans-serif; font-size: large; min-width: 10%; max-width: 20%; }
.msg_error { background:#CC1B1B; color:#FFF; padding:20px; z-index:1; position:fixed; top:10px; margin: 0 auto; top:10px; left:0; right:0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); font-family: 'source_sans_prolight', sans-serif; font-size: large; min-width: 10%; max-width: 20%; }

.main-content {
	margin: 0 auto;
	max-width: 1440px;
	min-width: 1070px;
}
.main-content .content {
	display: inline;
	float: left;
	max-width: 1170px;
	padding: 40px 0 0 40px;
}

/* styled site links */
a {
	color: #333;
}
a.add_button:link,
a.add_button:active,
a.add_button:visited,
a.red_button:link,
a.red_button:active,
a.red_button:visited,
a.green_button:link,
a.green_button:active,
a.green_button:visited {
	cursor: pointer;
	font-family: 'source_sans_proextralight',sans-serif;
	background: #2974b3;
	padding: 10px 20px 0;
	height: 40px;
	float: right;
	display: inline;
	margin: 0 0 20px 0;
	border:none;
	color: #000;
	font-size: 16px;
}
.add_button,
.red_button,
.green_button {
	cursor:pointer;
	font-family: 'source_sans_proextralight',sans-serif;
	background:#2974b3;
	padding:10px 20px;
	float:right;
	display:inline;
	margin:0 0 20px 20px !important;
	border:none;
	color:#fff !important;
	font-size:16px !important;
	text-align:center;
}
a.red_button:link,
a.red_button:active,
a.red_button:visited,
.red_button {
	background:#f44336;
}
a.green_button:link,
a.green_button:active,
a.green_button:visited,
.green_button {
	background:#008a05;
	float:left;
	margin:0 20px 20px 0 !important;
}
.add_button:disabled,
.red_button:disabled,
.green_button:disabled {
	opacity: 0.5;
}
.invoice a.add_button.pdf-button,
.timesheet a.add_button.pdf-button {
	margin: 0 20px 20px 0 !important;
}

.cross i {
	float: right;
	font-size: 36px;
	color: #555;
}

/* three position toggle button */
	.toggle_radio {
		position: relative;
		background: #2974b3;
		margin: 4px 0;
		overflow: hidden;
		padding: 0 !important;
		position: relative;
		height: 25px;
		width: 82px;
		overflow: hidden
	}
	.toggle_radio > * {
		float: left;
	}
	.toggle_radio input[type=radio] {
		cursor: pointer;
		opacity: 0;
		position: relative;
		z-index: 99;
		width: 25px;
		height: 25px;
		float: left;
		display: inline;
		margin: 0 2px 0 0 !important;
	}
	.toggle_radio label {
		color: #FFF;
		display: block;
		width: 25px;
		height: 25px;
		line-height: 25px;
		margin: 0 2px 0 0;
		font-size: 12px;
		cursor: pointer;
		text-align: center;
		-webkit-touch-callout: none; /* iOS Safari */
	    -webkit-user-select: none; /* Safari */
	     -khtml-user-select: none; /* Konqueror HTML */
	       -moz-user-select: none; /* Old versions of Firefox */
	        -ms-user-select: none; /* Internet Explorer/Edge */
	            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome, Edge, Opera and Firefox */
	    position: relative;
		top: -25px;
		font-weight: bold;
		font-family: Helvetica, Arial, sans-serif;
	}
	.toggle_option_slider {
		width: 19px;
		height: 19px;
		position: absolute;
		top: 3px;
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
		-o-transition: all .4s ease;
		-ms-transition: all .4s ease;
		transition: all .4s ease;
		-webkit-border-radius: 1px;
	    -moz-border-radius: 1px;
	    -o-border-radius: 1px;
	    border-radius: 1px;
	}

	.first_toggle:checked ~ .toggle_option_slider {
		background: #fff;
		left: 3px;
	}
	.first_toggle:checked ~ .toggle_option_slider:after {
		content: "0";
	}
	.second_toggle:checked ~ .toggle_option_slider {
		background: #fff;
		left: 31px;
	}
	.second_toggle:checked ~ .toggle_option_slider:after {
		content: "0.5";
	}
	.third_toggle:checked ~ .toggle_option_slider {
		background: #fff;
		left: 60px;
	}
	.third_toggle:checked ~ .toggle_option_slider:after {
		content: "1";
	}
	.first_toggle:checked ~ .toggle_option_slider:after,
	.second_toggle:checked ~ .toggle_option_slider:after,
	.third_toggle:checked ~ .toggle_option_slider:after {
		color: #333;
		position: relative;
	    left: 6px;
	    font-size: 12px;
	    top: 1px;
	}
	.second_toggle:checked ~ .toggle_option_slider:after {
		left: 2px;
	}

/* login page */
	#login_holder { position:relative; height:100%; width:100%; }
	#login { font-family:'source_sans_proregular', sans-serif; width:374px; height:210px; position: absolute; top: 50%; left: 50%; margin: -105px 0 0 -187px; }
	#login td { vertical-align: middle;	}
	#login form { padding:0px; margin:0px; }
	#login i { margin:0 20px 0 0; color: #333; }
	#login .input { font-family: 'source_sans_proextralight', sans-serif; font-size:30px; margin-bottom: 10px; height: 38px; border: 0; width: 330px; background: none; color: #2974b3; }
	#login input { font: 300 30px Arial; }
	#login .login { cursor:pointer; font-family:'source_sans_proregular', sans-serif; font-size:1.4em; color:#ffffff; float:left; display:inline; border:none; border-bottom:0; background:none; }
	#login a { color: #000; }
	#login a:hover { text-decoration: underline; }

/* status bar */
	#status_bar { background: #fff; padding: 0; height: 50px; }
	#status_bar .logo { margin: 11px 0 0 30px; display: inline-block; float: left; }
	#status_bar .logout { float:right; display:inline; margin: 14px 30px 0 0; }
	#status_bar .logout a { font-family:'source_sans_proregular', sans-serif; color: #2974b3; font-size: 16px; line-height: 24px; }
	#status_bar .logout a i { float: left; margin-right: 5px; }
	/*#status_bar::after {
		height: 40px;
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #eee 100%);
		width: 100%;
		position: relative;
		top: 11px;
		z-index: -1;
	}*/
	#status_bar {
		-webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.15);
	}

/* main lhs nav */
	#nav { float: left; display: inline; width: 270px; padding: 40px 0; }
	#nav .nav-content { border-right: 1px solid #979797; padding: 0 30px; }
	#nav #user { text-align: center; margin-bottom: 35px; }
	#nav ul { list-style-type: none; }
	#nav li a { line-height: 24px; vertical-align: middle; color: #333; margin-bottom: 25px; display: inline-block; font-size: 16px; }
	#nav li a i { float: left; margin-right: 15px; }
	#nav li .nav_link_selected { color: #2974b3; text-decoration: none; }
	#nav p { font-size: 18px; }
	#nav p span { color: #2974b3; }
	#nav a { color: #333; }
	#nav a:hover { text-decoration: underline; }

/* bof pagination styles */
	#pagination { font-family: 'source_sans_prolight',sans-serif; font-size:12px; width:760px; clear:both; float:left; margin: 10px 0 30px 0; border-bottom:1px solid #979797; border-top:1px solid #979797; padding:15px 0; }
	#pagination .page_numbers { color:#000; font-size:16px; float:left; display:inline; width:560px; text-align:center; }
	a.pagination_link:active, a.pagination_link:link, a.pagination_link:visited  { color:#2974b3; text-decoration:none; }
	a.pagination_link:hover { text-decoration:none; }
	#pagination .page_numbers .pagination_link, #pagination .page_numbers .active { margin:2px; }

	a.pagination_prev { width:100px; color:#333; float:left; display:inline; text-decoration:none; line-height: 24px; }
	a.pagination_prev:hover { text-decoration:underline; }
	a.pagination_prev i { float: left; }
	span.pagination_prev { width:100px; color:#979797; padding:5px 0 0 24px; filter: alpha(opacity=55); -moz-opacity: 0.55; -khtml-opacity: 0.55; float:left; display:inline; }

	a.pagination_next { width:100px; text-align:right; color:#333; float:right; display:inline; text-decoration:none; line-height: 24px; }
	a.pagination_next:hover { text-decoration:underline; }
	a.pagination_next i { float: right; }
	span.pagination_next { width:100px; text-align:right; color:#979797; padding:5px 24px 0 0; filter: alpha(opacity=55); -moz-opacity: 0.55; -khtml-opacity: 0.55; float:right; display:inline; }
/* eof pagination styles */

/* cms item */
	.main-content .item { display:block; margin:0 0 10px 0; width:760px; clear: both; padding: 20px; min-height: 68px; transition: all 0.3s; background: #ccc; }
	.main-content .item.declined {
		background: #f44336;
	}
	.main-content .item:hover { border: none; background: #444; color: #FFF; }
	.main-content .item .info_table {
		float: left;
		display: inline;
		width: 400px;
	}
	.main-content .info_table td { padding: 0 8px 8px 0; }
	.info_table .field_name { color: #979797; padding: 0 30px 0 0; width: 136px; }
	.info_table .field_name p:last-of-type { margin-bottom: 0; }
	.item.declined .field_name { color: #fff; }
	.main-content .item .info_table img { float:left; display:inline; margin:0 15px 0 0; height:76px; }
	.main-content .item .buttons { float:right; display: none; }
	.main-content .item.admin .buttons { margin:35px 0 0 0; }
	.main-content .item:hover .buttons { display: inline-block; }
	.buttons .delete_button {
	    margin: 0 0 0 20px;
	    float: right;
	    display: inline;
	    color: #2974b3;
	    cursor: pointer;
	    user-select: none;
	}
	.buttons .edit_button,
	.buttons .tick_button {
	    margin: 0 0 0 10px;
	    float: right;
	    display: inline;
	    color: #979797;
	}
	.buttons .tick_button {
		color: #57873c;
	}

/* main content area */
.main-content .content h1 {
    font-size: 22px;
    margin: 0 0 20px 0;
    padding: 0;
    font-weight: 400;
    display: inline-block;
}
ul {
	margin-left: 20px;
}
ul li {
	font-size: 16px;
	margin-bottom: 10px;
}

/* calender */
	#calender-interface {
		min-width: 460px;
	}
	#calender-interface h2 {
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 20px;
	}
	.calender-table {
		text-align: left;
		margin-bottom: 50px;
	}
	.calender-table.locked,
	.switch.block.locked,
	.return-message.locked {
		opacity: 0.5;
	}
	.calender-table tr:nth-child(even) {
		background: #eee;
	}
	.calender-table tr.weekend {
		background: #74a4cc;
		color: #fff;
	}
	.calender-table tr.bank-holiday {
		background: #cc7474;
		color: #fff;
	}
	.calender-table thead tr th {
		border-bottom: 1px solid #ccc;
		padding-bottom: 20px;
	}
	.calender-table td {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 5px 10px;
		min-width: 100px;
		vertical-align: middle;
	}
	.calender-table tr > td:first-child {
		padding: 5px 10px 5px 5px;
	}
	.calender-table .overtime-column {
		min-width: 100px;
	}
	.calender-table .total,
	.calender-table .total td {
		background: none !important;
		color: #000 !important;
		font-size: 16px;
	}
	.calender-table .weekend input,
	.calender-table .bank-holiday input {
		border-color: #2974b3;
		color: #FFF;
		width: 100%;
	}
	.calender-table input {
		color: #333;
		width: 100%;
	}
	table.smart-forms .switch {
		display: inline-block;
	    position: relative;
	    top: 16px;
	}
	.selectors {
		margin-bottom: 20px;
	}
	.smart-forms .switch > .switch-label + span {
		color: #000;
	}
	.switch.block {
		user-select: none;
	}
	.calender-table .switch.block .switch-label {
		vertical-align: top;
	}

	.error-message, .return-message {
		background: #f44336;
		color: #fff;
		padding: 10px 20px;
		margin-bottom: 20px;
	}
	.return-message {
		background: #57873c;
	}
	.error-message p, .return-message p {
		font-size: 16px;
		font-family: 'source_sans_proregular', sans-serif;
	}
	.smart-forms .gui-input[disabled], .smart-forms .gui-textarea[disabled], .smart-forms .select > select[disabled], .smart-forms .select-multiple select[disabled], .smart-forms .gui-input[disabled] ~ .input-hint, .smart-forms .file .gui-file[disabled] + .gui-input, .smart-forms .file .gui-file[disabled]:hover + .gui-input, .smart-forms .gui-textarea[disabled] ~ .input-hint {
		background-color: #fff;
    	border-color: #BDC3C7!important;
    	cursor: default;
    	color: #34495E;
		opacity: 1;
	}
	.error {
		color: #f44336;
	}

	#invoices {
		width: 760px;
	}
	#invoices h2 {
		display: inline-block;
		float: left;
		font-weight: normal;
		width: 370px;
	}
	#invoices h2:first-of-type {
		clear: both;
		float: left;
		width: 390px;
	}
	.invoice-list.overtime {
		margin: 0;
		width: 760px;
	}
	#invoices .overtime .item {
		clear: none;
		display: inline-block;
		float: left;
		width: 370px;
	}
	#invoices .overtime .item:first-child {
    	margin-right: 20px;
	}
	#invoices .overtime .info-table,
	.timesheets-list .item .info-table {
		float: left;
    	display: inline;
    	width: 295px;
	}
	#invoices .overtime .info-table td,
	#timesheets .info-table { padding: 0 8px 8px 0; }
	#invoices .overtime .info-table .field_name,
	#timesheets .info-table .field_name {
		color: #979797;
    	padding: 0 20px 0 0;
    	width: 130px;
	}
	.overtime .info-table .buttons { float:right; display: none; }
	.main-content .item.admin .buttons { margin:35px 0 0 0; }
	.overtime .info-table .item:hover .buttons { display: inline-block; }

	.invoice,
	.timesheet {
		width: 760px;
	}
	.main-content .content.invoice h1.underline {
		border-bottom: 1px solid #979797;
		padding-bottom: 10px;
	}
	.invoice-logo {
		clear: both;
		float: left;
		margin-bottom: 20px;
	}
	.invoice .invoice-address {
		line-height: 20px;
	}
	.invoice .invoice-bar {
		background-color: #2974b3;
		color: #fff;
		padding: 5px 20px;
		font-size: 20px;
	}
	.invoice .invoice-bar span {
		float: right;
	}
	.invoice .invoice-bar span:first-of-type {
		float: left;
	}
	.invoice .bill-to-bar {
		border-bottom: 1px solid #979797;
		clear: both;
		padding: 10px 0 5px 20px;
	}
	.invoice .mercator-invoice-address {
		line-height: 20px;
		padding: 10px 0 5px 20px;
	}
	.invoice .invoice-table thead {
		background-color: #2974b3;
		color: #fff;
		border-left: 1px solid #2974b3;
		border-right: 1px solid #2974b3;
	}
	.invoice .invoice-table th {
		text-align: left;
		padding: 5px 20px;
		font-weight: 400;
	}
	.invoice .invoice-table td {
		border-right: 1px solid #979797;
		border-bottom: 1px solid #979797;
		padding: 10px 20px;
	}
	.invoice .invoice-table {
		border-left: 1px solid #979797;
		width: 720px;
	}
	.invoice .invoice-table.fifty {
		width: 328px;
		margin-bottom: 50px;
	}
	.invoice tr.bold td {
		font-size: 18px;
	}
	.invoice .invoice-table th:first-of-type,
	.invoice .invoice-table td:first-of-type {
		width: 180px;
	}
	.actual-invoice {
		background: #222;
		color: #FFF;
		margin: 20px 0;
    	padding: 20px;
	}

	.details {
		background-color: #ccc;
		line-height: 20px;
		margin-bottom: 20px;
		padding: 20px;
		width: 100%;
	}
	.details p {
		font-size: 18px;
	}
	.details .smart-forms label {
		font-size: 26px;
	}
	.details .smart-forms .gui-input {
		font-size: 16px;
	}
	.details #password-strength-text {
		font-size: 14px;
		float: left;
		display: inline;
		width: 400px;
	}
	.days-worked,
	.hours-worked,
	.overtime-worked {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.days-worked span,
	.hours-worked span,
	.overtime-worked span {
		font-weight: bold;
	}

footer {
}

footer .footer-content {
	margin: 0 auto;
	width: 1440px;
}

/* mobile css */

@media only screen and (max-width: 1070px){
	#login {
	    width: 300px;
	    margin: -105px 0 0 -150px;
	}
	#login .input {
		font-size: 23px;
		width: 260px;
	}
	#login i {
		margin: 0;
	}
	#status_bar .logo {
		margin-left: 20px;
	}
	#status_bar .logout {
		margin-right: 20px;
	}
	#nav {
		padding: 20px 0;
		width: 100%;
	}
	#nav .nav-content {
		border-right: none;
		border-bottom: 1px solid #979797;
		padding: 0 20px;
	}
	#nav .nav-content ul {
		margin-left: 0;
	}
	#nav #user {
		margin-bottom: 10px;
		width: 100%;
	}
	#nav li a {
	    margin-bottom: 5px;
	}
	.main-content {
		max-width: 100%;
    	min-width: 320px;
	}
	.main-content .content {
		padding: 20px;
		width: 100%;
	}
	#invoices {
	    width: 100%
	}
	#invoices h2:first-of-type,
	#invoices h2 {
		width: 50%;
	}
	.invoice-list.overtime {
		width: 100%;
	}
	#invoices .overtime .item {
		width: 49%;
	}
	#invoices .overtime .item:first-child {
    	margin-right: 2%;
	}
	#pagination {
		width: 100%;
	}
	#pagination .page_numbers {
		width: auto;
	}
	span.pagination_next {
    	width: 70px;
    }
	.main-content .item {
		width: 100%;
	}
	.main-content .item .info_table {
	    width: 200px;
	}
	.buttons a:last-of-type {
		margin-left: 0;
	}
	#calender-interface h2 {
		margin-bottom: 20px;
	}
	.smart-forms .switch > .switch-label + span {
		width: 120px;
	}
	#enter-time-form .smart-forms .switch > .switch-label + span {
		width: auto;
	}
	.invoice .invoice-table,
	.invoice .invoice-table.fifty {
		width: 100%;
	}
	.invoice a.add_button.pdf-button {
		float: left;
		margin: 0 0 20px 0 !important;
		clear: both;
	}
	.invoice .invoice-bar {
		padding: 5px 10px;
		width: 100%;
	}
	.invoice .invoice-bar span {
		float: left;
	}
	.invoice .bill-to-bar {
	    padding: 10px 0 5px 10px;
	}
	.invoice .mercator-invoice-address {
    	line-height: 20px;
    	padding: 10px 0 5px 10px;
	}
	.invoice .invoice-table th {
		font-size: 10px;
	}
	.invoice .invoice-table th,
	.invoice .invoice-table td {
		padding: 5px 10px;
	}
	#invoices .info-table td:nth-child(2){
		display: none;
	}
	.invoice .invoice-table th:first-of-type, .invoice .invoice-table td:first-of-type {
    	width: auto;
	}
	.calender-table td {
		min-width: auto;
	}
	.calender-table thead tr th {
    	padding: 0 5px 10px 5px;
	}
	.msg_report, .msg_error { min-width: 90%; max-width: 90%; }
}