html,body {
    font-family: "Roboto"!important;

}

main > .container {
  padding: 50px 0px;
  padding-top: 0px;
}

footer {
    z-index: 999;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;

 box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 border-top: 1px solid #bababa;
}

header {
 box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 padding: 0px;
}

.inputDate {
 position: relative;
}


.inputDate {
  background: url("/assets/fontawesome/svgs/regular/calendar-range.svg") center right no-repeat;
  background-repeat: no-repeat;
  background-size: 26px 26px;
}

#pickupAddress {
    display: none;
}

.quick-buttons {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.header-col{
   padding-right: 5px;
   padding-left: 5px;
   display: flex;
   gap: 5px;
   align-items: center;
}

section.main {
    padding-bottom: 70px;
    margin-top: 10px;
}

#closeButton {
    padding: 5px 10px;
    font-size: 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: fixed; /* Example positioning */
    top: 0px;
    right: 0px;
    z-index: 99999999999;
  }

#footer-navbar {
 padding-top: 2px;
 padding-bottom: 2px;
}

#footer-navbar a.nav-link {
    padding: 0px;
}

i.barcodeDobavljac {
    display: block;
    font-size: 12px;
    color: #343435;
}

.barcode_invalid {
    color: #da1c1c;
}

a.navbar-brand {

}

a.navbar-brand img {
    height: 30px;
}

ul.navbar-nav {
  justify-content: center;
  flex: 1;
  gap: 10px;
} 

ul.navbar-nav li.nav-item {

}

ul.navbar-nav li.nav-item a.nav-link {
 display: block;
 text-align: center;
   font-size: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #333;
  text-transform: uppercase;
}
ul.navbar-nav li.nav-item a.nav-link:hover {
  color: #000;
}
ul.navbar-nav li.nav-item a.nav-link.active,ul.navbar-nav li.nav-item a.nav-link.active .faicon {
  color: #0d6efd;
}


ul.navbar-nav li.nav-item a.nav-link span {
 display: block;
}

ul.navbar-nav li.nav-item a.nav-link .faicon {
 font-size: 1.2em;
}


.footerNavbar {
 display: block;
}
.footerNavbar ul.navbar-nav {
 display: flex;
 justify-content: center;
 flex-direction: row;
 align-items: baseline;
 gap: 5px;
}

.footerNavbar ul.navbar-nav li.nav-item {
 flex: 1;
}

.myavatar {

}

.myavatar span {
    display: block;
  font-size: 14px;
  font-family: "PT Sans Narrow", sans-serif;
}
a.logout-link {
   color: #da1c1c;
   display: block;
   text-decoration: none;
   width: 70px;
   display: flex;
   gap: 5px;
   align-items: center;
}
a.logout-link span {
  font-size: 14px;
font-family: "PT Sans Narrow", sans-serif;

}
a.logout-link:hover {
   color: #535353;
 
}

.example-content {
    display: flex;
    align-items:  flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 95%;
    margin: 1px auto;
    padding-bottom: 30px;
    padding-top: 20px;
  }

  #deviceInfo {
    background-color:#eeeee9;
    color: #333;
    position: relative;
    /*display: none;*/
  }
  #deviceInfo p {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
  }

  html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice */
    background: #333 url('/assets/img/e352b26bbfa8b233050087d6cb32667da3ff809c.gif?v=2') no-repeat 50% 50%;
  background-size: 60px;
    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
  }


  html.loading body {
   opacity: 0.1;
  -webkit-transition: opacity 0.1;
  transition: opacity 0.1;
}

[hidden] {
  display: none !important;
}

.form-full {
    width: 100%;
    margin: 10px auto;
 background-color: #eeeee9;
}

.ptsans {
    font-family: "PT Sans Narrow", sans-serif;
}
.roboto {
    font-family: "Roboto", sans-serif;
}

.mybuttons {
    display: flex;
    flex-direction: row;
    gap:10px;
    justify-content: flex-start;
}

#loadingDiv {
    position:fixed;
    width:100%;
    height: 100%;
    right:0;top:0px;
    left: 0px;   bottom: 0px;

    background-color: rgba(0,0,0,0.7);
    z-index:9999;
    display:block;
    vertical-align: middle;
    text-align: center;
}

#loadingDiv img {
    position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    width:200px;
    height: 200x;
}

.popup_potpis {
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 2px;
    height: 140px;
}

.potpis_canvas {
    display: block;
}

#signature {
    border: 2px dashed #696969;
    display: block;
}

#clear-signature {
 clear: both;
 margin-top: 2px;

}

