body {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s linear;
}
body.loaded {
    visibility: visible;
    opacity: 1;
}

body.landing-page {
	margin: 0;
	height: 100vh;
}
body.landing-page .container {
	height: 100%;
	min-height: 740px;
}
body.landing-page .container .content {
	width: 500px;
	border: solid 1px #e8dce9;
	box-shadow: 0 0 50px 0 rgb(122 114 129 / 18%);
}

.oght-logo {
	width: 120px;
	height: auto;
}
#oght-background {
	min-height: 600px;
	filter: saturate(0.4)
			brightness(0.9)
			sepia(0.4)
			hue-rotate(211deg)
			saturate(1.5);
}

.button-primary {
    box-shadow: inset 0 0 0px 0 #b1c1ff, inset 0 0 0px 0 #89a1ff;
    transition: box-shadow 0.8s cubic-bezier(0.15, 0, 0.1, 1);
}
.button-primary:not([disabled]):hover {
    box-shadow: inset 0 0 30px 0 #b1c1ff, inset 0 0 15px 0 #89a1ff;
}

.oght-toggle {
    background: #f7f7f7;
    width: 60px;
    height: 30px;
    border: solid 1px #8C898A;
    border-radius: 20px;
    transition: all 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
.oght-toggle .switch {
    background: #fff;
    left: 2.5px;
    width: 24px;
    height: 24px;
    border: solid 1px #8C898A;
    border-radius: 20px;
    transition: all 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
.oght-toggle.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.oght-toggle.selected .switch{
    border-color: var(--color-primary);
    left: 32px;
}


#oght-alert {
    margin: auto;
    width: 500px;
    left: 0;
    right: 0;
    bottom: 20px;
    border-style: solid;
    border-width: 1px;
    transition: left 0.7s cubic-bezier(0.15, 0, 0.1, 1);
    animation: oght-alert 1s cubic-bezier(0.15, 0, 0.1, 1);
}
#oght-alert.remove {
    bottom: -10px;
    transform: translateY(100%);
    animation: oght-alert-remove 0.5s cubic-bezier(0.15, 0, 0.1, 1);
}
#oght-alert .content .icon {
    padding: 8px;
    width: 40px;
    height: 40px;
}
#oght-alert .content .icon svg {
    width: 12px;
    height: 12px;
}
#oght-alert .content .message {
    width: calc(100% - 50px);
    line-height: 1em;
}
#oght-alert .content .message .close {
    width: 12px;
    height: 12px;
}
#oght-alert .content .message .close:hover {
    opacity: 1;
}

#oght-alert.error {
    background: #ed1f24;
    border-color: #FF676A;
    box-shadow: -3px 3px 15px 0 hsl(359deg 85% 53% / 20%);
}
#oght-alert.error .progress-bar {
    background: #E50004;
}
#oght-alert.error .content .icon {
    background: #FF3E42;
}
#oght-alert.error .content .icon svg {
    fill: #ed1f24;
}

#oght-alert.success {
    background: #24A243;
    border-color: #3DC55F;
    box-shadow: -3px 3px 15px 0 hsl(135deg 63% 39% / 20%);
}
#oght-alert.success .progress-bar {
    background: #059929;
}
#oght-alert.success .content .icon {
    background: #35B354;
}
#oght-alert.success .content .icon svg {
    fill: #24A243;
}

@keyframes oght-alert{
    0%{
        bottom: 0px;
        transform: translateY(100%);
    }
    100%{
        bottom: 20px;
        transform: translateY(0%);
    }
}
@keyframes oght-alert-remove{
    0%{
        bottom: 20px;
        transform: translateY(0%);
    }
    100%{
        bottom: -10px;
        transform: translateY(100%);
    }
}


#oght-modal {
    backdrop-filter: blur(10px);
    animation: oght-modal-show 0.5s linear;
}
#oght-modal > .container > * {
    box-shadow: -10px 10px 50px 0 rgba(95, 87, 185, 0.3);
}
@keyframes oght-modal-show{
    0%{
        backdrop-filter: blur(0px);
    }
    100%{
        backdrop-filter: blur(10px);
    }
}


#oght-notifications {
    background: #3e3b5b;
    opacity: 1;
    width: 350px;
    right: 28px;
    top: 41px;
    max-height: calc(100vh - 70px);
    border: solid 1px #6e66ba;
    box-shadow: -5px 5px 20px 0 rgb(40 34 36 / 15%), inset 0 0 30px 0 #625ba7;
    animation: notifications-open 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
