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

:root {
    /* Variables Globales */
    --color_background_dark: #0099ff;
    --color_background_light: #ffffff;
    --color_font: rgb(20, 20, 20);

    --color_font_dark: #0099fe;
    /*--color_font_dark: #2C3E50;*/
    --color_font_light: #ffffff;

    /* Menu Hamburguesa */
    --hamb_background: #336E7B;
    --hamb_color_font: #ffffff
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Karla', sans-serif;
}

/* Loading */
#loading {
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
	font-size: 30px;
}

input, label, button {
	margin-bottom: 0px !important;
}

.inputerror {
	border: 1px solid red !important;
}

.msjerror {
	width: 100%;
	font-size: 11px;
	color: red;
}

.verpass {
	position: relative;
	top:55px;
	left:275px;
	color: rgb(134, 134, 134);
	cursor: pointer;
}

.contenedorcaptcha {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cardsugerencia span {
	font-size: 12px;
	color: rgb(134, 134, 134);
}

.apexcharts-menu-icon {
	display:none !important; 
}

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

/* Notebook - Laptop */
@media only screen  and (min-width : 769px) {
	
	/* Login CSS */
	.contenedorlogin {
		height: 100vh;
		background-image: url("../imagenes/loginfondo.jpg");
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}

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

	.logoempresa img {
		/*width: 90%;*/
	}

	.cardlogin {
		max-width: 330px;
		max-width: 350px;
		min-width: 300px;
		background-color: var(--color_background_light);
		border-radius: 5px;
		box-shadow: 0 4px 7px 0px rgba(0,0,0, 1);
		/*padding: 20px 15px 0px 15px;*/
	}
	.divCardlogin{
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		/*background-color: yellow;*/
		/*padding: 20px 15px 0px 15px;*/
		padding: 20px 25px 0px 25px;
	}

	.logintitulo {
		text-align: center;
		font-weight: bold;
		color: var(--color_font_dark);
		font-size: 22px;
	}

	.btnlogin {
		display: flex;
		justify-content: center;
	}

	/* Listar Contratos */
	.contratos {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main {
		display: flex;
		width: 100%;
	}

	/* Menu */
	.sidebar {
		width: 275px;
		transition: width 0.6s;
		background: rgb(0, 153, 255);
		background: linear-gradient(180deg, rgba(0, 153, 255, 1) 13%, rgba(34,49,63,1) 100%);
		min-height: 100vh;
		max-height: 100%;
	}

	.desaparecer {
		width: 70px;
		transition: width 0.6s;
	}

	.menu {
		position:fixed;
	}

	.menu .item {
		width: 100%;
		height: 60px;
		display: flex;
		cursor: pointer;
	}

	.item:hover {
		background-color: rgba(255,225,255, 0.050);
	}

	.item:hover .iconoitem i {
		color: var(--color_font_dark);
	}

	.iconoitem {
		width: 30px;
		height: 30px;
		margin: 10px;
		padding: 5px;
		border: 1px solid rgba(255,225,255, 0.2);
		border-radius: 3px;
		background-color: rgba(255,225,255, 0.050);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconoitem i {
		color: var(--color_font_light);
		font-size: 22px;
	}

	.textoitem {
		font-size: 13px;
		text-align: left;
		text-transform: uppercase;
		color: var(--color_font_light);
		display: flex;
		align-items: center;
	}

	/* Cabecera */
	.cabecera {
		width: 100%;
		height: 80px;
		box-shadow: 5px 2px 5px rgb(0 0 0 / 10%);
		justify-content: space-evenly;
		position: fixed;
		background-color: white;
		z-index: 999;
	}

	.datosempresa {
		height: 80px;
		background-color: var(--color_background_dark);
	}

	.hamburguesa {
		height: 40px;
		width: 40px;
		position:relative;
		top: 10px;
		left: -20px;
		background-color: var(--color_background_light);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		cursor: pointer;
	}

	.hamburguesa i {
		font-size: 22px;
	}

	.datosclientes {
		width: 100%;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.bienvenidacliente {
		margin-top: 15px;
		font-size: 20px;
		font-weight: bold;
		color: var(--color_font_dark);
	}

	.infocliente {
		max-width: 250px;
		color: var(--color_font_dark);
		font-size: 12px;
		font-weight: 700;
		position: relative;
		left: 41px;
		top: -5px;
		display: flex;
		justify-content: space-between;
	}

	/* Contenido */
	.contenido {
		width: 100%;
		background-color: white;
	}

	.datoscontrato {
		margin-left: 50px;
		width: 90%;
		padding: 5px;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0, 0.1);
	}

	.datoscontrato span {
		font-size: 12px;
	}

	.contenedor {
		width: 100%;
		margin-top: 100px;
		display: flex;
		justify-content: center;
		overflow-y: hidden;
	}

	.card {
		width: 90%;
		padding: 8px;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0, 0.1);
		box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
		margin-bottom: 20px;
	}

	.contenedorhome {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.cardhome {
		width: 50%;
		margin: 10px;
	}

	.cardpassword {
		min-width: 300px;
		max-width: 300px;
	}

	.cardtabla {
		width: 90%;
		padding: 25px;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0, 0.1);
		box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
	}

	.cardtitle {
		width: calc(100% - 5px);
		height: 30px;
		background-color: #eee;
		display: flex;
		align-items: center;
		color: var(--color_font_dark);
		font-weight: 600;
		padding-left: 5px;
		border-radius: 3px;
		margin-bottom: 5px;
	}

	.cardcontenido {
		height: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#btnPagoenLinea {
		margin-top: 10px;
	}

	.cardcontenido i{
		font-size: 40px;
	}

	.cardcontenido .saldototal {
		font-size: 3rem;
		font-weight: 700;
		margin-left: 10px;
	}

	.texto {
		font-size: 1rem;
		padding-left: 5px;
	}

	/* Gráfico de Consumos */

	/* Password */
	label {
		font-size: 14px;
		font-weight: 500;
		color: var(--color_font_dark);
	}

	.passbtn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.captcha {
		margin-bottom: 10px;
	}

	/* Convenios CSS */
	.noconvenio {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.noconvenio span {
		font-weight: bold;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	/* Documentos */
	.pdf {
		cursor: pointer;
		color: red;
	}

	th {
		text-align: center !important;
	}

	tr:nth-child(even) {
		background-color: #fdfdfd;
	}

	td {
		padding: 10px 4px !important;
	}

	/* Contenedor Success Password */
	.contenedorsuccess {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cardsuccess {
		border: 1px solid rgba(0,0,0, 0.1);
		box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
		height: 200px;
		border-radius: 10px;
		display: flex;
		background-color: white;
	}

	.imgsuccess {
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #aae0fa;
	}

	.imgerror {
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dbfde8;
	}

	.textosuccess {
		width: 350px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.textosuccess i {
		padding-left: 10px;
		color: #328a17;
		font-size: 18px;
	}
}
    .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
        letter-spacing: .0rem;
    }
/* Mobile CSS */
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {

    .solicitud .cliente {
        display: flex;
        flex-direction: column;
    }

    input[type="text"], textarea , select, input[type="email"] {
        width: 100%;
    }

    .lecturas .cliente {
        display: flex;
        flex-direction: column;
    }

    .lectura-contenedor {
        display: flex;
        flex-direction: column;
        border: none;
    }

    .card {
        width: 100%;
        padding: 5px;
        border-radius: 3px;
        border: 1px solid rgba(0,0,0, 0.1);
        box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
        margin-bottom: 20px;
    }


	/* Login CSS */
	.contenedorlogin {
		height: 100vh;
		background-image: url("../imagenes/loginfondo.jpg");
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cardlogin {
		max-width: 330px;
		min-width: 300px;
		background-color: var(--color_background_light);
		border-radius: 5px;
		box-shadow: 0 4px 7px 0px rgba(0,0,0, 1);
		/*padding: 30px 15px 0px 15px;*/
	}
	.divCardlogin{
		padding: 30px 15px 0px 15px;
		/*background-color: black;*/
	}

	.logintitulo {
		text-align: center;
		font-weight: bold;
		color: var(--color_font_dark);
		font-size: 18px;
	}

	.btnlogin {
		display: flex;
		justify-content: center;
	}

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

	.logoempresa img {
		width: 80%;
	}

	/* Listar Contratos */
	.contratos {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button {
		height: 31px !important;
		line-height: 30px !important;
		padding: 0 15px !important;
	}

	.main {
		display: flex;
		width: 100%;
	}

	/* Menu */
	.sidebar {
		width: 60px;
		transition: width 0.6s;
		background: rgb(0,153,255);
		background: linear-gradient(180deg, rgba(0, 153, 255, 1) 13%, rgba(34,49,63,1) 100%);
		min-height: 100vh;
		max-height: 100%;
	}

	.desaparecer {
		width: 315px;
		transition: width 0.6s;
	}

	.banner {
		display: none;
	}

	.menu {
		position:fixed;
	}

	.menu .item {
		width: 100%;
		height: 40px;
		display: flex;
		cursor: pointer;
	}

	.item:hover {
		background-color: rgba(255,225,255, 0.050);
	}

	.item:hover .iconoitem i {
		color: var(--color_font_dark);
	}

	.iconoitem {
		width: 25px;
		height: 25px;
		margin: 5px;
		padding: 3px;
		border: 1px solid rgba(255,225,255, 0.2);
		border-radius: 3px;
		background-color: rgba(255,225,255, 0.050);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconoitem i {
		color: var(--color_font_light);
		font-size: 16px;
	}

	.textoitem {
		font-size: 10px;
		text-align: left;
		text-transform: uppercase;
		color: var(--color_font_light);
	}

	.novertextoitem {
		display: none;
	}

	.vertextoitem {
		display: flex;
		align-items: center;
	}

	/* Cabecera */
	.cabecera {
		width: 100%;
		box-shadow: 5px 2px 5px rgb(0 0 0 / 10%);
		position: fixed;
		background-color: white;
		z-index: 999;
		justify-content: space-evenly;
	}

	.datosempresa {
		height: 80px;
		background-color: var(--color_background_dark);
	}

	.hamburguesa {
		height: 35px;
		width: 35px;
		position:fixed;
		top: 10px;
		left: 5px;
		background-color: var(--color_background_light);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		cursor: pointer;
	}

	.hamburguesa i {
		font-size: 18px;
	}

	.datosclientes {
		width: 100%;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.bienvenidacliente {
		position: relative;
		left: 15px;
		margin-top: 10px;
		font-size: 12px;
		font-weight: bold;
		color: var(--color_font_dark);
		text-overflow: ellipsis;
	}

	.infocliente {
		max-width: 200px;
		color: var(--color_font_dark);
		font-size: 12px;
		font-weight: 600;
		position: relative;
		left: 15px;
		top: -5px;
		display: flex;
		justify-content: space-between;
	}

	/* Contenido */
	.contenido {
		width: 100%;
		background-color: white;
	}

	.viewForSize {
		display: none;
	}

	.datoscontrato {
		margin-left: 50px;
		width: 90%;
		padding: 5px;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0, 0.1);
	}

	.datoscontrato span {
		font-size: 12px;
	}

	.contenedor {
		width: 100%;
		margin-top: 70px;
		display: flex;
		justify-content: center;
		overflow-y: hidden;
	}

	.card {
		padding: 3px;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0, 0.1);
		box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
		margin-bottom: 20px;
	}

	.cardhome {
		min-width: 300px;
		max-width: 300px;
	}

	.cardtabla {
		width: 90%;
		padding: 5px;
		border-radius: 3px;
		border: 1px solid rgba(0,0,0, 0.1);
		box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
	}

	.cardtitle {
		width: calc(100% - 5px);
		height: 28px;
		background-color: #eee;
		display: flex;
		align-items: center;
		font-size: 12px;
		font-weight: 500;
		color: var(--color_font_dark);
		padding-left: 5px;
		border-radius: 3px;
	}

	.cardcontenido {
		height: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#btnPagoenLinea {
		margin-top: 10px;
	}

	.cardcontenido i{
		font-size: 30px !important;
	}

	.cardcontenido .saldototal {
		font-size: 2rem;
		font-weight: 700;
		margin-left: 5px;
	}

	.texto {
		font-size: 1rem;
	}

	.table {
		font-size: 12px;
	}

	.text-center {
		text-align: center;
	}
	
	.text-right {
		text-align: right;
	}

	/* Convenios CSS */
	.noconvenio {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.noconvenio span {
		font-size: 12px;
		font-weight: bold;
	}

	.pdf {
		font-size: 22px !important;
		color: red;
	}

	/* Password */
	label {
		font-size: 12px;
		color: var(--color_font_dark);
	}

	.passbtn {
		display: flex;
		flex-direction: column;
	}

	/* Contenedor Success Password */
	.contenedorsuccess {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cardsuccess {
		border: 1px solid rgba(0,0,0, 0.1);
		box-shadow: 0px 2px 5px 0 rgba(0,0,0, 0.1);
		height: 300px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: white;
	}

	.imgsuccess {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		width: 100%px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #aae0fa;
	}

	.imgerror {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		width: 100%px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dbfde8;
	}

	.textosuccess {
		width: 350px;
		height: 350px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.textosuccess i {
		padding-left: 10px;
		color: #328a17;
		font-size: 18px;
	}
}