.no { position: relative; cursor: help; width: 29px; height: 11px; padding: 0px 10px; text-align: left; }
.no2 { position: relative; cursor: help; width: 150px; height: 126px; padding: 0px 10px; text-align: left; }


.novo { background: url(../IMAGE/img_novo.png) center center no-repeat; height: 11px; }
.hoje { background: url(../IMAGE/img_hoje.png) center center no-repeat; height: 11px; }
.ontem { background: url(../IMAGE/img_ontem.png) center center no-repeat; height: 11px; }
.upd { background: url(../IMAGE/img_upd.png) center center no-repeat; height: 11px; }
.del { background: url(../IMAGE/img_del.png) center center no-repeat; height: 11px; }
.novo_dep { background: url(../IMAGE/img_novo_log_dep.png) center center no-repeat; height: 13px; }
.upd_dep { background: url(../IMAGE/img_update_log_dep.png) center center no-repeat; height: 13px; }
.alertaSaldo { background: url(../IMAGE/img_erro.png) center center no-repeat; margin-top: 3px; height: 11px; }


.no2:hover .tt2,
.no2:hover .tt_o2,
.no2:hover .tt_h2 { display: block; z-index: 3; }

.tt2, .tt2 .c_lateral2, .tt2 .s_base2 { float: left; height: 126px; text-transform: none; background: url(../IMAGE/fundo_tooltip_g.png) no-repeat; }
.tt_o2, .tt_o2 .c_lateral2, .tt_o2 .s_base2 { float: left; height: 126px; text-transform: none; background: url(../IMAGE/fundo_tooltip_g_ontem.png) no-repeat; }
.tt_h2, .tt_h2 .c_lateral2, .tt_h2 .s_base2 { float: left; height: 126px; text-transform: none; background: url(../IMAGE/fundo_tooltip_g_hoje.png) no-repeat; }

