/* General */
a,
div,
body,
td,
input,
textarea,
li,
button,
h1,
h2 {
	font-family: 'Open Sans', "Trebuchet MS", Helvetica, Arial;
	font-size: 13px;
	line-height: 20px;
	color: #b5c3d3;
	font-weight: 300;
}

div {
	padding: 0px;
	margin: 0px;
}

img {
	border: 0px;
	margin: 0px;
}

.clear {
	clear: both;
}

body {
	background: #10161e;
	margin: 0;
}

a {
	text-decoration: none;
}

hr {
	height: 1px;
	line-height: 1px;
	border: none;
	border-top: 1px dashed #293a4b;
}

hr.vert {
	display: inline-block;
	border-right: 1px dashed #293a4b;
	line-height: 20px;
	height: 20px;
	vertical-align: middle;
	margin: 0 3px;
}

hr.clear {
	border: 0;
}

h1 {
	clear: both;
	margin: 20px 0;
	margin-bottom: 10px;
	font-size: 18px;
	color: #fff;
	font-weight: 300;
}

h1 i {
	width: 25px;
	text-align: center;
	margin-right: 10px;
}

h1 hr.vert {
	border-color: #3b4d62;
}

h2 {
	margin: 0;
	font-size: 14px;
	/*background: #252525;
	border-radius: 3px;
	padding: 5px 15px;
	*/
	text-align: center;
	border-bottom: 1px solid #3a4d61;
	color: #fff;
}

h3 {
	color: #fff;
	font-weight: 400;
	margin: 0;
}

h4 {
	color: #fff;
}

.strong,
strong {
	color: #fff !important;
	font-weight: normal;
}

/* Login Box */
#login {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 300px;
	height: fit-content;
	padding: 10px;
	background: #1f2934;
	border-radius: 3px;
	text-align: center;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

#login h1 {
	background: none;
	/* color: #fff; */
	margin-bottom: 10px;
}

#login .login_info {
	padding: 10px;
}

#login div.submit {
	clear: both;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
	border-top: 1px solid #3a4d61;
}

.login-change {
	margin: 0;
	margin-top: 10px;
}

.login-change a {
	text-decoration: underline;
}


.icon-help {
	width: 20px;
	text-align: center;
	line-height: 30px;
	padding-left: 5px;
}

#tooltip {
	position: fixed;
	display: inline-block;
	background: linear-gradient(#ffe387, #ffdd6e);
	color: #674d29;
	font-weight: 500;
	border: 1px solid #dcac24;
	padding: 5px 10px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	border-top-left-radius: 0;
	display: none;
	white-space: nowrap;
}

#user_section {
	background-color: #1f2934;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	margin-bottom: 15px;
}

#user_tools {
	box-sizing: border-box;
	padding: 0 5px;
	background-color: #1f2934;
}

#user_tools {
	display: flex;
	gap: 5px;
	border-top: 1px dashed #283a4a;
	border-bottom: 1px dashed #283a4a;
}

#user_tools a {
	/*box-sizing: border-box;*/
	position: relative;
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	text-align: center;
	flex-grow: 1;
}

#user_tools a span {
	position: absolute;
	background: #e73434;
	color: #fff;
	top: 1px;
	right: 0;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	line-height: 16px;
	font-size: 10px;
}

#user_tools a:hover i {
	color: #fff;
}

#app-logo {
	padding: 5px;
	text-align: center;
}

#app-logo img {
	width: 75%;
	display: block;
	margin: 0 auto
}

#user_info {
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding: 5px;
}

/* Sibebar */
#sidebar {
	position: fixed;
	box-sizing: border-box;
	left: 0;
	top: 0;
	bottom: 0;
	width: 220px;
	padding: 0 10px;
	padding-bottom: 20px;
	overflow-y: auto;
}

#logo {
	text-align: center;
	height: 36px;
	line-height: 36px;
	color: #fff;
	background: #2b3b4d;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* Main Menu */
#main-menu {
	margin-bottom: 15px;
}

#main-menu a {
	background: #1f2934;
	display: block;
	padding: 8px 10px;
	text-decoration: none;
	margin-bottom: 1px;
	border-radius: 3px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

#main-menu a.region {
	background: #1f342f;
	text-align: center;
	margin-top: 10px;
}

#main-menu i {
	margin-right: 10px;
	font-size: 16px;
	width: 20px;
	text-align: center;
}

#main-menu a.active {
	background: #3b4d62;
	color: #fff;
}

#main-menu a.region.active {
	background: #35574f;
	color: #fff;
}

#main-menu a:hover {
	background: #2b3b4d;
	transition: 200ms;
}

#cc-tools {
	display: flex;
}

#cc-tools input {
	flex-grow: 1;
	width: 85%;
}

#cc-tools i {
	margin-right: 0;
	width: 15%;
	line-height: 30px;
	cursor: pointer;
}

#important-message {
	background: #7e2222;
	border: 1px solid #f95454;
	color: #fff;
	padding: 5px 10px;
	border-radius: 3px;
	margin-bottom: 15px;
	text-align: center;
	/* font-size: 12px; */
}

/* Content */
#content {
	position: fixed;
	left: 220px;
	top: 40px;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	padding: 10px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.flex-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.cols {
	display: flex;
	gap: 20px;
}

.col {
	box-sizing: border-box;
	width: 100%;
	flex-grow: 1;
	/* flex-shrink: 1; */
}

.col-2,
.col-2-1 {
	width: 50%;
}

.col-3-1 {
	width: 33%;
}

.col-3-2 {
	width: 66%;
}

.col-4-1 {
	width: 25%;
}

.col-4-3 {
	width: 75%;
}

.col-5-1 {
	width: 20%;
}

.col-6-1 {
	width: 16.66%;
}

.col-5-2 {
	width: 40%;
}

.col-5-4 {
	width: 80%;
}

.side-column {
	float: right;
	width: 45%;
}

.main-column {
	float: left;
	width: 50%;
}

.panel,
.panel-small {
	background: #1f2934;
	padding: 15px;
	border-radius: 3px;
	margin-bottom: 15px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	width: fit-content;
}

.panel-small {
	padding: 5px 10px;
}

.panel h1 {
	margin: -15px;
	margin-bottom: 15px;
	background: #2a3b4c;
	/* border-bottom: 1px solid #252525; */
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	padding: 5px 20px;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}

.panel .submit:last-child {
	margin: -15px;
	margin-top: 10px;
	background: #2a3b4c;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.sub-panel {
	background: #202020;
	border-radius: 3px;
	margin-bottom: 1px;
	padding: 5px 10px;
}

section {
	display: block;
	margin-bottom: 30px;
	margin-right: 30px;
}

.scroll {
	overflow-y: auto;
}

/* Reveal */
.tools-hidden {
	display: none;
}

.tools-reveal:hover .tools-hidden {
	display: block;
}

/* Module */
#module-tools {
	position: fixed;
	top: 0;
	left: 220px;
	right: 0;
	height: 36px;
	line-height: 36px;
	padding: 0;
	display: flex;
	overflow: hidden;
}

#module-tools span.module-name {
	display: inline-block;
	padding: 0 10px;
	font-weight: 400;
}

