article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, form {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: normal;
}

button, input, select, textarea {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'ProximaNovaRegular';
}

.custfield:focus {
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

body {
    font-family: 'ProximaNovaRegular';
    font-size: 14px;
    color: #000000;
}

a {
    text-decoration: none;
}

    a:hover, a:focus {
        text-decoration: none;
        outline: none;
    }

img {
    border: none;
    vertical-align: middle;
}

.ChatList::-webkit-scrollbar {
    display: none;
}
/***********
 * Fonts
 ***********/
@font-face {
    font-family: 'ProximaNovaLight';
    src: url('fonts/ProximaNovaLight.eot');
    src: url('fonts/ProximaNovaLight.eot') format('embedded-opentype'), url('fonts/ProximaNovaLight.woff2') format('woff2'), url('fonts/ProximaNovaLight.woff') format('woff'), url('fonts/ProximaNovaLight.ttf') format('truetype'), url('fonts/ProximaNovaLight.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaRegular';
    src: url('fonts/ProximaNovaRegular.eot');
    src: url('fonts/ProximaNovaRegular.eot') format('embedded-opentype'), url('fonts/ProximaNovaRegular.woff2') format('woff2'), url('fonts/ProximaNovaRegular.woff') format('woff'), url('fonts/ProximaNovaRegular.ttf') format('truetype'), url('fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaSemibold';
    src: url('fonts/ProximaNovaSemibold.eot');
    src: url('fonts/ProximaNovaSemibold.eot') format('embedded-opentype'), url('fonts/ProximaNovaSemibold.woff2') format('woff2'), url('fonts/ProximaNovaSemibold.woff') format('woff'), url('fonts/ProximaNovaSemibold.ttf') format('truetype'), url('fonts/ProximaNovaSemibold.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('fonts/ProximaNovaBold.eot');
    src: url('fonts/ProximaNovaBold.eot') format('embedded-opentype'), url('fonts/ProximaNovaBold.woff2') format('woff2'), url('fonts/ProximaNovaBold.woff') format('woff'), url('fonts/ProximaNovaBold.ttf') format('truetype'), url('fonts/ProximaNovaBold.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/****************
 * Common Css
 ****************/
.custfield {
    border: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

::-webkit-input-placeholder {
    color: #93a1af !important;
    font-size: 14px;
    font-family: 'ProximaNovaRegular';
}

::-moz-placeholder {
    color: #93a1af !important;
    font-size: 14px;
    font-family: 'ProximaNovaRegular';
}

:-ms-input-placeholder {
    color: #93a1af !important;
    font-size: 14px;
    font-family: 'ProximaNovaRegular';
}

:-moz-placeholder {
    color: #93a1af !important;
    font-size: 14px;
    font-family: 'ProximaNovaRegular';
}

.sp::-webkit-input-placeholder {
    color: #c4cdd5 !important;
    font-size: 12px;
}

.sp::-moz-placeholder {
    color: #c4cdd5 !important;
    font-size: 12px;
}

.sp:-ms-input-placeholder {
    color: #c4cdd5 !important;
    font-size: 12px;
}

.sp:-moz-placeholder {
    color: #c4cdd5 !important;
    font-size: 12px;
}

header, section {
    float: left;
    width: 100%;
}

#main {
    max-width: 1920px;
}
/****************
 * Login Page
 ****************/
.glightbg {
    background-color: #f6f8fa;
}

#loginform {
    background-color: #f6f8fa;
    padding: 105px 0;
}

    #loginform .container {
        width: 1200px;
        padding: 0;
    }

    #loginform .innerbox {
        width: 100%;
        float: left;
        background-color: #ffffff;
        overflow: hidden;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 0px 20px rgba(29,43,54,0.10);
    }

    #loginform .loginbox {
        float: left;
        width: 480px;
        padding: 80px;
    }

    #loginform .logo {
        margin: 10px 0 60px 0;
    }

    #loginform .loginbox .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    #loginform .loginbox .custfield {
        height: 48px;
        color: #93a1af;
        font-size: 14px;
        font-family: 'ProximaNovaSemibold';
        padding: 6px 20px 6px 69px;
        background-color: #f9fafa;
        background-repeat: no-repeat;
        background-position: 15px 50%;
        border: 1px solid #e3e8eb;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

    #loginform .loginbox .user {
        background-image: url(../images/user_icon_l.png);
    }

    #loginform .loginbox .pass {
        background-image: url(../images/pass_icon_l.png);
        padding-right: 53px;
    }

    #loginform .loginbox .showpass {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 20px;
        height: 12px;
        background: url(../images/pass_sicon_l.png) no-repeat 0 0;
    }

    #loginform .loginbox .logbttn {
        float: left;
        margin-top: 10px;
        background-color: #696aca;
        font-size: 14px;
        color: #ffffff;
        text-transform: uppercase;
        width: 140px;
        padding: 11px 0;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        box-shadow: -5px 10px 10px rgba(105, 106, 202, 0.10);
        -moz-box-shadow: -5px 10px 10px rgba(105, 106, 202, 0.10);
        -webkit-box-shadow: -5px 10px 10px rgba(105, 106, 202, 0.10);
    }

    #loginform .loginbox .forogt {
        float: right;
        padding-top: 21px;
    }

        #loginform .loginbox .forogt a {
            float: right;
            color: #72808e;
        }

            #loginform .loginbox .forogt a:hover {
                color: #f49342
            }

    #loginform .imgbox {
        width: 720px;
        float: left;
    }

        #loginform .imgbox img {
            width: 100%;
        }

    #loginform .create {
        padding: 30px 0 0;
        margin-top: 30px;
        border-top: 1px solid #d6dde3;
    }

        #loginform .create .caccount {
            background: url(../images/create_icon.png) no-repeat 0 50%;
            font-family: 'ProximaNovaSemibold';
            font-size: 16px;
            color: #72808e;
            padding: 4px 0 4px 39px;
        }