#oght-notifications.closing {
    opacity: 0;
    animation: notifications-close 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
#oght-notifications .heading .close {
    fill: #635e91;
    width: 15px;
    right: -13px;
    top: -12px;
    transition: all 0.5s linear;
}
#oght-notifications .heading .close:hover {
    fill: #776be5;
}
#oght-notifications .filters .container .tile-container .sizer .filter{
    position: relative;
    padding: 7px 15px 4px 15px;
    left: 27px;
    font-weight: 600;
    border: solid 1px #5d5a7d;
    border-radius: 30px;
	box-shadow: inset 0 0 0px 0 #5f57b9;
    transition: all 0.3s linear;
}
#oght-notifications .filters .container .tile-container:last-child .sizer .filter {
    margin-right: 45px;
}
#oght-notifications .filters .container .tile-container.selected .sizer .filter {
    background: #2a2745;
}
#oght-notifications .filters .container .tile-container:not(.selected) .sizer .filter:hover {
	box-shadow: inset 0 0 20px 0 #5f57b9;
    border-color: #726eb0;
}
#oght-notifications .content {
    height: calc(100% - 113px);
}
#oght-notifications .content .empty {
    color: #9a94dd;
}
#oght-notifications.no-notifications .content .empty {
    height: calc(100vh - 183px);
    max-height: 557px;
}
#oght-notifications.no-notifications .content .empty .icon {
    fill: #9a94dd;
}
#oght-notifications .content .notifications .notification{
	left: 0px;
    border: solid 1px #5d5a7d;
	box-shadow: inset 0 0 0px 0 #5f57b9;
    transition: background 0.9s linear,
				left 0.7s cubic-bezier(0.15, 0, 0.1, 1),
				box-shadow 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
#oght-notifications .content .notifications .notification:not(:first-child){
    margin-top: 15px;
}
#oght-notifications .content .notifications .notification:hover {
    background: #4d4d73;
	left: 3px;
	box-shadow: inset 0 0 30px 0 #5f57b9;
    border: solid 1px #726eb0;
}
#oght-notifications .content .notifications .notification .close {
    fill: #7f77e8;
    opacity: 0;
    width: 10px;
    right: 6px;
    top: 6px;
    transition: all 0.5s linear;
}
#oght-notifications .content .notifications .notification:hover .close {
    opacity: 1;
}
#oght-notifications .content .notifications .notification .close:hover {
    fill: #b3acff;
}
#oght-notifications .content .notifications .notification .read-indicator {
    opacity: 0;
    background: #27c94f;
    width: 8px;
    aspect-ratio: 1/1;
    left: 9px;
    top: 9px;
    transition: opacity 0.5s linear;
}
#oght-notifications .content .notifications .notification.unread .read-indicator{
    opacity: 1;
}
#oght-notifications .content .notifications .notification .avatar {
    background: #2a2745;
    width: 40px;
    height: 40px;
	border: solid 1px #444356;
	transition: all 0.3s linear;
}
#oght-notifications .content .notifications .notification:hover .avatar {
	border: solid 1px #5a5972;
}
#oght-notifications .content .notifications .notification .message {
    margin-top: 10px;
    color: #d9d7eb;
}
#oght-notifications .content .notifications .notification .message .text font {
    font-weight: 600;
    color: #fff;
}
#oght-notifications .content .notifications .notification .message .text .date-type{
    margin-top: 4px;
}
#oght-notifications .filters .loading svg {
    width: auto;
    height: 33px;
}
#oght-notifications .content .loading {
    height: calc(100vh - 183px);
    max-height: 557px;
}
#oght-notifications .filters .loading .cls-1 {
    fill: url(#filters-placeholder-gradient);
    stroke-width: 0.5;
    stroke: #4b419c;
}
#oght-notifications .content .loading .cls-1 {
    fill: url(#notifications-placeholder-gradient);
    stroke-width: 0.5;
    stroke: #4b419c;
}

@keyframes notifications-open {
    0%{
        opacity: 0;
        right: 50px;
    }
    100%{
        opacity: 1;
        right: 28px;
    }
}
@keyframes notifications-close {
    0%{
        opacity: 1;
        right: 28px;
    }
    100%{
        opacity: 0;
        right: 50px;
    }
}


#comp-tray {
    z-index: 9;
    top: 0px;
    width: 500px;
    height: 100%;
    border-left: solid 1px var(--color-4);
    transform: translateX(0%);
    box-shadow: 0 0 300px 0 rgb(58 50 147 / 20%);
    animation: comp-tray-open 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
