/************************************************
Global Css Start Here
/*************************************************/
@import url("hdFonts.css");

html {
    font-size: 16px
}

body {
    font-family: var(--ds-font-400);
    font-size: var(--ds-font-16);
    line-height: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

.row {
    --bs-gutter-x: 2.4rem
}

.ds-hd-nav .btn:focus-visible {
    outline: 1px solid #fff;
    box-shadow: none
}

.ds-hd-nav .accordion-button:focus-visible {
    outline: 2px solid #015ecc;
    border-radius: 2px
}

.ds-hd-nav .accordion-button:focus {
    box-shadow: none
}
/************************************************
Header Css start
/*************************************************/
.ds-hd-nav {
    min-height: 56px;
    padding: 0;
    letter-spacing: 0.5px;
    font-family: 'hcltech_roobertregular', Arial;
    background: transparent linear-gradient(90deg, #5F1EBE 0%, #2874F0 67%, #0F5FDC 100%) 0% 0% no-repeat
}

    .ds-hd-nav > .container-fluid {
        padding: 0 10px 0 10px;
        justify-content: flex-start
    }

.ds-hd-logo {
    padding: 1px 10px 5px
}

.ds-hd-app, .ds-hd-app:hover {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #fff;
    margin-left: 6px;
    padding: 0 16px;
    text-decoration: none;
    border-left: 0.5px solid rgba(255, 255, 255, 0.6)
}

    .ds-hd-app:focus-visible, .ds-hd-logo:focus-visible {
        outline: 1px solid #fff;
        border-radius: 2px
    }

.ds-hd-nav .navbar-collapse {
    justify-content: flex-end
}

.ds-hd-right {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none
}

    .ds-hd-right > li > .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        font-size: 21px;
        margin: 4px 0;
        padding: 0;
        min-width: 48px;
        height: 48px;
        border-radius: 4px;
        position: relative
    }

        .ds-hd-right > li:hover > .btn, .ds-hd-right > li > .btn.show {
            background-color: rgba(255, 255, 255, 0.15)
        }

        .ds-hd-right > li > .btn.dropdown-toggle::after {
            content: none;
            border: 0;
            margin: 0
        }

    .ds-hd-right > li.ds-hd-empsec {
        margin-right: 0;
        margin-left: 8px;
        padding-left: 8px;
        position: relative
    }

        .ds-hd-right > li.ds-hd-empsec::before, .ds-hd-appiosandrd::after {
            content: '';
            border-left: 0.5px solid rgba(255, 255, 255, 0.6);
            position: absolute;
            top: 0;
            left: 0;
            height: 70%;
            bottom: 0;
            margin: auto
        }

        .ds-hd-right > li.ds-hd-empsec > .btn {
            display: flex;
            align-items: center;
            border-radius: 4px;
            padding: 0 10px
        }

.ds-hd-nav .ds-hd-empsec .dropdown-menu {
    right: -10px
}

.ds-hd-sap {
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 18px;
    text-align: right;
    font-family: 'hcltech_roobertmedium'
}

.ds-hd-emp {
    display: block;
    font-size: 12px;
    font-family: 'hcltech_roobertregular'
}

.ds-hd-name {
    width: 38px;
    letter-spacing: 0.5px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 14px;
    margin-left: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: 'hcltech_roobertmedium'
}

    .ds-hd-name img {
        width: 38px;
        height: 38px;
    }

.ds-hd-appiosandrd {
    position: relative
}

.ds-hd-right > li.ds-hd-appiosandrd > .btn {
    margin-right: 8px
}

.ds-hd-appiosandrd > .btn > img {
    vertical-align: sub
}

.ds-hd-appiosandrd::after {
    border-right: 0.5px solid rgba(255, 255, 255, 0.6);
    left: inherit;
    right: 0
}

.ds-hd-left {
    display: flex;
    align-items: center
}

.navbar-toggler {
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 0
}

    .navbar-toggler:focus {
        outline: 0;
        box-shadow: none
    }

    .navbar-toggler .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        margin-top: 4px
    }

@media (max-width:767px) {
    .ds-hd-right {
        justify-content: right
    }

    .ds-hd-left {
        height: 56px
    }

    .navbar-toggler {
        border-radius: 0;
        border: 0;
        box-shadow: 0
    }
}
/* User Dropdown */
.ds-hd-empd {
    width: 279px
}

