:root {
  --colorApp: #2E264E;
  --colorSec:#E35B29;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 32px;
}

 /* Forzar fondo disabled en select2 */
 span.select2-container--default.select2-container--disabled .select2-selection--single {
	background-color: #e9ecef;
	opacity: 1;
}

table.table{
margin-bottom: 1rem;
table-layout: initial;
}

table th{ 
	background: var(--colorApp);
	border:1px solid var(--colorApp);
	color: #fff;
	font-weight: bold;
	font-variant: small-caps;
	text-transform: lowercase;
	text-align: center !important; 
}

.table-light th{
	background: #e2e2e2;
	border:1px solid #ccc;
	color: #000;
}
.table-color th{
	background:var(--colorApp);
	border:1px solid var(--colorApp);
	color: #fff;
}
.table-color tfoot th{ background:var(--colorApp);}

.table-reducida tr th{
	font-size: 0.8em;
}

.table-reducida tr td{
	font-size: 0.8em;
}

.table-reducida .form-control {
	font-size: 0.9em;
}

table tr th, table thead tr{ border-bottom: none;}
table th a, table thead tr th,table th a:hover{	
	color: #fff; 
	font-weight: bold; 
	font-variant: small-caps;
	text-decoration: none;
	text-transform: lowercase;}
table tbody td{
	text-align: center;
	vertical-align: middle !important;
	border:1px solid #ccc;
	word-break: initial;
	padding: 0 !important;
	line-height: 18px;
}
table tbody td .btn{  padding: 6px 10px !important; margin: 3px;}
table tbody td .btn-xxs{ padding: 4px !important; margin: 3px;}

.modal-lg { max-width: 95%;}
.modal-med { max-width: 50%;}

