/* ------------- CSS MIX + Version 1-125 ------------- */

.div_controller {
  position: relative;
  width:  80%;
  padding: 1.5rem;
  background-color: #f9f9fb;
  /*background-image: linear-gradient(225deg, #005daa 0%, #a66e02 80%);*/
	transition: all .5s ease-in-out;
	margin-left:10%;
	margin-right:5%;
	box-shadow: 0px 0px 15px 5px rgba(200, 200, 200,0.5);
}

.box-shadow-booking {
  padding: 1rem ;
  position: relative;
  background-color:#fff;
  z-index: 9;
	box-shadow: 0px 5px 10px 5px rgba(40, 40, 40,0.5);
	transition: all .5s ease-in-out;
}


input[type=text], input[type=number] ,select , textarea  {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  /*border-radius: 4px;*/
  /*background-image:linear-gradient(241deg, #00000087 0%, rgb(242 242 242 / 62%) 10%);*/
  border-bottom: 0.3rem solid #999;
	font-size: 16px;
}

input[type=text], input[type=number] ,select , textarea:focus {
   /* background-color: #ffc10721; */
   border-bottom: 0.2rem solid #976d0e;
}

select>option {
    font-weight: normal;
		padding: 16px;
	  height:30px;
}

.select-items {
			font-size: 16px;
			font-weight:800;
		padding: 16px;
		position: absolute;
    background-image:linear-gradient(35deg, #daab1c80 -5%, #eecc4630 45%);
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
	  height:30px;
		transition: width 0.4s ease-in-out;
  /* border: 2px solid #09F;*/
 }

input[type=date], input[type=time] {
	border-top:none;
	border-left:none;
	border-right:none;
	border-botton: 2px solid #999;
  padding: 10px 20px; 
  margin: 5px;
  display: inline-block;
  background-image:linear-gradient(35deg, #daab1c80 -5%, #eecc4630 45%);
	font-size: 16px;
	font-weight:800;
	transition: width 0.4s ease-in-out;
}

input[type=date] {
  float: left;
  width: 50%;
}

input[type=time] {
  width: 40%;
}

/*
input[type=button]{
  width: 100%;
  background-color: #1ACCFF;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #45a049;
  border-radius: 6px;
}
*/


#frm_booking_about {
		font-family: Trebuchet MS;
		font-size: calc(100% - 2px);
		padding-left: 5px;
		text-transform: uppercase;
}


.frm_booking  {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px; 		
}

.col-25  {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75  {
  float: left;
  width: 75%;
  margin-top: 6px;
}


	#wd_grad_conic {
		height: 200px;
		width: 200px;
		background-color: red; /* For browsers that do not support gradients */
		background-image: conic-gradient(from 90deg,red, yellow, green, blue, black);
		border-radius: 50%;
		opacity:1;
		animation: wd_grad_move 5s infinite;	 
	}
	
	@keyframes wd_grad_move {
		20% {opacity:0.5;} 
		50% {opacity:0.8;} 
		70% {rotate:360deg;} 
	}	
		
@media screen and (max-width: 968px) {
			.div_controller{
				position: relative;
				width:  100%;
				padding: 1rem;			
				text-align: center;
				margin: 10px;
				left:0px;
				box-shadow: 0px 0px 0px 0px rgba(200, 200, 200,0);
		}	 	
}

/* Responsive layout - when the screen is less than 768 wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
			.div_controller{
				position: relative;
				width:  102%;
				padding: 0.5rem;			
				text-align: center;
				margin:0px;
				left:0px;
				box-shadow: 0px 0px 0px 0px rgba(200, 200, 200,0);
		}	 
		
			input[type=date] {
				width: 100%;
			}

			input[type=time] {
				width: 100%;
			}
	
		.col-25, .col-75, input[type=button]  {
			width: 100%;
			margin-top: 0;
		}

		.frm_booking{ 
				width:100%;
				margin: 0px;
				left:0px;
		}	 
		
}

/*  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - -  - - - >>
background-image: linear-gradient(225deg, #005daa 0%, #a66e02 80%);
transition: all .5s ease-in-out; */