/* Formulario */

body {
    font-size: 62.5%;
}

p {
    margin: 0px;
    padding: 0px 0px 0px 0px;
}

/* formato del titulo de la ventana izquierda debajo del logo de la aplicación*/
.titAplicacion {
    color: White;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 8px 0px 8px 0px;
    text-align: center;
}

/* Se usa en Formulario 1 */
.tblCab {
    font-size: large;
    width: 100%;
    height: 50px;
}

.tblCabTD11 {
    width: 30px;
}

.tblCabTD12 {
}

.tblCabTD21 {
}

.tblCabTD22 {
}

.tblExterior {
    /*border: #333333 2px solid;
	z-index: 1;*/
}

.tblBotones {
    font-weight: bold;
    font-size: xx-small;
    font-family: Tahoma, Arial;
    display: inline-flex;
}

.tdSepBot {
    width: 10px;
    text-align: center;
}

.tdNuevo {
    width: 108px;
    height: 27px;
    padding-top: 3px;
    text-align: right;
    background-image: url(bg_nuevo.png);
    background-repeat: no-repeat;
}

.tdModificar {
    width: 114px;
    height: 30px;
    text-align: right;
    background-image: url(bg_modificar.png);
    background-repeat: no-repeat;
}

.tdBorrar {
    width: 108px;
    height: 30px;
    text-align: right;
    background-image: url(bg_borrar.png);
    background-repeat: no-repeat;
}

.tdEstado {
    width: 70px;
    text-align: center;
}

.tdGuardar {
    width: 108px;
    height: 30px;
    text-align: right;
    background-image: url(bg_guardar.png);
    background-repeat: no-repeat;
}

.lnkBasico {
    width: 108px;
    height: 22px;
    padding-top: 8px;
    text-align: right;
    background-image: url(bg_basico.png);
}

.bg_basico_peq {
    width: 80px;
    height: 27px;
    padding-top: 3px;
    text-align: center;
    background-image: url(bg_basico_peq.png);
}

.bg_basico_peq2 {
    padding: 3px 0px 0px 0px;
    width: 50px;
    height: 27px;
    text-align: left;
    background-image: url(bg_basico_peq2.png);
}

.tdBuscarForm {
    width: 108px;
    height: 30px;
    text-align: right;
    background-image: url(bg_buscar.png);
}

.tdBuscar {
    padding-top: 4px;
    width: 108px;
    height: 26px;
    text-align: right;
    background-image: url(bg_buscar.png);
}

.tdBasico {
    padding-top: 4px;
    width: 108px;
    height: 26px;
    text-align: right;
    background-image: url(bg_basico.png);
}

.label {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #0072b0;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

/*** Calendario aspx ***/
.cImg1 {
    background-position: center center;
    background-image: url(calen2.gif);
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
}

.cTabla1 {
    border-bottom: #ff9900 2px solid;
    width: 100%;
}

.cTabla2 {
}

.cTDCalen {
}

.cTabla3 {
}

.cTabla4 {
}

.cLabel {
    border-right: #000000 1px solid;
    border-top: #000000 1px solid;
    border-left: #000000 1px solid;
    border-bottom: #000000 1px solid;
}

/* VARIOS ----------------------------- */

.azul_TITULO {
    border: 0px dotted;
    font-size: large;
    color: #0072b0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: transparent;
    padding-right: 10px;
    text-align: left;
    margin-left: 5px;
    margin-top: 5px;
    white-space: nowrap;
}

.total_buscar {
    border: 0px dotted;
    font-size: large;
    color: black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: transparent;
    padding-right: 10px;
    text-align: left;
    margin-left: 5px;
    margin-top: 5px;
    white-space: nowrap;
}

/* Se usa en los botones NEW y SAVE del Formulario 1 */
.azul_bot_form {

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #02243A;
    text-decoration: none;
    text-align: right;
    padding: 5px 11px 6px 0px;
    text-shadow: -1px 1px 2px rgba(255,255,255,0.3);
    display: block;
}

.multiSelecBut {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #02243A;
    text-decoration: none;
    text-shadow: -1px 1px 2px rgba(255,255,255,0.3);
    padding: 3px;
    text-align: right;
}

a.azul_bot_form:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #CCCCCC;
    text-decoration: none;
    text-align: right;
}

