/*
Theme Name: E-services
Theme URI: https://crowdpolicy.com/
Description: E-services WordPress Theme
Requires at least: WordPress 5.0.0
Author: Gov Team, Crowdpolicy
Author URI: https://www.crowdpolicy.com/
Version: 2.0
Text Domain: eservice-portal
Domain Path: /languages
*/

/*-------------------------------------------------------------------
	Table of Contents
--------------------------------------------------------------------
	00. CSS Reset
	01. General
	02. Header
	03. Content
	04. Footer
*/

/*-------------------------------------------------------------------
	00. CSS Reset
-------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap&subset=greek,greek-ext,latin-ext');

html,
body {
	border: none;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: '';
}

/*-------------------------------------------------------------------
	01. General
-------------------------------------------------------------------*/
html,
body {
	min-height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.text-main {
	color: var(--main-site-color);
}

.text-secondary {
	color: var(--secondary-site-color);
}

.text-black {
	color: var(--black-text-color);
}

.text-white {
	color: var(--white-text-color);
}

.one-line-box {
	box-sizing: border-box;
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.two-line-box {
	box-sizing: border-box;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.three-line-box {
	box-sizing: border-box;
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.text-no-overflow {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.hidden {
	display: none !important;
}

/* Search box
=================================== */
#search {
	width: 100%;
	position: relative;
	margin: 0 auto;
}

#search form {
	max-width: 480px;
	margin: 0 auto;
}

#search-title {
	display: block;
	font-size: 30px;
	text-align: center;
	color: #ffffff;
	text-shadow: 1px 1px 1px #c1c1c026;
	margin-bottom: 40px;
}

#searchbar-container {
	position: relative;
}

#searchbar-container>button {
	display: block;
	height: 100%;
	width: 88px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	color: #fff;
	border-radius: 0px 3px 3px 0px;
	background-color: var(--secondary-site-color);
	text-align: center;
	font-size: 32px;
	transition: all 0.5s;
	cursor: pointer;
}

#searchbar-container>button:hover,
#searchbar-container>button:focus {
	opacity: 0.8;
}

#searchbar-container>input {
	box-shadow: 3px 2px 10px #0000004d;
	border: 0;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.87);
	height: 56px;
	width: 100%;
	padding: 10px 0 10px 10px;
	box-sizing: border-box;
}

#searchbar-container input::-webkit-input-placeholder,
#searchbar-container input::placeholder {
	color: #464749;
	font-weight: 300;
	font-size: 16px;
	line-height: 2em;
}

@media all and (max-width: 800px) {
	#search {
		max-width: 80%;
	}

	#searchbar-container>button {
		margin-right: -1px;
	}
}

/*-------------------------------------------------------------------
	02. Header
-------------------------------------------------------------------*/
.helper-heading {
	background-color: var(--main-site-color);
	padding: 20px;
	color: var(--footer-text-color);
	min-height: 50px;
	box-shadow: 0px 0px 5px #222;
}

.heading-wrapper {
	gap: 10px;
}

.helper-heading>.container {
	height: 100%;
}

.helper-heading>.container>.d-flex {
	height: 100%;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	min-height: 40px;
}

#header-title-wrapper {
	display: flex;
	align-items: center;
	text-align: center;
}

@media (max-width: 1250px) {
	#header-title-wrapper {
		flex-direction: column;
	}
}

#header-buttons-wrapper {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	justify-content: center;
}

#home-button {
	background-color: var(--header-buttons-bg);
	border-radius: 9px;
	width: 67px;
	height: 59px;
	text-align: center;
	color: white;
	transition: all ease-in-out 0.3s;
}

#home-button:hover {
	background-color: #575da6;
}

#portal-button {
	background-color: var(--header-buttons-bg);
	border-radius: 9px;
	width: 67px;
	height: 59px;
	text-align: center;
	color: white;
	transition: all ease-in-out 0.3s;
}

.user-manual-btn {
	background-color: var(--header-buttons-bg);
	border-radius: 9px;
	text-align: center;
	color: white !important;
	font-size: 20px;
	text-decoration: none !important;
	padding: 15px 25px;
	transition: all ease-in-out 0.3s;
}

#portal-button img {
	width: 30px;
	transform: translate(0px, -3px);
}

#portal-button:hover {
	background-color: var(--header-buttons-bg-hover);
}

.navbar button a {
	color: white;
}

