@charset "ISO-8859-1";

@import url('fontsGoogle/pTSans11.css');
@import url('fontsGoogle/iBMPlexMono11.css');
@import url('fontsGoogle/lato11.css');
@import url('fontsGoogle/robotoSlap11.css');
@import url('fontsGoogle/notoSerif11.css');

/*
color theme

#ff8800;
#040547;
#191047;
#130c24;
#311c9c;
#3b1cad;
*/

/* ***** body ***** */
/* main */
html{
	font-family: 'Lato', sans-serif;
	height:100%;  
	/* min-height:100%; */
}

body{  
	font-family: 'Lato', sans-serif;
	height:100%;
	/* min-height:100%; */  
}


/* body color */
#main_col {
	background-color: #040547;
}

#body_col {
	background-color: #130c24;
}

#secondary_col {
	background-color: #ffffff;
}

/* ***** headers ***** */
/* facebook twitter icon */
.fb_twitter {
	margin-top: -26px;
}

.fb_tw {
	margin-top: auto;
	background-color: #291a47;
	height: 35px;
}

.fb_tw:hover {
	background-color: #ff8800;
}

/* language */
.lang {
	height: 40px;
	background-color: #130c24;
	color: white;
}

.lang a {
	color: white;
	text-decoration: none;
	opacity: 0.7;
	font-size: 15px;
}

.lang_options {
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	margin-top: 6px;
	margin-right: 100px;
}

.lang_options2 {
	font-family: 'Roboto Slab', serif;
	font-size: 15px;
	margin-top: 6px;
}

.lang_options2 a {
	color: black;
	text-decoration: none;
	font-size: 15px;
}

.lang_home {
	height: 40px;
	background-color: #130c24;
	color: white;
}

.lang_home a {
	color: white;
	text-decoration: none;
	opacity: 0.7;
	font-size: 15px;
}

.lang_options_home {
	margin-top: 6px;
	margin-right: 20px;
}

.lang_home2 {
	height: 40px;
	background-color: #130c24;
	color: white;
}

.lang_home2 a {
	color: white;
	text-decoration: none;
	opacity: 0.7;
	font-size: 15px;
}

.lang_options_home2 {
	margin-top: 8px;
	margin-right: 37px;
}

.online-trans{
	font-family: 'Roboto Slab', serif; 
	color: white; 
	margin-top: 60px; 
	margin-bottom: 60px; 
	margin-left: 30px;
}

/* msia govt and jpj logo */
.gov_jpj_logo {
	margin-left: 40px;
	margin-top: 12px;
}

/* borders */
.border {
	height: 10px;
	background-color: #000000;
	margin: auto;
}

#border {
	height: 10px;
	background-color: #ffffff;
	margin: auto;
}

#header1 {
	height: 60px;
	background-color: #040547;
	margin: auto;
	color: white;
}

#header2 {
	background-color: #040547;
	margin: auto;
}

#header3 {
	background-color: none;
	color: black;
	margin: auto;
}

.transaksi {
	background-color: #ffffff;
	margin: auto;
}

.steps {
	background-color: rgb(0,0,0); 
	background-color: rgba(232,137,12, 0.8);
	margin: auto;
}

.steps-text {
	margin-top: 5px;
	font-size: 50px;
	color: #ffffff;
}

.steps-text-details {
	margin-top: -50px;
	margin-left: 20px;
	font-size: 15px;
	color: #ffffff;
}

#steps-ico {
	margin-top: 20px;
	margin-left: 40px;
	margin-bottom: 20px;
}

.steps-linear {
	background-color: rgba(232,137,12, 0.8);
	background-image: linear-gradient(to right, #000033,  #009900);
	margin: auto;
	opacity:0.8;
}




.text {
	margin-top: 5px;
	font-size: 25px;
	color: #ffffff;
}

.text2 {
	margin-top: 5px;
	font-size: 25px;
	color: white;
	opacity: 0.8;
}

/* navigation */
.navbar-toggler {
	outline: none;
    border: none;
}

.navbar {
	/*background-color: #ffffff; */
}

.navbar_home {
	background-color: #ff8800;
}

.navbar_home_2 {
	/*
	background: transparent;
    background-image: none;
    border-color: transparent;
    
    background: rgba(255, 136, 0, 0.6);
    */
    background-color: #ff8800;
    
}

.navigator {
	font-size: 17px;
}

.navigator2 {
	margin-bottom: -50px;
	font-size: 17px;
}

.navbar-nav li {
	padding-right: 10px;
}

.dropdown-menu {
	background-color: #ff8800;
	border: none;
}

.nav-dropdown {
	background-color: #ebebeb;
	border: none;
}

.drop_mobile {
	background-color: black;
	border: none;
}

.menu2 {
	background-color: #040547; 
	border: none;
}



/* ***** footer ***** */
#footer {
	margin: 0;
	color: #ffffff;
	background-color: #130c24;
}

