/* 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 : whitesmoke;
	/*border : 5px solid #da251d;*/
	/*-moz-border-radius : 5px;*/
	/*border-radius: 10px 10px 10px 10px;*/
	padding : 10px;
	border-radius: 3px 3px 3px 3px;
}
code {
	color: #993300;
	font-family: "Lucida Sans Unicode", verdana, helvetica, sans-serif;
}
a {
	color:#10584A;
	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: #F4684D;

}

/*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;
  color: white;
  background: #10584A;
  -webkit-transition: background 0.7s;
  transition: background 0.7s;
}

a.crud:hover{
  background: #F4684D;
}

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.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: #0F6788;
	background: #efefef;
	-webkit-transition: background 0.7s;
	transition: background 0.7s;
}

a.btnheadercari:hover {
	background: yellow;
}

a img { border: 0; }
table
{
	/* margin:5px 0px 15px 15px; */
}
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;
}*/

input, textarea{
	font-size: 12px;
	background: #fff;
	border-top: 1px solid #D0D0D0;
	font-family: "Courier New", Courier, mono;
	border-right: 1px solid #D0D0D0;
	border-bottom: 1px solid #D0D0D0;
	border-left: 1px solid #D0D0D0;
	color: #404040;
}

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

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 #AAA;
  color: #555;
  font-size: inherit;
  overflow: hidden;
  padding-right: 20px;
  /*text-overflow:ellipsis;*/
  white-space: nowrap;
  width: 150px;
}

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:hover, textarea:hover {
	background: #fdff7e;
}


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

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

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

td{
  /* margin: 20px; */
  /* padding: 2px 10px 2px 10px; */
  font-size: 12px;
  white-space: nowrap;
}

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

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

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

tr.red:hover
{
	background: #FFFF00;
	color:#000000;
}

tr.banner
{
	background: #10584A;
}

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

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

tr.red: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;
}

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

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

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

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

th.thin
{
  text-align: center;
  font-size: 12px;
  color: #505050;
  /* padding: 2px 10px 2px 10px; */
  background: url('./images/kolom_background_thin.png');
	background-repeat: repeat-x;
	background-position:center center;
	background-color: #ffffff;
	height:15px;
}

.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:#10584A;
	height: 35px;
	vertical-align: middle;
	padding-top: 5px;
}

.bannernormal
{
  font-size: 12px;
	color:#fff;
	background-color:#10584A;
}

.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:#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.renderlayoutkosong{
  background: #0066FF;
  width: 75px;
  height: 80px;
  cursor: pointer;
}

div.renderlayoutkosong:hover{
  background: #3388ff;
}

div.renderlayoutkursi{
  width: 75px;
  height: 80px;
  background: #0066FF url("./images/kursi_kosong.gif") no-repeat center center;
  background-size: 50px 70px;
  cursor: pointer;
}

div.renderlayoutsopir{
  width: 75px;
  height: 80px;
  background: #0066FF url("./images/icon_sopir.png") no-repeat center center;
  cursor: pointer;
}

div.renderkursinone{
	width: 80px;
	height: 110px;
}

div.renderlabelkursinone{
	display: none;
}

div.renderkursisopir{
	width: 80px;
	height: 110px;
	background: url("./images/icon_sopir.png") no-repeat center center;
	cursor: pointer;
	text-align: center;
}

div.renderlabelkursisopir{
	padding-top: 90px;
	font-family: "trebuchet ms";
	font-size: 14px;
	color: grey;
	font-weight: bold;
}

div.renderkursikosong{
	background: url("./images/kursi_kosong.gif") no-repeat center center;
	width:80px;
	height:110px;
	text-align:center;
	font-size: 0px;
	cursor: pointer;
}

div.renderkursikosong.selected{
	background: #2fd566 url("./images/kursi_kosong.gif") no-repeat center center;
	border-radius: 10%;
}

div.renderlabelkursikosong{
	padding-top: 25px;
	font-family: "trebuchet ms";
	font-size: 26px;
	color: green;
	font-weight: bold;
}

div.renderkursikosong.block{
	background: yellow url("./images/kursi_kosong.gif") no-repeat center center;
}

div.renderlabelkursikosong.block{
	float: right;
	padding-top: 5px;
	font-size: 20px;
}

div.renderkursibook{
	background: url("./images/kursi_pesan.gif") no-repeat center center;
	width:80px;
	height:110px;
	text-align:center;
	font-size: 0px;
	cursor: pointer;
}

div.renderkursibook.selected{
	background: #21929c url("./images/kursi_pesan.gif") no-repeat center center;
	border-radius: 10%;
}

div.renderlabelkursibook{
	float: right;
	padding-top: 5px;
	font-family: "trebuchet ms";
	font-size: 20px;
	color: #4593eb;
	font-weight: bold;
}

div.renderlabelkursibook.selected{
	color: white;
}

div.renderkursibooktransit{
	background: url("./images/kursi_pesan1.gif") no-repeat center center;
	width:80px;
	height:110px;
	text-align:center;
	font-size: 0px;
	cursor: pointer;
}

div.renderkursibooktransit.selected{
	background: #21929c url("./images/kursi_pesan1.gif") no-repeat center center;
	border-radius: 10%;
}

div.renderlabelkursibooktransit{
	float: right;
	padding-top: 5px;
	font-family: "trebuchet ms";
	font-size: 20px;
	color: #60be45;
	font-weight: bold;
}

div.renderlabelkursibooktransit.selected{
	color: white;
}

div.renderkursimulti{
	background: url("./images/kursi_jamak.gif") no-repeat center center;
	width:80px;
	height:110px;
	text-align:center;
	font-size: 0px;
	cursor: pointer;
}

div.renderkursimulti.selected{
	background: #21929c url("./images/kursi_jamak.gif") no-repeat center center;
	border-radius: 10%;
}

div.renderlabelkursimulti{
	float: right;
	padding-top: 5px;
	font-family: "trebuchet ms";
	font-size: 20px;
	color: purple;
	font-weight: bold;
}

div.renderlabelkursimulti.selected{
	color: white;
}

div.renderkursikonfirm{
	background: url("./images/kursi_konfirm.gif") no-repeat center center;
	width:80px;
	height:110px;
	text-align:center;
	font-size: 0px;
	cursor: pointer;
}

div.renderkursikonfirm.selected{
	background: #21929c url("./images/kursi_konfirm.gif") no-repeat center center;
	border-radius: 10%;
}

div.renderkursikonfirmtransit{
	background: url("./images/kursi_konfirm1.gif") no-repeat center center;
	width:80px;
	height:110px;
	text-align:center;
	font-size: 0px;
	cursor: pointer;
}

div.renderkursikonfirmtransit.selected{
	background: #21929c url("./images/kursi_konfirm1.gif") no-repeat center center;
	border-radius: 10%;
}

div.renderlabelkursikonfirm{
	float: right;
	padding-top: 5px;
	font-family: "trebuchet ms";
	font-size: 20px;
	color: #f66262;
	font-weight: bold;
}

div.renderlabelkursikonfirm.selected{
	color: white;
}

div.renderlabelkursikonfirmtransit{
	float: right;
	padding-top: 5px;
	font-family: "trebuchet ms";
	font-size: 20px;
	color: #f1ac3e;
	font-weight: bold;
}

div.renderlabelkursikonfirmtransit.selected{
	color: white;
}

div.rendernamakursi{
	width:80px;
	top:40px;
	font-family: "trebuchet ms";
	font-size: 12px;
	background: yellow;
	color: black;
	font-weight: bold;
	white-space:normal;
	text-align: center;
	border: 1px solid grey;
}

div.rendernamakursi.block{
	background: red;
	color: white;
	border: none;
}

div.renderkursibayartransfer{
	float: right;
	background: url("./images/icon_pembayaran/ic_jp_transfer.png") no-repeat bottom center;
	background-size: 30px 30px;
	width:30px;
	height: 50px;
	font-size: 0px;
}

div.renderkursiiscetak{
	float: left;
	background: url("./images/icon_pembayaran/ic_jp_voucher.png") no-repeat bottom center;
	background-size: 30px 30px;
	width:30px;
	height: 50px;
	font-size: 0px;
}

.kursi_sopir{
	background-color:#ffffff;
	background-image: url('./images/icon_sopir.png');
	background-repeat: no-repeat;
	background-position:center center;
	height:110px;
	/*font*/
	font-family:verdana;
	font-size:2em;
	color:#ffffff;
	font-weight: bold;
	text-align:center;
	vertical-align:bottom;

}

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

.notifikasi_pengumuman{

	background-image: url('./images/icon_amplop.png');
	background-repeat: no-repeat;
	background-position:top center;
	text-align:center;
	vertical-align:bottom;
}

#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;
	background:#a0a0a0;
	color:#fff;
  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{
  background:#bf3528;
}

span.top_menu_on_select{
  display: inline-block;
	background:#bf3528;
	color:#ffffff;
	font-family: "trebuchet ms";
	font-size:16px;
	text-align:center;
	vertical-align:middle;
	vertical-align:middle;
	height:37px;
	cursor:pointer;
  padding-top: 20px;
  padding-right: 5px;
  padding-left: 5px;
  width: 110px;
  border-bottom: 3px #1b5c4f solid;
}

.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: #de563b;;
	color: white;
	font-size: 12px;
	text-align: center;
}

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

td.generaltotaldata{
	font-size: 10px;
	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;
  padding-bottom: 70px;
}

div.menuicon{
	width: 200px;
  height: 100px;
  padding-top: 30px;
	text-align: center;
  -webkit-transition: background 1s, width 1s, font-size 1s;
  transition: background 1s,width 1s,font-size 1s;
}

div.menuicon:hover{
  font-size: 20px;
}

a.menu{
  font-family: "calibri";
  font-weight: normal;
  font-size: 18px;
  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: #10584A;
  -webkit-transition: background 1s, width 1s, font-size 1s;
  transition: background 1s,width 1s,font-size 1s;
}

div.menubaricon:hover{
  background:  #ff9900;
  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_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_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_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_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;
}

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

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

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

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

.b_tunai{
  background: url('./images/icon_pembayaran/ic_jp_tunai.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
  cursor: pointer;
}

.b_indomaret{
  background: url('./images/icon_pembayaran/ic_jp_indomaret.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
  cursor: pointer;
}

.b_edc{
  background: url('./images/icon_pembayaran/ic_jp_edc.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
  cursor: pointer;
}

.b_ovo{
	background: url('./images/icon_pembayaran/ic_jp_edc_ovo.png') no-repeat;
	display: inline-block;
	width: 80px;
	padding-top: 80px;
	text-transform: uppercase;
	font-family: "trebuchet ms";
	font-size: 13px;
	color: #505050;
	font-weight: bold;
	cursor: pointer;
}

.b_karyawan{
	background: url('./images/icon_pembayaran/ic_jp_member.png') no-repeat;
	display: inline-block;
	width: 80px;
	padding-top: 80px;
	text-transform: uppercase;
	font-family: "trebuchet ms";
	font-size: 13px;
	color: #505050;
	font-weight: bold;
	cursor: pointer;
}

.b_traveloka {
	background: url('./images/icon_pembayaran/ic_jp_traveloka.png') no-repeat;
	display: inline-block;
	width: 80px;
	padding-top: 80px;
	text-transform: uppercase;
	font-family: "trebuchet ms";
	font-size: 13px;
	color: #505050;
	font-weight: bold;
	cursor: pointer;
}

.b_memberpaket{
	background: url('./images/icon_pembayaran/ic_jp_mmbr-pkt.png') no-repeat;
	display: inline-block;
	width: 80px;
	padding-top: 80px;
	text-transform: uppercase;
	font-family: "trebuchet ms";
	font-size: 13px;
	color: #505050;
	font-weight: bold;
	cursor: pointer;
	margin-right: -27px;
}

.b_member{
  background: url('./images/icon_pembayaran/ic_jp_member.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
}

.b_ponta{
  background: url('./images/icon_pembayaran/ic_jp_ponta.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
}

.b_transfer{
  background: url('./images/icon_pembayaran/ic_jp_transfer.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
}

.b_voucher{
  background: url('./images/icon_pembayaran/ic_jp_voucher.png') no-repeat;
  display: inline-block;
  width: 80px;
  padding-top: 80px;
  text-transform: uppercase;
  font-family: "trebuchet ms";
  font-size: 13px;
  color: #505050;
  font-weight: bold;
}

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

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

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

.wrapperheader{
  width: 100%;
  background: #10584A;
  font-size: 0px;
}

.headertittle{
  color: white;
  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;
}

table.flat{
  border-spacing: 1px;
}

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%;
  background-color: #de563b;
  height: 60px;
}

span#overallheaderlogo{
  display: inline-block;
  float: left;
  background: url('./images/logo_header.png') left center no-repeat #de563b;
  width:300px;
  height:100%;
}

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

span#overallheaderright{
  display: inline-block;
  float: right;
  width: 35%;
  background: url('./images/header_separator.gif') left center no-repeat #1b5c4f;
  height:60px;
  text-align: right;
}

span#overallheaderusername{
  display: inline-block;
  color:#ffffff;
  font-size: 16px;
  text-align: right;
  padding-right: 10px;
  padding-top: 20px;
}

div#overallheadershadow{
  background: url('./images/shadow.gif') repeat-x;
  height: 11px;
}

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: "trebuchet ms";
}

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

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

