@charset "UTF-8";



@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/metropolis/Metropolis-Bold.woff2') format('woff2'),
        url('../fonts/metropolis/Metropolis-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/metropolis/Metropolis-Regular.woff2) format('woff2');
}


.cbot-dialog,
.cbot-dialog-button .title {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-chat .avatar img,
.cbot-chat .day,
.cbot-dialog-head,
.cbot-msg img,
.cbot-msg time {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.cbot-remove {
    display: none
}

.cbot-spinner-overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 999999999999999999;
    bottom: 25px;
    right: 20px;
    width: 350px;
    height: 85%;
    border-radius: 10px;
    display: none;
}

.cbot-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    display: none
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.cbot-dialog {
    background-color: #fff;
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 350px;
    height: 85%;
    border-radius: 10px;
    box-shadow: 0 0 10px #efefef;
    z-index: 999999999;
    font-size: 14px;
    color: #333;
    /* overflow: hidden */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.cbot-dialog-speech {
    background-color: #fff;
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 350px;
    height: 85%;
    border-radius: 10px;
    box-shadow: 0 0 10px #efefef;
    z-index: 0;
    font-size: 14px;
    color: #333;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#particles-thinking {
    height: 30px;
    width: 30px;
    margin-top: 50px;
    opacity: 0;
    animation: rotateAndScale 6s ease-in-out infinite;
}

@keyframes rotateAndScale {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.25);
    }
    50% {
        transform: rotate(180deg) scale(1.5);
    }
    75% {
        transform: rotate(270deg) scale(1.25);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}
#particles-thinking img {
    height: 30px;
    width: 30px;
}

/* Animasyon sınıfları - Basit fade */
.cbot-dialog.fade-out {
    opacity: 0 !important;
    z-index: -1 !important;
}

.cbot-dialog-speech.fade-in {
    opacity: 1 !important;
    z-index: 9999999 !important;
}

.cbot-dialog-speech.fade-out {
    opacity: 0 !important;
    z-index: -1 !important;
}

.cbot-dialog.fade-in {
    opacity: 1 !important;
    z-index: 9999999 !important;
}

.cbot-dialog a {
    text-decoration: none;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-close-icon-new {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 19px;
    border-radius: 5px;
    font-weight: 700;
    background: url(../img/flat/cbot-close-4.svg) no-repeat;
    background-size: 10px;
    /* background-color: lightgray; */
    background-position: center;
    width: 21px;
    height: 21px;
}

.cbot-refresh-icon {
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 19px;
    border-radius: 5px;
    font-weight: 700;
    background: url(../img/flat/cbot-refresh-icon.svg) no-repeat;
    background-size: 15px;
    background-position: center;
    width: 21px;
    height: 21px;
}

.cbot-minimize-icon {
    cursor: pointer;
    position: absolute;
    right: 39px;
    top: 19px;
    border-radius: 5px;
    font-weight: 700;
    background: url(../img/cbot-minimize-icon.svg) no-repeat;
    background-size: 13px;
    background-position: center;
    width: 21px;
    height: 21px;
}

.cbot-mute-icon {
    cursor: pointer;
    position: absolute;
    right: 45px;
    top: 19px;
    border-radius: 5px;
    font-weight: 700;
    background: url(../img/flat/cbot-volume-unmute.svg) no-repeat;
    background-size: 15px;
    /* background-color: lightgray; */
    background-position: center;
    width: 21px;
    height: 21px;
    display: none;
}

/* Preloading */
body::after {
    content: url(../img/flat/cbot-close-new.svg) url(../img/flat/send-active.png) url(../img/flat/send-disabled.svg) url(../img/flat/askquestion2.svg);
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

.cbot-help-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 22px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cbot-close-new.svg) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
}

.cbot-help-icon:hover {
    color: #fff;
    /* background: #042f67; */
}

/* .cbot-cog-icon {
    color: #042f67;
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cog.png) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
} */

/* .cbot-cog-icon {
    color: #042f67;
    cursor: pointer;
    position: absolute;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/askquestion2.svg) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
} */

.cbot-cog-icon {
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 19px;
    border-radius: 7px;
    font-weight: 700;
    background: url(../img/flat/cbot-question-2.svg) no-repeat;
    background-size: 12px;
    /* background-color: lightgray; */
    background-position: center;
    width: 21px;
    height: 21px;
}

.cbot-cog-icon:hover {
    color: #fff;
    /* background: #042f67; */
}

#help-back-icon {
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 19px;
    border-radius: 7px;
    font-weight: 700;
    width: 21px;
    height: 21px;
}

.cbot-dialog-button,
.cbot-dialog-icon {
    position: fixed;
    background: linear-gradient(to bottom right, #2754b9, #00326c);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    z-index: 999999999
}

.cbot-dialog-icon {
    bottom: 10px;
    right: 0;
    width: 300px;
    height: 150px;
    background-size: contain
}

.cbot-help {
    /* width: 100%; */
    height: 100%;
    margin-top: 0;
    overflow: hidden;
    padding-top: 0;
    background-color: #fff;
    color: #1d3974;
    padding: 10px 10px;
    display: none;
}

.cbot-help-text {
    height: calc(100% - 100px);
    word-break: break-word;
    overflow-y: auto;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
    color: black;
}

.cbot-help #calculate-exchange-icon {
    left: 0;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) !important
}

.cbot-help #banking-icon {
    left: 32px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -32px 0 !important
}

.cbot-help #tl-icon {
    left: 64px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -64px 0 !important
}

.cbot-help #credit-card-icon {
    left: 96px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -96px 0 !important
}

.cbot-help #atm-icon {
    left: 128px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -128px 0 !important
}

.cbot-help #digital-banking-icon {
    left: 224px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -224px 0 !important
}

.cbot-help #calculate-credit-icon {
    left: 160px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -160px 0 !important
}

.cbot-help #deposit-icon {
    left: 192px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -192px 0 !important
}

.cbot-overlay-help-collapse-on {
    overflow: hidden;
    transition: transform 0.3s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
}

.cbot-overlay-help-collapse-off {
    transform: scaleY(0);
}

.cbot-dialog-help-menu-help {
    width: 192px;
    border-radius: 15px;
    background: #5d709a;
    color: #ffffff;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    position: absolute;
    z-index: 99999;
    bottom: 0;
    text-align: center;
    bottom: 78px;
    left: 7px;
    padding: 8px 0;
    display: none;
}

.cbot-overlay-text {
    height: 75%;
}

.cbot-feedback-textarea:-webkit-scrollbar-track,
#cbot-form-message:-webkit-scrollbar-track,
.cbot-help-text:-webkit-scrollbar-track,
.cbot-list-scrollable:-webkit-scrollbar-track,
#cbot-chat::-webkit-scrollbar-track,
.cbot-overlay-text::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #FFF;
}

.cbot-feedback-textarea::-webkit-scrollbar,
#cbot-form-message::-webkit-scrollbar,
.cbot-help-text::-webkit-scrollbar,
.cbot-list-scrollable::-webkit-scrollbar,
#cbot-chat::-webkit-scrollbar,
.cbot-overlay-text::-webkit-scrollbar {
    width: 6px;
    background-color: #FFF;
}

.cbot-feedback-textarea::-webkit-scrollbar-thumb,
#cbot-form-message::-webkit-scrollbar-thumb,
.cbot-help-text::-webkit-scrollbar-thumb,
.cbot-list-scrollable::-webkit-scrollbar-thumb,
#cbot-chat::-webkit-scrollbar-thumb,
.cbot-overlay-text::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 5px;
}

.cbot-doc-content:-webkit-scrollbar-track,
.cbot-dropdown-content:-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar,
.cbot-dropdown-content::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar-thumb,
.cbot-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 5px;
    cursor: pointer;
}

.cbot-dialog-help-menu-help:before {
    border: 5px solid #5d709a;
    content: '';
    position: absolute;
    bottom: -5px;
    left: 15px;
    transform: rotate(45deg);
}

.cbot-dialog-button {
    bottom: 10px;
    right: -270px;
    width: 270px;
    height: 100px;
    background-size: contain;
    z-index: 999999999
}

.cbot-dialog-button .icon {
    width: 61px;
    height: 66px;
    margin-top: 20px;
    margin-left: 20px;
    float: left
}

.cbot-dialog-button .title {
    float: left;
    width: 150px;
    height: 66px;
    margin-left: 15px;
    margin-top: 20px;
    color: #fff;
    font-size: 15px;
    position: relative
}

.cbot-dialog-button .button-area {
    position: absolute;
    bottom: 0;
    left: 0
}

.cbot-dialog-button .button-area .button {
    width: 55px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    background: linear-gradient(to bottom right, #2754b9, #175daf);
    float: left;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    border-radius: 45px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .42);
    transition: all .3s ease 0s
}

.cbot-dialog-button-title {
    position: fixed;
    bottom: 85px !important;
    right: 20px !important;
    font-size: 15px !important;
    color: #1F8CEB;
    font-family: 'Metropolis', 'Tahoma' !important;
    font-weight: bolder !important
}

#cbot-form-message,
.cbot-last,
.cbot-msg,
.cbot-msg time:before,
.cbot-name,
.cbot-survey {
    font-family: 'Metropolis', 'Tahoma'
}

.cbot-dialog-button-help-message {
    border-radius: 50px;
    position: absolute;
    text-align: left;
    cursor: pointer;
    z-index: 99999;
    user-select: none;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    background: rgb(234, 237, 243);
    color: rgb(0, 0, 0);
    bottom: 0px;
    opacity: 0;
    display: block;
    font-size: 16px;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    box-sizing: border-box;
    height: 80px;
    line-height: 80px;
    padding-left: 25px;
    width: 331px;
    border-radius: 50px;
    right: 1px;
    box-shadow: 0 5px 30px 0 rgba(22, 189, 200, 0.3);
    display: flex;
    align-items: center;
    line-height: unset !important;
    padding: unset !important;
}

.cbot-popup-message {
    width: 253px;
    margin-left: 17px;
}

.cbot-dialog-button-help-message:before {
    /* border: 5px solid #e6267c; */
    /* HAHAHAHA */
    content: '';
    position: absolute;
    bottom: -3px;
    right: 20px;
    transform: rotate(45deg);
}

.cbot-dialog-button-help-message.popup {
    border-radius: 50px;
    width: 215px;
    position: absolute;
    bottom: 91px;
    right: 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    z-index: 99999;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    background: rgb(234, 237, 243);
    line-height: 21px !important;
    border-radius: 15px;
    padding: 6px 12px !important;
    opacity: 1;
    height: auto;
    display: block;
}

.cbot-dialog-button-regular {
    height: 61px;
    width: 61px;
    /* position: fixed; */
    position: static;
    /* bottom: 20px; */
    /* right: 20px; */
    cursor: pointer;
    background-repeat: no-repeat;
    z-index: 999999999
}

.cbot-animation-holder {
    bottom: 20px;
    right: 20px;
    position: fixed;
    display: block;
    z-index: 999999999;
}

/* 
.cbot-dialog-button-regular:hover + .cbot-dialog-button-help-message {
    color:#F00;
}
 */

.cbot-dialog-button-close {
    display: none;
    border-radius: 50px;
    height: 60px;
    width: 60px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: url(../img/flat/cbot-close-icon.png) center no-repeat #00326c !important;
    z-index: 999999999
}

.cbot-head-cover {
    width: 100%;
    height: 59px;
}

.cbot-dialog-head {
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    /* line-height: 60px; */
    height: 55px;
    z-index: 100;
    padding: 2px 10px;
    /* cursor: pointer; */
    /* box-shadow: 0 2px 2px #ccc; */
    /* box-shadow: 0 2px 0px #d7dff1; */
    box-shadow: 0 1px 0px rgba(30, 57, 116, .1);
    background: #FFF;
    box-sizing: content-box;
    /* background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
}

.cbot-dialog-sozlesme {
    width: 100%;
    /* border-radius: 10px; */
    font-size: 14px;
    color: #333;
    overflow: hidden;
    display: block;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    height: 55px;
    z-index: 100;
    padding: 2px 0;
    /* box-shadow: 0 2px 0px #d7dff1; */
    background: #3278cd;
    display: none;
    position: absolute;
    box-sizing: content-box;
}

.cbot-dialog-sozlesme span {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-dialog-head .cbot-avatar {
    display: block;
    float: left;
    margin-top: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    /* max-width: 70%; */
    width: 60%;
    text-align: center;
}

.cbot-dialog-head .cbot-avatar img {
    height: 35px;
    vertical-align: unset !important;
    /* display: block; */
    margin-right: 5px;
    /* float: left; */
    /* max-width: 70%;*/
}

.cbot-dialog-head .cbot-avatar span {
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-size: 16px;
    color: #000;
    /* float: left; */
    /* max-width: 130px; */
    /* max-width: calc(100% - 70px); */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Metropolis', 'Tahoma';
    text-align: center;
}

.cbot-survey {
    text-align: center;
    background-color: #4463da;
    padding: 10px;
    border-radius: 100px;
    width: 290px;
    height: 100px;
    display: none;
    position: absolute !important;
    top: 40%;
    left: 25px;
    opacity: 0;
    z-index: 9999999 !important;
    color: #fff;
    font-size: 15px
}

.cbot-survey-text {
    margin-top: 15px;
    width: 100%
}

input::-ms-clear {
    display: none
}

.cbot-back,
.cbot-back img,
.cbot-last,
.cbot-name {
    position: absolute
}

.cbot-back {
    width: 90px;
    height: 50px;
    top: 13%;
    left: 0;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    cursor: pointer
}

.cbot-back img {
    top: 5px;
    left: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .98);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    margin-left: 15px
}

.cbot-back:active {
    background: rgba(255, 255, 255, .2)
}

.cbot-chat .avatar,
.cbot-chat .avatar img {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .9)
}

.cbot-name {
    top: 25%;
    left: 90px;
    font-size: 25px;
    font-weight: 300;
    color: rgba(255, 255, 255, .98);
    cursor: default
}

.cbot-last {
    top: 30px;
    left: 115px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
    cursor: default
}

.cbot-chat {
    list-style-type: none;
    /* padding: 15px 0; */
    padding: 0;
    /* margin: 15px 0 0 0; */
    margin: 2px 0 0 0;
    /* max-height: 70%; */
    /* height: calc(100% - 134px);  */
    /* height: calc(100% - 155px); */
    height: calc(100% - 175px);
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.cbot-alert-welcome-message {
    display: none;
}

.cbot-alert-welcome-message {
    background: #fff9e7;
    color: grey;
    width: 100%;
    padding: 5px 0px;
    text-align: center;
    display: none;
    position: absolute;
    z-index: 999;
}

.cbot-chat li {
    /* overflow: hidden; */
    /* overflow-x: hidden; */
    display: flex
}

.cbot-chat>li:nth-of-type(1) {
    margin-top: 15px;
}

.cbot-chat .avatar {
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%
}

.cbot-chat .avatar img {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%
}

.cbot-chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: silver;
    height: 20px;
    text-shadow: 7px 0 0 #e5e5e5, 6px 0 0 #e5e5e5, 5px 0 0 #e5e5e5, 4px 0 0 #e5e5e5, 3px 0 0 #e5e5e5, 2px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 0 0 0 #e5e5e5, -1px 0 0 #e5e5e5, -2px 0 0 #e5e5e5, -3px 0 0 #e5e5e5, -4px 0 0 #e5e5e5, -5px 0 0 #e5e5e5, -6px 0 0 #e5e5e5, -7px 0 0 #e5e5e5;
    box-shadow: inset 20px 0 0 #e5e5e5, inset -20px 0 0 #e5e5e5, inset 0 -2px 0 #d7d7d7;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default
}

.cbot-other:before,
.cbot-self .avatar:after {
    content: "";
    width: 0;
    height: 0;
    position: relative;
    right: 0
}

.cbot-other:after {
    display: none;
}

.cbot-other .msg {
    order: 1;
    border-top-left-radius: 0;
    box-shadow: -1px 2px 0 #D4D4D4
}

/* .cbot-other:before { */

/* top: 0;
    left: 40px;
    border: 5px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent */

/* } */

.cbot-other .cbot-msg {
    border-top-left-radius: 0;
    /* background: #f4f7f9; */
    border: solid 1px #ebf0f5;
    background: #f0f4f8;
    margin-left: 10px;
    border: 0;
    /* padding: 3px; */
    color: #5d709b;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    box-sizing: content-box;
    min-height: 18px;
    /* overflow: hidden; */
    /* width:250px; */
    /* letter-spacing: -0.2333333px; */
}

/* .cbot-other .cbot-msg:first-child {
    margin-top: 15px;
} */

.cbot-self {
    justify-content: flex-end;
    align-items: flex-end
}

.cbot-self .cbot-msg {
    border-top-right-radius: 0;
    margin-right: 10px;
    /* background: #e1e7f9; */
    background: #3278cd;
    color: #FFFFFF;
    word-break: break-word;
}

.cbot-self .msg {
    order: 1;
    border-bottom-right-radius: 0;
    box-shadow: 1px 2px 0 #D4D4D4
}

.cbot-self .avatar {
    order: 2
}

.cbot-self .avatar:after {
    display: inline-block;
    bottom: 19px;
    border: 5px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 0 2px 0 #D4D4D4
}

.cbot-carousel-wrapper {
    overflow: hidden;
}

.cbot-msg {
    background: #f2f0ff;
    min-width: 50px;
    max-width: 280px;
    /* padding: 3% 3% 3% 2%; */
    padding: 10px;
    border-radius: 16px;
    font-size: 14px;
    color: rgba(30, 57, 116, 1);
    word-break: break-word;
    /* overflow: hidden; */
    overflow: visible;
    position: relative;
    line-height: 20px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}

.cbot-msg .cbot-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    line-height: 16px;
    color: #333;
    font-weight: 700;
    z-index: 990;
    cursor: pointer;
    text-align: center;
    display: none;
}

.cbot-msg img,
.cbot-msg time {
    cursor: default
}

.cbot-arrow.left {
    left: 0;
    background: url(../img/flat/arrow-blue-left.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
}

.cbot-arrow.right {
    right: 0;
    background: url(../img/flat/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 16px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
    transition: .1s;
}

.cbot-msg p {
    font-size: 14px;
    margin: 0 0 .2rem;
    font-family: 'Metropolis', 'Tahoma';
    line-height: 19px;
    /* font-weight: 600; */
    /* color: #5d709b; */
    text-align: left;
    /* color: #777 */
}

.cbot-msg img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 3px #eee;
    transition: all .4s cubic-bezier(.565, -.26, .255, 1.41)
}

.cbot-msg time {
    font-size: .7rem;
    color: #ccc;
    margin-top: 3px;
    float: right
}

.cbot-msg time:before {
    content: "\f017";
    color: #ddd;
    display: inline-block;
    margin-right: 4px
}

.cbot-form-message-area {
    width: calc(100% - 20px);
    height: 73px;
    background: #fff !important;
    position: absolute;
    bottom: 20px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    overflow: hidden;
    z-index: 99;
    margin: 0 auto 0 10px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 5px;
    font-size: 16px;
}

/* ripple effect */


/* .ripple_effect {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-align: center;
    color: #3278cd;
    background: transparent;
    position: absolute;
    bottom: 50px;
} */

.ripple_effect_button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5em;
    height: 2em;
    margin-left: -2.5em;
    margin-top: -1em;
    z-index: 100;
    padding: 0.25em 0.5em;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.15em;
    font-weight: 200;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.5s;
}

.ripple_effect_button:hover {
    box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.75);
}

.ripple_effect {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 55px;
}

/* .ripple_effect>div {
    display: inline-block;
    width: 2px;
    height: 65px;
    margin: 0 2px;
    background: currentColor;
    transform: scaleY(0.1);
    opacity: 0.25;
} */

/* .ripple_effect.error {
    color: #f7451d;
    min-width: 20em;
    max-width: 30em;
    margin: 0 auto;
    white-space: pre-line;
} */

/* ripple effect finish */


.cbot-secondary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    background: #2599fc;
    border: 1px solid #2599fc;
    color: #ffffff;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    outline: none;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 75px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
}

.cbot-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
    text-align: center;
    line-height: 40px;
}

.cbot-okudum-anladim {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    /* width: 60%; */
    white-space: nowrap;
    width: 266px;
    font-family: 'Metropolis', 'Tahoma';
    color: #1d3974;
}

/*
checkbox private1
*/

.cbot-checkbox-checkmark-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    white-space: nowrap;
    width: 266px;
    font-family: 'Metropolis', 'Tahoma';
    color: #1d3974;
}

/* Hide the browser's default checkbox */

.cbot-checkbox-checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */

.cbot-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #FFF;
    border: solid 1px #d6d9e0;
}

/* On mouse-over, add a grey background color */

.cbot-checkbox-checkmark-container:hover input~.cbot-checkbox-checkmark {
    background-color: #FFF;
}

/* When the checkbox is checked, add a blue background */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark {
    background-color: #FFF;
}

/* Create the cbot-checkbox-checkmark/indicator (hidden when not checked) */

.cbot-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the cbot-checkbox-checkmark when checked */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark:after {
    display: block;
}

/* Style the cbot-checkbox-checkmark/indicator */

.cbot-checkbox-checkmark-container .cbot-checkbox-checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #3278cd;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#cbot-form {
    overflow-y: unset !important;
}

#cbot-form-message {
    background: #fff;
    border: none;
    outline: 0;
    padding-left: 15px;
    padding-right: 15px;
    color: #666;
    font-weight: 400;
    font-size: 16px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
    /* overflow: hidden; */
    resize: none;
    height: 62px;
    padding: 5px;
    outline: 0;
    width: calc(100% - 83px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    position: relative;
    background: transparent;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none;
}

#cbot-form-message::-webkit-scrollbar {
    display: none;
}

.cbot-illusion-placeholder {
    position: absolute;
    font-size: 14px;
    user-select: none;
    padding: 5px 5px 5px 8px;
    color: rgb(109, 109, 109);
    display: block;
    width: calc(100% - 83px);
    top: 6px;
}

.cbot-form-message-area .cbot-send-button-info {
    border: 0;
    background: url(../img/flat/list-type.png) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
    cursor: pointer;
    display: none;
    float: left;
    margin: 12px 0 0 12px;
}

.cbot-form-message-area .cbot-send-button-info:focus {
    outline: none;
}

.cbot-form-message-area .cbot-send-button {
    position: absolute;
    cursor: pointer;
    width: 32px;
    height: 32px;
    top: 20px;
    right: 6px;
    z-index: 999;
    border: none;
    float: left;
    display: block;
    background: url(../img/flat/cbot-paper-plane.svg) no-repeat;
    background-position: center;
    background-size: 20px !important;
}

.cbot-form-message-area .cbot-send-button.active {
    background: url(../img/flat/cbot-paper-plane-active.svg) no-repeat;
    background-position: center;
    background-size: 20px !important;
}

.cbot-form-message-area .cbot-send-button:focus {
    outline: none;
}

.cbot-feedback-comment-area {
    display: none;
}

.cbot-pie-chart-midtext {
    display: none;
}

.cbot-new-help-sentences li {
    color: #1d3974;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    letter-spacing: -0.2333333px;
    background: #ffffff;
    border-bottom: 1px solid #e0e6ed;
}

.cbot-new-help-sentences li:last-child {
    border-bottom: 0;
}

.cbot-new-help-sentences li a {
    text-decoration: none;
    color: #1d3974;
    padding: 15px 5px;
    display: block;
    width: 100%;
}

.cbot-new-help-sentences li:hover {
    background: rgba(224, 230, 237, .3);
}

[cbot-tooltip]:before {
    /* needed - do not touch */
    content: attr(cbot-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 10px;
    z-index: 999999999;
    color: #333;
    border-radius: 10px;
    /* box-shadow: 2px 2px 1px #caa5a5; */
    /* background: #CCC; */
    /* left: -50%; */
    transform: translateX(calc(-50% + 10px));
}

[cbot-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    background: #f0f4f8;
    margin-top: -50px;
    color: #003c6c;
}

[cbot-tooltip]:not([cbot-tooltip-persistent]):before {
    pointer-events: none;
}

[cbot-voice-tooltip]:before {
    content: attr(cbot-voice-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.1s ease;
    transition-delay: 0s;
    padding: 6px 10px;
    z-index: 999999999;
    color: #333;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    transform: translateX(calc(-50% - 7px));
    pointer-events: none;
    bottom: 100%;
    margin-bottom: -5px;
}

[cbot-voice-tooltip]:hover:before {
    opacity: 1;
    background: #f0f4f8;
    color: #003c6c;
    transition-delay: 0.1s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


@media screen and (max-width:800px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-illusion-placeholder {
        left: 10px;
    }

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block
    }

    .cbot-dialog-speech,
    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: 'Metropolis', 'Tahoma';
        font-size: 14px;
        color: #333
    }

    .cbot-spinner-overlay {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 999999999999999999;
        bottom: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: 0px;
        display: none;
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        /* padding: 5px 10px; */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        box-shadow: 0 2px 0px #d7dff1;
        /*  background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
        background: #FFF;
    }

    .cbot-msg {
        max-width: 280px
    }

    .cbot-msg img {
        width: 300px
    }

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 45px;
        top: 22px;
        border-radius: 3px
    }

    .cbot-overlay {
        display: none;
        transition: .5s;
        position: relative;
        width: 100%;
        height: calc(100% - 67px);
        position: absolute;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
    }

    .cbot-overlay-text {
        height: 67%;
        overflow: auto;
        background: rgb(255, 255, 255);
        bottom: 0px;
        position: absolute;
        border-radius: 5px;
        padding: 20px 20px 10px;
        width: calc(100% - 40px);
        margin-top: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }

    [cbot-tooltip]:before {
        display: none;
    }

    [cbot-tooltip]:hover:before {
        display: none;
    }

    [cbot-tooltip]:not([cbot-tooltip-persistent]):before {
        display: none;
    }

    [cbot-voice-tooltip]:before {
        display: none;
    }

    [cbot-voice-tooltip]:hover:before {
        display: none;
    }

    /*     .cbot-chat {
        display: flex;
        flex-direction: column;
    }

    .cbot-chat>li:nth-of-type(1) {
        margin-top: auto !important;
    } */
}

@media screen and (max-width:150px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block
    }

    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: 'Metropolis', 'Tahoma';
        font-size: 14px;
        color: #333
    }

    .cbot-spinner-overlay {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 999999999999999999;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 15px;
        top: 22px;
        border-radius: 3px
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        padding: 5px 10px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        position: relative;
        /* box-shadow: 0 2px 0px #d7dff1; */
        /* background: linear-gradient(to left, #4c20de, #5895f8)!important */
        background: #FFF;
    }

    #cbot-form {
        margin-top: 30px
    }

    .cbot-msg img {
        width: 200px
    }

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

}

