@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/roboto-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/roboto-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --primary: #177AB0;
  --primary-dark: #136491;
  --primary-light: #34A7E5;
  --primary-main: #3978AB;
  --on-primary: #ffffff;
  --divider: #E6E6E6;
  --plain: #fafafa;
  --plain-dark: #e1e1e1;
  --secondary: #25374a;
  --secondary-light: #36506c;
  --on-secondary: #ffffff;
  --text: #2c3e50;
  --text-primary: #425368;
  --text-header: #646464;
  --detail-text: #737373;
  --divider: #E6E6E6;
  --green: #388722;
  --red: #D53F3F;
  --blue: #476DEB;
  --yellow: #ffca29;
  --gray: #737373;
  --inactive: #757575;
  --inactive-text: darken(#757575, 40%);
  --orange: #FFB136;
  --white: #FFFFFF;
  --primary-green: #26c519;
  --background: #ffffff;
  --background-light: #F8FAFB;
  --link: var(--primary-dark);
  --link-on-primary: var(--primary-light);
  --button-on-hover: #e6e6e6;
  --nav-text: #FAf8fb;
  --nav-icon: var(--nav-text);
  --nav-background: #2C628D;
  --nav-icon-background-hover: var(--nav-text);
  --nav-icon-hover: var(--nav-background);
  --nav-gradient-left: var(--nav-background);
  --nav-gradient-center: #3978AB;
  --nav-gradient-right: var(--nav-background);
  --nav-borders: var(--nav-text);
  --nav-menu-text: #425368;
  --nav-menu-icon: var(--nav-menu-text);
  --nav-menu-background: #FFFFFF;
  --nav-menu-background-dim: #EAEFF2;
  --nav-menu-borders: lightgrey;
  --background-light: #F8FAFB;
  --background-dark: #EAEFF2;
  --card-background: #FFFFFF;
  --card-border: #E6E6E6;
  --border: #f0f0f0;
  --primary-border: rgb(172 172 172 / 20%);
  --secondary-border: rgba(0, 0, 0, 0.1);
  --selectable-box-border: #B6B6B6;
  --border-plus-ten: #757575;
  --border-shadow: #f7f7f7;
  --dark-border: black;
  --link-text: var(--link);
  --link-hover-text: var(--link-on-primary);
  --link-on-primary-text: var(--link-on-primary);
  --link-on-primary-hover-text: var(--primary);
  --login-bg: var(--ng-primary-main);
  --login-text: var(--on-secondary);
  --login-icon-bg: var(--primary);
  --login-icon-text: var(--on-primary);
  --login-box-bg: white;
  --login-box-text: var(--text);
  --login-box-submit-bg: var(--primary);
  --login-box-submit-text: var(--on-primary);
  --trial-bg: var(--secondary);
  --trial-box-bg: var(--login-box-bg);
  --trial-sparkline: var(--primary);
  --trial-ongoing-badge: var(--green);
  --trial-expired-badge: var(--red);
  --trial-pending-badge: var(--yellow);
  --trial-submitted-badge: #417D8B;
  --trial-converted-badge: var(--blue);
  --trial-denied-badge: var(--gray);
  --trial-purged-badge: var(--gray);
  --login-social-bg: var(--primary-light);
  --login-social-text: var(--on-primary);
  --menu-bg: var(--secondary);
  --menu-text: var(--on-secondary);
  --org-picker-bg: var(--secondary-light);
  --menu-tabs-text: var(--on-primary);
  --menu-tabs-tag: var(--menu-tabs-text);
  --menu-tabs-active-bg: var(--primary-dark);
  --menu-tabs-active-text: var(--on-primary);
  --menu-tabs-hover-bg: var(--menu-tabs-active-bg);
  --menu-tabs-hover-text: var(--menu-tabs-active-text);
  --menu-tabs-line-divider: var(--secondary-border);
  --menu-tabs-menu-header: var(--plain-dark);
  --expanded-menu-tabs-bg: var(--secondary-light);
  --expanded-menu-tabs-text: var(--menu-tabs-text);
  --expanded-menu-tabs-active-bg: var(--menu-tabs-active-bg);
  --expanded-menu-tabs-active-text: var(--menu-tabs-active-text);
  --expanded-menu-tabs-hover-bg: var(--expanded-menu-tabs-active-bg);
  --expanded-menu-tabs-hover-text: var(--expanded-menu-tabs-active-text);
  --dropdown-expanded-menu-tabs-bg: var(--expanded-menu-tabs-bg);
  --dropdown-expanded-menu-tabs-text: var(--expanded-menu-tabs-text);
  --dropdown-expanded-menu-tabs-active-bg: var(--expanded-menu-tabs-active-bg);
  --dropdown-expanded-menu-tabs-active-text: var(--expanded-menu-tabs-active-text);
  --dropdown-expanded-menu-tabs-hover-bg: var(--expanded-menu-tabs-hover-bg);
  --dropdown-expanded-menu-tabs-hover-text: var(--expanded-menu-tabs-active-text);
  --section-header-bg: var(--plain);
  --section-header-bg-dark: var(--border);
  --section-header-text: var(--text);
  --section-header-placeholder-text: var(--detail-text);
  --list-header-bg: var(--plain);
  --list-header-border: #ededed;
  --list-header-text: #6B6B6B;
  --list-row-bg: #f7f7f7;
  --list-row-border: #f3f3f3;
  --list-border: var(--divider);
  --filter-controls-bg: var(--list-header-bg);
  --filter-controls-text: var(--list-header-text);
  --pill-text: #6B6B6B;
  --line-seperator: #e0e0e0;
  --notification-badge: var(--orange);
  --notification-badge-text: var(--nav-text);
  --drawer-header: var(--on-secondary);
  --drawer-border: var(--secondary);
  --main-header-bg: var(--primary-dark);
  --main-header-text: var(--on-primary);
  --radial-progress-bg: var(--secondary);
  --radial-progress-text: var(--on-secondary);
  --radial-progress-blue: var(--blue);
  --radial-progress-green: var(--green);
  --radial-progress-yellow: var(--yellow);
  --radial-progress-red: var(--red);
  --tabs-tab-bg: var(--plain);
  --tabs-tab-text: var(--text);
  --tabs-tab-active-bg: var(--primary-main);
  --tabs-tab-active-text: var(--on-primary);
  --tabs-tab-hover-bg: var(--tabs-tab-active-bg);
  --tabs-tab-hover-text: var(--tabs-tab-active-text);
  --panel-header-bg: var(--primary-dark);
  --panel-header-text: var(--on-primary);
  --panel-active-text: var(--primary);
  --panel-show-more-bg: var(--primary-dark);
  --panel-show-more-color: var(--on-primary);
  --input-text: var(--text);
  --input-border: var(--primary);
  --input-placeholder-text: #757575;
  --input-error-border: var(--red);
  --notification-error-bg: var(--red);
  --notification-success-bg: var(--green);
  --notification-info-bg: var(--blue);
  --notification-warn-bg: #FFB136;
  --icon-text: var(--plain-dark);
  --icon-red-text: var(--red);
  --icon-green-text: var(--green);
  --icon-yellow-text: var(--yellow);
  --icon-blue-text: var(--blue);
  --icon-gray-text: var(--gray);
  --alert-text: var(--gray);
  --blue-button: #3978AB;
  --button-bg: white;
  --button-text: var(--text);
  --button-submit-bg: var(--primary);
  --button-submit-text: white;
  --button-transparent-text: white;
  --button-inactive-text: dimgray;
  --button-inactive-bg: var(--plain-dark);
  --toggle-button-bg: var(--primary);
  --toggle-button-text: var(--on-primary);
  --toggle-button-inactive-bg: var(--plain-dark);
  --form-row-toggle-inactive-bg: var(--inactive);
  --form-row-toggle-bg: var(--primary-green);
  --form-row-toggle-icon: var(--on-primary);
  --form-row-toggle-ball: var(--on-primary);
  --checkbox-inactive-bg: white;
  --checkbox-checked-bg: var(--primary);
  --checkbox-checked-text: var(--on-primary);
  --session-timeout-icon-bg: var(--primary);
  --session-timeout-icon-text: white;
  --loading-bg: var(--secondary);
  --popover-bg: #e9e9e9;
  --popover-color: var(--text);
  --breadcrumb-bg: var(--plain);
  --breadcrumb-text: var(--primary-dark);
  --base-item-active: var(--primary);
  --base-item-inactive: var(--on-primary);
  --resource-view-header-bg: var(--plain);
  --resource-view-header-text: var(--text);
  --base-dropdown-bg: var(--list-header-bg);
  --base-dropdown-active-bg: var(--primary);
  --base-dropdown-active-text: var(--plain-dark);
  --base-dropdown-hover-bg: var(--plain-dark);
  --base-dropdown-hover-text: var(--text);
  --base-dropdown-text: var(--text);
  --calendar-header-bg: var(--primary-dark);
  --calendar-header-text: var(--on-primary);
  --calendar-selection-bg: var(--primary);
  --calendar-selection-text: var(--on-primary);
  --help-center-bg: var(--on-primary);
  --help-center-header-bg: var(--primary);
  --help-center-header-text: var(--on-secondary);
  --help-center-text: var(--text);
  --help-center-info-bg: var(--plain);
  --help-center-icon-color: var(--primary-dark);
  --help-center-footer-bg: var(--plain);
  --cost-estimator-header-bg: var(--primary-dark);
  --cost-estimator-header-text: var(--on-primary);
  --cost-estimator-body-bg: var(--plain);
  --cost-estimator-body-text: var(--text);
  --api-docs-header-bg: var(--help-center-header-bg);
  --api-docs-header-text: var(--help-center-header-text);
  --upload-message-bg: var(--primary-dark);
  --upload-message-text: var(--on-primary);
  --map-marker-bg: #ffffffbb;
  --map-marker-text: var(--text);
  --input-disabled: #e6e6e6;
  --markdown-viewer-bg: white;
  --markdown-viewer-border: #d1d5da;
  --count-bg: var(--list-header-border);
  --count-text: var(--list-header-text);
  --icon-shadow: #93939366;
  --customer-onboarding-bg: linear-gradient(#dce9fb, #eff6ff);
  --customer-onboarding-shadow: #00000030;
  --customer-onboarding-box-bg: white;
  --customer-onboarding-tab-bg: #f7f7f7;
  --customer-onboarding-tab-active-bg: var(--customer-onboarding-box-bg);
  --customer-onboarding-tab-text: #c2c2c2;
  --customer-onboarding-tab-active-text: var(--text);
  --widget-shadow: rgba(0, 0, 0, 0.25);
  --map-widget-legend-shadow: rgba(0, 0, 0, 0.1);
}

:root {
  --ng-primary: #2978AB;
  --ng-primary-main: #3978AB;
  --ng-primary-background: #F8FAFB;
  --ng-primary-surface: #FFFFFF;
  --ng-primary-grey: #888888;
  --ng-primary-green: #26C519;
  --ng-primary-yellow: #FFB136;
  --ng-primary-red: #FF0000;
  --ng-primary-blue: #0C5EE7;
  --ng-secondary-main: #EAEFF2;
  --ng-secondary-background: #F8FAFB;
  --ng-secondary-highlight: #418CC8;
  --ng-secondary-grey: #EBEBEB;
  --ng-secondary-green: #C8F0C8;
  --ng-secondary-divider: #E6E6E6;
  --ng-secondary-border: #DADADA;
  --ng-navigation-main: #3978AB;
  --ng-navigation-highlight: #418CC8;
  --ng-navigation-elements: #FFFFFF;
  --ng-text-main: #425368;
  --ng-text-description: #949494;
  --ng-text-header: #646464;
  --ng-text-link: #0C5EE7;
  --ng-warning-background: #FFF4E5;
  --ng-info-background: #E5F6FD;
  --ng-danger-background: #FDEDED;
  --ng-success-background: #EDF7ED;
}

a:not(.fake-a):not(.link-on-primary) {
  color: var(--link-text);
}
a:not(.fake-a):not(.link-on-primary):hover {
  color: var(--link-hover-text);
}

.link-on-primary {
  color: var(--link-on-primary);
}
.link-on-primary:hover {
  color: var(--link-on-primary-hover-text);
}

.action-text-hoverable {
  color: var(--link-text);
}
.action-text-hoverable:hover {
  color: var(--link-hover-text);
}

.alert {
  color: var(--alert-text);
}
.alert.border-info {
  border-color: var(--blue);
}
.alert.border-success {
  border-color: var(--green);
}
.alert.border-warning {
  border-color: var(--yellow);
}
.alert.border-error, .alert.border-danger {
  border-color: var(--red);
}

body {
  background-color: var(--background);
  color: var(--text);
}

button {
  background-color: var(--button-bg);
  border: 1px solid #cecece;
}
button .button-content {
  color: var(--button-text);
}
button:not(.disabled):hover {
  background-color: var(--button-on-hover);
}
button:not(.disabled).transparent {
  color: var(--button-transparent-text);
  background-color: transparent;
  border: 2px solid var(--button-transparent-text);
}
button:not(.disabled).submit {
  background-color: var(--button-submit-bg);
}
button:not(.disabled).submit:not(:focus) {
  border: none;
}
button:not(.disabled).submit:hover {
  background-color: var(--primary-dark);
}
button:not(.disabled).submit .button-content {
  color: var(--button-submit-text);
}
button:not(.disabled).delete {
  background-color: var(--red);
}
button:not(.disabled).delete .button-content {
  color: var(--plain);
}
button:not(.disabled).repeat-delete {
  background-color: transparent;
}
button:not(.disabled).repeat-delete .button-content {
  color: var(--red);
}
button:not(.disabled):focus {
  border-color: #9b9b9b;
}
button.disabled {
  background-color: var(--button-inactive-bg);
  opacity: 0.8;
}
button.disabled .button-content {
  color: var(--button-inactive-text);
}
button.disabled:not(.transparent) {
  border: none;
}

.base-select {
  background-color: white;
}

.select.disabled, .tag-select.disabled, .input input.disabled, .input textarea.disabled, .checkbox.disabled {
  opacity: 0.7;
  color: var(--inactive);
  border-color: var(--inactive);
  background-color: var(--plain);
}

.toggle.disabled {
  opacity: 0.7;
}

.fa.green {
  color: var(--icon-green-text);
}
.fa.blue {
  color: var(--icon-blue-text);
}
.fa.red {
  color: var(--icon-red-text);
}
.fa.yellow {
  color: var(--icon-yellow-text);
}

.input-icon {
  color: #2c3e50;
}

.input input, .input textarea {
  color: var(--input-text);
  border-color: var(--input-placeholder-text);
}
.input input:focus,
.input textarea:focus {
  border-color: var(--input-border);
}
.input input.error, .input textarea.error {
  border-color: var(--input-error-border);
}

input:-moz-placeholder,
input::-moz-placeholder,
textarea:-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--input-placeholder-text);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--input-placeholder-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder-text);
}

