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.clear {
	border: 0;
}

h1 {
	clear: both;
	margin: 0;
	margin-bottom: 10px;
	/* font-size: 15px; */
	/* color: #fff; */
	font-weight: 500;
}

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

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

h3 {
	color: #fff;
}

h4 {
	color: #fff;
}

.strong,
strong {
	color: #fff;
	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: 12px;
	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;
}

/* Infobox 
#information {
	display: none;
	position: fixed;
	right: 10px;
	top: 10px;
	background: #000;
	color: #fff;
	padding: 10px 20px;
	border-radius: 12px;
	z-index: 1000;
}*/
.icon-help {
	width: 20px;
	text-align: center;
	line-height: 30px;
	padding-left: 5px;
}

/* Sibebar */
#sidebar {
	position: fixed;
	box-sizing: border-box;
	left: 0;
	top: 0;
	bottom: 0;
	width: 200px;
	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;
}

#tools {
	/*position: absolute;
	bottom: 0;
	left: 10px;
	right: 10px;*/
	height: 36px;
	box-sizing: border-box;
	padding: 0 5px;
	background: #2b3b4d;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	display: flex;
	gap: 10px;
}

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

#tools a span {
	position: absolute;
	background: #ff4747;
	color: #ffd9d9;
	top: 1px;
	right: 0;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	line-height: 16px;
	font-size: 10px;

}

#tools a:hover {
	color: #fff;
}

/* MAIN MENU */
#main-menu {
	/* margin-top: 10px; */
	padding: 10px 0;
}

#main-menu a {
	background: #1f2934;
	/* color: #fff; */
	display: block;
	/* height: 25px; */
	/* line-height: 25px; */
	padding: 8px 10px;
	text-decoration: none;
	margin-bottom: 3px;
	border-radius: 12px;
	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.indent {
	margin-left: 10px;
	font-size: 12px;
} */

#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;
}

/* CONTENT */
#content {
	position: fixed;
	left: 200px;
	top: 36px;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	padding: 20px;
}

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

.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-5-4 {
	width: 80%;
}

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

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

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

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

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

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

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

.scroll {
	overflow-y: auto;
}

/* Select Box */
#box {
	display: none;
	position: fixed;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: #303030;
	border: 1px solid #202020;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 0 20px #000;
	z-index: 100;
}

#box .box-content {
	position: absolute;
	top: 70px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	overflow: hidden;
}

#box header {
	height: 30px;
	line-height: 30px;
}

#box header .options {
	float: right;
	font-size: 24px;
	line-height: 30px;
}

#box header .options i {
	cursor: pointer;
}

#box .box-name {
	display: inline-block;
	background: #080808;
	padding: 0 10px;
	margin-right: 10px;
	border-radius: 12px;
}

.tab-switch {
	display: inline-block;
	background: #202020;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
	margin-right: 10px;
	border-radius: 12px;
	border: 1px solid #303030;
}

.tab-switch i {
	margin-right: 5px;
}

.tab-switch.current {
	background: #101010;
	border: 1px solid #e99d00;
}

.tab-content {
	display: none;
}

/* HOME */


/* MODULE */
#module-tools {
	position: fixed;
	top: 0;
	left: 200px;
	right: 0;
	height: 36px;
	line-height: 36px;
	/* background: #121212; */
	padding: 0;
	display: flex;
}

#module-tools span.module-name {
	display: inline-block;
	padding: 0 20px;
	font-weight: 400;
	/* color: #fff; */
	/* background: #080808; */
	/* border-right: 1px solid #252525; */
}

#module-tools a {
	display: inline-block;
	line-height: 36px;
	padding: 0 10px;
	margin-right: 3px;
	/* color: #fff; */
	background: #1f2934;
	/* border-right: 1px solid #252525; */
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

#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: 12px;
	margin-top: 5px;
	text-align: center;
}


.results {
	margin: 20px 0;
}

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

table.full {
	width: 100%;
}

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;
}

td.cell-image img {
	width: 50px;
	height: auto;
	border-radius: 6px;
}

/*
.table {
	display: table;
}

.table-row-header {
	display: table-row;
}

.table-row {
	display: table-row;
}

.table-cell { display: table-cell; }
*/

/* Fix CKEditor popup box glitch */
.cke_reset_all tr:hover td {
	background: transparent;
}

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

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

label {
	box-sizing: border-box;
	width: 100px;
	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;
}

.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: 10px;
}

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

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: 100px !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: 32px;
	border-radius: 16px;
	text-align: center;
	min-width: 32px;
	padding: 0 10px;
}

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

input[type=submit].false,
input[type=button].false,
button.false {
	background: rgba(231, 26, 0, 0.2);
}

input[type=submit].false:hover,
input[type=button].false:hover,
button.false:hover {
	background: rgba(231, 26, 0, 0.5);
}

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

button i {
	margin-right: 5px;
}

.pagination button i {
	margin: 0;
}

input[type=checkbox] {
	width: 14px;
	/*height: 14px;*/

	margin: 0px;

}

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: 12px;
	height: 22px;
	line-height: 22px;
	cursor: pointer;
	padding: 1px;
}

.toggle {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 24px;
	background: #303030;
	border-radius: 12px;
	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: 12px;
	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: 30px;
	height: 26px;
	text-align: center;
	line-height: 26px;
	border-radius: 3px;
	box-shadow: 2px 2px 5px 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: #3a4d61; } */
.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;
}

