html {
  overflow-y: scroll
}

::-webkit-scrollbar-track {
  background-color: transparent; 
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-background-color) !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-background-color) !important; 
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.dropdown-active > .dropdown-content {
  animation: fadeIn 0.2s cubic-bezier(.59, .04, .35, 1.18)
}

.modal-active > .modal-container {
  animation: fadeIn 0.2s cubic-bezier(.59, .04, .35, 1.18)
}

.tab-toggle:hover {
  /* box-shadow: inset 0 0 0 10em rgba(171, 171, 171, .3), 0 3px 6px rgba(63, 63, 63, .16), 0 3px 6px rgba(24, 24, 24, .23);
  transition: all 0.3s cubic-bezier(.59, .04, .35, 1.18) */
}



.table-checkered .tr:nth-child(even) > *:not(.incidence-checked) {
  background-color: #005c7a11  !important
}

.ms-options-wrap > button > span {
  height: 1.45rem !important;
  padding: 0.3rem
}

.pagination-controller .pages button[page]:hover {
  background-color: var(--primary-background-color);
  color: #fff
}

.error-input {
  color: #7a0907 !important;
  background-color: rgba(255, 0, 0, .16) !important;
  border-bottom: 2px solid red !important
}

.date-picker-style {
  border-radius: 0.125rem;
  text-align: center;
  border: 1px solid #bfd7de !important;
  line-height: 1.5 !important;
  padding: 0.25rem 0.5rem !important  ;
  color: #000 !important
}

.filter-controller.tab > .body .tab-content .top {
  display: flex;
  justify-content: space-between
}

.filter-controller.tab > .body .filter-options {
  display: flex;
  flex-wrap: wrap
}

.filter-controller.tab > .body .filter-options .filter-option {
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.25rem;
  border: 0.6px solid #dadce0;
  cursor: pointer;
  margin: 0.25rem;
  padding: 0.25rem 0.5rem;
  transition: all 0.2s cubic-bezier(.17, .84, .44, 1)
}

.filter-controller.tab > .body .filter-options .filter-option:hover {
  background-color: var(--primary-background-color);
  color: #fff !important
}

.filter-controller.tab > .body .filter-options .filter-option > input[type=checkbox] {
  display: none !important
}

.filter-controller.tab > .body .filter-options .filter-option.filter-active {
  background-color: var(--primary-background-color) !important;
  color: #fff !important
}

.filter-controller.tab > .body .filter-options .filter-option:not(.filter-active) {
  color: #000
}

.filter-controller.tab > .body .filter-options .filter-option > *, .filter-controller.tab > .body .filter-options .filter-option > :active, .filter-controller.tab > .body .filter-options .filter-option > :focus, .filter-controller.tab > .body .filter-options .filter-option > :hover {
  background: 0 0 !important;
  border: 0 solid transparent !important;
  padding: 0 !important  ;
  margin: 0 !important  ;
  outline: 0 solid transparent !important
}

.filter-controller.tab > .body .filter-options .filter-option input[type=datetime]::-webkit-calendar-picker-indicator:hover, .filter-controller.tab > .body .filter-options .filter-option input[type=month]::-webkit-calendar-picker-indicator:hover {
  background: 0 0 !important;
  cursor: pointer
}

.filter-controller.tab > .body .filter-options .filter-option input[type=datetime]::-webkit-inner-spin-button, .filter-controller.tab > .body .filter-options .filter-option input[type=month]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none
}

.filter-controller.tab > .body .filter-options .filter-option input[type=number]::-webkit-calendar-picker-indicator, .filter-controller.tab > .body .filter-options .filter-option input[type=number]::-webkit-calendar-picker-indicator:hover, .filter-controller.tab > .body .filter-options .filter-option input[type=number]::-webkit-inner-spin-button, .filter-controller.tab > .body .filter-options .filter-option input[type=number]::-webkit-inner-spin-button:hover, .filter-controller.tab > .body .filter-options .filter-option input[type=number]::-webkit-outer-spin-button, .filter-controller.tab > .body .filter-options .filter-option input[type=number]::-webkit-outer-spin-button:hover {
  background: 0 0 !important;
  cursor: pointer
}

.filter-active .filter-option {
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.125rem;
  cursor: pointer;
  margin: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--primary-background-color) !important;
  color: #fff !important
}

.select-filter {
  padding: 0.5rem;
  cursor: pointer
}

.filter-hidden {
  display: none !important
}

.pagination-controller {
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%
}

.pagination-controller .button {
  margin-right: 0.5rem
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px) {
  .pagination-controller .button {
    padding: 0.25rem 0.5rem
  }
}

@media only screen and (max-width: 767px) {
  .pagination-controller .button {
    padding: 0.5rem
  }
}

