:root {
    --btn-default-padding:0.5rem;
    --btn-default-bg-color:inherit;
    --btn-default-bg-color-hover:rgba(255, 255, 255, 0.15);
    --btn-default-color:inherit;
    --btn-default-color-hover:inherit;
    
    --btn-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --btn-default-font-weight: inherit;
    --btn-default-border-radius:0.5rem;
    --btn-default-border-size:1px;
    --btn-default-border-color:rgba(255, 255, 255, 0.15);
    --btn-default-border-style:solid;
    --btn-default-cursor-hover:pointer;
    
    --starColor : rgb(255, 200, 54);
    --emptyStarColor :  rgba(255, 255, 255, 0.42);
}

button , button:focus , button:visited , button:active   {
    padding:var(--btn-default-padding);
    background-color:var(--btn-default-bg-color);
    color:var(--btn-default-color);
    
    border-radius:var(--btn-default-border-radius);
    border:var(--btn-default-border-size) var(--btn-default-border-style) var(--btn-default-border-color);
}
button:hover {
    background-color:var(--btn-default-bg-color-hover);
    color:var(--btn-default-color-hover);
    cursor: pointer;
}

.downloadBtn a {
    font-weight: var(--body-font-weight) !important;
    font-family: var(--body-font-family) !important;
    box-shadow: none;
    color: #fff !important;
    opacity: 1 !imporant;
    text-decoration: none;
    background: #32373c !important;
    border-radius: 2em;
    font-size: 13px !important;
    padding: .5em 1em;
}

.downloadBtn a:hover  {
    box-shadow: none;
    opacity: 0.85;
    text-decoration: none;
    background: #43484d !important;
    border-radius: 2em;
    color: #fff;
    font-size: 13px;
    padding: .5em 1em;
}







.star , .halfstar , .emptystar {
    display:inline-flex;
    width:1rem;
    height:1rem;
    position: relative;
    margin-right:0.25rem;
}
.star:before , .halfstar:before , .emptystar:before , .star:after , .halfstar:after , .emptystar:after {
    content:'';
    position: absolute;
    display:block;
    width:100%;
    height:100%;
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
}

.star:before , .star:after , .emptystar:before , .halfstar:before{
    background-color: var(--starColor);
    -webkit-mask-image: url(../img/star.svg);
    mask-image: url(../img/star.svg);
    z-index: 1;
}
.star:after , .emptystar:after , .halfstar:after{
    background-color:var(--emptyStarColor);
    -webkit-mask-image: url(../img/star.svg);
    mask-image: url(../img/star.svg);
    z-index: 0;
}

.halfstar:before{
    -webkit-mask-image: url(../img/halfstar.svg);
    mask-image: url(../img/halfstar.svg);
}

.emptystar:before{
    display:none;
}