/*
Template Name: Personalización de Estilos HRM
Author: Luis Liberal
Email: luiseliberal.cl@gmail.com
File: default */

/*============================= VARIABLES PRINCIPALES ================================*/
:root {
  /******** PANEL DE COLORES *********/
  /*
  * on : Elemento sobre la superficie o sobre el color
  */

  /*PRIMARY*/
  --primary-color:#fe5000; /*#009da1;*/
  --primary-variant-dark-color: #be1000;/*#007e81;*/
  --primary-variant-light-color: #ff9040;/*#00c4c9;*/

  --on-primary-color: #454545;
  --on-primary-variant-dark-color: #454545;
  --on-primary-variant-light-color: #454545;

  /*SECONDARY*/
  --secondary-color: #0e239a;/*#0077bb;*/
  --secondary-variant-dark-color: #272727;/*#005f96;*/
  --secondary-variant-light-color: #4e63da;/*#0095ea;*/

  --on-secondary-color: #ffffff;
  --on-secondary-variant-dark-color: #ffffff;
  --on-secondary-variant-light-color: #ffffff;

  /*GRADIENTE*/
  --gradiente-color: #fe5000;/*#009da1;*/
 
  /*TOP*/ /*IMPORTANTE: "TOP" ES EL FILTRO PARA OBTENER VARIABLES CSS EN EL EDITOR HRMADM*

  /*ELEMENTS*/
  --background-color: #f1f1f1;
  --surface-color: #ffffff;

  --on-background-color: #797979;
  --on-surface-color: #797979;

  /*ALERTS*/
  --success-color: #32c861;/*#28a745;*/
  --warning-color: #ffa91c; /*#dab601;*/
  --error-color: #E3263E; /*#bd0000;*/

  --on-success-color: #ffffff;
  --on-warning-color: #ffffff;
  --on-error-color: #ffffff;

  /***********************************/
  /***********************************/

  --titlemain-text-color: #797979;
  /********* FONT ********/
  --font-primary: "Raleway", sans-serif;
  /********* HEX *********/
  --side-menu-bg-color: var(--secondary-color);
  --side-menu-text-color: var(--on-secondary-color);
  --top-bar-bg-color: var(--primary-color);
  --top-menu-text-color: var(--on-primary-color);
  --page-title-box-text-color: var(--on-surface-color);
  --body-bg-color: var(--background-color);
  --body-text-color: var(--on-background-color);
  --form-text-label-color: var(--on-surface-color);
  --btn-primary-color: var(--primary-color);
  --btn-primary-text-color: var(--on-primary-color);
  --btn-edit-color: var(--warning-color);
  --btn-edit-text-color: var(--on-warning-color);
  --btn-delete-color: var(--error-color);
  --btn-delete-text-color: var(--on-error-color);
  /********* RGBA *******/
  /** BARRA TITULO **/
  --page-title-box-bg-color-a: var(--surface-color); /*1*/
  --page-title-box-bg-color-b: var(--surface-color); /*255*/
  /** BARRA SUBTITULO **/
  --page-subtitle-box-bg-color-a: var(--secondary-color); /*1*/
  --page-subtitle-box-bg-color-b: var(--surface-color); /*1*/
  /**BARRA SUBTITULO NIVEL TRES**/
  --page-subtitletwo-box-bg-color-a: var(--primary-color);
  --page-subtitletwo-box-bg-color-b: var(--gradiente-color);

  /******** HSLA (Gradients customizados automatizados) *********/
  /* Color principal */
  --page-portlet-box-main-color: var(--gradiente-color);
  --page-portlet-box-main-color-b: var(--primary-color);
  --page-portlet-box-opa: 0%;
  /* Tonalidad variante sobre color principal automática */
  --page-portlet-subbox-opa: 25%;
  /* Variables finales */
  --page-portlet-box-bg-color: linear-gradient(
    250deg,
    var(--page-portlet-box-main-color),
    var(--page-portlet-box-opa)
  );
  --page-card-box-bg-color: linear-gradient(
    250deg,
    var(--page-portlet-box-main-color),
    var(--page-portlet-subbox-opa)
  );

  --jchart-color-primary: #ebeff2;
  --jchart-color-secondary: #9aa1f2;
  --jchart-color-tertiary: #6ad9c3;
  --jchart-color-quaternary: #6ee9c3;
}

