/**
 * The classes the rich editor puts on images, video and tables.
 *
 * They live in a theme stylesheet because they must look the same in two places:
 * in the editor, while the author places the image, and on the site, once the
 * article is published. The editor invents no styles: what is shown there is what
 * the page gets.
 *
 * Alignment and frame are done with classes, not with `style`, because the
 * sanitizer (puck_richtext_helper.php) leaves only letters, digits, hyphens and
 * spaces on `class` — so the names here are written without diacritics.
 */

/* ------------------------------------------------------------------- images */

.rich-media-stanga {
    float: left;
    max-width: 50%;
    margin: 0 1rem .6rem 0;
}

.rich-media-dreapta {
    float: right;
    max-width: 50%;
    margin: 0 0 .6rem 1rem;
}

.rich-media-centru {
    display: block;
    margin: .6rem auto;
}

.rich-media-rama {
    padding: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .18);
}

.rich-media-rotunjit { border-radius: .5rem; }

.rich-media-umbra { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }

/* The caption under an image, when there is one. */
.rich-media-figura {
    display: inline-block;
    max-width: 100%;
    margin: .6rem 0;
}

.rich-media-figura figcaption {
    margin-top: .35rem;
    color: #666666;
    font-size: .85em;
    text-align: center;
}

/* ---------------------------------------------------------------------- video */

.rich-video-stanga { float: left; max-width: 50%; margin: 0 1rem .6rem 0; }
.rich-video-dreapta { float: right; max-width: 50%; margin: 0 0 .6rem 1rem; }
.rich-video-centru { display: block; margin: .8rem auto; }

.rich-video-rama {
    padding: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .5rem;
}

/* A video must not break the width on small screens. */
.rich-video,
.rich-media-stanga,
.rich-media-dreapta,
.rich-video-stanga,
.rich-video-dreapta { max-width: 100%; }

video.rich-video,
iframe.rich-video { width: 100%; height: auto; }

/* ------------------------------------------------------------------- tables */

