.hostinger-textarea {
    position: relative
}

.hostinger-textarea label {
    background: #fff;
    color: var(--gray);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    left: 8px;
    line-height: 20px;
    padding: 0 8px;
    position: absolute;
    top: -9px
}

.hostinger-textarea textarea {
    border: 1px solid #dadce0;
    border-radius: 4px;
    height: 48px;
    padding: 12px 16px;
    transition: height .25s ease-out;
    width: 100%
}

.hostinger-textarea--active textarea {
    height: 125px
}

.hostinger-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0 0
}

.hostinger-tags__item {
    background: var(--light);
    border: 1px solid var(--gray-light-border);
    border-radius: 24px;
    color: var(--primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    padding: 0 10px
}

.hostinger-tags__item:hover {
    cursor: pointer
}

.hostinger-progress-bar__wrap {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 16px;
    padding: 0;
    width: 100%
}

.hostinger-progress-bar__wrap--is-poor .hostinger-progress-bar__step:first-child {
    background-color: var(--danger)
}

.hostinger-progress-bar__wrap--is-average .hostinger-progress-bar__step:first-child,
.hostinger-progress-bar__wrap--is-average .hostinger-progress-bar__step:nth-child(2) {
    background-color: var(--warning)
}

.hostinger-progress-bar__wrap--is-good .hostinger-progress-bar__step:first-child,
.hostinger-progress-bar__wrap--is-good .hostinger-progress-bar__step:nth-child(2),
.hostinger-progress-bar__wrap--is-good .hostinger-progress-bar__step:nth-child(3) {
    background-color: var(--success)
}

.hostinger-progress-bar__step {
    background-color: var(--gray-light);
    flex-grow: 1;
    height: 16px
}

.hostinger-progress-bar__step:first-of-type {
    border-radius: 4px 0 0 4px
}

.hostinger-progress-bar__step:last-of-type {
    border-radius: 0 4px 4px 0
}

.hostinger-progress-bar__status {
    color: var(--gray);
    font-size: 12px;
    line-height: 30px
}

.list-item {
    cursor: pointer;
    display: flex;
    padding: 12px 16px;
    text-align: left
}

.list-item span {
    flex-grow: 1
}

.list-item:hover {
    background-color: var(--primary-dark-hover)
}

.list-item:hover.list-item--active {
    background-color: var(--primary-light)
}

.list-item:hover.list-item--disabled {
    background-color: var(--light)
}

.list-item--disabled {
    color: var(--gray);
    cursor: not-allowed
}

.list-item--active {
    background-color: var(--primary-light);
    color: var(--primary)
}

.list-item__append-text {
    display: flex;
    justify-content: flex-end
}

.list-item__icon,
.list-item__image {
    height: -moz-fit-content;
    height: fit-content
}

.list-item__icon--left,
.list-item__image--left {
    margin-right: 8px
}

.list-item__icon--right,
.list-item__icon__image,
.list-item__image--right,
.list-item__image__image {
    margin-left: 8px
}

.list {
    background-color: var(--light);
    border-radius: 8px;
    color: var(--text_gray);
    filter: drop-shadow(0 0 12px rgba(29, 30, 32, .16));
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    list-style: none;
    margin: 0;
    min-width: calc(100% + 2px);
    overflow-y: auto;
    padding: 0 !important;
    z-index: var(--z-index-2)
}

.list::-webkit-scrollbar {
    width: 6px
}

.list::-webkit-scrollbar-track {
    border-radius: 4px;
    margin: 8px
}

.list::-webkit-scrollbar-thumb {
    background: var(--gray-border);
    border: 4px solid transparent;
    border-radius: 4px
}

.list::-webkit-scrollbar-thumb:hover {
    background: var(--gray-border)
}

.list--no-match:hover {
    background-color: var(--light);
    color: var(--gray-dark);
    cursor: default
}

.hostinger-dropdown {
    background-color: var(--light);
    border: none;
    border-radius: 8px;
    padding: 0;
    width: 100%;
    z-index: 10
}

.hostinger-dropdown__container {
    flex-grow: 1;
    position: relative
}

.hostinger-dropdown__list {
    margin-top: 4px;
    max-height: 250px;
    position: absolute;
    width: 100%
}

.hostinger-dropdown__arrow-icon {
    color: var(--gray);
    display: flex;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s
}

.hostinger-dropdown__arrow-icon--active svg {
    transform: rotate(180deg)
}

.hostinger-dropdown__arrow-icon svg {
    fill: var(--gray);
    height: 24px;
    transition: .3s;
    width: 24px
}

.hostinger-dropdown__field-label {
    background: var(--light);
    color: var(--gray);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    left: -6px;
    line-height: 20px;
    margin-bottom: 0;
    max-width: calc(114% - 24px);
    overflow: hidden;
    padding: 0 8px;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: 3px;
    transform: translate(48px, 12px) scale(1);
    transform: translate(13px, -11px) scale(.85);
    transform-origin: left top;
    transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms, transform .2s cubic-bezier(0, 0, .2, 1) 0ms, max-width .2s cubic-bezier(0, 0, .2, 1) 0ms;
    white-space: nowrap;
    width: auto;
    z-index: var(--z-index-child-1)
}

.hostinger-dropdown__field-error {
    color: var(--danger);
    display: block;
    font-size: 12px;
    line-height: 18px;
    margin-top: 4px;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left
}

.hostinger-dropdown__field-border-legend {
    display: block;
    float: unset;
    font-size: .85em;
    height: 21px;
    max-width: .01px;
    overflow: hidden;
    padding: 0;
    transition: max-width .1s cubic-bezier(0, 0, .2, 1) 50ms;
    visibility: hidden;
    white-space: nowrap;
    width: auto
}

.hostinger-dropdown__field-border-legend>span {
    display: inline-block;
    opacity: 0;
    padding-left: 5px;
    padding-right: 5px;
    visibility: visible
}

.hostinger-dropdown__field-border {
    border: hidden !important;
    border: 1px solid var(--gray-border) !important;
    border-radius: 4px !important;
    inset: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    pointer-events: none !important;
    position: absolute !important;
    text-align: left !important;
    z-index: var(--z-index-child-1) !important
}

.hostinger-dropdown-field {
    flex-grow: 1;
    height: 48px;
    position: relative;
    width: 100%
}

.hostinger-dropdown-field__selected-value {
    border: none !important;
    box-shadow: none !important;
    font-size: 14px;
    line-height: 24px !important;
    padding: 12px 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100% !important
}

.hostinger-dropdown-field__selected-value--no-options {
    color: var(--gray);
    cursor: default
}

.hostinger-dropdown-field__selected-value:active,
.hostinger-dropdown-field__selected-value:focus,
.hostinger-dropdown-field__selected-value:hover,
.hostinger-dropdown-field__selected-value:visited {
    outline: none
}

.hostinger-dropdown-field::-moz-placeholder {
    color: var(--gray)
}

.hostinger-dropdown-field::placeholder {
    color: var(--gray)
}

.hostinger-checkbox,
.hostinger-checkbox label {
    align-items: center;
    display: flex
}

.hostinger-checkbox label {
    background: var(--gray);
    background: currentColor;
    border: 0;
    border-radius: 1.25em;
    color: var(--gray);
    cursor: pointer;
    font-size: 1.3rem;
    height: 14px;
    margin-bottom: 0;
    overflow: visible;
    position: relative;
    transition: all 2s;
    width: 36px
}

.hostinger-checkbox span {
    align-items: center;
    background: var(--light);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow);
    color: currentColor;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    margin: -1px;
    opacity: 1;
    overflow: hidden;
    transform: translate(0) scale(1);
    transition: all .15s;
    width: 20px
}