.footerhead {
	font-family: 'Roboto Slab', serif; 
	margin-top: 20px;
	margin-left: 50px;
	font-size: 15px;
	margin-bottom: 10px;
	text-align: left;
}

.footertext {
	margin-left: 50px;
	margin-bottom: 0;
	font-size: 13px;
	text-align: left;
	opacity: 0.7;
}

.footerend {
	font-size: 13px;
	margin-top: 20px;
	margin-bottom: 10px;
	opacity: 0.7;
	text-align: center;
}

#footer h6 {
	margin-top: auto;
}

#footer a {
	text-decoration: none;
	color: #ffffff;
}

#footer a:hover {
	color: #ff8800;
}

/* icons */
#signup_ico {
	margin-right: 5px;
	margin-bottom: 5px;
}

#login_ico {
	margin-right: 8px;
	margin-bottom: 5px;
}

#logout_ico {
	margin-left: 8px;
	margin-bottom: 5px;
}

#register_ico, #bid_ico, #pay_ico {
	margin-top: 0px;
}

#info_ico, #terms_ico, #rules_ico {
	margin-right: 20px;
}

#arrowdown_ico {
	margin-left: 20px;
}

#bid, #pay {
	color: white;
	font-size: 25px;
}

/*index page */
/* accordion */

.accord_head {
	font-size: 20px;
}

.accord_body {
	font-size: 15px;
}

.btn-xs {
	font-size: 15px;
	color: #ffffff;
	background-color: #ff8800;
	border-radius: 40px;
	margin-left: 5px;
}

.card-header {
	border: 3px solid;
	border-radius: 25px;
	border-color: white;
}

.card_home_head {
	color: white;
	background-color: #ff8800;
}

.card_home_body {
	color: black;
	background-color: white;
	border: 3px solid;
	border-color: #ff8800;
}

/* login page */

.error {
    font-weight:lighter;
	color:#ff0400;
	font-size: 15px;
 }
 
.link {
	color: #ffffff;
}

#login_logo {
	margin-top: 20px;
	margin-bottom: 10px;
}

#mobilereg_logo {
	margin-top: 10px;
	margin-bottom: 10px;
}

.login-details {
	margin: auto;
	margin-bottom: 10px;
	width: 300px;
}

.enter {
	color: #ffffff;
	background-color: #ff8800;
	margin: auto;
	border-radius: 40px;
	margin-bottom: 20px;
	width: 200px;
}
.enter2 {		
	color: #ffffff;		
	background-color: #ff8800;		
	margin: auto;		
	border-radius: 40px;		
	margin-bottom: 20px;		
	width: 150px;		
}
.forgot a {
	margin-left: 140px;
	color: #ffffff;
	text-decoration: none;
}

.forgot a:hover {
	color: #ff8800;
}

.via p {
	color: #ffffff;
	font-size: 20px;

	margin-bottom: 5px;
	margin-right: 130px;
}

.via .fa-facebook {
	text-decoration: none;
}
.via .fa-google-plus {
	margin-right: 180px;
	text-decoration: none;
}

.fa {
	padding: 14px;
	margin-right: 10px;
	margin-bottom: 30px;
    font-size: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
}

.fa:hover {
    opacity: 0.7;
    color: #ff8800;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-google-plus {
    background: #d34836;
    color: white;
}

/* register page */
.welcome {
	font-size: 60px;
	margin-top: 30px;
	text-align: left;
}

.formfill {
	font-size: 25px;
	margin-top: -50px;
	margin-bottom: 50px;
	text-align: left;
}

label {
	font-size: 20px;
	text-align: left;
}

.form-check label {
	font-size: 15px;
	text-align: left;
	color: #016d94;;
	margin-left: 20px;
}

.form-check-input {
	margin-top: 5px;
	margin-left: auto;
}

.submit_cancel {
	margin-bottom: 10px;
} 

.success {
	color: #000000;
	font-size: 20px;
}

/* home page */
.welcomeName {
 	font-size: 60px;
  	text-align: left;
  	margin-left: 40px;
  	opacity: 0.7;
}

.userName {
	font-size: 25px;
	color: #000000;
	opacity: 0.7;
}

.title-text {
	font-size: 25px;
	color: #130c24;
}

.title-textmobile {
	font-size: 15 px;
	color: #130c24;
}

.noPlate {
	font-size: 30px;
  	text-align: center;
  	padding-top: 20px;
  	padding-bottom: 20px;
}

