404

D7net
:/ var / www / html / chatweb02 / assets / style-chat / css /
Filename : chat.css
back
	@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

			$green: #86BB71;
			$blue: #94C2ED;
			$orange: #E38968;
			$gray: #92959E;
			body {
			/* background: #C5DDEB; */
			font: 14px/20px "Lato", Arial, sans-serif;
			padding: 40px 0;
			color: white;
			}
			.bd-placeholder-img {
				font-size: 1.125rem;
				text-anchor: middle;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			@media (max-width: 2560px)  {
					.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(46vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width:720px)  {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(52vmax  - (15rem  + .25rem) );
			 }
			}

			@media (min-width:918px) and (min-height: 840px) {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(87vmax    - (15rem  + .25rem) );
			 }
			}

			@media (min-width:1024px) and (min-height: 840px) {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(97vmax    - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1080px) and (orientation: landscape) {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(51vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1080px) {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(97vmax  - (15rem  + .25rem) );
			 }
			}

			@media tv and (min-width: 1024px) {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(46vmax    - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1024px) and (orientation: landscape)  {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(49vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1024px) {
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(42vmax - (15rem  + .25rem) );
			 }
			}



			@media (min-width: 720px)  and (min-height:1024px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(90vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1024px)  and (min-height:720px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(66vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 850px)  and (min-height:1024px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(96vmax  - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1024px)  and (min-height:850px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(79vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1360px)  and (min-height:824px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(40vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1880px)  and (min-height:791px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(38vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1920px)  and (min-height:1080px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(52vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 1920px)  and (min-height:1600px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(80vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 2560px)  and (min-height:1080px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(38vmax - (15rem  + .25rem) );
			 }
			}

			@media (min-width: 2560px)  and (min-height:1600px){
				.chat-history ul{
				color: #6A6C75;
				/* border: 1px solid #E3EFFC; */
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(42vmax - (15rem  + .25rem) );
			 }
			}
			/*@media (min-width: 1600px) and (min-height:924px){
				.chat-history ul{
				color: #6A6C75;

				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(46vmax - (15rem  + .25rem) );
			 }
			}*/


			.user {
				float: left;
				object-fit: cover;
				width: 55px;
				height: 55px;
				background-color: #fff;
			}
			.about {
				float: left;
				margin-top: 8px;
				padding-left: 10px;
  			}
			.about .status {
				color: #92959E;
			}
			.about .status .online {
				color: #86BB71!important;
			}
			.about .status .grupo {
				color: #94C2ED!important;
			}
			.about .status .offline {
				color: #E38968!important;
			}
			.user-menu{
				font-size: 24px;
				position: absolute;
				top : 20px;
				right: 25px

			}
			#sidebarMenu {
				background-color: #6A6C75;
				color:  #fff;
			}
			.item {
				padding: .5rem 1rem;
			}
			.item input {
				background-color: #92959E;
			}
			.head-chat-list{
				padding: 0px 0px 30px 0px;
			}
			.input-pesquisa input {
				background-color: #92959E;

			}
			.ip-pes{
				background-color: #92959E;
				border: 0px;
			}
			.active {
				background-color: #CCCCCC;
			}
			#people-list{
				margin-bottom: 7rem;
			}
			#head-chat{
				padding: .25rem;
				color: #6A6C75;
				font-size: 14px;
				border-top: 1px solid #E3EFFC;
				border-bottom: 1px solid #E3EFFC;
			}
			#menu-chat-bars{
				font-size: 24px;
				position: absolute;
				top:  20px;
				right: 25px
			}
			/*.chat-history{
				color: #6A6C75;
				border: 1px solid #E3EFFC;
				padding: 7px 40px 10px;
    			overflow-y: scroll;
    			height: calc(45vmax - (10rem + .25rem) );
			}*/
    			 .message-data {
					  margin-bottom: 7px;
					  clear: left;
				    }
					.message-data-name{
						font-weight: bold;
					}
					.message-data-time {
						color: lighten(#92959E, 8%);
						padding-left: 6px;
						font-size: 12px
					}

				    .message {
				      color: white;
				      padding: 14px 16px;
				      line-height: 26px;
				      font-size: 12px;
				      border-radius: 7px;
				      margin-bottom: 30px;
				      width: 90%;
				      position: relative;
					}
				      &:after {
				        bottom: 100%;
				        left: 7%;
				        border: solid transparent;
				        content: " ";
				        height: 0;
				        width: 0;
				        position: absolute;
				        pointer-events: none;
				        border-bottom-color: #86BB71;
				        border-width: 10px;
				        margin-left: -10px;
				      }



			.my-message {
      background: #86BB71;
    }

    .other-message {
      background: #94C2ED;
	}
      &:after {
        border-bottom-color: #94C2ED;
        left: 93%;
      }
	  .chat-message{
		background: #C5DDEB;
		height: 12.40rem;
		padding-top: 1em;
	  }
	  .chat-message textarea{
	  	height: 40px;
	  }
	 .h-name {

	 }
	 .h-about	.h-status {
				color: #92959E;
	}
	.h-about .h-status .online {
		color: #86BB71!important;
	}
	.h-about .h-status .offline {
		color: #E38968!important;
	}
	.h-about {
		position: absolute;
		top: 20px;
		left: 90px;
		}
	  .dropdown-toggle::after {
			display: none !important;
		}

		.clearfix {
			margin-left: 100px;
		}

		.tabela  {
			width: 100%;
			border: 1px solid #C0C0C0;
			margin-bottom: 10px;

		}

		.tabela thead, .tabela tbody,.tabela tr,.tabela td,.tabela th { display: block; }

		.tabela tr:after {
			content: ' ';
			display: block;
			visibility: hidden;
			clear: both;
		}

	.tabela thead th {
		height: 30px;
		background-color: #5C7A99;
		color:#fff
		/*text-align: left;*/
	}

	.tabela  tbody {
		height: 320px;
		overflow-y: auto;
	}

	.tabela thead {
		/* fallback */
	}


	.tabela tbody td,.tabela thead th {
		width: 33.3% !important;
		float: left;
		padding: 10px;
		height: 70px;
		border-bottom:1px solid #C0C0C0;
		vertical-align: middle;
		font-size: 12px;
		font-weight: bold;

	}

	.btn-contatos-detalhes{
		position: absolute;
		right: 25%;

	}

	.btn-contatos-detalhes .btn-group{
		top:-33px;
		font-size: 12px;
	}

	.btn-contatos-detalhes .btn-group a{
		font-size: 12px;
		font-weight: bold;
	}

	/*----------/*/
	.tabela2  {
			width: 100%;
			border: 0px solid #C0C0C0;

		}
		.tabela2 thead, .tabela2 tbody,.tabela2 tr,.tabela2 td,.tabela2 th { display: block; }

		.tabela2 tr:after {
		content: ' ';
		display: block;
		visibility: hidden;
		clear: both;
	}

	.tabela2 thead th {
		height: 30px;
		background-color: #5C7A99;
		color:#fff
		/*text-align: left;*/
	}

	.tabela2  tbody {
		height: 400px;
		overflow-y: auto;
	}

	.tabela2 thead {
		/* fallback */
	}


	.tabela2 tbody td,.tabela2 thead th {
		width: 16% !important;
		float: left;
		padding: 10px;
		height: 120px;
		border-bottom:1px solid #C0C0C0;
		vertical-align: middle;
		font-size: 12px;
		font-weight: bold;
	}

		.h-user {
			object-fit: cover;
			width: 55px;
			height: 55px;
			background-color: #fff;
		}

		.img-upload {
			object-fit: cover;
			width: 50px;
			height: 50px;
			margin: 2px;
		}

		.nt{
			width: 150px;

		}

			  /* ------------------------------- INICIO TABELA 3 ----------------------- */
		.tabela3  {
			width: 100%;
			border: 1px solid #C0C0C0;
			margin-bottom: 10px;
			border-radius: 50%;
		}

		.tabela3 thead th {
			height: 30px;
			background-color: #5C7A99;
			color:#fff
			/*text-align: left;*/
		}

		.tabela3 thead {
			/* fallback */
		}
		.tabela3 tbody td,.tabela3 thead th {
			padding: 10px;
			height: 120px;
			border-bottom:1px solid #C0C0C0;
			vertical-align: middle;
			font-size: 12px;
			font-weight: bold;
		}

	   /* ------------------------------- FIM TABELA 3 ----------------------- */

		.media-mensasgens{
		   background-color: rgba(196,196,196,0.13);
		   margin-bottom: 10px;
		   padding: 20px ;
		}

		.media-mensasgens h5 small {
		   color:#c0c0c0;
		   font-size: 12px;
		}

		.media-mensasgens-selection{
			background-color: rgba(163,184,204,0.5);
			margin-bottom: 10px;
			padding: 20px ;
		}

		.media-mensasgens-selection h5 small {
			color:#20374F;
			font-size: 12px;
		}

		.more-button {
			margin-bottom: 30px;
			margin-top: 30px;
			width: 200px;
		}

		.admin{
			width: 200px !important;
		}
		.img-preview{
			/*object-fit: cover;*/
			width: 65px;
			height: 65px;
		}
		.img-preview-all{
			object-fit: cover;
			width: 100%;
			height: 100%;
		}