@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

*:focus,
button.btn.btn-buscartop:focus,
button.btn.btn-buscartop:active {
    outline: none;
}

* {
    font-family: 'roboto', sans-serif;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
    border: 0px solid #f00;
}

body {
    background:
        /*#f4f8f9*/ #fff;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

table thead {
    font-weight: bold;
}

/*
button.btn {
	padding: 10px;
    margin: 0;
    border-radius: 8px;;
    border: none;
	line-height:0;
	height:auto;
	display:inline-block
}
button.btn-nuevo { color:#fff; background:#090; margin-bottom:20px }
button.btn-grabar { color:#fff; background:#090; margin-bottom:20px }
*/

/**
ICONO NOTIFICACIONES
*/

#notificaciones {
    max-height: 305px;
    /* Define la altura máxima del menú de notificaciones */
    overflow-y: auto;
    /* Agrega el scrollbar vertical cuando el contenido excede la altura máxima */
}

.icon-container {
    position: relative;
}

.fa-bell {
    font-size: 25px;
}

.exclamation-icon {
    position: absolute;
    top: 24%;
    left: 40%;
    font-size: 16px;
    transform: translate(-40%, 50%);
    color: #72b0e0;
    z-index: 99;
}

#hay-notificaciones-nuevas-fondo {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    text-align: center;
    color: black;
    background-color: #72b0e0;
    transform: translate(60%, -70%);
    border-radius: 50px;
    /* 	  	display: none; */
}

#buscador {
    background: #f5f5f5;
    border-radius: 5px;
    margin-bottom: 25px;
    padding: 10px;
}

.saldo {
    font-size: 20px;
    font-weight: bold;
    color: #090;
}

h2.titbuscador {
    font-size: 16px;
    margin: 5px;
}

i[class='fas fa-trash'] {
    color: #eb8282;
}

i[class='fas fa-times'] {
    color: #eb8282;
}

i[class='fas fa-edit'] {
    color: #93b1cb;
}

footer {
    padding: 15px;
    text-align: right;
    padding-right: 30px;
    font-size: 12px;
    color: #666;
    border-top: 1px solid #ccc;
    margin-top: 50px;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 0px 10px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #3a3a3a;
    border: 0px solid #ddd;
    background: none;
}

.glyphicon-chevron-left:before {
    content: '\f0d9';
    font-family: 'Font Awesome 5 Pro';
}

.glyphicon-chevron-right:before {
    content: '\f0da';
    font-family: 'Font Awesome 5 Pro';
}

[type='number'].numeroPagina {
    width: 10rem;
    height: 2.5rem;
    margin-right: 1rem;
    padding: 0.5rem;
    text-align: center;
    background: #dddddd;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield;
}

div.paginado a:hover {
    background: none;
}

div.paginado #btn-importar:hover {
    background-color: #449d44;
}

.navbar {
    min-height: 80px;
}

ul.nav.navbar-nav > li > a {
    padding-top: 28px;
    padding-bottom: 27px;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: #e4e9eb;
    color: #444;
}

#menu-iconos {
    position: relative;
    top: 25px;
    left: -25px;
}

input[type='text'],
input[type='password'] {
    padding-left: 15px !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 10px 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.form-box {
    margin-top: 5%;
    padding: 0;
    background: #fff;
    -webkit-box-shadow: 0 0 10px 5px rgb(0 0 0 / 20%);
    box-shadow: 0 0 10px 5px rgb(0 0 0 / 20%);
}

.form-top {
    background: #fff;
    color: #ccc;
    padding: 0 10%;
}

div.fondologo > div {
    background: #fff;
}

.form-top {
    overflow: hidden;
    padding: 0 25px 0px 25px;
    background: #444;
    background: #fff;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    text-align: left;
}

.form-top h3 {
    font-size: 20px;
    color: #333;
}

.form-bottom {
    background: #fff;
    padding: 0 10% 7%;
    padding: 25px 25px 30px 25px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    text-align: left;
}

button#ingresar.btn,
button#btnRegistrar.btn {
    background: #81a361;
}

.form-bottom form button.btn {
    width: 100%;
}

.card.w-75 {
    background: #c7d5df;
    padding: 15px;
    border-radius: 5px;
}

.card.w-blue {
    background: #8dbddf !important;
}

.card.w-grey {
    background: rgb(197, 203, 201) !important;
}

.saldoOK {
    background: #f1a2a2;
    padding: 8px;
    border-radius: 5px;
    display: block;
    margin-top: 15px;
}

.clearl {
    clear: left;
}

h1.titSeccion {
    font: 500 20px 'roboto', sans-serif;
    margin-bottom: 20px;
    color: #666;
}

h1.titSeccion img {
    position: relative;
    top: -8px;
}

