:root {
    --background-color: #0fb9d0;
    --font-color: #656565;
    --font-color-dark: #2d2d2d;
    --msg-background: #f8f8f8;
    --accent: #0fb9d0;
/*     --accent: #0B67A9; */
    /*--accent2: #0fb9d0;*/
    --accent2: #0fb9d0;
    --accent-dark: #0fb9d0;
    --lighter: #4b4b4b;
    /*--light: #FEFEFF;*/
    --light: #FEFEFF;
    --light2: #b4b4b4;
    --width-1: 970px;
    --width-2: 1160px;
    --font: 'Wix Madefor Display',sans-serif;
    --radius: 10px;
    --radio-border-color: #e0e0e0;
    --radio-hover-color: var(--accent);
    --radio-overlay-bg: #f2f2f2;
    --radio-checked-bg: var(--accent);
    --radio-radius: 50px;
    --filter: invert(53%) saturate(3566%) hue-rotate(148deg);
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

a {
    text-decoration: unset;
    color: var(--accent2);
}

*, *:after, *:before {
    box-sizing: inherit;
}

body {
    font-family: var(--font);
    width: 100%;
    background-color: var(--light);
    color: #222;
    font-size: 17px;
}

pre, code {
    white-space: pre-wrap;
    font-family: "Noto Sans Mono", monospace;
}

main {
    font-weight: 400;
    padding-top: 10px !important;
    color: var(--font-color);
    min-height: 890px;
    opacity: 1;
    transition: opacity .5s ease;
}

input, textarea, button {
    font-family: var(--font);
}

button {
    font-weight: 700;
    /*color: var(--accent2);*/
    color: var(--light);
}

button:disabled {
    opacity: .6 !important;
    cursor: default;
}

/* menu start */

header {
    width: 100%;
    padding: 0;
    margin: 0;
}


.nav-container {
    z-index: 5;
    background: var(--background-color);
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
    /*margin-bottom: 20px;*/
    box-shadow: 34vw 0 0 0 var(--background-color), -34vw 0 0 0 var(--background-color);
}


.nav-mobile .nav-button {
    display: block;
}


.nav-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    pointer-events: none;
    user-select: none;
}



.footer-logo {
    max-width: 351px;
    margin-bottom: 50px
}


.nav-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.showing {
    max-height: 37rem;
    transition: all .5s;
}


.nav-menu li {
    list-style: none;
    position: relative;
    white-space: nowrap;
    padding: 1rem 0 0 0;
}

.nav-menu li:first-child {
    margin-top: 35px;
}
.show li:first-child {
    margin-top: 15px;
}

.nav-menu li span {
    cursor: pointer;
    user-select: none;
}
.nav-menu li a, .nav-menu li span {
    display: block;
    max-width: fit-content;
    color: var(--light);
    text-decoration: none;
    font-weight: 500;
}



.nav-toggle {
    display: block;
    background-color: transparent;
    width: 40px;
    cursor: pointer;
    padding: 4px;
}


.nav-toggle span {
    position: relative;
    display: block;
    height: 3px;
    border-radius: 35px;
    width: 100%;
    margin-top: 0;
    background-color: var(--light);
    transition: all .25s;
}


.nav-toggle span.mrg {
    margin-top: 5px;
}

.nav-toggle.open span:first-child {
    transform: rotate(45deg) translate(6.2px, 6.2px);
}


.nav-toggle.open span:nth-child(2) {
    width: 0;
    opacity: 0;
}


.nav-toggle.open span:last-child {
    transform: rotate(-45deg) translate(5.2px, -5.2px);
}




/* Dropdown */

.nav-menu .dropdown ul {
    display: flex;
    flex-direction: column;
    position: static;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .4s;
    z-index: 2;
}

.nav-menu .dropdown ul.show {
    max-height: 20rem;
    transition: all .4s;
}

.dropdown ul li:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.dropdown ul li:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}


.nav-menu .dropdown li a {
    display: block;
    /*font-size: .875rem;*/
    text-transform: capitalize;
    /*color: var(--main-font-color);*/
    text-decoration: none;
}

.nav-menu .dropdown > span:after {
    content: "";
    width: 28px;
    height: 8px;
    display: inline-block;
    padding-left: 11px;
    transition: transform .4s;
    background: url(/assets/img/icons/arrow-white.svg)no-repeat center;
    background-size: 13px;
    filter: grayscale(1) contrast(2.5);
}


.nav-menu .active.dropdown > span:after {
    transform: rotate(180deg);
}

.nav-menu .dropdown .dropdown > a:after {
    /*// content svg inline */
    content: "";
    font-weight: 900;
    font-size: .875rem;
    padding-left: 5px;
    color: var(--font-color);
}

.nav-menu .dropdown .active.dropdown > span:after {
    content: "\f106";
}


.menu-toggle {
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease;

}

.menu-toggle.active {
    max-height: 100vh;
    transition: all .4s ease;

}

