/* ============================================
   THE PLACE — iRedAdmin Modern Theme
   Based on The Place CRM Design System
   Primary: #4f4136 | Light: #d3cabc | Lighter: #f2efe4
   ============================================ */

:root {
    --tp-primary: #4f4136;
    --tp-primary-dark: #3a2f27;
    --tp-primary-light: #6b5b4f;
    --tp-accent: #d3cabc;
    --tp-cream: #f2efe4;
    --tp-cream-dark: #e8e3d8;
    --tp-bg: #f8f6f1;
    --tp-white: #ffffff;
    --tp-text: #1a1613;
    --tp-text-muted: #6b635b;
    --tp-border: #e0ddd5;
    --tp-success: #27ae60;
    --tp-error: #c0392b;
    --tp-warning: #f39c12;
    --tp-info: #4f4136;
    --tp-shadow-sm: 0 1px 3px rgba(79, 65, 54, 0.08);
    --tp-shadow: 0 4px 16px rgba(79, 65, 54, 0.10);
    --tp-shadow-lg: 0 8px 32px rgba(79, 65, 54, 0.12);
    --tp-radius: 12px;
    --tp-radius-sm: 8px;
    --tp-radius-xs: 6px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tp-text);
    background: var(--tp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== UTILITIES ========== */
.clear:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.fl { float: left; }
.fr { float: right; }
.fl-space { float: left; margin-right: 5px; }
.fr-space { float: right; margin-left: 5px; }
.hidden { display: none !important; }
.display { display: block; }
.vcenter { vertical-align: middle; }
.center { text-align: center; margin: auto; }
.left { text-align: left; }
.right { text-align: right; }

/* Sizing utilities */
.half { width: 48% !important; }
.trio { width: 31% !important; }
.quad { width: 23% !important; }
.full { width: 100%; }
.size-80 { width: 80px; }
.size-120 { width: 120px; }
.size-150 { width: 150px; }
.size-170 { width: 170px; }
.size-200 { width: 200px; }
.size-250 { width: 250px; }
.size-300 { width: 300px; }

/* Spacing utilities */
.bt-space0 { margin-bottom: 0 !important; }
.bt-space5 { margin-bottom: 5px !important; }
.bt-space10 { margin-bottom: 10px !important; }
.bt-space15 { margin-bottom: 15px !important; }
.bt-space20 { margin-bottom: 20px !important; }
.bt-space30 { margin-bottom: 30px !important; }
.bt-space40 { margin-bottom: 40px !important; }
.top-space5 { margin-top: 5px !important; }
.left-space5 { margin-left: 5px !important; }
.right-space5 { margin-right: 5px !important; }

/* ========== TYPOGRAPHY ========== */
h1 {
    font-family: 'Noto Serif', Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--tp-primary);
    margin: 0 0 12px 0;
    line-height: 1.3;
}
h2 {
    font-family: 'Noto Serif', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--tp-primary);
    margin: 0 0 10px 0;
}
h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--tp-primary);
    margin: 0 0 8px 0;
}
h4, h5, h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-text);
    margin: 0 0 6px 0;
}
strong { color: var(--tp-text); font-weight: 600; }
small { font-size: 12px; color: var(--tp-text-muted); display: block; line-height: 1.4; }
code { font-family: 'SF Mono', 'Courier New', monospace; color: var(--tp-primary); background: var(--tp-cream); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

a {
    color: var(--tp-primary);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover { color: var(--tp-primary-dark); text-decoration: underline; }

.page p { margin: 0 0 16px 0; line-height: 1.6; }
.page p.description { font-size: 12px; color: var(--tp-text-muted); margin-bottom: 8px; }

/* ========== HEADER / PAGETOP ========== */
.pagetop {
    background: linear-gradient(135deg, var(--tp-primary) 0%, var(--tp-primary-dark) 100%);
    border-bottom: none;
    position: relative;
    z-index: 100;
    box-shadow: var(--tp-shadow);
}
.head {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    background: none;
}
.head_top {
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo { padding: 0; }
.logo a { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.logo .picture { float: none; margin: 0; height: 48px; width: auto; }
.logo .textlogo { float: none; display: flex; flex-direction: column; }
.logo .title {
    font-family: 'Noto Serif', Georgia, serif;
    font-size: 22px;
    color: var(--tp-cream);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}
.logo .text {
    font-size: 12px;
    color: var(--tp-accent);
    font-weight: 500;
    margin: 0;
    position: static;
}

/* Top buttons */
.topbuts {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbuts ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topbuts li { float: none; margin: 0; }
.topbuts li a {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    color: var(--tp-cream);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--tp-radius-xs);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.topbuts li a:hover {
    background: rgba(255,255,255,0.22);
    color: var(--tp-white);
}
.topbuts li a.red { background: rgba(192, 57, 43, 0.85); }
.topbuts li a.red:hover { background: var(--tp-error); }

.user {
    clear: none;
    float: none;
    padding: 0;
    margin-left: 16px;
}
.user-detail { text-align: right; }
.user-detail .text {
    font-size: 12px;
    color: var(--tp-accent);
    font-weight: 500;
}

/* ========== MENU ========== */
.menu {
    background: rgba(0,0,0,0.12);
    margin: 0 -24px;
    padding: 0 24px;
}
.menu ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
}
.menu li {
    float: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.menu li a {
    display: block;
    padding: 8px 16px;
    background: transparent;
    color: var(--tp-accent);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--tp-radius-xs);
    transition: all 0.2s;
    line-height: 1.4;
    text-shadow: none;
}
.menu li a:hover {
    background: rgba(255,255,255,0.1);
    color: var(--tp-white);
}
.menu li.active a {
    background: var(--tp-accent);
    color: var(--tp-primary);
    font-weight: 600;
}

/* Dropdown menus */
.menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--tp-white);
    border-radius: var(--tp-radius-sm);
    box-shadow: var(--tp-shadow-lg);
    padding: 6px 0;
    margin-top: 4px;
    border: 1px solid var(--tp-border);
    z-index: 200;
}
.menu li:hover > ul { display: block; }
.menu li li { float: none; padding: 0; }
.menu li li a {
    padding: 8px 16px !important;
    background: none !important;
    color: var(--tp-text-muted) !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}
.menu li li a:hover {
    background: var(--tp-cream) !important;
    color: var(--tp-primary) !important;
}
.menu li li.active a {
    color: var(--tp-primary) !important;
    font-weight: 600 !important;
    background: var(--tp-cream) !important;
}

/* ========== BREADCRUMB ========== */
.breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
}
.breadcrumb .bread-links {
    line-height: 1.4;
    font-size: 13px;
}
.breadcrumb ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { float: none; margin: 0; display: flex; align-items: center; }
.breadcrumb li.first { padding: 0; background: none; }
.breadcrumb li span { padding: 0 4px; color: var(--tp-text-muted); }
.breadcrumb a { color: var(--tp-primary); }

/* ========== MAIN LAYOUT ========== */
.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.main-wrap { padding: 24px 0; }
.page { padding-bottom: 24px; }
.pagesize { max-width: 1200px; margin: 0 auto; text-align: left; }

/* ========== CONTENT BOXES ========== */
.content-box {
    background: var(--tp-white);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow-sm);
    border: 1px solid var(--tp-border);
    margin-bottom: 24px;
    overflow: hidden;
}
.content-box .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tp-border);
    background: var(--tp-white);
    min-height: auto;
}
.box-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--tp-primary);
    margin: 0;
    padding: 0;
    border: none;
    line-height: 1.4;
}
.box-header .tabs {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: static;
}
.box-header .tabs li { float: none; margin: 0; }
.box-header .tabs li a {
    display: block;
    padding: 6px 14px;
    color: var(--tp-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--tp-radius-xs);
    transition: all 0.2s;
    border: none;
}
.box-header .tabs li a:hover {
    background: var(--tp-cream);
    color: var(--tp-primary);
}
.box-header .tabs li.active a,
.box-header .tabs li a.selected {
    background: var(--tp-primary);
    color: var(--tp-white);
    border: none;
}
.content-box .box-body { background: var(--tp-white); border: none; }
.content-box .box-wrap { padding: 20px; }

