:root {
	/* Colores DINTEL */
	--color-primary-200: #E8EFFA;
	--color-primary-300: #D7E2F5;
	--color-primary-400: #9CB9E5;
	--color-primary-600: #252525; 
	--color-primary-500: #145D7B;
	--color-primary-700: #04214D;
	--color-secondary-500: #C33400;
	--color-secondary-600: #802200;
	--color-secondary-700: #521600;
	--color-grayscale-000: #FFFFFF;
	--color-grayscale-100: #F7F7F8;
	--color-grayscale-200: #EEEFF0;
	--color-grayscale-300: #DCDFE3;
	--color-grayscale-400: #B5B8BE;
	--color-grayscale-500: #696E75;
	--color-grayscale-600: #363D47;
	--color-grayscale-700: #0A0E14;
	--color-error-100: #FCF6F5;
	--color-error-200: #F5E1DC;
	--color-error-300: #E8886F;
	--color-error-400: #C44727;
	--color-error-500: #5E1503;
	--color-error-600: #330C02;
	--color-success-100: #F3F9F6;
	--color-success-200: #E5F5EC;
	--color-success-300: #4DB277;
	--color-success-400: #198044;
	--color-success-500: #015223;
	--color-success-600: #0A2B18;
	--color-warning-100: #FFFAF2;
	--color-warning-200: #FCF0DC;
	--color-warning-300: #DBB251;
	--color-warning-400: #AD8821;
	--color-warning-500: #594100;
	--color-warning-600: #332302;
	--color-info-100: #F2F2FC;
	--color-info-200: #E9E7F6;
	--color-info-300: #928FC2;
	--color-info-400: #605AAD;
	--color-info-500: #1E1655;
	--color-info-600: #030121;
	--color-overlay: #515C6D;
	--color-focus: #C33400;
	--color-focus-negative: #E59100;
}

.dashboard-title {
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 8px;
    padding-top: 14px;
    padding-left: 0;
}

.search-box {
	display: inline;
	height: 31px;
	font-size: 12px;
	padding: 0 5px;
	margin: -1px 5px 0 10px
}


.user-info{
   background-color: var(--color-primary-600);
}
body {
  overflow-x: hidden;
}

.footer {
  color: var(--color-grayscale-000);
  background-color: var(--color-primary-500);
  min-height: 32px;
  padding-top: 5px;
  padding-left: 0px ! important;
  padding-right: 0px ! important;
}

form>.page-subtitle {
  font-size: 20px;
  padding-bottom: 8px;
}

.main>.page-subtitle {
  font-size: 20px;
  padding-bottom: 8px;
}

.page-subtitle {
  font-size: 15px;
  padding-bottom: 5px;
  margin-bottom: 5px ! important;
}

.head {
  min-height: 90px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-primary-500);
  color: var(--color-grayscale-000);
}

.tHeadW {
  width: 68px !important;
}

.info-blue {
  color: var(--color-info-400);
}

.active>a {
  text-decoration: none !important;
  white-space: nowrap !important;
}

.input-group>.select2-container--bootstrap {
  width: auto;
  flex: 1 1 auto;
}

.input-group>.select2-container--bootstrap .select2-selection--single {
  height: 100%;
  line-height: inherit;
  padding: 0.5rem 1rem;
}

.fluidMedia iframe {
  height: 700px;
}

.olap-bo {
  height: calc(100vh - 91px);
}

tbody .unit-indicator th {
  text-transform: uppercase;
  background-color: var(--color-primary-500);
  color: var(--color-grayscale-000);
  border-color: var(--color-primary-400);
}

.dashboard-graph-grid thead th, #inputData thead th, #logTable thead th, #configurationTable thead th, #cacheLogs thead th
{
  background-color: var(--color-primary-500);
  color: var(--color-grayscale-000);
  border-color: var(--color-primary-400);
}

.dashboard-graph-grid tbody th, .dashboard-graph-grid tfoot th
{
  background-color: var(--color-primary-300);
  color: var(--color-grayscale-700);
  border-color: var(--color-primary-400);
}

.dashboard-graph-grid td.totalTableValue
{
  font-weight: bold; 
}

.dashboard-header {
  /*fondo azul donde esta menu de hamburguesa , area dataobsae-nisae ..*/
  background-color: var(--color-primary-600);
}

.bg-success { /*boton de exito (los verdes)*/
  background-color: var(--color-success-400) !important;
}

.btn-primary { /*botones de acceder,buscar..*/
  background-color: var(--color-primary-500) !important;
}

