:root {
    --background-color: #ffffff;
    --content-background-color: #F4F4F4;
    --container-background-color: #F4F4F4;
    --c2a-background-color: #F4F4F4;
    --TIA-border-top: #97999B;
    /*******Landing Submenu list********/
    --background-nav-item: #fff;
    --nav-tablinks: #97999B;
    --nav-tablinks-active: #43B02A;
    --nav-subtablinks-active: #fff;
    --nav-subtablinks-bg-active: #43B02A;
    --nav-subtablinks-hover-txt: #43B02A;
    --sub-tablinks-border: #a7ccbe;
    --response-title: #000000;
    --response-content: #53565A;
    --response-background-color: #F5F5F5;
    --response-chat-user-bg: #DDEFE8;
    --response-chat-user-txt: #000000;
    /* Button css */
    --button-background: #43B02A;
    --button-text: #ffffff;
    --input-search-border: #DDDDDD;
    --button-success-background: #43B02A;
    --button-success-border: #43B02A;
    --button-success-text: #ffffff;
    --button-danger-background: #DA291C;
    --button-danger-border: #DA291C;
    --button-danger-text: #ffffff;
    --button-primary-background: #00a3e0;
    --button-primary-border: #00a3e0;
    --button-primary-text: #ffffff;
    /* Font */
    --heading-text: #000000;
    --content-text: #97999B;
    --subheading-text: #53565A;
    --disabled-text: #97999B;
    /*****QR Scanner*****/
    --scanner-color: #292929;
    --QR-heading-title: #53565A;
    /********label-form-heading*********/
    --form-label-head: rgba(84, 93, 105, 1);
    --employee-title: rgba(84, 93, 105, 1);
    /********** table*************/
    --table-row-even: #ffffff;
}

[data-theme="dark"] {
    --background-color: #282828;
    --content-background-color: #282828;
    --container-background-color: #000000;
    --c2a-background-color: #53565A;
    --TIA-border-top: #ffffff;
    /*******Landing Submenu list********/
    --background-nav-item: #282828;
    --nav-tablinks: #97999B;
    --nav-tablinks-active: #43B02A;
    --nav-subtablinks-active: #fff;
    --nav-subtablinks-bg-active: #43B02A;
    --nav-subtablinks-hover-txt: #43B02A;
    --sub-tablinks-border: #ffffff;
    --response-title: #ffffff;
    --response-content: #ffffff;
    --response-background-color: rgba(0, 79, 89, 1);
    --response-chat-user-bg: rgba(245, 245, 245, 0.3);
    --response-chat-user-txt: #ffffff;
    /* Button css */
    --button-background: transparent;
    --button-text: #43B02A;
    --input-search-border: #53565A;
    --button-success-background: transparent;
    --button-success-border: #43B02A;
    --button-success-text: #43B02A;
    --button-danger-background: transparent;
    --button-danger-text: #DA291C;
    --button-danger-border: #DA291C;
    --button-primary-background: transparent;
    --button-primary-border: #00a3e0;
    --button-primary-text: #00a3e0;
    /* Font */
    --heading-text: #FFFFFF;
    --content-text: #97999B;
    --subheading-text: #BBBCBC;
    --disabled-text: #97999B;
    /*****QR Scanner*****/
    --scanner-color: #43B02A;
    --QR-heading-title: #BBBCBC;
    /********label-form-heading*********/
    --form-label-head: #ffffff;
    --employee-title: rgba(84, 93, 105, 1);
    /********** table*************/
    --table-row-even: rgba(0, 0, 0, 0.1);
}

[data-font="small"] {
    /********************Large Font Theme**********************/
    --font-content-sm: 10px;
    --font-content: 12px;
    --font-thirteen-vr: 11px;
    --font-heading: 22px;
    --font-title: 14px;
    --font-head: 20px;
    --font-qr-heading: 22px;
}

[data-font="medium"] {
    /********************Medium Font Theme**********************/
    --font-content-sm: 12px;
    --font-thirteen-vr: 13px;
    --font-content: 14px;
    --font-heading: 24px;
    --font-title: 16px;
    --font-head: 22px;
    --font-qr-heading: 24px;
}

[data-font="large"] {
    /********************Large Font Theme**********************/
    --font-content-sm: 14px;
    --font-thirteen-vr: 15px;
    --font-content: 16px;
    --font-heading: 28px;
    --font-title: 18px;
    --font-head: 24px;
    --font-qr-heading: 26px;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../CSS/font/OpenSans-Regular-webfont.woff2') format('woff2'), url('../CSS/font/OpenSans-Regular-webfont.woff') format('woff'), url('../CSS/font/OpenSans-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../CSS/font/OpenSans-Bold.woff2') format('woff2'), url('../CSS/font/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../CSS/font/OpenSans-Semibold-webfont.woff2') format('woff2'),url('../CSS/font/OpenSans-Semibold-webfont.woff') format('woff'), url('../CSS/font/OpenSans-Semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    font-display: swap;
    src: url('../CSS/font/OpenSans-300-webfont.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

p, a, span, h1, h2, h3, div {
    font-family: "Open Sans", sans-serif;
}

body {
    font-family: 'Open Sans' !important;
    background-color: var(--container-background-color);
    color: var(--subheading-text);
    transition: background-color 0.3s, color 0.3s;
    font-size: var(--font-content);
}

.font-22 {
    font-size: var(--font-head) !important;
}

.TIA-container {
    background: var(--container-background-color);
}

hr.TIA-border-top {
    border-top: 1px solid var(--TIA-border-top);
}

#startConversationBox, #refeshConversationBox, #exitConfirmationBox {
    z-index: 2000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 750px;
    text-align: center;
    padding: 180px 0px 0px;
    opacity: 0.9;
    margin: -5% 0 0 -1%;
}

/******** Header ***********/
.TIA-body {
    width: 100%;
    height: 538px;
    position: relative;
}

.TIA-header {
    background: var(--background-color);
    padding: 8px 16px;
}

.logo img {
    width: 38px;
}

.tia_notification a {
    background: #43B02A;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: block;
    text-align: center;
}

.tia_notification i::before {
    color: #fff;
    font-size: var(--font-title);
    line-height: 2.3rem;
}

.notification-count {
    position: absolute;
    background: #E42313;
    color: #fff;
    border-radius: 50% !important;
    font-size: 12px !important;
}

.TIA-modal-inner-scroll {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.profile-account {
    color: #fff;
    display: block;
    background: linear-gradient(to bottom, #BEC0C3, #63666A );
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
}

    .profile-account .profile-span {
        color: #fff;
        font-weight: 500;
        font-size: var(--font-title);
        line-height: 2.3rem;
    }

.close-slide-toggle i, .card-title {
    color: var(--subheading-text);
    font-size: var(--font-title);
}


.user-profile-img {
    width: 45px;
    height: 45px;
    border-radius: 50px;
}

.profile-name {
    color: var(--response-title);
    font-size: var(--font-title);
    font-weight: 700;
}

.user-title {
    background: rgba(227, 228, 141, .50);
    color: var(--response-title);
    padding: 2px 6px;
    border-radius: 4px;
}

.sub-card-title {
    color: var(--subheading-text);
    font-weight: 600;
}

.user-position {
    color: var(--response-title);
    font-weight: 400;
}

.card-label {
    color: var(--subheading-text);
    font-weight: 400;
}

.TIA-card {
    box-shadow: -1px 1px 3px #afafaf;
    border: 0;
}

.theme-c2a {
    padding: 15px 20px;
    border: 2px solid #fff;
    text-align: center;
    background: var(--container-background-color);
    border-radius: 8px;
    width: 100px;
}

    .theme-c2a.font-class {
        width: 120px;
    }

    .theme-c2a:hover, .theme-c2a.active {
        border: 2px solid #43B02A;
        font-weight: 600;
        cursor: pointer;
    }

        .theme-c2a:hover .theme-block-icon i, .theme-c2a.active .theme-block-icon i {
            color: #43B02A;
        }

        .theme-c2a:hover .theme-block-txt, .theme-c2a.active .theme-block-txt {
            color: #43B02A;
        }

.theme-block-icon i {
    color: #63666A;
    font-size: 1.5rem;
}

.response-section .carousel.slide {
    padding: 0 20px !important;
}

.response-section .carousel-control-next {
    right: 10px;
}

.response-section .carousel-control-next-icon, .response-section .carousel-control-prev-icon, .response-section .carousel-control-prev, .response-section .carousel-control-next {
    background-image: none !important;
    width: 0% !important;
}

#innerMenuDiv .carousel-control-next-icon, #innerMenuDiv .carousel-control-prev-icon, #innerMenuDiv .carousel-control-prev, #innerMenuDiv .carousel-control-next {
    background-image: none !important;
    width: 10%;
}

    .response-section .carousel-control-prev-icon i:before, .response-section .carousel-control-next-icon i:before, #innerMenuDiv .carousel-control-prev-icon i:before, #innerMenuDiv .carousel-control-next-icon i:before {
        color: var(--form-label-head);
    }

.quick-links-item {
    color: var(--subheading-text);
    font-size: 14px;
    font-weight: 600;
}

    .quick-links-item:hover {
        color: #43B02A;
    }

/********** Writing Assistance**************/
.header-span-border {
    width: 85px;
    display: block;
    height: 5px;
    background-color: #43B02A;
}

.file-attachment, .file-attachment .file-img i {
    color: #43B02A;
}

.file-attachment {
    background: rgb(67 176 42 / 10%);
    border: 1px solid #43B02A;
    border-radius: 25px;
    padding: 5px 15px;
    width: auto;
    display: inline-block;
}
/********* Menu Header*************/
.hamburger-menu i {
    color: var(--scanner-color);
}

.hamburger-menu .navbar-toggler-icon {
    width: auto;
}

.hamburger-menu i:before {
    margin: 0;
}

.hamburger-menu {
    background: none;
    border: 0;
    font-size: 2.5rem;
    padding: 0;
}

.TIAmenuSlider {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--background-color);
    height: 100vh;
    width: 100%;
    z-index: 9999;
    overflow: scroll;
}

