/* Default */

body {
  margin: 0px;
  padding: 0px;
  /*background:#F5F5F5;*/
  font-family: sans-serif;
  color: #404040;
  font-size: 12px;
}


abbr, acronym {
  border-bottom: 1px dotted #900;
  font-weight: bold;
  cursor: help;
  color: #0066FF;
}

.dojoDialog {
  /*background : #1976d2;*/
  /*border : 5px solid #da251d;*/
  /*-moz-border-radius : 5px;*/
  /*border-radius: 10px 10px 10px 10px;*/
  /*padding : 10px;*/
  box-shadow: 5px 5px 8px #4a4040;
}

code {
  color: #993300;
  font-family: "Lucida Sans Unicode", verdana, helvetica, sans-serif;
}

a {
  color: #3700B3;
  text-decoration: none;
  font-family: "trebuchet ms";
  font-size: 13px;
  font-weight: bold;
}

a#active {
  color: #000;
}

.whiter {
  color: #000;
  background: #fff;
}

a:active {
  outline: none;
  font-weight: bold;
  color: #900;
}

a:hover {
  /*text-decoration: overline underline;*/
  outline: none;
  color: #d4a00c;

}

/*color: #993300;*/
a.th {
  color: #505050;
  font-weight: bold;
  text-decoration: none;
}

a.selected {
  color: green;
  font-size: 14px;
  font-weight: bold;
  background: #ffff00;
}

a.th:hover {
  color: #ffee00;
  text-decoration: none;
  outline: none;
  font-weight: bold;
}

a.pointer {
  cursor: pointer;
}

input[type="button"].back {
  float: left;
  background: url("../images/btn_back.png") no-repeat center center;
  background-size: 20px 20px;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: white;
  border: 0;
  outline: none;
}

input[type="button"].back:hover {
  background: url("../images/btn_back.png") no-repeat center center;
  background-size: 20px 20px;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: white;
  border: 0;
}

input[type="button"].back:focus {
  background: url("../images/btn_back.png") no-repeat center center;
  background-size: 20px 20px;
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: white;
  border: 0;
}

input[type="button"].crudsave {
  background: #03DAC5 url("../images/btn_save.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudsave:hover, input[type="button"].crudsave:focus {
  background: #d4a00c url("../images/btn_save.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudadd {
  background: #03DAC5 url("../images/btn_crud_add.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].crudadd:hover, input[type="button"].crudadd:focus {
  background: #d4a00c url("../images/btn_crud_add.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].cruddel {
  background: #03DAC5 url("../images/btn_crud_delete.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].cruddel:hover, input[type="button"].cruddel:focus {
  background: #d4a00c url("../images/btn_crud_delete.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudexcel {
  background: #03DAC5 url("../images/btn_crud_excel.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].crudexcel:hover, input[type="button"].crudexcel:focus {
  background: #d4a00c url("../images/btn_crud_excel.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudsummary {
  background: #03DAC5 url("../images/btn_crud_summary.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].crudsummary:hover, input[type="button"].crudsummary:focus {
  background: #d4a00c url("../images/btn_crud_summary.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudverify {
  background: #03DAC5 url("../images/btn_check_black.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].crudverify:hover, input[type="button"].crudverify:focus {
  background: #d4a00c url("../images/btn_check_black.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudreset {
  background: #03DAC5 url("../images/btn_crud_reset.png") no-repeat center center;
  background-size: 14px 14px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudreset:hover, input[type="button"].crudreset:focus {
  background: #d4a00c url("../images/btn_crud_reset.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].crudkwitansi {
  background: #03DAC5 url("../images/btn_invoice.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudkwitansi:hover, input[type="button"].crudkwitansi:focus {
  background: #d4a00c url("../images/btn_invoice.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudprint {
  background: #03DAC5 url("../images/b_print.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudprint:hover, input[type="button"].crudprint:focus {
  background: #d4a00c url("../images/b_print.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudaddsmall {
  background: #03DAC5 url("../images/btn_crud_add.png") no-repeat center center;
  background-size: 12px 12px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudaddsmall:hover, input[type="button"].crudaddsmall:focus {
  background: #d4a00c url("../images/btn_crud_add.png") no-repeat center center;
  background-size: 12px 12px;
  border: 0px;
}

input[type="button"].crudclosesmall {
  background: red url("../images/btn_close.png") no-repeat center center;
  background-size: 12px 12px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudclosesmall:hover, input[type="button"].crudclosesmall:focus {
  background: #FF5555 url("../images/btn_close.png") no-repeat center center;
  background-size: 12px 12px;
  border: 0px;
}

input[type="button"].crudsave {
  background: #3700B3 url("../images/btn_save.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].crudsave:hover, input[type="button"].crudsave:focus {
  background: #d4a00c url("../images/btn_save.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].crudcalendar {
  background: #03DAC5 url("../images/btn_calendar_black.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].crudcalendar:hover, input[type="button"].crudcalendar:focus {
  background: #d4a00c url("../images/btn_calendar_black.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

a.crudgreen {
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 2px 2px 2px 2px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  background: green;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

a.crudgreen:hover {
  background: #98e46f;
}

input[type="button"].btnheadercari {
  background: #a0a0a0 url("../images/btn_cari.png") no-repeat center center;
  background-size: 18px 18px;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 0px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
}

input[type="button"].btnheadercari:hover, input[type="button"].btnheadercari:focus {
  background: #d4a00c url("../images/btn_cari.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].toggleon {
  background: #018786 url("../images/btn_active.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0px;
  padding-right: 10px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].toggleon:hover, input[type="button"].toggleon:focus {
  background: greenyellow url("../images/btn_active.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].toggleoff {
  background: darkred url("../images/btn_active.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0px;
  padding-right: 10px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].toggleoff:hover, input[type="button"].toggleoff:focus {
  background: red url("../images/btn_active.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

a img {
  border: 0;
}

a.btngreen {
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 2px 2px 2px 2px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  background: green;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  margin-bottom: 2px;
}

a.btnred {
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 2px 2px 2px 2px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  background: darkred;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  margin-bottom: 2px;
}

a.btnyellow {
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 2px 2px 2px 2px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: darkgreen;
  background: yellow;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  margin-bottom: 2px;
}

h2 {
  font-size: 18px;
  /* margin:5px 10px 5px 5px; */
  line-height: 1;
}

h3 {
  font-size: 14px;
  /* margin:0px; */
  line-height: 1;
  padding: 0px;
}

h1 {
  font-size: 24px;
  /* margin: 0px 10px 0px 10px; */
}

hr {
  color: #f0f0f0;
}

/* Global Form Styles */
/*select, input, textarea{
	font-size: 12px;
	background: #fff;
	border-top: 3px solid #00CCFF;
	font-family: "Courier New", Courier, mono;
	border-right: 1px solid #00CCFF;
	border-bottom: 1px solid #00CCFF;
	border-left: 1px solid #00CCFF;
}*/

textarea {
  font-size: 12px;
  background: #fff;
  border: 1px solid #b0b0b0;
  border-radius: 3px 3px 3px 3px;
  font-family: sans-serif;
  width:150px;
  height: 40px;
}

input.error, textarea.error {
  background: red;
  color: white;
}

input[type="button"], input[type="submit"] {
  background: #3700B3;
  font-family: sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 100px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"]:hover, input[type="submit"]:hover {
  background: #d4a00c;
  border: 1px solid white;
}

input[type="button"]:focus, input[type="submit"]:focus {
  background: #999999;
}

input[type="button"].red, input[type="submit"].red {
  background: #B00020;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  width: auto;
}

input[type="button"].red:hover, input[type="submit"].red:hover {
  background: red;
  border: 1px solid white;
}

input[type="button"].yellow, input[type="submit"].yellow {
  background: #d4a00c;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].yellow:hover, input[type="submit"].yellow:hover {
  background: #fdaa4c;
  border: 1px solid white;
}

input[type="button"].yellow:focus, input[type="submit"].yellow:focus {
  background: #999999;
}

input[type="button"].green, input[type="submit"].green {
  background: green;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  width: auto;
}

input[type="button"].green:hover, input[type="submit"].green:hover {
  background: greenyellow;
  border: 1px solid white;
}

input[type="button"].purple, input[type="submit"].purple {
  background: purple;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  width: auto;
}

input[type="button"].purple:hover, input[type="submit"].purple:hover {
  background: mediumpurple;
  border: 1px solid white;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"] {
  border: 1px solid #c0c0c0;
  font-family: sans-serif;
  border-radius: 2px 2px 2px 2px;
  outline: none;
}

input[type="number"].pendek{
  width: 50px;
}

input[type="text"].kapital, textarea.kapital{
  text-transform: uppercase;
}

input[type="text"].txtheadercari {

  border: 1px #c0c0c0 solid;
  height: 30px;
  width: calc(100% - 30px);
  min-width: 165px;
  font-family: sans-serif;
  border-radius: 15px 15px 15px 15px;
  padding-left: 15px;
}

span.wrappertxtheadercari {
  float: left;
  width: calc(100% - 40px);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  /*-webkit-border-radius: 0px;*/
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url("../images/15xvbd5.png"), -webkit-linear-gradient(#fff, #fff 40%, #fff);
  background-position: 100% center;
  background-repeat: no-repeat;
  border: 1px solid #b0b0b0;
  color: #000;
  font-size: inherit;
  overflow: hidden;
  padding-right: 20px;
  /*text-overflow:ellipsis;*/
  white-space: nowrap;
  width: 150px;
  border-radius: 3px 3px 3px 3px;
}

select.error {
  -webkit-appearance: none;
  -moz-appearance: none;
  /*-webkit-border-radius: 0px;*/
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url("../images/15xvbd5.png"), -webkit-linear-gradient(red, red 40%, red);
  background-position: 100% center;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  overflow: hidden;
  padding-right: 20px;
  /*text-overflow:ellipsis;*/
  white-space: nowrap;
  width: 150px;
  color: white;
}

select.waktu{
  width: 40px;
}

input#readonly {
  background: #ccc;
  border: 0px solid #000;
}

input[type="file"] {
  width: 78px;
  cursor: pointer;
}

input[type="file"]:hover {

}

table {
  /* margin:5px 0px 15px 15px; */
  border-collapse: separate;
  white-space: nowrap;
}

table.flat {
  border-spacing: 0px;
  /*white-space: pre-wrap;*/
  white-space: nowrap;
}

table.tablecetak th {
  /*white-space: pre-wrap;*/
  white-space: nowrap;
  border-collapse: collapse;
  background: black;
}

tr.rowdatatablecetak td {
  /*text-align: center;*/
  font-size: 12px;
  /*background: #dfdfdf;*/
  border-bottom: 1px solid black;
}

td {
  font-size: 12px;
  /*border: 1px solid #dfdfdf;*/
}

td.wrap {
  min-width: 200px;
  max-width: 400px;
  white-space: pre-wrap;
}

tr {
  /* margin: 20px; */
  /* padding: 2px 10px 2px 10px; */
  font-size: 12px;
}

th {
  text-align: center;
  font-size: 12px;
  color: #3700B3;
  text-transform: uppercase;
  font-weight: 100;
  font-family: sans-serif;
  cursor: pointer;
  height: 30px;
  white-space: nowrap;
  border-top:  0px;
  border-bottom:  1px solid #3700B3;
  font-weight: bold;
}

tr:first-child {
  border-top-left-radius: 3px;
}

tr:first-child {
  border-top-right-radius: 3px;
}

/*tr:last-child th:first-child { border-bottom-left-radius: 3px; }*/
/*tr:last-child th:last-child { border-bottom-right-radius: 3px; }*/

tr.rowdata td {
  /*text-align: center;*/
  font-size: 12px;
  /*background: #dfdfdf;*/
  border-bottom: 1px solid #dfdfdf;
}

tr.rowdata {
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  cursor: pointer;
  height: 24px;
}

tr.rowdata:hover {
  background: #f0f0f0;
  color: #404040;
}

tr.rowdatared {
  /*text-align: center;*/
  font-size: 12px;
  background: #ff7d7d;
  color: #FFFFFF;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  height: 24px;
}

tr.rowdatared td {
  border-bottom: 1px solid #dedede;
}

tr.rowdatared:hover {
  /*text-align: center;*/
  background: #FF5555;
}

tr.rowdatareddark {
  /*text-align: center;*/
  font-size: 12px;
  background: #FF0000;
  color: #FFFFFF;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

tr.rowdatareddark td {
  border-bottom: 1px solid #dedede;
}

tr.rowdatareddark:hover {
  /*text-align: center;*/
  background: #ff7d7d;
}

tr.rowdatayellow {
  /*text-align: center;*/
  font-size: 12px;
  background: yellow;
  color: #000;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  height: 24px;
}

tr.rowdatayellow td {
  border-bottom: 1px solid #dedede;
}

tr.rowdatayellow:hover {
  /*text-align: center;*/
  background: #fdff7e;
}

tr.rowdatablue {
  /*text-align: center;*/
  font-size: 12px;
  background: deepskyblue;
  color: midnightblue;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  height: 24px;
}

tr.rowdatablue td {
  border-bottom: 1px solid #dedede;
}

tr.rowdatablue:hover {
  /*text-align: center;*/
  background: lightskyblue;
}

tr.rowdatapurple {
  /*text-align: center;*/
  font-size: 12px;
  background: mediumpurple;
  color: #fff;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

tr.rowdatapurple td {
  /*border-bottom: 1px solid #dedede;*/
}

tr.rowdatapurple:hover {
  /*text-align: center;*/
  background: #9999cc;
}

tr.rowexpandable td {
  overflow: auto;
  background: #dfdfdf;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 5px;
  box-shadow: 0px 5px 10px #999999;
}

tr.rowexpandable.hide td {
  display: none;
}

span.detailexpand {
  font-size: 10px;
}

tr.banner {
  background: #3700B3;
}

td.menuutama {
  background: #000080;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

td.red{
  color:white;
  background:red;
}

td.red:hover{
  color:red;
  background: #ffaeae;
}

td.green{
  color:white;
  background:green;
}

td.green:hover{
  color:green;
  background:#98e46f;
}

form p {
  clear: left;
  margin: 0;
  /* padding: 12px; */
  padding-top: 0.6em;
}

.softred {
  /*text-align: center;*/
  font-size: 12px;
  background: #e45151;
  color: #FFFFFF;
}

tr.softred:hover {
  /*text-align: center;*/
  font-size: 12px;
  background: #FF5555;
  color: #FFFFFF
}

.yellow {
  /*text-align: center;*/
  font-size: 12px;
  background: #FFFF00;
}

.pink {
  /*text-align: center;*/
  font-size: 12px;
  background: #ffaeae;
}

.softblue {
  color: #dff1ff;
  font-size: 12px;
  background: #5d7ad0;
}

.green {
  color: green;
  font-size: 12px;
  background: #98e46f;
}

.blue {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  background: blue;
}

tr.blue:hover {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  background: #0055ff;
}

p {
  /* margin: 10px 10px 10px 10px; */
}

.tdr {
  text-align: right;
  font-size: 12px;
  padding: 0px 10px 0px 0px;
}

.tdl {
  text-align: left;
  font-size: 12px;
  padding: 0px 0px 0px 10px;
}

.greencell {
  color: green;
  font-size: 12px;
  background: #98e46f;
}

.yellowcell {
  font-size: 12px;
  background: yellow;
}

.imagi {
  background: #fff;
  border: 1px solid #83cde1;
  border-top: 3px solid #83cde1;
  margin: 2px 0px -5px 0px;
  padding: 0px 0px 0px 0px;
}

.helper {
  text-align: right;
  font-size: 9px;
}

.submit {
  border: 0;
  width: auto;
}

.submit:hover, .submit:active {
  border: 0;
}

.radio {
  background: none;
  border: 0;
}

/* ClearFix */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

/* Hides from IE-mac \*/
.clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* End hide from IE-mac */

/* common element layouter */

.border {
  border: 1px solid #ccc;
}

/* common font */

.genmed {
  font-size: 12px;
}

.gen {
  font-size: 14px;
}

.gensmall {
  font-size: 9px;
}

.genmedb {
  font-size: 12px;
  font-weight: bold;
}

.genb {
  font-size: 14px;
  font-weight: bold;
}

.gensmallb {
  font-size: 9px;
  font-weight: bold;
}

.banner {
  background-color: #da251d;
}

.bannerjudul {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #fff;
  background: #3700B3;
  height: 35px;
  vertical-align: middle;
  padding-top: 5px;
}

.bannernormal {
  font-size: 12px;
  color: #fff;
  /*background-color:#cab331;*/
}

.bannercari {
  font-size: 16px;
  background-color: #da251d;
}

.formQuestion {
  background-color: #ffee00;
  /*background: url('../images/bg_th.png') repeat top;*/
  padding: 0.3em;
  font-weight: 900;
  font-size: 0.8em;
  color: #515151;
  width: 99%;
}

.formAnswer {
  background-color: #f0f0f0;
  padding: 0.3em;
  margin-bottom: 1em;
  width: 99%;
}

.pageSubContentTitle {
  color: #fff;
  font-size: 1em;
  margin-bottom: 0.75em;
}

.small {
  width: 2.5em;
}

.medium {
  width: 10em;
}

.long {
  width: 20em;
}

span.invalid, span.missing {
  display: inline;
  margin-left: 1em;
  font-weight: bold;
  font-style: italic;
  font-family: Arial, Verdana, sans-serif;
    color: #f66;
  font-size: 0.9em;
}

.errorMessage {
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif;
  color: #ff0000;
  font-size: 0.9em;
}

.warningMessage {
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif;
  color: #d4a00c;
  font-size: 0.9em;
}

.noticeMessage {
  font-weight: normal;
  font-family: Arial, Verdana, sans-serif;
  color: #515151;
  font-size: 0.9em;
}

.myValidateColorValid {
  background-color: #FF0000;
}

.myValidateColorInvalid {
  background-color: #00FF00;
}

.myValidateColorEmpty {
  background-color: #0000FF;
}

.indexer {
  background-color: #cab331;
}

.invoice {
  border-color: blue;
  border-width: 1px;
  border-style: double;
}

div#loading_alamat {
  width: 20px;
  height: 7px;
  background: #0066FF url("../images/loading.gif") no-repeat center center;

  display: none;

}

#register {
  position: absolute;
  left: 20%;
  right: 20%;
  width: 700px;
}

#registerForm {
  background-color: rgb(250, 250, 250);
  border: solid rgb(200, 200, 200) 5px;
  -moz-border-radius-topleft: 10px 10px;
  -moz-border-radius-topright: 10px 10px;
  -moz-border-radius-bottomright: 10px 10px;
  -moz-border-radius-bottomleft: 10px 10px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

.menu_utama {
  background-color: #efefef;
  border-radius: 12px 12px 12px 12px;
}

input[type="button"].top_menu_lost_focus {
  text-transform: none;
  background: none;
  display: inline-block;
  color: grey;
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
  height: 50px;
  cursor: pointer;
  width: 100px;
  -webkit-transition: color 1s;
  transition: color 1s;
  border-radius: 0px;
  border: 0px;
}

input[type="button"].top_menu_lost_focus:hover {
  color: #03dac5;
}

input[type="button"].top_menu_on_select {
  text-transform: none;
  background: none;
  display: inline-block;
  color: #3700b3;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  height: 50px;
  cursor: pointer;
  width: 100px;
  border-radius: 0px;
  border-bottom: 3px solid #3700b3;
}

input[type="button"].submenutop {
  text-transform: none;
  background: none;
  display: inline-block;
  color: grey;
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
  height: 30px;
  cursor: pointer;
  width: 80px;
  -webkit-transition: color 1s;
  transition: color 1s;
  border-radius: 0px;
  border: 0px;
}

input[type="button"].submenutop.selected {
  color: #3700b3;
  border-bottom: 1px solid #3700b3;
}

input[type="button"].submenutop:hover {
  color: #03dac5;
}

.show_popup {
  background: #a0a0a0;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  position: absolute;
  font-weight: bold;
  border-radius: 5px 5px 5px 5px;
  z-index: 0;
}

td.dashboardkolomheader {
  background: #da251d;
  color: white;
  font-size: 12px;
  text-align: center;
}

td.generaltotalkolom {
  background: #da251d;
  color: white;
  font-size: 12px;
  text-align: right;
  width: 300px;
  text-transform: uppercase;
  font-weight: bold;
  padding-right: 5px;
}

td.generaltotaldata {
  font-size: 12px;
  text-align: right;
  width: 300px;
  border-bottom: 1px solid #ccc;
  padding-right: 5px;
}

.generaltotalrow {
  background: #fff;
}

tr.generaltotalrow:hover {
  background: #fdff7e;
  color: #404040;
}

div.menuwrapper {
  width: calc(100% - 2px);
}

div.menubutton {
  width: calc(33% - 5px);
  height: 100px;
  float: left;
  padding-left: 5px;
  padding-bottom: 5px;
}

input[type="button"].menubutton {
  width: 100%;
  height: 100px;
  white-space: normal;
  color: white;
  border: none;
  border-radius: 5px 5px 5px 5px;
  font-size: 16px;
  font-family: sans-serif;
  box-shadow: 3px 3px 8px grey;
  text-transform: capitalize;
  font-weight: 100;
}

img.img-ico {
  width: 96px;
  height: 96px;
}

div.menuicon:hover .belakang {
  /*filter: drop-shadow(0px 0px 0 white) drop-shadow(-1px -1px 0 white) saturate(100%) opacity(100%);*/
  filter: drop-shadow(0px 0px 0 #fff) drop-shadow(0px 0px 0 #fff) brightness(200%);
  z-index: 1;
}

div.menuwithicon {
  width: 200px;
  height: 140px;
  padding-top: 30px;
  text-align: center;
  /*background: #1976d2;*/
  -webkit-transition: background 1s, width 1s, font-size 1s;
  transition: background 1s, width 1s, font-size 1s;
  color:#1976d2;
}

div.menuwithicon:hover {
  background: #1976d2;
  color:white;
}

div.menuwithicon:hover img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

div.menuwithicon:hover font {
  color: white;
}

div.menuwithicon:hover .belakang {
  /*filter: drop-shadow(0px 0px 0 white) drop-shadow(-1px -1px 0 white) saturate(100%) opacity(100%);*/
  filter: drop-shadow(0px 0px 0 #fff) drop-shadow(0px 0px 0 #fff) brightness(200%);
  z-index: 1;
}

a.menu {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 16px;
  color: white;
}

a.menu:hover {
  color: white;
  font-weight: normal;
}

div.menubarbutton {
  float: left;
  padding-right: 1px;
  padding-left: 0px;
}

div.menubaricon {
  width: 100px;
  height: 30px;
  padding-top: 10px;
  text-align: center;
  background: #1976d2;
  -webkit-transition: background 1s, width 1s, font-size 1s;
  transition: background 1s, width 1s, font-size 1s;
}

div.menubaricon:hover {
  background: #d4a00c;
  font-size: 13px;
}

a.menubar {
  font-family: "calibri";
  font-weight: normal;
  font-size: 13px;
  color: white;
}

a.menubar:hover {
  color: white;
  font-weight: normal;
}

div.menuiconsmall {
  width: 80px;
  float: right;
  text-align: center;
}

div.form_ubah_password {
  background: #da251d;
  color: #5e8db5;
  font-size: 11px;
  text-align: center;
  vertical-align: bottom;
  position: absolute;
  top: 60px;
  left: 0px;
  width: 370px;
  cursor: pointer;
  opacity: 0.9;

}

td.label_putih {
  /*font*/
  color: #ffffff;
  font-size: 13px;
  text-align: right;
  vertical-align: top;
  font-family: "trebuchet ms";
}

div.resvmenuicon {
  width: 80px;
  float: right;
  text-align: center;
}

div#resvregmemberwrapper {
  width: 520px;
  height: 420px;
  padding-left: 80px;
}

div#resvregmembercontent {
  text-align: left;
  width: 400px;
  height: 400px;
}

.resvregmemberlabel {
  display: inline-block;
  width: 100px;
  padding-top: 7px;
  vertical-align: middle;
}

.resvregmemberfield {
  display: inline-block;
  padding-top: 7px;
  vertical-align: middle;
}

div#resvdetailbookwrapper {
  padding-left: 5px;
}

div#resvdetailbookcontent {
  text-align: left;
}

.resvdetailbooklabel {
  display: inline-block;
  width: 100px;
  padding-top: 7px;
  vertical-align: middle;
}

.resvdetailbookfield {
  display: inline-block;
  padding-top: 7px;
  vertical-align: middle;
}

span.bookopsdata {
  width: 300px;
  display: inline-block;
  vertical-align: top;
}

.bookopshighlight {
  color: black;
  background: yellow;
  font-weight: bold;
}

.headops {
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.headnav {
  float: right;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
}

.nodata {
  font-size: 18px;
  text-align: center;
  background: yellow;
}

.pesanberhasildisimpan {
  font-size: 18px;
  color: green;
  background: #98e46f;
  text-align: center;
}

.hargapromo {
  color: red;
  text-decoration: line-through;
}

input[type="button"].b_edit {
  background: #3700B3 url("../images/btn_crud_edit.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_edit:hover, input[type="button"].b_edit:focus {
  background: #d4a00c url("../images/btn_crud_edit.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_delete {
  background: #B00020 url("../images/btn_crud_delete_small.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_delete:hover, input[type="button"].b_delete:focus {
  background: #d4a00c url("../images/btn_crud_delete_small.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_cancel {
  background: #B00020 url("../images/btn_close.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_cancel:hover, input[type="button"].b_cancel:focus {
  background: #d4a00c url("../images/btn_close.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_ok {
  background: #3700B3 url("../images/btn_check.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_ok:hover, input[type="button"].b_ok:focus {
  background: #d4a00c url("../images/btn_check.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_browse {
  background: #1976d2 url("../images/btn_browse.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_browse:hover, input[type="button"].b_browse:focus {
  background: #d4a00c url("../images/btn_browse.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_setting {
  background: #1976d2 url("../images/btn_setting.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_setting:hover, input[type="button"].b_setting:focus {
  background: #d4a00c url("../images/btn_setting.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_respon {
  background: #1976d2 url("../images/btn_respon.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_respon:hover, input[type="button"].b_respon:focus {
  background: #d4a00c url("../images/btn_respon.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

input[type="button"].b_print {
  background: #3700B3 url("../images/b_print.png") no-repeat center center;
  background-size: 14px 14px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].b_print:hover, input[type="button"].b_print:focus {
  background: #d4a00c url("../images/b_print.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

.b_chk {
  border: 1px solid #909090;
  background: #fff;
  border-radius: 8px 8px 8px 8px;
  display: inline-block;
  width: 12px;
  height: 12px;
  cursor: pointer;
}

.b_perbesar {
  background: url('../images/b_perbesar.png') no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.dropcalendar {
  background: white url('../images/b_calendar.png') no-repeat right;
  width: 100px;
  cursor: pointer;
}

.dropcalendar:hover {
  background: white url('../images/b_calendar.png') no-repeat right;
  width: 100px;
}

.dropcalendar:focus {
  background: white url('../images/b_calendar.png') no-repeat right;
  width: 100px;
}

.icon_warning {
  background: url('../images/icon_warning.png') no-repeat;
  background-size: 16px 16px;
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

div.sectionheader{
  padding-top: 12px;
  box-shadow: 5px 3px 8px #c0c0c0;
  display: inline-block;
  width: 100%;
}

.wrappertabledata {
  overflow: auto;
  /*overflow-y: hidden;*/
  width: calc(100% - 10px);
  height: calc(100% - 192px);
}

.wrappertabledata.withfilter {
  height: calc(100% - 227px);
}

.wrapperinnertable {
  overflow: auto;
  overflow-x: hidden;
  height: calc(100% - 30px);
}

.wrapperinnertablespan {
  height: calc(100% - 60px);
}

.wrappertabledatabrowse {
  overflow: auto;
  overflow-y: hidden;
  width: 98%;
  height: 270px;
  padding-left: 1%;
  margin-left: 5px;
}

div#sectionact {
  float: left;
  width: 132px;
  text-align: left;
  padding-left: 10px;
  padding-bottom: 10px;
}

div#sectionsearch {
  float: right;
  min-width: 200px;
  width: 50%;
  text-align: right;
  padding-bottom: 10px;
  padding-right: 5px;
}

div#sectionfilter{
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  float: left;
  display: inline-block;
  width: calc(100% - 10px);
  overflow: auto;
  white-space: nowrap;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  text-align: left;
}

div#sectionfilter::-webkit-scrollbar {
  display: none;
}

span.pesan {
  display: inline-block;
  background: yellow;
  color: black;
  font-size: 12px;
  text-transform: uppercase;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

span.paketdetailfield {
  text-align: right;
  color: #bb1a12;
  display: inline-block;
  width: 50%;
}

span.paketdetailvalue {
  text-align: left;
  display: inline-block;
  width: 50%;
}

div.paketdetailsubtitle {
  font-size: 14px;
  text-transform: uppercase;
  padding-top: 10px;
}

div#wrapperoverallheader {
  width: 100%;
  background-color: #6200EE;
  height: 30px;
  box-shadow: 0px 3px 5px #a0a0a0;
}

span#judulmenuaktif {
  display: inline-block;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  color: white;
  padding-top: 6px;
  width: calc(100% - 10px);
  float: left;
  padding-left: 10px;
}

span#overallheaderleft {
  width: 84%;
  display: inline-block;
  float: left;
  background: #6200EE;
  height: 60px;
  text-align: center;
  /*box-shadow: 3px 0px 5px #3f3f3f;*/
  /*border-radius: 0px 60px 60px 0px;*/
}

span#overallheaderright {
  display: inline-block;
  float: right;
  width: 15%;
  background: #3700B3;
  height: 60px;
  text-align: center;
  border-radius: 60px 0px 0px 60px;
}

span#overallheaderusername {
  display: inline-block;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  padding-top: 15px;
}

span#overallheaderbcrump {
  display: inline-block;
  float: left;
  padding-left: 10px;
  font-family: "trebuchet ms";
  font-size: 14px;
}

span#overallheaderaction {
  display: inline-block;
  float: right;
  padding-right: 10px;
  color: #838281;
  font-weight: bold;
  font-size: 14px;
  font-family: sans-serif;
}

div#wrappergrupmenu {
  display: inline-block;
  width: 100%;
  height: 51px;
  background: white;
  font-size: 12px;
  border-top: 1px solid #dfdfdf;
  overflow: auto;
  white-space: nowrap;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

div#wrappergrupmenu::-webkit-scrollbar {
  display: none;
}

span#wrapperfooter {
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: inline-block;
  width: 100%;
  height: 77px;
}

span#footermenu {
  display: inline-block;
  width: calc(100% - 5px);
  height: 20px;
  background: #838281;
  padding-top: 5px;
  color: white;
  text-align: left;
  padding-left: 5px;
}