.form-row.error input, .form-row.error textarea {
  border-color: var(--input-error-border);
}
.form-row.error .multiselect__tags {
  border: 1px solid var(--red);
}

.toggle,
.form-row .toggle {
  background-color: var(--form-row-toggle-inactive-bg);
}
.toggle.active,
.form-row .toggle.active {
  background-color: var(--form-row-toggle-bg);
}
.toggle.active #icon,
.form-row .toggle.active #icon {
  color: var(--form-row-toggle-icon);
}
.toggle #icon,
.form-row .toggle #icon {
  color: var(--form-row-toggle-icon);
}
.toggle .ball::before,
.form-row .toggle .ball::before {
  background-color: var(--form-row-toggle-ball);
}

.loading .dot1, .loading .dot2 {
  background-color: var(--loading-bg);
}
.loading.sk-cube-grid .sk-cube {
  background-color: var(--loading-bg);
}

.iziToast > .iziToast-progressbar > div {
  height: 0.25rem !important;
  border-radius: 0 0 0 3px !important;
}

/* iziToast notification CSS overrides*/
.iziToast {
  width: 60% !important;
  min-width: 480px !important;
  max-width: 42rem !important;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 1rem 0 1.375rem 0 !important;
}
.iziToast::after {
  box-shadow: none !important;
}
.iziToast-wrapper {
  margin-bottom: 1rem;
}
.iziToast-capsule {
  margin-bottom: 1rem;
}
.iziToast-body {
  width: 100% !important;
  margin: auto !important;
  display: flex !important;
  align-items: center;
}
.iziToast-body::after {
  padding-left: 0px !important;
}
.iziToast-icon {
  font-size: 44px !important;
  line-height: 40px !important;
  width: 2rem !important;
  height: 2rem !important;
  margin-left: -9px;
  margin-top: 0 !important;
  position: relative !important;
}
.iziToast-title {
  width: 100% !important;
}
.iziToast-progressbar {
  border-radius: 0 0 3px 3px !important;
}
.iziToast-texts {
  margin: 0 0 0 1.375rem !important;
  max-width: 78%;
  padding-left: 2rem;
  border-left: 0.125rem solid #E6E6E6;
}
.iziToast-message {
  font-size: 1rem !important;
  font-family: "Roboto" !important;
  margin: 0.5rem 0 0.5rem 0 !important;
}
.iziToast-message strong {
  font-weight: 500 !important;
}
.iziToast-message > img {
  vertical-align: middle;
}
.iziToast-buttons {
  padding-right: 65px !important;
  flex-shrink: 0;
  padding-left: auto;
}
.iziToast-buttons-child {
  background: #FFFFFF !important;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) !important;
  border-radius: 3px !important;
  font-size: 16px !important;
  line-height: 19px !important;
  margin: 0 3px !important;
}
.iziToast-close {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.15) !important;
  border-radius: 3px !important;
  margin: 0 24px !important;
  width: 2rem !important;
  height: 2rem !important;
  top: 27% !important;
  opacity: 1 !important;
  background-size: 0.688rem !important;
}
.iziToast .pending-progressbar {
  background: rgb(12, 94, 231) !important;
}
.iziToast .success-progressbar {
  background: rgb(38, 197, 25) !important;
}
.iziToast .warning-progressbar {
  background: rgb(255, 177, 54) !important;
}
.iziToast .error-progressbar {
  background: rgb(255, 0, 0) !important;
}
.iziToast.pending .iziToast-progressbar {
  background: rgba(12, 94, 231, 0.3) !important;
}
.iziToast.success .iziToast-progressbar {
  background: rgba(38, 197, 25, 0.3) !important;
}
.iziToast.warning .iziToast-progressbar {
  background: rgba(255, 177, 54, 0.3) !important;
}
.iziToast.error .iziToast-progressbar {
  background: rgba(255, 0, 0, 0.3) !important;
}
.iziToast .loading-spinner::after {
  height: 1.5rem;
  width: 1.5rem;
}
.iziToast .cmc-icon-success {
  background-size: 2rem;
}

