:root {
    /* VARIABLES */
    --fina-sidebar-w: 280px;
    --fina-border-radius-sm: 4px;
    --fina-border-radius: 6px;
    --fina-border-radius-lg: 8px;
    --fina-gap: 16px;
    --fina-gap-lg: 24px;
    --font-size: 16px;
    --font-size-small-screen: 14px;
    /* COLORS */
    --fina-dark-blue: #202849;
    --fina-blue: #0062E0; /* primary */
    --fina-blue-c: #0062E0; /* primary */
    --fina-green: #52C41A;
    --fina-green-c: #52C41A;
    --fina-red: #F5222D;
    --fina-red-c: #F5222D;
    --fina-cyan: #13C2C2;
    --fina-cyan-c: #13C2C2;
    --fina-yellow: #FA8C16;
    --fina-yellow-c: #FA8C16;
    --fina-light-blue: #E6F5FF;
    --fina-light-green: #F6FFED;
    --fina-light-red: #FFF1F0;
    --fina-light-cyan: #E6FFFB;
    --fina-light-yellow: #FFF7E6;
    --fina-bright-3: #EAECF6;
    --fina-bright-2: #F4F5FA;
    --fina-error: #FF4D4F;
    --fina-border: #CACFE8;
    --fina-border-2: #D4D9EC;
    --fina-gray: #202849A6;
    --fina-placeholder: #20284973;
    --fina-white: #FFFFFF;
    --fina-sidebar-li-act: #202849;
    --fina-sidebar-li-hov: #F4F5FA;
    --fina-btn-hov: #f8f9fa;
    --fina-btn-primary-c: #FFF;
    --fina-btn-primary-bg: #0062E0;
    --fina-btn-primary-c-dis: #FFF;
    --fina-btn-primary-bg-dis: #0062E0;
    --fina-btn-primary-c-hov: #FFF;
    --fina-btn-primary-bg-hov: #0062E0;
    --fina-btn-light-bg: #f8f9fa;
    --fina-s2-white: #FFF;
    --fina-s2-hov: #0062E0;
    --fina-dt-header: #F4F5FA;
    --fina-dt-fixed: #F4F5FA;
    --fina-dt-pg: #0062E0;
    --fina-dt-pg-dis: #aaa;
    --fina-dt-pg-hov: #FFF;
    --fina-dt-processing: #E6F5FF99;
    --fina-link: #0062E0;
    --fina-notif: #0062E0;
    --fina-notif-c: #CF1322;
    --fina-notif-hov: #EAECF6;
    --fina-notif-unread: #E6F5FF;
    --fina-notif-dot: #0062E0;
    --fina-scrollbar-bar: auto;
    --fina-scrollbar-track: auto;
    --fina-dp-btn-bg: #000;
    --fina-dp-days-c: #000;
    --fina-dp-day-c: #FFF;
    --fina-dp-day-bg: #F4F5FA;
    --fina-dp-day-border: #D4D9EC;
    --fina-dp-day-hov-c: #FFF;
    --fina-dp-day-hov-bg: #202849;
    --fina-dp-day-hov-border: #202849;
    --fina-dp-day-act-c: #FFF;
    --fina-dp-day-act-bg: #0062E0;
    --fina-dp-day-act-border: #0062E0;
    --fina-dp-day-high-c: #FFF;
    --fina-dp-day-high-bg: #FA8C16;
    --fina-dp-day-high-border: #FA8C16;
    --fina-btn-nias-bg: #BE1E2D;
    --fina-nav-tab-c-act: #202849;
    --fina-nav-tab-c-hov: #202849;
    --fina-nav-tab-border-act: #0062E0;
    --fina-nav-tab-border-hov: #FA8C16;
    --fina-input-readonly-disabled: #EEE;
}

body.dark {
    /* COLORS */
    --fina-dark-blue: #FFF;
    --fina-blue: #000; /* primary */
    --fina-blue-c: #FFF; /* primary , za dark theme: color -> #FFF */
    --fina-green: #000;
    --fina-green-c: #FFF;
    --fina-red: #000;
    --fina-red-c: #FFF;
    --fina-cyan: #000;
    --fina-cyan-c: #FFF;
    --fina-yellow: #000;
    --fina-yellow-c: #FFF;
    --fina-light-blue: #AAA;
    --fina-light-green: #AAA;
    --fina-light-red: #AAA;
    --fina-light-cyan: #AAA;
    --fina-light-yellow: #AAA;
    --fina-bright-3: #000;
    --fina-bright-2: #AAA;
    --fina-error: #FFF;
    --fina-border: #CACFE8;
    --fina-border-2: #D4D9EC;
    --fina-gray: #AAA;
    --fina-placeholder: #999;
    --fina-white: #111;
    --fina-sidebar-li-act: #666;
    --fina-sidebar-li-hov: #333;
    --fina-btn-hov: #bbb;
    --fina-btn-primary-c: #FFF;
    --fina-btn-primary-bg: #000;
    --fina-btn-primary-c-dis: #666;
    --fina-btn-primary-bg-dis: #000;
    --fina-btn-primary-c-hov: #000;
    --fina-btn-primary-bg-hov: #bbb;
    --fina-btn-light-bg: transparent;
    --fina-s2-white: #111;
    --fina-s2-hov: #333;
    --fina-dt-header: #555;
    --fina-dt-fixed: #333;
    --fina-dt-pg: #FFF;
    --fina-dt-pg-dis: #FFF;
    --fina-dt-pg-hov: #333;
    --fina-dt-processing: #ccc9;
    --fina-link: #FFF;
    --fina-notif: #FFF;
    --fina-notif-c: #000;
    --fina-notif-hov: #666;
    --fina-notif-unread: #333;
    --fina-notif-dot: #FFF;
    --fina-scrollbar-bar: #AAA;
    --fina-scrollbar-track: #333;
    --fina-dp-btn-bg: #000;
    --fina-dp-days-c: #000;
    --fina-dp-day-c: #FFF;
    --fina-dp-day-bg: #000;
    --fina-dp-day-border: #AAA;
    --fina-dp-day-hov-c: #FFF;
    --fina-dp-day-hov-bg: #AAA;
    --fina-dp-day-hov-border: #AAA;
    --fina-dp-day-act-c: #FFF;
    --fina-dp-day-act-bg: #666;
    --fina-dp-day-act-border: #0062E0;
    --fina-dp-day-high-c: #FFF;
    --fina-dp-day-high-bg: #666;
    --fina-dp-day-high-border: #FA8C16;
    --fina-btn-nias-bg: rgba(255, 255, 255, .25);
    --fina-nav-tab-c-act: #FFF;
    --fina-nav-tab-c-hov: #FFF;
    --fina-nav-tab-border-act: #FFF;
    --fina-nav-tab-border-hov: #AAA;
    --fina-input-readonly-disabled: #666;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../lib/font/SourceSans3-VariableFont_wght.ttf') format('truetype');
}
    
