@font-face {
  font-family: 'helvetica-regular';
  src: url('../fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
       url('../fonts/HelveticaNeue.woff') format('woff'),
       url('../fonts/HelveticaNeue.ttf')  format('truetype'),
       url('../fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'helvetica-regular';
  src: url('../fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/HelveticaNeue-Bold.woff') format('woff'),
       url('../fonts/HelveticaNeue-Bold.ttf')  format('truetype'),
       url('../fonts/HelveticaNeue-Bold.svg#HelveticaNeue') format('svg');
  font-weight: bold;
  font-style: normal;
}

html, body {
	background: #efefef;
	background-color: #efefef;
	color: #666667;
	font-family: 'helvetica-regular',arial,sans-serif;
}
#content {
	background: #FFFFFF;
	background-color: #FFFFFF;
	overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
#content .content_header {
	overflow: auto;
    margin-top: 0;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 35px;
    padding-bottom: 15px;
    border-bottom: 3px solid #d8d8d8;
}
#content .content_header .cuan-pg-title {
	float: left;
}
#content .content_header .cuan-pg-title span.purchase {
	width: 50px;
	height: 50px;
	background: url(../images/blue-icon-purchase.png);
	background-repeat: no-repeat;
	margin-top: -10px;
	margin-right: 10px;
	display: inline-block;
}
#content .content_header .cuan-pg-title h1 {
    color: #4f4f4f;
    padding-top: 0;
    display: inline-block;
    font-weight: normal;
}
#content .content_header .history {
	float:right;
	padding-top: 0;
	margin-top: 0;
}
#content .content_header .history a {
	font-weight: normal;
	color: #666667;
	display: inline-block;
	margin-top: 5px;
}
#content_top {
	background: #FFFFFF;
	background-color: #FFFFFF;
	margin-top: 0;
	padding-top: 10px;
}
#content_rep {
	background: #FFFFFF;
	background-color: #FFFFFF;
}
#content_bot {
	background: #FFFFFF;
	background-color: #FFFFFF;
}
#content_sub form #wrp-bank2 .inline {
	margin-right: 10px;
}
div.step-purchase {
	height: 41px;
	width: 41px;
	background: url(../images/new_split_grey_circle.png);
	background-repeat: no-repeat;
}
div.step-purchase span {
	top: 13px;
    left: 17px;
	position: relative;
}
div.step-purchase.active {
	background: url(../images/new_split_blue_circle.png);
	background-repeat: no-repeat;
}
.text-step {
	font-weight: bold;
    color: #666667;
}
.box-label {
	position: relative;
	border-bottom: 2px solid #88c2d2 !important;
	width: 100% !important;
}
.box-label .but-drop-down {
	height: 20px;
	width: 20px;
	background: url(../images/new_drop_down.png);
	background-repeat: no-repeat;
	border-left:0;
	border-top:0;
	border-right:0;
	margin: 0;
    right: 0px;
    bottom: 5px;
    position: absolute;
}
#content_sub #wrp-step-purchase {
	border-bottom: 1px solid #DEDEDE;
}
#content_sub form #wrp-bank2 {
	margin-right: 0;
	margin-left: 0;
	margin-top: 30px;
	margin-bottom: 30px;
	height: auto
}

