live-16390.wati.io by faisalkamal

/* ==UserStyle==
@name         live-16390.wati.io
@version      20230306.23.18
@namespace    userstyles.world/user/faisalkamal
@description  test only 
@author       faisalkamal
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://live-16390.wati.io") {
:root {
	--main-color: #009688;
	--main-shadow: #0096887a;
	--w-text: #fff;
	--b-text: #000;
	--w-bg: #9E9E9E;
	--b-bg: #607D8B;
	--secondary-color: #ded9d9;
	--third-color: #177b8d;
	--title-color: #161616;
}

body {
	height: 100vh !important;
}
.teaminbox_v2 {
	height: 100vh !important;
}
svg {
	color: var(--main-color) !important;
}
.dImfFu {
	font-family: Poppins, Montserrat;
	background: white;
	border-bottom: 1px solid rgb(15, 55, 212);
	min-height: 0!important;
	height: 75px !important;
	max-height: 100px !important;
	position: relative;
	z-index: 100000;
	transition: 250ms linear
}
.iLHmZN img {
	max-width: 50px;
	max-height: 50px;
	display: block;
	border-radius: 50%;
	animation: bb 2s ease-in-out infinite alternate;
}
@keyframes bb {
	0% {
		box-shadow: -2px -2px 10px #b712cd, -2px -2px 10px #d6238b;
	}
	25% {
		box-shadow: -1px -1px 10px #b712cd, -1px -1px 10px #d6238b;
	}
	50% {
		box-shadow: -2px -2px 10px #b712cd, -2px -2px 10px #d6238b;
	}
	75% {
		box-shadow: -1px -1px 10px #b712cd, -1px -1px 10px #d6238b;
	}

	100% {
		box-shadow: -1px -1px 10px #b712cd, -1px -1px 10px #d6238b;
	}
}



.sc-dXfzlN.HfPmC.v2 {
	height: 100%;
	display: flex;
	flex-direction: row;
	position: relative !important;
	position: absolute !important;
	top: 0px !important;
	left: 0px !important;
	z-index: 10000;
	transition: 250ms ease !important;
}

.bceuHc.teaminbox__container_v2 .chat-content .sidebar {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}
.gKnFPK.v2 .sidebar__container,
.info-wrap.jss458,
.gKnFPK.v2 .sidebar .MuiGrid-container,
.fuDkdO,
.gKnFPK .MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-3 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	padding: 2px 5px !important;
	margin: 0 auto !important;
}

.gKnFPK.v2 .sidebar__container {
	border-bottom: 1px solid var(--main-shadow) !important;
	padding: 1.5em 0px !important;
	height: auto !important;
}

/* tag list */
.dOzoPd .tag-list {
	display: flex !important;
	flex-direction: column-reverse !important;
	align-items: stretch !important;
}

.cuXPFB {
	display: inline-flex !important;
	-webkit-box-align: center !important;
	align-items: center !important;
	background: var(--main-shadow) !important;
	border-radius: 5px !important;
	padding: 0.5rem !important;
	margin: 5px !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-evenly !important;
}
.cuXPFB .chip__value {
	font-size: 1.2rem !important;
	font-weight: bold !important;
	color: rgb(44 44 44) !important;
	padding: 0 !important;
	overflow-x: unset;
	text-overflow: ellipsis!important;
	width: 70px!important;
	text-align: center!important;
}
/* end tag list */
/*note list  */
.iIMuhM .notes-header {
	display: flex!important;
	/* -webkit-box-align: center; */
	align-items: center!important;
	/* -webkit-box-pack: justify; */
	margin-bottom: 0.6rem!important;
	/* flex-direction: row; */
	/* flex-wrap: nowrap; */
	width: 100% !important;
	justify-content: space-around !important;
}
.bvEBBU.v2 .note {
	padding: 5px !important;
	background: rgb(255 244 147) !important;
}

.bvEBBU.v2 .note .note-header {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-evenly !important;
	border-bottom: 1px solid var(--b-text) !important;
	padding: 5px !important;
}
.iIMuhM .note-list {
	max-height: 400px !important;
	width: 100% !important;
}
.button-wrapper {
	display: flex !important;
	flex-direction: row !important;
	/* width: 30% !important; */
	align-items: center !important;
	justify-content: center !important;
	align-content: center !important;
	flex-wrap: nowrap !important;
}

.bvEBBU.v2 .note .note-header .info-wrapper {
	display: flex !important;
	/* flex: 1; */
	flex-direction: column !important;
	align-items: center !important;
}
.bvEBBU.v2 .note .note-item {
	margin-top: 5px !important;
}

.sc-cCVOAp.bvEBBU.v2 {
	width: 100% !important;
}
.note-item-value {
	padding: 10px !important
}


/* text input area Role  */
.fkhJTt .active-chat-input {
	padding: 5px;
	display: flex;
	width: 100%;
	margin: auto;
	background: rgb(255, 255, 255);
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	border-radius: 5px;
	transform: translateY(15px);
	justify-content: space-around;
}


.fkhJTt .chat-input-typing-status-bar {
	width: 330px;
	position: absolute;
	top: -15px;
	height: 15px;
	color: var(--b-text);
}

