body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}


HR.line1 {
	border: 2px solid #DCDCDC;
	border-top: none;
	border-left: none;
	border-right: none;
}


HR.line2 {
	border-top: 1px solid;
	
}


a:link {
	color: #006699;
}
a:visited {
	color: #006699;
}
a:hover {
	color: #000000;
	text-decoration: none;
	
}
a:active {
	color: #006699;
	text-decoration: none;
}
a:link.srv {
	font-family: 'Gotham';
	font-size: 12px;

	color: #004080;
	text-decoration: none;
}
a:visited.srv {
	font-family: 'Gotham';
	font-size: 12px;

	color: #004080;
	text-decoration: none;	
}
a:hover.srv {
	font-family: 'Gotham';
	font-size: 12px;

	color: #004080;
	text-decoration: underline;
}
a:active.srv {
	font-family: 'Gotham';
	font-size: 12px;

	color: #004080;
}
input {
	font-family: 'Gotham, Tahoma, Verdada';
	font-size: 12px;
}
select {
	font-family: 'Gotham, Tahoma, Verdada';
	font-size: 12px;
}


.menuItem {
	font-family: 'Gotham, Tahoma, Verdana';
	font-size: 12px;
	color: #004080;
	text-align:center;
	text-decoration:none;
	padding-top:3px; 
	padding-bottom:3px;
	cursor:hand;
}
.menuItemHover {
	font-family: 'Gotham, Tahoma, Verdana';
	font-size:12px;
	color: #004080;
	text-align:center;
	padding-top:3px; 
	padding-bottom:3px;
	cursor:hand;
}
.menuItemDes {
	font-family: 'Gotham', 'Tahoma', 'Verdana';
	font-size:12px;
	color: #004080;
	text-align:center;
	cursor:hand;
}
.menuSubItem {
	font-family: 'Gotham', 'Tahoma', 'Verdana';
	font-size:12px;
	color: #004080;
	text-align:center;
	padding-top:3px; 
	padding-bottom:3px;
	cursor:hand;

}
.menuSubItemHover {
	font-family: 'Gotham', 'Tahoma', 'Verdana';
	font-size:12px;
	color: #004080;
	text-align:center;
	padding-top:3px; 
	padding-bottom:3px;
	cursor:hand;

}

#cajita > input {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    margin: 0;
    opacity: 0;
    padding-inline-start: 20px;
    position: absolute;
    top: 0;
    width: 100%;
}

#cajita-container {
    margin: 0 auto 0 auto;
    min-width: 410px;
    width: var(--content-width);
}

#cajita {
    background: white;
    border-radius: 22px;
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
    box-sizing: border-box;
    cursor: text;
    font-size: 16px;
    height: 44px;
    margin: 0 auto;
    max-width: 584px;
    opacity: 1;
    position: relative;
    transition: none;
}

#cajita-search-icon {
    -webkit-mask-image: url(dn000572.ferozo.com/icono-buscar.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background: 24px 24px rgb(117, 117, 117);
    bottom: 0;
    height: 24px;
    left: 0;
    margin: auto 0;
    margin-inline-start: 16px;
    position: absolute;
    top: 0;
    width: 24px;
}

.cuerpo {
    font-family: 'Verdana', 'Arial', 'Helvetica', 'sans-serif';
    font-size: 15px;
    color: #333333;
    list-style-type: disc;
    line-height: 15px;
    margin: 15px 0 10px 0;
}

 .cuerpo-caja {
    font-family: 'Verdana', 'Arial', 'Helvetica', 'sans-serif';
    font-size: 15px;
   
}

 .cuerpito-caja {
    font-family: 'Verdana', 'Arial', 'Helvetica', 'sans-serif';
    font-size: 10px;
    color: #333333;
    list-style-type: disc;
    line-height: 11px;
    margin: 10px 0 10px 0;
}

.fichaA {
	font-family: 'SF', 'Arial', 'Helvetica', 'sans-serif';
	font-size: 16px;
	color: #004080;
	line-height: 16px;
	list-style-type: disc;
}


.fichaB {
	font-family: 'SF', 'Arial', 'Helvetica', 'sans-serif';
	font-size: 16px;
	color: #808080;
	list-style-type: disc;
	line-height: 16px;
	
}

<style>
    .fade-in {
        opacity: 0;
        transition: opacity 1s ease-in;
    }

    .fade-in.visible {
        opacity: 1;
    }
</style>