.plateNum {
	margin-top: 10px;
	color: #ffffff;
	font-size: 40px;
	text-align: center;
}

.list_avail {
	font-size: 30px;
  	text-align: center;
  	margin-bottom: 10px;
}

.table-responsive {
	margin-top: 10px;
	background-color: #ffffff;
}

.table-responsive th {
	background-color: #ffffff;
	color: #000000;
}

.table-responsive tr {
	background-color: #ffffff;
	color: #ffffff;
}

.action {
	margin-top: -10px;
}

.details {
	color: #000000;
	font-size: 15px;
}

.bid_close {
	margin-bottom: -40px;
}

.bid_close_ico {
	margin-left: 10px;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 10px;
}

::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;  
}

::-webkit-scrollbar-thumb:hover {
background: #999;  
}

/* bid_search_number page */

#searchPlate {
	margin-top: 30px;
}

#plateArea, #seriesPrefix, #seriesSuffix {
	margin-bottom: 10px;
}

.buttonSearch {
	width: 150px;
	border-radius: 50px;
}

.buttonReg {
	width: 100px;
	border-radius: 50px;
}

.buttonReg2 {
	width: 120px;
	border-radius: 50px;
}

.buttonPay {
	width: 120px;
	border-radius: 50px;
}

.buttonPay2 {		
margin: auto;				
border-radius: 40px;				
margin-bottom: 20px;				
width: 150px;		
}

.buttonBid {
	width: 150px;
	border-radius: 50px;
	margin-top: 30px;
}

.buttonRad {
	border-radius: 50px;
}

.buttonLike {
	width: 100px;
	border-radius: 50px;
	margin-bottom: 20px;
	margin-right: 10px;
}

.buttonHover {
	background: none;
	color: #5c5b5b;
}

.buttonHover:hover {
	color: #0492ff;
}

.buttonBidView {
	width: 120px;
}

.like_bid_ico {
	margin-right: 30px;
}

#search {
	margin-left: 10px;
}

#back {
	margin-right: 10px;
}

.bidDetails {
	margin-left: 10px;
}

/* history */

.history {
	margin-top: 30px;
	font-size: 30px;
  	text-align: center;
  	margin-bottom: 10px;
}




/* NEW ADDITION */
.new_reg {
	color: #5c5b5b;
	font-size: 30px;
}

.mobilenew_reg {
	color: #5c5b5b;
	font-size: 10px;
}

.new_reg2 {
	color: black;
	font-size: 50px;
}

.search_cat a {
	font-size: 20px;
	color: black;
	text-decoration: none; 
	opacity: 0.6;
}

.card1 {
	border-radius: 25px;
	background-color: #040547;
	margin-bottom: 20px;
}

.cardHead {
	height: 60px;
}

.carian {
	font-size: 40px;
	text-align: center;
	color: white;
	margin-top: 20px;
}

.carian2 {
	font-size: 40px;
	text-align: center;
	color: black;
}

.card-header0 {
	color: #ffffff;
	background-color: #ff8800;
}

.card-body0 {
	color: #ffffff;
	background-color: #040547;
}

.card_ranking_head {
	border-radius: 50px;
	background-color: #ff8800;
}

.orange {
	background-color: #ff8800;
	height: 3px;
}

.black {
	background-color: #ffffff;
	height: 3px;
}

.blue {
	background-color: #311c9c;
	height: 130px;
	color: white;
}

#show {
	background-color: #311c9c;
}

@media only screen and (max-width: 901px) {
    #dissapear, #disappear, #carousel, #header2, #carousel3, #border {
        display: none;
    }
}

@media only screen and (min-width: 900px) {
    #show, #hide {
        display: none;
    }
}

@media (max-width: 992px) {
    .autosized .label { font-size: 50px; }
}

@media (min-width: 992px) {
    .autosized .label { font-size: 10px; }
}

#carousel {
	width: 90%;
	margin: auto;
}

#carousel3 {
	width: 90%;
	margin: auto;
	
	z-index: -1;
}

#oren {
	background-color: #ff8800;
}

.trans_btn {
	background-color: #f5f5f5;
}

.trans_btn:hover {
	background-color: white;
}


.trans_link {
	color: #ff8800;
}

.trans_link:hover {
	color: red;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

.desk_nav {
	font-family: 'Roboto Slab', serif;
	color: black;
	font-size: 15px;
}

.desk_nav:hover {
	background-color: #ff8800;
	color: white;
}

.mobile_nav {
	color: black;
	font-size: 17px;
}

.mobile_nav:hover {
	background-color: #ff8800;
	color: white;
}

.choose_lang {
	margin-top: 4px;
}

.drop_lang {
	margin: auto;
}

#bg_img {
	 background-color: #f2f2f2;
}

