/* Bootstrap Select */
input.form-select, select.form-select{
  height: 45px; /* result in 45-24 = 21px = height for text input */
  font-size: 14px;
}

/* Customize the background and text color of disabled input */
.form-control:disabled,
form-select:disabled {
    background-color: #f7f4f9;
    color: grey;
}

/*Multi-select*/
.dash-dropdown .Select-control {
  padding-left: 1rem !important;
}

.btn {
  font-size: 14px;
}

.nav-item {
  font-size: 14px;
}

.btn-input-group{
  height: 45px; /* result in 45-24 = 21px = height for text input */
}

.table thead th{
  font-size: 16px;
}

/* Applied dash-bootstap-css */
/* Align left to align with bootstrap input component style */
.dash-bootstrap .DateInput_input {
  text-align: left;
}

/* Printable content */
.printable {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.printable td, .printable th {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  font-size: 14px !important;
}

.printable .input-group-text, .printable input.DateInput_input {
  height: 35px !important;
}

.printable input.form-control {
  background-color: #f7f7f9 !important;
  height: 35px !important;
}

/* reset the padding for dcc.DatePickerSingle under table */
/* add className='reset' to DatePickSingle to fix the padding issue*/
.reset table th,
.reset table td {
  padding: initial!important;
}

@media print {
  @page {
    size: A4;
    margin: 40 0 40 0;
  }
  .non-printable { display: none; }/* Hide non-printable elements ... */
}