html {
  font-size: var(--font-size-small-screen);
}

@media (min-width: 768px) {
  html {
    font-size: var(--font-size);
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    background: var(--fina-bright-3) !important;
    color: var(--fina-dark-blue) !important;
    font-family: 'Source Sans 3';
    display: flex !important;
    flex-direction: column;
    font-variation-settings: normal;
    min-height: 100svh;
}

.skip_link {
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    padding: 1rem;
    z-index: -1;
    color: white;
}

.skip_link:focus{
    z-index : 999;   
}

header {
    margin-bottom: 1px;
}

.egradani_traka-holder:empty {
    min-height: 130px;
    background: var(--fina-btn-nias-bg);
}
@media only screen and (min-width: 1024px) {
    .egradani_traka-holder:empty {
        min-height: 133px;
    }
}

.nav-placeholder {
    display: flex;
    height: 64px;
    background: var(--fina-white);
    flex-direction: row;
    align-items: center;
    padding-inline: 8px;
    justify-content: space-between;
}
.nav-public {

    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: var(--fina-border-radius);
    border: none;
    background: var(--fina-white);
}

.content {
    flex-grow: 1;
    flex-basis: 1;
    display: flex;
    flex-direction: row;
}

.main {
    flex: 1;
    padding-inline: 1px;
}

.footer > div {
    min-height: 50px;
    /*max-height: 75px;*/
}

/* TYPOGRAPHY */
.title-xl {
    font-size: 1.5rem;
    line-height: 2.136rem;
    font-weight: 600;
}

.title-large {
    font-size: 1.25rem;
    line-height: 28px;
    font-weight: 600;
}

.title-normal {
    font-size: 1rem;
    line-height:24px;
    font-weight: 600;
}

.text-large {
    font-size: 1.25rem;
    line-height: 1.5;
}

.text-large-bold {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
}
.text-large-error-bold {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.5;
}

.text-normal{
    font-size: .875rem;
}

.text-normal-bold {
    font-size: .875rem;
    font-weight: 600;
}

.text-small {
    font-size: .75rem;
}

.text-small-bold {
    font-size: .75rem;
    font-weight: 600;
}

.dot {
    display: list-item;
    margin-left: 35px;
}
.dot::marker {
    color: var(--fina-blue-c);
}

.text-primary{
    color: var(--fina-blue-c) !important;
}
.text-success {
    color: var(--fina-green-c) !important;
}
.text-danger {
    color: var(--fina-red-c) !important;
}
.text-warning {
    color: var(--fina-yellow-c) !important;
}
.text-info {
    color: var(--fina-cyan-c) !important;
}
.text-dark-light {
    color: var(--fina-gray) !important;
}
.text-black-50 {
    color: var(--fina-dark-blue) !important;
}

/* TOAST */
.toast-container{
    z-index:9999;
    position: fixed;
    top: 150px;
}

.toast {
    background: var(--fina-white);
    border-radius: var(--fina-border-radius-lg);
    width: 255px;
    padding: 8px 12px;
    box-shadow: 0px 9px 28px 8px #0000000D, 0px 3px 6px -4px #0000001F, 0px 6px 16px 0px #00000014;
    position: relative;
    overflow: hidden;
}

.toast::after{
    display:block;
    content:"";
    position:absolute;
    bottom:0px;
    left:0px;
    height:1px;
    width:100%;
    background: var(--fina-dark-blue);
    animation: toast-timer 3s linear;
}

.toast:hover::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 1px;
    width: 100%;
    background: var(--fina-dark-blue);
    animation: none;
}

.toast .toast-body{
    padding:0px;
    line-height:1;
}

.toast button.icon-x {
    color:var(--fina-dark-blue);
}

#sidebar {
    width: 280px;
    min-height: calc(100svh - 196px);
    background: var(--fina-white);
    padding: 16px 4px;
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    transition: all .25s linear;
}

