:root {
  --global-font-family: 'Lato', sans-serif;

  --global-background-color: #FFFFFF;
  --global-hover-color: #795c92;
  --global-text-color: #000000;
  --global-commponet-bg-color-soft: #795c92;
  --global-commponet-bg-color: #795c92;
  --global-button-background-color: #795c92;
  --global-button-background-hover-color: #694e82;
  --global-button-text-color: #FFFFFF;
  --global-button-radius: 25px;
  --global-a-link-color: #795c92;
  --global-a-link-hover-color: #694a84;
  --global-border-textarea-color: 1px solid #000000;
  --global-textarea-bakground-color: #ecebeb;
  --global-field-border: 0 none;
  --global-folder-tab-text: #000000;
  --global-table-boxshadow: 0 0 0 0.10rem #795c92;
  --global-table-hover-boxshadow: 0 0 0 0.10rem #543a6c;
  --global-pinputtext-padding: 12px;
  --global-pinputtext-height: 40px;
  --toolbar-background: #FFFFFF;
  --toolbar-area-background: #efefef;
  --toolbar-text-color: #795c92;
  --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: #795c92;
  --sidebar-border: 1px solid #795c92;
  --sidebar-text-color: #000000;
  --sidebar-text-size: 18px;
  --movil-menu-close-color: #795c92;
  --movil-menu-text-color: #000000;
  --movil-menu-logout-backround-color: #795c92;
  --folder-border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
  --folder-selected-border-color: #111a24 #111a24 #ffffff #111a24;
  --toolbar-comment-color: #795c92;
  --toolbar-comment-hover-color: #795c92;
  --toolbar-gallery-color: #795c92;
  --toolbar-gallery-hover-color: #795c92;
  --toolbar-gallery-folder-color: #000000;
  --toolbar-gallery-folder-hover-color: #795c92;
  --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;
  --folder-image-path: url('/etc/app/img/sexyotaku/folder.png');
  --box-shadow-focus: inset 0 0 0 0.2rem rgba(134, 45, 142, 0.5);

  --global-text-color-secondary: #6c757d;
  --text-primary: #000000;
  --text-secondary: #6c757d;
  --primary-bg: #007bff;
  --primary-hover-bg: #0056b3;
  --surface-hover: #f1f1f1;
  --focus-ring: rgba(0, 123, 255, 0.25);
  --global-backround-loader-color: #795c92;
  --global-hover-color: #0056b3;
  --sidebar-border: #dee2e6;
  --sidebar-width-out: -310px;
  --sidebar-text-size: 1rem;
  --folder-text-color: #000000;
  --image-link-btn: #007bff;
  --maskbg: rgba(0, 0, 0, 0.5);
  --font-family: Arial, sans-serif;
  --font-feature-settings: normal;
  --danger-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --submit-color: #28a745;
  --text-danger-color: #dc3545;
}

* {
  box-sizing: border-box;
}

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: #795c92;
  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;
 }
}