#module-tools a {
	display: inline-block;
	line-height: 36px;
	padding: 0 10px;
	margin-right: 3px;
	background: #1f2934;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	z-index: 1000;
}

#module-tools a i {
	margin-right: 5px;
}

#module-tools a:hover {
	background: #2b3b4d;
}

#module-tools a.active {
	background: #3b4d62;
	color: #fff;
}

#module-tools a span {
	display: inline-block;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	background: #ff7e7e;
	font-size: 12px;
	color: #000;
	text-align: center;
	border-radius: 8px;
	font-weight: 600;
	padding: 0 2px;
}

#module-tools span.sep {
	display: inline-block;
	padding: 0 10px;
}

.pulse-important {
	background: #7e2222 !important;
	animation: pulse-important 1.5s infinite;
}

.pulse-icon {
	animation: pulse-icon 1.5s infinite;
}

.submit-error {
	display: none;
	background-color: #7e2222 !important;
	border: 1px solid #f95454;
	color: #fff;
	padding: 5px 10px;
	border-radius: 3px;
	margin-top: 5px;
	text-align: center;
}

.results {
	margin: 20px 0;
}

/* Tables */
table {
	width: auto;
	border-spacing: 1px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

table.full {
	width: 100%;
}

table.tight td {
	padding: 3px 5px;
}

table.nobreak td {
	white-space: nowrap;
}

table.spread {
	border-spacing: 2px;
}

td,
th {
	padding: 10px;
}

thead td,
th,
tfoot td {
	font-weight: 500;
	/* color: #fff; */
	background: #2b3b4d;
}

tbody td {
	background: #1f2934;
}

tbody tr:nth-child(even) td {
	background: #172028;
}

tbody tr:hover td {
	background: #3b4d62;
	transition: 150ms;
}

tfoot td {
	text-align: right;
}

td.left {
	text-align: left;
}

td.center {
	text-align: center;
}

td.right {
	text-align: right;
}

tbody tr.selected td {
	background: #4f5f00;
}

tbody tr.selected:nth-child(even) td {
	background: #5d6c14;
}

tr.delete td {
	opacity: 0.2;
	background: rgb(255, 0, 0) !important;
}

/* Forms */
form {
	margin: 0px;
}

.set {
	display: flex;
	clear: both;
	padding: 2px 0px;
	width: 100%;
}

label {
	/* display: inline-block; */
	box-sizing: border-box;
	width: 150px;
	padding-top: 7px;
	padding-right: 5px;
	text-align: right;
	flex-shrink: 0;
}

.options-set {
	box-sizing: border-box;
	padding: 5px;
	width: 100%;
}

.options-set.margins input {
	margin-bottom: 5px;
}

.options-set.flex {
	display: flex;
	gap: 10px;
}

.options-set.flex div {
	width: auto;
	flex-grow: 1;
}

.options-set.flex div.single-line {
	width: auto;
	flex-grow: 0;
	margin-right: 10px;
}

.options-set.flex div.single-line input {
	margin-right: 5px;
}

.options-set.flex div.single-line label:hover {
	color: #fff;
	cursor: pointer;
}

.slider-info {
	display: flex;
}

.slider-info div {
	flex-grow: 1;
	text-align: center;
	position: relative;
}

input {
	box-sizing: border-box;
	width: 100%;
	background: #070d12;
	padding: 5px;
	height: 30px;
	line-height: 16px;
	border: none;
	border-bottom: 1px solid #2b9589;
	border-radius: 3px;
	color: #fff;
	vertical-align: middle;
}

input:disabled {
	opacity: 0.5;
}

input[type=radio] {
	width: 14px;
	vertical-align: middle;
	margin: 0px;
	margin-right: 5px;
	color-scheme: dark;
	accent-color: #8dd400;
}

input[type=date],
input[type=time] {
	color-scheme: dark;
}

input[type=color] {
	width: 30px;
	height: 30px;
	border: none;
	vertical-align: middle;
	padding: 0px;
}

select {
	box-sizing: border-box;
	background: #070d12;
	padding: 5px;
	height: 30px;
	width: 100%;
	line-height: 16px;
	border-radius: 3px;
	border: none;
	border-bottom: 1px solid #2b9589;
	color: #fff;
}

select option.colored {
	color: #000;
}

.gappy input {
	margin-bottom: 5px;
}

/* Sizes */
.tiny {
	max-width: 40px !important;
	text-align: center;
}

.short {
	max-width: 100px !important;
	text-align: center;
}

.small {
	/* max-width: 400px !important; */
	height: 60px !important;
	text-align: left;
}

.large {
	width: 400px;
}

td input {
	width: auto;
}

/* Textarea */
.long {
	max-width: 500px !important;
}

.numbers-2 {
	max-width: 50px;
}

/* Alignment */
.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

input[type=submit],
input[type=button],
button,
a.button {
	background: #1adfca;
	color: #000;
	font-weight: 600;
	border: none;
	line-height: 30px;
	border-radius: 6px;
	text-align: center;
	min-width: 32px;
	padding: 0 10px;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);

}

a.button {
	display: inline-block;
	box-sizing: border-box;
	padding: 5px;
	line-height: 20px;
	min-width: 100px;
}

input[type=submit].false,
input[type=button].false,
button.false {
	background: #ff8a8a;
}

