.fa-2x {
	font-size: 1.5em;
}

body {
	color: black !important;
}

.app {
	position: relative;
	overflow: hidden;
	top: 19px;
	width: 100% !important;
	height: 90%;
	margin: auto;
	padding: 0;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0
		rgba(0, 0, 0, .2);
	height: 90%
}

.app-one {
	background-color: #f7f7f7;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0
		rgba(0, 0, 0, .2);
}

.side {
	padding: 0;
	margin: 0;
	height: 100%;
}

.side-one {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	position: relative;
	display: block;
	top: 0;
	border-left: 1px solid rgba(0, 0, 0, .08);
}

.side-two {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	position: relative;
	top: -100%;
	left: -100%;
	-webkit-transition: left 0.3s ease;
	transition: left 0.3s ease;
}

.heading {
	padding: 5px 16px 10px 15px;
	margin: 0;
	height: 60px;
	width: 100%;
	background-color: #E0E0E0;
	z-index: 1000;
}

.heading-avatar {
	padding: 0;
	cursor: pointer;
}

.operator-status {
	width: 27px !important;
	height: 27px !important;
	border-radius: 50%
}

.operator-status-menu {
	width: 27px !important;
	height: 27px !important;
	border-radius: 50%
}

.operator-language {
	width: 27px !important;
	height: 27px !important;
}

.online {
	background: #76FF03;
}

.offline {
	background: #F44336;
}

.busy {
	background: #FFFF00;
}

.heading-avatar-distance {
	width: 4% !important;
}

.heading-operator-avatar-distance {
	width: 8% !important;
}

.heading-avatar-channel {
	padding: 0;
	cursor: pointer;
	width: 4% !important;
}

.heading-avatar-channel img {
	border-radius: 50%;
	height: 25px;
	width: 25px;
}

.heading-avatar-icon img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
}

.heading-name {
	padding: 0 !important;
	cursor: pointer;
}

.heading-name-meta {
	font-weight: 700;
	font-size: 100%;
	padding: 10px;
	padding-bottom: 0;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #000;
	display: block;
}

.heading-name-meta-agent {
	/* text-align: center !important; */
}

.heading-online {
	display: none;
	padding: 0 5px;
	font-size: 12px;
	color: #93918f;
}

.heading-compose {
	padding: 0;
}

.heading-compose i {
	text-align: center;
	padding: 5px;
	color: #93918f;
	cursor: pointer;
}

.heading-dot {
	padding: 0;
	margin-left: 10px;
}

.heading-dot i {
	text-align: right;
	padding: 5px;
	color: #93918f;
	cursor: pointer;
}

.searchBox {
	padding: 0 !important;
	margin: 0 !important;
	height: 60px;
	width: 100%;
}

.searchBox-inner {
	height: 100%;
	width: 100%;
	padding: 10px !important;
	background-color: #F5F5F5;
}

/*#searchBox-inner input {
			  box-shadow: none;
			}*/
.searchBox-inner input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

#searchText {
	border-radius: 21px;
}

#searchText:hover {
	border: 1px #616161 solid;
}

.sideBarAtt {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #F5F5F5;
	overflow-y: scroll;
	border: 1px solid #f7f7f7;
	/* height: calc(100% - 120px); */
	height: 60vh;
}

.sideBarAtt-body {
	position: relative;
	padding: 5px !important;
	border-top: 1px solid rgba(0, 0, 0, .08);
	height: fit-content;
	margin: 0 !important;
	cursor: pointer;
	margin: 0 !important;
}

.sideBarAtt-body:hover {
	background-color: #EEEEEE;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1), 0 1px 1px 0 rgba(0, 0, 0, .1);
}

.sideBarAtt-body.selected {
	background-color: #EEEEFF !important;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1), 0 1px 1px 0 rgba(0, 0, 0, .1) !important;
}

.sideBarAtt-avatar {
	text-align: center;
	padding: 0 !important;
	width: 10% !important;
}

.avatar-icon img {
	border-radius: 50%;
	height: 49px;
	width: 49px;
}

.avatar-channel {
	padding-left: 40px;
}

.avatar-channel img {
	border-radius: 50%;
	height: 25px;
	width: 25px;
}

.accpet-decline {
	float: right;
}

.accpet-decline img {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin-left: 3px;
	margin-right: 3px;
}

.btn-end-attendance {
	padding: 33px 0px !important;
	position: absolute;
	bottom: 0;
	font-size: 18px;
}

.sideBarAtt-main {
	padding: 0 !important;
}

.sideBarAtt-main .row {
	padding: 0 !important;
	margin: 0 !important;
}

.sideBarAtt-name {
	padding: 5px !important;
}

.name-meta {
	font-size: 100%;
	padding: 1% !important;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #000;
}

