@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import 'font-size.css';
/* @import 'date-picker.css'; */

/* ROOT COLORS AND RESPONSIVE BODY */
:root {
    --white: #FFFFFF;
    --black: #0E0E0E;
    --dgreen: #009444;
    --dgreen-30: rgba(0, 148, 69, 0.3);
    --green: #39B54A;
    --lgreen: #8FD125;
    --gray: #666666;
    --dgray: #434343;
    --lgray: #E1E1E1;
    --vlgray: #F5F5F5;
}

body, html {
    height: 100%;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
}

/* TEXT SELECT COLOR AND BG COLOR */
::-moz-selection {
    color: white;
    background: var(--green);
}

::selection {
  color: white;
  background: var(--green);
}

/* CUSTOM SCROLLBAR */

::-webkit-scrollbar-track
{
	border-radius: 10px;
}
::-webkit-scrollbar
{
	width: 10px;
    height: 5px;

}
::-webkit-scrollbar-thumb
{
	background-color: var(--green);
}

/* THEME SETTINGS */

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--lgreen);
}

.real-content a {
    color: var(--dgreen);
}

.real-content a:hover {
    color: var(--lgreen);
}

.filter-green {filter: invert(52%) sepia(81%) saturate(424%) hue-rotate(78deg) brightness(97%) contrast(83%);}
.filter-dgreen {filter: invert(22%) sepia(98%) saturate(2204%) hue-rotate(141deg) brightness(107%) contrast(100%);}
.filter-white {filter: invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);}
.filter-lgray {filter: invert(99%) sepia(0%) saturate(1932%) hue-rotate(215deg) brightness(107%) contrast(76%);}
.filter-gray {filter: invert(21%) sepia(0%) saturate(2773%) hue-rotate(316deg) brightness(100%) contrast(82%);}

.text-dgreen {color: var(--dgreen) !important}
.text-green {color: var(--green) !important}
.text-lgreen {color: var(--lgreen) !important}
.text-white {color: var(--white) !important}
.text-black {color: var(--black) !important}
.text-gray {color: var(--gray) !important}
.text-lgray {color: var(--lgray) !important}
.text-dgray {color: var(--dgray) !important}

.bg-gray {background-color: var(--gray) !important}
.bg-dgray {background-color: var(--dgray) !important}
.bg-lgray {background-color: var(--lgray) !important}
.bg-vlgray {background-color: var(--vlgray) !important}
.bg-white {background-color: var(--white) !important}
.bg-dgreen {background-color: var(--dgreen) !important}
.bg-green {background-color: var(--green) !important}
.bg-lgreen {background-color: var(--lgreen) !important}

.thin {font-weight: 100 !important;}
.extra-light {font-weight: 200 !important;}
.light {font-weight: 300 !important;}
.regular {font-weight: 400 !important;}
.medium {font-weight: 500 !important;}
.semi-bold {font-weight: 600 !important;}
.bold {font-weight: 700 !important;}
.extra-bold {font-weight: 800 !important;}
.black {font-weight: 900 !important;}

h1,h2,h3,h4,h5,h6 {margin-bottom: 0px !important}

.pointer {cursor: pointer !important;}

.uppercase {text-transform: uppercase !important;}

.filter-shadow {
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.16)) !important;
  border-radius: 10px;
}

.rounded {
    border-radius: 50% !important;
}

.custom-input .input-group,
.custom-input .input-group input,
.custom-input .input-group-append,
.custom-input .input-group-prepend,
.custom-input .input-group-text,
.custom-input textarea,
.custom-input input,
.custom-input select,
.custom-input-v2 .input-group,
.custom-input-v2 .input-group input,
.custom-input-v2 .input-group-append,
.custom-input-v2 .input-group-prepend,
.custom-input-v2 .input-group-text,
.custom-input-v2 textarea,
.custom-input-v2 input,
.custom-input-v2 select {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  padding-left: 0px !important;
}

.custom-input .input-group,
.custom-input input,
.custom-input select {
  background-color: var(--white) !important;
  border-radius: 60px !important;
  padding-left: 10px !important;
  border: 2px solid var(--gray) !important;
  font-size: 14px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.custom-input-v2 .input-group,
.custom-input-v2 input,
.custom-input-v2 select {
    padding: 5px 10px !important;
    border-radius: 0px !important;
    background: url('../img/input-arrow.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right .25rem center !important;
    background-size: 25px 25px !important;
    background-color: var(--white) !important;
}

.custom-input-v2 input[type="date"]::-webkit-inner-spin-button,
.custom-input-v2 input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent !important;
}

.custom-input textarea {
  font-size: 14px !important;
}

.custom-input ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */  color: var(--lgray); font-style: italic; opacity: 1; /* Firefox */}
.custom-input :-ms-input-placeholder { /* Internet Explorer 10-11 */  color: var(--lgray);font-style: italic;}
.custom-input ::-ms-input-placeholder { /* Microsoft Edge */ color: var(--lgray);font-style: italic;} 