.popup_prevzem_table {
    font-family: "PT Sans Narrow", sans-serif;
}

.mybadge {
     font-family: "PT Sans Narrow", sans-serif;
 font-size: 14px;
}

.mybadge-partner {
    font-size: 15px;
       font-family: "PT Sans Narrow", sans-serif;
 font-weight: 700;
    }

.popup_files {
    display: block;
    margin: 3px;
    background-color: #E0FFFF;
    padding: 5px;
    display: flex;
    gap:5px;
}


.mycomment {
    border-bottom: 1px solid #bababa;
}

.utovar_scan {
    display: flex;
    justify-content: space-between;
    gap:5px;
    position: relative;
}

#ajax_barcode_sessions {
 width: 100%;
 max-width: 500px;
}

.barcode_sessions {
    margin-top: 10px;
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 14px;
    width: 100%;
}

.barcode_sessions table {
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 15px;
    width: 100%;
}

span.mybarcode {
    display: block;
    font-weight: 700;
}


.utovar_paketi,#lista_utovara {
    margin-top: 20px;
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 14px;
}

.utovar_paketi table,#lista_utovara table {
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 14px;
}

#reader {
    margin-top: 5px;
}

#reader_debug {
    background-color: #000;
    color:#fff;
    font-size: 14px;
    padding: 5px;
    margin: 5px;
    display: none;
}

tr.trFirst , tr.trFirst td {
    background-color: darkseagreen;
    
}

tr.trInvalid , tr.trInvalid td {
    background-color: rgb(245, 175, 175);
    
}

.btn-remove {
    color: #f80101;
}
.btn-remove:hover {
    color: #da1c1c;
}


.btn-remove-barcode {
    color: #f80101;
}
.btn-remove-barcode:hover {
    color: #da1c1c;
}


a.btn-clear-input {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #696969;
    text-decoration: none;
    position: absolute;
    top: 5px;
    right: 50px;
}
a.btn-clear-input i {
 font-size: 1.8em;
}

a.btn-clear-input:hover {
  color: #DCDCDC;
}

.tableFixHead          { overflow: auto; height: 200px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

.tableFixHead, .tableFixHead td {
    font-family: "PT Sans Narrow", sans-serif;
 font-size: 14px;
}

.ulaz_wraper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:10px;
}

.ulaz_location {
 flex-wrap: nowrap;
 flex-grow: 1;
}
.ulaz_slot {
    width: 90px;
}

.ulaz_dobavljac {
    flex-grow: 1;
}

.dropdown-dobavljac {

}

.ulaz_dobavljac {
    width: 100%;    
}

.ulaz_dobavljac_slot {
    width: 200px;
}

#dobavljac {
    width: 100%;
}

.ulaz_dobavljac .bootstrap-select {
    width: 100%!important;    
}

.form-select-location {
    font-size: 15px;
}

.bootstrap-select.slots {

}

.bootstrap-select.slots ul.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
}
.bootstrap-select.slots ul.dropdown-menu li {
    width: 30%;
}

.ulaz_scan {
    display: flex;
    justify-content: space-between;
    gap:5px;
    position: relative;  
    width: 100%;
    margin-top: 15px;
}

.customQuantity {
 width: 90px;
 text-align: center;
}

input#scanQuantity {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    font-size: 22px;
}

input#barcodeTire {
 height: 50px;
 line-height: 50px;
 font-size: 14px;
 font-family: 'Courier New', Courier, monospace;
 padding-left: 2px;
 padding-right: 1px;
}


.ulaz_input {
 position: relative;
 width: 99%;
}



.ulaz_input a.btn-clear {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #696969;
    text-decoration: none;
    position: absolute;
    top: -7px;
    right: -7px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

}
.ulaz_input a.btn-clear i {
 font-size: 1.8em;
}

.ulaz_input a.btn-clear:hover {
  color: #DCDCDC;
}

#browserInfo {

}

#browserInfo p {
    margin: 1px;
    padding: 0px;
    font-size: 14px;
}

.dashboard_slots {
    background-color: #e9e9e9;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px;
    max-width: 500px;
    position: relative;
     flex-wrap: wrap;
}

.dashboard_slots > div {
     border:2px solid #000;
     width: 31%;
    
     text-align: center;
     padding-bottom: 10px;
}

.dashboard_slots > div img {
    width: 100%;
    margin-bottom: 5px;
}

.dashboard_slots > div span {
   display: inline-block;
   font-size: 0.9em;
   margin-left: 5px;
}

.dt_wraper {
    max-width: 600px;
    padding: 0px;
    width: 100%;
}