.hostinger-checkbox--active label {
    background: var(--primary-light)
}

.hostinger-checkbox--active span {
    background: var(--primary);
    opacity: 1;
    transform: translate(100%) scale(1)
}

.hostinger-checkbox input {
    height: 0;
    margin-left: -999px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0
}

.skeleton-loader {
    background-color: var(--gray-1);
    overflow: hidden;
    position: relative;
    width: 100%
}

.skeleton-loader:after {
    animation: AiSkeletonLoader-keyframes-wave 1.6s linear .5s infinite;
    background: linear-gradient(90deg, transparent, var(--gray-2));
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%)
}

.skeleton-loader--circle {
    border-radius: 50%
}

.skeleton-loader--rounded {
    border-radius: 8px
}

.skeleton-loader--rounded-xs {
    border-radius: 4px
}

@keyframes AiSkeletonLoader-keyframes-wave {
    0% {
        transform: translateX(-100%)
    }

    60% {
        transform: translateX(100%)
    }

    to {
        transform: translateX(100%)
    }
}

@font-face {
    font-family: DMSans;
    font-weight: 400;
    src: url(fonts/DMSans-Regular.4ee96395.ttf)
}

@font-face {
    font-family: DMSans;
    font-weight: 500;
    src: url(fonts/DMSans-Medium.15068053.ttf)
}

@font-face {
    font-family: DMSans;
    font-weight: 700;
    src: url(fonts/DMSans-Bold.c423ce2d.ttf)
}

