/* Animations */
/* Base */
.loading {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/* Colors */
/* Color: Gray */
/* Colors: Highlight */
/* Radius */
/* Responsive */
/* styleguide:ignore:start */
/* Use $q-xl-min for backwards compatibility. */
/* styleguide:ignore:end */
/* Sizes */
/* Sizes: Atoms */
/* Sizes: Molecules */
/* Sizes: Organisms */
/* Typography */
/* z-index */
/* Colors: Background */
.color-gray-1 {
  background-color: #E9EAEE;
  color: #727272;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-gray-1:not(.no-hover):hover {
  background-color: #dbdce3;
  color: #727272;
  cursor: pointer;
}
.color-gray-1:focus, .color-gray-1.active {
  background-color: #cccfd8;
  color: #727272;
}

.color-gray-2 {
  background-color: #727272;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-gray-2:not(.no-hover):hover {
  background-color: #656565;
  color: #FFFFFF;
  cursor: pointer;
}
.color-gray-2:focus, .color-gray-2.active {
  background-color: #595959;
  color: #FFFFFF;
}

.color-gray-3 {
  background-color: #3F3F3F;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-gray-3:not(.no-hover):hover {
  background-color: #323232;
  color: #FFFFFF;
  cursor: pointer;
}
.color-gray-3:focus, .color-gray-3.active {
  background-color: #262626;
  color: #FFFFFF;
}

.color-gray-4 {
  background-color: #323232;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-gray-4:not(.no-hover):hover {
  background-color: #252525;
  color: #FFFFFF;
  cursor: pointer;
}
.color-gray-4:focus, .color-gray-4.active {
  background-color: #191919;
  color: #FFFFFF;
}

.color-brand-lighter {
  background-color: var(--color-primary-lighter);
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-brand-lighter:not(.no-hover):hover {
  background-color: hsl(var(--color-primary-lighter-hs), calc(var(--color-primary-lighter-l) - 5%), 100%);
  cursor: pointer;
}
.color-brand-lighter:focus, .color-brand-lighter.active {
  background-color: hsl(var(--color-primary-lighter-hs), calc(var(--color-primary-lighter-l) - 10%), 100%);
}

.color-brand {
  background-color: var(--color-brand);
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-brand:not(.no-hover):hover {
  background-color: hsl(var(--color-brand-hs), calc(var(--color-brand-l) - 5%), 100%);
  color: #FFFFFF;
  cursor: pointer;
}
.color-brand:focus, .color-brand.active {
  background-color: hsl(var(--color-brand-hs), calc(var(--color-brand-l) - 10%), 100%);
  color: #FFFFFF;
}

.color-brand-darker {
  background-color: var(--color-brand-darker);
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-brand-darker:not(.no-hover):hover {
  background-color: hsl(var(--color-brand-darker-hs), calc(var(--color-brand-darker-l) - 5%), 100%);
  color: #FFFFFF;
  cursor: pointer;
}
.color-brand-darker:focus, .color-brand-darker.active {
  background-color: #000000;
  color: #FFFFFF;
}

.color-transparent {
  background-color: transparent;
  color: #727272;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-transparent:not(.no-hover):hover {
  background-color: transparent;
  color: #727272;
  cursor: pointer;
}
.color-transparent:focus, .color-transparent.active {
  background-color: transparent;
  color: #727272;
}

.color-lightest {
  background-color: #FFFFFF;
  color: #727272;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-lightest:not(.no-hover):hover {
  background-color: #f2f2f2;
  color: #727272;
  cursor: pointer;
}
.color-lightest:focus, .color-lightest.active {
  background-color: #e6e6e6;
  color: #727272;
}

.color-lighter {
  background-color: #F9F9F9;
  color: #3F3F3F;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-lighter:not(.no-hover):hover {
  background-color: #ececec;
  color: #3F3F3F;
  cursor: pointer;
}
.color-lighter:focus, .color-lighter.active {
  background-color: #e0e0e0;
  color: #3F3F3F;
}

.color-darkest {
  background-color: #000000;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-darkest:not(.no-hover):hover {
  background-color: black;
  color: #FFFFFF;
  cursor: pointer;
}
.color-darkest:focus, .color-darkest.active {
  background-color: black;
  color: #FFFFFF;
}

.color-highlight-success {
  background-color: #7ca363;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-highlight-success:not(.no-hover):hover {
  background-color: #709558;
  color: #FFFFFF;
  cursor: pointer;
}
.color-highlight-success:focus, .color-highlight-success.active {
  background-color: #64854e;
  color: #FFFFFF;
}

.color-highlight-error {
  background-color: #dc9999;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-highlight-error:not(.no-hover):hover {
  background-color: #d58686;
  color: #FFFFFF;
  cursor: pointer;
}
.color-highlight-error:focus, .color-highlight-error.active {
  background-color: #cf7373;
  color: #FFFFFF;
}

.color-highlight-warning {
  background-color: #ede17a;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-highlight-warning:not(.no-hover):hover {
  background-color: #eadc64;
  color: #FFFFFF;
  cursor: pointer;
}
.color-highlight-warning:focus, .color-highlight-warning.active {
  background-color: #e7d74d;
  color: #FFFFFF;
}

.color-highlight-info {
  background-color: #6bb9f0;
  color: #FFFFFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.color-highlight-info:not(.no-hover):hover {
  background-color: #54aeee;
  color: #FFFFFF;
  cursor: pointer;
}
.color-highlight-info:focus, .color-highlight-info.active {
  background-color: #3da3eb;
  color: #FFFFFF;
}

/* From Dashboard */
/* ==========================================================================
Base colors
========================================================================== */
/* ==========================================================================
Gray colors
========================================================================== */
/* ==========================================================================
Font colors
========================================================================== */
/* ==========================================================================
Sidebar colors
========================================================================== */
/* ==========================================================================
Other colors
========================================================================== */
/* ==========================================================================
Brand colors
========================================================================== */
/* ==========================================================================
Colors global-styles
Have a look at these
========================================================================== */
/* ==========================================================================
Gray colors
========================================================================== */
/* ==========================================================================
Brand colors
========================================================================== */
:root {
  --color-primary-darkest: var(--blue-grey-90);
  --color-primary-darker: var(--blue-grey-80);
  --color-primary: var(--blue-grey-70);
  --color-primary-lighter: var(--blue-grey-50-brand);
  --color-primary-light: var(--blue-grey-30);
  --color-primary-lightest: var(--blue-grey-10);
  --color-secondary: var(--orange-50-brand);
  --color-secondary-light: var( --orange-55);
  --color-brand-lighter: var(--color-primary-lighter);
  --color-brand-lighter-hs: 202, 25%;
  --color-brand-lighter-l: 58%;
  --color-brand: var(--color-primary);
  --color-brand-hs: 202, 22%;
  --color-brand-l: 41%;
  --color-brand-darker: var(--color-primary-darker);
  --color-brand-darker-hs: 201, 24%;
  --color-brand-darker-l: 62%;
  --button-color-active: var(--color-primary-lighter);
  --button-text-color-active: var(--color-primary);
  --button-secondary-text-color: var(--color-primary);
  --button-ordinary-background-color: var(--cp-grey);
  --border-color-active: var(--black);
  --fab-color-default: var(--color-secondary);
  --fab-color-hover: var(--color-secondary);
  --fab-color-active: var(--color-secondary);
  --link-light-background-color: var(--color-secondary);
  --link-dark-background-color: var(--color-secondary);
  --loader-color: var(--color-secondary);
  --input-search-icon-color: var(--greys-darkest-main-text);
  --input-border-color: var(--color-primary);
  --navbar-border-color: var(--color-secondary);
  --sidebar-primary-bg: var(--white);
  --sidebar-primary-fg: var(--black);
  --sidebar-primary-selected-bg: var(--color-brand);
  --sidebar-primary-selected-fg: var(--white);
  --sidebar-secondary-bg: var(--white);
  --sidebar-secondary-selected-bg: var(--color-brand);
  --sidebar-secondary-selected-fg: var(--white);
  --sidebar-hover: var(--greys-hover);
  --sidebar-separator: var(--greys-lighter-2);
  --tag-text-color: var(--color-primary-darker);
  --logo-url: url(https://atomic-components.viriciti.com/img/logos/chargepoint.svg);
  --logo-url-small: url(https://atomic-components.viriciti.com/img/logos/chargepoint-compact.svg);
}