input[type=text]{
    width:35px;
}

.optional {
    
}
.hidden{
    visibility:collapse;
}
.error {
    background-color: red;
    pointer-events: all;
}
.correct {
    background-color: green;
    pointer-events: none;
}

.incomplete {
    /*background-color: yellow;*/
    pointer-events: all;
}
.hearts {
   /* border: 1px solid #ddd;
    border-radius: 4px;*/
    padding: 0px;
    width: 32px;
    height:32px;
}
.bravos {
    width: 520px; /* Fits the given width of the image container */
    height: 50px; /* Reduces deterioration because the height isn't forced */
    margin: 0 0 0 calc(520*.85);/* 0 -85%;  The minus cuts off(hides) parts of the image */
}
.progressbar-container {
    width: 520px;
    height: 50px;
    position: relative;
    margin: 0px;
    /*border: solid;*/
    background:url('../Images/stars.png');
    background-repeat:no-repeat;
}

.progress-bar {
    z-index: 9;
    margin: 0px; /* for demo purpose  */
    width: 100%;
    /*border: dashed;*/
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    background: white;
}

.stardEmoji {
    background-image: url('../Images/stars.png');
}
.ducksEmoji {
    background-image: url('../Images/ducks.png');
}

.heartsEmoji {
    background-image: url('../Images/Hearts.png');
}