@charset "utf-8";a img,hr,img {
    border: 0
}

.kasbutton,.kasdown img,.navtitle,.pointer,.tanya_hapus {
    cursor: pointer
}

header,sub,sup {
    position: relative
}

.public_menu a:hover,a,a.button:hover,ins {
    text-decoration: none
}

.headwrap,.wizard,article {
    min-width: 300px
}

.judulkas,.navusername {
    text-transform: capitalize
}

.desckas,.judulkas {
    text-shadow: 1px 1px 1px #fff
}

table,table.dataTable {
    border-collapse: separate;
    border-spacing: 0
}

.dataTables_wrapper:after,blockquote:after,blockquote:before,q:after,q:before {
    content: ""
}

#dkripkas,.desckas,.option_bookdesc,.option_booktitle {
    text-overflow: ellipsis
}

#dkripkas,.nowrap,.option_bookdesc,.option_booktitle,.sukseskas,table.dataTable tbody td.dt-body-nowrap,table.dataTable tbody th.dt-body-nowrap,table.dataTable td.dt-nowrap,table.dataTable tfoot td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable th.dt-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable thead th.dt-head-nowrap,table.dataTable.nowrap td,table.dataTable.nowrap th {
    white-space: nowrap
}

a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline
}

body,input,select,textarea {
    font-family: "Open Sans",sans-serif
}

.childrole,.ktpdesc,.notifpepeku,.resetkas,em {
    font-style: italic
}

:focus {
    outline: 0
}

body {
    background: #fff;
    line-height: 1;
    font-size: 14px;
    color: #3d4850;
    font-weight: 400
}

ol,ul {
    list-style: none
}

caption,td,th {
    font-weight: 400;
    text-align: left
}

blockquote,q {
    quotes: "" ""
}

a {
    color: #5e5e5e
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

audio,canvas,video {
    display: inline-block
}

.hidden,.none,.notif,audio:not([controls]) {
    display: none
}

del {
    color: #333
}

ins {
    background: 0 0
}

hr {
    background-color: #ccc;
    height: 1px;
    margin: 24px 24px 1.714285714rem
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

small {
    font-size: 10px;
    line-height: 14px;
    color: #888
}

img {
    -ms-interpolation-mode: bicubic
}

.clear {
    clear: both
}

input,select,textarea {
    font-size: 14px;
    line-height: 18px
}

#notearea,#notearea:focus,#notearea:hover,.isinote {
    font-family: Delius,cursive
}

input:not([type]),input[type=number],input[type=password],input[type=text],select,textarea {
    padding: 4px;
    border: 1px solid #9ea5aa;
    border-radius: 4px;
    background: #ececec;
    color: #5e5e5e
}

input:not([type]),input[type=number]:hover,input[type=password]:hover,input[type=text]:hover,select:hover,textarea:hover {
    border: 1px solid #0a5d9f;
    background: #efefef
}

input:not([type]),input[type=number]:focus,input[type=password]:focus,input[type=text]:focus,select:focus,textarea:focus {
    color: #3d4850;
    background: #fff;
    border: 1px solid #9ea5aa;
    box-shadow: 0 0 2px #868c91
}

.button,input:not([type]),input[type=button],input[type=submit] {
    background: #0a5d9f;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 8px 16px;
    color: #feffff
}

.button:hover,input:not([type]),input[type=button]:hover,input[type=submit]:hover {
    background: #006abe
}

.button:active,input:not([type]),input[type=button]:active,input[type=submit]:active {
    position: relative;
    top: 1px
}

input[readonly=readonly],input[type=text]:disabled {
    background: #fff;
    border: 1px solid #ccc
}

input[readonly=readonly]:focus,input[readonly=readonly]:hover {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: none
}

.notif {
    line-height: 18px;
    margin: 8px 0;
    text-align: center;
    color: #fff
}

.notif div {
    border: 1px solid #fff;
    padding: 8px;
    border-radius: 4px
}

.notifno {
    background: #9e0039
}

.notifyes {
    background: #00a651
}

.left {
    text-align: left
}

.center {
    text-align: center
}

.motto,.right {
    text-align: right
}

strong {
    font-weight: 700
}

header {
    height: 48px;
    width: 100%;
    background: #e1e1e1;
    z-index: 15;
    border-bottom: 1px solid #c6c6c6
}

.headwrap {
    margin: 0 18px
}

.logo {
    float: left;
    margin: 7px 0 0;
    width: 128px;
    display: block
}

.motto {
    position: absolute;
    color: #54585b;
    font-weight: 300;
    font-size: 14px;
    width: 278px;
    right: 16px;
    top: 18px
}

.userbox {
    float: right;
    width: 50%;
    position: relative
}

.public_menu {
    position: absolute;
    width: 210px;
    background: #3d4850;
    top: 50px;
    left: 0;
    z-index: 20;
    display: none
}

.public_menu a {
    color: #e1e1e1;
    display: block;
    padding: 12px 16px
}

.public_menu a:hover {
    background: #0a5d9f;
    color: #e1e1e1
}

article {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    min-height: 100%
}

article a {
    color: #000
}

article a:hover {
    text-decoration: underline
}

.bulannav a:hover,.kasbutton:hover,.kasdown a:hover,.navblock a:hover,.regnotifbutton,.usernav a:hover {
    text-decoration: none
}

.loginarea {
    padding: 48px 0 72px;
    margin: 58px 0 0;
    line-height: 18px;
    background: #fff
}

.loginbox .inputlogin {
    display: block;
    margin: 8px auto;
    width: 100%;
    padding: 8px 0;
    text-align: center
}

.loginarea h2 {
    color: #0a5d9f;
    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
}

.rememberbox small {
    font-size: 9px;
    line-height: 12px;
    color: #9ea5aa;
    margin: 0 0 0 6px;
    padding-top: 4px;
    display: block
}

.buttonlogin {
    display: block;
    float: right;
    margin: 4px 0 0
}

.checkremember {
    margin: 0 0 0 6px
}

.startnotif {
    text-align: center;
    padding: 16px 0;
    background: #fff;
    margin: 16px auto 72px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    color: #3d4850
}

.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;
    text-align: left
}

.grecaptcha,.setujubox {
    padding-bottom: 24px
}

#selamatbox p,.bookcreated {
    text-align: center
}

.registerbox .buttonreg {
    margin: 0 0 0 2px
}

.setujubox {
    font-size: 12px;
    line-height: 16px
}

#regcaptcha {
    width: 318px;
    margin: 0 auto
}

#mainregnotif {
    margin-top: 24px
}

.regloader {
    position: absolute;
    right: 4px;
    bottom: 6px
}

#passloader {
    position: absolute;
    left: 100px;
    top: 58px;
    display: none
}

#selamatbox p {
    padding-bottom: 32px;
    line-height: 20px
}

.notifpepeku {
    font-size: 12px
}

#mainlognotif {
    padding: 16px 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;
    display: block
}

.footlogin {
    padding: 72px 0 32px 240px
}

.regnotifbutton {
    color: #0a5d9f;
    font-weight: 700
}

.bulankas,.judulkas,.navusername,.thebalance,.topwizard h2 {
    font-weight: 300
}

.wizard {
    margin: 0 auto;
    width: 96%
}

.wizard strong {
    display: block;
    margin: 16px 0 0
}

.wizard input {
    display: block;
    margin: 4px auto
}

.topwizard {
    width: 320px;
    margin: 0 auto
}

.topwizard img {
    overflow: hidden;
    float: left;
    margin-top: 15px
}

.topwizard h2 {
    color: #0a5d9f;
    font-size: 32px;
    padding-top: 30px
}

.setupbutton {
    display: inline-block!important;
    margin: 32px 16px 16px!important
}

.ppquestion strong {
    display: inline
}

#create_book_notif {
    width: 712px;
    margin: 0 auto
}

.createbooknotifbox {
    margin: 0 auto;
    position: relative
}

.create_book_loader {
    position: absolute;
    top: -67px;
    right: -28px
}

.pepekuimporbutton,.pepekuuserbutton {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0
}

.pepekuuserbutton {
    width: 280px
}

.pepekuimporbutton {
    width: 290px
}

.pepekuimporbutton input {
    margin: 32px 2px!important
}

.loginpepeku_loader {
    position: absolute;
    right: -8px;
    top: 34px;
    display: none
}

.pepekuimpor strong,.sukseskas strong {
    display: inline
}

#loginpepeku_notif {
    max-width: 600px;
    margin: 0 auto
}

#loginpepeku_notif a {
    color: #f90
}

#imporpepeku_notif .notifyes {
    background: #2e3b49!important
}

.loginpepeku_loader2 {
    padding-bottom: 16px
}

.cashbookoke {
    background: #00a651;
    font-size: 14px;
    padding: 30px 0;
    color: #fff
}

.cashbookoke h2 {
    color: #fff;
    margin-bottom: 0
}

.bulankas,.navblock a,.navblock ul,.navblock ul li {
    display: block
}

.navleft {
    width: 240px;
    background: #60676f;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    height: 100%;
    overflow: auto
}

.navblock {
    color: #d1d1d1;
    font-size: 14px;
    line-height: 18px
}

.navtitle {
    padding: 8px 0 8px 56px;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    background-color: #3e4751;
    background-repeat: no-repeat;
    background-position: 16px 8px
}

.navblock ul li.plus a,.navblock ul li.search a {
    font-size: 12px;
    line-height: 16px;
    padding: 4px 0 4px 32px
}

.navtitle:hover {
    background-color: #2e353d
}

#navtitle_user {
    background-image: url(gambar/icon_user.png)
}

#navtitle_bukukas {
    background-image: url(gambar/icon_kas.png)
}

#navtitle_asset {
    background-image: url(gambar/icon_utangpiutang.png)
}

#navtitle_laporan {
    background-image: url(gambar/icon_laporan.png)
}

#navtitle_peralatan {
    background-image: url(gambar/icon_peralatan.png)
}

#navtitle_pengaturan {
    background-image: url(gambar/icon_pengaturan.png)
}

#navtitle_premium {
    background-image: url(gambar/icon_premium.png)
}

#navtitle_network {
    background-image: url(gambar/icon_net.png)
}

#navtitle_referral {
    background-image: url(gambar/icon_referral.png)
}

.navblock ul li {
    background: url(gambar/dot.png) 16px 17px no-repeat #60676f;
    border-bottom: 1px solid #4e545c;
    color: #d1d1d1
}

.navblock ul li.current_menu,.navblock ul li.plus:hover,.navblock ul li:hover {
    background-color: #0a5d9f
}

.navblock ul li.plus {
    background: url(gambar/plus.png) 16px 9px no-repeat #60676f
}

.navblock ul li.search,.navblock ul li.search a:hover {
    background-image: url(gambar/cari_kecil.png);
    background-position: 16px 9px;
    background-repeat: no-repeat
}

.navblock ul li.plus a {
    color: #c8ced4
}

.navblock ul li.plus a:hover {
    color: #fff;
    text-decoration: none
}

.navblock ul li.search a {
    color: #c8ced4
}

.navblock ul li.search a:hover {
    color: #fff;
    background-color: #0a5d9f
}

.navblock ul li.current_menu a {
    color: #fff
}