.bot_form_detalle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #0177B0;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
}

a.bot_form_detalle:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
    text-align: right;
    vertical-align: middle;
}

.TD_dato_der {
    /*border-bottom: #cce4f0 1px solid;*/
}

/* Esto se usa en BuscarPlano.aspx y tal vez en algun sitio mas */
.TD_dato_izq_buscar /* New */ {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #0072B0;
    text-decoration: none;
    width: 160px;
    /*border-bottom: #cce4f0 1px solid;*/
    text-align: left;
}



/* Esto se usa en frmP1.aspx y tal vez en algun sitio mas */
.TD_dato_izq {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    width: 160px;
    /*border-bottom: #cce4f0 1px solid;*/
    text-align: right;
}


/* Esto se usa en frmP1.aspx y tal vez en algun sitio mas */
.TD_dato_izq_requerido {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    width: 160px;
    text-align: right;
    /*border-bottom: #cce4f0 1px solid;*/
    /*background-color: #ffdfae;*/
}

    .TD_dato_izq_requerido:before {
        content: "*";
        color: #e32;
    }


/* Esto se usa en frmP1.aspx y tal vez en algun sitio mas */
.TD_dato_izq_deshabilitado {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #808080;
    text-decoration: none;
    width: 160px;
    text-align: right;
}

/* Se usa en Formulario 1 y puede que en algun sitio mas */
.dropd {
    font-weight: normal;
    font-size: 11px;
    color: #0072b0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEEEEE; /* antes #cce4f0; */
    border: #666666 1px solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 1px 3px;
    resize: vertical;
}

.chk1 {
    font-weight: bold;
    font-size: 11px;
    color: #0072b0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Campos del Formulario 1 (puede que se use en algun sitio mas) */
.txt1 {
    border: #666666 1px solid;
    font-weight: normal;
    font-size: 11px;
    color: black; /* antes #0072b0; */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEEEEE; /*antes  #cce4f0; */
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 1px 3px;
}

.radioButton {
    font-weight: bold;
    font-size: 11px;
    color: #0072b0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.botonDiseno {
}

a.botonDiseno:hover {
}


/* Botones See / Print Incident / Guardar y Hacer Encuesta de formulario 1 */
.bInput {
    /*border: #ff9900 thin solid; */
    font-weight: normal;
    font-size: 14px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    height: 21px;
    background-color: #0072b0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 3px;
}

.bInputD {
    border-right: gray thin solid;
    border-top: gray thin solid;
    font-weight: bold;
    border-left: gray thin solid;
    color: #000000;
    border-bottom: gray thin solid;
    font-family: Arial, Helvetica, sans-serif;
    height: 21px;
    background-color: #d3d3d3;
}

.P1 {
}

.celeste_top {
}

a.celeste_top:hover {
}

.blanco_bold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #06337c;
}

.azul_TITULO_2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0177B0;
}

.app_TITULO {
}

.negro_normal {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.CabBuscar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

.tblDatos {
}

.tableTareas {
    font-size: 16px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}


/**** GENERALES *******/

.ElMarco {
    background-image: url(tela.jpg);
    /*background-color: #b2d4e7;*/
    padding: 0;
    margin: 0;
}


#logo_gecor /* new */ {
    width: 160px;
    margin: 10px 0 30px 6px;
}


.img_partners /* new */ {
    width: 100px;
    margin-top: 10px;
    margin-left: 35px;
}


.ElMarcoTitulo {
    font-weight: normal;
    font-size: 22px;
    color: black;
    font-style: italic;
    font-family: Tahoma, Arial;
}


.ElCuerpo {
    background-image: url(all_bg.jpg);
    background-repeat: repeat;
}

/******** MENU ********************/

.TD_menu1 {
    /*
    border-bottom: 2px solid #000000;
    width: 200px;
    border-bottom: 2px solid #000000;
    */
}

