@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@500;600;700&display=swap");

:root {
  --bs-primary: #00196d;
  --bs-primary-hover: #05248b;
  --bs-secondary: #b3d829;
  --bs-secondary-hover: #bae228;
  --bs-btn-secondary-color: #008739;
  --bs-body-bg: #f1efee;
  --bs-body-header-bg: #66aa2c;
  --bs-border-color: #d3d3d3;

  --bs-primary-transparent: #f2f5ea26;
  --bs-secondary-transparent: rgb(179, 216, 41, 0.15);
  --bs-box-shadow-default: 0 0 0 0.25rem rgba(177, 214, 41, 0.25);

  --bs-white-color: #fff;
  --bs-danger-color: #ffbec4;
  --bs-warning-color: #c97e00;
  --bs-btn-bg-disabled: #e7e7e7;

  --filter-btn-secondary-color: invert(24%) sepia(99%) saturate(5219%)
    hue-rotate(150deg) brightness(97%) contrast(101%);
  --filter-primary: invert(8%) sepia(92%) saturate(3964%) hue-rotate(218deg)
    brightness(93%) contrast(116%);
  --filter-primary-hover: invert(31%) sepia(14%) saturate(3788%)
    hue-rotate(108deg) brightness(101%) contrast(98%);
  --filter-secondary: invert(86%) sepia(56%) saturate(655%) hue-rotate(13deg)
    brightness(90%) contrast(88%);
  --filter-secondary-hover: invert(72%) sepia(22%) saturate(1325%)
    hue-rotate(30deg) brightness(100%) contrast(92%);

  --filter-gray-700: invert(29%) sepia(8%) saturate(661%) hue-rotate(169deg)
    brightness(95%) contrast(86%);
  --filter-gray-500: invert(87%) sepia(8%) saturate(289%) hue-rotate(169deg)
    brightness(83%) contrast(87%);
  --filter-gray-300: invert(94%) sepia(12%) saturate(74%) hue-rotate(169deg)
    brightness(93%) contrast(96%);

  --filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(231deg)
    brightness(107%) contrast(105%);
  --filter-success: invert(63%) sepia(72%) saturate(1900%) hue-rotate(80deg)
    brightness(70%) contrast(105%);
  --filter-danger: invert(63%) sepia(72%) saturate(1900%) hue-rotate(320deg)
    brightness(70%) contrast(105%);
  --filter-bs-body-color: invert(19%) sepia(55%) saturate(599%)
    hue-rotate(159deg) brightness(97%) contrast(99%);

  --bs-font-sans-serif: Roboto, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-color: #133c55;
  --bs-dropdown-link-active-color: #e41313;

  --bs-dropdown-item-color: #133c55;
  --box-shadow: 0px 6px 6px 0px #0d6dfd17;

}

.btn.btn-sm {
  --bs-btn-border-radius: 1.75rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
}

/* Theme general */
body {
  color: var(--bs-body-color);
}

.h1,
h1,
.h2,
h2,
.h3,
h3,
.h4,
h4,
.h5,
h5 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--bs-primary);
}

/* Layout parts */
#page_header {
  background-color: transparent;
  .navbar-nickname {
    color: var(--bs-primary);
    font-weight: 600;
  }
}

#page_title {
  background-color: var(--bs-body-header-bg);

  & h1 {
    margin-bottom: 0;
    font-size: 26px;
    color: var(--bs-white-color);
  }
}

.group_title {
  color: var(--bs-primary);
  text-transform: uppercase;
  font-size: 0.8em;
}

#page_footer {
  .terms_conditions-text,
  .privacy-text,
  .powered-text {
    font-size: 1rem;
    font-weight: normal;
    color: var(--bs-body-color);
  }
  .powered-icon .icon{
    filter: var(--filter-primary);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
  }
}

.bg-start-screen #page_footer .terms_conditions-text,
.bg-start-screen #page_footer .privacy-text,
.bg-start-screen #page_footer .powered-text {
  color: var(--bs-body-bg);
}
.bg-start-screen #page_footer .powered-icon .icon {
    filter: var(--filter-white);
}

