/* Layout utilities */
.float-left { float: left; }
.float-right { float: right; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.text-center { text-align: center; }

/* Flexbox utilities */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-10 { flex: 10%; }
.flex-90 { flex: 90%; }

/* Text utilities */
.no-decoration { text-decoration: none !important; }
.underline { text-decoration: underline; }

/* Status indicators */
.unpublished-label { color: #FF4136; }

/* Loading overlay */
.loading-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
}

/* Spacing utilities */
.mr-10 { margin-right: 10px; }
.mb-2em { margin-bottom: 2em; }
.mb-04em { margin-bottom: 0.4em; }
.pl-1em { padding-left: 1em; }

/* Icon sizing */
.icon-sm { font-size: 14px; }

/* Component-specific styles */
.paginator {
    text-align: center;
    font-size: 1.5em;
    margin: 1em;
}

.zettel-hidden { font-size: 0px; }
.zettel-tag {
    color: black;
    border: solid gray 1px;
    border-radius: 5% / 100%;
    padding: .5em;
}

.record-image-container {
    display: inline-block;
    max-width: 65%;
    min-height: 100%;
    height: 100%;
}

.record-image {
    max-width: 100%;
    vertical-align: middle;
}

.record-info {
    display: inline-block;
    max-width: 30%;
    padding-left: 1em;
    vertical-align: middle;
    text-align: left;
}

.records-link {
    background: none;
    border: none;
}