.rich-tabel {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.rich-tabel th,
.rich-tabel td {
    padding: .5rem .7rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid rgba(0, 0, 0, .16);
}

.rich-tabel th {
    background: #f6f6f6;
    font-weight: 600;
}

.rich-tabel-fara-borduri th,
.rich-tabel-fara-borduri td { border: 0; }

.rich-tabel-fara-borduri tr + tr td { border-top: 1px solid rgba(0, 0, 0, .1); }

.rich-tabel-dungat tbody tr:nth-child(odd) { background: rgba(0, 0, 0, .03); }

.rich-tabel-compact th,
.rich-tabel-compact td { padding: .25rem .45rem; font-size: .92em; }

.rich-tabel-larg { width: 100%; }

/* ----------------------------------------------------------- column grid */

/* A row of columns, holding text, images or films side by side. The column count
   comes from the class (rich-coloane-3), put by the editor; on small screens the
   columns stack. The classes are the same in the editor and on the site, since this
   sheet loads in both. */
.rich-coloane {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    margin: 1rem 0;
}

.rich-coloane-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rich-coloane-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rich-coloane-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rich-coloane-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rich-coloane-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Seven columns or more make no sense on one row: as many as fit are placed, the
   rest go to the next row. This way the editor sets no cap — as many cards as you
   want — without the text narrowing until it is unreadable. The rule also catches a
   single column (rich-coloane-1), which still takes one row. */
.rich-coloane:not(.rich-coloane-2):not(.rich-coloane-3):not(.rich-coloane-4):not(.rich-coloane-5):not(.rich-coloane-6) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.rich-coloana { min-width: 0; }

/* The columns add no superfluous margins inside the row. */
.rich-coloana > *:first-child { margin-top: 0; }
.rich-coloana > *:last-child { margin-bottom: 0; }

/* On small screens, left or right alignment becomes normal placement. */
@media (max-width: 575.98px) {
    .rich-media-stanga,
    .rich-media-dreapta,
    .rich-video-stanga,
    .rich-video-dreapta {
        float: none;
        max-width: 100%;
        margin: .6rem 0;
    }
}

/* Below 768px the columns no longer fit side by side: they stack. */
@media (max-width: 767.98px) {
    .rich-coloane-2,
    .rich-coloane-3,
    .rich-coloane-4,
    .rich-coloane-5,
    .rich-coloane-6 { grid-template-columns: 1fr; }
}

/* ==================================== ready-made components =============== */

/*
 * What is picked from the editor's "Componente" panel; the list of HTML pieces is
 * in `src/componente.js`.
 *
 * They live here, not in rich-text-editor.css, for the same reason as the rest of
 * the sheet: the public site loads this sheet too, so what the editor shows is
 * exactly what the page gets.
 *
 * What is NOT touched here: the size and placement of headings and paragraphs.
 * Components do not build their own typography, they leave it to the theme — they
 * only set the box, the colour and the placement (border, background, corners,
 * spacing, lists). Otherwise two places would decide how big a heading is, and the
 * one that loses would be the theme.
 *
 * Class names are written without diacritics: the sanitizer leaves only letters,
 * digits, hyphens and spaces on `class`.
 *
 * Two rules here (the margins of the first and last child of a `.rich-bloc`) have a
 * twin in rich-text-editor.css: in the editor, the rules written there for headings
 * are stronger and would win. See there.
 */

.rich-bloc { margin: 1rem 0; }

.rich-bloc > *:first-child { margin-top: 0; }
.rich-bloc > *:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- Hero */

/* The title of a part, with its subtitle, centred. */
.rich-sectiune { text-align: center; }

.rich-subtitlu {
    color: #666666;
    font-size: 1.05em;
}

/* The small rounded badge above a heading. */
.rich-insigna {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .15rem .65rem;
    color: #e2001a;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #f6f6f6;
    border-radius: 999px;
}

.rich-hero {
    padding: 1.75rem 1.5rem;
    text-align: center;
    background: #f6f6f6;
    border: 1px solid #dedede;
    border-radius: .6rem;
}

/* ----------------------------------------------------------------- Buttons */

/* Links that look like buttons. They are still links: they carry `href`, so they
   work without JavaScript too, and the sanitizer keeps them. */
.rich-buton {
    display: inline-block;
    padding: .5rem 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: .35rem;
}

.rich-buton-primar {
    color: #fff;
    background: #e2001a;
    border-color: #e2001a;
}

.rich-buton-primar:hover { background: #b30015; border-color: #b30015; }

.rich-buton-contur {
    color: #e2001a;
    background: transparent;
    border-color: #e2001a;
}

.rich-buton-contur:hover { color: #fff; background: #e2001a; }

/* The button on a dark background. */
.rich-buton-deschis {
    color: #111111;
    background: #fff;
    border-color: #fff;
}

.rich-buton-deschis:hover { background: #f6f6f6; }

/* ------------------------------------------------------------- image slot */

/* Where an image goes: a dashed frame with a hint inside. The author deletes the
   row and presses the Image button. */
.rich-loc-poza {
    margin: 0;
    padding: 1.5rem 1rem;
    color: #666666;
    font-size: .92em;
    text-align: center;
    background: #f6f6f6;
    border: 1px dashed #c2c2c2;
    border-radius: .4rem;
}

/* A pre-filled image slot: no hint frame any more, but an image filling the box
   whatever its shape (square, wide, tall) — the image is cropped, not distorted.
   This is how components look when inserted, not empty. */
.rich-loc-plin {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #ededed;
    border: 0;
}

.rich-loc-plin > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The default film: 16:9, the size of its slot, with rounded corners like the rest. */
.rich-film-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    background: #0b0b0b;
    border-radius: .4rem;
    object-fit: cover;
}

/* ------------------------------------------------------------------- Boxes */

.rich-cadru {
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: .5rem;
}

.rich-cadru-umbra { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }

/* ----------------------------------------------------------------- Notices */

.rich-aviz {
    padding: .85rem 1rem;
    border-left: 4px solid #0b0b0b;
    border-radius: .35rem;
}

.rich-aviz p { margin: 0; }

.rich-aviz-info { background: #f6f6f6; border-left-color: #0b0b0b; }
.rich-aviz-succes { background: #f4f4f4; border-left-color: #0b0b0b; }
.rich-aviz-atentie { background: #fdf1f1; border-left-color: #e2001a; }
.rich-aviz-pericol { background: #fbe3e6; border-left-color: #b30015; }

/* ------------------------------------------------------------------ Cards */

.rich-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.1rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* A small rounded sign above the heading: checks, stars, step numbers. The sign is
   text, not a drawing: it can be changed by writing something else — or by picking
   from the editor icon list (see "Semnul" in the menu). */
.rich-avantaj { padding: .2rem 0; }

.rich-avantaj-semn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 0 .65rem;
    color: #e2001a;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
    background: #f6f6f6;
    border-radius: .6rem;
}

/* Icons placed in text: a small inline `span`. The character sits in it, or the
   drawing comes from the theme icon font (in which case the `span` is empty). */
.rich-icon {
    display: inline-block;
    font-style: normal;
    line-height: 1;
    vertical-align: -.06em;
}

/* Large figures, with the note below. */
.rich-cifre { text-align: center; }

.rich-cifra { padding: .2rem 0; }

.rich-cifra-numar {
    margin: 0;
    color: #e2001a;
    font-size: 2.1em;
    font-weight: 700;
    line-height: 1.1;
}

.rich-cifra-text {
    margin: .2rem 0 0;
    color: #666666;
    font-size: .92em;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* A team member: image, name, role. */
.rich-membru { text-align: center; }

.rich-membru h3 { margin: .6rem 0 .15rem; }

.rich-membru-poza {
    margin: 0;
    aspect-ratio: 1;
    border-radius: .6rem;
}

.rich-membru .rich-subtitlu { margin: 0; }

/* The question with its answer, one under another, separated by a thin line. They
   do not collapse (unlike accordions, they need no JavaScript): the answer is
   visible. */
.rich-intrebare {
    padding: .9rem 0;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.rich-intrebare:first-child { border-top: 0; padding-top: 0; }
.rich-intrebare:last-child { padding-bottom: 0; }

.rich-intrebare h4 { margin: 0 0 .3rem; }

.rich-intrebare p { margin: 0; color: #444444; }

/* The gallery: image slots show as squares, so the layout does not jump when the
   real image goes in. */
.rich-galerie .rich-loc-poza {
    margin: 0;
    aspect-ratio: 1;
}

/* Client logos: the name sits on a thin border, like a logo. */
.rich-marci .rich-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    margin: 0;
    color: #666666;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .4rem;
}

/* --------------------------------------------------------- Call to action */

.rich-cta {
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: #f6f6f6;
    border: 1px solid #dedede;
    border-radius: .6rem;
}

.rich-cta-banda {
    color: #fff;
    background: #111111;
    border-color: #111111;
}

/* On a dark background the text must be light — both the heading and the row under
   it. The button has its own colour, set above. */
.rich-cta-banda h3,
.rich-cta-banda p { color: #fff; }

/* ----------------------------------------------------------------- Prices */

.rich-pret {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: .5rem;
}

.rich-pret-recomandat {
    border-color: #e2001a;
    box-shadow: 0 6px 18px rgba(226, 0, 26, .16);
}

.rich-pret-suma {
    margin: 0 0 .75rem;
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.1;
}

.rich-pret-suma em {
    color: #666666;
    font-size: .45em;
    font-style: normal;
    font-weight: 500;
}

/* What the plan includes: no bullets, a check in front. */
.rich-pret-lista {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.rich-pret-lista li {
    position: relative;
    padding: .3rem 0 .3rem 1.4rem;
}

.rich-pret-lista li::before {
    position: absolute;
    left: 0;
    content: "\2713";
    color: #b30015;
    font-weight: 700;
}

/* ------------------------------------------------------------------ Steps */

.rich-pas-numar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 0 .5rem;
    color: #fff;
    font-size: .95em;
    font-weight: 700;
    background: #e2001a;
    border-radius: 50%;
}

/* ------------------------------------------------------------------- Text */

.rich-citat-autor {
    color: #666666;
    font-size: .92em;
}

.rich-lista-bife {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.rich-lista-bife li {
    position: relative;
    padding: .25rem 0 .25rem 1.6rem;
}

.rich-lista-bife li::before {
    position: absolute;
    left: 0;
    content: "\2713";
    color: #b30015;
    font-weight: 700;
}

/* A small heading over a thin line: it separates two text parts. */
.rich-despartire {
    padding-top: .9rem;
    border-top: 1px solid rgba(0, 0, 0, .16);
}

/* The same divider, but with the heading in the middle and lines on both sides. The
   lines are two elastic `::before`/`::after`, not a border: this way they shrink on
   their own when the heading is long and wraps onto two rows. */
.rich-despartire-linii {
    padding-top: 1.1rem;
    border-top: 0;
}

.rich-despartire-linii h4 {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 .5rem;
    color: #444444;
    font-size: .95em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rich-despartire-linii h4::before,
.rich-despartire-linii h4::after {
    flex: 1 1 2rem;
    height: 1px;
    content: "";
    background: rgba(0, 0, 0, .18);
}

/* The wide image with the text placed over it, at the bottom. The text is a single
   block row (the heading is bold, the row follows after a `br`), so it cannot
   overlap anything else however long it is. */
.rich-poza-text {
    position: relative;
}

.rich-poza-text .rich-loc-poza {
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    background: #f0f0f0;
}

.rich-poza-text-titlu {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 2.2rem 1.1rem 1rem;
    color: #fff;
    line-height: 1.45;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
    border-radius: 0 0 .4rem .4rem;
}

.rich-poza-text-titlu strong { font-size: 1.15em; }

/* The small image square at the top of the card: 56×56, like a large icon. */
.rich-card-poza-mica {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 .7rem;
    padding: 0;
    overflow: hidden;
    font-size: .55em;
    line-height: 1;
    text-align: center;
    border-radius: .5rem;
}

/* The announcement bar: text on the left, button on the right, on one row. */
.rich-anunt {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.15rem;
    text-align: left;
}

.rich-anunt .rich-anunt-text {
    margin: 0;
    flex: 1 1 16rem;
}

.rich-anunt .rich-actiuni {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
}

/* --------------------------------------------------------------- Timeline */

/* The stage thread: a dot on the left line, and the line continues into the gap
   below the stage, to join the next one. The last stage has no line under it —
   otherwise a stub would hang after it. */
.rich-etapa {
    position: relative;
    margin: 0 0 1rem;
    padding: 0 0 .2rem 1.5rem;
}

.rich-etapa::before {
    position: absolute;
    top: .5rem;
    left: 0;
    width: 11px;
    height: 11px;
    content: "";
    background: #e2001a;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #f6f6f6;
}

.rich-etapa::after {
    position: absolute;
    top: 1.15rem;
    bottom: -1rem;
    left: 5px;
    width: 2px;
    content: "";
    background: #dedede;
}

.rich-etapa:last-of-type::after { display: none; }

.rich-etapa-data {
    margin: 0 0 .2rem;
    color: #e2001a;
    font-size: .82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rich-etapa h3 { margin: 0 0 .3rem; }

.rich-etapa p { margin: 0; }

/* --------------------------------------------------- two-column band */

/* The text in one column, the buttons in the other, aligned to the middle of the
   band. */
.rich-promo {
    align-items: center;
    padding: 1.35rem 1.4rem;
    background: #f6f6f6;
    border: 1px solid #dedede;
    border-radius: .6rem;
}

.rich-promo h2 { margin: 0 0 .5rem; }

.rich-promo p { margin: 0; }

.rich-promo .rich-actiuni {
    margin: .25rem 0;
    text-align: right;
}

/* When the columns stack (on phones), the buttons align left: otherwise they would
   sit glued to the right edge, alone. */
@media (max-width: 767.98px) {
    .rich-promo .rich-actiuni { text-align: left; }
}

/* ----------------------------------------------------------------- Tables */

.rich-tabel {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: .96em;
}

.rich-tabel th,
.rich-tabel td {
    padding: .55rem .7rem;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, .14);
}

.rich-tabel th {
    font-weight: 700;
    background: #f4f4f4;
}

/* The comparison table: the first column says what is compared, the rest are plans
   — hence the headers and cells are centred, and the rows are striped. */
.rich-tabel-comparativ th,
.rich-tabel-comparativ td {
    text-align: center;
}

.rich-tabel-comparativ th:first-child,
.rich-tabel-comparativ td:first-child {
    text-align: left;
}

.rich-tabel-comparativ tbody tr:nth-child(even) { background: #fafafa; }

/* The specification list: bold label, value beside it, no table header. */
.rich-tabel-specificatii td:first-child {
    width: 42%;
    font-weight: 700;
    color: #444444;
}

/* The collage: columns of different heights — hence they are not all stretched
   alike. */
.rich-colaj { align-items: start; }

.rich-colaj .rich-coloana {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.rich-colaj .rich-loc-poza {
    margin: 0;
    min-height: 4rem;
}

.rich-colaj .rich-coloana > .rich-loc-poza:nth-child(odd) { aspect-ratio: 3 / 4; }
.rich-colaj .rich-coloana > .rich-loc-poza:nth-child(even) { aspect-ratio: 4 / 3; }

/* The card with the image on top: the image touches the card edges, the text comes
   below. It is also written with `.camp-rich .rich-editor` in front: in the editor,
   `.rich-editor .rich-bloc > *:first-child` (which removes the top margin) loads
   after this file and would win otherwise. */
.rich-card-poza-mare > .rich-card-poza-lata,
.camp-rich .rich-editor .rich-bloc.rich-card-poza-mare > .rich-card-poza-lata {
    margin: -1.1rem -1.15rem .8rem;
    padding: 0;
    aspect-ratio: 16 / 9;
    border-radius: .5rem .5rem 0 0;
}

/* A coloured border on the left: it lights up on any object, from the style
   checkboxes. */
.rich-linie-stinga {
    padding-left: 1rem;
    border-left: 4px solid #e2001a;
}

/* The price table: the header stays on the first row, and the buttons sit at the
   bottom. */
.rich-tabel-preturi th,
.rich-tabel-preturi td {
    text-align: center;
}

.rich-tabel-preturi strong {
    font-size: 1.35em;
}

.rich-tabel-preturi td > p:last-child {
    margin: 0;
}

.rich-tabel-preturi .rich-buton {
    display: inline-block;
}

/* The box with the image on the left: the image floats and the text flows beside
   it. `flow-root` keeps the box height, otherwise it would stay as tall as the row
   next to the floating image. It is also written with `.camp-rich .rich-editor`,
   because `.rich-card` is a flexible (column) box and would put the image on a row
   of its own instead of beside the text. */
.rich-bloc.rich-caseta-poza,
.camp-rich .rich-editor .rich-bloc.rich-caseta-poza {
    display: flow-root;
}

.rich-caseta-poza-poza {
    float: left;
    width: 9rem;
    margin: 0 1rem .4rem 0;
    aspect-ratio: 1;
}

.rich-caseta-poza h3 {
    margin-top: 0;
}

/* The old film slot (a 16:9 rectangle with a CSS "play" drawing): the "Loc de film"
   component now brings a real film, but pages saved earlier still have this row in
   them, so the style stays. The sign is decoration, not content: it is not saved. */
.rich-film-loc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 0;
    padding: 1.5rem 1rem;
    aspect-ratio: 16 / 9;
    background: #111111;
    border: 0;
    color: #e5e5e5;
}

.rich-film-loc::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 1.1rem solid #fff;
    border-top: .7rem solid transparent;
    border-bottom: .7rem solid transparent;
    opacity: .85;
}

/* Axis presets: size and corners. They go on any object (boxes, cards, bands), so
   they are written as the last rules — with the same score as ".rich-card" or
   ".rich-cadru", but after them, so they can change them. */
.rich-mare {
    padding: 1.7rem 1.5rem;
    font-size: 1.06em;
}

.rich-mare h3 { font-size: 1.45em; }

.rich-mica {
    padding: .7rem .9rem;
    font-size: .93em;
}

.rich-colturi-rotunde { border-radius: 1rem; }
.rich-colturi-drepte { border-radius: 0; }

/* "Fără chenar": removes the border from any component that has one of its own kind
   (box, card, price box, notice) and from table cells. It is written with the
   `class` attribute next to the class, to beat the single-class rules in this sheet
   — otherwise `!important` would be needed, and the theme could no longer put the
   border back. */
[class*="rich-"].rich-fara-chenar,
[class*="rich-"].rich-fara-chenar th,
[class*="rich-"].rich-fara-chenar td {
    border: 0;
}

/* The Bootstrap table case is added here too:
   `.table-bordered > :not(caption) > * > *` has a close score, and the rule above
   must win. */
table.rich-fara-chenar,
table.rich-fara-chenar > thead > tr > *,
table.rich-fara-chenar > tbody > tr > *,
table.rich-fara-chenar > tfoot > tr > * {
    border: 0;
}