/* OVERRIDES --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* wide page --------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&display=swap');

:root {
  --font-sans: "Geologica", sans-serif;
}

body{
	font-family: "Geologica", sans-serif;
    background:#F4F4F4
}

.layout-main{
	display:block;
}

body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed,
.site-header__fixable{
	position:fixed;
	width:100%;
	max-width:100%;
	inset-block-start: 0;
	pointer-events: initial;
	display:block;
	top:0;
    height: 108px;
}

 body.toolbar-horizontal:not(.is-always-mobile-nav) .site-header__fixable.is-fixed,
.toolbar-horizontal .site-header__fixable{
	top:39px;
}

 body.toolbar-horizontal.toolbar-tray-open:not(.is-always-mobile-nav) .site-header__fixable.is-fixed,
.toolbar-horizontal.toolbar-tray-open .site-header__fixable{
	top:79px;
}

.site-header__inner__container{
	background:#fff;
}

.site-header__inner,
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
    transform: translateX(0);
    opacity: 1;
		width:100%;
}

body:not(.is-always-mobile-nav) .header-nav, .header-nav{
	height:60px;
}

.site-header__initial{
	display:none;
}

.text-content, .cke_editable{
	font-family: "Geologica", sans-serif;
}

body .site-branding{
	min-height:40px;
	background:none;
    padding:0;
    margin:0 0 120px;
}

body .primary-nav__menu-link,
body .secondary-nav__menu-link{
	color:#fff;
	outline:none;
}

body .primary-nav__menu-link:hover{
	color:#fff;
}

body .primary-nav__menu-link:hover .primary-nav__menu-link-inner::after {
    border-width: 2px;
		border-color:#fff;
}

.secondary-nav__menu-link.add-menu-link{
	padding-left:30px;
	background:url(../images/add.png) no-repeat left center;
	background-size:18px auto;
}

.secondary-nav__menu-link[href="/el/user"],
.secondary-nav__menu-link[href="/user"]{
	padding-left:30px;
	background:url(../images/account.png) no-repeat left center;
	background-size:20px auto;
}

.secondary-nav__menu-link[href="/el/user/logout"],
.secondary-nav__menu-link[href="/user/logout"]{
	padding-left:30px;
	background:url(../images/logout.png) no-repeat left center;
	background-size:18px auto;
}

body:not(.is-always-mobile-nav) .secondary-nav::before{
	display:none;
}

body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before,
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before{
	display:none;
}

body:not(.is-always-mobile-nav) .header-nav,
.header-nav{
	position:relative;
	justify-content:space-between;
	z-index:1;
	background:none;
	left:0;
}

.header-nav:before{
	background:#1283BD;
	content:"";
	left:50%;
	width:100vw;
	margin-left:-50vw;
	top:0;
	bottom:0;
	position:absolute;
	z-index:-1;
}

.main-content{
	width:100%;
}

.main-content__container{
	padding-left:20px;
}

body .container{
	padding-left:25px;
	padding-right:25px;
}

body .dialog-off-canvas-main-canvas,
body .page-wrapper{
	width:100%;
	max-width:100%;
}

body .mobile-nav-button:focus,
body a:focus{
	outline:none;
}

.mobile-nav-button[aria-expanded="true"]{
	color:#fff;
}

.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before,
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after{
	border-color:#fff;
	background:#fff;
}

.main-content__container { padding-block-start: unset; }
@media( min-width: 43.75rem ) { .main-content__container { padding-block-start: unset; } }

.region { margin-block-end: 1rem; }
.region > * { margin-block-end: unset; }
@media( min-width: 62.5rem  ) { .region > * { margin-block-end: unset; } }
@media( min-width: 43.75rem ) { .region > * { margin-block-end: unset; } }

.container { max-width: 99vw; }
/* .dialog-off-canvas-main-canvas { } */
.page-wrapper { min-height: 100%; width: 99vw; max-width: 99vw; }
#page { min-height: 100%; width: 100%; padding-left:220px; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s;}
.layout-main-wrapper  { min-height: calc(100% - 17rem); }
.layout-main { min-height: 100%;}

main[role="main"] { min-height: inherit; }
.min-h-inh { min-height: inherit; }

.main-content__container { padding-inline-start: 0.5rem; }

.social-bar { margin: 0; }
.site-branding__name { margin-top: 30px; }

.site-header { min-height: 8rem !important; }
@media( min-width: 75rem ) { .site-header { min-height: 13rem; } }

body .site-footer { 
    width: 100%; 
    height: 5rem; 
    background:none;     
    border: 0 none !important;
}

@media( min-width: 75rem ) { .site-footer__inner { padding-top: 2.25rem; padding-bottom: 2.25rem; } }

