* { box-sizing: border-box; }
 
body { 

 font-family: Arial;

}
 
.header {
     font-family-sans-serif: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

 

    background-color: #fff;
    color: #204897;
    font-size: 1em;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
}
 
img {
    border-radius: 50%;
    height: 60px;
    width: 60px;
}
 
.table-users {
    
    max-width: calc(100% - 2em);
    margin: 1em auto;
    width: 1100px;
}
 
table { width: 100%; 

text-align: center;
font-size: 11px;
color:#f4623a;


}
 
td, th { padding: 5px; 
border: 1px solid #ccc;
text-align: center;

}
 
td {
    text-align: center;
    vertical-align: middle;
   
    color:#204897;
}
/*td:last-child {
    
    line-height: 1.4;
    text-align: left;
}
 */
th { background-color: #fff }
 
tr:nth-child(2n) { background-color: white; }
tr:nth-child(2n+1) { background-color: #eeeeee; }

@media screen and (max-width: 600px) {
    table, tr, td {
        display: block;
        border-style: none;
        
     
    }
     
    tr:first-child { display: none; 
    border-style: solid;
 
    
    
    }
     
    td:first-child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        
        
    }
    tr { 
        padding: 10px 0; 
        position: relative; 
        border: 1px solid #ccc;
        
    }
 
    td:not(:first-child) {
        clear: both;
        margin-left: 80px;
        padding: 1px 50px 4px 100px;
        position: relative;
        
    }
     
    td:not(:first-child):before {
        color: #f4623a;
        content: '';
        display: block;
        left: 0;
        position: absolute;
        border-style: none;
    }
    
    td:nth-child(1):before { content: 'No.'; }
    td:nth-child(2):before { content: 'Selecci\00F3n:'; }
    td:nth-child(3):before { content: 'Clave:'; }
    td:nth-child(4):before { content: 'Estaci\00F3n:'; }
    td:nth-child(5):before { content: 'Alcald\00ED a o Municipio:'; }
    td:nth-child(6):before { content: 'Zonificaci\00F3n S\00EDsmica:'; }
    td:nth-child(7):before { content: 'Dist. Epicentro:'; }
    td:nth-child(8):before { content: 'Acel. M\00E1x:'; }
    td:nth-child(9):before { content: 'Fecha GMT:'; }
    td:nth-child(10):before { content: 'Hora GMT:'; }
    td:nth-child(11):before { content: 'Magnitud:'; }
    td:nth-child(12):before { content: 'Gr\00E1 fica:'; }
   
    @media screen and (max-width: 400px) {
    .header {
        background-color: transparent;
        color: #f4623a;
        font-size: 1em;
        font-weight: 700;
        padding: 0;
        text-align: center;
        
    }
     
    img {
        height: 100px;
        margin: 0.5rem 0;
        width: 100px;
    }
     
    td:first-child,
    td:not(:first-child) {
        padding: 5px 12em;
        text-align: center;
        width: 100%;
    }
     
    td:first-child {
        background-color: #efefef;
        border-bottom: 1px solid #ddd;
        position: relative;
        center:0;
        top: 0;
        transform: translateY(0);
    }
     
    td:not(:first-child) { 
        margin: 0;
        text-align: center;
    }
    
    td:not(:first-child):before {
        display: block;
        font-size: 1em;
        padding-top: 0.3em;
        position: relative;
        text-align: center;
    }
     
    td:last-child { padding-bottom: 1rem;
                    text-align: center;

    }
     
    tr {
        background-color: white !important;
        border: 1px solid #ccc;
        margin: 0.5rem 0;
        padding: 0;
        text-align: center;
    }
     
    .table-users {
        border: none;
        box-shadow: none;
        text-align: center;
    }
}
    
}