#chat {
    height: 450px;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* La parte de arriba estaba en el codigo y la cambie de lugar */



.notification.is-info {
    background-color: #cee7ec;
    color: #050e11;
    border: 1px solid #cee7ec;
    font-family: 'Expert-Sans-Light', helvetica, arial, clean, sans-serif;
    float: left;
    margin-top: 5px;
    margin-bottom: 8px;
    width: 75%;
}


.notification {
    border-radius: 10px;
}


.is-size-7 {
    font-size: 14px !important;
}



div.column.is-9.is-offset-2 {
    margin: 0 auto;
    margin-right: 10px !important;
}


.button.is-small:not(.is-rounded) {
    border-radius: 10px;
    font-size: 12px;
    padding: 17px;
    border: 1px solid #e4e4e4;
    color: #000;
    font-weight: bold;
    font-family: 'Expert-Sans-Light', helvetica, arial, clean, sans-serif;
    width: 75%;
}

.button.is-info.is-outlined.is-focused, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, .button.is-info.is-outlined:hover {
    background-color: #049ac5;
    border-color: #049ac5;
    color: #fff;
    font-weight: bold;
}

.button.is-info.is-outlined:active {
    background-color: #015f84;
    border-color: #015f84;
    font-weight: bold;
}


.button:not(:active), .button:focus:not(:active) {
    box-shadow: none;
}
/*
.is-info.input, .is-info.textarea {
    border-color: #eb660e;
    border-radius: 19px;
    box-shadow: none;
}*/
.is-info.input, .is-info.textarea {
    overflow-y: hidden;
    resize: none;
}

.notification.is-info .textarea:focus {
    box-shadow: none;
    overflow-y: hidden;
    resize: none;
    border: none;
    border: none;
}

.notification.is-info .textarea {
    box-shadow: none;
    overflow-y: hidden;
    resize: none;
    border: none;
    padding-left: 0px;
    color: #03addb;
}

.notification.is-info input[type='radio']:after {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    top: 0px;
    left: -2px;
    position: relative;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid #050e11;
}

.notification.is-info input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    top: 0px;
    left: -2px;
    position: relative;
    background-color: #03addb;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #03addb;
}




.button.is-small.is-info.is-outlined.is-fullwidth.mb-2.btnEncuesta[disabled],
.button.is-small.is-info.is-outlined.is-fullwidth.mb-2.btnEncuesta[disabled]:hover {
    background-color: #050e11;
    border-color: #050e11;
    box-shadow: none;
    color: #fff;
}

.columns.mensajeInput {
    border-top: 1px solid #bfbfbf;
    /* border-radius: 34px; */
    padding: 0px;
    margin-top: 20px;
    box-shadow: 2px -6px 15px 0px rgb(0 0 0 / 26%);
    background-color: #f3f3f3;
}


    .columns.mensajeInput .column {
        padding: 0px
    }

.is-info.input, .is-info.textarea {
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #f3f3f3;
    padding-top: 10px;
    padding-right: 22px;
    padding-bottom: 0px;
    padding-left: 20px;
    line-height: normal;
    font-size: 15px;
    padding-top: 11px;
    font-weight: 400;
}

    .is-info.input:active, .is-info.input:focus, .is-info.is-active.input, .is-info.is-active.textarea, .is-info.is-focused.input, .is-info.is-focused.textarea, .is-info.textarea:active, .is-info.textarea:focus {
        box-shadow: none;
    }

.button.is-info {
    background-color: #fff;
    border-color: transparent;
    color: #eb660e;
}

body, button, input, optgroup, select, textarea {
    font-family: 'Expert-Sans-Light', helvetica, arial, clean, sans-serif;
}

body, html {
    background-color: transparent;
}

.column.is-offset-2, .column.is-offset-2-tablet {
    margin-left: .5rem !important;
}

.notification {
    background-color: #f5f5f5;
    border-radius: 10px;
    position: relative;
    padding: 9px 17px;
}

.mx-2 {
    margin-left: 5.5rem !important;
    margin-right: -4.5rem !important;
}

.notification.is-danger {
    background-color: #f7c09e;
    color: #050e11;
    margin-right: 10px !important;
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
}

.subtitle.is-3 {
    font-size: 20px;
}

    .subtitle.is-3.mb-3.tituloAsistente {
        color: #FFFFFF;
    }

        .subtitle.is-3.mb-3.tituloAsistente span {
            color: #FFFFFF;
            font-size: 12px;
        }