#datatable-magacin {
    width: 100%;
}
#datatable-magacin thead {
    width: 100%;
}


.dt-ptsans, .dt-ptsans td, .dt-ptsans th{
    font-family: "PT Sans Narrow", sans-serif;
  font-size: 14px;
}

div.magacin_details {

}

div.magacin_details p {
  margin: 0px;
  padding: 0px;
  margin-bottom: 3px;
  font-size: 17px;
}


td.col-action {
    width: 100px;
    word-break: keep-all;
}

.barcode_stanje {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}
.barcode_stanje > div.alert {
    text-align: center;
    padding: 4px;
  flex: 1;
}

.barcode_stanje > div.alert h3 {
    text-align: center;
    font-size: 19px;
}

.barcode_stanje > div.alert h4 {
    text-align: center;

}

.tab-content,.nav-tabs{
    width: 100%;
}

.nav-tabs .nav-item{
    flex: 1;
}

.nav-tabs .nav-item .nav-link{
    width: 100%;
}

.underline-tabs {
    width: 100%;
}


.underline-tabs .nav-tabs {
    border-bottom: 2px solid #e9ecef;
    background: #f8f9fa;
}

.underline-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    padding: 1rem 1.5rem;
    margin-bottom: -2px;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
}

.underline-tabs .nav-link:hover {
    border-bottom-color: #0d6efd50;
    color: #0d6efd;
}

.underline-tabs .nav-link.active {
    border-bottom-color: #0d6efd;
    color: #0d6efd;
}

#myTabContent {
    padding-top: 10px;
}



.barcodeModalPopup {
    padding: 10px;
 }

.barcodeModalPopup ul {
    list-style: none;
}


.tabulator .tabulator-row .tabulator-cell.remove-cell {
    cursor: crosshair  !important; /* or use "crosshair", "hand", etc. */
    background-color: #f8dbdb;
    color: #fff;
    text-align: center;
    justify-content: center;
}

.tabulator .tabulator-row .tabulator-cell.remove-cell:hover {
    cursor: crosshair  !important; /* or use "crosshair", "hand", etc. */
    background-color: #faa7a7;
}


/* Content Animation */
.tab-pane.fade {
    transition: all 0.2s ease-out;
}

.tab-pane.fade.show {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.monitor {
    margin: 10px;
    margin-top: 10px;
}

.monitor h2 {
   background-color: #FFE400;
   margin: 0px;
   padding: 5px 10px;
 color: #000;
 text-align: left;
 font-size: 19px;
  font-weight: 500;
}


.monitor_filters {
    display: flex;
    justify-content: center;
        background-color: #ececec;

 padding: 5px;
 gap: 10px;
 margin: 5px 0px;
 align-items: end;
}
.monitor_filters > div {
  flex: 1;

}

.monitor_filters > div label {
  color: #2b2a2a;
}

.monitor_filters > div.divSearchButton {
 flex: 0;
}
.monitor_filters > div.divSearchButton button {
  width: 90px;
}


.monitor_top_buttons {
    display: flex;
    justify-content:   center;
 padding: 5px;
 gap: 10px;
 margin: 5px 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 align-items: end;
 background-color: #000;
 position: fixed;
 left: 0px;
 right: 0px;
 background-color: #919191; 
 z-index: 9999;
 bottom: 0px;
}
.monitor_top_buttons > div {
  
}

.monitor_top_buttons > div.monitor_search {
    position: relative;
}

#barcodeInput {
    background-color: #fffacd;
    width: 400px;
}

.monitor_items {
    position: relative;
    display: block;
    margin-top: 45px;
    padding-top: 50px;
}

.mitem {
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   margin-bottom: 15px;
   padding:10px;
   padding-bottom: 0px;
}

