/*
NEW_LAYOUT
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 { 
          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;
      } 
      /* Information content */
      .content_information {
        font-size: 70% !important; 
      }
      .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;
      }
}
/* Dialog main screen background */
.image_background_chat {
    background: url();
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center;
}
/* Color font chat */   
.color_background_chat {
    background-color: #F2F5FD; 
}
/* Bot's message container */  
.message_bot {
    background-color: #1390C2;
    min-height: 48px;
    padding: 16px 16px 16px 48px;
}

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

/* Bot's message */
.text_bot {
    color: white;
    font-size: 14px;
    font-family: roboto;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    font-style: normal;
    padding-right: 6px;
    padding-left: 4px;
}

/* Text field for user input */
.field_user {
    height:30px;
    float: right;
    height: 48px;
    background: #FFFFFF;
    border-bottom: 0px solid #9e9e9e !important;
    font-size: 14px;
    font-family: roboto;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    font-style: normal;
    border: none;
    outline: none;
    width: 50%;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 0 0 0 !important;
}

.icon_avatar_user { 
    color: #1390C2; 
    font-size: 21px;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 900;
    padding-top: 14px;
}

.icon_avatar_user_send { 
    color: #1390C2; 
    font-size: 21px;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 900;
    float: right;
    padding-left: 11px;
}

.container_dialogue_bot {
    padding-left: 64px;
    padding-top: 0px !important;
}

.container_dialogue_user {
    padding-right: 64px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-bottom: 16px;        
}

.container_user {
    float:right;
    margin: 0px 0px 0px 0px !important; 
    background: #FFFFFF;
    height: 48px;
    width: 32px;
    height: 48px;
}

/* 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 {
    min-height: 49px;
    padding: 13px 13px 13px 14px;
    background-color: wheat;
    width: auto !important;
}

/* VISITOR'S PRESENTATION */
/* User's message '*/
.text_user {
    color: black;
    font-size: 14px;
    font-family: roboto;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    font-style: normal;
    max-width: 90%;
}
/* 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:100%;
    border:0px red solid;
}
/* Items to be selected by visitor (lists)  */
#itens_list {
    margin-top:3px;
    float:left;
    margin-left:3px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding-top: 10px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
}

/* MULTIPLE CHOICE */
/* Multiple choice container */
.container_multiple {
    width:100%;
    margin-left:auto;
    margin-right:auto; 
    margin-bottom: 16px;
}
/* Items to be selected by visitor (without images) */
.itens_multiple { 
    margin-bottom:5px;
    margin-top:0px;
    float:left;
    margin-left:5px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding: 10px 10px 10px 10px; 
}

/* 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;
}


/* Send message button (id) */
#sendButton {
    width: 35px;
    font-size: 21px;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 900;
    color: #1390C2;
    padding-top: 19px;
    cursor: pointer;
}

/* 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 {
    float: left;
    margin-top:3px;
    margin-left:12px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding-top: 10px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
}
/* 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 {
    margin-top:3px;
    float:left;
    margin-left:12px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding-top: 10px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
}

/* 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: #C2A213;
    color:white;
    text-align: center;
    cursor:pointer; 
    height:auto;
    width:auto;
    margin-left:3px;
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding: 10px 16px 10px 16px;
    margin-right: 64px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Button to start the qualification */
.button_continue {
    margin-top:3px;
    float:left;
    margin-left:12px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding-top: 10px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
}
/* Qualification options todo */
.templateQualification { 
    margin-top:3px;
    float:left;
    margin-left:12px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding-top: 10px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
}

/* INTERACTIVE PUBLISHING */
/* General exhibition area for interactive publishing */
.content_dynamic {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 20px !important;
}
/* Container of information exhibition */
.content_information {
    height:auto;
    overflow:hidden;
    width: calc(100% - 0px);
    display: inline-block;
    padding-left: 85px;
    font-family: Roboto;
    padding: 8px 64px 8px 64px;
}

/* 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 {
    margin-top:3px;
    float:left;
    margin-left:3px; 
    background-color: #C21351;
    color:white; 
    text-align: center;
    cursor:pointer;
    width:auto;
    height:auto;   
    border-radius: 4px;
    font-size: 14px;
    font-family: roboto;
    letter-spacing: 1.25px;
    line-height: 16px;
    font-style: normal;
    font-weight: 500;
    height: 36px;
    padding-top: 10px;
    padding-left: 11px;
    padding-right: 9px;
    padding-bottom: 10px;
}
/* BACKGROUND HTML */
html {
    background: #F2F5FD;
    font-family: roboto;
}
/* Input message */
#inputMessage {
    width:95%; 
    border: none;
    outline: none;
    padding-top: 19px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    font-family: roboto;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    font-style: normal;
}
.option_press { 
    background: gray !important; 
    font-family: sans-serif;
    color:white !important;
    font-size:14px;
    border-radius: 0px;
}
.option_press_hidden { 
    display: block;
}

.container_restart {
    padding-bottom: 16px;
}

.suppress_message {
    margin-top: 8px !important;
    margin-bottom: 8px;
}

.formUpload {
    padding-top: 18px;
    width: 20px;
}

.send-message {
    background: white;
}