/* CSS Codes by: Control # */

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-size:100%;
margin:0pt;

outline-style:none;
outline-width:0pt;
padding:0pt;
}

/* body */
body {
margin:0;
padding:0;
font: 14px Open Sans, sans-serif;
color:#333333;
background:url('../images/bg-image.png');

}

/* font face */

/*basics*/
hr{
	color: #d8d8d8;
}
img, a { border:none; outline:none !important}
a { text-decoration:none; color:#777777; cursor: pointer;}
ul li{list-style: none}
a:hover { text-decoration:underline; color:#FD932D;}
.comp{ color:#43240f; font-weight:bold; }
.comingsoon{ color:red; font-weight:bold; font-style:italic; }
.clearfix{
	clear:both;
	overflow:hidden;
}
.floatleft-img{ float:left; padding:0 10px 0 0;}
.floatright-img{ float:right; padding:0 0 0 10px;}
.f-left{ float:left;}
.f-right{ float:right;}

/*layers*/
#wrapper{
	width:;
	height:500px;
	margin:0 auto 0 auto;
}

#mobile-wrapper{
	max-width:700px;
	height:auto;
	margin:0 auto;
}

/*header for desktop*/
header{background: #474f60;height: 37px;position: relative;}
#header ul{font-size: 14px;text-align: right; padding: 9px 0;}
#header ul li{display: inline-block;}
#header ul li a{color: #fff; font-size: 14px;padding: 0 10px}
#header ul li:after{content: "|"; left: 3px; position: relative;color: #fff}
#header ul li:last-child:after{content: ""; }

/*header for mobile*/
#header-mobile{
    border-radius: 5px;
}
#header-mobile ul{
	font-size: 14px;
	text-align: center;
	padding: 5px;

}

#header-mobile ul li{
	display: block;
	line-height: 30px;
	text-align: center;
	width: auto;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 5px;
	margin: 5px;
}

#header-mobile ul li a{
	color: #fff;
	font-size: 14px;
	padding: 0 10px
}

.nav-toggle-button{
	background: #474f60;
	padding: 12px 9px;
	border-radius: 25px;
	color: #fff;
	font: 14px 'Open Sans';
}

.nav-toggle-button #nav-menu {
    line-height: 0px;
    width: 25px;
    padding-top: 8px;
    top: 4px;
    position: relative;
}

.page-nav {
    background: #474f60;
    display: none;
    height: auto;
    margin-bottom: 10px;
    border-radius: 5px;
}

/*banner*/
#banner{
	width: 100%;
	height: auto;
	min-height: 81px;
	padding: 15px 0;
	background: linear-gradient(to bottom, #ffff 0%, #f4f4f4 100%);
	margin-bottom: 5px;
}

#banner-bg{background: none}

#banner .mobile-left-content {
    text-align: center;
    margin-bottom: 24px;
}

#banner .mobile-right-content {
	/*width: 29%;*/
	text-align: center;
}

.drop-settings {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: right;
    right: 15px;
	border-radius: 9px;
}

.dropdown-content.dropmenu {
	display:block;

}
.dropdown-content a {
    color: #0d5898;
    text-align: right;
	line-height: 33px;
	margin-right: 10px;
    text-decoration: none;
    display: block;
}

.dropdown-content a.password-wrapper img{
	margin-left: 8px;
	position: relative;
	top: 2px;
}

.dropdown-content a.logout-wrapper img{
	margin-left: 8px;
	position: relative;
	top: 2px;
}

.right-content p a:hover {
	color: #55b3e8;
	text-decoration: none;
}

.dropdown-content a:hover {background-color: #f1f1f1}

#banner .right-content a.drop-settings{
	display: block;
	width: 96%;
	text-align: right;
}

#nav{
	width: 100%;
	height: 57.9px;
	background: #f9f9f9;
}
#main{
	width:;
	height: auto;
	padding: 0 10px;
}
#footer{ width:; height:;}

/* inside banner */
.container{/*max-width:1583px;*/max-width:1240px;height:auto; margin:0 auto; width: 100%}

.mobile-container{max-width:650px;height:auto; margin:0 auto; width: 100%}

/*inside navigation bar */
#nav ul { padding:0; margin:0; list-style:none;}
#nav ul li{ display:inline; line-height:50px;}
#nav ul li a{
	padding: 20px 53px;
	font: 13px 'Roboto Light', sans-serif;
	color: #717171;;
	text-decoration:none;
	float:left;
}
#nav ul li.navspacer{
	width: 1px;
	height: 47px;
	background: url(../images/nav-spacer.png) center top;
	display: block;
	float: left;
	margin: 6px 2px 0 2px;
}

