html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,details,menu,nav,section,summary{display:block}canvas{display:inline-block;vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:bold}h1{font-size:2em;margin:0.67em 0}small{font-size:80%}img{border:0}svg:not(:root){overflow:hidden}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,pre{font-family:monospace, monospace;font-size:1em}button,input{color:inherit;font:inherit;margin:0}button{overflow:visible}button{text-transform:none}button,html input[type="button"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}legend{border:0;padding:0}th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}img{vertical-align:middle}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}[role="button"]{cursor:pointer}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transform:translate(0, -25%);-ms-transform:translate(0, -25%);-o-transform:translate(0, -25%);transform:translate(0, -25%);-webkit-transition:-webkit-transform 0.3s ease-out;-o-transition:-o-transform 0.3s ease-out;transition:transform 0.3s ease-out}.modal.in .modal-dialog{-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}.modal-dialog{position:relative;width:auto;margin:10px;max-width: 100%}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,0.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,0.5);box-shadow:0 3px 9px rgba(0,0,0,0.5);outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-body{position:relative;padding:15px}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.5);box-shadow:0 5px 15px rgba(0,0,0,0.5)}}.modal-header:before,.modal-header:after{display:table;content:" "}.modal-header:after{clear:both}.hide{display:none !important}.show{display:block !important}.hidden{display:none;}

        body {
          font-family: "Source Sans 3", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
          font-size: 18px;
        }
        .icon {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;  /* Preferred icon size */
            display: inline-block;
            line-height: 1;
            text-transform: none;
            letter-spacing: normal;
            word-wrap: normal;
            white-space: nowrap;
            direction: ltr;

            /* Support for all WebKit browsers. */
            -webkit-font-smoothing: antialiased;
            /* Support for Safari and Chrome. */
            text-rendering: optimizeLegibility;

            /* Support for Firefox. */
            -moz-osx-font-smoothing: grayscale;

            /* Support for IE. */
            font-feature-settings: 'liga';
        }
        .btn {
            display: inline-block;
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            border-radius: 4px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }
        .btn:focus,.btn:active:focus,.btn.active:focus {
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px
        }
        .btn:hover,.btn:focus {
            text-decoration: none
        }

        html {
            font-size: 13px;
        }

        .innerbody {
            background-color: #e8eaf6
        }

        a, button, submit {
            transition: all .5s ease
        }

        .bg-light {
            background-color: #e2f2fd !important
        }

        .bgh-light {
            background-color: #fff8e1 !important
        }

        .bg-white {
            background-color: #fff
        }

        .red {
            color: red
        }

        .white {
            color: white !important
        }

        img {
            overflow: hidden;
            object-fit: contain
        }

        .text-center {
            text-align: center
        }

        .h1, h1 {
            font-size: 2.5rem
        }

        .h2, h2 {
            font-size: 2rem
        }

        .h3, h3 {
            font-size: 1.75rem
        }

        .h4, h4 {
            font-size: 1.5rem
        }

        .h5, h5 {
            font-size: 1.25rem
        }

        .h6, h6 {
            font-size: 1rem
        }

        .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
            margin-top: 0;
            margin-bottom: .5rem;
            font-weight: 500;
            line-height: 1.2
        }

        p, .p {
            font-size: 1em;
            font-weight: 400;
        }

        .p-4 {
            padding: 1.5rem;
        }

         .px-4 {
            padding-left: 1.5rem;
        }

         .px-4 {
            padding-right: 1.5rem;
        }

        .pt-4, .py-4 {
            padding-top: 1.5rem;
        }

        .pb-4, .py-4 {
            padding-bottom: 1.5rem;
        }

        .mr-4 {
            margin-right: 1.5rem;
        }

        .mb-4 {
            margin-bottom: 1.5rem;
        }

        .br1 {
            border-radius: .25rem;
        }

        .p-0 {
            padding: 0
        }

        .pt-1 {
            padding-top: .25rem
        }

         .px-2 {
            padding-left: .5rem
        }

         .px-2 {
            padding-right: .5rem
        }

        .pt-2 {
            padding-top: .5rem
        }

        .p-3 {
            padding: 1rem
        }

        .pl-3 {
            padding-left: 1rem
        }

         .py-3 {
            padding-top: 1rem
        }

         .py-3 {
            padding-bottom: 1rem
        }

        .m-auto {
            margin: auto
        }

        .m-0 {
            margin: 0
        }

        .ml-auto, .mx-auto {
            margin-left: auto
        }

         .mx-auto {
            margin-right: auto
        }

        .mt-auto, .my-auto {
            margin-top: auto
        }

        .mb-auto, .my-auto {
            margin-bottom: auto
        }

        .ml-1 {
            margin-left: .25rem
        }

         .my-1 {
            margin-top: .25rem
        }

        .mb-1, .my-1 {
            margin-bottom: .25rem
        }

        .ml-2, .mx-2 {
            margin-left: .5rem
        }

        .mr-2, .mx-2 {
            margin-right: .5rem
        }

        .mt-2, .my-2 {
            margin-top: .5rem
        }

        .mb-2, .my-2 {
            margin-bottom: .5rem
        }

         .my-3 {
            margin-top: 1rem
        }

        .mb-3, .my-3 {
            margin-bottom: 1rem
        }

        .d-flex, .c-flex, .c-flex {
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
        }

        .flex1 {
            flex: 1
        }

        .flex2 {
            flex: 2
        }

        .flex-s0 {
            flex-shrink: 0
        }

        .d-flex.column, .c-flex {
            flex-direction: column
        }

        .d-flex.wrap {
            flex-wrap: wrap;
        }

        @media (max-width: 575px) {
            .hide-m {
                display: none !important
            }
        }

        @media (min-width: 576px) {
            .hide-d {
                display: none !important
            }
        }

        @media (max-width: 767px) {
            .m-hide {
                display: none !important
            }
            .m-text-center {
                text-align: center
            }
        }

        @media (max-width: 767px) {
            .d-flex.m-column {
                flex-direction: column
            }
        }

        p {
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .flg {
            font-size: 1.2em;
        }

        .border-bottom {
            border-bottom: 1px solid #dee2e6;
        }

        .w-100 {
            width: 100% !important;
        }

        .p-rel {
            position: relative;
        }

        h1, h2, h3, h4, h5, h6 {
            margin-top: 0;
            margin-bottom: .5rem;
        }

        .row {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin: 0 !important;
        }

        .container {
            width: 100%;
            margin: auto;
        }

        /*@media (min-width: 768px){
        .container {
            max-width: 720px;
        }
        }*/
        @media (min-width: 992px) {
            .container {
                max-width: 960px;
            }
        }

        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }

        div.flexModal {
            display: none;
        }

        div.flexModal .modal-dialog {
            display: flex !important;
            margin: auto;
            width: auto;
        }

        div.flexModal .modal-dialog .modal-content {
            margin: auto;
            box-shadow: none;
        }

        #evidence_popup .modal-dialog {
            width: auto;
        }

        .fa.fa-star:before {
            content: "\2605";
        }

        .strong, strong, .st {
            font-weight: 500
        }

        .small {
            font-size: 0.9em;
            color: #888;
            font-weight: lighter;
        }

        .h2bl {
            font-size: 22px;
            font-weight: 500;
        }

        .h2bl > small {
            font-weight: 400;
        }

        a, button, submit {
            cursor: pointer
        }

        a.linkWText {
            color: #444;
            text-decoration: none
        }

        a.linkWText:hover .text {
            text-decoration: underline
        }

        .p {
            font-size: 1em;
            font-weight: 400;
            line-height: 1.5em
        }

        h1.p {
            font-size: 13px;
            font-weight: 400;
            margin-bottom: 0
        }

        .hul:hover {
            text-decoration: underline
        }

        a.linkWText.hu:hover {
            text-decoration: underline;
        }

        .uc {
            text-transform: capitalize;
        }

        .modal.in {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .btn {
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            font-size: 1em;
            font-weight: 400;
            text-align: center;
            padding: 0.4rem 2.2rem;
            box-shadow: none !important;
            outline: none !important;
        }

        .cp-theme-submit-btn {
            background: linear-gradient(to bottom, #ffe400, #ffc400);
            border: 1px solid #ffc400;
            color: #494949;
            font-weight: 600;
        }

        .cp-theme-submit-btn:hover {
            border: 1px solid #b97801;
        }

        @media (max-width: 991.98px) {
            .btn {
                padding: 0.4rem 1rem;
            }
        }

        div[onclick] {
            cursor: pointer;
        }

        .check-c > ul {
            padding-left: 1rem;
            list-style: none;
        }

        .check-c > ul > li {
            position: relative;
            padding-left: 15px;
        }

        .check-c > ul.check > li:before {
            content: '';
            padding: 8px;
            position: absolute;
            top: 3px;
            left: -10px;
            background: url(/images/checkmark.png) center no-repeat;
            background-size: contain;
        }
        .cap {
            text-transform: capitalize;
        }

        .upc {
            text-transform: uppercase;
        }

        a {
            color: #1720ec;
        }

        a.linkLight {
            color: inherit;
        }

        a.linkLight:hover {
            text-decoration: underline;
        }

        .close-modal {
            position: absolute;
            top: 0.4em;
            right: 0.5em;
            font-size: 20px;
            padding: 0px 8px;
            margin-right: 0;
            color: #999;
        }

        .ai-card {
            text-align: center;
            padding-left: 15px;
            margin-top: 15px;
            padding-top: 1px;
            font-size: 12px;
            border-radius: 2px;
            color: #fff !important;
            background: url(/images/ai-icon.svg) top 2px left 3px no-repeat, linear-gradient(to left, #5bc0e7, #2e3481);
            margin: 0;
            width: 90px;
            margin-bottom: 2px;
        }

        .modal-content {
            overflow: hidden;
        }

        @keyframes shake {
            10%, 90% {
                transform: translate3d(-1px, 0, 0);
            }

            20%, 80% {
                transform: translate3d(2px, 0, 0);
            }

            30%, 50%, 70% {
                transform: translate3d(-4px, 0, 0);
            }

            40%, 60% {
                transform: translate3d(4px, 0, 0);
            }
        }

        /* The typing effect */
        @keyframes typing {
            0% {
                width: 0
            }
            from {
                width: 0
            }
            to {
                width: 100%
            }
        }

        @keyframes typing1 {
            0% {
                width: 0
            }
            from {
                width: 0
            }
            50% {
                width: 0
            }
            to {
                width: 100%
            }
        }

        @keyframes typing2 {
            0% {
                width: 0
            }
            from {
                width: 0
            }
            67% {
                width: 0
            }
            to {
                width: 100%
            }
        }

        @keyframes typing3 {
            0% {
                width: 0
            }
            from {
                width: 0
            }
            75% {
                width: 0
            }
            to {
                width: 100%
            }
        }

        /* The typewriter cursor effect */
        @keyframes blink-caret {
            from, to {
                border-color: transparent
            }
            50% {
                border-color: orange
            }
        }

        @-webkit-keyframes arrow-jump {
            0% {
                opacity: 1;
            }
            20% {
                opacity: 1;
            }
            100% {
                opacity: 1;
                -webkit-transform: translateX(10px);
                -moz-transform: translateX(10px);
                transform: translateX(10px);
            }

        }

        @-webkit-keyframes arrow-jump-i {
            0% {
                opacity: 1;
                -webkit-transform: translateX(10px);
                -moz-transform: translateX(10px);
                transform: translateX(10px);
            }
            100% {
                opacity: 1;
            }

        }

        .radial-progress {
            margin: 0px;
            width: 40px;
            height: 40px;
            background-color: #d6dadc;
            border-radius: 50%;
        }

        .radial-progress .circle .mask,
        .radial-progress .circle .fill,
        .radial-progress .circle .shadow {
            width: 40px;
            height: 40px;
            position: absolute;
            border-radius: 50%;
        }

        .radial-progress .circle .shadow {
            box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2) inset;
        }

        .radial-progress .circle .mask,
        .radial-progress .circle .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform 1s;
            transition: -ms-transform 1s;
            transition: transform 1s;
            border-radius: 50%;
        }

        .radial-progress .circle .mask {
            clip: rect(0px, 40px, 40px, 20px);
            z-index: 1;
        }

        .radial-progress .circle .mask .fill {
            clip: rect(0px, 20px, 40px, 0px);
            background-color: #ffa100;
        }

        .radial-progress .inset {
            width: 30px;
            height: 30px;
            position: absolute;
            margin-left: 5px;
            margin-top: 5px;
            background-color: #fbfbfb;
            border-radius: 50%;
            box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .radial-progress .inset .percentage {
            height: 15px;
            width: 100%;
            overflow: hidden;
            position: absolute;
            top: 7px;
            left: 0px;
            line-height: 1;
            display: flex;
        }

        .radial-progress .inset .percentage .number {
            transition: width 1s;
            display: flex;
            margin: auto;
            font-weight: 800;
            font-size: 9.5px;
            color: #ffa100;
        }

        .soft .article .card {
            background: transparent;
        }

        .soft .article.active .card {
            background: #fff;
        }

        .article .card {
            margin: 8px 0;
            background: #fff;
            /*border: 1px solid #c3c7d9;*/
            border-radius: 10px;
            position: relative;
        }

        .article .card-title span.title {
            text-transform: capitalize;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: block;
        }

        .article .card-title {
            border-radius: 5px;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            color: #1120ec;
            padding: 8px 13px;
            font-size: 16px;
            margin-bottom: 0px;
            font-weight: 500;
            line-height: 1em;
            cursor: pointer;
            position: relative;
            display: flex;
            flex-wrap: nowrap;
        }

        .article .card-title > .radialC:before {
            content: '';
            position: absolute;
            top: 18px;
            right: 25px;
            border: solid #1120ec;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .article.active .card-title > .radialC:before {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }

        .article .card-title:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
        }

        .article.active .card-title {
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 10px;
            margin: -1px;
        }

        .risk .title + p, .risk .m-summ > .summarys:first-child {
            display: none !important;
        }

        #img_modal img.pre {
            max-width: 1000px;
            width: 100%;
        }

        #img_modal .close-modal {
            background: #fff8de;
            color: #77402c;
            padding: 1px 10px;
        }

        .risk .radialC {
            height: 0;
            width: 0;
            border: 6px solid;
            border-radius: 100%;
            margin: auto;
            margin-left: 5px;
            overflow: hidden;
            position: relative;
        }

        .risk .radialC + * {
            margin: auto;
        }

        .rs-helpC {
            position: relative;
        }

        .rs-tooltip {
            display: none;
            background: #4a4a4a;
            position: absolute;
            color: white !important;
            border-radius: 4px;
            width: 264px;
            top: 30px;
            right: 5px;
            text-align: left;
            padding: 5px 7px;
            font-size: 13px;
            line-height: 20px;
            font-weight: 100;
            z-index: 200;
        }

        .rs-help.active .rs-tooltip {
            display: block !important;
        }

        .article input + p {
            margin-top: -24px;
        }

        .article .card .action {
            margin: -1px;
        }

        .article .card-body {
            padding: 5px 8px;
            text-align: justify;
            margin: -5px 0 -4px;
        }

        .article p {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.4;
            margin: 0px;
            color: #9b9b9b;
        }

        .article a:hover {
            text-decoration: underline;
        }

        .article .ev, .article .more {
            display: none;
        }

        .article.active .ev {
            display: flex;
        }

        .article.active .card .less .more {
            display: block;
            border-top: 1px dashed #c3c7d9;
        }

        .article:not(.active) .card .action {
            display: none;
        }

        .card .other {
            border-top: none;
            border-bottom: none;
            border-radius: 0 !important;
        }

        .card .other:before {
            content: '';
            display: block;
            border-top: 1px solid #9b9b9b;
            position: relative;
            top: -10px;
            width: 30px;
            left: calc(50% - 15px);
        }

        div.m-title {
            width: unset !important;
        }

        .ev {
            display: flex;
            margin: 4px 0;
            border-top: 1px dashed #c3c7d9;
            padding: 4px;
            line-height: 1.3;
            font-size: 13px;
            font-weight: 300;
            text-align: left;
        }

        .ev.new {
            margin: 8px;
            padding: 16px;
            font-size: 16px;
            text-align: left;
            background: #f4efff;
            border: none;
            width: 392px;
            max-height: 320px;
            overflow-y: auto;
            flex: 0 0 auto;
            border-radius: 2px;
            position: relative;
        }

        .ev.new .text {
            font-style: italic;
            font-weight: 400;
            color: #2b0f44;
        }

        .ev a {
            font-size: 13px;
        }

        .ev.new a {
            font-size: 16px;
        }

        .ev div {
            width: 100%;
        }

        div.ev > img {
            height: 40px;
            width: 40px;
            flex-shrink: 0;
            margin-right: 10px;
            overflow: hidden;
            user-select: none;
        }

        @media(max-width: 767px) {
            .ev.new {
                width: 90%;
            }
        }

        .card .more, .card .other {
            cursor: pointer;
            padding: 5px;
            text-align: center;
            color: #303286;
            margin-bottom: 5px;
            height: auto !important;
        }

        .summarys {
            display: none;
        }

        .article.active .summarys.summ-text {
            font-weight: 400;
            color: #4a4a4a;
            padding: 10px 0 5px;
            display: block;
        }

        .article.active .summarys {
            display: flex;
        }

        .summary {
            flex: 1 0 49%;
            display: flex;
            margin: 5px 2px;
            background-color: #e7f1ed;
        }

        .summary > p {
            text-align: center;
            padding: 0 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .summary p.value {
            font-weight: 400;
            margin: auto;
            color: #444;
            align-items: center;
            min-width: fit-content;
        }

        .summary p.value img {
            margin-left: 5px;
        }

        .summary p.text {
            color: #4a4a4a;
            text-align: left;
        }

        .ev .title a, .ev span.text {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .ev .title a {
            -webkit-line-clamp: 2;
        }
        .ev.new .title a {
            color: #7a46ef;
            max-height: 40px;
            -webkit-line-clamp: 2;
            font-weight: 600;
        }

        .ev span.text {
            color: #2e3421;
            /*max-height: 3.8em;
            -webkit-line-clamp: 3;*/
        }

        .ev .text > ul {
            margin: 0;
            padding-left: 16px;
            /*display: flex;
            flex-direction: column;*/
        }

        .ev .text ul > li:nth-child(n+4) {
            display: none;
        }

        .ev .text ul > li:nth-child(3) {
            float: left;
            padding-right: 5px;
        }

        .ev .text ul > li:nth-child(- n + 3)
        {
            text-transform: capitalize;
        }
        .ev .title {
            display: flex;
            justify-content: space-between;
        }

        .ev .title img {
            flex-shrink: 0;
        }

        .less div.ev:nth-child(n+4) {
            display: none !important;
        }

        .ev:nth-child(n+21) {
            display: none !important;
        }

        #gats_bubble .modal-body {
            padding: 10px;
            padding-bottom: 0;
        }

        #gats_bubble .modal-header {
            padding: 10px 15px 5px 15px;
        }

        #gats_bubble .modal-header > h4 {
            font-size: 16px;
        }

        #evidence_popup .article .card-title > .radialC:before {
            display: none;
        }

        #evidence_popup {
            z-index: 1051;
        }.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:400px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}

        .optimization_container > .main-head {
            background: #fff;
            position: relative;
        }

        .optimization_container > .main-head:before {
            /*background: linear-gradient(#fff, #fff 100px, transparent 200px, transparent), url(/images/report-bg.png) !important;*/
            background-repeat: no-repeat !important;
            background-position: top -300px right -200px !important;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: -1rem;
        }

        .optimization_container > .main-head > * {
            z-index: 1;
            position: relative;
            font-size: 32px;
        }

        .optimization_container > .main-head > small {
            font-size: 16px;
        }

        .report-nav {
            color: #212121;
            padding: 10px 20px;
            position: relative;
        }

        .report-nav:last-child {
            border-bottom: none;
        }

        .report-nav:hover {
            color: #212121;
            background: #FFF8e190;
            text-decoration: none !important;
        }

        .report-nav.active {
            color: #212121;
            font-weight: 500;
            background: #FFF8e1;
        }

        @media (min-width: 768px) {
            .report-nav.active {
                background: #FFF8e1;
            }

            .cell .cap {
                margin-bottom: 5px !important;
            }
        }

        .stats {
            flex: 1 0 240px;
        }

        .sf-card {
            flex: 1;
            margin-right: 15px;
            position: relative;
        }

        .sf-card img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        .sf-card .sf-score {
            position: absolute;
            top: 2px;
            right: 2px;
            font-weight: 500;
        }

        .sf-card .sf-score > .fa {
            color: #ffc400;
            margin-left: 5px;
            margin-top: 3px;
        }

        @media (min-width: 768px) {
            div#stay_modal .modal-dialog {
                max-width: 620px;
                margin: 1.75rem auto;
            }
        }

        .optimization_container .cp-theme-submit-btn {
            background: #ffc403;
            color: #333;
        }

        .alert {
            color: red
        }

        #fname {
            width: calc(50% - 2px);
        }

        @media (max-width: 767px) {

            .snrc > .row {
                position: relative;
            }

            a.report-nav.active {
                border-bottom: 4px solid #ffc403;
                padding-bottom: 6px !important;
                text-decoration: none !important;
            }

            .optimization_container > .main-head {
                padding: 15px !important;
            }

            .optimization_container > .main-head > * {
                font-size: 18px;
            }
        }

        @media (min-width: 768px) {
             .head .h6 {
                font-size: 18px !important;
            }

            .head.ex .h6 {
                font-size: 24px !important;
            }
        }

        button.switch {
            color: #1120ec;
            background: none;
            border: none;
            font-weight: 500;
            outline: none;
        }

        /*  -- temp  */

        .rs-help:after {
            content: '?';
            margin: auto 5px;
            border: 1px solid;
            border-radius: 100%;
            display: inline-block;
            height: 15px;
            width: 15px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            line-height: 14px;
        }

        #vendor_modal .modal-content {
            max-width: 425px;
        }

        .vendorForm {
            max-width: 100%;
            min-width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .vendorForm > input {
            width: 100% !important;
            padding: 8px 10px;
            border: 1px solid;
            margin-bottom: 10px;
        }

        .cp-isv-software-logo > img {
            height: 100px;
            width: 100px;
        }

         .capabilities .title {
            font-weight: 500;
        }

        .p-bar {
            background: #fff;
            border: 1px solid #444dee;
            border-radius: 2px;
            display: inline-flex;
            padding: 9px;
            width: 80%;
            height: 20px;
            position: relative;
        }

        .p-bar > span {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0%;
            background: linear-gradient(to left, #7076ef, #1721ed);
            /*border-radius: 4px;*/
        }

        .bar-c {
            display: flex;
            align-items: center;
            width: 250px;
        }

        .bar-c span[data-ev="-"] {
            background: transparent !important;
            width: 100% !important;
            margin: 1px 6px;
        }

        .bar-c span.num[data-num]:before {
            content: attr(data-num);
            color: #444dee;
        }

        .bar-c span.num[data-num]:after {
            content: '%';
            color: #444dee;
        }

        .bar-c span.num[data-ev="-"]:before {
            content: '_ _';
            padding: 0px 4px;
            display: inline-block;
            transform: translateY(-33%);
        }

        .bar-c span.num[data-ev="-"]:after {
            content: '';
        }

        @media (max-width: 767px) {

            .bar-c {
                width: 100%;
            }

            .cp-isv-software-logo > img {
                height: 70px;
                width: 70px;
            }
        }

        .p-bar > span[data-ev="0"] {
            background: transparent;
        }

        .num[data-ev="0"] {
            display: none;
        }

        .if-more[data-ev="0"] > .ev-show {
            display: none;
        }

        .if-more[data-ev="0"]:before {
            content: 'Not available';
        }

        ul.legend.lmh {
            display: flex;
            flex-basis: 30%;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;
            margin-left: auto;
        }

        ul.legend.lmh > li {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            margin-left: 8px;
            list-style: none;
        }

        .lmh > li:before {
            content: '';
            border: 5px solid;
            display: inline-flex;
            margin: auto 8px;
            border-radius: 100%;
        }

        .capabilities .bar-c:after {
            content: '';
            padding: 4px;
            border: 2px solid;
            border-left: transparent;
            border-top: transparent;
            transform: rotate(45deg);
            margin-top: -5px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .capabilities .is-more .bar-c:after {
            transform: rotate(-135deg);
            margin-top: 5px;
        }

        .capabilities .bar-c:before {
            content: '';
            border: 5px solid;
            border-radius: 100%;
            position: absolute;
            left: 0;
            top: 6px;
        }

        .capabilities .new.bar-c:before {
            position: absolute;
            top: 4px;
            background: url(/images/checkmarkW.svg) center no-repeat;
            background-size: contain;
            border: 1px solid #15b86a;
            background-color: #15b86a;
            padding: 7px;
        }

        .compCap .bar-c:after {
            margin-left: auto;
        }

        .cardMore:not(.is-more) .if-more {
            display: none;
        }

         .compCap .row-g.capb {
            flex-wrap: wrap;
        }

        /*.comp_sec .row-g.act:after, .compCap .row-g.capb:after {
        content: '';
        border-top: 1px solid #E8EAF6;
        width: 94%;
        margin: auto;
        }*/

         a.compMoreRow:hover {
            background: #1720ec;
            color: white;
        }

         a.compMoreRow {
            margin: 10px auto 15px;
            width: 180px;
            border: 1px solid;
            border-radius: 2px;
            justify-content: center;
            text-align: center;
            padding: 12px;
            font-size: 16px;
        }

        /*animation element sliding bottom*/


        .comp_sec .p-bar {
            background: #fff;
            border: 1px solid #B0BEC5;
            border-radius: 4px;
            display: inline-flex;
            padding: 9px;
            width: 150px;
            max-width: 75%;
            height: 20px;
            position: relative;
        }

        .comp_sec .p-bar > span {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: #e8eaf5;
            border-radius: 4px;
            width: 0%;
        }

        .comp_sec .capb .p-bar > span {
            left: -1px;
        }

        .comp_sec:not(.capabilities) .p-bar > span {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background: #e8eaf5;
            border-radius: 4px;
            width: 0%;
        }

        .lmh > li.low:before {
            border-color: #d0021b;
        }

        .lmh > li.medium:before {
            border-color: #f5a623;
        }

        .lmh > li.high:before {
            border-color: #417505;
        }

        .low > .p-bar, .high.in > .p-bar {
            border: 1px solid #d0021b;
        }

        .low > .p-bar > span, .high.in > .p-bar > span {
            background: linear-gradient(to left, #f97f8d, #d0021b);
        }

        .low.bar-c span.num[data-num]:before {
            color: #d0021b;
        }

        .low.bar-c span.num[data-num]:after {
            color: #d0021b;
        }

        .hide.bar-c span.num[data-num]:before {
            color: #d0021b;
        }

        .hide.bar-c span.num[data-num]:after {
            color: #d0021b;
        }

        .mid > .p-bar, .medium > .p-bar {
            border: 1px solid #f5a623;
        }

        .mid > .p-bar > span, .medium > .p-bar > span {
            background: linear-gradient(to left, #fdd695, #f5a623);

        }

        .medium.bar-c span.num[data-num]:before {
            color: #f5a623;
        }

        .medium.bar-c span.num[data-num]:after {
            color: #f5a623;
        }

        .low.bar-c, .high.in.bar-c, .risk.high .radialC {
            color: #d0021b;
        }

        .mid.bar-c, .medium.bar-c, .risk.medium .radialC {
            color: #f5a623;
        }

        .high.bar-c, .low.in.bar-c, .risk.low .radialC {
            color: #417505;
        }

        .high > .p-bar, .low.in > .p-bar {
            border: 1px solid #417505;
        }

        .high > .p-bar > span, .low.in > .p-bar > span {
            background: linear-gradient(to left, #6ac500, #417505);
        }

        .high.bar-c span.num[data-num]:before {
            color: #417505;
        }

        .high.bar-c span.num[data-num]:after {
            color: #417505;
        }

        .in > a {
            color: inherit;
        }

        .in > a:hover {
            text-decoration: underline;
        }

        .rs-c {
            width: 200px;
            display: flex;
            /*border-radius: 10px;*/
            overflow: hidden;
            color: #fff;
        }

        .rs-c > * {
            flex: 0 0 30%;
            text-align: center;
        }

        .rs-c > .h {
            background: linear-gradient(to right, #78bf27, #78bf27, #f5a623);
        }

        .rs-c > .m {
            flex: 0 0 40%;
            background: linear-gradient(to right, #f5a623, #ff9f00, #f5a623);
        }

        .rs-c > .l {
            background: linear-gradient(to right, #f5a623, #fd1d38, #fd1d38);
        }

        .lmh-bar {
            position: relative;
            margin: 20px auto 30px;
        }

        .lmh-val.loading {
            left: 6px !important;
            opacity: 0;
        }

        .lmh-val.loading + .rs-c > * {
            background: #9b9b9b;
        }

        .lmh-bar > .lmh-val {
            position: absolute;
            display: flex;
            color: #2096f3;
            transition: 1s;
            top: -9px;
            margin-left: -6px;
            border-top: 4px solid;
            border-bottom: 4px solid;
        }

        .lmh-bar > .lmh-val:before {
            content: '';
            border: 6px solid;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            padding: 8px 0px;
        }

        .lmh-bar > .lmh-val:after {
            content: attr(data-name);
            /*font-weight: 500;*/
            /*font-size: 1.2em;*/
            position: absolute;
            color: #9b9b9b;
            bottom: 0px;
            left: 50%;
            width: max-content;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transform: translate(-50%, 120%);
        }

        .lmh-bar[data-risk="NaN"] .lmh-val {
            opacity: 0;
        }

        .lmh-bar[data-risk="NaN"] .lmh-val + .rs-c > * {
            background: #9b9b9b;
        }

        li.low:before {
            border-color: #d0021b;
        }

        li.medium:before {
            border-color: #f5a623;
        }

        li.high:before {
            border-color: #417505;
        }

        #risk-score {
            border: 1px solid #2096f3;
            border-radius: 2px;
        }

        #risk-score .bar-c:before {
            display: none;
        }

        #risk-score .bar-c:after {
            margin-left: -20px;
        }

        #risk-score .bar-c {
            justify-content: center;
        }

        #risk-score .row-g {
            margin: 0px 15px;
        }

        #risk-score .cell:first-child {
            padding: 10px 0px;
        }

        #risk-score .riskBar {
            height: 100%;
            justify-content: center;
        }

        @media (max-width: 767px) {
            #risk-score .cell {
                padding-left: 0;
                flex-basis: 30%;
                min-width: unset !important;
            }
        }

        span[data-ev="0"] {
            background: transparent !important;
            color: transparent !important;
        }

        .sumAct > ul {
            padding-left: 1rem;
            list-style: none;
        }

        .sumAct > ul > li:before {
            content: '';
            padding: 8px;
            margin-right: 5px;
            background: url(/images/like.svg) center left no-repeat;
            background-size: contain;
        }

        .sumAct > ul > li.bar-c:before {
            border: 5px solid;
            border-radius: 100%;
            padding: 0;
            margin: 5px;
        }

        .sumAct > ul > li {
            margin-bottom: 5px;
            display: flex;
        }

        .sumAct > ul.check > li:before {
            padding: 7px;
            border-radius: 100%;
            height: 0;
            display: inline-block;
            margin-right: 5px;
            background: url(/images/checkmarkW.svg) center no-repeat;
            background-size: contain;
            border: 1px solid #15b86a;
            background-color: #15b86a;
        }

        .qs {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 16px;
            color: #505050;
            border: 1px solid;
            cursor: pointer;
            display: inline-block;
            font-size: 16px;
            height: 22px;
            line-height: 22px;
            position: relative;
            text-align: center;
            width: 22px;
        }
        .comp_sec .row-g {
            margin-bottom: 10px;
        }

        .comp_sec > div > hr {
            margin: 10px 15px 20px;
        }

        .comp_sec > div > .head-b + hr {
            display: none;
        }

        .ratingC {
            display: inline-flex;
            position: relative;
            color: #FFC400;
        }

        /*.actmore .act+hr+.row-g+hr {
            display: none !important;
        }*/

        @media (max-width: 424px) {
            .comp_sec .software-image > img {
                width: 60px !important;
                height: 60px !important;
            }

            .textHead.text.mb-auto, .ratingC {
                font-size: 16px;
            }
        }

        @media (max-width: 374px) {
            .comp_sec .software-image > img {
                width: 50px !important;
                height: 50px !important;
            }

            .sf-card .sf-score > .fa {
                margin-left: 2px;
            }
        }

        .flex2.cell:nth-child(n+5) {
            display: none;
        }

        .linkWText {
            position: relative;
        }

        .linkWText .sf-score {
            position: static;
            right: 5px;
            top: 0;
        }

        #soft-head,
        .soft-head-sticky {
            padding: 0;
            position: sticky;
            top: 0;
            z-index: 5;
            background: #fff;
            box-shadow: 0 1px 0 #E8EAF6;
        }

        #soft-head.active {
            background: #fff;
        }

        #soft-head.active + .row-g {
            margin-top: 0;
        }

        @media (max-width: 767px) {
            .flex1.cell {
                flex-basis: 100%;
            }

            .flex2.cell {
                max-width: 100%;
            }

            .comp_sec .row-g {
                flex-wrap: wrap;
            }

            .cell:first-child {
                min-width: 100% !important;
                display: flex;
                justify-content: space-between;
                padding-right: 15px;
            }

            .cell:nth-child(3) .riskCTA {
                margin-left: 10px;
            }

            .comp_sec .p-bar {
                max-width: 100% !important;
            }

            .comp_sec .p-bar + .num {
                position: absolute;
                margin: auto;
                top: 0;
                line-height: 20px;
                bottom: 0;
                left: 10px;
                color: #000;
            }

            #soft-head,
            .soft-head-sticky {
                padding: 0;
                border-top: 0;
                top: 49px;
            }

            #soft-head.active {
                background: #fff;
            }

            #soft-head.active .flex1 {
                display: none;
            }

            #soft-head.active + .row-g {
                margin-top: 0;
            }
        }

        @media (max-width: 374px) {
            .comp_sec .p-bar {
                width: 125px;
            }

            .riskCTA .btn {
                font-size: 13px;
            }
        }

        .comp_sec .cell > ul {
            padding-left: 15px;
        }

        .row-g .cell li:nth-child(n+4) {
            display: none;
        }

        .comp_sec .head-b strong {
            font-weight: 700;
        }

         .comp_sec .head-b > * {
            font-size: 1.1em;
        }

        .comp_sec .head-b:not(:first-child) {
            margin: 10px 15px 10px;
        }

        .comp_sec .head-b:not(:first-child) > .cell {
            margin: 0px -15px;
        }

        .comp_sec .cell li > p {
            margin: 0;
            margin-left: -5px;
        }

        .comp_sec:not(.capabilities) .p-bar span[data-ev="-"] {
            background: transparent !important;
            width: 100% !important;
            margin: 1px 6px;
        }

        .comp_sec span.num[data-num]:before {
            content: attr(data-num);
        }

        .comp_sec .capb span.num[data-num]:before {
            color: #fff !important;
        }

        .comp_sec span.num[data-num]:after {
            content: '%';
        }

        .comp_sec span.num[data-ev="-"]:before {
            content: '_ _';
            padding: 0px 4px;
            display: inline-block;
            transform: translateY(-33%);
        }

        .comp_sec span.num[data-ev="-"]:after {
            content: '';
        }

        a:not([href])[onclick][data-ev="0"] {
            display: none;
        }

        .compCap span.num:before {
            content: attr(data-num) '%' !important;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            color: #fff;
            margin: 1px 5px;
        }

        .compCap span.num:after {
            display: none;
        }

        .compCap .cell:not(:last-child) .bar-c:after {
            display: none;
        }

        #newSumAct > .sumAct {
            border: 1px solid #DEDEDE;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        .sumAct > .actHead {
            border-bottom: 1px solid #DEDEDE;
            margin-bottom: 10px;
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .main-head {
            background: #fff;
            position: relative;
        }

        .main-head:before {
            /*background: linear-gradient(#fff, #fff 100px, transparent 200px, transparent), url(/images/report-bg.png) !important;*/
            background-repeat: no-repeat !important;
            background-position: top -300px right -200px !important;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: -1rem;
        }

        .main-head > * {
            z-index: 1;
            position: relative;
            font-size: 32px;
        }

        .report-nav, a.linkWText {
            color: #212121;
        }

        .comp_sec .cell {
            padding: 10px 15px;
            padding-right: 0;
            flex-shrink: 0;
            flex-basis: 25%;
            position: relative;
        }

        .comp_sec .cell > * {
            margin: 0;
            position: relative;
        }

        .comp_sec .software-image > img {
            width: 72px;
            height: 72px;
            border: 2px solid #b9b9b9;
            border-radius: 4px;
        }

        .comp_sec .head-b {
            border-bottom: 1px solid #e8eaf6;
        }

        .done-msg:not(:empty) ~ * {
            display: none !important;
        }

        @media (max-width: 767px) {
            #executiveSummary {
                padding-top: 42px;
            }

            .main-head > * {
                font-size: 22px !important;
            }
        }

        @media (max-width: 991px) {
            .sidebar-c {
                position: absolute;
                background: #fff;
                top: 0;
                left: 0;
                height: 100%;
                width: 0;
                z-index: 5;
            }
            .sidebar-c > .d-flex.column {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                width: 100vw;
                overflow-x: auto;
                background: #fff;
            }
            .sidebar-c > .d-flex.column > .d-flex {
                flex-direction: row;
                padding: 0 10px;
                margin: 0;
            }
            .sidebar-c > .d-flex.column > .d-flex > a {
                flex: 1 0 auto;
                padding: 13px;
            }
            .page-content > .main-content {
                max-width: 100%;
                z-index: 0;
                margin-top:0;
            }
        }

        @media (min-width: 992px) {
            .sidebar-c {
                position: absolute;
                height: 100%;
                width: 100%;
                max-width: unset;
                flex-shrink: unset;
                margin-right: unset;
            }
            .sidebar-c > * {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                max-height: 100vh;
                max-width: 100vw;
                overflow-y: scroll;
            }
            .page-content > .main-content {
                max-width: 100%;
                z-index: 10;
                margin-top:7.2rem;
            }
        }
    .accordion-faq {
        background-color: #e9e9e9;
        color: #000;
        cursor: pointer;
        padding: 18px;
        margin-top: 10px;
        margin-bottom: 0;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        font-weight: 500;
        font-size: 1.6rem;
        transition: 0.4s;
    }

    .accordion-faq.active, .accordion-faq:hover {
        background-color: #cbcbcb;
        font-weight: 600;
    }

     .panel {
         padding: 10px 18px;
         background-color: white;
         overflow: hidden;
         display: none;
         background-color: #FAFAFA;
         transition: max-height 0.2s ease-out;
     }
     .accordion-faq:after {
         content: '\02795';
         font-size: 13px;
         color: #777;
         float: right;
         margin-left: 5px;
     }

     .accordion-faq.active:after {
         content: "\2796";
     }
    .accordion-faq strong {
        font-weight: 700;
    }

    strong, .st {
        font-weight: 600;
    }

    a.report-nav.active {
        border-bottom: 4px solid #ffc403;
        padding-bottom: 6px !important;
        text-decoration: none !important;
        background: #FFF8e1;
    }
    .chart-container {
      width: 550px;
      height: 550px;
      margin: 2em auto 1em;
      align-self: center;
    }

    .compare-footprint-eyebrow {
      margin: 0 0 0.35rem;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #7a8499;
    }

    .compare-vs { color: #9aa3b2; font-weight: 500; }

    .compare-footprint-tabs {
      display: flex;
      gap: 4px;
      margin: 1.1rem 0 0.25rem;
      border-bottom: 1px solid #E8EAF6;
    }

    .compare-footprint-tab {
      background: none;
      border: none;
      cursor: pointer;
      color: #7a8499;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 4px;
      margin-right: 22px;
      border-bottom: 2px solid transparent;
    }

    .compare-footprint-tab:hover { color: #212121; }
    .compare-footprint-tab.active {
      color: #212121;
      border-bottom-color: #9b7fd1;
    }

    .compare-footprint-note {
      margin: 12px 0 0;
      font-size: 12px;
      color: #9aa3b2;
      line-height: 1.55;
    }

    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }
    @media (min-width: 768px) {
      .container {
        flex-direction: row;

      }
      #newSumAct {
          width: 40%;
      }
    }
    @media (max-width: 767px) {
      .container {
        flex-direction: column;
      }
      .chart-container {
        max-width: 90vw;
        height: 400px;
      }
      .compare-usecase-list {
        max-width: 90vw;
        padding: 0;
      }
      .compare-story-footprint {
        max-width: 90vw;
      }
      #newSumAct {
          width: 100%;
          flex-direction: column;
      }
    }


        .cp-gradient {
            background: #46a9e6;
            background: linear-gradient(to right, #46a9e6 0%, #b4befc 100%);
            height: 5px;
            width: 100%;
        }

#executiveSummary {
            background: linear-gradient(0deg, rgba(46, 52, 129, 0.9), rgba(46, 52, 129, 0.5)), url(https://cuspera.com/images/report-head-bg.png) center center / cover no-repeat;
            color: #fff;
        }
#executiveSummary h2,
#executiveSummary .h6 {
            color: #fff !important;
            margin: 0;
        }