span.bcrumparrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #F4684D;
  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;
  color: white;
  background: #10584A;
}

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;
  background: #10584A;
  height: 20px;
  width: 20px;
  position: relative ;
  top:-40px;
  right: -10px;
  color:white;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'trebuchet ms';
  font-size: 20px;
  padding-left: 7px;
  padding-top: 5px;
  cursor: pointer;
}

span.flatbutton {
	display: inline-block;
	background: #10584A;
	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: #F4684D;
}

span.popuplabel{
  display: inline-block;
  padding-top: 1px;
  vertical-align: top;
  padding-right: 1%;
  text-align: right;
  color: black;
  font-weight: bold;
  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;
}

#wrapperpengumuman {
	float: right;
	padding-right: 40px;
	display: inline-block;
	cursor: pointer;
	font-size: 12px;
	color: #5454bf;
}

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

.resvsection{
  display:inline-block;
  vertical-align: top;
}

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

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

.resvsectioncardlistpaket:hover,.resvsectioncardlistkursi:hover{
  background: #fdff7e;
}

.resvsectiontitle{
  font-size:14px;
  text-align:center;
  font-family: "trebuchet ms";
  background-color: #838281;
  color:#ffffff;
  text-transform: uppercase;
  display: inline-block;
  width: 100%;
  padding-top: 1px;
  padding-bottom: 1px;
}

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

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

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

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

span.resvnotif{
  position: fixed;
  top: 0px;
  left: 0px;
  width:100%;
  height: 25px;
  background: #ffee00;
  padding-top: 5px;
  color: black;
  cursor: pointer;
}

span.resvnotif:hover{
  background:  yellow;
}

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

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

div.resvlistpilihansel{
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
  cursor: pointer;
  font-family: "trebuchet ms";
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 2px;
  margin-right: 1px;
  margin-left: 1px;
  width:100%;
  border-bottom: 1px solid #cccccc;
  background: #10584A;;
  color: white;
}

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

div.resvsectioncontent{
  position: relative;
}

div.resvsectionoverlayload{
  position:absolute;
  height: 100%;
  width:100%;
  z-index: 10;
  top:0;left:0;
  right:0;
  background: rgba(125, 125, 125, .9) url('./images/loading2.gif') no-repeat center center;
}
div.resvsectionoverlayloadkursi{
  position:absolute;
  height: 100%;
  width:100%;
  z-index: 10;
  top:0;left:0;
  right:0;
}

div.resvsectionoverlay{
  position:absolute;
  height: 100%;
  width:100%;
  z-index: 10;
  top:0;left:0;
  right:0;
  background: rgba(255, 255, 255, .8);
  text-align: center;
  vertical-align: middle;
}

.resvisidatalabel{
  display: inline-block;
  width: 49%;
  padding-top: 1px;
  vertical-align: top;
  text-align: right;
  color: black;
}

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