.cbot-component.generic-template {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cbot-float-left {
    float: left;
}

.cbot-float-right {
    float: right;
}

.cbot-file-component a {
    cursor: pointer;
}

.cbot-file-component .cbot-file-component-filename {
    float: left;
    padding: 0 5px;
    color: #fff;
    max-width: 200px;
}

.cbot-file-component-img {
    width: 16px;
    box-shadow: none;
}

.cbot-component .cbot-image {
    width: 100%;
    max-height: 240px;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
    height: 133px !important;
}

.cbot-component .cbot-image img {
    width: auto !important;
    max-width: 100%;
    /* height: 100%; */
    max-height: 240px;
    margin: 0 auto;
    max-height: 133px !important;
    transform: translateY(-50%) !important;
    top: 50% !important;
    cursor: pointer;
}

.generic-template .cbot-description {
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px
}

.generic-template .cbot-buttons {
    width: 100%;
    height: auto;
    margin-top: auto;
    margin-bottom: 10px
}

.generic-template .cbot-button_component-description {
    margin-top: 0px;
}

.generic-template .cbot-buttons button {
    font-family: 'Metropolis', 'Tahoma';
}

.generic-template .cbot-title {
    padding: 3px;
    font-weight: 700;
    color: #2599fc;
}

.generic-template .cbot-subtitle {
    padding: 3px;
    /* color: #5d709b; */
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    letter-spacing: -0.2333333px;
}

.generic-template .cbot-buttons .cbot-button {
    /* line-height: 3; */
    text-align: center;
    font-size: 14px !important;
    width: 100%;
    /* height: 30px; */
    font-weight: 500;
    color: #4667d7;
    border: 1px solid #f1f1f1;
    background-color: #fff;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    border-radius: 5px;
    background-color: #FFF;
    border: 0;
    /* border:1px solid #1F8CEB; */
    color: #1F8CEB;
    margin-bottom: 2px;
    padding: 10px 0px;
    display: inline-table;
}

.generic-template .cbot-buttons .cbot-button.primary {
    background-color: #1F8CEB;
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button.primary:hover {
    /* background-color:#1F8CEB; */
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button:disabled {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button:disabled:hover {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button.secondary {
    border: solid 1px #2599fc;
    background: #FFF;
    color: #2599fc;
}

.generic-template .cbot-buttons .cbot-button.secondary:hover {
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button a {
    font-weight: 500;
    color: #4667d7;
    text-decoration: none;
}

.generic-template .cbot-buttons .cbot-button:hover {
    color: #fff;
    background-color: #4667d7
}

.generic-template .cbot-buttons .cbot-button:hover a {
    color: #fff;
    text-decoration: none
}

.cbot-component.list-template {
    width: 100%;
    width: 250px;
}

.list-template .cbot-list-item {
    margin: 5px 0;
    border-top: 1px solid #e1e1e1;
    padding: 5px 0;
}

.cbot-list-item-non-bordered {
    border-top: none;
    margin-top: -10px;
}

.cbot-list-item-description {
    float: left;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.cbot-width-100-pr {
    width: 100% !important;
}

.cbot-clear {
    clear: both !important;
}

.cbot-dp-block {
    display: block !important;
}

.cbot-dp-none {
    display: none !important;
}

.cbot-list-item-title {
    font-weight: 700;
    font-size: 14px !important;
    color: #2599fc;
}

.cbot-list-item-text {
    font-size: 14px !important;
    /* width: 170px; */
    width: 100%;
    max-width: 100%
}

.cbot-list-item-image {
    width: 40px;
    height: 40px;
    float: right
}

.cbot-list-item-image img {
    width: initial;
    /* height: 40px; */
    top: 50%;
    transform: translateY(-50%);
    max-width: 40px;
    max-height: 40px;
    /* margin-top: 5px; */
    margin: auto;
    /* margin-top: 5px; */
}

.cbot-list-item-button {
    padding: 3px 5px;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    float: left;
    margin-right: 3px;
    color: #337ab7;
    border: 1px solid #337ab7;
    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    font-weight: normal;
    font-family: 'Metropolis', 'Tahoma';
    box-sizing: border-box;
    line-height: 20px;
}

.cbot-list-item-button:hover {
    background-color: #1F8CEB;
    color: #FFF;
}

.cbot-typing:before {
    border: 0;
}

.cbot-typing-loader {
    margin: 8px 0 0;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    -webkit-animation: line 1s linear infinite alternate;
    -moz-animation: line 1s linear infinite alternate;
    animation: line 1s linear infinite alternate
}

.cbot-dashed-hr {
    border: 1px dashed #cbcbcb;
    border-bottom: 0;
}

.cbot-solid-hr {
    border: 1px solid #cbcbcb;
    border-bottom: 0;
}

.cbot-txn-title {
    font-size: 13px;
    color: #1d3974;
    font-family: 'Metropolis', 'Tahoma';
    font-weight: bold;
    margin-bottom: 3px;
}

.cbot-txn-subtitle {
    font-size: 13px;
    font-weight: bold;
    color: #1F8CEB;
}

.cbot-list-new-container {
    margin-top: 10px;
}

.cbot-list-new-container-calc {
    width: calc(100% - 50px)
}

.cbot-list-new-img {

    width: 50px;
    background-size: 25px 25px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.cbot-list-new-title {
    color: #1e3974;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-list-new-subtitle {
    color: #61749d;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-component-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
}

@-webkit-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

@-moz-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

@keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

.cbot-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px;
    user-select: none;
    /* If you want dots under the hoverable text */
}

/* cbot-tooltip text */

.cbot-tooltip .cbot-tooltiptext {
    visibility: hidden;
    min-width: 60px;
    width: calc(100% - 120px);
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

/* Show the cbot-tooltip text when you mouse over the cbot-tooltip container */

.cbot-tooltip:hover .cbot-tooltiptext {
    visibility: visible;
}

/* The Modal (background) */

.cbot-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999999999;
    /* MODEL DİĞERLERİNDEN  BİR FAZLA OLMALI */
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (Image) */

.cbot-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#cbot-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */

.cbot-modal-content,
#cbot-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */

.cbot-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.cbot-modal-close:hover,
.cbot-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.cbot-msg ul li {
    overflow: visible;
    display: list-item;
}

.cbot-msg ol li {
    overflow: visible;
    display: list-item;
}

.cbot-typing .cbot-msg {
    height: 20px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 15px;
    margin: 0 0 0 10px;
}

.cbot-form-message-area .textarea {
    border-radius: 0;
}

.cbot-clearfix {
    clear: both;
}

.cbot-feedback-area {
    margin-top: 7px;
}

.cbot-feedback-area .cbot-feedback-status {
    float: left;
}

.cbot-feedback-area .cbot-feedback-status-form {
    float: left;
}

.cbot-feedback-area .cbot-feedback-vote-button {
    width: 20px;
    height: 20px;
    border: 0;
    float: right;
    margin: 3px;
    padding: 0;
    cursor: pointer;
}

.cbot-vote-down-selectable {
    background: url(../img/cbot-positive-charges.png);
    background-size: 100% 100%;
    transform: scaleY(-1) scaleX(-1);
}

.cbot-vote-down-selectable:hover,
.cbot-vote-down-selectable.cbot-vote-selected {
    filter: invert(25%) sepia(88%) saturate(7476%) hue-rotate(357deg) brightness(94%) contrast(120%);
}

.cbot-vote-up-selectable:hover,
.cbot-vote-up-selectable.cbot-vote-selected {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-vote-up-selectable,
.cbot-vote-up {
    background: url(../img/cbot-positive-charges.png);
    background-size: 100% 100%;
}

.cbot-vote-up-selectable:hover {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-feedback-vote-button:active,
.cbot-feedback-vote-button:focus {
    outline: none;
}

.cbot-feedback-textarea {
    width: 100%;
    resize: none;
    height: 40px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-feedback-textarea:focus {
    outline: none;
}

.cbot-feedback-form-send {
    margin-top: 5px;
    float: right;
    background: #f0f4f8;
    border: 1px solid #5b739f;
    border-radius: 3px;
}

.cbot-feedback-form-send:disabled {
    border: 1px solid #ccc;
}

.cbot-feedback-form-send::before {
    content: "Gönder";
}

.cbot-generic-numarator {
    width: 26px;
    height: 26px;
    /* position: absolute; */
    background: #1e3974;
    right: 2px;
    border-radius: 50%;
    top: 0px;
    color: #FFF;
    text-align: center;
    line-height: 26px;
    float: right;
}

@keyframes cbotBounceIn {

    0%,
    2%,
    6%,
    10%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    4% {
        transform: translateY(-30px);
    }

    8% {
        transform: translateY(-15px);
    }
}

.cbot-bounce {
    animation: cbotBounceIn 10s infinite 2s;
}

.cbot-slide-right {
    right: -300px;
    animation: cbotSlideRight 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideRight {
    100% {
        right: 20px;
    }
}

.cbot-slide-left {
    left: -300px;
    animation: cbotSlideLeft 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideLeft {
    100% {
        left: 20px;
    }
}

.cbot-msg:hover .left,
.cbot-msg:hover .right {
    opacity: 1;
    transition: .2s;
}

/* RATING AREA */

.cbot-rating-group {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.cbot-rating-input {
    display: none;
}

.cbot-rating-label {
    cursor: pointer;
    padding: 0 0px;
    font-size: 24px;
}

.cbot-rating-star {
    color: orange;
}

.cbot-rating-disabled .cbot-rating-star {
    color: #d57500;
}

.cbot-rating-input:checked~.cbot-rating-label .cbot-rating-star {
    color: #ddd;
}

.cbot-rating-group:hover .cbot-rating-label .cbot-rating-star {
    color: orange;
}

.cbot-rating-input:hover~.cbot-rating-label .cbot-rating-star {
    color: #ddd;
}

.cbot-icon-star {
    font-style: normal;
    pointer-events: none;
}

.cbot-icon-star::before {
    /* content: '☆' */
    content: '★'
}

.cbot-rating-disabled {
    pointer-events: none;
}

.cbot-dialog-end-survey {
    transform: translateY(calc(-100% - 15px));
    position: absolute;
    right: 15px;
    width: 200px;
    padding: 15px;
    border: 5px solid #000000;
    background: #000;
    border-radius: 7px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
    text-align: center;
    padding: 9px;
    color: white;
    display: none;
}

.cbot-dialog-end-survey>span {
    display: block;
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
}

.cbot-dialog-end-survey>button {
    background: transparent;
    border: 0;
    color: black !important;
    font-size: 17px;
    cursor: pointer;
    outline: none;
    background: white;
    border-radius: 5px;
}

.cbot-dialog-end-survey>button:hover {
    color: #ccc;
}

.cbot-msg ol {
    padding-left: 15px;
}

.cbot-msg ul {
    padding-left: 15px;
}

.cbot-voice-area {
    width: 32px;
    height: 32px;
    background: url(../img/flat/cbot-mic-passive.svg) no-repeat;
    background-size: 20px !important;
    background-position: center;
    cursor: pointer;
    position: absolute;
    display: block;
    right: 40px;
    top: 20px;
}

.cbot-voice-area.active {
    background: url(../img/flat/cbot-mic-active.svg) no-repeat;
    background-position: center;
    transform: translateY(-5px);
}

#cbot-attachment-area {
    width: 21px;
    height: 21px;
    /* float: right; */
    background: url(../img/cbot-attachment-flaticon.svg);
    background-size: 100% 100%;
    margin-top: -5px;
    margin-right: -5px;
    cursor: pointer;
    position: absolute;
    right: 43px;
    top: 30px;
}

#cbot-attachment-area img {
    display: block;
    width: 30%;
    margin: 20px auto;
}

#cbot-attachment-area span {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.cbot-attachment-container {
    display: none;
    width: 200px;
    height: 100px;
    background: white;
    position: fixed;
    transform: translateX(calc(-100% + 40px)) translateY(-100%);
    -ms-transform: translateX(-100%) translateX(40px) translateY(-100%);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #ccc;
    transition: .1s;
    opacity: 1;
    overflow: hidden;
    user-select: none;
}

.cbot-attachment-container .cbot-attachment-block {
    transition: 0;
    background: #fff;
}

.cbot-attachment-container .cbot-attachment-block:hover {
    transition: .1s;
    background: #ccc;
}

.cbot-attachment-container.active {
    /* display: block; */
    opacity: 1;
}

.cbot-attachment-image {
    width: 50%;
    /* background-image: url(../img/cbot-gallery.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-location {
    width: 50%;
    /* background-image: url(../img/cbot-location-image.png); */
    /* background-size: 100% 100%; */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-video {
    width: 50%;
    /* background-image: url(../img/cbot-location-image.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-file {
    width: 50%;
    /* background-image: url(../img/filfesicon.png);
    background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-form-message-area .textarea::placeholder {
    color: #828282;
}

.cbot-help-text ul {
    padding: 0 0 0 40px;
    margin: 14px 0;
}

.cbot-help-text ul li {
    list-style-type: disc;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
}


@media screen and (max-width:768px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-survey-fadebg {
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99998;
        background-color: #000;
        opacity: .3;
        display: none;
    }

    /*     .cbot-chat {
        display: flex;
        flex-direction: column;
    }

    .cbot-chat>li:nth-of-type(1) {
        margin-top: auto !important;
    } */

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }
}

#cbot-web-area {
    right: 0;
    position: fixed;
    transform: translate(-370px);
    width: 900px;
    width: calc(100% - 380px);
    max-width: 900px;
    height: 85%;
    display: none;
    opacity: 0;
}

.cbot-web-area-content {
    background: #f1f1f1;
    height: calc(100% - 70px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
    overflow: hidden;
}

.cbot-web-area-header {
    height: 59px;
    background: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
}

.cbot-web-area-content iframe {
    width: 100%;
    height: 100%;
}

.cbot-web-image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.cbot-web-image img {
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-video {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
}

.cbot-web-video iframe {
    width: 100%;
}

.cbot-web-video-container {
    height: 100%;
    width: 100%;
    background: black;
}

.cbot-web-video video {
    outline: none;
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-close {
    background-image: url(../img/cbot-chevron-right-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-web-reload {
    background-image: url(../img/cbot-reload-icon-16912-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-doc-content {
    padding: 5px;
    box-sizing: content-box;
    overflow-y: scroll;
    height: calc(100% - 10px);
}

.cbot-doc-content img {
    max-width: 100%;
}

.cbot-doc-content table {
    border-collapse: collapse;
}

.cbot-doc-content td {
    border: 1px solid #000;
}

.cbot-doc-content ol {
    list-style: decimal;
}

.cbot-doc-content ol ol {
    list-style: lower-alpha;
}

.cbot-description ol {
    list-style: decimal;
}

.cbot-description ol ol {
    list-style: lower-alpha;
}

.cbot-description table {
    border-collapse: collapse;
}

.cbot-description td {
    border: 1px solid #000;
}

.cbot-triple-dot {
    background-image: url(../img/cbot-tripledot-flat.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 25px;
    float: left;
    width: 12px;
    margin-right: 5px;
    margin-top: 15px;
    /* background: white; */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    /* background-color: red; */
    background-color: #5a729e;
}

.cbot-count-badge {
    background: red;
    color: #fff;
    width: 15px;
    height: 15px;
    float: right;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    font-family: Arial;
    padding: 2px 1px 0px 1px;
    display: none;
}

.cbot-livechat-close {
    width: 100%;
    background: #bc1831;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}

.cbot-livechat-close img {
    display: none;
    width: 16px;
    height: 18px;
    box-shadow: none;
    margin: 0px 0px -4.3px 7px;
}

.cbot-start-meeting {
    width: 100%;
    background: #18bc39;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    top: 86px;
}

.cbot-dialog-end-timer {
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 94px;
    background: beige;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}

.cbot-dialog-end-timer span {
    font-weight: bold;
}

.cbot-livechat-end-timer {
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 94px;
    background: beige;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}

.cbot-livechat-end-timer span {
    font-weight: bold;
}


.cbot-dropdown-input {
    box-sizing: border-box;
    /* background-image: url(../img/search.png); */
    background-position: 14px 12px;
    background-size: 26px;
    background-repeat: no-repeat;
    font-size: 14px;
    padding: 14px 15px 10px 30px;
    border: none;
    border-bottom: 2px solid #f6f6f6;
    outline: none;
    background-color: #e7e4e4;
}

.cbot-dropdown-input:disabled {
    border-bottom-color: #ddd;
}

.cbot-dropdown-input:focus {
    /* outline: 3px solid #ddd; */
}

.cbot-dropdown {
    position: relative;
    display: inline-block;
}

.cbot-dropdown-content {
    display: none;
    position: initial;
    bottom: 48px;
    background-color: #f6f6f6;
    /* min-width: 248px; */
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    max-height: 137px;
}

.cbot-dropdown-content button {
    color: black;
    padding: 9px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    outline: none;
}

.cbot-dropdown-content button:hover {
    background-color: #ccc;
}

.cbot-dropdown a:hover {
    background-color: #ddd;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

#cbot-attachment-file-input {
    display: none;
}

.cbot-attachment-file-input {
    display: none !important;
}

/* COLORFUL SURVEY STYLING */

.cbot-colorful-radio-container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    float: left;
}

.cbot-colorful-radio-container input {
    /* position: absolute;
    opacity: 0;
    cursor: pointer; */
    display: none;
}

.cbot-colorful-radio-span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 0px 1px white inset;
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    user-select: none;
}

.cbot-colorful-radio-container:hover input~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white;
}

.cbot-colorful-radio-container input:checked~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white
}

.cbot-colorful-radio-container-styling-0 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-0:hover input~.cbot-colorful-radio-span-styling-0,
.cbot-colorful-radio-container-styling-0 input:checked~.cbot-colorful-radio-span-styling-0 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-1 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-1:hover input~.cbot-colorful-radio-span-styling-1,
.cbot-colorful-radio-container-styling-1 input:checked~.cbot-colorful-radio-span-styling-1 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-2 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-2:hover input~.cbot-colorful-radio-span-styling-2,
.cbot-colorful-radio-container-styling-2 input:checked~.cbot-colorful-radio-span-styling-2 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-3 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-3:hover input~.cbot-colorful-radio-span-styling-3,
.cbot-colorful-radio-container-styling-3 input:checked~.cbot-colorful-radio-span-styling-3 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-4 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-4:hover input~.cbot-colorful-radio-span-styling-4,
.cbot-colorful-radio-container-styling-4 input:checked~.cbot-colorful-radio-span-styling-4 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-5 span {
    border-color: #b95121;
    color: #b95121;
}

.cbot-colorful-radio-container-styling-5:hover input~.cbot-colorful-radio-span-styling-5,
.cbot-colorful-radio-container-styling-5 input:checked~.cbot-colorful-radio-span-styling-5 {
    background-color: #b95121;
    color: white;
}

.cbot-colorful-radio-container-styling-6 span {
    border-color: #e49c40;
    color: #e49c40;
}

.cbot-colorful-radio-container-styling-6:hover input~.cbot-colorful-radio-span-styling-6,
.cbot-colorful-radio-container-styling-6 input:checked~.cbot-colorful-radio-span-styling-6 {
    background-color: #e49c40;
    color: white;
}

.cbot-colorful-radio-container-styling-7 span {
    border-color: #d1c650;
    color: #d1c650;
}

.cbot-agent-name {
    color: #848484;
    margin-top: 16px;
}

.cbot-livechat-started {
    display: none;
}

.cbot-agent-started-livechat {
    display: none;
    align-items: center;
    justify-content: center;
    width: 110%;
}


.cbot-livechat-started-text {
    margin: 0 12px 0 9px !important;
    color: #848484;
    margin-top: 5px;
    margin-left: -6px;
    align-self: center;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 3px;
}

.cbot-livechat-started svg:nth-child(2) {
    margin-left: 17px
}

.cbot-agent-name {
    margin: unset !important;
    margin-left: 9px;
}

.cbot-agent-name-wrapper {
    display: none;
    align-items: center;
    margin-top: 16px;
}

.cbot-vector {
    display: none;
}

.cbot-vector svg {
    margin-top: 18px;
}

.cbot-agent-name-wrapper svg:nth-child(1) {
    margin-right: 8px;
}

.cbot_text_component svg:nth-child(1) {
    display: none;
}

/* .cbot-description{
    margin-top: -9px;
    margin-left: -10px;
  }
  .cbot-subtitle{
    margin-top:-6px;
  } */


/* 
.vector-450 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1407px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  }

  .vector-451 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1670px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  } */

.cbot-agent-name {
    color: #848484;
    margin-top: 16px;
}

.cbot-livechat-started {
    display: none;
}

.cbot-agent-started-livechat {
    display: none;
    align-items: center;
    justify-content: center;
    width: 110%;
}


.cbot-livechat-started-text {
    margin: 0 12px 0 9px !important;
    color: #848484;
    margin-top: 5px;
    margin-left: -6px;
    align-self: center;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 3px;
}

.cbot-livechat-started svg:nth-child(2) {
    margin-left: 17px
}

.cbot-agent-name {
    margin: unset !important;
    margin-left: 9px;
}

.cbot-agent-name-wrapper {
    display: none;
    align-items: center;
    margin-top: 16px;
}

.cbot-vector {
    display: none;
}

.cbot-agent-name-wrapper svg:nth-child(1) {
    margin-right: 8px;
}

.cbot_text_component svg:nth-child(1) {
    display: none;
}

/* .cbot-description{
    margin-top: -9px;
    margin-left: -10px;
  }
  .cbot-subtitle{
    margin-top:-6px;
  } */

/* 
.vector-450 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1407px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  }

  .vector-451 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1670px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  } */

.cbot-colorful-radio-container-styling-7:hover input~.cbot-colorful-radio-span-styling-7,
.cbot-colorful-radio-container-styling-7 input:checked~.cbot-colorful-radio-span-styling-7 {
    background-color: #d1c650;
    color: white;
}

.cbot-colorful-radio-container-styling-8 span {
    border-color: #bbc730;
    color: #bbc730;
}

.cbot-colorful-radio-container-styling-8:hover input~.cbot-colorful-radio-span-styling-8,
.cbot-colorful-radio-container-styling-8 input:checked~.cbot-colorful-radio-span-styling-8 {
    background-color: #bbc730;
    color: white;
}

.cbot-colorful-radio-container-styling-9 span {
    border-color: #82b652;
    color: #82b652;
}

.cbot-colorful-radio-container-styling-9:hover input~.cbot-colorful-radio-span-styling-9,
.cbot-colorful-radio-container-styling-9 input:checked~.cbot-colorful-radio-span-styling-9 {
    background-color: #82b652;
    color: white;
}

.cbot-colorful-radio-container-styling-10 span {
    border-color: #6cba4c;
    color: #6cba4c;
}

.cbot-colorful-radio-container-styling-10:hover input~.cbot-colorful-radio-span-styling-10,
.cbot-colorful-radio-container-styling-10 input:checked~.cbot-colorful-radio-span-styling-10 {
    background-color: #6cba4c;
    color: white;
}

.cbot-colorful-radio-main-container {
    height: 25px;
}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */

.cbot-bg-none {
    background: transparent !important;
    padding: 0 !important;
}


.cbot-suggestion-button-slider {
    white-space: nowrap;
    overflow-x: scroll;
}

.cbot_text_component {
    width: initial !important;
}

.cbot-text-button-class {
    background-color: transparent !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 3px 0 0 0 !important;
}

.cbot-text-button-class:hover {
    color: #1F8CEB !important;
}

#cbot-form-message::placeholder {
    color: transparent;
}

.cbot-owl-carousel .cbot-owl-prev {
    display: none;
}

.cbot-owl-carousel .cbot-owl-next {
    display: none;
}

.cbot-owl-dots {
    height: 20px;
    text-align: center;
    display: none;
}

.cbot-owl-dot {
    margin: 5px 5px 5px 0;
    height: 10px;
    width: 10px;
    border: 1px solid #87b2d8 !important;
    border-radius: 100%;
}

.cbot-owl-dot.active {
    height: 10px;
    width: 10px;
    background-color: #1a6eb5 !important;
    border: 1px solid #1a6eb5 !important;
}

.cbot-stick-right {
    right: 0;
    left: initial !important;
}

.cbot-bottom-arrow-left {
    background: url(../img/flat/arrow-blue-left.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    width: 32px;
    height: 32px;
    float: left;
    margin: 5px;
    cursor: pointer;
}

.cbot-bottom-arrow-right {
    background: url(../img/flat/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    transition: .1s;
    width: 32px;
    height: 32px;
    float: right;
    margin: 5px;
    cursor: pointer;
}

.cbot-bottom-arrow-indicators {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border-style: solid;
    border-width: thin;
    border-color: rgb(99, 99, 99);
    margin: 2px;

}

.cbot-bottom-arrow-indicators.active {
    background-color: rgb(99, 99, 99);
}

.cbot-bottom-arrow-indicators.cbot-display-none {
    display: none;
}

.cbot-bottom-arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .cbot-chart-container {
    min-width: 280px;
    min-height: 280px;
} */

.cbot-pie-chart-table {
    width: 100%;
}

.cbot-pie-chart-table-container {
    margin-top: 0px;
}

.cbot-pie-chart-headtext {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #565656;
    font-weight: 600;
    font-size: 14px;
    line-height: 18.52px;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-centertext {
    font-weight: 700;
    line-height: 23.81px;
    font-size: 14px;
    text-align: center;
    color: #231F20;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-table-index-card {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.cbot-pie-chart-table-category {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    align-items: center;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-table-value {
    /* font-family: 'Red Hat Display'; */
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    text-align: right;
    color: #231F20;
}

.cbot-pie-chart-tr {
    height: 52px;
    /* border-bottom: 1px solid #000; */
}

.cbot-chart-container {
    padding: 40px;
    margin-top: -30px;
    margin-bottom: -30px;
}

.cbot-messages-sending-time {
    text-align: right;
    margin: -4px 0px -7px 0;
    font-size: 9px;
}

.cbot-generic-template-v3-dropdown-container .cbot-messages-sending-time {
    margin: 16px 4px 0px 0px;
}

.cbot-ia-popup-buttons {
    display: flex;
    flex-direction: column;
    margin: 5px 0;
    transform: translateY(5px);
}

.cbot-mini-web-toggle {
    display: inline;
    border-radius: 10px;
    position: relative;
    left: 130px;
    bottom: 1px;
    padding: 10px;
    background: #5a729e;
    color: white;
}

.cbot-mini-web-toggle-mobile {
    display: inline;
    border-radius: 10px;
    position: relative;
    left: 144px;
    bottom: -22px;
    padding: 10px;
    background: #5a729e;
    color: white;
}

.cbot-cursor-pointer {
    cursor: pointer;
}

.cbot-list-item-non-bordered {
    border-top: none !important;
    margin-top: -10px !important;
}

.cbot-suggestion-button-style {
    width: initial;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 5px;
    display: inline-block;
    float: initial;
}

.cbot-triple-button-class-2 {
    width: calc(50% - 1px) !important;
    margin-right: 1px !important;
    margin-left: 0 !important;
}

.cbot-triple-button-class-3 {
    width: calc(50% - 1px) !important;
    margin-left: 1px !important;
    margin-right: 0 !important;
}

.cbot-arrow.right {
    display: block;
}

canvas.cbot-canvas {
    position: relative;
    z-index: 999999999999;
}

.cbot-boxContainer {
    display: flex;
    justify-content: space-between;
    height: 64px;
    --boxSize: 4px;
    --gutter: 4px;
    width: calc((var(--boxSize) + var(--gutter)) * 5);
}

.cbot-box {
    transform: scaleY(.4);
    height: 100%;
    width: var(--boxSize);
    background: #12E2DC;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    border-radius: 8px;
}

.cbot-box1 {
    animation-name: quiet;
}

.cbot-box2 {
    animation-name: normal;
}

.cbot-box3 {
    animation-name: quiet;
}

.cbot-box4 {
    animation-name: loud;
}

.cbot-box5 {
    animation-name: quiet;
}

@keyframes quiet {
    25% {
        transform: scaleY(.6);
    }

    50% {
        transform: scaleY(.4);
    }

    75% {
        transform: scaleY(.8);
    }
}

@keyframes normal {
    25% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(.4);
    }

    75% {
        transform: scaleY(.6);
    }
}

@keyframes loud {
    25% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(.4);
    }

    75% {
        transform: scaleY(1.2);
    }
}

#cbot-localstorage {
    display: none;
}

.disabled-background {
    height: 0vh;
    display: none;
}

.cbot-disabled-background-chat {
    height: calc(100% - 45px) !important;
}

.disabled-illussion {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transform: translateY(-10px) translateX(-10px);
}

.cbot-send-survey-button {
    display: none;
    position: absolute;
    cursor: pointer;
    width: auto;
    height: auto;
    top: 20px;
    right: 6px;
    z-index: 999;
    float: left;
}

.cbot-livechat-started-icon {
    display: none;
}

.cbot-join-chat-container {
    width: 236px;
    box-sizing: border-box;
    padding: 16px;
    background-color: #ebeef4;
    background-color: #ffffff;
    /* box-shadow: 2px 2px 10px #ececec; */
    box-shadow: 0 5px 30px 0 rgba(22, 189, 200, 0.3);
    font-size: 14px;
    color: #222943;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    font-family: 'Metropolis', 'Tahoma';
    position: absolute;
    bottom: 0px;
    right: 0;
    user-select: none;
    transition: .5s;
    display: none;
    padding-bottom: 90px;
    border-radius: 5px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 50px;
}

.cbot-join-chat-container-close {
    content: "";
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: -2px;
    top: -15px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cbot-popup-close.svg) no-repeat;
    background-size: 21px 21px;
    width: 30px;
    height: 30px;
    background-size: cover;
}

.cbot-join-chat-text {
    margin: 0 0 11px 0;
    display: block;
    color: #222943;
    font-family: "Metropolis";
    font-weight: 100;
}

.cbot-join-chat-image {
    height: 163px;
    width: 204px;
    margin-bottom: 11px;
}

.cbot-join-chat-button-primary {
    margin: 6px 0;
    background-color: #002855;
    font-size: 16px;
    color: white;
    width: 100%;
    border: 0;
    height: 44px;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-join-chat-button-secondary {
    margin: 6px 0;
    background-color: #fff;
    font-size: 16px;
    width: 100%;
    color: #222943;
    font-family: 'Metropolis', 'Tahoma';
    border: 1px solid #222943;
    height: 44px;
    border-radius: 3px;
    cursor: pointer;
}

.cbot-msg-custom-button .cbot-description {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
    /* padding: 0 5px; */
}

.cbot-msg-custom-button .cbot-buttons {
    width: 100%;
    height: auto;
    margin-top: auto;
    margin-bottom: 10px
}

.cbot-msg-custom-button .cbot-button_component-description {
    margin-top: 0px;
}

.cbot-msg-custom-button .cbot-buttons a {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-msg-custom-button .cbot-title {
    padding: 0px;
    font-weight: 700;
    /* color: #2599fc; */
    font-size: 16px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    text-align: center;
}

.cbot-msg-custom-button .cbot-subtitle {
    padding: 0px;
    /* color: #5d709b; */
    font-family: 'Metropolis', 'Tahoma';
    margin: 0;
    /* font-size: 10px;
    color: #bebeb7; */
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin: 0;
    width: 100%;
    /* text-align: center; */
    box-sizing: border-box;
    margin-top: 15px;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button-suggestion {
    line-height: 3;
    border: 0;
    margin-bottom: 2px;
    background: white;
    margin-right: 8px;
    height: 32px;
    line-height: 32px;
    border-radius: 15px;
    padding: 0 8px;
    margin-top: 8px;
    box-shadow: 2px 2px 2px #dcdcdc;
    cursor: pointer;
    display: inline-block;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button-suggestion:hover {
    color: #fff;
    background-color: #00a1af
}

.cbot-msg-custom-button .cbot-buttons .cbot-button {
    line-height: 3;
    text-align: center;
    font-size: 14px !important;
    width: 100%;
    /* height: 30px; */
    font-weight: 500;
    border: 1px solid #f1f1f1;
    background-color: #fff;
    cursor: pointer;
    white-space: pre;
    overflow: hidden;
    /* border-radius: 5px; */
    background-color: #FFF;
    border: 0;
    /* border: 1px solid #1F8CEB; */
    color: #00a1af;
    margin: 6px 0;
    padding: 0;
    box-sizing: border-box;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button.primary {
    background-color: #1F8CEB;
    color: #FFF;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button.primary:hover {
    /* background-color:#1F8CEB; */
    color: #FFF;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button:disabled {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button:disabled:hover {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button.secondary {
    border: solid 1px #2599fc;
    background: #FFF;
    color: #2599fc;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button.secondary:hover {
    color: #FFF;
}

.cbot-msg-custom-button .cbot-buttons .cbot-button a {
    font-weight: 500;
    color: #4667d7;
    text-decoration: none
}

.cbot-msg-custom-button .cbot-buttons .cbot-button:hover {
    color: #fff;
    background-color: #00a1af
}

.cbot-msg-custom-button .cbot-buttons .cbot-button:hover a {
    color: #fff;
    text-decoration: none
}

.cbot-msg-custom-button .cbot-buttons .cbot-primary {
    line-height: 3;
    text-align: center;
    width: 100%;
    font-weight: 500;
    border: 1px solid #f1f1f1;
    background-color: #fff;
    cursor: pointer;
    white-space: pre;
    overflow: hidden;
    background-color: #FFF;
    border: 0;
    margin: 6px 0;
    padding: 0;
    background: #002855;
    color: white;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #002855;
    box-sizing: border-box;
}

.cbot-msg-custom-button .cbot-buttons .cbot-secondary:hover {
    border: 1px solid #002855;
}

.cbot-msg-custom-button .cbot-buttons .cbot-secondary {
    line-height: 3;
    text-align: center;
    width: 100%;
    font-weight: 500;
    cursor: pointer;
    white-space: pre;
    overflow: hidden;
    margin: 6px 0;
    padding: 0;
    background: #FFF;
    color: #002855;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #002855;
    display: block;
}

.cbot-msg-custom-button .cbot-buttons .cbot-secondary:hover {
    border: 1px solid #00a1af;
}

.cbot-other .cbot-msg-custom-button {
    background-color: transparent;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 0;
    max-width: 284px;
    width: 100%;
}

.cbot-dialog-button-image {
    z-index: 999999;
    position: absolute;
    width: auto;
    height: 100%;
}

#lottie-animation {
    z-index: 999999;
    position: absolute;
    width: 100%;
    height: 100%;
}

.cbot-mobile-body #cbot-web-area {
    height: 100%;
    width: 100%;
    transform: unset;
    z-index: 99999999;
}

.cbot-mobile-body .cbot-web-area-header {
    border-radius: unset !important;
}

@media screen and (max-width:800px) {
    #cbot-web-area {
        height: 100%;
        width: 100%;
        transform: unset;
        z-index: 99999999;
    }

    .cbot-web-area-header {
        border-radius: unset !important;
    }
}

.cbot-table-header {
    margin: 0px 0px 25px 7px;
}

.cbot-table-template .cbot-table-header-p {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #222943;
}

.cbot-table-template .cbot-table-header-p:first-child {
    font-size: 16px;
    font-weight: normal;
    color: #717D8D;
}

.cbot-table-body {
    margin: 47px 6px 33px 8px;
}

.cbot-table-body-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    width: 250px;
}

.cbot-table-body-row:last-child {
    border-bottom: none;
}

.cbot-table-body-row-key {
    color: #414C5B;
    font-size: 12px;
    flex: 1;
    word-break: break-word;
    min-width: 0;
}

.cbot-table-body-row-value {
    font-weight: bold;
    color: #414C5B;
    font-size: 12px;
    white-space: nowrap;
    margin-left: 10px;
}

.cbot-msg:has(.cbot-table-template) {
    background-color: white;
    border: 2px solid #f0f2f5;
    border-radius: 9px !important;
}

.cbot-element-divider {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 10px 0;
}

.cbot-chart-header {
    margin: 0px 0px 25px 7px;
    color: #333;
}

.cbot-threshold-bar-chart-template .cbot-chart-title {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #222943;
}

.cbot-chart-title:first-child {
    font-size: 16px;
    font-weight: normal;
    color: #717D8D;
}

.cbot-chart-body {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-top: 30px;
}

.cbot-chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}

.cbot-bar {
    height: 100px;
    position: relative;
    width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cbot-bar.above-average {
    height: 134px;
}


.cbot-bar-blue {
    border-radius: 12px;
    width: 20px;
    flex-grow: 1;
    background: linear-gradient(281.87deg, #0ABEC7 17.36%, #049EAD 82.64%);
}

.cbot-bar-red {
    background-color: #E63425;
    border-radius: 10px 9px 0 0;
    width: 20px;
    height: 37px;
    position: absolute;
}

.cbot-bar-value {
    margin-top: 5px;
    margin-bottom: 6px;
    font-size: 10px;
    color: #717D8D;
}

.cbot-bar-label {
    margin-top: 5px;
    font-size: 10px;
    color: #717D8D;
    text-align: center;
    line-height: 1.4;
}

.cbot-msg:has(.cbot-threshold-bar-chart-template) {
    background-color: white;
    border: 2px solid #f0f2f5;
    border-radius: 9px !important;
}

#cbot-overlay-background {
    display: none;
    opacity: 0;
}


.cbot-component.custom-component {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 313px !important;
}

.cbot-dialog-button-hide-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 99999999999999;
}

#particles-container {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 50%;
}

.cbot-dialog-speech-content-top {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cbot-dialog-speech-content-bottom {
    height: 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.cbot-dialog-speech-content-bottom-mic-button-open {
    width: 60px;
    height: 60px;
    background-color: rgba(128, 128, 128, 0.2);
    opacity: 0.8;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: none;
    
    /* Daha kapsamlı transition */
    transition: all 0.1s ease-out;
    transform: scale(1);
}

.cbot-dialog-speech-content-bottom-mic-button-muted {
    width: 60px;
    height: 60px;
    background-color: rgb(172, 48, 48);
    opacity: 0.8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cbot-dialog-speech-content-bottom-close-button {
    width: 60px;
    height: 60px;
    background-color: rgba(128, 128, 128, 0.2);
    opacity: 0.8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cbot-dialog-speech-content-bottom-close-button:hover,
.cbot-dialog-speech-content-bottom-mic-button-open:hover {
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.cbot-dialog-speech-content-bottom-mic-button-muted:hover {
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
@charset "UTF-8";



@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/metropolis/Metropolis-Bold.woff2') format('woff2'),
        url('../fonts/metropolis/Metropolis-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/metropolis/Metropolis-Regular.woff2) format('woff2');
}


.cbot-dialog,
.cbot-dialog-button .title {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-chat .avatar img,
.cbot-chat .day,
.cbot-dialog-head,
.cbot-msg img,
.cbot-msg time {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.cbot-remove {
    display: none
}

.cbot-dialog {
    background-color: #fff;
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 350px;
    height: 85%;
    border-radius: 10px;
    box-shadow: 0 0 10px #efefef;
    z-index: 999999999;
    font-size: 14px;
    color: #333;
    /* overflow: hidden */
}

.cbot-dialog a {
    text-decoration: none;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-close-icon-new {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cbot-close-new.svg) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
}

/* Preloading */
body::after {
    content: url(../img/flat/cbot-close-new.svg) url(../img/flat/send-active.png) url(../img/flat/send-disabled.svg) url(../img/flat/askquestion2.svg);
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

.cbot-help-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 22px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cbot-close-new.svg) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
}

.cbot-help-icon:hover {
    color: #fff;
    /* background: #042f67; */
}

/* .cbot-cog-icon {
    color: #042f67;
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cog.png) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
} */

.cbot-cog-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    /* left: 25px; */
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/askquestion2.svg) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
    left: unset;
}

.cbot-cog-icon:hover {
    color: #fff;
    /* background: #042f67; */
}

.cbot-dialog-button,
.cbot-dialog-icon {
    position: fixed;
    background: linear-gradient(to bottom right, #2754b9, #00326c);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    z-index: 999999999
}

.cbot-dialog-icon {
    bottom: 10px;
    right: 0;
    width: 300px;
    height: 150px;
    background-size: contain
}

.cbot-help {
    /* width: 100%; */
    height: 100%;
    margin-top: 0;
    overflow: hidden;
    padding-top: 0;
    background-color: #fff;
    color: #1d3974;
    padding: 10px 10px;
}

.cbot-help-text {
    height: calc(100% - 100px);
    word-break: break-word;
    overflow-y: auto;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
    color: black;
}

.cbot-help #calculate-exchange-icon {
    left: 0;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) !important
}

.cbot-help #banking-icon {
    left: 32px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -32px 0 !important
}

.cbot-help #tl-icon {
    left: 64px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -64px 0 !important
}

.cbot-help #credit-card-icon {
    left: 96px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -96px 0 !important
}

.cbot-help #atm-icon {
    left: 128px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -128px 0 !important
}

.cbot-help #digital-banking-icon {
    left: 224px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -224px 0 !important
}

.cbot-help #calculate-credit-icon {
    left: 160px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -160px 0 !important
}

.cbot-help #deposit-icon {
    left: 192px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -192px 0 !important
}

.cbot-overlay-help-collapse-on {
    overflow: hidden;
    transition: transform 0.3s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
}

.cbot-overlay-help-collapse-off {
    transform: scaleY(0);
}

.cbot-dialog-help-menu-help {
    width: 192px;
    border-radius: 15px;
    background: #5d709a;
    color: #ffffff;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    position: absolute;
    z-index: 99999;
    bottom: 0;
    text-align: center;
    bottom: 78px;
    left: 7px;
    padding: 8px 0;
    display: none;
}

.cbot-overlay-text {
    height: 75%;
}

.cbot-feedback-textarea:-webkit-scrollbar-track,
#cbot-form-message:-webkit-scrollbar-track,
.cbot-help-text:-webkit-scrollbar-track,
.cbot-list-scrollable:-webkit-scrollbar-track,
#cbot-chat::-webkit-scrollbar-track,
.cbot-overlay-text::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #FFF;
}

.cbot-feedback-textarea::-webkit-scrollbar,
#cbot-form-message::-webkit-scrollbar,
.cbot-help-text::-webkit-scrollbar,
.cbot-list-scrollable::-webkit-scrollbar,
#cbot-chat::-webkit-scrollbar,
.cbot-overlay-text::-webkit-scrollbar {
    width: 6px;
    background-color: #FFF;
}

.cbot-feedback-textarea::-webkit-scrollbar-thumb,
#cbot-form-message::-webkit-scrollbar-thumb,
.cbot-help-text::-webkit-scrollbar-thumb,
.cbot-list-scrollable::-webkit-scrollbar-thumb,
#cbot-chat::-webkit-scrollbar-thumb,
.cbot-overlay-text::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 5px;
}

.cbot-doc-content:-webkit-scrollbar-track,
.cbot-dropdown-content:-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar,
.cbot-dropdown-content::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar-thumb,
.cbot-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 5px;
    cursor: pointer;
}

.cbot-dialog-help-menu-help:before {
    border: 5px solid #5d709a;
    content: '';
    position: absolute;
    bottom: -5px;
    left: 15px;
    transform: rotate(45deg);
}

.cbot-dialog-button {
    bottom: 10px;
    right: -270px;
    width: 270px;
    height: 100px;
    background-size: contain;
    z-index: 999999999
}

.cbot-dialog-button .icon {
    width: 61px;
    height: 66px;
    margin-top: 20px;
    margin-left: 20px;
    float: left
}

.cbot-dialog-button .title {
    float: left;
    width: 150px;
    height: 66px;
    margin-left: 15px;
    margin-top: 20px;
    color: #fff;
    font-size: 15px;
    position: relative
}

.cbot-dialog-button .button-area {
    position: absolute;
    bottom: 0;
    left: 0
}

.cbot-dialog-button .button-area .button {
    width: 55px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    background: linear-gradient(to bottom right, #2754b9, #175daf);
    float: left;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    border-radius: 45px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .42);
    transition: all .3s ease 0s
}

.cbot-dialog-button-title {
    position: fixed;
    bottom: 85px !important;
    right: 20px !important;
    font-size: 15px !important;
    color: #1F8CEB;
    font-family: 'Metropolis', 'Tahoma' !important;
    font-weight: bolder !important
}

#cbot-form-message,
.cbot-last,
.cbot-msg,
.cbot-msg time:before,
.cbot-name,
.cbot-survey {
    font-family: 'Metropolis', 'Tahoma'
}

.cbot-dialog-button-help-message {
    border-radius: 50px;
    width: 215px;
    position: absolute;
    bottom: 91px;
    right: 0px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    /* background: center no-repeat #e6267c !important; */
    z-index: 999999999;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    border-radius: 15px;
    padding: 6px 12px;
}

.cbot-dialog-button-help-message:before {
    /* border: 5px solid #e6267c; */
    /* HAHAHAHA */
    content: '';
    position: absolute;
    bottom: -3px;
    right: 20px;
    transform: rotate(45deg);
}

.cbot-dialog-button-regular {
    height: 61px;
    width: 61px;
    /* position: fixed; */
    position: static;
    /* bottom: 20px; */
    /* right: 20px; */
    cursor: pointer;
    background-repeat: no-repeat;
    z-index: 999999999
}

.cbot-animation-holder {
    bottom: 20px;
    right: 20px;
    position: fixed;
    display: block;
    z-index: 999999999;
}

/* 
.cbot-dialog-button-regular:hover + .cbot-dialog-button-help-message {
    color:#F00;
}
 */

.cbot-dialog-button-close {
    display: none;
    border-radius: 50px;
    height: 60px;
    width: 60px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: url(../img/flat/cbot-close-icon.png) center no-repeat #00326c !important;
    z-index: 999999999
}

.cbot-head-cover {
    width: 100%;
    height: 59px;
}

.cbot-dialog-head {
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    /* line-height: 60px; */
    height: 55px;
    z-index: 100;
    padding: 2px 10px;
    /* cursor: pointer; */
    /* box-shadow: 0 2px 2px #ccc; */
    /* box-shadow: 0 2px 0px #d7dff1; */
    box-shadow: 0 1px 0px rgba(30, 57, 116, .1);
    background: #FFF;
    box-sizing: content-box;
    /* background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
}

.cbot-dialog-sozlesme {
    width: 100%;
    /* border-radius: 10px; */
    font-size: 14px;
    color: #333;
    overflow: hidden;
    display: block;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    height: 55px;
    z-index: 100;
    padding: 2px 0;
    /* box-shadow: 0 2px 0px #d7dff1; */
    background: #3278cd;
    display: none;
    position: absolute;
    box-sizing: content-box;
}

.cbot-dialog-sozlesme span {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-dialog-head .cbot-avatar {
    display: block;
    float: left;
    margin-top: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    max-width: 70%;
    width: 100%;
    text-align: center;
}

.cbot-dialog-head .cbot-avatar img {
    height: 35px;
    vertical-align: unset !important;
    /* display: block; */
    margin-right: 5px;
    /* float: left; */
    /* max-width: 70%;*/
}

.cbot-dialog-head .cbot-avatar span {
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-size: 16px;
    color: #000;
    /* float: left; */
    /* max-width: 130px; */
    /* max-width: calc(100% - 70px); */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Metropolis', 'Tahoma';
    text-align: center;
}

.cbot-survey {
    text-align: center;
    background-color: #4463da;
    padding: 10px;
    border-radius: 100px;
    width: 290px;
    height: 100px;
    display: none;
    position: absolute !important;
    top: 40%;
    left: 25px;
    opacity: 0;
    z-index: 9999999 !important;
    color: #fff;
    font-size: 15px
}

.cbot-survey-text {
    margin-top: 15px;
    width: 100%
}

input::-ms-clear {
    display: none
}

.cbot-back,
.cbot-back img,
.cbot-last,
.cbot-name {
    position: absolute
}

.cbot-back {
    width: 90px;
    height: 50px;
    top: 13%;
    left: 0;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    cursor: pointer
}

.cbot-back img {
    top: 5px;
    left: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .98);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    margin-left: 15px
}

.cbot-back:active {
    background: rgba(255, 255, 255, .2)
}

.cbot-chat .avatar,
.cbot-chat .avatar img {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .9)
}

.cbot-name {
    top: 25%;
    left: 90px;
    font-size: 25px;
    font-weight: 300;
    color: rgba(255, 255, 255, .98);
    cursor: default
}

.cbot-last {
    top: 30px;
    left: 115px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
    cursor: default
}

.cbot-chat {
    list-style-type: none;
    /* padding: 15px 0; */
    padding: 0;
    /* margin: 15px 0 0 0; */
    margin: 2px 0 0 0;
    /* max-height: 70%; */
    /* height: calc(100% - 134px);  */
    /* height: calc(100% - 155px); */
    height: calc(100% - 175px);
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.cbot-alert-welcome-message {
    display: none;
}

.cbot-alert-welcome-message {
    background: #fff9e7;
    color: grey;
    width: 100%;
    padding: 5px 0px;
    text-align: center;
    display: none;
    position: absolute;
    z-index: 999;
}

.cbot-chat li {
    /* overflow: hidden; */
    /* overflow-x: hidden; */
    display: flex
}

.cbot-chat>li:nth-of-type(1) {
    margin-top: 15px;
}

.cbot-chat .avatar {
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%
}

.cbot-chat .avatar img {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%
}

.cbot-chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: silver;
    height: 20px;
    text-shadow: 7px 0 0 #e5e5e5, 6px 0 0 #e5e5e5, 5px 0 0 #e5e5e5, 4px 0 0 #e5e5e5, 3px 0 0 #e5e5e5, 2px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 0 0 0 #e5e5e5, -1px 0 0 #e5e5e5, -2px 0 0 #e5e5e5, -3px 0 0 #e5e5e5, -4px 0 0 #e5e5e5, -5px 0 0 #e5e5e5, -6px 0 0 #e5e5e5, -7px 0 0 #e5e5e5;
    box-shadow: inset 20px 0 0 #e5e5e5, inset -20px 0 0 #e5e5e5, inset 0 -2px 0 #d7d7d7;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default
}

.cbot-other:before,
.cbot-self .avatar:after {
    content: "";
    width: 0;
    height: 0;
    position: relative;
    right: 0
}

.cbot-other:after{
    display: none;
}

.cbot-other .msg {
    order: 1;
    border-top-left-radius: 0;
    box-shadow: -1px 2px 0 #D4D4D4
}

/* .cbot-other:before { */

/* top: 0;
    left: 40px;
    border: 5px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent */

/* } */

.cbot-other .cbot-msg {
    border-top-left-radius: 0;
    /* background: #f4f7f9; */
    border: solid 1px #ebf0f5;
    background: #f0f4f8;
    margin-left: 10px;
    border: 0;
    /* padding: 3px; */
    color: #5d709b;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    box-sizing: content-box;
    /* overflow: hidden; */
    /* width:250px; */
    /* letter-spacing: -0.2333333px; */
}

/* .cbot-other .cbot-msg:first-child {
    margin-top: 15px;
} */

.cbot-self {
    justify-content: flex-end;
    align-items: flex-end
}

.cbot-self .cbot-msg {
    border-top-right-radius: 0;
    margin-right: 10px;
    /* background: #e1e7f9; */
    background: #3278cd;
    color: #FFFFFF;
    word-break: break-word;
}

.cbot-self .msg {
    order: 1;
    border-bottom-right-radius: 0;
    box-shadow: 1px 2px 0 #D4D4D4
}

.cbot-self .avatar {
    order: 2
}

.cbot-self .avatar:after {
    display: inline-block;
    bottom: 19px;
    border: 5px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 0 2px 0 #D4D4D4
}

.cbot-carousel-wrapper {
    overflow: hidden;
}

.cbot-msg {
    background: #f2f0ff;
    min-width: 50px;
    max-width: 280px;
    /* padding: 3% 3% 3% 2%; */
    padding: 10px;
    border-radius: 16px;
    font-size: 14px;
    color: rgba(30, 57, 116, 1);
    word-break: break-word;
    /* overflow: hidden; */
    overflow: visible;
    position: relative;
    line-height: 20px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}

.cbot-msg .cbot-arrow {
    position: absolute;
    /* top: 75px; */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    line-height: 16px;
    color: #333;
    font-weight: 700;
    /* z-index: 99999; */
    z-index: 990;
    cursor: pointer;
    text-align: center
}

.cbot-msg img,
.cbot-msg time {
    cursor: default
}

.cbot-arrow.left {
    left: 0;
    background: url(../img/flat/arrow-blue-left.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
}

.cbot-arrow.right {
    right: 0;
    background: url(../img/flat/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 16px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
    transition: .1s;
}

.cbot-msg p {
    font-size: 14px;
    margin: 0 0 .2rem;
    font-family: 'Metropolis', 'Tahoma';
    line-height: 19px;
    /* font-weight: 600; */
    /* color: #5d709b; */
    text-align: left;
    /* color: #777 */
}

.cbot-msg img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 3px #eee;
    transition: all .4s cubic-bezier(.565, -.26, .255, 1.41)
}

.cbot-msg time {
    font-size: .7rem;
    color: #ccc;
    margin-top: 3px;
    float: right
}

.cbot-msg time:before {
    content: "\f017";
    color: #ddd;
    display: inline-block;
    margin-right: 4px
}

.cbot-form-message-area {
    width: calc(100% - 20px);
    height: 73px;
    background: #fff !important;
    position: absolute;
    bottom: 20px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    overflow: hidden;
    z-index: 99;
    margin: 0 auto 0 10px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 5px;
    font-size: 16px;
}

/* ripple effect */

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

.ripple_effect {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-align: center;
    color: #3278cd;
    background: transparent;
    position: absolute;
    bottom: 50px;
}

.ripple_effect_button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5em;
    height: 2em;
    margin-left: -2.5em;
    margin-top: -1em;
    z-index: 100;
    padding: 0.25em 0.5em;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.15em;
    font-weight: 200;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.5s;
}

.ripple_effect_button:hover {
    box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.75);
}

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

.ripple_effect>div {
display: flex;
width: 51px;
height: 28px;
margin: 0 2px;
background: transparent;
transform: scaleY(1.9);
opacity: 1;
}

.ripple_effect.error {
    color: #f7451d;
    min-width: 20em;
    max-width: 30em;
    margin: 0 auto;
    white-space: pre-line;
}

/* ripple effect finish */


.cbot-secondary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    background: #2599fc;
    border: 1px solid #2599fc;
    color: #ffffff;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    outline: none;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 75px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
}

.cbot-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
    text-align: center;
    line-height: 40px;
}

.cbot-okudum-anladim {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    /* width: 60%; */
    white-space: nowrap;
    width: 266px;
    font-family: 'Metropolis', 'Tahoma';
    color: #1d3974;
}

/*
checkbox private1
*/

.cbot-checkbox-checkmark-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    white-space: nowrap;
    width: 266px;
    font-family: 'Metropolis', 'Tahoma';
    color: #1d3974;
}

/* Hide the browser's default checkbox */

.cbot-checkbox-checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */

.cbot-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #FFF;
    border: solid 1px #d6d9e0;
}

