/* Customer Info Step - Help Messages Positioning */

/* Make form-group relative so help messages can be positioned relative to it */
.form-panel .form-group {
    position: relative;
}

/* Override existing helpimages styling to position near the label */
.form-panel .helpimages.help-images-info-message {
    position: absolute !important;
    bottom: auto !important;
    top: -52% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 5px !important;
    padding: 10px !important;
    border: 1px solid #bce8f1 !important;
    background-color: #d9edf7 !important;
    color: #31708f !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    z-index: 1000 !important;
}

/* Hide help messages by default */
.form-panel .helpimages.help-images-info-message.hide {
    display: none !important;
}

/* Remove scroll behavior */
.form-panel .helpimages.help-images-info-message {
    overflow-y: visible !important;
    height: auto !important;
}

/* Help message paragraph styling */
.form-panel .helpimages.help-images-info-message p {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.5;
}

.form-panel .helpimages.help-images-info-message p:last-child {
    margin-bottom: 0;
}

/* Info icon cursor */
.form-panel .form-group label img {
    cursor: pointer;
    margin-left: 5px;
    vertical-align: middle;
}

/* Security info link styling */
.form-panel .securityInfo {
    color: #31708f;
    text-decoration: underline;
}

.form-panel .securityInfo:hover {
    color: #245269;
}

.form-panel .securityInfo .glyphicon {
    margin-right: 3px;
}

/* Ensure labels with help icons have proper spacing */
.form-panel .form-group label.auto-width {
    display: inline-block;
    vertical-align: middle;
}

/* Specific positioning for each help message */
.form-panel .verifyImage {
    margin-top: 3px;
}

.form-panel .accountNumberImage,
.form-panel .ssnImage,
.form-panel .dobImage,
.form-panel .zipCodeImage {
    margin-top: 3px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form-panel .helpimages.help-images-info-message {
        font-size: 12px !important;
    }
}