.menu1 {
    font-weight: bold;
    font-size: 11px;
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; /* border-top: 1px solid #333333; */
    border-bottom: 2px solid #000000;
    display: block;
    padding: 8px 50px 8px 5px; /*
	margin: 0px 0 0 0;
    */
    overflow: hidden;
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
}


a.menu1:hover, a.menu1:active {
    background-color: #666666;
    background-color: rgba(255,255,255,0.2);
}

#tblMenu {
    width: 100%;
    border: 0;
}

.menu2 {
    font-weight: bold;
    font-size: 11px;
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    padding: 0px 0px 0px 5px;
    overflow: hidden;
    display: block;
}

a.menu2:hover, a.menu2:active /*New */ {
    font-weight: bold;
    font-size: 11px;
    color: #afcbd7;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 0px 0px 0px 5px;
    overflow: hidden;
    display: block;
}

img.arrow /*New*/ {
    width: 12px;
    height: 7px;
    border: 0;
}

.submenu {
    padding: 0px 0px 0px 17px;
    font-size: 9px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
}

a.submenu:hover {
    font-size: 9px;
    padding: 0px 0px 0px 17px;
    color: #afcbd7;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.linMenu {
    width: 143px;
    text-align: left;
}

.grupoMenu {
    font-weight: bolder;
    font-size: 16px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border-bottom: 2px none #000000; /* OJO: no vale con omitir este estilo, hay que sobreescribirlo ! */
    overflow: hidden;
    background-color: #BAB8B9;
    display: block;
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
    box-shadow: 0px 1px 0px rgba(255,255,255,0.2);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D4D4D4;
    padding-top: 2px;
}


/*  VARIOS 2 *********************************/
.MensajeError {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #00307E;
    text-decoration: none;
    display: block;
    overflow: auto;
    width: 100%;
    margin-top: 2px;
    height: 13px;
}

.MensajeErrorFormulario {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #00307E;
    text-decoration: none;
    display: block;
    overflow: auto;
    width: 100%;
    padding: 1rem;
    border-radius: 7px;
}