input[type=submit].false:hover,
input[type=button].false:hover,
button.false:hover {
	background: #ffd2d2;
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover,
a.button:hover,
span.button:hover {
	background: #9befe6;
}

button i {
	margin-right: 5px;
}

button.only-icon i {
	margin-right: 0;
}

.pagination button i {
	margin: 0;
}

.pagination a.button {
	min-width: 32px;
}

input[type=checkbox] {
	width: 14px;
	/*height: 14px;*/
	margin: 0px;
	margin-right: 5px;
	color-scheme: dark;
	accent-color: #8dd400;
}

select option:disabled {
	/*background: #606060;*/
	color: rgb(100, 100, 100);
}

textarea {
	box-sizing: border-box;
	width: 100%;
	background: #070d12;
	padding: 5px;
	height: 150px;
	line-height: 16px;
	border: none;
	border-bottom: 1px solid #2b9589;
	border-radius: 3px;
	color: #fff;
	vertical-align: middle;
}

textarea.text {
	height: 400px;
}

.ck-editor__editable_inline {
	min-height: 400px;
}

select[multiple] {
	min-width: 210px;
	min-height: 150px;
}

input.good {
	border-color: #7dad03;
	background-color: #eef6e0;
}

.bad {
	background-color: #d78383 !important;
}

.bad:hover {
	background-color: #f7a9a9 !important;
}

.toggle-button {
	border: 1px solid #252525;
	background: #040404;
	border-radius: 3px;
	height: 22px;
	line-height: 22px;
	cursor: pointer;
	padding: 1px;
}

.toggle {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 24px;
	background: #303030;
	border-radius: 3px;
	text-align: center;
}

.toggle i {
	font-size: 12px;
	line-height: 22px;
	vertical-align: text-bottom;
}

.toggle-button[data-status="on"] {
	background: #8dd400;
	text-align: right;
}

.toggle-button[data-status="off"] {
	background: #ff7e7e;
	text-align: left;
}

.toggle-button[data-status="draft"] {
	background: #ffcb64;
	text-align: left;
}

/*.toggle-button[data-status="1"] { background: #8dd400; text-align: right; }
	.toggle-button[data-status="0"] { background: #ffcb64; text-align: left; }*/

div.submit {
	clear: both;
	margin-top: 10px;
	padding: 10px;
	text-align: right;
	border-top: 1px solid #3a4d61;
}

div.submit span.info {
	display: inline-block;
	background-color: #3a4d61;
	padding: 5px 10px;
	border-radius: 3px;
	line-height: 18px;
	color: #fff;
}

div.submit span i {
	margin-right: 10px;
	font-size: 18px;
}

div.submit input,
div.submit button,
td input[type="submit"] {
	width: auto;
	min-width: 100px;
	vertical-align: top;
}

/* div.submit.left { text-align: left; padding-left: 105px; } */
div.submit.media-top {
	border-bottom: 1px solid #252525;
	;
	border-top: none;
	margin-bottom: 10px;
}

div.submit.media-top h1 {
	float: left;
}

.button-icon {
	background: #2a3b4c;
	display: inline-block;
	width: 32px;
	height: 28px;
	text-align: center;
	line-height: 28px;
	border-radius: 3px;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.button-icon i {
	font-size: 14px;
	line-height: 26px;
	text-align: center;
}

.button-icon:hover {
	background-color: #51687f;
}

.button-icon:hover i {
	color: #fff;
}

.selection {
	display: inline-block;
	background: #e99d00;
	color: #000;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	text-align: center;
	margin-right: 10px;
	font-weight: 500;
}

button:disabled {
	opacity: 0.3;
}

/* Sort */
.sort {
	background: #2a3b4c;
	padding: 5px 10px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	margin-bottom: 5px;
	cursor: move;
	display: flex;
	gap: 5px;
}

.sort_idf {
	width: 40px;
	color: #fff;
}

.sort_center {
	width: 180px;
}

.sort_lane {
	width: 70px;
}

.sort_reports_name {
	/* width: 100px; */
}

/* Toolbars */
.toolbar-icon {
	width: 30px;
	line-height: 32px;
	font-size: 14px;
	text-align: center;
	display: inline-block;
	margin-right: 10px;
	color: #fff;
}

/* Filters */
.filters form {
	display: inline-block;
}

.filters-tools {
	padding: 5px;
	margin-bottom: 5px;
	line-height: 32px;
}

.filters-tools .filter {
	display: inline-block;
	padding-right: 10px;
	margin-right: 10px;
	/* border-right: 1px dashed #293a4b; */
}

.filters-tools label {
	display: inline-block;
	width: auto;
	padding: 0px;
	margin-right: 5px;
	background: none;
	border: 0px;
}

.filters-tools input,
.filters-tools select {
	margin-bottom: 0px;
	width: auto;
}

.filter-helper {
	display: inline-block;
}

.filter-helper i {
	margin-left: 5px;
}

/* Helper Tools */
.helpers {
	width: 250px;
}

span.helper-action,
span.helper-button,
a.helper-button {
	display: inline-block;
	background: #c395fd;
	padding: 0 10px;
	border-radius: 3px;
	cursor: pointer;
	margin-right: 5px;
	line-height: 24px;
	border-radius: 3px;
	color: #000;
	font-weight: 600;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.helper-button i {
	color: #000;
	margin-right: 5px;
	width: 20px;
	text-align: left;
	font-size: 14px;
}

.helper-action:hover,
.helper-button:hover {
	background: #dcc5f9;
}

span.helper-action i {
	font-size: 12px;
	margin-right: 5px;
	color: #000;
}

.helper {
	background-color: #141b23;
	border: 1px solid #394d60;
	border-radius: 3px;
	margin-bottom: 15px;
}

.helper header {
	background-color: #2a3b4c;
	padding: 2px 10px;
	color: #fff;
}

.helper header i {
	margin-right: 5px;
}

.helper label {
	width: 60px;
}

/*
.helper .options {
	white-space: nowrap;
}
*/

.helper .helper-button {
	width: 100%;
	padding: 0;
}

.panel .helper div.submit {
	margin: 0;
	margin-top: 5px;
	padding: 0;
	padding-top: 5px;
	background-color: transparent;
	text-align: center;
	border-top: 1px dashed #3a4d61;
}

.helper button {
	width: 100%;
}

.helper-buttons .helper-button {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 15px;
}


/* Helper Window NEW */
#helper-window {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(1px);
	display: none;
	justify-content: center;
	align-items: center;
}

#helper-window[style*='display: block'] {
	display: flex !important;
}

#helper-tool {
	width: fit-content;
	background: #1f2934;
	/* gap: 10px; */
	border-radius: 3px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
	max-width: 96%;
	max-height: 96%;
	overflow: auto;
}

#helper-tool>header {
	background-color: #3b4d62;
	font-weight: 400;
	color: #fff;
	height: 32px;
	line-height: 32px;
	margin-bottom: 5px;
	padding: 0 10px;
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
}

#helper-tool header i {
	margin-right: 5px;
}

#helper-tool header .helper-close {
	float: right;
	cursor: pointer;
	font-size: 18px;
	line-height: 32px;
	margin-left: 20px;
	margin-right: 0;
}

#helper-content,
.helper-content {
	padding: 10px;
}

#helper-tool .set {
	display: flex;
	gap: 10px;
}

#helper-tool .set .label {
	width: 140px;
	text-align: right;
	line-height: 18px;
	padding: 5px 0;
}

#helper-tool .set.nopad .label {
	padding: 0;
	/* line-height: 24px; */
}

#helper-tool .options-set {
	color: #fff;
}

#helper-tool .options {
	display: flex;
	line-height: 30px;
	gap: 10px;
	flex-grow: 1;
	width: fit-content;
	white-space: nowrap;
}

#helper-tool .options.no-flex {
	display: block;
}

#helper-tool .options.no-flex span,
#helper-tool .options.no-flex a {
	display: block;
	margin-bottom: 10px;
}

#helper-tool .options div {
	white-space: nowrap;
}

#helper-tool .options i {
	line-height: 30px;
}

#helper-tool .options input {
	width: auto;
	margin-right: 0;
}

#helper-tool .options input[type="radio"] {
	margin-left: 5px;
}

#helper-tool .submit {
	padding: 0;
	padding-top: 10px;
}

#helper-tool .options {
	color: #fff;
}

.checkboxes {
	display: block;
}

.checkboxes.columns-2 {
	columns: 2;
}

.checkboxes-centers {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	columns: unset;
}

.checkboxes div {
	margin-bottom: 10px;
}

.checkboxes-centers div {
	width: 200px;
}

.checkboxes label {
	text-align: left;
	width: auto;
	cursor: pointer;
	user-select: none;
}

.checkboxes label:hover {
	color: #fff;
}

.checkboxes input {
	height: 14px;
}

#helper-tool table {
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);
}

.notice {
	border-bottom: 1px solid #3a4d61;
	margin: 0;
	padding: 5px;
	margin-bottom: 5px;
}