.cmc-icon-success {
  background: url("/static/icons/success_checkmark_icon.svg");
  background-size: 40px;
  background-position: left;
  background-repeat: no-repeat;
}

.cmc-icon-warning {
  background: url("/static/icons/nextgen/notification-warning.svg");
  background-position: left;
  background-repeat: no-repeat;
}

.cmc-icon-failure {
  background: url("/static/icons/nextgen/notification-error.svg");
  background-position: left;
  background-repeat: no-repeat;
}

.loading-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  color: var(--blue);
}
.loading-spinner:after {
  content: " ";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0px;
  border-radius: 50%;
  border: 4px solid var(--blue);
  border-color: var(--blue) var(--blue) var(--blue) #E6E6E6;
  animation: loading-spinner 1.2s linear infinite;
}

@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.panel .panel-header {
  background-color: var(--panel-header-bg);
  color: var(--panel-header-text);
  border-bottom: 1px solid var(--primary-dark);
}
.panel .item.clickable.active {
  color: var(--panel-active-text);
  border-left-color: var(--panel-active-text);
}
.panel .item.clickable.active-child {
  color: var(--panel-active-text);
}
.panel .item.show-more {
  background-color: var(--panel-show-more-bg);
  color: var(--panel-show-more-color);
}
.panel.has-border {
  border: 1px solid var(--border);
  box-shadow: 3px 2px 3px -1px var(--border-shadow);
}