.resize-animation-stopper * {
    transition: none !important;
    animation: none !important;
}

.blog-short {
    overflow: hidden;
    margin-bottom: 20px;
}
.rows {
    margin: 0 -15px;
}
.col-md-4 {
    padding: 0 15px;
}
.card {
    margin-bottom: 20px;
}
.card-img-wide {
    width: 100%;
    height: 325px;
    object-fit: cover;
}
.card-img-wide.full {
    height:100%;
    max-height: 490px;
    margin: 10px 0;
}


.button-short {
    width: fit-content;
}

.clear-chat {
    padding: 4px 2px;
    border: unset;
    font-weight: 400;
    background: unset;
    cursor: pointer;
    color: var(--font-color);
    font-size: 16px;
    height: fit-content;
    margin-bottom: 2px;
}

.plus-wrapper {
    margin-top: 50px;
    margin-left: 0;
    animation: a 20s infinite;
}

.plus-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    animation: rolling 2s linear infinite;
}

@keyframes a {
    0% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(-5px);
    }
}

@keyframes rolling {
    0% {
        left: 0;
        bottom: 0;
        transform: rotate(0deg);
    }
    50% {
        left: 50px;
        bottom: 0;
        transform: rotate(180deg);
    }
    100% {
        left: 0;
        bottom: 0;
        transform: rotate(0deg);
    }
}


@keyframes shake {
    0% { transform: translate(-50%, 0) translateX(0); }
    25% { transform: translate(-50%, -10px) translateX(-15px); }
    50% { transform: translate(-50%, 5px) translateX(15px); }
    75% { transform: translate(-50%, -5px) translateX(-15px); }
    100% { transform: translate(-50%, 0) translateX(0); }
}

@keyframes shake2 {
    0% { transform: translate(0, 0) translateX(0); }
    25% { transform: translate(0, -10px) translateX(-15px); }
    50% { transform: translate(0, 5px) translateX(15px); }
    75% { transform: translate(0, -5px) translateX(-15px); }
    100% { transform: translate(0, 0) translateX(0); }
}

.shaked {
    animation: shake 0.5s linear;
}

.shaked2 {
    animation: shake2 0.5s linear;
}

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

.mode-select-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 10vh 0 5vh;
}

