.container-fluid {
  margin: 0;
  padding: 0;
  outline: 0
}

html,
body {
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Noto Serif Khmer', 'Noto Sans Khmer', sans-serif; */
  /* font-size: 14px; */
  /* font-weight: 300; */
  background: #494e48;
  height: 100%;
  overflow: hidden;
}

.btn {
  padding: .375rem !important;
  color: #f1f1f1;
  font-size: 15px;
  /* 494e48 */
  /* text-transform: lowercase; */
}

.btn:hover,
.btn:focus {
  color: #fff;
  text-decoration: none;
  box-shadow: none;
}

.stronger {
  color: #8bc34a !important;
  font-weight: 700
}

/* .apexcharts-element-hidden {
  opacity: 1 !important;
} */

/* .fa-times-circle::before {
  content: "\f07a";
  font-family: 'Font Awesome 5 Free';
  margin-right: 10px;
  -webkit-text-stroke: 0.5px white;
  color: transparent;
} */

/* Custom z-index for SweetAlert2 */
.swal2-popup {
  z-index: 999999999 !important;
}

.swal2-container {
  position: fixed !important;
  /* Ensure fixed positioning */
  z-index: 999999999 !important;
  /* Higher than the Bootstrap modal */
}

.icon_font_awes_ta {
  /* color: transparent !important; */
  border: 1px solid #c5c5c5;
  /* color: #1abd12; */
  /* background-color: #54794a; */
  /* font-weight: lighter; */
  /* -webkit-text-stroke-color: #e08ab4; */
  /* -webkit-text-stroke: 1px background-color; */
  /* opacity: 0.5; */
  border-radius: 5%;
}

.draw_traffic_accident_stats_ygbr {
  /* position: absolute;
  top: 81%;
  left: 0;
  width: 100%; */
  font-family: 'PT Sans', serif;
  font-weight: 600;
  font-size: 1.2em;
}

/* .table-hover tbody tr:hover td { */
.table_response_draw_map_element_style tr:hover td {
  background-color: #fffae9;
  /* cursor: pointer; */
}

/* .table tr:hover td:first-child { */
.table_response_draw_map_element_style tr:hover td:first-child {
  /* border-left: 1px solid #ffc927; */
  /* color: #d14891; */
  background-color: #fff5d6;
  cursor: pointer;
}

/* .fixedContainer { */
/* position: fixed; */
/* z-index: 1030; */
/* width: 100%;
*/

/* .fixedContainer {
  position: sticky;
  top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
} */

/* .header {
  position: sticky;
  top: 0;
} */

#accordionPanelLeftNav .accordion-header {
  position: -webkit-sticky;
  position: sticky;
  top: 1px;
}

/* .accordion-body {
  scroll-padding-top: 40px;
} */

/* #accordionPanelLeftNav .accordion-body {
  top: max(50px, 10%);
  margin-top: 50px;
} */

/* .container {
  width: 600px;
  height: 300px;
  overflow: auto;
} */

/* .table_response_draw_map_element_style tr:hover td:last-child {
  border-right: 1px solid #ffc927;
} */

.div-fixed-top {
  position: fixed;
  /* top: 0; */
  /* left: 60px; */
  /* right: 8px; */
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  white-space: nowrap;
  z-index: 99999;
  top: 0;
  left: -3px;
  /* background-color: rgba(27,80,119,0.3); */
  background-color: rgba(0, 0, 0, 0.6);
  border-right: 1px solid #000;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.5s;
  padding-top: 30px;
  font-size: 14px;
}

.sidebar_left {
  /* height: 100%; */
  height: auto;
  width: 0px;
  position: fixed;
  white-space: nowrap;
  z-index: 99999;
  top: 0;
  left: -3px;
  margin-left: 48px;
  margin-top: -8px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.5s;
  padding-top: 30px;
  font-size: 14px;
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
  opacity: 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.20);
  opacity: 0.20;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(241, 241, 241, 0.20);
  opacity: 0.20;
}

.sidebar a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  /* display: block; */
  /* opacity: 0; */
  transition: 0.5s;
}

.sidebar_left a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  /* display: block; */
  /* opacity: 0; */
  transition: 0.5s;
}

.sidebar a:hover {
  color: rgba(255, 255, 255, 1);
}

.sidebar_left a:hover {
  color: rgba(255, 255, 255, 1);
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  margin-left: 50px;
  cursor: pointer;
  user-select: none;
}

.sidebar_left .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  margin-left: 50px;
  cursor: pointer;
  user-select: none;
}

