:root {
  --global-font-family: 'Lato', sans-serif;
  --global-background-color: #FFFFFF;
  --global-hover-color: #6ab96a; /* Usando valor del primer segmento */
  --global-text-color: #000000;
  --global-commponet-bg-color-soft: #6ab96a; /* Usando valor del primer segmento */
  --global-commponet-bg-color: #298429; /* Usando valor del primer segmento */
  --global-button-background-color: #298429; /* Usando valor del primer segmento */
  --global-button-background-hover-color: #298429; /* Usando valor del primer segmento */
  --global-button-text-color: #FFFFFF;
  --global-button-radius: 25px;
  --global-a-link-color: #000000; /* Usando valor del primer segmento */
  --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;
  --global-backround-loader-color: #4eb4d6; /* Usando valor del primer segmento */
  --toolbar-background: #c4c3c3; /* Usando valor del primer segmento */
  --toolbar-area-background: #efefef;
  --toolbar-text-color: #000000; /* Usando valor del primer segmento */
  --sidebar-width: 305px;
  --sidebar-width-out: 0px;
  --sidebar-width-open: 365px;
  --sidebar-push-logo: 60px;
  --sidebar-brand-bottom: 10px;
  --sidebar-background: #c4c3c3; /* Usando valor del primer segmento */
  --sidebar-footer-background: #298429; /* Usando valor del primer segmento */
  --sidebar-border: 1px solid #298429; /* Usando valor del primer segmento */
  --sidebar-text-color: #000000;
  --sidebar-text-size: 1rem;
  --movil-menu-close-color: #298429; /* Usando valor del primer segmento */
  --movil-menu-text-color: #000000;
  --movil-menu-logout-backround-color: #298429; /* Usando valor del primer segmento */
  --folder-border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
  --folder-selected-border-color: #111a24 #111a24 #ffffff #111a24;
  --toolbar-comment-color: #298429; /* Usando valor del primer segmento */
  --toolbar-comment-hover-color: #6ab96a; /* Usando valor del primer segmento */
  --toolbar-gallery-color: #298429; /* Usando valor del primer segmento */
  --toolbar-gallery-hover-color: #6ab96a; /* Usando valor del primer segmento */
  --toolbar-gallery-folder-color: #000000;
  --toolbar-gallery-folder-hover-color: #6ab96a; /* Usando valor del primer segmento */
  --notification-info-text: #ffffff;
  --notification-info-profile-background: #6ab96a; /* Usando valor del primer segmento */
  --notification-info-profile-border: #ffffff;
  --notification-info-background: #000000;
  --notification-info-pulse-background: #383838;
  --image-link-btn: #007bff; /* Usando valor del segundo segmento */
  --folder-text-color: #6c757d; /* Usando valor del segundo segmento */
  --folder-image-path: url('/etc/app/img/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: #007bff;
  --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;

  --folder-No-Config-Waring: #ffffff;
  --profile-No-Config-Waring: #dc3545;

  --banner-item-highlight-color: #573277;
  --banner-item-color: #856b9b;
}


@font-face {
    font-family: Poppins-Regular;
    src: url('/etc/app/fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('/etc/app/fonts/poppins/Poppins-Medium.ttf');
}

html,
body {
    background-color: var(--global-background-color);
    font-family: var(--global-font-family);
    color: var(--global-text-color);
}

/*Loader anim */
.qloader  {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.qloader:before,
.qloader:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}
.qloader:before {
  animation: ball1 1s infinite;
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}
.qloader:after {
  animation: ball2 1s infinite;
  background-color: #00a096;
  box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }
  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #97bf0d;
  }
  50% {
    box-shadow: 0 0 0 #97bf0d;
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #97bf0d;
    margin-top: 0;
  }
}