/*----------------------------------------------------------------------------------|  www.vdm.io  |----/
				fdsh 
/-------------------------------------------------------------------------------------------------------/

	@version		1.0.39
	@build			4th April, 2023
	@created		17th December, 2020
	@package		Reservation
	@subpackage		messages.css
	@author			farhad shahbazi <http://farhad.com>	
	@copyright		Copyright (C) 2015. All Rights Reserved
	@license		GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html
  ____  _____  _____  __  __  __      __       ___  _____  __  __  ____  _____  _  _  ____  _  _  ____ 
 (_  _)(  _  )(  _  )(  \/  )(  )    /__\     / __)(  _  )(  \/  )(  _ \(  _  )( \( )( ___)( \( )(_  _)
.-_)(   )(_)(  )(_)(  )    (  )(__  /(__)\   ( (__  )(_)(  )    (  )___/ )(_)(  )  (  )__)  )  (   )(  
\____) (_____)(_____)(_/\/\_)(____)(__)(__)   \___)(_____)(_/\/\_)(__)  (_____)(_)\_)(____)(_)\_) (__) 

/------------------------------------------------------------------------------------------------------*/

/* CSS Document */

    .header-chats {
        display: flex;
        align-items: center;
        padding: 10px 20px !important;
    }

    p#user-name {
        margin: 0 20px 0 20px;
    }

    div#chat-status {
        margin-right: auto;
    }

    p#notice {
        margin: 0;
        font-size: 0.9rem;
        color: #2a9bff;
    }

    div#chat-body {
        padding: 0px 0 10px;
    }

    /* .card-cahtt *::selection {
        background: #0074ffcc;
        text-shadow: unset;
    } */

    div#chat-body::-webkit-scrollbar-track {
        background: rgb(0 0 0 / 5%);
    }

    div#chat-body::-webkit-scrollbar {
        width: 6px;
    }

    div#chat-body::-webkit-scrollbar-thumb {
        background: rgb(0 0 0 / 20%);
        border-radius: 20px;
    }

    .chat .card-body {
        height: 400px;
        overflow-y: auto;
        background: url("/components/com_reservation/assets/images/medical_pattern_light.png"); 
        background-size: 150px;
    }
    .chat .card-body  .pm {
        text-align: left;
        color: #032133;
    }

    .info-message{
        display: flex;
        align-items: center;
        margin-top: 5px;
    }

    .chat .card-body .pm span.read::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='15px' height='15px' viewBox='0 0 512.000000 512.000000' preserveAspectRatio='xMidYMid meet' style='%0Afill: %230ba7cf;'%3E%3Cg transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)' fill='inherit' stroke='none'%3E%3Cpath d='M3249 3826 c-19 -7 -45 -19 -57 -28 -12 -8 -358 -347 -770 -754 -411 -406 -840 -830 -953 -942 l-206 -203 -401 418 c-221 230 -423 435 -449 455 -130 102 -310 60 -389 -92 -29 -55 -26 -163 6 -222 16 -30 201 -229 512 -551 268 -278 512 -527 541 -554 59 -54 108 -73 183 -73 105 0 69 -33 1204 1090 580 574 1065 1057 1078 1074 69 94 49 256 -41 332 -72 61 -174 80 -258 50z'%3E%3C/path%3E%3Cpath d='M4777 3816 c-20 -8 -52 -25 -70 -40 -17 -14 -452 -442 -966 -950 l-935 -925 -63 59 c-103 96 -204 113 -315 53 -85 -46 -128 -121 -128 -223 0 -70 17 -117 61 -169 81 -94 295 -302 328 -317 20 -10 64 -20 98 -22 121 -8 57 -65 1218 1083 578 572 1060 1053 1072 1071 92 133 22 328 -136 382 -45 16 -117 14 -164 -2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    }

    .chat .card-body .pm span.unread::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='12px' height='12px' viewBox='0 0 360.000000 258.000000' preserveAspectRatio='xMidYMid meet' style='%0Afill: %230ba7cf;'%3E%3Cg transform='translate(0.000000,258.000000) scale(0.100000,-0.100000)' fill='inherit' stroke='none'%3E%3Cpath d='M3249 2556 c-19 -7 -45 -19 -57 -28 -12 -8 -358 -347 -770 -754 -411 -406 -840 -830 -953 -942 l-206 -203 -401 418 c-221 230 -423 435 -449 455 -130 102 -310 60 -389 -92 -29 -55 -26 -163 6 -222 16 -30 201 -229 512 -551 268 -278 512 -527 541 -554 59 -54 108 -73 183 -73 105 0 69 -33 1204 1090 580 574 1065 1057 1078 1074 69 94 49 256 -41 332 -72 61 -174 80 -258 50z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    }
    

    .chat .card-body .pm span {
        margin-left: 5px;
        text-align: start !important;
        unicode-bidi: plaintext !important;
        display: block;
    }
    
    .chat .card-body  .me{
        text-align: right !important;
    }

    .chat .card-body .pm .text{
        max-width: 220px;
        padding: 6px 15px 0;
        background-color: #ffffff;
        margin: 0 10px;
        border-radius: 10px;
        box-shadow: 0 1px 2px #00000024;
        display: inline-block;
        margin-top: 10px;
    }

    .chat .card-body .me .text{
        background-color: #e2ffc7 !important;
    }

    .chat .card-body .pm .time{
        margin-right: 2px;
        font-size: 0.6rem;
        letter-spacing: 0.5px;
        color: #b7b7b7;
    }

    .chat .card-body .me.pm .time{
        color: #55ae04;
    }

    .chat .card-footer{
        background: #fff;
        border-top: 2px solid #eee;
    }
    .chat .card-header{
        text-align: center;
        padding: 7px 0;
        border-bottom: 1px solid #eee;
    }
    .chat .card-header .img{
        height: 65px;
        width: 65px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
    }
    .chat .card-header  .img img{
        height: inherit;
        width: inherit;
    }

    #chatMessage {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 15px 65px 10px 120px;
        border: unset;
        margin: 0px !important;
        resize: none;
        max-height: 100px;
        box-shadow: unset;
    }

    textarea#chatMessage::-webkit-scrollbar {
        width: 0;
    }

    textarea#chatMessage:focus {
        box-shadow: unset;
    }
    
    input#atachedfile {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    
    
    button#chatSendBtn {
        position: absolute !important;
        top: 50%;
        transform: translate(-10px, -50%);
        background: unset;
        border: unset;
        box-shadow: unset;
        padding: 0;
    }

    form#sending-form {
        position: relative;
        margin: unset;
        padding: 5px;
    }

    button#chatSendBtn, #upload_file, #upload_voise {
        background: rgb(0 0 0 / 0%);
        padding: 10px;
        border-radius: 50%;
        transition: 0.3s;
    }

    button#chatSendBtn:hover, #upload_file:hover, #upload_voise:hover {
        background: rgb(0 0 0 / 7%);
    }

    #atachedfile {
        display: none;
    }

    label#upload_file {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    #upload_voise {
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%);
    }

    #loading{
        position: absolute;
        right: 10px;
        top: 2px;
        display: none;
    }