@media( min-width: 62.5rem ) { .layout--content-medium, .layout--pass--content-medium > * { -ms-grid-column: 1; -ms-grid-column-span: 15; grid-column: 1 / 15; } }
@media( min-width: 75rem ) { body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed.is-expanded { border: solid thin #286D03; border-left: none; } }

.block-system-breadcrumb-block > .block__content { display: inline-flex; }
.breadcrumb { margin-bottom: 1.5rem; }

/* colors ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* body { background-image: unset;  background: linear-gradient(180deg,#303030 0%,#181818 100%); }
.container.site-header__inner__container, .header-nav { background-color: #EEEEF0 !important; }



.sticky-header-toggle { background: linear-gradient(160deg,#44B508 0%,#286D03 78.66%); }
@media( min-width: 75rem ) { .sticky-header-toggle { background: linear-gradient(160deg,#44B508 0%,#286D03 78.66%); } }

.site-branding { background-image: linear-gradient(160deg,#44B508 0%,#286D03 78.66%) !important; }
.site-header__initial { background-color: #286D03 !important; }
.social-bar { background-color: #286D03; }
#page { background-color: #EEEEF0; }
*/

/* table ------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.table { width: 100%; border-spacing: 1rem; border-collapse: collapse; }
.table tr { border-bottom: solid thin #286D03; border-right: solid thin rgba(220, 235, 214, 0.8); }
.table tbody tr:hover { filter: brightness(0.9); }
.table th { filter: inherit; }
.table th { text-align: left; background-color: #FEFEFE; }
.table th, .table td { padding-inline: 10px; border-left: solid thin rgba(220, 235, 214, 0.8); }
.table td { background-color: #EEEEF0; padding-inline: 15px; }
.table tfoot td { background-color: #FEFEFE; }

.table .views-table { min-width: 50%; }
.table .views-table th { border-block-end: unset; }
.table .views-table th, .table .views-table td { padding-inline: 10px !important; padding-block: 0.5rem !important; vertical-align: middle !important; }

.table .views-table td a:hover { color: #64D991; }

.table-sm-font { font-size: 12px; }
.table-nlb td { white-space: nowrap; }
/*
.table-font-consolas td { font-family: "Consolas","monaco",monospace !important; }

.console-font { font-family: "Lucida Console", "Courier New", monospace; }
*/
.x-scroll { max-width: 100%; overflow-x: scroll; }
.prefont { font-size: 16px; }
.pl5px { padding-left: 5px; }

.views-field-views-bulk-operations-bulk-form { width: 40px; }

/* field ------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.region-building { display: flex; flex-wrap: wrap; min-width: 1200px; }
/* .region-building .block-system-main-block { width: calc(80% - 400px); } */
.region-building .block-system-main-block { width: 100%; }
.field--name-field-building-address { margin-block: var(--sp2); color:#657786;}
.wide-image { margin: 0 !important; width: 200px; }
.wide-image > img { width: 100%; }
.node__content .wide-image { width: 20%; margin-right: 2rem !important; border: solid medium rgb(181, 228, 163); }

@media (min-width: 62.5rem ) { .node__content .wide-content { width: 20%; } }

@media( min-width: 75rem ) { body:not(.is-always-mobile-nav) .primary-nav__menu-link { height: var(--sp2); } }
@media( min-width: 75rem ) { body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner { padding-block: 0 !important; } }

/* .node__content .field--type-address { width: 150px; } */
.node--type-building > .node__content { display: flex; }

.node--type-page .node__content{
    padding:0;
    margin:10px;
}

.node--type-page .node__content > .layout{
    margin:0;
} 

/* sidebar   -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.sidebar-wrapper {
    position: fixed;
    top: 0; 
    bottom: 0; 
    left: 0;
    width: 230px; 
    padding: 18px 25px;
    border-right: solid thin rgb(186, 214, 175);
    background-color: #068dd3; 
    color: #ffffff; 
    z-index: 1000; 
    transition: width 0.3s;
    -moz-transition: width 0.3s;
    -webkit-transition: width 0.3s;
    overflow-y: hidden;    /* hide vertical scrollbar by default */
    overflow-x: hidden;    /* hide horizontal scrollbar */
    max-height: 100vh;
}

/* Enable the scrollbar only when the viewport height is less than 745px */
@media (max-height: 750px) {
  .sidebar-wrapper {
    overflow-y: auto;
  }
}

.sidebar-wrapper .sidebar-inner {
    direction: ltr;       /* reset text direction */
}

/* Webkit scrollbar styles */
.sidebar-wrapper::-webkit-scrollbar {
    width: 8px;
}
  
.sidebar-wrapper::-webkit-scrollbar-track {
    background-color: #068fd300;
}
  
.sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: #055b86ad;
    border-radius: 4px;
    border: 1px solid #068fd300;
}


.sidebar-wrapper .region--sidebar{
    display:flex;
    flex-direction: column;
    height:100%;
}

.sidebar-wrapper .site-branding {
    margin: 0 0 70px;
}

.sidebar-toggler{
    cursor:pointer;
    width:73px;
    height:30px;
    border-radius:50%;
    background:url(../images/toggler.svg) no-repeat center;
    position:absolute;
    right:-15px;
    top:80px;
    /* z-index: 9999; */
}

.path-frontpage .sidebar-wrapper {
  display: none;
}
/*
.sidebar-toggler:before{
    position:absolute;
    content:"";
    width:10px;
    height:10px;
    border-right:2px solid #fff;

}*/

.menu__link--link {
    
    color: white !important; 
}

body .menu--sidebar{
    margin:0;
}

.page-wrapper{
    background:#F4F4F4
}

.page-node-type-building .page-wrapper{
    background:#ffffff
}

body .menu--sidebar .menu__item{
    margin-bottom:20px;

}

body .menu--sidebar .menu__item .menu__link{
    font-family:"Geologica", sans-serif;
    padding:0 0 0 40px;
    width:169px;
    display:block;
}

body .menu--sidebar .menu__item .menu a{
    font-size:14px;
    font-weight:normal;
}

body .menu--sidebar .menu__link.home{
    background:url(../images/home.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.ktiria{
    background:url(../images/ktiria.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.odofotismos { 
    background:url(../images/odofotismos.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.alleskatanalosis { 
    background:url(../images/alles_katanalosis.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.timologio {
    background:url(../images/analisi.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.ohimata {
    background:url(../images/ohimata.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.add-menu-link{
    background:url(../images/add-doc.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.eisagogi-ontotitas{
    background:url(../images/ontotitas.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.content-link{
    background:url(../images/content.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link.user-profile,
body .menu--sidebar .menu__link[href="/el/user"]{
    background:url(../images/account.svg) no-repeat left 2px;
}

body .menu--sidebar .menu__link[href="/el/user/logout"]{
    background:url(../images/log-out.svg) no-repeat left 2px;
}

.menu--sidebar .menu__link::after {
    display: none !important;
}

.content-wrapper {
    padding-inline: 1rem;
    min-width: 50vw;
    /* width: calc(100% - 400px - 400px); Adjust this if necessary */
}


#block-olivero-energybook-account-menu{
    display:flex;
    height:100%;
    flex-direction: column;
    justify-content: end;
}

/* tasks-block ----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* .block-local-tasks-block-wsb > .block__content { margin-left: 450px; } */

/* ADDITIONS -------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */


.block-building-charts-doughnut-block { width: 60%; }
.block-building-charts-block { width: 80%; }
.block-building-add-meter-block {width: 100%;}

.sections-block { border: solid thin lightgray; border-radius: 0.1875rem; } 
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-none { justify-content: none !important; }
.d-flex { display: flex; }

.text-center { text-align: center; }
.text-danger { color: #b50d0d; }

/*
.font-consolas { font-family: Consolas,monaco,monospace; }
*/
h1 { font-size: 2.2rem; }
h1, h2, h3, h4, h5, h6 { margin-block: 0.5rem !important; }

h2{
    font-size:24px;
}

h3{
    font-size:18px;
}

.d-flex { display: flex; }
.justify-content-end { justify-content: end; }

.m-0  { margin: 0 !important; }
.enb-sidebar-item {margin-left: 16px !important;}
.ml-0 { margin-left: 0px !important; }

.my-1 { margin-block: .25rem !important; }
.my-2 { margin-block:  .5rem !important; }
.my-3 { margin-block:   1rem !important; }
.my-4 { margin-block: 1.5rem !important; }

.me-1 { margin-right: .25rem; }
.me-2 { margin-right:  .5rem; }
.me-3 { margin-right:   1rem; }
.me-4 { margin-right: 1.5rem; }
.me-5 { margin-right:   3rem; }

.mb-3 { margin-bottom:   1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0 !important; }

.p-0 { padding: 0 !important; }

.w100 { width: 100% !important; }
.w98  { width:  98% !important; }
.w75  { width:  75% !important; }
.w50  { width:  50% !important; }
.w45  { width:  45% !important; }
.w40  { width:  40% !important; }

.w-100 { width: 100% !important; }
.w-80  { width:  80% !important; }
.w-75  { width:  75% !important; }
.w-50  { width:  50% !important; }
.w-25  { width:  25% !important; }

.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top:   3rem; }

.mt-45px { margin-top: 45px; }
.w800px { width: 800px !important; }

input:not([type="checkbox"]) { min-height: var(--sp2) !important; }
select { height: var(--sp2); border-color:#E8E8E8; border-radius:5px; outline:none !important; background-position:right 10px center;}

.form-select-search, .select2-selection, .select2-selection__rendered, .select2-container 
{ min-width: 300px !important; min-height: 54px !important; font-size: 16px !important; }
.select2-selection__rendered { padding-top: 13px; padding-left: 20px !important; }
.select2-selection__arrow {
    background-image: url('/images/olivero_select_arrow.svg');
    background-color: inherit !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    top: 15px !important;
    width: 40px !important;
    /* border-right: solid thin #aaa; */
}
.select2-selection__arrow > b { display: none !important; }
.button--inline{ margin-top: 0px; margin-bottom: 0px; margin-left: 20px !important; }
.form-item { margin-right: 40px; } 


/* Buttons ------------------------------------------------------------------------------------- */

.button--success        { color: #fff; background-color: #0db54d; border-color: #0b9b42; }
.button--success:hover  { color: #fff; background-color: #0b9b42; border-color: #0b9b42; }
.button--success:active { color: #fff; background-color: #0db54d; border-color: #0b9b42; }
.button--success:focus  { color: #fff; background-color: #0db54d; border-color: #0b9b42; }
.button--success:focus-visible { outline: 1px #0b9b42; }

.button--danger        { color: #fff; background-color: #b50d0d; border-color: #9b0b0b; }
.button--danger:hover  { color: #fff; background-color: #9b0b0b; border-color: #9b0b0b; }
.button--danger:active { color: #fff; background-color: #b50d0d; border-color: #9b0b0b; }
.button--danger:focus  { color: #fff; background-color: #b50d0d; border-color: #9b0b0b; }
.button--danger:focus-visible { outline: 1px #9b0b0b; }

.button--secondary        { color: #fff; background-color: #bab6b6; border-color: #969393; }
.button--secondary:hover  { color: #fff; background-color: #969393; border-color: #969393; }
.button--secondary:active { color: #fff; background-color: #bab6b6; border-color: #969393; }
.button--secondary:focus  { color: #fff; background-color: #bab6b6; border-color: #969393; }
.button--secondary:focus-visible { outline: 1px #969393; }

.button--fixend { width: 100%; margin-right: auto !important; }

.button--xsmall {
    height: 30px;
    padding-block: 13px;
    padding-inline: 14px;
    font-size: 16px;
    line-height: normal;
    border-width: thin !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

.button--toggle::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--sp0-75);
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    content: "";
    transform: translateY(-50%) rotate(45deg);
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
}
.button--toggle.open::before {
    transform: translateY(-50%) rotate(135deg);
}

.button--toggle--xsmall::before {
    margin-top: 10px;
    margin-right: 7px;
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    transform: translateY(-50%) rotate(45deg);
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
}
.button--toggle--xsmall.open::before {
    margin-top: 6px;
    transform: translateY(-50%) rotate(135deg);
}

/* Form Managed File --------------------------------------------------------------------------- */

.form-managed-file {
    display: flex;
    width: 450px;
    border: 1px solid var(--color--gray-60);
    border-radius: var(--border-radius);
    background-color: var(--color--white);
}

.form-managed-file span {
    padding-block: 7px;
    display: flex;
}
.form-managed-file > span:nth-child(3) {
    padding-block: 13px;
    padding-left: 5px;
}
.form-managed-file span a {
    margin-block: auto;
}
.form-managed-file span.file {
    margin-left: 1.125rem;
}

.form-managed-file input[type="file"] {
    width: 100%;
    border: none;
    min-height: unset;
}

.form-managed-file input[type="submit"] {
    background-color: unset !important;
    color: #9b0b0b !important;
    border-radius: 4px;
    padding: 0px 7px;
    text-transform: lowercase;
    font-weight: 400;
    height: 35px;
    text-align: center;
    margin-block: 0.55rem;
    margin-left: auto;
}
.form-managed-file input[type="submit"]:hover {
    background-color: #9b0b0b !important;
    border: solid 2px #9b0b0b;
    color: white !important;
    border-radius: 4px;
}

/* field-multiple-table ------------------------------------------------------------------------ */

.field-multiple-table > thead > tr > th:first-child,
.field-multiple-table .fieldset {
    border-color: #0b9b42;
}
.field-multiple-table > thead > tr > th:first-child {
    background-color: #fff;
    padding-inline-start: 1rem;
}

/* Building Form ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.node-building-form { max-width: 1000px; }
.olivero-details__summary { background-color: white !important; }
.olivero-details__summary:hover ,
.olivero-details__summary:focus { outline: solid 2px #44B508 !important; outline-offset: -4px !important; }

#edit-field-building-address-wrapper > details { border: solid 2px #0b9b42; }
#edit-field-building-meters-0 .fieldset__wrapper { background-color: var(--tabs-background-color-hover); }
#field-building-meters-values .draggable { background-color: inherit; }
#edit-field-building-meters-wrapper h4 { font-size: 1.125rem; }
#field-building-meters-add-more-wrapper .tabledrag-toggle-weight-wrapper { display: none; }
.olivero-details__summary:focus::after { inset: unset !important; }

.node-building-edit-form .form-item .form-item__label,
.node-building-form      .form-item .form-item__label {
    font-size: 18px;
    font-weight: 700;
}

.doughnut-chart-wrapper {
    padding-block: .3rem;
    height: 200px;
    width: 200px;
}

.node--type-powermeter {
    width: 80%;
}

/* Measurement Form ------------------------------------------------------------------------------------------------------------------------------------------------------ */

.d-flex-wrapper {
    width: 300px;
    border: none !important;
}

.d-flex-wrapper > .fieldset__wrapper {
    padding: 0;
    background-color: var(--tabs-background-color-hover);
    display: flex;
}

/* Register Form --------------------------------------------------------------------------------------------------------------------------------------------------------- */
.node-building-edit-form .layout-region__content,
.user-register-form > .layout-node-form { max-width: 1200px; }

/* //////////////////////////////////////////////////////////////////////////////// */
.span.select2-selection.select2-selection--single > span { padding: 8px; }
select#edit-field-issue-type { min-width: 300px; }

/* //////////////////////////////////////////////////////////////////////////////// */
.toolbar-icon-menu-link-contenta5cd7808-6236-4029-a607-3d6575c7d4e4 { padding-left: 2.75em !important; }
.toolbar-icon-menu-link-contenta5cd7808-6236-4029-a607-3d6575c7d4e4::before  { background-image: url(/themes/custom/olivero_energybook/images/hamburger.svg); }
.toolbar-icon-menu-link-content1b76ea52-65e8-46d2-a52c-5aa8a795747a { padding-left: 2.75em !important; }
.toolbar-icon-menu-link-content1b76ea52-65e8-46d2-a52c-5aa8a795747a::before  { background-image: url(/themes/custom/olivero_energybook/images/wrench.svg); }

.layout-node-secondary { grid-column: 1; }

.button {
    height: var(--sp2);
    padding-block: 0;
    padding-inline: var(--sp);
}

.button-eaf {
    margin-top: 10px;
    margin-bottom: 5px;
    display: inline-block;
    border: solid thin #5f7581;
    background-color: white;
    border-radius: 3px;
    padding-inline: 8px;
    padding-top: 5px;   
    padding-bottom: 4px;   
    cursor: pointer;
}
.button-eaf:hover {
    filter: brightness(90%);
}

.layout-node-secondary {
    padding: 15px;
    border: solid thin #5f7581;
    border-radius: 5px;
}

.views-exposed-form > .layout-node-form {
    display: flex;
    flex-wrap: wrap;
}

.views-exposed-form .js-form-submit {
    margin-block: var(--sp1) !important;
}

.form--inline .form-actions {
    margin-top: 2.2rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form--inline .form-actions input {
    margin-block: 0 !important;
}

#edit-header > div,
#edit-header > div > div {
    display: flex;
    flex-wrap: wrap;
}

#edit-header > div > .form-item-action > label {
    display: inline-flex;
    height: var(--sp2);
    line-height: var(--line-height-s);
    margin-inline-start: 0;
    margin-inline-end: var(--sp1);
    margin-block: 0;
    padding-block: 1px 0;
    padding-inline: var(--sp1-5);
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--color-text-primary-medium);
    border: solid 2px currentColor;
    border-radius: var(--border-radius);
    background-color: #f5fff6;
    /* font-family: var(--font-sans); */
    font-size: var(--font-size-l);
    font-weight: 700;
    appearance: none;
    cursor: default;
}

#edit-header > #vbo-action-form-wrapper > details > summary {
    display: inline-flex;
    height: var(--sp3);
    line-height: var(--line-height-s);
    margin-inline-start: 0;
    margin-inline-end: var(--sp1);
    margin-block: 0;
    padding-block: 1px 0 !important;
    padding-inline: var(--sp1-5) !important;
}

.custom-label {
    /* border: 1px solid var(--color--gray-60); */
    border-left:   1px solid var(--color--gray-60);
    border-top:    1px solid var(--color--gray-60);
    border-bottom: 1px solid var(--color--gray-60);

    border-radius: var(--border-radius);
    padding: var(--sp0-5);
}

.custom-radius-left {
    border-top-left-radius:     var(--border-radius);
    border-bottom-left-radius:  var(--border-radius);
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}

.custom-radius-right {
    border-top-left-radius:     0;
    border-bottom-left-radius:  0;
    border-top-right-radius:    var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

pre.backtrace,
em.placeholder {
    color: gray;
}

.block-street-light-map-block{
    padding:0 10px;
}

.block-street-light-map-block > div{
    border-radius: 8px;
    overflow: hidden;
}

/* Images ------------------------------------------------------------------------------------------- */

.wide-content {
    margin-inline-start: 0 !important;
}

img {
    border-radius:8px;
}

.mainImage{
    padding:0 10px;
}

/* .mainImage img{
    
} */
 
.wide-content img {
    max-width: 200px;
}

.field_eikona {
    width: 300px;

}
/* Advance Fields ----------------------------------------------------------------------------------- */

.layout-region--node-secondary {
    padding: 1rem;
    border-radius: 3px;
    border: solid thin #0b9b42;
}

.layout-region--node-secondary .olivero-details {
    width: 350px;
}

/* Multibill Edit ----------------------------------------------------------------------------------- */

.node-multibill-form      .layout-region__content,
.node-multibill-edit-form .layout-region__content { display: flex; flex-wrap: wrap; }

.node-multibill-form      .layout-region__content > * ,
.node-multibill-edit-form .layout-region__content > * { width: 400px; }

.node-multibill-form      .layout-region__content > .field--name-field-multibill-rows,
.node-multibill-edit-form .layout-region__content > .field--name-field-multibill-rows { width: 100%; }

.node-multibill-form      .layout-region__content > .field--name-field-multibill-date,
.node-multibill-edit-form .layout-region__content > .field--name-field-multibill-date { width: auto; }

.field--name-field-multibill-date > .form-datetime-wrapper { margin-right: 0; }
.field--name-field-multibill-date > .form-datetime-wrapper > h4 { font-weight: 100; font-size: 16px; }

.node-multibill-form      .layout-region__content > .divider,
.node-multibill-edit-form .layout-region__content > .divider { display: none; }


/* Mulltibill rows ----------------------------------------------------------------------------------- */

.field--name-field-multibill-rows table { margin-top: 1px; }

.field--name-field-multibill-rows table .form-item { margin-right: 0; }

.field--name-field-multibill-rows .tabledrag-toggle-weight-wrapper { display: none; }

.field--name-field-multibill-rows th { background-color: #FEFEFE; }

.field--name-field-multibill-rows .field-multiple-drag { width: 30px; padding-inline-end: 0; }
.field--name-field-multibill-rows .field-multiple-drag > a.tabledrag-handle { padding: 0; width: auto; height: auto; }
.field--name-field-multibill-rows .field-multiple-drag > a.tabledrag-handle > div.handle { padding: 0; width: 20px; height: 20px; padding-inline: 1rem; }

.field--name-field-multibill-rows table > tbody > tr > td:nth-child(3) { width: 90px; padding-inline-end: 0; }

.field--name-field-multibill-rows table > tbody > tr > td:nth-child(3) > input { margin: 0; color: #b50d0d; border-color: #b50d0d; height: auto; padding: 0.5rem; font-weight: 600; }

.field--name-field-multibill-rows table > tbody > tr > td:nth-child(2) { margin-inline-end: 0.5rem; }

.field--name-field-multibill-rows .fieldset__wrapper { padding-block: 0rem; }

.field--name-field-multibill-rows .fieldset__wrapper input { padding-inline: 10px; }

.field--name-field-multibill-rows .fieldset__wrapper > div { display: flex; flex-wrap: wrap; }

.field--name-field-multibill-rows .fieldset__wrapper > div > * { width: auto; }

.field--name-field-multibill-rows .fieldset__wrapper > div > div > div > .form-item__description { font-size: 10px; margin-top: 0.2rem; }
.field--name-field-multibill-rows .fieldset__wrapper > div > * > * { width: 110px; font-size: 12px; margin-right: 4px; }

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-address > * { width: 200px; }

.field--name-field-multibill-rows .fieldset__wrapper > div > * > * > label { height: 54px; margin-block: 0; border-radius: 3px; padding-inline: 1px; }

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dfrom > div > h4,
.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dto   > div > h4 { height: 54px; font-size: 12px; font-weight: 100; margin-block: 0 !important; }

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dfrom > div > div > div,
.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dto   > div > div > div { width: 125px; }

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dfrom > div > div > div > input,
.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dto   > div > div > div > input { width: 110px; }

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dfrom > div > div > div > .form-item__description 
.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-dto   > div > div > div > .form-item__description { font-size: 12px; }

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-type > div { width: 125px; } 

.field--name-field-multibill-rows .fieldset__wrapper > div > .field--name-field-billrow-type > div > select { padding-inline: 8px; background-image: none; }

.powermeter-details div {
    display: inline-block;
    padding: 0 5px !important;
    margin: 0 5px !important;
}

/* Consumption Statistics ------------------------------------------------------------------------------------------------------------------------------------------------------ */
.header-container {
    
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
}

.title h2 {
    margin: 0; /* Remove default margin to align properly */
}
#yearSelector{
    margin: 14px;
}
#yearSelectionForm {
    margin: 0; /* Adjust as needed */
}

.container {
    display: inline-block;
    justify-content: space-around; /* This will space out the children evenly */
}

.consumptionCO2{
    margin-left: 40px;
    max-width: 270px;
    display: inline-block;
    margin: 10px;
}

#overallEmissions {
    display: inline-block;
    margin: 10px; 
    margin-left: 30px;
    max-width: 190px;
    max-height: 60px;
}
.consumptionEnergy{
    max-width: 270px;
    display: inline-block; 
    margin: 10px; 
    
}

#overallTotal {
    display: inline-block;
    margin: 10px;
    margin-left: 30px;
}
.doughnut-chart-wrapper{
    width:220px; 
    max-height: 180px;
    margin: 10px; 
}

.container-full-width {
    display: flex;        /* Use flexbox */
    justify-content: flex-end; /* Align children to the end (right) */
    align-items: flex-start;   /* Align children to the start (top) */
    width: 100%;         /* Make the container full width */
    padding: 10px;       /* Add some padding inside the container */
  }
  
  .right-corner {
    margin-left: auto;   /* Pushes the form to the right */
  }
  
  .points-of-consumptions{
    margin-left: 70px;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
  }
	
.site-header__fixable.is-fixed .site-branding {
    min-height: 60px;
}

body .site-branding__inner{
    display:block;
    height:auto;
}
.site-header__fixable.is-fixed .site-branding__inner{
	height:auto;
}

.site-branding__logo{
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
    margin-left:-5px;
    width:163px;
    display:block;
}

.site-branding__logo img{
    width:163px;
    max-width:163px;
    margin-bottom: -17px;
}

.site-header__fixable.is-fixed .site-branding__logo{
	max-width:250px;
}

.view-home-page-buildings .view-content .views-view-responsive-grid__item{
	border-radius:8px;
	padding:12px;		
	position:relative;
    background:#fff;
    border:1px solid #E8E8E8;
}

.view-home-page-buildings .view-content .views-view-responsive-grid__item:after{
	background:#1283BD;
	content:"";
	position:absolute;
	bottom:0;
	width:100%;
	left:0;
	height:0;
	transition:all 0.2s;
	-moz-transition:all 0.2s;
	-webkit-transition:all 0.2s;
	border-radius:0 0 8px 8px;
}

.view-home-page-buildings .view-content .views-view-responsive-grid__item:hover:after{
	height:6px;
}

.view-home-page-buildings .view-content .views-view-responsive-grid__item img{
	border-radius:5px;
	margin-bottom:5px;
}

.view-home-page-buildings .views-field-title a{
	text-decoration:none;
	font-weight:bold;
}

.node--type-building .layout--twocol-section{
	width:100%;
}

.node--type-building .field--name-field-building-image img {
	border-radius:8px;
}


.node--type-building .layout__region.layout__region--second{
	padding:15px 20px;
	background:#f5f5f5;
	border-radius:8px;
	margin-left:10px;
}

.node--type-building .field--name-field-building-facilities .field__label{
	color:#1283bd;
}

.node--type-building .consumptionCO2,
.node--type-building .consumptionEnergy{
	border-radius:6px;
	background:#fff;
	padding:15px;
}

.node--type-building #energyChartContainer,
.node--type-building #CO2ChartContainer{
	border-radius:8px;
	background:#fff;
	padding:15px;
}

.node--type-building #energyChartContainer{
	margin:10px;
}

.node--type-building .consumptionCO2 > p,
.node--type-building .consumptionEnergy > p{
	margin-left:0;
	text-align:center;
}

@media all and (max-width:1200px){
	.mobile-buttons{
		margin: 0;
    position: absolute;
    right: 30px;
    top: 30px;
	}
	body:not(.is-always-mobile-nav) .header-nav, .header-nav{
		position:fixed;
	}
	.site-header {
    min-height: 140px !important;
	}
	body:not(.is-always-mobile-nav) .header-nav, .header-nav {
    position: fixed;
    transform: translateX(0);
    width: 100%;
    height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    padding: 0;
    z-index: 101;
    border: 0;
    background: red;
    overflow: hidden;
		padding:50px;
	}
	
	body:not(.is-always-mobile-nav) .header-nav ul.menu, .header-nav ul.menu{
		flex-direction: column;
    align-items: start;
	}

}

/* Front Page Main Block/ Municipality Block ------------------------------------------------------------------------------------------------------------------------------------------------------ */


#Co2OLKatanal,
#CostLKatanal,
#Co2Odofotismos,
#CostOdofotismos,
#AllEmissionsCO2Year,
#AllAnnualCostData,
#AllConsumptionIndicator,
#EmissionsCO2Year,
#AnnualCostData,
#AnnualEnergyConsumptionIndicator{
    padding:10px;
    width:100%;
}

#AllEmissionsCO2Year li, #EmissionsCO2Year li {
    background-color: #35baf6; 
    border-radius: 10px; 
    color: #ffffff; 
    padding: 10px; /* Adjusted padding for overall li */
    list-style-type: none; 
    margin-bottom: 10px;
    text-align: center; 
    display: flex; /* Makes it a flex container */
    flex-direction: column; /* Stacks children vertically */
}

#AllEmissionsCO2Year .row-content, #EmissionsCO2Year .row-content {
    flex: 0 0 80%; /* Takes up 80% of the height of the li */
    display: flex; /* Optional: Makes it a flex container if needed */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
}

#AllEmissionsCO2Year .row-footer, #EmissionsCO2Year .row-footer {
    flex: 0 0 20%; /* Takes up 20% of the height of the li */
    display: flex; 
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    background-color: white;
    color: black;
}

  #AllAnnualCostData li, #AnnualCostData li {
    background-color: #28D294; 
    border-radius: 10px; 
    color: #ffffff; 
    padding: 33px; 
    list-style-type: none; 
    margin-bottom: 10px;
    text-align: center; 
}

  #AllConsumptionIndicator li, #AnnualEnergyConsumptionIndicator li {
    background-color: #068DD3; 
    border-radius: 10px; 
    color: #ffffff; 
    padding: 33px; 
    list-style-type: none; 
    margin-bottom: 10px;
    text-align: center; 
}

#AllEnergyConsumptionsMontlhy {
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    justify-content: space-between; /* Spaces the cards evenly */
    gap: 20px; /* Adds space between each card */
}

.card-content-monthly {
    display: flex; /* Aligns children (cards) in a row */
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    justify-content: space-between; /* Spaces the cards evenly */
    align-items: center; /* Centers items vertically */
    width: 100%; /* Ensures it takes the full width of its parent */
    padding: 10px;
    gap: 20px; /* Adds space between each card */
}

.energy-cards {
    display: flex;
    flex-direction: row; /* Arrange children horizontally */
    align-items: center; /* Center align items vertically within each card */
    /*justify-content: center; /* Center content horizontally */
    flex: 1; /* Distributes space equally between cards */
    padding: 0; /* Padding inside each card */
}

.energy-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 6px;
    width: auto; /* Auto width based on content */
    text-align: center;
    flex: 1; /* Flex property to take available space */
}

.energy-card header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between text and icon */
}

.energy-card .energy-value,
.energy-card .percentage-change {
    font-size: 1.3em;
    margin-top: 10px; /* Space above the percentage change */
    color: #000000; /* Adjust based on increase or decrease */
}
#yearSelectionForm {
    margin-left: auto; /* Aligns the form to the right within its container */
    order: 1; /* Flex order, if necessary to position correctly within flex container */
}
/* Style for negative changes */
/* .energy-card .negative .percentage-change {
    color: #F44336;
} */

/* Front Page Main Block/ Municipality Block MONTHLY------------------------------------------------------------------------------------------------------------------------------------------------------ */

.profile-button {
    background: white; 
    color: #000000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    border:1px solid #fff;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s;
    display: flex;
    justify-content: center;
    margin-right: 15px;
}

.profile-button:last-child {
    margin-right: 0;
}

/* Unique background colors for each button's icon */
#showElectricityBtn::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #068DD3; /* Blue for Electricity */
    border-radius: 50%;
    margin-right: 10px;
}

#showDieselBtn::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #35baf6; /* Red for Diesel */
    border-radius: 50%;
    margin-right: 10px;
}

#showGasBtn::before { /* Assuming you change the ID for natural gas button to `showGasBtn` for uniqueness */
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #28D294; /* Green for Natural Gas */
    border-radius: 50%;
    margin-right: 10px;
}

.profile-button:hover, .profile-button:focus {
    background-color: #E0F2FD; /* Light blue background to match the border */
    border: 1px solid #068DD3; /* Blue border */
}

sub {
    font-size: 0.65em;
    vertical-align: baseline;
    position: relative;
    color: inherit; /* You can change the color as needed */
    line-height:1em;
}

.profile-card {
    background-color: #007BFF; /* Blue background */
    color: white; /* White text color */
    border-radius: 8px;
    width: 180px; /* Fixed width */
    display: flex; /* Using flexbox */
    flex-direction: column; /* Stacks children vertically */
    justify-content: space-between; /* Maximizes space between header and value */
    height: 100px; /* Sets a fixed height to ensure room for content */
    overflow:hidden;
}

.downprofile-card {
    background-color: white; /* Blue background */
    color: black; /* White text color */
    padding: 10px; /* Padding around the content */
    border-radius: 8px; /* Apply border-radius to the top-left corner */
    width: 180px; /* Fixed width */
    margin: 10px; /* Margin for spacing between cards */
    display: flex; /* Using flexbox */
    flex-direction: column; /* Stacks children vertically */
    justify-content: space-between; /* Maximizes space between header and value */
    height: 100px; /* Sets a fixed height to ensure room for content */
}

.profile-card-header {
    font-size: 60px; /* Increased font size for header to make it larger */
    padding:15px;
    flex-grow: 1; /* Allows the header to take up more space if needed */
    color: rgba(255, 255, 255, 0.5);
    line-height:60px;
}

.downprofile-card .profile-value {
    position: relative; /* Set relative positioning to allow positioning its children */
}

.downprofile-card .profile-value span {
    position: absolute; /* Position the span relative to its parent */
    top: -40px; /* Adjust to visually place it near the header */
    right: 19px; /* Adjust to align horizontally */
    font-size: 0.8em; /* Keep the font size as specified */
    color: #068DD3 !important; /* Keep the color as specified */
}

.profile-card-subtitle {
    font-size: 0.25em; /* Adjust font size as needed */
    color: #fff;
    line-height: 1.5em;
}

.profile-value {
    font-size: 30px; /* Larger font size for value */
    font-weight: bold; /* Bold font for emphasis */
    /*text-align: center; /* Centers the value */
    padding: 15px;
}

.profile-unit {
    font-size: 0.8em; /* Smaller font size for the unit */
    color: rgba(255, 255, 255, 0.5); /* Ensure unit is lighter */
    display: block; /* Ensure unit is on a new line */
    margin-top: 5px; /* Adjust spacing as needed */
    font-weight:normal;
}

.percentage-change {
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    background-color: white;
    text-align: center;
}

.arrow {
    display: inline-block;
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Adjust size as needed */
    line-height: 24px; /* Adjust line-height to match size */
    border-radius: 50%;
    text-align: center;
    font-size: 1.2em; /* Adjust font size as needed */
    background-color: #ffe5f1; /* Background color for upward arrow */
    color: #ff007f; /* Color for upward arrow */
}

.arrow.up {
    background-color: #ffe5f1; /* Light pink background */
    color: #ff007f; /* Bright pink arrow */
}

.arrow.down {
    background-color: #e0f4ff; /* Light blue background */
    color: #0099ff; /* Bright blue arrow */
}

.percentage {
    color: black; /* Color of the percentage value */
    margin-left: 5px; /* Space between arrow and percentage */
}
.specific-size {
    width:200px;
    height: 100%;
}

.en-header {
    color: #068DD3;
}

.ds-header {
    color: #35baf6;
}

.gs-header {
    color: #28D294;
}

.energy-card-header-monthly {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.card-content-monthly {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-content-monthly > div {
    flex: 1;
    min-width: 250px;
    padding: 9px;
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    grid-gap: 10px;
}
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.card-content-monthly {
    display: block;
    width: 100%;
    background: #f1f1f1; /* light gray background, you can change this as needed */
    padding: 0px;
    box-sizing: border-box;
}

.card-content-monthly .cont {
    display: block; /* makes each container appear on a new line */
    width: 100%;
    margin-bottom: 10px; /* space between rows */
    padding: 10px;
    background: white; /* background color for each row */
    border: 1px solid #ccc; /* border to mimic table cells */
    box-sizing: border-box;
}

.card-content-monthly .cont:last-child {
    margin-bottom: 0; /* removes bottom margin from the last element */
}

/* HM/Egkatastaseis/ Genika Eggrafa------------------------------------------------------------------------------------------------------------------------------------------------------ */

.button-link {
  border-radius: 4px;
  background-color: #ffffff8e;
  color: #FFFFFF;
  text-align: left;
  padding: 0;
  width: 241px;
  transition: all 0.5s;
  cursor: pointer;
  margin-bottom:10px;
}

.button-link .button-link-title {
    font-size: 18px;
    font-weight:bold; 
    color: #0483C4;
}

.button-link span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-link span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-link:hover span {
  padding-right: 25px;
}

.button-link:hover span:after {
  opacity: 1;
  right: 0;
}

/* Ktiria: Basika Dedomena Ktirion------------------------------------------------------------------------------------------------------------------------------------------------------ */

.cont {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0
}

.cont::after {
  content: "";
  clear: both;
  display: table;
}

.cont img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

.cont span {
  font-size: 20px;
  margin-right: 15px;
}

@media (max-width: 500px) {
  .cont {
      text-align: center;
  }
  .cont img {
      margin: auto;
      float: none;
      display: block;
  }
}

/* Ktiria: Epifaneia Ktirion------------------------------------------------------------------------------------------------------------------------------------------------------ */

.field--name-field-epifaneia-ktirioy,
.field--type-integer,
.field--label-inline clearfix{
    display: flex; /* Ensures that the flex properties apply */
    flex-wrap: wrap; /* Allows items to wrap in the container */
    background-color: #00b2ee31;
    padding: 8px 16px; 
    border-radius: 8px;
    display: inline-flex;
    font-size: 16px;
}

.field--name-field-epifaneia-ktirioy{
    width:100%;
    background:#E5F6FF;
}

/* Basika Dedomena Miniaia----------------------------------------------------------------------------------------------------------------------------------------------------- */

.container-month {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    flex-direction: row;
}

.energy-card-monthly {
    background: white;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 10px;
    flex-grow: 1;
}

.energy-card-header-monthly {
    font-size: 1.2em;
    font-weight: bold;
}

.energy-cards {
    margin-top: 10px;
    margin-bottom: 10px;
}

.container-month #combinedCard{
    overflow:hidden;
}
#combinedCardCurrent {
    flex: 3;
    overflow:hidden;
}

#combinedCardPrevious > div{
    min-height:96px;
    display:flex;
    align-items: center;
    justify-content: end;
}

#combinedCardPrevious > div.header-container{
    min-height:initial;
    min-height:70px;
}

#combinedCardPrevious > div,
.container-month #combinedCard > div,
#combinedCardCurrent > div{
    position:relative;
}

.container-month #combinedCard > div{
    padding-left:65px;
    min-height:96px;
}

.container-month #combinedCard > div:before{
    width:50px;
    height:50px;
    top:50%;
    position:absolute;
    left:0;
    content:"";
    border-radius:50%;
    display:block;
    background:#0483C4;
    transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
}


.container-month #combinedCard > div#EnergyyLKatanalMonthly:before,
.container-month #combinedCard > div#EnergyOdofotismosMonthly:before,
.container-month #combinedCard > div#ElectricityMonthly:before,
.container-month #combinedCard > div#AllEnergyConsumptionsMontlhy:before{
    background:url(../images/ilektriki.svg) no-repeat center #0483C4;
    background-size:40%;
}


.container-month #combinedCard > div#DieselMonthly:before,
.container-month #combinedCard > div#AllDieselConsumptionsMontlhy:before{
    background:url(../images/thermiki.svg) no-repeat center #27B0F6;
    background-size:50%;
}

.container-month #combinedCard > div#Co2LKatanalMonthly:before,
.container-month #combinedCard > div#Co2OdofotismosMonthly:before,
.container-month #combinedCard > div#Co2Monthly:before,
.container-month #combinedCard > div#AllEmissionsCo2:before{
    background:url(../images/ekpompes.svg) no-repeat center #57DAFD;
    background-size:50%;
}

.container-month #combinedCard > div#CostLKatanalMonthly:before,
.container-month #combinedCard > div#CostOdofotismosMonthly:before,
.container-month #combinedCard > div#CostMonthly:before,
.container-month #combinedCard > div#AllCostData:before{
    background:url(../images/euro.svg) no-repeat left 12px center #28D294;
    background-size:35%;
}

.container-month #combinedCard > div#IndicatorMonthly:before,
.container-month #combinedCard > div#AllIndicatorYearMonthly:before{
    background:url(../images/deiktes.svg) no-repeat center #0483C4;
    background-size:50%;
}

.container-month #combinedCard > div.header-container{
    padding-left:0;
    min-height:initial;
    min-height:70px;
}

.container-month #combinedCardCurrent > div.header-container{
    min-height:70px;
}

.container-month #combinedCard > div.header-container:before{
    display:none;
}

#combinedCardPrevious > div:after,
.container-month #combinedCard > div:after,
#combinedCardCurrent > div:after{
    position:absolute;
    left:50%;
    width:200%;
    height:1px;
    content:"";
    bottom:0;
    margin-left:-100%;
    height:2px;
    background:#eff1f3
}