#login-welcome-button {
	min-height: 59px;
	padding: 5px 15px;
	background-color: #fff;
	border: 1px solid var(--main-site-color);
	color: var(--site-text-color);
	border-radius: 9px;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
}

#login-welcome-button.login-btn {
	color: var(--login-button-text-color);
	background-color: var(--login-button-bg);
}

a#toggle-user-manual {
	top: 57%;
	transform: translate(-100%, -57%);
	left: calc(100vw - 21px);
	right: auto;
	z-index: 9999;
	transition: transform .4s !important;
	cursor: pointer;
	background: #15AF15;
	border-radius: 24px;
	padding: 3px;
	display: flex;
	align-items: center;
	text-decoration: none !important;

}

a#toggle-user-manual:hover span.text-manual {

	padding-right: 10px;
	padding-left: 10px;
	display: block;
}

a#toggle-user-manual img {
	width: 42px;
	height: 42px;
}

a#toggle-user-manual span {
	padding: 0;
	display: none;
	color: #FFFFFF;
	font-size: 16px;
	white-space: nowrap;
	transition: all ease-in 0.5s;

}

@media (max-width: 400px) {
	.helper-heading {
		min-height: 100px;
	}
}

.social-section a.font-awesome-icon,
.helping-section a.font-awesome-icon {
	color: var(--white-text-color);
	font-size: 21px;
	text-decoration: none;
	margin: 0;
	line-height: 1;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	margin-top: auto;
	margin-bottom: auto;
	margin: 0 5px;
}

.helping-section>*,
.social-section>* {
	margin: 0 5px;
	font-size: 18px;
}

.helping-section #lang_choice_1 {
	background-color: var(--main-site-color);
	color: var(--white-text-color);
	border-color: transparent;
	cursor: pointer;
	display: none;
}

.social-section p,
.helping-section a,
.social-section .emergency-tel {
	max-width: -webkit-fit-content;
	max-width: -moz-fit-content;
	max-width: fit-content;
	color: var(--white-text-color);
	text-decoration: none;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	font-size: 16px;
}

.helping-section img {
	align-self: center;
}

.helping-section {
	gap: 5px;
}

.header-button {
	border-radius: 5px;
	padding: 5px 15px 5px 15px;
	font-size: 20px;
	color: white;
	outline: none !important;
	text-align: center;
}

.logout {
	background-color: var(--logout-button-bg);
}

.logout:hover {
	background-color: var(--logout-button-bg-hover);
}

.profile {
	background-color: var(--profile-button-bg);
}

.profile:hover {
	background-color: var(--profile-button-bg-hover);
}

button#profile-menu-dropdown-toggle {
	min-width: 200px;
	transition: all ease-in-out 0.3s;
}

button#profile-menu-dropdown-toggle[aria-expanded="true"] {
	border-radius: 5px 5px 0px 0px;
}

button#profile-menu-dropdown-toggle::after {
	content: '\f107';
	border: none;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: baseline;
	transition: transform ease-in-out 0.1s;
}

button#profile-menu-dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.profile-dropdown-menu.dropdown-menu {
	margin-top: 0;
	padding: .2rem 0;
	border: none;
	background-color: #EEEEEE;
	border-radius: 0px 0px 5px 5px;
	width: 100%;
	z-index: 99999;
}

.profile-dropdown-menu .dropdown-item {
	padding: 0.2rem 1rem;
	color: var(--site-text-color) !important;
	outline: none !important;
	background-color: transparent !important;
}

.profile-dropdown-menu a:not(:last-of-type)>.dropdown-item {
	border-bottom: 1px solid #C3C3C3;
}

.social-section a.font-awesome-icon:hover,
.helping-section a:hover,
.social-section .emergency-tel:hover {
	color: var(--secondary-site-color);
}

.navigation {
	background-color: var(--main-site-color);
	color: var(--header-text-color);
}

/* Mega Menu
=================================== */
#header-menu-container {
	width: 100%;
	max-width: 100%;
	flex: 1;
}

#menu-site-main-menu {
	position: relative;
	display: flex;
	flex-direction: row;
	list-style: none;
	justify-content: center;
}

#menu-site-main-menu>li.menu-item {
	line-height: normal;
	padding-top: 15px;
	padding-bottom: 15px;
}

#menu-site-main-menu>li.menu-item>a {
	line-height: normal;
	height: 40px;
	white-space: nowrap;
	color: #6e6a6a;
	font-weight: 700;
	font-size: 15px;
}

#menu-site-main-menu>li.menu-item:not(:last-child) {
	margin-right: 30px;
}

