/* Default */
body {
  margin: 0px;
  padding: 0px;
  /*background:#F5F5F5;*/
  font: 12px/130% Verdana, Arial, Helvetica, sans-serif;
  color: #404040;
}

body.tiket {
  margin: 0px;
  padding: 0px;
  color: black;
  font-weight: bold;
  font-family: Courier New;
}

body.spj {
  margin: 0px;
  padding: 0px;
  font-family: Courier New;
  background-image: url('../images/signnaturespj.jpg');
  background-repeat: no-repeat;
  background-position: left left;
}

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

.dojoDialog {
  /*background : #619396;*/
  /*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 {
  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: #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;
}

a.crud {
  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;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

a.crud:hover {
}

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

a.crud-disabled {
  pointer-events: none;
  cursor: default;
}

a.btnheadercari {
  font-family: "trebuchet ms";
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 3px 3px 3px 3px;
  padding-right: 5px;
  padding-left: 5px;
  cursor: pointer;
  color: #8e7b31;
  background: #ffdd27;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

a.btnheadercari:hover {
  background: #fffd2f;
}

a.toggleon {
  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;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
  margin-bottom: 2px;
}

a.toggleon:hover {
}

a.toggleoff {
  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.toggleoff:hover {
  color: white;
  background: red;
}

a.toggleon.disabled, a.toggleoff.disabled {
  background: #a2a2a2 !important;
  color: white;
  pointer-events: none;
}

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

a[disabled]
{
  background:grey;
  color:white;
}

a[disabled]:hover
{
  background:grey;
  color:white;
}

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: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

input[type="button"], input[type="submit"] {
  color: #404040;
  font-size: 12px;
  background: #cccccc;
  border-top: 0px solid #8d8d8d;
  font-family: "Courier new", Courier, mono;
  border-right: 1px solid #8d8d8d;
  border-bottom: 1px solid #8d8d8d;
  border-left: 0px solid #8d8d8d;
}

input[type="button"]:hover, input[type="submit"]:hover {
  background: #dddddd;
  border-top: 0px solid #b0b0b0;
  border-right: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  border-left: 0px solid #b0b0b0;
}

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

input[type="text"], input[type="password"], input[type="time"] {
  border: 1px solid #b0b0b0;
  border-radius: 3px 3px 3px 3px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input[type="text"].txtheadercari {
  border: 0px;
  height: 20px;
  width: 150px;
  border-radius: 3px 3px 3px 3px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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: #555;
  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;
}

input[type="text"]:hover, textarea:hover {
  /*background: #fdff7e;*/
}

input:focus, textarea:focus {
  background: #fff94c;
}

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

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

input[type="file"]:hover{

}



label {
  clear: left;
  height: 18px;
  width: 250px;
  border-top: 1px none #FF0000;
  border-right: 1px none #FF0000;
  border-bottom: 1px solid #0099FF;
  border-left: 1px none #FF0000;
  font-size: 12px;
  font-weight: bold;
  /* padding: 2px 20px 2px 2px;		*/
  color: #000000;
}

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

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

td {
  font-size: 12px;
}

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: #fff;
  background: #808080;
  text-transform: uppercase;
  font-weight: 100;
  font-family: "trebuchet ms";
  cursor: pointer;
  height: 30px;
  white-space: nowrap;
}

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

tr:first-child th:last-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; }*/

/*CSS Closing & Setoran*/
tr.setoran_sopir
{
  background: blue;
  color: white;
}

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

tr.belum_closing
{
  font-size:12px;
  color: #7E4705;
  background: #FFA500;
}

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

tr.sudah_terima_setoran
{
  color:green;
  background: #98e46f;
}

tr.setoran_tidak_update
{
  background: red;
}

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

tr.even:hover {
  background: #fdff7e;
}

tr.banner {
  /*background: #619396;*/
}

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

td.layout_kursi {
  background: #ffffff;
  width: 20%;
  height: 110px;
  vertical-align: middle;
}

td.jurusan_paket {
  background: url('../images/icon_paket_3.png');
  background-repeat: no-repeat;
  background-position: center center;
}

td.jurusan_paket_travel {
  background: url('../images/icon_paket_2.png');
  background-repeat: no-repeat;
  background-position: center center;
}

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

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

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

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

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

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

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

