/* You can add global styles to this file, and also import other style files */
@import '../node_modules/quill/dist/quill.snow.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';

@font-face {
  font-family: 'Movilidad';
  font-style: normal;
  font-weight: normal;
  src: url('../public/assets/fonts/TipoMovinCDMX.otf') format('opentype');
}

@font-face {
  font-family: 'SourceCodePro';
  src: url('../public/assets/fonts/source_code_pro/SourceSans3-VariableFont_wght.ttf');
}

/* Implementación de fuente SourceCodePro */
.mat-mdc-button{ font-family: 'SourceCodePro' !important; }
.mat-toolbar{ font-family: 'SourceCodePro' !important; }
.mat-mdc-menu-content{ font-family: 'SourceCodePro' !important; }
.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text{ font-family: 'SourceCodePro' !important; }
.mat-mdc-raised-button{ font-family: 'SourceCodePro' !important; }
.mat-mdc-card-title{ font-family: 'SourceCodePro' !important; }
.mat-mdc-row{ font-family: 'SourceCodePro' !important; }
.mat-mdc-header-row{ font-family: 'SourceCodePro' !important; }
.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control{ font-family: 'SourceCodePro' !important; }
.mdc-text-field--outlined .mdc-floating-label{ font-family: 'SourceCodePro' !important; }
.mat-mdc-form-field{ font-family: 'SourceCodePro' !important; }
.mat-mdc-select{ font-family: 'SourceCodePro' !important; }
.mat-mdc-paginator{ font-family: 'SourceCodePro' !important; }
.mat-mdc-option{ font-family: 'SourceCodePro' !important; }
.mat-mdc-unelevated-button{ font-family: 'SourceCodePro' !important; }
.ql-container{ font-family: 'SourceCodePro' !important; }
.mat-mdc-form-field-bottom-align::before{ font-family: 'SourceCodePro' !important; }
.mat-mdc-form-field-subscript-wrapper{ font-family: 'SourceCodePro' !important; }
.mat-mdc-outlined-button{ font-family: 'SourceCodePro' !important; }
.mdc-data-table__content{ font-family: 'SourceCodePro' !important; }
.mat-mdc-dialog-container .mat-mdc-dialog-content{ font-family: 'SourceCodePro' !important; }
.mat-mdc-tab{ font-family: 'SourceCodePro' !important; }
.mat-mdc-checkbox .mat-internal-form-field{ font-family: 'SourceCodePro' !important; }
.mat-mdc-slide-toggle .mat-internal-form-field{ font-family: 'SourceCodePro' !important; }
.mat-mdc-snack-bar-container .mdc-snackbar__label{ font-family: 'SourceCodePro' !important; }
.mat-expansion-panel-header{ font-family: 'SourceCodePro' !important; }
.mat-calendar{ font-family: 'SourceCodePro' !important; }
.mat-mdc-card-subtitle{ font-family: 'SourceCodePro' !important; }
.mat-button-toggle-label-content{ font-family: 'SourceCodePro' !important; }
.mat-step-label{ font-family: 'SourceCodePro' !important; }
/* Fin fuente SourceCodePro */

/* Implementación de fuente Movilidad */
.mat-mdc-dialog-container .mat-mdc-dialog-title{ font-family: 'Movilidad' !important; text-transform: uppercase !important; }
/* Fin fuente Movilidad */

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

html, body { height: 100%; }
body { margin: 0; font-family: 'SourceCodePro', Roboto, "Helvetica Neue", sans-serif; }