.openbtn {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openAdmin1 {
  position: absolute;
  top: 208px;
  font-size: 18px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openbtn1 {
  position: absolute;
  top: 46px;
  font-size: 18px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openbtn:hover {
  background-color: transparent;
}

button:focus {
  outline: none;
}

#main {
  transition: margin-left .5s;
  height: 100%;
  width: 100%;
  /* padding: 16px; */
  position: fixed;
  /* background-color: #fff; */
  z-index: 1;
}

.bg_t {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/bg_3.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: 9
}

.bg {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color:#226629;
  /* background: url(../images/bg_cambodia_1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden; */
  z-index: 9
}

.container_over {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align: center;
}

.container_over_thor {
  position: absolute;
  left: 50%;
  top: 10%;
  -webkit-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);
  z-index: 999;
  text-align: center;
}

.text_effect_st {
  color: #353d3e;
  /* font-weight: 900; */
  /* text-transform: uppercase; */
  text-shadow: 1px 1px 1px rgb(255, 255, 255);
  /* text-shadow: 2px 2px 2px #000, 3px 3px 3px #000; */
}

.text_effect_st_tabular_title {
  /* color: #ffc107; */
  text-shadow: 2px 2px 2px #000000;
}

.text_effect_menu {
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Noto Sans Khmer', 'Noto Serif Khmer', sans-serif; */
  color: #f7cf60;
  font-weight: 500;
  font-size: 1.0em;
  /* text-transform: uppercase; */
  /* text-shadow: 1px 1px 1px #e64824; */
  /* text-shadow: 2px 2px 2px #000, 3px 3px 3px #000; */
}

.text_effect_menu_bold {
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Noto Sans Khmer', 'Noto Serif Khmer', sans-serif; */
  color: #eaedee;
  font-weight: 550;
  font-size: 1.4em;
  /* text-transform: uppercase; */
  /* text-shadow: 1px 1px 1px #e64824; */
  /* text-shadow: 2px 2px 2px #000, 3px 3px 3px #000; */
}

.text_total_crashes {
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Noto Sans Khmer', 'Noto Serif Khmer', sans-serif; */
  color: #f7ba29;
  font-weight: 900;
  font-size: 1.8em;
}


.lead {
  all: unset;
  color: white;
}

.title_cen {
  color: #d9ddde;
}

.other_color_span {
  color: #4e5050;
}

@media only screen and (max-width:1536px) {
  .sidebar {
    font-size: .95rem;
  }
}

@media only screen and (max-width:1536px) {
  .sidebar_left {
    font-size: .95rem;
  }
}

@media only screen and (max-width: 1366px) {
  .sidebar {
    font-size: .95rem;
  }
}

@media only screen and (max-width: 1366px) {
  .sidebar_left {
    font-size: .95rem;
  }
}

/* Accordion */

.sidebar .accordion-body {
  color: #fff;
  padding-left: 60px;
  margin-left: 0px;
  white-space: normal !important;
}

.sidebar_left .accordion-body {
  color: #010b04;
  /* padding-left: 21px;
  margin-left: 0px; */
  white-space: normal !important;
}

/*
.sidebar_left .panel-heading {
  background-color: #000;
} */

/* .sidebar_left .accordion-toggle {
  background-color: #000;
  display: block;
  padding: 1px;
  margin: -10px -15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sidebar_left .accordion-toggle.collapsed {
  background-color: white;
} */

.sidebar_left .accordion-header {
  color: #fff;
  background-color: #000;
}

.sidebar .accordion-item,
.sidebar .accordion-button {
  background-color: transparent !important;
  text-decoration: none !important;
  border: none;
  box-shadow: none;
  /* border-bottom: 0 !important; */
}

.sidebar_left .accordion-item,
.sidebar_left .accordion-button {
  /* background-color: transparent !important; */
  /* opacity: 0.85; */
  color: rgba(black, .125);
  text-decoration: none !important;
}

.sidebar_left .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.sidebar_left .accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #494e48;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
  border-left: 2em solid #ffc927;
}

.sidebar_left .accordion-button.collapsed {
  background-color: #f4f5f4;
  box-shadow: inset 0 -1px 0 rgba(151, 145, 145, 0.13);
}

/* .sidebar_left .accordion-button.collapsed .span_draw_person_c {
  background-color: #f0f1f0;
  border: 1px solid #8b8f92 !important;
} */

.span_draw_person_c {
  padding: 6px;
  text-align: right;
  /* align-items: right; */
  font-size: 0.95em;
  color: #ffc927;
  background-color: #494e48;
}

.span_draw_static_page_c {
  padding: 6px 12px 6px 12px;
  text-align: right;
  /* align-items: right; */
  font-size: 1.05em;
  color: #ffc927;
  background-color: #4c5257;
}

/* .sidebar_left .accordion-button::after {
  -webkit-filter: grayscale(1) invert(1);
  filter: grayscale(1) invert(1);
} */

/* .sidebar_left .accordion-button::before { */
.sidebar_left .accordion-button:not(.collapsed)::after {
  -webkit-filter: invert(50%);
  filter: invert(50%);
}

.sidebar .accordion-button::before {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 10px;
  margin-right: 10px;
  content: "";
  background-image: url(../images/arrow-verde.png);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}

.sidebar .accordion-button:not(.collapsed)::before {
  background-image: url(../images/arrow-verde.png);
  transform: rotate(-180deg);
}

