/* ============================================================
   responsive.css
   Mobile / small-screen rules for buy-realtraffic.com
   Added 24 Aug 2026. Loaded last, so it overrides the rules
   in tooplate_style.css without those files being changed.
   Delete the one <link> line in templates/header.php to
   switch all of this off again.
   ============================================================ */

/* Nothing should ever be able to push the page wider than the
   screen. This is what stops the sideways scrolling.          */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Pictures shrink to fit instead of forcing the page wide.    */
img {
  max-width: 100%;
  height: auto;
}

/* The header banner was pinned to exactly 1000px.             */
.head1-banner {
  width: 100%;
  max-width: 1000px;
}

/* The shadowed box that holds the whole page had width:1000px
   written straight into the tag, so it needs !important.      */
#tooplate_wrapper > div[style*="box-shadow"] {
  width: 100% !important;
  max-width: 1000px !important;
}

/* Tables were built for a desktop screen.                     */
#tooplate_main table {
  max-width: 100%;
}

/* ============================================================
   THE EMPTY SIDEBAR CELL

   Every page's main layout table starts with an empty cell,
   <td width="145">. It holds nothing at all - no text, no
   image, no link, nothing (checked on all 9 pages) - but it
   still takes up room and pushes everything after it to the
   right.

   This is what was throwing the alignment out. Measured on the
   sign-up page before this rule, the content sat 14px further
   from the left edge than the right at EVERY screen size:
   768px wide -> 29 left / 15 right, 1024 -> 56/42,
   1280 -> 184/170, 1440 -> 264/250. On a phone it was worse
   because the cell took 36px and pushed the form off the side
   of the screen entirely.

   Removed at every width, not just on phones. Every one of
   those sizes is dead centre now.
   ============================================================ */
#tooplate_content > table > tbody > tr > td[width="145"] {
  display: none;
}

/* ============================================================
   VERY NARROW PHONES (360px and similar)

   The page nests tables three deep and each level adds its own
   cell padding, which on a 360px screen added up to more than
   the screen itself and pushed the sign-up form over the edge.
   ============================================================ */
@media (max-width: 480px) {
  /* !important is needed here, and not for the usual reason.
     The phone block further down sets these same cells to 8px
     with a more specific selector, and it comes later in the
     file, so without this it simply wins and the form still
     hangs off the right on a 360px screen.                    */
  #tooplate_content td {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* ============================================================
   THE "I'M NOT A ROBOT" BOX ON THE SIGN-UP PAGE

   Google's reCAPTCHA box is a fixed 304px wide and cannot be
   resized - the width is set by Google, inside the frame.
   On a 320px phone (an old iPhone SE or a 5s) 304px plus the
   form's own border and padding came to more than the screen,
   so the sign-up panel hung off the right edge and its border
   was cut off. That one box was setting the minimum width for
   the whole form.

   Scaled down to 86% on those very narrow screens only, which
   brings it to 262px and lets the form sit square again.
   Measured at 320px: 21 items overhanging before, 0 after.
   Nothing at 360px or wider is affected by this - checked with
   the rule on and off in the same page load.
   ============================================================ */
@media (max-width: 340px) {
  #tooplate_main form .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
    width: 262px !important;
    height: 68px !important;
  }
  #tooplate_main form .g-recaptcha > div {
    width: 304px !important;
  }
}

/* ============================================================
   CONSISTENT SIDE SPACING

   The blocks down the middle of the page were each given their
   own left margin (0px on one, 18px on another, 58px on a
   third), so their left and right edges did not line up and
   the page looked untidy. Measured before this change, on a
   desktop screen: one block started 35px from the edge and
   finished 45px from the other side, the block under it
   started at 80px and finished at 70px.

   These rules put every block on the same left and right edge
   and let the padding on #tooplate_main provide the gutter.
   ============================================================ */
/* #tooplate_content had padding-left:5px and no matching
   padding on the right, which tilted everything inside it. */
#tooplate_content {
  padding-left: 0;
  padding-right: 0;
}