#combinedCardPrevious > div.header-container:after,
#combinedCardPrevious > div:last-child:after,
.container-month #combinedCard > div.header-container:after,
#combinedCardCurrent > div.header-container:after,
.container-month #combinedCard > div:last-child:after,
#combinedCardCurrent > div:last-child:after{
    display:none;
}

#combinedCardPrevious {
    flex: 1;
    overflow:hidden;
}
.table-cont {
    display: flex;
    justify-content: space-between;
}

.month-cards {
    width: 70%; /* Adjust as needed */
}

.month-percentage-cards {
    width: 25%; /* Adjust as needed */
}

.month-card {
    padding: 13px;
    margin: 41px;
} 

.month-percentage-card {
    padding: 20px 0;
    margin: 0;
}
.energymonth-card {
    background: white;
    padding: 20px 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.energymonth-card-header {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0; /* Remove any default margin */
}

.energymonth-value-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.energymonth-value-number {
    font-size: 1.2em;
    color: #333;
    margin-left: 93px; /* Adjust margin-left as needed */
    display: block;
    font-weight:bold;
}

.energymonth-unit {
    font-size: 0.8em; /* Smaller font size for the unit */
    color: #666; /* Optionally change the color */
    display: block;
    margin-top: 2px; /* Adjust spacing as needed */
}

.percentagemonth-change {
    font-size: 1.2em;
    font-weight: bold;
    padding: 4px;
    text-align: center;
}

.energy-percentage-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div#AllEmissionsCo2.energy-cards {
    margin-bottom: 20px; /* Adds a margin to the bottom of the element */
  }

