.shelf {
    line-height: 150px;
    max-width:750px;
    padding: 0px 20px;

    position: relative;
    vertical-align: text-bottom !important;

    
    details {
    padding-right:5px; 
    margin-right:10px;
}


/*--------------------------delete filter drop shadow for details pg?-------------------------------*/

    img {
        filter: drop-shadow(0px 0px 5px black);
        /*min-width: 80px;*/
        height: 120px;
        line-height:1em;
        font-size:12px;
        color:gray;        
    }


/*--------------------------dnf section come back to this..does it go in img or stand alone?-------------------------------*/

.thumbnail .abandoned{
width:100%;padding:2px 0;
text-align:center;
color:#FFFFFF;
font:900 13px 'Signika Negative';
text-transform:uppercase;
letter-spacing:1px;
position:absolute
}
.thumbnail .abandoned{background-color:#FF0000BF;bottom:90px;&::before{content:"DID NOT FINISH"}}

    details,
    details summary,
    summary {
        display: inline-block;
        position: relative;
        
        line-height: 0 !important;
        vertical-align: top;
        margin-top:10px;
    }
}

textarea {
    border: 1px solid var(--blue);
    background: white;
    color:var(--blue);
    border-radius: 2px;
    font-size:12px;
    padding:2px 4px;
    font-family:inherit;
    line-height:.8em;
    height:150px;
    min-width:200px;
    word-break: keep-all;

}


.shelf details[open] {

    .book-info {
        display: block;
        position: absolute;
        background-color:#f55d3e;
        width: 300px;
        height: 220px;
        padding: 10px;
        left: 75px;
        top: 0;
        z-index: 100;
        max-height: 120px;
        margin: 10px;
        overflow-y: scroll;
        overflow-x: hidden;
        font-size: 12px;

        div {
            display: flex;
            align-items: center;
            align-content: center;
            width: 100%;
            border-bottom: 1px solid var(--blue);
            gap: 0px 5px;
            margin: 0;


            >span {
                display: block;
                vertical-align: baseline;
                min-height: 18px;
                padding: 4px 2px;
            }

            span:first-of-type {
                width: 40px;
                font-weight: bold;
                text-align: right;
                color: var(--blue);
                padding: 2px;
                text-transform: uppercase;
                font-size: 11px;
                line-height: .8em;
                letter-spacing: .1em;
            }

            span:last-of-type {
                width: 90px;
                border-left: 1px var(--blue) solid;
                text-transform: capitalize;
                line-height: .8em;
                font-style: italic;
            }

        }

        
        a {
            color: var(--blue);
            display: block;
            text-align: center;
        }
    }

    summary {
        margin-right: 180px !important;
        transition: margin-right .5s;
    }
}

summary {
    max-width:100px !important;
    
    img:hover {
            filter: drop-shadow(0px 5px 5px black);
        }

/*-----------------from melody---------------------------------------
RATING-SECTION-COLORS
--------------------------------------------------------*/
#purple, #blue, #green, #yellow, #orange, #red{padding:3px 0 2px 0;margin:5px 0 3px 0;font-size:16px;font-weight:900;&::before{margin-right:5px}}
#purple{
background-color:#E8DEEECC;
color:rgb(144, 101, 176);
border-bottom:1px dashed rgb(144, 101, 176);
&::before{content:url('img_book-journal/purple-.png')}
}
#blue{
background-color:rgb(211, 229, 239, 0.8);
color:rgb(51, 126, 169);
border-bottom:1px dashed rgb(51, 126, 169);
&::before{content:url('img_book-journal/blue-.png')}
}
#green{
background-color:rgb(219, 237, 219, 0.8);
color:rgb(68, 131, 97);
border-bottom:1px dashed rgb(68, 131, 97);
&::before{content:url('img_book-journal/green-.png')}
}
#yellow{
background-color:rgb(249, 228, 188, 0.8);
color:rgb(203, 145, 47);
border-bottom:1px dashed rgb(203, 145, 47);
&::before{content:url('img_book-journal/yellow-.png')}
}
#orange{
background-color:rgb(250, 222, 201, 0.8);
color:rgb(217, 115, 13);
border-bottom:1px dashed rgb(217, 115, 13);
&::before{content:url('img_book-journal/orange-.png')}
}
#red{
background-color:rgb(255, 226, 221, 0.8);
color:rgb(212, 76, 71);
border-bottom:1px dashed rgb(212, 76, 71);
&::before{content:url('img_book-journal/red-.png')}
}

}