/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}




	/* 

	Project Name: Tigger search engine sample 
	 
	
	*/

	*,
	*:before,
	*:after {
  	-webkit-box-sizing: border-box;
    	 -moz-box-sizing: border-box;
          box-sizing: border-box;
	}


  body {font-family: Arial, Helvetica, sans-serif;}

  /* Full-width input fields */
  input[type=text], input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  }

  /* Set a style for all buttons */
  button {
  background-color: #04AA6D;
  background-color: aquablue;
  background-color: #04AA6D;
  color: white;
  padding: 2%;
  margin: 2%;
  border: none;
  cursor: pointer;
  width: 25%;
  }

  button:hover {
  opacity: 0.8;
  }

  /* Extra styles for the cancel button */
  .cancelbtn {
  background-color: #f44336;
  }

  /* Center the image and position the close button */
  .imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
  }

  img.avatar {
  width: 40%;
  border-radius: 50%;
  }

  .container {
  padding: 16px;
  }

  span.psw {
  float: right;
  padding-top: 16px;
  }

  /* The Modal (background) */
  .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
  }

  /* Modal Content/Box */
  .modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; 
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;

  /* width: 80%; Could be more or less, depending on screen size */
  }

  /* The Close Button (x) */
  .close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
  }

  .close:hover,
  .close:focus {
  color: red;
  cursor: pointer;
  }

  /* Add Zoom Animation */
  .animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
  }

  @-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
  }
  
  @keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
  }

  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
  }


  body {
     font-family:Arial, Sans-Serif;
  }
  .clearfix:before, .clearfix:after{
     content: "";
     display: table;
  }
  .clearfix:after{
     clear: both;
  }
  a{
     color:#0067ab;
     text-decoration:none;
  }
  a:hover{
     text-decoration:underline;
  }
  .form{
     width: 300px;
     margin: 0 auto;
   }
   input[type='text'], input[type='email'],
   input[type='password'] {
     width: 200px;
     border-radius: 2px;
     border: 1px solid #CCC;
     padding: 10px;
     color: #333;
     font-size: 14px;
     margin-top: 10px;
   }
   input[type='submit']{
     padding: 10px 25px 8px;
     color: #fff;
     background-color: #0067ab;
     text-shadow: rgba(0,0,0,0.24) 0 1px 0;
     font-size: 16px;
     box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0;
     border: 1px solid #0164a5;
     border-radius: 2px;
     margin-top: 10px;
     cursor:pointer;
   }
   input[type='submit']:hover {
     background-color: #024978;
   }



	body {
		
		/* the following is the code to have the image display as a full page */
		background-position: center;
		background-attachment: fixed;
		-webkit-background-size: cover; /* the next 3 lines are "browser prefixes", they are necessary to include for CSS3 techniques */
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		text-align: justified;
		}

	body {
  		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}


	div {
	  	background: beige;
		border-radius: .05%;
		margin: .05% auto;
		padding: .05% auto;
		}

	.container
               {
	  	background: beige;
      border: 3px solid black;
		border-radius: 0.05%;
		margin: 0.05% auto;
		padding: 0.05% auto;
		}


	header {
		background: beige;
	   margin: .05% auto;
  	   padding: .05%;
		text-align: center;
		border-radius: .05%;
		}


	section {
		background: beige;
		float: left;
		width: 25%;
		border-radius: .05%;
		margin: .05%;
		padding: .05%;
		width: 40%;
		}

	aside {
		background: beige;
		float: left;
		width: 25%;
		border-radius: 1%;
		margin: 1%;
		padding: 1%;
		width: 30%;
		}

	nav {
	   	margin: 2% auto;
  	   	padding: 0.5%;
		text-align: justify;
		border-radius: 1%;
		}


	.photo {
	   	color: black;
		background: lightblue;
		margin: 5px auto;
		padding: 5px 5px;
		text-align: center;
		border: 2px solid black;
		border-radius: 10px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);

		}

	p  {
  	   	padding: 1%;
		margin: 1%;
		font-weight: 800;
		border: 5px solid green
		border-radius: 5px;

		}


	img {
		width: 85%;
		margin: 5px auto;
		alignment: center;
		border: 5px solid black
		border-radius: 10px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);

		}

	video {
		width: 85%;
		margin: 5px auto;
		alignment: center;
		border: 5px solid black
		border-radius: 10px;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);

		}

	
	h1 {
		color: maroon;
		font-size: 95px;
		font-weight: bold;
		/*font-style: italic;*/
		margin: 0.05% auto;
		padding: 0.05%;
		text-align: center;

		}


	h2 {
		color: maroon;
		font-size: 45px;
		margin: 0.05% auto;
		padding: 0.05%;
		font-weight: bold;
		text-align: center;

		}

	h3 {
		color: maroon;
		font-size: 25px;
		margin: 0.05% auto;
		padding: 0.05% auto;
		font-weight: bold;
		text-align: center;

		}


	h4 {
		color: maroon;
		font-size: 15px;
		margin: 0.05% auto;
		padding: 0.05% auto;
		font-weight: bold;
		text-align: center;

		}


	form {
  	   text-align: center;
  	   line-height: 40px;
  	   height: 80%;
	   border: 1px solid #c6c7cc;
	   border: none;
 	   border-radius: 5px;
  	   font: 24px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  	   overflow: auto;
  	   width: 75% auto;
   	   margin: 3% auto;
   	   height: 75% auto;
   	   background: rgba(226, 245, 249, 98);
	   background: white;
   	   border-radius: 40px:

		}


	fieldset {
  	   border: 0;
  	   margin: 0;
  	   padding: 0;
		}

	input {
  	   border-radius: 5px;
  	   font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  	   margin: 0;
		}

		margin: 20px auto;
		padding: 5px 15px;



















.sidebar {
    width: 200px;
    border-right: 1px solid #ccc;
    padding: 10px;
    background-color: #f2f2f2;
}

.chat-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.message-display {
    flex-grow: 1;
    padding: 10px;
    overflow-y: scroll;
}

.message-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
}

.message-input input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.message-input button {
    margin-left: 10px;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.message {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 4px;
}

.sent {
    background-color: #e0e0e0;
    text-align: right;
}

.received {
    background-color: #d1e7dd;
    text-align: left;
}

.unread-notification {
    background-color: red;
    color: white;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 5px;
    font-size: 0.8em;
}