/*
	Estilos del sistema SUDI V4
	Elaborado por: Hector Hugo Acosta Garza
	Fecha: Julio 2019
		
	Menú
	
	A) FONTS.- Tipografías del sistema
	B) GENERAL.- html & body
	C) LOGIN
	D) INFO CONTAINER
	E) MAIN MENU
	F) LIST
	G) SUB CONTROLS
	H) CURTAIN
	I) MANAGE
	J) R-PANEL / COMMENTS
	K) REPORTS
*/

/* A) FONTS */

@font-face {
    font-family: 'sf_pro_textbold';
    src: url('../_fonts/sf-pro-text-bold-webfont.woff2') format('woff2'),
url('../_fonts/sf-pro-text-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sf_pro_textmedium';
    src: url('../_fonts/sf-pro-text-medium-webfont.woff2') format('woff2'),
url('../_fonts/sf-pro-text-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sf_pro_textregular';
    src: url('../_fonts/sf-pro-text-regular-webfont.woff2') format('woff2'),
url('../_fonts/sf-pro-text-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sf_pro_textsemibold';
    src: url('../_fonts/sf-pro-text-semibold-webfont.woff2') format('woff2'),
url('../_fonts/sf-pro-text-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sf_pro_textthin';
    src: url('../_fonts/sf-pro-text-thin-webfont.woff2') format('woff2'),
url('../_fonts/sf-pro-text-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* SUDI_ICONS */
.icon { display:inline-flex; font-size: .9em; align-items: center; }

.icon-sudi-2x { font-size:1.8em !important; }

/* B) GENERAL */

.radius_circle { border-radius: 50%; }
.radius_round { border-radius: 10%; }

/* COLORES Y TAMAÑOS DE LETRA */
.bg_red { background-color: var(--color-red) !important; } .bg_green { background-color: var(--color-green)  !important; } .bg_blue { background-color: var(--color-blue)  !important; } .bg_white { background-color: var(--color-white)  !important; } .bg_yellow { background-color: var(--color-yellow)  !important; } .bg_purple { background-color: var(--color-purple)  !important; }
.font_red { color: var(--color-red) !important; } .font_green { color: var(--color-green) !important; } .font_blue { color: var(--color-blue) !important; } .font_yellow { color: var(--color-yellow) !important; } .font_purple { color: var(--color-purple) !important; } .font_white { color: #FFF !important; } .font_black { color: #000 !important; }
.font_70 { font-size: 0.7em !important; } .font_80 { font-size: 0.8em !important; } .font_90 { font-size: 0.9em !important; } .font_100 { font-size: 1em !important; } .font_110 { font-size: 1.1em !important; } .font_120 { font-size: 1.2em !important; } .font_130 { font-size: 1.3em !important; } .font_140 { font-size: 1.4em !important; } .font_150 { font-size: 1.5em !important; } .font_160 { font-size: 1.6em !important; } .font_170 { font-size: 1.7em !important; } .font_180 { font-size: 1.8em !important; } .font_190 { font-size: 1.9em !important; } .font_200 { font-size: 2em !important; }
/* Loading */
	
		.loader_wrapper {
			margin: auto;
			text-align: center;
			display: block;
			width: 100%;
			}
		
		.sudi_loading {
		  	display: inline-block;
			/* padding: 30px 0px; */ 
				
		}
	
		.sudi_loading:before {
			content: " ";
			display: block;
			width: 30px;
			height: 30px;
			margin: 8px;
			border-radius: 50%;
			border: 6px solid #30b297;
			border-color: #cacaca transparent #cacaca transparent;
			animation: sudi_loading_a 1.5s linear infinite;
			
		}		

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

/* SUDI BTN */

.align-left { justify-content: start; }
.align-center { justify-content: center; }
.align-right { justify-content: end;}

.sudi_btn_container{ display: flex; justify-content: center; margin: 10px auto; flex-direction: column ; }
.sudi_std_btn {
	display: flex;
	height: 50px;
    border-radius: 5px;
    padding: 0px 10px;
    background-color: var(--bg-main-low);
    color: var(--text-main-high);
    cursor: pointer;
    align-content: center;
    margin: 5px auto;
	align-items: center;
	width: 90%;
}
	.sudi_std_btn i {
		display: inline-flex;
		opacity: .5;
    	font-size: 1.5em !important;
    	flex: 0 0 20px;
    	margin: 0px 10px 0px 0px;	
	}

	.sudi_std_btn:hover{
		background-color: var(--bg-main-medium);
   	 color: var(--text-light-alpha);
	}

*:not(ul):not(ol):not(li) { margin:0px; padding:0px; -webkit-tap-highlight-color:transparent; }
/*ul, li { list-style:none; }*/ 
#silence_ajax { display:none !important; } /*<-- Solo para cargar contenido de forma oculta*/
#msg_sudi {
	z-index: 3000;
    position: fixed;
	font-size: 1.15em;
    bottom: 15px;
    left: 6%;
    width: 88%;
    height: auto;
    padding: 15px 0px;
    background-color: var(--color-blue);
    color: var(--text-light-alpha);
    transition: bottom .5s ease;
    border-radius: 25px;
}

	#msg_sudi.hidden { bottom:-100px; }
	#msg_sudi.none { display:none; }
	#msg_sudi p{ 
		font-size:1.5;
		margin:0px 30px;
		text-align: center;
	}

	#msg_sudi span { 
		position: absolute;
		left: 20px;
		top: 15%;
		font-size: 1.3em;
	}

html, body { height:100%; min-height:100% !important; max-width: 100%; overflow-x: hidden; }
body { font-family: var(--font-regular); background-color: var(--bg-body); overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; }
strong { font-family: var(--font-bold); } 
#state_bar { display:none; position:fixed; }

#main_blur_container {
	height: inherit;
	/*padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);*/
	/*box-sizing: border-box;*/
}

	/* JQUERY-UI */
	
	
	
	.ui-widget-header {
		color:#FFF;
		background-color: var(--bg-main-high);		
	}
	.ui-dialog-titlebar-close { display:none !important; }
	.ui-state-default { border:#CACACA solid thin; background-color:#FEFEFE; box-sizing:border-box; }
		.ui-state-default:hover { opacity:.7; }
	.ui-state-active { border: 1px solid #3b92cf; }
	.deleteClassBtn { background-color:#F00; color:#FFF;}
	
	.ui-autocomplete { z-index:3000 !important; overflow:auto; max-height:150px; }
	
		.pointer { cursor: pointer; }
		.ccopy { cursor: copy; }
		.help { cursor: help; }

	.anchor { text-decoration: underline; color: var(--color-blue) !important; }
		.tleft { text-align: left !important; }
		.tright { text-align: right !important; }
		.tcenter { text-align: center !important; }
		.tjustify { text-align: justify !important; }
		.tupper { text-transform: uppercase !important; }
		.tlower { text-transform: lowercase !important; }
		.tcapitalize { text-transform: capitalize !important; }
	.elipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
/* INPUTS */
	input:focus,
	select:focus,
	textarea:focus,
	button:focus {
		outline: none;
	}
	
	input, select, textarea, button { 
		/*box-sizing:border-box;
		-moz-appearance: none; 
		-webkit-appearance: none; 
		appearance: none;*/
	}
	
	/* CHECKBOX y RADIO */
	
	/* CheckBox and Radio Buttom */
	.aCheckbox {
		width: 100%;
		padding: 10px 0px;
		border: #e5e6ec solid thin;
		border-radius: 5px;	
	}
		.aCheckbox .check_label { display:inline-block; margin:5px 10px; }
		
		input[type="checkbox"], input[type="radio"] { display:none !important;  }
		
		input[type="checkbox"] + label span, input[type="radio"] + label span {
			transition:all .5s ease;
			box-sizing:border-box;
			vertical-align:middle;
			display:inline-block;
			margin:-2px 5px 0 0;
			cursor:pointer;
			height:16px;
			width:16px;
			border: var(--border-gray-medium) solid thin;
		}

		input[type="checkbox"] + label span{ /* border-radius:4px; */ }
		input[type="radio"] + label span { border-radius:50%; }
		
		input[type="checkbox"]:checked + label span, 
	
	.input_required { border:rgba(255,0,0,.3) solid 1px; }
	
	input[type="checkbox"] + label, input[type="radio"] + label { font-size:.9em; }
			
		input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {
		  background-color: var(--bg-main-medium);
		  border: var(--bg-main-medium) solid thin !important;
		}
		
		input[type=color] {
			background-color: transparent;
			border: none;
		}	

/* C) LOGIN */

	#sudi_main_login {
		position: relative;
		display: flex;
		height: inherit;
		min-height: 100%;
		align-items: center;
	}
		#login_form_container {
			display: block;
			width: 350px;
			height: auto;
			margin: 0px auto 0px auto;
			box-sizing: border-box;
		}

			#login_main_logo{ 
				display: block;
				width: 320px;
				height: 160px;
				background-color: var(--logo-bg);
				margin: 0px auto 15px auto;
				border-radius: 20px;
				background-image: var(--logo-main);
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
			}

			#login_main_welcome{
				color:var(--text-main-low);
				text-align: center;
				display: block;
				font-size: 1em;
				margin: 15px 0px 15px 0px;
			}
			#login_main_sign {
				font-size: 1.5em;
				color: var(--text-light);
				text-align: center;
				margin: 15px 0px 7px 0px;
			}	

			.input_password_box input:-webkit-autofill,
			.input_password_box input:-webkit-autofill:hover, 
			.input_password_box input:-webkit-autofill:focus, 
			.input_password_box input:-webkit-autofill:active {
				-webkit-appearance: none !important;
			}
			
			#login_password.closed {
				max-height: 0px;
				transition: max-height .5s ease-out;
			}
			.input_password_box{
				display: block;
				position: relative;
				border-radius: 5px;
				margin: 7px 0px 13px 0px;
				overflow: hidden;
				font-size: 1.1em;
			} 

				.log_i_con {
					position: absolute;
					left: 0px;
					top: 0px;
					background-color: var(--bg-main-medium);
					width: 60px;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

					.log_i_con i {
						color: var(--text-light);
						font-size: 1.5em;
					}
				#sudi_login_user, #login_password {
					display: block;
					position: relative;
					width: 100%;
					background-color: var(--bg-light) !important;
					color: var(--text-gray-high) !important;
					height: 60px;
					padding-left: 75px;
					box-sizing: border-box;
					border: none !important;
					font-size: 1em;
				}
					#sudi_login_user::placeholder, #login_password::placeholder { color:var(--bg-main-medium); }
					#sudi_login_user:focus, #login_password:focus { outline: none; }

		.login_buttons { text-align: center; color:var(--text-main-low); }
			.login_buttons section { display: inline-block; vertical-align: middle; width: 48%; }
		.login_buttons a
		{ 
			display:block;
			margin: 15px 0px 20px 0px;
			width:100%;
			padding: 19px 0px 19px 0px;
			background-color:var(--bg-main-medium);
			font-size: 1em;
			border-radius: 5px;
			text-decoration:none;
			color:#FFF;
			text-align:center;
		}
		
		#saveSession_cont.closed{ display: none; }

		label[for="saveSession"] > span { border:var(--text-main-low) solid thin !important; }