/****
 * Aedboard Page
 ****/
.headerpart {
    position: fixed;
    background-color: #ffffff;
    box-shadow: 0px 1px 4px rgba(29,43,54,.10);
    z-index: 5
}

    .headerpart .logo {
        float: left;
        margin: 10px 0 10px 30px;
    }

        .headerpart .logo img {
            width: 132px;
            float: left;
        }

    .headerpart .headerright {
        float: right;
        padding-right: 30px;
    }

        .headerpart .headerright ul.links {
            float: left;
        }

            .headerpart .headerright ul.links > li {
                float: left;
            }

                .headerpart .headerright ul.links > li .clink {
                    float: left;
                    width: 58px;
                    height: 58px;
                    position: relative;
                }

        .headerpart .headerright li .clink:hover, .headerpart .headerright .memberlink:hover, #mobilemenubtn:hover {
            background-color: #f1f1f1;
        }

        .headerpart .headerright li .msgbtn {
            background: url(../images/msg_icon.png) no-repeat 50% 50%;
        }

        .headerpart .headerright li .notibtn {
            background: url(../images/noti_icon.png) no-repeat 50% 50%;
        }

        .headerpart .headerright li .clink span {
            position: absolute;
            right: 14px;
            top: 12px;
            width: 17px;
            height: 17px;
            font-size: 8px;
            text-align: center;
            line-height: 14px;
            border: 2px solid #ffffff;
            color: #ffffff;
            background-color: #ed6347;
            border-radius: 100%;
        }

        .headerpart .headerright .memberlink {
            float: left;
            padding: 13px 17px;
        }

            .headerpart .headerright .memberlink img {
                float: left;
                width: 32px;
                height: 32px;
                overflow: hidden;
                border-radius: 100%;
            }

            .headerpart .headerright .memberlink .name {
                font-size: 14px;
                color: #72808e;
                float: left;
                background: url(../images/droparrow1.png) no-repeat 100% 50%;
                font-family: 'ProximaNovaSemibold';
                padding: 0px 18px 0 15px;
                margin-top: 6px;
            }

        .headerpart .headerright .mprofile .dropdown-menu {
            right: 0;
        }

#mobilemenubtn {
    background: url(../images/menuicon.png) no-repeat 50% 50%;
    width: 58px;
    height: 58px;
    float: right;
    cursor: pointer;
    display: none;
}

#custnav {
    position: fixed;
    background-color: #2a3b47;
    height: 100%;
    margin-top: 58px;
    width: 230px; 
}

.smallnav #custnav {
    width: 60px;
}

    .smallnav #custnav .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

        .smallnav #custnav .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 105%;
        }

        .smallnav #custnav .tooltip:hover .tooltiptext {
            visibility: visible;
        }



/* Tooltip for NLP - Nour */

.tooltip-nlp {
    position: relative;
    display: inline-block;
}

    .tooltip-nlp .tooltiptext-nlp {
        font-size: small;
        visibility: hidden;
        width: initial;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 0%;
        opacity: 0;
        transition: opacity 1s;
    }

        .tooltip-nlp .tooltiptext-nlp::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            /*margin-left: -5px;*/
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip-nlp:hover .tooltiptext-nlp {
        visibility: visible;
        opacity: 1;
    }

#menuicon {
    background: url(../images/menuicon.png) no-repeat 0 50%;
    height: 16px;
    padding: 8px 0 8px 33px;
    cursor: pointer;
    float: left;
    margin: 20px 0 20px 40px;
}

    #menuicon span {
        float: left;
        font-size: 9px;
        color: #72808e;
        text-transform: uppercase;
        line-height: 3px;
    }

#custnav .menus li {
    float: left;
    width: 100%;
}

    #custnav .menus li a {
        float: left;
        width: 100%;
        font-size: 14px;
        color: #72808e;
        border-left: 3px solid transparent;
        font-family: 'ProximaNovaSemibold';
        padding: 15px 30px 15px 37px;
    }

        #custnav .menus li a .icon {
            float: left;
            background-repeat: no-repeat;
            background-position: 0 50%;
            width: 20px;
            height: 20px;
        }

        #custnav .menus li a .dashboard {
            background-image: url(../images/db_icon.png);
        }

        #custnav .menus li a:hover .dashboard {
            background-image: url(../images/db_icon_h.png);
        }

        #custnav .menus li a .report {
            background-image: url(../images/report_icon.png);
        }

        #custnav .menus li a:hover .report {
            background-image: url(../images/report_icon_h.png);
        }

        #custnav .menus li a .audi {
            background-image: url(../images/audi_icon.png);
        }

        #custnav .menus li a:hover .audi {
            background-image: url(../images/audi_icon_h.png);
        }

        #custnav .menus li a .knowledge {
            background-image: url(../images/Knowledge_Icon.png);
        }

        #custnav .menus li a:hover .knowledge {
            background-image: url(../images/Knowledge_Icon_Selected.png);
        }

        #custnav .menus li a .bothuman {
            background-image: url(../images/Bot_Human_Icon.png);
        }

        #custnav .menus li a:hover .bothuman {
            background-image: url(../images/Bot_Human_Icon_Selected.png);
        }

        #custnav .menus li a .template {
            background-image: url('../images/template-icon.png');
        }

        #custnav .menus li a:hover .template {
            background-image: url('../images/template-icon-h.png');
        }

        #custnav .menus li a .character {
            background-image: url(../images/Character_Icon.png);
        }

        #custnav .menus li a:hover .character {
            background-image: url(../images/Character_Icon_Selected.png);
        }

        #custnav .menus li a .training {
            background-image: url(../images/AiTraining_Icon.png);
        }

        #custnav .menus li a:hover .training {
            background-image: url(../images/AiTraining_Icon_Selected.png);
        }

        #custnav .menus li a .brodc {
            background-image: url(../images/broad_icon.png);
        }

        #custnav .menus li a:hover .brodc {
            background-image: url(../images/broad_icon_h.png);
        }

        #custnav .menus li a .conver {
            background-image: url(../images/conv_icon.png);
        }

        #custnav .menus li a:hover .conver {
            background-image: url(../images/conv_icon_h.png);
        }

        #custnav .menus li a .botsetting {
            background-image: url(../images/setting_icon.png);
        }

        #custnav .menus li a:hover .botsetting {
            background-image: url(../images/setting_icon_h.png);
        }

        #custnav .menus li a .actions {
            background-image: url(../images/integration_icon.png);
        }

        #custnav .menus li a:hover .actions {
            background-image: url(../images/integration_icon_h.png);
        }

        #custnav .menus li a .rocketChat {
            background-image: url(../images/comments_icon.png);
        }

        #custnav .menus li a:hover .rocketChat {
            background-image: url(../images/comments_icon_h.png);
        }

        #custnav .menus li a .history {
            background-image: url(../images/history_icon.png);
        }

        #custnav .menus li a:hover .history {
            background-image: url(../images/history_icon_h.png);
        }

        #custnav .menus li a span {
            float: left;
            margin: 0 0 0 14px;
        }

        #custnav .menus li a:hover {
            background-color: #394956;
            border-left-color: #e87800;
            color: #a5b2bd;
        }


