html, body {
    margin: 0;
    background-color: #FFFFFF;
    font-family: "Times New Roman" !important;    
    }
* {
  box-sizing: border-box;
}
input{
    box-sizing:border-box;
} 
.kirikanan {
    margin-left: 10%;
    margin-right: 10%;
    font-family: "Times New Roman" !important;
}

.topheader {
    background:url('https://www.gogreenmatrix.com/icon/bgheaderGM.webp') center top;
    background-size: 100% 960px;
    background-repeat: no-repeat;
    font-family: "Times New Roman" !important;
}

.header {
    width: 100%;
    top: 0;
    font-family: "Times New Roman" !important;
}

.headerKiri {
    float: left;
    padding-top: 10px;
    width: 250px;
    background-color: #F80004;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    font-family: "Times New Roman" !important;
}

.headerKanan {
    float: right;
    font-family: "Times New Roman" !important;
}

div.logo {
   width:373px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('https://www.gogreenmatrix.com/icon/logoHeader.webp');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
   
    
}


#banner {
	margin-top:20px;
	height:520px;
    color: #FFFFFF;
    font-family: "Times New Roman" !important;
}


#bannercontent {
    padding-top: 20px;
    font-family: "Times New Roman" !important;
}

#title1 {
	font-family: "Times New Roman" !important;
    text-align: center;
}
#contentdesc {
    font-size: 18px;
    font-family: "Times New Roman" !important;    
}


#lefts {
    float:left;
    width:55%;
    padding-left: 3%;
    padding-right: 1%;
    margin-top: 20px;
    font-family: "Times New Roman" !important;
}

#kiricontent {
    background-color: #000000;
    opacity: 0.8;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius:8px;
    font-family: "Times New Roman" !important;
}

#centers {
    display: inline-block;
    margin:0 auto;
    width:2%;
    display: inline-block;
	position:absolute;
	border-left:#999 dotted 1px;
	height:450px;
    font-family: "Times New Roman" !important;
}

#rights {
    float:right;
    width:35%;
	margin-left:10px;
	margin-right:3%;
	margin-top:10px;
    border-radius: 10px;
    border: 1px solid #000;
    height: auto;
    background: #000000;
	color:#FFF;
    font-family: "Times New Roman" !important;
}
#contentright {
	padding:20px;
    font-family: "Times New Roman" !important;
}

	
#matawangstyle {
	height:50px;
	width:200px;
    background-image: url("https://www.gogreenmatrix.com/icon/exchange.png");
	background-repeat:no-repeat;
	background-position:left;
	padding-left:32px;
	border:#000 solid 1px;
    border-radius:8px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 5px;
    font-size: 14px;
    color: #000000;
}



#start1 {
    width:100%;
    height:50px; 
    background:url("https://www.gogreenmatrix.com/icon/location.png") no-repeat left #FFF; 
	padding-left:32px;
	border:#000 solid 1px;
    border-radius:8px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 5px;
    font-size: 14px;
    color: #000000;    
}



#end1 {
    width:100%;
    height:50px; 
    background:url("https://www.gogreenmatrix.com/icon/location.png") no-repeat left #FFF; 
	padding-left:32px;
	border:#000 solid 1px;
    border-radius:8px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 5px;
    font-size: 14px;
    color: #000000;    
}



#arrival {
    width:63%;
    height:50px;
    background:url("https://www.gogreenmatrix.com/icon/calender.png") no-repeat left #FFF; 
	padding-left:32px;
	border:#000 solid 1px;
    border-radius:8px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
    color: #000000;  
 
}


#departure {
    width:63%;
    height:50px;
    background:url("https://www.gogreenmatrix.com/icon/calender.png") no-repeat left #FFF; 
	padding-left:32px;
	border:#000 solid 1px;
    border-radius:8px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
    color: #000000;  
 
}

#timenya {
    width:100%;
    height:50px;
    background:url("https://www.gogreenmatrix.com/icon/time.png") no-repeat left #FFF; 
	padding-left:32px;
	border:#000 solid 1px;
    border-radius:8px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
    color: #000000;  
}


#searchcarnow {
	margin-top:10px; 
	height:50px; 
	background-color:#F00; 
	color:#000000; 
	width:100%;
	border:none;
	display: block; 
	font: 20px Arial,sans-serif; 
	border-radius:8px;
}