.navblock ul li a {
    color: #c8ced4;
    font-size: 14px;
    line-height: 18px;
    display: block;
    padding: 12px 0 12px 32px
}

.navblock a:hover {
    color: #fff
}

#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 {
    background: #dadada;
    color: #1c2630
}

.navusername {
    padding: 0 10px 8px 4px;
    font-size: 14px;
    line-height: 18px
}

.navblock a {
    color: #cfd6d9
}

.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;
    margin-top: 10px
}

.kastitlekanan {
    float: left;
    width: 80%;
    color: #2e3b49
}

.judulkas {
    color: #0a5d9f;
    font-size: 30px;
    line-height: 36px;
    padding: 8px 0 0
}

.desckas {
    color: #3d4850;
    font-size: 14px;
    padding: 4px 0 0;
    line-height: 18px
}

.kassaldo {
    float: right;
    width: 40%;
    text-align: right;
    font-size: 14px;
    line-height: 24px;
    color: #3e4751
}

.thebalance {
    color: #0a5d9f;
    font-size: 30px;
    padding-bottom: 8px;
    padding-top: 4px
}

.kasbody {
    padding: 28px 0 0
}

.kastop {
    padding: 16px 4px 8px
}

.bukutop,.hapiuttop {
    height: 50px;
    position: relative;
    margin: 20px 3px 10px;
}

.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;
    float: right;
    width: 542px;
    margin-right: -4px
}

.moonleft {
    height: 52px;
    float: left;
    width: 200px;
    position: relative
}

.kasrightborder {
    float: right;
    width: 14px;
    height: 52px
}

.kasdown {
    position: absolute;
    top: -50px;
    right: 1px;
    width: auto
}

.utangdown {
    top: -66px
}

.utangdetildown {
    top: -56px
}

.kasdown img {
    opacity: .4
}

.kasdown img:hover {
    opacity: 1
}

.bulankas {
    font-size: 18px;
    line-height: 20px;
    color: #3e4751
}

.bulannav {
    width: 250px;
    height: 32px;
    text-align: center;
    float: left;
    margin: 10px 0 0
}

.bulannav a {
    display: inline-block;
    width: 20px;
    height: 20px
}

.bulannav .bulan_nav_left {
    background: url(gambar/icon_month-back.png) center top no-repeat;
    float: left
}

.bulannav .bulan_nav_left:hover {
    background: url(gambar/icon_month-back.png) center bottom no-repeat;
    float: left
}

.bulannav .bulan_nav_right {
    background: url(gambar/icon_month-next.png) center top no-repeat;
    float: right
}

.bulannav .bulan_nav_right:hover {
    background: url(gambar/icon_month-next.png) center bottom no-repeat;
    float: right
}

.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 5px 0 8px
}

.bukubeli,.bukutengah {
    margin: 0 4px;
    padding: 16px 1px;
    position: relative
}

.kastool #pengeluaran {
    background: url(gambar/button_pengeluaran.png) 10px 4px no-repeat #6f3d4f
}

.kastool #pemasukan {
    background: url(gambar/button_pemasukan.png) 10px 4px no-repeat #436e58
}

.kastool #transfer {
    background: url(gambar/button_transfer.png) 10px 4px no-repeat #3d5b74
}

.kastool #pengeluaran:hover {
    background: url(gambar/button_pengeluaran.png) 10px 4px no-repeat #9e0039
}

.kastool #pemasukan:hover {
    background: url(gambar/button_pemasukan.png) 10px 4px no-repeat #00a651
}

.kastool #transfer:hover {
    background: url(gambar/button_transfer.png) 10px 4px no-repeat #0a5d9f
}

.bukutengah {
    background: #e1e1e1;
    border-radius: 8px 8px 0 0
}

.bukubeli {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #aaa
}

.catat,.tabbg {
    position: absolute
}

.tabbg {
    width: 101%;
    background: #3e4751;
    height: 37px;
    top: 57px;
    left: -.5%
}

.listmasuk {
    background: #e0ffe3
}

.listkeluar {
    background: #ffeaea
}

.listtrans {
    background: #d6eff9
}

.listmasuk td.tabtype {
    background-color: #e0ffe3!important
}

.listkeluar td.tabtype {
    background-color: #ffeaea!important
}

.listtrans td.tabtype {
    background-color: #d6eff9!important
}

.catatleft {
    float: left;
    width: 110px
}

.catatright {
    float: right;
    width: auto;
    width: 349px
}

.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
}

#checkdueleft {
    height: 50px
}

#checkdueright {
    height: 57px
}

#duedatecheck {
    margin-top: 10px
}

.catat {
    width: 460px;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 16px 16px 20px;
    margin: 0 4px 16px 0;
    right: 0;
    top: 0;
    z-index: 50;
    box-shadow: 0 0 2px #777;
    display: none
}

.catat_pengeluaran {
    background: #ffdfdf
}

.catat_pemasukan {
    background: #daf5db
}

.catattipe {
    color: #fff;
    margin-bottom: 8px
}

.catat_pengeluaran .catattipe {
    background: #6f3d4f
}

.catat_pemasukan .catattipe {
    background: #436e58
}

.catatbutton {
    text-align: right;
    padding: 10px 6px 0 0;
    position: relative
}

#btl_voucher,#cateditcancel,#child_cancel,#cust_cancel,#hp_batal,#trans_batal,#trans_trans_batal,.option_back,.trans_hapus {
    background: #6e7b89!important;
    border: 1px solid #6e7b89!important
}

#btl_voucher:hover,#cateditcancel:hover,#child_cancel:hover,#cust_cancel:hover,#hp_batal:hover,#trans_batal:hover,#trans_trans_batal:hover,.option_back:hover,.trans_hapus:hover {
    background: #1c2630!important
}

.catatleft #itemdesc {
    height: 59px
}

.catatright #itemdesc {
    height: 66px
}

#itemdesc textarea {
    width: 325px;
    height: 48px;
    font-size: 12px;
    line-height: 16px
}

.catat_loader {
    position: absolute;
    right: 200px;
    top: 14px;
    display: none
}

.capital,.capitalize,.kapital {
    text-transform: capitalize!important
}

.glow:hover {
    border-radius: 2px;
    box-shadow: 0 0 4px #575757;
    background: #fff
}

.noticefirst,.option_bookbox:hover {
    box-shadow: 0 0 4px #999
}

.trans_hapus {
    float: left;
    display: none
}

.tanya_hapus {
    padding: 4px 16px;
    background: #930;
    border-radius: 4px;
    display: inline-block;
    margin: 8px 0 0
}

.tanya_hapus:hover {
    background: #440400
}

#catat_trans_transfer {
    background: #e9f9ff
}

.catattipe {
    background: #3d5b74
}

.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
}

.catatarea,.katbox,.katnamebox,.option_bookbox,.ordbox {
    position: relative
}

.transfernoactive {
    background-color: #bababa!important;
    cursor: default
}

.smallsaldo {
    font-size: 11px;
    color: #3e4751
}

.sharebox {
    background: #e1e1e1;
    margin: 24px 4px 0;
    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: #3e4751;
    padding: 8px;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    border-radius: 4px;
    margin: 10px 3px;
    border: 1px solid #fff;
    display: none
}

.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: 1px solid #e1e1e1
}

.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;
    overflow: hidden
}

.option_bookdesc {
    font-size: 10px;
    line-height: 14px;
    overflow: hidden
}

.option_booktop {
    padding-bottom: 8px;
    border-bottom: 1px solid #999
}

.option_bookdown {
    font-size: 11px;
    line-height: 16px;
    padding: 8px 0 0
}

.new_book img {
    display: block;
    margin: 32px auto 0
}

.new_book {
    border: 2px solid #c2c2c2;
    background: #f4f4f4
}

.h3katbox,.kas_detil h2 {
    border-bottom: 1px dotted #999;
    font-weight: 700
}

.kas_detil h2 {
    color: #274a70;
    font-size: 20px;
    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;
    margin: 0 0 12px
}

.katedit,.tabbay,.totbay {
    padding: 0 16px 0 0
}

.katbox {
    width: 48%;
    float: left;
    margin: 0 16px 0 0
}

.ordbox {
    margin: 0
}

.katedit {
    float: right;
    width: 52px;
    text-align: right
}

.tabbay,table.dataTable td.dt-left,table.dataTable th.dt-left {
    text-align: left
}

.tabbay {
    float: left
}

.katbutton,.totbay {
    text-align: right;
    float: right
}

.katnamebox {
    margin: 0 0 8px;
    padding: 0 0 4px;
    border-bottom: 1px dotted #ccc
}

.katname {
    margin: 4px 0 0;
    display: inline-block
}

.katbutton {
    width: 100px;
    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
}

.katdel,.katdel_loader,.katnamedit,.loader_newkat {
    display: none
}

.loader_newkat {
    position: absolute;
    right: 110px;
    top: 28px
}

.cateditbutton {
    padding: 3px 8px 4px!important;
    border-radius: 4px!important
}

.renamekat_loader {
    position: absolute;
    right: 8px;
    top: -2px;
    display: none
}

.katdel {
    background: #900;
    color: #fff;
    line-height: 16px;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #fff;
    box-shadow: 0 0 4px #333;
    position: relative
}

.katdel_loader {
    position: absolute;
    left: 250px;
    bottom: 20px
}

.nocat {
    line-height: 20px;
    text-align: center
}

a.kat_prem_button {
    margin: 8px 0;
    display: inline-block;
    color: #fff!important
}

.taboption {
    width: 96%
}

.taboption td {
    padding: 8px 16px;
    border-bottom: 1px dotted #999
}

.noborder td {
    border: none
}

.kas-submit {
    position: relative
}

#kas_loader {
    position: absolute;
    left: 100px;
    top: 4px;
    display: none
}

.optionwrap {
    padding: 24px 24px 32px;
    position: relative;
    border-radius: 4px;
    border: 1px solid #aaa;
    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
}

.childicon,.childuser {
    float: left;
    padding: 8px
}

#main_notif {
    float: left;
    width: 50%
}

#main_loader {
    position: absolute;
    right: 128px;
    bottom: 4px;
    display: none
}

.childtext,.childuser,.childuserbox {
    position: relative
}

.ketchild p {
    font-size: 13px;
    line-height: 17px
}

.childuserbox {
    margin-top: 48px;
    min-height: 300px
}

#childuserlist {
    font-size: 15px;
    color: #3f3f3f!important
}

.childuser {
    width: 240px;
    height: 100px;
    border: 1px solid #999;
    border-radius: 8px 8px 0 0;
    margin: 8px;
    background: #fff
}

.childicon {
    width: 48px;
    height: 48px;
    background: #ccc
}

.childtext {
    float: right;
    width: 164px
}

.childname {
    font-weight: 700;
    text-transform: capitalize;
    padding-bottom: 4px;
    border-bottom: 1px dotted #999;
    font-size: 13px
}

.childmail {
    font-size: 11px;
    color: #878787;
    margin-top: 5px
}

.childrole {
    font-size: 12px;
    color: #878787
}

.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:active,.addchild:focus {
    top: -5px!important;
    right: 0!important;
    position: absolute!important
}