#comp-tray.closing {
    transform: translateX(100%);
    box-shadow: 0 0 0px 0 rgb(58 50 147 / 20%);
    animation: comp-tray-closing 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
@keyframes comp-tray-open {
    0%{
        transform: translateX(100%);
	    box-shadow: 0 0 0px 0 rgb(58 50 147 / 20%);
    }
    100%{
        transform: translateX(0%);
	    box-shadow: 0 0 300px 0 rgb(58 50 147 / 20%);
    }
}
@keyframes comp-tray-closing {
    0%{
        transform: translateX(0%);
	    box-shadow: 0 0 300px 0 rgb(58 50 147 / 20%);
    }
    100%{
        transform: translateX(100%);
	    box-shadow: 0 0 0px 0 rgb(58 50 147 / 20%);
    }
}
#comp-tray .back-btn svg {
    left: 0px;
    width: auto;
    height: 15px;
    transition: left 0.35s linear;
}
#comp-tray .back-btn:hover svg {
    left: -3px;
}
#comp-tray .close {
    fill: var(--color-9);
    width: 15px;
    transition: all 0.5s linear;
}
#comp-tray .close:hover {
    fill: var(--color-secondary);
}

.comp-tray-content > form > div:last-child {
    padding-bottom: 60px;
}
.comp-tray-content > form > div:last-child > div.border-bottom-1px:last-child {
    display: none;
}
.comp-tray-content .key-values .key-value:first-child {
    padding-top: 25px;
}
.comp-tray-content .key-values .key-value:last-child {
    padding-bottom: 25px;
}
.comp-tray-content .info-cards .card > div:nth-child(2) svg {
    width: auto;
    height: 16px;
}
.comp-tray-content .detail-cards .card .description {
    line-height: 1.3em;
}
.comp-tray-content .detail-cards .card .items .item:last-child {
    margin-bottom: -6px;
    padding-bottom: 0px;
}
.comp-tray-content .detail-cards .card .items .item:last-child div:last-child {
    display: none;
}
.comp-tray-content .card[oght-click] {
    background-color: #fff;
    box-shadow: 0 0 0 0px rgba(237,31,36,0.4);
    transition: all 0.4s cubic-bezier(0.15, 0, 0.1, 1);
}

.comp-tray-content .card[oght-click]:hover {
    background-color: rgba(237,31,36,0.05);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(237,31,36,0.4);
}
.comp-tray-content .pills .pill {
    margin: 2.5px 5px 2.5px 0;
}
.comp-tray-content .form-area:last-child {
    padding-bottom: 50px;
}
.comp-tray-content > .actions {
	z-index: 1;
    padding: 0px 40px 40px 40px;
    box-shadow: 0 0 30px 30px white;
}
.comp-tray-content > .actions > div {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-shadow: inset 0 0 0px 0 #b1c1ff, inset 0 0 0px 0 #89a1ff;
    transition: background-color 0.3s linear,
				box-shadow 0.8s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-tray-content > .actions > div[disabled] {
    background: var(--color-4);
}
.comp-tray-content > .actions > div:not([disabled]):hover {
    box-shadow: inset 0 0 30px 0 #b1c1ff, inset 0 0 15px 0 #89a1ff;
}

.comp-tray-content .key-values.notification-type .key-value .channel {
    width: 70px;
}
.comp-tray-content .key-values.notification-type .key-value .channel .avatar-extra-small {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: solid 3px var(--color-4);
    border-radius: 100%;
    transition: all 0.3s linear;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.comp-tray-content .key-values.notification-type .key-value .channel .avatar-extra-small.selected {
    background-color: var(--color-3);
    border-color: var(
    --color-3);
}
.comp-tray-content .key-values.notification-type .key-value .channel .avatar-extra-small svg{
    fill: var(--color-4);
    width: 60%;
    height: 60%;
}
.comp-tray-content .key-values.notification-type .key-value .channel .avatar-extra-small.selected svg{
    fill: #fff;
    width: 60%;
    height: 60%;
}
.comp-tray-content .key-values.notification-type .key-value .channel .avatar-extra-small input {
    position: absolute;
    opacity: 0;
    margin: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#comp-user-menu {
    right: 70px;
    top: 120px;
    width: 350px;
    border: solid 1px #7874b5;
    box-shadow: inset 0 0 30px 0 var(--color-2),
				-10px 10px 20px 0 rgb(9 7 30 / 18%);
	animation: user-menu-open 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
#comp-user-menu.closing{
    right: 30px;
    opacity: 0;
    animation: user-menu-closing 0.7s cubic-bezier(0.15, 0, 0.1, 1);
}
@keyframes user-menu-open {
    0%{
        right: 30px;
        opacity: 0;
    }
    100%{
        right: 70px;
        opacity: 1;
    }
}
@keyframes user-menu-closing {
    0%{
        right: 70px;
        opacity: 1;
    }
    100%{
        right: 30px;
        opacity: 0;
    }
}
#comp-user-menu .name-card {
    backdrop-filter: brightness(1.3);
    border: solid 1px rgba(255,255,255,0.1);
    box-shadow: inset 0 0 30px 0 rgba(255,255,255,0.1);
}
#comp-user-menu .name-card .avatar {
    background-color: rgba(255,255,255,0.1);
}
#comp-user-menu .list .item {
    border: solid 1px rgb(255 255 255 / 0%);
    box-shadow: inset 0 0 0px 0 rgb(167 163 209 / 28%);
    transition: padding-left 0.8s cubic-bezier(0.15, 0, 0.1, 1),
                box-shadow 1s cubic-bezier(0.15, 0, 0.1, 1),
                border 0.5s linear;
}
#comp-user-menu .list .item:hover {
    padding-left: 30px;
    border: solid 1px rgb(255 255 255 / 15%);
    box-shadow: inset 0 0 40px 0 rgb(167 163 209 / 28%);
}

