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

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

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

.clear {
	clear: both;
}

body {
	background: #1b1d27;
	margin: 0;
}

.padded {
	margin: 5%;
}

p {
	margin: 10px 0;
}

a {
	text-decoration: none;
	/* color: #ffcb64; */
}

hr {
	height: 1px;
	line-height: 1px;
	border: none;
	border-top: 1px dashed #444964;
	margin: 20px 0;
}

hr.tight {
	margin: 5px 0;
	border-color: #406891;
}

hr.clear {
	border: 0;
}

h1 {
	clear: both;
	margin: 0;
	margin-bottom: 20px;
	font-size: 24px;
	color: #fff;
	font-weight: 100;
	/* text-align: center; */
}

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

h2 {
	clear: both;
	margin: 20px 0;
	/* margin-bottom: 20px; */
	font-size: 18px;
	color: #fff;
	font-weight: 100;
}

/* App Main Elements */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 5%;
	background: #252839;
	display: flex;
	border-bottom: 1px solid #3e4253;
	box-sizing: border-box;
	z-index: 1000;
}

#logo {
	box-sizing: border-box;
	width: 60%;
	line-height: 45px;
	padding: 0 5%;
}

#top-tools {
	width: 40%;
	padding: 0;
	line-height: 45px;
	display: flex;
}

#top-tools a {
	display: inline-block;
	height: 100%;
	line-height: 45px;
	font-size: 16px;
	text-align: center;
	flex-grow: 1;
}

#top-tools a img {
	width: 32px;
	vertical-align: middle;
}

#content {
	position: fixed;
	left: 0;
	top: 5%;
	right: 0;
	bottom: 5%;
	overflow-y: auto;
	padding: 5%;
}

#tools {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5%;
	background: #252839;
	background: radial-gradient(circle at center, #393f5b, #252839);
	display: flex;
	gap: 10px;
	align-items: center;
	border-top: 1px solid #69719b;
	z-index: 100;
}

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

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

#tools a img {
	height: 32px;
	vertical-align: middle;
}

#tools a .notification {
	position: absolute;
	right: 5px;
	top: -5px;
	/*width: 20px;*/
	padding: 0 5px;
	height: 16px;
	border-radius: 3px;
	background: #ffa2a2;
	border: 1px solid #4c1414;
	color: #000;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	font-size: 10px;
}

#chat-send {
	position: fixed;
	box-sizing: border-box;
	bottom: 5%;
	left: 0;
	right: 0;
	height: 5%;
	padding: 0 2%;
	background: #10161e;
}

#chat-send input {
	height: 38px;
}



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

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


/* 
 * SPORTEESH 
 */
#map,
#map-create {
	width: 100%;
	height: 300px;
}

#map-create:after {
	width: 22px;
	height: 40px;
	display: block;
	content: ' ';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -40px 0 0 -11px;
	background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
	background-size: 22px 40px;
	/* Since I used the HiDPI marker version this compensates for the 2x size */
	pointer-events: none;
	/* This disables clicks on the marker. Not fully supported by all major browsers, though */
}

/* Users */
.ul-user {
	display: flex;
	height: 10%;
	/* background-color: #282d40; */
	background: radial-gradient(circle at center left, #393f5b, #1d2033);
	/* border: 1px solid #3e4253; */
	line-height: 50px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
	margin-bottom: 2%;
	padding-right: 5px;
	border-radius: 25px;
	/* border-top-left-radius: 25px; */
	/* border-bottom-left-radius: 25px; */
}

.ul-photo {
	height: 50px;
	width: auto;
	display: block;
	margin-right: 10px;
	border-radius: 50%;
}

.ul-name {
	flex-grow: 1;
	line-height: 50px;
}

.handle {
	font-size: 14px;
	color: #778ac9;
	display: inline-block;
	margin-left: 5px;
}

.ul-tools {
	line-height: 50px;
}

.ul-tools a,
.ul-tools button {
	display: inline-block;
	height: 40px;
	width: 40px;
	line-height: 40px;
	background-color: #161720;
	border-radius: 21px;
	text-align: center;
	border: 1px solid #506a9e;
	padding: 0;
}

.ul-tools>img {
	/* display: inline-block; */
	height: 32px;
	vertical-align: middle;
}

.ul-tools a img,
.ul-tools button img {
	display: inline-block;
	height: 32px;
	margin-top: 4px;
	vertical-align: top;
}



.friend-request input,
.friend-request button {
	line-height: 16px !important;
}

.user-scoring img {
	display: inline-block;
	background-color: #2b3b4d;
	line-height: 40px;
	width: 40px;
	margin: 5px 0;
	text-align: center;
}

.user-scoring img.selected {
	background-color: #4c698b;
}

/* Sporteesh Public Profile */
h1.public-name {
	margin: 10px auto;
	width: fit-content;
	text-align: center;
}

.public-photo {
	position: relative;

}

.public-photo img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 50%;
}

