/* [project]/src/components/views/pricing/pricing.scss.css [client] (css) */
canvas {
  z-index: 215 !important;
}

.pricing-comp {
  max-width: 1020px;
  padding: 20px;
}

@media screen and (max-width: 779px) {
  .pricing-comp {
    padding: 20px;
  }
}

.pricing-comp .carousel-header {
  background-color: #fff;
  border-radius: 8px 8px 0 0;
}

.pricing-comp .pricing-options {
  max-width: 820px;
}

.pricing-comp {
  margin: 0 auto;
}

.pricing-comp .pricing-options, .pricing-comp .pricing-top-up-options {
  margin: 40px auto 80px;
  display: flex;
}

.pricing-comp .pricing-options .pricing-option, .pricing-comp .pricing-options .pricing-top-up-option, .pricing-comp .pricing-top-up-options .pricing-option, .pricing-comp .pricing-top-up-options .pricing-top-up-option {
  opacity: .5;
  cursor: pointer;
  background-color: #fff;
  border: 2px solid #00000080;
  border-radius: 24px;
  flex: 1;
  margin: 8px 4px;
  padding: 20px 12px 160px;
  position: relative;
}

@media screen and (max-width: 779px) {
  .pricing-comp .pricing-options .pricing-option.current-plan, .pricing-comp .pricing-options .pricing-top-up-option.current-plan, .pricing-comp .pricing-top-up-options .pricing-option.current-plan, .pricing-comp .pricing-top-up-options .pricing-top-up-option.current-plan {
    margin-bottom: 48px;
  }
}

.pricing-comp .pricing-options .pricing-option.current-plan .current-plan-div, .pricing-comp .pricing-options .pricing-top-up-option.current-plan .current-plan-div, .pricing-comp .pricing-top-up-options .pricing-option.current-plan .current-plan-div, .pricing-comp .pricing-top-up-options .pricing-top-up-option.current-plan .current-plan-div {
  color: #fff;
  text-align: center;
  background-color: #1d6998;
  border-radius: 0 0 24px 24px;
  width: 100%;
  height: 60px;
  padding: 20px 0 0;
  line-height: 40px;
  position: absolute;
  bottom: -40px;
  left: 0;
  overflow: hidden;
}

.pricing-comp .pricing-options .pricing-option.current-plan .current-plan-div .current-plan-div-inner, .pricing-comp .pricing-options .pricing-top-up-option.current-plan .current-plan-div .current-plan-div-inner, .pricing-comp .pricing-top-up-options .pricing-option.current-plan .current-plan-div .current-plan-div-inner, .pricing-comp .pricing-top-up-options .pricing-top-up-option.current-plan .current-plan-div .current-plan-div-inner {
  border-radius: inherit;
  background-color: #fff;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 3px 8px #0003;
}

.pricing-comp .pricing-options .pricing-option.current-plan .current-plan-div .text, .pricing-comp .pricing-options .pricing-top-up-option.current-plan .current-plan-div .text, .pricing-comp .pricing-top-up-options .pricing-option.current-plan .current-plan-div .text, .pricing-comp .pricing-top-up-options .pricing-top-up-option.current-plan .current-plan-div .text {
  justify-content: center;
  align-items: center;
  display: flex;
}

.pricing-comp .pricing-options .pricing-option.current-plan .current-plan-div .text .loading, .pricing-comp .pricing-options .pricing-top-up-option.current-plan .current-plan-div .text .loading, .pricing-comp .pricing-top-up-options .pricing-option.current-plan .current-plan-div .text .loading, .pricing-comp .pricing-top-up-options .pricing-top-up-option.current-plan .current-plan-div .text .loading {
  margin-top: 4px;
}

.pricing-comp .pricing-options .pricing-option:hover, .pricing-comp .pricing-options .pricing-option.active, .pricing-comp .pricing-options .pricing-top-up-option:hover, .pricing-comp .pricing-options .pricing-top-up-option.active, .pricing-comp .pricing-top-up-options .pricing-option:hover, .pricing-comp .pricing-top-up-options .pricing-option.active, .pricing-comp .pricing-top-up-options .pricing-top-up-option:hover, .pricing-comp .pricing-top-up-options .pricing-top-up-option.active {
  opacity: 1;
  border-color: #1d6998;
}

.pricing-comp .pricing-options .pricing-option .banner, .pricing-comp .pricing-options .pricing-top-up-option .banner, .pricing-comp .pricing-top-up-options .pricing-option .banner, .pricing-comp .pricing-top-up-options .pricing-top-up-option .banner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 28px;
  line-height: 24px;
  display: flex;
  position: absolute;
  top: -14px;
  left: 0;
}

.pricing-comp .pricing-options .pricing-option .banner > span, .pricing-comp .pricing-options .pricing-top-up-option .banner > span, .pricing-comp .pricing-top-up-options .pricing-option .banner > span, .pricing-comp .pricing-top-up-options .pricing-top-up-option .banner > span {
  color: #1d6998;
  background-color: #fff;
  border: 2px solid #1d6998;
  border-radius: 24px;
  padding: 0 12px;
  font-weight: 800;
  display: block;
}

.pricing-comp .pricing-options .pricing-option .title, .pricing-comp .pricing-options .pricing-top-up-option .title, .pricing-comp .pricing-top-up-options .pricing-option .title, .pricing-comp .pricing-top-up-options .pricing-top-up-option .title {
  color: #1d6998;
  text-align: center;
  margin: 12px 0;
  font-size: 26px;
  font-weight: 800;
}

.pricing-comp .pricing-options .pricing-option .features, .pricing-comp .pricing-options .pricing-top-up-option .features, .pricing-comp .pricing-top-up-options .pricing-option .features, .pricing-comp .pricing-top-up-options .pricing-top-up-option .features {
  margin: 12px 0;
}

.pricing-comp .pricing-options .pricing-option .features .feature, .pricing-comp .pricing-options .pricing-top-up-option .features .feature, .pricing-comp .pricing-top-up-options .pricing-option .features .feature, .pricing-comp .pricing-top-up-options .pricing-top-up-option .features .feature {
  margin: 8px 0 8px 12px;
  font-size: 15px;
  position: relative;
}

.pricing-comp .pricing-options .pricing-option .features .feature:before, .pricing-comp .pricing-options .pricing-top-up-option .features .feature:before, .pricing-comp .pricing-top-up-options .pricing-option .features .feature:before, .pricing-comp .pricing-top-up-options .pricing-top-up-option .features .feature:before {
  content: "-";
  position: absolute;
  left: -12px;
}

.pricing-comp .pricing-options .pricing-option .features .feature .bold, .pricing-comp .pricing-options .pricing-top-up-option .features .feature .bold, .pricing-comp .pricing-top-up-options .pricing-option .features .feature .bold, .pricing-comp .pricing-top-up-options .pricing-top-up-option .features .feature .bold {
  font-weight: 800;
  text-decoration: underline;
}

.pricing-comp .pricing-options .pricing-option .price, .pricing-comp .pricing-options .pricing-top-up-option .price, .pricing-comp .pricing-top-up-options .pricing-option .price, .pricing-comp .pricing-top-up-options .pricing-top-up-option .price {
  width: 100%;
  margin: 0 0 20px;
  position: absolute;
  bottom: 60px;
  left: 0;
}

