/* Server location and the server's own active promotion services. */
.mon-page .mon-server-title{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;margin-bottom:5px;min-width:0}
.mon-page .mon-server-title h3{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1 1 180px;margin:0;line-height:1.5}
.mon-page .mon-server-title h3>a{min-width:0;overflow-wrap:anywhere}
.mon-page .mon-server-title h3>.mon-flag{align-self:flex-start;margin-top:3px}
.mon-page .mon-server-heading{display:flex;align-items:baseline;gap:12px;min-width:0}
.mon-page .mon-server-heading>span{min-width:0;overflow-wrap:anywhere}
.mon-page .mon-server-heading>.mon-flag{align-self:flex-start;margin-top:.32em;width:24px;height:18px}
.mon-page .mon-server-services{align-items:center;gap:10px}
.mon-page .mon-service-icons{display:inline-flex;align-items:center;flex-wrap:wrap;flex:0 0 auto;gap:3px;vertical-align:middle}
.mon-page .mon-service-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:1px solid transparent;border-radius:7px;outline:none;cursor:help;isolation:isolate;transition:background .15s,border-color .15s}
.mon-page .mon-service-icon>img,.mon-page .mon-service-icon>picture>img{display:block;width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 3px #0005);pointer-events:none}
.mon-page .mon-service-icon:hover,.mon-page .mon-service-icon:focus{background:#f5a63212;border-color:#f5a63255;z-index:5}
.mon-page .mon-service-icon:focus-visible{outline:2px solid var(--mon-accent,#f5a632);outline-offset:2px}
.mon-page .mon-service-icon--drop>img,.mon-page .mon-service-icon--drop>picture>img{filter:drop-shadow(0 2px 3px #0005) hue-rotate(305deg)}
.mon-page .mon-service-tooltip{position:absolute;left:0;top:calc(100% + 8px);z-index:20;display:block;width:max-content;max-width:min(270px,65vw);padding:9px 12px;border:1px solid #59616b;border-radius:8px;background:#11161c;color:#e9edf3;box-shadow:0 8px 22px #0007;font-family:inherit;font-size:11px;font-weight:500;line-height:1.6;text-align:left;white-space:normal;overflow-wrap:anywhere;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s}
.mon-page .mon-service-icon:hover>.mon-service-tooltip,.mon-page .mon-service-icon:focus>.mon-service-tooltip{opacity:1;visibility:visible;transform:translateY(0)}
.mon-page .mon-server-list{overflow:visible}
.mon-page .mon-server-list>.mon-list-labels:first-child{border-radius:9px 9px 0 0}
.mon-page .mon-server-list>.mon-server-row:last-child{border-radius:0 0 9px 9px}
.mon-page .mon-geo-attribution{margin:22px 0 0;color:var(--mon-muted,#8f9bac);font-size:10px;line-height:1.6;text-align:right}
.mon-page .mon-geo-attribution>a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mon-page .mon-geo-attribution>a:hover{color:var(--mon-accent,#f5a632)}
@media(max-width:560px){.mon-page .mon-server-title{gap:5px 7px}.mon-page .mon-server-title h3{flex-basis:100%;gap:7px}.mon-page .mon-service-icon{width:30px;height:30px;flex-basis:30px}.mon-page .mon-service-icon>img,.mon-page .mon-service-icon>picture>img{width:28px;height:28px}.mon-page .mon-server-heading{gap:10px}.mon-page .mon-geo-attribution{text-align:left}}
@media(prefers-reduced-motion:reduce){.mon-page .mon-service-icon,.mon-page .mon-service-tooltip{transition:none}}

/* Preserve icon layout while picture selects the mobile vector artwork. */
.mon-page .mon-service-icon>picture{display:block;width:28px;height:28px;flex:none;pointer-events:none}
@media(max-width:767px){.mon-page .mon-service-icon>picture>img{filter:none}}