.lightgreen 
{
  /*text-align: center;*/
  font-size: 12px;
  background: #1dd05d;
  color: #000;
}

.lightgreen:hover
{
  background: #fdff7e;
}

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

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

.softblue:hover {
  color: #ffffff;
  font-size: 12px;
  background: #2f54c3;
}

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

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

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

.green:hover {
  color: green;
  font-size: 12px;
  background: #b2f28f;
}

.orange {
  color: #ffffff;
  font-size: 12px;
  background: orange;
}

.orange:hover {
  color: #ffffff;
  font-size: 12px;
  background: orange;
}

.blue {
  color: #ffffff;
  font-size: 12px;
  background: #3030f2;
}

.blue:hover {
  color: #ffffff;
  font-size: 12px;
  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;
  height: 35px;
  vertical-align: middle;
  padding-top: 5px;
}

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

.bannercari {
  font-size: 16px;
}

.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: #ff9900;
  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;

}

.kursi_nama {
  /*font*/
  background-color: #ffff00;
  font-family: verdana;
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.kursi_warning {
  /*font*/
  width: 100%;
  background-color: #ff0000;
  font-family: verdana;
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

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

.tiket_header {
  /*font*/
  font-family: Courier New;
  font-size: 18px;
  font-weight: bold;
}

.tiket_subheader {
  /*font*/
  font-family: Courier New;
  font-size: 12px;
  font-weight: bold;
}

.tiket_body {
  /*font*/
  font-family: Courier New;
  font-size: 10px;
}

.tiket_big_mark {
  /*font*/
  font-family: Courier New;
  font-size: 22px;
  text-align: center;
}

.tiket_footer {
  /*font*/
  font-family: Courier New;
  font-size: 20px;
  text-align: center;
  vertical-align: top;
}

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

.header_reservasi {
  background: url('../images/subheader_shadow.png');
  background-repeat: repeat-x;
  height: 114px;
  /*border-radius: 0px 0px 15px 15px;*/
}

.header_reservasi_separator {
  background: url('../images/header_vertical_line_shadow.png');
  background-repeat: no-repeat;
  height: 114px;
  width: 1px;
  /*border-radius: 0px 0px 15px 15px;*/
}

.reservasi_background {
  background: url('../images/reservasi_background_shadow.png');
  background-repeat: repeat-x;
}

span.top_menu_lost_focus {
  display: inline-block;
  font-family: "trebuchet ms";
  font-size: 16px;
  vertical-align: middle;
  height: 40px;
  cursor: pointer;
  padding-top: 20px;
  padding-right: 5px;
  padding-left: 5px;
  width: 110px;
  -webkit-transition: background 1s;
  transition: background 1s;
}

span.top_menu_lost_focus:hover 
{
}

span.top_menu_on_select {
  display: inline-block;
  font-family: "trebuchet ms";
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  vertical-align: middle;
  height: 40px;
  cursor: pointer;
  padding-top: 20px;
  padding-right: 5px;
  padding-left: 5px;
  width: 110px;
}

.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: 900px;
}

div.menubutton {
  float: left;
  padding-right: 5px;
  padding-left: 5px;
}

div.menuicon {
  width: 200px;
  height: 130px;
  padding-top: 30px;
  text-align: center;
  /*background: #619396;*/
  -webkit-transition: background 1s, width 1s, font-size 1s;
  transition: background 1s, width 1s, font-size 1s;
  border-radius: 5px;
}

div.menuicon:hover {
  font-size: 18px;
  border-radius: 5px;
}

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

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

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

a.menu {
  font-family: "calibri";
  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;
  -webkit-transition: background 1s, width 1s, font-size 1s;
  transition: background 1s, width 1s, font-size 1s;
}

div.menubaricon:hover {
  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#resvmenuiconpengumuman {
  width: 80px;
  float: right;
  text-align: center;
  background-image: url('../images/icon_amplop.png');
  background-repeat: no-repeat;
  background-position: top center;
}

div#bg_antrian {
  width: 80px;
  float: right;
  text-align: center;
  background-image: url('../images/ic_antrian.png');
  background-repeat: no-repeat;
  background-position: top 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.b_chk_disabled {
  background: url('../images/b_not_allowed.png') no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px;
  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: 90px;
  cursor: pointer;
}

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

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

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

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

.b_jp{
  display: inline-block;
  width: 80px;
  height: 60px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
  cursor: pointer;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:5px;
  float:left;
}

.b_tunai {
  background: url('../images/icon_pembayaran/ic_jp_tunai.png') no-repeat;
}

.b_edc {
  background: url('../images/icon_pembayaran/ic_jp_edc.png') no-repeat;
}

.b_edc_dana {
  background: url('../images/icon_pembayaran/ic_jp_edc_dana.png') no-repeat;
  background-size: contain;
}

.b_edc_gopay {
  background: url('../images/icon_pembayaran/ic_jp_edc_gopay.png') no-repeat;
  background-size: contain;
}

.b_edc_ovo {
  background: url('../images/icon_pembayaran/ic_jp_edc_ovo.png') no-repeat;
  background-size: contain;
}

.b_edc_shopeepay {
  background: url('../images/icon_pembayaran/ic_jp_edc_shopeepay.png') no-repeat;
  background-size: contain;
}

.b_edc_astrapay {
  background: url('../images/icon_pembayaran/ic_jp_edc_astrapay.png') no-repeat;
  background-size: contain;
}

.b_edc_linkaja {
  background: url('../images/icon_pembayaran/ic_jp_edc_linkaja.png') no-repeat;
  background-size: contain;
}

.b_edc_mandiri {
  background: url('../images/icon_pembayaran/ic_jp_edc_mandiri.png') no-repeat;
  background-size: contain;
}

.b_edc_bca {
  background: url('../images/icon_pembayaran/ic_jp_edc_bca.png') no-repeat;
  background-size: contain;
}

.b_edc_bni {
  background: url('../images/icon_pembayaran/ic_jp_edc_bni.png') no-repeat;
  background-size: contain;
}

.b_edc_btn {
  background: url('../images/icon_pembayaran/ic_jp_edc_btn.png') no-repeat;
  background-size: contain;
}

.b_edc_bri {
  background: url('../images/icon_pembayaran/ic_jp_edc_bri.png') no-repeat;
  background-size: contain;
}

.b_edc_debit {
  background: url('../images/icon_pembayaran/ic_jp_edc.png') no-repeat;
}

.b_edc_debit_beda_bank {
  background: url('../images/icon_pembayaran/ic_jp_edc.png') no-repeat;
}

.b_edc_kredit {
  background: url('../images/icon_pembayaran/ic_jp_edc.png') no-repeat;
}

.b_sopir {
  background: url('../images/icon_pembayaran/ic_jp_sopir.png') no-repeat;
}

.b_member {
  background: url('../images/icon_pembayaran/ic_jp_member.png') no-repeat;
}

.b_merchant {
  background: url('../images/icon_pembayaran/ic_jp_merchant.png') no-repeat;
}

.b_invoice {
  background: url('../images/icon_pembayaran/ic_jp_invoice.png') no-repeat;
}

.b_traveloka {
  background: url('../images/icon_pembayaran/ic_jp_traveloka.png') no-repeat;
}

.b_redbus {
  background: url('../images/icon_pembayaran/ic_jp_redbus.png') no-repeat;
}

.b_daytrans {
  background: url('../images/icon_pembayaran/ic_daytrans.png') no-repeat;
}

.b_sejalan {
  background: url('../images/icon_pembayaran/ic_jp_sejalan.png') no-repeat;
}

.b_ponta {
  background: url('../images/icon_pembayaran/ic_jp_ponta.png') no-repeat;
}

.b_transfer {
  background: url('../images/icon_pembayaran/ic_jp_transfer.png') no-repeat;
}

.b_agen {
  background: url('../images/icon_pembayaran/ic_jp_agen.png') no-repeat;
}

.b_voucher {
  background: url('../images/icon_pembayaran/ic_jp_voucher.png') no-repeat;
}

.b_bb {
  background: url('../images/icon_pembayaran/ic_jp_invoice.png') no-repeat;
}

.wrappertabledata {
  overflow: auto;
  overflow-y: hidden;
  width: 100%;
  height: calc(100vh - 50px);
}

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

.wrapperheader {
  width: 100%;
  font-size: 0px;
  box-shadow: 0px 3px 5px #3f3f3f;
  position: relative;
  height:auto;
  display: block;
  min-height: 50px;
}

.headertittle {
  font-family: "trebuchet ms";
  font-size: 20px;
  text-align: left;
  margin-top: 15px;
  margin-left: 10px;
  float: left;
  text-transform: uppercase;
  padding-left: 10px;
}

.headerfilter {
  height: 30px;
  color: white;
  font-family: "trebuchet ms";
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 8px;
  margin-right: 5px;
  float: right;
}

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.tabletitle {
  font-size: 14px;
  text-transform: uppercase;
}

div#wrapperoverallheader {
  width: 100%;
  height: 60px;
  box-shadow: 0px 3px 5px #3f3f3f;
}