.dropdown ul.dropdown-menu,
.table_buttons .table_actions_menu {
  animation: slideDown 0.125s forwards ease-out;
  box-shadow: var(--box-shadow) !important;
  border-radius: 0.75rem;
}

/* Table */
.table_buttons .table_actions_menu {
  padding: 0.5rem 0;
  min-width: 140px;
  transition: width 0.125s ease;
  .table_actions_item {
    padding: 0.5rem 0.8rem;
    .icon {
      margin: 0 0.8rem 0 0;
    }
    &:hover {
      background-color: var(--bs-primary-transparent);
    }
  }
}

.bg-start-screen {
  background-image: url(./assets/leaf-start-bg.jpg);
  background-color: #66aa2c;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  .btn.btn-link {
    color: var(--bs-white-color);
    font-weight: 500;
  }
}

#start-screen-actions {
  .main-action {
    color: var(--bs-btn-secondary-color);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);

    font-weight: 600;
    padding: 10px 24px;
    .icon {
      width: 24px;
      height: 24px;
      filter: var(--filter-btn-secondary-color);
      transition: all 0.225s ease;
    }

    &:hover {
      color: var(--bs-btn-secondary-color);
      background-color: var(--bs-secondary-hover);
      border-color: var(--bs-secondary-hover);

      .icon {
        transform: translateX(10px);
      }
    }
  }

  & a.btn-link {
    color: #e0f7ea;
    font-weight: 500;
  }
}

.start-screen-text p {
  color: #e0f7ea;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.5rem;
  text-shadow: 2px 2px 6px rgba(0, 68, 34, 0.5);
  .larger-text {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 3rem;
  }
}

#cor_login {
  .form-label {
    color: var(--bs-white);
    text-align: end;
  }
}

.icon {
  filter: var(--filter-bs-body-color);
}

.icon-primary {
  filter: var(--filter-primary);
}

.icon-secondary {
  filter: var(--filter-secondary);
}
.icon-dark-gray {
  filter: var(--filter-gray-700);
}
.icon-white {
  filter: var(--filter-white);
}
.icon-success {
  filter: var(--filter-success);
}
.icon-danger {
  filter: var(--filter-danger);
}

/* Buttons */
.btn {
  --bs-btn-border-radius: 1.75rem;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.4em;
  &:focus {
    box-shadow: var(--bs-box-shadow-default);
  }
}

.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--bs-secondary) !important;
  & .icon {
    filter: var(--filter-secondary);
  }
}
.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-primary) !important;
  & .icon {
    filter: var(--filter-primary);
  }
}

.btn-primary {
  /*--bs-btn-color: var(--bs-white);*/
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  /*--bs-btn-hover-color: var(--bs-white);*/
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-primary-hover);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  /*--bs-btn-active-color: var(--bs-white);*/
  --bs-btn-active-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-primary-hover);
  --bs-btn-active-border-color: var(--bs-primary-hover);
  --bs-btn-active-shadow: inset 0 3px 5px var(--bs-primary-transparent);
  /*--bs-btn-disabled-color: var(--bs-white);*/
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  & .icon {
    filter: var(--filter-secondary);
  }
}

.btn-secondary {
  /*--bs-btn-color: #fff;*/
  --bs-btn-color: var(--bs-btn-secondary-color);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  /*--bs-btn-hover-color: #fff;*/
  --bs-btn-hover-color: var(--bs-btn-secondary-color);
  --bs-btn-hover-bg: var(--bs-secondary-hover);
  --bs-btn-hover-border-color: var(--bs-secondary-hover);
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  /*--bs-btn-active-color: #fff;*/
  --bs-btn-active-color: var(--bs-btn-secondary-color);
  --bs-btn-active-bg: var(--bs-secondary-hover);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px var(--bs-secondary-transparent);
  /*--bs-btn-disabled-color: #fff;*/
  --bs-btn-disabled-color: var(--bs-btn-secondary-color);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  & .icon {
    filter: var(--filter-btn-secondary-color);
  }
}

.btn-light {
  & .icon {
    filter: var(--filter-primary);
  }
}

.btn-success {
  & .icon {
    filter: var(--filter-white);
  }
}

.btn-danger {
  & .icon {
    filter: var(--filter-white);
  }
}

