:root {
    --main-font: 'Open Sans', sans-serif;
    --secondary-font: 'Nunito', sans-serif;
    --menu-width:    220px;
    --details-width: 300px;
    --photos-height: 160px;
    --head-height:    55px;
    --buttons-hover-backcolor: #44b46b;
    --color-gray1: #858796;
    --color-gray2: #ced4da;
    --color-gray3: #e9ecef;
    --color-white: #ffffff;
    --color-primary: #2a80c2;
    --color-custom-shapes: #b6b6b6;
    --color-table-selectedrow: #c7e7ff;
    --photos-container-padding: 5px;
}
  
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
  
#head_container {
    height: var(--head-height);
    min-height: var(--head-height);
    font-family: var(--secondary-font);
    padding: 10px;
}

#basic_container {
    height: calc(100vh - var(--head-height) );
}

#menu_container {
    width: var(--menu-width);
    min-width: var(--menu-width);
    padding: 10px;
    background-color: var(--color-gray3);
    margin-left: 10px;
    font-family: var(--main-font);
}
  
#data_container {
    background-color: var(--bs-light);
    padding: 10px; 
    min-width: 0;
}
  
#details_container {
    width: var(--details-width);
    min-width: var(--details-width);
    background-color: var(--bs-gray-200);
    margin-right: 10px;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

#photos_container {
    height: var(--photos-height);
    min-height: var(--photos-height);
    background-color: var(--bs-gray-200);
    padding: var(--photos-container-padding);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    /*white-space: nowrap;*/
}	

#data_header, #data_table, #photos_container {
    min-width: 0; /* Zajistí, že se mohou zmenšit na minimální šířku */
}

#photos_container img {
    height: calc(var(--photos-height)-(2*var(--photos-container-padding))); /* Dynamická výška obrázku */
    width: calc(var(--photos-height) * 1.2); /* Šířka podle výšky x 1.2 */
    object-fit: cover; /* Přizpůsobení obrázku bez zkreslení */
    margin: 5px; /* Okraje obrázku */
    border-radius: 5px; /* Volitelně zaoblené rohy */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Stín pro lepší vizuální efekt */
}
  
.scrollable_y {
    overflow-y: auto;
    height: 100%;
}

.scrollable_x {
    overflow-x: scroll;
    overflow-y: hidden;
    width:100%;
}

/**/
.head-buttons {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 14px;
    
    margin-right: 7px;
    margin-bottom: 0px;
    width: 80px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
  
.head-buttons:hover {
    background-color: var(--buttons-hover-backcolor);
    color: var(--color-white);
}

#head_texts_container {
    background: var(--color-gray1);
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

.head-texts {
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap; /* Zabrání zalomení textu */
    overflow: hidden;    /* Skryje text přesahující rodiče */
}

.head-texts.head-texts1 {
    color: var(--color-white);
}
  
.head-texts.head-texts2 {
    color: var(--color-gray3);
}

.head-texts.head-texts3 {
    color: var(--color-white);
}
  
    
  
  
/* hlavní info panel POZEMEK >> PRODEJ >> ODDO */

.div-selected-head-panel {
    background: var(--color-gray1);
    border-radius: 6px;
}
  
.container {
    display: flex;
    height: 100vh;
}
 
  
.data-general-select {
    display: flex;
    gap: 10px;
}