#sidebar #m-list-wrapper {
    flex-grow: 1;
    display:flex;
    flex-direction:column;
}

#sidebar #m-list-helper {
    width:100%;
    margin-top:auto;
}

#sidebar #m-list {
    position: sticky;
    bottom: 1rem;
}

#sidebar .toggler {
    text-align: center;
    cursor:pointer;
    margin-inline:auto;
}

.toggler.icon-wrapper{
    padding: 8px 10.5px;
    border-radius: var(--fina-border-radius);
    width:auto;
    min-height:40px;
}

.toggler.icon-wrapper:hover {
    cursor: pointer;
    background: var(--fina-bright-2);
}

.nav-item {
    margin-bottom: 8px;
    border-radius: var(--fina-border-radius-lg);
    padding-inline: 24px;
    transition: all .25s linear;
    min-height: 40px;

}

.nav-item .nav-link {
    color: var(--fina-dark-blue);
    min-height:inherit;
    display:flex;
    align-items:center;
}

.nav-item .nav-link i {
    margin-top: -4px;
    margin-right:8px;
}

.nav-item .nav-link span {
    transition: opacity .1s linear;
    transition-delay: .25s;
   /* white-space:nowrap;*/
}

.nav-item:hover {
    background: var(--fina-sidebar-li-hov);
}

.nav-item.active {
    background: var(--fina-sidebar-li-act);
}

.nav-item.active .nav-link {
    color: white !important;
}


/* TABS */
.nav-tabs{
    margin: 12px 24px 0px 24px;
    border-bottom: 1px solid var(--fina-border-2);
}

.nav-tabs li{
    padding-inline: 12px;
}

.nav-tabs li button {
    font-size: 0.875rem;
    padding-block: 12px;
    border: none;
    background-color: transparent;
    color: var(--fina-dark-blue);
}

.nav-tabs li button:hover {
    border-bottom: 2px solid var(--fina-nav-tab-border-hov);
    color: var(--fina-nav-tab-c-hov);
}

.nav-tabs li button.active {
    border-bottom: 2px solid var(--fina-nav-tab-border-act);
    color: var(--fina-nav-tab-c-act);
    background-color: transparent;
}

.tab-content > .card.active {
    display: flex;
}

/* PAGE TITLE */
.page-title{
    background: var(--fina-white);
    min-height:60px;
    padding:12px 24px 16px 24px;
    /*display:flex;*/
    /*flex-direction: row;
    justify-content:space-between;
    align-items:center;*/
}

.page-title div{
    min-height: 32px;
}

.back-button{
    font-size:24px !important;
}


/*  CUSTOM BUTTONS */
.btn-a-element {
    padding-inline: 16px;
    padding-block: 7px;
    display: inline-flex;
    align-items: center;
}
.btn{
    border-radius:var(--fina-border-radius) !important;
    padding-inline: 16px;
    padding-block: 7px;
    display: inline-flex;
    align-items: center;
}

/*.btn:not(:has(i)){
    line-height:1;
}*/

.btn-sm {
    padding-block: 4.6px;
    min-height: 32px !important;
}

.btn i,.btn svg{
    margin-right: 8px;
}

.btn-primary{
    color: var(--fina-btn-primary-c);
    background: var(--fina-btn-primary-bg);
    border-color: var(--fina-btn-primary-c);
}

.btn-danger {
    color: var(--fina-white);
    background: var(--fina-error);
    border-color: var(--fina-error);
}

.btn-outline-light {
    border: 1px solid var(--fina-border) !important;
    color: var(--fina-dark-blue);
}

.btn-light {
    border: 1px solid var(--fina-border) !important;
    color: var(--fina-dark-blue);
    background-color: var(--fina-btn-light-bg);
}

.btn-outline-danger {
    border: 1px solid var(--fina-error);
    color: var(--fina-error);
}

.btn-primary:disabled {
    color: var(--fina-btn-primary-c-dis);
    background: var(--fina-btn-primary-bg-dis);
    border-color: var(--fina-btn-primary-c-dis);
}

.btn-cookie {
    padding: 7px;
    width:32px !important;
    height: 32px !important;
    border-radius: 50% !important;
}

.btn:hover {
    box-shadow: 2px 2px 8px 1px rgba(0,0,0,.2);
}

.btn-primary:hover {
    color: var(--fina-btn-primary-c-hov);
    background: var(--fina-btn-primary-bg-hov);
    border-color: var(--fina-btn-primary-c-hov);
}

.btn-outline-light:hover, .btn-light:hover {
    background: var(--fina-btn-hov); 
}

.btn-outline-danger:hover {

}

