@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

/* src/styles.scss */
html {
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
body {
  margin: 0;
  font-family: "Inter", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #0094ca;
  font-weight: 0;
}
p {
  margin: 0;
}
@media screen and (max-width: 979px) {
  p {
    font-size: 0.8rem;
  }
}
input[type=text],
select {
  display: flex;
  flex-direction: column;
  margin: 8px 0;
  width: 100%;
}
input[type=text] label,
select label {
  margin-bottom: 4px;
  font-size: 0.8rem;
}
input[type=text] input,
input[type=text] select,
select input,
select select {
  font-size: 1rem;
  padding: 16px 12px;
  border-radius: 4px;
  border: 1px solid #0094ca;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
input[type=text] input:focus,
input[type=text] select:focus,
select input:focus,
select select:focus {
  outline: none;
}
input[type=text] input:disabled,
input[type=text] select:disabled,
select input:disabled,
select select:disabled {
  background-color: #efeff0;
  cursor: not-allowed;
}
input[type=text] .error,
select .error {
  position: relative;
}
input[type=text] .error input,
select .error input {
  border: 1px solid #dc3545;
}
input[type=text] .error::after,
select .error::after {
  content: "info";
  font-family: "Material Icons";
  color: #dc3545;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3%;
  font-size: 0.8rem;
}
input[type=text] .error-message,
select .error-message {
  color: #dc3545;
  font-size: 0.8rem;
}
.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
button {
  all: unset;
}
.regular-button,
.remove-button,
.secondary-button,
.primary-button {
  width: 180px;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  padding: 15px;
  margin-top: 20px;
  align-self: flex-end;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 45px;
}
.regular-button app-spinner,
.remove-button app-spinner,
.secondary-button app-spinner,
.primary-button app-spinner {
  padding-left: 4px;
}
.primary-button {
  background-color: #0094ca;
  --mat-progress-spinner-active-indicator-color: white;
}
.primary-button:hover {
  background-color: rgb(0, 129.3168316832, 176.5);
}
.primary-button:disabled {
  cursor: not-allowed;
  background-color: rgb(0, 91.9504950495, 125.5);
}
.secondary-button {
  background-color: white;
  border: 1px solid #0094ca !important;
  color: #0094ca;
  --mat-progress-spinner-active-indicator-color: white;
}
.secondary-button:hover {
  background-color: rgb(242.25, 242.25, 242.25);
}
.secondary-button:disabled {
  cursor: not-allowed;
  background-color: rgb(216.75, 216.75, 216.75);
}
.remove-button {
  background-color: #dc3545;
  --mat-progress-spinner-active-indicator-color: white;
}
.remove-button:hover {
  background-color: rgb(210.9493670886, 36.5506329114, 53.2594936709);
}
.remove-button:disabled {
  cursor: not-allowed;
  background-color: rgb(167.4810126582, 29.0189873418, 42.2848101266);
}
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
form .form-row {
  display: flex;
  gap: 20px;
  flex: 1 1 45%;
}
@media screen and (max-width: 979px) {
  form .form-row {
    flex-direction: column;
  }
}
form .form-row app-text-input,
form .form-row app-dropdown {
  width: 50%;
}
@media screen and (max-width: 979px) {
  form .form-row app-text-input,
  form .form-row app-dropdown {
    width: 100%;
  }
}
.mdc-switch__icon {
  display: none !important;
}
.error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
}
:root {
  --mat-slide-toggle-unselected-handle-color: white;
  --mat-slide-toggle-selected-handle-color: white;
  --mat-slide-toggle-track-outline-color: white;
  --mat-slide-toggle-unselected-track-color: #77807f;
  --mat-slide-toggle-selected-track-color: #0094ca;
  --mat-slide-toggle-selected-focus-handle-color: white;
  --mat-slide-toggle-selected-hover-handle-color: white;
  --mat-slide-toggle-selected-pressed-handle-color: white;
  --mat-slide-toggle-unselected-focus-handle-color: white;
  --mat-slide-toggle-unselected-hover-handle-color: white;
  --mat-slide-toggle-unselected-pressed-handle-color: white;
  --mat-slide-toggle-selected-focus-track-color: #0094ca;
  --mat-slide-toggle-selected-hover-track-color: #0094ca;
  --mat-slide-toggle-selected-pressed-track-color: #0094ca;
  --mat-slide-toggle-unselected-focus-track-color: #77807f;
  --mat-slide-toggle-unselected-hover-track-color: #77807f;
  --mat-slide-toggle-unselected-pressed-track-color: #77807f;
  --mat-progress-spinner-active-indicator-color: #0094ca;
  --mat-tooltip-container-color: #77807f;
  --mat-tooltip-supporting-text-color: white;
  --mat-tab-active-focus-indicator-color: #0094ca;
  --mat-tab-active-focus-label-text-color: #0094ca;
  --mat-tab-active-label-text-color: #0094ca;
  --mat-tab-active-hover-label-text-color: #0094ca;
  --mat-tab-active-indicator-color: #0094ca;
  --mat-tab-active-hover-indicator-color: #0094ca;
  --mat-tab-label-text-weight: 400;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */
