@charset "utf-8";



t{font-weight: bold;color:chocolate}
m{font-weight: bold;color:#3a5998}
y{font-weight: bold;color:olive}
r{font-weight: bold;color:goldenrod}
g{font-weight: bold;color:dimgray}
k{font-weight: bold;color:darkred}







.katex {
	font-size: 1.1em !important
}

.input-yanyana .wrapper {
	flex-direction: row
}

.input-altalta .wrapper {
	flex-direction: column
}

.input-yanyana input:not(:last-child) {
	margin-right: 5px
}

.aralikli input:not(:first-child),
.input-altalta input:not(:first-child) {
	margin-top: 5px;
}

.btn-clear {
	padding: 2px 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	font-weight: 600;
	font-size: 14px;
	color: #5a5a5a;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2)
}

.btn-clear:hover {
	color: #457daa
}

.B01 {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	background-color:#89c403;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:8px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
	height: 48px;
	vertical-align: top;
	line-height: 32px;
}
.B01:hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#77a809;
}
.B01:active {
	position:relative;
	top:1px;
}

.B02 {
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	background-color:#c123de;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:32px;
	font-weight:bold;
	padding:8px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
	height: 48px;
	vertical-align: top;
	line-height: 32px;
}
.B02:hover {
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	background-color:#a20dbd;
}
.B02:active {
	position:relative;
	top:1px;
}
.B03 {
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	background-color:#f24537;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
    width:60px;
}
.B03:hover {
	background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
	background-color:#c62d1f;
}
.B03:active {
	position:relative;
	top:1px;
}