#cornerdiv {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  margin: 5px;
}

#listcarS {
	width:100%;
    background-color: #FFFFFF;
    padding-bottom: 90px;
    margin-bottom: 90px;
    margin-top: 20px;

}

#senaraicar {
	width:475px; 
	height:auto;
	background-color:#FFFFFF;
    border-radius:5px;
    margin-left: 25px;
    margin-top: 30px;
    color: #000000;
    border: #F80004 solid 1px;
    
}
#senaraicar:hover { 
	width:475px; 
	height:auto; 
	background-color:#FFFFFF;
    border-radius:5px;
    margin-left: 25px;
    margin-top: 30px;
    color: #000000;
}

#btnselectcar {
	cursor:pointer;
	padding:10px; 
	color:#F00; 
	width:90%; 
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
    text-decoration:none;
    
    border-radius:5px;
}
#btnselectcar:hover { 
	cursor:pointer;
	padding:10px; 
	color:#F00; 
	width:90%; 
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFF;
    text-decoration:none;
    
    border-radius:5px;
}

#boxselect {
    padding:5px; 
    background-color:#BB0003; 
    margin-top:15px; 
    border:#F00 dotted 1px;
    
}
#boxselect:hover { 
    padding:5px; 
    background-color:#BB0003; 
    margin-top:15px; 
    border:#770001 dotted 1px;
 
}

#boxitemall {
    width:90%; 
    margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    background-color: #000000;
    color: #FFFFFF;
    padding: 5px;
    
    border-radius: 25px;
}

#gambarkereta {
    
    border-radius: 15px;    
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 290px; 
  background-color: #FFFFFF;
}
    
    .row {
        
    }    

.row:after {
  content: "";
  display: table;
  clear: both;
  
}

.column2 {
  float: left;
  width: 33.33%;
  padding: 10px;
  padding-left: 20px;
  height: auto; 
  background-color: #F80004;
    text-align: left;
}
    
    .row2 {
  
        
    }    

.row2:after {
  content: "";
  display: table;
  clear: both;
  
}

a:link#footerlink {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 17px;
} 
a:visited#footerlink {
    color: #FFFFFF;
    font-size: 17px;
    text-decoration: none;
}
a:hover#footerlink {
    color: #000000;
    font-size: 17px;
    text-decoration: none;

}
a:active#footerlink {
    color: #FFFFFF;
    font-size: 17px;
    text-decoration: none;
}

#shadowimg {

    margin: 10px;
}


#review {
    margin: 0 auto;
    max-width: 100%;
    
}


#reviewkiri {
	float:left;
	width:45%;
	height:auto;
	padding-left:5%;

}
#reviewkanan {
	float:right;
	width:45%;
	height:auto;
	padding-top:20px;
	padding-right:5%;
}

.containerX {
    padding: 10px;
    margin: 10px 0;
}

.darker {
    border-color: #ccc;
    background-color: #ddd;
}

.containerX::after {
    content: "";
    clear: both;
    display: table;
}

.containerX .name {
	font-weight: bold;
}
.containerX .comment {
	padding-top:20px;
}


.clear {
    clear: both;
}

#mySidenav {
    
}


.sidenav {
    height: 100%;
    width: 0;
    background: rgba(0,0,0,0.9); 
    
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    transition: 0.5s;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    padding-top: 60px;
}

.sidenav a {
    text-decoration: none;    
    display: block;
    transition: 0.3s;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    font-size: 20px;
    color: #FFFFFF;
    padding-left: 20px;
    padding-bottom: 10px;
}

.sidenav a:hover {
    color: #000000;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    font-size: 16px;
    height: 48px;
    width: 48px;
    cursor:pointer;
    margin-right: 50px;
}




.sidenavC {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
	height: 0;
    background: rgba(0,0,0,0.9);
    overflow-x: hidden;
    transition: 0.5s;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    z-index: 1001;
	
}

.sidenavC a {
    text-decoration: none;
    font-size: 15px;
    color: #FFFFFF;
    transition: 0.3s;
    height: 48px;
    width: 48px;    
    
}

.sidenavC a:hover {
    color: #ff0000;
}