/* 25-75 no wrap----------------------------------------------------------------------------------------------------------------------------------------------------- */
.layout--twocol-section {
    flex-wrap: nowrap !important;
}

/* Basika Dedomena Ktiriou----------------------------------------------------------------------------------------------------------------------------------------------------- */
.basic-consumption-cards {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 13px;
    width: 320px; /* Auto width based on content */
    text-align: center;
    flex: 1; 
    margin: 10px;
}

.basic-light-cards {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 29px;
    width: 240px; /* Auto width based on content */
    text-align: center;
    flex: 1; 
    height: 292px;
    margin: 10px;
}

.basic-consumption-cards header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between text and icon */
}

.basic-consumption-cards-value {
    font-size: 1.2em;
    font-weight: bold;
    color: #000000; /* Adjust based on increase or decrease */
}
.value-number {
    display: block; /* Ensure value and unit are in separate lines */
    font-size: larger;
}
.value-unit {
    font-size: 0.8em; /* Smaller font size for the unit */
    color: #666; /* Optionally change the color */
    font-weight: normal; /* Ensure the unit is not bold */
    display: block; /* Ensure unit is on a new line */
    margin-top: 2px; /* Adjust spacing as needed */
}
.basic-consumption-cards-percentage-change{
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 10px; /* Space above the percentage change */
    color: #000000; /* Adjust based on increase or decrease */
}
.consumption-data-color {
    background-color: #068DD3; /* Blue for consumption */
    width:100%;
    height: 100%;
}