/* These blocks were each given a different left margin (0px on
   one, 18px on another, 58px on a third) while all being the
   same fixed width, so their left and right edges did not line
   up. Centring them makes the gap the same on both sides.

   Their WIDTH is deliberately left alone here. The 920px is
   load bearing on a full-size screen: the row of text ads
   inside it needs 909px to fit three across, so widening or
   narrowing this box drops the third ad onto its own line.

   Do NOT add max-width:100% here either. One .col_w880 sits
   inside an 850px box, so capping it at 100% shrinks it from
   920px to 850px and the third ad wraps onto its own row.
   The phone rules further down do cap it, which is right
   there because there is no room for columns anyway.         */
.col_w920,
.col_w920_satt,
.col_w880,
.col_w880_satt {
  margin-left: auto;
  margin-right: auto;
}

/* NOTE about the row of text ads on the home page.

   That block is 850px wide and centred inside a 940px column,
   so it sits about 45px further in on each side than the
   blocks above and below it. It is even on both sides, so it
   does not look crooked - it is just narrower.

   It is set that way by a style written directly into the tag
   ("max-width: 850px; margin: 2.5em auto"), which is a
   deliberate choice by whoever built it, so I have left it
   alone rather than overrule it. If you would rather it lined
   up with the rest of the page, uncomment the block below.

#tooplate_content > .col_w880:nth-child(2) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

*/

/* NOTE: .fp_box and .home_intro p are deliberately NOT touched
   here. Those two are the side-by-side columns that hold the
   text ads on a full-size screen. Widening them at desktop
   size makes the three ads run together into one paragraph.
   They are only made full width inside the phone rules lower
   down, where there is no room for columns anyway.           */

/* ============================================================
   TABLETS AND SMALL LAPTOPS
   ============================================================ */
@media (max-width: 1020px) {
  #tooplate_main {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* The page is built on a fixed column grid (920px, 880px and
     so on). Below a full-size screen those columns have to give
     way, otherwise the content is simply cut off the side.     */
  .col_w920,
  .col_w920_satt,
  .col_w880,
  .col_w880_satt {
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }

  .fp_box,
  #tooplate_content > .col_w880:nth-child(2) > .fp_box {
    width: auto;
    max-width: 100%;
    margin-right: 0;
  }

  /* The intro paragraphs were floated at a fixed 660px. */
  .home_intro p {
    float: none;
    width: auto;
    max-width: 100%;
  }
}

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width: 767px) {

  body {
    font-size: 15px;
    line-height: 1.45;
  }

  /* The top menu ran off the side. Now it wraps onto as many
     lines as it needs and each item is big enough to tap.     */
  #tooplate_menu ul {
    display: block;
    padding: 4px 0;
  }

  #tooplate_menu ul li {
    display: inline-block;
  }

  #tooplate_menu ul li a {
    height: auto;
    line-height: 1.2;
    padding: 11px 10px;
    font-size: 14px;
  }

  /* Same for the row of links in the footer. */
  #tooplate_menu_footer_satt ul li a {
    height: auto;
    line-height: 1.2;
    padding: 10px 8px;
    font-size: 14px;
  }

  #tooplate_main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* The narrower side-by-side columns go one under the other. */
  .col_w260,
  .col_w260b,
  .col_w400,
  .col_w570 {
    float: none;
    width: auto;
    max-width: 100%;
    margin-right: 0;
  }

  /* NOTE: do not add "display: block" to table / tr / td here.
     It looks like it should help, but this page nests its
     content inside tables and #tooplate_main is set to
     overflow:hidden - breaking the table structure collapses
     that box to about 500px and silently cuts off most of the
     page. Widening the columns above is enough on its own.    */

  /* Form boxes fit the screen instead of forcing the sign-up
     and contact pages wider than the phone.                   */
  #tooplate_main input,
  #tooplate_main select,
  #tooplate_main textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Some of the layout tables were built with very generous
     cell padding (25px a side), which on a phone is most of
     the screen before any text is drawn.                      */
  #tooplate_main td[width],
  #tooplate_main table[cellpadding] td {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* The contact and sign-up forms are laid out as a two column
     table - label on the left, box on the right. Side by side
     that needs more width than a phone has, so on small screens
     the label sits above its box instead.

     Scoped to "form table" on purpose. Doing this to every
     table in #tooplate_main collapses the page (see the note
     further up).                                              */
  #tooplate_main form table,
  #tooplate_main form table tbody,
  #tooplate_main form table tr,
  #tooplate_main form table td {
    display: block;
    width: auto !important;
    max-width: 100%;
    text-align: left !important;
  }

  #tooplate_main form table td {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #tooplate_main form table td div[align="right"] {
    text-align: left !important;
  }

  #tooplate_main form input[type="text"],
  #tooplate_main form input[type="email"],
  #tooplate_main form input[type="password"],
  #tooplate_main form textarea,
  #tooplate_main form select {
    width: 100%;
  }

  /* Long links and pasted URLs wrap instead of stretching
     the page sideways.                                        */
  #tooplate_main a,
  #tooplate_main p,
  #tooplate_main td {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Anything with a hard pixel width written into the tag. */
  #tooplate_main img[width],
  #tooplate_main table[width] {
    width: auto !important;
    max-width: 100%;
  }
}

