.gradient-log {
    background: #6a11cb;
    background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
    background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}

.card-counter{
    padding: 0px 10px 0px 20px;
    height: 110px;
    transition: .3s linear all;
    position: relative;
    color: #fff;
}

.card-counter > i{
    font-size: 4em;
}

.card-counter .count-numbers{
    position: absolute;
    text-align: right;
    right: 20px;
    top: 40px;
    font-size: 1.2rem;
}

.card-counter .count-name{
    position: absolute;
    top: 10px;
    right: 20px;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 18px;
}

/****** Style Star Rating Widget *****/
#bookingRatedStarsContainer .bookingRatedFieldset {
    border: none;
    float: left;
}

#bookingRatedStarsContainer .bookingRatedFieldset > input { display: none; }
#bookingRatedStarsContainer .bookingRatedFieldset > label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: bootstrap-icons;
    display: inline-block;
    content: "\F588";
    cursor: pointer;
}

#bookingRatedStarsContainer .bookingRatedFieldset > label {
    color: #ddd;
    float: right;
}

form#dmsDocForm .form-label {
    margin-bottom: 0px !important;
    font-size: 0.8rem !important;
}


/***** CSS Magic to Highlight Stars on Hover *****/
#bookingRatedStarsContainer .bookingRatedFieldset > input:checked ~ label, /* show gold star when clicked */
#bookingRatedStarsContainer .bookingRatedFieldset:not(:checked) > label:hover, /* hover current star */
#bookingRatedStarsContainer .bookingRatedFieldset:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

#bookingRatedStarsContainer .bookingRatedFieldset > input:checked + label:hover, /* hover current star when changing rating */
#bookingRatedStarsContainer .bookingRatedFieldset > input:checked ~ label:hover,
#bookingRatedStarsContainer .bookingRatedFieldset > label:hover ~ input:checked ~ label, /* lighten current selection */
#bookingRatedStarsContainer .bookingRatedFieldset > input:checked ~ label:hover ~ label { color: #FFED85; }

 #bookingRatedStarsContainer .bookingRatedFieldset > input:checked ~ label:before { content: "\F586"; }
