.langstrans{
	font-size:8px;
	vertical-align:top;
}
.topbox {
    display: flex;
 border: 1px solid #ccc; /* Pro kontrolu okrajů */
margin-top:10px;
}

.langbox {
    display: flex;
 padding:5px;
margin-top:10px;
}


.topboxleft {
	display: inline-block;
	border:0px solid #d00;
	vertical-align:top;
	padding:5px;font-size:12px;
	background:#e5e5e5;
}
.topboxright { 
	  flex-grow: 1; /* Zabírá zbytek dostupného prostoru */
background:#f5f5f5;
	vertical-align:top;
 padding:5px;
}


.additem {
	font-size:12px;
	text-align:center;
	color:#000;
	background: #b1ffb1;
	border:1px solid #6cc46c;
	width:100%; text-transform: uppercase;
}
.delitem{
	font-size:12px;
	text-align:center;
	color:#000;
	background: rgb(255, 158, 158);
	border:1px solid rgb(190, 92, 92);
	width:100%; text-transform: uppercase;
}

.small-label {
    text-transform: uppercase;
	color:#222;
	text-align: left;
	font-size:10px;
}

.formcontainer {
	   display: flex;
    border: 1px solid #ccc; /* Pro kontrolu okrajů */

}
.firstbox {
	display: inline-block;
	border:0px solid #d00;
	vertical-align:top;
	padding:5px;font-size:12px;
	background:#e5e5e5;
	width:336px;
	color:#222;
	text-align: left;
	font-size:12px;
}
.secondbox { 
	  flex-grow: 1; /* Zabírá zbytek dostupného prostoru */
background:#f5f5f5;
	vertical-align:top;
	text-align:left;
 
}
  /* Skrytí prázdné možnosti */
  #dbparams select option[value=""] {
	display: none;
}
.selectcontainer{
    display: inline-block;	vertical-align:top;padding:5px;font-size:10px;
	
}
.selectcontainerblock{
    display:  block;	vertical-align:top;padding:5px;font-size:12px;
}
.template-wrapper{
      display:block; 
}
.butttpl {
display:inline-block;
font-size:10px;
text-align:center;
color:#fff;margin:1px;
background: #d9c44f;border-radius:3px;
 border:0px solid #ddd;padding:3px;
width:160px; text-transform: uppercase;
 
} 
.butttpl:hover { 
background: #f0d53e;  
} 
.delbutt {
 display:inline-block;padding:3px;
font-size:10px;
text-align:center;
color:#fff;margin:1px;
background: #d00;border-radius:3px;
border:0px solid #ddd;
width:20px; text-transform: uppercase; 
}
.delbutt:hover { 
background: #f00;  
} 
/* Styl pro ztmavenou obrazovku */
.modalt {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

/* Styl pro obsah modálního okna */
.modalt-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
#templates {
position: absolute;
top: 0;
right: -185px; /* Schováno doprava, ponechá 5px viditelných */
width: 210px; /* Šířka divu */
sheight: 100vh; /* Výška divu na celou obrazovku */
background-color: #ccc; /* Barva pozadí */
transition: right 0.5s ease; /* Plynulý přechod */
z-index: 1000;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;padding:5px;
}

#templates:hover {
right: 0; /* Posune div na viditelnou oblast */
}

.prewiev {
display:block;
    text-align: left;
}
.genprewiev {
   display: flex;
border: 0px solid #ccc; /* Pro kontrolu okrajů */

}
.msgboxgreen {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #28a745;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        display: none;
        font-size: 16px;
    }
.genprewievitem {
display: inline-block;
border:0px solid #d00;
vertical-align:top;
font-size:10px;


}

.pritem {
border-radius:4px;
background:#ddd;
text-align:right;
padding:5px;
display:inline-block;
margin:5px;
height:44px;
width:360px;
color:#222;
}


.priteme {
	
color:#222;
border-radius:4px;
	background:#ddd;
	text-align:right;
	padding:5px;
	display:inline-block;
	margin:5px;
	height:44px;
	width:350px;
	}
textarea {
width: 100%;
}
.langlbl {
    font-size:14px;
display:inline-block; width:167px;
}

.langlble {
    font-size:14px;
	text-align:left;
display:inline-block; width:167px;
}


.csvexample {

	background: #eee;
	padding:5px; font-size: 10px;
}