/*======================================================================================
========================================================================================
===================================== COMPONENTS.CSS ===================================
======================================================================================*/
.tooltip {
  font-family: var(--font-primary);
}

.btn {
  font-family: var(--font-primary);
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.btn-custom.focus,
.btn-custom:active,
.btn-custom:focus,
.btn-custom:hover,
.open > .dropdown-toggle.btn-custom {
  background-color: var(--primary-variant-dark-color) !important;
  border: 1px solid var(--primary-variant-dark-color) !important;
}

.btn-primary {
  background-color: var(--btn-primary-color) !important;
  border: 1px solid var(--btn-primary-color) !important;
  color: var(--btn-primary-text-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--primary-variant-dark-color) !important;
  border-color: var(--primary-variant-dark-color) !important;
}

.btn-info {
  background-color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--on-primary-color) !important;
}

.btn-bordered.btn-custom:hover,
.btn-bordered.btn-custom:focus,
.btn-bordered.btn-custom:active {
  border: 2px solid var(--primary-variant-dark-color) !important;
}

.btn-bordered.btn-primary {
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
}

.btn-bordered.btn-primary:hover,
.btn-bordered.btn-primary:focus,
.btn-bordered.btn-primary:active {
  background-color: var(--primary-variant-dark-color);
  border: 2px solid var(--primary-variant-dark-color) !important;
}

.btn-bordered.btn-info {
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
}

.btn-bordered.btn-info:hover,
.btn-bordered.btn-info:focus,
.btn-bordered.btn-info:active {
  background-color: var(--primary-color);
}

.panel {
  background-color: var(--surface-color) !important;
}

