/*
-------------------------------------
HEADER
-------------------------------------
*/

header {
	height:86px;
	background-color: #35353f;
	padding:0 30px;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 100;
}

.logo {
	float:left;
	margin-top: 27px;
}

.logo img {
	width:225px;
}

.clock {
	float:right;
	color:#00d9c0;
	font-size:35px;
	font-weight:200;
	margin-top: 24px;
}

/*
-------------------------------------
NAV
-------------------------------------
*/

.nav {
	width:235px;
	position: fixed;
	top:86px;
	left:0;
	padding: 57px;
}

.menu li {
	margin-top:36px;
	position: relative;
}

.menu li:first-child {
	margin-top:0;
}

.menu li a {
	font-size:16px;
	font-weight: 500;
}

.menu li a:hover, .menu li a.active {
	color: #00d8c0;
}

.menu li .btn.icon {
	position: absolute;
	top:0;
	right:0;
	padding:0 4px;
}


/*
-------------------------------------
PAGE
-------------------------------------
*/

.page-wrapper {
	/* height: 1px; */
	min-height: 100%;
	background-color: #f1f2f6;
	padding: 36px;
	margin: 0 0 0 235px;
	position: relative;
}
.page-wrapper.anonymous {
	margin:0;
}

.page {
	background-color: #fff;
	padding:40px;
}


/*
-------------------------------------
POPUP
-------------------------------------
*/

.popup-wrapper {
	display:none;
	position: fixed;
	background:#f1f2f6;
	top: 86px;
	left: 235px;
	height: calc(100% - 86px);
	width: calc(100% - 235px);
	z-index: 500;
	padding:36px;
	overflow-y: auto;
}
.popup {
	position: relative;
	background-color: #fff;
	padding: 56px;
}

.btn.close-popup {
	position:absolute;
	top: 56px;
	right: 56px;
	z-index: 501;
	padding:20px;
}
.btn.close-popup i {
	position:relative;
	color:#3d3e43;
	font-size:40px;
}

.popup h1 {
	padding-bottom:56px;
	color:#27d0ef;
}
.popup p {
	padding-bottom:12px;
}

.popup-wrapper.sublist {
	padding-top:80px;
}
.popup-wrapper.sublist .popup {
	background-color: transparent;
	padding: 40px;
}

/*
-------------------------------------
NOTIFICATIONS
-------------------------------------
*/

.notifications-wrapper {
	position: fixed;
	top:0;
	right:0;
	width:350px;
	z-index:9999;
	padding:15px;
}

.notifications-wrapper.hidden {
	display:none;
}

.notification {
	position: relative;
	background-color: #d8d8d8;
	padding:40px;
	margin:15px 0 0 0;
}

.notification a {
	color:#fff;
}

.notification button.close {
	position: absolute;
	top:20px;
	right:20px;
	color: #fff;
}

/*
-------------------------------------
LIST VIEWS
-------------------------------------
*/

.list-controls {
	margin-bottom: 20px;
}

.list-controls .btn-wrapper {
	width:50%;
	float: right;
	padding-left:10px;
}
.list-controls .btn-wrapper:first-child {
	padding: 0 10px 0 0;
	float: left;
}

.table-wrapper {
	background-color:#fff;
	padding:40px;
}

td.website {
	word-break: break-word;
}

