@import "~@ng-select/ng-select/themes/default.theme.css";
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  background-color: #f2f3f8;
  color: var(--text-color);
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
:root {
  --primary-theme: #003143;
  --secondary-light: #dbebfb;
  --text-color: #48465b;
  --error-border: #fa0808;
  --error-color: #fa0808;
  --error-backgound: #fa0808;
}
.asidebarIcons {
  height: 25px !important;
  width: 25px !important;
}

.Services {
  background-image: url("https://aosedge.b-cdn.net/assets/ExAsideIcons/services.svg") !important;
}

.UserConfig {
  background-image: url("https://aosedge.b-cdn.net/assets/ExAsideIcons/organization.svg") !important;
}

.BookingManagement {
  background-image: url("https://aosedge.b-cdn.net/assets/ExAsideIcons/crm.svg") !important;
}

.disabled {
  pointer-events: none;
  cursor: default;
}

.errorspan {
  color: var(--error-color);
  font-size: 14px;
}


.readonlyInput {
  font-size: 14px !important;
  background: #f2f3f8 !important;
}

.booking-history-status-fail {
  background: #fce7e9;
  color: #e24c4b !important;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px !important;
}

.booking-history-status-success {
  background: #e8fff3 !important;
  color: #50cd89 !important;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px !important;
}

.booking-history-status {
  color: black;
  padding: 4px 12px;
  border-radius: 20px;
}
.btn {
  min-width: 64px;
  padding: 0 16px;
  text-align: center;
  min-height: 40px;
  font-size: 16px;
  border-radius: var(--border-radius);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

::ng-deep .ng-dropdown-header {
  display: none !important;
}
::ng-deep .p-fileupload .p-fileupload-buttonbar .p-fileupload-choose{
  background-color: var(--primary-theme) !important;
}
.treeTableUser .p-datatable-wrapper .p-datatable-thead tr {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr;
  padding: 0 5px;
}
.treeTableUser .p-treetable .p-treetable-thead > tr > th {
  text-align: left;
  padding: 1rem;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  background: #f8f9fa;
  transition: box-shadow .2s;
}
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.formInput[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
.phoneCodeWrapper {
  display: grid;
  grid-template-columns: 30% 70%;
}
.text-nowrap {
  white-space: nowrap;
}
.resultNotFound {
  height: 42px;
}
.resultNotFound td {
  position: absolute !important;
  width: 100% !important;
  text-align: center !important;
}
.passwordCriteria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 17px;
}
.passwordCriteria li {
  font-size: 12px;
}
.status {
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}
.status-success {
  background: #e8f6e6;
  color: #62bc55;
}
.status-failed {
  background: #fce7e9;
  color: #e24c4b;
}
.ng-asideToggle {
  cursor: pointer;
}
.mat-mdc-menu-item-text {
  font-size: 14px !important;
}
.app-SubTabs.rate-tabs .p-tabview .p-tabview-panels {
  background: transparent;
}
.formControlWrapper {
  position: relative;
  margin-bottom: 20px;
}
.p-toast-message-error .p-toast-message-icon .p-icon-wrapper {
  width: 25px;
  height: 25px;
  color: #73000c;
  margin-top: 6px;
}
.p-toast-message-success .p-toast-message-icon .p-icon-wrapper {
  width: 23px;
  height: 23px;
  color: #224a23;
  margin-top: 4px;
}
.p-toast-message-error .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
  margin: 0 0 0 0.8rem !important;
}
.p-toast-message-success.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
  margin: 0 0 0 0.8rem !important;
}
.p-toast-message-error .p-toast-icon-close .p-icon-wrapper {
  color: #73000c;
  margin-top: 10px;
}
.p-toast-message-success .p-toast-icon-close .p-icon-wrapper {
  color: #224a23;
  margin-top: 10px;
}
.p-toast .p-toast-message .p-toast-icon-close:hover {
  background: transparent !important;
}

@media screen and (max-width: 960px) {
  ::ng-deep .ng-dropdown-header {
    display: block !important;
  }

  ::ng-deep .ng-dropdown-panel.ng-select-top {
    width: 100% !important;
  }
}
@media screen and (min-width: 1301px) {
  .app-loginBody {
      max-width: 75%;
      min-height: 100vh;
  }
}
.ErrorWrapper .formInput, .ErrorWrapper .ng-select-container, .error-tab.ErrorWrapper{
  border: 1px solid var(--error-border) !important;
  border-radius: 4px !important;
}

::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{
  font-size: 14px !important;
}