.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,#resvpaketcontainerkursi{
  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: 49%;
  padding-top: 0px;
  vertical-align: top;
  text-align: right;
  font-size: 18px;
}

.residatafield{
  display: inline-block;
  width: 45%;
  padding-top: 0px;
  vertical-align: middle;
  text-align: left;
  font-size: 18px;
}

.resilabelpaket{
	display: inline-block;
	width: 41%;
	padding-top: 0px;
	vertical-align: top;
	text-align: left;
	font-size: 10px;
}

.residatafieldpaket{
	display: inline-block;
	width: 57%;
	padding-top: 0px;
	vertical-align: middle;
	text-align: left;
	font-size: 10px;
}

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

.combolistselection{
  display: inline-block;
  background: white 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.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;
  width: 150px;
  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%;
}

.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: #10584A;
  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: #4E998A;
}

.btnroundsave{
	border: 3px solid #777777;
	border-radius: 50%;
	display: inline-block;
	background: url("./images/btn_sqr_save.png") no-repeat center center;
	height: 60px;
	width: 60px;
	cursor: pointer;
}

.btnroundsave:hover{
	border: 3px solid #10584A;
}

.btnroundprint{
	border: 3px solid #777777;
	border-radius: 50%;
	display: inline-block;
	background: url("./images/btn_sqr_print.png") no-repeat center center;
	height: 60px;
	width: 60px;
	cursor: pointer;
}

.btnroundprint:hover{
	border: 3px solid #10584A;
}

.btnroundcancel{
	border: 3px solid #10584A;
	border-radius: 50%;
	display: inline-block;
	background: url("./images/btn_sqr_cancel.png") no-repeat center center;
	height: 60px;
	width: 60px;
	cursor: pointer;
}

.btnroundcancel:hover{
	border: 3px solid dark;
}

.btnroundmutasi{
	border: 3px solid #777777;
	border-radius: 50%;
	display: inline-block;
	background: url("./images/btn_sqr_mutasi.png") no-repeat center center;
	height: 60px;
	width: 60px;
	cursor: pointer;
}

.btnroundmutasi:hover{
	border: 3px solid #10584A;
}

.btnroundjpgoshow{
	display: inline-block;
	background: url("./images/icon_pembayaran/ic_jp_tunai.png") no-repeat center center;
	background-size: 70px 70px;
	height: 76px;
	width: 76px;
	cursor: pointer;
}

.btnroundjpgoshow.selected{
	background: url("./images/icon_pembayaran/ic_jp_tunai.png") no-repeat center center yellow;
	background-size: 70px 70px;
	border: 3px solid #10584A;
	height: 70px;
	width: 70px;
	border-radius: 15%;
}

.btnroundjptransfer{
	display: inline-block;
	background: url("./images/icon_pembayaran/ic_jp_transfer.png") no-repeat center center;
	background-size: 70px 70px;
	height: 76px;
	width: 76px;
	cursor: pointer;
}

.btnroundjptransfer.selected{
	background: url("./images/icon_pembayaran/ic_jp_transfer.png") no-repeat center center yellow;
	background-size: 70px 70px;
	border: 3px solid #10584A;
	height: 70px;
	width: 70px;
	border-radius: 15%;
}

.btnroundrefund{
	border: 3px solid #777777;
	border-radius: 50%;
	display: inline-block;
	background: url("./images/btn_sqr_refund.png") no-repeat center center;
	height: 60px;
	width: 60px;
	cursor: pointer;
}

.btnroundrefund:hover{
	border: 3px solid red;
}

.btnroundrefundall{
	border: 3px solid #777777;
	border-radius: 50%;
	display: inline-block;
	background: url("./images/btn_sqr_refund_all.png") no-repeat center center;
	height: 60px;
	width: 60px;
	cursor: pointer;
}

.btnroundrefundall:hover{
	border: 3px solid red;
}

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

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

.softblue
{
/*text-align: center;*/
font-size: 12px;
background: #10584A;
color:#FFFFFF;
}

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

.select-css {
  display: block;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 700;
  color: #444;
  line-height: 1.3;
  padding: .6em 1.4em .5em .8em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
  border-radius: .5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
  linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}


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