.system {
	color: #99ff86;
}

#call {
	position: fixed;
	right: 30px;
	top: 10px;
	padding: 10px;
	border-radius: 3px;
	background: #505050;
	border: 1px solid #707070;
	/* box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); */
}

#call i {
	margin-right: 5px;
}

#call.oncall {
	background-color: #4a5936;
	border-color: #9acd32;
	color: #fff;
	animation: pulse 1.5s infinite;
}

#call.oncall span {
	cursor: pointer;
}

/* Updates */
.update {
	display: block;
	box-sizing: border-box;
	background: #1f2934;
	padding: 10px;
	border-radius: 3px;
	margin-bottom: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	width: 100%;
	cursor: pointer;
}

.update i {
	width: 16px;
}

.update .update-date {
	color: #9fc6f1;
	display: inline-block;
	margin-right: 5px;
	font-size: 12px;
}

.update .update-from {
	color: #eaf19f;
	display: inline-block;
	margin-right: 5px;
	font-size: 12px;
}

.update .update-title {
	color: #fff;
}

.update:hover {
	background: #2b3b4d;
}

.pulse-read {
	/*background: #7e2222 !important;*/
	animation: pulse-read 1.5s infinite;
}

/* Help */
.help-category {
	display: block;
	box-sizing: border-box;
	background: #1f2934;
	padding: 10px;
	border-radius: 3px;
	margin-bottom: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	width: auto;
	cursor: pointer;
}

.help-category.lvl-1 {
	margin-left: 20px;
	width: auto;
}

.help-category i {
	width: 20px;
	text-align: center;
}

.help-category.active {
	background: #3b4d62;
	color: #fff;
}

.panel.help {
	width: auto;
	max-width: 100%;
}

.panel.help img {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	border: 1px solid #000;
	max-width: 100%;
	height: auto;
}

.help .links a {
	display: block;
	margin: 5px 0;
}

.help a {
	color: #fff;
}

/* Pagination */
.pagination {
	margin-top: 10px;
}

.pagination .current {
	display: inline-block;
	min-width: 30px;
	text-align: center;
	font-weight: 500;
}

.pagination .results {
	margin-left: 10px;
	font-weight: 500;
}


/* Other */
.hint {
	display: inline-block;
	font-style: italic;
	font-size: 12px;
	margin-bottom: 10px;
}

.hint span {
	font-weight: 400;
}


span.email {
	display: inline-block;
	background: #4f5263;
	padding: 2px 5px;
	border-radius: 3px;
}


.warning {
	margin: 0;
	padding: 5px;
	margin-bottom: 5px;
	text-align: left;
	border-bottom: 1px solid #3a4d61;
}

.warning i {
	margin-right: 5px;
}

/*.warning img {
	float: left;
	margin-right: 5px;
}

.warning p {
	padding: 5px;
	background: #ffbbbb;
	border: 1px solid #cd9696;
	border-radius: 3px;
}*/

.last {
	margin-right: 0px !important;
}

.good {
	background: rgba(178, 255, 51, 0.2) !important;
}

.link {
	cursor: pointer;
}



.hidden {
	display: none;
}

.nobreak {
	white-space: nowrap;
}

.auto {
	width: auto;
}

/* Icons Colors */
.fa-edit {
	color: #ffcb64;
}

.fa-user-edit {
	color: #ffb961;
}

.fa-times {
	color: #ff7e7e;
}

.fa-ban {
	color: #ff7e7e;
}

.fa-archive {
	color: #ff7e7e;
}

.fa-plus {
	color: #8dd400;
}

.fa-bars {
	color: #fff;
}

.fa-check {
	color: #8dd400;
}

.fa-eye {
	color: #8dd400;
}

.fa-folder-open {
	color: #ff9817;
}

.fa-exclamation-triangle {
	color: #ffcb64;
}

.fa-palette {
	color: #f4a871;
}

.fa-step-forward {
	color: #8dd400;
}

.fa-step-backward {
	color: #ff7e7e;
}

.fa-minus-circle {
	color: #ff7e7e;
}

.fa-map-marker-alt {
	color: #ff5d5d;
}

.fa-language {
	color: #7bffd3;
}

.fa-crop-alt {
	color: #ff95d0;
}

.fa-project-diagram {
	color: #ff9817;
}

.fa-download {
	color: rgb(0, 80, 80);
}

.fa-css3-alt {
	color: #ffa933;
}

.fa-file-code {
	color: #99f3ff;
}

.fa-js {
	color: #a8ff97;
}

.fa-euro-sign {
	color: #e0ff81;
}

.fa-sign-in-alt {
	color: #8dd400;
}

.fa-sign-out-alt {
	color: #ff7e7e;
}

.fa-clock {
	color: #d26ac2;
}

.fa-check-circle {
	color: #8dd400;
}

.fa-times-circle {
	color: #ff7e7e;
}

.fa-eye-slash {
	color: #ff7e7e;
}

.fa-history {
	color: #99ff20;
}

.fa-car {
	color: #52ead8;
}

.fa-truck {
	color: #90acff;
}

.fa-tractor {
	color: #ff90d3;
}

.far.fa-star {
	color: #655332;
}

.fas.fa-star {
	color: #ffcb64;
}

.fa-flag-checkered {
	color: #eaeaea;
}

.fa-calendar-plus {
	color: #8dd400;
}

.fa-user-slash {
	color: #ff7e7e;
}

.fa-sync-alt {
	color: #ffcb64;
}

.fa-user-plus {
	color: #8dd400;
}

.fa-th {
	color: #e1b76c;
}

.fa-calendar-alt {
	color: #53d5f1;
}

.fa-calendar-day {
	color: #53d5f1;
}

.fa-car-crash {
	color: #ff7e7e;
}

.fa-exclamation {
	color: #ff7e7e;
}

.fa-trash-alt {
	color: #ff7e7e;
}

.fa-grip-lines {
	color: #75d625;
}

.fa-asterisk {
	color: #ffcb64;
}

.fa-newspaper {
	color: #9dd8ff;
}

.fa-question-circle {
	color: #b0ffaf;
}

.fa-power-off {
	color: #ff9191;
}

.fa-money-bill-alt {
	color: #50f050;
}

.fa-star {
	margin-right: 1px;
}

.fa-calendar-check {
	color: #53d5f1;
}

.fa-sticky-note {
	color: #ffcb64;
}

.fa-file-medical {
	color: #ff9191;
}

.fa-headphones-alt {
	color: #ffcb64;
}

.icon i {
	width: 20px;
	text-align: center;
}

.log-message i {
	display: inline-block;
}

.log-action i {
	width: 20px;
	text-align: center;
}

.log-module {
	font-size: 16px;
	text-align: center;
}

.log-field {
	display: inline-block;
	background: #424242;
	border-radius: 3px;
	padding: 2px 5px;
	/* margin-right: 5px; */
	border: 1px solid #5e5e5e;
	color: #fff;
}

.log-icon {
	width: 25px;
	text-align: center;
}