.btn-nias-prijava {
    padding: 4px;
    padding-right: 12px;
    border-radius: 999px;
    min-height: 40px;
    background: var(--fina-btn-nias-bg);
    border: none;
    width: fit-content;
    color: white !important;
    text-transform: capitalize;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.btn-nias-prijava svg{
    width: 32px;
    height:32px;
    padding:6px;
    aspect-ratio: 1/1;
    background: white;
    border-radius: 999px;
    margin-right: 8px;
}

.w-max-content{
    width:max-content;
}

/* FROM CONTROL */
.form-control, .form-select{
    border-radius: var(--fina-border-radius);
    border-color: var(--fina-border);
    background-color:var(--fina-white);
    color: var(--fina-dark-blue);
}

.form-control:focus, .form-select:focus {
    background-color: var(--fina-white);
    color: var(--fina-dark-blue);
}

.form-control::placeholder, .form-select::placeholder {
    color: var(--fina-placeholder);
}

.form-control-sm, .form-select-sm{
    min-height:32px !important;
    padding:5px 12px !important;
}

.input-group .form-control, .input-group .input-group-text{
    border-radius: var(--fina-border-radius);
}

.input-group .form-control{ 
    border-right:none;
}

.input-group .input-group-text {
    background: none;
}
div:has(input[data-val-required]) > label:first-of-type::after {
    content: "*";
    color: var(--fina-red);
    padding: 5px
}
div:has(select[data-val-required]) > label:first-of-type::after {
    content: "*";
    color: var(--fina-red);
    padding: 5px
}

div:has(textarea[data-val-required]) > label:first-of-type::after {
    content: "*";
    color: var(--fina-red);
    padding: 5px
}
.form-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-black-50"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-size: inherit;
    background-position-y: center;
    background-position-x: calc(100% - 8px);
}

.form-control[type="date"]::-webkit-calendar-picker-indicator, .form-control-sm[type="date"]::-webkit-calendar-picker-indicator {
    cursor:pointer;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23202849" stroke-opacity="0.45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar text-black-50"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>');
}
.form-file-control{
    color:var(--fina-blue);
    position:relative;
    padding-left:24px;
}
.form-file-control::-webkit-file-upload-button {
    visibility: hidden;
    display:none;
}
.form-file-control::before {
    content: "\e130";
    font-family: 'lucide' !important;
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--fina-gray);
    position:absolute;
    left:0px; 
}
.form-file-control:hover {
    background-color: #f5f5f5;
}
.form-file-control:hover::after {
    content: "\e18d";
    font-family: 'lucide' !important;
    display: inline-block;
    width: 50px;
    height: 18px;
    color: var(--fina-gray);
    position: absolute;
    right: -30px;
}

.form-control-sm[readonly] {
    background-color: var(--fina-input-readonly-disabled);
}
.form-control-sm[disabled] {
    background-color: var(--fina-input-readonly-disabled);
}

.form-control-sm.input-validation-error {
    border-color: #FF4D4F; /* ostavljeno da se i na dark temi vidi crveno */
}

.form-check-input:checked {
    background-color: var(--fina-blue);
    border-color: var(--fina-blue-c);
}


/* DROPDROWN */
.dropdown-toggle {
    padding-block: 0px;
    padding-right: 10px;
}

.dropdown-toggle::after {
    padding-left: 10px;
    margin-left: 16px;
    border: none;
    border-left: solid 1px var(--fina-border-2);
    content: "\e071";
    font-family: 'lucide' !important;
    padding-block: 0px;
    height:30px;
    font-size:20px;
}

.dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--fina-border-2);
    margin-top: 4px !important;
    box-shadow: 0 0px 10px rgba(0, 0, 0, .3);
    padding: 4px;
    background-color:var(--fina-white);
}

.dropdown-menu li:not(:last-child){
    margin-bottom: 2px;
}

.dropdown-menu .dropdown-item {
    border-radius: 4px;
    cursor: pointer;
    color:var(--fina-dark-blue);
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--fina-notif-hov);
}

.dropdown-menu .dropdown-item i{
    margin-bottom: 3px;
    margin-right: 6px;
}

/* CARD */
.card{
    margin: 24px;
    padding:24px;
    border-radius: var(--fina-border-radius);
    border:none;
    background: var(--fina-white);
}

.card-gap-sm{
    gap: var(--fina-gap);
}

.card-gap {
    gap: var(--fina-gap-lg);
}

.card-info{
    padding:16px;
    border: 1px solid var(--fina-border-2);
    border-radius: var(--fina-border-radius);
    row-gap: var(--fina-gap-lg);
}


/* DATATABLES CUSTOM CSS*/
.dt-container{
    font-size: .875rem;
}

.dt-container .dt-layout-row:first-child{
    margin-top:0;
}

.dt-container .dt-layout-row.dt-layout-table {
    margin-block: 24px;
}

.dt-container .dt-layout-row:last-child {
    margin-bottom: 0px;
}

.dataTable thead tr th, .dataTable tfoot tr th, .table-modal thead tr th, .table-modal tfoot tr th {
    background: var(--fina-dt-header);
}
.dataTable thead tr th:first-child, .table-modal thead tr th:first-child {
    border-top-left-radius: var(--fina-border-radius);
}
.dataTable thead tr th:last-child, .table-modal thead tr th:last-child {
    border-top-right-radius: var(--fina-border-radius);
}

.dataTable thead tr th, .dataTable tbody tr, .table-modal thead tr th, .table-modal tbody tr {
    border-bottom: solid 1px var(--fina-border-2) !important;
}
.table-modal thead {
    background: var(--fina-dt-header);
    border-bottom: solid 1px var(--fina-border-2) !important;
}

.dataTable thead tr th, .dataTable tbody tr td, .dataTable tfoot tr th {
    padding: 16px !important;
}

table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc {
    padding-right:30px !important;
}

.table-modal thead tr th, .table-modal tbody tr td, .table-modal tfoot tr th {
    padding: 10px !important;
}

.dataTable tbody tr td, .table-modal tbody tr td {
    border-bottom: none !important;
}

.dt-scroll .dt-scroll-body{
    scrollbar-color: var(--fina-scrollbar-bar) var(--fina-scrollbar-track);
}

div.dt-container .dt-search input.dt-input {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-opacity="0.45" stroke="%23202849" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search text-black-50"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
}