.btn-dark {
  & .icon {
    filter: var(--filter-white);
  }
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px var(--bs-primary-transparent);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px var(--bs-secondary-transparent);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-gradient: none;
}

.btn-light {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-white);
  --bs-btn-border-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-white);
  --bs-btn-disabled-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-transparent);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary-transparent);
  --bs-btn-active-border-color: var(--bs-primary);
}
.btn-light.keep-normal {
  cursor: default;
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-white);
  --bs-btn-disabled-border-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-white);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bs-white);
  box-shadow: none !important;
}

.btn-light.disabled,
.btn-light:disabled,
fieldset:disabled .btn-light {
  color: #84878c;
  background-color: var(--bs-btn-bg-disabled);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
  & .icon {
    filter: var(--filter-gray-700) !important;
  }
}

.btn-link {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary-hover);
  --bs-btn-active-color: var(--bs-primary-hover);
  --bs-btn-disabled-color: #6c757d;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

a {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 500;

  &:hover {
    color: var(--bs-primary-hover);
    text-decoration: underline;
  }
}

.input-group-text {
  background-color: var(--bs-btn-bg-disabled);
}

.form-control,
.input-group-text,
.form-check-input[type="checkbox"],
.form-select,
.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
input[type="text"],
select {
  border-radius: 0.75rem;
  border-color: #e3e2e1;
}

.form-control:focus,
.form-check-input:focus,
.form-select:focus {
  box-shadow: var(--bs-box-shadow-default);
  border-color: var(--bs-secondary);
}

.form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
}

.form-check-input:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

/* Dropdowns */
.dropdown-menu {
  /* --bs-dropdown-border-radius: 0; */
  --bs-dropdown-border-color: #fafafa;
}

.dropdown-menu,
.table_actions_menu {
  scrollbar-color: var(--bs-white);
}

.dropdown-item {
  color: var(--bs-dropdown-item-color);
}

.dropdown-item:focus,
.dropdown-item:hover {
  text-decoration: none;
  --bs-dropdown-link-hover-color: var(--bs-primary);
  --bs-dropdown-link-hover-bg: var(--bs-primary-transparent);
}

#page_header .dropdown-item:focus,
#page_header .dropdown-item:hover {
  --bs-dropdown-link-hover-color: var(--bs-primary);
  --bs-dropdown-link-hover-bg: var(--bs-white);
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-primary);
  .icon {
    filter: var(--filter-white);
  }
}
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  background-color: transparent;
}
.empty_ddfield span.dropdown-item {
  height: 1.5em;
  &:hover {
    background-color: var(--bs-primary);
  }
}

/* Modal */
.modal-dialog {
  .modal-content {
    --bs-modal-border-color: var(--bs-modal-bg);
  }
}
.modal-backdrop {
  &.show {
    --bs-backdrop-opacity: 0.4;
  }
  --bs-backdrop-bg: var(--bs-primary);
}

hr {
  border-top: 1px solid var(--bs-border-color);
}

.slidercheckbox .slidercheckbox-knob:before {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
}

#res_results_map {
  height: 600px;
}

::-webkit-scrollbar-track {
  background: var(--bs-white);
}
::-webkit-scrollbar-thumb {
  background: var(--bs-border-color);
}

.tooltip .tooltip-inner {
  box-shadow: var(--box-shadow);
}

.tooltip .tooltip-inner {
  background-color: var(--bs-white);
  color: var(--bs-primary);
  border-radius: 0.75rem;
}

.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bs-white);
}

.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--bs-white);
}

.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--bs-white);
}

.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bs-white);
}

.tooltip-inner::-webkit-scrollbar-track {
  background: transparent;
}

.tooltip-inner::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 0;
}

#all_orders {
  max-height: 1000px;
  overflow-y: auto;
}

.tile-active,
.tile-inactive {
  padding: 10px;
  border-radius: 8px;
}

.tile-active {
  background-color: var(--bs-secondary-transparent);
  border: 1px solid var(--bs-secondary);
}
.tile-inactive {
  background-color: var(--bs-white-color);
  border: 1px solid lightgray;
}

/* Datepicker jQuery UI */
input[type="text"]#datepicker {
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem;
}

#ui-datepicker-div select {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

#ui-datepicker-div.ui-datepicker {
  padding: 0.4em 0.8em;
}

