/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.chatbot-celcom .content.app-content {
	margin: 0;
}
.chatbot-celcom .header-navbar.floating-nav {
	width: calc(100vw - (100vw - 100%) - calc(2rem * 2));
}
.chatbot-celcom .chat-application .sidebar-content .chat-list-title {
	color:#251DBF;
}
.chatbot-celcom .chat-application .sidebar-content .chat-user-list-wrapper li.active {
	background-image: linear-gradient(80deg, #251DBF, #342cce);
}
.chatbot-celcom .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #251DBF;
    background-color: #251DBF;
}
.chatbot-celcom .chat-application .chat-app-window .start-chat-area, 
.chatbot-celcom .chat-application .chat-app-window .user-chats {
	background-image: none;
}
.chatbot-celcom .chat-app-window .chats .chat-left .chat-body .chat-content {
	background-image: none;
	background-color: white;
}
.chatbot-celcom .btn-primary {
	border-color: #E21A6B !important;
	background-color: #E21A6B !important;
}
.chatbot-celcom .btn-primary:hover:not(.disabled):not(:disabled) {
	box-shadow: 0 8px 25px -8px #f35a97;
}
.bg-celcom-blue {
	background-color: #261e9a;
	background-image: url("../../app-assets/images/pages/login/bg_chatbot.png");
    background-size: 920px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}
.highlight-text {
    color: #ff8d00
}
.template-link {
	color: blue !important;
}

#inactive-chat,
#offline-chat {
    padding: 1.25rem;
}
#inactive-chat {
    background-color: #ea5455;
}
.chatbot-celcom .chat-application .chat-app-window .start-chat-area, .chatbot-celcom .chat-application .chat-app-window .user-chats {
    background-color: #E4E4E4;
}
#inactive-chat h3 {
    color: #FFFFFF;
    display: flex;
}
#inactive-chat h3::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
    margin-right: 8px;
}
#offline-chat h3 {
    color: #333;
    display: flex;
}
#offline-chat h3::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user-x'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='8.5' cy='7' r='4'%3E%3C/circle%3E%3Cline x1='18' y1='8' x2='23' y2='13'%3E%3C/line%3E%3Cline x1='23' y1='8' x2='18' y2='13'%3E%3C/line%3E%3C/svg%3E");
    margin-right: 8px;
}
.chatbot-celcom .btn.btn-secondary {
    background-color: #FF9900 !important;
    border-color: #FF9900 !important;
}
.chatbot-celcom .btn.btn-secondary:hover {
    box-shadow: 0 8px 25px -8px #ff9900;
}
.chatbot-celcom .dropdown-item:hover, 
.chatbot-celcom .dropdown-item:focus {
    color: #FFFFFF;
    background-color: #251DBF;
}