.mitem_top {
    border-bottom: 2px solid #333;
    padding-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.mitem_top > span {
    
}

span .mitem_orderid {
    
}

span.mitem_barcode {
    background-color: #000;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    padding: 2px 5px;
}

span.mitem_sezona {

}

span.mitem_sezona img {
    height: 20px;
}

span.mitem_vrsta {

}

span.mitem_vrsta img {
    height: 20px;
}

.mitem_deleted {
    background-color: #fabdb5!important;
}

.mitem_main {
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 gap:20px;
}

.mitem_main_left {
 padding-right: 15px;
 flex: 1;
}

.mitem_main_right {
/*  border-left: 2px solid #bababa;*/
flex: 1;
padding-left: 5px;
}

.mitem.even {
 background-color: #fff;
}
.mitem.odd {
 background-color: #eeeeee;

}


.mitem_flex {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.mitem_quantity {
    background-color: #000;
    color: #fff;
    font-weight: 400;
    font-size: 17px;
    padding: 3px;
    margin-right: 5px;
}
.mitem_quantity strong {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
}

.mitem_name {
    color: #0383fa;
    font-weight: 500;
    font-size: 17px;
    padding: 5px;
}

.mitem_info {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.mitem_info span {
   align-items: center;
   align-self: center;
   align-content: center;
}


span.mitem_dostava {

}

span.mitem_dostava img {
 height: 20px;
}

.mitem_bottom {
    margin-top: 15px;
    border-top: 2px solid #333;
    padding-top: 5px;
  
}

.mitem_buttons {
  display: flex;
    gap: 15px;    
}

.monitor_wraper {
    display: block;
 
}

.monitor_wraper > .monitor {
    flex: 1;
    position: relative;
}

.groupedItems {
    background-color: #ececec;
}

.groupedItems h3 {
     border-bottom: 2px solid #bababa;
     font-size: 19px;
     padding-bottom: 3px;
     padding-left: 10px;
     padding-top: 5px;
}
.groupedItems ul {
     display: block;
     height: 80px;
     overflow-y: scroll;
     padding: 3px;
}

.groupedItems ul li {
   display: block; 
       font-family: "PT Sans Narrow", sans-serif;
 font-size: 14px;
 margin: 2px;
 padding: 1px;
}

.magacin_headline {
    margin: 5px auto;
    padding: 5px;
    text-align: center;
}


.magacin_headline span.spanGreen {
  color: #008000;
}

.magacin_headline span.spanRed {
  color: #ca0b15;
}

.magacin_headline span.spanNeutral {
  color: #5f5b5b;
}


.mitem.subitem {
    margin-left: 25px;
    border-left: 2px solid #FFE400;

    padding-top: 0px;
  margin-top: -15px;
  /*background-color: #f5acd0;*/
  margin-right: 35px;
}

hr.hrsep {
    height: 5px;
    line-height: 5px;
    background-color: #000;
    opacity: 1;
}

.paketi {
    display: flex;
  /*  background-color: #fdfcb6;*/
  border: 2px solid #FFE400;
    padding: 2px 7px;
    flex-wrap: no-wrap;
    overflow-x: auto;
}

.paketi .ie-paket {
 display: flex;
 flex-direction: row;
 gap:5px;
 align-items: center;
 border-right: 1px solid #bababa;
 padding-right: 5px;
 padding-left: 5px;
}

.paketi .ie-paket:last-child {

 border-right: none;

}


.paketi .ie-paket .ie-paket-left {

}

.paketi .ie-paket .ie-paket-right {
 display: flex;
 flex-direction: row;
 gap: 10px;
}

a.btn-st-paketa {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    font-size: 12px;
}

a.btn-st-paketa:hover {
    color: #343435;
    text-decoration: underline;
}


span.datum {
    font-size: 12px;
    display: block;
}

a.btn-print-label {
  display: block;
  opacity: 1;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  float: right;
}

a.btn-print-label i.far{
  font-size: 1.4em;
  color: #000;
}
a.btn-print-label:hover {
  display: block;
  color: #000;
}

a.btn-print-label-danger {
    color: #ca0b15;
}

.preDebug {
    background-color: #000;
    color: #fff;
    font-size: 12px;
}


.auto_reload_wraper_content {
    position: relative;

    background-color: #bababa;
    padding: 5px;
}
.auto_reload_wraper_content label {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.auto_reload_wraper_content label span {
 font-size: 14px;
 font-weight: 500;
 line-height: 1;
}
.auto_reload_wraper_content #reload_counter {
    font-weight: 700;
    display: inline-block;
    font-size: 17px;
    color: #0383fa;
 margin-left: 5px;
}


.auto_reload_wraper {
    position: absolute;
    top: 5px;
    left: 80px;
    background-color: #bababa;
    padding: 5px;
}

.auto_reload_wraper label {
   display: flex;
   justify-content: center;
   gap: 10px;
}
.auto_reload_wraper label input {

}
.auto_reload_wraper label span {
 font-size: 14px;
 font-weight: 500;
 line-height: 1;
}
#reload_counter {
    font-weight: 700;
    display: block;
    font-size: 17px;
    color: #0383fa;
}

p.exp {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

.display_buttons {
    margin: 10px auto;
    background-color: #f7f7f5;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.display_buttons .btn-display {
   background-color: #DCDCDC;
   font-size: 22px;
   font-weight: 700;
   text-decoration: none;
   color: #fff;
   text-align: center;
   padding: 15px 20px;
}
.display_buttons .btn-display:hover {
   background-color: #b8b5b5;
}
.display_buttons .btn-display.btn-display-selected {
   background-color: #000;
   color: #fff;
}

.top_content {
    margin-top: 70px;
}

.hiddenOnDisplay {
    display: none;
}

.divRemoved {
    background-color: #fd9d9d;
}
.divAdded {
    background-color: #c5f3c1;
      animation: blink 1s linear infinite;
}


.all-done-wraper {
    text-align: center;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}
img.all-done {
    margin: 20px auto;
    width: 500px;
}

@keyframes blink {
  0%, 100% {
    background-color: #9cec06; /* Starting and ending color (e.g., red) */
  }
  50% {
    background-color: #cbf1c2; /* Middle color (e.g., black) */
  }
}


#inactivePopup {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 99999;
    background-color: rgb(0, 0, 0,0.8);
    text-align: center;
    font-size: 28px; 
    padding-top: 100px;   
    display: none;
}

#inactivePopup h2 {
   color: #ff0000;
}

#inactivePopup h4 {
   color: #ff0000;
}

