/* custom colors */
:root {
	--primary: #429aec;
	--primary-hover: #62b2fb;
	--primary-active: #1276d2;
	--primary-active-light: #a9cff2;
	--primary-font: #ffffff;
	--secondary: #ffffff;
	--secondary-hover: #ffffff;
	--secondary-active: #429aec;
	--secondary-font: #429aec;
	--success: #35c955;
	--success-hover: #4add6a;
	--success-active: #0fa931;
	--success-font: #ffffff;
	--danger: #ff9900;
	--danger-hover: #ffb803;
	--danger-active: #e17614;
	--danger-font: #1e1e1e;
	--error-color: #ff4444;
	--error-transparent: rgba(255, 68, 68, 0.3);
	--font-color: #0b4f8e;
	--menu-color: #0b4f8e;
	--arrow-color: #1d78cf;
	--background: #d9d9d9;
	--background-blue: #3E94E4;
}

/* general */
body {
	font-family: "Noto Sans", sans-serif;
	overflow-x: hidden;
}

h1 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 2.75rem;
}

h2 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.69rem;
}

h3 {
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.25rem;
}

h4 {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.1rem;
}

h5 {
	font-size: 0.6rem;
	font-weight: 500;
	line-height: 0.8rem;
}

a {
	color: var(--primary);
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.25rem;
	text-decoration: none;
}

	a:hover {
		color: var(--primary-hover);
		text-decoration: underline;
	}

	a:active {
		color: var(--primary-active);
		text-decoration: underline;
	}

/*	a:visited {
		color: var(--primary);
	}*/

.ml-0 {
	margin-left: 0 !important;
}

.ml-auto {
	margin-left: auto !important;
}

