/* src/global-styles/main.scss */
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=date],
input[type=time] {
  padding: 10px 8px;
  border-radius: var(--border-radius-sm);
  border: var(--input-border);
  display: flex;
  width: 100%;
  transition: box-shadow 150ms;
  font-family: var(--body-font-family);
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=time]:focus {
  outline: none;
  box-shadow: var(--input-focus-box-shadow);
}
input[type=text].small,
input[type=password].small,
input[type=number].small,
input[type=email].small,
input[type=date].small,
input[type=time].small {
  padding: 8px;
  font-size: 0.9rem;
}
textarea {
  padding: 10px 8px;
  border-radius: var(--border-radius-sm);
  border: var(--input-border);
  display: flex;
  width: 100%;
  transition: box-shadow 150ms;
  resize: vertical;
  font-family: var(--body-font-family);
}
textarea:focus {
  outline: none;
  box-shadow: var(--input-focus-box-shadow);
}
textarea.small {
  padding: 8px;
  font-size: 0.9rem;
}
select {
  padding: 10px 8px;
  border-radius: var(--border-radius-sm);
  border: var(--input-border);
  display: flex;
  width: 100%;
  transition: box-shadow 150ms;
  font-family: var(--body-font-family);
}
select:focus {
  outline: none;
  box-shadow: var(--input-focus-box-shadow);
}
select.small {
  padding: 8px;
  font-size: 0.9rem;
}
.form-label {
  font-size: 0.9rem;
  display: inline-block;
  color: hsl(0, 0%, 25%);
  margin-bottom: 4px;
}
.sub-label {
  margin-top: 8px;
  font-size: 0.85rem;
  color: hsl(0, 0%, 40%);
  font-style: italic;
}
.input-group {
  display: flex;
}
.input-group label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--input-group-label-bg-color);
  border: var(--input-border);
  padding: 0 8px;
  color: hsl(0, 0%, 30%);
}
.input-group > :first-child {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :last-child {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group input {
  position: relative;
  z-index: 2;
}
button {
  font-size: var(--body-font-size);
}
.btn {
  background-color: var(--primary);
  color: var(--primary-text-color);
  border: 1px solid var(--primary);
  padding: 8px 16px;
  display: inline-flex;
  justify-content: center;
  gap: 6px;
  transition: background-color 125ms;
}
.btn:hover {
  cursor: pointer;
  background-color: var(--primary-hover);
}
.btn:active {
  background-color: var(--primary-active);
}
.btn.disabled {
  pointer-events: none;
  opacity: 0.65;
}
.btn.small {
  font-size: 0.9rem;
  padding: 6px 16px;
}
.btn.secondary {
  background-color: var(--secondary);
  color: var(--secondary-text-color);
}
.btn.secondary:hover {
  background-color: var(--secondary-hover);
}
.btn.secondary:active {
  background-color: var(--secondary-active);
}
.btn.cancel {
  background-color: unset;
  border: none;
  color: hsl(0, 0%, 38%);
}
.btn.cancel:hover {
  color: hsl(0, 70%, 59%);
}
.btn.cancel:active {
  color: hsl(0, 70%, 40%);
}
.btn.outline {
  background-color: unset;
  color: var(--primary);
}
.btn.outline:hover {
  cursor: pointer;
  background-color: var(--primary);
  color: var(--primary-text-color);
}
.btn.outline:active {
  background-color: var(--primary-active);
}
a.btn {
  text-decoration: none;
}
.btn-link {
  text-decoration: none;
  color: var(--primary);
  background: none;
  border: none;
  padding: unset;
}
.btn-link:hover {
  cursor: pointer;
  color: var(--primary-hover);
  text-decoration: underline;
}
.btn-link:active {
  color: var(--primary-active);
}
img {
  max-width: 100%;
  max-height: 100%;
}
.container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.825rem;
  background-color: var(--primary);
  color: var(--primary-text-color);
}
:root {
  --body-font-size: 16px;
  --body-font-family: "Roboto", sans-serif;
  --body-line-height: 120%;
  --paragraph-line-height: 140%;
  --heading-line-height: 100%;
  --heading-font-family: "Lato", sans-serif;
  --body-font-color: hsl(0 0 15%);
  --body-font-color-muted: hsl(0 0 50%);
  --h1-text-color: hsl(0 0% 15%);
  --h2-text-color: hsl(0 0% 18%);
  --h3-text-color: hsl(0 0% 20%);
  --h4-text-color: hsl(0 0% 22%);
  --h5-text-color: hsl(0 0% 24%);
  --h6-text-color: hsl(0 0% 24%);
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.33rem;
  --h4-font-size: 1.25rem;
  --h5-font-size: 1.15rem;
  --h6-font-size: 1rem;
  --body-bg-color: hsl(0 0% 96%);
  --primary: hsl(221, 97%, 56%);
  --primary-hover: hsl(221 97% 62%);
  --primary-transparent: hsl(221 97% 56% / 0.2);
  --primary-light: hsl(221 97% 81%);
  --primary-active: hsl(221, 97%, 50%);
  --primary-text-color: white;
  --secondary: hsl(221deg 100% 71.12%);
  --secondary-hover: hsl(221deg 100% 75.12%);
  --secondary-active: hsl(221deg 100% 66.12%);
  --secondary-text-color: white;
  --success: hsl(115, 54%, 39%);
  --warning: hsl(44, 87%, 65%);
  --warning-text-color: var(--body-font-color);
  --gray: hsl(0 0% 65%);
  --gray-text-color: white;
  --light-gray: hsl(0 0% 92%);
  --light-gray-text-color: var(--body-font-color);
  --dark-gray: hsl(0 0% 40%);
  --dark-gray-text-color: var(--body-font-color);
  --danger: hsl(349 86.3% 55%);
  --danger-transparent: hsl(349 86.3% 55% / 0.2);
  --danger-hover: hsl(349 86.3% 62%);
  --danger-light: hsl(349 86.3% 81%);
  --danger-text-color: white;
  --input-bg-color: hsl(0 0% 96%);
  --input-hover-bg-color: hsl(0 0% 94%);
  --input-border-color: hsl(0 0% 50%);
  --input-border: 1px solid hsl(0 0% 85%);
  --input-group-label-bg-color: hsl(0 0% 95%);
  --input-sub-label-text-color: hsl(0 0% 35%);
  --input-focus-box-shadow: 0 0 1px 2.5px hsla(204, 100%, 50%, 0.5);
  --input-scrollbar-bg-color: hsl(0 0% 50%);
  --input-scrollbar-track-bg-color: transparent;
  --white: hsl(0 0% 100%);
  --white-hover-bg-color: hsl(0 0% 97%);
  --card-border: 1px solid hsl(0 0% 75%);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, .2),
    0px 1px 1px 0px rgba(0, 0, 0, .14),
    0px 1px 3px 0px rgba(0, 0, 0, .12);
}
@media (max-width: 1000px) {
  :root {
    --body-font-size: 15px;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.3rem;
    --h3-font-size: 1.15rem;
    --h4-font-size: 1.1rem;
    --h5-font-size: 1rem;
    --h6-font-size: 1rem;
  }
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  font-size: var(--body-font-size);
  background-color: var(--body-bg-color);
  color: var(--body-font-color);
  line-height: var(--body-line-height);
}
body {
  font-family: var(--body-font-family);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  margin: 0;
  line-height: var(--heading-line-height);
}
h1 {
  color: var(--h1-text-color);
  font-size: var(--h1-font-size);
}
h2 {
  color: var(--h2-text-color);
  font-size: var(--h2-font-size);
}
h3 {
  color: var(--h3-text-color);
  font-size: var(--h3-font-size);
}
h4 {
  color: var(--h4-text-color);
  font-size: var(--h4-font-size);
}
h5 {
  color: var(--h5-text-color);
  font-size: var(--h5-font-size);
}
h6 {
  color: var(--h6-text-color);
  font-size: var(--h6-font-size);
}
p {
  line-height: var(--paragraph-line-height);
  margin-top: 0;
  margin-bottom: 16px;
}
button label:hover,
a label:hover {
  cursor: pointer;
}
a {
  color: var(--primary);
}
.heading-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 20px;
}
.heading-split > *:nth-child(2) {
  text-align: end;
}
@media (max-width: 1000px) {
  .heading-split {
    grid-template-columns: repeat(1, 1fr);
  }
  .heading-split > *:nth-child(2) {
    text-align: unset;
  }
}
app-card-footer .footer-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
app-card-footer .footer-split > *:first-of-type {
  text-align: start;
}

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