@charset "utf-8";

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,400italic,700,700italic);
/* font-family: 'Titillium Web', sans-serif; */

/* Reset Browser */
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, font, 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: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus { outline: 0; }
body { background: #ebebeb url(images/background.jpg); line-height: 1; font-size: 14px; font-family: 'Titillium Web',
	sans-serif; color: #474444; font-weight: 400; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a { color: #5e5e5e; text-decoration: none; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
del { color: #333; }
ins { background: none; text-decoration: none; }
hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: 10px; line-height: 14px; color: #888888; }
img { border: 0; -ms-interpolation-mode: bicubic; }
em { font-style: italic; }
header { position: relative; z-index: 100; }
.clear { clear: both; }
.hidden { display: none; }
.pointer { cursor: pointer; }
input, select, textarea { font-size: 14px; line-height: 18px; font-family: 'Titillium Web', sans-serif; }
input:not([type]), input[type="text"], input[type="password"], select, textarea, input[type="number"] {
	border: 1px solid #999; border-radius: 4px; background: #e3e3e3; color: #5e5e5e; }
input:not([type]), input[type="text"], input[type="password"], textarea, input[type="number"] { padding: 4px; }
select { padding: 1px 4px; }
.select_pj{
	width: 100%;
}
input:not([type]), input[type="text"]:hover, select:hover, input[type="password"]:hover, textarea:hover, input[type="number"]:hover {
	border: 1px solid #333; background: #efefef; }
input:not([type]), input[type="text"]:focus, select:focus, input[type="password"]:focus, textarea:focus, input[type="number"]:focus {
	color: #383838; background: #fafafa; border: 1px solid #000; box-shadow: 0 0 2px #999; }
input:not([type]), input[type="submit"], input[type="button"], .button {
  	background: #e63333;
  	background-image: -webkit-linear-gradient(top, #e63333, #780000);
  	background-image: -moz-linear-gradient(top, #e63333, #780000);
  	background-image: -ms-linear-gradient(top, #e63333, #780000);
  	background-image: -o-linear-gradient(top, #e63333, #780000);
  	background-image: linear-gradient(to bottom, #e63333, #780000);
  	-webkit-border-radius: 8;
  	-moz-border-radius: 8;
  	border-radius: 8px;
  	color: #ffffff;
  	font-size: 16px;
  	padding: 10px 20px 10px 20px;
  	text-decoration: none;
  	border: none;
  	cursor: pointer;
}
.buttongrey {
	background: #c7c7c7 !important;
  	background-image: -webkit-linear-gradient(top, #c7c7c7, #808080) !important;
  	background-image: -moz-linear-gradient(top, #c7c7c7, #808080) !important;
  	background-image: -ms-linear-gradient(top, #c7c7c7, #808080) !important;
  	background-image: -o-linear-gradient(top, #c7c7c7, #808080) !important;
  	background-image: linear-gradient(to bottom, #c7c7c7, #808080) !important;
  	-webkit-border-radius: 8;
  	-moz-border-radius: 8;
  	border-radius: 8px;
  	color: #ffffff;
  	font-size: 16px;
  	padding: 10px 20px 10px 20px;
  	text-decoration: none;
  	border: none;
  	cursor: pointer;
}
input:not([type]), input[type="submit"]:hover, input[type="button"]:hover, .button:hover,
input:not([type]), input[type="submit"]:active, input[type="button"]:active, .button:active,
.buttongrey:active, .buttongrey:hover {
	background: #b00202 !important;
  	background-image: -webkit-linear-gradient(top, #b00202, #4a0000) !important;
  	background-image: -moz-linear-gradient(top, #b00202, #4a0000) !important;
  	background-image: -ms-linear-gradient(top, #b00202, #4a0000) !important;
  	background-image: -o-linear-gradient(top, #b00202, #4a0000) !important;
	background-image: linear-gradient(to bottom, #b00202, #4a0000) !important;
	text-decoration: none;
}

input[type="text"]:disabled, input[readonly="readonly"], input[type="number"]:disabled { background: #FFF; border: 1px solid #CCC; }
input[readonly="readonly"]:hover,
input[readonly="readonly"]:focus { background: #FFF; border: 1px solid #CCC; box-shadow: none; }
.notif { line-height: 18px; margin: 8px 0; text-align: center; color: #FFF; display: none; }
a.button:hover { text-decoration: none; }
.notif div { border: 1px solid #FFF; box-shadow: 0 0 4px #999; padding: 8px; border-radius: 4px; }
.notifno { background: #900; }
.notifyes { background: #066; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.none { display: none; }
.nobr { white-space: nowrap; }
.tdtop { vertical-align: top !important; }
p { line-height: 20px; padding: 8px; }
strong { font-weight: 700; }
.wrap { min-width: 960px; width: 96%; margin: 0 auto; position: relative; max-width: 1850px; }
h2 {
	color: #C51F07;
	font-weight: 300;
	font-size: 28px;
	line-height: 36px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #464646;
	margin-bottom: 20px;
}
h3 { color: #333; font-size: 18px; line-height: 22px; padding-bottom: 16px; font-weight: 700; }
h4 { font-size: 16px; line-height: 20px; padding-bottom: 4px; font-weight: 700; }
.loader { position: absolute; display: none; }
.outbox { background: #fff; box-shadow: 0 0 2px #999; }
article { min-height: 360px; margin: 24px 0; padding: 24px 24px 48px 24px; }
.toptool { padding: 8px 0; margin-bottom: 16px; }
.innertable th {
	padding: 8px 0;
	vertical-align: middle;
	border-bottom: 1px solid #999;
	text-align: center;
	background: #CCC;
	border-right: 1px dotted #FFF;
	color: #333;
}
.innertable td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px dotted #CCCCCC; line-height: 18px; word-wrap: break-word; }
.tdfile { word-wrap: break-word; max-width: 360px; }
.innertable { border-top: 1px dotted #CCCCCC; }
.datatable { border-right: 1px dotted #CCCCCC; border-left: 1px dotted #CCCCCC; }
.relative { position: relative; }
.floatright { display: block; float: right; }
.floatleft { display: block; float: left; }
.center { text-align: center; }
.middle { vertical-align: middle; }
.top { vertical-align: top; }
.left { text-align: left; }
.right { text-align: right; }
.boxadd {
	position: absolute;
	height: auto;
	left: 0;
	top: 0;
	background: #FFF;
	border: 2px solid #EFEFEF;
	padding: 32px;
	border-radius: 8px;
	box-shadow: 0 0 8px #5d5d5d;
	display: none;
}
.none, .displaynone { display: none; }
.italic { font-style: italic; }

/* HEADER */
.blackgrad {
	background: #454545; /* Old browsers */
	background: -moz-linear-gradient(top, #5b5b5b 0%, #010101 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#010101)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #5b5b5b 0%,#010101 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #5b5b5b 0%,#010101 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #5b5b5b 0%,#010101 100%); /* IE10+ */
	background: linear-gradient(to bottom, #5b5b5b 0%,#010101 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#010101',GradientType=0 ); /* IE6-9 */
}
.top { height: 48px; border-bottom: 1px solid #888888; box-shadow: 0 0 4px #333; position: relative; z-index: 5; }
.menuline { height: 36px; background: #a3a3a3; border-bottom: 1px solid #FFFFFF; box-shadow: 0 0 4px #333; }
.boxlogo {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 90px;
	background: #FFF;
	border-radius: 0 0 8px 8px;
	border-left: 1px solid #aeaeae;
	border-right: 1px solid #aeaeae;
	border-bottom: 1px solid #aeaeae;
	box-shadow: 0 0 4px #333;
}
.logo { display: block; width: 177px; margin: 18px auto 0 auto; text-align: center; }
.title {
	float: right;
	text-align: right;
	color: #FFF;
	width: 180px;
	margin: 6px 0 0 0;
	text-shadow: 1px 1px 1px #000;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
}

/* DROP DOWN MENU */
.menu { border:none; border:0px; margin: 0 0 -12px 0; display: inline-block; padding-left: 230px; }
.menu ul{ color: #8eaecc; list-style:none; margin:0; }
.ulitem { display: block; padding: 10px 20px; }
.menu li{ float:left; padding:0; }
.menu li a{
	display:block;
	font-weight:normal;
	margin:0px;
	padding:11px 16px;
	text-align:center;
	text-decoration:none;
	color: #000000;
	text-shadow: 1px 1px 1px #CCC;
}
.menu li a:hover, .menu #current { background:#88201c; text-decoration:none; color: #FFF;
	text-shadow: 1px 1px 1px #151515; }
.menu ul li:hover a{ background:#88201c; text-decoration:none; color: #FFF; text-shadow: 1px 1px 1px #151515; }
.menu li ul{
	display:none;
	height:auto;
	padding: 0 0 8px 0;
	margin: 0 0 0 -1px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 0 8px 8px;
	position:absolute;
	width:240px;
	z-index:200;
	background: #A3A3A3;
}
.menu li:hover ul { display:block; }
.menu li li {
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:240px;
	background:#A3A3A3;
	border-bottom: 1px solid #b3b3b3;
}
.menu li:hover li a{ background:none; line-height:44px; color:#000; text-shadow: 1px 1px 1px #CCC;
}
.menu li ul a{
	display:block;
	height:44px;
	font-style:normal;
	margin:0px;
	padding:0px 16px;
	text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
	border:0px; color:#ffffff; text-decoration:none;
	background:#88201c; text-shadow: 1px 1px 1px #151515; }

/* MIDDLE */
.loginarea { width: 400px; padding: 32px 16px; margin: 64px auto 0 auto; text-align: center; }
.loginarea input[type="text"], .loginarea input[type="password"] {
	margin: 8px auto; text-align: center; display: block; width: 240px; }
.rememberbox { padding: 8px 0 36px 0; }
.loginbox { position: relative; }
#logloader { right: 110px; top: 202px; }
#user_loader { top: 4px; left: 225px; }
.actionicon { margin: 0 4px; cursor: pointer; }
.actionicon:hover { position: relative; bottom: 1px; }
.boxaddclient { width: 720px; }
#projectloader { right: 100px; top: 5px; }
#clientloader { right: 200px; top: 5px; }
.pagination { text-align: center; padding: 24px 0 0 0; }
.number { padding-bottom: 12px; }
.number a, .number strong { padding: 5px 8px; display: inline-block; margin: 0 2px; border-radius: 4px;
	text-align: center; }
.number a { background: #CCC; }
.number a:hover, .number strong { background: #88201C; color: #FFF; }
.showing { font-size: 12px; line-height: 16px; color: #999; }
.notifask {
	padding: 3px 16px;
	background: #a55555;
	border: 1px solid #FFF;
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	margin-top: 8px;
}
.notifask:hover { background: #713232; }
.boxaddproject { width: 480px; }
.boxintab { margin: 8px 8px 8px 0; padding: 16px; border: 1px dotted #CCC; border-radius: 4px; }
.boxjobleft { width: 49%; }
.boxjobright { width: 49%; }
.outboxfile { padding: 12px 8px 8px 8px; border: 1px solid #CCC; margin: 16px 0 0 0; }
.filearea { border: 1px solid #999; min-height: 300px; border-radius: 4px; }
.trgrey { background: #eaeaea; }
/*.filearea .files { min-height: 100px; overflow: auto; }*/
.outboxfile h3 { padding: 0 0 16px 4px; }
.submitjob { padding: 16px 8px; }
#jobloader { left: 270px; top: 22px; }
.addjob { position: relative; bottom: 14px; }
.saringan { padding: 8px 16px; background: #dfdfdf; height:40px; }
.datebig { text-align: center; font-size: 28px; line-height: 32px; }
.datesmall { text-align: center; font-size: 11px; line-height: 15px; }
.tabjobs tr td { border-left: 1px solid #CCCCCC; line-height: 17px; border-bottom: 1px solid #999; font-size: 13px; }
.tabjobs tr td:last-child { border-right: 1px solid #CCCCCC; }
.tdsmall { font-size: 11px; color: #8b8b8b; }
.trpending { background: #f1efd6; }
.trprogress { background: #ebf6f5; }
.trfinish { background: #ebf6ed; }
.trreject { background: #f6ebeb; }
.trcancel { background: rgba(150, 75, 0, 0.5); }
.tdgrey { background: #cdcdcd; }
.tdblack { background: #404040; color: #CCC; font-weight: 700; }
.tabjobs tr th.tdgrey { background: #bebebe; }
.tdtelat { background: #ad3636; color: #FFF; }
.tabjobs td a { color: #484848; }
.tabjobs td a:hover { color: #88201C; text-decoration: underline; }
.searchinput {
	background-image: url(images/icon_search.png) !important;
	background-repeat: no-repeat !important;
	background-position: 2px 2px !important;
	padding: 4px 4px 4px 32px !important;
	width: 128px;
}
.searchboxjob { position: relative; width: 200px; text-align: right; top: -8px; }
.searchtitle { font-size: 16px; line-height: 22px; font-weight: 700; display: inline-block; padding: 8px 0 0 0; }
.notfound { font-size: 24px; line-height: 30px; text-align: center; font-weight: 300; padding: 24px 0 0 0; }
.backicon {
	position: absolute;
	width: 64px;
	text-align: right;
	display: block;
	top: 5px;
	right: 16px;
}
.photobox {
	float: left;
	width: 180px;
	height: 134px;
	border-radius: 4px;
	border: 1px solid #CCC;
	margin: 0 24px 0 0;
	padding: 10px;
	overflow: hidden;
}
.statbox { float: left; width: 480px; }
.usermail { text-align: center; padding: 10px 0 0 0; font-size: 12px; }
.detailbox { padding: 4px 0 24px 0; border-bottom: 1px dotted #464646; margin-bottom: 24px; }
.tdgrey { font-weight: 700; background: #CCC; }
.profilename { display: inline-block; padding: 0 8px 0 8px; color: #000; position: relative; bottom: 8px; }
.boxprofile { float: left; padding: 4px 4px 2px 8px; border-left: 1px solid #7a7a7a; height: 30px; }
.boxprofile:hover { background: #bcbcbc;  }
.boxprofilelast { border-right: 1px solid #7a7a7a; }

/* jQuery UI */
.ui-datepicker-title, .ui-datepicker th, .ui-datepicker-calendar td,
.ui-tabs { font-family: 'Titillium Web', sans-serif !important; font-size: 14px; }
.ui-tabs .ui-tabs-panel { padding: 8px; }
.ui-tooltip { font-family: 'Titillium Web', sans-serif; font-size: 12px; line-height: 16px; }

/* jQuery FILE UPLOAD */
.fileinput-button { position: relative; overflow: hidden; }
.fileinput-button input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
  	opacity: 0;
  	-ms-filter: 'alpha(opacity=0)';
  	font-size: 200px;
  	direction: ltr;
  	cursor: pointer;
}
.fileinput-button {
	width: 60px;
	background: #2d578b url(images/icon_upload.png) no-repeat 10px 11px;
	padding: 8px 8px 8px 32px;
	float: left;
}
.fileinput-button:hover { background: #1f426e url(images/icon_upload.png) no-repeat 10px 11px !important; }
.uploadtool { padding: 8px 0 16px 0; }
.progress {
	width: 72%;
	height: 20px;
	float: right;
	margin: 6px 0 0 0;
	background: #EAEAEA;
}
.progress-bar { background: #2d578b; border-radius: 4px; height: 20px; width: 0; }
.userpic #view_pic { border: 1px solid #A3A3A3; }
.userpic:hover #view_pic { border: 1px solid #FFF; box-shadow: 0 0 4px #999; }
.userpic .del_pic {
	display: none;
	position: absolute;
	z-index: 10;
	right: 20px;
	top: 4px;
	cursor: pointer;
}
.userpic:hover .del_pic { display: block; }
.userpic { position: relative; }
.userpic #picupload {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
.userpic .progress { position: absolute; width: 150px; bottom: 1px; left: 1px; display: none; }
.userpic .progress-bar { border-radius: 0 4px 4px 0; }
.userbox { float: right; text-align: right; width: auto; max-width: 360px; }
.tdpic { background-size: cover; background-repeat: no-repeat; background-position: center center; background-image:url(images/user.jpg); }
#inqloader { left: 200px; top: 22px; }

/* MESSAGE */
.messagebox {
	position: fixed;
	width: 360px;
	min-height: 320px;
	right: -1px;
	bottom: 0;
	background: #A3A3A3;
	z-index: 500;
	border-top: 1px solid #0A0A0A;
	border-left: 1px solid #0A0A0A;
	display: none;
}
.messagebox h3 {
	font-size: 14px;
	display: block;
	color:  #FFF;
	position: relative;
	padding: 8px 12px;
	line-height: 18px;
	font-weight: normal;
	border-bottom: 1px solid #888888;
}
.disclose, .disrefresh { position: absolute; right: 8px; top: 9px; opacity: 0.5; cursor: pointer; }
.disclose:hover, .disrefresh:hover { opacity: 1; }
.sendbox { width: 100%; }
.sendboxinner { padding: 10px; position: relative; }
.disc_text, .disc_submit { display: block; resize: none; }
.disc_text { float: left; width: 272px; height: 37px; font-size: 13px; line-height: 16px; }
.disc_submit {
	float: right;
	background: #7d7d7d url(images/icon_send.png) center center no-repeat !important;
	padding: 14px 22px !important;
	position: relative;
	border-radius: 4px !important;
}
#disc_submit:hover { background: #b00202 url(images/icon_send.png) center center no-repeat !important; top: -1px; }
.discussion {
	background: #FFF;
	margin: 10px 12px;
	padding: 8px;
	clear: both;
	display: block;
	position: relative;
	width: auto;
	font-size: 13px;
	line-height: 16px;
	box-shadow: 0 0 2px #717171;
	border-radius: 4px;
}
.discimg { float: left; display: block; margin: 2px 0 0 0; }
.discsaybox { padding: 0 0 0 36px; }
.disctitle { font-weight: 700; padding-bottom: 4px; height: 16px; }
.disctitle small { font-weight: 400; padding-left: 8px; color: #b5b5b5; }
.disctgl {
	font-size: 9px;
	font-weight: 400;
	float: right;
	line-height: 12px;
	color: #b5b5b5;
	width: 100px;
	padding: 3px 0 0 0;
	text-align: right;
}
.discme { background: #e0e0e0; }
.activity .disctgl { float: none; padding: 0; text-align: left; }
.activity { background: #b7b7b7; box-shadow: none; font-size: 12px; color: #f1f1f1; }
.activity .disctgl { color: #f1f1f1; padding-bottom: 2px; }
.discbox { overflow: auto; position: relative; }
.msgnotif {
	background: rgba(0,0,0,0.7);
	color: #CCC;
	position: absolute;
	bottom: -24px;
	left: 0;
	width: 100%;
	z-index: 50;
	padding: 8px 0;
	text-align: center;
	font-size: 11px;
	display: none;
}
#msgfail { background: rgba(153,0,0,0.7); color: #FFF; }
.imgsend { position: absolute; top: 12px; left: 148px; display: none; }
.disrefresh { right: 32px; }
#statloader { top: 8px; left: 128px; }
.linksmall { font-size: 10px; line-height: 14px; color: #a5a5a5; margin-left: 16px; }
.linksmall:hover { color: #333; text-decoration: underline; }

/* SENDFILE */
.boxfile { float: left; width: 400px; padding: 8px; border: 1px solid #999; }
.filejobbox { border: 1px solid #CCC; padding: 4px; margin: 0 0 8px 0; }
.filejobtitle {
	background-color: #dfdfdf;
	background-image: url(images/icon_folder1.png);
	background-repeat: no-repeat;
	background-position: 6px 6px;
	padding: 4px 4px 4px 42px;
	border-radius: 4px;
}
.filejobtitle:hover, .filejob:hover { background-color: #d1d1d1; }
.filejobtitle h4 { padding: 0; }
.filefolder {
	display: block;
	background-image: url(images/icon_folder2.png);
	background-repeat: no-repeat;
	background-position: 6px 6px;
	padding: 14px 0 6px 42px;
	border-bottom: 1px dotted #CCCCCC;
	cursor: pointer;
	text-transform: capitalize;
}
.filefolder:hover { text-decoration: underline; }
.folderempty { cursor: auto; background-image: url(images/icon_folder3.png); }
.folderempty:hover { text-decoration: none; }
.filejob { margin: 0 8px 0 0; padding: 4px 0; }
.filejob li ul li {
	padding: 4px;
	margin-left: 40px;
	border-bottom: 1px dotted #CCCCCC;
	line-height: 18px;
	position: relative;
}
.fileitem { display: block; padding: 3px 32px 0 32px; }
.filejob li ul li .fileicon { float: left; display: block; }
.filejob .fileadd { float: right; display: block; cursor: pointer; opacity: 0.6; }
.filejob .fileadd:hover { opacity: 1; }
.datefilelist { padding-top: 32px; }
.boxfile h3, .boxmail h3 {
	background: #333;
	color: #FFF;
	font-weight: 400;
	font-size: 16px;
	display: block;
	padding: 4px 0 4px 8px;
	margin-bottom: 8px;
}
.boxmail { padding: 0 0 0 420px; width: auto; }
.boxmailinner { margin: 8px; padding: 8px; border: 1px solid #999; }
.maildown { padding: 8px; }
.maildown textarea { display: block; margin: 8px 0 0 0; width: 98%; height: 80px; }
.maildownfile { padding: 8px; border-top: 1px dotted #CCCCCC; }
.maildownfile ul { padding: 4px 0 0 16px; }
.maildownfile ul li { list-style: disc; margin: 0 0 0 8px; padding: 3px 0; }
.maildownfile a { color: #474444; }
.maildownfile a:hover { color: #000; text-decoration: underline; }
.delfilesend { cursor: pointer; opacity: 0.3; }
.delfilesend:hover { opacity: 1; }
.sendfiles { min-width: 25%; }
#loaderfindfile { right: 100px; top: 3px; }
.sendfilebox {
	padding: 8px;
	border: 1px solid #CCC;
	border-radius: 4px;
	min-height: 32px;
	width: auto;
	margin: 8px 0 0 0;
	position: relative;
}
#mail_loader { right: 460px; top: 12px; }
#mail_notif_success { margin: 0 16px; }
#mail_ok { margin: 8px 0 0 0; }

/* SEND PO */
.filejobnt { padding: 8px 40px 8px 8px; border-radius: 4px; background: #dfdfdf; position: relative; }
.jobadd {
	position: absolute;
	display: block;
	cursor: pointer;
	opacity: 0.6;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
.jobadd:hover { opacity: 1; }
.jobnf { padding: 10px 0 10px 10px; }
.sendfilebox .jobitem { padding: 8px 8px 8px 8px; border-bottom: 1px solid #CCC; margin-bottom: 8px; position: relative; }
.jobnum { line-height: 18px; font-size: 12px; }
.htot { padding: 8px 0 0 2px; font-size: 14px; line-height: 16px; }
.deljobitem { cursor: pointer; position: absolute; top:28px; right: 16px; opacity: 0.6; }
.deljobitem:hover { opacity: 1; }
.sendcopy { padding: 4px 0 0 8px; }
.goarchive {
	position: absolute;
	right: 8px;
	top: -64px;
	width: 96px;
	padding: 4px 16px 4px 42px;
	background-color: #A3A3A3;
	background-image:  url(images/icon_history.png);
	background-repeat: no-repeat;
	background-position: 10px 4px;
	border-radius: 4px;
	color: #000;
	text-shadow: 1px 1px 1px #ccc;
	text-align: right;
	display: block;
	font-size: 16px;
	line-height: 24px;
}
.goarchive:hover { background-color: #c6c6c6; }
#po_new { width: 148px; background-image: url(images/icon_mail.png); background-position: 10px 5px; }
.doclist { padding: 16px 0; }
.dotlist { padding: 0 0 0 16px; }
.dotlist li { list-style: disc; }
.noline:hover { text-decoration: none !important; }
.pdflink { display: inline-block; position: relative; top: -2px; left: 8px; }
.pdfimg { position: relative; top: 4px; }
.tabhitung td { padding: 8px 4px; border-bottom: 1px dotted #CCCCCC; }
.reddoc { background: #ffcece; }
.smdist small { display: block; padding: 4px 0 0 2px; }
.jobwrap { margin: 0 16px; max-width: none; min-width: 960px; position: relative; width: auto; }
.boxjoblist { height: auto; min-height: 380px; padding: 0 0 24px 0; }
.boxjoblist table { display: block; overflow-y: hidden; overflow-x:auto; }

.boxjoblist table thead { display: block; }
.boxjoblist table tbody { display: inline-block; overflow-x: hidden; overflow-y: auto; height: 900px;}
/*  height: 550px; utk 9 jobs */
#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

.sarjob { height: auto; display: none; position: relative; z-index: 1; }
.jobfilter { padding: 6px 0; border-top: 1px dotted #FFFFFF; }
#view_client{width: 40%;}
.jobfiltergrey { background: #efefef; padding: 6px 8px; }
.thefil { padding: 8px 16px; background: #A3A3A3; color: #FFF; position: relative; z-index:1; }
.thefil:hover { background: #919191; }
.filtdo { display: block; width: 90%; cursor: pointer; }
.jobsum { background: #CCC; padding: 8px 16px; margin: 4px 0 16px 0; text-align: right; position: relative; }
.ttjob { margin-bottom: 0; padding-bottom: 0; position: relative; z-index: 1; }
.jurdate {
	position: absolute;
	top: 39px;
	right: 56px;
	color: #c51f07;
	font-size: 16px;
	text-align: right;
	font-weight: 300;
	width: 200px;
}
.xlslink {
	display: block;
	width: 24px;
	height: 32px;
	position: absolute;
	right: 24px;
	top: 26px;
	z-index: 100;
}
.xlslink2 {
	display: block;
	position: absolute;
	right: 210px;
	top: 22px;
	z-index: 100;
}
.xlsicon { display: block; z-index: 100; position: relative; opacity: 0.8; }
.xlsicon:hover { opacity: 1; }
.totalwords { color: #888888; padding: 16px 0 0 8px; }
.totwords:hover { text-decoration: underline; }
.opsubmit { padding: 16px 0 0 0; position: relative; }
.po_option { padding-bottom: 48px; }
#pomessage_loader { left: 100px; top: 20px; }
.bankform {
	border: 1px solid #efefef;
	padding: 16px;
	border-radius: 8px;
	margin-top: 16px;
	width: 94%;
    box-shadow: 0 0 8px #5d5d5d;
    padding: 32px;
}
#bankloader { right: 200px; top: 4px; }
.banklist {
	border: 1px solid #ccc;
    border-radius: 4px;
    margin: 8px 0 0;
    min-height: 32px;
    padding: 8px;
    position: relative;
    width: auto;
	height: 200px;
	overflow: auto;
}
.tabbank { margin-bottom: 32px; }
.tabbank td { padding: 4px; border-bottom: 1px dotted #ccc; vertical-align: middle; line-height: 18px; }
.tabbank .bsubject { font-size: 13px; padding-top: 12px; display: block; }
.wrap-usernotifbox {
    position: fixed;
	width: 775px;
	max-height: 240px;
	left: 50%;
	top: 50%;
	margin-left: -360px;
	margin-top: -150px;
    text-align: center;
}
.usernotifbox {
    position: relative;
    display: inline-block;
	width: 360px;
	max-height: 240px;
	background: #f2cdcb;
	color: #000;
	border: 2px solid #FFF;
	border-radius: 8px;
	padding: 16px 8px;
	box-shadow: 0 0 16px #333;
	text-align: center;
	line-height: 18px;
    vertical-align: top;
}
.usernotifbox:nth-child(2) {
    margin-left: 10px;
}
#usernotif_deatline {
    background: #88201c;
    color: #ffffff;
}
#usernotif_deatline.none{
    display: none;
}
.usernotifjob { padding: 0 8px 16px 8px; max-height: 120px; overflow: auto; }
.notifjobitem { background: #fbe6e4; padding: 4px; border-radius: 4px; margin-bottom: 4px; }
.notifjobitem a { color: #333; }
.notifjobitem a:hover { text-decoration: underline; color: #000; }
.usernotifhello { padding: 0 0 8px 0; font-weight: 700; }
.poproj { margin-bottom: 24px; border: 1px solid #A3A3A3; background: #A3A3A3; padding: 8px 4px 0 4px; border-radius: 4px; }
.poprojtop { padding: 10px 52px 10px 12px; background: #333333; color: #FFF; position: relative; margin-bottom: 8px; }
.poprojtop small { display: block; padding: 4px 0 0 0; color: #EFEFEF; }
.poprojtopun { background: #565656; }
.projadd {
	position: absolute;
	display: block;
	cursor: pointer;
	opacity: 0.6;
	right: 16px;
	top: 50%;
	margin-top: -12px;
}
.projadd:hover { opacity: 1; }
.popropbot .filejobbox { border: none; padding: 0; }
.popropbot .filejobnt { border: 1px solid #FFF; }
.psjob { padding: 4px; border-bottom: 1px dotted #FFFFFF; width: 98%; }
.psjob strong { color: #525252; }
.pojl { color: #525252; font-weight: 700; padding: 4px 0 0 4px; }
.fjpsbox {
	display: block;
	background: #8e8e8e;
	color: #EEEEEE;
	margin: 0 -40px 8px -8px;
	border-radius: 4px 4px 0 0;
	padding: 8px 40px 8px 12px;
	line-height: 20px;
}
.psjobbox { padding: 0 40px 8px 8px; }
.psadd { margin: 0; right: 10px; top: 6px; }
.reddoctit { background: #d28080; }
.psissued { font-size: 10px; margin: -4px 0 12px 4px; font-weight: 700; color: #944d4d; }
.tkhomelist { padding-top: 4px; }

/* REVISI */
.boxaddclientrev { top: -28px; width: 1090px; }
.iconrate {
	position: relative;
	top: 3px;
	left: 6px;
	cursor: pointer;
	opacity: 0.6;
}
.iconrate:hover { opacity: 1; }
.iconrateloader { position: absolute; top: 8px; display: none; }
#iconrateloader_client { left: 120px; }
#iconrateloader_trans { left: 160px; }
#iconrateloader_trans_th { left: 230px; }
#iconrateloader_client_inq { left: 140px; }
.iconcopyto {
	position: relative;
	top: 6px;
	left: 8px;
	cursor: pointer;
	opacity: 0.6;
}
.iconcopyto:hover { opacity: 1; }
.userlfs_tabicon { width: 20px; height: auto; float: right; margin-right: 5px; cursor: pointer;}
.rating-user { white-space: nowrap; }
.detailbox .statbox { margin-bottom: 15px; }
.add_langrate { vertical-align: middle; margin-left: 20px; cursor: pointer; }

.usertable tr { position: relative; }
.usertable tr td { position: relative; }
.usertable .userlangrate { width: 410px; top: auto; left: auto; margin-top: 10px; right: 0px; z-index: 5; }
.usertable .userlangrate table { width: 100%; }
.user_transl_edu tr th { position: relative; }
.user_transl_work tr th { position: relative; }
.nonetab_td tr td { padding: 0px; }
.nonetab_td tr td:first-child { padding: 6px 8px; }
.nonetab_td tr td input[type="text"] { width: calc(100% - 11px); border-radius: 0px; }
.usertranslator_datatambahan tr td input[type="text"]  { min-width: 200px; }
.usertranslator_datatambahan .userlangrateform tr td input[type="text"]  { min-width: auto; }
.usertabledetail td a:hover { color: #88201C; text-decoration: underline; }
button.notbackground { background: none; border: 0px; padding: 0px; margin: auto; color: #5e5e5e; cursor: pointer; }
button.notbackground:hover { color: #88201C; text-decoration: underline; }
.wrapuser_transl { width: 100%; position: relative; margin: 0 auto 20px; }
.wrapuser_transl .statbox { width: calc(50% - 20px); display: inline-block; }
.wrapuser_transl .statbox:first-child { margin-right: 20px; }
.wrapuser_transl .statbox:last-child { margin-left: 20px; }
.leftyes { text-align: left !important; padding: 8px !important }

.btm-open-transl-detail { font-size: 15px; font-weight: 600; color: #fff; background: #232323; padding: 10px 25px; transition: all .37s ease-in-out; min-width: 150px; text-align: center; box-sizing: border-box; display: inline-block; text-transform: uppercase; position: relative; z-index: 100; cursor: pointer; }
.btm-open-transl-detail:before { content: "View Detail Translator"; }
.btm-open-transl-detail:after { content: ""; width: 20px; height: 20px; background: url(images/down-arrow.png); background-size: cover; vertical-align: sub; display: inline-block; margin-left: 10px; }

.usertabledetail .wrapper_usertransl { width: 100%; max-height: 0px;
    -webkit-transition: max-height 0.4s, opacity 0.3s ease;
    -moz-transition: max-height 0.4s, opacity 0.3s ease;
    transition: max-height 0.4s, opacity 0.3s ease;
    opacity: 0; z-index: -1; overflow: auto;
}
.usertabledetail.open .wrapper_usertransl {
    -webkit-transition: max-height 0.8s, opacity 0.3s ease;
    -moz-transition: max-height 0.8s, opacity 0.3s ease;
    transition: max-height 0.8s, opacity 0.3s ease;
    max-height: 2000px; opacity: 1; }

.usertabledetail.open .btm-open-transl-detail:before { content: "Close"; }
.usertabledetail.open .btm-open-transl-detail:after { background: url(images/up-arrow.png); background-size: cover; }

.userfilter { min-height: 40px; height: auto; }
.userfilter select { vertical-align: middle; }
.view_rate_all { display: none; }
.view_rate_all.open { display: inline-block; }
.view_rating_type { vertical-align: middle; }
select#view_rating { width: 100px; display: inline-block; }
#view_rating_msdd { width: 120px; }
#view_rating_msdd .divider { display: none; }
#view_rating_msdd .ddArrow { display: none; }
#view_rating_msdd .ddTitle { background: none; }
#view_rating_msdd .ddTitle .ddTitleText { padding: 4.5px 5px;}
#view_rating_msdd { vertical-align: middle; border: 1px solid #999; border-radius: 4px; }
#view_rating_msddHolder, #view_rating_msdd { display: none; }
#view_rating_msddHolder.open, #view_rating_msdd.open  { display: inline-block; }
#view_rating_msdd .ddChild { height: 120px !important; }
.rate_value { min-width: 350px; display: inline-block; vertical-align: middle; }
.rate_value span { display: block; }



#dropzone {
    background: palegreen;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
}
#dropzone.in {
    width: 600px;
    height: 200px;
    line-height: 200px;
    font-size: larger;
}
#dropzone.hover {
    background: lawngreen;
}
#dropzone.fade {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}

/* Tambahan 20-06-2018 */
.job_langfromto_custom { display: none; }
.job_langfromto_custom.open { display: block; }



/*Revisi 06-08-2018*/
.boxjob span.prev_price {font-style:italic; cursor:pointer; text-decoration:underline; position:relative;}
.boxjob span.prev_price:hover {top:1px;}

.close_prevprice {background: rgba(0,0,0,1); opacity: 0; visibility:hidden; position: fixed; top:0; right:0; bottom:0; left:0; transition: all 0.3s; -webkit-transition: all 0.3s; z-index: 0;}
.close_prevprice.in-view {z-index: 999; visibility:visible; opacity: 0.5;}
.boxjob_prevprice {
	position: fixed;
    top: 50px;
    bottom: 50px;
    left: 50px;
    right: 50px;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
	border-radius:5px;
    background: #fff;
    z-index: 0;
    overflow: auto;
	transition: all 0.3s; -webkit-transition: all 0.3s; z-index: 0; opacity: 0; visibility:hidden;
}
.boxjob_prevprice.in-view {z-index: 9999; visibility:visible; opacity: 1;}
.icon_closedred {position: fixed;
    top: 30px;
    right: 30px;
    z-index: 0;
	transition: all 0.3s; -webkit-transition: all 0.3s; z-index: 0; opacity: 0; visibility:hidden; cursor:pointer;
}
.icon_closedred.in-view {z-index: 99999; visibility:visible; opacity: 1;}
.boxjob_prevprice .detildatatop {margin-bottom:20px;}
.boxjob_prevprice .title_pp {color: #333;
    font-size: 20px;
    line-height: normal;
    padding-bottom: 5px;
    border-bottom: 1px dotted #464646;
    margin-bottom: 20px;}


.reset_rating {position:absolute; bottom:0px; left:140px; font-size:12px; line-height:12px; font-style:italic; color:#88201c; cursor:pointer;}
.searchboxuser {padding-bottom:15px;}

.boxclientleft, .boxclientright {width:100%;}
.cliect_container {
    position: relative;
    padding-left: 28px;
    margin-right: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cliect_container input {position: absolute;opacity: 0;cursor: pointer;}
.cliect_checkmark {position: absolute;top: 8px;left: 0;height: 20px;width: 20px;background-color: #fff;border: 1px solid #000;}
.cliect_container input:checked ~ .cliect_checkmark {background-color: #fff;border: 1px solid #000;}
.cliect_checkmark:after {content: "";position: absolute;display: none;}
.cliect_container input:checked ~ .cliect_checkmark:after {display: block;}
.cliect_container .cliect_checkmark:after {content: '\d7';color: #000;font-size: 27px;top: -2px;left: 2px;}
.cliect_container span.name {font-size:14px;}

.toppricing tbody tr td {width:100px;}


.paging_clientnew {border-bottom:1px solid #ccc; margin-bottom:15px; }
.paging_clientnew .pagenum {cursor:pointer; padding:7px 12px; display:inline-block; background: #a3a3a3; border-radius: 4px 4px 0 0; border:1px solid #a3a3a3; text-shadow: 1px 1px 1px #CCC; color:#000;}
.paging_clientnew .pagenum.active {background:#fff; border-bottom:1px solid #fff; box-shadow:0 6px 0px 0px #fff;}
.paging_clientnew .pagenum:first-child {margin-left:7px;}
.clientnew-paging {margin:20px auto;}
.clientnew-paging .paging-arrow.active {cursor:pointer;}

.tabicon {opacity: 0.7;cursor: pointer;}

#client_pricing .detildatatop {margin-bottom:15px;}

#client_trems .trems_client {width:100%; margin-bottom:15px;}
#client_trems .trems_client .terms_minhgt {min-height:100px;}

/*------------------------------- BARU ---------------------------------------*/

/* Pencarian Nama Client di pmd-job_statu */

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.batas{
	margin: 8px 0px;
	display: block;
}

.client_select{width: 40%;}