/*TABLE STANDARD ---------------------------------*/
.flex-table{
    list-style:none;
    padding:0;
    margin:0;
}
table, .flex-table {
    width: 100%;
    color: rgba(65, 65, 65, 1.0);
    border-collapse: collapse;
    box-sizing: border-box;
    overflow: hidden;
    text-align: left;
    border: 0px; /* border: 5px solid rgba(50, 255, 255, 0.0);*/
}
    table label, .flex-table label {
        font-size: var(--main-font-size) !important;
    } /*(Bör inte behövas !important men krockar med en label för input rubrikerna)*/
    thead th, .flex-table .th /*, td:first-child*/ { /*font-size: var(--main-font-size);*/
        font-family: var(--title-font);
    }
    .flex-table .tr {
        display: flex;
        /*justify-content: space-between;*/
     /*   justify-content: stretch;
        justify-items: stretch;
        justify-self: stretch;
        align-content: stretch;
        align-items: stretch;
        align-self: stretch;*/
    }
        .flex-table .tr > div {
            flex: 1;
            /*justify-content: stretch;
            justify-items: stretch;
            justify-self: stretch;
            align-content: stretch;
            align-items: stretch;
            align-self: stretch;*/
        }
    table a, .flex-table a {
        color: rgba(55, 118, 137, 1.0);
        font-weight: 400;
        text-decoration: none;
    }
        table a:hover, .flex-table a:hover {
            color: rgba(55, 118, 137, 0.5);
        }
        table a:visited, .flex-table a:visited {
            color: rgba(55, 118, 137, 1.0);
        }
tr, .flex-table .tr {
    border: 0px solid rgba(255, 255, 255, 0.5);
    vertical-align: middle;
}
    th, td, .flex-table .td, .flex-table .th {
        border: 2px solid rgba(255, 255, 255, 0.4);
        vertical-align: middle;
        padding: 12px 8px;
    } /*padding: 8px 8px;*/
thead th, .flex-table .thead .th {
    font-weight: 400;
    vertical-align: bottom;
    height: 3.0rem;
    border: none;
    border-bottom: 2px solid rgba(100, 100, 100, 0.1);
    background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.6));
}
    .flex-table .thead .th {
        flex-direction: column;
        display: flex;
        justify-content:end;
    }
    /*.trow th { font-weight: 600;}*/
    table > tr ,tbody tr, .flex-table :not(.thead)>.tr  { color: rgba(70, 70, 70, 0.8); background-color: rgba(243,243,243, 0.6); background: linear-gradient(1deg,rgba(240, 240, 240, 0.6), rgba(245, 245, 245, 0.6)); }
tfoot td, .flex-table .tfoot .td {
    border-bottom: 1px solid white;
    border-top: 0px solid rgba(80, 80, 80, 0.1);
    height: 3.0rem;
}
    .tdfill {background:rgba(0, 0, 0, 0.02); background: linear-gradient(0deg,rgba(0, 0, 0, 0.01), rgb(0, 0, 0, 0.09)); }

