html, body {
    color: #636b6f;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    min-height: 100vh;
    margin: 0;
    border:1px solid #ddd;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* background: url('images/y.jpg') fixed; */
}
header{
    width: 300px;
    margin: 5px auto;
}
#mainNav{
    background:  #24bc24;
}
/*avatar , username and the online indicator*/
.avatar{
	width:100px;
	position: relative;
    margin: 20px auto;
}
.avatar img{
	position: relative;
    margin-left:5px;
    border-radius: 100%;
}
.avatar .text{
	position:absolute;
    top: 120px;
	left:0px;
	margin:5px auto;
	font-family: verdana,helvetica;
	font-size: 1em;
	font-weight: bold;
	line-height: 15px;
	clear: left;
}
.avatar .text a{
    padding: 5px;
	color: #ffffff;
	text-decoration: none;
}
.avatar .text a:hover{
	 color: #ffffff;
	 text-decoration: none;
	/* background-color:#030a17 ; */
 }
.avatar #on-indicator{
	position: absolute;
    top: 25px;
	left:0px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: green;
}
.online{
	position: absolute;
	font-size: 0.65em;
	left:15px;
	top: 25px;
}
/* .content{
    background: url('images/y.jpg');
} */

.content .user{
    position: relative;
    height: 300px;
    width:300px;
    border:1px dotted #ddd;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.08);
    transition: all 1s;
}
.content .user:hover{
    border-radius: 0px;
    width:400px;
}
.content .user img{
    margin:5px 45px;
    width: 200px;
    height: 200px;
}
.content .user h3{
    position: absolute;
    bottom: 4px;
    left: 25%;
    font-size: 1.6em;
    color:#008ae6;
    cursor: pointer;
}
/* side bar */
.dashboard{
	background-color:/*#222d32*/ #001a33;
	color:#ffffff;
    min-height: 40vh;
	height:auto;
	/* margin-top: -20px; */
	border-top: 1px solid #ffffff;
}
/*icon that will display dashboard on small devices .... not visible by default*/
#navicon{
	display:none ;
}
.dashboard ul{
	padding:0px;
}
.dashboard ul li{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
    margin: 0;
	/*height: 60px;*/
	/*background-color: #030a17 ;
	border-bottom: 1px solid #282828;*/

}
#close{display: none;}
.dashboard a{
	color:#ffffff;
	text-decoration: none;
	display: block;
	font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
	padding: 20px;

}
.dashboard a:hover{
	text-decoration: none;
}
.dashboard ul li:hover{
	background-color: #01000a;
}
.dashboard-icons{
    color: #b3d9ff;
    margin-right: 10px;
}
footer{
    position: relative;
}


.form{
    border: 1px dotted #ddd;
    border-radius: 10px;
}
#login-container{
    border:1px solid #ddd;
    border-radius:10px;
    height: 380px;
    
}
#login-container form{
    /*  */
    background:  rgba(153, 204, 255,0.15);
    height:380px;
    margin-right:-50px;
    width: 427px;
}
#login-container form .form-group{
    margin-top:30px;
}
#login-container form button, button{
    border-radius: 25px;
    margin-bottom: 8px;
    margin-top: 10px;
}
.rounded-btn{
    border-radius: 25px;
    padding: 6px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    background: #001a33;
    color: #fff;
    border: 1px solid transparent;
}
.rounded-btn:hover{
    color: #fff;
    cursor: pointer;
}
#application-btn{
    color: #001a33;
    font-weight: bold;
    border: 2px solid #001a33;
    border-radius: 30px;
    background: #fff;
    height: 35px;
    min-width: 170px;
    transition: all 0.5s ease-in;
    text-align: center;
}
#application-btn:hover{
    text-decoration: none;
    background: #001a33;
    background: radial-gradient(#001a33 , #00284d);
    color:#fff;
    border: none;
    min-width: 180px;
}
/* #application-btn:hover::after{
    content: '\2709';
} */
#login-image{
    /* border-right: 1px solid #ddd; */
    height:380px;
    margin-left: -30px;
    margin-top:80px;
}
#login-img img{
    width: 100px;
}

#organization-form label{
    margin-right: 120px;
}