.TIA-navbar-ul li {
    list-style: none;
    padding: 4px 0;
}

.profile-pic-user-icon i.profile-img:before {
    font-size: 45px;
    margin-left: 0;
    color: #9dc951;
    border: 0.2vw solid;
    border-radius: 50%;
    margin-right: 0;
    width: auto;
}

.close-hamburger {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--heading-text);
}

.TIA-navbar-ul li a.main-item-mobi {
    font-weight: 600;
}

.TIA-navbar-ul li a {
    font-size: var(--font-content);
    font-weight: 400;
    color: var(--subheading-text);
}

.overlay.active {
    display: block;
    opacity: 1;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
/******** Submenu Header*********/
.nav-head-item {
    display: block;
    float: left;
    font-size: var(--font-content);
    border-radius: 5px;
    position: static !important;
    color: var(--subheading-text);
}

    .nav-head-item .nav-link {
        padding: 10px 12px;
        color: var(--subheading-text);
    }

        .nav-head-item .nav-link:hover {
            color: #ffffff;
        }

        .nav-head-item .nav-link.dropdown-toggle::after {
            display: none;
        }

    .nav-head-item:hover {
        background: #43B02A;
        color: #fff !important;
        cursor: pointer;
    }

.submenu-list-items li {
    list-style: none;
    width: 50%;
    padding: 10px 10px;
    border-bottom: 1px solid #f3f0f0;
    display: block;
    float: left;
}

    .submenu-list-items li:last-child {
        border-bottom: 0;
    }

.submenu-list-items a {
    color: var(--response-title);
    font-size: var(--font-content);
    text-decoration: none;
    width: 100%;
    display: block;
}

    .submenu-list-items a:hover {
        color: #43B02A;
    }

.dropdown .dropdown-menu {
    display: none;
}

.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
    background: var(--background-color);
    top: 94%;
    display: block;
    margin-top: 0.125em;
    margin-left: 0.125em;
    border: 0;
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 4px 6px rgb(218 218 218 / 60%);
}

#welcomeMsg {
    /*height:370px;
    overflow:hidden;*/
}
/*********** Submenu Landing Page *************/
.TIA-nav-tabs {
    background: var(--background-color);
}

.TIA-nav-links {
    background-color: var(--background-nav-item) !important;
    color: var(--nav-tablinks);
    font-size: var(--font-content-sm);
    font-weight: 400;
    padding: 10px 9px;
    border-radius: 0 !important;
    border: 0 !important;
    margin-bottom: 0 !important;
}

    .TIA-nav-links.active, .TIA-nav-links:hover {
        color: var(--nav-tablinks-active) !important;
        font-weight: 600;
        border-bottom: 4px solid #43B02A !important;
        outline: transparent !important;
        margin: 0 0 -1px 0;
    }

.sublink-capsule-item {
    font-weight: 600;
    color: var(--heading-text);
    border: 1px solid var(--sub-tablinks-border);
    border-radius: 25px;
    padding: 5px 10px;
    display: inline-block;
    margin: 0 10px 10px 0;
}

    .sublink-capsule-item.active {
        color: var(--nav-subtablinks-active);
        background: var(--nav-subtablinks-bg-active);
    }

    .sublink-capsule-item:hover {
        color: var(--nav-subtablinks-hover-txt);
        border: 1px solid var(--nav-subtablinks-hover-txt);
        background: rgba(67, 176, 42, 0.1);
    }

    /*.sublink-capsule-item.onboarding-capsule-item, .sublink-capsule-item.onboarding-capsule-item:hover {
        color: #fff !important;
    }*/

    .sublink-capsule-item.onboarding-capsule-item:hover {
        color: #fff !important;
    }

        .sublink-capsule-item.onboarding-capsule-item::before, .sublink-capsule-item.onboarding-capsule-item.active::before, .sublink-capsule-item.onboarding-capsule-item:hover::before {
            content: url(../IMAGES/TIATheme/submenu-hover-icon.png);
            background-color: #86bc45;
            color: #fff !important;
        }
/*** Notification modal***/
.modal-content {
    background: var(--background-color);
    color: var(--heading-text);
}

.notification-title {
    font-size: var(--font-title);
    font-weight: 600;
    color: var(--heading-text);
}

.notification-title-light {
    font-size: var(--font-title);
    font-weight: 600;
    color: var(--heading-text);
}

.notification-content {
    color: var(--subheading-text);
    font-size: var(--font-title);
}

.TIA-close-btn.close {
    opacity: 1;
    color: var(--heading-text);
}

    .TIA-close-btn.close span {
        opacity: 1;
        color: var(--heading-text);
    }
/***End of Notification modal***/
/******** Profile user*************/
.profile-user-wrapper {
    float: right;
    background: var(--content-background-color);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}

