.popup-panel{
        display:none;
        position:fixed;
        top :0;
        left:0;
        width:100%;
        height:100%;
        padding:70px;
        background:rgba(0, 0, 0, 0.3);
        font-weight:300;
        z-index:3;
}

.popup-panel .content{
        width:100%;
        height:100%;
        background:#F0EFED;
        padding:5px;
        border:1px solid #888;
        outline:5px solid #F0EFED;
}

.popup-panel .content .header{
        font-size:2vw;
        text-align:center;
        padding:1vw;
        color:#888;
}

.popup-panel .content .header .name{
        font-size:1.25vw;
}

.popup-panel .content .header .slash{
        padding:0 0.5vw;
}

.popup-panel .content .header .arrow{
	color:#b1b1b1;
	cursor:pointer;
	padding:0 3vw;
	font-size:1.5vw;

	-webkit-transition:0.5s color;
		transition:0.5s color;
}
.popup-panel .content .header .arrow:hover{
	color:#333;
}

.popup-panel .content .header hr{
        border-color:#999;
        width:30vw;
        margin-top:0.25vw;
}

.popup-panel .content .main-container{
        width:100%;
        height:calc(100% - 11vw);
        position:relative;
}

.popup-panel .content .main-container .content-container{
        width:100%;
        height:100%;
        overflow:auto;
	border:1px solid #ddd;
	background:#f6f6f6;
}

.popup-panel .content .main-container:after{
        content:'';
        pointer-events: none;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        box-shadow:0px -30px 20px -10px #F0EFED inset;
}

.popup-panel .content .item{
        font-size:1.25vw;
        padding:1vw 0.5vw 0;
}

.popup-panel .content .item .border{
        padding:0.5vw 1.5vw;
        border-radius:0px;
        border:1px solid rgba(0,0,0,0.1);
        background:#e8e8e6;
}

.popup-panel .content .item .border.clickable{
	cursor:pointer;
}

.popup-panel .content .item .border.clickable:hover{
	background:rgba(255,255,255,0.1);
}

.popup-panel .content .item .border.active{
        background:#e4edff;
}

.popup-panel .content .item .article{
        padding-bottom:1vw;
}

.popup-panel .content .item .article-title{
        margin-left:0.25vw;
        margin-top:1vw;
}

.popup-panel .content .item .article-title hr{
        border-color:rgba(0,0,0,0.2);
        margin:0.25vw 0.5vw;
        width:30vw;
}

.popup-panel .content .item .article .article-line{
        font-size:1vw;
        padding:1vw 0.5vw 0;
}

.popup-panel .content .item .article .article-line i{
	padding-right:0.5vw;
}

.popup-panel .content .item .name{
        color:#777;
	text-align:center;
}

.popup-panel .content .item .button{
        color:#ccc;
        cursor:pointer;
	text-align:center;
}

.popup-panel .content .item .border.active .button{
        color:#687EAD;
}

.popup-panel .content .item .value{
	text-align:center;
}

.popup-panel .content .item .arrow{
	cursor:pointer;
	color:#aaa;
	text-align:center;
	padding:0;

        -webkit-transition:0.5s color;
                transition:0.5s color;
}

.popup-panel .content .item .arrow:hover{
	color:#333;
}

.popup-panel .content .item.select-all{
	text-align:center;
}

.popup-panel .content .item.select-all .button{
	color:#777;
	border:1px solid #777;
	border-radius:100px;
	padding:0.5vw 0;
	width:50%;
	margin:auto;

        -webkit-transition:0.5s color, 0.5s background, 0.5s border-color;
                transition:0.5s color, 0.5s background, 0.5s border-color;
}

.popup-panel .content .item.select-all .button:hover{
	background:#7b8dad;
	color:white;
	border-color:white;
}

.popup-panel .content .close-button{
        color:#777;
        width :3vw;
        height:3vw;
        margin:1vw auto;
        text-align:center;
        border:1px solid #666;
        border-radius:100%;
        cursor:pointer;

        -webkit-transition:0.5s color, 0.5s background, 0.5s border-color;
                transition:0.5s color, 0.5s background, 0.5s border-color;
}

.popup-panel .content .close-button:hover{
        border-color:transparent;
        background:#4c6692;
        color:white;
}

.popup-panel .content .close-button i{
        margin-top:0.7vw;
}

.popup-panel .content .close-button-container{
        position:absolute;
        bottom:0;
        left:0;
	padding:0;
        margin-bottom:70px;
	font-size:1.5vw;
}

.popup-panel .content .close-button-container hr{
        border-color:#aaa;
        width:calc(100% - 200px);
}

.popup-panel .image.rounded img{
	border-radius:25px;
	max-height:25vh;
	margin:auto;
	display:block;
}

.popup-panel .filters .item{
	cursor:pointer;
}

.popup-panel .filter-header{
	font-size:1.25vw;
	text-align:center;
	color:#888;
	padding:0.5vw 0 0;
}

.popup-panel .filter-header hr{
	width:30%;
	border-color:rgba(0,0,0,0.1);
	margin:0.25vw auto 0;
}

#settings{
	z-index:2;
}