.tipo_area { 
    font-family: 'Nanum Gothic', sans-serif; 
    font-weight: 700; 
    font-size:21px; 
    text-align:center; 
    padding:25px 0 5px 0; 
    letter-spacing:2px; 
    color:#999;
}
.cst_area { 
    width: 100%;
    font-family: 'Nanum Gothic', sans-serif; 
    font-weight: 700; 
    font-size:21px; 
    text-align:center; 
    padding:5px 0 20px 0; 
    letter-spacing:2px; 
    color:#999;
}
a.cst_area, a.cst_area:visited, a.cst_area:hover { 
    display: grid;
    width: 100%;
    font-family:'Nanum Gothic', sans-serif; 
    font-weight: 700; 
    font-size:21px; 
    text-align:center; 
    letter-spacing:2px; 
    color:#999;
}

.cst_cargo { 
    width: 100%;
    font-family: 'Nanum Gothic', sans-serif; 
    font-weight: 700; 
    font-size:17px; 
    text-align:center; 
    padding-bottom:13px; 
    letter-spacing:1px; 
    color:#CCC;
}



/*======================================================= CONSULTORES */
.cst_box {
    height:100%; 
    width:100%;
    display: grid;
    grid-template-rows:  29px;
    grid-template-columns:  1fr  340px  1fr;
    grid-template-areas: "  .    cst    .";
    justify-items: center; align-items: center;
}
.cst {
    grid-area: cst;
    height:100%; 
    width:100%;
    display: grid;
    grid-template-rows:  28px  1px;
    grid-template-columns:  200px  35px    35px  35px  35px;
    grid-template-areas: "  name   unidad  edit  act   chf"
                         "  .      .      .    .     .";
    justify-items: center; align-items: center;
    background: #9CF;
}
.name {
    grid-area: name;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #036;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 16px;
    background: #FFF;
    padding-left: 5px;
}
.tname {
    grid-area: name;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #39F;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 12px;
    background: #FFF;
    padding-left: 5px;
    letter-spacing:2px; 
}
a.name:link, a.name:hover {
    text-decoration: none;
    font-size: 16px;
    color: #036;
}
.tunidad {
    grid-area: unidad;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 11px;
    background: #FFF;
}
.unidad {
    grid-area: unidad;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: rgb(255, 160, 51);
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 13px;
    background: #FFF;
}
.chf {
    grid-area: chf;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #036;
    background: #FFF;
}
.tchf {
    grid-area: chf;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}
.act {
    grid-area: act;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #036;
    background: #FFF;
}
.tact {
    grid-area: act;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}
.edit {
    grid-area: edit;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #036;
    background: #FFF;
}
.tedit {
    grid-area: edit;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}
.submenu {
    text-align:center; 
    vertical-align:middle;
    padding:20px 0;
}
.op_izq {
    padding-right:30px;
    vertical-align:middle;
}
a.op_izq:link {
    text-decoration: none;
}
.op_der {
    vertical-align:middle;
}



/*======================================================= CONSULTORIA */
.consultoria_box {
    height:100%; 
    width:100%;
    display: grid;
    grid-template-rows:  29px;
    grid-template-columns:  1fr  380px       1fr;
    grid-template-areas: "  .    consultoria  .";
    justify-items: center; align-items: center;
}
.consultoria {
    grid-area: consultoria;
    height:100%; 
    width:100%;
    display: grid;
    grid-template-rows:  28px  1px;
    grid-template-columns:  30px   160px    160px      30px;
    grid-template-areas: "  mover  usuario  encargado  wa1"
                         "  .      .        .          .";
    justify-items: center; align-items: center;
    background: #9CF;
}
.usuario {
    grid-area: usuario;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #036;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 16px;
    background: #FFF;
    padding-left: 5px;
}
.tusuario {
    grid-area: usuario;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #39F;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 12px;
    background: #FFF;
    padding-left: 5px;
    letter-spacing:2px; 
}
.encargado {
    grid-area: encargado;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #036;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 16px;
    background: #FFF;
    padding-left: 5px;
}
a.encargado:visited, a.encargado:hover {
    font-size: 16px;
    font-weight: 700; 
}
.tencargado {
    grid-area: encargado;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #39F;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 12px;
    background: #FFF;
    padding-left: 5px;
    letter-spacing:2px; 
}


.wa1 {
    grid-area: wa1;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    background: #FFF;
}
.twa1 {
    grid-area: wa1;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}
.mover {
    grid-area: mover;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    background: #FFF;
}
.tmover {
    grid-area: mover;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}


/*======================================================= WORK */
.work_box {
    height:100%; 
    width:100%;
    display: grid;
    grid-template-rows:  29px;
    grid-template-columns:  1fr  380px       1fr;
    grid-template-areas: "  .    work  .";
    justify-items: center; align-items: center;
}
.work {
    grid-area: work;
    height:100%; 
    width:100%;
    display: grid;
    grid-template-rows:  28px  1px;
    grid-template-columns:  160px   160px    30px      30px;
    grid-template-areas: "  worker  familia  enviador  templo"
                         "  .      .        .          .";
    justify-items: center; align-items: center;
    background: #9CF;
}
.worker {
    grid-area: worker;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #036;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 16px;
    background: #FFF;
    padding-left: 5px;
}
.tworker {
    grid-area: worker;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: start; align-items: center;
    color: #39F;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700; 
    font-size: 12px;
    background: #FFF;
    padding-left: 5px;
    letter-spacing:2px; 
}

.enviador {
    grid-area: enviador;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    background: #FFF;
}
.tenviador {
    grid-area: enviador;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}
.templo {
    grid-area: templo;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    background: #FFF;
}
.ttemplo {
    grid-area: templo;
    height:100%; 
    width:100%;
    display: grid;
    justify-items: center; align-items: center;
    color: #39F;
    background: #FFF;
    font-size: 11px;
}