.mieszkania-svg {

}


#logo:hover, #pietro1:hover, #pietro2:hover, #pietro3:hover, #pietro4:hover, #pietro5:hover, #pietro6:hover, #pietro7:hover, #pietro8:hover, #pietro9:hover, #pietro10:hover, #pietro11:hover, #pietro12:hover, #pietro13:hover, #pietro14:hover, #pietro15:hover  {
      fill-opacity:0.6 !important;
    }


:focus {
    outline: none !important;
}


/* Nadpisanie domyślnej ikonki Drupala */
.ajax-progress-throbber .throbber {
  /* Używamy nowoczesnego SVG jako tła */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cstyle%3E.s%7Btransform-origin:center;animation:r 1s linear infinite%7D@keyframes r%7Bto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z' fill='%23007bff' class='s'/%3E%3C/svg%3E") !important;
  
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  
  /* Rozmiar ikonki */
  width: 28px !important;
  height: 28px !important;
  
  /* Usuwamy domyślne animacje Drupala, jeśli jakieś są */
  animation: none !important; 
  display: inline-block;
  vertical-align: middle;
}

/* Opcjonalnie: poprawienie wyglądu tekstu obok */
.ajax-progress-throbber .message {
  margin-left: 8px;
  color: #555;
  font-weight: 500;
}


#pietro3:hover {
       background: rgba(0, 0, 255, 0.1); /* przezroczysty niebieski */
}




#pietro1, #pietro2, #pietro3, #pietro4, #logo {
  cursor: pointer;  /* Wskazówka ręki przy najechaniu */
}

#floor-1, #floor-2, #floor-3, #floor-4 {
  cursor: pointer;  /* Wskazówka ręki przy najechaniu */
}



#building-svg .floor {
  cursor: pointer;
}

#building-svg .floor:hover {
  fill: rgba(255, 165, 0, 0.5); /* Pomarańczowy efekt hover */
}




#popup {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 15000;  /* Ważne, aby popup był widoczny na wierzchu */
  display: none;  /* Domyślnie ukryty */
  width: 300px;  /* Minimalna szerokość popupu */
  height: 300px;  /* Minimalna wysokość popupu */
  overflow: hidden; /* Włączenie przewijania w przypadku, gdy zawartość jest większa */
}

#popup.show {
  display: block;  /* Dodaj klasę 'show', aby popup był widoczny */
  opacity: 1;
  transition: opacity 0.3s ease-in-out; /* Płynne pojawianie się */
}

.pietro-warstwa {
  fill: transparent;
  pointer-events: all; /* To pozwala na hover na przezroczystym */
  transition: fill 0.2s;
}
.pietro-warstwa:hover {
  fill: rgba(0, 62, 184, 0.8); /* Twój kolor hovera */
}


.startowakomorki {
  fill: transparent;
  pointer-events: all; /* To pozwala na hover na przezroczystym */
  transition: fill 0.2s;
}
.startowakomorki:hover {
  fill: rgba(0, 62, 184, 0.1); /* Twój kolor hovera */
}


.rzut-warstwa {
  fill: rgba(0, 62, 184, 0.4);
  pointer-events: all; /* To pozwala na hover na przezroczystym */
  transition: fill 0.2s;
}
.rzut-warstwa:hover {
  fill: rgba(0, 62, 184, 0.8); /* Twój kolor hovera */
}

a:focus, a:active {
    outline: none !important;
}

svg a {
    outline: none;
}


/* Celujemy w ścieżkę wewnątrz grupy o danej klasie */

/* wolne */
.rzut-warstwa.status-wolne path {
  fill: rgba(0, 62, 184, 0.4) !important; /* Niebieski */
}
.rzut-warstwa.status-wolne:hover path {
  fill: rgba(0, 62, 184, 0.7) !important; /* Niebieski */
}
/* koniec wolne */

/*zarezerwowane*/
.rzut-warstwa.status-zarezerwowane path {
  fill: rgba(241, 196, 15, 0.5) !important; /* zolty */
}
.rzut-warstwa.status-zarezerwowane:hover path {
  fill: rgba(241, 196, 15, 0.8) !important; /* zolty */
}
/*koniec zarezerwowane*/


/*sprzedane*/
.rzut-warstwa.status-sprzedane path {
  fill: rgba(192, 57, 43, 0.5) !important; /* czerwony */
}
.rzut-warstwa.status-sprzedane:hover path {
  fill: rgba(192, 57, 43, 0.8) !important; /* czerwony */
}
/*koniec sprzedane */


/* koniec podswietlan na rzutach */




/* Główne okienko dymka */
.tippy-box[data-theme~='nowoczesny'] {
  background-color: rgba(255, 255, 255, 0.95); /* Prawie białe tło */
  backdrop-filter: blur(10px); /* Efekt rozmycia tła pod dymkiem */
  color: #333;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 8px;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Zawartość dymka */
.tippy-content {
  line-height: 1.5;
}

/* Nagłówek w dymku (Mieszkanie X) */
.tippy-content strong {
  display: block;
  font-size: 1.1rem;
  color: #007bff; /* Kolor Twojej marki */
  margin-bottom: 4px;
}

/* Styl statusu (np. Wolne/Zarezerwowane) */
.tippy-content .status-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}


/* Kolory statusów w dymku 
.status-wolne { background-color: #d4edda; color: #155724; }
.status-sprzedane { background-color: #f8d7da; color: #721c24; }
.status-zarezerwowane { background-color: #fff3cd; color: #856404; }
*/


