body, p { font-family: Roboto, "IBM Plex Sans", Arial, Verdana, Sans-Serif; }
h1 { color: #CD3A43; margin: 60px 0 60px 0; }
h2 { color: #363781; margin: 50px 0 40px 0; } 
h3 { margin: 40px 0 30px 0; } 
a         { color: #363781; }
a:hover   { color: #CD3A43; }
a:active  { opacity: 0.8; }
a:visited { opacity: 0.8; }
.dropdown-menu { max-height: calc(100vh - 250px); overflow-y: auto; overflow-x: hidden; }

.grayscale img { filter: grayscale(100%); }
.grayscale img:hover { filter: none; }

.flag   { border: 1px solid lightgray; margin-right: 1px; }
.flag-w { border: 1px solid lightgray; margin-right: 1px; width: 1.2rem; }
.flag-h { border: 1px solid lightgray; margin-right: 1px; height: 0.8rem; }

.lang      { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: #363781; padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
.lang-gray { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: gray;    padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }
.lang-red  { font-family: 'Roboto Mono', monospace; text-transform: uppercase; background-color: #CD3A43; padding: 2px 3px; color: white; border-radius: 1px; font-size: 90%; margin-right: 1px; }

.img-cover { object-fit: cover; width: 100%; height: 100%; }

.modal { font-size: 0.8em; line-height: 1.2; }
.modal h3 { font-size: 180%; }

.textarea-autoresize { overflow: hidden; resize: none; box-sizing: border-box; transition: height 0.1s ease; max-height: 300px; }

 @keyframes flash { 0% { background-color: white; } 50% { background-color: #CFE2FF; } 100% { background-color: white; } }
 tr.flash td { animation: flash 1s 2; background-color: #CFE2FF; }
 th { opacity: .25; font-size: .75rem; }

.note { font-size: 0.75em; display: flex; align-items: center; gap: 0.75em; line-height: 1.0; opacity: 0.5; margin-top: 50 px; }
.note::before { font-family: "bootstrap-icons"; content: "\f430"; display: inline-block; font-size: 1.3em; line-height: 1; opacity: 0.75; }

.avatar { display: inline-block; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background-color: #EFEFEF; border: 1px solid #ccc; vertical-align: middle; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--xs { width: 12px; }
.avatar--sm { width: 24px; }
.avatar--md { width: 48px; }
.avatar--lg { width: 96px; }
.avatar--xl { width: 192px; }

.avatar-city  { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%,50%); color: white; text-shadow: 0 0 1px #162A40; font-size: 0.5rem; }
.avatar-flag1 { position: absolute; height: 12%; bottom: 25%; right: 50%; transform: translateY(50%); }
.avatar-flag2 { position: absolute; height: 12%; bottom: 25%; left:  50%; transform: translateY(50%); }

figure { margin: 3rem 0; }
.figure_image { position: relative; }
.figure_image img { display: block; width: 100%; height: auto; }
.figure_author { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; font-size: 14px; line-height: 1.2; color: #fff; white-space: nowrap; background: rgba(0,0,0,0.5); border-radius: 4px; }
figure figcaption { margin-top: 0; padding: 8px 10px; font-size: 13px; line-height: 1.5; color: #222; background: linear-gradient(150deg, rgba(0,0,0,0.15), rgba(0,0,0,0.02)); border-radius: 0 0 6px 6px; }
.figure_name { font-weight: 500; font-size: 125%; }
.figure_description { margin-top: 4px; opacity: 0.7; }

.plus, .plus-off { text-decoration: none; display: inline-block; padding: 0.35em 0.75em; font-size: 0.75rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: 50rem; letter-spacing: 0.03em; }
.plus { color: #fff; background: linear-gradient(135deg, #0d6efd, #d63384, #6f42c1); background-size: 200% 200%; animation: plusGradient 6s ease infinite; box-shadow: 0 0 8px rgba(111, 66, 193, 0.4); }
.plus-off { color: #fff; background: linear-gradient(135deg, #adb5bd, #6c757d); opacity: 0.85; }
@keyframes plusGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }