/*
Theme Name: City Works Theme
Theme URI:
Author: Cp Dev Team
Author URI:
Description: City Works Theme
Version: 1.0
*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* CSS RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

* {
  font-family: "Open Sans", sans-serif !important;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a,
a:focus,
a:active {
  text-decoration: none;
  color: var(--main-color);
}

/*============================*/
/*=========== THEME ==========*/
/*============================*/

.espa-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 5rem 0;
  padding: 0 2rem;
}

.espa-lines {
  position: absolute;
  left: 0;
  z-index: 1;
}

.espa {
  max-width: 100%;
  object-fit: contain;
  z-index: 2;
}

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.4;
}

h1 {
  font-size: 28px;
  font-weight: lighter;
}

.content-wrapper {
  /* margin: 0 auto; */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.text-center {
  text-align: center !important;
}

.background-none {
  background: none !important;
}

.flex-center {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.flex-around {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
}

.justify-end {
  justify-content: flex-end !important;
  -webkit-justify-content: flex-end !important;
}

.flex-between {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.flex-3 {
  flex: 3;
}

.flex-2 {
  flex: 2;
}

.block {
  display: block;
}

.mb-10 {
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: 12px;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*============================*/
/*========== HEADER ==========*/
/*============================*/
#header {
  box-shadow: 0px 3px 6px #00000066;
}

.header-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

.header-home-link {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  gap: 1rem;
  width: fit-content;
  color: var(--secondary-color);
  font: normal normal 57px/27px Roboto;
  font-size: 3rem;
  line-height: 1.1;
  text-align: center;
}

.header-home-link img {
  max-width: 180px;
  height: auto;
}

#header-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

#header-menu ul {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  padding: 15px 0;
  font-size: 18px;
}

#header-menu ul li {
  margin: 0 20px;
  max-width: 250px;
}

#mobile-header-menu {
  display: none;
  text-align: center;
}

#mobile-header-menu li {
  padding: 5px 0;
}

.header-nav {
  font-weight: lighter;
}

.toggle-menu {
  color: var(--main-color);
  font-size: 18px;
  margin-right: 10px;
  font-weight: lighter;
}

.responsive-menu {
  display: none;
  cursor: pointer;
  margin: 0 auto;
  padding: 5px;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: var(--main-color);
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/*============================*/
/*=========== MAIN ===========*/
/*============================*/

/*======== MAP ========= */

.projects-number {
  padding: 5px;
  color: #707070;
  background-color: #fff;
  border-radius: 9px;
}

.map-search {
  background-color: var(--main-color);
  color: white;
  border-radius: 0px 0px 30px 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 30%;
}

.hidden-filters {
  display: none !important;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-right: 1rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--accent-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggle-filters {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 0;
  background-color: var(--main-color);
  position: sticky;
  top: 0;
  display: none;
}

.toggle-filters-text {
  font: normal normal normal 20px/19px Roboto;
}

.table-view .map-search {
  width: 100%;
  position: absolute;
  top: 15px;
  left: 30px;
  z-index: 2;
  transition: opacity 0.1s ease-in;
  -moz-transition: opacity 0.1s ease-in;
  -webkit-transition: opacity 0.1s ease-in;
  display: flex;
  flex-direction: column;
  -o-transition: opacity 0.1s ease-in;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

#search_form {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
  gap: 20px;
  max-width: 400px;
  width: 100%;
}

.cluster {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: white;
}

.cluster img {
  width: 100%;
  height: 100%;
}

.map-view {
  flex-direction: column;
}

.table-view {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#column-one {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 2rem;
}

.table-view #column-one {
  gap: 1.3rem;
}

.map-view #column-two {
  padding-top: 1rem;
}

.search-form-input {
  padding: 10px 15px;
  box-shadow: 0px 3px 6px #00000066;
  border: none;
  border-radius: 9px;
}

.search-form-input:focus {
  outline: none;
}

.form-input-wrapper-map-view {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
}

.form-input-wrapper-table-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contraction-rate-wrapper {
  display: none;
}

.absorption-rate-wrapper {
  display: none;
}

.form-input-wrapper-table-view > label {
  text-align: left;
  padding-bottom: 1rem;
}

.form-dates-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
}

.form-dates-wrapper label {
  width: 100%;
}

#form-dates {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

#clear-dates {
  display: none;
  color: #707070;
  font-size: 0.8rem;
  float: right;
}

#clear-dates:hover {
  cursor: pointer;
  color: white;
}

.categories-wrapper-map-view {
  display: grid;
  column-gap: 1rem;
  row-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 1rem;
}

.categories-wrapper-table-view {
  display: grid;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 1rem;
}

#categories-wrapper button {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000066;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}

.category-button-map-view {
  height: 88px;
  min-width: 88px;
  max-width: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.category-button-table-view {
  height: 44px;
  width: 199px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 1.5rem 1rem;
}

#select-all-categories.toggled {
  border: 3px solid #1fc8e0;
}

.category-button-map-view:focus,
.category-button-table-view:focus {
  outline: none;
}

.position-initial {
  position: initial !important;
}

.search-items.search-info {
  text-align: center;
  color: #1b82b5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.search-items {
  text-align: left;
  font-size: 14px;
  font-weight: lighter;
  padding: 5px 10px;
}

.search-item-content {
  height: 85px;
  overflow-y: scroll;
  margin: 10px 0;
}

#reset {
  width: 170px;
  border: 1px solid #1b82b5;
  color: #1b82b5;
  border-radius: 3px;
  font-size: 14px;
  height: 30px;
  outline: none;
  cursor: pointer;
}

#reset:focus {
  outline: none;
}

#reset i {
  margin: 0 5px;
  transition: all 0.7s ease-in-out 0s;
}

#reset:hover i {
  cursor: default;
  transform: rotate(360deg);
  transition: all 0.7s ease-in-out 0s;
}

.search_status_icon {
  width: 10px;
  margin: 0 5px;
}

.reset-button {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 12px 0;
}

.info {
  margin-left: 5px;
}

.button-wrapper {
  text-align: right;
  /*display: flex;*/
  /*display: -webkit-flex;*/
  /*justify-content: center;*/
  /*-webkit-justify-content: center;*/
  /*align-items: center;*/
  /*-webkit-align-items: center;*/
  /*flex-wrap: wrap;*/
  /*-webkit-flex-wrap: wrap;*/
  /*max-width: 100%;*/
  /*padding: 0 100px;*/
  background-image: url("images/patterns/dotted_line.svg");
  background-size: 20px;
  background-position: bottom;
  background-repeat: repeat no-repeat;
}

.inner-wrapper {
  display: flex;
  position: relative;
}

.table-view .inner-wrapper {
  flex-direction: column;
}

.map-container {
  width: 70%;
}

.map {
  width: 100%;
}

#map {
  width: 100% !important;
  height: 860px;
  background-color: #e4e4e4;
}

#map .recent-project {
  border: none;
}

.marker-explanation {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  padding: 15px;
  max-width: 1140px;
  margin: 0 auto;
}