.panel-default > .panel-heading {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.panel-title {
  font-family: var(--font-primary);
  color: var(--on-secondary-color) !important;
}

.panel-primary > .panel-heading {
  background-color: var(--secondary-color);
}

.panel-info > .panel-heading {
  background-color: var(--secondary-color);
}

.panel-border.panel-primary .panel-heading {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.panel-border.panel-info .panel-heading {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.panel-border.panel-custom .panel-heading {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.portlet-heading {
  background: linear-gradient(
    250deg,
    var(--page-portlet-box-main-color) 0%,
    var(--page-portlet-box-main-color) 50%,
    var(--page-portlet-box-main-color-b) 100%
  );
}

.portlet .portlet-body {
  background: var(--surface-color);
  color: var(--on-surface-color)
}

.portlet .portlet-title, .portlet .portlet-widgets {
  color: var(--on-primary-color) !important;
}

.checkbox input[type="checkbox"]:checked + label::after {
  font-family: var(--font-primary);
}

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.checkbox-info input[type="checkbox"]:checked + label::before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.radio-primary input[type="radio"] + label::after {
  background-color: var(--primary-color);
}

.radio-primary input[type="radio"]:checked + label::before {
  border-color: var(--primary-color);
}

.radio-primary input[type="radio"]:checked + label::after {
  background-color: var(--primary-color);
}

.radio-info input[type="radio"] + label::after {
  background-color: var(--primary-color);
}
.radio-info input[type="radio"]:checked + label::before {
  border-color: var(--primary-color);
}
.radio-info input[type="radio"]:checked + label::after {
  background-color: var(--primary-color);
}

.progress-bar-primary {
  background-color: var(--primary-color);
}

.progress-bar-info {
  background-color: var(--primary-color);
}

.alert-info {
  color: var(--primary-color);
}

.jq-toast-single {
  font-family: var(--font-primary);
}

.jq-toast-single h2 {
  font-family: var(--font-primary);
}

.jq-icon-info {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.swal2-modal {
  font-family: var(--font-primary);
}

.widget-two-primary .widget-two-icon {
  color: var(--primary-color);
  border: 4px double var(--primary-color);
}

.widget-two-info .widget-two-icon {
  color: var(--primary-color);
  border: 4px double var(--primary-color);
}

.widget-user img {
  width: 200px !important;
  height: 150px !important;
  border-radius: 0%;
}

.inbox-widget .inbox-item .inbox-item-author {
  font-family: var(--font-primary);
}

.inbox-widget .inbox-item .inbox-item-text {
  color: var(--secondary-color);
}

.accordion-card {
  background-color: var(--surface-color);
}

.avatar-sm-box {
  font-family: var(--font-primary);
}

.table-hover > tbody > tr:hover {
  background-color: var(--body-bg-color) !important;
}

.custom-dd-empty .dd-list .dd3-content {
  font-family: var(--font-primary);
}

.fc-toolbar h2 {
  font-family: var(--font-primary);
}

.fc-day-grid-event .fc-time {
  font-family: var(--font-primary);
}

.external-event.bg-primary {
  background-color: var(--error-color) !important;
  color: var(--primary-color);
}

.external-event.bg-info {
  color: var(--primary-color);
}

.fc-basic-view td.fc-week-number span {
  font-family: var(--font-primary);
}

.fc-basic-view td.fc-day-number {
  font-family: var(--font-primary);
}

/* =============
   Form
============= */
/* Form components */
label {
  color: var(--form-text-label-color);
  font-family: var(--font-primary);
}

.select2-dropdown {
  background-color: #383e58;
}

.select2-container .select2-selection--multiple {
  background: #383e58;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: #585c6c;
  border: 1px solid #585c6c;
}

.mce-window-head .mce-title {
  font-family: var(--font-primary);
}

/* =============
   Tables
============= */
.table > tbody > tr > td,
.table > tbody > tr > th {
  padding: 12px 10px;
  color: var(--on-surface-color);
}

.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  color: var(--titlemain-text-color);
}

th {
  font-family: var(--font-primary);
}

table.dataTable > tbody > tr.child span.dtr-title {
  font-family: var(--font-primary);
}

.tablesaw thead tr:first-child th {
  font-family: var(--font-primary);
}

.table-colored.table-primary thead th {
  background-color: var(--primary-color);
}

.table-colored.table-info thead th {
  background-color: var(--primary-color);
}

.table-colored-bordered.table-bordered-primary {
  border: 2px solid var(--primary-color);
}

.table-colored-bordered.table-bordered-primary thead th {
  background-color: var(--primary-color);
}

.table-colored-bordered.table-bordered-info {
  border: 2px solid var(--primary-color);
}

.table-colored-bordered.table-bordered-info thead th {
  background-color: var(--primary-color);
}

.table-colored-full.table-full-primary {
  background-color: var(--error-color);
}
.table-colored-full.table-full-primary thead th {
  background-color: var(--primary-color);
}
.table-colored-full.table-full-primary tbody tr:hover {
  background-color: var(--primary-color);
}

.table-colored-full.table-full-info thead th {
  background-color: var(--primary-color);
}
.table-colored-full.table-full-info tbody tr:hover {
  background-color: var(--primary-color);
}
.table-colored-full.table-full-custom {
  background-color: var(--error-color);
}

/* =====================================
   CHARTS
   ===================================== */

.legend tr {
  font-family: var(--font-primary);
}

.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point,
.ct-chart .ct-series.ct-series-a .ct-slice-donut {
  stroke: var(--primary-color);
}

.ct-chart .ct-series.ct-series-g .ct-bar,
.ct-chart .ct-series.ct-series-g .ct-line,
.ct-chart .ct-series.ct-series-g .ct-point,
.ct-chart .ct-series.ct-series-g .ct-slice-donut {
  stroke: var(--primary-color);
}
.ct-series-a .ct-area,
.ct-series-a .ct-slice-pie {
  fill: var(--primary-color);
}

.c3-chart-arcs-title {
  font-family: var(--font-primary);
}

.c3-tooltip .value {
  font-family: var(--font-primary);
}

.c3-legend-item {
  font-family: var(--font-primary);
}
/* =================
   Typehead
==================== */
.tt-highlight {
  font-family: var(--font-primary);
}

/* =================
   Ribbons
==================== */
.ribbon-box .ribbon {
  font-family: var(--font-primary);
}

.ribbon-box .ribbon-custom:before {
  border-color: var(--primary-variant-dark-color) transparent transparent;
}
.ribbon-box .ribbon-primary {
  background: var(--primary-color);
  color: var(--on-primary-color);
}
.ribbon-box .ribbon-primary:before {
  border-color: var(--primary-variant-dark-color) transparent transparent;
}

.ribbon-box .ribbon-info {
  background: var(--primary-color);
  color: var(--on-primary-color);
}

.ribbon-box .ribbon-two span {
  font-family: var(--font-primary);
}

.ribbon-box .ribbon-two-custom span:before {
  border-left: 3px solid var(--primary-variant-dark-color);
  border-top: 3px solid var(--primary-variant-dark-color);
}

.ribbon-box .ribbon-two-custom span:after {
  border-right: 3px solid var(--primary-variant-dark-color);
  border-top: 3px solid var(--primary-variant-dark-color);
}
.ribbon-box .ribbon-two-primary span {
  background: var(--primary-color);
}

.ribbon-box .ribbon-two-primary span:before {
  border-left: 3px solid var(--primary-variant-dark-color);
  border-top: 3px solid var(--primary-variant-dark-color);
}
.ribbon-box .ribbon-two-primary span:after {
  border-right: 3px solid var(--primary-variant-dark-color);
  border-top: 3px solid var(--primary-variant-dark-color);
}

.ribbon-box .ribbon-two-info span {
  background: var(--primary-color);
}

.search-input-hrm {
  margin: 10px;
  color: var(--on-surface-color);
}

/*======================================================================================
========================================================================================
===================================== CORE.CSS ========================================
======================================================================================*/
/* =============
   Common
============= */
body {
  font-family: var(--font-primary);
  color: var(--body-text-color);
  background-color: var(--body-bg-color);
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
  color: var(--top-menu-text-color);
  font-family: var(--font-primary);
}

.h4,
.h5,
.h6,
h4,
h5,
h6 {
  color: var(--titlemain-text-color);
  font-family: var(--font-primary);
}

h4 {
  color: var(--on-surface-color);
}

b,
strong {
  font-family: var(--font-primary);
}
/* =============
   Helper classes
============= */
.font-secondary {
  font-family: var(--font-primary);
}
/* =============
   Extras
============= */
.card-title {
  color: var(--on-background-color);
}
.card-box {
  border: 1px solid var(--surface-color);
  margin-bottom: 10px;
  background-color: var(--surface-color);
  /*backgroun-color: var(--page-card-box-bg-color)*/
  color: var(--on-surface-color);
  box-shadow: 0 1px 2px rgb(214 219 226 / 50%), 0 1px 2px rgb(214 219 226 / 50%);
}
/* =============
   Bootstrap-custom
============= */
.breadcrumb a {
  color: var(--on-surface-color);
}
/* Dropdown */
.dropdown-menu {
  border: 1px solid rgba(42, 111, 146, 0.15);
}
/* Background colors */
.bg-custom {
  background-color: var(--primary-variant-dark-color) !important;
}
.bg-primary {
  background-color: linear-gradient(
    250deg,
    var(--page-subtitletwo-box-bg-color-a) 0%,
    var(--page-subtitletwo-box-bg-color-a) 0%,
    var(--page-subtitle-box-bg-color-b) 100%
  ) !important;
}

.bg-info {
  background-color: var(--secondary-variant-light-color) !important;
}
/* Text colors */
.text-custom {
  color: var(--primary-variant-dark-color) !important;
}
.text-muted {
  color: var(--secondary-variant-dark-color) !important;
}
.text-primary {
  color: var(--secondary-color) !important;
}
.text-info {
  color: var(--secondary-variant-light-color) !important;
}
/* Labels */
.label {
  font-family: var(--font-primary);
}
.label-default {
  background-color: var(--primary-variant-light-color);
}
.label-primary {
  background-color: var(--primary-color);
}
.label-info {
  background-color: var(--primary-variant-light-color);
}
.label-muted {
  background-color: var(--secondary-color);
}
/* Badge */
.badge {
  background-color: var(--primary-variant-light-color);
  font-family: var(--font-primary);
  color: var(--on-secondary-variant-light-color);
}
.badge-primary {
  background-color: var(--secondary-color);
  color: var(--on-secondary-color);
}
.badge-success {
  background-color: var(--secondary-variant-light-color);
  color: var(--on-secondary-variant-light-color);
}
.badge-info {
  background-color: var(--primary-variant-light-color);
  color: var(--on-secondary-variant-light-color);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--primary-variant-light-color);
  border-color: var(--primary-variant-light-color);
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: var(--primary-variant-light-color);
  border-color: var(--primary-variant-light-color);
}

.waves-effect.waves-custom .waves-ripple {
  background-color: rgba(100, 197, 177, 0.4);
}
.waves-effect.waves-primary .waves-ripple {
  background-color: rgba(68, 137, 228, 0.4);
}
.waves-effect.waves-info .waves-ripple {
  background-color: rgba(52, 211, 235, 0.4);
}
/* =============
   Print css
============= */
@media print {
  .page-title-box,
  .topbar-left,
  .hidden-print,
  .breadcrumb,
  .page-title,
  .footer,
  #topnav {
    display: none;
    margin: 0;
    padding: 0;
  }
}

/* Demo css Grid page */
.grid-structure .grid-container {
  font-family: var(--font-primary);
}

.icon-list-demo .col-md-4:hover i {
  background-color: var(--secondary-variant-light-color);
}

/*======================================================================================
========================================================================================
===================================== MENU.CSS ========================================
======================================================================================*/
.logo {
  font-family: var(--font-primary);
}
/****************** SIDEBAR *****************/
.side-menu {
  background: var(--side-menu-bg-color);
}
#sidebar-menu > ul > li > a {
  color: var(--side-menu-text-color);
}
.nav-second-level.nav li a,
.nav-thrid-level.nav li a {
  color: var(--side-menu-text-color);
}

#sidebar-menu > ul > li > a.active {
  background-color: var(--secondary-variant-dark-color);
  color:var(--on-secondary-variant-dark-color);
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus,
#sidebar-menu > ul > li > a:active {
  background-color: var(--secondary-variant-dark-color);
  color:var(--on-secondary-variant-dark-color);
}

