/*custom font*/
/*@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);*/

html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 0px;
    padding-bottom: 20px;
    /*background-color: aliceblue;*/
    margin: 0 0 0px; /* bottom = footer height */
}

/*footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}*/

/*#topbar .navbar-top-links li > a {
    color: lightgray !important;
}*/

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 50px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}


.btn {
    margin-right: 8px;
}

.group-title {
    background-color: #687074 !important;
    color: #FFF !important;
}

input, select, textarea {
    max-width: 615px;
}

.huge-dialog .modal-dialog {
    right: auto;
    width: 800px;
    padding-top: 30px;
    padding-bottom: 30px;
    position:initial !important;
}

.modal-dialog {
    position:initial !important;
}

.wrapper         {width:100%;height:60%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: whitesmoke;
}

.table > thead > tr {
    font-size: 1em;
    background-color: #f2f2f2;
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

.button-padding
{
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 5px;
}

.no-top-border{
    border-top: 0px solid #dddddd !important;
}

.st-sort-ascent:before{
    content: '\25B2';
  }

.st-sort-descent:before{
    content: '\25BC';
}

table a:not(.btn), .table a:not(.btn) {
    text-decoration: none;
}

.label-text-left {
    text-align: left;
    padding-top: 8px;
    font-weight: bold;
}

.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */

/* Override lumen dropdown menu on hover or on focus effect */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: black;
    text-decoration: none;
    outline: 0;
    background-color: white;
}

.breadcrumb {
     border-color: none; 
     border-style: none; 
     border-width: 0px; 
}
.breadcrumb {
    padding: 0px 0px;
    margin-bottom: 5px;
    list-style: none;
    background-color: white;
    border-radius: 4px;
}

.h1-no-padding{ 
    margin-top: 0px;
    margin-bottom: 0px;
    
}
h1
{
    font-family: Arial;
    font-weight: 300;
}
.header-block {
    margin-top: 20px;
    margin-bottom: 10px;
}



/*.navbar {
    border-width: 0 0px 6px 0px;
    border-color : greenyellow;
}

.navbar-inverse {
    background-color:  midnightblue;
}

.navbar-inverse .navbar-brand, 
.navbar-inverse .navbar-brand:hover, 
.navbar-inverse .navbar-brand:focus {
    font-size:22px;
    color: greenyellow; 
    font-weight:bold;
    background-color: transparent;
}*/

/*.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: greenyellow;
}

.navbar-inverse .navbar-nav > li > a {
    color: white;
}*/

/*ul.nav a:hover, 
ul.nav a:focus { 
    color:  black !important; 
    background-color: black;
}

.dropdown-menu > li > a {
    color:black;
}*/

/*tr {
   height: 50px !important;
   overflow:hidden;
}*/

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding-top: 15px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.padding-top-details {
    padding-top: 7px;
}

 input:required {
    background-color:lemonchiffon;
  }

 input:required:valid {
    background-color:white;
  }
 

 .info-panel
 {
     margin-bottom:10px;
 }

 .modified-by{
     font-size:smaller;
     color:darkgrey;
 }

 .border-inset {
     width: 50%;
     height: 100%;
     border-style: inset;
     padding-bottom: 10px;
     padding-top: 10px;
     padding-left: 3px;
     padding-right: 3px;
}


.myBreadcrumb {
    text-align: center;

	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
}

.myBreadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.myBreadcrumb a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.myBreadcrumb a:first-child:before {
	left: 14px;
}
.myBreadcrumb a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
}

/*hover/active styles*/
.myBreadcrumb a.active, .myBreadcrumb a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.myBreadcrumb a.active:after, .myBreadcrumb a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the myBreadcrumbs using rotated pseudo elements*/
.myBreadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .myBreadcrumb a */
	width: 36px; 
	height: 36px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #666;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0, 0, 0, 0.4), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.myBreadcrumb a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.myBreadcrumb a:before {
	content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
}


.flat a, .flat a:after {
	background: white;
	color: black;
	transition: all 0.5s;
}
.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active, 
.flat a:hover:after, .flat a.active:after{
	background: #9EEB62;
}


.input-item {
    margin-top: -20px;
}
th.action-column, td.action-column {
    width: 30px;
    overflow: hidden;
}

.fixed {
    table-layout: fixed;
}

.invoice-number {
    font-weight: bold;
}

.center {text-align: center; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: auto;}

.input-group{
    background-color: #F5F5F5;
}

/*==============*/
.donut-label {
  font-size: 12px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 3px;
}

