﻿/* custom colors */
:root {
	--deep-green: #1c1c1a;
	--dark-green: #002e34;
	--light-green: #097684;
	--light-yellow: #f7f4c3;

	--deep-greenhover: #1c1c1a80;
	--dark-greenhover: #002e3480;
	--light-greenhover: #09768480;
	--light-yellowhover: #f7f4c380;

	--danger-active: #e17614;
	--danger-font: #1e1e1e;
	--danger-hover: #ffb803;
	--error-color: #ff4444;
	--error-transparent: rgba(255, 68, 68, 0.3);
	--font-color: #005764;
	--menu-color: #005764;
	--primary: #005764;
	--primary-active: #1276d2;
	--primary-active-light: #a9cff2;
	--primary-font: #ffffff;
	--primary-hover: #087583;
	--secondary: #ffffff;
	--secondary-active: #005764;
	--secondary-font: #005764;
	--secondary-hover: #ffffff;
	--success: #35c955;
	--success-active: #0fa931;
	--success-font: #ffffff;
	--success-hover: #4add6a;
}

/* general */
body {
	font-family: "Noto Sans", sans-serif;
	overflow-x: hidden;
}

a {
	color: var(--primary);
	font-weight: 600;
	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 {
	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-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-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-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-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;
	}


.pointer {
	cursor: pointer;
}

/* table */
.table-border {
	border-spacing: 0;
	border-collapse: separate;
	border: 2px solid var(--primary) !important;
	border-radius: 0.25rem !important;
}

	.table-border thead th {
		background-color: var(--primary) !important;
		color: white !important;
		border: 1px solid var(--primary) !important;
	}

	.table-border td, .table-border th {
		border: 1px solid var(--primary) !important;
		color: var(--font-color) !important;
		font-weight: 600 !important;
	}

	.table-border thead th a,
	.table-border thead th a:active,
	.table-border 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: 300px;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 999;
	background-color: #d9d9d9;
}

@media (max-width: 992px) {
	#sidebar {
		margin-left: -251px;
	}
}

@media (min-width: 992px) {
	#content {
		margin-left: 300px;
	}
}

/* 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;
}

#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 */
.image-background {
	background: url('../images/background.png') !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-position: center !important;
	background-color: var(--background-blue) !important;
	overflow-y: auto !important;
}

.welcome {
	color: black;
	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;
}

.cell-right {
	text-align: right;
	padding-right: 16px;
}

.media-thumb {
	max-width: 100%
}
.white-container {
	background-color: white !important;
	padding: 16px !important;
}

.white-container-transparent {
	background-color: rgba(255,255,255,0.8) !important;
	padding: 16px !important;
}

.form-check-input:checked {
	background-color: var(--primary);
}

.threestate-na {
	background-color: var(--light-yellow);
	color: var(--font-color);
}
	.threestate-na:hover {
		background-color: var(--light-yellowhover);
	}

.threestate-yes {
	background-color: var(--dark-green);
	color: white;
}

	.threestate-yes:hover {
		background-color: var(--dark-greenhover);
	}

.threestate-no {
	background-color: var(--light-green);
	color: white;
}

	.threestate-no:hover {
		background-color: var(--light-greenhover);
	}

.fullScreenVideo {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.video-wrapper {
	position: relative;
	width: 100%;
	height: 100vh; /* teljes képernyő magasság */
	overflow: hidden;
	background: black;
}

.background-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	min-width: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	filter: blur(20px) brightness(0.7);
	z-index: 1;
}

.foreground-video {
	position: relative;
	z-index: 2;
	max-height: 100%;
	max-width: 100%;
	height: 100%;
	margin: auto;
	display: block;
	object-fit: contain;
}

.image-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(10px);
	z-index: -1;
}
.foreground-image {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	margin: auto;
	object-fit: cover;
	object-position: center;
}

.table-condensed {
	--bs-table-cell-padding-y: 0.25rem;
	--bs-table-cell-padding-x: 0.5rem;
}