/* organization guidelines */
.guidelines{
    /* font-size: 1.23em; */
    line-height: 1.8em;
    
}
/* style for tables */
.table caption{
    color: black;
    font-weight: bold;
    font-size: 1.5em;
}
/* .table th{
    font-weight: bold;
    color: black;
    font-size: 1.2em;
}
.table{
	width: 100%;
	max-width: 100%;
	background-color: #fff;
}
.table>thead>tr,
.table>tbody>tr,
.table>tfoot>tr{
   -webkit-transition:all 0.3s ease;
   -moz-transition:all 0.3s ease;
   -o-transition:all 0.3s ease;
   transition:all 0.3s ease;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
   padding: 5px;
   text-align: left;
   border-top:none;
   -webkit-transition:all 0.3s;
   -moz-transition:all 0.3s;
   -o-transition:all 0.3s;
   transition:all 0.3s;
}
.table>thead>tr>th{
	font-weight: 400;
	color:#757575;
	vertical-align:bottom;
	border-bottom:1px solid rgba(0,0,0,0.12);
}
.table > caption{
	text-align:center;
}
.table > caption + thead > tr:first-child>th,
.table > colgroup + thead > tr:first-child>th,
.table > thead:first-child  > tr:first-child>th,
.table > caption + thead > tr:first-child>td,
.table > colgroup + thead > tr:first-child>td,
.table > thead:first-child > tr:first-child>td{
    border-top:0; 
}
.table>tbody + tbody{
	border-top:1px solid rgba(0,0,0,0.12);
}
.table .table{
	background-color: #fff; 
}
.table .no-border{
	border:0;
}
.table-condensed > thead >tr > th,
.table-condensed > tbody >tr > th,
.table-condensed > tfoot >tr > th,
.table-condensed > thead >tr > td,
.table-condensed > tbody >tr > td,
.table-condensed > tfoot >tr > td{
	padding:0.8rem;
}
.table-bordered{
	border:0;
}
.table-bordered > thead > tr >th,
.table-bordered > tbody > tr >th,
.table-bordered > tfoot > tr >th,
.table-bordered > thead > tr >td,
.table-bordered > tbody > tr >td,
.table-bordered > tfoot > tr >td{
    border:0;
    border-bottom: 1px solid #e0e0e0;
}
.table-bordered > thead > tr >th,
.table-bordered > thead > tr >td{
	border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th{
    background-color: #f5f5f5;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th{
	background-color: rgba(0,0,0,0.12);
}
.table-bordered > tbody > tr >td #table-i{
	padding-right:15px;
	cursor:pointer;
	font-size: 1.5em;
} */

/* sending messages */
#reply-form{
    position: relative;
}
#reply .form-row input{
    position: fixed;
    bottom: 5px;
    border: 3px solid #008ae6;
}


/* messages */
.msg-link{
    text-decoration: none;
    color: #333;
    border-bottom: 1px dotted;
    cursor: pointer;
}
.msg-link .sender{
    font-style: italic;
    font-size: 0.88em;
    font-weight: bold;
}
.msg-link:hover{
    text-decoration: none;
    background: #ddd;
    color: #01000a;
}
.msg-link .time{
    font-style: italic;
    font-size: 0.55em;
}

.msg-indicator{
    position: absolute;
    top: 12px;
    left: 42px;
}
.msg-indicator-nav{
    position: absolute;
    top: 4px;
    left: 30px;
}

.new-msg{
    position: fixed;
    top: 200px;
    right:30px;
}
.writers-side, .senders-side{
    position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
	min-width: 150px;
	min-height: 50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 26px;
    padding: 2px 8px;
}
.senders-side{
	background:rgba(191, 191, 191,0.2);
	margin-right: 30px;
}
.writers-side {
    background: rgba(153, 204, 255, 0.4);
    color: #000066;
}
.writers-side:hover{
	background: rgba(153, 204, 255, 0.7);
}
.senders-side:hover{
	background:rgba(191, 191, 191,0.5);
}
#input-text{
    position: fixed;
    bottom: 10px;
    width: 100%;
    margin:5px auto;
}
#input-text input{
    width: 70%;
    height: 60px;
}
#send-button{
    cursor: pointer;
    color: #444;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.writers-side .time,.senders-side .time{
    position: absolute;
    bottom: 0px;
    right: 5px;
    font-style: italic;
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 0.8em;
}
.personal-messages .senders-side i,.personal-messages .writers-side i{
	position: absolute;
	top: 50%;
	color:#ff3333;
	display: none;
}
.writers-side i {
	left: -30px;
}
.senders-side i{
	right: -20px;
}