/*=============================================
Color personalizado
=============================================*/
.bg-purple, .btn-purple{
	background-color: #727cb6;
	color:white;
}

.card-purple{
	border-top: 3px solid #727cb6;
}

.text-purple{
	color:#727cb6;
}

.containers{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.container1{
	grid-column: 2/3;
	grid-row: 1/8;
}
.boxtop{
	border-top: none;
}
/*=============================================
Deslizador de videos
=============================================*/

.slide-area li a figure{
	position: relative;
}

.slide-area li a figure.activado::before{
	position:absolute;
	content: "\f144";
	font-family: "Font Awesome 5 Free";
	font-size:2em;
	color:white;
	text-align:center;
	width: 46px;
	line-height: 46px;
	background: rgba(0,0,0,.7);
	top:50%;
	margin-top: -23px;
	left:50%;
	margin-left: -23px;
	border-radius:100%;
	z-index:1;
}

.slide-area li a figure.desactivado::before{
	position:absolute;
	content: "Activar suscripción";
	font-size:18px;
	color:white;
	text-align:center;
	width: 200px;
	line-height: 70px;
	background: rgba(0,0,0,.7);
	top:50%;
	margin-top: -35px;
	left:50%;
	margin-left: -100px;
	border-radius:10px;
	z-index:1;
}


.slide-area li a figure.activado img{
	opacity:1;
}

.slide-area li a figure.desactivado img{
	opacity:.5;
}

/*=============================================
Formulario SEXO
=============================================*/
input[type="checkbox"]{
	display:none;
}

label[for="sexo"] span{
	display:inline-block;
	width:20px;
	height:20px;
	background:#E9ECEF;
	vertical-align:middle;
	border-radius:100%;
	margin-right: 5px;
	border:1px solid #aaa;
	cursor:pointer;
}



#signatureparent{
	width:300px; 
	border-bottom:2px solid #333;
}

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flexbox .items {
    padding: 10px;
}
.d-none {
    display: none;
}
.mr-1 {
    margin-right: 5px!important;
}
.fy-entidad {
    color: black;
    display: inline-block;
    padding: 6px 5px;
    border: 1px solid #d2d6de;
    border-radius: 2px;
}
/* colores asider */

:root {
    --color-green: #017B00;
    --color-beige: #CEAC6D;
    --color-orange: #FFA500;
}

.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: #222d32;
    background: var(--color-green);
}
.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a {
    color: #fff;
    background: var(--color-beige);
}
.skin-blue .sidebar-menu>li.active>a {
    border-left-color: var(--color-green);
}

.skin-blue .main-header .logo {
    background-color: var(--color-green); 
    color: #fff;
    border-bottom: 0 solid transparent;
}
.skin-blue .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: var(--color-green);
}
.skin-blue .main-header .logo:hover {
    background-color: var(--color-green);
}

.skin-blue .main-header .navbar {
    background-color: var(--color-green);
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--color-green);
}

.main-sidebar {
    padding-top: 0;
}

.main-sidebar img {
    padding: 10px 0px;
    max-width: 60px;
    text-align: center;
    margin: 0 auto;
}
.btn-green {
    background-color:  var(--color-green);
    color: #fff;
}
.btn-green:hover {
    color: #fff;
    border: 1px solid #0b520a;
}

.btn-orange {
    background-color:  var(--color-orange);
    color: #fff;
}
.btn-orange:hover {
    color: #fff;
    border: 1px solid #af7100;
}
.btn-info {
    background-color:  var(--color-beige);
    border-color: var(--color-beige);
}
.btn-info:hover, .btn-info:active, .btn-info.hover {
    background-color: #DEC79D;
    border-color: var(--color-beige);
}
.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover {
    background-color: #DEC79D;
    border-color: var(--color-beige);
}
.btn-info.focus, .btn-info:focus {
    background-color: #DEC79D;
    border-color: var(--color-beige);
}

#consulta-por-fechas, #consulta-por-years {
    align-items: center;
}
#consulta-por-fechas .items {
    padding: 0 10px;
}
#consulta-por-fechas .items:first-child, #consulta-por-fechas .items:last-child {
    padding: 0;
}
#consulta-por-years .items {
    padding: 0;
}
#consulta-por-years .items:first-child {
    padding-right: 10px;
}
.contenedor-tipo-fechas input {
    margin: 5px;
}
.contenedor-tipo-fechas .titulo-tipo-fechas {
    display: block;
}
#contenedorNotificaciones {
    width: 280px;
    max-height: 300px;
    overflow-y: scroll;
    background: var(--color-green);
    color: #fff;
}
#contenedorNotificaciones ul{
    border-bottom: 1px solid #e8d6d6;
    list-style: none;
    padding: 5px;
    color: #fff;
}

#contenedorNotificaciones  a:hover {
    background: var(--color-beige);
}

.contenedor-tabla-semaforizada {
    width: 100%;
    height: 86%;
    position: absolute;
    z-index: 2000;
   
}

/* Estilos para motores Webkit y blink (Chrome, Safari, Opera... )*/

#contenedorNotificaciones::-webkit-scrollbar {
    -webkit-appearance: none;
}

#contenedorNotificaciones::-webkit-scrollbar:vertical {
    width:10px;
}

#contenedorNotificaciones::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
} 

#contenedorNotificaciones::-webkit-scrollbar:horizontal {
    height: 10px;
}

#contenedorNotificaciones::-webkit-scrollbar-thumb {
    background-color: var(--color-beige);
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

#contenedorNotificaciones::-webkit-scrollbar-track {
    border-radius: 10px;  
}

.documento-vencido {
    background: red!important;
}
.documento-pendiente {
    background: orange!important;
}
.importe-total {
    display: inline; 
    margin-left: 10px;
    font-size: 20px;
}
.importe-total span {
    font-weight: 600;
    margin-left: 10px;
}
.btn-green {
    background: var(--color-green);
}


.aligned-row {
    display: flex;
    flex-flow: row wrap;
}
.aligned-row::before {
    display: block;
}
button.buttons-html5 {
    background: #fafafa;
    border-color: #dddddd;
    color: #555;
}
button.buttons-html5:hover {
    background-color: #eee !important;
    border-color: #dddddd !important;
    color: #777 !important;
}