img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.modalimg {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modalimg-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modalimg-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.closeimg {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modalimg-content {
    width: 100%;
  }
}


/* Codes after to component builder */

.card-cahtt {
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    border-radius: 10px;
    border: 1px solid #eeeeee;
    overflow: hidden;
}


@media (min-width: 768px)
.css-1obmwoi {
    display: initial;
}
.css-1obmwoi {
    display: none;
    position: fixed;
    inset: 0px;
    z-index: 9;
}
.css-1erlu4p {
    position: fixed;
    z-index: 10;
    transform-origin: left top;
    transform: scale(1);
    opacity: 1;
    transition: opacity 200ms cubic-bezier(0.2, 0, 0.2, 1) 0s, transform 200ms cubic-bezier(0.2, 0, 0.2, 1) 0s;
}
.css-1wjqtxb {
    direction: rtl;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: rgb(142 142 142 / 20%) 0px 6px 12px 0px;
    padding: 1.2rem 0px;
    list-style: none;
    margin: 0px;
    overflow: hidden;
    min-width: 170px;
    z-index: 1;
}
.Menu_MenuItemWrapper__NyeOc {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 1.1rem 1.6rem;
}
.css-v6ppy3 {
    cursor: pointer;
    user-select: none;
}
.Menu_MenuIconWrapper__MU18O, .Menu_MenuIcon__tFRZQ {
    height: 18px;
    margin-left: 0.6rem;
    width: 18px;
}
.Menu_Title__jDLFR {
    color: #42526e;
    flex: 1 1;
    font-size: 14px;
    line-height: 22px;
    margin-left: 0.6rem;
    -webkit-user-select: none;
    user-select: none;
}

.Menu_MenuItemWrapper__NyeOc:hover {
    background-color: #f1f3f5;
}

.Menu_Title__jDLFR, .Menu_base__nR7KL {
    color: var(--text-color);
    font-family: Shabnam;
    margin: 0;
}

.pm.focus {
  background: #11111130;
}

.pm.focus2 {
  background: #9296ff8c;
}

@media (min-width: 576px)
.css-go2n58 {
    padding: 0.8rem 1.2rem;
    -webkit-box-align: center;
    align-items: center;
}

.css-go2n58 {
    width: 100%;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    direction: rtl;
    min-height: 54px;
    background-color: rgb(248, 248, 248);
    padding-right: 1.2rem;
    cursor: pointer;
    overflow: hidden;
}

.css-1ber1nl {
    flex: 1 1 0%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    // justify-content: center;
    overflow: hidden;
}

@media (min-width: 576px)
.css-1fgag0w {
    padding: 1rem;
}

.css-1fgag0w {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 1.3rem 0.6rem;
}

.css-pgix0h {
    width: 100%;
    overflow: auto;
    display: none;
    height: 100px;
}