/*
https://fontawesome.com/v4.7.0/cheatsheet/
https://astronautweb.co/snippet/font-awesome/
*/
#menu-site-main-menu>li.menu-item.menu-item-has-children:after {
	content: '\f078';
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	cursor: pointer;
	color: #6e6a6a;
}

#menu-site-main-menu>li.menu-item.contact-menu-item {
	background-image: url('./assets/images/360-degrees.svg');
	background-size: auto 40px;
	background-repeat: no-repeat;
	background-position: center right;
	padding-right: 20px;
}

#menu-site-main-menu>li.menu-item>ul.sub-menu {
	display: grid;
	height: 0;
	visibility: hidden;
	opacity: 0;

	grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
	grid-gap: 20px 40px;
	grid-auto-flow: dense;
	position: absolute;
	top: 35px;
	left: 0;
	width: 100%;
	max-width: 100%;
	padding: 20px;
	background: #fff;
	list-style: none;
	transition: opacity 0.8s;
	z-index: 0;
}

#menu-site-main-menu>li.menu-item.menu-item-has-children:hover>ul.sub-menu {
	height: auto;
	visibility: visible;
	opacity: 1;
	z-index: 99999999999999;
}

#menu-site-main-menu>li.menu-item.menu-item-has-children:hover>ul.sub-menu>li.menu-item>a {
	display: inline-block;
	padding: 5px;
	/* background-color: #6e6a6a; */
}

@media screen and (max-width: 1500px) {
	nav.navbar {
		flex-direction: column;
	}

	nav.navbar>.navbar-brand {
		margin-right: 0;
	}

	#header>.container.navigation {
		padding: 0;
		margin: 0;
		max-width: 100%;
	}

	#header>.container.navigation>.row {
		margin: 0;
	}

	#menu-site-main-menu>li.menu-item {
		font-size: 14px;
	}
}

@media screen and (max-width: 1000px) {
	nav.navbar {
		flex-direction: column;
		padding: 20px 40px !important;
	}

	#header-menu-container {
		display: none;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 99999999999999;
		width: auto;
		transform: translateY(100%);
	}

	#header-menu-container.activated {
		display: inline-block;
	}

	#menu-site-main-menu>li.menu-item.contact-menu-item {
		background: none;
	}

	#menu-site-main-menu {
		flex-direction: column;
	}

	#menu-site-main-menu {
		display: inline-block;
		background: #464749;
		margin-bottom: 0;
		border-bottom-left-radius: 4px;
	}

	#menu-site-main-menu>li.menu-item:not(:last-child) {
		margin-right: 0;
	}

	#menu-site-main-menu>li.menu-item {
		position: relative;
		padding: 10px 20px;
	}

	#menu-site-main-menu>li.menu-item>a {
		height: auto;
		display: inline-block;
	}

	#menu-site-main-menu>li.menu-item.menu-item-has-children:hover>ul.sub-menu>li.menu-item>a {
		padding: 0;
		/* background-color: #6e6a6a; */
	}

	#menu-site-main-menu>li.menu-item.menu-item-has-children:hover>ul.sub-menu {
		height: 0;
		visibility: hidden;
		opacity: 0;
	}

	#menu-site-main-menu>li.menu-item.menu-item-has-children.activated>ul.sub-menu {
		height: auto;
		visibility: visible;
		opacity: 1;
		z-index: 99999999999999;
	}

	#responsive-menu-toggle {
		display: inline-block;
		position: absolute;
		right: 40px;
	}
}

/* #mega-menu-wrap-header_menu #mega-menu-header_menu > li.mega-menu-item > a.mega-menu-link {
	font-size: 15px;
}

#mega-menu-header_menu {
	z-index: 9999999999 !important;
}

#mega-menu-header_menu > li.contact-menu-item {
	background-image: url('./assets/images/360-degrees.svg') !important;
	background-repeat: no-repeat !important;
	background-position: top right !important;
	padding-right: 15px !important;
}

@media all and (max-width: 1000px) {
	#mega-menu-header_menu > li.contact-menu-item {
		background-image: none !important;
	}
	.mega-menu-wrap #mega-menu-header_menu {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-webkit-box-pack: space-evenly;
		-ms-flex-pack: space-evenly;
		justify-content: space-evenly;
		font-size: 16px !important;
	}
} */

.main-logo {
	position: relative;
	width: auto;
	height: 87px;
	/* background-color: #fff; */
}

.navbar {
	font-size: 27px;
	margin-left: 15px;
	margin-right: 15px;
}