#executiveSummary + .body,
#executiveSummary ~ .body {
  width: 100%;
  box-sizing: border-box;
}
#executiveSummary ~ .body .sec1,
#executiveSummary ~ .body .p,
#executiveSummary ~ .body .compare-lede-text {
  width: 100%;
  max-width: none;
}


/* Compare story footprint + product colors */
:root {
  --compare-product-a: #f2b84b;
  --compare-product-b: #4fb6e0;
  --compare-product-a-soft: rgba(242, 184, 75, 0.14);
  --compare-product-b-soft: rgba(79, 182, 224, 0.14);
}

.compare-product-a,
.compare-name-a { color: #c98a1a; }
.compare-product-b,
.compare-name-b { color: #1f8fb8; }
.compare-product-col-a { box-shadow: inset 0 3px 0 var(--compare-product-a); }
.compare-product-col-b { box-shadow: inset 0 3px 0 var(--compare-product-b); }


/* Compare chart row — aligned radar + jump list */
.compare-radar-col.chart-container,
.compare-chart-row .chart-container {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: stretch;
}
.compare-chart-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}
.compare-chart-block > .compare-section-title--chart,
.compare-chart-block > .h2bl.compare-section-title--chart {
  margin: 0 0 0.35rem !important;
}
.compare-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr);
  gap: 1.25rem;
  align-items: stretch;
  width: 100%;
}
.compare-chart-row--solo {
  grid-template-columns: 1fr;
}
.compare-radar-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #E8EAF6;
  border-radius: 14px;
  padding: 1rem 1rem 0.85rem;
  box-sizing: border-box;
}
.compare-radar-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* Wider than tall so the radar uses column width; legend no longer forces a tall empty square. */
  aspect-ratio: 4 / 3;
  height: auto !important;
  max-height: 420px;
}
.compare-radar-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
.compare-uc-nav-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E8EAF6;
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-sizing: border-box;
  height: 100%;
}
.compare-uc-nav-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}
.compare-uc-nav-hint {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6b7280;
}
.compare-uc-nav-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.7rem;
}
.compare-uc-nav-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.2;
}
.compare-usecase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
  max-height: 420px;
  flex: 1 1 auto;
}
.compare-usecase-list li { margin: 0; }
.compare-usecase-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1f2937;
  text-decoration: none;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.compare-uc-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 1.1rem;
}
.compare-uc-dots .compare-dot {
  width: 8px;
  height: 8px;
}
.compare-uc-link-label {
  flex: 1 1 auto;
  min-width: 0;
}
.compare-usecase-link:hover,
.compare-usecase-link:focus {
  color: #1721ed;
  background: #eef2ff;
  border-color: #c7d2fe;
  text-decoration: none;
  outline: none;
}

