:root {
    /*ウィジェット高さ*/
    --base-color: #ECF3FA;
    --light-color: white;
    --dark-font-color: #3381C7;
    --light-font-color: #5B9BD5;
}

html {
    position: relative;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    font-size: small;
    letter-spacing: .08em;
}

body {
    background-color: var(--base-color);
}

.bot-image {
  height: 100%;
}

.chat-area {
    border: solid 1.5px var(--dark-font-color);
    padding: 0 0 30px 0;
    overflow: auto;
    /*heiht = 表示領域の高さからフッターを除いた高さ*/
    height: calc(100vh - 45px);
}
    .chat-area.nofreeword {
        height: 100vh;
    }
.chat-title {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.2em;
    color: var(--dark-font-color);
    padding: 0 8px;
}
.chat-discription {
    padding: 0 8px;
    color: var(--dark-font-color);
}
.talk_wrap {
    padding: 0 8px;
    max-width: 93%;
}
.search-buttons.chat-category {
    margin: 20px 0;
    width: 100%;
    font-weight: bold;
}
    .search-buttons.chat-category button {
        width: 100%;
        margin: 10px 0;
        text-align: left;
        padding: 10px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        background-color: var(--light-color);
        color: var(--dark-font-color);
        font-weight: bold;
    }

    .search-buttons.chat-category button:hover {
        background-color: var(--dark-font-color);
        color: var(--light-color);
    }
        .search-buttons.btn-group-vertical {
            margin: 20px 5%;
            width: 90%;
            font-weight: bold;
        }

    .search-buttons.btn-group-vertical button {
        width: 100%;
        margin: 0;
        text-align: left;
        padding: 10px;
    }
.btn-outline-bule {
    --bs-btn-color: var(--dark-font-color);
    --bs-btn-border-color: var(--dark-font-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dark-font-color);
    --bs-btn-hover-border-color: #198754;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dark-font-color);
    --bs-btn-active-border-color: #198754;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #198754;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #198754;
    --bs-gradient: none;
}
.bot-icon {
    height: 40px;
}

.question-area {
    background-color: var(--light-font-color);
    position: sticky;
    bottom: 0px;
}

.question-text {
  margin: 5px;
  border-radius: 4px;
}

.talk {
    background-color: white;
    padding: 7px 10px;
    border: solid 2px var(--light-font-color);
    border-radius: 10px;
    overflow: hidden;
}

    .talk.grayOut {
        background-color: #dcdcdc;
    }
.talk_wrap.last_answer .talk {
    background-color: #fffaf0;
}

.talk_wrap.last_answer .talk.grayOut {
    background-color: #fffaf0;
}
.talk .title{
    font-size:1.2rem;
    font-weight:bold;
}
.talk-crambs {
    margin: 0px 0px 5px 5px;
}
.talk-crambs a.non_link{
    color:#000;
    text-decoration:none;
    cursor:default;
}

.talk-tail {
    content: "";
    width: 0px;
    height: 0px;
    margin-top: 10px;
    border-top: solid 6px transparent;
    border-right: solid 10px var(--light-font-color);
    border-bottom: solid 8px transparent;
    border-left: none;
}

.talk-content {
  white-space: normal;
}
.talk-content img{
    max-width:370px !important;
}
.talk-content p{
    margin:0;
}

.question {
    background-color: var(--dark-font-color);
    padding: 7px 10px;
    border: solid 2px var(--dark-font-color);
    border-radius: 10px;
    color: white;
    overflow: hidden;
}

.question-tail {
    content: "";
    width: 0px;
    height: 0px;
    margin-top: 10px;
    border-top: solid 6px transparent;
    border-right: none;
    border-bottom: solid 8px transparent;
    border-left: solid 10px var(--dark-font-color);
}

.question-content {
  white-space: wrap;
}

.btn-category {
  font-size: small !important;
  margin: 5px;
  background-color: white;
}
.search-buttons.chat-category button.btn-category {
    font-size: 1.2em !important;
}
.hidden_button{
    display:none;
}