.co2-data-color {
    background-color: #35baf6; /* Green for CO2 */
    width:100%;
    height: 100%;
}

.cost-data-color {
    background-color: #28D294; /* Orange for cost */
    width:100%;
    height: 100%;
}

/* Basika Dedomena Miniaia Ktiriou----------------------------------------------------------------------------------------------------------------------------------------------------- */

.energy-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}
.header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
}
.header-container form {
    margin: 0;
}
.header-container select {
    padding: 5px 40px 5px 15px;
    font-size: 15px;
}
.header-container h4 {
    margin: 0;
    font-size: 22px;
}
.energy-cards {
    width: 100%;
}
.energy-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.energy-card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.energy-value {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.percentage-change {
    font-size: 18px;
    color: #999;
    width: 100%;
}

/* Sunolikos Arithmos Ktirion----------------------------------------------------------------------------------------------------------------------------------------------------- */
.count-card  {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 23px;
    text-align: center;
    flex: 1; /* Flex property to take available space */
    width: 984px;
    flex: 1; 
}

.timologio-card  {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 23px;
    text-align: center;
    padding: 6px 17px;
    margin: 3px;
    width: 984px;
    flex: 1; 
    font-weight: bold;
    font-size: 1.3em;
}

.count-card-front{
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 23px;
    text-align: center;
    flex: 1; /* Flex property to take available space */
    width: 300px;
    height: 130px;
    flex: 1; 
}
.count-card header {
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between text and icon */
}

.count-card ,.count-value, .count-card-front{
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 10px; /* Space above the percentage change */
    color: #000000; /* Adjust based on increase or decrease */
}

body.menu-collapsed .sidebar-wrapper {
    width:80px;
}

body.menu-collapsed #page {
    padding-left: 80px;
}

