sup{
    background-color: rgb(21, 255, 0);
    border: 1px solid black;
    padding: 0px 5px 0px 5px;
    border-radius: 50%;
    margin-left: 4px;
}

header{
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Yläpalkki */
.header {
    gap: 1em;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffff;
    /* background-color: #333; */
    padding: 15px;
    text-align: center;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


}

.custom-btn{
    padding: 0.2em;
    padding-top:0;
    border-radius: 0.2em; 
    background-color: #d0caca;
    border: 1px solid #a6a6a6;
}

.custom-btn:hover{
    background-color: #a6a6a6;
    cursor: pointer;    
}

.btn-blue{
    background-color: #2742c5;
    color: #FFFF;
}


.haku-div{
    background-color: #2742c5;
    padding: 0.4rem;
}

.flex-row{
    display: flex;
    flex-direction: row !important;
}
.flexible-menu{
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 100%;
    justify-content: space-between;
}


/* 
@media screen and (max-width: 500px) {
    .flexible-menu{
        flex-direction: column;
    }
}
 */

 

/* Sivupaneeli */
.side-menu {
    /* height: -webkit-fill-available; */
    width: 250px;
    position: fixed;
    /* top: 0; */
    left: -250px;
    background-color: #444;
    overflow-x: hidden;
    transition: 0.3s;
    /* padding-top: 60px; */
    overflow-y: scroll;
    z-index: 999;
    color: aliceblue;

}


/* Valikon linkit */
.side-menu a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    transition: 0.2s;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.side-menu a:hover {
    background-color: #575757;
}

/* Avattavan valikon nappi */
.menu-btn {
    font-size: 20px;
    cursor: pointer;
    color: white;
    padding: 10px;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001;
}

/* Sisältöalue */
.content {
    padding: 20px;
    transition: margin-left 0.3s;
    padding-bottom: 50px; /* tilaa footerille */
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    z-index: 1000;
}

/* Valikon näkyvyyden hallinta */
.side-menu.open {
    left: 0;
    z-index: 9999;
}
.content.shift {
    /* margin-left: 250px; */
    margin-left: 0;
}

.side-menu > ul{
    padding: 0;
    list-style: none;
}

ul{
    list-style: none;
}

.side-menu a:hover{
    cursor: pointer;
}

.menu-div{
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:15px;
    margin-top: 1rem;
    flex-direction: row;
}

.menu-div input{
    grid-column: 1 / -1; /* Span the entire width of the grid */
}


.no-scroll {
    overflow: hidden;
}

/* Hide menu-div */
.menu-div.hidden {
    display: none;
}

.header-main {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.clickable-th{
    cursor: pointer;
}

.dropdown-menu{
    top: 100%;
}

.dropdown-item:hover{
    background-color: #2742c5;
}

@media (max-width: 450px){
    .menu-div{
        flex-direction: column-reverse;
    }
}

@media (min-width: 750px){

    .menu-div{
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap:15px;
        margin-top: 0;
        margin-left: auto;
    }
    
    .toggleMenuBtn{
        display: none;
    }


    .hidden{
        display: flex;
    }
}

.menu-icon{
    width: 20px;
    cursor: pointer;
}

.menu-text{
    text-decoration: none;
    color: #FFFF;
    cursor: pointer;
}

.side-menu::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Edge */
}


/* Fullscreen sidebar on narrow screens */
@media (max-width: 750px) {
    .side-menu {
        width: 100%;
        height: -webkit-fill-available;
        position: fixed;
        /* top: 0; */
        left: -100%;
        /* transition: left 0.3s; */
    }

    .side-menu.open {
        left: 0;
    }

    .header{
        flex-direction: column;
    }
}

@media (min-width: 999px){
    
}

.tableinput {
    width: -webkit-fill-available
}

td.muokkaustila {
    padding:0 !important;
}
/* uusi */
.modal-overlay {
    display: none; /* Piilota oletusarvoisesti */
    position: fixed; /* Kiinteä sijainti */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25); /* Puoliläpinäkyvä tausta */
    z-index: 1000; /* Varmistetaan, että se on muiden elementtien päällä */
  }
  
  .spinner {
    border: 15px solid #2742C5;
    border-top: 15px solid #fff;
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    /* Muuta spinnerin sijaintia keskelle */
    transform: translate(-50%, -50%);
  }
  
  @keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }

  .lista {
    padding:0;
  }
 .lista li {
    list-style: none;
    padding:0;
    margin:0;
 }

 .lista li a {  
    text-decoration: none;
    display: block;
    text-align: left;
    margin: none !important;
    border-radius: 0; 
}

