/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#bookmark_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#bookmark_listing > article{
float:left;
width:18rem;
min-width:13rem;
margin:1rem 0 1rem 0;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

#bookmark_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#bookmark_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .5rem 1rem .5rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

#bookmark_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#bookmark_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

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

#bookmark_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#bookmark_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}




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

#bookmark{
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
overflow:hidden;
cursor:pointer;
margin:0 .25rem 0 0;
border:#ff0000 0px solid;
}

#bookmark 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){

#bookmark{
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
overflow:hidden;
margin:0 .45rem 0 0;
}

#bookmark p{
width:3rem;
margin:0;
padding:0;
top:0;
left:0;
position:relative;
z-index:2;
}

}

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

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

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

#bookmark .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1.25rem;
height:1.25rem;
background:var(--base-background-color);
position:absolute;
top:0;
right:0;
border:2px solid var(--base-background-color);
border-radius:50%;
z-index:1;
}

#bookmark .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:var(--base-font-color);
}

/*
.bookmark_total{
display:block;
width:3rem;
height:3rem;
position:relative;
overflow:hidden;
margin:0 .5rem 0 0;
}

.bookmark_total .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1.25rem;
height:1.25rem;
background:var(--light-theme-color);
position:absolute;
bottom:0;
right:0;
border:2px solid var(--light-border-color);
border-radius:50%;
z-index:1;
}
*/

.bookmark_total{
float:left;
}

.bookmark_total:before{
float:left;
display:inline-block;
content:'';
width:1.25rem;
height:1.25rem;
background:url('/asset/img/bookmark/total/off.svg') no-repeat center right;
}

.bookmark_total.on:before{
background:url('/asset/img/bookmark/total/on.svg') no-repeat center right;
}

.bookmark_total .info{
float:left;
align-items:center;
min-width:1.25rem;
height:1.25rem;
}

.bookmark_total .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:var(--l-font-size);
text-align:center;
}



/* Bookmark Button */
.bookmark{
grid-area:bookmark;
display:block;
width:100%;
height:auto;
}

.bookmark .bookmark-wrapper{
margin:.5em 0;
}

.bookmark .bookmark-wrapper{
display:flex;
justify-content:flex-end;
align-items:center;
width:auto;
height:auto;
}


.btn_bookmark.text,
.btn_bookmark.text.on{
display:flex;
justify-content:flex-end;
align-items:center;
width:auto;
height:3rem;
margin:0 .75em 0 0;
padding:0;
border:0;
background:none;
}

.btn_bookmark.text .icon,
.btn_bookmark.text.on .icon{
margin:0 0 0 .5rem;
width:3rem;
height:3rem;
}



.btn_bookmark.text .icon,
.btn_bookmark.text .icon.update,
.btn_bookmark.text .icon.update:hover{
background:url('/asset/img/bookmark/btn/text/off.svg') no-repeat center right;
}

.btn_bookmark.text:hover .icon{
background:url('/asset/img/bookmark/btn/text/hover.svg') no-repeat center right;
}

.btn_bookmark.text.on .icon{
background:url('/asset/img/bookmark/btn/text/on.svg') no-repeat center right;
}


.btn_bookmark.text span{
color:var(--base-font-color);
font-size:var(--m-font-size);
font-weight:bold;
text-transform:uppercase;
}

.btn_bookmark.text strong{
display:none;
}

.bookmark-wrapper{
float:right;
width:auto;
height:auto;
margin:0;
padding:0;
}


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

.bookmark-wrapper .button.icon{
float:left;
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
}

.btn_bookmark.icon{
display:block;
margin:0;
padding:0;
width:1.75rem;
height:1.75rem;
border:0;
}

}

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

.bookmark-wrapper .button.icon{
float:left;
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
}

.btn_bookmark.icon{
display:block;
margin:0;
padding:0;
width:1.75rem;
height:1.75rem;
border:0;
}

}

.bookmark-wrapper .button.icon{
display:flex;
justify-content:center;
align-items:center;
}

.btn_bookmark.icon,
.btn_bookmark.icon.update,
.btn_bookmark.icon.update:hover{
background:url('/asset/img/bookmark/btn/icon/off.svg') no-repeat center center;
}