div#wrapperoverallsubheader {
  width: 100%;
  height: 45px;
}

span#overallheaderlogo {
  display: inline-block;
  float: left;
  width: 300px;
  height: 60px;
}

span#overallheaderlogo > img {
  width: 286px;
}

span#overallheadermid {
  display: inline-block;
  font-family: arial;
  font-size: 24px;
  text-align: center;
  padding-top: 20px;
}

span#overallheaderleft {
  width:84%;
  display: inline-block;
  float: left;
  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%;
  height: 60px;
  text-align: center;
}

span#overallheaderusername {
  display: inline-block;
  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;
  font-weight: bold;
  font-size: 14px;
  font-family: "trebuchet ms";
}

div#wrapperoverallmenu {
  display: inline-block;
  width: 100%;
  height: 60px;
  font-size: 0px;
}

span#footerribbon {
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: inline-block;
  width: 100%;
  height: 25px;
  padding-top: 5px;
  z-index: 1111;
  text-align:center;
}

span#footermarquee {
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: inline-block;
  width: 100%;
  height: 25px;
  padding-top: 5px;
  padding-bottom: 30px;
  z-index: 1111;
  background: yellow;
  font-size: 13px;
  color: black;
}

span.bcrumparrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  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;
}

span.pagepaging {
  display: inline-block;
  border-radius: 3px 3px 3px 3px;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
}

