@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.w-container {
	all: initial;
	z-index: 9999999;
	position: fixed;
	bottom:0px;
	width:300px;
	display:block;
	flex-direction: column;
	box-shadow: 5px -5px 40px rgba(0, 0, 0, 0.4);
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	right:10px;
	border-radius: 10px 10px 0px 0px;
}
.w-container-mobile {
	z-index: 9999999;
	position: fixed;
	bottom:0px;
	right:0px;
	display:flex;
	flex-direction: column;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	border:0px;
}
.w-header {
	padding:10px 0px 10px 10px;
	display:flex;
	flex-direction: row;
	border-radius: 10px 10px 0px 0px;
}
.w-header-mobile {
	height: 60px;
	display:flex;
	justify-content:space-around;
	flex-direction: row;
}

.w-header-back {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	display:flex;
	flex-direction: row;
}
.w-header-bbut {
  cursor: pointer;
  width:24px;
  height:24px;
  background-image: url(../img/arrow_up.png);
  transform: rotate(-90deg);
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center;
  border-width:0px;
}

.w-header-ava {
	flex-grow: 1;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.w-header-img {
	width:40px;
	height:40px;
	border-radius: 20px;
}
.w-header-operator {
	display:flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 4;
	padding-left: 5px;
	cursor:default;
}
.w-header-operator-name {
	display:flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	color: #ffffff;
	font-size:15px;
}
.w-header-operator-doljnost {
	display:flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	color: #ffffff;
	font-size: 12px;
}
.w-header-close {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	min-width:60px;
	display:flex;
	flex-direction: row;
}
.w-header-close-btn {
  cursor: pointer;
  width:24px;
  height:24px;
  background-image: url(../img/close_icon_white.png);
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center;
  border-width:0px;
}
.w-header-open-btn {
  cursor: pointer;
  width:24px;
  height:24px;
  background-image: url(../img/arrow_up.png);
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center;
  border-width:0px;
}
.w-body {
	display:block;
	height:420px;
	border:0px;
	flex: 1;
	margin:0px 0px 0px 0px;
	background-color: white;
}
.w-body-chat-container {
	height:100%;
	border:0px;
	padding:0px 10px 0px 10px;
	display: flex;
	flex-direction: column;
	vertical-align: bottom;
	margin: auto 0 0 0;
	overflow-y: scroll;
	scrollbar-width: thin;
	background-color: white;
}
@media screen and (min-width: 640px) {
	.w-body-chat-container {
		max-height:100%;
	}
}
.w-body-dialog-list-container {
	height:100%;
	border:0px;
	padding:5px 10px 5px 10px;
	display: flex;
	flex-direction: column;
	vertical-align: bottom;
	margin: auto 0 0 0;
	overflow-y: scroll;
	scrollbar-width: thin;
	background-color: white;
}
.w-body-mobile {
	height:100%;
	display: flex;
	flex: 1;
	flex-direction: column;
	vertical-align: bottom;
	padding:10px 5px 5px 10px;
	margin: auto 0 0 0;
	overflow-y: scroll;
	scrollbar-width: thin;
	background-color: white;
}
.w-intro {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: end;
	padding-top:2px;
	padding-right:1em;
}
.w-intro-mobile {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: end;
	padding-top:2px;
	padding-right:1em;
}
.swct-href {
	text-decoration:none;
	all: initial;
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	cursor: pointer;
}
	
.w-body-my-massage{
	border:1px solid grey;
	background-color: #EEFFBB;
	border-radius: 10px 10px 10px 10px;
	font-size: 11px!important; 
	padding:5px;
	max-width: 80%;
}
.w-body-op-massage{
	border:1px solid grey;
	background-color: #FFFFFF;
	border-radius: 10px 10px 10px 10px;
	font-size: 11px!important; 
	padding:5px;
	max-width: 80%;
}
.w-body-my-msg-row {
	display:flex;
	justify-content: end;
	width:100%;
	margin-bottom:5px;
}
.w-body-op-msg-row {
	display:flex;
	justify-content: start;
	width:100%;
	margin-bottom:5px;
}
.w-footer {
	padding:0px 5px 0px 5px;
	height:50px;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: white;
}
.w-footer-mobile {
	padding:5px;
	height:50px;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: white;
}
.w-footer-input {
  border: 0!important;
  min-height: auto;
  background: #fff;
  color: #2f2f2f!important;
  font-family: 'Roboto', sans-serif;
  font-size: 11px!important; 
  font-weight: 400!important;
  width:100%;
  resize: none !important;
  overflow-y: hidden !important;
  line-height: 18px;
  cursor: text;
  transition: min-height .1s linear;
  min-width: auto !important;
  max-width: auto !important;
  padding-top: 0 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.w-footer-input:hover,
.w-footer-input:focus {
    outline: none;
}

.w-footer-input-wraper{
	border:1px solid grey;
	padding:5px;
	border-radius: 20px;
	width:100%;
	display:flex;
	flex-direction:row;
	align-items: center;
}

.w-footer-input-button {
  box-sizing: border-box;
  border: 0!important;
  min-width: 30px!important;
  width: 30px!important;
  min-height: 30px!important;
  height: 30px!important;
  padding: 3px 9px!important;
  background-image:  url(../img/send-light.svg) !important;
  background-size: 14px 14px;
  background-position: 8px 8px;
  background-repeat: no-repeat;
  border-radius: 50%!important;
  cursor: pointer;
  margin: auto 0 0 0;
  visibility: hidden;
}
.swct-sfb {
  color: #fff!important;
  font-family: 'Roboto', sans-serif;
  font-size: 11px!important;
  padding:5px;
  border-radius: 5px;
  cursor: pointer;
  margin-top:10px;
  text-align: center;
  grid-column: span 2;
}
.swct-sfw {
	display:flex;
	flex-direction: column;
	padding:5px;
}
.swct-sfh {
	font-family: 'Roboto', sans-serif;
	font-size: 11px!important;
	margin-top:5px;
	margin-bottom:5px;
	text-align: center;
}
	
.w-mobile-button-container {
	z-index: 9999999;
	display:flex;
	justify-content: center;
	align-items: center;
	width:86px;
	height:86px;
	position:fixed;
	bottom:25px;
	border-radius: 50%!important;
	box-shadow: 5px -5px 40px rgba(0, 0, 0, 0.4);
	right:25px;
}
.w-mobile-button-container-img{
	width:70px;
	height:70px;
	border-radius: 50%!important;
}

.swct-rsc {
	display:grid;
	grid-template-columns: 20% 80%;
	width:100%;
	gap: 6px 0px;
}
.swct-itr {
	width:1em;
}
t-box input {justify-self:center;margin:0px;}

.swct-select {
  all: initial;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  padding:5px;
  cursor: pointer;
  border-radius: 5px;
  color: white;
  border: none;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}

.swct-select option {
  padding: 30px;
}

.w-body-dialog-row {
	padding:5px;
	height: 50px;
	display:flex;
	flex-direction: row;
	border-left: none; 
	border-right: none; 
	border-top: none;
	border-bottom: 1px solid;
	border-image: linear-gradient(to right, #ffffff, #CCCCCC, #CCCCCC, #ffffff ) 47% 0%;
	cursor:pointer;
}

.w-body-dialog-row-avatar {
	flex-basis: 20%;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.w-body-dialog-row-avatar-img {
	width:40px;
	height:40px;
	border-radius: 20px;
}

.w-body-dialog-info {
	display:flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: 60%;
}
.w-body-dialog-row-name {
	display:flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	color: #111111;
}
.w-body-dialog-row-last-msg {
	display:flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	color: #222222;
    font-size: 9px;
}
.w-body-dialog-new-messages {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.w-body-dialog-new-messages-circle {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #ffffff;
    font-size: 11px;
    min-width: 13px;
    background-color: red;
    padding: 5px;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  animation: blinkRed 0.8s infinite;
}
.w-mobile-button-cnt-wrap {
	position:absolute; left:65px; top:7px;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.w-mobile-button-cnt-circ {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #ffffff;
    font-size: 13px;
    min-width: 13px;
    background-color: red;
    padding: 5px;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  animation: blinkRed 0.8s infinite;
}
.w-header-cnt-wrap {
	position:absolute; right:80px; top:19px;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.w-header-cnt-circ {
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #ffffff;
    font-size: 13px;
    min-width: 13px;
    background-color: red;
    padding: 5px;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  animation: blinkRed 0.8s infinite;
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}