/* ReBBu Unified Web: the old pages of the website in the new design. Their markup stays (habblet boxes with corner
   images, tabs, image buttons); these rules turn it into the panels, type and colours of the design system. They are
   loaded after the old styles and start with an id where the old rules do, so they win without !important. */

body.uw-legacy { background: var(--uw-sky) url(../../img/bg/pattern.png) repeat; color: var(--uw-text); font-family: var(--uw-font); font-size: 14px; }
body.uw-legacy #overlay { display: none; }

/* layout: the old columns stay, the page is centred under the new header */
body.uw-legacy #content-container:where(:not(#mypage-bg, #mypage-bg *)) { background: transparent; margin: 24px auto 40px auto; float: none; }
body.uw-legacy #content-container #container:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container #content:where(:not(#mypage-bg, #mypage-bg *)) { background: transparent; }

/* boxes become panels. The old Rounder script turns every .cbb into .cb with the layers .i1 .i2 .i3 (border images,
   white inside) and the corner rows .bt .bb; the panel is the .cb, its layers become transparent. */
body.uw-legacy #content-container .cbb:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .box:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb.process-template-box:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-panel); color: var(--uw-text); border-radius: var(--uw-radius); box-shadow: var(--uw-shadow); border: 1px solid rgba(255, 255, 255, .05); }
body.uw-legacy #content-container .cb .i1:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb .i2:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb .i3:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb .i1:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb .i2:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb .i3:where(:not(#mypage-bg, #mypage-bg *)) { background: transparent; border: 0; }
body.uw-legacy #content-container .cb .bt:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb .bb:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb .bt:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb .bb:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb .bt:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb .bb:where(:not(#mypage-bg, #mypage-bg *)) { display: none; }
/* nothing sticks out of the round corners: the panel clips what it holds (pictures reaching its edges), and the
   corner rows the Rounder script draws for .rounded boxes (square 1px lines in the box colour) go, the CSS rounds instead */
body.uw-legacy #content-container .cb:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .cb.process-template-box:where(:not(#mypage-bg, #mypage-bg *)) { overflow: clip; }
body.uw-legacy .rounded-container div[style*="height: 1px"][style*="overflow: hidden"] { display: none; }
body.uw-legacy #content-container .rounded:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .rounded:where(:not(#mypage-bg, #mypage-bg *)) { border-radius: var(--uw-radius-small); }
body.uw-legacy #content-container .habblet-container:where(:not(#mypage-bg, #mypage-bg *)) { margin-bottom: 18px; }

/* box titles in Volter, the colour of the old box as a bar on top */
body.uw-legacy #content-container .cb h2.title:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb h2.title:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container h2.heading:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .habblet-container h2.title:where(:not(#mypage-bg, #mypage-bg *)) { background: none; color: var(--uw-text); font: 700 18px/1.3 var(--uw-font-display);
	text-shadow: none; padding: 14px 16px 10px 16px; margin: 0; border-bottom: 2px solid var(--uw-line); height: auto; text-align: left; }
/* the title of a box with tabs stays where the old styles put it (left, the tabs right) */
body.uw-legacy #content-container .box-tabs-container:where(:not(#mypage-bg, #mypage-bg *)) { position: relative; min-height: 44px; }
body.uw-legacy #content-container .box-tabs-container h2:where(:not(#mypage-bg, #mypage-bg *)) { background: none; color: var(--uw-text); font: 700 18px/1.3 var(--uw-font-display);
	text-shadow: none; padding: 12px 16px 0 16px; margin: 0; border: 0; height: auto; }

body.uw-legacy #content-container .box-content:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .habblet-content-info:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .habblet:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-text); background: transparent; }
body.uw-legacy #content-container .box-content:where(:not(#mypage-bg, #mypage-bg *)) { padding: 12px 16px; }
body.uw-legacy #content-container p:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container li:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container td:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container th:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container label:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container h3:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container h4:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-text); }
body.uw-legacy #content-container h3:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container h4:where(:not(#mypage-bg, #mypage-bg *)) { font-family: var(--uw-font); font-weight: 700; }
body.uw-legacy #content-container .gray:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .date:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container small:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-muted); }

/* links */
body.uw-legacy #content-container a:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-link); }
body.uw-legacy #content-container a:where(:not(#mypage-bg, #mypage-bg *)):hover { color: #b3ddff; }