.social-section {
	justify-content: flex-start;
}

.helping-section {
	justify-content: flex-end;
}

@media screen and (max-width: 768px) {
	.helping-section {
		flex-direction: column;
	}

	.hover-search-wrapper {
		width: auto !important;
		height: auto !important;
		margin: 0 auto;
	}
}

@media screen and (max-width: 700px) {
	.social-section {
		justify-content: center;
	}

	.helping-section {
		justify-content: center;
	}

	.navbar-brand {
		position: relative;
		z-index: 1;
	}
}

/* Hover search bar style */
.hover-search-wrapper {
	display: table;
	width: 100%;
	height: 100%;
	max-width: -webkit-fit-content;
	max-width: -moz-fit-content;
	max-width: fit-content;
}

.hover-search-wrapper .hover-search-innr {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

/*** STYLES ***/
.hover-search {
	display: inline-block;
	position: relative;
	height: 15px;
	width: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px 8px 7px 0px;
	padding: 6px;
	border: 3px solid var(--white-text-color);
	border-radius: 25px;
	-webkit-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	cursor: text;
	top: 8px;
}

.hover-search:after {
	content: '';
	position: absolute;
	width: 3px;
	height: 10px;
	right: -5px;
	top: 10px;
	background: var(--white-text-color);
	border-radius: 3px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.hover-search.active,
.hover-search:hover {
	width: 150px;
	/* margin-top: 8px; */
}

.hover-search.active:after,
.hover-search:hover:after {
	height: 0px;
}

.hover-search input {
	width: 100%;
	border: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Helvetica;
	font-size: 12px;
	color: inherit;
	background: transparent;
	outline-width: 0px;
	position: relative;
	top: -15px;
}

/*-------------------------------------------------------------------
	03. Content
-------------------------------------------------------------------*/

/* Cookie Notice
=================================== */
#cookie-notice {
	background-color: rgba(0, 0, 0, 0.85) !important;
}

#cookie-notice>.cookie-notice-container {
	max-width: 1040px;
	margin: 0 auto;
}

#cn-notice-buttons {
	display: block;
}

.cn-buttons-container,
.cn-text-container {
	display: block;
}

#cn-accept-cookie {
	background-color: var(--main-site-color) !important;
	background-position: initial;
	background-image: none !important;
	transition: none;
	margin: 0 15px 10px 0;
	color: black;
}

#cn-accept-cookie:hover {
	opacity: 0.9;
}

/*-------------------------------------------------------------------
	Single post & Default page
------------------------------------------------------------------*/

body.single #post-image,
body.page-template-default #page-image {
	max-width: 100%;
	position: relative;
}

body.single #post-image:after,
body.page-template-default #page-image:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50%;
	width: 100%;
	background: linear-gradient(to bottom, transparent 0%, #000 100%);
	z-index: 1;
}

body.single #post-image>h1,
body.page-template-default #page-image>h1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 0;
	width: max-content;
	width: auto;
	z-index: 10;
	word-break: break-word;
	max-width: 100%;
}

body.single #post-image>h1>a,
body.page-template-default #page-image>h1>a {
	color: var(--white-text-color);
	text-shadow: 0 0 1px #000;
}

body.single #post-image>img,
body.page-template-default #page-image>img {
	max-width: 100%;
	max-height: 312px;
	min-height: 200px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.single h1,
body.page-template-default h1 {
	text-align: center;
	padding: 30px 0 10px 0;
}

body.single h1>a,
body.page-template-default h1>a {
	text-decoration: none;
	color: var(--black-text-color);
}

body.single #post-container,
body.page-template-default #page-container {
	display: flex;
	max-width: 1140px;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	padding: 20px 20px 60px 20px;
}

body.single #post-datetime,
body.page-template-default #page-datetime {
	display: block;
	text-align: center;
}

body.single #post-content,
body.page-template-default #page-content {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	order: 2;
}

body.single #post-body {
	margin-top: 20px;
}

@media all and (max-width: 1280px) {
	body.single #post-container {
		flex-direction: column;
	}

	body.single #post-content {
		order: 1;
	}

	body.single h1,
	body.page-template-default h1 {
		font-size: 1.8rem;
	}
}

@media all and (max-width: 600px) {

	body.single #post-container,
	body.page #page-container {
		padding: 20px 5px 60px 5px;
	}
}

/* Social Media Share Buttons
=================================== */
body.single .share-content {
	order: 2;
	max-width: 800px;
	width: 100%;
	margin: 40px auto 20px auto;
	text-align: center;
}

