/* Theme Styles Start */ /* Synced Fonts Start ["Arial","Arial Black","Comic Sans MS","Courier New","Helvetica Neue","Helvetica","Impact","Lucida Grande","Montserrat","Roboto","Tahoma","Times New Roman","Titillium Web","Verdana"] Synced Fonts End */ /* Shadow Start {"background":"#000000","opacity":"05%","shadow":{"x":"0","y":"0","blur":"10","spread":"5"}} Shadow End */ .ectheme .esg-pcolor-bg { background-color: #57c046; } .ectheme .esg-pcolor-bd { border-color: #57c046; } .ectheme .esg-pcolor-fc { color: #57c046; } .ectheme .esg-pcolor-fc:hover { color: #1c8d0a; } .ectheme .esg-pcolor-svg { stroke: #57c046; } .ectheme .esg-btn-primary { background: #57c046; } .ectheme .esg-pcolor-svg { fill: #57c046; } .ectheme .esg-h-lvl1:after { background: #57c046; } .ectheme .pagination > li:not(.active) > a { color: #57c046; } /* .ectheme .productbadge .badge { background: #57c046; } */ .ectheme div.leftsidecat .list-group-item .badge { background: #57c046; } .ectheme .pagination > .active > a { background-color: #57c046; border-color: #57c046; } .ectheme .esg-btn-primary:hover { background-color: #1c8d0a; } .ectheme .esg-btn-primary:focus { background-color: #1c8d0a; } .ectheme .esg-primary-hover-bg { background-color: #1c8d0a; } .ectheme .esg-primary-hover-bd { border-color: #1c8d0a; } .ectheme .esg-primary-hover-fc { color: #1c8d0a; } .ectheme .esg-faded-bg { background: rgba(28, 141, 10, 0.6); } .ectheme .esg-faded-bd { border-color: rgba(28, 141, 10, 0.6); } .ectheme .esg-faded-fc { color: rgba(28, 141, 10, 0.6); } .ectheme .esg-btn-faded { background: rgba(28, 141, 10, 0.6); } .ectheme .esg-scolor-bg { background: #acacac; } .ectheme .esg-scolor-fc { color: #acacac; } .ectheme .esg-scolor-fc:hover { color: #5f5f5f; } .ectheme .esg-btn-secondary { background: #acacac; } .ectheme .esg-table-basic thead { border-bottom-color: #dbdbdb; } .ectheme .esg-btn-secondary:hover { background: #5f5f5f; } .ectheme .ecb-text-small { font-family: Roboto; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; color: #acacac; line-height: Normal; } /* Regular Text */ .ectheme p { font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } .ectheme .ecb-text-regular { font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } .ectheme { font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } /* End Regular Text */ .ectheme .ecb-text-large { font-family: Roboto; font-size: 16px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } .ectheme .ecb-text-strong { font-family: Roboto; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } .ectheme h1, .ectheme .ecb-header-lvl-1 { font-family: Montserrat; font-size: 32px; font-weight: bold; font-style: normal; text-decoration: none; color: #000; line-height: Normal; } .ectheme h2, .ectheme .ecb-header-lvl-2 { font-family: Montserrat; font-size: 24px; font-weight: bold; font-style: normal; text-decoration: none; color: #000; line-height: Normal; } .ectheme h3, .ectheme .ecb-header-lvl-3 { font-family: Montserrat; font-size: 18px; font-weight: bold; font-style: normal; text-decoration: none; color: #000; line-height: Normal; } .ectheme h4, .ectheme .ecb-header-lvl-4 { font-family: Montserrat; font-size: 16px; font-weight: bold; font-style: normal; text-decoration: none; color: #000; line-height: Normal; } .ectheme h5, .ectheme .ecb-header-lvl-5 { font-family: Montserrat; font-size: 14px; font-weight: bold; font-style: normal; text-decoration: none; color: #000; line-height: Normal; } .ectheme h6, .ectheme .ecb-header-lvl-6 { font-family: Montserrat; font-size: 13px; font-weight: bold; font-style: normal; text-decoration: none; color: #000; line-height: Normal; } .ectheme a, .ectheme .authenticator_view .amplify-button--link { font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: #57c046; line-height: Normal; } .ectheme a:hover, .ectheme .authenticator_view .amplify-button--link:hover { font-family: Roboto; font-size: 14px; font-weight: normal; font-style: normal; text-decoration: none; color: #1c8d0a; line-height: Normal; } .ectheme .esg-pbutton, .ectheme .esg-btn-primary, .ectheme .authenticator_view .amplify-button--primary { font-family: Montserrat; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: #ffffff; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 0px; border-radius: 3px; padding: 10px 20px 10px 20px; background-color: #57c046; ; } .ectheme .esg-pbutton:hover, .ectheme .esg-btn-primary:hover, .ectheme .authenticator_view .amplify-button--primary:hover { font-family: Montserrat; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: #ffffff; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 0px; border-radius: 3px; padding: 10px 20px 10px 20px; background-color: #1c8d0a; ; } .ectheme .esg-sbutton, .ectheme .esg-btn-secondary { font-family: Montserrat; font-size: 11px; font-weight: bold; font-style: normal; text-decoration: none; color: #ffffff; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 0px; border-radius: 3px; padding: 10px 20px 10px 20px; background-color: #acacac; ; } .ectheme .esg-sbutton:hover, .ectheme .esg-btn-secondary:hover { font-family: Montserrat; font-size: 11px; font-weight: bold; font-style: normal; text-decoration: none; color: #ffffff; line-height: Normal; border-style: solid; border-color: null; border-width: 0px; border-radius: 3px; padding: 10px 20px 10px 20px; background-color: #5f5f5f; ; } .ectheme .esg-btn-error, .ectheme .esg-btn-error.rectangle-button { font-family: Montserrat; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: #ffffff; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 0px; border-radius: 3px; padding: 10px 20px 10px 20px; ; background-color: #ff6a6a; } .ectheme .esg-btn-error:hover, .ectheme .esg-btn-error:focus, .ectheme .esg-btn-error.rectangle-button:hover, .ectheme .esg-btn-error.rectangle-button:focus{ font-family: Montserrat; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; color: #ffffff; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 0px; border-radius: 3px; padding: 10px 20px 10px 20px; ; background-color: #d23333; } .ectheme .ectheme-input-label { font-family: Roboto; font-size: 13px; font-weight: bold; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } .ectheme .ectheme-input-label:hover { font-family: Roboto; font-size: 13px; font-weight: bold; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; } .ectheme .ectheme-input-box { font-family: Roboto; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 1px; border-radius: 0px; padding: 10px 20px 10px 20px; background-color: #ffffff; } .ectheme .search .ectheme-input-box { font-family: Roboto; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; border-style: solid; border-color: #dbdbdb; border-width: 1px; border-radius: 0px; padding: 10px 20px 10px 20px; background-color: #ffffff; } .ectheme .ectheme-input-box:hover, .ectheme .ectheme-input-box:focus { font-family: Roboto; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #5f5f5f; line-height: Normal; border-style: solid; border-color: #bababa; border-width: 1px; border-radius: 0px; padding: 10px 20px 10px 20px; background-color: #ffffff; } .ectheme table tbody tr { border-style: solid; border-color: #dbdbdb; border-bottom-width : 1px; } /* enhance list */ .ectheme .mobile-record-seprator{ border-top-color: #57c046 !important; } .ectheme table .Mobile-Table td { border-style: solid; border-color: #dbdbdb; border-bottom-width : 1px; } .ectheme .ecb-theme-card { background-color: rgba(255, 255, 255, 1); border-style: solid; border-color: #dbdbdb; border-width: 1px; border-radius: 3px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 05%); } .ectheme .ecb-theme-card:hover { background-color: rgba(255, 255, 255, 1); border-style: solid; border-color: #dbdbdb; border-width: 1px; border-radius: 3px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 05%); } /* Theme Styles End */ /* Make Payment Screen */ .ectheme .ec-payment-page .esg-table-basic thead{ border-color: #acacac !important; } .ec-payment-page .button-square i { color: #57c046 } .ec-payment-page .radio-boxes__input:checked+.radio-boxes__head, .radio-boxes__input:checked+label.radio-boxes__head { border-color: #57c046; background: rgba(87, 192, 70, 0.5); } .ec-payment-page .radio-boxes__input:checked~.radio-boxes__content, .ec-payment-page .button-square:hover { border-color: #57c046; } .ec-payment-page button.link--green { color: #57c046 } .ec-payment-page button.link--green:hover { color: #1c8d0a }
        /*startcustom*/
          
          
          
          
.ectheme>div {
    /*    padding-left: 0 !important;
        padding-right: 0 !important;*/
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    #a-ec-table {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    #a-ec-table td,
    #a-ec-table th {
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    #a-ec-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    
    #a-ec-table tr:hover {
        background-color: #ddd;
    }
    
    #a-ec-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
        background-color: #57c046;
        color: white;
    }
    
    .ectheme .esg {
        border-radius: 1px;
        background-color: #e6e6e6;
        border: 5px solid;
        border-color: #e6e6e6;
        font-weight: bold;
    }
    
    esg-subtotal {
        border-radius: 1px;
        background-color: #f2f2f2;
        border: 5px solid;
        border-color: #f2f2f2;
    }
    
    .esg-footer {
        border-radius: 1px;
        background-color: #f2f2f2;
        border: 5px solid;
        border-color: #f2f2f2;
    }
    
    .esg-container {
        border: 1px;
    }
    .cp_score .cp_bigthanks {
        display: grid;
        grid-template-columns: 50px 1fr;
    }
    .cp_score .cp_bigthanks .material-icons {
        color:#57c046;
        display: block;
        padding:5px;
        font-size: 25px;
    }
    .cp_score .cp_bigthanks p {
        font-size: 13px;
        color:#5f5f5f;
    }
    .cp_score .pull-right {
        float: right;
    }
    
    .cp_score textarea {
        border: 1px solid #dbdbdb;
        width: 100%;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
        height: 63px;
    }
    
    .cp_score .cp_score_btn_row {
        text-align: right;
    }
    
    .cp_score .cp_score_btn_row button {
        text-transform: uppercase;
    }
    
    .cp_card_successpap {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .cp_card_successpap>div {
        border: 1px solid #e7e7e7;
        border-radius: 5px;
        min-height: 30px;
        padding: 15px 25px 15px 25px;
        margin: 0;
    }
    
    .cp_card_successpap>div>p:first-child,
    .cp_card_successpap>div>h3 {
        margin-bottom: 10px;
    }
    
    .cp_card_successpap h3 {
        font-size: 19px;
    }
    
    .cp_card_successpap a:hover,
    .cp_card_successpap a {
        font-family: 'Montserrat', sans-serif;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: auto;
        cursor: pointer;
    }
    
    .cp_card_successpap a,
    .cp_card_successpap p,
    .cp_card_successpap h3 {
        font-family: 'Montserrat', sans-serif;
    }
    
    div[data-sname="SuccessTop"] {
        padding-top: 0 !important;
    }
    
    div[data-sname="ThreeUpSection"] {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .cp_releases {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 2em;
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    @media (max-width:1000px) {
        .cp_releases {
            grid-template-columns: 1fr;
            grid-row-gap: 1.5em;
        }
    
        .cp_versions {
            margin-top: 0;
        }
    }
    
    .cp_versions .background-masker {
        margin-bottom: 20px;
        height: 234px;
        border-radius: 4px;
    }
    
    .cp_roadmap .background-masker {
        border-radius: 4px;
        height: 600px;
    }
    
    .cp_versions {
        margin-top: 55px;
    }
    
    .cp_versions .cpversion {
        padding: 30px;
        background: #fff;
        /*    box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.09);*/
        box-shadow: 0px 11px 32px rgba(0, 0, 0, 0.1);
        margin-bottom: 1.5em;
        border-radius: 7px;
    }
    
    .cpversion p {
        font-size: 13px;
    }
    
    .cpversion label {
        display: block;
        margin: 10px 0 0 0;
        font-weight: bold;
        font-size: 13px;
    }
    
    .cpversion small {
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
        margin-top: 10px;
        display: block;
    }
    
    .cpversion .cp_rounder {
        display: grid;
        grid-template-columns: 3fr 4fr;
        align-items: center;
        padding-right: 2px !important;
    }
    
    .cpversion .cp_rounder>span {
        font-size: 13px;
    }
    
    .cpversion .esg-btn-pill {
        padding: 0 15px;
        height: 33px;
        margin: 3px 0;
        font-size: 11px;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
    }
    
    .cpv_title {
        font-size: 14px;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        color: #0a0a0a;
    }
    
    .cp_rm {
        border: 2px solid #ebebeb;
        border-radius: 7px;
        margin-bottom: 1em;
        padding: 30px;
    }
    
    .cp_rm:not(.cpropen):hover {
        border-color: #dcdcdc;
        cursor: pointer;
    }
    
    .cp_rm_rowtop {
        display: grid;
        grid-template-columns: 60px 1fr;
        /*    column-gap: 1em;*/
    }
    
    .cp_rm_rowtop .material-icons {
        width: 30px;
        height: 30px;
        font-size: 30px;
        cursor: pointer;
        color: #acacac;
    }
    
    .cp_rm_title {}
    
    .cp_rm_title p {
        font-size: 13px;
        color: #5f5f5f;
    }
    
    .cp_rm_titlebold {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        color: #0a0a0a;
        font-family: 'Montserrat', sans-serif;
    }
    
    .cp_rm_desc {
        display: none;
        padding-left: 60px;
        padding-top: 20px;
    }
    
    .cp_rm_desc_open {
        display: block;
    }
    
    .cp_rm_link {
        text-transform: uppercase;
        font-size: 11px;
        font-weight: bold;
        cursor: pointer;
        padding-top: 30px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .cp_rm_open>.material-icons {
        transform: rotateX(180deg);
    }
    
    
    
    
    
    
    
    
    .cp_g_header {
        margin: 20px;
        margin-left: 8%;
        margin-right: 8%;
    }
    
    .cp_g_header p {
        font-size: 13px;
    }
    
    .cp_g_header h3 {
        font-weight: bold;
    }
    
    .cp_g_container {
        margin: 20px 9em;
        display: grid;
        grid-template-columns: 1fr 3fr;
        /* Adjusted to ensure layout fills space appropriately */
        font-size: 13px;
        margin-left: 8%;
        margin-right: 8%;
    }
    
    .cp_g_static-columns {
        flex-shrink: 0;
    }
    
    .cp_g_scrollable-gantt {
        min-height: 125px;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        /* Ensure the gantt chart area uses the full width allocated to it */
        position: relative;
        border-right: 1px solid #dedede;
    }
    
    .cp_g_container table {
        width: 100%;
        /* Make sure tables fill their containers */
        border-collapse: collapse;
        table-layout: fixed;
    }
    
    .cp_g_container th,
    .cp_g_container td {
        border-bottom: 1px solid #dedede !important;
        padding: 8px;
        padding-bottom: 6px;
        text-align: left;
        vertical-align: middle;
        height: 33px;
        box-sizing: content-box;
    }
    
    .cp_g_container th {
        border-bottom: 2px solid #c3eb5b !important;
    }
    
    .cp_g_container .cp_g_static-columns th:nth-child(1),
    .cp_g_container .cp_g_static-columns td:nth-child(1) {
        padding-left: 0;
    }
    
    .cp_g_static-columns th:nth-child(1),
    .cp_g_static-columns td:nth-child(1) {
        width: 200px;
    }
    
    .cp_g_static-columns th:nth-child(2),
    .cp_g_static-columns td:nth-child(2),
    .cp_g_static-columns th:nth-child(3),
    .cp_g_static-columns td:nth-child(3) {
        width: 95px;
    }
    .cp_g_static-columns th:nth-child(3),
    .cp_g_static-columns td:nth-child(3) {
        border-right: 1px solid #dedede !important;
    }
    
    .cp_g_gantt {
        position: relative;
        /*     background: #f9f9f9; */
        min-width: calc(120px * 13);
        /* Adjust as necessary to fit the timeline */
        height: 100%;
        /* Ensures Gantt rows use all available vertical space */
    }
    
    .cp_g_scrollable-gantt table {
        min-width: 100%;
    }
    
    .cp_g_scrollable-gantt th,
    .cp_g_scrollable-gantt td {
        padding-left: 30px;
    }
    
    .cp_g_bar {
        position: absolute;
        top: 5px;
        /* Adjusted for vertical centering */
        height: 20px;
        border-radius: 4px;
    }
    
    .cp_g_bar.cp_g_completed {
        background-color: #2cc016;
    }
    
    .cp_g_bar.cp_g_in-progress {
        background-color: #c3eb5b;
    }
    
    .cp_g_bar.cp_g_pending {
        background-color: #dbdbdb;
    }
    
    .cp_g_month {
        display: inline-block;
        width: 120px;
        text-align: center;
        position: relative;
    }
    .cp_g_month:before {
        content: ' ';
        position: absolute;
        top: 17px;
        left: 60px;
        background: #acacac;
        height: 5px;
        width: 1px;
    }
    .cp_g_static-columns a {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .cp_g_static-columns a.esg-pcolor-fc:link {
        text-decoration: none;
    }
    
    .cp_g_static-columns a.esg-pcolor-fc:visited {
        text-decoration: none;
    }
    
    .cp_g_static-columns a.esg-pcolor-fc:hover {
        text-decoration: none;
    }
    
    .cp_g_static-columns a.esg-pcolor-fc:active {
        text-decoration: none;
    }
    
    .cp_g_today {
        position: absolute;
        left: 2.5em;
        /* Adjust based on actual layout */
        top: 40px;
        width: 1px;
        height: calc(100% - 40px);
        background-color: #1c8d0b;
        z-index:9;
        /* Color for the "today" marker */
    }
    
    .cp_g_today:before {
        content: 'TODAY';
        position: absolute;
        top: 33px;
        left: -43px;
        transform: rotate(90deg);
        background: #1c8d0b;
        font-size: 10px;
        font-weight: bold;
        color: #fff;
        padding: 4px 8px;
        height: 18px;
        width: 71px;
        text-align: center;
        z-index: 9;
    }
    
    .cp_g_card:not(.cp_ghostcard),
    .cp_g_today,
    .cp_g_static-columns tbody tr:not(.cp_ghostrow),
    .cp_g_scrollable-gantt tbody tr:not(.cp_ghostrow),
    .cp_g_month:not(.background-masker),
    .cp_cardlist:not(.cp_loader),
    .cp_g_mobile_view {
        display: none;
    }
    
    .cp_g_card_status.background-masker {
        width: 100px;
    }
    
    .cp_g_card_title.background-masker {
        width: 50%;
        margin-bottom: 10px;
    }
    
    .cp_g_scrollable-gantt .cp_ghostrow {
        position: relative;
    }
    
    .cp_g_scrollable-gantt .cp_ghostrow .cp_g_bar.background-masker {
        top: 15px;
    }
    
    .cp_g_card {
        background: #fff;
        padding: 20px;
        box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        position: relative;
    }
    
    .cp_g_card .cp_g_gantt {
        min-width: 10px;
        background: #f8f8f8;
        border-radius: 4px;
        margin: 35px 0 25px 0;
        height: 20px;
    }
    
    .cp_g_card .cp_g_bar {
        position: absolute;
        top: 0;
    }
    
    .cp_g_card .cp_g_card_title a {
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        margin-bottom: 10px;
        display: block;
    }
    
    .cp_g_card .cp_g_card_title a:link {
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        margin-bottom: 10px;
        display: block;
    }
    
    .cp_g_card .cp_g_card_title a:visited {
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        margin-bottom: 10px;
        display: block;
    }
    
    .cp_g_card .cp_g_card_title ac:hover {
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        margin-bottom: 10px;
        display: block;
    }
    
    .cp_g_card .cp_g_card_title a:active {
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
        margin-bottom: 10px;
        display: block;
    }
    
    .cp_g_card .cp_g_card_status {
        text-transform: uppercase;
        font-weight: bold;
    }
    
    [class^='cp_g_date_'] {
        position: absolute;
        left: 0;
        top: -20px;
        color: #fff;
        width: 80px;
        text-align: center;
        background: #1c8d0b;
        padding: 2px 10px;
        font-size: 11px;
        font-weight: bold;
        border-radius: 3px;
        box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.09);
    }
    
    .cp_g_in-progress [class^='cp_g_date_'] {
        background: #a0c441;
    }
    
    .cp_g_pending [class^='cp_g_date_'] {
        background: #a2a2a2;
    }
    
    .cp_g_date_start {
        left: -3em;
    }
    
    .cp_g_date_start:after {
        content: " ";
        position: absolute;
        right: 3.5em;
        bottom: -4px;
        border-top: 6px solid #1c8d0b;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-bottom: none;
    }
    
    .cp_g_date_end {
        top: initial;
        left: initial;
        right: -3em;
        bottom: -20px;
    }
    
    .cp_g_date_end:after {
        content: " ";
        position: absolute;
        right: 30px;
        top: -4px;
        border-top: none;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-bottom: 6px solid #1c8d0b;
    }
    
    .cp_g_bar.cp_g_pending .cp_g_date_start:after {
        border-top: 6px solid #a2a2a2;
    }
    
    .cp_g_bar.cp_g_pending .cp_g_date_end:after {
        border-bottom: 6px solid #a2a2a2;
    }
    
    .cp_g_bar.cp_g_in-progress .cp_g_date_start:after {
        border-top: 6px solid #a0c441;
    }
    
    .cp_g_bar.cp_g_in-progress .cp_g_date_end:after {
        border-bottom: 6px solid #a0c441;
    }
    
    /*.cp_g_bar.cp_g_in-progress .cp_g_date_start:after,*/
    /*.cp_g_bar.cp_g_in-progress .cp_g_date_end:after {*/
    /*    border-color: #a0c441;*/
    /*}*/
    @media (max-width: 1028px) {
    
        .cp_g_static-columns,
        .cp_g_scrollable-gantt {
            display: none;
        }
    
        .cp_g_container {
            margin: 20px 3em;
            grid-template-columns: 1fr;
            margin-left: 8%;
            margin-right: 8%;
        }
    
        .cp_g_header {
            margin: 20px;
            margin-left: 8%;
            margin-right: 8%;
        }
    
        .cp_g_mobile_view {
            display: grid;
            column-gap: 1.5em;
            grid-template-columns: 1fr 1fr;
        }
    }
    
    @media (max-width: 700px) {
        .cp_g_mobile_view {
            grid-template-columns: 1fr;
        }
    }
    
    
    
    
    .cp_card_container {
        width: 96vw;
        /*    margin-top:50px;*/
        margin-bottom: 30px;
    /*    overflow-x: hidden;*/
        min-height: 200px;
        position: relative;
        padding-bottom: 5px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .cp_card_container_blue {
        width: 100vw;
        /*    margin-top:50px;*/
        margin-bottom: 30px;
        overflow-x: hidden;
        min-height: 200px;
        position: relative;
        padding-bottom: 5px;
        background-image: linear-gradient(0deg, #f6f6f6 0%, #eef0ff 100%) !important;
    }
    
    .cp_slugs {
        display: block;
        padding: 0;
        margin: 0;
        margin-top: 10px;
        position: absolute;
        width: 100%;
    }
    
    [class^="cp_slug"]:not(.cp_slugs) {
        opacity: 1;
        mix-blend-mode: normal;
        text-align: center;
        background-color: transparent;
        background-image: linear-gradient(260deg, rgb(195, 235, 91) 0%, rgb(87, 192, 70) 100%);
        background-position: center center;
        background-repeat: repeat;
        background-size: cover;
        border-radius: 99px;
        border-width: 0px;
        border-color: rgb(140, 140, 140);
        border-style: solid;
        padding: 0px;
        color: rgb(255, 255, 255);
        width: 120px;
        height: 39px;
        position: absolute;
        z-index: 1;
    }
    
    .cp_slug_blue {
        background-image: linear-gradient(260deg, #5ba3e8 0%, #4546c1 100%) !important;
    }
    
    .cp_slug_blue:nth-child(1) {
        top: 15px;
        left: -68px;
    }
    
    .cp_slug_blue:nth-child(2) {
        top: 15px;
        left: 50%;
        width: 70%;
    }
    
    .cp_slug_blue:nth-child(3) {
        top: 56px;
        left: 3%;
        width: 75%;
    }
    
    [class^="cp_slug"].cp_slug_extra {
        display: none;
    }
    
    .cp_slug:nth-child(1) {
        left: 10px;
        top: 30px;
        min-width: 120px;
        width: 9%;
    }
    
    .cp_slug:nth-child(2) {
        top: 30px;
        right: -88px;
    }
    
    .cp_slug:nth-child(3) {
        top: 71px;
        left: -45px;
    }
    
    .cp_slug:nth-child(4) {
        top: 71px;
        left: 30%;
        width: 70.4%;
    }
    
    .cp_slug:nth-child(5) {
        top: 112px;
        left: 3%;
        width: 47%;
    }
    
    .cp_slug_extra:nth-child(6) {
        left: 50%;
        top: 153px;
        min-width: 120px;
        width: 31%;
    }
    
    .cp_slug_extra:nth-child(7) {
        top: 153px;
        left: -88px;
    }
    
    .cp_slug_extra:nth-child(8) {
        top: 153px;
        left: 10%;
    }
    
    .cp_slug_extra:nth-child(9) {
        top: 194px;
        left: 74%;
        width: 23%;
    }
    
    .cp_slug_extra:nth-child(10) {
        top: 194px;
        left: 3%;
        width: 47%;
    }
    
    .cp_slug_extra:nth-child(11) {
        top: 235px;
        left: -6%;
        width: 112%;
    }
    
    .cp_slug_extra:nth-child(12) {
        top: 235px;
        left: -6%;
        width: 112%;
    }
    
    .cp_slug_extra:nth-child(13) {
        top: 276px;
        right: 6%;
        width: 10%;
    }
    
    .cp_slug_extra:nth-child(14) {
        top: 316px;
        left: -1%;
        width: 14%;
    }
    
    .cp_slug_extra:nth-child(15) {
        top: 357px;
        left: 22%;
        width: 12%;
    }
    
    .cp_slug_extra:nth-child(16) {
        top: 398px;
        left: -9%;
        width: 12%;
    }
    
    .cp_slug_extra:nth-child(17) {
        top: 398px;
        left: 6%;
        width: 91%;
    }
    
    .cp_slug_extra:nth-child(18) {
        top: 439px;
        left: 50%;
        width: 42%;
    }
    
    .cp_slug_extra:nth-child(19) {
        top: 480px;
        left: 18%;
        width: 27%;
    }
    
    .cp_slug_extra:nth-child(20) {
        top: 521px;
        left: 2%;
        width: 27%;
    }
    
    .cp_cardlist {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 2.5em;
    }
    
    .cp_card {
        background: #fff;
        box-shadow: 3px 8px 13px 6px rgba(0, 0, 0, 0.04);
        /*border: 1px solid #acacac;*/
        border-radius: 5px;
        padding: 25px 31px;
        z-index: 2;
    }
    
    .cp_card h3 {
        font-feature-settings: "liga"0;
        font-size: 14px !important;
        font-style: normal;
        font-weight: bold;
        margin: 0;
        padding: 0;
        margin-bottom: 20px;
    }
    
    .cp_card.cp_card_out {
        display: grid;
        grid-template-columns: 1fr 85px;
        column-gap: 1em;
        align-items: center;
    }
    
    .cp_card_right {
        text-align: center;
    }
    
    .cp_card.cp_card_out h3 {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .cp_card.cp_card_out h2 {
        font-size: 19px;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px;
    }
    
    .cp_card.cp_card_out .cp_card_link {
        text-transform: uppercase;
        color: #6161c9;
        cursor: pointer;
        font-weight: bold;
        margin: 10px 0 0 0;
    }
    
    .cp_card.cp_card_out a {
        text-transform: uppercase;
        color: #6161c9;
        cursor: pointer;
        font-weight: bold;
        margin: 10px 0 0 0;
        text-decoration: none;
    }
    
    .cpversion .cp_rounder,
    .cp_card .cp_rounder,
    .cp_card .cp_1210score {
        border: 1px solid #dedede;
        border-radius: 18px;
        padding: 0 15px;
        margin: 15px 0;
    }
    
    .cp_card .cp_rounder {
        display: grid;
        grid-template-columns: 3fr 5fr;
        align-items: center;
        padding: 0 5px;
        border-radius: 30px;
        min-height: 54px;
    }
    
    .esg-btn-pill {
        mix-blend-mode: normal;
        text-align: center;
        background-color: transparent;
        background-image: linear-gradient(260deg, rgb(195, 235, 91) 0%, rgb(87, 192, 70) 100%);
        background-position: center center;
        background-repeat: repeat;
        background-size: cover;
        border-radius: 99px;
        border: none;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 13px;
        text-transform: uppercase;
        height: 40px;
        padding: 0 14px;
        white-space: nowrap;
    }
    
    .cp_ss_box label {
        text-transform: uppercase;
        font-weight: bold;
        color: #000;
    }
    
    .esg-btn-pill.cp_green_pill {
        background-image: linear-gradient(260deg, rgb(87, 192, 70) 0%, rgb(195, 235, 91) 100%);
    }
    
    .esg-btn-pill.cp_orange_pill {
        background-image: linear-gradient(260deg, #ed7911 0%, #f0b634 100%);
    }
    
    .esg-btn-pill.cp_red_pill {
        background-image: linear-gradient(260deg, #d43636 0%, #ff6a6b 100%);
    }
    
    .esg-btn-pill.cp_purple_pill {
        background-image: linear-gradient(260deg, rgb(127 22 198) 0%, rgb(226 175 228 / 85%) 100%);
    }
    
    .cp_card .cp_1210score {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
    
    .cp_card .cp_1210score>div {
        text-align: center;
        padding: 14px 8px;
        font-weight: bold;
        font-size: 13px;
        cursor: pointer;
    }
    
    .cp_card .cp_1210score > div:nth-child(1):hover {
        color: #ff585f; /* Red */
    }
    .cp_card .cp_1210score > div:nth-child(2):hover {
        color: #ff7a48; /* Reddish Orange */
    }
    .cp_card .cp_1210score > div:nth-child(3):hover {
        color: #ff9a30; /* Orange */
    }
    .cp_card .cp_1210score > div:nth-child(4):hover {
        color: #ffb81b; /* Yellow-Orange */
    }
    .cp_card .cp_1210score > div:nth-child(5):hover {
        color: #ffd400; /* Yellow */
    }
    .cp_card .cp_1210score > div:nth-child(6):hover {
        color: #e6d400; /* Light Yellow-Green */
    }
    .cp_card .cp_1210score > div:nth-child(7):hover {
        color: #c9d423; /* Light Green-Yellow */
    }
    .cp_card .cp_1210score > div:nth-child(8):hover {
        color: #a5d445; /* Greenish Yellow */
    }
    .cp_card .cp_1210score > div:nth-child(9):hover {
        color: #7fc446; /* Green */
    }
    .cp_card .cp_1210score > div:nth-child(10):hover {
        color: #57c046; /* Final Green */
    }
    
    
    .cp_card .esg-btn-textual:hover {
        color: #57c046;
    }
    
    .cp_card small {
        color: #bbbbbb;
        font-family: 'Montserrat', sans-serif;
    }
    
    .cp_card p {
        font-size: 13px !important;
        color: #686868;
    }
    
    .cp_succ_score {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 3em;
        align-items: center;
    }
    
    .cp_ss_box .material-icons {
        display: block;
        padding: 10px 0;
    }
    /*@media (max-width:1240px){
        div[data-sname="ThreeUpSection"],.cp_cardlist {
            width:95vw;
        }
    }*/
    @media (max-width:1150px) {
        .cp_cardlist {
            grid-template-columns: 1fr;
            grid-row-gap: 1.5em;
        }
    
        .cp_slug.cp_slug_extra {
            display: block;
        }
    }
    
    
    
    
    .ug_table {
        margin-left: 3em;
        margin-right: 3em;
    }
    
    .ug_table .ug_table_row {
        display: grid;
        grid-template-columns: 30px 30px 7fr 1fr 1fr 1fr 1fr 1fr 30px 30px 30px;
        column-gap: 0.8em;
    }
    
    .ug_table .ug_table_head .ug_table_row {
        align-items: center;
    }
    
    .ug_table .ug_table_body .ug_table_row {
        border-bottom: 1px solid #ededed;
    }
    
    .ug_table .ug_table_head {
        font-size: 13px;
        font-weight: bold;
        border-bottom-width: 2px;
        border-bottom-style: solid;
    }
    
    .ug_table .ug_table_body {
        font-size: 13px;
    }
    
    .ug_table .ug_table_cell {
        padding: 0.9em 0;
    }
    
    .ug_table .ug_data {}
    
    .ug_table .ug_icon {
        justify-self: center;
    }
    
    .ug_table .ug_table_head .ug_table_cell {}
    
    .ug_table .ug_table_body .ug_table_cell {}
    
    .ug_table .ug_table_head .ug_data {}
    
    .ug_table .ug_table_body .ug_icon {}
    
    .ug_table .ug_table_body .ug_icon .material-icons {
        color: #acacac;
    }
    
    .ug_table .ug_check {
        width: 22px;
        height: 22px;
        border: 2px solid #ddd;
        border-radius: 3px;
        text-align: center;
    }
    
    .ug_table .ug_check .material-icons {
        font-size: 19px;
        font-weight: bold;
        padding: 0;
        display: none;
    }
    
    .ug_table .ug_check.selected .material-icons {
        display: block;
    }
    
    .ug_table .ug_data_name .esg-pcolor-fc {
        font-weight: 500;
        cursor: pointer;
    }
    
    .ug_table .ug_data_clamp.ugclosed {
        display: -webkit-box !important;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .ug_table .ug_table_body .ug_table_cell.ug_data_name_col {
        display: grid;
        grid-template-columns: 20px 1fr;
        column-gap: 1em;
    }
    
    .ug_table .ug_table .ug_data_name {
        /*    padding-left: 10px;*/
    }
    
    .ug_table .ug_drag,
    .ug_table .ug_data_clamp,
    .ug_table .ug_action,
    .ug_table .ug_check,
    .ug_table .ug_dropcon {
        cursor: pointer;
    }
    
    .ug_table .ug_table_row.ug_open .ug_dropcon .material-icons {
        transform: rotate(90deg);
    }
    
    .ug_table .ug_drag:hover .material-icons,
    .ug_table .ug_action:hover .material-icons {
        color: #8a8a8a;
    }
    
    .ug_table .ug_table_child_1 .ug_data_name_col {
        padding-left: 1em;
    }
    
    .ug_table .ug_table_child_2 .ug_data_name_col {
        padding-left: 2em;
    }
    
    .ug_table .ug_table_child_3 .ug_data_name_col {
        padding-left: 3em;
    }
    
    .ug_table .ug_table_child_4 .ug_data_name_col {
        padding-left: 4em;
    }
    
    .ug_table .ug_table_child_5 .ug_data_name_col {
        padding-left: 5em;
    }
    
    .ug_table .ug_table_child_6 .ug_data_name_col {
        padding-left: 6em;
    }
    
    .ug_page_header {
        display: grid;
        grid-template-columns: 1fr 200px;
        padding: 9px 33px;
        margin-bottom: 10px;
    }
    
    .ug_page_header h3 {
        font-size: 23px;
    }
    
    .ug_command_bar {
        background: #f8f8f8;
        width: 100%;
        height: 62px;
        margin-bottom: 25px;
        border: 1px solid #ededed;
        border-left: none;
        border-right: none;
    }
    
    .ug_ph_button {
        text-align: right;
        padding-top: 20px;
    }
    
    
    
    
    .pui-sns {
        margin-top: 80px;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 80px;
    }
    
    .pui-sns-search>h2 {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
    .pui-sns button {
        border-radius: 0 !important;
    }
    
    .pui-sns .pui-inputWIcon {
        position: relative;
    }
    
    .pui-sns input.pui-input {
        border: 1px solid #dbdbdb;
        padding: 14px 10px;
        width: 100%;
        padding-right: 20px;
        font-size: 13px;
    }
    
    .pui-sns input.pui-input:focus {
        border-color: #b2b2b2;
    }
    
    .pui-sns .pui-inputWIcon .google-icon {
        position: absolute;
        cursor: pointer;
        right: 12px;
        top: 14px;
    }
    
    .pui-sns .pui-inputWIcon .material-icons {
        color: #acacac;
        font-size: 18px;
    }
    
    .pui-sns .pui-inputWIcon .material-icons:hover {
        color: #888888;
    }
    
    .pui-sns .pui-error {
        margin-top: 10px;
        border: 1px solid #dbdbdb;
        padding: 14px 25px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 120px;
        grid-gap: 10px;
        align-items: center;
        background: #fff;
    }
    
    .pui-sns .pui-result {
        margin-top: 30px;
        border: 1px solid #dbdbdb;
        padding: 14px 25px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-gap: 10px;
        align-items: center;
        background: #fff;
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.07);
    }
    
    .pui-sns .pui-result.unmatched {
        grid-template-columns: 1fr;
    }
    
    .pui-sns .pui-result .pui-result-data {
        display: grid;
        grid-template-columns: 82px 1fr;
        grid-gap: 30px;
        align-items: center;
    }
    
    .pui-sns .pui-result .pui-result-data img {
        width: 80%;
    }
    
    .pui-sns .pui-result .pui-result-actions {
        width: 200px;
    }
    
    .pui-sns .pui-result .pui-result-actions button {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .pui-sns .pui-result .pui-result-actions button {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .pui-sns .pui-mismatchdata {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-gap: 10px;
        font-size: 13px;
        margin: 20px 0;
    }
    
    .pui-mismatchdata label {
        font-weight: bold;
    }
    
    .pui-sns .pui-result-mismatch p {
        font-weight: normal;
    }
    
    .pui-sns .pui-result .pui-result-actions {
        width: 100%;
    }
    
    .pui-sns .unmatched button {
        width: 200px !important;
        margin-right: 30px;
    }
    
    .pOBSpin {
        animation-name: pOBSpinAnim;
        animation-duration: 900ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    .pui-result-mismatch>p>.material-icons {
        vertical-align: middle;
    }
    
    .pOBSImgHolder {
        width: 65px;
        height: 65px;
        background: #efefef;
    }
    
    @keyframes pOBSpinAnim {
        from {
            transform: rotate(0deg);
        }
    
        to {
            transform: rotate(-360deg);
        }
    }
    
    .pOBS_searchForm {
        display: grid;
        grid-template-columns: 2fr 2fr 1fr;
        grid-gap: 10px;
        padding: 0 15px;
    }
    
    .pOBS_newFform {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        padding: 0 15px;
    }
    
    .pOBS_searchForm button {
        float: right;
        margin-top: 25px;
        margin-right: 40px;
    
    }
    
    .pOBSErrorInput {
        border-color: #c00;
    }
    
    .ug_page_header {
        margin-top: 50em;
    }
    
    @keyframes pulse {
        0% {
            background-color: rgba(165, 165, 165, 0.1);
        }
    
        50% {
            background-color: rgba(165, 165, 165, 0.25);
        }
    
        100% {
            background-color: rgba(165, 165, 165, 0.1);
        }
    }
    
    .background-masker {
        width: 100%;
        height: 19px;
        background: rgba(165, 165, 165, 0.1);
        animation: pulse 4s infinite ease-in-out;
    }
    
    .esg-btn-textual {
        font-family: 'Montserrat', sans-serif;
        cursor: pointer;
        font-size: 11px !important;
        text-transform: uppercase;
        font-weight: 600;
        border: none;
        padding: 10px 20px;
        outline: none;
        text-align: center;
        background: transparent;
        color: #acacac;
        text-decoration: none;
        transition-timing-function: ease-in-out;
        transition-duration: 0.2s;
    }
    
    .esg-btn-textual .material-icons {
        font-size: 18px;
        vertical-align: middle;
        padding: 0 2px;
        line-height: 1;
    }
    
    
    
    .homelink,
    .homelink a,
    .navbar-nav li a {
        font-weight: bold;
        text-transform: uppercase;
    }
    
    body {
        background: #ffffff;
    }
    
    
    .expsitefooter {
        background: #1a1a1a;
        color: #a2a2a2;
    
    }
    
    .cp_logos {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 20px;
    }
    
    .cp_logos img {
        max-width: 160px;
    }
    
    .cp_ft_text {
        color: #a2a2a2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 20px;
        padding-top: 40px;
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #303030;
    }
    
    div[data-sname="SuccessTop"] {
        overflow-x:hidden;
        padding: 0;
        margin:0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    div[data-sname="CCOConnect"] {
        padding: 45px 50px 30px 30px;
        gap: 30px;
        border-radius: 0px;
        border-style: none;
        width: 50vw;
        margin-left: auto;
        margin-right: auto;
                 width: 85vw;
         /* border: 1px solid #acacac; */
         border-radius: 5px;
        margin-top: -1vw;
        margin-bottom: -3vw;
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    
    .card_support {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
    }
    
    .card_support h2 {
        margin-bottom: 22px;
        margin-top: 50px;
        text-align: left;
        padding: 0;
    }
    
    .card_support .card_container {
        /*display: flex;
        justify-content: center;
        gap: 30px;
        width: 100%;*/
    }
    
    .card_line1 {
        display: flex;
        justify-content: center;
        gap: 30px;
        width: 100%;
    }
    
    .card_line2 {
        display: flex;
        justify-content: center;
        gap: 30px;
        width: 100%;
    }
    
    .card_support .card_container .cp_card {
                              
                          
                 width: 415px;
         /* max-width: calc((100% - 30px) / 2); */
         /* height: auto; */
        min-height: 165px;
        border: 1px solid #dbdbdb;
        border-radius: 3px;
        background-color: #ffffff;
        background-size: cover;
        box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.05);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
         button.jv_action_button,
     .card_support .card_container .cp_card button {
         /* width: 110px; */
         /* height: 40px; */
         /* padding: 0px 0px; */
         /* border-radius: 3px; */
         /* background-color: #57c046; */
         /* font-family: Montserrat; */
         /* font-size: 11px; */
         /* color: #ffffff; */
         /* text-decoration: none solid rgb(255, 255, 255); */
         /* text-align: center; */
         /* font-weight: bold; */
     }
    button.jv_action_button {
        width: auto;
        text-transform: uppercase;
    }
    button.opencase {
        width:110px;
    }
    .jv_case_header {
        width:100%;
        padding: 15px 0 0 0;
        text-align:right;
    }
    div[data-bname="ConnectWithCCO"],
    div[data-bname="AccountHealthCase"] {
        flex: 1 !important;
        max-width: 50% !important;
        box-shadow: 3px 8px 13px 6px rgba(0, 0, 0, 0.04) !important;
        border-radius: 5px !important;
        padding: 25px !important;
        background: #fff !important;
    }
    
    div[data-sname="SectionHeaders"] {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    div[data-sname="ThreeUpSection"] {
        align-items:flex-start !important;
        .simple-list{
            padding:0px;
            table tbody tr{
                border:0px;
            }
        }
    }
    
    div[data-sname="ThreeUpSectionSSPage"] {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        align-items:flex-start !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        .simple-list{
            padding:0px;
        }
    }
    
    .pagination > .active > a{
        color:white;
    }
    
    
    
    
    
    
    .rel_det_parent {
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .rel_det_back {
        min-width: 200px;
        width:auto;
        display:inline-block;
        margin-bottom: 20px;
    }
    .rel_det_back .google-icon {
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
    }
    .rel_det_back p {
        display: inline-block;
    }
    .rel_det_back button {
        cursor: pointer;
    }
    .rel_det_header {
        display:grid;
        grid-template-columns: 250px 1fr;
        column-gap: 2em;
        align-items: center;
    }
    
    .rel_det_header h2.background-masker {
        height: 25px;
        margin-bottom:0 !important;
        display: inline-block;
        min-width:220px;
        width:auto;
    }
    .rel_det_patchbutton {
        
    }
    .rel_det_patchbutton button {
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        font-size: 14px;
        background: #fff;
    }
    .rel_det_title h2 {
    
    }
    .rel_det_header button{
        height:45px;
        border:1px solid #dedede;
        border-radius: 5px;
        padding: 10px 20px;
        outline: none;
        text-align: center;
    }
    .rel_det_header button.background-masker {
        max-width: 300px;
        background: #acacac;
    }
    .rel_det_real .rel_det_desc p {
        margin-top:30px;
        line-height: 21px;
        font-size: 13px;
    }
    .rel_det_table p.background-masker,
    .rel_det_desc p.background-masker {
            display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        unicode-bidi: isolate;
    }
    .rel_det_tabs {
        display:grid;
        grid-template-columns: min-content min-content min-content;
        column-gap: 1em;
        align-items: center;
        margin-top:60px;
    }
    .rel_det_tabs .rel_det_tab.background-masker {
        height:40px;
        max-width:150px;
        min-width: 150px;
    }
    .rel_det_tabs .rel_det_tab {
        padding: 15px 0px;
        margin-right: 10px;
        text-transform: uppercase;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        white-space: nowrap;
    }
    .rel_det_tabs .rel_det_tab:not(.selected) {
        cursor: pointer;    
    }
    .rel_det_tabs .rel_det_tab.selected {
        border-bottom: 2px solid #57c046;
    }
    .rel_det_filters {
        border-top:1px solid #dbdbdb;
        border-bottom:1px solid #dbdbdb;
        min-height: 60px;
        display:grid;
        grid-template-columns: 2fr 2fr 2fr 1fr;
        column-gap: 1em;
    }
    .rel_det_filters > div {
        padding:10px;
        height:40px;
    }
    .rel_det_filters > div div.background-masker {
        height:40px;
    }
    .rel_det_table table {
        width:100%;
    }
    .rel_det_table table thead tr th {
        border-bottom: 1px solid #57c046;
        padding-left:10px;
        padding-right:10px;
    }
    .rel_det_table table tbody tr td {
        border-bottom: 1px solid #dedede;
        padding-left:10px;
        padding-right:10px;
    }
    .rel_det_real {
        display:none;
    }
    .page-back-button:hover .google-icon,
    .page-back-button:hover .p {
        color: #000;
    }
    .cp_license_link {
        cursor: pointer;
    }
    .rel_det_real .rel_det_tab_contents {
        display: none;
    }
    .rel_det_real .rel_det_tab_contents.selected {
        display: block;
    }
    .rel_det_real .rel_det_how {
        margin-top:30px;
    }
    .rel_det_real .filterrow {
        display:grid;
        grid-template-columns: 1fr 200px;
        column-gap: 1em;
        height:60px;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
        margin-bottom: 20px;
    }
    .rel_det_real .filterrow .filter_left {
        display: grid;
        grid-template-columns: 38px 55px auto;
        column-gap: 1em;
        height: 50px;
        align-items: center;
        justify-content: left;
    }
    .rel_det_real .rel_det_bugs .filterrow .filter_left {
        grid-template-columns: auto auto auto;
        justify-content: space-between;
    }
    .rel_det_real .rel_det_bugs .filterrow .filter_left .filter_prod {
        display: grid;
        grid-template-columns: 38px 55px auto;
        column-gap: 1em;
        height: 50px;
        align-items: center;
        justify-content: left;
    }
    .rel_det_real .rel_det_bugs .filterrow .filter_left .filter_feat, 
    .rel_det_real .rel_det_bugs .filterrow .filter_left .filter_ver {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 1em;
        height: 50px;
        align-items: center;
        justify-content: left;
    }
    .rel_det_real .filterrow .filter_right {
                 border-left: 1px solid #dbdbdb;
         display: grid;
         /* grid-template-columns: 50px auto; */
         align-items: center;
        height: 60px;
        padding-left: 20px;
    }
    .rel_det_real .table-container th {
        text-align: left;
        font-weight: bold;
        padding: 10px;
        border-bottom: 1px solid #cbdca9;
    }
    .rel_det_real .table-container td {
        text-align: left;
        padding: 10px;
        vertical-align: top;
    }
    .rel_det_real .table-container td i.material-icons {
        display: inline-block;
        font-size: 14px;
        height: 5px;
        padding-left: 6px;
        color: #57c046;
        cursor: pointer;
        margin-top: -2px;
    }
    .rel_det_real .table-container table {
        width:100%;
    }
    .rel_det_real .form-control {
        background-color: #fff;
        border-color: #ececec;
        border-width: 1px;
        border-radius: 0;
        -webkit-appearance: none;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        line-height: 1.42857143;
        color: #555;
        border-radius: 0;
        /*        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;*/
        -webkit-appearance: none;
        font-size: 0.935em;
    }
    select.form-control {
        padding-right: 22px !important;
    }
    select.form-control:after {
        content: ' ';
        position: absolute;
        right: 10px;
        top: 14px;
        border: 5px solid transparent;
        width: 10px;
        height: 10px;
        border-top-color: #555;
        cursor: pointer;
        pointer-events: none;
        z-index: 2;
    }
    
    
    /* inputs */
    
    .esg-searchgroup {
        position: relative;
    }
    
    .esg-searchgroup .form-control {
        border-color: #f2f2f2;
        cursor: pointer;
    }
    
    .filter_left .esg-searchgroup .input-group-addon {
        position: absolute;
        padding: 6px 6px;
        font-size: 14px;
        font-weight: normal;
        line-height: 1;
        color: #a8a8a8;
        text-align: center;
        top: 2px;
        right: -1px;
        border: none;
        cursor: pointer;
    }
    .filter_right .filter_print {
        display: grid;
        grid-template-columns: 36px auto;
        align-items: center;
        cursor: pointer;
    }
    .esg-searchgroup.esg-cleangroup .input-group-addon {
        border-left: 0 !important;
    }
    
    .esg-searchgroup.esg-cleangroup .input-group-addon .material-icons {
        font-size: 19px;
    }
    
    .esg-searchgroup .form-control:focus {
        border-color: #57c046;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
    
    .esg-searchgroup .form-control:hover+.input-group-addon {
        border-color: #e0e0e0
    }
    
    .esg-searchgroup .form-control:focus+.input-group-addon {
        border-color: #57c046;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
    
    .esg-searchterm {
        display: inline-block;
        padding: 4px 13px;
        border: 1px solid #ddd;
        border-radius: 5px;
        line-height: 26px;
        margin: 0 0 0 12px;
        background: #fff
    }
    
    .esg-searchremoved {
        display: none;
    }
    
    .esg-lookupresults,.esg-valuebased {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        min-width: 170px;
        background: #fff;
        z-index: 10;
        max-height: 300px;
        overflow-x: scroll;
        border: 1px solid #efefef;
        margin-bottom: 20px;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        max-width: 350px;
    }
    .filter_right .esg-lookupresults {
        left: auto;
        right: 0;
        min-width: 220px;
    }
    .esg-dropop.selected,
    .esg-dropop.selected p{
        background: #57c046;
        color: #fff;
        font-weight: bold;
    }
    .esg-dropop.selected strong{
        color: #fff;
    }
    
    .esg-dropop {
        border-bottom: 1px solid #efefef;
        padding: 8px 10px;
        color: #5f5f5f;
        background: #fff;
        cursor: pointer;
        text-align: left;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    [data-type="REFERENCE"] .esg-dropop {
        flex-wrap: wrap;
    }
    
    .esg-dropop:not(.selected):hover {
        color: #0a0a0a;
        background: #f7f7f7;
    }
    
    .esg-dropop p {
        line-height: 17px;
        display: inline-block;
        padding: 0;
        margin: 0;
        font-family: 'Roboto',sans-serif;
        font-size: 13px;
    }   
    .esg-searchgroup .esg-lookupresults{
        display: none;
    }   
    .esg-searchgroup.opened .esg-lookupresults{
        display: block;
    }
    .ec_no_print {
    
    }
    .ec_only_print {
        display: none;
    }
            
    @media print {
        .contentRendered > .ect-flex {
            padding:0;
        }
        nav,
        .navbar,
        .rel_det_back, 
        .rel_det_tabs,
        .filterrow,
        .ec_no_print {
            visibility: hidden;
            height:0;
            padding:0;
            margin:0;
            display: none;
        }
        .ec_only_print {
            display: block !important;
        }
        H2.rel_det_table_title {
            padding: 0;
            margin: 0;
            margin-top: 25px;
        }
    }
    .record-detail .detail-action {
        display: none;
    }
            
    
      
          
    
    /* Add responsive padding adjustments */
    @media (max-width: 1200px) {
        .card_support .card_container .cp_card {
            padding: 15px;
        }
    }
    
    @media (max-width: 768px) {
        .card_support .card_container {
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }
        
        .card_support .card_container .cp_card {
            width: 100%;
            max-width: 100%;
            padding: 20px;
        }
    }
    
    .skeleton {
        position: relative;
        overflow: hidden;
    }
    
    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: loading 1.5s infinite;
    }
    
    .skeleton-icon {
        width: 34px;
        height: 34px;
        background: #eee;
        margin: 12px 0 17px;
        border-radius: 4px;
    }
    
    .skeleton-title {
        width: 60%;
        height: 24px;
        background: #eee;
        margin-bottom: 8px;
        border-radius: 4px;
    }
    
    .skeleton-text {
        width: 80%;
        height: 18px;
        background: #eee;
        margin-bottom: 18px;
        border-radius: 4px;
    }
    
    .skeleton-button {
        width: 40%;
        height: 36px;
        background: #eee;
        border-radius: 4px;
    }
    
    @keyframes loading {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    /* Spinner Loading Styles */
    .loading-indicator {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        text-align: center;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top-color: var(--ect-primary);
        animation: spin 1s ease-in-out infinite;
        margin-bottom: 1rem;
    }

    /* .spinner,
    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #57c046;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 16px;
    } */

    .loading-text {
        color: #666;
        font-size: 16px;
        margin-top: 8px;
        text-align: center;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
            
          
    .enh_namecol {
        min-width: 175px;
        display: grid;
        grid-template-columns: 1fr 34px;
    }
          
    .tooltip {
      position: absolute;
      z-index: 1070;
      display: block;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 1.4;
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .tooltip.in {
      filter: alpha(opacity=90);
      opacity: .9;
    }
    .tooltip.top {
      padding: 5px 0;
      margin-top: -3px;
    }
    .tooltip.right {
      padding: 0 5px;
      margin-left: 3px;
    }
    .tooltip.bottom {
      padding: 5px 0;
      margin-top: 3px;
    }
    .tooltip.left {
      padding: 0 5px;
      margin-left: -3px;
    }
    .tooltip-inner {
      max-width: 350px;
      padding: 3px 8px;
      color: #fff;
      text-align: left;
      text-decoration: none;
      background-color: #000;
      border-radius: 4px;
    }
    .tooltip-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
    .tooltip.top .tooltip-arrow {
      bottom: 0;
      left: 50%;
      margin-left: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000;
    }
    .tooltip.top-left .tooltip-arrow {
      right: 5px;
      bottom: 0;
      margin-bottom: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000;
    }
    .tooltip.top-right .tooltip-arrow {
      bottom: 0;
      left: 5px;
      margin-bottom: -5px;
      border-width: 5px 5px 0;
      border-top-color: #000;
    }
    .tooltip.right .tooltip-arrow {
      top: 50%;
      left: 0;
      margin-top: -5px;
      border-width: 5px 5px 5px 0;
      border-right-color: #000;
    }
    .tooltip.left .tooltip-arrow {
      top: 50%;
      right: 0;
      margin-top: -5px;
      border-width: 5px 0 5px 5px;
      border-left-color: #000;
    }
    .tooltip.bottom .tooltip-arrow {
      top: 0;
      left: 50%;
      margin-left: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: #000;
    }
    .tooltip.bottom-left .tooltip-arrow {
      top: 0;
      right: 5px;
      margin-top: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: #000;
    }
    .tooltip.bottom-right .tooltip-arrow {
      top: 0;
      left: 5px;
      margin-top: -5px;
      border-width: 0 5px 5px;
      border-bottom-color: #000;
    }
    .cp_succ_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Override grid layout when centered class is applied */
    .cp_succ_grid--centered {
        display: flex !important;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr !important;
        min-height: 100px;
    }
    
    /* Center the content within the box */
    .cp_ss_box--centered {
        float: none;
        margin: 0 auto;
        grid-column: 1 / -1;
        justify-items: center;
    }
    
    .cp_coming_soon {
        text-align: center;
        width: 100%;
    }
    
    .cp_coming_soon p {
        font-size: 16px;
    }
    
    /* Ensure the success score container allows centering */
    .cp_succ_score {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cp_succ_score.cp_succ_grid--centered {
        grid-template-columns: 1fr;
    } 
    
    .esg-btn-textual.kilist_back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 16px 0px 17px 35px;
        font-size: 12px !important;
        line-height: 1;
        text-decoration: none;
        color: #acacac;
        font-weight: 600;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color 0.2s ease;
      }
    
    .esg-btn-textual.kilist_back:hover {
        color: #5f5f5f; /* Hover color */
        font-weight: 600;
    }
    
    /* Known Issues specific styles - inherit from release details but add customizations */
    .ki_parent {
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 0px 60px;
    }
    
    /* Known Issues inherit release details styling */
    .ki_real {
        /* Inherits all .rel_det_real styles */
    }
    
    /* Remove vertical line from filter bar for Known Issues */
    .ki_real .filterrow .filter_right {
        border-left: none !important;
    }
    
    /* Font family for Known Issues filter bar */
    .ki_real .filterrow {
        font-family: 'Roboto', sans-serif;
    }
    
    .ki_real .filterrow .filter_left {
        font-family: 'Roboto', sans-serif;
    }
    
    .ki_my_issues_label {
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        font-weight: normal;
        color: #555;
        cursor: pointer;
    }
    
    .ki_my_issues_checkbox {
        margin-right: 8px;
        cursor: pointer;
    }
    
    /* Ensure Known Issues table rows have proper styling */
    .ki_real .table-container tbody tr {
        border-bottom: 1px solid #dedede;
    }
    
    /* FAQ Page Specific Styles */
    .faq_parent {
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .faq_parent h2 {
        margin-bottom: 22px;
        margin-top: 0;
        text-align: center;
        padding: 0;
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        font-family: 'Montserrat', sans-serif;
    }
    
    .faq_parent .search-input-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 45px;
    }
    
    .faq_parent #faq-search-input {
        flex: 1;
        height: 45px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #2d3748;
        background-color: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        transition: border-color 0.2s ease;
    }
    
    .faq_parent #faq-search-input:focus,
    .faq_parent #faq-search-input:hover {
        border-color: #57c046;
        outline: none;
        box-shadow: none;
    }
    
    .faq_parent #faq-search-button {
        min-width: 120px;
        height: 45px;
        padding: 0 24px;
        font-size: 14px;
        white-space: nowrap;
        text-transform: uppercase;
    }
    
    /* FAQ Results */
    .faq_parent #faq-results-container {
        margin-top: 16px;
    }
    
    /* Responsive Design for FAQ */
    @media (max-width: 768px) {
        .faq_parent {
            padding: 16px;
            width: calc(100vw - 32px);
        }
    
        .faq_parent .search-input-row {
            flex-direction: column;
            gap: 12px;
        }
    
        .faq_parent #faq-search-button {
            width: 100%;
        }
    }
    
    .article-row {
        display: flex
    ;
        padding: 0;
        margin-bottom: 30px;
        align-items: flex-start;
        gap: 24px;
        max-width: 100%;
        cursor: pointer;
    }
    
    .article-content {
        flex: 1;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-width: calc(100% - 74px);
        padding-top: 4px;
    }
    
    .article-content:hover {
        text-decoration: none;
    }
    
    .article-content:hover h3 {
        color: #0076d6;
    }

    .article-content h3 {
        font-family: Roboto;
        font-size: 15px;
        color: #2d3748;
        line-height: 20px;
        margin: 0;
        font-weight: bold;
        transition: color 0.2s ease;
    }

    .article-content p {
        font-family: Roboto;
        font-size: 13px;
        color: #666;
        line-height: 18px;
        margin: 0;
    }

    /* FAQ Skeleton Loading Styles */
    .faq_parent .article-row .skeleton-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(165, 165, 165, 0.1);
        animation: pulse 4s infinite ease-in-out;
    }

    .faq_parent .article-content .skeleton-title {
        height: 20px;
        width: 70%;
        margin-bottom: 8px;
        background: rgba(165, 165, 165, 0.1);
        animation: pulse 4s infinite ease-in-out;
        border-radius: 4px;
    }

    .faq_parent .article-content .skeleton-text {
        height: 16px;
        width: 90%;
        background: rgba(165, 165, 165, 0.1);
        animation: pulse 4s infinite ease-in-out;
        border-radius: 4px;
    }
    
    
    
          
            
          
                    
                
            
    
            
          
            
          
            
          
            
          
            
          
                    
                
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
        
      
        
      
        
      
        /*endcustom*/