.btn{
    height: fit-content;
}

.btn-fresh-blue {
    background-color: #4A90E2;
    color: white;
    border: solid 1px #888;
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-fresh-blue:hover {
    background-color: #357ABD;
    color: white;

}

.btn-sky-blue {
    background-color: #87CEEB;
    color: white;
    border: solid 1px #888;
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-sky-blue:hover {
    background-color: #7BB8DB;
    color: white;

}

/* Tilaus-painike: Kauniin vihreä */
.btn-order-green {
    background-color: #4CAF50; /* Vihreä */
    color: white;
    border: solid 1px #3E8E41; /* Tummempi vihreä */
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-order-green:hover {
    background-color: #45A049; /* Hiukan tummempi vihreä */
    color: white;
}
.btn-order-green sup {
    background-color: #f44;
}

/* Lähete-painike: Hillitty keltainen */
.btn-delivery-yellow {
    background-color: #FFC107; /* Keltainen */
    color: black;
    border: solid 1px #DDAA05; /* Tummempi keltainen */
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-delivery-yellow:hover {
    background-color: #E6B507; /* Hiukan tummempi keltainen */
}
.btn-delivery-yellow sup {
    background-color: #88f;
}

.btn-calm-blue {
    background-color: #4682B4;
    color: white;
    border: solid 1px #888;
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-calm-blue:hover {
    background-color: #3D6F9D;
    color: white;

}

.btn-royal-blue {
    background-color: #4169E1;
    color: white;
    border: solid 1px #888;
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-royal-blue:hover {
    background-color: #3656B8;
}

.btn-neutral-blue {
    background-color: #3B5998;
    color: white;
    border: solid 1px #888;
    box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px rgba(0, 0, 0, 0.2);
}
.btn-neutral-blue:hover {
    background-color: #334C84;
}
.centerline {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.clickable-th{
    border-left: 2px solid #ddd !important;
    border-top: 2px solid #ddd !important;
    border-right: 2px solid #ccc !important;
    border-bottom: 2px solid #ccc !important;
    /*box-sizing: border-box;*/
}
.clickable-th:hover{
    border: 2px solid #aaa !important;
    border-left:3px solid #aaa !important;
    background-color: #eee;
}


.row {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
}
.col {
    flex: 1;
    padding: 0 10px;
}

.col1 { flex: 1; padding: 0 4px; border-right: dotted 1px #eee;} 
.col2 { flex: 1; padding: 0 4px; border-right: dotted 1px #eee; }
.col3 { flex: 1; padding: 0 4px; border-right: dotted 1px #eee; }
.col4 { flex: 3; padding: 0 4px; border-right: dotted 1px #eee; } 
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-weight: normal;  
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 400px !important;
  overflow-y: auto;
}


.select2-container--default .select2-selection--single {
  margin-top:7px !important;
  margin-left:7px !important;
  margin-bottom:7px !important;
}


.select2-container--default .select2-selection--single {
  background-image: url('/svg-icons/icons8-search.svg');
  background-position: left 0px center;
  background-repeat: no-repeat;
  padding-left:24px;
}

.select2-dropdown {
  background-color: #f0f0f0; 
}

#main-header {
  display: flex;
  flex-direction: row;
  width: 95%; /* Hakunäkymä kattaa 95% ruudun leveydestä */
  border: none;
}
#mySelect2 {
  width: 10% !important; /* Select2-pikahaku on 10% leveydestä */
  padding-top: 0.2em;
}
.custom-dropdown-height .select2-results__options {
  overflow-y: auto;
}
.select2-container--default .select2-selection--single {
  height: 34px;
}

.select2-results__option.select2-results__message {
  white-space: pre-wrap; /* This ensures that the <br> tags are rendered correctly */
}

.highlight {
    background-color: yellow; /* Korostusväri */
    font-weight: bold; /* Haluttaessa fontti lihavoiduksi */
}

/* Highlight 1: Punainen */
.highlight1 {
    background-color: #FF6666; /* Punainen */
    font-weight: bold;
}

/* Highlight 2: Sininen */
.highlight2 {
    background-color: #66B2FF; /* Sininen */
    font-weight: bold;
}

/* Highlight 3: Vihreä */
.highlight3 {
    background-color: #66FF66; /* Vihreä */
    font-weight: bold;
}

/* Highlight 4: Keltainen */
.highlight4 {
    background-color: #FFFF66; /* Keltainen */
    font-weight: bold;
}

/* Highlight 5: Oranssi */
.highlight5 {
    background-color: #FFB266; /* Oranssi */
    font-weight: bold;
}

/* Highlight 6: Liila */
.highlight6 {
    background-color: #B266FF; /* Liila */
    font-weight: bold;
}

/* Highlight 7: Vaaleanpunainen */
.highlight7 {
    background-color: #FF66B2; /* Vaaleanpunainen */
    font-weight: bold;
}

/* Highlight 8: Turkoosi */
.highlight8 {
    background-color: #66FFD9; /* Turkoosi */
    font-weight: bold;
}

/* Highlight 9: Harmaa */
.highlight9 {
    background-color: #CCCCCC; /* Harmaa */
    font-weight: bold;
}

/* Highlight 10: Ruskea */
.highlight0 {
    background-color: #D9A066; /* Ruskea */
    font-weight: bold;
}

.luettelo {
    border-collapse: collapse;
}
.luettelo td {
    border: dotted 1px #bbb;
}
.luettelo th {
    border: dotted 1px #bbb;
    background-color: #eee;
}

.luettelo tr:hover{
    /*color:#fff;*/
    background-color: #ccccff !important;
    cursor: pointer;
}
.luettelo tr:hover th{
    /*color:#fff;*/
    background-color: #ccccff !important;
    cursor: pointer;
}


.nav-link:hover {
    background-color: #f0f0f0;
    cursor: pointer;

}

#dropzone-sort{
    overflow-y: scroll;
    max-height: 50vh;
}

/* Punainen X-painike */
.custom-close {
    color: red; /* Punainen X */
    font-size: 1.5rem; /* Suurempi koko */
    opacity: 1; /* Täysi näkyvyys */
}

/* Hover-efekti */
.custom-close:hover {
    color: darkred; /* Tummempi punainen hoverilla */
    transform: scale(1.2); /* Suurentaa painiketta hieman */
    transition: transform 0.2s ease, color 0.2s ease; /* Sulava siirtymä */
}

.select2-container {
    z-index: 1050; /* Bootstrapin modaalien z-index on 1040 */
}
.select2-dropdown {
    z-index: 9999; /* Valikko näkyy kaiken päällä */
}

.parent-element {
    overflow: visible !important; /* Sallii valikon näkyä oikein */
}
/* Optional: Add custom max-width for better control */
.modal-dialog {
    max-width: 90%; /* Adjust to your needs */
    width: fit-content;
    margin: auto; /* Center modal horizontally */
}

@media (max-width: 576px) {
    .modal-dialog {
        max-width: 100%; /* Fullscreen on small screens */
    }
}

.templatediv {
    padding: 5px;
    flex: 1;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: left;
    display: table-cell !important;
}

.templatediv:first-child {
    border-left: none;
}

/* 
.eac-suggestions {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.eac-item {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.eac-item-hover {
    background-color: #eee;
    color: #000;
}

.eac-item-selected {
    background-color: #ddd;
    color: #000;
} */

.tilauspohjarivi td {
    vertical-align: top;
}


div.kenttasolu {
    font-weight:normal !important;
    color:navy;  
    font-size:13pt; 
    padding:0.2em;
 /*   border-bottom:#ccc 1px dotted;
    border-left:#ccc 1px dotted;*/
 }
 
 div.solu {
    /* float:left; */
    /*border:solid 1px #000;  */
    /*margin:1px;*/
    background-color:#fff !important;
    font-size: 11pt;
    font-weight: normal;
    /*padding:0.2em;*/
    padding: 0.5em; 
    border-top:dotted 1px #ccc;
    border-right:dotted 1px #ccc;
 
    /*border:solid 1px #000;*/
 }
 
 .clearfix:after { 
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
 }
 .clearfix {
     background-color: lightblue;
 }

 .grid2 {
    grid-template-columns: [col] 50% [col] 50%; 
 }
 
 @media screen and (max-width: 640px) {
    
    div.grid2 {
       grid-template-columns: [col] 100%; 
    }
    
 }



 /* mainpagesta kopsatut */


.modal-dialog {
    max-width: 90%;
    /*height: 90%;*/
}

.modal-content {
    /*height: 100%;*/

}


.dropdown-menu-custom {
    max-height: 50vh;
    overflow-y: auto;
    width: 100%;
}
.dropdown-item-custom {
    display: flex;
    justify-content: space-between;
}
.dropdown-item-custom div {
    width: 25%;
    padding: 0 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.search-button {
    display: inline-block;
    padding: 0.5em 1em;
    min-width: 50px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}

.search-container {
    position: relative;
}

.search-button {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}

.select2-container {
    width: 100% !important; /* Select2-elementin leveys */
}

.selection {
    display: none !important; /* Piilota valittu elementti */
}

.select2-dropdown {
    position: absolute !important; /* Sijoitus absoluuttisesti */
    top: calc(100% + 5px) !important; /* Aseta dropdown hieman nappulan alapuolelle */
    left: 0 !important; /* Kohdista vasemmalle */
    width: 100% !important; /* Dropdown täyttää säilön leveyden */
    z-index: 1000 !important; /* Nostetaan dropdown muiden elementtien yläpuolelle */
}    

.ac *{
    max-width: 100%;
}
 

.select2-container .select2-dropdown {
    z-index: 9999; /* Suurempi kuin modaalin z-index */
}

.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

#tilauspohjaModal .modal-dialog {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100%);
    height: calc(100% - 20px);
    margin: 0;
    padding: 0;
}
#tilauspohjaModal .modal-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}

#lahetepohjaModal .modal-dialog {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100%);
    height: calc(100% - 20px);
    margin: 0;
    padding: 0;
}
#lahetepohjaModal .modal-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}



.dropdown-topmenu {
    position: relative;
    display: inline-block;
    height: fit-content;
}
/* 
.dropdown-topmenu-btn {
    background-color: #3498db;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
} */

/* .dropdown-topmenu-btn:hover {
    background-color: #2980b9;
} */

.dropdown-topmenu-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    min-width: 150px;
    overflow: hidden;
    z-index: 100;
    margin-top: 0.6em;
}

.dropdown-topmenu-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black;
}

.dropdown-topmenu-menu a:hover {
    background-color: #f1f1f1;
}

.dropdown-ratas-menu {
    display: none;
    position: absolute;
    left: 0;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    min-width: 150px;
    overflow: hidden;
    z-index: 100;
    margin-top: 2.5em;
    margin-left: 20px;
    gap: 0.5em;
    border: 2px solid rgb(28, 47, 140);
    padding: 0.3em;
}

.dropdown-ratas-menu a {
    display: flex;
    padding: 0.3em;
    justify-content: flex-start;
    gap: 0.3em;
    
}

.show {
    display: flex;
    flex-direction: column;
}


/*_____________________________________________*/
/*____________Kolmiulotteisuus_________________*/
/*_____________________________________________*/
/* .btn-3d {
    position: relative;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    transition: all 0.05s ease-in-out;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.btn-3d:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.btn-primary.btn-3d {
    background-color: #007bff;
}


.btn-success.btn-3d {
    background-color: #28a745;
}

.btn-danger.btn-3d {
    background-color: #dc3545;
} */

.btn-3d {
    position: relative;
    border: none;
    outline: none;
    color: white;
    font-weight: bold;
    transition: all 0.05s ease-in-out;
}

.btn-3d:active {
    transform: translateY(4px);
}

/* Primary */
.btn-primary.btn-3d {
    background-color: #2742c5;
    box-shadow: 0 4px 0 rgb(9 121 240);
}

.btn-primary.btn-3d:active {
    box-shadow: 0 2px 0 rgba(0, 123, 255, 0.6);
}

/* Success */
.btn-success.btn-3d {
    background-color: #28a745;
    box-shadow: 0 4px 0 rgba(40, 167, 69, 0.6);
}

.btn-success.btn-3d:active {
    box-shadow: 0 2px 0 rgba(40, 167, 69, 0.6);
}

/* Danger */
.btn-danger.btn-3d {
    background-color: #dc3545;
    box-shadow: 0 4px 0 rgba(220, 53, 69, 0.6);
}

.btn-danger.btn-3d:active {
    box-shadow: 0 2px 0 rgba(220, 53, 69, 0.6);
}


div.easy-autocomplete{
    width: 100% !important;
}

.product-data-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    justify-content: flex-start; 
}

.product-data {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    width: 280px; 
    border-left: 5px solid #2742c5; 
} 

.mx-width-50{
    width: 70%;
}

.bolded{
    font-weight: bold;
}

@media only screen and (min-width: 1000px) {       
    .mx-width-50{
        min-width: 50%;
        max-width: max-content;
    }
}

.nobold {
    font-weight: normal !important;
}

.noborder {
    border: none !important;
}

.nav-link {
    background-color: #dde;
    border:solid 1px #bbb !important; 
    border-bottom: none !important;
    margin-left: 0.2em;
}
.active {
    border-bottom: none !important;
}

.lomakekentat{
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.lomakekentat div{
    padding-right: 0.7em;
    padding-left:0.2em;
    padding-bottom:0.2em;
    border: 1px dotted #bbb;
    background-color: #fafafa;

}
.lomakekentat span {
    display: block;
    margin-bottom: 0.2em;
}
.lomakekentat span:first-child {
    display: block;
    margin-bottom: 0.2em;
    font-weight: bold;
    font-size:10pt;
}
.lomakekentat span:nth-child(2) {
    padding-left:0.5em;
}

.rivikentat{
    display: grid;
    grid-template-columns: 0.5fr 0.5fr 3.5fr 0.5fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
.rivikentat div{
    padding: 0.2em;
    border: 1px solid #ccc;
}
.rivikentat span {
    display: block;
    margin-bottom: 0.2em;
}
.rivikentat span:first-child {
    display: block;
    margin-bottom: 0.2em;
    font-weight: bold;
    font-size:10pt;
    padding-right:1em;
}
.rivikentat span:nth-child(2) {
    padding-left:0.5em;
    padding-right:1em;
}

.th-blue {
    background-color: #ccc !important;
    color: white;
}

.toimitettu_tasan {
    color: green !important;
}
.toimitettu_alle {
    color: red !important;
}
.toimitettu_yli {
    color: orange !important;
}   
.ei_toimitettu {
    color: red !important;
}   

.omatable{
    /*width: 100%;*/
    border-collapse: collapse;
    
}
.omatable tr:nth-child(odd) td {
    background-color: #f0f0f0 !important; 
}
.omatable th{
    text-align: left;
    border: 1px dotted #aaa;
    background-color: #f0f0f0;
    padding:0.2em;
    padding-right: 1em;
    vertical-align: top;
}

.omatable td{
    text-align: left;
    border: 1px dotted #aaa;
    padding:0.2em;
    padding-right: 1em;
    vertical-align: top;
}
.oikealle {
    text-align: right !important;
    padding-right: 0.5em  !important;
    padding-left: 1em !important;
}

.tilauspopup {
    color:black;
    width: fit-content;
}

.valmis{
/*    background-color: #6a6;
    color: white;
    border: black;*/
    padding:0.2em 0.5em;
    border-radius: 0.2em;
}
    

.bg-small {
    font-size: 1rem;
    padding: 0.4rem 0.4rem;
  }



.top-menu-buttons{
    display: flex;
    flex-direction: row;
    gap: 0.3em;
}

/* .btn-3d {
    font-weight: normal !important;
} */

.clickable{
    cursor: pointer;
}

#tuotelisaysform label{
    font-weight: 400;
}

#tuotelisaysform .togglebar{
    background-color: #e6e6e6;
    padding: 0.3em; 
    display: flex;
    flex-direction: row;
}
#tuotekopiointiform .togglebar{
    background-color: #e6e6e6;
    padding: 0.3em; 
    display: flex;
    flex-direction: row;
}

#tuotekopiointiform .togglebar > img{
    margin-left:auto;
}
#tuotelisaysform .togglebar > img{
    margin-left:auto;
}