div.dt-container .dt-search input.dt-input, div.dt-container .dt-length select.dt-input {
    min-height: 32px !important;
    padding: 5px 32px 5px 12px !important;
    border-radius: var(--fina-border-radius);
    border-color: var(--fina-border);
    font-size: .875rem;
    border: 1px solid #ced4da;
}

.dt-length select.dt-input option{
    background: var(--fina-white);
}

div.dt-container .dt-search input.dt-input::placeholder {
    color: var(--fina-placeholder);
}

div.dt-container .dt-search input.dt-input {
    min-width: 100%;
}

div.dt-container .dt-length select.dt-input {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-opacity="0.45" stroke="%23202849" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-black-50"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-size: inherit;
    background-position-y: center;
    background-position-x: calc(100% - 8px);
}

div.dt-container .dt-search input.dt-input:focus-visible {
    outline: 2px solid var(--fina-blue-c);
    outline-offset: 1px;
    border-color: #86b7fe;
}

div .dt-container .dt-paging nav {
    display: inline-flex;
    gap: .5rem;
    flex-wrap:wrap;
}

div .dt-container .dt-paging nav button.dt-paging-button {
    min-width: 32px;
    min-height: 32px;
    background: var(--fina-white);
    margin: 0px;
    padding: 4.5px 11.5px;
    color: var(--fina-dark-blue);
}

div .dt-container .dt-paging nav button.dt-paging-button.current, div .dt-container .dt-paging nav button.dt-paging-button:hover, div .dt-container .dt-paging nav button.dt-paging-button.current:hover {
    min-width: 32px;
    min-height: 32px;
    background: var(--fina-dt-pg-hov);
    color: var(--fina-dt-pg) !important;
    border-radius: var(--fina-border-radius);
    border: 1px solid var(--fina-dt-pg);
}

div.dt-container .dt-paging  nav button.dt-paging-button.disabled svg{
    color: var(--fina-dt-pg-dis);
}

.dt-buttons .btn span {
    display: inline-flex;
    align-items: center;
}

table.dataTable tbody tr > .dtfc-fixed-start, table.dataTable tbody tr > .dtfc-fixed-end, table.table-modal tbody tr > .dtfc-fixed-start, table.table-modal tbody tr > .dtfc-fixed-end {
    border-top: 1px solid var(--fina-border-2);
    background: var(--fina-dt-fixed);
}

table.dataTable thead tr > .dtfc-fixed-end, table.dataTable tfoot tr > .dtfc-fixed-end, table.table-modal thead tr > .dtfc-fixed-end, table.table-modal tfoot tr > .dtfc-fixed-end {
    background: var(--fina-dt-header);
}

div.dt-processing{
    width:100%;
    height:100%;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    top:unset;
    left: unset;
    background-color: var(--fina-dt-processing);
}

div.dt-processing > div{
    top: 50%;
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::before {
    color: var(--fina-dark-blue);
    opacity: .45;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1;
}

/* ICONS */
[class^="icon-"], [class*=" icon-"] {
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.icon-large{ 
    font-size:24px !important;
    line-height:24px !important;
}

.icon-small {
    font-size: 12px !important;
}


/* BADGES */
.status-badge {
    font-size: .75rem;
    color: var(--fina-blue);
    background: var(--fina-light-blue);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
}
.status-badge-success {
    font-size: .75rem;
    color: var(--fina-green);
    background: var(--fina-light-green);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
}
.status-badge-danger {
    font-size: .75rem;
    color: var(--fina-red);
    background: var(--fina-light-red);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
}
.status-badge-info {
    font-size: .75rem;
    color: var(--fina-cyan);
    background: var(--fina-light-cyan);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
}
.status-badge-warning {
    font-size: .75rem;
    color: var(--fina-yellow);
    background: var(--fina-light-yellow);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
}
.status-badge-light {
    font-size: .75rem;
    background: var( --fina-bright-2);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
}
.text-badge-light {
    font-size: .75rem;
    background: var( --fina-bright-2);
    padding: 2px 8px;
    border-radius: var(--fina-border-radius-sm);
    text-wrap-mode: nowrap;
    display:inline-block;
}
.rdp-badge {
    display: grid;
    place-items: center;
    min-width: 28px;
    font-size: 1rem;
    padding: 6px;
    aspect-ratio: 1 / 1;
    color: var(--fina-blue);
    background: var(--fina-light-blue);
    border-radius: 999px;
}
.rdp-badge-error {
    width: 20rem;
    height: 20rem;
    background: var(--fina-bright-2);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rdp-badge-error img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.rdp-badge-error .badge {
    font-size: 0.7rem;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-90%, -20%) !important;
}

/* BACKGROUNDS */
.bg-danger {
    background: var(--fina-light-red) !important;
}
.bg-notification {
    color: var(--fina-notif-c);
}
/* LINKS */
.link-1 {
    font-size: .875rem;
    text-decoration: none;
    color: var( --fina-link);
    cursor: pointer;
}

.link-2 {
    font-size: .875rem;
    color: var( --fina-link);
    cursor: pointer;
}

a.link-1:hover, a.link-2:hover {
    color: var(--fina-link);
    text-decoration: underline;
}

#otvori-vise:hover {
    text-decoration: none;
}

.link-breadcrumb {
    font-size: .875rem;
    text-decoration: none;
    color: var(--fina-gray);
}

.link-breadcrumb.active {
    color: var(--fina-dark-blue);
}

.link-breadcrumb:hover {
    color: var(--fina-dark-blue);
}


/*MODAL*/
.modal-content{
    border-radius: 8px;
    padding:20px;
    background: var(--fina-white);
}

.modal-header, .modal-body, .modal-footer{
    padding: 0px;
    border: none;
}

.modal-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-bottom: 1rem;
}