/* ---- Home page H1 -- added 26 Aug 2026 -------------------------------
   The home page previously had no <h1> at all. The global rule in
   tooplate_style.css sets h1 to 38px with NO line-height, so a heading
   that wraps to two lines overlaps itself. These rules fix that and
   scale it down on phones. Media queries sit BELOW the base rule so
   they win without needing !important. */
h1.brt-h1 {
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 18px 0;
	padding: 0;
}
@media (max-width: 767px) {
	h1.brt-h1 { font-size: 24px; line-height: 1.3; }
}
@media (max-width: 480px) {
	h1.brt-h1 { font-size: 21px; }
}

/* ---- Content alignment -- added 26 Aug 2026 --------------------------
   Three blocks sat on a different left edge from the rest of the page,
   and two of them were 920px wide inside an 850px parent. CSS resolves
   that over-constraint as margin-right:-70px, so they overhung the right
   hand side of the page. Widening the parents to 920px lines every block
   up on the same edge instead of narrowing the child, which would wrap
   the third text ad onto its own row (see the note further up).
   Desktop and tablet only - below 768px the phone rules already stack
   everything to full width, and they are correct as they are. */
@media (min-width: 768px) {
	#tooplate_content > .col_w880:nth-child(2) { max-width: 920px !important; }
	#tooplate_content > .col_w880:nth-child(2) > .fp_box { width: 920px !important; }
	#tooplate_wrapper > div > .col_w260.fp_box {
		width: 920px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* ---- Heading spacing -- added 26 Aug 2026 ---------------------------
   The theme sets h2 { margin: 0 0 0px } so the new headings sat flush
   against the paragraph underneath. Scoped to the content table only,
   so the member ad headlines in .fp_box keep their own tight spacing. */
#tooplate_main .shadow-inside h2,
#tooplate_main .shadow-inside h3 { margin: 24px 0 10px 0 !important; line-height: 1.25; }
#tooplate_main .shadow-inside h1 + h2 { margin-top: 6px !important; }


/* ---- Heading colour -- added 26 Aug 2026 ----------------------------
   Dan asked for the page headings in black instead of the burnt orange.
   Scoped to the content table so the member ad headlines in .fp_box keep
   their own brown, and the white heading in the tan call-to-action box is
   left alone. Revert = delete this block. */
#tooplate_main .shadow-inside h1,
#tooplate_main .shadow-inside h2,
#tooplate_main .shadow-inside h3 { color: #000000; }



/* ============================================================
   WIDE TABLES ON PHONES                     added 29 Aug 2026
   ------------------------------------------------------------
   Reported by Dan: on a phone the tables on textad.php,
   traffic_sites.php, your_commissions.php, promote.php and
   ref_details.php are not completely visible.

   What is actually happening: html, body (this file, top) and
   #tooplate_main (tooplate_style.css line 259, the theme's own
   clearfix) are all overflow-x:hidden. The record tables are
   built inside legacy <table id="AutoNumber1"> layout tables
   which size themselves to their widest content - 842px on
   traffic_sites - inside a 366px column. So the right-hand
   columns are not merely off screen, they are CLIPPED, and
   because nothing scrolls sideways there is no way to reach
   them at all. traffic_sites loses 4 of its 7 columns.

   max-width:100% was already on those tables and did nothing,
   because a table can never be laid out narrower than its
   min-content width. Two things therefore have to happen:
   shrink min-content where the content can reasonably wrap,
   and give the genuine record grids a scroll area of their own
   where it cannot.

   BREAKPOINT: measured, not guessed. With no fix at all the
   pages stop being cut off somewhere between 900px and 1000px
   wide (900 still loses 128 elements on traffic_sites.php,
   1000 loses none), so the rules below run up to 1000px. An
   earlier draft stopped at 900 and left every screen between
   901 and 999 - iPad landscape among them - still broken.
   ============================================================ */
@media (max-width: 1000px) {

  /* How much room a panel actually has, measured on the live
     pages: #tooplate_content is inset 20px a side from 768px
     up and the panel a further 38px inside that; on a phone it
     is 12px and a further 7px.                                */
  #tooplate_main { --brt-swipe-w: calc(100vw - 120px); }

  /* ---- 1. hard pixel widths written into the markup --------
     textad.php prints <div class="textad" style="width:600px">
     for every ad. An inline style attribute can only be beaten
     with !important.                                          */
  #tooplate_main .textad,
  #tooplate_main div[style*="width:600px"],
  #tooplate_main div[style*="width: 600px"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---- 2. let long strings break ---------------------------
     overflow-wrap:break-word was already set further up this
     file and is NOT enough: break-word deliberately does not
     change an element's min-content width, so the layout table
     around it still refused to shrink. "anywhere" does change
     it, which is the whole point here. This is what lets the
     referral URLs on promote.php and the email column on
     ref_details.php stop forcing the page wider than the phone. */
  #tooplate_main a,
  #tooplate_main p,
  #tooplate_main td,
  #tooplate_main li,
  #tooplate_main div {
    overflow-wrap: anywhere;
  }

  /* ...but "anywhere" breaks inside a word, and on a two-column summary
     it collapsed the table to about 100px and split the amounts in half:
     "$25." on one line and "00" on the next, which is what Dan meant by
     the values being stacked on your_commissions.php. A label/value table
     has no long URLs to tame, so it gets break-word, which only breaks a
     word that genuinely cannot fit. One-column note tables keep
     "anywhere" - those are the ones with the pasted links in them. */
  #tooplate_main table:has(> tbody > tr > td:nth-child(2)):not(:has(> tbody > tr > td:nth-child(3))) td {
    overflow-wrap: break-word;
  }

  /* ---- 3. record grids get their own swipe area ------------
     A grid is a table with at least three rows AND at least
     three columns - that deliberately excludes the one-column
     note and MOVE CREDITS tables, and the four-row single
     column referral panel on promote.php, none of which should
     be turned into something you have to swipe.

     Every grid on the member pages sits inside div.shadowed,
     so that div becomes the scroll box. overflow-x:auto also
     means the table below it no longer contributes to the
     min-content width of the layout tables above, which is
     what finally lets those shrink back to the screen.

     The width comes from --brt-swipe-w, measured on the real
     pages rather than guessed. Neither obvious answer works on
     its own: a plain 100% leaves the phone broken, because the
     table cell above is free to size itself to the table's
     max-content and the scroll box then simply inherits that
     full width and never scrolls. A single viewport-based
     figure fails the other way, because the panel is indented
     7px inside the content column on a phone but 38px from
     768px up - calc(100vw - 44px) is right at 390 and 76px too
     wide at 1000, where my own rule became the thing pushing
     the page off screen. So the figure changes with the band.
     min-width is only there so the box can never collapse.    */
  #tooplate_main .shadowed:has(table > tbody > tr:nth-child(3) > td:nth-child(3)),
  #tooplate_main .table-container {
    display: block;
    width: var(--brt-swipe-w);
    max-width: var(--brt-swipe-w);
    min-width: 240px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* traffic_sites.php nests div.shadowed inside div.table-container, so
     two scroll boxes end up on top of each other. The inner one must fill
     the outer one; giving it 100vw as well pushed its right edge 7px past
     the screen and produced a scrollbar inside a scrollbar.               */
  /* Only the OUTER box may scroll. A nested .shadowed was also getting
     overflow-x:auto while being exactly as wide as its content, so it
     could not scroll - and it sits directly under the finger, which is
     why Dan reported he still could not swipe. A scroll container that
     cannot scroll is worse than none. */
  #tooplate_main .table-container .shadowed,
  #tooplate_main .shadowed .shadowed {
    overflow-x: visible !important;
  }

  #tooplate_main .table-container .shadowed,
  #tooplate_main .shadowed .shadowed {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inside the swipe area the columns go back to behaving the
     way they do on a desktop: no mid-word breaking, and none
     of the percentage column widths from newlook.css section
     11, which are relative to the table and would just crush
     everything into a 350px-wide version of the same problem. */
  #tooplate_main .shadowed > table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) a,
  #tooplate_main .shadowed > table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) td,
  #tooplate_main .table-container table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) a,
  #tooplate_main .table-container table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) td {
    overflow-wrap: normal;
  }

  #tooplate_main .shadowed > table:has(> tbody > tr:nth-child(3) > td:nth-child(3)),
  #tooplate_main .table-container table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) {
    width: max-content !important;
    max-width: none !important;
    min-width: 100%;
  }

  #tooplate_main .shadowed > table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) tr > *,
  #tooplate_main .table-container table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) tr > * {
    width: auto !important;
    max-width: none !important;
  }

  /* A visible cue that the grid slides, otherwise a phone user
     has no reason to think there is anything to the right.    */
  #tooplate_main .shadowed:has(table > tbody > tr:nth-child(3) > td:nth-child(3))::-webkit-scrollbar,
  #tooplate_main .table-container::-webkit-scrollbar { height: 6px; }
  #tooplate_main .shadowed:has(table > tbody > tr:nth-child(3) > td:nth-child(3))::-webkit-scrollbar-thumb,
  #tooplate_main .table-container::-webkit-scrollbar-thumb {
    background: #8a6a3a; border-radius: 3px;
  }

  /* ---- 4. anything else that cannot shrink on its own ------
     max-width:100% is not enough for these. A percentage is
     treated as "no limit" while the browser works out how
     narrow the layout tables above are allowed to get, so a
     468px banner and a <textarea cols="55"> still reported
     their full size and held promote.php open at 493px. A
     viewport unit does not depend on the parent, so it is
     honoured during that calculation.                         */
  #tooplate_main img,
  #tooplate_main textarea,
  #tooplate_main input,
  #tooplate_main select {
    max-width: calc(100vw - 56px);
    box-sizing: border-box;
  }
  #tooplate_main img { height: auto; }

  /* The referral URLs on promote.php are one unbroken string
     and sit outside any grid, so they wrap rather than swipe. */
  #tooplate_main .shadowed a[href*="promo.php"],
  #tooplate_main .shadowed a[href*="splash"] { overflow-wrap: anywhere; }
}