/* On mouse-over, add a grey background color */

.cbot-checkbox-checkmark-container:hover input~.cbot-checkbox-checkmark {
    background-color: #FFF;
}

/* When the checkbox is checked, add a blue background */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark {
    background-color: #FFF;
}

/* Create the cbot-checkbox-checkmark/indicator (hidden when not checked) */

.cbot-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the cbot-checkbox-checkmark when checked */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark:after {
    display: block;
}

/* Style the cbot-checkbox-checkmark/indicator */

.cbot-checkbox-checkmark-container .cbot-checkbox-checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #3278cd;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#cbot-form {
    overflow-y: unset !important;
}

#cbot-form-message {
    background: #fff;
    border: none;
    outline: 0;
    padding-left: 15px;
    padding-right: 15px;
    color: #666;
    font-weight: 400;
    font-size: 16px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
    /* overflow: hidden; */
    resize: none;
    height: 62px;
    padding: 5px;
    outline: 0;
    width: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    position: relative;
    background: transparent;
}

.cbot-illusion-placeholder {
    position: absolute;
    font-size: 14px;
    user-select: none;
    padding: 5px 5px 5px 8px;
    color: rgb(109, 109, 109);
    display: block;
}

.cbot-form-message-area .cbot-send-button-info {
    border: 0;
    background: url(../img/flat/list-type.png) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
    cursor: pointer;
    display: block;
    float: left;
    margin: 12px 0 0 12px;
}