.screen-center {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

.slot-table {
	display: inline-block;
	background: #424242;
	border-radius: 3px;
	padding: 2px 5px;
	/* margin-right: 5px; */
	border: 1px solid #5e5e5e;
	color: #fff;
}

.date-table {
	display: inline-block;
	background: #424242;
	border-radius: 3px;
	padding: 2px 5px;
	/* margin-right: 5px; */
	border: 1px solid #5e5e5e;
	color: #fff;
}

/* Date in Daily */
.date {
	font-size: 18px;
	color: #fff;
	margin-left: 10px;
}

.lane-type {
	display: inline-block;
	background: #424242;
	border-radius: 3px;
	padding: 2px 5px;
	margin-right: 5px;
	border: 1px solid #5e5e5e;
	color: #fff;
	white-space: nowrap;
	/* line-height: 24px; */
}

.lane-type i {
	/* border-right: 1px solid #5e5e5e; */
	font-size: 16px;
	background: rgba(0, 0, 0, 0.25);
	width: 30px;
	margin: -2px -5px;
	line-height: 25px;
	text-align: center;
	margin-right: 2px;
}

.slot-history-item {
	padding: 5px;
	margin-bottom: 5px;
}

/* Users */
.users-view {
	padding: 10px;
	/* width: auto; */
}

.users-view section {
	margin-bottom: 10px;
}

.users-edit {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
}

.users-edit-l {
	width: 400px;
	min-width: 400px;
}


/* Animations */
@keyframes blink {
	0% {
		box-shadow: 0 0 10px 3px #e99d00;
	}

	100% {
		box-shadow: 0 0 7px 1px #e99d00;
	}
}

@keyframes selected {
	0% {}

	100% {
		background: #cfffc3;
	}
}

/*
.selected td {
	animation-name: selected;
	animation-duration: 0.1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
*/

@keyframes highlight {
	0% {
		transform: scale(1, 1);
	}

	10% {
		transform: scale(1, 0);
	}

	20% {
		background: #fffbdd;
		transform: scale(1, 1);
	}

	80% {
		background: #fffbdd;
	}

	100% {}
}

.highlight {
	animation-name: highlight;
	animation-duration: 2s;
	animation-timing-function: alternate;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes information {
	0% {
		transform: scale(0, 1);
	}

	10% {
		transform: scale(1, 1);
	}

	90% {
		transform: scale(1, 1);
	}

	100% {
		transform: scale(0, 1);
	}
}

.information {
	animation-name: information;
	animation-duration: 4s;
	animation-timing-function: alternate;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 #9acd32ff;
	}

	100% {
		box-shadow: 0 0 0 8px #9acd3200;
	}
}

@keyframes pulse-important {
	0% {
		box-shadow: 0 0 0 0 #f95454;
	}

	100% {
		box-shadow: 0 0 0 8px #7e222200;
	}
}

@keyframes pulse-read {
	0% {
		box-shadow: 0 0 0 0 #ffcb64;
	}

	100% {
		box-shadow: 0 0 0 3px #ffcb6400;
	}
}

@keyframes pulse-icon {
	0% {
		text-shadow: 0 0 0 #7dd391;
		color: #7dd391;
	}

	50% {
		text-shadow: 0 0 8px #7dd391;
		color: #fff;

	}

	100% {
		text-shadow: 0 0 0 #7dd391;
		color: #7dd391;
	}
}

/* Bookings HORIZONTAL */
.bookings-header-special {
	font-size: 13px;
	margin-left: 10px;
	font-weight: 300;
	border-left: 1px solid #394d60;
	padding-left: 10px;
	color: #fff;
}

.bookings-header-special i {
	margin-right: 10px;
}

.bookings-day {
	display: flex;
	gap: 2px;
	margin-bottom: 10px;
	/* text-align: center; */
}

.bookings-day header {
	background: #3a4d61;
	padding: 2px 5px;
	/* margin-bottom: 1px; */
	text-align: left;
	/*	cursor: pointer;*/
	color: #fff;
	border-radius: 3px;
	width: 80px;
	line-height: 16px;
}

span.dow {
	display: inline-block;
	font-size: 12px;
	color: #9fc6f1;
}

.bookings-day header span.dow {
	display: block;
	/* font-size: 12px;
	color: #9fc6f1; */
}

.bookings-day-lanes .bookings-day-lane:first-child {
	margin-top: 0;
}

.bookings-day-lane {
	display: flex;
	gap: 2px;
	margin-top: 2px;
	/* flex-grow: 1; */
}

.bookings-day-lane header {
	background: #394d60;
	/* line-height: 24px; */
	width: 40px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}

.bookings-day-lane header i {
	font-size: 18px;
	line-height: 36px;
}

.bookings-day-times {
	display: flex;
	gap: 2px;
}

.bookings-day-time,
.bookings-slot-add {
	background: #0e151c !important;
	padding: 2px;
	text-align: center;
	cursor: pointer;
	height: 36px;
	line-height: 36px;
	border-radius: 3px;
	width: 46px;
	position: relative;
	overflow: hidden;
}

.bookings-slot-add {
	background: #293b4b !important;
}

.bookings-day-time.double-slot {
	width: 98px;
}

.bookings-day-time.bs_status_1 {
	display: none;
}

.bookings-day-time i.bookings-icon {
	position: absolute;
	display: block;
	top: 2px;
	right: 2px;
	font-size: 10px;
	color: #ffcb64;
}

.bookings-day-time.bs_status_0:hover,
.bookings-slot-add:hover {
	background-color: #3b4d62 !important;
}

.bookings-day-time.bs_status_0 {
	background-color: #293b4b !important;
}

.bookings-day-time.selected {
	background-color: #925f00 !important;
}

.bookings-day-time.bs_status_2 {
	color: #ffa500;
}

.bookings-day-time.bs_status_3 {
	color: #9acd32;
}

.bookings-day-time.bs_status_4 {
	color: #00b8ff;
}

.bookings-day-time.bs_status_5 {
	color: #af7cff;
}

.bookings-day-time.bs_status_6 {
	color: #ffab10;
}

.bookings-day-time.bs_status_7 {
	color: #fb6262;
}

.bookings-day-time.inactive {
	opacity: 0.2;
	cursor: not-allowed;
}

.slot-disabled,
.slot-disabled header,
tr.slot-disabled td,
.slots-item.disabled {
	background: repeating-linear-gradient(135deg, #5a1313, #5a1313 1px, #300c0c 1px, #300c0c 12px) !important;
}

.bs_status_0.slot-disabled {
	background: repeating-linear-gradient(135deg, #135a22, #135a22 1px, #0c3011 1px, #0c3011 12px) !important;
}

.bookings-day-time.returned-4 {
	background: linear-gradient(0, #00b8ff 8%, #0e151c 0%) !important;
}

.bookings-day-time.returned-5 {
	background: linear-gradient(0, #af7cff 8%, #0e151c 0%) !important;
}

.bookings-day-time.returned-6 {
	background: linear-gradient(0, #ffab10 8%, #0e151c 0%) !important;
}

/* Bookings Edit */
#bookings-edit {
	width: 770px;
	height: 600px;
	overflow: auto;
	padding-right: 15px;
}

.bookings-edit-date {
	font-size: 14px;
	color: #fff;
	/* background-color: #3a4d61; */
	/* border-bottom: 1px solid #3a4d61; */
	margin-top: 10px;
	padding: 2px 5px;
}

.bookings-edit-lane {
	background-color: #141b23;
	border-radius: 3px;
	padding: 2px 5px;
}

.bookings-edit-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-top: 1px;
	margin-bottom: 5px;
}

.bookings-edit-slot {
	background-color: #293b4b;
	text-align: center;
	padding: 0 5px;
	border-radius: 3px;
	line-height: 32px;
}

.bookings-edit-slot input[type=radio] {
	height: auto;
	line-height: normal;
	line-height: 32px;
	cursor: pointer;
}

.bookings-edit-slot label {
	padding: 0;
	line-height: 32px;
	cursor: pointer;
}

.bookings-edit-slot label:hover {
	color: #fff;
}

/* Bookings Daily */
.lanes {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.bookings-daily-lane {
	border-right: 1px solid #293a4b;
	padding-right: 20px;
	width: 500px;
	flex-shrink: 1;
}

.lanes .bookings-daily-lane:last-child {
	border-right: 0;
}

.bookings-daily-lane h1 {
	font-size: 18px;
	font-weight: 300;
	border-bottom: 1px solid #293a4b;
	padding: 0;
	padding-bottom: 10px;
	color: #fff;
	margin-bottom: 10px;
	line-height: 24px;
}

.bookings-daily-lane h1 .center_type {
	font-size: 16px;
}

.bookings-daily-lane h1 .lane-type {
	font-size: 14px;
	float: right;
	margin-right: 0;
}

.bookings-daily {
	position: relative;
	overflow: hidden;
	background: #1f2934;
	padding: 0;
	border-radius: 3px;
	margin-bottom: 2px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

.bookings-daily-content {
	margin-top: 5px;
	padding: 5px;
}

.collapsed .bookings-daily-content {
	display: none;
}

.bookings-daily header {
	display: flex;
	padding: 2px;
	margin-bottom: 0;
	cursor: pointer;
	border-radius: 3px;
	border: 1px solid #2b3b4d;
}

.bd-time {
	color: #fff;
	font-size: 16px;
	flex-grow: 1;
	line-height: 26px;
}

.bs-status {
	text-align: right;
}

.bd-collapse {
	color: #fff;
	margin: 0 5px;
	text-align: right;
	font-size: 18px;
	line-height: 25px;
}

.bd-customer-info {
	display: table-row;
	border-right: 1px solid #fff;
}

.bd-customer-info div {
	display: table-cell;
	padding: 5px;
}

.bd-customer-title {
	width: 80px;
	text-align: right;
}

.bd-customer-data {
	color: #fff;
}

.bd-tools span {
	display: block;
	/* width: 100%; */
	margin-bottom: 10px;
}

.customer-history div {
	margin: 2px 0;
}

/* Timetables */
.timetable {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
}

.timetable-day {
	flex-grow: 1;
	flex-shrink: 0;
}

.timetable-day header {
	height: 30px;
	line-height: 30px;
	background: #3b4d62;
	border-radius: 3px;
	padding: 2px 10px;
	margin-bottom: 1px;
	text-align: center;
	cursor: pointer;
}

.timetable-slot {
	background: #293b4b;
	/* border: 1px solid #3a4d61; */
	margin-bottom: 1px;
	height: 30px;
	line-height: 30px;
	border-radius: 3px;
	padding: 2px;
	padding-left: 5px;
	text-align: center;
}

.timetable-slot input {
	width: 80px;
	text-align: center;
	vertical-align: unset;
}

.timetable footer {
	flex-basis: 100%;
}

.timetable-day[data-selected="1"] header {
	background: orange;
	color: #000;
}

.timetable-slot .slot-remove {
	padding: 2px 5px;
	background: #10161e;
	border-radius: 3px;
	margin-left: 5px;
	cursor: pointer;
}

.field {
	display: inline-block;
	background: #000;
	padding: 2px 5px;
}

/* Statuses FORMAT THIS TO BE NORMAL AND USE EVERYWHERE */
.status {
	display: inline-block;
	background: #505050;
	padding: 0;
	/* padding-right: 10px; */
	border: 1px solid #707070;
	border-radius: 3px;
	color: #fff;
	font-size: 12px;
	line-height: 24px;
	white-space: nowrap;
}

.status.interactive {
	cursor: pointer;
}

.status i {
	background: rgba(0, 0, 0, 0.25);
	display: inline-block;
	line-height: 24px !important;
	width: 24px;
	text-align: center;
	/* border-right: 1px solid; */
	/* margin-right: 5px; */
}

.status.interactive:hover,
.bool.interactive:hover {
	border-color: #fff !important;
}

.status.interactive:hover i {
	border-color: #fff;
	color: #fff;
}

/*
.status.reserved {
	background-color: #8d5c2a;
	border-color: #ffa500;
}

.status.confirmed {
	background-color: #4a5936;
	border-color: #9acd32;
}
*/
.status-booking {
	display: inline-block;
	background: #505050;
	padding: 0;
	padding-right: 5px;
	border: 1px solid #707070;
	border-radius: 3px;
	color: #fff;
	font-size: 12px;
	line-height: 24px;
	white-space: nowrap;
}

.status-booking.interactive {
	cursor: pointer;
}

.status-booking i {
	background: rgba(0, 0, 0, 0.25);
	display: inline-block;
	line-height: 24px !important;
	width: 24px;
	text-align: center;
	margin-right: 5px;
}

.status.interactive:hover,
.bool.interactive:hover {
	border-color: #fff !important;
}

.status.interactive:hover i {
	border-color: #fff;
	color: #fff;
}

.status.reserved {
	background-color: #8d5c2a;
	border-color: #ffa500;
}

.status.confirmed {
	background-color: #4a5936;
	border-color: #9acd32;
}

.status.active,
.status.Active,
.bool.Active {
	background-color: #31431a;
	/* 4a5936 */
	border-color: #8dad4d;
	/* 9acd32 */
}

.status.inactive,
.status.Inactive,
.bool.Inactive {
	background-color: #7e2222;
	border-color: #f95454;
}

.status.deleted {
	background-color: #7e2222;
	border-color: #f95454;
}

.bool {
	display: inline-block;
	background: #31431a;
	padding: 1px;
	height: 24px;
	border: 1px solid #8dad4d;
	border-radius: 14px;
	font-size: 12px;
	line-height: 24px;
	white-space: nowrap;
	cursor: pointer;
}

.bool i {
	display: inline-block;
	width: 24px;
	line-height: 24px;
	border-radius: 12px;
	text-align: center;
}

.bool.Active i {
	background-color: #131c04;
}

.bool.Inactive i {
	background-color: #290707;
}

.bool i.disabled {
	background-color: transparent;
	opacity: 0.5;
	color: #fff;
}

.date-table.bad {
	background-color: #7e2222 !important;
	border-color: #f95454;
}

.date-table.medium {
	background-color: #594836;
	border-color: #ffa500;
}

.date-table.good {
	background-color: #4a5936;
	border-color: #9acd32;
}

.slot-table.reserved {
	background-color: #594836;
	border-color: #ffa500;
}

.slot-table.confirmed {
	background-color: #4a5936;
	border-color: #9acd32;
}

.lane-type-Regular {
	background-color: #165d55;
	border-color: #52ead8;
}

.lane-type-Heavy {
	background-color: #313e69;
	border-color: #90acff;
}

.lane-type-Poligon {
	background-color: #693161;
	border-color: #ff90d3;
}

.lane-option-Regular {
	color: #52ead8;
}

.lane-option-Heavy {
	color: #90acff;
}

.lane-option-Poligon {
	color: #ff90d3;
}

select option.selected {
	color: #9acd32;
}

.bs_status_2 {
	background-color: #8d5c2a;
	border-color: #ffa500 !important;
	/* color: #ffd99b;   594836*/
}

.bs_status_3 {
	background-color: #4a5936;
	border-color: #9acd32 !important;
	/*color: #c8eda1;*/
}

.show {
	background-color: #214080;
	border-color: #538dfc !important;
	/* color: #ffd99b;*/
}

.bs_status_7 {
	background-color: #7e2222;
	border-color: #f95454 !important;
	/*color: #c8eda1;*/
}

.bs_status_4 {
	background-color: #214080;
	border-color: #538dfc !important;
}

.bs_status_5 {
	background-color: #50227e;
	border-color: #af7cff !important;
}

.bs_status_6 {
	background-color: #805608;
	border-color: #ffab10 !important;
}

.kdo {
	display: inline-block;
	background: #042e91;
	border: 1px solid #2b5ac3;
	color: #fff;
	border-radius: 3px;
	padding: 2px 5px;
	font-size: 12px;
}

/* Centers */
/*.centers {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}*/

.center_cont {
	display: flex;
	gap: 10px;
	background-color: #1e2934;
	margin-bottom: 20px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	padding: 10px;
	width: fit-content;
}

.center_info {
	border-right: 1px solid #293a4b;
	padding-right: 10px;
	width: 250px;
}

.center_header {
	display: flex;
	justify-content: space-between;
	/* background-color: #283a4a; */
	/* padding: 5px; */
	/* border-radius: 3px; */
}

.center_header h3 {
	line-height: 26px;
}

.center_footer {
	display: flex;
	justify-content: space-between;
}

.center_name {
	color: #fff;
	font-weight: 400;
	margin: 0;
	font-size: 16px;
}

.center_type {
	display: inline-block;
	border: 1px solid #3b6999;
	background-color: #274e77;
	width: 30px;
	text-align: center;
	border-radius: 3px;
	color: #fff;
}

.ct-DC {
	background-color: #594b79;
	border-color: #7f66b9;
}

.lanes_cont {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.lane_report_name {
	color: #fff;
	margin: 0;
	/* margin-bottom: 2px; */
	/* border-bottom: 1px solid #3a4d61; */
	padding-bottom: 2px;
}

.lane_basic {
	display: flex;
	gap: 10px;
	margin-bottom: 5px;
	border-bottom: 1px solid #3a4d61;
	padding: 5px 0;
}

.lane_info {
	border: 1px solid #293a4b;
	padding: 5px;
	border-radius: 3px;
	background-color: #141b23;
	/* 10161e */
}

.lane_info div {
	color: #fff;
}

.lanes_header {
	display: flex;
	justify-content: space-between;
	height: 26px;
	padding: 5px;
}

.lanes_header h3 {
	line-height: 26px;
}

.lane_info .lane-type {
	margin-right: 0;
}

.lane_status {
	padding: 2px 0;
}

.lane-id,
.lane-idf {
	width: 25px;
}

.lane-idmup {
	width: 50px;
}

.lane_tools {
	border-top: 1px solid #3a4d61;
	padding-top: 5px;
	text-align: right;
}

.block {
	display: block;
}

.small-text {
	font-size: 10px;
	line-height: 12px;
	color: #b5c3d3;
}

.cl-sep {
	margin: 0 5px;
	color: #fff;
}

/* User Types */
.user-types-list {
	/* display: flex;
	flex-wrap: wrap; */
	gap: 20px;
	margin-top: 10px;
	columns: 5;
}

.user-types-module {
	margin-bottom: 20px;
	break-inside: avoid-column;
}

.user-types-module table {
	width: 100%;
	border: 1px solid #394d60;
}

.user-types-module tr.header th {
	padding: 5px;
	background-color: #141b23;
	/* border: 1px solid #394d60; */
	/* border-bottom: 0; */
}

.user-types-module th {
	padding: 5px 10px;
	color: #fff;
	font-weight: 400;
}

.user-types-module td {
	padding: 5px 10px;
}

.user-types-module input {
	margin-right: 0;
}

/* Modules */
.module-icon {
	width: 20px;
	text-align: center;
	margin-right: 5px;
	font-size: 16px;
}

/* Slots new way */
.slots-date {
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 5px;
	margin-top: 20px;
	padding: 5px 10px;
	/* border-bottom: 1px solid #3b4d62; */
	/* border-radius: 3px; */
	/* background-color: #2b3b4d; */
}

.slots-date span {
	color: #719cc9;
	font-size: 14px;
}

.slots-items {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.slots-item {
	border: 1px solid #293a4b;
	padding: 5px;
	border-radius: 3px;
	/* background-color: #1f2934; */
	/* #0e151c */
	text-align: center;
	width: 170px;
	height: 60px;
}

.slots-item.bs_status_0 {
	background-color: #1f2934;
}

.slots-item.slot-double {
	width: 357px;
}

.slots-item div {
	margin-bottom: 5px;
}

.slots-header {
	display: flex;
	justify-content: space-between;
}

.slots-header div {
	margin-bottom: 0;
}

.slots-item .slots-minutes {
	font-size: 20px;
	font-weight: 400;
	color: #fff;
	line-height: 26px;
}

.slots-item .slots-info {
	display: flex;
	justify-content: space-between;
}

/* Pricing */
.pricing-item {
	display: flex;
	gap: 10px;
	border-radius: 3px;
	padding: 0;
	margin-bottom: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	background-color: #293b4b;
}

.pricing-item .pricing-item-article {
	padding: 5px 10px;
	width: 75%;
}

.pricing-item .pricing-item-price {
	padding: 5px 10px;
	width: 25%;
	text-align: right;
	border-left: 1px solid #1e2934;
	display: flex;
}

.pricing-item.interactive-add:hover {
	background-color: #3b4d62 !important;
	cursor: pointer;
}


/* Reports */
.reports-choice {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 20px 0;
}

.reports-choice a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 100px;
	border: 1px solid #293a4b;
	background-color: #1e2934;
	text-align: center;
	border-radius: 3px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	color: #fff;
	line-height: 32px;
}

.reports-choice a i {
	font-size: 24px;
	margin-bottom: 5px;
}

.reports-choice a:hover {
	background-color: #2b3b4d;
}

.reports-th-center {
	text-align: left;
	background: #000;
	color: #fff;
}

tr.final-total td {
	background-color: #2b3b4d !important;
}

tr.not-reported td {
	background-color: #5a1313 !important;
	color: #fff;
	font-weight: 400;
}

/* Tabs */
.tabs-control {
	display: flex;
	gap: 3px;
	margin-bottom: 20px;
}

.tabs-name {
	line-height: 36px;
	margin-right: 10px;
	color: #fff;
	font-weight: 300;
}

.tabs-control a {
	display: block;
	background-color: #1e2934;
	padding: 8px 12px;
	border-radius: 3px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

.tabs-control a i {
	margin-right: 5px;
}

.tabs-control a.active {
	background: #3b4d62;
	color: #fff;
}

/* Settings */
#settings table {
	width: 100%;
}

.info {
	color: #c28ff5;
}

#page-load-time {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #3f2c6b;
	border: 1px solid #714ebb;
	padding: 2px 5px;
	color: #ccbded;
}

/* Stats */
section.graph {
	margin: 0;
	margin-bottom: 30px;
}

.graph-bars {
	position: relative;
	width: 100%;
	height: 300px;
	margin-bottom: 50px;
}

.graph-bars .graph-actual {
	position: absolute;
	left: 20px;
	bottom: 20px;
	right: 20px;
	top: 20px;
	border-left: 1px solid #606060;
	border-bottom: 1px solid #606060;
}

.graph-bars .horizontal-line {
	position: absolute;
	width: 100%;
	border: 1px solid #ccc;
}

.graph-bars .graph-data {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	gap: 10px;
	padding: 0 10px;
}

.graph-bars .graph-data .graph-bar-cont {

	width: 100%;
	height: 100%;
	align-items: flex-end;
	/*	flex-direction: column;*/
	display: flex;
	position: relative;
	/*	height: 100%;*/
	/*	background: #4c93d1;*/
	/*	border-top-left-radius: 6px;
	border-top-right-radius: 6px;*/
	/*	overflow: hidden;*/
}

.graph-bar {
	width: 100%;
	/*	align-self: flex-end;*/
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	overflow: hidden;
	visibility: hidden;
}

.graph-bar-text {
	position: absolute;
	/*		bottom: -20px;*/
	top: 100%;
	text-align: center;
	font-size: 10px;
	width: 100%;
}

.graph-bar-total {
	position: absolute;
	/*		bottom: -20px;*/
	bottom: 100%;
	text-align: center;
	font-size: 10px;
	width: 100%;
}

.graph-bar-items {
	position: absolute;
	display: flex;
}

.graph-bar-item {
	width: 100%;
	text-align: center;
	font-size: 10px;
}

.graph-bar-item:hover {
	color: #000 !important;
	background: #97c6dd !important;
	transition: 0.3s;
}

.graph-bar-item.reserved {
	align-self: flex-end;
	background: #027bb3;
	color: #027bb3;
}

.graph-bar-item.confirmed {
	align-self: flex-end;
	background: #005b87;
	color: #005b87;
}

.hl {
	position: absolute;
	left: 0;
	right: 0;
	border: none;
	border-bottom: 1px solid #303030;
	margin: 0;
}

.hl-10 {
	bottom: 10%;
}

.hl-20 {
	bottom: 20%;
}

.hl-30 {
	bottom: 30%;
}

.hl-40 {
	bottom: 40%;
}

.hl-50 {
	bottom: 50%;
}

.hl-60 {
	bottom: 60%;
}

.hl-70 {
	bottom: 70%;
}

.hl-80 {
	bottom: 80%;
}

.hl-90 {
	bottom: 90%;
}

.hl-100 {
	bottom: 100%;
}

.lnum {
	position: absolute;
	left: 0;
	right: 0;
	width: 20px;
	margin: 0;
	font-size: 10px;
	height: 20px;
	left: -20px;
	line-height: 20px;
}

.lnum-0 {
	bottom: calc(0% - 10px);
}

.lnum-20 {
	bottom: calc(20% - 10px);
}

.lnum-40 {
	bottom: calc(40% - 10px);
}

.lnum-60 {
	bottom: calc(60% - 10px);
}

.lnum-80 {
	bottom: calc(80% - 10px);
}

.lnum-100 {
	bottom: calc(100% - 10px);
}

@keyframes bar-grow {
	0% {
		visibility: visible;
		transform: scaleY(0);
		transform-origin: bottom;
	}

	100% {
		visibility: visible;
		transform: scaleY(1);
		transform-origin: bottom;
	}
}

.graph-bar {
	animation-name: bar-grow;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

/*
.graphs-pies,
.graphs-bars-hor {
	margin: 50px 0;
}
	*/

.graph-pie {
	display: inline-block;
	text-align: center;
	margin-right: 20px;
	margin-bottom: 20px;
}

.graph-pie-svg {
	display: block;
}

.graph-pie-svg path:hover {
	fill: #97c6dd;
}

.graph-pie-confirmed {
	fill: #005b87;
}

.graph-pie-manager {
	fill: #027bb3;
}

.graph-pie-web {
	fill: #f0a10e;
}

.graph-pie-center {
	fill: #b77fd3;
}

.graph-pie-callcenter {
	fill: #366eb5;
}

.graph-pie-admin {
	fill: #e63ee9;
}

.pie-anim {
	animation-name: pie-anim;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	visibility: hidden;
}

@keyframes pie-anim {
	0% {
		visibility: visible;
		transform: scale(0);
		transform-origin: center;
	}

	100% {
		visibility: visible;
		transform: scale(1);
		transform-origin: center;
	}
}


/* Horizontal Separate */
.graph-hor {
	display: flex;
	margin-bottom: 5px;
	padding: 5px;
	/* background-color: #1f2934; */
	/* border-radius: 3px; */
	/* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); */
	border-bottom: 1px dashed #1c2934;
}

.graph-hor .graph-hor-rank {
	width: 20px;
	text-align: right;
	padding-right: 10px;
	color: #fff;
	font-weight: 400;
}

.graph-hor .graph-hor-name {
	width: 180px;
	/* line-height: 15px; */
	text-align: left;
	padding-right: 10px;
}

.graph-hor-bar {
	flex-grow: 1;
	height: 25px;
	display: flex;
	background: #1c2934;
	/* border: 1px solid #3b4d62; */
}

.graph-hor-item {
	height: 25px;
	color: #000;
	line-height: 25px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	visibility: hidden;
	animation-name: bar-grow-hor;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.graph-hor-good {
	background: #8dd400;
}

.graph-hor-mid {
	background: #ffcc40;
}

.graph-hor-bad {
	background: #ff6f5b;
}

@keyframes bar-grow-hor {
	0% {
		visibility: visible;
		transform: scaleX(0);
		transform-origin: left;
	}

	100% {
		visibility: visible;
		transform: scaleX(1);
		transform-origin: left;
	}
}

/* Garph: Line */
.graph-line {
	position: relative;
	width: 100%;
	background-color: #1e2934;
}

.graph-line .point {
	z-index: 1000;
}

.graph-line .point:hover {
	r: 5;
	transition-duration: 200ms;
	cursor: pointer;
}

.graph-text {
	font: 7px "Open Sans";
	fill: #fff;
}

/* Graph filters */
.graph-filters {
	display: flex;
}

.graph-filters a {
	display: inline-block;
	border: 1px solid #00b8ff;
	padding: 2px 5px;
	margin: 2px;
}