/*______________________________________________________________________________________________________________________________________________________________
|
|
|
|
|       CSS  -  GENERAL
|
|
|
|_____________________________________________________________________________________________________________________________________________________________*/

 
/* 
389ca2 --> Base Original 
38b4bb --> Base Aclarado 
3c4e50 --> Oscuro Original 
*/
 


/*__________________________________________________________________________________________________________________
|
|
|
|		PERSONALIZACION   DEL   BACKEND
|
|		ELEMENTOS  GENERALES
|
|
|_________________________________________________________________________________________________________________*/

/*________________________________________________________________________________________________________
|
|
|       BODY
|
|_______________________________________________________________________________________________________*/
body {
	font-family: -apple-system, system-ui, "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5384616;
	/* font-weight: 100 !important; */
	color: #333333;
	background-color: #f3f3f3;
}
a {
	color: #38b4bb ;
	text-decoration: none;
}
a:hover, a:focus {
	color: #38b4bb ;
	text-decoration: none;
}

i {
	font-size: 16px;
}
.fa, .fab, .fal, .far, .fas {
	position: relative;
	vertical-align: middle;
	top: -1px;
}

  

 


/*__________________________________________________________________________________________________________________
|
|
|
|
|     HEADER  -  NAVBAR
|
|
|
|_________________________________________________________________________________________________________________*/


/*________________________________________________________________________________________________________
|
|   
|       NAVBAR       
|   
|_______________________________________________________________________________________________________*/
.pace .pace-progress {
	background: #00000060 !important;
    height: 4px;
} 
.navbar {
	/* min-height: 46px; */
	border: none !important;
}
.navbar-header {
	min-width: 230px;
	background: #38b4bb;
	background: rgba(0, 0, 0, 0.15);
}
.navbar-inverse {
	border-color: #38b4bb;
	background-color: #38b4bb ;
}
.navbar-header .navbar-header-box {
}

.navbar-header .navbar-nav {

	margin-right: 1px;
}
.sidebar-xs-indicator  .navbar-header {
	background: #38b4bb !important;
} 
.sidebar-xs-indicator  .navbar-header  .navbar-header-box {
	background: none !important;
}
 
/*_________________________________________________________________________________________
|
|       LOGO
|________________________________________________________________________________________*/
.navbar-brand {
	float: left;
	padding: 11px 0px;
	font-size: 18px;
	line-height: 20px;
	height: 44px;
	width: 100%;
}
.navbar-brand > img {
	margin-right: 10px;
	margin: -7px auto 0;
	height: 40px;
}
@media screen and (max-width: 768px)
{
	.navbar-brand > img { 
		margin: -7px 0 0 20px;
		height: 40px;
	}
}


/*_________________________________________________________________________________________
|
|       NAVBAR-NAV  -  DROPDOWN-USER
|________________________________________________________________________________________*/
.navbar-nav > .dropdown-user > a, .navbar-nav > .dropdown-user > a > span {
    padding-top: 7px;
    padding-bottom: 6px;
}
.navbar-nav > li > a {
    padding-top: 13px;
    padding-bottom: 12px;
}
 

/*_________________________________________________________________________________________
|
|       NAVBAR  -  DROPDOWN-MENU  ANIMATION
|________________________________________________________________________________________*/
@media screen and (min-width: 768px)
{
	.navbar  .dropdown   .dropdown-menu {
	 	/* min-width: 230px;
		-webkit-animation-name: lightSpeedOut;
		animation-name: lightSpeedOut; 
		-webkit-animation-duration: 1.15s;
		animation-duration: 1.15s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		display: block;		 */
	}
	.navbar  .dropdown.open  .dropdown-menu {
		-webkit-animation-name: fadeInUp;
		animation-name: fadeInUp; 
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both; 
		display: block;
	}
}