span#footerpaging {
  padding-top: 7px;
  display: inline-block;
  width: 100%;
  height: 13px;
}

span.bcrumparrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #1976d2;
  border-bottom: 5px solid transparent;
}

span.arrowsortasc {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid white;
}

span.arrowsortdesc {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid white;
}

input[type="button"].pagepaging {
  background: #03DAC5;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 12px;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-transform: none;
  border-radius: 2px;
  border: 0px;
  padding-right: 1px;
  padding-left: 1px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 0px 3px 8px #c0c0c0;
  margin-right: 3px;
}

input[type="button"].pagepaging:hover, input[type="button"].pagepaging:focus {
  background: #d4a00c;
  background-size: 18px 18px;
  border: 0px;
}

span.titlepopupentrydetail {
  position: absolute;
  top: 4px;
  left: 40px;
  color: #3700b3;
  font-family: sans-serif;
  font-size: 20px;
  width: calc(100% - 80px);
  text-align: left;
  font-weight:bold;
}

input[type="button"].popupbuttonclose {
  float: right;
  position: relative;
  top: -10px;
  right: 10px;
  background: red url("../images/btn_close.png") no-repeat center center;
  background-size: 18px 18px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 0px;
  border-radius: 15px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 3px 3px 5px #606060;
}

input[type="button"].popupbuttonclose:hover {
  background: #FF5555 url("../images/btn_close.png") no-repeat center center;
  background-size: 18px 18px;
  border: 0px;
}