.marker {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

.marker img {
  width: 20px;
  margin-right: 10px;
}

.leaflet-popup-content {
  margin: 0 !important;
}

.marker-cluster {
  font-size: 1.3rem;
  border-radius: 100%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marker-cluster-count {
  color: #fff;
}

/* =========== Special Development Program ======= */

.special-development-program-wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.special-development-program-title {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}

.special-development-program-btn {
  padding: 1rem 2rem;
  text-align: center;
  background: #1b2b48;
  color: #fff;
  border-radius: 9px;
  transition: all 0.5s ease;
}

.special-development-program-btn:hover {
  background: #424242;
}

/* =========== Tritsis - Diekdikisi ======= */

.tritsis-diekdikisi-wrapper {
  min-height: 400px;
  width: 100%;
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
}

.tritsis-title,
.diekdikisi-title {
  font-size: 30px;
  font-weight: bold;
}

.tritsis-btn,
.diekdikisi-btn {
  padding: 1rem 2rem;
  text-align: center;
  background: #1b2b48;
  color: #fff;
  border-radius: 9px;
  transition: all 0.5s ease;
}

.tritsis-btn:hover,
.diekdikisi-btn:hover {
  background: #424242;
}

.tritsis-wrapper,
.diekdikisi-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}

@media screen and (max-width: 768px) {
  .tritsis-diekdikisi-wrapper {
    flex-direction: column;
  }

  .tritsis-wrapper,
  .diekdikisi-wrapper {
    width: 100%;
  }
}

/* =========== RECENT ======= */

.recent-projects {
  text-align: center;
  background-color: #f7f7f7;
  padding-bottom: 2rem;
}

.section-header {
  color: #1b82b5;
  text-align: center;
}

.section-title {
  font-size: 1.5rem;
  padding: 4rem 0rem;
}

.not-found {
  margin: 2rem 0;
  font-size: 1.5rem;
  font-weight: lighter;
}

.projects {
  width: 90%;
  max-width: 1400px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-bottom: 60px;
  margin: auto;
}

.recent-project {
  width: 260px;
  height: 348px;
  border-radius: 9px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  box-shadow: 0px 3px 6px #00000066;
  margin: 10px;
}

.recent-project-info-window {
  border-radius: 9px;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  width: 300px;
  max-width: 300px;
}

.featured-img {
  width: 100%;
  height: 175px;
}

.project-img {
  width: 100%;
  height: 175px;
  border-radius: 9px 9px 0px 0px;
}

.recent-project-info-window .project-img {
  width: 100%;
  border-radius: 9px 9px 0px 0px;
}

.recent-project-info-window .project-title {
  color: #000;
  font-size: 14px;
  padding-top: 1rem;
  margin: 0.5rem;
}

.project-info {
  background-color: white;
  text-align: left;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.taxonomies-info {
  font-size: 12px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.single-tax-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.info-window {
  justify-content: flex-start;
}

.single-tax-info > img {
  height: 26px;
  width: 26px;
}

.single-term {
  color: #707070;
  font-weight: 600;
}

.swiper-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.swiper-wrapper {
  margin-bottom: 3rem;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #707070;
  color: #707070;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 1.5rem;
  font-weight: bold;
}

/*========== IN NUMBERS ==========*/

.in-numbers {
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
}

.section-content {
  text-align: center;
}

.category-bubble {
  width: 270px;
  height: 270px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 50%;
  box-shadow: 0px 3px 6px #00000066;
  margin: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 100;
}

.total-projects {
  font-size: 3rem;
}

.category-name {
  font-size: 1.5rem;
}

.bubbles {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.category-bubble img {
  margin: 1rem 0rem;
  width: 110px;
  height: 94px;
}

.charts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 3rem;
}

.chart-wrapper {
  height: auto;
  width: 90vw;
  max-width: 1000px;
  border-radius: 9px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000066;
}

.chart-content {
  height: 500px;
}

.pie {
  max-width: 600px;
}

.chart-heading {
  background: #e4e4e4 0% 0% no-repeat padding-box;
  font: normal normal 20px/32px Roboto;
  border-radius: 9px 9px 0px 0px;
  padding: 1rem;
}

.chart-heading h3 {
  margin: 0;
  color: var(--text-color);
}

/* 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: #141b3d !important;
  background-position: initial;
  background-image: none !important;
  transition: none;
  margin: 0 15px 10px 0;
}

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

/*=======FOOTER========= */

.footer {
  background-color: var(--main-color);
  padding: 30px 0;
  color: #fff;
}

.footer-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

footer a,
footer a:active,
footer a:focus {
  color: #fff;
}

.o-engine-logo {
  height: 52px;
}

.cp-logo {
  height: 33px;
}

.terms {
  text-align: center;
  font-weight: lighter;
}

.menu-footer-menu-container {
  margin-bottom: 20px;
}

/*======= SINGLE PROJECT ========*/
#single-project-map {
  width: 80%;
  height: 400px;
  max-width: 1400px;
}

/* fixes potential theme css conflict */
#single-project-map img {
  max-width: inherit !important;
}

.single-project-title {
  text-align: center;
  margin: 2rem 2rem;
  color: var(--text-color);
  font: normal normal 30px/19px Roboto;
  line-height: 2rem;
}

.single-project {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 60px;
  padding: 10px;
}

#acf-map-label {
  float: left;
  width: 80%;
  max-width: 1400px;
  margin-bottom: 1rem;
  color: #707070;
}