/*_________________________________________________________________________________________
| 
|       NOTIFICACIONES  HEADER 
|________________________________________________________________________________________*/ 
.box_notifaciones_desktop {
	border-bottom: 2px solid #38b4bb;
} 
.box_notifaciones_mobile  {
	color: #666;
	background: #fff;
}  
.box_notifaciones_mobile  .badge  {
	background: red !important;
	color: #fff !important;
}
#circulo_numero_notificaciones_totales_mobile {
	position: absolute;
	top: 5px;
	right: 3px;
	background: #ff0000;
	color: rgb(255, 255, 255);
	border: 1px solid #ff0000; 
}









/*__________________________________________________________________________________________________________________
|
|
|
|
|     SIDEBAR
|
|
|
|_________________________________________________________________________________________________________________*/

/*_________________________________________________________________________________________
|
|
|       SIDEBAR  -  MENU
|
|________________________________________________________________________________________*/

/******************  NUEVO  -  PROBAR  UN  TIEMPO...  ******************/
/*******      EN FORMATO MOVIL EL MENU APARECE LATERALMENTE       ******/
@media (max-width: 768px)
{
	.sidebar-main {
		position: fixed;
		top: 0;
		width: 0%;
		z-index: 99999;
		display: block;
		overflow: auto;
		transition: all 0.5s ease;
		max-width: 250px;
	} 
}
@media (max-width: 768px)
{ 
	.sidebar-mobile-main .sidebar-main, .sidebar-mobile-secondary .sidebar-secondary, .sidebar-mobile-opposite .sidebar-opposite, .sidebar-mobile-detached .sidebar-detached > .sidebar {
		display: block;
		width: 70%;
		max-width: 250px;
	}
}
/******************  NUEVO  -  PROBAR  UN  TIEMPO...  ******************/
/*******      EN FORMATO MOVIL EL MENU APARECE LATERALMENTE       ******/


@media (min-width: 769px) {
	.sidebar-fixed .sidebar-content {
		top: 45px;
	}
}

.sidebar-user > .category-content > .media > a.media-left {
	padding-left: 10px;
} 
.sidebar-user .media-left, .sidebar-user .media-right, .sidebar-user .media-body {
	display: table-cell;
	vertical-align: middle;
} 
.sidebar-user .media-left i {
	font-size: 2.4em;
	top: 2px;
}

.navigation .navigation-header, 
.navigation .navigation-header a { 
	color: #31b8bf;
	font-weight: 400;
	background: #11181b;
}

.navigation > li > a { 
	color: #98b7b6;
	padding: 7px 20px; 
	min-height: 36px;
	font-size: 14px;
	font-weight: 400 !important;
}

.navigation > li.active > a, 
.navigation > li.active > a:hover, 
.navigation > li.active > a:focus {  
	color: #00ffea !important;
	border-left: 2px solid #00ffea !important; 
	background-color: #222d32;
}

.navigation > li > ul li.active > a,
.navigation > li > ul li.active > a:hover,
.navigation > li > ul li.active > a:focus { 
	color: #2dc1bc  !important; 
	border-left: 2px solid #2dc1bc  !important;
	background-color: rgba(0, 0, 0, 0.2);
}

 





 


/*__________________________________________________________________________________________________________________
|
|
|
|
|
|     CONTENIDO   Content-Wrapper
|
|
|
|
|_________________________________________________________________________________________________________________*/
.content-wrapper {
	position: relative;
}

#overlay_loading_page  {
	width: 100%;
	background: #F5F5F5;
	height: 1900px;
	position: fixed;
	z-index: 999;
}
#loading {
	z-index: 99999999;
	position: fixed;
	width: 50px;
	text-align: center;
	top: 50%;
	margin-left: calc(50% - 115px - 25px);
}
@media screen and (max-width: 768px)
{
	#loading {
		margin-left: calc(50% - 25px);
	}
}


/*_________________________________________________________________________________________
|
|       IMAGEN  FONDO  CONTENT-WRAPPER
|________________________________________________________________________________________*/
@media screen and (min-width: 769px)
{
	/*
	.content-wrapper {
	background: url(../../img/logos/ayudaentumaster_v_c.png) no-repeat center center;
	background-size: 300px;
	}
	*/
}
@media screen and (max-width: 768px)
{
	/*
	.page-container {
		background: url(../../img/logos/cloud-manager.png) no-repeat center center;
		background-size: 200px;
	}
	*/
} 


