/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  scroll-behavior: smooth;
  /* --bg-color-primary: 47, 65, 74;
  --bg-color-secondary: 244, 123, 82;
  --bg-color-success: 25, 135, 84;
  --bg-color-danger: 242, 70, 13;
  --bg-color-info: 126, 188, 250;
  --bg-color-warning: 255, 153, 51;
  --bg-color-dark: 0, 6, 51;
  --bg-color-light: 238, 240, 242;
  --bg-color-white: 255, 255, 255;

  --bs-body-color: hsl(210, 21%, 5%);
  --bs-link-color-hsl: hsl(211, 100%, 38%); */
  /* this has been used for the links to comply with the WCAG (contrast compliance) */
  /* --bs-nav-link-dark-theme-hsl: hsl(211, 100%, 38%); */
  /* nav-link in the portal as pwe WCAG Contrast Checker */
  /* --bs-secondary-text-emphasis: 98, 49, 33;
  --bs-danger-hsl: hsl(15, 55%, 45%);
  --bs-yellow-hsl: hsl(45, 90%, 46%);
  --bs-secondary-hsl: hsl(15, 70%, 50%); */
  --bs-scaling-dots: hsl(210, 21%, 5%);
  /* scaling dots */
  /* --bs-btn-disabled-color: #2F414A; */
  /* btn disabled text color */
  /* --bs-btn-disabled-bg: #eef0f2; */
  /* btn disabled background color */
  /* --bs-light-rgb: 238, 240, 242; */
  /* navbar bg-light class */
  /* --bs-emphasis-color-rgb: 0, 0, 0; */
  /* nav-link active */
}

/* #faebd7 rgb(250, 235, 215) antiquewhite, #f8f8ff ghostwhite, #483d8b darkslateblue, #198754 success */
[data-bs-theme=dark] {
  /* --bs-heading-color: #faebd7;
  --bs-body-color: #f8f8ff;
  --bs-link-color-hsl: hsl(211, 80%, 40%); */
  /* nav-link inactive as pwe WCAG Contrast Checker */
  /* --bs-nav-link-dark-theme-hsl: hsl(211, 60%, 70%); */
  /* nav-link in the portal as pwe WCAG Contrast Checker */
  /* --bs-gray-300: rgba(72, 61, 139, 0.85); */
  /* bs-gray-300 for mark class */
  /* --bs-primary: hsl(248, 39%, 49%);
  --bg-primary: #faebd7;
  --bg-color-dark: 250, 235, 215;
  --tagify-dd-color-primary: #198754 !important;
  --tagify-dd-bg-color: hsl(248, 40%, 25%) !important; */
  /* tagify list to comply with WCAG */
  /* --bs-primary-bg-subtle: #483d8b; */
  /* tagify bg color */
  /* --bs-primary-text-emphasis: #faebd7; */
  /* tagify text color */
  /* --bs-btn-disabled-color: #faebd7; */
  /* btn disabled text color */
  /* --bs-btn-disabled-bg: #2F414A; */
  /* btn disabled background color */
  --bs-scaling-dots: hsl(45, 90%, 46%);
  /* scaling dots */
  /* --bs-light-rgb: 250, 235, 215; */
  /* navbar bg-light class */
  /* --bs-emphasis-color-rgb: 0, 0, 0; */
  /* nav-link active */
}

[data-bs-theme="dark"] #logoImg {
    content: url("/assets/logo/no-image-icon.png");
}

[data-bs-theme="dark"] #logoFooter {
    content: url("/assets/logo/no-image-icon.png");
}

[data-bs-theme="light"] #logoImg {
    content: url("/assets/logo/no-image-icon.png");
}

[data-bs-theme="light"] #logoFooter {
    content: url("/assets/logo/no-image-icon.png");
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* Added CSS height & width to fill the empty space if content is shorter than the page length */
  /* Removed CSS min-height: 100vh and flex-direction: column etc. to fill the empty space if content is shorter than the page length */
  height: 100%;
  width: 100%;
  display: block;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  text-shadow: 0 0 1px transparent;
  /* use this to increase font legibility */
  /* color: #444444; */
  /* optional: This is for older browsers as optimizeLegibility may not work correctly */
  -webkit-font-variant-ligatures: common-ligatures;
  /* for iOS and Safari 6 */
  font-variant-ligatures: common-ligatures;
  /* for up-to-date browsers, including IE10 and Opera 21 */
  /* pre-Firefox 14+ */
  /* defining kerning in browsers - for older browsers as optimizeLegibility may not work correctly */
  -webkit-font-feature-settings: "kern";
  /* Firefox 14+ */
  font-feature-settings: "kern";
  /* standard */
  -webkit-font-kerning: normal;
  font-kerning: normal;
  /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21+*/
}