h1.titSeccion i {
    color: #ff5200;
}

.ico_listado {
    color: #090;
}

.ico_filtro {
    color: #069;
}

.p20 {
    padding: 20px;
}

.b10 {
    border: 10px solid #f0f0f0;
}

.mb15 {
    margin-bottom: 15px;
}

.mt10 {
    margin-top: 10px;
}

.fblanco {
    background: #fff;
    border-radius: 5px;
}

.ingreso {
    color: #090;
    font-weight: 500;
}

.egreso {
    color: #f00;
    font-weight: 500;
}

h1.tit1 {
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

ul.navbar-nav li.fecha {
    display: inline-block;
    padding-right: 10px;
}

thead {
    background: #d6eaef;
}

.infoUsuario {
    display: flex;
    align-content: center;
    justify-content: center;
}

.infoUsuario > div {
    height: 150px;
    border: 10px solid #f0f0f0;
    padding: 15px;
    border-radius: 15px;
    border-radius: 15px;
}

.infoUsuario > div span {
    font-size: 22px;
    font-weight: bold;
}

.infoUsuario > div:nth-child(1) {
    background: #385592;
}

.infoUsuario > div:nth-child(2) {
    background: #5470aa;
}

.infoUsuario > div:nth-child(3) {
    background: #107acc;
}

.infoUsuario2 > div {
    height: 150px;
    border: 10px solid #f0f0f0;
    padding: 15px;
}

.infoUsuario2 > div span {
    font-size: 22px;
    font-weight: bold;
}

.infoUsuario2 > div:nth-child(1) {
    background: #72b0e0;
}

.infoUsu {
    color: #fff;
}

@media (max-width: 480px) {
    #menu-iconos {
        width: 100%;
        position: absolute;
        left: 0;
        top: 18px;
    }

    li.usuario {
        text-align: right;
    }

    li.usuario a {
        padding-top: 0px !important;
        display: inline;
        top: 5px;
    }

    li.usuario .fa-user:before {
        font-size: 18px;
    }

    .navbar-nav {
        margin: 0;
    }

    .navbar {
        min-height: 70px;
    }

    div.navbar-collapse {
        margin-top: 20px;
    }

    ul.nav.navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    img.logo-movil {
        width: 100px !important;
    }

    button.navbar-toggle {
        top: 10px;
        background: none;
        border: none;
        right: 45px;
    }

    button.navbar-toggle:focus,
    button.navbar-toggle:hover {
        border: none;
        background: none;
    }

    h1.titSeccion {
        font-size: 16px;
    }

    h1.titSeccion img {
        width: 35px !important;
        top: -2px;
    }

    li.fecha {
        display: none !important;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        background: none !important;
    }

    li.usuario ul.dropdown-menu {
        background: #fff !important;
        position: relative !important;
        top: 28px !important;
    }

    div.fondologo > div {
        background: none;
    }
}

b.tit-contactos {
    background: #eee;
    display: block;
    padding: 10px;
    margin-bottom: 15px;
}

.month,
.decade,
.year,
.century {
    padding: 2px;
    cursor: pointer;
}

.month:nth-child(3n),
.decade:nth-child(3n),
.year:nth-child(3n),
.century:nth-child(3n) {
    margin-right: 20px;
    /* O el valor que desees para el espacio entre elementos */
}

/**************************/
/* MODAL verDetalleSolicitudCliente*/
.tbody-detalle-solicitud td {
    padding-bottom: 10px;
}

.tbody-detalle-solicitud td:first-child {
    padding-right: 18px;
}

/*************************/

/*** DASHBOARD ***/
div.dia {
    width: 15vw;
    margin: 1px;
    background: #fff;
    float: left;

    border-radius: 10px;
}

div.dia div.fecha {
    font-weight: bold;
    padding: 12px;
    text-align: center;
}

ul.connectedSortable {
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 4px;
    background: #fff;
    border-radius: 8px;

    border: 0px solid #ccc;
    padding: 10px;
    min-height: 500px;
    padding-top: 0;
}

ul.connectedSortable li {
    margin: 5px 0 !important;
    padding: 5px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    border: none;
}

ul.connectedSortable li span.tarea {
    font-weight: 600;

    border-bottom: 1px solid #f5f5f5;

    padding-bottom: 5px;

    margin-bottom: 5px;
}

ul.connectedSortable li span.tarea,
ul.connectedSortable li span.editar,
ul.connectedSortable li span.horario,
ul.connectedSortable li span.contacto {
    display: block !important;
}

li span.editar {
    text-align: right;
    font-size: 11.5px;
}

li span.editar i {
    border: 0px solid #ccc;
    padding: 4px;
    border-radius: 5px;
}

li span.editar i.fa-trash {
    color: #da6262;
}