.profile-user-inner {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/*.employee-information-card {
    overflow-y: auto;
    height: 100vh;
}*/

.profile-user-wrapper .card {
    background: var(--background-color);
}
/*** Main Content - Landing page***/
.main-content-body {
    background: var(--background-color);
    margin: 10px 0;
    border-radius: 5px;
    /*height: 546px;*/
}

.gradient-title {
    font-size: var(--font-head);
    background: -webkit-linear-gradient(#43B02A, #00ABAB);
    -webkit-background-clip: text;
    font-weight: 700;
    -webkit-text-fill-color: transparent;
}

.sub-content {
    color: var(--content-text);
}

.sub-title {
    font-size: var(--content-text);
    font-weight: 600;
    color: var(--subheading-text);
}

.actionable-block {
    width: 92%;
    margin: 0 auto;
    /* max-height: 300px;
    height: 275px;*/
}

.c2a-outer {
    background: var(--c2a-background-color);
    border-radius: 10px;
    min-height: 156px;
    padding: 15px;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.c2a-img-blck {
    height: 24px;
}

.hover-front {
    display: none;
}

.c2a-outer:hover .active-front {
    display: none !important;
}

.c2a-outer:hover .hover-front {
    display: block;
}

.c2a-outer:hover {
    background: linear-gradient(to bottom left, #43B02A, #00ABAB);
    text-decoration: none;
    transition: 0.8s;
    transform: scale(1.1);
}

    .c2a-outer:hover .c2a-hidden-content, .c2a-outer:hover .sub-title {
        color: #fff !important;
    }

    .c2a-outer:hover .c2a-hidden-content {
        display: block;
    }

.c2a-hidden-content {
    display: none;
}

.genAI-badge {
    background: linear-gradient(to bottom left, #43B02A, #00ABAB);
    border-radius: 4px;
    color: #fff;
    padding: 2px 6px;
    font-size: 12px;
}

.c2a-outer:hover .genAI-badge {
    background: #fff;
    color: #000;
    padding: 2px 6px;
}
    .c2a-outer:hover .genAI-badge .dark-mode-img {
        display: inline-block;
    }

    .c2a-outer:hover .genAI-badge .light-mode-img, .dark-mode-img {
        display: none;
    }

.w-80 {
    width: 80%;
}

#innerMenuDiv.carousel-container {
    margin-bottom: 30px;
}

#innerMenuDiv .carousel-indicators li {
    border-bottom: 0 !important;
    border-top: 6px solid #86BC25;
    height: 0 !important;
    border-radius: 10px;
}

    #innerMenuDiv .carousel-indicators li.active {
        width: 30px !important;
    }

#innerMenuDiv .carousel-indicators li {
    width: 5px !important;
}
/*********** Response List************/
.response-section {
    /*width: 90%;*/
    margin-left: 15px;
    background: var(--response-background-color);
    word-wrap: break-word;
}

.questions-list li {
    list-style: none;
    border-bottom: 1px solid #E3E3E3;
    padding: 4px 0;
}

    .questions-list li:last-child {
        border-bottom: none;
    }

.response-content {
    color: var(--response-content);
    word-wrap: break-word;
    word-break: break-word;
}

a.response-content:hover {
    color: #86BC25;
}

.response-title {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--response-title);
}

#chatbot-body-section .msj {
    display: block;
    color: var(--response-chat-user-txt) !important;
    background: var(--response-chat-user-bg) !important;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0px;
    margin-bottom: 0px;
}

#chatbot-body-section .text > p:first-of-type {
    line-height: 22px;
    word-wrap: break-word;
}

#chatbot-body-section .text > p:last-of-type {
    color: var(--response-chat-user-txt) !important;
    font-size: var(--font-content);
    width: 100%;
    margin-top: auto;
    font-weight: 400;
}


/****** Leave Balance*******/
.imp-txt {
    font-weight: 700;
    color: var(--response-content);
}

.toggle-icon, .toggle-icon i {
    color: #43B02A;
}

.response-sub-content, .spoc-card-body {
    font-size: var(--font-content);
    color: var(--response-content);
}

.tia-table-structure {
    font-size: var(--font-content);
}

.note-head {
    border: 1px solid #43B02A;
    border-radius: 25px;
    padding: 5px 10px;
    font-size: 13px;
    color: var(--response-content);
}

.download-c2a-btn {
    font-size: var(--font-content);
    font-weight: 600;
    background: var(--button-success-background);
    color: var(--button-success-text);
    border: 1px solid var(--button-success-border);
    border-radius: 25px;
    padding: 5px 10px;
    display: inline-block;
    margin: 8px 0;
}

.text-success-cust {
    font-size: var(--font-content);
    color: #43B02A;
    font-weight: 600;
}

.font-13 {
    font-size: var(--font-thirteen-vr) !important;
}

.tia-table-structure td {
    color: var(--response-content);
    vertical-align: middle;
}

.tia-table-structure td, .tia-table-structure th {
    border: 0;
    padding: 8px;
}

.tia-table-structure tr:nth-child(odd), .tia-table-structure tr:nth-child(odd):hover {
    background-color: transparent;
}

.tia-table-structure tr:nth-child(even), .tia-table-structure tr:nth-child(even):hover {
    background-color: var(--table-row-even);
}

.tia-table-structure tr:hover {
    color: #43B02A
}

.tia-table-structure th {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    background-color: #43B02A;
    color: white;
    width: 240px;
    border-bottom: 0 !important;
}

.imp-asteric {
    color: #e23732;
}

.employee-label-head {
    color: var(--employee-title);
    font-size: 14px;
    font-weight: 600;
}

.form-label-head {
    font-size: 14px;
    font-weight: 600;
    color: var(--form-label-head);
}

.tia-custom-control-input {
    font-size: 14px;
}

.error-txt-custom {
    font-size: 14px;
    color: #e23732;
}

.learningCardHeader {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
    border: 1px solid #ccc;
    color: var(--heading-text)
}

.learningId {
    color: var(--response-title);
    font-size: 12px;
}

/*Reportee card*/
.reporteeCard {
    overflow: hidden !important;
    height: auto !important;
    display: block !important;
    padding: 10px;
    background-color: transparent;
    border-radius: 0;
    border: 1px solid #ccc;
}

.roundImg {
    border-radius: 50%;
    height: 50px !important;
    margin-bottom: 4px;
    display: inline-block !important;
}

.teamProfile {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 12px !important;
    display: block !important;
    cursor: pointer;
}

.teamScroll {
    height: 206px !important;
    overflow-y: scroll !important;
    max-width: 600px;
}
/* HelpD Ticket Status:  */
.ticket-container {
    border: 1px solid #ccc;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.genai-text:hover {
    color: darkblue;
}

/* TIA Feedback Rating */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;
    gap: 15px;
    margin-left: 0;
}

    .star-rating input {
        display: none;
    }

    .star-rating label {
        font-size: 2em;
        color: gray;
        cursor: pointer;
        display: flex;
    }

label .checked-star {
    display: none;
}

.star-rating input:checked ~ label .checked-star {
    color: #86bc25;
    display: block;
}

.star-rating input:checked ~ label .unchecked-star {
    display: none;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #86bc25;
}

.submitFeedbackButton {
    background-color: #86bc25;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .submitFeedbackButton:hover {
        background-color: #3c8d2f;
    }


/********** Holiday List**********/
.card-title-success {
    font-size: var(--font-content);
    color: #43B02A;
    font-weight: 700;
}


.HolidayCard {
    padding: 5px 26px;
    font-weight: 600;
    font-size: var(--font-content);
    border: 1px solid #43B02A;
    border-radius: 25px;
    background-color: #fff;
    text-align: center;
    margin: 0 8px 10px 0;
    color: #43B02A;
    display: inline-block;
}

    .HolidayCard:hover {
        border: 1px solid #43B02A;
        background-color: #43B02A;
        color: white;
        cursor: pointer;
    }

.holidayActive {
    border: 1px solid #43B02A;
    background-color: #43B02A;
    color: white;
    cursor: pointer;
}

.chat-option img {
    border-radius: 50%;
    padding: 5px;
}

    .chat-option img:hover {
        background: #dcffd3;
    }

#searchopenai div:hover span {
    color: #43B02A;
}

#searchopenai img:hover {
    background: none;
}

.chat-option {
    display: inline-block;
    color: #00A3E0;
    border-radius: 15px;
    padding: 2px 2px;
    cursor: pointer;
}

    .chat-option:hover {
        display: inline-block;
        border-radius: 15px;
        cursor: pointer;
    }

.sublink-capsule-item.chat-option-item {
    cursor: pointer;
    padding: 5px 18px;
}

.msj-rta.macro.option-chat-list {
    margin: 0 !important;
}

.btn-custom-primary {
    background: var(--button-primary-background);
    color: var(--button-primary-text);
    border: 1px solid var(--button-primary-border);
    border-radius: 0;
    font-size: var(--font-content);
    font-weight: 600;
    /*padding: 0.3em 1.5em;*/
}

    .btn-custom-primary:hover {
        color: var(--button-primary-text);
    }

.btn-custom-success {
    background: var(--button-success-background);
    color: var(--button-success-text);
    border: 1px solid var(--button-success-border);
    border-radius: 0;
    font-size: var(--font-content);
    font-weight: 600;
    /*padding: 0.3em 1.5em;*/
}

    .btn-custom-success:hover {
        color: var(--button-success-text);
    }