.mr-auto {
	margin-right: auto !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.br-0 {
	border-right: none !important;
}

.border-white {
	border: 2px solid var(--secondary);
}

.border-gray {
	border: 2px solid var(--danger-font);
}

.errortext {
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: var(--error-color);
}

/* buttons */
.btn {
	/*padding-left: 1.3rem;
	padding-right: 1.3rem;*/
	margin: 0.2rem;
	font-weight: 600;
}

	.btn:focus {
		box-shadow: none;
	}

.btn-long {
	width: 17rem;
}

.btn-primary {
	background-color: var(--primary);
	border: 2px solid var(--primary);
	color: var(--primary-font) !important;
}

	.btn-primary:hover {
		background-color: var(--primary-hover);
		border: 2px solid var(--primary-hover);
		color: var(--primary-font) !important;
	}

/*	.btn-primary:active,
	.btn-primary:focus {
		background-color: var(--primary-active);
		border: 2px solid var(--primary-active);
		color: var(--primary) !important;
	}*/

.btn-secondary {
	background-color: var(--secondary);
	border: 2px solid var(--primary);
	color: var(--secondary-font) !important;
}

	.btn-secondary:hover {
		background-color: var(--secondary-hover);
		border: 2px solid var(--primary);
		color: var(--primary-hover) !important;
	}

/*	.btn-secondary:active,
	.btn-secondary:focus {
		background-color: var(--secondary-active);
		border: 2px solid var(--secondary-active);
		color: var(--secondary) !important;
	}*/

.btn-success {
	background-color: var(--success);
	border: 2px solid var(--success);
	color: var(--success-font) !important;
}

	.btn-success:hover {
		background-color: var(--success-hover);
		border: 2px solid var(--success-hover);
		color: var(--success-font) !important;
	}

/*	.btn-success:active,
	.btn-success:focus {
		background-color: var(--success-active);
		border: 2px solid var(--success-active);
		color: var(--success) !important;
	}*/

.btn-danger {
	background-color: var(--danger);
	border: 2px solid var(--danger);
	color: var(--danger-font) !important;
}

	.btn-danger:hover {
		background-color: var(--danger-hover);
		border: 2px solid var(--danger-hover);
		color: var(--danger-font) !important;
	}

/*	.btn-danger:active,
	.btn-danger:focus {
		background-color: var(--danger-active);
		border: 2px solid var(--danger-active);
		color: var(--danger) !important;
	}*/

.btn-default {
	background-color: var(--secondary);
	border: 2px solid var(--primary);
	color: var(--secondary-font) !important;
}
	.btn-default:hover {
		background-color: var(--secondary-hover);
		border: 2px solid var(--primary);
		color: var(--primary-hover) !important;
	}
/*	.btn-default:active,
	.btn-default:focus {
		background-color: var(--secondary-active);
		border: 2px solid var(--secondary-active);
		color: var(--secondary) !important;
	}*/

.pointer {
	cursor: pointer;
}

/* table */
table {
	border-spacing: 0;
	border-collapse: separate;
	border: 2px solid var(--primary) !important;
	border-radius: 0.25rem !important;
}

	table thead th {
		background-color: var(--primary) !important;
		color: var(--secondary) !important;
		border: 1px solid var(--primary) !important;
	}

	table td, table th {
		border: 1px solid var(--primary) !important;
		color: var(--font-color) !important;
		font-weight: 600 !important;
	}

	table thead th a,
	table thead th a:active,
	table thead th a:focus {
		color: var(--secondary) !important;
		text-decoration: none !important;
	}

/* table pagination */
.pagination {
	margin-top: 12px !important;
}

	.pagination > .active > a
	.pagination > li > a:hover {
		color: var(--secondary) !important;
		background-color: var(--primary) !important;
	}

	.pagination > li > a,
	.pagination > li > span {
		padding: 4px 8px !important;
	}

	.pagination > li > a {
		background-color: var(--secondary) !important;
		color: var(--font-color) !important;
		margin: 10px 0px !important;
	}


label {
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: var(--font-color);
}

input,
textarea,
.nice-select,
.input-group-text {
	border: 2px solid var(--primary) !important;
	color: var(--primary) !important;
	border-radius: 0.25rem !important;
}

.form-control:focus,
.form-select:focus {
	box-shadow: none;
}

.form-select {
	background-image: url('../images/select-arrow.svg');
}

.error {
	border: 2px solid var(--error-color) !important;
	color: var(--error-color) !important;
	background-color: var(--error-transparent) !important;
}

.toggle-password {
	cursor: pointer;
	background-color: transparent;
	border-left: none !important;
}

.btn-outline-primary {
	background-color: var(--secondary) !important;
	border: 2px solid var(--secondary-active) !important;
	color: var(--secondary-active) !important;
	margin: 0 !important;
}

.btn-check:checked + .btn-outline-primary {
	box-shadow: none !important;
	background-color: var(--primary-hover) !important;
	color: var(--secondary) !important;
}

/* toggle */
.toggle .btn-primary,
.toggle .btn-primary:hover,
.toggle .btn-primary:active,
.toggle .btn-primary:focus {
	background-color: var(--primary) !important;
	color: var(--primary-font) !important;
	box-shadow: none !important;
}

.toggle .btn-secondary,
.toggle .btn-secondary:hover,
.toggle .btn-secondary:active,
.toggle .btn-secondary:focus {
	background-color: #d9d9d9 !important;
	color: var(--secondary-font) !important;
	box-shadow: none !important;
}

/* sidebar */
#sidebar {
	-webkit-transition: margin 0.25s ease-out;
	transition: margin 0.25s ease-out;
	width: 250px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 999;
	background-color: #d9d9d9;
	/*overflow-y: auto;*/
}

#userbox {
	background-color: var(--primary-hover);
	padding: 1.25rem;
}

	#userbox h3 {
		margin: 0 0 0 0.75rem;
		width: 100px;
		color: #fff;
	}
	#userbox a {
		margin: 0 0 0 0.75rem;
		width: 100px;
		color: #fff;
		text-decoration: none;
		font-weight: 400;
		font-size: 0.7rem;
	}

@media (max-width: 992px) {
	#sidebar {
		margin-left: -251px;
	}
}

@media (min-width: 992px) {
	#content {
		margin-left: 250px;
	}
}