.cbot-form-message-area .cbot-send-button-info:focus {
    outline: none;
}

.cbot-form-message-area .cbot-send-button {
    position: absolute;
    cursor: pointer;
    width: 32px;
    height: 32px;
    top: 20px;
    right: 6px;
    z-index: 999;
    border: none;
    float: left;
    display: block;
    background: url(../img/flat/send-disabled.svg) no-repeat;
    background-size: 32px 32px !important;
}

.cbot-form-message-area .cbot-send-button.active {
    background: url(../img/flat/send-active.png) no-repeat;
}

.cbot-form-message-area .cbot-send-button:focus {
    outline: none;
}

.cbot-new-help-sentences li {
    color: #1d3974;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    letter-spacing: -0.2333333px;
    background: #ffffff;
    border-bottom: 1px solid #e0e6ed;
}

.cbot-new-help-sentences li:last-child {
    border-bottom: 0;
}

.cbot-new-help-sentences li a {
    text-decoration: none;
    color: #1d3974;
    padding: 15px 5px;
    display: block;
    width: 100%;
}

.cbot-new-help-sentences li:hover {
    background: rgba(224, 230, 237, .3);
}

[cbot-tooltip]:before {
    /* needed - do not touch */
    content: attr(cbot-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 10px;
    z-index: 999999999;
    color: #333;
    border-radius: 10px;
    /* box-shadow: 2px 2px 1px #caa5a5; */
    /* background: #CCC; */
    /* left: -50%; */
    transform: translateX(calc(-50% + 10px));
}

[cbot-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    background: #f0f4f8;
    margin-top: -50px;
    color: #003c6c;
}

[cbot-tooltip]:not([cbot-tooltip-persistent]):before {
    pointer-events: none;
}

@media screen and (max-width:800px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block
    }

    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: 'Metropolis', 'Tahoma';
        font-size: 14px;
        color: #333
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        /* padding: 5px 10px; */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        box-shadow: 0 2px 0px #d7dff1;
        /*  background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
        background: #FFF;
    }

    .cbot-msg {
        max-width: 280px
    }

    .cbot-msg img {
        width: 300px
    }

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 45px;
        top: 22px;
        border-radius: 3px
    }

    .cbot-overlay-text {
        height: 67%;
    }

    [cbot-tooltip]:before {
        display: none;
    }

    [cbot-tooltip]:hover:before {
        display: none;
    }

    [cbot-tooltip]:not([cbot-tooltip-persistent]):before {
        display: none;
    }

    /*     .cbot-chat {
        display: flex;
        flex-direction: column;
    }

    .cbot-chat>li:nth-of-type(1) {
        margin-top: auto !important;
    } */
}

@media screen and (max-width:150px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block
    }

    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: 'Metropolis', 'Tahoma';
        font-size: 14px;
        color: #333
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 15px;
        top: 22px;
        border-radius: 3px
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        padding: 5px 10px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        position: relative;
        /* box-shadow: 0 2px 0px #d7dff1; */
        /* background: linear-gradient(to left, #4c20de, #5895f8)!important */
        background: #FFF;
    }

    #cbot-form {
        margin-top: 30px
    }

    .cbot-msg img {
        width: 200px
    }

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

}

.cbot-component.generic-template {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cbot-component .cbot-image {
    width: 100%;
    max-height: 240px;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
    height: 133px !important;
}

.cbot-component .cbot-image img {
    width: auto !important;
    max-width: 100%;
    /* height: 100%; */
    max-height: 240px;
    margin: 0 auto;
    max-height: 133px !important;
    transform: translateY(-50%) !important;
    top: 50% !important;
}

.generic-template .cbot-description {
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px
}

.generic-template .cbot-buttons {
    width: 100%;
    height: auto;
    margin-top: auto;
    margin-bottom: 10px
}

.generic-template .cbot-button_component-description {
    margin-top: 0px;
}

.generic-template .cbot-buttons button {
    font-family: 'Metropolis', 'Tahoma';
}

.generic-template .cbot-title {
    padding: 3px;
    font-weight: 700;
    color: #2599fc;
}

.generic-template .cbot-subtitle {
    padding: 3px;
    /* color: #5d709b; */
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    letter-spacing: -0.2333333px;
}

.generic-template .cbot-buttons .cbot-button {
    /* line-height: 3; */
    text-align: center;
    font-size: 14px !important;
    width: 100%;
    /* height: 30px; */
    font-weight: 500;
    color: #4667d7;
    border: 1px solid #f1f1f1;
    background-color: #fff;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    border-radius: 5px;
    background-color: #FFF;
    border: 0;
    /* border:1px solid #1F8CEB; */
    color: #1F8CEB;
    margin-bottom: 2px;
    padding: 10px 0px;
    display: inline-table;
}

.generic-template .cbot-buttons .cbot-button.primary {
    background-color: #1F8CEB;
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button.primary:hover {
    /* background-color:#1F8CEB; */
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button:disabled {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button:disabled:hover {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button.secondary {
    border: solid 1px #2599fc;
    background: #FFF;
    color: #2599fc;
}

.generic-template .cbot-buttons .cbot-button.secondary:hover {
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button a {
    font-weight: 500;
    color: #4667d7;
    text-decoration: none;
}

.generic-template .cbot-buttons .cbot-button:hover {
    color: #fff;
    background-color: #4667d7
}

.generic-template .cbot-buttons .cbot-button:hover a {
    color: #fff;
    text-decoration: none
}

.cbot-component.list-template {
    width: 100%;
    width: 250px;
}

.list-template .cbot-list-item {
    margin: 5px 0;
    border-top: 1px solid #e1e1e1;
    padding: 5px 0;
}

.cbot-list-item-description {
    float: left;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.cbot-list-item-title {
    font-weight: 700;
    font-size: 14px !important;
    color: #2599fc;
}

.cbot-list-item-text {
    font-size: 14px !important;
    /* width: 170px; */
    width: 100%;
    max-width: 100%
}

.cbot-list-item-image {
    width: 40px;
    height: 40px;
    float: right
}

.cbot-list-item-image img {
    width: initial;
    /* height: 40px; */
    top: 50%;
    transform: translateY(-50%);
    max-width: 40px;
    max-height: 40px;
    /* margin-top: 5px; */
    margin: auto;
    /* margin-top: 5px; */
}

.cbot-list-item-button {
    padding: 3px 5px;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    float: left;
    margin-right: 3px;
    color: #337ab7;
    border: 1px solid #337ab7;
    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    font-weight: normal;
    font-family: 'Metropolis', 'Tahoma';
    box-sizing: border-box;
    line-height: 20px;
}

.cbot-list-item-button:hover {
    background-color: #1F8CEB;
    color: #FFF;
}

.cbot-typing:before {
    border: 0;
}

.cbot-typing-loader {
    margin: 8px 0 0;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    -webkit-animation: line 1s linear infinite alternate;
    -moz-animation: line 1s linear infinite alternate;
    animation: line 1s linear infinite alternate
}

.cbot-dashed-hr {
    border: 1px dashed #cbcbcb;
    border-bottom: 0;
}

.cbot-solid-hr {
    border: 1px solid #cbcbcb;
    border-bottom: 0;
}

.cbot-txn-title {
    font-size: 13px;
    color: #1d3974;
    font-family: 'Metropolis', 'Tahoma';
    font-weight: bold;
    margin-bottom: 3px;
}

.cbot-txn-subtitle {
    font-size: 13px;
    font-weight: bold;
    color: #1F8CEB;
}

.cbot-list-new-container {
    margin-top: 10px;
}

.cbot-list-new-img {

    width: 50px;
    background-size: 25px 25px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.cbot-list-new-title {
    color: #1e3974;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-list-new-subtitle {
    color: #61749d;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-component-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
}

@-webkit-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

@-moz-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

@keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

.cbot-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px;
    user-select: none;
    /* If you want dots under the hoverable text */
}

/* cbot-tooltip text */

.cbot-tooltip .cbot-tooltiptext {
    visibility: hidden;
    min-width: 60px;
    width: calc(100% - 120px);
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

/* Show the cbot-tooltip text when you mouse over the cbot-tooltip container */

.cbot-tooltip:hover .cbot-tooltiptext {
    visibility: visible;
}

/* The Modal (background) */

.cbot-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999999999;
    /* MODEL DİĞERLERİNDEN  BİR FAZLA OLMALI */
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (Image) */

.cbot-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#cbot-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */

.cbot-modal-content,
#cbot-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */

.cbot-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.cbot-modal-close:hover,
.cbot-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.cbot-msg ul li {
    overflow: visible;
    display: list-item;
}

.cbot-msg ol li {
    overflow: visible;
    display: list-item;
}

.cbot-form-message-area .textarea {
    border-radius: 0;
}

.cbot-clearfix {
    clear: both;
}

.cbot-feedback-area {
    margin-top: 7px;
}

.cbot-feedback-area .cbot-feedback-status {
    float: left;
}

.cbot-feedback-area .cbot-feedback-status-form {
    float: left;
}

.cbot-feedback-area .cbot-feedback-vote-button {
    width: 20px;
    height: 20px;
    border: 0;
    float: right;
    margin: 3px;
    padding: 0;
    cursor: pointer;
}

.cbot-vote-down-selectable {
    background: url(../img/cbot-positive-charges.png);
    background-size: 100% 100%;
    transform: scaleY(-1) scaleX(-1);
}

.cbot-vote-down-selectable:hover,
.cbot-vote-down-selectable.cbot-vote-selected {
    filter: invert(25%) sepia(88%) saturate(7476%) hue-rotate(357deg) brightness(94%) contrast(120%);
}

.cbot-vote-up-selectable:hover,
.cbot-vote-up-selectable.cbot-vote-selected {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-vote-up-selectable,
.cbot-vote-up {
    background: url(../img/cbot-positive-charges.png);
    background-size: 100% 100%;
}

.cbot-vote-up-selectable:hover {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-feedback-vote-button:active,
.cbot-feedback-vote-button:focus {
    outline: none;
}

.cbot-feedback-textarea {
    width: 100%;
    resize: none;
    height: 40px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-feedback-textarea:focus {
    outline: none;
}

.cbot-feedback-form-send {
    margin-top: 5px;
    float: right;
    background: #f0f4f8;
    border: 1px solid #5b739f;
    border-radius: 3px;
}

.cbot-feedback-form-send:disabled {
    border: 1px solid #ccc;
}

.cbot-feedback-form-send::before {
    content: "Gönder";
}

.cbot-generic-numarator {
    width: 26px;
    height: 26px;
    /* position: absolute; */
    background: #1e3974;
    right: 2px;
    border-radius: 50%;
    top: 0px;
    color: #FFF;
    text-align: center;
    line-height: 26px;
    float: right;
}

@keyframes cbotBounceIn {

    0%,
    2%,
    6%,
    10%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    4% {
        transform: translateY(-30px);
    }

    8% {
        transform: translateY(-15px);
    }
}

.cbot-bounce {
    animation: cbotBounceIn 10s infinite 2s;
}

.cbot-slide-right {
    right: -300px;
    animation: cbotSlideRight 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideRight {
    100% {
        right: 20px;
    }
}

.cbot-slide-left {
    left: -300px;
    animation: cbotSlideLeft 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideLeft {
    100% {
        left: 20px;
    }
}

.cbot-msg:hover .left,
.cbot-msg:hover .right {
    opacity: 1;
    transition: .2s;
}

/* RATING AREA */


.cbot-icon-star {
    font-style: normal;
    pointer-events: none;
}

.cbot-icon-star::before {
    /* content: '☆' */
    content: '★'
}

.cbot-rating-disabled {
    pointer-events: none;
}

.cbot-dialog-end-survey {
    transform: translateY(calc(-100% - 15px));
    position: absolute;
    right: 15px;
    width: 200px;
    padding: 15px;
    border: 5px solid #000000;
    background: #000;
    border-radius: 7px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
    text-align: center;
    padding: 9px;
    color: white;
    display: none;
}

.cbot-dialog-end-survey>span {
    display: block;
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
}

.cbot-dialog-end-survey>button {
    background: transparent;
    border: 0;
    color: black !important;
    font-size: 17px;
    cursor: pointer;
    outline: none;
    background: white;
    border-radius: 5px;
}

.cbot-dialog-end-survey>button:hover {
    color: #ccc;
}

.cbot-msg ol {
    padding-left: 15px;
}

.cbot-msg ul {
    padding-left: 15px;
}

#cbot-voice-area {
    width: 25px;
    height: 25px;
    /* float: right; */
    background: url(../img/cbot-microphone.png) no-repeat;
    background-size: 100% 100% !important;
    margin-top: -5px;
    cursor: pointer;
    position: absolute;
    display: block;
    right: 43px;
    top: 30px;
}

#cbot-voice-area.active {
    background: url(../img/cbot-microphone_active.png) no-repeat;
}

#cbot-attachment-area {
    width: 40px;
    height: 40px;
    /* float: right; */
    background: url(../img/cbot-attachment.png);
    background-size: 100% 100%;
    margin-top: -5px;
    margin-right: -5px;
    cursor: pointer;
    position: absolute;
    right: 43px;
    top: 20px;
}

#cbot-attachment-area img {
    display: block;
    width: 30%;
    margin: 20px auto;
}

#cbot-attachment-area span {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.cbot-attachment-container {
    display: none;
    width: 200px;
    height: 100px;
    background: white;
    position: fixed;
    transform: translateX(calc(-100% + 40px)) translateY(-100%);
    -ms-transform: translateX(-100%) translateX(40px) translateY(-100%);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #ccc;
    transition: .1s;
    opacity: 1;
    overflow: hidden;
    user-select: none;
}

.cbot-attachment-container .cbot-attachment-block {
    transition: 0;
    background: #fff;
}

.cbot-attachment-container .cbot-attachment-block:hover {
    transition: .1s;
    background: #ccc;
}

.cbot-attachment-container.active {
    /* display: block; */
    opacity: 1;
}

.cbot-attachment-image {
    width: 50%;
    /* background-image: url(../img/cbot-gallery.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-location {
    width: 50%;
    /* background-image: url(../img/cbot-location-image.png); */
    /* background-size: 100% 100%; */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-video {
    width: 50%;
    /* background-image: url(../img/cbot-location-image.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-file {
    width: 50%;
    /* background-image: url(../img/filfesicon.png);
    background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-form-message-area .textarea::placeholder {
    color: #828282;
}

.cbot-help-text ul {
    padding: 0 0 0 40px;
    margin: 14px 0;
}

.cbot-help-text ul li {
    list-style-type: disc;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
}


@media screen and (max-width:768px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-survey-fadebg {
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99998;
        background-color: #000;
        opacity: .3;
        display: none;
    }

    /*     .cbot-chat {
        display: flex;
        flex-direction: column;
    }

    .cbot-chat>li:nth-of-type(1) {
        margin-top: auto !important;
    } */

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }
}

#cbot-web-area {
    right: 0;
    position: fixed;
    transform: translate(-370px);
    width: 900px;
    width: calc(100% - 380px);
    max-width: 900px;
    height: 85%;
    display: none;
    opacity: 0;
}

.cbot-web-area-content {
    background: #f1f1f1;
    height: calc(100% - 70px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
    overflow: hidden;
}

.cbot-web-area-header {
    height: 59px;
    background: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
}

.cbot-web-area-content iframe {
    width: 100%;
    height: 100%;
}

.cbot-web-image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.cbot-web-image img {
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-video {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
}

.cbot-web-video iframe {
    width: 100%;
}

.cbot-web-video-container {
    height: 100%;
    width: 100%;
    background: black;
}

.cbot-web-video video {
    outline: none;
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-close {
    background-image: url(../img/cbot-chevron-right-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-web-reload {
    background-image: url(../img/cbot-reload-icon-16912-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-doc-content {
    padding: 5px;
    box-sizing: content-box;
    overflow-y: scroll;
    height: calc(100% - 10px);
}

.cbot-doc-content img {
    max-width: 100%;
}

.cbot-doc-content table {
    border-collapse: collapse;
}

.cbot-doc-content td {
    border: 1px solid #000;
}

.cbot-doc-content ol {
    list-style: decimal;
}

.cbot-doc-content ol ol {
    list-style: lower-alpha;
}

.cbot-description ol {
    list-style: decimal;
}

.cbot-description ol ol {
    list-style: lower-alpha;
}

.cbot-description table {
    border-collapse: collapse;
}

.cbot-description td {
    border: 1px solid #000;
}

.cbot-triple-dot {
    background-image: url(../img/cbot-tripledot-flat.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 25px;
    float: left;
    width: 12px;
    margin-right: 5px;
    margin-top: 15px;
    /* background: white; */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    /* background-color: red; */
    background-color: #5a729e;
}

.cbot-count-badge {
    background: red;
    color: #fff;
    width: 15px;
    height: 15px;
    float: right;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    font-family: Arial;
    padding: 2px 1px 0px 1px;
    display: none;
}

.cbot-livechat-close {
    width: 100%;
    background: #bc1831;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}
.cbot-livechat-close img{
    display: none;
    width: 18px;
    height: 18px;
    box-shadow: none;
    margin: 0px 0px -4.3px 7px;
  }

.cbot-livechat-close img{
    display: none;
    width: 18px;
    height: 18px;
    box-shadow: none;
    margin: 0px 0px -4.3px 7px;
}

.cbot-start-meeting {
    width: 100%;
    background: #18bc39;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    top: 86px;
}

.cbot-dialog-end-timer {
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 94px;
    background: beige;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}

.cbot-dialog-end-timer span {
    font-weight: bold;
}

.cbot-dropdown-input {
    box-sizing: border-box;
    background-image: url(../img/search.png);
    background-position: 14px 12px;
    background-size: 26px;
    background-repeat: no-repeat;
    font-size: 14px;
    padding: 14px 15px 10px 30px;
    border: none;
    border-bottom: 2px solid #f6f6f6;
    outline: none;
    background-color: #e7e4e4;
}

.cbot-dropdown-input:disabled {
    border-bottom-color: #ddd;
}

.cbot-dropdown-input:focus {
    /* outline: 3px solid #ddd; */
}

.cbot-dropdown {
    position: relative;
    display: inline-block;
}

.cbot-dropdown-content {
    display: none;
    position: initial;
    bottom: 48px;
    background-color: #f6f6f6;
    /* min-width: 248px; */
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    max-height: 137px;
}

.cbot-dropdown-content button {
    color: black;
    padding: 9px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    outline: none;
}

.cbot-dropdown-content button:hover {
    background-color: #ccc;
}

.cbot-dropdown a:hover {
    background-color: #ddd;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

#cbot-attachment-file-input {
    display: none;
}

.cbot-attachment-file-input {
    display: none !important;
}

/* COLORFUL SURVEY STYLING */

.cbot-colorful-radio-container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    float: left;
}

.cbot-colorful-radio-container input {
    /* position: absolute;
    opacity: 0;
    cursor: pointer; */
    display: none;
}

.cbot-colorful-radio-span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 0px 1px white inset;
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    user-select: none;
}

.cbot-colorful-radio-container:hover input~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white;
}

.cbot-colorful-radio-container input:checked~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white
}

.cbot-colorful-radio-container-styling-0 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-0:hover input~.cbot-colorful-radio-span-styling-0,
.cbot-colorful-radio-container-styling-0 input:checked~.cbot-colorful-radio-span-styling-0 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-1 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-1:hover input~.cbot-colorful-radio-span-styling-1,
.cbot-colorful-radio-container-styling-1 input:checked~.cbot-colorful-radio-span-styling-1 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-2 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-2:hover input~.cbot-colorful-radio-span-styling-2,
.cbot-colorful-radio-container-styling-2 input:checked~.cbot-colorful-radio-span-styling-2 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-3 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-3:hover input~.cbot-colorful-radio-span-styling-3,
.cbot-colorful-radio-container-styling-3 input:checked~.cbot-colorful-radio-span-styling-3 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-4 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-4:hover input~.cbot-colorful-radio-span-styling-4,
.cbot-colorful-radio-container-styling-4 input:checked~.cbot-colorful-radio-span-styling-4 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-5 span {
    border-color: #b95121;
    color: #b95121;
}

.cbot-colorful-radio-container-styling-5:hover input~.cbot-colorful-radio-span-styling-5,
.cbot-colorful-radio-container-styling-5 input:checked~.cbot-colorful-radio-span-styling-5 {
    background-color: #b95121;
    color: white;
}

.cbot-colorful-radio-container-styling-6 span {
    border-color: #e49c40;
    color: #e49c40;
}

.cbot-colorful-radio-container-styling-6:hover input~.cbot-colorful-radio-span-styling-6,
.cbot-colorful-radio-container-styling-6 input:checked~.cbot-colorful-radio-span-styling-6 {
    background-color: #e49c40;
    color: white;
}

.cbot-colorful-radio-container-styling-7 span {
    border-color: #d1c650;
    color: #d1c650;
}
.cbot-agent-name {
color: #848484;
margin-top: 16px;
}

.cbot-livechat-started {
    display: none;
  }
.cbot-agent-started-livechat {
    display: none;
    align-items: center;
    justify-content: center;
    width: 110%;
}
  
  
  .cbot-livechat-started-text {
    margin: 0 12px 0 9px !important;
    color: #848484;
    margin-top: 5px;
    margin-left: -6px;
    align-self: center;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 3px;
  }

  .cbot-livechat-started svg:nth-child(2) {
    margin-left: 17px
  }

  .cbot-agent-name {
    margin: unset !important;
    margin-left: 9px;
  }
  
  .cbot-agent-name-wrapper {
    display: none;
    align-items: center;
    margin-top: 16px;
  }
  .cbot-vector {
    display: none;
  }

  .cbot-agent-name-wrapper svg:nth-child(1){
    margin-right: 8px;
  }

  .cbot_text_component svg:nth-child(1){
    display:none;
  }

  /* .cbot-description{
    margin-top: -9px;
    margin-left: -10px;
  }
  .cbot-subtitle{
    margin-top:-6px;
  } */


/* 
.vector-450 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1407px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  }

  .vector-451 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1670px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  } */

.cbot-agent-name {
color: #848484;
margin-top: 16px;
}

.cbot-livechat-started {
    display: none;
  }
.cbot-agent-started-livechat {
    display: none;
    align-items: center;
    justify-content: center;
    width: 110%;
}
  
  
  .cbot-livechat-started-text {
    margin: 0 12px 0 9px !important;
    color: #848484;
    margin-top: 5px;
    margin-left: -6px;
    align-self: center;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 3px;
  }

  .cbot-livechat-started svg:nth-child(2) {
    margin-left: 17px
  }

  .cbot-agent-name {
    margin: unset !important;
    margin-left: 9px;
  }
  
  .cbot-agent-name-wrapper {
    display: none;
    align-items: center;
    margin-top: 16px;
  }
  .cbot-vector {
    display: none;
  }

  .cbot-agent-name-wrapper svg:nth-child(1){
    margin-right: 8px;
  }

  .cbot_text_component svg:nth-child(1){
    display:none;
  }

  /* .cbot-description{
    margin-top: -9px;
    margin-left: -10px;
  }
  .cbot-subtitle{
    margin-top:-6px;
  } */

/* 
.vector-450 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1407px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  }

  .vector-451 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1670px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  } */

.cbot-colorful-radio-container-styling-7:hover input~.cbot-colorful-radio-span-styling-7,
.cbot-colorful-radio-container-styling-7 input:checked~.cbot-colorful-radio-span-styling-7 {
    background-color: #d1c650;
    color: white;
}

.cbot-colorful-radio-container-styling-8 span {
    border-color: #bbc730;
    color: #bbc730;
}

.cbot-colorful-radio-container-styling-8:hover input~.cbot-colorful-radio-span-styling-8,
.cbot-colorful-radio-container-styling-8 input:checked~.cbot-colorful-radio-span-styling-8 {
    background-color: #bbc730;
    color: white;
}

.cbot-colorful-radio-container-styling-9 span {
    border-color: #82b652;
    color: #82b652;
}

.cbot-colorful-radio-container-styling-9:hover input~.cbot-colorful-radio-span-styling-9,
.cbot-colorful-radio-container-styling-9 input:checked~.cbot-colorful-radio-span-styling-9 {
    background-color: #82b652;
    color: white;
}

.cbot-colorful-radio-container-styling-10 span {
    border-color: #6cba4c;
    color: #6cba4c;
}

.cbot-colorful-radio-container-styling-10:hover input~.cbot-colorful-radio-span-styling-10,
.cbot-colorful-radio-container-styling-10 input:checked~.cbot-colorful-radio-span-styling-10 {
    background-color: #6cba4c;
    color: white;
}

.cbot-colorful-radio-main-container {
    height: 25px;
}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */

.cbot-bg-none {
    background: transparent !important;
    padding: 0 !important;
}


.cbot-suggestion-button-slider {
    white-space: nowrap;
    overflow-x: scroll;
}

.cbot_text_component {
    width: initial !important;
}

.cbot-text-button-class {
    background-color: transparent !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 3px 0 0 0 !important;
}

.cbot-text-button-class:hover {
    color: #1F8CEB !important;
}

#cbot-form-message::placeholder {
    color: transparent;
}

.cbot-dialog .cbot-owl-carousel .cbot-owl-prev {
    display: none;
}

.cbot-dialog .cbot-owl-carousel .cbot-owl-next {
    display: none;
}

.cbot-dialog .cbot-owl-dots {
    height: 20px;
    text-align: center;
    display: none;
}

.cbot-dialog .cbot-owl-dot {
    margin: 5px 5px 5px 0;
    height: 10px;
    width: 10px;
    border: 1px solid #87b2d8 !important;
    border-radius: 100%;
}

.cbot-dialog .cbot-owl-dot.active {
    height: 10px;
    width: 10px;
    background-color: #1a6eb5 !important;
    border: 1px solid #1a6eb5 !important;
}

.cbot-stick-right {
    right: 0;
    left: initial !important;
}

.cbot-bottom-arrow-left {
    background: url(../img/flat/arrow-blue-left.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    width: 32px;
    height: 32px;
    float: left;
    margin: 5px;
    cursor: pointer;
}

.cbot-bottom-arrow-right {
    background: url(../img/flat/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    transition: .1s;
    width: 32px;
    height: 32px;
    float: right;
    margin: 5px;
    cursor: pointer;
}

.cbot-bottom-arrow-indicators {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border-style: solid;
    border-width: thin;
    border-color: rgb(99, 99, 99);
    margin: 2px;

}

.cbot-bottom-arrow-indicators.active {
    background-color: rgb(99, 99, 99);
}

.cbot-bottom-arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbot-chart-container {
    min-width: 280px;
    min-height: 280px;
}

.cbot-pie-chart-table-container {
    margin-top: 0px;
}

.cbot-pie-chart-headtext {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #565656;
    font-weight: 600;
    font-size: 14px;
    line-height: 18.52px;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-centertext {
    font-weight: 700;
    line-height: 23.81px;
    font-size: 18px;
    text-align: center;
    color: #231F20;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-table-index-card {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.cbot-pie-chart-table-category {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    align-items: center;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-table-value {
    /* font-family: 'Red Hat Display'; */
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    text-align: right;
    color: #231F20;
}

.cbot-pie-chart-tr {
    height: 52px;
    /* border-bottom: 1px solid #000; */
}

.cbot-chart-container {
    padding: 40px;
    margin-top: -30px;
    margin-bottom: -30px;
}
<pre><code class="css">
@charset "UTF-8";



@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/metropolis/Metropolis-Bold.woff2') format('woff2'),
        url('../fonts/metropolis/Metropolis-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/metropolis/Metropolis-Regular.woff2) format('woff2');
}


.cbot-dialog,
.cbot-dialog-button .title {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-chat .avatar img,
.cbot-chat .day,
.cbot-dialog-head,
.cbot-msg img,
.cbot-msg time {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.cbot-remove {
    display: none
}

.cbot-dialog {
    background-color: #fff;
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 350px;
    height: 85%;
    border-radius: 10px;
    box-shadow: 0 0 10px #efefef;
    z-index: 999999999;
    font-size: 14px;
    color: #333;
    /* overflow: hidden */
}

.cbot-dialog a {
    text-decoration: none;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-close-icon-new {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cbot-close-new.svg) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
}

/* Preloading */
body::after {
    content: url(../img/flat/cbot-close-new.svg) url(../img/flat/send-active.png) url(../img/flat/send-disabled.svg) url(../img/flat/askquestion2.svg);
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
}

.cbot-help-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 22px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cbot-close-new.svg) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
}

.cbot-help-icon:hover {
    color: #fff;
    /* background: #042f67; */
}

/* .cbot-cog-icon {
    color: #042f67;
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/cog.png) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
} */

.cbot-cog-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    /* left: 25px; */
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../img/flat/askquestion2.svg) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
}

.cbot-cog-icon:hover {
    color: #fff;
    /* background: #042f67; */
}

.cbot-dialog-button,
.cbot-dialog-icon {
    position: fixed;
    background: linear-gradient(to bottom right, #2754b9, #00326c);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    z-index: 999999999
}

.cbot-dialog-icon {
    bottom: 10px;
    right: 0;
    width: 300px;
    height: 150px;
    background-size: contain
}

.cbot-help {
    /* width: 100%; */
    height: 100%;
    margin-top: 0;
    overflow: hidden;
    padding-top: 0;
    background-color: #fff;
    color: #1d3974;
    padding: 10px 10px;
}

.cbot-help-text {
    height: calc(100% - 100px);
    word-break: break-word;
    overflow-y: auto;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
    color: black;
}

.cbot-help #calculate-exchange-icon {
    left: 0;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) !important
}

.cbot-help #banking-icon {
    left: 32px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -32px 0 !important
}

.cbot-help #tl-icon {
    left: 64px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -64px 0 !important
}

.cbot-help #credit-card-icon {
    left: 96px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -96px 0 !important
}

.cbot-help #atm-icon {
    left: 128px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -128px 0 !important
}

.cbot-help #digital-banking-icon {
    left: 224px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -224px 0 !important
}

.cbot-help #calculate-credit-icon {
    left: 160px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -160px 0 !important
}

.cbot-help #deposit-icon {
    left: 192px;
    width: 32px;
    background: url(../img/flat/cbot-help-icons.png) -192px 0 !important
}

.cbot-overlay-help-collapse-on {
    overflow: hidden;
    transition: transform 0.3s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
}

.cbot-overlay-help-collapse-off {
    transform: scaleY(0);
}

.cbot-dialog-help-menu-help {
    width: 192px;
    border-radius: 15px;
    background: #5d709a;
    color: #ffffff;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    position: absolute;
    z-index: 99999;
    bottom: 0;
    text-align: center;
    bottom: 78px;
    left: 7px;
    padding: 8px 0;
    display: none;
}

.cbot-overlay-text {
    height: 75%;
}

.cbot-feedback-textarea:-webkit-scrollbar-track,
#cbot-form-message:-webkit-scrollbar-track,
.cbot-help-text:-webkit-scrollbar-track,
.cbot-list-scrollable:-webkit-scrollbar-track,
#cbot-chat::-webkit-scrollbar-track,
.cbot-overlay-text::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #FFF;
}

.cbot-feedback-textarea::-webkit-scrollbar,
#cbot-form-message::-webkit-scrollbar,
.cbot-help-text::-webkit-scrollbar,
.cbot-list-scrollable::-webkit-scrollbar,
#cbot-chat::-webkit-scrollbar,
.cbot-overlay-text::-webkit-scrollbar {
    width: 6px;
    background-color: #FFF;
}

.cbot-feedback-textarea::-webkit-scrollbar-thumb,
#cbot-form-message::-webkit-scrollbar-thumb,
.cbot-help-text::-webkit-scrollbar-thumb,
.cbot-list-scrollable::-webkit-scrollbar-thumb,
#cbot-chat::-webkit-scrollbar-thumb,
.cbot-overlay-text::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 5px;
}

.cbot-doc-content:-webkit-scrollbar-track,
.cbot-dropdown-content:-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar,
.cbot-dropdown-content::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar-thumb,
.cbot-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 5px;
    cursor: pointer;
}

.cbot-dialog-help-menu-help:before {
    border: 5px solid #5d709a;
    content: '';
    position: absolute;
    bottom: -5px;
    left: 15px;
    transform: rotate(45deg);
}

.cbot-dialog-button {
    bottom: 10px;
    right: -270px;
    width: 270px;
    height: 100px;
    background-size: contain;
    z-index: 999999999
}

.cbot-dialog-button .icon {
    width: 61px;
    height: 66px;
    margin-top: 20px;
    margin-left: 20px;
    float: left
}

.cbot-dialog-button .title {
    float: left;
    width: 150px;
    height: 66px;
    margin-left: 15px;
    margin-top: 20px;
    color: #fff;
    font-size: 15px;
    position: relative
}

.cbot-dialog-button .button-area {
    position: absolute;
    bottom: 0;
    left: 0
}

.cbot-dialog-button .button-area .button {
    width: 55px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    background: linear-gradient(to bottom right, #2754b9, #175daf);
    float: left;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    border-radius: 45px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .42);
    transition: all .3s ease 0s
}

.cbot-dialog-button-title {
    position: fixed;
    bottom: 85px !important;
    right: 20px !important;
    font-size: 15px !important;
    color: #1F8CEB;
    font-family: 'Metropolis', 'Tahoma' !important;
    font-weight: bolder !important
}

#cbot-form-message,
.cbot-last,
.cbot-msg,
.cbot-msg time:before,
.cbot-name,
.cbot-survey {
    font-family: 'Metropolis', 'Tahoma'
}

.cbot-dialog-button-help-message {
    border-radius: 50px;
    width: 215px;
    position: absolute;
    bottom: 91px;
    right: 0px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    /* background: center no-repeat #e6267c !important; */
    z-index: 999999999;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    border-radius: 15px;
    padding: 6px 12px;
}

.cbot-dialog-button-help-message:before {
    /* border: 5px solid #e6267c; */
    /* HAHAHAHA */
    content: '';
    position: absolute;
    bottom: -3px;
    right: 20px;
    transform: rotate(45deg);
}

.cbot-dialog-button-regular {
    height: 61px;
    width: 61px;
    /* position: fixed; */
    position: static;
    /* bottom: 20px; */
    /* right: 20px; */
    cursor: pointer;
    background-repeat: no-repeat;
    /* z-index: 999999999*/
}

.cbot-animation-holder {
    bottom: 20px;
    right: 20px;
    position: fixed;
    display: block;
    z-index: 999999999;
}

/* 
.cbot-dialog-button-regular:hover + .cbot-dialog-button-help-message {
    color:#F00;
}
 */

.cbot-dialog-button-close {
    display: none;
    border-radius: 50px;
    height: 60px;
    width: 60px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: url(../img/flat/cbot-close-icon.png) center no-repeat #00326c !important;
    z-index: 999999999
}

.cbot-head-cover {
    width: 100%;
    height: 59px;
}

.cbot-dialog-head {
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    /* line-height: 60px; */
    height: 55px;
    z-index: 100;
    padding: 2px 10px;
    /* cursor: pointer; */
    /* box-shadow: 0 2px 2px #ccc; */
    /* box-shadow: 0 2px 0px #d7dff1; */
    box-shadow: 0 1px 0px rgba(30, 57, 116, .1);
    background: #FFF;
    box-sizing: content-box;
    /* background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
}

.cbot-dialog-sozlesme {
    width: 100%;
    /* border-radius: 10px; */
    font-size: 14px;
    color: #333;
    overflow: hidden;
    display: block;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    height: 55px;
    z-index: 100;
    padding: 2px 0;
    /* box-shadow: 0 2px 0px #d7dff1; */
    background: #3278cd;
    display: none;
    position: absolute;
    box-sizing: content-box;
}

.cbot-dialog-sozlesme span {
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-dialog-head .cbot-avatar {
    display: block;
    float: left;
    margin-top: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    max-width: 70%;
    width: 100%;
    text-align: center;
}

.cbot-dialog-head .cbot-avatar img {
    height: 35px;
    vertical-align: unset !important;
    /* display: block; */
    margin-right: 5px;
    /* float: left; */
    /* max-width: 70%;*/
}

.cbot-dialog-head .cbot-avatar span {
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-size: 16px;
    color: #000;
    /* float: left; */
    /* max-width: 130px; */
    /* max-width: calc(100% - 70px); */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: 'Metropolis', 'Tahoma';
    text-align: center;
}

.cbot-survey {
    text-align: center;
    background-color: #4463da;
    padding: 10px;
    border-radius: 100px;
    width: 290px;
    height: 100px;
    display: none;
    position: absolute !important;
    top: 40%;
    left: 25px;
    opacity: 0;
    z-index: 9999999 !important;
    color: #fff;
    font-size: 15px
}

.cbot-survey-text {
    margin-top: 15px;
    width: 100%
}

input::-ms-clear {
    display: none
}

.cbot-back,
.cbot-back img,
.cbot-last,
.cbot-name {
    position: absolute
}

.cbot-back {
    width: 90px;
    height: 50px;
    top: 13%;
    left: 0;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    cursor: pointer
}

.cbot-back img {
    top: 5px;
    left: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .98);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    margin-left: 15px
}

.cbot-back:active {
    background: rgba(255, 255, 255, .2)
}

.cbot-chat .avatar,
.cbot-chat .avatar img {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, .9)
}