.mode-select-line-inner {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.mode-select-title {
    font-size: 120%;
}
.mode-select-inner{
    position: relative;
    display: block;
}

.mode-select-button {
    background: var(--accent2);
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    font-family: var(--font);
    width: 100%;
    height: 40px;
    border-radius: var(--radius);
    font-size: 120%;
    padding: 0 45px 0 16px;
    transition: color 0.2s ease-in-out;
    min-width: 170px;
    font-weight: 400;
    border: unset;
}

.mode-select-inner::after {
    content: '';
    position: absolute;
    top: 52%;
    right: 17px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #ffffff;
}

.floating-input {
    border: 1px solid #ededed;
    outline: none;
    border-radius: var(--radius);
    width: 100%;
    margin: 0 0 30px;
    padding: 24px !important;
}

.floating-input__wrapper {
    position: relative;
}

.floating-input__wrapper .floating-label {
    position: absolute;
    pointer-events: none;
    top: 28px;
    left: 19px;
    font-size: 17px;
    transition: 0.2s ease all;
    color: var(--lighter);
    line-height: 1.1;
}

.floating-input__wrapper input:focus ~ .floating-label,
.floating-input__wrapper input:not(:placeholder-shown) ~ .floating-label,
.floating-input__wrapper input:-webkit-autofill ~ .floating-label,
.floating-input__wrapper textarea:focus ~ .floating-label,
.floating-input__wrapper textarea:not(:placeholder-shown) ~ .floating-label {
    top: -22px;
    left: 14px;
    font-size: 16px;
}

.floating-input__wrapper input:disabled, .floating-input__wrapper textarea:disabled {
    background: #FFFFFF;
    opacity: .8;
}

.d-none {
    display: none !important;
}
.v-hidden {
    visibility: hidden !important;
}


.image-message {
    margin: 10px 0 5px;
    border-radius: 6px;
    max-width: 100%;
}

.picture img {
    margin: 35px 0;
    max-width: 100%;
    object-fit: fill;
    width: 100%;
    position: relative;
}

.vertical-middle-line {
    z-index: 1;
    box-shadow: 0 0 1px black;
    width: 2px;
    height: 86px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    background: #5bbd63;
}

.footer-link {
    color: var(--light);
}
.footer-link-gray {
    color: var(--light2);
}


/*styles for chat*/
.messages-chat {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.messages {
    border-radius: 35px;
    position: relative;
    width: 100%;
    min-height: 250px;
    background: var(--msg-background);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 0;
    font-size: 16px;
    box-shadow: 0 0 10px rgb(204 204 204 / 7%);
}


.message {
    display: flex;
    flex-direction: column;
    /*background: #f5f5f5;*/
    width: 100%;
    padding: 10px 0;
    min-height: 70px;
    font-weight: 400;
    color: #383f4e;
}

.message:before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    margin-left: 11px;
    background-size: cover;
    /*z-index: 1;*/
}



/*.message-bot:before {*/
/*    background: url(/assets/img/icons/plus-icon.svg) no-repeat center center;*/
/*}*/

.message-bot.load-msg:before {
    background: unset;
}


.message-text {
    white-space: break-spaces;
    margin-left: 10px;
    padding: 10px 20px;
}

/*// different background for user messages */

.message-user {
    border-bottom: 3px solid white;
    border-top: 3px solid white;
    background: #fff;
}

.message-text p {
    margin: 0;
}

.message-bot {
    background: var(--msg-background);
    align-items: flex-start;
}

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

.repeat-msg {
    font-size: 14px;
    border: unset;
    font-weight: 400;
    background: url(/assets/img/icons/repeat.svg)no-repeat left center;
    padding: 1px 15px 2px 26px;
    cursor: pointer;
    color:#0867a9;
    filter: var(--filter);
}

.copy-msg {
    font-size: 14px;
    border: unset;
    font-weight: 400;
    background: url(/assets/img/icons/copy.svg)no-repeat left center;
    padding: 1px 15px 2px 21px;
    cursor: pointer;
    color:#0867a9;
    filter: var(--filter);
}

.stop-msg {
    font-size: 13.3px;
    border: unset;
    font-weight: 400;
    background: url(/assets/img/icons/cross.svg)no-repeat left center;
    padding: 1px 24px 2px 29px;
    cursor: pointer;
    color:#0867a9;
    filter: var(--filter);
}


.copy-msg-copied {
    padding: 1px 15px 2px 27px !important;
    background: url(/assets/img/icons/check.svg)no-repeat left center;
}

.r-w, .stp {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.message-input {
    margin-top: 15px;
    box-shadow: 0 0 10px #37373787;
    border-radius: var(--radius);
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent2);

    /*border-radius: 100px 100px 100px 100px;*/
    /*border-width: 12px;*/
    /*border-color: rgba(255, 255, 255, 0.64);*/
    /*background-color: rgba(255, 255, 255, 0.64);*/
}

.floating-message-input .message-input {
    box-shadow: 0 0 25px 12px #ffffff;
}
.floating-message-input {
    width: 100%;
    max-width: var(--width-1);
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    align-items: flex-end;
    padding: 30px 15px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.message-input input, .message-input textarea {
    margin: 10px 20px;
    font-size: 16px;
    /*overflow-y:hidden;*/
    width: calc(100% - 100px);
    height: 40px;
    padding: 10px;
    border-radius: 5px;
    /*border: 1px solid #ccc;*/
    outline: none;
    resize: none;
    line-height: 1.3;
    background: unset;
    border: unset;
    color: var(--light) !important;
}
.message-input input, .message-input textarea::placeholder {
    color: #d2d2d2;
}

.message-input button {
    width: 70px;
    height: 40px;
    padding: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    border: none;
    outline: none;
    background: var(--accent2);
    cursor: pointer;
    color: var(--light);
}

.message-label {
    display: none;
    margin-left: 30px;
    font-weight: bold;
    color: #1D386A;
    font-size: 14px;
}

.message-bot .message-label {
    display: block;
}

.load-msg .message-label {
    display: none;
}

/*chat end*/

.modes-list {
    max-height: 41vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: -18px;
    min-height: 316px;
    align-items: center;
}

.mode-item {
    width: 100%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    border: unset;
    background: #13cec7;
    padding: 10px 0;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
}


.accent-color {
    color: var(--accent) !important;
}

.chat-submit:disabled {
    cursor: default;
}

.dots-loading {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.dots-loading span {
    opacity: 0;
    display: block;
    animation: appear 2s infinite;
}

.dots-loading span:nth-child(1) {
    animation-delay: 0.5s;
}

.dots-loading span:nth-child(2) {
    animation-delay: 1s;
}

.dots-loading span:nth-child(3) {
    animation-delay: 1.5s;
}

@keyframes appear {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.input-icon {
    width: 23px;
    margin-top: 7px;
    margin-right: 5px;
}

.color-rotated {
    filter: contrast(3.4) hue-rotate(220deg);
}


input[type="radio"].fancy-radio {
    display: none;
}

.fancy-radio-outer label {
    display : flex;
    gap :1em;
    align-items : center;
    padding: 10px 10px 10px 0;
}

.radio-container {
    width: 32px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radio-radius);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}

.radio-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radio-radius);
    background: var(--radio-border-color);
    position: relative;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.radio-inner:hover {
    box-shadow: inset 0 0 0px 9px var(--radio-hover-color);
}

.radio-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: var(--radio-radius);
    transform: translate(-50%, 0);
    background: var(--radio-overlay-bg);
}

.fancy-radio:checked + label > .radio-container > .radio-inner > .radio-overlay {
    background: var(--radio-checked-bg);
    animation: expand 0.3s ease-in-out forwards;
}

@keyframes expand {
    0% {
        width: 0;
    }
    100% {
        width: 60%;
    }
}


.button {
    background: var(--accent2);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 30px;
    color: white;
    border-radius: var(--radius);
    text-decoration: unset;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border:unset;
}

.button.grayed {
    background: unset;
    color: var(--accent2);
    border: 2px solid var(--accent2);
}

.popup-accent-button {
    margin-top: 25px;
    font-size: 14px;
    font-weight: 500
}

.popup-clean-button {
    background: unset;
    color: var(--accent);
    font-weight: 500;
    font-size: 14px;
    margin-top: 25px;
}

.history-button {
    min-width: 185px;
    color: var(--accent);
    border-radius: 16px 16px 0 0;
    background: unset;
    box-shadow: 0 0 0 1px var(--accent);
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
}

.history-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 140px;
}


