a.suggestion {
text-decoration: none;
}

.html img {
max-width: 100%;
}

body {
    background-color: white;
}
    ::-webkit-scrollbar-thumb{
    background-color: transparent;
    }
    ::-webkit-scrollbar-thumb:hover {
    background: transparent;
    }

.header{
    background-color: #003274;
    border-bottom-color: transparent;
    box-shadow: 0px 0px 0px
    0px transparent;
    color: #333333;
}

    .header .menuList a {
    color: transparent;
    }

#messageContainer{
    background-color: white;
    color: #333333;
}

    .speechToText .start {
    background-image: url("https://platform.maia.chat/storage/bots/111/Oh8mC6WJUx9KVWHWn286UQMFqFJvUNl6qKt1ee49.png");
    }

    .speechToText .start:hover {
    background-image: url("https://platform.maia.chat/storage/bots/111/aMI5dbq2r4N83SiL9h6TbG2sPfdB9qwRLjsbgwc7.png");
    }

    .speechToText .stop {
    background-image: url("https://platform.maia.chat/storage/bots/111/l3M1CdLLtenIFODoo6mcMKxWTbG7GYA8nYkas2GZ.png");
    }

    .speechToText .stop:hover {
    background-image: url("https://platform.maia.chat/storage/bots/111/CGvrR6r4oSfyx9D2hnbrENtp2eq3JDX4nS76gOcv.png");
    }

.textToSpeech .start {
background-size: 30px auto;
min-width: 30px;
min-height: 30px;
}

.textToSpeech .stop {
background-size: 30px auto;
min-width: 30px;
min-height: 30px;
}


#intro h2 {
font-size: 1.5em;
}

#intro button{
    background: white;
    color: #003274;
}
.incoming-message{
    background: #003274;
    color: white;
}
.outgoing-message{
    background: #edeff1;
    color: #333333;
}


.suggestions .suggestion{
    background: white;
    color: #003274;
    box-shadow: 0px 0px 0px
    0px transparent;
}
.suggestions .suggestion:hover {
    background: #003274;
    color: white;
}
.typingDot{
    background-color: #003274;
    color: transparent;
}

.footer{
    background-color: #003274;
    border-top-color: transparent;
}

    .footer button{
    background-image: url("https://platform.maia.chat/storage/bots/111/a06d39498759c4db8d79ab0d8df8cbabc3e89ee4.png");
    }


.header,
.footer {
    height: 75px;
}

body{
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif !important;;
}

.header h1 {
    display: none!important;
}

.header h1{
    content: url(https://platform.maia.chat/storage/images/91Uy8l4qeqcU99cDJThXzrJ1t5xZUVbBMON00pUl.png);
    display: inline-block!important;
    max-width: 280px;
    margin-top: -12px;
}

.attachment{
    display:none!important;
}

.speechToText .start{
    margin-right: 10px;
    background-size: 16px!important;
}

.speechToText .stop{
    margin-right: 10px;
    background-size: 18!important;
}

#app .header {
    background-size: auto 75px;
}

.attachment li {
    background: #e9ecef;
    border-radius: 4px;
    border: 1px solid transparent;
    color: #2e2e2e;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    border-top-left-radius: 18px!important;
    border-bottom-left-radius: 14px!important;
    border-bottom-right-radius: 18px!important;
    border-top-right-radius: 0px!important;
    margin-top: -2px;
    margin-right: -11px;
    margin-bottom: 7px;
}

.attachment .send span {
    color: #fff;
}

.attachment .cancel span {
    color: #2e2e2e;
}

#intro button:hover {
    background: /*#316b8c*/ #003274;
    color: white;
    border: solid 2px #003274;
}

#intro button {
    background: /*#316b8c*/ white;
    border: solid 2px #003274;
    font-weight: 700;
    font-size: 25px;
    width: 150px;
    border-radius: 50px;
    transition: background 0.5s ease; 
}

#app .footer button[disabled] {
    opacity: 1;
}

#app .footer input[type=file] {
    visibility: hidden;
    width: 50px!important;
    margin-left: -45px;
    height: 0px;
    padding: 0px;
    border: none;
}

.mainContainer.isSpeechToTextAvailable input {
    width: calc(100% - 100px);
}

.attachment .delete {
    top: -3px;
    right: 5px;
    cursor: pointer;
    font-size: 16px;
    text-transform: lowercase;
    font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
}