/* tabs above boxes */
body.uw-legacy #content-container .box-tabs-container:where(:not(#mypage-bg, #mypage-bg *)) { background: transparent; border-bottom: 2px solid var(--uw-line); }
body.uw-legacy #content-container ul.box-tabs li:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container ul.box-tabs li a:where(:not(#mypage-bg, #mypage-bg *)) { background: none; }
body.uw-legacy #content-container ul.box-tabs li a:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-muted); font-weight: 500; padding: 6px 10px; }
body.uw-legacy #content-container ul.box-tabs li.selected a:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-text); box-shadow: inset 0 -3px 0 var(--uw-gold); }
body.uw-legacy #content-container ul.box-tabs li .tab-spacer:where(:not(#mypage-bg, #mypage-bg *)) { display: none; }

/* lists of the old habblets */
body.uw-legacy #content-container .habblet-list li:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container ul.habblet-list li.even:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container ul.habblet-list li.odd:where(:not(#mypage-bg, #mypage-bg *)) { background-color: transparent; border-bottom: 1px solid var(--uw-line); color: var(--uw-text); }
body.uw-legacy #content-container .habblet-list li.odd:where(:not(#mypage-bg, #mypage-bg *)) { background-color: rgba(255, 255, 255, .03); }

/* buttons: the old image buttons get the pixel buttons' shape */
body.uw-legacy #content-container a.new-button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container a.new-button:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-gold); border-radius: var(--uw-radius); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); height: auto; padding: 0; border: 0; }
body.uw-legacy #content-container a.new-button b:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container a.new-button b:where(:not(#mypage-bg, #mypage-bg *)) { background: none; color: #3a2600; font: 700 13px/1.2 var(--uw-font); padding: 7px 14px 10px 14px; height: auto; display: block; text-shadow: none; }
body.uw-legacy #content-container a.new-button i:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container a.new-button i:where(:not(#mypage-bg, #mypage-bg *)) { display: none; }
body.uw-legacy #content-container a.new-button.green-button:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-classic-green); }
body.uw-legacy #content-container a.new-button.green-button b:where(:not(#mypage-bg, #mypage-bg *)) { color: #fff; }
body.uw-legacy #content-container input[type=submit]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input[type=button]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input.submit:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input[type=submit]:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-gold); color: #3a2600; border: 0; padding: 7px 14px 9px 14px; font: 700 13px/1.2 var(--uw-font);
	border-radius: var(--uw-radius); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); cursor: pointer; height: auto; width: auto; text-indent: 0; }

/* form fields */
body.uw-legacy #content-container input[type=text]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input[type=password]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input:not([type]):where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container textarea:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container select:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input.register-text:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input.login-field:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container select:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-night); color: var(--uw-text); border: 2px solid var(--uw-line); padding: 6px 8px; font: 400 14px var(--uw-font); }
body.uw-legacy #content-container input:where(:not(#mypage-bg, #mypage-bg *)):focus,
body.uw-legacy #content-container textarea:where(:not(#mypage-bg, #mypage-bg *)):focus,
body.uw-legacy #container input:where(:not(#mypage-bg, #mypage-bg *)):focus { border-color: var(--uw-link); outline: none; }

/* tables */
body.uw-legacy #content-container table:where(:not(#mypage-bg, #mypage-bg *)) { border-color: var(--uw-line); }
body.uw-legacy #content-container table td:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container table th:where(:not(#mypage-bg, #mypage-bg *)) { border-color: var(--uw-line); }

/* info, error and ok boxes */
body.uw-legacy #content-container .rounded:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .rounded:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-panel-raised); color: var(--uw-text); }
body.uw-legacy #container .rounded-red:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .rounded-red:where(:not(#mypage-bg, #mypage-bg *)) { box-shadow: inset 6px 0 0 var(--uw-danger); }
body.uw-legacy #container .rounded-blue:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-panel-raised); }
body.uw-legacy #container .rounded-darkgray:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .rounded-gray:where(:not(#mypage-bg, #mypage-bg *)) { background: var(--uw-night); }

/* the process pages (sign in, register, password): the new header replaces the old one in the box */
body.uw-legacy.process-template #container:where(:not(#mypage-bg, #mypage-bg *)) { margin: 24px auto 40px auto; background: transparent; }
body.uw-legacy.process-template #container #header:where(:not(#mypage-bg, #mypage-bg *)) { display: none; }
body.uw-legacy.process-template #container #content:where(:not(#mypage-bg, #mypage-bg *)) { background: transparent; color: var(--uw-text); }
body.uw-legacy.process-template #container .white:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy.process-template #container .register-label:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy.process-template #container label:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy.process-template #container h2:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy.process-template #container h3:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy.process-template #container p:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-text); }
body.uw-legacy.process-template #container h2.heading:where(:not(#mypage-bg, #mypage-bg *)) { font: 700 18px/1.3 var(--uw-font-display); background: none; }
body.uw-legacy.process-template #container .numbering:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-gold); }
body.uw-legacy.process-template #container a:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-link); }

/* the help window */
body.uw-legacy.plain-template { background: var(--uw-sky) url(../../img/bg/pattern.png) repeat; }
body.uw-legacy.plain-template #container:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy.plain-template #content { background: transparent; color: var(--uw-text); }

/* smooth shapes: buttons and fields rounder than the small radius of panels */
body.uw-legacy #content-container a.new-button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container a.new-button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input[type=submit]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input[type=button]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input.submit:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input[type=submit]:where(:not(#mypage-bg, #mypage-bg *)) { border-radius: var(--uw-radius-small); }
body.uw-legacy #content-container input[type=text]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input[type=password]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container input:not([type]):where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container textarea:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container select:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input.register-text:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container input.login-field:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container select:where(:not(#mypage-bg, #mypage-bg *)) { border-radius: 10px; border-width: 1px; }

/* titles like the panels of the new pages: bold capitals, no colour bar */
body.uw-legacy #content-container .cb h2.title:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb h2.title:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container h2.heading:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .habblet-container h2.title:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .box-tabs-container h2:where(:not(#mypage-bg, #mypage-bg *)) { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; box-shadow: none; }
body.uw-legacy #content-container .cb h2.title:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .habblet-container h2.title:where(:not(#mypage-bg, #mypage-bg *)) { border-bottom-width: 1px; }

/* inside the panels the old light backgrounds and dark text colours go: every element takes the panel's background
   and text colour; links, buttons, fields and tabs have their own rules above with a higher specificity */
body.uw-legacy #content-container .cb *:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb *:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box *:where(:not(#mypage-bg, #mypage-bg *)) { background-color: transparent; border-color: var(--uw-line); }
body.uw-legacy #content-container .cb *:not(a):where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cbb *:not(a):where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box *:not(a):where(:not(#mypage-bg, #mypage-bg *)) { color: inherit; }
/* what keeps its colour: the hotel of a room, the stripes of old lists, emphasised bars */
body.uw-legacy #content-container .cb .room-hotel-classic .room-enter:where(:not(#mypage-bg, #mypage-bg *)) { color: #8fdc84; }
body.uw-legacy #content-container .cb .room-hotel-modern .room-enter:where(:not(#mypage-bg, #mypage-bg *)) { color: #d2a6ff; }
body.uw-legacy #content-container .cb ul.habblet-list li.odd:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb li.odd:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb tr.odd:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb tr.even:nth-child(odd):where(:not(#mypage-bg, #mypage-bg *)) { background-color: rgba(255, 255, 255, .03); }
body.uw-legacy #content-container .cb h3:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb .heading-bar:where(:not(#mypage-bg, #mypage-bg *)) { color: var(--uw-text); }
body.uw-legacy #content-container .cb input[type=text]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb input[type=password]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb input:not([type]):where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb textarea:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb select:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box input.register-text:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box select:where(:not(#mypage-bg, #mypage-bg *)) { background-color: var(--uw-night); }
body.uw-legacy #content-container .cb a.new-button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box a.new-button:where(:not(#mypage-bg, #mypage-bg *)) { background-color: var(--uw-gold); }
body.uw-legacy #content-container .cb a.new-button b:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box a.new-button b:where(:not(#mypage-bg, #mypage-bg *)) { color: #3a2600; }
body.uw-legacy #content-container .cb a.new-button.green-button:where(:not(#mypage-bg, #mypage-bg *)) { background-color: var(--uw-classic-green); }
body.uw-legacy #content-container .cb a.new-button.green-button b:where(:not(#mypage-bg, #mypage-bg *)) { color: #fff; }
body.uw-legacy #content-container .cb input[type=submit]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb input[type=button]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #content-container .cb button:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box input[type=submit]:where(:not(#mypage-bg, #mypage-bg *)),
body.uw-legacy #container .process-template-box input.submit:where(:not(#mypage-bg, #mypage-bg *)) { background-color: var(--uw-gold); color: #3a2600; }

/* personal and group pages: a roomy bar above the page the user designed (that page keeps its own look and size) */
body.uw-legacy #mypage-wrapper .box-tabs-container { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; min-height: 0; padding: 22px 28px; border-bottom: 1px solid var(--uw-line); }
body.uw-legacy #mypage-wrapper .box-tabs-container h2.page-owner { order: -2; position: static; float: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px;
	font: 700 30px/1.15 var(--uw-font-display); text-transform: none; letter-spacing: 0; color: var(--uw-text); }
