:root {
    /* Theme font and background color */
    --main-font-family: Verdana, sans-serif !important;
    --main-bg-color: rgb(179, 25, 25) !important; /*#b31919 */
    /* Header image background color and image */
    --header-icon-bg-color: rgb(0, 179, 0) !important;
    --header-icon-content: url('assets/images/assistant.png') !important;
    /* Chat background color */
    --chat-bg-color: #FFF !important;
    --chat-bg-image: url('');
    /* Left chat bubble background and text color */
    /*--chat-left-bg-color: rgb(240, 217, 9);*/
    /*--chat-left-text-color: rgb(255, 255, 255);*/
    --chat-right-text-color: rgb(252, 252, 252) !important;
    /* Right chat bubble background and text color*/
    --chat-right-bg-color: rgb(179, 25, 25) !important;
    --chat-right-text-color: rgb(252, 252, 252) !important;
    /* Button color, its text color, focus color */
    --btn-color: #b31919 !important;
    --btn-text-color: #FFF !important;
    --btn-focus-color: rgb(54, 143, 14) !important;
    /* Scrollbartrack and thumb color */
    --scrollbar-track-color: #F5F5F5 !important;
    --scrollbar-thumb-shade-1: #b4cebe !important;
    --scrollbar-thumb-shade-2: #66a178 !important;
    --scrollbar-thumb-shade-3: #418b47 !important;
    /* Message Input border color */
    /*--message-input-border-color: rgb(61, 143, 50);*/
    /**
     * Chat options send and attachment image
     * Set custom image using 'url' property
     * Default is fa-paper-plane and fa-picture-o respectively. 
     **/
    --send-message-image: url('assets/images/send-message.png');
    --send-attachment-image: unset;

    --header-font-size: 18px !important;

    --wc-option-align-right: 0px !important;

    --wc-option-font-size: 18px !important;

    --company-icon-content: url('assets/images/DriverCareWhite.svg') !important;

    --company-icon-width: 100% !important;

    --company-icon-height: 100% !important;

    --company-logo-width: 60px !important;

    --company-logo-height: 60px !important;

    --socket-disconnect-image:unset;

        /* bottom wrapper color */
    --bottom-wrapper-color: #f9d2d2;

    --logo-click-shadow: unset;

    --mark-big-shadow: unset;
}

/* 
.header-icon {
    content: url('images/header-icon.png');
}

#send-message {
    content: url('images/send-message.png');
}
*/

#send-attachment {
    content: url('assets/images/send-attachment.png');
}

.chat-msgs {
    background-repeat: round;
    background-position: top;
    font-size: 20px;
    background: linear-gradient(to bottom, #fce9e9 0%, #f8d3d3 25%, #f5bcbc 50%, #f2a6a6 75%, #ec7979 100%) !important;
    /*For IE Support */
    background-color: #FFF !important;
    background-image: url('');
}

.company-icon{
    height: var(--company-icon-height, 100%);
    width: var(--company-icon-width, 100%);
    /*For IE Support */
    width: 100% !important;
    height: 100% !important;
    /* content: url('assets/images/DriverCareWhite.svg') no-repeat; */

    border-radius: 50%;
    content: url('assets/images/DriverCareWhite.svg');
    /* background-size: cover; */
    /*content: unset;
    content: var(--company-icon-content, unset);*/ 
}

.company-logo{
    width: var(--company-logo-width, 60px);
    height: var(--company-logo-height, 60px);
    /*For IE Support */
    width: 100px !important;
    height: 100px !important;
    /*background: #EEE;
    background: var(--header-icon-bg-color, #EEE);*/
    background: transparent;
    border-radius: 50%;
    position: absolute;
    right: 99px;
    padding-bottom:40;
}

.btn-primary {
    color: #f2f2f2 !important;
    background-color: #737373!important;
    border-color: #737373!important;
}

.btn-primary:active, .btn-primary:focus{
    background: #737373!important;
}

#send-message {
    content: unset !important;
    /* content: var(--send-message-image,unset); */
}

.chat-opt{
    top: 2px;
}

.chat-attach{
    top: 0px;
}

#send-attachment {
    content: unset !important;
}

#send-attachment-paperclip::before{
    content: "\f030" !important;
}

.disconnect-img{
    height: 66px;
    padding-top: 9px;

} 