/* Strzałka dymka */
.tippy-box[data-theme~='nowoczesny'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: rgba(255, 255, 255, 0.95);
}

/* Styl dla dymka Tippy */
.tippy-box[data-theme~='nowoczesny'] .tippy-content {
    white-space: pre-line; /* To sprawi, że znaki nowej linii będą respektowane */
    text-align: center;
}


/* W pliku style.css Twojego motywu */
.modal-rzut-pietra {
  max-width: 90vw; /* Szerokość okna na 90% ekranu */
}

.modal-rzut-pietra .ui-dialog-titlebar {
  background-color: #f3f3f3;
  border-bottom: 1px solid #ddd;
}



/* Wyśrodkowanie i szerokość okna AJAX (jQuery UI Dialog) dla otwieranych widokuw pieter */
.ui-dialog {
    width: 80% !important;   /* Szerokość okna */
    max-width: 60% !important; /* Zabezpieczenie przed rozciąganiem */
/*    left: 0% !important;     /* Margines lewy: (100% - 90%) / 2 */
    top: 48% !important;     /* Środek wysokości ekranu */
    transform: translateY(-50%); /* Precyzyjne wyśrodkowanie w pionie */
    position: fixed !important;  /* Okno podąża za skrolowaniem */
    margin: 0 auto;
}

/* Opcjonalnie: Dostosowanie szerokości samej zawartości */
.ui-dialog .ui-dialog-content {
    width: auto !important;
}

/* Zmiana tła i usunięcie obramowania nagłówka */
.ui-dialog .ui-dialog-titlebar {
    background: #000 !important; /* Czarny pasek */
    color: #fff !important;       /* Biały napis */
    border: none !important;
    border-radius: 0 !important;
}


/* Ukrycie tekstu tytułu "rzuty pieter" */
.ui-dialog .ui-dialog-title {
    display: none !important;
}

/* Zmiana nagłówka w cienki pasek */
.ui-dialog .ui-dialog-titlebar {
    background: #fff !important; /* Jasny kolor paska */
    border: none !important;
    border-bottom: 0px solid #ccc !important; /* Cienka linia na dole */
    padding: 0.2rem 1rem !important; /* Zmniejszenie wysokości */
    min-height: 20px !important;
    border-radius: 0 !important;
}

/* Pozycjonowanie przycisku X, aby pasował do cienkiego paska */
.ui-dialog .ui-dialog-titlebar-close {
    top: 50% !important;
    margin-top: -10px !important; /* Wyśrodkowanie pionowe ikony */
    right: 10px !important;
    border: none !important;
    background: transparent !important;
}


/* Kontener nadrzędny widoku - musi być relatywny, by przyciski wiedziały gdzie jest krawędź */
.view-rzutypieter {
  position: relative;
}

/* Nawigacja wewnątrz rzutu */
.floor-navigation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute; /* Wyjmuje przyciski z normalnego układu */
  right: 15px;       /* Odstęp od prawej krawędzi SVG */
  top: 15px;         /* Odstęp od górnej krawędzi SVG */
  z-index: 100;      /* Gwarantuje, że przyciski są na wierzchu */
}

/* Proste, nowoczesne przyciski */
.floor-navigation a.use-ajax {
  background: #ffffff;
  color: #333333;
  padding: 0px 0px;
  border-radius: 5px;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #cccccc;
  transition: all 0.2s ease;
  min-width: 80px;
  text-align: center;
}

/* Efekt najechania */
.floor-navigation a.use-ajax:hover {
  background: #f0f0f0;
  border-color: #999999;
  transform: translateX(0px); /* Delikatne wysunięcie w lewo */
}

.views-field-field-pietro {
    display: flex; 
    font-size: 1.1rem;    
    color: var(--color-text-neutral-loud);
    font-family: var(--font-sans);
    font-weight: bold;
}

.views-label-field-pietro {
    padding-right: 10px;
    font-weight:400;
}


/*zawartosc*/

.srodek {
    display:flex;
}

.kolumna1 {
     width:60%;
}


.kolumna2 {
     width:40%;
     display: block;
     padding-top:50px;
}

.wiersz1 {
     display: inline-flex;
}

.wiersz2 {
     display: inline-flex;
}

/*koniec zawartosc */



/* wyszukiwarka */

.views-exposed-form {
      background-color: #354664;
      height: 120px;
}

#edit-field-powierzchnia-value-min {
      display: none;
}

#edit-field-powierzchnia-value-max {
      display: none;
}


.js-form-wrapper .form-wrapper {
margin-left: 30px;
    margin-right: 30px;
      width: 300px;
     
}

.form-item-field-powierzchnia-value-min {
      display: none;
}

.form-item-field-powierzchnia-value-max {
      display: none;
}


.fieldset__legend .fieldset__legend--visible {
      display: none;

}

.fieldset__label {
    display: block;
    font-size: 15px;
    font-weight: 300;
    background-color: #354664;
}


.fieldset__wrapper {
    margin-block-start: 0;
    padding-block: 0px;
    padding-inline: 0px;
}


#edit-field-powierzchnia-value-wrapper {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 8px;
}


.ui-accordion .ui-accordion-header .field-content {
    display: flex;
}


.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 2px 0 0 0;
    padding: 1em 1em 1em 2em;
    font-size: 100%;
}



.wiersz {
    display: inline-grid;
    width: 100%;
    /* text-align: center; */
    font-weight: 300;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size:15px;
}