body.uw-legacy #mypage-wrapper ul.box-tabs { order: -1; display: flex; gap: 4px; height: auto; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--uw-night); }
body.uw-legacy #mypage-wrapper ul.box-tabs li { float: none; height: auto; margin: 0; }
body.uw-legacy #mypage-wrapper ul.box-tabs li a { float: none; display: block; height: auto; max-width: none; padding: 8px 18px; border-radius: 999px; top: 0; font: 500 14px/1.2 var(--uw-font); color: var(--uw-muted); box-shadow: none; }
body.uw-legacy #mypage-wrapper ul.box-tabs li a:hover { color: var(--uw-text); }
body.uw-legacy #mypage-wrapper ul.box-tabs li.selected a { background: var(--uw-panel-raised); color: #fff; box-shadow: none; }
/* the page itself keeps its size (the stickers and widgets sit at stored places); the frame around it gets room */
/* the wide page: the designable area is as wide as the other pages, the same for every visitor (the stickers and
   widgets sit at stored places), on smaller screens it scrolls sideways */
body.uw-legacy #content-container:has(#mypage-wrapper) { width: auto; max-width: var(--uw-width); padding: 0 var(--uw-gutter); box-sizing: border-box; }
body.uw-legacy #content-container:has(#mypage-wrapper) #container,
body.uw-legacy #content-container:has(#mypage-wrapper) #content,
body.uw-legacy #mypage-wrapper { width: auto; float: none; }
body.uw-legacy #mypage-wrapper #mypage-content { width: auto; margin: 0; padding: 24px; overflow-x: auto; }
body.uw-legacy #mypage-wrapper #mypage-bg { width: max-content; }
body.uw-legacy #mypage-wrapper #playground, body.uw-legacy #mypage-wrapper #playground-outer { width: var(--uw-canvas); }
body.uw-legacy #mypage-wrapper .box-tabs-container h2.page-owner { display: none; }
body.uw-legacy #mypage-wrapper #top-toolbar { display: flex; align-items: center; gap: 14px; padding: 0 0 16px 0; }
body.uw-legacy #mypage-wrapper #top-toolbar ul { float: none; display: flex; gap: 10px; margin: 0; padding: 0; }
body.uw-legacy #mypage-wrapper #top-toolbar ul li { margin: 0; }
body.uw-legacy #mypage-wrapper #top-toolbar ul a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--uw-panel-raised); color: var(--uw-text); text-decoration: none; font-weight: 500; }
body.uw-legacy #mypage-wrapper #top-toolbar form { float: none; width: auto !important; margin: 0 0 0 auto; display: flex; gap: 10px; }
body.uw-legacy #mypage-wrapper #mypage-bg { border-radius: var(--uw-radius-small); overflow: clip; }

/* the page title of personal and group pages stands on the sky: dark text */
body.uw-legacy #content-container .upg-head .uw-h1 { color: var(--uw-night); }
body.uw-legacy #content-container .upg-head .uw-lead { color: #1d3550; }
/* the area keeps its size, the frame never grows past the window (its own scroll bar takes the rest) */
body.uw-legacy #content-container:has(#mypage-wrapper) { width: 100%; }

/* the dialogs of personal and group pages (guestbook, delete, concurrent editing) live outside the page container */
body.uw-legacy .cb.topdialog, body.uw-legacy .cbb.topdialog, body.uw-legacy .dialog-grey { background: var(--uw-panel); color: var(--uw-text); border-radius: var(--uw-radius);
	box-shadow: var(--uw-shadow); border: 1px solid rgba(255, 255, 255, .06); overflow: clip; }
body.uw-legacy .topdialog .i1, body.uw-legacy .topdialog .i2, body.uw-legacy .topdialog .i3, body.uw-legacy .topdialog .topdialog-body,
body.uw-legacy .dialog-grey .dialog-grey-top, body.uw-legacy .dialog-grey .dialog-grey-content, body.uw-legacy .dialog-grey .dialog-grey-body { background: transparent; border: 0; }
body.uw-legacy .topdialog .bt, body.uw-legacy .topdialog .bb { display: none; }
/* (the HTML5 badge editor in a dialog keeps its own colours) */
body.uw-legacy .topdialog *:where(:not(.h5-badge, .h5-badge *)), body.uw-legacy .dialog-grey *:where(:not(.h5-badge, .h5-badge *)) { color: inherit; }
body.uw-legacy .topdialog a, body.uw-legacy .dialog-grey a { color: var(--uw-link); }
body.uw-legacy .topdialog h2.title, body.uw-legacy .dialog-grey h3 { margin: 0; padding: 16px 20px 12px 20px; background: none; border-bottom: 1px solid var(--uw-line);
	font: 700 15px/1.3 var(--uw-font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--uw-text); }