/* hamburger menu */
.nav-trigger {
	cursor: pointer;
	width: 38px;
	height: 38px;
	padding-top: 0.4rem;
	padding-left: 0.4rem;
	background-color: var(--primary-hover);
	display: inline-block;
	z-index: 9999;
	position: absolute;
	left: 0;
	top: 0;
}

	.nav-trigger:hover .hamburger {
		transition: transform 50ms;
		transform: scale(0.95);
	}

	.nav-trigger .hamburger {
		position: relative;
		width: 45px;
		height: 45px;
		transition: transform 500ms ease-in-out;
	}

		.nav-trigger .hamburger::before,
		.nav-trigger .hamburger::after,
		.nav-trigger .hamburger .hamburger-icon {
			content: "";
			position: absolute;
			width: 25px;
			height: 2px;
			background: var(--secondary);
			transform-origin: 100% 50%;
			transition: transform 0.5s;
		}

		.nav-trigger .hamburger::before {
			top: 5px;
		}

		.nav-trigger .hamburger::after {
			top: 17px;
		}

		.nav-trigger .hamburger .hamburger-icon {
			width: 25px;
			top: 11px;
			transform-origin: 50% 50%;
		}

	.nav-trigger.is-active .hamburger::before,
	.nav-trigger.is-active .hamburger::after,
	.nav-trigger.is-active .hamburger .hamburger-icon {
		background: var(--secondary);
	}

	.nav-trigger.is-active .hamburger::before {
		transform: translate3d(-5px, 0px, 0) rotateZ(-45deg);
	}

	.nav-trigger.is-active .hamburger .hamburger-icon {
		transform: rotateY(-90deg);
	}

	.nav-trigger.is-active .hamburger::after {
		transform: translate3d(-5px, 5px, 0) rotateZ(45deg);
	}

/* navbar */
.navbar-nav {
	margin: 1rem auto 0 auto;
}

	.navbar-nav i {
		color: var(--arrow-color);
	}

	.navbar-nav .navbar-nav {
		margin: 0.5rem auto 0 auto !important;
	}

	.navbar-nav .nav-item {
		width: 210px;
	}

.navbar-link {
	padding: 0.5rem;
	display: block;
	background-color: var(--primary-font);
	color: var(--menu-color);
	border-radius: 0.25rem;
	text-decoration: none;
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.25rem;
	margin: 0.2rem 0;
}

	.navbar-link:hover i {
		color: var(--secondary)
	}

	.navbar-link span {
		display: inline-flex;
		width: 160px;
		padding-left: 1.3rem;
	}

.navbar-nav .submenu-button span {
	padding-left: 0.7rem !important;
}

.navbar-link:hover,
.navbar-nav .navbar-nav .navbar-link:hover,
.navbar-nav .navbar-nav .navbar-nav .navbar-link:hover {
	background-color: var(--primary) !important;
	color: var(--primary-font) !important;
	text-decoration: none !important;
}

.navbar-link.active,
.navbar-nav .navbar-nav .navbar-link.active,
.navbar-nav .navbar-nav .navbar-nav .navbar-link.active {
	background-color: var(--primary-active-light) !important;
	color: var(--primary-font) !important;
}

.navbar-nav .navbar-nav {
	margin: 0.2rem 0 !important;
}

	.navbar-nav .navbar-nav .navbar-link span {
		width: 160px;
		padding-left: 1rem !important;
	}

	.navbar-nav .navbar-nav .submenu-button span {
		padding-left: 0.4rem !important;
	}

	.navbar-nav .navbar-nav,
	.navbar-nav .navbar-nav .navbar-nav {
		display: none;
	}

		.navbar-nav .navbar-nav .navbar-link {
			padding: 0.5rem 0.5rem 0.5rem 1.5rem !important;
			color: var(--primary-active) !important;
			font-size: 0.81rem !important;
			font-weight: 600 !important;
			margin: 0.45rem 0 !important;
		}

		.navbar-nav .navbar-nav .navbar-nav .navbar-link {
			padding: 0.5rem 0.5rem 0.5rem 2rem !important;
			color: var(--primary) !important;
			font-weight: 500 !important;
		}