.cbot-name {
    top: 25%;
    left: 90px;
    font-size: 25px;
    font-weight: 300;
    color: rgba(255, 255, 255, .98);
    cursor: default
}

.cbot-last {
    top: 30px;
    left: 115px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
    cursor: default
}

.cbot-chat {
    list-style-type: none;
    /* padding: 15px 0; */
    padding: 0;
    /* margin: 15px 0 0 0; */
    margin: 2px 0 0 0;
    /* max-height: 70%; */
    /* height: calc(100% - 134px);  */
    /* height: calc(100% - 155px); */
    height: calc(100% - 175px);
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.cbot-alert-welcome-message {
    display: none;
}

.cbot-alert-welcome-message {
    background: #fff9e7;
    color: grey;
    width: 100%;
    padding: 5px 0px;
    text-align: center;
    display: none;
    position: absolute;
    z-index: 999;
}

.cbot-chat li {
    /* overflow: hidden; */
    /* overflow-x: hidden; */
    display: flex
}

.cbot-chat>li:nth-of-type(1) {
    margin-top: 15px;
}

.cbot-chat .avatar {
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%
}

.cbot-chat .avatar img {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%
}

.cbot-chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: silver;
    height: 20px;
    text-shadow: 7px 0 0 #e5e5e5, 6px 0 0 #e5e5e5, 5px 0 0 #e5e5e5, 4px 0 0 #e5e5e5, 3px 0 0 #e5e5e5, 2px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 0 0 0 #e5e5e5, -1px 0 0 #e5e5e5, -2px 0 0 #e5e5e5, -3px 0 0 #e5e5e5, -4px 0 0 #e5e5e5, -5px 0 0 #e5e5e5, -6px 0 0 #e5e5e5, -7px 0 0 #e5e5e5;
    box-shadow: inset 20px 0 0 #e5e5e5, inset -20px 0 0 #e5e5e5, inset 0 -2px 0 #d7d7d7;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default
}

.cbot-other:before,
.cbot-self .avatar:after {
    content: "";
    width: 0;
    height: 0;
    position: relative;
    right: 0
}

.cbot-other:after{
    display: none;
}

.cbot-other .msg {
    order: 1;
    border-top-left-radius: 0;
    box-shadow: -1px 2px 0 #D4D4D4
}

/* .cbot-other:before { */

/* top: 0;
    left: 40px;
    border: 5px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent */

/* } */

.cbot-other .cbot-msg {
    border-top-left-radius: 0;
    /* background: #f4f7f9; */
    border: solid 1px #ebf0f5;
    background: #f0f4f8;
    margin-left: 10px;
    border: 0;
    /* padding: 3px; */
    color: #5d709b;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    box-sizing: content-box;
    /* overflow: hidden; */
    /* width:250px; */
    /* letter-spacing: -0.2333333px; */
}

/* .cbot-other .cbot-msg:first-child {
    margin-top: 15px;
} */

.cbot-self {
    justify-content: flex-end;
    align-items: flex-end
}

.cbot-self .cbot-msg {
    border-top-right-radius: 0;
    margin-right: 10px;
    /* background: #e1e7f9; */
    background: #3278cd;
    color: #FFFFFF;
    word-break: break-word;
}

.cbot-self .msg {
    order: 1;
    border-bottom-right-radius: 0;
    box-shadow: 1px 2px 0 #D4D4D4
}

.cbot-self .avatar {
    order: 2
}

.cbot-self .avatar:after {
    display: inline-block;
    bottom: 19px;
    border: 5px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 0 2px 0 #D4D4D4
}

.cbot-carousel-wrapper {
    overflow: hidden;
}

.cbot-msg {
    background: #f2f0ff;
    min-width: 50px;
    max-width: 280px;
    /* padding: 3% 3% 3% 2%; */
    padding: 10px;
    border-radius: 16px;
    font-size: 14px;
    color: rgba(30, 57, 116, 1);
    word-break: break-word;
    /* overflow: hidden; */
    overflow: visible;
    position: relative;
    line-height: 20px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}

.cbot-msg .cbot-arrow {
    position: absolute;
    /* top: 75px; */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    line-height: 16px;
    color: #333;
    font-weight: 700;
    /* z-index: 99999; */
    z-index: 990;
    cursor: pointer;
    text-align: center
}

.cbot-msg img,
.cbot-msg time {
    cursor: default
}

.cbot-arrow.left {
    left: 0;
    background: url(../img/flat/arrow-blue-left.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
}

.cbot-arrow.right {
    right: 0;
    background: url(../img/flat/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 16px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
    transition: .1s;
}

.cbot-msg p {
    font-size: 14px;
    margin: 0 0 .2rem;
    font-family: 'Metropolis', 'Tahoma';
    line-height: 19px;
    /* font-weight: 600; */
    /* color: #5d709b; */
    text-align: left;
    /* color: #777 */
}

.cbot-msg img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 3px #eee;
    transition: all .4s cubic-bezier(.565, -.26, .255, 1.41)
}

.cbot-msg time {
    font-size: .7rem;
    color: #ccc;
    margin-top: 3px;
    float: right
}

.cbot-msg time:before {
    content: "\f017";
    color: #ddd;
    display: inline-block;
    margin-right: 4px
}

.cbot-form-message-area {
    width: calc(100% - 20px);
    height: 73px;
    background: #fff !important;
    position: absolute;
    bottom: 20px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    overflow: hidden;
    z-index: 99;
    margin: 0 auto 0 10px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 5px;
    font-size: 16px;
}

/* ripple effect */

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

.ripple_effect {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-align: center;
    color: #3278cd;
    background: transparent;
    position: absolute;
    bottom: 50px;
}

.ripple_effect_button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5em;
    height: 2em;
    margin-left: -2.5em;
    margin-top: -1em;
    z-index: 100;
    padding: 0.25em 0.5em;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.15em;
    font-weight: 200;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.5s;
}

.ripple_effect_button:hover {
    box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.75);
}

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

.ripple_effect.error {
    color: #f7451d;
    min-width: 20em;
    max-width: 30em;
    margin: 0 auto;
    white-space: pre-line;
}

/* ripple effect finish */


.cbot-secondary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    background: #2599fc;
    border: 1px solid #2599fc;
    color: #ffffff;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    outline: none;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 75px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
}

.cbot-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
    text-align: center;
    line-height: 40px;
}

.cbot-okudum-anladim {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    /* width: 60%; */
    white-space: nowrap;
    width: 266px;
    font-family: 'Metropolis', 'Tahoma';
    color: #1d3974;
}

/*
checkbox private1
*/

.cbot-checkbox-checkmark-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    white-space: nowrap;
    width: 266px;
    font-family: 'Metropolis', 'Tahoma';
    color: #1d3974;
}

/* Hide the browser's default checkbox */

.cbot-checkbox-checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */

.cbot-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #FFF;
    border: solid 1px #d6d9e0;
}

/* On mouse-over, add a grey background color */

.cbot-checkbox-checkmark-container:hover input~.cbot-checkbox-checkmark {
    background-color: #FFF;
}

/* When the checkbox is checked, add a blue background */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark {
    background-color: #FFF;
}

/* Create the cbot-checkbox-checkmark/indicator (hidden when not checked) */

.cbot-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the cbot-checkbox-checkmark when checked */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark:after {
    display: block;
}

/* Style the cbot-checkbox-checkmark/indicator */

.cbot-checkbox-checkmark-container .cbot-checkbox-checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #3278cd;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#cbot-form {
    overflow-y: unset !important;
}

#cbot-form-message {
    background: #fff;
    border: none;
    outline: 0;
    padding-left: 15px;
    padding-right: 15px;
    color: #666;
    font-weight: 400;
    font-size: 16px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
    /* overflow: hidden; */
    resize: none;
    height: 62px;
    padding: 5px;
    outline: 0;
    width: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    position: relative;
    background: transparent;
}

.cbot-illusion-placeholder {
    position: absolute;
    font-size: 14px;
    user-select: none;
    padding: 5px 5px 5px 8px;
    color: rgb(109, 109, 109);
    display: block;
}

.cbot-form-message-area .cbot-send-button-info {
    border: 0;
    background: url(../img/flat/list-type.png) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
    cursor: pointer;
    display: block;
    float: left;
    margin: 12px 0 0 12px;
}

.cbot-form-message-area .cbot-send-button-info:focus {
    outline: none;
}

.cbot-form-message-area .cbot-send-button {
    position: absolute;
    cursor: pointer;
    width: 32px;
    height: 32px;
    top: 20px;
    right: 6px;
    z-index: 999;
    border: none;
    float: left;
    display: block;
    background: url(../img/flat/send-disabled.svg) no-repeat;
    background-size: 32px 32px !important;
}

.cbot-form-message-area .cbot-send-button.active {
    background: url(../img/flat/send-active.png) no-repeat;
}

.cbot-form-message-area .cbot-send-button:focus {
    outline: none;
}

.cbot-new-help-sentences li {
    color: #1d3974;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    letter-spacing: -0.2333333px;
    background: #ffffff;
    border-bottom: 1px solid #e0e6ed;
}

.cbot-new-help-sentences li:last-child {
    border-bottom: 0;
}

.cbot-new-help-sentences li a {
    text-decoration: none;
    color: #1d3974;
    padding: 15px 5px;
    display: block;
    width: 100%;
}

.cbot-new-help-sentences li:hover {
    background: rgba(224, 230, 237, .3);
}

[cbot-tooltip]:before {
    /* needed - do not touch */
    content: attr(cbot-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 10px;
    z-index: 999999999;
    color: #333;
    border-radius: 10px;
    /* box-shadow: 2px 2px 1px #caa5a5; */
    /* background: #CCC; */
    /* left: -50%; */
    transform: translateX(calc(-50% + 10px));
}

[cbot-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    background: #f0f4f8;
    margin-top: -50px;
    color: #003c6c;
}

[cbot-tooltip]:not([cbot-tooltip-persistent]):before {
    pointer-events: none;
}

@media screen and (max-width:800px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block
    }

    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: 'Metropolis', 'Tahoma';
        font-size: 14px;
        color: #333
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        /* padding: 5px 10px; */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        box-shadow: 0 2px 0px #d7dff1;
        /*  background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
        background: #FFF;
    }

    .cbot-msg {
        max-width: 280px
    }

    .cbot-msg img {
        width: 300px
    }

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 45px;
        top: 22px;
        border-radius: 3px
    }

    .cbot-overlay-text {
        height: 67%;
    }

    [cbot-tooltip]:before {
        display: none;
    }

    [cbot-tooltip]:hover:before {
        display: none;
    }

    [cbot-tooltip]:not([cbot-tooltip-persistent]):before {
        display: none;
    }

    /*     .cbot-chat {
        display: flex;
        flex-direction: column;
    }

    .cbot-chat>li:nth-of-type(1) {
        margin-top: auto !important;
    } */
}

@media screen and (max-width:150px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block
    }

    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: 'Metropolis', 'Tahoma';
        font-size: 14px;
        color: #333
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 15px;
        top: 22px;
        border-radius: 3px
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        padding: 5px 10px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        position: relative;
        /* box-shadow: 0 2px 0px #d7dff1; */
        /* background: linear-gradient(to left, #4c20de, #5895f8)!important */
        background: #FFF;
    }

    #cbot-form {
        margin-top: 30px
    }

    .cbot-msg img {
        width: 200px
    }

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

}

