.page-header { /*same as ref color*/
    position:relative;
    border-bottom: 5px solid;
    border-color: var(--t_overview-color-pl);
    /*    background: linear-gradient(120deg,rgb(10, 114, 182, 0.15) 30%,rgba(232, 139, 237, 0.15),rgba(119, 167, 59, 0.15) 90%);*/
    /*    background: linear-gradient(120deg,rgb(255, 255, 255, 0.80) 10%, rgb(206, 224, 243, 0.80) 30%,rgb(243, 212, 245, 0.2),rgb(200, 228, 166, 0.4) 80%);*/
    /*    background-size: 150% 150%;
    animation: gradient-animation 20s ease infinite;*/
}
.page-header::after {
    content: "";
    z-index:-1;
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-image: url(../images/tats/tat_dash.png);
    background-position: right center;
    background-repeat: no-repeat;
}

.headitems a {
    font-size:0.9rem;
    color: #000;
    padding: 10px;
}
.headitems a:hover {
    color: #878787;
}
/*.sback::before {
content: "";
position: absolute;
display: block;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(100deg,#0aa2b6,#e88bed,#77a73b);
background-size: 150% 150%;
animation: gradient-animation 30s ease infinite;
opacity: 15%;
}*/
@keyframes gradient-animation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 100%;}
    100% {background-position: 0% 50%;}
}

.pageindex .ico {
    background: var(--t_overview-color-pl);
    background: var(--t_overview-color);
}

.content-header {
    background: var(--t_overview-color-pl);
    background: var(--t_overview-color);
}

    /*sellgoal-periodselect*/
 /*   .content-header .btn-toolbar {
        display: flex;
        align-items:center;
    }*/
.content-header select { margin-right: 5px;}

