/**
 * Custom styles 
 */

.content-header {
  padding: 10px 15px 0px !important;
}

.ajax-loader {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 100000;
}

.alert > .fa,
.alert > .glyphicon {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  background: inherit;
  border: inherit;
}

.highlight {
  background-color: #FFFF88;
}

label.error {
  color: red;
  font-style: italic;
}

/*-------------------------
	The buttons
--------------------------*/

.btn-disabled {
  display: inline-block;
  font-size: 14px;
  color: #444 !important;
  text-decoration: none !important;
  padding: 6px 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 1px #ccc;
  border-radius: 2px;
  border-color: #FFF !important;
  background-color: #DADADA;
  background-image: linear-gradient(top, #51b7e6, #4dafdd);
}

.progress-button {
  display: inline-block;
  font-size: 14px;
  color: #fff !important;
  text-decoration: none !important;
  padding: 6px 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 1px #ccc;
  border-radius: 2px;
  border-color: #FFF !important;
  background-color: #51b7e6;
  background-image: linear-gradient(top, #51b7e6, #4dafdd);
}

/*	Hide the original text of the button. Then the loading or finished
	text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished {
  color: transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  padding-top: inherit;
  color: #fff !important;
  left: 0;
}

/*	If the .in-progress class is set on the button, show the
	contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after {
  content: attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after {
  content: attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar {
  background-color: #225E82;
  height: 3px;
  bottom: 0;
  left: 0;
  width: 0;
  position: absolute;
  z-index: 1;
  border-radius: 0 0 2px 2px;
  transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal {
  height: 100%;
  border-radius: 2px;
}

.progress-button .tz-bar.background-vertical {
  height: 0;
  top: 0;
  width: 100%;
  border-radius: 2px;
}

/*----------------------------
	Color themes
-----------------------------*/

.progress-button.red {
  background-color: #e6537d;
  background-image: linear-gradient(top, #e6537d, #df5179);
}

.progress-button.red .tz-bar {
  background-color: #6876b4;
}

.progress-button.green {
  background-color: #64c896;
  background-image: linear-gradient(top, #64c896, #5fbd8e);
}

.progress-button.green .tz-bar {
  background-color: #9e81d6;
}

/** Data capture date picker**/

.dp {
  padding: 3px;
}

.dc-heading {
  margin-top: -5px !important;
  margin-bottom: 20px !important;
}

/*----------------------------
	Icons
-----------------------------*/

.fa-2 {
  font-size: 2em;
}

.fa-3 {
  font-size: 3em;
}

.color-danger {
  color: #dd4b39;
}

.color-danger:hover {
  color: #d73925;
}

.color-warning {
  color: #f39c12;
}

.color-warning:hover {
  color: #ec971f;
}

.color-success {
  color: #00a65a;
}

.color-success:hover {
  color: #24a56a;
}

/*----------------------------
	Datatables
-----------------------------*/

.dataTable .odd {
  background-color: #f9f9f9;
}

.dataTable .even {
  background-color: #ffffff;
}

.dataTables_wrapper label {
  margin-bottom: 0 !important;
}

.dataTables_wrapper .row:last-child {
  margin-top: 25px;
}

.dataTables_wrapper .header-controls {
  margin-top: 0px;
  padding-left: 0 !important;
  margin-bottom: 2px;
  float: left;
}

.dataTables_wrapper .header-controls a {
  margin-right: 5px;
}

@media (max-width: 767px) {
  .dataTables_wrapper .header-controls {
    text-align: center;
  }
}

.dataTables_wrapper .row-controls {
  opacity: 0.8;
}

.dataTables_wrapper .row-controls:hover {
  opacity: 1;
}

.dataTables_wrapper thead {
  background: #e2e8e8;
}

.dataTables_wrapper thead tr th,
.dataTables_wrapper thead tr td,
.dataTables_wrapper tbody tr th,
.dataTables_wrapper tbody tr td {
  padding-right: 0 !important;
}

.dataTables_wrapper thead tr th:first-child,
.dataTables_wrapper thead tr td:first-child,
.dataTables_wrapper tbody tr th:first-child,
.dataTables_wrapper tbody tr td:first-child {
  max-width: 150px;
  padding: 0;
}

.dataTables_wrapper thead tr th:second-child,
.dataTables_wrapper thead tr td:second-child,
.dataTables_wrapper tbody tr th:second-child,
.dataTables_wrapper tbody tr td:second-child {
  max-width: 30px;
  padding: 0;
}

/*----------------------------
	Custom Table
-----------------------------*/

.table-title {
  color: #FFF;
  background-color: #10254f;
}

.table-header {
  color: #000;
  background-color: #458ab9;
  text-align: center;
}

.gray-row {
  background-color: #deded6;
}

.ltgray-row {
  background-color: #f7f7f7;
}

.div-errorMsg {
  color: #EE0000;
  font-weight: bold;
}

.modal {
  top: 100px !important;
}