body {
	margin: 0px;
	padding: 0px;
	background: #222222 url('/includes/images/wowbg.jpg') no-repeat center center fixed;
	background-size: cover;
	font-family: 'Open Sans';
	color: #DEDEDE;
}

:root {
	--calendar-online: #00A99D;
	--calendar-online-withKey: #fd7e14;
	--keytable-interest: #27776E;
	--keytable-hasKey: #2D599B;
	--keytable-interest-hasKey: #C96332;
	--firstrow-width: 200px;
	--dungeon-width: 134px;
	--m-firstrow-width: 120px;
	--m-dungeon-width: 100px;
}

h3 {
	margin-top: 25px;
	margin-bottom: 25px;
	font-weight: 300;
	text-transform: uppercase;
}

h4 {
	margin-top: 40px;
	margin-bottom: 15px;
	font-size: 1.5rem;
	font-weight: 300;
}

.form-button {
	margin-top: 30px;
}

.form-button .btn {
	margin-right: 20px;
}

.site-header {
	background-color: #080808;
	height: 60px;
}
.site-header a {
	color: #DBD6CF;
	transition: ease-in-out color .15s;
}
.site-header a:hover {
	color: #fff;
	text-decoration: none;
}
.site-header .navbar-brand {
	height: 50px;
	line-height: 40px;
}
.site-header .navbar-collapse {
	padding-top: 2px;
}

.form-signin {
	width: 100%;
	max-width: 420px;
	padding: 15px;
	margin: auto;
	margin-top: 50px;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid #222222;
}

.navbar-toggler {
	color: #FFF;
}

.nav-link {
	padding-right: 1rem;
	padding-left: 1rem;
	text-transform: uppercase;
	font-size: 14px;
}

.navbar-collapse {
	z-index: 100;
	background-color: #080808;
/*	background-color: rgba(0, 0, 0, .85); */
/*	padding: 20px;*/
}

.dropdown-menu {
	background-color: rgba(0, 0, 0, .85);
	border: 1px solid #262626;
	font-size: 14px;
}

.dropdown-menu a:hover {
	background-color: rgba(255, 255, 255, .15);
}

.alert-cd {
	background-color: rgba(100, 100, 100, 0.1);
	border: 1px solid #262626;
}

.tableDark {
	border: 0px;
}

.tableDark thead th, .tableDark thead td {
	border: 0px;
	color: #FFF;
}

.tableDark td {
	border: 1px solid #262626;
	color: #FFF;
}

.tableDark tr:nth-child(even) td {
	background-color: rgba(75, 75, 75, 0.10);
}

.colorHint td:nth-child(1) div {
	width: 40px;
}

.colorHint td:nth-child(2) {
	padding-left: 15px;
}

.characterTable td {
	vertical-align: text-bottom;
	vertical-align: middle;
}

.characterTable td span {
	color: #666;
}

.characterTable img {
	border: 1px solid rgba(100, 100, 100, 0.40);
}

.interestedDungeons {
	margin-right: -20px;
}

.interestedDungeons div {
	display: inline-block;
	width: calc(100% - 20px);
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 0px;
	font-weight: 300;
	line-height: 40px;
	height: 40px;
}

.interestedDungeons div.btn-under-edit {
	background: #E2903E;
	color: #FFF;
	cursor: auto;
}

.interestedDungeons div input {
	margin: 0px;
	border: 0px;
	border-radius: 3px;
	font-size: 1rem;
	height: 29px;
	font-weight: 300;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	margin-top: 5px;
	margin-left: 5px;
	width: calc(100% - 90px);
}

.interestedDungeons i {
	margin-top: 10px;
	vertical-align: bottom;
	height: 29px;
	padding-left: 10px;
	font-size: 20px;
	cursor: pointer;
}

@media (min-width: 992px) {
	.interestedDungeons div {width: calc(100% / 3 - 20px);}
}