.comp-search-clients {
    padding: 14px 30px;
    width: 260px;
}
.comp-search-clients svg {
    width: 15px;
    height: auto;
}
.comp-search-clients input {
    margin-top: 2px !important;
    padding: 0px !important;
    width: calc(100% - 25px) !important;
    font-weight: 400 !important;
    border: none !important;
}

.comp-icon-add {
    background: #E8E6FF;
    width: 50px;
    border: solid 1px #D8D4FF;
    box-shadow: inset 0 0 0px 0 #d8d5ff;
    transition: border 0.7s cubic-bezier(0.15, 0, 0.1, 1),
                box-shadow 0.5s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-icon-add:hover {
    border-color: #8580ba;
    box-shadow: inset 0 0 50px 0 #8580c2;
}
.comp-icon-add svg {
    transition: fill 0.5s linear;
}
.comp-icon-add:hover svg {
    fill: white;
}


body.loaded label {
	font-weight: 500;
}
body.loaded label {
    font-weight: 500;
}
body.loaded label font.required {
    color: #ff0000;
}

#structure {
    height: 100vh;
}
#structure .window {
    width: 100px;
}
#structure .sidebar {
	background: linear-gradient(45deg, #c8e3f2, var(--color-5), #e5e3ff);
	background-size: 400% 400%;
    width: 260px;
	animation: moveGradient 20s ease infinite;
}
@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#structure .sidebar .spacer {
    height: 150px;
}
#structure .sidebar .top {
    height: calc(100% - 234px);
}
#structure .sidebar .bottom {
    padding-bottom: 40px;
}
#structure .sidebar .item {
    --border-color: transparent;
    border-top: solid 1px var(--border-color);
    border-bottom: solid 1px var(--border-color);
    box-shadow: inset 0 0 0px 0 rgba(255,255,255,0.9);
    transition: border-color 0.5s linear,
                background 0.5s ease-in-out,
                box-shadow 0.3s cubic-bezier(0.15, 0, 0.1, 1),
                padding-left 0.5s cubic-bezier(0.15, 0, 0.1, 1);
}
#structure .sidebar .item:hover {
    --border-color: #fff;
    backdrop-filter: contrast(1.02);
    padding-left: 40px;
    box-shadow: inset 0 0 25px 0 rgba(255,255,255,0.9);
}
#structure .sidebar .item svg {
    width: 24px;
    height: 24px;
}
#structure .page {
    width: calc(100% - 360px);
}
#structure .page::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    background: #000;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 160px;
    transform: translateY(-100%);
    box-shadow: 0 0 40px 120px #fff;
}
#structure .page .header {
    padding: 37px 0 0 0;
    height: 0px;
}
#structure .page .header > div {
    position: relative;
    top: 42px;
}
#structure .page .header .right .avatar {
    width: 50px;
}
#structure .page .header .main {
    width: calc(100% - 360px);
}
#structure .page .header .main .left {
    margin-left: 115px;
	width: calc(100% - 270px);
}
#structure .page .header .main .left .pretitle {
    margin-top: -1.8em;
    letter-spacing: 0.06em;
}
#structure .page .page-content > .comp-page {
	margin-top: 160px;
}
#structure .page .page-content > .comp-page form .actions {
    position: fixed;
    background: rgb(255 255 255 / 20%);
    backdrop-filter: blur(8px);
    padding: 30px 115px;
    width: calc(100% - 360px);
    right: 0px;
    bottom: 0px;
    border-top: solid 1px rgb(187 183 235 / 22%);
    box-shadow: inset 0 0 60px 0 #bbb7eb30;
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#structure .page .page-content .page-width {
    width: calc(100% - 230px);
}