.btn-custom-danger {
    background: var(--button-danger-background);
    color: var(--button-danger-text);
    border: 1px solid var(--button-danger-border);
    border-radius: 0;
    font-size: var(--font-content);
    font-weight: 600;
    /*padding: 0.3em 1.5em;*/
}

    .btn-custom-danger:hover {
        color: var(--button-danger-text);
    }

.font-weight-bolder-lighter {
    font-weight: 600;
}

.scrolltop-index {
    position: absolute;
    right: 40px;
    bottom: 100px;
}

.scrollTo-custom {
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #43B02A;
    /* padding: 10px 14px; */
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    color: #43B02A;
    font-size: 24px;
    background: #fff;
}

    .scrollTo-custom:hover {
        color: #ffffff;
        font-size: 24px;
        background: #43B02A;
    }
/************Set Reminder*************/
.reminder-block-set {
    padding: 15px;
    border-left: 4px solid #43B02A !important;
    border: 1px solid #d8d5d5;
}

.relative-block {
    position: relative;
}

.icon-absolute-block {
    position: absolute;
    right: 8px;
    bottom: 10px;
}

    .icon-absolute-block i {
        color: #43B02A;
    }
/*TIA team member list*/
.hideTeamList {
    display: none !important;
}

#loadMore {
    cursor: pointer;
    margin: 5px 0px;
    display: none;
}

#showLess {
    cursor: pointer;
    display: none;
    margin: 5px 0px;
}

    #showLess:hover, #loadMore:hover {
        text-decoration: underline;
    }

ul.teamListTIA {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 108px;
    overflow-y: scroll;
}

    ul.teamListTIA li {
        margin: 4px 4px 4px 0px;
        background-color: #fff;
        padding: 7px 25px 7px 10px;
        color: #43B02A;
        display: inline-block;
        border-radius: 50px;
        border: 1px solid #43B02A;
        position: relative;
        line-height: 1.8;
    }

        ul.teamListTIA li:hover {
            background-color: #eee;
        }

.reminderTeamItem {
    border-radius: 50%;
    height: 24px !important;
    display: inline-block !important;
    margin-right: 5px;
}

.closeMember {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding-right: 7px;
    transform: translate(0%, -50%);
}

    .closeMember:hover {
        font-weight: bold;
    }

/********** Upload File ***********/
/*.Browsebutton {
    width: 100%;
    display: block;
    border-bottom: 1px solid #D1D1D1;
    height: 30px;
    border-radius: 5px;
}*/

.custom-input-file-block {
    background: rgba(221, 239, 232, 1);
    border-radius: 5px;
}

/*input[type="file"] {
    border-radius: 0%;
}

input[type=file]::-webkit-file-upload-button {
    -webkit-appearance: none;
    float: right;
    border: 1px solid grey;
    background: #00A3E0;
    color: #FFFFFF;
    height: 30px;
}*/

.custom-TIA-control {
    /* background: transparent;
    font-size: 13px;
    height: auto;
    padding: 4px 0 4px 4px;
    line-height: 26px;*/
    border-radius: 0;
}

.custom-file-label {
    border-radius: 0 !important;
}

.response-section .custom-file-label::after {
    background-color: #43B02A;
    color: #fff;
    border-radius: 0 !important;
}

/*************Leave Module Flow****************/
.note-sentense {
    font-style: italic;
    color: var(--response-content);
    font-size: var(--font-content-sm);
}

.flatpickr-day.selected {
    background: #86BC25 !important;
    color: #fff;
    border-color: #86BC25 !important;
}
/******** Footer **********/
.footer-main {
    background: var(--background-color);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 8px 15px;
}

.footer-main-modal {
    background: var(--background-color);
    bottom: 0;
    left: 0;
    width: 100%;
}


.QR-scanner i {
    color: var(--scanner-color);
    font-size: 30px;
}

.search-actionable-block {
    background: var(--background-color);
    border: 1px solid #53565A;
    border-radius: 8px;
    padding: 4px;
    width: 100%;
}

    .search-actionable-block .search-form-control {
        border: 0;
        background: none;
        font-size: var(--font-content);
        color: var(--subheading-text);
    }

        .search-actionable-block .search-form-control::placeholder {
            color: var(--content-text);
        }

.Speaker-c2a i::before {
    color: #fff;
    background: #737373;
    font-size: 2rem;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 2rem;
}

.upload-c2a i::before {
    color: #fff;
    background: #43B02A;
    font-size: 2rem;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 2rem;
}



/******** QR Modal**********/

#QRscannerModal .modal-header {
    border-bottom: 0;
}

.qr-heading {
    font-size: var(--font-qr-heading);
    color: var(--QR-heading-title);
    font-weight: 700;
}

.feedback-link {
    font-weight: 600;
    color: #0061AF;
    text-decoration: underline;
}

.feedback-link-green {
    font-weight: 600;
    color: #86bc25;
    text-decoration: underline;
}

.search-form-control {
    box-shadow: none;
    outline: none;
}

.form-control.search-form-control:focus {
    box-shadow: none;
}

.switch-toggle {
    margin: 0 auto;
    --width: 260px;
    --height: 43px;
    --offset: 2px;
    --radius: 25px;
    position: relative;
    width: var(--width);
    height: var(--height);
    padding: var(--offset);
    background: #86bc25;
    border-radius: var(--radius);
    font-size: var(--font-title);
    font-weight: 500;
    line-height: normal;
    font-style: normal;
}

    .switch-toggle input[type="checkbox"] {
        cursor: pointer;
        position: absolute;
        inset: 0;
        appearance: none;
        z-index: 2;
    }

        .switch-toggle input[type="checkbox"]:checked + label.switch-toggle-label:before {
            translate: 100% 0;
        }

        .switch-toggle input[type="checkbox"]:checked + label.switch-toggle-label span:nth-child(1) {
            color: #fff;
        }

        .switch-toggle input[type="checkbox"]:checked + label.switch-toggle-label span:nth-child(2) {
            color: #86bc25;
        }

        .switch-toggle input[type="checkbox"] + label.switch-toggle-label {
            position: absolute;
            inset: var(--offset, 0);
            padding: 10px 0;
            display: block;
            user-select: none;
            pointer-events: none;
            display: grid;
            gap: 2px;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            place-items: center;
            margin-bottom: 0 !important;
        }

            .switch-toggle input[type="checkbox"] + label.switch-toggle-label:before {
                content: "";
                position: absolute;
                width: 50%;
                inset: 0;
                background: #fff;
                border-radius: calc(var(--radius) - var(--offset));
                translate: 0 0;
                transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69);
            }

            .switch-toggle input[type="checkbox"] + label.switch-toggle-label span {
                position: relative;
                transition: 200ms linear;
            }

                .switch-toggle input[type="checkbox"] + label.switch-toggle-label span:nth-child(1) {
                    color: #86bc25;
                }

                .switch-toggle input[type="checkbox"] + label.switch-toggle-label span:nth-child(2) {
                    color: #fff;
                }

/******** Footer ends here *******/

/* Extra small devices (phones, 600px and down) */

.mobile-visible {
    display: none;
}