.btn_bookmark.icon:hover{
background:url('/asset/img/bookmark/btn/icon/hover.svg') no-repeat center center;
}

.btn_bookmark.icon.on{
background:url('/asset/img/bookmark/btn/icon/on.svg') no-repeat center center;
}

.btn_bookmark.icon span,
.btn_bookmark.icon strong{
display:none;
}


.btn_bookmark_delete.icon{
width:1.75rem;
height:1.75rem;
border:0;
}


.btn_bookmark_delete.icon{
background:url('/asset/img/bookmark/btn/delete/icon/off.svg') no-repeat top left;
}

.btn_bookmark_delete.icon.on{
background:url('/asset/img/bookmark/btn/delete/icon/on.svg') no-repeat top left;
}

.btn_bookmark_delete.icon.on:hover{
background:url('/asset/img/bookmark/btn/delete/icon/off.svg') no-repeat top left;
}


.btn_bookmark_delete.icon span,
.btn_bookmark_delete.icon strong{
display:none;
}




/* Listing */
#bookmark_list header{
padding:.75rem;
}

#bookmark_list .card{
display:none;
}

#bookmark_list .card:first-child{
display:block;
}


.btn_bookmark_preview_delete.icon{
width:1.75rem;
height:1.75rem;
border:0;
}

.btn_bookmark_preview_delete.icon{
background:url('/asset/img/bookmark/btn/icon/off.svg') no-repeat top left;
}

.btn_bookmark_preview_delete.icon.on{
background:url('/asset/img/bookmark/btn/icon/on.svg') no-repeat top left;
}

.btn_bookmark_preview_delete.icon.on:hover{
background:url('/asset/img/bookmark/btn/icon/off.svg') no-repeat top left;
}


.btn_bookmark_preview_delete.icon span,
.btn_bookmark_preview_delete.icon strong{
display:none;
}




/* Preview */
/*
#bookmark_preview{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:auto;
margin:0 0 2rem 0;
padding:0;
background:linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(255,255,255,1) 70%);
border-bottom:var(--base-border-color) 1px solid;
overflow:auto;
}

#bookmark_preview .content{
display:flex;
justify-content:center;
align-items:center;
width:auto;
margin:0;
padding:2rem 0;
}


#bookmark_preview .card{
display:block;
margin:0 .75rem;
padding:0;
background:var(--base-background-color);
border-radius:.5rem;
position:relative;
}

#bookmark_preview .card .profile{
display:block;
height:246px;
}

#bookmark_preview .card .bookmark-wrapper{
display:block;
margin:0;
padding:0;
position:absolute;
top:.5rem;
right:.5rem;
z-index:2;
}

#bookmark_preview .card .media img{
width:12rem;
height:auto;
}

#bookmark_preview .card .media figure{
background:url('/asset/img/database/media/bg.svg') no-repeat bottom center;
}

#bookmark_preview .card .media figure img{
background:url('/asset/img/database/media/img/bg.svg') no-repeat bottom center;
}
*/


/* Preview */
#bookmark_preview .text{
float:left;
width:20rem;
margin:0;
padding:0;
text-align:center;
}

#bookmark_preview{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:20rem;
margin:0 0 0 0;
padding:1rem 0;
background:linear-gradient(0deg, rgba(241, 241, 241, 1) 0%, rgba(255, 255, 255, 1) 80%);
border-bottom:var(--base-border-color) 1px solid;
overflow-x:auto;
scrollbar-width:none;
}

#bookmark_preview .content{
display:flex;
justify-content:center;
align-items:center;
width:min-content;
margin:0;
padding:0;
}

#bookmark_preview .card{
display:block;
margin:0 .75rem;
padding:0;
background:var(--base-background-color);
border-radius:.5rem;
position:relative;
}

#bookmark_preview .card .bookmark-wrapper{
display:block;
margin:0;
padding:0;
position:absolute;
top:.5rem;
right:.5rem;
z-index:2;
}

#bookmark_preview .card .media img{
width:12rem;
height:auto;
}