/*_________________________________________________________________________________________
|
|     PAGE  HEADER  -  TITULO  SECCION  (BREADCRUMB)
|________________________________________________________________________________________*/
.page-header {
    margin: 0 0 0px 0;
    padding-bottom: 0;
    background-color: transparent;
  	border: none;
}
.page-header  .row {
	background: transparent;
	margin: 0;
} 
.page-header  .breadcrumb-line {
	background-color: transparent !important;
	border-bottom: none !important;
}
.page-header  .breadcrumb-line  .page-title {
	padding: 13px 0px;
	list-style: none;
	margin: 0;
}
.page-header  .breadcrumb-line  .breadcrumb {
	margin: 0; 
	padding: 13px 0px;
	line-height: 28px;
	list-style: none;
	text-align: right;
}


/*_________________________________________________________________________________________
|
|     NAVBAR  DEFAULT
|________________________________________________________________________________________*/
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
	color: #ffffff;
	background-color: #38b4bb;
}
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
	color: #333333;
	background-color: #38b4bb2b;
}



 

/*_________________________________________________________________________________________
|
|
|
|     TABLAS
|
|
|________________________________________________________________________________________*/
.box_tabla  {
	overflow: hidden;;
}
.datatable-header {
	border-bottom: none;
}
.datatable-footer {
	border-top: none;
}
.table-bordered {
	border: 0;
}
.table-bordered  thead,
.table-bordered  tfoot { border: 1px solid #38b4bb;  }
.table-bordered  tbody { border: 1px solid #dddddd;  }

.table-bordered.table-xxs > thead > tr > th,
.table-bordered.table-xxs > tfoot > tr > th {  padding-top: 8px;  padding-bottom: 8px; }
  
.tabla_registros  a {
  	/* color: #333;
	padding: 3px 5px;
	margin-right: 5px;    */
	display:  inline-block;
	text-decoration: none;
} 

/*_________________________________________________
|
|     TABLAS  -   ORDEN (SORTING)
|________________________________________________*/
.dataTable thead .sorting:before,
.dataTable thead .sorting:after {
    color: rgba(255, 255, 255, 0.397);
    right: 5px;
} 
.dataTable thead .sorting_asc:after, 
.dataTable thead .sorting_desc:after, 
.dataTable thead .sorting_asc_disabled:after, 
.dataTable thead .sorting_desc_disabled:after
{
	color: #fff;
    font-size: 22px;
    right: 2px;
    margin-top: -10px;
} 
.dataTable thead .sorting, 
.dataTable thead .sorting_asc, 
.dataTable thead .sorting_desc, 
.dataTable thead .sorting_asc_disabled, 
.dataTable thead .sorting_desc_disabled {
    padding-right: 30px;
} 
 
td.columna_reordenar  {
	cursor: move;
	-webkit-transition: all 600ms;
	-moz-transition: all 600ms;
	-o-transition: all 600ms;
	transition: all 600ms;
}
td.columna_reordenar:hover  {
	cursor: move;
	background: #ddd;
}  
 
/*_________________________________________________
|
|     TABLAS  -   tr  /  Hover tr  /  Select tr
|________________________________________________*/
.tabla_registros > tbody > tr {
    font-size: 14px;
}
.tabla_registros > tbody > tr:nth-of-type(odd) {
	background-color: #E5EFF5;
}
.tabla_registros tbody > tr:hover {
	background-color:  rgba(168, 229, 255, 0.3);
}
.tabla_registros tbody > tr.selected,
.tabla_registros tbody > tr > .selected  {
	background-color: #a6d7f9;
} 
.tabla_registros tbody > tr.selected  td {
	border-color: white !important;
} 

/*_________________________________________________
|
|     TABLAS  -  Box Acciones
|________________________________________________*/
table .box_acciones { 
	display: flex; 
	justify-content: center;
	flex-wrap: nowrap;
}
table  .box_acciones  a {
	margin: 0;
	padding: 5px 7px; 
}
table .box_acciones  a:hover  {
	color: #38b4bb;
	text-decoration: none;
} 

/*_________________________________________________
|
|     TABLAS  -  Imagenes Miniaturas
|________________________________________________*/
.datatable-scroll-wrap  .thumbnail .caption-overflow  span {
	margin-top: -14px !important;
}
.datatable-scroll-wrap  .thumbnail .caption-overflow  span  a  {
	color: #fff !important;
	padding: 3px 8px;
	margin: auto;
	margin-top: 0 !important;
	text-decoration: none;
} 
/*______________________________________
|
|     MINIATURAS  EN  LISTADO/TABLAS
|_____________________________________*/
.thumbnail {
    margin-bottom: 0px;
}

/*_________________________________________________
|
|     TABLAS  -  En formato movil, dividir las 2 columnas (Title - Data) al 50%
|________________________________________________*/
.dataTable tr.child .dtr-title {
	width: 50%;
    padding-right: 15px;
}
.dataTable tr.child .dtr-data {
	width: 50%;
	text-align: right;
}

/*_________________________________________________
|
|     TABLAS  -  Filtros por Columnas
|________________________________________________*/
tr.filter {
	background: #c1cad2;
	border: 1px solid #c1cad2;
	font-family: Helvetica, 'FontAwesome', sans-serif;
}
tr.filter td  input {
	color: red !important;
}
tr.filter  button.clear_filter {
	background: #fff;
	color: #38b4bb;
	outline: none;
}
tr.filter  button.clear_filter:hover {
	color: #444;
}
tr.filter  button.clear_filter:focus {
	color: #38b4bb;
}
.datatable-scroll-wrap {
	overflow-x: hidden !important;
}
.datatable-scroll {
	overflow-x: visible !important;
} 
 
/*_________________________________________________
|
|     TABLAS  -  PAGINATION
|________________________________________________*/
.dataTables_paginate .paginate_button.current, 
.dataTables_paginate .paginate_button.current:hover, 
.dataTables_paginate .paginate_button.current:focus {
    color: #fff;
    background-color: #38b4bb ;
} 

/*_________________________________________________
|
|     TABLAS  -  Campos  editables
|________________________________________________*/
.editable-click, a.editable-click, .editable-click:hover, a.editable-click:hover {
	border: 1px dashed #cccccc;
}
a.editable-empty, a.editable-empty:hover, a.editable-empty:focus {
	font-style: italic;
	border-color: #ff766c;     
}





/*________________________________________________________________________________________________________
|
|    
|    
|    
|       FORMULARIOS  
|    
|    
|    
|_______________________________________________________________________________________________________*/ 
#formulario_registro  {
	padding: 0;
}

/*_________________________________________________________________________________________
|
|     MENSAJE  ERROR  INPUT
|________________________________________________________________________________________*/
.has-feedback label ~ .form-control-feedback {
    top: 25px;
    right: 15px;
}

/*__________________________________________________________________________________________
|
|     AVISOS  ERROR - VALIDACION  CAMPOS  FORMULARIOS
|_________________________________________________________________________________________*/
.error_box {
	display: none;  
}

/*__________________________________________________________________________________________
|
|	SELECTS "INVISIBLES"
|
|	MODIFICAR  POSICION  PARA  QUE  EL  AVISO  "OBLIGATORIO"  SALGA  ENCIMA  DEL  SELECT2...
|_________________________________________________________________________________________*/
.form-group  .select2-hidden-accessible  {
    position: absolute !important;
    bottom: 0;
    left: 0%;
    width: 100% !important;
}
/*__________________________________________________________________________________________
|
|	OPTION SETTING   ===>   SELECT  MULTIPLE  PARA  ETIQUETAS, ETC....
|_________________________________________________________________________________________*/
.select2-selection--multiple .select2-selection__choice,
.select2-results__option[aria-selected=true] {
    background-color: #38B4BB;
    color: #fff;
}



/*__________________________________________________________________________________________
|
|     MENUS  transformados  en.... ==>  SELECT
|_________________________________________________________________________________________*/
ul.listTipoVia {	
    max-height: 240px;
    overflow: auto;
}

ul.listTipoVia li.selected a {
    background: #38b4bb;
    color: #fff;
}


 
/*________________________________________________________________________________________________________
|
|    
|       CHECKBOX
|    
|_______________________________________________________________________________________________________*/
.checker span { 
	border: 1px solid #38B4BB;
}
.checker span.checked { 
	border: 1px solid #38B4BB;
	background: #38B4BB;
}
.checker span:after {
	font-size: 20px;
	line-height: 1;
	top: -2px;
	left: -2px;
	color: #fff;
}
  
 

/*_________________________________________________________________________________________
|
|
|     DATERANGEPICKER
|
|________________________________________________________________________________________*/
.daterangepicker .ranges { 
	width: 165px; 
}
.daterangepicker .table-condensed tr > th, 
.daterangepicker .table-condensed tr > td {
	padding: 7px 0px;
	line-height: 1;
} 
.daterangepicker.single .ranges,
.daterangepicker.single .calendar {
	float: none;
	float: left !important;
}
.daterangepicker.single .calendar {
	 margin: 5px 5px 5px 8px;        
}

 

/*_________________________________________________________________________________________
|
|
|     BOX  BUTTONS
|
|________________________________________________________________________________________*/
.box_buttons {
}
.box_buttons.buttons-left {
	text-align: left;
}
.box_buttons.buttons-right {
	text-align: right;
}
.box_buttons button {
	display: inline-block;
	border: 1px solid transparent;
}
.box_buttons.buttons-left button {
	margin: 8px 5px 0 0px;
}
.box_buttons.buttons-right button {
	margin: 8px 0 0 5px;
}
button.vista_previa  {
	background: #B6D8F1;
}

 

/*_________________________________________________________________________________________
|
|     NOTIFICACIONES  EMERGENTES...
|________________________________________________________________________________________*/ 
.jGrowl-notification  .jGrowl-header  {
	font-size: 17px;
}
.jGrowl-notification  .jGrowl-message  {
	font-size: 14px;
}
    

/*_________________________________________________________________________________________
|
|     TEXTAREA's
|________________________________________________________________________________________*/
textarea {
	resize: vertical;
}
  

/*_________________________________________________________________________________________
|
|     MODAL's
|________________________________________________________________________________________*/
.modal-open .page-content {
	-webkit-filter: blur(3px);
	-moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}



/*_________________________________________________________________________________________
|
|     ?¿?¿?......
|________________________________________________________________________________________*/ 
.dragula-handle {
    color: #999999;
    cursor: move;
}






/*__________________________________________________________________________________________________________________
|
|
|
|
|     FOOTER...
|
|
|
|_________________________________________________________________________________________________________________*/
.footer {
	bottom: 10px;  
}
@media screen and (max-width: 768px)
{
	.footer {
		left: 0;
		bottom: 6px;
		font-size: 12px;
		width: 100%;
		text-align: center;
		position: fixed;
		z-index: -1;
	}
}





/*_________________________________________________________________________________________
|
|
|     TEXTOS
|
|________________________________________________________________________________________*/ 
.font-bold { font-weight: bold; }

.f-12 { font-size: 12px !important; }  
.f-14 { font-size: 14px !important; }
.f-16 { font-size: 16px !important; }
.f-17 { font-size: 17px !important; }
.f-18 { font-size: 18px !important; }
.f-19 { font-size: 19px !important; }
.f-20 { font-size: 20px !important; }
.f-22 { font-size: 22px !important; }
.f-24 { font-size: 24px !important; }
.f-26 { font-size: 26px !important; }
.f-30 { font-size: 30px !important; }
.f-32 { font-size: 32px !important; }
.f-36 { font-size: 36px !important; }
.f-40 { font-size: 40px !important; }
.f-50 {	font-size: 50px !important; }