.pagination-controller .pages button[page] {
  float: left;
  background-color: #eff5f7
}

.pagination-controller .pages button[page].active {
  background-color: var(--primary-background-color);
  color: #fff
}

.pagination-hidden {
  display: none !important
}

@media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (max-width: 767px) {
  .table-responsive.table.table-horizontal .tbody > .tr > [data-responsive=true], .table-responsive.table.table-horizontal .thead > .tr > [data-responsive=true] {
    display: none !important
  }
}

@media only screen and (min-width: 1024px) {
  .table-responsive.table.table-horizontal .tbody > .tr > :last-of-type, .table-responsive.table.table-horizontal .thead > .tr > :last-of-type {
    display: none !important
  }
}

.search-hidden {
  display: none !important
}

.search-controller {
  width: 75%;
  flex-grow: 1;
  /* margin-bottom: 0.5rem */
}

@media only screen and (max-width: 500px) {
  .search-controller {
    width: 100%;
  }
}

.search-controller input {
  border-radius: 0.125rem;
  background-color: var(--search-box-background-color);
  border: 1px solid var(--search-box-border-color);
  line-height: 1.5 !important;
  padding: 0.25rem 0.5rem;
  max-width: 100%;
  width: 100%
}

.search-controller input:focus {
  border-color: var(--search-box-border-ative-color);
  outline: 0
}

.search-controller input:disabled {
  background-color: #efefef;
  border-color: #dfebef
}

.table {
  border-collapse: separate;
  width: 100%;
  border-spacing: 0 5px
}

.table .td, .table .th {
  vertical-align: middle;
  padding: 0.5rem;
  white-space: nowrap
}

.table .td a, .table .th a {
  width: 100%;
  display: block
}

.table .th {
  background-color: var(--primary-background-color);
  color: white;
  font-weight: 700
}

.table .th .fa-sort{
  color: white;
  font-weight: 700
}

@media only screen and (min-width: 1024px) {
  .table.table-vertical > .tbody > .tr > .th {
    text-align: right;
    width: 25%
  }
}

@media only screen and (min-width: 1024px) {
  .table.table-vertical {
    display: table
  }

  .table.table-vertical .thead {
    display: table-header-group
  }

  .table.table-vertical .tbody {
    display: table-row-group
  }

  .table.table-vertical .tfoot {
    display: table-footer-group
  }

  .table.table-vertical .tr {
    display: table-row
  }

  .table.table-vertical .tr .td, .table.table-vertical .tr .th {
    display: table-cell
  }
}

.table.table-horizontal {
  display: table
}

.table.table-horizontal > .thead > .tr > :not(:last-of-type) {
  border-right: 1px solid #dfebef
}

.table.table-horizontal > .tbody > .tr > :not(:last-of-type) {
 border-right: 1px solid #eff5f7
}
.table.table-horizontal > .tbody {
  background-color:  #fff;

}
.table-checkered .tr:nth-child(2n) > :not(.incidence-checked) {
  background-color: #005c7a11  !important;
}

.table.table-horizontal .thead {
  display: table-header-group
}

.table.table-horizontal .tbody {
  display: table-row-group
}

.table.table-horizontal .tfoot {
  display: table-footer-group
}

.table.table-horizontal .tr {
  display: table-row
}

.table.table-horizontal .tr .td, .table.table-horizontal .tr .th {
  display: table-cell
}

.table-responsive:not(.table) {
  overflow-x: auto
}

.badge {
  border-radius: 0.25rem;
  display: inline;
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  vertical-align: baseline
}

.button {
  border-radius: 0.25rem;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline;
  padding: 0.5rem 1rem;
  vertical-align: baseline;
  white-space: nowrap
}

.button:focus {
  border: none;
  outline: 0
}

.button.button-left {
  float: left
}

.button.button-right {
  float: right
}

.button.button-width-auto {
  width: auto !important;
  min-width: inherit !important;
  max-width: inherit !important
}

.button.button-disable {
  background-color: #a0a0a0;
  color: #fff;
  pointer-events: none
}

.card {
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 1rem;
}

.card > .title {
  padding: 0.5rem;
}

.card > .actions > a:not(:last-child), .card > .actions > button:not(:last-child) {
  margin-right: 0.5rem
}

.card-display {
  overflow-y: auto
}