@media (max-width: 991px) {
  .compare-chart-row {
    grid-template-columns: 1fr;
  }
  .compare-radar-canvas-wrap {
    width: 100%;
    max-width: 100%;
    max-height: 380px;
  }
  .compare-usecase-list {
    max-height: none;
  }
}
@media (max-width: 767px) {
  .compare-chart-row {
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .compare-radar-col,
  .compare-uc-nav-col {
    flex: 1 1 auto;
    width: 100%;
  }
  .compare-radar-canvas-wrap {
    width: 100%;
    max-width: 100%;
    max-height: 340px;
  }
}


.compare-story-footprint {
  width: 100%;
  max-width: 960px;
  margin: 0.5rem auto 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.compare-footprint-section {
  width: 100%;
}
.compare-footprint-head .h2bl {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}
.compare-footprint-sub {
  margin: 0 0 1rem;
  color: #5f6b7c;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 70ch;
}
.compare-footprint-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 0.85rem;
}
.compare-footprint-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #5f6b7c;
}
.compare-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.compare-dot-a { background: var(--compare-product-a); }
.compare-dot-b { background: var(--compare-product-b); }
.compare-dot-common {
  background: linear-gradient(90deg, var(--compare-product-a), var(--compare-product-b));
}

.compare-footprint-panel {
  background: #fafbff;
  border: 1px solid #E8EAF6;
  border-radius: 12px;
  padding: 8px 16px 14px;
  margin-bottom: 1rem;
}
.compare-footprint-group-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8499;
  padding: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-footprint-swatch {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.compare-footprint-swatch.swatch-a { background: var(--compare-product-a); }
.compare-footprint-swatch.swatch-b { background: var(--compare-product-b); }
.compare-footprint-swatch.swatch-common {
  background: linear-gradient(90deg, var(--compare-product-a), var(--compare-product-b));
}
.compare-footprint-divider {
  border: none;
  border-top: 1px solid #E8EAF6;
  margin: 0 0 4px;
}
.compare-footprint-row {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 7px 6px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}
.compare-footprint-row:hover { background: #f3f5fb; }
.compare-footprint-label {
  font-size: 13px;
  color: #5f6b7c;
  line-height: 1.35;
}
.compare-footprint-row:hover .compare-footprint-label { color: #212121; }
.compare-footprint-track {
  position: relative;
  height: 20px;
  display: block;
}
.compare-footprint-center {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: #E8EAF6;
  transform: translateX(-0.5px);
}
.compare-footprint-bar {
  position: absolute;
  top: 3px;
  height: 14px;
  border-radius: 4px;
  opacity: 0.92;
}
.compare-footprint-bar.side-a {
  right: 50%;
  background: var(--compare-product-a);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.compare-footprint-bar.side-b {
  left: 50%;
  background: var(--compare-product-b);
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.compare-segment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.35rem;
}
.compare-segment-col {
  border: 1px solid #E8EAF6;
  border-radius: 12px;
  background: #fff;
  padding: 0.85rem 0.9rem 0.9rem;
  min-width: 0;
}
.compare-segment-col-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.65rem;
}
.compare-segment-total {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
}
.compare-segment-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}
.compare-segment-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.compare-segment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  row-gap: 0.2rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.15rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.compare-segment-row:hover,
.compare-segment-row:focus {
  background: #f8fafc;
  outline: none;
}
.compare-segment-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1f2937;
  min-width: 0;
}
.compare-segment-pct {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
  font-variant-numeric: tabular-nums;
}
.compare-segment-track {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  height: 8px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}
.compare-segment-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 0;
}
.compare-segment-fill.side-a { background: var(--compare-product-a, #f2b84b); }
.compare-segment-fill.side-b { background: var(--compare-product-b, #4fb6e0); }

.compare-unique-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.25rem;
}
.compare-unique-col {
  border: 1px solid #E8EAF6;
  border-radius: 12px;
  background: #fff;
  padding: 0.85rem 0.9rem 0.75rem;
  min-width: 0;
}
.compare-unique-col-a {
  background: linear-gradient(180deg, var(--compare-product-a-soft), #fff 42%);
  border-color: rgba(242, 184, 75, 0.35);
}
.compare-unique-col-b {
  background: linear-gradient(180deg, var(--compare-product-b-soft), #fff 42%);
  border-color: rgba(79, 182, 224, 0.35);
}
.compare-unique-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3a4454;
  margin-bottom: 0.65rem;
  letter-spacing: 0.01em;
}
.compare-unique-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.compare-unique-list li { margin: 0; }
.compare-unique-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  appearance: none;
  border: 1px solid #E8EAF6;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
  color: inherit;
  font: inherit;
}
.compare-unique-item:hover,
.compare-unique-item:focus {
  border-color: #7083f7;
  box-shadow: 0 2px 10px rgba(23, 33, 237, 0.08);
  transform: translateY(-1px);
  outline: none;
}
.compare-unique-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #212121;
  line-height: 1.35;
  min-width: 0;
}
.compare-unique-item-cta {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #1721ed;
  white-space: nowrap;
}

.compare-top-processes {
  margin-bottom: 1rem;
}
.compare-top-processes .compare-process-hint {
  margin: 0 0 0.75rem;
  color: #5f6b7c;
  font-size: 13px;
}
.compare-top-processes .blue a {
  color: #1721ed;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare-top-processes .blue a:hover {
  text-decoration-thickness: 2px;
}

.compare-uc-table-wrap {
  overflow-x: auto;
  border: 1px solid #E8EAF6;
  border-radius: 10px;
  background: #fff;
}
.compare-uc-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-uc-table th,
.compare-uc-table td {
  width: 50%;
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #E8EAF6;
  font-size: 13.5px;
  line-height: 1.4;
  color: #3a4454;
}
.compare-uc-table th {
  background: #f7f8fc;
  color: #212121;
  font-weight: 600;
}
.compare-uc-table th .compare-dot {
  margin-right: 8px;
  vertical-align: middle;
}
.compare-uc-table tr:last-child td { border-bottom: none; }
.compare-footprint-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 2px 0;
  color: #1721ed;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.compare-footprint-row.compare-footprint-link {
  text-decoration: none;
  color: inherit;
}
.compare-uc-shared {
  margin: 0 0 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid #E8EAF6;
  border-radius: 10px;
  background: #fafbff;
}
.compare-uc-shared-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8499;
  margin-bottom: 0.4rem;
}
.compare-uc-shared ul {
  margin: 0;
  padding-left: 1.1rem;
}
.compare-uc-shared li { margin: 0.25rem 0; }