input[type="button"].autowidth {
  background: #3700B3;
  font-family: sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: auto;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].togglefilterinactive {
  background: #888;
  color: #d0d0d0;
}

#buttonsimpanpopupentrydetail {
  background: #d4a00c url("../images/btn_save.png") no-repeat center center;
  background-size: 20px 20px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 0px;
  border-radius: 25px;
  padding-right: 10px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  box-shadow: 3px 3px 5px #606060;
  position: absolute;
  bottom: 15px;
  right: 20px;
}

#buttonsimpanpopupentrydetail:hover {
  background: gold url("../images/btn_save.png") no-repeat center center;
  background-size: 20px 20px;
  border: 0px;
}

span.flatbutton {
  display: inline-block;
  background: #1976d2;
  width: 150px;
  height: 25px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 14px;
  color: white;
  padding-top: 10px;
  cursor: pointer;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s;
  border-radius: 3px 3px 3px 3px;
}

span.flatbutton:hover {
  background: skyblue;
}

span.popuplabel {
  display: inline-block;
  vertical-align: top;
  text-align: right;
  color: #3700b3;
  font-family: sans-serif;
  font-size: 14px;
  width: 40%;
}

span.popuplabel.wajib {
  font-weight: bold;
}

span.popupinput {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 58%;
  font-size: 14px;
  font-weight: bold;
}

