/*
    Hoja de estilos diseñada por:
    Eduardo Plascencia Ayala
    CDMX Mayo del 2016
    © 2016 - SERTEC Líder nacional en cobranza

    La plantilla de colores esta 
    http://flatuicolors.com/
    http://www.designskilz.com/colors/indigo
    http://html-color-codes.info/codigos-de-colores-hexadecimales/
*/

/* Inicio Cuerpo*/
html, body {
    /*padding: 0 0 0 0;*/
    margin: 0px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    background-image: url('../images/SpiderV2/fondo-03.png');
}

header {
    /*padding: 0 0 0 0px;*/
    width: 100%;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #2980b9;
    height: 100px;
    background: #222d57;
}

/*INI Ambientes*/
#informacionUsuario {
    float: right;
    text-align: center;
    width: 100%;
    /*height: 13px;*/
    background-color: #222D57;
    margin-bottom: 0px;
    padding: 6px 10px;
    color: #FFF;
    border: 0px solid #CCC;
    font-size: 12px;
    font-family: texgyreadventor-regular;
}

@font-face {
    font-family: 'texgyreadventor-bold';
    src: url('../fonts/TeXGyreAdventor/texgyreadventor-bold.otf') format('opentype');
}

@font-face {
    font-family: 'texgyreadventor-regular';
    src: url('../fonts/TeXGyreAdventor/texgyreadventor-regular.otf') format('opentype');
}

@font-face {
    font-family: 'texgyreadventor-italic';
    src: url('../fonts/TeXGyreAdventor/texgyreadventor-italic.otf') format('opentype');
}


@font-face {
    font-family: 'texgyreadventor-bolditalic';
    src: url('../fonts/TeXGyreAdventor/texgyreadventor-bolditalic.otf') format('opentype');
}

#campana {
    float: right;
    text-align: right;
    width: 100%;
    /*height: 13px;*/
    /*background-color: #2980b9;*/
    margin-bottom: 0px;
    padding: 6px 10px;
    color: #FFF;
    border: 0px solid #CCC;
    font-size: 12px;
}

#informacionUsuarioUAT {
    float: right;
    text-align: left;
    width: 100%;
    /*height: 13px;*/
    background-color: #4db6ac;
    margin-bottom: 0px;
    padding: 6px 10px;
    color: #FFF;
    border: 0px solid #CCC;
    font-size: 12px;
}

footer {
    width: 100%;
    bottom: 0;
    position: fixed;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    background: #ffffff;
}

footerUAT {
    width: 100%;
    background-color: #4db6ac;
    bottom: 0;
    position: fixed;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    height: 40px;
}
/*FIN Ambientes*/

/* Fin Cuerpo*/

/*Inicio Tablas contenido*/
div.centerTable {
    text-align: center;
}

div.centerLeft {
    text-align: justify;
}

/*div.centerTable table {
        margin: 0 auto;
        text-align: left;
        border: red 1px solid;
        width: 1370px;
    }*/

div.centerTable .Contenido {
    vertical-align: top;
    margin: 0 auto;
    text-align: left;
    border: black 0px solid;
    width: 1358px;
}

div.centerTable .ContenidoCandidato {
    vertical-align: top;
    margin: 0 auto;
    text-align: left;
    border: black 0px solid;
    width: 995px;
}

/*Clima Laboral*/

div.centerTable .ClimaLaboral {
    vertical-align: top;
    margin: 0 auto;
    text-align: left;
    border: black 0px solid;
    width: 545px;
}


/*Tiempo y asistencia*/
div.centerTable .ContenidoTiempoAsistencia {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 1250px;
}

div.centerTable .ContenidoTiempoAsistenciaRM {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 950px;
}

div.centerTable .ContenidoTiempoMiAsistencia {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 900px;
}

div.centerTable .ContenidoTiempoAsistencia2 {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 1250px;
}

div.centerTable .ContenidoRM {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 1250px;
}

div.centerTable .Aviso {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 100%;
}

/*Mi calendario*/
div.centerTable .ContenidoMiCalendario {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 910px;
}

div.centerTable .DiasNoLaborables {
    vertical-align: top;
    margin: 0 auto;
    text-align: center;
    border: black 0px solid;
    width: 550px;
}

div.centerTable .CenterTD {
    text-align: center;
}

div.centerTable .Table100 {
    width: 100%;
    vertical-align: top;
}

div.centerTable .TD28 {
    vertical-align: top;
    width: 28%;
    height: 410px;
}

div.centerTable .TD50 {
    vertical-align: top;
    width: 50%;
}

div.centerTable .TD72 {
    vertical-align: top;
    width: 72%;
}

div.centerTable .TD100 {
    vertical-align: top;
    width: 100%;
}

div.centerTable .TD100C {
    vertical-align: top;
    width: 100%;
    text-align: center;
}

div.centerTable TituloContenido {
    text-align: center;
}

