* {
    box-sizing: border-box;
}

:root {
    --background: #00122b;
    --lightgray: #4a4a4a;
    --text: #fbfbfb;
    --text-border: #fbfbfb30;
    --user-gold: #fcc800;
    --dark-yellow: #706438;
    --rep-blue: #5283b7;
    --royal-blue: #00274f;
    --opacity-blue: #00274f80;
    --green: #1E5631;
    --red: #bc3f3f;
    --separator: #777777;
}

.light-mode {
    --background: #fefefe;
    --text :#00122b;
    --opacity-blue: #ededed;
    --user-gold: #866a00;
    --rep-blue: #284297;
    --royal-blue: #ededed;
    --text-border: #3e3e3e30;
}

.theme-toggle-box {
    position: absolute;
    top: 10px;
    right: -5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: scale(0.8);
    z-index: 999999;
 }

nav .theme-toggle-box {
  position: absolute;
  top: 120px;
  right: 0px;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: scale(0.8);
  z-index: 999999;
}

.theme-toggle-box p {
    margin: 0;
    padding-top: 8px;
    display: none;
}

@media(min-width: 1024px) {
   nav .theme-toggle-box,
  .theme-toggle-box {
    top: 10px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: scale(0.8);
 } 
 .theme-toggle-box p {
    display: block;
}
}

.toggle-btn {
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  background-color: var(--text);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  transform: scale(0.8);
}

@media(max-width:1024px) {
    button#theme-toggle::before {
        position: absolute;
        right: 72px;
        top: 8px;
        content: "Tema:";
        color: var(--text);
        font-size: 1rem;
        font-family: 'Poppins';
    }
}

.toggle-btn .inner-circle {
  width: 24px;
  height: 24px;
  background-color: var(--background);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.3s, background-color 0.3s;
}

