/*body {*/
/*    font-family: Arial, sans-serif;*/
/*    background: #f4f4f4;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 100vh;*/
/*    margin: 0;*/
/*}*/

/*.chat-container {*/
/*    width: 400px;*/
/*    background: white;*/
/*    border-radius: 10px;*/
/*    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
/*    overflow: hidden;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.chat-header {*/
/*    background: #007bff;*/
/*    color: white;*/
/*    padding: 15px;*/
/*    text-align: center;*/
/*    font-size: 18px;*/
/*    font-weight: bold;*/
/*}*/

/*.chat-box {*/
/*    flex: 1;*/
/*    padding: 15px;*/
/*    overflow-y: auto;*/
/*    max-height: 400px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 10px;*/
/*}*/

/*.chat-box .message {*/
/*    padding: 10px;*/
/*    border-radius: 5px;*/
/*    max-width: 80%;*/
/*}*/

/*.chat-box .user {*/
/*    align-self: flex-end;*/
/*    background: #007bff;*/
/*    color: white;*/
/*}*/

/*.chat-box .bot {*/
/*    align-self: flex-start;*/
/*    background: #e9ecef;*/
/*    color: black;*/
/*}*/

/*.chat-input {*/
/*    display: flex;*/
/*    border-top: 1px solid #ddd;*/
/*    padding: 10px;*/
/*    background: #fff;*/
/*}*/

/*.chat-input input {*/
/*    flex: 1;*/
/*    padding: 10px;*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 5px;*/
/*    outline: none;*/
/*}*/

/*.chat-input button {*/
/*    background: #007bff;*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 10px 15px;*/
/*    cursor: pointer;*/
/*    border-radius: 5px;*/
/*    margin-left: 5px;*/
/*}*/

/*.chat-input button:hover {*/
/*    background: #0056b3;*/
/*}*/




@import url("https://fonts.googleapis.com/css?family=Raleway|Ubuntu&display=swap");
 body {
	 background: #e8ebf5;
	 padding: 0;
	 margin: 0;
	 font-family: Ubuntu;
}
 .chat-box {
	 height: 90%;
	 width: 400px;
	 position: absolute;
	 margin: 0 auto;
	 overflow: hidden;
	 display: -webkit-box;
	 display: -ms-flexbox;
	 display: flex;
	 -webkit-box-orient: vertical;
	 -webkit-box-direction: normal;
	 -ms-flex-direction: column;
	 flex-direction: column;
	 z-index: 15;
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.005);
	 right: 0;
	 bottom: 0;
	 margin: 15px;
	 background: #fff;
	 border-radius: 15px;
	 visibility: hidden;
}
 .chat-box-header {
	 height: 8%;
	 border-top-left-radius: 15px;
	 border-top-right-radius: 15px;
	 display: flex;
	 font-size: 14px;
	 padding: 0.5em 0;
	 box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	 box-shadow: 0 0 3px rgba(0, 0, 0, 0.2), 0 -1px 10px rgba(172, 54, 195, 0.3);
	 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.025);
}
 .chat-box-header h3 {
	 font-family: ubuntu;
	 font-weight: 400;
	 float: left;
	 position: absolute;
	 left: 25px;
}
 .chat-box-header p {
	 float: right;
	 position: absolute;
	 right: 16px;
	 cursor: pointer;
	 height: 50px;
	 width: 50px;
	 text-align: center;
	 line-height: 3.25;
	 margin: 0;
}
 .chat-box-body {
	 height: 75%;
	 background: #f8f8f8;
	 overflow-y: scroll;
	 padding: 12px;
}
 .chat-box-body-send {
     background: #1262eb;
     color: #fff;
	 width: 250px;
	 float: right;
	 padding: 10px 20px;
	 border-radius: 5px;
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.015);
	 margin-bottom: 14px;
}
 .chat-box-body-send p {
	 margin: 0;
	 color: #fff;
	 font-size: 14px;
	 margin-bottom: 0.25rem;
}
 .chat-box-body-send span {
	 float: right;
	 color: #777;
	 font-size: 10px;
}
 .chat-box-body-receive {
	 width: 250px;
	 float: left;
	 background: white;
	 padding: 10px 20px;
	 border-radius: 5px;
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.015);
	 margin-bottom: 14px;
}
 .chat-box-body-receive p {
	 margin: 0;
	 color: #444;
	 font-size: 14px;
	 margin-bottom: 0.25rem;
}
 .chat-box-body-receive span {
	 float: right;
	 color: #777;
	 font-size: 10px;
}
 .chat-box-body::-webkit-scrollbar {
	 width: 5px;
	 opacity: 0;
}
 .chat-box-footer {
	 position: relative;
	 display: flex;
}
 .chat-box-footer button {
	 border: none;
	 padding: 16px;
	 font-size: 14px;
	 background: white;
	 cursor: pointer;
}
 .chat-box-footer button:focus {
	 outline: none;
}
 .chat-box-footer input {
	 padding: 10px;
	 border: none;
	 -webkit-appearance: none;
	 border-radius: 50px;
	 background: whitesmoke;
	 margin: 10px;
	 font-family: ubuntu;
	 font-weight: 600;
	 color: #444;
	 width: 280px;
}
 .chat-box-footer input:focus {
	 outline: none;
}
 .chat-box-footer .send {
	 vertical-align: middle;
	 align-items: center;
	 justify-content: center;
	 transform: translate(0px, 20px);
	 cursor: pointer;
}