/********************************************/

.topbar {
  background-color: var(--top-bar-bg-color);
}

.topbar-left {
  background-color: var(--secondary-variant-dark-color) !important;
}

.navbar-default {
  background-color: var(--top-bar-bg-color);
}

.button-menu-mobile {
  background-color: var(--top-bar-bg-color);
}

.side-menu .waves-effect .waves-ripple {
  background-color: rgba(227, 38, 62, 0.4);
}
.nav-second-level.nav li a:focus,
.nav-thrid-level.nav li a:focus {
  background-color: var(--secondary-variant-light-color);
  color: var(--on-secondary-variant-light-color);
}
.nav-second-level.nav li a:hover,
.nav-thrid-level.nav li a:hover {
  background-color: var(--secondary-variant-light-color);
  color: var(--on-secondary-variant-light-color);
}
.nav-second-level.nav li.active > a {
  background-color: var(--secondary-variant-light-color);
  color: var(--on-secondary-variant-light-color);
}
.menu-title {
  font-family: var(--font-primary);
}
.enlarged #wrapper #sidebar-menu ul ul {
  background-color: #000000;
}
.app-search .form-control,
.app-search .form-control:focus {
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
}
.header-title {
  color: var(--secondary-variant-dark-color);
}
.page-title-box {
  background: linear-gradient(
    250deg,
    var(--page-title-box-bg-color-a) 0%,
    var(--page-title-box-bg-color-a) 24%,
    var(--page-title-box-bg-color-b) 100%
  );

  border-bottom: 1px solid var(--primary-color);
}
.page-title-box .page-title {
  color: var(--page-title-box-text-color);
}