.project-taxonomy-wrapper {
  width: 100%;
  background-color: var(--main-lighter-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.project-tax-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 290px;
  width: fit-content;
  padding: 0 1rem;
  min-height: 70px;
  height: auto;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 7px;
  margin: 1rem 1rem;
}

.project-tax-info p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: #707070;
}

.single-project-description {
  /* display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; */
  padding: 12px 0;
  width: 80%;
  max-width: 1400px;
  margin: 1.5rem 0rem;
}

.single-project-description p {
  text-align: justify;
  color: #707070;
}

.single-project-images-heading {
  background-color: var(--main-color);
}

.single-project-images-heading h2 {
  color: white;
  padding: 2rem 0;
}

.single-project-images {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-wrap: wrap;
  background-color: var(--main-color);
}

.swiper-container.for-single-project {
  max-width: 1450px;
  margin-top: 2rem;
}

.for-single-project .swiper-wrapper {
  margin-bottom: 0rem;
}

.swiper-container.for-single-project img {
  width: 329px;
  height: 222px;
}

.swiper-container.for-single-project img:hover {
  cursor: pointer;
}

.white {
  border: 3px solid white;
  color: white;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 1400px;
  text-align: center;
}

.modal-content img {
  max-width: -webkit-fill-available;
  max-height: -webkit-fill-available;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.single-project-social {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  color: #174e8c;
  font: normal normal normal 20px/24px Roboto;
  margin: 2rem 0;
  line-height: 2rem;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-links a {
  margin: 0 1.2rem;
  color: #174e8c;
}

.social-links img {
  width: 30px;
  height: 30px;
}

.comments-wrapper {
  text-align: center;
  background-color: #f4f4f4;
  padding-bottom: 4rem;
}

.comment-form-wrapper {
  background-color: #f4f4f4;
}

.comment-form {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-direction: column;
  padding-bottom: 20px;
}

#inputs-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.crunchify-text {
  font: normal normal bold 30px/19px Roboto;
  color: var(--text-color);
  padding-top: 2rem;
}

.comment-form-author,
.comment-form-email,
.comment-form-comment {
  display: flex;
  flex-direction: column;
}

.comment-form label {
  text-align: left;
  color: var(--main-color);
}

.comment-form input,
.comment-form textarea {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #e4e4e4;
  border-radius: 9px;
  padding: 0.5rem;
}

.comment-form input {
  height: 25px;
}

.comment-form-cookies-consent,
.comment-notes {
  display: none;
}

.comment-form label:not(.acf-basic-uploader),
.comment-form input,
.comment-form textarea {
  margin: 5px;
}

.comment-form .acf-button {
  background-color: var(--text-color);
  color: #fff;
  padding: 5px;
  font-weight: lighter;
  border-radius: 4px;
}

.comment-form .required_fields {
  font-size: 12px;
}

.comment-respond .required_fields,
.comment-respond .must_be_approved {
  text-align: center;
  font-size: 14px;
  color: #504848;
}

.comment-image {
  height: 200px;
  margin-bottom: 10px;
}

.name_email_wrapper {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  margin: 2rem 1rem;
}

.comment_submit_wrapper {
  margin: 2rem 1rem;
}

#comment {
  resize: vertical;
}

.comment-content {
  text-align: center;
}

.comment-content p {
  text-align: left;
}

.acf-image-label-wrapper {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  font-size: 14px;
}

.acf-label label {
  margin: 5px !important;
}

.cld-like-wrap,
.cld-dislike-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.cld-count-wrap {
  margin-left: 0;
}

.cld-like-dislike-wrap > * {
  margin: 0 !important;
}

.cld-like-dislike-wrap {
  width: 100%;
  padding-top: 5px;
  display: flex;
  justify-content: flex-end;
}

.acf-comment-fields {
  text-align: center;
}

