pre{ font-size: 70%; }
    body.p2-v2{
        background: #071114;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        padding: 1em;
    }
    body.p2-v2.light{
        background: gainsboro;
        color: black;
        font-family: Arial, Helvetica, sans-serif;
    }
    body.p2-v2.light .dark-only,
    body.p2-v2:not(.light) .light-only{ display: none; }

    body.p2-v2 .category-container{
        background: #021610;
        border: 1px solid #2a363b;
        max-width: 100%;
        padding: 0 1rem;
        padding-bottom: 1rem;

        position: relative;
    }
    body.p2-v2.light .category-container{
        background: floralwhite;
        border: 1px solid lightgray;
    }

    body.p2-v2 .chart-data-container{
        background: #000905;
        border: 1px solid #3e4b49;
        width: 300px;
        height: fit-content;
        opacity: 1;
    }
    body.p2-v2.light .chart-data-container{
        background: whitesmoke;
        border: 1px solid lightgray;
    }


    .counter-block{
        background: white;
        color: #071114;
        padding: 4px 16px;
        margin-left: 4px;
    }
    .light .counter-block{
        background: black;
        color: gainsboro;
    }

    .light .light-invert{ filter: invert(); }

    .p2-v2 .hidden { display: none; }
    .p2-v2 header h3,
    .p2-v2 header h5{ margin: 0; }
    .p2-v2 .category-container{
        margin-top: 24px;
        min-height: 72px;
    }

    .p2-v2 header > h3,
    .p2-v2 main header > h5{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .p2-v2 header h3 sup#version{
        font-size: 40%;
        opacity: 0.25;
        vertical-align: text-top;
    }

    .p2-v2 #opcije-sucelja, .p2-v2 #smjena-container{
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .p2-v2 header{
        display: flex;
        justify-content: space-between;
        padding: 4px 24px;
        position: sticky;
        top: 0;
        z-index: 5;
        margin-bottom: -12px;
    }
    .p2-v2 header::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -2;
        background: rgba(0, 0, 0, 0.4);
    }
    .p2-v2 > header{ z-index: 10; }
    .p2-v2.light header::before{
        background: rgba(255, 255, 255, 0.4);
    }
    .p2-v2 main header{ top: 58px; margin: 0; margin-bottom: 12px; }
    .p2-v2 header .nalog-azuriranje{ margin: auto 0 auto auto; }

    .p2-v2 .chart-container{
        background: #000905;
        border: 1px solid #3e4b49;
        width: 300px;
        height: fit-content;
    }
    .p2-v2.light .chart-container { 
        background: whitesmoke;
        border: 1px solid lightgray;
    }
    .p2-v2 .chart-container.timeline{ width: 100%; height: 700px; }
    .p2-v2 .chart-container.bar{ width: 260px; height: 500px; }
    .p2-v2 .chart-container.inactive{ opacity: 0.4; }
    .p2-v2 .output{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 1em;
        gap: 12px;
    }
    

    /* loading ajax icon */
    .loading > *:not(.lds-icon, .group-container-loading){ opacity: 0.2; }
    .group-container-loading{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .loading .group-container-loading{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .lds-icon{ display: none; }
    .loading .lds-icon {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }
    .loading .lds-icon div {
        display: inline-block;
        position: absolute;
        left: 8px;
        width: 16px;
        background: white;
        animation: lds-icon-anim 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    }
    .lds-icon div:nth-child(1){ left: 8px; animation-delay: -0.24s; }
    .lds-icon div:nth-child(2){ left: 32px; animation-delay: -0.12s; }
    .lds-icon div:nth-child(3){ left: 56px; animation-delay: 0; }
    @keyframes lds-icon-anim {
        0% { top: 8px; height: 64px; }
        50%, 100% { top: 24px; height: 32px; }
    }

    .light .loading .lds-icon div{ background: black; }
    .light .error-area.active{ background: rgba(255, 255, 255, 0.8); }




    /* NEW timeline view */
    #timeline-dialog{
        z-index: 1;
        right: 100%;
        margin-left: 24px;
        margin-top: -14px;

        border: 1px solid #3e4b49;
        background: #000905;
    }

    #timeline-dialog .timeline-smjena-container{ display: flex; }
    #timeline-dialog .timeline-smjena-container,
    #timeline-dialog .ui-datepicker-title{ color: white; }
    #timeline-dialog .ui-datepicker-next::after,
    #timeline-dialog .ui-datepicker-prev::after{
        content: '';
        border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        position: absolute;
        top: 50%;
        bottom: unset;
        left: unset;
        right: unset;
    }
    #timeline-dialog .ui-datepicker-next.ui-state-hover.ui-datepicker-next-hover,
    #timeline-dialog .ui-datepicker-prev.ui-state-hover.ui-datepicker-prev-hover{ background: white; }
    #timeline-dialog .ui-datepicker-next.ui-state-hover.ui-datepicker-next-hover::after,
    #timeline-dialog .ui-datepicker-prev.ui-state-hover.ui-datepicker-prev-hover::after{ border-color: black; }
    #timeline-dialog .ui-datepicker-next::after{ transform: translatey(-50%) rotate(-45deg); right: 50%; }
    #timeline-dialog .ui-datepicker-prev::after{ transform: translatey(-50%) rotate(135deg); left: 50%; }
    #timeline-dialog .ui-datepicker-next.ui-state-disabled::after,
    #timeline-dialog .ui-datepicker-prev.ui-state-disabled::after{ border-color: rgba(255, 255, 255, 0.4); }

    #timeline-dialog .ui-datepicker-unselectable{ opacity: 0.4; }

    .timeline-smjena-group{
        display: flex;
        margin: auto;
        margin-right: unset;
    }
    .timeline-smjena-btn{
        padding: 0.25rem 1rem;
        font-weight: bold;
        cursor: pointer;
    }
    .timeline-smjena-btn.active{
        background: white;
        color: black;
    }

    #timeline-dialog .ui-datepicker-inline{
        border: 1px solid #3e4b49;
        background: #042d21;
    }
    #timeline-dialog .ui-datepicker-inline .ui-datepicker-header{
        border: 1px solid #3e4b49;
        background: #000905;
    }
    #timeline-dialog .ui-datepicker-inline td a.ui-state-default{
        background: #064432;
        color: white;
    }
    #timeline-dialog .ui-datepicker-inline td a.ui-state-active{
        border: 1px solid green;
        background: lightgreen;
        color: black;
    }
    #timeline-dialog .ui-datepicker-inline td a.ui-state-default.ui-state-highlight{
        border: 1px solid gray;
        background: white;
        color: black;
    }
    #timeline-dialog .ui-datepicker-inline td.ui-state-disabled span{
        background: unset;
        color: white;
    }
    #timeline-dialog .timeline-btn{
        background: transparent;
        border: 2px solid white;
        color: white;

        display: block;
        text-decoration: unset;
        
        text-align: center;
        font-weight: bold;
        margin-top: 8px;
        padding: 2px;
        cursor: pointer;
    }
    #timeline-dialog .timeline-btn:hover{
        background: white;
        color: black;
    }

    .p2-v2.light #timeline-dialog{
        border: 1px solid lightgray;
        background: whitesmoke;
    }
    .p2-v2.light #timeline-dialog .ui-datepicker-inline{
        border: 1px solid lightgray;
        background: #e2e5f4;
    }
    .p2-v2.light .timeline-smjena-btn{ color: black; }
    .p2-v2.light .timeline-smjena-btn.active{
        background: black;
        color: white;
    }
    .p2-v2.light #timeline-dialog .timeline-smjena-container,
    .p2-v2.light #timeline-dialog .ui-datepicker-title{ color: black; }
    .p2-v2.light #timeline-dialog .ui-datepicker-next::after,
    .p2-v2.light #timeline-dialog .ui-datepicker-prev::after{
        border: solid black;
        border-width: 0 3px 3px 0;
    }
    .p2-v2.light #timeline-dialog .ui-datepicker-next.ui-state-hover.ui-datepicker-next-hover,
    .p2-v2.light #timeline-dialog .ui-datepicker-prev.ui-state-hover.ui-datepicker-prev-hover{ background: black; }
    .p2-v2.light #timeline-dialog .ui-datepicker-next.ui-state-hover.ui-datepicker-next-hover::after,
    .p2-v2.light #timeline-dialog .ui-datepicker-prev.ui-state-hover.ui-datepicker-prev-hover::after{ border-color: white; }
    .p2-v2.light #timeline-dialog .ui-datepicker-next.ui-state-disabled::after,
    .p2-v2.light #timeline-dialog .ui-datepicker-prev.ui-state-disabled::after{ border-color: rgba(0, 0, 0, 0.4); }

    .p2-v2.light #timeline-dialog .ui-datepicker-inline .ui-datepicker-header{
        border: 1px solid grey;
        background: #e2e5f4;
    }
    .p2-v2.light #timeline-dialog .ui-datepicker-inline td a.ui-state-default{
        background: #abb3df;
        color: black;
    }
    .p2-v2.light #timeline-dialog .ui-datepicker-inline td a.ui-state-default.ui-state-highlight{
        background: black;
        color: white;
    }
    .p2-v2.light #timeline-dialog .ui-datepicker-inline td a.ui-state-active{
        border: 1px solid blue;
        background: navy;
        color: white;
    }
    .p2-v2.light #timeline-dialog .ui-datepicker-inline td.ui-state-disabled span{
        border: 1px solid grey;
        color: black;
    }
    .p2-v2.light #timeline-dialog .timeline-btn{
        border: 2px solid black;
        color: black;
    }
    .p2-v2.light #timeline-dialog .timeline-btn:hover{
        background: black;
        color: white;
    }