/* mixpro.cloud */
/* 
    Created on : Dec 10, 2024, 7:58:58 PM
    Author     : Renato Vizuet
*/

@font-face 
    {
    font-family: 'AvenirMedium';
    src: url('../ttf/Avenir/AvenirNextLTPro-MediumCn.otf');
    font-weight: normal;
    font-style: normal;
    }

@font-face 
    {
    font-family: 'AvenirRegular';
    src: url('../ttf/Avenir/AvenirNextLTPro-Regular.otf');
    font-weight: normal;
    font-style: normal;
    }

@font-face 
    {
    font-family: 'WebSymbolsRegular';
    src: url('../ttf/webSymbols/websymbols-regular-webfont.eot');
    src: url('../ttf/webSymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../ttf/webSymbols/websymbols-regular-webfont.woff') format('woff'),
         url('../ttf/webSymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('../ttf/webSymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Estilos generales */
body
    {
    background: #000000;
    color: #D8D8D8;
    margin: 0px;
    padding: 0px;
    font-family: Arial, sans-serif;
    font-size: 11pt;
    }

.centrado
    {
    text-align: center;
    margin-top: 15px;
    }

.normalText
    {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    color: #484848;
    }

.smallText
    {
    font-family: Arial, sans-serif;
    font-size: 9pt;
    color: #484848;
    }

.normalWhiteText
    {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    color: #FFFFFF;
    }

.italicGrayText
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #878787;
    font-style: italic;
    }

.mixproFooterText
    {
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: #706CD0;
    }

.RVfooterText
    {
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: #8AF780;
    }

.nombreUsuarioHeader
    {
    font-family: 'AvenirMedium';
    font-size: 9pt;
    color: #8BDB80;
    }

.puestoHeader
    {
    font-family: 'AvenirMedium';
    font-size: 8pt;
    color: #FFFFFF;
    }

.indicacion
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 7pt;
    color: #EEEEEE;
    font-weight: bold;
    }

.indicacionWhite
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 7pt;
    color: #FFFFFF;
    font-weight: bold;
    }

.indicacionBlue
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 7pt;
    color: #427D9D;
    font-weight: bold;
    }

.indicacionBlueSpecial
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #706CFF;
    font-weight: bold;
    }

.indicacionGreen
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #009900;
    font-weight: bold;
    }

.indicacionRed
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #FF0000;
    font-weight: bold;
    }

.indicacionGray
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 7pt;
    color: #B8B8B8;
    font-weight: bold;
    }

.indicacionBlack
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #777777;
    font-weight: bold;
    }

.estatus1   /* En curso */
    {
    font-weight: bold;
    color: #B06702 !important;
    }

.estatus2   /* Por confirmar */
    {
    font-weight: bold;
    color: #35CC38 !important;
    }

.estatus3   /* Confirmado */
    {
    font-weight: bold;
    color: #3574CC !important;
    }

.estatus4   /* Finalizado */
    {
    font-weight: bold;
    color: #5B35CC !important;
    }

.estatus5   /* Cerrado */
    {
    font-weight: bold;
    color: #DE0483 !important;
    }

.estatus8   /* Archivado */
    {
    font-weight: bold;
    color: #585858 !important;
    }

.estatus9   /* Cancelado */
    {
    font-weight: bold;
    color: #FA0202 !important;
    }

.fondoEstatus1   /* En curso */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #B06702;
    color: #FFFFFF !important;
    }

.fondoEstatus2   /* Por confirmar */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #35CC38;
    color: #FFFFFF !important;
    }

.fondoEstatus3   /* Confirmado */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #3574CC;
    color: #FFFFFF !important;
    }

.fondoEstatus4   /* Finalizado */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #5B35CC;
    color: #FFFFFF !important;
    }

.fondoEstatus5   /* Cerrado */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #DE0483;
    color: #FFFFFF !important;
    }

.fondoEstatus8   /* Archivado */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #585858;
    color: #FFFFFF !important;
    }

.fondoEstatus9   /* Cancelado */
    {
    font-weight: normal;
    font-size: 7pt;
    border-radius: 0px 4px 4px 0px;
    background-color: #FA0202;
    color: #FFFFFF !important;
    }

.divTitle
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
    color: #484848;
    font-weight: bold;
    }

#flechitaParriba
    {
    display: none; 
    opacity: .3; 
    position: fixed; 
    bottom: 11%; 
    right: 5%; 
    transition: all .3s linear;
    }

#flechitaParriba:hover
    {
    opacity: .7;
    }
    