span.detailinforatakanan{
  display: inline-block;
  width: 100px;
  text-align: right;
}

span.toggleshowdetailentry{
  width: 100%;
}

span.toggleshowdetailentry.hide{
  display: none;
}

span.toggleshowdetailentry.show{
  display: inline-block;
}

span.wrapperlabelinfoangka{
  display: inline-block;
  width: 100px;
  text-align: right;
}

#wrapperoverlaycontentpopupentrydetail {
  overflow: auto;
  overflow-x: auto;
  width: 100%;
  display:inline-block;
}

#sectiondatapopupentrydetail{
  display: inline-block;
  width: 100%;
}

div#wrapperpaketbody {
  width: 100%;
  padding-bottom: 30px;
}

.formheader {
  font-size: 15px;
  text-align: center;
  font-family: "trebuchet ms";
  background-color: #838281;
  color: #ffffff;
  text-transform: uppercase;
  height: 18px;
}

div.bodyoverlay {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(125, 125, 125, .9) url('../images/loading3.gif') no-repeat center center;
  border-radius: 3px 3px 3px 3px;
}

.resvcargolistpax {
  color: red;
  font-size: 12px;
  font-weight: bold;
  margin-left: 30px;
}

.combolistselection {
  display: inline-block;
  background: white url('../images/b_arrowdown.png') no-repeat right;
  cursor: pointer;
  width: 150px;
  height: 15px;
  border: 1px solid #b0b0b0;
  color: black;
  text-align: left;
  font-size: 12px;
  font-family: "trebuchet ms";
  border-radius: 3px 3px 3px 3px;
}