.MensajeAyuda {
    display: inline;
    overflow: hidden;
    font-size: xx-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.AyudaEnSitio {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #0072B0;
}

.TD_letra_azul {
}


/* Esto se usa en el Formulario 1 y puede que en algun sitio mas */
.azul_tit2 {
    background-color: #555555;
    /*border-top: #ff9900 1px solid;*/
    font-weight: bold;
    font-size: 11px;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    -moz-box-shadow: -1px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: -1px 1px 0px rgba(255,255,255,0.5);
    box-shadow: -1px 1px 0px rgba(255,255,255,0.5);
}

    .azul_tit2 .AyudaEnSitio {
        color: white;
        font-weight: lighter;
    }

    .azul_tit2 .SeparadorAyuda {
        margin-top: 0px;
        height: 0;
        visibility: hidden;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

    .azul_tit2 .SeparadorAyudaActive {
        margin-top: 5px;
        height: auto;
        visibility: visible;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

.sepTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sepButtonAyuda {
    border: 1px solid white;
    border-radius: 5px;
    margin-right: 5px;
    /* font-size: smaller; */
    font-weight: lighter;
    background-color: transparent;
    color: white;
    cursor: pointer;
    width: 30px;
}


/*** login (pantalla inicial) ------------------------------------------- ***/
/* Marca de agua ACT en la pantalla de login */
/*.lgTabla1
{
	background-image: url(act_ma.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}*/
body#login_screen /* New */ {
    background-image: url(all_bg.jpg);
    background-repeat: repeat;
}

#logo_login /* New */ {
    width: 200px;
    margin: 0;
}

img.idioma /* New */ {
    height: 18px;
    margin-right: 10px;
}


.boton_entrar /* New */ {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    background-color: #0177B0;
    padding: 2px 6px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

a.boton_entrar:hover /* New */ {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #CCCCCC;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
}

.lgTDTit2 {
}

/*.lgTblDatos
{
	border-top: #ff9900 2px solid;
	border-bottom: #ff9900 2px solid;
}*/

.lgTablaLink {
}

/* Era la llavecita fea */
/*.lgImg1      
{
	background-position: center center;
	background-image: url(login.gif);
	width: 30px;
	background-repeat: no-repeat;
}*/

/*** Inicio -------------------------------------------------------------- ***/

/*.inicioTBL
{
	border-bottom: #ff9900 22px solid;
}*/


/*** BUSCAR ------------------------------------------------------------- ***/
.BTPrin {
    height: 216px;
}

.BLinks {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
    text-align: right;
    background-color: #0177B0;
    padding: 2px 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
}

a.Blinks:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #CCCCCC;
    text-decoration: none;
}


.desc_check /* New */ {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    margin-left: 0px;
}


.BLinkCol {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #CCCCCC;
    text-decoration: none;
}

a.BLinkCol:hover {
    font-weight: bold;
    font-size: 11px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.BTDImg1 {
    background-image: url(lupa.png);
    width: 22px;
    height: 20px;
    padding-right: 22px;
    background-repeat: no-repeat;
}

.BTDImg2 {
}

.BTabla1 {
}

.BTabla3 {
}

.BTblFormDatos {
    width: 651px;
    height: 25px;
}

.BTabla4 {
}

.CabBuscar {
    color: #333300;
}

/* Tabla Generica */
.Grid {
    font-size: xx-small;
    width: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border: #333333 2px solid;
}

.GridEditItemStyle {
}

.GridFooterStyle {
}

.GridHeaderStyle {
    background-color: #0177b0; /*antes #ff9900; (amarillo)*/
}

/*.GridHeaderStyle:hover
{
	background-color: #ff9900;
}*/

.GridItemStyle {
}

.GridPagerStyle {
}

.GridAlternatingItemStyle {
    /* background-color: rgba(204,228,240, 0.6); /* antes #cce4f0; */
    background-color: #cce4f0;
}

.GridSelectedItemStyle {
}


/*** DETALLE ***/

/* Se usa en Formulario 2 y puede que en algun sitio mas */
.detTBL1 {
    border: #333333 1px solid;
}

/* Se usa en Formulario 2 y puede que en algun sitio mas */
.detTBL0 {
    border: #333333 1px solid;
}

/* Se usa en Formulario 2 y puede que en algun sitio mas */
.detCabDetalle {
    border: 0;
    font-weight: bold;
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #666666; /* antes: #ff9900; */
    color: White;
}

.detRegistros {
    font-size: 9pt;
    text-align: center;
}

.TitCol {
}

.t {
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}


.dBI {
    border-right: #ff9900 1px solid;
    border-top: #ff9900 1px solid;
    font-weight: bold;
    border-left: #ff9900 1px solid;
    color: #000000;
    border-bottom: #ff9900 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #b2d4e7;
    font-size: 9pt;
}

.dBId {
    border-right: gray 1px solid;
    border-top: gray 1px solid;
    font-weight: bold;
    font-size: 9pt;
    border-left: gray 1px solid;
    color: #000000;
    border-bottom: gray 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #d3d3d3;
}


/******** Calendario ********************/

.cCabecera {
    background-color: #71aaeb;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    color: #000000;
}

.cLabelMes {
    color: #000000;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.cColorFondoDia {
    background-color: #93bee2;
    text-decoration: none;
}

.cDiasMarcados {
    background-color: #FFCCCC;
    text-decoration: none;
}

.cDiasLibres {
    background-color: #FFFFF0;
    text-decoration: none;
}

.cDiasLink {
    color: #000000;
    text-decoration: none;
}

    .cDiasLink:hover {
        color: #000000;
        text-decoration: none;
    }

.cDiasHoyLibre {
    background-color: #dbeaff;
    text-decoration: none;
}

.cDiasHoyMarcado {
    background-color: #f1d5ff;
    text-decoration: none;
}

.negro_negrita {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}

/* 14/06/2016: css chat */
#small-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: none;
}

    #small-chat .badge {
        position: absolute;
        top: -3px;
        right: -4px;
        border-radius: 4px;
    }

.open-small-chat {
    height: 38px;
    width: 38px;
    display: block;
    background: #337ab7;
    padding: 9px 8px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
}

    .open-small-chat:hover {
        color: white;
        background: #286090;
    }