.compare-cs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1112;
  overflow-y: auto;
  padding: 32px 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.compare-cs-overlay.active {
  display: flex;
  opacity: 1;
}
.compare-cs-popup {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.compare-cs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}
.compare-cs-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}
.compare-cs-close {
  background: none;
  border: 0;
  font-size: 28px;
  color: #9ca3af;
  cursor: pointer;
  width: 32px;
  height: 32px;
  line-height: 1;
}
.compare-cs-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E8EAF6;
  padding: 0 16px;
}
.compare-cs-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-weight: 600;
  color: #7a8499;
  cursor: pointer;
}
.compare-cs-tab.active {
  color: #212121;
  border-bottom-color: #9b7fd1;
}
.compare-cs-body {
  padding: 16px 20px 24px;
  overflow: auto;
}
.compare-cs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.compare-cs-pane { display: none; }
.compare-cs-pane.is-active { display: block; }
.compare-cs-pane-head {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
}
.compare-cs-pane-head.compare-product-a { border-bottom-color: var(--compare-product-a); }
.compare-cs-pane-head.compare-product-b { border-bottom-color: var(--compare-product-b); }
.compare-cs-loading,
.compare-cs-empty {
  color: #6b7280;
  padding: 1.5rem 0;
  text-align: center;
}

@media (max-width: 767px) {
  .compare-footprint-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 0;
  }
  .compare-footprint-track { height: 16px; }
  .compare-footprint-bar { height: 12px; }
  .compare-cs-split {
    grid-template-columns: 1fr;
  }
  .compare-unique-grid {
    grid-template-columns: 1fr;
  }
  .compare-segment-grid {
    grid-template-columns: 1fr;
  }
}

