//.colored-toast {
//  /* Add your custom styles here */
//  font-size: 14px; // Example: Making the font size smaller
//}

.required-input {
    border-color: #66ccff !important; /* Light blue for the border */
    box-shadow: 0 0 0 0.1rem rgba(102, 204, 255, 0.25); /* Light blue glow */
}

.invalid-input {
    border-color: #ff6666 !important; /* Lighter red for the border */
    box-shadow: 0 0 0 0.1rem rgba(255, 102, 102, 0.11); /* Lighter red glow */
}

.notyf-primary {
    background-color: #3b7ddd; /* A green shade for success */
    color: white; /* White text */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Adjust based on preference */
}

.notyf-danger {
    background-color: #ff4757; /* Red color for danger */
    color: white; /* White text color */
    /* Add other styling as needed */
}

.notyf-x-mark {
    color: red; /* Red color for the "X" mark */
    margin-right: 8px; /* Space between "X" mark and message */
    font-weight: bold; /* Make the "X" more prominent */
    background-color: white; /* White background for the circle */
    border-radius: 50%; /* Makes the background a circle */
    width: 20px; /* Adjust the width as needed */
    height: 20px; /* Adjust the height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Adjust the font size as needed */
}

.notyf-message-content {
    display: flex;
    align-items: center;
}

a.my-mo:hover {
  cursor: pointer;
}

.avatar-cust-bg {
    background: #5b4918 !important;
    border-radius: 25px;
}

.avatar-cust-bg::before {
    content: '';
    position: absolute;
    border-radius: 25px;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #5b4918; /* Or any other background styles */
    z-index: -1;
}

.required-field {
    font-size: 10px;
    color: red;
    padding-left: 5px;
}

.minH45 { 
    min-height: 45px;
}

.box-holder {
    text-align: center;
    border: 3px solid #f3f3f3;
    padding: 20px;
    border-radius: 8px;
}