.cabecera{/* height:33px; *//* background-color: #6de18f; */text-align:left;background: linear-gradient(135deg, #2f2368, #2B0126);padding: 15px;border-radius: 12px 12px 0 0;margin: 0;position: relative;/* border: 1px solid #2c032a; */}    
#r_e{font-size:24px;color:darkblue;text-align:center;}

   

    
.input-container input {
	display: block;
	width: 100%;
	text-align: center;
	min-width: 0
}

.clear-div hr {
	margin-top: 5px;
	margin-bottom: 0;
	border: 0;
	border-top: 2px solid #e7e4e4
}




.input-altalta .wrapper {
	flex-direction: column;
	position: relative;
}


.btns-container textarea.giris {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	max-height: 500px;
	min-width: 50px;
	white-space: nowrap
}
.btns-container input:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 1px rgba(102, 175, 233, .6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 1px rgba(102, 175, 233, .6)
}
.btns-container label {
	margin: auto 5px auto auto;
	min-width: 100px
}

.btns-container.yazili label {
	margin: auto 5px auto auto;
	min-width: 180px
}

@media screen and (max-width:1450px) {
	.btns-container.yazili label {
		min-width: 130px
	}
}

.all-btns-wrapper .btns-container,
.all-btns-wrapper .btns-container .kesirlerle-islemler {
	margin-bottom: 0
}

.all-btns-wrapper .clear-div {
	margin: 0 auto 15px auto
}

.all-btns-wrapper .btns-container.uslu-kesir-bottom {
	margin-bottom: -25px
}
.all-btns-wrapper .btns-container.uslu-cont {
	margin-bottom: -25px
}

.btns-container.uslu-cont .btn-rand {
	margin-bottom: -16px
}

@media screen and (max-width:600px) {
	.btns-container.yazili label {
		min-width: 110px;
		font-size: 15px
	}

	.btns-container textarea.giris {
		max-width: 350px
	}
}

@media screen and (max-width:490px) {
	.btns-container.yazili label {
		min-width: 70px;
		font-size: 13px
	}

	.kesirlerle-islemler .wrapper {
		max-width: 100px
	}

	.all-btns-wrapper .btns-container.uslu-kesir-bottom {
		margin-bottom: -37px
	}

	.parantez {
		width: 38px;
		height: 128px
	}

	.all-btns-wrapper .btns-container.uslu-cont {
		margin-bottom: -30px
	}

	.btns-container.uslu-cont .btn-rand {
		margin-bottom: -10px
	}

	.uslu-islemler .wrapper {
		max-width: 120px
	}

}


@media screen and (max-width:400px) {


	.kesirlerle-islemler select {
		min-width: 25px;
		margin: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
		background-repeat: no-repeat;
		background-position-x: 120%;
		background-position-y: 50%;
		background-size: 12px 14px
	}

	.btns-container textarea.giris {
		max-width: 200px
	}
}

@media screen and (max-width:330px) {
	.rand-left {
		margin-left: 10px
	}

	.uslu-islemler .wrapper {
		max-width: 100px
	}
}

@media screen and (max-width:300px) {
	.kesirlerle-islemler .wrapper {
		max-width: 80px
	}

	.all-btns-wrapper .btns-container.uslu-kesir-bottom {
		margin-bottom: -30px
	}

	.all-btns-wrapper .btns-container.uslu-cont {
		margin-bottom: -25px
	}

	.btns-container.uslu-cont .btn-rand {
		margin-bottom: -5px
	}


}

.btns-container {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
	width: 100%
}

.btns-container.input-yanyana,
.btns-container.top-btn,
select.top-btn {
	-webkit-align-items: flex-start !important;
	align-items: flex-start !important
}

.btns-container.center-btn,
.btns-container.input-altalta,
select.center-btn {
	-webkit-align-items: center !important;
	align-items: center !important
}

.input-container {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-right: 7px;
	width: 100%;
	max-width: 350px;
}

.wrapper {
	max-width: 500px;
	margin: 0 auto;
	display: flex
}

.wrapper hr {
	display: block;
	width: 95%;
	border: 2px solid #353535;
}

.center {
	margin: 0 auto;
	text-align: center !important
}
#r_b, #r_c,#r_g, #r_f{font-size:18px;}
#r_h{font-size:24px; color:darkgreen;}
/* Modal overlay */
#resp_ {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999999;
	justify-content: center;
	align-items: center;
}

/* Modal content */
#resp_ .modal-content {
	background-color: #fff;
	text-align: center;
	width: 95%;
	max-width: 600px;
	max-height: 90vh;
	/*! overflow-y: auto; */
	border-radius: 20px 20px 8px 8px;
	/* box-shadow: 0px 10px 30px rgba(0,0,0,0.3); */
	position: relative;
	/* animation: modalSlideIn 0.3s ease-out; */
}

/* Animación de entrada del modal */
@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: scale(0.8) translateY(-50px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Botón de cerrar del modal */
#resp_ .modal-close {
	position: absolute;
	top: 10px;
	right: 15px;
	background: none;
	border: none;
	font-size: 35px;
	cursor: pointer;
	color: #f00;
	z-index: 1001;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/*! transition: all 0.2s ease; */
}

#resp_ .modal-close:hover {
	color: rgb(190, 2, 2);
}

/* Responsividad del modal */
@media screen and (max-width: 768px) {
	#resp_ .modal-content {
		max-width: 90%;
		border-radius: 15px;
	}
}

@media screen and (max-width: 480px) {
	#resp_ .modal-content {
		max-width: 95%;
		max-height: 95vh;
		border-radius: 15px;
	}
	
	.cabecera span {
		font-size: 18px !important;
	}
}
.cabecera span {
	font-size: 18px !important; color:white;
}
.r_cont{/*! padding: 15px; */width:95%;overflow-x: auto;margin: 0 auto;height: 470px;overflow-y: auto;}
#formu {
	display: inline-block;
	width: 98%;
	padding-bottom: 10px;
	background: linear-gradient(-45deg, #fcffff, #fff);
	margin: 0 auto !important;
	top: -1px;
	right: 0;
	left: 0;
	z-index: 100;
	border-radius: 0 50px;
	text-align: center;
	/*! margin: ; */
}