.cabezal {
    border-bottom: 1px solid #e4e4e4;
    float: left;
    width: 114%;
    position: absolute;
    top: -3px;
    left: -24px;
    margin-bottom: 15px;
    background-image: url('../Images/fondo_header.png');
    background-repeat: no-repeat;
    background: linear-gradient(45deg, #155471, #006989);
    padding: 0px;
    height: 61px;
    border-radius: 10px 10px 0 0;
}


p.subtitle.is-3.mb-3.tituloAsistente {
    padding-bottom: 8px;
    padding-left: 46px;
    background-image: url(../Images/imagenesIconos.png);
    background-repeat: no-repeat;
    background-position-y: -105px;
    background-position-x: 1px;
    float: left;
    max-width: 350px;
    height: 46px;
    /* line-height: 45px; */
    padding-left: 60px;
    padding-top: 11px;
    margin-top: 7px;
    margin-left: 10px;
    line-height: 24px;
    font-weight: bold;
    letter-spacing:1px;
}

p.subtitle.is-3.mb-3.recargarImagen {
    padding-bottom: 8px;
    /* padding-left: 54px; */
    background-image: url(../Images/imagenesIconos.png);
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-position-x: -12px;
    background-size: 100%;
    position: absolute;
    right: 22px;
    width: 57px;
    height: 29px;
    top: 16px;
    cursor: pointer;
    float: left;
    opacity: 1;
}

p.subtitle.is-3.mb-3.minimizarChat {
    padding-bottom: 8px;
    /* padding-left: 54px; */
    background-image: url(../Images/imagenesIconos.png);
    background-repeat: no-repeat;
    background-position-y: -26px;
    background-position-x: -12px;
    position: absolute;
    right: -1px;
    width: 30px;
    height: 23px;
    top: -10px;
    cursor: pointer;
    float: left;
}

p.subtitle.is-3.mb-3.cerrarChat {
    padding-bottom: 8px;
    /* padding-left: 54px; */
    background-image: url(../Images/imagenesIconos.png);
    position: absolute;
    width: 30px;
    height: 23px;
    top: -11px;
    right: -24px;
    background-repeat: no-repeat;
    background-position-y: -50px;
    background-position-x: -12px;
}

p.mensajeProtege {
    padding-bottom: 8px;
    text-align: left;
    font-size: 12px;
    margin: 10px 0;
    margin-top: 15px;
    padding-left: 10px;
    padding-top: 75px;
    margin-top: 0px;
}

.button.is-info.is-fullwidth.botonEnviar {
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 8px;
    background-image: url(../Images/imagenesIconos.png);
    background-repeat: no-repeat;
    background-position-y: -78px;
    background-position-x: -14px;
    width: auto;
    background-color: transparent;
    border: none;
    height: 26px;
    margin-top: 7px;
    float: right;
}


.form.mt-2.EnvioMensaje {
    padding-bottom: 14px;
}

.button.is-info.is-focused:not(:active), .button.is-info:focus:not(:active) {
    box-shadow: none;
}

.button.is-info.is-fullwidth.botonEnviar:hover, .button.is-info.is-fullwidth.botonEnviar:hover {
    background-color: transparent;
}

.columns.mensajeInput .column.is-3 {
    width: auto;
    margin-left: 0px;
    height: 42px;
}

.columns.mensajeInput .column.is-9 {
    width: 88%;
    height: 42px;
    float: left;
}

section.sectionchat #chat {
    height: 331px;
}


section.sectionchat {
    padding-top: 15px;
    background-color: #f3f3f3;
    border-radius: 10px 10px 0 0;
}

.notification.is-info.loading {
    background-image: url(../Images/loading_dots.gif);
    background-size: 47px 39px;
    background-repeat: no-repeat;
    background-position: 8% center;
    height: 39px;
    padding: 9px 17px;
}

.masDetalles {
    position: absolute;
    top: -127px;
    left: 22px;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    font-size: 12px;
    padding: 21px 30px;
    z-index: 2000;
    display: none;
}

    .masDetalles.masDetallesOpen {
        display: block;
    }

.masDetallesDesplegado {
    border-radius: 20px;
    font-size: 12px;
    border: none;
    color: #050e11;
    background-color: transparent;
    padding: 0px 0px;
    cursor: pointer;
}

    .masDetallesDesplegado:hover {
        text-decoration: underline;
        color: #03addb;
    }

.botonMasDetalles {
    background-image: url(../Images/masDetalles.png);
    position: absolute;
    top: 0;
    left: 2px;
    background-color: transparent;
    cursor: pointer;
    width: 51px;
    height: 42px;
    border: none;
    background-repeat: no-repeat;
    cursor: pointer;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}



.button.is-small:not(.is-rounded) {
    box-shadow: none;
    color: #050e11;
    opacity: 1;
    background: linear-gradient(90deg, #f3f3f3 -130%, #f3f3f3 48%, #f3f3f3 488%) padding-box, linear-gradient(to right, #015f84, #049ac5) border-box;
    border: 1px solid transparent;
}


.button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined {
    background-color: #f3f3f3;
    background: #f3f3f3;
    border-color: #bfbfbf;
    box-shadow: none;
    color: #050e11;
    opacity: 1;
}

    .button.is-info.is-outlined[disabled]:hover, .button.is-info.is-outlined:hover {
        background-color: #f3f3f3;
        border-color: #bfbfbf;
        box-shadow: none;
        color: #050e11;
        opacity: 1;
    }

.button.is-info.is-outlined:active {
    background-color: #015f84;
    border-color: #015f84;
    box-shadow: none;
    color: #ffffff;
    opacity: 1;
}

.button.is-info.is-outlined.is-focused, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, .button.is-info.is-outlined:hover {
    border-color: #049ac4;
    box-shadow: none;
    color: #ffffff;
    opacity: 1;
    background: none;
    background-color: #049ac4;
}

.button.is-info.is-outlined.is-focused, .button.is-info.is-outlined:focus {
    border-color: #015f84;
    box-shadow: none;
    color: #ffffff;
    opacity: 1;
    background: none;
    background-color: #015f84;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* ////////////////////////////////////   MAX - W I D T H  /////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////////////////////////////////////////*/




@media screen and (max-width: 300px) {


    p.subtitle.is-3.mb-3.tituloAsistente {
        font-size: 18px;
    }
}

@media screen and (max-height: 480px) {


    section.sectionchat #chat {
        height: 253px;
    }
}

@media screen and (max-width: 750px) {

    .mobile .cabezal {
        width: 120%;
    }
}