/*------------------------------------------ Main Pages ---------------------------------*/

.body{
	font: 14px sans-serif;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	margin: 0;
}

.maincontent {
  max-width: 1400px;
  text-align: center;
  margin: 0 auto;
  margin-top: 80px;
}

.wrapper{
	width: 350px; 
	padding: 20px; 
	margin: 50px auto;
}

.fixed-header{
		background: #373B44; 
		background: -webkit-linear-gradient(#373B44, #4286f4);
		background: linear-gradient(#373B44, #4286f4);
        width: 100%;
        position: fixed;  
		overflow:hidden;		
        padding: 10px 0;
        color: #fff;
		top: 0;
		z-index: 1;
}

.fixed-footer{
        width: 100%;
        background: white;
        padding: 10px 0;
        color: white;
		bottom: 0;
}

.container{
        width: 80%;
        margin: 0 auto;
}

nav a{
		float: right;
        color: #fff;
        text-decoration: none;
        padding: 7px 10px;
		font: 14px sans-serif;
        display: inline-block;
}

a:hover {
	color: #fff;
	background-color: grey;
}
	
nav p{
		float: left;
        color: #fff;
		font-size: 18px;
        margin-top: 5px;
}

* {
  box-sizing: border-box;
}

.reloud {
		padding: 10px;
		font: 14px sans-serif;
		text-align: center;
		font-weight: bold;
		color: rgba(0,0,0,0.5);
}

/*------------------------------------------ Profile Page ---------------------------------*/

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fff;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
  margin: 0 10px;
  padding: 10px;
}

.grid-item p.thick {
		font: 14px sans-serif;
		text-align: left;
		font-weight: bold;
		color: rgba(0,0,0,0.5);
}

.grid-item p.normal{
		font: 12px sans-serif;
		text-align: left;
		color: rgba(0,0,0,1);
}

.grid-profile {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fff;
  padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
}

.grid-profile-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0px;
}

.grid-profile-item p.thick {
		font: 14px sans-serif;
		text-align: left;
		font-weight: bold;
		color: rgba(0,0,0,0.5);
}

.grid-profile-item p.normal{
		font: 12px sans-serif;
		text-align: left;
		color: rgba(0,0,0,1);
}

.button1 {
  background-color: blue;
  width:20px;
  height:20px;
  border: none;
  color: white;
  padding: 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 10px 10px;
  cursor: pointer;
}

.button1 {border-radius: 50%;}

.button2 {
  background-color: red;
  width:20px;
  height:20px;
  border: none;
  color: white;
  padding: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 10px 10px;
  cursor: pointer;
}

.button2 {border-radius: 50%;}

.onlineProfiles{
        width: 80%;
        margin: 0 auto;
}

.onlineProfiles ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.onlineProfiles li {
	position:relative;
	float: left;
	margin-left: 2px;
	margin-top: 20px;
}

.badgeprofile {
 position:absolute;
 top:-15px;
 left: 70%;
 padding:3px 10px;
 border-radius:50%;
 background-color:#ff851b;
 color:#fff;
font-size:10px;
}

.badgeprofile:empty {
  display: none;
}

.onlineProfiles li a {
  display: block;
  padding: 8px;
  /*background-color: #636393; */
  background-color: #4286f4;
  margin-left: 2px;
  font: 12px sans-serif;
  border-radius: 5%;
  color: white;
}

.onlineProfiles li+li a {
  display: block;
  padding: 8px;
 /* background-color: #546394; */
 background-color: #4286f4;
  margin-left: 2px;
  font: 12px sans-serif;
  border-radius: 5%;
  color: white;
}

.onlineProfiles li+li+li a {
  display: block;
  padding: 8px;
  /*background-color: #466394; */
  background-color: #4286f4;
  margin-left: 2px;
  font: 12px sans-serif;
  border-radius: 5%;
  color: white;
}

.onlineProfiles li+li+li+li a {
  display: block;
  padding: 8px;
  /*background-color: #376294; */
  background-color: #4286f4;
  margin-left: 2px;
  font: 12px sans-serif;
  border-radius: 5%;
  color: white;
}

.onlineProfiles li+li+li+li+li a {
  display: block;
  padding: 8px;
  /*background-color: #286294; */
  background-color: #4286f4;
  margin-left: 2px;
  font: 12px sans-serif;
  border-radius: 5%;
  color: white;
}

.ice {
	display: block;
	font: 12px sans-serif;
	color: white;
}

.ice-1 {
	background-color: #FF6766; 
	border-radius: 5%;
	margin-left: 2px;
	}
.ice-2 { 
	background-color: #66A182;
	border-radius: 5%;
	margin-left: 2px;
	}

/*------------------------------------------ Dialog Page ---------------------------------*/