/* Estilos para inputs con números grandes y responsivos */
#formu .css-input {
	padding: 8px 12px;
	font-size: 2.5rem;
	/*! font-weight: bold; */
	border-width: 2px;
	border-color: #353535;
	background-color: #eee;
	color: #0d004a;
	border-style: solid;
	border-radius: 8px;
	box-shadow: 0px 0px 8px rgba(66,66,66,.75);
	text-align: right !important;
	height: 60px;
	min-height: 60px;
	width: 98%;
	max-width: 100%;
	box-sizing: border-box;
	transition: all 0.3s ease;
	margin-left: 13px;
}

#formu .css-input:focus {
	outline: none;
	border-color: #272727;
	box-shadow: 0px 0px 12px rgba(66,66,66,.75);
	transform: scale(1.02);
}

/* Responsividad para pantallas medianas */
@media screen and (max-width: 768px) {
	#formu .css-input {
		font-size: 2rem;
		height: 65px;
		min-height: 55px;
		padding: 6px 10px;
	}
}

/* Responsividad para pantallas pequeñas */
@media screen and (max-width: 480px) {
	#formu .css-input {
		font-size: 1.8rem;
		height: 60px;
		min-height: 50px;
		padding: 5px 8px;
	}
}

/* Responsividad para pantallas muy pequeñas */
@media screen and (max-width: 320px) {
	#formu .css-input {
		font-size: 1.2rem;
		height: 45px;
		min-height: 45px;
		padding: 4px 6px;
	}
}

.text-center p,
.text-center {
	text-align: center !important
}
.lresta{margin: 5px 0 0 0; width:105% !important; background:#333;}
.rsigno{min-width:auto;margin-right:100%;margin-left:-26px;/*! font-size:30px; */margin-top:-26px;margin-bottom:-7px;color:black;}
/* Estilo original de .css-input comentado para evitar conflictos con #formu .css-input */
/*
.css-input {
     padding: 5px;
     font-size: 35px;
     border-width: 1px;
     border-color: #CCCCCC;
     background-color: #f0efe8;
     color: #0a0763;
     border-style: solid;
     border-radius: 3px;
     box-shadow: 0px 0px 5px rgba(66,66,66,.75);
     text-align: right !important;
     height: 48px;
}
.css-input:focus {
     outline:none;
}
*/
#msA{text-align: center;}
.ocul{display:none !important;}
.B_rep_s{background: #73AD21;border-radius: 5px;padding:5px;color:white}
.btn-replay{text-decoration:none}
.rsigno{min-width:auto !important;margin-right:100% !important;/*! margin-left:-25px !important; */font-size: 28px;/*! margin-top:-10px !important; */margin-bottom:-7px !important;color:black;position: absolute;left: -12px;top: -30px;font-weight: bold;}
.rsfo{vertical-align: inherit;}

/* Contenedor para alinear los botones */
#formu .btns-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
}

/* Asegurar que los botones estén alineados */
#formu .B01,
#formu .B02 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Estilos para el loading */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 99999999;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.3s ease-in;
}

.loading-content {
	/* Eliminamos el fondo blanco y padding */
	text-align: center;
}

.loading-spinner {
	width: 60px;
	height: 60px;
	border: 5px solid rgba(255, 255, 255, 0.3);
	border-top: 5px solid #00ff88;
	border-right: 5px solid #00bfff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto;
	box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

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

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Estilos para el loading del modal */
.modal-loading {
	position: absolute;
	top: 150%;
	/*! right: 20px; */
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	left: 20px;
}

.modal-spinner {
	width: 25px;
	height: 25px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top: 3px solid #ffffff;
	border-right: 3px solid #580258;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.animation-controls{
	position: relative;
	background: #fff;
	padding: 9px 20px;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	max-width: max-content;
	height: 52px;
	/* display: flex; */
	align-items: center;
	gap: 8px;
	margin: 0 auto;
	width: 100%;
}