* {
	user-select: none;
}

body {
    background-color: rgb(24, 26, 27);
    background-repeat: no-repeat;
    background: url(../../assets/images/wallaper.jpg) no-repeat center center fixed;
    background-size: 100% 100%;
    margin: 0; /* Agregamos esto para evitar el margen predeterminado del body */
}

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

.absolute {
	position: absolute;
}

.space {
	margin-bottom:15px;
}


.containerGame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 928px;
    border: 3px solid rgba(0, 0, 0, 0.8);
    height: 555px;
    background: url(../../assets/images/123.jpg) no-repeat center center;
    background-size: 100% 100%;
}

.btn-egyptian {
    background-color: #DAA520; /* Color dorado */
    color: #000; /* Texto en negro */
    border: 2px solid #B8860B; /* Borde dorado oscuro */
    /* font-family: 'Papyrus', sans-serif; /* Fuente estilo egipcio */ 
    /* font-size: 20px; /* Tamaño de fuente */ 
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cursor de mano */
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 10px #FFD700; /* Brillo dorado */
    text-shadow: 1px 1px 2px #000; /* Sombra de texto */
    border-radius: 10px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Transición suave */
}

.btn-egyptian:hover {
    background-color: #FFD700; /* Color dorado más claro al pasar el mouse */
    box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700; /* Mayor brillo */
    transform: scale(1.1); /* Aumenta de tamaño al pasar el mouse */
}

.btn-egyptian:active {
    background-color: #B8860B; /* Color dorado oscuro al hacer clic */
    box-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700; /* Menor brillo */
    transform: scale(1.05); /* Disminuye un poco al hacer clic */
}

.btn-egyptian.disabled {
    background-color: #ccc; /* Color de fondo gris para indicar que está deshabilitado */
    color: #999; /* Color de texto gris */
    border: 2px solid #999; /* Borde gris */
    cursor: not-allowed; /* Cambiar el cursor a 'no permitido' */
    box-shadow: none; /* Eliminar el efecto de sombra */
    text-shadow: none; /* Eliminar la sombra del texto */
}

.btn-egyptian.disabled:hover,
.btn-egyptian.disabled:active {
    background-color: #ccc; /* Mantener el color de fondo gris al pasar el mouse o al hacer clic */
    box-shadow: none; /* Mantener el efecto de sombra eliminado */
    transform: none; /* Mantener el tamaño original */
}



/* Register Panel Class */
.gui-register-panel {
    background-color: black; 
    opacity: 0.7;
    width: 700px;
    height: 450px;
    border-radius: 20px;
    display: none;
    padding: 15px;
}

.gui-register-form {
    /* background-color: white;  */
    margin-top: 21px;
    width: 380px;
    height: 150px;
    border-radius: 20px;
    /* padding: 15px; */
}

.register-panel-label-info {
	opacity: 1;
	color:white;
	margin-top:1px;
	margin-bottom:5px;
	font-size:20px;
}


.input-gui-register-form {
	width: 300px;
	height:20px;
	padding: 6px;
	border: none;
	border-bottom: 2px solid #333;
	outline: none;
	font-size: 16px;
	border-radius:11px;
	transition: border-bottom-color 0.3s ease;
	margin-top:3px;
	margin-bottom:3px;
}

.custom-select {
    width: 250px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    background-image: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}



/* Login Panel Class */

.gui-login-panel {
	background-color: black; 
	opacity: 0.7;
	width:400px;
	height:350px;
	border-radius:20px;
	display:none;
	padding:15px;
}


.login-panel-label-info {
	opacity: 1;
	color:white;
	margin-top:1px;
	margin-bottom:1px;
	font-size:20px;
}

.login-messagetext-ajax {
	margin-top:3px;
	margin-bottom:3px;
	color:white;
	font-size:20px;
}

.gui-login-form {
	margin-top:21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width:380px;
	height:150px;
	border-radius:20px;
	padding:15px;
}

.input-gui-login-form {
	width: 300px;
	height:20px;
	padding: 6px;
	border: none;
	border-bottom: 2px solid #333;
	outline: none;
	font-size: 16px;
	border-radius:11px;
	transition: border-bottom-color 0.3s ease;
	margin-top:3px;
	margin-bottom:3px;
}

.buttons-login-form { 
	margin-top:8px;
	margin-bottom:8px;
}

.text {
	font-size: 20px;
	color:red;
	font-weight: bold; /* Añade grosor al texto */
}