.combolistselection.error {
  display: inline-block;
  background: red url('../images/b_arrowdown.png') no-repeat right;
  cursor: pointer;
  width: 150px;
  height: 15px;
  border: 1px solid #a0a0a0;
  color: black;
  text-align: left;
  font-size: 12px;
  font-family: "trebuchet ms";
}

.combolistselection:hover {
  background: #fdff7e url('../images/b_arrowdown.png') no-repeat right;
  color: black;
}

.comboliststyle:focus {
  background: white url('../images/b_arrowdown.png') no-repeat right;
  color: black;
}

#combolistcontainer, #combolistcontainerpopup {
  position: absolute;
  /*overflow: auto;
  overflow-x: hidden;*/
  background: rgba(255, 255, 255,1);
  padding-bottom: 10px;
  box-shadow: 3px 3px 5px grey;
  width: 150px;
  text-align: center;
  border-radius: 0px 0px 5px 5px;
}

#listcontent {
  overflow: auto;
  overflow-x: hidden;
}

div.combocontainer {
  position: absolute;
}

div.resvcombolistgroup {
  background: #a0a0a0;
  color: white;
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
  font-family: "trebuchet ms";
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  margin-right: 1px;
  margin-left: 1px;
  width: 100%;
  border-bottom: 1px solid #cccccc;
}