input[type="text"]#datepicker:focus,
#ui-datepicker-div select:focus {
  outline: none;
}

.ui-widget {
  font-family: var(--bs-font-sans-serif);
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: var(--bs-font-sans-serif);
}

#ui-datepicker-div.ui-datepicker {
  animation: slideDown 0.125s forwards ease-out;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.15);
}

.ui-widget.ui-widget-content {
  border: 1px solid var(--bs-white-color);
}

.ui-widget-content {
  border-radius: 1.375rem;
  border: 1px solid #ced4da;
  background: var(--bs-white-color);
  color: var(--bs-primary);
}

.ui-widget-header {
  border: 1px solid var(--bs-white-color);
  background: var(--bs-white-color);
  color: var(--bs-primary);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button {
  border: 1px solid var(--bs-white-color);
  background: var(--bs-white-color);
  color: var(--bs-primary);
  border-radius: 0.375rem;
}

.ui-datepicker-header {
  .ui-corner-all {
    border: 1px solid var(--bs-secondary);
    background: var(--bs-secondary);
    border-radius: 1.75rem;
  }

  .ui-corner-all:hover {
    border-color: var(--bs-secondary-hover);
    background: var(--bs-secondary-hover);
    color: var(--bs-secondary);
    transform: none;
  }
}

.ui-datepicker-buttonpane {
  .ui-datepicker-close,
  .ui-datepicker-current {
    border: 1px solid var(--bs-secondary);
    background: var(--bs-secondary);
    color: var(--bs-primary);
    font-weight: 700;
    border-radius: 1.75rem;
    font-size: 16px;
    opacity: 1;
  }

  .ui-datepicker-close {
    min-width: 80px;
  }

  .ui-datepicker-current {
    border: 1px solid var(--bs-primary);
    background: transparent;
  }

  .ui-datepicker-close:hover,
  .ui-datepicker-current:hover {
    border: 1px solid var(--bs-secondary-hover);
    background: var(--bs-secondary-hover);
    color: var(--bs-primary);
    transform: none;
  }

  .ui-datepicker-current:hover {
    border: 1px solid var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-white-color);
  }
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border-color: var(--bs-primary-transparent);
  background: var(--bs-primary-transparent);
  color: var(--bs-primary);
  transform: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--bs-secondary);
  background: var(--bs-secondary);
  color: var(--bs-primary);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: var(--bs-primary);
  background: var(--bs-primary);
  color: var(--bs-white-color);
}

.ui-state-checked {
  border: 1px solid var(--bs-primary);
  background: var(--bs-secondary);
}

.ui-datepicker-trigger {
  font-size: 16px;
  color: var(--bs-secondary);
  user-select: none;
  border: 1px solid var(--bs-primary);
  background-color: var(--bs-primary);
  border-radius: 0.56rem;

  &:hover {
    background-color: var(--bs-primary-hover);
  }
}

#filter_info .filter_info_title,
#filter_info .filter_infos,
#parameter_name_header .parameter_name_title,
#parameter_name_header .parameter_name {
  padding: 5px 10px 5px 10px; /*top right bottom left*/
}
#filter_info .filter_infos,
#parameter_name_header .parameter_name {
  color: var(--bs-primary);
}

#cor_user_settings .nickname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* Alerts */
.alert {
  font-size: 0.9em;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
  .btn-close {
    width: 0.5em;
    height: 0.5em;
  }
}

.alert-primary {
  --bs-alert-bg: #9ae3f1;
  --bs-alert-border-color: #9ae3f1;
  button.btn-close {
    filter: invert(15%) sepia(74%) saturate(2696%) hue-rotate(209deg)
      brightness(100%) contrast(97%);
  }
}

.alert-secondary {
  --bs-alert-color: var(--bs-body-color);
  --bs-alert-bg: #e2e3e5;
  --bs-alert-border-color: #e2e3e5;
}
.alert-secondary .alert-link {
  color: var(--bs-primary);
}

.alert-success {
  --bs-alert-color: #008739;
  --bs-alert-bg: #d1ed69;
  --bs-alert-border-color: #d1ed69;
  button.btn-close {
    filter: invert(25%) sepia(27%) saturate(2056%) hue-rotate(149deg)
      brightness(91%) contrast(96%);
  }
}