.sidebar .accordion-button:not(.collapsed)::after,
.sidebar .accordion-button::after {
  background-image: unset !important;
}

.sidebar .accordion-button:not(.collapsed) {
  color: #fff;
}

.sidebar .accordion-button {
  transition: ease .6s;
}

button>span {
  padding: 0 6px 0 0px;
}

.sidebar .accordion {
  padding-top: 15px;
}

.btn-colour-1 {
  color: #010b04;
  background-color: #8fc567;
  border-color: #8fc567;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  /* border-radius: 0; */
}

.btn-colour-1:hover,
.btn-colour-1:active,
.btn-colour-1:focus,
.btn-colour-1.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #a0ca80;
  color: #010b04;
  border-color: #a0ca80;
}

.btn-colour-2 {
  color: #fff;
  background-color: #344e08;
  border-color: #344e08;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  /* border-radius: 0; */
}

.btn-colour-2:hover,
.btn-colour-2:active,
.btn-colour-2:focus,
.btn-colour-2.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #47601b;
  color: #e6e6e6;
  border-color: #47601b;
}

.btn-colour-3 {
  color: #ffffff;
  background-color: #54794a;
  /*#e3d47a; - ovo je zuta boja*/
  border-color: #54794a;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  /* border-radius: 0; */
}

.btn-colour-3:hover,
.btn-colour-3:active,
.btn-colour-3:focus,
.btn-colour-3.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #6e9164;
  color: #f5f5f5;
  border-color: #6e9164;
}

.btn-colour-4 {
  color: #ffffff;
  /* background-color: #f2a61d; */
  background-color: #ffc107;
  /*#e3d47a; - ovo je zuta boja*/
  border-color: #f2a61d;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  /* padding: .15em !important; */
  /* margin-left: .1em;
  margin-right: .1em; */
  /* border-radius: 0; */
}

.btn-colour-4:hover,
.btn-colour-4:active,
.btn-colour-4:focus,
.btn-colour-4.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #f3ae31;
  color: #f5f5f5;
  border-color: #f2a61d;
}

.button_orange_btn {
  /* all: unset; */
  min-width: 1.8em;
  padding: .45em !important;
  margin-left: .1em;
  margin-right: .1em;
  font-size: 0.95em;
  /* color: #222724;
  margin-top: 9px; */
  /* color: #222724; */
}

.button_custom_sm {
  /* all: unset; */
  min-width: 1.8em;
  padding: .45em !important;
  margin-left: .1em;
  margin-right: .1em;
  font-size: 0.95em;
  /* color: #222724; */
}

.button_custom_sm_small {
  /* all: unset; */
  min-width: 1.8em;
  padding: .4em !important;
  margin: .1em, .1em, .1em, 0em;
  /* margin-top: .1em;
  margin-left: .1em;
  margin-right: .1em; */
  font-size: 0.75em;
  /* color: #222724; */
}

.button_custom_sm_small_modify {
  /* all: unset; */
  min-width: 1.8em;
  padding: .4em !important;
  margin: .1em, .1em, .1em, 0em;
  /* margin-top: .1em;
  margin-left: .1em;
  margin-right: .1em; */
  font-size: 0.85em;
  margin-top: 23px;
  margin-left: -12px;
  height: 33px;
  width: 33px;
  /* color: #222724; */
}

.button_custom_sm_smaller {
  /* all: unset; */
  min-width: 1.8em;
  padding: .2em !important;
  margin-left: .1em;
  margin-right: .1em;
  font-size: 0.72em;
  /* color: #222724; */
}

.subtitle_tabular {
  margin-top: 12px;
  font-weight: bold;
  font-size: 0.95em;
  color: #f6bd28;
}

.nav_text_sm {
  font-size: 0.95em;
}

.closebtn_thor_treats {
  /* position: absolute; */
  /* top: 0;
  left: 0; */
  font-size: 16px;
  margin-top: -18px;
  /* margin-right: 180px; */
  cursor: pointer;
  user-select: none;
  color: #fff;
  z-index: 9999999999;
}

.closebtn_thor_FAQ {
  /* position: absolute; */
  /* top: 0;
  left: 0; */
  font-size: 16px;
  margin-top: 0px;
  /* margin-right: 180px; */
  cursor: pointer;
  user-select: none;
  color: #fff;
  z-index: 9999999999;
}

/* ----drugi navbar top--- */
.sidebar_top {
  /* height: 100%;
  width: 0; */
  height: 0;
  width: 100%;
  position: fixed;
  white-space: nowrap;
  z-index: 99999999999;
  top: 0;
  left: -3px;
  /* background-color: rgba(27,80,119,0.3); */
  background-color: rgba(0, 0, 0, 0.6);
  border-right: 1px solid #000;
  /* overflow-x: hidden;
  overflow-y: auto; */
  overflow-y: hidden;
  overflow-x: auto;
  transition: 0.5s;
  /* padding-top: 30px; */
  padding-top: 0px;
  font-size: 18px;
}

