:root {
  --espediter-white             : #FFFFFFFF;
  --espediter-black             : #000000FF;
  --espediter-component-light   : #E2E2E2FF;
  --espediter-component-dark    : #adb5bd55;
  --espediter-component-dark2   : #1B1B1BFF;
  --espediter-component-enabled : #FFFFFFFF;
  


  --espediter-primary-blue-wrong: #0094FFFF;
  --espediter-primary-blue:       #0094FFFF; /*#63AECEFF*/;
  --espediter-primary-blue-high:  #63AECEFF;  
  --espediter-marked:             #FF00FFFF;
  --espediter-selected:           #00BBFFFF;
  --espediter-success:            #28A745FF;
  --espediter-error:              #FF0000FF;
  --espediter-warn:               #404040FF;
  --espediter-info:               #0000FFFF;
  
  --espediter-delivered:          #28A745FF;
  --espediter-deliveryna:         #808080FF;
  --espediter-in-transit:         #28B1A0FF;
  --espediter-in-port:            #32A2C6FF;
  --espediter-on-vessel:          #4A84BEFF;
  --espediter-new:                #4287f5FF;

  --espediter-stop:               #2929f766;
  --espediter-highlighted:        #ADDBFCFF;
  --espediter-highlighted-over:   #8CCFFEFF;

  --espediter-urgent-first:       #F8D7DAFF;
  --espediter-urgent-second:      #ECCCCCFF;
  --espediter-urgent-third:       #DFC2C4FF;
  --espediter-urgent-fourth:      #E5C7CAFF;

  --espediter-stop-first:         #FFF3CDFF;
  --espediter-stop-second:        #FCE8B2FF;
  --espediter-stop-third:         #EED8A5FF;
  --espediter-stop-fourth:        #E3CC96FF;

  --espediter-delivered-first:    #D1E7DDFF;
  --espediter-delivered-second:   #C7DBD2FF;
  --espediter-delivered-third:    #BCD0C7FF;
  --espediter-delivered-fourth:   #C1D6CCFF;

  --espediter-deliveryna-first:   #E2DAEFFF;
  --espediter-deliveryna-second:  #D7CFE3FF;
  --espediter-deliveryna-third:   #CCC4D7FF;
  --espediter-deliveryna-fourth:  #C2BACCFF;
}

.w-10                               {width: 10% !important;}
.w-20                               {width: 20% !important;}
.w-30                               {width: 30% !important;}
.w-40                               {width: 40% !important;}
.w-60                               {width: 50% !important;}

/*common*/
.btn-primary                        {--bs-btn-bg: var(--espediter-primary-blue); --bs-btn-border-color: var(--espediter-primary-blue); --bs-btn-hover-bg: var(--espediter-primary-blue-high); --bs-btn-hover-border-color: var(--espediter-primary-blue-high);}

*                                   { margin: 0px; padding: 0px; }
html, body                          { margin: 0px; padding: 0px; height: 100%; background-color: var(--espediter-white); min-width:320px; font-size:14px;}

.login_logo                         { width: 200px; margin: 20px 0px 20px 0px;}
.login_background                   { height: 100%; background-image: url("/background_v2.png"); background-position: center; background-repeat: no-repeat; background-size: cover;}

a                                   { color: var(--espediter-primary-blue)}
.nav-link                           { color: var(--espediter-primary-blue)}
.nav-link:hover                     { color: var(--espediter-primary-blue)}
.nav-info                           { margin:0px 0px 0px 30px; line-height:40px;}
.nav-info-title                     { margin:0px 0px 0px 20px; line-height:40px; font-weight: bold;}

#main_menu                          { width: 370px; top: 50px; z-index: 10; background-color: var(--espediter-white); box-shadow: 2px 2px var(--espediter-component-dark); }
#main_menu_button                   { height: 48px; line-height: 48px; background-color: var(--espediter-black); display:inline-block; margin: 0px 0px 0px  0px; padding: 0px; width:48px;       background-repeat: no-repeat; background-position:10px ; background-size:50%; background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCc+PHBhdGggc3Ryb2tlPSdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNTUpJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1taXRlcmxpbWl0PScxMCcgc3Ryb2tlLXdpZHRoPScyJyBkPSdNNCA3aDIyTTQgMTVoMjJNNCAyM2gyMicvPjwvc3ZnPg==);}

#header_brand                       { height: 48px; line-height: 48px; background-color: var(--espediter-black); display:inline-block; margin: 0px 0px 0px 10px; padding: 0px; min-width: 170px; color: var(--espediter-white); }
#header_logo                        { height: 24px; line-height:24px; margin:auto}
#header_title                       { height: 48px; line-height: 48px; background-color: var(--espediter-black); display:inline-block; margin: 0px 10px 0px 0px; padding: 0px; min-width: 200px; color: var(--espediter-primary-blue-high);  font-weight: bold; text-align:right;}
#main-search-panel                  {background-color: var(--espediter-component-light);}
#main-search,
#main-search:focus,
#main-search:active,
#main-search:focus-visible          { box-shadow: none; height: 40px; line-height: 40px; border:0px; background-color: var(--espediter-component-light); width:100%; margin:auto; display:inline-block; border-radius: 0px; padding: 0px 0px 0px 15px; outline:none; min-width: 300px;}
#main-search-found-items            { height: 40px; line-height: 40px; border:0px; background-color: var(--espediter-component-light); width:40px; margin:auto 10px auto 0px; display:inline-block; border-radius: 0px; padding: 0px 0px 0px 0px; outline:none; color: var(--espediter-component-dark2);}

#main-footer                        { /*height:52px;*/}
.footer-tenant-logo                 { height:30px}