.profileinfo{	  
    background-color: rgba(0,0,0,0.1);
    min-height:50px;  
}

.profilepage{
    width: 95%;
    margin: 20px auto;
	text-align: left;
}

.profilepage img{
	
	border-radius: 8px;
	width: 100%;
	max-width: 300px;
	height: auto;
	padding: 5px;
}

.profilepage h2{
	
		font: 2vw sans-serif;
		text-align: center;
		font-weight: bold;
		color: rgba(0,0,0,0.5);
}

.profilepagelinks {
  float: left;
  width: 20%;
  padding: 20px;
  background-color: rgba(0,0,0,0.1);
}

.profilepagelinks ul {
  list-style: none;
  padding: 0;
}
.profilepagelinks li {
  padding: 5px 10px;
  background-color: #EEEEEE;
  border: 1px solid #DDDDDD;
}

.profilepagerechts {
  float: right;
  width: 20%;
  padding: 20px;
  background-color: rgba(0,0,0,0.1);
}

.profilepageinhalt {
  min-height: 650px;  
  height:auto;
  padding: 20px, 10px;
  border: 1px solid #c4c4c4;position: relative;
}

.bo {
		font: 14px sans-serif;
		text-align: left;
		font-weight: bold;
		color: rgba(0,0,0,0.5);
		margin-top: 8px;
}

.norm {
		margin-left: 100px;
		margin-top: -19px;
		font: 14px sans-serif;
		color: rgba(0,0,0,0.5);
}

.norm2 {

		font: 14px sans-serif;
		color: rgba(0,0,0,0.5);
}

.profilepage input[type=text], select {
  width: 100%;
  padding: 5px 10px;
  margin: 1px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.profilepage textarea {
  width: 100%;
  height: 100px;
  padding: 12px 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  resize: none;
  margin-bottom: 10px;
}

.button {
  width:30px;
  height:30px;
  border: none;
  color: white;
  padding: 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 10px 10px;
  cursor: pointer;
  border-radius: 50%;
}

.button3 {
  /*background-color: #636393; */
  background-color: #4286f4;
}

.button4 {
  /*background-color: #546394; */
  background-color: #4286f4;
}

.button5 {
  /*background-color: #466394; */
  background-color: #4286f4;
}

.button6{
  /*background-color: #376294; */
  background-color: #4286f4;
}

.button7{
  background-color: #bafcb4;
}

.button8{
  background-color: #FF4136;
}

#extendet_info {
  
  display:none;
}

#main_info {
  
  display:none;
}

#favorites {
  
  display:none;
}

#extendet_info_user {
  
  display:none;
}

.tooltippp {
  position: relative;
  display: inline-block;
}

.tooltippp .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #00000078;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
 
  position: absolute;
  z-index: 1;
}

.tooltippp:hover .tooltiptext {
  visibility: visible;
}

.img-unused {

}

.img-used {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

.list-group-item {
background-color: grey;
border-color: grey;
color: #fff;
text-align: center;
}

.setattachmentid {
background-color: grey;
border-color: grey;
color: #fff;
text-align: center;
}

.setattachmentid:hover {
  background-color: #3D9970;
}

.setattachmentid .active {
    background: #3D9970;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background: #3D9970;
}

.imgunusedtitle {
  padding: 20px;
  background-color: rgba(0,0,0,0.1);
  color: #3D9970;
}
/*------------------------------------------ Dialog Page / Message Send / Receive---------------------------------*/

.msglist
{ 
overflow-y:scroll; 
margin:5px 0 5px;
height: 500px;
}

.msgitem {
  float: left;
  width: 60%;
  padding-left: 10px;
}

.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 1px 0 10px 0
}

 .msgitem p {
  background: #bbe1f4 none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 14px;
  margin: 0; color:#000;
  padding: 5px 10px 5px 12px;
  width:100%;
}

/*------------------------------------------Start Dialog Page / Message Receive ---------------------------------*/

.msgitemuser {
  float: right;
  width: 60%;
  padding-right: 10px;
}

.time_dateuser {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 1px 0 10px 0
}

 .msgitemuser p {
  background: #bafcb4 none repeat scroll 0 0;
  border-radius: 3px;
  font-size: 14px;
  margin: 0; color:#000;
  padding: 5px 10px 5px 12px;
  width:100%;
}

/*------------------------------------------End Dialog Page / Message Receive ---------------------------------*/

.input_msg_write input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #4c4c4c;
  font-size: 15px;
  min-height: 70px;
  width: 100%;
}

.type_msg {
	border: 0px solid #c4c4c4;
	position: relative;
	bottom: 10px;
	width: 95%;
}
.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  position: absolute;
  right: 5px;
  top: 25px;
}

 /*------------------------------------------End Dialog Page / Message Send / Receive---------------------------------*/