.ds-hd-nav .dropdown-menu {
    max-height: calc(100vh - 100px);
    overflow: overlay;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border: 0;
    padding: 8px;
    border-radius: 0 0 8px 8px;
    margin: 0;
    right: 0;
    min-width: 200px
}

.ds-hd-fullempname {
    background-color: #F5F8FD;
    padding: 12px 10px;
    border-radius: 4px
}

    .ds-hd-fullempname > h5 {
        font-size: 16px;
        color: #000;
        font-family: 'hcltech_roobertmedium';
        margin: 0 0 8px
    }

    .ds-hd-fullempname > p {
        font-size: 14px;
        color: #1D2123;
        font-family: 'hcltech_roobertlight';
        margin: 0
    }

.ds-hd-emprole {
    border-left: 0.5px solid #A5AFBE;
    margin-left: 8px;
    padding-left: 8px
}

.ds-hd-changerole {
    font-size: 16px;
    color: #000;
    font-family: 'hcltech_roobertsemibold';
    padding: 16px 10px;
    border-bottom: 1px solid #A5AFBE;
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .ds-hd-changerole > i {
        font-size: 18px
    }

.ds-hd-role {
    padding: 0 10px 10px;
    margin: 10px 0 8px;
    list-style: none;
    border-bottom: 1px solid #A5AFBE
}

    .ds-hd-role > li > a {
        font-size: 14px;
        position: relative;
        color: #000;
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: 6px 0
    }

        .ds-hd-role > li > a:hover, .ds-hd-role > li.active a, .ds-hd-role > li > a:hover > i, .ds-hd-role > li.active a > i, .ds-hd-role > li > a:focus, .ds-hd-role > li > a:focus > i {
            color: #5F1EBE
        }

.ds-hd-logout {
    color: #000;
    letter-spacing: 0.5px;
    font-size: 16px;
    font-family: 'hcltech_roobertmedium';
    padding: 8px 10px;
    border: 0;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 4px;
    background: none;
    justify-content: space-between
}

    .ds-hd-logout > i {
        font-size: 20px
    }

    .ds-hd-logout:hover, .ds-hd-logout:focus {
        background-color: #F5F8FD;
        color: #5F1EBE
    }

        .ds-hd-logout:hover > i, .ds-hd-logout:focus > i {
            font-weight: 600
        }
/* Nav Menu */
.ds-hd-navmenu {
    width: 380px
}

    .ds-hd-navmenu.dropdown-menu {
        padding: 24px 24px 6px
    }

    .ds-hd-navmenu .ds-hd-role {
        padding: 0;
        margin: 0;
        border: 0
    }

    .ds-hd-navmenu .accordion-item {
        border: 0;
        border-bottom: 1px solid #A5AFBE
    }

        .ds-hd-navmenu .accordion-item:first-of-type .accordion-button {
            padding-top: 0
        }

        .ds-hd-navmenu .accordion-item:last-child {
            border-bottom: 0
        }

    .ds-hd-navmenu .accordion-button {
        font-size: 18px;
        letter-spacing: 0.5px;
        padding: 14px 0;
        color: #000;
        font-weight: inherit;
        font-family: 'hcltech_roobertregular'
    }

        .ds-hd-navmenu .accordion-button:not(.collapsed) {
            background: none;
            box-shadow: none;
            color: #000;
            font-family: 'hcltech_roobertsemibold'
        }

        .ds-hd-navmenu .accordion-button::after {
            content: "\e901";
            font-family: 'hdrFont';
            background: none;
            color: #6C7882;
            width: auto
        }

        .ds-hd-navmenu .accordion-button:not(.collapsed)::after {
            content: "\e900";
            background: none;
            transform: inherit;
            font-weight: 600
        }

    .ds-hd-navmenu .accordion-body {
        padding: 0
    }

    .ds-hd-navmenu .ds-hd-role > li > a {
        padding: 8px 0
    }

    .ds-hd-navmenu .ds-hd-role > li:first-child > a {
        padding-top: 0
    }

    .ds-hd-navmenu .ds-hd-role > li:last-child > a {
        padding-bottom: 10px
    }

    .ds-hd-navmenu .ds-hd-role > li a::after,
    .ds-hd-favorite .ds-hd-role > li a::after,
    .ds-hd-tophelp > li a::after {
        opacity: 0;
        content: "\e92b";
        font-family: 'hdrFont';
        color: #5F1EBE;
        font-size: 11px;
        margin-left: 4px;
        position: relative;
        top: 1px
    }

    .ds-hd-navmenu .ds-hd-role > li a:hover::after,
    .ds-hd-favorite .ds-hd-role > li a:hover::after,
    .ds-hd-tophelp > li a:hover::after {
        opacity: 1
    }
/* My Favorites */
.ds-hd-nav .ds-hd-favorite {
    width: 380px;
    padding: 24px 24px 2px
}

.ds-hd-heading {
    font-size: 18px;
    color: #000;
    margin-bottom: 8px;
    font-family: 'hcltech_roobertsemibold';
    display: flex;
    align-items: center;
    justify-content: space-between
}

.ds-hd-favrole {
    margin: 0;
    padding: 0;
    border: 0
}

    .ds-hd-favrole > li {
        border-bottom: 1px solid #A5AFBE
    }

        .ds-hd-favrole > li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 0
        }

        .ds-hd-favrole > li > a {
            padding: 16px 0
        }

            .ds-hd-favrole > li > a > i {
                font-size: 20px;
                color: #000;
                margin-right: 12px
            }