.cbot-component.generic-template {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cbot-component .cbot-image {
    width: 100%;
    max-height: 240px;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
    height: 133px !important;
}

.cbot-component .cbot-image img {
    width: auto !important;
    max-width: 100%;
    /* height: 100%; */
    max-height: 240px;
    margin: 0 auto;
    max-height: 133px !important;
    transform: translateY(-50%) !important;
    top: 50% !important;
}

.generic-template .cbot-description {
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px
}

.generic-template .cbot-buttons {
    width: 100%;
    height: auto;
    margin-top: auto;
    margin-bottom: 10px
}

.generic-template .cbot-button_component-description {
    margin-top: 0px;
}

.generic-template .cbot-buttons button {
    font-family: 'Metropolis', 'Tahoma';
}

.generic-template .cbot-title {
    padding: 3px;
    font-weight: 700;
    color: #2599fc;
}

.generic-template .cbot-subtitle {
    padding: 3px;
    /* color: #5d709b; */
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    letter-spacing: -0.2333333px;
}

.generic-template .cbot-buttons .cbot-button {
    /* line-height: 3; */
    text-align: center;
    font-size: 14px !important;
    width: 100%;
    /* height: 30px; */
    font-weight: 500;
    color: #4667d7;
    border: 1px solid #f1f1f1;
    background-color: #fff;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    border-radius: 5px;
    background-color: #FFF;
    border: 0;
    /* border:1px solid #1F8CEB; */
    color: #1F8CEB;
    margin-bottom: 2px;
    padding: 10px 0px;
    display: inline-table;
}

.generic-template .cbot-buttons .cbot-button.primary {
    background-color: #1F8CEB;
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button.primary:hover {
    /* background-color:#1F8CEB; */
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button:disabled {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button:disabled:hover {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button.secondary {
    border: solid 1px #2599fc;
    background: #FFF;
    color: #2599fc;
}

.generic-template .cbot-buttons .cbot-button.secondary:hover {
    color: #FFF;
}

.generic-template .cbot-buttons .cbot-button a {
    font-weight: 500;
    color: #4667d7;
    text-decoration: none;
}

.generic-template .cbot-buttons .cbot-button:hover {
    color: #fff;
    background-color: #4667d7
}

.generic-template .cbot-buttons .cbot-button:hover a {
    color: #fff;
    text-decoration: none
}

.cbot-component.list-template {
    width: 100%;
    width: 250px;
}

.list-template .cbot-list-item {
    margin: 5px 0;
    border-top: 1px solid #e1e1e1;
    padding: 5px 0;
}

.cbot-list-item-description {
    float: left;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

.cbot-list-item-title {
    font-weight: 700;
    font-size: 14px !important;
    color: #2599fc;
}

.cbot-list-item-text {
    font-size: 14px !important;
    /* width: 170px; */
    width: 100%;
    max-width: 100%
}

.cbot-list-item-image {
    width: 40px;
    height: 40px;
    float: right
}

.cbot-list-item-image img {
    width: initial;
    /* height: 40px; */
    top: 50%;
    transform: translateY(-50%);
    max-width: 40px;
    max-height: 40px;
    /* margin-top: 5px; */
    margin: auto;
    /* margin-top: 5px; */
}

.cbot-list-item-button {
    padding: 3px 5px;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    float: left;
    margin-right: 3px;
    color: #337ab7;
    border: 1px solid #337ab7;
    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    font-weight: normal;
    font-family: 'Metropolis', 'Tahoma';
    box-sizing: border-box;
    line-height: 20px;
}

.cbot-list-item-button:hover {
    background-color: #1F8CEB;
    color: #FFF;
}

.cbot-typing:before {
    border: 0;
}

.cbot-typing-loader {
    margin: 8px 0 0;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    -webkit-animation: line 1s linear infinite alternate;
    -moz-animation: line 1s linear infinite alternate;
    animation: line 1s linear infinite alternate
}

.cbot-dashed-hr {
    border: 1px dashed #cbcbcb;
    border-bottom: 0;
}

.cbot-solid-hr {
    border: 1px solid #cbcbcb;
    border-bottom: 0;
}

.cbot-txn-title {
    font-size: 13px;
    color: #1d3974;
    font-family: 'Metropolis', 'Tahoma';
    font-weight: bold;
    margin-bottom: 3px;
}

.cbot-txn-subtitle {
    font-size: 13px;
    font-weight: bold;
    color: #1F8CEB;
}

.cbot-list-new-container {
    margin-top: 10px;
}

.cbot-list-new-img {

    width: 50px;
    background-size: 25px 25px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.cbot-list-new-title {
    color: #1e3974;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-list-new-subtitle {
    color: #61749d;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-component-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: 'Metropolis', 'Tahoma';
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
}

@-webkit-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

@-moz-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

@keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    25% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, .2)
    }

    75% {
        background-color: rgba(10, 110, 189, .4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, .2), 24px 0 0 0 rgba(10, 110, 189, 2)
    }
}

.cbot-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px;
    user-select: none;
    /* If you want dots under the hoverable text */
}

/* cbot-tooltip text */

.cbot-tooltip .cbot-tooltiptext {
    visibility: hidden;
    min-width: 60px;
    width: calc(100% - 120px);
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

/* Show the cbot-tooltip text when you mouse over the cbot-tooltip container */

.cbot-tooltip:hover .cbot-tooltiptext {
    visibility: visible;
}

/* The Modal (background) */

.cbot-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999999999;
    /* MODEL DİĞERLERİNDEN  BİR FAZLA OLMALI */
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (Image) */

.cbot-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#cbot-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */

.cbot-modal-content,
#cbot-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */

.cbot-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.cbot-modal-close:hover,
.cbot-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.cbot-msg ul li {
    overflow: visible;
    display: list-item;
}

.cbot-msg ol li {
    overflow: visible;
    display: list-item;
}

.cbot-form-message-area .textarea {
    border-radius: 0;
}

.cbot-clearfix {
    clear: both;
}

.cbot-feedback-area {
    margin-top: 7px;
}

.cbot-feedback-area .cbot-feedback-status {
    float: left;
}

.cbot-feedback-area .cbot-feedback-status-form {
    float: left;
}

.cbot-feedback-area .cbot-feedback-vote-button {
    width: 20px;
    height: 20px;
    border: 0;
    float: right;
    margin: 3px;
    padding: 0;
    cursor: pointer;
}

.cbot-vote-down-selectable {
    background: url(../img/cbot-positive-charges.png);
    background-size: 100% 100%;
    transform: scaleY(-1) scaleX(-1);
}

.cbot-vote-down-selectable:hover,
.cbot-vote-down-selectable.cbot-vote-selected {
    filter: invert(25%) sepia(88%) saturate(7476%) hue-rotate(357deg) brightness(94%) contrast(120%);
}

.cbot-vote-up-selectable:hover,
.cbot-vote-up-selectable.cbot-vote-selected {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-vote-up-selectable,
.cbot-vote-up {
    background: url(../img/cbot-positive-charges.png);
    background-size: 100% 100%;
}

.cbot-vote-up-selectable:hover {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-feedback-vote-button:active,
.cbot-feedback-vote-button:focus {
    outline: none;
}

.cbot-feedback-textarea {
    width: 100%;
    resize: none;
    height: 40px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
}

.cbot-feedback-textarea:focus {
    outline: none;
}

.cbot-feedback-form-send {
    margin-top: 5px;
    float: right;
    background: #f0f4f8;
    border: 1px solid #5b739f;
    border-radius: 3px;
}

.cbot-feedback-form-send:disabled {
    border: 1px solid #ccc;
}

.cbot-feedback-form-send::before {
    content: "Gönder";
}

.cbot-generic-numarator {
    width: 26px;
    height: 26px;
    /* position: absolute; */
    background: #1e3974;
    right: 2px;
    border-radius: 50%;
    top: 0px;
    color: #FFF;
    text-align: center;
    line-height: 26px;
    float: right;
}

@keyframes cbotBounceIn {

    0%,
    2%,
    6%,
    10%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    4% {
        transform: translateY(-30px);
    }

    8% {
        transform: translateY(-15px);
    }
}

.cbot-bounce {
    animation: cbotBounceIn 10s infinite 2s;
}

.cbot-slide-right {
    right: -300px;
    animation: cbotSlideRight 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideRight {
    100% {
        right: 20px;
    }
}

.cbot-slide-left {
    left: -300px;
    animation: cbotSlideLeft 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideLeft {
    100% {
        left: 20px;
    }
}

.cbot-msg:hover .left,
.cbot-msg:hover .right {
    opacity: 1;
    transition: .2s;
}

/* RATING AREA */

.cbot-rating-group {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.cbot-rating-input {
    display: none;
}

.cbot-rating-label {
    cursor: pointer;
    padding: 0 0px;
    font-size: 24px;
}

.cbot-rating-star {
    color: orange;
}

.cbot-rating-disabled .cbot-rating-star {
    color: #d57500;
}
.cbot-rating-input:checked~.cbot-rating-label .cbot-rating-star {
    color: #ddd;
}
.cbot-rating-group:hover .cbot-rating-label .cbot-rating-star {
    color: orange;
}

.cbot-rating-input:hover~.cbot-rating-label .cbot-rating-star {
    color: #ddd;
}


.cbot-rating-group {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.cbot-rating-input {
    display: none;
}

.cbot-rating-label {
    cursor: pointer;
    padding: 0 0px;
    font-size: 24px;
}

.cbot-rating-star {
    color: orange;
}

.cbot-rating-disabled .cbot-rating-star {
    color: #d57500;
}

.cbot-rating-input:checked~.cbot-rating-label .cbot-rating-star {
    color: #ddd;
}

.cbot-rating-group:hover .cbot-rating-label .cbot-rating-star {
    color: orange;
}

.cbot-rating-input:hover~.cbot-rating-label .cbot-rating-star {
    color: #ddd;
}

.cbot-icon-star {
    font-style: normal;
    pointer-events: none;
}

.cbot-icon-star::before {
    /* content: '☆' */
    content: '★'
}

.cbot-rating-disabled {
    pointer-events: none;
}

.cbot-dialog-end-survey {
    transform: translateY(calc(-100% - 15px));
    position: absolute;
    right: 15px;
    width: 200px;
    padding: 15px;
    border: 5px solid #000000;
    background: #000;
    border-radius: 7px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Metropolis', 'Tahoma';
    text-align: center;
    padding: 9px;
    color: white;
    display: none;
}

.cbot-dialog-end-survey>span {
    display: block;
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
}

.cbot-dialog-end-survey>button {
    background: transparent;
    border: 0;
    color: black !important;
    font-size: 17px;
    cursor: pointer;
    outline: none;
    background: white;
    border-radius: 5px;
}

.cbot-dialog-end-survey>button:hover {
    color: #ccc;
}

.cbot-msg ol {
    padding-left: 15px;
}

.cbot-msg ul {
    padding-left: 15px;
}

#cbot-voice-area {
    width: 25px;
    height: 25px;
    /* float: right; */
    background: url(../img/cbot-microphone.png) no-repeat;
    background-size: 100% 100% !important;
    margin-top: -5px;
    cursor: pointer;
    position: absolute;
    display: block;
    right: 61px;
    top: 30px;
}

#cbot-voice-area.active {
    background: url(../img/cbot-microphone_active.png) no-repeat;
}

#cbot-attachment-area {
    width: 40px;
    height: 40px;
    /* float: right; */
    background: url(../img/cbot-attachment.png);
    background-size: 100% 100%;
    margin-top: -5px;
    margin-right: -5px;
    cursor: pointer;
    position: absolute;
    right: 43px;
    top: 20px;
}

#cbot-attachment-area img {
    display: block;
    width: 30%;
    margin: 20px auto;
}

#cbot-attachment-area span {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.cbot-attachment-container {
    display: none;
    width: 200px;
    height: 100px;
    background: white;
    position: fixed;
    transform: translateX(calc(-100% + 40px)) translateY(-100%);
    -ms-transform: translateX(-100%) translateX(40px) translateY(-100%);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #ccc;
    transition: .1s;
    opacity: 1;
    overflow: hidden;
    user-select: none;
}

.cbot-attachment-container .cbot-attachment-block {
    transition: 0;
    background: #fff;
}

.cbot-attachment-container .cbot-attachment-block:hover {
    transition: .1s;
    background: #ccc;
}

.cbot-attachment-container.active {
    /* display: block; */
    opacity: 1;
}

.cbot-attachment-image {
    width: 50%;
    /* background-image: url(../img/cbot-gallery.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-location {
    width: 50%;
    /* background-image: url(../img/cbot-location-image.png); */
    /* background-size: 100% 100%; */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-video {
    width: 50%;
    /* background-image: url(../img/cbot-location-image.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-file {
    width: 50%;
    /* background-image: url(../img/filfesicon.png);
    background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-form-message-area .textarea::placeholder {
    color: #828282;
}

.cbot-help-text ul {
    padding: 0 0 0 40px;
    margin: 14px 0;
}

.cbot-help-text ul li {
    list-style-type: disc;
    font-size: 14px;
    font-family: 'Metropolis', 'Tahoma';
}


@media screen and (max-width:768px) {
    /* #cbot-web-area {
        display: none !important;
    } */

    .cbot-triple-dot {
        display: none;
    }

    .cbot-survey-fadebg {
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99998;
        background-color: #000;
        opacity: .3;
        display: none;
    }

    /*     .cbot-chat {
        display: flex;
        flex-direction: column;
    }

    .cbot-chat>li:nth-of-type(1) {
        margin-top: auto !important;
    } */

    .cbot-chat li {
        display: block;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }
}

#cbot-web-area {
    right: 0;
    position: fixed;
    transform: translate(-370px);
    width: 900px;
    width: calc(100% - 380px);
    max-width: 900px;
    height: 85%;
    display: none;
    opacity: 0;
}

.cbot-web-area-content {
    background: #f1f1f1;
    height: calc(100% - 70px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
    overflow: hidden;
}

.cbot-web-area-header {
    height: 59px;
    background: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
}

.cbot-web-area-content iframe {
    width: 100%;
    height: 100%;
}

.cbot-web-image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.cbot-web-image img {
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-video {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
}

.cbot-web-video iframe {
    width: 100%;
}

.cbot-web-video-container {
    height: 100%;
    width: 100%;
    background: black;
}

.cbot-web-video video {
    outline: none;
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-close {
    background-image: url(../img/cbot-chevron-right-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-web-reload {
    background-image: url(../img/cbot-reload-icon-16912-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-doc-content {
    padding: 5px;
    box-sizing: content-box;
    overflow-y: scroll;
    height: calc(100% - 10px);
}

.cbot-doc-content img {
    max-width: 100%;
}

.cbot-doc-content table {
    border-collapse: collapse;
}

.cbot-doc-content td {
    border: 1px solid #000;
}

.cbot-doc-content ol {
    list-style: decimal;
}

.cbot-doc-content ol ol {
    list-style: lower-alpha;
}

.cbot-description ol {
    list-style: decimal;
}

.cbot-description ol ol {
    list-style: lower-alpha;
}

.cbot-description table {
    border-collapse: collapse;
}

.cbot-description td {
    border: 1px solid #000;
}

.cbot-triple-dot {
    background-image: url(../img/cbot-tripledot-flat.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 25px;
    float: left;
    width: 12px;
    margin-right: 5px;
    margin-top: 15px;
    /* background: white; */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    /* background-color: red; */
    background-color: #5a729e;
}

.cbot-count-badge {
    background: red;
    color: #fff;
    width: 15px;
    height: 15px;
    float: right;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    font-family: Arial;
    padding: 2px 1px 0px 1px;
    display: none;
}

.cbot-livechat-close {
    width: 100%;
    background: #bc1831;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 999;
}

.cbot-livechat-close img{
    display: none;
    width: 18px;
    height: 18px;
    box-shadow: none;
    margin: 0px 0px -4.3px 7px;
}

.cbot-start-meeting {
    width: 100%;
    background: #18bc39;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    top: 86px;
}

.cbot-dialog-end-timer {
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 94px;
    background: beige;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}

.cbot-dialog-end-timer span {
    font-weight: bold;
}

.cbot-dropdown-input {
    box-sizing: border-box;
    background-image: url(../img/search.png);
    background-position: 14px 12px;
    background-size: 26px;
    background-repeat: no-repeat;
    font-size: 14px;
    padding: 14px 15px 10px 30px;
    border: none;
    border-bottom: 2px solid #f6f6f6;
    outline: none;
    background-color: #e7e4e4;
}

.cbot-dropdown-input:disabled {
    border-bottom-color: #ddd;
}

.cbot-dropdown-input:focus {
    /* outline: 3px solid #ddd; */
}

.cbot-dropdown {
    position: relative;
    display: inline-block;
}

.cbot-dropdown-content {
    display: none;
    position: initial;
    bottom: 48px;
    background-color: #f6f6f6;
    /* min-width: 248px; */
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    max-height: 137px;
}

.cbot-dropdown-content button {
    color: black;
    padding: 9px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    outline: none;
}

.cbot-dropdown-content button:hover {
    background-color: #ccc;
}

.cbot-dropdown a:hover {
    background-color: #ddd;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

#cbot-attachment-file-input {
    display: none;
}

.cbot-attachment-file-input {
    display: none !important;
}

/* COLORFUL SURVEY STYLING */

.cbot-colorful-radio-container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    float: left;
}

.cbot-colorful-radio-container input {
    /* position: absolute;
    opacity: 0;
    cursor: pointer; */
    display: none;
}

.cbot-colorful-radio-span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 0px 1px white inset;
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    user-select: none;
}

.cbot-colorful-radio-container:hover input~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white;
}

.cbot-colorful-radio-container input:checked~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white
}

.cbot-colorful-radio-container-styling-0 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-0:hover input~.cbot-colorful-radio-span-styling-0,
.cbot-colorful-radio-container-styling-0 input:checked~.cbot-colorful-radio-span-styling-0 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-1 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-1:hover input~.cbot-colorful-radio-span-styling-1,
.cbot-colorful-radio-container-styling-1 input:checked~.cbot-colorful-radio-span-styling-1 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-2 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-2:hover input~.cbot-colorful-radio-span-styling-2,
.cbot-colorful-radio-container-styling-2 input:checked~.cbot-colorful-radio-span-styling-2 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-3 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-3:hover input~.cbot-colorful-radio-span-styling-3,
.cbot-colorful-radio-container-styling-3 input:checked~.cbot-colorful-radio-span-styling-3 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-4 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-4:hover input~.cbot-colorful-radio-span-styling-4,
.cbot-colorful-radio-container-styling-4 input:checked~.cbot-colorful-radio-span-styling-4 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-5 span {
    border-color: #b95121;
    color: #b95121;
}

.cbot-colorful-radio-container-styling-5:hover input~.cbot-colorful-radio-span-styling-5,
.cbot-colorful-radio-container-styling-5 input:checked~.cbot-colorful-radio-span-styling-5 {
    background-color: #b95121;
    color: white;
}

.cbot-colorful-radio-container-styling-6 span {
    border-color: #e49c40;
    color: #e49c40;
}

.cbot-colorful-radio-container-styling-6:hover input~.cbot-colorful-radio-span-styling-6,
.cbot-colorful-radio-container-styling-6 input:checked~.cbot-colorful-radio-span-styling-6 {
    background-color: #e49c40;
    color: white;
}

.cbot-colorful-radio-container-styling-7 span {
    border-color: #d1c650;
    color: #d1c650;
}

.cbot-agent-name {
color: #848484;
margin-top: 16px;
}

.cbot-livechat-started {
    display: none;
  }
.cbot-agent-started-livechat {
    display: none;
    align-items: center;
    justify-content: center;
    width: 110%;
}
  
  
  .cbot-livechat-started-text {
    margin: 0 12px 0 9px !important;
    color: #848484;
    margin-top: 5px;
    margin-left: -6px;
    align-self: center;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 3px;
  }

  .cbot-livechat-started svg:nth-child(2) {
    margin-left: 17px
  }

  .cbot-agent-name {
    margin: unset !important;
    margin-left: 9px;
  }
  
  .cbot-agent-name-wrapper {
    display: none;
    align-items: center;
    margin-top: 16px;
  }
  .cbot-vector {
    display: none;
  }

  .cbot-agent-name-wrapper svg:nth-child(1){
    margin-right: 8px;
  }

  .cbot_text_component svg:nth-child(1){
    display:none;
  }

  /* .cbot-description{
    margin-top: -9px;
    margin-left: -10px;
  }
  .cbot-subtitle{
    margin-top:-6px;
  } */

/* 
.vector-450 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1407px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  }

  .vector-451 {
    position: absolute;
    width: 98px;
    height: 0px;
    left: 1670px;
    top: 420.5px;
    border: 1px solid #DCDCDC;
  } */

.cbot-colorful-radio-container-styling-7:hover input~.cbot-colorful-radio-span-styling-7,
.cbot-colorful-radio-container-styling-7 input:checked~.cbot-colorful-radio-span-styling-7 {
    background-color: #d1c650;
    color: white;
}

.cbot-colorful-radio-container-styling-8 span {
    border-color: #bbc730;
    color: #bbc730;
}

.cbot-colorful-radio-container-styling-8:hover input~.cbot-colorful-radio-span-styling-8,
.cbot-colorful-radio-container-styling-8 input:checked~.cbot-colorful-radio-span-styling-8 {
    background-color: #bbc730;
    color: white;
}

.cbot-colorful-radio-container-styling-9 span {
    border-color: #82b652;
    color: #82b652;
}

.cbot-colorful-radio-container-styling-9:hover input~.cbot-colorful-radio-span-styling-9,
.cbot-colorful-radio-container-styling-9 input:checked~.cbot-colorful-radio-span-styling-9 {
    background-color: #82b652;
    color: white;
}

.cbot-colorful-radio-container-styling-10 span {
    border-color: #6cba4c;
    color: #6cba4c;
}

.cbot-colorful-radio-container-styling-10:hover input~.cbot-colorful-radio-span-styling-10,
.cbot-colorful-radio-container-styling-10 input:checked~.cbot-colorful-radio-span-styling-10 {
    background-color: #6cba4c;
    color: white;
}

.cbot-colorful-radio-main-container {
    height: 25px;
}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */

.cbot-bg-none {
    background: transparent !important;
    padding: 0 !important;
}


.cbot-suggestion-button-slider {
    white-space: nowrap;
    overflow-x: scroll;
}

.cbot_text_component {
    width: initial !important;
}

.cbot-text-button-class {
    background-color: transparent !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 3px 0 0 0 !important;
}

.cbot-text-button-class:hover {
    color: #1F8CEB !important;
}

#cbot-form-message::placeholder {
    color: transparent;
}

.cbot-dialog .cbot-owl-carousel .cbot-owl-prev {
    display: none;
}

.cbot-dialog .cbot-owl-carousel .cbot-owl-next {
    display: none;
}

.cbot-dialog .cbot-owl-dots {
    height: 20px;
    text-align: center;
    display: none;
}

.cbot-dialog .cbot-owl-dot {
    margin: 5px 5px 5px 0;
    height: 10px;
    width: 10px;
    border: 1px solid #87b2d8 !important;
    border-radius: 100%;
}

.cbot-dialog .cbot-owl-dot.active {
    height: 10px;
    width: 10px;
    background-color: #1a6eb5 !important;
    border: 1px solid #1a6eb5 !important;
}

.cbot-stick-right {
    right: 0;
    left: initial !important;
}

.cbot-bottom-arrow-left {
    background: url(../img/flat/arrow-blue-left.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    width: 32px;
    height: 32px;
    float: left;
    margin: 5px;
    cursor: pointer;
}

.cbot-bottom-arrow-right {
    background: url(../img/flat/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    transition: .1s;
    width: 32px;
    height: 32px;
    float: right;
    margin: 5px;
    cursor: pointer;
}

.cbot-bottom-arrow-indicators {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border-style: solid;
    border-width: thin;
    border-color: rgb(99, 99, 99);
    margin: 2px;

}

.cbot-bottom-arrow-indicators.active {
    background-color: rgb(99, 99, 99);
}

.cbot-bottom-arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbot-chart-container {
    min-width: 280px;
    min-height: 280px;
}

.cbot-pie-chart-table-container {
    margin-top: 0px;
}

.cbot-pie-chart-headtext {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #565656;
    font-weight: 600;
    font-size: 14px;
    line-height: 18.52px;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-centertext {
    font-weight: 700;
    line-height: 23.81px;
    font-size: 18px;
    text-align: center;
    color: #231F20;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-table-index-card {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.cbot-pie-chart-table-category {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    align-items: center;
    /* font-family: 'Red Hat Display'; */
}

.cbot-pie-chart-table-value {
    /* font-family: 'Red Hat Display'; */
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    text-align: right;
    color: #231F20;
}

.cbot-pie-chart-tr {
    height: 52px;
    /* border-bottom: 1px solid #000; */
}

.cbot-chart-container {
    padding: 40px;
    margin-top: -30px;
    margin-bottom: -30px;
}
@charset "UTF-8";

@font-face {
    font-family: "GothamNarrow-Bold";
    src: url("../fonts/GothamNarrow-Bold.eot");
    src: url("../fonts/GothamNarrow-Bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/GothamNarrow-Bold.otf") format("opentype"), url("../fonts/GothamNarrow-Bold.svg") format("svg"),
        url("../fonts/GothamNarrow-Bold.ttf") format("truetype"), url("../fonts/GothamNarrow-Bold.woff") format("woff"),
        url("../fonts/GothamNarrow-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GothamNarrow-Book";
    src: url("../fonts/GothamNarrow-Book.eot");
    src: url("../fonts/GothamNarrow-Book.eot?#iefix") format("embedded-opentype"),
        url("../fonts/GothamNarrow-Book.otf") format("opentype"), url("../fonts/GothamNarrow-Book.svg") format("svg"),
        url("../fonts/GothamNarrow-Book.ttf") format("truetype"), url("../fonts/GothamNarrow-Book.woff") format("woff"),
        url("../fonts/GothamNarrow-Book.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GothamNarrow-Medium";
    src: url("../fonts/GothamNarrow-Medium.eot");
    src: url("../fonts/GothamNarrow-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/GothamNarrow-Medium.otf") format("opentype"), url("../fonts/GothamNarrow-Medium.svg") format("svg"),
        url("../fonts/GothamNarrow-Medium.ttf") format("truetype"), url("../fonts/GothamNarrow-Medium.woff") format("woff"),
        url("../fonts/GothamNarrow-Medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GothamNarrow-Light";
    src: url("../fonts/GothamNarrow-Light.eot");
    src: url("../fonts/GothamNarrow-Light.eot?#iefix") format("embedded-opentype"),
        url("../fonts/GothamNarrow-Light.otf") format("opentype"), url("../fonts/GothamNarrow-Light.svg") format("svg"),
        url("../fonts/GothamNarrow-Light.ttf") format("truetype"), url("../fonts/GothamNarrow-Light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

.cbot-dialog,
.cbot-dialog-button .title {
    font-family: "GothamNarrow-Book";
}

.cbot-chat .avatar img,
.cbot-chat .day,
.cbot-dialog-head,
.cbot-msg img,
.cbot-msg time {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cbot-remove {
    display: none;
}

.cbot-dialog {
    background-color: #fff;
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 433px;
    height: 85%;
    border-radius: 20px;
    box-shadow: 0 0 10px #efefef;
    z-index: 999999999;
    font-size: 14px;
    color: #333;
    background: url(../firm-ziraat/img/bot-bg.png)
        /* no-repeat */
    ;
    /* overflow: hidden */
}

.cbot-dialog a {
    text-decoration: none;
    font-size: 14px;
    font-family: "GothamNarrow-Book";
}

.cbot-close-icon-new {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 28px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    /* background: url(../firm-ziraat/img/Close.svg) no-repeat; */
    -webkit-mask-image: url(../firm-ziraat/img/Close.svg);
    mask-image: url(../firm-ziraat/img/Close.svg);
    fill: white;
    color: white;
    width: 17px;
    height: 17px;
    opacity: 1
}

.cbot-close-icon-new:hover {
    color: #fff;
    opacity: 1;
    /* background: #042f67; */
}

.cbot-help-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 22px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../firm-ziraat/img/cbot-close-new.png) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
}

.cbot-help-icon:hover {
    color: #fff;
    /* background: #042f67; */
}


.cbot-cog-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    /* left: 25px; */
    top: 17px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    -webkit-mask-image: url(../firm-ziraat/img/Exclamation.svg);
    mask-image: url(../firm-ziraat/img/Exclamation.svg);
    width: 20px;
    height: 20px;
    right: 52px;
    opacity: 1;
}

.cbot-cog-icon:hover {
    color: #fff;
    opacity: 1;
    /* background: #042f67; */
}

.cbot-dialog-button,
.cbot-dialog-icon {
    position: fixed;
    background: linear-gradient(to bottom right, #2754b9, #00326c);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    z-index: 999999999;
}

.cbot-dialog-icon {
    bottom: 10px;
    right: 0;
    width: 300px;
    height: 150px;
    background-size: contain;
}

.cbot-help {
    /* width: 100%; */
    height: 100%;
    margin-top: 0;
    overflow: hidden;
    padding-top: 0;
    background-color: #fff;
    color: #1d3974;
    padding: 10px 10px;
    background: transparent;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
}

.cbot-help-text {
    height: calc(100% - 100px);
    word-break: break-word;
    overflow-y: auto;
    font-size: 14px;
    font-family: "GothamNarrow-Book";
    color: white;
}

.cbot-overlay-help-collapse-on {
    overflow: hidden;
    transition: transform 0.3s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
}

.cbot-overlay-help-collapse-off {
    transform: scaleY(0);
}

.cbot-dialog-help-menu-help {
    width: 192px;
    border-radius: 15px;
    background: #5d709a;
    color: #ffffff;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    position: absolute;
    z-index: 99999;
    bottom: 0;
    text-align: center;
    bottom: 78px;
    left: 7px;
    padding: 8px 0;
    display: none;
}

.cbot-overlay-text {
    height: 75%;
}

.cbot-feedback-textarea:-webkit-scrollbar-track,
#cbot-form-message:-webkit-scrollbar-track,
.cbot-help-text:-webkit-scrollbar-track,
.cbot-list-scrollable:-webkit-scrollbar-track,
#cbot-chat::-webkit-scrollbar-track,
.cbot-overlay-text::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #fff;
}

.cbot-feedback-textarea::-webkit-scrollbar,
#cbot-form-message::-webkit-scrollbar,
.cbot-help-text::-webkit-scrollbar,
.cbot-list-scrollable::-webkit-scrollbar,
#cbot-chat::-webkit-scrollbar,
.cbot-overlay-text::-webkit-scrollbar {
    width: 6px;
    /* background-color: #fff; */
    background-color: rgb(255, 255, 255, 0);
}

.cbot-feedback-textarea::-webkit-scrollbar-thumb,
#cbot-form-message::-webkit-scrollbar-thumb,
.cbot-help-text::-webkit-scrollbar-thumb,
.cbot-list-scrollable::-webkit-scrollbar-thumb,
#cbot-chat::-webkit-scrollbar-thumb,
.cbot-overlay-text::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
}

.cbot-doc-content:-webkit-scrollbar-track,
.cbot-dropdown-content:-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar,
.cbot-dropdown-content::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-doc-content::-webkit-scrollbar-thumb,
.cbot-dropdown-content::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.cbot-dialog-help-menu-help:before {
    border: 5px solid #5d709a;
    content: "";
    position: absolute;
    bottom: -5px;
    left: 15px;
    transform: rotate(45deg);
}

.cbot-dialog-button {
    bottom: 10px;
    right: -270px;
    width: 270px;
    height: 100px;
    background-size: contain;
    z-index: 999999999;
}

.cbot-dialog-button .icon {
    width: 61px;
    height: 66px;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.cbot-dialog-button .title {
    float: left;
    width: 150px;
    height: 66px;
    margin-left: 15px;
    margin-top: 20px;
    color: #fff;
    font-size: 15px;
    position: relative;
}

.cbot-dialog-button .button-area {
    position: absolute;
    bottom: 0;
    left: 0;
}

.cbot-dialog-button .button-area .button {
    width: 55px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    background: linear-gradient(to bottom right, #2754b9, #175daf);
    float: left;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    border-radius: 45px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.42);
    transition: all 0.3s ease 0s;
}

.cbot-dialog-button-title {
    position: fixed;
    bottom: 85px !important;
    right: 20px !important;
    font-size: 15px !important;
    color: #1f8ceb;
    font-family: "GothamNarrow-Book" !important;
    font-weight: bolder !important;
}

#cbot-form-message,
.cbot-last,
.cbot-msg,
.cbot-msg time:before,
.cbot-name,
.cbot-survey {
    font-family: "GothamNarrow-Book";
}

.cbot-dialog-button-help-message {
    border-radius: 50px;
    width: 215px;
    position: absolute;
    bottom: 91px;
    right: 0px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    /* background: center no-repeat #e6267c !important; */
    z-index: 999999999;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    border-radius: 15px;
    padding: 6px 12px;
}

.cbot-dialog-button-help-message:before {
    /* border: 5px solid #e6267c; */
    /* HAHAHAHA */
    content: "";
    position: absolute;
    bottom: -3px;
    right: 20px;
    transform: rotate(45deg);
}

.cbot-dialog-button-regular {
    height: 61px;
    width: 61px;
    /* position: fixed; */
    position: static;
    /* bottom: 20px; */
    /* right: 20px; */
    cursor: pointer;
    background-repeat: no-repeat;
    z-index: 999999999;
}

.cbot-animation-holder {
    bottom: 20px;
    right: 20px;
    position: fixed;
    display: block;
    z-index: 999999999;
}

/* 
.cbot-dialog-button-regular:hover + .cbot-dialog-button-help-message {
    color:#F00;
}
 */

.cbot-dialog-button-close {
    display: none;
    border-radius: 50px;
    height: 60px;
    width: 60px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: url(../firm-ziraat/img/cbot-close-icon.png) center no-repeat #00326c !important;
    z-index: 999999999;
}

.cbot-head-cover {
    width: 100%;
}

.cbot-dialog-head {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: #fff;
    /* line-height: 60px; */
    height: 55px;
    z-index: 100;
    padding: 0px 28px;
    /* cursor: pointer; */
    /* box-shadow: 0 2px 2px #ccc; */
    /* box-shadow: 0 2px 0px #d7dff1; */
    box-shadow: 0 1px 0px rgba(30, 57, 116, 0.1);
    background: #fff;
    box-sizing: content-box;
    /* background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
}

.cbot-dialog-sozlesme {
    width: 100%;
    /* border-radius: 10px; */
    font-size: 14px;
    color: #333;
    overflow: hidden;
    display: block;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: #fff;
    height: 55px;
    z-index: 100;
    padding: 2px 0;
    /* box-shadow: 0 2px 0px #d7dff1; */
    background: #3278cd;
    display: none;
    position: absolute;
    box-sizing: border-box;
}

.cbot-dialog-sozlesme span {
    font-family: "GothamNarrow-Book";
}

.cbot-dialog-head .cbot-avatar {
    display: block;
    margin-top: 10px;
    position: absolute;
    left: 15px;
    /* max-width: 65%; */
    transform: translate(0);
}

.cbot-dialog-head .cbot-avatar img {
    height: 35px;
    display: block;
    margin-right: 5px;
    float: left;
    /* max-width: 70%; */
}

.cbot-dialog-head .cbot-avatar span {
    line-height: 100%;
    display: block;
    font-size: 20px;
    color: #000;
    float: left;
    /* max-width: 130px; */
    /* max-width: calc(100% - 70px); */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: "GothamNarrow-Medium";
    text-align: center;
    padding-top: 8px;
}

.cbot-survey {
    text-align: center;
    background-color: #4463da;
    padding: 10px;
    border-radius: 100px;
    width: 290px;
    height: 100px;
    display: none;
    position: absolute !important;
    top: 40%;
    left: 25px;
    opacity: 0;
    z-index: 9999999 !important;
    color: #fff;
    font-size: 15px;
}

.cbot-survey-text {
    margin-top: 15px;
    width: 100%;
}

input::-ms-clear {
    display: none;
}

.cbot-back,
.cbot-back img,
.cbot-last,
.cbot-name {
    position: absolute;
}

.cbot-back {
    width: 90px;
    height: 50px;
    top: 13%;
    left: 0;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    cursor: pointer;
}

.cbot-back img {
    top: 5px;
    left: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.98);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    margin-left: 15px;
}

.cbot-back:active {
    background: rgba(255, 255, 255, 0.2);
}

.cbot-chat .avatar,
.cbot-chat .avatar img {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
}

.cbot-name {
    top: 25%;
    left: 90px;
    font-size: 25px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.98);
    cursor: default;
}

.cbot-last {
    top: 30px;
    left: 115px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

.cbot-chat {
    list-style-type: none;
    /* padding: 15px 0; */
    padding: 0;
    /* margin: 15px 0 0 0; */
    margin-bottom: 35px;
    /* max-height: 70%; */
    /* height: calc(100% - 134px);  */
    /* height: calc(100% - 155px); */
    height: calc(100% - 165px);
    overflow-x: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cbot-chat li {
    /* overflow: hidden; */
    /* overflow-x: hidden; */
    display: flex; 
    padding: 0 20px;
    position: relative;
}

.cbot-chat .avatar {
    position: relative;
    display: block;
    z-index: 2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
}

.cbot-chat .avatar img {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
}

.cbot-chat .day {
    position: relative;
    display: block;
    text-align: center;
    color: silver;
    height: 20px;
    text-shadow: 7px 0 0 #e5e5e5, 6px 0 0 #e5e5e5, 5px 0 0 #e5e5e5, 4px 0 0 #e5e5e5, 3px 0 0 #e5e5e5, 2px 0 0 #e5e5e5,
        1px 0 0 #e5e5e5, 1px 0 0 #e5e5e5, 0 0 0 #e5e5e5, -1px 0 0 #e5e5e5, -2px 0 0 #e5e5e5, -3px 0 0 #e5e5e5,
        -4px 0 0 #e5e5e5, -5px 0 0 #e5e5e5, -6px 0 0 #e5e5e5, -7px 0 0 #e5e5e5;
    box-shadow: inset 20px 0 0 #e5e5e5, inset -20px 0 0 #e5e5e5, inset 0 -2px 0 #d7d7d7;
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: default;
}

.cbot-other:before {
    content: url(../firm-ziraat/img/Logo2.svg);
    width: 32px;
    height: 32px;
    position: absolute;
    left: 20px;
    top: 0;
    border:0px !important;
}

.cbot-self:after {
    content: "";
    content: url(../firm-ziraat/img/User.svg);
    background-color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 20px;
    top: 0;
}

.cbot-other .msg {
    order: 1;
    border-top-left-radius: 0;
    box-shadow: -1px 2px 0 #d4d4d4;
}

.cbot-other .cbot-msg {
    margin-left: 39px;
    background-color: #fff;
    color: #1d1d1b;
    font-size: 14px;
    font-family: "GothamNarrow-Book";
    line-height: normal;
    padding: 15px 20px;
    border-radius: 0 15px 15px 15px;
    -webkit-border-radius: 0 15px 15px 15px;
    -moz-border-radius: 0 15px 15px 15px;
    -ms-border-radius: 0 15px 15px 15px;
    display: inline-block;
    /* width: inherit; */
    max-width: 310px;
    width: 100%;
}

/* .cbot-other .cbot-msg:first-child {
    margin-top: 15px;
} */

.cbot-self {
    justify-content: flex-end;
    align-items: flex-end;
}

.cbot-self .cbot-msg {
    margin-right: 40px;
    border-radius: 15px 0 15px 15px;
    -webkit-border-radius: 15px 0 15px 15px;
    -moz-border-radius: 15px 0 15px 15px;
    -ms-border-radius: 15px 0 15px 15px;
    background-color: #dbdbdb;
    border: 2px solid #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-family: "GothamNarrow-Medium";
    line-height: normal;
    padding: 15px 20px;
    display: inline-block;
}

.cbot-self .msg {
    order: 1;
    border-bottom-right-radius: 0;
    box-shadow: 1px 2px 0 #d4d4d4;
}

.cbot-self .avatar {
    order: 2;
}

.cbot-self .avatar:after {
    display: inline-block;
    bottom: 19px;
    border: 5px solid #fff;
    border-right-color: transparent;
    border-top-color: transparent;
    box-shadow: 0 2px 0 #d4d4d4;
}

.cbot-carousel-wrapper {
    overflow: hidden;
  
}

.cbot-dialog .cbot-owl-item .item {
  background-color: white;
    padding: 15px !important;
    border-radius: 0 15px 15px 15px;
}

.cbot-msg {
    background: #f2f0ff;
    min-width: 50px;
    /* padding: 3% 3% 3% 2%; */
    padding: 10px;
    border-radius: 16px;
    font-size: 14px;
    color: rgba(30, 57, 116, 1);
    word-break: break-word;
    /* overflow: hidden; */
    overflow: visible;
    position: relative;
    line-height: 20px;
    border: 1px solid #efefef;
    margin-bottom: 20px;
}

.cbot-msg .cbot-arrow {
    position: absolute;
    /* top: 75px; */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    line-height: 16px;
    color: #333;
    font-weight: 700;
    /* z-index: 99999; */
    z-index: 990;
    cursor: pointer;
    text-align: center;
}

.cbot-msg img,
.cbot-msg time {
    cursor: default;
}

.cbot-arrow.left {
    left: 0;
    background: url(../firm-ziraat/img/left-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 14px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
}

.cbot-arrow.right {
    right: 0;
    background: url(../firm-ziraat/img/right-arrow-blue.png) #fff center no-repeat;
    border-radius: 50%;
    background-size: 6px;
    background-position: 16px;
    box-shadow: 0px 0px 5px #ccc;
    opacity: 0;
    transition: 0.1s;
}

.cbot-msg p {
    font-size: 14px;
    margin: 0 0 0.2rem;
    font-family: "GothamNarrow-Book";
    line-height: 19px;
    /* font-weight: 600; */
    /* color: #5d709b; */
    text-align: left;
    /* color: #777 */
}

.cbot-msg img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 3px #eee;
    transition: all 0.4s cubic-bezier(0.565, -0.26, 0.255, 1.41);
}

.cbot-msg time {
    font-size: 0.7rem;
    color: #ccc;
    margin-top: 3px;
    float: right;
}

.cbot-msg time:before {
    content: "\f017";
    color: #ddd;
    display: inline-block;
    margin-right: 4px;
}

.cbot-form-message-area {
    width: calc(100% - 40px);
    margin: 0 20px 0 20px;
    padding: 5px 65px 15px 22px;
    background-color: #fff;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    position: relative;
}

.cbot-secondary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    background: #2599fc;
    border: 1px solid #2599fc;
    color: #ffffff;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    outline: none;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 75px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
}

.cbot-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
    text-align: center;
    line-height: 40px;
}

.cbot-okudum-anladim {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    /* width: 60%; */
    white-space: nowrap;
    width: 266px;
    font-family: "GothamNarrow-Book";
    color: #1d3974;
}

/*
checkbox private1
*/

.cbot-checkbox-checkmark-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 150px;
    cursor: pointer;
    white-space: nowrap;
    width: 266px;
    font-family: "GothamNarrow-Book";
    color: #1d3974;
}

/* Hide the browser's default checkbox */

.cbot-checkbox-checkmark-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */

.cbot-checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: solid 1px #d6d9e0;
}

/* On mouse-over, add a grey background color */

.cbot-checkbox-checkmark-container:hover input~.cbot-checkbox-checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark {
    background-color: #fff;
}

/* Create the cbot-checkbox-checkmark/indicator (hidden when not checked) */

.cbot-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the cbot-checkbox-checkmark when checked */

.cbot-checkbox-checkmark-container input:checked~.cbot-checkbox-checkmark:after {
    display: block;
}

/* Style the cbot-checkbox-checkmark/indicator */

.cbot-checkbox-checkmark-container .cbot-checkbox-checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #3278cd;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#cbot-form-message {
    font-size: 16px;
    /* padding-right: 44px; */
    border: 0;
    outline: none;
    color: #464646;
    font-family: "GothamNarrow-Book" !important;
    line-height: normal;
    width: 100%;
    box-shadow: none !important;
}

.cbot-form-message-area .cbot-send-button-info {
    border: 0;
    background: url(../firm-ziraat/img/list-type.png) no-repeat;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
    cursor: pointer;
    display: block;
    float: left;
    margin: 12px 0 0 12px;
}

/* .cbot-form-message-area .cbot-send-button-info {
    position: absolute;
    cursor: pointer;
    width: 28px;
    height: 28px;
    top: 10px;
    right: 20px;
    z-index: 999;
    border: none;
    float: left;
    display: block;
    background: none;
} */
/* .cbot-form-message-area .cbot-send-button::before {
    content: "\e971";
    font-family: 'icomoon';
    font-size: 32px;
    color: #b4bec3;
}
 */
.cbot-form-message-area .cbot-send-button-info:focus {
    outline: none;
}

.cbot-form-message-area .cbot-send-button {
    position: absolute;
    cursor: pointer;
    width: 35px;
    height: 35px;
    top: 18px;
    right: 20px;
    z-index: 999;
    border: none;
    float: left;
    display: block;
    background-image: none;
    background-color: #B4BEC4;
    -webkit-mask-image: url(../firm-ziraat/img/icon_Send.svg) !important;
    mask-image: url(../firm-ziraat/img/icon_Send.svg) !important
}

.cbot-form-message-area .cbot-send-button.active {
    background-image: none;
    background-color: #565656!important;
    -webkit-mask-image: url(../firm-ziraat/img/icon_Send.svg) !important;
    mask-image: url(../firm-ziraat/img/icon_Send.svg) !important;
}

.cbot-form-message-area .cbot-send-button:focus {
    outline: none;
}

.cbot-new-help-sentences li {
    color: #1d3974;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    letter-spacing: -0.2333333px;
    background: #ffffff;
    border-bottom: 1px solid #e0e6ed;
}

.cbot-new-help-sentences li:last-child {
    border-bottom: 0;
}

.cbot-new-help-sentences li a {
    text-decoration: none;
    color: #1d3974;
    padding: 15px 5px;
    display: block;
    width: 100%;
}

.cbot-new-help-sentences li:hover {
    background: rgba(224, 230, 237, 0.3);
}

[cbot-tooltip]:before {
    /* needed - do not touch */
    content: attr(cbot-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 10px;
    z-index: 999999999;
    color: #333;
    border-radius: 10px;
    /* box-shadow: 2px 2px 1px #caa5a5; */
    /* background: #CCC; */
    /* left: -50%; */
    transform: translateX(calc(-50% + 10px));
}

[cbot-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    background: #f0f4f8;
    margin-top: -50px;
    color: #003c6c;
}

[cbot-tooltip]:not([cbot-tooltip-persistent]):before {
    pointer-events: none;
}

@media screen and (max-width: 800px) {
    .cbot-suggestion-button-slider::-webkit-scrollbar {
        display: none;
        height: 0px !important;
    }

.cbot-help-text ul li {
background:white !important;
color: #1d1d1b !important;
}

.cbot-help-text ul li:active {
background: red !important;
color: white !important;
}

 .cbot-dialog {
    font-family: "GothamNarrow-Book" !important;
}

    #cbot-web-area {
        display: none !important;
    }

    .cbot-triple-dot {
        display: none;
    }

    .cbot-dialog,
    .cbot-remove {
        position: fixed;
        display: block;
    }

    .cbot-dialog {
        background-color: #fff;
        border-radius: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        font-family: "GothamNarrow-Book";
        font-size: 14px;
        color: #333;
    }

    .cbot-dialog-head {
        border-radius: 0;
        color: #fff;
        line-height: 60px;
        z-index: 100;
        /* padding: 5px 10px; */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: pointer;
        box-shadow: 0 2px 0px #d7dff1;
        /*  background: linear-gradient(to bottom right, #2754b9, #00326c)!important */
        background: #fff;
    }

    .cbot-msg {
        max-width: 320px;
    }

    .cbot-msg img {
        width: 300px;
    }

    .cbot-remove {
        padding: 5px 7px;
        color: #fff;
        cursor: pointer;
        right: 45px;
        top: 22px;
        border-radius: 3px;
    }

    .cbot-overlay-text {
        height: 67%;
    }

    .cbot-chat li {
        display: block !important;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }

    [cbot-tooltip]:before {
        display: none;
    }

    [cbot-tooltip]:hover:before {
        display: none;
    }

    [cbot-tooltip]:not([cbot-tooltip-persistent]):before {
        display: none;
    }
}


.cbot-dialog .cbot-component.generic-template.cbot-owl-item-box,
.cbot-dialog .cbot-list-item.cbot-owl-item-box {
    border-color: transparent !important;
    background-color: #fff;
    border: 1px solid #efefef;
    width: auto;
    margin-bottom: 10px;
    border-radius: 0 15px 15px 15px;
    -webkit-border-radius: 0 15px 15px 15px;
    -moz-border-radius: 0 15px 15px 15px;
    -ms-border-radius: 0 15px 15px 15px;
    /* height: calc(100% - 60px); */
}

.cbot-component .cbot-image {
    width: 100%;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
}

.cbot-component .cbot-image img {
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
}

.generic-template .cbot-description {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.generic-template .cbot-buttons {
    width: 100%;
    height: auto;
    margin-top: auto;
    margin-bottom: 10px;
}

.generic-template .cbot-button_component-description {
    margin-top: 0px;
}

.generic-template .cbot-buttons button {
    font-family: "GothamNarrow-Book";
}

.generic-template .cbot-title {
    /* padding: 3px 0; */
    font-weight: 700;
    color: #df0e21;
}

.generic-template .cbot-subtitle {
    color: #1d1d1b;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    /* font-weight: 600; */
    line-height: 19px;
    letter-spacing: -0.2333333px;
}

.generic-template .cbot-buttons .cbot-button {
    /* line-height: 3; */
    text-align: center;
    font-size: 14px !important;
    width: 100%;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    color: #1d1d1b;
    margin-top: 10px;
    font-family: "GothamNarrow-Medium";
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    padding: 13px 0;
    background-color: #ffffff;
    box-sizing: border-box;
    user-select: none;
}

.generic-template .cbot-buttons .cbot-button.primary {
    background-color: #1f8ceb;
    color: #fff;
}

.generic-template .cbot-buttons .cbot-button.primary:hover {
    /* background-color:#1F8CEB; */
    color: #fff;
}

.generic-template .cbot-buttons .cbot-button:disabled {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button:disabled:hover {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.generic-template .cbot-buttons .cbot-button.secondary {
    border: solid 1px #2599fc;
    background: #fff;
    color: #2599fc;
}

.generic-template .cbot-buttons .cbot-button.secondary:hover {
    color: #fff;
}

.generic-template .cbot-buttons .cbot-button a {
    font-weight: 500;
    color: #4667d7;
    text-decoration: none;
}

.generic-template .cbot-buttons .cbot-button:hover {
    /* border-color: #e10514; */
    background-color: #e10514;
    color: #fff;
}

.generic-template .cbot-buttons .cbot-button:hover a {
    color: #fff;
    text-decoration: none;
}

.cbot-component.list-template {
    min-width: 100%;
}

.list-template .cbot-list-item {
    padding: 10px 0 5px 0;
    margin: 0;
}

.cbot-list-item-description {
    float: left;
    padding: 5px;
}

.cbot-list-item-title {
    font-weight: 700;
    font-size: 14px !important;
    color: #df0e21;
}

.cbot-list-item-text {
    font-size: 14px !important;
    /* width: 170px; */
    width: 100%;
    max-width: 100%;
}

/* .cbot-list-item-image {
    width: 40px;
    height: 40 px;
    float: right;
}

.cbot-list-item-image img {
    width: 40px;
    height: 40px;
    /* margin-top: 5px; */
/* } */

.cbot-list-item-button {
    text-align: center;
    font-size: 14px !important;
    width: 100%;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    color: #1d1d1b;
    margin-top: 10px;
    font-family: "GothamNarrow-Medium" !important;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    padding: 13px 0;
    background-color: #ffffff;
    display: block;
}

.cbot-list-item-button:hover {
    border-color: #e10514;
    background-color: #e10514;
    color: #fff;
}

.cbot-list-item .cbot-list-item-button:disabled {
    /* background-color:#1F8CEB; */
    color: #ccc;
    background-color: #fff;
    cursor: default;
}

.cbot-list-item .cbot-list-item-button:disabled:hover {
    border-color: #ddd;
}

.cbot-list-item .cbot-text-button-class:hover {
    color: #ccc;
}

.cbot-typing:before {
    border: 0;
}

.cbot-typing-loader {
    margin: 8px 0 0;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    -webkit-animation: line 1s linear infinite alternate;
    -moz-animation: line 1s linear infinite alternate;
    animation: line 1s linear infinite alternate;
}

.cbot-dashed-hr {
    border: 1px dashed #cbcbcb;
    border-bottom: 0;
}

.cbot-solid-hr {
    border: 1px solid #cbcbcb;
    border-bottom: 0;
}

.cbot-txn-title {
    font-size: 13px;
    color: #1d3974;
    font-family: "GothamNarrow-Book";
    font-weight: bold;
    margin-bottom: 3px;
}

.cbot-txn-subtitle {
    font-size: 13px;
    font-weight: bold;
    color: #1f8ceb;
}

.cbot-list-new-container {
    margin-top: 10px;
}

.cbot-list-new-img {
    width: 50px;
    background-size: 25px 25px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.cbot-list-new-title {
    color: #1e3974;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-list-new-subtitle {
    color: #61749d;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.2333333px;
    word-break: break-word;
}

.cbot-component-primary-button {
    width: 266px;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #2599fc;
    background: #ffffff;
    outline: none;
    margin: 0 auto;
    display: block;
    font-family: "GothamNarrow-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    bottom: 25px;
    cursor: pointer;
    color: #2599fc;
}

@-webkit-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 0.2), 24px 0 0 0 rgba(10, 110, 189, 0.2);
    }

    25% {
        background-color: rgba(10, 110, 189, 0.4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, 0.2);
    }

    75% {
        background-color: rgba(10, 110, 189, 0.4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 0.2), 24px 0 0 0 rgba(10, 110, 189, 2);
    }
}

@-moz-keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 0.2), 24px 0 0 0 rgba(10, 110, 189, 0.2);
    }

    25% {
        background-color: rgba(10, 110, 189, 0.4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, 0.2);
    }

    75% {
        background-color: rgba(10, 110, 189, 0.4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 0.2), 24px 0 0 0 rgba(10, 110, 189, 2);
    }
}

@keyframes line {
    0% {
        background-color: rgba(10, 110, 189, 1);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 0.2), 24px 0 0 0 rgba(10, 110, 189, 0.2);
    }

    25% {
        background-color: rgba(10, 110, 189, 0.4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 2), 24px 0 0 0 rgba(10, 110, 189, 0.2);
    }

    75% {
        background-color: rgba(10, 110, 189, 0.4);
        box-shadow: 12px 0 0 0 rgba(10, 110, 189, 0.2), 24px 0 0 0 rgba(10, 110, 189, 2);
    }
}

.cbot-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px;
    user-select: none;
    /* If you want dots under the hoverable text */
}

/* cbot-tooltip text */

.cbot-tooltip .cbot-tooltiptext {
    visibility: hidden;
    min-width: 60px;
    width: calc(100% - 120px);
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

/* Show the cbot-tooltip text when you mouse over the cbot-tooltip container */

.cbot-tooltip:hover .cbot-tooltiptext {
    visibility: visible;
}

/* The Modal (background) */

.cbot-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999999999;
    /* MODEL DİĞERLERİNDEN  BİR FAZLA OLMALI */
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (Image) */

.cbot-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#cbot-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */

.cbot-modal-content,
#cbot-caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* The Close Button */

.cbot-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.cbot-modal-close:hover,
.cbot-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.cbot-msg span {
    background-color: white;
}

.cbot-msg ul li {
    overflow: visible;
    display: list-item;
}

.cbot-msg ol li {
    overflow: visible;
    display: list-item;
}

.cbot-form-message-area .textarea {
    border-radius: 0;
}

.cbot-clearfix {
    clear: both;
}

.cbot-feedback-area {
    margin-top: 7px;
}

.cbot-feedback-area .cbot-feedback-status {
    float: left;
}

.cbot-feedback-area .cbot-feedback-status-form {
    float: left;
}

.cbot-feedback-area .cbot-feedback-vote-button {
    width: 20px;
    height: 20px;
    border: 0;
    float: right;
    margin: 3px;
    padding: 0;
    cursor: pointer;
}

.cbot-vote-down-selectable {
    background: url(../img/positive-charges.png);
    background-size: 100% 100%;
    transform: scaleY(-1) scaleX(-1);
}

.cbot-vote-down-selectable:hover,
.cbot-vote-down-selectable.cbot-vote-selected {
    filter: invert(25%) sepia(88%) saturate(7476%) hue-rotate(357deg) brightness(94%) contrast(120%);
}

.cbot-vote-up-selectable:hover,
.cbot-vote-up-selectable.cbot-vote-selected {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-vote-up-selectable,
.cbot-vote-up {
    background: url(../img/positive-charges.png);
    background-size: 100% 100%;
}

.cbot-vote-up-selectable:hover {
    filter: invert(54%) sepia(94%) saturate(2321%) hue-rotate(81deg) brightness(118%) contrast(122%);
}

.cbot-feedback-vote-button:active,
.cbot-feedback-vote-button:focus {
    outline: none;
}

.cbot-feedback-textarea {
    width: 100%;
    resize: none;
    height: 40px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "GothamNarrow-Book";
}

.cbot-feedback-textarea:focus {
    outline: none;
}

.cbot-feedback-form-send {
    margin-top: 5px;
    float: right;
    background: #f0f4f8;
    border: 1px solid #5b739f;
    border-radius: 3px;
}

.cbot-feedback-form-send:disabled {
    border: 1px solid #ccc;
}

.cbot-feedback-form-send::before {
    content: "Gönder";
}

.cbot-generic-numarator {
    width: 26px;
    height: 26px;
    /* position: absolute; */
    background: #d81820;
    right: 2px;
    border-radius: 50%;
    top: 0px;
    color: #fff;
    text-align: center;
    line-height: 26px;
    float: right;
}

@keyframes cbotBounceIn {

    0%,
    2%,
    6%,
    10%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    4% {
        transform: translateY(-30px);
    }

    8% {
        transform: translateY(-15px);
    }
}

.cbot-bounce {
    animation: cbotBounceIn 10s infinite 2s;
}

.cbot-slide-right {
    right: -300px;
    animation: cbotSlideRight 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideRight {
    100% {
        right: 20px;
    }
}

.cbot-slide-left {
    left: -300px;
    animation: cbotSlideLeft 1.5s forwards;
    animation-delay: 2s;
}

@keyframes cbotSlideLeft {
    100% {
        left: 20px;
    }
}

.cbot-msg:hover .left,
.cbot-msg:hover .right {
    opacity: 1;
    transition: 0.2s;
}

.cbot-dialog-end-survey {
    transform: translateY(calc(-100% - 15px));
    position: absolute;
    right: 15px;
    width: 200px;
    padding: 15px;
    border: 5px solid #000000;
    background: #000;
    border-radius: 7px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "GothamNarrow-Book";
    text-align: center;
    padding: 9px;
    color: white;
    display: none;
}

.cbot-dialog-end-survey>span {
    display: block;
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
}

.cbot-dialog-end-survey>button {
    background: transparent;
    border: 0;
    color: black !important;
    font-size: 17px;
    cursor: pointer;
    outline: none;
    background: white;
    border-radius: 5px;
}

.cbot-dialog-end-survey>button:hover {
    color: #ccc;
}

.cbot-msg ol {
    padding-left: 15px;
}

.cbot-msg ul {
    padding-left: 15px;
}

#cbot-attachment-area {
    width: 40px;
    height: 40px;
    /* float: right; */
    background: url(../img/attachment.png);
    background-size: 100% 100%;
    margin-top: -5px;
    margin-right: -5px;
    cursor: pointer;
    position: absolute;
    right: 43px;
    top: 20px;
}

#cbot-attachment-area img {
    display: block;
    width: 30%;
    margin: 20px auto;
}

#cbot-attachment-area span {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.cbot-attachment-container {
    display: none;
    width: 200px;
    height: 100px;
    background: white;
    position: fixed;
    transform: translateX(calc(-100% + 40px)) translateY(-100%);
    -ms-transform: translateX(-100%) translateX(40px) translateY(-100%);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #ccc;
    transition: 0.1s;
    opacity: 1;
    overflow: hidden;
    user-select: none;
}

.cbot-attachment-container .cbot-attachment-block {
    transition: 0;
    background: #fff;
}

.cbot-attachment-container .cbot-attachment-block:hover {
    transition: 0.1s;
    background: #ccc;
}

.cbot-attachment-container.active {
    /* display: block; */
    opacity: 1;
}

.cbot-attachment-image {
    width: 50%;
    /* background-image: url(../img/gallery.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-location {
    width: 50%;
    /* background-image: url(../img/location-image.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-video {
    width: 50%;
    /* background-image: url(../img/location-image.png); */
    /* background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-attachment-file {
    width: 50%;
    /* background-image: url(../img/filfesicon.png);
    background-size: 100% 100%; */
    height: 100%;
    float: left;
}

.cbot-form-message-area .textarea::placeholder {
    color: #828282;
}

.cbot-help-text ul {
    padding: 0 0 0 40px;
    margin: 14px 0;
}

.cbot-help-text ul li {
    list-style-type: disc;
    font-size: 14px;
    font-family: "GothamNarrow-Book";
}

@media screen and (max-width: 768px) {

    .generic-template .cbot-buttons .cbot-button:hover {
        background-color: inherit;
        color: black;
    }

    .cbot-list-item-button:hover {
        border-color: inherit;
        background-color: inherit;
        color: black;
    }

    .generic-template .cbot-buttons .cbot-button:active {
        background-color: #e10514;
        color: #fff;
    }

    .cbot-list-item-button:active {
        background-color: #e10514;
        color: #fff;
    }

    .generic-template .cbot-buttons .cbot-button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .cbot-list-item-button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }


    #cbot-web-area {
        display: none !important;
    }

    .cbot-triple-dot {
        display: none;
    }

    .cbot-survey-fadebg {
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99998;
        background-color: #000;
        opacity: 0.3;
        display: none;
    }

    .cbot-chat li {
        display: block !important;
    }

    .cbot-chat li .cbot-flexible {
        display: flex;
    }

    .cbot-self .cbot-flexible {
        justify-content: flex-end;
        align-items: flex-end;
    }
}

#cbot-web-area {
    right: 0;
    position: fixed;
    transform: translate(-453px);
    width: 900px;
    width: calc(100% - 380px);
    max-width: 900px;
    height: 85%;
    display: none;
    opacity: 0;
}

.cbot-web-area-content {
    background: #f1f1f1;
    height: calc(100% - 70px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
    overflow: hidden;
}

.cbot-web-area-header {
    height: 59px;
    background: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: relative;
}

.cbot-web-area-content iframe {
    width: 100%;
    height: 100%;
}

.cbot-web-image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.cbot-web-image img {
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-video {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-right: -50%; */
    transform: translate(-50%, -50%);
    width: 100%;
}

.cbot-web-video iframe {
    width: 100%;
}

.cbot-web-video-container {
    height: 100%;
    width: 100%;
    background: black;
}

.cbot-web-video video {
    outline: none;
    max-width: 100%;
    max-height: 100%;
}

.cbot-web-close {
    background-image: url(../firm-ziraat/img/cbot-chevron-right-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-web-reload {
    background-image: url(../firm-ziraat/img/cbot-reload-icon-16912-flat.png);
    width: 25px;
    height: 25px;
    background-size: 60%;
    background-color: white;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #5a729e;
}

.cbot-doc-content {
    padding: 5px;
    box-sizing: content-box;
    overflow-y: scroll;
    height: calc(100% - 10px);
}

.cbot-doc-content img {
    max-width: 100%;
}

.cbot-doc-content table {
    border-collapse: collapse;
}

.cbot-doc-content td {
    border: 1px solid #000;
}

.cbot-doc-content ol {
    list-style: decimal;
}

.cbot-doc-content ol ol {
    list-style: lower-alpha;
}

.cbot-description ol {
    list-style: decimal;
}

.cbot-description ol ol {
    list-style: lower-alpha;
}

.cbot-description table {
    border-collapse: collapse;
}

.cbot-description td {
    border: 1px solid #000;
}

.cbot-triple-dot {
    background-image: url(../img/tripledot-flat.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 25px;
    float: left;
    width: 12px;
    margin-right: 5px;
    margin-top: 15px;
    /* background: white; */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    /* background-color: red; */
    background-color: #5a729e;
}

.cbot-count-badge {
    background: red;
    color: #fff;
    width: 15px;
    height: 15px;
    float: right;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    font-family: Arial;
    padding: 2px 1px 0px 1px;
    display: none !important;
}

.cbot-livechat-close {
    width: 100%;
    background: #bc1831;
    color: #fff;
    padding: 5px 0px;
    text-align: center;
    display: none;
    cursor: pointer;
}

.cbot-dialog-end-timer {
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 94px;
    background: beige;
    text-align: center;
    font-size: 12px;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}

.cbot-dialog-end-timer span {
    font-weight: bold;
}

.cbot-dropdown-input {
    box-sizing: border-box;
    background-image: url(../img/search.png);
    background-position: 14px 12px;
    background-size: 26px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 3px solid #82cbff;
    outline: none;
    background-color: #f4f7f9;
}

.cbot-dropdown-input:disabled {
    border-bottom-color: #ddd;
}

.cbot-dropdown-input:focus {
    /* outline: 3px solid #ddd; */
}

.cbot-dropdown {
    position: relative;
    display: inline-block;
}

.cbot-dropdown-content {
    display: none;
    position: absolute;
    bottom: 48px;
    background-color: #f6f6f6;
    min-width: 248px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
    max-height: 160px;
}

.cbot-dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    outline: none;
}

.cbot-dropdown-content button:hover {
    background-color: #ccc;
}

.cbot-dropdown a:hover {
    background-color: #ddd;
}

.dropbtn {
    background-color: #4caf50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #3e8e41;
}

#cbot-attachment-file-input {
    display: none;
}

.cbot-attachment-file-input {
    display: none !important;
}

/* COLORFUL SURVEY STYLING */

.cbot-colorful-radio-container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    float: left;
}

.cbot-colorful-radio-container input {
    /* position: absolute;
    opacity: 0;
    cursor: pointer; */
    display: none;
}

.cbot-colorful-radio-span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 0px 1px white inset;
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    user-select: none;
}

.cbot-colorful-radio-container:hover input~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white;
}

.cbot-colorful-radio-container input:checked~.cbot-colorful-radio-span {
    background-color: #ccc;
    color: white;
}

.cbot-colorful-radio-container-styling-0 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-0:hover input~.cbot-colorful-radio-span-styling-0,
.cbot-colorful-radio-container-styling-0 input:checked~.cbot-colorful-radio-span-styling-0 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-1 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-1:hover input~.cbot-colorful-radio-span-styling-1,
.cbot-colorful-radio-container-styling-1 input:checked~.cbot-colorful-radio-span-styling-1 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-2 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-2:hover input~.cbot-colorful-radio-span-styling-2,
.cbot-colorful-radio-container-styling-2 input:checked~.cbot-colorful-radio-span-styling-2 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-3 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-3:hover input~.cbot-colorful-radio-span-styling-3,
.cbot-colorful-radio-container-styling-3 input:checked~.cbot-colorful-radio-span-styling-3 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-4 span {
    border-color: #b75435;
    color: #b75435;
}

.cbot-colorful-radio-container-styling-4:hover input~.cbot-colorful-radio-span-styling-4,
.cbot-colorful-radio-container-styling-4 input:checked~.cbot-colorful-radio-span-styling-4 {
    background-color: #b75435;
    color: white;
}

.cbot-colorful-radio-container-styling-5 span {
    border-color: #b95121;
    color: #b95121;
}

.cbot-colorful-radio-container-styling-5:hover input~.cbot-colorful-radio-span-styling-5,
.cbot-colorful-radio-container-styling-5 input:checked~.cbot-colorful-radio-span-styling-5 {
    background-color: #b95121;
    color: white;
}

.cbot-colorful-radio-container-styling-6 span {
    border-color: #e49c40;
    color: #e49c40;
}

.cbot-colorful-radio-container-styling-6:hover input~.cbot-colorful-radio-span-styling-6,
.cbot-colorful-radio-container-styling-6 input:checked~.cbot-colorful-radio-span-styling-6 {
    background-color: #e49c40;
    color: white;
}

.cbot-colorful-radio-container-styling-7 span {
    border-color: #d1c650;
    color: #d1c650;
}

.cbot-colorful-radio-container-styling-7:hover input~.cbot-colorful-radio-span-styling-7,
.cbot-colorful-radio-container-styling-7 input:checked~.cbot-colorful-radio-span-styling-7 {
    background-color: #d1c650;
    color: white;
}

.cbot-colorful-radio-container-styling-8 span {
    border-color: #bbc730;
    color: #bbc730;
}

.cbot-colorful-radio-container-styling-8:hover input~.cbot-colorful-radio-span-styling-8,
.cbot-colorful-radio-container-styling-8 input:checked~.cbot-colorful-radio-span-styling-8 {
    background-color: #bbc730;
    color: white;
}

.cbot-colorful-radio-container-styling-9 span {
    border-color: #82b652;
    color: #82b652;
}

.cbot-colorful-radio-container-styling-9:hover input~.cbot-colorful-radio-span-styling-9,
.cbot-colorful-radio-container-styling-9 input:checked~.cbot-colorful-radio-span-styling-9 {
    background-color: #82b652;
    color: white;
}

.cbot-colorful-radio-container-styling-10 span {
    border-color: #6cba4c;
    color: #6cba4c;
}

.cbot-colorful-radio-container-styling-10:hover input~.cbot-colorful-radio-span-styling-10,
.cbot-colorful-radio-container-styling-10 input:checked~.cbot-colorful-radio-span-styling-10 {
    background-color: #6cba4c;
    color: white;
}

.cbot-colorful-radio-main-container {
    height: 25px;
}

.cbot-msg.bg-none {
    background-color: transparent;
    border: none;
    padding: 0;
}

.cbot-dialog .cbot-owl-dots {}

.cbot-dialog .cbot-owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.cbot-dialog .cbot-owl-dots .cbot-owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.cbot-dialog .cbot-owl-dots .cbot-owl-dot span {
    width: 7px;
    height: 7px;
    margin: 3px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}

.cbot-dialog .cbot-owl-dots .cbot-owl-dot.active span,
.cbot-dialog .cbot-owl-dots .cbot-owl-dot:hover span {
    background: #869791;
}

.cbot-dialog .cbot-owl-stage {
    left: -20px;
    display: flex;
}

.cbot-dialog .cbot-owl-item {
    display: flex;
}


.cbot-typing {
    padding: 0;
    margin: 0;
}

.cbot-typing .cbot-msg {
    border-bottom-left-radius: 0;
    border-top-left-radius: 15px;
    margin-left: 40px !important;
    width: auto !important;
    height: auto !important;
    min-height: 20px !important;
}

.cbot-dialog .cbot-owl-carousel .item {
    width: 240px;
    display: flex;
margin-left: -8px;
}

.button-template {
    width: 310px !important;
    max-width: 100%;
}


/* .cbot-triple-button-class{
    background-color: red !important;
    color: white !important;
} */


.cbot-text-button-class {
    border: 0 !important;
    width: initial !important;
    display: flex !important;
    text-decoration: underline !important;
}

.cbot-text-button-class:hover {
    color: red !important;
}

.cbot-illusion-placeholder {
    display: block;
    font-size: 16px;
}

#cbot-form-message::placeholder {
    color: transparent;
}



.cbot-suggestion-button-slider:-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    background-color: #f1f1f1;
    cursor: pointer;
}