@media (min-width: 1200px) {
    .chatbot-celcom .chat-application .user-profile-sidebar {
        position: initial;
        transform: none;
    }
    .chatbot-celcom .content-body {
        display: flex;
    }
    .chatbot-celcom .chat-application .chat-app-window {
        flex: 1 0;
    }
    .chatbot-celcom .user-profile-header .close-icon {
        display: none;
    }
}
.chatbot-celcom .chat-navbar .avatar {
    padding: 0.3rem;
    background-image: linear-gradient(80deg, #251DBF, #342cce);
}
.chatbot-celcom .chat-navbar .avatar img {
    border: 0;
}

.chatbot-celcom .chat-app-window .chats .chat-body .chat-content::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 25%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #332bce;
    border-right: 0;
    border-top: 0;
}
.chatbot-celcom .chat-app-window .chats .chat-left .chat-body .chat-content::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 20%;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    border-right-color: #faf5ec;
    border-left: 0;
    border-top: 0;
}
.chatbot-celcom .chat-app-window .chats .chat-body .chat-content {
    background-image: linear-gradient(80deg, #251DBF, #342cce);
    position: relative;
    margin: 0 1.5rem 1rem 0;
    border-radius: 3rem;
    padding: 0.5rem 2rem;
}
.chatbot-celcom .chat-app-window .chats .chat-left .chat-body .chat-content {
    background-image: none;
    background-color: white;
    margin: 0 0 1rem 1.5rem;
}
.chat-navbar .form-control, .chat-navbar .input-group-text {
    border-color: #ff9900;
}
.chat-navbar .input-group-text .text-muted {
    color: #ff9900 !important;
}
.chatbot-celcom .chat-app-window .chats .chat-left .chat-body .chat-content {
    background-image: linear-gradient(80deg, #faf5ec, #ffefd8);
    color: #FFF;
}
.chatbot-celcom .chat-navbar .avatar {
    background: #ff9900;
}
.chat-app-window .user-chats .avatar img,
.chat-application .avatar-border img {
    border-color: #ff9900;
    background-color: #ff9900;
}
.chat-application .chat-app-window .start-chat-area .start-chat-icon {
    background-image: linear-gradient(80deg, #251DBF, #342cce);
    color: #FFFFFF;
    position: relative;
}
.chat-application .chat-app-window .start-chat-area .start-chat-icon::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 20%;
    width: 0px;
    height: 30px;
    border: 27px solid transparent;
    border-right-color: #261ec1;
    border-left: 0;
    border-top: 0;
}
.chatbot-celcom .chat-application .chat-app-window .start-chat-area, .chatbot-celcom .chat-application .chat-app-window .user-chats {
    background-color: #E4E4E4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='a' x='0px' y='0px' viewBox='0 0 260 58.6' style='enable-background:new 0 0 260 58.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23ececec;%7D%0A%3C/style%3E%3Cg id='b' transform='translate(-731.446 -465.963)'%3E%3Cpath id='c' class='st0' d='M869.6,485.1c3.8-0.1,7.5,1.2,10.4,3.6c1.6,1.2,4,1,5.2-0.7s1-4-0.7-5.2l0,0c-4.3-3.3-9.6-5.1-15-5.1 c-13,0.1-23.7,10.5-23.8,23.3c0.2,13,10.8,23.4,23.8,23.3c5.4,0,10.7-1.7,15-5c1.5-1.3,1.8-3.6,0.6-5.2c-1.3-1.5-3.5-1.8-5.2-0.7 c-3,2.4-6.6,3.6-10.4,3.6c-4.3,0-8.5-1.7-11.7-4.7c-3-3-4.7-7-4.7-11.3c0-4.2,1.7-8.3,4.7-11.3 C861.1,486.8,865.3,485.1,869.6,485.1z'/%3E%3Cpath id='d' class='st0' d='M755.3,485.1c3.8-0.1,7.5,1.2,10.4,3.6c1.6,1.2,4,1,5.2-0.7s1-4-0.7-5.2c-4.3-3.3-9.6-5.1-15-5.1 c-13,0.1-23.7,10.5-23.8,23.3c0.2,13,10.8,23.4,23.8,23.3c5.4,0,10.7-1.7,15-5c1.5-1.3,1.8-3.6,0.6-5.2c-1.3-1.5-3.5-1.8-5.2-0.7 c-3,2.4-6.6,3.6-10.4,3.6c-4.3,0-8.5-1.7-11.7-4.7c-3-3-4.7-7-4.7-11.3c0-4.2,1.7-8.3,4.7-11.3 C746.8,486.8,750.9,485.2,755.3,485.1L755.3,485.1z'/%3E%3Cpath id='e' class='st0' d='M916.2,477.7c-6.2,0-12.2,2.5-16.5,6.9c-9.1,9.2-9,23.9,0.2,33c4.3,4.3,10.2,6.7,16.3,6.7 s11.9-2.5,16.1-6.9c9.1-9,9.1-23.7,0-32.8l0,0C928.1,480.3,922.3,477.7,916.2,477.7L916.2,477.7z M926.9,512.3 c-5.6,6-14.9,6.2-20.9,0.7c-0.2-0.2-0.4-0.4-0.7-0.7c-3-3-4.6-7.1-4.6-11.3c0-4.2,1.6-8.3,4.6-11.4c2.9-3,6.8-4.6,10.9-4.6 c4,0,7.9,1.7,10.6,4.6c2.9,3,4.6,7.1,4.6,11.4C931.4,505.3,929.8,509.3,926.9,512.3L926.9,512.3L926.9,512.3z'/%3E%3Cpath id='f' class='st0' d='M987.5,477.7c-1.2,0-2.4,0.5-3.2,1.4L968.8,499l-15.5-19.9c-0.8-0.9-1.9-1.4-3.1-1.4H950 c-2.1,0-3.8,1.5-3.8,3.2v40.3c0,1.7,1.8,3.2,3.8,3.2s3.9-1.4,3.9-3.2v-29l11.6,15.4c0.8,0.9,2,1.4,3.2,1.4h0.1 c1.2,0,2.4-0.5,3.2-1.4l11.6-15.4v29c0,1.8,1.7,3.2,3.8,3.2s3.9-1.5,3.9-3.2V481C991.5,479.2,989.7,477.8,987.5,477.7L987.5,477.7z '/%3E%3Cpath id='g' class='st0' d='M801.5,477.7c-12.5,0-22.7,10.5-22.8,23.3c0.1,13,10.1,23.2,22.8,23.3c6.8,0,12.2-2,16.7-6.2 c0.6-0.6,1-1.4,1.1-2.2c0-1.1-0.4-2.2-1.1-3c-0.7-0.7-1.7-1-2.7-0.9c-1.2,0-2.4,0.4-3.3,1.3l0,0l0,0c-2.7,1.8-5.8,2.8-9.1,2.8 c-0.5,0-1.3,0-1.8-0.1c-4.1-0.3-8.5-2.1-10.6-4.5c-1.7-1.9-2.8-4.2-3.3-6.7l32.3-0.1c2.3,0,4-1.3,4.2-3.2v-0.1l0.1-0.1 c0-0.2,0-0.4,0-0.6v-0.4C823.1,487,813.8,477.7,801.5,477.7L801.5,477.7z M787,497.1l0.2-0.9c0.8-4.2,5.6-10.7,14.2-10.9h0.1 c10.3,0.4,14,7,15,10.8l0.2,1H787L787,497.1z'/%3E%3Cpath id='h' class='st0' d='M834.8,465.8c-2.1,0-3.8,1-3.8,3.7v51.2c0,2.7,1.7,3.7,3.8,3.7s3.9-1,3.9-3.7v-51.2 C838.7,466.8,837,465.8,834.8,465.8z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: right;
    background-size: 50%;
}


#assigned-agent {
    padding: 1.25rem;
}
#assigned-agent h3 {
    color: #333;
    display: flex;
}

/* Nuevos cambios */

.chat-app-window .chats .chat-left .chat-body .chat-content p {
    color: #0033a0;
}
.nav-chat-profile .avatar-border img {
    border: 2px solid #ff9900;
}
.nav-chat-profile .dropdown-menu {
    right: 0;
    left: auto;
    margin-top: 10px;
}

@media (max-width:991px) {
    .nav-chat-profile .dropdown-toggle {
        background: transparent;
        border: 0;
    }
    .nav-chat-profile .dropdown-toggle::after {
        content: none;
    }
}