.tour-description-form{
	width: 100%;
	padding: 48px 52px;
	margin: 32px 0 8px 0;
	background-color: var(--c-l80);
	border: 1px solid var(--c-lgrey);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  .trip-description-form{
  position:relative;
	width: 100%;
	padding: 6px 6px;
	margin: 2px 0 8px 0;
  }
  
.tour-form, .booking-trips-form{
	width: 100%;
	padding: 48px 52px;
	margin: 32px 0 8px 0;
	background-color: var(--c-l80);
	border: 1px solid var(--c-lgrey);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom:12px;
}
.row.first-destination { align-items: flex-start; }

.trip-col{
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.trip-col .tbd-option,
.datetime-container .tbd-option {
	top: 50%;
	right: 12px;
	background: #fff;
	font-size: 12px;
	position: absolute;
	transform: translateY(-50%);
}
.tbd-option .main-expl { display: none; }
.tbd-option.is-hidden { display: none !important; }
.tbd-option label {
	margin: 0px !important;
	display: inline-block !important;
}
.tbd-option.is-showing {
	left: 0px;
	right: 0px;
	padding: 10px;
	background: #fff !important;
}
.tbd-option.is-showing label { display: none !important; }
.tbd-option.is-showing .main-expl { 
	display: block;
	padding: 0px 5px; 
	font-size: 14px;
}

.datetime-container { background-position: 12px 50%; }
.trip-start.book .trip-col input.current-date { padding-left: 45px; }

.trip-col button{
	width: 104px;
}

.trip-col.description{
display: flex;
  flex: 1;
  flex-direction: column;
  align-items: right;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}

.hide-row-button{
	border: none;	
	height: 32px;
	width: 32px;
	background-image: url(/assets/images/icons/select.svg);
	background-repeat: no-repeat;
	background-position: 50% 60%;
	margin-top:26px;
	margin-left:-40px;
	margin-right:6px;
	border-radius: 100%;
}

.hide-row-button:hover{
cursor:pointer;
background-color: gray;
background-image: url(/assets/images/icons/select-active.svg);
}

.hide-row-button.closed{ /* https://www.sitepoint.com/css3-transform-background-image/ */
	transform: rotate(270deg);
}
button.upload-image{
	border: none;	
	height: 28px;
	width: 32px;
	background-color: gray;
	background-image: url(/assets/images/upload-image-active.png);
	background-repeat: no-repeat;
	background-size: 32px 28px;
	overflow: auto;
	background-position: 5% 60%;
	text-align: right;
}
button.upload-image:hover{
	cursor: pointer;
	background-color: transparent;
	background-image: url(/assets/images/upload-image.png);
}
.hide-row-button.testies{
	position:absolute;
	left: 0;
}

.trip-col.datetime-container{
   margin-top:17px;
   height: 58px;
}
.trip-col.datetime-container label{
   margin-top:-16px;
}
.trip-col .datetime {
	width: 220px;	 
	padding: 0;
	font-size: 14px;
	margin-top: 15px;
	margin-left: 38px;
	font-family: revert;
	height: 58px;
	border: none;
}

body .trip div .datetime {
	font-size: 14px;
	margin-top: 17px;
	margin-left: 42px;
}

.tour-description-form .image-container {
	display: flex;
	flex-direction: column;
	flex: 3;
}
.description-details {
	display: flex;
	flex-direction: column;
	float: right;
	flex: 2;
}
.tour-theme{
	width: 100%;
	padding-bottom: 12px;
}
.tour-theme select {
	width: 208px;
}
.tour-theme input {
	margin-left:-1px;
	height: 22px;
	width: 208px;
}
.tour-visibility{
	width: 100%;
	padding-bottom: 12px;
}
.tour-visibility select{
	width: 208px;
	margin-left:  -10px;
}
.tour-author{
	width: 100%;
}
.tour-author input{
	width: 208px;
}
 
.search-results {
	position: absolute;
}
.trip-col .widget.period-picker{
  top: 18px;
}
.trip.details .widget{ 
  top: 18px;
}
.trip-return .widget{ 
  top: 18px; 
}

.trip-buttons{
	position: relative;
	margin-top: 6px;
	margin-right: 0;
	margin-bottom: 12px;
	margin-left: auto; 
}
.trip-buttons button{
	display: none;
	padding: 6px 24px;
	background-color: var(--c-l50);
	border: none;
	border-radius: 21px;
	text-decoration: none;
	text-align: center;
	float: right;
}
.trip-buttons button:hover{ 
    background-color: var(--c-d50);
  	color: white;
    cursor: pointer;
}
.remove-trip{
    display: none;
    color: var(--c-dgrey);
    text-decoration: none;
}
.trip-buttons a:hover{
    color: black;
    cursor: pointer;
}

button.post-description{
	display: none;
	padding: 6px 24px;
	background-color: var(--c-l50);
	border: none;
	border-radius: 21px;
	text-decoration: none;
	text-align: center;
	float: right;
	cursor: pointer;
}
button.post-description:hover{  /* for testing -> should only when enabled -> requires js validation  - EJW */
	background-color: var(--c-d50);
	color: white;
}
button.post-description.disabled{ 
	background-color: var(--c-lgrey);
	color: revert;
	cursor: revert;
}
button.post-description.disabled:hover{ 
	background-color: var(--c-lgrey);
	color: revert;
}

.trip-separator{
  margin-top: 42px;
  margin-bottom: 42px;
  width: 100%;
  height: 3px;
  background-color: rgba(0, 2, 5, 0.4);
}

.tour-buttons {
  width: 100%;
  display: flex;
} 
.tour-buttons input {
  display: none;
}
.tour-buttons .right-buttons { 
  margin-left: auto;
}
#cancel_edit { 
  margin-left: 0;
}

/* 
	booking page (bottom of tour.php) travelers button - mimicking KL's design for EW
 */
.image-right {
    padding: 12px 58px 12px 26px;
	background-image: url( /assets/images/next-dark.png );
	background-repeat: no-repeat;
	background-size: 22px 22px;
	background-position: 98px center;
}

.image-right:hover {
	background-image: url( /assets/images/next.png );
}

/* Contortions for the departure/first-arrival section of a tour
   The departure date and location are not part of a tour, but are needed
   to _book_ a tour. - EJW
*/

.tour-form.quick .trip-description {
	display: none;
}

.trip-form {
	margin-top: 64px;
	position: relative;
	width: 80%;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

.trip-col.location input,
.trip-col.location textarea {
	background-image: url(/assets/images/icons/where.svg);
}

.book .trip-col.datetime-container label {
	display:none;
}

.trip-start .node-container.departure {
	display: none;
}

.trip-start.book .node-container.departure {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.trip-start .node-container.arrival {
	display: flex;
	flex-direction: row;
	flex: 1;
	flex-wrap: wrap;
}
.trip-start.book .node-container.arrival {
	display: flex;
	flex-direction: column;
	flex: 1;
	flex-wrap: none;
}

.trip-start.book .node-container .datetime {
	height: 38px;
	margin-top: 16px;
}

.trip-start.book .trip-col.datetime-container {
	margin-top: 6px;
	background-color: var(--c-l100);
}

.trip-start.book .trip-col input.current-date {
	margin-top: 6px;
}

.trip-start .travel-glyph {
	display: none;
}
.trip-start.book .travel-glyph {
	display: flex;
	flex: 0 0 auto!important;
	border: 1px solid #ccc;
	height: 36px;
	width: 36px;
	border-radius: 100%;
	margin-top: auto;
	margin-bottom: auto;
	justify-content: center;
}
.trip-start .travel-glyph img {
	height: 20px;
	width: 20px;
	margin-top: auto;
	margin-bottom: auto;
}

.trip-start label >span.book { /* hide certain labels in booking mode */
	display: none;
}
.trip-start.book label >span.book {
	display: inline-block;
}
.trip-start label >span:not(.book) {
	display: inline-block;
}
.trip-start.book label >span:not(.book) {
	display: none;
}

@media only screen and (max-width: 736px) {

.row {
	flex-direction: column;  /* HACK - EJW */
}

.trip-start.book .first-destination {
	flex-flow: column;
	align-items: unset;
	gap: 16px;
}

.trip-start.book .travel-glyph {
	transform: rotate(90deg);
	align-self: center;
}
}

@media only screen and (max-width: 478px){  /* moved from main.css to reduce clutter - EJW */
    .tour-description-form {
    	padding: 18px 6px;
    }
    .tour-card.horizontal > div > div{
        flex-flow: column;
        gap: 16px;
    }
    .tour-card.horizontal > div > div p:last-of-type{
        text-align: left;
    }
    .tour-card.horizontal > div > div:last-of-type{
        align-items: flex-start;
    }
    .tour-controls{
        flex-flow: column;
        gap: 16px;
    }
    .tour-controls .text-button{
        align-self: flex-end;
    }
    .tour-grid{
        flex-flow: column;
    }
    .tour-form {
    	padding: 18px 6px;
    }

}