body{
    width: 100%;
    margin:0;
    padding: 0;
}

.chatCarouselImage img{
    width: 90% !important;
    height: auto !important;
    margin: 0 auto !important;
}

#chatBox{
    font-size:1.3rem !important;
}


.chatBoxArea{
    background: #66CCFF !important;
}

.speech-bubble-user{
    background: #99FF99 !important;
    color: #111 !important;
}

.speech-bubble-user:before{
    border-left: 12px solid #99FF99 !important;
}


@media (min-width: 768px) {

    .logout{
        position: fixed;
        top: 30px;
        left: 85%;
        z-index: 10000;
        opacity: 0;
        animation: appeare 0s ease 3s 1 normal forwards running;
    }
    
    @keyframes appeare {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    
    #login{
        width: 100%;
        margin: 200px auto;
        padding:5px;
        text-align: center;
        font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    }
    
    #login input[type="submit"]{
        margin-top: 10px;
    }
    
    #login h1{
        font-size: 1.1rem;
    }
    
    #login h1:before{
        content:'';
        display: inline-block;
        width:30px;
        height:30px;
        background-image: url(../img/logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 10px;
    }
    
    input[type="submit"]{
        padding:5px 20px 5px 20px;
        border-radius: 3px;
        cursor: pointer;
    }
    
    input[type="text"],input[type="password"]{
        border-radius: 3px;
        margin:10px 0;
    }
    
}

    @media (max-width: 768px) {

        .logout{
            position: fixed;
            top: 45px;
            left: 50%;
            z-index: 10000;
            opacity: 0;
            animation: appeare 0s ease 5s 1 normal forwards running;
        }
        
        @keyframes appeare {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }
        
        #login{
            width: 100%;
            margin: 200px auto;
            padding:5px;
            text-align: center;
            font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
            font-size: 0.8rem;
        }
        
        #login input[type="submit"]{
            margin-top: 10px;
        }
        
        #login h1{
            font-size: 0.8rem;
        }
        
        #login h1:before{
            content:'';
            display: inline-block;
            width:30px;
            height:30px;
            background-image: url(../img/logo.png);
            background-repeat: no-repeat;
            background-size: contain;
            vertical-align: middle;
            margin-right: 10px;
        }
        
        input[type="submit"]{
            padding:1px 10px 1px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        input[type="text"],input[type="password"]{
            border-radius: 3px;
            margin:10px 0;
        }
        
        }