.input-div {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

.image-zoom:hover {
    cursor: pointer; 
}

.document-button{
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    background-color: #f0f8ff;
    margin-bottom: 0.4em;
    align-items:center; 
}

#secondModal{
    background-color:#0707072e;
}

.pikahakuBtn{
    background-color: #f0f8ff;
}

.pikahakuBtn:hover{
    background-color: #afdaff !important;
}

.clickable-th > .centerline > div{
    width: max-content;
}

.badge-count{
    background: #21bf76;
    color: white;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.1em 0.3em 0.1em 0.3em ;
    width: fit-content;
}

.badge-count-button{
    display: flex !important;
    align-items: center;
}

.red-infobox{
    background-color: #fff8e1;
    border: 1px solid #ffecb3;
    padding: 0.5rem;
    border-radius: 5px;
}
.blue-infobox{
    background-color: #e6f9ff;
    border: 1px solid #b2dae6;
    padding: 0.5rem;
    border-radius: 5px;
}

.green-infobox{
    background-color: #e0ffde;
    border: 1px solid #89df84;
    padding: 0.5rem;
    border-radius: 5px;
    /* background-image: url("../svg-icons/icons8-info.svg"); */
    background-image: url("../svg-icons/icons8-info.svg");
    background-repeat: no-repeat;
    background-position: top left;
}
.check {
    cursor: pointer;
}

