             :root {
                --darkBlack: #000000;
                --black: #2A2A2A;
                --darkShadow: #3e3e3e;
                --boulder: #686868;
                --alto: #D0D0D0;
                --athens: #f6f6f6;
                --white: #FFFFFF;
                --red: #F55D7B;
                --blue: #0ad3ff;
                --iceBlue: #e6faffff;
                --petrol: #056a80;
                --blueShadow: #022a33;
                --green: #5de380;
                --lightMint: #aef1c0;
                --gold: #f6ae2d;
            }
            
            body {
                /* position: absolute; */
                min-width: 100%
            }
            
            .modal-backdrop {
                z-index: 1150;
            }
            
            .modal {
                z-index: 1151;
            }
            
            .offcanvas-header>input:focus-visible {
                outline: none;
            }
            
            .offcanvas>input:focus-visible {
                outline: none;
            }
            
            .intercom-lightweight-app {
                z-index: 1150!important
            }
            
            #personDetails input {
                outline: none;
                padding-top: 0px;
                padding-bottom: 0px;
                width: 100%;
                margin: 4px 0px 4px 0px;
            }
            
            #personDetails>div>div>div>select {
                user-select: text;
                width: 100%;
            }
            
            #personDetails>div>div>div>select:focus-visible {
                outline: none;
            }
            
            #orgDetails>div>div>input {
                outline: none;
                padding-top: 0px;
                border-top: 0px;
            }
            
            .org-chart-node {
                position: relative;
                text-align: left;
                cursor: grab;
                vertical-align: top;
                min-width: 200px;
                background-color: var(--white);
                border-radius: 5px;
                /* box-shadow: 0 0 1px 1px rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 31%); */
                padding: 0px!important;
                height: 100%;
            }
            
            .org-chart-node:hover {
                background-color: var(--alto);
                color: var(--white);
            }
            .org-chart-node:hover .chart-node-body>a {
                color: var(--white);
            }
            
            .org-chart-node.org {
                background-color: var(--darkShadow);
                color: var(--white);
            }
            
            .org-chart-node.org:hover {
                background-color: var(--boulder);
                color: var(--white);
            }
            
            .contact {
                font-weight: bold;
                font-size: small;
                grid-template-columns: 30% 70%;
                grid-template-areas: 'picture_id name' 'job job';
                display: grid;
            }
            
            .sel-chart-node {
                background-color: var(--alto);
                color: var(--white);
            }
            .sel-chart-node .chart-node-body>a{
                color: var(--white);
            }
            
            .sel-chart-node.org {
                background-color: var(--alto);
                color: var(--white);
            }
            
            .sel-chart-node:hover {
                background-color: var(--alto);
                color: var(--white);
            }
            
            .cont-card-wrap {
                display: grid;
                grid-template-columns: 95% 5%;
            }
            
            #backlog>.cont-card-wrap:hover {
                background-color: var(--boulder);
                color: var(--white);
            }
            
            .google-visualization-orgchart-table {
                transform-origin: left top;
                height: 1px;
            }
            
            .google-visualization-orgchart-linebottom {
                border-bottom: 1px solid var(--boulder)!important;
            }
            
            .google-visualization-orgchart-lineleft {
                border-left: 1px solid var(--boulder)!important;
                text-align: start;
            }
            
            .google-visualization-orgchart-lineright {
                border-right: 1px solid var(--boulder)!important;
            }
            
            .google-visualization-orgchart-linebottom {
                border-bottom: 1px solid var(--black);
            }
            
            .chart-node-dragged>.chart-node-container>.chart-node-header {
                opacity: 0.25;
            }
            
            .chart-node-dragged {
                cursor: grabbing;
                opacity: 0.25;
            }
            
            .chart-node-header {
                background-color: var(--boulder);
                color: var(--white);
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                /* height: 46px; */
                /* padding-top: 6px!important; */
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }
            
            .chart-node-header.org {
                background-color: var(--black);
            }
            
            .chart-node-header:hover {
                height: auto;
            }
            
            .chart-node-header.org.warning {
                background-color: var(--red);
            }
            
            .chart-node-header-content {
                display: flex;
                flex-direction: row;
                /* margin-left: 70px!important; */
                align-items: center;
                justify-content: flex-end;
                font-size: 90%;
            }
            
            .chart-node-header-pill {
                border: solid 1px var(--white);
                padding: 3px!important;
                max-height: 22px;
                margin-right: 5px!important;
                font-weight: 300;
            }
            
            .chart-node-button {
                display: none;
                opacity: 70%;
            }
            
            .chart-node-button:hover,
            .btn.show.chart-node-button {
                background-color: var(--alto)!important;
            }
            
            .chart-node-button.show {
                display: block;
            }
            
             :not(#backlog)>.chart-node-container:hover>.chart-node-header>.dropend>button {
                display: block;
            }
            
            .chart-node-header:has(>.dropend>.show) {
                justify-content: space-between;
            }
            
             :not(#backlog)>.chart-node-container:hover>.chart-node-header {
                justify-content: space-between;
            }
            
            #chartDiv .chart-node-drag-handle {
                display: none;
            }
            
            #backlog .chart-node-header {
                justify-content: space-between;
            }
            
            .dropend .dropdown-toggle::after {
                display: none;
            }
            
            i.bi.bi-pipedrive {
                background-image: url(/media/pipedrive_monogram_light.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: auto;
                width: 18px;
                display: inline-block;
                height: 18px;
                position: relative;
                top: 4px;
                margin-right: 9px;
            }
            i.bi.bi-hubspot {
                background-image: url(/media/hubspot_monogram_light.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 18px;
                height: 18px;
                display: inline-flex; 
                vertical-align: middle;
                margin-right: 9px;
            }
            i.bi.bi-salesforce {
                background-image: url(/media/Salesforce.com_logo.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 18px;
                height: 18px;
                display: inline-flex; 
                vertical-align: middle;
                margin-right: 9px;
            }
            i.bi.bi-sugar {
                background-image: url(/media/Sugar-Logo.jpeg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 18px;
                height: 18px;
                display: inline-flex; 
                vertical-align: middle;
                margin-right: 9px;
            }
            i.bi.bi-close {
                background-image: url(/media/close.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 18px;
                height: 18px;
                display: inline-flex; 
                vertical-align: middle;
                margin-right: 9px;
            }
            .bi.bi-copper {
                background-image: url(/media/Copper_logo.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 18px;
                height: 18px;
                display: inline-flex; 
                vertical-align: middle;
                margin-right: 9px;
            }
        
            .pill-danger {
                background-color: var(--red);
            }

            .pill-passive {
                color: var(--alto);
                border-color: var(--alto);
            }
            
            .chart-node-vignette {
                position: relative;
                /* top: -33px; 
    margin-left: 4px!important;
    height: 0px; */
            }
            
            .chart-node-vignette>img {
                width: 40px;
                border-radius: 50%;
                background-color: var(--boulder);
                padding: 0px!important;
            }
            
            .chart-node-vignette>div {
                color: var(--white);
                background-color: var(--alto);
                font-size: 120%;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 400;
            }
            
            .chart-node-vignette.org>div {
                color: var(--white);
                background-color: var(--black);
                border-color: var(--black);
            }
            
            .chart-node-container {
                padding: 0px!important;
                height: 100%;
                border-radius: 5px;
                box-shadow: 0 0 1px 1px rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 31%);
            }
            .chart-node-container.highlight>.chart-node-header {
                background-color: var(--blue)!important;
            }
            .org-chart-node:has(.chart-node-container.highlight){
                border: 1px;
                border-color: var(--black);
                border-style: dashed;
                background-color: var(--white);
            }
            /* Preview Node */
            .previewContainer{
                position:absolute;
                width:100%;
                height: 30px;
            }
            .previewNode{
                height: 22px;
                width: 100%;
                background-color: var(--lightMint);
                border-radius: 5px;
                border: solid 1px var(--alto);
                margin-top: 4px !important;
                z-index: 100;
                position: relative;
                padding-left: 46% !important;
                font-size: 75%;
                padding-top: 0px !important;
            }
            .chart-node-collapsed.chart-node-parent>.chart-node-container:not(:has(.chart-node-body>.chart-node-line))>.chart-node-header,
            .google-visualization-orgchart-noderow-large:has(.org-chart-node:not(.node-xs)>.chart-node-container>.chart-node-body>.chart-node-line)>.org-chart-node:not(.chart-node-parent)>.chart-node-container:not(:has(.chart-node-body>.chart-node-line))>.chart-node-header {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
            
            .chart-node-collapsed.chart-node-parent>.chart-node-container:not(:has(.chart-node-body>.chart-node-line)),
            .google-visualization-orgchart-noderow-large:has(.org-chart-node>.chart-node-container>.chart-node-body>.chart-node-line)>.org-chart-node:not(.chart-node-parent)>.chart-node-container:not(:has(.chart-node-body>.chart-node-line)) {
                height: auto;
            }
            
            .chart-node-collapsed.chart-node-parent:not(:has(.chart-node-container>.chart-node-body>.chart-node-line)),
            .google-visualization-orgchart-noderow-large:has(.org-chart-node>.chart-node-container>.chart-node-body>.chart-node-line)>.org-chart-node:not(.chart-node-parent):not(:has(.chart-node-body>.chart-node-line)) {
                background-color: transparent;
            }
            
            #backlog>.chart-node-container {
                width: 250px;
                margin: 10px;
                background-color: var(--athens);
                border-radius: 5px;
                box-shadow: 0 0 1px 1px rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 31%);
            }
            
            #backlog>.chart-node-container>.chart-node-header {
                padding: 4px;
            }
            
            #backlog>.chart-node-container>.chart-node-header>.chart-node-name {
                padding-left: 4px;
            }
            
            #backlog>.chart-node-container>.chart-node-body {
                padding-left: 5px;
            }
            
            #backlog>.chart-node-container>.chart-node-vignette {
                font-size: 140%;
            }
            
            .chart-node-header-detail {
                font-size: 60%;
                font-weight: 400;
                /* margin-left: 70px!important; */
                padding-top: 4px!important;
                display: flex;
                flex-direction: row;
                align-items: baseline;
                width: 200px;
            }
            
            .chart-node-line {
                font-weight: normal;
                font-size: 80%;
                padding-bottom: 0px!important;
                display: flex;
                flex-direction: column;
                padding-top: 0px!important;
            }
            
            .chart-node-line>p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 2px;
                padding-top: 0px;
                line-height: 15px;
            }
            
            .chart-node-line>p:hover {
                display: block;
            }
            
            .chart-node-name {
                font-weight: bold;
                line-height: 100%;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .chart-node-name:hover {
                display: flex;
            }
            
            .chart-node-body:empty {
                display: none;
            }
            
            .maximize {
                height: 0px;
                background-color: transparent;
                color: var(--boulder);
                position: absolute;
                bottom: -6px;
                text-align: center;
                padding: 0px!important;
                width: 100%;
                cursor: pointer;
                font-size: 85%;
            }
            
            .google-visualization-orgchart-linenode>.maximize {
                position: relative;
                top: -10px;
                left: -24px;
                font-size: 200%;
            }
            
            .minimize {
                background-color: transparent;
                color: var(--boulder);
                position: relative;
                top: -10px;
                left: -13px;
                font-size: 200%;
                cursor: pointer;
            }
            
            .minimize>i,
            .maximize>i {
                background-color: var(--white);
                padding: 0px!important;
            }
            
            .contactlable {
                color: var(--boulder);
                font-weight: bold;
                font-size: 75%;
                padding-top: 7px;
            }
            
            .contactdata {
                font-size: 75%;
                display: flex;
                position: relative;
            }

            button.reveal-btn {
                background-color: var(--athens);
                color: var(--black);
                min-width: 22px;
                border: var(--green) 2px solid;
                border-radius: 8px;
                width: 104px;
                margin-left: 4px;
                padding: 4px 8px;
            }

            button.reveal-btn:hover {
                background-color: var(--green);
                color: var(--white);
            }

            button.reveal-btn.loadingSpinner {
                border: 4px solid var(--athens);
                border-top-color: var(--green);
                border-radius: 50%;
                animation: spin 1s linear infinite;
                height: 24px;
                width: 24px;
                border-width: 4px;
                background-color: transparent;
                color: transparent;
                margin: 2px;
            }
            
            .contactdata>input,
            .contactdata>select {
                width: 100%;
                padding-top: 0px;
                padding-left: 5px;
            }
            
            .contactdata>input:focus-visible {
                outline: none;
            }
            
            .autocomplete-items {
                position: absolute;
                border: 1px solid var(--alto);
                border-bottom: none;
                border-top: none;
                z-index: 99;
                top: 111%;
                left: 5px;
                right: 0;
                width: 330px;
                overflow-x: auto;
                max-height: 585px;
                box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
            }
            
            .autocomplete-items>div {
                cursor: pointer;
                padding: 7px;
                background-color: var(--white);
                border-bottom: 1px solid var(--alto);
            }
            
            .autocomplete-items>div:hover {
                background-color: var(--alto)
            }
            
            .autocomplete-active {
                background-color: var(--alto) !important;
                color: var(--white);
            }
            
            .form-control:focus {
                border-color: var(--alto)!important;
                box-shadow: 0 0 0 1px var(--darkShadow);
            }
            
            .hero-image {
                height: 100%;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 800px;
                position: relative;
                display: flex;
                padding-left: 0px;
                padding-right: 0px;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: space-between;
                background-color: var(--athens);
            }
            
            .offcanvas-start {
                top: 46px!important;
            }
            
            .offcanvas {
                bottom: 35px;
            }
            
            .offcanvas-header {
                position: relative;
                margin-bottom: 0px;
            }
            
            .bg-danger {
                background-color: var(--red)!important;
            }
            
            .btn .badge {
                margin-left: 5px;
            }
            
            .btn-check:focus+.btn,
            .btn:focus {
                outline: 0;
                box-shadow: 0 0 0 0.25rem transparent;
            }
            
            .spinner-border {
                font-size: x-small;
                height: 20px;
                width: 20px;
            }
            
            .bi.bi-building-add.org {
                font-size: 27px;
            }
            
            .pdLogo {
                width: 17px;
                padding-bottom: 4px;
            }
            
            .accordion-button {
                padding-top: 3px;
                padding-left: 4px;
                padding-right: 3px;
                padding-bottom: 0px;
                background-color: transparent;
                color: inherit;
                font-size: 14px;
                font-weight: bold;
            }
            
            .accordion-button:not(.collapsed)::after {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A2A2A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            }
            
            .accordion-button::after {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A2A2A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            }
            
            .accordion-button:not(.collapsed) {
                color: inherit;
                background-color: transparent;
                box-shadow: none;
            }
            
            .accordion-button:focus {
                box-shadow: none;
                border-color: none;
            }
            
            .accordion-body {
                padding-top: 5px;
                padding-left: 15px;
                padding-bottom: 20px;
                background-color: var(--white);
            }
            
            .accordion-item {
                /* background-color: transparent; */
                border: none;
                margin-bottom: 10px;
            }
            
            #main {
                height: calc(100vh - 80px);
            }
            
            #sideBarPopper {
                height: calc(100vh - 84px);
                padding: 0px;
                bottom: 35px;
                top: 54px;
                border-radius: 0;
                border-top: 0;
                border-color: var(--alto);
                background-color: var(--white);
                z-index: 1000;
                visibility: hidden;
            }
            
            #sideBarPopper:focus {
                box-shadow: none;
            }
            
            #backlog {
                background-color: var(--white);
                padding: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: 200px;
                max-height: calc(100vh - 400px);
                overflow-y: auto;
                box-shadow: rgb(204 204 204) 3px 3px 6px 0px inset, rgb(255 255 255 / 50%) -3px -3px 6px 1px inset;
            }
            /* #backlog>.cont-card-wrap {
    width: 250px;
    padding: 10px;
    margin: 10px;
    background-color: var(--alto);
    border-radius: 5px;
    box-shadow: 0 0 1px 1px rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 31%);
} */
            
            #backlog>.chart-node-container.sel-chart-node {
                background-color: var(--alto);
            }
            
            #backlog>.chart-node-container:hover {
                cursor: grab;
                background-color: var(--alto);
            }
            
            #sideBarPopper:hover {
                background-color: var(--alto);
                border-color: var(--alto);
            }
            
            .bi-lightbulb-fill {
                color: var(--red);
            }
            .progress-bar {
                background-color: var(--green);
            }
            .progress-bar.changed{
                background-color: var(--petrol);
            }
            .progress {
                height: 3px;
                padding-left: 0px;
                display: none;
            }
            .bar-container .btn-sm {
                height: 22px;
                width: 22px;
                padding: 0px;
            }
            #orgSelect>.btn-outline-light {
                border: none;
            }
            
            #orgSelect {
                display: flex;
                align-items: center;
            }
            
            .navbar-nav>.viz-help-btn {
                border: none;
            }
            #extensionDownloadTopMenuButton{
                color: var(--green);
            }
            #extensionDownloadTopMenuButton:hover{
                background-color: var(--green);
                color: var(--white);
            }
            
            #newsDown>.btn-outline-light {
                border: none;
            }
            
            #news {
                font-size: 75%;
                min-width: 350px;
            }
            
            #editBar {
                margin-left: 5px
            }
            
            #editBar>span>.btn-outline-light {
                border: none;
            }
            
            #navbar-collapse {
                justify-content: center;
                display: flex;
            }
            
            .navbar-toggler {
                margin-bottom: 10px;
            }
            
            #editBar>.dropdown>.btn-outline-light {
                border: none;
            }
            
            #settings {
                margin-right: 15px;
            }
            
            #conflictNote {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                visibility: hidden
            }
            /* #upgradeNavSection {
    display: none
} */
            
            #banner>i {
                color: var(--red)
            }
            
            #progBar {
                width: 0%
            }
            
            #conflictToggle:checked {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
            }
            
            #conflictToggle {
                background-color: var(--boulder);
                border-color: var(--boulder);
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
            }
            
            #autocomplete {
                position: relative;
                display: inline-block;
                border-radius: 5px;
                background-color: var(--white);
                min-width: 360px;
            }
            
            #autocomplete>i {
                padding-left: 10px;
                color: var(--boulder);
            }
            
            #addSearchField+#autocomplete-list {
                top: 90px;
                left: 23px;
            }
            
            #addSearchField+#autocomplete-spinner {
                top: 90px;
                left: 23px;
            }
            
            #searchField {
                width: 200px;
                display: inline-block;
                border: 0px;
                padding-left: 10px;
            }
            
            #searchField:focus {
                border: none;
                box-shadow: none;
            }
            
            #noOrgaFound {
                background-color: var(--alto);
                color: var(--white);
                cursor: default;
            }
            
            #notUserName {
                font-weight: bold;
                margin-top: 15px;
                padding-bottom: 0px;
                margin-bottom: 10px;
                padding-top: 0px;
                width: 74%;
            }
            
            #notUserName:focus-within {
                outline: none;
            }
            
            #chartDiv {
                float: right;
                padding: 20px;
                width: calc(100vw - 18px);
                overflow: auto;
                border-left: var(--white);
                transition: width 0.7s;
                transition-timing-function: ease;
                padding-top: 14px;
                cursor: all-scroll;
                user-select: none;
                -webkit-user-select: none; /* Safari */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* IE10+/Edge */
                background-color: var(--athens);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: auto 25%;
            }
            
            #chartDiv.scaled {
                overflow-x: hidden;
            }
            
            #chartDiv:has(#tableContainer) {
                cursor: auto;
                padding-right: 71px;;
            }
            
            .google-visualization-orgchart-noderow-large>td:not(.org-chart-node),
            .google-visualization-orgchart-connrow-large>td:not(.org-chart-node) {
                cursor: all-scroll;
                user-select: none;
                -webkit-user-select: none; /* Safari */
                -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* IE10+/Edge */
            }
            
            #viewSettingsHeader {
                top: 0px;
                justify-content: space-between;
            }
            
            #type_select:focus {
                border-color: var(--black);
            }
            #viewSettingsHeader>.btn-close {
                margin: 0;
            }
            .top-menu-tooltip {
                --bs-tooltip-bg: var(--boulder);
            }
            
            #sidebarContact {
                transition: 0.5s;
            }
            
            #editOrgDropDown {
                display: inline-flex;
                align-items: center;
            }
            
            #editOrg {
                border: 0px;
            }
            
            #tutBlock {
                width: 350px;
                margin: 10px;
                background-color: var(--athens);
            }
            
            #tutList>.list-group-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-align: left;
            }
            
            #tutList>.list-group-item.active {
                color: var(--athens);
                background-color: var(--boulder);
                border-color: var(--boulder);
            }
            
            #jobTitle {
                margin-bottom: 10px;
                width: 74%;
            }
            
            #jobTitle:focus-within {
                outline: none;
            }
            
            .editButton {
                font-size: 75%;
                margin-top: 12px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-left: 8px;
                padding-right: 8px;
            }
            
            #relOrgsList>div {
                padding-bottom: 5px;
            }
            
            #relatedOrgs {
                display: none
            }
            
            #relOrgsList>div>a {
                color: var(--boulder);
                font-weight: bold;
                font-size: 16px;
            }
            
            #headingThree {
                position: relative
            }
            
            #badge {
                right: 79%;
                top: 9%;
            }
            
            #backlogSearch {
                display: flex;
                justify-content: space-around;
                align-items: flex-end;
            }

            #inviteUsersStep .mb-4 {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            #inviteUsersSearch {
                width: 250px; 
                padding-top: 5px; 
                margin-left: 20px;
            }
            
            #backlogSearch>input {
                font-size: 70%;
                width: 290px;
                height: 25px
            }
            
            #backlog>p {
                text-align: center;
            }
            
            #ContactHeader {
                display: flex;
                justify-content: space-between;
            }
            
            #editPersonDropDown {
                display: inline-flex;
                align-items: center;
            }
            
            #savedSearchesTitle {
                cursor: default;
                background-color: var(--white);
                font-size: 80%;
                font-weight: bold;
                border-bottom: none;
                color: var(--boulder)
            }
            
            #blResizer {
                cursor: row-resize;
                height: 8px;
            }
            
            .org-chart-node.dropzone {
                border: 1px;
                border-color: var(--black);
                border-style: dashed;
                background-color: var(--white);
            }
            
            .org.dropzone {
                border: 2px;
                border-color: var(--boulder);
                border-style: dashed;
                background-color: var(--alto);
            }
            
            table {
                border-collapse: separate;
            }
            
            .tooltip {
                font-size: 70%;
            }
            
            #conflictText {
                font-size: 80%;
                color: var(--red);
                z-index: 1050;
                height: 35px;
            }
            
            #banner {
                background-color: var(--boulder);
                z-index: 1050;
                height: 35px;
                padding-top: 8px;
                text-align: center;
                font-size: 110%;
            }
            
            #banner>div>a:hover {
                color: var(--black)
            }
            
            #offcan {
                padding-top: 4px;
                left: 52px;
                box-shadow: 2px -10px 12px 0px rgba(0, 0, 0, 0.2);
            }
            
            #offcan>.btn-close {
                position: relative;
                left: 370px;
                border-radius: 0;
                opacity: 100;
                z-index: 10000;
            }
            
            #offcan>.btn-close:focus {
                box-shadow: none;
            }
            
            #offcan>.offcanvas-body {
                position: relative;
            }
            
            #backlogOrgname {
                margin-bottom: 0px;
            }
            
            .sideBarAction {
                margin-left: 3px;
                margin-right: 3px;
                padding-bottom: 4px;
                padding-left: 4px;
                padding-right: 4px;
                padding-top: 1px;
                height: 27px;
                text-align: center;
            }
            
            #pdOrgLink,
            #pdPersonLink {
                background-image: url(/media/pipedrive_monogram_light.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 27px;
            }
            
            #pdOrgLink:hover,
            #pdPersonLink:hover {
                background-image: url(/media/pipedrive_monogram_dark.svg);
            }
            /* Card Layout Variants*/
            
            .org-chart-node.node-s>.chart-node-container>.chart-node-body {
                /* display: none; */
            }
            
            .org-chart-node.node-s>.chart-node-container>.chart-node-header {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
            
            .org-chart-node.node-xs>.chart-node-container>.chart-node-body {
                display: none;
            }
            
            .org-chart-node.node-xs>.chart-node-container>.chart-node-header>.chart-node-name {
                display: none;
            }
            
            .org-chart-node.node-xs>.chart-node-container>.chart-node-header {
                border-radius: 23px;
                justify-content: center;
                width: 46px;
                position: relative;
                padding-left: 6px;
            }
            
            .org-chart-node.node-xs {
                min-width: 0px;
                background-color: transparent;
            }
            
            .org-chart-node.node-xs>.chart-node-container {
                box-shadow: none;
            }
            
            .chart-node-multi {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                height: 100%;
                flex-wrap: wrap;
            }
            
            .chart-node-multi-item {
                margin-left: 0px!important;
                margin-right: 5px!important;
                margin-bottom: 2px!important;
                margin-top: 2px!important;
                background-color: var(--black);
                color: var(--white);
                border-radius: 10px;
                height: 16px;
                padding-left: 4px!important;
                padding-right: 4px!important;
                padding-bottom: 0px!important;
                padding-top: 0px!important;
                text-align: center;
                font-size: 80%;
            }
            
            /* .node-s>.chart-node-container {
                background-color: var(--white);
                box-shadow: none;
            } */
            
            .node-s:hover>.chart-node-container {
                background-color: var(--alto);
            }
            /*HOVER*/
            
            .org-chart-node.node-s>.chart-node-container:hover>.chart-node-body {
                display: block;
            }
            
            .org-chart-node.node-s:hover>.chart-node-container>.chart-node-header {
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
            }
            
            .org-chart-node.node-xs:hover>.chart-node-container>.chart-node-header {
                left: 0px!important;
                width: auto;
                justify-content: flex-start;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
            
            .org-chart-node.node-xs:hover>.chart-node-container>.chart-node-header>.chart-node-name {
                display: block;
            }
            
            .node-xs:has(.chart-node-container>.chart-node-header>.dropend>.show)>.chart-node-container>.chart-node-header>.chart-node-name {
                display: block;
            }
            
            .node-xs:has(.chart-node-container>.chart-node-header>.dropend>.show)>.chart-node-container>.chart-node-header {
                left: 0px!important;
                width: auto;
                justify-content: flex-start;
                justify-content: space-between;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
            /*DEALS*/
            
            #DealsCollapseHeader>span,
            #activityAccordionItem>h2>span {
                background-color: var(--red);
                left: 75%;
                position: relative;
                font-size: 35%;
                top: -33px;
                height: 18px;
                width: 63px;
            }
            
            #DealsCollapseHeader,
            #activityAccordionItem>h2 {
                height: 30px
            }
            
            .label-beta {
                background-color: var(--red);
                margin-left: 40px;
            }
            
            .sb-deal-title {
                font-weight: bold;
            }
            
            .sb-deal-value,
            .sb-deal-stage {
                font-size: 75%;
            }
            
            .sb-deal-container {
                padding: 6px;
                border-radius: 5px;
            }
            
            .sb-deal-container.active,
            .sb-deal-container:hover {
                background-color: var(--alto);
                color: var(--white);
            }
            
            .sb-deal-container.active>div>a {
                color: var(--white);
            }
            
            .sb-deal-close, .sb-deal-group {
                display: none;
                border-radius: 5px;
                margin-right: 0px;
                padding: 4px;
                line-height: 0px;
            }
            .sb-deal-container:hover .sb-deal-close,
            .sb-deal-container.active .sb-deal-close,
            .sb-deal-container:hover .sb-deal-group,
            .sb-deal-container.active .sb-deal-group {
                display: block;
            }
            .deal-search-container {
                width: 80%;
            }
            #zoomMenu {
                position: fixed;
                right: 77px;
                bottom: 65px;
                border: solid 1px var(--boulder);
                border-radius: 30px;
                padding-left: 8px;
                padding-right: 8px;
                padding-top: 4px;
                padding-bottom: 4px;
                background-color: var(--white);
                font-size: 130%;
                z-index: 100;
            }
            
            #zoomMenu>span>button {
                border: none!important;
            }
            
            #zoomMenu>span>button:hover {
                color: var(--white);
                background-color: var(--black);
            }
            
            #minimenu {
                display: none;
                position: fixed;
                right: 30px;
                top: 60px;
                border: solid 1px var(--boulder);
                border-radius: 30px;
                padding-left: 8px;
                padding-right: 8px;
                padding-top: 4px;
                padding-bottom: 4px;
                background-color: var(--white);
                font-size: 130%;
                z-index: 100;
            }
            
            .dropdown-item>.bi {
                margin-right: 5px;
            }
            
            #miniMenuContainer {
                display: flex;
            }
            
            #miniMenuContainer>span {
                margin-left: 6px;
                margin-right: 6px;
            }
            
            #miniMenuContainer>span>.btn {
                border: none;
            }
            
            #miniMenuContainer>span>.btn {
                border: none;
                font-size: 80%;
            }
            
            #miniMenuContainer>span>.btn:disabled {
                border: none;
                font-size: 80%;
            }
            
            #miniMenuContainer>span>.btn:hover,
            #miniMenuContainer>span>div>.btn:hover {
                color: var(--white);
                background-color: var(--black);
            }
            
            #theBurger {
                color: var(--white);
                margin-left: 2px;
                margin-right: 2px;
                font-size: 106%;
            }
            
            #myViewsList>li>a,
            #sharedViewsList>li>a {
                cursor: pointer;
            }
            
            #coloring.show {
                border: none;
            }
            
            #QCList>.active {
                background-color: var(--alto);
            }
            
            #QCList>.active>a {
                color: var(--white);
            }
            
            .placeholder {
                background-color: transparent;
                cursor: auto;
                color: var(--white)!important;
            }
            
            .chart-node-line>label {
                font-size: 70%;
                font-weight: bold;
                padding: 0px;
                overflow: hidden;
            }
            
            .leader-line>text {
                pointer-events: all;
                cursor: pointer;
            }
            /* Multiselect*/
            
            select[disabled]+.multiselect-dropdown {
                outline: none;
                border: none;
                padding-top: 0px;
                width: 100%!important;
                background-image: none;
            }
            
            .multiselect-dropdown {
                width: 100%!important;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
                border-color: var(--black);
            }
            
            .multiselect-dropdown span.optext {
                display: inline-flex;
                align-items: center;
                font-size: 90%;
                padding-top: 0px;
                padding-bottom: 0px;
            }
            
            .details-edit {
                /* display: none; */
                visibility: hidden;
                width: 26px;
                height: 26px;
                border: none !important;
                background-color: var(--alto);
                color: var(--white);
                padding: 0px;
                margin-left: 10px;
                margin-bottom: 6px;
            }
            
            .details-edit:hover {
                border: none !important;
                background-color: var(--alto);
                color: var(--white);
            }
            
            .create-dialogue>div:hover>.details-edit {
                /* display: none; */
                visibility: hidden;
            }
            
            .details-row:hover>.details-edit {
                /* display: block; */
                visibility: visible;
            }
            
            .contactdata>select:disabled {
                -webkit-appearance: none;
                -moz-appearance: none;
            }
            
            .add-to-deal-action {
                display: none;
            }
            
            .node-xs>.chart-node-container>.chart-node-header>.dropend>ul>li>.add-to-deal-action {
                display: block;
            }
            
            .remove-from-deal-action {
                display: none;
            }
            
            .node-s>.chart-node-container>.chart-node-header>.dropend>ul>li>.remove-from-deal-action {
                display: block;
            }
            /*Activities*/
            
            button.btn.btn-outline-dark.btn-sm.sb-activity-button {
                height: 25px;
                width: 25px;
                padding: 2px;
                border-color: var(--boulder);
                color: var(--boulder);
            }
            
            button.btn.btn-outline-dark.btn-sm.sb-activity-button:hover {
                color: var(--white);
                background-color: var(--boulder);
            }
            
            .activity-lable {
                color: var(--boulder);
                font-weight: bold;
                font-size: 85%;
                padding-top: 7px;
                max-width: 285px;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            
            .activity-lable:hover {
                display: block;
            }
            
            li.list-group-item.sb-activity-container {
                border: none;
                padding-left: 0px;
                padding-right: 0px;
            }
            
            .activity-input-container>input,
            .activity-input-container>select {
                margin-bottom: 10px;
            }
            
            .activity-input-container>label {
                font-size: 85%;
                font-weight: bold;
            }
            /* Lines */
            
            .Link-Menu-Container {
                width: 162px;
                display: flex;
                align-items: flex-start;
                max-width: 300px;
                flex-direction: column;
                z-index: 2;
                background-color: var(--white);
                box-shadow: 0 0 1px 1px rgb(0 0 0 / 20%), 0 3px 3px -2px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 40%);
                padding: 5px;
                padding-top: 3px;
                border-radius: 5px;
            }
            
            .Link-Menu-Container>div>input {
                width: 126px;
                height: auto;
                border-radius: 3px;
                padding: 3px;
                font-size: 80%;
                /* box-shadow: 0 0 1px 1px rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 31%); */
                margin-bottom: 5px;
            }
            
            .Link-Menu-Container>.d-flex>button {
                border: none;
            }
            
            .Link-Menu-Container>div>button {
                background-color: var(--white);
            }
            
            .leader-line {
                z-index: 0;
            }
            
            .leader-line:has(text:hover) {
                z-index: 2;
            }
            
            input[type="color"].personLinkColorPicker {
                top: 5px;
                position: relative;
                margin-left: 3px;
                margin-right: 3px;
                width: 26px;
                height: 27px;
                border-radius: 4px;
                padding: 3px;
                background-color: var(--white);
                cursor: pointer;
            }
            
            input[type="color"].personLinkColorPicker:hover,
            input[type="color"].personLinkColorPicker:focus {
                background-color: var(--black);
                color: var(--white);
            }
            
            .lineConnectMode .org-chart-node:hover {
                cursor: pointer;
            }
            
            .lineConnectMode .org-chart-node:hover:has(.org),
            .lineConnectMode .org-chart-node:hover:has(.note) {
                cursor: not-allowed;
            }
            /* Groups */
            
            input.chart-node-line {
                background-color: transparent;
                border-radius: 5px;
                box-shadow: none;
                border: none;
                cursor: grab;
                height: 26px;
                width: 100%;
            }
            
            .chart-node-body.note {
                height: calc(100% - 26px);
                outline: none;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                font-size: 80%;
                font-weight: normal;
            }
            
            .chart-node-body.note:hover {
                display: block;
            }
            
            .sel-chart-node:has(.chart-node-container>.chart-node-body.note-edit) {
                background-color: var(--athens);
            }
            
            .org-chart-node:has(.chart-node-container>.chart-node-body.note-edit):hover {
                background-color: var(--athens);
            }
            
            input.chart-node-line:focus,
            .chart-node-header.note.note-edit>input {
                outline: white;
                border: 1px solid var(--athens);
                cursor: initial;
            }
            
            .chart-node-header.note>i,
            .chart-node-header.note>input {
                color: var(--athens);
            }
            
            .group-color-input {
                width: 0px!important;
                height: 0px;
                border: none!important;
            }
            
            input.chart-node-line:focus-within {
                outline: none;
                border: none;
            }
            
            .chart-node-body.note.note-edit {
                outline: none;
                color: var(--black);
                cursor: text;
                display: inline-block;
                width: 98%;
                font-size: 80%;
                font-weight: normal;
                border-radius: 5px;
                margin: 2px;
            }
            
            .chart-node-container:has(.chart-node-body.note.note-edit) {
                background-color: var(--white);
            }
            
            .note>.sideBarAction {
                color: var(--athens);
                border: 1px solid var(--athens);
                display: none;
                padding: 2px;
                margin-left: 4px;
            }
            
            .note>.sideBarAction:hover {
                background-color: var(--alto);
            }
            
            .note-edit>.sideBarAction {
                display: block;
            }
            
            .note-edit {
                height: auto;
            }
            
            .note-edit>.dropend {
                display: none;
            }
            /*Dropdown*/
            
            .dropdown-menu li {
                position: relative;
                cursor: default;
            }
            
            .nav-item .submenu {
                display: none;
                position: absolute;
                left: 100%;
                top: -7px;
            }
            
            .nav-item .submenu-left {
                right: 100%;
                left: auto;
            }
            
            .dropdown-menu>li:hover {
                background-color: #f1f1f1
            }
            
            .dropdown-menu>li:hover>.submenu {
                display: block;
                right: 150px;
                top: 0px;
            }
            
            #sidebarMenu {
                z-index: 1100;
                padding-left: 0;
                border-right: solid 1px var(--alto);
                height: 100%;
                visibility: hidden;
                background-color: var(--white);
            }
            
            .sidebarMenuTitle {
                display: flex;
                align-items: baseline;
                cursor: pointer;
                font-size: large;
                padding: 10px;
                padding-left: 15px;
                width: 50px;
                transition: width 0.5s;
            }
            
            .sidebarMenuTitle.active,
            .sidebarMenuTitle:hover {
                background-color: var(--alto);
            }
            
            .sidebarMenuTitleIcon {
                height: 25px;
                width: 25px;
                margin-right: 5px;
            }
            
            .sidebarMenuTitleText {
                display: none;
                width: 250px;
                margin-left: 5px;
                white-space: nowrap;
                overflow: hidden;
            }
            
            #sidebarMenu:has(.sidebarMenuTitle:hover) .sidebarMenuTitleText {
                display: block;
            }
            
            #sidebarMenu:has(.sidebarMenuTitle:hover) .sidebarMenuTitle {
                width: 245px;
            }
            
            .sideBar-item {
                display: none;
                margin-top: 15px;
            }
            
            #sideBarInfo, .configInfo {
                padding: 8px;
                font-size: smaller;
                color: var(--black);
                margin-top: 0px;
                margin-bottom: 20px;
                background-color: var(--iceBlue);
                border-radius: 4px;
            }
            #sideBarInfo{
                top: -16px;
                position: relative;
            }
            .info-icon {
                color: var(--blueShadow);
                margin-right: 6px;
            }
            /*/Loading Animation/*/
            @keyframes spin {
                to { transform: rotate(360deg); }
            }

            @keyframes vizrmLoader {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            
            @-o-keyframes vizrmLoader {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            
            @-moz-keyframes vizrmLoader {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            
            @-webkit-keyframes vizrmLoader {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            
            .vizrmLoader {
                display: none;
                -webkit-animation: vizrmLoader 1.5s infinite ease;
                -moz-animation: vizrmLoader 1.5s infinite ease;
                -o-animation: vizrmLoader 1.5s infinite ease;
                animation: vizrmLoader 1.5s infinite ease;
                justify-content: center;
                margin: 15px;
                background-image: url(/media/Logo_Square_K.png);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                height: 80px;
            }
            
            #chartLoader {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }
            
            #chartLoaderStatus {
                margin-top: 15px;
                color: var(--boulder);
            }
            
            .chart-node-body.org.loading:empty {
                /* background-color: pink; */
                margin-top: 10px;
                margin-left: 2%;
                min-height: 20px;
                width: 94%;
                display: block;
                background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), lightgray;
                background-repeat: repeat-y;
                background-size: 50px 500px;
                animation: shine 1s infinite;
                bottom: 4px;
                position: relative;
            }
            @keyframes shine {
                to {
                  background-position: 100% 0, /* move highlight to right */ 0 0;
                }
            }
            .chart-node-body.org.loading>.chart-node-line {
                display: none;
            }

            #activityDetails>div>p,
            #relOrgsList>div>p {
                font-size: small;
                text-align: center;
            }
            /*/Licenses and Upgrades/*/
            .d-none{
                display: none!important;
            }
            .upgradeInfoContainer{
                background-color: var(--white);
                padding: 4px;
            }
            .upgradeInfoText{
                font-size: 80%;
                color: var(--darkBlack);
                padding: 8px;
                margin: 4px;
                background-color: var(--iceBlue);
            }
            .upgradeInfoText>img {
                width: 100%;
                padding: 4px;
                margin-top: 12px;
                margin-bottom: 12px;
            }
            .upgradeInfoText>div {
                display: flex;
                justify-content: center;
                padding: 4px;
            }
            #viewsTopList>.upgradeInfoText>div {
                margin-top: 10px;
            }
            .infoLink{
                color: var(--blue)!important;
            }
            .upgradeActionLink{
                color: var(--white);
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 6px;
                padding-bottom: 6px;
                background-color: var(--petrol);
                text-decoration: none;
                font-weight: bolder;
                border-radius: 5px;
            }
            .upgradeActionLink:hover{
                background-color: var(--white);
                color: var(--petrol);
            }
            .dealInfoText{
                margin: 8px;
            }
            /*Upgrade Modal*/
            .upgradeModal{
                z-index: 10001;
            }
            .price,
            .price-prefix
            .price-postfix{
                margin-top:0px;
                margin-bottom:0px;
                margin-left:5px;
            }
            .price-slack{
                color:var(--boulder);
                margin-top:0px;
                margin-bottom: 20px;
                font-size:85%;
                padding-left: 6px;
            }
            .price-container{
                display:flex;
                align-items:baseline;
                margin-top: 30px;
                justify-content: center;
            }
            .plan-title{
                margin-bottom:0px;
            }
            .plan-descriptor{
                padding: 0px;
                line-height: 1.2;
                font-size: 80%;
                min-height: 27px;
            }
            .plan-descriptor>td {
                text-align: center;
            }
            .pricing-modal-table{
                border-collapse: collapse;
            }
            .pricing-modal-table th {
                font-size: x-large;
                text-align: center;
            }
            .pricing-modal-table .feature{
                font-size: 90%;
                min-width: 230px;
                font-weight: bold;
            }
            .pricing-modal-table td:has(.bi) {
                text-align: center;
            }
            .pricing-modal-table td:has(.feature-limit) {
                font-size: 80%;
                text-align: center;
            }
            .pricing-modal-table p.feature-limit {
                margin: 0;
            }
            .pricing-modal-table .highlight {
                background-color: var(--iceBlue);
                border: solid, 2px, var(--blue);
            }
            .pricing-modal-table .recommend {
                text-align: center;
                color: var(--blue);
                padding-top: 26px;
                padding-bottom: 12px;
                font-weight: bold;
            }
            .pricing-modal-table .current-indicator {
                text-align: center;
                padding-top: 26px;
                padding-bottom: 12px;
            }
            .modal .checkoutButton {
                background-color: var(--gold);
                border-color: var(--white);
            }
            .modal .checkoutButton:hover {
                background-color: var(--white);
                border-color: var(--gold);
                color: var(--gold);
                font-weight: bold;
            }
            button.btn.btn-primary.checkout-button {
                margin-top: 12px;
                margin-bottom: 12px;
                background-color: var(--gold);
                border: 1px solid var(--white);
                position: relative;
                display: flex;
                align-items: center;
            }
            button.btn.btn-primary.checkout-button:hover {
                background-color: var(--white);
                color: var(--gold);
                border: 1px solid var(--gold);
            }
            #cart-btn.btn-loading {
                padding-right: 40px;
                pointer-events: none;
                opacity: 0.7;
            }
            #cart-btn.btn-loading::after {
                content: "";
                position: absolute;
                right: 10px;
                width: 14px;
                height: 14px;
                border: 2px solid #ccc;
                border-top: 2px solid transparent;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }
           
            .btn-check:checked+.btn {
                background-color: var(--alto);
                color: var(--black);
                border-color: var(--boulder);
            }
            .control-container > .btn-dark {
                top: 12px;
                position: relative;
            }

            .radio-label {
                padding-left: 20px;
                cursor: pointer;
            }

            /* In-App Adds for Batman */
            .in-app-ad{
                background-color: var(--white);
            }
            .in-app-ad .cta{
                background-color: var(--green);
                border: solid 1px var(--green);
            }
            .in-app-ad .cta:hover{
                background-color: var(--white);
                color: var(--green);
            }
            .iframe-container {
                width: 100%;
                height: calc(100% - 50px);
                border: none;
            }
            body.modal-open {
                overflow: hidden;
            }
            
            .blur-background {
                filter: blur(5px);
                pointer-events: none;
            }
            /*/Dark Mode/*/
            
            @media (prefers-color-scheme: dark) {
                 :root {
                    color-scheme: dark;
                }
                .form-control-plaintext {
                    color: var(--athens);
                }
                .contactlable {
                    color: var(--athens);
                }
                #searchField {
                    background-color: #000000;
                    color: var(--athens);
                }
                input {
                    background-color: var(--darkBlack);
                    border-color: var(--darkBlack);
                    color: var(--athens);
                }
                button {
                    color: var(--athens);
                }
                .contactdata>input,
                .contactdata>select {
                    background-color: var(--darkShadow);
                    border-color: var(--darkBlack);
                }
                .contactdata>input.form-control-plaintext,
                .contactdata>select.form-control-plaintext {
                    background-color: var(--darkBlack);
                    border-color: var(--darkBlack);
                }
                #searchFieldautocomplete-list {
                    background-color: var(--black);
                }
                #autocomplete {
                    background-color: #000000;
                    color: var(--athens);
                }
                #autocomplete>input {
                    color: var(--athens);
                }
                #autocomplete>input::placeholder {
                    color: var(--athens);
                }
                #autocomplete>i {
                    color: var(--athens);
                }
                .autocomplete-active {
                    background-color: var(--alto)!important;
                    color: var(--black);
                }
                .autocomplete-items>div {
                    background-color: var(--black);
                    border: var(--darkBlack);
                }
                .autocomplete-items>div:hover {
                    background-color: var(--alto);
                    color: var(--black);
                }
                .autocomplete-items {
                    border: none;
                }
                .minimize,
                .maximize {
                    color: var(--white);
                    background-color: transparent;
                }
                .dropdown-divider {
                    border-color: var(--boulder);
                }
                #sideBarPopper {
                    background-color: var(--darkBlack);
                    border-color: var(--black);
                }
                #backlog {
                    background-color: var(--darkBlack);
                    color: var(--black);
                    box-shadow: rgb(70 70 70) 3px 3px 6px 0px inset, rgb(70 70 70 / 50%) -3px -3px 6px 1px inset;
                }
                #removeOrg {
                    color: var(--white);
                }
                #sideBarPopper:hover {
                    background-color: var(--black);
                    background-color: var(--darkBlack);
                }
                .dropdown-header {
                    color: var(--alto)
                }
                label {
                    color: var(--black);
                }
                .card {
                    border-color: var(--darkShadow);
                }
                .card-header {
                    background-color: var(--darkShadow);
                    color: var(--athens);
                }
                .card-body {
                    background-color: var(--black);
                    color: var(--athens);
                }
                .form-control {
                    background-color: var(--darkBlack);
                    color: var(--athens);
                    border: none;
                }
                .form-control::placeholder {
                    color: var(--alto);
                }
                .form-control:focus {
                    background-color: var(--darkBlack);
                    color: var(--athens);
                }
                #news {
                    background-color: var(--darkBlack);
                }
                .list-group-item.disabled,
                .list-group-item:disabled {
                    background-color: var(--darkShadow);
                }
                #tutList>.list-group-item.active {
                    background-color: var(--darkBlack);
                    border-color: var(--darkBlack);
                }
                #tutBlock {
                    background-color: var(--black);
                }
                #offcanPin {
                    color: var(--athens);
                }
                #pdOrgLink,
                #pdPersonLink {
                    background-image: url(/media/pipedrive_monogram_dark.svg);
                }
                #editOrg {
                    color: var(--white);
                }
                .accordion-button:not(.collapsed)::after {
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                }
                .accordion-button::after {
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                }
                #relOrgsList>div>a {
                    color: var(--white);
                }
                #editPerson {
                    color: var(--white);
                }
                #savedSearchesTitle {
                    background-color: var(--black);
                    color: var(--alto)
                }
                .minimize>i,
                .maximize>i {
                    background-color: var(--black);
                    padding: 0px!important;
                }
                .accordion-item {
                    background-color: var(--darkBlack);
                    color: var(--athens);
                }
                .btn:disabled {
                    border-color: var(--boulder);
                    color: var(--boulder);
                }
                .org-chart-node.dropzone {
                    background-color: var(--black);
                }
                #minimenu {
                    background-color: var(--darkBlack);
                }
                #miniMenuContainer>span>.btn {
                    color: var(--white);
                }
                #miniMenuContainer>span>.dropdown>.btn {
                    color: var(--white);
                }
                #miniMenuContainer>span>.dropdown>.btn:hover {
                    border-color: transparent;
                    color: var(--black);
                    background-color: var(--athens);
                }
                #miniMenuContainer>span>.btn:disabled {
                    color: var(--alto);
                }
                #miniMenuContainer>span>.btn:hover {
                    color: var(--black);
                    background-color: var(--athens);
                }
                #zoomMenu {
                    background-color: var(--darkBlack);
                }
                #zoomMenu>span>.btn {
                    color: var(--white);
                }
                #zoomMenu>span>.dropdown>.btn {
                    color: var(--white);
                }
                #zoomMenu>span>.dropdown>.btn:hover {
                    border-color: transparent;
                    color: var(--black);
                    background-color: var(--athens);
                }
                #zoomMenu>span>.btn:disabled {
                    color: var(--alto);
                }
                #zoomMenu>span>.btn:hover {
                    color: var(--black);
                    background-color: var(--athens);
                }
                .chart-node-line>label {
                    color: var(--boulder);
                }
                .multiselect-dropdown {
                    background-color: var(--darkBlack);
                    color: var(--athens);
                }
                footer>.container-fluid {
                    background-color: var(--black);
                }
                .node-s>.chart-node-container {
                    background-color: var(--darkBlack);
                }
                .node-s:hover>.chart-node-container {
                    background-color: var(--alto);
                }
                .control-container>label {
                    color: var(--white);
                }
                .activity-input-container>label {
                    color: var(--athens);
                }
                .activity-input-container>select {
                    background-color: var(--darkBlack);
                    color: var(--athens);
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                    border: none;
                }
                .activity-input-container>select:focus {
                    box-shadow: none;
                }
                .list-group-item {
                    background-color: var(--darkBlack);
                    color: var(--athens);
                }
                .activity-lable {
                    color: var(--athens);
                }
                button.btn.btn-outline-dark.btn-sm.sb-activity-button {
                    border-color: var(--athens);
                    color: var(--athens);
                }
                .Link-Menu-Container {
                    background-color: var(--darkShadow);
                    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.723), 0 3px 3px -2px rgba(255, 255, 255, 0.842), 0 1px 3px 0 rgba(255, 255, 255, 0.4)
                }
                .Link-Menu-Container>input,
                .Link-Menu-Container>input:focus {
                    background-color: var(--darkBlack);
                }
                .Link-Menu-Container>div>button,
                .Link-Menu-Container>div>input {
                    background-color: var(--darkBlack)!important;
                }
                .Link-Menu-Container>div>button:hover {
                    background-color: var(--athens)!important;
                    color: var(--black);
                }
                #sidebarMenu {
                    background-color: var(--black);
                    border-right: solid 1px var(--darkShadow);
                }
                .accordion-body {
                    background-color: var(--darkBlack);
                }
                .vizrmLoader {
                    background-image: url(/media/Logo_Square_f.png);
                }
                .offcanvas {
                    color: var(--white)
                }
                .table>:not(caption)>*>*{
                    background-color: transparent;
                    color: var(--white);
                }
                .upgradeInfoContainer{
                    background-color: var(--darkBlack);
                }
                .upgradeInfoText{
                    color: var(--white);
                    background-color: var(--blueShadow);
                }
                .price-slack{
                    color: var(--alto);
                }
                .pricing-modal-table .highlight {
                    background-color: var(--blueShadow);
                }
                .pricing-modal-table .recommend {
                    color: var(--iceBlue);
                }
                #createOrgChartButtonHome {
                    border: solid var(--white);
                }
            }