.tooltip.popover {
  background-color: var(--gray);
  color: white;
}
.tooltip.popover .popover-inner {
  background: var(--popover-bg);
  color: var(--popover-color);
}
.tooltip.popover .popover-arrow {
  border-color: var(--popover-bg);
}

.fake-a {
  color: inherit;
}

.radial-progress {
  color: var(--radial-progress-text);
}
.radial-progress .inset {
  background-color: var(--radial-progress-bg);
}
.radial-progress .fill.blue {
  background-color: var(--radial-progress-blue);
}
.radial-progress .fill.green {
  background-color: var(--radial-progress-green);
}
.radial-progress .fill.yellow {
  background-color: var(--radial-progress-yellow);
}
.radial-progress .fill.red {
  background-color: var(--radial-progress-red);
}

.line-separator {
  border: 1px solid var(--border);
}

.state {
  background-color: var(--gray);
  color: white;
}
.state.green {
  color: white;
  background-color: var(--green);
}
.state.red {
  color: white;
  background-color: var(--red);
}
.state.blue {
  color: white;
  background-color: var(--blue);
}
.state.yellow {
  color: var(--text);
  background-color: var(--yellow);
}
.state.gray, .state.grey {
  color: white;
  background-color: var(--gray);
}
.state.orange {
  color: var(--text);
  background-color: var(--orange);
}

.toggle-tabs {
  border: 1px solid var(--border);
}
.toggle-tabs .toggle-tab:hover {
  background-color: var(--ng-secondary-main);
}
.toggle-tabs .toggle-tab.active {
  background-color: var(--tabs-tab-active-bg);
  color: var(--tabs-tab-active-text);
}