/* BUTTONS */

button {
    box-shadow: none !important;
    outline: none !important;
}

.btn {
    padding-left: 1.65rem !important;
    padding-right: 1.65rem !important;
    border-radius: 60px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--white) !important;
}

.btn-min {
    min-width: 160px;
}

.btn-min-2 {
    min-width: 190px;
}

.btn-lgreen,
.btn-green:hover {
    background-color: var(--lgreen) !important;
    border-color: var(--lgreen) !important;
}

.btn-green,
.btn-lgreen:hover,
.btn-dgreen:hover {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.btn-dgreen {
    background-color: var(--dgreen) !important;
    border-color: var(--dgreen) !important;
}

.btn-lgray {
    background-color: var(--lgray) !important;
    border-color: var(--lgray) !important;
    color: var(--gray) !important;
}

.btn-lgray:hover {
    background-color: var(--dgray) !important;
    border-color: var(--dgray) !important;
    color: var(--white) !important;
}

.btn-send {
    background: var(--white);
    border: 2px solid var(--green);
    color: var(--green) !important;
}

/* NAVBAR CSS */

.navbar {
    margin: 0;
    padding-bottom: 7px;
    border-bottom: 4px solid var(--dgreen);
    padding-top: 30px;
    padding-bottom: 10px;
}

.navbar:before {
    position: absolute;
    background: var(--lgreen);
    height: 4px;
    content: '';
    width: 35%;
    bottom: -4px;
    right: 0;
}

.navbar .nav-link {
    color: var(--black) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-transform: uppercase;
}

.navbar .nav-item {
    margin-left: auto !important;
    margin-right: auto !important;
}

.navbar-nav {
    width: 100%;
}

.navbar .nav-link i {
    color: var(--white);
    padding-top: 10px !important;
    font-size: 12px !important;
}

.navbar .nav-link.active,
.navbar .nav-link.active i,
.navbar .nav-link:hover,
.navbar .nav-link:hover i {
    color: var(--green) !important;
}

.navbar-toggler {
    border: none !important;
}

main {
    margin-top: 114px !important;
}

.open_dropdown_ss {
    display: none !important;
}

.dropdown-menu {
    border: none !important;
    border-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 14px !important;
}

.dropdown-menu li:hover,
.dropdown-item:hover {
    background: transparent !important;
    color: var(--green) !important;
}

.dropdown-submenu {
    display: none;
    padding:8px;
    margin:-8px;
    border-radius: 8px;
    border-left: 3px solid var(--lgray);
    position: absolute;
    left: 70%;
    background-color: var(--white);
    list-style-type: none;
}

/* CAROUSEL */

.carousel-inner,
.carousel-item {
    height: 60vh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.carousel-indicators [data-bs-target] {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    border: 1px solid var(--white) !important;
    opacity: 1;
}

.carousel-indicators .active .dot {
    height: 9px;
    width: 9px;
    margin-left: 3px !important;
    border-radius: 50%;
    background-color: var(--white) !important;
}

/* TOP BG */

/* USAGE
    <div class="top-image" style="background: url('assets/img/top-bg/8.png')"></div>
*/

.top-image {
    height: 400px;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* BREADCRUMB LINE */

.breadcrumb-line .bg-dgreen,
.breadcrumb-line .bg-lgreen {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pw-button {
    margin-left: -15px !important;
    width: 30px;
}

.breadcrumb-line .bg-dgreen span {
    font-weight: 300 !important;
}

@media (max-width: 576px) {
    .pw-button {margin-left: 10px !important;}
    .rm-mb {padding-left: 0px !important;padding-right: 0px !important;}
}

/* PAGE RIGHT */

.page-right {
    padding: 15px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.page-right .avatar {
    height: 80px !important;
    width: 80px !important;
}

.heading-box {
    background-color: var(--green);
}

.heading-box.light {
    background-color: var(--lgreen);
}

.heading-box h2 {
    background-color: var(--white);
    padding-right: 10px !important;
}

.heading-box.light h2 {
    padding-right: 20px !important;
}

/* QUOTE BOX */

.quote-box {
    background: url('../img/quote.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 15% !important;
    background-position: left top !important; 
    padding: 12px;
}

.quote-box h6 {
    line-height: 135% !important;
}

/* IMAGE BOX */

.page-right .image-box {
    height: 200px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center;
    margin-top: 10px;
}

.image-box .hover-effect {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    display: none !important;
}

.image-box .hover-effect img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(334deg) brightness(104%) contrast(101%);
}

.image-box:hover .hover-effect {
    display: flex !important;
}

/* DATE-TIME PICKER FORCE CSS */

.timepicker.ng-scope {
    display: none !important;
}

.calendar-header {
    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    padding-bottom: 7px;
    padding-top: 10px;
    margin-bottom: 10px;
}

/* FOOTER */

footer {
    position: relative;
}

footer .left-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    max-width: 520px;
}

footer .line-bottom {
    height: 8px;
    width: 115px;
    background-color: var(--lgreen);
    margin-bottom: 30px;
}

footer .container * {
    z-index: 20;
}

footer .left-gray-line {
    border-left: 2px solid var(--lgray);
    height: 100%;
    padding-left: 15px;
}

/* LEFT IMAGE */
.left-image-vid {
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 216px;
/*     height: 100%; */
    width: 100%;
}



.left-image {
    background-position: center center !important;
    background-size: cover !important;
    height: 100%;
    width: 100%;
}

.left-item-card .post-name {
    height: 60px;
    overflow: hidden;
    margin-bottom: 15px;
}

.left-item-card.type-2 .post-name {
    max-height: 95px !important;
    height: auto !important;
    overflow: hidden;
    margin-bottom: 15px;
}

.left-item-card.type-2 .post-name h2 {
    margin-bottom: 0px !important;
}

@media (max-width: 1199px) {
    .left-item-card.type-3 .left-image {
        height: 200px !important;
        margin-bottom: 10px !important;
    }
}

.left-item-card .post-lore {
    height: 65px;
    overflow: hidden;
    margin-bottom: 15px;
}

.left-image-mods {
    background-position: center center !important;
    background-size: cover !important;
    height: 100%;
    max-height: 150px;
    width: 100%;
}

/* ARTICLE DESIGN */

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6,
.article p {
    line-height: 165%;
}

/* FITLER LIST */

.in-mb {
    margin-bottom: 10px !important;
}

.filters {
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
}

/* PAGINATION */

.pagination {
  display: inline-block;
  margin-bottom: 40px;
}

.pagination a {
  color: var(--black);
  float: left;
  padding: 2px 5px;
  text-decoration: none;
  font-weight: 500;
}

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

.pagination a:hover:not(.active) {
  color: var(--green);
}

.left-pag {
    transform: rotate(90deg);
    height: 5px;
}

.right-pag {
    transform: rotate(-90deg);
    height: 5px;
}

/* DOCUMENTS TABLE */

thead > * > * {
    border-color: var(--dgreen) !important;
}

tbody > * > * {
    border-color: var(--dgreen-30) !important;
}


.table-bordered>:not(caption)>*>* {
    border-color: var(--dgreen) !important;
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0px;
    border-color: var(--dgreen) !important;
}

td {
    
  vertical-align: middle;
}

/* INTRODUCTION HEADER */

.nav-tabs {
    border-bottom: 6px solid var(--dgreen);
}

.nav-tabs .nav-link.active {
    color: var(--white);
    background-color: var(--dgreen);
    border-color: var(--dgreen);
    font-size: 20px;
    font-weight: 600;
}

.nav-tabs .nav-link {
    color: var(--gray);
    background-color: var(--lgray);
    border-color: var(--lgray);
    font-size: 20px;
    font-weight: 600;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* CITY MENU ITEMS */

.menu-box-container h2 {
    word-break: break-word !important;
}

.menu-box-container .flex-wrap {
    cursor: pointer;
}

.menu-box {
    height: 90px;
    width: 90px;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    background-color: var(--lgray);
}

.menu-box.active,
.menu-box-container .flex-wrap:hover .menu-box {
    background-color: var(--dgreen) !important;
    cursor: pointer;
}

.menu-box img {
    width: 35px;
}

/* PEOPLE LIST */

.person-item .name-box {
    height: 47px;
    word-break: break-word;
    overflow: hidden;
}

/* COUNCIL ITEM */

.council-box .heading-box-lgreen {
    border-left: 8px solid var(--lgreen);
}

.council-box .heading-box-green {
    border-left: 8px solid var(--green);
}

.council-box .heading-box-dgreen {
    border-left: 8px solid var(--dgreen);
}

.council-box .scnd-line {
    padding-left: 17px;
}

/* DAY POINT LIST */

.day-point .number-box {
    height: 38px !important;
    width: 38px !important;
    min-height: 38px !important;
    min-width: 38px !important;
    max-height: 38px !important;
    max-width: 38px !important;
}

.day-point .number-box-text {
    min-height: 45px;
    overflow: hidden;
}

.h-98 {
    height: 98% !important;
}

/* DOCUMENT LIST */

.dc-lore {
    min-height: 65px;
    overflow: hidden;
}

.dc-list {
    margin-bottom: 2.5rem !important;
}

hr {
    opacity: 0.85;
}

/* CITIZEN NAME */

.citizen-name {
    margin-left: -20px;
}

.citizen-name img {
    margin-bottom: 3px;
}

.text-45,
.text-36 {
    word-break: break-word;
}

/* MEDIA QUERY */

@media (max-width: 1199px) and (min-width: 991px) {
    .navbar .nav-link {
        font-size: 13px !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }
    .navbar-brand img {
        width:  160px !important;
    }
}

@media (max-width: 991px) {
    .navbar {
        padding-bottom: 30px !important;
    }
    footer .left-bottom {
        display: none !important;
    }
    .navbar-brand img {
        width:  200px !important;
    }
    .left-item-card .post-name,
    .left-item-card .post-lore {
        height: auto !important;
        margin-bottom: 0px !important
    }
    .left-image {
        background-position: center center !important;
        background-size: cover !important;
        height: 350px;
        margin-bottom: 20px;
        width: 100%;
    }
    .dropdown-menu {
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .navbar-nav {
        gap:24px;
        overflow-y: scroll;
        max-height: 500px;
    }

    .open_dropdown_s {
        display: block !important;
        text-align: center !important;
        color: var(--dgray) !important;
        transition-duration: 0.5s;
    }

    .nav-item a i {
        display: none;
    }

    .dropdown-submenu {
        display: none;
        padding:0 !important;
        margin:0 !important;
        border-radius: 8px !important;
        border-left: none !important;
        position: static !important;
        font-size: smaller !important;
        padding-bottom: 8px !important;
    }

    .open_dropdown_ss {
        display: block !important;
        text-align: center !important;
        color: var(--dgray) !important;
        transition-duration: 0.5s !important;
        color: var(--lgray) !important;
    }
}

@media (max-width: 767px) {
    footer {
        text-align: center;
    }
    footer .line-bottom {
        margin-left: auto;
        margin-right: auto;
    }
    footer .l-item {
        margin-left: auto;
    }
    footer .r-item {
        margin-right: auto;
    }
    .left-gray-line {
        border-left: none !important;
        border-top: 2px solid var(--lgray);
    }
}

/* GALLERY */

.clear:after, .clear:before {
	content: '';
	display: table;
	clear: both;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.gallery a {
    display: block;
    text-decoration: none;
    width: 24%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    margin-bottom: 1%;
    overflow: hidden;
    outline: none;
}

.gallery a img {
    height: 100%;
    transform: scale(1,1);
    transition: all 300ms ease;
}

.gallery a img:hover {
    transform: scale(1.1,1.1);
}

.bg {
    width: 100%;
    height: 200px;
    background-size: cover;
    transform: scale(1,1);
    transition: all 300ms ease;
}

.bg:hover {
    transform: scale(1.1,1.1);
}

.dropdown-toggle::after {
    display: none !important;
}

@media (min-width: 992px) {
    .dropdown-menu {
        margin-top: 0px !important;
    }
    .dropdown:hover .dropdown-menu {
        display: block;
     }

     .open_dropdown_s {
        display: none !important;
    }

    .dropdown-li-sub:hover .dropdown-submenu{
        display: block;
    }
}

/* h1:not(.text-center),h2:not(.text-center, .month),h3:not(.text-center),h4:not(.text-center),h5:not(.text-center),h6:not(.text-center), */
p:not(.text-center, .tamogatasok_table),span:not(.text-center),font:not(.text-center),article:not(.text-center) {
    text-align: justify !important;
}

.tamogatasok_table p {
    text-align: left !important;
}

.tamogatasok_table td {
	border: 1px solid var(--lgray) !important;
}

@media(max-width: 991px) {
	.gallery a {
		width: 50%;
	}

    .gallery_arc_img {
        height: 64vh !important;
    }

    .left-image-vid {
        height: 40vh !important;
    }
}

@media(max-width: 767px) {
	.gallery a {
		width: 100%;
	}
	.bg {
		height: 300px;
	}
}

#szervezetifelepites_table td {
	border: 1px solid var(--lgray) !important;

}

.video-card-mod {
    min-height: 216px;
}

.gallery_arc_img {
    height: 32vh;
}