.ds-hd-favbtn {
    color: #000;
    font-size: 14px;
    background-color: #5F1EBE;
    color: #fff;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: 'hcltech_roobertmedium'
}

    .ds-hd-favbtn:hover, .ds-hd-favbtn:focus-visible {
        background-color: #0F5FDC;
        color: #fff
    }

    .ds-hd-favbtn > i {
        margin-right: 8px
    }

.ds-hd-addfav {
    text-align: center;
    margin: 16px 0 24px
}

    .ds-hd-addfav > p {
        font-size: 16px;
        color: #000;
        margin-bottom: 24px
    }

.ds-hd-favedit {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    width: 32px;
    height: 32px;
    transition: all 0.0s ease-in-out;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .ds-hd-favedit:hover, .ds-hd-favedit:focus {
        color: #401584;
        background: rgba(95, 30, 190, 0.10)
    }
/* Help */
.ds-hd-tophelp {
    margin: 0 -24px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    background: #F9FAFD
}

    .ds-hd-tophelp > li {
        padding: 0 24px
    }

        .ds-hd-tophelp > li:last-child a {
            border-bottom: 0
        }

        .ds-hd-tophelp > li > a {
            margin: 0;
            color: #000;
            border-bottom: 1px solid #D9E0EA;
            padding: 16px 0;
            text-decoration: none;
            display: flex;
            align-items: center;
            transition: all 0.0s ease-in-out
        }

            .ds-hd-tophelp > li:hover > a, .ds-hd-tophelp > li:hover > a > i, .ds-hd-tophelp > li > a:focus, .ds-hd-tophelp > li > a:focus > i {
                color: #5F1EBE
            }

                .ds-hd-tophelp > li > a:focus::after, .ds-hd-role > li > a:focus::after {
                    opacity: 1
                }

            .ds-hd-tophelp > li > a > i {
                color: #000;
                font-size: 20px;
                margin-right: 12px
            }

    .ds-hd-tophelp + .ds-hd-favrole {
        overflow: initial
    }

    .ds-hd-tophelp > li a::after {
        content: "\e92a";
        top: 0;
        margin-left: 8px
    }

.ds-hd-help .ds-hd-heading {
    margin-bottom: 24px
}
/* Notification */
.ds-hd-notification {
    position: relative
}

.ds-hd-nav .ds-hd-notify {
    width: 270px;
    padding: 24px 24px 12px
}

.ds-hd-nothead {
    font-size: 14px;
    color: #000;
    font-family: 'hcltech_roobertmedium';
    margin-bottom: 8px
}

.ds-hd-notify .ds-hd-role {
    border: 0;
    margin: 0 0 12px;
    padding: 0
}

    .ds-hd-notify .ds-hd-role > li {
        font-size: 14px;
        color: #000
    }

        .ds-hd-notify .ds-hd-role > li > a {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 4px 0
        }

    .ds-hd-notify .ds-hd-role:last-child {
        margin-bottom: 0
    }

.ds-hd-count {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 10px;
    right: 13px;
    background-color: #FF0000;
    border: 1px solid #2571ed;
    border-radius: 50%
}

.ds-hd-notify .ds-hd-heading {
    margin-bottom: 24px
}
/* Feedback Modal */
#feedbackModal {
    font-family: 'hcltech_roobertregular'
}

    #feedbackModal .modal-header {
        padding: 16px 24px;
        border: 0
    }

    #feedbackModal .modal-content {
        border-radius: 0.3rem
    }

    #feedbackModal .modal-title {
        color: #000000;
        font-size: 24px;
        font-family: 'hcltech_roobertbold';
    }
    /* #feedbackModal .modal-body{padding:0 24px 24px} */
    #feedbackModal .close {
        font-size: 1.1rem
    }