span.popuptitle {
  position: relative;
  top: -35px;
  left: -5px;
  color: white;
  text-transform: uppercase;
  font-family: 'trebuchet ms';
  font-size: 20px;
}

span.popupclosebutton {
  float: right;
  display: inline-block;
  height: 20px;
  width: 20px;
  position: relative;
  top: -40px;
  right: -10px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'trebuchet ms';
  font-size: 20px;
  padding-left: 7px;
  padding-top: 5px;
  cursor: pointer;
  border-radius: 3px 3px 3px 3px;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s;
}

span.popupclosebutton:hover {
  background: skyblue;
}

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

span.flatbutton:hover {
}

input.flatbutton {
  display: inline-block;
  width: 150px;
  height: 35px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 14px;
  padding-top: 2px;
  cursor: pointer;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s;
  border-radius: 3px 3px 3px 3px;
}

input.flatbutton:hover {
}

span.popuplabel {
  display: inline-block;
  padding-top: 1px;
  vertical-align: top;
  padding-right: 1%;
  text-align: right;
  color: #619396;
  width: 49%;
}

span.popupinput {
  display: inline-block;
  padding-top: 1px;
  vertical-align: middle;
  padding-left: 1%;
  text-align: left;
  width: 49%;
}

.wrapperpopup {
  overflow: auto;
  overflow-x: auto;
}

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

.resvcargolistawb {
  color: blue;
  font-size: 14px;
  font-weight: bold;
  margin-left: 30px;
}

.resvcargolisttitle {
  color: green;
  font-size: 14px;
  font-weight: bold;
  margin-left: 30px;
}

.resvcargolistrute {
  color: blue;
  font-size: 14px;
  font-weight: bold;
  margin-left: 30px;
}

.resvcargolistdata {
  color: green;
  font-size: 12px;
  text-transform: uppercase;
  margin-left: 60px;
}

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

.resvcargolistservicereg {
  color: blue;
}

.resvcargolistserviceurg {
  color: red;
}

#resvpaketcontainerbarang {
  overflow: auto;
  overflow-x: hidden;
  height: 587px;
  background: white;
  padding-bottom: 10px;
}