.TituloContenido {
    text-align: center;
    border-radius: 3px;
    background-color: white;
    font: 16px Helvetica, Arial, sans-serif;
    color: #2c3e50;
    font-weight: bold;
}

.TituloContenidoV2 {
    text-align: center;
    border-radius: 3px;
    background-color: transparent;
    font: 16px Helvetica, Arial, sans-serif;
    color: white;
    font-family: texgyreadventor-bold
}

.BotonGuarda {
    text-align: right;
}

td.Espacio5 {
    height: 5px;
}


/* Fin Tablas contenido*/

/* Inicio Master Page*/
.nameApp {
    text-align: left;
    vertical-align: middle;
    font-size: 43px;
    color: #006;
}

.txtCerrarSession {
    padding-right: 3px;
    font-size: 13px;
    text-align: right;
    vertical-align: bottom;
}

.txtVersion {
    padding-right: 3px;
    font-size: 13px;
    text-align: right;
    vertical-align: bottom;
    color: #2c3e50;
}

.DescNombreApp {
    font-size: 37px;
    text-align: left;
}

a.nounderline:link, a:visited {
    color: #ffffff;
    text-decoration: none;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    font-size: 12px;
}

a.nounderlineCabecera:link, a:visited {
    text-decoration: none;
    text-decoration: none;
}

/* Fin Master Page*/

/* Inicio LogIn Master Page*/
.SubTabla {
    background: #FFF;
}

.SubTablaTDizq {
    font: 23px Helvetica, Arial, sans-serif;
    font-size: 60px;
    color: #006;
    vertical-align: middle;
    text-align: right;
    width: 68%;
}

.SubTablaTDCenter {
    font: 23px Helvetica, Arial, sans-serif;
    font-size: 60px;
    color: #006;
    vertical-align: middle;
    text-align: center;
    width: 40%;
}

.SubTablaTDneutro {
}

.SubTablaTDder {
    vertical-align: middle;
    text-align: left;
    font: 15px Helvetica, Arial, sans-serif;
    color: #2c3e50;
    text-align: center;
}

/* Inicial Panel de programas */
.SubTablaPanel {
    /* background: #222d57;*/
    width: 100%;
    height: 420px;
    text-align: center;
    vertical-align: middle;
    border-collapse: collapse;
    border: black 0px solid;
    background-image: url(../images/SpiderV2/fondo-01.png);
}

.SubTablaTCentroPanel {
    color: #006;
    vertical-align: middle;
    text-align: right;
    width: 68%;
}
/* Fin Panel de programas */

.SubTablaTDderPanel {
    vertical-align: middle;
    text-align: left;
    font: 15px Helvetica, Arial, sans-serif;
    color: #2c3e50;
    text-align: center;
}


/* Inicio Sidebar */
#sidebar {
    float: none;
    width: 280px;
    text-align: center;
}

    #sidebar ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #sidebar li {
        margin-bottom: 20px;
        padding: 20px 20px 40px 20px;
        background: url(../images/img04.jpg) no-repeat;
    }

        #sidebar li ul {
            line-height: 240%;
        }

        #sidebar li li {
            margin: 0;
            padding: 0;
            background: none;
            padding-left: 15px;
            background: url(../images/img05.gif) no-repeat left center;
        }

    #sidebar h2 {
        font: 37px Helvetica, Arial, sans-serif;
        margin-bottom: 20px;
        text-transform: lowercase;
        color: #2c3e50;
        text-align: center;
    }

#s {
    width: 160px;
}
/* Fin Sidebar */

.CajaDeTextoLogIn {
    border-radius: 3px;
    font: 12px/12px HelveticaNeue, Arial;
    border: 1px solid #BDBDBD;
    width: 200px;
    color: #2E2E2E;
}

.Error {
    font: 12px/12px HelveticaNeue, Arial;
    color: #FF0000;
}

