.header-banner {
    position: relative;
    background-image: url(/assets/css/images/newheader.png);
    background-position: top left;
    background-repeat: no-repeat;
    height: 70px;
    background-color: #014A97;
}

.question {
    text-align: center;
    font-size: 1.3em;
}

.question::before {
    content: 'Question ';
    font-style: italic;
}

.stars {
    display: block;
    width: 50px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.stars:not(:last-child){
    margin-right: 20px;
}

.star-yellow {
    background-image: url(/assets/css/images/star-yellow.svg);
}
.star-grey {
    background-image: url(/assets/css/images/star-grey.svg);
}

.faces {
    display: block;
    width: 50px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.face-1 {
    background-image: url(/assets/css/images/face-1.svg);
}
.face-2 {
    background-image: url(/assets/css/images/face-2.svg);
}
.face-3 {
    background-image: url(/assets/css/images/face-3.svg);
}
.face-4 {
    background-image: url(/assets/css/images/face-4.svg);
}
.face-5 {
    background-image: url(/assets/css/images/face-5.svg);
}




#simple_captcha {
    width: 70px !important;
}

.zindx-1992 { z-index: 1992 !important; }
.zindx-1991 { z-index: 1991 !important; }
.zindx-1990 { z-index: 1990 !important; }

.modal.visible {
    display: block !important;
}
.modal.fade.visible {
    transition: opacity 0.15s linear;
}

.changed-height {
    min-height: 50vh !important;
    overflow: hidden;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
.error-state {
    animation: shake 0.5s;
    border: 1px solid red;
    box-shadow: 0 0 10px red;
}

.cont-nav { background-color: rgb(211, 211, 211); }
#javascript-box { margin-top: 20px; }

.bg-dark .btn-close{
    background-image: url(/assets/css/images/btn-x-white.svg);
}

.generated-code {
    width: 100%;
    font-family: monospace;
    font-size: 14px;
    height: 80vh !important;
}
/*  messages.css - Full-width bottom message bar  */

#system-messages {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    pointer-events: none;
}

.system-message {
    padding: 16px;
    text-align: center;
    color: white;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.system-message.show {
    opacity: 1;
    transform: translateY(0);
}

.system-message.hide {
    opacity: 0;
    transform: translateY(20px);
}

/* Background colors */
.system-message.success,
.system-message.mess-good {
    background-color: #28a745; /* green */
}

.system-message.danger,
.system-message.mess-bad {
    background-color: #dc3545; /* red */
}

.system-message.warning,
.system-message.mess-warning {
    background-color: #ffc107; /* yellow */
}