.pricing-comp .pricing-options .pricing-option .price .price-container, .pricing-comp .pricing-options .pricing-top-up-option .price .price-container, .pricing-comp .pricing-top-up-options .pricing-option .price .price-container, .pricing-comp .pricing-top-up-options .pricing-top-up-option .price .price-container {
  justify-content: center;
  margin-left: 8px;
  display: flex;
}

.pricing-comp .pricing-options .pricing-option .price .price-container .symbol, .pricing-comp .pricing-options .pricing-option .price .price-container .cents, .pricing-comp .pricing-options .pricing-top-up-option .price .price-container .symbol, .pricing-comp .pricing-options .pricing-top-up-option .price .price-container .cents, .pricing-comp .pricing-top-up-options .pricing-option .price .price-container .symbol, .pricing-comp .pricing-top-up-options .pricing-option .price .price-container .cents, .pricing-comp .pricing-top-up-options .pricing-top-up-option .price .price-container .symbol, .pricing-comp .pricing-top-up-options .pricing-top-up-option .price .price-container .cents {
  line-height: 30px;
}

.pricing-comp .pricing-options .pricing-option .price .price-container .dollar, .pricing-comp .pricing-options .pricing-top-up-option .price .price-container .dollar, .pricing-comp .pricing-top-up-options .pricing-option .price .price-container .dollar, .pricing-comp .pricing-top-up-options .pricing-top-up-option .price .price-container .dollar {
  margin: 0 8px;
  font-size: 36px;
}

.pricing-comp .pricing-options .pricing-option .price .per-month, .pricing-comp .pricing-options .pricing-top-up-option .price .per-month, .pricing-comp .pricing-top-up-options .pricing-option .price .per-month, .pricing-comp .pricing-top-up-options .pricing-top-up-option .price .per-month {
  text-align: center;
}

.pricing-comp .pricing-options .pricing-option .buttons, .pricing-comp .pricing-options .pricing-top-up-option .buttons, .pricing-comp .pricing-top-up-options .pricing-option .buttons, .pricing-comp .pricing-top-up-options .pricing-top-up-option .buttons {
  width: 100%;
  padding: 0 20px;
  position: absolute;
  bottom: 20px;
  left: 0;
}

@media screen and (max-width: 779px) {
  .pricing-comp .pricing-options {
    flex-flow: column;
  }
}

.pricing-comp .center-div-outer .center-div-middle > :first-child.checkout-modal, .pricing-comp .center-div-outer .center-div-middle > :first-child.checkout-top-up-modal {
  max-width: 520px;
}

.pricing-comp .checkout-modal .checkout-modal-inner .checkout-modal-header, .pricing-comp .checkout-modal .checkout-modal-inner .checkout-top-up-modal-header, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .checkout-modal-header, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .checkout-top-up-modal-header, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .checkout-modal-header, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .checkout-top-up-modal-header, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .checkout-modal-header, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .checkout-top-up-modal-header {
  justify-content: space-between;
  margin-right: 20px;
  display: flex;
}

@media screen and (max-width: 520px) {
  .pricing-comp .checkout-modal .checkout-modal-inner .checkout-modal-header, .pricing-comp .checkout-modal .checkout-modal-inner .checkout-top-up-modal-header, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .checkout-modal-header, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .checkout-top-up-modal-header, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .checkout-modal-header, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .checkout-top-up-modal-header, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .checkout-modal-header, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .checkout-top-up-modal-header {
    flex-flow: column;
    margin-right: 0;
  }
}