.errortext {
    display: none;
    background-color: #ffdada;   
    border: 2px solid red; 
    padding: 0.3em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


span.voimaton {
    color: #999;
    font-style: italic;
}

.closable-row{
    display: none;
}

.avaaTilaus {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}
.avaaTilaus:hover {
    color: darkblue;
}
.avaaTilaus:hover {
    cursor: pointer;
}

.kuljetus:hover  {
    cursor: pointer !important;
}

.versiodiv{
    color: red;
    font-weight: bold;
    background-color: white;
    display: flex;
    justify-content: center;
}


.tilausrivipvm{
    color: #888;
    font-size: 10pt; 
}

.eac-table tbody tr { cursor: pointer; }
.eac-table tbody tr:hover { background: #f8f9fa; }

.merge-target { outline: 2px dashed #0a0; }

.anturaera img {
    border: 1px solid red;
    padding: 0px 5px 0px 5px;
    border-radius: 50%;
    margin-left: 4px;
    cursor: pointer;
    background-color: rgb(255,0,0,0.4);
}

.modal-header.drag-handle {
    cursor: move; user-select: none; 
}

.modal.fade .modal-dialog {
    transition: none !important;
    transform: none !important;
}

.modal-footer .equal {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.modal-footer .equal:not(:only-child) {
  /* Jos on kaksi nappia, ne venyvät yhtä leveiksi */
  width: 100%;
}

.modal-alert .modal-content {
  background-color: #ffe6e9;  /* vaaleanpunainen */
  border: 2px solid #f5b0b5;
}
.modal-alert .modal-header {
  background-color: #f9cfd4;
}
.modal-alert .btn-primary {
  background-color: #d9534f;
  border-color: #d43f3a;
}
  
.radio-icon {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.35rem;
    vertical-align: -0.1em; /* pieni säätö, että teksti linjassa */
}

/* oletuksena sisäpallo piilossa */
.radio-icon .radio-dot {
    fill: transparent;
}

/* valituissa napeissa (btn-success / btn-secondary) sisäpallo näkyy */
.btn-success .radio-dot,
.btn-secondary .radio-dot {
    fill: currentColor;
}

/* outline-napit: pelkkä kehä, ei sisäpalloa */
.btn-outline-success .radio-dot,
.btn-outline-secondary .radio-dot {
    fill: transparent;
}
   .modal-resize-handle {
      width: 12px;
      height: 12px;
      position: absolute;
      right: 2px;
      bottom: 2px;
      cursor: se-resize;
      background: #ccc;
   }


h1 {
    font-size: 1.9rem;
    font-weight: 500;
    color: #222;
    margin: 0 0 1rem;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    letter-spacing: -0.3px;
}
  .tabs-wrapper {
      margin-bottom: .75rem;
  }

  .tabs-nav {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
      flex-wrap: nowrap; /* oletuksena yksi rivi */
  }

  .tabs-nav .nav-item {
      margin: 0;
  }

  .tabs-nav .nav-link {
      display: block;
      text-decoration: none;
      font-size: .9rem;
      padding: .45rem .9rem;
      color: #6c757d;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 0;
      white-space: nowrap;
  }

  .tabs-nav .nav-link {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .2px;
}

  .tabs-nav .nav-link:hover {
      text-decoration: none;
  }

  /* --- TILA 1: mahtuu yhdelle riville (klassiset tabit) --- */
  .tabs-wrapper.tabs-singleline {
      border-bottom: 1px solid #dee2e6;
/*      overflow-x: auto;
      -webkit-overflow-scrolling: touch;*/
  }

  .tabs-wrapper.tabs-singleline .tabs-nav {
      flex-wrap: nowrap;
  }

  .tabs-wrapper.tabs-singleline .nav-link {
      margin: 0 .1rem 0 0;
      border-top-left-radius: .4rem;
      border-top-right-radius: .4rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border: 1px solid transparent;
      border-bottom: none; /* yhdistyy wrapperin borderiin */
  }

  .tabs-wrapper.tabs-singleline .nav-link:hover:not(.active) {
      color: #0d6efd;
      background-color: rgba(13,110,253,.03);
      border-color: #e5e5e5;
      border-bottom-color: transparent;
  }

  .tabs-wrapper.tabs-singleline .nav-link.active {
      color: #0d6efd;
      font-weight: 600;
      background: #fff;
      border-color: #dee2e6 #dee2e6 #fff; /* ei alareunaa */
      border-bottom-width: 1px;
      position: relative;
      top: 1px; /* nousee hiukan wrapper-bordereiden päälle */
  }

  /* --- TILA 2: ei mahdu yhdelle riville → wrap + pillit --- */
  .tabs-wrapper.tabs-wrapped {
      border-bottom: none;
  }

  .tabs-wrapper.tabs-wrapped .tabs-nav {
      flex-wrap: wrap;
      row-gap: .3rem;
  }

  .tabs-wrapper.tabs-wrapped .nav-link {
      margin: 0 .35rem .35rem 0;
      border-radius: .6rem;
      border: 1px solid #dee2e6;
      background: #f8f9fa;
      color: #495057;
  }

  .tabs-wrapper.tabs-wrapped .nav-link:hover:not(.active) {
      background: #e9f2ff;
      border-color: #c4d7ff;
      color: #0d6efd;
  }

  .tabs-wrapper.tabs-wrapped .nav-link.active {
      background: #0d6efd;
      border-color: #0d6efd;
      color: #fff;
      font-weight: 600;
  }

      .product-header {
        padding: .75rem 1rem;
        background: #f8f9fa;
        margin-bottom: 1rem;
    }
    .product-header-title {
        font-weight: 600;
        font-size: 1.05rem;
        margin-bottom: .25rem;
    }
    .product-header-sub {
        font-size: .85rem;
        color: #6c757d;
    }

    /* --- LAATIKOT KIINNI TOISIINSA --- */
    .product-details {
        display: flex;
        flex-wrap: wrap;
        gap: 0;               /* EI väliä solujen välissä */
        margin-bottom: 1em;
    }

    .product-cell {
        display: flex;
        flex-direction: column;
        padding: .45rem .6rem;
        border: 1px solid #d0d0d0;
        background: #fff;

        margin: 0;            /* EI marginaalia */
        border-radius: 0;     /* Ei pyöristyksiä */

        width: auto;          /* Leveys sisällön mukaan */
        max-width: 100%;

        white-space: nowrap;  /* Ei rivinvaihtoa label/value-kohdassa */
    }

    .product-cell + .product-cell {
     /*   border-left: none;    /* Poista tupla-reuna vierekkäisistä */
    }

    /* Rivinvaihdossa yläreuna kiinni edelliseen riviin */
    .product-cell:nth-child(n+1) {
        margin-bottom: -1px;  /* nostaa laatikot tasan kiinni */
    }

    .product-label {
        /*font-size: .75rem;*/
        font-size: .85rem;
        color: #555;
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-bottom: .15rem;
    }

    .product-value {
        /*font-size: .92rem;*/
        font-size: 1.05rem;

        font-weight: 500;
    }
    .product-value b {
            font-size: .92rem;
            font-weight: 500;
            color: red !important;
        }

    .product-value.muted {
        color: #555;
        font-weight: 400;
    }

        .badge-tab {
        background: #0dcaf0;          /* info-väri */
        color: #000;
        padding: 1px 5px;
        border-radius: .45rem;
        font-size: 0.7rem;
        vertical-align: middle;
        margin-left: .25rem;
        font-weight: 600;
    }

    /* kun tabit ovat wrapped-painiketilassa */
    .tabs-wrapper.tabs-wrapped .nav-link .badge-tab {
        background: #fff;
        color: #0d6efd;
        border: 1px solid #0d6efd;
    }

    /* aktiivisen tabin badge (singleline) */
    .tabs-wrapper.tabs-singleline .nav-link.active .badge-tab {
        background: #0d6efd;
        color: #fff;
    }

    
.badge-tab {
    background: #0d6efd !important;
    color: #fff;
    padding: 1px 6px;
    border-radius: .45rem;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Ei-aktiivisten tabien kevyt taustaväri (singleline-tilassa) */
.tabs-wrapper.tabs-singleline .nav-link:not(.active) {
    background-color: #f5f7fa;   /* erittäin kevyt harmaa/sinertävä */
    border-color: #e5e5e5;
}

/* Hover-vahvistus */
.tabs-wrapper.tabs-singleline .nav-link:not(.active):hover {
    background-color: #e9eef4;   /* aavistuksen tummempi */
    color: #0d6efd;
}

/* Ei-aktiiviset wrapped-pill tabit */
.tabs-wrapper.tabs-wrapped .nav-link:not(.active) {
    background-color: #f5f7fa;
    border-color: #d9dfe6;
}

/* Hover wrapped-tilassa */
.tabs-wrapper.tabs-wrapped .nav-link:not(.active):hover {
    background-color: #e9eef4;
    border-color: #bfc9d6;
    color: #0d6efd;
}

.bg-info {
    background-color: green !important;
}

.status-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1em;
}

.status-box {
    position: relative;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    margin-right: 0.5rem;
    color: white;
    border-radius: 0.25rem 0 0 0.25rem;
    clip-path: polygon(
        0 0,
        calc(100% - 10px) 0,
        100% 50%,
        calc(100% - 10px) 100%,
        0 100%
    );
    border: 1px solid transparent; /* oletus, yliajetaan alla */
}

/* Kevyt reuna samaa sävyä, mutta tummempi */

.status-box.light-green {
    background-color: #d4edda;
    color: #155724;
    border-color: #b2d5b4;   /* hiukan tummempi vihreä */
}

.status-box.dark-green {
    background-color: #218838;
    color: #fff;
    border-color: #19692c;   /* tummempi vihreä */
}

.status-box.gray-bg {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #c0c3c7;   /* tummempi harmaa */
}

/* Otsikosta raahattava */
.modal-draggable .modal-header {
    cursor: move;
}

/* Koon muokkaus -kahva oikeaan alakulmaan */
.modal-resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 4px;
    bottom: 4px;
    cursor: se-resize;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    z-index: 10;
}

.select-with-icon {
    position: relative;
}

.select-with-icon select {
    padding-right: 32px; /* tilaa ikonille */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none; /* piilottaa selaimen oman nuolen */
}

.select-with-icon .select-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    pointer-events: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #666; /* nuolen väri */
    opacity: .6;
}


.form-label {
    white-space: nowrap;
}

.kenttarivi {
    display: flex;
    flex-wrap: wrap;          /* TÄMÄ sallii tippumisen seuraavalle riville */
    gap: 0.5em;
    padding-top: 0.5em;
}

/* Jokainen kenttä ottaa tilaa, mutta saa tipahtaa allekkain */
/* .kenttarivi > div {
    flex: 1 1 220px;          
} */
.kenttarivi input,select,option,textarea { 
    font-weight: bold ;
}

.wait-cursor,
.wait-cursor * {
    cursor: wait !important;
}

/* Suurennuslasi input-kenttään */
.search-icon-inside {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 1.1rem;
}

/* Input padding, ettei teksti mene ikonista päälle */
.hakusana-input {
    padding-left: 32px !important;
}

/* Käyttäjän kirjoittaessa */
.hakusana-input.user-editing {
    background-color: #ffffff !important;
}

/* Jos alkuperäinen hakusana oli käytössä */
.hakusana-input.original-filter {
    background-color: #d3f7d3 !important; /* vihreä */
}