.light-mode .toggle-btn .inner-circle {
  left: 33px;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('./fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Source Serif';
    src: url('./fonts/SSerif/SourceSerif4-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

html, body {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: 0.1s font-size;
}

html, body {
    width: 100%;
    display: flex;
    flex-direction: column;
}

html.large-font {
  font-size: 120%;
}

html.large-font p {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
    font-family: 'Source Serif', 'Poppins', sans-serif;
}

body {
    position: relative;
    background-color: var(--background);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
}

.light-mode body {
    background-color: #f7f7f7;
}

.show-desktop {
    display: none;
}

h1 {
    font-size: 1.75rem;
    color: var(--text);
    text-align: center;
}

h2 {
    font-size: 1.5rem;
    color: var(--text);
}

@media(min-width: 1024px) {
    h1 {
        font-size: 3.25rem;
        padding: 0 28px;
    }
    h2 {
        font-size: 2.25rem;
    }
       .show-mobile {
        display: none;
    }
    .show-desktop {
        display: inline;
    }
}

body.hambi-open {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

nav, main, footer {
    padding: 8px;
}

main:not(.normal-height) {
    padding-bottom: 360px !important;
}

nav {
    display: flex;
    justify-content: center;
    -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.light-mode nav{
    background-color: #f5f5f5;
    -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

nav ul li a.active,
nav ul li.active,
.mobile-menu li.active a,
.welcome-menu a.active {
    background-color: var(--text);
    color: var(--background);
}

.logo-nav-box {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1440px;
}

.logo {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 777;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
}

@media(min-width: 1024px) {
    .logo {
        height: 120px;
        width: 120px;
    }
}

.logo img {
    max-width: 100%;
}

.logo a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: 0.2s all;
    background-image: url(img/logo-sm-dark2.svg);
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--text);
    border-radius: 50%;
}

.light-mode .logo a {
   background-image: url(img/logo-sm-light2.svg);
   opacity: 0.65;
}

ul.nav-menu {
    list-style: none;
    display: none;
    padding: 0 20px;
}

ul.nav-menu li {
    align-content: center;
}

ul.nav-menu li a,
ul.nav-menu li.user-btn {
    text-decoration: none;
    color: var(--text);
    padding: 8px 16px;
    border: 1px solid var(--text);
    border-radius: 40px;
    transition: 0.2s all;
    cursor: pointer;
    white-space: nowrap;
}

ul.nav-menu li.user-btn {
    position: relative;
    z-index: 99999;
}

@media(max-width: 1024px) {
    .mobile-menu li.user-btn {
        font-size: 1.25rem;
        border-radius: 24px !important;
        padding: 8px 16px 0;
    } 
}

.dropdown {
    color: var(--text);
    padding: 8px 16px;
    border: 1px solid var(--text);
    transition: 0.2s all;
    cursor: pointer;
    list-style: none;
    opacity: 0;
    padding: 40px 0 0 0;
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 22px;
    left: -0.5px;
    transition: opacity 0.1s, height 0.1s;
    height: 0;
    z-index: -150;
    width: 100.5%;
    border-left: 1px solid var(--text) !important;
    border-right: 1px solid var(--text) !important;
    border-bottom: 1px solid var(--text) !important;
    border-top: none;
    background-color: var(--background);
}

.light-mode .dropdown {
    background-color: #f5f5f5;
}

.dropdown-mobile {
    list-style: none;
    padding: 8px 0 0 0;
    width: 100% !important;
}

.dropdown-mobile li{
    list-style: none;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--text-border) !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    
}

.dropdown-mobile li a {
    font-size: 1rem !important;
}

.dropdown li {
    border-top: 1px solid var(--separator);
    text-align: center;
}

.dropdown li a {
    text-decoration: none;
    display: inline-block;
    border-radius: 0 !important;
    transition: none !important;
    width: 100% !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-v {
    transform: scaleX(-1);
}

.dropdown li a:hover svg,
.dropdown li a:hover svg path {
    transition: none !important;
}

.profile-btn-fix:hover svg path {
    stroke: var(--background) !important;
}

.dropdown li a:hover svg path{
    fill: var(--background);
}

svg.user-icon path {
    stroke: var(--text)
}

ul.nav-menu li.user-btn button {
    font-size: inherit;
    font-family: inherit;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text);
}

ul.nav-menu li.user-btn:focus-within .dropdown,
ul.nav-menu li.user-btn:hover .dropdown {
    visibility: visible;
    opacity: 1;
    height: auto;
    border-radius: 0 0 24px 24px;
}

ul.nav-menu li a:hover {
    color: var(--background);
    background-color: var(--text);
}

button.hamburger {
    position: relative;
    background-color: transparent;
    border: none;
    padding: 0;
    color: var(--text);
    z-index: 1000000;
    height: 24px;
    width: 28px;
}

button.hamburger .bar {
    position: absolute;
    width: 100%;
    height: 2.5px;
    background-color: var(--text);
    border-radius: 8px;
    transition: 0.4s all;
}

button.hamburger .bar:nth-child(1) {
    top: 0;
}

button.hamburger .bar:nth-child(2) {
    top: 45%;
}

button.hamburger .bar:nth-child(3) {
    bottom: 0;
}

button.hamburger.x-ify .bar:nth-child(1){
    top: 48%;
    transform: rotate(45deg);
}

button.hamburger.x-ify .bar:nth-child(2){
    opacity: 0;
}

button.hamburger.x-ify .bar:nth-child(3){
    top: 48%;
    transform: rotate(-45deg);
}

.mobile-menu {
    list-style: none;
    padding: 200px 20px 0 20px;
    position: absolute;
    top: -16px;
    left: -100%;
    width: 100%;
    height: 100vh;
    transition: 0.4s all;
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    z-index: 4;
}

@media(min-width: 1200px) {
     button.hamburger {
        display: none;
    }
    ul.nav-menu {
        display: flex;
        gap: 16px;
    } 
    .mobile-menu {
        display: none !important;
    }
}

.mobile-menu li {
    border: 1px solid var(--text);
    border-radius: 40px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    line-height: 1.8;
}

@media(min-width: 425px) {
    .mobile-menu li {
        width: 80%;
    }
}

.mobile-menu li a {
    text-decoration: none;
    color: var(--text);
    font-size: 1.25rem;
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu.show {
    left: 0;
}

main {
    min-height: 100vh; 
    display: flex;
    justify-content: center;
    flex-grow: 1;
    align-self: center;
    width: 100%;
    max-width: 1440px;
}

@media(min-width: 1600px) {
    main {
        width: 1440px;
    }
}

.homepage-box {
    margin-top: 40px;
    position: relative;
    width: 100%;
}

.homepage-box h1 {
    text-align: center;
    margin: 40px 0 20px;
}

.homepage-box h2 {
    text-align: center;
    margin: 20px 0;
}

h1.post-title {
    margin: 8px 0 !important;
}

@media(min-width: 1024px) {
    .homepage-box {
        margin-top: 0;
    }
   .homepage-box h1 {
    margin: 40px;
   }
    h1.post-title {
        margin: 40px 0 !important;
    }
}

.public-notices-box {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 40px;
    padding-right: 12px;
    padding-left: 12px;
    flex-direction: column;
}

.light-mode .public-notices-box .notice-thumb,
.light-mode .private-notices-box .notice-thumb {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

.notice-thumb {
    background-color: var(--opacity-blue);
    width: 100%;
    border-radius: 12px;
    position: relative;
}

.light-mode .notice-thumb, .light-mode .notice-thumb h3{
    background-color: var(--background);
}

.thumb-image-box {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 !important;
    border-radius: 12px 12px 0 0;
}

@media(min-width: 1200px) {
    .public-notices-box {
        flex-direction: row;
    }
    .public-notices-box .notice-thumb {
        width: 32%;
        display: flex;
        flex-direction: column;
        margin-top: auto !important;
    }
    .public-notices-box .notice-thumb.d-w-100 {
        width: 100% !important;
    }
    .thumb-image-box {
         height: 300px;
    }
}

.notice-thumb > * {
    padding: 8px 20px;
    margin: 0;
}

.notice-thumb h3 {
    border-radius: 12px 12px 0 0;
    color: var(--text);
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

.notice-thumb h3 a {
    text-decoration: none;
    color: var(--text);
}

.public-notices-sidebar .notice-thumb h3 {
    background-color: transparent;
    color: var(--text);
    margin: 0;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    line-height: 1.2;
}

.notice-thumb-img {
    display: block;
    width: 35%;
    min-width: 35%;
    height: 100px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-self: center;
}

.public-notices-sidebar .notice-thumb {
    background-image: url(img/logo-lg-dark.svg);
    background-size: contain;
    background-size: 110px;
    background-position: 0% 50%;
    background-repeat: no-repeat;
}

.sidebar-thumb-text {
    padding: 0;
}

.public-notices-box .notice-thumb h3,.private-notices-box .notice-thumb h3 {
    font-size: 1.5rem;
}

.notice-thumb .thumb-date-box {
    color: var(--text);
    font-size: 1rem;
    padding: 0px 20px;
    font-style: italic;
}

.notice-thumb .excerpt,
.notice-thumb .suggestion  {
    display: flex;
    flex-direction: column;
    font-weight: 200;
    line-height: 1.8;
    color: var(--text);
    padding-top: 0 !important;
}

.notice-thumb .suggestion {
    font-weight: 400;
    font-size: 1.125rem;
}

.notice-thumb .excerpt p,
.notice-thumb .suggestion p {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 86.38px;
}

.private-notices-box .notice-thumb .excerpt p,
.private-notices-box .notice-thumb .suggestion p {
    line-clamp: 4;
    -webkit-line-clamp: 4; 
}

.sidebar-thumb-text .excerpt p {
    margin: 0;
    line-height: 1.3;
    -webkit-line-clamp: 4;
}

.notice-thumb a.read-more {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text);
    width: fit-content;
    padding: 4px 8px;
    transition: 0.2s all;
    font-weight: 400;
}

.read-more-box {
    display: flex;
    justify-content: flex-end;
    padding-top: 0 !important;
}

.notice-thumb a.read-more::after,
.unitListBtn::after {
    content: ">";
    font-size: 1.5rem;
    font-weight: 400;
    transition: 0.2s all;
    padding: 2px 0 0 0;
    display: inline-block;
    transform: translateX(0);
}

.notice-thumb a.read-more:hover::after,
.unitListBtn:hover::after  {
    transform: translateX(3px);
}

.notice-thumb .thumb-date-box p {
    margin: 0;
    padding: 4px 0 0 0;
    opacity: 0.75;
}

.private-notices-box .notice-thumb .thumb-date-box p {
    opacity: 0.9;
}

.all-notices-wrap {
    display: flex;
    flex-direction: column;
    padding-bottom: 28px;
}

@media(min-width: 1024px) {
    .all-notices-wrap {
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }
    .public-notices-sidebar {
        max-width: 24%;
    }
}

.private-notices-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.private-notices-box .notice-thumb h3,
.private-notices-box .notice-thumb h3 a
{
    color: var(--user-gold);
}

.poll-badge {
    position: absolute;
    top: 50px;
    right: 10px;
    border: 3px double var(--user-gold);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-family: 'Source Serif', 'Poppins', sans-serif;
    color: var(--user-gold);
    z-index: 3;
    padding: 0 !important;
    text-decoration: underline;
}

.poll-badge:hover::after{
    display: block;
}

.poll-badge::after {
    position: absolute;
    content: "Ova objava je anketa!";
    background-color: var(--background);
    display: none;
    padding: 4px;
    border-radius: 4px;
    top: 4px;
    left: -170px;
    font-size: 0.875rem;
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    width: max-content;
    text-align: center;
    font-weight: 200;
}

@media(min-width: 768px) {
    .poll-badge {
     top: 10px;
   } 
    .poll-badge::after {
        top: 41px;
        left: -126px;
    }
}

.private-notices-box .notice-thumb .thumb-date-box {
    color: var(--user-gold);
}

.homepage-box > .private-notices-box {
    flex-direction: row;
    flex-wrap: wrap;
}

.public-notices-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    background-color: var(--opacity-blue);
    margin-top: 40px;
    height: fit-content;
}

.light-mode .public-notices-sidebar {
     background-color: var(--background);
}

.public-notices-sidebar h3 {
    font-size: 1.25rem;
}

.public-notices-sidebar h3 a {
    color: var(--text);
}

.basic-building-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    flex-direction: column-reverse;
}

.user-address {
    color: var(--user-gold);
    padding: 4px 16px 4px 4px;
    border-radius: 8px;
    width: fit-content;
    font-weight: 400;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ten-rep-box {
    background-color: var(--royal-blue);
    padding: 8px 16px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.875rem;
}

.light-mode .ten-rep-box {
    background-color: var(--background);
}

.basic-building-info.show-always .ten-rep-box {
    display: flex;
}

.login-cont .user-address,
.login-cont .ten-rep-box {
    margin-top: 0;
    align-self: flex-start;
}

.ten-rep-box .info-snip {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

@media(min-width: 768px) {
    .ten-rep-box {
        width: fit-content;
    }
    .user-address {
        font-size: 1rem;
        margin-top: 0;
        align-self: flex-end;
    }
    .basic-building-info {
        flex-direction: row-reverse;
    }
    .basic-building-info .ten-rep-box {
        display: flex;
    }
    .ten-rep-box {
        gap: 8px;
        font-size: 1rem;
    }
    .ten-rep-box .info-snip {
        flex-direction: row;
        gap: 30px;
    }
    .public-notices-sidebar > h2 {
        border-top: none;
        width: 100%;
        padding-top: 0;
    }
}

@media(min-width: 1600px) {
    .user-address {
        align-self: flex-end;
        text-align: right;
    }
}

.acc {
    font-weight: 500;
    color: var(--user-gold);
}

.fullscreen-opacity {
    z-index: 99999999999999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: var(--opacity-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

.light-mode .fullscreen-opacity {
    background-color: #edededa1;
}

.success-message, 
.error-message,
.tenant-success,
.tenant-error {
    position: relative;
    text-align: center;
    max-width: fit-content;
    padding: 12px 24px;
    justify-self: center;
    color: #f5f5f5;
    border-radius: 20px;
    transition: 0.7s all;
    overflow: hidden;
    z-index: 999999999;
}

.squish {
    transform: scaleY(0);
}

.success-message,
.tenant-success
{
    background: var(--green);
    color: #f8f8f8 !important;
}

.error-message,
.tenant-error {
    background-color: var(--red);
}

.acc-rep {
    color: var(--rep-blue);
}

.acc-red {
    color: var(--red);
}

.single-post-content {
    margin-top: 20px;
    padding: 0 8px 120px 8px;
    border-radius: 12px;
}

.light-mode .single-post-content {
    background-color: var(--background);
}

.private-notices-cont h2{
    color: var(--user-gold);
    text-align: center;
}

@media(min-width: 1024px) {
    .single-post-content {
        margin-top: 28px;
    }
    .private-notices-cont, .single-post-content {
        flex: 1;
        padding: 0 20px 120px 20px;
    }
    .private-notices-cont h2{
        text-align: left;
    }
    .public-notices-sidebar {
        margin: 28px 12px 0 0;
        padding: 8px 8px 0 8px;
    }
    .public-notices-sidebar h2 {
        margin: -4px 0 20px 0;
    }

    .single-post-content > *{
        padding: 0 12px;
    }
}

.public-notices-sidebar .notice-thumb {
    margin-bottom: 8px;
    padding: 10px 0;
    background-color: transparent;
    position: relative;
    display: flex;
    gap: 10px;
}

.notice-thumb .sidebar-thumb-text .thumb-date-box,
.notice-thumb .sidebar-thumb-text .thumb-date-box p {
    padding: 0;
}

.public-notices-sidebar .notice-thumb:last-child {
    margin-bottom: 0px;
    padding-bottom: 20px;
}

.public-notices-sidebar h2 {
    position: relative;
    padding-bottom: 12px;
}

.public-notices-sidebar h2::after
 {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--separator);
    opacity: 0.45;

}

.light-mode .public-notices-sidebar h2::after {
    background: #f7f7f7;
    opacity: 1;
    height: 1.5px;
}

.public-notices-sidebar .notice-thumb:not(:last-child)::after
 {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(to right,
        transparent 0%,
        transparent 5%,
        var(--separator) 5%,
        var(--separator) 95%,
        transparent 95%,
        transparent 100%);
    opacity: 0.45;
}

.light-mode .public-notices-sidebar .notice-thumb:not(:last-child)::after {
    background: linear-gradient(to right,
        transparent 0%,
        transparent 5%,
        #f7f7f7 5%,
        #f7f7f7 95%,
        transparent 95%,
        transparent 100%);
    opacity: 1;
    height: 1.5px;
}

.rep-action-box{
    margin-top: 48px;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.rep-action-box {
    gap: 12px;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

a span {
    display: inline-flex;
}

.rep-action-box a{
    font-weight: 400;
    padding: 4px 16px;
    border: 1.5px solid var(--rep-blue);
    border-radius: 20px;
    color: var(--rep-blue);
    text-decoration: none;
    transition: 0.2s all;
    width: 300px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

svg * {
     transition: 0.2s all;
}

.rep-action-box a span svg path{
    fill: var(--rep-blue);
    stroke: var(--rep-blue);
}

.rep-action-box a span svg circle {
    stroke: var(--rep-blue);
}

.rep-action-box li,
.rep-action-box li a{
    width: 311px;
}

@media(min-width: 768px) {
    .rep-action-box {
        margin-top: 64px;
        gap: 20px;
        display: flex;
        flex-direction: row;
    } 
    .rep-action-box li {
        width: auto;
    }
    .rep-action-box li a {
        width: auto;
        padding: 8px 16px;
    }
}

.rep-action-box a:hover{
    color: var(--background);
    background-color: var(--rep-blue);
}

.rep-action-box a:hover span svg path
 {
    fill: var(--background);
    stroke: var(--background);
}

.rep-action-box a:hover span svg circle {
    stroke: var(--background);
}

main.normal-height {
    min-height: auto;
}

.pass-cont,
.login-cont,
.new-post-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 40px;
    width: 100%;
    max-width: 1440px;
    color: var(--text);
}

@media(max-width: 768px) {
    .login-cont {
        padding-bottom: 80px;
    }
}

.login-cont h1, .login-cont p {
    margin-bottom: 0;
    color: var(--text);
}

.login-cont p {
    margin-top: 0;
}

.login-cont p{
    max-width: 500px;
    text-align: center;
    font-size: 0.875rem;
}

.pass-cont form,
.login-cont form,
.new-post-cont form,
.admin-dash-content form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 8px;
    width: 100%;
    max-width: 520px;
}

@media(min-width: 768px) {
    .pass-cont form,
    .login-cont form,
    .new-post-cont form,
    .admin-dash-content form {
        width: 100%;
        max-width:520px;
        padding: 16px;
        background: var(--background);
        border-radius: 12px;
        margin-bottom: 140px;
    }
}

/* input:focus-visible {
    outline: none !important;
} */

input:focus-visible,
input:focus-visible {
    border-bottom: 1px solid var(--user-gold) !important;
}

.pass-cont form input,
.login-cont form input,
.new-post-cont form input,
.admin-dash-content form input{
    font-size: 1rem;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 1px solid var(--text);
    padding: 10px 16px;
    background-color: transparent;
    color: var(--user-gold);
}

.pass-cont form button,
.login-cont form button,
.new-post-cont form button,
.admin-dash-content form button {
    font-size: 1rem;
    margin-top: 24px;
    border: 1px solid var(--text);
    padding: 12px 16px;
    width: 200px;
    border-radius: 20px;
    background-color: transparent;
    color: var(--text);
    cursor: pointer;
    transition: 0.2s all;
    align-self: center;
    line-height: 1;
}

.pass-cont form button:hover,
.login-cont form button:hover,
.new-post-cont form button:hover,
.admin-dash-content form button:hover {
    color: var(--background);
    background-color: var(--text);
}

.form-wrap {
    display: flex;
    justify-content: center;
    width: 90%;
}

@media(min-width: 768px) {
    .form-wrap {
        width: 440px;
    }
}

.units-list-wrap {
    width: 100%;
    padding: 20px 0 140px 0;
}

.units-list-wrap h1 {
    text-align: center;
    padding: 0 12px;
}

.units-list-wrap h1 span {
    color: var(--user-gold);
    display: block;
}

.sums-box {
    background-color: var(--royal-blue);
    padding: 8px 8px;
    border-radius: 8px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.light-mode .sums-box {
    background-color: var(--background);
}

.sums-box > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.total-apartments span,
.total-tenants span,
.total-size span{
    font-weight: 500;
    color: var(--user-gold);
}

.units-list {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    padding: 0;
    counter-reset: unit-counter;
    list-style: none;
}

.units-list li::before {
    counter-increment: unit-counter;
    content: "Jedinica " counter(unit-counter) ". ";
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 12px;
    align-self: anchor-center;
    width: 50%;
    text-align: center;
    font-size: 1.125rem;
    text-decoration: underline;
}

.unit-box {
    position: relative;
    padding: 12px;
    border-radius: 12px;
    background-color: var(--royal-blue);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: 0.2s max-width;
}

.light-mode .unit-box{
    background-color: var(--background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

.admin-badge::after,
.tenant-rep-badge::after,
.rep-badge::after,
.tenant-badge::after {
    position: absolute;
    top: 16px;
    right: 16px;
    content: "";
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
}

@media(min-width: 768px) {
    .rep-badge::after {
        right: 16px;
    }
    .units-list {
        gap: 20px;
    }
}

.admin-badge {
    order: 1;
}

.admin-badge::after {
    background-color: var(--red);
}

.rep-badge::after {
    background-color: var(--rep-blue);
}

@media(min-width: 600px) {
    .unit-box {
        max-width: 380px;
    }
}

@media(min-width: 1600px) {
    .unit-box {
        max-width: 460px;
    }
}

.tenant-data {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tenant-data div {
    display: flex;
    flex-direction: column;
}

.tenant-data div > span {
    padding: 4px 8px;
    align-content: center; 
}

.tenant-data div > span:first-child {
    width: 100%;
}

.editable-data {
    border: 1px solid #c5c5c5;
    color: var(--background);
    background-color: #c5c5c5;
    border-radius: 8px;
    width: 90%;
    flex: 1;
    font-size: 0.875rem;
    margin-left: 8px;
}

.light-mode .editable-data{
    border: none;
    background-color: #3e3e3e0a;
    color: var(--lightgray);
}

@media(min-width: 500px) {
    .tenant-data div {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .tenant-data div > span:first-child {
        width: 40%;
        border-bottom: 1px solid var(--text-border);
    }
    .editable-data {
        width: 160px;
        max-width: 240px;
         margin-left: 0px;
    }
}

.apt-amount span.editable-data {
    max-width: fit-content !important;
}

.unit-button-box {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.unit-button-box button,
.unit-button-box a,
.admin-actions button,
.admin-actions a {
    background-color: transparent;
    padding: 4px 16px;
    border-radius: 22px;
    cursor: pointer;
    transition: 0.2s all;
    line-height: 1;
    text-decoration: none;
    font-size: 0.875rem;
    text-align: center;
    font-family: 'Poppins';
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.unit-button-box span svg {
    height: 20px;
    width: 20px;
}

.edit-unit {
    border: 1px solid var(--rep-blue);
    color: var(--rep-blue);
}

.edit-unit span svg path {
    fill: var(--rep-blue);
}

.delete-unit,
.delete-pending-unit,
.delete-user {
    border: 1px solid var(--red);
    color: var(--red);
}

.delete-unit span svg path,
.delete-pending-unit span svg path,
.delete-user span svg path{
    stroke: var(--red);
}

.special-btn-box {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 16px;
}

.special-btn-box a {
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--text);
    padding: 4px 16px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.special-btn-box a span {
    font-size: 1.5rem;
}

form input[type="text"], 
form input[type="text"]:focus-visible{
    border-radius: 0px;
    border-left: none;
    border-top: none;
    border-right: none;
    /* outline: none; */
}

textarea.m-2-m-body,
.new-post-cont form textarea,
#editor {
    background-color: transparent;
    height: 400px;
    border-radius: 8px;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    padding: 16px;
    resize: none;
    border: 1px solid var(--text);
    overflow-y: auto;
}

#editor ul,
#editor ol,
ul.profile-building-list,
.user-towns ul,
.owners-summary ul,
ul.contact-admins{
    list-style-type: square;
}

ul.contact-admins > li {
    padding-bottom: 16px;
    font-size: 1.125rem;
}

#editor li::marker,
ul.profile-building-list li::marker,
.user-towns ul li::marker,
.owners-summary ul li::marker,
ul.contact-admins li::marker{
    color: var(--user-gold);
}

ul.every-user {
    list-style: none;
    padding: 0 0 800px 0;
}

.new-post-cont form textarea::-webkit-scrollbar,
.kontakt-form-wrap form textarea::-webkit-scrollbar {
    width: 4px;
    overflow-y: hidden;
}
  
.new-post-cont form textarea::-webkit-scrollbar-track,
.kontakt-form-wrap form textarea::-webkit-scrollbar-track{
    background: transparent; 
    border-radius: 4px;
}
  
.new-post-cont form textarea::-webkit-scrollbar-thumb,
.kontakt-form-wrap form textarea::-webkit-scrollbar-thumb{
    background: var(--text); 
    border-radius: 10px;
}
  
.new-post-cont form textarea::-webkit-scrollbar-thumb:hover,
.kontakt-form-wrap form textarea::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

#toolbar {
    display: flex;
    gap: 24px;
}

#toolbar button {
    margin-top: 0;
    border-radius: 16px;
    line-height: 1;
    padding: 4px 8px;
    width: 72px;
}

.private-post-checkbox,
.is-poll-checkbox,
.anon-box {
    margin-top: 0px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.private-post-checkbox label,
.is-poll-checkbox,
.anon-box
 {
    font-size: 0.875rem;
}

.anon-box label{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

#is_pending_unit,
.remember-me-checkbox input[type="checkbox"],
.private-post-checkbox input[type="checkbox"],
.is-poll-checkbox input[type="checkbox"],
.anon-box [type="checkbox"],
.town-select-list [type="checkbox"]{
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 20px;
    height: 20px;
    border: 1px solid var(--text); 
    background-color: transparent;
    cursor: pointer;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    padding: 0 !important;
  }
  
  #is_pending_unit:checked,
  .remember-me-checkbox input[type="checkbox"]:checked,
  .private-post-checkbox input[type="checkbox"]:checked,
  .is-poll-checkbox input[type="checkbox"]:checked,
  .anon-box input[type="checkbox"]:checked,
  .town-select-list [type="checkbox"]:checked {
    background-color: var(--user-gold);
    border-color: var(--user-gold); 
  }
  
  #is_pending_unit:checked::after,
  .remember-me-checkbox input[type="checkbox"]:checked::after,
  .private-post-checkbox input[type="checkbox"]:checked::after,
  .is-poll-checkbox input[type="checkbox"]:checked::after,
  .anon-box input[type="checkbox"]:checked::after,
  .town-select-list [type="checkbox"]:checked::after {
    content: "✓";
    color: var(--background);
    font-size: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 700;
    transform: translate(-50%, -50%);
  }

.welcome-cont {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media(min-width: 1280px) {
    .welcome-cont {
        padding: 0 12px;
        flex-direction: row;
        gap: 48px;
    }
}

.welcome-cont h1 {
    margin-bottom: 28px;
    text-align: center;
    line-height: 1;
}

.welcome-cont .welcome-logo {
    margin: 28px 0 0 0;
    border-radius: 50%;
    height: 240px;
    width: 240px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(img/logo-sm-dark2.svg);
    background-position: center;
    border: 1px solid var(--text);
    background-size: 80% 80%;
    background-repeat: no-repeat;
}

.light-mode .welcome-cont .welcome-logo {
    background-image: url(img/logo-sm-light2.svg);
    border: 1px solid var(--text);
}

.welcome-text {
    max-width: 320px;
    color: var(--text);
    margin-bottom: 80px;
}

.welcome-text h1 {
     color: var(--text);
}

.welcome-text p {
    font-size: 0.875rem;
    color: var(--text);
    text-align: center;
}

@media(min-width: 1024px) {
    .welcome-cont .welcome-logo {
        border: 1px solid var(--text);
        height: 620px;
        width: 620px;
        margin: 40px;
        aspect-ratio: 1 / 1; 
        background-size: 80% 80%;
        background-image: url(img/logo-lg-dark.svg);
    }
    .light-mode .welcome-cont .welcome-logo {
    border: 1px solid var(--text);
    background-image: url(img/logo-lg-light.svg);
}
    .welcome-text {
        max-width: 600px;
    }
    .welcome-cont h1 {
        margin-bottom: 32px;
        padding: 0;
    }
    .welcome-text p {
    font-size: 1rem;
    text-align: left;
}
}

@media(min-width: 1440px) {
    .welcome-text {
        max-width: 460px;
    }
    .welcome-cont h1 {
        text-align: left;
        line-height: 1;
    }
}

ul.welcome-menu {
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin-top: 32px;
}

ul.welcome-menu li {
   width: 100%;
}

ul.welcome-menu li a {
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--text);
    padding: 4px 20px;
    border-radius: 40px;
    text-align: center;
    display: inline-block;
    width: 100%;
    transition: 0.2s all;
    line-height: 2;
}

@media(min-width: 1024px) {
    ul.welcome-menu {
        margin-top: 0;
    }
    ul.welcome-menu li a {
        padding: 8px 20px;
        line-height: 1.6;
    }
}

ul.welcome-menu li a:hover {
    color: var(--background);
    background-color: var(--text);
}

.welcome-cont .welcome-cta-box {
    position: relative;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
    color: var(--text);
    justify-content: center;
}

.welcome-cont .welcome-cta-box span{
    display: none;
}

@media(min-width: 600px) {
    .welcome-cont .welcome-cta-box span{
        display: block;
    }
}

@media(min-width: 1280px) {
    .welcome-cont .welcome-cta-box {
        margin-top: 0;
        position: absolute;
        width: 100%;
    }
}

.welcome-cont .welcome-cta-box p,
.welcome-cont .welcome-cta-box span {
    font-weight: 300;
    font-size: 0.875rem;
    margin: 0;
}

.welcome-cont .welcome-cta-box a {
    color: var(--user-gold);
    text-decoration: none;
}

a.back-to-all {
    display: flex;
    width: fit-content;
    gap: 4px;
    align-items: center;
    text-decoration: none;
    margin-top: 0px;
    margin-bottom: 20px;
    color: var(--text);
    padding: 2px 8px;
    line-height: 1;
    font-size: 0.875rem;
    min-width: 40px;
}

@media(min-width:768px) {
    a.back-to-all {
        margin-top: 40px;
    }
}

a.back-to-all .acc{
    font-size: 0.875rem;
}

a.back-to-all .arrow {
    font-size: 2rem;
}

main.normal-height a.back-to-all {
    margin-top: 8px;
}

a.back-to-control {
    align-self: flex-start;
    border: 1px solid var(--text);
    padding: 2px 8px;
    line-height: 1;
    border-radius: 20px;
    color: var(--text);
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    width: fit-content;
}

a.back-to-control span {
    font-size: 1.375rem;
}

.post-action-box {
    display: flex;
    flex-direction: column;
}   

@media(min-width: 768px) {
     a.back-to-all {
        font-size: 1rem;
        gap: 8px;
        padding: 6px 16px;
        margin-bottom: 0;
        margin-top: 0px;
    }
    a.back-to-all .acc{
        font-size: 1rem;
    }  
    a.back-to-control {
         padding: 6px 16px;
    }
    .post-action-box {
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    main.normal-height a.back-to-all {
    margin-top: 0px;
}
}

.post-action-box .buttons-box {
    display: flex;
    gap: 12px;
    align-items: center;
}

.post-action-box .buttons-box button,
.post-action-box .buttons-box a.edit-btn {
    background-color: transparent;
    padding: 4px 8px;
    border-radius: 20px;
    transition: 0.2s all;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;
    height: 32px;
}

@media(min-width: 1024px) {
.post-action-box .buttons-box button,
.post-action-box .buttons-box a.edit-btn {
   padding: 4px 16px;
    }
}

.post-action-box .buttons-box a.edit-btn,
.post-action-box .buttons-box button.delete {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-action-box .buttons-box a.edit-btn svg,
.post-action-box .buttons-box button.delete svg {
    height: 20px;
    width: 20px;
}

.post-action-box .buttons-box a.edit-btn {
    border: 1px solid var(--rep-blue);
    color: var(--rep-blue);
}

.post-action-box .buttons-box a.edit-btn 
svg path{
    fill: var(--rep-blue)
}

.post-action-box .buttons-box button.delete {
    border: 1px solid var(--red);
    color: var(--red);
}

.post-action-box .buttons-box button.delete 
svg path{
    stroke: var(--red);
}

.cancel-btn {
    margin-top: 40px;
    margin-bottom: 80px;
    border: 1px solid var(--red);
    color: var(--red);
    text-decoration: none;
    width: fit-content;
    padding: 6px 16px;
    border-radius: 20px;
    line-height: 1;
}

.single-post-content .thumb-date-box {
    display: flex;
    justify-content: flex-end;
    font-size: 1.125rem;
    font-weight: 300;
}

.single-post-content .thumb-date-box p {
    margin: 0;
    font-size: 1rem;
}

.flex-gap-16 {
    display: flex;
    gap: 16px;
    padding-bottom: 20px !important;
    font-weight: 200;
}

.p-bottom-40 {
    padding-bottom: 40px;
}

.single-post-content .post-text {
    color: var(--text);
    margin-top: 32px;
    padding-bottom: 80px;
    font-weight: 300;
    border-bottom: 1px solid var(--text-border);
    line-height: 2;
}

.large-font .single-post-content .post-text,
.large-font .excerpt {
    font-weight: 400;
}

.single-post-content .post-text ul,
.legal-info-box ul,
.kontakt-social-box ul
{
    list-style-type: square;
}

.single-post-content .post-text ul li::marker,
.single-post-content .post-text ol li::marker,
.legal-info-box ul li::marker,
.kontakt-social-box ul li::marker {
    color: var(--user-gold);
}

.single-post-content .post-text ul,
.single-post-content .post-text ol{
    margin: 20px 0;
}

.single-post-content .post-text li {
    padding-bottom: 12px;
}

.user-check-box {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    padding-bottom: 80px;
}

.user-check-box p {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 100;
    font-style: italic;
}

.user-check-box p {
    width: 200px;
    text-align: center;
}

@media(min-width: 768px) {
    .single-post-content .thumb-date-box p {
        font-size: 1.125rem;
    }
    .single-post-content .post-text {
        font-size: 1.25rem;
        line-height: 1.7;
    }
    .user-check-box {
        justify-content: flex-end;
    }
}

.user-check-btn {
    padding: 8px 16px;
    border: 1px solid var(--user-gold);
    color: var(--user-gold);
    background-color: transparent;
    border-radius: 20px;
    font-size: 1rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.readers-list {
    margin-top: 140px;
}

.readers-list h3 {
    color: var(--user-gold);
    font-size: 1.25rem;
}

.assoc-users button.view-full-user,
.assoc-users span.view-full-user {
    padding: 1px 6px !important;
}

.readers-list ul,
.assoc-users {
    font-family: "Poppins", sans-serif;
    list-style: square;
}

.readers-list ul li::marker,
.assoc-users li::marker {
    color: var(--user-gold);
}

.kontakt-cont {
    width: 100%;
    padding-bottom: 400px;
}

@media(max-width: 768px) {
    .kontakt-cont {
        margin-top: 40px;
    }
}

.kontakt-cont h1 {
    text-align: center;
    margin-bottom: 8px;
}

.kontakt-cont > p {
    padding: 0 28px;
    text-align: center;
}

.info-kontakt-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
}

.info-kontakt-flex .kontakt-social-box ul {
    gap: 40px;
}

.info-kontakt-flex > div {
    flex: 1;
    min-width: 300px;
    padding: 8px;
    position: relative;
}

@media(min-width: 1024px) {
    .info-kontakt-flex {
        padding-top: 40px;
    }
    .info-kontakt-flex .kontakt-social-box ul {
    gap: 100px;
    }
    .sep-right::before {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        height: 100%;
        width: 1px;
        background: linear-gradient(to bottom, 
        transparent 0%, 
        transparent 10%, 
        var(--text-border) 10%, 
        var(--text-border) 90%, 
        transparent 90%, 
        transparent 100%);
        opacity: 0.45;
    }
}

a.infos-logo {
    background-color: var(--text);
    padding: 4px 8px 0px 4px;
}

.light-mode a.infos-logo {
    background-color: transparent;
    padding: 0;
}

.sep-bottom::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, 
    transparent 0%, 
    transparent 10%, 
    var(--text-border) 10%, 
    var(--text-border) 90%, 
    transparent 90%, 
    transparent 100%); 
    opacity: 0.45;
}

.sep-bottom2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, 
    transparent 0%, 
    transparent 10%, 
    var(--text-border) 10%, 
    var(--text-border) 90%, 
    transparent 90%, 
    transparent 100%); 
    opacity: 0.45;
}

@media(min-width: 1440px) {
    .sep-bottom2::after {
        right: 50px;
        left: -44px;
    }
}

.legal-info-box ul,
.kontakt-social-box ul{
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 300;
    padding-left: 20px;
}

.social-media-box {
    padding-top: 36px;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 40px;
}

.social-media-box > div {
    border: 1.4px solid var(--user-gold);
    border-radius: 50%;
    height: 48px;
    width: 48px;
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: 0.2s all;
}

.social-media-box > div:hover {
    background-color: var(--user-gold);
}

.kontakt-box .map {
    height: 320px;
    min-width: 320px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--user-gold);
    overflow: hidden;
}

.kontakt-form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.875rem;
}

@media(min-width: 768px) {
     .legal-info-box ul,
    .kontakt-social-box ul{
        font-size: 1.125rem;
    }
    .social-media-box {
        padding-bottom: 0;
    }
    .kontakt-form-wrap form {
        font-size: 1rem;
    }
}

.kontakt-form-wrap form label:not(:first-child) {
    margin-top: 16px;
}

.kontakt-form-wrap form input {
    font-size: 1rem;
    color: var(--user-gold);
    background-color: transparent;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--text);
    max-width: 500px;
}

.kontakt-form-wrap form input:focus-visible {
    border-radius: 0px;
    border-left: none;
    border-top: none;
    border-right: none;
    /* outline: none; */
}

.kontakt-form-wrap form textarea {
    border: 1px solid var(--text);
    font-size: 1rem;
    padding: 16px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    background-color: transparent;
    resize: none;
    height: 200px;
}

.kontakt-form-wrap form button {
    margin-top: 20px;
    margin-bottom: 28px;
    margin-right: 12px;
    border: 1px solid var(--user-gold);
    color: var(--user-gold);
    font-family: 'Poppins', sans-serif;
    background-color: transparent;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 1rem;
    align-self: flex-end;
    cursor: pointer;
    width: fit-content;
}

@media(min-width: 1400px) {
    .kontakt-form-wrap form button {
        margin-bottom: 0;
    }
}

.profile-wrap {
    padding: 28px 16px 200px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
}

.profile-wrap .textual-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media(min-width: 768px) {
    .profile-wrap {
        padding: 28px 0 280px 0;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
    .profile-wrap .textual-data {
       max-width: 700px;
    }
}

.profile-data,
.profile-data-full {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--text-border);
}

.profile-data-full .profile-data-value {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-data-full {
    font-size: 0.875rem;
}

.profile-data {
    max-width: 500px;
}

.column {
    flex-direction: column;
}

.profile-images,
.profile-images-sm {
    display: flex;
}

.profile-images {
    flex-direction: column;
    gap: 16px;
    max-width: 500px;
}

.profile-images-sm {
   flex-wrap: wrap;
   padding: 8px 16px;
   gap: 24px;
   flex-direction: column;
}

.profile-images-sm > div {
    flex: 1;
}

.profile-images img {
    width: 480px;
    max-width: 100%;
}

.profile-images-sm img {
    width: 100%;
    max-width: 100%;
}

@media(min-width:1024px) {
    .profile-images-sm {
        flex-direction: row;
    }
    .profile-images-sm img {
        width: 280px;
        max-width: 100%;
    }
}

.profile-label {
    font-weight: 500;
}

.profile-data-value {
    color: var(--user-gold);
    
}

.user-profile-box .profile-data-value{
    min-width: 50%;
}

.report-to-rep {
    padding-top: 40px;
    font-weight: 200;
    max-width: 615px !important;
}

.report-to-rep a {
    color: var(--user-gold);
    text-decoration: none;
    font-weight: 400;
}

footer {
    color: var(--text);
    -moz-box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
    padding: 8px 8px 12px 8px;
    text-align: center;
    font-style: italic;
    font-weight: 200;
    font-size: 0.875rem;
}

.light-mode footer {
    background-color: #f5f5f5;
     -moz-box-shadow: 0 -4px 10px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 -4px 10px rgba(0, 0, 0, 0);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0);
}

@media(min-width: 1440px) {
    footer {
        font-size: 1rem;
    }
}

.error-back-btn {
    text-decoration: none;
    color: var(--user-gold);
    border: 1px solid var(--user-gold);
    padding: 4px 16px;
    border-radius: 24px;
    margin-top: 24px;
}

.unit-list-modal,
.delete-post-modal,
.delete-user-modal,
.confirm-vote-modal,
.delete-unit-modal {
    display: none; 
    position: fixed;
    z-index: 900000000000000000000000000000000000000000000000000000000000000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.modal-content {
    background-color: var(--background);
    margin: 25% 8px;
    padding: 20px;
    border: 1px solid var(--separator);
    /* width: 100%; */
    max-width: 440px;
    position: relative;
    border-radius: 8px;
    overflow-y: auto;
}

.light-mode .modal-content {
    border: 1px solid var(--background);
}

@media(min-width: 768px) {
    .modal-content {
        margin: 5% auto;
    }
    .modal-content.desktop-center {
        margin: 15% auto;
    }
    #deleteModal  .modal-content,
    #confirmVoteModal  .modal-content {
        margin: 25% auto;
    }
}

.modal-content h2 {
    font-size: 1.25rem;
    text-align: center;
    color: var(--text);
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.modal-buttons button {
    background-color: transparent;
    border: 1.5px solid;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    width: 40%;
    font-weight: 600;
}

.modal-buttons button#confirmDelete,
.modal-buttons button#confirmUserDelete,
button.btn-danger {
    border-color: var(--red);
    color: var(--red);
}

.modal-buttons button#cancelDelete,
.modal-buttons button#cancelUserDelete,
button.btn-secondary {
    border-color: var(--rep-blue);
    color: var(--rep-blue);
}

.admin-dash-wrap {
    width: 100%;
}

.admin-dash-content {
    margin-top: 40px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

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

.admin-dash-wrap > h1,
.admin-dash-wrap > p {
    text-align: center;
    padding: 0 16px;
}

.admin-dash-wrap ol {
    padding: 4px 0 0 28px;
}

.admin-dash-wrap ol li a {
    text-decoration: none;
    color: var(--text);
    transition: 0.2s all;
}

.admin-dash-wrap ol li a:hover {
    color: var(--user-gold);
}

.poll-type-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.poll-type-box > div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.poll-type-box > div label {
    text-align: center;
    font-size: 0.875rem;
}

.poll-type-box div input[type="radio"] {
    accent-color: var(--user-gold);
    width: 20px;
    height: 20px;
}

.preview-box {
    position: relative;
}

.preview-box .preview-osobne {
    filter: grayscale(0.1);
    opacity: 0.5;
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

form .preview-box button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin:0 !important;
}

form button[type="submit"]{
    margin-bottom: 40px;
}

.modal-osobne {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.modal-osobne img {
    max-width: 312px;
}

#closeUserModal {
    border-radius: 50%;
    background-color: transparent;
    color: var(--text);
    width: 30px;
    height: 30px;
    border: 1px solid var(--text);
    cursor: pointer;
}

.editable-data.view-full-user a{
    color: var(--background); 
}

.light-mode .editable-data.view-full-user a{
    color: var(--text); 
}

.light-mode .editable-data.view-full-user {
    background-color: #ac8f1d6e;
    color: var(--text); 
}


light-mode .editable-data.view-full-user a {
   text-decoration: none;
   color: var(--text);
}

.editable-data.view-full-user:hover a{
    text-decoration: underline;
}

.popis-gradova {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    gap: 24px;
    padding: 0;
    margin-top: 60px;
}

.popis-gradova li a {
    padding: 6px 16px;
    border: 1px solid var(--text);
    color:var(--text);
    border-radius: 40px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    min-width: 240px;
    font-size: 1.25rem;
}

@media(min-width: 768px) {
    .popis-gradova li a {
        min-width: 300px;
    }
}

.already-voted-message {
    margin-top: 10px;
    font-weight: 100;
    padding: 0 10px;
}

.please-vote {
    margin-bottom: 0;
    text-align: center;
    text-decoration: underline;
}

.voters-box {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 60px;
}

.voters-box form {
     display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 360px;
}

.voters-list ul,
.not-voted-list ul {
    list-style: square;
}

.voters-list ul li::marker,
.not-voted-list ul li::marker{
    color: var(--user-gold);
}

.voters-box button {
    text-decoration: none;
    width: fit-content;
    align-self: flex-end;
    margin-top: 12px;
    border: 2px solid;
    border-radius: 40px;
    padding: 8px 16px;
    transition: 0.2s all;
    font-weight: 400;
    background-color: transparent;
    font-size: 1rem;
    cursor: pointer;
}

.voters-box button.agree-btn {
    color: #52bb75;
    border-color: #52bb75;
}

.light-mode .voters-box button.agree-btn {
    color: #347c4c;
    border-color: #347c4c;
}

.voters-box button.disagree-btn {
    color: #e93434;
    border-color: #e93434;
}

.light-mode .voters-box button.disagree-btn {
    color: var(--red);
    border-color: var(--red);
}

.results-box {
    margin-top: 20px;
    padding: 10px;
    border-radius: 8px;
}

.results-box h2 {
    font-size: 1.25rem;
    text-align: left;
    margin: 12px 0;
}

.results-bar {
    display: flex;
    height: 36px;
    width: 100%;
    overflow: hidden;
    border-radius: 40px;
    font-size: 1rem;
    text-align: center;
    color: var(--text);
}

.rezultati-pismeno {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media(max-width: 600px) {
    .results-bar > div {
        font-size: 12px;
    }
    .rezultati-pismeno {
        flex-direction: column;
    }
}

.rezultati-pismeno p {
    margin: 2px;
}

.agree-bar {
    background-color: #347c4c;
    line-height: 36px;
}

.light-mode .agree-bar {
    background-color: #a8d1b6;
}

.disagree-bar {
    background-color: var(--red);
    line-height: 36px;
}

.not-voted-bar {
    background-color: var(--text-border);
    text-align: center;
    line-height: 36px;
}

.light-mode .disagree-bar {
    background-color: #c86969;
}

#userDetailsContent p {
    color: var(--user-gold);
}

#userDetailsContent p strong{
    color: var(--text);
}

#userDetailsModal {
    z-index: 10000000000 !important;
}

#userDetailsModal .modal-content {
    border-radius: 12px;
    margin: 25% auto;
}

.font-toggle-box {
    position: absolute;
    top: 120px;
    left: -30px;
    transform: scale(0.8);
    z-index: 1000;
}

.font-toggle-btn {
    border-radius: 20px;
    width: 130px;
    background-color: var(--background);
    color: var(--text);
    font-size: 1.4rem;
    border: 1px solid var(--text); 
    font-family: 'Poppins', sans-serif;   
    cursor: pointer;
    text-align: right;
    padding-right: 12px;
}

.light-mode .font-toggle-btn {
    background-color: #f7f7f7;
    border-bottom: 3px solid var(--text);
}

.font-toggle-btn p{
    margin: 0;
    font-family: 'Source Serif', 'Poppins', sans-serif;
}

@media(min-width: 1024px) {
    .font-toggle-box {
    position: absolute;
    top: 180px;
    right: -40px;
    left: auto;
    transform: scale(1);
    width: 140px;
}

.font-toggle-btn {
    border-right: none; 
    border-radius: 20px 0 0 20px;
    text-align: left;
    padding-right: 0px;
    padding-left: 16px;
 }
}

.confirm-vote-modal button {
    border-color: var(--text);
    color: var(--text);
}

.notice-search-wrap {
    padding: 0 0 24px 0;
    display: flex;
}

.notice-search-wrap > * {
    width: 100%;
}

.notice-search-wrap label {
    display: none;
}

.clear-box {
    padding-bottom: 16px;
}

.clear-box a {
    color: var(--separator);
    text-align: right;
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    justify-content: flex-end;
}

.clear-box a span {
    font-weight: bold;
}

.notice-search-wrap label {
    width: 100% !important;
}

.filter-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid var(--text);
}

.filter-box strong {
    padding-right: 12px;
}

.filter-box a {
    text-decoration: none;
    border: 1px solid var(--text);
    color: var(--text);
    padding: 4px 12px;
    font-size: 14px;
    border-radius: 20px;
    opacity: 0.85;
}

.filter-box .active {
    background-color: var(--text);
    color: var(--background);
}

@media(min-width: 600px) {
  .clear-box {
    max-width: 412px;
    }
  .notice-search-wrap {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .notice-search-wrap > * {
    width: auto;
} 
.notice-search-wrap label {
    display: block;
}
.filter-box {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border-bottom: none;
    align-items: flex-end;
}
}

.notice-search-wrap input {
    /* outline: none; */
    background-color: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--text);
    padding: 4px 16px;
    font-size: 1rem;
    margin-left: 10px;
    color: var(--text);
}

.notice-search-wrap input::placeholder {
    font-style: italic;
    color: var(--text);
}

.notice-search-wrap input:focus-visible {
    border-bottom: 1px solid var(--user-gold);
}

.notice-search-wrap button[type="submit"]{
    margin-bottom: 0 !important;
    background-color: transparent;
    /* outline: none; */
    border: 1.5px solid var(--user-gold);
    padding: 8px 16px;
    font-size: 1rem;
    color: var(--user-gold);
    font-family: "Poppins";
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s all;
    font-size: 0;
    width: fit-content;
}

@media(min-width: 1024px) {
    .notice-search-wrap button[type="submit"]{
        padding: 4px 24px;
        font-size: 1rem;
        border-radius: 20px;
        cursor: pointer;
        transition: 0.2s all;
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

#noResultsMessage {
    width: 100%;
    text-align: center;
    padding: 120px 20px;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 20px;
    position: relative;
    border-top: 1px double var(--user-gold) ;
    margin: 28px auto 40px;
    max-width: 70%;
}

@media(max-width: 1024px) {
    .pagination {
        border-bottom: 1px double var(--user-gold) ;
        padding-bottom: 20px;
        width: 80%;
        margin: 0 auto 40px;
    }
    .pagination::after {
        content: "";
        position: absolute;
        bottom: -28px;
        width: 80%;
        height: 0.5px;
        background-color: var(--user-gold);
    }
}

.pagination a {
    text-decoration: none;
    font-size: 1rem;
    color: var(--user-gold);
    height: 40px;
    width: 40px;
    border-radius: 8px;
    border: 1px solid var(--user-gold);
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination a.current {
    pointer-events: none;
}

.pagination a.current,
.notice-search-wrap button[type="submit"]:hover,
.pagination a:hover {
    color: var(--background);
    background-color: var(--user-gold);
}

.notice-search-wrap button[type="submit"] 
span svg path {
    fill: var(--user-gold);
    transition: 0.2s all;
}

.notice-search-wrap button[type="submit"]:hover 
span svg path {
    fill: var(--background);
}

/* prvi css poslije refaktoriranje baze */

.building-select-intro {
    display: flex;
    flex-direction: column;
    font-style: italic;
}

.building-select-intro p {
    max-width: none;
}

ul.building-select {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: column;
    width: 100%;
    padding: 0 0 200px 0;
}

ul.building-select li {
    width: 100%;
    border-radius: 16px;
    min-height: 200px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
    position: relative;
    background-color: var(--opacity-blue);
}

.light-mode ul.building-select li {
    background-color: transparent;
}

ul.building-select li a {
    padding: 12px 20px 20px 20px;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    color: var(--text);
    display: flex;
    flex-direction: column;
}

@media(min-width: 1024px) {
    ul.building-select {
        flex-direction: row;
    }
    ul.building-select li {
        width: 460px;
    }
}

ul.building-select li a .full-address-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    padding-bottom: 4px;
}

.light-mode ul.building-select li a .full-address-box{
    border-bottom: 1px solid var(--royal-blue);
}

ul.building-select li a .full-address-box .building {
    font-size: 1.25rem;
    color: var(--user-gold);
    width: 100%;
    font-family: 'Source Serif', 'Poppins', sans-serif;
}

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

.underline {
    text-decoration: underline;
}

ul.building-select li a .unit-info {
    padding-top: 8px;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 36px;
}

@media(max-width: 768px) {
ul.building-select li a .unit-info .underline {
    max-width: 150px;
 }
}

.unit-ratio-box {
    display: flex;
    flex-direction: column;
}

.unit-ratio-box > span {
    display: block !important;
}

.unit-ratio-box .acc {
    color: var(--user-gold);
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
}

@media(min-width: 1024px) {
.unit-list-modal .modal-content{
    max-width: 900px !important;
    padding: 40px;
    }
}

.unit-list-modal .close {
    position: absolute;
    top: 10px;
    right: 16px;
    cursor: pointer;
    font-size: 2.25rem;
    line-height: 1;
    background: none;
    border: none;
}

.unitListBtn {
    position: absolute;
    bottom: 12px;
    right: 22px;
    border: none;
    color: var(--user-gold);
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}

.unit-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 160px;
}

.unit-items-wrapper .unit-item {
    border: 1px solid var(--text);
    border-radius: 8px;
    width: 100%;
    display: flex;
    gap: 4px;
    flex-direction: column;
    padding: 12px 16px 24px;
}

.light-mode .unit-items-wrapper .unit-item {
    border: 1px solid var(--text-border);
}

@media(min-width: 600px) {
    .unit-items-wrapper .unit-item {
        width: 48.8%;
    }
}

#unitModal .modal-content h3 {
    font-size: 1.75rem;
}

#unitModal .modal-content .total-area {
    margin-bottom: 32px;
}

#unitModal .modal-content .unit-count,
#unitModal .modal-content .total-area {
    font-size: 1.125rem;
}

.modal-content {
    scrollbar-color: var(--text) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 12px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background-color: var(--user-gold);
    border-radius: 6px;
}

.modal-content::-webkit-scrollbar-button {
    display: none;
}

.modal-content::-webkit-scrollbar-button:single-button {
    display: none;
    width: 0;
    height: 0;
}

ul.profile-building-list {
    padding-left: 20px;
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

ul.profile-building-list li .short-data {
    padding-left: 20px;
}

.why {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    position: relative;
}

.why::after {
    content: "Ne možete glasovati u ovoj anketi jer se radi o anketi za prikupljanje suglasnosti u kojoj mogu glasovati samo suvlasnici koji u sustavu imaju važeće fotografije osobne iskaznice radi potvrde identiteta, što znači da fotografije Vaše osobne iskaznice ne postoje u bazi ili im je istekao rok. Klikom na 'Moj profil' možete vidjeti koji od Vaših podataka su dostupni u sustavu. Ukoliko na stranici profila vidite fotografije Vaše (vežeće) osobne iskaznice ali ipak niste u mogućnosti glasovati, kontaktirajte predstavnika Vaše zgrade.";
    position: fixed;
    top: 20%;
    left: 5px;
    border-radius: 10px;
    background-color: var(--text);
    color: var(--background);
    display: none;
    width: 340px;
    padding: 8px 12px 20px 8px;
    font-weight: 400;
    line-height: 1.75;
}

@media(min-width: 1400px) {
   .why::after {
    position: absolute;
    top: 28px;
    left: -288px;
   } 
}

.why:hover::after {
    display: block;
}

.usr-msg {
    border: 1px solid var(--user-gold);
    border-radius: 20px;
    padding: 4px 16px;
    justify-self: anchor-center;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 40px;
    font-size: 1rem;
}

@media(min-width: 768px) {
    .usr-msg {
     margin-bottom: -10px; 
    }
}

.pdf-button {
    font-size: 1rem;
    border: 2px solid var(--rep-blue);
    color: var(--rep-blue);
    font-weight: 700;
    border-radius: 24px;
    background-color: transparent;
    font-family: 'Poppins', sans-serif;
    padding: 6px 16px;
    margin-left: auto;
}

.user-towns {
    width: 100%;
    border-top: 1px solid var(--text-border);
    margin: 120px 0 360px 0;
}

.user-towns ul li a {
    color: var(--user-gold);
    font-weight: 500;
    text-decoration: none;
}

.owners-summary {
    margin-bottom: 40px;
}

.owners-summary h2 {
    margin-bottom: 8px;
}

.owners-summary ul li p {
    display: inline;
}

@media(max-width: 1024px) {
    .owners-summary ul li p {
        display: inline-block;
        width: 100%;
        margin: 0;
    }
}

.owners-summary ul li p span {
    font-weight: 500;
    padding: 0 4px;
    border-radius: 4px;
    background-color: var(--background);
}

.owners-summary ul li span.name {
    color: var(--user-gold);
    font-size: 1.125rem;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    line-height: 1;
}

.assoc-users li {
    padding-bottom: 8px;
    transition: 0.2s all;
    border-radius: 8px;
}

.assoc-users li:nth-child(even) {
    background: var(--royal-blue);
}

.assoc-users li:hover {
    background-color: var(--opacity-blue);
}

.assoc-users li > div {
    padding: 8px 0 0 8px;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.owners-summary ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

ul.every-user {
    margin: 24px 0 40px;
    font-size: 0.875rem;
}

ul.every-user li {
    padding: 8px 16px;
    border-radius: 16px 16px 0 0;
}

@media(min-width: 768px) {
    .owners-summary ul,
    ul.every-user,
    .assoc-users,
    ul.contact-admins {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    ul.contact-admins  li{
        max-width: 80%;
    }
    ul.every-user {
        font-size: 1rem;
    }
    .assoc-users li:nth-child(even) {
    background: none;
    }
    .assoc-users li:nth-child(4n-3),
    .assoc-users li:nth-child(4n-2) {
        background: var(--royal-blue);
    }
    .assoc-users li {
        width: 90%;
    }
    .assoc-users li > div {
        width: 80%;
    }
    .owners-summary ul li span.name {
        width: auto;
        min-width: 200px;
    }
}

.assoc-users .edit-user,
.every-user .edit-user {
    border-radius: 20px;
    text-decoration: none;
    color: var(--user-gold);
    border: 1px solid var(--user-gold);
    padding: 4px 16px;
    line-height: 1.4;
    font-size: 0.875rem;
    transition: 0.2s all;
    display: flex;
    align-items: center;
    gap: 8px;
}

.assoc-users .edit-user span svg,
.every-user .edit-user span svg {
    height: 18px;
    width: 18px;
}

.assoc-users .edit-user span svg path,
.every-user .edit-user span svg path{
    fill: var(--user-gold);
    stroke: var(--user-gold);
}

.assoc-users .edit-user:hover,
.every-user .edit-user:hover {
    color: var(--background);
    background-color: var(--user-gold);
}

.assoc-users .edit-user:hover span svg path,
.every-user .edit-user:hover span svg path{
    fill: var(--background);
    stroke: var(--background);
}

.profile-edit-cta {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    gap: 12px;
}

.profile-edit-cta a.edit-user {
    color: var(--user-gold);
}

.town-select-list > div {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 8px;
    justify-content: space-between;
    max-width: 50%;
}

form select {
    font-size: 1rem;
    padding: 6px;
    border: none;
}

.units-list-wrap h1{
    font-size: 1.5rem;
}

.units-list-wrap h1 span{
    font-size: 2rem;
}

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

.icon a {
    display: inline-flex;
    position: relative;
}

.icon a::after {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    border-radius: 50%;
    height: 48px;
    width: 48px;
}

.icon svg{
    width: 16px;
    height: 16px;
}

.icon svg path{
    fill: var(--user-gold);
    transition: 0.2s all;
}

.icon:hover svg path {
     fill: var(--background);
}

a span svg,
button span svg {
    width: 24px;
    height: 24px;
}

a span svg path {
    fill: var(--text);
}

.rep-action-box a span svg {
    width: 34px;
}

.transparent {
    fill: transparent !important;
}

.rep-action-box span.text,
ul.nav-menu li a span.text {
    flex: 1;
    justify-content: center;
}

.rep-action-box span.active svg path{
    fill: var(--background);
}

.rep-action-box a:hover span.active svg path{
    stroke: var(--rep-blue) !important;
}

.master-admin-note {
    text-align: left;
    margin: 0;
    position: relative;
    padding-left: 60px;
    text-decoration: underline;
}

.master-admin-note::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 20px;
    height: 12px;
    width: 12px;
    background-color: var(--red);
    transform: rotate(45deg);
}

ul.all-buildings {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 36px;
    padding-left: 8px;
}

ul.all-buildings > li > span {
    text-decoration: underline;
    font-size: 1.125rem;
    font-weight: 500;
}

ul.all-buildings li::marker {
    color: var(--user-gold);
}

ul.all-buildings > li > a {
    margin-top: 16px;
    text-decoration: none;
    color: var(--text);
    transition: 0.2s all;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--text-border);
    display: inline-block;
    margin-bottom: 2px;
    line-height: 1.2;
    width: 100%;
}

ul.all-buildings li a:hover {
    color: var(--user-gold);
}

ul.all-buildings ol li {
    padding-bottom: 4px;
}

.public-notice-image img{
    max-width: 100%;
    padding: 20px 0;
}

@media(min-width: 1024px) {
      ul.all-buildings {
        flex-direction: row;
        gap: 44px;
    }
    ul.all-buildings > li {
       min-width: 340px;
    }
    .public-notice-image img{
        max-width: 59%;
        float: left;
        padding: 40px 20px 0 0;
    }
}

.admin-warning-box {
    padding: 80px 0 200px;
    border-top: 1px solid var(--red);
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.admin-warning-box h2 {
    margin-bottom: 8px;
}

.admin-warning-box p {
    text-align: left;
    padding-bottom: 20px;
    font-size: 1rem;
    max-width: 100%;
}

.admin-warning-box a {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    color: var(--red);
    border: 2px solid var(--red);
    border-radius: 20px;
    padding: 6px 16px;
    transition: 0.2s all;
    font-weight: bold;
    align-self: flex-end;
}

.admin-warning-box a:hover {
    background-color: var(--red);
    color: var(--background);
}

ul.every-user li.user-active {
    background-color: var(--royal-blue);
    position: relative;
    z-index: 10000000;
}

ul.every-user li.user-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 2%;
    height: 1px;
    width: 96%;
    background-color: var(--user-gold);
}

ul.every-user li.user-active .user-name-toggle strong {
    color: var(--user-gold);
}

.user-data-box {
    background-color: var(--royal-blue);
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-radius: 0px 0px 16px 16px;
    padding-top: 12px;
    padding-left: 12px;
}

.light-mode ul.every-user li.user-active,
.light-mode .user-data-box{
    background-color: var(--background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

.light-mode ul.every-user li.user-active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

.admin-actions {
    display: flex;
    justify-content: flex-end;
    padding: 20px 12px 12px 12px;
    gap: 20px;
    flex-wrap: wrap;   
}

@media(max-width:768px) {
.user-name-toggle {
    gap: 10px;
}
.admin-actions {
    flex-direction: column;
}
.admin-actions > * {
    height: 42px;
    }
}

.user-name-toggle {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-name-toggle strong {
    transition: 0.2s all;
}

.user-name-toggle:hover strong{
    color: var(--user-gold);
}

.badge-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge-box .role-badge {
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    position: relative;
}

.badge-box .role-badge .inner-text {
   position: absolute;
   top: -24px;
   left: -10px;
   display: none;
   background-color: var(--royal-blue);
   padding: 4px 8px;
   transform: rotate(-45deg);
   font-size: 0.75rem;
   border-radius: 8px;
   width: 160px;
}

@media(max-width: 600px) {
    .badge-box {
        gap: 6px;
    }
    .badge-box .role-badge .inner-text {
        top: 56px;
        left: -96px; 
    }
}

.light-mode .badge-box .role-badge .inner-text {
    background-color: var(--text);
    color: var(--background);
}

.badge-box .role-badge:hover,
.badge-box .role-badge:focus {
    z-index: 999999999999999999999; 
}

.badge-box .role-badge:hover .inner-text,
.badge-box .role-badge:focus .inner-text {
    display: inline;
}

.badge-box .role-badge.master-admin {
    background-color: var(--red);
}

.badge-box .role-badge.town-admin {
    border: 1.8px solid var(--red);
}

.badge-box .role-badge.building-rep {
    background-color: var(--rep-blue);
}

/* css za izbornik korisnika */

.autocomplete-container {
    position: relative;
}

.autocomplete-container input {
    width: 100%;
}

.autocomplete-results {
    position: absolute;
    background: var(--royal-blue);
    border-bottom: 1px solid var(--text-border);
    border-left: 1px solid var(--text-border);
    border-right: 1px solid var(--text-border);
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.autocomplete-item {
    padding: 8px;
    cursor: pointer;
}

.autocomplete-item:hover {
    background: var(--text-border);
}

.delete-me-box {
    width: 100%;
    margin-top: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.danger-zone {
    color: var(--red);
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.danger-zone .red-line {
    flex: 1;
    height: 1px;
    background-color: var(--red);
}

.send-offer-disc {
   top: -24px;
   right: -12px;
   position: absolute;
   height: 32px;
   width: 32px;
   border-radius: 50%;
   background-color: var(--text);
   color: var(--background);
   display: none;
}

@media(min-width: 1024px) {
   .send-offer-disc {
    display: grid;
    place-items: center;
   }
}

.send-offer-disc::after {
    position: absolute;
    top: -28px;
    right: 24px;
    display: none;
    padding: 4px 6px;
    width: 248px;
    text-align: left;
    border-radius: 8px;
    background-color: var(--text);
    color: var(--background);
    display: inline-block;
    font-size: 0.75rem;
}

.send-offer-disc:hover::after {
    content: "Omogućuje slanje ponude/računa upravitelju zgrade na plaćanje.";
}