.small-chat-box {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 75px;
    /*background: #fff;
    border: 1px solid #e7eaec;*/
    background: #f1f1f1;
    border: 1px solid #cacaca;
    width: 230px;
    height: 320px;
    border-radius: 4px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: 99;
}

    .small-chat-box.ng-small-chat {
        display: block;
    }

.body-small .small-chat-box {
    bottom: 70px;
    right: 20px;
}

.small-chat-box.active {
    display: block;
}

.small-chat-box .heading {
    background: #2f4050;
    padding: 8px 15px;
    font-weight: bold;
    color: #fff;
}

.small-chat-box .chat-date {
    opacity: 0.6;
    font-size: 10px;
    font-weight: normal;
}

.small-chat-box .content {
    padding: 15px 15px;
}

    .small-chat-box .content .author-name {
        font-weight: bold;
        margin-bottom: 3px;
        font-size: 11px;
    }

    .small-chat-box .content > div {
        padding-bottom: 20px;
    }

    .small-chat-box .content .chat-message {
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 11px;
        line-height: 14px;
        max-width: 80%;
        background: #dcf8c6; /*#f3f3f4;*/
        margin-bottom: 10px;
    }

        .small-chat-box .content .chat-message.active {
            background: #fff; /*#1ab394;*/
            color: #fff;
        }

    .small-chat-box .content .left {
        text-align: left;
        clear: both;
    }

        .small-chat-box .content .left .chat-message {
            float: left;
        }

    .small-chat-box .content .right {
        text-align: right;
        clear: both;
    }

        .small-chat-box .content .right .chat-message {
            float: right;
        }

.small-chat-box .form-chat {
    padding: 10px 10px;
}

.chat-background {
    background: #ede9e4;
    background: -webkit-linear-gradient(top, #ede9e4 0%, #ede9e4 20%, #e5ddd5 100%);
    background: linear-gradient(to bottom, #ede9e4 0%, #ede9e4 20%, #e5ddd5 100%);
}

/* badge things */
.badge {
    background-color: #d1dade;
    color: #5e5e5e;
    font-family: 'Open Sans';
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    text-shadow: none;
}

.label-warning, .badge-warning {
    background-color: #f8ac59;
    color: #FFFFFF;
}

.pull-right {
    float: right !important;
}

/* FORM FOR ENTER TEXT */
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}

    .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
        z-index: 2;
        margin-left: -1px;
    }

        .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
    height: 30px;
    /*padding: 5px 10px;*/
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.input-group-btn > .btn {
    position: relative;
}

.btn {
    border-radius: 3px;
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
/* END FORM FOR ENTER TEXT */

.fa {
    margin-top: 2px;
}

.chat-message {
    padding: 0;
    display: table;
    width: 100%;
    margin-bottom: 4px;
}

.message-content {
    display: block;
    word-wrap: break-word;
    margin-bottom: 6px;
    font-size: 12px;
    margin-top: 4px;
}

.message {
    background-color: #fff;
    border: 1px solid #e7eaec;
    text-align: left;
    display: block;
    padding: 10px 20px;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 1px .5px rgba(0,0,0,.13);
    max-width: 80%;
}

.message-date {
    font-size: 10px;
    color: #888888;
    position: absolute;
    bottom: 0px;
}

.chat-message.in .message-date {
    float: right;
    right: 4px;
}

.chat-message.out .message-date {
    float: left;
    right: 18px;
}

.chat-message.in .message {
    text-align: left;
    /*max-width: 336px;*/
    float: left;
    padding: 3px 3px 10px 3px;
    min-width: 108px;
    margin: 0px 0px 0px 4px;
}

.chat-message.out .message {
    text-align: right;
    /*max-width: 336px;*/
    float: right;
    padding: 3px 3px 10px 3px;
    min-width: 108px;
    background-color: #dcf8c6;
    max-width: 80%;
    margin: 0px 4px 0px 0px;
}

.author-name {
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 12px;
}
/* 14/06/2016: end css chat */

.banner-toolkitng {
    background-color: white;
    font-size: large;
    margin-bottom: 0.6rem;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -8px;
    -webkit-box-shadow: 0px 11px 17px -8px #878787;
    box-shadow: 0px 11px 17px -8px #878787;
}