#wrp-bank2 .atvisa .imagelogo, .visa .imagelogo {
	background: url(../images/split_visa_mastercard.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 127px;
    height: 38px;
    margin: -27px 0 0 18px;
}
#wrp-bank2 .atmandiri .imagelogo, .mandiri .imagelogo {
	background: url(../images/split_mandiri_click.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 92px;
    height: 46px;
    margin: -32px 0 0 18px;
}
#wrp-bank2 .vmandiri .imagelogo {
	background: url(../images/split_mandiri.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 120px;
    height: 46px;
    margin: -30px 0 0 18px;
}
#wrp-bank2 .atfp .imagelogo, .attfp .imagelogo {
	background: url(../images/split_atm_bersama.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 77px;
    height: 52px;
    margin:-34px 0 0 18px;
}
#wrp-bank2 .bcaklik .imagelogo {
	background: url(../images/split_bca_klikpay.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 134px;
    height: 26px;
    margin: -18px 0 0 18px;
}
#wrp-bank2 .indomaret .imagelogo, .indomaret .imagelogo {
	background: url(../images/split_indomaret.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 127px;
    height: 38px;
    margin: -27px 0 0 18px;
}
#wrp-bank2 .alfa .imagelogo, .alfa .imagelogo {
	background: url(../images/split_alfa.png);
	background-repeat: no-repeat;
	background-position: left;
	width: 127px;
    height: 38px;
    margin: -27px 0 0 18px;
}
#content_sub form #error-nominal {
	margin:0;
	color: #666667;
	font-size: 12px;
}
#content_sub .box-wrap {
	width: 100%;
}
#content_sub .box-wrap .result {
	width: 100%;
}
#content_sub .box-wrap.detail-info {
	border-bottom: 2px solid #D4EDF2;
	margin-bottom: 10px;
}
#content_sub .box-wrap .result .each-input-field {
	margin-bottom: 15px;
}
#content_sub form .list-table {
	margin-left: 0;
	margin-top:30px;
}
#purchase_top {
	width: 100%;
	border: none;
	border-radius: 0;
}
#purchase_list_tittle.purchase-bank {
	background-color: #666667;
	font-weight: normal !important;
}
#purchase_list, #purchase_list.purchase-bank {
	background-color: #D4EDF2;
	margin-top: 0;
}
input#inpNominal {
	background: #ffffff;
	border-radius: 3px;
	color: #4f4f4f;
}
input#inpNominal:hover {
	background-color: #ffffff !important;
}
#purchase_list li, #purchase_list.purchase-bank li {
	color: #666667;
	border-right: 1px solid #B0BCC1;
	margin:0;
	padding-top: 10px;
    padding-bottom: 10px;
}
#purchase_list_tittle li, #purchase_list_tittle.purchase-bank li {
	border-right: 1px solid #B0BCC1;
}
.result .each-input-field div.bg-result span {
	background: transparent;
}
.result .each-input-field div.bg-result.cc-address span {
	background: transparent;
}
.result .each-input-field div.bg-result span input {
	border:1px solid #a9a9a9;
	border-radius:3px;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
	text-align: left;
	padding: 10px;
	margin-top:0;
	color: #4f4f4f;
}
.result .each-input-field div.bg-result span textarea {
	border:1px solid #a9a9a9;
	border-radius:3px;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
	text-align: left;
	padding: 10px;
	margin-top:0;
	color: #4f4f4f;
}
.bg-result #captcha {
	background: transparent;
	border:1px solid #a9a9a9;
	border-radius:3px;
	-webkit-border-radius:3px;
	-ms-border-radius:3px;
	text-align: left;
	padding-left: 10px !important;
	width: 145px !important;
}
.wrp-btn-purchase {
	width: 100%;
}
.btnNext {
	background: #359FD9 !important;
	color: #ffffff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
}
.next-purchase, .finish-purchase, .cc-no-change {
	background: #359FD9 !important;
	color: #ffffff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
}
.footer_main {
	display: none;
}
.wrp-btn-purchase.box-label {
	border-bottom: 0 !important;
}
#content_sub h2.line-bot2 {
	border-bottom: 0 !important;
	margin-top: 0;
	font-weight: bold;
	font-size: 16px !important;
	color: #666667;
}
.box-label.konfirmasi p.text-red {
    color: inherit;
    line-height: 23px;
}
.box-label.konfirmasi {
    border-bottom: 0 !important;
}
.result.cc {
	width: 100% !important;
}
.result.cc.how-to-pay span {
	font-weight: bold;
	font-size: 16px !important;
	color: #666667;
}
.result.cc.how-to-pay span h4.line-bot {
	border-bottom: 2px solid #D4EDF2;
    padding-bottom: 5px;
}
.each-input-field {
    margin-bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
.left_contentlist {
	width: 100% !important;
    border-bottom: 2px solid #D4EDF2;
    padding-bottom: 30px;
    border-right: 0;
}
.itemconfiguration {
	width: 100% !important;
	line-height: 21px;
}
.ui-dialog .ui-dialog-titlebar {
	background-color: #359FD9;
	border-radius: 0;
    -webkit-border-radius: 0;
    font-family: 'helvetica-regular',arial,sans-serif;
}
.ui-widget-content {
	border-radius: 0;
	-webkit-border-radius: 0;
	border:0;
	color: inherit;
	background: #FFFFFF
}
#syarat p {
    font-family: 'helvetica-regular',arial,sans-serif;
    font-size: 13px;
    color: #666667;
}
/*.ui-state-default, .ui-widget-content .ui-state-default {
	background-color: #C4C4C2;
    border-radius: 10px;
    -webkit-border-radius:10px;
    background: url(../images/new_close_icon.png);
    background-repeat: no-repeat;
}*/
.ui-dialog > div > button.ui-dialog-titlebar-close > span {
	text-indent: 9999px;
}