/* Integrations + Alternatives product rows (desktop-safe, outside mobile MQ) */
.compare-logo-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}
.compare-logo-row.compare-alt-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.compare-logo-row > .compare-logo-card,
.compare-logo-row > a.compare-logo-card,
.compare-logo-row > .compare-alt-card,
.compare-logo-row > a.compare-alt-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 8px 14px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none !important;
  color: #212121 !important;
  background: #fff;
  border: 1px solid #E8EAF6;
  border-radius: 12px;
  float: none !important;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.compare-logo-row > .compare-logo-card:hover,
.compare-logo-row > .compare-alt-card:hover {
  border-color: #7083f7;
  box-shadow: 0 4px 14px rgba(23, 33, 237, 0.08);
  transform: translateY(-1px);
  text-decoration: none !important;
  color: #212121 !important;
}
.compare-logo-row .compare-logo-img,
.compare-logo-row img.logo {
  display: block;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  min-width: 48px;
  min-height: 48px !important;
  object-fit: contain;
  margin: 0 auto;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid #E8EAF6;
  border-radius: 10px;
  background: #fff;
  float: none !important;
}
.compare-logo-row .h4,
.compare-logo-row .compare-alt-name,
.compare-logo-row .compare-card-title,
.compare-logo-row h4 {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #212121 !important;
  float: none !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.7em;
}
.compare-int-score {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  color: #5f6b7c !important;
  font-weight: 500;
}
.compare-alt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 6px 8px;
  min-height: 30px;
  border-radius: 8px;
  background: #1721ed;
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.compare-alt-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-decoration: none !important;
  color: inherit !important;
}
.compare-alt-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.compare-alt-cta-a {
  background: #f2b84b;
  color: #1f2937 !important;
}
.compare-alt-cta-b {
  background: #4fb6e0;
  color: #0f172a !important;
}
.compare-logo-row > .compare-alt-card:hover .compare-alt-cta {
  filter: brightness(0.96);
  color: inherit;
}
.compare-logo-row > .compare-alt-card:hover .compare-alt-cta-a {
  color: #1f2937 !important;
}
.compare-logo-row > .compare-alt-card:hover .compare-alt-cta-b {
  color: #0f172a !important;
}

