/* Utilizatori online pe stilul nou: templates/online_pagina.ihtml. Se incarca dupa cautare.css (grila .cn-gc, .cn-pag, .cn-gol).
   Fara flexbox/grid (browsere vechi pe mobil). Pe mobil images/ios/css/test.css stilizeaza h1/select/button: suprascrieri cu #content. */
.on-cap { overflow: hidden; margin: 0 0 12px; }
.on-puls { float: left; width: 10px; height: 10px; margin: 11px 10px 0 2px; border-radius: 50%; background: #22a55a; box-shadow: 0 0 0 4px rgba(34,165,90,.18); }
.on-titlu, #content .on-titlu { float: left; margin: 0; padding: 0; border: 0; background: none; color: #231a1f; font-size: 22px; font-weight: bold; line-height: 32px; text-align: left; }
.on-m .on-titlu, #content .on-m .on-titlu { font-size: 20px; }
.on-nr { float: right; color: #6c5e65; font-size: 13px; font-weight: bold; line-height: 32px; }
.on-m .on-nr { float: none; display: block; clear: both; line-height: 18px; }

/* banda de inscriere (vizitatori) */
.on-banda { overflow: hidden; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #f1c9da; border-radius: 14px; background: #fdf6f9; }
.on-banda p { float: left; width: 64%; margin: 0; color: #3a2e33; font-size: 14px; line-height: 20px; }
.on-banda p b { color: #231a1f; }
.on-banda .on-btn { float: right; }
.on-m .on-banda p { float: none; width: auto; margin: 0 0 10px; }
.on-m .on-banda .on-btn { float: none; display: block; text-align: center; }
.on a.on-btn { display: inline-block; height: 44px; padding: 0 20px; border-radius: 22px; background: #c2185b; color: #fff; font-size: 15px; font-weight: bold; line-height: 44px; text-decoration: none; }
.on a.on-btn:hover { background: #a3144c; text-decoration: none; }

/* comutatorul de gen */
.on-seg { overflow: hidden; margin: 0 0 10px; border: 1px solid #d8ccd2; border-radius: 22px; font-size: 0; }
.on a.on-seg-opt { display: inline-block; width: 25%; height: 44px; border-left: 1px solid #d8ccd2; color: #3a2e33; font-size: 14px; font-weight: bold; line-height: 44px; text-align: center; text-decoration: none; }
.on a.on-seg-opt:first-child { border-left: 0; }
.on a.on-seg-opt.on-pornit { background: #c2185b; color: #fff; }

/* chip-urile de filtrare; pe mobil un singur rand care se deruleaza lateral */
.on-chips { margin: 0 0 10px; font-size: 0; }
.on .on-chip { display: inline-block; height: 44px; margin: 0 8px 6px 0; padding: 0 16px; border: 1px solid #d8ccd2; border-radius: 22px; background: #fff; color: #3a2e33; font-size: 14px; font-weight: bold; line-height: 42px; text-decoration: none; white-space: nowrap; vertical-align: top; }
.on .on-chip:hover { border-color: #c2185b; text-decoration: none; }
.on .on-chip.on-pornit { border-color: #c2185b; background: #fdf6f9; color: #c2185b; }
.on .on-chip-v { padding: 0 4px 0 16px; }
.on .on-chip-v a { color: #c2185b; text-decoration: none; }
.on-x { display: inline-block; min-width: 18px; font-size: 17px; text-align: center; }
.on .on-chip-v .on-x { min-width: 36px; }

/* panoul de varsta: deschis fara JS, ascuns cu JS pana la apasarea chip-ului */
.on-varsta { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #efe6ea; border-radius: 12px; background: #fdf6f9; color: #3a2e33; font-size: 14px; font-weight: bold; line-height: 44px; }
.on-js .on-varsta { display: none; }
.on-js .on-varsta.on-deschis { display: block; }
.on-varsta span { margin: 0 6px; }
.on .on-sel, #content .on .on-sel { display: inline-block; width: 76px; height: 44px; margin: 0; padding: 0 8px; border: 1px solid #d8ccd2; border-radius: 10px; background: #fff; color: #231a1f; font-family: inherit; font-size: 16px; vertical-align: middle; }
.on .on-aplica, #content .on .on-aplica { display: inline-block; height: 44px; margin: 0 0 0 8px; padding: 0 18px; border: 0; border-radius: 22px; background: #c2185b; color: #fff; font-family: inherit; font-size: 15px; font-weight: bold; vertical-align: middle; cursor: pointer; }

/* completari pe cardul de cautare */
.on-ins { margin: 6px 0 0; font-size: 0; }
.on-ins .disp-ins, .on-album { display: inline-block; margin: 0 4px 4px 0; padding: 0 8px; border-radius: 8px; font-size: 11px; font-weight: bold; line-height: 18px; }
.on-ins .disp-activa { background: #e6f6ec; color: #1b7a43; }
.on-ins .disp-raspunde { background: #fbf1e1; color: #8a5a12; }
.on-ins .disp-aglomerat { background: #efe6ea; color: #6c5e65; }
.on-album { background: #fdecef; color: #b0173f; }
.on-cauta { margin: 2px 0 0; color: #3a2e33; font-size: 12px; line-height: 17px; }
.on-cauta-nu { color: #8a5a12; }
.on-ac { margin: 2px 0 0; }
.on .on-ac .cn-ac { height: 44px; margin: 6px 6px 0 0; line-height: 42px; }
.on-m .on-ac .cn-ac { padding: 0 12px; }


/* fara poza: ca .pf-poza-gol de pe profilul nou (avatar rotund + text), nu X-ul vechi */
.on .cn-foto.on-fara-poza { background: #f3ecef; }
.on-fp { position: absolute; left: 0; right: 0; top: 50%; margin-top: -64px; padding: 0 8px; color: #6c5e65; text-align: center; }
.on-fp img { display: block; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; }
.on-fp em { display: block; font-size: 13px; font-style: normal; line-height: 18px; }
.on-m .on-fp { margin-top: -50px; }
.on-m .on-fp img { width: 72px; height: 72px; }

/* dupa arbitrul orb (06.10): tinte de 44px, text de minim 12px, mai multe poze in primul ecran pe mobil */
.on .cn-gc-tx > a:first-child { display: block; min-height: 44px; margin: -11px 0 -12px; padding: 11px 0 0; }
.on .cn-ol, .on .cn-pp, .on-ins .disp-ins, .on-album { font-size: 12px; }
.on-m .on-cap { margin-bottom: 10px; }
.on-m .on-nr { float: right; display: inline; clear: none; line-height: 32px; }
.on-m .cn-foto { padding-top: 100%; }
.on-m .on-banda { padding: 10px 12px; }
.on-m .on-banda p { margin: 0 0 8px; font-size: 13px; line-height: 18px; }

/* aceeasi inaltime pentru toate cardurile (06.10, cerut de Robert), fara flexbox: poza are raport fix, zona de text are
   inaltime fixa cu randuri pe un rand / max. doua randuri, iar butoanele stau lipite jos */
.on .cn-gc-in { position: relative; }
.on .cn-gc-tx { position: relative; height: 138px; overflow: hidden; }
.on .cn-gc-tx > a:first-child { overflow: hidden; white-space: nowrap; }
/* numele pe randul lui, pe toata latimea; "…" doar daca nici asa nu incape; bifa ramane vizibila */
.on .cn-gc-tx > a.on-nume { white-space: nowrap; }
.on-n { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.on-nume-v .on-n { max-width: 80%; max-width: calc(100% - 22px); }
.on-nume .cn-insigna { margin-left: 4px; vertical-align: 3px; }
/* varsta prima pe randul de sub nume, evidentiata */
.on-v { color: #231a1f; font-weight: bold; }
/* pe mobil butoanele umplu randul: tinte mai mari si nimic taiat pe ecrane inguste */
.on-m .on-ac .cn-ac { width: 48%; margin: 0 4% 0 0; padding: 0; text-align: center; }
.on-m .on-ac .cn-ac + .cn-ac { margin-right: 0; }
.on-m .on-ac .cn-ac:only-child { width: 100%; margin-right: 0; }
.on-m .on-ac { right: 10px; }
/* sub 360px numerele paginarii raman pe un rand */
@media (max-width: 359px) {
	.on .on-pag-nr a, .on-pag-nr span { min-width: 40px; margin: 0 2px; padding: 0 4px; }
	.on-pag-nr .on-pag-gol { min-width: 12px; margin: 0 2px; }
	.on-m .on-chip { padding: 0 10px; }
}
.on .cn-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.on-ins { max-height: 48px; overflow: hidden; }
.on-cauta { max-height: 34px; overflow: hidden; }
.on .on-ac { position: absolute; left: 10px; right: 4px; bottom: 10px; margin: 0; white-space: nowrap; }
.on .on-ac .cn-ac { margin-top: 0; }

/* cardul de inscriere din grila (vizitatori): aceeasi structura ca un card de profil */
.on .on-cta { border: 1px dashed #e98fb4; background: #fdf6f9; text-align: center; }
.on-cta-sus { position: relative; padding-top: 125%; }
.on-m .on-cta-sus { padding-top: 100%; }
.on-cta-c { position: absolute; left: 10px; right: 10px; top: 50%; margin-top: -48px; }
.on-cta b { display: block; margin: 0 0 8px; color: #231a1f; font-size: 18px; line-height: 24px; }
.on-cta span { display: block; color: #6c5e65; font-size: 14px; line-height: 20px; }
.on .on-cta .cn-gc-tx a.on-btn { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 0 8px; }

/* revizuirea profesional/ergonomic (06.10) */
/* pe poza: doar punctul verde (pagina e deja "Online acum") si "pe mobil" cand e cazul */
.on-punct { position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 7px; border-radius: 11px; background: #fff; color: #2e7d32; font-size: 12px; font-weight: bold; line-height: 22px; }
.on-punct i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22a55a; vertical-align: 0; }
.on-punct-mobil i { margin-right: 5px; }
/* ordinea: doua optiuni, cea activa marcata */
.on-ordine { margin: 0 0 12px; font-size: 0; }
.on-ordine span { display: inline-block; margin-right: 8px; color: #6c5e65; font-size: 13px; font-weight: bold; line-height: 44px; vertical-align: top; }
.on a.on-ord { display: inline-block; height: 44px; padding: 0 14px; border: 1px solid #d8ccd2; background: #fff; color: #3a2e33; font-size: 14px; font-weight: bold; line-height: 42px; text-decoration: none; vertical-align: top; }
.on a.on-ord + a.on-ord { border-left: 0; }
.on a.on-ord:first-of-type { border-radius: 22px 0 0 22px; }
.on a.on-ord:last-child { border-radius: 0 22px 22px 0; }
.on a.on-ord.on-pornit { border-color: #c2185b; background: #c2185b; color: #fff; }
/* paginarea pe mobil: doua butoane mari + numerele pe un singur rand, cu spatiu intre tinte */
.on-pag-m { margin: 16px 0 4px; }
.on-pag-nav { overflow: hidden; margin: 0 0 12px; }
.on .on-pag-nav a { float: left; width: 48%; height: 50px; border-radius: 25px; font-size: 16px; font-weight: bold; line-height: 48px; text-align: center; text-decoration: none; }
.on .on-pag-nav a + a { float: right; }
.on-pag-unul a { width: 100% !important; }
.on .on-pag-inapoi { border: 1px solid #d8ccd2; background: #fff; color: #3a2e33; }
.on .on-pag-inainte { border: 1px solid #c2185b; background: #c2185b; color: #fff; }
.on-pag-nr { text-align: center; font-size: 0; white-space: nowrap; }
.on .on-pag-nr a, .on-pag-nr span { display: inline-block; min-width: 44px; height: 44px; margin: 0 4px; padding: 0 6px; border-radius: 22px; color: #3a2e33; font-size: 15px; font-weight: bold; line-height: 44px; text-align: center; text-decoration: none; }
.on .on-pag-nr a { border: 1px solid #ece3e7; line-height: 42px; }
.on-pag-nr .on-pag-acum { background: #c2185b; color: #fff; }
.on-pag-nr .on-pag-gol { min-width: 16px; margin: 0 4px; padding: 0; color: #8a7d83; }
/* raspuns vizibil la apasare si la focus de tastatura */
.on a.on-chip:active, .on a.on-seg-opt:active, .on a.on-ord:active, .on .on-pag-nav a:active, .on .on-pag-nr a:active, .on .cn-ac:active, .on a.on-btn:active { opacity: .75; }
.on a:focus-visible, .on button:focus-visible, .on select:focus-visible { outline: 2px solid #c2185b; outline-offset: 2px; }
/* pe mobil cele 4 chip-uri incap pe un rand (inaltimea ramane 44px; doar fontul si marginile laterale scad) */
.on-m .on-chips { margin-bottom: 6px; }
.on-m .on-chip { margin-right: 6px; padding: 0 12px; font-size: 13px; }
.on-m .on-chip-v { padding-right: 2px; }
.on-m .on-ordine span { font-size: 12px; margin-right: 6px; }
.on-m a.on-ord { padding: 0 12px; font-size: 13px; }

/* cardul simplificat (06.10): nume / varsta + judet / cel mult un semnal / butoane */
.on .cn-meta { margin-top: 1px; }
.on-semnal { margin: 3px 0 0; overflow: hidden; font-size: 13px; font-weight: bold; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.on-semnal-prefera { color: #8a5a12; }
.on-semnal-raspunde { color: #1b7a43; }

/* (06.10) se vede doar ce incape 100%: fiecare rand are inaltimea unui singur rand; bucatile intregi care nu incap trec pe randul
   urmator, ascuns. Numele nu se taie: poate lua doua randuri, iar JS-ul din sablon ascunde atunci randurile care nu mai incap. */
.on .cn-gc-tx { padding-top: 0; }
.on-txt { position: relative; height: 78px; padding-top: 11px; overflow: hidden; }
.on .on-txt a.on-nume { display: block; margin: -11px 0 -11px; padding: 11px 0; color: #231a1f; text-decoration: none; }
.on .on-n { display: inline; max-width: none; overflow: visible; white-space: normal; word-wrap: break-word; font-size: 15px; line-height: 22px; }
.on-nume .cn-insigna { margin-left: 0; vertical-align: 1px; }
.on-linie { height: 19px; overflow: hidden; }
.on-it { white-space: nowrap; }
.on .cn-meta.on-linie { margin-top: 0; white-space: normal; text-overflow: clip; }
.on-semnale { height: 20px; margin-top: 4px; font-size: 0; }
.on-pil { display: inline-block; height: 20px; margin: 0 4px 4px 0; padding: 0 7px; border-radius: 8px; font-size: 12px; font-weight: bold; line-height: 20px; white-space: nowrap; vertical-align: top; }
.on-pil-prefera { background: #fbf1e1; color: #8a5a12; }
.on-pil-raspunde { background: #e6f6ec; color: #1b7a43; }
.on-pil-album { background: #fdecef; color: #b0173f; }
.on-pil-gratuit { background: #e3f4ea; color: #146c3a; }   /* etapa 3: „Ii poti scrie gratuit” */
/* punctul de online, discret: 10px cu contur alb, fara text */
.on .on-punct { position: absolute; left: 9px; top: 9px; width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #22a55a; box-shadow: 0 0 0 1px rgba(0,0,0,.12); -webkit-box-sizing: content-box; box-sizing: content-box; }

/* semnale folosite si de Cautare (card_grila_html, 08.10): cine asteapta un mesaj, ultima activitate, potrivirea in lista */
.on-pil-asteapta { background: #fdecf3; color: #a3144c; }
.on-pil-activ { background: #f3ecef; color: #5e5057; }
.on-pil-potrivire { background: #fdf6f9; color: #c2185b; }