.sideBarAtt-time {
	padding: 10px !important;
}

.time-meta {
	text-align: right;
	font-size: 12px;
	padding: 1% !important;
	color: rgba(0, 0, 0, .4);
	vertical-align: baseline;
}

/*New Message*/
.newMessage {
	padding: 0 !important;
	margin: 0 !important;
	height: 100%;
	position: relative;
	left: -100%;
}

.newMessage-heading {
	padding: 10px 16px 10px 15px !important;
	margin: 0 !important;
	height: 100px;
	width: 100%;
	background-color: #00bfa5;
	z-index: 1001;
}

.newMessage-main {
	padding: 10px 16px 0 15px !important;
	margin: 0 !important;
	height: 60px;
	margin-top: 30px !important;
	width: 100%;
	z-index: 1001;
	color: #fff;
}

.newMessage-title {
	font-size: 17px;
	font-weight: 700;
	padding: 0px 0px !important;
}

.newMessage-back {
	text-align: center;
	vertical-align: baseline;
	padding: 4px 0px !important;
	display: block;
	cursor: pointer;
}

.newMessage-back i {
	margin: auto !important;
}

.composeBox {
	padding: 0 !important;
	margin: 0 !important;
	height: 60px;
	width: 100%;
}

.composeBox-inner {
	height: 100%;
	width: 100%;
	padding: 10px !important;
	background-color: #fbfbfb;
}

.composeBox-inner input:focus {
	outline: none;
	border: none;
	box-shadow: none;
}

.compose-sideBarAtt {
	padding: 0 !important;
	margin: 0 !important;
	background-color: #fff;
	overflow-y: auto;
	border: 1px solid #f7f7f7;
	height: 100%;
}

.line {
	display : block;
	overflow: hidden;
	margin : 5px 0;
}

/*Conversation*/
.conversation {
	padding: 0 !important;
	margin: 0 !important;
	height: 100%;
	/*width: 100%;*/
	border-left: 1px solid rgba(0, 0, 0, .08);
	/*overflow-y: auto;*/
	overflow-y: auto;
	background-color: #F5F5F5;
}

.message {
	padding: 5px 10px !important;
	margin: 0 !important;
	/* background: url("w.jpg") no-repeat fixed center; DESCOMENTAR SE FOR USADO UM DIA */
	background-size: cover;
	overflow-y: auto;
	/* border: 1px solid #f7f7f7; */
	/* height: calc(100% - 150px); */
}

.message-previous {
	margin: 0 !important;
	padding: 0 !important;
	height: auto;
	width: 100%;
}

.previous {
	font-size: 15px;
	text-align: center;
	padding: 10px !important;
	cursor: pointer;
}

.previous a {
	text-decoration: none;
	font-weight: 700;
}

.message-body {
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
	height: auto;
	overflow : auto;
}

.message-main-receiver {
	padding: 10px 20px;
	max-width: 60%;
}

.message-main-sender {
	padding: 3px 20px !important;
	margin-left: 40% !important;
	max-width: 60%;
}

.message-text {
	margin: 0 !important;
	padding: 5px !important;
	font-weight: 200;
	font-size: 14px;
	padding-bottom: 0 !important;
	word-wrap: break-word;
	max-width: 100%;
}

.message-time {
	margin: 0 !important;
	margin-left: 50px !important;
	font-size: 12px;
	text-align: right;
	color: #9a9a9a;
}

.receiver {
	width: auto !important;
	padding: 4px 10px 7px !important;
	border-radius: 10px 10px 10px 0;
	background: #eee;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	word-wrap: break-word;
	display: inline-block;
	max-width: 100%;
	box-shadow: 0px 0px 3px grey;
}

.sender {
	float: right;
	width: auto !important;
	background: #dcf8c6;
	border-radius: 10px 10px 0 10px;
	padding: 4px 10px 7px !important;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	display: inline-block;
	word-wrap: break-word;
	max-width: 100%;
	box-shadow: 0px 0px 3px grey;
}

/*Reply*/
.reply {
	height: 92px;
	width: 100%;
	background-color: #EEEEEE;
	padding: 5px 5px 5px 5px !important;
	margin: 0 !important;
	z-index: 1000;
}

.reply-emojis {
	padding: 5px !important;
	width: 5% !important;
	padding-top: 25px !important
}

.reply-emojis i {
	text-align: center;
	padding: 5px 5px 5px 5px !important;
	color: #93918f;
	cursor: pointer;
}

.reply-emojis i:hover {
	color: #616161;
}

.reply-recording {
	padding: 5px !important;
	width: 5% !important;
	padding-top: 25px !important
}

.reply-recording i {
	text-align: center;
	padding: 5px !important;
	color: #93918f;
	cursor: pointer;
}

.reply-recording i:hover {
	color: #616161;
}

