/* Style the tab */

.reunus {
border-style: solid;
border-width: 1px;
margin: 5px;
}

dt {
display: inline;
margin: 1px;
padding: 1px;
}

dd {
display: inline;
padding: 10px;
margin-bottom: 5px;
}

.yhdensarjantiedot {
background-color: #ecece6da;
border-style: dashed;
border-width: 0.1px;
margin-top: 10px;
margin-bottom: 10px;
/* //max-width: 66%;   */
}

.rivitiedot {
width: 430px;
/* //position: absolute; */
border-style: none;
border-width: 0.1px;
/* //float:left; */
top: 20px;
left: 5px;
margin-top: 20px;
}

.osatiedot {
/*  width: 360px; */
position: relative;
border-style: dashed;
border-width: 0.1px;
float:left;
top: 0px;
left: 5px;
/* //display: inline-flex;
//vertical-align: top;
//margin-top: 300px; */
}


.kiinteatnapit {
position: fixed;
top: 0px;
left: 0px;
border-radius: 2px;
border-style: solid;
border-width: 1px;
margin: 4px;
z-index: 9999;
}

.rivinapit {
position: fixed;
top: 0px;
right: 1px;
border-radius: 2px;
border-style: solid;
border-width: 1px;
margin: 4px;
z-index: 9998;
}

.reuna {
border-radius: 2px;
border-style: solid;
border-width: 1px;

}

.isovalmisnappi {
position: fixed;
top: 2px;
right: 2px;
font-size: 20px; /* Change this to the size you want */
padding: 10px 20px; /* Change this to the padding you want */
}

.rivinapit_ikkunatehdas {
/* //font-size: 30px  !important; */
position: fixed;
top: 2px;
right: 120px;
margin: 4px;
z-index: 9998;
}


.kuvareunus {
/* //background-color: #ffffff;
//border-style: none;
//border-width: 1px;
//top: 0;
//bottom: 0; */
overflow-y:visible;
/* //overflow-y:scroll;
//overflow-x:scroll; */
overflow-x:visible;
}

.keskireunus {
border-style: none;
border-width: 1px;
position: fixed;
margin-top: 20px;
top: 0;
/* //left: 280px; */
}
.oikeareunus {
border-style: none;
border-width: 1px;
/* //position: fixed; */
position: fixed;
margin-top: 35px;
/* // jotta kuva kelluu alareunassa top: 0; */
bottom: 0;
right: 20px;
}

.ikkuna_oikeareunus
{
border-style: none;
border-width: 1px;
/* //position: fixed;
//position: fixed; */
margin-top: 35px;
/* //top: 520px; */
}

.ikkuna_rivitiedot {
width: 430px;
position: relative;
border-style: none;
border-width: 0.1px;
/* //float:left; */
margin-left: 5px;
margin-top: 5px;
}

.ikkuna_osatiedot {
width: 430px;
position: relative;
border-style: dashed;
border-width: 0.1px;
float:left;
/* //display: inline-flex;
//vertical-align: top; */
margin-left: 5px;
margin-top: 5px;
}

.kelluvakuva {
border-style: none;
border-width: 1px;
float: right;
position: fixed;
/* // jotta kuva kelluu yläreunassa 35 px; */
top: 20px;
right: -20px;
}


.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.sarjavali1 {
background-color: #73c9b255;
border: 1px solid #ccc;
padding: 2px;
float: left;
}

.sarjavali2 {
background-color: #73c9b255;
border: 1px solid #ccc;
padding: 2px;
margin-left: 10px;
margin-right: 10px;
float: left;
}

.tablinks {
background-color: inherit;
float: right;
outline: none;
cursor: pointer;
padding: 1px;
}

.sarjaotsikko {
text-decoration: underline;
float: right;
cursor: pointer;
padding: 1px;
}

/* Style imagebuttons fullscreen and smallscreen */
.imagebutton {
outline: none;
cursor: pointer;
width: 24px;
margin-left: 10px;
float: right;
}

.findbatch {
outline: none;
margin-left: 10px;
float: left;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: dashed;
border-width: 1px;
border-color: #4CAF50;
outline: none;
cursor: pointer;
padding: 5px 10px;
transition: 0.3s;
}

