/* --- HTML5 RESET --- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	line-height: 1.8em;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body { line-height: 1; font-family: 'Ubuntu', sans-serif; }
ol, ul { list-style: none;}
blockquote, q { quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
html {overflow-x: hidden;}

strong {font-weight: 700; line-height: 1em;}
.text-center {text-align: center;}
* { margin: 0; padding: 0; list-style: none; -webkit-font-smoothing: antialiased;}


/* --- TIPOGRAFÍAS --- */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


/* --- PALETA DE COLORES --- */

:root{
	--main-color: #C2C2C2;
	--accent-color: #0097CE;
	
	--light-color: #ffffff;
	--grey-color: #EEEEEE; 
	--grey-fondo:  #F9F9F9;

	--font: 'Ubuntu', sans-serif;
}

/* --- COMUNES --- */

a {
	text-decoration: none;
	color: var(--main-color);
	line-height: 1em;
}

a:hover {
	text-decoration: none;
	color: var(--accent-color);
} 

p{
	margin-bottom: 1em;
}

h1, .h1{
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--accent-color);

}

h2, .h2{
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--accent-color);
}

h3, .h3{
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

h4, .h4{
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

h5, .h5{
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

/* --- HEADER --- */

header {
	background: var(--light-color);
	padding-bottom: 2em;
	padding-top: 1em;
	margin-bottom: 3em;
}

.logo-box{
	margin-top: 1em;
	text-align: center;
}

.logo{
	max-width: 300px;
}

.logo2{
	max-width: 160px;
}

/*BODY*/

.gris{
	background-color: var(--grey-fondo);
	font-family: var(--font);
}

/*Form sign in*/
.form-caja{
	    background-color: var(--light-color);
    border: #EEEEEE 1px solid;
    border-radius: 35px;
    padding: 20px 25px;
    min-height: 135px;
    margin-bottom: 30px;
    width: 100%;
}
.form-titulo{
	font-family: var(--font);
	color: var(--accent-color);
	text-transform: uppercase;
}

.form-input{
	background-color: var(--light-color);
	border-radius: 35px;
	color: var(--main-color);
	border: 2px solid #EEEEEE;
	padding: 10px;
	margin-bottom: 20px;
}

.form-btn{
	background-color: #ffa800!important;
	text-transform: uppercase;
	font-family: var(--font);
	font-size: 1.2rem;
	color: var(--light-color);
}

.form-btn:hover{
	border: 2px solid #ffa800!important;
	color: #ffa800!important;
	background-color: #ffff!important;
}
input{
	border: 0px;
}

.input-group-addon{
	color: var(--accent-color);
}

.caja-azul{

	background-color: var(--accent-color);
}
.caja-naranja{
	border: 3px solid #ffa800!important;
	color: #ffa800;
}

.link-azul{
	color: var(--accent-color);
	font-size: 1.1rem;
}

.link-azul:hover{
	color: var(--secondary-color);

}
.naranja{
	color: #ffa800;
}
.link-naranja{
	color: #ffa800;
	font-size: 1.1rem;
}

.link-naranja:hover{
	color: var(--accent-color);

}
.link-naranja:active{
	color: var(--accent-color);

}

.link-azul:focus{
	color: var(--secondary-color);

}
.mt-6{
	margin-top: 6rem;
}

.p-6{
	padding: 8rem;
}

.dataTables_wrapper .dataTables_length select{
	border: 1px solid #ffa800!important;
    border-radius: 6px!important;
    padding: 10px!important;
    font-size: 1rem!important;
    color: #B4B4B4!important;
}

.dataTables_wrapper .dataTables_filter input{
	border: 1px solid #ffa800!important;
    border-radius: 6px!important;
    padding: 10px!important;
    font-size: 1rem!important;
    color: #B4B4B4!important;
}

.dataTables_length{
	color: #707070!important;
}


thead{
	color: #C2C2C2;
    font-size: 18px;
    text-transform: uppercase;
}

.table a{
	color: #ffa800;
}

.table a:hover {
	color: var(--accent-color);!important;
}

.table svg{
	width: 30px;
    height: 30px;

}

.salir-btn{
	border: 2px solid #ffa800!important;
	color: #ffa800;
	text-transform: uppercase;
	background-color: var(--light-color);
	padding: 5px 30px 5px;
	

	
}
.salir-btn a{
	font-size: 1rem!important;
}


.salir-btn:hover{
	background-color: var(--accent-color);
	text-transform: uppercase;
	font-family: var(--font);
	font-size: 1.2rem;
	color: var(--light-color);
}

.label-sincronizar{
font-size: 20px;
color: var(--secondary-color);
}


.dataTables_length label{
	    font-weight: 500;
}
.dataTables_filter label{
	font-weight: 500;
}
.form-label{
	color:  #C2C2C2!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
	padding: 0px!important;
	margin:  0px!important;
}

.active>.page-link, .page-link.active{
	z-index: 3;
    color: var(--light-color)!important;
    background-color: #ffa800!important;
    border-color: #ffa800!important;
}

.page-link:hover {
    z-index: 2;
    color: var(--accent-color)!important;
    background-color: var(--light-color)!important;
    border-color: var(--accent-color)!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
	    border: 1px solid #ffa800!important;
}

.page-link{
	color: #ffa800!important;
}

.dataTables_wrapper .dataTables_paginate{
	    padding-top: 1.5em!important;
}
.table.dataTable.no-footer{
	padding-top: 50px;
}
.dataTables_wrapper .dataTables_info{
	    padding-top: 1.5em!important;
}
.label-sincronizar{
	color: #252729!important;
}
.caja-titulo{
	line-height: 1.2em!important;
	color: #ffa800;
}

.btn-filtros{
	font-size: 1em;
    padding: 5px 30px 5px;
    text-transform: none;
}

.btn-sincro{
	font-size: 1em;
    padding: 2px 30px 2px;
    text-transform: none;
}

.feature.col.text-center.caja-naranja.text-white.rounded-5.p-5:hover {
    background-color: var(--accent-color);
}