.cbot-suggestion-button-slider::-webkit-scrollbar {
    height: 4px;
    background-color: #f1f1f1;
    cursor: pointer;
    display: block !important;
}

.cbot-suggestion-button-slider::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 1px;
    cursor: pointer;
}

.cbot-generic-numarator {
    display: none;
}

.cbot_kredi_hesaplama {
    background: url(../firm-ziraat/img/Kredi_Hesaplama.svg) !important;
}


.cbot_urun_ve_hizmetler {
    background: url(../firm-ziraat/img/Urun_ve_Hizmetler.svg);
}

.cbot_en_yakin_atm_sube {
    background: url(../firm-ziraat/img/En_Yakin_Atm_Sube.svg);
}

.cbot_doviz_kurlari {
    background: url(../firm-ziraat/img/Doviz_Kurlari.svg);
}

.cbot_mevduat_hesaplama {
    background: url(../firm-ziraat/img/Mevduat_Hesaplama.svg);
}

.cbot_comment {
    background-image: url(../firm-ziraat/img/comment.svg);
}

.cbot-dialog-button-regular {
    position: absolute;
    right: 32px;
    bottom: 32px;
    background-color: #e6e6e6;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    z-index: 10;
    padding: 10px 10px 8px 10px;
    cursor: pointer;
    -webkit-box-shadow: 0 0 0 5px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .2);
    background-image: url(../firm-ziraat/img/zb-chat-bot-img.png);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: initial !important;
    height: 68px;
    width: 68px;
    box-sizing: border-box;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    overflow: hidden;
}