.resibody {
  margin: 0px;
  padding: 0px;
  color: black;
  font-family: "Courier New", monospace;
}

.resilabel {
  display: inline-block;
  width: 47%;
  padding-top: 1px;
  vertical-align: top;
  text-align: right;
  font-size: 16px;
}

.residatafield {
  display: inline-block;
  width: 49%;
  padding-top: 1px;
  vertical-align: middle;
  text-align: left;
  font-size: 16px;
}

span#resvmutasimodeon {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
  background: yellow;
  padding-top: 5px;
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 11;
  box-shadow: 3px 3px 5px grey;
}

span#resvunseatmodeon {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
  background: yellow;
  padding-top: 5px;
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 11;
  box-shadow: 3px 3px 5px grey;
}

.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);
  padding-bottom: 10px;
  box-shadow: 3px 3px 5px grey;
  text-align: center;
}

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

#loginbody {
  font-family: "Open Sans", sans-serif;
  height: 100vh;
  background: url("../images/login/bg.jpg") no-repeat center center;
  background-size: cover;
  padding: 0 !important;
}

#loginwrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(131, 152, 200, 0.3);
}

.loginform {
  border-radius: 2px 2px 2px 2px;
  padding: 10px 20px 20px 20px;
  width: 90%;
  height: 420px;
  max-width: 320px;
  background: #ffffff;
  position: relative;
  /*padding-bottom: 80px;*/
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}

.loginform input[type="text"], .loginform input[type="password"] {
  font-family: "trebuchet ms";
  font-size: 14px;
  display: block;
  padding: 15px 10px;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 2px;
  color: #000;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s;
}

.loginform input[type="text"]:hover, .loginform input[type="password"]:hover {
  background: #eee;
}

.loginform input[type="text"]:focus, .loginform input[type="password"]:focus {
  background: white;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid #ddd;
}

.logintitle {
  color: #696969;
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 30px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

#loginbutton {
  background: #619396;
  width: 100%;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 14px;
  color: white;
  cursor: pointer;
  height: 50px;
  border: 0px;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s;
}

#loginbutton:hover {
  background: #619396;
}

/*================= 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;
}

.popupbodycontainer {
  width: 700px;
  height: 400px;
  background: white;
  border-radius: 5px 5px 5px 5px;
}

span.listlabel{
  color: white;
  display: block;
  border-radius: 5px 5px 5px 5px;
  margin: 2px 5px 2px 5px;
  padding: 2px 2px 2px 2px;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0,0,0,.44);
}

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

.pesanerror {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
  background: yellow;
  padding-top: 5px;
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 11;
  box-shadow: 3px 3px 5px grey;
}

.resvsectioncardwhite {
  background: white;
  vertical-align: top;
  box-shadow: 3px 3px 5px grey;
  width: 100%;
  margin-bottom: 10px;
  /*border: 1px solid #838281;*/
}

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

/* Tail Select Customize */
.tail-select-asmat{
  max-height: 18px;
}

.disabled
{
  background:#efefef;
}

.disabled:hover
{
  background:#efefef;
}

.filter-container
{
  float:left;
  margin-right: 10px;
}

.rute-container{
  width: 247px;
  overflow: auto;
  max-height: 200px;
  background: #eae7e7;
  min-height: 100px;
  margin: 5px 0;
}

.ruteconnecting-container{
  width: 247px;
  overflow: auto;
  max-height: 200px;
  background: #eae7e7;
  min-height: 100px;
  margin: 5px 0;
}

.rute-item-con{
  display: inline-block;
  width: 5px;
}

.rute-container .select-handle{
  display: table;
}

.ruteconnecting-container .select-handle{
  display: table;
}


.select-handle-group
{
  font-size: 10px;
}

.layanan-container{
  width: 247px;
  overflow: auto;
  max-height: 100px;
  background: #eae7e7;
  min-height: 50px;
  margin: 5px 0;
}

.listoutletregion-container{
  width: 247px;
  overflow: auto;
  max-height: 100px;
  background: #eae7e7;
  min-height: 50px;
  margin: 5px 0;
  background: #eae7e7;
}