.modal-body {
    padding-bottom: 1rem;
}

.modal-footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.modal-footer > * {
    margin: 0 .25rem;
}

.modal-header button {
    border:none;
    background:none;
}
/*Modal body*/
.txt-count-input {
    text-align: end;
    opacity: 45%;
}

/* DIVIDER */
hr{
    border-top: solid 1px var(--fina-border-2);
    opacity: 1;
    margin-bottom: 0;
}

.hr-mt-lg{
    margin-top:20px;
}

/* dodatci */
.flex-basis-0{
    flex-basis: 0;
}
.table-error{
    text-align:center;
    padding:5%
}
.table-error-icon {
    font-size: 46px;
    margin-bottom: 30px;
    color: #CACFE8;
}

.collapse:not(.show) {
    display: none !important;
}

a[data-bs-toggle="collapse"] i {
    transition: all .3s linear;
}

a[data-bs-toggle="collapse"]:not(.collapsed) i{
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .content{
        position:relative;
    }

    #sidebar {
        width: var(--fina-sidebar-w);
        position: absolute;
        left: calc(-1 * var(--fina-sidebar-w));
        z-index: 999;
        height: 100%;
        overflow-y:scroll;
    }

    #sidebar #span-admin::after{
        content:"ADMINISTRIRANJE";
        display:block;
    }

    #sidebar.closed {
        left: 0; 
    }

    .card {
        margin: .75rem;
        padding: .75rem;
    }
    .nav-public {
        margin-left: .75rem;
        margin-right: .75rem;
        margin-bottom: .75rem;
        padding: .75rem;
    }
    .nav-tabs {
        margin-inline: .75rem;
    }
}

@media (min-width: 768.1px) {
    #sidebar.closed {
        width: 45px;
    }

    #sidebar.closed .nav-item {
        padding-inline: 10px;
    }

    #sidebar #span-admin::after {
        content: "ADMINISTRIRANJE";
        display: block;
    }

    #sidebar.closed .nav-item .nav-link span {
        transition: none;
        opacity:0;
        display:none;
    }

    #sidebar.closed #span-admin::after {
        content: "AD";
        display: block;
    }

    #sidebar.closed .nav-item .nav-link i {
        margin-right:0px;
    }

    #sidebar.closed div #m-list {
        width: 0;
        display: none !important;
    }

    #sidebar.closed .toggler.icon-wrapper{
        transform: rotate(180deg);
    }

    div.dt-container .dt-search input.dt-input {
        min-width: 435px;
    }
}

@keyframes toast-timer{
    from{
        width:0%
    }
    to{
        width:100%;
    }
}

.alert-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--fina-border-radius-lg);
    border: 1px solid #faad14;
    width: 100%;
    max-width: 1050px;
    background-color: #fffbe6;
}
.alert-container-primary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--fina-border-radius-lg);
    border: 1px solid var(--fina-blue-c);
    width: 100%;
    max-width: 1050px;
    background-color: var(--fina-notif-unread);
}
.alert-message {
    color: var(--fina-dark-blue);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom:0px;
}

/* SELECT 2 OVERRIDE */
.select2.select2-container{
    display: block;
    overflow: hidden;
}

.select2-container--open {
    z-index: 9999;
}

.select2 .selection .select2-selection {
    border-radius: var(--fina-border-radius);
    border-color: var(--fina-border);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--fina-s2-white);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-opacity="0.45" stroke="%23202849" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-size: inherit;
    background-position-y: center;
    background-position-x: calc(100% - 8px);
    min-height: 32px !important;
    padding: 5px 12px !important;
}

.select2 .selection .select2-selection.select2-selection--multiple {
    border-radius: var(--fina-border-radius);
    border-color: var(--fina-border);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--fina-s2-white);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-opacity="0.45" stroke="%23202849" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-size: inherit;
    background-position-y: center;
    background-position-x: calc(100% - 8px);
    min-height: 32px !important;
    padding: 2px 12px !important;
}

.select2-container .select2-search--inline {
    font-size: 0.875rem;
    margin-left: 2px;
    height: 20px;
    width: 100%;
    font-family: 'Source Sans 3';
}

.select2-container .select2-search--inline .select2-search__field {
    font-size: 0.875rem;
    margin-top: 0px;
    margin-left: 0px;
    padding: 0;
    max-width: 100%;
    height: 20px;
    font-family: 'Source Sans 3';
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fina-bright-3);
    border: 1px solid var(--fina-border);
    margin-left: 2px;
    margin-top: 0px;
    max-width: 100px;
}

body.dark .select2 .selection .select2-selection {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-opacity="0.45" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><path d="m6 9 6 6 6-6"/></svg>');
}

.select2 .selection .select2-selection .select2-selection__rendered {
    font-size: .875rem;
    line-height:initial;
    color: var(--fina-dark-blue);
    padding:0;
}

.select2 .selection .select2-selection .select2-selection__arrow {
    display:none;
}

.select2-container .select2-dropdown {
    border-color: var(--fina-border-2);
    border-bottom-left-radius: var(--fina-border-radius-lg);
    border-bottom-right-radius: var(--fina-border-radius-lg);
}