/* menu end */

/* footer start */

.footer__wrapper {
    max-width: var(--width-2);
    margin: auto;
    display: flex;
    flex-flow: row wrap;
}

.footer {
    flex-direction: column;
    margin-top: 70px;
    display: flex;
    padding: 30px 30px 20px 30px;
    color: #2f2f2f;
    background-color: #32444d;
}

.footer__wrapper > * {
    flex:  1 100%;
}

.footer__addr {
    margin-right: 1.25em;
    margin-bottom: 2em;
}

.footer__logo {
    font-weight: 400;
    text-transform: lowercase;
    font-size: 1.5rem;
}

.nav__title {
    font-weight: 400;
    font-size: 15px;
}

.footer address {
    font-style: normal;
    color: #999;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}


.footer li {
    margin: 4px 0 6px 0;
    /*line-height: 2em;*/
}

.modes-list li {
    /*max-height: 0;*/
    /*margin: 4px 0 6px 20px;*/
    visibility: hidden;
    margin: 0;
    padding: 0;
    max-height: 0;
}

.footer a {
    text-decoration: none;
}

.footer__nav {
    column-gap: 25px;
    display: flex;
    flex-flow: row wrap;
}

.footer__nav > * {
    flex: 1 50%;
    margin-right: 1.25em;
}

.nav-ul li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 155px;
}


.nav-ul .colored {
    color: var(--accent2);
}

.nav__ul--extra {
    column-count: 2;
    column-gap: 1.25em;
}

.footer-info {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    color: var(--light);
}

div.question-item {
    position: relative;
    margin-bottom: 1.5em
}

.question-input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0
}

.question-header {
    transition: all .3s ease;
    font-weight: 500;
    font-size: 21px;
    color: var(--accent);
    position: relative;
    border-radius: var(--radius);
}

@keyframes rotate {
    0%   {transform: rotate3d(4, -7, 1, 10deg);}
    100% {transform: translateX(7px)}
}


.question-item:last-child .question-header {
    border: unset
}

.question-label:before {
    transition: all .5s;
    padding: 0.4rem 1rem 0.4rem 0;
    content: "🌀️";
    display: inline-block
}

.question-label {
    padding: 1rem 1rem 1rem 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center
}

.question-text {
    color: var(--lighter);
    line-height: 1.4;
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease;
}


div.question-text p {
    font-size: 18px;
    padding: 14px 20px 0
}

input:checked~div.question-header {
    /*animation: rotate .5s cubic-bezier(0.57, -0.24, 0.64, 1.29) forwards;*/
    /*transform: translateX(7px)*/
}

input:checked~div~div.question-text {
    max-height: 800px;
    transform: translateX(7px)
}

input:checked~div .question-label:before {
    transform: rotate(-180deg) translate(10px,-4px)
}

.form__button {
    font-weight: 700;
    font-size: 110%;
    font-family: var(--font);
    width: 100%;
    border-radius: 10px;
    min-height: 71px;
    border: unset;
    text-transform: uppercase;
}

.form__confirm-text {
    color: gray;
    margin-top:10px;
}

/*chat start*/

.limits-info {
    opacity: 1;
    font-size: 110%;
    color: var(--font-color);
    padding: 20px 0;
    transition: opacity 0.5s ease;
    /*color: var(--lighter);*/
}


/* popup start */

.popup {
    z-index: 20;
    color: white;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(4 37 66 / 44%);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    /*overflow-y: hidden;*/
    overflow-x: hidden;
    transition: all 0.8s ease 0s;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
}

.lock {
    overflow: hidden;
}

.popup.open {
    opacity: 1;
    visibility: visible;
}

.popup.open .popup__body {
    opacity: 1;
    pointer-events: unset;
    transform: perspective(600px) translate(0px, 0) rotateX(0deg);
}

.soft_background {
    background-color: #ebe9e1;
}