.profile-tools {
	/* border-top: 1px solid #3a4d61; */
	/* border-bottom: 1px solid #3a4d61; */
	padding: 5px 0;
	margin: 20px 0;
	display: flex;
	gap: 20px;
}

.profile-tools a {
	flex-grow: 1;
}

h2.profile-section-title {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 30px;
	font-size: 32px;
}

h2.profile-section-title img {
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

h3.profile-challenges-title {
	font-weight: 100;
	text-align: center;
	color: #fff;
	margin: 0;
}

.profile-challenges-number {
	display: flex;
	background: radial-gradient(ellipse at bottom center, #393f5b 0%, #393f5b00 70%);
	text-align: center;
	font-size: 52px;
	line-height: 64px;
	height: 100px;
	vertical-align: bottom;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 1);
	justify-content: center;
	align-items: flex-end;
	border-bottom: 1px solid #506a9e;
	/* margin-bottom: 20px; */
}

.profile-challeges-sport {
	display: flex;
	border-bottom: 1px solid #506a9e;
	/* margin-bottom: 10px; */
	padding: 10px 0;
}

.profile-challeges-sport-name {
	width: 50%;
	text-align: center;
}

.profile-challeges-sport-data {
	width: 25%;
	text-align: center;
	line-height: 32px;
}

.profile-skills-sport-data img {
	vertical-align: middle;
}

.played {
	color: #8adaff !important;
}

.created {
	color: #ffe596 !important;
}

.profile-challeges-sports .profile-challeges-sport:last-child {
	border-bottom: none;
}

.profile-skills-sports {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.profile-skills-sport {
	width: 29%;
	text-align: center;
	position: relative;
}

.profile-skills-sport-name {
	background: radial-gradient(ellipse at bottom center, #393f5b 0%, #393f5b00 70%);
}

.profile-skills-sport-name img {
	width: 50%;
	height: auto;
}

.profile-skills-sport-name span {
	display: block;
	background-color: #44495c;
	color: #bac8ff;
	border-radius: 3px;
}

.profile-skills-icons {
	display: flex;
}

.profile-skills-sport-self {
	width: 30%;
	text-align: center;
}

.profile-skills-sport-skill {
	width: 60%;
	text-align: center;
}

.profile-skills-sport-self img,
.profile-skills-sport-skill img {
	width: 100%;
	height: auto;
	/* vertical-align: middle; */
}

.public-team-users {
	display: flex;
	gap: 10px;
}

.public-team-user {
	width: 10%;
	background: #005b87;
	text-align: center;
}

.public-team-user img {
	width: 100%;
	height: auto;
}

.public-photo i {
	position: absolute;
	right: 5px;
	bottom: 5px;
	display: block;
	background: #10161e;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 15px;
}

.sports img {
	width: 24px;
	vertical-align: middle;
}

.profile-button {
	flex-grow: 1;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	background-color: #161720;
	border-radius: 21px;
	text-align: center;
	border: 1px solid #506a9e;
	padding: 0;
}

.profile-button>img {
	/* display: inline-block; */
	height: 32px;
	vertical-align: middle;
}


.pop {
	display: none;
	position: fixed;
	left: 10%;
	right: 10%;
	top: 10%;
	bottom: 10%;
	background: #2b3b4d;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
	padding: 5%;
	border-radius: 12px;
}

.close-pop {
	padding: 5px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	background-color: #0e151c;
	border-radius: 6px;
}

/* Chats */
.chats-list-chat {
	position: relative;
	display: flex;
	height: 10%;
	line-height: 50px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
	margin-bottom: 2%;
	border-radius: 12px;
	background-color: #282d40;
}

.chats-list-chat .unread {
	position: absolute;
	right: 0;
	top: 0;
	/*width: 20px;*/
	padding: 0 5px;
	height: 16px;
	border-radius: 3px;
	background: #ffa2a2;
	border: 1px solid #4c1414;
	color: #000;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	font-size: 10px;
}

.chats-list-chat img {
	height: 50px;
	width: auto;
	display: block;
	/* margin-right: 10px; */
}

.chats-list-chat .name {
	flex-grow: 1;
	
	padding: 0 10px;
}

.chats-list-chat .name a {
	flex-grow: 1;
	line-height: 25px;
	color: #fff;
}

.chats-list-chat .message {
	font-size: 14px;
	margin: 2px 0;
}

/*
#chat
.chat-item.me
.chat-sender-image
.chat-message-block
.chat-sender-name
.chat-message
*/

#chat-title {
	position: fixed;
	left: 0;
	right: 0;
	top: 5%;
	background-color: #282d40;
	height: 5%;
	z-index: 100;
	padding: 0 5%;
	display: flex;
}

.chat-info,
.chat-tools {
	line-height: 45px;
	color: #fff;
}

.chat-info {
	flex-grow: 1;
}

.chat-info img {
	width: 32px;
	line-height: 45px;
	vertical-align: middle;
}

#chat {
	position: fixed;
	top: 11%;
	left: 3%;
	right: 3%;
	bottom: 11%;
	display: flex;
	flex-direction: column-reverse;
	overflow-y: scroll;
}

.chat-item {
	display: flex;
	width: 100%;
	gap: 5px;
	margin-bottom: 10px;
}

.chat-sender-image {
	width: 10%;
}

.chat-sender-image img {
	width: 100%;
	height: auto;
}

.chat-message-block {
	width: 60%;
	background: #3b425e;
	padding: 2%;
	border-radius: 6px;
	border-top-left-radius: 0;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}

.chat-sender-name {
	color: #fff;
	font-size: 12px;
}

.chat-item.me {
	flex-direction: row-reverse;
}

.chat-item.me .chat-sender-name {
	display: none;
}

.chat-item.me .chat-sender-image {
	display: none;
}

.chat-item.me .chat-message-block {
	background: #282d40;
	border-top-left-radius: 6px;
	border-top-right-radius: 0;
}

#chat-create {
	position: fixed;
	right: 2%;
	bottom: 6%;
	width: 60px;
	height: 60px;
	background: #ff4a4a;
	color: #fff;
	border-radius: 30px;
	text-align: center;
	line-height: 60px;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}