#nav ul li#last a#trigger-menu::after{
	content: url(../images/dropdown-icon.png);
	margin-left: 5px;
	position: relative;
	bottom: 1px;
}

#nav ul .drop-menu{
	width: 150px;
	display: inline-block;
	position: relative;
	top: 55px;
	right: 161px;

}
#nav ul .drop-menu a{
	display: block;
	padding: 17px 15px;
	cursor: pointer;
}
#nav ul .drop-menu a.read{
	background: #efefef;
}

#nav ul .drop-menu a.new{
	background: #e4e4e4;
}

#nav ul .drop-menu a:hover{
	text-decoration: none;
	color: #55b3e8;
}

#nav ul li.current a{
	color: #55b3e8;
	font-weight: bold;
}

#nav ul li a:hover{
	color: #55b3e8;
	font-weight: bold;
}

/*end navigation bar*/


/* Flash */
#flash{width:; height:;}

/* inside main */
#col-a{width:}

#col-b{width:;}
#content{line-height:20px;}
#content h1{font-size:20px; font-family:'helveticabold';}
#content p{padding:5px 0 5px 0}

/* inside footer */
#footer ul{list-style:none; margin:0; padding:0;}
#footer ul li{display:inline;}
#footer ul li.spacer{padding:0 5px}
#footer ul li a{color:#fff; text-decoration:none}
#footer ul li a:hover{color:#DDDDDD}
#copyright a{color:#fff}
#copyright a:hover{color:#DDDDDD}
#copyright span{padding:0 5px}


/*loginpage css*/
#main .box{
	width: 376px;
	height: auto;
	background: #ffffff;
	margin: 0 auto;
	margin-top: 90px;
}

#loginpage{
	width: 376px;
	height: 354px;
	background: #ffffff;
	margin: 0 auto;
}


#loginpage .title {
	display: inline-block;
	vertical-align: top;
}

#loginpage .title h1{
	font: 28.77px 'Robot', sans-serif;
	color: #4baadf;
}

#loginpage .title h2{
	font: 18.7px 'Robot', sans-serif;
	color: #474f60;
}

#loginpage .head-title {
	text-align: center;
	margin-top: 50px;
}

#loginpage form{
	text-align: center;
	margin-top: 28px;
}

#loginpage form input[type=text], #loginpage form input[type=password]{
	width: 74%;
    padding: 12px 25px;
    margin: 8px 0;
    border: 1px solid whitesmoke;
    color: #828282;
}

#loginpage form input#username{
	background-image: url('../images/user-icon.png');
    background-repeat: no-repeat;
    background-position: 2%;
}

#loginpage form input#password{
	background-image: url('../images/pass-icon.png');
    background-repeat: no-repeat;
    background-position: 2%;
}

#loginpage form input[type=submit]{
	width: 74%;
    padding: 12px 20px;
    margin: 8px 0;
    border:none;
    background: #4baadf;
    color: #ffffff;
    font:13px 'Open Sans', sans-serif;
    cursor: pointer;
}

input[type=submit]:hover{
	 background: #9f9f9f !important;
}

#loginpage form input[type=text]:focus, #loginpage form input[type=password]:focus, input[type=text]:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}
/*end loginpage css*/

/*banner css*/
#banner .comp-logo a{
	text-decoration: none;
}
#banner .logo {
	margin: 12px 0 0 6px;
}
#banner .title{
	display: inline-block;
	vertical-align: top;
	margin-top: 12px;
}

#banner .title h1{
	font: 28.77px 'Robot', sans-serif;
	color: #4baadf;
}

#banner .title h2{
	font: 18.7px 'Robot', sans-serif;
	color: #474f60;
}

#banner form input[type=text]{
	width: 85%;
	padding: 12px 15px;
	/*margin: 8px 0;*/
	border: 1px solid #c5c5c5;
	color: #606468;
    border-radius: 25px;
    font-size: 13px;
	font-family: Open Sans, sans-serif;
}

#banner .right-content p a img.settings-img{
	position: relative;
	top: 4px;
}

#banner .right-content p a span {
	margin-right: 5px;
}

#banner #searchform{
	vertical-align: top;
	/*width: 100%;*/
	display: block;
	width: 230px;
	position: relative;
}