/* ========== TABLES ========== */
table { width: 100%; margin: 0 0 16px 0; border-collapse: collapse; }

table.basic {
    border-spacing: 0;
    line-height: 1.5;
    margin-bottom: 16px;
}
table.basic th,
table.basic .title {
    text-align: left;
    font-weight: 600;
    color: var(--tp-primary);
    padding: 8px 12px;
    border-bottom: 2px solid var(--tp-border);
    white-space: nowrap;
}
table.basic td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--tp-border);
    line-height: 1.5;
}
table.basic td p { padding: 0; }

table.style1 {
    border: none;
    margin-bottom: 16px;
}
table.style1 caption {
    background: var(--tp-cream);
    color: var(--tp-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    text-align: left;
    border-radius: var(--tp-radius-sm) var(--tp-radius-sm) 0 0;
}
table.style1 thead th,
table.style1 thead td {
    background: var(--tp-cream);
    color: var(--tp-primary);
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--tp-border);
    white-space: nowrap;
    font-size: 13px;
}
table.style1 tbody th,
table.style1 tbody .title {
    font-weight: 600;
    color: var(--tp-text);
    white-space: nowrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tp-border);
}
table.style1 td {
    background: var(--tp-white);
    border-bottom: 1px solid var(--tp-border);
    padding: 10px 12px;
    line-height: 1.5;
    font-size: 13px;
}
table.style1 tr:hover td { background: var(--tp-cream); }
table.style1 td p { padding: 0; }
table.style1 .icon16 { margin: 0; }
table.style1 td.vcenter { vertical-align: middle; }
table.style1 td.checkbox { width: 10px; }

