File Manager

✏️ Edit File: /var/www/vhosts/nursoft.al/public_html/Kira/css/cbot-obiletyeniwid-custom.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(../images/cbot-close-new.png) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
}

/* Preloading */
body::after {
    content: url(../images/cbot-close-new.png) url(../images/send-active.png) url(../images/send-disabled.png) url(../images/askquestion2.png);
    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(../images/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 {
    color: #042f67;
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../images/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(../images/askquestion2.png) 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(../images/cbot-help-icons.png) !important
}

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

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

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

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

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

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

.cbot-help #deposit-icon {
    left: 192px;
    width: 32px;
    background: url(../images/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(../images/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: 50%;
    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 .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(../images/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(../images/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;
}

.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(../images/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(../images/send-disabled.png) no-repeat;
    background-size: 32px 32px !important;
}

.cbot-form-message-area .cbot-send-button.active {
    background: url(../images/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-refresh-icon {
        right: 32px !important;
        top: 23px !important;
        background-size: 27px !important;
    }

#feedback_container {
        top: 10px !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: '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-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-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-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-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;
}

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

#feedback_container {
    position:absolute;
    top: 5px;
    left: -5px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px;
  }
  
  .feedback_button_container {
     border-radius:50%;
     border-style: solid;
    border-width: 1px;
    border-color:transparent;
     width: 35px;
     height: 35px;
     margin-left: 5px;
     display: flex;
     align-items: center;
      justify-content: center;
  }
  .feedback_button{
     margin: 7px;
  }
  .dislike{
    margin-left: 1px;
  }
  .like{
  }
  .like_feedback {
    content: url(../images/cbot-like-icon.svg);
}
.dislike_feedback {
    content: url(../images/cbot-dislike-icon.svg);
}

.cbot-minimize-icon {
    /* padding: 5px 9px; */
    color: #042f67;
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 19px;
    border-radius: 20px;
    background: #fff;
    font-weight: 700;
    background: url(../images/cbot_minus.png) no-repeat;
    background-size: 21px 21px;
    width: 21px;
    height: 21px;
    /* #5a729f */
}

.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-localstorage{
    display: none;
}

.cbot-refresh-icon {
    cursor: pointer;
    position: absolute;
    right: 67px;
    top: 19px;
    border-radius: 5px;
    font-weight: 700;
    background: url(../images/cbot-refresh-icon.svg) no-repeat;
    background-size: 15px;
    background-position: center;
    width: 21px;
    height: 21px;
}
.cbot-dialog-button-regular {
    height: 35px;
    width: 224px;
}
.feedback_button_container {
     display: initial;
  }
#cbot-attachment-area {
    width: 32px;
    height: 32px;
    margin-top: 0px;
}

Batal

⬅ Naik ke Kira 18 item

Nama	Tipe	Ukuran	Diubah	Aksi
🎨above_the_fold.css	css	14 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨bootstrap.min.css	css	42.6 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨cbot-obiletyeniwid-custom.css	css	57.8 KB	2024-12-29 18:50	✏️ Edit 👁️ View
📄destination	file	293.8 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨font-awesome.min.css	css	30.3 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨footer.css	css	7.1 KB	2024-12-29 18:47	✏️ Edit 👁️ View
🎨homepage.css	css	14.2 KB	2024-12-29 19:04	✏️ Edit 👁️ View
🎨intlTelInput.css	css	24.7 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨jquery.timepicker.min.css	css	1 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨litepicker.min.css	css	10.9 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨main.css	css	92.5 KB	2024-12-29 18:50	✏️ Edit 👁️ View
🎨mobilefriendly.js.min.css	css	3 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨notyf.min.css	css	7.4 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨search.css	css	67.1 KB	2024-12-29 18:45	✏️ Edit 👁️ View
🎨select2.min.css	css	14.6 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨step.css	css	200.1 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨sweetalert2.min.css	css	38.3 KB	2024-12-25 19:15	✏️ Edit 👁️ View
🎨tipso.min.css	css	1.7 KB	2024-12-25 19:15	✏️ Edit 👁️ View