/* CSS Document */

@font-face {
font-family: myriad;
src: url(https://www.organizacaoalimentar.com.br/css/fontes/myriad.otf);
}

@font-face {
font-family: kaushan;
src: url(https://www.organizacaoalimentar.com.br/css/fontes/kaushan.ttf);
}

@font-face {
font-family: poppins;
src: url(https://www.organizacaoalimentar.com.br/css/fontes/Poppins-Regular.ttf);
}

/* FONTS */

.black12bold {font-family: verdana; font-size: 12pt; color:black; font-weight: bold; }
.black12 {font-family: verdana; font-size: 12pt; color:black; }
.white12bold {font-family: verdana; font-size: 12pt; color:white; font-weight: bold; }
.white12 {font-family: verdana; font-size: 12pt; color:white; }

/* APP GENERAL */

* {
 margin: 0px;
 padding: 0px;
 font-family: 'Poppins';
}

#chatBody {
    position:relative;
	font-family: myriad;
	font-size: 18px;
    height:100%;
    width:100%;
	font-family: 'Poppins';    
    background-color:#FFF;
}

#relativeBox {
    position:relative;
	width:100%;
	height:auto;
	background-color:#FFF;
	z-index:10;
}

/* relative PART */

#userFrame {
    position:relative;
	width:100%;
	height:auto;
	z-index:10;
	vertical-align:text-top;
}

.userPicture {
    position:relative;
	top:0px;
	width:48px;
	height:48px;
	display:inline-block;
	vertical-align:top;
}

.userNoPicture {
    position:relative;
	width:48px;
	height:48px;
	display:inline-block;
	vertical-align:top;
	line-height:48px;
	
	background-color:#322923;
	color:#EEDAB2;
	text-align:center;
	font-size:25px;
}

.userName {
    position:relative;
	top:0px;
	width:calc(100% - 60px);
	max-height:48px;
	line-height:25px;
	display:inline-block;
	font-size:18px;
}

/* PROFILE */

#editProfileBox {
    position:relative;
	width:100%;
	height:auto;
	display:none;
}

#editProfilePicture {
    position:relative;
	width:100%;
	height:auto;
	min-height:150px;
}

#editProfileData {
    position:relative;
	width:100%;
	height:auto;
	min-height:100px;
}

.editProfileDetails {
    position:relative;
	width:100%;
	height:auto;
	line-height:40px;
	font-size:18px;
	color:#322923;
	font-weight:300;	
}

#editProfileSave {
    position:relative;
	width:150px;
	height:40px;
	line-height:40px;
	display:block;
	text-align:center;
	text-decoration:none;
	background-color:#322923;
	color:#EEDAB2;
	border-radius:10px;
}

/* MSG */

#chatNewMsg {
    position:relative;
	width:100%;
	vertical-align:middle;
	line-height:40px;
	font-size:18px;
	z-index:10;
}

.chatNewComment {
    position:relative;
	width:100%;
	vertical-align:middle;
	line-height:40px;
	font-size:18px;
	z-index:10;
	display:none;
}

#chatData {
    position:relative;
	width:100%;
	vertical-align:middle;
	line-height:40px;
	font-size:18px;
	z-index:10;
}


/* CHAT */

#msgList {
    position:relative;
	width:100%;
	height:auto;
	vertical-align:top;
}

#msgBox {
    position:relative;
	width:100%;
	height:auto;
	vertical-align:top;
}

#msgBlank {
    position:relative;
	width:30px;
	height:30px;
	display:inline-block;
}

.msgDetails {
    position:relative;
	width:calc(100% - 60px);
	max-height:48px;
	line-height:25px;
	display:inline-block;
	font-size:18px;
}

.msgDetailsSub {
    position:relative;
	width:calc(100% - 120px);
	max-height:48px;
	line-height:25px;
	display:inline-block;
	font-size:18px;
}

/* DIV MORE MSG */

#moreMsgBox {
    position:relative;
	width:100%;
	height:auto;
	display:block;
}

#moreMsgButton {
    position:relative;
	width:300px;
	height:40px;
	line-height:40px;
	display:block;
	text-align:center;
	text-decoration:none;
	background-color:#322923;
	color:#EEDAB2;
	border-radius:10px;
}

@media(max-width:768px){
	
#msgBlank {
    position:relative;
	width:20px;
	height:20px;
	display:inline-block;
	background-color:#FFF;
}
	
.userPicture {
    position:relative;
	width:35px;
	height:35px;
	display:inline-block;
	vertical-align:top;
}

.userNoPicture {
    position:relative;
	width:35px;
	height:35px;
	display:inline-block;
	vertical-align:top;
	line-height:35px;
	
	background-color:#322923;
	color:#EEDAB2;
	text-align:center;
	font-size:20px;
}

.userName {
    position:relative;
	top:0px;
	width:calc(100% - 60px);
	max-height:48px;
	line-height:20px;
	display:inline-block;
	font-size:14px;
	font-weight:bold;
}

.msgDetails {
    position:relative;
	top:0px;
	width:calc(100% - 60px);
	max-height:48px;
	line-height:25px;
	display:inline-block;
	font-size:14px;
	font-weight:bold;
}

.msgDetailsSub {
    position:relative;
	top:0px;
	width:calc(100% - 120px);
	max-height:48px;
	line-height:25px;
	display:inline-block;
	font-size:14px;
	font-weight:bold;
}

#chatData {
    position:relative;
	width:100%;
	line-height:30px;
	font-size:16px;
	z-index:10;
}

.editProfileDetails {
    position:relative;
	width:100%;
	height:auto;
	line-height:40px;
	font-size:16px;
	color:#322923;
	font-weight:bold;	
}
	
}