::-webkit-scrollbar {
     display: none;
}
body{
     background-color: #5A5A5A;
     height: 100%;
}
pre {
     white-space: pre-wrap; 
     padding: 10px;
     max-width: 600px; 
     font-family:Fira Sans, sans-serif, Helvetica, Calibri, Arial;
     white-space: pre-line;
     font-size: 16px;
     margin-bottom: 0px;
}
.form-control:focus {
     border-color: #ced4da;
     -webkit-box-shadow: none;
     box-shadow: none;
     outline: 0 none;
}
#UserInputDiv{
     position: relative;
}
#UserInput{
     resize: none;
     padding-right: 5%;
     border-radius: .775rem;
     height: 62px;
}
#UserInputSendIcon{
     position: absolute;
     top: 18%;
     right: 1%;
}
#SendMsgBtn{
     opacity: 0.5;
}
.chatForm{
     margin: 0% 0% 2% 0% !important;
}
#FormResponse{
     overflow-y: auto;
}
.chartimg{
     width: 200px !important;
     height: auto !important;
}
.mb_cnt{
     width: 80%;
     text-align: center;
     border: 2px solid #eaf0ff;
     border-radius: 10px;
     background-color: #FFFFFF;
}
.apiresponse{
     margin-top: 2% !important;
     margin-bottom: 2% !important;
}
@media only screen and (min-width: 769px) AND (max-width: 992px){
     pre{
          font-size: 13px;
     }
     .chartimg{
          width: 180px !important;
     }
}
@media only screen and (min-width: 568px) AND (max-width: 768px){
     .container{
          position: relative !important;
          height: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
     }
     .FromResponseDiv{
          padding: 1% !important;
     }
     #FormResponse{
          padding: 0% 2%;
     }
     .chatForm{
          margin: 0% 0% 3% 0% !important;
          position: absolute !important;
          width: 100% !important;
          bottom: 0;
          padding: 0% 2%;
     }
     .form-control{
          font-size: 16px !important;
     }
     pre {
          font-size: 16px !important;
     }
     .avatar{
          width: 7% !important;
     }
     .Market_Logo{
          width: 7% !important;
     }
     .chartimg{
          width: 300px !important;
          height: auto !important;
     }
     .mb_cnt{
          width: 100%;
          float: none;
          border: none;
          border-radius: 0px;
     }
     .apiresponse{
          margin-top: 3% !important;
          margin-bottom: 3% !important;
     }
}
@media only screen and (min-width: 425px) AND (max-width: 567px){
     .container{
          position: relative !important;
          height: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
     }
     .FromResponseDiv{
          padding: 1% !important;
     }
     #FormResponse{
          padding: 0% 2%;
     }
     .chatForm{
          margin: 0% 0% 3% 0% !important;
          position: absolute !important;
          width: 100% !important;
          bottom: 0;
          padding: 0% 2%;
     }
     .form-control{
          font-size: 16px !important;
     }
     pre {
          font-size: 16px !important;
     }
     .avatar{
          width: 7% !important;
     }
     .Market_Logo{
          width: 7% !important;
     }
     .chartimg{
          width: 250px !important;
          height: auto !important;
     }
     .mb_cnt{
          width: 100%;
          float: none;
          border: none;
          border-radius: 0px;
     }
     .apiresponse{
          margin-top: 3% !important;
          margin-bottom: 3% !important;
     }
}
@media only screen and (min-width: 350px) AND (max-width: 424px){
     .container{
          position: relative !important;
          height: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
     }
     .FromResponseDiv{
          padding: 1% !important;
     }
     #FormResponse{
          padding: 0% 2%;
     }
     .chatForm{
          margin: 0% 0% 3% 0% !important;
          position: absolute !important;
          width: 100% !important;
          bottom: 0;
          padding: 0% 2%;
     }
     .form-control{
          font-size: 16px !important;
     }
     pre {
          font-size: 16px !important;
     }
     .avatar{
          width: 7% !important;
     }
     .Market_Logo{
          width: 7% !important;
     }
     .chartimg{
          width: 250px !important;
          height: auto !important;
     }
     .mb_cnt{
          width: 100%;
          float: none;
          border: none;
          border-radius: 0px;
     }
     .apiresponse{
          margin-top: 3% !important;
          margin-bottom: 3% !important;
     }
}
@media only screen and (min-width: 300px) AND (max-width: 349px){
     .container{
          position: relative !important;
          height: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
     }
     .FromResponseDiv{
          padding: 1% !important;
     }
     #FormResponse{
          padding: 0% 2%;
     }
     .chatForm{
          margin: 0% 0% 3% 0% !important;
          position: absolute !important;
          width: 100% !important;
          bottom: 0;
          padding: 0% 2%;
     }
     .form-control{
          font-size: 16px !important;
     }
     pre {
          font-size: 16px !important;
     }
     .avatar{
          width: 7% !important;
     }
     .Market_Logo{
          width: 7% !important;
     }
     .chartimg{
          width: 230px !important;
          height: auto !important;
     }
     .mb_cnt{
          width: 100%;
          float: none;
          border: none;
          border-radius: 0px;
     }
     .apiresponse{
          margin-top: 3% !important;
          margin-bottom: 3% !important;
     }
}
@media only screen and (max-width: 299px){
     .container{
          position: relative !important;
          height: 100% !important;
          max-width: 100% !important;
          padding: 0 !important;
     }
     .FromResponseDiv{
          padding: 1% !important;
     }
     #FormResponse{
          padding: 0% 2%;
     }
     .chatForm{
          margin: 0% 0% 3% 0% !important;
          position: absolute !important;
          width: 100% !important;
          bottom: 0;
          padding: 0% 2%;
     }
     .form-control{
          font-size: 16px !important;
     }
     pre {
          font-size: 13px !important;
     }
     .avatar{
          width: 7% !important;
     }
     .Market_Logo{
          width: 7% !important;
     }
     .chartimg{
          width: 150px !important;
          height: auto !important;
     }
     .mb_cnt{
          width: 100%;
          float: none;
          border: none;
          border-radius: 0px;
     }
     .apiresponse{
          margin-top: 3% !important;
          margin-bottom: 3% !important;
     }
}