.block-menu-link-item > a           { color: var(--espediter-black);}
.block-menu-link-item > a:hover     { color: var(--espediter-primary-blue)}
.block-menu-link-item:hover         { background-color: var(--espediter-component-light);}
.block-menu-link-item .full-li-link { display: block; width: 100%; height: 100%; padding: 0.5rem 1rem; text-decoration: none;}

.buttonbar                          { background-color:  var(--espediter-white); line-height: 50px; border-bottom: 1px solid var(--espediter-component-dark); font-size:14px;}
.buttonbar_label                    { width: 100px;}
.buttonbar-btn                      { width: 100%  }
.buttonbar-element                  { margin-left:10px;}
.buttonbar_select                   { margin-right:10px; font-size:12px; }
.buttonbar-btn-container            { margin-right:10px; margin-left:10px; }

/*.main-scrollable-content            {overflow: auto; margin: 4px; border-radius:8px; border:1px solid var(--espediter-component-light);}*/
.main-scrollable-content            {
/* Keep existing styles */
    overflow: auto;
    margin: 4px; 
    border-radius: 8px; 
    border: 1px solid var(--espediter-component-light);
    
    /* ADD: Essential properties for height management */
    height: 100vh; /* Or use height: 100% if the parent height is already defined */
    display: flex;
    flex-direction: column; /* Allows nested children (charts/kanban) to manage vertical space */
    box-sizing: border-box; /* Ensures padding/border don't add to the overall height */
    /*padding: 10px; /* Add internal padding for content spacing */
}

.form_label_error                   { color:var(--espediter-error) !important;}
.import_log_info                    { color:var(--espediter-info)  !important;}
.import_log_warn                    { color:var(--espediter-warn)  !important;}
.import_log_err                     { color:var(--espediter-error) !important;}

mark.normal                         { background-color: var(--espediter-marked);   color: inherit; padding: 2px 0px 2px 0px; border-radius:2px;}
mark.selected                       { background-color: var(--espediter-selected); color: inherit; padding: 2px 0px 2px 0px; border-radius:2px;}
.import_containers_progress_bar     { background-color: var(--espediter-success)}

/*modals*/
.modal                              { --bs-modal-width: auto !important;}
.modal-type-form                    { max-width: 1024px}
.modal-type-dialog                  { width: 400px; font-size:10px;}

.spinner_anim                       { width:64px; height:64px; margin:auto; display: none; }
.success_image                      { width:64px; height:64px; margin:auto; display: none; }
.error_image                        { width:64px; height:64px; margin:auto; display: none; } 
.warn_image                         { width:64px; height:64px; margin:auto; display: block; }
.text-confirmation                  { font-size:16px; overflow-wrap: break-word; color:var(--espediter-warn); margin:10px;}
.sub-modal-btn-row .btn             { height:32px; line-height:32px}

#radius-slider                      { width:80%; margin-top:10px;}
#slidecontainer                     { margin-top:10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; height:40px; background-color:var(--espediter-white); width:300px; text-align:center;}

/*.esp-form-group                   {height:100%; display: flex; flex-direction: column; justify-content: space-between;}*/

.esp-form                           {width:100%}
.esp-form-group                     {height:100%; display: flex; flex-direction: column; justify-content: start;}
.esp-component input                {background-color:var(--espediter-component-enabled)}
.esp-component select               {background-color:var(--espediter-component-enabled)}
.esp-component textarea             {background-color:var(--espediter-component-enabled)}
.no_tracking_image {
  max-width: 100%;
  height: auto;
}


.kanban-column-new {background:#4287f5}
.kanban-column-onvessel {background:#4A84BE}
.kanban-column-inport {background:#32A2C6}
.kanban-column-intransit {background:#28B1A0}
.kanban-column-delivered {background:#28A745}
/*.kanban-column-delivered {background:#198754FF}*/
.kanban-column-deliveryna {background:#808080}
.kanban-container {flex-grow: 1; display: flex; min-height: 0; }
  

@media (min-width: 1200px) {
  .kanban-col-wrapper { display: flex; flex-direction: column; height: 100%;}
  .kanban-column      { flex-grow: 1; overflow-y: auto; overflow-x: hidden; min-height:500px}  
  .kanban-card        { display: flex; flex-direction: column;}
  .kanban-icons       {justify-content: center;}
  .kanban-info        {justify-content: center;}
}

@media (min-width: 1600px) {
  .kanban-column {min-height:500px}   
  .kanban-info  {display: flex; flex-direction: column; width:50%; justify-content: center;}
  .kanban-icons {display: flex; flex-direction: row;    width:50%; justify-content: center;}

}

@media (max-width: 1200px) {
  .kanban-info   {display: flex; flex-direction: column; width:50%; justify-content: center;}
  .kanban-icons  {display: flex; flex-direction: row;    width:50%; justify-content: center;}
  .kanban-column {min-height:0px}  
}

.kanban-container-card {cursor: pointer;}
.kanban-container-card:hover {background-color: #f0f0f0;}

.plate-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px; /* space between truck and trailer plates */
  width: 70px; /* approximate width */
}

.plate {
  width: 100%;
  height: 26px; /* approximate height like SVG */
  border: 3px solid; /* border thickness */
  border-radius: 5px; /* rounded corners */
  background-color: #f8f8f8; /* or #fff for trailer */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.plate-text {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 11px; /* adjust font size */
  color: #444;
  white-space: nowrap;
  width:90%;
}

.hide-scroll {
  overflow: auto;
  -ms-overflow-style: none;   /* IE and older Edge */
  scrollbar-width: none;      /* Firefox */
}

.dashboard-regplates:hover .plate {background-color: #afafaf;}