.menu--sidebar .menu__item{
    transition:all 0.3s;
    -moz-transition:all 0.3s;
    transition:all 0.3s;
    overflow:hidden; 
    display:block;
    max-height:300px;
}

body.menu-collapsed .menu--sidebar .menu__item{
    width:35px;
    max-height:35px;
}

body.menu-collapsed .sidebar-toggler{
    transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}

body.menu-collapsed .site-branding__logo{
    overflow:hidden;
    width:40px;
}

#CountBuildings,
#SetOfLands,
#CountOdofotismos{
    padding:10px;
    width:100%;
}

#CountBuildings > div,
#SetOfLands > div,
#CountOdofotismos > div{
    width:100%;
    margin:0;
}
#fuelProfile > h2,
#fuelProfile > .d-flex{
    margin:0 10px;
}

/* HM Egkatastaseis----------------------------------------------------------------------------------------------------------------------------------------------------- */

.make-view-label a {
    color: inherit; 
    text-decoration: none; 
    font-size: 1.9rem; 

}

.view-building-facilities .view-content .views-view-responsive-grid__item{
	border-radius:8px;
	padding:12px;		
	position:relative;
    background:#fff;
    border:1px solid #E8E8E8;
}

.view-building-facilities .view-content .views-view-responsive-grid__item:after{
	background:#1283BD;
	content:"";
	position:absolute;
	bottom:0;
	width:100%;
	left:0;
	height:0;
	transition:all 0.2s;
	-moz-transition:all 0.2s;
	-webkit-transition:all 0.2s;
	border-radius:0 0 8px 8px;
}