/*
span.interactive {
	display: inline-block;
	padding: 2px 5px;
	border: 1px solid #888888;
	border-radius: 6px;
	cursor: pointer;
}

span.interactive.deselected {
	background: #404040;
}

span.interactive.selected {
	background: #fcb126;
	color: #000;
}
*/

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

/* Toolbars */
.toolbar-icon {
	width: 30px;
	line-height: 32px;
	font-size: 14px;
	text-align: center;
	display: inline-block;
	/* border-right: 1px solid rgba(255, 255, 255, 0.2); */
	margin-right: 10px;
	color: #fff;
}

/* Filters & Bulk Tools*/
.filters-tools,
.bulk-tools,
.pagination {
	/* background: #1f2934; */
	padding: 5px;
	/* border-radius: 12px; */
	margin-bottom: 5px;
	/* height: 32px; */
	line-height: 32px;
	/* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); */
}

.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;
}

.bulk-tools button {
	background: #050505;
}

.bulk-tools button:hover {
	background: #666;
}

/* Helper Tools */
.helpers {
	margin-top: 5px;
	border-top: 1px solid #293b4b;
	padding-top: 5px;
}

.helpers-icon {
	display: inline-block;
	padding-right: 5px;
	/* border-right: 1px solid #303030; */
	margin-right: 5px;
}

.helpers-icon i {
	font-size: 16px;
}

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

.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;
}

/* 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: 6px;
	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 {
	padding: 10px;
}

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

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

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

#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;
}

#helper-tool .checkboxes {
	display: block;
	columns: 2;
}

#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: 12px;
	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;
}

/* TO BE DEPREC */

.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-window form {
	display: block;
}

.helper-tool {
	background: #1f2934;
	/* gap: 10px; */
	border-radius: 6px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
}

.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,
.helper-tool header .helper-close-depr {
	float: right;
	cursor: pointer;
	font-size: 18px;
	line-height: 32px;
	margin-left: 20px;
	margin-right: 0;
}

.helper-content {
	padding: 10px;
}

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

.helper-tool .set .label {
	width: 100px;
	text-align: right;
	line-height: 30px;
}

.helper-tool .options {
	display: flex;
	line-height: 30px;
	gap: 10px;
}

.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;
}

.helper-tool .checkboxes {
	display: block;
	columns: 4;
}

.options.checkboxes {
	display: block;
	columns: 5;
}


/* Updates */
.update {
	display: block;
	box-sizing: border-box;
	background: #1f2934;
	padding: 10px;
	border-radius: 12px;
	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: 12px;
	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: 6px;
}


.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: 6px;
}*/

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

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

.link {
	cursor: pointer;
}



.hidden {
	display: none;
}

.nobreak {
	white-space: nowrap;
}

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

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

.fa-times {
	color: #ff7e7e;
}

.fa-ban {
	color: #ff7e7e;
}

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

.fa-bars {
	color: #fff;
}

.fa-check {
	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: #ffbd44;
}

.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;
	width: 20px;
}

.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;
}


/* 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-days {
	/*display: block;
	gap: 10px;
	flex-wrap: wrap;*/
}

.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: 6px;
	width: 80px;
	line-height: 16px;
}

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

.bookings-day-lanes {
	/* display: flex; 
	gap: 2px;*/
}

.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: 6px;
	width: 46px;
	position: relative;
	/* border: 1px solid #5e5e5e; */
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* 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: 24px;
	font-weight: 300;
	border-bottom: 1px solid #293a4b;
	padding: 0;
	padding-bottom: 20px;
	color: #fff;
	margin-bottom: 20px;
}

.bookings-daily-lane h1 span {
	font-size: 14px;
	float: right;
	margin-top: -2px;
}

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

.bookings-daily-content {
	/* border-top: 1px solid rgba(255, 255, 255, 0.1); */
	margin-top: 5px;
	padding: 5px;
}

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

/*.bookings-daily-content {
	display: flex;
}*/

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

.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;
}

/*#helper-window textarea {
	width: 300px;
}*/

#helper-window .section[data-section="fail-tools"] {
	display: none;
}

/* Timetables */

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

.timetable-day header {
	height: 30px;
	line-height: 30px;
	background: #3b4d62;
	border-radius: 6px;
	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: 6px;
	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: 12px;
	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;
	border-radius: 12px;
}

.status.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 {
	background-color: #4a5936;
	border-color: #9acd32;
}

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

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

.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;
}

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

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

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

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

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

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

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

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

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

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

.info {
	color: #c28ff5;
}

/* Graphs */
.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 {}

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

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

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

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

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

.graph-pie-operator {
	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;
	height: 30px;
	margin-bottom: 5px;
	border-right: 1px solid #303030;
}

.graph-hor .graph-hor-name {
	width: 150px;
	line-height: 30px;
	text-align: right;
	padding-right: 10px;
}

.graph-hor-bar {
	flex-grow: 1;
	height: 30px;
	display: flex;
	visibility: hidden;
	background: #272727;
}

.graph-hor-item {
	height: 30px;
	color: #fff;
	line-height: 30px;
	text-align: center;
	font-size: 10px;
}

.graph-hor-confirmed {
	background: #005b87;
}

.graph-hor-reserved {
	background: #027bb3;
}

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

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

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