@media (max-width: 480px) {
  body {
    text-rendering: optimizeSpeed;
  }
}

/* Added CSS to fill the empty space if content is shorter than the page length */
/* Added a div in the body tag with .flexwrapper class */
.flexwrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Added CSS flex-grow: 1 to fill the empty space if content is shorter than the page length */
#content {
  padding-bottom: 2rem;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

section {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
  margin-right: auto;
  margin-left: auto;
}

.container,
.container-fluid {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
  width: 100%;
  /* padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1); */
  padding: 0;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 576px) {

  .container,
  .container-fluid {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    /* padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1); */
    padding: 0;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 1400px) {

  .container,
  .container-fluid {
    max-width: 1400px;
  }
}

hr {
  margin: 4px;
}

.row, .col {
  padding: 0;
  margin: 0;
}

/*--------------------------------------------------------------
# Forms, Tagify
--------------------------------------------------------------*/

#inp_honey,
#inp_honey_forgot_password {
  display: none;
  position: fixed;
  left: 2000px;
}

.form-check-input {
  height: 1.1rem;
  width: 1.1rem;
  border-color: var(--bs-dark);
}

.form-check.form-check-inline {
  margin: 0px;
}

.form-control {
  height: calc(3.75rem + calc(var(--bs-border-width)* 2));
}

.tagify__tag, .tagify__input {
  margin: 0px 5px 0px 0px !important;
}

.tagify[disabled] {
  opacity: 0.9 !important;
}

/*--------------------------------------------------------------
# Back to top button, tax calculator help button
# The css has been changed to work with class name instead of ID name
# New Custom JS has been added to work with this css
# Changed due to some issues with the custom JS Code
--------------------------------------------------------------*/
.myToTopButton {
  position: fixed;
  opacity: 0.8;
  border-radius: 4px;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.myToTopButton.hide {
  opacity: 0;
  right: -100%;
}

.myToTopButton.show {
  opacity: 1;
  right: 34px;
  bottom: 100px;
  z-index: 1070;
  width: 40px;
  height: 40px;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3);
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3);
}

/* The floating scroll to top button has been disabled on screens smaller than 768px */
/* This is obstructing the visuals and doesn't seem necessary as navigation buttons are easily accessible */
@media (max-width: 767.98px) {
  .myToTopButton.show {
    opacity: 0;
    right: -100%;
  }
}


/*--------------------------------------------------------------
# Header Navbar Brand
--------------------------------------------------------------*/

.sidenav .navbar-heading {
  padding-left: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-white);
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.sidenav .nav-item.border-start {
  margin-left: 0.75rem;
}

.sidenav .nav-item .btn {
  color: var(--bs-light);
}

/*--------------------------------------------------------------
# Header Navbar Main, Navbar
--------------------------------------------------------------*/

.navbar-main {
  background-color: rgba(var(--bg-color-primary), 0.1);
  -webkit-transition: background-color 0.25s ease-in, -webkit-box-shadow 0.25s ease-in;
  transition: background-color 0.25s ease-in, -webkit-box-shadow 0.25s ease-in;
  transition: box-shadow 0.25s ease-in, background-color 0.25s ease-in;
  transition: box-shadow 0.25s ease-in, background-color 0.25s ease-in, -webkit-box-shadow 0.25s ease-in;
}

.navbar-main img {
  height: 40px;
}

.navbar-main.fixed-top {
  width: calc(100% - (15.625rem + 1.5rem * 3));
}

.navbar-main.fixed-top+[class*="container-fluid"] {
  margin-top: 7.1875rem !important;
}

.navbar {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-box-shadow: 0px 4px 16px rgba(var(--bg-color-primary), 0.4);
  box-shadow: 0px 4px 16px rgba(var(--bg-color-primary), 0.4);
}