.assign-modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 24px);
    flex: 1;
}

.btn-close.position-absolute {
    right: 1.5rem;
    top: 1.5rem;
}
/* Rating */
.key-assets-detail-inner .rating-stars ul > li.star > i {
    color: #C8D2DD;
}

.rating-stars {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px
}

    .rating-stars ul {
        margin: 0;
        padding: 0
    }

        .rating-stars ul > li.star {
            display: inline-block
        }

            .rating-stars ul > li.star > i {
                font-size: 32px;
                color: #ccc;
                cursor: pointer
            }

            .rating-stars ul > li.star.hover > i {
                color: #FFCC36
            }

            .rating-stars ul > li.star.selected > i {
                color: #FF912C
            }

.message {
    font-size: 17px;
    padding-top: 3px;
    color: #777
}

textarea.feedRemark {
    resize: none;
    border-bottom: 1px solid #d9d9d9;
    background: transparent;
    font-size: 16px;
    border-radius: 0.25rem
}

#star-color {
    opacity: 0;
}

.message {
    background: #ccc;
    border-radius: 50px;
    padding: 0 1rem;
    display: flex;
    font-size: 14px;
    color: #222;
    font-family: 'hcltech_roobertmedium';
    align-items: center;
    justify-content: center;
}

    .message.belowA, .message.poor {
        background: #FFB5D6;
        color: #FF0000;
    }

    .message.average {
        background: #FFF0DD;
        color: #E89A34;
    }

    .message.good, .message.excellent {
        background: #E5FFDE;
        color: #2DBA0B;
    }