.select2-container .select2-dropdown .select2-search {
    background: var(--fina-s2-white);
}

.select2-container .select2-dropdown .select2-search input.select2-search__field {
    font-size: .875rem;
    line-height: initial;
    color: var(--fina-dark-blue);
    border-color: var(--fina-border-2);
    border-radius: 8px;
    outline-offset: 0px !important;
    outline-color: var(--fina-blue);
    padding-inline: 8px;
    background: var(--fina-s2-white);
}

.select2-container .select2-dropdown .select2-results .select2-results__options {
    font-size: .875rem;
    line-height: initial;
    color: var(--fina-dark-blue);
    background: var(--fina-s2-white);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    scrollbar-color: var(--fina-scrollbar-bar) var(--fina-scrollbar-track);
}

.select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option{
    border-radius: var(--fina-border-radius-lg);
}

.select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: var(--fina-bright-3);
    color: var(--fina-dark-blue);
}

.select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option:hover,
.select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--fina-s2-hov);
    color: white;
}

.select2-selection__clear {
    height:32px !important;
    margin-top:-6px;
}

.select2-selection__clear span{
    display: none !important;
}

.select2-selection__clear::before {
    display: block;
    color: var(--fina-placeholder);
    padding-left: .5rem;
    font-family: "lucide";
    content: "\e1b1";
}

div:has(> select.form-select-sm.input-validation-error) > .select2-container .selection .select2-selection {
    border-color: #FF4D4F; /* ostavljeno da se i na dark temi vidi crveno */
}

.select2.select2-container--disabled .selection .select2-selection {
    background-color: var(--fina-input-readonly-disabled);
    cursor: default;
}

/* DATEPICKER */
.dt-input-hidden {
    visibility: hidden;
    position: absolute;
}

.hasDatepicker {
    cursor: pointer;
    background-color: var(--fina-s2-white) !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23202849" stroke-opacity="0.45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar text-black-50"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position-y: center;
    background-position-x: calc(100% - 8px);
    color: var(--fina-dark-blue);
}
body.dark .hasDatepicker {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-opacity="0.45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar text-black-50"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>');
}

.hasDatepicker::placeholder {
    color: var(--fina-placeholder) !important;
}

.ui-datepicker {
    padding: 6px;
    border: none !important;
    border-radius: var(--fina-border-radius);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    background: var(--fina-white);
    border: 1px solid var(--fina-border-2) !important;
}

.ui-datepicker-header {
    background: var(--fina-bright-3);
    border-radius: var(--fina-border-radius);
    border-color:var(--fina-border-2);
    border:none !important;
    padding: 4px !important;
}

.ui-datepicker-header a.ui-datepicker-prev, .ui-datepicker-header a.ui-datepicker-next {
    background: var(--fina-dp-btns-bg);
    color: var(--fina-dark-blue);
    border-radius: var(--fina-border-radius);
    text-decoration:none;
}