.form-submit {
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-submit #submit {
  width: 152px;
  height: 52px;
  background-color: #24710a;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  border: none;
}

#reply-title {
  margin-bottom: 20px;
  font-size: 18px;
}

.must_be_approved {
  margin-top: 1rem;
  font-size: 18px;
}

.required {
  color: red;
}

.comment-info {
  margin-bottom: 10px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

.approved-comments-wrapper {
  max-width: 500px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

.approved-comments-heading {
  color: #0288bb;
}

.load-more {
  width: 180px;
  background-color: #0288bb;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 1rem;
  cursor: pointer;
}

.approved_comment {
  margin: 30px 0;
  box-shadow: 0px 0px 6px #00000029;
  border-radius: 9px;
  padding: 15px 25px;
  background-color: #f7f7f7;
}

.hidden {
  display: none;
}

.comment-author {
  font-size: 16px;
  margin-right: 20px;
  font-weight: bold;
  color: #0288bb;
}

.comment-date {
  font-size: 12px;
  font-weight: lighter;
  color: #757575;
}

/* ====== show in table ====== */
.table-content {
  font-size: 14px !important;
}

.table-wrapper {
  display: none;
  margin-left: 40px;
  margin-right: 40px;
  min-height: 800px;
  /* width: 70%; */
}

#table-heading {
  color: var(--main-lighter-color);
  font: normal normal bold 30px/19px Roboto;
  margin-bottom: 2rem;
}

.table-wrapper a {
  color: #000;
  word-break: break-all;
}

.table-wrapper .recent-project {
  margin: 20px auto;
  background-color: #fff;
}

.table-pagination {
  margin: 60px 0;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.table-page {
  margin: 0 7px;
  cursor: pointer;
  position: relative;
  width: 20px;
  height: 20px;
  padding: 3px;
}

.table-page:not(:last-child):after {
  content: "";
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: #000;
  top: 12px;
  position: absolute;
  left: 30px;
}

.active {
  background-color: #1b82b5;
  color: #fff;
  border-radius: 50%;
}

.category.table-title {
  flex-direction: column;
}

.table-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-align: center;
  word-break: normal;
}

.table-title:first-child {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  text-align: left;
}

.table-project {
  padding: 10px 0 10px 10px;
  min-height: 50px;
  background-color: #fafafa;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.15s ease-in-out;
}

.table-project:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: 5px;
  padding: 20px 0 20px 10px;
  margin: -10px 0;
}

.table-project:nth-child(2n) {
  background-color: #2961b51e;
}

.table-details {
  background-color: #707070;
  padding: 10px 0 10px 10px;
  font-weight: lighter;
  color: white;
}

.table-data-hidden {
  display: flex !important;
  display: -webkit-flex !important;
}

.small-table-project {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
  -webkit-justify-content: center;
  text-align: center;
  width: 100%;
}

span.small-table-project.td-data[data-type="category"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.table-data-wrapper {
  display: none;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: flex-start;
  -webkit-align-items: flex-start;
}

.td-title {
  font-weight: lighter;
  padding: 10px 0;
  font-size: 15px;
  color: #1b82b5;
}

.td-data {
  font-size: 15px;
  margin: 5px;
}

.show_in_table_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 12px 22px;
  background-color: #24710a;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 9px;
  font-size: 12px;
  height: 45px;
}

.show_in_table_btn i {
  margin-left: 5px;
}

.above-table {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  margin: 0 30px;
}

.feed-img {
  height: 30px;
}

.no-data-found {
  width: 500px;
  margin: 60px auto;
}

.project-more {
  display: none;
  margin: 10px auto;
  cursor: pointer;
  background-color: #1b82b5;
  color: #fff !important;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 3px;
}

/*=========== PAGES ========== */

.inner-page {
  margin: 60px auto;
  max-width: 800px;
}

.inner-page h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  margin: 30px 0 0;
  color: var(--text-color);
}

.inner-page h2 {
  font-size: 20px;
  font-weight: lighter;
}

.inner-page p {
  margin: 20px 0 60px;
}

.inner-page img {
  height: 70px;
}