#chat-create i {
	color: #000;
}

/* Common Elements */
#add-button {
	position: fixed;
	right: 2%;
	bottom: 6%;
	width: 60px;
	height: 60px;
	background: #ff4a4a;
	border-radius: 30px;
	text-align: center;
	line-height: 60px;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}

#add-button i {
	color: #000;
}

/* Challenges */
/* Challenges List */
.chl-challenge {
	/* background-color: #282d40; */
	background: radial-gradient(ellipse at center, #393f5b, #202230);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
	/* border: 1px solid #3e4253; */
	margin-bottom: 15px;
	padding: 0;
	border-radius: 12px;
	position: relative;
}

.chl-main-info {
	height: 80px;
	/* border-bottom: 1px solid #141620; */
	padding: 20px;
}

.chl-sport-name {
	font-size: 24px;
	color: #fff;
	margin-bottom: 15px;
}

.chl-date-time {
	font-size: 18px;
	margin-bottom: 10px;
}

.chl-date {
	color: #89e5ff;
}

.chl-time {
	color: #79fee0;
}

.chl-sport-icon {
	position: absolute;
	right: 10px;
	top: 10px;
	height: 100px;
}

.sport-icon {
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.chl-distance {
	font-size: 16px;
	color: #ff9c00;
}

.chl-private {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 16px;
	margin-right: 5px;
	vertical-align: top;
	/* text-transform: uppercase; */
	background-color: #594836;
	border: 1px solid #ffa500;
	color: #fff;
}

.chl-finished {
	display: inline-block;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 16px;
	margin-right: 5px;
	vertical-align: top;
	/* text-transform: uppercase; */
	background-color: #3a7229;
	border: 1px solid #b7ff65;
	color: #fff;
	margin-bottom: 10px;
}

.chl-secondary-info {
	/* border-top: 1px solid #3e4253; */
	display: flex;
}

.chl-secondary-info>div {
	flex-grow: 1;
	text-align: center;
	/* border-bottom: 1px solid #141620; */
	/* border-right: 1px solid #141620; */
	/* border-left: 1px solid #3e4253; */
	padding: 5px;
}

.chl-secondary-info div:first-child {
	border-left: none;
}

.chl-secondary-info div:last-child {
	border-right: none;
}

.chl-si-title {
	font-size: 12px;
	margin-bottom: 5px;
}

.chl-si-price .chl-si-title {
	color: #96fc3c;
}

.chl-si-skill .chl-si-title {
	color: #3cbffc;
}

.chl-si-intensity .chl-si-title {
	color: #fccb3c;
}

.chl-si-price .chl-si-info {
	color: #c0ff89;
}

.chl-si-skill .chl-si-info {
	color: #8adaff;
}

.chl-si-intensity .chl-si-info {
	color: #ffe596;
}

.chl-si-info img {
	width: 24px;
	vertical-align: middle;
}

/* .intensity-any { color: #8adaff; } */
.intensity-low {
	color: #90e200;
}

.intensity-medium {
	color: #e59e00;
}

.intensity-high {
	color: #e01000;
}

.chl-participants {
	/* border-top: 1px solid #3e4253; */
	/* border-bottom: 1px solid #141620; */
	padding: 20px;
	display: flex;
	gap: 20px;
}

.chl-creator {
	width: 33%;
	position: relative;
}

.chl-creator img {
	width: 100%;
	border-radius: 50%;
}

.chl-creator-name-cont {
	position: absolute;
	top: 90px;
	left: 0;
	right: 0;
}

.chl-creator-name {
	position: relative;
	background-color: #44495c;
	color: #bac8ff;
	font-size: 14px;
	width: fit-content;
	padding: 2px 5px;
	border-radius: 3px;
	margin: 0 auto;
}

.chl-action {
	/* border-top: 1px solid #3e4253; */
	padding: 20px;
}

.chl-users-info {
	width: 66%;
}

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

.chl-user {
	width: 18%;
}

.chl-user img {
	width: 100%;
	border-radius: 50%;
	display: block;
}

.chl-user.free {
	opacity: 0.2;
}

.chl-users-text {
	margin-top: 5px;
}

.chl-users-text div {
	color: #d6defd;
	font-size: 14px;
	line-height: 20px;
}

.chl-requests {
	padding: 10px 20px;
	border-top: 1px solid #3e4253;
	border-bottom: 1px solid #3e4253;
}

.chl-r-available {
	color: #c0ff89;
}


/* Challenge */
.challenge {
	/* background-color: #282d40; */
	background: radial-gradient(ellipse at center, #393f5b, #202230);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
	/* border: 1px solid #3e4253; */
	margin-bottom: 15px;
	padding: 0;
	border-radius: 12px;
	position: relative;
}

/*
.challenge-sport-gfx {
	position: absolute;
	width: 100px;
	height: 100px;
	right: 0;
	top: 0;
	border-radius: 12px;
}

.challenge-creator-photo {
	width: 100px;
	height: 100px;
	border-radius: 12px;
}

.challenge-sport-gfx-history {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 0;
	top: 0;
	border-radius: 12px;
}

.challenge-creator-photo-history {
	width: 50px;
	height: 50px;
	border-radius: 12px;
}

.spot {
	display: flex;
	gap: 10px;
	background-color: #2b3b4d;
	padding: 5px 10px;
	margin-bottom: 5px;
	border-radius: 12px;
}
*/

.chl-map {
	padding: 0;
	margin: 0;
	margin-top: 20px;
	border-top: 1px solid #3e4253;
	border-bottom: 1px solid #3e4253;
}

.chl-note {
	padding: 20px;
	border-bottom: 1px solid #3e4253;
}

.chl-note h2 {
	margin-top: 0;
}

.chl-info {
	padding: 20px;
	border-bottom: 1px solid #3e4253;
}

.chl-info strong {
	color: #fff;
}

.chl-users-data {
	padding: 10px 20px;
}

.requests_available {
	color: #ff8282;
}

/* Tags */
.tag {
	font-size: 14px;
	display: inline-block;
	background: #424242;
	line-height: 14px;
	padding: 5px;
	border-radius: 6px;
	border: 1px solid #5e5e5e;
	color: #fff;
}

.tag-friends {
	background-color: #3a7229;
	border-color: #b7ff65;
	color: #fff;
}

.tag-accepted {
	background-color: #3a7229;
	border-color: #b7ff65;
	color: #fff;
}

.tag-requested {
	background-color: #594836;
	border-color: #ffa500;
	color: #fff;
}

.tag-owner {
	background-color: #594836;
	border-color: #ffa500;
	color: #fff;
}

.tag-finished {
	background-color: #3a7229;
	border-color: #b7ff65;
	color: #fff;
}

.tag-active {
	background-color: #594836;
	border-color: #ffa500;
	color: #fff;
}

.tag-canceled {
	background-color: #593636;
	border-color: #ec5f5f;
	color: #fff;
}

/* Teams */
.teams-list-user {
	display: flex;
	height: 10%;
	background-color: #172028;
	line-height: 50px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
	margin-bottom: 2%;
}

.teams-list-user img {
	height: 50px;
	width: auto;
	display: block;
	margin-right: 10px;
}

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

.tab {
	flex-grow: 1;
	flex-basis: 0;
	text-align: center;
	background: #1f2934;
	padding: 10px 0;
}

.tab.active {
	color: #fff;
	background-color: #2b3b4d;
}

.filters {
	background-color: #282d40;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 12px;
	/* border: 1px solid #3e4253; */
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.filters form {
	display: flex;
	gap: 10px;
}

/* 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 */


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

td,
th {
	padding: 10px;
}

thead td,
th,
tfoot td {
	font-weight: 500;
	/* color: #fff; */
	/* background: #2b3b4d; */
	background-color: #2e3551;
	/* border: 1px solid #3e4253; */
}

tbody td {
	background: #282d40;
}

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

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: 10px;
	/* height: 30px; */
	line-height: 16px;
	border: none;
	border-bottom: 1px solid #00a4fc;
	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;
}

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 #00a4fc;
	color: #fff;
}

select option.colored {
	color: #000;
}

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

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: #0ca5ff;
	color: #000;
	font-weight: 300;
	font-size: 18px;
	border: none;
	/* line-height: 32px; */
	border-radius: 6px;
	text-align: center;
	min-width: 32px;
	padding: 10px;
}

a.button {
	display: block;
	padding: 5px;
	line-height: 32px;
	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 #00a4fc;
	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 0;
	text-align: center;
	/* border-top: 1px solid #3a4d61; */
}

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

/* 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: #ff4a4a;
	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;
}

.info {
	padding: 10px;
	background-color: #070d12;
	border-radius: 12px;
	border: 1px solid #2a3b4c;
	margin: 10px 0;
}

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


/* 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: #ff9817;
}

.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: #e7cb2c;
}

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

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

.fa-js {
	color: #a8ff97;
}

.order-shipped {
	color: #8dd400;
}

.order-pending {
	color: #ffcb64;
}

.order-canceled {
	color: #ff7e7e;
}

.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: #75a7fc;
}

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

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

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

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

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

.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-star {
	margin-right: 1px;
}

.gold {
	color: gold;
}

.silver {
	color: silver;
}

.bronze {
	color: #d36600;
}

.int-low {
	color: #8dd400;
}

.int-medium {
	color: #ffcb64;
}

.int-high {
	color: #ff7e7e;
}

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

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

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

/* 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 {
	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-day-time.double-slot {
	width: 98px;
}

/* Bookings [INACTIVE] */
/*.bookings-days {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bookings-day {
	text-align: center;
}

.bookings-day header {
	background: #3a4d61;
	padding: 2px 10px;
	margin-bottom: 1px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
}

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

.bookings-day-lane {
	flex-grow: 1;
}

.bookings-day-lane header {
	background: #394d60;
	line-height: 24px;
}

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

.bookings-day-time {
	background: #0e151c !important;
	margin-bottom: 2px;
	padding: 2px 5px;
	text-align: center;
	cursor: pointer;
	height: 30px;
	line-height: 30px;
	border-radius: 6px;
}

.bookings-day-time.double-slot {
	height: 66px;
	line-height: 66px;
}
*/

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

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

.bookings-day-time.selected {
	background-color: #955a03;
}

.bookings-day-time.empty {
	background-color: #293b4b !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 5%, #0e151c 5%) !important;
}

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

.bookings-day-time.returned-break {
	background: linear-gradient(0, #ffab10 5%, #0e151c 5%) !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-option-Regular {
	color: #52ead8;
}

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

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

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