#banner #searchform button#search{
	background: #55b3e8;
	padding: 8px 16px;
	border: none;
	border-radius: 25px;
	position: absolute;
	right: 6px;
	/*top: 3px;*/
	margin: 4px auto;
	cursor: pointer;
}

#banner ul.right-list{
	padding-top: 20px;
}
#banner ul.right-list li{
	display: inline-block;
}
#banner ul.right-list li#inbox-list{
	display: none;
}

#banner ul.right-list li a#trash{
	background: #55b3e8;
	padding: 12px 25px;
	border-radius: 25px;
	color: #fff;
	font: 14px 'Open Sans';
}
#banner ul.right-list li a#inbox{
	background: #55b3e8;
	padding: 12px 25px;
	border-radius: 25px;
	color: #fff;
	font: 14px 'Open Sans';
}

#banner ul.right-list li a:hover{
	text-decoration: none;
	color: #55b3e8;
}
#banner ul.right-list li a#trash img{
	margin-right: 7px;
}


/*end banner css*/

/*sidebar css*/
#main .sidebar{
	width: 289px;
	border-right: 2px solid #B1A9A9;
	height: 264px;
}

#main .sidebar ul li{
	display: block;
	height: 44px;
	line-height: 45px;
	min-width: 100px;
	max-width: 290px;
	width: 289px;
	text-align: center;
	cursor: pointer;
}

#main .sidebar ul li span{
	color: #898989;
	font: 14px 'Roboto Light', sans-serif;
	/*padding: 13px 117px;*/
	cursor: pointer;
}

#main .sidebar ul li.current{
	background: #55b3e8;
}
#main .sidebar ul li.current span{
	color: #ffffff;
}

#main .sidebar ul li:hover{
	text-decoration: none;
	color: #ffffff;
	background: #55b3e8;
}

#main .sidebar ul{
	display: inline-block;
	vertical-align: top;
}

/*end sidebar css*/

/*table css*/
#mytable {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#mytable tr th span{
	margin-left: 20px;
}

#mytable tr td img.attachment {
	/*margin-left: 10px;*/
	margin-right: 5px;
}

#mytable tbody tr.current {
	/*background: #fdf8ba;*/
	background: rgb(253,248,156, 0.7);
}
#mytable tbody tr.checked {
	background: #BABABA;
}

#main .headers ul li a:hover {
	text-decoration: none;
	color: #55b3e8;
}

#main .headers ul li.headercheckbox {
	width: 14px;
	margin-left: 13px;
}

td, th {
    /*border: 1px solid #dddddd;*/
    text-align: left;
    padding: 8px 12px;
    width: 400px;
    cursor: pointer;
    position: relative;
}

td.table-date:nth-child(2) {
    text-align: right;
    padding: 8px;
}

tr{
    background-color: #f7fbfd;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

tr:first-child{
    border-top: 0;
}

tr:last-child{
    border-bottom: 0;
}
#main .email-table {
	display: inline-block;
	vertical-align: top;
	width: 43%;
	height: 836px;
	overflow: hidden;
	border: 1px solid #d8d8d8;
	margin-bottom: 5px;
     /*width: 504px;*/
}

#main .email-table {
	overflow-y: scroll;
	-moz-overflow-y: scroll;
	-ms-overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#main .back-btn {
    margin: 15px 20px;
    display: none;
}

#main .back-btn a img {
    margin-right: 6px;
}


#main .email-table table tbody tr.new td span::before{
	/*content: url(../images/list-style-current.png);*/
	margin-right: 5px;
}

#main .email-table table tbody tr td span::before{
	/*content: url(../images/list-style.png);*/
	margin-right: 5px;
}

#main .email-table table tbody tr td.subject div.subject-inline{
	display: inline-block;
	margin-left: 10px;
}

#main .email-table table tbody tr td.subject .email_status{
	vertical-align: top;
	position: relative;
	top: 5px;
}

#main .email-table table tbody tr td.subject .email_status a { color: #fff; }
#main .email-table table tbody tr td.subject .email_status a img{ vertical-align: top; margin-top: 7px;}

#main .email-table table tbody tr td.subject span, #main .email-table table tbody tr td.table-date span{
	display: block;
	line-height: 30px;
}

#main .email-table table tbody tr td.table-date span:first-child{
	margin-right: 7px;
}

#main .email-table table tbody tr td.table-date span:nth-child(2) a{
	width: 25px;
	display: inline-block;
	text-align: center;
}