/*======================================================================================
========================================================================================
====================================== PAGES.CSS =======================================
======================================================================================*/
.message-list li.active:hover {
  box-shadow: inset 3px 0 0 var(--error-color);
}
.message-list li.blue-dot .col-1 .dot {
  border-color: var(--error-color);
}
.mail-list a {
  font-family: var(--font-primary);
}
.jvectormap-tip {
  font-family: var(--font-primary);
}
.mapael .mapTooltip {
  background-color: var(--error-color);
  font-family: var(--font-primary);
}
.mapael .zoomReset {
  background-color: var(--error-color);
}
.border {
  background-color: var(--error-color);
}
#count-down .clock-presenter .digit {
  font-family: var(--font-primary);
}
#count-down .clock-presenter .note {
  font-family: var(--font-primary);
}
.pricing-column .plan-header {
  position: relative;
  padding: 30px 20px 25px;
  background-color: var(--error-color);
  border-radius: 5px 5px 0 0;
}
.pricing-column .plan-header {
  background-color: var(--error-color);
}
.pricing-column .plan-title {
  font-family: var(--font-primary);
}
.pricing-column .plan-price {
  font-family: var(--font-primary);
}
/* =============
   Account Pages
============= */
.bg-accpunt-pages {
  background: var(--error-color);
  /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    var(--error-color),
    var(--secondary-variant-light-color)
  );
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    var(--error-color),
    var(--secondary-variant-light-color)
  );
}
.text-error {
  color: var(--error-color);
  text-shadow: rgba(227, 38, 62, 0.3) 5px 1px, rgba(227, 38, 62, 0.2) 10px 3px;
}
/* ====
Lightbox
===== */
.lb-data .lb-caption {
  font-family: var(--font-primary);
}
.file-man-box:hover {
  border-color: var(--error-color);
}
/* ===========
Slider
============== */
.slick-prev:before,
.slick-next:before {
  color: var(--error-color);
}
.slick-center img {
  border: 3px solid var(--error-color);
}
/* =============
   Tree view page
============= */
.jstree-default .jstree-clicked {
  background: rgba(227, 38, 62, 0.1);
}
.jstree-default .jstree-hovered {
  background: rgba(227, 38, 62, 0.2);
  box-shadow: none;
}
.jstree-default .jstree-wholerow-clicked {
  background: rgba(227, 38, 62, 0.4);
}
.jstree-default .jstree-wholerow-hovered {
  background: rgba(227, 38, 62, 0.2);
}
/* =============
   Sitemaps
============= */
ul.sitemap li a:hover {
  color: var(--error-color);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--body-text-color) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--btn-primary-color) !important;
  border-color: var(--btn-primary-text-color) !important;
  color: var(--btn-primary-text-color) !important;
}

