@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 */
}

.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/flat/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;
}

/* 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;
}


@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 {
        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-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 {
    background-color: #80808030 !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-dialog-button-regular {
    background-image: url(https://www.gib.gov.tr/sites/default/files/images/icons/chatbot_logo_l.gif);
    box-shadow: 2px 2px #b1b1b1 !important;
    border: 1px solid #dfdfdf !important;
    left: 0px;
    bottom: 32px;
    position: absolute;
    background-size: 60px 60px !important;
    border-radius: 20px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    background-color: rgb(211 240 244);
    overflow: hidden;
}

.cbot-dialog-button-regular:hover {
    width: 238px;
}

/* Gibi (kalın ve büyük yazı) */
.cbot-dialog-button-regular::before {
    content: "Gibi";
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 65px;
    top: 10px;
    color: #1b1b1b;
}

/* Dijital Vergi Asistanı (normal yazı) */
.cbot-dialog-button-regular::after {
    content: "Dijital Vergi Asistanı";
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    position: absolute;
    left: 65px;
    top: 30px;
    color: #1b1b1b;
    letter-spacing: 0.5px;
}
*,
*::before,
*::after {
   box-sizing: unset;
}
.cbot-dialog {
    background-color: #fafafa;
    border: 1px solid #a6d4dc;
}
.cbot-feedback-textarea {
    height: 120px;
}
.cbot-feedback-area .cbot-feedback-status {
    color:#B22222  ;
}
.cbot-form-message-area {
    background: #eff8f9 !important;  
}
.generic-template .cbot-buttons .cbot-button {
    background-color: #3a5e9b !important;
    color: #ffffff !important;
}
.cbot-msg{
   border: 1px solid #d8d8d8 !important;
  border-radius: 0 12px 12px 12px !important;
}
.cbot-dialog-head .cbot-avatar {
    width: 70%;
}
.cbot-typing-loader {
    margin: 0px 0 0;
}
.cbot-typing .cbot-msg {
    height: 30px !important;
}