.notification-indicator .icon {
    padding-top: 2px;
    width: 22px;
    aspect-ratio: 1/1;
}
.notification-indicator .icon .indicator {
    width: 0;
    aspect-ratio: 1/1;
    right: 0px;
    top: 0px;
    box-shadow: 0 0 0 0px white;
    transition: all 0.5s cubic-bezier(0.15, 0, 0.1, 1);
}
.notification-indicator.has-notifications .icon .indicator {
    width: 7px;
    right: -2.5px;
    top: -2.5px;
    box-shadow: 0 0 0 2px white;
}
.notification-indicator.has-notifications .icon svg path {
    fill: #ed1f24;
}
.notification-indicator .icon svg path:is(:nth-child(1),:nth-child(2),:nth-child(3)) {
    transition: all 0.6s cubic-bezier(0.15, 0, 0.1, 1);
}
.notification-indicator.has-notifications .icon svg path:nth-child(1) {
    d: path("M 7.73 7.73 H 2.27 v -0.91 h 3.18 v 0.91 Z");
}
.notification-indicator.has-notifications .icon svg path:nth-child(2) {
    d: path("M 5.45 5.91 h -3.18 v -0.91 h 5.45 v 0.91 Z");
}

.comp-name-card {
    width: calc(50% - 20px);
	min-width: 325px;
}