/* D) INFO CONTAINER */

		#info_container {
			display: inline-block;
			vertical-align: top;
			margin-top: 0px;
			box-sizing: border-box;
			margin-left: 330px;
			width: calc(100% - 330px);
			height: 100vh;
			z-index:99;
			
			padding-top: 75px;

		}
			#info_container.info_show {	
				width: calc(100% - 680px);
			}
			#info_container.closed {
				margin-left: 80px;
				width: calc(100% - 80px);
			}
			#info_container.hidden {
				margin-left:0px;
				width:100%;
				margin-top: 0px;
				padding: 0px;
				height: 100%;
				background-color: var(--bg-main-high);
			}

			#info_container h1, #info_container h2, #info_container h3 {
				color: var(--text-gray-medium);
				margin: 10px auto 10px 25px; 
			}

			.info_content_wrapper table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
			font-size: 0.95rem;
			color: #444;
			margin: 1rem 0;
			}
			
			.info_content_wrapper th,
			.info_content_wrapper td {
			padding: 0.75rem;
			border-bottom: 1px solid #e0e0e0;
			text-align: left;
			vertical-align: top;
			}
			
			.info_content_wrapper tr:nth-child(even) {
			background-color: #fafafa;
			}
			
			.info_content_wrapper tr:hover {
			background-color: #f0f8ff;
			}
			
			.info_content_wrapper th {
			background-color: #f5f5f5;
			font-weight: bold;
			}

		/* === TEXTO ESTRUCTURADO PARA INFO_CONTAINER === */

			.info_content_wrapper {
				padding: 15px 40px 15px;
				line-height: 1.7;
				font-size: 15px;
				color: var(--text-gray-high);
				font-family: var(--font-regular);
				max-width: 960px;
				margin: 0 auto;
			}

			/* ENCABEZADOS */
			.info_content_wrapper h1,
			.info_content_wrapper h2,
			.info_content_wrapper h3,
			.info_content_wrapper h4 {
				font-family: var(--font-semibold);
				color: var(--text-gray-medium);
				margin: 30px 0 15px;
			}

			.info_content_wrapper h1 {
				font-size: 26px;
				color: var(--text-main-high);
			}

			.info_content_wrapper h2 {
				font-size: 22px;
				color: var(--text-main-medium);
			}

			.info_content_wrapper h3 {
				font-size: 18px;
				color: var(--text-gray-high);
			}

			.info_content_wrapper p {
				font-family: var(--font-regular);
				font-size: 15px;
				margin: 10px 0 20px;
				color: var(--text-gray-high);
			}

			.info_content_wrapper ul,
			.info_content_wrapper ol {
				margin: 15px 0 25px 25px;
				padding-left: 15px;
			}

			.info_content_wrapper li {
				margin-bottom: 8px;
				font-family: var(--font-regular);
				color: var(--text-gray-high);
			}

			/* CÓDIGO INLINE */
			.info_content_wrapper code {
				background: #f0f4f8;
				border: 1px solid var(--border-gray-medium);
				border-radius: 5px;
				padding: 2px 6px;
				font-size: 13px;
				font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
				color: #003366;
			}

			/* BLOQUE DE CÓDIGO */
			.info_content_wrapper pre {
				background-color: #f8fafc;
				border: 1px solid var(--border-gray-low);
				border-radius: 6px;
				padding: 14px 18px;
				overflow-x: auto;
				font-size: 14px;
				line-height: 1.6;
				margin: 20px 0;
				color: var(--text-dark-alpha);
				font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
			}

			.info_content_wrapper pre code {
				background: none;
				border: none;
				padding: 0;
				color: inherit;
				font-size: inherit;
			}

