::-webkit-scrollbar {
    border-radius: 10px;
    width: 10px;
    background-color: transparent;
    border: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.212);
    border: 1px solid rgba(128, 128, 128, 0.678);
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);

    /*background-color: #1c1d25;*/
}

.main {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 0 15px;

}

.main span {
    color: black;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px;
    font-size: 12px;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: 10px;
}

.chat {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    height: 500px;
    overflow-y: scroll;
}

.left-chat {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: left;
    flex-direction: column;
    align-items: start;
}

.chat-block {
    background: #D6E6FF;
    /* background: linear-gradient(0deg, #C2FFD7 0%, #C2FFD7 100%), #D1FEDD; */
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 3px 3px 0px rgba(0, 0, 0, 0.09), 0px 6px 4px 0px rgba(0, 0, 0, 0.05), 0px 11px 4px 0px rgba(0, 0, 0, 0.01), 0px 18px 5px 0px rgba(0, 0, 0, 0.00), 0px 18px 5px 0px rgba(0, 0, 0, 0.00), 0px 18px 5px 0px rgba(0, 0, 0, 0.00);
    border-radius: 4px 26px 26px 26px;
    padding: 16px 20px 22px 16px;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    max-width: 70%;
    color: #1D1F24;
    margin-top: 5px;
    margin-bottom: 5px;
}

.horizontal,
.vertical {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin-top: 10px;
}

.answer-btn {
    width: 49%;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background: #EF3124;
    border: 2px solid #EF3124;
    border-radius: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    transition: all 0.3s ease-in-out;
    margin-bottom: 10px;
    cursor: pointer;
}

.answer-btn:hover {
    color: #fff;
}

.right-chat .chat-block {
    border-radius: 26px 4px 26px 26px;
}

.right-chat {
    justify-content: right;
    flex-direction: row-reverse;

    display: flex;
    align-items: center;
    margin-top: 10px;
}

.vertical {
    justify-content: left;
    flex-direction: column;
}

.vertical .answer-btn {
    width: 300px;
}

form {
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 3px 3px 0px rgba(0, 0, 0, 0.09), 0px 6px 4px 0px rgba(0, 0, 0, 0.05), 0px 11px 4px 0px rgba(0, 0, 0, 0.01), 0px 18px 5px 0px rgba(0, 0, 0, 0.00), 0px 18px 5px 0px rgba(0, 0, 0, 0.00), 0px 18px 5px 0px rgba(0, 0, 0, 0.00);
    margin-top: 5px;
    margin-bottom: 5px;
    background: #FFF6D0;
    border: 1px solid #EF3124;
    border-radius: 4px 26px 26px 26px;
    padding: 16px 20px 22px 16px;
}

form .form-input {
    margin-bottom: 5px;
    width: 100%;
}

form input {
    width: 100%;
    border: 0.5px solid #A9A9A9;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 10px;
}

form button {
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background: #EF3124;
    border: 2px solid #EF3124;
    border-radius: 10px;
    padding: 14px 25px;
    transition: all 0.3s ease-in-out;
    margin: 10px auto;
    cursor: pointer;
}

.right-chat {
    display: none;
}

.left-chat {
    display: none;
}

.chat-block {
    display: none;
}

.horizontal,
.vertical {
    display: none;
}

@media (max-width: 500px) {
    form {
        max-width: 330px;
        margin: 0 auto;
    }

    form input {
        /*width: 300px; */
    }
}