#main .email-table table tbody tr td.table-date span a:hover{
	text-decoration: none;
}

#main .email-table table tbody tr td.subject span:first-child{
	display: inline-block;
}

#main .form_pane {
	margin-bottom: 5px;
	text-align: center;
	height: 836px;
	width: 51%;
	border: 1px solid #d8d8d8;
	padding: 0 30px;
}
#main .form_pane {
	overflow-y: scroll;
	-moz-overflow-y: scroll;
	-ms-overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#main .subject-wrapper {
	text-align: left;
	margin-top: 15px;
}

#main hr.border-line{
	display: none;
	margin: 20px 0;
}

#main .subject-wrapper h1{
	font-size: 23px;
	color: #4baadf;
	line-height: 30px;
}

#main .subject-wrapper h1 span{
	font-size: 20px;
	color: #4baadf;
	display: block;
	color: #333333;
	font-weight: normal;
}

#main .attachment-wrapper {
	min-height: 42px;
	width: 100%;
	text-align: center;
	height: auto;
	line-height: 28px;
	background: none;
}

#main .attachment-wrapper a {
	font-size: 13px;
	color: #03a4ff;
}

#main .attachment-wrapper p img {
	position: relative;
	top: 3px;
	margin-right: 6px;
}

#main .attachment-wrapper h3{
	margin: 0;
	color:	#000000;
	font-size: 16px;
}

.attachment-wrapper p{
	margin: 0;
}

#mytable tbody tr{
	font:14px 'Open Sans', sans-serif;
	color: #333333;
}

#mytable tbody tr:hover{
	font:14px 'Open Sans', sans-serif;
	/*background: #fdf8ba;*/
	background: rgb(253,248,156, 0.7);
}

#mytable tbody tr.new {
	font:14px 'Open Sans', sans-serif;
	color: #333333;
	font-weight: bold;
}
/*#mytable tbody tr.new td.subject label a:before{
	content: url(../images/circle-active.png);
	vertical-align: top;
	margin-top: 18px;
	position: absolute;
	top: 0;
}*/
#mytable tbody tr.read{
	color: #333333;
}
/*#mytable tbody tr.read td.subject label a:before{
	content: url(../images/circle-inactive.png);
	vertical-align: top;
	margin-top: 18px;
	position: absolute;
	top: 0;
}*/

#main .headers ul li{
	display: inline-block;
	vertical-align: top;
	font: 13px 'Roboto Light', sans-serif;
	color: #717171;
	font-weight: normal;
	width: 380px;
	height: 50px;
	line-height: 50px;
	margin-left: 20px;
	cursor: pointer;
}

#mytable tbody tr.empty {
	color: #636262;
	font: 13px 'Roboto Light', sans-serif;
}
#mytable td.tdcheckbox {
	width: 10px;
}
#mytable thead td{
    background-color: #fefefe;
}

/*end table css*/

p.warning {
	color: #f80808;
	text-align: center;
	font: 13px 'Robot', sans-serif;
}

p.success{
	color: green;
	text-align: center;
}

.se-pre-con {
	text-align: center;
}

#main .headers ul li img{
	margin-left: 5px;
	position: relative;
	top: -1px;
	opacity: 0.3;
	left: 7px;
}

.headers ul li a {
	font: 14px 'Open Sans',sans-serif;
	color: #0B0404;
}

.modal_container {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

#modal_form_content {
	display: none;
	width: 50%;
	text-align: center;
	background: #e4e4e4;
	border-radius: 7px;
	border: 1px solid #d5d5d5;
	-moz-box-shadow: 3px 3px 5px 6px #ccc;
	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
	box-shadow: 3px 3px 5px 6px #ccc;
	font-family: 'Open Sans',sans-serif;
	position: absolute;
	left: 25%;
	z-index: 99999;
	top: 22%;
	height: 400px;
	overflow-y: scroll;
	-moz-overflow-y: scroll;
	-ms-overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	padding-top: 4px;
}

#modal_form_content .modal-header {
	text-align: right;
	cursor: pointer;

	position: relative;
}

#password_modal {
	display: none;
	width: 300px;
	text-align: center;
	background: #e4e4e4;
	border-radius: 7px;
	border: 1px solid #d5d5d5;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
  	font-family: 'Open Sans',sans-serif;
  	position: absolute;
	/*left: 40%;*/
	left: 0;
	right: 0;
	z-index: 99999;
	top: 22%;
	height: auto;
	margin: 0 auto;
}

#password_modal .result-message p{
	margin: 5px 0 10px;
}

