@charset "utf-8";
/* CSS Document */



.chatBot_icon {
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 1;
}

.chatBotBox {
    position: absolute;
    bottom: 10px;
    font-family: 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif';
}

.cb_flaticon-reload:before {
    content: "\f100";
    color: #868585
}

.cb_flaticon-keyboard:before {
    content: "\f102";
    color: #868585
}

.cb_flaticon-typing:before {
    content: "\f103";
    color: #868585
}

.cb_flaticon-microphone-black-shape:before {
    content: "\f104";
    color: #868585
}

.cb_flaticon-error:before {
}

.cb_flaticon-music:before {
    content: "\f106";
    font-family: Flaticon;
    color: #868585
}

.cb_flaticon-process:before {
    content: "\f107";
    font-family: Flaticon;
    font-size: 40px;
    color: #868585;
}

.cb_flaticon-leader:before {
    content: "\f108";
    font-family: Flaticon;
    font-size: 40px;
    color: #868585;
}

.chatBotBox {
    width: 350px;
    height: 550px;
    border-radius: 10px;
    right: 10px;
    box-shadow: 0px 0px 22px 0px #ccc;
    background: #fff;
}

#webchat {
    height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
}

.cb_header {
    background: #f8f8f8;
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

    .cb_header span {
        color: #c8c8c8;
        float: right;
        display: inline-block;
        padding-top: 3px;
    }

        .cb_header span:hover {
            cursor: pointer;
        }

.cb_body {
    text-align: center;
    padding: 10px 15px;
    overflow-y: scroll;
    height: 380px;
}

    .cb_body p {
        margin: 6px;
        font-size: 18px;
        color: #565656;
    }

    .cb_body ul {
        padding-left: 0px;
        width: 60%;
        margin: 15px auto;
    }

        .cb_body ul li {
            list-style: none;
            background: #599df0;
            padding: 5px;
            margin: 6px 0px;
            border: 1px solid #599df0;
        }

            .cb_body ul li a {
                color: #fff;
                font-size: 16px;
                text-decoration: none;
            }

            .cb_body ul li:hover {
                border: 1px solid #599df0;
                cursor: pointer;
                background: #fff;
            }

                .cb_body ul li:hover a {
                    color: #599df0;
                }

.incoming_msg_img {
    display: inline-block;
    width: 6%;
}

.received_msg {
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: top;
    width: 88%;
}

.received_withd_msg {
    text-align: left;
}

    .received_withd_msg p {
        background: #ebebeb none repeat scroll 0 0;
        border-radius: 3px;
        color: #646464;
        font-size: 14px;
        margin: 0;
        padding: 5px 10px 5px 12px;
        text-align: left;
        display: inline-block;
        text-align: left;
        font-weight: 400;
    }

.time_date {
    color: #747474;
    display: block;
    font-size: 12px;
    margin: 8px 0 0;
    text-align: left;
}

.time_date_right {
    color: #747474;
    display: block;
    font-size: 12px;
    margin: 8px 0 0;
    text-align: right;
}

.outgoing_msg {
    overflow: hidden;
    margin: 26px 0 26px;
}

.sent_msg {
    float: right;
}

    .sent_msg p {
        background: #599df0;
        border-radius: 3px;
        font-size: 14px;
        margin: 0;
        color: #fff;
        padding: 5px 10px 5px 12px;
        font-weight: 400;
    }

.cb_bottom {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    position: absolute;
    bottom: 0px;
    width: 91%;
    border-radius: 0px 0px 10px 10px;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.cb_bottom input {
    display: inline-block;
    width: 76%;
    height: 20px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

.cb_flaticon-microphone-black-shape:before {
    color: #868585;
    margin: 0px 0px 0px 3px;
    font-family: Flaticon;
}

.cb_flaticon-reload:before {
    margin: 0px 8px 0px 0px;
    color: #868585;
    font-family: Flaticon;
    position: relative;
    top: 5px;
}

.cb_flaticon-reload {
    float: left;
    text-decoration: none;
}

.actions {
    display: inline-block;
    width: 75%;
    line-height: 30px;
    text-align: center;
}

.cb_flaticon-typing {
    float: right;
    display: inline-block;
}

.actions p {
    color: #757575;
    margin: 0px;
    line-height: 5px;
    font-size: 14px;
}

.cb_flaticon-music:before {
    margin-left: 0px;
    font-family: Flaticon;
}

.cb_flaticon-music:before {
    margin-left: 0px;
    font-size: 28px;
    color: #868585;
    font-family: Flaticon;
}

.cb_flaticon-keyboard:before, .flaticon-process:before, .flaticon-leader:before {
    color: #757575;
    font-size: 30px;
    margin-left: 0px;
    font-family: Flaticon;
}

.cb_flaticon-keyboard {
    position: absolute;
    top: 15%;
    text-decoration: none;
}

.cb_img {
    max-width: 100%;
    height: auto;
}

@font-face {
    font-family: "Flaticon";
    src: url("font/flaticon.css");
    src: url("font/Flaticon.eot?#iefix") format("embedded-opentype"), url("font/Flaticon.woff2") format("woff2"), url("font/Flaticon.woff") format("woff"), url("font/Flaticon.ttf") format("truetype"), url("font/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("font/Flaticon.svg#Flaticon") format("svg");
    }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
    margin-left: 20px;
}

@media only screen and (max-width: 768px) {
    .show_hide img {
        width: 80px;
    }

    .chatBotBox {
        width: 320px;
    }

    .cb_bottom input {
        width: 72%;
    }

    .cb_bottom {
        width: 90%;
    }

    .chatBot_icon {
        bottom: 0px;
    }
}

@media (max-width: 320px) and (max-width: 480px) {
    .show_hide img {
        width: 50px;
    }

    .chatBotBox {
        width: 300px;
    }

    .cb_bottom input {
        width: 72%;
    }

    .cb_bottom {
        width: 90%;
    }

    .chatBot_icon {
        bottom: 0px;
    }
}

/*Chat-Bot*/
.webchat__bubble__content {
    padding: 5px;
    margin: 10px;
}

.markdown .css-ofgloz p {
    padding: 5px;
    /*color: #333;*/
}

.markdown.css-16lp6gz {
    font-size: 14px;
}

.bot-logo {
    display: inline-block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}

.webchat__stacked_indented_content {
    margin: 10px;
}

    .webchat__stacked_indented_content .webchat__bubble__content {
        background-color: white;
        border-radius: 0 18px 18px 18px;
        border: 1px solid #fff;
        -webkit-box-shadow: 1px 1px 5px 0px rgba(35,83,214,0.43);
        -moz-box-shadow: 1px 1px 5px 0px rgba(35,83,214,0.43);
        box-shadow: 1px 1px 5px 0px rgba(35,83,214,0.43);
    }

.from-user .webchat__bubble__content {
    background-color: #599df0;
    border-radius: 10px 0 10px 10px;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(35,83,214,0.43);
    -moz-box-shadow: 1px 1px 5px 0px rgba(35,83,214,0.43);
    box-shadow: 1px 1px 5px 0px rgba(35,83,214,0.43);
    border: white;
    color: #FFF;
}

/* Follow up panel */
.css-1wegtiu ul, .css-120um36 ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/*Header color*/
.cb_header {
    background: #599df0;
    border-bottom: 1px solid #599df0;
    overflow: hidden;
}

/*.ac-textBlock p {
    color: rgb(100, 100, 100);
}*/
/***************************************************************/


html,
body {
    height: 100%;
    font-size: 14px;
}

/*header {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 4638.9 651.6' style='enable-background:new 0 0 4638.9 651.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2355A0E0;%7D .st1%7Bfill:none;%7D .st2%7Bfill:%230058A8;%7D .st3%7Bfill:%23328BD8;%7D .st4%7Bfill:%23B6DCF1;%7D .st5%7Bopacity:0.2;fill:url(%23SVGID_1_);enable-background:new ;%7D%0A%3C/style%3E%3Crect y='1.1' class='st0' width='4640' height='646.3'/%3E%3Cpath class='st1' d='M3987.8,323.6L4310.3,1.1h-65.6l-460.1,460.1c-17.5,17.5-46.1,17.5-63.6,0L3260.9,1.1H0v646.3h3660.3 L3889,418.7c17.5-17.5,46.1-17.5,63.6,0l228.7,228.7h66.6l-260.2-260.2C3970.3,369.8,3970.3,341.1,3987.8,323.6z'/%3E%3Cpath class='st2' d='M3784.6,461.2L4244.7,1.1h-983.9l460.1,460.1C3738.4,478.7,3767.1,478.7,3784.6,461.2z'/%3E%3Cpath class='st3' d='M4640,1.1h-329.8l-322.5,322.5c-17.5,17.5-17.5,46.1,0,63.6l260.2,260.2H4640L4640,1.1L4640,1.1z'/%3E%3Cpath class='st4' d='M3889,418.8l-228.7,228.7h521.1l-228.7-228.7C3935.2,401.3,3906.5,401.3,3889,418.8z'/%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='3713.7576' y1='438.1175' x2='3911.4084' y2='14.2535' gradientTransform='matrix(1 0 0 -1 0 641.3969)'%3E%3Cstop offset='0' style='stop-color:%23FFFFFF;stop-opacity:0.5'/%3E%3Cstop offset='1' style='stop-color:%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpath class='st5' d='M3952.7,124.5c-17.5-17.5-46.1-17.5-63.6,0l-523,523h1109.6L3952.7,124.5z'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: right;
    background-color: #55A0E0;
    width: 100%;
    font-size: 44px;
    height: 120px;
    color: white;
    padding: 30px 0 40px 0px;
    display: inline-block;
}

.header-icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20150.2%20125%22%20style%3D%22enable-background%3Anew%200%200%20150.2%20125%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Anone%3B%7D%0A%09.st1%7Bfill%3A%23FFFFFF%3B%7D%0A%3C/style%3E%0A%3Crect%20x%3D%220.5%22%20class%3D%22st0%22%20width%3D%22149.7%22%20height%3D%22125%22/%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M59%2C102.9L21.8%2C66c-3.5-3.5-3.5-9.1%2C0-12.5l37-36.5l2.9%2C3l-37%2C36.4c-1.8%2C1.8-1.8%2C4.7%2C0%2C6.6l37.2%2C37L59%2C102.9z%22%0A%09%09/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M92.5%2C102.9l-3-3l37.2-37c0.9-0.9%2C1.4-2%2C1.4-3.3c0-1.2-0.5-2.4-1.4-3.3L89.5%2C20l2.9-3l37.2%2C36.4%0A%09%09c1.7%2C1.7%2C2.6%2C3.9%2C2.6%2C6.3s-0.9%2C4.6-2.6%2C6.3L92.5%2C102.9z%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M90.1%2C68.4c-4.5%2C0-8-3.5-8-8.1c0-4.5%2C3.5-8.1%2C8-8.1c4.4%2C0%2C8%2C3.7%2C8%2C8.1C98.1%2C64.7%2C94.4%2C68.4%2C90.1%2C68.4z%0A%09%09%20M90.1%2C56.5c-2.2%2C0-3.8%2C1.7-3.8%2C3.9c0%2C2.2%2C1.7%2C3.9%2C3.8%2C3.9c1.9%2C0%2C3.8-1.6%2C3.8-3.9S91.9%2C56.5%2C90.1%2C56.5z%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M61.4%2C68.4c-4.5%2C0-8-3.5-8-8.1c0-4.5%2C3.5-8.1%2C8-8.1c4.4%2C0%2C8%2C3.7%2C8%2C8.1C69.5%2C64.7%2C65.8%2C68.4%2C61.4%2C68.4z%0A%09%09%20M61.4%2C56.5c-2.2%2C0-3.8%2C1.7-3.8%2C3.9c0%2C2.2%2C1.7%2C3.9%2C3.8%2C3.9c1.9%2C0%2C3.8-1.6%2C3.8-3.9S63.3%2C56.5%2C61.4%2C56.5z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A");
    background-repeat: no-repeat;
    float: left;
    height: 140px;
    width: 140px;
    display: inline-block;
    vertical-align: middle;
}

.header-text {
    padding-left: 1%;
    color: #FFFFFF;
    font-family: "Segoe UI";
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 0.35px;
    line-height: 96px;
    display: inline-block;
    vertical-align: middle;
}

.header-inner-container {
    min-width: 480px;
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

    .header-inner-container::after {
        content: "";
        clear: both;
        display: table;
    }

.main-content-area {
    padding-left: 30px;
}

.content-title {
    color: #000000;
    font-family: "Segoe UI";
    font-size: 46px;
    font-weight: 300;
    line-height: 62px;
}

.main-text {
    color: #808080;
    font-size: 24px;
    font-family: "Segoe UI";
    font-size: 24px;
    font-weight: 200;
    line-height: 32px;
}

.main-text-p1 {
    padding-top: 48px;
    padding-bottom: 28px;
}

.endpoint {
    height: 32px;
    width: 571px;
    color: #808080;
    font-family: "Segoe UI";
    font-size: 24px;
    font-weight: 200;
    line-height: 32px;
    padding-top: 28px;
}

.how-to-build-section {
    padding-top: 20px;
    padding-left: 30px;
}

    .how-to-build-section > h3 {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.35px;
        line-height: 22px;
        margin: 0 0 24px 0;
        text-transform: uppercase;
    }

.step-container {
    display: flex;
    align-items: stretch;
    position: relative;
}

    .step-container dl {
        border-left: 1px solid #A0A0A0;
        display: block;
        padding: 0 24px;
        margin: 0;
    }

        .step-container dl > dt::before {
            background-color: white;
            border: 1px solid #A0A0A0;
            border-radius: 100%;
            content: '';
            left: 47px;
            height: 11px;
            position: absolute;
            width: 11px;
        }

        .step-container dl > .test-bullet::before {
            background-color: blue;
        }

        .step-container dl > dt {
            display: block;
            font-size: inherit;
            font-weight: bold;
            line-height: 20px;
        }

        .step-container dl > dd {
            font-size: inherit;
            line-height: 20px;
            margin-left: 0;
            padding-bottom: 32px;
        }

    .step-container:last-child dl {
        border-left: 1px solid transparent;
    }

.ctaLink {
    background-color: transparent;
    border: 1px solid transparent;
    color: #006AB1;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    white-space: normal;
}

    .ctaLink:focus {
        outline: 1px solid #00bcf2;
    }

    .ctaLink:hover {
        text-decoration: underline;
    }

.step-icon {
    display: flex;
    height: 38px;
    margin-right: 15px;
    width: 38px;
}

    .step-icon > div {
        height: 30px;
        width: 30px;
        background-repeat: no-repeat;
    }

.ms-logo-container {
    min-width: 580px;
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    transition: bottom 400ms;
    position: fixed;
    bottom: 0;
}

.ms-logo {
    background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20version%3D%221.1%22%20id%3D%22MS-symbol%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20400%20120%22%20style%3D%22enable-background%3Anew%200%200%20400%20120%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Anone%3B%7D%0A%09.st1%7Bfill%3A%23737474%3B%7D%0A%09.st2%7Bfill%3A%23D63F26%3B%7D%0A%09.st3%7Bfill%3A%23167D3E%3B%7D%0A%09.st4%7Bfill%3A%232E76BC%3B%7D%0A%09.st5%7Bfill%3A%23FDB813%3B%7D%0A%3C/style%3E%0A%3Crect%20x%3D%220.6%22%20class%3D%22st0%22%20width%3D%22398.7%22%20height%3D%22119%22/%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M171.3%2C38.4v43.2h-7.5V47.7h-0.1l-13.4%2C33.9h-5l-13.7-33.9h-0.1v33.9h-6.9V38.4h10.8l12.4%2C32h0.2l13.1-32H171.3%0A%09z%20M177.6%2C41.7c0-1.2%2C0.4-2.2%2C1.3-3c0.9-0.8%2C1.9-1.2%2C3.1-1.2c1.3%2C0%2C2.4%2C0.4%2C3.2%2C1.3c0.8%2C0.8%2C1.3%2C1.8%2C1.3%2C3c0%2C1.2-0.4%2C2.2-1.3%2C3%0A%09c-0.9%2C0.8-1.9%2C1.2-3.2%2C1.2s-2.3-0.4-3.1-1.2C178%2C43.8%2C177.6%2C42.8%2C177.6%2C41.7z%20M185.7%2C50.6v31h-7.3v-31H185.7z%20M207.8%2C76.3%0A%09c1.1%2C0%2C2.3-0.3%2C3.6-0.8c1.3-0.5%2C2.5-1.2%2C3.6-2v6.8c-1.2%2C0.7-2.5%2C1.2-4%2C1.5c-1.5%2C0.3-3.1%2C0.5-4.9%2C0.5c-4.6%2C0-8.3-1.4-11.1-4.3%0A%09c-2.9-2.9-4.3-6.6-4.3-11c0-5%2C1.5-9.1%2C4.4-12.3c2.9-3.2%2C7-4.8%2C12.4-4.8c1.4%2C0%2C2.7%2C0.2%2C4.1%2C0.5c1.4%2C0.4%2C2.5%2C0.8%2C3.3%2C1.2v7%0A%09c-1.1-0.8-2.3-1.5-3.4-1.9c-1.2-0.5-2.4-0.7-3.6-0.7c-2.9%2C0-5.2%2C0.9-7%2C2.8c-1.8%2C1.9-2.7%2C4.4-2.7%2C7.6c0%2C3.1%2C0.8%2C5.6%2C2.5%2C7.3%0A%09C202.6%2C75.4%2C204.9%2C76.3%2C207.8%2C76.3z%20M235.7%2C50.1c0.6%2C0%2C1.1%2C0%2C1.6%2C0.1s0.9%2C0.2%2C1.2%2C0.3v7.4c-0.4-0.3-0.9-0.5-1.7-0.8%0A%09c-0.7-0.3-1.6-0.4-2.7-0.4c-1.8%2C0-3.3%2C0.8-4.5%2C2.3c-1.2%2C1.5-1.9%2C3.8-1.9%2C7v15.6h-7.3v-31h7.3v4.9h0.1c0.7-1.7%2C1.7-3%2C3-4%0A%09C232.2%2C50.6%2C233.8%2C50.1%2C235.7%2C50.1z%20M238.9%2C66.6c0-5.1%2C1.4-9.2%2C4.3-12.2c2.9-3%2C6.9-4.5%2C12.1-4.5c4.8%2C0%2C8.6%2C1.4%2C11.3%2C4.3%0A%09c2.7%2C2.9%2C4.1%2C6.8%2C4.1%2C11.7c0%2C5-1.4%2C9-4.3%2C12c-2.9%2C3-6.8%2C4.5-11.8%2C4.5c-4.8%2C0-8.6-1.4-11.4-4.2C240.3%2C75.3%2C238.9%2C71.4%2C238.9%2C66.6z%0A%09%20M246.5%2C66.3c0%2C3.2%2C0.7%2C5.7%2C2.2%2C7.4c1.5%2C1.7%2C3.6%2C2.6%2C6.3%2C2.6c2.7%2C0%2C4.7-0.9%2C6.1-2.6c1.4-1.7%2C2.1-4.2%2C2.1-7.6c0-3.3-0.7-5.8-2.2-7.5%0A%09c-1.4-1.7-3.4-2.5-6-2.5c-2.7%2C0-4.7%2C0.9-6.2%2C2.7C247.2%2C60.5%2C246.5%2C63%2C246.5%2C66.3z%20M281.5%2C58.8c0%2C1%2C0.3%2C1.9%2C1%2C2.5%0A%09c0.7%2C0.6%2C2.1%2C1.3%2C4.4%2C2.2c2.9%2C1.2%2C5%2C2.5%2C6.1%2C3.9c1.2%2C1.5%2C1.8%2C3.2%2C1.8%2C5.3c0%2C2.9-1.1%2C5.3-3.4%2C7c-2.2%2C1.8-5.3%2C2.7-9.1%2C2.7%0A%09c-1.3%2C0-2.7-0.2-4.3-0.5c-1.6-0.3-2.9-0.7-4-1.2v-7.2c1.3%2C0.9%2C2.8%2C1.7%2C4.3%2C2.2c1.5%2C0.5%2C2.9%2C0.8%2C4.2%2C0.8c1.6%2C0%2C2.9-0.2%2C3.6-0.7%0A%09c0.8-0.5%2C1.2-1.2%2C1.2-2.3c0-1-0.4-1.9-1.2-2.5c-0.8-0.7-2.4-1.5-4.6-2.4c-2.7-1.1-4.6-2.4-5.7-3.8c-1.1-1.4-1.7-3.2-1.7-5.4%0A%09c0-2.8%2C1.1-5.1%2C3.3-6.9c2.2-1.8%2C5.1-2.7%2C8.6-2.7c1.1%2C0%2C2.3%2C0.1%2C3.6%2C0.4c1.3%2C0.2%2C2.5%2C0.6%2C3.4%2C0.9v6.9c-1-0.6-2.1-1.2-3.4-1.7%0A%09c-1.3-0.5-2.6-0.7-3.8-0.7c-1.4%2C0-2.5%2C0.3-3.2%2C0.8C281.9%2C57.1%2C281.5%2C57.8%2C281.5%2C58.8z%20M297.9%2C66.6c0-5.1%2C1.4-9.2%2C4.3-12.2%0A%09c2.9-3%2C6.9-4.5%2C12.1-4.5c4.8%2C0%2C8.6%2C1.4%2C11.3%2C4.3c2.7%2C2.9%2C4.1%2C6.8%2C4.1%2C11.7c0%2C5-1.4%2C9-4.3%2C12c-2.9%2C3-6.8%2C4.5-11.8%2C4.5%0A%09c-4.8%2C0-8.6-1.4-11.4-4.2C299.4%2C75.3%2C297.9%2C71.4%2C297.9%2C66.6z%20M305.5%2C66.3c0%2C3.2%2C0.7%2C5.7%2C2.2%2C7.4c1.5%2C1.7%2C3.6%2C2.6%2C6.3%2C2.6%0A%09c2.7%2C0%2C4.7-0.9%2C6.1-2.6c1.4-1.7%2C2.1-4.2%2C2.1-7.6c0-3.3-0.7-5.8-2.2-7.5c-1.4-1.7-3.4-2.5-6-2.5c-2.7%2C0-4.7%2C0.9-6.2%2C2.7%0A%09C306.3%2C60.5%2C305.5%2C63%2C305.5%2C66.3z%20M353.9%2C56.6h-10.9v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.3%2C1.1-5.9%2C3.2-8c2.1-2.1%2C4.8-3.1%2C8.1-3.1%0A%09c0.9%2C0%2C1.7%2C0%2C2.4%2C0.1c0.7%2C0.1%2C1.3%2C0.2%2C1.8%2C0.4V42c-0.2-0.1-0.7-0.3-1.3-0.5c-0.6-0.2-1.3-0.3-2.1-0.3c-1.5%2C0-2.7%2C0.5-3.5%2C1.4%0A%09s-1.2%2C2.4-1.2%2C4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4v14.5c0%2C1.9%2C0.3%2C3.3%2C1%2C4c0.7%2C0.8%2C1.8%2C1.2%2C3.3%2C1.2c0.4%2C0%2C0.9-0.1%2C1.5-0.3%0A%09c0.6-0.2%2C1.1-0.4%2C1.6-0.7v6c-0.5%2C0.3-1.2%2C0.5-2.3%2C0.7c-1.1%2C0.2-2.1%2C0.3-3.2%2C0.3c-3.1%2C0-5.4-0.8-6.9-2.5c-1.5-1.6-2.3-4.1-2.3-7.4%0A%09V56.6z%22/%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%2231%22%20y%3D%2224%22%20class%3D%22st2%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%09%3Crect%20x%3D%2268.8%22%20y%3D%2224%22%20class%3D%22st3%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%09%3Crect%20x%3D%2231%22%20y%3D%2261.8%22%20class%3D%22st4%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%09%3Crect%20x%3D%2268.8%22%20y%3D%2261.8%22%20class%3D%22st5%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A");
}

.ms-logo-container > div {
    min-height: 60px;
    width: 150px;
    background-repeat: no-repeat;
}

.row {
    padding: 90px 0px 0 20px;
    min-width: 480px;
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
}

.column {
    float: left;
    width: 45%;
    padding-right: 20px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

a {
    text-decoration: none;
}

.download-the-emulator {
    height: 20px;
    color: #0063B1;
    font-size: 15px;
    line-height: 20px;
    padding-bottom: 70px;
}

.how-to-iframe {
    max-width: 700px ;
    min-width: 650px ;
    /*height: 700px ;/
}

.remove-frame-height {
    height: 10px;
}*/

.user_icon {
    background: #599df0;
    position: absolute;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 63px;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;
    top: -20px;
}

#welcomeDialog p {
    padding: 20px 20px 10px 5px;
    color: #333;
    font-size: 14px;
}

.user_icon svg {
    width: 33px;
}

    .user_icon svg path {
        fill: #fff;
    }

@media only screen and (max-width: 1370px) {
    /*header {
        background-color: #55A0E0;
        background-size: auto 200px;
    }*/

    .chatBotBox {
        width: 350px;
        height: 550px;
    }

    #webchat {
        height: 420px;
    }
}

@media only screen and (max-width: 1300px) {
    /*.ms-logo {
        padding-top: 30px;
    }

    .header-text {
        font-size: 40px;
    }

    .column {
        float: none;
        padding-top: 30px;
        width: 100%;
    }

    .row {
        padding: 20px 0px 0 20px;
        min-width: 480px;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    .chatBotBox {
        width: 350px;
        height: 550px;
    }

    #webchat {
        height: 420px ;
    }*/
}

@media only screen and (max-width: 632px) {
    /*.header-text {
        font-size: 32px;
    }

    .row {
        padding: 10px 0px 0 10px;
        max-width: 490px ;
        min-width: 410px ;
    }

    .ms-logo-container {
        max-width: 490px ;
        min-width: 410px ;
    }

    .endpoint {
        font-size: 25px;
    }

    .main-text {
        font-size: 20px;
    }

    .step-container dl > dd {
        font-size: 14px;
    }

    .column {
        padding-right: 5px;
    }

    .header-icon {
        height: 110px;
        width: 110px;
    }

    .how-to-iframe {
        max-width: 480px ;
        min-width: 400px ;
        /*height: 650px ;/
        overflow: hidden;
    }

    .chatBotBox {
        width: 350px;
        height: 580px;
    }

    #webchat {
        height: 453px ;
    }*/
}

.ac-pushButton, .css-uoddiw button {
    border: 2px solid #599df0;
    cursor: pointer;
    border-radius: 20px;
    padding: 10px 0;
    color: #599df0;
}

    .ac-pushButton:hover, .css-uoddiw button:hover {
        background: #599df0;
        color: #FFF;
        cursor: pointer;
    }

.hoverBox {
    display: none;
    position: absolute;
    padding: 0 10px;
    width: 250px;
    margin-top: -52px;
    margin-left: -240px;
    background-color: #ffffff;
    border-radius: 18px 18px 0 18px;
    border: 1px solid #599df0;
    -webkit-box-shadow: 2px 2px 13px 0px rgba(35,83,214,0.43);
    -moz-box-shadow: 2px 2px 13px 0px rgba(35,83,214,0.43);
    box-shadow: 2px 2px 13px 0px rgba(35,83,214,0.43);
    color: #599df0;
    font: small-caption;
    font-family: 'Montserrat', sans-serif;
}

.bot-logo img {
    margin-top: -10px;
}

.css-16lp6gz ol, .css-ofgloz ol {
    margin-left: 18px;
}

.css-16lp6gz ul, .css-ofgloz ul {
    margin-left: 18px;
}


.bot-footer {
    padding: 5px 0 2px;
    font-weight: 500;
    text-align: center;
    border-radius: 0 0 10px 10px;
    font-style: italic;
    color: #646464;
    background-color: aliceblue;
    position: fixed;
    bottom: 10px;
    width: inherit;
    font-size: 12px;
    line-height: 12px;
}

    .bot-footer span {
        position: relative;
        top: 4px;
    }

    .bot-footer a {
        vertical-align: top;
        margin-left: 3px;
    }

#agentInfoDialog {
    display: flex;
    padding: 10px;
    background-color: aliceblue;
    font-weight: bold;
    color: #646464;
    font-family: 'Montserrat', sans-serif;
}

    #agentInfoDialog span {
        margin-left: 10px;
    }

