.container{
    height: 70vh;
}

.container.index{
    height: 90vh;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.container.index a{
    font: 300 18px "poppins";
    padding: 10px 20px;
}

.login{
    margin: auto;
    padding: 20px;
    border: solid 2px #202020;
    border-radius: 10px;
    width: 500px;
    height: auto;
    margin-top: 20%;
    margin-bottom: 20%;
}

.table{
    margin-bottom: 50px;
    font: 400 13px "poppins";

}

.table th{
    border: solid 1px #fff;
    text-align: center;
    color: #fff;
    background-color: #202020;
    font: 400 13px "poppins";
    line-height: 100%;

}

.table_users h5{
    margin-bottom: 15px
}

.table_transactions h5{
    margin-bottom: 15px
}


.table td{
    text-align: center;    
    border: dashed 1px #727272;
    padding: 6px;

}

.table .td_important{
    background-color: #deefef;
}

.card{
    text-align: left;
}

/* --- General ---- */

nav {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 4px #202020;
    height: 10vh;
    padding: 10px;
    align-items: center ; 
    align-content: center;
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 1;

 }

li{
    margin: 0;
    gap: 10px;
    display: flex;
    margin-left: 5px;
}

nav img{
    width: 220px;
}


.btn {
    background-color: #202020;
    color: #fff;
    font: 400 13px "poppins";
}

.btn:hover{
    background-color: #fff;
    color: #202020;
    border: solid 1px #202020;
    font: 500 13px "poppins";
}

.btn-outline {
    background-color: #fff;
    color: #202020;
    font: 400 13px "poppins";
    border: solid 1px #202020;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    padding: 5px;

}

.btn-outline:hover{
    background-color: #202020;
    color: #fff;
    font: 500 13px "poppins";
}

p{
    line-height: 100%;
    margin-bottom: 3px;
}

h5{
    font: 600 16px "poppins";
    line-height: 100%;
    margin-bottom: 7.5px;
    margin-top: 2.5px;
    text-align: center;
}


/* cuadro de notificación */

.toast img{
    width: 30px;
}

.toast p{
   font: 400 15px "poppins";
   text-align: center;
}

.toast h5{
    font: 500 15px "poppins";
    line-height: 100%;
 }

 .panel_general{
    margin-top: 2vh;
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 50px;
    height: auto;
    margin-bottom: 15vh;
}

.col_tc{
    gap: 10px;
    display: flex;
    flex-direction: column;
    border: solid 1px #202020;
    border-radius: 10px;
    padding: 30px;
}

.col_tc h5{
    font: 500 20px "poppins";
}

.col_tc_head{
    display: flex;
    justify-content: space-between;
}

.view_tc{
    padding-left: 10%;
    padding-right: 10%;

}

.tc_container{
    justify-content: space-between;
    display: flex;
    margin-bottom: 5px;
}


.resumen_container a{
    justify-content: center;
    display: flex;
    gap: 10px;
    padding: 17.5px;
}


.resumen_container span{
    font: 500 20px "poppins";
    line-height: 100%;
}

.cuadro_title h5{
    border: solid 1px #202020;
    padding: 10px;
    border-radius: 5px;
}



.bienvenida{
    margin-top: 12vh;
    z-index: 0;
    font: 700 25px "poppins"
}

/*************************/
/*     01. Preloader     */
/*************************/
.spinner-wrapper {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:aliceblue;
}

.spinner_img{
	width: 60px;
	position: absolute;
	top: 44.5%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	margin: -30px 0 0 -30px; /* is width and height divided by two */ 
	text-align: center;
	border: none;
	box-shadow: 0 0 0 none;
}

.spinner {
	position: absolute;
	top: 50%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	width: 3.75rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */ 
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background-color: #202020;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}