/*
    Created on : Jun 19, 2018, 9:29:32 PM
    Author     : Zuyas
*/

.book {
    width: 100px;
    height: 160px;
    background-position: center;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    padding: 0;
    float: left;
    margin: 5px;
    position: relative;
    display: inline-block;
}

.book > progress {
    width: 100px;
    height: 17px;
    margin-top: 143px;
    border-top: 1px solid #e7e7e7;
    opacity: 0.7
}

progress {
    color: #2ecc71; /* bar color (only IE) */
    background-color: #ffffff; /* background color (IE and FF) */
    border: 0;
}

progress::-moz-progress-bar {
    background: #2ecc71; /* bar color (for FF) */
}

progress::-webkit-progress-bar {
    background-color: #ffffff;  /* bar color (for Chrome) */
}

progress::-webkit-progress-value {
    background-color: #2ecc71;   /* background color (for Chrome) */
}

progress:after {
    content: attr(value) ' / ' attr(max);
    color: #000;
    top: -18px;
    position: relative;
}

.book .tooltiptext {
    visibility: hidden;
    background-color: #111;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    display: inline-block;
    padding: 5px 5px 5px 5px;
    width: 120px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 105%;
    left: 50%;
    margin-left: -60px;
}

.book .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #111 transparent;
}

.book:hover .tooltiptext {
    visibility: visible;
}