body.uw-legacy .topdialog .topdialog-body, body.uw-legacy .dialog-grey .dialog-grey-body { padding: 16px 20px 20px 20px; }
body.uw-legacy .topdialog textarea, body.uw-legacy .topdialog input[type=text], body.uw-legacy .topdialog select {
	background: var(--uw-night); color: var(--uw-text); border: 1px solid var(--uw-line); border-radius: 10px; padding: 8px 10px; font: 400 14px var(--uw-font); box-sizing: border-box; max-width: 100%; }

/* the designed page keeps the old look: the type and colours the old styles expect (the dark theme above does not
   reach into it) */
body.uw-legacy #mypage-bg { color: #000; font: 11px/normal Verdana, Arial, Helvetica, sans-serif; }
/* the page actions in the head are buttons of the design system; the old styles give their ids icons, padding and link
   colours */
body.uw-legacy #content-container .upg-actions a.uw-button { background: var(--uw-panel-raised); padding: 7px 14px 9px 14px; margin: 0; color: #fff; }
body.uw-legacy #content-container .upg-actions a.upg-action { background: var(--uw-night); }
body.uw-legacy #content-container .upg-actions a.uw-button-gold { background: linear-gradient(to bottom, #ffd24d, var(--uw-gold)); color: #3a2600; }
/* the dialogs and menus of personal and group pages (guestbook, delete, group settings, the group's edit menu): the
   design's type and buttons like on the page */
body.uw-legacy .topdialog, body.uw-legacy .dialog-grey, body.uw-legacy .bottom-bubble { font-family: var(--uw-font); font-size: 14px; }
body.uw-legacy .bottom-bubble h3, body.uw-legacy .bottom-bubble a, body.uw-legacy #group-tools h3, body.uw-legacy #group-tools a { font: 500 13px/1.4 var(--uw-font); }
body.uw-legacy .bottom-bubble h3, body.uw-legacy #group-tools h3 { font-weight: 700; }
body.uw-legacy .topdialog ul.box-tabs li a { font: 500 13px/1.2 var(--uw-font); }
body.uw-legacy .topdialog a.new-button, body.uw-legacy .dialog-grey a.new-button { background: var(--uw-gold); border-radius: var(--uw-radius-small); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); height: auto; padding: 0; border: 0; }
body.uw-legacy .topdialog a.new-button b, body.uw-legacy .dialog-grey a.new-button b { background: none; color: #3a2600; font: 700 13px/1.2 var(--uw-font); padding: 7px 14px 10px 14px; height: auto; display: block; text-shadow: none; }
body.uw-legacy .topdialog a.new-button i, body.uw-legacy .dialog-grey a.new-button i { display: none; }
body.uw-legacy #guestbook-form textarea { font: 400 14px/1.5 var(--uw-font); }
/* edit mode of personal and group pages: cancel as a quiet button, save in the Classic green (white text from 4.8:1),
   and the edit menu of a sticker or widget (and the report menus of the view mode, the same old menu) as a small
   panel of the design (it stays outside the page's own look) */
body.uw-legacy #mypage-wrapper a.new-button.red-button { background: var(--uw-panel-raised); }
body.uw-legacy #mypage-wrapper a.new-button.green-button { background: linear-gradient(to bottom, #2f8226, #276d1f); }
body.uw-legacy #mypage-wrapper a.new-button.red-button b,
body.uw-legacy #mypage-wrapper a.new-button.green-button b { color: #fff; }
body.uw-legacy #edit-menu, body.uw-legacy div.menu { width: 220px; font: 400 13px/1.45 var(--uw-font); color: var(--uw-text); background: var(--uw-panel); border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--uw-radius-small); box-shadow: var(--uw-shadow); overflow: clip; }
body.uw-legacy #edit-menu div.menu-header, body.uw-legacy div.menu div.menu-header { background: none; padding: 10px 12px 9px 14px; border-bottom: 1px solid var(--uw-line); }
body.uw-legacy #edit-menu div.menu-header h3, body.uw-legacy div.menu div.menu-header h3 { margin: 0; font: 700 13px/1.3 var(--uw-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--uw-text); }
body.uw-legacy #edit-menu div.menu-exit, body.uw-legacy div.menu div.menu-exit { cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; margin: -2px -4px 0 0; border-radius: 6px; }
body.uw-legacy #edit-menu div.menu-exit:hover, body.uw-legacy div.menu div.menu-exit:hover { background: var(--uw-panel-raised); }
body.uw-legacy #edit-menu div.menu-exit img, body.uw-legacy div.menu div.menu-exit img { display: none; }
body.uw-legacy #edit-menu div.menu-exit::after, body.uw-legacy div.menu div.menu-exit::after { content: "\00d7"; font: 700 16px/1 var(--uw-font); color: var(--uw-muted); }
body.uw-legacy #edit-menu div.menu-body, body.uw-legacy div.menu div.menu-body { display: block; background: none; padding: 12px 14px 6px 14px; }
body.uw-legacy #edit-menu div.menu-bottom, body.uw-legacy div.menu div.menu-bottom { display: none; }
body.uw-legacy #edit-menu p, body.uw-legacy div.menu p { margin: 0 0 10px 0; color: var(--uw-muted); }
body.uw-legacy #edit-menu select, body.uw-legacy div.menu select { width: 100%; box-sizing: border-box; margin: 0 0 10px 0; padding: 7px 9px; background: var(--uw-night); color: var(--uw-text);
	border: 1px solid var(--uw-line); border-radius: 10px; font: 400 13px var(--uw-font); }