.menu {
    float: left;
    cursor: pointer;
    margin-right: 20px;
}

.menu-box {
    position: absolute;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    /*border: 1px solid #fff;*/
    box-shadow: 2px 2px 13px 0px rgba(35,83,214,0.43);
    margin: 25px 0px;
    z-index: 1;
    /*margin-left: -145px;*/
}

    .menu-box ul {
        list-style: none;
        text-align: left;
        padding: 0;
        margin: 0;
    }

        .menu-box ul li {
            padding: 10px;
            font: menu;
            cursor: pointer;
            border-radius: 5px;
        }

            .menu-box ul li:hover {
                color: #fff;
                background-color: #599df0;
            }

.css-weu40u {
    margin-left: 20px;
}

.css-ofgloz {
    min-height: 20px;
}

#welcomeDialog, #feedbackDialog {
    width: 80%;
    margin: 25% auto;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    box-shadow: 0px 1px 4px 0px rgba(35,83,214,0.43);
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

    #welcomeDialog input {
        width: 90%;
        color: #599df0;
        background-color: rgb(255, 255, 255);
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-align: left;
        border-width: 1px;
        border-color: rgb(224, 224, 226);
        border-style: solid;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px inset;
        text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
        padding: 0px 14px;
        margin: 5px auto;
        display: block;
        max-height: 52px;
        height: 40px;
        transition: none 0s ease 0s;
    }

    #feedbackDialog p {
        color: #333;
        font-size: 14px;
        margin-bottom: 10px;
    }

    #feedbackDialog textarea {
        width: 90%;
        max-width: 90%;
        color: #599df0;
        background-color: rgb(255, 255, 255);
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        border-width: 1px;
        border-color: rgb(224, 224, 226);
        border-style: solid;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px inset;
        text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
        padding: 10px;
        margin: 5px auto 10px;
        display: block;
        height: 100px;
        max-height: 150px;
        transition: none 0s ease 0s;
    }

    #welcomeDialog button, #feedbackDialog button {
        color: rgb(255, 255, 255);
        background-color: #599df0;
        /* font-family: "Open Sans", sans-serif; */
        font-weight: 600;
        font-style: normal;
        font-size: 13px;
        line-height: 1.5;
        text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 40px;
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px inset;
        cursor: pointer;
        border: none;
        border-radius: 5px;
    }

.alert-message {
    display: none;
    color: red;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}

/*Webchat css*/
.root_css {
    overflow: hidden;
    position: relative;
}

    .root_css > * {
        left: 0;
        position: absolute;
        top: 0
    }


.root_initialsAvatar {
    align-items: center;
    display: flex;
}

    .root_initialsAvatar.webchat__initialsAvatar {
        background-color: #599df0;
        align-items: center;
        color: White;
        height: 35px;
        justify-content: center;
        overflow: hidden;
        width: 35px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
    }

    .root_initialsAvatar.webchat__initialsAvatar__initials {
        justify-content: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
    }

.plain, .markdown {
    padding: 8px;
}

    .plain p, .markdown p {
        margin: 5px 0;
        font-size: 14px;
    }

    .markdown ul li {
        margin-left: -10px;
    }

.suggested_action {
    padding: 3px;
}

    .suggested_action button {
        border-radius: 20px;
        border: 1px solid #599df0;
        cursor: pointer;
        color: #599df0;
        padding: 6px 10px;
        height: auto;
        background-color: white;
    }

        .suggested_action button:hover {
            background-color: #599df0;
            color: #ffffff;
        }

.chat_strong {
    font-weight: bold;
}

.chat_italic {
    font-style: italic;
}