.tailselect-container{
  width: 165px;
  overflow: auto;
  background: #eae7e7;
  min-height: 80px;
  max-height: 80px;
  margin: 5px 0;
}

.ic_copy{
	background: url('../images/ic_copy.svg') no-repeat;
	display: inline-block;
	width: 10px;
	height: 10px;
	cursor: pointer;
  margin-left: 10px;
}

#btn_refresh
{
  border:1px solid yellowgreen;
  background:yellowgreen;
  box-shadow:0px 0px 2px black;
  border-radius: 5px;
}

#btn_refresh:hover
{
  background:#baec56;
  border:1px solid #baec56;
}

.fotocontainer {
  display: inline-block;
  position: relative;
  height: 300px;
  width: 200px;
  border: 1px solid lightgrey;
  cursor: pointer;
}

.fotoimage {
  opacity: 1;
  height: 300px;
  width: 200px;
  transition: .5s ease;
  backface-visibility: hidden;
  object-fit: cover;
}

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

.fotocontainer:hover .fotoimage {
  opacity: 0.3;
}

.fotocontainer:hover .fotooverlay {
  opacity: 1;
}

.gpbutton-container
{
  max-width: 1160px;
  width:fit-content;
  height: 100%;
  margin:0px auto;
}

.gpbutton
 {
   background:red;
   width:250px;
   height:30px;
   margin:10px;
   padding:10px;
   font-weight:bold;
   cursor:pointer;
   float:left;
 }

.ic_col_2,
.ic_col_2_hr,
.ic_col_3,
.ic_col_4
{
  display: inline-block;
  width: 21px;
  height: 21px;
  cursor: pointer;
}

.ic_col_2 {
  background: url('../images/layout-2-columns.svg') no-repeat;
  background-size: cover;
}

.ic_col_2_hr {
  background: url('../images/layout-2-columns-hr.svg') no-repeat;
  background-size: cover;
}

.ic_col_3 {
  background: url('../images/layout-3-columns.svg') no-repeat;
  background-size: cover;
}

.ic_col_4 {
  background: url('../images/layout-4-columns.svg') no-repeat;
  background-size: cover;
}

.ic_col_2.selected {
  background: url('../images/layout-2-columns.png') no-repeat;
  background-size: cover;
}

.ic_col_2_hr.selected {
  background: url('../images/layout-2-columns-hr.png') no-repeat;
  background-size: cover;
}

.ic_col_3.selected  {
  background: url('../images/layout-3-columns.png') no-repeat;
  background-size: cover;
}

.ic_col_4.selected  {
  background: url('../images/layout-4-columns.png') no-repeat;
  background-size: cover;
}

/*TOGGLE SUMMARY*/

span.wrappercardsummary {
  display: inline-block;
  text-align: center;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #838281;
  cursor: pointer;
}

span.headercardsummary {
  display: inline-block;
  background:#838281;
  width: 100%;
  height: 20px;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 5px;
}

span.subheadercardsummary {
  display: inline-block;
  background: #fff714;
  width: 100%;
  height: 30px;
  color: orangered;
  text-transform: uppercase;
  font-size: 32px;
  padding-top: 10px;
}

span.containerdatasummary {
  overflow: hidden;
  width: 100%;
  max-height: 1000px;
  display: inline-block;
  transition: max-height 1s;
}

span.containerdatasummary.hide {
  max-height: 0px;
  transition: max-height 0.3s;
}

span.rowdatasummary {
  display: inline-block;
  width: 100%;
  height: 20px;
  border-bottom: 1px solid #f0f0f0;
}

span.labelsummary {
  float: left;
  width: 49%;
  color: orange;
  text-align: right;
}

span.fielddatasummary {
  float: right;
  width: 49%;
  color: grey;
  text-align: left;
}

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

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

.multi-container{
  width: 247px;
  overflow: auto;
  max-height: 100px;
  background: #eae7e7;
  min-height: 50px;
  margin: 5px 0;
}

.btndanger
{
  font-family: "trebuchet ms";
  font-weight: normal;
  font-size:12px;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 2px 2px 2px 2px;
  padding:5px;
  cursor: pointer;
  color: white;
  background: red;
  margin: 3px;
  border-radius:3px;
}

.btndanger:hover
{
  background:darkred;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}