+
+span.emoji.mastodon img {
+ height: 1.2em;
+ vertical-align: middle;
+}
+
+/* Exception page */
+
+#exception {
+ overflow: hidden;
+ background-image: url('../images/friendica-404_svg_hare-bottom-light-inside.png');
+ background-position: 50px bottom;
+ background-repeat: no-repeat;
+}
+
+#exception .hare {
+ float: right;
+}
+
+@media screen and (max-width: 600px) {
+ #exception .hare {
+ display: none;
+ }
+}
+
+/* Profile Settings Custom Fields */
+body.dragging, body.dragging * {
+ cursor: ns-resize !important;
+}
+
+.dragged {
+ position: absolute;
+ opacity: 0.5;
+ z-index: 2000;
+}
+
+#profile-custom-fields > fieldset > legend {
+ cursor: ns-resize;
+}
+
+#profile-custom-fields div.placeholder {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ border-top: 1px dotted black;
+}
+#profile-custom-fields div.placeholder:before {
+ position: absolute;
+ content: "";
+ width: 0;
+ height: 0;
+ margin-top: -7px;
+ left: -7px;
+ top: -1px;
+ border: 7px solid transparent;
+ border-left-color: black;
+ border-right: none;
+}
+
+span.required {
+ color: #c80000;
+}
+
+audio {
+ width: 100%;
+}
+
+/**
+ * Image grid settings START
+ **/
+.imagegrid-row {
+ display: -ms-flexbox; /* IE10 */
+ display: flex;
+ margin-top: 1em;
+ column-gap: 5px;
+}
+
+.imagegrid-column {
+ -ms-flex: 50%; /* IE10 */
+ flex: 50%;
+ display: -ms-flexbox; /* IE10 */
+ display: flex;
+ flex-direction: column;
+ row-gap: 5px;
+}
+
+.imagegrid-column img {
+ -ms-flex: 50%; /* IE10 */
+ flex: 50%;
+}
+/**
+ * Image grid settings END
+ **/
+
+/* This helps allocating space for image before they are loaded, preventing content shifting once they are.
+ * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
+ * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
+ * This ratio is never known in advance so no value is set in the stylesheet.
+ */
+figure.img-allocated-height {
+ position: relative;
+ background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
+ margin: 0;
+}
+figure.img-allocated-height img{
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+}
+
+/**
+ * Horizontal masonry settings START
+ **/
+.masonry-row {
+ display: -ms-flexbox; /* IE10 */
+ display: flex;
+ /* Both the following values should be the same to ensure consistent margins between images in the grid */
+ column-gap: 5px;
+ margin-top: 5px;
+}
+/**
+ * Horizontal masonry settings AND
+ **/
+
+#contactblock .icon {
+ width: 48px;
+ height: 48px;
+}