/* CSS Document */
@import url(//fonts.googleapis.com/css?family=Delius|Open+Sans:400,400italic,300,700);
@charset "utf-8";
/*
Change log
f4f4f4 => f4f4f4
94A2B2 => 16a085
*/
/* 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: #E9E9E9; line-height: 1; font-size: 14px; font-family: 'Open Sans', sans-serif; color: #3f3f3f; 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: #fff; 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; }
.clear { clear: both; }
.hidden { display: none; }
.pointer { cursor: pointer; }
input, select, textarea { font-size: 14px; line-height: 18px; font-family: 'Open Sans', sans-serif; }
input:not([type]), input[type="text"], input[type="password"], input[type="number"], select, textarea {
	padding: 4px;
	border: 1px solid #999;
	border-radius: 4px;
	background: #e3e3e3;
	color: #5e5e5e;
}
input:not([type]), input[type="text"]:hover, select:hover, input[type="password"]:hover, input[type="number"]:hover, textarea:hover {
	border: 1px solid #333; background: #efefef; }
input:not([type]), input[type="text"]:focus, select:focus, input[type="password"]:focus, input[type="number"]:focus, textarea: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: #2e3b49;
	border: 1px solid #2e3b49;
	cursor: pointer;
	border-radius: 6px;
	padding: 8px 16px;
	color: #FFF;
}
input:not([type]), input[type="submit"]:hover, input[type="button"]:hover, .button:hover { background: #1c2630; }
input:not([type]), input[type="submit"]:active, input[type="button"]:active, .button:active { position:relative; top:1px; }
input[type="text"]:disabled, input[readonly="readonly"] { 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: #990000; }
.notifyes { background: #066; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.none { display: none; }
p { line-height: 20px; padding: 8px; }
strong { font-weight: 700; }

/* Head */
header { height: 48px; width: 100%; background: #2c3e50; position: relative; z-index: 15; border-bottom: 1px solid #ededed; box-shadow: 0 0 4px #333; }
.headwrap { margin: 0 18px; min-width: 300px; }
.logo { float: left; padding: 18px 16px; width: auto; display: block; }
.motto { position: absolute; color: #dadada; font-weight: 300; font-size: 14px; width: 278px; text-align: right; right: 16px; top: 18px; }
.userbox { float: right; width: 50%; position: relative; }
.userbox div { float: right; }
.boxusername { border-right: 1px solid #1b2735; color: #B1B5B8; font-style: italic; width: auto; padding: 18px 16px 0 0; height: 28px; }
.boxstatus { height: 40px; padding: 8px 10px 0 10px; border-left: 1px solid #394d63; border-right: 1px solid #1b2735; cursor: pointer; }
.boxstatus:hover { background: #081320; }
.statusdesc {
	position: absolute;
	width: 248px;
	height: auto;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 4px;
	padding: 16px;
	font-size: 12px;
	line-height: 16px;
	top: 72px;
	right: 0;
	display: none;
}
.closestdesc { position: absolute; right: -8px; top: -8px; cursor: pointer; }
.boxlogout { padding: 8px 10px 0 10px; border-left: 1px solid #394d63; border-right: 1px solid #1b2735; height: 40px; }
.logoutlink { display: block; width: 32px; height: 32px; background: url(gambar/icon_logout.png) no-repeat center top; margin: 0 auto; }
.logoutlink:hover { background: url(gambar/icon_logout.png) no-repeat center bottom; }

/* Public menu */
.public_menu {
	position: absolute;
	width: 240px;
	background: #2c3e50;
	top: 50px;
	left: 0;
	z-index: 20;
	border-radius: 0 0 8px 0;
	border-right: 2px solid #ededed;
	border-bottom: 2px solid #ededed;
	box-shadow: 0 0 4px #999;
	padding-bottom: 32px;
	display: none;
}
.public_menu a { color: #B1B5B8; display: block; padding: 12px 16px; border-bottom: 1px solid #2f4156; }
.public_menu a:hover { background: #182432; color: #FFF; text-decoration: none; }

/* Middle */
article { width: 100%; margin: 0 auto; min-width: 300px; position: relative; }
article a { color: #000; }
article a:hover { text-decoration: underline; }

/* Login Register */
.loginarea { padding: 48px 0 72px 0; margin: 58px 0 0 0; line-height: 18px; background: #FFF; box-shadow: 0 0 2px #aaabad; }
.loginbox .inputlogin { display: block; margin: 8px auto; width: 100%; padding: 8px 0; text-align: center; }
.loginarea h2 { color: #2c3e50; font-size: 32px; line-height: 38px; text-align: center; font-weight: 300; margin-bottom: 28px; }
.loginbox { width: 300px; margin: 0 auto; position: relative; }
#logloader { position: absolute; right: 86px; top: 162px; display: none; }
#mainlognotif a { color: #FC0; }
.rememberbox { float: left; width: 184px; padding: 10px 0 0 0; }
.rememberbox small { font-size: 9px; line-height: 12px; color: #999; margin: 0 0 0 6px; padding-top: 4px; display: block; }
.buttonlogin { display: block; float: right; margin: 4px 0 0 0; }
.checkremember { margin: 0 0 0 6px; }
.startnotif {
	text-align: center;
	padding: 16px 0;
	background: #FFF;
	box-shadow: 0 0 2px #aaabad;
	margin-bottom: 58px;
	margin: 16px auto 72px auto;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}
.registerbox { width: 318px; margin: 0 auto; text-align: left; position: relative; }
.registerbox .inputlogin { display: block; margin: 4px 0 16px 2px; width: 92.5%; padding: 8px 8px; text-align: left; }
.registerbox .buttonreg { margin: 0 0 0 2px; }
.setujubox { padding-bottom: 24px; font-size: 12px; line-height: 16px; }
.grecaptcha { padding-bottom: 24px; }
#regcaptcha { width: 318px; margin: 0 auto; }
#mainregnotif { margin-top: 24px; }
.regloader { position: absolute; right: 4px; bottom: 6px; }
#passloader { position: absolute; left: 0; top: 200px; display: none; }
#selamatbox p { text-align: center; padding-bottom: 32px; line-height: 20px; }
.notifpepeku { font-size: 12px; font-style: italic; }
#mainlognotif { padding: 16px 0 0 0; }
#passnotif #passleft { margin-right: 112px; }
#changepassbox { position: relative; }
#changepassbox #newpassloader { position: absolute; right: 24px; top: 144px; display: none; }
.inputchangepass { margin: 8px auto 16px auto; display: block; }
.footlogin { padding: 72px 0 32px 240px; }

/* Wizard */
.wizard { margin: 0 auto; width: 96%; min-width: 300px; }
.wizard strong { display: block; margin: 16px 0 0 0; }
.wizard input { display: block; margin: 4px auto 4px auto; }
.setupbutton { display: inline-block !important; margin: 32px 16px 16px 16px!important; }
.ppquestion strong { display: inline; }
#create_book_notif { width: 280px; margin: 0 auto; }
.createbooknotifbox { margin: 16px auto; width: 300px; position: relative; }
.create_book_loader { position: absolute; top: -67px; right: -28px; }
.bookcreated { text-align: center; }
.pepekuuserbutton { display: block; position: relative; width: 280px; margin: 0 auto; padding: 0; }
.pepekuimporbutton { display: block; position: relative; width: 290px; margin: 0 auto; padding: 0; }
.pepekuimporbutton input { margin: 32px 2px !important; }
.loginpepeku_loader { position: absolute; top: 128px; right: -8px; top: 34px; display: none; }
#loginpepeku_notif { max-width: 600px; margin: 0 auto; }
#loginpepeku_notif a { color: #F90; }
.pepekuimpor strong { display: inline; }
#imporpepeku_notif .notifyes { background: #2e3b49 !important; } 
.loginpepeku_loader2 { padding-bottom: 16px; }

/* Left Menu */
.navleft {
	width: 240px;
	background: #353535;
	padding: 8px 0 48px 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	box-shadow: 0 0 4px #757575;
	border-radius: 0 0 8px 0;
}
.navblock { color: #d1d1d1; font-size: 14px; line-height: 18px; }
.navtitle {
	padding: 8px 0 8px 60px;
	color: #cfd6d9;
	font-size: 16px;
	line-height: 20px;
	box-shadow: 0 4px 4px #333;
	cursor: pointer;
	background-color: #5d5d5d;
	background-repeat: no-repeat;
	background-position: 16px 4px;
}
.navtitle:hover { background-color: #222222; }
#navtitle_user {  background-image: url(gambar/icon_user.png); }
#navtitle_bukukas {  background-image: url(gambar/icon_bukukas.png); }
#navtitle_asset {  background-image: url(gambar/icon_asset.png); }
#navtitle_laporan {  background-image: url(gambar/icon_laporan.png); }
#navtitle_peralatan { background-image: url(gambar/icon_tool.png); }
#navtitle_pengaturan { background-image: url(gambar/icon_option.png); }
.navblock ul { display: block; }
.navblock ul li { background: #353535 url(gambar/dot.png) 16px 17px no-repeat; border-bottom: 1px solid #414141; color: #d1d1d1; display: block; }
.navblock ul li:hover, .navblock ul li.plus:hover, .navblock ul li.current_menu { background-color: #191f24; }
.navblock ul li.plus { background: #353535 url(gambar/plus.png) 16px 9px no-repeat; }
.navblock ul li.plus a { font-size: 12px; line-height: 16px; color: #a1a1a1; padding: 4px 0 4px 32px; }
.navblock ul li.plus a:hover { color: #FFF; text-decoration: none; }
.navblock ul li.search { background-image: url(gambar/cari_kecil.png); background-position: 16px 9px; background-repeat: no-repeat; }
.navblock ul li.search a { font-size: 12px; line-height: 16px; color: #a1a1a1; padding: 4px 0 4px 32px; }
.navblock ul li.search a:hover {
	color: #FFF;
	background-color: #191f24;
	background-image: url(gambar/cari_kecil.png);
	background-position: 16px 9px;
	background-repeat: no-repeat;  
}
.navblock ul li a { color: #d1d1d1; font-size: 14px; line-height: 18px; display: block; padding: 12px 0 12px 32px; }
.navblock a:hover { color: #FFF; text-decoration: none; }
#navitem_user { background: #353535; padding: 10px 10px 18px 16px; }
.usernav a { background: #B1B5B8; color: #2c3e50; padding: 2px 8px; margin: 0 4px 0 0; border-radius: 4px; font-size: 11px; line-height: 15px; }
.usernav a:hover { text-decoration: none; background: #DADADA; color: #1C2630; }
.navusername { padding: 0 10px 8px 4px; font-size: 14px; line-height: 18px; font-weight: 300; text-transform: capitalize; }

/* Buku Kas */
.blockright { padding: 8px 8px 8px 240px; }
.bloktengah { margin: 0 auto; width: 90%; min-width: 640px; min-height: 500px; }
.kastitle { float: left; width: 48%; }
.kasicon { float: left; width: 64px; height: 64px; overflow: hidden; }
.kastitlekanan { float: left; width: 80%; color: #2e3b49; }
.judulkas { font-size: 30px; line-height: 36px; font-weight: 300; padding: 8px 0 0 0; text-shadow: 1px 1px 1px #FFF; text-transform: capitalize; }
.desckas { padding: 4px 0 0 0; text-shadow: 1px 1px 1px #FFF;  }
.kassaldo {
	float: right;
	width: 40%;
	text-align: right;
	font-size: 14px;
	line-height: 24px;
	color: #2c3e50;
	text-shadow: 1px 1px 1px #FFF;
}
.thebalance { font-size: 32px; font-weight: 300; padding-bottom: 8px; padding-top: 4px; }
.kasbody { padding: 28px 0 0 0; }
.kastop { padding: 16px 4px 8px 4px; }
.bukutop { background: url(gambar/kas_date.png) repeat-x center bottom; height: 52px; position: relative; }
.searchbukutop { border-radius: 8px 8px 0 0; background: #939393; text-align: right; padding: 16px 14px 0 0; }
.searchbukutop select { padding: 7px; }
.searchbukutop #find_search { padding: 9px 6px; }
.kastool { height: 52px; background: #FFF url(gambar/kas_line.png) left bottom no-repeat; float: right; width: 542px; }
.moonleft { background: url(gambar/kas_line_2.png) left bottom no-repeat; height: 52px; float: left; width: 200px; position: relative; }
.kasrightborder { float: right; width: 14px; height: 52px; background: url(gambar/kas_line_3.png) right top no-repeat; }
.kasdown { position: absolute; top: -30px; right: 4px; width: auto; }
.kasdown a:hover { text-decoration: none; }
.utangdetildown { top: -62px; }
.kasdown img { opacity: 0.4; cursor: pointer; }
.kasdown img:hover { opacity: 1; }
.bulankas { padding: 16px 0 0 24px; font-size: 18px; line-height: 24px; font-weight: 300; display: block; color: #ffffff; }
.bulannav { width: 80px; height: 32px; text-align: center; float: right; margin: 16px 0 0 0; }
.bulannav a { display: inline-block; width: 21px; height: 24px; margin: 0 8px; }
.bulannav a:hover { text-decoration: none; }
.bulannav .bulan_nav_left { background: url(gambar/bulan-nav-left.png) center top no-repeat; }
.bulannav .bulan_nav_left:hover { background: url(gambar/bulan-nav-left.png) center bottom no-repeat; }
.bulannav .bulan_nav_right { background: url(gambar/bulan-nav-right.png) center top no-repeat; }
.bulannav .bulan_nav_right:hover { background: url(gambar/bulan-nav-right.png) center bottom no-repeat; }
.kasbutton {
	float: right;
	display: block;
	background: #CC0;
	border-radius: 4px;
	padding: 8px 16px 8px 42px;
	font-size: 13px;
	line-height: 18px;
	color: #fff;
	margin: 8px 0 0 10px;
	cursor: pointer;
}
.kasbutton:hover { text-decoration: none; }
.kastool #pengeluaran { background: url(gambar/button_pengeluaran.png) 10px 4px no-repeat #6d4a55; }
.kastool #pemasukan { background: url(gambar/button_pemasukan.png) 10px 4px no-repeat #425755; }
.kastool #transfer { background: url(gambar/button_transfer.png) 10px 4px no-repeat #526471; }
.kastool #pengeluaran:hover { background: url(gambar/button_pengeluaran.png) 10px 4px no-repeat #640000; }
.kastool #pemasukan:hover { background: url(gambar/button_pemasukan.png) 10px 4px no-repeat #004708; }
.kastool #transfer:hover { background: url(gambar/button_transfer.png) 10px 4px no-repeat #00386c; }
.bukutengah { background: #FFF; margin: 0 4px; padding: 16px 1px; position: relative; border-radius: 0 0 8px 8px; min-height: 360px; }
.bukubeli { background: #FFF; margin: 0 4px; padding: 16px 1px; position: relative; border-radius: 4px; border: 1px solid #aaaaaa; }
.tabbg { position: absolute; width: 101%; background: #2E3B49; height: 37px; top: 57px; left: -0.5%; box-shadow: 0 0 4px #999; }
.listmasuk { background: #e0ffe3; }
.listkeluar { background: #ffeaea; }
.listtrans { background: #d6eff9; }
.catatleft { float: left; width: 100px; }
.catatright { float: right; width: auto; width: 359px; }
.catatitem { height: 36px; border-bottom: 1px dotted #797979; color: #272727; }
.catatitem select { padding: 2px 4px; max-width: 95%; }
.catatleft .catatitem { padding: 13px 0 0 8px; height: 27px; }
.catatright .catatitem { height: 34px; padding: 6px 0 0 8px; }
.catat {
	width: 460px;
	border: 2px solid #FFF;
	border-radius: 4px;
	padding: 16px 16px 20px 16px;
	margin: 0 10px 16px 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 50;
	box-shadow: 0 0 28px #000;
	display: none;
}
.catat_pengeluaran { background: #ffdfdf; }
.catat_pemasukan { background: #daf5db; }
.catattipe { color: #FFF; margin-bottom: 8px; }
.catat_pengeluaran .catattipe { background: #972e2e; }
.catat_pemasukan .catattipe { background: #466b34; }
.catatbutton { text-align: right; padding: 10px 6px 0 0; position: relative; }
#trans_batal, .trans_hapus { background: #6e7b89 !important; border: 1px solid #6e7b89 !important; }
#trans_batal:hover, .trans_hapus:hover { background: #1c2630 !important; }
.catatleft #itemdesc { height: 59px; }
.catatright #itemdesc { height: 66px; }
#itemdesc textarea { width: 335px; height: 48px; font-size: 12px; line-height: 16px; }
.catat_loader { position: absolute; right: 200px; top: 14px; display: none; }
.kapital, .capitalize, .capital { text-transform: capitalize !important; }
.glow:hover { border-radius: 2px; box-shadow: 0 0 4px #575757; background: #FFF; }
.trans_hapus { float: left; display: none; }
.tanya_hapus { padding: 4px 16px; background: #930; border-radius: 4px; display: inline-block; margin: 8px 0 0 0; cursor: pointer; }
.tanya_hapus:hover { background: #440400; }
#catat_trans_transfer { background: #e9f9ff; }
.catattipe { background: #006289; }
.catattipefix { padding: 13px 0 0 8px !important; height: 27px !important; }
.blockred { background: #FFDFDF; position: relative; }
.blockgreen { background: #DAF5DB; position: relative; }
.transfersimbol { position: absolute; display: block; width: auto; height: auto; right: 8px; top: 8px; }
.transfernoactive { background-color: #bababa !important; cursor: default; }
.smallsaldo { font-size: 11px; color: #999; }
.catatarea { position: relative; }
.sharebox { background: #D4D4D4; margin: 24px 4px 0 4px; border-radius: 4px; }
.preshare {
	float: left;
	padding: 14px 16px;
	background: #7d7d7d;
	color: #D4D4D4;
	font-size: 16px;
	line-height: 20px;
	border-radius: 4px 0 0 4px;
	margin-right: 12px;
}
.addthis_sharing_toolbox { padding: 8px 8px 4px; clear: none !important; }
.bukutengah .tabdesc { font-size: 12px; line-height: 16px; }
.noticefirst {
	text-align: center;
	background: #2c3e50;
	padding: 8px;
	color: #FFF;
	font-size: 13px;
	line-height: 18px;
	border-radius: 4px;
	margin: 24px 3px 0 3px;
	border: 1px solid #FFF;
	box-shadow: 0 0 4px #999;
	display: none;
}

/* OPTION */
.mainicon { float: left; height: 52px; overflow: hidden; width: 52px; margin: 10px 20px 0 0; }
.option_bookbox {
	float: left;
	background: #FFF;
	width: 248px;
	height: 162px;
	border-radius: 8px;
	padding: 16px;
	margin: 0 16px 16px 0;
	border: 2px solid #FFF;
	position: relative;
}
.option_bookbox:hover { box-shadow: 0 0 4px #999; }
.option_bookicon { float: left; height: 120px; width: 64px; }
.option_booktext { float: left; width: 176px; }
.option_booktitle { font-size: 16px; font-weight: 300; line-height: 22px; }
.option_bookdesc { font-size: 10px; line-height: 14px; }
.option_booktop { padding-bottom: 8px; border-bottom: 1px solid #999; }
.option_bookdown { font-size: 11px; line-height: 16px; padding: 8px 0 0 0; }
.new_book img { display: block; margin: 32px auto 0 auto; }
.new_book { border: 2px solid #C2C2C2; background: #f4f4f4; }
.kas_detil h2 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: #274A70;
	text-shadow: 1px 1px 1px #FFF;
	padding-bottom: 8px;
	border-bottom: 1px dotted #999999;
	margin-bottom: 16px;
}
.kas_detil h2 {
    border-bottom: 1px dotted #999999;
    color: #274a70;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    text-shadow: 1px 1px 1px #fff;
}
.h3katbox {
	font-size: 18px;
	line-height: 24px;
	padding: 0 0 4px 0;
	margin: 0 0 12px 0;
	border-bottom: 1px dotted #999999;
	font-weight: 700;
}
.katbox { width: 48%; float: left; margin: 0 16px 0 0; position: relative; }
.ordbox {   margin: 0; position: relative; }
.katedit { float: right; width: 52px; text-align: right; padding: 0 16px 0 0; }
.tabbay { float: left;  text-align: left; padding: 0 16px 0 0; }
.totbay { float: right;  text-align: right; padding: 0 16px 0 0; }
.katnamebox { margin: 0 0 8px 0; padding: 0 0 4px 0; border-bottom: 1px dotted #CCC; position: relative; }
.katname { margin: 4px 0 0 0; display: inline-block; }
.katbutton { float: right; width: 100px; text-align: right; margin-top: -10px; }
.newcat { margin-top: 32px; border: 1px solid #c9c9c9; padding: 8px; border-radius: 4px; }
.newkatname { padding-bottom: 6px; }
.option_back { float: right; display: block; width: 102px; margin: -8px 0 0 0; }
.loader_newkat { position: absolute; right: 110px; top: 28px; display: none; }
.katnamedit { display: none; }
.cateditbutton { padding: 3px 8px 4px 8px !important; border-radius: 4px !important; }
.renamekat_loader { position: absolute; right: 8px; top: -2px; display: none; }
.katdel {
	background: #990000;
	color: #FFF;
	line-height: 16px;
	padding: 16px;
	border-radius: 4px;
	border: 1px solid #FFF;
	box-shadow: 0 0 4px #333;
	display: none;
	position: relative;
}
.katdel_loader { position: absolute; left: 270px; bottom: 20px; display: none; }
.nocat { line-height: 20px; text-align: center; }
a.kat_prem_button { margin: 8px 0 8px 0; display: inline-block; color: #FFF !important; }
.taboption { width: 96%; }
.taboption td { padding: 8px 16px; border-bottom: 1px dotted #999999; }
.noborder td { border: none; }
.kas-submit { position: relative; }
#kas_loader { position: absolute; left: 100px; top: 4px; display: none; }
.optionwrap { padding: 24px 24px 32px 24px; position: relative; border-radius: 4px; border: 1px solid #aaaaaa; font-size: 14px; line-height: 18px; background: #FFF; }
.optionbookbuttonarea { position: absolute; width: 100%; bottom: 4px; left: 0; }
.bookbuttonedit { display: block; float: right; padding: 4px 8px !important; margin: 0 4px 0 0; }
.deficon { margin: 0 4px 0 8px; }
.kasikonoption { border-radius: 14px; border: 1px solid #FFF; background: #FFF; }
.kasikonoption:hover { box-shadow: 0 0 2px #1e1e1e; }
.bukasloader { position: absolute; left: 84px; bottom: 2px; display: none; }
.notifkasoption { position: absolute; z-index: 5; width: 100%; left: 0; bottom: -14px; font-size: 12px; line-height: 16px; }
.savearea { text-align: right; padding-top: 16px; position: relative; }
#main_notif { float: left; width: 50%; }
#main_loader { position: absolute; right: 128px; bottom: 4px; display: none; }
.ketchild p { font-size: 13px; line-height: 17px; }
.childuserbox { margin-top: 48px; position: relative; min-height: 300px; }
#childuserlist { font-size: 15px; color: #3f3f3f !important; }
.childuser {
	width: 240px;
	height: 100px;
	float: left;
	border: 1px solid #999;
	border-radius: 8px 8px 0 0;
	padding: 8px;
	margin: 8px;
	position: relative;
	background: #FFF;
}
.childicon { float: left; width: 48px; height: 48px; padding: 8px; background: #CCC; }
.childtext { float: right; width: 164px; position: relative; }
.childname { font-weight: 700; text-transform: capitalize; padding-bottom: 4px; border-bottom: 1px dotted #999999; font-size: 13px; }
.childmail { font-size: 11px; color: #878787; margin-top: 5px; }
.childrole { font-size: 12px; color: #878787; font-style: italic; }
.childuserbutton { padding: 1px 8px !important; font-size: 13px; }
.childedit { background: #CCC; padding: 6px; text-align: right; position: absolute; left: 0; bottom: 0; width: 244px; }
.addchild { position: absolute; right: 0; top: -6px; padding: 4px 8px !important; font-size: 13px; display: block; }
.addchild:focus, .addchild:active { top: -5px !important; right: 0 !important; position: absolute !important; }
.newchild {
	border: 1px solid #999;
	border-radius: 4px;
	z-index: 10;
	padding: 16px;
	/* display: none; */
	margin: 24px 0;
}
#childloader { position: absolute; left: 210px; bottom: 4px; display: none; }
.notifchilddel { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; }
.notifchilddel span { margin: 0; }
.childlistloader { position: absolute; right: 0; top: 0; display: none; }
.childboxleft { float: left; width: 420px; }
.childboxright { float: left; }
.childsubmitbox { padding: 16px 0 0 0; }
.custombox { border-top: solid 1px #CCC; margin-top: 16px; }
.cashopt { padding: 0 0 0 48px; }
.custcek { padding: 4px 0; border-bottom: solid 1px #CCC; }
.childsubmitbox { position: relative; }

/* DATA TABLES */
table.dataTable {  width: 100%; margin: 0 auto 16px auto; clear: both; border-collapse: separate; border-spacing: 0; }
table.dataTable thead th, table.dataTable tfoot th { color: #d1d1d1; font-weight: 300; font-size: 14px; }
table.dataTable thead th, table.dataTable thead td { padding: 10px 18px; border-bottom: 1px solid #111111; }
table.dataTable thead th:active, table.dataTable thead td:active { outline: none; }
table.dataTable tfoot th, table.dataTable tfoot td { padding: 10px 18px 6px 18px; }
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting { cursor: pointer; *cursor: hand; }
table.dataTable thead .sorting { background: #2e3b49 url("gambar/sort_both.png") no-repeat center right; }
table.dataTable thead .sorting_asc { background: #2e3b49 url("gambar/sort_asc.png") no-repeat center right; }
table.dataTable thead .sorting_desc { background: #2e3b49 url("gambar/sort_desc.png") no-repeat center right; }
table.dataTable thead .sorting_asc_disabled { background: #2e3b49 url("gambar/sort_asc_disabled.png") no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: #2e3b49 url("gambar/sort_desc_disabled.png") no-repeat center right; }
table.dataTable tbody tr.selected { background-color: #b0bed9; }
table.dataTable tbody th, table.dataTable tbody td { padding: 8px; vertical-align: middle; font-size: 14px; line-height: 18px; }
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td,
table.dataTable.display tbody th, table.dataTable.display tbody td { border-top: 1px solid #FFF; }
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td { border-top: none; }
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { border-top: 1px solid #dddddd; border-right: 1px solid #dddddd; }
table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child { border-left: 1px solid #dddddd; }
table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td { border-top: none; }
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected { background-color: #abb9d3; }
table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover, table.dataTable.display tbody tr.even:hover { background-color: whitesmoke; }
table.dataTable.hover tbody tr:hover.selected, table.dataTable.hover tbody tr.odd:hover.selected,
table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected,
table.dataTable.display tbody tr.odd:hover.selected, table.dataTable.display tbody tr.even:hover.selected { background-color: #a9b7d1; }
table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 { background-color: #f9f9f9; }
table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 { background-color: #acbad4; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { background-color: #f1f1f1; }
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 { background-color: #f3f3f3; }
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 { background-color: whitesmoke; }
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 { background-color: #a6b3cd; }
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 { background-color: #a7b5ce; }
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 { background-color: #a9b6d0; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { background-color: #f9f9f9; }
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 { background-color: #fbfbfb; }
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 { background-color: #fdfdfd; }
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 { background-color: #acbad4; }
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 { background-color: #adbbd6; }
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 { background-color: #afbdd8; }
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.display tbody tr.odd:hover > .sorting_1,
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 { background-color: #eaeaea; }
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.display tbody tr.odd:hover > .sorting_2,
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 { background-color: #ebebeb; }
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.display tbody tr.odd:hover > .sorting_3,
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3, table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 { background-color: #eeeeee; }
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
  	background-color: #a1aec7; }
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 {
  	background-color: #a2afc8; }
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
  	background-color: #a4b2cb; }
table.dataTable.no-footer { border-bottom: 1px solid #111111; }
table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: nowrap; }
table.dataTable.compact thead th, table.dataTable.compact thead td { padding: 5px 9px; }
table.dataTable.compact tfoot th, table.dataTable.compact tfoot td { padding: 5px 9px 3px 9px; }
table.dataTable.compact tbody th, table.dataTable.compact tbody td { padding: 4px 5px; }
table.dataTable th.dt-left, table.dataTable td.dt-left { text-align: left; }
table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty { text-align: center; }
table.dataTable th.dt-right, table.dataTable td.dt-right { text-align: right; }
table.dataTable th.dt-justify, table.dataTable td.dt-justify { text-align: justify; }
table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap { white-space: nowrap; }
table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left { text-align: left; }
table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center { text-align: center; }
table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right { text-align: right; }
table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify { text-align: justify; }
table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap { white-space: nowrap; }
table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left { text-align: left; }
table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center { text-align: center; }
table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right { text-align: right; }
table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify { text-align: justify; }
table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap { white-space: nowrap; }
table.dataTable, table.dataTable th, table.dataTable td { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.dataTables_wrapper { position: relative; clear: both; *zoom: 1; zoom: 1; }
.dataTables_wrapper .dataTables_length { float: left; margin: 0 0 16px 20px; font-size: 12px; font-weight: 300; color: #8e8e8e; }
.dataTables_wrapper .dataTables_length select { font-size: 12px; padding: 2px; }
.dataTables_wrapper .dataTables_filter { float: right; text-align: right; margin-bottom: 16px; font-size: 12px; }
.dataTables_wrapper .dataTables_filter input {
	border-radius: 4px;
	font-size: 12px;
	border: 1px #999 solid;
	background: url(gambar/search.png) 3px 4px no-repeat #e3e3e3;
	margin: 0 8px 0 0;
	padding: 2px 2px 2px 24px;
	width: 142px;
}
.dataTables_wrapper .dataTables_filter input:hover { border: 1px #333 solid; background: url(gambar/search.png) 3px 4px no-repeat #efefef; }
.dataTables_wrapper .dataTables_filter input { margin-left: 0.5em; }
.dataTables_wrapper .dataTables_info { clear: both; float: left; margin: 0 0 0 20px; }
.dataTables_wrapper .dataTables_paginate { float: right; text-align: right; margin: -4px 20px 0 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
 	box-sizing: border-box;
  	display: inline-block;
  	min-width: 1.5em;
  	padding: 2px 2px;
  	margin-left: 2px;
  	text-align: center;
  	text-decoration: none !important;
 	cursor: pointer;
  	*cursor: hand;
  	color: #333333 !important;
  	border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  	color: #333333 !important;
  	border: 1px solid #cacaca;
  	background-color: white;
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
  	background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
  	background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
  	background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
  	background: -o-linear-gradient(top, white 0%, gainsboro 100%);
  	background: linear-gradient(to bottom, white 0%, gainsboro 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
 	cursor: default;
  	color: #8e8e8e !important;
  	border: 1px solid transparent;
  	background: transparent;
  	box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  	color: white !important;
  	border: 1px solid #111111;
  	background-color: #585858;
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
  	background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
  	background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
  	background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
  	background: -o-linear-gradient(top, #585858 0%, #111111 100%);
  	background: linear-gradient(to bottom, #585858 0%, #111111 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  	outline: none;
  	background-color: #2b2b2b;
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
  	background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  	background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  	background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  	background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  	background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  	box-shadow: inset 0 0 3px #111;
}
.dataTables_wrapper .dataTables_processing {
  	position: absolute;
  	top: 50%;
  	left: 50%;
 	width: 100%;
  	height: 40px;
  	margin-left: -50%;
  	margin-top: -25px;
  	padding-top: 20px;
  	text-align: center;
  	font-size: 1.2em;
  	background-color: white;
  	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
  	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
  	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: #8e8e8e; font-size: 12px; }
.dataTables_wrapper .dataTables_scroll { clear: both; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { *margin-top: -1px;  -webkit-overflow-scrolling: touch; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing { height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid #111111; }
.dataTables_wrapper.no-footer div.dataTables_scrollHead table,
.dataTables_wrapper.no-footer div.dataTables_scrollBody table { border-bottom: none; }
.dataTables_wrapper:after { visibility: hidden; display: block;content: ""; clear: both; height: 0; }
th.sorting_disabled { background: #2E3B49; }

/* REPORT */
.bodyreport { background: #FFF; padding: 8px; border-radius: 8px; min-height: 360px; }
.selectcashbar { border-radius: 8px; padding: 8px 16px; margin: 8px 0 16px 0; background: #e2e2e2; box-shadow: 1px 1px 2px #999 inset; position: relative; height: 32px; }
#bulannavreport { margin: 24px 16px 0 0; }
.reportbulanarea { width: 50%; background: #818181; position: absolute; bottom: 0; right: 8px; height: 72px; border-radius: 6px 6px 0 0; }
#bulankasreport { float: left; width: 50%; padding: 24px 0 0 28px; font-size: 22px; }
.h3report {
	font-size: 24px;
	color: #2c3e50;
	line-height: 28px;
	padding: 16px 0 4px 12px;
	margin: 0 0 24px 0;
	border-bottom: 1px dotted #818181;
	background: #e6e6e6;
	border-radius: 8px 8px 0 0;
}
.tabreport { width: 98%; border-bottom: 1px dotted #c7c7c7; }
.tabreport td { padding: 8px; border-top: 1px dotted #c7c7c7; line-height: 18px; vertical-align: middle; }
.reportleft { float: left; width: 48%; }
.reportright { float: right; width: 48%; }
.saldoawak { margin: 48px 0 0 0; }
.line { border-top: 1px solid #333 !important; border-bottom: 1px solid #333 !important; font-weight: 700; background: #f2f2f2; }
.linetop { border-top: 1px solid #333 !important; font-weight: 700; }
.noline { border: none !important; }
.strong { font-weight: 700;}
#allcash { margin: 4px 0 0 0; }
.reportbox { padding: 32px 0; }
.exin { margin: 32px 0 0 0; }
.notifreport {
	font-size: 20px;
	line-height: 26px;
	padding: 72px 0;
	text-align: center;
	color: #c0c0c0;
}
.tduang { width: 96px; }
.tdmatauang { width: 32px; }
.tdtanggal { width: 172px; }
.reportblank { text-align: center; color: #a6a6a6; }
.premtransfer { text-align:center; line-height: 18px; }
.annualbox { border: 1px solid #aaaaaa; border-radius: 4px; padding: 1.2em 1.6em; }
.tdplusmin { width: 18px; }
.tdgray { background: #F2F2F2; }
.folderreport { cursor: pointer; position: relative; top: 1px; }
.subreport {
	font-size: 12px;
	line-height: 16px;
	width: 70%;
	background: #e8e8e8;
	color: #4d4d4d;
}
.subreport td { padding: 2px 4px; }
.hover:hover { text-decoration: underline; }
.iconreport { position: relative; top: 1px; }
.loadnotif {
	text-align: center;
	padding: 32px 16px;
	width: 240px;
	background: #FFF;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -60px 0 0 -120px;
	border-radius: 8px;
	box-shadow: 0 0 32px #000;
	z-index: 100;
}
.reportloadtext { padding: 16px 0 8px 0; }
.reportarea { min-height: 480px; }

/* NOTES */
#bodynotes { padding-top: 36px; }
.daftarnotes { display: none; font-size: 9px; line-height: 11px; }
.smallnote {
	width: 148px;
	height: 148px;
	margin: 8px;
	float: left;
	background-image: url(gambar/head-note.png);
	background-position: left top;
	background-repeat: no-repeat;
	border: 1px solid #bfbfbf;
	position: relative;
	cursor: pointer;
}
.smallnote:hover { box-shadow: 0 0 6px #959595; border: 1px solid #FFF; }
.isinote {
	padding: 8px 8px 54px 8px;
	margin: 16px 0 0 0;
	background: url(gambar/ujung-note.png) no-repeat right bottom;
	height: 70px;
	font-family: 'Delius', cursive;
	font-size: 12px;
	line-height: 16px;
	color: #5e5e5e;
}
.noteyellow { background-color: #f3db6e; }
.notered { background-color: #ffaeac; }
.notegreen { background-color: #c1de98; }
.noteblue { background-color: #9ee2f5; }
.notegrey { background-color: #cbcbcb; }
.notewhite { background-color: #ffffff; }
.popnotebg {
	background: rgba(133,133,133,0.5);
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
.popnote { width: 300px; min-height: 300px; margin: 96px auto 0 auto; }
#notearea, #notearea:hover, #notearea:focus {
	background: none;
	border: none;
	resize: none;
	box-shadow: none;
	width: 274px;
	height: 280px;
	padding: 12px;
	font-family: 'Delius', cursive;
	font-size: 14px;
	line-height: 20px;
}
.noteleft { float: left; width: 132px; margin-left: 8px; }
.noteright { float: right; width: 148px; text-align: right; padding: 0 8px 0 0; }
.noteright input[type="button"] { padding: 5px 14px; }
.notebottom { padding: 8px 0; background: rgba(255,255,255,0.4); position: relative; }
.headnote { height: 32px; background: rgba(102,102,102,0.5); }
#thenote { border: 1px solid #FFF; position: relative; }
.imgnewnote { width: 48px; height: 48px; position: relative; top: 56px; display: block; margin: 0 auto; }
.closenote { position: absolute; left: 4px; top: 4px; cursor: pointer; transition: ease-in 0.2s; }
.downnote { position: absolute; right: 5px; top: 5px; cursor: pointer; transition: ease-in 0.2s; }
.closenote:hover { top: 3px; }
.downnote:hover { top: 4px; }
.closenote:active { top: 4px; }
.downnote:active { top: 5px; }
.noteloader {
	border-radius: 16px;
	position: absolute;
	top: -40px;
	right: 8px;
	display: none;
}
.notifcatatan { margin: 48px auto 0 auto; display: none; }
#delnotebutton { padding: 7px 4px 2px 7px; position: relative; top: 3px; right: 24px; }
.notifnotedel {
	position: absolute;
	top: -46px;
	width: 100%;
	left: 0;
	color: #FFF;
	text-align: center;
	margin: 0;
}
.notifnotedel .tanya_hapus { margin: 0; }
.taboptaccount { width: 98%; }
.taboptaccount td { padding: 6px; }
.download { float: right; width: 100px; margin: 36px 0 0 0; text-align: right; }
.download img { margin: 0 2px; cursor: pointer; opacity: 0.5; }
.download img:hover { opacity: 1; }
.download a, .download a:hover { text-decoration: none }

/* Footer */
footer { padding: 24px 0 16px 0; }
footer, footer a { text-align: center; font-size: 11px; line-height: 16px; color: #858585; }
footer a:hover { color: #3b3b3b; text-decoration: underline; }
.copyright { padding: 4px 0 0 0; }

/* Ads */
.boxads { height: auto; background: #FFFFFF; margin: 0 4px; padding: 16px 0 0 0; }
.adsarea {
	background: #253343;
	padding: 4px;
	margin: 0 8px;
	border-radius: 4px;
	overflow: hidden;
	min-height: 24px;
	box-shadow: 0 0 4px #333 inset;
}
.boxadsreport {
	min-height: 24px;
	background: #253343;
	margin-bottom: 16px;
	border-radius: 4px;
	box-shadow: 1px 1px 2px #999 inset;
	padding: 4px;
	overflow: hidden;
}
/* Upgrade */
.top { position: relative; }
.pricelabel {
	float: right;
	position: relative;
	right: -32px;
	top: -40px;
	display: block;
	z-index: 2;
}
.upgradewrap { padding: 24px 0 32px 0 !important; }
.toptext {
	font-weight: 300;
	text-align: right;
	float: right;
	position: relative;
	top: 36px;
	right: -34px;
	width: 360px;
}
.firsttext { font-size: 46px; color: #2c3e50; line-height: 54px; padding-right: 16px; }
.secondtext { font-size: 20px; color: #7f7f7f; line-height: 28px; padding-top: 4px; }
.htop {
	display: block;
	padding: 18px 0 18px 32px;
	color: #FFF;
	font-weight: 300;
	background: #a4aaac;
	font-size: 46px;
	position: relative;
	top: -34px;
	line-height: 50px;
	margin-top: 40px;
}
.feature {
	width: 40%;
	height: 124px;
	background: #f3f3f3;
	border-radius: 8px;
	box-shadow: -2px 2px 4px #999 inset;
	float: left;
	margin: 0 4.8% 76px 4.8%;
	position: relative;
}
.featuretext { width: 52%; margin: 14px 0 0 45%; color: #2c3e50; }
p { padding: 8px 0; font-size: 13px; line-height: 18px; }
h4 { font-size: 14px; font-weight: 700; }
.feature img { display: block; position: absolute; top: -48px; left: -22px; }
#featdown { height: 182px; }
.boxfeature { padding-top: 54px; }
.subscribe { font-size: 14px; background: #969fa2; 
padding: 50px 0 18px 32px; color: #FFF; 
margin-top: -64px; display:block;
 }
.bigsubs { font-size: 46px; font-weight: 300; line-height: 50px; }
.upgradebox { padding: 32px 0; }
.upgrade {
	width: 18.5%;
	height: auto;
	position: relative;
	float: left;
	margin: 8px 3%;
}
.upgrade .bgup { width: 100%; height: auto; }
.price {
	position: absolute;
	width: 100%;
	font-size: 24px;
	text-align: center;
	color: #FFF;
	top: 26px;
}
.upgrade .button {
	position: absolute;
	width: 78%;
	bottom: 20px;
	left: 10%;
	text-align: center;
	font-weight: 700;
	font-size: 24px;
	padding: 8px 0;
	display: block;
}
.upgrade .button:focus, .upgrade .button:hover { position: absolute; bottom: 21px; top: auto; }
#save10 { position: absolute; right: -32px; top: -20px; }
#save12 { position: absolute; right: -40px; top: -28px; }
.subscribe .butupgrade { margin: 4px 16px 0 0; display: block; float: right; }
.loginfirst { text-align: center; font-size: 16px; line-height: 22px; padding: 24px 0; }
.backarea { background: #CCC; padding: 8px 16px; }
h2.thanks { font-size: 28px; line-height: 36px; padding: 36px 0 16px 0; }
.thanksbox .backcash { display: block; margin: 32px auto 16px auto; }
.thanksbox p, .thanksbox h2 { text-align: center; }
.underline:hover { text-decoration: underline; }
.userbox div { float: right; }
.boxusername {
	border-right: 1px solid #1b2735;
	color: #B1B5B8;
	font-style: italic;
	width: auto;
	padding: 18px 16px 0 0;
	height: 28px;
}
.boxstatus { height: 40px; padding: 8px 10px 0 10px; border-left: 1px solid #394d63; border-right: 1px solid #1b2735; cursor: pointer; }
.boxstatus:hover { background: #081320; }
.statusdesc {
	position: absolute;
	width: 248px;
	height: auto;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 4px;
	padding: 16px;
	font-size: 12px;
	line-height: 16px;
	top: 72px;
	right: 16px;
	display: none;
}
.closestdesc { position: absolute; right: -8px; top: -8px; cursor: pointer; }
.boxlogout { padding: 8px 10px 0 10px; border-left: 1px solid #394d63; border-right: 1px solid #1b2735; height: 40px; }
.logoutlink { display: block; width: 32px; height: 32px; background: url(gambar/icon_logout.png) no-repeat center top; margin: 0 auto; }
.logoutlink:hover { background: url(gambar/icon_logout.png) no-repeat center bottom; }
.pricesmall {
	font-size: 13px;
	text-decoration: line-through;
	position: absolute;
    text-align: center;
	top: 8px;
	width: 100%;
	color: rgba(255,255,255,0.6);
}
.plwupgrade {
	text-align: center;
	font-size: 24px;
	background: #E9F9FF;
	padding: 8px 0;
	color: #03638A;
	display: none;
}
.plwtext { position: relative; top: -6px; }
.upgradebody { line-height: 18px; }
.konfirmasi { padding: 26px; }
.konfirmasi input, .konfirmasi select { margin: 4px 0; }
.konfirmnotif { position: relative; padding-top: 16px; }
.konfirmloader { position: absolute; left: 160px; top: 22px; display: none; }
#notifkonfirm { max-width: 460px; }

/* Invoice */
.compinput { float: left; }
.invoiceline input { margin: 2px 0; }
.invleft { float: left; max-width: 48%; }
.inright { float: right; max-width: 48%; }
#invoiceline_1 .inright { text-align: right; }
.invoiceline { border-bottom: 1px solid #CCC; padding: 16px 0; }
.invcoverarea { padding: 8px 0 0 0; position: relative; }
.invcover { position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.5); z-index: 5; top: 0; left: 0; }
.invoiceframe h4 { font-size: 16px; line-height: 24px; }
.invcheck { font-size: 12px; line-height: 16px; }
#invoiceline_2 .invleft { padding-top: 26px; }
.invtab { border-top: 1px solid #999; }
.invtab th { text-align: center; color: #FFF; background: #6b787b; padding: 8px 0; }
.invtab td { vertical-align: top; padding: 4px; border-bottom: 1px solid #999; }
.invtab td textarea, #invoiceline_4 textarea { font-size: 12px; line-height: 16px; }
.invaddline { text-align: right; padding: 8px 0 24px 0; }
#invtabtotal td { vertical-align: baseline; border-bottom: none; }
#invtabtotal { border-bottom: 1px solid #999; }
.invaddbutton { font-size: 13px !important; line-height: 15px; padding: 4px 8px !important; }
.invtotal { background: #CCC; }
.invact { padding: 8px 16px 8px 32px !important; background-repeat: no-repeat !important; background-position: 8px 9px !important; }
#invsend, .invsend { background-image: url(gambar/invoice-mail.png) !important; }
#invsave { background-image: url(gambar/invoice-save.png); }
#invdown { background-image: url(gambar/invoice-down.png); }
#invrefresh { background-image: url(gambar/invoice-refresh.png); }
.invthid, .invthqty { width: 48px; }
.invdesc { width: 98%; height: 64px; }
.unitthprice, .linetotal, .thlinetotal { width: 128px; }
.tdinvdel { vertical-align: middle !important; background: #e7e7e7 !important; width: 32px; }
.invtotalarea { position: relative; }
.invstampimg { position: absolute; z-index: 8; }
.invstampimg_paid { right: 270px; top:-14px; }
.invstampimg_urgent { right: 400px; top: -14px; }
.invstampimg_past { right: 530px; top: -14px; }
.invstampimg_approved { right: 410px; top: 60px; }
.invstampimg_received { right: 540px; top: 60px; }
.invstampimg_final { right: 670px; top: 60px; }
.complogo { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dotted #CCCCCC; position: relative; }
.uploadbox div, .uploadbox input, .fileupload, .uploadbutton, .uploadbox { cursor: pointer !important; display: block; }
.uploadbox:hover { text-decoration: underline; }
.caldownsmall { display: none; }
.downsmall { display: none; }
.boxdownline { font-size: 12px !important; line-height: 16px !important; }
.ktpdesc { font-size: 12px; line-height: 18px; font-style: italic; }
.uploadbox { width: 240px; position: relative; }
.fileinput-button input { height:34px; font-size: 11px !important; display: block; max-width: 171px; }
.uploadbox .progress {
	height: 16px;
	border: 1px solid #294d77;
	border-radius: 4px;
	background: #D5D5D5;
	width: 150px;
	margin-left: -75px;
	position: absolute;
	top: -72px;
	left: 50%;
	display: none;
}
.uploadbox .progress .progress-bar { background: #294d77; height: 16px; }
.invremoveicon { position: absolute; top: 4px; left: 4px; opacity: 0.5; }
.invremoveicon:hover { opacity: 1; }
#invoiceline_6 { position: relative; }
.invloader { position: absolute; left: 380px; top: 20px; display: none; }
.tdmiddle { vertical-align: middle !important; }
.invediticon { opacity: 0.4; }
.invediticon:hover { opacity: 1; }
.invdelask {
	position: fixed;
	top: 42%;
	left: 50%;
	background: #990000;
	padding: 16px;
	border: 2px solid #FFF;
	border-radius: 8px;
	color: #FFF;
	line-height: 16px;
	box-shadow: 0 0 8px #000;
	width: 260px;
	height: auto;
	text-align: center;
	display: none;
	z-index: 100;
}
.invdelask small { color: #FFF; }
.invdelaskloader { position: absolute; right: 16px; bottom: 14px; display: none; }
.invmailfrom { float: left; width: 320px; }
.invmailto { float: left; width: 280px; }
.invmail {
	padding: 16px;
	margin: 24px 0 0 0;
	border: 1px solid #CCC;
	border-radius: 8px;
	max-width: 720px;
	display: none;
	line-height: 20px;
}
.invmail input[type="text"] { margin-bottom: 4px; }
.invmailbutton { text-align: right; padding-top: 10px; }
.invnoactivebutton {
	background-color: #BABABA;
	margin: 0 4px;
	border: 0;
    border-radius: 6px;
    color: #fff;
	display: inline-block;
	line-height: 21px;
	position: relative;
}
.invoiceframe {  }
#bodyinvoice { padding-top: 36px; min-width: 640px; }
.invbooktab td { border-bottom: 1px solid #CCC; }
.pleaseupgrade {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,0.6);
	top: 0;
	left: 0;
	z-index: 100;
}
.pleaseupgradebox {
	width: 50%;
	height: auto;
	background: #e9e9e9;
	position: fixed;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -25%;
	border-radius: 8px;
	border: 2px solid #FFF;
	box-shadow: 0 0 16px #000;
}
.upgradeinside { margin: 16px 16px 24px 16px; text-align: center; }
.upgradeinside h2 {
	font-size: 32px;
	line-height: 40px;
	font-weight: 300;
	color: #2c3e50;
	padding-bottom: 16px;
}
.upgradetexttop { font-size: 16px; line-height: 24px; padding-bottom: 24px; }
.upgradeinside img { width: 128px; height: auto; }
.upgradetextbottom { padding: 16px 0; line-height: 20px; }
.nowrap { white-space: nowrap; }
.premkonfirm { display: block; float: right; height: 200px; width: auto; }
.konfirmasipem { padding: 32px; }
.h3konfirm { text-align:center; color: #2c3e50; background: #CCC; padding: 8px 0; }
.imgbank { padding: 8px 0; }

/* HAPIUT */
.titlehapiutform, .titleedithapiutform { padding: 8px; border-radius: 4px; }
.alsocat { padding: 8px 0 8px 8px; border-bottom: 1px dotted #797979; color: #272727; }
.kastool #newdebt { background: #6d4a55 url("gambar/button_plus.png") no-repeat scroll 10px 6px; }
.kastool #newdebt:hover { background: url(gambar/button_plus.png) 10px 6px no-repeat #640000; }
.kastool #newcredit { background: #425755 url("gambar/button_plus.png") no-repeat scroll 10px 6px; }
.kastool #newcredit:hover { background: url(gambar/button_plus.png) 10px 6px no-repeat #004708; }
.helphapiut { opacity: 0.6; position: relative; left: -4px; }
.helphapiut:hover { opacity: 1; }
.hapiut_title { font-size: 18px; line-height: 24px; font-weight: 300; }
.hapiut_ket { font-size: 12px; line-height: 15px; color: #656565; }
.kasiconhapiutdetil { height: 94px; width: 116px; position: relative; top: 3px; overflow: visible; }
.edithapiuticon { opacity: 0.4; cursor: pointer; position: relative; bottom: -2px; left: 8px; }
.edithapiuticon:hover { opacity: 1; }
.kastool #debtred { background-color: #6d4a55; background-repeat: no-repeat; background-position: 10px 6px; }
.kastool #debtred:hover { background-color: #640000; }
.kastool .plusdebt { background-image: url(gambar/button_plus.png); }
.kastool #debtgreen { background-color: #425755; background-repeat: no-repeat; background-position: 10px 6px; }
.kastool #debtgreen:hover { background-color: #004708; }
.kastool .mindebt { background-image: url(gambar/button_min.png); }
.kastool #newdebt:hover { background: url(gambar/button_plus.png) 10px 6px no-repeat #640000; }
.edithapiut .catat { right: auto; left: 4px; top: -96px; }
.buttongrey { background: #6e7b89 !important; border: 1px solid #6e7b89 !important; }
.buttongrey:hover { background: #1c2630 none repeat scroll 0 0 !important; }
.notif small { color: #FFF; }
#catat_hpitem { top: 0; right: 0; left: auto; }
.notifdelitem { position: fixed; top: 40%; left: 50%; width: 360px; z-index: 1000; box-shadow: 0 0 32px #333; }
.delhpitemloader { position: absolute; left: 48px; bottom: 8px; display: none; }
.kastoolhapiut { width: 240px; }
.debtdatesmall { display: none; }
.kastoolhapiutdetil { width: 400px; }
.icontophapiut { padding: 8px 0 0 0; }
.kastitlekananhapiut { width: auto; }

/* Lap daily */
.reportbulanarea .lap_tgl {
	font-size: 20px;
	background: #818181;
	color: #ffffff;
	border: none;
	line-height: 26px;
	font-weight: 300;
	text-align: right;
	padding: 0;
	cursor: pointer;
}
.reportbulanarea .lap_tgl:hover,
.reportbulanarea .lap_tgl:focus,
.reportbulanarea .lap_tgl:active {
	background: #818181;
	border: none;
	color: #c4c4c4;
	box-shadow: none;
}
.reportbulanarea .bulankastgl {
	padding: 22px 28px 0 0 !important;
	float: right !important;
	text-align: right;
}
.resetkastitle, .resetkas { color: #8d9295; font-size: 12px; line-height: 16px; }
.resetkas { cursor: pointer; font-style: italic; }
.resetkas:hover { text-decoration: underline; color: #3f3f3f; }
.impor_reset {
	font-size: 12px;
	line-height: 16px;
	padding: 32px 0 0 0;
}
.impor_reset a {
	color: #888888;
}
.impor_reset a:hover {
	color: #3f3f3f;
	text-decoration: underline;
}
.popup {
	width: 360px;
	height: auto;
	position: fixed;
	top: 30%;
	left: 50%;
	margin-left: -150px;
	text-align: center;
	z-index: 500;
	background: #990000;
	padding: 16px;
	color: #FFF;
	line-height: 18px;
	border-radius: 8px;
	border: 2px solid #FFF;
	box-shadow: 0 0 16px #000;
}
.popup small { color: #FFF; }
.popup input[type="button"] { background: #000; }
.popup input[type="button"]:hover { background: #333; }
#appresetloader { position: absolute; right: 24px; top: 100px; display: none; }
#appimporloader { position: absolute; right: 60px; top: 144px; display: none; }
#appprosesloader { position: absolute; right: 32px; top: 172px; display: none; }

/* Pre responsive */
.navbutton {
	position: absolute;
	width: 92px;
	left: 0;
	top: 0;
	font-size: 18px;
	line-height: 24px;
	color: #B1B5B8;
	text-align: center;
	cursor: pointer;
    border-right: 1px solid #394d63;
	height: 36px;
	padding: 12px 0 0 0;
	display: none;
}
.navbutton:hover { background: #081320; color: #FFF; }
.shortdate { display: none; font-size: 16px; }
.sdsmall { font-size: 13px; }
table#bukukas th { background-color: #2E3B49; }
table#taborder th { background-color: #2E3B49; }
.smallbalance { display: none; }
.bottominput { position: fixed; bottom: 0; width: 100%; display: none; }
.bottominput td { text-align: center; height: 38px; vertical-align: middle; }
.bottominput img { height: auto; width: 100%; cursor: pointer; }
.img_transfer { max-width: 102px; }
.img_income { max-width: 142px; }
.img_expense { max-width: 148px; }
.td_img_transfer { background: #526471; }
.td_img_income { background: #425755; }
.td_img_expense { background: #6D4A55; }
.small_bulan_nav_left, .small_bulan_nav_right { display: none; }
.smallogo { display: none; }
.smalltool { display: none; }
.nominaltab { display: none; }
.catlabel { display: none; }
.userlabel { display: none; }
.option_back_small { display: none; }
.kastitlehapiutdetil { width: 52%; }
.alwidget img { width: 1px; height: 1px; }

/* nambah yang baru*/
.tabcekout{
	width: 100%;
	padding-left:5px;
	padding-right:5px;
	margin-top: 20px;
}

.tabcekout td{
	width: 30%;
	text-align:right;
	padding:10px;
	border: 1px solid #acacac;
	border-left: none;
	border-bottom: none;
}

.tabcekout th{
	width: 70%;
	padding:10px;
	border: 1px solid #acacac;
	border-right: none;
	border-bottom: none;
}

.trtot th{
	border-bottom: 1px solid #acacac;
}

.usebtn {
	 display:inline; width: 100px; text-align: right; margin-top: -10px; margin-left: 10px;
}

.vcrname { margin: 0 0 0 0; }
.vcrinput { margin-left: 0px;}

.barisakhir {width:100%; margin-top:30px;}
.barisakhir p{float:left; }
.btnaksi{
	float: right; width: 278px; display:inline; margin-top:5px;
}

.cart_area { background: #FFF; margin: 0px; padding: 1px 1px; position: relative; }
.iconcart { float: left; height: 58px; overflow: hidden; width: 58px; margin: 10px 10px 0 0; }

.boxbelikiri{ 
	float: left; 
	width:192px; 
	height:192px; 
	border-radius:100%; 
	background:#419f61; 
	border:solid #368854; 
	margin: 30px 40px 20px 40px;}
.boxangkabln {text-align:center; margin-top:50px;}
.pangka{font-size: 150px; font-weight:bold; color:#fffdff;}
.pbulan{font-size: 23px; font-weight:lighter; color:#fffdff; margin-top:40px;}


.boxbelikanan{ float: left; width:500px; margin: 30px 40px 20px 5px;}
.boxthanks-1 {font-size: 30px; font-family:Open Sans; font-weight:lighter; margin-bottom:5px;}

.boxvoucher {padding:7px 0; margin-bottom:12px;}

.boxbelibawah{ width:auto; background:#939393; border-radius:5px; padding:5px; margin: 30px 10px 0 10px;}

.cekoutbtn{
	float: right; 
}
.batalbtn{
	float: left; 
}

.voucheryes { background: #419f61; color:#FFF; font-weight:lighter; border-radius:5px; width:636px;}
#btnbatal {background:#fff; color:black; border:none; !important}
#btnbatal:hover {
	text-decoration: underline;
	}



/* Responsive */
@media only screen and (max-width : 1240px) {
	.navleft { left: -250px; }
	.blockright { padding: 8px; }
	.logo { float: none; margin: 0 auto; padding-top: 7px; }
	.boxusername { display: none; }
	.userbox { width: 120px; position: absolute; right: 0; top: 0;}
	.navbutton { display: block; }
	.statusdesc { right: 16px; }
	.footlogin { padding: 32px 8px; }
	.longdate { display: none; }
	.shortdate { display: inline-block; }
	#bukukas th { width: auto !important; }
	#taborder th { width: auto !important; }
	.tabreport td { font-size: 13px; line-height: 18px; }
	.paydebt, .editdebtbox { margin-left: -150px; }
	.upgradeinside img { width: 72px; height: auto; }
	.debtdatesmall { display: block; }
	.debtdatebig { display: none; }
	.orddatebig { display: block; }
	.edithapiut .catat { left: 50%; margin-left: -250px; }
	.kastitlehapiutdetil { width: 55%; }
	.boxbelikiri { float:none; margin:0 auto; width:192px;}
	.boxbelikanan { float:none; margin:10px auto; text-align:center;}
}
@media only screen and (max-width : 960px) {
	.dataTables_wrapper .dataTables_info,
  	.dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
  	.dataTables_wrapper .dataTables_paginate { margin-top: 0.5em; }
	.kastitlekanan { float: none; }
	.kastitle { width: 49%; }
	.kassaldo { width: 49%; }
	.tabdesc { display: none; }
	.boxbelikiri { float:none; margin:0 auto; width:192px;}
	.boxbelikanan { float:none; margin:20px auto;}
	
	.tabbg { display: none; }
	.moonleft { float: none; background: none; width: 100%; background: #939393; border-radius: 16px 16px 0 0; }
	.kastool { float: none; background: #FFF; width: 100%; background: #c5c5c5; text-align: center; height: auto; padding-bottom: 8px; }
	.bukutop { height: auto; background: none; }
	.kasrightborder { display: none; }
	.bulannav { position: absolute; top: 0; right: 8px; }
	.bukutengah { margin: 0; min-height: 200px; border-radius: 0; }
	.bukubeli { margin: 0; min-height: 200px; border-radius: 0; }
	.kasbutton { display: inline-block; float: none; }
	.catat { left: 50%; right: auto; margin: 0 0 0 -230px; }
	.bloktengah { min-height: 200px;; width: 96%; }
	.judulkas { font-size: 24px; line-height: 28px; }
	.bloktengah { min-height: 200px; }
	.subreport { width: 100%; }
	.tdtanggal { width: auto !important; }
	.option_bookbox { width: 240px; }
	.katbox { float: none; width: auto; margin: 0; }
	.katboxright { padding-top: 32px; }
	.bordtop { border-top: 1px dotted #999; padding-top: 16px; margin-top: 16px; }
	.boxads { margin: 0; }
	.subscribe { position: relative; }
	.upgradebox { text-align: center; }
	.upgrade { width: 180px; display: inline-block; float: none; margin: 16px 48px; }
	.feature, #featdown { height: 224px; }
	.feature img { left: 50%; top: -48px; margin-left: -64px; width: 128px; height: auto; }
	.featuretext { margin: 96px 8px 0 8px; width: auto; text-align: center; }
	.invbduedate { display: none; }
	.seconddebttool { display: none; }
	.searchbukutop { background: #939393; padding: 16px; }
	.kasiconhapiutdetil { display: none; }
	.hpfrom { display: none; }
	.edithapiut .catat { margin: 0; }
	#edit_hp { left: 0; top: auto; bottom: 0; }
	.kasdown { display: none; }
}
@media only screen and (max-width : 680px) {
	.motto { display: none; }
	#bukukas .tabbalance { display: none; }
	#bukukas th { color: #d1d1d1; font-size: 14px; font-weight: 300; padding: 12px 0; border-right: 1px solid #525e6b; }
	#bukukas th:last-child { border-right: none; }
	#bukukas td { padding: 8px; vertical-align: middle; border-right: 1px solid #fff; line-height: 16px; }
	#bukukas td:last-child { border-right: none; }
	
	#taborder .tabbalance { display: none; }
	#taborder th { color: #d1d1d1; font-size: 14px; font-weight: 300; padding: 12px 0; border-right: 1px solid #525e6b; }
	#taborder th:last-child { border-right: none; }
	#taborder td { padding: 8px; vertical-align: middle; border-right: 1px solid #fff; line-height: 16px; }
	#taborder td:last-child { border-right: none; }
	
	.bloktengah { min-width: 0; width: 100%; }
	.kastitle { float: none; width: 100%; padding: 16px 0; border-bottom: 1px solid #999; }
	.kassaldo { float: none; width: 100%; text-align: center; padding: 4px 0 8px 0; background: #C5C5C5; }
	.kasicon { display: none; }
	.kastitlekanan { width: 100%; text-align: center; }
	.kastop { padding: 0; }
	.kasbody { padding: 0; }
	.blockright { padding: 0; }
	.moonleft { border-radius: 0; }
	.thebalance { display: none; }
	.judulkas { padding: 0; }
	.smallbalance { display: inline; }
	.smallsaldo { color: #505050; line-height: 14px; }
	.kastool { display: none; }
	.bukutengah { padding: 0; border-bottom: 2px solid #939393; }
	.bukubeli { padding: 0; border-bottom: 2px solid #939393; }
	.userbox { display: none; }
	.logo { float: right; padding: 6px 0 0 0; position: relative; right: -8px; }
	.bottominput { display: block; border-top: 2px solid #FFF; box-shadow: 0 0 4px #333; }
	.footlogin { padding: 16px 8px 64px 8px; }
	.catat {
		position: fixed;
		bottom: 40px;
		top: auto;
		width: 100%;
		left: 0;
		right: auto;
		margin: 0;
		padding: 0 0 16px 0;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: 0 0 4px #515151;
	}
	.catathapiut { bottom: 0; }
	.titlehapiutform { border-radius: 0; }
	.bulannav { display: none; }
	.bulankas { text-align: center; padding: 16px 0; }
	.small_bulan_nav_left, .small_bulan_nav_right { width: 21px; height: 24px; display: block; position: absolute; }
	.small_bulan_nav_left:hover, .small_bulan_nav_right:hover { text-decoration: none; }
	.small_bulan_nav_left { background: url(gambar/bulan-nav-left.png) center top no-repeat; left: 8px; top: 14px; }
	.small_bulan_nav_left:hover { background: url(gambar/bulan-nav-left.png) center bottom no-repeat; }
	.small_bulan_nav_right { background: url(gambar/bulan-nav-right.png) center top no-repeat; right: 8px; top: 14px; }
	.small_bulan_nav_right:hover { background: url(gambar/bulan-nav-right.png) center bottom no-repeat; }
	.smallogo { display: inline-block; width: 24px; height: auto; }
	.fulllogo { display: none; }
	.logo { text-align: right; width: 52px; }
	.smalltool { display: block; border-top: 4px solid #5d5d5d; }
	.smalltool div { float: left; width: 32.5%; text-align: center; padding: 10px 0 6px 0; border-right: 1px solid #414141; border-left: none; }
	.smalltool a:hover { text-decoration: none; }
	.smalltool div:last-child { border-right: none; }
	.navleft { padding: 8px 0 0 0; top: -11px; }
	.refreshlink { display: block; width: 32px; height: 32px; background: url(gambar/icon_refresh.png) no-repeat center top; margin: 0 auto; }
	.refreshlink:hover { background: url(gambar/icon_refresh.png) no-repeat center bottom; }
	.tdkategori { padding: 8px 8px 0 8px !important; }
	.nominaltab { margin: 8px -8px 0 -8px; padding: 4px 8px; background: rgba(255,255,255,0.6); color: #5f5f5f; display: block; }
	header { height: 36px; position: fixed; top: 0; }
	.navbutton { font-size: 14px; height: 30px; padding: 6px 0 0 0; width: 72px; }
	body { padding-top: 32px; }
	.catatleft { display: none; }
	.catatright { float: none; width: 100%; }
	#itemdesc textarea { width: 94%; }
	.catlabel { font-size: 12px; width: 72px; display: inline-block; }
	.catlabeldesc { padding-bottom: 8px; display: block; }
	.catatright #itemdesc { height: auto; padding: 6px 0 8px 8px; }
	.catatbutton { padding: 10px 6px 0 6px; }
	.selectcashbar { height: auto; }
	.reportleft { float: none; width: 100%; }
	.reportright { float: none; width: 100%; padding-top: 24px; }
	.mainicon { display: none; }
	.bodyreport { border-radius: 0; }
	.reportbulanarea { position: relative; right: 0; width: 100%; height: auto; border-radius: 0; margin: 6px 0 0 0; }
	#bulankasreport { padding: 12px 0; float: none; width: 100%; font-size: 16px; }
	.selectcashbar { padding:8px 0 0 0; text-align: center;  }
	.tabreport { width: 100%; }
	.subreport .tdmatauang { display: none; }
	.tabreport td { width: auto !important; }
	small { text-align: center; display: block; }
	.notetitle { border: none; }
	#bodynotes { padding-top: 0; }
	.option_bookbox { margin: 8px; }
	.bodyoptkas { text-align: center; }
	.option_bookbox { display: inline-block; float: none; text-align: left; }
	.option_bookname { text-align: left; padding-left: 8px; }
	.optionwrap { border-left: none; border-right: none; border-radius: 0; font-size: 13px; padding: 16px 16px 24px 16px; }
	.taboption { width: 100%; }
	.taboption td { padding: 4px; vertical-align: middle; }
	.option_back { margin: -8px 8px 0 0; }
	.smallleft { text-align: left; }
	.rememberbox small { text-align: left; }
	.download { display: none; }
	.boxads { padding: 0; }
	.adsarea { margin: 0; border-radius: 0; border-bottom: 1px solid #525e6b; padding: 0; }
	.boxusername { display: none; }
	.bigsubs { font-size: 32px; display: block; padding-bottom: 8px; }
	.upgrade {margin: 16px; }
	.upgradebox { padding-top: 0 !important; }
	.toptext { width: 260px; right: 0; }
	.pricelabel { width: 180px; height: auto; right: -16px; right: 0; }
	.firsttext { font-size: 28px; line-height: 32px; }
	.secondtext { font-size: 14px; }
	.htop { font-size: 24px; top: 0; }
	.boxfeature { padding-top: 64px; }
	article { width: 100%; margin: 16px auto 0 auto; }
	.feature { height: 240px; }
	#featdown { height: 280px; }
	.upgradebox p { font-size: 12px; line-height: 16px; }
	.public_menu { top: 37px; }
	.invleft { float: none; max-width: none; }
	.inright { float: none; padding-top: 28px; max-width: none; }
	.invnumb input { display: block; }
	#invoiceline_1 .inright { text-align: left; }
	#invoicebox { padding: 8px; }
	.invbooktab th { background: #2c3e50; color: #FFF; padding: 8px 0; } 
	.invbooktab td { padding: 4px; min-width: 48px; } 
	.debt_tool, .debtblock { border-radius: 0; }
	.debtsmall { float: none; margin-bottom: 16px; }
	.debt_tool_right { width: 50%; }
	.editdebtbox, .newdebtbox, .paydebt {
		bottom: 0;
		top: auto;
		margin: 0;
		left: 0;
		right: auto;
		height: 95%;
		max-width: 100%;
		overflow: auto;
		border-radius: 0;
		border-top: none;
		border-left: none;
		border-bottom: none;
		position: fixed;
		padding: 3% 16px;
	}
	.editdebtbox textarea, .newdebtbox textarea, .paydebt textarea { height: 38px !important; }
	.tabutangdesc { display: none; }
	.tabdebthistory { font-size: 12px; line-height: 16px; }
	.addsign { font-size: 10px; line-height: 14px; }
	.debtbig { font-size: 14px; line-height: 18px; top: 0;} 
	.debtdesc { display: none; }
	.debtto { font-size: 12px; line-height: 16px; }
	.preshare { float: none; margin-right: 0; }
	.pleaseupgradebox { width: 300px !important; margin-left: -150px; }
	.upgradeinside img { width: 64px; height: auto; }
	.upgradetexttop { display: block; padding: 0; }
	.upgradetextbottom { font-size: 12px; line-height: 16px; }
	.searchbukutop { border-radius: 0; text-align: center; line-height: 48px; }
	.moonlefthapiut { display: none; }
	.kastoolhapiut, .kastoolhapiutdetil { display: block; background: #e9e9e9; border-top: 1px solid #999; }
	.reportbulanarea .bulankastgl { float: none; padding: 12px 0 !important; text-align: center; }
	.premkonfirm { display: none; }
	.boxbelikanan { float:none; margin:20px auto; width:100%;}
	.boxbelikiri {margin-top: 20px;}
	.boxbelibawah {margin-bottom: 20px;}
	.iconcart {display: none;}
}
@media only screen and (max-width : 420px) {
	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: center; }
  	.dataTables_wrapper .dataTables_filter { margin-top: 0.5em; }
	.tabtype { display: none; }
	#bukukas { font-size: 12px; }
	#taborder { font-size: 12px; }
	.headwrap { min-width: 0; }
	.tabnominal { display: none; }
	article { min-width: 200px; }
	.bulankas { text-align: center; }
	#trans_jam, #trans_menit, #trans_ampm, #trans_trans_jam, #trans_trans_menit, #trans_trans_ampm { display: none; }
	#hp_jam, #hp_menit, #hp_ampm, #hp_trans_ampm { display: none; }
	#hpitem_jam, #hpitem_menit, #hpitem_ampm, #hpitem_trans_ampm { display: none; }
	.bodyreport { padding: 8px 0; }
	.selectcashbar { border-radius: 0; margin: 0 0 16px; }
	.ui-tabs { padding: 0 !important; border: 0 !important; }
	.ui-corner-all { border-radius: 0 !important; }
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 4px 8px !important; font-size: 12px; }
	.ui-tabs .ui-tabs-nav li { margin: 0 !important; }
	.ui-tabs .ui-tabs-panel { padding: 16px 0 !important;}
	.reportbox { padding: 8px 0; }
	.h3report { padding: 8px 0; border-radius: 0; text-align: center; font-size: 18px; line-height: 24px; background: #818181; color: #FFF; }
	.iconreport { display: none; }
	.reportleft .tdmatauang, .tabreport .tdmatauang, .andesc { display: none !important; }
	.notifreport { font-size: 16px; line-height: 20px; }
	.smallnote { width: 130px; }
	.popnote { width: 280px; margin: 20px auto 0; }
	.noteright { width: 130px; }
	.option_bookbox { display: block; float: none; text-align: left; margin: 8px auto;}
	.taboption #newdesc, .taboption #newname, .taboption #desc_buku { width: 148px !important; }
	.option_back { display: none; }
	.option_bookname { text-align: center; padding: 0; }
	.option_back_small {
		display: block;
		float: right;
		margin: 32px 8px 0 0;
		padding: 4px 8px !important;
		background: #999 !important;
		border: none !important;
	}
	.option_back_small:hover { background: #2c3e50 !important; }
	.katbutton { float: none; padding: 0; text-align: left; width: auto; margin-top: 8px; }
	.loader_newkat { right: 8px; bottom: 8px; top: auto; }
	.renamecat { display: block; margin-bottom: 8px; }
	.useroptionbox { font-size: 13px; line-height: 18px; }
	.useroptionbox td { vertical-align: middle; }
	.addchild { font-size: 12px; position: static; margin-bottom: 16px; }
	.addchild:focus, .addchild:active { position: static !important; }
	.newchild { position: fixed; bottom: 0; left: 0; top: auto; width: 100%; height: auto; }
	.taboptaccount td { vertical-align: baseline; }
	.userlabel { font-size: 12px; display: block; }
	.tdoptuserleft { display: none; }
	.loginbox { width: 260px; }
	footer { padding: 24px 8px 16px 8px; }
	.registerbox { width: 260px; }
	.grecaptcha { margin: 0 -24px; }
	.boxadsreport { padding: 0; border-radius: 0; }
	.choosepepeku { max-width: 260px; }
	.loginarea h2 { font-size: 24px; line-height: 30px; }
	.bigsubs { font-size: 24px; }	
	.upgradebox { padding: 0 16px 16px 16px !important; }
	.headwrap { min-width: 0; }
	.toptext { top: -16px; right: 0; float: left; text-align: left; margin: 0 0 0 16px; }
	.firsttext { padding-right: 0; }
	.htop { padding: 16px; text-align: center; }
	.feature { float: none; width: auto; height: auto; }
	#featdown { height: auto; }
	.featuretext { margin: 8px 8px 0; padding: 92px 8px 16px 8px; }
	.subscribe { padding: 16px; text-align: center;  margin-top:10px;}
	.thanksbox img { width: 160px; height: auto; }
	h2.thanks { font-size: 20px; line-height: 24px; }
	#showdebt { width: 64px; }
	.debtbutton, #debt_pay { font-size: 12px; padding: 4px !important; position: relative; top: 4px; }
	.pleaseupgradebox { width: 240px !important; margin-left: -120px; }
	.upgradeinside img { height: auto; width: 48px; }
	.upgradebutton input { display: block; margin: 0 auto; margin-bottom: 8px; }
	.searchbukutop input, .searchbukutop select {
		display: block;
		width: 90%;
		margin: 4px auto;
		padding: 4px;
	}
	.searchbukutop #find_search { padding: 8px 0; text-align:center; }
	#hp_alsocash, #hpitem_alsocash { display: block; margin: 8px 0 0 0; }
	#catat_hpitem { top: auto; }
	.boxbelikanan { float:none; margin:20px auto; width:100%;}
	.boxbelibawah {margin-bottom: 20px;}
	.boxbelikiri {margin-top: 10px;}
	.iconcart {display:none;}
	.tabcekout th{width :60%;}
	.tabcekout td{width :40%;}
}

/* Print */
@media print {
	header, .navleft, .download, .ui-tooltip { display: none !important; }
	.ui-widget-content { border: none !important; }
	.blockright { padding: 0; }
}