.inner-page ul {
  list-style: initial;
  margin-left: 20px;
}

.inner-page strong {
  font-weight: 600;
}

.inner-page .image-container {
  text-align: center;
}

/*=======data.Διαύγεια========= */

#diavgeia-page {
  min-height: 100vh;
  max-width: 100%;
  margin: 2rem 0;
}

.title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#diavgeia-title {
  font: normal normal bold 30px/19px Roboto;
  color: #0288bb;
  border-right: 3px solid #0288bb;
  padding: 1rem;
  margin-left: 2rem;
  line-height: 2rem;
}

#diavgeia-logo {
  width: 136px;
  height: 53px;
  padding: 1rem;
  margin-right: 2rem;
}

.filters-wrapper {
  background: #e7edf7 0% 0% no-repeat padding-box;
  padding: 1rem;
  margin-top: 2rem;
}

#filters-title {
  font: normal normal 18px/19px Roboto;
  color: #0c3689;
  margin-bottom: 1rem;
}

#filters-description {
  font: italic normal normal 14px/19px Roboto;
  color: #6f7070;
  text-align: center;
}

.filters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 0.5rem;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filters label {
  color: #0c3689;
  font: normal normal normal 16px/27px Roboto;
  margin-bottom: 0.5rem;
}

.filters input[type="date"] {
  width: 191px;
  height: 38px;
  text-align: center;
  color: #707070;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000066;
  border: 1px solid #ffffff;
  border-radius: 9px;
}

.filters label img {
  width: 16px;
  height: 16px;
}

#data-from:focus,
#data-to:focus {
  outline: none;
}

.table-type-filter {
  padding: 0 1rem;
  border-left: 1px solid #707070;
  border-right: 1px solid #707070;
  text-align: center;
}

#table-type {
  padding: 0.5rem;
  text-align: center;
}

.responsive-table {
  overflow-x: auto;
}

.diavgeia-table-wrapper {
  max-width: 1400px;
  padding: 0.5rem;
  margin: auto;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}

.diavgeia-table-wrapper .above-table {
  width: 100%;
  margin: 0;
  justify-content: space-around;
  align-items: baseline;
  color: #707070;
}

.diavgeia-table-wrapper table {
  width: 100%;
  margin-top: 1rem;
  box-shadow: 0px 3px 6px #00000029;
}

.total-data {
  text-align: right;
}

thead {
  background: #0288bb 0% 0% no-repeat padding-box;
}

th {
  font: normal normal bold 16px/19px Roboto;
  color: #ffffff;
  padding: 1rem;
  vertical-align: middle;
}

tr {
  text-align: center;
}

tr:nth-child(even) {
  background-color: #f8f8f8;
}

td {
  font: normal normal normal 16px/19px Roboto;
  color: #707070;
  padding: 1rem;
}

#pagination-wrapper {
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

#pagination-wrapper .pagination {
  gap: 5px;
  display: flex;
}

#pagination-wrapper .pagination li,
#pagination-wrapper .pagination li button {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pagination-wrapper .pagination li button {
  color: #0288bb;
  background: none;
}

#pagination-wrapper .pagination li button,
#pagination-wrapper .pagination li button:focus {
  outline: none;
  border: none;
}

#pagination-wrapper .pagination li button:not(.active-page):hover {
  cursor: pointer;
}

#pagination-wrapper .pagination li button:hover {
  background-color: rgba(68, 63, 70, 0.1);
  border-radius: 50%;
}

#pagination-wrapper .pagination li button.active-page {
  background-color: #0288bb;
  color: white;
  border-radius: 50%;
  pointer-events: none;
}

/*------------ 404 ------------*/
.wrapper-404 {
  display: flex;
  justify-content: space-evenly;
}

#top-banner {
  padding-top: 0.5rem;
}

.banner-404 {
  width: 100%;
  height: auto;
}

.error {
  margin: 4rem 0;
}

.text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  font-family: "Open Sans", sans-serif;
  color: var(--main-color);
}

.text h1 {
  font-size: 10rem;
  font-weight: bold;
}

/*=========== MEDIA ========== */