#password_modal label {
	margin: 5px;
}

#password_modal input[type=password]{
	width: 74%;
	border: 1px solid #D8D3D3;
	border-radius: 3px;
	height: 30px;
  	outline: none;
	padding: 3px 0px 3px 3px;
	margin: 7px 1px 7px 0px;
	border: 1px solid #BFB5B5;
}

#password_modal .modal-header h3{
	font: 21px 'Open Sans',sans-serif;
	color: #55b3e8;
	margin: 10px 0 10px 0;
}

#password_modal input[type=password]:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

.modal-footer button{
	background: #55b3e8;
	color: #ffffff;
	border: none;
	height: 27px;
	cursor: pointer;
	border-radius: 3px;
	font: 14px 'Open Sans', sans-serif;
	margin: 4px 3px 10px auto;
}
p.forgot_pass{
	text-align: center;
	font: 14px 'Robot', sans-serif;
	color: #474f60;
	margin-bottom: 3px;
}
p.forgot_pass a{
	color: #4baadf;
}
h3.forgotpasstext {
    text-align: center;
    margin-top: 25px;
    font: 14px 'Open Sans',sans-serif;
    color: #4baadf;
}
.msg p {
	text-align: center;
}
p.linktologin{
	text-align: center;
}

.tableinfo {
	height: 25px;
	background: #f1f1f1;
}
.tableinfo p {
	margin: 0px;
	text-align: right;
	width: 99%;
}
.tableinfo p a img {
	position: relative;
	top: 2px;
}

.tableinfo p span {
	position: relative;
	bottom: 1px;
}
.tableinfo p a.disabled {
	cursor: pointer;
	pointer-events:none;

}
.mobile-tableinfo p{
	text-align: center;
}
input#firstpage {
	background: url(../images/firstpage.png) center no-repeat;
	border: none;

}
input#previouspage {
	background: url(../images/prev-btn.png) center no-repeat;
	border: none;
}
input#nextpage {
	background: url(../images/next-btn.png) center no-repeat;
	border: none;
}
input#lastpage {
	background: url(../images/lastpage.png) center no-repeat;
	border: none;
}
input[type=button]{
	/*position: relative;
	bottom: 1px;
	border-left: 2px solid #b4b4b4;
	border-right: 2px solid #b4b4b4;*/
	height: 21px;
}

input[type=button]:disabled:hover{
	cursor: no-drop;
}

#checkall {
	position: relative;
	top: 1px;
}


#main .headers ul li.attachment-column{
    width: 14px;
    margin-left: 13px;
}

.headers ul li#sortfrom {
	margin-left: 15px;
}

p.create_user {
	text-align: center;
	color: #3c3c3c;
	margin: 0;
}
p.create_user a{
	color: #3c3c3c;
}
p.create_user a:hover{
	color: #4baadf;
	text-decoration: none;
}

p.create_user a span {
	font-weight: bold;
	position: relative;
	top: -1px;
}

/*#modal_form_content .attachment-modal {
	min-height: 42px;
	width: 100%;
	text-align: center;
	height: auto;
	line-height: 42px;
	background: #4ea9ec;
	margin-bottom: 15px;
	border: 1px solid #a4a4a4;
}
*/
#modal_form_content .attachment-modal p img {
    position: relative;
    top: 3px;
    margin-right: 6px;
}
#modal_form_content .attachment-modal a {
    font-size: 13px;
    color: #ffffff;
}

#modal_form_content .attachment-wrapper {
	min-height: 42px;
	width: 99%;
	text-align: center;
	height: auto;
	line-height: 42px;
	background: #4ea9ec;
	margin-bottom: 15px;
	border: 1px solid #a4a4a4;
	margin-top: 10px;
}

#main .headers ul li.attachment-column img.attachment{
	top: 2px;
}

.error-content{
	background-color:#FAE2E3;
	border:1px solid #000000;
	color:#383838;
	font-weight:700;
	line-height:20px;
	margin:0 0 10px;
	padding:10px 15px;
	margin:40px auto;
	font-size: 16px;
}

.error-content h1 img{
	vertical-align: middle;
	margin-top: -6px;
	margin-right: 10px;
}

#error button{
	background: #4baadf;
	padding: 12px 20px;
	color: #fff;
	border-radius: 5px;
	border: 0;
	cursor: pointer;
	font: 14px Open Sans, sans-serif;
}
#error button:hover{
	background: #9f9f9f;
}