/* For IE Support */
.headerBar{
    background-color: rgb(179, 25, 25) !important;
}

body {
    font-family: Verdana, sans-serif !important;
} 

button {
   background-color: #b31919 !important;
   color: #FFF !important; 
} 

.chat-attach, .chat-send {
    color: #b31919 !important; 
} 

#webchat-maximized-wrapper .headerBar .title {
    font-size: 18px !important;
} 

.headerBar .chyme-wc-options {
    right: 0px !important;
    font-size: 18px !important;
} 

.headerBar .user-photo {
     background: rgb(0, 179, 0) !important;
} 
    
.header-icon {
     content: url('assets/images/assistant.png') !important;
}  
    
.theme-bg-color {
    background-color: rgb(179, 25, 25) !important;
} 

.max-message-input_wrapper .send-icon i, .max-message-input_wrapper i{
    color: #b31919 !important;
}  

.attach-icon{
    color: #b31919 !important;
}

.loader {
    border-top: 10px solid rgb(179, 25, 25) !important;;
}

@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, #send-attachment::-ms-clear{ left: 15px;} /* IE11 */
}

/*for IE 10 and 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#send-attachment{left: 15px;}

#send-attachment-camera{left: 12px;}

#send-message{ top:7px;}
.company-icon{ 
background: url("assets/images/DriverCareWhite.svg") no-repeat;
/ changes for .svg image-type /
position: absolute;
width: 100%;
height:100%;
border-radius: 0px !important;
top: 0px;
}

.company-logo{
/ width: 88px !important; /
height: 56px !important;
padding-top: 17px;
} 

.header-icon{
display:none;
}

.header-image-ie{
background-image: url("assets/images/assistant.png") !important;
background-size:cover;
display:block !important;
height: 100%;
width: 100%;
}

.headerBar .user-photo{
width: 63px !important;
}

} 

/* IE Edge 16+ CSS */ 
@supports (-ms-ime-align: auto) {
    #send-attachment { left: 15px; @include activated;} 
    #send-attachment-camera{ left: 12px; @include activated;} 
    .company-icon{ background: url("assets/images/DriverCareWhite.svg") no-repeat;  position:absolute; width: 120px !important; 
    height: 100% !important;  border-radius: 0px !important;
    position: absolute;
    right: 0px;
    }
    .company-logo{ width: 120px !important; height: 56px !important; margin: 10px; border-radius: 0px !important;}
    .header-icon{ display:none; } 
    .header-image-ie{ 
        background-image: url('assets/images/assistant.png') !important; 
        background-size:cover; 
        display:block !important; 
        height: 100%; 
        width: 100%;
    }
    .headerBar .user-photo{
        width: 63px !important;
    }
}

/* IE Edge 12+ CSS */ 
@supports (-ms-accelerator:true) {
    #send-attachment { left: 15px; @include activated;} 
    #send-attachment-camera{ left: 12px; @include activated;} 
    .company-icon{ background: url("assets/images/DriverCareWhite.svg") no-repeat; background-size:cover !important; }  
    .company-logo{ width: 88px !important; height: 56px !important; padding-top: 17px;}
    .header-icon{ display:none; } 
    .header-image-ie{ background-image: url('assets/images/assistant.png') !important; background-size:cover; display:block !important; height: 100%; width: 100%;}
    .headerBar .user-photo{width: 63px !important;}
}

/* For mozilla CSS */
@supports (-moz-appearance:none) {
    #send-attachment{left: 15px;}

    #send-attachment-camera{left: 12px;}

    #send-message{ top:14px;}

    #msgText{ top:15px; }

    .chat-opt{ top:-11px;}
    .company-icon{ 
        background: url("assets/images/DriverCareWhite.svg") no-repeat;
        background-size:cover !important;
        object-fit: cover;
        border-radius: 0px !important;
    }  
    
    .company-logo{
        width: 88px !important;
        height: 56px !important;
        padding-top: 17px;
        border-radius: 0px !important;
    } 

    .header-icon{ display:none; } 

    .header-image-ie{ -moz-force-broken-image-icon :1; background-image: url('assets/images/assistant.png') !important; object-fit: cover; background-size:cover; display:block !important; height: 100%; width: 100%;}
    .headerBar .user-photo{width: 63px !important;}


}