/* E) MAIN MENU */

	#main_menu {
		position:fixed;
		top:0px;
		left:0;
		display:inline-block;
		box-sizing:border-box;
		width:325px;
		z-index:102;
		white-space: nowrap;
		height: 100%;	

		-webkit-user-select: none; 
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		transition:left .5s ease;
	}

	/* Menu .Closed */
		#main_menu.closed { width: 80px; }
		
		
		#main_menu.hidden {
			left:-330px;
		}

		#bar_logo{
			display: block;
			width: 65px;
			height: 65px;
				min-height: 65px;
			background-color: var(--logo-bg);
			border-radius: 8px;
			margin-bottom: auto;
			background-size: contain;
			background-position: center center;
			background-repeat: no-repeat;
			
			/*temp*/
			background-image: var(--logo-sq);
			
		}
		
		/* E.1 - BAR_MENU */
		#main_menu #bar_menu{
			display: inline-flex;
			flex-direction: column;
			width: 80px;
			box-sizing: border-box;
			vertical-align: top;
			margin: 0px;
			height: 100vh;
			max-height: 100vh;
			background-color: var(--bg-main-high);
    		align-items: center;
    		justify-content: flex-end;
    		padding: 20px 0px 25px;
			position: relative;
			z-index: 2;
			overflow-y: auto;
			
		}		
		#bar_elements_container{
			display: block;
			width: 100%;
			box-sizing: border-box;
		}
			.bar_element {
				display: flex;
				margin: 5px auto;
				width: 50px;
				height: 50px;
				border-radius: 8px;
				cursor: default;
				justify-content: center;
				align-items: center;
			}
				.bar_element i { color: var(--text-main-low); font-size: 1.5em; }

				.bar_element:hover, .bar_element.selected  { background-color: rgba(255,255,255, .1); }
			#user_photo, .user_photo {
				display: flex;
				width: 60px;
				height: 60px;
					min-height: 60px;
				background-color: var(--bg-main-low);
					color:var(--text-main-high);
				border-radius: 50%;
				background-position: center center;
				background-size: cover;
				border: var(--bg-main-low) solid 2px;
					box-sizing: border-box;
				margin: 20px 0px;
				align-items: center;
    			justify-content: center;
				
				overflow: hidden;
			} 
				.user_photo {width: 120px; height:120px; margin: auto; border-width: 4px; }

			#user_photo i { display: block; margin-top: 10px; font-size: 3em;}
			.user_photo i { display: block; margin-top: 40px; font-size: 5.5em;}

		/* E.2 - main_nav */	
		#main_nav {
			display: inline-block;
			vertical-align: top;
			text-align:left;
			width:245px;
			flex-direction: column;
			position: relative;
			background-color: var(--bg-gray-low);
			height: 100vh;
			overflow: auto;
			
			transition: all .5s;
			z-index: 1;	
		}
			#main_menu.closed #main_nav { margin-left: -245px; }
			
			.nav_group {
					width:100%;
					max-height: 50px;
					overflow:hidden;
					transition: max-height .5s, background-color .5s;
				}
				
					.nav_group.opened {
						max-height: 1000px;
    					transition: max-height .5s, background-color .5s;
					}
					
					.group_title { color: var(--text-gray-medium); }
								
					.nav_group.opened .group_title { color:var(--text-gray-high); }

					.nav_group.opened .group_title i {color:var(--text-main-high);}
					
						.nav_alone:not(.nav_title):hover span {color:var(--text-main-high);} .nav_alone.btn_active span {color: var(--text-main-high);} .nav_alone.btn_active{ padding-left: 5px; }
						.nav_alone:not(.nav_title):hover .nav_title_icon{color:var(--text-main-high);} .nav_alone.btn_active .nav_title_icon {color: var(--text-main-high);}
						.group_title:hover .nav_title_icon {color:var(--text-main-high);}
					
				.module_title{
					height: 70px;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					text-transform: uppercase;
					color: var(--text-main-high);
				}

				.group_title, .nav_alone {
					height:50px;
					cursor:pointer;
					position: relative;
					list-style: none;
					transition: padding-left .5s, background-color .5s;
				}
				
				.nav_title_icon { color:#898989; font-size:1.1em; }
					.module_title .nav_title_icon { color: var(--text-main-high); margin: 0px 10px; }
				
				.nav_icon { float:left; }
				
					
				
					.group_title .nav_title_icon, .nav_alone .nav_title_icon { 
						margin: 0px 0px 0px 25px;
						position: absolute;
						top: 50%;
						-webkit-transform: translateY(-47%);
						transform: translateY(-47%);
					}
					
					.nav_item .nav_icon {
						top: 50%;
						margin-left: -25px;
						font-size: 1.2em;
						-webkit-transform: translateY(-50%);
						transform: translateY(-45%);
						position: absolute;			
					 }
						.nav_icon_arrow{
							position: absolute;
							right: 25px;
							top: 4px;
							transition: all .5s ease;
							font-size: 1.1em;
						}
							.nav_group.opened .group_title i.nav_icon_arrow {
								transform: rotate(180deg);
								top: 0px;
								margin-top: 5px;
							 }			
				
				.nav_item {
					list-style: none;;
					position: relative;
					font-size:.9em;
					height:45px;
					transition: background-color .5s ease;
					cursor:pointer;
					width:85%;
					margin-left:30%;
					padding-left:5px;
					color: #898989;
					transition: padding-left .5s, background-color .5s;
				}
					.menu_custom_icon {
						width: 18px;
						height:18px;
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center center;
						background-color: #898989;
						-webkit-mask-image: url(http://localhost:8888/sudi-v4/public_html/app/_files/_img/_icons/icon_upgrade.svg);
						mask-image: url(http://localhost:8888/sudi-v4/public_html/app/_files/_img/_icons/icon_upgrade.svg);
					}
					.nav_item:last-child {
					margin-bottom: 20px;
					}
				.nav_group .nav_item:first-child { margin-top:10px; }
				
					.nav_item:hover { color:#000; } .nav_item.btn_active { color:var(--text-main-high); } .nav_item.btn_active { padding-left: 15px; }
						.nav_item:hover .nav_icon { color:var(--text-main-high); } .nav_item.btn_active .nav_icon { color:var(--text-main-high); }
						.nav_item:hover .nav_icon.menu_custom_icon {background-color: var(--text-main-high);} .nav_item.btn_active .nav_icon.menu_custom_icon {background-color: var(--text-main-high);}							
				
					.nav_item span, .group_title span, .nav_alone span {
						display:block;
						position: relative;
						top: 50%;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
						
					}
					
						.group_title span { margin-left: 60px; }
					
					.nav_alone span { margin-left:60px; color:#898989; }
						.nav_alone span i { color:#c3b1dc; }
			.nav_title {
				height: 70px;
				cursor: default;
				color:#000;
				margin: 10px 0px 30px 0px;
			}
				.nav_title  span { color:#000; }
				.nav_title i{ color: var(--select-color); font-size:1.2em; }

	
/* F) LIST */

	.sudi_lpath, .sudi_cpath {display: inline-block; width: auto; color:#33496F; font-size: 1.1em; padding-left: 30px; margin: 30px 0px; font-family: var(--font-bold); opacity: .8; }
		.sudi_cpath{ padding-left: 0px; font-size: 1.2em; opacity: 1; }

	.list_input_container { padding: 0px 30px; }

	/* NEW SUDI TB */
	.sudi_tb_container {
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		height: auto;
		overflow: auto;
		font-size: 1em;
		margin: auto;

	}
		
		/* Variantes SUDI V4 */
		.sudi_tb_container.tb_height_auto{ max-height: calc(100vh - 75px); }
			.sudi_tb_container.tb_height_auto .sudi_tb_item_container { height: calc(100vh - 75px); overflow: auto; padding-top: var(--suditb-sthead-h); }

			.sudi_tb_container.tb_header_fixed .st_head { position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(255,255,255, .5); backdrop-filter: blur(10px); z-index: 1;}
		
			.st_notxt i { margin: 0px !important; }
	
	.sudi_tb_item_container {
		display: block;
		padding-bottom: 50px;
		box-sizing: border-box;
	}
	.sudi_tb_container .st_row {
		display: flex;
		flex-direction: row;
		/*justify-content: center;*/
		min-height: 70px;
		align-items:stretch;
	}

		.st_row.order_active {
			cursor: move;
		}
		.st_row.order_active.dragging {
			opacity: 0.7;
			background-color: var(--bg-main-low);
		}

	
	.sudi_tb_container .st_head .st_item, .sudi_tb_container .st_row .st_item {
		position: relative;
		flex: 1 1 20%;
		display: inline-flex;
		align-items: center;
		font-size: .9em;
		text-align: center;
		box-sizing: border-box;
		margin: 2px;
		justify-content: center;
	}
	
	.sudi_tb_container .st_row .st_item {
		color: var(--text-gray-medium);
		border: var(--border-gray-low) solid thin;
		box-sizing: border-box;
		margin: 2px;
		border-radius: 5px;
	}

		.sudi_tb_container .st_head {
			width: 100%;
			display: inline-flex;
			flex-direction: row;
			justify-content: left;
			height: var(--suditb-sthead-h);
			align-items: stretch;
			background-color: #FFF;
			color: var(--btn-color-light);
			box-sizing: border-box;
		}
			
		
		.st_head .st_item{
			font-size: 1em;
			color: var(--text-main-high);
		}
		
		.st_head .st_item i { 
			/*color: var(--btn-confirm);*/
    		font-size: 1.1em;
			margin: 0px 5px 0px 0px;
		}

		/* @SUDI V4 - TB - Reportes */
			.sudi_tb_container.sudi_report_tb {
				width: 90%;
				margin: 25px auto;
			}
			.sudi_tb_container.sudi_report_tb .st_head { background-color: var(--bg-main-high); }
			.sudi_tb_container.sudi_report_tb .st_head .st_item { color: var(--text-main-low); }

		/* @2021 Clases y elementos para celdas especiales*/

		.st_item:not(.st_special) { min-width: 120px !important; }
		.st_item.stcolumn { flex-direction: column; }
			.st_item.st10 { flex: 0 0 10px !important; min-width: auto !important; }
			.st_item.st20 { flex: 0 0 20px !important; min-width: auto !important; }
			.st_item.st50 { flex: 0 0 50px  !important; min-width: auto !important; }
			.st_item.st75 { flex: 0 0 75px  !important; min-width: auto !important; }
			.st_item.st100 { flex: 0 0 100px  !important; min-width: auto !important; }
			.st_item.st150 { flex: 0 0 150px  !important; min-width: auto !important; }
			.st_item.st200 { flex: 0 0 200px  !important; min-width: auto !important;}


			.st_item_img{ background-repeat: no-repeat; background-size: cover; background-position: center center; } 
			.st_item img {width:auto; height: auto; max-height: 70px; max-width: 90%;}
		.st_row:nth-child(odd) .st_item {
			background-color: var(--bg-gray-low);
		}

		.sudi_tb_container .st_row .st_item i:not(.icon_visible) { 
			display: none;
			color: var(--btn-confirm);
			font-size: .9em;
			margin: 0px 5px 5px 0px;
		}

		.icon_visible {
			font-size: 1.15em;
			color: var(--text-main-high);
		}

		/* LIST - PROGRESS BARR */
		.mini_progress_bar{
			display: flex;
			width: 90%;
			height: 20px;
			border: #CACACA solid thin;
			margin: 5px auto;
			overflow: hidden;
			position: relative;
			font-size: .8em;
			justify-content: center;
			align-items: center;
			color: rgba(0,0,0,.7);
			z-index: 0;
		}
		.mini_progress_bar span {
			display: block;
			position: absolute;
			width: 0;
			background-color: #d5b8e4;
			height: inherit;
			top: 0; left: 0;
			z-index: -1;
		}


	/* btn de opciones */
	.st_row_option span { font-size: .8em; }
	.st_row_option_btn i { 
			color:rgba(255,255,255,.8) !important;
			display: block !important;
			font-size: 1.5em; 
		} 

	/* List row Options */
				
				#list_row_options {
					position:absolute;
					display:none;
					width: auto;
					top:0px;
					height:auto;
					padding:0px;
					background-color: rgba(255,255,255,.6);
					backdrop-filter: blur(10px);
					border-radius:4px;
					border: var(--border-gray-high) solid thin;
					
					transition:opacity .5s ease;
					
					-webkit-user-select: none; 
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					
					z-index:102;
					
				}
			
					
				#list_row_options.opened 
				{ display:inline-block; opacity:1; }
				
			
					#list_row_options li {
						display:block;
						width: auto;
						height:auto;	
						padding:10px;
						text-align:left;
						min-width:150px;
						position:relative;
						padding-right:35px;
						max-width:100%;
						cursor:pointer;
					}
					
						#list_row_options li:hover { background-color:var(--bg-main-high); color:#FFF; }
						
						#list_row_options li i {
							position:absolute;
							top: 50%;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
							right:10px;	
							color: var(--text-main-high);
						}

		/* Paginación LIST */
				
				.no_results {
					text-align: center;
					font-size: 2em;
					color: #747474;	
				}

				#nav_list { 
					position:fixed;
					bottom:0px;
					right:100px;
					width:auto;
					background-color:rgba(255,255,255,.9);
					border-radius: 10px;
					border-bottom-left-radius: 0px;
					border-bottom-right-radius: 0px;
					border:#d3d9e7 solid thin;
					color:var(--btn-color-light);
					padding: 10px 0px 12px;
					z-index:1;
					font-size: 1.1em;
					
					
					-webkit-user-select: none; 
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				 }

					.info_show #nav_list { right:350px; }
					
					#page_num { 
						display:inline-block;
						vertical-align:middle;
						width:auto;
						padding:0px 5px;
					}
					
					.nav_list_btn { 
						display: inline-block;
						vertical-align:middle;
						width:auto;
						padding:0px 10px;
						cursor:pointer;
						border-right:rgba(255,255,255,.3) solid thin;
					}
						.nav_list_btn:hover { 
							color: var(--btn-confirm);
						}
						
						.nav_list_btn.disabled { 
							color:rgba(0,0,0,.2);
							cursor:default;
						}
						
						#page_info { 
							font-size:.8em;
							display:inline-block;
							vertical-align:middle;
							padding:0px 10px; 
						}
						
						#page_info .list_search_clean { 
						    cursor: pointer;
							padding: 5px 10px;
							background-color: rgba(231,49,49,1);
							color: #FFF;
							margin: 0px 10px;
							border-radius: 4px;	
						}
						
						.list_generator_current_page {
							position:absolute;
							z-index:-1;
							color:rgba(240,240,240,.2);
							font-size:3em;
							top:10px;
							right:10px;	
						}
	
/* G) HEADER y SUB CONTROLS */


header {
	display: flex; height: 75px;
	left: 325px;
	width: calc(100vw - 325px);
	position: relative;
	position: fixed;
	top: 0;
	
	z-index: 1;
	background-color: rgb(255 255 255 / 50%);
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
	header.closed {
		left: 80px;
		width: calc(100vw - 80px);
	}
#small_main { 
	width: 75px;
	height: 75px;
	font-size: 1.5em;
	justify-content: center;
	align-items: center;
	display: none;
}

#small_sub_c { 
	width: 75px;
	height: 75px;
	font-size: 1.5em;
	justify-content: center;
	align-items: center;
	display: none;
}