.ribbon-box > .clearfix {
  background-color: var(--surface-color);
}

.mdi {
  color: var(--on-primary-color);
}

/*** PAGINA DE ACTUALIZACION DE PASSWORD **/

.bg-accpunt-pages {
  background: var(--primary-color) !important;
}

.table-colored.table-custom thead th {
  background-color: var(--secondary-color);
  color: var(--on-secondary-color)
}

/*** Sección crear metas **/
.panel .panel-body p {
  color: var(--on-surface-color);
}

.small,
small {
  color: var(--on-surface-color);
}

/*EQUIPO*/
.inbox-item:hover {
  background-color: var(--surface-color);
}
.item-toggle,
.item-toggle a {
  background-color: var(--secondary-color) !important;
  color: var(--on-secondary-color);
}
.item-toggle .item-child:hover {
  background-color: var(--secondary-variant-dark-color);
}

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;
  color: var(--on-secondary-color) !important;
}

.btn-secondary .mdi {
  color: var(--on-secondary-color) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--secondary-variant-dark-color) !important;
  border-color: var(--secondary-variant-dark-color) !important;
}

.option-button:checked + .button-label {
  background:var(--secondary-variant-dark-color);
  color: var(--on-secondary-variant-dark-color);
}

.option-button:checked + .button-label:hover {
  background:var(--secondary-variant-dark-color);
  color: var(--on-secondary-variant-dark-color);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4)
}

.label-success {
  background-color:var(--success-color);
}

.label-error {
  background-color:var(--error-color);
}

.btn-success {
  background-color: var(--success-color) !important;
  border: 1px solid var(--success-color) !important;
  color:var(--on-success-color) !important;
}

.btn-error, .btn-danger{
  background-color: var(--error-color) !important;
  border: 1px solid var(--error-color) !important;
  color: var(--on-error-color) !important;
}

.btn-bordered.btn-danger {
  color: var(--error-color) !important;
  border: 2px solid var(--error-color) !important;
  background-color: var(--surface-color) !important;
}

.btn-bordered.btn-danger:hover,
.btn-bordered.btn-danger:focus,
.btn-bordered.btn-danger:active {
  background-color: var(--error-color) !important;
  border: 2px solid var(--error-color) !important;
  color: var(--on-error-color) !important; 
}

.btn-bordered.btn-success {
  color: var(--success-color) !important;
  border: 2px solid var(--success-color) !important;
  background-color: var(--surface-color) !important;
}