@media only screen and (min-width: 1024px) {
  .card-display {
    display: flex
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (max-width: 767px) {
  .card-display {
    display: block !important
  }
}

.card-display .card {
  white-space: nowrap;
  flex: 1 1 auto;
  flex-basis: 0;
  min-width: 0
}

@media only screen and (min-width: 1024px) {
  .card-display .card:not(:first-child) {
    margin-left: 1.5rem
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (max-width: 767px) {
  .card-display .card:not(:first-child) {
    margin-top: 1.5rem
  }
}

.divider-h {
  width: 100%;
  height: 1px;
  background-color: silver
}

.divider-v {
  width: 1px;
  background-color: silver
}

.dropdown .dropdown-toggle {
  cursor: pointer
}

.dropdown .dropdown-toggle .fas {
  vertical-align: middle
}

.dropdown .dropdown-content {
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem 0 #a0a0a0;
  background-color: #fff;
  padding: 0.5rem;
  position: absolute;
  white-space: nowrap;
  z-index: 99;
  right: -35%;
}

.dropdown.dropdown-right .dropdown-content {
  position: absolute;
  left: 100%;
  top: 0;
  right: unset;
}

.dropdown.dropdown-right .dropdown-toggle {
  display: flex;
  justify-content: space-between
}

.dropdown .dropdown-content .dropdown-row {
  display: flex;
  width: 100%;
  justify-content: space-around
}

.dropdown:not(.dropdown-active) > .dropdown-content {
  display: none !important
}

.col-0 {
  width: 0
}

.col-0_5 {
  width: 4.166%
}

.col-1 {
  width: 8.333%
}

.col-1_5 {
  width: 12.5%
}

.col-2 {
  width: 16.666%
}

.col-2_5 {
  width: 20.833%
}

.col-3 {
  width: 25%
}

.col-3_5 {
  width: 29.166%
}

.col-4 {
  width: 33.333%
}

.col-4_5 {
  width: 37.5%
}

.col-5 {
  width: 41.666%
}

.col-5_5 {
  width: 45.833%
}

.col-6 {
  width: 50%
}

.col-6_5 {
  width: 54.166%
}

.col-7 {
  width: 58.333%
}

.col-7_5 {
  width: 62.5%
}

.col-8 {
  width: 66.666%
}

.col-8_5 {
  width: 70.833%
}

.col-9 {
  width: 75%
}

.col-9_5 {
  width: 79.166%
}

.col-10 {
  width: 83.333%
}

.col-10_5 {
  width: 87.5%
}

.col-11 {
  width: 91.666%
}

.col-11_5 {
  width: 95.833%
}

.col-12 {
  width: 100%
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .icon-size-xs {
    font-size: 6px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .icon-size-xs {
    font-size: 4px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .icon-size-s {
    font-size: 8px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .icon-size-s {
    font-size: 6px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .icon-size-m {
    font-size: 10px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .icon-size-m {
    font-size: 8px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .icon-size {
    font-size: 10px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .icon-size {
    font-size: 8px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .icon-size-l {
    font-size: 12px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .icon-size-l {
    font-size: 10px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .icon-size-xl {
    font-size: 14px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .icon-size-xl {
    font-size: 12px
  }
}

.button.fab, .button.fal, .button.far, .button.fas {
  padding: 0.25rem
}

.icon-middle {
  vertical-align: middle
}

.icon-top {
  vertical-align: top
}

.icon-bottom {
  vertical-align: bottom
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px) {
  .input-row {
    display: flex
  }

  .input-row > * {
    flex-grow: 1;
    flex-basis: 0
  }

  .input-row > :not(:last-child) {
    margin-right: 1rem
  }

  .input-row .input-group {
    margin-bottom: 0 !important
  }
}

@media only screen and (max-width: 767px) {
  .input-row > * {
    margin-bottom: 1rem
  }
}

.input-row:not(:last-child) {
  margin-bottom: 1rem
}

.input-group:not(:last-child):not(:last-of-type) {
  margin-bottom: 1rem
}

.input-group > * {
  width: 100%
}

.input-group .input-label {
  margin-bottom: 0.25rem
}

.input-group .input-append, .input-group .input-prepend {
  display: flex;
  align-items: center
}

.input-group .input-prepend:first-child {
  padding-left: 0;
  padding-right: 0.25rem;
  float: left
}

.input-group .input-prepend:last-child {
  flex-grow: 1
}

.input-group .input-append:first-child {
  flex-grow: 1
}

.input-group .input-append:last-child {
  padding-left: 0.25rem;
  padding-right: 0;
  float: right
}

.input-control {
  transition: border-bottom-color 0.3s ease-in-out;
  border-radius: 5px;
  background-color: var(--input-box-background-color);
  border: 1px solid var(--input-box-border-color);
  line-height: 1.5 !important;
  padding: 0.25rem 0.5rem;
  width: 100%
}

.input-control:not(.input-disabled):hover {
  border-color: var(--input-box-border-ative-color)
}

.input-control:not(.input-disabled):focus {
  border-color: var(--input-box-border-ative-color);
  outline: 0
}

.input-control:disabled {
  background-color: #efefef;
  border-color: #dfebef
}

select.input-control {
  padding: 0.5rem
}

textarea {
  resize: none
}

.date-picker, .date-picker:focus {
  background: 0 0;
  border: 0 solid transparent;
  padding: 0;
  margin: 0;
  outline: 0 solid transparent;
  vertical-align: bottom
}

.date-picker::-webkit-calendar-picker-indicator:hover {
  background: 0 0 !important;
  cursor: pointer
}

.date-picker::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none
}

input[type=button], input[type=checkbox], input[type=date], input[type=datetime-local], input[type=datetime], input[type=month], input[type=radio], input[type=submit], input[type=time], input[type=week], select {
  cursor: pointer
}

.input-checkbox {
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.125rem;
  cursor: pointer;
  margin: 0.25rem;
  padding: 0.25rem 0.5rem;
  width: auto !important
}

.input-checkbox > input[type=checkbox] {
  display: none !important
}

.input-checkbox.checked {
  background-color: var(--primary-background-color) !important;
  color: #fff !important
}

.input-checkbox:not(.checked) {
  background-color: #efefef !important;
  color: #000
}

.input-checkbox > *, .input-checkbox > :active, .input-checkbox > :focus, .input-checkbox > :hover {
  background: 0 0 !important;
  border: 0 solid transparent !important;
  padding: 0 !important ;
  margin: 0 !important ;
  outline: 0 solid transparent !important
}

.modal .modal-toggle {
  cursor: pointer
}

.modal .modal-container {
  background-color: rgba(0, 0, 0, .25);
  bottom: 0;
  height: 100vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000
}

.modal .modal-container .modal-content {
  border-radius: 0.5rem;
  background-color: #fff;
  left: 50%;
  margin: auto;
  overflow: auto;
  padding: 1rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.75);
}

@media only screen and (min-width: 1232px) and (max-width: 1439px), only screen and (min-width: 1440px) {
  .modal .modal-container .modal-content {
    width: 50%
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1231px) {
  .modal .modal-container .modal-content {
    width: 66.666%
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-container .modal-content {
    width: 66.666%
  }
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
  .modal .modal-container .modal-content {
    width: 66.666%
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px) {
  .modal .modal-container .modal-content {
    width: 83.333%
  }
}

@media only screen and (max-width: 319px) {
  .modal .modal-container .modal-content {
    width: 91.666%
  }
}

.modal .modal-container .modal-content > * {
  width: 100%;
  display: block
}

/* .modal .modal-container .modal-content > :not(:last-child) {
  margin-bottom: 1rem
} */

.modal .modal-container .modal-content > .body {
  overflow: auto
}

.modal:not(.modal-active) .modal-container {
  display: none !important
}

.rounded-l {
  border-radius: 0.5rem
}

.rounded-m {
  border-radius: 0.25rem
}

.rounded-s {
  border-radius: 0.125rem
}

.no-rounded {
  border-radius: 0
}

.no-shadow {
  box-shadow: none
}

.shadow-up-s {
  box-shadow: 0 0.5rem 0.25rem 0 #a0a0a0
}

.shadow-up-m {
  box-shadow: 0 0.5rem 0.5rem 0 #a0a0a0
}

.shadow-up {
  box-shadow: 0 0.5rem 0.5rem 0 #a0a0a0
}

.shadow-up-l {
  box-shadow: 0 0.5rem 1rem 0 #a0a0a0
}

.shadow-s {
  box-shadow: 0 0 0.25rem 0 #a0a0a0
}

.shadow-m {
  box-shadow: 0 0 0.5rem 0 #a0a0a0
}

.shadow {
  box-shadow: 0 0 0.5rem 0 #a0a0a0
}

.shadow-l {
  box-shadow: 0 0 1rem 0 #a0a0a0
}

.shadow-down-s {
  box-shadow: 0 -.5rem 0.25rem 0 #a0a0a0
}

.shadow-down-m {
  box-shadow: 0 -.5rem 0.5rem 0 #a0a0a0
}

.shadow-down {
  box-shadow: 0 -.5rem 0.5rem 0 #a0a0a0
}

.shadow-down-l {
  box-shadow: 0 -.5rem 1rem 0 #a0a0a0
}

canvas.jSignature {
  width: 100%;
  height: 100%
}

.tab > .header {
  display: flex;
  width: 100%;
  overflow-y: auto
}

.tab > .header > .tab-toggle {
  flex-grow: 1
}

.tab > .header > .tab-toggle:not([tab-style]), .tab > .header > .tab-toggle[tab-style=true] {
  border-radius: 0
}

.tab > .header > .tab-toggle:not([tab-style]):first-of-type, .tab > .header > .tab-toggle:not([tab-style]):last-of-type, .tab > .header > .tab-toggle[tab-style=true]:first-of-type, .tab > .header > .tab-toggle[tab-style=true]:last-of-type {
  border-radius: 0.25rem
}

.tab > .header > .tab-toggle:not([tab-style]):not(:last-of-type), .tab > .header > .tab-toggle[tab-style=true]:not(:last-of-type) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.tab > .header > .tab-toggle:not([tab-style]):not(:first-of-type), .tab > .header > .tab-toggle[tab-style=true]:not(:first-of-type) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.tab > .header > .tab-toggle:not([tab-style]).tab-active, .tab > .header > .tab-toggle[tab-style=true].tab-active {
  background-color: var(--primary-background-color) !important;
  color: #fff !important
}

.tab > .header > .tab-toggle:not([tab-style]):not(.tab-active), .tab > .header > .tab-toggle[tab-style=true]:not(.tab-active) {
  background-color: #efefef !important;
  color: #000
}

.tab > .body .tab-content {
  width: 100%;
  margin-top: 0.5rem
}

.tab > .body .tab-content:not(.tab-active) {
  display: none !important
}

.tab-toggle[tab-group] {
  cursor: pointer
}

.tab-content[id]:not(.tab-active) {
  display: none !important
}

* {
  font-family: Roboto, Arial, Helvetica, sans-serif
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .font-size-s {
    font-size: 12px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .font-size-s {
    font-size: 10px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .font-size-m {
    font-size: 16px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .font-size-m {
    font-size: 14px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .font-size {
    font-size: 16px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .font-size {
    font-size: 14px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .font-size-l {
    font-size: 20px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .font-size-l {
    font-size: 18px
  }
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  .font-size-xl {
    font-size: 24px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  .font-size-xl {
    font-size: 22px
  }
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.text-right {
  text-align: right
}

.font-bold {
  font-weight: 700
}

.clearfix:after, .clearfix:before {
  display: table;
  content: ""
}

.clearfix:after {
  clear: both
}

 

.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.dropdown, .dropup {
  position: relative
}

.dropdown-toggle:active, .open .dropdown-toggle {
  outline: 0
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  opacity: 0.3
}

.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px
}

.dropdown:hover .caret, .open .caret {
  opacity: 1
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 4px 0;
  margin: 1px 0 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto
}

.dropdown-menu .divider {
  height: 1px;
  margin: 8px 1px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #fff
}

.dropdown-menu a {
  display: block;
  padding: 3px 15px;
  clear: both;
  font-weight: 400;
  line-height: 18px;
  color: #333;
  white-space: nowrap
}

.dropdown-menu .active > a, .dropdown-menu .active > a:hover, .dropdown-menu li > a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #08c
}

.open .dropdown-menu {
  display: block
}

.pull-right .dropdown-menu {
  right: 0;
  left: auto
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid #000;
  content: "\2191"
}

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px
}

.typeahead {
  margin-top: 2px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

body {
  background-color: #dfdfdf;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh
}

body * {
  box-sizing: border-box;
  line-height: 1 !important
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  body * {
    font-size: 16px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  body * {
    font-size: 14px
  }
}

a {
  color: var(--text-links-color);
  cursor: pointer;
  text-decoration: none
}

a:hover {
  color: var(--text-links-color-hover);
  cursor: pointer;
  text-decoration: none
}

a:focus {
  outline: inherit
}

img {
  max-height: 100%;
  max-width: 100%
}

ol {
  margin: 0;
  padding: 0
}

.no-select {
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none
}

.hidden {
  display: none !important
}

a.report {
  width: fit-content
}

@media only screen and (min-width: 1024px), only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 640px) and (max-width: 767px) {
  a.report {
    font-size: 16px
  }
}

@media only screen and (min-width: 320px) and (max-width: 639px), only screen and (max-width: 319px) {
  a.report {
    font-size: 14px
  }
}

.disabled {
  pointer-events: none;
  opacity: 0.5
}

.main-content > .content > :not(:last-child), .main-content > .content > form > :not(:last-child) {
  margin-bottom: 1.5rem
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important ;
}

.stop-scroll {
  position: fixed;
  overflow-y: scroll;
  width: 100%
}

li {
  list-style: none outside none;
}

.td {
  padding-bottom: 2px !important;
  padding-top: 2px !important
}

.table-top {
  display: inline-flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.25rem 0;
}

.results {
  padding: 0 10px
}

@media only screen and (min-width: 501px) {
  .search-controller[data-columns] {
    margin-right: 0.5rem
  }
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #000
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1
}

.ms-options-wrap {
  position: relative
}

.ms-options-wrap > .ms-options {
  width: 100% !important;
  left: 0
}

.ms-options-wrap > button {
  white-space: normal !important
}

.shadow-primary {
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}



select { /*-webkit-appearance:none;-moz-appearance:none;*/
  background: 0 0; /*background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");background-repeat:no-repeat;background-position:right;*/
  border: 1px solid var(--input-box-border-color);;
  border-radius: 5px;
  padding: 0.4rem
}

.input-control {
  transition: background-color 0.2s ease-in-out
}

.progress {
  border: 1px solid #ccc;
  border-radius: 20px;
  margin: 1rem;
  background-color: #e1e1e1;
  padding: 0 !important;
}

.progress .bar {
  transition: width 2s cubic-bezier(.24, .78, .32, .96), background-color 0.35s ease-in;
  padding: 0.2rem 0 !important;
  border-radius: 20px;
  text-align: center;
  font-weight: 700
}

.filter-options[filter-type=single] .filter-option {
  outline: 0;
  border: 0
}

.modal-content .header {
  white-space: normal
}

.tbody:not(.no-hover) > .tr:hover > .td {
  background-color: #9d9d9d !important;
  color: #fff !important
}

.tbody > .tr:hover > .td > a {
  background-color: transparent !important;
  color: #fff !important
}

.modal {
  color: #000
}

.modal .modal-content > .body {
  max-height: 65vh;
  overflow-y: auto
}

.table-responsive .table .thead > .tr:first-of-type > .td:first-of-type {
  border-radius: 13px 0 0 0
}

.table-responsive .table .thead > .tr:first-of-type > .td:last-of-type {
  border-radius: 0 13px 0 0
}

.table-responsive .table .tbody > .tr:last-of-type:first-child {
  border-radius: 0 0 0 13px
}

.table-responsive .table .tbody > .tr:last-of-type:last-child {
  border-radius: 0 0 13px 0
}

.table-responsive {
  border-radius: 13px
}

.input-control.input-disabled {
  color: #666;
  background-color: #efefef;
  border-color: #dfebef
}

form[method="post"] input:not([disabled]):not([readonly]), form[method="post"] select:not([disabled]):not([readonly]), .testDateInput, form[method="post"] .input-control:not([disabled]):not([readonly]) {
  background-color: var(--search-box-background-color)
}
form[method="post"] .input-control:not([disabled]):not([readonly]) option{
  background-color:white !important;
}

.input-signature canvas {
  background-color: transparent !important
}

select.input-control :nth-child(n) {
  background-color: white !important;
}

.searchList {
  position: absolute;
  background-color: white;
  border: 1px solid silver;
  border-radius: 10px;

  padding: 0.5rem;
  display: flex;
  max-height: 15rem;
  overflow-y: auto;
  z-index: 999;
}

.searchList ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
.searchList li:hover {
background-color: silver;
  cursor: pointer;
}
.searchList li {
  padding: 0.2rem;
  border-radius: 10px;
 padding: 0.4rem;
}

.searchList .loader{
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.share-registry{
  background-color: rgb(255, 224, 131);
  min-width: 6rem;
  padding: 8px 5px;
  height: auto;
  max-width: 15rem;
  white-space: normal;
  margin-left: auto;
  font-size: 1rem;
  border-radius: 5px;
  border-style: solid;
  color:#000;
  border-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;
}
.share-registry:hover{
  background-color:  rgba(255, 192, 0, 1);
  transition: all .2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
}


.delete-registry{
  background-color: rgba(165, 0, 0, 0.84);
  min-width: 6rem;
  padding: 8px 5px;
  height: auto;
  max-width: 15rem;
  white-space: normal;
  margin-left: auto;
  font-size: 1rem;
  border-radius: 5px;
  border-style: solid;
  color:#fff;
  border-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;

}
.delete-registry:hover{
  background-color: rgba(223, 0, 0, 0.84);
  transition: all .2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);

}
.wpl-link{
  background-color:transparent;
  min-width: 6rem;
  padding: 8px 5px;
  height: auto;
  max-width: 15rem;
  white-space: normal;
  font-size: 1rem;
  border-radius: 5px;
  border-style: solid;
  color: var(--primary-client-bg-Color);
  border-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;

}
.wpl-link:hover{
  background-color: rgba(223, 0, 0, 0.84);
  transition: all .2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);

}
.search-controller{
  width: 75%;
  flex-grow: 1;
}

.button-registry{
  padding:0.6rem;
  border-radius: 5px;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
  font-size:1rem;
  color:white;

}
.btn-green{
  background-color: #00a22e;
}

.stateswitch {
  position: relative; width: 95px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.stateswitch-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.stateswitch-label {
  display: block; overflow: hidden; cursor: pointer;
  border-radius: 21px;
}
.stateswitch-inner {
  display: block; width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.stateswitch-inner:before, .stateswitch-inner:after {
  display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 22px;
  font-size: 13px;  font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
  box-sizing: border-box;
}
.stateswitch-inner:before {
  content:  attr(data-ontext);
  padding-right: 14px;
  background-color: #1f8d263d; 
  color: #116f17;
  text-align: center;
  font-style: normal;
  font-weight: bold;

}
.stateswitch-inner:after {
  content: attr(data-offtext);
  padding-left: 20px;
  background-color: #e20a0a33; 
  color: #db0505;
  text-align: center;
  font-style: normal;
  font-weight: bold;

}
.stateswitch-inner.icons:before {
  content:  attr(data-ontext);
  padding-right: 20px;
  background-color: #1f8d263d;
  color: #116f17;
  text-align: center;
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: bold;

}
.stateswitch-inner.icons:after {
  content: attr(data-ontext);
  padding-left: 15px;
  background-color: #e20a0a33;
  color: #db0505;
  text-align: center;
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: bold;

}
.stateswitch-switch {
  display: block; width: 23px; margin: 0px;
  background: #db0505;
  position: absolute; top: 0; bottom: 0;
  right: 72px;
  border-radius: 33px;
  transition: all 0.3s ease-in 0s;
}
.stateswitch-checkbox:checked + .stateswitch-label .stateswitch-inner {
  margin-left: 0;
}
.stateswitch-checkbox:checked + .stateswitch-label .stateswitch-switch {
  right: 0px !important;
  background-color: #116f17;
}

.hiddenWidth{position:absolute;visibility: hidden;display: block}



.newOrder-Notify{
  background-color: rgb(91, 219, 55);
  min-width: 6rem;
  padding: 8px 5px;
  height: auto;
  max-width: 15rem;
  white-space: normal;
  margin-left: auto;
  font-size: 1rem;
  border-radius: 5px;
  border-style: solid;
  color:#000;
  border-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;
}
.newOrder-Notify:hover{
  background-color:  rgb(18, 255, 55);
  transition: all .2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
}

.newOrder-btn{
  background-color: rgba(1, 110, 39, 0.84);;
  min-width: 6rem;
  padding: 8px 5px;
  height: auto;
  max-width: 15rem;
  white-space: normal;
  font-size: 1rem;
  border-radius: 5px;
  border-style: solid;
  color:#fff;
  border-color: transparent;
  cursor: pointer;

}
.newOrder-btn:hover{
  background-color: rgba(0, 180, 39, 0.8);
  transition: all .2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
}
.table .tr .td:first-child{
  border-radius: 0.25rem 0 0 0.25rem;
  border-left: 3px solid #00000009;
}
.table .tr .td{
  /* border-bottom: 3px solid #00000009; */
  /* border-top: 3px solid #00000009; */
}

.table .tr .td:last-child{
  border-radius: 0 0.25rem 0.25rem 0 ;
  border-right: 1px solid #00000009;
}

.table .tr .th:first-child{
  border-radius: 0.25rem 0 0 0;
}
.table .tr .th:last-child{
  border-radius: 0 0 0.25rem 0 ;
}



/* BUTTONS */

.standart-btn{
  background-color: var(--standart-button-color);
  color: white;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  display: inline;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  border-color: transparent;
  cursor: pointer;
}

.standart-btn:hover {
  background-color: var(--standart-button-hover);
  border-color: var(--standart-button-hover);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}

.add-btn{
  background-color: var(--standart-button-color);
  color: white;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  width:auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem;
  border-radius: 0.25rem;
  border-color: transparent;
  cursor: pointer;
}

.add-btn:hover {
  background-color: var(--standart-button-hover);
  border-color: var(--standart-button-hover);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}

.edit-btn {
  background-color: var(--edit-color);
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 0.5rem 1rem;
  min-width: 6rem;
  max-width: 15rem;
  height: auto;
  white-space: normal;
  font-size: 1rem;
  font-weight: bold;
  float:unset;
  border-radius: 0.25rem;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
}

.edit-btn:hover {
  background-color: var(--edit-color-hover);
  border-color: var(--edit-color-hover);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}

.confirm-btn {
  background-color: var(--confirm-color);
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 0.5rem 1rem;
  min-width: 6rem;
  max-width: 15rem;
  height: auto;
  white-space: normal;
  font-size: 1rem;
  font-weight: bold;
  float:unset;
  border-radius: 0.25rem;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
}

.confirm-btn:hover {
  background-color: var(--confirm-color-hover);
  border-color: var(--confirm-color-hover);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}

.cancel-btn{
  background-color: var(--cancel-color);
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 0.5rem 1rem;
  min-width: 6rem;
  max-width: 15rem;
  height: auto;
  white-space: normal;
  font-size: 1rem;
  font-weight: bold;
  float:unset;
  border-radius: 0.25rem;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
}

.cancel-btn:hover {
  background-color: var(--cancel-color-hover);
  border-color: var(--cancel-color-hover);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23)
}

.disabled-btn {
  background-color: var(--disabled-color);
  color: var(--disabled-border-color);
  text-align: center;
  padding: 0.5rem 1rem;
  min-width: 6rem;
  max-width: 15rem;
  height: auto;
  white-space: normal;
  font-size: 1rem;
  font-weight: bold;
  float:unset;
  border-radius: 0.25rem;
  border-color: transparent;
  border-width: 0;
  border-style: solid;
}

.location-btn{
  background-color: var(--secondary-background-color); 
  color: white;
  cursor: pointer;
}

.location-btn:hover{
  background-color: var(--secondary-background-color); 
  color: white;
  cursor: pointer;
}

.route-btn{
  background-color: var(--disabled-color); 
  color: white;
  cursor: pointer;
}

.route-btn:hover{
  background-color: var(--disabled-color-hover); 
  color: white;
  cursor: pointer;
}

.set-here-btn{
  background-color: var(--confirm-color);
  color: white;
  cursor: pointer;
}

.set-here-btn:hover{
  background-color: var(--confirm-color-hover);
  color: white;
  cursor: pointer;
}

.export-icons-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.5rem;
  margin-left: 0.5rem;
  min-width: 10rem;
}

.export-icon {
  color:var(--primary-background-color);
  font-size:30px; 
  cursor: pointer;
}

.export-icon:hover {
  color:var(--secondary-background-color);
}

.icon-color-green{
  color: var(--confirm-color);
}

.icon-color-red{
  color: var(--cancel-color);
}

.edit-icon-btn{
  padding: 0.35rem;
  background-color: var(--primary-background-color);
  height: unset ;
  max-width: 35px;
  border-radius: 0.25rem;
  color: #fff;
}

.search-btn{
  margin: 0rem 1rem;
  float: unset;
  background-color: var(--primary-background-color);
  border-radius: 0.25rem;
  color: #fff;
  padding: 0.5rem;
  cursor: pointer;
}

/* TEXT COLORS */

.text-white{
  color: var(--text-white-color);
}
.text-white:hover{
  color: var(--text-white-color);
}

.text-black{
  color: var(--text-black-color);
}

.text-active{
  color: var(--text-ative-color);
}

.text-inactive {
  color: var(--text-inative-color);
}

.input-error {
  border-color: var(--error-input-border);
  background-color: var(--error-input);
}


/* FORM */

.modal-header{
    font-size: x-large;
    background: var(--primary-background-color);
    color: white;
    padding: 1rem;
    border-radius: 5px 5px 0 0;
    /* display: flex !important; 
    justify-content: space-between;
    align-items: center; */
}

.form-footer{
  display: flex;
  justify-content: right;
  margin-top: 1.5rem;
}

.is-invalid {
  border: 1px solid var(--error-input-border);
  background-color: var(--error-input);
}

.input-error-field {
  color: var(--error-input);
  font-size: 12px;
  margin-top: 0.25rem;
  display: none;
}



.error-text {
  color: var(--error-input);
  font-size: 0.85rem;
}


.search-card{
  min-height: 7.5rem;
}

.form-header {
  font-size: x-large;
  background: var(--primary-background-color);
  color: white;
  padding: 1rem;
  border-radius: 5px 5px 0 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.modal-body{
  padding:1rem;
  overflow: unset !important;
   margin-bottom: 0;
}

.modal-footer{
  padding: 0 1rem 1rem 1rem; 
  text-align: right
}

.user-btn-export{
  font-size: 1rem;
  margin: 1rem;
  background-color: var(--primary-background-color) !important;
  color: white;
  white-space: nowrap;
  padding:0.25rem;
  width:unset
}

.info-message-success{
  background-color: var(--confirm-color);
  border: 1px solid var(--confirm-color-hover);
  border-radius: 5px;
  color: #fff;
  padding: 1rem;
}

.info-message-error{
  background-color: var(--cancel-color-hover);
  border: 1px solid var(--cancel-color);
  border-radius: 5px;
  color: #fff;
  padding: 1rem;
}

.customChkBox{
  background-color: white !important;
  color: var(--text-inative-color) !important;
  border: 1px solid var(--text-inative-color);
  border-radius: 5px;
  font-weight: bold;
  padding: 0.25rem 1rem;
  cursor: pointer;
}

.customChkBoxSelected{
  background-color: white !important;
  color: var(--text-ative-color) !important;
  border: 1px solid var(--text-ative-color);
  border-radius: 5px;
  font-weight: bold;
  padding: 0.25rem 1rem;
  cursor: pointer;
}

.bk-color-primary{
  background-color: var(--primary-background-color);
}