﻿.search-fluid-popup 
{
	border:1px solid @pv-searchfluidpopup-border-color;
	background:@pv-searchfluidpopup-background; 
	min-height:400px;
	position:relative;
	z-index:1005;
	width:~"calc(100%)";
	margin-left:0;
	margin-top:10px;
	border-radius: 8px;
    cursor: default;
	.box-sizing();
	padding:@pv-searchfluidpopup-padding;
    float:left;

    @pv-fluidpopup();

	.fluid-close 
    {
		right:0;
		top:5px;
		position:absolute;
		cursor:pointer;
		font-size:20px;
		line-height:28px;
		@pv-fluidpopup-close();
	}

	.triangle 
    {
        display:block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14px 13px 14px 0;
        border-color: transparent @pv-searchfluidpopup-triangle-color transparent transparent;
        position:absolute;
        top:101px;
        left:-13px;
        z-index:1003;
        @pv-searchfluidpopup-triangle();
	}

	.triangle-border 
    {
        display:block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 14px 15px 0;
        border-color: transparent @pv-searchfluidpopup-border-color transparent transparent;
        position:absolute;
        top:100px;
        left:-14px;
        @pv-searchfluidpopup-triangle();
	}

    &.transport
    {
	    .triangle { top:291px; }
	    .triangle-border { top:290px; }

        h3 {
            margin-bottom: 30px;
        }

        h4 {
            margin-bottom: 5px;
        }

        .black {
            float:left;
            margin-bottom: 10px;
        }

        .Vervoerstype {
            float:left;
            width:195px !important;
            margin-bottom: 10px;
			@pv-searchfluidpopup-transport();
        }
    }

    &.departuredate
    {
	    .triangle { top:181px; }
	    .triangle-border { top:180px; }
    }

    &#travelparty-container
    {
        .triangle { top:58px;left:-23px; }
	    .triangle-border { top:57px;left:-24px; }
    }

    .header
    {
        h3
        {
		    @header-default();
            @pv-searchfluidpopup-header();
        }
    }

    .content-box
    {
        float:left;
        width:100%;
    }

    .fluid-content
    {
        float:left;
        width:100%;

	    label,
	    h4 
        {
		    font-size:14px;
	    }

		h4
		{
			@pv-searchfluidpopup-h4();
		}

        label.black
        {
			@header-small();
            @pv-searchfluidpopup-black();
        }
    }

	.select-wrapper-fluid 
    {
		position:relative;
		border-right:none;
		width:310px;
		float:left;

		&::before 
        {
			
			content:'';
			font-weight:bold;
			color:#000;
			position:absolute;
			left:8px;
			bottom:6px;
			z-index:10;font-size:16px;
			pointer-events:none;
		}
    }

	.content 
    {

	    .checkbox 
        {
		    float:left;
		    width:100%;
			margin-bottom:5px;
			@pv-custom-checkbox();

	        input 
            {
		        margin:1px 10px 0 1px;
		        height:20px;
		        width:20px;
            }

		    label 
            {
		        width: ~"calc(100% - 45px)";
		        line-height:20px;
		        vertical-align:top;
		        cursor: default;
	        }
        }

        .row.header 
        {
            margin-bottom: 20px !important;
    	}
    }

	.dashed-box 
    {
	    border: none;
		border-image: none;
		background: none;
		float:left;
		width:100%;
		.box-sizing();
		padding:0;

		&.departuredate 
        {
			margin-top:10px;
		
		    .select-wrapper-fluid 
            {
    			margin-top:25px;
			    width:100%;

			    label 
                {
				    float:left;
				    margin-right:10px;
				    line-height:30px;
			    }

		    }
        }
	}

    .related-filtergroup 
    {
		float:left;
		padding-top:10px;
		width:100%;

        .list-parent-container
        {
            .column-count(1);

            ul.listed-checkboxes 
            {
                padding-top:5px;
            }
        }

        .list-container
        {
            .column-count(2);
            padding-left:20px;

            &:not(:last-child) 
            {
				padding-bottom:10px;
				@pv-searchfluidpopup-listcontainer-notlastchild();                
            }
        }

		ul.listed-checkboxes 
        {
			width: 100%;
			float: left;
			clear: both;
			padding:0;

		    li.parent 
            {
			    width:100%;
			    float:left;
		    }
        }

		.datepicker-container 
        {
			position:relative;
			z-index:1001;
			float:left;
			clear:both;
			width:100%;
			margin-bottom:10px;
			padding:10px;
			.box-sizing();
		}
    }

	.ui-datepicker-group { width:50%;.box-sizing(); }
	.ui-datepicker-group-first { padding-right:10px; }
	.ui-datepicker-group-last { padding-left:10px; }

    &:not(#travelparty-container) 
    {
	    .select-wrapper-fluid 
        {
		    select 
            {
                padding-left: 35px !important;
			    font-weight:@pv-font-weight-semibold;
                font-size:14px;
		    }

		    &::after 
            {
				position:absolute;
				right:8px;
				bottom:6px;
				pointer-events:none;
		    }
        }

        .dashed-box.departuredate .select-wrapper-fluid
        {
            select 
            {
    		    float:left;
			    max-width:310px;
			    border-color:@pv-fluidpopup-select-border-color; 
			    padding-left:10px !important;
		    }

		    &::after 
            {
			    @pv-fluidpopup-select-after-right();
				
		    }
        }

        select 
        {
		    font-size:14px;
		    width:165px;
		    font-weight:@pv-font-weight-semibold;
		    .border-radius( @pv-fluidpopup-select-border-radius );
		    border-color:@pv-fluidpopup-select-border-color; 
		    position:relative;
		    height:32px;
	    }
    }
}