/* You can add global styles to this file, and also import other style files */

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/quill/dist/quill.snow.css';

/* Ocultar barra de Syncfusion */
#js-licensing {
  display: none !important;
  visibility: hidden !important;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* INPUTS */
.input-filter {
  font-size: 14px;
  width: 90%;
}

.w-100 { width: 100% !important; }
.w-95 { width: 95% !important; }
.w-90 { width: 90% !important; }
.w-85 { width: 85% !important; }
.w-80 { width: 80% !important; }
.w-75 { width: 75% !important; }
.w-70 { width: 70% !important; }
.w-65 { width: 65% !important; }
.w-60 { width: 60% !important; }
.w-55 { width: 55% !important; }
.w-50 { width: 50% !important; }
.w-45 { width: 45% !important; }
.w-40 { width: 40% !important; }
.w-35 { width: 35% !important; }
.w-30 { width: 30% !important; }
.w-25 { width: 25% !important; }
.w-20 { width: 20% !important; }
.w-15 { width: 15% !important; }
.w-10 { width: 10% !important; }
.w-5 { width: 5% !important; }

.w-300p { width: 300px !important; }
.w-250p { width: 250px !important; }
.w-200p { width: 200px !important; }
.w-150p { width: 150px !important; }
.w-100p { width: 100px !important; }
.w-50p { width: 50px !important; }


.action-header {
  display: inline-block;
  width: 95%;
  display: flex;
  align-items: center;
}

/* TABLES */
.table-screen {
  width: 100%;
}

.nav-option{
  height: 56px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 15px;
}

.nav-action{
  display: flex;
  height: 56px;
  align-items: center;
}