@media only screen and (max-width: 441px) {
    .table-responsive.holiday-list-tbl {
        width: 94%;
    }

    .suggestion-box {
        width: 100%;
    }
    /*Page Scroll*/
    /* width */
    ::-webkit-scrollbar {
        height: 3px;
    }

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

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #86bc25;
        cursor: pointer;
    }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #86bc25;
            cursor: pointer;
        }

    .calendarContainer .note-head {
        width: 90%;
    }

    .mobile-visible {
        display: block !important;
    }

    .desktop-visible {
        display: none;
    }

    #chatbot-body-section .macro {
        margin-left: 0 !important;
        margin-right: 5px !important;
    }

    .response-section {
        margin-left: 5px !important;
    }

    .chatbot-avatar-r {
        padding: 0 !important;
    }

    .actionable-block {
        /*width: 75% !important;*/
        text-align: center;
    }

    .c2a-outer {
        height: 146px;
        min-height: auto !important;
    }

        .c2a-outer:hover .hover-front {
            margin: auto;
        }

    .c2a-hidden-content {
        display: none !important;
    }

    #messageInputSection, #messageInputSectionWA, #messageInputSectionIDEA, #messageInputSectionAsset {
        width: 75% !important;
    }

    .scrolltop-index {
        right: 22px !important;
        bottom: 82px !important;
    }

    .scrollTo-custom {
        width: 20px !important;
        height: 20px !important;
        line-height: 15px !important;
        font-size: 15px !important;
    }

        .scrollTo-custom:hover {
            font-size: 15px !important;
        }

    #exitConfirmationBox {
        padding: 0 !important;
    }

    #exitLeaveConfirmation {
        width: 96% !important;
    }

    #startConversationBox, #refeshConversationBox, #exitConfirmationBox, #exitLeaveConfirmation {
        margin: -16% 0 0 -3% !important;
    }
}

@media only screen and (max-height: 576px) and (orientation: landscape) {
    #exitLeaveConfirmation {
        width: 98% !important;
    }

    .modal-xxl-custom {
        max-width: 695px !important;
    }
    /* .actionable-block {
        width: 75% !important;
        text-align: center;
    }

    .c2a-outer {
        min-height: 190px;
    }

        .c2a-outer:hover .hover-front {
            margin: auto;
        }

    .c2a-hidden-content {
        display: block !important;
    }*/
    #exitConfirmationBox {
        padding: 44px 0 0 0 !important;
    }

        #exitConfirmationBox img {
            width: 170px;
        }

    #exitLeaveConfirmation {
        padding: 60px 0 0 0 !important;
    }

    #startConversationBox, #refeshConversationBox, #exitConfirmationBox {
        margin: -8% 0 0 -2% !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .file-input-group {
        width: 50%;
    }

    .custom-input-file-block.file-input-group {
        width: 100%;
    }

    .actionable-block {
        width: 37vw !important;
    }

    .modal-xxl-custom {
        max-width: 1386px !important;
    }

    .suggestion-box {
        width: 50%;
    }

    ul#WA_chatMessages, ul#IDEA_chatMessages, ul#Asset_chatMessages {
        height: 342px !important;
    }
}

@media only screen and (min-width: 1530px) {
    .actionable-block {
        width: 28vw !important;
    }

    ul#WA_chatMessages, ul#IDEA_chatMessages, ul#Asset_chatMessages {
        height: 420px !important;
    }

    .modal-xxl-custom {
        max-width: 1400px !important;
    }
}

.checked {
    color: orange;
}

.cardLabel {
    width: 40%;
    word-break: break-all;
}

.cardHeader {
    font-size: 12px;
    font-weight: 600;
}


.list {
    margin-left: 4%;
    list-style-type: disc;
}

.feedback {
    float: right;
    font-size: 30px;
    position: relative;
    top: -50px;
    right: 25px;
    color: white;
}

.feedBackBtn {
    height: 32px;
    width: 33px;
    border-radius: 33px !important;
    border: 1px solid !important;
    margin-left: 5px;
    line-height: 33px !important;
}

    .feedBackBtn:hover {
        height: 32px;
        width: 33px;
        border-radius: 33px;
        border: 1px solid;
        margin-left: 5px;
        line-height: 33px !important;
        background-color: #f3f3f3
    }

.contactBody {
    padding: 3%;
    width: 380px;
    box-shadow: 1px 2px 5px 1px lightgrey;
}

.popup-box {
    position: fixed;
    text-align: center;
    bottom: 0px;
    height: 189px;
    width: 278px;
    border: 0px;
}

#chatbot-main body {
    background: #e9e9e9;
    color: #9a9a9a;
    font: 100%/1.5em "Droid Sans", sans-serif;
    margin: 0;
}

#chatbot-main a {
    text-decoration: none;
}

#chatbot-main fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

#chatbot-main h4,
h5 {
    line-height: 1.5em;
    margin: 0;
}

#chatMessages ul.chat-contactslist {
    margin-left: 25px;
    margin-top: 10px;
}

/* ---------- LIVE-CHAT ---------- */

#chatbot-main {
    bottom: 0;
    /*right: 24px;*/
    right: 0px;
    /* position: fixed; */
    width: 270px;
    /*450px;*/
    z-index: 9999;
    /*display:none;*/
}

    #chatbot-main header {
        /* background: #C4D600; */
        background: #86BC25;
        border-radius: 10px 10px 0 0;
        color: black;
        cursor: pointer;
        padding: 12px 12px;
    }

.transparent-header {
    opacity: 0.6;
    transition-duration: 0.2s;
}

    .transparent-header:hover {
        opacity: 1;
        transition-duration: 0.2s;
    }

/* #chatbot-main h4:before {
    background: #86BC25;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 11px;
    margin: 0 8px 0 0;
    width: 11px;
} */

#chatbot-main h4 {
    font-size: 12px;
}

#chatbot-main h5 {
    font-size: 10px;
}

.form {
    padding: 10px;
}

/*#chatbot-main input[type="text"] {
     
    border-radius: 3px;
    padding: 8px;
    outline: none;
    width: 234px;
}*/

.chat-message-counter {
    background: #e62727;
    border: 1px solid #fff;
    border-radius: 50%;
    display: none;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    left: 0;
    line-height: 28px;
    margin: -15px 0 0 -15px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 28px;
}

.chat-close {
    background: #1b2126;
    border-radius: 50%;
    color: #fff;
    display: block;
    float: right;
    font-size: 10px;
    height: 16px;
    line-height: 16px;
    margin: 2px 0 0 0;
    text-align: center;
    width: 16px;
}

.chat-history {
    height: 252px;
    padding: 8px 24px;
    overflow-y: scroll;
}

.chat-message {
    margin: 16px 0;
}

    .chat-message img {
        border-radius: 50%;
        float: left;
    }

.chat-message-content {
    margin-left: 56px;
}

.chat-time {
    float: right;
    font-size: 10px;
}

.chat-feedback {
    font-style: italic;
    margin: 0 0 0 80px;
    padding-left: 30px
}


.spinme {
    display: inline-block;
    padding: 15px 20px 0px 20px;
    font-size: 14px;
    color: #ccc;
    border-radius: 30px;
    line-height: 1.25em;
    font-weight: 100;
    opacity: 0.2;
}

.spinner {
    margin: 0;
    /*width: 30px;*/
    text-align: center;
}

    .spinner > div {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        background: rgba(0, 0, 0, 1);
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
        margin: 2px;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
        margin: 2px;
    }

    .spinner .bounce3 {
        margin: 2px;
    }

@-webkit-keyframes sk-bouncedelay {

    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {

    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

#chatbot-body-section .text {
    /* width: 85%; */
    display: flex;
    flex-direction: column;
}

#chatbot-body-section .text-l {
    float: left;
    padding: 10px;
    /* padding-top: 10px; */
    word-break: break-word;
    display: table;
    border-collapse: separate;
}

#chatbot-body-section .text-r {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: inherit;
    word-break: break-word;
    display: table;
    border-collapse: separate;
}

#chatbot-body-section .avatar {
    display: block;
    justify-content: center;
    align-items: center;
    width: 30px !important;
    height: 30px !important;
    border-radius: inherit;
}

    #chatbot-body-section .avatar img {
        width: 30px !important;
        display: block;
    }

#chatbot-body-section .avatar-r img {
    justify-content: center;
    align-items: center;
    /*width: 12%;*/
    width: 30px !important;
    height: 30px !important;
    float: left;
    border-radius: inherit;
}

#chatbot-body-section .macro {
    border-radius: 15px;
    padding: 5px;
    display: table; /*fix for IE*/
    margin-left: 10px;
    margin-bottom: 7px;
    margin-right: 10px;
    border-bottom-left-radius: 0px;
}

#chatbot-body-section .msj {
    display: block;
    background: #86BC25;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 0;
    margin-bottom: 0px;
}

