/** 
	Conversation Viewer - WordPress Plugin
	Version: 1.0
	Author: Ryder Damen
	http://ryderdamen.com/convesation-viewer
	https://github.com/ryderdamen/WP-Conversation-Viewer
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300');


/****************************************************************************
							Default Styling
****************************************************************************/


/* Regular-Size Screen CSS */

/* Main Container */
.CV-messages-container {
    max-width: 600px;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 25px;
}

/* Individual Message Container */
.msg-container {
    width: 100%;
    display: inline-block;
}

/* Incoming Messages */
.CV-message {
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    float: left;
    text-align: left;
    min-height: 2em;
    max-width: 60%;

} 

/* Message Profile Photo */
.CV-message-profile {
	width: 50px;
	height: 50px;
	background: green;
	float: left;
}

/* Message Author */
.CV-message-author {
    
}

/* Outgoing Messages */
.CV-outgoing {
    float: right;
}

/* Profile Photos */
.CV-incomingMessagePhoto {
	
}

.CV-incomingMessagePhoto-hidden {
	display: none;
}



/****************************************************************************
					Platform Specific Styling
****************************************************************************/


/***************************************
			Facebook Styles
****************************************/

.CV-mainContainer-facebook {
}

.CV-messageContainer-facebook {	
	margin-top: 1em;
}

.CV-incomingAuthor-facebook {
	width: 100%;
    text-align: left;
    font-size: 0.7em;
}

.CV-outgoingAuthor-facebook {
	display: none;
}

.CV-incomingMessage-facebook {
	font-family: 'Roboto', sans-serif;    
    font-weight: 300;
    background-color: #f8f8f8;
    color: #222;
    border-bottom-right-radius: 1.3em;
    border-top-right-radius: 1.3em;
    border-bottom-left-radius: 1.3em;
    border-top-left-radius: 1.3em;
	
}

.CV-outgoingMessage-facebook {
	font-family: 'Roboto', sans-serif;    
    font-weight: 300;
    background-color: #0084ff;
    color: #ffffff;
    border-bottom-right-radius: 1.3em;
    border-top-right-radius: 1.3em;
    border-bottom-left-radius: 1.3em;
    border-top-left-radius: 1.3em;
    margin-top: 2em;
}

.CV-command-facebook {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	width: 100%;
    text-align: center;
    font-size: 0.7em;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* Message Profile Photo */
.CV-incomingMessagePhoto-facebook {
	width: 40px;
	height: 40px;
	background: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	float: left;
	margin-right: 1em;
	margin-top: 1em;
}



/***************************************
			Android Styles
****************************************/

.CV-mainContainer-android {
}

.CV-messageContainer-android {
}

.CV-incomingAuthor-android {
	width: 100%;
    text-align: left;
    font-size: 0.7em;
    margin-top: 1em;
}

.CV-outgoingAuthor-android {
	display: none;
}

.CV-incomingMessage-android {
	font-family: 'Roboto', sans-serif; 
    font-weight: 300;   
    background-color: #9C27B0;
    color: #ffffff;
    border-bottom-right-radius: 1.3em;
    border-top-right-radius: 1.3em;
    border-bottom-left-radius: 1.3em;
    border-top-left-radius: 1.3em;
}

.CV-outgoingMessage-android {
	font-family: 'Roboto', sans-serif;
    font-weight: 300;    
    background-color: #f8f8f8;
    color: #222222;
    border-bottom-right-radius: 1.3em;
    border-top-right-radius: 1.3em;
    border-bottom-left-radius: 1.3em;
    border-top-left-radius: 1.3em;
    margin-top: 2em;
}

.CV-command-android {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	width: 100%;
    text-align: center;
    font-size: 0.7em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.CV-incomingMessagePhoto-android {
	width: 45px;
	height: 45px;
	background: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	float: left;
	margin-right: 1em;
	margin-top: 1em;
}



/***************************************
			ios Styles
****************************************/

.CV-mainContainer-ios {
}

.CV-messageContainer-ios {
}

.CV-incomingAuthor-ios {
	width: 100%;
    text-align: left;
    font-size: 0.7em;
    margin-top: 1em;
}

.CV-outgoingAuthor-ios {
	display: none;
}

.CV-incomingMessage-ios {
	font-family: 'Roboto', sans-serif;    
    font-weight: 300;
    background-color: #dfdfdf;
    color: #222;
    border-bottom-right-radius: 1.3em;
    border-top-right-radius: 1.3em;
    border-bottom-left-radius: 1.3em;
    border-top-left-radius: 1.3em;
}

.CV-outgoingMessage-ios {
	font-family: 'Roboto', sans-serif;    
    font-weight: 300;
    background-color: #5BC236;
    color: #ffffff;
    border-bottom-right-radius: 1.3em;
    border-top-right-radius: 1.3em;
    border-bottom-left-radius: 1.3em;
    border-top-left-radius: 1.3em;
    margin-top: 2em;
}

.CV-command-ios {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	width: 100%;
    text-align: center;
    font-size: 0.7em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.CV-incomingMessagePhoto-ios {
	width: 45px;
	height: 45px;
	background: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	float: left;
	margin-right: 1em;
	margin-top: 1em;
}



/***************************************
			WhatsApp Styles
****************************************/


.CV-mainContainer-whatsapp {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.CV-messageContainer-whatsapp {
}

.CV-incomingAuthor-whatsapp {
	width: 100%;
    text-align: left;
    font-size: 0.7em;
    margin-top: 1em;
}

.CV-outgoingAuthor-whatsapp {
	display: none;
}

.CV-incomingMessage-whatsapp {
	font-family: 'Roboto', sans-serif; 
    font-weight: 300;   
    background-color: #f8f8f8;
    color: #222222;
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-left-radius: 0.3em;
}

.CV-outgoingMessage-whatsapp {
	font-family: 'Roboto', sans-serif;
    font-weight: 300;    
    background-color: #DCF8C6;
    color: #222222;
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-left-radius: 0.3em;
    margin-top: 2em;
}

.CV-command-whatsapp {
	background-color: #f7ef7e;
	padding: 1em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
    text-align: center;
    font-size: 0.7em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.CV-incomingMessagePhoto-whatsapp {
	width: 45px;
	height: 45px;
	background: #f8f8f8;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	float: left;
	margin-right: 1em;
	margin-top: 1em;
}



/***************************************
			Snapchat Styles
****************************************/

.CV-mainContainer-snapchat {
	margin-top: 1em;
}

.CV-messageContainer-snapchat {
}

.CV-incomingAuthor-snapchat {
	width: 100%;
    text-align: left;
    font-size: 0.7em;	
}

.CV-outgoingAuthor-snapchat {
	width: 100%;
    text-align: left;
    font-size: 0.7em;	
    color: #cc0000;
}

.CV-incomingMessage-snapchat {
	font-family: 'Roboto', sans-serif; 
    font-weight: 300;   
    background-color: transparent;
    color: #222222;
    border-left-style: solid;
	border-left-color: #cc0000;
	border-left-width: 2px;
}

.CV-outgoingMessage-snapchat {
	float: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;    
    background-color: transparent;
    color: #222222;
    border-left-style: solid;
	border-left-color: #cc0000;
	border-left-width: 2px;
}

.CV-command-snapchat {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	width: 100%;
    text-align: center;
    font-size: 0.7em;
    margin-top: 2em;
}

.CV-incomingMessagePhoto-snapchat {
	display: none;
}




/****************************************************************************
						Responsive Styling
****************************************************************************/

   
@media only screen and (max-width: 840px) {
	   
   	.CV-message {
   		max-width: 80%;
	} 
    
}