/* ------------------------------------------------------------
   The add-a-site forms stack rather than swipe, and only on a
   genuinely small screen. By 900px they are no longer cut off
   on their own, and a stacked form on a near-desktop window
   would look broken rather than helpful.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* ---- 5. the add-a-site forms ----------------------------
     traffic_site_new.php and login_site_new.php were cut off
     the same way and Dan has not reported them yet. They are
     forms, so they must stack rather than swipe - you cannot
     type into a column that is off screen.

     responsive.css already stacks "#tooplate_main form table",
     but neither page has a <form> element around the table at
     all, so that rule has never applied to them. Keying on the
     input instead of on the wrapper is what makes it work.

     The width also comes from a hard <td align="center"
     width="800"> and <table width="804"> in the markup.       */
  #tooplate_main table[width],
  #tooplate_main td[width],
  #tooplate_main td[size] {
    width: auto !important;
  }

  /* The real culprit on those two pages is one level higher
     still: <div id="column_w610" style="width:800px">, an
     inline width on a div whose id says 610 and whose style
     says 800. It is an id with an inline style, so it beats
     everything the earlier mobile work did to .col_w* classes
     - which is why both pages stayed 800px wide however much
     the tables inside them were persuaded to shrink.          */
  #tooplate_main div[id^="column_w"],
  #tooplate_main div[id^="col_w"] {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  #tooplate_main table:has(> tbody > tr > td > input.TextBox),
  #tooplate_main table:has(> tbody > tr > td > input.TextBox) > tbody,
  #tooplate_main table:has(> tbody > tr > td > input.TextBox) > tbody > tr,
  #tooplate_main table:has(> tbody > tr > td > input.TextBox) > tbody > tr > td {
    display: block;
    width: auto !important;
    max-width: 100%;
    text-align: left !important;
  }

  /* Stacked, the border="1" grid that reads as a neat form on a
     desktop turns into a box round every single line, and the
     collapsed borders draw a rule straight through the "Site
     Name :" label. The outer frame stays, the internal cell
     borders go, and each row gets one hairline instead.       */
  #tooplate_main table:has(> tbody > tr > td > input.TextBox) {
    border-collapse: separate !important;
    border: 1px solid #999 !important;
    /* <table height="50"> is only a MINIMUM for a real table, but once the
       table is display:block it becomes a hard 50px. The rows then spill
       out of their own box and the ad column, which comes next in the
       document, lays out on top of them - which is why Dan could see
       "Site URL :" and then an advert where the field and the Submit and
       Cancel buttons should have been. */
    height: auto !important;
  }

  #tooplate_main table:has(> tbody > tr > td > input.TextBox) > tbody > tr > td {
    border: 0 !important;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  #tooplate_main table:has(> tbody > tr > td > input.TextBox) > tbody > tr {
    padding: 6px 0;
    border-bottom: 1px solid #4a4a4a;
  }

  #tooplate_main table:has(> tbody > tr > td > input.TextBox) > tbody > tr:last-child {
    border-bottom: 0;
  }

  #tooplate_main input.TextBox { width: 100%; }
}