.alert-info {
  --bs-alert-color: var(#084298);
  button.btn-close {
    filter: invert(15%) sepia(74%) saturate(2696%) hue-rotate(209deg)
      brightness(100%) contrast(97%);
  }
}

.alert-info .alert-link {
  color: #084298;
}

.alert-warning {
  --bs-alert-color: #5c4a16;
  --bs-alert-bg: #ffd451;
  --bs-alert-border-color: #ffd451;
  button.btn-close {
    filter: invert(84%) sepia(18%) saturate(1704%) hue-rotate(350deg)
      brightness(85%) contrast(84%);
  }
}
.alert-warning .alert-link {
  color: var(--bs-body-bg);
}

.alert-danger {
  --bs-alert-color: #ffe5e7;
  --bs-alert-bg: #ff5666;
  --bs-alert-border-color: #ff5666;

  button.btn-close {
    filter: invert(85%) sepia(5%) saturate(716%) hue-rotate(308deg)
      brightness(100%) contrast(120%);
  }
}
.alert-danger .alert-link {
  color: var(--bs-body-bg);
}

.alert.shadow {
  box-shadow: var(--box-shadow) !important;
}

button.btn-close {
  filter: invert(95%) sepia(9%) saturate(95%) hue-rotate(169deg) brightness(60%)
    contrast(92%);
}

div.panel_area .panel_opt,
div.large_view div.row,
div.small_view div.small_opt
{
    border-bottom: solid;
    border-bottom-color: var(--bs-border-color);
    border-bottom-width: 1px;
}
div.panel_area div.panel_opt,
div.large_view div.row div.large_opt {
    padding: .5rem .5rem;
    .icon:not(.help_icon) {
        width: 24px;
        height: 24px;
    }
}
/* active plan */
div.large_view div.row div.active_plan {
    border-color: var(--bs-primary) !important;
    border-left: 3px solid;
    border-right: 3px solid;
}
div.large_view div.row:first-child div.active_plan {
    border-top: 3px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
div.large_view div.row:last-child div.active_plan {
    border-bottom: 3px solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
div.small_plan.active_plan{
    border: 3px solid var(--bs-primary) !important;
    border-radius: 10px;
}

span.icon.help_icon {
    filter: var(--filter-primary);
}

#inputGroupPrepend .icon {
  /* Form field input icon */
  filter: var(--filter-primary);
}

#language-area {
  .navbar-language span.icon_flag {
    width: 24px;
    height: 24px;
  }

  .dropdown-menu span.icon_flag {
    margin-right: 0.3rem;
    width: 16px;
    height: 16px;
  }

}

#page_header {
  .dropdown-menu .icon {
    width: 24px;
    height: 24px;
  }

  #login-area .dropdown-menu .icon:not(.icon-box-arrow-right) {
    background-image: url(./assets/icons/arrow-right-16.svg);
  }
}

#page_btns button {
  .icon {
    :not(.icon-white) {
      filter: var(--filter-bs-body-bg);
    }
    width: 24px;
    height: 24px;
  }
}

.table_prepend,
.table_append,
table {
  .btn .icon,
  & > a[type="button"] .icon {
    width: 24px;
    height: 24px;
  }

  /* .btn:not(.btn-primary,.btn-secondary) .icon,
  & > a[type="button"] .icon {
    filter: var(--filter-bs-body-bg);
  } */

  .btn.disabled .icon,
  & > a[type="button"].disabled .icon,
  .btn:disabled .icon,
  & > a[type="button"]:disabled .icon {
    filter: var(--filter-gray-500);
  }
}

.avatar.icon-person-bounding-box {
  filter: var(--filter-primary);
  background-image: url(./assets/icons/user-32.svg);
  width: 44px;
  height: 44px;
  display: inline-block;
  background-size: 44px 44px;
  filter: var(--filter-primary);
}

.table-inline-edit {
  &::before {
    background-image: url("./assets/icons/edit-16.svg");
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    transition: all 0.125s ease;
    filter: var(--filter-primary);
  }

  &:hover::before {
    transform: translateY(-2px);
    opacity: 1;
  }
}