.popup__body {
    border-radius: var(--radius);
    width: inherit;
    background-color: var(--light);
    color: #000;
    margin: auto;
    max-width: 1210px;
    padding: 30px;
    position: relative;
    transition: all 0.4s ease 0s;
    opacity: 0;
    pointer-events: none;
    /*transform: perspective(600px) translate(0px, -100%) rotateX(45deg);*/
}


.popup__close {
    position: absolute;
    right: 20px;
    top: 32px;
    width: 30px;
    height: 40px;
    transition: all 0.3s ease 0s;
    opacity: 0.5;
    cursor: pointer;
}

.popup__close::before,
.popup__close::after {
    content: '';
    position: absolute;
    top: 12px;
    display: block;
    width: 29px;
    height: 1px;
    background-color: #000;
}

.popup__close::before {
    transform: rotate(-45deg);
}

.popup__close::after {
    transform: rotate(45deg);
}

.popup__close:hover {
    opacity: 1;
}

/* popup end */

.container {
    max-width: var(--width-1);
    margin: 0 auto;
    padding: 0 15px;
    line-height: 1.6;
}

main ul, main ol {
    margin-left: 25px;
    margin-top: 5px;
}

main p {
    margin-bottom: 1rem;
}

main h1, main .h1, .h1 {
    color: #4d6877;
    margin: 100px 0 24px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

/*.main-h1 {*/
/*    margin-right: 20vw;*/
/*    text-shadow: 0 0 25px #aad2da;*/
/*}*/

.hero-outer {
    background: url('/assets/img/frame.svg') no-repeat center center;
    background-size: cover;
    height: 350px;
    width: 100%;
    position: relative;
    /*margin-bottom: 20px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

main h2, .h2, main .h2 {
    font-size: 24px;
    line-height: 1.2;
}

main h3 {
    font-size: 21px;
    line-height: 1.2;
}

main h4 {
    font-size: 20px;
    line-height: 1.2;
}

main h5 {
    font-size: 19px;
    line-height: 1.2;
}

main h6 {
    font-size: 17px;
    line-height: 1.2;
}

main h2,
main h3, main h4,
main h5, main h6, .h2, main .h2 {
    margin: 32px 0 20px;
    color: var(--font-color-dark);
    font-weight: 700;
    /*scroll-margin-top: 85px;*/
}

.content a {
}


.breadcrumb a {
    /* filter: contrast(1); */
    color: var(--accent2);
    text-decoration: none;
}


.get-prize-button {
    padding: 10px 36px;
    transition: .5s;
    font-size: 17px;
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
}


/*default table styles*/

table {
    /*font-size: 15px;*/
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table td, table th {
    padding: 7px;
    border: 1px solid #d9d9d9;
}

table th {
    font-weight: 400;
    padding: 7px 7px 7px 20px;
    background: #ccdae3;
}

.fat-height {
    height: 48px;
}

.popup-header {
    margin-top: unset !important;
    margin-bottom: 40px !important;
}


table tbody {
    background: rgba(245, 245, 245, 0.66);
}

table td img {
    max-width: 100%;
}

table .text-center {
    text-align: center;
}

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

table .text-left {
    text-align: left;
}

table .text-justify {
    text-align: justify;
}

table .text-nowrap {
    white-space: nowrap;
}

table .text-nowrap td {
    white-space: nowrap;
}

table .text-nowrap td:first-child {
    white-space: normal;
}

table .text-nowrap td:last-child {
    white-space: normal;
}

/*table ul li margin left*/

table ul li {
    margin-left: 15px;
}

.opacity-0, .opacity-0_ {
    opacity: 0;
    pointer-events: none;
}

.start-message p {
    opacity: 1;
    transition: opacity .9s ease;
}

.chat-input-hidden::placeholder {
    opacity: 0;
    transition: opacity .9s ease;
}

.start-message-hidden p {
    opacity: 0;
}

.wrapper-500 {
    max-width: 500px;
}
.button-type1 {
    font-size: 15px;
    display: inline-block;
    padding: 0px 31px;
    height: 31px;
    border-radius: 25px;
    background: unset;
    /*border: 2px solid var(--accent2);*/
    border: unset;
    color: var(--accent2);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 20px;
}

.message-box a {
    text-decoration: underline;
}
.message-box {
    display: flex;
    gap: 16px;
    text-align: center;
    flex-direction: column;
    box-shadow: 0 0 30px #f3efef;
    width: fit-content;
    border-radius: 85px;
    background: rgb(3 111 162 / 11%);
    padding: 45px 25px 25px;
    margin: 164px auto auto;
}

.login-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/*styles for price cards*/
.prices-container {
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 740px;
    margin: auto
}

.prices-container-outer {
    max-width: fit-content;
    margin: auto
}

.price-card {
    width: 230px;
    height: 265px;
    background-color: #fff;
    box-shadow: 0 0 30px #f3efef;
    border-radius: 30px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 13px
}

.gray-select {
    width: clamp(82%, 100%, 200px);
    height: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 13px;
    padding: 0 10px;
    font-size: 14px;
    font-family: var(--font);
    color: #333;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path fill='gainsboro' d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat;
    background-position-x: 99%;
    background-position-y: 2px;
}



.card-title {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
}

.card-title-info {
    font-size: 14px;
    font-weight: bold;
}

.card-title-description {
    margin-top: 5px;
    font-size: 13px;
    text-align: center;
}

/*.card-pricing-outer {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    gap: 10px;*/
/*}*/

.card-sale {
    color: #8c8989;
    border-radius: 100px;
    font-weight: 500;
    width: fit-content;
    padding: 0 10px;
    font-size: 94%;
    margin: auto;
    margin-top: -7px;
}
.card-sale:before {
    background-color: #8c8989;
    content: "";
    display: block;
    height: 1px;
    margin-top: 14px;
    position: absolute;
    width: 109px;
}

.card-pricing {
    display: flex;
    /*padding-bottom: 15px;*/
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.price {
    font-size: 25px;
    font-weight: 500;
}

.price-currency {
    font-size: 15px;
}

.sale-msg {
    font-size: 13px;
    background-color: #f5f5f5;
    padding: 2px 10px;
    border-radius: 5px;
}

.price-card-buy-button {
    width: 100%;
    height: 40px;
    background-color: var(--accent2);
    color: #fff;
    border: none;
    border-radius: 26px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select-short-wrapper {
    margin-bottom: unset;
    width: 200px;
}
.select-short-wrapper select {
    font-weight: 500;
    font-size: 95%;
}

.select-short {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: unset;
    outline: unset;
    font-size: 16px;
}

.footer__nav > * {
    flex: 1;
}

.nav-item-extra {
    flex-grow: 2;
}

.footer__addr {
    flex: 1 0;
}

.footer__nav {
    flex: 2 0;
}

/*.stop-request {*/
/*    padding: 10px 5px;*/
/*    border: unset;*/
/*    border-radius: 5px;*/
/*    font-weight: 300;*/
/*    font-size: 16px;*/
/*    background: unset;*/
/*    cursor: pointer;*/
/*    color: var(--lighter);*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    gap: 3px;*/
/*}*/

.red {
    color: #9d1212!important;
}

.show-on-less-750 {
    display: none;
}

.font-100 {
    font-size: 100%;
}

.footer-links-flex {
    display: flex;
    flex-wrap: wrap;
    column-gap: 70px;
}

.login-input {
    font-size: 17px;
}


.label-edit {
    font-weight: 400;
    border: unset;
    background: unset;
    position: absolute;
    right: 16px;
    color: var(--accent);
    font-size: 12px;
    line-height: 40px;
    cursor: pointer;
    transform: translateY(35%);
}

.next-button {
    background: var(--accent2);
    width: 100%;
    border: 0;
    font-weight: 500;
    min-height: 71px;
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 17px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.next-button:hover, .next-button:active, .next-button:focus {
    opacity: .9;
}

.fancy-radio-outer label {
    display: flex;
    gap: 1em;
    align-items: center;
    padding: 10px 10px 10px 0
}

.radio-container {
    width: 32px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.1)
}

.radio-container,.radio-inner,.radio-overlay {
    aspect-ratio: 1;
    border-radius: var(--radio-radius)
}

.radio-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--radio-border-color);
    position: relative;
    box-sizing: border-box;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    cursor: pointer
}

.radio-inner:hover {
    box-shadow: inset 0 0 0 9px var(--radio-hover-color)
}

.radio-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    transform: translate(-50%,-50%);
    background: var(--radio-overlay-bg)
}

.fancy-radio:checked+label>.radio-container>.radio-inner>.radio-overlay {
    background: var(--radio-checked-bg);
    animation: expand .3s ease-in-out forwards
}

.select-short-wrapper {
    margin-bottom: unset;
    width: 250px
}

.select-short {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: unset;
    outline: unset;
    font-size: 16px
}


.outlined-select {
    /*background: var(--accent);*/
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--accent);
    border: 3px solid var(--accent);
    font-family: var(--font);
    width: 100%;
    height: 40px;
    border-radius: 50px;
    font-size: 120%;
    padding: 0 40px 0 16px;
    transition: color .2s ease-in-out;
    min-width: 170px
}

