/* Mobile View */
@media screen and (max-width: 79.5rem){

.dropdown{
position:absolute;
top:4rem;
left:0;
width:100%;
height:480px;
margin:0;
background:var(--base-background-color);
border:var(--base-border-color) 1px solid;
z-index:99;
border-radius:.25rem;
}

.dropdown .headline{
margin:.25rem 0 0 0;
}

.dropdown .content fieldset{
margin:0;
padding:0;
}


}



/* Desktop View */
@media screen and (min-width: 79.5rem){

.dropdown{
position:absolute;
top:4rem;
right:0;
width:380px;
height:520px;
margin:0;
background:var(--base-background-color);
border:var(--base-border-color) 1px solid;
z-index:500;
border-radius:.25rem;
}

}


.dropdown .header{
float:left;
width:100%;
height:40px;
padding:0 .5rem;
background:var(--asset-background-color);
}

.dropdown .content{
float:left;
width:100%;
height:440px;
margin:0;

overflow:paged-x;
}

.dropdown .footer{
position:absolute;
bottom:0;
width:100%;
height:40px;
margin:0;
}

.dropdown .footer{
display:flex;
justify-content:center;
align-items:center;
}

.dropdown .title{
display:inline-block;
width:100%;
}

.dropdown .headline{
float:left;
width:calc(100% - 3.25rem);
}

.dropdown .headline h2{
font-size:var(--l-font-size);
}

.dropdown .btn_close.icon{
float:right;
margin:.45rem 0;
}

.dropdown .box{
float:left;
width:100%;
height:100%;
margin:0;
padding:0 .5rem;
display:none
}

.dropdown .box:first-of-type{
display:block
}



/* Mobile View */
@media screen and (max-width: 79.5rem){

#login-wrapper{
position:relative;
}

#login{
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
overflow:hidden;
cursor:pointer;
}

#login p{
width:2.5rem;
margin:0;
padding:0;
/*
border:1px #FF00FF solid;
background:#0FF000;
*/
top:0;
left:0;
position:relative;
z-index:2;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

#login-wrapper{
position:relative;
}

#login{
display:block;
width:3rem;
height:3rem;
position:relative;
overflow:hidden;
margin:0 1.5rem 0 0;
}

#login p{
height:3rem;
margin:0;
padding:0;
/*
border:1px #FF00FF solid;
background:#0FF000;
*/
top:0;
left:0;
position:relative;
z-index:2;
}

}

#login{
background:url('/asset/img/login/off.svg') no-repeat top left;
}

#login:hover{
background:url('/asset/img/login/on.svg') no-repeat top left;
}

#login.on{
background:url('/asset/img/login/on.svg') no-repeat top left;
}



#login p span{
display:block;
width:100%;
margin:0 0 0 10em;
}

#login .info{
display:flex;
justify-content:flex-end;
align-items:center;

min-width:1.25rem;
height:1.25rem;
background:var(--light-theme-color) url('/asset/img/login/non-active.svg') no-repeat center center;
position:absolute;
bottom:0;
right:0;
border:2px solid var(--light-border-color);
border-radius:50%;
z-index:1;
}

#login.on .info{
background:var(--light-theme-color) url('/asset/img/login/active.svg') no-repeat center center;
}

#login .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:.65rem;
text-align:center;
color:#FFF;
}

.protected,
#site-login-wrapper{
position:relative;
display:block;
background:var(--asset-background-color);
}


/* Mobile View */
@media screen and (max-width: 79.5rem){

.protected{
display:block;
margin:.5rem .75rem;
padding:.5rem 1rem;
border:var(--asset-border-color) 1px solid;
}

#site-login-wrapper{
position:relative;
float:left;
width:100%;
min-height:10rem;
margin:1.5rem 0;
padding:0;
}

#site-login-wrapper .content,
#site-login-wrapper form{
margin:0;
padding:0 .15rem;
}

.protected,
#site-login-wrapper{
border-radius:.5rem;
}

.protected:before{
position:absolute;
top:-.75rem;
left:-.75rem;
display:block;
content:'';
width:1.5rem;
height:1.5rem;
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

.protected{
display:block;
margin:.5rem 0;
padding:.5rem 1rem;
border:var(--asset-border-color) 1px solid;
}

#site-login-wrapper{
float:left;
width:100%;
min-height:10rem;
margin:1.5rem 0;
padding:.5rem 1rem;
}

.protected,
#site-login-wrapper{
border-radius:1rem;
}

#site-login-wrapper:before{
position:absolute;
top:-1rem;
left:-1rem;
display:block;
content:'';
width:2rem;
height:2rem;
}

#site-login-wrapper:before{
background:url('/asset/img/login/icon.svg') no-repeat top left;
transform: scaleX(-1);
}

.protected:before{
position:absolute;
top:-.75rem;
left:-.75rem;
display:block;
content:'';
width:1.5rem;
height:1.5rem;
}

}

.protected:before{
background:url('/asset/img/login/icon.svg') no-repeat top left;
transform:scaleX(-1);
}

#site-login-wrapper .box{
float:left;
width:100%;
height:100%;
margin:0;
padding:0 .5rem;
display:none
}

#site-login-wrapper .box:first-of-type{
display:block
}


#site-login-wrapper .footer{
float:left;
width:100%;
min-height:2rem;
}

#site-login-wrapper .footer{
display:flex;
justify-content:center;
align-items:center;
}