.cf { 
    width: 100vw; 
    height: 100vh;
}

#form {
    height: 0px;
    overflow: hidden;
}

.cf cf-chat-response text {
    display: flex;
    flex-flow: column;
    align-items: start;
}

.cf cf-chat-response.robot thumb {
    background-image: url('../images/bot-avatar.gif') !important;
}

.cf cf-chat-response.user thumb {
    background-image: url('../images/user-avatar.gif') !important;
}

.cf .conversational-form,
.cf cf-input input, cf-input textarea {
    font-family: "Inter", sans-serif !important;
}

.cf cf-input input[rows='1'], cf-input textarea[rows='1'] {
    height: 60px !important;
}

.cf .cf-progressBar {
    height: 2px;
}

.cf.dark .conversational-form {
    background: #1d1c1b;
}

.cf.dark .conversational-form::before {
    background: linear-gradient(to bottom,#1d1c1b 0,rgba(29,28,27,0) 100%);
}

.cf.dark cf-input {
    background: #1d1c1b;
}

.cf.dark cf-chat-response.robot text > p {
    background: #161615;
}

.cf.dark cf-input-button {
    background: #161615 !important;
}

.cf.dark .cf-button {
    background: #0a0908;
    border-color: #0a0908;
}

.cf.dark cf-radio-button.cf-button[checked="checked"] cf-radio {
    background: #161615;
    border-color: #161615;
}

.cf.dark cf-input input, cf-input textarea {
    background: #0a0908 !important;
}

.cf.dark cf-input[error] input::placeholder,
.cf.dark cf-input[error] textarea::placeholder {
    color: #D03957 !important;
}

.cf.dark .cf-progressBar .bar {
    background-color: rgba(255, 255, 255, 0.7)
}