.rtl-mode{
    direction: rtl;
    text-align: right;
}

.ltr-mode{
    direction: ltr;
    text-align: left;
}

.hide{
    display: none;
}

.card-input-element+.card {
    height: calc(36px + 2*1rem);
    color: #e85a84;
    background-color: rgba(225, 222, 222, 0.55);
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid transparent;
    border-radius: 4px;
}

.card-input-element+.card:hover {
    cursor: pointer;
}

.card-input-element:checked+.card {
    border: 2px solid #e85a84;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
}

.card-input-element:checked+.card::after {
    content: '\e5ca';
    color: #d7b72b;
    font-family: "Material Icons";
    font-size: 24px;
    -webkit-animation-name: fadeInCheckbox;
    animation-name: fadeInCheckbox;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fadeInCheckbox {
    from {
        opacity: 0;
        -webkit-transform: rotateZ(-20deg);
    }
    to {
        opacity: 1;
        -webkit-transform: rotateZ(0deg);
    }
}

@keyframes fadeInCheckbox {
    from {
        opacity: 0;
        transform: rotateZ(-20deg);
    }
    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}


.rating {
    display: inline-block;
    position: relative;
    height: 50px;
    line-height: 50px;
    font-size: 50px;

}

.rating label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    cursor: pointer;
}

.rating label:last-child {
    position: static;
}

.rating label:nth-child(1) {
    z-index: 5;
}

.rating label:nth-child(2) {
    z-index: 4;
}

.rating label:nth-child(3) {
    z-index: 3;
}

.rating label:nth-child(4) {
    z-index: 2;
}

.rating label:nth-child(5) {
    z-index: 1;
}

.rating label input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.rating label .icon {
    float: left;
    color: transparent;
    font-size: 40px;
}

.rating label:last-child .icon {
    color: #000;
}

.rating:not(:hover) label input:checked ~ .icon,
.rating:hover label:hover input ~ .icon {
    color: #e85a84;
}

.rating label input:focus:not(:checked) ~ .icon:last-child {
    color: #000;
    text-shadow: 0 0 5px #e85a84;
}