.reply-attach {
	padding: 5px !important;
	width: 5% !important;
	padding-top: 25px !important
}

.reply-attach i {
	text-align: center;
	padding: 5px !important;
	color: #93918f;
	cursor: pointer;
	font-size: 20px;
}

.reply-attach i:hover {
	color: #616161;
}

.reply-send {
	padding: 5px !important;
	padding-top: 2px !important
}
.btn-send {
	border-radius: 50%;
	border: 1px solid aqua;
	color : #FFF;
	height: 50px;
	width: 50px;
	background: aqua;
}

.reply-send i {
	text-align: center;
	padding: 5px !important;
	color: #93918f;
	cursor: pointer;
}

.reply-send i:hover {
	color: #616161;
}

.reply-main {
	padding: 1px 5px !important;
	margin-left: 1%;
}

.reply-main textarea {
	width: 100% !important;
	resize: none;
	overflow: auto;
	padding: 8px !important;
	outline: none;
	border: 1px #BDBDBD solid;
	text-indent: 12px;
	box-shadow: none;
	height: auto;
	font-size: 16px;
	/* border-radius: 21px 0px 0px 21px; */
	height : 55px;
}

.reply-main textarea:focus {
	text-indent: 5px;
	border: 1px #BDBDBD solid;
}

.reply-main textarea:hover {
	border-color: #616161;
}

}
.crmInfo {
	border-left: 1px solid rgba(0, 0, 0, .08);
}

.crm-buttons {
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 1px 3px 0
		rgba(0, 0, 0, .2);
	width: 50% !important;
}

.btn-group-crm {
	width: 100% !important;
}