/* Style the links in tab */
.tab a {
background-color: inherit;
float: left;
border: dashed;
border-width: 1px;
border-color: #4CAF50;
outline: none;
cursor: pointer;
padding: 5px 10px;
transition: 0.3s;
font-family: sans-serif;
font-size: 10px;
color:blue;
}

.tab .badge {
position: relative;
top: -6px;
right: -10px;
padding: 3px 6px;
border-radius: 50%;
background: red;
color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
display: none;
/* padding: 6px 12px; */
/* border: 1px solid #ccc; */
border: 1px dashed #ccc;
border-top: none;
}

.taulukko {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

.taulukko td, .taulukko th {
border: 1px solid #ddd;
/* //padding: 5px; */
}

/* //.taulukko tr:nth-child(even){background-color: #f2f2f2;} */

table.taulukko tr:hover td {color: #9fcae3;}

.taulukko th {
/* padding-top: 12px; */
padding-bottom: 12px;
text-align: left;
background-color: #4caf4f8c;
color: white;
}

.taulukko a {
background-color: inherit;
float: left;
border: dashed;
border-width: 1px;
border-color: #4CAF50;
outline: none;
cursor: pointer;
padding: 5px 5px;
transition: 0.3s;
/* //font-family: sans-serif;
//font-size: 20px;
//color:blue; */
}

.tilausotsikko {
background-color: #4caf4f8c;
color: white;
} 

.valmis {
/* //background-color: #58dc5d; */
background-color: #68e76cd3;
}

.aloitettu {
/* //background-color: #58dc5d; */
background-color: #f9fb63f8;
}

.valittu {
background-color: deepskyblue;
}

.rowinfo_tr_attention {
background-color: rgb(255, 193, 130);
}

.attention {
background-color: rgb(255, 193, 130);
}
/* //.rowinfo_table {
//  width: 430px;
//} */

table.rowinfo_table td {
padding: 0;
margin: 0;
}

.calc_parts_len_for_cut_tr {
border-spacing: 0;
margin: -5px 0px;
}

table.calc_parts_len_for_cut_table td {
padding: 0;
margin: 0;
}

.calc_parts_len_for_cut_table {
width: 350px;

border-collapse: collapse;
}

#vasenpuoli {
float: left;
/* //  width: 500px; */
margin-top: 20px;
}

.custom-tooltip {
position: relative;
/* //cursor: pointer; */
}

.custom-tooltip:hover:after {
content: attr(data-tooltip);
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
z-index: 1;
}

.highlight {
background-color: yellow;
font-size: 1.5em;
font-weight: bold;
}

.ikkunatehdas-container {
display: grid;
grid-template-columns: minmax(300px, 2fr) 1fr 1fr;
grid-template-rows: auto;  /* Changed to auto to adjust based on content */
gap: 0px 0px;
grid-template-areas: 
"ikkunatehdas_rivit ikkunatehdas_rivitiedot ikkunatehdas_kuva";
height: 100vh;  /* Set a height for the container */
margin-top: 30px;
}

.ikkunatehdas_rivit { 
grid-area: ikkunatehdas_rivit;
/* //overflow: auto;  /* Enable scrolling within this area */ 
height: 100vh;  /* Set a height for the scrolling area */
overflow-y: auto;  /* Specify y-axis scrolling */
overflow-x: hidden; /* Hide x-axis overflow */
}

.ikkunatehdas_rivitiedot { 
grid-area: ikkunatehdas_rivitiedot;
height: max-content;  /* Set height to the content height */
z-index: 10;  /* Ensures it stays on top */
}

.ikkunatehdas_kuva {
grid-area: ikkunatehdas_kuva;
height: max-content;  /* Set height to the content height */
z-index: 10;  /* Ensures it stays on top */
}

.ikkunatehdas_yhdensarjantiedot {
background-color: #c8e0bfda;
border-style: dashed;
border-width: 0.1px;
margin-top: 20px;
/* //max-width: 66%;   */
}

.pikkuteksti {
font-size:smaller;
text-align: center;
vertical-align: middle;
}

.attention_rivi {
font-weight: bold;
font-style: italic;
}

.svg-container {
display: flex;
flex-wrap: wrap; /* Allow wrapping to the next line */
gap: 10px; /* Add space between items */
}

.small-svg {
/*width: 200px;  Adjust the width as needed */
/*height: 200px; /* Adjust the width as needed */
display: flex;
/*  border: 1px solid #ccc; Optional: Add a border for better visibility */
}