.newchild {
    border: 1px solid #999;
    border-radius: 4px;
    z-index: 10;
    padding: 16px;
    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,.childboxright {
    float: left
}

.childsubmitbox {
    padding: 16px 0 0;
    position: relative
}

.custombox {
    border-top: solid 1px #ccc;
    margin-top: 16px
}

.cashopt {
    padding: 0 0 0 48px
}

.custcek {
    padding: 4px 0;
    border-bottom: solid 1px #ccc
}

.option_belibox {
    float: left;
    background: #fff;
    width: 295px;
    height: 100px;
    border-radius: 8px;
    padding: 16px;
    margin: 0 16px 16px 0;
    border: 1px solid #e1e1e1;
    position: relative;
    line-height: 16px;
    font-size: 12px
}

.verino,.veripen,.veriyes {
    width: 15px;
    height: 100px;
    float: left
}

.veriyes {
    background: #436e58
}

.verino {
    background: #6f3d4f
}

.veripen {
    background: #3d5b74
}

.detil_tgl {
    font-size: 16px;
    font-weight: 200;
    line-height: 24px
}

.detil_beli {
    margin: 0 25px
}

table.dataTable {
    width: 100%;
    margin: 0 auto 16px;
    clear: both
}

table.dataTable tfoot th,table.dataTable thead th {
    color: #fff;
    font-weight: 300;
    font-size: 14px
}

table.dataTable thead td,table.dataTable thead th {
    padding: 10px 18px
}

table.dataTable thead td:active,table.dataTable thead th:active {
    outline: 0
}

table.dataTable tfoot td,table.dataTable tfoot th {
    padding: 10px 18px 6px
}

table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc {
    cursor: pointer
}

table.dataTable thead .sorting {
    background: url(gambar/sort_both.png) center right no-repeat #2e3b49
}

table.dataTable thead .sorting_asc {
    background: url(gambar/sort_asc.png) center right no-repeat #2e3b49
}

table.dataTable thead .sorting_desc {
    background: url(gambar/sort_desc.png) center right no-repeat #2e3b49
}

table.dataTable thead .sorting_asc_disabled {
    background: url(gambar/sort_asc_disabled.png) center right no-repeat #2e3b49
}

table.dataTable thead .sorting_desc_disabled {
    background: url(gambar/sort_desc_disabled.png) center right no-repeat #2e3b49
}

table.dataTable tbody tr.selected {
    background-color: #b0bed9
}

table.dataTable tbody td,table.dataTable tbody th {
    padding: 8px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px
}

table.dataTable.display tbody td,table.dataTable.display tbody th,table.dataTable.row-border tbody td,table.dataTable.row-border tbody th {
    border-top: 1px solid #fff
}

table.dataTable.display tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.row-border tbody tr:first-child th {
    border-top: none
}

table.dataTable.cell-border tbody td,table.dataTable.cell-border tbody th {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd
}

table.dataTable.cell-border tbody tr td:first-child,table.dataTable.cell-border tbody tr th:first-child {
    border-left: 1px solid #ddd
}

table.dataTable.cell-border tbody tr:first-child td,table.dataTable.cell-border tbody tr:first-child th {
    border-top: none
}

table.dataTable.display tbody tr.odd.selected,table.dataTable.stripe tbody tr.odd.selected {
    background-color: #abb9d3
}

table.dataTable.display tbody tr.even:hover,table.dataTable.display tbody tr.odd:hover,table.dataTable.display tbody tr:hover,table.dataTable.hover tbody tr.even:hover,table.dataTable.hover tbody tr.odd:hover,table.dataTable.hover tbody tr:hover {
    background-color: #f5f5f5
}

table.dataTable.display tbody tr.even:hover.selected,table.dataTable.display tbody tr.odd:hover.selected,table.dataTable.display tbody tr:hover.selected,table.dataTable.hover tbody tr.even:hover.selected,table.dataTable.hover tbody tr.odd:hover.selected,table.dataTable.hover tbody tr:hover.selected {
    background-color: #a9b7d1
}

table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3,table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3 {
    background-color: #f9f9f9
}

table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3,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 {
    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: #f5f5f5
}

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.even:hover>.sorting_1,table.dataTable.display tbody tr.odd:hover>.sorting_1,table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr.even:hover>.sorting_1,table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
    background-color: #eaeaea
}

table.dataTable.display tbody tr.even:hover>.sorting_2,table.dataTable.display tbody tr.odd:hover>.sorting_2,table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr.even:hover>.sorting_2,table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2 {
    background-color: #ebebeb
}

table.dataTable.display tbody tr.even:hover>.sorting_3,table.dataTable.display tbody tr.odd:hover>.sorting_3,table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr.even:hover>.sorting_3,table.dataTable.order-column.hover tbody tr.odd:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3 {
    background-color: #eee
}

table.dataTable.display tbody tr.even:hover.selected>.sorting_1,table.dataTable.display tbody tr.odd:hover.selected>.sorting_1,table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1 {
    background-color: #a1aec7
}

table.dataTable.display tbody tr.even:hover.selected>.sorting_2,table.dataTable.display tbody tr.odd:hover.selected>.sorting_2,table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2 {
    background-color: #a2afc8
}

table.dataTable.display tbody tr.even:hover.selected>.sorting_3,table.dataTable.display tbody tr.odd:hover.selected>.sorting_3,table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3 {
    background-color: #a4b2cb
}

table.dataTable.no-footer {
    border-bottom: 1px solid #111
}

table.dataTable.compact thead td,table.dataTable.compact thead th {
    padding: 5px 9px
}

table.dataTable.compact tfoot td,table.dataTable.compact tfoot th {
    padding: 5px 9px 3px
}

table.dataTable.compact tbody td,table.dataTable.compact tbody th {
    padding: 4px 5px
}

table.dataTable td.dataTables_empty,table.dataTable td.dt-center,table.dataTable th.dt-center {
    text-align: center
}

table.dataTable td.dt-right,table.dataTable th.dt-right {
    text-align: right
}

table.dataTable td.dt-justify,table.dataTable th.dt-justify {
    text-align: justify
}

table.dataTable tfoot td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable thead th.dt-head-left {
    text-align: left
}

table.dataTable tfoot td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable thead th.dt-head-center {
    text-align: center
}

table.dataTable tfoot td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable thead th.dt-head-right {
    text-align: right
}

table.dataTable tfoot td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable thead th.dt-head-justify {
    text-align: justify
}

table.dataTable tbody td.dt-body-left,table.dataTable tbody th.dt-body-left {
    text-align: left
}

table.dataTable tbody td.dt-body-center,table.dataTable tbody th.dt-body-center {
    text-align: center
}

table.dataTable tbody td.dt-body-right,table.dataTable tbody th.dt-body-right {
    text-align: right
}

table.dataTable tbody td.dt-body-justify,table.dataTable tbody th.dt-body-justify {
    text-align: justify
}

table.dataTable,table.dataTable td,table.dataTable th {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom:1}

.dataTables_wrapper .dataTables_length {
    float: left;
    margin: 0 0 16px 20px;
    font-weight: 300
}

.dataTables_wrapper .dataTables_length select {
    font-size: 12px;
    padding: 2px
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
    margin-bottom: 16px
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #999;
    background: url(gambar/search.png) 3px 4px no-repeat #e3e3e3;
    margin: 0 8px 0 .5em;
    padding: 2px 2px 2px 24px;
    width: 142px
}

.dataTables_wrapper .dataTables_filter input:hover {
    border: 1px solid #333;
    background: url(gambar/search.png) 3px 4px no-repeat #efefef
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    margin: 0 0 0 20px
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    margin: -4px 8px 0 0
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 2px;
    margin-left: 2px;
    text-align: center;
    text-decoration: none!important;
    cursor: pointer;
    color: #333!important;
    border: 1px solid transparent
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333!important;
    border: 1px solid #cacaca;
    background-color: #fff;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#dcdcdc));
    background: -webkit-linear-gradient(top,#fff 0,#dcdcdc 100%);
    background: -moz-linear-gradient(top,#fff 0,#dcdcdc 100%);
    background: -ms-linear-gradient(top,#fff 0,#dcdcdc 100%);
    background: -o-linear-gradient(top,#fff 0,#dcdcdc 100%);
    background: linear-gradient(to bottom,#fff 0,#dcdcdc 100%)
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    cursor: default;
    color: #3d4850!important;
    border: 1px solid transparent;
    background: 0 0;
    box-shadow: none
}

.boxstatus,.closenote,.closestdesc,.download img,.downnote,.folderreport,.smallnote {
    cursor: pointer
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff!important;
    border: 1px solid #111;
    background-color: #585858;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#585858),color-stop(100%,#111));
    background: -webkit-linear-gradient(top,#585858 0,#111 100%);
    background: -moz-linear-gradient(top,#585858 0,#111 100%);
    background: -ms-linear-gradient(top,#585858 0,#111 100%);
    background: -o-linear-gradient(top,#585858 0,#111 100%);
    background: linear-gradient(to bottom,#585858 0,#111 100%)
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    outline: 0;
    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;
    background-color: #fff;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(25%,rgba(255,255,255,.9)),color-stop(75%,rgba(255,255,255,.9)),color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 25%,rgba(255,255,255,.9) 75%,rgba(255,255,255,0) 100%);
    background: -moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 25%,rgba(255,255,255,.9) 75%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 25%,rgba(255,255,255,.9) 75%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 25%,rgba(255,255,255,.9) 75%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 25%,rgba(255,255,255,.9) 75%,rgba(255,255,255,0) 100%)
}

.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_paginate,.dataTables_wrapper .dataTables_processing {
    color: #3d4850;
    font-size: 12px;
    line-height: 18px
}

.dataTables_wrapper .dataTables_scroll {
    clear: both
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    -webkit-overflow-scrolling: touch
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing {
    height: 0;
    overflow: hidden;
    margin: 0!important;
    padding: 0!important
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #111
}

.dataTables_wrapper.no-footer div.dataTables_scrollBody table,.dataTables_wrapper.no-footer div.dataTables_scrollHead table {
    border-bottom: none
}

.dataTables_wrapper:after {
    visibility: hidden;
    display: block;
    clear: both;
    height: 0
}

th.sorting_disabled {
    background: #2e3b49
}

.bodyreport {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    min-height: 360px
}

.selectcashbar {
    border-radius: 8px;
    padding: 8px 16px;
    margin: 8px 0 16px;
    background: #e2e2e2;
    box-shadow: 1px 1px 2px #999 inset;
    position: relative;
    height: 32px
}

#bulannavreport {
    margin: 20px 20px 0 0;
    float: right
}

.reportbulanarea {
    width: 50%;
    background: #818181;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 72px;
    border-radius: 6px 6px 0 0
}

.folderreport,.iconreport {
    position: relative;
    top: 1px
}

#bulankasreport {
    font-size: 22px;
    color: #ffff;
    padding-top: 4px;
}

.h3report {
    font-size: 24px;
    color: #2c3e50;
    line-height: 28px;
    padding: 16px 0 4px 12px;
    margin: 0 0 24px;
    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
}

.line,.linetop {
    border-top: 1px solid #333!important;
    font-weight: 700
}

.reportleft {
    float: left;
    width: 48%
}

.reportright {
    float: right;
    width: 48%
}

.saldoawak {
    margin: 48px 0 0
}

.line {
    border-bottom: 1px solid #333!important;
    background: #f2f2f2
}

.noline {
    border: none!important
}

.strong {
    font-weight: 700
}

#allcash {
    margin: 4px 0 0
}

.reportbox {
    padding: 32px 0
}

.exin {
    margin: 32px 0 0
}

.notifreport {
    font-size: 20px;
    line-height: 26px;
    padding: 72px 0;
    text-align: center;
    color: silver
}

.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 #aaa;
    border-radius: 4px;
    padding: 1.2em 1.6em
}

.tdplusmin {
    width: 18px
}

.tdgray {
    background: #f2f2f2
}

.subreport {
    font-size: 12px;
    line-height: 16px;
    width: 70%;
    background: #e8e8e8;
    color: #4d4d4d
}

.subreport td {
    padding: 2px 4px
}

.hover:hover {
    text-decoration: underline
}

.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
}

.reportarea {
    min-height: 480px
}

#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
}

#thenote,.smallnote:hover {
    border: 1px solid #fff
}

.smallnote:hover {
    box-shadow: 0 0 6px #959595
}

.isinote {
    padding: 8px 8px 54px;
    margin: 16px 0 0;
    background: url(gambar/ujung-note.png) right bottom no-repeat;
    height: 70px;
    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: #fff
}

.popnotebg {
    background: rgba(133,133,133,.5);
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none
}

#thenote,.imgnewnote,.notebottom {
    position: relative
}

.popnote {
    width: 300px;
    min-height: 300px;
    margin: 96px auto 0
}

#notearea,#notearea:focus,#notearea:hover {
    background: 0 0;
    border: none;
    resize: none;
    box-shadow: none;
    width: 274px;
    height: 280px;
    padding: 12px;
    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,.4)
}

