/*
You can import external fonts to your CSS using @import method, like:
@import url('https://fonts.googleapis.com/css?family=Roboto');
*/

/* Settings applied to mobile devices */
@media(max-device-width:800px) {
      /* All chatbot content, in mobile devices*/
      html,.text_user { 
          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 { 
          font-size: 100% !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: 70px !important;
          width: 70px !important;
          height: 70px !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:40px !important;
      }
      /* Icon upload */
      #upfile1 {
          width:50px !important;
          height:50px !important; 
      }
}

.container_initial {
    background-color: #F3F3F3;
}

/* Dialog main screen background */
.image_background_chat {
	background-image: url(); 
  	background-repeat: no-repeat;
  	background-size: cover; 
}
/* Color font chat */   
.color_background_chat {
 	background-color:white; 
}
/* Bot's message container */
.message_bot {
    background-color: #3eba9e;
    border-radius: 10px;
}
/* Bot's message */
.text_bot {
    color: white;
    font-size:1em;
    font-family: "Roboto", sans-serif;
}
/* Bot's avatar arrow */
.message_bot_seta {
    border-right: 6px solid mediumseagreen; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
/* User message container */
.message_user {
    font-size:17px;
    text-align: center;
    background-color: wheat;
    border:0px black solid;
    width: calc(84% - 50px);
    padding: 5px 10px;
}

/* VISITOR'S PRESENTATION */
/* User's message '*/
.text_user {
    color:black;
    font-size:1em;
    font-family: "Roboto", sans-serif;
}
/* User's avatar arrow */
.message_user_seta {
    border-left: 9px solid wheat; 
    border-top: 7px solid transparent;  
    border-bottom: 7px solid transparent;
}
/* User's avatar' */
.avatar_user {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-size: cover;
    position: relative;
    float:right;     
    border: solid 0px silver;
    background: url(../images/account.png) center center no-repeat;
}

/* LIST ITEMS */
/* List items container */
.container_list {
    width:98%;
    border:0px red solid;
}
/* Items to be selected by visitor (lists)  */
#itens_list {
    margin-top:3px;
    float:left;
    margin-left:3px; 
    background-color: #3a9dbe;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}

/* MULTIPLE CHOICE */
/* Multiple choice container */
.container_multiple {
    width:98%;
    margin-left:auto;
    margin-right:auto; 
}
/* Items to be selected by visitor (without images) */
.itens_multiple {
    margin-top:5px;
    float:left;
    margin-left:3px; 
    background-color: #3a9dbe; 
    color:white; 
    width:auto;
    height:auto;
    text-align: center;
    cursor:pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}

/* CAROUSEL */
/* Carrousel container */
.carousel {
    width:calc(100% - 50px);
    height:350px;
    float:left; 
}
/* Name of each carrousel item, used in the multi-choice component */
.label_carrousel_image {
    color:white;
    background-color: blue;
    text-align: center;
    cursor:pointer;
    height:auto;
    width:auto;
    padding-top: 6px;
    padding-bottom: 0px;
    padding-left: 8px;
    padding-right: 8px;  
}
/* Description of the carrousel item used in the multi-choice component */
.description_carrousel {
    width:260px;
    height: auto;
    font-size:13px;
    cursor: default;
    color:black; 
}
/* Labels of carrousel items (url name, proceed and back) */
.title_carrousel_image {
    color:blue;
    font-size:12px;
    cursor:pointer;
    display:grid;
}

/* TYPING AREA */
/* Send message button (class) */
.button_message {
    background-color: lightcoral;
}
/* Send message button (id) */
#sendButton {
    background-image: url('images/send_chat.png');
    background-repeat: no-repeat; 
    cursor: pointer;
    background-position-x: 4px;
    background-position-y: 3px; 
    float:right;
    margin-left:10px;
    padding:11px !important;
    width: 32px;
    height:30px;
    border-radius: 0% !important;
    background-size: 25px;
}
/* Text field for user input */
.field_user {
    margin:5px 10px 3px 0px !important;
    height:30px;
    padding-left: 5px !important;
    width:50% !important;
    float: right;
    background-color: rgba(243,243,243,0.8) !important;
}

/* GENERAL */
/* Container to store your facebook and gmail login options (facebook and google images) */
#container_login {
    border:0px red solid;
    width:99%;
    margin-top:10px;
}
/* Start chat button */
.button_start {
    background-color: tomato;
    width:auto;
    height:auto;
    color:white;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}
/* Button to restart dialog */
.button_proceed {
    background-color: #3a9dbe;
    margin-top:6px;
    float:left;
    margin-left:3px;
    color:white;
    width:auto;
    height:auto;
    text-align: center;
    cursor:pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}
/* Chat structure */
body {
    border:0px red solid;
    overflow: auto;
}
/* Image simulating a bot typing a message */
.icon_typing {
    float:left;
    border-color:blue;
    border-width: 0px;
    border-style: solid;  
    height:35px;
    width:55px;
    background-size: cover;
}
/* Close button in embbeded plugin dialog (deprecated) */
.button_finish {
    background-color: #3a9dbe;
    margin-top:6px;
    float:left;
    margin-left:3px;
    color:white;
    width:auto;
    height:auto;
    text-align: center;
    cursor:pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}
/* Used on all buttons changing the color after clicking */
.button_clicked {
    background-color: gray !important;
    border:none !important;
}
/* Applied to user text after message is sent */
.text_clicked {
   font-style: italic;
}
/* Used in all option boxes applied after clicking (clicked) */
.btn_multiple_click {
   background-color: lightskyblue; 
   color:white;
   text-align: center;
   cursor:pointer; 
   height:auto;
   width:auto;
   margin-left:3px;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px; 
}

/* QUALIFICATION */
/* Container of the qualification */
.option_qualification {
    background-color: lightskyblue;
    height:auto;
}
/* Button to start the qualification */
.button_continue {
    background-color: #3a9dbe; 
    float:left;
    margin-left:3px;
    color:white;
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}
/* Qualification options */
.templateQualification {
    margin-top:3px;
    float:left;
    margin-left:3px; 
    background-color: #3a9dbe; 
    color:white; 
    width:auto;
    height:auto;
    text-align: center;
    cursor:pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
}

/* INTERACTIVE PUBLISHING */
/* General exhibition area for interactive publishing */
.content_dynamic {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 20px !important;
    background-image: url('https://inteli.chat/wp-content/uploads/2017/09/fundo_header-2.jpg'); 
/*
    color: black;
    font-family: "Roboto", sans-serif;
    font-size: 1em;
*/
}

/* Container of information exhibition */
.content_information {
    width:90%;
    height:auto;
    overflow:hidden;
    margin-left:23px;
    margin-top:10px;
  	background-color: #F3F3F3;
}

/* KNOWLEDGE BASE */
/* Container to display article's items found in the knowledge base */
.container_knowledge {
   margin-left:auto;
   margin-right:auto;
   margin-bottom:10px;
   border:0px red solid;
   /*width:98%;*/
   width:auto;
   display:table;
}
/* Item of each article found in the knowledge base */
.knowledge {
    float:left;
    margin-left:3px;
    background-color: #3a9dbe;
    color:white;
    width:auto;
    height:auto;
    text-align: center;
    cursor:pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;  
    margin-top:3px;
}

/* BOT'S PRESENTATION */
/* BOT's avatar */
.avatar_bot {
    background-size: cover;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0 7px 0 0;
    position: relative;
    border: solid 0px silver;
    float:left;
}

.button_start {
    background-color: #3eba9e;
    color: floralwhite;
    font-family: sans-serif;
}