SistemaMantenimiento/sistema-mantenimiento-front/src/styles.css

/* 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-49 { width: 49% !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-300p { width: 300px !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_border {border-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_border {border-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;}
/* GREEN */
.green_primary_background {background-color: #4CAF50 !important;}
.green_primary_border {border-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_border {border-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;}
/* NEGRO */
.black_background {background-color: black !important;}
.black_font {color: black !important;}


.mat-success { color: #FFFFFF !important; background-color: #00897b !important; }
.mat-success2 { 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-success2:hover { background-color: rgba(0, 137, 123, 0.05) !important; }

.mat-success2[disabled],
.mat-success[disabled],
.success[disabled],
.mat-info[disabled],
.mat-warm[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],
.teal_primary_background[disabled],
.indigo_primary_background[disabled],
.orange_primary_background[disabled],
.teal_dark_background[disabled],
.light_blue_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;
}

.gray_dark_font[disabled], 
.font_disabled[disabled]
{
  color: rgba(0, 0, 0, 0.38) !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-5 {margin-right: 5px !important;}
.mr-6 {margin-right: 6px !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-26 {margin-right: 26px !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-10 {margin-top: 10px !important;}
.mt-12 {margin-top: 12px !important;}
.mt-14 {margin-top: 14px !important;}
.mt-15 {margin-top: 15px !important;}
.mt-16 {margin-top: 16px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-22 {margin-top: 22px !important;}
.mt-24 {margin-top: 24px !important;}
.mt-25 {margin-top: 25px !important;}
.mt-26 {margin-top: 26px !important;}
.mt-28 {margin-top: 28px !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_2 {margin-bottom: 2px !important;}
.mb-4 {margin-bottom: 4px !important;}
.mb-8 {margin-bottom: 8px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-12 {margin-bottom: 12px !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-22 {margin-bottom: 22px !important;}
.mb-24 {margin-bottom: 24px !important;}
.mb-28 {margin-bottom: 28px !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-0 { margin: 0 !important; }
.m-2 {margin: 2px !important;}
.m-4 {margin: 4px !important;}
.m-8 {margin: 8px !important;}
.m-16 {margin: 16px !important;}
.m-20 {margin: 20px !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-14 {padding-bottom: 14px !important;}
.pb-16 {padding-bottom: 16px !important;}
.pb-17 {padding-bottom: 17px !important;}
.pb-18 {padding-bottom: 18px !important;}
.pb-24 {padding-bottom: 24px !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-10 {padding: 10px 0 !important;}
.pv-15 {padding: 16px 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-10 {padding: 0 10px !important;}
.ph-15 {padding: 0 15px !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-5 {padding: 5px !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;}


.align-right { text-align: right !important; }
.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-start { text-align: start !important; }
.align-end { text-align: end !important; }
.align-justify { text-align: justify !important; }
.flex-space-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

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

.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;
}

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

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

.is-loading {
  width: 100%;
  /* height: calc(100vh - 385px); */
  text-align: center;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.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 0 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: 0;
  margin-right: 0;
}

.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;
}

.input-file {
  width: calc(100% - 24px)  !important;
  height: 34px;
  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;
}

.input-file-disable {
  background-color: #0000001f !important;
  color: rgba(0, 0, 0, 0.38) !important;
  width: calc(100% - 24px)  !important;
  height: 34px;
  padding-bottom: 1.34375em;
  padding: 10px;
  border-radius: 4px;
  border: 1px dashed #fdfdfd;
  text-align: center;
  cursor: default;
  flex-direction: row;
  display: inline-flex;
  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);
}
.mat-mdc-select-disabled .mat-mdc-select-value {
  color: rgba(0, 0, 0, 0.87) !important;
}

/* 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;
}
.p-error {
  font-style: italic; 
  font-size: 16px; 
  overflow-wrap: anywhere; 
  text-align: center;
}
.color-error {
  color: #e53935;
}

.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 0 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;
  overflow: auto;
}

.menu-card-item {
  margin: 5px 30px;
  width: 280px;
  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: 185px;
  padding-bottom: 15px;
}

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

@media all and (max-width: 1440px) {
  .menu-card-item {
    margin-bottom: 60px !important;
  }
  .menu-title span {
    margin: 30px 0 0 0;
  }
}

@media all and (max-width: 720px) {
  .menu-card {
    align-content: normal;
    height: calc(100% - 68px - 79px);
  }
  .menu-card-item {
    margin-bottom: 30px !important;
  }
  .menu-title span {
    margin: 30px 0;
  }
}

.module-container{
  width: 100%;
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
}

.menu-title {
  width: 100%;
  padding-bottom: 15px;
  padding-top: 8px;
  box-sizing: border-box;
  text-align: center;
}

.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;
}

.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: calc(100% - 56px);
  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;
  overflow-x: hidden;
  overflow-y: auto;
}

.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 !important;
  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;
}

.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%;
  padding: 16px 4px;
  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 !important;
  visibility: hidden !important;
}

.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;
}

.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;
}

.override_elevation_z0{
  box-shadow: none !important;
  background-color: transparent !important;
}

.mat-card-content-form{
  height: calc(100vh - 280px) !important;
}
.main-container {
  width: 75%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  /* overflow: auto; */
  position:relative;
  transition: width 2s;
}

.override-card {
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;
  height: calc(100% - 77px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.override-card-normal {
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;
  height: calc(100% - 77px);
  display: flex;
}

.override-card-form{
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15px;
  background-color: #FFFFFF !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 !important;
}

.no_shadow { box-shadow: none !important; }
.override_no_shadow{ box-shadow: none !important; }


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

  .main-container{
    width: 90%;
  }
  .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: 720px) {
    .main-container {
      width: 100% !important;
    }
  }
  
  @media all and (max-width: 442px) {
    .override-card { height: calc(100% - 80px); }
  }


}

.override-section{
  width: 100%;
  height: calc(100% - 57px);
}
/* .override-table{
  width: 100%;
  height: calc(100% - 141px);
  overflow: auto;
} */

.override-table{
  width: 100%;
  height: calc(100% - 123px);
  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;
} */

.hint-button{
  font-weight: bold;
  cursor: pointer;
  color: #3F51B5;
  transition: all 0.25s ease;
}

.hint-button:hover{
  color: #757DE8;
}

.hint_button{
  font-weight: bold;
  cursor: pointer;
  color: #3F51B5;
  transition: all 0.25s ease;
}

.hint_button:hover{
  color: #757DE8;
}

.hint_button_disabled{
  font-weight: bold;
  color: #9E9E9E;
}

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

.flex-expanded-width{
  flex-grow: 100;
}

/*Estilos para vista de calendario*/
.main_calendar_view_flex{
  display: flex;
  flex-direction: row;
}

.main_calendar_view_relative{
  position: relative;
}

.main_calendar_view{
  width: 100%;
  height: calc(100vh - 64px - 48px);
}

.calendar_panel_left_floating{
  position: absolute;
  z-index: 9999;
  box-shadow: 5px 0px 5px -3px rgba(0, 0, 0, 0.2), 8px 0px 10px 1px rgba(0, 0, 0, 0.14), 3px 0px 14px 2px rgba(0, 0, 0, 0.12) !important;
}

.calendar_panel_left_flex{
  display: flex;
  flex-direction: column;
}

.calendar_panel_left{
  height: 100%;
  width: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.calendar_panel_left::-webkit-scrollbar{
  display: none;
}

.date-picker-calendar{
  width: 100%;
  margin-bottom: 16px;
}

.registered-jobs{
  padding: 0 16px;
}

.main_calendar_container{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main_calendar_container_flex{
  width: calc(100% - 320px);
}

.main_calendar_container_relative{
  width: 100%;
}

.calendar_header{
  background-color: white;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
  align-items: center;
}

.expanded-row{
  flex-grow: 100;
}

.calendar_title{
  margin: 0 !important;
  font-size: 24px;
}

.calendar_days{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.calendar_days:hover{
  background-color: rgba(0, 0, 0, 0.015);
}

.calendar_day{
  width: calc(100% / 7);
  text-align: center;
  padding: 16px;
  font-size: 18px;
  font-weight: 500;
}

.calendar_day:hover{
  background-color: rgba(0, 0, 0, 0.05);
}

.calendar_cell_border_right{
  border-right-color: rgba(0, 0, 0, 0.12);
  border-right-style: solid;
  border-right-width: 1px;
}

.calendar_cell_border_bottom{
  border-bottom-color: rgba(0, 0, 0, 0.12);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.month_days_table{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.month_days_table::-webkit-scrollbar{
  display: none;
}

.month_days_row{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.month_days_row:hover{
  background-color: rgba(0, 0, 0, 0.015);
}

.month_days_cell{
  padding: 16px;
  width: calc(100% / 7);
  height: 128px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.month_days_cell:hover{
  background-color: rgba(0, 0, 0, 0.05);
}

.load_cell{
  width: 100%;
}

.month_day_label{
  height: 25%;
  overflow: hidden;
}

.month_day{
  font-weight: 500;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.month_day_events{
  height: 75%;
  display: flex;
  flex-direction: column;
}

.bull{
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 4px;
}

.underline{
  text-decoration: underline;
  font-weight: 500;
}

.underline:hover{
  opacity: 0.8;
}

.event{
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 4px;
}

.event p{
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  height: 16px; /* Fallback for non-webkit, line-height * 2 */
  line-height: 1.3em;
  -webkit-line-clamp: 1; /* if you change this, make sure to change the fallback line-height and height */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actual_day{
  color: white;
  font-weight: bold;
  background-color: #3F51B5;
  border-radius: 16px;
}

.animate_close{
  animation: close-animation 0.5s forwards;
}

@keyframes close-animation{
  from { transform: translate(0); }
  to { transform: translate(-320px); }
}

.animate_open{
  animation: open-animation 0.5s forwards;
}

@keyframes open-animation{
  from { transform: translate(-320px); }
  to { transform: translate(0); }
}

.has-error{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.has-error mat-icon{
  transform: scale(5);
  margin-top: 16px;
  margin-bottom: 48px;
}

.has-error h2{
  font-style: italic;
}

.override-main-title {
  font-family: Roboto, sans-serif;
  line-height: 32px;
  font-size: 20px;
  letter-spacing: 0.0125em;
  font-weight: 500;
}

.override-main-subtitle {
  font-family: Roboto, sans-serif;
  line-height: 32px;
  font-size: 17px;
  letter-spacing: 0.0125em;
  font-weight: 500;
}

.remove-button-padding-dialog-content {
  padding: 0 24px 0 24px !important;
}

/* .mdc-text-field--disabled .mdc-floating-label {
  color: rgb(0 0 0) !important;
}
.mat-mdc-select-disabled .mat-mdc-select-value {
  color: rgba(0,0,0) !important;
} */


.override_content_flex{
  width: 100%;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 2px !important;
}

.col-flex-1 {
  width: calc(8.3% - 6px); 
  padding: 3px;
}
.col-flex-2 {
  width: calc(16.66666667% - 6px); 
  padding: 3px;
}
.col-flex-3 {
  width: calc(25% - 6px); 
  padding: 3px;
}
.col-flex-4 {
  width: calc(33.33333333% - 6px); 
  padding: 3px;
}
.col-flex-5 {
  width: calc(41.66666667% - 6px); 
  padding: 3px;
}
.col-flex-6 {
  width: calc(50% - 6px); 
  padding: 3px;
}
.col-flex-7 {
  width: calc(58.33333333% - 6px); 
  padding: 3px;
}
.col-flex-8 {
  width: calc(66.66666667% - 6px); 
  padding: 3px;
}
.col-flex-9 {
  width: calc(75% - 6px); 
  padding: 3px;
}
.col-flex-10 {
  width: calc(83.33333333% - 6px); 
  padding: 3px;
}
.col-flex-11 {
  width: calc(91.66666667% - 6px); 
  padding: 3px;
}
.col-flex-12 {
  width: calc(100% - 6px); 
  padding: 3px;
}


@media all and (max-width: 1200px) {
  .col-flex-1 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-2 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-3 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-4 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-5 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-6 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-7 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-8 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-9 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-10 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-11 {
    width: calc(100% - 6px);
    padding: 3px;
  }
  .col-flex-12 {
    width: calc(100% - 6px);
    padding: 3px;
  }
}

.dialog_details_column{
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
}

.table_dialog_details_column{
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Estilos para los formularios de mantenimiento preventivo y correctivo */
.form-order-container{
  width: 100%;
  height: calc(100vh - 306px);
  overflow-x: hidden;
  overflow-y: auto;
}

.form-column{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.section-divider{
  width: 100%;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.54);
  padding: 0 3px;
  margin-bottom: 4px;
}

.form-row{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.form-cell{
  padding: 3px;
  box-sizing: border-box;
}

.form-cell.attached_horizontal{
  height: 184px;
}

.form-cell.attached_vertical{
  height: 270px;
}

.form-cell.center_horizontal{
  display: flex;
  justify-content: center;
}

.form-cell.center_vertical{
  display: flex;
  align-items: center;
}

.attached-container{
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px;
}

.attached-container.ac_horizontal{
  flex-direction: row;
}

.attached-container.ac_vertical{
  flex-direction: column;
}

.attach-button{
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.ab_horizontal{
  width: 100%;
  height: 50%;
}

.ab_vertical{
  width: 50%;
  height: 100%;
}

.attach-button:hover{
  opacity: 0.85;
}

.attached-files{
  border-radius: 4px;
  border-color: #3F51B5;
  border-right-style: dashed;
  border-bottom-style: dashed;
}

.af_horizontal{
  width: calc(100% - 256px);
  height: calc(100% - 6px);
  border-top-style: dashed;
}

.af_vertical{
  width: calc(100% - 6px);
  height: calc(100% - 92px);
  border-left-style: dashed;
}

.buttons-container{
  display: flex;
}

.buttons-container.bc_horizontal{
  width: 256px;
  height: 100%;
  flex-direction: column;
}

.buttons-container.bc_vertical{
  width: 100%;
  height: 86px;
  flex-direction: row;
}

.no-files-attached{
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.files-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.file{
  width: 100%;
  padding: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.file-name{
  width: 35%;
  font-weight: 500;
  padding: 8px 0;
}

.file-size{
  width: 20%;
  padding: 8px 0;
}

.file-type{
  width: 20%;
  padding: 8px 0;
}

.file-type span{
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 16px;
}

.file-actions{
  width: 25%;
  padding: 8px 0;
}

.file_actions_enabled a{
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

.file_actions_enabled a:hover{
  opacity: 0.75;
}

.file_actions_disabled a{
  text-decoration: underline;
  font-weight: bold;
}

.C12 { width: 100% }             /* 12 celdas */
.C11 { width: calc(1100% / 12) } /* 11 celdas */
.C10 { width: calc(1000% / 12) } /* 10 celdas */
.C09 { width: 75% }              /*  9 celdas */
.C08 { width: calc(800% / 12) }  /*  8 celdas */
.C07 { width: calc(700% / 12) }  /*  7 celdas */
.C06 { width: 50% }              /*  6 celdas */
.C05 { width: calc(500% / 12) }  /*  5 celdas */
.C04 { width: calc(400% / 12) }  /*  4 celdas */
.C03 { width: 25% }              /*  3 celdas */
.C02 { width: calc(200% / 12) }  /*  2 celdas */
.C01 { width: calc(100% / 12) }  /*  1 celda  */

.center_text{
  text-align: center;
}

.form-cell-text{
  font-size: 18px;
  color: rgba(0, 0, 0, 0.56);
}

.form-cell-text .bold{
  font-weight: 500;
}

.container-load-form {
  width: 100%; 
  height: 56px; 
  display: flex; 
  align-items: center; 
  padding-bottom: 22px;
}

.color-circle{
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-left: 4px;
  margin-bottom: -2px;
  border-radius: 8px;
}

/*Estilos mantenimiento*/
.active-orders-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 850px;
  overflow-y: hidden;
  overflow-x: auto;
}

.active-orders-toolbar{
  display: flex;
  flex-direction: row;
  padding: 16px;
  flex-wrap: nowrap;
  background-color: white;
  align-items: center;
}

.separator{
  flex-grow: 100;
}

.active-orders-table-container{
  flex-grow: 100;
  width: 100%;
  background-color: white;
}

.active-orders-table-container mat-card{
  width: 75%;
  margin: 0 auto;
}

.active-orders-table-content-container{
  width: 100%;
  height: calc(100vh - 280px);
  display: flex;
  flex-direction: column;
}

.active-orders-table-actions-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.active-orders-table{
  width: 100%;
  flex-grow: 100;
  overflow-x: hidden;
  overflow-y: auto;
}

.title-card {
  font-family:Roboto, sans-serif;
  line-height: 32px;
  font-size: 20px;
  letter-spacing: 0.0125em;
  font-weight: 500
}

.icon_msj_error {
  transform: scale(4.5);
  margin: 45px 0;
}


.panel-preview-size{
  width: 100vw;
  height: calc(100vh - 180px);
}

.connected_users_indicator{
  width: 128px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.02);
  display: flex;
  padding: 8px;
  box-sizing: border-box;
  flex-direction: column;
}

.connected_users_indicator_movile{
  width: 100%;
  background-color: rgba(0, 0, 0, 0.02);
  display: flex;
  padding: 8px;
  box-sizing: border-box;
  flex-direction: column;
}

.connected_users_indicator_movile h4,
.connected_users_indicator h4{
  text-align: center;
  margin: 0;
}

.connected_users_indicator .users-list-indicator:not(.full_height){
  height: calc(100vh - 340px);
}

.connected_users_indicator .users-list-indicator:not(.partial_height){
  height: calc(100vh - 200px);
}

.connected_users_indicator .users-list-indicator{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 8px 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.connected_users_indicator_movile .users-list-indicator{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 8px 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
}

.users-list-indicator .connected-user-item{
  width: 56px;
  height: 56px;
  position: relative;
  cursor: pointer;
}

.users-list-indicator .connected-user-item:not(:last-child):not(.item_h){
  margin-bottom: 8px;
}

.users-list-indicator .connected-user-item:not(:last-child):not(.item_v){
  margin-right: 8px;
}

.connected-user-item .background{
  width: 56px;
  height: 56px;
  border-radius: 64px;
  overflow: hidden;
  box-sizing: border-box;
  transition: all 250ms ease;
}

.connected-user-item .background:hover{
  box-shadow: 0px 10px 13px -7px #000000, 0px 0px 13px 2px rgba(0,0,0,0);
}

.background p{
  color: white;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.56);
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 0;
  margin: 0;
}

.connected-user-item .status{
  width: 16px;
  height: 16px;
  background-color: #4CAF50;
  border-radius: 16px;
  position: absolute;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  border: 2px solid white;
  z-index: 9999;
}

.counter-chart{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.counter-chart .chart-title{
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
}

.counter-chart .chart-subtitle{
  margin-bottom: 4px;
  font-size: 14px;
  text-align: center;
}

.chart-actions{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 4px 0 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.chart-actions button{
  margin: 4px;
}

.no-data-image{
  height: calc(100vh - 510px);
}

.text_uppercase {
  text-transform: uppercase !important;
}