#sub_controls {
		
		padding:0px 30px 0px 0px;
	   	display: inline-flex;
    	align-items: center;
		justify-content: right;
		height: 75px;
		box-sizing: border-box;
		width: inherit;	
	}

header.hidden { display: none; }
		#welcome_txt { font-size: 1.5em; margin-right: auto; }
			#sub_controls h2 { margin-left: 30px; color:var(--text-main-high); display: inline-flex; align-items: center; text-transform: uppercase; font-size: 1.4em;  }
				#sub_controls h2 i { margin-right: 10px; color: var(--text-main-high); }
			.push-left{ margin-left: auto; }
			#sub_controls span.loadContent, #sub_controls .opt_btn, #sub_controls .loadRContent {
				    height: 50px; border-radius: 5px; padding: 0px 10px; background-color: var(--bg-main-low); color: var(--text-main-high); cursor: pointer; display: flex; align-content: center; flex-wrap: wrap; margin: 0px 5px; }

				#sub_controls span.loadContent:hover, 
				#sub_controls span.opt_btn:hover, 
				#sub_controls span.loadContent.btn_active,
				#sub_controls span.opt_btn.btn_active { background-color: var(--bg-main-medium); color: var(--text-light-alpha);  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
			
			#sub_controls span i {
				opacity:.5;
				font-size:1.5em !important; 
				/*flex: 0 0 20px;*/
				margin: 0px 10px 0px 0px; 
			}
			
			#sub_controls span.uplabel {
				height: 50px; border-radius: 5px; padding: 0px 10px; background-color: var(--color-white); color: var(--text-main-high); display: flex; align-content: center; flex-wrap: wrap; margin: 0px 5px;
			}

			/* B Ú S Q U E D A */
			.list_search_options_container{
				display: flex;
				height: 100%;
				justify-content: center;
				align-items: center;
				width: 0px;
				overflow: hidden;
				transition: .5s ease all;
			}
				.list_search_options_container.on { width: 250px;}
				.list_search_options_container .list_filter select, .list_search_options_container .upbar_filter input{
					height: 50px; box-sizing: border-box; border: #EFEFEF solid thin; width: 90px; margin: 0px 5px 0px 0px; color: var(--btn-color-light);
				}
					.list_search_options_container .upbar_filter input{ width: 150px;     padding-left: 5px; }


/* H) CURTAIN*/

.blur_effect.on {
		/*-webkit-filter: blur(7px);
		-moz-filter: blur(7px);
		-o-filter: blur(7px);
		-ms-filter: blur(7px);
		filter: blur(7px);*/
	}
	
	#curtain_container {
		display:block;
		position:absolute;
		min-height:100%;
		height:auto;
		width:100%;
		margin:0px auto;
		top:0;
		left:0;
		z-index:1000;
		
		
	}
		#curtain_container.hidden { display:none !important; }
		.curtain{
		    background-color: rgba(0,0,0,.5);
			padding-top:1px;
			position:fixed;
			height:100%;
			min-height:100%;
			top:0;
			width:100%;
			overflow:auto;
			
			display: flex;
   			justify-content: center;
			align-items: center;
			
			/* B L U R */
			-webkit-filter: blur(7px);
			-moz-filter: blur(7px);
			-o-filter: blur(7px);
			-ms-filter: blur(7px);
			filter: blur(7px);
		}
		.curtain:first-child{ backdrop-filter: blur(10px); }
		
		.curtain:last-child {
			-webkit-filter: none;
			-moz-filter: none;
			-o-filter: none;
			-ms-filter: none;
			filter: none;
			
			transition: width .5s ease;
		}

			#curtain_container.r_panel_show .curtain { width: calc(100% - 350px); }

				.close_curtain {
					    position: absolute;
						top: 10px;
						right: 10px;
						color: var(--text-gray-high);
						background-color: var(--color-white);
						border-radius: 50%;
						cursor: pointer;
				}
				
					.close_curtain:hover { color: var(--color-red); }
	
			/* IFRAME CURTAIN */

			.load_new_page {
				display: block;
				width: 90%;
				max-width: 1000px;
				height: 99%;
				margin: 0px auto;
				text-align: center;
				border: none;
			}
		
