/*
Theme Name: SmartHome
Theme URI: https://
Description: Tema para SmartHome
Version: 4.0
Author: ItBoom Digital
Author URI: itboom.co
*/

	/* Principal */
	
	@import url('css/api.css');/* Plantilla base */
	@import url('css/color.css'); /* Skin */
	@import url('css/body.css');/* Active Skin*/

	#loadButton {
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
	}

	#loading-container {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.loader {
		border: 16px solid #f3f3f3; /* Light grey */
		border-top: 16px solid var(--color1); /* Blue */
		border-radius: 50%;
		width: 120px;
		height: 120px;
		animation: spin 2s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.companyColor {
		color: var(--color1);
	}

	.checkbox-container {
		display: flex;
		align-items: center;
		padding: 20px;
		color: #616161;
	}

	.boton {
		color: white;
		background-color: var(--color1);
		border-radius: 10px;
		padding: 2%;
		border: 2px Solid white;
		font-weight: bold;
		height: fit-content;
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.boton:hover {
			color: var(--color2);
			border: 2px Solid var(--color1);
			cursor: pointer;
			background-color: white;
			font-weight: bold;
		}

	.boton2 {
	color: white;
	background-color: var(--color1);
	border-radius: 10px;
	padding: 3%;
}

	.boton2:hover {
		color: var(--color2);
		font-weight: bold;
		border: 2px Solid var(--color1);
		cursor: pointer;
		background-color: white;
	}

	.text-mouse:hover {
		color: var(--color1);
		font-weight:bold;
	}

	.txtIdentification {
		padding: 20px;
		margin: 10px 0;
		border: #ddd 2px solid;
		border-radius: 12px;
		width: 80%;
	}

	.selectable {
		margin: 20px;
		background-color: #fff;
		font-size: 1.5em;
		cursor: pointer;
		padding: 20px;
	}

	.selectable.selected {
		box-shadow: 0 0 20px 5px var(--color1);
		outline: none; /* Remove the default outline on focus */
		border-radius: 10px;
	}

	.four-columns {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		list-style: none; /* Elimina los puntos de la lista */
		padding: 0;
		margin: 0;
	}

	.four-columns li {
		box-sizing: border-box; /* Incluye el padding y el border en el tamaņo total del elemento */
	}

	.fadeinDown {
		animation: fadeInDown 500ms ease-in-out;
	}

	@keyframes fadeInDown {
		0% {
			opacity: 0;
			transform: translateY(-40px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.whatsapp {
		float: right;
		position: fixed;
		right: 0%;
		top: 70%;
		z-index: 900;
		font-size: 8px;
	}

	.tblNegociation {
		width: 100%;
		border-radius: 0.5rem;
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20);
		padding: 2%;
		font-size: 12px;
	}

	.tdStylefont {
		text-align: right;
		padding: 1%;
		font-size: 13px;
		width: 25%;
	}

	.floating-icon {
            width: fit-content;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: fixed;
            z-index: 900;
            top: 65%;
			right:0%;
        }

            .floating-icon img {
                width: 30px;
                height: 30px;
            }

        .sub-icons {
            position: fixed;
            top: 54%;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: 900;
			right:0%;
        }

        .sub-icon {
            width: 120px;
            height: 33px;
            display: flex;
            justify-content: right;
            align-items: center;
            cursor: pointer;
			text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white, 1px 0 0 white, -1px 0 0 white, 0 1px 0 white, 0 -1px 0 white;
        }

            .sub-icon img {
                width: fit-content;
                height: 33px;
            }

        .show {
            display: flex;
            animation: slideUp 0.3s ease-out;
        }

        .hide {
            animation: slideDown 0.3s ease-in;
            display: flex;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(33px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(33px);
            }
        }