:host {
  display: block;
}

::ng-deep {
  .p-dropdown {
    width: 100%;
  }
  
  .p-calendar {
    width: 100%;
  }
  
  .input-style {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    
    &:focus {
      border-color: var(--tw-main-blue);
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(2, 62, 122, 0.25);
    }
  }
  
  .input-style-border-0 {
    .p-inputnumber-input {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      
      &:focus {
        border-color: var(--tw-main-blue);
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(2, 62, 122, 0.25);
      }
    }
  }
  
  .p-datatable-wrapper {
    .p-datatable-thead {
      th {
        background-color: var(--tw-main-blue);
        color: white;
      }
    }
  }
  
  .modal {
    .p-dialog-header {
      background-color: var(--tw-main-blue);
      color: white;
      
      .p-dialog-title {
        color: white;
      }
    }
  }
  
  {{#customStyles}}
  {{{.}}}
  {{/customStyles}}
}