/* ------------------------------------------------------------------------------------------------- */
/* Estilos para las tablas */
.etiquetaCampo
    {
    background: linear-gradient(to right, transparent, #EEEEEE);
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    }

.campoTabla
    {
    background: linear-gradient(to right, #EEEEEE, transparent);
    padding: 5px;
    border-radius: 4px;
    }

.tableTitle
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11pt;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    height: 30px;
    padding: 3px;
    border-bottom: 1px solid #CCCCCC;
    }

.tableTitleMini
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 9pt !important;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    height: 22px;
    padding: 3px;
    border-bottom: 1px solid #CCCCCC;
    }

.tableText
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #484848;
    padding: 3px;
    opacity: 1;
    border-bottom: 1px solid #CCCCCC;
    }

.tableTextMini
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #484848;
    padding: 3px;
    opacity: 1;
    }

.trHover
    {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    color: #484848;
    background-color: transparent;
    transition: all 200ms;
    }

.trHover:hover 
    {
    background-color: #D4D4D4;
    }

tr:nth-child(even)
    {
    background-color: #EEEEEEBB;
    }

/* Estilos para sombreado de color en Tablas */
.fondoGris
    {
    background-color: rgb(119, 119, 119);
    color: #FFFFFF;
    }

.fondoGrisAlterno
    {
    background-color: rgb(153, 153, 153);
    }

.fondoGrisClaro
    {
    background-color: rgb(200, 200, 200);
    }

.fondoBlanco
    {
    background-color: rgb(255, 255, 255);
    color: #484848;
    }

.fondoAzul
    {
    background-color: rgb(29, 53, 87);
    color: #FFFFFF;
    }

.fondoAzulAlterno
    {
    background-color: rgb(59, 83, 117);
    color: #FFFFFF;
    }

.fondoCeleste
    {
    background-color: rgb(96, 150, 180);
    color: #FFFFFF;
    }

.fondoCelesteAlterno
    {
    background-color: rgb(147, 191, 207);
    color: #FFFFFF;
    }

.fondoVerde
    {
    background-color: #7ACA70;
    color: #484848;
    }

.fondoVerdeAlterno
    {
    background-color: #9CEC91;
    color: #686868;
    }

.fondoPurpura
    {
    background-color: #706CD0;
    color: #FFFFFF;
    }

.fondoPurpuraAlterno
    {
    background-color: #817DE1;
    color: #FFFFFF;
    }

.fondoPurpuraClaro
    {
    background-color: #A39FF2;
    color: #FFFFFF;
    }

.fondoGuinda
    {
    background-color: rgb(114, 61, 70);
    color: #FFFFFF;
    }

.fondoGuindaAlterno
    {
    background-color: rgb(144, 101, 100);
    color: #FFFFFF;
    }

.fondoRosa
    {
    background-color: rgb(134, 112, 112);
    color: #FFFFFF;
    }

.fondoRosaAlterno
    {
    background-color: rgb(208, 175, 175);
    color: #FFFFFF;
    }

.fondoNaranja
    {
    background-color: rgb(255, 124, 57);
    color: #FFFFFF;
    }

.fondoNaranjaAlterno
    {
    background-color: rgb(253, 151, 98);
    color: #FFFFFF;
    }

.fondoRojo
    {
    background-color: rgb(235, 37, 37);
    color: #FFFFFF;
    }

.fondoRojoAlterno
    {
    background-color: rgb(255, 67, 67);
    color: #FFFFFF;
    }

.fondoTeal
    {
    background-color: #427D9D;
    color: #FFFFFF;
    }

.fondoTealAlterno
    {
    background-color: #9BBEC8;
    color: #FFFFFF;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Vínculos */

.loginLink
    {
    margin: 15px auto;
    font-family: Arial, sans-serif;
    color: #D8D8D8;
    text-decoration: none;
    transition: all 300ms;
    }

.loginLink:hover
    {
    color: #FFFFFF;
    text-decoration: underline;
    }

.breadCrumbLink
    {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    color: #C8C8C8;
    text-decoration: none;
    transition: all 300ms;
    }

.breadCrumbLink:hover
    {
    text-decoration: underline;
    color: #FFFFFF;
    }

.purpleNormalLink
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #706CFF;
    text-decoration: none;
    transition: all 300ms;
    }

.purpleNormalLink:hover
    {
    text-decoration: underline;
    }

.purpleMiniLink
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #706CFF;
    text-decoration: none;
    font-weight: bold;
    transition: all 300ms;
    }

.purpleMiniLink:hover
    {
    text-decoration: underline;
    }

.greenMiniLink
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #7ACA70;
    text-decoration: none;
    font-weight: bold;
    transition: all 300ms;
    }

.greenMiniLink:hover
    {
    text-decoration: underline;
    }

.greenNormalLink
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #8AF780;
    text-decoration: none;
    font-weight: bold;
    transition: all 300ms;
    }

