/* projects/common/src/style/animation.scss */
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* projects/common/src/style/button.scss */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 20px;
  border-radius: 5px;
  background: none;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
.btn::before {
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-family: "fa-regular";
}
.btn span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: opacity 0.3s;
  pointer-events: none;
  will-change: opacity;
}
.btn.accent1 {
  border: none;
  background-color: var(--color-accent);
  color: var(--color-dark1);
}
@media (hover: hover) and (pointer: fine) {
  .btn.accent1:hover {
    background-color: white;
  }
}
.btn.accent2 {
  border: none;
  background-color: var(--color-accent);
  color: var(--color-dark1);
}
@media (hover: hover) and (pointer: fine) {
  .btn.accent2:hover {
    background-color: var(--color-dark1);
    color: white;
  }
}
.btn.transparent1 {
  border: 2px var(--color-dark1) solid;
  background-color: transparent;
  color: var(--color-dark1);
}
@media (hover: hover) and (pointer: fine) {
  .btn.transparent1:hover {
    background-color: var(--color-dark1);
    color: white;
  }
}
.btn.transparent2 {
  border: 2px white solid;
  background-color: transparent;
  color: white;
}
@media (hover: hover) and (pointer: fine) {
  .btn.transparent2:hover {
    background-color: white;
    color: var(--color-dark1);
  }
}
.btn.compact {
  height: 30px;
  font-size: 16px;
}
.btn.busy {
  pointer-events: none;
}
.btn.busy span {
  opacity: 0;
}
.btn.busy::before {
  animation: rotation 1s linear 0s infinite;
  content: "\f3f4";
}
.btn.done {
  pointer-events: none;
}
.btn.done span {
  opacity: 0;
}
.btn.done::before {
  content: "\f00c";
}
.btn.disabled {
  pointer-events: none;
  background-color: var(--color-grey);
}
.btn.google span::before {
  font-family: "fa-brands";
  content: "\f1a0";
}
.btn.create span::before {
  font-family: "fa-regular";
  font-size: 20px;
  content: "+";
}
.btn.msg span::before {
  font-family: "fa-regular";
  font-size: 20px;
  content: "\e20a";
}
.rbtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  min-width: 45px;
  height: 45px;
  margin: 0;
  padding: 0;
  border-radius: 23px;
  border: none;
  background: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: 0.3s;
  will-change: opacity;
}
@media (hover: hover) and (pointer: fine) {
  .rbtn:hover {
    background-color: black;
  }
}
.rbtn span {
  transition: 0.3s;
}
.rbtn span::before {
  font-family: "fa-regular";
  font-size: 20px;
}
.rbtn.tiny {
  width: 30px;
  min-width: 30px;
  height: 30px;
}
.rbtn.tiny span::before {
  font-size: 16px;
}
.rbtn.compact {
  width: 40px;
  min-width: 40px;
  height: 40px;
}
.rbtn.minimal {
  width: auto;
  min-width: auto;
  height: auto;
}
@media (hover: hover) and (pointer: fine) {
  .rbtn.minimal:hover {
    background-color: transparent;
  }
}
.rbtn.solid {
  background: var(--color-dark3);
}
@media (hover: hover) and (pointer: fine) {
  .rbtn.solid:hover {
    background-color: black;
  }
}
.rbtn.left span::before {
  content: "\f053";
}
.rbtn.right span::before {
  content: "\f054";
}
.rbtn.down span::before {
  content: "\f078";
}
.rbtn.up span::before {
  content: "\f077";
}
.rbtn.close span::before {
  content: "\f00d";
}
.rbtn.menu span::before {
  content: "\f0c9";
}
.rbtn.delete span::before {
  content: "\f00d";
}
.rbtn.know span::before {
  content: "\f059";
}
.rbtn.disabled {
  pointer-events: none;
  opacity: 0.2;
}

/* projects/common/src/style/font.scss */
@font-face {
  font-family: "fa-regular";
  src: url(/static/font/fa-regular.woff2);
  font-display: swap;
}
@font-face {
  font-family: "fa-brands";
  src: url(/static/font/fa-brands.woff2);
  font-display: swap;
}
@font-face {
  font-family: "acme";
  src: url(/static/font/Acme-Regular.woff2);
  font-display: swap;
}

/* projects/common/src/style/form.scss */
.gf.compact {
  max-width: var(--width-compact);
}
@media (width < 1000px) {
  .gf.half {
    width: 100%;
  }
}
@media (width >= 1000px) {
  .gf.half {
    width: 50%;
  }
}
.gf .gf-row {
  margin-bottom: 15px;
}
.gf .gf-row:last-child {
  margin-bottom: 0;
}
.gf .gf-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  font-size: 12px;
}
.gf .gf-title span {
  display: inline-flex;
  gap: 5px;
}
.gf .gf-title span.required::after {
  color: var(--color-alert);
  content: "*";
}
.gf .gf-input {
  margin-bottom: 3px;
}
.gf .gf-input:last-child {
  margin-bottom: 0;
}
.gf .gf-input.multiple {
  display: flex;
  gap: 5px;
}
.gf .gf-input input[type=text],
.gf .gf-input input[type=number],
.gf .gf-input input[type=email],
.gf .gf-input input[type=password],
.gf .gf-input input[type=range],
.gf .gf-input select {
  width: 100%;
}
.gf .gf-input input[type=text].compact,
.gf .gf-input input[type=number].compact,
.gf .gf-input input[type=email].compact,
.gf .gf-input input[type=password].compact,
.gf .gf-input input[type=range].compact,
.gf .gf-input select.compact {
  width: 150px;
}
.gf .gf-input textarea {
  width: 100%;
  height: 100px;
  resize: none;
}
.gf .gf-error {
  margin-bottom: 3px;
  font-size: 10px;
  color: var(--color-alert);
}
.gf .gf-error:last-child {
  margin-bottom: 0;
}
.sf section {
  margin-bottom: 30px;
}
.sf section:last-child {
  margin-bottom: 0;
}

/* projects/common/src/style/general.scss */
a {
  cursor: pointer;
}
p {
  margin: 0 0 15px 0;
}
img {
  vertical-align: top;
}
ul.checkboxable {
  list-style: none;
}
ul.checkboxable li {
  display: flex;
  gap: 10px;
  margin: 0 0 10px 0;
}
ul.checkboxable li::before {
  font-family: "fa-regular";
  color: var(--color-accent);
  content: "\f14a";
}
hr {
  height: 1px;
  border: none;
  background-color: var(--color-dark3);
}
h1 {
  position: relative;
  padding: 0;
  color: white;
}
@media (width < 1000px) {
  h1 {
    font-size: 24px;
    margin: 0 0 45px 0;
  }
}
@media (width >= 1000px) {
  h1 {
    font-size: 30px;
    margin: 0 0 45px 0;
  }
}
h1::after {
  position: absolute;
  top: calc(100% + 15px);
  left: 0;
  height: 2px;
  background-color: var(--color-accent);
  content: "";
}
@media (width < 1000px) {
  h1::after {
    width: 60px;
  }
}
@media (width >= 1000px) {
  h1::after {
    width: 75px;
  }
}
h2 {
  position: relative;
  margin: 0 0 45px 0;
  font-weight: bold;
}
@media (width < 1000px) {
  h2 {
    font-size: 30px;
  }
}
@media (width >= 1000px) {
  h2 {
    font-size: 45px;
  }
}
h2::after {
  position: absolute;
  top: calc(100% + 15px);
  left: 0;
  height: 2px;
  background-color: var(--color-accent);
  content: "";
}
@media (width < 1000px) {
  h2::after {
    width: 60px;
  }
}
@media (width >= 1000px) {
  h2::after {
    width: 75px;
  }
}
h2.centered {
  text-align: center;
}
h2.centered::after {
  left: 50%;
  transform: translateX(-50%);
}
h2.white {
  color: white;
}
h2.black {
  color: var(--color-dark1);
}
input[type=text],
input[type=number],
input[type=email],
input[type=password] {
  height: 45px;
  padding: 0 15px;
  border: 1px var(--color-dark2) solid;
  border-radius: 5px;
  background: var(--color-dark2);
  color: white;
  font-size: 16px;
  transition: 0.3s;
}
input[type=text].error,
input[type=number].error,
input[type=email].error,
input[type=password].error {
  border-color: var(--color-alert);
}
input[type=text].alert,
input[type=number].alert,
input[type=email].alert,
input[type=password].alert {
  background-color: var(--color-alert);
}
input[type=text]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=password]:disabled {
  background-color: var(--color-dark3);
  color: var(--color-grey);
  -webkit-text-fill-color: var(--color-grey);
  pointer-events: none;
  opacity: 1;
}
textarea {
  padding: 15px;
  border: 1px var(--color-dark2) solid;
  border-radius: 5px;
  background: var(--color-dark2);
  color: white;
  font-size: 16px;
  transition: 0.3s;
}
@media (width > 1000px) {
  textarea::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  textarea::-webkit-scrollbar:vertical {
    width: 4px;
  }
  textarea::-webkit-scrollbar-thumb {
    background-color: var(--color-grey);
  }
  textarea::-webkit-scrollbar-track {
    background-color: transparent;
  }
}
textarea.error {
  border-color: var(--color-alert);
}
::placeholder {
  color: var(--color-placeholder);
}
.splash {
  position: fixed;
  z-index: var(--z-splash);
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-dark1);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
.splash.active {
  opacity: 1;
  pointer-events: inherit;
}
.splash img {
  height: 75px;
}
.langs {
  position: fixed;
  z-index: var(--z-head);
  left: 0;
  top: 200px;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 1px 1px 5px var(--color-dark1oo);
}
@media (width < 1000px) {
  .langs {
    display: none;
  }
}
@media (width >= 1000px) {
  .langs {
    display: block;
  }
}
.langs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.langs ul a {
  display: block;
  width: 30px;
  padding: 5px 0;
  background-color: white;
  color: var(--color-dark1);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
}
.langs ul a.active {
  background-color: var(--color-accent);
}
.content {
  max-width: var(--width);
  margin: 0 auto;
}
@media (width < 1000px) {
  .content {
    padding: 30px 15px;
  }
}
@media (width >= 1000px) {
  .content {
    padding: 45px;
  }
}
.content.compact {
  max-width: var(--width-compact);
}
.content .breadcrumbs {
  margin-bottom: 5px;
  -webkit-user-select: none;
  user-select: none;
  font-size: 12px;
}
.content .breadcrumbs span {
  color: white;
}
.content .breadcrumbs span::after {
  display: inline-block;
  padding: 0 10px;
  content: ">";
}
.content .breadcrumbs span a {
  color: white;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .content .breadcrumbs span a:hover {
    text-decoration: underline;
  }
}
.content .textcontent {
  line-height: 150%;
}
.content .textcontent a {
  color: white;
  font-weight: bold;
}
@media (hover: hover) and (pointer: fine) {
  .content .textcontent a:hover {
    color: var(--color-accent);
  }
}
.loading span {
  display: inline-flex;
  gap: 15px;
  align-items: center;
}
.loading span::before {
  display: inline-block;
  font-family: "fa-regular";
  content: "\f3f4";
  animation: rotation 1s linear 0s infinite, appear 1s ease 1;
}

/* projects/common/src/style/helper.scss */
.nowrap {
  white-space: nowrap;
}
.hidden {
  display: none;
}

/* projects/common/src/style/layout.scss */
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-anchor: none;
  overscroll-behavior: none;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  font-size: 16px;
}
html body * {
  box-sizing: border-box;
  outline: none;
  overflow-anchor: none;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}
html body #win {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: none;
  background-color: var(--color-dark1);
  color: var(--color-grey);
  opacity: 1;
  transition: opacity 0.3s;
}
html body #win.busy {
  opacity: 0.9;
}

/* projects/common/src/style/panel.scss */
.ovl {
  position: fixed;
  z-index: var(--z-win);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-ovl);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}
@media (width < 1000px) {
  .ovl {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
  }
}
@media (width >= 1000px) {
  .ovl {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 15px;
  }
}
.ovl .pwin {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-dark1);
  box-shadow: var(--shadow-win);
  transition: 0.3s;
}
@media (width < 1000px) {
  .ovl .pwin.standart {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: translateY(100%);
  }
}
@media (width >= 1000px) {
  .ovl .pwin.standart {
    width: var(--w);
    height: auto;
    max-height: 100%;
    border-radius: 5px;
    transform: scale(0.5);
  }
}
@media (width < 640px) {
  .ovl .pwin.compact {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: translateY(100%);
  }
}
@media (width >= 640px) {
  .ovl .pwin.compact {
    width: var(--w);
    height: auto;
    max-height: 100%;
    border-radius: 5px;
    transform: scale(0.5);
  }
}
.ovl .pwin .p-head {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (width < 1000px) {
  .ovl .pwin .p-head {
    padding: 0 15px;
    height: 50px;
  }
}
@media (width >= 1000px) {
  .ovl .pwin .p-head {
    padding: 0 30px;
    height: 60px;
  }
}
.ovl .pwin .p-main {
  overflow-x: hidden;
  overflow-y: auto;
  flex-grow: 1;
}
@media (width > 1000px) {
  .ovl .pwin .p-main::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .ovl .pwin .p-main::-webkit-scrollbar:vertical {
    width: 4px;
  }
  .ovl .pwin .p-main::-webkit-scrollbar-thumb {
    background-color: var(--color-grey);
  }
  .ovl .pwin .p-main::-webkit-scrollbar-track {
    background-color: transparent;
  }
}
@media (width < 1000px) {
  .ovl .pwin .p-main {
    padding-bottom: 15px;
  }
}
@media (width >= 1000px) {
  .ovl .pwin .p-main {
    padding-bottom: 30px;
  }
}
.ovl.active {
  pointer-events: inherit;
  opacity: 1;
}
.ovl.active .pwin {
  transform: none;
}

/* projects/common/src/style/var.scss */
html {
  --width: 1200px;
  --width-compact: 600px;
  --color-dark1: rgb(33, 33, 33);
  --color-dark1o: rgb(33, 33, 33, 0.9);
  --color-dark1oo: rgb(33, 33, 33, 0.5);
  --color-dark2: #2a2929;
  --color-dark3: #555555;
  --color-accent: #eec100;
  --color-grey: #c9c9c9;
  --color-placeholder: #969696;
  --color-almostwhite: #fafafa;
  --color-ovl: rgb(201,201,201,0.5);
  --color-alert: #f00;
  --color-shadow-high: rgba(255,255,255,0.5);
  --color-shadow-low: rgba(255,255,255,0.1);
  --z-head: 10;
  --z-win: 20;
  --z-popup: 30;
  --z-error: 90;
  --z-splash: 100;
  --shadow-win: 3px 3px 6px var(--color-shadow-high);
  --shadow-popup: 3px 3px 6px var(--color-shadow-low);
}

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