.shoutbox { padding-top: 20px; } .shoutbox img { min-width: 0 !important; } #create-post-section { margin-bottom: 2rem; } .create-post-card { width: 100%; border: none; box-shadow: 1px 1px 10px rgba(0,0,0,0.10); } .shoutbox-title { font-size: 1.75rem; font-weight: 700; color: #333; margin-bottom:0; } .demo-border { border-bottom: 3px solid #28a745; margin-bottom: 1rem; } .shoutbox-subtitle { font-size: 0.85rem; font-weight: 500; color: #555; margin-bottom: 1.5rem; } .info-icon { font-size: 1.1rem; color: #17a2b8; cursor: pointer; margin-left: 5px; margin-bottom: 2.25px; } .custom-select-width { max-width:560px; } .create-post-icon { width:50px; height:50px; object-fit:cover; border-radius:4px; margin-top: 15px; margin-right:15px; } #char-count { font-size:.85rem; color:#6c757d; text-align:right; } #live-warning { display:none !important; } .post-card { display: block; width: 100%; margin-bottom: 1.25rem; border: none; transition: box-shadow .3s ease; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } .post-card .post-header { display:flex; align-items:center; padding:.75rem 1rem; border-bottom:1px solid rgba(0,0,0,0.05); } .post-card .user-icon { width:40px; height:40px; border-radius:15%; margin-right:10px; object-fit:cover; } .post-card .post-body { padding:1rem; word-wrap:break-word; font-size:.95rem; background: transparent; } .post-card .post-footer { padding:.5rem 1rem; background-color: rgba(255,255,255,0.0); text-align:right; } .post-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.08); } .btn-bump { font-size:.8rem; padding:.25rem .75rem; } .stacked-layout { max-width:800px; margin:0 auto; } .pinterest-layout { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 1.25rem; max-width: 1400px; margin: 0 auto; padding: 0; } @media (max-width:1200px) { .pinterest-layout { grid-template-columns: repeat(3, 1fr); } } @media (max-width:991.98px) { .pinterest-layout { grid-template-columns: repeat(2, 1fr); } .custom-select-width { max-width:480px; } } @media (max-width:767.98px) { .form-inline { width:100%; flex-direction:row; } .form-inline .custom-select { width:100%; margin-right:0!important; margin-bottom:.5rem; } .custom-select-width { max-width:100%; } .form-inline .btn { width:100%; } #btn-submit-post { width:100%; margin-top:.5rem; } } @media (max-width:575.98px) { .pinterest-layout { grid-template-columns: repeat(1, 1fr); } } .btn-pulse { background-color: #28a745; border-color: #28a745; color: white; transition: all 0.4s ease-in-out; box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } .btn-pulse:hover { background-color: #218838; animation: pulse-green 1.5s infinite; } @keyframes pulse-green { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6); } 70% { transform: scale(1.05); box-shadow: 0 0 20px 10px rgba(40, 167, 69, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } } .popover { z-index: 1200; } .btn.disabled, .btn[disabled] { opacity: 0.55; pointer-events: none; }