li span.editar i.fa-pencil {
    color: #6b93a7;
}

span i.fa-clock,
span i.fa-user,
span i.fa-thumbtack,
span i.fa-project-diagram {
    color: #999;
}

li span.contacto,
li span.horario {
    font-size: 11px;
}

ul.connectedSortable li.aldia {
    background: #c1ebba;
}

ul.connectedSortable li.pasado {
    background: #fcffc3;
}

ul.connectedSortable li.pasado5 {
    background: #ffbdbd;
}

ul.connectedSortable li.recurrente {
    background: #e2e2e2;
} 

ul.connectedSortable li.apagada {
    background: #a9cee1;
} 

ul.connectedSortable li.baja {
    border: 3px solid #a9cee1;
}

ul.connectedSortable li.media {
    border: 3px solid #4295bf;
}

ul.connectedSortable li.alta {
    border: 3px solid #0025a3;
}

div.atrasadas,
div.atrasadas .connectedSortable {
    background: #fafbd7 !important;
}

#modalConfirm .modal-dialog {
    width: 400px;
}

#modalConfirm .modal-footer {
    text-align: center;
}

#modalEditar .close {
    position: absolute;
    right: 20px;
    top: 18px;
}

.infoUsuario2 > div, .infoUsuario2 > div.infoUsu2 {
    border: 10px solid #f0f0f0;
    padding: 15px;
    border-radius: 15px;
}

.infoUsuario2 > div span {
    font-size: 22px;
    font-weight: bold;
}

div.infoUsu2, div.col-md-3.infoUsu2 {
    background: #2476b2;
    color: #fff;
}

i.fa-comment-dots {
    float: left;
    padding-left: 0 !important;
}

.colorHoy,
.colorHoy .connectedSortable {
    background: #cedff1 !important;
}

div.moverSemana {
    font-size: 25px;
    text-align: right;
}

div.moverSemana i {
    margin-left: 10px;
    display: inline-block;
}

span.calendar i {
    color: #f00;
}

@media (max-width: 480px) {
    div.overflow {
        overflow-x: scroll;

        width: 100%;
    }

    div.overflow > div {
        width: 300%;
    }
}

/*** DASHBOARD ***/

/*** Fix que evita el padding-right al mostrar un modal o un mensaje ***/
body:not(.modal-open){
    padding-right: 0px !important;
}

/** Dashboard e Historial de Tareas **/
#contenedor-tareas-relacionadas-tareas {
    display: flex;
    flex-direction: column;
    min-height: 87%;
    overflow-y: auto;
}

.loader-relacionadas {
    transition: all 1s ease-in-out;
}

.loader-visible {
    display: block;
    filter: invert(10%) sepia(84%) saturate(4914%) hue-rotate(170deg) brightness(60%) contrast(200%);
    margin: auto;
    width: 100px;
}

.loader-invisible {
    display: none;
}

.tarea-relacionada {
    transition: all 1s ease-in-out;
    margin: 5px;
    padding: 0 5px;
    border: 1px solid #d2d2d2;
    background-color: rgb(244, 244, 244);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.tarea-relacionada:hover {
    cursor: pointer;
}

.mensaje-sin-tareas-relacionadas {
    text-align: center;
    margin: 5px 10px;
}

/** Tingle.js **/
.tingle-modal {
    overflow-y: auto !important;
    padding-top: 8vh;
}

/*************************/
/* SPINNER LOADER */
.spinner-loading {
    width: 48px;
    height: 48px;
    border: 5px solid #72b0e0;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* -----------------------------------------------
 * Alertas
 * --------------------------------------------- */
#alert-cantidad {
	background-color: #DC3545;
}

#alert-list {
    overflow-x: hidden;
    max-height: 50vh;
    overflow-y: hidden; /* Inicialmente ocultamos la barra de desplazamiento vertical */
    min-height: 20px;
}

#alert-list.scrollable {
    overflow-y: auto; /* Solo activamos la barra de desplazamiento cuando sea necesario */
}

@media (min-width: 768px) {
	#alert-list.alerta-notificacion {
		justify-content: flex-end !important
	} 

}

* COLOR AL POSICIONARSE SOBRE UN ALERTA */
.navbar-default .dropdown-menu.alert-drop .drop-content>li:hover {
	background-color: #e6e6e6;
}

.navbar-default .dropdown-menu.alert-drop .drop-content>li:last-child {
	border-bottom: none;
}


.alerta-notificacion {
	cursor: pointer;
	width: 95%;
	margin: 0px auto;
	margin-top: 2px;
	margin-bottom: 2px;
}

.alerta-notificacion-info:hover {
	background-color: #b8cfff;
	border-radius: 10px;
	overflow: hidden;
}