body.uw-legacy #edit-menu input[type=button], body.uw-legacy div.menu input[type=button] { width: 100%; margin: 0 0 8px 0; padding: 8px 12px 10px 12px; border: 0; border-radius: var(--uw-radius-small);
	background: var(--uw-panel-raised); color: #fff; font: 700 13px/1.2 var(--uw-font); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); cursor: pointer; }
body.uw-legacy #edit-menu #edit-menu-remove-button { background: #b8323a; }
/* the inventory and the web shop of personal and group pages (one dialog with two tabs): tabs as pills, the
   categories as a list like the menus, the headings in the design's type; the items keep their pictures */
body.uw-legacy .topdialog a.topdialog-exit { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
body.uw-legacy .topdialog a.topdialog-exit:hover { background: var(--uw-panel-raised); }
body.uw-legacy .topdialog a.topdialog-exit img { display: none; }
body.uw-legacy .topdialog a.topdialog-exit::after { content: "\00d7"; font: 700 20px/1 var(--uw-font); color: var(--uw-muted); }
body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs { display: flex; gap: 4px; height: auto; margin: 10px 14px 0 14px; padding: 4px; border: 0; border-radius: 999px; background: var(--uw-night); width: max-content; }
body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li { float: none; height: auto; margin: 0; background: none; }
body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li .tab-spacer { display: none; }
body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li a { float: none; display: block; height: auto; padding: 6px 16px; border-radius: 999px; background: none; font: 500 13px/1.2 var(--uw-font); color: var(--uw-muted); text-decoration: none; }
body.uw-legacy .topdialog .topdialog-tabs ul.box-tabs li.selected a { background: var(--uw-panel-raised); color: #fff; }
body.uw-legacy #purchase-main-dialog h4 { margin: 0 0 8px 0; font: 700 12px/1.3 var(--uw-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--uw-muted); }
body.uw-legacy #purchase-main-dialog ul.purchase-main-category,
body.uw-legacy #purchase-main-dialog ul.purchase-subcategory-list { list-style: none; margin: 0; padding: 0; }
body.uw-legacy #purchase-main-dialog ul.purchase-main-category li { background: none; margin: 0 0 4px 0; padding: 0; }
body.uw-legacy #purchase-main-dialog ul.purchase-main-category li > div { background: var(--uw-panel-raised); color: var(--uw-text); border-radius: 8px; padding: 6px 10px; font: 500 13px/1.3 var(--uw-font); cursor: pointer; }
body.uw-legacy #purchase-main-dialog ul.purchase-subcategory-list { margin: 4px 0 6px 8px; }
body.uw-legacy #purchase-main-dialog ul.purchase-subcategory-list li > div { background: none; padding: 4px 10px; font-size: 12px; color: var(--uw-muted); }
body.uw-legacy #purchase-main-dialog ul.purchase-main-category li.selected-main-category > div,
body.uw-legacy #purchase-main-dialog ul.purchase-main-category li.selected-main-category-no-subcategories > div,
body.uw-legacy #purchase-main-dialog ul.purchase-subcategory-list li.subcategory-selected > div { background: var(--uw-gold); color: #3a2600; }
body.uw-legacy #purchase-main-dialog li.webstore-item-empty { background-image: none; background-color: var(--uw-night); border-radius: 6px; }
body.uw-legacy #purchase-main-dialog #webstore-preview-price, body.uw-legacy #purchase-main-dialog #webstore-preview-purse,
body.uw-legacy #purchase-main-dialog #webstore-preview-price *, body.uw-legacy #purchase-main-dialog #webstore-preview-purse * { font-family: var(--uw-font); font-size: 13px; }
/* in the dialogs a cancel button is quiet, the button that goes on stays gold */
body.uw-legacy .topdialog a.new-button[id$="-cancel"], body.uw-legacy .dialog-grey a.new-button[id$="-cancel"] { background: var(--uw-panel-raised); }
/* (the old buttons.css sets the text of every image button black with !important) */
body.uw-legacy .topdialog a.new-button[id$="-cancel"] b, body.uw-legacy .dialog-grey a.new-button[id$="-cancel"] b { color: #fff !important; }
/* the shop dialog, larger than the old one (596px): categories 220px, the items seven in a row, the preview 226px with
   a picture of 200px, the lists 410px high; the close button under the preview. The categories on the night colour
   without the old pattern, thin dark scroll bars. */
body.uw-legacy #purchase-main-dialog { width: 960px; }
/* (the shop's script sets the old height of 324px on the element itself) */
body.uw-legacy #purchase-main-dialog-body { height: 500px !important; }
body.uw-legacy #purchase-main-dialog #webstore-categories-container, body.uw-legacy #purchase-main-dialog #inventory-categories-container,
body.uw-legacy #purchase-main-dialog #webstore-categories, body.uw-legacy #purchase-main-dialog #inventory-categories { width: 220px; }
body.uw-legacy #purchase-main-dialog #webstore-items-container, body.uw-legacy #purchase-main-dialog #inventory-items-container { left: 236px; width: 440px; }
body.uw-legacy #purchase-main-dialog #webstore-content-container.avatar #webstore-items-container { width: 656px; }
body.uw-legacy #purchase-main-dialog #webstore-preview-container, body.uw-legacy #purchase-main-dialog #inventory-preview-container { left: 692px; width: 226px; height: 456px; }
body.uw-legacy #purchase-main-dialog #webstore-close-container { left: 692px; width: 226px; top: 456px; }
body.uw-legacy #purchase-main-dialog #webstore-categories, body.uw-legacy #purchase-main-dialog #inventory-categories,
body.uw-legacy #purchase-main-dialog #webstore-items, body.uw-legacy #purchase-main-dialog #inventory-items { height: 410px; scrollbar-width: thin; scrollbar-color: var(--uw-line) transparent; }
/* (the shop's script sets the old 306px on the web shop's two lists themselves) */
body.uw-legacy #purchase-main-dialog #webstore-categories, body.uw-legacy #purchase-main-dialog #webstore-items { height: 410px !important; }
body.uw-legacy #purchase-main-dialog #webstore-categories, body.uw-legacy #purchase-main-dialog #inventory-categories { background: var(--uw-night); border-radius: 8px; padding: 6px; box-sizing: border-box; }
body.uw-legacy #purchase-main-dialog #webstore-preview-box, body.uw-legacy #purchase-main-dialog #inventory-preview-box { height: 200px; display: flex; align-items: center; justify-content: center; }
body.uw-legacy #purchase-main-dialog ul.purchase-main-category, body.uw-legacy #purchase-main-dialog ul.purchase-main-category li { border: 0; }
body.uw-legacy #purchase-main-dialog #webstore-preview-price, body.uw-legacy #purchase-main-dialog #webstore-preview-purse { border-bottom: 1px solid var(--uw-line); }
body.uw-legacy #purchase-main-dialog #webstore-preview-box, body.uw-legacy #purchase-main-dialog #inventory-preview-box { border: 1px solid var(--uw-line); border-radius: 8px; background: var(--uw-night); }
body.uw-legacy .topdialog a.topdialog-exit { background: none; }
/* the frame of the designed page: room for the page with its old 3px edges (and the dashed frame of the edit mode),
   so it fits without a scroll bar where the page is wide enough; where it scrolls, a thin dark bar */
body.uw-legacy #mypage-wrapper #mypage-content { padding-left: 16px; padding-right: 16px; scrollbar-width: thin; scrollbar-color: var(--uw-line) transparent; }
/* the report menus: cancel quiet, report gold */
body.uw-legacy div.menu button { margin: 6px 0 0 6px; padding: 7px 12px 9px 12px; border: 0; border-radius: var(--uw-radius-small); background: var(--uw-gold); color: #3a2600;
	font: 700 13px/1.2 var(--uw-font); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); cursor: pointer; }
body.uw-legacy div.menu button[id$="-cancel"] { background: var(--uw-panel-raised); color: #fff; }
/* the group settings and other dialogs: the old 10px grey explanations readable, the character counter as text, red
   buttons (delete) on a dark red with their white text */
body.uw-legacy .topdialog div.description p, body.uw-legacy .topdialog p.description-note { color: var(--uw-muted); font-size: 13px; line-height: 1.45; }
body.uw-legacy .topdialog input.amount, body.uw-legacy .topdialog #group_description-counter { background: transparent; border: 0; color: var(--uw-muted); width: 3.5em; padding: 0; }
body.uw-legacy .topdialog a.new-button.red-button, body.uw-legacy .dialog-grey a.new-button.red-button { background: #b8323a; }
/* the badge editor of a group (HTML5) in its dialog: tabs as pills, the chosen one gold, the buttons of the design */
body.uw-legacy .topdialog .h5-badge { color: var(--uw-text); }
body.uw-legacy .topdialog .h5-badge h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--uw-muted); }
body.uw-legacy .topdialog .h5-badge .h5-badge-tabs span { padding: 4px 10px; border: 0; border-radius: 999px; background: var(--uw-panel-raised); color: var(--uw-text); }
body.uw-legacy .topdialog .h5-badge .h5-badge-tabs span.h5-active { background: var(--uw-gold); color: #3a2600; }
body.uw-legacy .topdialog .h5-badge .h5-button { padding: 7px 14px 9px 14px; border: 0; border-radius: var(--uw-radius-small); background: var(--uw-panel-raised); color: #fff;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); font-weight: 700; font-size: 13px; }
body.uw-legacy .topdialog .h5-badge .h5-button.h5-active { background: var(--uw-gold); color: #3a2600; }
/* the member list of a group: disabled buttons quiet and dimmed (the old buttons.css sets their text with !important),
   offline members in the muted colour */
body.uw-legacy .topdialog a.new-button.group-memberlist-button-disabled { background: var(--uw-panel-raised); opacity: .55; cursor: default; }
body.uw-legacy .topdialog a.new-button.group-memberlist-button-disabled b { color: var(--uw-muted) !important; }
body.uw-legacy #group-memberlist-members-list li span, body.uw-legacy #group-memberlist-members-list li.offline span { color: var(--uw-muted); }
body.uw-legacy #group-memberlist-members-list li.online span { color: var(--uw-text); }
/* the shop's preview: a background's preview is an empty element with the pattern, it takes the whole box */
body.uw-legacy #purchase-main-dialog #webstore-preview-box > div, body.uw-legacy #purchase-main-dialog #inventory-preview-box > div { flex: 1 1 auto; align-self: stretch; }
/* the empty inventory: the old white speech bubble keeps dark text */
body.uw-legacy .topdialog .blackbubble, body.uw-legacy .topdialog .blackbubble * { color: #1d2433; }
/* the edit mode's message box: the text first, the button below it on the right (the old buttons.css floats every
   image button to the right, and the script puts the button before the text) */
body.uw-legacy #myhabbo-message .topdialog-body, body.uw-legacy #myhabbo-message [id$="-body"] { display: flex; flex-direction: column-reverse; gap: 14px; }
body.uw-legacy #myhabbo-message p { margin: 0; }
body.uw-legacy #myhabbo-message p:has(> a.new-button) { display: flex; justify-content: flex-end; }
body.uw-legacy #myhabbo-message a.new-button { float: none; }

/* the tags of a personal or group page as on the dashboard: "#tag" in white on a coloured pill, the five colours in
   turn; the small add and remove marks of the page's script stay inside the pill (the rest of the widget keeps its
   old look) */
#mypage-bg div#profile-tags-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; border: 0; background: none; }
#mypage-bg .tag-search-rowholder { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 4px 11px; border-radius: 999px; background: #2a6fb3; }
#mypage-bg .tag-search-rowholder:nth-of-type(5n+2) { background: #c8433f; }
#mypage-bg .tag-search-rowholder:nth-of-type(5n+3) { background: #b6409a; }
#mypage-bg .tag-search-rowholder:nth-of-type(5n+4) { background: #2e7d34; }
#mypage-bg .tag-search-rowholder:nth-of-type(5n+5) { background: #a85a0c; }
#mypage-bg a.tag { color: #fff; font: 500 13px/1.35 var(--uw-font); text-decoration: none; }
#mypage-bg a.tag::before { content: "#"; }
#mypage-bg a.tag:hover { color: #ffe08a; text-decoration: none; }
#mypage-bg img.tag-delete-link, #mypage-bg img.tag-add-link { top: 0; margin: 0; }