@charset "UTF-8";@font-face {
    font-family: Metropolis;
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url(fonts/Metropolis-Regular.woff2) format("woff2"),url(fonts/Metropolis-Regular.woff) format("woff")
}

@font-face {
    font-family: Metropolis;
    font-style: italic;
    font-weight: 300 500;
    font-display: swap;
    src: url(fonts/Metropolis-RegularItalic.woff2) format("woff2"),url(fonts/Metropolis-RegularItalic.woff) format("woff")
}

@font-face {
    font-family: Metropolis;
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url(fonts/Metropolis-Bold.woff2) format("woff2"),url(fonts/Metropolis-Bold.woff) format("woff")
}

@font-face {
    font-family: Metropolis;
    font-style: italic;
    font-weight: 600 800;
    font-display: swap;
    src: url(fonts/Metropolis-BoldItalic.woff2) format("woff2"),url(fonts/Metropolis-BoldItalic.woff) format("woff")
}

/* html, body {   
  height:100%;
  font-family: Metropolis,Helvetica,sans-serif;
  font-weight: 400;
  font-size: 1rem;
} */

.webchat__bubble__content a,
button.webchat--css-oqxcz-kdgeig.webchat__render-markdown .webchat__render-markdown__citation,
button.webchat__render-markdown__citation {
	color: #83326D !important;
}

body strong {
	font-weight: 700;
}


.chat-box #webchat{
width: 100%;
height: 220px;
display: flex;
overflow: hidden;
transition: height 0.25s ease;
}
 
body .chat-box.conversation-started #webchat{
height: 370px !important;
}



#chat-link-and-bubble {
	position: fixed;
	bottom: 20px;
	right: 20px;
	height: 70px; 
}

#chat-link-and-bubble span.bubble {
	position: absolute;
	top: 50%;
  	transform: translate(-100%, -50%);
  	left: -20px;
	min-width: 130px;
  	max-width: 130px;
  	padding: 5px 10px;
	text-align: center;
  	border-radius: 6px;
	background-color: #F8F8F8;
	color: #83326D;
	font-size:12px;
  border: solid 1px #83326D47;
  box-sizing: border-box;
  line-height: 12px;
  font-weight:300;
}

#chat-link-and-bubble span.bubble:after {
	content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #83326D;
}

#chat-circle {
  
  background-color: #83326D;
  width: 60px;
  height: 60px;  
  border-radius: 100%;
  color: white;
  cursor: pointer;
  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0), 0 1px 5px 0 rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: normal;
	border: solid 2px #FFF;
}

#chat-circle img {
	width: 33px;
}

.btn#my-btn {
     background: white;
    padding-top: 13px;
    padding-bottom: 12px;
    border-radius: 45px;
    padding-right: 40px;
    padding-left: 40px;
    color: #5865C3;
}
#chat-overlay {
    background: rgba(255,255,255,0.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: none;
}


.chat-box {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
width: 350px;
max-width: 85vw;
background: #efefef;
border-radius: 15px;
box-shadow: 0 5px 35px 9px #ccc;
overflow: hidden;
}

.chat-box-toggle {
  cursor:pointer;
}

.chat-box-toggle img {
	width: 20px;
	height: 20px;
}

.chat-box-header {
  background-color: #83326D;
  border-top-left-radius:15px;
  border-top-right-radius:15px; 
  text-align:center;
  font-size:20px;
  padding:10px 10px 10px 15px;
	display: flex;
  justify-content: space-between;
	align-items: center;
}

.chat-box-header h2 {
  color:#FFF !important;
	font-size: 12px !important;
  margin: 0 !important;
  font-weight: bold !important;
  line-height: normal;
}









@media only screen and (max-width: 500px) {
   .webchat__basic-transcript {
        height:40vh;
    }
}

.chat-msg.user > .msg-avatar img {
  width:45px;
  height:45px;
  border-radius:50%;
  float:left;
  width:15%;
}
.chat-msg.self > .msg-avatar img {
  width:45px;
  height:45px;
  border-radius:50%;
  float:right;
  width:15%;
}
.cm-msg-text {
  background:white;
  padding:10px 15px 10px 15px;  
  color:#666;
  max-width:75%;
  float:left;
  margin-left:10px; 
  position:relative;
  margin-bottom:20px;
  border-radius:30px;
}
.chat-msg {
  clear:both;    
}
.chat-msg.self > .cm-msg-text {  
  float:right;
  margin-right:10px;
  background: #5A5EB9;
  color:white;
}
.cm-msg-button>ul>li {
  list-style:none;
  float:left;
  width:50%;
}
.cm-msg-button {
    clear: both;
    margin-bottom: 70px;
}

.webchat__defaultAvatar {
	border-radius:inherit !important;
}

.webchat__initialsAvatar {
	background-color: inherit !important;
}

.webchat__bubble__content {
	border-radius: 15px !important;
	font-size: 12px !important;
  line-height: normal;
}

.webchat__send-box-text-box {
  font-size: 12px !important;
}



.webchat__text-content.webchat__text-content--is-plain {
	background-color: #83326D;
	color: #FFF;
}

.webchat__send-box__text-box {
	margin-bottom: 0px;
}

.webchat__css-custom-properties > div {
	background-color: #F8F8F8 !important;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

.webchat__icon-button {
	background-color: #83326D !important;
	border-radius: 40px;
  	cursor: pointer;
	margin: 5px 5px 5px 0;
	height: 35px !important;
	width: 35px !important;
}

.webchat__icon-button:not(:disabled):not([aria-disabled="true"]):not(:active):hover,
.webchat__icon-button:hover {
	background-color: #83326D !important;
}

.webchat__icon-button .webchat__icon-button__shade {
	display: none;
}

.webchat__icon-button svg.webchat__send-icon path {
	fill:#FFF;
}

.webchat__typingIndicator,
.webchat__typing-indicator {
	background-image: url("https://chatbot.grandest.cci.fr/cci-campus-moselle/loader-chatbot.gif") !important;
	border-radius: 0px;
	background-position: center center !important;
	width: 35px !important;
	background-size: 100% auto !important;	
}

.webchat__activity-status {
	font-size: 10px !important;
}



.webchat__send-box {
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

.webchat__send-box .webchat__send-box__main {
	bottom: 0px;
  left: 0px;
  width: 100%;
}

.webchat__send-box__main {
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;	
}



.webchat__basic-transcript {
	text-align: left;
}

.webchat__imageAvatar__image img {
	height: 100% !important;
}


.webchat--css-hdcvt-1nriv21.webchat__suggested-action,
.webchat__suggested-actions__item-box button.webchat__suggested-action {
	border-color: rgb(76,49,114);
	color: rgb(76,49,114);
	border-radius: 15px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 12px;
}

.webchat__suggested-actions__carousel .react-film__flipper .react-film__flipper__body {
	background-color: rgb(76,49,114) !important;
}

.webchat__basic-transcript__filler {
flex: 0 !important;
}