#box-chat {
	color: var(--b-text);
	padding: 6px !important;
	border-radius: 5px !important;
	width: 100% !important;
	height: 9vh !important;
	font-size: 1.1rem !important;
	font-family: cursive, monospace, system-ui, sans-serif;
	line-height: 1.8rem;
	flex: 1
}
textarea:focus {
	background: var(--b-bg) !important;
	color: var(--w-text) !important;
}
.dWZUS {
	margin: 0;
}
.fkhJTt .chat-input__icon-option,
.fkhJTt .emoji__icon-option {
	/* line-height: 0; */
	/* display: flex; */
	/* padding: 0px; */
	/* margin: auto 0px; */
	cursor: pointer;
}
.lbJaRs {
	/* padding-left: 1rem; */
	/* border-left: 1px solid rgba(202, 206, 219, 0.35); */
	/* display: flex; */
	/* -webkit-box-align: center; */
	/* -webkit-box-pack: justify; */
	/* gap: 1rem; */
	/* width: 20vw; */
	width: 2vw;
	height: 4vw;
	display: flex;
	padding: 10px;
	overflow: hidden !important;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	transition: 250ms ease-in-out;
	border-right: 1px solid var(--main-shadow) !important;
	border-left: 1px solid var(--main-shadow) !important;
	margin: 0 5px !important;
}
.lbJaRs:hover {
	width: 8vw;
}

.ekNCUO {
	flex-grow: 1;
	width: 70%;
}

.emoji__icon-option,
.chat-input__icon-option {
	transition: 250ms ease-in-out;
}

.emoji__icon-option:hover,
.chat-input__icon-option:hover {
	transform: scale(1.4) rotate(20deg)
}

/* role of assened alert */
.ui.dimmer {
	top: 0!important;
	left: 0!important;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 1em;
	background-color: var(--title-color);
	line-height: 1;
	transition: background-color .5s linear;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	user-select: none;
	will-change: opacity;
	z-index: 10000000000000000000000;
}

.ui.tiny.modal {
	width: 460px !important;
	height: 500px !important;
	margin: 0 auto !important;
	box-shadow: 0 0 20px 0px #e5e5e5;
	display: flex !important;
	flex-direction: column;
	align-content: center;
	align-items: stretch;
	justify-content: space-between;
}

.bbzJTQ {
	background: var(--b-bg);
	position: absolute;
	width: calc(100% + 2px);
	border: none;
	color: var(--b-text);
	border-image: initial;
	border-top: none;
	left: -1px;
	border-radius: 0px 0px 5px 5px;
	z-index: 100;
	height: 250px !important;
	max-height: 400px;
	overflow-y: unset;
}
.ui.modal > .content {
	display: block;
	width: 100%;
	font-size: 1em;
	line-height: 1.4;
	padding: 1.5rem;
	background: #fff;
	transform: translateY(-60px);
}
.gQdPBQ {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: 0.3rem 1rem;
	position: relative;
	min-height: 40px;
	font-family: Poppins, Montserrat;
}

.eSLgpp {
	cursor: pointer;
	padding: 0px 2rem;
	text-align: center !important;
	font-size: 16px;
	font-weight: bold
}
.iybKKK {
	position: relative;
	height: fit-content;
	margin: 0 !important;
	display: flex;
	/* -webkit-box-align: center; */
	align-items: center;
	-webkit-box-pack: justify;
	justify-content: space-between;
	background: var(--main-color);
	color: rgb(255, 255, 255);
	padding: 0.7rem 0px;
	cursor: pointer;
	width: 100%;
	border-radius: 5px;
	transform: translateY(20px)
}
.sc-gGBfsJ.iybKKK .btn-template {
	transition: 250ms linear;
	background: var(--main-color);
}

/* chat area left side */
.sidebar-list-padding.app-sidebar .chat-area .sc-jxGEyO.dkDGNf.v2 .jss17219.jss17180.jss17220.item-message.active {
	background: #fff !important;
	box-shadow: 0 0 5px #333;
}

.dkDGNf.v2 .item-message .MuiGrid-grid-lg-2 {
	display: none !important;
}
.sc-jxGEyO.dkDGNf.v2 {
	background: #fff;
	width: 100%;
}

.jss196.jss157.jss197.item-message {
	cursor: pointer;
	padding: .5em;
	padding-left: 2em;
	border: none !important;
	width: 100%;
}

.dkDGNf.v2 .item-message .MuiGrid-container {
	display: flex;
}








/* display None  */
.bceuHc.teaminbox__container_v2 .resizer-wrapper,
.avatar-wrapper,
.gKnFPK.v2 .sidebar .MuiGrid-container .profile-status,
.gKnFPK .MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-3 {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	cursor: none !important;
}
















/*******************MY iNject code********************************/
.tow {
	position: absolute;
	right: -100rem;
	top: 30px;
	z-index: 100000;
	display: flex;
	justify-content: space-around;
}
#toggle {
	position: relative;
	width: 30px;
	height: 30px;
	background: #37a6ff;
	cursor: pointer;
	/* margin: 5px; */
	border-radius: 3px;
	transition: padding 300ms, background 500ms, width 300ms, transform 300ms;
}

#toggle::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 3px;
	background: #fff;
	margin: 0px 5px;
	transform: translateY(13px);
	box-shadow: 0 -7px 0 #fff;
	transition: 0.5s ease-out;
}

#toggle::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 3px;
	background: #fff;
	margin: 0 0px 0 5px;
	transform: translateY(20px);
	transition: 0.5s;
}

#toggle.active {
	background: #f7226a;
}

#toggle.active::before {
	transform: translate(-0px, 13px) rotate(135deg);
	box-shadow: 0 0 0 #fff;
	width: 20px;
	height: 3px;
}

#toggle.active::after {
	transform: translate(-0px...