.list-group-crm {
	padding: 7px 15px;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content a {
	color: black;
	padding: 12px 12px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	color: blue;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	border-radius: 4px !important;
	opacity: 0.95;
}

.dropdown-pause:hover .dropdown-content-pause {
	display: block;
}

.dropdown-content-pause a {
	color: black;
	padding: 12px 12px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content-pause a:hover {
	color: blue;
}

.dropdown-content-pause {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	border-radius: 4px !important;
	opacity: 0.95;
	padding-left : 15px;
}

.dropdown:hover .dropdown-content-lang {
	display: block;
}

.dropdown-content-lang a {
	color: black;
	padding: 12px 12px;
	text-decoration: none;
	display: block;
	text-align: center;
}

.dropdown-content-lang a:hover {
	color: blue;
}

.dropdown-content-lang {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 120px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	border-radius: 15px !important;
	opacity: 0.95;
}

@media (max-width: 1250px) {

	.conversation {
		width: 75%;
	}

}
@media (max-width: 1100px) {
	.side {
		display: none;
	}
	.conversation {
		width: 100%;
	}
}

.list-group-crm .limit-info {
	max-width: 60% !important;
}

.limit-info {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	display: block;
	margin-left: 3%;
	cursor : pointer;
}

.loadMoreMessages {
	background: #D3EAF2;
	padding: 10px;
	border-radius: 19px;
}

.loadMoreMessages:hover {
	background: white;
	cursor: pointer;
}

.rotate-load {
	-webkit-transform: rotate(1080deg);
	-webkit-transition-duration: 2s;
}

.defaulMessages:hover {
	cursor: pointer;
	background: #EEEEEE;
}

.newAttendsNotify {
	width: 30px;
	height: 30px;
	margin: 1.5%;
	float: right;
	color: white;
	background: #EF5350;
	border-radius: 50%;
	text-align: center;
	padding: .5%;
	font-weight: bold;
	font-size: larger;
	animation: pulse 2s infinite;
}
.newAttendsNotify:hover {
	cursor: pointer;
}

#attendance .nav-tabs > li.active > a {
	border: 1px solid #F5F5F5 !important;
	background-color: #F5F5F5 !important;
}

.input-to-supervisor {
	border-radius: 20px;
	height: 3% !important;
}

.from-supervisor {
	color: white !important;
	background-image: linear-gradient(to bottom right, #0F2027, #2C5364);
}

.time-from-supervisor {
	color: white !important;
}

.slimScrollBar {
	height: 70% !important;
}

.digit, .colon{
  position:relative;
  display:inline-block;
  width:10px;
  height:110px;
  margin:5px;
}


.colon{
  background: linear-gradient(-90deg, #00F2FF 10px, #00F2FF 10px),
              linear-gradient(-90deg, #00F2FF 10px, #00F2FF 10px);


  background-position: 0 40px, 0 65px;
  background-repeat:no-repeat;
  background-size:10px 10px, 10px 10px;

}

.digit{
  width:60px;

  background-image: linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px);   /* Bottomleft */

  background-position: 0 0, 0 50px, 0 100px, 0 10px, 0 60px;
  background-repeat:no-repeat;
  background-size:60px 10px, 60px 10px, 60px 10px, 60px 40px, 60px 40px;
}

.zero{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}

.one{
  background-image: linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}

.two{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, transparent 50px);   /* Bottomleft */
}

.three{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}

.foure{
  background-image: linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}

.five{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, transparent 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}


.six{
  background-image: linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, transparent 50px),   /* Topleft */
                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}


.seven{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}


.eight{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}

.nine{
  background-image: linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /*  Top  */
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Middle*/
                    linear-gradient(90deg, transparent 10px, #00F2FF 10px, #00F2FF 50px, transparent 50px),   /* Bottom*/

                    linear-gradient(90deg, #00F2FF 10px, transparent 10px, transparent 50px, #00F2FF 50px),   /* Topleft */
                    linear-gradient(90deg, transparent 10px, transparent 10px, transparent 50px, #00F2FF 50px);   /* Bottomleft */
}

.attends-animation {
	animation: animateElement linear .7s;
  	animation-iteration-count: 1;
}

@keyframes animateElement{
  0% {
    opacity:0;
    transform:  translate(0px,-50px);
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px);
  }
}
#myInput-occ {
	border-box: box-sizing;
	background-image: url('searchicon.png');
	background-position: 14px 12px;
	background-repeat: no-repeat;
	font-size: 16px;
	padding: 10px 15px 10px 20px;
	/* 	border: none; */
	width: 80%;
	height: 38px
}

.myInput-icon-occ {
	background: white;
	float: right;
	width: 20%;
	padding: 3% 0% 5% 7%;
	height: 38px;
}
.myInput-icon-occ-click {
	border-radius: 0px 8px 0px 0px;
	border: 1px solid #ddd;
	border-bottom: none !important;
}

.myInput-icon-occ-not-click {
	border-radius: 0px 8px 8px 0px;
	border: 1px solid #ddd;
}
.btn-search-occ {
	background: white;
	height: 41px;
}

.btn-search-click {
	border: 1px solid #ddd;
	border-radius: 8px 0px 0px 0px !important;
	border-bottom: none !important;
	border-right: none;
}

.btn-search-not-click {
	border: 1px solid #ddd;
	border-radius: 8px 0px 0px 8px !important;
	border-right: none;
}



.dropdown-occ {
	position: relative;
	display: inline-block;
	width: 100%;
}

.dropdown-content-occ {
	display: none;
	position: absolute;
	background-color: #f6f6f6;
	min-width: 230px;
	overflow: auto;
	border: 1px solid #ddd;
	z-index: 100;
	width: 100%;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 0px 0px 8px 8px;
	border-top: 0px;
	border-radius: 0px 0px 8px 8px;
}

.dropdown-content-occ a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	border-bottom: 1px #00A65A solid;
	width: 80%;
	height: 38px;
	background: white;
}

.dropdown-occ a:hover {
	background-color: #ddd;
}

.show {
	display: block;
}


.drop-right-occ {
	float: right;
	width: 20%;
	height: 38px;
	padding: 4% 0% 5% 5%;
	border-bottom: 1px #00A65A solid;
	border-left: 1px solid #ddd;
	background: white;
}

.search-occ-icon {
	float: right;
	width: 20%;
	height: 100%;
	background: white;
	padding: 5% 0% 5% 7%;
}


.suggestion {
	max-width: 24%;
	white-space: nowrap;
  	overflow: hidden;
    text-overflow: ellipsis;
	padding: 10px;
	border-radius : 5px;
	background : #d1ebff;
	display: inline-block;
	border : 1px solid #a8a8f1;
	cursor: pointer;
}

.unsubscribed .progress-bar, .unsubscribed .mgs-number {
	background-color: #666 !important;
}
.unsubscribed .name-meta {
	color : #666 !important;
}



.blink-copy a:active {
    color: inherit;
    -webkit-animation: blink 800ms step-end 0.5;
            animation: blink 800ms step-end 0.5;
}
@-webkit-keyframes blink { 50% { color: green !important; }}
@keyframes blink { 50% { color: green !important; }}


.supervisor-attendances .info-box {
	background-color: #eee !important;
}

.input-search {
	padding : 10px;
	border-radius : 5px;
	border : 1px solid blue;
	background : transparent;
	color : #FFF;
	width : 100%;
}

.chat-lock.lockscreen {
	background : rgba(20,20,20,.9);
}
.chat-lock {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
}


@font-face {
    font-family: 'Square Sans Serif 7';
    src: url('../fonts/SquareSansSerif7.woff2') format('woff2'),
        url('../fonts/SquareSansSerif7.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#time {
	font-family: 'Square Sans Serif 7';
	color : aqua;
	font-size : 8em;
}


.reply-main::first-letter {
    text-transform: uppercase;
}