.tt2,
.tt_o2,
.tt_h2 { display: none; position: absolute; z-index: 1; top: -62px; left: 15px; margin-right: 10px; padding: 5px 5px 5px 15px; text-decoration: none; white-space: nowrap; font-size: 8pt; font: normal bold 10px/27px Arial, Helvetica, Tahoma, sans-serif; color: #f70; line-height: 14px; }

.tt_o2 { color: #fff }
.tt_h2 { color: #fff }

.tt2 .c_lateral2,
.tt_o2 .c_lateral2,
.tt_h2 .c_lateral2 { position: absolute; float: right; width: 10px; top: 0; right: -10px; background-position: right 0; height: 56px; }
.tt2 .s_base2,
.tt_o2 .s_base2,
.tt_h2 .s_base2 { position: absolute; left: 10px; bottom: -8px; width: 21px; height: 13px; background-position: 0 -56px; }


.no:hover .tt,
.no:hover .tt_o,
.no:hover .tt_h { display: block; z-index: 3; }
.tt, .tt .c_lateral, .tt .s_base { float: left; height: 46px; text-transform: none; background: url(../IMAGE/fundo_tooltip_g.png) no-repeat; }
.tt_o, .tt_o .c_lateral, .tt_o .s_base { float: left; height: 46px; text-transform: none; background: url(../IMAGE/fundo_tooltip_g_ontem.png) no-repeat; }
.tt_h, .tt_h .c_lateral, .tt_h .s_base { float: left; height: 46px; text-transform: none; background: url(../IMAGE/fundo_tooltip_g_hoje.png) no-repeat; }


.tt,
.tt_o,
.tt_h { display: none; position: absolute; z-index: 1; top: -62px; left: 15px; margin-right: 10px; padding: 5px 5px 5px 15px; text-decoration: none; white-space: nowrap; font-size: 8pt; font: normal bold 10px/27px Arial, Helvetica, Tahoma, sans-serif; color: #f70; line-height: 14px; }

.tt_o { color: #fff }
.tt_h { color: #fff }

    .tt .c_lateral,
    .tt_o .c_lateral,
    .tt_h .c_lateral { position: absolute; float: right; width: 10px; top: 0; right: -10px; background-position: right 0; height: 56px; }
    .tt .s_base,
    .tt_o .s_base,
    .tt_h .s_base { position: absolute; left: 10px; bottom: -8px; width: 21px; height: 13px; background-position: 0 -56px; }


.no_p { position: relative; cursor: help; width: 29px; background: url(../IMAGE/img_novo.png) center center no-repeat; }
    .no_p:hover .tt,
    .no_p:hover .tt_o,
    .no_p:hover .tt_h { display: block; z-index: 3; }

    .no_p .tt, .no_p .tt .c_lateral, .no_p .tt_o .s_base,
    .no_p .tt_o, .no_p .tt_o .c_lateral, .no_p .tt_o .s_base,
    .no_p .tt_h, .no_p .tt_h .c_lateral, .no_p .tt_h .s_base { float: left; height: 30px; text-transform: none; background: url(../IMAGE/fundo_tooltip.png) no-repeat; }

    .no_p .tt,
    .no_p .tt_o,
    .no_p .tt_h { display: none; position: absolute; z-index: 100; top: -36px; left: 15px; margin-right: 10px; padding: 0 5px 0 15px; text-decoration: none; white-space: nowrap; font-size: 10px; font: normal bold 10px/27px Arial, Helvetica, Tahoma, sans-serif; color: #f70; line-height: 14px; }

        .no_p .tt .c_lateral,
        .no_p .tt_o .c_lateral,
        .no_p .tt_h .c_lateral { position: absolute; float: right; width: 10px; top: 0; right: -10px; background-position: right 0; }

        .no_p .tt .s_base,
        .no_p .tt_o .s_base,
        .no_p .tt_h .s_base { position: absolute; left: 10px; bottom: -8px; width: 21px; height: 13px; background-position: 0 -30px; }


.ajuda { font: 12px arial, verdana, helvetica, sans-serif; }
    .ajuda div { font: 12px arial, verdana, helvetica, sans-serif; padding: 0; color: #039; text-decoration: none; cursor: help; color: #f00; z-index: 1; }
        .ajuda div span { display: none; z-index: 100; position: absolute; }
        .ajuda div .titulo { border-bottom: 1px dotted #333; display: block; margin-bottom: 10px; padding-bottom: 4px; }
        .ajuda div:hover span { display: block; width: 260px; margin-top: 3em; margin-left: 2em; font: 12px arial, verdana, helvetica, sans-serif; padding: 10px; box-shadow: 5px 5px 10px #CCC; border-radius: 7px; }
            .ajuda div:hover span.tooltip_css1 { border: 1px solid #C99D18; background: #FFFFC8; color: #000; }
            .ajuda div:hover span.tooltip_css2 { border: 1px solid #000; background: #e0ffff; color: #000; white-space: normal; text-align: left; width: 400px; }

            .ajuda div:hover span.tooltip_css3 { border: 1px solid #000; background: #FFFFE1; color: #000; }
            .ajuda div:hover span.tooltip_css4 { border: 1px solid #000; background: #FFFFE1; color: #000; margin-left: -22em; margin-top: 2em; }

.ajuda_btn { font: 12px arial, verdana, helvetica, sans-serif; }
.ajuda_btn div { position: relative; font: 12px arial, verdana, helvetica, sans-serif; padding: 0; color: #039; text-decoration: none; cursor: help;/*z-index:3;*/ /*z-index:24;*/ }
.ajuda_btn div:hover { background: transparent; color: #f00; z-index: 1; }
.ajuda_btn div span { display: none; }
.ajuda_btn div .titulo { border-bottom: 1px dotted #333; display: block; margin-bottom: 10px; padding-bottom: 4px; }
/*.ajuda_btn div:hover span { display: block; position: absolute; width: 260px; top: 3em;  left: 2em; font: 12px arial, verdana, helvetica, sans-serif; padding: 10px; box-shadow: 5px 5px 10px #CCC; border-radius: 2px; z-index:3;}*/
.ajuda_btn div:hover span { display: block; position: absolute; width: 260px; left: -9em; top: -10em; font: 12px arial, verdana, helvetica, sans-serif; padding: 10px; box-shadow: 5px 5px 10px #CCC; border-radius: 2px; z-index: 3; color: #fff; background-color: rgba(104, 135, 135, 1); }

.ajuda_btn div:hover span.tooltip_css1 { border: 1px solid #C99D18; background: #FFFFC8; color: #000; }
.ajuda_btn div:hover span.tooltip_css2 { border: 1px solid #000; background: #e0ffff; color: #000; left: -8em; top: -10em; z-index: 1000; white-space: normal; text-align: left; width: 400px; }
.ajuda_btn div:hover span.tooltip_css3 { border: 1px solid #000; background: #FFFFE1; color: #000; }
.ajuda_btn div:hover span.tooltip_css4 { border: 1px solid #000; background: #FFFFE1; color: #000; left: -22em; }

.content-box { box-sizing: content-box; }
.padding-box { box-sizing: padding-box; }
.border-box { box-sizing: border-box; }

/* Pen Styling, unrelated to box-sizing */

.box .content-box { position: absolute; z-index: 1; width: 300px; padding: 8px; background: #444; color: white; border: 1px dotted red; /* background-clip: content-box; */ text-indent: 20px; display: none;  margin: 10px 18%; }
.box:hover .content-box { position: absolute; z-index: 1; width: 300px; padding: 8px; background: #444; color: white; border: 1px dotted red; /* background-clip: content-box; */ text-indent: 20px; margin: 10px 18%; display: block; }
/*.image { width: 100px; height: 100px; }*/