:root {
    --primary: #673de6;
    --primary-light: #ebe4ff;
    --primary-lightest: #673de614;
    --primary-dark: #5025d1;
    --primary-charts: #b39ef3;
    --white: #fff;
    --gray-1: hsla(0, 0%, 79%, .5);
    --gray-2: rgba(227, 227, 255, .5);
    --gray: #727586;
    --gray-light: #f2f3f6;
    --gray-light-border: #dadce0;
    --gray-dark: #36344d;
    --gray-border: #dad9da;
    --success: #00b090;
    --success-light: #def4f0;
    --success-dark: #008361;
    --info-light: #e0f8ff;
    --danger: #fc5185;
    --danger-light: #ffe8ef;
    --danger-dark: #d63163;
    --warning: #ffcd35;
    --warning-light: #fff8e2;
    --warning-dark: #fea419;
    --meteorite: #8c85ff;
    --meteorite-light: #d5dfff;
    --meteorite-gray: #dadce03d;
    --meteorite-dark: #2f1c6a;
    --light: #fff;
    --dark: #1d1e20;
    --white-blue: #f4f5ff;
    --primary-timer: #8564eb;
    --black-timer: #343434;
    --periwinkle: #c5cde9;
    --shadow: 0 1px 4px rgba(0, 0, 0, .26);
    --text_gray: #727586;
    --primary-hover: var(--primary-light);
    --primary-dark-hover: hsla(220, 9%, 87%, .24)
}

.hostinger-ai-block {
    font-family: DMSans, sans-serif !important;
    margin: 24px
}

.hostinger-ai-block__row {
    margin: 0 0 24px
}

.hostinger-ai-block__row:first-of-type {
    margin: 24px 0;
    padding: 24px 0 0
}

.hostinger-ai-block__row:last-of-type {
    padding: 0 0 24px
}

.hostinger-ai-block__row--is-footer {
    display: flex
}

.hostinger-ai-block__row-heading {
    color: var(--dark);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 16px
}

.hostinger-ai-block__personalization-options {
    display: flex;
    gap: 16px
}

.hostinger-ai-block__checkbox-wrap {
    display: flex
}

.hostinger-ai-block__checkbox-label {
    align-items: center;
    color: var(--dark);
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-left: 10px
}

.hostinger-ai-block__button-wrap {
    margin-left: auto
}

.hostinger-ai-block__preview_content,
.hostinger-ai-block__preview_content img {
    margin-bottom: 30px
}

.hostinger-ai-block__preview_content p {
    margin-bottom: 20px
}

.hostinger-ai-block__preview_controls {
    align-items: flex-end;
    display: flex;
    justify-content: flex-end
}

.hostinger-ai-block__preview_controls button:first-of-type {
    margin-right: 24px
}

.hostinger-ai-block button.hostinger-block-button {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    font-feature-settings: "clig" off, "liga" off;
    font-weight: 700;
    justify-content: center;
    text-decoration: none !important
}

.hostinger-ai-block button.hostinger-block-button[disabled] {
    cursor: not-allowed;
    opacity: .7
}

.hostinger-ai-block button.hostinger-block-button--is-normal {
    font-size: 14px;
    gap: 8px;
    padding: 8px 24px
}

.hostinger-ai-block button.hostinger-block-button--is-small {
    font-size: 12px;
    gap: 8px;
    padding: 6px 16px
}

.hostinger-ai-block button.hostinger-block-button--is-big {
    font-size: 14px;
    gap: 12px;
    padding: 12px 32px
}

.hostinger-ai-block button.hostinger-block-button--is-primary {
    background: #673de6;
    border: 0;
    color: #fff
}

.hostinger-ai-block button.hostinger-block-button--is-primary:hover {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05)) !important;
    color: #fff;
    cursor: pointer
}

.hostinger-ai-block button.hostinger-block-button--is-primary-outline {
    background: transparent;
    border: 1px solid #dadce0;
    color: #673de6
}

.hostinger-ai-block button.hostinger-block-button--is-primary-outline:hover {
    background: #ebe4ff;
    cursor: pointer
}

.hostinger-ai-block button.hostinger-block-button--is-primary-transparent {
    background: transparent;
    border: 0;
    color: #673de6
}

.hostinger-ai-block button.hostinger-block-button--is-disabled {
    position: relative
}

.hostinger-ai-block button.hostinger-block-button--is-disabled:hover {
    background: initial;
    cursor: not-allowed !important
}

.hostinger-ai-block button.hostinger-block-button--is-disabled:after {
    background: hsla(0, 0%, 100%, .7);
    border-radius: 8px;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100
}

.hostinger-ai-block__skeleton {
    padding: 24px 0
}

.hostinger-ai-block__skeleton_heading,
.hostinger-ai-block__skeleton_image,
.hostinger-ai-block__skeleton_paragraph {
    margin-bottom: 36px
}

.hostinger-ai-block__skeleton_heading .skeleton-loader,
.hostinger-ai-block__skeleton_image .skeleton-loader,
.hostinger-ai-block__skeleton_paragraph .skeleton-loader {
    margin-bottom: 16px
}