.sidebar_top a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  /* display: block; */
  /* opacity: 0; */
  transition: 0.5s;
}

.sidebar_top a:hover {
  color: rgba(255, 255, 255, 1);
}

.sidebar_top .closebtn_top_100 {
  position: absolute;
  top: 0;
  /* right: 0; */
  right: 0;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 0px;
  cursor: pointer;
  user-select: none;
}

.sidebar_top .closebtn_left_slide {
  position: absolute;
  top: 0;
  /* right: 0; */
  right: 0;
  font-size: 0.9em;
  margin-top: 10px;
  margin-right: 0px;
  cursor: pointer;
  user-select: none;
}

.sidebar_left .closebtn_leftNav {
  position: absolute;
  top: 0px;
  /* right: 0; */
  left: 0px;
  font-size: 21px;
  margin-top: -6px;
  margin-left: 0px;
  cursor: pointer;
  user-select: none;
  color: #494e48;
  /* transition: 2s; */
}

.sidebar_top .closebtn_top {
  position: absolute;
  top: 0;
  /* right: 0; */
  left: 0;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 50px;
  cursor: pointer;
  user-select: none;
}

.sidebar_top .closebtn_top_black {
  position: absolute;
  top: 0;
  /* right: 0; */
  left: 0;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 50px;
  cursor: pointer;
  user-select: none;
  color: #494e48;
}

.sidebar_top .submitbtn_top {
  position: absolute;
  top: 0;
  right: 60px;
  margin-top: 130px;
}

.heder_rightResize {
  position: absolute;
  /* top: 0px; */
  right: 45px;
  /* left: 0px; */
  font-size: 24px;
  margin-top: -1px;
  /* margin-right: 90px; */
  cursor: pointer;
  user-select: none;
  color: #5f676e;
}

.openbtn_top {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 99999;
  opacity: 1;
  user-select: none;
  overflow-y: scroll;
}

.openbtn_top:hover {
  background-color: transparent;
}

.openbtn_top_100 {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 9999999;
  opacity: 1;
  user-select: none;
}

.openbtn_top_100:hover {
  background-color: transparent;
}

.openbtn_top_stick {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openbtn_top_stick:hover {
  background-color: transparent;
}

.openbtn_admin_page {
  font-size: 18px;
  /* width: 30px; */
  cursor: pointer;
  /* background-color: transparent; */
  /* color: #ffffff; */
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 9999999;
  opacity: 1;
  user-select: none;
}

.openbtn_admin_page:hover {
  background-color: #ffca2c;
  /* transparent; */
}

.openbtn_left_slide {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 9999;
  opacity: 1;
  user-select: none;
}

.openbtn_left_slide:hover {
  background-color: transparent;
}

.openbtn_left_heatmap {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 9999;
  opacity: 1;
  user-select: none;
}

.openbtn_left_heatmap:hover {
  background-color: transparent;
}

.openbtn_left_cost_benefit {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openbtn_left_cost_benefit:hover {
  background-color: transparent;
}

.openbtn_left_crash_dashboard {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openbtn_left_crash_dashboard:hover {
  background-color: transparent;
}

.openbtn_left_new_crash {
  font-size: 18px;
  width: 30px;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 12px 0 0;
  margin-left: 12px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 99999;
  opacity: 1;
  user-select: none;
}

.openbtn_left_new_crash:hover {
  background-color: transparent;
}

/* -----datepicker stylish------- */
.datepicker {
  background-color: #fff;
  border-radius: 0 !important;
  align-content: center !important;
  padding: 21px !important;
  border: 1px solid #a0ca80 !important;
}

.datepicker table tr td {
  padding: 9px;
  margin: 3px;
  /* background-color: #123456; */
  border: 1px solid #e5e5e5 !important;
}

/* .datepicker table tr td.bg:hover {
  background-color: #123456;
} */
.spinner_ta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.90;
  z-index: 999999;
}

.smaller_font_t {
  font-size: 0.95em;
}

.smallest_font_t {
  font-size: 0.83em;
}

.small_font_white {
  font-size: 0.90em;
  color: #ffffff;
}

.small_font_t_green {
  /* font-family: 'Roboto', sans-serif; */
  font-size: 0.90em;
  color: #5e754e;
  font-weight: 600;
}

.small_font_t_green_n {
  /* font-family: 'Roboto', sans-serif; */
  font-size: 0.90em;
  color: #5e754e;
}

#bootstrap_modal_center .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  margin: 0 auto;
}

#bootstrap_modal_road_center .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  margin: 0 auto;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

#shortcuts_modal_center .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 40%;
  margin: 0 auto;
  z-index: 10;
}

#settings_modal_center .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 45%;
  margin: 0 auto;
  z-index: 10;
  /* vertical-align: middle; */
}

#map_modal_import_spatial_data .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 45%;
  margin: 0 auto;
  z-index: 10;
  /* vertical-align: middle; */
}

