.password-meter {
    display: flex;
    height: 5px;
    margin-top: 10px;
}

.meter-section {
    flex: 1;
    background-color: #ddd;
}

.weak {
    background-color: #ff4d4d;
}

.medium {
    background-color: #ffd633;
}

.strong {
    background-color: #00b300;
}

.very-strong {
    background-color: #009900;
}





/* The message box is shown when the user clicks on the password field */
#message {
    display:none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 7px;
    margin-top: 5px;
}

#message span {
    padding: 1px 35px;
    font-size: 11px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -5px;
    content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -5px;
    content: "✖";
}





/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
#upload {
    opacity: 0;
    width: 100%;
}

#upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(155, 225, 155, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'سيتم عرض صورة العلامة التجارية هنا فور إختيارها';
    color: #000000;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}