/* HISTORY TRANSAKSI */
table.histori thead th {
	background-color: #666667;
}
table.histori thead th:first-child {
	border-top-left-radius:0;
	/*border:medium none;*/
}
table.histori thead th:last-child {
	border-top-right-radius:0;
	border:medium none;
}
table.histori td {
	background-color: #D4EEF2;
	border:0;
}
#frmUtama .spacer {
	border:0;
	margin-bottom: 15px;
    margin-top: 15px;
    overflow-y: auto;
}
#frmUtama input#from, input#to {
	background: transparent;
	border:1px solid #a9a9a9;
	margin-right: 10px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
}
#frmUtama input.show-history {
	background: #359FD9;
    color: #ffffff;
    height: 27px;
    line-height: 27px;
    border-radius:5px;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
    font-size: 12px;
}
#frmUtama h3 {
	margin-bottom:10px;
}
.head-title input.show-history {
	background: #666668;
    color: #ffffff;
    height: 27px;
    line-height: 27px;
    border-radius:5px;
	-webkit-border-radius:5px;
	-ms-border-radius:5px;
    font-size: 12px;
}
.head-title {
    margin-left: 30px;
    margin-right: 30px;
}
.head-title img {
	margin-right: 11px;
    margin-top: 8px;
}
#content .head-title h1 {
	color: #4f4f4f;
	font-weight: normal;
}
.ui-datepicker th {
	background-color: #359FD9 !important;
}

/************ Header Starts Here ************/
#wrapper #header {
    width: 100%;
    height: 110px;
    background-color: #a7a7a7;
    background: #a7a7a7;
}

#header #header_sub{
	width:1060px;
	margin:0 auto;
	padding:8px 0px;
}
#header_sub #logo{
	width:155px;
	height:75px;
	float:left;
}
/************ Navigation Starts Here ************/

#header_sub #nav{
	width:auto;
	float:right;
	margin:12px 5px 0 0;
	}
#header_sub #nav ul{
	margin:0px;
	padding:0px;
	list-style:none;
	}
#header_sub li{
	float:left;
	margin-left:10px;
	width:50px;
	height:52px;
	position:relative;  #tools navigation
	}
#nav a.news{
	background:url(../images/nav_icon.png) left top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.news:hover{
	background:url(../images/nav_icon.png) left -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.news_active{
	background:url(../images/nav_icon.png) left -55px no-repeat;
	}
#nav a.sell{
	background:url(../images/nav_icon.png) -113px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.sell:hover{
	background:url(../images/nav_icon.png) -113px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.sell_active{
	background:url(../images/nav_icon.png) -113px -55px no-repeat;
	}
#nav a.stock{
	background:url(../images/nav_icon.png) -172px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.stock:hover{
	background:url(../images/nav_icon.png) -172px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.stock_active{
	background:url(../images/nav_icon.png) -172px -55px no-repeat;
	}
#nav a.commission{
	background:url(../images/nav_icon.png) -230px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.commission:hover{
	background:url(../images/nav_icon.png) -230px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.commission_active{
	background:url(../images/nav_icon.png) -230px -55px no-repeat;
	}
#nav a.saktipurchase{
	background:url(../images/nav_icon.png) -288px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.saktipurchase:hover{
	background:url(../images/nav_icon.png) -288px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.saktipurchase_active{
	background:url(../images/nav_icon.png) -288px -55px no-repeat;
	}
#nav a.tri_points{
	background:url(../images/nav_icon.png) -347px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.tri_points:hover{
	background:url(../images/nav_icon.png) -347px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.tri_points_active{
	background:url(../images/nav_icon.png) -347px -55px no-repeat;
	}
#nav a.graph{
	background:url(../images/nav_icon.png) -403px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.graph:hover{
	background:url(../images/nav_icon.png) -403px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.graph_active{
	background:url(../images/nav_icon.png) -403px -55px no-repeat;
	}
#nav a.stock_ordered{
	background:url(../images/nav_icon.png) -462px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.stock_ordered:hover{
	background:url(../images/nav_icon.png) -462px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.stock_ordered_active{
	background:url(../images/nav_icon.png) -462px -55px no-repeat;
	}
#nav a.complaint{
	background:url(../images/nav_icon.png) -520px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.complaint:hover{
	background:url(../images/nav_icon.png) -520px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.complaint_active{
	background:url(../images/nav_icon.png) -520px -55px no-repeat;
	}
#nav a.fpi{
	background:url(../images/nav_icon.png) -580px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.fpi:hover{
	background:url(../images/nav_icon.png) -580px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.fpi_active{
	background:url(../images/nav_icon.png) -580px -55px no-repeat;
	}
#nav a.champ_league{
	background:url(../images/nav_icon.png) -639px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.champ_league:hover{
	background:url(../images/nav_icon.png) -639px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.champ_league_active{
	background:url(../images/nav_icon.png) -639px -55px no-repeat;
	}
#nav a.pre_order{
	background:url(../images/pre-order1.png) 0px top no-repeat;
	width:70px;
	height:70px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.pre_order:hover{
	background:url(../images/pre-order2.png) no-repeat;
	width:70px;
	height:70px;
	text-decoration:none;
	}
#nav a.pre_order_active{
	background:url(../images/pre-order2.png) no-repeat;
	}
#nav a.profile{
	background:url(../images/nav_icon.png) -752px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.profile:hover{
	background:url(../images/nav_icon.png) -752px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.profile_active{
	background:url(../images/nav_icon.png) -752px -55px no-repeat;
	}
#nav a.bola_b{
	background:url(../images/nav_icon.png) -811px top no-repeat;
	width:56px;
	height:56px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
	}
#nav a.bola_b:hover{
	background:url(../images/nav_icon.png) -811px -55px no-repeat;
	width:56px;
	height:56px;
	text-decoration:none;
	}
#nav a.bola_b_active{
	background:url(../images/nav_icon.png) -811px -55px no-repeat;
}

#nav a.menu{
	background:url(../images/setting1.png) 0px top no-repeat;
	width:70px;
	height:70px;
	display:block;
	text-decoration:none;
	text-indent:-999999px;
}
#nav a.menu:hover{
	background:url(../images/setting2.png)  no-repeat;
	width:70px;
	height:70px;
	text-decoration:none;
}
#nav a.menu_active{
	background:url(../images/setting2.png) no-repeat;
}
/******* Tools Navigation *********/
#nav ul ul {
	position: absolute;
	left: 0;
	top: 100%;
	visibility: hidden;
	opacity: 0;
	z-index:9999;
}

#nav ul ul ul {
	left: 100%;
	top: 0;
}

#nav ul ul li{ float:none; width:85%; margin:0 auto; height:auto; padding-top:5px; padding-bottom:5px; padding-left:10px;border-bottom: 2px solid #249cd0; font-size:12px;font-weight:100;}
#nav ul ul li ul{ margin-left:-10px!important;}
#nav ul ul li a{text-decoration:none; color:#fff;}

#nav li:hover > ul {
	visibility: visible;
	opacity: 1;
	width:105px;
	padding:10px;
	background:#666668;
	border-radius:2px;
	border-bottom: 1px solid #249cd0;
	margin-top:10px;

}
.arrow_box {
	position: relative;
	background: #249cd0;
}
.arrow_box:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(36, 156, 208, 0);
	border-bottom-color: #666668;
	border-width: 10px;
	margin-left: -10px;
}

/************ Navigation Ends Here ************/

/************ Bread Crumb Starts Here ************/

#breadcrumb_main{
	width:100%;
	height:25px;
	clear:both;
	background-color:#666668;
	border-bottom: 4px solid #63a6dd;
	background:#666668;
	}