.z-index-sticky {
  z-index: 1020;
}

.top-1 {
  top: 1% !important;
}

.blur {
  /* -webkit-box-shadow: inset 0px 0px 2px #fefefed1;
  box-shadow: inset 0px 0px 2px #fefefed1; */
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(27.2px);
  backdrop-filter: blur(27.2px);
  background-color: rgba(var(--bg-color-primary), 0.3) !important;
}

a.dropdown-item {
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.navbar-nav .dropdown-menu {
  position: absolute;
  margin-top: 16px;
  padding: 0px;
}

#bs5themeswitch1 .dropdown-menu,
#bs5themeswitch2 .dropdown-menu,
#bs5themeswitch3 .dropdown-menu,
.dropdown-menu.animateDropdown {
  animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0rem);
    transform: translateY(0rem);
    opacity: 1;
  }

}

#bs5themeswitch1 .dropdown-menu,
#bs5themeswitch2 .dropdown-menu,
#bs5themeswitch3 .dropdown-menu,
.dropdown-menu.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

/* For the Theme Switch Dropdown Menu - visible on devices < 576px */
#bs5themeswitch2 .dropdown-menu-end[data-bs-popper] {
  right: auto;
  left: 0;
  padding: 0;
}

#bs5themeswitch3 .dropdown-menu-end[data-bs-popper] {
  padding: 0;
}

.nav-link {
  padding: 0.25rem;
  --bs-nav-link-font-size: 1rem;
  --bs-nav-link-font-weight: 600;
}

.nav-tabs .nav-link {
  background-color: var(--bs-primary-border-subtle);
  color: var(--bs-dark);
}

.nav-tabs .nav-link.active {
  background-color: var(--bs-primary);
  color: #faebd7;
}

a,
a.nav-link {
  font-family: Mulish, sans-serif;
}

/* New sidebar css */

/*!
 * Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

/*! 
=========================================================
* Corporate UI Dashboard - v1.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/corporate-ui-dashboard
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (site.license)

* Coded by www.creative-tim.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

.sidenav {
  background-color: var(--bs-primary);
  z-index: 1050;

}

.sidenav button.btn {
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navbar .sidenav-toggler-inner {
  width: 22px;
}

.navbar .sidenav-toggler-inner .sidenav-toggler-line {
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
  background: var(--bs-primary);
  border-radius: 0.125rem;
  position: relative;
  display: block;
  height: 2px;
}

.navbar .sidenav-toggler-inner .sidenav-toggler-line:not(:last-child) {
  margin-bottom: 4px;
}

.g-sidenav-show.g-sidenav-pinned .navbar .sidenav-toggler-inner .sidenav-toggler-line:first-child,
.g-sidenav-show.g-sidenav-pinned .navbar .sidenav-toggler-inner .sidenav-toggler-line:last-child {
  width: 15px;
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
}


@media (max-width: 991.98px) {
  .g-sidenav-show .navbar:not(.sidenav).navbar-main .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .g-sidenav-show .navbar:not(.sidenav).navbar-main .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.navbar-vertical .navbar-nav .nav-link {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  color: var(--bs-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
}

.navbar-vertical .navbar-nav .nav-link .dropdown-menu {
  border: none;
}

.navbar-vertical .navbar-nav .nav-link .dropdown-menu .dropdown-menu {
  margin-left: 0.5rem;
}

.navbar-vertical .navbar-nav .nav-sm .nav-link {
  font-size: 0.8125rem;
}

.navbar-vertical.navbar-expand-xs {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 15.625rem !important;
  overflow-y: auto;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

@media screen and (max-width: 576px) {
  .navbar-vertical.navbar-expand-xs {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 12.625rem !important;
    overflow-y: auto;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
  display: block;
  overflow: hidden;
  /* height: calc(100vh - 300px); */
}

.navbar-vertical.navbar-expand-xs>[class*="container-fluid"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  min-height: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* @media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .navbar-vertical.navbar-expand-xs>[class*="container-fluid"] {
    min-height: 0;
    height: 100%;
  }
} */

.navbar-vertical.navbar-expand-xs.fixed-start {
  left: 0;
}

.navbar-vertical.navbar-expand-xs.fixed-end {
  right: 0;
}

