@import "WorkWithPlusBaseDS.css";
@import "WorkWithPlusDS_Tokens.css";


@layer WorkWithPlusDS {
/* [gx-css-import ignore - start] */
 
/* [gx-css-import ignore - end] */
/* [gx-css-user-controls - start] */
/* [gx-css-user-controls - end] */
@keyframes fadeIn{
	from {opacity : 0;
		transform : translateY(15px);}
	to {opacity : 1;
		transform : none;}
}
.TableSearchWhite 
{
	padding-bottom : 35px;
	padding-top : 35px;
	background-color : #fff;
	border-bottom-color : #99ABB4;
	border-left-color : #99ABB4;
	border-right-color : #99ABB4;
	border-top-color : #99ABB4;
	border-style : solid;
	border-width : 1px;
	border-radius : var(--radius_l);
	width : 1000px;
}
.FiltroRadio 
{
	display : grid;
	margin-right : -100px;
}
.FiltroButton 
{
	margin-top : 10px;
}
.TablaContainerGrid 
{
	min-width : 750px;
}
.AttributeSeachGrid 
{
	color : #000;
	border-color : #444;
	border-radius : var(--radius_l);
}
.HRLine 
{
	border-top : 3px solid #f0ad4e;
	margin-top : 20px;
	margin-bottom : -20px;
}
.ColorLink 
{
	color : #999;
}
.ColorLink A:link 
{
	color : #999;
}
.CellCenterTable 
{
	display : flex;
	justify-content : center;
}
.DataConcentLoginExtra 
{
	display : flex;
	justify-content : space-around;
	flex-wrap : nowrap;
}
.IMGMarcaAgua 
{
	opacity : 0.6;
	background-color : var(--colors_basecolor);
	width : 100%;
	height : 100%;
	position : absolute;
}
.Ventana 
{
	display : flex;
	align-content : center;
	justify-content : center;
	flex-wrap : wrap;
	align-items : center;
}
.FilaHover:hover 
{
	background-color : #d1ecf1;
	cursor : pointer;
	transition : 0.2s;
}
DIV.gx-mask 
{
	background-color : black;
	background-image : var(--GX-Image_loader);
	background-repeat : no-repeat;
	left : 0px;
	position : absolute;
	top : 0px;
	height : 100%;
	width : 100%;
	animation : entermask 1s;
	-webkit-animation : entermask 1s;
	-ms-filter : "alpha(opacity=10)";
	opacity : .60;
	display : inline-block;
	background-position : center;
}
DIV.gx-mask::after 
{
	content : "Cargando...";
	position : absolute;
	left : 50%;
	top : calc(50% + 80px);
	transform : translateX(-50%);
	color : white;
	font-size : 18px;
	font-family : Arial, sans-serif;
}
.FormBackgroundImageVic 
{
	position : relative;
	overflow : auto;
}
.FormBackgroundImageVic::before 
{
	content : "";
	position : absolute;
	inset : 0;
	background-image : var(--GX-Image_paco);
	background-size : cover;
	background-position : center;
	opacity : 0.40;
	z-index : 0;
}
.FormBackgroundImageVic > * 
{
	position : relative;
	z-index : 1;
}
.RoundedImageModules 
{
	width : 100%;
	height : 320px;
	object-fit : contain;
	background-color : #f5f5f5;
	border-radius : 20px;
	margin : 15px;
	padding : 8px;
	display : block;
	overflow : hidden;
	box-shadow : 0 4px 10px rgba(0,0,0,0.12);
	box-sizing : border-box;
}
.SearchContainer 
{
	width : min(92%, 900px);
	margin : 12px auto;
	padding : 32px;
	background : linear-gradient(
                145deg,
                #ffffff,
                #fafafa
            );
	border-radius : 24px;
	border : 1px solid rgba(226,232,240,.8);
	box-shadow : 0 15px 35px rgba(15,23,42,.08);
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	align-items : center;
	gap : 20px;
	box-sizing : border-box;
}
.InputGroup 
{
	flex : 1;
	min-width : 240px;
}
.SearchInput 
{
	width : 100%;
	height : 50px;
	border-radius : 14px;
	border : 1px solid #cbd5e1;
	background : #ffffff;
	color : #334155;
	font-size : 15px;
	transition : .25s;
	box-sizing : border-box;
}
.SearchInput:hover 
{
	border-color : #94a3b8;
}
.SearchInput:focus 
{
	outline : none;
	border-color : #f59e0b;
	box-shadow : 0 0 0 4px rgba(245,158,11,.15);
}
.SearchButton 
{
	height : 50px;
	padding : 0 45px;
	border-radius : 14px;
	border : none;
	background : linear-gradient(
            135deg,
            #fbbf24,
            #f59e0b
        );
	color : white;
	font-size : 15px;
	font-weight : 700;
	cursor : pointer;
	box-shadow : 0 8px 20px rgba(245,158,11,.25);
	transition : .3s;
}
.SearchButton:hover 
{
	transform : translateY(-3px);
	box-shadow : 0 14px 25px rgba(245,158,11,.35);
}
.ResultContainer 
{
	width : min(92%,900px);
	margin : 5px auto;
	padding : 30px;
	background : white;
	border-radius : 24px;
	border : 1px solid #dcfce7;
	border-left : 1px solid #22c55e;
	box-shadow : 0 12px 30px rgba(15,23,42,.08);
	animation : fadeIn .4s ease;
}
.ResultContainer table 
{
	width : 100%;
	border-collapse : collapse;
}
.ResultContainer th 
{
	text-align : left;
	padding : 14px;
	color : #64748b;
	font-size : 13px;
	text-transform : uppercase;
}
.ResultContainer td 
{
	padding : 18px 14px;
	color : #334155;
	border-top : 1px solid #f1f5f9;
}
.HelpContainer 
{
	width : min(92%,900px);
	margin : 12px auto;
	padding : 28px;
	background : linear-gradient(
            135deg,
            #f8fafc,
            #ffffff
        );
	border-radius : 24px;
	border : 1px solid #dbeafe;
	box-shadow : 0 12px 30px rgba(15,23,42,.06);
}
.HelpTitle 
{
	font-size : 18px;
	font-weight : 600;
	color : #1e3a8a;
	margin-bottom : 12px;
	line-height : 1.4;
}
.HelpDescription 
{
	font-size : 14px;
	font-weight : 400;
	color : #1e3a8a;
	margin-bottom : 12px;
	line-height : 1.4;
}
.RoundedImageModules2 
{
	width : 260px;
	height : 180px;
	object-fit : contain;
	background : white;
	padding : 12px;
	border-radius : 20px;
	border : 1px solid #e2e8f0;
	box-shadow : 0 10px 25px rgba(15,23,42,.12);
	transition : transform .35s ease,
        box-shadow .35s ease;
	cursor : pointer;
}
.RoundedImageModules2:hover 
{
	transform : scale(1.25)
        translateY(-8px);
	box-shadow : 0 20px 40px rgba(15,23,42,.20);
}
.HelpImagesContainer 
{
	width : 100%;
	display : flex;
	justify-content : center;
	align-items : center;
	gap : 15px;
	flex-wrap : wrap;
	margin-top : 25px;
	padding : 10px;
}


@media (max-width:700px)
{
	.SearchContainer 
	{
		flex-direction : column;
		align-items : stretch;
	}
	.SearchButton 
	{
		width : 100%;
	}
	.RoundedImageModules2 
	{
		width : 100%;
		max-width : 320px;
	}
	.HelpContainer 
	{
		padding : 20px;
	}
}

}