.mniejsza {
   font-size:12px;
}

.view-filters {
    margin: 0 auto;
    display:flex;
    justify-content:center;
}


.views-exposed-form {
    background-color: #354664;
    height: 140px;
/*    width: 80%; */
    justify-content: center;
    margin: 0 auto;
}




.form-item__label[for] {
    cursor: pointer;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 100;
}

.form-item__label[for="edit-field-pietro-value"] {
    cursor: pointer;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 100;
}

.form-item__label[for="edit-field-pokoje-value"] {
    cursor: pointer;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 100;
}

.form-item__label[for="edit-field-status-value"] {
    cursor: pointer;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 100;
}

.form-item__label[for="edit-sort-by"] {
    cursor: pointer;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 100;
}

.form-item__label[for="edit-sort-order"] {
    cursor: pointer;
    font-weight: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-size: 100;
}


.noUi-connect {
    background: #b3b3b3;
}

.noUi-horizontal {
    height: 10px;
}

.noUi-target {
    background: #FAFAFA;
    border-radius: 0px;
    border: 1px solid #D3D3D3;
    box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}

.noUi-tooltip {
    display: block;
    position: absolute;
    border: 0px solid #D9D9D9;
    border-radius: 0px;
    background: #fff;
    color: #000;
    padding: 0px;
    text-align: center;
    white-space: nowrap;
}

.noUi-horizontal .noUi-handle {
    top: -9px;
}

.fieldset__label {
    position: relative;
    top: -15px;
    left: -35px;
}


.noUi-horizontal .noUi-tooltip {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 0%;
}


.noUi-handle:after, .noUi-handle:before {
    height: 0px; 
}


.button {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-block: var(--sp1);
    margin-inline-start: 0px;
    margin-inline-end: var(--sp1);
    padding-block: 1px 0px;
    padding-inline: var(--sp1-5);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border: 0px solid currentcolor;
    border-radius: 0px;
    background-color: #e4b14e;
    font-family: var(--font-sans);
    font-size: var(--font-size-l);
    font-weight: 300;
    line-height: var(--line-height-s);
    appearance: none;
    -webkit-font-smoothing: antialiased;
}


.form--inline {
    & .form-actions {
        margin-top: 44px;
    }
}

.button {
    &:hover, &:focus {
        text-decoration: none;
        color: #fff !important;
        border: 0px solid currentcolor;
        background: none;
        font-weight: 300;
        background-color: #e09503;
    }
}



.button1 {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-block:0px;
    margin-inline-start: 0px;
    margin-inline-end: var(--sp1);
    padding-block: 1px 0px;
    padding-inline: var(--sp1-5);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border: 0px solid currentcolor;
    border-radius: 0px;
    background-color: #e4b14e;
    font-family: var(--font-sans);
    font-size: var(--font-size-l);
    font-weight: 300;
    line-height: var(--line-height-s);
    appearance: none;
    -webkit-font-smoothing: antialiased;
}


.form--inline {
    & .form-actions {
        margin-top: 47px;
	margin-left:10px;
    }
}

.button1 {
    &:hover, &:focus {
        text-decoration: none;
        color: #fff !important;
        border: 0px solid currentcolor;
        background: none;
        font-weight: 300;
        background-color: #e09503;
    }
}

.button2 {
    width:280px;
    display: inline-block;
    height: 50px;
    align-items: center;
    align-content: center;
    margin-block:0px;
    margin-inline-start: 0px;
    margin-inline-end: var(--sp1);
    padding-block: 1px 0px;
    padding-inline: var(--sp1-5);
    cursor: pointer;
    color: #fff;
    border: 0px solid currentcolor;
    border-radius: 0px;
    background-color: #e4b14e;
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: var(--line-height-s);
    appearance: none;
    -webkit-font-smoothing: antialiased;

}


.button2 {
    &:hover, &:focus {
        text-decoration: none;
        color: #fff !important;
        border: 0px solid currentcolor;
        background: none;
        font-weight: 300;
        background-color: #e09503;
    }
}


.button3 {
    width:280px;
    display: inline-block;
    align-items: center;
    align-content: center;
    margin-block:0px;
    margin-inline-start: 0px;
    margin-inline-end: var(--sp1);
    padding-block: 1px 0px;
    padding-inline: var(--sp1-5);
    cursor: pointer;
    color: #fff;
    border: 0px solid currentcolor;
    border-radius: 0px;
    background-color: #354664;
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: var(--line-height-s);
    appearance: none;
    -webkit-font-smoothing: antialiased;

}



.button3 {
    &:hover, &:focus {
        text-decoration: none;
        color: #fff !important;
        border: 0px solid currentcolor;
        background: none;
        font-weight: 300;
        background-color: #e09503;
    }
}


.wiersz3, .wiersz4, .wiersz5  {
   text-align:center;
   padding-top:20px;
}


.view-lista-mieszkan > .view-content {

    width: 100%;
    margin: 0 auto;
    padding-top: 0px;

}

.view-header > .view-content {
   width:80%;
   margin: 0 auto;
   
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border-bottom: 1px solid #c5c5c5 !important;
    border:0px;
    background: #fff;
    font-weight: normal /*{fwDefault}*/;
    color: #454545 /*{fcDefault}*/;
    /* padding-bottom: 10px !important; */
    margin-bottom: 10px !important;
}