@media (min-width: 1200px) {
	.interestedDungeons div {width: calc(100% / 4 - 20px);}
}

/* calendar */

#calendar-date {
	margin-top: -35px;
}

@media (max-width: 1200px) {
	#calendar-date {
		margin-top: 25px;
		margin-bottom: -15px;
	}
}

#calendar {
	width: 100%;
	overflow-x: auto;
	padding: 1px;
}

#calendar table {
	width: 100%;
	min-width: 1200px;
}

#calendar table thead td {
	text-transform: uppercase;
	height: 48px;
	width: calc(100%/7);
}

#calendar table tbody td {
	border: 1px solid #262626;
	height: 48px;
	padding: 0px;
	font-size: 12px;
	vertical-align: baseline;
	width: calc(100%/7);
}

#calendar table tbody td .time {
	border-left: 21px solid #181819;
	color: #8C8C8C;
	color: #4C4C4C;
	height: 11px;
	line-height: 10px;
	padding-left: 10px;
	margin: 10px 0px 0px 0px;
	width: 100%;
}

#calendar table tbody td.active, #calendar table tbody td.active * {
	background: transparent;
	cursor: pointer;
}

#calendar table tbody td.active .time {
	border-left: 21px solid var(--calendar-online);
	color: #FFF;
}

#calendar table tbody td .info {
	width: 100%;
	color: #00A99D;
	margin: 0px;
	padding-left: 30px;
}

#calendar table tbody td.interested .time {
	border-left: 21px solid var(--calendar-online-withKey);
	color: #FFF;
}

#calendar table tbody td.interested .info {
	color: var(--calendar-online-withKey);
}


#calendar table tbody td.filtered .time {
	border-left: 21px solid #444;
	color: #444;
}

#calendar table tbody td.filtered .info {
	color: #444;
}

#eventModal {
	color: #333;
}

#eventModal .availableUsers {
	padding-left: 20px;
}

#eventModal .availableKeys {
	padding-left: 15px;
}

#eventModal .availableKeys .interested {
	color: #585;
}

.alert {
	font-size: 0.8rem;
}

.particle {
	position: fixed;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: #fd7907;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	z-index: -1;
}

.freeTimeTable.d-lg-none .btn-sm {
	width: 100%;
	margin-top: 10px;
}

.freeTimeTable.d-lg-none .btn {
	width: 100%;
}

/* Addded */

.alert {
	line-height: 22px;
	margin-bottom: 40px;
	font-weight: 400;
	font-size: 0.8rem;
}

.navbar-brand {
	margin-right: 20px;
	margin-left: 10px;
}

table.freeTimeTable thead td {
	font-weight: 400;
	padding-left: 0px;
}

table.freeTimeTable tbody td {
	font-weight: 300;
	font-size: 14px;
}

#navbarDropdownMenuLink, .nav-item {
  padding-left: 15px;
  padding-right: 15px;
}

table.freeTimeTable td {
	vertical-align: middle;
}

table.freeTimeTable.d-lg-table .btn-sm, .characterTable .btn-sm {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 12px;
}

.btn-danger:hover {
	background: #F0534E;
	border-color: #F0534E;
}

.btn-warning:hover {
	background: #F2A04E;
	border-color: #F2A04E;
	color: #FFF;
}

.btn-primary:hover {
	background: #467FF0;
	border-color:  #467FF0;
}

.btn-success:hover {
	background: #1CD690;
	border-color: #1CD690;
}

.btn-danger {
	background: #E0433E;
	border-color: #E0433E;
}

.btn-warning {
	background: #E2903E;
	border-color: #E2903E;
	color: #FFF;
}

.btn-primary {
	background: #366FE0;
	border-color:  #366FE0;
}

.btn-success {
	background: #0CC680;
	border-color: #0CC680;
}

@media (min-width: 992px) {
	select {
		max-width: 700px;
	}
	input {
		max-width: 700px;
	}
	input.hasDatepicker {
		max-width: 660px;
	}
}