.headnote {
    height: 32px;
    background: rgba(102,102,102,.5)
}

.imgnewnote {
    width: 48px;
    height: 48px;
    top: 56px;
    display: block;
    margin: 0 auto
}

.closenote,.downnote,.noteloader {
    position: absolute
}

.closenote {
    left: 4px;
    top: 4px;
    transition: ease-in .2s
}

.downnote {
    right: 5px;
    top: 5px;
    transition: ease-in .2s
}

.closenote:hover {
    top: 3px
}

.closenote:active,.downnote:hover {
    top: 4px
}

.downnote:active {
    top: 5px
}

.noteloader {
    border-radius: 16px;
    top: -40px;
    right: 8px;
    display: none
}

.notifcatatan {
    margin: 48px auto 0;
    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
}

.feature,.htop,.pricelabel,.top,.toptext {
    position: relative
}

.notifnotedel .tanya_hapus {
    margin: 0
}

.taboptaccount {
    width: auto
}

.taboptaccount td {
    padding: 6px
}

.download {
    float: right;
    width: 100px;
    margin: 36px 2px 0 0;
    text-align: right
}

.download img {
    margin: 0 2px;
    opacity: .5
}

.download img:hover {
    opacity: 1
}

.download a,.download a:hover {
    text-decoration: none
}

footer {
    padding: 24px 0 16px
}

footer,footer a {
    text-align: center;
    font-size: 10px;
    line-height: 16px;
    color: #9ea5aa
}

footer a:hover {
    color: #0a5d9f
}

.copyright {
    padding: 4px 0 0
}

.boxads {
    height: auto;
    background: #fff;
    margin: 0 4px;
    padding: 6px 0 26px
}

.adsarea,.boxadsreport {
    min-height: 24px;
    background: #3e4751;
    border-radius: 4px;
    padding: 4px;
    overflow: hidden
}

.adsarea {
    margin: 0 1px;
    box-shadow: 0 0 4px #333 inset
}

.boxadsreport {
    margin-bottom: 16px;
    box-shadow: 1px 1px 2px #999 inset
}

.pricelabel {
    float: right;
    right: -32px;
    top: -40px;
    display: block;
    z-index: 2
}

.upgradewrap {
    padding: 24px 0 32px!important
}

.toptext {
    font-weight: 300;
    text-align: right;
    float: right;
    top: 36px;
    right: -34px;
    width: 360px
}

.compinput,.feature,.invleft,.upgrade {
    float: left
}

.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;
    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;
    margin: 0 4.8% 76px
}

.featuretext {
    width: 52%;
    margin: 14px 0 0 45%;
    color: #2c3e50
}

p {
    padding: 8px 0;
    font-size: 13px;
    line-height: 18px
}

.navbutton,.subscribe,h4 {
    font-size: 14px
}

h4 {
    font-weight: 700
}

.feature img {
    display: block;
    position: absolute;
    top: -48px;
    left: -22px
}

#featdown {
    height: 182px
}

.boxfeature {
    padding-top: 54px
}

.subscribe {
    background: #969fa2;
    padding: 50px 0 18px 32px;
    color: #fff;
    margin-top: -64px;
    display: block
}

.bigsubs {
    font-size: 46px;
    font-weight: 300;
    line-height: 50px
}

.price,.upgrade .button {
    font-size: 24px;
    text-align: center
}

.upgradebox {
    padding: 32px 0
}

.upgrade {
    width: 18.5%;
    height: auto;
    position: relative;
    margin: 8px 3%
}

#save10,#save12\.5,.closestdesc,.price,.pricesmall,.statusdesc,.upgrade .button {
    position: absolute
}

.upgrade .bgup {
    width: 100%;
    height: auto
}

.price {
    width: 100%;
    color: #fff;
    top: 26px
}

.upgrade .button {
    width: 78%;
    bottom: 20px;
    left: 10%;
    font-weight: 700;
    padding: 8px 0;
    display: block
}

.upgrade .button:focus,.upgrade .button:hover {
    position: absolute;
    bottom: 21px;
    top: auto
}

#save10 {
    right: -32px;
    top: -20px
}

#save12\.5 {
    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
}

.thanksbox .backcash {
    display: block;
    margin: 32px auto 16px
}

.thanksbox h2,.thanksbox p {
    text-align: center
}

.underline:hover {
    text-decoration: underline
}

.userbox div {
    float: right
}

.boxusername {
    border-right: 1px solid #c6c6c6;
    color: #3d4850;
    width: auto;
    padding: 18px 16px 0 0;
    height: 28px
}

.boxstatus {
    height: 40px;
    padding: 5px 10px 0
}

.boxstatus:hover {
    background: #e1e1e1
}

.statusdesc {
    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 {
    right: -8px;
    top: -8px
}

.boxlogout {
    padding: 8px 10px 0;
    border-left: 1px solid #c6c6c6;
    height: 40px
}

.logoutlink {
    display: block;
    width: 32px;
    height: 32px;
    background: url(gambar/logout_icon.png) center top no-repeat;
    margin: 0 auto
}

.logoutlink:hover {
    background: url(gambar/logout_icon.png) center bottom no-repeat
}

.pricesmall {
    font-size: 13px;
    text-decoration: line-through;
    text-align: center;
    top: 8px;
    width: 100%;
    color: rgba(255,255,255,.6)
}

.plwupgrade {
    text-align: center;
    font-size: 24px;
    background: #e9f9ff;
    padding: 8px 0;
    color: #03638a;
    display: none
}

.invdelask,.invdelask small,.invtab th {
    color: #fff
}

.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
}

.invoiceframe {
    position: relative;
    padding-top: 15px;
}
.invoiceframe .bukutop {
    position: absolute;
    top: 0px;
    margin: auto;
    z-index: 10;
}
.invoiceline input {
    margin: 2px 0
}

.invleft {
    max-width: 48%
}

.inright {
    float: right;
    max-width: 48%
}

#invoiceline_1 .inright {
    text-align: right
}

.invoiceline {
    border-bottom: 1px solid #ccc;
    padding: 16px 0
}

#invtabtotal,.invtab td {
    border-bottom: 1px solid #999
}

.invcoverarea {
    padding: 8px 0 0;
    position: relative
}

.invcover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    z-index: 5;
    top: 0;
    left: 0
}

.invoiceframe h4 {
    font-size: 16px;
    line-height: 24px
}

#invoiceline_4 textarea,.invcheck,.invtab td textarea {
    font-size: 12px;
    line-height: 16px
}

#invoiceline_2 .invleft {
    padding-top: 26px
}

.invtab {
    border-top: 1px solid #999
}

.invtab th {
    text-align: center;
    background: #6b787b;
    padding: 8px 0
}

.invtab td {
    vertical-align: top;
    padding: 4px
}

.invaddline {
    text-align: right;
    padding: 8px 0 24px
}

#invtabtotal td {
    vertical-align: baseline;
    border-bottom: none
}

.tdinvdel,.tdmiddle {
    vertical-align: middle!important
}

.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
}

.linetotal,.thlinetotal,.unitthprice {
    width: 128px
}

.tdinvdel {
    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 #ccc;
    position: relative
}

.fileupload,.uploadbox,.uploadbox div,.uploadbox input,.uploadbutton {
    cursor: pointer!important;
    display: block
}

.uploadbox:hover {
    text-decoration: underline
}

.caldownsmall,.downsmall {
    display: none
}

.boxdownline {
    font-size: 12px!important;
    line-height: 16px!important
}

.ktpdesc {
    font-size: 12px;
    line-height: 18px
}

.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
}

.invdelask,.popdownmail {
    border: 2px solid #fff;
    box-shadow: 0 0 8px #000
}

.uploadbox .progress .progress-bar {
    background: #294d77;
    height: 16px
}

.invremoveicon {
    position: absolute;
    top: 4px;
    left: 4px;
    opacity: .5
}

.invremoveicon:hover {
    opacity: 1
}

#invoiceline_6 {
    position: relative
}

.invloader {
    position: absolute;
    left: 380px;
    top: 20px;
    display: none
}

.invediticon {
    opacity: .7
}

.invediticon:hover {
    opacity: 1
}

.invdelask {
    position: fixed;
    top: 42%;
    left: 50%;
    background: #900;
    padding: 16px;
    border-radius: 8px;
    line-height: 16px;
    width: 260px;
    height: auto;
    text-align: center;
    display: none;
    z-index: 100
}

.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;
    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
}

#bodyinvoice {
    padding-top: 36px;
    min-width: 75%
}

.custlisttab td,.invbooktab td {
    border-bottom: 1px solid #ccc
}

.pleaseupgrade {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(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;
    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
}

.premkonfirm {
    display: block;
    float: right;
    height: 200px;
    width: auto
}

.konfirmasipem {
    padding: 32px
}

.h3konfirm,.imgbank {
    padding: 8px 0
}

.h3konfirm {
    text-align: center;
    color: #2c3e50;
    background: #ccc
}

#invstamp {
    display: flex;
    flex-wrap: nowrap;
    width: 100%
}

.inpstamp {
    margin-right: 20px
}

.titleedithapiutform,.titlehapiutform {
    padding: 8px;
    border-radius: 4px
}

.alsocat {
    padding: 8px 0 8px 8px;
    border-bottom: 1px dotted #797979;
    color: #272727
}