#inactivePopup p {
  color: #ececec;
  font-size: 20px;
}

#inactivePopup p.pok {
   color: #72b606;

}

#inactivePopup p i.fas {
 font-size: 2em;
 color: #ff0000;
}

a.btn-clear-input {
  width: 30px;
  height: 40px;
  line-height: 40px;
  color: #696969;
  text-decoration: none;
  position: absolute;
  top: 5px;
  right: 0px;
}
a.btn-clear-input:hover {
  color: #DCDCDC;
}

input.item-checkbox:checked {
 
}

.divChecked {
    background-color: #afeeee;
}

.display_mode_wraper {
    width: 90px;
    height: 25px;
    background-color: #e4e4e4;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 3px;
    font-size: 14px;
    z-index: 999999999999;
}
.grouped_mode_wraper {
    width: 90px;
    height: 25px;
    background-color: #e4e4e4;
    position: fixed;
    top: 28px;
    left: 0px;
    padding: 3px;
    font-size: 14px;
    z-index: 999999999999;
}


body.textMode {
     background-color: #fff1fc;
}

body.textMode .container{
     background-color: #fff;
}
body.textMode .monitor_items {
  margin-top: 10px;
  padding-top: 10px;
}
body.textMode .monitor_items .mitem  {
 padding: 0px;
 margin-bottom: 5px;
}
body.textMode .monitor_items .mitem .mitem_top{
 display: none;
}

body.textMode .monitor_items .mitem .mitem_main .mitem_main_right {
 display: none;
}

body.textMode .monitor_items .mitem .mitem_main .mitem_main_left {
  border-right:  none;

}

body.textMode  .mitem.subitem {
  margin-left: 25px;
  border-left: 2px solid #FFE400;
  padding-top: 0px;
  margin-top: 0px;
  background-color: #f5acd0;
  margin-right: 35px;
}

body.textMode  .monitor_top_buttons {
 display: none;
}


.grupisaniHTML {
    background-color: #f5fff3;
    padding: 5px;
    margin: 10px;
    display: none;
}


.grupisaniHTML .item_grupisano{
 border-bottom: 1px dashed #DCDCDC;
 margin-bottom: 2px;
}

.mt60 {
    margin-top: 60px;
}

    img.header-logo {
         max-width: 200px;
    }

.userHeader {
   padding-right: 5px;
   display: flex;
   flex-direction: column;
} 
.userHeader em {
 color: #919191!important;
 font-size: 12px;
}


.userHeaderAdmin,.userHeaderAdmin em {
    color: #72b606!important;

}


.header-col-left {
    
}

#test12 {
    width:310px; height:50px; background-color:#2ad677;
}

.apk_dt_wraper {
    width: 100%;
}

.main-ulaz {
    max-width: 850px;
    padding: 3px;
}


.flatList {
    margin-top: 5px;
    position: relative;
    width: 100%;

   font-family: "PT Sans Narrow", sans-serif;
    font-size: 15px;

}

.flatList .flatListItem {
    margin-bottom: 5px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding: 5px;

    margin-left: 5px;
    margin-right: 5px;
}

.flatList .flatListItem .flatListItemRow {
 display: flex;
 gap: 5px;
 padding: 5px;
 width: 100%;
}

.tdDate {
 font-size: 13px;
}

.tdQuantity  {

}

.tdBarCode {
    flex-grow: 1;
}

.tdSlot {

}