.copyright {
    background-color: #2a3b47;
    float: left;
    width: 225px;
    left: 0;
    bottom: 0;
    position: fixed;
    padding: 30px;
}

    .copyright p {
        border-top: 1px solid #43535f;
        font-size: 12px;
        line-height: 18px;
        color: #72808e;
        padding-top: 18px;
    }

        .copyright p a {
            color: #e87800;
        }

.smallnav #menuicon {
    margin-left: 20px;
}

    .smallnav #custnav .menus li a span, .smallnav #menuicon span, .smallnav .copyright {
        display: none;
    }

.smallnav #custnav .menus li a {
    padding: 20px 20px 20px 18px;
    border-width: 2px;
}



.commonrbox {
    position: relative;
    margin-top: 58px;
    margin-left: 230px;
}

.smallnav .commonrbox {
    margin-left: 60px;
}

.audienceconts {
    padding: 0;
}

.pageheading {
    padding: 20px 20px 20px 40px;
    background: rgb(88,91,158);
    background: -moz-linear-gradient(left, rgba(88,91,158,1) 0%, rgba(232,234,246,1) 100%);
    background: -webkit-linear-gradient(left, rgba(88,91,158,1) 0%,rgba(232,234,246,1) 100%);
    background: linear-gradient(to right, rgba(88,91,158,1) 0%,rgba(232,234,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#585b9e', endColorstr='#e8eaf6',GradientType=1 );
}

    .pageheading h1 {
        font-size: 18px;
        color: #ffffff;
        font-family: 'ProximaNovaSemibold';
        background-repeat: no-repeat;
        background-position: 0 50%;
        padding-left: 35px;
    }

        .pageheading h1.audicon {
            background-image: url(../images/audi_icon2.png);
        }

.commonrbox .options {
    background-color: #ffffff;
    border-bottom: 1px solid #d9dbde;
    padding: 10px 30px;
}

    .commonrbox .options .optionleft {
        float: left;
    }

    .commonrbox .options .botname_1 {
        float: left;
        position: relative;
    }

        .commonrbox .options .botname_1 .icon {
            float: left;
            width: 40px;
            height: 40px;
            padding: 6px;
            border: 1px solid #dde1e5;
            text-align: center;
            border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
        }

    .commonrbox .options .botname {
        float: left;
        position: relative;
    }

        .commonrbox .options .botname .icon {
            float: left;
            width: 40px;
            height: 40px;
            padding: 6px;
            border: 1px solid #dde1e5;
            text-align: center;
            border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
        }

        .commonrbox .options .botname span {
            float: left;
            margin-top: 4px;
            font-size: 24px;
            color: #253540;
            background: url(../images/droparrow2.png) no-repeat 100% 50%;
            padding: 0 26px 0 15px;
        }

    .commonrbox .options .total {
        float: left;
        font-size: 14px;
        color: #93a1af;
        margin: 11px 0 0 27px;
    }

        .commonrbox .options .total span {
            font-family: 'ProximaNovaSemibold';
            color: #394956;
        }

    .commonrbox .options .optionright {
        float: right;
    }

    .commonrbox .options .searchbox {
        float: left;
    }

        .commonrbox .options .searchbox .custfield {
            float: left;
            background-image: url(../images/search_icon.png);
            background-repeat: no-repeat;
            background-position: 12px 50%;
            padding: 6px 12px 6px 40px;
            width: 245px;
            height: 40px;
            border: 1px solid #e3e8eb;
            background-color: #f9fafa;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

    .commonrbox .options .bttns {
        float: right;
    }

.cbttn {
    background-color: #f1f3f5;
    background-repeat: no-repeat;
    display: inline-block;
    font-family: 'ProximaNovaSemibold';
    font-size: 12px;
    text-transform: uppercase;
    color: #72808e;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.commonrbox .options .cbttn {
    height: 40px;
    float: left;
    margin-left: 10px;
    background-repeat: no-repeat;
}

.commonrbox .options .viewt {
    background-image: url(../images/view_icon.png);
    background-position: 50% 50%;
    width: 40px;
}

    .commonrbox .options .viewt:hover {
        background-image: url(../images/view_icon_h.png);
    }

.commonrbox .options .filter {
    padding: 13px 50px 0 20px;
    background-image: url(../images/filter_icon.png);
    background-position: 83% 50%;
}

    .commonrbox .options .filter:hover {
        background-image: url(../images/filter_icon_h.png);
    }

.commonrbox .options .export {
    padding: 13px 50px 0 20px;
    background-image: url(../images/export_icon.png);
    background-position: 83% 50%;
}

    .commonrbox .options .export:hover {
        background-image: url(../images/export_icon_h.png);
    }

.cbttn:hover {
    background-color: #f49342 !important;
    color: #ffffff;
}

.bglight {
    background-color: #eef0f3;
}

.commonrbox .listsbox {
    padding: 10px 30px 30px;
    background-color: #eef0f3;
}

    .commonrbox .listsbox .innerbox {
        padding: 0 0 0px;
        overflow-x: auto;
    }

        .commonrbox .listsbox .innerbox ul {
            float: left;
            width: 100%;
        }

        .commonrbox .listsbox .innerbox .titleoption {
            margin-bottom: 4px;
        }

        .commonrbox .listsbox .innerbox ul > li {
            padding: 9px 10px;
            float: left;
            font-size: 13px;
            color: #919eab;
            font-family: 'ProximaNovaSemibold';
        }

            .commonrbox .listsbox .innerbox ul > li.colcw {
                width: 11%;
            }

            .commonrbox .listsbox .innerbox ul > li.col1 {
                width: 4%;
            }

            .commonrbox .listsbox .innerbox ul > li.col2 {
                width: 22%;
            }

            .commonrbox .listsbox .innerbox ul > li.col9 {
                width: 4%;
            }

    .commonrbox .listsbox .titleoption .optionicon {
        background: url(../images/op_icon.png) no-repeat 0 0;
        width: 18px;
        height: 18px;
        float: left;
        margin-left: 13px;
    }

    .commonrbox .listsbox .titleoption .optext {
        font-size: 12px;
        font-family: 'ProximaNovaSemibold';
        text-transform: uppercase;
        color: #72808e;
        background: url(../images/droparrow3.png) no-repeat 100% 50%;
        padding-right: 12px;
    }

        .commonrbox .listsbox .titleoption .optext:hover {
            color: #11a0f8;
            background-image: url(../images/droparrow3_h.png)
        }

    .commonrbox .listsbox .listrow {
        background-color: #ffffff;
        border: 1px solid transparent;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        margin-bottom: 10px;
    }

        .commonrbox .listsbox .listrow.bluebg {
            background-color: #daf1ff;
            border-color: #abd8f5;
        }

.listrow .checkbox-colum {
    margin: 10px 0 0 13px;
}

    .listrow .checkbox-colum input[type="checkbox"] {
        display: none;
    }

        .listrow .checkbox-colum input[type="checkbox"] + label span {
            float: left;
            width: 18px;
            background: url("../images/checkbox.png") no-repeat 0 0;
            height: 18px;
            vertical-align: middle;
            cursor: pointer;
            float: left;
        }

        .listrow .checkbox-colum input[type="checkbox"]:checked + label span {
            background: url("../images/checkbox.png") no-repeat 0 -18px;
        }

.listrow .member .photo {
    float: left;
}

    .listrow .member .photo img {
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
    }

.listrow .member .texts {
    float: left;
    margin: 4px 0 0 20px;
}

    .listrow .member .texts h2 {
        font-family: 'ProximaNovaSemibold';
        font-size: 14px;
        color: #72808e;
    }

    .listrow .member .texts .mail {
        font-size: 12px;
        color: #72808e;
        font-family: 'ProximaNovaRegular';
        display: inline-block;
    }

.listrow li .gtect, .listrow li .tspace, .listrow li .conver {
    margin-top: 11px;
}

    .listrow li .gtect img {
        margin-right: 9px;
        float: left;
    }

    .listrow li .gtect span {
        float: left;
    }

.listrow li .stext {
    color: #919eab;
    background-repeat: no-repeat;
    float: left;
    margin-top: 8px;
    background-position: 0 50%;
    padding: 3px 0 1px 26px;
}

.listrow li .fb {
    background-image: url(../images/fb_icon.png);
}

.listrow li .tw {
    background-image: url(../images/tw_icon.png);
}

.listrow li .conver img {
    float: left;
    margin-right: 9px;
}

.listrow li .conver span {
    float: left;
}

.listrow li .dotop {
    width: 22px;
    height: 6px;
    background: url(../images/dot_icon.png) no-repeat 0 0;
    float: left;
    margin-top: 15px;
}

    .listrow li .dotop:hover {
        background-image: url(../images/dot_icon_h.png);
    }

.listrow li .tspace {
    float: left;
}

.listrow li.oplist {
    position: relative;
}

    .listrow li.oplist .dropdown-menu {
        min-width: 113px;
        border: none;
        right: 0;
        left: inherit;
        box-shadow: 0px 2px 10px rgba(0,0,0,0.20);
        -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.20);
        -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.20);
    }

        .listrow li.oplist .dropdown-menu:after {
            content: "";
            width: 12px;
            height: 8px;
            background: url(../images/top_arrow.png) no-repeat 0;
            position: absolute;
            top: -8px;
            right: 35px;
        }

        .listrow li.oplist .dropdown-menu li {
            float: left;
            width: 100%;
            padding: 0;
        }

            .listrow li.oplist .dropdown-menu li a, .headerpart .headerright .mprofile .dropdown-menu li a {
                font-size: 13px;
                color: #72808e;
                font-family: 'ProximaNovaSemibold';
                padding: 8px 20px 5px;
            }

                .listrow li.oplist .dropdown-menu li a.deleteo {
                    color: #ed6347;
                }

                .listrow li.oplist .dropdown-menu li a:hover, .headerpart .headerright .mprofile .dropdown-menu li a:hover {
                    background-color: #f1f3f5;
                    color: #253540;
                }

.commonrbox .listsbox .listrow:last-child li.oplist .dropdown-menu {
    bottom: 37px;
    top: inherit;
    box-shadow: 0px -2px 10px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px -2px 10px rgba(0,0,0,0.20);
    -webkit-box-shadow: 0px -2px 10px rgba(0,0,0,0.20);
}

    .commonrbox .listsbox .listrow:last-child li.oplist .dropdown-menu:after {
        top: inherit;
        bottom: -8px;
        background: url(../images/bottom_arrow.png) no-repeat 0;
    }

/*Agents page start*/
.agent-section {
    padding: 35px 15px;
}

.agent-sectin-head h2 {
    font-size: 24px;
    font-family: 'ProximaNovaSemibold';
    color: #394956;
    border-bottom: 1px solid #d6dde3;
    padding-bottom: 20px;
}

.agent-single-section {
    background-color: white;
    border: 1px solid #e6e8ea;
    border-radius: 5px;
    padding: 25px;
}

.agent-section-body {
    margin-top: 25px;
    margin-bottom: 25px;
}

.agent-single-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffec99+0,5c940d+100 */
    background: #ffec99; /* Old browsers */
    background: -moz-linear-gradient(left, #ffec99 0%, #5c940d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffec99 0%,#5c940d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffec99 0%,#5c940d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffec99', endColorstr='#5c940d',GradientType=1 ); /* IE6-9 */
    padding-top: 20px;
    overflow: hidden;
    margin: auto;
}

    .agent-single-photo img {
        display: block;
        width: initial !important;
        text-align: center;
        margin: auto;
    }

.agent-section h3 {
    text-align: center;
    margin-top: 15px;
}

.agent-section h4 {
    color: #93a1af;
    font-size: 14px;
    font-family: 'ProximaNovaRegular';
    text-align: center;
}

.agent-section h3 a {
    color: #394956;
    font-size: 18px;
    text-align: center;
    font-family: 'ProximaNovaBold';
}

.agent-section ul li {
    background-color: #e5dbff;
    border-radius: 3px;
    display: inline-block;
    padding: 2px 5px;
}

.agent-section ul {
    margin: auto;
    display: block;
    text-align: center;
    margin-top: 5px;
}

    .agent-section ul li a {
        font-size: 10px;
        text-transform: uppercase;
        font-family: 'ProximaNovaSemibold';
    }

.agent-single-bottom ul {
    text-align: left !important;
}

    .agent-single-bottom ul li {
        background-color: transparent !important;
        text-align: left;
        width: 100%;
        border-top: 1px solid #d6dde3;
        margin-top: 10px;
        padding-top: 10px;
    }

.bottom-left {
    position: relative;
    padding-left: 25px;
    float: left;
}

    .bottom-left span {
        color: #93a1af;
    }

    .bottom-left img {
        position: absolute;
        top: 0;
        left: 0;
        width: initial !important;
    }

.bottom-right {
    color: #72808e;
    float: right;
    font-family: 'ProximaNovaSemibold';
}

.agent-single-icons {
    position: relative;
}

    .agent-single-icons a:first-child {
        position: absolute;
        top: 0;
        left: 0;
    }

    .agent-single-icons a img {
        width: initial !important;
    }

    .agent-single-icons a:last-child {
        position: absolute;
        top: 0;
       right:0;
    }
  .agent-single-icons-settings a:last-child {
        position: absolute;
        top: 20px;
      
    }

.pink-bg { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ef797e+0,ab3376+100 */
    background: #ef797e; /* Old browsers */
    background: -moz-linear-gradient(left, #ef797e 0%, #ab3376 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ef797e 0%,#ab3376 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ef797e 0%,#ab3376 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef797e', endColorstr='#ab3376',GradientType=1 ); /* IE6-9 */
}

.blue-bg { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#99e9f2+0,0b7285+100 */
    background: #99e9f2; /* Old browsers */
    background: -moz-linear-gradient(left, #99e9f2 0%, #0b7285 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #99e9f2 0%,#0b7285 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #99e9f2 0%,#0b7285 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99e9f2', endColorstr='#0b7285',GradientType=1 ); /* IE6-9 */
}

.owl-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -76px;
    right: 40px;
    background-image: url(../images/left-arrow.png) !important;
    background-repeat: no-repeat;
    width: 36px;
    height: 35px;
    background-color: transparent !important;
    color: transparent !important;
}

.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: -76px;
    right: 0px;
    background-image: url(../images/right-arrawo.png) !important;
    background-repeat: no-repeat;
    width: 36px;
    height: 35px;
    background-color: transparent !important;
    color: transparent !important;
}

.owl-dots {
    display: none !important;
}

#demos {
    position: relative;
}