/* I) M A N A G E */

	.form_manage, .curtain_content {
		background-color: #FFF;
		display: block;
		width: 95%;
		max-width: 1400px;
		height: auto;
		overflow: auto;
		border: #ebebeb solid thin;
	    border-radius: 12px;
		max-height: 95vh;
		box-sizing: border-box;
			
	}
		.curtain_content_container { padding: 30px; }
		.form_title {
			display: block;
			padding: 5px 30px;
			background-color: var(--bg-gray-low);
			font-family: 'sf_pro_textthin';
			position: sticky;  /* Cambiado a sticky */
			top: 0;  /* Fijado en la parte superior del contenedor */
			z-index: 10;  /* Asegura que quede encima de otros elementos al hacer scroll */
			border-bottom: var(--border-gray-medium) solid thin;
			color: var(--text-main-high);			
		}
			.form_title h1 i { margin-right: 10px; color:var(--text-gray-medium); }
			.form_title h1{
			    width: 95%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 1.6em;
			}
			.form_title .close_curtain{
				position: absolute;
				right: 30px;
				top: 7px;
				width: 50px;
				height: 50px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				background: none;
				font-size: 1.6em;
			}

		.form_subtitle{
			font-size: 1.1em;
			margin: -10px 0px 30px 0px;
			display:block;
			width: 100%;
			text-align:center;
			border-bottom: #ebebeb solid thin;
			color: var(--text-main-high);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 5px 0px;
		}

.form_submit {
    opacity: 0; height: 1px; width: 1px; display: none;
}

.span_form_btns{
    display: flex;
    position: sticky;
    bottom: 0px;
    justify-content: end;
    background-color: var(--bg-gray-medium);
    border-top: var(--border-gray-medium) solid thin;
    padding: 8px 0px;
}

.span_form_btn {
	border: none;
    border-radius: 3px !important;
    font-size: 1em;
    margin: 5px 15px;
    cursor: pointer;
    width: auto;
    opacity: .8;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}
	.span_form_btn.icon_span{ padding-left: 0px; }
	
	.span_form_btn i {
		opacity: .5;
		margin: 0px 10px;
	}
.span_form_btn:hover{ opacity: 1; }
	.span_submit {
		background-color: var(--color-blue);
		color: var(--text-light-alpha);
		justify-content: center;
	}
	
	.span_manage_cancel{
		background-color: var(--color-red);
		color: var(--text-light-alpha);
	}

.main_input_container{ 
	padding: 10px 20px; 
	max-height: calc(95vh - 123px);
	overflow: auto;
	box-sizing: border-box;
}

	#r_panel_content .form_manage .main_input_container{
		max-height: calc(100vh - 88px);
		padding: 10px;
	}


	/* M U L T I P L E  T A B L E S */

	.multiple_tb_container {
		border: #ebebeb solid 2px;
		box-sizing: border-box;
	}
		
	.mt_btn_container{ display: flex; }
	.multiple_tb_btn {
		position: relative;
		display: inline-block;
		width: auto;
		text-align: center;
		background-color: var(--color-blue);
		color: #FFF;
		text-decoration: none;
		height: 40px;
		line-height: 2.5;
		margin: 10px;
		padding-left: 50px;
		padding-right: 30px;
		border-radius: 5px;
		opacity: .8;
	}
	.multiple_tb_btn:hover{ background-color: var(--bg-main-high); color: var(--text-light-alpha); }
	
		.multiple_tb_btn i {
			display: inline-flex;
			opacity: .5;
			font-size: 1.5em !important;
			flex: 0 0 20px;
			margin: 0px 10px 0px 0px;
		}
		
		.recordb {
			position:relative;	
		}
		
			.recordb_delete {
				color:#F00;
				padding: 5px 8px 2px;
				transition: all .5s ease;
				font-size: 1.2em;
				cursor:pointer;
				margin:0px;
				z-index:1;
				position:absolute;
				right:10px;
				opacity:.5;
				
			}
			
				.recordb_delete:hover {
					opacity:.1;
				}

			.recordb_new {
					position: absolute;
					cursor: pointer;
					color: #626262;
					right: 0px;
					top: 0px; 
				}
				recordb_new:hover {
					color: #88a4d3;
				}

	/* I N P U T S */

/* Tooltip */
	#tooltip_container {
		position: absolute;
		display: none;
		padding: 5px 10px 5px 10px;
		max-width: 35%;
		z-index: 3001;
		border: #EAEBEC solid thin;
		font-size: .9em;
		text-align: left;
		background-color: rgba(255, 255, 255, .9);
		max-height: 300px;
		overflow: auto;
		font-family: var(--font-medium);
		color: var(--text-gray-high);
	}
	
