body
        {
            background-color: #ededd6;
        }
        #page, .single-app
        {
            box-shadow: 0 0 4px 0px;
        }
        
	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: #f1f1f1; 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #aaa; 
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #555; 
	}

#main-menu > ul > li > a .icon {
    color: #2d7ad6;
    background-color: #fff;
    border: solid 1px #ccc;
}
        .sidenav
        {
            width: 90%;
            max-width: 500px;
        }
        .top-left-nav .profile-caption
        {
            background: linear-gradient(#477ad8f7,rgb(41, 81, 125));
            padding: 0 20px;
        }
        .profile-cover img
        {
            max-height: 60px;
        }
        .top-left-nav .pic-thumb
        {
            float: left;
            margin: 10px auto 5px;
        }
        .messages
        {
            background: url(  '../images/bg1.jpg' );
            background-attachment: fixed;
        }
        #main-menu ul ul
        {
            height: 360px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        #main-menu ul ul::-webkit-scrollbar
        {
           /% display: none;%/
        }
        #main-menu ul ul.expanded
        {
            height: calc(100% - 334px);
        }
        #main-menu, #main-menu ul, #main-menu ul li, #main-menu ul li a
        {
            cursor: pointer;
        }
        .footer
        {
            position: fixed;
            max-width: 1200px;
            margin: 0 auto;
            bottom: 0;
            width: 100%;
            padding: 0px;
        }
        .message-input .wrap input
        {
            font-family: "proxima-nova" , "Source Sans Pro" , sans-serif;
            float: left;
            border: none;
            width: calc(100% - 125px);
            padding: 8px 32px;
            height: 2rem;
            font-size: 1em;
            color: #495A6C;
        }
        .message-input .wrap .attachment
        {
            border-left:solid 1px #aaa;
            position: absolute;
            right: 60px;
            z-index: 4;
            padding-left:16px;
            margin-top: 10px;
            font-size: 1.5em;
            color: #0084BD;
            cursor: pointer;
        }
        .message-input .wrap .camera
        {
            border-left:solid 1px #aaa;
            position: absolute;
            right: 110px;
            padding-left:16px;
            z-index: 4;
            margin-top: 10px;
            font-size: 1.5em;
            color: #0084BD;
            cursor: pointer;
        }
        .message-input .wrap button
        {
            float: right;
            border: none;
            width: 50px;
            padding: 16px 0;
            cursor: pointer;
            background: #0080ff;
            color: #f5f5f5;
        }
        .top-navbar .top-navbar-left a
        {
            padding-top: 20px;
        }
        .top-navbar .front-navigation
        {
            display: flex;
            flex-direction: row;
            padding: 0px;
        }
        #main-menu > ul > li.open > a
        {
            background-color: #fff;
            box-shadow: 11px 11px 13px 0px #00000052;
        }
        #main-menu ul ul
        {
            background-color: #f3f3f3;
        }
        .contact .wrap
        {
            padding: 5px;
            border-bottom: solid 1px #e6e6e6;
            color: #556677;
            line-height: 4px;
            display: flex;
        }
        .contact .wrap img
        {
            width: 50px;
            height: 50px;
            margin: 2px 15px;
            border-radius: 50%;
        }
        .contact-profile
        {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: flex;
        }
        #contact-profile-name
        {
            margin: 0px;
            padding: 0px;
            font-size: 16px;
        }
        .contact-profile img
        {
            width: 40px;
            border-radius: 50%;
            float: left;
            margin: 9px 4px 0 9px;
        }
        .content .contact-profile p
        {
            float: left;
        }
        .contact-info .preview
        {
            font-size: 90%;
        }
        #contact-profile-img
        {
            width: 50px;
            height: 50px;
            padding: 5px;
        }
        .messages
        {
            height: auto;
            min-height: calc(100vh - 110px);
            max-height: calc(100vh - 110px);
            background: url(    '../images/bg1.jpg?ver=1' );
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .messages::-webkit-scrollbar
        {
            width: 8px;
            background: transparent;
        }
        .messages::-webkit-scrollbar-thumb
        {
            background-color: rgba(0, 0, 0, 0.3);
        }
        .messages ul li
        {
            display: inline-block;
            clear: both;
            float: left;
            margin: 15px 15px 5px 15px;
            width: calc(100% - 25px);
            font-size: 0.9em;
        }
        .messages ul li:nth-last-child(1)
        {
            margin-bottom: 20px;
        }
        .messages ul li.replies img
        {
            margin: 6px 8px 0 0;
        }
        .messages ul li.replies .wrapper
        {
        }
        .messages ul li.replies p
        {
            background: #0084BD;
            color: #336699;
            background-color: #eee;
            border: solid 1px #336699;
            margin-bottom:0px;
        }
        .messages ul li.sent img
        {
            float: right;
            margin: 6px 0 0 8px;
        }
        .messages ul li.sent .wrapper
        {
            float: right;
        }
        .messages ul li.sent p
        {
            background: #ffffff;
            border: solid 1px #cbcbcb;
            margin-bottom:0px;
        }
        .message-name
        {
            font-size: 80%;
            text-transform: lowercase;
            color: #5D9CEC;
            font-style: italic;
            padding: 0px 5px 2px 20px;
        }
        .message-date
        {
            font-size: 80%;
            color: #446688;
            padding: 2px 5px 0px 20px;
        }
        .messages ul li img
        {
            width: 32px;
            border-radius: 50%;
            float: left;
        }
        .messages ul li p
        {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            max-width: 355px;
            line-height: 130%;
        }
        .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 */
        }
        /* Modal Content */.modal-content
        {
            margin: auto;
            padding: 20px;
            width: 90%;
            max-width: 800px;
            border-radius: 10px;
        }
        /* The Close Button */.AttachmentClose
        {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            padding: 4px 8px;
            font-weight: bold;
        }
        .AttachmentClose:hover, .AttachmentClose:focus
        {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        .dz-remove
        {
            padding-top: 10px;
        }
        .dropzone
        {
            min-height: 200px;
            border: 2px solid rgba(0, 0, 0, 0.3);
            padding: 10px 10px;
            border-radius: 10px;
        }
        .modal .modal-content
        {
            padding: 0px;
        }
        .btn
        {
            margin: 2px;
        }
        .btn-info
        {
            background-color: #0080ff;
            color: White;
            border: solid 1px #0080ff;
        }
        .right
        {
            float: right;
        }
        span.badge
        {
            float: right;
            vertical-align: middle;
            min-width:1rem;            
            background: red;
            color: white;
            padding: 4px 7px;
            border-radius: 20px;
            line-height: 12px;
            z-index:9999;
            position:relative;
            top:-40px;
        }
        .badgeTab
        {
            float: right;            
            vertical-align: middle;
            margin-top: -34px;
            margin-right: 50px;
            background: red;
            color: white;
            padding: 3px 7px;
            border-radius: 12px;
            line-height: 14px;
            z-index: 999;
            font-size: 80%;
        }