div.resvcombolist {
  color: black;
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
  cursor: pointer;
  font-family: "trebuchet ms";
  font-size: 12px;
  text-transform: uppercase;
  margin-right: 1px;
  margin-left: 1px;
  width: 100%;
  border-bottom: 1px solid #cccccc;
  background: #fff;
}

div.resvcombolist:hover {
  background: #fdff7e;
  color: black;
}

/*================= TOOLTIPS ===================*/
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}

[tooltip]::after {
  content: attr(tooltip); /* magic! */

  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;

  /*
    Let the content set the size of the tooltips
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

#wrapperpopupentrydetail{
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  transition:0.3s;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  position:fixed;
  left: calc(100% + 5px) ;
  z-index: 3;
}

#wrapperpopupentrydetail.hide{
  left: calc(100% + 5px) ;
}

#wrapperpopupentrydetail.show{
  left: 0;
}

#contentpopupentrydetail{
  height: 90%;
  overflow: auto;
  overflow-x: hidden;
}

span.listlabel {
  background: #1976d2;
  color: white;
  display: block;
  border-radius: 5px 5px 5px 5px;
  margin: 2px 5px 2px 5px;
  padding: 2px 2px 2px 2px;
  text-align: center;
}

div.fileinputs {
  position: relative;
}

div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity:0);
  opacity: 0;
  z-index: 2;
}

.wrappermultilist {
  display: block;
  width: 99%;
  vertical-align: top;
}

.wrappermultilistact {
  display: inline-block;
  width: 10%;
  text-align: center;
  padding-right: 5px;
}

.wrappermultilistcontent {
  display: inline-block;
  width: 90%;
}

select.multiple {
  background-image: none;
  overflow: auto;
  width: 100%;
  height: 70px;
}

div.noticebox{
  position: absolute;
  width: 100%;
  height:18px;
  box-shadow: 5px 5px 8px #4a4040;
}

div.noticebox.red{
  background: #f66;
  color:white;
}

div.noticebox.green{
  background: lawngreen;
  color:darkgreen;
}

label.status{
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  height: 14px;
  border-radius: 5px;
  border: 0px;
  padding-left: 5px;
  padding-right: 5px;
}

label.status.green{
  background: greenyellow;
  color:green;
}

label.status.red{
  background: indianred;
  color:white;
}

label.status.yellow{
  background: yellow;
  color:green;
}

label.status.blue{
  background: dodgerblue;
  color:white;
}

label.status.purple{
  background: mediumpurple;
  color:white;
}


.gambarcontainer {
  display: inline-block;
  position: relative;
  height: 70px;
  width: 100px;
  border: 1px solid lightgrey;
  cursor: pointer;
}

.gambarimage {
  opacity: 1;
  height: 70px;
  width: 100px;
  transition: .5s ease;
  backface-visibility: hidden;
  object-fit: cover;
}

.gambaroverlay {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.gambarcontainer:hover .gambarimage {
  opacity: 0.3;
}

.gambarcontainer:hover .gambaroverlay {
  opacity: 1;
}

div.tabletitleflatnew {
  font-size: 18px;
  font-family: "trebuchet ms";
  text-transform: uppercase;
  color: #1976d2;
  margin-left: 5px;

}

table.flatnew {
  border-spacing: 1px;
  /*white-space: pre-wrap;*/
  white-space: nowrap;
}

table.flatnew th {
  text-align: center;
  font-size: 14px;
  background: white;
  color: #606060;
  text-transform: uppercase;
  font-weight: 100;
  font-family: "trebuchet ms";
  cursor: pointer;
  height: 30px;
  white-space: nowrap;
  border: 0px;
}

tr.rowdataflat td {
  font-size: 12px;
  background: #efefef;
  border: 0px;
}

tr.rowdataflat td.colact {
  background: #1976d2;
  border: 0px;
  color: white;
}

tr.rowdataflat {
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  cursor: pointer;
}

img.containerlogomitra {
  opacity: 1;
  height: 25px;
  width: 50px;
  transition: .5s ease;
  backface-visibility: hidden;
  object-fit: cover;
}

input[type="button"].redcross {
  background: red url("../images/btn_close.png") no-repeat center center;
  background-size: 12px 12px;
  font-weight: normal;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 10px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].redcross:hover {
  background: #FF5555 url("../images/btn_close.png") no-repeat center center;
  background-size: 12px 12px;
  border: 0px;
}

div.namaanggota {
  margin-left: 2px;
  margin-right: 0px;
  margin-top: 2px;
  padding-right: 5px;
  padding-left: 5px;
  background: yellowgreen;
  color: white;
  display: inline-block;
  min-width: 15px;
  height: 17px;
  padding-top: 3px;
  border-radius: 3px 3px 3px 3px;
  font-family: arial;
}

input[type="button"].btnaddsmall {
  background: #1976d2 url("../images/btn_add_small.png") no-repeat center center;
  background-size: 14px 14px;
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: 0px;
  padding-right: 0px;
  padding-left: 0px;
  cursor: pointer;
  color: white;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

input[type="button"].btnaddsmall:hover, input[type="button"].btnaddsmall:focus {
  background: #d4a00c url("../images/btn_add_small.png") no-repeat center center;
  background-size: 14px 14px;
  border: 0px;
}

#wrappererrorpage{
  text-align: center;
  width: 100%;
  height: 100%;
}