.tooltip-source-html { display: none; }
	
	.tooltipQuestion {
		font-size:1em;
		float:right;
		margin: -3px 5px 0px 0px;
		color:#C3C3C3;
		width:16px;
		height:16px;
		cursor:pointer;
		text-align:center;
	}
		.tooltipQuestion:hover {
			color:#0B189A;	
		}
	
	

	.inputError { font-size:.7em; color:#CCC; }
		.inputError i { color:#CC0000; }
	
	.input_section {
		position:relative;
		display:inline-block;
		height:auto;
		margin:20px 0px;
		vertical-align:top;
		box-sizing:border-box;
	}
	
		.input_1x { width:98%; }
		.input_2x { width:44%; margin-right:1%; }
		.input_3x { width:31%; margin-right:1%; }
		.input_4x { width:24%; margin-right:5px; }
		.input_5x { width:19%; margin-right:10px; }
		.input_6x { width:15%; margin-right:10px; }
	
	
			/* Para Manage en r_panel*/

	.errorMessage {
		position:absolute;
		right:0px;
		font-size:.7em;
		text-align:right;
	}
	
	label.label_spry {
		font-family: var(--font-regular); 
		font-size: .9em !important;
		color: #B6BED9 !important;
		text-transform: uppercase;
		display: block;
	}
	
	/* INPUT - TEXTFIELD */
	.aTextField {
		font-family: var(--font-regular); 
		background-color: var(--bg-light);
		border: var(--border-gray-medium) solid thin !important;
		border-radius: 10px;
		cursor: pointer;
		-webkit-appearance: none;
		box-sizing: border-box;
		padding: 0px 20px;
		font-size: 1em;
		color: var(--text-gray-high);
		height:40px;
		width:100%;	
	}

	/* INPUT - TEXTAREA */
	.aTextArea {
		font-family: var(--font-regular);
		background-color: var(--bg-light);
		border: var(--border-gray-medium) solid thin !important;
		border-radius: 10px;
		-webkit-appearance: none;
		box-sizing: border-box;
		padding: 10px 20px;
		font-size: 1em;	
		color: var(--text-gray-high);
		resize: none;
		height: 80px;
		width: 100%;
	}

	/* Markers */

	.marker-green { background-color: var(--ck-highlight-marker-green);}
	.marker-yellow {background-color: var(--ck-highlight-marker-yellow);}
	.marker-blue { background-color: var(--ck-highlight-marker-blue);}
	.marker-pink { background-color: var(--ck-highlight-marker-pink);}
	.pen-green { color:var(--color-green); font-family: var(--font-bold); background: none; }
	.pen-red{ color:var(--color-red); font-family: var(--font-bold); background: none; }


	/* INPUT - DATEPICKER */
	
	.date_calendar {
			position: absolute;
			font-size: 1.5em;
			color: var(--text-main-high);
			right: 15px;
			top: 28px;
		}
	
	/* S W I T C H */

	.switch_cont {
			display:block;
			margin: 5px;
		}
			.switch_cont p {
				font-size:.6em;
				text-align:center;
				font-family: var(--font-medium);	
			}

		.switch {
			display:block;
			width:40px;
			height:20px;
			background-color:#F3F3F3;
			border-radius:10px;
			margin:0px auto;
			box-shadow:rgba(0,0,0,.2) 1px 1px 1px inset;
			cursor:pointer;
			overflow:auto;

			-webkit-user-select: none; 
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

			.switch span {
				display:block;
				width:18px;
				height:18px;
				margin-top:1px;
				border-radius:50%;
				background-color:#EAEAEA;
				transition:all .5s ease;
				box-shadow:rgba(0,0,0,.5) 1px 1px 1px;


			}


				.switch.on span {
				margin-left:21px;
				background-color:#41CA52;

			}

			.switch.canceled { opacity:.8; }

				.switch.canceled span { display:none; }

	/* INPUT - SELECT  */

	.aSelect_container {position: relative;}
	.aSelect_container::after {
		content: "\f0d7";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		right: 10px;
		bottom: 8px;
		font-size: 1.5em;
		color: var(--bg-main-high);
		pointer-events: none; /* Evita que el ícono interfiera con el clic en el select */
	}

	.aSelect {
		
		position: relative;
		font-family: var(--font-regular);
		background-position: right;
		border: var(--border-gray-medium) solid thin !important;
		border-radius: 2px;
		-webkit-appearance: none;
		box-sizing: border-box;
		padding: 10px 20px;
		margin: 0px auto;
		font-size: 1em;
		color: var(--text-gray-high);
		display:block; 
		overflow: hidden;
		height: 40px;
		width: 100%;
	}

	/* UPLOAD FILES */
	
		div.upload {
			display: flex;
			max-width: 250px;
			background-color: var(--bg-main-low);
			overflow: hidden;
			cursor: pointer;
			position: relative;
			margin: 10px auto;
			border-radius: 10px;
			align-items: center;
			padding: 10px 5px;
			font-size: 1.2em;
			color: var(--text-main-high);
			opacity: .8;
		}

		.upload_text { 
			width: 100%;
    		text-align: center;
    		
		} 
			div.upload i { margin: 0px 10px; }

			div.upload:hover { opacity: 1; }
	
	div.upload input {
		position:absolute;
		cursor:pointer;
		margin:0px;
		display: block !important;
		width: 100%!important;
		height: 100% !important;
		opacity: 0 !important;
		overflow: hidden !important;
	}
	
	.upload_container {
		margin: 5px 0px;
		box-sizing: border-box;
    	border: #dadada dashed thin;
    	border-radius: 15px;
		display: inline-block;
		background-color: #fbfbfb;
	}

		.csv_instruction {
			font-family: var(--font-regular);
			font-size: 13px;
			color: var(--text-gray-medium);
			margin: 20px 0 0 0;
			text-align: center;
		}
	
	.upload_container .fileName {
	position:relative;
	text-align:center;
	height:auto;
	
	/*min-height:100px;*/
	margin: 10px auto;
	overflow:hidden;
		
		-webkit-transition:all.5s ease-in-out;
		-moz-transition:all.5s ease-in-out;
		-o-transition:all.5s ease-in-out;
		transition:all.5s ease-in-out;
	}
	
	
	/* FILE LIST */
	
	.files_container{
		height:auto;
		max-height:500px;
		overflow:auto;	
	}
	
		.file_loading {
			display:none;
			width:227px;
			margin:0px auto;	
		}
			.file_loading.on {
				display:block;	
			}
			
			
			/* FILE LOADED LIST ROW */
			
			.loaded_item_row {
				display:flex;
				width:100%;
				align-items: center;
				justify-content: center;
			}

	.loaded_item_row:nth-child(even) {
			background-color:rgba(255,255,255,.3);
	}

.loaded_item_row div { display:inline-flex; }


	.loaded_img {
		width:100px;
		height:auto;
		background-size:cover;
		background-position:center;
		justify-content: center;
	}
			.loaded_img img {
				    max-width: 100%;
					margin: 5px auto;
					width: auto;
					height: auto;
					max-height: 150px;
			}
			
			.loaded_img i {
				font-size:2em;
				color:#CACACA;		
			}

	.loaded_file_name {
		width: 250px;
	}
	
		.loaded_file_name p { font-size:.9em; text-align:left;
			width:100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding:0px;
		
		 }
	.loaded_file_options { 
		cursor:pointer;
		padding: 0px 10px; 
	}
		.loaded_file_options i {
			    color:var(--text-light-alpha);
				padding: 10px;
				border-radius: 5px;
				font-size: .8em;
				background-color:var(--bg-main-high);
				opacity: .8;
		}
				.loaded_file_crop:hover i, .loaded_file_delete:hover i { opacity: 1; }

	/*.upload_container */
	.fileName p, .fileName a { 
		display:inline-block;
		font-weight:lighter;
		margin:15px 5px;
		height:30px;
		text-align:left;
		font-size:.85em;
		background-position:left top;
		background-repeat:no-repeat;
		background-size:contain;
		text-decoration:none;
		color:#323232;
		line-height:2;
		box-sizing:border-box;
	
	}
	.upload_container .fileName span.Spry { border-top:#CACACA dotted thin; width:50%; display:block; margin:0px auto; padding:3px 0px;}/*Fondo azul para checkbox eliminar galeria*/
	
		.upload_container .fileName span.Spry label { color:#323232; } /*Color blanco para checkbox eliminar galeria*/
			
		
		.thumbnailImage {display: inline-block; margin:5px; width:90px; height:90px; border:#BABABA solid thin; background-position:center; background-repeat:no-repeat; background-size:cover; 
		
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		}
		
		.imageElement { height:90px; width:inherit; border:#BABABA solid thin;  margin:5px 0px 5px 5px;}


/* J) R-PANEL / COMMENTS */
	
		.transition {
			-webkit-transition: all .3s ease-out;
			-moz-transition: all .3s ease-out;
			-o-transition: all .3s ease-out;
			transition: all .3s ease-out;
		}

	#r_panel{
			position:fixed;
			padding-top: 0px;
			right:0px;
			top:0px;
			background-color: #FFF;
			width: 350px;
			height: 100%;
			margin-right:-350px;
			z-index: 1999;
			box-sizing:border-box;
			overflow:auto;
		    border-left: #e2e7f0 solid thin;
		}
		.r_panel_show{
				margin-right: 0px !important;
			}
	
	#r_panel_content{
		height: calc(100vh - 88px);
    	overflow: auto;	
	}
		#r_panel_content div .curtain_content_container { padding: 30px 10px; }
		
		/* Estilos generales para h1 dentro de #r_panel_content en cualquier nivel */
		#r_panel_content > div > .curtain_content_container > h1:not([id]):not([class]),
		#r_panel_content > .form_manage > .main_input_container > h1:not([id]):not([class]) {
			color: var(--text-gray-high) !important;
			text-align: center;
			font-size: 1.4em;
			border-bottom: solid thin var(--border-gray-high);
			margin-bottom: 15px;
		}

		/* Estilos generales para h2 dentro de #r_panel_content en cualquier nivel */
		#r_panel_content > div > .curtain_content_container > h2:not([id]):not([class]),
		#r_panel_content > .form_manage > .main_input_container > h2:not([id]):not([class]) {
			color: var(--text-gray-high) !important;
			text-align: left;
			font-size: 1.2em;
		}

		/* Estilos generales para p dentro de #r_panel_content en cualquier nivel */
		#r_panel_content > div > .curtain_content_container > p:not([id]):not([class]),
		#r_panel_content > .form_manage > .main_input_container > p:not([id]):not([class]) {
			color: var(--text-gray-high) !important;
			text-align: left;
			font-size: 1em;
			margin-bottom: 15px;
			line-height: 1.3;
		}

		
			.r_panel_img {
				display: block;
				width:150px;
				height: 150px;
				margin: 10px auto;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}

	#r_panel .form_manage {
			margin: 0px;
			width: 100%;
			height: auto;
			background-color: var(--color-white);
			display: block;
			border: none;
		}

			#r_panel .input_section { margin: 10px auto 12px auto; }
				/*#r_panel .textfieldHintState input { color: #010101 !important; font-size: .9em !important;}*/
	
	/* Estilos generales para el contenedor de comentarios */
	#history_comment {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		padding: 0px 10px;
		box-sizing: border-box;
	}

	/* Estilos para los comentarios */
	.comment {
		position: relative;
		max-width: 80%;
		padding: 5px 10px;
		border-radius: 15px;
		font-size: 0.8em;
		line-height: 1.5;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	}

		.comment ul {
			text-align: left;
		}

		.comment a img {
			max-width: 80%;
			max-height: 250px;
			border: var(--border-gray-medium) solid thin;
		}

	/* Mensaje del usuario actual alineado a la derecha */
	.comment.comm_current_user {
		align-self: flex-end;
		background-color: var(--bg-gray-low);
		color: var(--text-gray-medium);
		text-align: right;
	}

	/* Mensajes de otros usuarios alineados a la izquierda */
	.comment:not(.comm_current_user) {
		align-self: flex-start;
		background-color: var(--bg-gray-medium);
		color: var(--text-gray-high);
		text-align: left;
	}

	/* Nombre del usuario, manteniendo estilos originales */
	.comment_name {
		display: flex;
		align-items: center;
		font-size: 1em;
		margin-bottom: 2px;
	}
		.comment_name span {
			background-color: var(--bg-gray-medium);
			border: var(--bg-gray-medium) solid 2px;
			box-sizing: border-box;
			color: var(--bg-gray-low);
			width: 25px;
			height: 25px;
			display: inline-block;
			text-align: center;
			overflow: hidden;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 5px;
			font-size: 1.2em;
		}

			.comment_name span i {
				display: block;
				margin-top: 3px;
				color: var(--text-main-high);
			}
		.comment_name img {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			margin-right: 5px;
		}

	/* Etiquetas de tipo de comentario, con padding y borde redondeado */
	.comm_type {
		display: inline-block;
		padding: 2px 6px;
		font-size: 0.8em;
		border-radius: 5px;
		background-color: var(--bg-gray-high);
		color: var(--text-gray-high);
		margin-top: 5px;
		margin-right: 3px;
	}

	/* Hora del comentario */
	#r_panel .comment sup {
		font-size: 0.7em;
		color: var(--text-gray-low);
		margin-top: 5px;
		display: block;
	}

	/* Día del comentario, centrado y con estilo sutil */
	.day_comment {
		text-align: center;
		font-size: 0.8em;
		color: #D2D2D2;
		margin-top: 20px;
		border-bottom: 1px dotted #C2C2C2;
	}
	