.tdRemove {

}

span.mybarcode9 {
    display: block;
    font-weight: 700;
}

.flatListItemRowSecond {
    border-top: 1px dotted #bababa;
    padding-top: 2px;
    align-items: baseline;
}

.tdDobavljac {

}

.tdDobavljacName {
    font-size: 12px;
    color: #0d6efd;
    display: block;
    word-wrap: none;
    word-break: keep-all;
}
.tdArtikal {
    flex-grow: 1;
}

.tdArtikalName {
    font-size: 13px;   
    font-family: "PT Sans Narrow", sans-serif;
    display: block;
    overflow: hidden;
    line-height: 1;
}

a.flatListItemLink {
    display: block;
    text-decoration: none;
    color: #000;
}

.tdStanjeNaziv {
    flex-grow: 1;
}

span.articleNaziv {
    display: block;
}

h2.stanjeHeadline {
    font-size: 19px;
}

.spanDobavljac {
 color: #0d6efd;
 margin-left: 5px;
}

.spanRadnik {
 margin-left: 5px;
}

.locName {
  font-size: 15px;
  display: block;
  font-weight: 700;  
}

.barcodeNaLokaciji {
    display: flex;
    gap: 3px;
}

.slot_badge {
    border: 1px solid #000;
    padding: 1px;
    background-color: #e9e9e9;
    text-align: center;
    padding-left: 1px;
    padding-right: 1px;
    font-size: 13px;
}


a.moveBarcode {
    color: #000;
    text-decoration: none;
}

input#barcodeSearch {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
  padding-left: 2px;
  padding-right: 1px;
}

ul.listSlotsForBarcode {
 width: 100%;
 list-style: none;
   padding-left: 20px; /* Adjust padding as needed */
 margin-bottom: 0px;
}
ul.listSlotsForBarcode li {
    border-top: 1px dotted #b8b5b5;
    display: flex;
    justify-content: space-between;
    width: 100%;
      padding-left: 10px; /* Space for the custom bullet */
      position: relative;
}

ul.listSlotsForBarcode li:first-child {
    border-top: none;

}

ul.listSlotsForBarcode li::before {
  content: ""; /* Required for pseudo-elements */
  display: inline-block; /* Allows width/height application and positioning */
  width: 5px; /* Size of the circle */
  height: 5px; /* Size of the circle */
  background-color: #292828; /* Circle color */
  border-radius: 50%; /* Makes the square element a circle */
  position: absolute; /* Position the circle relative to the li */
  left: 0; /* Align to the left of the li padding */
  top: 50%; /* Start vertical positioning from the middle */
  transform: translateY(-50%); /* Adjust vertically to center the circle */
}



ul.listSlotsForBarcode li span {
    font-weight: 700;
    margin-right: 5px;
}

span.quantitySuccess {
    color: #008000;
}
span.quantityDanger {
    color: #c90303;
}

.haedline_stats {
    display: flex;
    justify-content:  center;
    gap:10px;
    font-size: 15px;
}

.barcode_akcije {
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
    justify-content:  space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.barcode_akcije a {
   
}

.modalSubtitle {
    margin: 1px;
    padding: 1px;
    font-size: 19px;
}

.source_slots {
    position: relative;
    margin-top: 5px;
}
.source_slots label {
  display: block;
  border-bottom: 1px dotted #DCDCDC;
  margin-bottom: 5px;
  display: flex;
  gap: 10px;
}
.source_slots label:last-child {
  border-bottom:none;
}

.source_slots label input {
  
}
.source_slots label b {
  width: 100px;
}

.source_slots label span {
  
}

span.spanComment9 {
    font-size: 12px;
    color: #343435;
}



.statistika_table {
 max-width: 500px;
}

.statistika_location {
    border: 1px solid #bababa;
    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    margin-left: 5px;
    margin-right: 5px;

}
.statistika_location .statistika_location_header {
   background-color: #a5a5a5;
   padding-left: 0px;
   padding-right: 0px;
   display: flex;
   justify-content: space-between;
   gap: 5px;
   align-items: center;
}


span.badge_slug {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 1px 3px;
    border: 1px solid #bababa;
}

span.badge_location {
    font-weight: 700;
    color: #000;
}


.statistika_location > ul {
  padding-left: 10px; 
}

.statistika_location > ul li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  border-bottom: 1px dotted #e4e4e4;
  margin-top: 3px;
}

.statistika_location > ul li span {
  
}

li.submenu {

}

li.submenu ul {
    padding-left: 12px;
}
li.submenu ul li {
  display: block;
}
li.submenu ul li i {
  display: block;
  font-size: 14px;
}