/*Table Extras*/
    .col_xs {width:96px !important;} /*6rem*/
    .col_s {width:160px !important;} /*10rem*/
    .col_m {width:240px !important;} /*15rem*/
 /*   .col_price {width:120px !important;}*/
    .col_date {width:110px !important;}
        .col_date_mico {width:130px !important;} /*If it's contains with icon*/
    .col_status {width:120px;} /*Slimmer in mobile*/
    .col_note{width:none;} /*Slimmer in mobile*/
    .btnholder{width:48px;  max-width:48px; text-align:center;} /* Used to set width for table column with button */ /*width:3.0rem;*/
    .tdheight_s td, .tdheight_s .td  {padding: 6px 8px !important;}
    .tdheight_sm td, .tdheight_sm .td {padding: 8px 8px !important;}
    .tdheight_m td, .tdheight_m .td {padding: 10px 8px !important;}
    .tbright td {border-color: rgba(0,0,0, 0.0)} /*USED IN TAGGAR*/
    .tbright tr, .tbright list-row {border-color: rgba(0,0,0, 0.8)} 
    .tbright tbody tr:nth-of-type(2n+1), .tbright > tr:nth-of-type(2n+1),.tbright tbody tr:nth-of-type(2n+1), .tbright .list-group > list-row:nth-of-type(2n+1), .tbright > list-row:nth-of-type(2n+1) {background: rgba(248,248,248, 0.8)} 
    .tbright tbody tr:nth-of-type(2n+2), .tbright > tr:nth-of-type(2n+2), .tbright .list-group > .list-row:nth-of-type(2n+2) , .tbright > .list-row:nth-of-type(2n+2)  {background: rgba(250,250,250, 0.8)} 
    .striped tbody tr:nth-of-type(2n+1), .striped > tr:nth-of-type(2n+1), .striped .list-group > .list-row:nth-of-type(2n+1), .striped > .list-row:nth-of-type(2n+1) {background: linear-gradient(1deg,rgba(230, 230, 230, 0.6), rgba(235, 235, 235, 0.6)); } 
    .striped tbody tr:nth-of-type(2n+2), .striped > tr:nth-of-type(2n+2), .striped .list-group > .list-row:nth-of-type(2n+2), .striped > .list-row:nth-of-type(2n+2) {background: linear-gradient(1deg,rgba(248, 248, 248, 0.6), rgba(255, 255, 255, 0.6)); }
.noticeme tbody tr {
    background: linear-gradient(5deg,rgb(194, 159, 61, 0.20), rgb(232, 200, 77, 0.20) 50%);
} 

/*Reversed - NOT USED?!*/
    .stripedgray tbody tr:nth-of-type(2n+1), .stripedgray > tr:nth-of-type(2n+1) {background-color:  rgba(0,0,0, 0.02)} 
    .stripedgray tbody tr:nth-of-type(2n+2), .stripedgray > tr:nth-of-type(2n+2) {background-color:  rgba(0,0,0, 0.02)}
    /*   tfoot td {color: rgba(64, 64, 64, 0.7); border-top: 1px solid rgba(80, 80, 80, 0.2); }
        .tbfill td {color: rgba(64, 64, 64, 1.0); background: linear-gradient(3deg,rgba(100, 100, 100, 0.2), rgba(120, 120, 120, 0.2));}*/
    .hiddencolumn {display: none;} /*Exportable table*/

    /*---- Scale up preview ----*/
.img-prv {
    transition: transform 0.2s ease-in-out; /* Smooth transition for the scaling */
    cursor: pointer;
}
    .img-prv:hover {
        transform: scale(3); /* Scale the image up by 3 times when hovered */
        position: relative; /* Ensure it can be layered above other elements */
        z-index: 100000; /* Bring the image to the front */
        position:absolute;
    }
/*---- Scale up preview - END ----*/


@container main-content (max-width: 850px) {
    .hidem850 {display: none;}
}
@container main-content (max-width: 650px) {
    .hidem650 {display: none;}
}
@container main-content (max-width: 500px) {
    .hidem500 {display: none;}
}
@media screen and (max-width:850px) {
    .hide850 {display: none;}

    th, td {padding: 8px 4px;}
    .col_xs {max-width: 70px;}/* För org-produkter, ej nödvändig*/
    .col_status {max-width: 52px;}
    .btnholder {width: 40px; max-width:40px;}
    tr .status span {display: none;} /*Hides thead status text*/
    tr .status {text-align:center; } /*Hides thead status text*/
    
   /* .info-box.content-padd {padding: 0px 0px;} */
}

@media screen and (max-width:650px) {
    .hide650 {display: none;}
}
@media screen and (max-width:500px) {
    .hide500 {display: none;}
}

@media screen and (max-width:450px) {
    td { padding: 8px 2px; font-family: var(--title-font);}
    .padded {padding: 10px;} /*2025-02-01 added for log-in box, dont't know ho much it effects*/
    .paddedw {padding-right: 10px; padding-left: 10px;} 
}

@media screen and (max-width:380px) {
    td, th {
        padding: 8px 2px;
        font-size: 0.7rem !important;
    }
    .col_status {max-width: 44px;}
    .btnholder {width: 30px; max-width:30px;}
}