@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
vma.css — ВМА skin for the embedded GammaWBooking widget
Lives on the FRONT-END site. Nothing on the API side is touched.
The widget injects bootstrap.min.css and /content/cal into
at runtime, i.e. after this file. Source order therefore can't be
relied on — every rule here wins on SPECIFICITY instead
(#GCwidget … beats both bootstrap's class selectors and the
calendar sheet's `#GCwidget td.label-*`).
!important appears only where GCReserveExam.js / GCUtils.js write
inline styles, which nothing else can outrank.
Delete this file's to restore stock appearance.
═══════════════════════════════════════════════════════════════════ */
/* ── field width ──────────────────────────────────────────────────
The widget builds every control at width:100%, so in a roomy card
a dropdown stretches the full measure and looks wrong. Capping the
CONTROLS here — instead of narrowing the whole card — lets the
calendar, slot table and notices keep the full width they benefit
from, while inputs stay at a normal form size.
This is the knob to tune: raise for wider fields, lower for
tighter. Card width is --measure in index.html.
───────────────────────────────────────────────────────────────── */
:root{ --fieldw: 30rem; } /* ≈480px — fills the card better than 27rem
without the inputs reading as stretched */
/* Capped and centred in the card.
margin-left/right as LONGHANDS, not the `margin` shorthand:
GCReserveExam.js writes inline margin-top on several of these
(.css("margin-top","20px")), and a shorthand here would fight it. */
#GCwidget div.dropdown,
#GCwidget #gcw_age_container,
#GCwidget #gcw_inp_f{
max-width:var(--fieldw, 30rem);
margin-left:auto;
margin-right:auto;
}
/* Step 3 is capped as a whole rather than per-field, so the
Назад / Запази buttons and the consent block line up with the
inputs instead of spanning the full card. */
#gcw_p3_fm{
max-width:var(--fieldw, 30rem);
margin-left:auto;
margin-right:auto;
}
/* deliberately NOT capped — these want the whole card:
#gcw_p1_homeinfo, #headerInfo, .alert, #calendar_list,
#gcw_p1_legend, #slot_list, #gcr_preopt, #booking-ready */
/* ── buttons ────────────────────────────────────────────────────── */
#GCwidget .btn,
#GCwidget .btn-primary,
#gcw_p3_fm .btn,
#gcw_p3_fm .btn-primary{
border-radius:2px;
font-size:.9375rem;
font-weight:600;
letter-spacing:.01em;
padding:.62rem 1.05rem;
border:1px solid transparent;
text-shadow:none;
box-shadow:none;
transition:background-color .15s ease, border-color .15s ease;
}
#GCwidget .btn-primary,
#gcw_p3_fm .btn-primary{
background:var(--brand, #24609C);
border-color:var(--brand, #24609C);
color:#fff;
}
#GCwidget .btn-primary:hover,
#GCwidget .btn-primary:focus,
#gcw_p3_fm .btn-primary:hover,
#gcw_p3_fm .btn-primary:focus{
background:var(--brand-deep, #17416E);
border-color:var(--brand-deep, #17416E);
color:#fff;
}
#GCwidget .btn-default,
#gcw_p3_fm .btn-default{
background:#fff;
border-color:var(--rule, #CFDCE9);
color:var(--brand-deep, #17416E);
}
#GCwidget .btn-default:hover,
#gcw_p3_fm .btn-default:hover{ background:var(--brand-wash, #EDF2F8); }
#GCwidget .btn:focus-visible,
#gcw_p3_fm .btn:focus-visible{ outline:2px solid var(--brand, #24609C); outline-offset:2px; }
/* the widget's own
— my card already carries a heading */
#GCwidget > h3{ display:none; }
#GCwidget .row-fluid{ margin:0; }
/* dropdown trigger reads as a field, not a toy button */
#GCwidget div.dropdown > a.btn-primary{
display:block;
width:100%;
text-align:left;
background:#fff;
border-color:var(--rule, #CFDCE9);
color:var(--ink, #10202F);
font-weight:600;
padding:.7rem .9rem;
position:relative;
}
#GCwidget div.dropdown > a.btn-primary:hover,
#GCwidget div.dropdown > a.btn-primary:focus{
background:#fff;
border-color:var(--brand, #24609C);
color:var(--ink, #10202F);
box-shadow:inset 0 0 0 1px var(--brand, #24609C);
}
#GCwidget div.dropdown > a.btn-primary .caret{
position:absolute; right:.9rem; top:50%;
border-top-color:var(--brand, #24609C);
border-width:5px 5px 0;
}
/* ── dropdown menus ─────────────────────────────────────────────── */
#GCwidget .dropdown-menu{
width:100%;
min-width:0;
max-height:340px;
overflow-y:auto;
border:1px solid var(--brand, #24609C);
border-radius:0;
box-shadow:0 10px 28px -14px rgba(16,32,47,.4);
padding:.25rem 0;
margin-top:2px;
}
#GCwidget .dropdown-menu > li > a{
padding:.55rem .9rem;
font-size:.9375rem;
color:var(--ink, #10202F);
white-space:normal;
line-height:1.45;
}
#GCwidget .dropdown-menu > li > a:hover,
#GCwidget .dropdown-menu > li > a:focus{
background:var(--brand-wash, #EDF2F8);
color:var(--brand-deep, #17416E);
}
/* injected search row (GCUtils.addSearchBox) sits first */
#GCwidget .dropdown-menu > li:first-child > a[contenteditable]{
border-bottom:1px solid var(--rule, #CFDCE9);
margin-bottom:.25rem;
padding:.6rem .9rem;
background:#FAFCFE;
}
/* ── hospital info blockquote ───────────────────────────────────── */
#GCwidget #hosp-info{
margin:.9rem 0 0 !important;
padding:.55rem 0 .55rem .9rem;
border-left:2px solid var(--rule, #CFDCE9);
font-size:.875rem;
color:var(--ink-soft, #4A5C6E);
}
/* ── age field ──────────────────────────────────────────────────── */
#GCwidget #gcw_age_container{ margin-top:1.25rem !important; }
#GCwidget #gcw_age_container > label{
display:block;
font-size:.6875rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.11em;
color:var(--ink-soft, #4A5C6E);
margin-bottom:.4rem;
}
/* ── inputs ─────────────────────────────────────────────────────── */
#GCwidget .form-control,
#gcw_p3_fm .form-control{
width:100% !important;
height:auto;
border-radius:2px;
border:1px solid var(--rule, #CFDCE9);
padding:.62rem .8rem;
font-size:.9375rem;
color:var(--ink, #10202F);
box-shadow:none;
transition:border-color .15s ease, box-shadow .15s ease;
}
#GCwidget .form-control:focus,
#gcw_p3_fm .form-control:focus{
border-color:var(--brand, #24609C);
box-shadow:inset 0 0 0 1px var(--brand, #24609C);
outline:none;
}
#gcw_p3_fm textarea.form-control{ min-height:96px !important; }
#gcw_p3_fm .form-group{ margin-bottom:1.1rem; }
#gcw_p3_fm .form-group > label{
display:block;
font-size:.6875rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.11em;
color:var(--ink-soft, #4A5C6E);
margin-bottom:.4rem;
}
#gcw_p3_fm .has-error .form-control{
border-color:var(--err, #A32B2B);
box-shadow:inset 0 0 0 1px var(--err, #A32B2B);
}
#gcw_p3_fm label.control-label{
display:block;
margin-top:.4rem;
font-size:.8125rem;
font-weight:600;
text-transform:none;
letter-spacing:0;
color:var(--err, #A32B2B);
}
#GCwidget a[data-toggle="tooltip"],
#gcw_p3_fm a[data-toggle="tooltip"]{
color:var(--brand, #24609C);
opacity:.75;
margin-left:.4rem;
}
#GCwidget a[data-toggle="tooltip"]:hover,
#gcw_p3_fm a[data-toggle="tooltip"]:hover{ opacity:1; }
/* ── alerts: flat, brand-tinted ─────────────────────────────────── */
#GCwidget .alert,
#gcw_p3_fm .alert{
border-radius:0;
border:1px solid var(--rule, #CFDCE9);
border-left-width:3px;
padding:.85rem 1rem;
font-size:.9375rem;
text-shadow:none;
box-shadow:none;
}
#GCwidget .alert-info, #gcw_p3_fm .alert-info{
background:var(--brand-wash, #EDF2F8);
border-color:var(--rule, #CFDCE9);
border-left-color:var(--brand, #24609C);
color:var(--ink, #10202F);
}
#GCwidget .alert-warning, #gcw_p3_fm .alert-warning{
background:#FDF7F3;
border-color:#EEDCD0;
border-left-color:var(--notice, #9C4A24);
color:#5A3B2A;
}
#GCwidget .alert-success, #gcw_p3_fm .alert-success{
background:#F1F7F3;
border-color:#D3E4DA;
border-left-color:var(--ok, #2E6B4F);
color:#22503B;
}
#GCwidget .alert-danger, #gcw_p3_fm .alert-danger{
background:#FCF3F3;
border-color:#EFD5D5;
border-left-color:var(--err, #A32B2B);
color:#7C2222;
}
#GCwidget .text-info,
#gcw_p3_fm .text-info{ color:inherit; }
/* headerInfo.html is pure instruction — keep it quiet */
#GCwidget #headerInfo .alert{
background:transparent;
border:0;
border-left:2px solid var(--rule, #CFDCE9);
padding:.2rem 0 .2rem .9rem;
margin-bottom:1.25rem;
font-size:.875rem;
color:var(--ink-soft, #4A5C6E);
}
/* ═══ SIGNATURE ══════════════════════════════════════════════════
homeinfo.html carries the Наредба № Н-1 чл. 7 priority-of-service
notice — the one thing here that exists because ВМА is a military
hospital. Stock renders it as a yellow warning toast. Here it
becomes what it actually is: an official notice.
════════════════════════════════════════════════════════════════ */
#GCwidget #gcw_p1_homeinfo{
margin:0 0 1.35rem !important;
padding:.9rem 1.05rem 1rem;
background:#FCF9F7;
border:1px solid #E7D6CA;
border-left:3px solid var(--notice, #9C4A24);
border-radius:0;
color:#4A3428;
/* Deliberately smaller than body copy. It's a legal notice that has
to be present, but at .875/1.65 it ran taller than the form it
sits above and became the loudest thing on the page. */
font-size:.8125rem;
line-height:1.55;
}
#GCwidget #gcw_p1_homeinfo::before{
content:"Важно · ред на обслужване";
display:block;
margin-bottom:.55rem;
padding-bottom:.5rem;
border-bottom:1px solid #EBDDD3;
font-size:.625rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.2em;
color:var(--notice, #9C4A24);
}
#GCwidget #gcw_p1_homeinfo .text-info{ color:#4A3428; }
/* ── returning-patient shortcuts ────────────────────────────────── */
#GCwidget #gcr_preopt{
border-radius:0;
border:1px solid var(--rule, #CFDCE9);
border-left:3px solid var(--brand, #24609C);
background:var(--brand-wash, #EDF2F8);
box-shadow:none;
padding:1.1rem 1.25rem !important;
}
#GCwidget #gcr_preopt > strong{
display:block;
margin-bottom:.35rem;
font-size:.9375rem;
color:var(--brand-deep, #17416E);
}
#GCwidget .btn-pat-opt{ text-align:left; white-space:normal; }
/* ── calendar ─────────────────────────────────────────────────────
/content/cal loads after this file, so each of these is
deliberately one notch more specific than its counterpart there.
───────────────────────────────────────────────────────────────── */
#GCwidget #calendar_list{ margin:1.5rem 0 0 !important; }
#GCwidget #gcw_p1_m1{
display:block;
font-size:.6875rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.13em;
color:var(--brand, #24609C);
}
#GCwidget #calendar_list > hr{
margin:.7rem 0 1rem;
border:0;
border-top:1px solid var(--rule, #CFDCE9);
}
#GCwidget div.calendar{
background:#fff;
border:1px solid var(--rule, #CFDCE9);
border-radius:0;
}
#GCwidget div.calendar .header{
padding:.7rem .6rem;
border-bottom:1px solid var(--rule, #CFDCE9);
background:#FAFCFE;
}
#GCwidget div.calendar .header .year,
#GCwidget div.calendar .visualmonthyear{
font-weight:700;
letter-spacing:.02em;
color:var(--ink, #10202F);
}
#GCwidget div.calendar .prev_month a,
#GCwidget div.calendar .next_month a{
color:var(--brand, #24609C);
font-weight:700;
padding:0 .5rem;
}
#GCwidget div.calendar table.table{ margin-bottom:0; }
#GCwidget div.calendar table.table td{
padding:.1rem;
border-color:#EDF1F6;
vertical-align:middle;
}
#GCwidget div.calendar tr.week_days td{
background:#fff;
color:var(--ink-soft, #4A5C6E);
font-size:.625rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.09em;
padding:.5rem .1rem;
border-bottom:1px solid var(--rule, #CFDCE9);
}
#GCwidget div.calendar table.table td a{
display:block;
padding:.62rem .2rem;
font-variant-numeric:tabular-nums;
font-size:.9375rem;
color:var(--ink-soft, #4A5C6E);
}
/* Bookable days: a light wash with a dark numeral, instead of a solid
fill with a white one. A month of saturated tiles was heavy to read;
this keeps the date legible and still clearly marks it available.
The plugin's own `.calendar .event` inset shadow and white link colour
load AFTER this file, so every rule below is id-scoped to outrank
them — including the :hover states, which the plugin also sets. */
#GCwidget div.calendar td.event{ font-weight:700; }
#GCwidget div.calendar td.label-info{ /* НЗОК */
background:rgba(36,96,156,.13);
box-shadow:inset 0 0 0 1px rgba(36,96,156,.30);
}
#GCwidget div.calendar td.label-info:hover{
background:rgba(36,96,156,.24);
box-shadow:inset 0 0 0 1px rgba(36,96,156,.55);
}
#GCwidget div.calendar td.label-info a{
color:var(--brand-deep, #17416E); font-weight:700;
}
#GCwidget div.calendar td.label-warning{ /* платен */
background:rgba(180,118,47,.15);
box-shadow:inset 0 0 0 1px rgba(180,118,47,.34);
}
#GCwidget div.calendar td.label-warning:hover{
background:rgba(180,118,47,.28);
box-shadow:inset 0 0 0 1px rgba(180,118,47,.60);
}
#GCwidget div.calendar td.label-warning a{
color:#7A4E14; font-weight:700;
}
#GCwidget div.calendar td.clickable{
transition:background-color .12s ease, box-shadow .12s ease;
}
#GCwidget div.calendar td.clickable:focus-within{ outline:2px solid var(--ink, #10202F); outline-offset:-2px; }
/* legend */
#GCwidget #gcw_p1_legend{
margin-top:.9rem;
padding-top:.8rem;
border-top:1px solid var(--rule, #CFDCE9);
font-size:.8125rem;
color:var(--ink-soft, #4A5C6E);
line-height:2;
}
#GCwidget #gcw_p1_legend .label{
display:inline-block;
width:1.4rem;
height:.75rem;
padding:0;
border-radius:0;
vertical-align:middle;
margin-right:.4rem;
}
/* swatches mirror the new calendar tints, with a stronger ring so a 13%
wash is still visible as a chip against the white panel */
#GCwidget #gcw_p1_legend .label-info{
background:rgba(36,96,156,.13);
box-shadow:inset 0 0 0 1px rgba(36,96,156,.65);
}
#GCwidget #gcw_p1_legend .label-warning{
background:rgba(180,118,47,.15) !important;
box-shadow:inset 0 0 0 1px rgba(180,118,47,.7);
}
/* ── slot table ─────────────────────────────────────────────────── */
#GCwidget #slot_list{
width:100%;
margin:1.25rem 0 !important;
border:1px solid var(--rule, #CFDCE9);
}
#GCwidget #slot_list > thead > tr > th{
background:#FAFCFE;
border-bottom:1px solid var(--rule, #CFDCE9);
padding:.6rem .8rem;
font-size:.625rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.11em;
color:var(--ink-soft, #4A5C6E);
}
#GCwidget #slot_list > tbody > tr > td{
padding:.7rem .8rem;
border-top:1px solid #EDF1F6;
font-size:.875rem;
vertical-align:middle;
}
/* the hour is what people scan for */
#GCwidget #slot_list > tbody > tr > td:first-child{
font-variant-numeric:tabular-nums;
font-size:1.0625rem;
font-weight:700;
letter-spacing:.01em;
color:var(--brand-deep, #17416E);
white-space:nowrap;
width:1%;
}
#GCwidget #slot_list > tbody > tr > td:last-child{ width:1%; white-space:nowrap; }
#GCwidget #slot_list.table-striped > tbody > tr:nth-of-type(odd){ background:#FBFCFE; }
#GCwidget #slot_list.table-hover > tbody > tr:hover{ background:var(--brand-wash, #EDF2F8); }
#GCwidget #slot_list em{ color:var(--ink-soft, #4A5C6E); font-style:normal; font-size:.8125rem; }
#GCwidget #slot_list .text-muted{ font-size:.8125rem; }
/* ── step 3: identification / login ─────────────────────────────── */
/* margin-top/bottom only — the `margin` shorthand here would cancel the
margin-left/right:auto that centres the form (same specificity, later
in the file). */
#gcw_p3_fm{ margin-top:0; margin-bottom:0; }
#gcw_p3_fm #gcw_p3_infm{ margin-bottom:1.4rem; }
#gcw_p3_fm #login_choice{
display:flex;
gap:.75rem;
flex-wrap:wrap;
padding-top:.25rem;
}
#gcw_p3_fm #login_choice .btn{ flex:1 1 auto; float:none !important; }
#gcw_p3_fm #validate_login{
border:1px solid var(--rule, #CFDCE9);
border-left:3px solid var(--brand, #24609C);
padding:1.25rem;
background:#FAFCFE;
}
#gcw_p3_fm #gcw_login_err,
#gcw_p3_fm #gcw_ins_code_err{
margin:0 0 .8rem !important;
font-size:.875rem;
color:var(--err, #A32B2B);
}
#gcw_p3_fm #gcw_cons_pnl,
#gcw_p3_fm #gcw_marketing_cons_pnl{ font-size:.8125rem; line-height:1.6; }
#gcw_p3_fm #gcw_cons_pnl input[type=checkbox],
#gcw_p3_fm #gcw_marketing_cons_pnl input[type=checkbox]{
width:1rem; height:1rem; margin-right:.35rem;
vertical-align:-2px; accent-color:var(--brand, #24609C);
}
#gcw_p3_fm #gcw_cons_pnl a{ color:var(--brand-deep, #17416E); text-decoration:underline; }
#gcw_p3_fm #gcw_p3_bb,
#gcw_p3_fm #gcw_p3_ok,
#gcw_p3_fm #gcw_p3_prnt{ margin-top:.5rem; }
#GCwidget #gcw_p2_bb{ margin-top:.25rem; }
#gcw_p3_fm #booking-ready .alert-success{ line-height:1.65; }
/* ── loading veil ─────────────────────────────────────────────────
GCWidgetBuilder writes `background: rgb(128,128,128) url(...)`
inline. Overriding background-COLOR only keeps the spinner image
the widget supplied, so no API-side asset path is needed here.
───────────────────────────────────────────────────────────────── */
#loading-indicator{
background-color:rgba(255,255,255,.72) !important;
opacity:1 !important;
filter:none !important;
-ms-filter:none !important;
}
/* ── tooltips ───────────────────────────────────────────────────── */
.tooltip-inner{
background:var(--ink, #10202F);
border-radius:2px;
font-size:.8125rem;
padding:.45rem .6rem;
max-width:260px;
text-align:left;
line-height:1.5;
}
.tooltip.top .tooltip-arrow{ border-top-color:var(--ink, #10202F); }
.tooltip.bottom .tooltip-arrow{ border-bottom-color:var(--ink, #10202F); }
.tooltip.left .tooltip-arrow{ border-left-color:var(--ink, #10202F); }
.tooltip.right .tooltip-arrow{ border-right-color:var(--ink, #10202F); }
/* ── narrow screens ─────────────────────────────────────────────── */
@media (max-width:520px){
#GCwidget #slot_list > tbody > tr > td{ padding:.6rem .5rem; }
#GCwidget #slot_list > tbody > tr > td:first-child{ font-size:1rem; }
#gcw_p3_fm #login_choice .btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
#GCwidget *, #gcw_p3_fm *{ transition:none !important; animation:none !important; }
}