.tabs {
  border-bottom: 1px solid var(--list-header-border);
}
.tabs .tab {
  background-color: var(--tabs-tab-bg);
  color: var(--tabs-tab-text);
}
.tabs .tab:hover {
  background-color: var(--tabs-tab-hover-bg);
  color: var(--tabs-tab-hover-text);
}
.tabs .tab.active {
  background-color: var(--tabs-tab-active-bg);
  color: var(--tabs-tab-active-text);
}

.light-tabs .light-tab {
  border-bottom: 3px solid #f0f0f0;
  color: var(--gray);
}
.light-tabs .light-tab.active {
  border-bottom-color: var(--tabs-tab-active-bg);
  color: var(--tabs-tab-active-bg);
}
.light-tabs .light-tab:hover {
  border-bottom-color: var(--tabs-tab-hover-bg);
  color: var(--tabs-tab-hover-bg);
}
.light-tabs::after {
  content: "";
  flex: 1;
  border-bottom: 3px solid #f0f0f0;
}

.toggle-button {
  border: 1px solid var(--toggle-button-bg);
  color: var(--toggle-button-bg);
}
.toggle-button.active {
  background-color: var(--toggle-button-bg);
  color: var(--toggle-button-text);
}

.radio-button input:checked ~ .radio {
  background-color: var(--checkbox-checked-bg);
}
.radio-button input:focus + .radio {
  border-color: var(--primary-dark);
}

.base-tag {
  background-color: var(--green);
}
.base-tag.light_grey, .base-tag.readonly {
  background-color: var(--inactive);
}
.base-tag .text {
  color: white;
}
.base-tag.green {
  color: white;
  background-color: var(--green);
}
.base-tag.red {
  color: white;
  background-color: var(--red);
}
.base-tag.blue {
  color: white;
  background-color: var(--blue);
}
.base-tag.yellow {
  color: white;
  background-color: var(--yellow);
}
.base-tag.gray, .base-tag.grey {
  color: white;
  background-color: var(--gray);
}

.multiselect__tag {
  background-color: var(--green);
}
.multiselect__tag.light_grey, .multiselect__tag.readonly {
  background-color: var(--inactive);
}
.multiselect__tag.green {
  color: white;
  background-color: var(--green);
}
.multiselect__tag.red {
  color: white;
  background-color: var(--red);
}
.multiselect__tag.blue {
  color: white;
  background-color: var(--blue);
}
.multiselect__tag.yellow {
  color: white;
  background-color: var(--yellow);
}
.multiselect__tag.gray, .multiselect__tag.grey {
  color: white;
  background-color: var(--gray);
}

.base-checkbox input:not(:checked) ~ .checkbox {
  background-color: var(--checkbox-inactive-bg);
  color: var(--checkbox-inactive-bg);
}
.base-checkbox input:checked ~ .checkbox {
  background-color: var(--checkbox-checked-bg);
  color: var(--checkbox-checked-text);
}
.base-checkbox input:checked ~ .checkbox .fa {
  display: inline-block;
}

.base-item .selected {
  font-weight: bold;
  background-color: var(--base-item-inactive);
}
.base-item.clickable:hover {
  background-color: var(--base-item-inactive);
}
.base-item .clickable.active {
  background-color: var(--base-item-active);
  color: var(--base-item-inactive);
}
.base-item.disabled {
  color: var(--inactive);
  cursor: not-allowed;
}