.btn-bordered.btn-success:hover,
.btn-bordered.btn-success:focus,
.btn-bordered.btn-success:active {
  background-color: var(--success-color) !important;
  border: 2px solid var(--success-color) !important;
  color: var(--on-success-color) !important; 
}


.btn-bordered.btn-primary {
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  background-color: var(--surface-color) !important;
}

.btn-default {
  background-color: #797979;
  border-color: #797979;
  color: #FFFFFF;
}

.btn-default .mdi{
  color: #FFFFFF;
}

.btn-warning {
  background-color: var(--warning-color) !important;
  border: 1px solid var(--warning-color) !important;
  color: var(--on-warning-color) !important;
}

.btn-bordered.btn-warning:hover,
.btn-bordered.btn-warning:focus,
.btn-bordered.btn-warning:active {
  background-color: var(--warning-color) !important;
  border: 2px solid var(--warning-color) !important;
  color: var(--on-warning-color) !important; 
}


.btn-bordered.btn-warning {
  color: var(--warning-color) !important;
  border: 2px solid var(--warning-color) !important;
  background-color: var(--surface-color) !important;
}

.alt-seleccion + .button-label {
  background:var(--primary-variant-dark-color);
  color: var(--on-primary-variant-dark-color);
}

.alt-seleccion + .button-label:hover {
  background:var(--primary-variant-dark-color) !important;
  color: var(--on-primary-variant-dark-color) !important;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4)
}

.alert-warning {
  color: var(--on-warning-color) !important;
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
}

.alert-warning p {
  color: var(--on-warning-color) !important;
}

.icon-barra{
  color: var(--on-primary-color);
}

.panel-heading {
  padding: 15px 20px !important;
}

.tabs-bordered li.active a, .tabs-bordered li.active a:hover, .tabs-bordered li.active a:focus {
  border-bottom: 2px solid var(--primary-variant-dark-color) !important;
  color: var(--primary-variant-dark-color);
}

.widget-two-custom .widget-two-icon {
  color: var(--primary-variant-dark-color);
  border: 4px double var(--primary-variant-dark-color);
}

.panel-custom > .panel-heading {
  background-color: var(--secondary-color);
  color: var(--on-secondary-color);
}

.panel-sub-title {
  color: var(--on-secondary-color) !important;
}

.bg-warning {
  background-color: var(--warning-color) !important;
}

.bg-success {
  background-color: var(--success-color) !important;
}

.bg-danger {
  background-color: var(--error-color) !important;
}

.inbox-widget .inbox-item, .inbox-volver {
  border-bottom: 1px solid var(--surface-color);
  background-color: var(--surface-color);
}

#equipo .inbox-widget .inbox-item:hover {
  border-bottom: 1px solid var(--primary-variant-light-color);
  background-color: var(--primary-variant-light-color);
}

#equipo .inbox-item-text {
  color: var(--primary-variant-dark-color);
}

.taskList .task-info{
  background-color: var(--secondary-variant-light-color) !important;
  color: var(--on-secondary-variant-light-color) !important;
  border-left-color: var(--secondary-variant-dark-color) !important;
}

.panel-metas .subcard-box{
  border: 1px solid var(--on-surface-color) !important; 
}

#bgResumenGen .text-primary{
  color:var(--on-surface-color) !important;
}
#etiquetas .text-primary{
  color:var(--on-surface-color) !important;
}

/*--*/

.button-search-result{
  margin: auto;
  padding: 10px;
  font-weight: bolder;
  background: var(--top-bar-bg-color);
  color: var(--on-primary-color);
  border-radius: 5px;
  border-color: var(--btn-edit-text-color);
  display: flex;
}

.introjs-tooltip-title{
  color: var(--on-surface-color);
}

.progress-bar-success{
  background-color: var(--success-color);
}

.progress-bar-danger{
  background-color: var(--error-color);
}

/**********************************************/

.text-surface{
  color:var(--on-surface-color);
}

.text-navbar{
  color: var(--on-primary-color);
}

.alerta-mantenimiento{
  border:2px solid var(--on-warning-color);
  background-color: var(--warning-color); 
  width:45vw; 
  position: absolute; 
  z-index: 100;
  top: 60%;
  left: 27vw; 
  padding:10px;
}

.alerta-mantenimiento p{
  color: var(--on-warning-color);
  margin:0;
}