span.entryEdit {
    cursor: pointer;
}

.quantity-cell {
    background-color: rgb(210, 242, 253);
    text-align: right;
}

.link45 {
    text-decoration: none;
}

.link95 {
    text-decoration: none;
    color: #f80101;
}

i.posQuantityByBarCode {
    margin-right: 10px;
    font-size: 14px;
}
i.posQuantityByBarCodeErr {
    margin-right: 10px;
    font-size: 14px;
    color: #ca0b15;
}

a#togglePending {
 position: relative;
}

.dobavljac_pending_list {
 position: relative;
 display: none;
 height: 160px;
 overflow-y: scroll;
}
.dobavljac_pending_list .flatListItem {
 
}

.dobavljac_pending_list .flatListItem.rowAdded {
 opacity: 0.5;
 background-color: #DCDCDC;
}

.dobavljac_pending_list .flatListItem .flatListItemRow {
 padding: 0px;
 
}

.btn-copy-pending-barcode {
 background-color: #c5f3c1;
 padding-left: 5px;
 padding-right: 5px;
 text-align: center;
 cursor:crosshair;
 padding-bottom: 1px;
}

.evidencija {
    position: relative;
}

.filters {
    position: relative;
    margin: 10px;
}

a.btn-toggle-filters {
 display: flex;
 width: 100%;
 justify-content: space-between;
 align-items: center;
}

a.btn-toggle-filters i {

}

.filters_form {
    position: relative;
}

.filters_form form {
 position: relative;
}

.filter_row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 2px;
}

.filter_row .filter_col {
    flex: 1;
    display: flex;
    gap: 5px;
}

.filter_row .filter_col_block {
    display: block;
    width: 100%;
}


.filter_row .filter_col.col-search-btn {
    flex: 2;
}

.filter_row .filter_col.col-reset-btn {
    flex: 1;
}

.filter_row .filter_col .btn {
   flex-grow:1;
}

.filter_row .filter_col label {
    display: block;
}