/* Material colors --> Usar los colores de esta paleta */
/* ROJO */
.red_primary_background {background-color: #F44336 !important;}
.red_primary_font {color: #F44336 !important;}
.red_light_background {background-color: #FF7961 !important;}
.red_light_font {color: #FF7961 !important;}
.red_dark_background {background-color: #BA000D !important;}
.red_dark_font {color: #BA000D !important;}
/* ROSA */
.pink_primary_background {background-color: #E91E63 !important;}
.pink_primary_font {color: #E91E63 !important;}
.pink_light_background {background-color: #FF6090 !important;}
.pink_light_font {color: #FF6090 !important;}
.pink_dark_background {background-color: #B0003A !important;}
.pink_dark_font {color: #B0003A !important;}
/* MORADO */
.purple_primary_background {background-color: #9C27B0 !important;}
.purple_primary_font {color: #9C27B0 !important;}
.purple_light_background {background-color: #D05CE3 !important;}
.purple_light_font {color: #D05CE3 !important;}
.purple_dark_background {background-color: #6A0080 !important;}
.purple_dark_font {color: #6A0080 !important;}
/* MORADO INTENSO */
.deep_purple_primary_background {background-color: #673AB7 !important;}
.deep_purple_primary_font {color: #673AB7 !important;}
.deep_purple_light_background {background-color: #9A67EA !important;}
.deep_purple_light_font {color: #9A67EA !important;}
.deep_purple_dark_background {background-color: #320B86 !important;}
.deep_purple_dark_font {color: #320B86 !important;}
/* INDIGO */
.indigo_primary_background {background-color: #3F51B5 !important;}
.indigo_primary_font {color: #3F51B5 !important;}
.indigo_light_background {background-color: #757DE8 !important;}
.indigo_light_font {color: #757DE8 !important;}
.indigo_dark_background {background-color: #002984 !important;}
.indigo_dark_font {color: #002984 !important;}
/* AZUL */
.blue_primary_background {background-color: #2196F3 !important;}
.blue_primary_font {color: #2196F3 !important;}
.blue_light_background {background-color: #6EC6FF !important;}
.blue_light_font {color: #6EC6FF !important;}
.blue_dark_background {background-color: #0069C0 !important;}
.blue_dark_font {color: #0069C0 !important;}
/* AZUL CLARO */
.light_blue_primary_background {background-color: #03A9F4 !important;}
.light_blue_primary_font {color: #03A9F4 !important;}
.light_blue_light_background {background-color: #67DAFF !important;}
.light_blue_light_font {color: #67DAFF !important;}
.light_blue_dark_background {background-color: #007AC1 !important;}
.light_blue_dark_font {color: #007AC1 !important;}
/* CYAN */
.cyan_primary_background {background-color: #00BCD4 !important;}
.cyan_primary_font {color: #00BCD4 !important;}
.cyan_light_background {background-color: #62EFFF !important;}
.cyan_light_font {color: #62EFFF !important;}
.cyan_dark_background {background-color: #008BA3 !important;}
.cyan_dark_font {color: #008BA3 !important;}
/* TEAL */
.teal_primary_background {background-color: #009688 !important;}
.teal_primary_font {color: #009688 !important;}
.teal_light_background {background-color: #52C7B8 !important;}
.teal_light_font {color: #52C7B8 !important;}
.teal_dark_background {background-color: #00675B !important;}
.teal_dark_font {color: #00675B !important;}
/* VERDE */
.green_primary_background {background-color: #4CAF50 !important;}
.green_primary_font {color: #4CAF50 !important;}
.green_light_background {background-color: #80E27E !important;}
.green_light_font {color: #80E27E !important;}
.green_dark_background {background-color: #087F23 !important;}
.green_dark_font {color: #087F23 !important;}
/* VERDE CLARO */
.light_green_primary_background {background-color: #8BC34A !important;}
.light_green_primary_font {color: #8BC34A !important;}
.light_green_light_background {background-color: #BEF67A !important;}
.light_green_light_font {color: #BEF67A !important;}
.light_green_dark_background {background-color: #5A9216 !important;}
.light_green_dark_font {color: #5A9216 !important;}
/* LIMA */
.lime_primary_background {background-color: #CDDC39 !important;}
.lime_primary_font {color: #CDDC39 !important;}
.lime_light_background {background-color: #FFFF6E !important;}
.lime_light_font {color: #FFFF6E !important;}
.lime_dark_background {background-color: #99AA00 !important;}
.lime_dark_font {color: #99AA00 !important;}
/* AMARILLO */
.yellow_primary_background {background-color: #FFEB3B !important;}
.yellow_primary_font {color: #FFEB3B !important;}
.yellow_light_background {background-color: #FFFF72 !important;}
.yellow_light_font {color: #FFFF72 !important;}
.yellow_dark_background {background-color: #C8B900 !important;}
.yellow_dark_font {color: #C8B900 !important;}
/* AMBAR */
.amber_primary_background {background-color: #FFC107 !important;}
.amber_primary_font {color: #FFC107 !important;}
.amber_light_background {background-color: #FFF350 !important;}
.amber_light_font {color: #FFF350 !important;}
.amber_dark_background {background-color: #C79100 !important;}
.amber_dark_font {color: #C79100 !important;}
/* NARANJA */
.orange_primary_background {background-color: #FF9800 !important;}
.orange_primary_font {color: #FF9800 !important;}
.orange_light_background {background-color: #FFC947 !important;}
.orange_light_font {color: #FFC947 !important;}
.orange_dark_background {background-color: #C66900 !important;}
.orange_dark_font {color: #C66900 !important;}
/* NARANJA INTENSO */
.deep_orange_primary_background {background-color: #FF5722 !important;}
.deep_orange_primary_font {color: #FF5722 !important;}
.deep_orange_light_background {background-color: #FF8A50 !important;}
.deep_orange_light_font {color: #FF8A50 !important;}
.deep_orange_dark_background {background-color: #C41C00 !important;}
.deep_orange_dark_font {color: #C41C00 !important;}
/* CAFE */
.brown_primary_background {background-color: #795548 !important;}
.brown_primary_font {color: #795548 !important;}
.brown_light_background {background-color: #A98274 !important;}
.brown_light_font {color: #A98274 !important;}
.brown_dark_background {background-color: #4B2C20 !important;}
.brown_dark_font {color: #4B2C20 !important;}
/* GRIS */
.gray_primary_background {background-color: #9E9E9E !important;}
.gray_primary_font {color: #9E9E9E !important;}
.gray_light_background {background-color: #CFCFCF !important;}
.gray_light_font {color: #CFCFCF !important;}
.gray_dark_background {background-color: #707070 !important;}
.gray_dark_font {color: #707070 !important;}
/* GRIS AZUL */
.blue_gray_primary_background {background-color: #607D8B !important;}
.blue_gray_primary_font {color: #607D8B !important;}
.blue_gray_light_background {background-color: #8EACBB !important;}
.blue_gray_light_font {color: #8EACBB !important;}
.blue_gray_dark_background {background-color: #34515E !important;}
.blue_gray_dark_font {color: #34515E !important;}
/* BLANCO */
.white_background {background-color: white !important;}
.white_font {color: white !important;}


.mat-success { color: #FFFFFF !important; background-color: #00897b !important; }
.mat-info { color: #FFFFFF !important; background-color: #00acc1 !important; }
.mat-danger { color: #FFFFFF !important; background-color: #ffca2c !important; }
.mat-warm { color: #FFFFFF !important; background-color: #f44336 !important; }
.mat-rose { color: #FFFFFF !important; background-color: #E95EA2 !important; }
/* .info { background-color: #0288d1 !important; color: white; } */
/* .info:disabled { background-color: #dfdfdf !important; color: rgba(0, 0, 0, 0.26); } */
/* .secondary { background-color: #071d49 !important; color: white; } */
/* .secondary:disabled { background-color: #dfdfdf !important; color: rgba(0, 0, 0, 0.26); } */
/* .success { background-color: #1faf71 !important; color: white !important; } */
/* .success:disabled { background-color: #dfdfdf !important; color: rgba(0, 0, 0, 0.26); } */

.mat-success[disabled],
.success[disabled],
.mat-info[disabled],
.info[disabled],
.mat-danger[disabled],
.pink_primary_background[disabled],
.deep_purple_primary_background[disabled],
.amber_dark_background[disabled],
.blue_dark_background[disabled],
.deep_purple_primary_background[disabled],
.mat-rose[disabled],
.cyan_dark_background[disabled]
{
  background-color: #0000001f !important;
  color: rgba(0, 0, 0, 0.38) !important;
  box-shadow: 0 0 #0003, 0 0 #00000024, 0 0 #0000001f !important;
}

/* MÁRGENES */
/* IZQUIERDA */
.ml-a {margin-left: auto !important;}
.ml-2 {margin-left: 2px !important;}
.ml-4 {margin-left: 4px !important;}
.ml-5 {margin-left: 5px !important;}
.ml-8 {margin-left: 8px !important;}
.ml-10 {margin-left: 10px !important;}
.ml-16 {margin-left: 16px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-30 {margin-left: 30px !important;}
.ml-32 {margin-left: 32px !important;}
.ml-40 {margin-left: 40px !important;}
.ml-50 {margin-left: 50px !important;}
.ml-60 {margin-left: 60px !important;}
.ml-64 {margin-left: 64px !important;}
.ml-70 {margin-left: 70px !important;}

/* DERECHA */
.mr-a {margin-right: auto !important;}
.mr-2 {margin-right: 2px !important;}
.mr-4 {margin-right: 4px !important;}
.mr-8 {margin-right: 8px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-16 {margin-right: 16px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-30 {margin-right: 30px !important;}
.mr-32 {margin-right: 32px !important;}
.mr-40 {margin-right: 40px !important;}
.mr-50 {margin-right: 50px !important;}
.mr-60 {margin-right: 60px !important;}
.mr-64 {margin-right: 64px !important;}
.mr-70 {margin-right: 70px !important;}

/* ARRIBA */
.mt-a {margin-top: auto !important;}
.mt-2 {margin-top: 2px !important;}
.mt-4 {margin-top: 4px !important;}
.mt-5 {margin-top: 5px !important;}
.mt-8 {margin-top: 8px !important;}
.mt-15 {margin-top: 15px !important;}
.mt-16 {margin-top: 16px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-32 {margin-top: 32px !important;}
.mt-50 {margin-top: 50px !important;}
.mt-64 {margin-top: 64px !important;}

/* ABAJO */
.mb-2 {margin-bottom: 2px !important;}
.mb-4 {margin-bottom: 4px !important;}
.mb-8 {margin-bottom: 8px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-16 {margin-bottom: 16px !important;}
.mb-17 {margin-bottom: 17px !important;}
.mb-18 {margin-bottom: 18px !important;}
.mb-19 {margin-bottom: 19px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-32 {margin-bottom: 32px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-60 {margin-bottom: 60px !important;}
.mb-64 {margin-bottom: 64px !important;}
.mb-70 {margin-bottom: 70px !important;}
.mb-80 {margin-bottom: 80px !important;}
.mb-90 {margin-bottom: 90px !important;}

/* VERTICAL */
.mv-2 {margin: 0 2px !important;}
.mv-4 {margin: 0 4px !important;}
.mv-8 {margin: 0 8px !important;}
.mv-16 {margin: 0 16px !important;}
.mv-32 {margin: 0 32px !important;}
.mv-64 { margin: 0 64px !important;}

/* HORIZONTAL */
.mh-2 {margin: 2px 0 !important;}
.mh-4 {margin: 4px 0 !important;}
.mh-8 {margin: 8px 0 !important;}
.mh-16 {margin: 16px 0 !important;}
.mh-32 {margin: 32px 0 !important;}
.mh-64 {margin: 64px 0 !important;}

/* TODO */
.m-2 {margin: 2px !important;}
.m-4 {margin: 4px !important;}
.m-8 {margin: 8px !important;}
.m-16 {margin: 16px !important;}
.m-32 {margin: 32px !important;}
.m-64 {margin: 64px !important;}

/* PADDINGS */
/* IZQUIERDA */
.pl-2 {padding-left: 2px !important;}
.pl-4 {padding-left: 4px !important;}
.pl-8 {padding-left: 8px !important;}
.pl-16 {padding-left: 16px !important;}
.pl-32 {padding-left: 32px !important;}
.pl-64 {padding-left: 64px !important;}

/* DERECHA */
.pr-2 {padding-right: 2px !important;}
.pr-4 {padding-right: 4px !important;}
.pr-8 {padding-right: 8px !important;}
.pr-16 {padding-right: 16px !important;}
.pr-32 {padding-right: 32px !important;}
.pr-64 {padding-right: 64px !important;}

/* ARRIBA */
.pt-2 {padding-top: 2px !important;}
.pt-4 {padding-top: 4px !important;}
.pt-8 {padding-top: 8px !important;}
.pt-16 {padding-top: 16px !important;}
.pt-32 {padding-top: 32px !important;}
.pt-64 {padding-top: 64px !important;}

/* ABAJO */
.pb-2 {padding-bottom: 2px !important;}
.pb-4 {padding-bottom: 4px !important;}
.pb-8 {padding-bottom: 8px !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-16 {padding-bottom: 16px !important;}
.pb-17 {padding-bottom: 17px !important;}
.pb-18 {padding-bottom: 18px !important;}
.pb-32 {padding-bottom: 32px !important;}
.pb-64 {padding-bottom: 64px !important;}

/* VERTICAL */
.pv-2 {padding: 2px 0 !important;}
.pv-4 {padding: 4px 0 !important;}
.pv-8 {padding: 8px 0 !important;}
.pv-16 {padding: 16px 0 !important;}
.pv-32 {padding: 32px 0 !important;}
.pv-64 {padding: 64px 0 !important;}

/* HORIZONTAL */
.ph-2 {padding: 0 2px !important;}
.ph-4 {padding: 0 4px !important;}
.ph-8 {padding: 0 8px !important;}
.ph-16 {padding: 0 16px !important;}
.ph-32 {padding: 0 32px !important;}
.ph-64 {padding: 0 64px !important;}

/* TODO */
.p-0 {padding: 0 !important;}
.p-2 {padding: 2px !important;}
.p-4 {padding: 4px !important;}
.p-8 {padding: 8px !important;}
.p-16 {padding: 16px !important;}
.p-20 {padding: 20px !important;}
.p-32 {padding: 32px !important;}
.p-40 {padding: 40px !important;}
.p-64 {padding: 64px !important;}
.p-80 {padding: 80px !important;}
.p-90 {padding: 90px !important;}

/* FONT SIZE*/
.fz-12 {font-size: 12pt;}
.fz-24 {font-size: 24pt;}

.just-txt{text-align: justify; text-justify: inter-word;}

/* Navigation-element */
#navigation {
  display: flex;
  flex-direction: row;
}

#navigation .prev-page {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  align-items: center;
  transition: all 0.25s ease;
  height: 40px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 32px;
}

#navigation .prev-page .page-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
  color: white;
}

/* Alertas */
.alerts {
  text-align: center;
  padding: 80px;
}

.is-loading {
  text-align: center;
  padding: 100px;
}

.is-loading mat-spinner {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

.green_primary_font[disabled] {
  /* color: #00000042 !important; */
  color: #36363680 !important;
}

/* Estilo de tablas Dinámicas*/
table { width: 100%; }

tr.mat-header-row { height: 56px; }
tr.mat-row, tr.mat-footer-row { height: 48px; }
/* mat-row, mat-header-row, mat-footer-row, th.mat-header-cell, td.mat-cell, td.mat-footer-cell { border-bottom-color: #0000001f; } */
/* th.mat-header-cell, td.mat-cell, td.mat-footer-cell { padding: 0; border-bottom-width: 1px; border-bottom-style: solid; } */

.btn-reload {
  margin-bottom: 22px;
  box-shadow: none !important;
}

.mat-card-title {
  padding: 15px 0;
  display: block !important;
}
all {
  background-color: #002984;
}
/* Cards */
.card-size-normal {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFFFF !important;
  height: calc(100% - 77px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
}



.btn-navigate {
  width: 75%;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  margin-left: auto;
  margin-right: auto;
}

.btn-navigate-90 {
  width: 90%;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  margin-left: auto;
  margin-right: auto;
}

.btnRegresar {
  float: left !important;
  margin: 9px !important;
  box-shadow: none !important;
}

.actions-container {
  display: flex;
  align-items: center;
  text-align: center;
}

/* RECARGAR */
.action-reload {
  display: inline-block;
  width: 90px;
}

.action-filter {
  display: inline-block;
  width: calc(80% - 90px);
}

.action-register {
  display: inline-block;
  width: 20%
}

.btn-new-register {
  height: 56px !important;
  margin-bottom: 22px;
  font-size: 12pt;
  box-shadow: none !important;
}

.action-register .btn-new-register {
  width: 90%;
}

.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label {
  color: #FFFFFF !important;
}


.action-filter mat-form-field {
  width: 100%;
}

.action-filter-all {
  display: inline-block;
  width: 80%;
}

.action-filter-all mat-form-field {
  width: 98%;
}

.itemInput {
  width: 100% !important;
}

.inputFile {
  width: 100% !important;
  padding-bottom: 1.34375em;
  padding: 10px;
  border-radius: 4px;
  border: 1px dashed #fdfdfd;
  text-align: center;
  background-color: #3f51b5;
  cursor: pointer;
  flex-direction: row;
  display: inline-flex;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;
}

.mat-mdc-checkbox-disabled label {
  color: #000000 !important;
}

.mdc-text-field--disabled .mdc-floating-label{
  color: rgba(0, 0, 0, 0.6);
}

.mdc-text-field--disabled .mdc-text-field__input{
  color: rgba(0, 0, 0, 0.87);
}

.title-card {
  text-align: center;
  font-weight: 500;
}

/* Formularios */
.mat-grid-tile-content {
  padding: 3px !important;
}

/* Animaciones */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fast {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.icon-error {
  color: #e53935;
  transform: scale(5);
  margin-bottom: 48px;
  margin-top: 64px;
}

.table-header {
  background-color: #eee;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  border-color: #ccc;
  border-width: 1px;
  border-style: solid;
  display: flex;
  flex-direction: row;
}

.table-row-white {
  padding: 8px 16px;
  border-color: #ccc;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  display: flex;
  flex-direction: row;
}

.table-row-gray {
  padding: 8px 16px;
  border-color: #ccc;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  display: flex;
  flex-direction: row;
  background-color: #eee;
}

.table-cell-header {
  width: 100%;
  font-weight: bold;
}

.table-cell {
  width: 100%;
  display: flex;
  align-items: center;
}

.table-container {
  width: 100%;
  overflow-y: auto;
  height: 100%;
}

.loader-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader-label {
  margin-top: 16px;
  animation-name: label-fade;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.prevent-select {
  user-select: none;
}

@keyframes label-fade {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.error-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mat-chip-list-wrapper {
  display: inline !important;
}

.mat-drawer-content {
  position: static !important;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: auto;
}

.full-width {
  width: 100%;
}

.centre {
  text-align: center !important;
}

.mat-tool-bar {
  background-color: #7c8cf4;
  position: fixed;
  z-index: 10000;
  top: 0;
}

.menu-align {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 10px 10px 30px 10px;
}

.headers-align .mat-expansion-panel-header-title,
.headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.headers-align .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

.headers-align .mat-form-field+.mat-form-field {
  margin-left: 8px;
}

.module-options-container {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.module-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-input-element:disabled,
.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
  color: rgb(71, 71, 71) !important;
}

/*Scrollbar firefox*/
* {
  scrollbar-width: thin;
}

/*Scrollbar webwit*/
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #CCC;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #AAA;
}

.mat-horizontal-content-container {
  padding: 0 24px 8px 24px !important;

}


/* Estilos del contenedor de submódulos */
.menu-container {
  width: calc(100% - 64px);
  height: 100%;
  margin: 0 auto;
}

.menu-card {
  display: flex;
  width: 100%;
  height: calc(100% - 68px - 35px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* position: absolute; */
  overflow: auto;
  /* margin-bottom: 80px; */
}

.menu-card-item {
  margin: 5px 30px;
  width: 300px;
  height: 213px;
  border: 1px solid #CCC !important;
  border-radius: 15px !important;
  margin-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow .3s;
  box-shadow: none !important;
}

.menu-card-item:hover {
  cursor: pointer;
  border: 0px solid #FFF !important;
  box-shadow: 0px 2px 20px rgb(33 33 33 / 20%) !important;
}


.menu-card-item img{
  height: 145px;
  width: auto;
  max-width: 150px;
  padding-bottom: 15px;
}

.menu-card-item mat-icon{
  transform: scale(2.5);
  color: #888;
}

.menu-title {
  width: 100%;
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  /* position: absolute; */
}

.menu-title span {
  font-weight: 500;
  font-size: 25pt;
}

.menu-items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  padding: 12px 0;
  box-sizing: border-box;
  justify-content: space-evenly;
}

.menu-item-border {
  width: 212px;
  height: 212px;
  background: rgb(255, 193, 227);
  background: linear-gradient(90deg, rgba(255, 193, 227, 1) 0%, rgba(255, 119, 169, 1) 100%);
  border-radius: 106px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255, 119, 169, 0.5);
  box-sizing: border-box;
  position: relative;
  margin: 8px;
  box-shadow: 1.2px 2.4px 2.4px hsl(0deg 0% 0% / 0.46);
  transition: all 0.4s;
}

.menu-item-border:hover {
  box-shadow: 5.3px 10.6px 10.6px hsl(0deg 0% 0% / 0.34);
  cursor: pointer;
}

.menu-item {
  width: 188px;
  height: 188px;
  background-color: #ec407a;
  border-radius: 100px;
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
  padding: 32px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255, 119, 169, 0.5);
}

.menu-item mat-icon {
  transform: scale(4);
  margin-bottom: 36px;
  margin-top: 16px;
}

.menu-item p {
  font-size: 18px;
  text-align: center;
}

/* Estilos para la etiqueta card*/
.card-normal {
  width: 1300px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

.card-small {
  width: 1000px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fast {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Estilos para alinear*/

.menu-align {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 10px 10px 30px 10px;
}

/* Estilo para los botones de "Registrar y Cancelar"*/
.divBotones {
  margin: 5px;
}

.clickable {
  cursor: pointer !important;
}
.botonRC {
  margin: 25px !important;
}

/* Disabled */
.mat-input-element:disabled,
.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
  color: rgb(71, 71, 71) !important;
}

footer {
  width: 100%;
  z-index: 10;
  text-align: center;
  color: black;
  position: fixed;
  bottom: 0;
  box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2);
}

/*.mat-tool-bar {
  position: fixed;
  z-index: 10000;
  top: 0;
}*/

/* Toolbar */
mat-toolbar-row,
.mat-toolbar-single-row {
  height: 100% !important;
}

.mat-toolbar-multiple-rows {
  min-height: 64px;
}

/* Dialogos en general */
.dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-icon mat-icon {
  transform: scale(4);
  margin-top: 28px;
  margin-bottom: 32px;
  color: #ffc107;
}

.dialog-desc {
  text-align: center;
  font-size: 16px;
}

.dialog-desc-2 {
  text-align: center;
  margin-top: 4px;
  font-size: 14px;
}

/* Workflow */

.searcher {
  width: 90% !important;
  font-size: 16px !important;
}

.data-empty {
  position: relative;
  background-color: #ddc8a2;
  color: white;
  font-size: 16pt;
  text-align: center;
  padding: 20px;
  margin: 5px;
}



.btnMarginRight {
  margin-right: 10px !important;
}

.vertical-flex-container {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: row;
  justify-content: space-between;
}

.vertical-flex-container-item {
  width: calc(50% - 16px);
  background-color: white;
  border-radius: 6px;
  /*box-shadow: 1px 1px 16px -4px rgba(0, 0, 0, 0.75);*/
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.vertical-flex-container-item h2 {
  margin: 0;
  padding: 0;
  margin-bottom: 8px;
}

.users-container {
  flex-grow: 1;
}

.user-info {
  padding: 8px 8px 0 8px;
  transition: all 0.25s ease;
}

.user-info h3 {
  margin: 0;
}

.user-info p {
  margin: 0;
  margin-left: 18px;
  margin-bottom: 8px;
}

.user-info:hover {
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border-radius: 4px;
}

.route-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.back-element {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

.back-element p,
.actual-element p {
  margin: 0;
  font-size: 18px;
}

.back-element .icon,
.actual-element .icon {
  transform: scale(0.8);
}

.back-element .arrow {
  margin: 0 4px;
}

.back-element:hover {
  opacity: 0.85;
}

.actual-element {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: default;
  box-sizing: border-box;
}

.table-content-container {
  height: calc(100vh - 376px);
  overflow-y: auto;
}

.table-content-container-with-actions {
  height: calc(100vh - 372px - 56px);
  overflow-y: auto;
}

.toolbar {
  height: 64px;
  background-color: #424242;
  z-index: 1000;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
  position: relative;
  /*padding: 8px;*/
  /*overflow: hidden;*/
}

.mat-toolbar-row, .mat-toolbar-single-row{
  align-items: flex-start !important;
}

/*Estilos para la ruta de navegación*/
.items-container {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  box-sizing: border-box;
}

.items-container-full-width{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.route {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
}

.back {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s;
}

.back:hover {
  color: #555;
}

.actual {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #333;
}

/* .mat-card-content-fill { */
/* height: calc(100% - 76px); */

.mat-card-content-fill {
  height: calc(100% - 76px) !important;
  overflow-y: auto;
}

.hidden {
  display: none;
  visibility: hidden;
}

.override-elevation-z8{
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
}

.mat-card-content-form{
  height: calc(100vh - 280px) !important;
}
.main-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  position:relative;
}

.override-card {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFFFFF !important;
  height: calc(100% - 77px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.override-card-form{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15px;
  background-color: #FFFFFF !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* transition: width 2s; */
  margin-bottom: 20px;
  padding: 0 !important;
}

.no-shadow { box-shadow: none !important; }
.override-no-shadow{ box-shadow: none !important; }

@media all and (max-width: 720px) {
  .override-card {
    width: 100%;
    height: calc(100% - 62px);
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .override-card-form{
    width: 100%;
    height: calc(100% - 62px);
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .main-container{
    background-color: #FFFFFF !important;
  }
  .btn-navigate{
    margin-left: 10px;
    /* position: absolute; */
  }
  .override-no-shadow{
    box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%) !important;
  }
  @media all and (max-width: 442px) {
    .override-card { height: calc(100% - 80px); }
  }


}

.override-section{
  width: 100%;
  height: calc(100% - 75px);
}
.override-table{
  width: 100%;
  height: calc(100% - 77px - 44px);
  overflow: auto;
}

.override-actions{
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.override-actions-right{
  display: flex;
  flex-direction: row-reverse;
  padding: 0 1.5%;
}

.override-buttons{
  height: 56px;
  display: flex;
  align-items: center;
}

.override-form{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.override-stepper-form{
  width: 100%;
}

.override-content-dynamic{
  padding: 0 24px 10px 24px !important;
}

.ql-container.ql-snow{
  border: none !important;
}

.ql-toolbar.ql-snow{
  border: none !important;
  border-bottom: 1px solid #ccc !important;
}
.override-paginator{
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.shine{
  width: 100%;
  height: 100%;
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;

  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -720px 0;
  }

  100% {
    background-position: 720px 0;
  }
}
.input-file{
  width: 100% !important;
  padding-bottom: 1.34375em;
  padding: 15px;
  border-radius: 4px;
  border: 1px dashed #fdfdfd;
  text-align: center;
  background-color: #3f51b5;
  cursor: pointer;
  flex-direction: row;
  display: inline-flex;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}

.mat-sort-header-content{
  text-align: left !important;
}