.compare-category-alts {
  margin-top: 0.5rem;
}
.compare-category-alts-head .h2bl {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}
.compare-category-alts-sub {
  margin: 0 0 1rem;
  color: #5f6b7c;
  font-size: 13.5px;
  line-height: 1.45;
}
.compare-category-alts-more {
  margin-top: 0.35rem;
  text-align: right;
}
.compare-category-alts-more a {
  color: #1721ed;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare-alt-row {
  /* horizontal padding comes from utility class on the row (px-4) */
  padding-left: 0;
  padding-right: 0;
}

.compare-integrations-sub {
  margin: 0 0 0.85rem;
  color: #5f6b7c;
  font-size: 13.5px;
}
.compare-integrations-block {
  padding: 0 1.5rem 1rem; /* match Bootstrap px-4 */
}
.compare-integrations-block + .compare-integrations-block {
  border-top: 1px solid #E8EAF6;
  padding-top: 0.85rem;
}
.compare-integrations-row-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
}

@media (max-width: 991px) {
  .compare-logo-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .compare-logo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .compare-logo-row .compare-logo-img,
  .compare-logo-row img.logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    min-width: 42px;
    min-height: 42px !important;
  }
  .compare-alt-cta {
    width: 100%;
    padding: 6px 8px;
    white-space: normal;
    text-align: center;
  }
}

/* Dual-product evidence in compare overlay (jump-to-use-case fallback) */
.compare-cs-overlay.compare-evidence-mode .compare-cs-popup {
  max-width: 920px;
}
.compare-evidence-pane .compare-evidence-article .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.compare-evidence-pane .compare-evidence-article .card-title {
  background: #f9fafb;
  padding: 0.75rem 0.5rem;
  align-items: center;
}
.compare-evidence-pane .compare-evidence-article .card-title > .radialC:before {
  display: none;
}
.compare-evidence-pane .m-title.less {
  max-height: 320px;
  overflow: hidden;
  position: relative;
}
.compare-evidence-pane .m-title .more.hul {
  cursor: pointer;
  color: #2563eb;
  padding: 0.75rem;
  text-align: center;
}
.compare-evidence-pct {
  font-weight: 600;
  font-size: 1.1rem;
}