.kastool #newdebt {
    background: url(gambar/button_plus.png) 10px 6px no-repeat #6f3d4f
}

.kastool #newdebt:hover {
    background: url(gambar/button_plus.png) 10px 6px no-repeat #9e0039
}

.kastool #newcredit {
    background: url(gambar/button_plus.png) 10px 6px no-repeat #436e58
}

.kastool #newcredit:hover {
    background: url(gambar/button_plus.png) 10px 6px no-repeat #00a651
}

.kastool #debtgreen,.kastool #debtred {
    background-repeat: no-repeat;
    background-position: 10px 6px
}

.helphapiut {
    opacity: .6;
    position: relative;
    left: -.8px
}

.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 {
    margin-top: 8px
}

.edithapiuticon {
    opacity: .4;
    cursor: pointer;
    position: relative;
    bottom: -2px;
    left: 8px
}

.edithapiuticon:hover {
    opacity: 1
}

.kastool #debtred {
    background-color: #6f3d4f
}

.kastool #debtred:hover {
    background-color: #9e0039
}

.kastool .plusdebt {
    background-image: url(gambar/button_plus.png)
}

.kastool #debtgreen {
    background-color: #436e58
}

.kastool #debtgreen:hover {
    background-color: #00a651
}

.kastool .mindebt {
    background-image: url(gambar/button_min.png)
}

.edithapiut .catat {
    right: auto;
    left: 4px;
    top: -96px
}

.buttongrey {
    background: #6e7b89!important;
    border: 1px solid #6e7b89!important
}

.buttongrey:hover {
    background: #1c2630!important
}

.notif small {
    color: #fff
}

#catat_hpitem {
    top: auto;
    right: 0;
    left: auto
}

.notifdelitem,.popup {
    position: fixed;
    top: 40%
}

.notifdelitem {
    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: 6px 0 0
}

.kastitlekananhapiut {
    width: auto
}

.toolhapiut {
    height: 52px;
    float: left;
    width: 100px;
    position: relative
}

.autohidehapiut {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    display: block;
    padding: 12px 0 0
}

#appimporloader,#appprosesloader,#appresetloader,.loader_checkout,.loader_discode {
    display: none;
    position: absolute
}

.autohidehapiut a:hover {
    text-decoration: none
}

#btnbatal:hover,.impor_reset a:hover,.resetkas:hover {
    text-decoration: underline
}

.reportbulanarea .lap_tgl {
    font-size: 20px;
    background: #818181;
    color: #fff;
    border: none;
    line-height: 26px;
    font-weight: 300;
    text-align: right;
    padding: 0;
    cursor: pointer;
    width: 180px
}

.reportbulanarea .lap_tgl:active,.reportbulanarea .lap_tgl:focus,.reportbulanarea .lap_tgl:hover {
    background: #818181;
    border: none;
    color: #c4c4c4;
    box-shadow: none
}

.reportbulanarea .bulankastgl {
    padding: 22px 28px 0 0!important;
    float: right!important;
    text-align: right
}

.bottominput td,.navbutton,.popup {
    text-align: center
}

.resetkas,.resetkastitle {
    color: #8d9295;
    font-size: 12px;
    line-height: 16px
}

.resetkas {
    cursor: pointer
}

.resetkas:hover {
    color: #3f3f3f
}

.impor_reset {
    font-size: 12px;
    line-height: 16px;
    padding: 32px 0 0
}

.impor_reset a {
    color: #888
}

.impor_reset a:hover {
    color: #3f3f3f
}

.popup,.popup small {
    color: #fff
}

.popup {
    width: 360px;
    height: auto;
    left: 50%;
    margin-left: -150px;
    z-index: 500;
    background: #900;
    padding: 16px;
    line-height: 18px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 16px #000
}

.popup input[type=button] {
    background: #000
}

.popup input[type=button]:hover {
    background: #333
}

#appresetloader {
    right: 24px;
    top: 100px
}

#appimporloader {
    right: 60px;
    top: 144px
}

#appprosesloader {
    right: 32px;
    top: 172px
}

.loader_checkout {
    right: 145px
}

.loader_discode {
    right: 300px;
    top: 144px
}

.bukubeli .notif {
    margin: 8px 10px
}

.navblock .premium-nav {
    display: block
}

#trketedit {
    color: red;
    margin-top: 10px
}

.premium-nav {
    margin-bottom: 32px
}

.activ {
    display: block!important
}

#colduedate,#colduedate2,.bottominput,.catlabel,.navbutton,.nominaltab,.option_back_small,.shortdate,.small_bulan_nav_left,.small_bulan_nav_right,.smallbalance,.smallogo,.smalltool,.userlabel {
    display: none
}

.navbutton {
    position: absolute;
    width: 92px;
    left: 0;
    top: 0;
    line-height: 24px;
    color: #3d4850;
    cursor: pointer;
    height: 36px;
    padding: 12px 0 0
}

.navbutton:hover {
    background: #3d4850;
    color: #fff
}

.shortdate {
    font-size: 16px
}

.sdsmall {
    font-size: 13px
}

table#bukukas th {
    background-color: #3e4751
}

table#taborder th {
    background-color: #2e3b49
}

.bottominput {
    position: fixed;
    bottom: 0;
    width: 100%
}

.bottominput td {
    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
}

.kastitlehapiutdetil {
    width: 52%
}

.alwidget img {
    width: 1px;
    height: 1px
}

.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
}

#downfile,.boxangkabln {
    text-align: center
}

.vcrname {
    margin: 0
}

.vcrinput {
    margin-left: 0
}

.barisakhir {
    width: 100%;
    margin-top: 30px
}

.barisakhir p {
    float: left
}

.btnaksi {
    float: right;
    display: inline
}

.cart_area {
    background: #fff;
    margin: 0;
    padding: 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
}

.boxangkabln {
    margin-top: 50px
}

.pangka {
    font-size: 150px;
    font-weight: 700;
    color: #fffdff
}

.boxthanks-1,.pbulan,.voucheryes {
    font-weight: lighter
}

.pbulan {
    font-size: 23px;
    color: #fffdff;
    margin-top: 40px
}

.boxbelikanan {
    float: left;
    width: 500px;
    margin: 30px 40px 20px 5px
}

.boxthanks-1 {
    font-size: 30px;
    font-family: Open Sans;
    margin-bottom: 5px
}

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

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

.cekoutbtn {
    float: right
}

.batalbtn {
    float: left
}

.voucheryes {
    background: #419f61;
    color: #fff;
    border-radius: 5px;
    width: 560px
}

#btnbatal {
    background: #fff;
    color: #000;
    border: none
}

#nmkas {
    font-size: 25px;
    padding-top: 6px;
    line-height: 28px
}

#dkripkas {
    font-size: 13px;
    padding-top: 0;
    overflow: hidden
}

#hp_cash,#hp_cat,#hpitem_cash,#hpitem_cat,#reportselectbook,#trans_cat,#transferkasfrom,#transferkasto {
    width: 150px
}

.ui-autocomplete .ui-menu-item {
    padding: 0!important
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: 6px 2em 6px .8em!important
}

.ui-autocomplete .ui-state-active {
    border: none!important;
    color: #fff!important;
    background: #007fff!important;
    margin: 0 auto!important;
    -webkit-transition: .4s ease;
    -moz-transition: .4s ease;
    -o-transition: .4s ease
}

.popdownmail {
    background: #0a5d9f;
    padding: 16px;
    border-radius: 8px;
    color: #fff;
    line-height: 16px;
    height: auto;
    display: none;
    z-index: 100;
    margin: 0 auto;
    max-width: 720px;
    position: absolute;
    top: 20%;
    left: 35%
}

#atmailcancel,#atmailsend {
    background: #fff;
    color: #222
}

#atmailcancel:hover,#atmailsend:hover {
    background: #e1e1e1
}

#main_use {
    width: 224px
}

#tglcusreportfrom {
    padding: 24px 0 0!important;
    text-align: left;
    left: -300px;
    position: relative
}

#lap_tgl_from,#lap_tgl_to,.customtoreport,.noticeprofile {
    text-align: center
}

#tglcusreportto {
    padding: 24px 20px 0 0!important;
    right: -170px;
    position: relative
}

.customtoreport {
    font-size: 22px;
    color: #fff;
    padding: 26px 0 0;
    float: right;
    line-height: 20px;
    font-weight: 300;
    width: 80px;
    right: -170px;
    position: relative
}

#bulancustomarea {
    width: 55%
}

#main_compaddress1,#main_compaddress2 {
    margin-bottom: 10px
}

.atchoosefile {
    margin-top: 15px
}

.noticeprofile {
    background: #3e4751;
    padding: 8px;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    border-radius: 4px;
    margin: 10px 3px;
    border: 1px solid #fff;
    box-shadow: 0 0 4px #999;
    position: relative
}

.noticeprofile .star {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 32px
}

.kbox,.networkbox,.networkwrap {
    position: relative
}

.noticeprofile .star.left {
    left: 10px
}

.noticeprofile .star.right {
    right: 10px
}

.noticeprofile .ct_notif {
    width: calc(100% - 75px);
    display: inline-block
}

#noticeprofilekas {
    display: none
}

.optionchild {
    margin-bottom: 32px
}

.networkwrap {
    margin-top: 50px;
    padding: 24px 0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 18px;
    background: #fff
}

.networkbox {
    float: left;
    background: #fff;
    width: 440px;
    height: 100px;
    border-radius: 8px;
    margin: 0 20px 20px 0;
    border: 7px solid #3e4751;
    line-height: 16px;
    font-size: 12px
}

.konfirmleft,.konfirmright {
    padding: 5px
}

.kbox {
    width: 40%;
    float: left;
    margin: 0 4%;
}

.konfirmasi_box {
    padding-top: 30px
}

.imgnet {
    display: block;
    max-width: 100%;
    height: auto
}

#mainchild_loader {
    position: absolute;
    right: 80px;
    display: none
}

.sendmail_loader {
    position: absolute;
    right: 260px;
    display: none
}

#DataTable_overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: gray;
    -moz-opacity: .75;
    opacity: .75;
    display: none
}

#DataTable_overlay h2 {
    position: fixed;
    margin-left: 40%;
    top: 40%
}

.loadingnotif {
    text-align: center;
    padding: 32px 16px;
    width: 240px;
    background: #fff;
    position: fixed;
    top: 50%;
    left: calc(50% + 100px);
    margin: -60px 0 0 -135px;
    border-radius: 8px;
    box-shadow: 0 0 32px #60676f;
    z-index: 100
}

.reportloadtext {
    padding: 16px 0 8px 0;
    font-size: 14px
}

.summarydetailtab {
    width: 100%;
    margin: 20px auto 30px
}

.summarydetailtab td {
    padding: 8px;
    vertical-align: middle;
    line-height: 16px
}

.content_ref {
    padding: 28px 24px;
    width: calc(100% - 50px)
}

.banner_referral {
    width: 100%;
    height: auto;
    margin-bottom: 20px
}

.referensi_register {
    margin-top: 52px;
    padding: 24px 24px 32px;
    border: 1px solid #aaa;
    border-radius: 4px
}

