@charset "UTF-8";
/* ---------------- General Page ---------------- */
html { text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;background:#ffffff;-webkit-text-size-adjust:none;height:100%;}
body{color:#2b2b2b;background:#ffffff;font:14px SF UI Text Regular;padding:0px!important;margin:0 auto!important;text-rendering:optimizeLegibility;min-height:100%;}
ul, .list-unstyled { padding-left: 30px; }
ul li{list-style:none;}
a,a:hover,a:focus{cursor:pointer;text-decoration:none;outline:none;color:#000;}
::selection{background-color:#4f5152;color:#ffffff;}
::-moz-selection{background-color:#4f5152;color:#ffffff;}
p,`,caption,td,tr,th{margin:0;padding:0;font-weight:normal;}
h1,h2,h3{padding:0;margin:0 0 15px 0;font-weight:normal;}
#selectedrow{background-color: #FFFBD1;}
.clearfix:before,.clearfix:after{display:table;content:" ";}
.clearfix:after{clear:both;}
.barcode_img{max-width: 50px!important;}
/* ---------------- Begin Sign Page ---------------- */
#container{height:100%;padding-right:20px;padding-left:20px;margin-right:auto;margin-left:auto;}
.form-signin{max-width:100%;margin:0 auto;}
.form-session{max-width:520px;}
.login-wrap{position:relative;}
.user-login-info{margin:0;padding:0 0 5px;}
.form-signin input[type="text"],.form-signin input[type="password"]{margin-bottom:5px;}
.form-signin .btn-login{background-color:#e5e5e5;color:#000000;padding:5px 10px;cursor:pointer;border:none;font-weight:bold;}
.form-signin .btn-login:hover{color:#e94f31;}
.form-signin .lock-sign{width:100%;}
.form-signin p a,.invoice p a{color:#000000;}
.form-signin p a:hover,.invoice p a:hover{color:#e94f31;}
/* ---------------- Begin Main Page ---------------- */
.boxChat{width:100%;margin:0 auto;}
.chatboxdates{padding:10%;position:absolute;float:left;right:0;left:0;top:0;background:#fff;color:#000;}
.chatboxdate{padding:5px;position:fixed;z-index:99;float:left;right:0;left:0;top:0;border:0;background:#fff;color:#000;border-bottom: 2px solid #b3b3b3;vertical-align: middle;}
.mainpage{padding:100px 10px 30px 10px;}
.dashboardIcon{padding:0;margin:0;text-align:center;}
ul.dashboardIcon li{position:relative;border:none;background-clip:padding-box;display:inline-block;line-height:1.6em;list-style:outside none none;text-align:center;vertical-align:middle;max-width:100%;}
li.pageIcon,#listingData{background-color:#e5e5e5;border:none;width:100%;height:108px;margin-bottom:10px;}
li.small-height{height:auto!important;padding:10px 0;}
.view-2 li.pageIcon,.pageIcon.coloums2{width:47%;margin:1%;}
.pageIcon a{display:block;width:100%;height:100%;color:#000000;}
.pageIcon a span{display:block;padding:0;font-weight:bold;}
.pageIcon i{font-size:24px;margin:20px 0px 15px;}
.pageIcon .numberStats{float:left;width:100px;height:100%;background:#cccccc;font-size:28px;line-height:3.7;font-weight:700;color:#e5e5e5;}

.list.list-chats,.list.list-messages{border-top:1px solid #e7e7e9;padding:0;}
.list-message{padding-top:5px;padding-bottom:5px;border-bottom:1px solid #e7e7e9;font-size:12px;}
.message-for{display:inline-block;padding-top:3px;padding-bottom:5px;font-size:14px;font-weight:bold;}
.message-time{float:none;padding-top:3px;color:#a3a3a3;}
.message-text{padding-bottom:3px;color:#a3a3a3;line-height:1.6em;}
.search-container{position:fixed;width:100%;bottom:0;right:0;left:0;padding:10px;background:#2C333E;color:#ffffff;margin:0 auto;}
.search-group-btn{right:38px;}
.grey-header{padding:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;background-color:none;}
.grey-heading-title{font-size:16px;margin:0;}
.description-new{padding-right:0;padding-left:0;padding-top:10px;font-size:12px;color:#737373;line-height:1.9em;}
.text-borders{margin:15px 0 0;padding-bottom:15px;}
.jobs-button .btn-lg{padding:10px 15px;font-size:18px;}
.btn-success{background-color:#95b75d;border-color:#95b75d;color:#FFFFFF;}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{background-color:#88a755;border-color:#88a755;color:#FFFFFF;}
.btn-info{background-color:#57c8f1;border-color:#57c8f1;color:#FFFFFF;}
.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-color: #53bee6;border-color: #53BEE6;color: #FFFFFF;}
.btn-warning{background-color:#f3c022;border-color:#f3c022;color:#FFFFFF;}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{background-color: #e4ba00;border-color: #e4ba00;color: #FFFFFF;}
.btn-danger{background-color:#fa8564;border-color:#fa8564;color:#FFFFFF;}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-color:#ec6459;border-color:#ec6459;color:#FFFFFF;}

/* Dashboard icon 2*/
.dashboardIcon2{padding:10px;margin:0;text-align:center;}
ul.dashboardIcon2 li{position:relative;border-width:0;background-clip:padding-box;display:inline-block;line-height:1.6em;list-style:outside none none;text-align:center;margin:3px;height:170px;width:20%;}
li.pageIcon2{background-color:#e5e5e5;width:14.3%;border-radius: 5px;}
.pageIcon2 a{display:block;width:100%;height:100%;color:#000;padding-top:15%;}
.pageIcon2 a span{display:block;padding:0;font-weight:bold;}
.pageIcon2 i{font-size:24px;margin:20px 0px 15px;}

.tg{border-collapse:collapse;border-spacing:0;width:100%;margin:10px 0;}
.tg td{font-size:12px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;vertical-align:middle;text-align:center;}
.tg .tg-yw2l{width:25%;}
.tg .tg-yw3l{width:33%;}
.tg .tg-yw4l{width:75%;}
.tl tr:first-child td{padding:10px 5px;}
.tl td{padding:0;}
.tl td a{padding:10px 5px;display:block;}

.tdat{border-collapse:collapse;border-spacing:0;margin:0 auto;width:95%;}
.tdat td{font-size:11px;padding:5px;border:1px solid rgba(109,109,109,0.5);overflow:hidden;word-break:normal;vertical-align:middle;text-align:center;}

.bg-all{padding:10px 0;z-index:99;margin-bottom:10px;text-align:center;font-weight:bold;background:#2C333E;color:#ffffff;}
.bg-all a{color:#ffffff;}

.tableView{border:0px;height:auto!important;margin:0;}
.tableView .pageIcon{padding:0;}
.tableView .tdat{width:100%;margin:0!important;}
.tableView .tdat td{border:none;border-top:1px solid rgba(109,109,109,0.5);}
.tableView .tdat tr:first-child td{border:none;}
.tableView .tdat td.tdat-bg{background:#d4d4d4;color:#606060;}

.tableWLink.tdat td{padding:5px;position:relative;}
.tableWLink.tdat td a{padding:5px;display:block;}
.statusMoney{width:10px;height:10px;position:absolute;top:0;left:0;}
.space_title{width:80px;display:inline-block;}

@media only screen and (min-width: 769px) {
    /* For desktop: */
    #container{height:100%;padding-right:50px;padding-left:50px;margin-right:auto;margin-left:auto;}
    /*body,.boxChat,.search-container{max-width:80%;}
	body#laporan,body#laporan .boxChat,body#laporan .search-container{max-width:80%;}*/
}

.alertPop {
    display: none;
    position: fixed;
    top: 10%;
    z-index: 9999;
    width: 50%;
    text-align: center;
    background: rgba(255, 0, 0, 0.85);
    padding: 19px 0;
    margin: 0 auto;
}

.dateMod-back,.dateMod{display:none;}
.dateMod-back.active{display:block;background:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;left:0;top:0;}
.dateMod.active{display:block;width:100%;position:fixed;bottom:50%;left:0;z-index:999;}
.dateMod-box{width:250px;background:#2c333e;margin:0 auto;border:2px solid #ffffff;}
.calendar-Box-type{width:100%;display:inline-block;padding:5px;text-align:center;}

/* ---------------- Date Mod Desc ---------------- */
ul.dateMod{padding:0;margin:0;}
ul.dateMod-box{position: absolute;z-index: 99;display: none;float: left;padding: 0;margin: 2px 0 0;list-style: none;text-shadow: none;background-color: #fcfcfc;border: 1px solid rgba(0, 2, 1, 0.2);-webkit-box-shadow: 0 0px 0px rgba(0, 2, 1, 0.4);-moz-box-shadow: 0 0px 0px rgba(0, 2, 1, 0.4);box-shadow: 0 0px 0px rgba(0, 2, 1, 0.4);-webkit-background-clip: padding-box;-moz-background-clipp: padding;background-clip: padding-box;list-style: none;text-shadow: none;width: 250px;}
ul.dateMod-box.active{display: block;}
.dateMod-select{width: 100%;margin-bottom: 5px;background-color: #ffffff;}
.calendar-links:after,.calenderType:after{display:block;clear:both;content:'';}
.calendar-links,.calenderType{padding:0px;}
.calenderType{background: #F3F3F3;}
.calendar-links li,.calenderType li{margin:0 3px 0 0;float:left;list-style:none;}
.calendar-links a,.calenderType a{padding: 5px;display: inline-block;background: #ddd;font-weight: 600;color: #4c4c4c;transition: all linear 0.15s;}
.calenderType a{background: none;}
.calendar-links a:hover,.calenderType a:hover{background:#a7cce5;text-decoration:none;}
.calendar-links li.active a, .calendar-links li.active a:hover{background:#ffffff;color:#4c4c4c;}
.calenderType li.active a, .calenderType li.active a:hover{background:#dadada;color:#4c4c4c;}
.calender-Box.twoColoums{width: 49%;display: inline-block;margin: 0;}
.calender-content{padding:5px;background:#fff;}
.calenderType-content{padding:5px 0;background:#fff;}
.calender-content .tab,.calenderType-content .tab{display:none;}
.calender-content .tab.active,.calenderType-content .tab.active{display:block;}
.calender-Button{margin-top:5px;}
.debtPayment-Box{border: 1px solid rgba(0,0,0,0.2);margin-left: 15px;padding: 15px;}
/* Tree Diagrams View */
.tree {
    transform-origin: 50%;
}

.tree ul {
    position: relative;
    padding: 3em 0; 
    white-space: nowrap;
    margin: 0 auto;
    text-align: center;
}

.tree ul::after {
    content: '';
    display: table;
    clear: both;
}
.tree li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 1em .5em 0 .5em;
}
.tree li::before,
.tree li::after {
    content: '';
    position: absolute; 
    top: 0; 
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; 
    height: 1em;
}
.tree li::after {
    right: auto; 
    left: 50%;
    border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}
.tree li:only-child {
    padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}
.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
}
.tree ul ul::before{
    content: '';
    position: absolute; 
    top: 0; 
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0; 
    height: 3em;
}

.tree li a {
    border: 1px solid #ccc;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    color: #333;
    position: relative;
    top: 1px;
}

.tree li a:hover,
.tree li a:hover+ul li a {
    background: #e5e5e5;
}

.tree li a:hover + ul li::after, 
.tree li a:hover + ul li::before, 
.tree li a:hover + ul::before, 
.tree li a:hover + ul ul::before{
    border-color:  #e9453f;
}
/* Style the tab content */
.tabcontent {
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.wrapper {
     position: relative;
}
.branch {
    position: relative;
    margin-left: 350px;
}
.branch:before {
    content: "";
    width: 50px;
    border-top: 2px solid #000;
    position: absolute;
    left: -100px;
    top: 50%;
    margin-top: 1px;
}
.entry {
    position: relative;
    min-height: 120px;
}
.entry:before {
    content: "";
    height: 100%;
    border-left: 2px solid #000;
    position: absolute;
    left: -50px;
}
.entry:after {
    content: "";
    width: 50px;
    border-top: 2px solid #000;
    position: absolute;
    left: -50px;
    top: 50%;
    margin-top: 1px;
}
.entry:first-child:before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 2px;
    border-radius: 10px 0 0 0;
}
.entry:first-child:after {
     height: 10px;
     border-radius: 10px 0 0 0;
}
.entry:last-child:before {
     width: 10px;
     height: 50%;
     border-radius: 0 0 0 10px;
}
.entry:last-child:after {
     height: 10px;
     border-top: none;
     border-bottom: 2px solid #000;
     border-radius: 0 0 0 10px;
     margin-top: -9px;
}
.entry.sole:before {
    display: none;
}
.entry.sole:after {
    width: 50px;
    height: 0;
    margin-top: 1px;
    border-radius: 0;
}
.label {
    display: block;
    min-width: 250px;
    padding: 5px 10px;
    line-height: 20px;
    text-align: center;
    border: 2px solid #000;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 50%;
    color:#000;
    margin-top: -28px;
}

.entry .hover:hover{
    background-color: #ffff00;
    cursor: pointer;
}

.topbar{padding:5px 20px;}
.main-logo{width:15%;}

.select-hidden {display: none;visibility: hidden;padding-right: 10px;}
.select {cursor: pointer;display: inline-block;position: relative;font-size: 12px;color: #fff;width: 100px;height: 30px;}
.select-styled {position: absolute; top: 0;right: 0;bottom: 0;left: 0;background-color: #0f80ff;padding: 8px 15px;border-radius: 5px;}
.select-styled:after {content:"";width: 0;height: 0;border: 4px solid transparent;border-color: #fff transparent transparent transparent;position: absolute;top: 16px;right: 10px;}
.select-styled:hover {background-color: #0f80ff;}
.select-styled:active, .select-styled.active {background-color: #0f80ff;}
.select-styled.active .select-styled:after {top: 9px;border-color: transparent transparent #fff transparent;}

.select-options {display: none; position: absolute;top: 100%;right: 0;left: 0;z-index: 999;margin: 0;padding: 0;list-style: none;background-color: #0f80ff;overflow: scroll;height: 200px;}
.select-options li {margin: 0;padding: 5px;border-top: 1px solid #eeeeee;}
.select-options li:hover {color: #0f80ff;background: #fff;}
.select-options li[rel="hide"] {display: none;}



.select-hidden2 {display: none;visibility: hidden;padding-right: 10px;}
.select2 {cursor: pointer;display: inline-block;position: relative;font-size: 12px;color: #000;width: 100px;height: 30px;}
.select-styled2 {position: absolute; top: 0;right: 0;bottom: 0;left: 0;background-color: #eeeeee;padding: 8px 15px;border-radius: 5px;}
.select-styled2:after {content:"";width: 0;height: 0;border: 4px solid transparent;border-color: #000 transparent transparent transparent;position: absolute;top: 16px;right: 10px;}
.select-styled2:hover {background-color: #eeeeee;}
.select-styled2:active, .select-styled2.active2 {background-color: #eeeeee;}
.select-styled2.active2 .select-styled2:after {top: 9px;border-color: transparent transparent #000 transparent;}

.select-options2 {display: none; position: absolute;top: 100%;right: 0;left: 0;z-index: 999;margin: 0;padding: 0;list-style: none;background-color: #eeeeee;overflow: scroll;height: 200px;}
.select-options2 li {margin: 0;padding: 5px;border-top: 1px solid #999;}
.select-options2 li:hover {color: #eeeeee;background: #000;}
.select-options2 li[rel="hide"] {display: none;}

ul.base {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}

ul.base li {
  float: left;
}

ul.base li a {
  display: block;
  color: #000;
  font-weight: bolder;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  border-bottom: 4px solid transparent;
}

ul.base li a.active {
  border-bottom: 4px solid #0f80ff;
}

ul.base li:first-child a:hover {
  border-bottom: 4px solid transparent;
}

ul.base li a:hover {
  border-bottom: 4px solid #0f80ff;
}

.search-container {
  position: relative;
  margin: auto;
  width: 100px;
  height: 40px;
  background-color: transparent;
}

.search-container .search {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: #0f80ff;
    border-radius: 50%;
    transition: all 1s;
    z-index: 4;
    
  }
.search-container .search:hover {
  cursor: pointer;
}
.search-container .search::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 12px;
  right: 0;
  bottom: 0;
  left: 12px;
  width: 10px;
  height: 2px;
  background: white;
  transform: rotate(45deg);
  transition: all .5s;
}
.search-container .search::after {
  content: "";
  position: absolute;
  margin: auto;
  top: -3px;
  right: 0;
  bottom: 0;
  left: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid white;
  transition: all .5s;
}
.search-container input {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    outline: none;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    padding: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 30px;
    transition: all 0.5s;
    opacity: 0;
    z-index: 5;
}
.search-container input:hover {
  cursor: pointer;
}
.search-container input:focus {
  width: 150px;
  opacity: 1;
  cursor: text;
}
.search-container input:focus ~ .search {
  background: #000;
  z-index: 6;
}
.search-container input:focus ~ .search::before {
  top: 0;
  left: 0;
  width: 10px;
}
.search-container input:focus ~ .search::after {
  top: 0;
  left: 0;
  width: 10px;
  height: 2px;
  border: none;
  background: white;
  border-radius: 0%;
  transform: rotate(-45deg);
}
.search-container input:placeholder {
  color: #fff;
  font-weight: bolder;
}

.table-kas thead tr th, .table-kas tbody tr th{background-color: #ccc!important;font-weight: bolder;text-align: center;padding: 5px;font-stretch: 18px;border:1px solid #000;}
.table-kas tbody tr td{border:1px solid #000;}
.table-kas thead.sticky tr th{position: sticky;top:0;background-color: #ccc!important;font-weight: bolder;text-align: center;padding: 5px;font-stretch: 18px;border:1px solid #000!important;}
.table-kas tbody.no-bg tr td{background-color: #fff!important;}
.table-kas tbody tr:nth-child(even) td {background-color: #eee!important;}
.table-kas tbody tr:nth-child(odd) td {background-color: #fff!important;}
.table-kas tbody tr.no-bg:nth-child(even) td {background-color: #fff!important;}
.table-kas tbody tr.no-bg:nth-child(odd) td {background-color: #fff!important;}
.table-kas tfoot.sticky tr th{position: sticky;bottom:0;background-color: #ccc!important;font-weight: bolder;text-align: center;padding: 5px;font-stretch: 18px;border:1px solid #000!important;}
.table-kas.hover tbody tr:hover td {background-color:#fffdd4!important;}

.table-base th {padding:5px;border:1px solid rgba(0,0,0,0.2);font-weight: bold;background-color:#dddddd;}
.table-base td {padding:5px;border:1px solid rgba(0,0,0,0.2);}
.table-base.hover tr:hover td {background-color:#fffdd4!important;}
.table-base th.sticky{position: sticky;top:0;z-index:2;}
span.head{
  font-size: 16px;
  font-weight: bold;
  border-bottom:2px solid #0f80ff;
}

.list-group .active, .list-group .active:hover{background-color: #006dcc; color:#fff;}
.list-group .done, .list-group .done:hover{background-color: #d9edf7; color:#000;}

.dTable{
    display:  table;
}

.dRow
{
   display:table-row;
   width:auto;
   clear: both;
}

.dCell
{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
}

.itm{
    width: 100%;
    background-color:#d9edf7;
    padding:2px;
    border:1px solid rgba(0,0,0,0.5);
    margin:0 0 2px 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:pointer;
}