/* "RETRACT" Section: #acción generica para mostrar u ocultar un contenido  */

	.retract_resume:not(.sudi_cc_subtitle) {
			display: flex;
			text-align: left;
			padding: 10px 15px 10px 15px;
			margin-top: 10px;
			color: var(--text-main-high);
			border: var(--border-main-high) solid thin;
			font-family: 'sf_pro_textmedium';
			border-radius: 5px;
			justify-content: space-between;
			align-items: center;
		}

		.retract_resume.opened{
			border-bottom: none;
			border-bottom-right-radius: 0px;
			border-bottom-left-radius: 0px;
		}
		
			.retract_resume span {
				display: inline-flex;
				font-size: 1.3em;

			}
					
		.retract_options {
			display:block;
			width:100%;
			height:0px;
			overflow:hidden;
			margin-bottom: 15px;
			box-sizing: border-box;
		}
		.retract_options.opened{ 
			border: var(--border-main-high) solid thin;
			border-top: none;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			padding: 5px;
			box-sizing: border-box;
		} 
		
		.comm_target_img {
			    display: block;
				max-width: 150px;
				margin: 15px auto;
				max-height: 150px;
				width: auto;
				height: auto;
		}
		
		#close_comments {
			position: absolute;
			float: right;
			right: 20px;
			color: #f00024;
			cursor: pointer;
			top: 11px;
			font-size: 1.5em;
			opacity: .7;
		}
			#close_comments:hover {
				opacity: 1;
			}
		#reload_time {
				text-align: center;
				font-size: .6em;
				color: #717171;	
			}

	/* R-panel resume CC */

	.sudi_cc_title {
			display: block;
			box-sizing: border-box;
			border-bottom: #e2e7f0 solid thin;
			height: 50px;
			color: var(--btn-color-light);
		}
			.sudi_cc_title .cc_title_icon { 
				display: inline-flex;
				vertical-align: top;
				width:50px;
				height: inherit;
				align-items: center;
				justify-content:center;
				color:#adaeb9; 
				font-size: 1.4em;
			}
			.sudi_cc_title .title_txt { 
				display: inline-flex;
				vertical-align: top;
				width: calc(100% - 110px);
				height: inherit;
				align-items: center;
			}
			.sudi_cc_close{
				cursor: pointer;
				display: inline-flex;
				vertical-align: top;
				width:50px;
				height: inherit;
				align-items: center;
				justify-content:center;
				box-sizing: border-box;
			}
				.sudi_cc_close:hover { color:#e84b37; }

	.sudi_cc_container {
		display: block;
		height: auto;
		padding: 4px;
	}
		.sudi_cc_container p,
		.sudi_cc_container h1,
		.sudi_cc_container h2,
		.sudi_cc_container ul,
		.sudi_cc_container ol		
		{ font-size: .9em; color: var(--btn-color-light); margin: 5px; }

		.sudi_cc_container h1 { font-size: 1.1em; }
		.sudi_cc_container h2 { font-size: 1em; }

		.sudi_cc_container ul,
		.sudi_cc_container ol		
		{ padding-left: 30px; }

	.sudi_cc_hr {
		border: #e4e6ec solid thin;
		box-shadow: none;
		border-top: none;
		width: 80%;
		margin: 10px auto 30px auto;

	}
		.sudi_cc_hr.hr_100 { width: 100%; display: block; margin: 15px 0px; box-sizing: border-box; }
	.st_item_photo { display: inline-block; width: 30px; height: 30px; border-radius: 50%; }

	.sudi_cc_subtitle { color:var(--btn-color-light); width: 90%;  margin: auto; text-align: center; border-bottom:#e4e6ec solid thin;}
	.sudi_cc_resume {column-count: 1; width: 100%; max-width: 850px; margin: 10px auto; padding: 7px; box-sizing: border-box; }
	.sudi_cc_resume p {
		background-color: var(--bg-gray-low);
		border: var(--border-gray-low) solid thin;
		text-align: center;
		padding: 5px 5px;
		margin: 3px 0px;
		font-family: 'sf_pro_textmedium';
	}
		.sudi_cc_resume p a { text-decoration: underline; }
	
	.sudi_cc_resume p span {
		display: block;
		opacity: .8;
		font-family: 'sf_pro_textthin';
		font-size: .9em;
		margin-bottom: -10px;
	}

	/* RP TAGS */
	.rp_tag_container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px; /* Espacio entre los elementos */
		justify-content: space-between;
		margin: 15px 0px;
	}

	.rp_tag {
		background-color: var(--bg-gray-low);
		padding: 15px;
		box-sizing: border-box;
		flex: 1 0 calc(50% - 10px); /* Ocupa el 50% del ancho del contenedor menos el margen */
		border-radius: 8px;
		display: flex;
		align-items: center;
		border: 1px solid var(--border-gray-medium);
	}

	.rp_tag i {
		font-size: 24px;
		margin-right: 15px;
	}

	.rp_tag_text {
		display: flex;
		flex-direction: column;
		line-height: 1.3;
	}

	.rp_tag h3 {
		margin: 0;
		font-size: .8em;
		color: var(--text-gray-low);
		font-family: 'sf_pro_textthin';
	}

	.rp_tag p {
		margin: 0;
		font-size: .9em;
		color: var(--text-gray-high);
		font-family: 'sf_pro_textmedium';
	}
	
	/* PRE */
	.sudi_cc_resume pre {
			padding: 1em;
			color: #353535;
			background: hsla(0,0%,78%,.3);
			border: 1px solid #c4c4c4;
			border-radius: 2px;
			text-align: left;
			direction: ltr;
			tab-size: 4;
			white-space: pre-wrap;
			font-style: normal;
			min-width: 200px;
			font-family: Arial, Helvetica, sans-serif;	
	}

	.sudi_cc_resume .table table tbody tr td { border: 1px solid #c4c4c4; padding: 0px 5px; }

	.sudi_cc_options {display: block; width: 100%; margin: 20px auto; text-align: center; }
	
		.sudi_cc_options span:not(.switch) { 
			cursor: pointer;
			margin: 5px;
			font-size: .9em;
			text-align: center !important;
			width: 20%;
			display: inline-block;
			vertical-align: middle;
			color: var(--btn-color-light);
		}
			.sudi_cc_options span i { display: block; font-size: 1.5em; color: var(--btn-confirm); }
		.sudi_cc_options span:hover { opacity: .7; }
		.sudi_cc_options span a { text-decoration: none; color: #010101; }


	/* R-panel Btns (2024) */
	.rp_button_container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px; /* Espacio entre los botones */
		justify-content: center;
		margin: 25px 0px;
	}
	
	.rp_btn {
		background-color: var(--bg-main-low);
		color: var(--text-main-high);
		box-sizing: border-box;
		text-align: center;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		font-size: 14px;
		cursor: pointer;
		border: none;
		flex-direction: column; /* Asegura que los íconos y texto estén en columna */
		font-family: var(--font-regular);
	}
		.rp_btn:hover {
			background-color: var(--bg-main-medium);
   			color: var(--text-light-alpha);
		}
	
	 .rp_btn_sq {
		width: 60px;
		height: 60px;
		display: flex;
		flex-direction: column;
		align-items: center; /* Centra el contenido horizontalmente */
		justify-content: center; /* Centra el contenido verticalmente */
	}
	
	.rp_btn_sq i {
		font-size: 1.5em;
	}
	
	.rp_btn_sq_text {
		text-align: center;
		font-size: .75em;
		margin-top: 5px;
		word-break: break-word; /* Permite que el texto se rompa en líneas */
		overflow-wrap: break-word; /* Permite que el texto se rompa en líneas */
		white-space: normal; /* Asegura que el texto pueda envolver */
		width: 100%; /* Asegura que el contenedor del texto no se expanda */
	}
	
	.rp_btn_fw {
		width: 90%;
		margin: auto;
		flex-direction: row;
		justify-content: flex-start;
		padding: 12px 20px;
		color: var(--text-main-high);
		font-size: 1.1em;
	}
	
	.rp_btn_fw i {
		margin-right: 10px;
		opacity: .5;
	}
	
	.rp_btn_fw span {
		flex: 1;
		text-align: left;
		padding-left: 5px;
	}

/* K) REPORTS */

	/* REPORT LIST */

	#report_items_container {
			display:block;
			width:90%;
			margin:20px auto;
			text-align:center;
		}
			.report_item {
				display:inline-block;
				vertical-align:top;
				margin:30px 2px;
				width:250px;
				min-height:50px;
				box-sizing:border-box;
				background-color:#FFF;
				border-radius:5px;
				overflow:hidden;
				border:#E2E2E2 solid 1px;
			}

				.report_item_info {
					display:block;
					height:120px;
					box-sizing:border-box;
					width:100%;
					padding-top: 1px;
					margin-top: -1px;
					cursor:pointer;

				}

					.report_item_info h3 {
						display:block;
						color:var(--color-red);
						text-align:center;
						margin:0px 10px 10px 10px;	
					}

					.report_item_info .icon {
						font-size:3em;
						margin:20px 0px 0px 0px;	
						display:block;
						text-align:center;
						background: -webkit-linear-gradient(rgba(202, 76, 59, 1) 0%, rgba(106, 81, 142, 1) 35%, rgba(137, 182, 85, 1) 65%, rgba(104, 181, 199, 1));
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;	
					}

						.report_item_info:hover { background-color:#FAFAFA; }
						.report_item_info:hover h3{ color:#CACACA;}

				.report_item_resume {
					display:block;
					height:180px;
					box-sizing:border-box;
					width:100%;
					background-color:#FAFAFA;
					padding-top:1px;
					margin-top:-1px;
				}

					.report_item_resume .icon {

						display:block;
						text-align:center;
						margin:60px 0px 0px 0px;
						font-size:4.5em;
						color:#EAEAEA;				
					}

							.report_item_resume:hover .icon {
								color:#FAFAFA;
							}

/* REPORT DETAIL */

#report_list_container {
	padding:30px;
}

	#report_list_container .option_btn {
		float:right;
		cursor:pointer;
		margin-right:20px;
		font-size:1.5em;
	}
		#report_list_container .option_btn i {
			background: -webkit-linear-gradient(rgba(202, 76, 59, 1) 0%, rgba(106, 81, 142, 1) 35%, rgba(137, 182, 85, 1) 65%, rgba(104, 181, 199, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

	#report_list_container h1 {
		color:var(--text-gray-high);
		font-size:1.6em;	
	}
	
	#report_list_container h2 {
		display:block;
		position:relative;
		color:var(--text-gray-medium);
		font-size:1.2em;
		margin: 35px auto 15px auto;
		padding-left:20px;
		text-align:left;
		width:100%;
	}
	
		 #report_list_container h2:after {
			content: " ";
			display: block;
			border-bottom: var(--border-gray-medium) solid thin;
			height: 1px;
			width: 100%;
			margin:0px auto 20px auto;
		 }


	.chart_container {
		width:100%;
		max-width:1000px;
		margin:10px auto;
	}
	.chart_container canvas {
		width:100%;
	}

	.chart_2x { display: flex; align-items: center; max-width: 1100px; margin: auto; }
		.chart_2x .sudi_tb_container { width: 70%; overflow:unset;}
		.chart_2x .chart_container { display: inline-flex; width: 30%;}