#ImportData_modal_center .modal-dialog {
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 40%;
  margin: 0 auto;
  z-index: 10;
}

#boot_crash_accident .modal-dialog {
  top: 18px;
  left: 45px;
  font-size: 0.90em;
  margin: 0 auto;
}

#boot_crash_accident .modal-body {
  max-height: 75vh;
  max-width: 96%;
  overflow: auto;
}

#boot_traffic_unit_accident .modal-dialog {
  top: 18px;
  left: 45px;
  font-size: 0.90em;
  margin: 0 auto;
}

#boot_person_accident .modal-dialog {
  top: 18px;
  left: 45px;
  font-size: 0.90em;
  margin: 0 auto;
}

#boot_follow_up_accident .modal-dialog {
  top: 18px;
  left: 45px;
  font-size: 0.90em;
  margin: 0 auto;
}

#boot_road_accident .modal-dialog {
  top: 18px;
  left: 45px;
  font-size: 0.90em;
  margin: 0 auto;
}

/* #boot_traffic_unit_accident .modal-body {
  max-height: 75vh;
  max-width: 96%;
  overflow: auto;
} */

#boot_collision_types .modal-dialog {
  top: 18px;
  font-size: 0.90em;
  margin: 0 auto;
}

#modal_unit_costs_cost_b .modal-dialog {
  top: 18px;
  font-size: 0.90em;
  margin: 0 auto;
}

/* .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
          background-color: #CFF5FF;
} */
#id_table_traff_accident th {
  background-color: #8fc567;
  color: #273a26;
  height: 36px;
}

#id_table_traff_accident th:hover {
  background-color: #d5e9ab;
  color: #000000;
  /* border: 1px solid #000; */
  /* padding-top: 3px; */
}

/* #id_table_traff_accident tr:hover { */
/* background-color: #efefef; */
/* border-bottom: 1px solid #47601b; */
/* color: green; */
/* } */
#id_table_traff_accident>tbody>tr:hover>td,
#id_table_traff_accident>tbody>tr:hover>th {
  background-color: #f6fded;
}

.class_row_change_clr {
  background-color: #e1f1ca;
  /* background-color: #c7dbbc; */
  /* border-bottom: 1px solid #47601b; */
}

/* tr.custom--success td {
  background-color: #000000;
} */
.search_field_ta input[type=text] {
  /* padding: 10px; */
  font-size: 0.90em;
  /* border: 1px solid grey; */
  float: left;
  width: 80%;
  /* background: #f1f1f1; */
}

.search_field_ta button {
  float: left;
  width: 20%;
  padding: 10px;
  /* background: #2196F3; */
  /* color: white; */
  font-size: 0.90em;
  /* border: 1px solid grey; */
  border-left: none;
  cursor: pointer;
}

.search_field_ta button:hover {
  background: #0b7dda;
}

.search_field_ta::after {
  content: "";
  clear: both;
  display: table;
}

.edit_fields_ta {
  margin-top: 9px;
  color: #1e2908;
}

.container_card_ta:hover .card_slika {
  opacity: 0.9;
  /* width: calc(100%+3px); */
  /* margin: 0 0 -3px -3px; */
}

/* file upload button */
input[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #fff1c6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}

.top_search_dialog {
  cursor: pointer;
  /* border: 1px solid #f1f3dd; */
  border-radius: 0 0 6px 6px;
  /* background-color: #6e756c; */
  background-color: #fff;
  padding: 4px 6px 4px 6px;
  margin-top: -1px;
  /* color: #fff; */
}

.top_search_dialog:hover {
  /* background: #7e867c; */
  background: #f5f5f5;
  /* color: #fff; */
}

.modal_title_subheader {
  /* font-weight: 600; */
  background-image: linear-gradient(to left, #ffffff, #000);
  color: #ffffff;
  background-clip: text;
  -webkit-background-clip: text;
}

/* sidebar - top 100 */
sidebar_top .accordion-body {
  color: #010b04;
  /* padding-left: 21px;
  margin-left: 0px; */
  white-space: normal !important;
}

/*
.sidebar_top .panel-heading {
  background-color: #000;
} */

/* .sidebar_top .accordion-toggle {
  background-color: #000;
  display: block;
  padding: 1px;
  margin: -10px -15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.sidebar_top .accordion-toggle.collapsed {
  background-color: white;
} */

.sidebar_top .accordion-header {
  color: #fff;
  background-color: #000;
}


.sidebar_top .accordion-item,
.sidebar_top .accordion-button {
  /* background-color: transparent !important; */
  /* opacity: 0.85; */
  color: rgba(black, .125);
  text-decoration: none !important;
}

.sidebar_top .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.sidebar_top .accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #494e48;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
  border-left: 2em solid #ffc927;
}

.sidebar_top .accordion-button.collapsed {
  background-color: #f4f5f4;
  box-shadow: inset 0 -1px 0 rgba(151, 145, 145, 0.13);
}

/* .sidebar_top .accordion-button.collapsed .span_draw_person_c {
  background-color: #f0f1f0;
  border: 1px solid #8b8f92 !important;
} */

/* .sidebar_top .accordion-button::after {
  -webkit-filter: grayscale(1) invert(1);
  filter: grayscale(1) invert(1);
} */

/* .sidebar_top .accordion-button::before { */
.sidebar_top .accordion-button:not(.collapsed)::after {
  -webkit-filter: invert(50%);
  filter: invert(50%);
}

/* TABS FOR COST BENEFIT */
/* .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background: moccasin;
  border-bottom: 2px solid green;
} */

/* .tab_stile .tab-pane {
  border: solid 1px red;
  border-top: 0;
} */

#tab_cost_benefit {
  border-bottom: solid 1px #8998a1;
}