.cbot-dialog-button-regular:before {
    position: absolute;
    left: 23px;
    overflow: hidden;
    display: block;
    -webkit-animation: ellipsis steps(4, end) 3000ms infinite;
    animation: ellipsis steps(4, end) 3000ms infinite;
    content: "...";
    padding-left: 1px;
    color: #fff;
    font-size: 23px;
    line-height: 0;
    position: absolute;
    top: 27px;
    height: 14px;
    width: 0
}

.cbot-dialog-button-regular:after {
    content: "Daha fazla yardım almak için tıklayın";
    width: 180px;
    position: absolute;
    left: 58px;
    color: #242729;
    font-size: 16px;
    font-family: "GothamNarrow-Medium";
    line-height: normal;
    width: 180px;
    vertical-align: top;
    margin-top: 6px;
    margin-left: 12px;
    letter-spacing: 1px;
}


.cbot-dialog-button-regular:hover {
    width: 238px
}

@keyframes ellipsis {
    to {
        width: 22px
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 22px
    }
}

.cbot-feedback-textarea::-webkit-scrollbar,
#cbot-form-message::-webkit-scrollbar,
.cbot-help-text::-webkit-scrollbar,
.cbot-list-scrollable::-webkit-scrollbar,
#cbot-chat::-webkit-scrollbar,
.cbot-overlay-text::-webkit-scrollbar {
    display: block !important;
}

.cbot-dialog .cbot-owl-nav {
    display: none !important;
}

body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(../firm-ziraat/img/bot-bg.png)
}

#cbot-send-button, #cbot-form-message {
    -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 800px){
.cbot-form-message-area {
position: fixed !important
}
.cbot-chat {
display: block;
}
.cbot-chat>li:nth-of-type(1) {
    margin-top: 15px !important;
}
}

@media screen and (max-width: 768px){
.cbot-form-message-area {
position: fixed !important
}
.cbot-chat {
display: block;
}
.cbot-chat>li:nth-of-type(1) {
    margin-top: 15px !important;
}
}
.cbot-help-text ul {
    padding: 0 0 0 40px; 
    margin: 14px 0;
}

.cbot-help-text ul li {
    list-style-type: disc; 
    line-height: 12px;
    /* font-size: 14px; */

    text-align: center;
    font-size: 15px !important;
    width: 100%;
    font-style: normal;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 8px;
    padding: 1px 0px;
    display: inline-block;
    color:#1d1d1b;
    border-radius: 28px;
   */ border: solid 2px transparent;*/
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), -webkit-linear-gradient(52.25deg, #ed0f0f 9.19%, #ED0F0f 86.82%),-webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF);
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(52.25deg, #ed0f0f 9.19%, #ED0F0f 86.82%),linear-gradient(0deg, #FFFFFF, #FFFFFF);
    background-origin: border-box;
    background-clip: content-box, border-box;
    -webkit-box-shadow: 2px 1000px 1px #fff inset;
}

.cbot-help-text ul li:hover {
    box-shadow: none;
    color: white;
}
.cbot-agent-name {
color: #848484;
margin-top: 16px;
}
.cbot-livechat-started {
    display: none;
  }
.cbot-agent-started-livechat {
    display: flex;
    margin: 0px 0 17px 64px;
    width: 79% !important;
}
  .cbot-livechat-started-text {
    margin: 0 12px 0 9px !important;
    color: #ffffff;
    margin-top: 5px;
    margin-left: -6px;
    align-self: center;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 3px;
  }

  .cbot-livechat-started svg:nth-child(2) {
    margin-left: 17px
  }

  .cbot-agent-name {
    margin: unset !important;
    margin-left: 9px;
  }
  
  .cbot-agent-name-wrapper {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }
  .cbot-vector {
    display: flex;
    max-width:300px
  }
  .cbot-agent-name-wrapper svg:nth-child(1){
    margin-right: 8px;
  }
 .cbot_text_component svg:nth-child(1){
    display:flex;
  }
.cbot-other:after{
    display: block !important;
    transform: translateY(26px) !important;
    left: 18px !important;
}
.cbot-livechat-close{
    margin-top: -4px !important;
}
.cbot-rating-group{
    display: flex;
    margin-right: -19px;
    margin-bottom: -15px;
    margin-left: -20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #f0f0f0;
    padding: 20px;
    justify-content: space-between;
}
/*.cbot-flexible .cbot-msg p:first-child{
    margin-bottom: 25px;
}*/
.cbot-rating-label{
    background-image: url(../firm-ziraat/img/cbot-survey-off.png);
    background-position: center;
    border-radius: 50%;
    background-repeat: no-repeat;
    width: 12%;
    height: 14%;
}

.cbot-icon-star{
    color: transparent !important;
}



.cbot-rating-disabled .cbot-rating-label {
    background-image: url(../firm-ziraat/img/cbot-survey-on.png);
}
.cbot-rating-input:checked~.cbot-rating-label {
    background-image: url(../firm-ziraat/img/cbot-survey-off.png);
}
.cbot-rating-group .cbot-rating-label:hover {
   background-image: url(../firm-ziraat/img/cbot-survey-on.png);
}
.cbot-rating-input:hover~.cbot-rating-label {
    background-image: url(../firm-ziraat/img/cbot-survey-off.png);
}
.cbot-rating-label.postback.hover{
    background-image: url(../firm-ziraat/img/cbot-survey-on.png);
}

.cbot-other .cbot-flexible .cbot_text_component span::-webkit-scrollbar {
width: 4px;
border-radius: 6px;
}
.cbot-other .cbot-flexible .cbot_text_component span::-webkit-scrollbar-thumb {
background: #b4bec3;
width: 4px !important;
border-radius: 6px;
}
.cbot-other .cbot-flexible .cbot_text_component span::-webkit-scrollbar-track {
width: 4px !important;
background: #ffffff;
border-radius: 6px;
}
.cbot-livechat-started svg:nth-child(2) path {   
    stroke:white;
}

[data-message-id]:not([data-message-id="undefined"]):after {
    content: url(https://prdchatbot.ziraatbank.com.tr/img/cbot-other-icon-green-dot.png);
    position: absolute;
    top: 0px;
    left: 48;
    transform: translateY(36px);
}

[data-message-id]:not([data-message-id="undefined"]):before {
    background-image: url(https://prdchatbot.ziraatbank.com.tr/firm-ziraat/img/cbot-livechat.png);
    position: absolute;
    top: -36px;
    left: 16px;
    transform: translateY(36px);
}

.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)){
    background-color: transparent;
    margin-left: 19px !important;
    margin-top: -23px !important;
    max-width: 358px;
    width: 355px;
    margin-right: -24;
}
.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) .cbot-list-item-text {
    background-color: white;
    padding: 16px;
    border-radius: 0px 15px 15px 15px;
}
.cbot-msg:has(.cbot-list-item:nth-child(2))  {
    background-color: white;
    margin-left: 44px !important;
    margin-top: 2px !important;
    max-width: 310px;
    width: 100%;
    margin-right: 0;
}
.cbot-msg:has(.cbot-text-button-class)  {
    background-color: white;
    margin-left: 44px !important;
    margin-top: 2px !important;
    max-width: 310px;
    width: 100%;
    margin-right: 0px;
}
.cbot-msg:has(.cbot-triple-button-class)  {
    background-color: white;
    margin-left: 44px !important;
    margin-top: 2px !important;
    max-width: 310px;
    width: 100%;
    margin-right: 0px;
}
.cbot-msg:has(.cbot-rating-group){
    max-width: 266px !important;
}
.cbot-suggestion-button-slider{
    cursor:grab;
}
.cbot-suggestion-button-slider::-webkit-scrollbar {
    display:none !important;
}
.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) .cbot-list-item-button:hover{
    background-color: red !important;
    color: white !important;
    border-color: transparent !important;
}
.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) .cbot-list-item-button {
       font-size: 14px !important;
       font-family: "GothamNarrow-Book" !important;
       border: 1px solid #dbdbdb;
       border-radius: 15px;
       padding: 0 10px;
       background-color: #ffffff;
       color: #4a4a49;
       height: 41px;
    }
 .cbot-suggestion-button-slider .cbot-list-item-button {
    margin-right: 10px !important;
 }
.cbot-text-button-class:hover{
    background-color: white !important;
    color:black !important;
    border-color: transparent !important;
}

.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) p.cbot-list-item-title:not(:empty) {
    padding: 9px 0px 4px 16px;
    transform: translate(0px, 5px);
    background-color: white;
    margin-bottom: -9px;
    border-radius: 0 15px 0 0;
  }
.cbot-msg:has(.cbot-list-item:nth-child(2)) .cbot-list-item-title,
.cbot-msg:has(.cbot-text-button-class) .cbot-list-item-title,
.cbot-msg:has(.cbot-triple-button-class) .cbot-list-item-title {
    padding:unset;
    transform:unset;
    margin:0 0 0.2rem;
}

@media screen and (max-width:375px) {
    .cbot-component.list-template {
    width: 100%;
}
}

.cbot-text-button-class:hover{
    color:red !important;
}

.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) .cbot-list-item-button:disabled {
    color: #ccc !important;
}
@media screen and (max-width:800px){
.cbot-list-item-button:hover {
    background-color: white !important;
    color: #ccc !important;
}
.cbot-list-item-button:active {
    background-color: red !important;
    color: white !important;
    border-color: transparent !important;
}
.cbot-text-button-class:hover{
    color:#ccc;
}
.cbot-text-button-class:active{
    color:red !important;
    background-color:white !important;
}
.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) .cbot-list-item-button:hover {
    background-color: white !important;
    color: #ccc !important;
    border-color: transparent !important;
}
.cbot-msg:has(.cbot-list-item-button:nth-of-type(7)) .cbot-list-item-button:active {
    background-color: red !important;
    color: white !important;
    border-color: transparent !important;
}
}

.zb-cc-details-head-body-elenement{
    display:grid;
    margin-bottom: 7px;
}
.zb-cc-details-head-body-elenement-title{
    margin-bottom: 1px;
}
.zb-cc-details-head-body-elenement-value{
    font-weight: bold;
}

.animate { animation: disappear 2.5s linear; }
@keyframes disappear {   30%  { opacity: 0; }   60%  { opacity: 1; }   100% { opacity: 0; } }

#cbot-form-message {
width: 88%;
}

#cbot-voice-area {
right: 65px;
top: 30px;
}
.cbot-dialog-end-timer + div{height:0px;}


.cbot-suggestion-button-slider .cbot-button.cbot-button{
    min-width: 100px;
}

.cbot-suggestion-button-slider:has(.cbot-button:nth-child(3)) .cbot-button{
    min-width: auto;
}

.cbot-mute-icon {
   right:80px;
   top:16.5px;
}

.cbot-flexible .cbot-msg .list-template .cbot-list-item .cbot-list-item-description .cbot-suggestion-list-slider{
    display: flex;
}

.cbot-dialog-button-image {
   display:none;
}

</code></pre>