.report_table_container {
	display:block;
	width:95%;
	max-width:1200px;
	margin:30px auto;
}
	.report_table_container .table_title {
		display:block;
		text-align:center;
		font-size:.8em;
		margin:2px 0px;	
	}
	.report_table_title_row {
		height:auto;
		background-color:#ca4b3b;
		display: flex; /* Igualamos el alto de lo 'children'*/
	}
	
		.report_table_title_row div {
			display:block;
			height:auto;
			text-align:center;
			padding:8px 0px 8px 0px;
			color:#FFF;
			font-size:.9em;
		}	
		
	.report_table_rows_container {
		border:#b3b3b3 solid thin;
		border-top:none;
		max-height:500px;
		overflow:auto;
		background-color:#FFF;
	}
	
		/* ALT */
		
		.report_table_rows_container.table_alt {
			background-color:rgba(255,255,255,.4);
			border:none;
			border-radius:none;
		}
	
		/* 1000px HEIGHT*/
		
		.report_table_rows_container.table_2x {
			max-height:1000px;
		}
		
		/* NO OVERFLOW */
			
		.report_table_rows_container.no_wrap{
			max-height:none;
			overflow:visible;
		}	
		
	.report_table_row {
		display: flex; /* Igualamos el alto de lo 'children'*/
	}
			
		.report_table_row div {
			position:relative;
			display:inline-block;
			text-align:center;
			padding:18px 0px 18px 0px;
			color:#3c3c3b;
			font-size:.8em;
			box-sizing:border-box;
			
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}	
			
			.line_report_table_row {
				display:block;
				width:85%;
				margin:5px auto;
				height:2px;
				border-bottom:#eaeaea solid thin;
					
			}
	
			.report_table_row_result div {
				padding-top:8px;
				font-size:1.1em;
			}
	
			/* HEADER CONTROLS */
			
			.header_content .input_section {
				margin-top:0px;
				max-width:140px;
			}
			
				.header_content .tooltipQuestion {
					font-size:.6em;	
				}
				
				.header_content .Spry {
					width:100% !important;
				}
					.header_content .Spry label {
						margin:2px 0px 0px 0px;
						text-align:center;
						font-size:.7em;
						
						color:rgba(255,255,255, .85);
					    font-family: 'montserratregular';
					}
					
					.header_content .aTextField { height:30px; border-radius:14px; background-color:rgba(255,255,255,.7); }
					.header_content .date_calendar { top:29px; }
					
			.header_content .report_upbar_btn {
				display:inline-block;
				height:36px;
				width:auto;
				padding:10px 10px;
				border:rgba(255,255,255,.8) solid 2px;
				box-sizing:border-box;
				margin:7px 25px;
				border-radius:6px;
				color:rgba(255,255,255,.8);
				font-size:.8em;
				cursor:pointer;
				transition:all .5s ease;
			}
			
				.header_content .report_upbar_btn:hover {
					background-color:rgba(255,255,255,.9);
					border:rgba(255,255,255,.9) solid 2px;
					color:#6cc04a;	
				}
				
			.report_btn_container {
				display:flex;
				width:80%;
				max-width:600px;
				margin:20px auto;	
			}
			
				.report_detail_btn {
					display:inline-block;
					width:40%;
					margin:5px auto;
					color:#FFF;
					padding:10px 5px;
					text-align:center;
					border-radius:6px;
					cursor:pointer;
					transition:all .5s ease;
					box-sizing:border-box;
					opacity:.8;
					
				}
				
					.report_detail_btn.red {
						background-color:rgba(232,75,55, .8);
						border-color:var(--color-red);
					}
		
					.report_detail_btn.green {
						background-color:rgba(108,192,74, .8);
						border-color:#6cc04a;
					}	
			
						.report_detail_btn:hover {
							opacity:1;
						}
				
			/* DETALLE - CURTAIN*/
			
			.reporte_detail_container {
				display:block;
				width:90%;
				margin:20px auto;
				padding:10px;	
				
			}
			


	/* REPORT LIST */

	#report_items_container {
			display:block;
			width:90%;
			margin:20px auto;
			text-align:center;
		}
			.report_item {
				display:inline-block;
				vertical-align:top;
				margin:30px 2px;
				width:250px;
				min-height:50px;
				box-sizing:border-box;
				background-color:#FFF;
				border-radius:5px;
				overflow:hidden;
				border:#E2E2E2 solid 1px;
			}

				.report_item_info {
					display:block;
					height:120px;
					box-sizing:border-box;
					width:100%;
					padding-top: 1px;
					margin-top: -1px;
					cursor:pointer;

				}

					.report_item_info h3 {
						display:block;
						color:var(--color-red);
						text-align:center;
						margin:0px 10px 10px 10px;	
					}

					.report_item_info .icon {
						font-size:3em;
						margin:20px 0px 0px 0px;	
						display:block;
						text-align:center;
						background: -webkit-linear-gradient(rgba(202, 76, 59, 1) 0%, rgba(106, 81, 142, 1) 35%, rgba(137, 182, 85, 1) 65%, rgba(104, 181, 199, 1));
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;	
					}

						.report_item_info:hover { background-color:#FAFAFA; }
						.report_item_info:hover h3{ color:#CACACA;}

				.report_item_resume {
					display:block;
					height:180px;
					box-sizing:border-box;
					width:100%;
					background-color:#FAFAFA;
					padding-top:1px;
					margin-top:-1px;
				}

					.report_item_resume .icon {

						display:block;
						text-align:center;
						margin:60px 0px 0px 0px;
						font-size:4.5em;
						color:#EAEAEA;				
					}

							.report_item_resume:hover .icon {
								color:#FAFAFA;
							}