@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600"); .custom-social-proof { position: fixed; bottom: 2%; right: 0; z-index: 9999999999999 !important; font-family: "Open Sans", sans-serif; } .custom-social-proof .custom-notification { width: 290px; border: 0; text-align: left; z-index: 99999; box-sizing: border-box; font-weight: 400; border-radius: 6px; box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2); background-color: #32dcd6; position: relative; cursor: pointer; } .custom-social-proof .custom-notification .custom-notification-container { display: flex !important; align-items: center; height: 80px; } .custom-notification-image-wrapper{ display: flex !important; flex-direction: column; justify-content: center; } .custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img { max-height: 75px; width: 90px; overflow: hidden; border-radius: 6px 0 0 6px; object-fit: cover; } .custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper { margin: 0; height: 100%; color: gray; padding-right: 20px; border-radius: 0 6px 6px 0; flex: 1; display: flex !important; flex-direction: column; justify-content: center; } .custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content { font-family: inherit !important; margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 16px; color: #000; } .custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small { margin-top: 3px !important; display: block !important; font-size: 12px !important; opacity: 0.8; } .custom-social-proof .custom-notification .custom-close { position: absolute; top: 8px; right: 8px; height: 12px; width: 12px; cursor: pointer; transition: 0.2s ease-in-out; transform: rotate(45deg); opacity: 0; } .custom-social-proof .custom-notification .custom-close::before { content: ""; display: block; width: 100%; height: 2px; background-color: gray; position: absolute; left: 0; top: 5px; } .custom-social-proof .custom-notification .custom-close::after { content: ""; display: block; height: 100%; width: 2px; background-color: gray; position: absolute; left: 5px; top: 0; } .custom-social-proof .custom-notification:hover .custom-close { opacity: 1; } @media (max-width: 480px) { .custom-social-proof { position: fixed; bottom: 2%; left: 20%; right: 2%; z-index: 9999999999999 !important; font-family: "Open Sans", sans-serif; } .custom-social-proof .custom-notification { width: 100%; /* Increase width to 90% of screen width */ left: 5%; /* Center the popup */ bottom: 5%; } .custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content { font-size: 16px; /* Increase font size */ line-height: 18px; } .custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small { font-size: 14px; /* Increase font size for the small tag */ } }