.ui-datepicker-header a.ui-datepicker-prev, .ui-datepicker-header a.ui-datepicker-next {
    top: 3px;
    border: none !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-datepicker-header a.ui-datepicker-prev span, .ui-datepicker-header a.ui-datepicker-next span {
    display:none;
}

.ui-datepicker-header a.ui-datepicker-prev::after {
    display:block;
    content:"<";
}
.ui-datepicker-header a.ui-datepicker-next::after {
    display: block;
    content: ">";
}

.ui-datepicker-header .ui-datepicker-title .ui-datepicker-year, .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
    border-radius: var(--fina-border-radius-sm);
    margin: 2px !important;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-calendar thead tr th span {

    color: var(--fina-dark-blue);
}

.ui-datepicker .ui-datepicker-calendar tbody tr td a{
    border-color: var(--fina-dp-day-border);
    border-radius: var(--fina-border-radius-sm);
    background: var(--fina-dp-day-bg);
    color: var(--fina-dark-blue);
}

.ui-datepicker .ui-datepicker-calendar tbody tr td span {
    border-color: var(--fina-border-2);
    border-radius: var(--fina-border-radius-sm);
    background: var(--fina-bright-2);
    color: var(--fina-dark-blue);
}

.ui-datepicker .ui-datepicker-calendar tbody tr td a.ui-state-highlight {
    background: var(--fina-dp-day-high-bg);
    color: var(--fina-dp-day-high-c);
    border-color: var(--fina-dp-day-high-border) !important;
}

.ui-datepicker .ui-datepicker-calendar tbody tr td a.ui-state-active {
    background: var(--fina-dp-day-act-bg);
    color: var(--fina-dp-day-act-c);
    border-color: var(--fina-dp-day-act-border) !important;
}

.ui-datepicker .ui-datepicker-calendar tbody tr td a:hover {
    background: var(--fina-dp-day-hov-bg) !important;
    color: var(--fina-dp-day-hov-c) !important;
    border-color: var(--fina-dp-day-hov-bg) !important;
}

.ui-datepicker .ui-datepicker-calendar a:focus, ui-datepicker .ui-datepicker-calendar a:focus-visible, .ui-datepicker .ui-datepicker-calendar .ui-datepicker-days-cell-over a {
    outline-width: 2px;
    outline-color: var(--fina-dark-blue) !important;
    outline-offset: 2px;
    outline-style: auto;
}


div:has(> input[type=date].form-control-sm.input-validation-error) > input.hasDatepicker {
    border-color: #FF4D4F; /* ostavljeno da se i na dark temi vidi crveno */
}

/* TOOLTIP */
.ui-tooltip{
    border-radius: var(--fina-border-radius);
    border:none !important;
    box-shadow:0 5px 10px rgba(0, 0, 0, .2);
    padding:6px;
}

.ui-tooltip-content {
    font-size: .75rem !important;
    color: rgba(0,0,0, .5);
}

/* FILTERS */
.filteri {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filteri label{
    margin-bottom: .25rem; 
    font-size : .875rem !important;
}

.filteri-grid-3 {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.filteri-grid-4 {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0,1fr));
}

.filteri-actions{
    display: flex;
    gap: .75rem;
    justify-content: end;
    flex-direction: row;
}

@media only screen and (max-width: 768px) {
    .filteri {
        gap: .5rem;
    }
    .filteri-grid-3 {
        gap: .5rem;
        grid-template-columns: repeat(1, minmax(0,1fr));
    }

    .filteri-grid-4 {
        gap: .5rem;
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
    .filteri-actions {
        gap: .5rem;
    }
}

@media only screen and (min-width: 768.1px) {
    .filteri {
        gap: .5rem;
    }

    .filteri-grid-3 {
        gap: .5rem;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .filteri-grid-4 {
        gap: .5rem;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .filteri-actions {
        gap: .5rem;
    }
}

@media only screen and (min-width: 1200px) {
    .filteri {
        gap: .5rem;
    }

    .filteri-grid-3 {
        gap: .5rem;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .filteri-grid-4 {
        gap: .5rem;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .filteri-actions {
        gap: .5rem;
    }
}

@media only screen and (min-width: 1400px) {
    .filteri {
        gap: .5rem;
    }

    .filteri-grid-3 {
        gap: .5rem;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .filteri-grid-4 {
        gap: .5rem;
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .filteri-actions {
        gap: .5rem;
    }
}

/* FLEX BASIS */
@media (max-width: 576px) {
    .flex-basis-sm-50{
        flex-basis: 100%;
    }
}

@media (min-width: 576.1px) {
    .flex-basis-sm-50 {
        flex-basis: 50%;
    }
}

/*Obavijesti*/
.dot-notification {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--fina-notif-dot) !important;
    margin-top: 6px !important;
}

.hide {
    visibility: hidden;
}



.notification-dropdown {
    display: flex;
    flex-direction: column;
    width: 600px;
    max-height: 65vh;
}

.dropdown-menu.notification-dropdown:not(.show) {
    display: none !important;
}

#notification-list {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-color: var(--fina-scrollbar-bar) var(--fina-scrollbar-track);
}

.btn-obavijesti{
    padding: 6px;
}

.btn-obavijesti i{
    color: var(--fina-notif);
}

.list-group-item{
    color:var(--fina-dark-blue);
    background-color: var(--fina-white);
}

.list-group-item:hover {
    color: var(--fina-dark-blue);
    background-color: var(--fina-notif-hov);
}

.unread {
    background-color: var(--fina-notif-unread);
}


@media (max-width: 576px) {
    .notification-dropdown {
        width: 350px;
    }
}

.koraci {
    padding-inline: 0px;
    margin-inline-start: 0px;
}

.koraci-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-inline: 26px 16px;
}

.koraci-list li {
    display: flex;
    flex-direction: row;
    margin-block: 8px;
}

.koraci-list .koraci-dot {
    display: flex;
    justify-content: center;
    position: relative;
    margin-inline-end: 16px;
    transition: all .4s linear;
}

.koraci-list .koraci-dot::after {
    content: "";
    position: absolute;
    display: block;
    height: 8px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--fina-placeholder);
    transition: all .4s linear;
}

.koraci-list .koraci-dot::before {
    content: "";
    display: block;
    margin-top: 12px;
    border: .5px solid var(--fina-border-2);
}

.koraci-list .act .koraci-dot::after {
    content: "";
    transition: all .4s linear;
    background: var(--fina-blue-c);
}

.koraci-list .act.cur .koraci-dot::after {
    height: 10px;
}

.koraci-list .act .koraci-dot::before {
    content: "";
    margin-top: 14px;
    transition: all .4s linear;
    border: .5px solid var(--fina-blue-c);
}

.koraci-list .act.cur .koraci-dot::before {
    content: "";
    margin-top: 14px;
    border: .5px solid var(--fina-border-2);
}

.card-info-container {
    border: 1px solid var(--fina-border-2);
    border-radius: var(--fina-border-radius);
    row-gap: var(--fina-gap-lg);
    overflow:hidden;
}

.card-info-container .layout-row {
    background-color: var(--fina-dt-header);
    padding: 16px;
    border-bottom: 1px solid var(--fina-border-2);
}

.card-info-container .card-info-content {
    padding: 16px;
}

span[nest="0"] {
    display: inline-block;
    font-weight: 700;
}

span[nest="1"]{
    padding-left: 30px;
    display: inline-block;
    font-weight: 600;
}

span[nest="2"] {
    padding-left: 60px;
    display: inline-block;
}

/* HTML: <div class="loader"></div> */
.loader::before {
    content: '';
    display: inline;
    width: 16px;
    padding: 2px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(var(--fina-white) 0 0) content-box, conic-gradient(transparent, var(--fina-blue));
    animation: l3 1s infinite linear;
    margin-right: 8px;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}