.view-building-facilities .view-content .views-view-responsive-grid__item:hover:after{
	height:6px;
}

.view-building-facilities .view-content .views-view-responsive-grid__item img{
	border-radius:5px;
	margin-bottom:5px;
}

.view-building-facilities .views-field-title a{
	text-decoration:none;
	font-weight:bold;
}

.field--name-field-eikona img {
    max-width: auto;
    display: block;
    width: 100%;
    max-height: 225px;
}

.body-content {
    background-color: #f9f9f9; /* Lighter background for a cleaner look */
    width: 100%;
    height: 120px;
    border: 1px solid #ddd; /* Solid border for a cleaner look */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow-y: scroll;
    padding: 10px; /* Padding for better content spacing */
}

/* Custom scrollbar styling for WebKit browsers */
.body-content::-webkit-scrollbar {
    width: 8px;
}

.body-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.body-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 8px;
}

.body-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}
.link-wrapper{
    margin-bottom: 10px;
}
.link-odigies-xrisis{
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    display: inline-block;
    background-color: #068DD3;
}

.link-odigies-xrisis:hover {
    background-color: #068fd3d3;
    color: #FFFFFF;
}
.link-fylladia_syntirisis{
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #35baf6;
    border: none;
    border-radius: 5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    display: inline-block;

}
.link-fylladia_syntirisis:hover {
    background-color: #35b9f6d3;
    color: #FFFFFF;
}
.link-tehniki_tekmiriosi {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #28D294;
    border: none;
    border-radius: 5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: abs;
    width: 100%;
    display: inline-block;
}
.link-tehniki_tekmiriosi:hover {
    background-color: #28d294d3;
    color: #FFFFFF;
}

