/* 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;
    width: 33vw;
    /* 1/3 of screen width */
}

.kelluvakuva svg {
    width: 100%;
    height: 100vh;
    /* Maintain aspect ratio */
}

.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 */
}