.human-agent .agent-single-photo {
    padding-top: 0;
}

.item-add {
    width: 100% !important;
    border: 1px dashed #c1cbd4;
}

    .item-add .agent-single-section a img {
        width: initial !important;
        margin: auto;
        display: block;
        text-align: center;
    }

    .item-add .agent-single-section p {
        color: #a5b2bd;
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
    }

    .item-add .agent-single-section {
        background-color: transparent !important;
        height: 338px;
        width: 400px;
        vertical-align: middle;
        display: table-cell;
    }
/*Agents paage end*/

/*chat page start*/
.chat-left-section {
    background-color: white;
}

    .chat-left-section ul li {
        padding: 15px;
        padding-left: 75px;
        position: relative;
        min-height: 80px;
        border-bottom: 1px solid #e3e8eb;
    }

.image-box {
    position: absolute;
    top: 15px;
    left: 10px;
}

    .image-box img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
    }

.image-detail h2 {
    font-size: 16px;
    color: #4f5d6b;
    font-family: 'ProximaNovaSemibold';
}

.image-detail h4 {
    color: #93a1af;
    font-size: 13px;
    margin-top: 3px;
}

.image-detail h2 a {
    font-size: 16px;
    color: #4f5d6b;
    font-family: 'ProximaNovaSemibold';
}