.view-building-facilities span:nth-of-type(2) {
    display: none;
}

/* Genika Eggrafa----------------------------------------------------------------------------------------------------------------------------------------------------- */

.view-general-documents .field--name-field-genika-eggrafa{
    display: none;
}

.link-genika-eggrafa{
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    display: inline-block;
}

#map{
    height: 400px;
}

/* Login----------------------------------------------------------------------------------------------------------------------------------------------------- */
.path-frontpage #page{
    background: url(../images/test-arxikis.png);
    background-size: cover; /* Ensure the image covers the entire background */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    height: 100vh; /* Make sure the height covers the full viewport */
    width: 100%; /* Ensure the width covers the full viewport */
}

.path-frontpage .content-wrapper {
    margin-top: 100px;
    background: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    margin-left: 450px;
}

/* 
.path-frontpage .content-wrapper {
    padding-inline: 1rem;
    min-width: 50vw;

} */

.views-field-field-genika-eggrafa-ktiriou .node {
    margin:0 0 10px;
}

.views-field-field-genika-eggrafa-ktiriou .node a{
    padding:0;
    margin:0;
    color:#0483C4;
    font-weight:normal;
    font-size:22px;
}

.views-field-field-genika-eggrafa-ktiriou .node a:hover{
    text-decoration:underline;
}

/* File: modules/custom/energybook/css/energybook.css */
.login-logo img {
    width: 480px;  /* Adjust the width as needed */
    height: 150px;  /* Maintain aspect ratio */
    margin-left: -29px;
  }
/* Τιμολόγιο----------------------------------------------------------------------------------------------------------------------------------------------------- */
  

/*  .container-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}*/

.basic-data-year-container {
    width: 80%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 10px;
}

.previous-year-basic-data-year-container {
    width: 40%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 10px;
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-container h2 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

.header-container form {
    margin-left: auto;
}

.basic-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.basic-data-table th, .basic-data-table td {
    padding: 10px;
    text-align: center;
}

.basic-data-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    text-align: center;
}

.basic-data-table td {
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.basic-data-table tbody tr:last-child td {
    border-bottom: none;
}

.basic-data-table .total-row td {
    font-weight: bold;
    background-color: #f5f5f5;
}

select#yearSelector {
    /* padding: 5px 10px; */
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 20px;
}

.basic-data-monthly-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.basic-data-monthly-container h2 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

.basic-data-monthly-container select#monthSelector {
    padding: 5px 10px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 20px;
}

.basic-data-monthly-container .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.basic-data-monthly-container .header-container h2 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

.basic-data-monthly-container .header-container form {
    margin-left: auto;
}

.basic-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.basic-data-table th, .basic-data-table td {
    padding: 10px;
    /* text-align: left; */
}

.basic-data-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

.basic-data-table td {
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.basic-data-table tbody tr:last-child td {
    border-bottom: none;
}

.basic-data-table .total-row td {
    font-weight: bold;
    background-color: #f5f5f5;
}

.percentage-change-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.percentage-change-list .month-percentage-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.percentage-change-list .month-percentage-card.positive {
    color: green;
}

.percentage-change-list .month-percentage-card.negative {
    color: red;
}

.percentage-change-list .month-percentage-card.zero {
    color: gray;
}

.basic-data-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Light grey for even rows */
  }
  .basic-data-table tr:nth-child(odd) {
    background-color: #ffffff; /* White for odd rows */
  }

  .basic-data-table tr.total-cost-row {
    background-color: #e0f7fa; /* Light blue for the total cost row */
  }

/* Pop-Up----------------------------------------------------------------------------------------------------------------------------------------------------- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }