[v-cloak] {
  display: none;
}

:root {
  --main-bg-color: #01071C;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #01071C;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #fff;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  max-height: 100vh;
  height: 100%;
  overflow-y: auto;
  padding: 10px 10px 120px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.main {
  background-color: var(--main-bg-color);
  border: 1px solid #202538;
  padding: 10px;
  border-radius: 6px;
  max-height: calc(100vh - 54px);
  overflow-y: auto;
}

.prompt, .response {
  color: #fff;
  padding: 10px;
  font-size: 14px;
  line-height: 22px;
}

.response__title, .prompt__title {
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.ring {
  position: relative;
  width: 156px;
  height: 156px;
  background-image: radial-gradient(blue 0, blue 50%, transparent 50%, transparent 100%), radial-gradient(#FF0000 0, #FF0000 50%, transparent 50%, transparent 100%), radial-gradient(var(--main-bg-color) 0, var(--main-bg-color) 60%, transparent 60%), conic-gradient(#fff 0, #FF0000 130deg, var(--main-bg-color) 130deg, var(--main-bg-color) 230deg, blue 230deg, #fff 360deg);
  background-size: 11% 11%, 11% 11%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 9.2% 82.3%, 90.8% 82.3%, center center, center center;
  border-radius: 50%;
  border-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ring__center {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.ring__fan {
  width: 108px;
  height: 84px;
  background-color: #fff;
  clip-path: polygon(50% 100%, 47% 0, 53% 0);
  position: absolute;
  border-radius: 100%;
  top: -6px;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
  transition: all 1s cubic-bezier(.34,1.56,.64,1);
  opacity: 1;
}

.skeleton {
  background-color: #01071C;
  background-image: linear-gradient(90deg, #01071C, #202538, #01071C);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  width: 100%;
  height: 50px;
  margin: 14px 0px 14px;
  animation: skeleton-animation 3s ease-in-out infinite;
  height: 180px;
}

@keyframes skeleton-animation {
  0% {
      background-position: -200px 0;
  }

  100% {
      background-position: calc(200px + 100%) 0;
  }
}

.ring__fan.opacity {
  opacity: 0;
}

.political {
  margin-top: 24px;
  padding: 0 24px;
  margin-bottom: 24px;
}
.political.hidden {
  display: none;
}

.political__wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.political__top {
  text-align: center;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.political__middle {
  display: flex;
}

.political__middle__indicator {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.political__middle__indicator__item {
  color: rgba(255, 255, 255, 0.7);
}

.political__middle__indicator__item:last-child {
  margin-bottom: 20px;
}

.political__middle__indicator__item:first-child {
  margin-bottom: 60px;
  position: relative;
  left: 15px;
}

.political__middle__indicator__item.political__middle__indicator__item--right {
  left: 5px;
}

.political__bottom {
  display: flex;
  margin-top: 5px;
}

.political__bottom__item {
  display: flex;
  align-items: center;
}

.political__bottom__item__label {
  color: #fff;
}

.political__bottom__item__icon {
  width: 20px;
  height: 20px;
}

.political__bottom__item:first-child {
  padding-right: 25px;
}

.political__bottom__item:last-child {
  padding-left: 25px;
}

.political__bottom__item:first-child .political__bottom__item__icon {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAgCAYAAADqgqNBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOoSURBVHgBxVdBTBNBFH27rYnBqFzgAgkFjRH0AAfboyUBL2ogoMYoiXA0GqUJgYtJNdGDnNBgPIKejAr2oCcOLUc0MT0omKB0D3hQDlaIHJSy/r+z0263u+0u1PiSZv/OTOf9+f/Nn1ngP0KBTxy9qIf+/EZUURGi14Nm809dR1pVoS2/UNJe5/JEHurVQzTxFUXBML3WVhiu0S+1Zw/ufHqmaNgpOZHWEmncJN0Jpss54Up++JwepVBOsQ/YHTT6xb7MKAl7h+o0uqVfv0nEySoQw5zjVUufHrd3KE7E1DiBfwBaUGxlVplwJGdhBQLIsN19AlhdA9pCQEM98PA5qgLST+fnl0qK7aKwE3FS2t0RYOgMEDkO9EVRNbCOWMhF5BxuWHK8lBGkXRSBA/uAxnpUC6FgUOyefNgP9esZ2AT2/ikR1xTeFzVgbJIc07BbZHM5NAcM4j59kNwYtPZ2h4H+aPE/6ihYl04B67+A9HLpjJFjIlUjA0DHEeEkj3XAXkrxtyBbSgA9+nZx7/4auOLWEAmxmSKREZOzzSni9EiwULnt7IhzpCj3PUbYKeQ/YCub49edhcZkVpL1zUJqimxz3MJH4HIcTsiqpvJK6nVXuGBLz1e/A1fHgdmUeJ9+IzTARNw3EBdkbN+bEv0NdXBDrUrKa3fqmU2KSe5OidDxRKx4zqtcXWOd0IaMRGuT2V4vagO3f11zJYdi1vAkKoAnejwK3+BIuBUoFR7BoeWJ/MJF7QaCW1vQAgF4BofdDzjsHDUnJ3irZeER1pWzPUPJ2tgUgmwNFdLCfa3NQhscct6ao5Ol86laQmHyFDzAul/HHgnVz70VwuSndI4VPv1a2JE20W+HTnXKyDmdNPPwABk6uZ3cnGOnpCMcESfBUYGZN8gp777Ob7fqx4cQEzOZ3GJceJxA16sJg9xr6LmMyqf9lLtxQbQtfBDvsrgsZUrnoZtvgu91+a1Gp8wQKiBsUfr9awWbSZncEGFKtMld4bTyYAAxfubJafUa5T4GFxgE54XNJCw4CT4DWAOyjcfKNnuFI478bbbkDkeHDFe7qBN5mJS7QaKbe4ey4LQMnhYledESdlb4yozSkXfE/kfjrk7XKepoRxXBxNs5dJr6MlBSXrmTB5H5BNVDwk7MKPvFQofOMB06RXc7n8hyjum26riVK36rmdfp22Se9OEEkz7g+mFfrS9yK0iMvfTopYmbKCKsiVoLmUZt85TcdG4biXKkEn8BYGNUdWeW2zUAAAAASUVORK5CYII=") no-repeat 50% 50% / contain;
  margin-right: 10px;
}

.political__bottom__item:last-child .political__bottom__item__icon {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAgCAYAAADqgqNBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMjSURBVHgBxVddctJQFP4S0LEdZ0qnL744DboB3IBQN2BcQekKaDcgxbe+CLzpG6wA+qRvwAqIC7AEfdDRcaBja9FCrudcCCQBkkCh/ZgMyc295zv3/N0T4A6hYEG07iExsJBQBDQV2OIxCzgXCoyICjN+DSOsrFDkLUCDiowQSNNjLGC6SYrUVQu5ON1jWXIijVkq8sqQdGGQEiU/JeaSt6JIiQEqCN5pEExS/oAUqHtfqLNmt1Rkibi2AmKGRhaofVZx6H0xtfM2+XYgUMAaECH37QLlmeTk4wRp2fQTENU013/fNGF1u/IKA3LBM3KBMUV+pjA/RbYDaiyGrUwGmy913E8k5gr9Zxjy6rzJSYV8YI4UmGjLfiZy4bx+pvfFoNMRi6JznBVeWc6L/H/MnBFJTIElgHdwBBjv8tGHj+ienEjz/C6XsZFKyXfnxSLQ680d284eo9dozLUAyUtQ9L2X0T6IQPeae+dtXv6zL7+92EO/PREUZmz7dRY+iDFnVG7fwr7wvH1AO2LN2ed8RXc1106Cxng9P88LRCo+urwhP3ScPvkS11w+vKxUpvwaZozl+Pi+o8xKL06jx2ct3BRfn8R9Iz9KvxgG7kFe8OvoSJrtJghIOSijGl5zaXRLO1dxh1DRR7i6uBbygAN/reSjGmtiBWD/BgWZA3VZZCjVylTsfUvSn2pVFozrdls+cyZsJJOuw4aJL09PsZPPj8c2dV3OvSiVXPKI85O8obhO+RWZeQXjx0HaNeeqVhPfdd215m+zOXM994Uy2rnFUWa0Ocug16iPSyqfD2wZrzsU6u24r5ukmkDOT2jYZoHn8cnGYJMz7OfJpCGXq5mgc7ZAvs/YC+0KxwLZ515wMbI7GoZzhw/TaWw8T+KKjtaLcmk8h9rv3FMMz/OpHq5FzR6dcCmsAURWjQu8sp+nK9zwZeivjgVgkOwD58AUOec9mX6PtcSKYAmZynuuvg3BXyyHlI+c/8seb92Rj2e24oHfapyPghs+gSQ8rVYAaZHMWvDudiFyjyI6KaKTCXcpKLm02RaRJZqs1KD2iN1l+JHa+A8Muzf5jnMY6AAAAABJRU5ErkJggg==") no-repeat 50% 50% / contain;
  margin-left: 10px;
}

.form {
  height: 44px;
  width: 100%;
  margin: 10px 0 0;
  position: relative;
}

.form.hidden {
  display: none;
}

.form--big {
  height: 144px;
}

.form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form__textarea, .form__input {
  border: 1px solid #fff;
  outline: none !important;
  border-radius: 6px;
  flex: 1;
  background-color: #242E53;
  color: #fff;
  box-shadow: none !important;
}

#chat-form {
  width: 100%;
}

.form__input {
  height: 44px;
  padding: 0 10px;
}

.form__textarea {
  height: 144px;
  font-family: 'Inter', sans-serif;
  padding: 10px;
  width: 100%;
  font-size: 16px;
}

.form__submit {
  font-weight: 500;
  color: #fff;
  width: 100px;
  font-size: 14px;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 6px;
  height: 44px;
  border: 1px solid #fff;
  background: linear-gradient(180deg, #2849F5 0%, #172B8F 86%, #172B8F 100%);
  cursor: pointer;
  margin-left: 10px;
}


.bias-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-direction: row;
  align-items: center;
}

.bias-button {
  border-radius: 6px;
  font-weight: 500;
  padding: 0 14px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  height: 61px;
  width: 50%;
  overflow: hidden;
}

.bias-button img {
  height: 65px;
}

.bias-button--left {
  background-color: #0066DB;
  color: white;
}

.bias-button--left img {
  margin-left: 15px;
}

.bias-button--right {
  background-color: #FF0000;
  color: white;
}

.bias-button--right img {
  margin-right: 15px;
}

.bias-button.selected {
  border: 2px solid white;
}

.bias-buttons {
  gap: 1rem;
}

.bias-buttons-wrapper.hidden {
  display: none;
}

.form--big .form__submit {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.bias-buttons-wrapper-title {
  font-weight: bold;
  padding: 0 25px;
  margin-bottom: 20px;
  font-size: 18px;
  text-align: center;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrapper.completed {
  justify-content: flex-start;
}

.restart {
  cursor: pointer;
  margin-top: 25px;
  width: 100%;
  height: 40px;
  gap: 10px;
  border-radius: 4px;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
  border-width: 1px;
  color: #fff;
  background: linear-gradient(180deg, #2849F5 0%, #172B8F 86%, #172B8F 100%);
}

.restart.hidden {
  display: none;
}

.message  {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.message.user  {
  align-items: flex-end;
}

.message.bot  {
  align-items: flex-start;
}

.signin-btn {
  min-height: 58px;
  display: block;
  background-color: #A8C820;
  border-radius: 4px;
  border: 1px solid #A8C820;
  width: 100%;
  margin: 0 auto;
  font-size: 16px;
  color: #000;
  cursor: pointer;
}

.signin-btn.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.modal.hidden {
  display: none;
}
.modal__overlay {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal__content {
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  max-width: 580px;
  width: 100%;
  padding: 16px;
  position: relative;
  z-index: 2;
  background-color: #0E1327;
  border-radius: 10px;
  border: 1px solid #fff;
}
.modal__content.hidden {
  display: none;
}
.modal__content__image {
  text-align: center;
}
.modal__content__text {
  text-align: center;
}
.signin-form {
  display: flex;
  flex-direction: column;
}
.signin-form__input {
  height: 48px;
  background-color: #fff;
  border: 1px solid #fff;
  text-align: center;
}
.signin-form__submit {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  height: 48px;
  color: #fff;
  background-color: #2849F5;
  border: 1px solid #2849F5;
}
.modal__content__success {
  background-color: #0E1327;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 30px;
}
.modal__content__success__img {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
}
.modal__content__success__img img {
  max-width: 100%;
}
.modal__content__benefits {
  margin-top: 30px;
}
.modal__content__benefits__title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
}
.modal__content__benefits__title-logo {
  text-align: center;
  margin-top: 10px;
}
.modal__content__benefits__title-logo img {
  height: 28px;
}
.modal__content__benefits__list__item {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal__content__benefits__list__item__number {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #2849F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.modal__content__benefits__list__item__title {
  font-weight: bold;
  font-size: 16px;
  margin-top: 12px;
}
.modal__content__benefits__list__item__text {
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
}
.modal__content__submit {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 24px;
  font-weight: 500;
  height: 48px;
  color: #fff;
  background: linear-gradient(180deg, #2849F5 0%, #172B8F 86%, #172B8F 100%);
  border: 1px solid transparent;
}