/* Various */

.multiselect-container .disabled label {
	color: #DDDDDD !important;
}
.toggle {
	display: flex;
}
.current {
	background-color: #277EA5;
}
.required-field:after {
	content:     " *";
	font-weight: bold;
	color:       red;
}
.glyphicon-grey {
	color: #CCCCCC;
}
.menu-center {
	margin-left: 25%;
}
.display-row {
	display: inline-block;
	width:   100%;
}

.popup_box {
	z-index:    30;
	text-align: center;
	font-size:  16px;
}
.popup_box > i {
	margin-right: 10px;
}
.engineer_popup {
	margin-top:  -50px;
	margin-left: 350px;
}
.report_popup {
	margin-top:  -50px;
	margin-left: 50px;
	height:      50px;
}
.popup_text {
	text-align: center;
	font-size:  12px;
}
input[type="file"] {
	display:     block;
	margin-left: 13%;
	width:       100px;
	color:       white;
}
/* Layout */
.user-dropdown-menu {
	width: 210px !important;
}
.user-dropdown-menu .btn {
	margin-left: 20px;
}
.navbar-item-bottom {
	position: absolute !important;
	width:    100%;
}
.navbar-item-bottom-1 {
	bottom: 0 !important;
}
.navbar-item-bottom-2 {
	bottom: 44px !important;
}
.navbar-item-bottom-3 {
	bottom: 88px !important;
}
/* Error / Danger */
.background-red {
	background-color: #A50014 !important;
	color:            white !important;
}
.border-red {
	border-color: #A50014 !important;
}
/* Login Page */
.forgot-password {
	margin-top: 10px;
}
/* Edit Page */
.back-title {
	display:     flex;
	align-items: center;
}
/* Notes */
.note fa {
	font-size: 20px;
}
.note-visible {
	color: #00A659 !important;
}
.note-hidden {
	color: #CCCCCC !important;
}
.note-danger {
	color: #A50014 !important;
}
/* DataTables */
.datatable td:hover {
	cursor: pointer;
}
@media (min-width: 768px) {
	.datatable {
		width: 100%;
	}
}
.datatable {
	border-color: #EEEEEE !important;
}
.datatable th {
	border-bottom-color: #EEEEEE !important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	background-image: none !important;
	/* Resolves conflict between datatables.jquery and datatables.bootstrap */
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: none !important;
	border:     0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border: 0 !important;
}
/* Conditions */
.condition {
	font-size:     14px;
	text-align:    center;
	border-radius: 10px;
	padding-left:  3px;
}
.condition-danger {
	color: #B30000;
}
.condition-warning {
	color: #E68A00;
}
.condition-success {
	color: green;
}
.condition-n-a {
	color: grey;
}
/* Panels */
.panel-status {
	padding: 20px 10px 20px 10px;
}
/* Panel Created */
.border-color-status-id-3 {
	border-color: #00B3B3;
}
.background-color-status-id-3 {
	background-color: #00B3B3;
	color:            white;
}
/* Panel Booked */
.border-color-status-id-2 {
	border-color: #0066CC;
}
.background-color-status-id-2 {
	background-color: #0066CC;
	color:            white;
}
/* Panel Unchecked */
.border-color-status-id-1 {
	border-color: #E65C00;
}
.background-color-status-id-1 {
	background-color: #E65C00;
	color:            white;
}
/* Panel Completed */
.border-color-status-id-4 {
	border-color: #00A659;
}
.background-color-status-id-4 {
	background-color: #00A659;
	color:            white;
}
.background-color-status-id-7 {
	background-color: #E68A00;
	color:            white;
}
/* Panel Archived */
.border-color-status-id-5 {
	border-color: #999999;
}
.background-color-status-id-5 {
	background-color: #999999;
	color:            white;
}
/* Form status */
.border-color-status-id-4 {
	border-color: #00A659;
}
.background-color-danger {
	background-color: #A3061A;
	color:            white;
}
/* Tables */
.table-vertical-align-center td {
	vertical-align: middle !important;
}
/* Flash messages */
.flash-message {
	border-radius: 0;
	padding:       20px 30px;
	z-index:       999999;
	font-size:     16px;
	font-weight:   600;
}
.flash-message-success {
	background: #00A45E;
}
.flash-message-info {
	background: #33ADFF;
}
.flash-message-warning {
	background: #F39C13;
}
.flash-message-danger {
	background: #DF3A32;
}
.flash-message-dismiss-btn {
	color:           white !important;
	text-decoration: none !important;
	opacity:         0.8 !important;
	padding-right:   20px;
}
.flash-message-text {
	color:        rgba(255, 255, 255, 0.9);
	display:      inline-block;
	margin-right: 10px;
}
/* Customer Satisfaction */
.fa-customer-rating {
	font-size:   100px;
	font-weight: 100;
}
.fa-customer-rating-good {
	color: #00CC44;
}
.fa-customer-rating-average {
	color: orange;
}
.fa-customer-rating-bad {
	color: #E62E00;
}
.customer-signature {
	height:     100px;
	width:      200;
	object-fit: contain;
}
/* 45 degrees table headers */
.table-header-rotated th.row-header {
	width: auto;
}
.table-header-rotated td {
	width:          40px;
	border-top:     1px solid #DDDDDD;
	border-left:    1px solid #DDDDDD;
	border-bottom:  1px solid #DDDDDD;
	border-right:   1px solid #DDDDDD;
	vertical-align: middle;
	text-align:     center;
}
.table-header-rotated th.rotate-45 {
	height:         80px;
	width:          40px;
	min-width:      40px;
	max-width:      40px;
	position:       relative;
	vertical-align: bottom;
	padding:        0;
	font-size:      10px;
	line-height:    1;
}
.table-header-rotated th.rotate-45 > div {
	position:          relative;
	top:               0;
	left:              40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
	height:            100%;
	-ms-transform:     skew(-45deg, 0deg);
	-moz-transform:    skew(-45deg, 0deg);
	-webkit-transform: skew(-45deg, 0deg);
	-o-transform:      skew(-45deg, 0deg);
	transform:         skew(-45deg, 0deg);
	overflow:          hidden;
	border-left:       1px solid #DDDDDD;
	border-right:      1px solid #DDDDDD;
	border-top:        1px solid #DDDDDD;
}
.table-header-rotated th.rotate-45 span {
	-ms-transform:     skew(45deg, 0deg) rotate(315deg);
	-moz-transform:    skew(45deg, 0deg) rotate(315deg);
	-webkit-transform: skew(45deg, 0deg) rotate(315deg);
	-o-transform:      skew(45deg, 0deg) rotate(315deg);
	transform:         skew(45deg, 0deg) rotate(315deg);
	position:          absolute;
	bottom:            30px; /* 40 cos(45) = 28 with an additional 2px margin*/
	left:              -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
	display:           inline-block; /* // width: 100%; */
	width:             85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
	text-align:        left;
}
/* Loader */
.loader {
	width:         60px;
	height:        60px;
	border-radius: 100%;
	position:      relative;
	margin:        0 auto;
}
.loader:before,
.loader:after {
	content:          "";
	position:         absolute;
	top:              -10px;
	left:             -10px;
	width:            100%;
	height:           100%;
	border-radius:    100%;
	border:           10px solid transparent;
	border-top-color: #3498DB;
}
.loader:before {
	z-index:   100;
	animation: spin 1s infinite;
}
.loader:after {
	border: 10px solid #CCCCCC;
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform:     rotate(0deg);
		-o-transform:      rotate(0deg);
		transform:         rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform:     rotate(360deg);
		-o-transform:      rotate(360deg);
		transform:         rotate(360deg);
	}
}
/* Reference drawing */
#js-mcz-buttons {
	display:flex;
	flex-direction:row;
}
#js-mcz-buttons > * {
	flex-grow:1;
	flex-basis:0;
}
#js-mcz-workzone {
	position: relative;
}
#js-mcz-tools {
	position:  absolute;
	top:       50%;
	left:      10px;
	transform: translateY(-50%);
}
.js-mcz-tool-swap {
	display: block;
}
#mcz-canvas-container {
	width:  600px;
	height: 600px;
	margin: auto;
	border: solid 1px #E9ECEF;
}

.is-visible {
	display: flex;
}
.clear-signature-modal { 
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: all 0.35s ease-in;
	background: #615f5f52;
}
.clear-signature-modal-content {
	display: flex;
	justify-content: center;
	text-align: center;
	background-clip: unset;
	background: #ffffff;
}
.clear-signature-modal-dialog {
	position: relative;
	max-width: 800px;
	min-width: 500px;
	max-height: 80vh;
	overflow: auto;
	cursor: default;
	box-shadow: 0px 0px 15px #5d5d5d;
}
.clear-signature-modal-dialog > * {
	padding: 1rem;
}
	
.clear-signature-modal-header {
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background: #0c4ca7;
}

.clear-signature-modal-header .clear-signature-modal-close {
	font-size: 1.5rem;
}

.clear-signature-modal p + p {
	margin-top: 1rem;
}
.clear-signature-modal {
	visibility: hidden;
	opacity: 0;
	transition: all 0.35s ease-in;
}

.clear-signature-modal.is-visible {
	visibility: visible;
	opacity: 1;
}