html, body { font-family: "Helvetica Neue", Helvetica, sans-serif; color: #444; background: #F7F7F7; }

.mb22   { margin-bottom: 22px }
.mb60   { margin-bottom: 60px }
.tac    { text-align:center }
.tal    { text-align:left }
.tar    { text-align:right }
.df   { display:flex }
.aic  { align-items:center !important }
.aifs { align-items:flex-start !important }
.jcc  { justify-content: center !important; }
.fl     { float:left }
.fr     { float:right }
.jcc    { justify-content: center !important; }
.vam    { vertical-align: middle }
.dib    { display: inline-block}
.cp     { cursor:pointer }
.ttlc   { text-transform: lowercase; }
.dn     { display: none}
.fwb    { font-weight:bold }
.fs14   { font-size:14pt }
.fs12   { font-size:12pt }
.fs10   { font-size:10pt }
.fs9    { font-size:9pt }
.fs8    { font-size:8pt }
.c00f  { color:#00f }
.c0f0  { color:#0f0 }
.cf00  { color:#f00 }
.c000  { color:#000 }
.cfff  { color:#fff }



#principal { position:relative; margin:auto;width:360px;height:400px; top:80px; border:0px solid}
#logo { text-align: center; margin-bottom:30px; padding-top:5px }
#lblRecu      { color: #444; font-size: 10pt; text-decoration: underline}
#lblFamilia   { margin-top: 30px; font-weight: bold; font-size: 11pt; text-align: center }
#lblMensaje    {margin-bottom: 10px; color:#FC5F5F;font-size:12pt;font-weight:bold}
#btnIniciar   { width: 200px; }
#btnCrear     { width: 200px; }
#divCrearMensaje { font-size:11pt; margin-bottom: 8px; text-align: justify; background-color: #F9FFDB }
#divCrear2 { display:flex; align-items: center; text-align: center; width: 450px }
#loader1 { display:none; position: fixed; top: 35%; left: 50%; transform: translate(-50%, -50%); font-weight:bold;z-index: 20000; background-color: #fff; border-radius: 45%; }

#frmCrear,#frmRecu { padding-right: 20px; overflow:hidden; background-color: #F7F7F7}
.crearWidthTxt     { width:400px }
.contraToolTip     { width:250px }
#txtCrearContra    { background-image:url(../img/info.jpg); background-repeat:no-repeat; background-position:right; background-size: 20px; }

.frmContenedor { margin-bottom: 8px; height:70px; }
.frmEtiqueta   { font-weight:bold; font-size:11pt; color:#939393; }
.frmMensaje    { margin-top:2px; font-weight:bold; font-size:10pt; }
.frmIndicador  { height:21px; vertical-align: middle}

[placeholder]:focus::-webkit-input-placeholder { transition: text-indent 0.4s 0.4s ease;  text-indent: -100%; opacity: 1; }

input[type=text], input[type=password] { width: 300px; color: #777; height: 35px; border: none; border-bottom: 1px solid #444; font-weight:bold; font-size:12pt; outline: none; background: #F7F7F7; }

/*input[type=text]:hover, input[type=password]:hover { box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #EAEAEA; }*/


.boton    { height: 40px; font-size: 13pt; color: #fff;   border-radius: 5px; border: 1px solid #777; cursor: pointer; font-weight:bold }
.boton2   { height: 27px !important; font-size: 9pt !important; color: #fff;   border-radius: 5px; border: 1px solid #777; cursor: pointer; font-weight:bold }
.botonNar { background-color: #ffcc2A; }  /*#F48727*/
.botonVer { background-color: #A9D046; }
.botonRoj { background-color: #d89186; }
.botonRojo { background-color:#ff5353; }
.botonNeg { background-color: #4E5B62; }

.botonNar:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F2D8A4), to(#F4AA33));
    background-image: -moz-linear-gradient(top left 90deg, #F2D8A4 0%, #F4AA33 100%);
    background-image: linear-gradient(top left 90deg, #F2D8A4 0%, #F4AA33 100%);
}

.botonVer:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#D6E58E), to(#BBCE5C));
    background-image: -moz-linear-gradient(top left 90deg, #D6E58E 0%, #BBCE5C 100%);
    background-image: linear-gradient(top left 90deg, #D6E58E 0%, #BBCE5C 100%);
}

.botonRoj:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eb6d59), to(#e78778));
    background-image: -moz-linear-gradient(top left 90deg, #eb6d59 0%, #c76859 100%);
    background-image: linear-gradient(top left 90deg, #eb6d59 0%, #c76859 100%);
}

.botonRojo:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eb6d59), to(#e78778));
    background-image: -moz-linear-gradient(top left 90deg, #eb6d59 0%, #c76859 100%);
    background-image: linear-gradient(top left 90deg, #eb6d59 0%, #c76859 100%);
}

.botonNeg:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#808384), to(#B9BCBF));
    background-image: -moz-linear-gradient(top left 90deg, #D6E58E 0%, #BBCE5C 100%);
    background-image: linear-gradient(top left 90deg, #808384 0%, #B9BCBF 100%);
}

.slotVerde, .slotRojo { height:16px; width:42px; border-radius:10%; margin:3px 3px;position:relative; }
.slotVerde { background-color:#0ada18; }
.slotVerde:hover { background-color:#00f !important; }
.slotRojo { background-color:#f00; }
.slotFecha { background-color:#d4d4d4 }


.jq-stars { display: inline-block; }
.jq-rating-label { font-size: 22px;  display: inline-block;  position: relative;  vertical-align: top; font-family: helvetica, arial, verdana; }
.jq-star { width: 100px; height: 100px; display: inline-block; cursor: pointer; }
.jq-star-svg { padding-left: 3px; width: 100%; height: 100% ; }
/*.jq-star:hover .fs-star-svg path { }*/
.jq-star-svg path { /* stroke: #000; */ stroke-linejoin: round; }
.jq-shadow { -webkit-filter: drop-shadow( -2px -2px 2px #888 ); filter: drop-shadow( -2px -2px 2px #888 ); }

.loader {border:4px solid; background-color:#fff; height:150px; width:350px; font-weight: bold; font-size: 14pt; z-index: 1000; position: absolute;  left:50px; bottom: 20px; text-align: center; padding-top: 10px; display:none }