.secondary-stat .secondary-stat-item {
  color: #fff;
  background-color: #aaa;
  padding: 5px 20px 0 20px;
}
.secondary-stat .secondary-stat-item .data {
  float: left;
  margin-bottom: 0;
}
.secondary-stat .secondary-stat-item .inlinesparkline {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: absolute;
  left: 15px;
  bottom: 0;
}
.secondary-stat #secondary-stat-item1 {
  background-color: #3F7577;
}
.secondary-stat #secondary-stat-item2 {
  background-color: #67773F;
}
.secondary-stat #secondary-stat-item3 {
  background-color: #D36B19;
}

/* sparkline tooltip fix */
.jqstooltip {
  width: auto !important;
  height: auto !important;
}

.jqsfield {
  color: #555 !important;
}

.widget-sparkline .sparkline-stat-item {
  padding: 8px 0;
  margin-bottom: 30px;
}
.widget-sparkline .sparkline-stat-item strong {
  display: block;
  font-size: 1.5em;
  font-weight: 300;
}

/* dashboard mini pie chart */
.panel-pie-chart .panel-body {
  text-align: center;
}
.panel-pie-chart ul {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-bottom: 0;
}
.panel-pie-chart ul > li {
  text-align: center;
  font-size: 0.85em;
  padding-right: 24px;
  margin-bottom: 5px;
}

/* big number with sparkline */
.big-number {
  /*font-family: "latolight";*/
  font-size: 3.5em;
}

.big-number-stat span {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
.big-number-stat em {
  display: block;
  font-style: normal;
}
.big-number-stat .col-left {
  float: left;
  /*margin-right: 10px;*/
  margin-top: -20px;
  margin-bottom: -20px;
  margin-left: -10px;
  line-height: 1.8;

}
.big-number-stat .col-right {
  margin-left: -4px;
  margin-bottom: 10px;
  font-size:20px;
}
@media screen and (max-width: 480px) {
  .big-number-stat .col-right {
    float: none;
  }
}
@media screen and (max-width: 480px) {
  .big-number-stat span {
    display: block;
  }
  .big-number-stat .col-left {
    float: none;
  }
  .big-number-stat .col-right {
    top: 0;
    margin-bottom: 15px;
  }
}

.satuan{
    font-size:20px;
    padding-top:18px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: rgb(255, 255, 255);
    opacity: 1;
}

.badge-error {
  background-color: red;
}
.badge{
  margin-top:-15px;
  margin-left:-5px;
}

.notifications {
   min-width:420px; 
  }
  
  .notifications-wrapper {
     overflow:auto;
      max-height:250px;
    }
    
 .menu-title {
     color:#ff7788;
     font-size:1.5rem;
      display:inline-block;
      }
 
.glyphicon-circle-arrow-right {
      margin-left:10px;     
   }
  
   
 /*.notification-heading, .notification-footer  {
 	padding:2px 10px;
       }*/
      
        
.dropdown-menu.divider {
  margin:5px 0;          
  }

.item-title {
  
 font-size:1.3rem;
 color:#000;
    
}

.notifications a.content {
 text-decoration:none;
 background:#ccc;
 }
    
.notification-item {
 padding-left:10px;
 padding-right:10px;
 /*margin-top:-10px;*/
 /*margin:5px;*/
 /*background:#ccc;*/
 border-radius:4px;
 border-bottom: 1px solid #e0e0e0;
 }

.padding-message{
    margin-left: -20px;
}
.pading-control
{
   margin-top: 8px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.margin-icon-and-ui-select
{
    margin-left:-30px;
}

body
{
    overflow-x:hidden;
}

/* Dashboard Admin */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-primary {
    border-color: #337ab7;
}

.panel-green {
    border-color: #5cb85c;
}

.panel-green .panel-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.panel-green a {
    color: #5cb85c;
}

.panel-yellow {
    border-color: #f0ad4e;
}

.panel-yellow .panel-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.panel-yellow a {
    color: #f0ad4e;
}

.panel-red {
    border-color: #d9534f;
}

.panel-red .panel-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.panel-red a {
    color: #d9534f;
}

.huge {
    font-size: 40px;
}

.panel-font{
    font-size:19px;
    font-weight:400;
   
}

.panel-padding{
     padding: 10px 10px 10px 10px !important;
}

td > .waktu-style{
    font-size: 11px;
    font-style: italic;
}

/*Input input List Padding*/
.listinput-padding{
    padding: 6px 5px !important;
}

.actions-card {
    background-color: azure;
    padding: 5px 0px 20px 15px;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
}

    .actions-card > .actions-card-item {
        margin-bottom: 5px;
    }

/*.action-checkbox {
    border-radius: 4px !important;
}*/