.sitemap {display: flex; flex-wrap: wrap;}
.sitemapitem {flex-grow: 1; width: 25%; padding: 1rem}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    padding: 20px;
    padding-top: 10px;
}
    .grid-container .sysmsg, .grid-container .item2 {position:relative;}

    .grid-container > div {
        flex: 1;
        flex-grow: 1; flex-shrink: 1; flex-basis: 0;
        margin: 10px;
        /*flex-basis: calc(25% - 20px);*/
        flex-basis: calc(33.33% - 20px);
        justify-content:space-between;
        /*min-height:400px;*/
        /*padding-bottom:40px;*/
        /*position:relative;*/
        min-width:220px;
    }
    /* Generic dashboard size classes */
    .grid-container > .dash-size-normal  { flex: 1 1 calc(33.33% - 20px); min-width: 220px; }
    .grid-container > .dash-size-wide    { flex: 1 1 calc(66.66% - 20px); min-width: 220px; position: relative; }
    .grid-container > .dash-size-full    { flex: 1 1 100%; }
    .grid-container > .dash-group        { flex: 1 1 calc(33.33% - 20px); min-width: 220px;
                                           display: flex; flex-direction: column; gap: 0; margin-top: 0 !important;
                                           align-items: stretch; align-content: stretch; justify-items: stretch; justify-content: stretch; }
    .dash-group > .content-box           { flex-basis: 100%; margin: 10px 0 0 0; min-height: 170px; }
        .grid-container > div .content-padd {
            height: 333px;
            min-height: calc(100% - 78px);
        }
    .grid-container .content-padd.wide {
        padding-left: 0px;
        padding-right: 0px;
    }
    .grid-container .content-padd.nopadd {
        padding: 0px;
    }
    .grid-container > div .list {
        /*height: 330px;*/
        overflow-y: auto;
        /*min-width:300px;*/
    }
        .grid-container > div .list table {
            /*Table layout fixed so we can cut text*/
            table-layout:fixed;
        }
        .grid-container > div .list .datetd {
            width:90px;
        }
        .grid-container > div .list .profilepictd {
            width: 30px;
            vertical-align: middle;
        }
            .grid-container > div .list .profilepictd img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                vertical-align:middle;
            }

    /*... if first column in list has long text.*/
        /*.grid-container > div .list td:first-child*/
         .grid-container > div .list .cuttxt {
            display: block;
            /*width: 200px;*/
            width: 100%; /*calc(100% - 30px);*/
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .grid-container > div .list .hideover {
            overflow: hidden;
            max-height: 20px;
            max-width: 100%;
        }
        .grid-container > div .list .hideover span {
            white-space: nowrap;
            display:inline-block;
        }
         
        /*.grid-container > div .list .cuttxt .cutfull {
            width: calc(100% - 20px);
        }*/

        /*Update history breaking change*/
        .grid-container > div .list .cuttxt.breaking {
            font-weight:bold;
            color:red;
        }
    
    .grid-container .stats {
        /*flex-basis: calc(50% - 20px);*/
    }
    /*.grid-container .org, .grid-container .prod, .grid-container .contr {*/
        /*min-width: 20%;*/
        /*flex-basis: 20%;
    }*/
    .grid-container .help {
        /*min-width:100%;*/
        flex-basis:100%;
    }
    .grid-container .updates {
        flex-basis: 100%;
    }
/*--== MESSAGES ==--*/
.grid-container .sysmsg {
    /*min-width: 50%;*/
    /*flex-basis: calc(75% - 20px);*/
    flex-basis: calc(66.66% - 20px);
}
.sysmsg .msgbody {
    position: relative;
    min-height: 240px;
    max-height: 240px;
    overflow: hidden;
    background-color: white;
    border-radius: 5px 5px 0px 0px;
    padding: 10px;
    /*transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, max-height 0.7s ease-in-out;*/
}
.sysmsg.expanded .msgbody {
    max-height: max-content;

}
.sysmsg .msgbody .date {
    position:absolute;
    top:5px;
    right:10px;
    color:rgba(120,120,120,1.0)
}
.sysmsg .msgexpand {
    text-align: center;
    position: relative;
    margin-top: -15px;
}
    .sysmsg .msgexpand::before {
        content: '';
        position: absolute;
        top: 50%;
        display: block;
        width: 100%;
        height: 1px;
        background-color: #e0e0e0;
        box-shadow: 0px -2px 5px 0px rgba(255,255,255,1.0);
        /*    background-color: #ffffff;
        box-shadow: 0px 3px 10px 0px rgba(40,40,40,0.4);*/
    }
    .sysmsg .msgexpand button {
        height: 30px;
        line-height: 20px;
        position: relative;
        border-radius: 15px;
        background-color: #efefef;
        color: var(--text-color-onbright);
        padding: 5px 12px 2px 18px;
        font-size: var(--main-font-size_s);
        border: 1px solid #ffffff;
        box-shadow: 0px 1px 3px 0px rgba(40,40,40,0.2);
    }
        .sysmsg .msgexpand button:before {
            content: 'Läs mer';
            display:inline-block;
            width:auto;
            height:auto;
        }
        .sysmsg.expanded .msgexpand button:before {
            content: 'Visa mindre';
        }

        .sysmsg .msgexpand button:hover {
            background-color: #cecece !important;
        }

.sysmsg .msgexpand button::after {
    content: '';
    display: inline-block;
    background-image: url(/images/icos/actico_arrow_down.png);
    transform: rotateZ(0deg);
    filter: brightness(30%);
    height: 9px;
    transition: transform ease-in-out 0.5s;
    margin-left:10px
}
.sysmsg.expanded .msgexpand button::after {
    transform: rotateZ(-180deg);
}
.sysmsg .msglist {
    height:100px;
    padding:0px 10px;
    margin:0px 0px;
}
    .sysmsg .msglist li {
        cursor: pointer;
        padding: 5px 5px;
        border-radius: 10px;
        margin:2px 0px;
        /*border: 1px solid transparent;*/
        border-top:0px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
        .sysmsg .msglist li:hover {
            background-color: #f2f2f2;
        }
    .sysmsg .msglist li span:not(.date) {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .sysmsg .msglist li .date {
        flex-shrink: 0;
        color: rgba(120,120,120,1.0)
    }
        .sysmsg .msglist li.active {
            background-color: #ffffff;
           /* border: 1px solid #d9d9d9;*/
            border-top: 0px;
        }
    .sysmsg .msglist li::before {
        content: '';
        display: inline-block;
        background: url(../images/icos/ico_comment2.png) no-repeat center center;
        background-size: contain;
        filter: brightness(50%);
        height: 13px;
        width: 20px;
        margin-right:5px;
    }
.grid-container .sysmsg .content-padd {
    height: unset;
}
/*--== MESSAGES - END ==--*/
/*--== SELLGOALS ==--*/
.sellgoalsbox_container {
    margin-top: 0!important;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    align-content:stretch;
    justify-items:stretch;
    justify-content:stretch;
}
    .sellgoalsbox_container .content-box {
        flex-basis: 100%;
        margin: 10px 0 0 0;
        min-height:170px;
        /*margin-left: 0;
        margin-bottom: 0;
        margin-right: 0;*/
    }
    /*.sellgoalsbox_container .content-box:first-child {
        margin-top: 10px;
    }*/
/*--== SELLGOALS - END ==--*/
canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 300px;
}

.contmarg_ud {
    margin: 4.0rem 0.0rem !important;
}

/* BOTBTN LOCKED-------------------------*/

.btnlocktobot {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width:100%;
}

.btnlocktobot_div {
    margin-bottom: 2.5rem;
}


/* GUIDE img ---------------------------*/
/*
.guideimg {
    width: 75%;
    display: block;
    margin: auto;
}*/

/*Box loading*/
.content-box.loading {
    -webkit-animation: wait_loading_anim 2s infinite alternate;
    animation: wait_loading_anim 1s infinite alternate;
    transition: ease-in-out;
    filter:grayscale();

}
.content-box.loading .content-padd::before
{
    content:'Laddar..';
}
/*No rows message*/
.boxemptyhelp {
    padding-left: 10px;
    padding-right: 10px;
}
.content-box ul + .boxemptyhelp, .content-box div + .boxemptyhelp {
    display: none;
}
.content-box:not(.loading) ul:empty + .boxemptyhelp, .content-box:not(.loading) div:empty + .boxemptyhelp {
    display: block;
}
/*--- Expanable rows with tables ------------------*/

.expandable-item {
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5;
    margin: 0px 0;
}
    .expandable-item.empty {
        cursor: default;
    }
    .expandable-item > .title {
        position: relative;
        display: flex;
        padding: 12px 10px;
        justify-content: space-between;
        transition: background-color ease-in-out 0.2s;
        /*border-bottom: 1px solid #9b9b9b;*/
    }
    .expandable-item.empty > .title span:first-child {
        color: #878787;
    }
    .expandable-item:not(.empty) > .title:hover {
        background-color: #eaeaea;
    }
    .expandable-item:not(.empty) > .title::after {
        content: '';
        position: absolute;
        top: calc(50% - 3px); /* Vertically center */
        left: calc(100% - 55px); /* Adjust based on your layout */
        /*transform: translateY(-50%);*/
        transform: rotateZ(180deg);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 5px solid black;
        transition:transform ease-in-out 0.3s;
    }
    .expandable-item.expanded:not(.empty) > .title::after {
        transform: rotateZ(0deg);
    }
    .expandable-item>.title span {
        display:block;
    }
        .expandable-item > .title span:last-child {
            background-color: #ff9978;
            border-radius: 10px;
            text-align: center;
            /*padding:0 5px;*/
            overflow: hidden;
            display: inline-block;
            width: 20px;
            font-weight:bold;
        }
    .expandable-item.empty > .title span:last-child {
        background-color: #e4ebda;
    }
        .expandable-item.empty > .title span:last-child::before {
            content: '✔';
            font-size:9px;
            filter:brightness(20%);
            display:inline-block;
        }
    .expandable-item .table-container {
        display: none;
        /*margin-top: 10px;*/
        /*padding: 0 10px;*/
    }
        .expandable-item .table-container td:first-child a::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            filter: brightness(50%);
            background: url(../images/icos/ico_symb_doc.png) no-repeat center center;
            background-size: contain;
            margin-right:8px;
            margin-bottom:-2px;
        }



/*--- Table------------------ */

    td {
        border: 0px solid rgba(255, 255, 255, 0.4);
        border-bottom: 1px solid rgba(180, 180, 180, 0.1)
    }

    /*.expandable-item .tdheight_s {
        padding: 10px 8px !important;
    }
    */

table > tr, tbody tr {
    /*font-family: Roboto Condensed;*/ /**/
    color: rgba(70, 70, 70, 0.8);
    background-color: rgba(243,243,243, 0.0);
    background: linear-gradient(1deg,rgba(240, 240, 240, 0.0), rgba(245, 245, 245, 0.0));
}

.expandable-item table > tr, tbody tr {
background-color: #f2f2f2;
}

.expandble-footer .botbtn {
    border: 0px;
    background: none;
    background-color: #eaeaea;
    background-color: #f2f2f2;
}


table .datetd, table .helpstatus {
    /*font-size: var(--table-font-size_s);*/
    font-family: var(--title-font);
}

/*--- Time line ------------------ */
.timeline {
    margin-top: 60px;
    margin-bottom:30px;
    margin-left: 10%;
    width: 80%;
    position: relative;
}
.timeline-title {
    position: absolute;
    font-size: 10px;
    color: #9b9b9b;
    top: -55px;
    left: -13%;
    text-transform:uppercase;
}
.timeline-container {
    position: relative;
    height: 20px;
    border-top: 2px solid #ccc;
}
.timeline-item {
    position: absolute;
    top: -8px; /* Just above the line */
    width: 15px;
    height: 15px;
    background-color: #3498db;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s;
}
    .timeline-item.breaking {
        background-color: #f00;
        border: 3px solid #b60606;
        width: 17px;
        height: 17px;
    }
    .timeline-item:hover {
        transform: scale(1.5);
    }

    .timeline-item::before {
        content: attr(data-date);
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        color: #333;
        font-size: 12px;
        text-align: center;
    }
    .timeline-item:before {
        display: none;
    }

@media screen and (min-width:2000px) {
    .timeline-item.prc0:before {
        display: block;
    }
}
@media screen and (min-width:600px) {
    .timeline-item.prc1:before {
        display: block;
    }
}
@media screen and (min-width:350px) {
    .timeline-item.prc2:before {
        display: block;
    }
}
    .timeline-item.prc3:before {
        display: block;
    }
.timeline-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
    /*display: none;*/
    opacity: 0;
    transition: opacity ease-in-out 0.2s, width ease-in-out 0.2s, height ease-in-out 0.2s; /*top ease-in-out 0.2s,left ease-in-out 0.2s,*/
}
/*--- Contracts canvas*/
.contractschart, .invoiceschart {
    width: 100% !important;
    height: 100% !important;
    max-height: 25px;
    z-index: 20;
}
/*--- Canvas on left, List on right ---*/
.content-box .canvalist {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    width: 100%;
    justify-content: space-between;
}
    .content-box .canvalist > * {
        max-width: 48% !important;
        width: 48% !important;
    }
    .content-box .canvalist > ul {
        align-self:center;
    }
    .content-box .canvalist li span {
        margin-left:3px;
    }
    .content-box .canvalist .chartcol {
        display:inline-block;
        width:20px;
        height:12px;
    }
/*--- Canvas on left, List on right - END ---*/

@keyframes wait_loading_anim {
    0% {
        /*background-color: inherit*/
    }

    100% {
        /*background-color: rgba(255, 255, 255, 0.6);*/
        opacity: 0.5;
    }
}

@media screen and (max-width:1000px) {
    .grid-container {
        padding:5px 10px;
    }
}

@media screen and (max-width:400px) {
    .grid-container > div .list {
        min-width: auto;
    }
}