.linea_1_background { background-color: #F54A91 !important; }

/* Material colors --> Usar los colores de esta paleta */
/* ROJO */
.red_primary_background {background-color: #EF4538 !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_details_background {background-color: #EF4B91 !important;}
.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_send_background {background: #235FAC !important;}
.blue_send_font {color: #235FAC !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: #4CAF4E !important;}
.green_primary_color {color: #4CAF4E !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: #F8981D !important;}
.orange_primary_font {color: #F8981D !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: #686968 !important;}
.gray_disabled {background-color:#b1b1b1 !important; color:#9E9E9E !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;}
/* TRANSPARENTE*/
.transparent_background {background-color: transparent !important; border: transparent;}

.mat-success2 { color: #00897b !important; }
.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;
}

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

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

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

/* 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-24 {margin-left: 24px !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;}
.ml-100 {margin-left: 100px !important;}
.ml-150 {margin-left: 100px !important;}
.ml-200 {margin-left: 100px !important;}
.ml-300 {margin-left: 300px !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;}
.mr-100 {margin-left: 100px !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_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_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;}

.icon_size {width: 20px; height: 20px; color: gray !important;}

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

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

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

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

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

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

/* 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;
}

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

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

.menu-card {
  display: flex;
  width: 100%;
  height: calc(100% - 111px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

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

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

.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;
  box-sizing: border-box;
}

.menu-card-item:hover {
  cursor: pointer;
  border: 1px solid transparent !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{
  font-size: 64px;
  width: 64px;
  height: 64px;
  color: #888;
}

/*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;
  transition: all 1.5s ease;
}

@media screen and (max-width: 720px) {
  .items-container{ width: 95%; }
}

@media screen and (max-width: 720px) {
  .items-container{ 
    width: 100%;
    padding: 16px;
  }
}

.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: 12px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
}

.vertical-flex-container-item h2 {
  margin: 0;
  padding: 0;
  margin-bottom: 8px;
  font-family: 'Movilidad';
  text-transform: uppercase;
}

.users-container {
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.user-info {
  padding: 8px 8px 0 8px;
  transition: all 0.25s ease;
  box-sizing: border-box;
  margin: 12px;
}

.user-info h3 {
  margin: 0;
  font-weight: 500;
}

.user-info p span {
  font-weight: 400;
}

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

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

.main-container {
  width: 75%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  /* overflow: auto; */
  position:relative;
  transition: width 2s;
}


@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); }
  }
}

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

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

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

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

.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-section{
  width: 100%;
  height: calc(100% - 57px);
}

.override-paginator{
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.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-500p { width: 500px !important; }
.w-450p { width: 450px !important; }
.w-400p { width: 400px !important; }
.w-350p { width: 350px !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; }

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

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

.clickable {
  cursor: pointer !important;
}

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

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

.override-table{
  width: 100%;
  height: calc(100% - 140px);
  overflow: auto;
}

.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;
  transition: all 1.5s ease;
}

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

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

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

.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  */

.mat-card-title {
  padding: 15px 0 0 0;
  display: block !important;
}

.is-loading {
  width: 100%;
  text-align: center;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

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

.has-error mat-icon{
  font-size: 96px;
  width: 96px;
  height: 96px;
  margin-top: 16px;
  margin-bottom: 16px !important;
}

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

/* 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;
}

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

/* 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;
}

.mat-quill-container{
  width: 100%;
}

.mat-quill-outline-box{
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 4px;
  border: solid 1px #777;
}

.mat_quill_outline_box_error{
  border: solid 1px #ba1a1a;
}

.mat-quill-outline-error-area{
  height: 20px;
  width: 100%;
}

.mat-quill-outline-error-area mat-error{
  font-size: 12px;
  margin-left: 16px;
}

.ql-toolbar.ql-snow{
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

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

tr.mat-row, tr.mat-footer-row { height: 48px; }

.mat-card-content-form{
  height: calc(100vh - 280px) !important;
}

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

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

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

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

.center_text{
  text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/*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;
}

.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_day{
  font-weight: 500;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.active-orders-table-container{
  width: 100%;
  height: calc(100% - 83px);
  background-color: white;
}

.active-orders-table-container mat-card{
  width: 75%;
  margin: 0 auto;
  height: calc(100vh - 214px) !important;
}

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

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

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

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

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

.input-file {
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 24px;
  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;
}

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

.override-form-fixed{
  width: 100%;
  height: calc(100vh - 304px);
  overflow: hidden;
}

.align-end { text-align: end !important; }

.td_actions_2 {
  width: 130px !important;
}

.card_header {
  justify-content: center; 
  flex-direction: column;
}

.card_actions {
  margin: 16px 4px; 
  display: flex; 
  justify-content: space-between;
}

.card_action_filters {
  display: flex; 
  flex-direction: row;
}

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

.content_table {
  height: calc(100% - 214px); 
  overflow: auto;
}

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

.sam-dialog-actions{
  background-color: whitesmoke;
  box-sizing: border-box;
  border-top: solid 1px rgba(0, 0, 0, 0.12) !important;
}

.stepper-body-container{
  width: 100%;
  height: calc(100vh - 360px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.stepper-body-actions-container{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  border-top: solid 1px rgba(0, 0, 0, 0.12);
}

.stepper-body-content-container{
  width: 100%;
  height: calc(100vh - 418px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

.stepper-double-button{
  color: #005cbb;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  font-family: Roboto, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.006rem;
  font-weight: 500;
}

.stepper-double-button:first-child{
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #74777f;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #74777f;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #74777f;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #74777f;
  border-radius: 24px 0 0 24px;
}

.stepper-double-button:last-child{
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #74777f;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #74777f;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #74777f;
  border-left: none;
  border-radius: 0 24px 24px 0;
}

.stepper-double-button:hover{
  background-color: rgba(0, 92, 187, 0.12);
}

.stepper-double-button mat-icon{
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.stepper-double-button:disabled{
  background: rgba(26, 27, 31, 0.12);
  color: rgba(26, 27, 31, 0.38);
  cursor: auto;
  border-color: rgba(26, 27, 31, 0.12);
}

/*RIPPLE-TEXT-BUTTON: 0, 92, 187, 0.12*/

.raised-button-background{
  color: white !important;
  background: rgb(35, 95, 172) !important;
}

.primary_background{
  background: rgba(0, 92, 187, 1) !important;
}

.row-tools-bar{
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 20px 20px 8px 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}

.row-tools-bar.no-padding{
  padding: 0 !important;
}

.row-tools-bar-title{
  font-weight: 500;
  font-size: 25pt;
  text-align: center;
  box-sizing: border-box;
}

.row-tools-bar.card-view-padding{
  padding: 14px 0 8px 8px !important;
}

.row-tools-bar.card-view-padding button{
  margin: 0 !important;
}

.fill_nothing_selected{ width: calc(100% - 288px); }
.fill_train_selected{ width: calc(100% - 520px); padding-left: 232px; }
.fill_via_selected{ width: calc(100% - 551px); padding-left: 263px; }
.fill_station_selected{ width: calc(100% - 688px); padding-left: 400px; }

@media screen and (max-width: 1620px) {
  .row-tools-bar-title{ text-align: left; }
  .fill_train_selected{ width: calc(100% - 520px); padding-left: 16px; }
  .fill_via_selected{ width: calc(100% - 551px); padding-left: 16px; }
  .fill_station_selected{ width: calc(100% - 688px); padding-left: 16px; }
}

@media screen and (max-width: 1220px) {
  .row-tools-bar-title{ font-size: 18pt; }
}

@media screen and (max-width: 1080px) {
  .row-tools-bar-title{ font-size: 12pt; }
}

mat-error{
  max-lines: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

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

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