.required-display {position: absolute;display: none; color: white;background-color: #D10000;font-weight: 600; line-height: 40px; font-size: 14px;white-space: nowrap; padding: 0px 15px; left: 100%;margin-left: 35px !important;top:4px; height: 40px;border-radius: 5px; z-index: 9;}
.required-display:before { position: absolute; background-image: url('../images/left-arrow.svg'); top: 0; left: -24px; content: "";width: 29px;height: 40px;background-size: 31px 40px;background-repeat: no-repeat; }
.required-asterisk {color:red;padding-left:2px; }

@media screen and (max-width: 768px) {
.required-display { left: 50%; margin-left: -60px !important; font-size: 13px; top: calc(100% + 15px); }
.required-display::before { top: -20px; left: 50%; width: 29px; transform: rotate(90deg); margin-left: -15px; }
}