.sidenavC .closebtnC {
    cursor:pointer;
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 16px;
    margin-left: 50px;
    height: 48px;
    width: 48px;    
}

@media screen and (max-height: 450px) {
  .sidenavC {padding-top: 15px;}
  .sidenavC a {font-size: 18px;}
}
		
	
.MySideSignup {
    height: 100%;
    width: 0;
	position: absolute;
	z-index: 12;    
    top: 0;
	right: 0;
    overflow-x: hidden;
    transition: 0.5s;

	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;	
	margin-top: 30px;
}	

.MySideForget {
    height: 100%;
    width: 0;
	position: absolute;
    
	z-index: 12;    
    top: 0;
	right: 0;
   
    overflow-x: hidden;
    transition: 0.5s;

	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;	
	margin-top: 30px;
}	

#AccountKiri {
    float: left;
    width: 30%;
    margin-left: 40px;
    margin-top: 5px; 
}
#AccountKanan {
    float: right;    
    width: 65%;
    margin-top: 20px;
    margin-right: 40px;
}
#clear {
    clear: both;
}

#LoginEmail {
 width:100%;
 height:35px;
 color:#000;
 border:#999 solid 1px;
 padding-left:35px;
 font-size:15px;
 background:url(https://www.gogreenmatrix.com/icon/emailaccount.png) no-repeat left #FFF; 
}



#LoginMobile {
 width:100%;
 height:35px;
 color:#000;
 border:#999 solid 1px;
 padding-left:35px;
 font-size:15px;
 background:url(https://www.gogreenmatrix.com/icon/cellphone.png) no-repeat left #FFF; 
}



#LoginPerson {
 width:100%;
 height:35px;
 color:#000;
 border:#999 solid 1px;
 padding-left:35px;
 font-size:15px;
 background:url(https://www.gogreenmatrix.com/icon/personal.png) no-repeat left #FFF; 
}


#LoginPassword {
 width:100%;
 height:35px;
 color:#000;
 border:#999 solid 1px;
 padding-left:35px;
 font-size:15px;
 background:url(https://www.gogreenmatrix.com/icon/passwordaccount.png) no-repeat left #FFF; 
}

#btnlogin {
	margin-top:10px; 
	height:35px; 
	background-color:#000; 
	color:#FFF; 
	width:100%;
	border:none;
	display: block; 
	font: 17px Arial,sans-serif; 
}
#btnlogin:hover { 
	color: #F00;
}

#boxlogin {
    margin-top: 20px;
    margin-left: 50px;
    border:#999 solid 1px;
    border-radius:8px;
    background-color: #FFF;
    
}

#boxsignup {
    margin-top: 20px;
    width: 100%;
    border:#999 solid 1px;
    border-radius:8px;
    background-color: #FFF;
}

#boxprofile {
    width: 100%;
    border:#999 solid 1px;
    border-radius:8px;
    background-color: #FFF;
}

#boxeditprofile {
    margin-left: 10%;
    width: 60%;
    border:#999 solid 1px;
    border-radius:8px;
    background-color: #FFF;
}
#LoginMobile2 {
 width:90%;
 color:#000;
 height:35px;    
 border:#999 solid 1px;
 padding-left:28px;
 font-size:15px;
 background:url(https://www.gogreenmatrix.com/icon/codehp.png) no-repeat left #FFF; 
}

#boxforgot {
    margin-top: 20px;
    width: 100%;
    border:#999 solid 1px;
    border-radius:8px;
    background-color: #FFF;
}
#Answer {
 width:140px;
 height:40px;
 color:#000;
 border:#999 solid 1px;
 padding-left:35px;
 font-size:15px;
 background:url(https://www.gogreenmatrix.com/icon/answericon.png) no-repeat left #FFF; 
}


.MySideBooking {
    height: 90%;
    width: 0;
	position: absolute;
	z-index: 12;    
    top: 0;
	right: 0;

    overflow-x: hidden;
    transition: 0.5s;
    margin-top: 30px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;	
    margin-right: 70px;
}	



.MySideEditAkaun {
    height: 90%;
    width: 0;
	position: absolute;
	z-index: 12;    
    top: 0;
	right: 0;
    overflow-x: hidden;
    transition: 0.5s;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;	
	margin-top: 20px;
    margin-right: 70px;
}