.referensi_register input {
    padding: 10px;
    width: calc(100% - 22px);
    font-size: 17px;
    border: 1px solid #aaa;
    background: #ececec;
    color: #5e5e5e
}

.referensi_register input.invalid {
    background-color: #fdd
}

.referensi_register .checkbox_term {
    display: inline-block
}

.referensi_register .checkbox_term.invalid {
    background-color: #fdd
}

.referensi_register .checkbox_term input[type=checkbox] {
    display: inline-block;
    width: auto;
    vertical-align: text-bottom
}

.referensi_register .checkbox_term label {
    font-weight: 700
}

.referensi_register .tab {
    display: none;
    -webkit-transition: .4s ease;
    -moz-transition: .4s ease;
    -o-transition: .4s ease
}

.referensi_register .tab.open {
    display: block
}

.referensi_register .tab-termcond>.thecontent {
    max-height: 550px;
    overflow: auto;
    margin-bottom: 30px
}

.referensi_register .wrapbtn {
    position: relative;
    overflow: auto;
    margin-top: 20px
}

.referensi_register button {
    background: #0a5d9f;
    border-radius: 6px;
    color: #feffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer
}

.referensi_register button:hover {
    background: #0a5d9f
}

.referensi_register #prevBtn {
    background-color: #60676f
}

.referensi_register #nextBtn:disabled {
    opacity: .5
}

.referensi_register .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: .5
}

.referensi_register .step.active {
    opacity: 1
}

.referensi_register .step.finish {
    background-color: #04aa6d
}

.referensi_register ::-webkit-scrollbar {
    width: 5px
}

.referensi_register ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #edeeee;
    border-radius: 10px
}

.referensi_register ::-webkit-scrollbar-thumb {
    background: #60676f;
    border-radius: 10px
}

.thecontent h1 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 20px
}

.thecontent h2 {
    font-size: 24px;
    line-height: 20px;
    font-weight: 700;
    margin-bottom: 20px
}

.thecontent h3 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 15px;
    font-weight: 700
}

.thecontent h4 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 15px
}

.thecontent h5 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px
}

.thecontent h6 {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 15px
}

.thecontent p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 15px
}

.thecontent a {
    color: #0a5d9f;
    font-size: 16px;
    cursor: pointer;
    font-style: italic;
    font-weight: 700
}

.thecontent a:hover {
    color: #3e4751;
    text-decoration: underline
}

.thecontent img {
    max-width: 100%;
    height: auto
}

.thecontent img,.thecontent img.alignleft {
    float: left;
    display: block;
    margin: 0 30px 17px 0
}

.thecontent img.aligncenter {
    float: none;
    margin: 0 auto 17px
}

.thecontent img.alignright {
    float: right;
    margin: 0 0 17px 30px
}

.thecontent ul {
    list-style: disc;
    margin-bottom: 15px;
    padding-left: 40px
}

.thecontent ol {
    list-style: decimal;
    margin-bottom: 15px;
    padding-left: 40px
}

.thecontent ol li,.thecontent ul li {
    font-size: 16px;
    line-height: 20px;
    padding-left: 8px
}

.wrapuserref_detail {
    padding: 0 20px
}

.wrapuserref_detail .topcontent {
    margin-bottom: 20px
}

.wrapuserref_detail .topcontent img {
    width: 150px;
    height: auto;
    margin-right: 35px;
    display: inline-block;
    vertical-align: middle
}

.wrapuserref_detail .topcontent .contentitle {
    width: calc(100% - 200px);
    display: inline-block;
    text-align: left;
    vertical-align: middle
}

.wrapuserref_detail .topcontent .contentitle p {
    text-align: left;
    padding: 0;
    font-size: 16px;
    line-height: 22px
}

.wrapuserref_detail .topcontent .contentitle h2 {
    text-align: left;
    font-weight: 700;
    padding: 0;
    margin: 10px 0
}

.btn_viewrefcomm {
    position: absolute!important;
    top: 25px!important;
    right: 20px
}

.poptrans {
    background: #efefef none repeat scroll 0 0;
    color: #474f4f;
    border: 1px solid #fff;
    border-radius: 8px;
    box-shadow: 0 0 16px #333;
    height: auto;
    left: 50%;
    line-height: 18px;
    margin-left: -217px;
    margin-top: -230px;
    padding: 16px;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 700px;
    display: none
}

.poptrans h3 {
    padding: 5px 0 25px 0
}

#poptrans input[type=email],#poptrans input[type=number] {
    padding: 4px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #e3e3e3;
    color: #5e5e5e
}

.poptrans .submitarea {
    position: relative;
    width: auto;
    margin: 16px 0 8px 0
}

.poptrans.popdel {
    background: #ffdfdf;
    width: 500px;
    margin-left: -187px
}

.poptrans .editloader {
    position: absolute;
    right: 116px;
    top: 2px;
    display: none
}

.detailtab td {
    border-bottom: 1px dotted #ccc;
    padding: 8px;
    vertical-align: middle;
    line-height: 16px
}

.summarydetailtab {
    width: 100%;
    margin: 20px auto 30px
}

.summarydetailtab td {
    padding: 8px;
    vertical-align: middle;
    line-height: 16px
}

@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: 130px;
        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,#taborder th {
        width: auto!important
    }

    .tabreport td {
        font-size: 13px;
        line-height: 18px
    }

    .editdebtbox,.paydebt {
        margin-left: -150px
    }

    .upgradeinside img {
        width: 72px;
        height: auto
    }

    .debtdatesmall {
        display: block
    }

    .debtdatebig {
        display: none
    }

    .orddatebig {
        display: block
    }

    .kastitlehapiutdetil {
        width: 55%
    }

    .boxbelikiri {
        float: none;
        margin: 0 auto;
        width: 192px
    }

    .boxbelikanan {
        float: none;
        margin: 10px auto;
        text-align: center
    }

    .option_belibox {
        width: 28%
    }

    .invdelask {
        top: 45%!important;
        left: 35%!important
    }

    .notifdelitem {
        top: 33%!important;
        left: 34%!important
    }

    .loader_discode {
        right: 200px;
        top: 324px;
        display: none
    }

    .loadnotif {
        margin: -60px 0 0 -135px
    }

    #bulancustomarea {
        width: 50%!important
    }

    .popdownmail {
        top: 22%;
        left: 20%
    }

    .voucheryes {
        position: relative;
        right: 51px
    }

    .networkbox {
        left: 8%
    }

    .loadingnotif {
        left: 50%
    }
}

@media only screen and (max-width: 1100px) {
    #tglcusreportfrom,#tglcusreportto {
        text-align:center!important;
        width: 100%
    }

    #tglcusreportfrom {
        padding: 0!important;
        margin: 0;
        left: 0!important
    }

    #tglcusreportto {
        padding: 20px 0 0!important;
        right: 0!important
    }

    .customtoreport {
        padding: 0!important;
        text-align: center;
        width: 100%;
        margin: 0;
        display: block;
        top: 25px;
        position: absolute;
        right: 0!important
    }

    .networkbox {
        left: 5%;
        width: 400px
    }
}

@media only screen and (max-width: 960px) {
    .bukutop,.kastool {
        height:auto
    }

    .kasrightborder,.tabdesc {
        /* display: none */
    }
    .tabdesc small {
        text-align: left;
    }

    .bloktengah,.bukubeli,.bukutengah {
        min-height: 200px
    }

    #bulannavreport,.subscribe {
        position: relative
    }

    .dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin: 0 auto 10px
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: .5em
    }

    .kastitlekanan {
        float: none
    }

    .kassaldo,.kastitle {
        width: 49%
    }

    .boxbelikiri {
        float: none;
        margin: 0 auto;
        width: 192px
    }

    .boxbelikanan {
        float: none;
        margin: 20px auto
    }

    .desckas {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

    .bulankas {
        float: none;
        background: 0 0;
        width: 100%
    }

    .kastool {
        float: right;
        text-align: right;
        padding-bottom: 8px
    }

    .featuretext,.upgradebox {
        text-align: center
    }

    .kasbutton,.upgrade {
        display: inline-block;
        float: none
    }

    .bulannav {
        top: 0
    }

    .bukutengah {
        margin: 0;
        border-radius: 8px 8px 0 0
    }

    .bukubeli {
        margin: 0;
        border-radius: 0
    }

    .bloktengah {
        width: 96%
    }

    .judulkas {
        font-size: 23px;
        line-height: 28px
    }

    .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
    }

    .upgrade {
        width: 180px;
        margin: 16px 48px
    }

    .hpfrom,.invbduedate,.kasdown,.kasiconhapiutdetil,.seconddebttool {
        display: none
    }

    #featdown,.feature {
        height: 224px
    }

    .feature img {
        left: 50%;
        top: -48px;
        margin-left: -64px;
        width: 128px;
        height: auto
    }

    .featuretext {
        margin: 96px 8px 0;
        width: auto
    }

    .searchbukutop {
        background: #939393;
        padding: 16px
    }

    .edithapiut .catat {
        margin: 0
    }

    .option_belibox {
        width: 44%
    }

    .invdelask {
        top: 43%!important;
        left: 35%!important;
        width: 260px!important
    }

    .kastoolhapiut,.kastoolhapiutdetil {
        background: 0 0
    }

    .networkbox {
        left: 0;
        margin: 0 0 20px 20px
    }
}

@media only screen and (max-width: 900px) {
    .invstampimg_paid,.invstampimg_urgent {
        top:-14px;
        width: 120px!important;
        height: 87px!important
    }

    .invstampimg_paid {
        right: 250px
    }

    .invstampimg_urgent {
        right: 350px
    }

    .invstampimg_past {
        right: 250px;
        top: 56px;
        width: 120px!important;
        height: 87px!important
    }

    .invstampimg_approved,.invstampimg_received {
        top: 122px;
        width: 120px!important;
        height: 87px!important
    }

    .invstampimg_approved {
        right: 350px
    }

    .invstampimg_received {
        right: 250px
    }

    .invstampimg_final {
        right: 350px;
        top: 56px;
        width: 120px!important;
        height: 87px!important
    }

    .invdesc {
        min-width: 205px
    }

    .notifdelitem {
        top: 33%!important;
        left: 27%!important
    }

    #bulancustomarea {
        width: 50%!important
    }

    #tglcusreport {
        padding: 0 20px 0 0!important
    }

    .networkbox {
        left: 0;
        width: 320px
    }
}

@media only screen and (max-width: 742px) {
    .scrolltabinv {
        overflow-x:scroll;
        white-space: nowrap;
        max-width: 100%;
        height: auto
    }

    .loader_discode {
        position: absolute;
        right: 120px;
        top: 332px;
        display: none
    }

    #create_book_notif {
        width: 660px;
        margin: 0 auto
    }

    .bulannav,.kastool {
        float: none;
        width: 100%
    }

    .tabbg {
        display: none
    }

    .kastool {
        text-align: center;
        height: auto;
        padding-bottom: 8px
    }

    .bulannav {
        top: -45px
    }

    #catat_trans,#catat_trans_transfer {
        left: 50%;
        right: auto;
        margin: 0 0 0 -230px
    }

    .kastoolhapiutdetil {
        text-align: right
    }

    #newcredit,#newdebt {
        float: right
    }

    #bulannavreport {
        margin: 70px 20px 0 0;
        position: absolute
    }

    .bukutop {
        background: 0 0
    }

    .popup {
        left: 42%
    }

    .voucheryes {
        width: 626px;
        right: 85px
    }

    .networkbox {
        left: 0;
        width: 400px;
        float: none;
        margin: 20px auto
    }
}