#chatbot-body-section .frame {
    overflow: hidden;
    padding: 0;
}

#btnSend > span {
    background: whitesmoke;
    padding: 10px;
    font-size: 21px;
    border-radius: 50%;
}

#chatbot-body-section > div.msj-rta.macro {
    margin: auto;
    margin-left: 1%;
}

#chatbot-body-section ul#chatMessages {
    width: 100%;
    list-style-type: none;
    bottom: 47px;
    /* display: flex; */
    flex-direction: column;
    top: 0;
    /*overflow-y: scroll;*/
    overflow-x: hidden;
    height: 685px;
    padding: 0;
    margin: 0;
    /*padding-top: 10px;*/
}

ul#WA_chatMessages, ul#IDEA_chatMessages, ul#Asset_chatMessages {
    width: 100%;
    list-style-type: none;
    bottom: 47px;
    /* display: flex; */
    flex-direction: column;
    top: 0;
    /*overflow-y: scroll;*/
    overflow-x: hidden;
    height: 420px;
    padding: 0;
    margin: 0;
    /*padding-top: 10px;*/
}

#chatSuggestions-section {
    position: absolute;
    left: 12px;
    bottom: 88px;
    width: 530px;
    font-family: "Segoe UI";
    font-size: 13px;
    z-index: 1000;
}

#chatSuggestions-list {
    list-style-type: none;
    box-shadow: 5px 5px 20px 0 rgba(86, 59, 59, 0.2);
    border-radius: 15px;
    background: #efefef;
    margin-top: 25px;
}

#closeChatSuggestions {
    float: right;
    cursor: pointer;
    font-size: 25px;
    color: #bf0404;
}

#chatSuggestions-list li {
    padding: 10px;
    border-bottom: 1px solid #dadada;
    cursor: pointer;
}

    #chatSuggestions-list li:hover {
        background-color: #00A3E0;
        /* font-weight: bold; */
        color: #fff;
    }

    #chatSuggestions-list li:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    #chatSuggestions-list li:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }


#chatbot-body-section ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #d4d4d4;
}

#chatbot-body-section ::-moz-placeholder {
    /* Firefox 19+ */
    color: #d4d4d4;
}

#chatbot-body-section :-ms-input-placeholder {
    /* IE 10+ */
    color: #d4d4d4;
}

#chatbot-body-section :-moz-placeholder {
    /* Firefox 18- */
    color: #d4d4d4;
}

#innerMenuDiv {
    /*background-color: white;*/
}


.chat-menulist {
    border-radius: 50px;
    /* border: 1px solid #8199a2;
    background-color:#C4D600; */
    border: 1px solid #00A3E0;
    padding: 7px 10px;
    /*margin: 4px;*/
    margin: 6px 4px; /*Added for Highlighting NEW menu with Pseudo class.*/
    display: inline-block;
    /* font-weight: 700; */
    color: #00A3E0;
    cursor: pointer;
    position: relative; /*Added for Highlighting NEW menu with Pseudo class.*/
}

    .chat-menulist:hover {
        background-color: #00A3E0;
        color: #fff;
    }

.menulist-active {
    border-radius: 50px;
    /* border: 1px solid #8199a2;
    background-color:#C4D600; */
    border: 1px solid #00A3E0;
    padding: 7px 10px;
    /*margin: 4px;*/
    margin: 6px 4px; /*Added for Highlighting NEW menu with Pseudo class.*/
    display: inline-block;
    /* font-weight: 700; */
    background-color: #86bc25;
    color: #fff;
    cursor: pointer;
    position: relative; /*Added for Highlighting NEW menu with Pseudo class.*/
}

    .menulist-active:hover {
        /* background-color: white;
    color:#C4D600; */
        background-color: #6ba307;
    }

.chat-IT-menulist {
    border-radius: 50px;
    border: 1px solid #00A3E0;
    padding: 7px 10px;
    margin: 4px;
    display: inline-block;
    color: #00A3E0;
    cursor: pointer;
}

    .chat-IT-menulist:hover {
        background-color: #00A3E0;
        color: #fff;
    }


@-webkit-keyframes hop {
    from {
        -webkit-transform: translate(0px,0px);
    }


    to {
        -webkit-transform: translate(0px,-10px);
    }
}

@-moz-keyframes hop {
    from {
        -moz-transform: translate(0px,0px);
    }


    to {
        -moz-transform: translate(0px,-10px);
    }
}

#tooltipNotification {
    color: #000000;
    border-color: #a2ce0b;
    background-color: #a2ce0b;
    bottom: 85px;
    left: 65px;
}

#tooltipNotification {
    bottom: 85px;
    left: 65px;
    position: absolute;
    /* opacity: 1; */
    font-size: 15px;
    /* font-weight: bold; */
    font-family: Segoe UI;
    border-radius: 5px;
    border-width: 0 1px 1px 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    padding: 7px;
    -webkit-border-radius: 5px;
}

.bounce {
    -webkit-animation-name: hop;
    -webkit-animation-duration: .4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: hop;
    -moz-animation-duration: .4s;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: infinite;
}

#tooltipNotification:after, #tooltipNotification:after { /*arrow added to downarrowdiv DIV*/
    content: '';
    display: block;
    position: absolute;
    top: 100%; /*should be set to 100% */
    width: 0;
    height: 0;
    border: 10px solid;
    margin-left: -10px;
    left: 50%;
}

#tooltipNotification:after { /*arrow added to downarrowdiv DIV*/
    border-color: #a2ce0b transparent transparent transparent; /*border color should be same as div div background color*/
}

.m0 {
    margin: 0 !important;
}

.contactBody {
    padding: 3%;
    box-shadow: 1px 2px 5px 1px lightgrey;
}

.mt1 {
    margin-top: 1% !important
}

.mr {
    margin-right: 1% !important
}

.spinMessage {
    width: 340px !important;
}

.send-icontype {
    width: 35px !important;
    height: 35px !important;
    cursor: pointer;
}

.chatbot-avatar {
    float: left !important;
    padding: 0px 0px 0px 10px !important;
    width: 10% !important;
    position: absolute;
    bottom: 24px;
}

.chatbot-avatar-r {
    float: right !important;
    padding: 0px 10px 0px 4px !important;
    bottom: 24px;
}

.subMenuRow {
    border: 1px solid #dbdbdb;
}

    .subMenuRow td {
        color: black;
        text-align: center;
        font-weight: 600;
    }

        .subMenuRow td a {
            color: #00A3E0
        }

.subMenuTable tbody tr td:hover {
    background-color: #00A3E0;
}

    .subMenuTable tbody tr td:hover a {
        color: #fff;
    }

.main-menu-item {
    list-style-type: none;
    border-top: 1px solid #f2f2f2;
    padding: 10px 10px;
    /* font-size: 16px; */
}

    .main-menu-item:hover {
        background-color: #f2f2f2;
    }

p.chatMsg.meText {
    text-align: left;
}

.consent-conv-btn {
    text-align: center !important;
}

    .exit-conv-btn, .consent-conv-btn button {
        border-radius: 10px;
        padding: 5px 15px !important;
        line-height: 1.2;
        margin-top: 15px;
        text-align: center !important;
    }

        .consent-conv-btn button:hover {
            background-color: #00A3E0 !important;
            color: #fff !important;
            border: 1px solid #00A3E0 !important;
        }

#no-exit {
}

#yes-exit {
}

#exitConfirmationBox p {
    font-size: 18px;
}


td, th {
    padding: 10px !important;
}



.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    top: 40% !important;
}

.carousel-inner .item {
    text-align: center;
}

.carousel-indicators {
    bottom: -15px !important;
}

    .carousel-indicators .active {
        background-color: #86BC25 !important;
    }

    .carousel-indicators li {
        border-color: #86BC25 !important;
    }

.glyphicon-chevron-right:before, .glyphicon-chevron-left:before {
    font-size: 16px;
    color: #333;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
    left: -5px !important;
}

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    right: -5px !important;
}

.carousel-control {
    width: 5% !important;
}