.BoardNotifyError {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;    
    overflow-x: hidden;
    transition: 0.8s;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    border-radius:8px;
    color: #FFFFFF; 
    background: #e74c3c;
    margin-top: 10px;
    margin-right: 15px;
}

.BoardNotifyTrue {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;    
    overflow-x: hidden;
    transition: 0.8s;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    border-radius:8px;
    color: #FFFFFF; 
    background: #006400;
    margin-top: 10px;
    margin-right: 15px;
}


.footer {
    top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}


#senaraicardetail {
	width:100%; 
	height:auto;
	background-color:#FFFFFF;
    border-radius:5px;
    margin-left: 25px;
    margin-top: 30px;
    color: #000000;
    border: #F80004 solid 1px;
    
    padding-bottom: 30px;
}
#senaraicardetail:hover { 
	width:100%;  
	height:auto; 
	background-color:#FFFFFF;
    border-radius:5px;
    margin-left: 25px;
    margin-top: 30px;
    color: #000000;
    padding-bottom: 30px;
    
}



#addonkiri {
    float: left;
    width: 35%;
}
#addonkanan {
    float: right;
    width: 64%;
    margin-top: 30px;
    margin-right: 8px;
    border-radius:8px;
    background-color: #000000;
    
}
#addonkanan2 {
    float: right;
    width: 60%;
    margin-top: 10px;
    margin-right: 20px;

    
}

#kiraanbox {
    width: 100%;
    color: #FFFFFF;
}
#kiraanbox h2 {
    color: #FFFFFF;
    padding-left: 20px;
}

#kiraanbox2 {
    width: 100%;
    color: #FFFFFF;
    border-radius:8px;
    background-color: #000000;
    
}
#kiraanbox2 h2 {
    color: #FFFFFF;
    padding-left: 20px;
}
#kiraanbox3 {
    width: 100%;
    color: #FFFFFF;
    border-radius:8px;
    background-color: #000000;    
    margin-top: 10px;
    padding-left: 30px;
    padding-top: 1px;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

#additemAddon {
    cursor:pointer;
 width:80px;
 height:30px;
 background-image:url(https://www.gogreenmatrix.com/icon/addonAdd.png);
 background-position:left;
 background-repeat:no-repeat;
	padding-left:17px;
 border:none;
}

#additemAddon:hover {
    cursor:pointer;
 width:80px;
 height:30px;
 background-color:#F00;
    color: #FFFFFF;
 background-image:url(https://www.gogreenmatrix.com/icon/addonAdd.png);
 background-position:left;
 background-repeat:no-repeat;
	padding-left:17px;
 border:none;
}

#tolakitemAddon {
    cursor:pointer;
 width:80px;
 height:30px;
 background-image:url(https://www.gogreenmatrix.com/icon/tolakitemicon.png);
 background-position:left;
 background-repeat:no-repeat;
	padding-left:17px;
 border:none;
}

#tolakitemAddon:hover {
    cursor:pointer;
 width:80px;
 height:30px;
 background-color:#F00;
    color: #FFFFFF;
 background-image:url(https://www.gogreenmatrix.com/icon/tolakitemicon.png);
 background-position:left;
 background-repeat:no-repeat;
	padding-left:17px;
 border:none;
}


#boxconti {
	width: 64%;
	height:30px;
	margin-top:10px;
	margin-bottom:10px;
    float: right;
    padding-right: 10px;
}
#continue {
	width:100%;
	font-size:25px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	color:#FFFFFF;
	background-color:#F00;
	border: solid 1px #000000;
}

#continue:hover {
	width:100%;
	font-size:25px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	color:#000000;
	background-color:#FFFFFFF;
	border: solid 1px #000000;
}

#detailbookingbox {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    color: #FFFFFF;
}
#continue2 {
	width:100%;
	font-size:25px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	color:#FFFFFF;
	background-color:#F00;
	border: solid 1px #000000;
    margin-top: 20px;
    margin-left: 20px;
}

#continue2:hover {
	width:100%;
	font-size:25px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	color:#000000;
	background-color:#FFFFFFF;
	border: solid 1px #000000;
}