@media only screen and (max-width: 680px) {
    #bukukas th,#taborder th {
        color:#d1d1d1;
        font-weight: 300;
        padding: 12px 0;
        border-right: 1px solid #525e6b;
        font-size: 14px
    }

    #bukukas td:last-child,#bukukas th:last-child,#taborder td:last-child,#taborder th:last-child {
        border-right: none
    }

    #bukukas td,#taborder td {
        padding: 8px;
        border-right: 1px solid #fff;
        line-height: 16px;
        vertical-align: middle
    }

    .kassaldo,.kastitle {
        float: none;
        width: 100%
    }

    .bulankas,.kassaldo,.kastitlekanan {
        text-align: center
    }

    #bukukas .tabbalance,#taborder .tabbalance,.kasicon,.motto,.thebalance {
        display: none
    }

    .small_bulan_nav_left:hover,.small_bulan_nav_right:hover,.smalltool a:hover {
        text-decoration: none
    }

    .bodyreport,.bulankas,.catat,.titlehapiutform {
        border-radius: 0
    }

    #bukukas td,#taborder td,.taboption td {
        vertical-align: middle
    }

    .bloktengah {
        min-width: 0;
        width: 100%
    }

    .kastitle {
        padding: 16px 0;
        border-bottom: 1px solid #999
    }

    .kassaldo {
        padding: 4px 0 8px;
        background: #c5c5c5
    }

    .blockright,.judulkas,.kasbody,.kastop {
        padding: 0
    }

    .kastitlekanan {
        width: 100%
    }

    .smallbalance {
        display: inline
    }

    .smallsaldo {
        color: #505050;
        line-height: 14px
    }

    .edithapiut .catat {
        top: auto;
        left: 0;
        bottom: 0
    }

    .bukubeli,.bukutengah {
        padding: 0;
        border-bottom: 2px solid #939393
    }

    .userbox {
        display: none
    }

    .logo {
        float: right;
        padding: 6px 0 0;
        position: relative;
        right: -8px
    }

    #catat_trans,#catat_trans_transfer,.catat {
        left: 0;
        right: auto;
        margin: 0
    }

    .bottominput {
        display: block;
        border-top: 2px solid #fff;
        box-shadow: 0 0 4px #333
    }

    .footlogin {
        padding: 16px 8px 64px
    }

    .catat {
        position: fixed;
        bottom: 0;
        top: auto;
        width: 100%;
        padding: 0 0 16px;
        border-left: 0;
        border-right: 0;
        box-shadow: 0 0 4px #515151
    }

    .catathapiut {
        bottom: 0
    }

    .bulannav {
        margin-top: 20px;
        margin-left: 0;
        position: relative;
        top: -1px
    }

    .small_bulan_nav_left,.small_bulan_nav_right {
        width: 21px;
        height: 24px;
        display: block;
        position: absolute
    }

    .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
    }

    .fulllogo {
        display: inline-block;
        width: 56px;
        height: auto
    }

    .smallogo {
        display: none
    }

    .logo {
        text-align: right;
        width: 52px
    }

    .bodyoptkas,.selectcashbar,.smalltool div,small {
        text-align: center
    }

    .smalltool {
        display: block;
        border-top: 4px solid #5d5d5d
    }

    .smalltool div {
        float: left;
        width: 32.5%;
        padding: 10px 0 6px;
        border-right: 1px solid #4e545c;
        border-bottom: 1px solid #4e545c;
        border-left: none
    }

    .navleft {
        top: -11px;
        z-index: 60;
        height: 102%
    }

    .refreshlink {
        display: block;
        width: 32px;
        height: 32px;
        background: url(gambar/icon_refresh.png) center top no-repeat;
        margin: 0 auto
    }

    .refreshlink:hover {
        background: url(gambar/icon_refresh.png) center bottom no-repeat
    }

    .tdkategori {
        padding: 8px 8px 0!important
    }

    .nominaltab {
        margin: 8px -8px 0;
        padding: 4px 8px;
        background: rgba(255,255,255,.6);
        color: #5f5f5f;
        display: block
    }

    header {
        height: 36px;
        position: fixed;
        top: 0
    }

    .navbutton {
        font-size: 14px;
        height: 30px;
        padding: 6px 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: 82px;
        display: inline-block
    }

    .catlabeldesc {
        padding-bottom: 8px;
        display: block
    }

    .mainicon,.subreport .tdmatauang {
        display: none
    }

    .catatright #itemdesc {
        height: auto;
        padding: 6px 0 8px 8px
    }

    .catatbutton {
        padding: 10px 6px 0
    }

    .selectcashbar {
        height: auto
    }

    .reportleft {
        float: none;
        width: 100%
    }

    .reportright {
        float: none;
        width: 100%;
        padding-top: 24px
    }

    .reportbulanarea {
        position: relative;
        right: 0;
        width: 100%;
        height: 48px;
        border-radius: 0;
        margin: 6px 0 0
    }

    #bulankasreport {
        float: none;
        width: 100%;
        font-size: 16px
    }

    .selectcashbar {
        padding: 8px 0 0
    }

    .tabreport {
        width: 100%
    }

    .tabreport td {
        width: auto!important
    }

    small {
        display: block
    }

    .notetitle {
        border: none
    }

    .adsarea,.debt_tool,.debtblock,.hapiuttop,.kastoolhapiut,.optionwrap,.searchbukutop {
        border-radius: 0
    }

    #bodynotes {
        padding-top: 0
    }

    #invoiceline_1 .inright,.option_bookbox,.rememberbox small,.smallleft {
        text-align: left
    }

    .option_bookbox {
        margin: 8px;
        display: inline-block;
        float: none
    }

    .boxusername,.download>img {
        display: none
    }

    .option_bookname {
        text-align: left;
        padding-left: 8px
    }

    .optionwrap {
        border-left: none;
        border-right: none;
        font-size: 13px;
        padding: 16px 16px 24px
    }

    .taboption {
        width: 100%
    }

    .taboption td {
        padding: 4px
    }

    .option_back {
        margin: -8px 8px 0 0
    }

    .boxads {
        padding-bottom: 26px
    }

    .adsarea {
        margin: 0;
        border-bottom: 1px solid #525e6b;
        padding: 0
    }

    .bigsubs,.invnumb input {
        display: block
    }

    .bigsubs {
        font-size: 32px;
        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
    }

    .tabdebthistory,.upgradebox p {
        font-size: 12px;
        line-height: 16px
    }

    .boxfeature {
        padding-top: 64px
    }

    article {
        width: 100%;
        margin: 16px auto 0
    }

    .feature {
        height: 240px
    }

    #featdown {
        height: 280px
    }

    .public_menu {
        top: 37px
    }

    .invleft {
        float: none;
        max-width: none
    }

    .inright {
        float: none;
        padding-top: 28px;
        max-width: none
    }

    .debtdesc,.tabutangdesc {
        display: none
    }

    #invoicebox {
        padding: 8px
    }

    .custlisttab th,.invbooktab th {
        background: #2c3e50;
        color: #fff;
        padding: 8px 0
    }

    .invbooktab td {
        padding: 4px;
        min-width: 48px
    }

    .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
    }

    .addsign {
        font-size: 10px;
        line-height: 14px
    }

    .debtbig {
        font-size: 14px;
        line-height: 18px;
        top: 0
    }

    .debtto,.upgradetextbottom {
        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
    }

    .iconcart,.moonlefthapiut,.premkonfirm {
        display: none
    }

    .searchbukutop {
        text-align: center;
        line-height: 48px
    }

    .reportbulanarea .bulankastgl {
        float: none;
        padding: 12px 0!important;
        text-align: center
    }

    .boxbelikanan {
        float: none;
        margin: 20px auto;
        width: 100%
    }

    .boxbelikiri {
        margin-top: 20px
    }

    .boxbelibawah {
        margin-bottom: 20px
    }

    .option_belibox {
        width: 75%;
        text-align: left;
        margin-left: 60px
    }

    .invstampimg_paid,.invstampimg_urgent {
        top: -14px;
        width: 120px!important;
        height: 87px!important
    }

    .subscribe {
        padding-top: 30px;
        margin-top: -55px
    }

    .invqty {
        margin-left: 8px!important
    }

    .invstampimg_paid {
        right: 250px
    }

    .invstampimg_urgent {
        right: 350px
    }

    .invstampimg_past {
        right: 250px;
        top: 56px;
        width: 120px!important;
        height: 87px!important
    }

    .invstampimg_approved,.invstampimg_received {
        top: 122px;
        width: 120px!important;
        height: 87px!important
    }

    .invstampimg_approved {
        right: 350px
    }

    .invstampimg_received {
        right: 250px
    }

    .invstampimg_final {
        right: 350px;
        top: 56px;
        width: 120px!important;
        height: 87px!important
    }

    #tglcusreportfrom,#tglcusreportto {
        width: 180px!important;
        padding: 12px!important;
        position: relative
    }

    .notifdelitem {
        top: 33%!important;
        left: 20%!important
    }

    #create_book_notif {
        width: 510px;
        margin: 0 auto
    }

    .boxstatus:hover {
        background: #60676f
    }

    #newcredit,#newdebt {
        margin-right: 8px
    }

    #bulannavreport {
        margin-top: 60px;
        top: -45px;
        margin-right: auto
    }

    .kastoolhapiutdetil {
        display: block;
        background: #e9e9e9;
        text-align: center
    }

    .labelcheckdue {
        margin-left: 84px
    }

    #catatkas {
        display: none
    }

    .hapiuttop,.kastoolhapiut {
        background: 0 0;
        box-shadow: none;
        border-top: none;
        margin: 10px 0
    }

    .bottominput.disablecatat {
        background: #e1e1e1
    }

    .disablecatat td {
        opacity: .6
    }

    #bulancustomarea {
        width: 100%!important
    }

    #tglcusreportfrom {
        text-align: left;
        left: -360px!important
    }

    #tglcusreportto {
        right: -120px!important
    }

    .customtoreport {
        right: -123px!important;
        position: relative;
        width: 80px!important;
        padding: 15px 0!important;
        top: 0!important
    }

    .voucheryes {
        width: 490px;
        right: 0;
        margin: 0 auto
    }
}

@media only screen and (max-width: 600px) {
    .kbox {
        width:100%
    }

    .konfirmasi_box {
        padding: 30px 10px 0
    }
}

@media only screen and (max-width: 590px) {
    #invstamp {
        display:flex;
        flex-wrap: wrap
    }

    .scrolltabinv {
        overflow-x: scroll;
        white-space: nowrap;
        max-width: 100%;
        height: auto
    }

    .invdelask {
        top: 40%!important;
        left: 24%!important;
        width: 240px!important
    }

    .loader_discode {
        position: absolute;
        right: 20px;
        top: 336px;
        display: none
    }

    #tglcusreportfrom {
        left: -310px!important
    }

    #tglcusreportto,.customtoreport {
        right: -180px!important
    }
}