.active-member {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radisu: 50%;
    background-color: #e87800;
    float: right;
    margin-top: 5px;
}

.fac-member {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #69db7c;
    bottom: -1px;
    right: -4px;
    border: 3px solid white;
    position: absolute;
}

.chat-right-top {
    background-color: #FFF;
    /*padding: 24px;*/
    padding-bottom: 44px;
    border-bottom: 1px solid #e8e9e9;
}

.username {
    color: #4f5d6b;
    font-size: 15px;
    font-family: 'ProximaNovaRegular';
}

    .username a {
        font-family: 'ProximaNovaSemibold';
        color: #4f5d6b;
    }

.chat-right-top img {
    float: left;
    margin-top: 3px;
    margin-right: 11px;
}

.chat-right-top .username {
    float: left;
    margin-top: 7px;
}

.chat-btns {
    float: right;
}

.btngreen {
    background-color: #8bc34a;
    padding: 10px 20px;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'ProximaNovaSemibold';
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.btnblue {
    background-color: #486c8f;
    padding: 10px 20px;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'ProximaNovaSemibold';
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.btngreen span {
    position: relative;
    top: 5px;
}

.btngreen img {
    float: right;
    margin-right: 0;
    margin-left: 9px;
}

.btnblue span {
    position: relative;
    top: 5px;
}

.btnblue img {
    float: right;
    margin-right: 0;
    margin-left: 9px;
}

.bottom-head {
    font-size: 13px;
    color: #7e80e7;
    text-align: center;
    font-family: 'ProximaNovaRegular';
    background-color: #eaeafc; /*padding-top:15px; padding-bottom:15px;*/
    border: 1px solid #d6d6e6;
}

.bottom-body {
    background-color: #f6f7f7;
    padding: 30px;
    border: 1px solid #d6d6e6;
    border-top: none;
}

.chat-right-bottomleft {
    width: 70%;
    float: left;
}

.chat-right-bottomright {
    width: 30%;
    float: left;
    background-color: white;
}

.Userchatbox-img img {
    margin-left: 20px;
    margin-top: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.otherchatbox-img img {
    margin-right: 20px;
    margin-top: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.otherchatbox-img1 img {
    margin-left: 20px;
    margin-top: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chatbox-img img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chatbox-textbox {
    background-color: #f1f1f1;
    border: #e0e0e0 solid 1px;
    padding: 20px;
    color: #4f5d6b;
    font-family: 'ProximaNovaSemibold';
    box-shadow: 2px 0 9px rgba(0,0,0,0.1);
    -webkit-box-shadow: 2px 0 9px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 0 9px rgba(0,0,0,0.1);
    -ms-box-shadow: 2px 0 9px rgba(0,0,0,0.1);
    -o-box-shadow: 2px 0 9px rgba(0,0,0,0.1);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.my-chat-box {
    position: relative;
    padding-left: 55px;
}

    .my-chat-box span {
        color: #93a1af;
        font-size: 12px;
        margin-top: 3px;
    }

.other-chat-box {
    position: relative;
    padding-right: 55px;
    margin-top: 30px;
    margin-bottom: 30px;
}

    .other-chat-box span {
        color: #93a1af;
        font-size: 12px;
        margin-top: 3px;
        float: right;
    }

    .other-chat-box .chatbox-img {
        position: absolute;
        top: 14px;
        right: 0;
        left: inherit
    }

    .other-chat-box .otherchatbox-img {
        position: absolute;
        top: 0;
        left: inherit
    }

    .other-chat-box .chatbox-textbox {
        background-color: #7e80e7;
        color: #FFF;
    }

.chatbox-img {
    position: absolute;
    top: 17px;
    left: 0;
}

.Userchatbox-img {
    position: absolute;
    top: 0;
    left: 0;
}

.otherchatbox-img {
    position: absolute;
    top: 0;
    left: 0;
}

.chat-box ul li {
    margin-bottom: 20px;
}

.chat-box div .item {
    height: 50px;
}

.user-profile-img {
    background-image: url(../images/user-bg.png);
    width: 175px;
    height: 181px;
    background-repeat: no-repeat;
    padding-top: 10px;
    margin: auto;
    display: block;
    margin-top: 30px;
    position: relative;
}

    .user-profile-img:after {
        background-image: url(../images/userafterimage.png);
        position: absolute;
        top: 9px;
        left: -13px;
        width: 186px;
        height: 168px;
        content: '';
    }

    .user-profile-img img {
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        width: 141px;
        height: 141px;
        text-align: center;
        display: block;
        margin: auto;
    }

.user-profile-info h2 {
    text-align: center;
}

    .user-profile-info h2 a {
        color: #394956;
        font-size: 16px;
        font-family: 'ProximaNovaBold';
        text-align: center;
    }

.user-profile-info ul {
    display: block;
    margin: auto;
    text-align: center;
}

    .user-profile-info ul li {
        background-color: #e5dbff;
        border-radius: 3px;
        display: inline-block;
        padding: 2px 5px;
    }

        .user-profile-info ul li a {
            font-size: 10px;
            text-transform: uppercase;
            font-family: 'ProximaNovaSemibold';
        }

.user-other-info {
    padding: 30px;
}

    .user-other-info ul li label {
        color: #72808e;
        font-size: 12px;
        font-family: 'ProximaNovaSemibold';
        text-transform: uppercase;
    }

    .user-other-info ul li span {
        float: right;
        color: #919eab;
        font-size: 12px;
        font-family: 'ProximaNovaSemibold';
    }

    .user-other-info ul li {
        border-bottom: 1px solid #e3e8eb;
        padding-top: 15px;
        padding-bottom: 10px;
    }

.bottom-footer {
    background-color: #d6dde3;
    padding: 30px;
}

.input-box {
    background-color: white;
    padding: 15px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    position: relative;
    padding-left: 90px;
    padding-right: 50px;
}

.input-box-left a {
    margin-right: 10px;
}

.input-box-left {
    position: absolute;
    left: 18px;
    top: 20px;
}

.input-box-right {
    position: absolute;
    right: 18px;
    top: 20px;
}

.input-box .form-group {
    margin-bottom: 0;
}

.chat-main-section .col-xs-3, .chat-main-section .col-xs-9 {
    padding-left: 0;
    padding-right: 0;
}
/*chat page end*/

/* intent page start */
.left-part {
    background-color: #FFF;
    padding: 20px;
    margin-top: 20px;
}

    .left-part h3 {
        color: #253540;
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid #d6dde3;
        padding-bottom: 20px;
        position: relative;
    }

.right-part h3 {
    color: #253540;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #d6dde3;
    padding-bottom: 20px;
    position: relative;
}

.left-part h3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #585b9e;
    content: '';
    width: 70px;
    height: 4px;
}

.right-part h3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #585b9e;
    content: '';
    width: 70px;
    height: 4px;
}

.input-field {
    background-color: #f9fafa;
    border: 1px solid #e3e8eb;
    height: 46px;
}

.left-part form .form-group label {
    color: #4f5d6b;
    font-weight: 600;
    color: #4f5d6b;
    font-size: 12px;
    text-transform: uppercase;
}

.left-part form .form-group {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.left-part form {
    padding-top: 20px;
    padding-bottom: 20px;
}

.new-paanel-group .panel .panel-heading h4 a {
    color: #aca1af;
    font-size: 14px;
}

.new-paanel-group .panel-body:before {
    border-left: 1px solid #e3e8eb;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    height: 80px;
}


.new-paanel-group .panel-body li a.left-icn {
    position: absolute;
    left: 20px;
    top: 12px;
}

.new-paanel-group .panel-body li a.right-icn {
    position: absolute;
    right: 10px;
    top: 12px;
}

.new-paanel-group .panel-body li {
    position: relative;
    padding-left: 56px;
    padding-right: 15px;
    border: 1px solid #e3eaf3;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

    .new-paanel-group .panel-body li:last-child {
        margin-bottom: 0;
    }

    .new-paanel-group .panel-body li:after {
        border: 2px solid #845ef7;
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        height: 100%;
    }

    .new-paanel-group .panel-body li p {
        font-size: 13px;
        color: #93a1af;
        position: relative;
    }

        .new-paanel-group .panel-body li p:before {
            position: absolute;
            left: -11px;
            top: 0;
            border-left: 1px solid #93a1af;
            content: '';
            height: 16px;
        }


/*train*/
.train-paanel-group .panel .panel-heading h4 a {
    font-size: 14px;
}

.train-paanel-group .panel-body:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    height: 80px;
}


.train-paanel-group .panel-body li a.left-icn {
    position: absolute;
    left: 20px;
    top: 12px;
}

.train-paanel-group .panel-body li a.right-icn {
    position: absolute;
    right: 10px;
    top: 12px;
}

.train-paanel-group .panel-body li {
    position: relative;
}

    .train-paanel-group .panel-body li:last-child {
        margin-bottom: 0;
    }

    .train-paanel-group .panel-body li:after {
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        height: 100%;
    }

    .train-paanel-group .panel-body li p {
        font-size: 13px;
        position: relative;
    }

        .train-paanel-group .panel-body li p:before {
            position: absolute;
            top: 0;
            content: '';
            height: 16px;
        }




.list-inner {
    padding-left: 25px;
    padding-right: 25px;
}

    .list-inner ul {
        border-left: 1px solid #ddd;
    }

.panel-heading {
    border: 1px solid #ddd;
    border-bottom: 1px solid #ddd !important;
    padding: 0 !important;
}

    .panel-heading a {
        padding: 10px 15px !important;
        display: block;
    }

.panel-default {
    border: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px !important;
    border-radius: 0px !important;
}

    .panel-default:last-child {
        border-bottom: 0px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

.new-paanel-group {
    margin-bottom: 0 !important;
}

.right-part {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

    .right-part ul {
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .right-part ul li a {
            font-size: 14px;
            color: #93a1af;
            font-weight: 600;
        }

            .right-part ul li a:hover {
                color: #8bc34a;
            }

        .right-part ul li {
            border-bottom: 1px solid #ddd;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }

            .right-part ul li:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: none;
            }

            .right-part ul li span {
                background-color: #e9fac8;
                padding: 8px 4px 8px 8px;
                margin-right: 15px;
                border-radius: 10px;
                overflow: hidden;
            }

                .right-part ul li span.plus {
                    border: 1px solid #8bc34a;
                    background-color: transparent;
                }
/*intent paage end */

/*agent right start */
.agent-right p {
    color: #72808e;
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.icon-new1 {
    min-height: 75px;
    position: relative;
}

    .icon-new1 img {
        width: 60px;
        height: 60px;
        margin-top: 10px;
    }

    .icon-new1 span {
        background-color: #fa5655 !important;
        width: 60px;
        height: 60px;
        padding: 0 !important;
        display: block;
        float: left;
    }

    .icon-new1 p {
        float: left;
    }

    .icon-new1 a {
        color: #4f5d6b !important;
    }

.progress-bar-new {
    margin-top: 0 !important;
}

    .progress-bar-new li {
        display: inline-block;
        background-color: #e3e8eb;
        height: 6px;
        width: 50px;
        padding: 0 !important;
        margin: 0 !important;
    }

        .progress-bar-new li:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .progress-bar-new li:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

.agent-right > ul > li {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.active-bar {
    background-color: #82c91e !important;
}

.right-arraow-purple {
    background-image: url(../images/Right-arrow-purple.png);
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 20px;
    background-repeat: no-repeat;
}

.agent-left .form-group {
    position: relative;
    padding-left: 110px;
}

    .agent-left .form-group label {
        position: absolute;
        left: 0;
        top: 17px;
    }

.que-form-group {
    border-bottom: none !important;
}

.agent-left .new-paanel-group .panel-body::before {
    border-left: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e3e8eb;
    -webkit-transition: .4s;
    transition: .4s;
    height: 20px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 0px;
        bottom: -2px;
        background-color: #c4c4c4;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #c0eb75;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-color: #74b816;
    left: 11px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.switch-abl {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.agent-right {
    position: relative;
}
/*agent right end */



/*NLP Switch Language*/
/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 * Licensed under the MIT License
 *
 * Sass/SCSS source: https://goo.gl/vVfMr
 * PSD by Orman Clark: https://goo.gl/MNFHK
 */

body {
    font: 13px/20px "ProximaNovaSemibold";
    color: #23527c;
    background: #23527c;
}

.container {
    margin: 50px auto;
    width: 120px;
}

.switch-nlp {
    position: relative;
    margin: 20px auto;
    height: 26px;
    width: 120px;
    background: rgba(35, 82, 124, 0.25);
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-nlp-label {
    position: relative;
    z-index: 2;
    float: left;
    width: 58px;
    line-height: 26px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    cursor: pointer;
}

    .switch-nlp-label:active {
        font-weight: bold;
    }

.switch-nlp-label-off {
    padding-left: 2px;
}

.switch-nlp-label-on {
    padding-right: 2px;
}

/*
  Note: using adjacent or general sibling selectors 
  combined with pseudo classes doesn't work in Safari 
  5.0 and Chrome 12.
  See this article for more info and a potential fix: 
  https://css-tricks.com/webkit-sibling-bug/
*/

.switch-nlp-input {
    display: none;
}

    .switch-nlp-input:checked + .switch-nlp-label {
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        -webkit-transition: 0.15s ease-out;
        -moz-transition: 0.15s ease-out;
        -o-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
    }

    .switch-nlp-input:checked + .switch-nlp-label-on ~ .switch-nlp-selection {
        /* Note: left: 50% doesn't transition in WebKit */
        left: 60px;
    }

.switch-nlp-selection {
    display: block;
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    width: 58px;
    height: 22px;
    background: #65bd63;
    border-radius: 3px;
    background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
    background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
    background-image: -o-linear-gradient(top, #9dd993, #65bd63);
    background-image: linear-gradient(to bottom, #9dd993, #65bd63);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

.switch-nlp-blue .switch-nlp-selection {
    background: #8bc34a;
}

.switch-nlp-yellow .switch-nlp-selection {
    background: #c4bb61;
    background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61);
    background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61);
    background-image: -o-linear-gradient(top, #e0dd94, #c4bb61);
    background-image: linear-gradient(to bottom, #e0dd94, #c4bb61);
}




/*let's scroll*/

/* width */
.scroll-part::-webkit-scrollbar {
    width: 3px;
}

/* Track */
.scroll-part::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.scroll-part::-webkit-scrollbar-thumb {
    background: #0c4f91;
}

    /* Handle on hover 23527c */
    .scroll-part::-webkit-scrollbar-thumb:hover {
        background: #082d50;
    }



/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #0c4f91;
}

    /* Handle on hover 23527c */
    ::-webkit-scrollbar-thumb:hover {
        background: #082d50;
    }





/* TOOLTIP
    
    Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

    /* Hide the tooltip content by default */
    [data-tooltip]:before,
    [data-tooltip]:after {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        pointer-events: none;
    }

    /* Position tooltip above the element */
    [data-tooltip]:before {
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-bottom: 5px;
        margin-left: -80px;
        padding: 7px;
        width: 160px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 14px;
        line-height: 1.2;
    }

    /* Triangle hack to make tooltip look like a speech bubble */
    [data-tooltip]:after {
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }

    /* Show tooltip content on hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }



.breadcrumb {
    background-color: transparent !important;
}


.alert {
    display: inline-block !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.succeed-icon {
    font-size: 17px;
    color: #28a745;
}

.faild-icon {
    font-size:17px;
    color: #dc3545;
}

.report-header-h4 {
    margin-top: 15px;
    color: #6d6d6d !important;
}

.report-value-text {
    color: #0078d7 !important;
}




.table td.truncate {
    max-width: 177px;
}

    .table td.truncate span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        max-width: 100%;
    }




.sub-menu li a {
    padding-left: 70px !important
}



.settings-subtitle {
    padding-top: 10px;
    padding-bottom: 20px;
}

.hr-settings {
    border-top: 1px solid #eaeaea !important;    
}

.settings-subtitle-entry {
    padding-left: 40px !important;
}


.glyphicon {
    top: 2px !important;
}


.p-in-view-form {
    margin-top: 2px;
    color: #616161;
    font-size: 16px;
}


.scroll-area {
    background-color: #2a3b47;
    /*width: 230px;*/
    width: 100%;
    float: left;
    padding-top: 0px;
    height: calc(100% - 115px);
    height: calc(100% - 230px);
    overflow-y: auto;
}