body {}

.navbar {background-color: #F7F8F9}
	.navbar-brand {}
		.navbar-brand img {height: 18px; width: 18px; margin: 0 -4px 3px 0;}
.hidden-forms {display: none;}
.html-process {display: none;}

.chat-btn {background-color: #7866ff; padding: 8px 16px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: bold;}
	.or {margin: 16px 0;}

.notifications-list {margin: 0 -15px;}
	.notifications-list a.notification {display: block; color: rgb(33, 37, 41); text-decoration: none; padding: 10px; border-bottom: 1px solid #eee}
		.notifications-list a.notification div.profile-pic {float: left;}
		.notifications-list a.notification span.name {display: block; font-weight: bold; margin-left: 40px;}
		.notifications-list a.notification span.message {display: block; padding-left: 40px; font-size: .9rem; color: #444;}
		.notifications-list a.notification span.time {display: block; padding-left: 40px; font-size: .7rem; color: #999;}
	.notifications-list a.notification.notification-unread {border-left: 5px solid #0d6efd; background-color: #EAF4FD}
	.notifications-list a.notification .mark-as-read {float: right; color: #777; display: none}
		.notifications-list a.notification.notification-unread:hover .mark-as-read {display: block}
			.notifications-list a.notification.notification-unread:hover .mark-as-read:hover {color: #444}

.text-bg-light {background-color: #eeeeee !important;}
.btn-light {background-color: #eeeeee !important;}

.a-danger {color: #dc3545;}
	.a-danger:hover, .a-danger:active {color: #fff; background-color: #dc3545}
/* .login-form {max-width: 300px} */
	.login-form .form-floating {}
		.login-form .form-floating .form-control {
			border-radius: 0;
			border-bottom: none;
		}
			.login-form .form-floating:first-child .form-control {
				border-top-left-radius: .375rem;
				border-top-right-radius: .375rem;
			}
			
			.login-form .form-floating:last-of-type .form-control {
				border-bottom-left-radius: .375rem;
				border-bottom-right-radius: .375rem;
				border-bottom: 1px solid #ced4da;
			}
			
			/* .login-form .form-floating #login-password {
				border-bottom-left-radius: .375rem;
				border-bottom-right-radius: .375rem;
				border-bottom: 1px solid #ced4da;
				margin-bottom: 24px;
			} */
			
	.profile-pic {height: 36px; width: 36px; border-radius: 50%; text-align: center; position: relative; display: inline-block; margin-right: 5px}
		.profile-pic span {position: absolute; left: 0; right: 0; font-size: 1rem; bottom: 6px;}
		.profile-pic img {position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; z-index: 5;}
		.profile-pic object {position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; z-index: 5;}
	
	nav.web-header {margin-bottom: 16px}
		nav.web-header .container-fluid {align-items: flex-start;}	
		nav.web-header .profile-pic {margin-top: 4px; margin-left: 16px}
		nav.web-header .btn-header-add-new {margin-right: 16px; border-radius: 1.18rem; padding: 4px 12px;}
			nav.web-header .btn-header-add-new.d-sm-block {margin-top: 2px}
			
		nav.web-header .notifications-count {position: absolute;  top: 25%; left: 90%; font-weight: normal;
			padding: 3px 6px;}
		nav.web-header #collapsed-notification-icon {margin-right: 16px;}
			nav.web-header #collapsed-notification-icon i {font-size: 1.2rem;}
			
		
		.profile-pic.size-32 {height: 32px; width: 32px; margin-bottom: -6px;}
			.profile-pic.size-32 span {font-size: 0.9rem; bottom: 5px;}
		
		.profile-pic.size-24 {height: 24px; width: 24px; margin-bottom: -6px;}
			.profile-pic.size-24 span {font-size: 0.75rem; bottom: 3px;}
		
		.profile-pic.size-20 {height: 20px; width: 20px; margin-bottom: -4px;}
			.profile-pic.size-20 span {font-size: 0.65rem; bottom: 2px;}
		
		.profile-pic.size-16 {height: 16px; width: 16px;  margin-bottom: -3px;}
			.profile-pic.size-16 span {font-size: 0.5rem; bottom: 2px;}
			

.offcanvas-toggle {/*border-right: 1px solid #ccc*/}
	.offcanvas-toggle .submenu {height: 32px; width: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
	
.offcanvas-toggle {position: sticky;  bottom: 10%; pointer-events: none;}
	.offcanvas-toggle .open-btn {background-color: #888; opacity: 0.8; width: 60px; height: 60px; border-radius: 50%; float: right; 	
			margin-right: 3%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			pointer-events: all;
		}
	.offcanvas-toggle i {color: #fff; font-size: 2rem;}

.add-new {float: right;}
	.add-new button.btn, .add-new a.btn {border-radius: 1.18rem; padding: 4px 12px;}
.header-options {float: right;}
	.add-new button.btn, .add-new a.btn {border-radius: 1.18rem; padding: 4px 12px;}
.asset-header-status {float: right; margin-top: 3px;}
	.asset-header-status span.since-text {font-size: 0.9rem; color: #999; margin-right: 6px}
	.asset-header-status button.btn {border-radius: 1.18rem; padding: 4px 12px;}

.network-nav {margin-top: -4px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #eee}
	.network-nav a.nav-link {color: #444; font-size: .95rem; padding: 0; margin-right: 20px}
	
.navbar-toggler.profile-pic {border: none; margin: 0 0 -12px 0 !important;}

.callout {text-align: center; margin: 12px 0;}
	.callout h3 {}
		.callout h4 {font-size: 1rem; font-weight: normal}

.workorders-filter {}
	.workorders-filter .icons {text-align: right}
		.workorders-filter .icons i {cursor: pointer}
	.workorders-filter .btn {margin-bottom: 4px;}
	.workorders-filter input.workorder-filter {width: 120px; height: 30px; display: inline; float: right;}
		
.user-filter {}
	.user-filter .filter-wrap {position: relative; border-bottom: 1px solid #ccc; margin-bottom: 6px;}		
		.user-filter .filter-wrap input.filter {width: 90%; margin: 0px 5% 3%;}
		.user-filter .filter-wrap i {position: absolute; top: 18%; left: 8%; color: #777}
			
table.workorders {}
	table.workorders tr {}
		table.workorders tr.workorder {cursor: pointer;}
		table.workorders tr.workorder-open.overdue {background-color: #f8d7da}
			table.workorders tr.workorder-open.overdue td {background-color: #f8d7da}
		table.workorders tr.workorder-open.upcoming {background-color: #fff3cd}
			table.workorders tr.workorder-open.upcoming td {background-color: #fff3cd}
		table.workorders tr.workorder-closed {}
			table.workorders tr.workorder-closed td {}
			table.workorders tr td {font-size: 0.8rem;}
				table.workorders thead tr td {font-weight: bold;}
			table.workorders tr td.id {color: #888}
				table.workorders tr td.id a {color: #888; text-decoration: none;}
			table.workorders tr td.title {min-width: 50%;}
		table.workorders i.priority-icon {margin-left: 5px;}
			table.workorders i.priority-icon.priority-icon-high {color: #dc3545}
			table.workorders i.priority-icon.priority-icon-medium {color: #6c757d}
			table.workorders i.priority-icon.priority-icon-low {color: #0d6efd}
			
.workorder-table-mobile {}
	.workorder-table-mobile .row {padding: 14px 0; border-bottom: 1px solid #ccc;}
		.workorder-table-mobile .row .profile-pic {float: right; margin-top: 5px;}
		.workorder-table-mobile .row .title {font-weight: bold; display: block; margin-right: 36px;}
		.workorder-table-mobile .row .details {display: block;}
		.workorder-table-mobile .row .badge {font-weight: normal}
		.workorder-table-mobile .row .reporter {color: #999; margin-left: 10px; font-size: 0.8rem;}
		.workorder-table-mobile .row .workorder-stage {float: right; margin-top: 3px}
		.workorder-table-mobile .row .priority-icon {float: right; margin-top: 2px; margin-left: 3px;}
			.workorder-table-mobile .row .priority-icon.priority-icon-high {color: #dc3545}
			.workorder-table-mobile .row .priority-icon.priority-icon-medium {color: #6c757d}
			.workorder-table-mobile .row .priority-icon.priority-icon-low {color: #0d6efd}
			
			
.calendar-header {}	
	.calendar-header .month {text-align: center;}	
	.calendar-header .next-month {text-align: right;}
				
table.calendar {width: 100%}
	table.calendar tr {}
		table.calendar tr.day-labels {}
			table.calendar tr.day-labels th {text-align: center; width: 14.2857%}
	table.calendar tr td.day {height: 100px; border: 1px solid #ddd; vertical-align: top; padding: 0 6px 6px 6px;}
		table.calendar tr td.day.day-sat, table.calendar tr td.day.day-sun {background: repeating-linear-gradient(
			  45deg,
			  #fff,
			  #fff 2px,
			  #eee 2px,
			  #eee 4px
			);}
		table.calendar tr td.day.previous-month {background: none; background-color: #eee}
		table.calendar tr td.day.next-month {background: none; background-color: #eee}
		table.calendar tr td.day span.date {font-size: 11px; color: #777}
			table.calendar tr td.day span.date.today {background-color: red; color: #fff; border-radius: 50%;
				padding: 2px;}
		table.calendar tr td.day a.workorder {display: block; border-radius: 5px; text-decoration: none; font-size: 12px; padding: 0 5px; margin-bottom: 2px;}
			table.calendar tr td.day a.workorder.open {background-color: #cfe2ff; color: #052c65; border-color: #9ec5fe}
				table.calendar tr td.day a.workorder.open.overdue {background-color: #f8d7da; color: #58151c; border-color: #f1aeb5}
			
.main .breadcrumbs ul {padding-left: 0; }
	.main .breadcrumbs ul li {display: inline; }
		.main .breadcrumbs ul li:after {content: '/'; font-size: 0.7rem; margin-left: 4px;}
			.main .breadcrumbs ul li:last-child:after {content: none;}
				.main .breadcrumbs ul li {font-size: 0.8rem; color: #888;}
					.main .breadcrumbs ul li a {color: #888;}		
			
.workorder {}
	.workorder .main .breadcrumbs ul {padding-left: 4px; list-style-type: none; color: #888;}
	
	.workorder .stages {font-size: 0.7rem; text-align: center; margin-bottom: 36px}
		.workorder .stages .col {position: relative;}
			.workorder .stages .col:after {position: absolute; bottom: -40px; left: 0; right: 0; content: "\2022"; font-size: 3rem; color: #ccc; z-index: 5;}
				.workorder .stages .col.active:after {color: green}
		/* .workorder .stages .bar {width: 100%; height: 2px; margin-top: 7px; background-color: green} */
		.workorder .stages .col .bar {width: 100%; height: 2px; position: absolute; bottom: -9px; left: -50%; background-color: #ccc; z-index: 0}
			.workorder .stages .col.active .bar {background-color: green}
			.workorder .stages .col:first-child .bar {display: none} 
	.workorder .main .title {margin-bottom: 1rem}
	.workorder .main .description {}
		.workorder .main .description ul.tox-checklist {}
			.workorder .main .description ul.tox-checklist li {cursor: pointer;}
				.workorder .main .description ul.tox-checklist li:hover {background-color: #fff3cd}
				.workorder .main .description ul.tox-checklist li.highlighted {background-color: #fff3cd}
	
	.workorder .history-display-options {margin-bottom: 16px}
		.workorder .history-display-options li a {padding: 4px 8px;}
	.workorder .comment-section {margin-top: 15px; margin-bottom: 24px}
		.workorder .comment-section .profile-pic {float: left;}
		.workorder .comment-section #decoy-workorder-comment {margin-left: 50px;}
			.workorder .comment-section #decoy-workorder-comment textarea {resize: none;}
		.workorder .comment-section #real-workorder-comment {margin-left: 50px;}	
			
	.workorder textarea.comment-box {height: 40px}
	.workorder .tox-tinymce {margin-bottom: 16px; border: 1px solid #ccc; border-radius: .375rem;}
	.workorder .tox:not(.tox-tinymce-inline) .tox-editor-header {box-shadow: none; border-bottom: 1px solid #ccc;}
	
	.tox .tox-edit-area::before {border: 0 !important;}
	.tox-menu-nav__js[aria-label="Blue"] svg rect {fill: #0d6efd;}
	.tox-menu-nav__js[aria-label="Gray"] svg rect {fill: #6c757d;}
	.tox-menu-nav__js[aria-label="Yellow"] svg rect {fill: #ffc107;}
	.tox-menu-nav__js[aria-label="Green"] svg rect {fill: #198754;}
	.tox-menu-nav__js[aria-label="Red"] svg rect {fill: #dc3545;}
	
	.history {font-size: 0.8rem;}
		.history .row {padding: 8px 0 0 0;}
			.history .row .profile-pic {float: left;}
			.history .row .details {margin-left: 50px}
			.history .row .user-name {font-weight: bold;}
			.history .row .when {font-size: 0.6rem; display: inline; margin-left: 10px; margin-bottom: 8px}
			/* .history .row.type-action {color: #666} */
			.history .row.type-comment pre {background-color: #efefef; padding: 12px; border-radius: 6px;}
			.history .row.type-comment.highlight-comment {background-color: #fff3cd}
			
			.history .update-label {display: block;}
			
			.history .checkitem-label {display: block;}
			.history .checkitem-text.checked-off {/*text-decoration: line-through;*/}
			.history .form-check-input:disabled {opacity: .8;}
	
	
	
	.workorder .sidebar {padding-top: 24px; font-size: 0.9rem; /*padding: 48px 24px;*/}
		.workorder .sidebar .workorder-meta {border: 1px solid #ddd; border-radius: 5px; padding: 12px; margin-bottom: 8px}
			.workorder .sidebar .row {margin-bottom: 8px}
			.workorder .sidebar .label {font-weight: bold; margin-bottom: 4px;}
			.workorder .sidebar .btn.full-width {width: 100%; text-align: left}
				.workorder .sidebar .btn.full-width::after {float: right; margin-top: .6em;}
			
			
.workorder-new {}
	.workorder-new  input#title {width: 100%; font-size: 2rem; border: none; outline: 0 none;}
	.workorder-new .tox-tinymce {border: none;}
	.workorder-new .tox:not(.tox-tinymce-inline) .tox-editor-header {border-top: 1px solid #ccc;}
	
.workorder #static-title {cursor: pointer}
	.workorder #static-title:hover {background-color: #fff3cd}
.workorder textarea#title {width: 100%; font-size: 2rem; border: 2px solid #2E6FF4; outline: 0 none;}
.workorder #edit-title {position: relative}
	.workorder #edit-title #edit-title-helper {position: absolute; bottom: -5px; width: 100%;  text-align: center}
		.workorder #edit-title #edit-title-helper span {background-color: #fff; padding: 2px 12px; border: 2px solid #2E6FF4; border-radius: 12px;}
		
	.workorder .static-priority, .workorder .static-due, .workorder .static-category, .workorder .static-location, .workorder .static-asset  {cursor: pointer}
		.workorder .static-priority:hover, .workorder .static-due:hover, .workorder .static-category:hover, .workorder .static-location:hover, .workorder .static-asset:hover  {background-color: #fff3cd}
		
	

table.assets {}
	table.assets tr.url {cursor: pointer;}
	table.assets td.asset-name {text-align: left;}
	table.assets .data-value-edit {text-align: right; cursor: pointer;}
	table.assets span.time-since {margin-right: 12px; font-size: 0.8rem; color: #999}
	
img.quickcode {max-width: 100%;}



.manage {}
	.manage .main {}
		.manage .main h1 {margin-bottom: 24px}
		.manage .main .actions {float: right;}
		.manage .main .row.row-hidden {display: none}
		
	.manage ul.workorder-stages {list-style-type: none; padding-left: 0}
		.manage ul.workorder-stages li {padding: 3px 8px; cursor: grab}
			.manage ul.workorder-stages li:hover {background-color: #efefef}
			.manage ul.workorder-stages li i:hover {cursor: pointer}

nav.subtemplate {list-style-type: none;}
	nav.subtemplate li {}
		nav.subtemplate li.header {font-weight: bold; padding: 6px 0; margin-top: 16px}
		nav.subtemplate li.link {}
		nav.subtemplate li a {display: block; text-decoration: none; padding: 6px; border-radius: 6px}
			nav.subtemplate li a.active, nav.subtemplate li a.active:hover {background-color: #0d6efd; color: #fff}
			nav.subtemplate li a:hover {background-color: #eee}
				
			
.row.users-list {}
	.row.users-list a {text-decoration: none;}
	.row.users-list .profile-pic {margin-right: 12px}
	.row.users-list span.profile_name {font-weight: bold; display: block}
	.row.users-list span.role_name {color: #777; font-size: 0.8rem; display: block; margin-bottom: -20px}
	
	
.version-header {background-color: #ccc}
.compare-html {}
	.compare-html del {text-decoration: none; background-color: #f7e2e2; display: block}
	.compare-html ins {text-decoration: none; background-color: #e6fae3; display: block}
	
	
.document-new {}
	.document-new  input#title {width: 100%; font-size: 2rem; border: none; outline: 0 none;}
	.document-new .tox-tinymce {border: none;}
	.document-new .tox:not(.tox-tinymce-inline) .tox-editor-header {border-top: 1px solid #ccc;}
	

.document .main .title {}
.document .main .meta {font-size: .75rem; color: #777; margin-bottom: 12px}
	.document .main i.i-success {font-size: .6rem; }
		.document .main i.i-success {color: rgb(25 135 84);}
		.document .main i.i-warning {font-size: .7rem; color: #e5b72d;}
.document .main .description {}
	.document .main .description ul.tox-checklist {}
		.document .title {margin-right: 50px;}
		.document .main .description ul.tox-checklist li {cursor: pointer;}
			.document .main .description ul.tox-checklist li:hover {background-color: #fff3cd}
			.document .main .description ul.tox-checklist li.highlighted {background-color: #fff3cd}
			
	.document .main div.file-download {margin: 16px 0; padding:15px; background-color: #eee; border-radius: 8px}
	.document .main span.file-size {display: block; margin-left: 28px; margin-bottom: 8px;}
	.document .main a.btn-file-download {margin-left: 28px; margin-bottom: 5px;}
			
	.document .history-display-options {margin-bottom: 16px}
		.document .history-display-options li a {padding: 4px 8px;}
			.document .comment-section {margin-top: 15px; margin-bottom: 36px}
				.document .comment-section .profile-pic {float: left;}
				.document .comment-section #decoy-workorder-comment {margin-left: 50px;}
					.document .comment-section #decoy-workorder-comment textarea {resize: none;}
				.document .comment-section #real-workorder-comment {margin-left: 50px;}	
			.document textarea.comment-box {height: 40px}
			.document .tox-tinymce {margin-bottom: 16px; border: 1px solid #ccc; border-radius: .375rem;}
			.document .tox:not(.tox-tinymce-inline) .tox-editor-header {box-shadow: none; border-bottom: 1px solid #ccc;}
	
	.documents h1 {margin-bottom: 24px}
	.documents-list {}
		.documents-list span.title {}
			.documents-list span.title i.bi {margin-right: 4px}
			.documents-list span.title a {display: block}
		.documents-list span.meta {font-size: .7rem; color: #777; margin-left: 20px}
		
		
.version-header {padding: 5px; height: 90px; margin-bottom: 20px}

.tasks-list {}
	.tasks-list span {display: block; font-size: 0.9rem;}
		.tasks-list span.meta {font-size: 0.8rem; color: #999}
		
.mention-card-wrapper {position: absolute}


form.report-filters {margin: 16px 0}
	form.report-filters input.form-control {width: 200px; display: inline;}
canvas#report {margin: 24px 0;}


.join-network {text-align: center;}

.billing-plan {border: 1px solid #ccc; border-radius: 5px; padding:15px; margin-bottom: 16px; cursor: pointer}
	.billing-plan.active {background-color: #B5DCFE}
	.billing-plan ul.plan-features {padding-left: 0px;}
		.billing-plan ul.plan-features li.includes {list-style-type: none}
			.billing-plan ul.plan-features i.bi {margin-right: 8px; font-size: .8rem; color: #198754;}