.circle {
  height: 90px;
  width: 90px;
  background-color: #ff8800;
  border-radius: 50%;
  display: inline-block;
}

.circle2 {
  height: 50px;
  width: 50px;
  background-color: #ff8800;
  border-radius: 50%;
  display: inline-block;
}

.circle-main {
  height: 30px;
  width: 30px;
  background-color: #ff8800;
  border-radius: 50%;
  display: inline-block;
}

.white {
	background-color: white;
}

.bg-title {
	background-color: #ebebeb;
	
}

.title-shadow {
	background: linear-gradient(rgba(220,220,220), rgba(192,192,192));
	height: 5px;
}

.cont_blue {
	background-color: #040547;
}

.welcome_reg {
	color: #ff8800;
}

.welcome_reg:hover {
	color: #ff8800;
	opacity: 0.8;
}

.aerial {

  	background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
  	
  	/* /* background-image: url("../images/JPJeBid3.jpg");
background-size: 100% 100%, 100%;

 	Center and scale the image nicely
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; */
  
  	/* background-image: url("../images/JPJeBid4.jpg");
	background-size: cover; 
	height:100%;
	
	
 	Center and scale the image nicely
  	background-position: center;	
  	background-repeat: no-repeat;
  	background-attachment: fixed; */ 
  
}



.fullytransparent {
	background-color: rgb(245,245,245, 0); 
}

.partialtransparent {
	background-color: rgb(245,245,245, 0.5); 
}

.transparent {
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0, 0.7);
}

.transparent2 {
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,51, 0.8);
}

.transparent3 {
	background-color: rgb(0,0,0); 
	background-color: rgba(232,137,12, 0.8);
}

.login_box {
	margin-right: -33px;
	height: 90px;
	background-color: rgb(0,0,0); 
	background-color: rgba(204,0,0, 0.7);
}

.login_box2 {
	margin-right: -33px;
	height: 70px;
	background-color: #000033;
	border-radius: 5px;
}

.signup_box {
	margin-right: -3px;
	height: 90px;
	background-color: rgb(0,0,0); 
	background-color: rgba(0,204,0, 0.7);
}
.signup_box2 {
	background-color: #b30000;
	border-radius: 6px;
}