#bread_crumb{
	width:1001px;
	margin:0 auto;
	position:relative;
	}
.logout{
	position:absolute;
	font-size:14px;
	top:2px;
	right:15px;
	color:#fff;
	}
.logout a{
	display:inline-block;
	color:#fff;
	text-decoration:none;
	}
.logout a:hover{
	text-decoration:underline;
	}
.chng_paswd{
	    position: absolute;
    font-size: 14px;
    top: 2px;
    right: 75px;
    color: #fff;
	}
.chng_paswd a{
	display:block;
	color:white;
	text-decoration:none;
	}
.chng_paswd a:hover{
	text-decoration:underline;
	}

/************ Bread Crumb Ends Here ************/

/************ Header Ends Here ************/

.likeunlike {
    position: absolute;
    right: 130px;
    top: 107px;
}
.likeunlike span.unlike {
    background: url(../images/new_thumbs_down.png) no-repeat;
    width: 33px;
    height: 33px;
    display: inline-block;
    background-size: contain;
}
.likeunlike span.like {
    background: url(../images/new_thumbs_up.png) no-repeat;
    width: 33px;
    height: 33px;
    display: inline-block;
    background-size: contain;
}

/* Added by ananghd */
/* BANK */
#wrp-bank2 {
	cursor: pointer;
	z-index: 9999999999;
	background-color: #fff;
	position: absolute;
	border: 1px solid #C1C1C1;
	padding: 10px 30px;
	width: 179px;
}
#wrp-bank2 input {
	visibility: hidden;
}

.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.slate {
   background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
   height: 34px;
   width: 240px;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 34px;
   width: 268px;
}


/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }


/* -------------------- Colors: Text */
.slate select   { color: #000; }


/* -------------------- Select Box Styles: danielneumann.com Method */
/* -------------------- Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/ */
#mainselection select {
   border: 0;
   color: #EEE;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none;
}

#mainselection {
   overflow:hidden;
   width:350px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #330033;
   background: #58B14C url("http://i62.tinypic.com/15xvbd5.png") no-repeat scroll 319px center;
}