/* ------------------------------------------------------------
   Phones indent far less than tablets do, so the swipe box can
   be much closer to the full width of the screen.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #tooplate_main { --brt-swipe-w: calc(100vw - 44px); }

  /* ---- 6. record grids must never be STACKED ---------------
     Dan: "I can't see all of the table columns" on the share
     pages, on an account that has data. Cause is not the swipe
     work at all - it is the older rule in this stylesheet:

         #tooplate_main form table,
         #tooplate_main form table tbody,
         #tooplate_main form table tr,
         #tooplate_main form table td { display: block; ... }

     That is a DESCENDANT selector, so it takes every table
     anywhere inside a <form>, not just the label/box form it
     was written for. The share pages put their whole record
     grid inside a <form> (each row has a credit box you type
     into), so the grid was turned into blocks and every column
     ended up on top of the last - all five cells reporting the
     same left edge. Nothing overflowed, so the earlier check
     called it fine; it was not a table any more.

     A form laid out as a table still stacks. A record grid -
     3+ rows AND 3+ columns, same test the swipe rules use -
     is put back to a real table and left to swipe sideways.  */
  #tooplate_main form table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) {
    display: table !important;
  }

  #tooplate_main form table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) > tbody {
    display: table-row-group !important;
  }

  #tooplate_main form table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) > tbody > tr {
    display: table-row !important;
  }

  #tooplate_main form table:has(> tbody > tr:nth-child(3) > td:nth-child(3)) > tbody > tr > td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
  }
}