body.single .share-title {
	display: block;
	color: #6e6a7b;
}

body.single .share-on-link {
	text-decoration: none;
	font-size: 24px;
	color: #6e6a7b;
}

body.single .share-on-link:hover {
	color: #007bff;
}

/*-------------------------------------------------------------------
	Blogs/Archives
------------------------------------------------------------------*/

#articles-banner {
	position: relative;
	max-width: 100%;
	min-height: 200px;
	max-height: 312px;
	/* background-image: url('https://development.crowdpolicy.com/eservice-portal-dev/wp-content/uploads/2020/01/photo-of-people-doing-handshakes.jpg'); */
	background-repeat: no-repeat;
	background-size: cover;
}

#articles-banner>h1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 0;
	width: max-content;
	width: auto;
	z-index: 10;
}

#articles-banner>h1>a {
	position: relative;
	color: var(--white-text-color);
	text-decoration: none;
	text-shadow: 0 0 1px #000;
}

#articles-banner:after,
#post-image:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50%;
	width: 100%;
	background: linear-gradient(to bottom, transparent 0%, #000 100%);
	z-index: 1;
}

#articles-wrapper {
	display: flex;
	max-width: 1140px;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}

section#articles {
	position: relative;
	order: 2;
	/* background-color: #EDEEEF; */
	/* padding: 20px; */
	max-width: 1110px;
	width: 100%;
	/* border-radius: 4px; */
	margin: 40px auto 20px auto;
	box-sizing: border-box;
}

section#articles>h2 {
	padding: 20px 0;
	text-align: center;
}

#articles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 40px 20px;
	max-width: 100%;
	margin: 0 auto 60px auto;
	justify-items: center;
}

#articles-grid .article {
	background-color: #fff;
	/* border-top: 12px solid var(--main-site-color); */
	box-sizing: border-box;
	border-radius: 5px;
	width: 100%;
	height: 370px;
	max-width: 300px;
	color: var(--white-text-color);
	text-align: center;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 1px 1px 2px #c6c4c4;
}

.article-image>a {
	display: block;
	height: 185px;
	background-color: #999999;
	border-radius: 5px 5px 0 0;
}

.article-image .attachment-eservice-portal-post-category-thumbnail {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	object-fit: cover;
	/* width: 100%; */
	border-radius: 5px 5px 0 0;
}

.article-datetime {
	color: var(--black-text-color);
}

.article-title {
	margin: 10px;
	text-align: left;
}

.article-title>a {
	display: block;
	color: var(--black-text-color);
	font-weight: bold;
	font-size: 20px;
	line-height: 24px;
	text-decoration: none;
}

.article-excerpt {
	margin: 10px;
	text-align: left;
	color: var(--black-text-color);
}

.article-go {
	flex: 1;
	position: relative;
	text-align: right;
	padding: 10px 10px 5px 10px;
}

.article-go>a {
	display: inline-block;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.article-go .fa-angle-right {
	color: var(--black-text-color);
	font-size: 26px;
	line-height: 28px;
}

@media all and (max-width: 1280px) {
	#articles-wrapper {
		flex-direction: column;
	}

	section#articles {
		order: 1;
	}
}

@media all and (max-width: 500px) {
	#articles-banner {
		background-size: 100% 100%;
	}

	section#articles {
		padding-left: 5px;
		padding-right: 5px;
	}

	#articles-grid {
		grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
		grid-gap: 40px 20px;
	}

	#articles-grid .article {
		max-width: 100%;
	}
}

/*-------------------------------------------------------------------
	04. Footer
-------------------------------------------------------------------*/
/* Pushes footer at the bottom of the page */
#footer {
	padding-left: 0;
	padding-right: 0;
	margin-top: auto;
	background-color: var(--main-site-color);
	color: var(--footer-text-color);
}

#footer-columns-container {
	border-top: 1px solid var(--footer-text-color);
	padding-top: 40px;
}

#footer-columns-container>div {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

#footer-columns-container .footer-flex-column:not(:last-child) {
	padding-right: 0.5rem;
}

@media all and (max-width: 1024px) {
	#footer-columns-container>div {
		flex-direction: column;
		align-items: center;
	}

	.footer-flex-column {
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	#digital-toolkit {
		margin: 20px auto;
	}
}

#footer .horizontal-line {
	width: 100%;
	background-color: var(--black-text-color);
}