.comp-data-card {
    scale: 1;
    width: 260px;
    box-shadow: inset 0 0 0px 0 rgb(187 183 235 / 20%),
				inset 0 0 0px 0 rgb(187 183 235 / 20%);
	transition: scale 0.8s cubic-bezier(0.15, 0, 0.1, 1),
				border-radius 0.8s cubic-bezier(0.15, 0, 0.1, 1),
				border-color 1.2s cubic-bezier(0.15, 0, 0.1, 1),
				box-shadow 0.5s cubic-bezier(0.15, 0, 0.1, 1),
				background 2s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-data-card:hover {
    scale: 1.03;
    border-color: #bbb7eb;
    border-radius: 7px;
    box-shadow: inset 0 0 100px 0 rgb(187 183 235 / 20%),
				inset 0 0 50px 0 rgb(187 183 235 / 20%);
}
/* prospect,onboarding,training,active,lost,paused,offboarding,terminated,archived */
.comp-data-card:is(.prospect):hover {
	border-color: #bbb7eb; /* light indigo */
	box-shadow: inset 0 0 100px 0 rgb(187 183 235 / 20%),
				inset 0 0 50px 0 rgb(187 183 235 / 20%);
}
.comp-data-card:is(.onboarding, .training):hover {
	border-color: #9ad0f5; /* soft blue */
	box-shadow: inset 0 0 100px 0 rgb(154 208 245 / 20%),
				inset 0 0 50px 0 rgb(154 208 245 / 20%);
}
.comp-data-card:is(.active):hover {
	border-color: #a4d5a0; /* green */
	box-shadow: inset 0 0 100px 0 rgb(168 255 160 / 20%),
				inset 0 0 50px 0 rgb(168 255 160 / 20%);
}
.comp-data-card:is(.paused):hover {
	border-color: #f5d37a; /* amber */
	box-shadow: inset 0 0 100px 0 rgb(245 211 122 / 20%),
				inset 0 0 50px 0 rgb(245 211 122 / 20%);
}
.comp-data-card:is(.offboarding):hover {
	border-color: #d4b98b; /* muted tan */
	box-shadow: inset 0 0 100px 0 rgb(212 185 139 / 20%),
				inset 0 0 50px 0 rgb(212 185 139 / 20%);
}
.comp-data-card:is(.lost, .terminated):hover {
	border-color: #ffb8b8; /* red-pink */
	box-shadow: inset 0 0 100px 0 rgb(255 184 184 / 20%),
				inset 0 0 50px 0 rgb(255 184 184 / 20%);
}
.comp-data-card:is(.archived):hover {
	border-color: #d0d0d0; /* gray */
	box-shadow: inset 0 0 100px 0 rgb(208 208 208 / 20%),
				inset 0 0 50px 0 rgb(208 208 208 / 20%);
}
.comp-data-card .copy .description {
    line-height: 1.167em;
}
.comp-data-card .data .item {
    margin-bottom: -2px;
}
.comp-data-card .data .item svg {
    position: relative;
    top: -2px;
    margin-right: 7px;
    width: 16px;
    height: 16px;
}
.comp-data-card .data .item svg.icon-progress {
    fill: transparent;
    --size: 555;
    --radius: 255.5;
    --circumference: calc(2 * 3.1416 * var(--radius));
}
.comp-data-card .data .item svg.icon-progress {
}
.comp-data-card .data .item svg.icon-progress circle {
    stroke: var(--color-2);
    stroke-width: 44px;
}
.comp-data-card .data .item svg.icon-progress circle:first-child {
    stroke: var(--color-4);
}
.comp-data-card .data .item svg.icon-progress circle:last-child {
    fill: none;
    stroke: var(--color-2);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: var(
    --circumference);
    stroke-dashoffset: calc(var(
    --circumference) * (1 - var(--progress)));
    transition: stroke-dashoffset 0.5s ease;
}

.comp-label:is(.prospect) {
	background: #e5e3fb; /* light indigo background */
	border-color: #bbb7eb; /* indigo border */
}
.comp-label:is(.onboarding, .training) {
	background: #e4f4ff; /* soft blue background */
	border-color: #9ad0f5; /* blue border */
}
.comp-label:is(.active) {
	background: #d1ffcb; /* light green */
	border-color: #a2da9d; /* green border */
}
.comp-label:is(.paused) {
	background: #fff1cc; /* soft amber */
	border-color: #f5d37a; /* amber border */
}
.comp-label:is(.offboarding) {
	background: #fff0e0; /* soft orange */
	border-color: #ffcc99; /* orange border */
}
.comp-label:is(.lost, .terminated) {
	background: #f3e5d0; /* soft beige-brown background */
	border-color: #d4b98b; /* muted tan border */
}
.comp-label:is(.archived) {
	background: #f0f0f0; /* light gray */
	border-color: #d0d0d0; /* gray border */
}

/* Very Low — soft mint */
.comp-label:is(.very_low,.color-0-15) {
	background: #e8fdf4;   /* very light mint */
	border-color: #b4ebd3; /* soft teal border */
}
/* Low — pale teal */
.comp-label:is(.low,.color-16-35) {
	background: #e6f7fa;   /* light aqua */
	border-color: #9ed9e4; /* aqua border */
}
/* Low to Moderate — soft sky blue */
.comp-label:is(.low_to_moderate,.color-36-55) {
	background: #e8f2ff;   /* very light sky blue */
	border-color: #b0c9ff; /* sky border */
}
/* Moderate — soft lavender */
.comp-label:is(.moderate,.color-56-75) {
	background: #f1e9ff;   /* light lavender */
	border-color: #c7b5ff; /* lavender border */
}
/* High — muted peach/orange */
.comp-label:is(.high,.color-76-90) {
	background: #ffdddd;   /* light peach */
	border-color: #ff8d8d; /* peach border */
}
/* Very High — soft red/pink (alert but not harsh) */
.comp-label:is(.very_high,.color-91-100) {
	background: #ff0606;   /* very light red */
	color: #ffffff;
	border-color: #dd0000; /* muted red border */
}

.comp-sub-menu .item {
	scale: 1;
    box-shadow: inset 0 0 0px 0 rgb(187 183 235 / 20%),
				inset 0 0 0px 0 rgb(187 183 235 / 20%);
    transition: all 1s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-sub-menu .item:not(.selected):hover {
	scale: 1.05;
    box-shadow: inset 0 0 30px 0 rgb(187 183 235 / 20%),
				inset 0 0 15px 0 rgb(187 183 235 / 20%);
}
.comp-sub-menu .item.selected {
    background: var(--color-2);
    color: #fff;
    border-color: var(--color-2);
}


.comp-table .list .row {
    padding: 24px 0;
}
.comp-table .list .row:hover{
    background: var(--color-8);
}
.comp-table .list .row.selected{
    background-color: var(--color-primary);
    font-weight: 500;
    color: white;
}
.comp-table .list .row:first-child {
    margin-top: -3px;
    padding-top: 27px;
}
.comp-table .list .row > .content {
    left: 0px;
    transition: left 0.75s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-table .list .row:hover:not(.selected) > .content {
    left: 10px;
}
.comp-table .list .row .separator {
    border-color: var(--color-9);
}
.comp-table .list .row > .progress-bar {
    opacity: 0.03;
    height: calc(100% - 1px);
}
.comp-table :is(input,select) {
    margin: 0px;
    padding: 0.8em 1em 0.6em 1em;
    width: calc(100% - 33px);
    font-size: var(--font-body-small);
    font-weight: 400;
    border: none;
}
.comp-table .input-select{
    width: 200px;
    border-color: var(--color-9);
}
.comp-table .input-select .icon {
    width: 33px;
    height: 33px;
}
.comp-table .input-select .icon svg {
    width: auto;
    height: 1em;
}
.comp-table .input-select select {
    padding-left: 0px;
}

.comp-profile-header > div > div:last-child .icon-ellipsis-h {
    fill: var(--color-3);
    padding: 15px;
    width: 15px;
    height: auto;
}
.comp-profile-header > div > div:last-child .icon-ellipsis-h:hover{
    fill: var(--color-2);
}


.comp-progress-indicator .list .item .container {
    left: 0px;
    transition: left 0.8s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-progress-indicator .list .item:not(.completed):hover .container {
    left: 10px;
}
.comp-progress-indicator .list .item .container .icon {
    width: 50px;
    height: 50px;
}
.comp-progress-indicator .list .item .container .icon svg {
    width: 40%;
    height: auto;
}
.comp-progress-indicator .list .item.submitted .container .icon {
    background-color: #DFFEE7;
    border-color: #35B354;
}
.comp-progress-indicator .list .item.submitted .container .icon svg {
    fill: #35B354;
}


.comp-select-html.selected{
    border-radius: 3px 3px 0 0;
}
.comp-select-html .comp-select-html-options {
    display: none;
    background: var(--color-5);
    padding: 10px 20px;
    width: calc(100% + 2px);
    left: -1px;
    top: 100%;
    border: solid 1px var(
    --color-3);
    border-radius: 0 0 3px 3px;
}
.comp-select-html.selected .comp-select-html-options {
    display: block;
}
.comp-select-html .comp-select-html-options .comp-select-html-option {
    margin: 10px 0;
    box-shadow: 0 0 0 0px var(--color-4), inset 0 0 0px 0 var(--color-5);
    transition: box-shadow 0.5s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-select-html .comp-select-html-options .comp-select-html-option.selected{
    background: var(--color-5);
    box-shadow: inset 0 0 40px 0 #ccc7ff;
}
.comp-select-html .comp-select-html-options .comp-select-html-option:not(.selected):hover{
    box-shadow: 0 0 0 4px var(--color-4), inset 0 0 50px 0 var(--color-5);
}


.comp-row-fields .field {
    width: calc((100% / 3) - 10px);
}
.comp-row-fields .field select {
    margin-top: 0px;
    font-size: 0.94em;
}
.comp-row-fields .row .fields {
    width: calc(100% - 50px);
}
.fieldset-row-fields .comp-row-fields .row .fields .field :is(input,select,textarea) {
    margin-top: unset;
}
.comp-row-fields .row .btn-remove {
    width: 46px;
    height: 46px;
    box-shadow: inset 0 0 0px 0 #cecbf8;
    transition: background 0.7s linear,
                border-color 0.5s linear,
                box-shadow 0.65s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-row-fields .row .btn-remove:hover {
    background: var(--color-5);
    border-color: #b3b0d7;
    box-shadow: inset 0 0 15px 0 #cecbf8;
}
.comp-row-fields .row .btn-remove svg {
    width: auto;
    height: 40%;
}
.comp-row-fields .btn-add {
    padding: 17px 0 13px 0;
    font-size: 2em;
    box-shadow: inset 0 0 0px 0 #c2bfe8;
    transition: background 0.7s linear,
                border-color 0.5s linear,
                box-shadow 0.65s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-row-fields .btn-add:hover {
    background: var(--color-5);
    border-color: #b3b0d7;
    box-shadow: inset 0 0 30px 0 #c2bfe8;
}


.comp-metrics-radial-progress > circle {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 6px;
}
.comp-metrics-radial-progress > circle.base {
    stroke: var(--color-4);
}
.comp-metrics-radial-progress > circle.progress {
    stroke-dasharray: 157;
    stroke-dashoffset: calc(157 * (1 - var(--percent) / 100));
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}


.comp-report [oght-click*="select_item"] {
    transition: left 0.85s cubic-bezier(0.15, 0, 0.1, 1);
}
.comp-report [oght-click*="select_item"]:hover{
    left: 10px;
}
.comp-report .section:not(:last-child) .content > div > div:last-child {
    padding-bottom: 25px;
}


.comp-comparison-grid .list .item > div:last-child {
    padding-top: 78px;
}


.system-logs .heading .right :is(.filter-toggle,.search-toggle) {
    width: 30px;
    height: 30px;
    border-color: var(--color-7);
}
.system-logs .heading .right :is(.filter-toggle,.search-toggle) svg {
    fill: var(--color-secondary);
    width: 15px;
    height: auto;
}
.system-logs .logs:before {
    content: "";
    display: block;
    position: absolute;
    background: #e1e1e1;
    width: 1px;
    height: calc(100% - 20px);
    left: 214.2px;
    top: 10px;
}
.system-logs .logs .log:not(:first-child) {
    padding-top: 30px;
}
.system-logs .logs .log:before{
    content: "";
    display: block;
    position: absolute;
    background: #898989;
    opacity: 0;
    padding: 10px 20px;
    width: 100%;
    height: 1em;
    left: -20px;
    bottom: -0.5em;
    border: solid 1px #000000;
    border-radius: 5px;
    transition: all 0.3s linear;
}
.system-logs .logs .log:hover:before{
    content: "";
    display: block;
    position: absolute;
    background: #898989;
    opacity: 0.08;
    padding: 10px 20px;
    width: 100%;
    height: 1em;
    left: -20px;
    bottom: -0.5em;
    border: solid 1px #000000;
    border-radius: 5px;
}
.system-logs .logs.show-advanced .log:before {
    height: calc(100% - 2.89em);
}
.system-logs .logs.show-advanced .log:first-child:before {
    bottom: 3px;
    height: calc(100% - 1.28em);
}
.system-logs .logs .log > *{
    position: relative;
    z-index: 1;
}
.system-logs .logs .log .date {
    width: 170px;
}
.system-logs .logs .log .marker {
    margin: 4px 40px 0 40px;
    width: 9px;
    height: 9px;
}
.system-logs .logs .log:is(
    [data-log-action="approved"],
    [data-log-action="assigned"],
    [data-log-action="created"],
    [data-log-action="finalized"],
    [data-log-action="granted"],
    [data-log-action="reopened"],
    [data-log-action="reviewed"],
    [data-log-action="saved"]
) .marker {
    background: #24A243; /* Green */
}
.system-logs .logs .log:is(
    [data-log-action="edited"],
    [data-log-action="updated"]
) .marker {
    background: #2064ED; /* Blue */
}
.system-logs .logs .log:is(
    [data-log-action="deleted"],
    [data-log-action="canceled"],
    [data-log-action="declined"],
    [data-log-action="removed"],
    [data-log-action="revoked"]
) .marker {
    background: #ED2024; /* Red */
}
.system-logs .logs .log:is(
    [data-log-action="viewed"]
) .marker {
    background: var(--color-5); /* Gray */
}
.system-logs .logs .log:is(
    [data-log-action="shared"],
    [data-log-action="exported"]
) .marker {
    background: #ED8620; /* Orange */
}
.system-logs .logs .log[data-log-action="generated"] .marker {
    background: #9747FF; /* Purple */
}
.system-logs .logs .log .summary {
    width: calc(100% - 268px);
}
.system-logs .logs .log .summary > div:first-child > font {
    font-weight: 500;
}
.system-logs .logs .log .summary .advanced{
    display: none;
    color: #404040;
}
.system-logs .logs.show-advanced .log .summary .advanced {
    display: block;
}
.system-logs .logs .log .summary .advanced pre{
    margin: 5px 0 0 0;
    text-wrap: initial;
    line-break: anywhere;
}
.system-logs .logs .log .summary .advanced .payload {
    background: #fafafa;
    border-left: solid 5px var(--color-9);
}
.system-logs .logs .log:hover .summary .advanced .payload {
    background: #fff;
}
.system-logs .logs .log .summary .advanced .diff {
    background: rgb(250, 250, 250);
    border-left: solid 5px var(--color-9);
}
.system-logs .logs .log:hover .summary .advanced .diff{
    background: #fff;
}
.system-logs .logs .log .summary .advanced .diff .old {
    border-right: solid 1px var(--color-3);
}