.search-wrapper {
    /* width: 18.75rem; */
    position: relative;
    width: 15.625rem;            /* 250px */
    min-width: 12.5rem;          /* 200px */
    max-width: 21.875rem;
}

.search-wrapper .search-icon {
    top: 50%;
    left: 0.75rem; /* 12px */
    transform: translateY(-50%);
    color: #ffffff;
    pointer-events: none;
    z-index: 2;
}

.search-wrapper .form-control {
    background-color: #222222;
    color: #ffffff;
    height: 2rem;                /* 32px */
    border-radius: 0.375rem;     /* 6px */ 
    padding-top: 0.5rem;         /* 8px */
    padding-bottom: 0.5rem;      /* 8px */
    font-size: 0.8125rem;        /* 13px */
}
.search-wrapper.form-select:focus{
    border-color: #ffffff;
}

.search-wrapper .form-control::placeholder {
    color: #ffffff;
    opacity: 1;
    font-size: 0.8125rem;        /* 13px */
}
.search-wrapper input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.search-wrapper #clearButton {
    top: 50%;
    right: 0.75rem; /* 12px */
    transform: translateY(-50%);
    color: #fff;
    border: none;
    background: none;
    z-index: 3;
}

.border-sharp-left {
  width: 0.0625rem;
  height: 2rem;
  border: 0.0625rem solid #292929;
}

.calendar-icon {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #adb5bd;
    z-index: 2;
}

.form-select.with-icon {
    padding-left: 2.5rem; 
    border-color: var(--border-color);
}
.form-select:focus {
  /* border-color: transparent !important;  */
  box-shadow: none !important;          
}

.search-wrapper .datepicker {
  padding: 0.188rem 0.75rem;
}

.search-wrapper .datepicker .daterange-value {
  font-size: var(--font-size-12);
}

.export_log {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem; 
  gap: 0.25rem;
}


/* DateRange picker customization ends */
.daterange-value{ 
  font-size: 13px;
  white-space: nowrap;
  line-height: 1;
  color: #fff; 
}