* {box-sizing: border-box;}

body { 
    font-family:Verdana, Geneva, Tahoma, sans-serif; font-size: 13px;
}

.booking-content {
  max-width: 1000px;
	margin:auto;
}

h1 {text-align: center;}

.boxsdw { box-shadow: 0px 0px 10px #CCC;}

.inline { display: inline-block;}

.w50 { width : 49%; display: inline-block; 
        box-sizing: border-box; }

.w30 { width : 32%; display: inline-block; 
       box-sizing: border-box; }

.w66 { width : 66%; display: inline-block; 
      box-sizing: border-box; }

.space50 {height:50px}

.hr1 {
    width:60%; color:var(--clr); 
    margin-top: 30px; margin-bottom: 30px;
}

.divform {
    border-radius: 5px; 
    padding: 20px; 
    background-color: #f6f6f6;        
}



.input-div {  /*  define position abs for labels  */ 
position: relative;
margin-top: 10px;

}

label {
  color:#997500; background-color: #fff;
  border-radius: 15px;
  padding-left: 10px; padding-right: 10px;
  font-size: 12px; 
  position: absolute;
  top: 0px; left: 10px; }


input[type=text], select {
    width: 96%;    padding: 12px 20px;
    margin: 8px 0;    display: inline-block;
    border: 1px solid var(--clr);
    border-radius: 4px;
    box-sizing: border-box;
    font-family:Verdana, Tahoma, sans-serif; font-size: 15px; 
    color : #000cb1;
    background-color: #fff;
    text-align: left;
  }

  input::placeholder {
    color: #AAA;
    opacity: 0.5;
  }
  
input[type=radio] {
  height:20px; width:20px;
  color:#FFC000;
  accent-color: rgb(236, 109, 25);
  vertical-align:text-bottom;
  
}

.nextbutton {
  width: 100%; 
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
    .nextbutton:hover {background-color: #45a049;}



.div-car-type {
  border:1px solid #FFC000;
  border-radius: 15px;
  text-align: center;
}

.div-recap {
  border:1px solid #FFC000;  border-radius: 15px;
  padding: 20px;   text-align: center;
}

.recap-content {
  position:fixed; width:100%; left:0px; bottom:0px; 
  background-color: #970; color: #fff;
  text-align: center;  padding: 10px; 
  font-size: 15px;  
}








/*   SUBMIT */

  input[type=submit] {
    width: 100%;
    background-color: #01aa4d;
    color: #FFF; 
    font-size: 15px;  font-weight: 600;
    padding: 14px 20px;     margin: 8px 0;
    border: none;     border-radius: 4px;
    box-shadow: 3px 0px 5px #999;
    cursor: pointer; transition: 0.3s;
  }
  
  input[type=submit]:hover {
    background-color: #FFC000;
    color: #333;
    box-shadow: 3px 0px 10px #666;
  }
  




  /*   vehicle select radio */
  
#car-type {

  span {color:#b1884b}

  ul {    list-style-type: none;  }
  
  li {    display: inline-block;  }
  
  input[type="radio"][id^="car"] 
             {    display: none;    }
  
  label {
    border: 1px solid #EEE;
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
  }
  
  label:before {
    background-color: white;
    color: white;
    content: " ";          display: block;
    border-radius: 50%;    border: 1px solid grey;
    position: absolute;    top: -5px;    left: -5px;
    width: 25px;           height: 25px;
    text-align: center;    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
  }
  
  label img {
    height: 100px;
    width: 130px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }
  
  :checked + label {
    border-color: #FFC000;
  }
  
  :checked + label:before {
    content: "✓"; font-weight: 900;
    background-color: #FFC000;
    transform: scale(1.5);
  }
  
  :checked + label img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
  } 

}   
    /* End   vehicle select radio */