/*Chatbot suggestions css*/
ul#chatSuggestions-list {
    padding-left: 0px !important;
    /* background-color: #86BC25 !important; */
    color: #00A3E0 !important;
    border-radius: 10px !important;
    border: 2px solid #dedede;
}

div#chatSuggestions-section {
    width: 450px !important;
    left: 40px !important;
}

#closeChatSuggestions {
    position: absolute !important;
    right: -2px !important;
    color: #000 !important;
    top: 15px !important;
    background: #fff !important;
    font-size: 18px !important;
    padding: 0px 5px !important;
    border-radius: 25px;
}

#startConversationBox, #refeshConversationBox {
    z-index: 2000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 750px;
    text-align: center;
    padding: 180px 0px 0px;
    opacity: 0.9;
}

#userConsentFormBox {
    z-index: 2000;
    background-color: #fff;
    width: 100%;
    padding: 10px 20px;
}

    #userConsentFormBox li {
        margin-top: 5px;
    }

    #startConversationBox, #refeshConversationBox, #userConsentFormBox p {
        font-size: 12px;
    }

#no-cancel {
    border: 1px solid #515151;
    margin-right: 15px;
}

#yes-login {
    border: 1px solid #00A3E0;
    color: #00A3E0;
}




#HelpDTicket {
    font-family: segoe ui;
    border-collapse: collapse;
    width: 100%;
    border-radius: 5px;
}

    #HelpDTicket td, #HelpDTicket th {
        border: 1px solid white;
        padding: 8px;
    }

    #HelpDTicket tr:nth-child(even) {
        background-color: white;
    }

    #HelpDTicket tr:hover {
        background-color: #ddd;
        color: #86BC25
    }

    #HelpDTicket th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #86BC25;
        color: white;
    }

.text.text-r p {
    color: #333 !important;
    font-family: segoe ui;
    font-weight: 600;
}

#ShowLeavesChart {
    cursor: pointer;
}

    #ShowLeavesChart:hover {
        cursor: pointer;
    }

/*Holiday list loader*/
.holiday-loader, .holiday-loader:before, .holiday-loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.holiday-loader {
    color: #ffffff;
    font-size: 5px;
    margin: 20px 20px;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

    .holiday-loader:before, .holiday-loader:after {
        content: '';
        position: absolute;
        top: 0;
    }

    .holiday-loader:before {
        left: -3.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .holiday-loader:after {
        left: 3.5em;
    }

@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}


div#rrobot-chat-container {
    /*position: absolute !important;*/
    bottom: 0 !important;
    height: 100% !important;
}

div#chatbot-main {
    height: 100% !important;
}

div#chatbot-body-section {
    height: 100% !important;
}

.frame {
    height: 100% !important;
    position: relative !important;
}


ul#chatMessages {
    /*height: 88% !important;*/
    /*height: 515px !important;*/
}


/*Events calendar*/
#myEventsContainer {
    margin: 0px 15px 15px 15px;
    width: 365px;
}

.eventBox {
    color: #333;
}

.eventHeader {
    background: #e5e5e5;
    padding: 7px 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.calendar-box {
    background-color: #fff;
    padding: 5px;
    border-radius: 7px;
    text-align: center;
}

.calendarDay {
    padding: 0px !important;
    color: #ff3a30;
    font-size: 10px;
    margin-bottom: 0px;
}

.calendarDate {
    padding: 0px !important;
    color: #000;
    font-size: 16px;
    margin-bottom: 0px;
}

.calendarEventName {
    text-transform: uppercase;
    padding-top: 10px;
}

.eventBody .col-xs-9 {
    border-left: 2px solid #19adf8;
    text-align: left;
}

.eventBody {
    /*background: #e5e5e5;*/
    background: #fff;
    padding: 10px 10px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.calendar-StrtTime {
    margin-bottom: 5px;
    padding: 0px;
    font-size: 12px;
    color: #333;
}

.calendar-EndTime {
    margin-bottom: 0px;
    padding: 0px;
    font-size: 12px;
    color: #5a5a5a;
}

.calendar-details {
    margin-bottom: 2px;
    padding: 0px;
    font-size: 14px;
    color: #333;
}

    .calendar-details:first-child {
        font-weight: bold;
    }


#dateEvent .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    top: 45% !important;
}

/*Fix for IE*/
#direct-main-menu-side-option {
    display: inline-block;
    width: auto;
    padding: 12px 20px;
}

.send-icontype {
    display: inline-block !important;
    margin: 2px 8px !important;
}
/*web application menuitem fix*/
#DirectMainMenuList {
    bottom: 60px;
}

#messageInputSection, #messageInputSectionWA, messageInputSectionIDEA, messageInputSectionAsset {
    padding: 0px !important;
    float: left !important;
    width: 94%;
}

@media only screen and (max-width: 480px) {
    #innerMenuDiv.carousel-container, #myEventsContainer, .spinMessage, #chatSuggestions-section {
        width: auto !important;
    }

    .HolidayCard {
        width: 48px !important;
    }
}

.calendarContainer .col-xs-3 {
    margin: 10px 0px;
}

/*SPOC Card CSS*/
.spoc-card-body {
    /*width: 410px;
    font-family: segoe ui;
    font-size: 14px;
    background-color: white;
    color: black;
    padding: 5px;
    padding: 3%;
    border-radius: 5px;
    box-shadow: 1px 2px 5px 1px lightgrey;*/
}

.spoc-heading {
    text-transform: uppercase;
    border-bottom: 2px solid #86bc35;
    padding-bottom: 5px;
}

.spoc-name {
    font-size: 18px;
    margin: 10px 0px 5px 0px;
}

p.spoc-skype {
    font-size: 14px !important;
    background: #86bc25;
    padding: 7px 0px;
    text-align: center;
    color: #fff !important;
    border-radius: 5px;
    margin-top: 10px !important;
}

i.fa.fa-skype.mr {
    color: #fff;
    font-size: 20px;
    margin-right: 10px !important;
}

/*Reminder Style*/
.remBlock.col-sm-12 {
    width: 100%;
    min-width: 270px;
    background: #fff;
    padding: 10px 15px;
    border-left: 5px solid #86bc25;
    border-bottom: 1px solid #bbbcbc;
    margin-bottom: 5px;
}

.col-sm-12.remTitle {
    font-weight: 600;
    /*text-transform: capitalize;*/
    margin-bottom: 5px;
}

.col-sm-12.remDate {
    color: #97999b;
    font-size: 12px;
}

/*Date Time Picker*/
.ui-datepicker th {
    padding: 5px 5px !important;
}

.ui-datepicker td {
    padding: 0px !important;
}

input#my_date_picker:active, input#my_date_picker:focus, input.timepicker.hasWickedpicker:active, input.timepicker.hasWickedpicker:focus {
    border: 1px solid #00A3E0 !important;
}

.wickedpicker {
    width: 230px !important;
}

p.wickedpicker__title {
    background: #86bc25 !important;
    font-weight: bold !important;
    color: #fff;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background: #86bc25 !important;
    color: #fff;
}

ui-datepicker-week-end th span {
    color: #86bc25 !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background: #86bc25 !important;
    color: #fff !important;
}



/*Mood Icons*/
.moodicon {
    font-size: 18px;
    margin-right: 5px;
    /*background: yellow;*/
    border-radius: 50%;
    cursor: pointer;
}

    .moodicon:hover {
        font-size: 22px;
        cursor: pointer;
    }

.moodiconContainer {
    text-align: right;
    margin-top: 10px;
    padding-top: 4px;
    border-top: 2px solid lightgrey;
}



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

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

/* Handle */
::-webkit-scrollbar-thumb {
    background: #86bc25;
    cursor: pointer;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #86bc25;
        cursor: pointer;
    }



/*for datetime ok button*/
#validationTime .glyphicon-ok, #validationDate .glyphicon-ok {
    font-size: 0px !important;
    display: none !important;
}

li.chat-menulist.newElement:after {
    content: "New!";
    color: white;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: -8px;
    right: 0;
    /*background: #005587;*/
    background: #86bc25;
    border-radius: 10px;
    padding: 1px 5px;
    /*animation: blinker 1s linear infinite;*/
}