.outlined-select-outer::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--accent);
}

.outlined-select-outer {
    position: relative;
    display: block;
    width: 225px;
}

.item-row {
    gap: 25px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.item-title {
    width: 150px;
    font-size: 110%;
}

.pay-button {
    margin-top: 50px;
    border-radius: 26px;
    background-color: var(--accent);
    color: white;
    font-size: 110%;
    border: none;
    cursor: pointer;
    min-width: 40%;
    min-height: 50px;
}

.bright {
    color: var(--accent2);
    font-weight: bold;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 40px;
}

table, th, td {
    border: 1px solid #e0e0e0;
}

th, td {
    padding: 10px;
    text-align: left;
}

.table-buttons {
    flex-wrap: wrap;
    gap: 5%;
    display: flex;
    margin-bottom: 40px;
}

.table-buttons-popup {
    margin-bottom: unset;
    margin-top: -15px;
}

.table-button {
    width: 30%;
    padding: 13px 0;
}

/*// disable vertical borders*/
td, th, table {
    border: none !important;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.login-page {
    max-width: 405px;
    /* padding: 8% 0 0; */
    margin: auto;
}

.login-inner {
    min-height: 50vh;
    line-height: 1.1;
    position: relative;
    /*z-index: 1;*/
    margin: 0 auto 60px;
    padding: 40px;
    padding-top: 0;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 280px;
}


.input-error {
    border: 2px solid #e10000 !important;
}

.input-ok {
    border: 2px solid #1bb52e !important;
}

.padding-right-60 {
    padding-right: 60px !important;
}

.error-icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    vertical-align: -2px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 14.667A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.334z' fill='%23D00E17' stroke='%23D00E17' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 4.583a.75.75 0 0 1 .75.75V8a.75.75 0 0 1-1.5 0V5.333a.75.75 0 0 1 .75-.75z' fill='%23fff'/%3E%3Cpath d='M8.667 10.667a.667.667 0 1 1-1.334 0 .667.667 0 0 1 1.334 0z' fill='%23fff'/%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 16px;
}

.login-text {
    display: block;
    margin: 39px 0 0;
    color: var(--lighter);
}

.login-error-text {
    margin: -20px 0 35px;
    color: #d00e17;
}

.login-link {
    color: var(--accent2);
    font-weight: 800;
    text-decoration: none;
}


.login-ok-text {
    color: #11a925;
}

.captcha-outer {
    border: 1px solid #ededed;
    display: flex;
    min-height: 72px;
    min-width: 120px;
    background: white;
    border-radius: 100px;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.c-inner {
    overflow: hidden;
    max-height: 35px;
    max-width: 100px;
    /*transform: scale(0.8);*/
}

.c-img {
    max-width: 100px;
    transform: translateX(-4px) translateY(-5px);
}

.c-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.forget-password {
    margin: auto auto 25px;
    width: fit-content;
    text-align: center;
    color: var(--accent);
}

.search-bar {
    background: #fff;
    height: 38px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    border: unset;
    box-shadow: 0 0 3px #9d9d9d;
    margin-bottom: 14px;
}

.not-found {
    margin-top: 30px;
    color: #8d8d8d;
    font-size: 87%;
}


input[type=search]::-webkit-search-cancel-button {
    /* Remove default */
    -webkit-appearance: none;
    margin-right: -6px;
    height: 39px;
    width: 39px;
    display: block;

    background-image: url('data:image/svg+xml,\
  <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">\
  <path d="M19.5003 32.8333C26.8641 32.8333 32.8337 26.8638 32.8337 19.5C32.8337 12.1362 26.8641 6.16663 19.5003 6.16663C12.1365 6.16663 6.16699 12.1362 6.16699 19.5C6.16699 26.8638 12.1365 32.8333 19.5003 32.8333Z" stroke="gainsboro" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round"/>\
    <path d="M14.5 14.5L24.5 24.5" stroke="gainsboro" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
    <path d="M24.5 14.5L14.5 24.5" stroke="gainsboro" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
  </svg>');

    background-repeat: no-repeat;
    background-size: 39px;
    cursor: pointer;
}

input[type=search].search-bar::-webkit-search-cancel-button {
    background-image: url('data:image/svg+xml,\
  <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">\
    <path d="M14.5 14.5L24.5 24.5" stroke="gainsboro" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
    <path d="M24.5 14.5L14.5 24.5" stroke="gainsboro" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
  </svg>');
}

@media  (min-width: 800px) {
    .menu-toggle {
        display: flex !important;
        max-height: 100vh;
        overflow: visible
    }

    .nav-menu li:first-child {
        margin-top: unset;
    }

    .nav-container {
        min-height: 145px;
        width: 100%;
        max-width: var(--width-2);
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        padding: 12px 30px;
        /*margin-bottom: 20px;*/
    }

    .nav-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 430px;
    }

    .nav-mobile .nav-button {
        display: none;
    }

    .nav-menu {
        display: flex;
        flex-direction: row;
        max-height: 100%;
        overflow: visible;
    }

    .nav-menu li {
        list-style: none;
        position: relative;
        white-space: nowrap;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .nav-menu li a, .nav-menu li span {
        font-size: 1.1rem;
        color: var(--light);
        text-decoration: none;
        padding: unset;
    }


    /* Dropdown */
    .nav-menu .dropdown {
        position: relative;
    }

    .nav-menu .dropdown ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: -30px;
        opacity: 0;
        visibility: hidden;
        overflow: visible;
        padding: 0 1rem;
        transition: all .4s ease ;
    }


    .nav-menu .dropdown ul.show {
        top: 100%;
        right: 0;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        padding: 0 1rem;
        display: flex;
        align-items: flex-end;
    }



    .nav-menu .dropdown ul li {
        padding: 0;
        background-color: var(--accent2);
        position: relative;
        min-width: 96px;
    }

    .nav-menu .dropdown ul li:hover {
        background-color: var(--accent2);
    }

    .nav-menu .dropdown ul li a {
        padding: .7rem;
        display: block;
        color: #fff;
        text-transform: capitalize;
    }


    .nav-menu .dropdown > a:after {
        content: "\f107";
        font-weight: 900;
        font-size: .875rem;
        padding-left: 5px;
        color: var(--font-color);
    }


    .nav-menu .dropdown:hover > a:after {
        content: "\f106";
        font-weight: 900;
        font-size: .875rem;
        padding-left: 5px;
        color: var(--font-color);
    }



    .nav-menu .dropdown .dropdown > a:after {
        content: "\f105";
        font-weight: 900;
        font-size: .875rem;
        padding-left: 10px;
        color: rgb(255, 255, 255);
    }



    .nav-menu .dropdown .dropdown:hover > a:after {
        content: "\f104";
        font-weight: 900;
        font-size: .875rem;
        padding-left: 10px;
        color: rgb(255, 255, 255);
    }


    /* 2nd level dropdown */

    .nav-menu .dropdown .dropdown:hover > ul {
        position: absolute;
        top: 0;
        right: calc(100% - 17px);
        left: auto;
        opacity: 1;
        visibility: visible;
    }

    .nav-menu .dropdown .dropdown ul {
        position: absolute;
        top: 0;
        right: calc(100% - 17px);
        left: auto;
        opacity: 0;
        visibility: hidden;
        transition: all .4s ease-in-out;
    }



}



@media (min-width: 1020px) {
    .footer__wrapper {
        min-width: 973px;
    }
    .message-input {
        width: 110%;
        margin-left: -5%;
        margin-right: -5%;
    }
}


@media (max-width: 1090px) {

    .hide-on-less-1040 {
        display: none;
    }
    .nav-menu li {
        padding: 1rem .5rem;
    }
    .show li {
        padding: .7rem;
    }
}


@media (max-width: 1020px) {
    .hide-on-less-1020 {
        display: none;
    }

    .left-block {
        min-height: 400px;
        padding: 20px 15px;
    }

    .two-blocks-horizontal {
        flex-direction: column;
    }


    .main-photo-block {
        width: 90%;
        margin: auto;
    }
}

@media (max-width: 940px) {

    .hide-on-less-940 {
        display: none;
    }

    .nav-mobile {
        min-width: 240px;
    }
}

@media (max-width: 870px) {
    .footer-logo {
        max-width: 220px;
    }
    .footer__nav > * {
        flex: unset;
    }

    .footer__nav {
        flex: unset;
    }
    .footer__nav {
        flex-direction: column;
    }
    .footer-logo {
        margin-right: 13px;
    }
    .popup__body {
        max-width: 100vw;
    }

    .cards__wrapper {
        flex-direction: column;
        padding: 0 20px;
        align-items: center;
    }
    .block {
        width: 47%;
    }
}
@media (max-width: 750px) {
    .login-inner {
        padding: 45px 20px;
        padding-top: 0;
        margin-top: -75px;
        margin-bottom: 20px;

    }
    .item-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .pay-button {
        min-width: 80%;
    }
    .show-on-less-750 {
        display: unset;
    }
    .r-w {
        margin-top: 15px;
    }
    .footer__nav {
        flex-direction: unset !important;
    }
    .draw-button-other {
        width: 100%;
    }

    .hide-on-less-750 {
        display: none;
    }
    .select-short-wrapper {
        width: 80%;
    }


}

@media (max-width: 480px) {
    .header-logo {
        width: 270px;
        object-fit: contain;
    }
    .history-button {
        margin-bottom: -12px;
        width: 99%;
        padding: 16px 25px 25px !important;
    }

    .hero-outer {
        height: 200px;
    }


    .mode-select-button, .mode-select-title {
        font-size: calc(12px + 38*((100vw - 320px)/875));
    }

    .dropdown__items li {
        font-size: 16px;
        line-height: 1.6em;
    }

    .message-input input, .message-input textarea {
        min-height: 44px;
        width: 100%;
        margin: auto;
        padding: 12px 18px;
    }
    .hide-on-less-480 {
        display: none;
    }

    .footer-logo {
        margin-right: unset;
    }
    .footer-logo img {
        max-width: 145px;
    }

    .input-name, .input-phone {
        font-size: 17px;
    }
    .offer-form__container {
        padding: 5px;
    }
    main h1, main .h1, .h1 {
        font-size: 26px;
    }
    .block {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .button {
        font-size: 85%;
        padding: 10px 25px;
    }
}