.pricing-comp .checkout-modal .checkout-modal-inner .items, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items {
  border: 1px solid #c8c8c8;
  border-width: 1px 0;
  margin: 36px 0 24px;
  padding: 12px 0;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item {
  border: 0 solid #c8c8c8;
  border-bottom-width: 1px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 0 0 12px;
  display: flex;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left {
  display: flex;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left .icon, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left .icon, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left .icon, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left .icon {
  background-color: #1d6998;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin-right: 12px;
  padding: 4px;
  display: flex;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left .icon img, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left .icon img, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left .icon img, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left .icon img {
  width: 100%;
  height: 100%;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left .item-text .product-name, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left .item-text .product-name, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left .item-text .product-name, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left .item-text .product-name {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 800;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left .item-text .product-name .logo-name, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left .item-text .product-name .logo-name, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left .item-text .product-name .logo-name, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left .item-text .product-name .logo-name {
  font-family: Myth;
  font-size: 20px;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left .item-text .billing-rate-text, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left .item-text .billing-rate-text, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left .item-text .billing-rate-text, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left .item-text .billing-rate-text {
  color: #555;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 800;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .item .left .item-text .easy-cancel, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .item .left .item-text .easy-cancel, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .item .left .item-text .easy-cancel, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .item .left .item-text .easy-cancel {
  font-size: 12px;
  font-weight: 300;
}

.pricing-comp .checkout-modal .checkout-modal-inner .items .total, .pricing-comp .checkout-modal .checkout-top-up-modal-inner .items .total, .pricing-comp .checkout-top-up-modal .checkout-modal-inner .items .total, .pricing-comp .checkout-top-up-modal .checkout-top-up-modal-inner .items .total {
  justify-content: space-between;
  display: flex;
}

.pricing-comp .payment-options {
  display: flex;
}

.pricing-comp .payment-options .payment-option {
  text-align: center;
  cursor: pointer;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  flex: 1;
  height: 40px;
  margin: 0 8px;
  line-height: 40px;
}

.pricing-comp .payment-options .payment-option.active, .pricing-comp .payment-options .payment-option:hover {
  color: #fff;
  background-color: #1d6998;
  border-color: #1d6998;
}

.pricing-comp .payment-options .payment-option:first-of-type {
  margin-left: 0;
}

.pricing-comp .payment-options .payment-option:last-of-type {
  margin-right: 0;
}

.pricing-comp .sign-in-div .header-text {
  text-align: center;
  margin: 20px 0;
}

.pricing-comp .sign-in-div .buttons {
  justify-content: center;
  align-items: center;
  display: flex;
}

.pricing-comp .sign-in-div .buttons a {
  width: auto;
  margin: 0 12px;
  padding: 0 12px 0 0;
  text-decoration: none;
  display: flex;
}

.pricing-comp .sign-in-div .buttons a .icon {
  width: 40px;
  height: 40px;
  padding: 8px;
}

.pricing-comp .sign-in-div .buttons a .icon svg {
  width: 100%;
  height: 100%;
}

.pricing-comp .sign-in-div .buttons a .icon svg .real-path {
  fill: #fff;
}

.pricing-comp .sign-in-div .buttons a .text {
  padding: 0 12px;
}

.pricing-comp .pricing-top-up-options {
  flex-wrap: wrap;
  max-width: 620px;
  display: flex;
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option {
  flex: 1 0 30%;
  padding-bottom: 80px;
}

@media screen and (max-width: 560px) {
  .pricing-comp .pricing-top-up-options .pricing-top-up-option {
    flex: 1 0 45%;
  }
}

@media screen and (max-width: 400px) {
  .pricing-comp .pricing-top-up-options .pricing-top-up-option {
    flex: 1 0 90%;
  }
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option .title {
  margin: 0;
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option .title.slash {
  font-size: 20px;
  text-decoration: line-through;
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option .title.hide-opacity {
  opacity: 0;
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option .tokens {
  text-align: center;
  margin: 12px 0;
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option .price {
  bottom: 0;
}

.pricing-comp .pricing-top-up-options .pricing-top-up-option .cost-per-token {
  text-align: center;
  font-size: 12px;
  display: block;
}

.pricing-comp .pricing-top-up-options .top-up-bottom-button {
  margin: 4px 0 0;
}

/* [project]/src/components/views/faq/faq.scss.css [client] (css) */
.faq-comp {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.faq-comp .faq-header {
  justify-content: center;
  align-items: center;
  margin: 0 0 20px;
  display: flex;
  position: relative;
}

.faq-comp .faq-header h2 {
  color: #333;
  width: auto;
  margin: 0 20px;
  display: block;
}

.faq-comp .faq-header .line {
  background-color: #646464;
  flex: 1;
  height: 1px;
}

.faq-comp .faq-list {
  padding: 20px;
}

.faq-comp .faq-list .item {
  margin: 0 0 20px;
}

.faq-comp .faq-list .item:last-of-type {
  margin-bottom: 0;
}

.faq-comp .faq-list .item {
  display: flex;
}

.faq-comp .faq-list .item .faq-icon {
  cursor: pointer;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  padding: 4px 0 0;
  display: flex;
}

.faq-comp .faq-list .item .faq-icon > div {
  display: block;
}

.faq-comp .faq-list .item .faq-icon:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.faq-comp .faq-list .item .faq-icon:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.faq-comp .faq-list .item .faq-text {
  flex: 1;
  margin: 20px 0;
}

.faq-comp .faq-list .item .faq-text .question {
  font-size: 18px;
  font-weight: 800;
  line-height: 40px;
}

.faq-comp .faq-list .item .faq-text .answer {
  color: #555;
  margin: 12px 0 0;
  font-size: 18px;
}

/* [project]/src/components/elements/button/button.scss.css [client] (css) */
.button-element {
  border-radius: 3px;
  width: 100%;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.button-element .background {
  background-color: #1d6998;
  width: 100%;
  height: 100%;
  transition: opacity .3s linear;
  position: absolute;
  top: 0;
  left: 0;
}

.button-element.delete .background {
  background-color: #c80032;
}

.button-element.clear:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.button-element.clear:active {
  box-shadow: inset 0 0 250px #0003;
}

.button-element.clear .background {
  border: 1px solid rba(100, 100, 100, 1);
  background-color: #0000;
}

.button-element.clear button {
  color: #333;
  border: 1px solid #969696;
}

.button-element.clear svg .real-path {
  fill: #333;
}

.button-element.disabled .background {
  opacity: .5;
}

.button-element.cancel .background {
  background-color: #f0f0f0;
}

.button-element.cancel svg .real-path {
  fill: #333;
}

.button-element.cancel input, .button-element.cancel button {
  color: #333;
}

.button-element.cancel input:hover, .button-element.cancel button:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.button-element.cancel input:active, .button-element.cancel button:active {
  box-shadow: inset 0 0 250px #0003;
}

.button-element.no-image .button-status-image {
  opacity: 0;
  display: none;
}

.button-element .button-status-image {
  z-index: 10;
  opacity: 1;
  width: 24px;
  height: 24px;
  transition: display .3s, opacity .3s cubic-bezier(.21, .6, .47, .82);
  transition-delay: display .3s;
  display: block;
  position: absolute;
  top: 8px;
}

.button-element.icon-left .button-status-image {
  left: 8px;
}

.button-element.icon-right .button-status-image {
  right: 8px;
}

.button-element input, .button-element button {
  z-index: 15;
  background-color: #0000;
}

.button-element.loading .button-status-image {
  transform: translate(-100px, -100px)scale(1)translate(100px, 100px);
}

.button-element.loading .button-status-image div, .button-element.loading .button-status-image div:after {
  z-index: 11;
  width: inherit;
  height: inherit;
  border: 2px solid #fff;
  border-top-color: #555;
  border-radius: 50%;
  position: absolute;
}

.button-element.loading .button-status-image div {
  animation: .65s cubic-bezier(.75, .35, .34, .64) infinite lds-rolling;
  top: 50%;
  left: 50%;
}

.button-element.loading .button-status-image div:after {
  transform: rotate(90deg);
}

.button-element .coin-element {
  margin: 4px;
}

.sandbox .button-element .background {
  background-color: #22aaa1;
}

@keyframes lds-rolling {
  0% {
    transform: translate(-50%, -50%)rotate(0);
  }

  100% {
    transform: translate(-50%, -50%)rotate(360deg);
  }
}

/* [project]/src/components/common/loading/loading.scss.css [client] (css) */
.loading {
  background-color: #ffffff0d;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 5px #ffffff1a;
}

.loading div {
  width: 100%;
  height: 100%;
  animation: 1.1s cubic-bezier(.75, .35, .34, .64) infinite lds-roller;
  position: absolute;
}

.loading div:after {
  content: " ";
  background-color: #1d6998;
  border-radius: 50%;
  width: 12%;
  height: 16%;
  position: absolute;
  top: 0%;
  left: 44%;
}

.loading div:first-child {
  animation-delay: -.062s;
}

.loading div:nth-child(2) {
  animation-delay: -.124s;
}

.loading div:nth-child(3) {
  animation-delay: -.186s;
}

.loading div:nth-child(4) {
  animation-delay: -.248s;
}

.loading div:nth-child(5) {
  animation-delay: -.31s;
}

.loading div:nth-child(6) {
  animation-delay: -.372s;
}

.loading div:nth-child(7) {
  animation-delay: -.434s;
}

.loading div:nth-child(8) {
  animation-delay: -.496s;
}

.loading div:nth-child(9) {
  animation-delay: -.558s;
}

.loading div:nth-child(10) {
  animation-delay: -.62s;
}

.loading div:nth-child(11) {
  animation-delay: -.682s;
}

.loading div:nth-child(12) {
  animation-delay: -.744s;
}

.loading.secondary-color div:after {
  background-color: #4d5061;
}

.loading.accent-color div:after {
  background-color: #f2af29;
}

.loading.white div:after {
  background-color: #fff;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* [project]/src/components/common/modal/modal.scss.css [client] (css) */
.center-div-outer .center-div-middle > :first-child.modal-main {
  padding: 0;
}

.modal {
  z-index: 210;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal.hide-modal {
  width: 0;
  height: 0;
}

.modal.hide-modal:not(.inside-another-modal) {
  transition: height 0s .35s, width 0s .35s, padding 0s .35s, overflow 0s .35s;
}

.modal.hide-modal .modal-gray-screen {
  opacity: 0;
}

.modal.hide-modal :first-child.modal-main {
  overflow: hidden;
}

.modal.show-modal {
  width: 100%;
  height: 100%;
}

.modal.show-modal .modal-gray-screen {
  opacity: 1;
}

.modal .modal-gray-screen {
  z-index: 205;
  opacity: 1;
  background: #000000a6;
  width: 100%;
  height: 100%;
  transition: opacity .35s;
  position: absolute;
}

.modal .modal-main {
  z-index: 208;
  background: #fff;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.modal .modal-main .modal-close-button {
  cursor: pointer;
  border-radius: 2px;
  width: 40px;
  height: 40px;
  padding: 4px;
  position: absolute;
  top: 0;
  right: 0;
}

.modal .modal-main .modal-close-button svg {
  width: 100%;
  height: 100%;
}

.modal .modal-main .modal-close-button svg .real-path {
  fill: #1d6998;
}

.modal .modal-main .modal-close-button {
  z-index: 150;
}

.modal .modal-main .modal-close-button:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.modal .modal-main .modal-close-button:active {
  box-shadow: inset 0 0 250px #0003;
}

.modal .modal-main .modal-content {
  max-height: calc(90vh - 48px);
  padding: 20px;
  position: relative;
}

@media screen and (max-width: 779px) {
  .modal .modal-main .modal-content {
    max-height: 80vh;
  }
}

.modal .modal-main .modal-content {
  overflow: auto;
}

@media screen and (max-width: 779px) {
  .center-div-outer .center-div-middle > :first-child.modal-main {
    max-width: 100vw;
  }

  .modal.hide-modal .modal-main:first-child {
    margin-top: 200vh;
    transition: margin-top .2s cubic-bezier(.95, .29, .59, .79), transform .2s cubic-bezier(.95, .29, .59, .79);
    transform: scale(.8);
  }

  .modal.show-modal {
    width: 100vw;
  }

  .modal.show-modal .modal-main:first-child {
    margin-top: 0;
    transition: margin-top .2s cubic-bezier(.95, .29, .59, .79), transform .2s cubic-bezier(.95, .29, .59, .79);
    transform: scale(1);
  }
}

@media screen and (min-width: 780px) {
  .modal.hide-modal .modal-main {
    opacity: 0;
    transition: transform .12s cubic-bezier(.65, .22, .13, .93), opacity .12s cubic-bezier(.65, .22, .13, .93);
    transform: scale(.8);
  }

  .modal.show-modal .modal-main {
    opacity: 1;
    transition: transform .2s cubic-bezier(.65, .22, .13, .93), opacity .2s cubic-bezier(.65, .22, .13, .93);
    transform: scale(1);
  }
}

.sandbox .modal .modal-main .modal-close-button svg .real-path {
  fill: #22aaa1;
}

/* [project]/src/components/common/center-div/center-div.scss.css [client] (css) */
.center-div-outer {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
}

.center-div-outer .center-div-middle {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.center-div-outer .center-div-middle > :first-child {
  background-color: #fff;
  border-radius: 3px;
  flex: 1;
  max-width: 400px;
  margin: 60px auto;
  padding: 20px;
  position: relative;
}

@media screen and (max-width: 400px) {
  .center-div-outer .center-div-middle > :first-child {
    max-width: 100vw;
  }
}

/* [project]/src/components/views/pricing/billing-rate.scss.css [client] (css) */
.billing-rate-comp {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.billing-rate-comp label {
  color: #323232;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.billing-rate-comp .billing-rate-options {
  border-radius: 12px;
  justify-content: center;
  width: auto;
  display: flex;
  box-shadow: 0 3px 8px #0003;
}

.billing-rate-comp .billing-rate-options .billing-rate-option {
  cursor: pointer;
  width: 100px;
  position: relative;
}

.billing-rate-comp .billing-rate-options .billing-rate-option .billing-rate-text {
  text-align: center;
  background-color: #fff;
  height: 40px;
  line-height: 40px;
}

.billing-rate-comp .billing-rate-options .billing-rate-option:first-of-type .billing-rate-text {
  border-radius: 12px 0 0 12px;
}

.billing-rate-comp .billing-rate-options .billing-rate-option:last-of-type .billing-rate-text {
  border-radius: 0 12px 12px 0;
}

.billing-rate-comp .billing-rate-options .billing-rate-option.active .billing-rate-text, .billing-rate-comp .billing-rate-options .billing-rate-option:hover .billing-rate-text {
  color: #fff;
  background-color: #1d6998;
}

.billing-rate-comp .billing-rate-options .billing-rate-option .billing-rate-save {
  text-align: center;
  color: #323232;
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-weight: 800;
  position: absolute;
  bottom: -20px;
}

/* [project]/src/components/views/pricing/top-up-type.scss.css [client] (css) */
.top-up-type-comp {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.top-up-type-comp label {
  color: #323232;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.top-up-type-comp .top-up-type-options {
  border-radius: 12px;
  justify-content: center;
  width: auto;
  display: flex;
  box-shadow: 0 3px 8px #0003;
}

.top-up-type-comp .top-up-type-options .top-up-type-option {
  cursor: pointer;
  width: 100px;
  position: relative;
}

.top-up-type-comp .top-up-type-options .top-up-type-option .top-up-type-text {
  text-align: center;
  background-color: #fff;
  height: 40px;
  line-height: 40px;
}

.top-up-type-comp .top-up-type-options .top-up-type-option:first-of-type .top-up-type-text {
  border-radius: 12px 0 0 12px;
}

.top-up-type-comp .top-up-type-options .top-up-type-option:last-of-type .top-up-type-text {
  border-radius: 0 12px 12px 0;
}

.top-up-type-comp .top-up-type-options .top-up-type-option.active .top-up-type-text, .top-up-type-comp .top-up-type-options .top-up-type-option:hover .top-up-type-text {
  color: #fff;
  background-color: #1d6998;
}

.top-up-type-comp .top-up-type-options .top-up-type-option .top-up-type-save {
  text-align: center;
  color: #323232;
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-weight: 800;
  position: absolute;
  bottom: -20px;
}

/* [project]/src/components/common/payment/stripe.scss.css [client] (css) */
.stripe-comp {
  margin: 20px 0 0;
}

.stripe-comp .payment-details {
  margin: 0 0 12px;
  padding: 0 0 12px;
}

.stripe-comp .payment-details .payment-method {
  justify-content: space-between;
  display: flex;
}

.stripe-comp .payment-details .payment-method .card-info {
  flex: 1;
}

.stripe-comp .payment-details .payment-method .buttons .button {
  height: 32px;
  line-height: 32px;
}

.stripe-comp .payment-details .payment-method .buttons .button:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.stripe-comp .payment-details .payment-method .buttons .button:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.stripe-comp .plan-summary .plan {
  border: 1px solid #e6e6e6;
  border-width: 1px 0;
  margin: 0 0 12px;
  padding: 12px 0;
  display: flex;
}

.stripe-comp .plan-summary .plan .image {
  background-color: #fff;
  border: 3px solid #1d6998;
  border-radius: 3px;
  width: 48px;
  height: 48px;
  overflow: hidden;
}

.stripe-comp .plan-summary .plan .image svg {
  width: 100%;
  height: 100%;
}

.stripe-comp .plan-summary .plan .image .real-path {
  fill: #1d6998;
}

.stripe-comp .plan-summary .plan .details {
  flex: 1;
  margin: 0 12px;
}

.stripe-comp .plan-summary .plan .details .plan-name {
  margin: 0 0 4px;
  font-size: 20px;
}

.stripe-comp .plan-summary .plan .details .savings {
  font-size: 12px;
}

.stripe-comp .plan-summary .plan .details .savings.green {
  color: #61bd4f;
}

.stripe-comp .plan-summary .plan .details .savings.red {
  color: #eb5a46;
}

.stripe-comp .plan-summary .plan .amount {
  font-size: 14px;
}

.stripe-comp .plan-summary .plan .amount .strike {
  opacity: .8;
  position: relative;
}

.stripe-comp .plan-summary .plan .amount .strike:after {
  content: " ";
  font-size: inherit;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: block;
  position: absolute;
  inset: 38% 0;
}

.stripe-comp .plan-summary .total {
  justify-content: space-between;
  margin: 0 0 12px;
  display: flex;
}

.stripe-comp .plan-summary .total .text, .stripe-comp .plan-summary .total .amount {
  font-weight: 700;
}

/* [project]/src/components/common/payment/payment.scss.css [client] (css) */
.payment .card-element {
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  margin: 0 0 12px;
  padding: 10px 12px;
}

.payment .card-element:hover {
  border-color: #cdcdcd;
}

.payment .card-element.focus {
  border-color: #1d6998;
}

/* [project]/src/components/common/payment/paypal.scss.css [client] (css) */
.paypal-comp {
  margin: 20px 0 0;
}

/* [project]/src/components/common/payment/dawipay.scss.css [client] (css) */


/* [project]/src/components/common/carousel/carousel-header.scss.css [client] (css) */
.carousel-header {
  border: 0 solid #c8c8c8;
  border-bottom-width: 1px;
  max-width: 100%;
  position: relative;
}

.carousel-header .carousel-header-buttons {
  background-color: red;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel-header.left-right {
  margin: 24px 0;
  overflow: auto;
}

.carousel-header.up-down {
  margin: 12px;
  overflow: hidden auto;
}

.carousel-header.use-button > .items {
  padding-left: 60px;
}

.carousel-header > .items {
  display: flex;
}

.carousel-header > .items > div {
  color: #555;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  flex: 1;
  height: 40px;
  line-height: 40px;
}

.carousel-header > .items > div:hover {
  box-shadow: inset 0 0 250px #0000001a;
}

.carousel-header > .items > div:active {
  box-shadow: inset 0 0 250px #0003;
}

.carousel-header > .items > div.active {
  cursor: default;
  color: #1d6998;
}

.carousel-header > .items > div.active:hover, .carousel-header > .items > div.active:active {
  box-shadow: inset 0 0 250px #0000;
}

.carousel-header.up-down {
  min-width: 120px;
}

.carousel-header.up-down > .items {
  flex-flow: wrap;
  width: 120px;
}

.carousel-header.up-down > .items > div {
  flex: 50%;
}

.carousel-header .carousel-header-underline-container {
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.carousel-header .carousel-header-underline-container .carousel-header-underline {
  background-color: #1d6998;
  border-radius: 100px 100px 0 0;
  width: 20px;
  height: 2px;
  transition: left .3s cubic-bezier(.65, .22, .13, .93), width .3s cubic-bezier(.65, .22, .13, .93);
  position: absolute;
  bottom: 0;
  left: 0;
}

.sandbox .carousel-header > .items > div.active {
  color: #22aaa1;
}

.sandbox .carousel-header .carousel-header-underline-container .carousel-header-underline {
  background-color: #22aaa1;
}

/* [project]/src/components/common/carousel/carousel.scss.css [client] (css) */
.carousel {
  width: 100%;
  transition: height .5s cubic-bezier(.65, .22, .13, .93);
  position: relative;
  overflow: hidden;
}

.carousel .carousel-container {
  align-content: flex-start;
  align-items: flex-start;
  transition: left .5s cubic-bezier(.65, .22, .13, .93);
  display: flex;
  position: relative;
}

.carousel .carousel-container > * {
  float: left;
  opacity: 0;
  width: 100%;
  height: auto;
  transition: opacity .5s linear;
  overflow-y: hidden;
}

.carousel .carousel-container > .active {
  opacity: 1;
}

.carousel .side-slider {
  z-index: 100;
  opacity: 1;
  cursor: pointer;
  background-color: #00000026;
  width: 40px;
  height: 100%;
  transition: opacity .3s;
  position: absolute;
}

.carousel .side-slider.fade {
  opacity: 0;
}

.carousel .side-slider:hover {
  background-color: #0000004d;
}

.carousel .side-slider:active {
  background-color: #00000073;
}

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

.carousel .side-slider > svg .real-path {
  fill: #fff;
}

/* [project]/src/components/views/not-found/not-found.scss.css [client] (css) */
.not-found {
  background-color: #fff;
  border-radius: 8px;
  max-width: 320px;
  margin: 40px auto;
  padding: 20px;
  box-shadow: 0 3px 8px #00000026;
}

/* [project]/src/components/views/support/help.scss.css [client] (css) */
.help-comp {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px;
}

.help-comp .block {
  margin: 0 0 40px;
}

.help-comp .block.self-service .items {
  flex-wrap: wrap;
  padding: 0 20px 20px 0;
  display: flex;
}

.help-comp .block.self-service .items .item {
  background-color: #fff;
  border-radius: 3px;
  margin: 20px 0 0 20px;
  padding: 20px;
  display: block;
}

.help-comp .block.faq .items {
  flex-flow: column;
  display: flex;
}

.help-comp .block.faq .items .item {
  margin: 0 0 40px;
}

.help-comp .block.faq .items .item:last-of-type {
  margin-bottom: 0;
}

.help-comp .block.faq .items .item .question {
  margin: 0 0 8px;
  font-weight: 500;
}

/* [project]/src/components/views/support/support.scss.css [client] (css) */
.support-comp {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.support-comp .please-login {
  background-color: #fff;
  margin: 20px 0;
  padding: 20px;
}

.support-comp .support-header {
  justify-content: space-between;
  display: flex;
}

.support-comp .support-header h1 {
  margin: 0;
}

.support-comp .support-header .button-element {
  width: auto;
  height: 32px;
}

.support-comp .support-header .button-element .button-status-image {
  top: 4px;
  right: 4px;
}

.support-comp .support-header .button-element button {
  height: inherit;
  padding-left: 12px;
  padding-right: 32px;
  line-height: 32px;
}

.support-comp .support-modal-container .block {
  margin: 0 0 12px;
}

.support-comp .support-modal-container .block textarea, .support-comp .support-modal-container .block input {
  margin: 0;
}

.support-comp .support-modal-container .block textarea {
  min-height: 120px;
  max-height: 360px;
}

.support-comp .support-tickets {
  margin: 40px 0;
}

.support-comp .support-tickets .no-tickets {
  text-align: center;
  background-color: #fff;
  border-radius: 3px;
  margin: 0;
  padding: 20px;
}

.support-comp .support-tickets .ticket {
  color: #141414;
}

.support-comp .support-tickets .ticket.gray {
  color: #969696;
}

.support-comp .support-tickets .ticket {
  background-color: #fff;
  border-radius: 3px;
  margin: 20px 0;
  padding: 20px;
  text-decoration: none;
  display: block;
}

.support-comp .support-tickets .ticket:first-of-type {
  margin-top: 0;
}

.support-comp .support-tickets .ticket:last-of-type {
  margin-bottom: 0;
}

.support-comp .support-tickets .ticket:hover {
  box-shadow: 0 3px 8px #00000026;
}

.support-comp .support-tickets .ticket:active {
  box-shadow: 0 3px 8px #0000004d;
}

.support-comp .support-tickets .ticket .ticket-header {
  justify-content: space-between;
  margin: 0 0 12px;
  display: flex;
}

.support-comp .support-tickets .ticket .ticket-content {
  justify-content: space-between;
  display: flex;
}

.support-comp .support-tickets .ticket .ticket-content > div {
  text-overflow: ellipsis;
  overflow: hidden;
}

.support-comp .support-tickets .ticket .ticket-content > div.date {
  text-align: right;
  min-width: 220px;
}

.support-comp .modal :first-child.support-modal {
  max-width: 480px;
  overflow: auto;
}

/* [project]/src/components/views/support/feedback.scss.css [client] (css) */
.feedback-comp {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
}

.feedback-comp .feedback-content {
  background-color: #fff;
  border-radius: 3px;
  margin: 40px 0;
  padding: 20px;
}

@media screen and (max-width: 779px) {
  .feedback-comp .feedback-content {
    padding: 12px;
  }
}

.feedback-comp .feedback-content:first-of-type {
  margin-top: 0;
}

.feedback-comp .feedback-content textarea {
  min-height: 120px;
  max-height: 360px;
}

/* [project]/src/components/views/support/bug-report.scss.css [client] (css) */
.bug-report-comp {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
}

.bug-report-comp .bug-report-content {
  background-color: #fff;
  border-radius: 3px;
  margin: 40px 0;
  padding: 20px;
}

@media screen and (max-width: 779px) {
  .bug-report-comp .bug-report-content {
    padding: 12px;
  }
}

.bug-report-comp .bug-report-content:first-of-type {
  margin-top: 0;
}

.bug-report-comp .bug-report-content textarea {
  min-height: 120px;
  max-height: 360px;
}

/* [project]/src/components/views/email-related/reset-password/reset-password.scss.css [client] (css) */
.reset-password .loading {
  margin: 0 auto;
}

.reset-password .recaptcha {
  max-width: 200px;
}

/* [project]/src/components/elements/password-input/password-input.scss.css [client] (css) */
.password-input {
  position: relative;
}

.password-input input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.password-input .show-password {
  cursor: pointer;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
}

.password-input .show-password svg {
  fill: #1d6998;
  width: 60%;
  height: 60%;
  margin: 20%;
}

.password-input .show-password:hover {
  z-index: 10;
}

.sandbox .password-input .show-password svg {
  fill: #22aaa1;
}

/* [project]/src/components/views/blog/blog.scss.css [client] (css) */
.blog-comp {
  max-width: 800px;
  margin: 20px auto;
}

.blog-comp .table-element {
  margin: 40px 0;
}

.blog-comp .table-element tr:hover, .blog-comp .table-element td:hover {
  box-shadow: 0 0 #0000 !important;
}

.blog-comp .table-element td:before, .blog-comp .table-element .toolbar {
  display: none;
}

.blog-comp .table-element table {
  background-color: #0000;
}

.blog-comp .table-element .left-block {
  display: none;
}

.blog-comp .blog-article-item {
  background-color: #fff;
  border-radius: 4px;
  margin: 0 0 12px;
  padding: 12px;
  display: block;
}

.blog-comp .blog-article-item:hover {
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px #00000080;
}

.blog-comp .blog-article-item .blog-article-item-top {
  display: flex;
}

.blog-comp .blog-article-item .blog-article-item-top .image-item {
  min-width: 140px;
  min-height: 105px;
}

.blog-comp .blog-article-item .blog-article-item-top .image-item img {
  border-radius: 4px;
  max-width: 140px;
  box-shadow: 0 1px 3px #0003;
}

.blog-comp .blog-article-item .blog-article-item-top .title-item {
  text-align: left;
  margin: 0 0 0 12px;
}

.blog-comp .blog-article-item .blog-article-item-top .title-item h2 {
  color: #333;
  margin: 0 0 8px;
  font-size: 20px;
}

.blog-comp .blog-article-item .blog-article-item-top .title-item p {
  color: #777;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 14px;
  display: -webkit-box;
  overflow: hidden;
}

.blog-comp .blog-article-item .author-details {
  color: #777;
  justify-content: space-between;
  margin: 8px 0 0;
  font-size: 12px;
  display: flex;
}

/* [project]/src/components/elements/table/table.scss.css [client] (css) */
.table-element {
  display: flex;
}

.table-element .copy-input {
  margin: 0;
}

.table-element .toolbar {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.table-element .toolbar .button-element {
  width: 40px;
}

.table-element .toolbar .button-element button {
  color: #0000;
}

.table-element .toolbar .mobile-toolbar-side-items {
  flex: 1;
  margin: 0;
  display: flex;
  overflow: auto;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item:not(.custom) {
  padding: 0 12px;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item {
  white-space: nowrap;
  border-radius: 3px;
  flex-shrink: 0;
  width: auto;
  height: 40px;
  line-height: 40px;
  position: relative;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item .text {
  white-space: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
  display: inline-block;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item:hover, .table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item.active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.table-element .toolbar .mobile-toolbar-side-items .mobile-toolbar-side-item-add-new-item-button-div {
  margin-left: 12px;
  margin-right: 12px;
}

.table-element .pointer {
  cursor: pointer;
}

.table-element .clickable:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.table-element .clickable:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.table-element .left-block:not(.hide), .table-element .side-items-filter:not(.hide) {
  flex-flow: column;
  width: 140px;
  margin: 0 20px 0 0;
}

.table-element .left-block .left-block-item:not(.custom), .table-element .side-items-filter .left-block-item:not(.custom) {
  border-radius: 3px;
  height: 36px;
  margin: 0 0 8px;
  padding: 0 8px;
  line-height: 36px;
  position: relative;
}

.table-element .left-block .left-block-item:not(.custom):hover, .table-element .left-block .left-block-item:not(.custom).active, .table-element .side-items-filter .left-block-item:not(.custom):hover, .table-element .side-items-filter .left-block-item:not(.custom).active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button-line {
  background: linear-gradient(to right, #0000, #1d6998, #0000);
  width: 100%;
  height: 1px;
  margin: 4px 0 12px;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button {
  height: 36px;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button .button-status-image {
  top: 6px;
  right: 6px;
}

.table-element .side-item-add-new-item-button-div .side-item-add-new-item-button button {
  height: 36px;
  line-height: 36px;
}

.table-element .side-items-filter:not(.hide) {
  width: 100%;
  margin: 0;
}

.table-element .center-block {
  flex: 1;
  max-width: 100%;
  position: relative;
}

.table-element .center-block .loading-overlay:not(.hide) {
  display: flex;
}

.table-element .center-block .loading-overlay {
  z-index: 75;
  background-color: #0000001a;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 30px);
  position: absolute;
  top: 30px;
  left: 0;
}

.table-element .center-block .search-bar-buttons-left {
  display: flex;
}

.table-element .center-block .search-bar-container {
  flex: 1;
}

.table-element .center-block .search-bar-buttons-right {
  display: flex;
}

.table-element .center-block .search-block {
  margin: 0;
}

.table-element .center-block .search-block .results-count, .table-element .center-block .search-block .results-count-simple {
  padding: 8px;
  font-size: 12px;
}

.table-element .center-block .search-block .results-count-simple {
  display: none;
}

.table-element .center-block .search-block > form:not(.hide) {
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions {
  flex: 1;
}

.table-element .center-block .search-block > form .search-conditions.singular:not(.hide) {
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions.singular:not(.hide) input[type="text"] {
  flex: 1;
  margin: 0;
}

.table-element .center-block .search-block > form .search-conditions .data-range {
  flex: 1;
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions .data-range .date-epoch-input {
  margin: 0;
}

.table-element .center-block .search-block > form .search-conditions .data-range .spacer {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  display: flex;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  flex-wrap: wrap;
  height: 100%;
  max-height: 40px;
  padding: 1px;
  display: flex;
  overflow-y: auto;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide):hover {
  border-color: #c8c8c8;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide):active {
  border-color: #b4b4b4;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group {
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group:not(:first-of-type) {
  margin: 0 0 0 20px;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group:not(:first-of-type):before {
  text-align: center;
  content: "OR";
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: -20px;
}

.table-element .center-block .search-block > form .search-conditions.multi:not(.hide) .search-conditon-group .search-condition {
  background-color: #c8c8c8;
  border-radius: 2px;
  height: 16px;
  margin: 1px;
  padding: 1px 2px;
  font-size: 12px;
}

.table-element .center-block .search-block > form select, .table-element .center-block .search-block > form .button-element {
  margin: 0 0 0 12px;
}

.table-element .center-block .search-block > form .button-element.filter {
  margin: 0 12px 0 0;
}

.table-element .center-block .search-block > form .button-element {
  width: 40px;
}

.table-element .center-block .search-block > form .button-element button, .table-element .center-block .search-block > form .button-element input {
  color: #0000;
}

.table-element .center-block .search-block > form .button-element.add-button {
  width: auto;
}

.table-element .center-block .search-block > form .button-element.add-button button, .table-element .center-block .search-block > form .button-element.add-button input {
  color: #fff;
  padding-right: 40px;
}

.table-element .center-block .main-block .content-block table {
  border-collapse: collapse;
  width: 100%;
}

.table-element .center-block .main-block .content-block table .header {
  z-index: 50;
  background-color: #f3f7fc;
  position: sticky;
  top: -20px;
  box-shadow: 0 8px 8px -4px #0000001a;
}

.table-element .center-block .main-block .content-block table .header th:not(.disabled-index-sort):not(.ignore) {
  cursor: pointer;
}

.table-element .center-block .main-block .content-block table .header th:not(.disabled-index-sort):not(.ignore):hover {
  box-shadow: inset 0 0 250px #00000026;
}

.table-element .center-block .main-block .content-block table .header th:not(.disabled-index-sort):not(.ignore):active {
  box-shadow: inset 0 0 250px #0000004d;
}

.table-element .center-block .main-block .content-block table .header th:not(.ignore).order-asc, .table-element .center-block .main-block .content-block table .header th:not(.ignore).order-desc {
  padding-right: 20px;
  position: relative;
}

.table-element .center-block .main-block .content-block table .header th:not(.ignore).order-asc:before {
  content: "";
  border: 10px solid #0000;
  border-bottom-color: #3c3c3c;
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 15px);
  right: 2px;
}

.table-element .center-block .main-block .content-block table .header th:not(.ignore).order-desc:before {
  content: "";
  border: 10px solid #0000;
  border-top-color: #3c3c3c;
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 5px);
  right: 2px;
}

.table-element .center-block .main-block .content-block table th, .table-element .center-block .main-block .content-block table td {
  padding: 2px 4px;
}

.table-element .center-block .main-block .content-block table th {
  height: 40px;
}

.table-element .center-block .main-block .content-block table td input {
  margin: 0;
}

.table-element .center-block .main-block .content-block table td {
  min-height: 28px;
}

.table-element .center-block .main-block .content-block table tr.disable-row-highlight .pointer {
  cursor: default;
}

.table-element .center-block .main-block .content-block table tr:not(.disable-row-highlight):hover:not(.header) {
  box-shadow: inset 0 0 250px #00000026;
}

.table-element .center-block .main-block .content-block.hide-header-row .header {
  display: none;
}

.table-element .center-block .main-block .content-block.hide-header-row .loading-overlay {
  height: 100%;
  top: 0;
}

.table-element .center-block .main-block .label-active, .table-element .center-block .main-block .label-inactive {
  color: #0000;
  background-color: #c8c8c8;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  padding: 8px;
  font-size: 0;
  display: inline-block;
}

.table-element .no-results {
  background-color: #fff;
  padding: 20px;
}

.table-element .footer-block {
  background-color: #f3f7fc;
  border-radius: 0 0 3px 3px;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  display: flex;
  position: sticky;
  bottom: 0;
  overflow: auto;
  box-shadow: 0 -8px 8px -4px #0000001a;
}

.table-element .footer-block .buttons .button-element button {
  padding-right: 40px;
}

.table-element .footer-block .buttons.right .button-element {
  margin-left: 12px;
}

.table-element .footer-block .buttons.left .button-element {
  margin-right: 12px;
}

.table-element .table-search-advanced-modal:first-child {
  max-width: 650px;
  max-height: 80vh;
  overflow: auto;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions {
  flex-flow: column;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .action-lock {
  margin: 0 8px 0 0;
  line-height: 40px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group {
  flex-flow: column;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div {
  flex-flow: row;
  justify-content: flex-start;
  margin: 0 0 12px;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .button-element {
  max-width: 100px;
  margin: 0 20px 0 0;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .button-element button {
  padding-right: 40px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .or-div:not(.hide) {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .or-div:not(.hide) .line {
  background-color: #dcdcdc;
  flex: 1;
  height: 1px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .button-div .or-div:not(.hide) .text {
  padding: 0 12px;
  font-size: 10px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition {
  margin: 0 0 12px;
  display: flex;
  position: relative;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition:not(:first-of-type):before {
  text-align: center;
  content: "AND";
  color: #000000bf;
  width: 100%;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  position: absolute;
  top: -12px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition input {
  flex: 1;
  margin: 0 8px 0 0;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition select {
  margin: 0 8px 0 0;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition select.value-select {
  width: 100%;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition .button-element {
  max-width: 40px;
}

.table-element .table-search-advanced-modal .table-search-advanced-modal-main .search-conditions .search-condition-group .search-condition .button-element button {
  color: #0000;
}

.table-element .filter-order-by .filter-order-by-box {
  display: flex;
}

.table-element .filter-order-by .filter-order-by-box select {
  flex: 1;
}

.table-element .filter-order-by .filter-order-by-box .asc-desc {
  display: flex;
}

.table-element .filter-order-by .filter-order-by-box .asc-desc > span {
  border-radius: 4px;
  height: 40px;
  margin-left: 12px;
  padding: 0 12px;
  line-height: 40px;
  display: block;
}

.table-element .filter-order-by .filter-order-by-box .asc-desc > span:hover, .table-element .filter-order-by .filter-order-by-box .asc-desc > span.active {
  cursor: pointer;
  color: #fff;
  background-color: #1d6998;
}

.table-element .side-items-filter .line {
  background-color: #dcdcdc;
  width: 100%;
  height: 1px;
  margin: 12px 0;
}

.sandbox .table-element .left-block .left-block-item:not(.custom):hover, .sandbox .table-element .left-block .left-block-item:not(.custom).active, .sandbox .table-element .left-block .left-block-item:not(.custom) .filter-order-by .filter-order-by-box .asc-desc > span:hover, .sandbox .table-element .left-block .left-block-item:not(.custom) .filter-order-by .filter-order-by-box .asc-desc > span.active {
  background-color: #22aaa1;
}

.table-element.expand .center-block {
  flex-flow: column;
  display: flex;
}

.table-element.expand .center-block .main-block {
  flex-flow: column;
  flex: 1;
  display: flex;
}

.table-element.expand .center-block .main-block .content-block {
  flex: 1;
}

@media screen and (min-width: 780px) {
  .table-element .left-block {
    display: flex;
  }

  .table-element table {
    background-color: #fff;
  }

  .table-element table td {
    text-align: right;
  }

  .table-element .search-conditions select {
    max-width: 120px;
  }

  .table-element .search-bar-buttons-right .inner-search-bar-buttons-left {
    display: none;
  }
}

@media screen and (min-width: 779px) {
  .table-element .toolbar {
    display: none;
  }
}

@media screen and (max-width: 779px) {
  .table-element .left-block, .table-element thead {
    display: none;
  }

  .table-element table, .table-element table tbody, .table-element table tr, .table-element table td {
    width: 100%;
    display: block;
  }

  .table-element table tr {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 8px;
  }

  .table-element table tr:last-of-type {
    margin-bottom: 0;
  }

  .table-element table td {
    text-align: right;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative;
  }

  .table-element table td:before {
    text-align: left;
    content: attr(data-label);
    max-width: 100px;
    margin: 0 0 2px;
    font-size: 12px;
    position: relative;
    left: 0;
  }

  .table-element .search-block .search-bar-buttons-left.desktop {
    display: none;
  }

  .table-element .search-block .search-bar-buttons-right {
    margin: 0 0 12px;
  }

  .table-element .search-block .search-bar-buttons-right .inner-search-bar-buttons-left {
    flex: 1;
    display: flex;
  }

  .table-element .search-block .search-bar-buttons-right .inner-search-bar-buttons-left select {
    flex: 1;
    margin: 0;
  }

  .table-element .search-block form {
    flex-flow: column-reverse;
  }

  .table-element .search-block form .search-bar-container select {
    display: none;
  }

  .table-element .search-conditions select {
    padding: 0;
  }
}

/* [project]/src/components/common/pagination/pagination.scss.css [client] (css) */
.pagination ul {
  margin: 0;
  display: flex;
}

.pagination ul li {
  text-align: center;
  background-color: #fff;
  margin: 0 8px 0 0;
  position: relative;
}

.pagination ul li > div {
  cursor: pointer;
  border: 1px solid #1d6998;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.pagination ul li > div:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.pagination ul li > div:active {
  box-shadow: inset 0 0 250px #0000004d;
}

.pagination ul li.active > div {
  color: #fff;
  background-color: #1d6998;
}

.pagination ul li.first {
  margin-right: 32px;
}

.pagination ul li.first:after {
  content: "...";
  width: 24px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  bottom: 8px;
  right: -28px;
}

.pagination ul li.last {
  margin-left: 24px;
}

.pagination ul li.last:before {
  content: "...";
  width: 24px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  bottom: 8px;
  left: -28px;
}

.sandbox .pagination ul li > div {
  border-color: #22aaa1;
}

.sandbox .pagination ul li.active > div {
  background-color: #22aaa1;
}

/* [project]/src/components/elements/date-epoch-input/date-epoch-input.scss.css [client] (css) */
.date-epoch-input {
  flex: 1;
  margin: 0 8px 0 0;
  display: flex;
}

.date-epoch-input .input-div {
  flex: 1;
  height: 40px;
  margin: 0 8px 0 0;
  position: relative;
}

.date-epoch-input .input-div .active {
  z-index: 10;
  height: 30px;
  position: absolute;
  top: 0;
}

.date-epoch-input .input-div .sub {
  z-index: 10;
  height: 11px;
  margin: 0;
  font-size: 10px;
  line-height: 11px;
  position: absolute;
  bottom: 0;
}

.date-epoch-input .input-div .active:hover, .date-epoch-input .input-div .active:focus, .date-epoch-input .input-div .sub:hover, .date-epoch-input .input-div .sub:focus {
  z-index: 15;
}

.date-epoch-input .toggle-div {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  width: 40px;
  height: 40px;
  padding: 4px;
}

.date-epoch-input .toggle-div:hover {
  border-color: #c8c8c8;
  box-shadow: inset 0 0 250px #00000026;
}

.date-epoch-input .toggle-div:active {
  border-color: #b4b4b4;
  box-shadow: inset 0 0 250px #0000004d;
}

.date-epoch-input .toggle-div svg {
  width: 100%;
  height: 100%;
}

/* [project]/src/components/elements/copy-input/copy-input.scss.css [client] (css) */
.copy-input {
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  margin: 12px 0;
  line-height: 40px;
  display: flex;
}

.copy-input .display {
  padding: 0 8px;
}

.copy-input input {
  border: 0;
  flex: 1;
}

.copy-input textarea {
  border: 0;
  margin: 0;
}

.copy-input .copy {
  cursor: pointer;
  color: #000;
  justify-content: center;
  align-items: center;
  width: 40px;
  font-size: 0;
  display: flex;
}

.copy-input .copy:hover {
  box-shadow: inset 0 0 250px #00000026;
}

.copy-input .copy:active {
  box-shadow: inset 0 0 250px #0000004d;
}

/* [project]/src/components/views/projects/projects.scss.css [client] (css) */
.projects-comp {
  max-width: 1080px;
  margin: 20px auto;
  padding: 20px;
}

.projects-comp .project-list h2 span {
  background-color: #dcdcdc;
  margin: 0 4px;
  padding: 4px;
  font-family: MedievalSharp, sans-serif;
}

.projects-comp .project-list li {
  background-color: #fff;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  box-shadow: 0 1px 3px #00000040;
}

@media screen and (max-width: 779px) {
  .projects-comp .project-list li {
    flex-flow: column;
  }
}

.projects-comp .project-list li .left {
  flex: 1;
  padding: 20px;
}

.projects-comp .project-list li .left p {
  margin: 0;
}

.projects-comp .project-list li .right {
  flex: 0;
  min-width: 140px;
  margin: 0 20px 0 40px;
}

@media screen and (max-width: 779px) {
  .projects-comp .project-list li .right {
    margin: 0 0 20px;
  }
}

.projects-comp .project-list li .right a {
  justify-content: space-between;
  align-items: center;
  padding-right: 8px;
  display: flex;
}

.projects-comp .project-list li .right a .icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.projects-comp .project-list li .right a .icon svg .real-path {
  fill: #fff;
}

/* [project]/src/components/views/contact/contact.scss.css [client] (css) */
.contact-comp {
  max-width: 540px;
  margin: 20px auto;
  padding: 20px;
}

.contact-comp .white-div {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px #00000040;
}

/*# sourceMappingURL=src_components_9acfa827._.css.map*/