.greenNormalLink:hover
    {
    text-decoration: underline;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Botones */
.bigGreenButton
    {
    background-color: #8BDB80;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
    letter-spacing: 1px;
    color: #484848;
    border: none;
    border-radius: 5px;
    margin-top: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 300ms;
    }

.bigGreenButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #8AF780;
    color: #585858;
    cursor: pointer;
    }

.smallGreenButton
    {
    background-color: #8BDB80;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #484848;
    border: none;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all 300ms;
    }

.smallGreenButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #8AF780;
    color: #585858;
    cursor: pointer;
    }

.bigPurpleButton
    {
    background-color: #706CD0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
    letter-spacing: 1px;
    color: #DDDDDD;
    border: none;
    border-radius: 5px;
    margin-top: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 300ms;
    }

.bigPurpleButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #706CFF;
    color: #FFFFFF;
    cursor: pointer;
    }

.smallPurpleButton
    {
    background-color: #706CD0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #DDDDDD;
    border: none;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all 300ms;
    }

.smallPurpleButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #706CFF;
    color: #FFFFFF;
    cursor: pointer;
    }

.bigRedButton
    {
    background-color: #FF0000;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
    letter-spacing: 1px;
    color: #FFFFDD;
    border: none;
    border-radius: 5px;
    margin-top: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 300ms;
    }

.bigRedButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #FF0033;
    color: #FFFFFF;
    cursor: pointer;
    }

.smallRedButton
    {
    background-color: #EE0000;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #DDDDDD;
    border: none;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all 300ms;
    }

.smallRedButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #FF0000;
    color: #FFFFFF;
    cursor: pointer;
    }
    
.bigGrayButton
    {
    background-color: #777777;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
    letter-spacing: 1px;
    color: #DDDDDD;
    border: none;
    border-radius: 5px;
    margin-top: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 300ms;
    }

.bigGrayButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #888888;
    color: #FFFFFF;
    cursor: pointer;
    }

.smallGrayButton
    {
    background-color: #888888;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #DDDDDD;
    border: none;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all 300ms;
    }

.smallGrayButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #999999;
    color: #FFFFFF;
    cursor: pointer;
    }

.bigWhiteButton
    {
    background-color: #EBEBEB;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
    letter-spacing: 1px;
    color: #686868;
    border: none;
    border-radius: 5px;
    margin-top: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 300ms;
    }

.bigWhiteButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #FFFFFF;
    color: #585858;
    cursor: pointer;
    }

.smallWhiteButton
    {
    background-color: #EBEBEB;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #686868;
    border: none;
    border-radius: 5px;
    padding-top: 3px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right:10px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: all 300ms;
    }

.smallWhiteButton:hover
    {
    box-shadow: 2px 2px 5px #000000;
    background-color: #FFFFFF;
    color: #585858;
    cursor: pointer;
    }
/* ------------------------------------------------------------------------------------------------- */
/* Estilos para los campos */
.bigWhiteSelect
    {
    width: 500px !important;
    height: 30px;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #484848;
    padding: 3px;
    border-color: #164863;
    }

.smallWhiteSelect
    {
    width: 290px !important;
    height: 30px;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #484848;
    padding: 3px;
    border-color: #164863;
    border-radius: 3px;
    }

.miniWhiteSelect
    {
    width: 150px !important;
    height: 30px;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #484848;
    padding: 3px;
    border-color: #164863;
    border-radius: 3px;
    }

.microWhiteSelect
    {
    width: 120px;
    height: 17px;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #484848;
    padding: 1px;
    border: none;
    border-radius: 3px;
    }

.microGreenSelect
    {
    width: 19px !important;
    height: 20px;
    background-color: #8BDB80;
    font-family: Verdana, Arial, sans-serif;
    font-size: 9pt;
    color: #484848;
    padding: 1px;
    border: none;
    border-radius: 3px;
    }

/* ------------------------------------------------------------------------------------------------- */
/* MENÚ de navegación */
#nav
    {
    font-family: 'AvenirMedium';
    color: #706CD0;
    height: 30px;
    font-size: 12pt;
    padding: 0px;
    margin: 0px;
    }

#nav ul
    {
    list-style: none;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    margin: 0px;
    }

#nav > ul > li
    {
    float: left;
    transition: all 300ms;
    margin-right: 50px;
    }

#nav > ul > li a
    {
    color: #706CD0;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0px;
    line-height: 30px;
    }

#nav > ul > li:hover
    {
    background-color: #272727;
    }

/*  Menú desplegable ---------------------------------- */
#nav > ul > li > ul
    {
    display: none;
    position: fixed;
    z-index: 10;
    border-top: 5px solid #706CD0;
    box-shadow: 0px 3px 5px 0px #000000;
    }

#nav > ul > li:hover > ul
    {
    display: block;
    }

