/* ------------------------------------*\
    #RESET
\*------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
    display: block;
}

body{
    line-height: 1;
}

ol, ul{
    list-style: none;
}

blockquote, q{
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after{
        content: "";
        content: none;
    }

table{
    border-collapse: collapse;
    border-spacing: 0;
}

/* ------------------------------------*\
    #BOX-SIZING
\*------------------------------------ */
html{
    box-sizing: border-box;
}

*, *::before, *::after{
    box-sizing: inherit;
}

@font-face {
    font-family: "KAUFMANN";
    src: url("../fonts/KAUFMANN.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
/* ------------------------------------*\
    #PAGE
\*------------------------------------ */
html{
    height: 100dvh;
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    background-color: #f5f6fa;
    overflow: hidden;
}

address, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, ol, ul, figure, hr, table, fieldset{
    margin-bottom: 10px;
}

body{
    overflow: hidden;
    height: 100%;
}

img{
    max-width: 100%;
}

i{
    font-style: italic;
}

strong{
    font-weight: 700;
}

p{
    font-size: 14px;
    line-height: 1.3;
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

main{
    position: relative;
    z-index: 10;
}

i{
    font-style: italic;
}

*::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}

*::-webkit-scrollbar-track{
    background: #e2e2e2;
    border-radius: 50px;
}

*::-webkit-scrollbar-thumb{
    border-radius: 50px;
    background: #21263c;
    width: 4.5px;
}

::-webkit-scrollbar-thumb:horizontal{
    background: #21263c;
    border-radius: 50px;
}

*{
    scrollbar-color: #21263c #e2e2e2;
    scrollbar-width: thin;
}

.table-responsive{
    overflow-x: auto;
    max-height: 100%;
    display: flex;
}

.table{
    /*min-width: 800px;*/
    display: table;
    width: 100%;
    border-radius: 8px;
    overflow: auto;
    position: relative;
}

    .table thead{
        position: sticky;
        z-index: 2;
        top: 0;
    }

    .table tbody{
        max-height: calc(100% - 64px); /* Set your desired max height */
        overflow-y: auto;
        width: calc(100% - 3px);
    }

    .table th{
        background-color: #DEDEDE;
        text-align: left;
        padding: 22px 24px;
        color: #21263C;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }

@media (max-width: 1540px) {
    .table th{
        font-size: 12px;
        line-height: 1.3;
        padding: 22px 15px;
    }
}

.table td{
    padding: 22px 0 22px 4px;
    text-align: left;
    font-size: 12px;
    line-height: 16px;
}

.table tr:nth-child(even) td{
    background-color: rgba(53, 91, 110, 0.05);
}

@media (max-width: 1540px) {
}

@media (max-width: 1540px) {
}

.table--vessels th{
    padding: 6px 0 6px 4px;
    align-content: center;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    color: #374151;
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 1540px) {
    .table--vessels th{
        font-size: 12px;
        line-height: 1.3;
        padding: 6px 5px 6px 4px;
    }
}

.table--vessels td{
    padding: 8px 0 8px 4px;
    font-size: 12px;
    color: #000;
    vertical-align: middle;
}

    .table--vessels td p{
        color: #000;
        font-size: 12px;
    }

@media (max-width: 1540px) {
    .table--vessels td{
        font-size: 10px;
        line-height: 1.3;
        padding: 8px 0 8px 4px;
    }

        .table--vessels td p{
            font-size: 10px;
        }
}

.table--vessels .line{
    width: 8px;
    height: 32px;
    display: block;
    float: left;
    margin-right: 4px;
}

.table--vessels .line--yellow{
    background-color: #edad51;
}

.table--vessels .line--purple{
    background-color: #752145;
}

.table--vessels .line--orange{
    background-color: #ec7a62;
}

.table--vessels .td-col-bg{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

.table.table--vessels tbody tr:not(.blue-row) td.td-status-over { background-color: #cce5ff !important; } /* Svetlo plava (Prebačaj) */
.table.table--vessels tbody tr:not(.blue-row) td.td-status-ok { background-color: #d4edda !important; } /* Svetlo zelena (Tačno) */
.table.table--vessels tbody tr:not(.blue-row) td.td-status-under { background-color: #f8d7da !important; } /* Svetlo crvena (Manjak) */

.divider{
    width: 100%;
    height: 1px;
    background-color: #d9d9d9;
    margin-bottom: 12px;
}

/* ------------------------------------*\
    #HEADINGS
\*------------------------------------ */
h1, h2, h3, h4, h5, h6{
    font-family: "REM", sans-serif;
}

    h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a{
        color: inherit;
    }

h1, .h1{
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.28px;
}

h2, .h2{
    font-size: 20px;
    line-height: 1.2;
}

h3, .h3{
    font-size: 14px;
    line-height: 1.2;
}

h4, .h4{
    font-size: 28px;
    line-height: 1.2;
}

h5, .h5{
    font-size: 25px;
    line-height: 1.2;
}

h6, .h6{
    font-size: 20px;
    line-height: 1.2;
}

/* ------------------------------------*\
    #link
\*------------------------------------ */
a{
    color: #000;
    transition: color 0.3s ease;
    text-decoration: none;
}

    a:hover{
        color: black;
    }

    a:focus, a:active{
        outline: none;
        color: black;
    }

.row{
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}

    .row.reverse{
        flex-direction: row-reverse;
    }

.col.reverse{
    flex-direction: column-reverse;
}

.col-xs-12{
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

.col-xs-12{
    flex-basis: 100%;
    max-width: 100%;
}

@media only screen and (min-width: 48em) {
    .container{
        width: 46rem;
    }
}

@media only screen and (min-width: 62em) {
    .container{
        width: 61rem;
    }

    .col-md-4, .col-md-6, .col-md-12{
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .col-md-4{
        flex-basis: 33.333%;
        max-width: 33.333%;
    }

    .col-md-6{
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-12{
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 75em) {
    .container{
        width: 71rem;
    }
}
/*------------------------------------*\
    #FLEXBOX
\*------------------------------------*/
.o-flex{
    display: flex;
}

.o-flex--column{
    flex-direction: column;
}

.o-flex--center{
    align-items: center;
}

.o-flex--justify{
    justify-content: space-between;
}

.o-flex--justify-center{
    justify-content: center;
}

.o-flex--right{
    justify-content: flex-end;
}

.o-flex--auto{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

@media screen and (min-width: 1216px) {
}

.flag{
    display: flex;
    align-items: center;
    gap: 10px;
}

    .flag .icon-wrapper--big{
        min-width: 80px;
        width: 80px;
        height: 80px;
        /*border-radius: 50%;*/
        overflow: hidden;
    }

        .flag .icon-wrapper--big img{
            width: 100%;
        }

/**
* Reset input styles.
*/
.input{
    -webkit-appearance: none;
    /* removing inner shadow on iOS inputs */
    -webkit-font-smoothing: inherit;
    box-sizing: border-box;
    transition: all 0.1s ease;
    background: none;
    border: none;
    color: #000;
    width: 100%;
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    padding: 0;
    /* remove browser defaults */
    vertical-align: middle;
    width: 100%;
}

    .input:invalid{
        box-shadow: none;
        /* fixes mozilla red outline (shadow) */
    }

    .input[readonly]{
        cursor: text;
    }

    .input::-ms-clear{
        display: none;
        /* remove IE clear icon */
    }

    .input:not(:disabled).error{
        border-color: #F62C2C;
    }

    .input:not(:disabled):focus{
        outline: none;
    }

.input--primary{
    height: 32px;
    color: #000;
    display: flex;
    font-size: 12px;
    align-items: center;
    background-color: transparent;
    padding: 0 16px;
    border: 1px solid #355B6E;
    border-radius: 8px;
    /**
   * @disabled
   */
}

    .input--primary:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

.input--secondary{
    height: 32px;
    color: #000;
    display: flex;
    font-size: 12px;
    align-items: center;
    background-color: transparent;
    padding: 0 16px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    /**
   * @disabled
   */
}

    .input--secondary:not(:disabled):focus{
        border-color: #408DFB;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .input--secondary:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

.input--fourth{
    height: 48px;
    color: #000;
    display: flex;
    font-size: 16px;
    align-items: center;
    background-color: #FFF;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #E4E7EC;
    box-shadow: 0px 1px 2px 0px rgba(21, 28, 36, 0.05);
    /**
   * @disabled
   */
}

    .input--fourth:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

.input-box{
    margin-bottom: 20px;
    position: relative;
}

    .input-box p:not(.error){
        margin-bottom: 4px;
        /*font-weight: 500;*/
        font-size: 14px;
        color: #141C25;
        text-shadow: 0px 1px 2px rgba(20, 28, 36, 0.04);
    }

    .input-box span.error{
        color: #F62C2C;
        font-size: 14px;
        margin-top: 5px;
    }

        .input-box span.error svg{
            margin-right: 5px;
        }

.input-box{
    margin-bottom: 20px;
    position: relative;
}

.input-icon.active .eye-open{
    display: block;
}

.input-icon.active .eye-close{
    display: none;
}

.input-dropdown{
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 6;
    transform: translate(-50%, -14px);
    width: 663px;
    max-width: 80%;
    padding: 8px 16px 16px;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 136px 42px 40px 0px rgba(201, 201, 201, 0), 87px 27px 37px 0px rgba(201, 201, 201, 0.01), 49px 15px 31px 0px rgba(201, 201, 201, 0.05), 22px 7px 23px 0px rgba(201, 201, 201, 0.09), 5px 2px 13px 0px rgba(201, 201, 201, 0.1);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

    .input-dropdown.active{
        visibility: visible;
        opacity: 1;
    }

    .input-dropdown .input{
        font-size: 12px;
        color: #000;
    }

    .input-dropdown ul{
        margin-bottom: 0;
        overflow: auto;
        max-height: 200px;
    }

        .input-dropdown ul a{
            font-size: 12px;
            color: #000;
        }

        .input-dropdown ul li{
            margin-bottom: 10px;
        }

.button{
    -webkit-font-smoothing: inherit;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: #000;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    transition: all 0.2s ease;
    background-color: transparent;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    line-height: 1;
}

    .button:not(:disabled):active{
        outline: none;
        box-shadow: none !important;
        text-decoration: none;
    }

    .button:disabled{
        opacity: 0.5;
        cursor: not-allowed !important;
    }

@media (max-width: 480px) {
    .button{
        min-width: 0 !important;
        width: 100%;
    }
}

.button--primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    background: #408DFB;
    min-width: 144px;
}

    .button--primary:not(:disabled):hover, .button--primary:not(:disabled):focus, .button--primary:not(:disabled):active{
        color: #fff;
        background-color: #0e6ffa;
    }

.button--secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #408DFB;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    min-width: 144px;
}

    .button--secondary:not(:disabled):hover, .button--secondary:not(:disabled):focus, .button--secondary:not(:disabled):active{
        color: #ffffff;
        background-color: #408DFB;
    }

.button--third{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #000;
    border-radius: 8px;
    border: 1px solid #408DFB;
    background-color: #fff;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    min-width: 144px;
}

    .button--third:not(:disabled):hover, .button--third:not(:disabled):focus, .button--third:not(:disabled):active{
        color: #ffffff;
        background-color: #408DFB;
    }

.button--danger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #fff;
    border-radius: 8px;
    background-color: #FF4D4D;
    font-size: 12px;
    text-decoration: none;
    min-width: 144px;
}

    .button--danger:not(:disabled):hover, .button--danger:not(:disabled):focus, .button--danger:not(:disabled):active{
        color: #ffffff;
        background-color: #e60000;
    }

.button--success{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 32px;
    width: auto;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    background: lightseagreen;
    min-width: 144px;
}

    .button--success:not(:disabled):hover, .button--success:not(:disabled):focus, .button--success:not(:disabled):active{
        color: #fff;
        background-color: seagreen;
    }

.modal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
}

    .modal.active{
        visibility: visible;
        opacity: 1;
    }

.modal__overlay{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.modal__content{
    border-radius: 8px;
    background: #FFF;
    position: relative;
    z-index: 2;
    width: 670px;
    padding: 24px;
}

    .modal__content .close{
        position: absolute;
        top: 24px;
        right: 24px;
    }

    .modal__content h2{
        margin-bottom: 30px;
    }

.modal--error .modal__content{
    width: 414px;
    padding: 16px 24px 24px;
    border-radius: 24px;
}

    .modal--error .modal__content .button{
        height: 48px;
        font-size: 16px;
        width: 182px;
    }

main{
    height: 100%;
    display: flex;
}

.auth{
    background-color: #F5F6FA;
    display: flex;
    height: 100dvh;
    width: 100%;
}

    .auth form{
        min-width: 382px;
        margin-bottom: 30px;
    }

    .auth .button{
        height: 48px;
        font-size: 16px;
        font-weight: 400;
    }

    .auth .text{
        max-width: 624px;
        text-align: center;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #637083;
    }

        .auth .text a{
            color: #637083;
        }

.form-wrapper{
    background-color: #F5F6FA;
    flex: 1 1 50%;
    overflow: auto;
    padding: 50px;
    min-width: 50%;
}

.slider-wrapper{
    background-color: #21263C;
    flex: 1 1 50%;
    min-width: 50%;
}

.aside{
    flex: 1 1 316px;
    background-color: #21263c;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

    .aside.active{
        flex: 0 0 auto;
        width: 72px;
    }

        .aside.active .flag__content{
            display: none;
        }

        .aside.active .aside__header{
            padding: 32px 12px 12px;
        }

        .aside.active .aside__heading{
            display: none;
        }

        .aside.active .aside__content{
            display: flex;
            flex-direction: column;
            padding: 28px 10px;
        }

            .aside.active .aside__content .o-flex--right{
                display: block;
                text-align: center;
            }

            .aside.active .aside__content .left-aside-trigger{
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .aside.active .aside__content .left-aside-trigger svg{
                    transform: rotate(180deg);
                }

        .aside.active .aside__list{
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #fff;
        }

        .aside.active li{
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .aside.active li a{
                padding: 0;
                height: 40px;
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .aside.active li a span{
                    display: none;
                }

.aside__header{
    background-color: #fff;
    padding: 32px 24px;
}

    .aside__header .icon-wrapper{
        min-width: 48px;
        width: 48px;
        height: 48px;
        /*border-radius: 50%;*/
        overflow: hidden;
    }

.aside__content{
    overflow: auto;
    flex: 1 1 100%;
    padding: 28px 24px;
}

.aside__heading{
    margin-bottom: 20px;
}

    .aside__heading h3{
        margin-bottom: 0;
        color: #fff;
    }

.aside__list{
    margin-bottom: 20px;
}

    .aside__list a{
        color: #fff;
        font-size: 14px;
        gap: 8px;
        padding: 6px 16px;
        border-radius: 8px;
    }

        .aside__list a.active{
            background: #408dfb;
        }

.main-content{
    flex: 1 1 calc(100% - 316px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.card{
    border-radius: 16px;
    background-color: #fff;
    padding: 16px;
}

.card-heading{
    margin-bottom: 8px;
}

    .card-heading .breadcrumb{
        gap: 3px;
    }

.action-box{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

    .action-box ul{
        gap: 10px;
        margin-right: 15px;
    }

    .action-box .input-box{
        flex: 1 1 100%;
    }

        .action-box .input-box svg{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(0, -50%);
        }

.steps-nav{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 104px;
}

    .steps-nav li{
        position: relative;
    }

        .steps-nav li.active .circle{
            background-color: #408dfb;
        }

        .steps-nav li.active:before{
            background-color: #408dfb !important;
        }

        .steps-nav li .circle{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #d9d9d9;
            transition: all 0.3s ease-in-out;
        }

        .steps-nav li:not(:last-child):before{
            position: absolute;
            left: 100%;
            top: 50%;
            width: 98px;
            height: 1px;
            content: "";
            transition: all 0.3s ease-in-out;
            background-color: #d9d9d9;
            margin-left: 3px;
        }

        .steps-nav li span{
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translate(-50%, 10px);
            color: #000;
            font-size: 12px;
            white-space: nowrap;
        }

.aside-trigger{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #EDAD51;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .aside-trigger .trigger-icon2{
        display: none;
    }

    .aside-trigger.active .trigger-icon1{
        display: none;
    }

    .aside-trigger.active .trigger-icon2{
        display: block;
    }

.grid{
    display: flex;
    gap: 10px;
    height: calc(100% - 164px);
}

    .grid .card{
        width: 100%;
    }

    .grid .grid-row p{
        font-size: 12px;
        white-space: nowrap;
    }

    .grid .grid-row .input-box{
        margin-top: 20px;
    }

    .right-aside.active{
        visibility: visible;
        opacity: 1;
    }

.pagination{
    margin-bottom: 0;
    gap: 4px;
}

    .pagination li{
        display: flex;
        align-items: center;
    }

    .pagination a{
        display: flex;
        align-items: center;
    }

    .pagination span{
        white-space: nowrap;
        color: #637083;
        font-size: 12px;
        margin: 0 4px;
    }

.tabs{
    gap: 24px;
    display: inline-flex;
    border-bottom: 3px solid #F5F7F8;
}

    .tabs a{
        color: #D9D9D9;
        font-size: 20px;
        line-height: 28px;
        padding: 4px 0;
        position: relative;
    }

        .tabs a:before{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            content: "";
            background-color: #21263c;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .tabs a.active{
            font-weight: 700;
            color: #21263c;
        }

            .tabs a.active:before{
                visibility: visible;
                opacity: 1;
            }

.owl-carousel .item{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    padding-bottom: 135px;
}

    .owl-carousel .item img{
        width: initial;
        max-width: 100%;
        height: auto;
    }

    .owl-carousel .item h1{
        color: #fff;
        margin-top: 60px;
        margin-bottom: 15px;
    }

    .owl-carousel .item p{
        font-size: 16px;
        color: #fff;
        margin-bottom: 0;
    }

.owl-carousel .owl-dots{
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 60px;
}

    .owl-carousel .owl-dots .owl-dot.active span{
        background-color: #fff;
    }

    .owl-carousel .owl-dots span{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #fff;
        display: block;
    }

.timeline-wrapper .icon-wrapper{
    background-color: #fff;
    margin-right: 26px;
    margin-top: 12px;
    padding: 4px 0;
}

.timeline-wrapper .content-wrapper{
    border-radius: 16px;
    background: #F5F7F8;
    padding: 16px;
    width: 100%;
}

    .timeline-wrapper .content-wrapper .divider{
        margin: 8px 0;
    }

    .timeline-wrapper .content-wrapper p:last-child{
        margin-bottom: 0;
    }

.u-text-center{
    text-align: center !important;
}

.u-text-right{
    text-align: right !important;
}

.relative{
    position: relative !important;
}

.w-100{
    width: 100%;
}

.h-100{
    height: 100%;
}

.max-h-100{
    max-height: 100%;
}

.min-h-100{
    min-height: 100%;
}

.min-w-100px{
    min-width: 100px;
}

.min-w-150px{
    min-width: 150px;
    text-wrap: auto !important;
}

.w-150px{
    width: 150px;
    text-wrap: auto !important;
}

.w-fullwidht-minus-150px{
    width: Calc(100% - 150px);
}

.clr-white{
    color: #fff !important;
}

.clr-blue{
    color: #408DFB !important;
}

/* ------------------------------------*\
    #TRUMPS - SPACING
\*------------------------------------ */
/**
 * Margin and padding helper classes. Use these to tweak layout on a micro
 * level.
 *
 * `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
 */
/**
      * Margin helper classes.
      *
      * Add margins.
      */
.m{
    margin: 20px !important;
}

.mt{
    margin-top: 20px !important;
}

.mr{
    margin-right: 20px !important;
}

.mb{
    margin-bottom: 20px !important;
}

.ml{
    margin-left: 20px !important;
}

.mh{
    margin-right: 20px !important;
    margin-left: 20px !important;
}

.mb---{
    margin-bottom: calc(20px / 8) !important;
}

.ml---{
    margin-left: calc(20px / 8) !important;
}

.mt--{
    margin-top: calc(20px / 4) !important;
}

.mr--{
    margin-right: calc(20px / 4) !important;
}

.mb--{
    margin-bottom: calc(20px / 4) !important;
}

.ml--{
    margin-left: calc(20px / 4) !important;
}

/**
      * Add small margins.
      */
.m-{
    margin: calc(20px / 2) !important;
}

.mt-{
    margin-top: calc(20px / 2) !important;
}

.mr-{
    margin-right: calc(20px / 2) !important;
}

.mb-{
    margin-bottom: calc(20px / 2) !important;
}

.ml-{
    margin-left: calc(20px / 2) !important;
}

/**
      * Add large margins.
      */
.m\+{
    margin: calc(20px * 2) !important;
}

.mt\+{
    margin-top: calc(20px * 2) !important;
}

.mr\+{
    margin-right: calc(20px * 2) !important;
}

.mb\+{
    margin-bottom: calc(20px * 2) !important;
}

.ml\+{
    margin-left: calc(20px * 2) !important;
}

.mh\+{
    margin-right: calc(20px * 2) !important;
    margin-left: calc(20px * 2) !important;
}

/**
      * Add huge margins.
      */
.m\+\+{
    margin: calc(20px * 4) !important;
}

.mt\+\+{
    margin-top: calc(20px * 4) !important;
}

.mr\+\+{
    margin-right: calc(20px * 4) !important;
}

.mb\+\+{
    margin-bottom: calc(20px * 4) !important;
}

.ml\+\+{
    margin-left: calc(20px * 4) !important;
}

.mh\+\+{
    margin-right: calc(20px * 4) !important;
    margin-left: calc(20px * 4) !important;
}

/**
      * Remove margins.
      */
.m0{
    margin: 0 !important;
}

.mt0{
    margin-top: 0 !important;
}

.mr0{
    margin-right: 0 !important;
}

.mb0{
    margin-bottom: 0 !important;
}

.ml0{
    margin-left: 0 !important;
}

/**
      * Negative margins.
      */
.-m{
    margin: calc(20px * -1) !important;
}

.-mt{
    margin-top: calc(20px * -1) !important;
}

.-mr{
    margin-right: calc(20px * -1) !important;
}

.-mb{
    margin-bottom: calc(20px * -1) !important;
}

.-ml{
    margin-left: calc(20px * -1) !important;
}

.-mh{
    margin-right: calc(20px * -1) !important;
    margin-left: calc(20px * -1) !important;
}

.-mv{
    margin-top: calc(20px * -1) !important;
    margin-bottom: calc(20px * -1) !important;
}

/**
      * Tiny negative margins.
      */
.-m--{
    margin: calc(calc(20px / 4) * -1) !important;
}

.-mt--{
    margin-top: calc(calc(20px / 4) * -1) !important;
}

.-mr--{
    margin-right: calc(calc(20px / 4) * -1) !important;
}

.-mb--{
    margin-bottom: calc(calc(20px / 4) * -1) !important;
}

.-ml--{
    margin-left: calc(calc(20px / 4) * -1) !important;
}

.-mh--{
    margin-right: calc(calc(20px / 4) * -1) !important;
    margin-left: calc(calc(20px / 4) * -1) !important;
}

.-mv--{
    margin-top: calc(calc(20px / 4) * -1) !important;
    margin-bottom: calc(calc(20px / 4) * -1) !important;
}

/**
      * Small negative margins.
      */
.-m-{
    margin: calc(calc(20px / 2) * -1) !important;
}

.-mt-{
    margin-top: calc(calc(20px / 2) * -1) !important;
}

.-mr-{
    margin-right: calc(calc(20px / 2) * -1) !important;
}

.-mb-{
    margin-bottom: calc(calc(20px / 2) * -1) !important;
}

.-ml-{
    margin-left: calc(calc(20px / 2) * -1) !important;
}

.-mh-{
    margin-right: calc(calc(20px / 2) * -1) !important;
    margin-left: calc(calc(20px / 2) * -1) !important;
}

.-mv-{
    margin-top: calc(calc(20px / 2) * -1) !important;
    margin-bottom: calc(calc(20px / 2) * -1) !important;
}

/**
      * Large negative margins.
      */
.-m\+{
    margin: calc(calc(20px * 2) * -1) !important;
}

.-mt\+{
    margin-top: calc(calc(20px * 2) * -1) !important;
}

.-mr\+{
    margin-right: calc(calc(20px * 2) * -1) !important;
}

.-mb\+{
    margin-bottom: calc(calc(20px * 2) * -1) !important;
}

.-ml\+{
    margin-left: calc(calc(20px * 2) * -1) !important;
}

.-mh\+{
    margin-right: calc(calc(20px * 2) * -1) !important;
    margin-left: calc(calc(20px * 2) * -1) !important;
}

.-mv\+{
    margin-top: calc(calc(20px * 2) * -1) !important;
    margin-bottom: calc(calc(20px * 2) * -1) !important;
}

/**
      * Huge negative margins.
      */
.-m\+\+{
    margin: calc(calc(20px * 4) * -1) !important;
}

.-mt\+\+{
    margin-top: calc(calc(20px * 4) * -1) !important;
}

.-mr\+\+{
    margin-right: calc(calc(20px * 4) * -1) !important;
}

.-mb\+\+{
    margin-bottom: calc(calc(20px * 4) * -1) !important;
}

.-ml\+\+{
    margin-left: calc(calc(20px * 4) * -1) !important;
}

.-mh\+\+{
    margin-right: calc(calc(20px * 4) * -1) !important;
    margin-left: calc(calc(20px * 4) * -1) !important;
}

.-mv\+\+{
    margin-top: calc(calc(20px * 4) * -1) !important;
    margin-bottom: calc(calc(20px * 4) * -1) !important;
}

/**
      * Padding helper classes.
      *
      * Add paddings.
      */
.p{
    padding: 20px !important;
}

.pt{
    padding-top: 20px !important;
}

.pr{
    padding-right: 20px !important;
}

.pb{
    padding-bottom: 20px !important;
}

.pl{
    padding-left: 20px !important;
}

.pt--{
    padding-top: calc(20px / 4) !important;
}

/**
      * Add small paddings.
      */
.p-{
    padding: calc(20px / 2) !important;
}

/**
      * Add large paddings.
      */
.p\+{
    padding: calc(20px * 2) !important;
}

.pt\+{
    padding-top: calc(20px * 2) !important;
}

.pr\+{
    padding-right: calc(20px * 2) !important;
}

.pb\+{
    padding-bottom: calc(20px * 2) !important;
}

.pl\+{
    padding-left: calc(20px * 2) !important;
}

/**
      * Add huge paddings.
      */
.p\+\+{
    padding: calc(20px * 4) !important;
}

.pt\+\+{
    padding-top: calc(20px * 4) !important;
}

.pr\+\+{
    padding-right: calc(20px * 4) !important;
}

.pb\+\+{
    padding-bottom: calc(20px * 4) !important;
}

.pl\+\+{
    padding-left: calc(20px * 4) !important;
}

.pr0{
    padding-right: 0 !important;
}

.pl0{
    padding-left: 0 !important;
}
/*# sourceMappingURL=app.css.map */
/*---------------Calendar-----------*/
.audit-calendar-header{
    width: 100%;
    margin-top: auto;
    margin-bottom: 5px;
    color: #fff;
}

.audit-calendar-header-row{
    display: flex;
    align-items: center;
    justify-content: start;
}

.audit-dates{
    width: 100%;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: auto;
}

.audit-lightblue-text{
    color: #abdedf;
}

.audit-lightred-text{
    color: #e41f1f;
}

.audit-sunday-text-color{
    color: #f17373;
    cursor: default !important;
}

    .audit-sunday-text-color:hover{
        background-color: transparent !important;
        color: #f17373 !important;
    }

.audit-current-date-background{
    background-color: #2c6a94;
}

.audit-w-10-center-center{
    width: 10%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.audit-day-wrapper{
    width: 10%;
    height: calc((100vw - 80px) * 0.3 *0.07);
    align-items: center;
    justify-content: center;
    display: flex;
    box-sizing: border-box;
}

.audit-day-cell{
    width: 90%;
    height: 90%;
    text-align: center;
    box-sizing: border-box;
    border-radius: 60%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2px;
    cursor: pointer;
}

    .audit-day-cell:hover{
        background-color: #8eadbd;
        color: #5ec8c9; /* #cf571d;*/
    }

    .audit-day-cell span{
        height: 16px;
        line-height: 16px;
    }

.audit-month-year{
    font-size: 28px;
    color: #000;
    margin: auto;
    cursor: pointer;
}

    .audit-month-year:hover{
        color: #5ec8c9;
    }
/*---------------!Calendar-----------*/
/*---------------Calendar picker-----------*/
.calendar-anchor-container{
    position: relative;
    display: inline-block;
}

.audit-calendar-picker-freeze-layer{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 56, 58, 0.57);
    z-index: 9001;
    overflow-y: auto;
    cursor: pointer;
}

.audit-calendar-picker-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9001;
}

.audit-calendar-picker-card{
    border-radius: 10px !important;
    position: relative;
    top: 30%;
    width: 100%;
    z-index: 9010;
    margin-right: auto !important;
    margin-left: auto !important;
    background-color: #121212db !important;
}

.audit-calendar-picker-card-body{
    width: 80%;
    margin: auto;
    padding: 5px;
}
/*---------------!Calendar picker-----------*/
.small-calendar__body{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px;
}

    .small-calendar__body .cell{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
    }

        .small-calendar__body .cell span{
            min-width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

    .small-calendar__body .cell--today span{
        color: red;
    }

    .small-calendar__body .cell--current span{
        background-color: #387fb5;
        color: #fff;
    }

    .small-calendar__body .cell.cell--gray{
        color: #7e8387;
        font-weight: 400;
    }

    .small-calendar__body .cell.cell--teal{
        color: cadetblue;
    }

    .small-calendar__body .cell--finished span{
        background-color: #07d965;
        color: #fff;
    }

    .small-calendar__body .cell span:hover{
        background-color: #0e6ffa;
    }

    .my-calendars .my-calendars-header.is-active svg{
        transform: rotate(180deg);
    }
.button--green-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #408DFB;
    border-radius: 50%;
}

    .button--green-circle:not(:disabled):hover, .button--green-circle:not(:disabled):focus, .button--green-circle:not(:disabled):active{
        background-color: #0e6ffa;
    }

    .button--green-circle img{
        height: 60%;
        width: auto;
    }

.button--red-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #e50000;
    border-radius: 50%;
}

    .button--red-circle:not(:disabled):hover, .button--red-circle:not(:disabled):focus, .button--red-circle:not(:disabled):active{
        background-color: #740000;
    }

    .button--red-circle img{
        height: 60%;
        width: auto;
    }
/******************** PDF ********************/
.video-container{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .video-container iframe, .video-container object, .video-container embed{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
/******************** PDF ********************/

.button-tooltip{
    position: relative;
    z-index: 4;
}

    .button-tooltip span{
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 3;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 18px;
        padding: 5px;
    }

    .button-tooltip:hover span{
        visibility: visible;
        opacity: 1;
    }

.button-tooltip-right{
    position: relative;
    z-index: 4;
}

    .button-tooltip-right span{
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 3;
        top: 100%;
        left: 50%;
        margin-left: -235px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 18px;
        padding: 5px;
    }

    .button-tooltip-right:hover span{
        visibility: visible;
        opacity: 1;
    }

/* ========================================= */
/* MERGED FROM: LoaderStyle.css               */
/* ========================================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bee-loader-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background: #6d9f8a9e;
    z-index: 9999;
}

.bee-loader-wrapper-JS{
    display: none;
}

.bee-loader-wrapper-JS-show{
    display: flex;
}

.bee-loader{
    position: relative;
    width: 200px;
    height: 200px;
}

    .bee-loader span{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(calc(18deg * var(--i)));
    }

        .bee-loader span::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            background: #ddc729;
            border-radius: 50%;
            transform: scale(0);
            animation: bee-loader_animate 2s linear infinite;
            animation-delay: var(--d);
        }

@keyframes bee-loader_animate {
    0% {
        transform: scale(0);
    }

    10% {
        transform: scale(1.2);
    }

    80%,100% {
        transform: scale(0);
    }
}

.bee-loader-icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: bee-loader_rotating 2s linear infinite;
    animation-delay: -1s;
}

@keyframes bee-loader_rotating {
    0% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(370deg);
    }
}

.bee-loader-icon::before{
    content: url('/images/pig.png');
    position: absolute;
    top: 150px;
    left: 175px;
    transform: rotate(251deg);
}



/* ========================================= */
/* MERGED FROM: wine2d3.css                   */
/* ========================================= */



.img-size-64, .img-size-18{
    height: auto;
}

.img-size-18{
    width: 24px;
}

.cursor-pointer{
    cursor: pointer !important;
}


/*---------------Loader---------------*/
.spinner-container{
    width: 100%;
    margin: 30px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner{
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #299d9e;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}


.cursor-pointer{
    cursor: pointer !important;
}


.table tr.blue-row{
    outline: 2px solid #21263c;
    outline-offset: -2px; /* da uđe "unutra" */
}

.table tr td{
    /*font-weight: 500;*/
    /*background-color: #EDAD51;*/
    /*color: white;*/
    padding-left: 6px;
    padding-right: 6px;
}

.table tbody tr.blue-row{
    /*transform: scale(1.01);*/
    /*box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);*/
}

.table tr.green-row td{
    /*font-weight: 500;*/
    background-color: lightgreen;
    /*color: white;*/
}

.table tbody tr.green-row{
    /*transform: scale(1.01);*/
    /*box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);*/
}

.table tr.red-row td{
    /*font-weight: 500;*/
    /*background-color: lightcoral;*/
    /*color: white;*/
}

.table tbody tr.red-row{
    /*transform: scale(1.01);*/
    /*box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);*/
}



/*---------------SweetAlert---------------*/
.swal2-container{
    z-index: 9999 !important;
}
/*---------------SweetAlert---------------*/


/******************** blazored-toast ********************/
.blazored-toast-container{
    z-index: 9999 !important;
}
/******************** blazored-toast ********************/

.border-bottom-teal{
    border-bottom: 1.5px solid #000000;
}

.w-50{
    width: 50%;
}

.h-30{
    height: 30%;
}

.h-50{
    height: 50%;
}

.w-30-px{
    width: 30px;
}


.table--vessels .line--white{
    background-color: white;
    border-color: black;
    border: solid;
    border-width: thin;
}

.border-black{
    border-color: black;
    border: solid;
    border-width: thin;
}

.selected-row-text{
    color: #f3f3f3 !important;
    background-color: #408dfb;
    border-radius: 8px;
    padding: 10px;
    font-size: 17px !important;
}

.li-selected-row-text{
    position: sticky;
    top: 0;
}

/*---------------Pagination---------------*/

.pagination-select{
    border-radius: 22px;
    background-color: #f5f5f5;
    border: 1px solid #76c6c7;
    height: 30px;
    text-align: center;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    margin: 2px;
}

.number-wrapper{
    height: 30px;
    border-radius: 22px;
    color: #444444;
    background-color: #d8d8d9;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 14px;
    white-space: nowrap;
    margin: 2px;
}

.button--blue-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #408dfb;
    border-radius: 50%;
    margin: 2px;
}

    .button--blue-circle:not(:disabled):hover, .button--blue-circle:not(:disabled):focus, .button--blue-circle:not(:disabled):active{
        background-color: #265291;
    }

    .button--blue-circle img{
        height: 60%;
        width: auto;
    }

/*---------------Pagination---------------*/


.select{
    /*width: 100%;*/
    border: 1px solid #D9D9D9;
    border-radius: 8px !important;
    font-size: 14px !important;
    height: 32px;
}

select:focus{
    border: 1px solid black !important;
}


/******************** Switch ********************/
.switch-input-wrapper label{
    display: inline-block;
    position: relative;
    height: 30px;
    width: 60px;
    background-color: #fb1919;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    border-radius: 22px;
    transition: background-color 500ms ease;
}

    .switch-input-wrapper label:after{
        content: '';
        display: block;
        height: 26px;
        width: 26px;
        position: absolute;
        top: 2px;
        right: 32px;
        border-radius: 50%;
        background-color: #e8e8e8;
        box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.15);
        transition: right 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
    }

.switch-input-wrapper input:checked + label{
    background: #408dfb;
}

    .switch-input-wrapper input:checked + label:after{
        right: 2px;
        background-color: #fff;
        box-shadow: -2px 0px 0px rgba(0, 0, 0, 0.1);
    }

.switch-input-wrapper input{
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    bottom: 0;
}

.switch-input-box label{
    line-height: 44px;
    vertical-align: middle;
}

.switch-input-wrapper span{
    position: relative;
    top: -46px;
    left: 0;
    font-size: 12px;
    letter-spacing: 1px;
    color: #095a55;
    font-weight: 500;
}

.switch-input-wrapper{
    cursor: pointer;
    height: 32px;
}
/******************** Switch ********************/
/*---------------AUDIT---------------*/
/*---------------Calendar-----------*/
.audit-calendar-header{
    width: 100%;
    margin-top: auto;
    margin-bottom: 5px;
    color: #fff;
}

.audit-calendar-header-row{
    display: flex;
    align-items: center;
    justify-content: start;
}

.audit-dates{
    width: 100%;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: auto;
}

.audit-lightblue-text{
    color: #abdedf;
}

.audit-lightred-text{
    color: #e41f1f;
}

.audit-sunday-text-color{
    color: #f17373;
    cursor: default !important;
}

    .audit-sunday-text-color:hover{
        background-color: transparent !important;
        color: #f17373 !important;
    }

.audit-current-date-background{
    background-color: #408dfb;
}

.audit-w-10-center-center{
    width: 10%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.audit-day-wrapper{
    width: 10%;
    height: calc((100vw - 80px) * 0.3 *0.07);
    align-items: center;
    justify-content: center;
    display: flex;
    box-sizing: border-box;
}

.audit-day-cell{
    width: 90%;
    height: 90%;
    text-align: center;
    box-sizing: border-box;
    border-radius: 60%;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2px;
    cursor: pointer;
}

    .audit-day-cell:hover{
        background-color: #8eadbd;
        color: #5ec8c9; /* #cf571d;*/
    }

    .audit-day-cell span{
        height: 16px;
        line-height: 16px;
    }

.audit-month-year{
    font-size: 28px;
    color: #000;
    margin: auto;
    cursor: pointer;
}

    .audit-month-year:hover{
        color: #5ec8c9;
    }


/*---------------!Calendar-----------*/
/*---------------Calendar picker-----------*/
.audit-calendar-picker-freeze-layer{
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 56, 58, 0.57);
    z-index: 9001;
    overflow-y: auto;
    cursor: pointer;
}

.audit-calendar-picker-wrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9001;
}

.audit-calendar-picker-card{
    border-radius: 10px !important;
    position: relative;
    top: 30%;
    width: 250px;
    z-index: 9010;
    margin-right: auto !important;
    margin-left: auto !important;
    background-color: #121212db !important;
}

.audit-calendar-picker-card-body{
    width: 70%;
    margin: auto;
    padding: 5px;
}
/*---------------!Calendar picker-----------*/
/*---------------AUDIT---------------*/
/******************** Popup ********************/
.select-content{
    position: absolute;
    width: 100%;
    padding: 5px;
    height: 300px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #6660;
    box-shadow: 7px 10px 18px 0px rgba(150,150,150,0.79);
    z-index: 100;
    transition: all .5s ease-in-out;
    transform-origin: left top;
    transform: scaleY(0);
}

.select-content-show{
    transform: scaleY(1);
}
/*---------------!Signature-----------*/

/*---------------Popup-----------*/
.popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9000;
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

    .popup.is-active{
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

        .popup.is-active .close-popup{
            visibility: visible;
            opacity: 1;
        }

        .popup.is-active .popup__content{
            transform: translate(0, 0);
        }

    .popup.popup--big .close-popup{
        left: 95% /*20px*/;
    }

    .popup.popup--big .popup__content{
        max-width: 95% /*1825px*/;
    }

.popup__overlay{
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
}

.close-popup{
    position: absolute;
    left: 856px;
    top: 0;
    transform: translate(-60%, 50%);
    z-index: 10;
    transition: background-color 0.3s ease, visibility .3s ease .5s, opacity .3s ease .5s;
    visibility: hidden;
    opacity: 0;
}

.popup__content{
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 2;
    height: calc(100% - 20px);
    width: 100%;
    max-width: 856px;
    background-color: #f1f1f1;
    border: 1px solid #3aadae;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: all 0.3s ease .5s;
    transform: translate(-100%, 0);
}
    /*.popup__content .cart {
    margin-bottom: 10px; }*/
    .popup__content .cart__body{
        /* border-top: 1px solid #069c9e;
    padding: 15px 15px 0;
    margin-top: 10px;*/
    }

    .popup__content .cart__footer{
        /*  border-top: 1px solid #069c9e;
    padding: 15px 15px 0;
    margin-top: 10px; */
    }

    .popup__content .cart--accordion .cart__header a{
        display: block;
        width: 100%;
        text-decoration: none;
        position: relative;
    }

    .popup__content .cart--accordion .cart__header img{
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        transition: all .3s ease;
    }

    .popup__content .cart--accordion .cart__header.is-active img{
        transform: translate(0, -50%) rotate(180deg);
    }


.button--red-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #e50000;
    border-radius: 50%;
}

    .button--red-circle:not(:disabled):hover, .button--red-circle:not(:disabled):focus, .button--red-circle:not(:disabled):active{
        background-color: #740000;
    }

    .button--red-circle img{
        height: 60%;
        width: auto;
    }

.button--red-circle-big{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    width: 40px;
    text-decoration: none;
    background-color: #e50000;
    border-radius: 50%;
}

    .button--red-circle-big:not(:disabled):hover, .button--red-circle:not(:disabled):focus, .button--red-circle:not(:disabled):active{
        background-color: #740000;
    }

    .button--red-circle-big img{
        height: 60%;
        width: auto;
    }

.cart__header{
    margin: 0px 10px;
}

.cart__body{
    padding: 0px 10px;
}

/*---------------!Popup-----------*/


.button--blue-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    min-width: 25px;
    width: 25px;
    text-decoration: none;
    background-color: #408dfb;
    border-radius: 50%;
}

    .button--blue-circle:not(:disabled):hover, .button--blue-circle:not(:disabled):focus, .button--blue-circle:not(:disabled):active{
        background-color: #4f8685;
    }

    .button--blue-circle img{
        height: 60%;
        width: auto;
    }

.w30{
    width: 30px;
}

.attachment-box{
    border: 1px solid #ddd;
    padding: 10px;
    background: #fafafa;
}

.attachment-image{
    max-width: 100%;
    max-height: 300px;
    border: 1px solid #ccc;
}



.img-host{
    position: relative;
    width: 100%;
    user-select: none;
    touch-action: none; /* bitno za pointer na touch uređajima */
}

.selection-rect{
    position: absolute;
    border: 2px solid #00a3ff;
    background: rgba(0,163,255,0.15);
    pointer-events: none;
}

.cart_header_icon {
    height: 18px;
    transition: all 0.5s;
}

.cart_header_icon_rotation {
    transform: rotate(180deg);
}

.filter-btn:hover svg path,
.filter-btn:focus svg path,
.filter-btn:focus-visible svg path {
    stroke: #fff !important;
}
/* Requisition Item Picking Progress Bars */
.picking-cell {
    text-align: right !important;
    padding-right: 10px !important;
    vertical-align: middle !important;
}

.picking-progress-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 140px;
}

.picking-progress-value {
    font-weight: 500;
    font-size: 1.05em;
}

.picking-progress-percentage {
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 2px;
}

.picking-progress-wrapper {
    width: 100%;
    max-width: 150px;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 6px;
    position: relative;
    margin-top: 2px;
    overflow: hidden;
}

.picking-progress-wrapper.transparent {
    background-color: transparent;
}

.picking-progress-bar {
    height: 100%;
    border-radius: 4px;
    position: absolute;
    left: 0;
}

.picking-progress-bar.overflow {
    left: auto;
    right: 0;
    opacity: 0.85;
}


/* Transport Note Component Elements */
.tn-regions {
    font-weight: 500;
    max-width: 250px;
}

.tn-subtext {
    font-size: 0.85em; 
    color: #888;
}

.tn-progress-container {
    width: 100%;
    max-width: 250px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.tn-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #000000;
    padding: 0 2px;
}

.tn-progress-wrapper {
    width: 100%;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    position: relative;
}

.tn-progress-wrapper.mt-2px {
    margin-top: 2px;
}

.tn-progress-bar {
    height: 100%;
    border-radius: 4px;
    position: absolute;
}

.tn-progress-bar.drive {
    background-color: #17a2b8;
}

.tn-progress-bar.delivery {
    background-color: #28a745;
}

.tn-mass-cell {
    min-width: 130px;
}

.tn-mass-header {
    font-size: 0.9em;
    margin-bottom: 4px;
}

.tn-mass-wrapper {
    width: 100%;
    max-width: 250px;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}

.tn-mass-bar {
    height: 100%;
    border-radius: 4px;
}

.tn-creator-name {
    font-size: 0.9em;
    font-weight: 500;
}

/* ============================================================
   FoodPlanner — stilovi za menadžerski planer nabavke hrane
   ============================================================ */

/* --- Slajderi sa vidljivom trakom i tačkom (chrome + firefox) --- */
.planner-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(to right,
        #185FA5 0%,
        #185FA5 var(--planner-fill, 50%),
        #d8d8d8 var(--planner-fill, 50%),
        #d8d8d8 100%);
    border-radius: 3px;
    outline: none;
    flex: 1;
    cursor: pointer;
}
.planner-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #185FA5;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.planner-slider::-moz-range-track {
    height: 6px;
    background: #d8d8d8;
    border-radius: 3px;
}
.planner-slider::-moz-range-progress {
    height: 6px;
    background: #185FA5;
    border-radius: 3px;
}
.planner-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #185FA5;
    border: 2px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* --- KPI cards: uvek u jednom redu, jednake širine --- */
.planner-kpi-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}
.planner-kpi-row > div {
    flex: 1 1 0;
    min-width: 0;
}

/* --- Dvokolonski red (Zalihe + Alarmi): jednake širine, wrap na uskim ekranima --- */
.planner-two-col {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.planner-two-col > div {
    flex: 1 1 350px;
    min-width: 0;
}

/* --- KPI card sadržaj --- */
.planner-kpi-card {
    text-align: center;
}
.planner-kpi-value {
    font-size: 28px;
    font-weight: 600;
}
.planner-kpi-value--blue { color: #185FA5; }
.planner-kpi-value--green { color: #3B6D11; }
.planner-kpi-value--orange { color: #854F0B; }
.planner-kpi-value--red { color: #A32D2D; }
.planner-kpi-sub {
    font-size: 11px;
    color: #888;
}

/* --- Stock coverage bar --- */
.planner-stock-row {
    margin-bottom: 10px;
}
.planner-stock-row__head {
    font-size: 12px;
    margin-bottom: 3px;
}
.planner-stock-row__badge {
    padding: 1px 7px;
    border-radius: 7px;
    font-size: 11px;
}
.planner-stock-row__track {
    height: 6px;
    background: #eee;
    border-radius: 3px;
}
.planner-stock-row__fill {
    height: 6px;
    border-radius: 3px;
}

/* --- Alarmi --- */
.planner-alarm {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 6px;
    border: 1px solid;
}
.planner-alarm--ok {
    background: #EAF3DE;
    border-color: #97C459;
    color: #27500A;
    font-size: 13px;
}
.planner-alarm--critical {
    background: #FCEBEB;
    border-color: #F09595;
    color: #791F1F;
}
.planner-alarm--warning {
    background: #FAEEDA;
    border-color: #EF9F27;
    color: #633806;
}

/* --- Tabele planera --- */
.planner-table-wrap {
    overflow-x: auto;
}
.planner-table tr.total {
    background: #f6f6f6;
    font-weight: 600;
}
.planner-price-input {
    width: 80px !important;
    text-align: right;
    padding: 0 6px;
}

/* --- Found-info pomoćni tekst --- */
.planner-hint {
    font-size: 11px;
    color: #888;
}

/* --- Pill labele za status (koriste i FoodPlanner i AnimalPlanner) --- */
.p-ok { background: #EAF3DE; color: #3B6D11; }
.p-warn { background: #FAEEDA; color: #854F0B; }
.p-info { background: #E6F1FB; color: #185FA5; }
.p-danger { background: #FCEBEB; color: #A32D2D; }

/* --- Veterinarski protokoli --- */

/* Phase timeline — vizuelni bar 4 faze tova (karantin / faza1 / faza2+3 / karenca) */
.vet-phase-timeline {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.vet-phase {
    padding: 10px 12px;
    font-size: 12px;
    text-align: center;
}
.vet-phase__name { font-weight: 600; }
.vet-phase__sub { font-size: 11px; opacity: 0.8; }
.vet-phase--quarantine { background: #E6F1FB; color: #0C447C; flex: 1; }
.vet-phase--ph1        { background: #EAF3DE; color: #27500A; flex: 2; }
.vet-phase--ph23       { background: #FAEEDA; color: #633806; flex: 1.5; }
.vet-phase--karenca    { background: #FCEBEB; color: #791F1F; flex: 0.5; }

/* Karenca duration pill (auto-color po danima) */
.vet-pill-days-short  { background: #EAF3DE; color: #27500A; }
.vet-pill-days-mid    { background: #FAEEDA; color: #633806; }
.vet-pill-days-long   { background: #FCEBEB; color: #791F1F; }

/* Calendar / checklist row sa labelom levo i pillom desno */
.vet-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    gap: 8px;
}
.vet-row:last-child { border-bottom: none; }
.vet-row-label { color: #555; flex-shrink: 0; }