/*
Name: Prokom Kari chatbot custom style
URI: https://www.bergen.kommune.no/
*/

/* Corner text */
#cornered_kari #corner_text {
    min-height: 27px;
}

/* Font reset */
#chat-container.bergen * {
    font-family: 'Source Sans Pro', 'Open Sans', Verdana, sans-serif;
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 1.55556;
}

/* Button reset */
#chat-container.bergen button:focus {
    outline: 3px #f0c646 solid;
    outline: .1875rem #f0c646 solid;
    outline-offset: 1px
}
#chat-container.bergen button[disabled] {
    background-color: transparent !important;
}

/* Chat container title */
#chat-container.bergen .TitleBar {
    background-color: #d7272d;
}
#chat-container.bergen .Title {
    font-size: 24px;
    font-size: 1.5rem;
    font-family: 'Source Sans Pro', 'Open Sans', Verdana, sans-serif;
    font-weight: 400;
    font-size: normal;
    line-height: 1.1666666;
}

/* Title buttons */
#chat-container.bergen .TitleBar button {
    margin-bottom: 0;
}

/* Textarea */
#chat-container.bergen textarea:focus {
    border: 0 none;
    outline: 3px #f0c646 solid;
    outline: .1875rem #f0c646 solid;
    outline-offset: -3px
}

/* Smaller chat bubble  */
#chat-container.bergen .ChatBubble {
    padding: 4px 10px 4px 14px;
    padding: .25rem .625rem .25rem .875rem;
}

/* Right distance inside chat */
#chat-container.bergen .Message {
    padding-right: 14px;
    padding-right: .875rem;
}

/* Buttons inside chat */
#chat-container.bergen .StyledMessageElement .sc-brqgnP button,
#chat-container.bergen .StyledMessageElement .gvvtwa button {
    display: block;
    width: auto;
    margin-left: 4px;
    margin-left: .25rem;
    margin-right: 4px;
    margin-right: .25rem;
    color: #3b65a3;
    background-color: #fff;
    border: 1px solid #3b65a3;
    border: .0625rem solid #3b65a3;
    text-align: center;
}
#chat-container.bergen .StyledMessageElement .sc-brqgnP button:hover,
#chat-container.bergen .StyledMessageElement .gvvtwa button:hover {
    color: #fff;
    background-color: #3b65a3;
    border-color: #3b65a3;
}

/* Link bubbles inside chat */
#chat-container.bergen .StyledMessageElement a.sc-kkGfuU,
#chat-container.bergen .StyledMessageElement a.bOdswA {
    width: -webkit-calc(100% - .5rem);
    width: calc(100% - .5rem);
    margin-left: 4px;
    margin-left: .25rem;
    margin-right: 4px;
    margin-right: .25rem;
    color: #3b65a3;
    background-color: #f2f2f2;
    text-decoration: underline;
}
#chat-container.bergen .StyledMessageElement a.sc-kkGfuU:hover,
#chat-container.bergen .StyledMessageElement a.bOdswA:hover {
    color: #2d4e7e;
}
/* Links svg-icon */
#chat-container.bergen .StyledMessageElement a.sc-kkGfuU svg,
#chat-container.bergen .StyledMessageElement a.bOdswA svg {
    margin-top: 5px;
    margin-top: .3125rem;
}

/* Links inside text */
#chat-container.bergen .ChatBubble a {
    color: #3b65a3;
}
#chat-container.bergen .ChatBubble a:hover {
    color: #2d4e7e;
}

/* Thumbs up/down */
#chat-container.bergen button.sc-fBuWsC:hover svg,
#chat-container.bergen button.kIRHNx:hover svg {
    color: #000;
}

/* Letter counter - outer container */
#chat-container.bergen .sc-frDJqD,
#chat-container.bergen .dXNKxK {
    padding-left: 10px;
    padding-left: .625rem;
    padding-right: 10px;
    padding-right: .625rem;
}
/* Letter counter - inner container */
#chat-container.bergen .sc-kvZOFW,
#chat-container.bergen .jrMjsF {
    font-size: 14px;
    font-size: .875rem;
    color: #535353;
}

.bergen #cornered_kari {
    box-shadow: 0 0 10px 0 #b3b3b3;
}