/************************************************
Footer Css start
/*************************************************/
.ds-ft-footer {
    letter-spacing: 0.5px;
    display: flex;
    justify-content: center;
    text-align: center;
    min-height: 34px;
    font-family: 'hcltech_roobertregular', Arial;
    background: transparent linear-gradient(90deg, #5F1EBE 0%, #2874F0 67%, #0F5FDC 100%) 0% 0% no-repeat;
    font-size: 12px;
    color: #fff;
    padding: 8px 20px;
    align-items: center;
}

    .ds-ft-footer > p {
        margin: 0;
    }
/************************************************
Footer Css End
/*************************************************/

/************************************************
Site Map
**************************************************/
.all-role {
    display: flex;
    justify-content: center
}

    .all-role .role {
        margin: 0 auto
    }

.role h2 {
    font-size: 24px;
    color: #0049B2;
    margin-bottom: 1.5rem;
    font-family: 'hcltech_roobertsemibold';
    position: relative
}

    .role h2::after {
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 4px;
        width: 50px;
        content: '';
        background-color: #0049B2
    }

.role-list {
    padding: 2rem;
    background: #fff;
    box-sizing: border-box;
    border: 0.25px solid #707070;
    border-radius: 8px;
    margin: 2rem;
    text-align: left
}

    .role-list ul {
        display: flex;
        padding: 0;
        justify-content: flex-start;
        flex-flow: row wrap;
        margin-bottom: 0
    }

    .role-list li {
        list-style: none;
        padding-left: 2.6rem;
        position: relative;
        line-height: 50px;
        width: 25%;
        background: url(../../assets/images/activeList.png) left center no-repeat;
        background-size: 18px
    }

        .role-list li a {
            font-size: 20px;
            color: #5F1EBE;
            font-family: 'hcltech_roobertmedium'
        }

.icon-close:before {
    display: none !important
}

.ds-btn-primary:focus-visible, .ds-btn-primary:hover {
    color: #fff;
    background-color: #5F1EBE !important;
    border-color: #5F1EBE !important
}
/************************************************
common page css
**************************************************/
.common-page {
    line-height: normal;
    background-color: #FAFCFF;
    text-align: center;
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center
}

    .common-page .content {
        padding: 15px
    }

    .common-page h3 {
        color: #000;
        text-align: center;
        font-family: "hcltech_roobertmedium";
        font-size: 32px;
        font-weight: 500;
        margin: 24px 0 12px;
    }

    .common-page h4 {
        color: #000;
        text-align: center;
        font-family: "hcltech_roobertmedium";
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 16px;
    }

        .common-page h4 a {
            color: #5F1EBE;
            font-family: 'hcltech_roobertsemibold'
        }

.back-to {
    color: #000;
    font-family: "hcltech_roobertsemibold";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

    .back-to a {
        color: #5F1EBE;
        font-family: "hcltech_roobertsemibold";
    }

.lineEffect {
    position: relative;
    text-decoration: none !important;
    padding-bottom: 2px;
}

    .lineEffect:after {
        background: none repeat scroll 0 0 transparent;
        bottom: 0px;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: #5F1EBE;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
    }

    .lineEffect:hover:after {
        width: 100%;
        left: 0;
    }

.downtime h4 {
    margin: 24px 0;
}

.downtime-sec {
    border-radius: 5px;
    border: 1px solid var(--Grey-Grey-200, #C8D2DD);
    background: #fff;
    padding: 24px 24px 8px;
    text-align: left;
    max-width: 880px;
    margin: 0 auto 16px;
}

    .downtime-sec .key {
        font-size: 14px;
        font-family: 'hcltech_roobertregular';
        color: #6C7882;
        line-height: normal;
        margin-bottom: 2px;
    }

    .downtime-sec .value {
        font-size: 14px;
        font-family: 'hcltech_roobertmedium';
        color: #000;
        margin-bottom: 16px;
        line-height: normal;
    }

main {
    background: var(--ds-neutral-100);
    min-height: calc(100vh - 34px);
    padding-top: 56px;
    display: inline-block;
    width: 100%
}

@media(max-width:767px) {
    .common-page h3 {
        font-size: 28px
    }
}
/************************************************
Mobile Navbar Css Start
/*************************************************/
.mobile-navbar {
    display: none;
}

.desktop-navbar {
    display: none;
}

.sidenavItem .ds-hd-role {
    padding: 0;
    margin: 0;
    border: 0;
}

.mobile-sidebar .ds-hd-role > li a::after {
    content: none !important;
}

.offcanvas {
    max-width: 279px !important;
}

.mobile-sidebar .accordion-button::after {
    transform: none !important;
}

.mobile-sidebar .accordion {
    padding: 16px 8px 0 8px;
}

.mobile-sidebar .accordion-button {
    font-family: 'hcltech_roobertsemibold';
    font-size: 14px;
    color: #000;
    padding: 8px 0;
}

.mobile-sidebar .accordion-item {
    border: 0px !important;
}

.mobile-sidebar .ds-hd-role > li > a {
    font-size: 12px;
    padding: 6px 0px !important;
}

.brand-warp-mob {
    padding: 0px 10px 5px;
}

    .brand-warp-mob a {
        padding: 0px 6px 8px;
        text-decoration: none;
        color: #5F1EBE;
        display: block;
        font-family: 'hcltech_roobertsemibold';
        border-bottom: solid 1px #A5AFBE;
    }

.offcanvas-header {
    padding: 8px;
}

.collapse.navbar-collapse {
    display: flex;
    flex-basis: auto;
}

.offcanvas-body {
    height: calc(100vh - 265px);
    overflow: auto;
    padding: 0 8px;
    margin-bottom: 0px;
    width: 279px;
}

.navfooter {
    padding: 5px 10px 0px 10px
}

    .navfooter .sidenavItem {
        padding-bottom: 4px;
        padding-top: 4px;
        border-top: solid 1px #A5AFBE;
    }

.offcanvas-backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: unset;
    min-height: calc(100vh - 90px) !important;
    background-color: #000;
}

.offcanvas.offcanvas-end {
    top: 57px;
    bottom: 34px;
    right: 0;
    border-radius: 0px;
    border-left: none;
}

.mobile-navbar {
    min-height: 56px;
    padding: 0;
    letter-spacing: 0.5px;
    font-family: 'hcltech_roobertregular', Arial;
    background: transparent linear-gradient(90deg, #5F1EBE 0%, #2874F0 67%, #0F5FDC 100%) 0% 0% no-repeat;
    min-width: auto !important;
}

@media (max-width: 1110px) {
    .role-list li {
        width: 33%;
    }
}

@media (max-width: 992px) {
    .ds-ft-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 15px;
    }

    .ds-hd-logo {
        padding: 1px 6px 5px;
    }

    .ds-hd-nav .dropdown-menu {
        right: -57px;
    }

    .ds-hd-navmenu {
        width: unset;
    }

        .ds-hd-navmenu .accordion-body {
            padding: 0;
            padding-bottom: 2px;
        }

    .role-list li {
        width: 50%;
    }
}

@media (max-width: 991px) {
    .mobile-navbar {
        display: block;
    }
}

@media (max-width: 768px) {
    .ds-hd-left {
        width: calc(100vw - 120px);
        text-overflow: ellipsis;
    }
}

@media (max-width: 576px) {
    .ds-hd-app {
        font-size: 18px;
    }

    .ds-hd-logo img {
        max-width: 70px;
    }

    .ds-ft-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 15px;
    }

    .ds-hd-logo {
        padding: 1px 6px 5px;
    }

    .ds-hd-nav .dropdown-menu {
        right: -57px;
    }

    .ds-hd-navmenu {
        width: unset;
    }

    .role-list li {
        width: 100%;
    }

    .mobile-navbar .ds-hd-logo {
        display: none;
    }

    .mobile-navbar .ds-hd-app {
        border: 0px;
        margin-left: 0px;
        padding: 0 6px;
    }

    .ds-ft-footer {
        display: flex;
        justify-content: center;
    }

    .ds-ft-webspecify {
        display: none;
    }

    .offcanvas.offcanvas-end {
        bottom: 0;
    }

    .offcanvas-backdrop {
        min-height: calc(100vh - 58px) !important;
    }
}

@media (min-width: 992px) {
    .offcanvas {
        display: none;
    }

    .offcanvas-backdrop {
        display: none;
    }

    .desktop-navbar {
        display: flex;
    }
}

/************************************************
Mobile Navbar Css End
/*************************************************/
/************************************************
Global Css Ends Here
/*************************************************/

/************************************************
Application Css will be start here
/*************************************************/
.chat-block {
    background: #fff;
    box-shadow: 0px 3px 6px #00000038;
    padding: 15px;
    border-radius: 0.25rem;
    height: calc(100vh - (90px + 40px));
    position: relative;
    margin-top: 20px;
}

section.webchat__basic-transcript__transcript {
    height: calc(100vh - 210px);
    overflow-y: auto;
    padding: 0px 0px 10px 0px;
}

.webchat__send-box__main {
    background: var(--ds-neutral-200);
    border-radius: 5px;
}

.webchat__send-box .webchat__send-box__main {
    background: var(--ds-neutral-200) !important;
    border-radius: 5px !important;
    height: 50px;
    display: flex !important;
    align-items: center !important;
}

form.webchat__send-box-text-box input {
    width: 100%;
    background: transparent;
    border-color: transparent;
    padding: 5px;
}

.webchat__send-box__main button {
    background: var(--ds-neutral-400) !important;
    border-radius: 50%;
    height: 36px;
    width: 36px !important;
    /* rotate: -35deg; */
    align-self: center !important;
    margin: 5px;
}

    .webchat__send-box__main button svg {
        fill: #fff;
        /* width: 30px; */
        top: 9px;
        left: 6px;
    }

.ac-actionSet button {
    background: var(--ds-purple-000) !important;
    border: 1px solid var(--ds-purple-600) !important;
    border-radius: 3px;
    color: var(--ds-purple-600) !important;
    font-weight: 600;
    padding: 5px 20px;
    font-size: 14px;
    letter-spacing: 0.05rem;
}

    .ac-actionSet button:is(:hover, :focus) {
        background: var(--ds-purple-600) !important;
        color: var(--ds-neutral-000) !important;
    }

.webchat__icon-button:not(:disabled):not([aria-disabled="true"]):not(:active):hover .webchat__icon-button__shade {
    background: transparent !important;
}

.webchat__send-box__main button:is(:hover, :focus) {
    background: var(--ds-blue-800) !important;
}

.webchat__send-box__main .webchat__upload-button button svg {
    fill: #000 !important;
    background: transparent !important;
}

.webchat__send-box__main .webchat__upload-button button {
    rotate: 0deg !important;
    background: transparent !important;
    display: none
}

.webchat__suggested-actions--carousel-layout .webchat__suggested-actions__carousel {
    background: #fff;
}

.webchat__suggested-actions__carousel .webchat__suggested-action {
    color: #000 !important;
    border: 1px solid var(--ds-yellow-400) !important;
    border-radius: 5px !important;
    padding: 5px 15px !important;
    height: 30px !important;
}

.webchat__suggested-actions__carousel ul li:nth-child(2n) .webchat__suggested-action {
    border: 1px solid var(--ds-bronze-500) !important;
}

.webchat__suggested-actions__carousel ul li:nth-child(3n) .webchat__suggested-action {
    border: 1px solid var(--ds-blue-400) !important;
}

.webchat__suggested-actions__carousel ul li:nth-child(4n) .webchat__suggested-action {
    border: 1px solid var(--ds-teal-400) !important;
}

.webchat__suggested-actions__carousel ul li:nth-child(5n) .webchat__suggested-action {
    border: 1px solid var(--ds-green-400) !important;
}

.webchat__render-markdown * {
    font-family: 'hcltech_roobertregular';
}

webchat__stacked-layout__status *, .webchat__activity-status {
    font-family: 'hcltech_roobertregular' !important;
    color: var(--ds-grey-700) !important;
    font-size: 12px
}

.webchat__render-markdown p, .webchat__render-markdown li {
    font-size: 14px;
    line-height: 1.3rem;
}

.webchat__render-markdown h6 {
    font-weight: 600;
    line-height: 1.3rem;
}

.webchat__render-markdown h5 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3rem;
}

