@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;
	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_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: 50px;
}

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

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


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

@media only screen and (min-width: 901px) {
    #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;
	
 	/* Center and scale the image nicely */
  	background-position: center;
  	background-repeat: no-repeat;
}

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

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

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

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

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

.grad5 {
    background-color: #f2f2f2;
    background-size: cover;
	
 	/* 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-transparent3 {
    background-color: #f2f2f2;
   /*  background: url("../images/adminLogo.png"), #6DB3F2; */
    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: white;
	margin-bottom:0px;
}

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

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

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


/* _________________________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 */
@media (min-width: 300px) and (max-width: 400px) {
.img-main-logo1-page {width:120px;height:auto;}
.img-main-logo2-page {width:120px;height:auto;}
.main-logo-header{width:70%; height:auto;margin:auto;display:block;padding-top:50px;}
#login_logo{display:block;margin:auto;width:200; height:210px; }
.buttonPay2 {margin: auto;border-radius: 40px;margin-bottom: 20px;padding-right: 15px; padding-left: 15px;width:auto; font-size:13px;}
.enter2 {margin: auto;border-radius: 40px;margin-bottom: 0;padding-right: 15px; padding-left: 15px;padding-top: 6px;width:auto; font-size:13px;}
.buttonReg2{margin: auto;border-radius: 40px;margin-bottom: 20px;padding-right: 15px; padding-left: 15px;width:auto; font-size:13px;}
.buttonPay {margin: auto;border-radius: 40px;margin-bottom: 20px;padding-right: 15px; padding-left: 15px;width:auto; font-size:13px;}

}
/* Extra small devices (phones, 600px and down) */
@media (min-width: 401px) and (max-width: 600px) {
	
#login_logo{display:block;margin:auto;width:240px; height:250px; }
.enter2 {margin: auto;border-radius: 40px;margin-bottom: 0;padding-right: 15px; padding-left: 15px;padding-top: 6px;width:auto;}
.buttonPay2 {margin: auto;border-radius: 40px;margin-bottom: 20px;padding-right: 15px; padding-left: 15px;width:auto;}
.buttonSearch {width: auto;border-radius: 50px;}
.grad4 {background-color: #f2f2f2;background-size: cover;height:100%;background-position: center;background-repeat: no-repeat;}
.mobile-transparent3 {background:url("");background-size: cover;background-position: center;background-repeat: no-repeat;padding-top:7vw;}
.img-main-logo1-page {width:120px;height:auto;}
.img-main-logo2-page {width:130px;height:auto;}
.main-logo-header{width:80%; height:auto;margin:auto;display:block;padding-top:50px;}
	}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 601px) and (max-width: 760px) {
#login_logo{display:block;margin:auto;width:220px;}
.grad4 {background-color: #f2f2f2;background-size: cover;height:100%;background-position: center;background-repeat: no-repeat;}
.mobile-transparent3 {background:url("");background-size: cover;background-position: center;background-repeat: no-repeat;padding-top:7vw;}
.main-logo-header{width:60%; height:auto;margin:auto;display:block;padding-top:50px;}
	}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
#login_logo{display:block;margin:auto;width:120px; height:150px; }
.main-logo-header{width:80%; height:auto;margin:auto;display:block;padding-top:50px;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

.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%;
	padding-right:18%;
}

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

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

.form-input-style-width{
  width:60%;
}

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

.img-main-logo1-page {
	width:120px;
	height:auto;
}

.img-main-logo2-page {
	width:120px;
	height:auto;
}

.bg-mobile-view{
	background-color:white;
	opacity:0.8;
	color: black;
}

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

.triangle-right {
	 border: 100px solid white;
    /*   width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid white;
      border-bottom: 50px solid transparent; */
    }
    
/* .block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightgray;
} */

/* .block img {
 width: 100px;
 height: 100px;
} */

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

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