#headererrorpage{
  text-align: center;
  font-size: 18px;
  color: white;
  font-family: sans-serif;
  background: #b00020;
  height: 40px;
  padding-top: 20px;
  box-shadow: 0px 5px 5px grey;
}

#imageerrorpage{
  float: left;
  padding-left: 20px;
  padding-top: 30px;
  background: url("../images/tetuko.png") no-repeat center center;
  width: 126px;
  height: 200px;
}

#contenterrorpage{
  float: left;
  padding-top: 30px;
  width: calc(100% - 146px);
  height: calc(100% - 130px);
  font-family: sans-serif;
  font-size: 12px;
}

input[type="button"].buttonerrorpage{
  background: #D00020;
  width: 100%;
  border-radius: 0px;
  height: 40px;
}

input[type="button"].buttonerrorpage:hover{
  background: #FF5555;
}

#popupnotifcontent{
  background: white;
  text-align: center;
  z-index: 100;
}

#popupnotifpesan{
  display: inline-block;
  font-size: 16px;
  font-family: sans-serif;
  color: #606060;
  padding-top: 60px;
  width: calc(100% - 120px);
  height: calc(100% - 150px);
}

#popupnotifsectionbutton{
  text-align: center;
  text-wrap: normal;
}

input[type="button"].buttonbawah{
  background: #009688;
  color: white;
  width: calc(100% - 20px);
  height: 40px;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  border-radius: 6px;
  margin-bottom: 5px;
  border: 1px solid #009688;
}

input[type="button"].buttonbawah:hover{
  background: #d4a00c;
  border: 1px solid #d4a00c;
}

input[type="button"].buttonbawah.nohighlight{
  background: white;
  border: 1px solid #c0c0c0;
  color: grey;
}

input[type="button"].buttonbawah.red{
  background: #D00020;
  color: white;
  width: calc(100% - 20px);
  height: 40px;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  border-radius: 6px;
  margin-bottom: 5px;
  border: 1px solid #D00020;
}

input[type="button"].buttonbawah.red:hover{
  background: #FF5555;
}

input[type="button"].buttonbawah.green{
  background: green;
  color: white;
  width: calc(100% - 20px);
  height: 40px;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  border-radius: 6px;
  margin-bottom: 5px;
  border: 1px solid green;
}

input[type="button"].buttonbawah.green:hover{
  background: greenyellow;
  color: green;
  border: 1px solid greenyellow;
}

#wrapperpopupfilter{
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  transition:0.3s;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  position:fixed;
  left: calc(100% + 5px) ;
  z-index: 3;
}

#wrapperpopupfilter.hide{
  left: calc(100% + 5px) ;
}

#wrapperpopupfilter.show{
  left: 0;
}

#contentpopupfilter{
  height: 90%;
  overflow: auto;
  overflow-x: hidden;
}

span.titlepopupfilter {
  position: absolute;
  top: 4px;
  left: 40px;
  color: #3700b3;
  font-family: sans-serif;
  font-size: 20px;
  width: calc(100% - 80px);
  text-align: left;
  font-weight:bold;
}

span.judulsection{
  font-family: sans-serif;
  font-size: 16px;
  width: calc(100% - 5px);
  display: inline-block;
  background: #838281;
  box-shadow: 3px 3px 5px #a0a0a0;
  padding-top: 5px;
  margin-bottom: 10px;
  height: 22px;
  color: white;
  text-align: left;
  padding-left: 5px;
}

span.listlabel {
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  padding-right: 5px;
  padding-left: 5px;
  background: green;
  color: white;
  display: inline-block;
  min-width: 15px;
  height: 14px;
  float: left;
  border-radius: 3px 3px 3px 3px;
}

input[type="button"].buttonoverallfooter{
  text-transform: none;
  background: none;
  display: inline-block;
  color: #3700b3;
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  border-radius: 0px;
  border: 0px;
  height: 18px;
  width: 90px;
}

input[type="button"].buttonoverallfooter.pendek{
  width: 40px;
}

input[type="button"].buttonahref {
  text-transform: none;
  background: none;
  display: inline-block;
  color: grey;
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: color 1s;
  transition: color 1s;
  border-radius: 0px;
  border: 0px;
  color: #3700b3;
  font-weight: bold;
  height: auto;
  width: auto;
}

span.wrapperangkaratakanan{
  width: 50%;
  max-width: 200px;
  display: inline-block;
  text-align: right;
}

div.wrapperkwitansi {
  display: inline-block;
  font-family: "trebuchet ms";
  font-size: 12px;
  text-transform: none;
}

div.containerkwitansi {
  display: inline-block;
  width: 300px;
  /*border: 1px solid grey;*/
  text-align: center;
}

span.kwitansiheader{
  background: url('../images/logomitra.png') no-repeat left center;
  background-size: 64px 64px;
  display: inline-block;
  text-align: left;
  padding-left: 5px;
  padding-top: 5px;
  width: calc(100% - 10px);
  height: 64px;
}

span.kwitansiheadertextcontainer{
  margin-left: 70px;
  font-size: 10px;
  width: calc(100% - 71px);
  display: inline-block;
}

span.kwitansiheadertext.judul{
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}


#kwitansijudul{
  width: 100%;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

span.kwitansilabel{
  display: inline-block;
  width: 39%;
  text-align: right;
}

span.kwitansitext{
  display: inline-block;
  width: 59%;
  text-align: left;
}

#kwitansijuduldaftartindakan{
  width: 100%;
  display: inline-block;
  text-transform: uppercase;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

table.kwitansitable {
  width: 100%;
  border-spacing: 0px;
  /*white-space: pre-wrap;*/
  white-space: inherit;
}

tr.kwitansitablerow{
  vertical-align: top;
}

tr.kwitansitablerow td {
  border-bottom: 1px dashed black;
}

#kwitansiketeranganlunas{
  width: 100%;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
}