/* Settings applied to mobile devices */
@media(max-device-width:800px) {
      /* All chatbot content, in mobile devices*/
      html { 
          font-size: 250% !important; 
      }
      /* Container to store your Facebook and Gmail login options */
      #container_login { 
          width:80% !important; 
      } 
      /* Facebook and gmail login icons */
      .icon_login { 
          width:500px !important;
          height:80px !important; 
      }
      /* The bot's font */
      .text_bot, .text_user { 
          font-size: 70% !important; 
      }
      .text_user {
          padding-top: 5px !important;
      }
      .text_bot {
          padding-left: 30px !important;
      }
      .icon_avatar_user_send {
          font-size: 35px !important;
      }
      /* Send message button */
      #sendButton { 
          width:80px !important; 
          height:75px !important; 
          background-size: 70px !important;
      }
      /* Main dialog container */
      .areaChat {
          padding-bottom: 5% !important;
      }
      /* Default user avatar */
      .avatar_user {
          background-size: 70px !important;
          width: 60px !important;
          height: 60px !important;
      }
      /* BOT's avatar' */
      .avatar_bot {
          background-size: 60px !important;
          width: 55px !important;
          height: 55px !important;
      }
      /* Icon simulating a bot typing */
      .icon_typing {
         background-size: 50px !important;
         width: 60px !important;
         height: 60px !important;
      }
      /* Description of each carrousel item, used in the multi-choice component */
      .description_carrousel {
            font-size:22px !important;
      }
      /* Labels of each carrousel item (url name, proceed and back) */
      .title_carrousel_image {
          display: none !important;
      }
      /* Specific style for carrousel labels */
      #prev,#next_carrousel,.container_carrousel {
          width: 50px !important;
          height: 50px !important;
      } 
      /* Main carrousel container */
      .carousel {
          width:90% !important;
          margin-left:15px;
      }
      /* Text field for user input */
      .field_user {
        height: 60px !important;
        font-size: 70% !important;
        width: 85% !important;
      }
      .container_user {
          height: 60px !important;
      }
      .icon_avatar_user {
          font-size: 35px !important;
      }
      /* Icon upload */
      #upfile1 {
          width:50px !important;
          height:50px !important; 
      }
      /* Multiple choice icons */
      .itens_multiple, .templateQualification { 
        font-size: 70% !important;
        height: 50px !important;
        padding: 15px !important;
        width: 80% !important;
      } 
      /* Information content */
      .content_information {
        font-size: 70% !important; 
        text-align: justify;
      }
      .styleList {
          display: grid !important;
      }
      .container_dialogue_bot {
          padding-left: 15px !important;
      }
      .container_dialogue_user {
         padding-right: 15px !important;
      }
      .message_bot {
          min-height: 70px !important;
      }
      .btn_multiple_click {
          margin-right: 10px !important;
          font-size: 70% !important;
          height: 50px !important;
          padding: 15px !important;
      }
      .button_proceed, .button_finish, .knowledge, .button_continue {
          font-size: 70% !important;
          height: 50px !important;
          padding: 15px !important;
      }
}