.list-group-item{
	text-transform: lowercase;
	font-variant: small-caps;
	font-size: 18px;
	color:#333;

}
.list-group-item a{ text-decoration: none; color:#333;}

.row:before, .row:after {display: none !important;}
.input-group.date .input{ width: 78%;}
.select2-container .select2-selection--single{ height: 37px;}
.none{ display: none !important; }

.separador{
	max-width: 100%;
	margin: 35px auto;
	height: 2px;
	background: #ddd;
}

.separador-sin-margen{
	max-width: 100%;
	height: 1px;
	background: #ddd;
}

/* Colores de iconos */
.icon-danger { color: #dc3545;}
.icon-info { color: #17a2b8;}
.icon-success { color: #28a745;}
.icon-warning { color: #ffc107;}

/* Fix: Quitar scroll horizontal al desplegar cualquiera select2
.select2-container{ width: 100% !important;}
*/

input[type="file"], input[type="checkbox"], input[type="radio"], select{
	margin-bottom: 0;
}

.row{
	width: auto !important;
    max-width:  auto !important;
}
form .row .row{
	margin: 0 -15px;
}

.modal-header{
	border-top: 10px solid var(--colorApp);
	padding: 0.7rem;
}
.modal-header .modal-title{
	font-size: 1.2rem;
}

.no_editable input, .no_editable select{ background: #ddd; }

.estado-color .select2-container{ border-left:5px solid #28a745; }
.li-posicion1 .posicion .num{ background: #28a745; color: #fff;}

.form .btn-danger:hover, .form .btn-danger:focus{ background: #993636;}

.boton-xs {
	padding: 3px 5px;
}

.play-button-outer {
	cursor: pointer;
	position: relative;
    display: inline-block;
	text-align: center;
	border: 2px solid var(--colorApp);
	border-radius: 20px;
}

.play-button-outer img{
	border-radius: 20px;
}

.play-button {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 2.5em 0 2.5em 5em;
	max-width: 40%;
	border-color: transparent transparent transparent var(--colorApp);
	opacity: .75; 
}

.play-button-outer:hover {
	background-color: rgba(0, 0, 0, .5);
}

.play-button-outer:hover .play-button {
	opacity: 1;
}


/*-----------------------------------------
				LOGIN
--------------------------------------------*/
.body-login{	
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.body-login .card{
	margin: 10% 0;
	width: 500px;
	display: flex;
	flex-direction: initial;
	border: none;
	
}
.body-login .card .card-header{
	background: url(../img/img-login.jpg);
	background-size: cover;
	width: 40%;
	min-width: 170px;
	border: none;
}
.body-login .card-body{
	padding: 5px 25px 15px 25px;
}
.body-login .card-body img{ width: 80%; }
.body-login  .input-group{
	border:2px solid var(--colorApp);
	border-radius: 15px;
}

.body-login  .input-group-prepend span{
	width: 30px;
	background-color:transparent;
	color: var(--colorApp);
	border:0 !important;
	font-size: 18px;
	text-align: center;
}
.body-login  .input-group input{
	border: none;
	font-size: 18px;
}

.body-login  input:focus{
	outline: 0 0 0 0  !important;
	box-shadow: 0 0 0 0 !important;
}
.body-login .remember input{
	width: 20px;
	height: 20px;
	margin-left: 15px;
	margin-right: 5px;
	margin-top: 20px;
}
.body-login .input-group-prepend{ height: 36px; }
.body-login .input{ width:83%;  }

.body-login  .login_btn{ 
	border: none;
	border-radius: 15px;
	font-size: 18px;
	color: #fff; 
	text-transform: inherit;
	font-weight: 600;
	background-color:var(--colorApp);}
.body-login .login_btn:hover{ background-color:var(--colorApp);}
.body-login .forgot{
	text-align: right;

} 
.body-login .forgot a{
	text-decoration: none;
	color: #666;
	font-size: 14px;
	font-style: italic;
}

.body-login .password input {
	height: 37px !important;
}

@media (max-width: 650px) {
	.body-login .card .card-header{
		display: none;
	}
	.body-login .card{
		margin: 10% 2%;
	}
}

/* *************************** */
/* **** Cambios visuales ***** */
/* *************************** */
/* Mensajes de validación bajo inputs */
.error-message {
    color: #cc1f1a;
    font-size: .8rem;
    padding: 0 1.0rem;
	position: absolute;
	white-space: nowrap;
}
/* Mquetación de inputs */
.input.checkbox {
	margin-bottom: 0;
}
.input.text label,
.input.password label,
.input.number label,
.input.select label,
.input.textarea label,
.input.checkbox label,
.input.file label,
.form-group>label {
	font-size: 1rem;
	font-weight: 600;
	color: #444;
}
.input.text input,
.input.password input,
.input.number input {
    height: 37px;
}
.input-group.date .input-group-append {
	height: 37px;
    align-self: end;
}
.input.file input {
	font-size: .8rem;
}
img.form-control {
    display: inline-block;
    height: 90px;
	width: auto;
}
img.form-control + div.img-remover{
    display: inline-block;
	cursor: pointer;
    margin-left: -25px;
	position: absolute;
    vertical-align: top;
}
.input.textarea textarea.form-control {
    max-height: 15rem;
}
.input-group>.input.text {
	position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.input-group>.input.text>input {
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group>.input-group-append>button {
	border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
}
/* Maquetación de select2 */
.select2-selection > ul > li,
.select2-results > ul > li {
	margin-bottom: 0;
}
.select2.select2-container {
	width: 100% !important;
}
.select2.select2-container.select2-aw {
	width: 95% !important;
}
.select2-container input[type='search'] {
	height: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin-top: 3px;
}
/* Igualar bordes y fondo de selectores */
.select2-container--default .select2-selection--single {
    border: 1px solid #d1d1d1;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d1d1d1;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef;
}
/* Botones */
button[type='button'],
button[type='submit'],
a.btn.submit {
	height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Tablas */
table thead th.acciones {
	width: 1%;
}
tr.ver-detalle,
tr.ver-detalle-revision,
tr.ver-detalle-revision-vp,
tr.ver-detalle-prevalidacion,
tr.ver-detalle-validacion,
tr.ver-detalle-consulta-dgt,
tr.ver-detalle-confirmacion,
tr.ver-detalle-finalizacion {
	cursor: pointer;
}
tr.selected {
	background-color: #ffcab7 !important;
}
/* Links anchor para abrir modales */
a.open-modal,
a.open-custom-modal {
	cursor: pointer;
}
/* Datetimepicker */
.bootstrap-datetimepicker-widget.dropdown-menu {
	width: auto;
}
.bootstrap-datetimepicker-widget.dropdown-menu td {
	padding: 0;
}
/* Pagination footer */
ul.pagination li.active {
    background: #E35B29;
    border-radius: 0;
}
ul.pagination a li.active {
    color: #ffffff;
}
ul.pagination a li {
    color: #000000;
}
ul.pagination a li:hover {
    color: #ffffff;
}

ul.pagination a:hover {
	text-decoration: none; 

}
.paginacion .buttons ul li:hover a {
    /*background: inherit;*/

}
/* Element add_horario */

.horarios-listado .filaAdd{
	border-bottom: 2px dashed #ddd;
}

.horario-card {
   padding: 4px 0px;
   display: flex;
align-items: center;
}
.horarios-listado .btn-trash{
	padding: 0px 5px;
}
.horario-card .col-hora {
	display: inline-block;
    width: 47.5%;
	margin-right:4px;
}
.horario-card~.input-group-append > button[type='button'] {
	width: 100%;
}
/* Check como button group */
.btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
.btn-check:active+.btn-outline-colorpp,
.btn-check:checked+.btn-outline-colorpp,
.btn-outline-colorpp.active,
.btn-outline-colorpp.dropdown-toggle.show,
.btn-outline-colorpp:active {
    color: #fff !important;
    background-color: var(--colorApp);
    border-color: var(--colorApp);
}
/* Cursor en canvas de Recortar/Pixelar */
canvas.editable {
	cursor: crosshair;
}
canvas.recorte {
	width: 50%;
    margin: auto;
}

/* DataTables */
table.table-striped.dataTable.no-footer {
	border-bottom: none;
}
table.dataTable {
	width: 100% !important;
}
#informe-datos-dias_info.dataTables_info,
#informe-datos-meses_info.dataTables_info {
	width: 100%;
	text-align: center;
	border: 1px solid #dee2e6;
	border-top: none;
	border-bottom: none;
}
#informe-datos-dias_paginate.dataTables_paginate,
#informe-datos-meses_paginate.dataTables_paginate {
	width: 100%;
    border: 1px solid #dee2e6;
    border-top: none;
}
#informe-datos-dias_paginate.dataTables_paginate .paginacion,
#informe-datos-meses_paginate.dataTables_paginate .paginacion {
	justify-content: center;
}

#informe-datos-dispositivos_wrapper.dataTables_wrapper {
	border: 1px solid #dee2e6;
	border-top: none;
}

#informe-datos-dispositivos_info.dataTables_info,
#listado-registros-atex_info.dataTables_info {
	padding-top: 1.2em;
	padding-left: .755em;
}

#informe-datos-dispositivos_paginate.dataTables_paginate {
}

.paginate_numbers {
    text-align: right;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.table-responsive table.dataTable thead .sorting {
    background-image: none !important;
}

table.dataTable thead .sorting_asc {
    background-image: none !important;
}
table.dataTable thead .sorting_asc:after {
	content: " \2193";
	position: absolute;
    margin-left: 5px;
}

table.dataTable thead .sorting_desc {
    background-image: none !important;
}
table.dataTable thead .sorting_desc::after {
	content: " \2191";
	position: absolute;
    margin-left: 5px;
}

table.dataTable thead .sorting_asc_disabled {
    background-image: none !important;
}

table.dataTable thead .sorting_desc_disabled {
    background-image: none !important;
}

/* Estilos para VISOR */
.visor .text-center {
	color: var(--colorApp);
}

.visor .form-control {
	background-color: #fff;
}

.visor .navbar-brand  img {
	height: 90px;
	width: auto;
}

/* Estilos en botones en input-group-append */
.btn-append {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn-outline-colorpp.btn-append,
a.btn-outline-colorpp.btn-append,
.btn-outline-colorpp.btn-append:hover,
.btn-outline-colorpp.btn-append:focus,
a.btn-outline-colorpp.btn-append:hover,
.btn-colorpp.btn-append,
a.btn-colorpp.btn-append,
.btn-colorpp.btn-append:hover,
.btn-colorpp.btn-append:focus,
a.btn-colorpp.btn-append:hover,
.btn-outline-colorpp2.btn-append,
a.btn-outline-colorpp2.btn-append,
.btn-outline-colorpp2.btn-append:hover,
.btn-outline-colorpp2.btn-append:focus,
a.btn-outline-colorpp2.btn-append:hover,
.btn-colorpp2.btn-append,
a.btn-colorpp2.btn-append,
.btn-colorpp2.btn-append:hover,
.btn-colorpp2.btn-append:focus,
a.btn-colorpp2.btn-append:hover {
	border-radius: 0 .25rem .25rem 0 !important;
	border-radius: 0 .25rem .25rem 0 !important;
}

/* -------------------Spinner ---------------------*/
.contenedor-loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background: rgba(80, 80, 80, 0.5);
}

.contenedor-loader:before {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.loader {
	position: absolute;
	top: 30%;
	left: 45%;
	z-index: 10000000;
	border: 26px solid #d4d4d4;
	border-top: 26px solid var(--colorSec);
	border-radius: 50%;
	width: 220px;
	height: 220px;
	-webkit-animation: spin 2s linear infinite;
			animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {
	  -webkit-transform: rotate(0deg);
			  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
			  transform: rotate(360deg);
	}
  }

  @keyframes spin {
	0% {
	  -webkit-transform: rotate(0deg);
			  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
			  transform: rotate(360deg);
	}
  }

  /*********************** PARA LOS CHECKBOX CON ICONO E INFORMACIÓN *****************************/
  .checkbox_informacion {
	padding: 0;
	margin: 0;
  }

  .checkbox_informacion input[type=checkbox] {
	position: absolute;
	left: 15px;
	bottom: 14px;
	width: 13px;
}

.checkbox_informacion label{
	margin-left: 30px;
}