.webchat__render-markdown h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3rem;
}

.webchat__render-markdown h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3rem;
}

.webchat__render-markdown h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4rem;
}

.ac-textBlock {
    color: #000 !important
}

.webchat__render-markdown h1 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.5rem;
}

.webchat__bubble.webchat__stacked-layout__attachment, .webchat__stacked-layout__message {
    max-width: 720px !important;
}

.webchat__bubble .webchat__bubble__content {
    border-color: transparent !important;
}

.webchat__defaultAvatar {
    background: transparent !important;
    position: relative;
    overflow: visible !important;
}

    .webchat__defaultAvatar:after {
        content: "AskAI";
        position: absolute;
        left: 100%;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.05rem;
        line-height: 1.4rem;
        top: 10px;
    }

    .webchat__defaultAvatar img {
        max-width: 26px;
    }

.webchat__initialsAvatar:not(.webchat__initialsAvatar--fromUser) {
    display: none;
}

.webchat__stacked-layout.webchat__stacked-layout--show-avatar.webchat__stacked-layout--top-callout .webchat__stacked-layout__avatar-gutter {
    position: absolute;
}

.webchat__stacked-layout.webchat__stacked-layout--show-avatar.webchat__stacked-layout--top-callout .webchat__stacked-layout__content {
    padding-top: 40px;
}

.webchat__stacked-layout--show-avatar .webchat__text-content.webchat__text-content--is-markdown {
    padding: 0px !important
}

.webchat__stacked-layout__status .webchat__stacked-layout__avatar-gutter {
    display: none;
}

.webchat__adaptive-card-renderer .ac-container.ac-adaptiveCard {
    padding: 0px !important;
}

.webchat__bubble--from-user .webchat__bubble__content {
    border-radius: 20px 20px 5px 20px !important;
    padding: 5px 15px;
}

/*.webchat__basic-transcript__activity-body {
    height: 0px;
    visibility:hidden}*/
.webchat__stacked-layout.webchat__stacked-layout--hide-avatar.webchat__stacked-layout--top-callout {
    display: none;
}

.ac-actionSet {
    flex-direction: unset !important;
    gap: 10px
}

.webchat__send-box__main .webchat__upload-button {
    display: none !important;
}

.webchat__stacked-layout.webchat__stacked-layout--show-avatar .webchat__render-markdown {
    user-select: none;
}