.items {
    position: relative;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.itemsHeadline {
 position: relative;
}

.items_table {
    position: relative;

}

.item {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; margin-top: 6px;
 margin-bottom: 6px;
 border-radius: 5px;
 padding: 10px;
}

.item.item_pending {
 border: 1px solid #f78401;
 background-color: #fce8cd;
 /*
 background: url("/assets/fontawesome/svgs/regular/user-clock.svg") center no-repeat;
 background-size: 60px;
 background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),   url("/assets/fontawesome/svgs/regular/user-clock.svg");
*/
}
.item.item_pending i {

}


.item.item_finished {
 border: 1px solid #008000;
 background-color: #dcfddc;
}

.item.item_canceled {
 border: 1px solid #ff0000;
 background-color: #f8cfcf;
}

.item.item_reserved {
 border: 1px solid #7e7e7d;
}

.item .item-left {
  width: 120px;
}

.item .item-right {
 flex-grow: 1;
}

.item img.item_img {
    max-width: 110px;
}

h2.item_headline {
    padding: 2px;
    margin: 1px;
    font-size: 19px;
    font-weight: 700;
    color: #000;
}
h2.item_headline span {
    font-size: 19px;
    font-weight: 400;
    color: #535353;
}

.item ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.item ul li {
   display: block;
   font-size: 15px;
   color: #292828;
}

.item ul li i {
  width: 22px;
}

.item ul li.liLocation {
    color: #0d6efd;
}

.item ul li.liStatus {

}

.item ul li.liStatusFinished {
 color: #008000;
}

.item ul li.liStatusCanceled {
 color: #e01212;
}

a.removeEntry {
    float: right;
    color: #d81010;
    text-decoration: none;
}

a.removeReklamacija {
        float: right;
    color: #d81010;
    text-decoration: none;
}

a.removeReport {
           float: right;
    color: #d81010;
    text-decoration: none; 
}


a.itemOpenDetail {
 text-decoration: none;
 display: block;
}

a.itemOpenDetail:hover {
    background-color: #eeecec;
}


a.reportOpenDetail {
 text-decoration: none;
 display: block;
}

a.reportOpenDetail:hover {
    background-color: #eeecec;
}


a.itemReklamacijaOpenDetail {
 text-decoration: none;
 display: block;
}

a.itemReklamacijaOpenDetail:hover {
background-color: #eeecec;
}


a.itemRezervacijaOpenDetail {
 text-decoration: none;
 display: block;
}

a.itemRezervacijaOpenDetail:hover {
background-color: #eeecec;
}

tr.trTotal , tr.trTotal td {
    background-color: #c5f3c1;
}


.entryImages {
    position: relative;
    margin: 10px 3px;
    overflow-x: scroll;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
}

.entryImages div {
 position: relative;
 margin-right: 10px;
 border: 1px solid #bababa;
 border-radius: 2px;
}

.entryImages div a {
 position: relative;
}

.entryImages div a img {
  max-height: 120px;
}

.reklamacijaImages div a img {
    max-height: 200px;
}

.entryImagesDropbox {
    border: 2px dashed #bababa;
    padding: 5px;
    text-align: center;
    min-height: 60px;
    background-color: #ececec;
    border-radius: 5px;
}


.entryImagesDropbox .dbInfo {
    text-align: center;
    background-color: #fff;
    padding: 5px 10px;
    max-width: 250px;
    margin: auto;
    margin-top: 7px;
}

.add_entry {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.add_entry .filter_row {
 margin-bottom: 10px;
} 

.datetimeWraper {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

#ajax_response_add_entry {
    position: relative;
    margin-top: 5px;
}

a.remove75 {
 position: absolute!important;
 display: block;
 top: -10px;
 right: -10px;
 width: 20px;
 height:20px;
 text-align: center;
 background-color: #fff;
}
a.remove75 i {
 color: #c90303;
 font-size: 1.3em;
}

.updateOk {
    border: 1px solid #008000;
}

.apk_stats {
    position: relative;
}

.apk_stats h2.accordion-header button.collapsed {
  background-color: #ebe9e9;
}


.apk_stats h2.accordion-header button {
    font-weight: 700;
}

.table-ptsans,.table-ptsans tr td, .table-ptsans tr th {
      font-family: "PT Sans Narrow", sans-serif;
 font-size: 14px;
}

span.questionSLO {
    font-style: normal;
    color: #161616;
    font-size: 14px;
    display: block;
}

span.questionEN {
    font-style: italic;
    color: #696969;
    font-size: 14px;
    display: block;
}

td.tdReports {
    width: 60px;
    background-color: #f0f8f8;

}
td.tdReports label.lblReports {
    display: block;
    height: 100%;
    width: 100%;
}

.lblReportsYes {
    background-color: #018501;
    color: #fff;
}
.lblReportsNo {
    background-color: #d60e07;
    color: #fff;
}


.reports_headline {
 font-weight: 400;
 font-size: 15px;
 display: flex;
 gap: 7px;
 justify-content: space-between;
 color: #131313;
}

.reports_headline span {

}

.reports_headline span.rh_location {
     color: #0383fa;
}

.reports_headline span.rh_day {
    
}

.reports_headline span.rh_username {
    
}

tr.trSmallHeadline {

}

tr.trSmallHeadline th {
    font-size: 12px;
}

td.tdBlag,th.tdBlag {
     background-color: #cafffc;
}

td.tdNovac,th.tdNovac {
     background-color: #f8c9c9;
}

.card-isAdmin {
    background-color: #fcfbbf;
    border: 2px solid #edf850;
}

table.table-user-manage, table.table-user-manage tr td {
}


span.userPassword {
    font-family: 'Courier New', Courier, monospace;
}

@media screen and (max-width: 400px){
    header {

    }
    #footer-navbar {

    padding-bottom: 5px;
    }

    .statistika_table {
        max-width: 400px;
    }

    .modal-body {
        padding: 5px;
    }
    .barcode_stanje {
        gap: 5px;
    }
    .barcode_stanje > div.alert h3 {
        text-align: center;
        font-size: 17px;
    }

    h2.stanjeHeadline {
        font-size: 15px;
    }

    .tabulator-popup {
        background-color: #fff;
        width: 300px;
        right: 0px;
        bottom: 0px;

        position: fixed;
        top: 50%!important;
        left: 50%!important;
        transform: translate(-50%, -50%);

    }

    .main-ulaz {
        max-width: 320px;
    }

    #test12 {
        background-color: #000;
    }

    a.logout-link span {
    display: none;
    }


    #PrevzemniList_modal .modal-body {
        padding: 0px;
    }
    .logo img {
        max-width: 150px;
        margin:auto;
    }

    img.header-logo {
         max-width: 150px;
    }

    .header-row {
    padding-bottom: 5px;
    padding-top: 2px;
    }

    .userHeader {
        font-size: 14px;
    }


}


@media print {
    .radnik_login,.utovar_scan,#reader,#reader_debug,.btn-remove {
        display: none;
    }
    .logo {
        width: auto ;
      }

 }