/* ========== BUTTONS ========== */
.button, input.button, a.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-white);
    cursor: pointer;
    background: var(--tp-primary-light);
    padding: 8px 16px;
    border-radius: var(--tp-radius-xs);
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}
.button:hover, input.button:hover, a.button:hover {
    color: var(--tp-white);
    text-decoration: none;
    background: var(--tp-primary);
    transform: translateY(-1px);
    box-shadow: var(--tp-shadow-sm);
}
.button:active {
    transform: translateY(0);
}
.button.green, input.button.green {
    background: var(--tp-primary);
}
.button.green:hover, input.button.green:hover {
    background: var(--tp-primary-dark);
}
.button.red, input.button.red {
    background: var(--tp-error);
}
.button.red:hover, input.button.red:hover {
    background: #a93226;
}
.button.blue, input.button.blue {
    background: var(--tp-primary-light);
}
.button.blue:hover, input.button.blue:hover {
    background: var(--tp-primary);
}
.button.grey, input.button.grey {
    background: #b8b4ac;
    cursor: not-allowed;
}

/* ========== FORMS ========== */
label {
    line-height: 1.5;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--tp-text);
}
label:hover { color: var(--tp-primary); }

input.text, textarea, select {
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-xs);
    font-family: inherit;
    font-size: 13px;
    color: var(--tp-text);
    background: var(--tp-white);
    padding: 8px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input.text { height: 36px; }
input.text:focus, textarea:focus, select:focus {
    border-color: var(--tp-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 65, 54, 0.08);
}
select { height: 36px; padding: 0 8px; }
textarea { min-height: 80px; resize: vertical; }
input.checkbox, input.radio { cursor: pointer; }
input.submit {
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-white);
    cursor: pointer;
    background: var(--tp-primary);
    padding: 8px 16px;
    border-radius: var(--tp-radius-xs);
    transition: all 0.2s;
}
input.submit:hover { background: var(--tp-primary-dark); }

.form-label { display: block; width: 130px; }
.form-field { padding-bottom: 12px; }
span.required { color: var(--tp-error); font-weight: bold; }
label.error { color: var(--tp-error); }
input.disabled { cursor: not-allowed; background: var(--tp-cream); opacity: 0.7; }

/* ========== NOTIFICATIONS ========== */
.notification {
    border-radius: var(--tp-radius-sm);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}
