:root {
  --global-background-color: #FFFFFF;
  --global-hover-color: #ff51d7;
  --global-text-color: #000000;
  --global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --global-commponet-bg-color-soft: #ff51d7;
  --global-commponet-bg-color: #ff51d7;
  --global-button-background-color: #ff51d7;
  --global-button-background-hover-color: #ff51d7;
  --global-button-text-color: #FFFFFF;
  --global-a-link-color: #ff51d7;
  --toolbar-background: #FFFFFF;
  --toolbar-text-color: #ff51d7;
  --sidebar-width: 305px;
  --sidebar-width-out: -305px;
  --sidebar-width-open: 365px;
  --sidebar-push-logo: 60px;
  --sidebar-brand-bottom: 10px;
  --sidebar-background: #FFFFFF;
  --sidebar-footer-background: #ff51d7;
  --sidebar-border: 1px solid #ff51d7;
  --sidebar-text-color: #000000;
  --sidebar-text-size: 18px;
  --movil-menu-close-color: #ff51d7;
  --movil-menu-text-color: #000000;
  --movil-menu-logout-backround-color: #ff51d7;
  --folder-border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
  --folder-selected-border-color: #111a24 #111a24 #ffffff #111a24;
  --toolbar-comment-color: #ff51d7;
  --toolbar-comment-hover-color: #ff51d7;
  --toolbar-gallery-color: #ff51d7;
  --toolbar-gallery-hover-color: #ff51d7;
  --toolbar-gallery-folder-color: #000000;
  --toolbar-gallery-folder-hover-color: #ff51d7;
  --notification-info-text: #ffffff;
  --notification-info-profile-background: #6ab96a;
  --notification-info-profile-border: #ffffff;
  --notification-info-background: #000000;
  --notification-info-pulse-background: #383838;
  --image-link-btn: #000000;
  --folder-text-color: #ffffff;
}

html, body {
  background-color: var(--global-background-color);
  font-family: var(--global-font-family);
  color: var(--global-text-color);
}
/*Loader anim */
.qloader {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #000000;
}
.qloader:before, .qloader:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.qloader:after {
  color: #ff51d7;
  transform: rotateY(70deg);
  animation-delay: .4s;
}
@keyframes rotate {
  0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
 }
  100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
 }
}
@keyframes rotateccw {
  0% {
      transform: translate(-50%, -50%) rotate(0deg);
 }
  100% {
      transform: translate(-50%, -50%) rotate(-360deg);
 }
}
@keyframes spin {
  0%, 100% {
      box-shadow: .2em 0px 0 0px currentcolor;
 }
  12% {
      box-shadow: .2em .2em 0 0 currentcolor;
 }
  25% {
      box-shadow: 0 .2em 0 0px currentcolor;
 }
  37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
 }
  50% {
      box-shadow: -.2em 0 0 0 currentcolor;
 }
  62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
 }
  75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
 }
  87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
 }
}