.pimagesprev {
display:inline-block;

	margin:5px; font-size: 10px;
}

.pimagesprev img {
	height:110px;
}
.imgcontrols {
    border: 1px solid #ddd;
	background:#efefef;
    display: flex;
	padding-left:10px;
    gap: 10px; /* Mezera mezi prvky */
    align-items: center; /* Zarovnání na stejné úrovni */
}

.imgcontrols input[type="file"] {
    width: 350px; /* Nebo jiná vhodná šířka */
}


.imgtable {
	background:#f5f5f5;
}
.imgtable td{
	padding:6px;
}

.imgtable img {
	background:#fff;
	padding:5px;
	border-radius:5px;
}

.delimg{
	background:#d00;
	border: 0px;
	color:#fff;
	font-size: 10px;
	border-radius:3px;
	margin:1px; 
}
.upload{
	background:#0d0;
	border: 0px;
	color:#fff;
	font-size: 10px;
	border-radius:3px;
	margin:1px; 
}
.uploadr{
	background:#e9e9e9;
	border: 0px;
	color:#000;
	font-size: 10px;
	border-radius:3px;
	margin:1px; 
}
.headstat {
    display: flex;
    justify-content: space-between; /* nebo center, pokud chceš zarovnání na střed */
    flex-wrap: wrap; /* zajistí přizpůsobení menším obrazovkám */
    width: 100%;
    background-color: #f0f0f0; /* Volitelně přidej pozadí */
    padding: 10px;
    box-sizing: border-box;
}

.statbox {
    flex: 1; /* Rovnoměrné rozdělení */
    smin-width: 150px; /* Nastaví minimální šířku pro přizpůsobení na malých displejích */
    text-align: center;
    spadding: 10px;
    background-color: #ccc;
    margin: 5px;
    border-radius: 5px;
}
.sumitem{
	width:100%; 
}
.sumclass { 
	background: #ccc;
	border-radius: 5px;
	padding:5px;
	margin-right: 15px;
	margin-bottom: 15px;
	border-collapse: separate;
	border-spacing: 5px; /* nastaví mezeru mezi <td> */
   

}
.sumclass td {
	width:100%;
	font-size:12px;  
 
	background: #bcbcbc;
	 border-radius: 5px;
	padding:10px;

}

.backupboxw {
	background-color: #fafafa; 
	width:100%;
	padding:15px;
  }
  
  
  .backupbox  {
   border: 1px solid #ccc;
	 
	display:inline-block;
	margin:5px;
	border-radius:5px;
	padding:10px;
  }
  
 
#selectedSkus {
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:6px;
    margin-bottom:15px;
    font-size:14px;
    background:#f9f9f9;
}

.megaTable {
    width:100%;
    border-collapse: collapse;
    font-size:12px;
}

.megaTable thead {
    background:#2c3e50;
    color:#fff;
}

.megaTable th,
.megaTable td {
    padding:5px;
    border-bottom:1px solid #e5e5e5;
    text-align:left;
}

.megaTable tbody tr {
    cursor:pointer;
    transition: background 0.2s ease;
    user-select:none;
}

.megaTable tbody tr:hover {
    background:#f0f7ff;
}

.megaTable tbody tr.selected {
    background:#d0e7ff;
}

.megaTable input[type="checkbox"] {
    transform: scale(1.2);
    cursor:pointer;
}

.megaControls {
    margin:10px 0 15px 0;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

#searchInput, #rowsLimit {
    padding:8px;
    border:1px solid #ccc;
    border-radius:6px;
}

#resetSelection {
    padding:8px 14px;
    border:none;
    background:#e74c3c;
    color:white;
    border-radius:6px;
    cursor:pointer;
    transition: background 0.2s ease;
}

#resetSelection:hover {
    background:#c0392b;
}

.greenBtn {
    padding:8px 14px;
    border:none;
    background:#2ecc71;
    color:white;
    border-radius:6px;
    cursor:pointer;
    transition: background 0.2s ease;
}

.greenBtn:hover {
    background:#27ae60;
}

/* MODÁLNÍ PRUH pro upload status */
.uploadStatus {
    position: fixed;
    top:20px;
    right:20px;
    background: #3498db;
    color:white;
    padding:12px 20px;
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
    opacity:0;
    pointer-events:none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index:9999;
}

.uploadStatus.show {
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
}