.btn-primary:hover, .btn-primary:focus {
  /*cuando pasas el cursor por un boton de (acceder,buscar..)*/
  background-color: var(--color-primary-600) !important;
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

.alert-info { /*el fondo de la informacion del buscador*/
  background-color: var(--color-info-200) !important;
}

.page-subtitle h2 { /*nombres de indicadores, informes , mapas*/
  color: var(--color-primary-500);
}

.page-subtitle .float-end a:not(.btn) { /*nombres de Resumen general*/
  color: var(--color-primary-500);
}

.page-subtitle { /*rayita de abajo de indicadores*/
  border-bottom: 2px solid var(--color-primary-500);
  color: var(--color-primary-500);
}

.main-bg { /*para el footer*/
  background-color: var(--color-primary-500);
}

.btn-danger { /*boton eliminar de listado de aplicaciones, el hover*/
  background-color: var(--color-error-400);
}

.btn-danger:hover, .btn-danger:focus {
  background-color: var(--color-error-500);
}

.btn-secondary { /*boton acceder en listado de aplicaciones*/
  background-color: var(--color-grayscale-500);
}

.btn-secondary:hover, .btn-secondary:focus {
  /*boton acceder en listado de aplicaciones, el hover*/
  background-color: var(--color-grayscale-600);
}

.active>.page-link {
  /*cambiar el azul en la panatlla de listado de aplicaciones (1,2..)*/
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.btn-outline-primary {
  /*elementos de excel , documento..(al lado de filtrar)*/
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.multiselect-header {
  /*acceder en aplicaciones , los fondos del elemento disponibles*/
  background-color: var(--color-primary-500);
}

.separator {
  /*en acceder en aplicaciones las lineas separadoras azules,las ponemos a 700*/
  color: var(--color-primary-500);
  border-bottom: 2px solid var(--color-primary-500);
}

.btn-success { /*botones en acceder en aplicaciones(el verde)*/
  background-color: var(--color-success-400) !important;
  border-color: var(--color-success-400) !important;
}

.btn-success:hover, .btn-success:focus {
  background-color: var(--color-success-500) !important;
  border-color: var(--color-success-500) !important;
}

.btn-warning { /*botones en acceder en aplicaciones(el amarillo)*/
  background-color: var(--color-warning-300);
  border-color: var(--color-warning-300);
}

.btn-warning:hover, .btn-warning:focus {
  /*botones en acceder en aplicaciones(el amarillo)*/
  background-color: var(--color-warning-400);
  border-color: var(--color-warning-400);
}

.observations strong {
  color: var(--color-primary-500);
}

.nav>li>a, a {
  color: var(--color-primary-500);
}

a {
  color: var(--color-primary-500);
  text-decoration: underline;
}

a:hover {
  color: var(--color-primary-700);
}

.dashboard-header .btn-compartirA {
  color: var(--color-grayscale-000);
}

.tree li, .tree li a {
  color: var(--color-primary-500);
}

.news-title {
  background-color: var(--color-primary-600);
}

.news-content {
  border-color: var(--color-primary-600);
}

.nav-link {
  color: var(--color-primary-500);
}

.nav-link:focus, .nav-link:hover {
  color: var(--color-primary-700);
}

.form-check-input:checked {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.alert-danger {
  background-color: var(--color-error-200);
  border-color: var(--color-error-300);
}

.alert-success {
  background-color: var(--color-success-200);
  border-color: var(--color-success-300);
}

.alert-warning {
  background-color: var(--color-warning-200);
  border-color: var(--color-warning-300);
}

#link_id {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateY(-100%);
  color: var(--color-grayscale-000);
}

#link_id:focus {
  transform: translateY(0%);
}

/*Bordes en el buscador*/
.form-control:focus {
  border-color: var(--color-primary-700);
}

.dashboard-header .form-select:focus, .dashboard-header .form-select:hover, input.search-box:focus, .header .btn:hover:not(.inline-edition-toggle),
  .header .btn:focus:not(.inline-edition-toggle), .dashboard-header .btn:hover, .dashboard-header .btn:focus, .main-menu .btn:hover,
  .main-menu .btn:focus {
  outline: 2px solid var(--color-focus-negative) !important;
  outline-offset: -2px;
}
/*borde en tablas*/
.minitable-header th:focus, .minitable-header th:hover {
  outline: 2px solid var(--color-primary-700);
  outline-offset: -2px;
}

.main-dashboard .table-striped thead th:focus, .main-dashboard .table-striped thead th:hover, .main-dashboard .table-striped tbody tr:focus,
  .main-dashboard .table-striped tbody tr:hover {
  outline: 2px solid var(--color-primary-700);
  outline-offset: -2px;
}

a:hover, a:focus {
  outline: 2px solid var(--color-primary-700);
}

@media ( max-width : 740px) {
  .obsae {
    width: 160px;
    height: auto;
  }
  .title-container {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .language-selector {
    padding-top: 0;
    margin-right: 0;
  }
  .page-title {
    font-size: 18px;
  }
  .footer img { /*footer imagenes*/
    position: relative;
    width: 130px;
    left: -20px !important;
  }
  .footer p { /*footer informacion de contacto..*/
    position: relative;
    font-size: 10px;
  }
  .float-end svg { /*Informes , mapas*/
    margin-top: 14px;
  }
  .dashboard-title { /*para el titulo con el menu hamburgesa el svg el titulo y el boton compartr*/
    display: flex;
    align-items: center;
  }
  .dashboard-title nav, .dashboard-title button { /* menu hamburgesa  el svg y  boton compartr*/
    flex: 0 0 auto;
    font-size: 14px;
    margin-right: 10px;
  }
  .dashboard-title h1 { /* el titulo*/
    font-size: 15px !important;
  }
  .d-inline input, .d-inline button, .d-inline a { /*buscador y botones*/
    margin-top: 14px;
  }
  .menu {
    text-align: left !important;
  }
}