#nav > ul > li:hover > ul > li
    {
    background-color: #706CD0BB;
    border-bottom: 1px solid transparent;
    padding: 8px;
    line-height: 25px;
    font-size: 11pt;
    transition: all 300ms;
    }

#nav > ul > li:hover > ul > li a
    {
    line-height: 25px;
    color: #FFFFFF;
    }

#nav > ul > li:hover > ul > li:hover
    {
    text-decoration: none;
    background-color: #FFFFFF;
    border-bottom: 1px solid transparent;
    }

#nav > ul > li:hover > ul > li > a:hover
    {
    color: #706CD0;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Efectos de sombra general */
.drop-shadow 
    {
    float: center;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

.drop-shadow:before,
.drop-shadow:after 
    {
    content: "";
    position: absolute;
    z-index: -2;
    }

.raised /* Caja elevada */
    {
    -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Estilos para el manejo de tabs (pestañas) */
.tab 
    {
    overflow: hidden;
    border: none;
    }

.tab button 
    {
    background-color: rgba(180, 180, 180, .95);
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    transition: 0.3s;
    font-size: 11px;
    }

.tab button:hover 
    {
    background-color: #CCCCCC;
    }

.tab button.active 
    {
    background-color: #CCCCCC; 
    }

.tablinks
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8pt;
    color: #484848;
    }
    
.tabcontent 
    {
    display: none;
    padding: 10px 12px 10px 12px;
    border: none;
    border-top: none;
    background-color: #CCCCCC; 
    box-shadow: 0px 3px 5px #000000;
    border-radius: 0px 0px 8px 8px;
    color: #484848;
    }

.tabHeader
    {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    color: #706CFF;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Estilos para página de login */
#blackOverlay
    {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(50, 58, 50, 0.5); 
    z-index: 9; 
    display: none;
    }

#despliegaSpinner
    {
    background-color: #C5C5C5; 
    position: fixed; 
    top: 15%; 
    left: 10%; 
    width: 80%; 
    height: 60%; 
    padding: 1rem; 
    text-align: center; 
    border-radius: 20px; 
    border: none; 
    z-index: 10; 
    display: none;
    }

#loginContainer
    {
    background-color: #706CD0;
    background: linear-gradient(to bottom, #8AF780, #706CD0);
    padding: 35px;
    margin: 0px auto;
    width: 280px;
    border-radius: 30px;
    }
    
#loginContainer img
    {
    display: block;
    margin: 0px auto;
    margin-top: -20px;
    }
    
.letrero
    {
    font-family: Arial, sans-serif;
    font-size: 12pt;
    color: #484848;
    }
    
#loginContainer input[type="text"]
    {
    display: block;
    width: 90%;
    height: 30px;
    border: none;
    background-color: #FFFFFF;
    color: gray;
    box-shadow: 1px 1px 1px #CCCCCC inset;
    border-radius: 5px;
    margin-top: 20px;
    padding-left: 35px;
    transition: all 300ms;
    font-size: 12pt;
    margin-bottom: 10px;
    border: none;
    outline: none;
    }

#loginContainer input[type="text"]:focus
    {
    color: #484848;
    box-shadow: 1px 1px 1px gray inset;
    background-color: #CCCCCC;
    }
    
#usuarioDisplay
    {
    display: block;
    font-family: 'Arial';
    text-align: center;
    height: 22px;
    color: #FFFFFF;
    }

.nombreUsuario
    {
    font-size: 11pt;
    }

.nombreCompanhia
    {
    font-size: 7pt;
    }

#loginContainer input[type='password']
    {
    display: block;
    width: 90%;
    height: 30px;
    border: none;
    background-color: #FFFFFF;
    color: gray;
    box-shadow: 1px 1px 1px #CCCCCC inset;
    border-radius: 5px;
    margin-top: 20px;
    padding-left: 35px;
    transition: all 300ms;
    font-size: 12pt;
    border: none;
    outline: none;
    }

#loginContainer input[type='password']:focus
    {
    color: #484848;
    box-shadow: 1px 1px 1px gray inset;
    background-color: #CCCCCC;
    }

.icon
    {
    font-family: 'WebSymbolsRegular';
    }

#userIcon
    {
    text-align: center;
    display: block;
    position: absolute;
    margin-left: 11px;
    margin-top: 11px;
    height: 30px;
    color: #555555;
    }

#passwordIcon
    {
    text-align: center;
    display: block;
    position: absolute;
    margin-left: 14px;
    margin-top: 11px;
    height: 30px;
    font-size: 20px;
    color: #555555;
    }

#loginContainer #separador
    {
    height: 15px;
    }

/* ------------------------------------------------------------------------------------------------- */
/* Campos */
textarea
    {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #373737;
    }