.caracter{
    /* --width-caracter: 35%; */
    --width-caracter: 100px !important;
    height: var(--width-caracter);
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */

position: absolute;
bottom: 0;
right: 0;
margin: 15px;
}
.qreety-caracter{
    height: 100% !important;
}

.qreety-eye {
    width: calc(var(--width-caracter) / 100 * 65) !important;
    height: 35% !important;
    position: absolute;
    background: url(https://about.qreety.com/imags/eye-caracter-qreety.png) no-repeat;
    background-size: 100%;
    mask-image: url(https://about.qreety.com/imags/eye-caracter-qreety.png);
    mask-position: 0% 50%;
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    /* mask-size: cover;
    mask-repeat: no-repeat; */
    animation: qreety-eye 3s infinite ease-in-out;
}

@keyframes qreety-eye {
    0%, 20%, 100% {
    mask-position: 0% 0%;
    }
    10% {
    mask-position: 0% -500%;
    }
}
        
        
        
        
/* .chat-button {*/
/*	 padding: 25px 16px;*/
/*	 background: #2c50ef;*/
/*	 width: 120px;*/
/*	 position: absolute;*/
/*	 bottom: 0;*/
/*	 right: 0;*/
/*	 margin: 15px;*/
/*	 border-top-left-radius: 25px;*/
/*	 border-top-right-radius: 25px;*/
/*	 border-bottom-left-radius: 25px;*/
/*	 box-shadow: 0 2px 15px rgba(44, 80, 239, 0.21);*/
/*	 cursor: pointer;*/
/*}*/
/* .chat-button span::before {*/
/*	 content: "";*/
/*	 height: 15px;*/
/*	 width: 15px;*/
/*	 background: #47cf73;*/
/*	 position: absolute;*/
/*	 transform: translate(0, -7px);*/
/*	 border-radius: 15px;*/
/*}*/
/* .chat-button span::after {*/
/*	 content: "Message Us";*/
/*	 font-size: 14px;*/
/*	 color: white;*/
/*	 position: absolute;*/
/*	 left: 50px;*/
/*	 top: 18px;*/
/*}*/
 .modal {
	 position: fixed;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.5);
	 opacity: 0;
	 visibility: hidden;
	 transform: scale(1.1);
	 transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
 .modal-content {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 background-color: white;
	 padding: 1rem 1.5rem;
	 width: 24rem;
	 border-radius: 0.5rem;
}
 .modal-close-button {
	 float: right;
	 width: 1.5rem;
	 line-height: 1.5rem;
	 text-align: center;
	 cursor: pointer;
	 border-radius: 0.25rem;
	 background-color: lightgray;
}
 .close-button:hover {
	 background-color: darkgray;
}
 .show-modal {
	 opacity: 1;
	 visibility: visible;
	 transform: scale(1);
	 transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
	 z-index: 30;
}
@media only screen and (max-width: 450px) {
	 .chat-box {
		 max-width: calc(100% - 30px) !important;
	}
}