@import "https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap";

/* src/styles.scss */
:root {
  --primary-color: #0D314D;
  --secondary-color: #0D9B84;
  --primary-semi-med-icons: #597190;
  --secondary-on-secondary: #F9F9F9;
  --secondary-color-badges: rgba(13, 155, 132, 0.10);
  --light-secondry-30-chips: rgba(131, 197, 186, 0.30);
  --background-color: #E7F0F9;
  --text-dark: #051D30;
  --text-mid: #597190;
  --stroke-50: rgba(153, 172, 196, 0.50);
  --stroke-color-borders: #99ACC4;
  --mid-neutral-lines: #C0C0C0;
  --Light-Surface: #E7EDF4;
  --surface-color-cards: #FFF;
  --cards: #FFF;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none !important;
  font-family: "Tajawal", sans-serif !important;
}
html {
  font-size: 10px;
}
body {
  min-height: 100vh;
  font-family: "Tajawal", sans-serif !important;
}
img {
  width: 100%;
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded" !important;
}
.d-flex,
.shared-page-container .page-section .section-row .row-title,
.shared-page-container .page-section .section-row,
.shared-page-container .page-section .section-info .chips {
  display: flex;
  align-items: center;
}
.avatar-img,
.shared-page-container .profile-info .profile-image {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shared-page-container {
  width: 100%;
  padding: 2.4rem 2rem;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--stroke-50);
  background: var(--Light-Surface);
}
@media screen and (max-width: 768px) {
  .shared-page-container {
    padding: 2.1rem 1.6rem 4rem;
    border-radius: 0;
  }
}
.shared-page-container .section-divider {
  width: 100%;
  height: 1px;
  background-color: var(--stroke-color-borders);
  margin: 1.8rem 0;
}
@media screen and (max-width: 768px) {
  .shared-page-container .section-divider {
    margin: 1.6rem 0;
  }
}
.shared-page-container .profile-info .profile-image {
  border: 1.771px solid var(--stroke-color-borders);
}
.shared-page-container .profile-info .profile-name {
  color: var(--text-dark);
}
.shared-page-container .page-section {
  padding: 2.4rem 2rem;
  width: 100%;
  border-radius: 1.6rem;
  border: 1px solid var(--stroke-color-borders);
  background: var(--surface-color-cards);
}
@media screen and (max-width: 768px) {
  .shared-page-container .page-section {
    padding: 1.6rem 1.2rem;
    border-radius: 0.8rem;
  }
}
.shared-page-container .page-section .section-info {
  color: var(--text-dark);
  font-size: 1.6rem;
  line-height: 180%;
}
.shared-page-container .page-section .section-info .title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.shared-page-container .page-section .section-info .description {
  font-weight: 400;
}
.shared-page-container .page-section .section-info.about-section .description {
  color: var(--primary-color);
}
.shared-page-container .page-section .section-info .chips {
  justify-content: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.shared-page-container .page-section .section-info .chips .chip {
  font-size: 1.4rem;
  font-weight: 400;
  padding: 1rem 1.2rem 0.8rem;
  border-radius: 3.43rem;
  border: 0.5px solid var(--mid-neutral-lines);
  background: var(--light-secondry-30-chips);
}
@media screen and (max-width: 768px) {
  .shared-page-container .page-section .section-info {
    font-size: 1.4rem;
  }
  .shared-page-container .page-section .section-info .title {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }
  .shared-page-container .page-section .section-info.about-section .title {
    margin-bottom: 0.8rem;
  }
  .shared-page-container .page-section .section-info .chips {
    gap: 0.8rem;
  }
  .shared-page-container .page-section .section-info .chips .chip {
    font-size: 1.2rem;
    padding: 0.6rem 0.8rem 0.4rem;
    border-radius: 2rem;
  }
}
.shared-page-container .page-section .section-row {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 180%;
}
.shared-page-container .page-section .section-row .row-title {
  width: 31.5%;
  color: var(--text-mid);
  gap: 0.4rem;
}
.shared-page-container .page-section .section-row .row-title .material-symbols-rounded {
  font-variant: 2.4rem;
  font-variation-settings: "wght" 200;
}
.shared-page-container .page-section .section-row .row-info {
  flex-grow: 1;
  color: var(--text-dark);
}
@media screen and (max-width: 768px) {
  .shared-page-container .page-section .section-row .row-title {
    width: 52.13%;
  }
  .shared-page-container .page-section .section-row .row-title .material-symbols-rounded {
    font-size: 1.8rem;
  }
}
.shared-page-container .shared-page-title {
  width: 100%;
  color: var(--primary-color);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 180%;
}
.shared-page-container .shared-page-title .section-divider {
  margin: 2rem 0 0;
}
@media screen and (max-width: 768px) {
  .shared-page-container .shared-page-title {
    display: none;
  }
}
.shared-page-container .reciter-info-section {
  width: 100%;
  gap: 1.2rem;
}
.shared-page-container .reciter-info-section .profile-image {
  width: 7.3rem;
  height: 7.3rem;
}
@media screen and (max-width: 768px) {
  .shared-page-container .reciter-info-section .profile-image {
    width: 4.8rem;
    height: 4.8rem;
  }
}
.shared-page-container .reciter-info-section .reciter-info .profile-name {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 180%;
}
.shared-page-container .reciter-info-section .reciter-info .profile-name .country-flag {
  margin-inline-start: 0.8rem;
  font-size: 1.6rem;
  border-radius: 4px;
}
.shared-page-container .reciter-info-section .reciter-info .rating {
  color: var(--text-dark);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 180%;
}
.shared-page-container .reciter-info-section .reciter-info .rating .icon {
  width: 1.4rem;
  height: 1.4rem;
}
@media screen and (max-width: 768px) {
  .shared-page-container .reciter-info-section .reciter-info .profile-name {
    font-size: 1.6rem;
  }
  .shared-page-container .reciter-info-section .reciter-info .profile-name .country-flag {
    font-size: 1.4rem;
  }
  .shared-page-container .reciter-info-section .reciter-info .rating {
    font-size: 1.2rem;
  }
}
.custom-scroll::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
@media screen and (max-width: 768px) {
  .custom-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 169, 222, 0.3);
  border-radius: 2rem;
  transition: width 0.3s ease;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -ms-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
}
.custom-scroll ::-webkit-scrollbar-track {
  background: #e5e7e8;
  border-radius: 2rem;
}
.loader {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.loader .loading {
  height: 100px;
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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