.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: 0px;;
    background: #fff;
    font-weight: normal /*{fwDefault}*/;
    color: #2b2b2b /*{fcHover}*/;
    border-bottom: 1px solid #c5c5c5 !important;
}

.naglowek {
    position: relative;
    top: 190px;
    display: flex;
    width: 80%;
    margin: 0 auto;
    justify-content: center;
    border-bottom: 2px solid #354664 !important;
    padding: 1em 1em 0em 2em;
 }

.nag1 {
    width: 12.5%;
    text-align: center;
    font-weight: 600;
    padding-bottom: 10px;
    color: #354664;
}

.pager {
    justify-content: center;
    display: flex;
}

/* koniec wyszukiwarka */


/* To sprawi, że każde mieszkanie będzie miało kursor łapki, nawet bez atrybutu style */
.rzut-warstwa, .pietro-warstwa {
    cursor: pointer !important;
}

/* Wymuszamy kursor na elementach wewnątrz grupy (ścieżkach) */
.rzut-warstwa path, .pietro-warstwa path {
    cursor: pointer !important;
    pointer-events: all !important;
}



/* Wymuszenie reakcji na myszkę */
.rzut-warstwa, .pietro-warstwa, 
.rzut-warstwa path, .pietro-warstwa path {
    pointer-events: all !important;
    cursor: pointer !important;
}

/* Efekt podświetlenia po najechaniu */
.rzut-warstwa:hover path, 
.pietro-warstwa:hover path {
    fill-opacity: 0.7 !important;
    filter: brightness(1.3);
    transition: 0.2s;
}


/* Ukrywa tekst, który "wyleciał" pod spód obrazka */
.field--name-body, .widok-mieszkan {
    color: transparent;
}

/* Przywraca widoczność dla dymka i elementów SVG */
.field--name-body svg, #custom-tooltip {
    color: #fff;
}


#custom-tooltip {
    display: none;
    position: fixed;
    /* Nowy wygląd: Białe tło i ciemny tekst */
    background: #ffffff !important; 
    color: #333333 !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    border: 1px solid #dddddd !important;
    font-size: 15px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    z-index: 1000000 !important;
    pointer-events: none;
    line-height: 1.5;
    min-width: 200px;
}

/* UKRYCIE TEGO NAPISU POD OBRAZKIEM */
.field--name-body, .widok-mieszkan {
    color: transparent !important;
    font-size: 0 !important;
}
.field--name-body svg, #custom-tooltip {
    color: initial !important; /* Przywraca kolor dymkowi i grafice */
}




/* edycja danych */

table.edycjadanych {
 margin: 0 auto;
 width:50%;
}

tr.edycjadanych > td {
 padding:5px;
}









/* stopka */


/* Styl paska z logo na górze */
.v-dev-top-bar {
    border-bottom: 1px solid #222222 !important; /* Cienka linia ze zdjęcia */
    padding-bottom: 20px !important;
    margin-bottom: 40px !important;
}

.v-dev-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.v-dev-logo-img {
    height: 100px !important; /* Dopasuj do swojego logo */
    width: auto !important;
}

.v-dev-logo-text {
    color: #ffffff !important;
    font-size: 24px !important;
    letter-spacing: 1px !important;
    font-family: 'Arial Narrow', sans-serif !important;
}

/* Poprawka dla kontenera głównego */
.v-dev-footer {
    background-color: #000000 !important;
    padding: 40px 0 !important;
}




.v-dev-footer {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 60px 20px 20px 20px !important;

    width: 100% !important;
    box-sizing: border-box !important;
}

.v-dev-container {
    max-width: 70% !important;
    margin: 0 auto !important;
}

.v-dev-row {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
}

.v-dev-col {
    flex: 1 !important;
    min-width: 250px !important;
}

.v-dev-contact-card {
    background-color: #0a0a0a !important;
    padding: 35px !important;
    border: 0px solid #1a1a1a !important;
}

.v-dev-title {
    color: #ffffff !important;
    font-size: 20px !important;
    margin-bottom: 25px !important;
    font-weight: bold !important;
    text-transform: none !important;
}

.v-dev-text { color: #cccccc !important; margin-bottom: 10px !important; 
  top:-20px;
  position: relative;

}

.v-dev-highlight {
    font-weight: bold !important;
    color: #ffffff !important;
    margin: 5px 0 !important;
}

.v-dev-socials { display: flex !important; gap: 10px !important; margin-top: 20px !important; }

.v-dev-icon {
    background-color: #d4a04c !important; /* Złoty kolor */
    color: #000000 !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
}

.v-dev-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.v-dev-menu li { margin-bottom: 15px !important; }

.v-dev-menu a {
    color: #999999 !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}

.v-dev-menu a:hover, .v-dev-menu a.v-dev-active {
    color: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}

.v-dev-bottom {
    margin-top: 50px !important;
    padding-top: 20px !important;
    border-top: 1px solid #222222 !important;
    text-align: center !important;
    color: #555555 !important;
    font-size: 13px !important;
}







/* Wygląd podpisu w oknie Colorbox */
#cboxTitle {
    background-color: #000000 !important; /* Czarne tło jak w stopce */
    color: #ffffff !important;
    padding-left: 15px !important;
    padding-top: 2px !important;


    font-size: 18px !important;
    font-weight: bold !important;
    border-top: 2px solid #d4a04c !important; /* Złoty pasek jak przy ikonach */
/*    border-bottom: 2px solid #d4a04c !important; /* Złoty pasek jak przy ikonach */
/*    border-left: 2px solid #d4a04c !important; /* Złoty pasek jak przy ikonach */
/*    border-right: 2px solid #d4a04c !important; /* Złoty pasek jak przy ikonach */



    width: 100% !important;
    box-sizing: border-box !important;
    position:fixed;
    top:1px;
    
}