#footer-gdpr-links {
	width: 100%;
	text-align: center;
}

#footer-gdpr-links a {
	color: var(--black-text-color);
	text-decoration: underline;
}

#footer-gdpr-links a:hover {
	color: var(--secondary-site-color);
}

.footer-link>a {
	color: var(--footer-text-color);
	text-align: center;
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-link a:hover {
	color: var(--footer-text-color);
}

.footer-link a img {
	height: 40px;
	width: auto;
	margin-left: 0.5rem;
}

.footer-link {
	padding: 10px 20px;
	text-align: center;
}

.footer-link:not(:last-of-type) {
	border-right: 2px solid var(--footer-text-color);
}

@media (max-width: 800px) {
	.implemented {
		flex-direction: column;
	}

	.footer-link {
		border-right: none !important;
	}
}

.implemented {
	padding: 25px 5px;
	max-width: 100%;
}

@media all and (max-width: 1024px) {

	#footer>.container,
	#footer .row>.container {
		max-width: 100%;
		width: 100%;
	}
}

@media all and (max-width: 768px) {
	#footer .flex-row {
		flex-direction: column !important;
		align-items: center;
	}

	#footer .flex-row>.p-2 {
		text-align: center;
	}

	#digital-toolkit {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
		grid-gap: 10px;
		grid-auto-flow: dense;
		max-width: 300px;
		margin-top: 20px;
	}
}

body {
	overflow-x: hidden;
}

/* Toggle Styles */

#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	position: relative;
	min-height: 100vh;
	height: auto;
}

#wrapper.toggled {
	padding-left: 250px;
}

#sidebar-wrapper {
	z-index: 1000;
	position: absolute;
	left: 250px;
	width: 0;
	height: 100%;
	margin-left: -250px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #000;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-color: var(--sidebar-bg);
}

#wrapper.toggled #sidebar-wrapper {
	width: 250px;
}

#page-content-wrapper {
	width: 100%;
	position: relative;
	padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
	position: absolute;
	margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
	position: absolute;
	top: 0;
	width: max-content;
	margin: 0;
	padding: 0 .5rem;
	list-style: none;
	height: 100%;
}

.sidebar-nav li {
	font-size: 20px;
	text-indent: 5px;
	letter-spacing: 0px;
	margin: 20px 0px 20px 0px;
}

.sidebar-nav li:hover {
	cursor: pointer;
}

.sidebar-nav li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-decoration: none;
	color: #fff;
	padding: 10px;
}

.sidebar-nav li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
	text-decoration: none;
}

.parent-menu {
	color: white;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.sub-menu a {
	font-size: 15px;
	text-align: center;
	border-radius: 28px;
	padding: 10px;
}

.sub-menu a:hover {
	background-color: #3a3e70 !important;
}

.collapsed {
	display: none;
}

.expanded {
	display: block;
}

#toggle-sidebar {
	width: 50px;
	height: 50px;
	background-color: transparent;
	color: white;
	border-radius: 50%;
	border: 2px solid white;
}

#toggle-sidebar:focus {
	outline: none;
}

@media (min-width: 768px) {
	#wrapper {
		padding-left: 230px;
	}

	#sidebar-wrapper {
		width: 230px;
	}
}

/* UM profile photo style */
.um-profile-meta {
	display: none;
}

.um-profile-photo {
	width: 146px;
	margin: 0px 0 0 0px;
}

.um-profile-photo a.um-profile-photo-img {
	position: relative;
}

.um-profile-edit {
	display: none;
}

.um-header {
	border-bottom: 0 !important;
}

.menu-button {
	display: none;
}

@media only screen and (max-width: 767px) {
	.menu-button {
		display: inline;
	}
}

.contactimage {
	width: 49px;
	height: 56px;
}

/* Pagination */
.posts-pagination {
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

.posts-pagination i {
	font-size: 20px;
	color: #abadb0;
}

.posts-pagination .active-page,
.current {
	font-size: 23px;
	font-weight: 600;
	color: #054c7b !important;
	border-bottom: 3px solid #054c7b;
	padding: 0 10px;
}

.custom-page-number,
.page-numbers {
	font-size: 23px;
	font-weight: 500;
	padding: 0 10px;
	color: #abadb0;
}

.custom-page-number:hover,
.custom-page-number:focus,
.page-numbers:hover,
.page-numbers:focus {
	color: #abadb0;
}

.prev-page-btn,
.next-page-btn {
	transform: translate(0px, 5px);
	margin-right: 10px;
}