@import "news_list.css";
@import "news_article.css";
@import "gallery.css";
@import "authorities.css";
@import "announcements.css";
@import "index.css";
@import "history.css";
@import "laws.css";
@import "contacts.css";
@import "heroes.css";
@import "search-results.css";
@import "e-service.css";
@import "mobile.css";

:root {
	--green-color: #033502;
	--gray-text-color: #C2C2C2;
	--white-color: #FFFFFF;
	--bg-color: #F0F0F0;
	--light-green: #026A00;
	--dark-gray-color: #787878;
}

/*@font-face {*/
/*	font-family: 'Poppins'; src: local('Poppins'), url('../fonts/Poppins/Poppins-Regular.ttf');*/
/*}*/

/* Website Layout */

body {
	margin: 0;
	padding: 0;
	background-color: var(--bg-color)!important;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	color: #373435;
}

* {
	font-family: Poppins, sans-serif;
}


.header{
	width: 90%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
}

.header .logo {
	width: 24%;
}

.header .logo img {
	width: 100%;
}

.header .logo:hover {
	cursor: pointer;
}

.links-and-logo{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.network-links{
	display: flex;
	margin: 0 1.5rem;

}

.network-links a {
	margin: 0 0.3rem;
}

.network-links a:hover {
	/*filter: invert(12%) sepia(43%) saturate(2849%) hue-rotate(90deg) brightness(96%) contrast(98%);*/
}

.network-links img {
	width: 2rem;
}

.lang-picker {
	padding: 8px;
	background: #FFFFFF;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	/*font-family: 'Poppins';*/
	border: 0;
}


/* -----------------Header Navbar--------------- */

.header-navbar-line {
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: var(--green-color);
	padding: 0.7rem 5% 0.7rem calc(5% - 1rem);
	align-items: center;
}


.header-navbar {
	display: flex;
	justify-content: space-between;
	width: 84%;
}

.header-navbar-item {
	display: flex;
	font-size: 15px;
}

.header-navbar-item a {
	padding: 1.2rem 1rem;
	color: var(--white-color);
	transition: all 0.3s;
}

.header-navbar-item a:hover {
	opacity: 0.5;
	cursor: pointer;
	text-decoration: none;
}

.header nav.navbar {
	display: none;
}

.header img.search-mobile {
	display: none;
}

.dropdown-item.active, .dropdown-item:active {
	background-color: var(--green-color);
	color: var(--white-color);
}


.search-box {
	background-color: var(--light-green);
	border-radius: 5px;
	margin: 0;
	padding: 0.45rem 0.9rem;
	display: flex;
	align-items: center;
	transition: 1s;
	width: 15%;
}

/*.search-box:hover, .search-box:focus {*/
/*	width: 20%;*/
/*}*/

.search-box .search-txt {
	background-color: var(--light-green);
	border: none;
	outline: none;
	box-shadow: none;
	padding: 0;
	color: white;
	font-size: 16px;
	width: 100%;
}

.search-box .search-txt:focus {
	box-shadow: none;
	background-color: var(--light-green);
	color: white;
}

.search-box .search-txt.form-control::placeholder	 {
	color: var(--gray-text-color);
}

.search-box img {
	height: 1.5rem;
	width: 1.5rem;
}

.search-box img:hover {
	cursor: pointer;
}


/* -----------------------CONTENT---------------------- */

.content-container {
	width: 100%;
}

/* -----------------------CONTENT HEADER---------------------- */

.content-header {
	padding: 0 5%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 5.5rem;
}


.breadcrumb {
	background-color: inherit;
	margin: 0;
	padding: 0;
	color: var(--dark-gray-color);
}
.breadcrumb a {
	color: var(--dark-gray-color);
}
.breadcrumb a.active {
	color: var(--green-color);
}
.breadcrumb > li + li::before{
	color: var(--dark-gray-color);
}

.font-size-control {
	display: flex;
	align-items: center;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	background-color: var(--white-color);
}

.font-size-control .plus, .font-size-control .minus{
	background-color: var(--light-green);
	color: var(--white-color);
	font-size: 1.5rem;
	user-select: none;
}

.font-size-control .plus:hover, .font-size-control .minus:hover{
	cursor: pointer;
	opacity: 0.9;
}

.font-size-control .plus {
	border-radius: 5px 0 0 5px;
}

.font-size-control .minus {
	border-radius: 0 5px 5px 0;
}

.font-size-control div{
	padding: 0.2rem 1.5rem;

}

.font-size-control img {
	height: 1rem;
	margin: 0 1rem;
}


.content-header .news-filter {
	border-radius: 5px;
    background-color: var(--green-color);
    color: white;
    padding: 0rem 2.5rem;
    border-width: 10px;
    border-color: #033602;
    height: 50px;
}


/* -----------------------INNER CONTENT---------------------- */

.green-line {
	width: 76px;
	border: 2px var(--green-color) solid;
}


.content {
	background-color: var(--white-color);
	width: 100%;
	padding: 2.5rem 5%;

}

.content .content-type {
	display: flex;
	flex-direction: column;
	width: 27%;
	margin-right: 5%;
}

.content .content-type a {
	width: 100%;
	padding: 2rem;
	background-color: var(--bg-color);
	color: var(--dark-gray-color);
	border-radius: 5px;
	margin-bottom: 1rem;
}

.content .content-type a:last-child {
	margin: 0;
}

.content .content-type a:hover {
	color: initial;
	opacity: 0.9;
	text-decoration: none;
	cursor: pointer;
}

.content .content-type a.active {
	background-color: var(--green-color);
	color: var(--white-color);
}

.content figure.image {
	margin: 0 auto 1rem;
}

.content figure.image-style-side {
	float: right;
	margin: 0 0 0 1rem!important;
}

.content figure.image img {
	width: 100%;
	border-radius: 5px;
}

.pagination {
	align-items: center;
	justify-content: center;
	display: flex;
	margin: 1.5rem 0;
}

.pagination li {
	color: #929292;
	min-width: 3rem;
	text-align: center;
	background-color: var(--white-color);
	border-radius: 5px;
	margin: 0 5px;
	padding: 0.6rem 0;
}

.pagination li a {
	padding: 0.65rem 1.3rem;
	color: #929292;
}


.pagination li a:hover {
	color: var(--white-color);
	text-decoration: none;
}

.pagination li:hover {
	background-color: var(--green-color);
	opacity: 0.7;
}

.pagination li.active {
	background-color: var(--green-color);
}

.pagination li.active a {
	color: var(--white-color);
}

.pagination li.disabled {
	opacity: 0.5;
}

.pagination li.disabled:hover {
	opacity: 0.5;
	background-color: transparent;
	color: #929292;
	cursor: not-allowed;
}



/* -----------------------FOOTER---------------------- */

.footer {
	background-color: var(--green-color);
	width: 100%;
	padding: 0 5%;
}

.footer-links {
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid #5D7155;
	padding: 8% 7% 4% 0;
}


.footer-links div {
	max-width: 20%;
	display: flex;
	flex-direction: column;
}

.footer-links div h3 {
	margin-bottom: 1rem;
	color: #FFFFFF;
	/*padding: 20;*/
	font-size: 18px;
	text-transform: uppercase;
}

.footer-links a {
	color: var(--gray-text-color);
	padding: 0.5rem 0;
	font-size: 14px;
}

.footer-links a:hover {
	color: var(--gray-text-color);
	cursor: pointer;
}

.copyright {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 50px;
	color: 	#FFFFFF;
}

.not-found {
	background-color: var(--green-color);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--white-color);
	font-weight: 600;
	font-size: 1.5rem;
	width: 100%;
	height: 100vh;
	flex-direction: column;
}

.not-found h1{
	font-size: 10rem;
}

.not-found a {
	margin-top: 2rem;
	background-color: var(--white-color);
	color: var(--green-color);
	padding: 1rem 2rem;
	border-radius: 5px;
}

.not-found a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.news-img-box img {
	width: auto;
}

.index-news .news-img-box img {
	width: 300px;
}

.news-img-box {
	text-align: center;
}

.menu-dropdown-list .header-navbar-item a {
	padding-left: 0;
}

.menu-dropdown-list .header-navbar-item {
	float: left;
}

.menu-dropdown-list .dropdown-center {
	border-top: 1px solid #214E20;
	width: 75%;
	margin-left: 5%;
	padding-top: 10px;
}

.menu-dropdown-list {
	display: none;
	background: #033502;
	width: 100%;
	padding: 0.7rem 5% 0.7rem 0;
}

.menu-dropdown-list-button {
	position: relative;
}

.footer-icons {
	display: flex;
	flex-direction: row !important;
	gap: 10px;
}

iframe, img {
	max-width: 100%;
}

.article iframe {
	width: 100%!important;
}