.notification a.close {
    display: block;
    width: 20px;
    height: 20px;
    background: none;
    font-size: 16px;
    text-indent: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    color: inherit;
    opacity: 0.5;
    text-decoration: none;
    text-align: center;
    line-height: 20px;
}
.notification a.close:hover { opacity: 1; }
.notification a.close:before { content: "✕"; }
.notification p {
    margin: 0;
    padding: 0 20px 0 0 !important;
    line-height: 1.5;
    color: inherit;
}
.note-success { background: #eafaf1; color: #1e8449; border: 1px solid #a9dfbf; }
.note-error { background: #fdedec; color: #a93226; border: 1px solid #f5b7b1; }
.note-attention { background: #fef5e7; color: #b9770e; border: 1px solid #f9e79f; }
.note-info { background: #f2efe4; color: var(--tp-primary); border: 1px solid var(--tp-accent); }

/* ========== PAGINATION ========== */
.pager { font-size: 13px; line-height: 1; display: flex; align-items: center; gap: 4px; }
.pager a { display: inline-flex; align-items: center; justify-content: center; }
.pager .nav { display: flex; gap: 0; }
.pager .nav a {
    width: 32px;
    height: 32px;
    border: 1px solid var(--tp-border);
    color: var(--tp-text-muted);
    text-decoration: none;
    border-radius: var(--tp-radius-xs);
    transition: all 0.2s;
}
.pager .nav a:hover { background: var(--tp-cream); color: var(--tp-primary); }
.pager .pages { display: flex; gap: 4px; margin: 0 4px; }
.pager .pages a {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tp-border);
    color: var(--tp-text);
    text-decoration: none;
    border-radius: var(--tp-radius-xs);
    font-weight: 500;
    transition: all 0.2s;
}
.pager .pages a:hover { background: var(--tp-cream); color: var(--tp-primary); }
.pager .pages a.active {
    background: var(--tp-primary);
    color: var(--tp-white);
    border-color: var(--tp-primary);
}
.pager a.first, .pager a.previous, .pager a.next, .pager a.last {
    background-position: center;
    background-repeat: no-repeat;
}

/* ========== FOOTER ========== */
.footer {
    color: var(--tp-text-muted);
    font-size: 12px;
    padding: 20px 24px;
    background: var(--tp-white);
    border-top: 1px solid var(--tp-border);
    text-align: center;
}
.footer .pagesize { text-align: center; }
.footer a { color: var(--tp-primary); font-weight: 500; }
.footer strong { color: var(--tp-text); }

/* ========== SIDEBAR / SIDEMENU ========== */
.sidemenu { width: 100%; }
.sidemenu ul.list { list-style: none; padding: 0 0 16px 0; line-height: 1.5; }
.sidemenu ul.list li {
    margin-bottom: 4px;
    background: var(--tp-white);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-xs);
    transition: all 0.2s;
}
.sidemenu ul.list li:hover { background: var(--tp-cream); }
.sidemenu ul.list a {
    color: var(--tp-primary);
    text-decoration: none;
    display: block;
    padding: 8px 12px;
    font-size: 13px;
}
.sidemenu ul.list li.active { background: var(--tp-cream); border-color: var(--tp-accent); }
.sidemenu ul.list li.active a { color: var(--tp-primary); font-weight: 600; }

/* ========== MARK / HIGHLIGHT BOXES ========== */
.mark {
    background: var(--tp-white);
    color: var(--tp-text);
    display: block;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
}
.mark p { padding-bottom: 8px; }
.mark_blue {
    background: #f2efe4;
    color: var(--tp-primary);
    display: block;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--tp-radius-sm);
}
.mark_blue p { padding-bottom: 8px; }

/* ========== COLUMNS ========== */
.columns { display: flex; gap: 24px; flex-wrap: wrap; }
.col1-2 { flex: 1 1 calc(50% - 12px); min-width: 300px; }
.col1-3 { flex: 1 1 calc(33.333% - 16px); min-width: 260px; }
.col2-3 { flex: 1 1 calc(66.666% - 8px); min-width: 400px; }
.col1-4 { flex: 1 1 calc(25% - 18px); min-width: 200px; }
.col2-4 { flex: 1 1 calc(50% - 12px); min-width: 300px; }
.col3-4 { flex: 1 1 calc(75% - 6px); min-width: 500px; }

/* ========== HEADER (page title bar) ========== */
.header {
    border-bottom: 1px solid var(--tp-border);
    margin-bottom: 20px;
    padding-bottom: 12px;
}
.header .links { float: right; line-height: 1.4; color: var(--tp-text-muted); padding: 0; }
.header .links li { float: left; margin-left: 12px; list-style: none; }
.header .links a { color: var(--tp-text-muted); }
.header .links a:hover { color: var(--tp-primary); text-decoration: none; }

/* ========== TREE / LISTS ========== */
ul.tree { list-style: none; padding: 0; }
ul.tree ul { padding-left: 16px; }
ul.tree li { line-height: 1.8; }
ul.tree li span.item { padding-left: 20px; font-weight: 600; cursor: pointer; }

/* ========== FILTER BY FIRST CHAR ========== */
.filter_by_first_char { padding: 8px; display: block; text-align: center; }
.filter_by_first_char a {
    padding: 4px 8px;
    display: inline-block;
    border-radius: var(--tp-radius-xs);
    color: var(--tp-text-muted);
    text-decoration: none;
    transition: all 0.2s;
    margin: 2px;
}
.filter_by_first_char a:hover { background: var(--tp-cream); color: var(--tp-primary); }

/* ========== COLOR UTILITIES ========== */
.color-grey { color: #b8b4ac; }
.color-green { color: var(--tp-success); }
.color-red { color: var(--tp-error); }
.color-purple { color: #8e44ad; }
.color-blue { color: #2980b9; }
.color-yellow, .color-warning { color: var(--tp-warning) !important; }
.color-link { color: var(--tp-primary); }

/* ========== MISC ========== */
.rule {
    border-top: 1px dashed var(--tp-border);
    margin: 16px 0;
}
.rule2 { margin: 24px 0 16px; padding: 0; }
.rule3 { padding: 2px 0 20px; background: none; }

.fa, .fa-lg { vertical-align: middle; }
.fa-plus { color: var(--tp-primary); }
.fa-warning { color: var(--tp-warning); }

/* Thumb / gallery */
.thumb {
    display: block;
    border: 1px solid var(--tp-border);
    padding: 3px;
    background: var(--tp-white);
    border-radius: var(--tp-radius-xs);
}
a:hover .thumb { border-color: var(--tp-primary); }

/* Gallery */
.gallery {
    background: var(--tp-white);
    color: var(--tp-text);
    display: block;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
}

/* Modal / fancybox */
.modal-window { width: auto; }
.modal-window p { padding-bottom: 20px; line-height: 1.5; }
.modal-400 { width: 400px; }
.modal-600 { width: 600px; }
.modal-800 { width: 800px; }

/* Quick edit */
.edit-field textarea { width: 95% !important; }
.edit-field input { width: auto !important; display: block; border: 1px solid var(--tp-border); font-size: 13px; font-family: inherit; padding: 6px 10px; border-radius: var(--tp-radius-xs); }
.long input { width: 95% !important; }

/* Textarea width utility */
.textarea { width: 50%; font-size: 13px; }

/* Code blocks */
.code {
    background: var(--tp-cream);
    color: var(--tp-primary);
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--tp-radius-xs);
    margin-bottom: 8px;
    display: inline-block;
}

/* Online user / icon links (unused but kept for compatibility) */
.online-user .avatar { border: 2px solid var(--tp-border); border-radius: var(--tp-radius-xs); }
.online-user p { color: var(--tp-text-muted); }

/* Standard lists */
ul.standard { list-style-type: square; padding: 10px 0 20px 16px; }
ol.standard { list-style-type: decimal; padding: 10px 0 20px 22px; }

/* Event list (unused but kept) */
.event-list li { border: 1px solid var(--tp-border); background: var(--tp-cream); border-radius: var(--tp-radius-xs); margin-top: 4px; padding: 8px; }

/* Slide boxes */
.box-slide-head span.slide-but { background: none !important; cursor: pointer; }

/* Iconbar (unused but kept) */
.content-box .iconbar { background: var(--tp-cream); height: auto; min-height: 100px; }

/* Main icons (unused but kept) */
.main-icons li { text-align: center; }
.main-icons a { color: var(--tp-text); text-decoration: none; }

/* Content box sidebar layouts */
.content-box .sidebar1-2 { display: flex; gap: 20px; }
.content-box .sidebar1-2 .sidebar { flex: 1; padding: 10px; }

/* Content box nested columns */
.content-box .col1-2 { flex: 1 1 calc(50% - 9px); }
.content-box .col1-3 { flex: 1 1 calc(33.333% - 12px); }
.content-box .col2-3 { flex: 1 1 calc(66.666% - 6px); }
.content-box .col1-4 { flex: 1 1 calc(25% - 13.5px); }
.content-box .col2-4 { flex: 1 1 calc(50% - 9px); }
.content-box .col3-4 { flex: 1 1 calc(75% - 4.5px); }

/* Additional compatibility */
.lastcol { margin-right: 0 !important; }
q { background: var(--tp-cream); color: var(--tp-text); display: block; padding: 12px 12px 12px 36px; border-radius: var(--tp-radius-xs); font-style: italic; }
q cite { color: var(--tp-text-muted); display: block; font-size: 12px; padding-top: 4px; }