.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  margin: 0;
}

.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link .nav-link-text,
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link .sidenav-mini-icon,
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link .sidenav-normal,
.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link i {
  pointer-events: none;
}

.navbar-vertical.navbar-expand-xs .navbar-nav .nav-item {
  width: 100%;
}

.navbar-vertical.navbar-expand-xs .navbar-nav>.nav-item {
  margin-top: 0rem;
}

.navbar-vertical.navbar-expand-xs .navbar-nav>.nav-item .icon .ni {
  top: 0;
}

.navbar-vertical.navbar-expand-xs .navbar-nav .nav .nav-link {
  padding-top: 0.417rem;
  padding-bottom: 0.417rem;
  padding-left: 15px;
}

.navbar-vertical.navbar-expand-xs .navbar-nav .nav .nav-link>span.sidenav-normal {
  -webkit-transition: all 0.1s ease 0s;
  transition: all 0.1s ease 0s;
}

.main-content,
.sidenav {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


@media (min-width: 1200px) {
  .sidenav:hover {
    max-width: 15.625rem;
  }

  .sidenav .sidenav-toggler {
    padding: 1.5rem;
  }

  .sidenav.fixed-start~.main-content {
    margin-left: 15.625rem;
  }

  .sidenav.fixed-start~.main-content.main-content-documentation {
    margin-left: 21rem;
  }

  .sidenav.fixed-end~.main-content {
    margin-right: 17.125rem;
  }
}

.sidenav-footer .card.card-background:after {
  opacity: 0.65;
}

.g-sidenav-show .sidenav .nav-item .collapse {
  height: auto;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .g-sidenav-show .sidenav .nav-item .collapse {
    -webkit-transition: none;
    transition: none;
  }
}

.g-sidenav-show .sidenav .nav-link-text {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  opacity: 1;
}

@media (max-width: 1199.98px) {
  .g-sidenav-show.rtl .sidenav {
    -webkit-transform: translateX(17.125rem);
    transform: translateX(17.125rem);
  }

  .g-sidenav-show:not(.rtl) .sidenav {
    -webkit-transform: translateX(-17.125rem);
    transform: translateX(-17.125rem);
  }

  .g-sidenav-show .sidenav.fixed-start~.main-content {
    margin-left: 0 !important;
  }

  .g-sidenav-show.g-sidenav-pinned .sidenav {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Avatar CSS */

.avatar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* max-height: 32px;
  width: 32px;
  height: 100%; */
  /* font-size: 21px; */
  /* line-height: 32px; */
}

.avatar.img-thumbnail {
  padding: 4px;
  max-width: none;
}

.avatar>img {
  width: 100%;
}

.avatar-16 {
  max-height: 16px;
  width: 16px;
  height: 100%;
}

.avatar-24 {
  max-height: 24px;
  width: 24px;
  height: 100%;
}

.avatar-36 {
  max-height: 36px;
  width: 36px;
  height: 100%;
}

.avatar-48 {
  max-height: 48px;
  width: 48px;
  height: 100%;
}

.avatar-64 {
  max-height: 64px;
  width: 64px;
  height: 100%;
}

.avatar-96 {
  max-height: 96px;
  width: 96px;
  height: 100%;
}

@media (min-width: 576px) {
  .avatar-sm-24 {
    max-height: 24px;
    width: 24px;
    height: 100%;
  }

  .avatar-sm-36 {
    max-height: 36px;
    width: 36px;
    height: 100%;
  }

  .avatar-sm-48 {
    max-height: 48px;
    width: 48px;
    height: 100%;
  }
}

@media (min-width: 768px) {
  .avatar-md-36 {
    max-height: 36px;
    width: 36px;
    height: 100%;
  }

  .avatar-md-48 {
    max-height: 48px;
    width: 48px;
    height: 100%;
  }

  .avatar-md-64 {
    max-height: 64px;
    width: 64px;
    height: 100%;
  }
}

@media (min-width: 992px) {
  .avatar-lg-36 {
    max-height: 36px;
    width: 36px;
    height: 100%;
  }

  .avatar-lg-48 {
    max-height: 48px;
    width: 48px;
    height: 100%;
  }

  .avatar-lg-64 {
    max-height: 64px;
    width: 64px;
    height: 100%;
  }
}

@media (min-width: 1200px) {
  .avatar-xl-48 {
    max-height: 48px;
    width: 48px;
    height: 100%;
  }

  .avatar-xl-64 {
    max-height: 64px;
    width: 64px;
    height: 100%;
  }
}

@media (min-width: 1400px) {
  .avatar-xxl-96 {
    max-height: 96px;
    width: 96px;
    height: 100%;
  }

  .avatar-xxl-128 {
    max-height: 128px;
    width: 128px;
    height: 100%;
  }
}

/* Profile Avatar */

.translate-profilebadge {
  -webkit-transform: translate(-60%, -40%) !important;
  transform: translate(-60%, -40%) !important;
}

/* Dropzone */

.dmxDropzone {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.dmxDropzone .dmxDropzoneMessage {
  margin: 0.5em 0;
  font-size: 0.9rem;
}

.dmxDropzone .dmxDropzoneThumb::before {
  position: absolute;
  bottom: 0;
  left: 0;
}


/**
  * Scaling dots
  *
  * @author jh3y
*/
@-webkit-keyframes scaling-dots {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40%,
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaling-dots {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40%,
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.scaling-dots {
  display: grid;
  height: 10px;
  grid-gap: 5px;
  grid-template-columns: repeat(7, 8px);
  vertical-align: middle;
}

.scaling-dots div {
  -webkit-animation: scaling-dots 1s infinite ease backwards;
  animation: scaling-dots 1s infinite ease backwards;
  background: var(--bs-scaling-dots);
  border-radius: 100%;
  height: 10px;
  width: 10px;
}

.scaling-dots div:nth-child(1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.scaling-dots div:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.scaling-dots div:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.scaling-dots div:nth-child(4) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.scaling-dots div:nth-child(5) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

/*
=========================================================
* CSS for the photo slider to transition between light & dark themes
=========================================================

* Product Page: https://www.codehim.com/html5-css3/html-css-image-comparison-slider/
*/

@media (min-width: 576.98px) {
  .themeslider {
    max-width: 90%;
  }
}

@media (min-width: 767.98px) {
  .themeslider {
    max-width: 80%;
  }
}

@media (min-width: 991.98px) {
  .themeslider {
    max-width: 70%;
  }
}

@media (min-width: 1199.98px) {
  .themeslider {
    max-width: 60%;
  }
}

.c-compare {
  --h: 9;
  --m: 0.5rem 0;
  --w: 12;
  --thumb-bgc: hsla(45, 90%, 46%, 0.8);
  --thumb-bgc-focus: hsla(211, 100%, 38%, 0.6);
  --thumb-w: 1rem;

  margin: var(--m);
  position: relative;
}

.c-compare::after {
  content: "";
  display: block;
  padding-bottom: calc((var(--h) / var(--w)) * 100%);
}

.c-compare__left,
.c-compare__right {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.c-compare__left {
  -webkit-clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
  clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
}

.c-compare__right {
  -webkit-clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
  clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
}

.c-compare__range {
  background-color: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  height: 100%;
  margin: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.c-compare__range::-moz-range-thumb {
  background-color: var(--thumb-bgc);
  cursor: ew-resize;
  height: 100%;
  width: var(--thumb-w);
}

.c-compare__range::-webkit-slider-thumb {
  background-color: var(--thumb-bgc);
  cursor: ew-resize;
  height: 100%;
  width: var(--thumb-w);
}

.c-compare__range:focus::-webkit-slider-thumb {
  background-color: var(--thumb-bgc-focus);
  -webkit-box-shadow: 0 0 0 3px var(--thumb-bgc);
  box-shadow: 0 0 0 3px var(--thumb-bgc);
}

.c-compare__range:focus::-moz-range-thumb {
  background-color: var(--thumb-bgc-focus);
  box-shadow: 0 0 0 3px var(--thumb-bgc);
}

.c-compare__range::-moz-range-track {
  background: transparent;
  background-size: 100%;
  box-sizing: border-box;
}

.c-compare__range::-webkit-slider-runnable-track {
  background: transparent;
  background-size: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
}

.c-compare__range,
.c-compare__range::-webkit-slider-runnable-track,
.c-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}