@charset "utf-8";
/* CSS Document */

#routeContainer
{
height:100vh;
min-height:500px;
width:100%;

position:relative;
	
}
#routeContainer .routeContainerInner
{

width:100%;
height:calc(100% - 80px);

max-height:700px;
    border: 1px solid #efefef;
    box-sizing:border-box;
display:flex;
flex-direction:column;		
    
	position:relative;

}
#routeContainer .routeContainerInner.leafClose  #routeMap
{
height:65%;
width:100%;
transition:all ease-out 0.4s;	
}
#routeContainer .routeContainerInner.leafOpen #routeMap
{
	height:100%;
	width:100%;
}
#routeContainer .leaf
{

height:45%;
background-color:#fff;
position:relative;
transition:all ease-out 0.4s;
width:100%;

}

#routeContainer .routeContainerInner.leafOpen .leaf
{

	
}
#routeContainer .routeContainerInner.leafClose .leaf

{
	
bottom:50px;	
}
#routeContainer .leaf::before
{
position:absolute;

top:-35px;
height:35px;
width:100%;
content:" ";
display:block;
pointer-events:none;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);	
}
#routeContainer .leafController
{
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background-color:#ffcc00;
z-index:20;	
}
#routeContainer .leafController a
{
display:block;
width:50px;
height:50px;	
}

#routeContainer .routeContainerInner.leafOpen .innerData
{
	opacity:1;
	transition:opacity ease-out 0.3s;
}
#routeContainer .routeContainerInner.leafClose .innerData
{
	opacity:0;
		transition:opacity ease-out 0.3s;
		
}
#routeContainer .tabController {
    display: flex;
   
}
#routeContainer .tabController .tab
{
flex:1;	
}
#routeContainer .tabController .tab a {
    margin-bottom: 0;
    border:3px solid #ffffff;
	text-align:center;
}
#routeContainer .tabController .tab a {
    display: block;
    padding: 12px 18px;
    font-size: 18px;
    background-color: #efefef;
    font-weight: 300;
    margin-bottom: 5px;
}

/* existing styles */
#routeContainer .tabController .tab.active a {
    background-color: #009dd0;
    font-weight: 500;
    color: #fff;
}
#routeContainer .innerData
{
padding-left:15px;	
}
#routeContainer .innerData div.stop,
#routeContainer .innerData div.path
{
padding:5px 15px 10px 45px;

}
#routeContainer .innerData .stop
{
background-image: url(../img/sailing-moore-icon.svg);
    background-position: center left;
    background-repeat: no-repeat;
      background-size: 30px 30px;
	background-position:5px 8px;
   
    color: #666;	
}
#routeContainer .innerData .path
{
background-image: url(../img/sailing-route-icon.svg);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 30px 30px;
	background-position:5px 8px;
 
    color: #666;	
}
/* end existing styles */

#routeContainer .dataWrap
{

padding-top:20px;
position:relative;
padding-bottom:20px;
box-sizing:border-box;
height:100%;
}
#routeContainer .innerData
{

position:absolute;
top:10px;
left:0px;
right:10px;
bottom:20px;
overflow-y:auto;
	
}
#routeContainer .dataWrap div
{
font-size:18px;

border:1px solid transparent;	
}
#routeContainer .dataWrap h2.title
{
font-size:16px;
/*color:#009dd0;*/
color:#162e50;
font-weight:bold;
margin:0;
padding:0 0 3px 0;	
}
#routeContainer .dataWrap h2.title span
{
display: inline-block;
    border-top-width: 5px;
    border-top-style: solid;
    width: 25px;
    vertical-align: middle;
    margin-left: 5px;	
}
#routeContainer .dataWrap .descriptor
{
color:#999;
font-size:14px;	
}
#routeContainer .dataWrap .rdmLink
{
padding-top:3px;	
}
#routeContainer .dataWrap .rdmLink a
{
font-size: 14px;
font-weight:500;	
}
#routeContainer .dataWrap div:hover
{
cursor:pointer;	
}
#routeContainer .dataWrap .highlightStop,
#routeContainer .dataWrap .highlightPath
{

border:1px solid #009dd0;
}
#routeContainer .dataWrap .highlightStop h2.title,
#routeContainer .dataWrap .highlightPath h2.title{
color:#162e50;	
}
#routeContainer .dataWrap .highlightStop .descriptor,
#routeContainer .dataWrap .highlightPath .descriptor{
color:#000;	
}
#routeContainer .innerData.off
{
display:none;	
}
#routeContainer .routeContainerInner.leafOpen .leaf .path.mobSel
{
display:block;	
}
#routeContainer .routeContainerInner.leafOpen .leaf .stop.mobSel
{
display:block;	
}
#routeContainer .routeContainerInner.leafOpen .leaf .stop,
#routeContainer .routeContainerInner.leafOpen .leaf .path
{
/*display:none;	*/
}
@media(min-width:768px)
{
	#routeContainer .routeContainerInner.leafClose  #routeMap
{
height:100%;
}
#routeContainer .routeContainerInner
{

}
	#routeContainer .innerData
	{
	width:100%;	
	top:10px;
left:0;
	}
	#routeContainer .routeContainerInner
	{
	display:flex;
	flex-direction:row;		
	}
	#routeContainer .routeContainerInner.leafClose .leaf
{
top:auto;
bottom:auto;
height:auto;
position:relative;	
}
#routeContainer .routeContainerInner .leaf .path,
#routeContainer .routeContainerInner .leaf .stop
{
	display:block!important;
}
	#routeContainer .routeContainerInner.leafOpen .leaf .stop.mobSel,
#routeContainer .routeContainerInner.leafOpen .leaf .path.mobSel,
	#routeContainer .routeContainerInner.leafClose .leaf .stop.mobSel,
#routeContainer .routeContainerInner.leafClose .leaf .path.mobSel
{
display:block;	
}
/* existing styles */

#routeContainer .routeContainerInner.leafClose  #routeMap
{
flex:1;
transition:all ease-out 0.4s;	
}
#routeContainer .routeContainerInner.leafOpen #routeMap
{
flex:1 0 20%;	
}


#routeContainer .routeContainerInner
{
display:flex;


}


/* end existing styles */
#routeContainer .leaf::before
{
position:absolute;
left:-35px;
top:0;
bottom:0;
height:100%;
width:35px;
content:" ";
display:block;
pointer-events:none;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);	
}
#routeContainer .routeContainerInner.leafOpen .leaf
{
	flex:1 0 40%;
	top:auto;
	bottom:auto;
}
#routeContainer .routeContainerInner.leafClose .leaf
{
flex:0 0 50px;	
}
#routeContainer .routeContainerInner.leafClose  #routeMap
{
flex:1;

}
#routeContainer .routeContainerInner.leafOpen #routeMap
{
flex:1 0 60%;	
}	


#routeContainer .leaf
{
flex:1 0 10%;
height:100%;

background-color:#fff;
position:relative;
transition:all ease-out 0.4s;

}
}