#tab_cost_benefit li a {
  border-color: #55626b;
  /* background-color: #928370; */
}

/* #tab_cost_benefit li.active a { */
/* border-bottom-color: transparent; */
/* background-color: Yellow; */
/* } */
.nav-tabs .nav-link.active {
  background-color: #d8dfe4;
}

/* Tab Pane Color */
.tab_stile .tab-pane {
  border: solid 1px #455057;
  border-top: 0;
  background-color: #3b4245;
}

/* .tab-pane.active {
  border: 1px solid #546f54;
  border-top: none;
  padding: 6px;
} */

/* END TABS FOR COST BENEFIT */

/* Custom styles for the leaflet popups */
.leaflet-popup-content-wrapper {
  min-width: 150px;
  width: 100%;
  /* background: #fff; */
  border-color: #f5f5f5;
  /* Change this to your desired border color */
  border-width: 1px;
  border-style: solid;

  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.leaflet-popup-tip {
  background-color: #ff0000;
  /* Change this to match your desired border color */
}

.leaflet-popup-content table {
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Noto Sans Khmer', 'Noto Serif Khmer', sans-serif; */
  font-size: 1.1em;
  width: 100%;
  border-collapse: collapse;
}

.leaflet-popup-content th,
.leaflet-popup-content td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.leaflet-popup-content th {
  background-color: #f2f2f2;
}

/* style za kml_files */
.custom-popup .leaflet-popup-content-wrapper {
  background: #f7f7f7;
  border: 2px solid #333;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Noto Sans Khmer', 'Noto Serif Khmer', sans-serif; */
  font-size: 1.1em;
  min-width: 60px;
  /* Change font size here */
}

.custom-popup .leaflet-popup-tip {
  background: #333;
}

.custom-popup .leaflet-popup-content {
  color: #333;
}

/* END Custom styles for the leaflet popups */


/* #id_import_shape_back_color .bootstrap-select.btn-group .dropdown-menu li a:hover {
  color: whitesmoke !important;
  background: #bf5279 !important;
} */
/* Custom styles to make the modal almost full screen */
/* .modal-almost-fullscreen .modal-dialog {
  max-width: 93vw;
  max-height: 90vh;
} */

.modal-almost-fullscreen {
  max-width: 99vw;
  max-height: 90vh;
}

.modal-almost-fullscreen .modal-content {
  height: 96%;
}

.modal-row-fixed {
  background-color: #f8f9fa;
  /* Optional: style to differentiate */
  padding: 10px;
  position: relative;
  top: 0;
  z-index: 10;
  height: 50px;
  /* Adjust based on design needs */
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-custom-btn_person {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
}

.my-custom-btn_person:hover {
  background-color: #0056b3;
}

.pie_chart_fat {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* background: conic-gradient(#007bff 0% 70%,
      #e9ecef 70% 100%); */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pie_chart_fat::before {
  /* content: "70%"; */
  font-size: 20px;
  font-weight: bold;
  color: #007bff;
}

.torus_chart {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  /* background: conic-gradient(#757070 0% 70%,
      #e9ecef 70% 100%); */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.torus_chart::before {
  content: "";
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* background: #2F4F4F; */
  background: #333d45;
  position: absolute;
}

.torus_chart::after {
  /* content: "70%"; */
  content: attr(data-content);
  /* Dynamically set content from data-content */
  font-size: 13x;
  font-weight: bold;
  /* color: #007bff; */
  color: #ffffff;
  position: absolute;
}

.inner_div_crash {
  width: 100%;
  /* margin-left: 3px; */
  /* height: 50px; */
  /* background-color: #007bff; */
  padding: 6px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.dashboard_table_border {
  border: 3px solid #525252;
}

.dashboard_table_border th,
.dashboard_table_border td {
  border: 3px solid #525252;
  /* Border around individual cells */
}

.div_dashboard_text {
  font-family: 'PT Sans', serif;
  font-weight: 200;
  font-size: 17px;
  padding: 9px 0 9px 9px;
  color: #e3eae6;
}

.div_dashboard_num {
  /* font-family: 'PT Sans', serif; */
  font-weight: 800;
  font-size: 33px;
  padding: 9px 0 9px 9px;
  color: #e3eae6;
}

/* Container for the horizontal bar chart */
.horizontal_bar_chart_dashboard {
  display: flex;
  flex-direction: column;
  /* Stack bars vertically */
  gap: 20px;
  /* Space between bars */
  width: 100%;
  max-width: 600px;
  /* Adjust as needed */
  margin: 0 auto;
  /* padding: 20px; */
}

/* Container for each bar and its label */
.bar_container_dashboard {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between bar and label */
}

/* Individual bars */
.bar_dashboard {
  height: 20px;
  /* Fixed height for all bars */
  width: calc(var(--value) * 4px);
  /* Dynamic width based on value */
  /* background: linear-gradient(90deg, #007bff, #00bfff); */
  /* Gradient from blue to light blue */
  /* background: linear-gradient(90deg, #ff7e5f, #feb47b, #ff6f61); */
  background: linear-gradient(90deg, #ff7e5f, #feb47b, #fff);
  /* Multi-color gradient */
  border-radius: 4px;
  /* Rounded corners */
  transition: width 0.3s ease;
  /* Smooth width transition */
}

.bar_dashboard_color {
  height: 20px;
  /* Fixed height for all bars */
  width: calc(var(--value) * 4px);
  /* Dynamic width based on value */
  background: linear-gradient(90deg, #ee5a29, #c5a742, #fff);
  /* background: linear-gradient(90deg, #88B04B, #FF6F61, #fff); */
  /* Multi-color gradient */
  border-radius: 4px;
  /* Rounded corners */
  transition: width 0.3s ease;
  /* Smooth width transition */
}

/* Labels below the bars */
.label_dashboard {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.label_FAQ {
  font-size: 16px;
  font-weight: bold;
}

.text_casulaties_title {
  text-align: right;
  font-size: 0.90em;
  color: #d5d5d5;
}

._traffic_unit_dash {
  padding: 3px 3px 3px px;
  color: #71ac47;
  font-size: 0.9em;
  height: 27px;
}

._traffic_unit_dash_II {
  padding: 1px;
  /* color: #f7ba29; */
  color: #f15f76;
  font-size: 1.1em;
  height: 27px;
}

.point-count {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
}


/* .th-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 0px;
  min-height: 0px;
}

.th-container button {
  align-self: flex-start;
} */

/* .alert_accept_tr {
  background-color: #333;
  color: #ffffff;
} */

.heat_bg_table {
  background-color: #4b504a;
  font-size: 0.95em;
}

.heat_bg_table td {
  background-color: #4b504a;
  font-size: 0.95em;
}

.dashboard_bg_table {
  background-color: #1c2226;
}

.dashboard_bg_table td {
  background-color: #1c2226;
}

#dataTable_search_crash_person_hospital tbody tr {
  cursor: pointer;
  /* Changes cursor to pointer */
}

.th_edit_table_only {
  background-color: #8fc567;
  color: #000000;
  height: 45px;
}

.th_edit_table_only th {
  background-color: #8fc567;
  color: #000000;
}

.form-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4b5563;
  padding-top: 2px;
  background-color: #f1f1f1;
  margin-top: 0.6rem;
  /* border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  padding-bottom: 0.25rem;
}

.scrollable-form {
  max-height: 96vh;
  font-size: 0.90em;
  overflow-y: auto;
  position: relative;
}

.sticky-header {
  position: sticky;
  /* margin-top: 9px; */
  top: -24px;
  /* top: 0px; */
  background-color: white;
  z-index: 100;
  /* higher to be on top */
  padding-top: 0.5rem;
  padding-bottom: 0.6rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.subtle-text {
      font-size: 1rem;     /* ≈ 14px */
      color: #6c757d;        /* Bootstrap's text-muted color */
      font-weight: 400;      /* normal */
    }

.clean-link_rpt {
    color: #007bff;
    text-decoration: none;
    /* font-size: 0.95em; */
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.clean-link_rpt:hover {
    /* background-color: #e0f0ff; */
    color: #2f8adf; /* light blue background on hover */
}

.select_split option {
    /* create vertical separator at 150px */
    background-image: linear-gradient(to bottom, transparent 0%, transparent 100%), 
                      linear-gradient(to bottom, #ccc 0%, #ccc 100%);
    background-size: 100% 100%, 1px 100%; /* line width = 1px */
    background-repeat: no-repeat;
    background-position: left, 150px center; /* move vertical line */
    padding-left: 10px;
    padding-right: 10px;
}


/* Add these styles */
.grid-label {
    pointer-events: none !important;
}

/* Make sure labels appear above everything */
.leaflet-popup-pane,
.leaflet-tooltip-pane {
    z-index: 700 !important;
}

/* Grid labels should be on top */
.grid-label {
    z-index: 800 !important;
}

/* .modal-title {
    font-size: 12px;
}

.modal-body {
    font-size: 13px;
}

.modal-footer {
    font-size: 12px;
} */

.page-content {
    opacity: 0;
    transform: translateY(630px);
    animation: fadeInPage 2.7s ease-out forwards;
}

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

/* Ensure vertical lines appear */
#criteriaTable td,
#criteriaTable th {
    border: 1px solid #dee2e6 !important;
}

#criteriaTable {
    border-collapse: collapse;
    width: 100%;
}

#criteriaTable thead th {
    border-bottom-width: 2px !important;
    background-color: #f8f9fa;
}

/* Row hover effect */
#criteriaTable tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
    cursor: pointer;
}

/* Selected row highlight */
#criteriaTable tbody tr.row-selected {
    background-color: rgba(21, 115, 71, 0.15) !important;
    border-left: 3px solid #32383d;
}

.box_login {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
/* ovo gore i dole znaci ako je sirina ekrana veca od 600px onda ce prikazati 600px u suprotnom 47px */
@media (min-width: 600px) {
  .box_login {
    width: 600px;
  }
}

/* Toast notification width control */
/* .custom-toast {
    width: 300px !important;
    max-width: 400px;
    min-width: 200px;
    font-size: 0.80em;
} */

/* For responsive design - smaller screens */
/* @media (max-width: 768px) {
    .custom-toast {
        width: 90% !important;
        min-width: 250px;
    }
} */

/* Optional: Adjust toast positioning */
/* .toast-container {
    position: fixed;
    bottom: 20px;
    z-index: 1050;
} */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 1100;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 8px;
}

.custom-toast {
    flex-shrink: 0;
    min-width: 275px;    /* Reduced from 300px */
    max-width: 305px;    /* Reduced from 350px */
    width: auto;          /* Let it size naturally */
    margin-bottom: 0 !important;
}

/* Optional: Adjust text size to fit better */
.custom-toast .toast-body {
    padding: 0.7rem;     /* Slightly smaller padding */
    font-size: 0.9rem;   /* Slightly smaller text if needed */
}

/* Optional: Adjust button text size */
.custom-toast .btn-sm {
    font-size: 0.75rem;  /* Smaller button text */
    padding: 2px 4px;    /* Tighter button padding */
}

/* Make the container buttons fit better */
.custom-toast .container-fluid .row [class*="col-"] {
    padding: 0 2px;      /* Reduce column padding */
}

.custom-toast .btn-sm {
    font-size: 0.7rem !important;  /* Even smaller to fit */
    padding: 3px 4px !important;    /* Minimal padding */
    white-space: nowrap;            /* Prevent text wrapping */
    overflow: hidden;              /* Hide overflow */
    text-overflow: ellipsis;       /* Show ... for overflow */
}

/* Adjust for very small screens or when text is too long */
@media (max-width: 280px) {
    .custom-toast .btn-sm {
        font-size: 0.6rem !important;
        padding: 2px 3px !important;
    }
}

/* Bootstrap Select with Search */
.bootstrap-select-search {
    position: relative;
    width: 100%;
}

.bootstrap-select-search .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    padding: 0.5rem 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.bootstrap-select-search .dropdown-menu.show {
    display: block;
}

.bootstrap-select-search .dropdown-item {
    cursor: pointer;
    padding: 0.5rem 1rem;
    display: block;
    color: #212529;
    text-decoration: none;
}

.bootstrap-select-search .dropdown-item:hover,
.bootstrap-select-search .dropdown-item:focus {
    background-color: #0d6efd;
    color: #fff;
}

.bootstrap-select-search .form-control {
    cursor: pointer;
}

.bootstrap-select-search .no-results {
    padding: 0.5rem 1rem;
    color: #6c757d;
}

.bootstrap-select-search .form-control:focus {
    box-shadow: none;
}

.span_show_current_year {
  padding: 3px 0px 0px 6px;
  text-align: right;
  /* align-items: right; */
  font-size: 1.05em;
  color: #4c5257;
  /* background-color: #4c5257; */
}

/* ovaj select je samo za multiple prikaz stavki na crash formi */
/* Container for selected items */
.selected-items_cause {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px;
    min-height: 35px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

/* Individual selected item */
.selected-item_cause {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ffbe63 0%, #FFB347 100%);
    color: #464646;
    padding: 3px 6px 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    animation: slideIn 0.3s ease;
    transition: all 0.3s ease;
}

.selected-item_cause:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Remove button */
.remove-item_cause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.remove-item_cause:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}

.remove-item_cause:active {
    transform: scale(0.8);
}

/* Animation for new items */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Empty state */
.selected-items_cause:empty::before {
    content: 'No items selected';
    color: #adb5bd;
    font-size: 11px;
    font-style: italic;
    width: 100%;
    text-align: center;
}

/* Different color variations (optional) */
/* .selected-item:nth-child(6n+1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.selected-item:nth-child(6n+2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.selected-item:nth-child(6n+3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.selected-item:nth-child(6n+4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #1a1a2e;
}
.selected-item:nth-child(6n+5) {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #1a1a2e;
}
.selected-item:nth-child(6n+6) {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    color: #1a1a2e;
} */