/*Shilpa garg code changes*/
li.chat-menulist.testElement:after {
    content: "Under Testing!";
    color: white;
    font-size: 7px;
    font-weight: bold;
    position: absolute;
    top: -13px;
    right: 0;
    /*background: #005587;*/
    background: #86bc25;
    border-radius: 10px;
    padding: 1px 5px;
    /*animation: blinker 1s linear infinite;*/
}

@keyframes blinker {
    60% {
        opacity: 0.7;
    }
}

.KPIoverallScoresdiv {
    border: 1px solid #86bc25;
    margin: 2px;
    padding: 2px;
    border-radius: 14px;
}


.kpiEngagementsTable th:first-child {
    width: 37% !important;
}

.kpiEngagementsTable th:nth-child(2) {
    text-align: center !important;
}

.kpiEngagementsTable td:nth-child(2) {
    text-align: center !important;
}

.kpi-menulist {
    cursor: pointer;
}

/*.kpi-menulist:hover {
        background-color: #86bc25;
        color: black;
    }*/

span.kpiRatingRed {
    background-color: #e30613;
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 50%;
}

span.kpiRatingAmber {
    background-color: #ffd500;
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 50%;
}

span.kpiRatingGreen {
    background-color: #009A44;
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 50%;
}

span.kpiRatingBlack {
    color: black;
}

/*HIVE Calendar CSS*/
.event a {
    background-color: white !important;
    color: #86bc25 !important;
}

.noevent a {
    background-color: #86bc25;
    color: #ffffff !important;
}

.datepickerForHIVE .ui-datepicker td.noevent a {
    /*background-color: #fff !important;
    color: #86bc25 !important;*/
    background-color: #00A3E0 !important;
    color: #ffffff !important;
    cursor: default !important;
}

.datepickerForHIVE .ui-datepicker td.semievent a {
    background-image: linear-gradient(white, #42f3FF) !important;
    color: #86bc25 !important;
}

.datepickerForHIVE .ui-datepicker {
    width: 300px;
    height: auto;
    margin: 5px auto 0;
    font: 12pt Arial, sans-serif;
}

.datepickerForHIVE .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #86bc25;
    background: white !important;
    color: #86bc25 !important;
    font-weight: 700 !important;
}

.datepickerForHIVE .ui-datepicker tbody td {
    padding: 4px !important;
    border-bottom: 1px solid #e8e8e8;
}

.datepickerForHIVE .ui-datepicker table {
    width: 100%;
    border: 1px solid #ccc;
    border: 1p solid black;
    padding: 10px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.datepickerForHIVE .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background: #ffffff !important;
    color: #333;
}

.datepickerForHIVE .ui-datepicker-header {
    background: #fff;
    color: #333;
    /*<!-- font-family: 'Times New Roman'; -->*/
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #fff;
    font-size: 12px;
    padding: 5px;
    background-color: #fff;
}

.datepickerForHIVE .ui-datepicker-title {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    background-color: #fff;
}

.ui-datepicker-prev {
    float: left;
    cursor: pointer;
    background-position: center -30px;
}

.ui-datepicker-next {
    float: right;
    cursor: pointer;
    background-position: center 0px;
}

.ui-datepicker thead {
    background-color: #f7f7f7;
}

.datepickerForHIVE .ui-datepicker th span {
    font-size: 12px !important;
}

.datepickerForHIVE .ui-datepicker th {
    background-color: #00A3E0;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
    padding: 7px 4px !important;
    font-size: 12px !important;
}

.ui-datepicker tbody td {
    padding: 0;
    /*border-right: 1px solid #808080;*/
}

    .ui-datepicker tbody td:last-child {
        border-right: 0px;
    }

.datepickerForHIVE .ui-datepicker tbody tr {
    /*border-bottom: 0px solid #bbb;*/
}

    .datepickerForHIVE .ui-datepicker tbody tr:last-child {
        border-bottom: 0px;
    }

.ui-datepicker a {
    text-decoration: none;
}

.datepickerForHIVE .ui-datepicker td span, .ui-datepicker td a {
    display: block;
    text-align: center;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 20px;
    color: #86bc25;
}

/*.ui-state-default {
    background-color: #86bc25 !important;
    color: white !important;
}*/

/*My Dashboard*/
#learningsHeaderDiv {
    /*background-color: #86bc25;*/
    padding: 10px;
    text-align: left !important;
    color: white;
    font-weight: bold;
    min-width: 400px;
    display: inline-flex;
}

.verticalLine {
    border-left: 2px solid white;
    margin-left: 10px;
    padding-left: 10px;
    background-color: white;
    color: #86bc25;
    min-width: 320px;
    padding: 10px !important;
    padding-top: 16px;
    font-size: 15px;
}

/*Missing Time*/

#customersMT {
    border-collapse: collapse;
    width: 100%;
    border-radius: 5px;
}

    #customersMT td, #customersMT th {
        border: 1px solid whitesmoke;
        padding: 8px;
    }

    #customersMT tr:nth-child(even) {
        background-color: white;
    }

    #customersMT tr:hover {
        background-color: #ddd;
        color: #86BC25
    }

/*HIVE Availability Report*/

#hiveMain {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 5px;
}

    #HiveAvRep td, #hiveMain th {
        border: 1px solid whitesmoke;
        padding: 8px;
    }

#HiveAvRep tr:nth-child(odd) {
    background-color: #a1db36;
    cursor: pointer;
}

#HiveAvRep tr:nth-child(even) {
    background-color: white;
    cursor: pointer;
}

#HiveAvRep tr:hover {
    background-color: #ddd;
    color: #86BC25;
    cursor: pointer;
}

#hiveMain th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #86BC25;
    color: white;
    width: 240px;
}

#HiveAvRep tr td:nth-child(n+3) {
    display: none;
}


/* When the input field gets focus,
        change its width to 100% */
input[type=text]:focus {
    /*width: 70%;*/
}

/* TAX Abbreviation Styling*/

#taxAbbInnerTable td, #taxAbbMain th {
    padding: 8px;
}

#taxAbbInnerTable td {
    border: 1px solid #ddd;
}


#taxAbbInnerTable tr td:nth-child(n+3) {
    display: none;
}


/* Apply Leave:  */


#addressForm input[type="checkbox"] {
    width: auto;
    display: inline-block;
}

#addressForm label[for="sameAsCurrent"] {
    display: inline-block;
    margin-left: 5px;
}

/*EXIT LEAVE STYLING START*/
#exitLeaveConfirmation p {
    font-size: 18px;
}

#exitLeaveConfirmation {
    z-index: 2000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 750px;
    text-align: center;
    padding: 180px 0px 0px;
    opacity: 0.9;
}
/*EXIT LEAVE STYLING END*/

/*FLATPICKR DATE STYLE START*/
.datepicker-container {
    position: relative;
    display: inline-block;
}

    .datepicker-container input {
        padding-right: 30px;
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        margin: 5px 0;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

#calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
}
/*FLATPICKR DATE STYLE END*/

/*Abbas Styling Changes*/
.actionable-block {
    /*  height: 180px;*/
}

.TIAGenAI-modal-inner {
    /* height: 420px;
    overflow: scroll;*/
}

.attachment-icon i {
    font-size: 24px;
    color: #53565a;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.file-img i {
    color: #43b02a;
    font-size: 18px;
}

.remove-icon i {
    color: #DA291C;
    font-size: 18px;
    cursor: pointer;
}

.position-relative {
    position: relative;
}

/*Abbas Styling Changes*/
.suggestion-box {
    position: absolute;
    z-index: 10;
    background-color: var(--container-background-color);
    color: var(--heading-text);
    border: 1px solid #ccc;
    display: none;
    max-height: 150px;
    overflow-y: auto;
    bottom: calc(100% + 5px);
}

    .suggestion-box div {
        padding: 8px 10px;
        cursor: pointer;
    }

        .suggestion-box div:hover,
        .suggestion-box .active {
            background-color: var(--background-color);
        }