@media only screen and (max-width: 520px) {
    .invstampimg_approved,.invstampimg_final,.invstampimg_paid,.invstampimg_past,.invstampimg_received,.invstampimg_urgent {
        right:250px;
        width: 120px!important;
        height: 87px!important
    }

    .invbdate,.invloader {
        display: none
    }

    .invstampimg_paid {
        top: -27px
    }

    .invstampimg_urgent {
        top: 20px
    }

    .invstampimg_past {
        top: 68px
    }

    .invstampimg_approved {
        top: 115px
    }

    .invstampimg_received {
        top: 160px
    }

    .invstampimg_final {
        top: 205px
    }

    .invloader {
        position: relative;
        left: 50px;
        top: 20px
    }

    .notifdelitem {
        top: 33%!important;
        left: 15%!important;
        width: 340px!important
    }

    #create_book_notif {
        width: 400px;
        margin: 0 auto
    }

    #tglcusreportfrom {
        left: -280px!important;
        padding: 12px 0!important
    }

    #tglcusreportto {
        right: -165px!important;
        padding: 12px 0!important
    }

    .customtoreport {
        right: -162px!important
    }

    .voucheryes {
        width: 450px
    }
}

@media only screen and (max-width: 480px) {
    #tglcusreportto,.customtoreport {
        text-align:center!important;
        width: 100%!important;
        right: 0!important
    }

    #bulancustomarea {
        height: 72px
    }

    #tglcusreportfrom {
        padding: 0!important;
        text-align: center!important;
        width: 100%!important;
        margin: 0;
        left: 0!important
    }

    #tglcusreportto {
        padding: 20px 0 0!important
    }

    .customtoreport {
        padding: 0!important;
        margin: 0;
        display: block;
        top: 25px!important;
        position: absolute;
        left: 0
    }

    .voucheryes {
        width: 340px
    }
}

@media only screen and (max-width: 420px) {
    .bulankas,.h3report {
        text-align:center
    }

    #hp_ampm,#hp_ampm_due,#hp_jam,#hp_jam_due,#hp_menit,#hp_menit_due,#hp_trans_ampm,#hp_trans_ampm_due,#hpitem_ampm,#hpitem_jam,#hpitem_menit,#hpitem_trans_ampm,#trans_ampm,#trans_jam,#trans_menit,#trans_trans_ampm,#trans_trans_jam,#trans_trans_menit,.iconreport,.tabtype {
        display: none
    }

    #featdown,.feature,.newchild,.thanksbox img {
        height: auto
    }

    .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length {
        float: none;
        text-align: center;
        margin: 0 auto 10px;
        padding-top: 10px
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: .5em
    }

    #bukukas,#taborder {
        font-size: 12px
    }

    article {
        min-width: 200px
    }

    .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 5px!important
    }

    .h3report,.reportbox {
        padding: 8px 0
    }

    .h3report {
        border-radius: 0;
        font-size: 18px;
        line-height: 24px;
        background: #818181;
        color: #fff
    }

    .andesc,.reportleft .tdmatauang,.tabreport .tdmatauang {
        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 #desc_buku,.taboption #newdesc,.taboption #newname {
        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:active,.addchild:focus {
        position: static!important
    }

    .newchild {
        position: relative;
        bottom: 0;
        left: 0;
        top: auto;
        width: calc(100% - 22px);
        background: #fff;
        padding: 16px 10px!important
    }

    .loginbox,.registerbox {
        width: 260px
    }

    .taboptaccount td {
        vertical-align: baseline;
        padding: 4px!important
    }

    .userlabel {
        font-size: 12px;
        display: block
    }

    .bigsubs,.loginarea h2 {
        font-size: 24px
    }

    .tdoptuserleft {
        display: none
    }

    footer {
        padding: 24px 8px 16px
    }

    .grecaptcha {
        margin: 0 -24px
    }

    .boxadsreport {
        padding: 0;
        border-radius: 0
    }

    .choosepepeku {
        max-width: 260px
    }

    .loginarea h2 {
        line-height: 30px
    }

    .upgradebox {
        padding: 0 16px 16px!important
    }

    .headwrap {
        min-width: 0
    }

    .toptext {
        top: -16px;
        right: 0;
        float: left;
        text-align: left;
        margin: 0 0 0 16px
    }

    .htop,.subscribe {
        text-align: center
    }

    .firsttext {
        padding-right: 0
    }

    .htop {
        padding: 16px
    }

    .feature {
        float: none;
        width: auto
    }

    .featuretext {
        margin: 8px 8px 0;
        padding: 92px 8px 16px
    }

    .subscribe {
        padding: 16px;
        margin-top: 10px
    }

    .thanksbox img {
        width: 160px
    }

    h2.thanks {
        font-size: 20px;
        line-height: 24px
    }

    #showdebt {
        width: 64px
    }

    #debt_pay,.debtbutton {
        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 8px
    }

    .searchbukutop input,.searchbukutop select {
        display: block;
        width: 90%;
        margin: 4px auto
    }

    .searchbukutop #find_search {
        padding: 8px 0;
        text-align: center
    }

    #hp_alsocash,#hpitem_alsocash {
        display: block;
        margin: 8px 0 0
    }

    .iconcart,.invbdate,.invbduedate {
        display: none
    }

    #catat_hpitem {
        top: auto
    }

    .boxbelikanan {
        float: none;
        margin: 20px auto;
        width: 100%
    }

    .boxbelibawah {
        margin-bottom: 20px
    }

    .boxbelikiri {
        margin-top: 10px
    }

    .tabcekout th {
        width: 60%
    }

    .tabcekout td {
        width: 40%
    }

    .option_belibox {
        margin: 10px 0 0 40px
    }

    .invdelask {
        top: 40%!important;
        left: 18%!important;
        width: 220px!important
    }

    .invid {
        width: 30px!important
    }

    .invdesc {
        height: 40px!important;
        width: 100px!important
    }

    .invbtotval {
        width: 130px
    }

    .custlisttab,.custlisttab td,.invbooktab {
        padding: 5px
    }

    #custact {
        width: 58px!important
    }

    .invstampimg_approved,.invstampimg_final,.invstampimg_paid,.invstampimg_past,.invstampimg_received,.invstampimg_urgent {
        right: 220px;
        width: 120px!important;
        height: 87px!important
    }

    #childpassnote {
        word-wrap: break-word!important;
        display: table-cell
    }

    .invqty {
        margin-left: 2px!important
    }

    .invstampimg_paid {
        top: -14px
    }

    .invstampimg_urgent {
        top: 28px
    }

    .invstampimg_past {
        top: 70px
    }

    .invstampimg_approved {
        top: 110px
    }

    .invstampimg_received {
        top: 150px
    }

    .invstampimg_final {
        top: 190px
    }

    .notifdelitem {
        top: 33%!important;
        left: 10%!important;
        width: 320px!important
    }

    .loader_discode {
        position: absolute;
        right: 10px;
        top: 362px;
        display: none
    }

    .topwizard img {
        overflow: hidden;
        float: left;
        margin: 8px 0 0 30px
    }

    .topwizard h2 {
        margin-right: 25px
    }

    #create_book_notif {
        width: 310px;
        margin: 0 auto
    }

    .popup {
        left: 47%;
        width: 280px
    }

    .networkbox {
        width: 320px;
        height: 100px;
        margin-bottom: 15px
    }
}

@media only screen and (max-width: 360px) {
    .invstampimg_approved,.invstampimg_final,.invstampimg_paid,.invstampimg_past,.invstampimg_received,.invstampimg_urgent {
        right:180px;
        width: 120px!important;
        height: 87px!important
    }

    .invstampimg_paid {
        top: -14px
    }

    .invstampimg_urgent {
        top: 28px
    }

    .invstampimg_past {
        top: 70px
    }

    .invstampimg_approved {
        top: 110px
    }

    .invstampimg_received {
        top: 150px
    }

    .invstampimg_final {
        top: 190px
    }

    .taboptaccount input[type=text] {
        width: 200px!important
    }

    #bankuser,#child_mail,#child_name,#namauser,#rekuser {
        width: 160px!important
    }

    #main_use {
        width: 209px!important
    }

    .option_belibox {
        margin-left: 6%!important
    }

    .notifdelitem {
        top: 33%!important;
        left: 8%!important;
        width: 300px!important
    }

    .invbtotval {
        display: none
    }

    .loader_discode {
        position: absolute;
        right: 10px;
        top: 362px;
        display: none
    }

    .hapiuttop {
        height: auto
    }

    .loadnotif {
        left: 45%
    }

    .voucheryes {
        width: 280px
    }
}

@media only screen and (max-width: 320px) {
    .invstampimg_approved,.invstampimg_final,.invstampimg_paid,.invstampimg_past,.invstampimg_received,.invstampimg_urgent {
        right:200px;
        width: 90px!important;
        height: 67px!important
    }

    .invstampimg_paid {
        top: -10px
    }

    .invstampimg_urgent {
        top: 30px
    }

    .invstampimg_past {
        top: 70px
    }

    .invstampimg_approved {
        top: 190px
    }

    .invstampimg_received {
        top: 150px
    }

    .invstampimg_final {
        top: 110px
    }

    .invdelask {
        top: 35%!important;
        left: 13%!important;
        width: 200px!important
    }

    #child_mail,#child_name {
        width: 150px!important
    }

    .taboptaccount td {
        padding: 3px!important
    }

    .konfirmasipem {
        padding: 10px
    }

    .detil_tgl {
        font-size: 15px!important
    }

    .notifdelitem {
        top: 33%!important;
        left: 8%!important;
        width: 270px!important
    }

    .invbooktab {
        padding: 2px
    }

    .networkbox {
        width: 270px;
        height: 100px;
        margin-bottom: 15px
    }
}

@media print {
    .download,.navleft,.ui-tooltip,header {
        display: none!important
    }

    .ui-widget-content {
        border: none!important
    }

    .blockright {
        padding: 0
    }
}

.paypalbtn {
    width: 78%;
    left: 10%;
    font-weight: 700;
    padding: 0 0;
    display: block;
    position: absolute;
    bottom: 20px
}

.thank-paypal {
    padding: 15px 0
}

.thank-paypal span {
    display: block;
    margin-bottom: 10px
}

.thank-paypal span.small {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0
}

.icon-you-save {
    position: absolute;
    right: -40px;
    top: -28px
}

.label-you-save {
    position: absolute;
    right: -27px;
    top: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    transform: rotate(8deg);
    width: 58px;
    text-align: center
}

.bulankas select,.bulankas select:active,.bulankas select:focus,.bulankas select:hover {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #9ea5aa;
    background: 0 0;
    box-shadow: none
}

.reportbulanarea .bulankas select {
    color: #fff
}

.reportbulanarea .bulankas select option {
    background: #fff;
    color: #5e5e5e
}

.bulannav .bulan_nav_left,.bulannav .bulan_nav_right {
    margin-top: 6px
}

.reportleft.reportdetail {
    width: 58%
}

.reportright.reportdetail {
    width: 40%
}