@media screen and (max-width: 1150px) {
  .header-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}

@media screen and (max-width: 900px) {
  #header-menu-wrapper {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 550px) {
  .search-item-content {
    display: none;
    height: auto;
  }

  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: inherit;
  }

  /*----- info window  ------ */
  #map .recent-project {
    width: 240px;
    padding: 0;
    margin: 0;
  }

  #map .project-title {
    margin: 10px;
  }

  /*----- recent posts ------ */
  .recent-project {
    height: auto;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
  }

  /* ----- table ----- */
  .table-data-wrapper {
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    background-color: #fff;
  }

  .td-title {
    background-color: #fafafa;
    padding: 5px 0;
  }

  /* ---- single project ---- */
  #comment {
    width: 300px;
  }

  .project-information {
    width: 100%;
  }

  .single-project-info {
    justify-content: center;
    -webkit-justify-content: center;
    flex-direction: column;
    -webkit-flex-direction: column;
    text-align: center;
  }
}

@media screen and (max-width: 650px) {
  /* ------ footer ----- */
  .footer-wrapper {
    flex-direction: column;
    -webkit-flex-direction: column;
  }

  .cp {
    margin: 20px 0;
  }

  .terms {
    order: 3;
  }
}

@media screen and (max-width: 720px) {
  /* ------ header ------ */
  .header-home-link {
    margin: 0 auto;
    flex-direction: column;
    -webkit-flex-direction: column;
  }

  .header-home-link h1 {
    text-align: center;
  }

  .form-input-wrapper-map-view {
    flex-direction: column;
    justify-content: center;
    align-items: normal;
    margin: 0 1.5rem;
    gap: 1rem;
  }

  .form-input-wrapper-table-view {
    margin: 0 1.5rem;
  }

  .toggle-filters {
    margin-left: 2.5rem;
  }
}

@media screen and (max-width: 800px) {
  .table-wrapper {
    width: 100%;
    margin: 40px auto;
    min-height: auto;
  }

  .map-container {
    width: 100%;
  }

  .tp-title {
    font-size: 18px;
    padding: 10px 5px;
    background-color: #f2f2f2;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
  }

  .tp-title i {
    margin: 0 10px;
  }

  .table-details {
    display: none;
  }

  /* ----- map & search ----- */
  .inner-wrapper {
    display: block;
    flex-direction: column;
  }

  .search-opacity {
    opacity: 1;
    width: 100%;
  }

  #reset {
    margin: 0 auto;
    width: auto;
  }

  .button-wrapper {
    text-align: center;
    padding: 0 50px;
  }

  .show_in_table_btn {
    margin: 20px 0;
  }
}

@media screen and (max-width: 890px) and (min-width: 801px) {
  .table-wrapper {
    width: 800px;
    margin: 40px auto;
  }
}

@media screen and (max-width: 1200px) and (min-width: 891px) {
  .table-wrapper {
    width: 90%;
    margin: 40px auto;
  }
}

@media screen and (max-width: 1200px) {
  /* ----- map & search ----- */
  .table-view .inner-wrapper {
    display: block;
  }

  .table-view .map-search {
    position: initial;
    max-width: 100%;
  }

  .table-view .search-opacity {
    opacity: 1;
  }

  .table-view #reset {
    margin: 0 auto;
    width: auto;
  }

  .table-view .button-wrapper {
    text-align: center;
  }

  .table-view .show_in_table_btn {
    margin: 20px 0;
  }

  .table-view #search_form {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 700px) {
  .responsive-menu {
    display: none;
    align-items: center;
    justify-content: center;
  }

  #mobile-header-menu {
    display: none;
  }

  #header-menu {
    display: none;
  }
}

select {
  appearance: none; /* Hide the default arrow */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none; /* Firefox */
  background: white;
  background-image: url("./assets/images/diafora/arrow-down.png"); /* Optional: Add a custom arrow */
  background-repeat: no-repeat;
  background-position: right 12px center; /* Adjust the position of the arrow */
  background-size: 15px; /* Optional: Adjust size of the arrow */
  padding-right: 30px !important;
}