:root {
  --main-hue: var(--main-hue);
}

html body {
  background: hsl(var(--main-hue), 100%, 92%);
}

nav {
  /* background: linear-gradient(300deg, hsl(var(--main-hue) ,930%,40%) 100%, #271414 100%) ; */
  background: linear-gradient(280deg, hsl(var(--main-hue), 100%, 20%) 100%, #271414 100%);
  /* for navbar */
}

.main-menu.menu-light .navigation {
  background: linear-gradient(280deg, hsl(var(--main-hue), 100%, 24%) 100%, #271414 100%);
  /* for sidebar menu */
}

.breadcrumb-item a,
table a {
  color: hsl(var(--main-hue), 930%, 25%) !important;
  /* for table anchor link */
}

body.bg-black .breadcrumb-item a,
body.bg-black table a {
  color: #fff !important;
  /* for theme 2 dark theme */
}


.table tbody tr:hover {
  background-color: hsl(var(--main-hue), 930%, 85%) !important;
  /* for table row hover bg-color */
}

.table tbody tr:focus {
  background-color: hsl(var(--main-hue), 930%, 85%) !important;
  /* for table row hover bg-color */
}

.menubarIcon {
  fill: hsla(var(--main-hue), 100%, 100%) !important;
  /* for sidebar menu icon */
}

.dashboard-boxIcon {
  fill: hsl(var(--main-hue), 930%, 40%) !important;
  /* for dashboard page icon */
}

.vertical-content-menu.menu-collapsed .main-menu .main-menu-content a.menu-title,
.vertical-content-menu.menu-collapsed .main-menu .main-menu-content>span.menu-title {
  background: linear-gradient(280deg, hsl(var(--main-hue), 81%, 45.5%) 100%, #271414 100%);
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.main-menu.menu-light .navigation>li>ul,
.main-menu.menu-light ul.menu-popout {
  background-image: -webkit-gradient(linear-gradient(280deg, hsl(var(--main-hue), 100%, 34%) 100%, #271414 100%)) !important;
  background: linear-gradient(280deg, hsl(var(--main-hue), 100%, 38%) 100%, #271414 100%) !important;
  color: hsla(var(--main-hue), 100%, 0) !important;
}

.main-menu.menu-light ul.menu-popout li a {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.main-menu.menu-light .navigation>li .active>a {
  background: linear-gradient(280deg, hsl(var(--main-hue), 100%, 34%) 100%, #271414 100%) !important;
  color: hsla(var(--main-hue), 100%, 100%) !important;
  box-shadow: 0px 1px 8px 0px #ccc;
}

.input-group-text {
  background: linear-gradient(-380deg, hsl(var(--main-hue), 100%, 34%) 100%, #271414 100%);
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.main-menu.menu-light .navigation>li.open>a {
  border-right: 4px solid hsl(var(--main-hue), 100%, 0%) !important;
  color: hsla(var(--main-hue), 0, 0) !important;
}

.main-menu.menu-light .navigation>li.active>a {
  color: hsla(var(--main-hue), 100%, 0%) !important;
}

footer p span {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

footer p a {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.gradiantColor h3 .warning {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.card-header,
.modal-header {
  background: linear-gradient(280deg, hsl(var(--main-hue), 100%, 34%) 100%, #271414 100%);
}

.accordion .card-header:after {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.dc-view-switcher>button {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.heading-elements ul.list-inline li a {
  color: hsla(var(--main-hue), 100%, 100%);
}

.modal-header .close {
  color: hsla(var(--main-hue), 100%, 100%) !important;
  opacity: 1;
}

/* .main-menu.menu-light .navigation li a{
  color: hsla(var(--main-hue) , 100%, 100%)!important;
} */

.main-menu.menu-light .navigation .is-shown a {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.modal-title,
.card-title {
  color: hsla(var(--main-hue), 100%, 100%) !important;
}

.display-pic {
  background: linear-gradient(-135deg, hsl(var(--main-hue), 100%, 34%) 5%, hsl(var(--main-hue), 100%, 34%) 30%, white 95%);
}

.nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item a.nav-link.active {
  border-color: hsl(var(--main-hue), 100%, 34%) !important;
  color: hsl(var(--main-hue), 100%, 34%) !important;
}

footer {
  background: linear-gradient(135deg, hsl(var(--main-hue), 100%, 34%) 100%, #271414 100%) !important;
}

.colorBox {
  background-image: linear-gradient(to right, #fdfdfd 0%, #f3f3f3 100%);
  margin: 0 10px;
  z-index: 111111;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 25px;
}

.colorBox:hover {
  cursor: pointer;
}

.hidden-childs {
  height: 45px;
  width: 45px;
  overflow: hidden;
  margin: 0 10px;
  background-color: #1b1a25;
  border-radius: 50%;
  margin: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 300ms ease-in-out;
}

.hc-0 {
  transition-delay: 50ms;
  background-image: linear-gradient(180deg, #fafbfc 0%, #f0f0f0 100%);
  box-shadow: 1px 2px 5px 0px #b9b7b7;
}

.hc-1 {
  transition-delay: 50ms;
  background-image: linear-gradient(180deg, #ad4800 0%, #ad4800 100%);
}

.hc-2 {
  transition-delay: 100ms;
  background-image: linear-gradient(to top, #00adad 0%, #00adad 100%);
}

.hc-3 {
  transition-delay: 150ms;
  background-image: linear-gradient(-225deg, #5f00ad 0%, #5f00ad 48%, #5f00ad 100%);
}

.hc-4 {
  transition-delay: 200ms;
  background-image: linear-gradient(to top, #007cad 0%, #007cad 100%);
}

.hc-5 {
  transition-delay: 200ms;
  background-image: linear-gradient(180deg, #74ad00 0%, #74ad00 100%);
}

.hc-6 {
  transition-delay: 200ms;
  background-image: linear-gradient(180deg, #ad0000 0%, #ad0000 100%);
}

.hc-7 {
  transition-delay: 200ms;
  background-image: linear-gradient(180deg, #0000ad 0%, #0000ad 100%);
}

/* .theme-changer:hover {
  transition-delay: 50ms;
}
.theme-changer:hover .hc-2 {
  transition-delay: 100ms;
}
.theme-changer:hover .hc-3 {
  transition-delay: 150ms;
}
.theme-changer:hover .hc-4 {
  transition-delay: 200ms;
} */
/* media queries */
@media screen and (max-width: 500px) {
  .theme-changer {
    left: 10px;
    bottom: 10px;
  }

  /* .theme-changer:hover .hidden-childs {
    height: 45px;
    width: 45px;
    margin: 0 2px;
    font-size: 20px;
  } */
  .colorBox {
    height: 45px;
    width: 45px;
    margin: 0 10px;
    font-size: 20px;
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

#edit-bg.ep-enhanced {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
}

#edit-bg {
  align-items: center;
  border-radius: 500px;
  bottom: 16px;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  min-width: 32px;
  position: fixed;
  left: 16px;
  width: fit-content;
}

/* .breadcrumb-item a, table a {
  color:  hsl(var(--main-hue) ,930%,40%) !important;
} */

button.fc-button.fc-state-active,
button.fc-button.fc-state-hover {
  background-color: hsl(var(--main-hue), 930%, 40%) !important;
  color: #fff;
}

.badge-warning {
  background-color: hsl(var(--main-hue), 930%, 40%) !important;
  border: 2px solid #fff;
}

/* .notebg-info-light {
  background-color: hsl(var(--main-hue) ,930%,40%) !important;
}
.notebg-info-light *, .modal-body.notebg-info-light *{
  color: #fff;
} */