/* content */
#content {
	-webkit-transition: margin 0.25s ease-out;
	transition: margin 0.25s ease-out;
}

.sidebar-opened #content {
	margin-left: 250px;
}

/* breadcrumb */
.breadcrumb {
	margin: 1.7rem 2.7rem;
}

.breadcrumb-item a {
	color: #429aec;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

/* boxes */
.box {
	border-radius: 0.25rem;
	padding: 0.6rem 1rem;
	margin: 1rem 0;
}

.primary-box {
	background-color: var(--primary);
	color: var(--secondary);
}

.success-box {
	background-color: var(--success);
	color: var(--secondary);
}

.danger-box {
	background-color: var(--danger);
	color: var(--danger-font);
}

/* modal */
.modal p {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 0.9rem;
	color: var(--font-color);
}

/* tooltip */
.tooltip-inner {
	background-color: var(--font-color);
	font-weight: 600;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
	border-right-color: var(--font-color) !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
	border-left-color: var(--font-color) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: var(--font-color) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: var(--font-color) !important;
}

.alert {
	height: 60px !important;
}
table > thead > tr > th > label {
	color: white !important;
}

#logobox {
	background-color: var(--secondary);
	padding: 1.25rem;
}

	#logobox h3 {
		margin: 0 0 0 0.75rem;
		color: var(--arrow-color);
		font-size: 1.09rem;
	}

/* welcome */
.loginbackground {
	background: url('../images/background.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-color: var(--background-blue);
	overflow-y: auto;
}

.welcome {
	color: var(--secondary);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	margin: 20px auto;
}

.panel-heading-arrow {
	color: var(--arrow-color);
	margin-left: 0.5rem;
}

.bgbrand,
.bgbrandicon {
	height: 24px;
	min-width: 24px;
	margin-right: 4px;
	border-radius: 4px;
	padding-top:4px;
}
	.bgbrand.active {
		border: 2px solid #000000;
		color:#ffffff;
	}
.bgbrandicon.active {
	background-color:#ff0000;
	color:#ffffff;
}
.bgbrand.active {
	border: 2px solid #000000;
}
.bgbrand-amber {
	background-color: #ffc107;
	color: #ffffff;
}
.bgbrand-blue {
	background-color: #2196f3;
	color: #ffffff;
}
.bgbrand-blue-grey {
	background-color: #607d8b;
	color: #ffffff;
}
.bgbrand-cyan {
	background-color: #00bcd4;
	color: #ffffff;
}
.bgbrand-green {
	background-color: #4caf50;
	color: #ffffff;
}
.bgbrand-grey {
	background-color: #9e9e9e;
	color: #ffffff;
}
.bgbrand-light-green {
	background-color: #8bc34a;
	color: #ffffff;
}
.bgbrand-orange {
	background-color: #ff9800;
	color: #ffffff;
}
.bgbrand-original {
	background-color: #464960;
	color: #ffffff;
}
.bgbrand-purple {
	background-color: #9c27b0;
	color: #ffffff;
}
.bgbrand-red {
	background-color: #f42316;
	color: #ffffff;
}
.bgbrand-teal {
	background-color: #009688;
	color: #ffffff;
}
.bgbrand-yellow {
	background-color: #ffeb3b;
	color: #ffffff;
}
.bgbrand-pink {
	background-color: #e91e63;
	color: #ffffff;
}
.bgbrand-deep-purple {
	background-color: #673ab7;
	color: #ffffff;
}
.bgbrand-indigo {
	background-color: #3f51b5;
	color: #ffffff;
}
.bgbrand-light-blue {
	background-color: #03a9f4;
	color: #ffffff;
}
.bgbrand-lime {
	background-color: #cddc39;
	color: #ffffff;
}
.bgbrand-deep-orange {
	background-color: #ff5722;
	color: #ffffff;
}
.bgbrand-brown {
	background-color: #795548;
	color: #ffffff;
}