/* Jeśli chcesz, aby tytuł był nad obrazkiem */
#colorbox {
    overflow: visible !important;
}


.box1 {
    font-size:18px;
    font-weight:100;
    
}

.box2 {
    font-size:14px;
    font-weight:100;
    
}

#cboxCurrent {
 display: none !important;
}

.cboxPhoto {
 padding-top:15px;
}


.wiersz1, .wiersz2 {
    display: flex;
    width: 100%;
    font-weight: 300;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
}

/* koniec podpisu */

.budynekkomorki {
 display:none;
}



.komorki {
   display:none;
   padding-top:10px;
}

.stacjonarne {
    display: flex;
    width: 100%;
}





/* zakładki */

/* 1. Kontener listy zakładek */
ul.quicktabs-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    
    /* Kluczowe wyrównanie do filtrów */
    width: 90%;           /* Musi być identyczna jak w .views-exposed-form */
    margin: 0 auto;       /* Centrowanie kontenera */
    border: none;
    
    /* Przesunięcie w dół o 1px, aby zakryć krawędź panelu i uniknąć szpary */
    position: relative;
    bottom: -2px;
    left:-2px;
    z-index: 10;
}

/* 2. Styl pojedynczej zakładki */
ul.quicktabs-tabs li {
    margin-right: 2px;    /* Minimalny odstęp między przyciskami */
}

ul.quicktabs-tabs li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    background-color: #bdc3c7; /* Kolor nieaktywnej zakładki */
    color: #444;
    border-radius: 8px 8px 0 0;
    border: none;
    transition: all 0.2s ease;
}

/* 3. AKTYWNA zakładka - dopasowanie do koloru panelu #354664 */
ul.quicktabs-tabs li.active a {
    background-color: #354664 !important; /* Kolor Twojego panelu filtrów */
    color: #ffffff !important;
}

/* 4. Usunięcie marginesów z formularza filtrów, aby przylegał do góry */
.views-exposed-form {
    margin-top: 0 !important;
    border-top-left-radius: 0; /* Opcjonalnie: prosty róg w miejscu styku */
    width:100%;
}



/* Kontener nadrzędny */
.view-header {
    display: flex !important;
    flex-direction: column !important;
}

/* 1. Filtry na samą górę */
.view-filters {
    order: 1 !important;
    width:90%;
}

/* 2. Biały nagłówek pod filtrami */
.naglowek {
    order: 2 !important;
    position: static !important; /* Usuwa to problematyczne top: 190px */
    margin: 0 auto !important;
    width: 80% !important; /* Dopasowanie szerokości do filtrów */
}

/* 3. Wyniki wyszukiwania i pager na sam dół */
.view-content, 
.view-footer, 
.pager {
    order: 3 !important;
}


/* Garaże (indeks 0) wędrują na drugą pozycję */
ul.quicktabs-tabs li.miejsca-garażowe {
    order: 2;
}

/* Mieszkania (indeks 1) wędrują na pierwszą pozycję */
ul.quicktabs-tabs li.mieszkania {
    order: 1;
}

.garaze > .view-content {
 width:80%;
 margin: 0 auto;
 text-align: center;
}

.garaze .views-table {
 font-family: Arial, Helvetica, sans-serif;
 font-size:15px;
}

.garaze th {
   text-align: center !important;
   font-family: Arial, Helvetica, sans-serif !important;
   font-size: 1em !important;
   color:#354664 !important;
}



/* koniec zakladki */

.wiersz a {
 color:#454545 !important;
 text-decoration: none !important;

}

.wiersz a:hover {
 text-decoration: underline !important;
 color:fff !important;
}



/* na komorki */

@media (max-width: 480px) {


/* Wymuszenie szerokości dla okna dialogowego Drupala */
.ui-dialog.ui-widget-content {
    width: 90% !important; /* Na mobile zajmie prawie całą szerokość */
    max-width: 800px !important; /* Na komputerze nie przekroczy 600px */
    left: 40% !important;
    transform: translateX(-40%); /* Wyśrodkowanie */
}

/* Poprawka dla samej treści wewnątrz */
#drupal-modal {
    width: auto !important;
    min-height: auto !important;
}





ul.quicktabs-tabs {
    width: 99%;
}

.view-filters {
    order: 1 !important;
    width: 99%;
}

.garaze > .view-content {
    width: 99%;
    margin: 0 auto;
    text-align: center;
}



.budynekkomorki {
 display:block;
}

.budynekstacjonarne {
 display:none;
}

.garaze .views-field-nothing  {
 display: none;
}

.komorki {
   display:block;
}

.stacjonarne {
    display: none;
}

.views-exposed-form {
    background-color: #354664;
    height: auto; 
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: block;
}

.views-exposed-form {
    background-color: #354664;
    height: auto; 
    padding:20px;	
    text-align:center;
}

.naglowek{
    display:none;
}

.form-item-sort-order {
    display:none;
}

.form-item-sort-by {
    display:none;
}

.mobile-buttons {
    display:none;
}


.js-form-wrapper .form-wrapper {
    width: 200px; 
}


.views-exposed-form {
    padding: 0px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.main-content__container {
    padding-block-start: 0px;
    padding:0px;
}

.fieldset__label {
    position: relative;
    top: 0px;
    left: 0px;
}

.v-dev-footer {
    padding: 0px !important;
}


.v-dev-contact-card {
    padding: 0px !important;
}

.v-dev-top-bar {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.view-header > .view-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}

.ui-accordion .ui-accordion-header .field-content {
    display: inline-block !important;
}

.ui-accordion .ui-accordion-header {
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 20px !important;
    text-align: center;
}

.srodek {
    display: block;
}

.kolumna1 {
    width: 100%;
}

.kolumna2 {
    width: 100%;
    display: block;
    padding-top: 20px;
}

.button2, .button3
 {
    margin-right: 0px;
}

.button1{
  margin-top:10px !important;
  height: 30px !important;
}

.gruby {
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

}







@media (min-width: 480px) and (max-width: 768px) {

.budynekkomorki {
 display:block;
}

.budynekstacjonarne {
 display:none;
}



.komorki {
   display:block;
}

.stacjonarne {
    display: none;
}

.garaze .views-field-nothing  {
 display: none;
}



.views-exposed-form {
    background-color: #354664;
    height: auto; 
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: block;
}

.views-exposed-form {
    background-color: #354664;
    height: auto; 
    padding:20px;	
    text-align:center;
}

.naglowek{
    display:none;
}

.form-item-sort-order {
    display:none;
}

.form-item-sort-by {
    display:none;
}

.mobile-buttons {
    display:none;
}


.js-form-wrapper .form-wrapper {
    width: 200px; 
}


.views-exposed-form {
    padding: 0px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.main-content__container {
    padding-block-start: 0px;
    padding:0px;
}

.fieldset__label {
    position: relative;
    top: 0px;
    left: 0px;
}

.v-dev-footer {
    padding: 0px !important;
}


.v-dev-contact-card {
    padding: 0px !important;
}

.v-dev-top-bar {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.view-header > .view-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}

.ui-accordion .ui-accordion-header .field-content {
    display: inline-block !important;
}

.ui-accordion .ui-accordion-header {
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 20px !important;
    text-align: center;
}

.srodek {
    display: block;
}

.kolumna1 {
    width: 100%;
}

.kolumna2 {
    width: 100%;
    display: block;
    padding-top: 20px;
}

.button2, .button3
 {
    margin-right: 0px;
}

.button1{
  margin-top:10px !important;
  height: 30px !important;
}

.gruby {
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

}

@media (min-width: 768px) and (max-width: 991px){


.budynekkomorki {
 display:block;
}

.budynekstacjonarne {
 display:none;
}



.komorki {
   display:block;
}

.stacjonarne {
    display: none;
}

.garaze .views-field-nothing  {
 display: none;
}



.views-exposed-form {
    background-color: #354664;
    height: auto; 
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: block;
}

.views-exposed-form {
    background-color: #354664;
    height: auto; 
    padding:20px;	
    text-align:center;
}

.naglowek{
    display:none;
}

.form-item-sort-order {
    display:none;
}

.form-item-sort-by {
    display:none;
}

.mobile-buttons {
    display:none;
}


.js-form-wrapper .form-wrapper {
    width: 200px; 
}


.views-exposed-form {
    padding: 0px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.main-content__container {
    padding-block-start: 0px;
    padding:0px;
}

.fieldset__label {
    position: relative;
    top: 0px;
    left: 0px;
}

.v-dev-footer {
    padding: 0px !important;
}


.v-dev-contact-card {
    padding: 0px !important;
}

.v-dev-top-bar {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.view-header > .view-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}

.ui-accordion .ui-accordion-header .field-content {
    display: inline-block !important;
}

.ui-accordion .ui-accordion-header {
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 20px !important;
    text-align: center;
}

.srodek {
    display: block;
}

.kolumna1 {
    width: 100%;
}

.kolumna2 {
    width: 100%;
    display: block;
    padding-top: 20px;
}

.button2, .button3
 {
    margin-right: 0px;
}

.button1{
  margin-top:10px !important;
  height: 30px !important;
}

.gruby {
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

}

@media (min-width: 992px) and (max-width: 1200px) {

/*
.budynekkomorki {
 display:block;
}

.budynekstacjonarne {
 display:none;
}

*/

.komorki {
   display:block;
}

.stacjonarne {
    display: none;
}

.garaze .views-field-nothing  {
 display: none;
}


.views-exposed-form {
    background-color: #354664;
    height: auto; 
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: block;
}

.views-exposed-form {
    background-color: #354664;
    height: auto; 
    padding:20px;	
    text-align:center;
}

.naglowek{
    display:none;
}

.form-item-sort-order {
    display:none;
}

.form-item-sort-by {
    display:none;
}

.mobile-buttons {
    display:none;
}


.js-form-wrapper .form-wrapper {
    width: 200px; 
}


.views-exposed-form {
    padding: 0px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.main-content__container {
    padding-block-start: 0px;
    padding:0px;
}

.fieldset__label {
    position: relative;
    top: 0px;
    left: 0px;
}

.v-dev-footer {
    padding: 0px !important;
}


.v-dev-contact-card {
    padding: 0px !important;
}

.v-dev-top-bar {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.view-header > .view-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}

.ui-accordion .ui-accordion-header .field-content {
    display: inline-block !important;
}

.ui-accordion .ui-accordion-header {
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 20px !important;
    text-align: center;
}

.srodek {
    display: block;
}

.kolumna1 {
    width: 100%;
}

.kolumna2 {
    width: 100%;
    display: block;
    padding-top: 20px;
}

.button2, .button3
 {
    margin-right: 0px;
}

.button1{
  margin-top:10px !important;
  height: 30px !important;
}

.gruby {
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

}

@media (min-width: 1200px) and (max-width: 1520px) {


.views-exposed-form {
    background-color: #354664;
    height: auto; 
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: block;
}

.views-exposed-form {
    background-color: #354664;
    height: auto; 
    padding:20px;	
    text-align:center;
}



.garaze .views-field-nothing  {
 display: none;
}

.naglowek {
    order: 2 !important;
    position: static !important; /* Usuwa to problematyczne top: 190px */
    margin: 0 auto !important;
    width: 90% !important; /* Dopasowanie szerokości do filtrów */
}


.form-item-sort-order {
    display:none;
}

.form-item-sort-by {
    display:none;
}

.mobile-buttons {
    display:none;
}


.js-form-wrapper .form-wrapper {
    width: 200px; 
}


.views-exposed-form {
    padding: 0px;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.main-content__container {
    padding-block-start: 0px;
    padding:0px;
}

.fieldset__label {
    position: relative;
    top: 0px;
    left: 0px;
}

.v-dev-footer {
    padding: 0px !important;
}


.v-dev-contact-card {
    padding: 0px !important;
}

.v-dev-top-bar {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.view-header > .view-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
}

.ui-accordion .ui-accordion-header .field-content {
    display: inline-block !important;
    width:90%;
}

.ui-accordion .ui-accordion-header {
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 20px !important;
    text-align: center;
}

.srodek {
    display: flex;
}

.kolumna1 {
    width: 50%;
}

.kolumna2 {
    width: 50%;
    display: block;
    padding-top: 20px;
}

.button2, .button3
 {
    margin-right: 0px;
}

.button1{
  margin-top:10px !important;
  height: 30px !important;
}

.gruby {
    font-weight: 600;
    padding-left: 5px;
    padding-right: 5px;
}

.ui-dialog {
 width:90% !important;
 max-width: 80% !important;
}

}


@media (min-width: 1520px) and (max-width: 1920px) {

.js-form-wrapper .form-wrapper {
    margin-left: 30px;
    margin-right: 30px;
    width: 120px;
}


.naglowek {
    order: 2 !important;
    position: static !important;
    margin: 0 auto !important;
    width: 95% !important;
}

.view-header > .view-content {
    width: 95%;
    margin: 0 auto;
}


}

@media (min-width: 1920px) {

.js-form-wrapper .form-wrapper {
    margin-left: 30px;
    margin-right: 30px;
    width: 300px;
}

}

/* koniec na komorki */





.footer-pdf-container {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px; /* Zgodnie z prośbą 30px marginesu */
  padding-bottom: 20px;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.pdf-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 230px;        /* Szerokość zwiększona o ok. 20% (z 190px) */
  height: 55px;        /* Lekko wyższe dla lepszych proporcji przy większym foncie */
  padding: 0 18px;
  border-radius: 4px;   
  text-decoration: none !important; /* Blokada podkreślenia */
  outline: none;
}

/* Resetowanie kolorów, aby Drupal nie wymuszał niebieskiego */
.gold, .gold:visited, .gold:hover, .gold:active {
  background-color: #d4a74c;
  color: #1a1a1a !important;
}

.black, .black:visited, .black:hover, .black:active {
  background-color: #000;
  color: #fff !important;
}

/* Usunięcie efektu pogrubienia na hover */
.pdf-box:hover .pdf-label {
  font-weight: 600; /* Stała waga, bez zmian przy najechaniu */
}


.pdf-icon {
  flex-shrink: 0;
  width: 32px;  /* Twoja powiększona skala */
  height: 32px;
  /* Twoja wybrana ikona zakodowana do CSS */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1251.654 0c44.499 0 88.207 18.07 119.718 49.581l329.223 329.224c31.963 31.962 49.581 74.54 49.581 119.717V1920H169V0Zm-66.183 112.941H281.94V1807.06h1355.294V564.706H1185.47V112.94Zm112.94 23.379v315.445h315.445L1298.412 136.32Z'%3E%3C/path%3E%3Cpath d='M900.497 677.67c26.767 0 50.372 12.65 67.991 37.835 41.901 59.068 38.965 121.976 23.492 206.682-5.308 29.14.113 58.617 16.263 83.125 22.814 34.786 55.68 82.673 87.981 123.219 23.718 29.93 60.198 45.854 97.13 40.885 23.718-3.276 52.292-5.986 81.656-5.986 131.012 0 121.186 46.757 133.045 89.675 6.55 25.976 3.275 48.678-10.165 65.506-16.715 22.701-51.162 34.447-101.534 34.447-55.793 0-74.202-9.487-122.767-24.96-27.445-8.81-55.906-10.617-83.69-3.275-55.453 14.456-146.936 36.48-223.284 46.983-40.772 5.647-77.816 26.654-102.438 60.875-55.454 76.8-106.842 148.518-188.273 148.518-21.007 0-40.32-7.567-56.244-22.701-23.492-23.492-33.544-49.581-28.574-79.85 13.778-92.95 128.075-144.79 196.066-182.625 16.037-8.923 28.687-22.589 36.592-39.53l107.86-233.223c7.68-16.377 10.051-34.56 7.228-52.518-12.537-79.059-31.06-211.99 18.748-272.075 10.955-13.44 26.09-21.007 42.917-21.007Zm20.556 339.953c-43.257 126.607-119.718 264.282-129.996 280.32 92.273-43.37 275.916-65.28 275.916-65.28-92.386-88.998-145.92-215.04-145.92-215.04Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 15px;
}

/* Filtr dla białej ikony (na czarnym przycisku) */
.icon-white {
  filter: invert(1) brightness(200%);
}






.pdf-label {
  font-size: 17px;    /* Czcionka większa o kolejne 30% (z 13px) */
  font-weight: 600;   /* Standardowa wyraźna waga */
  line-height: 1.2;
  text-decoration: none !important;
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
  .footer-pdf-container {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}




/* Styl dla napisu o godzinach otwarcia */
.biuro {
  font-size: 12px;         /* Mniejsza czcionka */
  color: #ffffff;         /* Biały kolor tekstu */
  opacity: 0.85;          /* Lekka przezroczystość dla elegancji */
  margin-bottom: 5px;     /* Odstęp od numerów */
  line-height: 1.2;
}

/* Styl dla kontenera numeru */
.tel {
  margin: 2px 0;          /* Mały odstęp między numerami */
}

/* Kluczowy styl dla aktywnych linków telefonicznych */
.tel a {
  color: #ffffff !important; /* Wymuszenie białego koloru */
  text-decoration: none !important; /* Usunięcie podkreślenia */
  font-size: 16px;           /* Większy rozmiar dla numerów */
  font-weight: bold;         /* Pogrubienie */
  display: block;            /* Większy obszar klikalności */
  transition: opacity 0.2s;
}

/* Opcjonalnie: efekt po najechaniu */
.tel a:hover {
  opacity: 0.7;
}





/* stopka pocztek



/* Kontener i typografia */
.v-dev-contact-card {
    font-family: sans-serif; /* Możesz zmienić na konkretną czcionkę projektu */
}

/* Styl dla linków tekstowych (telefon, email) */
.v-dev-highlight a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease; /* Płynne podświetlenie */
    display: inline-block;
}

/* EFEKT PODŚWIETLENIA: Tekst zmienia się na złoty po najechaniu */
.v-dev-highlight a:hover {
    color: #c9a063; 
}

/* Styl dla ikon społecznościowych */
.v-dev-socials {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.v-dev-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #c9a063; /* Złoty kolor tła z obrazka */
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease; /* Płynne przejście koloru i transformacji */
}

/* EFEKT PODŚWIETLENIA: Ikona rozjaśnia się i lekko unosi */
.v-dev-icon:hover {
    background-color: #e2c08a; /* Jaśniejszy złoty */
    transform: translateY(-3px); /* Delikatne uniesienie do góry */
    box-shadow: 0 4px 15px rgba(201, 160, 99, 0.4); /* Subtelna poświata */
}


.v-dev-col {
            margin-bottom: 10px;
        }

        .v-dev-title {
            color: #ffffff;
            font-size: 1.2rem;
            margin-bottom: 15px;
            font-weight: normal;
        }







/* Stylizacja listy na podstawie Twoich klas ze zdjęcia */
.v-dev-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.v-dev-menu li {
    margin-bottom: 12px;
}

/* GŁÓWNY STYL LINKU */
.v-dev-menu a {
    text-decoration: none;
    color: #ffffff;         /* Biały tekst */
    font-size: 16px;
    position: relative;     /* Baza dla linii */
    padding-bottom: 5px;    /* Odstęp między tekstem a linią */
    display: inline-block;  /* Żeby linia miała szerokość tekstu */
    transition: color 0.3s ease;
}

/* CIENKA LINIA - STAN POCZĄTKOWY */
.v-dev-menu a::after {
    content: '';
    position: absolute;
    left: 0;                /* Start od lewej krawędzi */
    bottom: 0;
    width: 0;               /* Szerokość startowa 0 */
    height: 1px;            /* Bardzo cienka linia */
    background-color: #c9a063; /* Twój złoty kolor */
    
    /* PŁYNNE WYSUWANIE: czas 0.4s zapewnia elegancki efekt */
    transition: width 0.4s ease-out; 
}

/* EFEKT WYSUWANIA PO NAJECHANIU MYSZKĄ */
.v-dev-menu a:hover::after {
    width: 100%;            /* Linia rozwija się do pełnej szerokości */
}

/* STAN AKTYWNY - LINIA ZOSTAJE NA STAŁE */
/* Dodaj klasę "active" w HTML do wybranego linku */
.v-dev-menu a.active::after {
    width: 100%;            /* Podświetlenie jest zawsze widoczne */
}

/* Opcjonalnie: zmiana koloru tekstu dla najechanego/aktywnego linku */
.v-dev-menu a:hover, 
.v-dev-menu a.active {
    color: #c9a063;
}







/* koniec stopka */


.user-login-form label[for="edit-name"] {
    color: #000000;
}

.user-login-form label[for="edit-pass"] {
    color: #000000;
}

[id^="views-form-edycja-danych-page-1"] .views-field-field-pietro {
    vertical-align: top;
    padding-bottom: 50px;
    display:grid-lanes;
}

#views-form-edycja-danych-page-1 .views-field-field-pietro {
    vertical-align: top;
    padding-bottom: 50px;
    display:grid-lanes;
}