﻿
.filter-box 
{
	width:100%;
	.box-sizing();	
	padding:15px;
	margin-bottom:15px;
	position:relative;
	@pv-template-filterbox();

    h2 
    {

		@pv-template-filterbox-h2();
    }

	& > span 
    {
		margin-top:5px;
		margin-bottom:5px;
		display:inline-block;
		@pv-template-filterbox-span();
	}

	ul.travelparty
    { 
		float:left;
		clear:both;
		width:100%;

        & > li 
        {
		    width:32%;
		    float:left;
		    .box-sizing();
		    margin-right:2%;
			@pv-template-filterbox-travelparty-li();
	
		    &:last-child { margin-right:0; }
        }

	    li 
        {
		    position:relative;

	        a 
            {
		        display:inline-block;
		        width:100%;
		        height:100%;
		        .box-sizing();
				.border-radius(5px);
		        padding:5px;
		        color:#000;
		        text-decoration:none;
				@pv-template-filterbox-travelparty-a();

                & > span 
                {
                    display:inline-block !important;
                }

                &.active 
                {
					@pv-template-filterbox-travelparty-a-active();
                }
	        }

            .arrow 
            {
                position:absolute;
                left:40%;
                display:none;
				border:none;
            }

            .active  + .arrow 
            {
                display:block;
				bottom:-14px;

				&::before
				{
					content:'';
					display:block;
					border-style: solid;
					border-width: 16px 11px 0 11px;
					border-color: #e2d807 transparent transparent transparent;
					position:absolute;
					left:-11px;
					top:-15px;
					z-index:1;
				}

				&::after
				{
					content:'';
					display:block;
					border-style: solid;
					border-width: 15px 10px 0 10px;
					border-color: #fff transparent transparent transparent;
					position:absolute;
					left:-10px;
					top:-15px;
					z-index:2;
				}
            }

            .ico_travelers 
            {
                width:60px;
				.box-sizing();
				padding:5px;
				@pv-template-filterbox-travelparty-li-icotravelers();
            }
	    }
    }

    ul.filters 
    {
	    width:100%;
		float:left;
		clear:both;
		margin-top:20px;
		margin-bottom:5px;

	    li 
        {
		    float:left;
			@pv-template-filterbox-filters-li();

		    span 
            {
			    margin-bottom:5px;
			    display:block;
				@pv-template-filterbox-filters-li-span();
		    }

		    select 
            {
				@pv-template-filterbox-filters-li-select();
		    }
        }
    }

	.sort 
    {
		position:absolute;
		bottom:4px;
		height:30px;
		.box-sizing();
		
		@pv-template-filterbox-sort();

		li 
        {
			float:left;
			margin-right:15px;
			line-height:30px;

			&.title span
			{
				font-weight:bold;
			}

			a 
            {
				text-decoration:none;
                color: #000;

			    &.active 
                {
				    padding-bottom:20px;
			        color: @color-text-accent;
			        background: url(img/base/elements/pc/lastmin_pijl_geel.png) no-repeat center bottom;
					@pv-template-filterbox-sort-link-active();
		        }
			}
		}
	}

}

.arrow 
{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
}