.button {
    /* clase general */
    color: #555;
    border: 1px solid #dedede;
    border-radius: 3px;
    display: inline-block;
    font: bold 12px/12px HelveticaNeue, Arial;
    padding: 8px 11px;
    text-decoration: none;
    width: 203px;
}

    .button.white {
        background: #f5f5f5;
        border-color: #dedede #d8d8d8 #d3d3d3;
        box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
        color: #555;
        text-shadow: 0 1px 0 #fff;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');
    }

        .button.white:hover {
            background: #f4f4f4;
            border-color: #c7c7c7 #c3c3c3 #bebebe;
            box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
            text-shadow: 0 1px 0 #fdfdfd;
            background: -moz-linear-gradient(top, #efefef, #f8f8f8);
            background: -webkit-linear-gradient(top, #efefef, #f8f8f8);
            background: -o-linear-gradient(top, #efefef, #f8f8f8);
            /*background: -ms-linear-gradient(top, #efefef, #f8f8f8);*/
            background: linear-gradient(top, #efefef, #f8f8f8);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');
        }

.buttonLink {
    font: 15px Helvetica, Arial, sans-serif;
    color: #0431B4;
}

.centrado-porcentual30Left {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.centrado-porcentual {
    position: absolute;
    left: 15%;
    top: 23%;
    transform: translate(0%, 0%);
    -webkit-transform: translate(-0%, -0%);
}

.centrado-porcentualNvo {
    position: absolute;
    left: 15%;
    top: 6%;
    transform: translate(0%, 0%);
    -webkit-transform: translate(-0%, -0%);
}
/* Fin LogIn Master Page*/

/* Inicio Estilos catalogos*/

/* Inicio Resgistro de personal*/
td.Titulo {
    text-align: center;
    border-radius: 3px;
    background-color: #fff;
    font: 16px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: bold;
}

td.Titulo2 {
    text-align: center;
    border-radius: 3px;
    font: 16px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: bold;
}

td.TextoColumna {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #2c3e50;
}

td.TextoColumna13 {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 13px Helvetica, Arial, sans-serif;
    color: #2c3e50;
}

td.TextoColumnaizq {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: red;
}

TituloLetras {
    text-align: center;
    border-radius: 3px;
    background-color: #fff;
    font: 16px Helvetica, Arial, sans-serif;
    color: #ff3d00;
    font-weight: bold;
}

td.Subtitulo {
    text-align: left;
    border-radius: 3px;
    /*background-color: #ff3d00;*/
    background-color: #A3811F;
    font: 14px Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-weight: bold;
}


td.SubtituloEspacio {
    text-align: center;
    font: 1px Helvetica, Arial, sans-serif;
    height: 3px;
}

td.EspacioTD30 {
    height: 30px;
}

td.EspacioTD15 {
    height: 15px;
}

td.SubtituloEspacioDer {
    text-align: right;
    font: 30px Helvetica, Arial, sans-serif;
    height: 3px;
}

td.SubtituloEspacioDoble {
    text-align: center;
    font: 1px Helvetica, Arial, sans-serif;
    height: 7px;
}

.TdTop {
    vertical-align: top;
    text-align: center;
}

.TdEspacio17 {
    width: 1%;
    vertical-align: top;
    text-align: center;
}

.TdEspacio83 {
    width: 83%;
}

.TdEspacio83izq {
    width: 99%;
    text-align: left;
}

.TdEspacio5 {
    width: 5%;
}

.TdEspacio90 {
    width: 90%;
}

.TdEspacio30 {
    width: 30%;
}

.TdEspacio40 {
    width: 40%;
}

.TdColumnaTamano {
    width: 20%;
    text-align: left;
}

.TdColumnaTamanoDerecha {
    width: 20%;
    text-align: right;
}

td.EspacioBlanco {
    height: 2px;
}

td.EspacioBlancoGrande {
    height: 10px;
}

td.ColumnaNombre {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
    height: 20px;
    width: 20%;
}

td.ColumnaNombreIzq {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
    text-align: left;
}


td.ColumnaNombreDer {
    text-align: right;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
}

td.ColumnaNombreSimple {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
}

td.ColumnaNombre25 {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
    height: 20px;
    width: 25%;
}

td.ColumnaNombre13 {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
    height: 20px;
    width: 13%;
}

td.ColumnaNombre40 {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
    height: 20px;
    width: 40%;
}

td.ColumnaAncho {
    width: 20%;
}

td.ColumnaNombre100 {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    /*color: #ff3d00;*/
    color: #2c3e50;
    font-weight: normal;
    vertical-align: text-top;
    height: 20px;
    width: 100%;
}

.CajaTextoInput {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 90%;
    width: 170px;
}

.CajaTextoInputAlargado {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 98%;
}

.CajaFechaEntSal {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 95%;
}

.CajaControlesMiCalendario {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 95%;
}

.CajaFechaDescanso {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 100%;
}

.CajaEstilo90 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 100%;
}

.CajaEstilo100 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 100%;
}

.CajaEstilo50 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 50%;
}

.CajaEstilo35 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 35%;
}

.CajaTextoInput200 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 200px;
}

.CajaTextoInputGrade {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 95%;
}

.CajaTextoInputGrade2 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 200px;
}

.CajaFoto {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-weight: normal;
    width: 94%;
}

.CajaTextoInputExtraGrade {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 97%;
}

.CajaTextoInputLibre {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
}

.CajaTextoInput100 {
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 100%;
}

.ComboInput {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 90%;
    width: 170px;
}

.ComboInputGde {
    text-align: left;
    border-radius: 3px;
    background-color: #fff;
    font: 12px Helvetica, Arial, sans-serif;
    color: #34495e;
    font-weight: normal;
    width: 95%;
}


.Boton {
    width: 90%;
}

.BotonRegistro {
    width: 99%;
}

.AlinearIzquierda {
    text-align: left;
}

.AlinearDerecha {
    text-align: right;
}
/* Fin Resgistro de personal*/

/* Inicio Gestion de personal */

.TdEspacio100 {
    width: 100%;
}

/* Fin Gestion de personal */

/* Fin Estilos catalogos*/