/* Coloured status cells & selects */
td.status,
td:not(.bw-select) span.color-select,
td:not(.bw-select) span.color-select + span.select2-selection__arrow b::before {
	color: #fff !important;
}
td.status.s30, td span.cancelled {background-color: #bcbcca;} /* Cancelled */
td.status.s60, td span.on-hold {background-color: #7f8094;} /* On Hold */
td.status.s90, td span.pending {background-color: #00dce4;} /* Pending */
td.status.s120, td span.in-progress {background-color: #1a9ee2;} /* In Progress */
td.status.s150, td span.completed, td span.complete, td span.paid {background-color: #00d8c1;} /* Completed, Complete, Paid */
td.status.s180, td span.overdue {background-color: #ff6f6f;} /* Overdue */

/* Filters drop down */
.filters-wrapper {
	position: relative;
}
.filters {
	position: absolute;
	left:0;
	top:56px;
	width: 100%;
	padding: 50px;
	background-color:#35353f;
	margin-right:10px;
	z-index: 5;
	display: none;
}

/* Pagination */
.pagination {
	position: relative;
}

.pagination-top {
	margin-bottom:20px;
}
.pagination-bottom {
	margin-top:20px;
}

.pagination button {
	width:55px;
	height:55px;
	padding:0;
	text-align: center;
	position: absolute;
	top:0;
	left:0;
}
.pagination button.next-page {
	left:auto;
	right:0;
}

.pagination button i {
	right: 25px;
}

.pagination .pagination-select {
	padding: 0 75px;
	height: 55px;
}


/*
-------------------------------------
STACKED LISTS  E.G. CONTACT RECORD
-------------------------------------
*/


.stacked-list-item {
	border-bottom: 1px solid #e0e4e7;
	padding:46px 0 34px 0;
}

.stacked-list .stacked-list-item:first-child {
	padding-top:0;
}

.stacked-list-item .heading {
	float:left;
	padding:4px 0;
}

.stacked-list-item .controls {
	float:right;
}

.stacked-list-item .content {
	padding-top:22px;
	clear:both;
}

.stacked-list-item h2, .stacked-list-item h2 a {
	color:#27d0ef;
	font-size:16px;
	font-weight:600;
}

.assign-form {
	margin-bottom:46px;
}

.stacked-list-item .content p {
	padding-top:12px;
}
.stacked-list-item .content p:first-child {
	padding-top:0;
}

/*
-------------------------------------
DETAIL TABLES
-------------------------------------
*/

.details-table {
	padding-bottom:30px;
}

.detail {
	padding-bottom:32px;
}

.detail.left {
	width:40%;
	float:left;
	clear: both;
	font-weight:600;
}

.detail.right {
	width: 60%;
	float: right;
	clear: right;
	font-weight: 400;
}

/* compact details such as those in stacked lists */
.details-table.compact .detail {
	padding-bottom: 7px;
}

.stacked-list .details-table {
	padding: 46px 0 46px 0;
}

.details-table a {
	color:#27d0ef;
}

/*
-------------------------------------
DETAIL VIEWS
-------------------------------------
*/

.detail-page {
	padding: 56px;
}

.detail-controls.margin-top {
	margin-top:10px;
}


.detail-controls .btn-wrapper {
	float:left;
	padding-left:10px;
}
.detail-controls .btn-wrapper:first-child {
	padding:0;
}
.detail-controls.one .btn-wrapper {
	width:100%;
}
.detail-controls.two .btn-wrapper {
	width:50%;
}
.detail-controls.three .btn-wrapper {
	width:33%;
}
.detail-controls.four .btn-wrapper {
	width:25%;
}

.detail-controls .btn {
	text-align: center;
	padding:12px;
}

.detail-page .title {
	padding: 60px 0;
	position:relative;
}

.detail-page .title .controls {
	position: absolute;
	top: 60px;
	right:0;
}

.detail-page h1 {
	font-weight:600;
	color:#27d0ef;
	padding-right: 54px;
}

/*
-------------------------------------
COMPANY DETAIL
-------------------------------------
*/

.contact-record .date {
	line-height:14px;
	padding:4px 0;
}

/*
-------------------------------------
PROJECT DETAIL
-------------------------------------
*/
.users-wrapper .stacked-list-item {
	padding:46px 0;
}



/*
-------------------------------------
DASHBOARD
-------------------------------------
*/

.dash .page-wrapper {
	padding: 36px 16px 36px 36px;
}

.dash-wrapper {
	position: absolute;
	height: calc(100% - 52px);
	width: calc(100% - 52px);
}

.dash-col {
	position: absolute;
	height:100%;
	width:33.3333%;
	padding-right:20px;
}

.dash-left {
	left:0;
}
.dash-mid {
	left:33.3333%;
}
.dash-right {
	left:66.6666%;
}

.dash-small {
	height:14%;
}

.dash-panel {
	padding-bottom:20px;
}
.dash-panel-inner {
	background-color: #fff;
	height:100%;
	position: relative;
}

.dash-med {
	height:43%;
}

.dash-large {
	height:86%;
}

.dash-btn button {
	height: 100%;
	text-align: center;
	font-size: 24px;
	font-weight:600;
}
.dash-btn button i {
	top:30px;
	right:30px;
}

.dash-panel-link {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:4;
}

.dash-panel h1 {
	position: absolute;
	top:30px;
	left:30px;
	font-size:20px;
	font-weight:400;
}

.dash-panel .cencontent {
	text-align: center;
}

.dash-panel h2 {
	font-size:60px;
}
.dash-panel h3 {
	font-size:30px;
	font-weight:600;
	padding-top:16px;
}

.dash-panel.pipeline .dash-panel-inner {
	background-color: #27d0ef;
}
.dash-panel.invoices .dash-panel-inner {
	background-color: #00d8c0;
}

.dash-panel.money h1, .dash-panel.money h2, .dash-panel.money h3 {
	color:#fff;
}

.dash-panel-inner .left {
	float:left;
	width:50%;
	padding-left:20%;
}
.dash-panel-inner .right {
	float:right;
	width:50%;
	padding-right:20%;
}

.dash-panel.objects .left h2 {
	color:#00d8c0;
}
.dash-panel.objects .right h2 {
	color:#ee2200;
}

.dash-panel.objects h3 {
	text-transform: uppercase;
	font-size:20px;
	color:#999;
	padding-top:10px;
}

.dash-panel.planner .dash-panel-inner {
	overflow-y:auto;
}

.dash-panel.planner h2 {
	text-transform: uppercase;
	font-size: 20px;
	font-weight:400;
	color:#27d0ef;
	position: absolute;
	top:30px;
	right:30px;
}

.dash-panel.planner table {
	padding:80px 30px 30px 30px;
}
.dash-panel.planner th {
	border-bottom:1px solid #e1e4e6;
}
.dash-panel.planner td.type {
	color:#00d8c0;
	text-align: right;
	position: relative;
	padding-right:30px;
}
.dash-panel.planner span {
	position: absolute;
	top:50%;
	right:0;
	margin-top:-7px;
}
.dash-panel.planner td.type span::before {
	font-family:"Font Awesome 5 Pro";
	color:#e1e4e6;
	font-size:20px;
}
.dash-panel.planner td.type span.meeting::before {
	content:'\f017';
}
.dash-panel.planner td.type span.project::before {
	content:'\f07b';
}
.dash-panel.planner td.type span.call::before {
	content:'\f095';
}
.dash-panel.planner td.type span.accounting::before {
	content:'\f154';
}


/*
-------------------------------------
FORM PAGES
-------------------------------------
*/

.form-page h1 {
	margin-bottom:30px;
}

.form-page p.form-help.top {
	margin-bottom:20px;
}

/*
-------------------------------------
PUBLIC TASK LIST
-------------------------------------
*/
.project-tasks-title h2 {
	padding: 15px 0 40px 0;
}