.base-dropdown .dropdown {
  color: var(--base-dropdown-text);
  background-color: var(--base-dropdown-bg);
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.base-dropdown .search {
  border-bottom: 1px solid var(--base-dropdown-color);
}
.base-dropdown .group {
  color: var(--base-dropdown-text);
  background-color: var(--plain);
  border-bottom: 1px solid var(--plain-dark);
  border-top: 1px solid var(--plain-dark);
}
.base-dropdown .expanded + .seperator {
  border-color: var(--plain-dark);
}
.base-dropdown .clickable.group {
  background-color: white;
}
.base-dropdown .item.clickable {
  background-color: white;
}
.base-dropdown .item.clickable:hover {
  background-color: var(--base-dropdown-hover-bg);
  color: var(--base-dropdown-hover-text);
}
.base-dropdown .item.clickable.fake-a {
  color: var(--text);
}
.base-dropdown .item.clickable.active {
  background-color: var(--base-dropdown-active-bg);
  color: var(--base-dropdown-active-text);
}
.base-dropdown .item.clickable.active .description {
  color: var(--plain);
}
.base-dropdown .item.clickable.tabbed {
  background-color: var(--primary-light);
  color: var(--base-dropdown-color);
}
.base-dropdown .no-item-results {
  color: var(--gray);
}

.role-name {
  color: var(--inactive);
}

.list-row {
  color: var(--text);
}
.list-row:hover {
  background-color: var(--list-row-bg);
}
.list-row:hover .action {
  transform: scale(1);
}

.list.bordered {
  border-color: var(--popover-bg);
}

.list-row-bordered {
  color: var(--text);
  border-bottom: var(--list-row-border) solid 1px;
}
.list-row-bordered:hover {
  background-color: var(--list-row-bg);
}
.list-row-bordered:hover .action {
  transform: scale(1);
}

.map-marker {
  background-color: var(--map-marker-bg);
  color: var(--map-marker-text);
}

.green {
  color: var(--icon-green-text);
}
.green-border {
  border-color: var(--green);
}

.blue {
  color: var(--icon-blue-text);
}
.blue-border {
  border-color: var(--blue);
}

.red {
  color: var(--icon-red-text);
}
.red-border {
  border-color: var(--red);
}

.yellow {
  color: var(--icon-yellow-text);
}
.yellow-border {
  border-color: var(--yellow);
}

.gray, .grey {
  color: var(--icon-gray-text);
}
.gray-border, .grey-border {
  border-color: var(--gray);
}

td:first-child {
  color: var(--detail-text);
}

.detail-text {
  color: var(--detail-text);
}

.bordered {
  border: 1px solid var(--border);
}

.base-tooltip .popover {
  background-color: white;
}
.base-tooltip .message-popover {
  background-color: var(--gray);
  color: white;
}
.base-tooltip .popover-container.right::after {
  border-right-color: var(--list-header-text);
}
.base-tooltip .popover-container.left::after {
  border-left-color: var(--list-header-text);
}
.base-tooltip .popover-container.bottom::after {
  border-bottom-color: var(--list-header-text);
}
.base-tooltip .popover-container.top::after {
  border-top-color: var(--list-header-text);
}

.composite-header.expanded {
  border-bottom-color: var(--plain-dark);
}

pre {
  border: 1px solid var(--plain-dark);
  padding: 10px;
  background-color: var(--plain);
  border-radius: 4px;
}

.border-plain {
  border-color: var(--plain);
}

.error .multiselect__tags {
  border: 1px solid var(--red);
}

.multiselect__tags {
  border: 1px solid var(--input-placeholder-text);
}

.CodeMirror, .cm-editor {
  border: 1px solid #cecece;
}

.time-period button {
  background-color: var(--primary);
}
.time-period button .button-content {
  color: var(--on-primary);
}
.time-period button:hover {
  background-color: var(--primary-dark);
}

.toggle-container :hover {
  color: var(--primary);
}

.time-nav-container button {
  background-color: var(--plain-dark);
}
.time-nav-container button .button-content {
  color: var(--secondary);
}
.time-nav-container button:hover {
  background-color: var(--primary);
}
.time-nav-container button:hover .button-content {
  color: var(--on-primary);
}

.active > .base-item .required-item {
  color: var(--on-primary);
}

.base-item .required-item {
  color: red;
}

.base-select .required-indicator {
  color: red;
}

.markdown-viewer.boxed {
  background-color: var(--markdown-viewer-bg);
  border-color: var(--markdown-viewer-border);
}

.login {
  background-color: var(--login-bg);
  color: var(--login-text);
}
.login .login-box {
  background-color: var(--login-box-bg);
  color: var(--login-box-text);
}
.login .login-box .login-icon {
  background-color: var(--login-icon-bg);
  color: var(--login-icon-text);
}

.default-primary {
  background-color: var(--primary);
}

.i18n-toggle .language {
  border: 1px solid var(--border-plus-ten);
}
.i18n-toggle .language.active, .i18n-toggle .language:hover {
  color: var(--on-primary);
  border-color: var(--primary);
  background-color: var(--primary);
}
.i18n-toggle .language.active > .required, .i18n-toggle .language:hover > .required {
  color: white;
}
.i18n-toggle .language-markdown.active, .i18n-toggle .language-markdown:hover {
  color: var(--primary);
}
.i18n-toggle .required {
  color: red;
}

.base-icon-picker .wrapper-picker {
  background: var(--background);
}
.base-icon-picker .cell-picker:hover, .base-icon-picker .cell-picker.selected {
  background-color: var(--primary);
  color: var(--on-primary);
}

.filter-tabs {
  border-bottom: 1px solid var(--list-header-border);
}

.section-header {
  background-color: var(--section-header-bg);
  color: var(--section-header-text);
}
.section-header:last-child {
  border-bottom: 1px solid var(--list-header-border);
}
.section-header .action-icon .action {
  color: var(--section-header-text);
}
.section-header .search input, .section-header .search em {
  color: var(--section-header-text);
  border-color: var(--plain-dark);
}
.section-header .search input::-webkit-input-placeholder, .section-header .search em::-webkit-input-placeholder {
  color: var(--section-header-placeholder-text);
}
.section-header .search input input, .section-header .search em input {
  color: var(--section-header-text);
  border-color: var(--section-header-text);
}
.section-header .search input input::-webkit-input-placeholder, .section-header .search em input::-webkit-input-placeholder {
  color: var(--section-header-placeholder-text);
}

.trial-banner-green {
  background: var(--green);
}

.trial-banner-yellow {
  background: var(--yellow);
}

.trial-banner-green a.trial-links, .trial-banner-yellow a.trial-links {
  color: white;
}
.trial-banner-green a.trial-links:hover, .trial-banner-yellow a.trial-links:hover {
  color: rgb(229.5, 229.5, 229.5);
  cursor: pointer;
}

.tile-border {
  border-top: solid 4px var(--primary);
  box-shadow: 0 5px 15px #e0e0e0;
}

.home-notification {
  color: var(--primary);
}

.event {
  border-bottom: 1px solid #f0f0f0;
  background-color: white;
}

.dashboard-section {
  background-color: #fbfbfb;
}

.v-step[x-placement^=top] .v-step__arrow {
  border-color: var(--primary-light) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}
.v-step[x-placement^=bottom] .v-step__arrow {
  border-color: var(--primary-light) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
}
.v-step[x-placement^=left] .v-step__arrow {
  border-color: var(--primary-light) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}
.v-step[x-placement^=right] .v-step__arrow {
  border-color: var(--primary-light) !important;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

.step, .step-0 {
  background: var(--primary-light) !important;
}

.step_button {
  background: transparent;
  border: 0.05rem solid #fff;
  color: #fff;
}

.splash-header {
  border-bottom: solid 1px #e7e7e7;
}

.splash-next, .splash-prev {
  background: var(--primary);
}

.splash-next .button-content, .splash-prev .button-content {
  color: white !important;
}

.splash-next:hover, .splash-prev:hover {
  background: var(--primary-dark) !important;
}

.splash-close {
  background: white;
  border: solid 1px #d8d8d8 !important;
}

.splash-close:hover {
  background: #d8d8d8 !important;
}

.splash-dots .icon {
  color: lightgray;
}

.splash-dots .active-dot {
  color: gray;
}

.helpDropdown .dropdown-content {
  border-top: solid 1px #f0f0f0;
  color: black !important;
}

.top-list-header-border {
  border-top: 1px solid var(--list-header-border);
}

.connection-header {
  border-bottom: 1px solid var(--list-header-border);
}

.button-disabled > div > input {
  background: var(--input-disabled);
}

.dropdown-content:hover {
  background: #f0f0f0;
  color: black;
}

.calendar-header {
  background-color: var(--calendar-header-bg);
  color: var(--calendar-header-text);
}

.calendar-selection .calendar-selected {
  background-color: var(--calendar-selection-bg);
  color: var(--calendar-selection-text);
}

.drawer {
  border-color: var(--drawer-border);
}
.drawer .drawer-header {
  background-color: var(--drawer-header);
}

.list-header {
  background-color: var(--list-header-bg);
  color: var(--list-header-text);
  border-bottom: 1px solid var(--list-header-border);
}

.pill {
  background-color: var(--pill-bg);
  color: var(--pill-text);
}

.filter-controls {
  background-color: var(--filter-controls-bg);
  color: var(--filter-controls-text);
}

.notification-badge {
  background-color: var(--notification-badge);
}

.line-divider {
  border-top: 1px solid var(--menu-tabs-line-divider);
}

.admin-menu-header {
  color: var(--menu-tabs-menu-header);
}

.menu {
  background-color: var(--menu-bg);
  color: var(--menu-text);
}
.menu .menu-tab {
  color: var(--menu-tabs-text);
}
.menu .menu-tab:hover {
  background-color: var(--menu-tabs-hover-bg);
  color: var(--menu-tabs-hover-text);
}
.menu .menu-tab:hover .tag-text {
  color: var(--menu-tabs-hover-text);
}
.menu .menu-tab.active {
  background-color: var(--menu-tabs-active-bg);
  color: var(--menu-tabs-active-text);
}
.menu .menu-tab-link.active .menu-tab {
  background-color: var(--menu-tabs-active-bg);
  color: var(--menu-tabs-active-text);
}
.menu .back {
  border-bottom: 2px solid var(--primary-border);
}

.menu .org-picker {
  background-color: var(--org-picker-bg);
}

.expanded-menu {
  background-color: var(--expanded-menu-tabs-bg);
  color: var(--expanded-menu-tabs-text);
}
.expanded-menu .menu-tab {
  color: var(--expanded-menu-tabs-text);
}
.expanded-menu .menu-tab:hover {
  background-color: var(--expanded-menu-tabs-hover-bg);
  color: var(--expanded-menu-tabs-hover-text);
}
.expanded-menu .menu-tab:hover .tag-text {
  color: var(--expanded-menu-tabs-hover-text);
}
.expanded-menu .menu-tab.active {
  background-color: var(--expanded-menu-tabs-active-bg);
  color: var(--expanded-menu-tabs-active-text);
}
.expanded-menu .menu-tab-link.active .menu-tab {
  background-color: var(--expanded-menu-tabs-active-bg);
  color: var(--expanded-menu-tabs-active-text);
}
.expanded-menu .back {
  border-bottom: 2px solid var(--primary-border);
}
.expanded-menu.dropdown {
  background-color: var(--dropdown-expanded-menu-tabs-bg);
  color: var(--dropdown-expanded-menu-tabs-text);
}
.expanded-menu.dropdown .menu-tab {
  color: var(--dropdown-expanded-menu-tabs-text);
}
.expanded-menu.dropdown .menu-tab:hover {
  background-color: var(--dropdown-expanded-menu-tabs-hover-bg);
  color: var(--dropdown-expanded-menu-tabs-hover-text);
}
.expanded-menu.dropdown .menu-tab:hover .tag-text {
  color: var(--dropdown-expanded-menu-tabs-hover-text);
}
.expanded-menu.dropdown .menu-tab.active {
  background-color: var(--dropdown-expanded-menu-tabs-active-bg);
  color: var(--dropdown-expanded-menu-tabs-active-text);
}
.expanded-menu.dropdown .menu-tab-link.active .menu-tab {
  background-color: var(--dropdown-expanded-menu-tabs-active-bg);
  color: var(--dropdown-expanded-menu-tabs-active-text);
}
.expanded-menu.dropdown .back {
  border-bottom: 2px solid var(--primary-border);
}

.header {
  background-color: var(--main-header-bg);
  color: var(--main-header-text);
}
.header .header-button {
  color: var(--main-header-text);
}
.header .header-button.active, .header .header-button:hover {
  background: rgba(0, 0, 0, 0.2117647059);
}

.header .action-icon .action {
  color: var(--main-header-text);
}

.plain-bg {
  background-color: var(--plain);
}

.sub-header {
  background-color: var(--plain);
  color: var(--text);
}
.sub-header .action-icon .action {
  color: var(--text);
}

.session-timeout-icon {
  background-color: var(--session-timeout-icon-bg);
  color: var(--session-timeout-icon-text);
}

.breadcrumb-section {
  background-color: var(--breadcrumb-bg);
  border-bottom: 1px solid #ededed;
}
.breadcrumb-section.has-drilldown {
  color: var(--breadcrumb-text);
}

.bottom-border {
  border-bottom: 1px solid var(--border);
}

.child {
  background-color: var(--plain);
}

.description {
  color: var(--detail-text);
}

.box-border {
  border-color: var(--list-header-border);
}

.unit-border {
  border-color: var(--input-placeholder-text);
}

.metrics-section {
  border-left: 5px solid var(--gray);
  color: var(--gray);
}
.metrics-section.selected, .metrics-section:hover {
  color: var(--primary);
  border-left: 5px solid var(--primary);
}

.metrics-graph-header {
  color: var(--detail-text);
}

.checkered-bg {
  background-image: url("checkered-pattern-8x8-gray.png");
}

.title {
  margin: 0px;
  font-weight: normal;
}

.main-title h1, .main-title h2, .main-title h3, .main-title h4, .main-title h5, .main-title h6, .secondary-title h1, .secondary-title h2, .secondary-title h3, .secondary-title h4, .secondary-title h5, .secondary-title h6 {
  margin: 0px;
  font-weight: normal;
}

.h1 {
  font-weight: 500;
  font-family: "Inter";
  font-size: 24px;
  letter-spacing: -0.02em;
}

.h2 {
  font-weight: normal;
  font-family: "Inter";
  font-size: 18px;
  letter-spacing: -0.01rem;
  font-weight: 400;
}

.h1-b {
  font-weight: 500;
  font-family: "Inter";
  font-size: 20px;
  letter-spacing: -0.02em;
}

.h3-b {
  font-weight: normal;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: 0px;
  margin: 0px;
  font-family: "Inter";
}

.h4-b {
  font-weight: normal;
  font-size: 1rem;
  padding: 0rem;
  margin: 0rem;
  font-family: "Inter";
}

.h5 {
  font-family: "Inter";
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0em;
}

.body-1 {
  font-family: "Switzer", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 21px;
}

.body-2 {
  font-family: "Switzer", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
}

.body-3 {
  font-family: "Roboto";
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.063rem;
}

.code {
  font-family: Roboto Mono, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}

.value-1 {
  font-family: "Roboto";
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.25rem;
}

.value-1-b {
  font-family: "Roboto";
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.value-2 {
  font-family: "Roboto";
  font-size: 0.875rem;
  line-height: 1.063rem;
  font-weight: 400;
}

.text-primary {
  color: var(--text-primary);
}

.text-header {
  color: var(--text-header);
}

.cost-estimator-header {
  background-color: var(--cost-estimator-header-bg);
  color: var(--cost-estimator-header-text);
}

.cost-estimator-body {
  background-color: var(--cost-estimator-body-bg);
  color: var(--cost-estimator-body-text);
}
.cost-estimator-body .total-row {
  border-top-color: var(--cost-estimator-header-bg);
}

.upload-message {
  background-color: var(--upload-message-bg);
  color: var(--upload-message-text);
}

.help-center {
  background-color: var(--help-center-bg);
}
.help-center .help-center-header {
  background-color: var(--help-center-header-bg);
  color: var(--help-center-header-text);
}
.help-center .help-center-header .top .title .help-center-link {
  color: var(--help-center-header-text);
}
.help-center .html-preview {
  color: var(--text);
}
.help-center .breadcrumb-split {
  color: var(--secondary);
}
.help-center .topics {
  color: var(--help-center-text);
}
.help-center .topics .topic-tile em {
  color: var(--help-center-icon-color);
}
.help-center .topics .topic-tile .tile-title {
  color: var(--text);
}
.help-center .topics .featured-section .featured-title {
  color: var(--help-center-header-text);
}
.help-center .help-center-container .resources {
  background: var(--help-center-info-bg);
}
.help-center .help-center-footer {
  background: var(--help-center-footer-bg);
}

.articles-container a {
  border-left-color: var(--primary);
  border-right: var(--border);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
  box-shadow: 3px 2px 3px -1px var(--border-shadow);
}

.trial {
  background-color: var(--trial-bg);
}

.trial-box {
  background-color: var(--trial-box-bg);
}
.trial-box .trial-icon {
  background-color: var(--login-icon-bg);
  color: var(--login-icon-text);
}

.confirm-box {
  background-color: var(--trial-box-bg);
}

.left-intro {
  border-right: 1px solid var(--line-seperator);
}

.already-member {
  border-top: 1px solid var(--line-seperator);
}

.gray-horizontal-bar {
  border-top: 1px solid var(--line-seperator);
}

.state.ongoing {
  background-color: var(--trial-ongoing-badge);
}
.state.expired {
  background-color: var(--trial-expired-badge);
}
.state.pending {
  background-color: var(--trial-pending-badge);
}
.state.submitted {
  background-color: var(--trial-submitted-badge);
}
.state.converted {
  background-color: var(--trial-converted-badge);
}
.state.denied {
  background-color: var(--trial-denied-badge);
}
.state.purged {
  background-color: var(--trial-purged-badge);
}

.sparkline .ct-series-a .ct-line {
  stroke: var(--trial-sparkline);
}
.sparkline .ct-series-a .ct-area {
  fill: var(--trial-sparkline);
}