.grad {
    /* background:url("../images/background_login3.png") no-repeat center center fixed; */
    background-color: #f2f2f2;
    background-size: cover;
	height:100%;
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.grad2 {
    /* background: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)) fixed,
    url("../images/JPJeBid2.jpg") no-repeat center center fixed; */
   	background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.grad3 {
 	background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.grad4 {
  /*  	background:url("../images/main_bg.png") no-repeat center center fixed; */
    background-color: #e6e6e6;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;`
}

.grad5 {
  	/* background-color: #f2f2f2; */
  	background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.mobile-transparent {
    background: linear-gradient(rgba(0,0,51, 0.5), rgba(0,0,51, 0.5));
    background-size: cover;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.mobile-transparent2 {
    background-color: #000033;
    background-size: cover;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.mobile-transparent-div {
    background-color: #f2f2f2;
    background-size: cover;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.mobile-transparent3 {
	background-color: #191967;
    background-size: cover;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.nav-transparent {
    background: linear-gradient(rgba(0,0,51, 0.7), rgba(0,0,51, 0.7));
}

.nav-ebid {
	margin-top: 5px;
}

.fill {
	min-height: 100%;
    height: 100%;
}

.bv-title {
	font-weight: bold;
	margin-left: 20px;
}

.card-bv, .card-bf {
	border: none;
}

.bv-text {
	margin-top: -17px;
	margin-left: 20px;
}

.bv-ptitle {
	font-weight: bold;
	color: #016d94;
	margin-right: 20px;
}

.bv-price {
	margin-top: -17px;
	font-size: 50px;
	color: #016d94;
	margin-right: 20px;
}

.bv-price-mobile {
	margin-top: -17px;
	font-size: 35px;
	color: #016d94;
	margin-right: 20px;
}

.bf-title-time {
	font-weight: bold;
}

.bf-title {
	font-weight: bold;
}

.bf-text {
	margin-top: -17px;
}

.bf-ptitle {
	font-weight: bold;
	color: #016d94;
}

.bf-price {
	margin-top: -17px;
	font-size: 50px;
	color: #016d94;
}

.bf-price-mobile {
	margin-top: -17px;
	font-size: 40px;
	color: #016d94;
}

.bf-lbl {
	font-size: 17px;
}

.register-lbl {
	font-size: 15px;
	color: #016d94;
}

.bid-view-inp {
	width: 250px;
}

.main-text {
	font-size: 12px;
}

.main-text2 {
	font-size: 14px;
}

.prof-head {
	font-weight: bold;
	opacity: 0.7;
	color:  #016d94;
}

.tableHover:hover {
	background-color: #ebebeb;
}

.cc-number {
	font-family: 'IBM Plex Mono', monospace;
}

/* ______________ login input________________*/

.inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 380px;
}
.inp .label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: #9098a9;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}
.inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: #ff8800;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}
.inp input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 3px solid #c8ccd4;
  background: none;
  border-radius: 0;
  color: #ffffff;
  transition: all 0.15s ease;
}
.inp input:hover {
  background: rgba(34,50,84,0.03);
}
.inp input:not(:placeholder-shown) + span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus {
  background: none;
  outline: none;
}
.inp input:focus + span {
  color: #ff8800;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus + span + .border {
  transform: scaleX(1);
}


/* _____________________Side navigation menu____________________________ */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgba(0,0,51);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    .main-text2 {font-size: 12px;}
}


/* _________________________Star Favourite Font Awesome____________________*/

/* Required Styling */

label input[type="checkbox"] {
  display: none;
}

.custom-checkbox {
  position: relative;
  cursor: pointer;
}

.custom-checkbox .fontsome {
  color: gold;
  position: absolute;
  top: 0.4em;
  left: -1.25em;
  font-size: 0.75em;
}

.custom-checkbox .star-empty {
  color: gray;
}

.custom-checkbox .star-fill {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-checkbox:hover .star-fill{
  opacity: 0.5;
}

.custom-checkbox input[type="checkbox"]:checked ~ .star-fill {
  opacity: 1;
}

.linear-gradient-cl{
	
	  background-image:  linear-gradient(180deg, #000080, #b3003b);
	
}

.login-logo-admin{
	font-size: 30px;
    text-align: center;
    font-weight: 300;
    background-color: #ebebfa;
    color: #333;
    padding-bottom: 25px;
}


/* BREAKPOINT */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
	#login_logo{margin-top: 0px;margin-bottom:0px;}


	}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) and (max-width: 767px) {
	#login_logo{display:block;margin:auto;width:220px;}
	.main-logo-header{width:100%; height:auto;margin:auto;display:block;padding-top:50px;padding-left:100px;}
	}

/* Medium devices (landscape tablets, 768px and up) */
@media  (min-width: 768px) and (max-width: 899px) {
.img-main-logo1-page {width:140px;height:auto;margin-left:4vw;}
.img-main-logo2-page {width:150px;height:auto;}
.landing-logo-jota{width:80px;height:78px;}
.landing-logo-jpj{width:85px;height:80px;}
#login_logo{display:block;margin:auto;width:300px; height:300px; }
.register-lbl {font-size: 15px;color: white;}
.enter2 {margin-bottom: 0px;}
.grad {
	 background-color: #f2f2f2;
    background-size: cover;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}
.main-logo-header{width:100%; height:auto;margin:auto;display:block;padding-top:50px; padding-left:200px;}
.mobile-transparent {
    /* background: linear-gradient(rgba(0,0,51, 0.5), rgba(0,0,51, 0.5)),
    url("../images/jpjebidheader3.png"); */
     background: linear-gradient(rgba(0,0,51, 0.5), rgba(0,0,51, 0.5));
    background-size: cover;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

#navbarCollapse{
	display:none!important;
}
}

@media (min-width: 900px) and (max-width: 991px) {
	.img-main-logo1-page {width:140px;height:auto;margin-left:4vw;}
	.img-main-logo2-page {width:150px;height:auto;}
	.landing-logo-jota{width:65px;height:63px;}
	.landing-logo-jpj{width:65px;height:70px;}
	.register-lbl {font-size: 15px;color: #016d94;}
	.grad {
  	 background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

.main-logo-header{
	width:200px; height:auto;margin-left:10px;padding-top:1.8rem;
}
.navigator {font-size: 9px;}
.forgot-password{margin-bottom: 10px; margin-left:24rem;}
.custom-col-sm-3{flex:0 0 24% !important;max-width:24% !important;}
.custom-col-sm-9{flex:0 0 76% !important;max-width:76% !important;}
.cornered-login {padding:10px; padding-left:0.9rem !important;}
.title-bynumber {margin-top: 20px; padding-left:19rem !important; }
.button-bynumber{padding-left:2rem !important; }
.title-searchAll {margin-top: 20px; padding-left:14rem !important; }
.button-searchAll{padding-left:5rem !important; }
.title-searchView {margin-top: 20px;padding-left: 14rem !important;}
.title-payment-info{padding-left: 0rem !important;}
.title-view-profile{padding-left: 0rem !important;}
.title-update-profile{padding-left: 0rem !important;}
.title-edit-password{padding-left: 0rem !important;}
.title-bid-favorite{padding-left: 0rem !important;}
.title-search-winner{padding-left: 15rem !important;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.img-main-logo1-page {width:140px;height:auto;margin-left:4vw;}
	.img-main-logo2-page {width:150px;height:auto;}
	.landing-logo-jota{width:80px;height:78px;}
	.landing-logo-jpj{width:85px;height:80px;}
	.register-lbl {font-size: 15px;color: #016d94;}
	.grad5 {
  	 background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
  	
}

.main-logo-header{
	width:240px; height:auto;margin-left:10px;
}
.navigator {font-size: 14px;}
.title-bynumber {margin-top: 20px; padding-left:21rem !important; }
.button-bynumber{padding-left:3rem !important; }
.title-searchAll {margin-top: 20px; padding-left:16rem !important; }
.button-searchAll{padding-left:7rem !important; }
.title-searchView {margin-top: 20px;padding-left: 16rem !important;}
.title-payment-info{padding-left: 5rem !important;}
.title-view-profile{padding-left: 16rem !important;}
.title-update-profile{padding-left: 16rem !important;}
.title-edit-password{padding-left: 16rem !important;}
.title-bid-favorite{padding-left: 14rem !important;}
.title-search-winner{padding-left: 16rem !important;}
}

@media (min-width: 992px) {
.buttonPay2 {margin: auto;border-radius: 40px;margin-bottom: 20px;width: auto;}
.enter2 {width: auto;}
.landing-logo-jota{width:60px;height:58px;}
.landing-logo-jpj{width:65px;height:60px;}
.main-logo-header{width:210px; height:auto;margin-right:20px;padding-top:1.8rem;}
.nav a{color: white !important;font-size: 10px !important;}
.forgot-password{margin-bottom: 10px; margin-left:14rem;}
.navigator {font-size: 11px;}
.custom-col-sm-3{flex:0 0 21% !important;max-width:21% !important;}
.custom-col-sm-9{flex:0 0 79% !important;max-width:79% !important;}
.cornered-login {padding:10px; padding-left:0.8rem !important;}
.title-bynumber {margin-top: 20px; padding-left:21rem !important; }
.button-bynumber{padding-left:3rem !important; }
.title-searchAll {margin-top: 20px; padding-left:16rem !important; }
.button-searchAll{padding-left:7rem !important; }
.title-searchView {margin-top: 20px;padding-left: 16rem !important;}
.title-payment-info{padding-left: 5rem !important;}
.title-view-profile{padding-left: 16rem !important;}
.title-update-profile{padding-left: 16rem !important;}
.title-edit-password{padding-left: 16rem !important;}
.title-bid-favorite{padding-left: 16rem !important;}
.title-search-winner{padding-left: 16rem !important;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.img-main-logo1-page {width:140px;height:auto;margin-left:4vw;}
	.img-main-logo2-page {width:150px;height:auto;}
	.landing-logo-jota{width:75px !important;height:78px;}
	.landing-logo-jpj{width:75px !important;height:80px;}
	.buttonPay2 {margin: auto;border-radius: 40px;margin-bottom: 20px;width: 150px;}
	.enter2 {color: #ffffff;background-color: #ff8800;margin: auto;border-radius: 40px;margin-bottom: 20px;width: 150px;}
	.main-logo-header{width:250px; height:auto;margin-left:15px;padding-top:2rem !important;}
	.forgot-password{margin-bottom: 10px; margin-left:20rem;}
	.navigator {font-size: 14px;}
	.custom-col-sm-3{flex:0 0 18% !important;max-width:18% !important;}
	.custom-col-sm-9{flex:0 0 82% !important;max-width:82% !important;}
	.enter2 {width: auto;}
	.cornered-login {padding:10px; padding-left:0.9rem !important; }
	.title-bynumber {margin-top: 20px; padding-left:25rem !important; }
	.button-bynumber{padding-left:4rem !important; }
	.landing-div-image{padding-top:20px;padding-left:0.9rem !important;}
	.title-searchAll {margin-top: 20px; padding-left:19rem !important; }
	.button-searchAll{padding-left:10rem !important; }
	.title-searchView {margin-top: 20px;padding-left: 19rem !important;}
	.title-payment-info{padding-left: 7rem !important;}
	.title-view-profile{padding-left: 19rem !important;}
	.title-update-profile{padding-left: 19rem !important;}
	.title-edit-password{padding-left: 19rem !important;}
	.title-bid-favorite{padding-left: 19rem !important;}
	.title-search-winner{padding-left: 20rem !important;}
}

@media only screen and (min-width: 1300px) {
	.cornered-login {padding:10px; padding-left:2.2rem !important; }
	.title-bynumber {margin-top: 20px; padding-left:28rem !important; }
	.button-bynumber{padding-left:5rem !important; }
	.landing-logo-jota{width:85px !important;height:78px;}
	.landing-logo-jpj{width:83px !important;height:80px;}
	.landing-div-image{padding-top:20px;padding-left:0.9rem !important;}
	.title-searchAll {margin-top: 20px; padding-left:21rem !important; }
	.button-searchAll{padding-left:12rem !important; }
	.title-searchView {margin-top: 20px;padding-left: 21rem !important;}
	.title-payment-info{padding-left: 7rem !important;}
	.title-view-profile{padding-left: 21rem !important;}
	.title-update-profile{padding-left: 21rem !important;}
	.title-edit-password{padding-left: 21rem !important;}
	.title-bid-favorite{padding-left: 21rem !important;}
	.title-search-winner{padding-left: 21rem !important;}
}

@media only screen and (min-width: 1336px) {
	.landing-div-image{padding-top:20px;padding-left:1.4rem !important;}
}

@media only screen and (min-width: 1400px) {
	.img-main-logo1-page {width:160px;height:auto;margin-left:4vw;}
	.img-main-logo2-page {width:160px;height:auto;}
	.landing-logo-jota{width:83px;height:78px;}
	.landing-logo-jpj{width:85px;height:80px;}
	.main-logo-header{width:280px; height:auto;margin-left:30px;}
	.forgot-password{margin-bottom: 10px; margin-left:26rem;}
	.navigator {font-size: 18px;}
	.cornered-login {padding:10px; padding-left:3.2rem;}
	.title-bynumber {margin-top: 20px; padding-left:29rem !important; }
	.button-bynumber{padding-left:5rem !important; }
	.landing-div-image{padding-top:20px;padding-left:1.4rem !important;}
	.title-searchAll {margin-top: 20px; padding-left:21rem !important; }
.button-searchAll{padding-left:11rem !important; }
.title-searchView {margin-top: 20px;padding-left: 22rem !important;}
.title-payment-info{padding-left: 8rem !important;}
.title-view-profile{padding-left: 22rem !important;}
.title-update-profile{padding-left: 22rem !important;}
.title-edit-password{padding-left: 22rem !important;}
.title-bid-favorite{padding-left: 22rem !important;}
.title-search-winner{padding-left: 22rem !important;}
}

@media only screen and (min-width: 1800px) {
	.img-main-logo1-page {width:160px;height:auto;margin-left:4vw;}
	.img-main-logo2-page {width:160px;height:auto;}
	.landing-logo-jota{width:100px;height:98px;}
	.landing-logo-jpj{width:105px;height:100px;}
	.main-logo-header{width:300px; height:auto;margin-left:70px;}
	.forgot-password{margin-bottom: 10px; margin-left:35rem;}
	.navigator {font-size: 19px;}
	.cornered-login {padding:10px; padding-left:5rem;}
	.title-bynumber {margin-top: 20px; padding-left:38rem !important; }
	.button-bynumber{padding-left:7rem !important; }
	.custom-col-sm-3{flex:0 0 17.5% !important;max-width:17.5% !important;}
	.custom-col-sm-9{flex:0 0 82.5% !important;max-width:82.5% !important;}
	.landing-div-image{padding-top:20px;padding-left:1.8rem !important;}
	.title-searchAll {margin-top: 20px; padding-left:29rem !important; }
	.button-searchAll{padding-left:17rem !important; }
	.title-searchView {margin-top: 20px;padding-left: 29rem !important;}
	.title-payment-info{padding-left: 10rem !important;}
	.title-view-profile{padding-left: 28rem !important;}
	.title-update-profile{padding-left: 28rem !important;}
	.title-edit-password{padding-left: 28rem !important;}
	.title-bid-favorite{padding-left: 28rem !important;}
	.title-search-winner{padding-left: 29rem !important;}
}

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  
  	.grad {
  	 background-color: #f2f2f2;
    background-size: cover;
	height:100%;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}
  
  
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

.nav-ul-item {
	background-color: rgb(0,0,0); 
	background-color: rgba(0,204,0, 0.7);
	border-radius: 10px;
}

.navbar-default .navbar-nav > .active{
    color: #000;
    background: #d65c14;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #000;
    background: #d65c14;
}

.main-role-home{
	margin-top:2%;
}

.button-daftar{
	background-color: #000033;
	margin-left:5%;
	margin-right:20px;
	color:white;
}

.button-login{
	background-color: rgb(0,0,0); 
	background-color: rgba(0,204,0, 0.7);
	margin-left:5%;
}

input.right {
    position: absolute;
    right: 0;
}

.nav-ul-item-main-1 {
	background-color: #000033;
	margin-left:8%;
	padding-bottom:1%;
	margin-top:2%;
}

.nav-ul-item-main-2 {
	background-color: rgb(0,0,0); 
	background-color: rgba(0,204,0, 0.7);
	margin-left:10%;
	border-radius:10px;
}

.nav-ul-item-main-3 {
	background-color: #000033;
	margin-left:4%;
}

.bg-icon-red-user{
	background-color: #990000;
	border-radius:50%;
	padding:5px;
}

.bg-icon-red-sign-out{
	background-color: #990000;
	border-radius:14px;
}

.bg-icon-red-home{
	background-color: #000033;
	border-radius:50%;
	padding:4px;
}

.bd-item-main-nav{
	border-right:1px solid white;
	line-height: 5%;
	padding-top: 2%;
	margin-left: 7%;
}

.div-item-1-main{
	margin-left: 20%;
	padding-bottom:1%;
}

.div-item-3-main{
	margin-right: 20%;
}

.btn-blue-color{
	background-color: #000033;
	color:white;
}

.btn-green-color{
	background-color: rgb(0,0,0); 
	background-color: rgba(0,204,0, 0.7);
}

.btn-red-color{
	background-color: #990000;
	color:white;
}

.form-input-style{
  border: 3px solid #ebebe0;
  border-radius: 5px;
}

.th-purple-light{
	background-color:#3c4177;
}

.th-blue-light{
	background-color:#38607a;
}

.table-striped-custom>tbody>tr:nth-child(odd)>td, 
.table-striped-custom>tbody>tr:nth-child(odd)>th {
   background-color: grey;
 }
 
 .table-striped-custom>tbody>tr:nth-child(odd)>td, 
.table-striped-custom>tbody>tr:nth-child(odd)>th {
   background-color: white;
 }
 
.div-item-mobile{
	margin-left:25%;
}
.div-item-mobile{
	margin-left:25%;
}

.login-lbl{
	background-color: #000033;
	color:white;
	padding-right:10px; 
	padding-left:10px; 
	border-radius:5px; 
	padding-bottom:2px;
}

.div-main-head-bg{
	background-color: #000033;
}

.btn-main-head-font{
	font-size:3vw;
}

.bg-mobile-view{
	color: #016d94;
}

.home-header{
background-color: #000066;	
}

.form-login{
	/* width:70%; */
	height:80%;
	padding-left : 5px;
}

.form-login label{
	padding-top:1rem;
}

.forgot-password{
	color: blue; 
	text-decoration: none; 
	text-align: right; 
}

.light-pink-color{
	background-color: #f9ecf2;
}

.cornered {
  padding: 10px;
}
.cornered-login {
  padding:10px; 
  padding-left:2rem;
 }

.cornered-right {
  padding: 10px;
  border-top-left-radius: 70%;
}

.cornered-right-landing {
  padding: 10px;
  border-top-left-radius: 50%;
}

.custom-col-sm-3{
	flex:0 0 18%;
	max-width:18%;
}

.custom-col-sm-9{
	flex:0 0 82%;
	max-width:82%;
}

.title-bynumber {
	margin-top: 20px;
	padding-left: 28rem;
}

.button-bynumber {
	padding-left: 5rem;
}

.landing-div-image{
	padding-top:20px; 
	padding-left:1.4rem;
}

#captcha_image{
	width:140px;
	height:40px;
}

.title-searchAll {
	margin-top: 20px;
	padding-left: 28rem;
}

.button-searchAll {
	padding-left: 11rem;
}

.title-searchView {
	margin-top: 20px;
	padding-left: 21rem;
}

.title-payment-info{
	margin-top: 20px;
	padding-left: 21rem;
}

.title-view-profile{
	margin-top: 20px;
	padding-left: 21rem;
}

.title-update-profile{
	margin-top: 20px;
	padding-left: 21rem;
}

.title-edit-password{
	margin-top: 20px;
	padding-left: 21rem;
}

.title-bid-favorite{
	margin-top: 20px;
	padding-left: 21rem;
}

.title-search-winner {
	margin-top: 20px;
	padding-left: 21rem;
}

.table-details-mylivebid{
	font-size:14px;
}

.bv-price-details {
	margin-top: -17px;
	font-size: 16px;
	color: #016d94;
	margin-right: 20px;
}