.toggleWidgetZoom.headerUtil:hover,
.closeWidget.headerUtil:hover {
    background-color: #e9ecef;
}

.attachment li {
    background: #e9ecef;
    border-radius: 4px;
    border: 1px solid transparent;
    color: #2e2e2e;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    border-top-left-radius: 18px!important;
    border-bottom-left-radius: 14px!important;
    border-bottom-right-radius: 18px!important;
    border-top-right-radius: 0px!important;
    margin-top: -2px;
    margin-right: -11px;
    margin-bottom: 7px;
}

.attachment .send span {
    color: #fff;
}

.attachment .cancel span {
    color: #2e2e2e;
}

@media (max-width: 1000px) {
    #app .header {
        /*border-top: 3px solid #5c656f;
        border-right: 3px solid #5c656f;
        border-left: 3px solid #5c656f;
        border-bottom: 3px solid #5c656f;*/
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    #messageContainer {
        border-top: none;
    }
}

@media (min-width: 768px) and (max-width: 1025px) {
    div#app {
        background-image: none;
    }
    .suggestions .suggestion {
        border-color: #003274;
        margin: 4px 2px !important;
        padding: 3px 14px 3px 14px;
    }
}

.suggestions .suggestion {
    margin: 4px 2px !important;
    padding: 3px 14px 3px 14px;
}

@media (max-width: 767px) {
    .suggestions .suggestion {
        margin-left: 12%;
        margin-right: -32px;
        margin-top: 0px;
        margin-bottom: 10px;
        border-color: #003274;
    }
    .footer label {
        margin-bottom: 0px;
        display: flex;
        float: left;
    }
}

.footer form {
    padding-left: 10px;
}

@media (min-width: 768px) and (max-width: 1025px) {
    .footer form {
        padding-right: 10px;
    }
    .footer form button[data-v-566887b5] {
        margin-left: 10px;
    }
}

@media (max-width: 1000px) {
    div#footer {
        border-top: none!important;
        /*border: 3px solid #5c656f;*/
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    div#messageContainer {
        /*border-right: 3px solid #5c656f;
        border-left: 3px solid #5c656f;*/
        border-top: none!important;
        border-bottom: none!important;
    }
}

@media (min-width: 1000px) {
    div#header {
        /*border-bottom: 3px solid #282d58;*/
    }
    .footer form button[data-v-566887b5] {
        margin-left: 8px;
    }
}

a.linkified {
    word-break: break-all;
}

@media (min-width: 800px) {
    #app .header {
        background-position: center !important;
    }
}

.embedcard .mediaContainer {
    margin: 0px -10px 0;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    overflow: hidden;
    position: relative;
    max-height: 380px;
    border-bottom-right-radius: 25px;
}

.footer button {
    background-color: transparent;
}

.footer label {
    background-color: transparent;
}

.feedback, .feedback-active {
    margin-top: -10px;
}
.feedback, .feedback-active, .feedback-image-disabled, .feedback-image-active{
    opacity: 1 !important;
    width: 37px !important;
    height: 37px !important;
    cursor: pointer;
    background-size: calc(100% - 15px);
    background-position: center;
    background-repeat: no-repeat;
}
.feedback-image-disabled{
    &.feedback-positive{
        background-image: url(/frontend/img/thumb_up_outline_icon.png);
        
        &:hover{
            background-image: url(/frontend/img/thumb_up_filled_icon.png);
        }
    }
    &.feedback-negative{
        background-image: url(/frontend/img/thumb_down_outline_icon.png);
        &:hover{
            background-image: url(/frontend/img/thumb_down_filled_icon.png);
        }
    }
}
.feedback-image-active{
    &.feedback-positive{
        background-image: url(/frontend/img/thumb_up_filled_icon.png);
        /*&:hover{
            background-image: url(/frontend/img/thumb_up_outline_icon.png);
        }*/
    }
    &.feedback-negative{
        background-image: url(/frontend/img/thumb_down_filled_icon.png);
        /*&:hover{
            background-image: url(/frontend/img/thumb_down_outline_icon.png);
        }*/
    }
}
.messages[data-direction="outgoing"]{
    display:flex;
    flex-wrap: wrap;
    & > div{
        flex-basis: 100%;
    }
}

/*---Sistemazione dopo interventi accessibilità---*/
.mainContainer.isSpeechToTextAvailable input {
    min-width: 100%;
}

#footer button {
    margin-left: 5px;
    margin-right: 5px;
}

#intro p{
    font-size: 13px!important;
}