/* Vue Select Global Styles */
.v-select {
  --vs-controls-color: #2c3e50;
  --vs-border-color: #0D8C60;
  --vs-dropdown-bg: #ffffff;
  --vs-dropdown-color: #2c3e50;
  --vs-dropdown-option-color: #2c3e50;
  --vs-selected-bg: rgba(13, 140, 96, 0.1);
  --vs-selected-color: #0D8C60;
  --vs-search-input-color: #2c3e50;
  --vs-dropdown-option--active-bg: rgba(13, 140, 96, 0.15);
  --vs-dropdown-option--active-color: #0B5345;
}

.v-select .vs__dropdown-toggle {
    border-color: var(--vs-border-color);
    transition: all 0.2s ease;
    background: white;
}

.v-select:not(.vs--open) .vs__dropdown-toggle:hover {
    border-color: #0B5345;
    box-shadow: 0 0 0 0.2rem rgba(13, 140, 96, 0.1);
}

.v-select.vs--open .vs__dropdown-toggle {
    border-color: #0B5345;
    box-shadow: 0 0 0 0.2rem rgba(13, 140, 96, 0.25);
}

.v-select .vs__selected {
  color: var(--vs-selected-color);
  background: var(--vs-selected-bg);
  border: 1px solid #0D8C60;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* LTR styles */
[dir="ltr"] .v-select .vs__selected {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* RTL styles */
[dir="rtl"] .v-select .vs__selected {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.v-select .vs__search {
    padding-left: 0 !important;
    caret-color: transparent;
}

.v-select .vs__deselect {
  color: #0D8C60;
  transition: color 0.2s ease;
}

.v-select .vs__deselect:hover {
  color: #0B5345;
}

.v-select .vs__clear {
  fill: #0D8C60;
  transition: fill 0.2s ease;
}

.v-select .vs__clear:hover {
  fill: #0B5345;
}

.v-select .vs__dropdown-menu {
  border-color: #0D8C60;
  border-top-color: rgba(0, 0, 0, .03);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.v-select .vs__dropdown-option {
  color: var(--vs-dropdown-option-color);
  transition: all 0.2s ease;
}

.v-select .vs__dropdown-option--highlight {
  background: var(--vs-dropdown-option--active-bg);
  color: var(--vs-dropdown-option--active-color);
}

.v-select.vs--open .vs__open-indicator {
  transform: rotate(180deg) scale(1);
  transition: transform 0.2s ease;
}

.v-select .vs__search::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.v-select.vs--searching .vs__search {
  color: #0D8C60;
}

.b-calendar.b-form-date-calendar {
  text-align: center !important;
}
.b-calendar.b-form-date-calendar * {
  text-align: center !important;
}

/* Datepicker Custom Styles */
.b-form-datepicker {
  --primary: #0D8C60 !important;
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(13, 140, 96, .5);
}

.b-form-datepicker .b-calendar {
  background-color: white !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.b-form-datepicker .b-calendar .btn-primary {
  background-color: #0D8C60 !important;
  border-color: #0D8C60 !important;
  color: white !important;
  transition: all 0.2s ease !important;
}

.b-form-datepicker .b-calendar .btn-primary:hover,
.b-form-datepicker .b-calendar .btn-primary:focus {
  background-color: #0B5345 !important;
  border-color: #0B5345 !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 140, 96, 0.25) !important;
}

.b-form-datepicker .b-calendar .btn-outline-primary {
  color: #0D8C60 !important;
  border-color: #0D8C60 !important;
  background-color: transparent !important;
}

.b-form-datepicker .b-calendar .btn-outline-primary:hover {
  background-color: #0D8C60 !important;
  color: white !important;
}

.b-form-datepicker .b-calendar .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 140, 96, 0.25) !important;
}

.b-form-datepicker .form-control:focus {
  border-color: #0D8C60 !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 140, 96, 0.25) !important;
}

.b-form-datepicker .form-control {
  width: 100% !important;
}

/* Calendar header */
.b-calendar .b-calendar-header {
  background-color: rgba(0, 0, 0, .03) !important;
  border-bottom: 1px solid rgba(13, 140, 96, 0.1) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Today's date highlight */
.b-calendar .b-calendar-grid-body .col[data-date].today {
  background-color: rgba(13, 140, 96, 0.1) !important;
  border-color: #0D8C60 !important;
  color: #0D8C60 !important;
  font-weight: bold !important;
}

/* Selected date */
.b-calendar .b-calendar-grid-body .col[data-date].selected {
  background-color: #0D8C60 !important;
  border-color: #0B5345 !important;
  color: white !important;
}

/* Hover effect on dates */
.b-calendar .b-calendar-grid-body .col[data-date]:hover:not(.selected) {
  background-color: rgba(13, 140, 96, 0.15) !important;
  color: #0B5345 !important;
}

/* Calendar grid */
.b-calendar .b-calendar-grid {
  border-radius: 0 0 8px 8px !important;
  background-color: white !important;
}

/* Week days header */
.b-calendar .b-calendar-grid-header {
  background-color: rgba(0, 0, 0, .03) !important;
  border-bottom: 1px solid rgba(13, 140, 96, 0.1) !important;
}

/* Nav buttons */
.b-calendar .b-calendar-nav button {
  color: #0D8C60 !important;
}
.btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(13, 140, 96, .5);
}

.form-control.focus, .form-control:focus {
    border-color: #0D8C60 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 140, 96, 0.25) !important;
}
html[dir=RTL] .custom-control-label::before{
    /* left: 0 !important; */
    right: -25px !important;
}
html[dir=RTL] .custom-control-label::after{
    /* left: 0 !important; */
    right: -25px !important;
    /* right: 0 !important; */
}


.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(13, 140, 96, .25) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #0D8C60 !important;
    background-color: #0D8C60 !important;
}

input[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

#content .dataTables_wrapper .dataTables_length select {
    background: #fff;
    height:auto !important;
    padding: 2px 4px !important;
}