body {
    font: .81em/150% Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
input { font-family:Arial, Helvetica, sans-serif; color:#595959; font-size:18px;}
a { outline:none; text-decoration:none;}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px;
    text-align: center;
}
.box {
    width: 90%;
    max-width: 420px;
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(3, 44, 52, 0.22);
    margin: 0 auto;
}

.box h2 { 

    color: #FFF;
    font-size: 26px;
    margin: 0px 5px;
    text-align:center;
    font-weight: bold;
    outline: medium none;
}
.box h1 { 

    color: #FFF;
    font-size: 20px;
    margin: 0px 80px;
    text-align:center;

    font-weight: bold;
    outline: medium none;
}
.box h3 { color:#7f7f7f; font-size:17px; line-height:20px; margin:0; padding:0; font-weight:normal; outline:none;}

.contenido { width:420px; overflow:hidden;  background:#fff; border:1px solid #d5d5d5; }
.form { margin:0; padding:0;}

.copy { float:right; color:#9eabae; font-size:12px; margin:10px 16px 0 0; text-shadow:1px 1px 1px #fff;}

a:link, a:visited {
    text-decoration:none;
    cursor:pointer;
    color:#333333;
}
.oscuro {
    font-weight: bold;
}
.tamañoTxt{
    width: 100%;
}
.tamañoCombo{
    width: 91%;
}
.tamaño100derecha{
    width: 100%;
    float: right;
}
.clicAqui{
    color: blue !important;
    float: right !important;
}

a:hover {
    text-decoration:none;
    cursor:pointer;
    color:#333333;
}
#content1 {
    background: #f7f7f7 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    margin: 0px;
    overflow: auto;
    padding: 7px 28px;
}
.ingresar {  
    background-image: url("/sivenin/javax.faces.resource/imagen/Lock.png.jsf;jsessionid=MyRsWcXvRSfDjHE38Q40_A472iJxMpJG-TwhqCtq.server1app") !important;
    background-position: 1px 0px;
    height: 100%;
    width: 100%;

}


#logo{
    display:block;
    margin-left: auto;
    margin-right: auto; width:223px;height: 100px
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {

    border: 1px solid #cd0a0a !important;;
    background: #ffffff url("") 50% 50% repeat-x !important;
    color:#000   !important;

}
.ui-outputlabel.ui-state-error {
    border: 0 none !important;
    color: #c02c2c  !important;
}

.ui-widget-overlay {
    background: #000000 !important;
    opacity: 0.2 !important;
    filter: Alpha(Opacity=80) !important;
}
myFieldset .ui-fieldset,.ui-fieldset .ui-fieldset-legend {
    background-color: transparent;
    border-color: transparent;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {

    border: 1px solid #cd0a0a !important;;
    background: #ffffff url("") 50% 50% repeat-x !important;
    color:#000   !important;

}
.ui-outputlabel.ui-state-error {
    border: 0 none !important;
    color: #c02c2c  !important;
}
.ui-fieldset, .ui-fieldset .ui-fieldset-legend {
    padding: .6em 1em;
    color: #872417 !important;
    background: white !important;
    font-size: 16px!important;
}
.flex-child {
    display: -ms-flex !important;
    display: -moz-flex !important;
    display: -webkit-flex !important;
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
}
.ui-panel .ui-panel-content {
    border: 0 !important;;
    background: 0 !important;;
    padding: .0em 0em !important;
}
.contenido {
    width: 100%;
    background: #fff;
    border: 1px solid #d5d5d5;
}
body .ui-panelgrid .ui-panelgrid-cell {
  border: 1px solid #dee2e6;
  background: #fff;
  color: #495057;
  padding: 0.3rem !important;
}
body .ui-panelgrid .ui-panelgrid-cell {
  
  background: #f7f7f7  !important;
}

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .main {
        top: 10%; /* Ajusta la posición */
        left: 10%; /* Ajusta la posición */
    }

    .box {
        width: 90%; /* Ocupa el 90% del ancho de la pantalla */
        margin: 0 auto; /* Centra el contenedor */
    }

    .contenido {
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    .box h2 {
        font-size: 20px; /* Reduce el tamaño de la fuente */
    }

    .box h1 {
        font-size: 18px; /* Reduce el tamaño de la fuente */
        margin: 0 10px; /* Ajusta los márgenes */
    }

    .box h3 {
        font-size: 14px; /* Reduce el tamaño de la fuente */
    }

    .copy {
        font-size: 10px; /* Reduce el tamaño de la fuente */
    }
     
}