/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: poppins-regular;
  src: url("/assets/fonts/Poppins-Regular.ttf");
}
@font-face {
  font-family: poppins-bold;
  src: url("/assets/fonts/Poppins-Bold.ttf");
}
@font-face {
  font-family: poppins-italic;
  src: url("/assets/fonts/Poppins-Italic.ttf");
}
@font-face {
  font-family: poppins-semibold;
  src: url("/assets/fonts/Poppins-SemiBold.ttf");
}
@font-face {
  font-family: poppins-light;
  src: url("/assets/fonts/Poppins-Light.ttf");
}
@font-face {
  font-family: poppins-medium;
  src: url("/assets/fonts/Poppins-Medium.ttf");
}
.b1 {
  font-size: 26px;
  font-family: poppins-bold;
}

.b2 {
  font-size: 20px;
  font-family: poppins-bold;
}

.b3 {
  font-size: 16px;
  font-family: poppins-bold;
}

.b4 {
  font-size: 14px;
  font-family: poppins-bold;
}

.s1 {
  font-size: 20px;
  font-family: poppins-semibold;
}

.s2 {
  font-size: 16px;
  font-family: poppins-semibold;
}

.s3 {
  font-size: 14px;
  font-family: poppins-semibold;
}

.l1 {
  font-size: 14px;
  font-family: poppins-light;
}

.i1 {
  font-size: 10px;
  font-family: poppins-italic;
}

.r1 {
  font-size: 18px;
  font-family: poppins-regular;
}

.r2 {
  font-size: 16px;
  font-family: poppins-regular;
}

.r3 {
  font-size: 14px;
  font-family: poppins-regular;
}

.r4 {
  font-size: 12px;
  font-family: poppins-regular;
}

.m1 {
  font-size: 16px;
  font-family: poppins-medium;
}

.m2 {
  font-size: 14px;
  font-family: poppins-medium;
}

.m3 {
  font-size: 10px;
  font-family: poppins-medium;
}

button {
  border-radius: 26px;
  border: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.5s;
}
button:active {
  opacity: 0.4;
}
button:focus {
  box-shadow: none;
  outline: none;
}

.button {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.button-outline {
  color: var(--neutral-color-4);
  background-color: transparent;
  border: 2px solid var(--neutral-color-4);
}

input {
  border-radius: 26px;
  color: var(--white-color);
  background-color: var(--background-color);
  width: 100%;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
input:focus {
  outline: none;
}
input::placeholder {
  color: var(--white-color);
  opacity: 1; /* Firefox */
}
input::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: var(--white-color);
}

select {
  border-radius: 26px;
  color: var(--white-color);
  background-color: var(--background-color);
  width: 100%;
  border: none;
  -webkit-appearance: none;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
select:focus {
  outline: none;
}
select option {
  color: var(--white-color);
}

.form-group {
  margin-bottom: 1rem;
  position: relative;
}
.form-group svg-custom {
  position: absolute;
  left: 17px;
  top: 17px;
}
.form-group .select-arrow {
  right: 17px;
  left: inherit;
  top: 24px;
}
.form-group .select-image {
  padding: 1rem 3.25rem;
}
.form-group .select {
  padding: 1rem 3.25rem 1rem 1rem;
}
.form-group .input-image {
  padding: 1rem 1rem 1rem 3.25rem;
}
.form-group .input {
  padding: 1rem;
}

.form-color {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 52px;
}

.form-checkbox {
  margin: 0px 10px 1rem;
  display: flex;
}
.form-checkbox .checkbox {
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
}
.form-checkbox .checkbox .square {
  width: 30px;
  height: 30px;
  border: solid 2px var(--neutral-color-4);
  border-radius: 10px;
  position: relative;
}
.form-checkbox input[type=checkbox] {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}
.form-checkbox label {
  position: relative;
  color: var(--white-color);
  cursor: pointer;
}
.form-checkbox input:checked + .checkbox .square::after {
  position: absolute;
  content: "";
  display: flex;
  margin: auto;
  border-radius: 6px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: var(--neutral-color-4);
  width: 22px;
  height: 22px;
}

.form-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.form-avatar .avatar {
  position: relative;
}
.form-avatar .avatar .avatar-image {
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
  background-color: var(--primary-color);
  height: 100px;
}
.form-avatar .avatar .avatar-image img {
  height: inherit;
  width: inherit;
  object-fit: cover;
  object-position: center;
}
.form-avatar .avatar .edit {
  position: absolute;
  background-color: rgba(24, 46, 48, 0.5);
  display: flex;
  align-items: center;
  width: 45px;
  right: -10px;
  top: -10px;
  height: 45px;
  border-radius: 50px;
  justify-content: center;
}
.form-avatar .avatar .edit img {
  width: 20px;
  height: 20px;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: poppins-regular;
  overflow: hidden;
  background-color: var(--background-color);
}

@media only screen and (max-width: 900px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
* {
  box-sizing: border-box;
}

.not-select {
  -webkit-user-select: none;
          user-select: none;
}

.pointer {
  transition: opacity 0.5s;
}
.pointer:hover {
  cursor: pointer;
}

.flex {
  display: flex;
}

.bg-blur-30-15 {
  /* Note: currently only Safari supports backdrop-filter */
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  --webkit-backdrop-filter: blur(30px);
  background-color: rgba(255, 255, 255, 0.15);
}

.hide-scroll-bar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}

.error-text {
  color: red;
  font-family: "poppins-light";
  font-size: 12px;
  padding: 0 1rem;
}

.child-pointer * {
  -webkit-user-select: none;
          user-select: none;
}
.child-pointer *:hover {
  cursor: pointer;
}

app-auth form {
  width: 50%;
  position: relative;
  z-index: 2;
}
app-auth form::after {
  position: absolute;
  border-radius: 20px 0 0 20px;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  --webkit-backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.16);
}
app-auth form .footer {
  position: absolute;
  bottom: 3rem;
  width: calc(100% - 8rem);
}
app-auth form .footer button {
  width: 100%;
  height: 51px;
}
app-auth form .footer a {
  text-decoration: none;
}
app-auth .image {
  width: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
app-auth .image::before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-color-2);
  opacity: 0.3;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
app-auth .icon-back {
  position: absolute;
  left: 1rem;
  top: 1rem;
}
app-auth .icon-back div {
  background-color: var(--background-color);
  border-radius: 50%;
  width: 50px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-height: 900px) {
  app-auth section {
    justify-content: unset !important;
  }
}
app-auth app-sign-in,
app-auth app-sign-up {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 600px;
}
@media only screen and (max-width: 900px) {
  app-auth app-sign-in form,
  app-auth app-sign-up form {
    max-width: 100%;
    width: 500px;
    padding: 2rem 1rem !important;
  }
  app-auth app-sign-in form::after,
  app-auth app-sign-up form::after {
    display: none;
  }
  app-auth app-sign-in form .footer,
  app-auth app-sign-up form .footer {
    width: calc(100% - 2rem);
  }
  app-auth app-sign-in .image,
  app-auth app-sign-up .image {
    display: none;
  }
}

.over-flow-text {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*# sourceMappingURL=styles.css.map*/